/* ====================================================================
   SCREEN 18 — A STRUCTURE'S HOURS, the desktop layer (desktop slice
   D12, 2026-10-09). exams/hours.html only, linked after
   desktop/shared.css; every rule is scoped to #vm-exams-hours.

   Frames: 18-d (one change waiting), 18-d-blank (sample hours not set),
   18-d-sheet (18c and the doors' sheet as dialogs), 18-d-narrow (1000),
   18-d-states, in docs/design/pharmacy/screens/18/desktop/frame.html;
   records screens/desktop-15-25/records/Screen 18 - desktop work
   order.md and design pass.md (the pass approved and folded with both
   calls). Brief: briefs/2026-10-09_desktop-slice-D12.md.

   Tiers: >=901 the layer: the structure side's own header (shared.css
   §12, drawn by js/exams/owner-head.js from hours.js), the flow band in
   one row (§13: the glass exit "My listing" | the title, 36; the name
   line not drawn), one 860 column: the state card in two halves (state |
   the week), the two forms side by side under it, Publish in a fixed
   white foot bar on the right; the sheets as 480 dialogs with Cancel
   then the solid commit in a row (§15) · >=1120 (the design pass) main
   | one sticky 340 column (gap 48, top 88): main = the two forms side by
   side over the week, drawn as lines across main (day 150 | strip |
   hours 100); the column = the state card (the window figure at 38)
   with Publish as its foot, present only while something differs.
   hours.js MOVES the nodes into main and the column from 1120 and puts
   them back below it; the title is 40 from 1120 (§13).

   Shared since D14 (shared.css): the bar's 860 column, hairline and
   shadow (§2's .vm-dt-foot-bar--owner; fixed here from 901 to 1119, the
   card's foot from 1120); the 480 dialog's radius, shadow, insets, title,
   sub and hairline foot (§3's .vm-dt-dialog, --inset, -h, -sub, -foot);
   the failed read's and the no-owner state's bordered cards and their
   mint pills (§9's .vm-dt-state-card, --read, .vm-dt-retry).

   Sections, in the frame's order:
     1. The header and the band
     2. The page: one 860 column, the forms side by side
     3. The two forms
     4. The state card in two halves (901-1119)
     5. Publish: the fixed foot bar (901-1119)
     6. The sheets as dialogs
     7. States
     8. >=1120: main | the sticky column, the week across main
     9. Hover (a pointer that can hover)
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE HEADER AND THE BAND (18-d)
       The header is §12's, filled by hours.js; a header emptied (no
       structure on this account) is not drawn. The band is §13's flow
       band in one row: the exit (its wrapper keeps its width) | the
       title. The phone's own edges and its name line go: the header
       says the name. With no exit (no structure) the title stands alone.
       ================================================================ */
    #vm-exams-hours .vm-dt-ohead:empty { display: none; }
    #vm-exams-hours .vm-ex-hr-band {
        overflow: visible;
        border-top: 0;
        border-bottom: 0;
    }
    #vm-exams-hours .vm-ex-hr-toprow { flex-shrink: 0; }
    #vm-exams-hours .vm-ex-hr-toprow:has(> [data-exit][hidden]) { display: none; }
    #vm-exams-hours .vm-ex-hr-name { display: none; }

    /* ================================================================
       2. THE PAGE (18-d-narrow): one 860 column under the band, 28 down,
       room at its foot for the fixed bar. The state card (and any state)
       takes the row; the two forms share the next one, 32 apart.
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-body {
        width: 100%;
        max-width: 908px;
        margin: 0 auto;
        padding: 28px 24px 120px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 36px;
        align-items: start;
    }
    #vm-exams-hours .vm-ex-hr-body > .vm-loading,
    #vm-exams-hours .vm-ex-hr-body > .vm-ex-none,
    #vm-exams-hours .vm-ex-hr-body > .vm-ex-hr-noowner,
    #vm-exams-hours .vm-ex-hr-body > [data-statecard] { grid-column: 1 / -1; }

    /* ================================================================
       3. THE TWO FORMS (18-d, 18-d-blank): each heading (21) and the
       samples sub (14) over its own card at the phone card's width; rows
       16 in, the day quiet at 14, the fields 80 wide, Closed and Not set
       as wide as the pair; the plain lines at 13; the footed doors 52.
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-sec { min-width: 0; gap: 14px; }
    #vm-exams-hours .vm-ex-hr-h {
        padding: 0;
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 1.25;
    }
    #vm-exams-hours .vm-ex-hr-headblock { gap: 6px; padding: 0; }
    #vm-exams-hours .vm-ex-hr-headsub { font-size: 14px; color: #475569; line-height: 1.5; }

    #vm-exams-hours .vm-ex-hr-row { padding: 12px 16px; min-height: 68px; }
    #vm-exams-hours .vm-ex-hr-srow { padding: 14px 16px; }
    #vm-exams-hours .vm-ex-hr-day { font-size: 14px; font-weight: 500; color: #334155; }
    #vm-exams-hours .vm-ex-hr-field { width: 80px; }
    #vm-exams-hours .vm-ex-hr-dash {
        width: 8px;
        text-align: center;
        font-size: 14px;
        color: #64748b;
    }
    #vm-exams-hours .vm-ex-hr-srow-in > .vm-ex-hr-dash { padding-bottom: 11px; }
    #vm-exams-hours .vm-ex-hr-col { gap: 5px; }
    #vm-exams-hours .vm-ex-hr-col-k { font-size: 12px; color: #64748b; }
    #vm-exams-hours .vm-ex-hr-col-k--stop { color: #0f172a; }
    #vm-exams-hours .vm-ex-hr-field--inherited { color: #475569; }
    #vm-exams-hours .vm-ex-hr-closed,
    #vm-exams-hours .vm-ex-hr-blank { width: 186px; color: #475569; }
    #vm-exams-hours .vm-ex-hr-closed { font-size: 14px; }
    #vm-exams-hours .vm-ex-hr-clip { margin-top: 8px; font-size: 12.5px; }
    #vm-exams-hours .vm-ex-hr-note {
        padding: 12px 16px;
        font-size: 13px;
        color: #64748b;
        line-height: 1.5;
        text-wrap: pretty;
    }
    #vm-exams-hours .vm-ex-hr-note--blank { color: #475569; }
    #vm-exams-hours .vm-ex-hr-door { height: 52px; font-size: 14.5px; }
    #vm-exams-hours .vm-ex-hr-door--clear { color: #475569; }

    /* ================================================================
       4. THE STATE CARD IN TWO HALVES (18-d-narrow): the state (mint,
       the window at 38) | the week (12.5 lines, 10 strips, 7 under their
       line), the card's own shadow. From 1120 the week leaves it (§8).
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-card[data-statecard] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #vm-exams-hours .vm-ex-hr-statewrap { padding: 14px; }
    #vm-exams-hours .vm-ex-hr-state { padding: 14px 16px 16px; }
    #vm-exams-hours .vm-ex-hr-state-k { font-size: 12px; }
    #vm-exams-hours .vm-ex-hr-state-now {
        font-size: 16px;
        color: #475569;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-hours .vm-ex-hr-state-rule { margin: 12px 0 10px; }
    #vm-exams-hours .vm-ex-hr-state-once { font-size: 12px; }
    #vm-exams-hours .vm-ex-hr-state-fig {
        margin-top: 6px;
        font-size: 38px;
        letter-spacing: -1.2px;
        line-height: 1.05;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-hours .vm-ex-hr-state-sub {
        margin-top: 8px;
        font-size: 13px;
        color: #334155;
        line-height: 1.45;
    }
    /* 18b: the customer's own words when no stop is stated. */
    #vm-exams-hours .vm-ex-hr-state-title {
        margin-top: 6px;
        font-size: 30px;
        letter-spacing: -.8px;
        line-height: 1.15;
    }
    #vm-exams-hours .vm-ex-hr-state-ask { margin-top: 6px; font-size: 14px; color: #334155; }
    #vm-exams-hours .vm-ex-hr-state-row { margin-top: 12px; padding: 10px 12px; gap: 10px; }
    #vm-exams-hours .vm-ex-hr-state-row > i { margin-top: 4px; }
    #vm-exams-hours .vm-ex-hr-state-row-t {
        color: #334155;
        line-height: 1.5;
        font-variant-numeric: tabular-nums;
    }

    #vm-exams-hours .vm-ex-hr-week {
        padding: 18px 22px 20px;
        justify-content: center;
        gap: 12px;
    }
    #vm-exams-hours .vm-ex-hr-wrow-k { font-size: 12.5px; color: #334155; }
    #vm-exams-hours .vm-ex-hr-wrow-v { font-size: 12.5px; color: #64748b; }
    #vm-exams-hours .vm-ex-hr-track { margin-top: 7px; }
    #vm-exams-hours .vm-ex-hr-legend { gap: 6px 14px; font-size: 11.5px; color: #475569; }

    /* ================================================================
       5. PUBLISH, 901-1119 (18-d-narrow): a fixed white foot bar (§2's
       owner bar: the hairline, the shadow, the 860 column), the pill on
       its right; the label names the effect (the code's). From 1120 it
       is the card's foot (§8).
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
    }
    #vm-exams-hours .vm-ex-hr-bar-in {
        padding: 0;
        display: flex;
        justify-content: flex-end;
    }
    #vm-exams-hours .vm-ex-hr-publish { width: auto; padding: 0 28px; }

    /* ================================================================
       6. THE SHEETS AS DIALOGS (18-d-sheet): §3's 18-25 dialog at 480
       (radius 20, 24 in, the title 20 over the sub 13, the foot under a
       hairline); here the code's grid four across, 18 under the head,
       the note at 13, and Cancel then the solid commit on the right
       (§15's row; the commit keeps the page's #0f6d5c).
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-sheet-head { padding: 0; }
    #vm-exams-hours .vm-ex-hr-sheet-sub { margin-top: 4px; }
    #vm-exams-hours .vm-ex-hr-grid { margin-top: 4px; }
    #vm-exams-hours .vm-ex-hr-sheet-note { font-size: 13px; color: #475569; }
    #vm-exams-hours .vm-ex-hr-sheet-acts {
        flex-shrink: 0;
        gap: 10px;
    }
    #vm-exams-hours .vm-ex-hr-commit,
    #vm-exams-hours .vm-ex-hr-cancel { height: 48px; }

    /* ================================================================
       7. STATES (18-d-states): Loading at 14; a failed read and no
       structure on this account are §9's state cards (the failed read
       with Try again, the other with the hospital on a mint tile and
       the three doors in a row), both at main's width here.
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-body > .vm-loading { padding: 4px 2px; font-size: 14px; color: #64748b; }
    #vm-exams-hours .vm-ex-none,
    #vm-exams-hours .vm-ex-hr-noowner { max-width: 764px; }
    #vm-exams-hours .vm-ex-hr-retry { margin-top: 12px; }
}

@media (min-width: 1120px) {

    /* ================================================================
       8. >=1120 (18-d, the design pass): main | the sticky 340 column,
       48 apart, 32 under the band. Main = the two forms side by side (32
       apart) over the week, 40 under them. The column is ONE card: the
       state card (its shadow and radius given to the column) with the
       bar as its foot (static, a hairline over it, the pill 52 across the
       card). The week as lines across main: day 150 | the strip 12 tall
       | the hours 100, right-aligned; the legend under the strips.
       ================================================================ */
    #vm-exams-hours .vm-ex-hr-body {
        max-width: 1200px;
        padding: 32px 24px 64px;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
    }
    #vm-exams-hours .vm-ex-hr-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    #vm-exams-hours .vm-ex-hr-pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        align-items: start;
    }

    #vm-exams-hours .vm-ex-hr-aside {
        min-width: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-hours .vm-ex-hr-aside > .vm-ex-hr-card {
        display: block;
        border-radius: 0;
        box-shadow: none;
    }
    #vm-exams-hours .vm-ex-hr-aside .vm-ex-hr-bar {
        position: static;
        z-index: auto;
        padding: 0;
        background: #fff;
        border-top: 1px solid #eef1f5;
        box-shadow: none;
    }
    #vm-exams-hours .vm-ex-hr-aside .vm-ex-hr-bar-in {
        padding: 16px 18px 18px;
        display: block;
    }
    #vm-exams-hours .vm-ex-hr-aside .vm-ex-hr-publish { width: 100%; padding: 0 16px; }

    #vm-exams-hours .vm-ex-hr-main > .vm-ex-hr-week {
        overflow: hidden;
        padding: 16px 24px 18px;
        justify-content: flex-start;
        gap: 6px;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-wrow,
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-week > .vm-ex-hr-wrow-top {
        min-height: 36px;
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr) 100px;
        column-gap: 20px;
        align-items: center;
    }
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-wrow > .vm-ex-hr-wrow-top { display: contents; }
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-wrow-k {
        grid-column: 1;
        grid-row: 1;
        font-size: 13.5px;
        color: #334155;
    }
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-wrow-v {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        font-size: 13.5px;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-track {
        grid-column: 2;
        grid-row: 1;
        height: 12px;
        margin-top: 0;
    }
    #vm-exams-hours .vm-ex-hr-main .vm-ex-hr-legend {
        margin: 8px 0 0 170px;
        gap: 6px 18px;
        font-size: 12px;
        color: #475569;
    }
}

/* ====================================================================
   9. HOVER (a pointer that can hover; 18-d's style-hover values)
   ==================================================================== */
@media (min-width: 901px) {
    @media (hover: hover) {
        #vm-exams-hours .vm-ex-hr-field:hover,
        #vm-exams-hours .vm-ex-hr-blank:hover { border-color: #64748b; }
        #vm-exams-hours .vm-ex-hr-field.is-changed:hover,
        #vm-exams-hours .vm-ex-hr-blank.is-changed:hover,
        #vm-exams-hours .vm-ex-hr-closed.is-changed:hover { border-color: #0f6d5c; }
        #vm-exams-hours .vm-ex-hr-closed:hover { background: #e8edf2; color: #334155; }
        #vm-exams-hours .vm-ex-hr-door--split:hover { background: #f4fbf9; }
        #vm-exams-hours .vm-ex-hr-door--clear:hover { background: #f8fafc; }
        #vm-exams-hours .vm-ex-hr-publish:not(:disabled):hover { background: #0c5b4c; color: #fff; }
        #vm-exams-hours .vm-ex-hr-slot:not(.is-selected):hover { background: #e3f4f0; color: #0f6d5c; }
        #vm-exams-hours .vm-ex-hr-commit:not(:disabled):hover { background: #0c5b4c; color: #fff; }
    }
}