/* BOOKS PARITY — measured from https://test-app.tcg-configurator.picanova.de/photobooks
   on 20 Aug 2026 with tools/measure_books.py. Loaded LAST so it wins on source order.
   Geometry, type and placement are matched exactly. The three places where books is
   below an accessibility floor are listed at the bottom of this file, with the exact
   books value in a comment so the trade-off is visible and reversible. */

:root{
  /* layout-sheet mini previews, matched to the live editor's Layout modal captures */
  --ls-photo: #E3E6EB;          /* light photo slab */
  --ls-glyph: #AEB6C2;          /* photo glyph */
  --ls-glyph-dot: #F4F6F8;
  --ls-navy: #3A4557;           /* classic page ground */
  --ls-navy-photo: #4A5568;
  --ls-navy-glyph: #8D99AB;
  --ls-navy-band: #232B3A;
  --ls-navy-band-sub: #9AA5B5;
  --ls-navy-grid: #1E2634;
  --ls-navy-grid-head: #B7C0CD;
  --ls-navy-grid-ink: #DDE3EB;
  --ls-navy-we: #E4626F;
  --ls-thumb: #EDEFF3;

  /* --- measured surfaces --- */
  --bp-bg-page:      #F6F3F1;   /* books page ground (v5_24 --bg-page is #F5F0EB) */
  --bp-bg-card:      #FFFFFF;   /* option cards at rest are WHITE, not --bg-subtle */
  --bp-select-fill:  rgba(53,178,182,.06);   /* selected fill = teal-500 @ 6 % */
  --bp-pill-fill:    rgba(53,178,182,.10);   /* step pill fill  = teal-500 @ 10 % */

  /* --- measured frames --- */
  --bp-opt-border:   2px;       /* the single stroke weight for every selectable
                                   surface — entry cards, option cards, tabs, tiles,
                                   month card and buttons. v5_24 uses 1.5px; books is
                                   inconsistent (1px entry cards, 2px option cards). */
  --bp-opt-pad:      16px;
  --bp-seg-gap:      10px;      /* 3 × 204 + 2 × 10 = 632 content width */
  --bp-card-shadow:  0 10px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);

  /* --- measured type ladder (books uses 9/10/12/14/16/20/32) --- */
  --bp-text-micro:   11px;      /* books 9–10px — floored to the v5_24 minimum */
  --bp-text-small:   12px;
  --bp-text-body:    14px;
  --bp-text-price:   16px;
  --bp-text-h2:      20px;
  --bp-text-sub:     16px;
  --bp-text-h1:      32px;
  --bp-text-bar:     20px;      /* sticky-bar total */
  --bp-ls-pill:      .3px;
  --bp-ls-crumb:     .2px;
  --bp-ls-from:      1px;

  /* --- measured books ink palette (all three are off-token; v5_24's --ink
         #10151B and --ink-3/-4 read noticeably darker/cooler side by side) --- */
  --bp-ink-strong:   #4A4A4A;   /* H1, H2, card + paper names, delta, trust badges */
  --bp-ink-mid:      #666666;   /* entry subtitle and card description */
  --bp-ink-soft:     #6F6F6F;   /* subs, meta, reassurance, "Included", bar "from" */
  --bp-teal:         var(--teal-500);   /* books' brand teal, un-stepped */

  /* --- books' true micro sizes (previously floored to 11px) --- */
  --bp-text-nano:     9px;      /* bar "from" only */
  --bp-text-tiny:    10px;      /* meta, badge pill, breadcrumb, trust badges, paper desc */
  --bp-text-h1-entry: 30px;     /* entry H1 is 30/700; step-1 H1 is 32/800 */

  /* sampled from the supplied entry tiles (all six share it), so the media box and any
     letterbox bars read as part of the artwork rather than a seam */
  --bp-tile-bg:      #BEC6CD;

  /* --- editor, measured from the live tool (tools/measure_editor.py) --- */
  --ed-shell:        #F2F2F2;   /* outside the page ground */
  --ed-appbar-h:     56px;
  --ed-bar-h:        53px;
  --ed-rail-w:       68px;
  --ed-panel-w:      280px;
  --ed-toolbar-h:    84px;
  --ed-page-w:       600px;     /* the page box, whatever the aspect */
  --ed-photo-share:  60%;       /* month page: photo 60 %, grid 40 % */
  --ed-arr:          36px;      /* arrangement circles */
  --ed-arr-on-bg:    #E3F4F5;
  --ed-arr-off-bg:   #F5F5F5;
  --ed-arr-off-bd:   #E0E0E0;
  --ed-arr-label:    #52525B;
  --ed-chip-off-bg:  #FAFAFA;
  --ed-btn-bg:       #F4F4F5;   /* undo / redo */
  --ed-rail-item:    #575757;
  --ed-rail-label:   #999999;
  --ed-page-label:   #666666;
  --ed-hint-ink:     #1F2937;
  --ed-placeholder:  #E8E8E8;
  --ed-add-btn:      #D0D0D0;
  --ed-grid-line:    #E9ECEF;
  --ed-print-ink:    #000000;   /* the printed grid is true black */
  --ed-arr-frame:    #C0C0C0;   /* the 16×16 outline inside an arrangement circle */
  --ed-arr-block:    #9E9E9E;   /* the filled block that shows the layout */
  --ed-dot:          #666666;   /* the ··· button's three dots */
  --ed-weekend:      #DC3545;
  --ed-band:         rgba(0,0,0,.5);    /* month name strip on the photo */
  --ed-cover-scrim:  rgba(0,0,0,.45);   /* lower half of the cover */
  --ed-btn-line:     rgba(255,255,255,.5);   /* app-bar button outline */
  --ed-btn-line-2:   rgba(255,255,255,.6);
  --ed-btn-fill:     rgba(255,255,255,.2);   /* the filled variant (Order) */
}

/* ---------- surfaces ---------------------------------------------------- */
.uc-page--showcase{background:var(--bp-bg-page)}
.uc-page{background:var(--bp-bg-page)}
.uc-bar{background:var(--bg-surface)}

/* books' entry container is wider than its step-1 container */
.uc-page--showcase .uc-main{max-width:944px}
.uc-main{max-width:664px}                    /* 664 − 2×16 = 632 content, as books */

/* ---------- page header ------------------------------------------------- */
.page-title h1{font-size:var(--bp-text-h1);font-weight:800;letter-spacing:normal;
               line-height:1.15;color:var(--bp-ink-strong)}
.uc-page--showcase .page-title h1{font-size:var(--bp-text-h1-entry);font-weight:700}
.page-title .sub{font-size:var(--bp-text-sub);line-height:22px;max-width:none;
                 color:var(--bp-ink-soft)}
.uc-page--showcase .page-title .sub{color:var(--bp-ink-mid)}
.pill-teal-soft{font-size:var(--bp-text-small);font-weight:600;
                letter-spacing:var(--bp-ls-pill);background:var(--bp-pill-fill);
                color:var(--bp-teal);height:23px;padding:4px 10px}
.uc-section-head h2{font-size:var(--bp-text-h2);font-weight:700;letter-spacing:normal;
                    color:var(--bp-ink-strong)}

/* ---------- segment tabs (books: 204 × 52, r8, 2px border, 6 % fill) ---- */
.uc-segs{gap:var(--bp-seg-gap)}
.uc-seg{min-height:52px;border-width:var(--bp-opt-border);padding:0 6px;
        background:var(--bp-bg-card);font-size:var(--bp-text-body);font-weight:600;
        color:var(--bp-ink-soft)}

.uc-seg[aria-checked=true]{background:var(--bp-select-fill);border-color:var(--bp-teal);
                           color:var(--bp-teal);font-weight:600}

/* ---------- option cards (books: white at rest, 6 % tint selected) ------ */
.uc-opt{background:var(--bp-bg-card);border-width:var(--bp-opt-border);
        padding:var(--bp-opt-pad)}
.uc-opt[aria-checked=true]{background:var(--bp-select-fill);border-color:var(--bp-teal)}
.uc-opt-wrap{background:var(--bp-bg-card);border-width:var(--bp-opt-border)}
.uc-opt-wrap:has(.uc-opt[aria-checked=true]){background:var(--bp-select-fill);
        border-color:var(--bp-teal)}
/* inside a wrapper only the wrapper paints fill and frame — otherwise the row's own
   tint and border stack into the double outline */
.uc-opt-wrap .uc-opt,
.uc-opt-wrap .uc-opt[aria-checked=true]{background:none}
.uc-opt-title{font-size:var(--bp-text-body);font-weight:500;color:var(--bp-ink-strong)}
.uc-opt-title b{font-weight:600}          /* size card name — books 14/600 */
#papers .uc-opt-title b{font-weight:700} /* paper name — books 14/700 */
.uc-opt-sub{font-size:var(--bp-text-small);line-height:1.4;color:var(--bp-ink-soft)}
#papers .uc-opt-sub{font-size:var(--bp-text-tiny);line-height:16px}  /* books 10/400 lh16 */
.uc-opt-reason{font-size:var(--bp-text-small);line-height:1.4;color:var(--bp-ink-soft)}
.uc-opt-delta{font-size:var(--bp-text-body);font-weight:700;color:var(--bp-ink-strong)}
.uc-opt-delta--included{font-size:var(--bp-text-body);font-weight:500;
                        color:var(--bp-ink-soft)}
.uc-detail-row{font-size:var(--bp-text-tiny)}
.uc-detail-row dt{color:var(--bp-ink-soft)}
.uc-detail-row dd{color:var(--bp-ink-strong)}
.uc-detail-inner{padding:12px var(--bp-opt-pad) 14px}
.uc-note,.uc-seg-note{font-size:var(--bp-text-small);line-height:18px;
                      color:var(--bp-ink-soft)}

/* books' paper card is 92 px tall with a 56 px thumb; size card is 72 px */
.uc-opt-lead{gap:12px}

/* ---------- price placement (books: right-aligned, 16/700, one line) ---- */
/* The calendars build adds the struck UVP directly beneath, right-aligned on the
   same axis — books has no UVP to place. */
/* Books prices every card in --bp-ink-strong and reserves red for the sticky-bar total
   alone (measured: cards #4A4A4A, bar #C72B4C — nearest token --price-600, which is also
   the AA-safe step). */
.uc-price .uc-price-now{font-size:var(--bp-text-price);font-weight:700;
                        color:var(--bp-ink-strong)}
.uc-price .uc-price-was{font-size:var(--bp-text-tiny);color:var(--bp-ink-soft)}
.uc-price .uc-price-from{font-size:var(--bp-text-tiny);letter-spacing:normal;
                        text-transform:none;color:var(--bp-ink-soft);font-weight:700}
.uc-card .uc-price-from{font-size:var(--bp-text-small);color:var(--bp-ink-strong)}
.uc-bar .uc-price-now{font-size:var(--bp-text-bar);font-weight:800;color:var(--price-600)}
.uc-bar .uc-price-from{font-size:var(--bp-text-nano);text-transform:none;
                       letter-spacing:var(--bp-ls-from);font-weight:600}
.uc-footnote{font-size:var(--bp-text-tiny);line-height:1.5;color:var(--bp-ink-soft)}

/* ---------- entry card (books: 912 × 205, image 360 × 203 = 16 : 9) ----- */
/* books' card is 912 × 205 with a 16:9 image. The supplied art is 3:2, so the media
   column narrows to 308 px (308 / 1.5 ≈ 205) — the card keeps books' height and the
   artwork is never cropped. */
.uc-card{grid-template-columns:minmax(0,308px) minmax(0,1fr);
         border-width:var(--bp-opt-border);box-shadow:none;border-radius:var(--r-md)}
.uc-card:hover,.uc-card:focus-within{border-color:var(--bp-teal);
         box-shadow:var(--bp-card-shadow)}
/* Books' entry imagery is 16:9 (its assets are literally named 16-9-book-*.webp). The
   calendars art supplied for this view is 3:2, so the card follows the artwork — the one
   place the entry card deviates from books on purpose. */
.uc-card-media{min-height:0;aspect-ratio:3/2}
/* Entry tiles must never be cropped. The box is 3:2 and the artwork is 3:2, so this is a
   1:1 fit today; `contain` guarantees it stays a fit rather than a crop if any future tile
   arrives at a different ratio (it would letterbox on --bg-subtle instead). */
.uc-card-media img{object-fit:contain}
.uc-card-media{background:var(--bp-tile-bg)}   /* entry tiles only */
.uc-card-body{padding:18px 20px;gap:3px;justify-content:center}
.uc-card-title h3{font-size:var(--bp-text-body);font-weight:600;letter-spacing:normal;
                  color:var(--bp-ink-strong)}
.uc-card-desc{font-size:var(--bp-text-small);color:var(--bp-ink-mid)}
.uc-card-benefit{font-size:var(--bp-text-small);font-weight:600;color:var(--bp-teal)}
.uc-card-meta{font-size:var(--bp-text-tiny);color:var(--bp-ink-soft)}
.uc-card .uc-price-now{font-size:var(--bp-text-small);font-weight:700}
.uc-card-foot{margin-top:10px}
.pill-editorial{font-size:var(--bp-text-tiny);font-weight:600;height:16px;
                padding:2px 8px;border-radius:var(--r-md);
                background:var(--bp-ink-strong);color:var(--bg-surface)}
@media (max-width:639px){
  .uc-card{grid-template-columns:minmax(0,1fr)}
  .uc-card-media{aspect-ratio:3/2}
}

/* ---------- sticky bar -------------------------------------------------- */
.uc-crumb{font-size:var(--bp-text-tiny);font-weight:600;letter-spacing:var(--bp-ls-crumb);
          color:var(--bp-teal)}
.uc-badges{font-size:var(--bp-text-tiny);font-weight:500;gap:14px;color:var(--bp-ink-strong)}
.uc-badge svg{color:var(--bp-ink-soft)}

/* ---------- buttons (books: 14/700, r8, pad 10 × 20/28) ----------------- */
.btn{font-size:var(--bp-text-body);font-weight:700;letter-spacing:normal;padding:0 20px}
.uc-bar-row .btn{padding:0 28px}
/* books' brand teal, un-stepped */
.btn-primary{background:var(--bp-teal)}
.btn-primary:hover{background:var(--teal-600)}
.uc-opt-check{background:var(--bp-teal)}
.uc-back{color:var(--bp-teal)}
.uc-info-btn{color:var(--bp-teal)}
.uc-modal-tile{color:var(--bp-teal)}
.uc-modal-foot{color:var(--bp-teal)}
.uc-drop-ic{color:var(--bp-teal)}
.uc-escape strong,.uc-gallery-link,.uc-month-change{color:var(--bp-teal)}

/* ---------- start month ------------------------------------------------- */
.uc-month{background:var(--bp-bg-card)}
.uc-month-summary{padding:var(--bp-opt-pad)}

.uc-month-sum-text strong{font-size:var(--bp-text-body);font-weight:600;
                          color:var(--bp-ink-strong)}
.uc-month-sum-text span{font-size:var(--bp-text-small);color:var(--bp-ink-soft)}
.uc-month-change{font-size:var(--bp-text-small);font-weight:600}
.uc-month-inner{padding:0 var(--bp-opt-pad) var(--bp-opt-pad)}
.uc-mbtn{font-size:var(--bp-text-small);font-weight:500;color:var(--bp-ink-soft)}
.uc-mbtn[aria-checked=true]{color:var(--teal-700)}
.uc-month-cover{font-size:var(--bp-text-small);color:var(--bp-ink-soft)}

/* ---------- upload / progress ------------------------------------------ */
.uc-drop{background:var(--bp-bg-card)}
.uc-drop p{font-size:var(--bp-text-body);color:var(--bp-ink-soft)}
.uc-formats{font-size:var(--bp-text-small);color:var(--bp-ink-soft)}
.uc-formats span{color:var(--bp-ink-soft)}
.uc-escape strong{font-size:var(--bp-text-small);font-weight:600}
.uc-escape span{font-size:var(--bp-text-tiny);color:var(--bp-ink-soft)}
.uc-gallery-link{font-size:var(--bp-text-small);font-weight:600}
.uc-status{font-size:var(--bp-text-body);color:var(--bp-ink-strong)}
.uc-pct{font-size:var(--bp-text-small);color:var(--bp-ink-soft)}
.uc-didyouknow h3{font-size:var(--bp-text-small)}
.uc-didyouknow p{font-size:var(--bp-text-small);color:var(--bp-ink-soft)}
.uc-modal-head h2{font-size:var(--bp-text-price)}
.uc-modal-head h2{color:var(--bp-ink-strong)}
.uc-modal-row h3{font-size:var(--bp-text-body);color:var(--bp-ink-strong)}
.uc-modal-row p{font-size:var(--bp-text-small);color:var(--bp-ink-soft)}
.uc-modal-foot{font-size:var(--bp-text-small)}
.uc-back{font-size:var(--bp-text-body)}

/* ======================================================================
   THREE DELIBERATE DEPARTURES FROM BOOKS — each would fail a gate
   ======================================================================
   1 · Button height. Books ships 37 px (measured 84 × 37 and 162 × 37).
       v5_24 locks --btn-h at 44 px and brief 00 requires ≥ 44 px tap targets,
       so height stays 44 px while type, radius and horizontal padding match.
   2 · Micro type. Books uses 9 px (bar "from", ls 1px) and 10 px (breadcrumb,
       trust badges, card meta, paper description). Floored to 11 px
       (--text-xs, the v5_24 minimum) — German strings are long and 9 px is
       below any sane reading floor.
   3 · Two colours. Books' primary button is white on --teal-500 = 2.56:1 and
       its greys are #4A4A4A / #6F6F6F / #666, which fail AA on the 6 % teal
       fill and on the cream ground. The AA step-ups in patterns.css stand:
       --teal-600 buttons, --price-600 sale prices, --ink-3 small text.
       Geometry and placement are books-exact; only these hues differ.
   ====================================================================== */

/* ---------- product hub, books ink ------------------------------------- */
.uc-hub-section h2{color:var(--bp-ink-strong)}
.uc-hub-sub{color:var(--bp-ink-soft);font-size:var(--bp-text-small)}
.uc-hub-body h3{color:var(--bp-ink-strong);font-size:var(--bp-text-body)}
.uc-hub-body p{color:var(--bp-ink-soft);font-size:var(--bp-text-small)}
.uc-hub-card:hover,.uc-hub-card:focus-within,.uc-hub-card.is-current{border-color:var(--bp-teal)}
.uc-appbar{background:var(--bp-teal)}

/* ---------- new pre-editor screens, books ink ------------------------- */
.uc-up-head strong{color:var(--bp-ink-strong);font-size:var(--bp-text-body)}
.uc-up-head span{color:var(--bp-ink-soft);font-size:var(--bp-text-small)}
.uc-gal-head h1{color:var(--bp-ink-strong);font-size:var(--bp-text-price)}
.uc-gal-section h2{color:var(--bp-ink-strong);font-size:var(--bp-text-body)}
.uc-gal-section header span{color:var(--bp-ink-soft);font-size:var(--bp-text-small)}
.uc-gal-count{color:var(--bp-ink-strong);font-size:var(--bp-text-body)}
.uc-gal-selectall{color:var(--bp-teal);font-size:var(--bp-text-small)}
.uc-gal-tile[aria-checked=true]{border-color:var(--bp-teal)}
.uc-gal-tile[aria-checked=true] .uc-gal-check,
.uc-photo-check{background:var(--bp-teal)}
.chip.active{background:var(--bp-teal);border-color:var(--bp-teal)}

/* ---------- editor, books ink + the parity cream ---------------------- */
.uc-ed{background:var(--bp-bg-page)}
.uc-ed-app{background:var(--bp-teal)}
.uc-ed-bar{background:var(--bg-surface)}
.uc-ed-spread-head h2{color:var(--bp-ink-soft)}
.uc-ed-arrange span{color:var(--bp-ink-soft)}
.uc-ed-months{color:var(--bp-ink-soft)}
.uc-ed-title strong{color:var(--bp-ink-strong)}
.uc-ed-save{color:var(--bp-teal)}
.uc-ed-grid caption{color:var(--bp-ink-strong)}
.uc-ed-grid th{color:var(--bp-ink-soft)}
.uc-ed-grid td{color:var(--bp-ink-strong)}
.uc-ed-hol{color:var(--bp-ink-soft)}
.uc-ed-tab{color:var(--bp-ink-soft)}
.uc-ed-tab[aria-selected=true]{color:var(--teal-700)}
.uc-ed-tool{color:var(--bp-ink-soft)}
@media (min-width:901px){ #tool-pages{display:none} } /* Pages lives in the right panel */
.uc-ed-tool:hover,.uc-ed-tool[aria-expanded=true]{color:var(--bp-teal)}
.uc-ed-hint{color:var(--bp-ink-soft)}
.uc-ed-pageitem{color:var(--bp-ink-soft)}
.uc-ed-swatch b{color:var(--bp-ink-strong)}
.uc-ed-evmonth h4{color:var(--bp-ink-strong)}
.uc-ed-evmonth p{color:var(--bp-ink-soft)}

/* the same hover grammar, with books' teal and the entry card's shadow */
.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(--bp-teal);
  box-shadow:var(--bp-card-shadow);
}

/* Entry cards carry a single price, as books does — no struck UVP here (it stays on
   step 1, where the size choice is being priced). Larger, too: 16/700 not 12/700. */
.uc-card .uc-price-now{font-size:var(--bp-text-price)}

/* ======================================================================
   EDITOR PARITY — every value measured from the live editor at 1440 px
   (tools/measure_editor.py; raw dump in reference/editor-live/).
   ====================================================================== */

.uc-ed{background:var(--ed-shell)}
.uc-ed-app{min-height:var(--ed-appbar-h);background:var(--bp-teal)}
.uc-ed-app .uc-appbar-name{font-size:var(--bp-text-price);font-weight:700;letter-spacing:1px}
/* 34 px visual as measured, 44 px hit area via vertical padding on the flex row */
.uc-ed-app .uc-ed-appbtn{min-height:44px;height:44px;padding:0 16px;border-radius:22px;
        font-size:13px;font-weight:600;border:1px solid var(--ed-btn-line);background:none}
.uc-ed-app .uc-ed-appbtn.is-primary{background:var(--ed-btn-fill);
        border-color:var(--ed-btn-line-2)}

.uc-ed-bar{min-height:var(--ed-bar-h);height:var(--ed-bar-h);padding-block:0;
        padding-inline:0}
/* undo/redo sit level with the canvas, not jammed against the viewport edge —
   the live tool puts them at x=78, just inside the rail's width */
@media (min-width:1101px){ .uc-ed-bar{padding-left:calc(60px + 10px)} }
.uc-ed-iconbtn{width:44px;height:44px;position:relative;background:none;border-radius:0}
.uc-ed-iconbtn::before{content:'';position:absolute;inset:2px;border-radius:var(--r-md);
        background:var(--ed-btn-bg)}
.uc-ed-iconbtn .uc-ic,.uc-ed-iconbtn svg{position:relative}
.uc-ed-iconbtn:hover::before{background:var(--ink-6)}
.uc-ed-title{font-size:var(--bp-text-small)}
.uc-ed-title strong{font-size:var(--bp-text-body);font-weight:600;color:var(--bp-ink-strong)}
.uc-ed-months{font-size:var(--bp-text-tiny);color:var(--bp-ink-soft)}
.uc-ed-dirty{font-size:var(--bp-text-tiny)}
.uc-ed-save{font-size:var(--bp-text-tiny)}
.uc-ed-more{font-size:22px;font-weight:700;letter-spacing:2px;color:var(--bp-ink-strong)}

/* ---- canvas ---- */
.uc-ed-canvas{background:var(--bg-surface)}
.uc-ed-spread{max-width:var(--ed-page-w)}
.uc-ed-spread-head h2{font-size:var(--bp-text-tiny);font-weight:600;letter-spacing:1px;
        color:var(--ed-page-label)}
.uc-ed-arrange span{font-size:var(--bp-text-tiny);color:var(--ed-arr-label)}
.uc-ed-page{border-radius:0;box-shadow:var(--shadow-md)}
.uc-ed-photo{background:var(--ed-placeholder)}
.uc-ed-year{font-size:18cqw;font-weight:700;letter-spacing:4px;text-shadow:none;
        inset:auto 0 6% 0}
/* the lower half of the cover carries a 45 % scrim so the year always reads */
.uc-ed-cover-scrim{position:absolute;inset:50% 0 0 0;
        background:linear-gradient(transparent,var(--ed-cover-scrim) 35%)}
/* month name printed on the photo, in a 50 % band */
.uc-ed-band{position:absolute;inset:auto 0 0 0;background:var(--ed-band);
        padding:12px 18px;color:var(--bg-surface)}
.uc-ed-band strong{display:block;font-size:24px;font-weight:700;letter-spacing:2px}
.uc-ed-band span{display:block;font-size:16.8px;font-weight:400;opacity:.7}

.uc-ed-arr{width:44px;height:44px}
.uc-ed-arr::before{inset:4px;border:1px solid var(--ed-arr-off-bd);
        background:var(--ed-arr-off-bg)}
.uc-ed-arr[aria-checked=true]::before{background:var(--ed-arr-on-bg);border-color:var(--bp-teal)}
.uc-ed-arrange-set{gap:10px}

/* the floating pill on a page — distinct from .uc-ed-hint, the right panel's footer note */
.uc-ed-onboard{position:fixed;inset:0;z-index:30;background:var(--overlay-scrim-strong);
        cursor:pointer}
.uc-ed-pagehint{position:absolute;left:50%;transform:translate(-50%,-50%);margin:0;
        background:var(--bg-surface);border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
        padding:8px 12px;font-size:var(--bp-text-body);font-weight:600;
        color:var(--ed-hint-ink);white-space:nowrap;border:0;z-index:2}

/* ---- grid: the printed calendar, scaled with the page ---- */
/* live: photo 360 + grid 240 = the 600 page exactly, so the grid fills the remainder */
.uc-ed-grid{padding:2px 8px 0;height:40cqh;display:flex;flex-direction:column;
        justify-content:flex-start}
.uc-ed-grid table{border-spacing:0}
.uc-ed-grid caption{display:none}                 /* the month name is on the photo */
/* the printed calendar is true black, not the UI ink */
.uc-ed-grid th{font-size:1.21cqw;font-weight:600;color:var(--ed-print-ink);padding-bottom:2px}
.uc-ed-grid td{font-size:1.49cqw;font-weight:400;color:var(--ed-print-ink);
        border:1px solid var(--ed-grid-line);height:4.7cqw}
.uc-ed-grid td.is-weekend{color:var(--ed-weekend)}
/* the live grid does not tint holidays — the name stays in the cell's title/tooltip */
.uc-ed-grid td.is-holiday{background:none;font-weight:600}
.uc-ed-hol{display:none}

/* ---- right panel ---- */
.uc-ed-panel{width:var(--ed-panel-w)}
.uc-ed-tab{min-height:44px;font-size:var(--bp-text-small);border-radius:var(--r-xs)}
.uc-ed-tab[aria-selected=true]{background:var(--ed-arr-on-bg)}
.uc-ed-add{min-height:44px;border:1px solid var(--bp-teal);border-radius:var(--r-md);
        background:var(--ed-arr-on-bg);color:var(--teal-700);
        font-size:var(--bp-text-small);font-weight:700}

/* ---- bottom toolbar ---- */
.uc-ed-toolbar{min-height:var(--ed-toolbar-h);background:var(--bp-bg-page);
        border-top:1px solid var(--line);justify-content:center;gap:88px;padding-block:8px}
.uc-ed-tool{flex:0 0 auto;min-height:60px;font-size:var(--bp-text-tiny);gap:5px}
.uc-ed-tool svg{width:32px;height:32px}

/* ---- floating action button ---- */
.uc-ed-fab{position:fixed;right:var(--space-5);bottom:calc(var(--ed-toolbar-h) + 16px);
        width:44px;height:44px;border:0;border-radius:var(--r-pill);cursor:pointer;
        background:var(--bp-teal);color:var(--bg-surface);box-shadow:var(--shadow-md);
        display:grid;place-items:center;z-index:15}
.uc-ed-fab svg{width:24px;height:24px}
.uc-ed-fab svg path{fill:currentColor}
.uc-ed-fab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* icon slots inherit currentColor from their control */
.uc-ed-svg{display:inline-flex;flex-shrink:0}
.uc-ed-svg svg{display:block;width:100%;height:100%}
.uc-ed-app .uc-ed-svg{width:15px;height:15px}
.uc-ed-app .uc-ed-svg svg path,.uc-ed-app .uc-ed-svg svg *{fill:currentColor}
.uc-ed-iconbtn .uc-ed-svg{width:18px;height:18px}
.uc-ed-iconbtn .uc-ed-svg svg path{fill:currentColor}
.uc-ed-railbtn .uc-ed-svg{width:20px;height:20px}
.uc-ed-railbtn .uc-ed-svg svg path,.uc-ed-railbtn .uc-ed-svg svg *{fill:currentColor}
.uc-ed-title .uc-ed-svg svg path{fill:var(--bp-ink-soft)}
.uc-ed-more{font-size:22px;line-height:1}
.uc-ed-more::before{display:none}

/* per-page More menu — the live editor's Add Photo / Add Text / Clear Page */
.uc-ed-arrange{position:relative;align-items:flex-end;gap:var(--space-4)}
/* the ring is an absolutely-positioned ::before, so unpositioned text would paint under
   it — the glyph needs its own positioned box */
.uc-ed-morebtn{font-size:16px;letter-spacing:1px;color:var(--bp-ink-soft)}
.uc-ed-morebtn > span{position:relative;line-height:1}
.uc-ed-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;
        background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
        padding:var(--space-2) 0;text-align:left}
.uc-ed-menu p{margin:0;padding:6px var(--space-4) 8px;font-size:var(--bp-text-body);
        font-weight:700;color:var(--bp-ink-strong)}
.uc-ed-menu hr{border:0;border-top:1px solid var(--line-2);margin:var(--space-2) 0}
.uc-ed-menuitem{display:flex;align-items:center;gap:var(--space-3);width:100%;
        min-height:44px;padding:0 var(--space-4);border:0;background:none;cursor:pointer;
        font-size:var(--bp-text-body);color:var(--bp-ink-strong);text-align:left}
.uc-ed-menuitem:hover{background:var(--bg-subtle)}
.uc-ed-menuitem:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-menuitem.is-danger{color:var(--price-600)}
.uc-ed-menuitem.is-danger:hover{background:var(--danger-50)}

/* ---- workspace rail: 60 px of icons that expands over the canvas -------
   The live editor mounts this as a hidden drawer and puts the same items in the ···
   overflow. On desktop there is room to expose them, so the rail is always visible and
   widens on hover/focus instead of pushing the canvas around. Below 1100 px it folds away
   and the ··· menu is the only route, as in the live tool. */
.uc-ed-rail{position:relative;width:60px;flex-shrink:0;background:var(--bg-surface);
        border-right:1px solid var(--line);z-index:12}
.uc-ed-railinner{position:absolute;inset:0 auto 0 0;width:60px;background:var(--bg-surface);
        border-right:1px solid var(--line);display:flex;flex-direction:column;
        padding:var(--space-3) 0;gap:2px;overflow:hidden;
        transition:width var(--dur-base) var(--ease-out),box-shadow var(--dur-fast)}
.uc-ed-rail:hover:not(.is-snoozed) .uc-ed-railinner,
.uc-ed-rail:focus-within .uc-ed-railinner,
.uc-ed-rail.is-pinned .uc-ed-railinner{width:216px;box-shadow:var(--shadow-lg)}
.uc-ed-rail.is-pinned .uc-ed-railinner{box-shadow:none}
/* a hover peek floats over the canvas; a pinned menu is persistent, so it takes its own
   space and the canvas moves aside instead of hiding behind it */
@media (min-width:1101px){
  .uc-ed-body:has(.uc-ed-rail.is-pinned) .uc-ed-canvas{padding-left:calc(216px - 60px)}
}
/* the toggle is the affordance: a rail that only appears on hover cannot be found */
.uc-ed-railtoggle{color:var(--bp-ink-soft);border-bottom:1px solid var(--line-2);
        margin-bottom:var(--space-2);padding-bottom:0}
.uc-ed-railtoggle .uc-ic{transition:transform var(--dur-base) var(--ease-out)}
.uc-ed-rail.is-pinned .uc-ed-railtoggle .uc-ic{transform:rotate(180deg)}
.uc-ed-railbtn{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:48px;
        padding:0 18px;border:0;background:none;cursor:pointer;text-align:left;
        font-size:var(--bp-text-body);font-weight:500;color:var(--ed-rail-item);
        white-space:nowrap}
.uc-ed-railbtn .uc-ed-svg{width:22px;height:22px;flex-shrink:0}
.uc-ed-railbtn .uc-ed-svg svg path,.uc-ed-railbtn .uc-ed-svg svg *{fill:currentColor}
.uc-ed-railbtn span:last-child{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.uc-ed-rail:hover:not(.is-snoozed) .uc-ed-railbtn span:last-child,
.uc-ed-rail:focus-within .uc-ed-railbtn span:last-child,
.uc-ed-rail.is-pinned .uc-ed-railbtn span:last-child{opacity:1}
.uc-ed-railbtn:hover{background:var(--bg-subtle);color:var(--bp-teal)}
.uc-ed-railbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-railsep{border:0;border-top:1px solid var(--line-2);margin:var(--space-2) 12px}
.uc-ed-railfoot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:var(--space-2)}
.uc-ed-railnote{margin:0;padding:var(--space-2) 18px 0;font-size:var(--bp-text-tiny);
        line-height:1.45;color:var(--bp-ink-soft);opacity:0;white-space:normal;
        transition:opacity var(--dur-fast)}
.uc-ed-rail:hover:not(.is-snoozed) .uc-ed-railnote,
.uc-ed-rail:focus-within .uc-ed-railnote,
.uc-ed-rail.is-pinned .uc-ed-railnote{opacity:1}
@media (max-width:1100px){ .uc-ed-rail{display:none} }

/* ---- language switcher: one control, not seven chips ------------------- */
.uc-ed-lang{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:48px;
        padding:0 18px;border:0;background:none;cursor:pointer;text-align:left;
        font-size:var(--bp-text-body);font-weight:500;color:var(--ed-rail-item);
        white-space:nowrap}
.uc-ed-lang:hover{background:var(--bg-subtle);color:var(--bp-teal)}
.uc-ed-lang:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-lang .uc-ed-code{flex-shrink:0;min-width:24px;font-weight:700;font-size:11px;
        font-variant-numeric:tabular-nums;text-align:center;background:var(--teal-50);
        color:var(--teal-700);border-radius:4px;padding:3px 4px;line-height:1}
.uc-ed-lang .uc-ed-langname{opacity:0;transition:opacity var(--dur-fast)}
.uc-ed-rail:hover:not(.is-snoozed) .uc-ed-langname,
.uc-ed-rail:focus-within .uc-ed-langname,
.uc-ed-rail.is-pinned .uc-ed-langname{opacity:1}
.uc-ed-langpop{position:fixed;z-index:40;min-width:214px;
        background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
        padding:var(--space-2) 0}
.uc-ed-langpop p{margin:0;padding:4px var(--space-4) 8px;font-size:var(--bp-text-tiny);
        font-weight:600;letter-spacing:.8px;color:var(--ed-rail-label)}
.uc-ed-langitem{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:44px;
        padding:0 var(--space-4);border:0;background:none;cursor:pointer;text-align:left;
        font-size:var(--bp-text-body);color:var(--bp-ink-strong)}
.uc-ed-langitem:hover{background:var(--bg-subtle)}
.uc-ed-langitem:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.uc-ed-langitem b{min-width:22px;font-weight:700;color:var(--bp-ink-soft)}
.uc-ed-langitem[aria-checked=true]{background:var(--ed-arr-on-bg)}
.uc-ed-langitem[aria-checked=true] b{color:var(--teal-700)}
.uc-ed-langitem .uc-ic{margin-left:auto;color:var(--bp-teal)}

/* ======================================================================
   EDITOR — MOBILE, measured from the live tool at 390 px
   Live splits the chrome into three rows: teal app bar with a single share
   icon; a white title row with ···; then undo/redo · Save Project · N months
   with a filled Order button. The toolbar carries six items and scrolls.
   ====================================================================== */

.uc-ed-bar--title{display:none}
.uc-ed-order-sm{display:none}

@media (max-width:640px){
  /* app bar: brand on one line, share as an icon only */
  .uc-ed-app{gap:var(--space-2);padding-inline:var(--space-3)}
  .uc-ed-app .uc-appbar-name{font-size:var(--bp-text-body);white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
  .uc-ed-app .uc-ed-appbtn{width:44px;height:44px;min-height:44px;padding:0;
        border-radius:var(--r-pill);flex-shrink:0}
  .uc-ed-app .uc-ed-btnlabel{position:absolute;width:1px;height:1px;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap}
  .uc-ed-hide-sm{display:none!important}

  /* title on its own row, then the action row */
  .uc-ed-bar--title{display:flex;align-items:center;justify-content:space-between;
        gap:var(--space-2);padding-inline:var(--space-3);height:auto;min-height:40px;
        border-bottom:1px solid var(--line-2)}
  .uc-ed-title--sm{flex:1 1 auto;justify-content:center;margin:0}
  .uc-ed-bar{height:auto;min-height:48px;padding-inline:var(--space-3);gap:var(--space-2)}
  .uc-ed-title{flex-wrap:nowrap;gap:6px;font-size:var(--bp-text-small)}
  .uc-ed-title .uc-ed-svg,.uc-ed-dirty{display:none}
  .uc-ed-bar:not(.uc-ed-bar--title) .uc-ed-title strong{display:none}  /* the title row owns it */
  .uc-ed-bar:not(.uc-ed-bar--title) .uc-ed-rename{display:none} /* pencil lives in the title row */
  .uc-ed-save{white-space:nowrap}
  .uc-ed-title--sm .uc-ed-svg{display:inline-flex}
  .uc-ed-title--sm strong{font-size:var(--bp-text-body)}
  .uc-ed-order-sm{display:inline-flex;min-width:0;height:44px;min-height:44px;
        padding:0 18px;flex-shrink:0;text-decoration:none}
  .uc-ed-months::before{content:'· '}

  /* canvas + page header: one row that fits, scrolling if it must */
  .uc-ed-canvas{padding:var(--space-3) var(--space-3) calc(var(--ed-toolbar-h) + 24px)}
  .uc-ed-spread{max-width:none;margin-bottom:var(--space-5)}
  .uc-ed-spread-head{flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
  .uc-ed-arrange{margin-left:auto;overflow-x:auto;max-width:100%;
        scrollbar-width:none;flex-wrap:nowrap}
  .uc-ed-arrange::-webkit-scrollbar{display:none}
  .uc-ed-arr{width:44px;height:44px}    /* 40 px ring, 44 px target */
  .uc-ed-arr::before{inset:5px}
  .uc-ed-arrange-set{gap:6px}

  /* six tools, flex-fitted so every tool is visible — no hidden Settings, no swipe.
     At 320 px each tool gets ~53 px; 10 px labels and 22 px glyphs hold that. */
  .uc-ed-toolbar{justify-content:space-between;gap:0;overflow:visible;
        height:64px;min-height:64px;padding-block:0}
  .uc-ed-tool{flex:1 1 0;min-width:0;min-height:64px;height:64px;font-size:10px;
        padding-inline:2px;padding-block:0;gap:4px}
  .uc-ed-tool span:last-child{white-space:nowrap}
  .uc-ed-tool svg{width:22px;height:22px}
  .uc-ed-fab{bottom:calc(64px + 12px);right:var(--space-3)}
  .uc-ed-panel{display:none}
}

/* the ··· overflow menu, wide enough for the footer note */
.uc-ed-menu.is-wide{min-width:250px;left:auto;right:0}
.uc-ed-menunote{margin:0;padding:var(--space-2) var(--space-4) 4px;
        font-size:var(--bp-text-tiny);line-height:1.45;color:var(--bp-ink-soft);
        white-space:normal;font-weight:400}
.uc-ed-more span{position:relative;line-height:1}

/* ---- arrangement icons: one crisp 16×16 SVG per option ------------------
   Live anatomy: the "Arrangement" / "More" captions sit ABOVE their icon sets;
   each glyph is a rounded outline frame (1.2, --ed-arr-frame) with filled blocks
   (--ed-arr-block); the checked option turns frame + blocks teal. */
.uc-ed-arrgroup{display:flex;flex-direction:column;align-items:center;gap:2px}
.uc-ed-arrlabel{font-size:var(--bp-text-tiny);color:var(--ed-arr-label);line-height:1}
.uc-ed-arrframe{position:relative;display:block;width:16px;height:16px}
.uc-ed-arrframe svg{display:block}
.uc-ed-arrframe .arr-frame{stroke:var(--ed-arr-frame)}
.uc-ed-arrframe .arr-block{fill:var(--ed-arr-block)}
.uc-ed-arr[aria-checked=true] .arr-frame{stroke:var(--bp-teal)}
.uc-ed-arr[aria-checked=true] .arr-block{fill:var(--bp-teal)}
.uc-ed-dots{display:flex;gap:3px}
.uc-ed-dots i{display:block;width:4px;height:4px;border-radius:2px;background:var(--ed-dot)}