/* =============================================================================
   cwmenu.css — the shared menu, the selection ring, the print sheet (Clockwork 507)
   =============================================================================
   The look of assets/js/cwmenu.js. EVERY COLOUR IS A PAGE TOKEN, so the moon
   skin needs no second copy: dark.css redefines --paper, --ink, --line and
   --accent on html[data-dark] and everything here follows. The one exception
   is the drop shadow, which is black at a low alpha — the same literal the
   clock placard (.cw-geo) already uses, because a shadow is darkness on either
   ground; the dark skin gets its edge from the border instead.

   NO BARE ELEMENT RULES. Since 506 the edition pills are <button data-ed-set>
   and a bare `button {}` reaches them; every selector here starts from a class
   or an id, and the ⋯ button's own look is :where()-weighted so any page class
   put on it wins.
   ========================================================================== */

/* ---------------------------------------------------------------- the menu */
.cwm {
    position: fixed; z-index: 10000;      /* above the toast stack (9999), above everything */
    box-sizing: border-box;
    min-width: 13.75rem; max-width: min(22rem, calc(100vw - 16px));
    margin: 0; padding: 4px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
    border-radius: 6px;
    box-shadow: 0 .6rem 1.6rem -.3rem rgba(0, 0, 0, .26), 0 .1rem .35rem rgba(0, 0, 0, .08);
    font-size: .84rem; font-weight: 400; line-height: 1.25; text-align: left;
    letter-spacing: normal; text-transform: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    outline: none;
    animation: cwm-in .12s var(--ease, ease) both;
}
.cwm:focus { outline: none; }
@keyframes cwm-in {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* The header: whose menu this is. The same two lines as the clock placard —
   the name in ink, the place in small caps in the accent. */
.cwm__top {
    padding: .42rem .6rem .45rem 1.85rem;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--line-soft, var(--line));
}
.cwm__t {
    display: block; font-weight: 600; font-size: .86rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cwm__s {
    display: block; margin-top: .12rem;
    font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); line-height: 1.4;
}

.cwm__i {
    display: flex; align-items: center; gap: .45rem;
    min-height: 28px; padding: .28rem .6rem .28rem .3rem;
    border-radius: 4px;
    color: var(--ink); cursor: default; white-space: nowrap;
    outline: none;
}
/* The leading column: ✓ for a checkbox, • for a radio, a glyph for a plain
   row. Always there, so labels line up whether a row is checked or not. */
.cwm__c {
    flex: 0 0 1.1rem; text-align: center;
    font-size: .8rem; font-weight: 700; color: var(--accent);
}
.cwm__l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cwm__h {
    flex: 0 0 auto; margin-left: 1.1rem;
    font-size: .72rem; color: var(--ink-55, var(--muted));
    font-variant-numeric: tabular-nums;
}
.cwm__a { flex: 0 0 auto; margin-left: .35rem; font-size: .95rem; line-height: .8; color: var(--ink-55, var(--muted)); }

/* THE ROW UNDER THE POINTER OR THE KEYS: a wash of the accent on the page's
   own ground, and the row that opened a submenu keeps it while you are in
   there. The keyboard gets a ring as well, so the row is findable without
   colour. */
.cwm__i:focus,
.cwm__i.is-open { background: color-mix(in srgb, var(--accent) 13%, var(--paper)); }
.cwm__i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cwm__i:focus .cwm__a,
.cwm__i.is-open .cwm__a { color: var(--accent); }

.cwm__i[aria-disabled="true"] { color: var(--ink-55, var(--muted)); opacity: .55; }
.cwm__i[aria-disabled="true"]:focus { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.cwm__i[aria-disabled="true"] .cwm__c { color: inherit; }

.cwm__i--danger,
.cwm__i--danger .cwm__c { color: var(--taken); }
.cwm__i--danger:focus { background: color-mix(in srgb, var(--taken) 12%, var(--paper)); }

.cwm__sep { height: 1px; margin: 4px .4rem; background: var(--line); }
.cwm__g {
    padding: .45rem .6rem .2rem 1.85rem;
    font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-55, var(--muted));
}

/* A FINGER NEEDS A ROW IT CAN HIT: forty-four pixels, not twenty-eight. */
@media (pointer: coarse) {
    .cwm { font-size: .95rem; }
    .cwm__i { min-height: 44px; padding-top: .4rem; padding-bottom: .4rem; }
    .cwm__t { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cwm { animation: none; }
}

/* THE PLACARD STANDS DOWN WHILE A MENU IS UP. app.js's mouseover would bring
   it back as the pointer crosses the cards on its way to the menu; this keeps
   it away until the menu has gone. */
html[data-cw-menu] .cw-geo { display: none !important; }

/* ---------------------------------------------------------- the ⋯ button --
   :where() weighs nothing, so a page class on the same button (cw-op in the
   clock's ops row, the bench header's own) decides how it looks. */
:where(.cwm-more) {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 27px; height: 22px; padding: 0 .3rem;
    font: inherit; font-size: .8rem; font-weight: 700; line-height: 1;
    color: var(--ink-55, var(--muted)); background: none;
    border: 1px solid var(--line); border-radius: 7px;
    cursor: pointer;
}
:where(.cwm-more):hover,
:where(.cwm-more)[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
:where(.cwm-more):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { :where(.cwm-more) { min-width: 36px; height: 30px; } }

/* --------------------------------------------------------- the selection --
   A ring in the accent, just outside the card, and a faint wash of the accent
   on its ground. An OUTLINE, not a box-shadow: HERE's card already draws its
   own frame with an inset box-shadow, and a selected HERE must keep it. */
.cw-card[aria-selected="true"],
.tm[aria-selected="true"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}
/* The keyboard's place, quieter than a selection so the two never read as
   the same thing: the cards take tabindex="0" at 507. (No `:focus { outline:
   none }` here — it would tie with the selection ring above and, loading
   later, erase it from the card a right-click has just focused.) */
.cw-card:focus-visible,
.tm:focus-visible {
    outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
}
.cw-card[aria-selected="true"]:focus-visible,
.tm[aria-selected="true"]:focus-visible { outline-style: solid; outline-color: var(--accent); }
/* A long-press is the menu, not the system's link/image callout. */
.cw-card, .tm { -webkit-touch-callout: none; }

/* ----------------------------------------------------------- the print sheet
   One element, made by cwmenu.js the first time something is printed. Never
   on screen; in print only while html[data-cw-printing] is set, and then it
   is the ONLY thing printed. An ordinary Cmd-P, without the attribute, still
   prints the page. It is in the skin being read, backgrounds forced on —
   the moon skin prints as the moon skin, the same way its PDF and PNG do. */
#cw-print { display: none; }

@media print {
    html[data-cw-printing] body > *:not(#cw-print) { display: none !important; }
    html[data-cw-printing],
    html[data-cw-printing] body {
        height: auto !important; min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important; padding: 0 !important;
        background: var(--paper) !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* The page margin, moved inside the sheet: print() sets @page margin 0
       while it prints, so the sheet's own ground reaches the edge in both
       skins. `clone` puts the padding back at the top and bottom of every
       page a long sheet runs onto, not only the first and the last. */
    html[data-cw-printing] #cw-print {
        display: block !important;
        padding: 0.4in;
        -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
}

.cwp {
    color: var(--ink); background: var(--paper);
    font-size: 10.5pt; line-height: 1.42;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cwp__head {
    display: flex; align-items: baseline; gap: 8pt;
    padding-bottom: 4pt; margin-bottom: 12pt;
    border-bottom: 1px solid var(--ink);
}
.cwp__mark { font-weight: 700; font-size: 8.5pt; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.cwp__mark::before {
    content: ''; display: inline-block; width: 18pt; height: 1.2pt; margin-right: 7pt;
    vertical-align: middle; background: var(--accent);
}
.cwp__site { font-size: 8pt; color: var(--ink-55, var(--muted)); }
.cwp__title { margin: 0 0 2pt; font-size: 20pt; font-weight: 600; line-height: 1.2; color: var(--ink); }
.cwp__sub { margin: 0 0 12pt; font-size: 9.5pt; color: var(--ink-55, var(--muted)); }
.cwp__page + .cwp__page { break-before: page; }
.cwp__ptitle { margin: 0 0 6pt; font-size: 13pt; font-weight: 600; color: var(--ink); }
.cwp__break { break-after: page; }
.cwp__h {
    margin: 12pt 0 5pt; padding-bottom: 2pt;
    font-size: 8pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); border-bottom: 1px solid var(--line);
    break-after: avoid;
}
.cwp__p { margin: 0 0 4pt; color: var(--ink); }
.cwp__p--muted { color: var(--ink-55, var(--muted)); }
.cwp__p--accent { color: var(--accent); }
.cwp__img { display: block; max-width: 100%; margin: 4pt auto 8pt; break-inside: avoid; }
.cwp__img--left { margin-left: 0; }
.cwp__img--right { margin-right: 0; }
.cwp__cap { margin: -4pt 0 8pt; text-align: center; font-size: 9pt; color: var(--ink-55, var(--muted)); }
.cwp__rows { margin: 0 0 8pt; }
.cwp__rows > div {
    display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 4mm;
    padding: 1.2mm 0; border-bottom: 1px solid var(--line-soft, var(--line));
    break-inside: avoid;
}
.cwp__rows dt { margin: 0; font-size: 9pt; color: var(--ink-55, var(--muted)); }
.cwp__rows dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.cwp__table { width: 100%; margin: 0 0 8pt; border-collapse: collapse; }
.cwp__table th {
    padding: 1.5mm 2mm; text-align: left;
    font-size: 7.5pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-55, var(--muted)); background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.cwp__table td {
    padding: 1.4mm 2mm; border-bottom: 1px solid var(--line-soft, var(--line));
    font-size: 9.5pt; color: var(--ink); font-variant-numeric: tabular-nums; vertical-align: top;
}
.cwp__table tr { break-inside: avoid; }
.cwp__figs { display: grid; gap: 10pt 12pt; margin: 4pt 0 10pt; }
.cwp__fig { margin: 0; text-align: center; break-inside: avoid; }
.cwp__fig .cwp__img { margin: 0 auto 3pt; }
.cwp__fig figcaption b { display: block; font-size: 9.5pt; color: var(--ink); }
.cwp__fig figcaption span { display: block; font-size: 7.5pt; color: var(--ink-55, var(--muted)); }
.cwp__rule { height: 0; margin: 6pt 0; border: 0; border-top: 1px solid var(--line); }
.cwp__foot {
    margin-top: 14pt; padding-top: 3pt;
    border-top: 1px solid var(--line);
    font-size: 8pt; color: var(--ink-55, var(--muted));
}

/* ---- moon (507) ---- */
/* RESET TO NOW / LIVE. The key's two words are both in the button, stacked in
   one grid cell, and only the one that is true is visible — so the key is
   always as wide as RESET TO NOW and the scrubber beside it never jumps when
   the moon goes live. visibility (not display) keeps the width and drops the
   hidden word from the accessible name. Latched, it takes the desk's one
   orange (.cwd__b[aria-pressed="true"] in site.css). */
.mn__scrub #mn-now { display: inline-grid; place-items: center; }
#mn-now > .mn__now-a,
#mn-now > .mn__now-b { grid-area: 1 / 1; }
#mn-now[aria-pressed="true"] > .mn__now-b,
#mn-now:not([aria-pressed="true"]) > .mn__now-a { visibility: hidden; }

/* THE ⋯ KEY at the end of the scrub bar: the desk's key, square, with a
   glyph large enough to read as three dots rather than a smudge. */
.mn__scrub .mn__more {
    flex: 0 0 auto; min-width: var(--cwd-h, 2.125rem); padding: 0 .5rem;
    font-size: 1rem; letter-spacing: 0; line-height: 1;
}
/* ---- end moon ---- */

/* ---- bench (507) ---- */
/* THE ⋯ ON A BENCH CARD SITS WITH THE × AND DRESSES LIKE IT: no box, the
   quiet ink, the accent when it is pointed at or open. A bordered button in a
   header this small would be the loudest thing on the card after the reading. */
.tm__more {
    flex: 0 0 auto; min-width: 22px; height: 20px; padding: 0 .2rem;
    border: 0; border-radius: 4px; background: none;
    color: var(--ink-55); font-size: .8rem; line-height: 1;
}
.tm__more:hover,
.tm__more[aria-expanded="true"] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
@media (pointer: coarse) { .tm__more { min-width: 34px; height: 30px; } }
/* The bench's own ⋯ in the bar: the bar's ghost button, one glyph wide. */
.tm-bar__more { height: auto; min-width: 2.4rem; letter-spacing: 0; }
/* A per-watch popped window keeps the other cards in the DOM, hidden: the
   grid must not give them cells. */
html[data-cw-only="bench"] .tm[hidden] { display: none !important; }
/* ---- end bench ---- */

/* ---- clocks (507) ---- */
/* THE ⋯ IN A CARD'S ROW is one more .cw-op — the arrows' size, border and
   lights — with the glyph set larger, because three dots at the arrows'
   .68rem read as a smudge. */
.cw-card__ops .cwm-more { font-size: .9rem; letter-spacing: 0; padding: 0; }
.cw-card__ops .cwm-more[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* A POPPED WINDOW'S ARROWS STAND DISABLED (moving is the board's; the window
   is a view of it). Dimmed and still — no lift, no glow, no press. */
.cw-op:disabled,
.cw-op:disabled:hover,
.cw-op:disabled:active {
    opacity: .32; cursor: default; transform: none; box-shadow: none;
    background: none; border-color: var(--line); color: var(--ink-55, var(--muted));
}
/* SEVERAL CLOCKS IN ONE POPPED WINDOW (?only=a,b,c). The one-clock rules test
   only that data-cw-only is PRESENT; with a list the cards are popFit()'s
   grid cells, each as wide as its cell. */
html[data-cw-pop][data-cw-only*=","] .cw-card { width: auto; }
/* FULL SCREEN IS THE CARD: the dial as large as the screen allows and the
   type scaled with it, on the page's own ground in either skin. The arrows,
   the cross and the pop-out stand down; ⋯ stays, and the menu opens inside
   the full-screen card (CWMenu appends it there). */
.cw-card:fullscreen {
    box-sizing: border-box; width: 100%; height: 100%; margin: 0;
    justify-content: center; gap: .6vmin;
    padding: 4vmin; border: 0; border-radius: 0; outline: none;
    background: var(--paper);
}
.cw-card:fullscreen::backdrop { background: var(--paper, #fff); }
.cw-card:fullscreen .cw-card__cv { width: min(70vmin, 90vw); height: auto; aspect-ratio: 1 / 1; }
.cw-card:fullscreen .cw-card__name { font-size: clamp(1rem, 3.6vmin, 2.6rem); margin-top: 1.4vmin; }
.cw-card:fullscreen .cw-card__time { font-size: clamp(1.2rem, 5vmin, 3.6rem); }
.cw-card:fullscreen .cw-card__sub,
.cw-card:fullscreen .cw-card__sky { font-size: clamp(.7rem, 1.8vmin, 1.2rem); }
.cw-card:fullscreen .cw-card__pop,
.cw-card:fullscreen .cw-op[data-op] { display: none; }
.cw-card:fullscreen .cw-card__ops { position: absolute; top: 2vmin; right: 2vmin; margin: 0; }
/* ---- end clocks ---- */