/*
  The hero's working model of the product (index.html, `.hero-shot`).

  A small HTML version of the workspace - sidebar, top bar, ten screens -
  inside the browser chrome that styles.css already draws. Everything here
  is scoped under `.dm` and prefixed `dm-`, and it obeys the rules at the top
  of styles.css: the action layer is monochrome, cyan appears only as the
  product's own accent (the active sidebar item, a status tag, the click
  ring), and the radius hierarchy is unchanged. It borrows `.tag`, `.avatar`,
  `.money`, `.cal-grid`, `.addr` and `.btn` from styles.css rather than
  redefining them, so the fragment reads as the same product the sections
  below it describe.

  The frame keeps a fixed shape so the page does not jump as the tour
  switches screens: 16:10 on a desktop, capped by the viewport; a fixed
  height on a phone, where the sidebar becomes a strip of tabs and the
  screens scroll inside the frame instead of stretching it.
*/

.dm {
    position: relative;
    display: flex; flex-direction: column;
    aspect-ratio: 16 / 10;
    max-height: 78vh;
    min-height: 520px;
    background: var(--surface-soft);
    text-align: left;
}
.dm .shot-chrome { flex: none; }

/* The tour control lives in the chrome, outside the "app", so pausing and
   resuming does not count as touching the product. */
.dm-tour { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dm-tour-label {
    font-size: 11.5px; color: var(--muted-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-tour-btn {
    appearance: none; border: 1px solid var(--hairline); background: var(--canvas);
    font: inherit; font-size: 11.5px; font-weight: 500; color: var(--ink);
    height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pill);
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px; flex: none;
}
.dm-tour-btn svg { width: 10px; height: 10px; fill: currentColor; }

/* ------------------------------------------------------------- layout --- */

.dm-app {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: 208px minmax(0, 1fr);
}

.dm-side {
    background: var(--canvas);
    border-right: 1px solid var(--hairline);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.dm-ws {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px 8px;
    font-size: 13px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-ws-mark {
    flex: none; width: 24px; height: 24px; border-radius: 6px;
    background: var(--ink); color: var(--on-dark);
    font-size: 11px; display: grid; place-items: center;
}
.dm-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 12px; overflow: auto; }
.dm-group {
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-soft); padding: 12px 10px 4px;
}
.dm-item {
    appearance: none; border: 0; background: transparent;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--body);
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--r-md);
    text-align: left; cursor: pointer; white-space: nowrap;
}
.dm-item svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.dm-item.is-on { background: rgba(0,174,216,.10); color: var(--ink); }
.dm-item.is-on svg { color: #067A96; }
.dm-item.is-pressed { transform: scale(.97); }

.dm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.dm-top {
    flex: none; height: 48px;
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
    background: var(--canvas); border-bottom: 1px solid var(--hairline);
}
.dm-crumb {
    font-size: 12.5px; color: var(--muted); margin-right: auto;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-crumb b { color: var(--ink); font-weight: 500; }
.dm-bell { position: relative; width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); flex: none; }
.dm-bell svg { width: 17px; height: 17px; }
.dm-bell b {
    position: absolute; top: -2px; right: -3px;
    min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
    background: var(--brand-accent); color: var(--on-dark);
    font-size: 9.5px; font-weight: 600; display: grid; place-items: center;
}
.dm-user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); flex: none; }
.dm-ava {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--badge-violet); color: var(--on-dark);
    font-size: 10px; font-weight: 600; display: grid; place-items: center;
}
.dm-cta {
    flex: none; display: inline-flex; align-items: center;
    height: 30px; padding: 0 12px; border-radius: var(--r-md);
    background: var(--primary); color: var(--on-dark);
    font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.dm-cta:active { background: var(--primary-active); }

.dm-pages {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}
.dm-page { display: none; }
.dm-page.is-on { display: block; animation: dm-in .28s ease-out; }
@keyframes dm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------ page furniture --- */

.dm-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.dm-h h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.dm-sub { font-size: 12px; color: var(--muted); }
.dm-spacer { flex: 1 1 auto; }
.dm-right { float: right; font-weight: 400; color: var(--muted-soft); font-size: 11.5px; }
.dm-mt { margin-top: 12px; }
.dm-mt-sm { margin-top: 10px; }

/* SVG icons inside buttons and chips inherit the 1.8px stroke style. */
.dm svg:not(.dm-cursor svg) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dm-btn {
    height: 30px; padding: 0 12px;
    font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
    border-radius: var(--r-md); border: 1px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.dm-btn svg { width: 13px; height: 13px; }
.dm-btn-dark  { background: var(--primary); color: var(--on-dark); }
.dm-btn-dark:active { background: var(--primary-active); }
.dm-btn-light { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.dm-btn-ok    { background: rgba(16,185,129,.12); color: #0A7C5A; }
.dm-btn-sm    { height: 26px; padding: 0 9px; font-size: 11.5px; }
.dm-btn-sm svg { width: 12px; height: 12px; }
.dm-btn[disabled] { background: var(--surface-strong); color: var(--muted); cursor: default; }
.dm-btn.is-pressed, .dm-next.is-pressed, .dm-input.is-pressed { transform: scale(.97); }

.dm-link {
    appearance: none; border: 0; background: none; padding: 0;
    font: inherit; font-size: inherit; font-weight: 500; color: #067A96;
    cursor: pointer; text-decoration: none;
}

.dm-search { position: relative; display: inline-flex; }
.dm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted-soft); }
.dm-input {
    height: 30px; width: 220px; min-width: 0;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--canvas); padding: 0 10px 0 30px;
    font: inherit; font-size: 12.5px; color: var(--ink); outline: none;
}
.dm-input:focus, .dm-input.is-focus { border-color: var(--ink); }

.dm-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    min-width: 0; overflow: hidden;
}
.dm-card-h {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 16px; border-bottom: 1px solid var(--hairline-soft);
    font-size: 13px; font-weight: 600; color: var(--ink);
}
.dm-card-h .dm-meta { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted-soft); }
.dm-card-h .dm-link.dm-meta { color: #067A96; font-weight: 500; }
.dm-card-b { padding: 4px 16px 8px; }
.dm-card-b-only { padding-top: 6px; }
.dm-money { padding-top: 14px; padding-bottom: 14px; }
.dm-empty { font-size: 12.5px; color: var(--muted); padding: 10px 0 8px; max-width: 60ch; }

.dm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.dm-kpi { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; }
.dm-kpi-n { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-kpi-l { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dm-kpi-s { font-size: 11.5px; color: var(--muted-soft); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.dm-cols-even { grid-template-columns: 1fr 1fr; }

.dm-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline-soft); }
.dm-row:first-child { border-top: 0; }
.dm-row-col { align-items: stretch; }
.dm-row.is-muted { opacity: .55; }
.dm-row.is-done .dm-row-t { color: var(--muted); }
.dm-row-main { flex: 1 1 auto; min-width: 0; }
.dm-row-t { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.dm-row-s { font-size: 11.5px; color: var(--muted-soft); line-height: 1.4; }
.dm-row .avatar { width: 30px; height: 30px; font-size: 11px; }
.dm-acts { display: inline-flex; gap: 6px; flex: none; }

.dm-step {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 600;
    background: var(--surface-card); color: var(--muted);
}
.dm-step.is-done { background: rgba(16,185,129,.14); color: #0A7C5A; }
.dm-step.is-on { background: var(--ink); color: var(--on-dark); }

.dm-bar { height: 6px; border-radius: 3px; background: var(--hairline-soft); overflow: hidden; margin: 7px 0 5px; }
.dm-bar i { display: block; height: 100%; background: var(--brand-accent); border-radius: 3px; }
.dm-bar.is-warn i { background: var(--warning); }

.dm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dm-pills .tag { font-size: 11.5px; padding: 4px 10px; display: inline-flex; }

.dm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dm-table th {
    text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-soft); padding: 10px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.dm-table td { padding: 8px 12px; border-bottom: 1px solid var(--hairline-soft); color: var(--body); white-space: nowrap; }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table th:first-child, .dm-table td:first-child { padding-left: 16px; }
.dm-table th:last-child,  .dm-table td:last-child  { padding-right: 16px; }
.dm-table .dm-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.dm-table .avatar { width: 24px; height: 24px; font-size: 9.5px; }
.dm-table tr.is-hidden { display: none; }
.dm-num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 16px; border-top: 1px solid var(--hairline-soft);
    font-size: 11.5px; color: var(--muted-soft);
}
.dm-pager { display: inline-flex; gap: 4px; }
.dm-pager i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-strong); }
.dm-pager i.is-on { background: var(--ink); }

/* Attendance chips. */
.dm-chip {
    display: inline-block; min-width: 44px; text-align: center;
    font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 6px;
    background: var(--surface-card); color: var(--muted-soft); font-variant-numeric: tabular-nums;
}
.dm-chip.is-p { background: rgba(16,185,129,.12); color: #0A7C5A; }
.dm-chip.is-l { background: rgba(0,174,216,.14); color: #067A96; }
.dm-chip.is-h { background: var(--surface-card); color: var(--muted); }
.dm-chip.is-x { background: rgba(245,158,11,.14); color: #92610A; }

/* Leave calendar: the shared .cal-grid plus two states styles.css lacks. */
.dm-cal { margin-top: 8px; }
.dm-cal .cal-cell { font-size: 11.5px; }
.cal-cell.is-today { outline: 2px solid var(--ink); outline-offset: -2px; color: var(--ink); font-weight: 600; }
.cal-cell.is-hol { background: rgba(245,158,11,.14); color: #92610A; font-weight: 600; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 6px; font-size: 11.5px; color: var(--muted); }
.dm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-soft); }
.dm-legend i.is-leave { background: rgba(0,174,216,.5); }
.dm-legend i.is-hol { background: rgba(245,158,11,.55); }
.dm-legend i.is-off { background: var(--hairline); }

/* Hiring board. */
.dm-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dm-col { background: var(--surface-card); border-radius: var(--r-lg); padding: 10px; min-height: 220px; min-width: 0; }
.dm-col-h {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
    padding: 2px 4px 8px;
}
.dm-col-h b { font-weight: 500; color: var(--muted-soft); background: var(--canvas); border-radius: var(--r-pill); padding: 1px 7px; }
.dm-cardlet {
    background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md);
    padding: 8px 8px 8px 10px; display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; box-shadow: var(--shadow-1); min-width: 0;
}
.dm-cardlet .avatar { width: 26px; height: 26px; font-size: 10px; }
.dm-cardlet .dm-row-t, .dm-cardlet .dm-row-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-cardlet.is-moving { animation: dm-in .35s ease-out; }
.dm-next {
    appearance: none; border: 1px solid var(--hairline); background: var(--canvas);
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer; flex: none;
    display: grid; place-items: center; color: var(--muted); padding: 0;
}
.dm-next svg { width: 12px; height: 12px; }
.dm-foot-note { margin-top: 12px; font-size: 11.5px; color: var(--muted-soft); }

/* The last screen: the claim form, in the product's own clothes. */
.dm-start { max-width: 460px; margin: clamp(8px, 6vh, 56px) auto 0; text-align: center; padding: 8px 0 16px; }
.dm-start h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.15; margin: 14px 0 8px; }
.dm-start > p { font-size: 14px; color: var(--muted); }
.dm-claim { display: flex; gap: 8px; margin-top: 20px; }
.dm-claim .addr { text-align: left; }
.dm-fine { margin-top: 12px; font-size: 12.5px; color: var(--muted-soft); }
.dm-fine .dm-link { color: var(--ink); text-decoration: underline; }

/* A dead-end control says where the real thing is, instead of doing nothing. */
.dm-toast {
    position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 8px);
    background: var(--ink); color: var(--on-dark);
    padding: 10px 14px; border-radius: var(--r-md);
    font-size: 12.5px; box-shadow: var(--shadow-2);
    max-width: calc(100% - 32px); text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.dm-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dm-toast a { color: var(--on-dark); font-weight: 600; }

/* ------------------------------------------------------------- cursor --- */

.dm-cursor {
    position: absolute; left: 0; top: 0; z-index: 5;
    width: 22px; height: 26px;
    pointer-events: none; opacity: 0;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .25s;
    will-change: transform;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.dm.is-touring .dm-cursor { opacity: 1; }
.dm-cursor svg { width: 100%; height: 100%; display: block; transition: transform .12s; transform-origin: 3px 2px; }
.dm-cursor svg path { fill: #111111; stroke: #FFFFFF; stroke-width: 1.6; stroke-linejoin: round; }
.dm-cursor::after {
    content: ''; position: absolute; left: -12px; top: -12px;
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--brand-accent);
    opacity: 0; transform: scale(.4);
}
.dm-cursor.is-click svg { transform: scale(.86); }
.dm-cursor.is-click::after { animation: dm-ring .45s ease-out; }
@keyframes dm-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }

/* On a touch screen an arrow is a foreign object; a fingertip is not. */
@media (hover: none) {
    .dm-cursor svg { display: none; }
    .dm-cursor::before {
        content: ''; position: absolute; left: -10px; top: -10px;
        width: 20px; height: 20px; border-radius: 50%;
        background: rgba(17,17,17,.32); border: 2px solid #FFFFFF;
    }
}

.dm-caption { margin-top: 12px; font-size: 13px; color: var(--muted-soft); text-align: center; }
.dm-caption .dm-link { color: var(--ink); text-decoration: underline; }

/* --------------------------------------------------------- responsive --- */

/* Below the full container width, four pipeline columns truncate every
   name. The board scrolls sideways instead, which is what a pipeline does
   on a laptop or tablet anyway. */
@media (max-width: 1180px) {
    .dm-board { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scrollbar-width: thin; }
    .dm-col { flex: 0 0 210px; min-height: 0; }
}

@media (max-width: 1000px) {
    .dm-app { grid-template-columns: 184px minmax(0, 1fr); }
    .dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-cols, .dm-cols-even { grid-template-columns: 1fr; }
    .dm-user-name { display: none; }
}

@media (max-width: 720px) {
    .dm { aspect-ratio: auto; height: 600px; max-height: none; min-height: 0; }
    .dm-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    /* The sidebar becomes a strip of tabs: same buttons, so the tour and a
       thumb press the same thing. */
    .dm-side { border-right: 0; border-bottom: 1px solid var(--hairline); overflow: visible; }
    .dm-ws, .dm-group { display: none; }
    .dm-nav {
        flex-direction: row; gap: 4px; padding: 8px 10px;
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
    }
    .dm-nav::-webkit-scrollbar { display: none; }
    .dm-item { flex: none; padding: 6px 10px; font-size: 12.5px; }
    .dm-top { padding: 0 14px; gap: 10px; }
    .dm-user { display: none; }
    .dm-pages { padding: 14px; }
    .dm-h h3 { font-size: 15px; }
    .dm-hide-sm { display: none; }
    .dm-input { width: 100%; }
    .dm-search { flex: 1 1 100%; }
    .dm-tour-label { display: none; }
    .dm-start { margin-top: 8px; }
    .dm-start h3 { font-size: 21px; }
}

@media (max-width: 440px) {
    .dm-claim { flex-direction: column; }
    .dm-claim .btn { width: 100%; }
    .dm-kpis { gap: 8px; }
    .dm-kpi { padding: 10px 12px; }
    .dm-kpi-n { font-size: 19px; }
}

/* Reduced motion: the screens still switch, the cursor never moves. The
   script does not run the tour at all in this mode; this covers the fade. */
@media (prefers-reduced-motion: reduce) {
    .dm-page.is-on, .dm-cardlet.is-moving { animation: none; }
    .dm-cursor { transition: none; }
}

/* ---------------------------------------------------- full-bleed frame --- */
/* The model breaks out of the 1200px page container so it reads at close to
   real size on a wide screen, centred on the page. On anything narrower than
   the cap it keeps the page gutter on both sides. The negative margins are
   computed from the parent's width, so the frame stays centred whatever the
   container does. */
.hero-shot {
    --dm-w: min(1480px, calc(100vw - 2 * var(--gutter)));
    width: var(--dm-w);
    max-width: none;
    margin-left: calc((100% - var(--dm-w)) / 2);
    margin-right: calc((100% - var(--dm-w)) / 2);
    justify-self: start;
}
/* Explicit, or the height cap transfers through aspect-ratio and narrows the
   frame instead of shortening it. */
.hero-shot .dm { width: 100%; }
@media (min-width: 1240px) {
    .dm { max-height: 82vh; }
}