/* Design gallery: /designs and its detail pages. Grid, carousel, and layout only. Buttons
   (.btn-primary, .btn-ghost, .btn-pulse), .card, .badge, .note, .field, and .hl come from site.css,
   as do the color tokens. */
.designs-page h1{font-size:2rem;letter-spacing:-.02em;margin:0 0 8px}
.designs-page h2{font-size:1.5rem;margin:0 0 6px}
.designs-page .lead-sm{color:var(--muted);margin:0 0 16px;font-size:1.1rem}
.designs-page .muted{color:var(--muted)}
.designs-page .crumbs{color:var(--muted);font-size:.95rem;margin:16px 0 4px}
.designs-page .label{font-weight:600;display:block;margin-bottom:6px}
.designs-page .upper{text-transform:uppercase}
.designs-head{padding:32px 0 8px}
.designs-cta{margin:0 0 8px}
.designs-cta .btn{font-size:1.05rem}
.section-lead{color:var(--muted);max-width:760px;margin:0 0 18px}
.designs-section{padding:24px 0 8px;scroll-margin-top:64px}
.designs-foot{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--border)}

/* Sticky in-page nav */
.designs-nav{position:sticky;top:0;z-index:5;display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:8px -16px 0;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.designs-nav a{padding:8px 14px;border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;min-height:var(--tap);display:inline-flex;align-items:center}
.designs-nav a:hover,.designs-nav a:focus-visible{background:var(--surface)}
.designs-nav a.is-on{background:var(--accent);color:var(--accent-text)}
.designs-nav .count{opacity:.7;font-size:.85rem;margin-left:4px;font-weight:500}
.designs-nav .nav-start{margin-left:auto;color:var(--accent)}
.mode-toggle{font:inherit;font-weight:600;min-height:var(--tap);padding:8px 14px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--surface);color:var(--text-2);cursor:pointer}
.mode-toggle:hover{border-color:var(--accent);color:var(--text)}

/* The three ways in: A a template, B a background, or C your own card. Three equal cards side by side,
   each with a letter badge, so they read as a choice and never as steps 1, 2, 3 (owner, 2026-10-31). The
   cards stretch to one height; card C's button sits at its foot. */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin:20px 0 8px;align-items:stretch}
.paths-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.paths-title{grid-column:1/-1;margin:0 0 2px}
.path{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);line-height:1.45}
.path-letter{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-fill);background-image:var(--gradient-accent);color:var(--accent-text);font-weight:700;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono)}
.path-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:100%}
.path-name{display:block;font-size:1.05rem;margin:4px 0 6px}
.path-body p{margin:0}
.path-cta{margin:auto 0 0;padding-top:12px}
.paths-note{grid-column:1/-1;color:var(--muted);margin:0}

/* Pick buttons: each one is its own tiny form so the page works without JavaScript. The buttons on the
   tiles are .btn-ghost (449 tiles on one page; the primary is kept for the carousel, the zoom dialog, and
   the two page CTAs). .btn-sm tightens the padding and type only; the 44 px minimum comes from .btn. */
.pick-form{margin:0;display:inline-block}
.pick-form .btn-sm,.designs-page .btn-sm{padding:7px 12px;font-size:.9rem}
.tpl-actions,.bg-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Flick through: one design large, the round previous and next buttons beside it (the default view;
   hidden until designs.js shows it). The buttons live inside the figure next to the picture, so on a
   phone they can sit over the picture's own edges instead of falling below the caption. */
.flick{padding-top:16px}
.flick-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.flick-sets{display:flex;gap:8px}
.flick-stage{margin:8px 0 0}
.flick-frame{margin:0 auto;width:100%;max-width:1032px;touch-action:pan-y;user-select:none}
.flick-pic{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.flick-btn{width:56px;height:56px;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--surface);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.flick-btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.flick-btn:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
/* The one place the zoom dialog opens from: the picture is a link with the zoom cursor and a visible hint. */
.flick-zoom{position:relative;display:block;max-width:900px;margin:0 auto;cursor:zoom-in;border-radius:var(--radius)}
.flick-zoom:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.flick-hint{position:absolute;right:10px;bottom:10px;padding:5px 11px;border-radius:999px;background:var(--surface);color:var(--text-2);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-size:.85rem;font-weight:600;pointer-events:none;opacity:.92}
.flick-zoom:hover .flick-hint,.flick-zoom:focus-visible .flick-hint{border-color:var(--accent);color:var(--text);opacity:1}
.flick-frame img{display:block;width:100%;max-width:1056px;height:auto;aspect-ratio:11/7;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);transition:opacity .15s ease}
.flick.is-loading .flick-frame img{opacity:.55}
.flick-caption{display:flex;justify-content:space-between;gap:12px;margin:10px 2px 0;align-items:baseline}
.flick-title{font-weight:700;font-size:1.1rem}
.flick-count{color:var(--muted);font-size:.9rem}
.flick-blurb{max-width:760px;margin:8px auto 0;text-align:center;min-height:1.4em;overflow-wrap:anywhere}
.flick-tools{max-width:760px;margin:16px auto 0}
.flick-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px}
.panel-choices{flex-direction:column;align-items:flex-start;gap:4px}
.designs-page input[type=range][disabled]{opacity:.45;cursor:not-allowed}
.flick-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}
.js .flick[hidden],.js .grid-section[hidden]{display:none}

/* Templates: large previews, one per card. */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.designs-page .tpl{display:grid;gap:8px;align-content:start;padding:12px}
.tpl-link{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--border);background:#fff}
.tpl-link img{display:block;width:100%;height:auto;aspect-ratio:11/7;object-fit:cover}
.tpl-link:hover img,.tpl-link:focus-visible img{opacity:.92}
.tpl-title{font-size:1.1rem;margin:4px 0 0}
.tpl-title a{color:var(--text);text-decoration:none}
.tpl-title a:hover{text-decoration:underline}
.tpl-blurb{color:var(--muted);font-size:.95rem;line-height:1.45;margin:0 0 4px}

/* Backgrounds: a sticky category list on the left (wide screens) or pills (narrow), and the cards
   grouped by category with one heading each, so no tile needs a badge. Hover or focus lifts a tile.
   The pills are ONE row that scrolls sideways (23 categories wrapped to 7 rows on a desktop and about
   20 on a phone); the thin scrollbar and the cut-off last pill say there is more. */
.pills{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin:0 0 12px;padding:4px 2px 8px;scrollbar-width:thin}
.pill{flex:none;font:inherit;font-size:.9rem;min-height:var(--tap);padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap}
.pill:hover{border-color:var(--accent)}
.pill.is-on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.pill[disabled]{opacity:.5;cursor:not-allowed}
.pill .count{opacity:.7;font-size:.8rem;margin-left:2px}
.bg-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.bg-main{min-width:0}
.cat-nav{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px}
.cat-nav ul{list-style:none;margin:0;padding:0}
.cat-link{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:var(--tap);padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:inherit;font-size:.95rem;text-align:left;cursor:pointer}
.cat-link:hover{background:var(--accent-soft)}
.cat-link.is-on{background:var(--accent);color:var(--accent-text)}
.cat-link .count{font-family:var(--font-mono);font-size:.8rem;opacity:.75}
.bg-layout .pills{display:none}
.bg-group{margin:0 0 20px}
.bg-group-title{font-size:1.05rem;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:baseline}
.bg-group-title .count{color:var(--muted);font-size:.85rem}
.bg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:4px 0}
.designs-page .bg{position:relative;margin:0;padding:0;overflow:visible;transition:transform .15s ease,box-shadow .15s ease}
/* A tile is a --well box in the card's own ratio until its picture arrives, with the title printed in it
   (the picture, once loaded, paints over the title). designs.js marks a card .is-loading while the picture
   is on its way and hides the buttons until then, so a blank tile never carries a live button. The picture
   is the edge-cached tile first; a personalized preview (data-src) is swapped in when it has loaded. */
.bg-link{position:relative;display:block;aspect-ratio:11/7;overflow:hidden;border-radius:8px 8px 0 0;background:var(--well)}
.bg-link::before{content:attr(data-title);position:absolute;inset:0;display:grid;place-items:center;padding:12px;color:var(--muted);font-size:.9rem;font-weight:600;line-height:1.3;text-align:center}
.bg-link img{position:relative;display:block;width:100%;height:100%;object-fit:cover}
.tpl-link{background:var(--well)}
.js .bg.is-loading .bg-foot,.js .tpl.is-loading .tpl-actions{visibility:hidden}
.bg-foot{justify-content:center;padding:8px}
.designs-page .bg:hover,.designs-page .bg:focus-within{transform:scale(1.06);z-index:4;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.js .bg-group[hidden]{display:none}
.bg-empty{color:var(--muted);padding:16px;text-align:center}
.bg-none{color:var(--muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center}

/* Make it mine */
.me-card{padding:20px}
.me-card h2{margin-top:0}
.me-form .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 16px;margin-bottom:14px}
.me-form .field input[type=text]{max-width:none;width:100%}
.me-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.me-section .help,.flick .help{color:var(--muted);font-size:.9rem;margin:6px 0 0}

/* Range slider: site.css styles every input as a 44 px text box; a slider needs its own look. */
.designs-page input[type=range]{appearance:auto;-webkit-appearance:auto;width:100%;max-width:360px;height:var(--tap);padding:0;margin:0;border:0;background:transparent;box-shadow:none;accent-color:var(--accent);cursor:pointer}
.dim-field output{font-family:var(--font-mono);color:var(--muted);margin-left:6px}
.choices{display:flex;gap:10px 18px;flex-wrap:wrap}
.choice{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:var(--tap);font-weight:500}
.choice input{width:20px;height:20px;margin:0}

/* Detail pages. The card picture is 1056 px (192 DPI) and is never stretched past its own pixels. */
.designs-detail{max-width:900px;margin:0 auto}
.detail-preview{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;margin:0 0 12px}
.detail-preview img{display:block;width:100%;max-width:1056px;height:auto;margin:0 auto}

/* Zoom dialog: the large picture, the design's name, "Use this one", and a clear X. No previous or next
   inside it: close it, then move on. Shared with the design step (design.css carries the same rules).
   designs.js puts .zoom-open on <html> while it is open so the page behind does not scroll. */
html.zoom-open{overflow:hidden}
.zoom-dialog{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);padding:0;width:min(94vw,1120px);max-width:none;box-shadow:var(--shadow-lg)}
.zoom-dialog::backdrop{background:rgba(1,4,9,.65)}
.zoom-body{position:relative;margin:0;padding:20px 20px 16px}
.zoom-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--surface);color:var(--text);font:inherit;font-size:1.6rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.zoom-close:hover,.zoom-close:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.zoom-title{margin:0 44px 10px 0;font-size:1.3rem}
.zoom-frame{display:flex;align-items:center;justify-content:center;background:var(--well);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:120px}
.zoom-frame img{display:block;width:100%;max-width:1056px;height:auto;aspect-ratio:11/7;background:#fff;transition:opacity .15s ease}
.zoom-dialog.is-loading .zoom-frame img{opacity:.55}
.zoom-note{margin:10px 0 0;font-size:.95rem}
.zoom-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.detail-note{color:var(--muted);margin:12px 0 16px;max-width:760px;overflow-wrap:anywhere}
.detail-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0 0}

@media (prefers-reduced-motion:reduce){
  .designs-page .bg{transition:none}
  .designs-page .bg:hover,.designs-page .bg:focus-within{transform:scale(1.03)}
}
@media (max-width:900px){
  .bg-layout{grid-template-columns:1fr}
  .cat-nav{display:none}
  .bg-layout .pills{display:flex}
  .flick-panel{grid-template-columns:1fr}
}
@media (max-width:720px){
  .paths{grid-template-columns:1fr}
}
@media (max-width:640px){
  .zoom-body{padding:14px 12px 12px}
  .tpl-grid{grid-template-columns:1fr}
  .bg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .designs-page .bg:hover,.designs-page .bg:focus-within{transform:scale(1.04)}
  /* on a phone the in-page nav wraps to three rows; sticky, that would cover a third of the screen */
  .designs-nav{position:static;margin-top:4px}
  .designs-nav .nav-start{margin-left:0}
  /* 390 px: the picture keeps the full width and the two buttons sit over its left and right edges,
     centered on the picture (never below it). Same 44 px targets. */
  .flick-pic{display:block;position:relative}
  .flick-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;font-size:1.25rem;background:var(--surface);opacity:.94}
  .flick-btn:hover{transform:translateY(-50%)}
  .flick-prev{left:6px}
  .flick-next{right:6px}
  .flick-hint{right:6px;bottom:6px;font-size:.8rem;padding:4px 9px}
}

.bg-group-note{margin:-4px 0 12px;max-width:70ch;font-size:.92rem;line-height:1.45}