/* UC Calendars — patterns added on top of v5_24.
   Everything here is a candidate for write-back into v5_25. Namespaced `uc-`
   so it can drop into another page without collisions. Tokens only. */

/* ---------- page shell --------------------------------------------------- */

.uc-page{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-surface)}
.uc-page--showcase{background:var(--bg-page)}            /* entry / category only */
.uc-main{flex:1 1 auto;width:100%;max-width:664px;margin:0 auto;
         padding-inline:var(--space-screen);padding-block:0 calc(var(--space-8) * 4.4)}
.uc-topbar{display:flex;align-items:center;min-height:44px;padding-block:var(--space-2);
           padding-inline:var(--space-screen);width:100%}
/* nav-exits pattern (v5_25): the topbar is viewport-anchored, never constrained to the
   centred content column — Back keeps identical coordinates on every pre-editor step */
/* ---- language chip: index + configure topbars (editor has the rail) ----- */
.uc-topbar{justify-content:space-between}
.uc-langchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;
        padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);
        background:var(--bg-surface);cursor:pointer;font-size:var(--text-sm);
        font-weight:600;color:var(--ink-2)}
.uc-langchip:hover{border-color:var(--teal-500);box-shadow:var(--shadow-sm)}
.uc-langchip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-langchip .uc-ic{display:inline-flex;color:var(--ink-3)}
.uc-langpop{position:fixed;z-index:60;min-width:214px;background:var(--bg-surface);
        border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--space-2) 0}
.uc-langpop p{margin:0;padding:4px var(--space-4) 8px;font-size:var(--text-xs);
        font-weight:600;letter-spacing:.8px;color:var(--ink-4)}
.uc-langpop .uc-ed-langitem{font-size:var(--text-sm)}

.uc-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:0;
         text-decoration:none;
         background:none;border:0;cursor:pointer;color:var(--teal-600);
         font-size:var(--text-sm);font-weight:600;letter-spacing:-.005em}
.uc-back:hover{color:var(--teal-700)}
.uc-back:focus-visible{outline:none;text-decoration:underline;
                       text-decoration-thickness:2px;text-underline-offset:3px}
.uc-ic{display:inline-flex;flex-shrink:0}
.uc-ic svg{display:block}

.uc-section{margin-top:var(--space-8);scroll-margin-top:72px}
.uc-section-head{position:relative;display:flex;align-items:center;
                 justify-content:center;min-height:28px;margin-bottom:var(--space-4)}
.uc-section-head h2{font-size:var(--text-lg);font-weight:700;color:var(--ink);
                    letter-spacing:-.012em;margin:0;text-align:center}
.uc-section-head .uc-info-btn{position:absolute;right:-8px;top:50%;
                              transform:translateY(-50%)}
/* 44 px hit area, 28 px visual — the ring lives on ::before so the button can
   meet the tap-target minimum without growing visually. */
.uc-info-btn{width:44px;height:44px;flex-shrink:0;position:relative;display:inline-flex;
             align-items:center;justify-content:center;border:0;background:none;
             color:var(--teal-600);cursor:pointer;padding:0}
.uc-info-btn::before{content:'';position:absolute;inset:8px;border-radius:var(--r-pill);
             border:1px solid var(--teal-200);background:var(--bg-surface)}
.uc-info-btn .uc-ic{position:relative}
.uc-info-btn:hover::before{background:var(--teal-50)}
.uc-info-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-note{font-size:var(--text-xs);color:var(--ink-4);text-align:center;
         margin-top:var(--space-3);line-height:1.5}
.uc-stack{display:flex;flex-direction:column;gap:var(--space-2)}

/* ---------- PATTERN 1 · UVP-strike price block --------------------------- */
/* Sale price in --price-500 with the struck manufacturer price beside or under
   it. The asterisk ties to one footnote per screen. Never colour anything else
   in --price-500. */

.uc-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.uc-price--stacked{flex-direction:column;align-items:flex-end;gap:1px}
.uc-price .uc-price-now{font-size:var(--text-md);font-weight:700;color:var(--price-500);
                        font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.uc-price .uc-price-was{font-size:var(--text-xs);color:var(--ink-3);
                        text-decoration:line-through;text-decoration-thickness:1px;
                        font-variant-numeric:tabular-nums;white-space:nowrap}
.uc-price .uc-price-from{font-size:var(--text-xs);font-weight:600;color:var(--ink-4);
                         letter-spacing:.06em;text-transform:uppercase}
.uc-footnote{font-size:var(--text-xs);color:var(--ink-3);line-height:1.5;
             margin-top:var(--space-5);text-align:center}

/* ---------- entry cards -------------------------------------------------- */

.uc-cards{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5)}
.uc-card{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);
         background:var(--bg-surface);border:1.5px solid transparent;
         border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-xs);
         transition:border-color var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-fast) var(--ease-out)}
.uc-card:hover,.uc-card:focus-within{border-color:var(--teal-500);box-shadow:var(--shadow-sm)}
.uc-card-media{background:var(--bg-subtle);min-width:0;min-height:132px}
.uc-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.uc-card-body{display:flex;flex-direction:column;gap:2px;min-width:0;
              padding:var(--space-4) var(--space-4)}
.uc-card-title{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;min-width:0}
.uc-card-title h3{font-size:var(--text-md);font-weight:700;color:var(--ink);
                  letter-spacing:-.01em;margin:0}
.uc-card-desc{font-size:var(--text-sm);color:var(--ink-4);line-height:1.4;margin:0}
.uc-card-benefit{font-size:var(--text-sm);font-weight:600;color:var(--teal-600);margin:0}
.uc-card-meta{font-size:var(--text-xs);color:var(--ink-4);margin:0}
.uc-card-foot{display:flex;align-items:flex-end;justify-content:space-between;
              gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap}
.uc-card .btn{min-width:0;text-decoration:none}
/* Review round 3 (M1): the hover-reveal read as a disabled button at rest.
   Select is fully visible at rest; hover elevates, never reveals. */
@media (hover:hover) and (min-width:768px){
  .uc-card .btn{transition:box-shadow var(--dur-fast) var(--ease-out)}
  .uc-card:hover .btn,.uc-card:focus-within .btn{box-shadow:var(--shadow-sm)}
}

/* books grammar at narrow widths: the card stacks — full-width image band on
   top, body below with the CTA inline right. */
@media (max-width:639px){
  .uc-card{grid-template-columns:minmax(0,1fr)}
  .uc-card-media{min-height:0;aspect-ratio:16/10}
  .uc-card-foot{align-items:center}
}

/* ---------- PATTERN 2 · paper-dependent size subtitle -------------------- */
/* The size card's subtitle, price and UVP all belong to the selected paper.
   `data-paper` on the row is what flips them; the card markup never changes. */

.uc-opt{width:100%;text-align:left;background:var(--bg-subtle);
        border:1.5px solid transparent;border-radius:var(--r-md);
        padding:var(--space-4) 18px;display:flex;align-items:center;
        justify-content:space-between;gap:14px;cursor:pointer;min-height:44px;
        transition:background var(--dur-fast),border-color var(--dur-fast)}

.uc-opt[aria-checked=true]{background:var(--teal-50);border-color:var(--teal-500)}
.uc-opt:focus-visible{outline:none;box-shadow:var(--focus-ring);
                      outline-offset:var(--focus-ring-offset)}
.uc-opt[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:not-allowed}
.uc-opt-info{min-width:0;flex:1 1 auto}
.uc-opt-title{display:block;font-size:var(--text-md);font-weight:500;color:var(--ink);margin:0 0 2px}
.uc-opt-title b{font-weight:700}
.uc-opt-sub{display:block;font-size:var(--text-sm);color:var(--ink-3);line-height:1.4;margin:0}
.uc-opt-reason{display:block;font-size:var(--text-xs);color:var(--ink-3);line-height:1.4;
               margin:4px 0 0;font-weight:500}
.uc-opt-side{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
/* Selection is the 2 px teal frame + tinted fill, as in v5_24's .opt-card rule and
   in the live books UC. Neither carries a check glyph on option cards — brief 03
   asked for one; parity won. aria-checked still exposes state to AT. */
.uc-opt-check{display:none}
.uc-opt-thumb{width:56px;height:56px;flex-shrink:0;border-radius:var(--r-sm);
              overflow:hidden;background:var(--bg-muted)}
.uc-opt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.uc-opt-lead{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.uc-opt-delta{font-size:var(--text-sm);font-weight:700;color:var(--ink);white-space:nowrap}
.uc-opt-delta--included{font-weight:500;color:var(--ink-4)}

/* expandable detail — v5_24 .opt-card-detail, re-expressed for <button> rows */
/* One frame only. The wrapper owns the border so it can enclose the row *and* its
   expanded detail; the row inside must never draw its own, or the two borders stack
   into a visible double outline. */
.uc-opt-wrap{border:1.5px solid transparent;border-radius:var(--r-md);overflow:hidden;
             background:var(--bg-subtle);transition:background var(--dur-fast),
             border-color var(--dur-fast)}
.uc-opt-wrap:has(.uc-opt[aria-checked=true]){background:var(--teal-50);
             border-color:var(--teal-500)}
.uc-opt-wrap .uc-opt{background:none;border-color:transparent!important}
.uc-opt-wrap .uc-opt:hover{background:none}   /* the wrapper carries the hover */



.uc-detail{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;
           transition:grid-template-rows var(--dur-base) var(--ease-out),
                      opacity var(--dur-base) var(--ease-out)}
.uc-detail > div{overflow:hidden;min-height:0}
/* the direct grid child carries no padding — a padded child keeps its padding
   even at a 0fr row height, which is what leaves a collapsed card too tall */
.uc-opt[aria-checked=true] + .uc-detail{grid-template-rows:1fr;opacity:1}
.uc-detail-inner{padding:14px 18px 16px;border-top:1px solid var(--line-on-teal)}
.uc-detail-row{display:flex;justify-content:space-between;gap:var(--space-4);
               font-size:var(--text-sm);color:var(--ink-3);padding-block:3px}
.uc-detail-row dt{color:var(--ink-4);margin:0}
.uc-detail-row dd{margin:0;font-weight:500;text-align:right;min-width:0}

/* ---------- segment tabs (v5_24 .seg, radiogroup semantics) -------------- */

.uc-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
         gap:var(--space-3);margin-bottom:var(--space-4)}
.uc-seg{background:var(--bg-subtle);border:1.5px solid transparent;
        border-radius:var(--r-md);padding:14px 10px;min-height:44px;cursor:pointer;
        font-size:var(--text-sm);font-weight:500;color:var(--ink-4);
        display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;
        transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}

.uc-seg[aria-checked=true]{background:var(--teal-50);border-color:var(--teal-500);
                           color:var(--teal-700);font-weight:600}
.uc-seg:focus-visible{outline:none;box-shadow:var(--focus-ring);
                      outline-offset:var(--focus-ring-offset)}
.uc-seg-note{font-size:var(--text-xs);color:var(--ink-4);text-align:center;
             margin:-4px 0 var(--space-4);line-height:1.5}
.uc-seg-glyph{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center}
.uc-seg-glyph i{display:block;border-radius:2px;background:var(--ink-5);opacity:.85}
.uc-seg[aria-checked=true] .uc-seg-glyph i{background:var(--teal-500)}
.uc-seg-glyph[data-shape=square] i{width:16px;height:16px}
.uc-seg-glyph[data-shape=portrait] i{width:11px;height:16px}
.uc-seg-glyph[data-shape=landscape] i{width:16px;height:11px}

/* ---------- PATTERN 3 · inline collapsed start-month section ------------- */
/* A disclosure, not a dialog: summary row + inline expansion. The month grid
   never leaves the page, so the choice stays part of step 1. */

.uc-month{background:var(--bg-subtle);border:var(--bp-opt-border) solid transparent;
          border-radius:var(--r-md);overflow:hidden;
          transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.uc-month-summary{width:100%;background:none;border:0;cursor:pointer;text-align:left;
                  display:flex;align-items:center;gap:var(--space-3);min-height:44px;
                  padding:var(--space-4) 18px;color:var(--ink)}

.uc-month-summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-month-sum-text{min-width:0;flex:1 1 auto}
.uc-month-sum-text strong{display:block;font-size:var(--text-md);font-weight:500;
                          color:var(--ink)}
.uc-month-sum-text span{display:block;font-size:var(--text-sm);color:var(--ink-4);
                        line-height:1.4;margin-top:2px}
.uc-month-change{font-size:var(--text-sm);font-weight:600;color:var(--teal-600);
                 flex-shrink:0}
.uc-month-chev{transition:transform var(--dur-fast) var(--ease-out);color:var(--ink-4);
               flex-shrink:0}
.uc-month-summary[aria-expanded=true] .uc-month-chev{transform:rotate(180deg)}
.uc-month-panel{display:grid;grid-template-rows:0fr;
                transition:grid-template-rows var(--dur-base) var(--ease-out)}
.uc-month-panel[data-open=true]{grid-template-rows:1fr}
.uc-month-panel > div{overflow:hidden;min-height:0}
.uc-month-inner{padding:0 18px var(--space-4);border-top:1px solid var(--line-on-teal)}
.uc-month-years{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                gap:var(--space-2);margin:var(--space-4) 0}
.uc-month-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.uc-mbtn{min-height:44px;border-radius:var(--r-sm);
         border:var(--bp-opt-border) solid transparent;
         background:var(--bg-surface);color:var(--ink-3);cursor:pointer;
         font-size:var(--text-sm);font-weight:500;padding:0 4px;
         transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}

.uc-mbtn[aria-checked=true]{background:var(--teal-100);border-color:var(--teal-500);
                            color:var(--teal-700);font-weight:600}
.uc-mbtn[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:not-allowed;
                             text-decoration:line-through}
.uc-mbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-month-cover{font-size:var(--text-sm);color:var(--ink-3);line-height:1.5;
                margin:var(--space-4) 0 0}
@media (prefers-reduced-motion: reduce){
  .uc-month-panel,.uc-detail,.uc-month-chev{transition:none}
}

/* ---------- sticky summary bar ------------------------------------------ */

.uc-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg-surface);
        border-top:1px solid var(--line);box-shadow:var(--shadow-sheet)}
.uc-bar-inner{width:100%;max-width:944px;margin:0 auto;
              padding:10px var(--space-screen) 12px;
              display:flex;flex-direction:column;gap:6px}
/* the trust-badge labels are far longer than books' — the row gets the wider
   container so it still reads as one line, while price + CTA keep books' column */
.uc-bar-row{width:100%;max-width:632px;margin-inline:auto}
.uc-crumb{font-size:var(--text-xs);font-weight:600;color:var(--teal-600);
          text-align:center;letter-spacing:-.002em;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.uc-badges{display:flex;align-items:center;justify-content:center;gap:var(--space-3);
           flex-wrap:wrap;font-size:var(--text-xs);font-weight:500;color:var(--ink-3)}
.uc-badge{display:inline-flex;align-items:center;gap:5px;min-width:0}
.uc-badge svg{color:var(--ink-4)}
.uc-bar-row{display:flex;align-items:center;justify-content:space-between;
            gap:var(--space-4);min-width:0}
.uc-bar-row .btn{flex:1 1 auto;max-width:280px}
@media (max-width:413px){
  .uc-crumb,.uc-badges{display:none}                  /* collapse to price + CTA */
  .uc-bar-inner{gap:0}
}

/* ---------- (i) modal — v5_24 .sheet anatomy ---------------------------- */

.uc-overlay{position:fixed;inset:0;z-index:40;background:var(--overlay-scrim);
            display:flex;align-items:center;justify-content:center;
            padding:var(--space-4)}
.uc-modal{background:var(--bg-surface);border-radius:var(--r-xl);width:100%;
          max-width:480px;max-height:min(84dvh,720px);display:flex;flex-direction:column;
          box-shadow:var(--shadow-lg);overflow:hidden}
.uc-modal-head{display:flex;align-items:flex-start;gap:var(--space-3);
               padding:var(--space-5) var(--space-5) var(--space-3)}
.uc-modal-head h2{flex:1 1 auto;min-width:0;margin:0;font-size:var(--text-base);
                  font-weight:700;color:var(--ink);text-align:center;
                  padding-left:36px}
.uc-modal-close{width:36px;height:36px;flex-shrink:0;border:0;border-radius:var(--r-pill);
                background:var(--bg-muted);color:var(--ink-3);cursor:pointer;
                display:inline-flex;align-items:center;justify-content:center}
.uc-modal-close:hover{background:var(--ink-6)}
.uc-modal-close:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-modal-body{overflow-y:auto;padding:0 var(--space-5) var(--space-2)}
.uc-modal-row{display:flex;gap:var(--space-4);padding-block:var(--space-4);
              border-top:1px solid var(--line-2)}
.uc-modal-row:first-child{border-top:0}
.uc-modal-tile{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-md);
               background:var(--teal-50);color:var(--teal-600);
               display:inline-flex;align-items:center;justify-content:center}
.uc-modal-row div{min-width:0}
.uc-modal-row h3{margin:0 0 3px;font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.uc-modal-row p{margin:0;font-size:var(--text-sm);color:var(--ink-4);line-height:1.5}
.uc-modal-foot{padding:var(--space-3) var(--space-5) var(--space-5);
               font-size:var(--text-sm);font-style:italic;color:var(--teal-600);
               text-align:center}
.uc-modal-foot .btn{font-style:normal}   /* the foot is italic; buttons in it are not */

/* ---------- upload screen ---------------------------------------------- */

.uc-drop{width:100%;background:var(--bg-subtle);border:2px dashed var(--ink-6);
         border-radius:var(--r-lg);padding:var(--space-8) var(--space-4);
         display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
         cursor:pointer;color:var(--ink-3);transition:border-color var(--dur-fast),
         background var(--dur-fast)}
.uc-drop:hover,.uc-drop.is-over{border-color:var(--teal-500);background:var(--teal-50)}
.uc-drop:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-drop-ic{color:var(--teal-600)}
.uc-drop p{margin:0;font-size:var(--text-sm)}
.uc-formats{font-size:var(--text-sm);color:var(--ink-4);text-align:center;
            margin-top:var(--space-4);line-height:1.6}
.uc-formats span{display:block;color:var(--ink-4)}
.uc-escape{display:flex;flex-direction:column;align-items:center;gap:2px;
           background:none;border:0;cursor:pointer;margin:var(--space-6) auto 0;
           min-height:44px;padding:var(--space-2)}
.uc-escape strong{font-size:var(--text-sm);font-weight:600;color:var(--teal-600)}
.uc-escape span{font-size:var(--text-xs);color:var(--ink-4)}
.uc-escape:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-gallery-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
                 cursor:pointer;color:var(--teal-600);font-size:var(--text-sm);
                 font-weight:600;min-height:44px;margin:var(--space-2) auto 0}
.uc-gallery-link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
           gap:var(--space-2);margin-top:var(--space-4)}
.uc-photo{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;
          background:var(--bg-muted);display:flex;align-items:center;
          justify-content:center;color:var(--ink-4);font-size:var(--text-xs)}

/* ---------- progress screen ------------------------------------------- */

.uc-hero-ic{color:var(--teal-500);display:flex;justify-content:center;
            margin-bottom:var(--space-4)}
.uc-strip{display:flex;gap:var(--space-2);justify-content:center;margin:var(--space-5) 0}
.uc-strip div{width:52px;height:52px;border-radius:var(--r-sm);background:var(--bg-subtle);
              overflow:hidden;flex-shrink:0}
.uc-strip img{width:100%;height:100%;object-fit:cover;display:block}
.uc-status{text-align:center;font-size:var(--text-base);font-weight:600;color:var(--ink);
           margin:var(--space-4) 0 var(--space-3)}
.uc-pct{text-align:center;font-size:var(--text-sm);color:var(--ink-4);
        margin-top:var(--space-2);font-variant-numeric:tabular-nums}
.uc-didyouknow{background:var(--teal-50);border-radius:var(--r-md);
               padding:var(--space-4) var(--space-5);margin-top:var(--space-7)}
.uc-didyouknow h3{margin:0 0 4px;font-size:var(--text-sm);font-weight:700;
                  color:var(--teal-700)}
.uc-didyouknow p{margin:0;font-size:var(--text-sm);color:var(--ink-3);line-height:1.5}
.uc-center{text-align:center}
.uc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
       clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- WCAG AA step-ups over v5_24 (see HANDOVER.md) --------------- */
/* White on --teal-500 is 2.56:1 — the v5_24 primary button fails AA on its
   label. Stepping up to the next locked token (--teal-600, 6.36:1) fixes it
   without inventing a colour; hover moves to --teal-700 (9.89:1). */
.btn-primary{background:var(--teal-600)}
.btn-primary:hover{background:var(--teal-700)}
.uc-opt-check{background:var(--teal-600)}
/* --price-500 is 4.7:1 on white but 4.15–4.40:1 on --bg-page / --bg-subtle /
   --teal-50, so sale prices step up to --price-600 (5.55–6.29:1). */
.uc-bar .uc-price-now{color:var(--price-600)}   /* red is the bar total only */
.bottom-cta .price-block .price{color:var(--price-600)}
/* --ink-4 is 4.27–4.38:1 on the cream page ground, which every screen now uses
   after the books-parity pass, so all secondary copy on it steps up. */
.page-title .sub,
.uc-note,
.uc-seg-note,
.uc-formats span,
.uc-escape span,
.uc-pct{color:var(--ink-3)}
.uc-opt-delta--included{color:var(--ink-3)}
/* detail-row labels sit on --teal-50 when the card is selected. */
.uc-detail-row dt{color:var(--ink-3)}

/* ---------- product hub (the screen above /calendars) ------------------- */

.uc-appbar{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
           background:var(--teal-500);color:var(--bg-surface);min-height:44px;
           padding:var(--space-2) var(--space-screen)}
.uc-appbar-mark{width:16px;height:16px;border-radius:2px;background:var(--bg-surface);
                flex-shrink:0}
.uc-appbar-name{font-size:var(--text-sm);font-weight:700;letter-spacing:.04em}
.uc-main--hub{max-width:944px}
.uc-hub-section{margin-top:var(--space-7)}
.uc-hub-section h2{margin:0;font-size:var(--text-md);font-weight:700;color:var(--ink)}
.uc-hub-sub{margin:2px 0 var(--space-4);font-size:var(--text-sm);color:var(--ink-3)}
.uc-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
             gap:var(--space-4)}
/* grid, not flex: in a column flex container the media item's `flex-basis: auto` resolves
   from content height and silently beats `aspect-ratio`. A grid row of `auto` honours it.
   (The entry cards are grid for the same reason.) */
.uc-hub-card{display:grid;grid-template-rows:auto 1fr;background:var(--bg-surface);
             border:var(--bp-opt-border) solid transparent;
             border-radius:var(--r-md);overflow:hidden;
             min-width:0;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.uc-hub-card:hover,.uc-hub-card:focus-within{border-color:var(--teal-500)}
.uc-hub-card.is-current{border-color:var(--teal-500)}
/* 4:3 as before — 3:2 is only for the six calendar entry tiles. The card is grid (see
   above) so this ratio is now actually honoured; as a column flex container these six
   rendered at 1.148 / 1.333 / 1.169 instead of 4:3. */
.uc-hub-media{aspect-ratio:4/3;background:var(--bg-subtle);min-width:0}
.uc-hub-media img{width:100%;height:100%;object-fit:cover;display:block}
.uc-hub-body{display:flex;flex-direction:column;gap:6px;padding:var(--space-4);
             flex:1 1 auto;min-width:0}
.uc-hub-body h3{margin:0;font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.uc-hub-body p{margin:0 0 var(--space-2);font-size:var(--text-xs);color:var(--ink-3);
               line-height:1.5;flex:1 1 auto}
.uc-hub-body .btn{width:100%;text-decoration:none}
@media (max-width:639px){ .uc-hub-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- gallery picker --------------------------------------------- */

.uc-gal-head{display:flex;align-items:center;gap:var(--space-3);
             padding:var(--space-3) var(--space-screen);background:var(--bg-surface);
             border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.uc-gal-head h1{flex:1 1 auto;min-width:0;margin:0;font-size:var(--text-md);
                font-weight:700;color:var(--ink);display:flex;align-items:center;
                gap:var(--space-2);justify-content:center}
.uc-gal-selectall{background:none;border:0;cursor:pointer;color:var(--teal-600);
                  font-size:var(--text-sm);font-weight:600;min-height:44px;
                  padding-inline:var(--space-2);flex-shrink:0}
.uc-gal-selectall:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-gal-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
            padding:var(--space-3) var(--space-screen);background:var(--bg-surface);
            border-bottom:1px solid var(--line-2)}
.uc-gal-search{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:0}
.uc-gal-search .uc-ic{position:absolute;left:12px;color:var(--ink-4);pointer-events:none}
.uc-gal-search .input{padding-left:36px;width:100%}
.uc-main--gal{max-width:944px;padding-block:0 calc(var(--space-8) * 3)}
.uc-gal-section{margin-top:var(--space-5)}
.uc-gal-section header{display:flex;align-items:center;justify-content:space-between;
                       gap:var(--space-3);padding-block:var(--space-2);
                       border-bottom:1px solid var(--line-2);margin-bottom:var(--space-3)}
.uc-gal-section h2{margin:0;font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.uc-gal-section header span{font-size:var(--text-xs);color:var(--ink-3)}
.uc-gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
             gap:var(--space-2)}
.uc-gal-tile{position:relative;padding:0;border:2px solid transparent;cursor:pointer;
             border-radius:var(--r-sm);overflow:hidden;background:var(--bg-muted);
             aspect-ratio:1;min-width:0}
.uc-gal-tile img{width:100%;height:100%;object-fit:cover;display:block}
.uc-gal-tile[aria-checked=true]{border-color:var(--teal-500)}
.uc-gal-tile:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-gal-check{position:absolute;right:5px;bottom:5px;width:20px;height:20px;
              border-radius:var(--r-pill);display:grid;place-items:center;
              background:var(--bg-surface);color:var(--ink-5);
              box-shadow:var(--shadow-xs);transition:background var(--dur-fast)}
.uc-gal-tile[aria-checked=true] .uc-gal-check{background:var(--teal-500);
              color:var(--bg-surface)}
.uc-gal-fav{position:absolute;left:5px;top:5px;color:var(--bg-surface);
            filter:drop-shadow(0 1px 2px var(--overlay-scrim-strong))}
.uc-gal-count{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--ink)}
/* v5_24's .chip is 36 px — below the 44 px tap minimum, same class of defect as the
   37 px button. Logged in SYNC.md; corrected here. */
.chip-row .chip{min-height:44px}

/* ---------- upload: selected state ------------------------------------- */

.uc-up-head{display:flex;align-items:flex-end;justify-content:space-between;
            gap:var(--space-3);margin-top:var(--space-5)}
.uc-up-head p{margin:0;display:flex;flex-direction:column;min-width:0}
.uc-up-head strong{font-size:var(--text-md);font-weight:600;color:var(--ink)}
.uc-up-head span{font-size:var(--text-xs);color:var(--ink-3)}
.uc-photo{position:relative}
.uc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.uc-photo-check{position:absolute;right:5px;bottom:5px;width:20px;height:20px;
                border-radius:var(--r-pill);display:grid;place-items:center;
                background:var(--teal-500);color:var(--bg-surface);box-shadow:var(--shadow-xs)}
/* 44 px tap target, 22 px visual: the chip lives on ::before so the control can
   meet the minimum without covering the thumbnail */
.uc-photo-remove{position:absolute;right:0;top:0;width:44px;height:44px;padding:0;
                 border:0;background:none;cursor:pointer;display:grid;place-items:center;
                 color:var(--ink-3);opacity:0;
                 transition:opacity var(--dur-fast) var(--ease-out)}
.uc-photo-remove::before{content:'';position:absolute;right:4px;top:4px;width:22px;
                 height:22px;border-radius:var(--r-pill);background:var(--bg-surface);
                 box-shadow:var(--shadow-sm)}
.uc-photo-remove .uc-ic{position:absolute;right:9px;top:9px}
.uc-photo:hover .uc-photo-remove,.uc-photo-remove:focus-visible{opacity:1}
.uc-photo-remove:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (hover:none){ .uc-photo-remove{opacity:1} }

/* ---------- editor ------------------------------------------------------ */

.uc-ed{display:flex;flex-direction:column;height:100dvh;background:var(--bg-page);
       overflow:hidden}
.uc-ed-app{display:flex;align-items:center;gap:var(--space-3);background:var(--teal-500);
           /* re-pointed to --bp-teal in books-parity.css so ?sync=target moves it too */
           color:var(--bg-surface);min-height:44px;padding-inline:var(--space-screen);
           flex-shrink:0}
.uc-ed-app .uc-appbar-name{flex:1 1 auto;text-align:center}
.uc-ed-app .uc-ed-appbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;
           padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--bg-surface);
           background:none;color:var(--bg-surface);cursor:pointer;
           font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.uc-ed-app .uc-ed-appbtn:hover{background:var(--teal-600)}
.uc-ed-app .uc-ed-appbtn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-surface)}

.uc-ed-bar{display:flex;align-items:center;gap:var(--space-3);background:var(--bg-surface);
           border-bottom:1px solid var(--line);min-height:44px;
           padding-inline:var(--space-screen);flex-shrink:0}
.uc-ed-bar .uc-ed-icons{display:flex;gap:4px}
.uc-ed-iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;
               background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--ink-3)}
.uc-ed-iconbtn:hover{background:var(--bg-muted)}
.uc-ed-iconbtn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.uc-ed-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-title{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
             gap:var(--space-2);flex-wrap:wrap;min-width:0;font-size:var(--text-sm)}
.uc-ed-title strong{font-weight:700;color:var(--ink)}
.uc-ed-dirty{display:inline-flex;align-items:center;gap:5px;color:var(--price-500);
             font-size:var(--text-xs);font-weight:500}
.uc-ed-dirty::before{content:'';width:6px;height:6px;border-radius:var(--r-pill);
             background:currentColor}
.uc-ed-save{background:none;border:0;cursor:pointer;color:var(--teal-600);
            font-size:var(--text-xs);font-weight:600;min-height:44px;padding-inline:4px}
.uc-ed-save:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-months{font-size:var(--text-xs);color:var(--ink-3)}
/* 44 px hit area, 28 px visual chip — same technique as .uc-info-btn */
.uc-ed-rename{display:inline-grid;place-items:center;width:44px;height:44px;border:0;
        position:relative;background:none;cursor:pointer;color:var(--ink-4);padding:0}
.uc-ed-rename::before{content:'';position:absolute;inset:8px;border-radius:var(--r-sm)}
.uc-ed-rename .uc-ic{position:relative}
.uc-ed-rename:hover::before{background:var(--bg-muted)}
.uc-ed-rename:hover{color:var(--teal-600)}
.uc-ed-rename:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.uc-ed-body{flex:1 1 auto;display:flex;min-height:0}
.uc-ed-canvas{flex:1 1 auto;overflow-y:auto;padding:var(--space-5) var(--space-screen)
              calc(var(--space-8) * 2)}
.uc-ed-spread{max-width:460px;margin:0 auto var(--space-7)}
.uc-ed-spread-head{display:flex;align-items:center;justify-content:space-between;
                   gap:var(--space-3);margin-bottom:var(--space-2)}
.uc-ed-spread-head h2{margin:0;font-size:var(--text-xs);font-weight:600;
                      letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.uc-ed-arrange{display:flex;align-items:center;gap:var(--space-2)}
.uc-ed-arrange span{font-size:var(--text-xs);color:var(--ink-3)}
.uc-ed-arrange-set{display:flex;gap:0}
/* 44 px hit area, 30 px visual ring — same technique as .uc-info-btn */
.uc-ed-arr{width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;
           position:relative;display:grid;place-items:center;color:var(--ink-4)}
.uc-ed-arr::before{content:'';position:absolute;inset:7px;border-radius:var(--r-pill);
           border:1px solid var(--line);background:var(--bg-surface)}
/* editor chrome keeps the live tool's 1 px hairlines; the 2 px stroke rule is for the
   wizard's selectable cards, tabs and tiles. */
.uc-ed-arr i{position:relative}
.uc-ed-arr[aria-checked=true]{color:var(--teal-600)}
.uc-ed-arr[aria-checked=true]::before{border-color:var(--teal-500)}
.uc-ed-arr:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-arr i{display:block;background:currentColor;border-radius:1px}
.uc-ed-page{background:var(--bg-surface);box-shadow:var(--shadow-md);overflow:hidden;
            border-radius:2px}
.uc-ed-photo{position:relative;background:var(--bg-subtle);overflow:hidden}
.uc-ed-photo img{width:100%;height:100%;object-fit:cover;display:block}
.uc-ed-year{position:absolute;inset:auto 0 8% 0;text-align:center;color:var(--bg-surface);
            font-size:clamp(34px,9cqw,72px);font-weight:800;letter-spacing:-.02em;
            text-shadow:0 2px 14px var(--overlay-scrim)}
.uc-ed-grid{padding:var(--space-4)}
.uc-ed-grid table{width:100%;border-collapse:collapse;table-layout:fixed}
.uc-ed-grid caption{text-align:left;font-size:var(--text-sm);font-weight:700;
                    color:var(--ink);padding-bottom:var(--space-2)}
.uc-ed-grid th{font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--ink-4);
               padding-bottom:4px;text-align:center}
.uc-ed-grid td{font-size:var(--text-xs);color:var(--ink-2);text-align:center;
               padding:3px 0;border:1px solid var(--line-2);height:22px}
.uc-ed-grid td.is-weekend{color:var(--price-500)}
.uc-ed-grid td.is-holiday{background:var(--teal-50);font-weight:600}
.uc-ed-grid td:empty{border-color:transparent}
.uc-ed-hol{margin:var(--space-2) 0 0;font-size:9px;color:var(--ink-4);line-height:1.5}

.uc-ed-panel{width:270px;flex-shrink:0;background:var(--bg-surface);
             border-left:1px solid var(--line);display:flex;flex-direction:column;
             min-height:0}
.uc-ed-tabs{display:flex;gap:2px;padding:var(--space-2) var(--space-2) 0}
.uc-ed-tab{flex:1 1 auto;min-height:44px;border:0;background:none;cursor:pointer;
           font-size:var(--text-xs);font-weight:600;color:var(--ink-4);
           border-radius:var(--r-sm) var(--r-sm) 0 0}
.uc-ed-tab[aria-selected=true]{background:var(--teal-50);color:var(--teal-700)}
.uc-ed-tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-add{margin:var(--space-2);min-height:44px;border:1.5px dashed var(--teal-300);
           border-radius:var(--r-sm);background:var(--teal-50);color:var(--teal-700);
           font-size:var(--text-xs);font-weight:700;cursor:pointer;width:calc(100% - 16px)}
.uc-ed-add:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-pane{flex:1 1 auto;overflow-y:auto;padding:0 var(--space-2) var(--space-3)}
.uc-ed-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.uc-ed-hint{padding:var(--space-3) var(--space-3);font-size:9px;color:var(--ink-4);
            text-align:center;line-height:1.5;border-top:1px solid var(--line-2)}
.uc-ed-pagelist{display:flex;flex-direction:column;gap:4px}
.uc-ed-pageitem{display:flex;align-items:center;gap:var(--space-2);padding:6px;
                border:0;background:none;cursor:pointer;border-radius:var(--r-sm);
                text-align:left;min-height:44px;font-size:var(--text-xs);color:var(--ink-3)}
.uc-ed-pageitem:hover{background:var(--bg-subtle)}
.uc-ed-pageitem[aria-current=true]{background:var(--teal-50);color:var(--teal-700);
                font-weight:600}
.uc-ed-pageitem:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-pageitem span{width:26px;height:26px;border-radius:2px;background:var(--bg-muted);
                overflow:hidden;flex-shrink:0}
.uc-ed-pageitem img{width:100%;height:100%;object-fit:cover;display:block}

.uc-ed-toolbar{display:flex;background:var(--bg-surface);border-top:1px solid var(--line);
               flex-shrink:0}
.uc-ed-tool{flex:1 1 0;min-height:56px;border:0;background:none;cursor:pointer;
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            gap:3px;color:var(--ink-4);font-size:9px;font-weight:500;padding:6px 2px}
.uc-ed-tool svg{width:24px;height:24px;display:block}
.uc-ed-tool svg path{fill:currentColor}
.uc-ed-tool:hover{color:var(--teal-600);background:var(--bg-subtle)}
.uc-ed-tool[aria-expanded=true]{color:var(--teal-600)}
.uc-ed-tool:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.uc-ed-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                gap:var(--space-2)}
.uc-ed-swatch{border:1.5px solid var(--line);border-radius:var(--r-sm);background:none;
              cursor:pointer;padding:var(--space-2);text-align:left;min-height:44px}
.uc-ed-swatch[aria-checked=true]{border-color:var(--teal-500);background:var(--teal-50)}
.uc-ed-swatch:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-swatch em{display:flex;gap:2px;margin-bottom:5px}
.uc-ed-swatch em i{width:14px;height:14px;border-radius:2px;display:block}
.uc-ed-swatch b{font-size:var(--text-xs);font-weight:600;color:var(--ink-3)}
.uc-ed-typo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.uc-ed-typo button{border:1.5px solid var(--line);border-radius:var(--r-sm);
                   background:none;cursor:pointer;min-height:64px;color:var(--ink-3)}
.uc-ed-typo button[aria-checked=true]{border-color:var(--teal-500);background:var(--teal-50);
                   color:var(--teal-700)}
.uc-ed-typo button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-typo strong{display:block;font-size:var(--text-lg)}
.uc-ed-typo small{font-size:9px}
.uc-ed-rows{display:flex;flex-direction:column;gap:var(--space-2)}
.uc-ed-evmonth{margin-top:var(--space-3)}
.uc-ed-evmonth h4{margin:0 0 4px;font-size:var(--text-xs);font-weight:700;color:var(--ink)}
.uc-ed-evmonth p{margin:0 0 6px;font-size:9px;color:var(--ink-4)}
@media (max-width:900px){
  .uc-ed-panel{display:none}
}

/* ---------- ONE hover grammar, everywhere ------------------------------- */
/* Every selectable surface hovers the way the entry cards do: a teal frame and a lift,
   never a fill. A tinted fill merged with the cream page and read as a second selected
   state. Selected stays distinguished by its tinted fill.
   The dropzone is the one exception — it is a drop *target*, so it fills. */
.uc-opt:hover:not([aria-disabled=true]):not([aria-checked=true]),
.uc-opt-wrap:has(.uc-opt:hover):not(:has(.uc-opt[aria-checked=true])),
.uc-seg:hover:not([aria-checked=true]),
.uc-month:has(.uc-month-summary:hover),
.uc-mbtn:hover:not([aria-disabled=true]):not([aria-checked=true]),
.uc-gal-tile:hover:not([aria-checked=true]){
  border-color:var(--teal-500);
  box-shadow:var(--shadow-sm);
}
.uc-gal-tile,.uc-mbtn{transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}

/* ---------- Project details modal ---------------------------------------- */
.uc-pd-intro{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--ink-3);
        line-height:1.5}
.uc-pd-callout{margin-top:var(--space-4);align-items:flex-start}
.uc-pd-callout p{margin:0;font-size:var(--text-sm);line-height:1.5}
.uc-pd-callout a{font-weight:600}
.field-label{letter-spacing:.06em}

/* ---------- mobile workspace drawer -------------------------------------- */
.uc-ed-burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
        color:var(--bg-surface);place-items:center;flex-shrink:0;padding:0}
.uc-ed-burger:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-surface)}
.uc-ed-drawer-ov{position:fixed;inset:0;z-index:50;background:var(--overlay-scrim);
        opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.uc-ed-drawer-ov.is-open{opacity:1}
.uc-ed-drawer{position:absolute;inset:0 auto 0 0;width:min(300px,86vw);
        background:var(--bg-surface);box-shadow:var(--shadow-lg);
        display:flex;flex-direction:column;padding:var(--space-2) 0 var(--space-4);
        transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-out);
        overflow-y:auto}
.uc-ed-drawer-ov.is-open .uc-ed-drawer{transform:none}
.uc-ed-drawer-head{display:flex;align-items:center;justify-content:space-between;
        padding:var(--space-2) var(--space-2) var(--space-2) 18px;
        border-bottom:1px solid var(--line-2);margin-bottom:var(--space-2)}
.uc-ed-drawer-head strong{font-size:var(--text-md);color:var(--ink)}
.uc-ed-drawer .uc-ed-railbtn span{opacity:1}
.uc-ed-drawer .uc-ed-railnote{opacity:1;white-space:normal}
@media (prefers-reduced-motion: reduce){
  .uc-ed-drawer,.uc-ed-drawer-ov{transition:none}
}
@media (max-width:1100px){ .uc-ed-burger{display:grid} }

/* ---------- toolbar sheets, upgraded to the live anatomy ------------------ */

.uc-sheetmodal .grabber{display:none}
.uc-sheet-desc{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--ink-3);
        line-height:1.5}
.uc-sheet-section{margin:var(--space-5) 0 var(--space-3)}
.uc-sheet-section:first-child{margin-top:0}
.uc-sheet-section h3{margin:0 0 2px;font-size:var(--text-xs);font-weight:600;
        letter-spacing:.08em;color:var(--ink)}
.uc-sheet-section p{margin:0;font-size:var(--text-sm);color:var(--ink-3);line-height:1.5}

.uc-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
        gap:var(--space-3)}
.uc-sheet-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* the option card family: white card, 2 px frame, floating check badge */
.uc-sheet-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
        gap:var(--space-2);min-height:44px;padding:var(--space-3);
        background:var(--bg-surface);border:var(--bp-opt-border, 2px) solid var(--line-2);
        border-radius:var(--r-md);cursor:pointer;text-align:left;min-width:0;
        transition:border-color var(--dur-fast),background var(--dur-fast),
                   box-shadow var(--dur-fast)}
.uc-sheet-card:hover:not([aria-checked=true]){border-color:var(--teal-500);
        box-shadow:var(--shadow-sm)}
.uc-sheet-card[aria-checked=true]{border-color:var(--teal-500);background:var(--teal-50)}
.uc-sheet-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-sheet-card > b{font-size:var(--text-sm);font-weight:600;color:var(--ink);min-width:0;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.uc-sheet-check{position:absolute;top:-8px;right:-8px;width:22px;height:22px;
        border-radius:var(--r-pill);background:var(--teal-500);color:var(--bg-surface);
        display:grid;place-items:center;box-shadow:var(--shadow-sm);opacity:0;
        transform:scale(.6);transition:opacity var(--dur-fast),transform var(--dur-fast)}
.uc-sheet-card[aria-checked=true] .uc-sheet-check{opacity:1;transform:none}

.uc-swatches{display:flex;gap:5px}
.uc-swatches i{display:block;width:20px;height:20px;border-radius:var(--r-xs);
        box-shadow:inset 0 0 0 1px var(--overlay-scrim)}

.uc-sheet-card--type{align-items:center;text-align:center}
.uc-sheet-card--type > b{align-self:center}
.uc-type-sample{font-size:34px;line-height:1.2;color:var(--ink);padding:var(--space-2) 0 0;
        align-self:center}

.uc-sheet-card--mini{align-items:center}
.uc-sheet-card--mini > b{align-self:center}
.uc-mini{width:100%;display:block}
.uc-mini svg{width:100%;height:auto;display:block}
.mp-page{fill:var(--bg-surface);stroke:var(--line);stroke-width:1}
.mp-photo{fill:var(--ink-2)}
.mp-band{fill:var(--ink)}
.mp-month{font:700 7px var(--font-sans);letter-spacing:.08em;fill:var(--bg-surface)}
.mp-month--ink{fill:var(--ink)}
.mp-grid{fill:var(--bg-surface);stroke:var(--line);stroke-width:.75}
.mp-line{stroke:var(--line-2);stroke-width:.75}
.mp-glyph rect{fill:none;stroke:var(--ink-5);stroke-width:1.2}
.mp-glyph circle{fill:var(--ink-5)}
.uc-sheet-card[aria-checked=true] .mp-photo{fill:var(--teal-700)}
.uc-sheet-card[aria-checked=true] .mp-band{fill:var(--teal-600)}

.uc-sheet-card--page{align-items:center;padding:var(--space-2)}
.uc-sheet-card--page > b{align-self:center;font-weight:500;color:var(--ink-3)}
.uc-page-thumb{width:100%;aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;
        background:var(--bg-muted)}
.uc-page-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* events */
.uc-sheet-row{display:flex;align-items:center;justify-content:space-between;
        gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line-2);
        border-radius:var(--r-md)}
.uc-sheet-row strong{display:block;font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.uc-sheet-row small{display:block;font-size:var(--text-xs);color:var(--ink-3);
        line-height:1.4;margin-top:1px}
.uc-sheet-add{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;
        background:none;cursor:pointer;color:var(--teal-600);font-size:var(--text-sm);
        font-weight:600;padding:0 var(--space-1);margin-top:var(--space-2)}
.uc-sheet-add:hover{color:var(--teal-700)}
.uc-sheet-add:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-sheet-month{margin-top:var(--space-4);border-top:1px solid var(--line-2);
        padding-top:var(--space-3)}
.uc-sheet-month header{display:flex;align-items:center;justify-content:space-between;
        gap:var(--space-3);margin-bottom:var(--space-2)}
.uc-sheet-month h4{margin:0;font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.uc-sheet-event{display:flex;align-items:center;gap:var(--space-3);min-height:44px;
        font-size:var(--text-sm);color:var(--ink-2);cursor:pointer;
        border-radius:var(--r-sm);padding-inline:var(--space-1)}
.uc-sheet-event:hover{background:var(--bg-subtle)}
.uc-sheet-event input{width:18px;height:18px;accent-color:var(--teal-600);flex-shrink:0}
.uc-sheet-event b{font-weight:600;font-variant-numeric:tabular-nums}
.uc-sheet-dot{width:5px;height:5px;border-radius:var(--r-pill);
        background:var(--marker-personal);flex-shrink:0}
.uc-sheet-none{margin:0;font-size:var(--text-sm);color:var(--ink-4)}

/* settings nav rows */
.uc-sheet-nav{display:flex;align-items:center;gap:var(--space-3);width:100%;
        min-height:64px;padding:var(--space-3);background:var(--bg-surface);
        border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;
        text-align:left;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.uc-sheet-nav:hover{border-color:var(--teal-500);box-shadow:var(--shadow-sm)}
.uc-sheet-nav:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-sheet-navic{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-md);
        background:var(--teal-50);color:var(--teal-600);display:grid;place-items:center}
.uc-sheet-navtext{flex:1 1 auto;min-width:0}
.uc-sheet-navtext b{display:block;font-size:var(--text-md);font-weight:500;color:var(--ink)}
.uc-sheet-navtext small{display:block;font-size:var(--text-sm);color:var(--ink-3);
        line-height:1.4;margin-top:1px}
.uc-sheet-chev{color:var(--ink-4);transform:rotate(-90deg);flex-shrink:0}
.uc-sheet-nav--danger .uc-sheet-navic{background:var(--danger-50);color:var(--danger-600)}
.uc-sheet-nav--danger b{color:var(--danger-600)}

.uc-sheet-foot{display:flex;flex-direction:column;gap:var(--space-2);font-style:normal}
.uc-sheet-foot p{margin:0;font-size:var(--text-xs);color:var(--ink-3);text-align:center}

/* on mobile the sheet is a bottom sheet, per the v5_24 sheet anatomy */
@media (max-width:640px){
  .uc-overlay:has(.uc-sheetmodal){align-items:flex-end;padding:0}
  .uc-sheetmodal{max-width:none;width:100%;max-height:86dvh;
        border-radius:var(--r-xl) var(--r-xl) 0 0}
  .uc-sheetmodal .grabber{display:block;width:36px;height:4px;border-radius:var(--r-pill);
        background:var(--ink-6);margin:10px auto 0}
}

/* ---------- escape-hatch footer for option sheets (brief 05) -------------
   Divider + question + ghost action + reassurance caption. Deliberately quiet:
   it must never compete with the options above it. v5_25 write-back candidate. */
.uc-ed-sheetfoot{margin-top:var(--space-5)}
.uc-ed-sheetfoot hr{border:0;border-top:1px solid var(--line-2);margin:0 0 var(--space-4)}
.uc-esc-q{margin:0 0 2px;font-size:var(--text-sm);color:var(--ink-3)}
.uc-esc-btn{min-height:44px;padding-inline:0;gap:4px}
.uc-esc-chev{transform:rotate(-90deg)}
.uc-esc-caption{margin:2px 0 0;font-size:var(--text-xs);color:var(--ink-4)}

/* format sheet: orientation group headers + the fallback callout (C3) */
.uc-fmt-group{margin-top:var(--space-4)}
.uc-fmt-group:first-child{margin-top:0}
.uc-fmt-group h3{margin:0 0 var(--space-2);font-size:var(--text-xs);font-weight:600;
        letter-spacing:.08em;color:var(--ink-3)}
.uc-fmt-fallback{margin-bottom:var(--space-2);align-items:flex-start;text-align:left}
/* danger rows hover red, not teal (minor sweep) */
.uc-sheet-nav--danger:hover{border-color:var(--danger-500)}
.uc-ed-menuitem.is-danger:hover{background:var(--danger-50)}

/* ---------- order summary (C4) ------------------------------------------ */
.uc-order-card{background:var(--bg-surface);border:1px solid var(--line-2);
        border-radius:var(--r-md);padding:var(--space-5);margin-top:var(--space-4)}
.uc-order-card hr{border:0;border-top:1px solid var(--line-2);margin:var(--space-4) 0}
.uc-order-prod{display:flex;gap:var(--space-4);align-items:center;min-width:0}
.uc-order-prod b{font-size:var(--text-md);color:var(--ink)}
.uc-order-lines{margin:0}
.uc-order-line{display:flex;justify-content:space-between;gap:var(--space-4);
        padding-block:4px;font-size:var(--text-sm)}
.uc-order-line dt{color:var(--ink-3);margin:0;min-width:0}
.uc-order-line dd{margin:0;font-weight:600;color:var(--ink);white-space:nowrap;
        font-variant-numeric:tabular-nums}
.uc-order-total{display:flex;justify-content:space-between;align-items:baseline;
        gap:var(--space-4)}
.uc-order-total > span:first-child{font-size:var(--text-md);font-weight:700;color:var(--ink)}

/* Project details hub rows (M4b) */
.uc-pd-rows{margin:var(--space-4) 0 0;border-top:1px solid var(--line-2)}
.uc-pd-row{display:flex;align-items:center;gap:var(--space-3);min-height:48px;
        border-bottom:1px solid var(--line-2);font-size:var(--text-sm)}
.uc-pd-row dt{color:var(--ink-3);min-width:64px;margin:0}
.uc-pd-row dd{flex:1 1 auto;margin:0;font-weight:600;color:var(--ink);min-width:0;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-pd-row .btn-link{min-width:0;padding-inline:var(--space-2)}

/* ---------- round 4 · logo-home, cover layouts, week numbers, grid toggle -------- */
.uc-appbar-home{display:inline-flex;align-items:center;gap:10px;color:inherit;
                text-decoration:none;border-radius:var(--r-sm)}
.uc-appbar-home:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-grid table.is-nogrid td{border-color:transparent}
.uc-ed-grid .uc-ed-wk{font-size:8px;color:var(--ink-4);border-color:transparent;
                      width:16px;font-variant-numeric:tabular-nums}
/* cover layout variants (Themes): centered = the measured default */
.uc-cover--band .uc-ed-cover-scrim{display:none}
.uc-cover--band .uc-ed-year{inset:auto 0 0 0;padding:3% 0;
                            background:var(--teal-600);text-shadow:none;
                            font-size:clamp(26px,7cqw,54px)}
.uc-cover--minimal .uc-ed-cover-scrim{display:none}
.uc-cover--minimal .uc-ed-year{inset:auto 0 5% 0;font-weight:600;
                               font-size:clamp(24px,6cqw,44px);
                               text-shadow:0 1px 10px var(--overlay-scrim)}
.uc-cover-mini{display:block;width:44px;height:56px;border-radius:3px;margin:0 auto;
               background:var(--bg-subtle);border:1px solid var(--line-2);position:relative}
.uc-cover-mini::after{content:'';position:absolute;left:0;right:0;background:var(--ink-4);
                      border-radius:1px}
.uc-cover-mini--centered::after{bottom:10px;height:8px;margin:0 8px}
.uc-cover-mini--band::after{bottom:0;height:12px;background:var(--teal-600)}
.uc-cover-mini--minimal::after{bottom:6px;height:4px;margin:0 14px;opacity:.55}

/* ---------- round 4 · Events sheet: country select + inline personal form -------- */
.uc-ev-row{align-items:flex-start}
.uc-ev-row .uc-ev-country{flex:0 0 auto;width:min(200px,45%);min-height:44px}
.uc-ev-form{margin:var(--space-2) 0 var(--space-3);padding:var(--space-3);
            border:1px solid var(--line-2);border-radius:var(--r-md);
            background:var(--bg-subtle);display:grid;gap:var(--space-3)}
.uc-ev-form-row{display:flex;gap:var(--space-3);align-items:flex-end}
.uc-ev-field{display:grid;gap:4px;flex:1;min-width:0}
.uc-ev-field small{font-size:var(--text-xs);font-weight:600;color:var(--ink-3)}
.uc-ev-field--day{flex:0 0 88px}
.uc-ev-form .input,.uc-ev-form select{min-height:44px}
.uc-ev-form .btn{flex:0 0 auto;min-height:44px}
.uc-ev-count{font-weight:400;color:var(--ink-4)}
.uc-ev-live{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--teal-700);
            min-height:1.2em}
.uc-ev-deselect{padding:0;min-height:44px}
.uc-ev-tag{margin-left:auto;flex-shrink:0}
.uc-ev-personal{cursor:default}
.uc-sheet-dot--personal{background:var(--teal-600)}
.uc-ev-x{display:inline-flex;align-items:center;justify-content:center;width:32px;
         height:32px;border:0;background:none;color:var(--ink-4);cursor:pointer;
         border-radius:var(--r-sm);flex-shrink:0;position:relative}
.uc-ev-x::before{content:'';position:absolute;inset:-6px}   /* 44px hit in a 32px chip */
.uc-ev-x:hover{color:var(--danger-500);background:var(--bg-subtle)}
.uc-ev-x:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- round 4 · Calendarium sheet rows -------- */
.uc-cal-row{align-items:center;gap:var(--space-3)}
.uc-cal-row select{flex:0 0 auto;width:min(180px,45%);min-height:44px}
.uc-cal-row .uc-month-years{margin:0;flex:0 0 auto}

/* ---------- round 4b · Layout sheet: live twelve-card matrix -------- */
.uc-ls-cards .uc-ls-card{align-items:stretch;text-align:center}
.uc-ls-card > b{align-self:center}
.uc-ls-page{display:block;border-radius:4px;overflow:hidden;border:1px solid var(--line-2);
            background:var(--bg-surface);padding:0;position:relative}
/* photo blocks: grey slabs with the tiny photo glyph */
.uc-ls-photos{display:grid;gap:2px;grid-template-columns:1fr 1fr}
.uc-ls-photos i{display:flex;align-items:center;justify-content:center;
                background:var(--ls-photo);min-height:0}
.uc-ls-photos b{display:block;width:12px;height:9px;border-radius:1.5px;background:var(--ls-glyph);
                position:relative}
.uc-ls-photos b::after{content:'';position:absolute;top:1.5px;right:2px;width:3px;
                       height:3px;border-radius:50%;background:var(--ls-glyph-dot)}
.uc-ls-photos--1{grid-template-columns:1fr}
.uc-ls-photos--3 i:first-child{grid-column:1/-1}
/* the month heading */
.uc-ls-month{display:block;text-align:right;padding:4px 6px;line-height:1.1}
.uc-ls-month strong{display:block;font-size:9px;font-weight:800;letter-spacing:.02em;
                    color:var(--ink)}
.uc-ls-month span{font-size:7px;color:var(--ink-4)}
/* the real mini grid */
.uc-ls-grid{width:calc(100% - 8px);margin:0 4px 4px;border-collapse:collapse;
            table-layout:fixed}
.uc-ls-grid th{font-size:4.5px;font-weight:600;color:var(--ink-4);padding:1px 0;
               text-align:center;letter-spacing:.04em}
.uc-ls-grid td{font-size:4.5px;color:var(--ink-2);text-align:center;padding:1.5px 0;
               border:.5px solid var(--line-2)}
.uc-ls-grid td:empty{border-color:transparent}
.uc-ls-grid td.is-we{color:var(--price-500)}
/* CLASSIC: dark page, photos on top, band, dark grid */
.uc-ls-page--classic{background:var(--ls-navy);border-color:var(--ls-navy)}
.uc-ls-page--classic .uc-ls-photos{padding:4px 4px 0;min-height:64px}
.uc-ls-page--classic .uc-ls-photos i{background:var(--ls-navy-photo)}
.uc-ls-page--classic .uc-ls-photos b{background:var(--ls-navy-glyph)}
.uc-ls-page--classic .uc-ls-month{text-align:left;background:var(--ls-navy-band);margin-top:4px;
                                  padding:3px 6px}
.uc-ls-page--classic .uc-ls-month strong{color:var(--bg-surface)}
.uc-ls-page--classic .uc-ls-month span{color:var(--ls-navy-band-sub)}
.uc-ls-grid.is-dark{background:var(--ls-navy-grid)}
.uc-ls-grid.is-dark th{color:var(--ls-navy-grid-head)}
.uc-ls-grid.is-dark td{color:var(--ls-navy-grid-ink);border-color:var(--ls-navy)}
.uc-ls-grid.is-dark td.is-we{color:var(--ls-navy-we)}
.uc-ls-page--classic .uc-ls-grid{width:100%;margin:0}
/* MODERN: photos left, heading + grid right */
.uc-ls-page--modern{display:flex;min-height:110px}
.uc-ls-page--modern .uc-ls-photos{flex:0 0 45%;padding:0;gap:1px}
.uc-ls-photos--col{grid-template-columns:1fr;grid-auto-rows:1fr}
.uc-ls-photos--col.uc-ls-photos--3,.uc-ls-photos--col.uc-ls-photos--4{
  grid-template-columns:1fr 1fr}
.uc-ls-photos--col.uc-ls-photos--3 i:first-child{grid-column:1/-1}
.uc-ls-page--modern .uc-ls-right{flex:1;display:flex;flex-direction:column;min-width:0}
.uc-ls-page--modern .uc-ls-grid{flex:1}
/* MINIMAL: small thumbs + heading on one row, airy grid below */
.uc-ls-page--minimal{padding-top:4px}
.uc-ls-toprow{display:flex;align-items:flex-start;justify-content:space-between;
              padding:2px 4px 4px;gap:4px}
.uc-ls-photos--thumb{flex:0 0 auto;grid-auto-rows:18px}
.uc-ls-photos--thumb i{width:26px;background:var(--ls-thumb);border-radius:2px}
.uc-ls-photos--thumb.uc-ls-photos--1 i{width:34px;height:26px}
.uc-ls-page--minimal .uc-ls-grid td{border-color:var(--line)}