/* Creator Hub, the Glass look (2026-10-11), on every page. It sits on top of
   app.css: the tokens are redefined under body.glass, so the older parts
   (cards, tables, forms, pills) take the look without being rewritten.

   The idea: the brand's own footage is the material. One of its stills,
   blurred once and fixed behind the page, gives the colour; panels are
   translucent over it. Real backdrop blur is kept to the sticky dock and
   its menu, never a scrolling panel, so the page stays fast. */

/* Bricolage Grotesque, stored with the app (static/fonts/README.txt has the licence). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.glass {
  --bg: #ecebe8; --surface: rgba(255, 255, 255, 0.58); --surface-2: rgba(255, 255, 255, 0.5);
  --field: rgba(255, 255, 255, 0.72); --border: rgba(24, 22, 30, 0.09);
  --border-strong: rgba(24, 22, 30, 0.17); --line: rgba(24, 22, 30, 0.08);
  --row-hover: rgba(255, 255, 255, 0.4);
  --ink: #17181a; --ink-2: #3a3c43; --ink-muted: #4b4d55;
  --inverse: #17181a; --on-inverse: #ffffff;
  --accent: #7c4f0c; --accent-hover: #5c3a08; --accent-fill: #17181a; --accent-fill-hover: #303136;
  --on-accent: #ffffff; --accent-soft: rgba(255, 255, 255, 0.5); --accent-border: rgba(24, 22, 30, 0.09);
  --accent-ink: #17181a; --disabled: rgba(23, 24, 26, 0.32);
  --radius: 22px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(40, 30, 20, 0.04), 0 26px 56px -26px rgba(70, 50, 30, 0.34);
  --g-solid: rgba(255, 255, 255, 0.82); --g-edge: rgba(255, 255, 255, 0.75);
  --g-signal: #9c6614; --g-photo: 0.6;
  --g-display: "Bricolage Grotesque", -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  --g-ease: cubic-bezier(0.32, 0.72, 0, 1);
  font-size: 15px; -webkit-font-smoothing: antialiased;
}
/* Each colour once, as light-dark(light, dark); color-scheme picks the side.
   The plain light line above stays for browsers without light-dark() (before
   May 2024). It needs @supports: a custom property takes any text, so an
   unsupported light-dark() would still win and leave the token empty. */
@supports (color: light-dark(#000, #fff)) {
  body.glass {
    --bg: light-dark(#ecebe8, #0f1012); --surface: light-dark(rgba(255, 255, 255, 0.58), rgba(32, 33, 38, 0.6));
    --surface-2: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.07));
    --field: light-dark(rgba(255, 255, 255, 0.72), rgba(0, 0, 0, 0.28));
    --border: light-dark(rgba(24, 22, 30, 0.09), rgba(255, 255, 255, 0.08));
    --border-strong: light-dark(rgba(24, 22, 30, 0.17), rgba(255, 255, 255, 0.17));
    --line: light-dark(rgba(24, 22, 30, 0.08), rgba(255, 255, 255, 0.07));
    --row-hover: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05));
    --ink: light-dark(#17181a, #f3f3f5); --ink-2: light-dark(#3a3c43, #cfd0d6); --ink-muted: light-dark(#4b4d55, #b3b5be);
    --inverse: light-dark(#17181a, #f3f3f5); --on-inverse: light-dark(#ffffff, #131417);
    --accent: light-dark(#7c4f0c, #e4b668); --accent-hover: light-dark(#5c3a08, #f1cf96);
    --accent-fill: light-dark(#17181a, #f3f3f5); --accent-fill-hover: light-dark(#303136, #ffffff);
    --on-accent: light-dark(#ffffff, #131417); --accent-soft: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06));
    --accent-border: light-dark(rgba(24, 22, 30, 0.09), rgba(255, 255, 255, 0.08));
    --accent-ink: light-dark(#17181a, #f3f3f5); --disabled: light-dark(rgba(23, 24, 26, 0.32), rgba(243, 243, 245, 0.28));
    /* Dark has no middle layer: a transparent one draws nothing. */
    --shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08)),
              0 1px 1px light-dark(rgba(40, 30, 20, 0.04), transparent),
              0 26px 56px -26px light-dark(rgba(70, 50, 30, 0.34), rgba(0, 0, 0, 0.8));
    --g-solid: light-dark(rgba(255, 255, 255, 0.82), rgba(48, 49, 56, 0.86));
    --g-edge: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
    --g-signal: light-dark(#9c6614, #e4b668);
  }
}
/* The theme rules set only the scheme. --g-photo is a number, so light-dark()
   cannot carry it: it is the one token still written per theme. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.glass { --g-photo: 0.42; }
}
:root[data-theme="dark"] body.glass { --g-photo: 0.42; }

/* ---- ground: the still, blurred once, and a little grain ---------------------- */

.g-ambient { position: fixed; z-index: -2; inset: -12vmax; width: calc(100% + 24vmax); height: calc(100% + 24vmax);
             max-width: none; object-fit: cover; filter: blur(80px) saturate(1.5); opacity: var(--g-photo);
             pointer-events: none; }
.g-grain { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.glass { isolation: isolate; }

/* ---- the dock ------------------------------------------------------------------ */

.g-bar { position: sticky; top: 10px; z-index: 20; display: flex; align-items: center; justify-content: space-between;
         gap: 10px; max-width: 1080px; margin: 0 auto; padding: 10px 2rem 0; }
.g-dock, .g-more > summary, .g-menu {
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); }
.g-dock { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; min-width: 0;
          overflow-x: auto; scrollbar-width: none; view-transition-name: g-dock; }
.g-dock::-webkit-scrollbar { display: none; }
.g-mark { flex: none; display: block; margin: 0 6px 0 4px; }
.g-mark img { display: block; width: 28px; height: 28px; border-radius: 9px; }
.g-dock > a.g-name { color: var(--ink); font-family: var(--g-display); font-weight: 650; letter-spacing: -0.02em; padding-left: 4px; }
.g-dock > a:not(.g-mark), .g-menu > a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; white-space: nowrap;
          transition: color 0.25s var(--g-ease), background 0.25s var(--g-ease); }
.g-dock > a:not(.g-mark) { padding: 7px 13px; border-radius: 999px; }
.g-dock > a:not(.g-mark):hover, .g-menu > a:hover { color: var(--ink); }
.g-dock > a.active { color: var(--ink); font-weight: 600; background: var(--g-solid);
          box-shadow: inset 0 1px 0 var(--g-edge), 0 1px 3px rgba(0, 0, 0, 0.12); }
.g-more { position: relative; flex: none; }
.g-more > summary { list-style: none; padding: 12px 16px; border-radius: 999px; font-size: 0.9rem; color: var(--ink);
          line-height: 1; }
.g-more > summary::-webkit-details-marker { display: none; }
.g-more > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
          border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
          transition: transform 0.3s var(--g-ease); }
.g-more[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.g-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 232px; padding: 8px; border-radius: 22px;
          display: flex; flex-direction: column; background: var(--g-solid); animation: g-drop 0.3s var(--g-ease); }
.g-menu > a { padding: 8px 12px; border-radius: 12px; }
.g-menu > a:hover { background: var(--surface-2); }
.g-menu > a.active { color: var(--ink); font-weight: 600; }
body.glass .g-menu .theme { margin: 8px 4px 4px; background: var(--surface-2); border-radius: 12px; }
body.glass .g-menu .theme button { color: var(--ink-2); border-radius: 10px; }
body.glass .g-menu .theme button:hover:not(:disabled) { background: transparent; color: var(--ink); }
body.glass .g-menu .theme button[aria-pressed="true"] { background: var(--g-solid); color: var(--ink);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.g-out { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 4px 12px;
         font-size: 0.85rem; color: var(--ink-muted); border-top: 1px solid var(--line); margin-top: 6px; }
/* ---- the left menu (wide screens) ------------------------------------------------ */

.g-rail { display: none; }
@media (min-width: 861px) {
  body.glass { --g-rail: 218px; }
  :root[data-rail="closed"] body.glass { --g-rail: 62px; }
  .g-rail ~ .g-bar { display: none; }
  .g-rail ~ .g-page { padding-left: calc(var(--g-rail) + 14px); transition: padding-left 0.4s var(--g-ease); }
  .g-rail { position: fixed; z-index: 20; left: 14px; top: 14px; bottom: 14px; width: var(--g-rail); display: flex;
            flex-direction: column; gap: 6px; padding: 10px; border-radius: 26px; overflow: hidden;
            background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
            -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
            transition: width 0.4s var(--g-ease); view-transition-name: g-rail; }
  .g-rail-top { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px 5px; }
  .g-rail .g-mark { margin: 0; }
  .g-rail-name { flex: 1; font-family: var(--g-display); font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
  body.glass .g-rail button { margin: 0; padding: 0; width: 30px; height: 30px; flex: none; display: grid; place-items: center;
            background: transparent; color: var(--ink-2); border-radius: 10px; }
  body.glass .g-rail button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
  .g-rail svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
            stroke-linecap: round; stroke-linejoin: round; }
  .g-rail nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex;
            flex-direction: column; gap: 10px; }
  .g-rail nav::-webkit-scrollbar { display: none; }
  .g-group { display: flex; flex-direction: column; gap: 1px; }
  .g-group h6 { font-size: 0.74rem; font-weight: 500; color: var(--ink-muted); padding: 0 11px 3px; white-space: nowrap;
            height: 1.3rem; transition: opacity 0.25s var(--g-ease); }
  .g-group a { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 12px;
            color: var(--ink-2); text-decoration: none; font-size: 0.9rem; white-space: nowrap;
            transition: background 0.2s var(--g-ease), color 0.2s var(--g-ease); }
  .g-group a:hover { background: var(--surface-2); color: var(--ink); }
  .g-group a.active { background: var(--g-solid); color: var(--ink); font-weight: 600;
            box-shadow: inset 0 1px 0 var(--g-edge), 0 1px 3px rgba(0, 0, 0, 0.12); }
  .g-group a.active svg { color: var(--g-signal); }
  .g-group a span, .g-rail-name, .g-rail-out span { transition: opacity 0.25s var(--g-ease); }
  .g-rail-foot { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
  body.glass .g-rail .theme { margin: 0; background: var(--surface-2); border-radius: 12px; }
  body.glass .g-rail .theme button { width: auto; height: auto; flex: 1; padding: 0.3rem 0; border-radius: 10px; font-size: 0.76rem; }
  body.glass .g-rail .theme button[aria-pressed="true"] { background: var(--g-solid); color: var(--ink);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
  .g-rail-out { display: flex; align-items: center; gap: 8px; padding-left: 10px; font-size: 0.85rem; color: var(--ink-muted); }
  .g-rail-out span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Closed: pictures only. The names stay in the page for screen readers and as tooltips. */
  :root[data-rail="closed"] .g-rail-top { flex-direction: column; padding-left: 0; }
  :root[data-rail="closed"] :is(.g-rail-name, .g-rail .theme, .g-rail-out span) { display: none; }
  :root[data-rail="closed"] .g-group a span { opacity: 0; width: 0; overflow: hidden; }
  :root[data-rail="closed"] .g-group h6 { opacity: 0; height: 0; padding: 0; overflow: hidden; }
  :root[data-rail="closed"] .g-group + .g-group { border-top: 1px solid var(--line); padding-top: 10px; }
  :root[data-rail="closed"] .g-rail-out { padding-left: 5px; }
}

@keyframes g-drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@view-transition { navigation: auto; }

/* ---- type ---------------------------------------------------------------------- */

body.glass h1, body.glass h2, body.glass .g-num { font-family: var(--g-display); letter-spacing: -0.03em; }
body.glass h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1; font-weight: 650; margin: 0; text-wrap: balance; }
body.glass h2 { font-size: 1.35rem; font-weight: 650; }
body.glass h3 { font-size: 0.95rem; color: var(--ink); }
body.glass .wrap { padding-top: 2.6rem; }
body.glass .pagehead { align-items: flex-end; margin-bottom: 2rem; }
body.glass .pagehead .sub { font-size: 1rem; color: var(--ink-2); margin-top: 0.7rem; max-width: 56ch; }
body.glass .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; font-size: 0.85rem; }
body.glass .crumbs .here { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
body.glass .crumbs button { margin: 0; }
body.glass a { text-underline-offset: 3px; }

/* ---- the old parts, in glass ----------------------------------------------------- */

body.glass .card, body.glass .tile { border-radius: var(--radius); }
body.glass .card { padding: 1.5rem; margin-bottom: 1.4rem; }
body.glass .tile { border-radius: 18px; }
body.glass .tile .value { font-family: var(--g-display); letter-spacing: -0.03em; }
body.glass .brief { border-radius: 16px; background: var(--surface-2); }
body.glass .flash { border-radius: 14px; }
body.glass th { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500; }
body.glass input[type=text], body.glass input[type=url], body.glass input[type=email], body.glass input[type=password],
body.glass input[type=file], body.glass textarea, body.glass select { border-radius: 12px; padding: 0.6rem 0.75rem;
          transition: border-color 0.2s var(--g-ease), box-shadow 0.2s var(--g-ease); }
body.glass :is(input, textarea, select):focus-visible { outline: none; border-color: var(--g-signal);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-signal) 22%, transparent); }
body.glass :is(a, button, summary):focus-visible { outline: 2px solid var(--g-signal); outline-offset: 2px; }
body.glass button, body.glass .btn { border-radius: 999px; transition: transform 0.3s var(--g-ease), background 0.2s var(--g-ease); }
body.glass button:active:not(:disabled), body.glass .btn:active { transform: scale(0.97); }
body.glass button.small, body.glass .btn.small { padding: 0.36rem 0.9rem; }
body.glass .segmented { border-radius: 999px; padding: 3px; }
body.glass .segmented a { border-radius: 999px; padding: 0.36rem 0.9rem; }
body.glass .segmented a.active { background: var(--g-solid); color: var(--ink);
          box-shadow: inset 0 1px 0 var(--g-edge), 0 1px 3px rgba(0, 0, 0, 0.12); }
body.glass .tabs a.active { border-bottom-color: var(--ink); }
body.glass .pill { border-color: transparent; background: var(--surface-2); color: var(--ink-2); }
body.glass .pill.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-ink); }
body.glass .pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
body.glass .pill.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad-ink); }
body.glass .how > summary { border-radius: 999px; }
body.glass .precheck { border-radius: 16px !important; }

/* ---- shared pieces --------------------------------------------------------------- */

.g-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-2); font-size: 0.93rem; }
.g-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-signal); flex: none; }
.g-cta { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 6px 6px 6px 20px; border-radius: 999px;
         border: 0; background: var(--accent-fill); color: var(--on-accent); font: 600 0.95rem inherit; font-family: inherit;
         text-decoration: none; cursor: pointer; }
body.glass a.g-cta:hover { color: var(--on-accent); }
.g-cta em { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
            background: color-mix(in srgb, var(--on-accent) 16%, transparent); transition: transform 0.45s var(--g-ease); }
.g-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
             stroke-linejoin: round; }
.g-cta:hover:not(:disabled) em { transform: translate(3px, -1px) scale(1.06); }
.g-rise { animation: g-rise 0.7s var(--g-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes g-rise { from { opacity: 0; transform: translateY(16px); } }

/* The filmstrip: a period's reels in order, each drawn taller the more views it got. */
.g-film { overflow-x: auto; margin: 0 -1.5rem; padding: 0 1.5rem; scrollbar-width: thin;
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem); mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem); }
.g-track { position: relative; display: flex; align-items: flex-end; gap: 14px; min-width: max-content; height: 286px;
           padding-right: 120px; }
.g-usual { position: absolute; left: 0; right: 0; bottom: calc(48px + 60px + var(--u) * 170px); border-top: 1px dashed var(--ink-muted);
           opacity: 0.75; pointer-events: none; }
.g-reel { display: flex; flex-direction: column; gap: 8px; width: 88px; flex: none; text-decoration: none; color: inherit;
          border-radius: 16px; }
.g-reel img, .g-reel .g-blank { display: block; width: 88px; height: calc(60px + var(--s) * 170px); border-radius: 16px;
          object-fit: cover; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); transform-origin: bottom center;
          transition: transform 0.5s var(--g-ease); background: var(--surface-2); }
.g-reel .g-blank { box-shadow: inset 0 0 0 1px var(--border-strong); }
.g-reel.unmeasured img, .g-reel.unmeasured .g-blank { opacity: 0.55; }
.g-reel:hover img, .g-reel:hover .g-blank { transform: translateY(-6px) scale(1.03); }
.g-reel .cap { height: 40px; font-size: 0.76rem; line-height: 1.25; color: var(--ink-muted); }
.g-reel .cap b { display: block; font-family: var(--g-display); font-size: 0.98rem; font-weight: 650; color: var(--ink-2);
          font-variant-numeric: tabular-nums; }
.g-reel.hot .cap b { color: var(--g-signal); }

/* ---- Reports --------------------------------------------------------------------- */

.g-brand { margin-bottom: 3.2rem; }
.g-brand-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2rem; margin-bottom: 1.2rem; }
body.glass .g-brand-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.05; margin: 0.5rem 0 0; }
.g-brand-head h2 a { color: inherit; text-decoration: none; }
.g-brand-head .g-cta { justify-self: start; }
.g-sum { margin: 0.7rem 0 0; color: var(--ink-2); font-size: 1rem; max-width: 60ch; }
.g-sum .g-num { font-size: 1.5rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.g-sum b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 30px; box-shadow: var(--shadow);
           padding: 1.5rem 1.5rem 1.1rem; }
.g-panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px;
                margin-bottom: 0.4rem; color: var(--ink-2); font-size: 0.9rem; }
.g-panel-head strong { color: var(--ink); }
.g-under { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem 2.4rem; margin-top: 1.4rem;
           padding: 0 0.4rem; align-items: start; }
body.glass .g-under .brief { background: transparent; border: 0; padding: 0; }
.g-under .brief .headline { font-family: var(--g-display); font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }
.g-plats { list-style: none; display: flex; flex-direction: column; }
.g-plats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 0.7rem 0;
              border-top: 1px solid var(--line); align-items: baseline; }
.g-plats li:first-child { border-top: 0; padding-top: 0; }
.g-plats .name { font-weight: 600; }
.g-plats .g-num { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.g-plats .foot { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-muted); }

/* ---- Ideas ----------------------------------------------------------------------- */

.g-catch { display: flex; flex-direction: column; gap: 0; padding: 8px; border-radius: 28px; margin-bottom: 3rem; }
.g-catch-line { display: flex; align-items: center; gap: 8px; }
body.glass .g-catch-line input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.05rem;
          padding: 0.7rem 0.9rem; box-shadow: none; }
.g-catch details { padding: 0 0.9rem; }
.g-catch details > summary { list-style: none; display: inline-block; font-size: 0.85rem; color: var(--ink-2);
          padding: 0.3rem 0 0.6rem; text-decoration: underline; text-decoration-color: var(--border-strong);
          text-underline-offset: 3px; }
.g-catch details > summary::-webkit-details-marker { display: none; }
.g-catch details[open] { padding-bottom: 0.9rem; }
.g-catch .formgrid label:first-child, .g-catch .formgrid > div > label { margin-top: 0.4rem; }
.g-catch-more { display: flex; flex-wrap: wrap; gap: 0 1.4rem; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; }
.g-catch-more > details { padding: 0 0.9rem; flex: 1 1 100%; }
.g-catch-more > details:not([open]) { flex: 0 0 auto; padding-right: 0; }

.g-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 2rem 3rem; align-items: center;
          margin-bottom: 3.4rem; }
body.glass .g-lead h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1; margin: 0.9rem 0 1rem; text-wrap: balance; }
.g-lead .hook { font-size: 1.1rem; color: var(--ink); margin-bottom: 0.5rem; max-width: 52ch; }
.g-lead .body { color: var(--ink-2); white-space: pre-line; max-width: 60ch; }
.g-lead .why { color: var(--ink-muted); font-size: 0.9rem; margin-top: 0.5rem; max-width: 60ch; }
.g-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 1.4rem; }
.g-acts form { display: contents; }
.g-acts select { width: auto; max-width: 15rem; padding: 0.4rem 0.7rem; font-size: 0.85rem; border-radius: 999px; }
.g-plate { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 28px;
           padding: 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; transform: rotate(1.4deg);
           transition: transform 0.7s var(--g-ease); }
.g-plate:hover, .g-plate:focus-within { transform: none; }
.g-plate-top { display: flex; align-items: center; gap: 14px; }
.g-ring { width: 76px; height: 76px; flex: none; position: relative; }
.g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-ring circle { fill: none; stroke-width: 6; }
.g-ring .tr { stroke: var(--line); }
.g-ring .fg { stroke: var(--g-signal); stroke-linecap: round; stroke-dasharray: 201.1;
              stroke-dashoffset: calc(201.1 - 201.1 * var(--score) / 100); }
.g-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--g-display); font-size: 1.6rem;
            font-weight: 650; letter-spacing: -0.03em; }
.g-plate-top p { font-size: 0.92rem; line-height: 1.35; color: var(--ink-2); }
.g-plate-top p strong { display: block; font-size: 1.05rem; color: var(--ink); }
.g-bars { display: flex; gap: 4px; }
.g-bars i { flex: 1; height: 5px; border-radius: 3px; background: var(--g-signal); }
.g-bars i.no { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-muted); opacity: 0.6; }
.g-plate .miss { font-size: 0.86rem; color: var(--ink-muted); }
.g-plate .miss span { color: var(--ink-2); }
.g-plate details > summary { font-size: 0.85rem; color: var(--ink-2); }
.g-plate .precheck { border: 0 !important; padding: 0 !important; font-size: 0.86rem; }
.g-idea .g-plate { transform: none; background: transparent; box-shadow: none; border: 0; padding: 0.3rem 0 0; gap: 0.55rem; }
.g-idea .g-ring { width: 52px; height: 52px; }
.g-idea .g-ring b { font-size: 1.1rem; }
.g-idea .g-plate-top p strong { font-size: 0.95rem; }
.g-plate.quiet { transform: none; background: transparent; box-shadow: none; border-style: dashed; border-color: var(--border-strong);
                 color: var(--ink-2); font-size: 0.95rem; }

.g-section { margin-bottom: 3rem; }
.g-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
                  margin-bottom: 0.9rem; }
.g-section-head h2 { margin: 0; }
.g-section-head .aside { color: var(--ink-muted); font-size: 0.85rem; max-width: 60ch; }
.g-ideas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.g-idea { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 24px;
          padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
body.glass .g-idea h3 { font-family: var(--g-display); font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.15; margin: 0.2rem 0 0; }
.g-idea .body { color: var(--ink-2); font-size: 0.9rem; white-space: pre-line; }
.g-idea .g-acts { margin-top: auto; padding-top: 0.7rem; gap: 6px 8px; }
.g-empty { border: 1px dashed var(--border-strong); border-radius: 28px; padding: 2.4rem 1.5rem; text-align: center;
           color: var(--ink-2); margin-bottom: 3rem; }
.g-empty strong { display: block; font-family: var(--g-display); font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink);
                  margin-bottom: 0.3rem; }

/* ---- the lead post (brand report, This vs that) --------------------------------------- */

.g-top { margin: -0.4rem 0 2.4rem; }
body.glass .g-best { margin-bottom: 2.6rem; }
body.glass .g-best h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.04; }
.g-shot { display: block; justify-self: end; width: min(100%, 230px); }
.g-bezel { display: block; padding: 7px; border-radius: 36px; background: var(--surface); border: 1px solid var(--border);
           box-shadow: var(--shadow); transform: rotate(2.2deg); transition: transform 0.7s var(--g-ease); }
.g-shot:hover .g-bezel { transform: rotate(0deg) translateY(-4px); }
.g-bezel img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 29px; }
.g-plats a.name { color: inherit; text-decoration-color: var(--border-strong); }

/* ---- Trends and Footage match: other people's reels, drawn without their pictures -------- */

.g-quiet { margin: 0 0 2.2rem; }
body.glass .g-quiet h2 { font-size: 1.05rem; }
.g-fold.wordy > summary { display: block; font-weight: 400; }
.g-fold > summary > span.muted { font-weight: 400; }
.g-pairs { display: flex; flex-direction: column; margin-bottom: 0.6rem; }
.g-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 4.6rem; gap: 6px 22px; align-items: center;
          padding: 0.75rem 0; border-top: 1px solid var(--line); }
.g-pair:first-child { border-top: 0; }
.g-pair .kind { display: block; font-size: 0.76rem; color: var(--ink-muted); }
.g-pair .bars { display: flex; flex-direction: column; gap: 5px; }
.g-pair .b { display: flex; align-items: center; gap: 10px; font-size: 0.76rem; color: var(--ink-muted); white-space: nowrap; }
.g-pair .b i { display: block; height: 8px; border-radius: 4px; width: calc(var(--w) * 62%); min-width: 3px; background: var(--g-signal);
               transition: width 0.8s var(--g-ease); }
.g-pair .b.o i { background: var(--ink-muted); opacity: 0.45; }
.g-pair .lift { font-family: var(--g-display); font-weight: 650; font-size: 1.35rem; letter-spacing: -0.03em; text-align: right;
                color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-pair .lift.up { color: var(--g-signal); }
.g-pillars { height: 304px; padding-right: 24px; }
.g-pillar { display: grid !important; place-items: start center; padding-top: 8px; font-family: var(--g-display); font-weight: 650;
            font-size: 0.95rem; color: var(--ink-2); background: var(--surface) !important; }
.g-reel.hot .g-pillar { box-shadow: inset 0 0 0 1.5px var(--g-signal); color: var(--g-signal); }
.g-pillars .g-reel .cap { height: 56px; }
.g-note { flex: 0 0 min(280px, 80vw); display: flex; flex-direction: column; gap: 6px; padding: 1.1rem; border-radius: 24px;
          background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: inherit;
          text-decoration: none; transition: transform 0.5s var(--g-ease); }
.g-note:hover { transform: translateY(-4px); }
.g-note.dim { opacity: 0.62; }
.g-note .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-note .x { font-family: var(--g-display); font-weight: 650; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--g-signal); }
.g-note .who { font-family: var(--g-display); font-weight: 650; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--ink);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-note .cap { font-size: 0.88rem; color: var(--ink-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;
               -webkit-box-orient: vertical; overflow: hidden; }
.g-note .why { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;
               -webkit-box-orient: vertical; overflow: hidden; }
.g-note .foot { margin-top: auto; padding-top: 6px; font-size: 0.78rem; color: var(--ink-muted); }
.g-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.g-way { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 24px; padding: 1.2rem;
         display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.g-way > .row, .g-way > select, .g-way > label { width: 100%; }
.g-way > button { margin-top: auto !important; }
.g-way .note { font-size: 0.78rem; color: var(--ink-muted); margin-top: 0.4rem; }
.g-idea h3 a { color: inherit; text-decoration: none; }
.g-counts { display: flex; gap: 1.2rem; margin-top: auto; padding-top: 0.6rem; font-size: 0.78rem; color: var(--ink-muted); }
.g-counts b { display: block; font-family: var(--g-display); font-size: 1.4rem; font-weight: 650; color: var(--ink); line-height: 1.1; }
.g-counts span:first-child b { color: var(--g-signal); }
.g-duo.g-verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.6rem; }

/* ---- Reposts: the picks as stills, Accounts: one section per brand -------------------- */

.g-picks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px 14px;
           margin-bottom: 0.8rem; }
.g-pick { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.g-pick .pic { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55);
               transition: transform 0.5s var(--g-ease); text-decoration: none; }
.g-pick .pic:hover { transform: translateY(-4px); }
.g-pick .g-still { border-radius: 20px; }
.g-pick .score { position: absolute; left: 9px; top: 9px; padding: 3px 9px 4px; border-radius: 999px; background: rgba(12, 13, 16, 0.66);
                 color: #f0c98a; font-family: var(--g-display); font-weight: 650; font-size: 1.05rem; letter-spacing: -0.02em; }
.g-pick .score small { font-family: var(--text, inherit); font-weight: 500; font-size: 0.66rem; color: #fff; margin-left: 5px; letter-spacing: 0; }
.g-pick .t { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem; line-height: 1.25; display: -webkit-box;
             -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-pick .nums { display: flex; gap: 12px; font-size: 0.7rem; color: var(--ink-muted); }
.g-pick .nums b { display: block; font-family: var(--g-display); font-size: 0.98rem; font-weight: 650; color: var(--ink-2);
                  font-variant-numeric: tabular-nums; }
.g-pick .nums .on b { color: var(--g-signal); }
.g-pick .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.74rem; color: var(--ink-muted);
                margin-top: auto; }
.g-accts { list-style: none; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
           box-shadow: var(--shadow); border-radius: 22px; padding: 0.3rem 1.2rem; }
.g-accts li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.g-accts li:first-child { border-top: 0; }
.g-accts .plat { font-weight: 600; min-width: 5.5rem; }
.g-accts .handle { font-family: var(--g-display); font-size: 1.05rem; letter-spacing: -0.02em; }
.g-accts .when { flex: 1; font-size: 0.8rem; color: var(--ink-muted); }
.g-accts form { margin: 0 0 0 auto; }
.g-accts .when:empty { display: none; }
.g-accts .none { color: var(--ink-muted); }
.g-acct .g-fold > form { max-width: none; padding-top: 0.4rem; }

/* ---- Admin, Jobs, Download, Help ----------------------------------------------------------- */

.g-sum b.hot, .g-jobs b.hot { color: var(--bad); }
.g-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 2.2rem; }
.g-ringcard { display: flex; align-items: center; gap: 16px; padding: 1.1rem 1.2rem; border-radius: 24px; background: var(--surface);
              border: 1px solid var(--border); box-shadow: var(--shadow); color: inherit; text-decoration: none;
              transition: transform 0.5s var(--g-ease); }
.g-ringcard:hover { transform: translateY(-3px); }
.g-ringcard p { font-size: 0.86rem; color: var(--ink-2); line-height: 1.35; }
.g-ringcard p strong { display: block; font-family: var(--g-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); }
.g-ringcard .g-ring b { font-size: 1.15rem; }
.g-ring.hot .fg { stroke: var(--bad); }
body.glass #trial { margin-bottom: 1.6rem; }
.g-fold.g-open[open] { padding-bottom: 1.4rem; }
.g-fold.g-open > summary { font-family: var(--g-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.g-fold.g-open > summary > .muted { font-family: var(--text, -apple-system, sans-serif); font-size: 0.82rem; letter-spacing: 0; }
.g-fold.g-open > form, .g-fold.g-open > p { max-width: none; }
.g-jobs { list-style: none; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
          box-shadow: var(--shadow); border-radius: 24px; padding: 0.4rem 1.3rem; }
.g-jobs li { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;
             padding: 0.7rem 0; border-top: 1px solid var(--line); }
.g-jobs li:first-child { border-top: 0; }
.g-jobs .name { font-weight: 600; }
.g-jobs .dots { display: flex; flex-wrap: wrap; gap: 4px; }
.g-jobs .dots i { width: 10px; height: 18px; border-radius: 4px; background: var(--good); opacity: 0.75; }
.g-jobs .dots i.run { background: var(--warn); }
.g-jobs .dots i.bad { background: var(--bad); opacity: 1; }
.g-jobs .when { font-size: 0.8rem; color: var(--ink-muted); white-space: nowrap; }
.g-jobs .err { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-muted); }
.g-files .err { flex-basis: 100%; font-size: 0.76rem; color: var(--ink-muted); }
.g-files .handle { color: var(--ink); }
body.glass .g-catch-line input[type=url] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1rem;
          padding: 0.7rem 0.9rem; box-shadow: none; }
.g-doc { max-width: 52rem; line-height: 1.6; }
.g-doc > .sub { color: var(--ink-2); font-size: 1rem; margin: 0.7rem 0 2.4rem; max-width: 56ch; }
body.glass .g-doc h2 { font-size: 1.6rem; margin: 0.5rem 0 0.6rem; }
body.glass .g-doc h2 ~ h2 { font-size: 1.2rem; margin-top: 2rem; }
.g-doc ul { padding-left: 1.2rem; }
.g-doc li { margin-bottom: 0.5rem; }
.g-numbered { list-style: none; counter-reset: step; margin-top: 1.2rem; }
.g-numbered > li { counter-increment: step; position: relative; padding: 0.9rem 0 0.9rem 3.6rem; border-top: 1px solid var(--line);
                   margin: 0; }
.g-numbered > li::before { content: counter(step); position: absolute; left: 0; top: 0.55rem; font-family: var(--g-display);
                   font-weight: 650; font-size: 2rem; letter-spacing: -0.04em; color: var(--g-signal); line-height: 1; }

/* ---- one post ----------------------------------------------------------------------------- */

body.glass .g-post { align-items: start; margin: 0.4rem 0 2.2rem; }
body.glass .g-post h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 0.8rem 0 1rem; overflow-wrap: anywhere; }
.g-where { list-style: none; margin-top: 1.3rem; display: flex; flex-direction: column; max-width: 34rem; }
.g-where li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.g-where li:first-child { border-top: 0; }
.g-where .name { font-weight: 600; min-width: 5.5rem; }
.g-where .when { color: var(--ink-muted); font-size: 0.85rem; flex: 1; }
.g-where .err { flex-basis: 100%; color: var(--ink-muted); font-size: 0.82rem; }
.g-where form { margin: 0; }
.g-frames { padding-bottom: 8px; }
.g-frames .g-still { flex: 0 0 96px; width: 96px; }
body.glass details.g-fold > form, body.glass details.g-fold > p { max-width: 40rem; }

/* ---- Compose: the post on a phone beside the form ---------------------------------------- */

.g-compose { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.g-stage { position: sticky; top: 1.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.g-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; padding: 7px; background: var(--surface);
           border: 1px solid var(--border); box-shadow: var(--shadow); transform: rotate(-1.6deg);
           transition: transform 0.7s var(--g-ease); }
.g-phone:hover, .g-phone:focus-within { transform: none; }
.g-phone-in { position: relative; width: 100%; height: 100%; border-radius: 27px; overflow: hidden; background: var(--surface-2); }
.g-phone-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.2rem;
           color: var(--ink-2); font-size: 0.92rem; margin: 0; font-weight: 500; cursor: pointer;
           box-shadow: inset 0 0 0 1.5px var(--border-strong); border-radius: 27px; }
body.glass .g-phone .preview { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
           border-radius: 0; object-fit: cover; background: #000; }
.g-phone-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 0.9rem 0.9rem; color: #fff; font-size: 0.8rem;
           line-height: 1.3; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); pointer-events: none;
           white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.g-phone-cap:empty { display: none; }
.g-stage p { font-size: 0.82rem; color: var(--ink-muted); }
body.glass .g-compose .step .n { background: var(--g-signal); color: var(--on-inverse); font-family: var(--g-display); }
body.glass .publishbar { border-radius: 26px; background: var(--g-solid); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
           bottom: 12px; }
body.glass .brand-group { border-radius: 16px; }

/* ---- Insights: the finding said first, then the evidence ------------------------------- */

body.glass .tabs { border-bottom: 0; gap: 4px; margin-bottom: 1.6rem; scrollbar-width: none; }
body.glass .tabs a { border: 0; margin: 0; padding: 0.42rem 0.95rem; border-radius: 999px; font-size: 0.9rem; }
body.glass .tabs a:hover { background: var(--surface-2); }
body.glass .tabs a.active { background: var(--g-solid); color: var(--ink);
          box-shadow: inset 0 1px 0 var(--g-edge), 0 1px 3px rgba(0, 0, 0, 0.12); }
.g-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 3rem; margin: 0.4rem 0 2.4rem; }
.g-find .big { font-family: var(--g-display); font-weight: 650; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1;
               letter-spacing: -0.04em; margin: 0.5rem 0 0.2rem; font-variant-numeric: tabular-nums; }
.g-find.up .big { color: var(--g-signal); }
.g-find.down .g-kicker i { background: var(--ink-muted); }
body.glass .g-find h2 { font-size: 1.5rem; line-height: 1.1; margin: 0 0 0.3rem; }
.g-find p { color: var(--ink-2); font-size: 0.92rem; max-width: 46ch; }
.g-duel { display: flex; align-items: center; justify-content: center; gap: 1rem 2.4rem; flex-wrap: wrap; margin: 0.4rem 0 2.2rem; }
.g-side { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(40%, 200px); text-align: center;
          color: inherit; text-decoration: none; }
.g-side .g-bezel { width: 100%; margin-bottom: 10px; }
.g-side.a .g-bezel { transform: rotate(-2.2deg); }
.g-side:hover .g-bezel { transform: rotate(0deg) translateY(-4px); }
.g-side .g-still { border-radius: 29px; }
.g-side .g-num { font-size: 1.7rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.g-side.a .g-num { color: var(--g-signal); }
.g-side .t { font-size: 0.85rem; color: var(--ink-2); line-height: 1.3; }
.g-duel .vs { font-family: var(--g-display); color: var(--ink-muted); font-size: 1.1rem; }
.g-fold > .scroll, .g-fold > ul { margin-bottom: 0.4rem; }

/* ---- stills as the picture of a post (Home, Posts) --------------------------------- */

.g-still { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; }
.g-still-blank { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); padding: 8px 7px;
                 font-size: 0.68rem; line-height: 1.25; color: var(--ink-muted); overflow: hidden; }
.g-dot { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 6px; border-radius: 999px;
         background: rgba(12, 13, 16, 0.62); color: #fff; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.02em;
         white-space: nowrap; }
.g-dot i { width: 6px; height: 6px; border-radius: 50%; background: #9aa0aa; flex: none; }
.g-dot.ok i { background: #5fd39a; }
.g-dot.warn i { background: #f0b84a; }
.g-dot.bad i { background: #ff7b72; }

/* A row that scrolls sideways instead of making the page longer. */
.g-row { display: flex; gap: 14px; overflow-x: auto; margin: 0 -2rem; padding: 4px 2rem 16px; scrollbar-width: none;
         scroll-snap-type: x proximity; scroll-padding-inline: 2rem; }
.g-row::-webkit-scrollbar { display: none; }
.g-row > * { scroll-snap-align: start; }

/* ---- Home ---------------------------------------------------------------------------- */

body.glass .g-now { margin-bottom: 1.4rem; }
.g-now .sub a { color: inherit; text-decoration-color: var(--border-strong); }
.g-now .sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.g-need { flex: 0 0 min(330px, 84vw); display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; padding: 10px;
          border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.g-need-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 4px 4px 2px 0; min-width: 0; }
.g-need .t { font-family: var(--g-display); font-weight: 650; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.18;
             color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
             overflow: hidden; }
.g-need .step { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.3; }
.g-need .acts { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 0.82rem; }
.g-need-more { flex: 0 0 auto; display: grid; place-items: center; padding: 0 1.6rem; color: var(--ink); text-decoration: none;
               font-family: var(--g-display); font-weight: 650; background: transparent; box-shadow: none; border-style: dashed;
               border-color: var(--border-strong); white-space: nowrap; }
body.glass .g-went-head { margin: 0.6rem 0 0.5rem; }
body.glass .g-went-head h2 { font-size: 1.1rem; }
.g-mini { flex: 0 0 98px; display: flex; flex-direction: column; gap: 5px; color: inherit; text-decoration: none; }
.g-mini .g-still { box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5); transition: transform 0.5s var(--g-ease); }
.g-mini:hover .g-still { transform: translateY(-4px) scale(1.03); }
.g-mini .when { font-size: 0.74rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-mini .dots { display: flex; flex-wrap: wrap; gap: 3px; }
.g-mini .g-dot { padding: 1px 5px 1px 4px; gap: 3px; font-size: 0.58rem; }
.g-fold { border-top: 1px solid var(--line); }
.g-fold:last-of-type { border-bottom: 1px solid var(--line); }
.g-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
                    padding: 0.85rem 0.2rem; font-weight: 600; }
.g-fold > summary::-webkit-details-marker { display: none; }
.g-fold > summary b { font-family: var(--g-display); font-size: 1.1rem; color: var(--g-signal); font-variant-numeric: tabular-nums; }
.g-fold[open] { padding-bottom: 0.8rem; }

/* ---- Posts: a wall of stills ----------------------------------------------------------- */

.g-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-bottom: 1.6rem; }
.g-tile { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; text-decoration: none;
          color: #fff; background: var(--surface); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55);
          transition: transform 0.5s var(--g-ease); }
body.glass a.g-tile:hover { color: #fff; transform: translateY(-4px); }
.g-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-tile:not(.blank)::after { content: ""; position: absolute; inset: 40% 0 0 0;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78)); }
.g-tile .top { position: absolute; z-index: 1; top: 9px; left: 9px; right: 9px; display: flex; flex-wrap: wrap; gap: 4px; }
.g-tile .bot { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 11px; display: flex; flex-direction: column; gap: 3px; }
.g-tile .cap { font-weight: 600; font-size: 0.86rem; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 3;
               -webkit-box-orient: vertical; overflow: hidden; }
.g-tile .meta { font-size: 0.7rem; opacity: 0.85; line-height: 1.3; }
.g-tile.blank, body.glass a.g-tile.blank:hover { color: var(--ink); }
.g-tile.blank { border: 1px solid var(--border); box-shadow: var(--shadow); }
.g-tile.blank .bot { top: 44px; justify-content: space-between; }
.g-tile.blank .cap { font-family: var(--g-display); font-size: 1.05rem; letter-spacing: -0.02em; -webkit-line-clamp: 6; }
.g-tile.blank .meta { color: var(--ink-muted); opacity: 1; }
.pagehead .g-dot { vertical-align: 1px; }

@media (max-width: 860px) {
  .g-jobs li { grid-template-columns: minmax(0, 1fr) auto; }
  .g-jobs .dots { grid-column: 1 / -1; grid-row: 2; }
  .g-picks { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 16px 10px; }
  .g-pair { grid-template-columns: minmax(0, 1fr) 3.6rem; }
  .g-pair .bars { grid-column: 1 / -1; grid-row: 2; }
  .g-duo.g-verdicts { gap: 0.6rem 1rem; }
  .g-verdicts .g-find .big { font-size: 2.4rem; }
  .g-compose { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .g-stage { position: static; width: min(56%, 210px); margin: 0 auto; }
  .g-phone { transform: none; }
  .g-duel { flex-wrap: nowrap; gap: 0.5rem; align-items: flex-start; }
  .g-side { width: auto; flex: 1 1 0; max-width: 44%; }
  .g-side .g-bezel, .g-side.a .g-bezel { transform: none; padding: 5px; border-radius: 26px; }
  .g-side .g-bezel img, .g-side .g-still { border-radius: 21px; }
  .g-duel .vs { font-size: 0.85rem; padding-top: 30%; }
  .g-shot { justify-self: center; width: min(62%, 220px); }
  .g-bezel { transform: none; }
  .g-row { margin: 0 -1rem; padding: 4px 1rem 14px; scroll-padding-inline: 1rem; }
  .g-wall { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .g-bar { padding: 8px 1rem 0; top: 6px; }
  body.glass .wrap { padding-top: 1.8rem; }
  .g-brand-head, .g-under, .g-lead { grid-template-columns: minmax(0, 1fr); }
  .g-plate { transform: none; }
  .g-panel { padding: 1.1rem 1rem 0.8rem; border-radius: 24px; }
  .g-film { margin: 0 -1rem; padding: 0 1rem; }
  .g-track { padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-rise, .g-menu { animation: none; }
  body.glass *, body.glass *::before, body.glass *::after { transition: none !important; }
  @view-transition { navigation: none; }
}

/* Footage match: the plan (2026-10-21). Score on the left, six steps on the right. */
.g-plan { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1.2rem 3rem; margin: 0.4rem 0 2.6rem;
          padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--accent-soft); border: 1px solid var(--accent-border);
          backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.g-plan-nums { font-family: var(--g-display); font-weight: 650; line-height: 1; margin: 0.6rem 0 0.4rem;
               display: flex; align-items: baseline; gap: 0.5rem; }
.g-plan-nums .was { font-size: 2rem; color: var(--ink-muted); }
.g-plan-nums .arrow { font-size: 1.4rem; color: var(--ink-muted); }
.g-plan-nums .now { font-size: clamp(2.8rem, 6vw, 4rem); color: var(--g-signal); }
.g-plan-score p { color: var(--ink-2); font-size: 0.9rem; }
body.glass .g-plan-score h3 { margin: 1rem 0 0.3rem; font-size: 1.15rem; line-height: 1.2; }
.g-plan-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.g-plan-steps li { counter-increment: step; display: grid; grid-template-columns: 1.8rem 7.5rem 1fr; gap: 0.6rem;
                   padding: 0.55rem 0; border-top: 1px solid var(--accent-border); font-size: 0.93rem; }
.g-plan-steps li:first-child { border-top: 0; }
.g-plan-steps li::before { content: counter(step); font-family: var(--g-display); font-weight: 650; color: var(--g-signal); }
.g-plan-steps b { font-weight: 600; }
.g-plan-steps span { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.g-chip { display: inline-block; padding: 0.1rem 0.55rem; margin: 0 0.25rem 0.25rem 0; border-radius: 99px;
          border: 1px solid var(--accent-border); color: var(--ink); text-decoration: none; font-size: 0.85rem; }
@media (max-width: 760px) {
  .g-plan { grid-template-columns: 1fr; padding: 1.1rem; }
  .g-plan-steps li { grid-template-columns: 1.4rem 1fr; }
  .g-plan-steps li span { grid-column: 2; }
}
.g-first { margin-top: 0.8rem; padding-left: 0.7rem; border-left: 2px solid var(--g-signal); color: var(--ink); font-size: 0.9rem; }

/* Creators you like (2026-10-21): the channel card, then reels that beat their usual. */
.g-chips { display: flex; flex-wrap: wrap; gap: 0.1rem; }
.g-chip.bad { color: var(--ink-muted); text-decoration: line-through; }
.g-channel { margin: 0.4rem 0 2.6rem; padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--accent-soft);
             border: 1px solid var(--accent-border); backdrop-filter: blur(18px) saturate(1.3);
             -webkit-backdrop-filter: blur(18px) saturate(1.3); }
body.glass .g-channel h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin: 0.6rem 0 0.8rem; max-width: 34ch; }
.g-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 3rem; margin-top: 1rem; }
body.glass .g-channel h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.g-channel ol { margin: 0; padding-left: 1.2rem; color: var(--ink-2); font-size: 0.92rem; }
.g-channel ol li { margin-bottom: 0.3rem; }
.g-channel-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem 2rem;
                   margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--accent-border); }
.g-channel-facts dt { font-size: 0.78rem; color: var(--ink-muted); }
.g-channel-facts dd { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.g-beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem 1rem; }
.g-beat { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.g-beat-shot { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
               background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.g-beat-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-beat-shot .x { position: absolute; left: 8px; top: 8px; padding: 0.1rem 0.5rem; border-radius: 99px;
                  background: var(--accent-fill); color: var(--on-accent); font-family: var(--g-display); font-weight: 650; font-size: 0.85rem; }
.g-beat .who { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-beat .cap { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.3; height: 2.6em; overflow: hidden; }
@media (max-width: 760px) { .g-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-channel { padding: 1.1rem; } }
.g-suggest { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.3rem 0.2rem 0.7rem; margin: 0 0.4rem 0.4rem 0;
             border: 1px solid var(--accent-border); border-radius: 99px; font-size: 0.85rem; }
.g-suggest a { color: var(--ink); text-decoration: none; font-weight: 600; }

/* The team on a draft (services/team): a strip of roles, then options side by side. */
.g-team { list-style: none; margin: 0.6rem 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.g-team li { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px;
             background: var(--g-fill, rgba(0,0,0,0.05)); font-size: 0.82rem; color: var(--ink-2); max-width: 100%; }
.g-team li b { font-weight: 650; color: var(--ink); }
.g-team li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-team li.working { outline: 1.5px solid var(--g-signal); }
.g-team li.working b::after { content: " …"; }
.g-team li.waiting { opacity: 0.55; }
.g-team li.failed, .g-team li.skipped { opacity: 0.7; }
.g-team-sounds em { display: block; font-size: 0.8rem; margin-top: 0.2rem; }
.g-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 0.8rem 0 1rem; }
.g-option { border: 1px solid var(--line, rgba(0,0,0,0.08)); border-radius: 20px; padding: 1rem 1.1rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.g-option.best { border-color: var(--g-signal); }
.g-option.chosen { outline: 2px solid var(--g-signal); }
.g-option h3 { margin: 0; font-size: 1.1rem; }
.g-option .g-score { font-family: var(--g-display); font-weight: 650; color: var(--g-signal); font-size: 1.2rem; margin-left: 0.3rem; }
.g-option dl { margin: 0; display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.35rem 0.6rem; font-size: 0.9rem; }
.g-option dt { color: var(--ink-muted); font-weight: 600; }
.g-option dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.g-option .g-beatline { display: block; }
.g-option-video { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.g-option-video video { width: 100%; max-width: 270px; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; object-fit: cover; }
.g-option-wait { margin: 0; }
.g-option-posted { margin: 0; }
.g-posted-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.g-posted-form select { width: auto; max-width: 100%; margin: 0; }
.g-posted-form label { margin: 0; }
.g-option .g-beatline b { font-weight: 600; color: var(--ink); }
.g-option q { quotes: "\201C" "\201D"; color: var(--ink); }
.g-option form { margin-top: auto; }
@media (max-width: 640px) { .g-option dl { grid-template-columns: 5rem 1fr; } }

/* A draft's preview (the render from the Mac) and the Make form. */
.g-preview { margin: 0.4rem 0 0.8rem; }
.g-preview video { width: min(100%, 270px); aspect-ratio: 9 / 16; border-radius: 18px; background: #000; display: block; }
.g-make summary { cursor: pointer; }

/* ---- The UI pass (Matt 2026-10-23): one line at the top says what the page can do and whether it
   runs by itself or needs a press; long blocks fold into one-line summaries; a marker per thing;
   the main button sits at the top, never below a scroll; links that act look like buttons. ---- */
.g-can { margin: 0.6rem 0 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.45; max-width: 64ch; }
.g-mode { display: inline-block; margin-right: 0.35rem; padding: 0.08rem 0.6rem; border-radius: 999px; font-size: 0.78rem;
          font-weight: 600; background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink);
          white-space: nowrap; vertical-align: 1px; }
.g-mode.auto { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good-ink); }
.g-acts-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 1.4rem; }
.g-acts-top form { display: contents; }
.g-acts-top button, .g-acts-top .btn { margin: 0; }
.g-acts-top .note { font-size: 0.8rem; color: var(--ink-muted); max-width: 48ch; }
body.glass .btn { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; }
body.glass a.btn:hover { color: var(--on-accent); }
body.glass a.btn.quiet:hover { color: var(--ink); }
/* A line that opens: the marker, the name of the thing, then the detail, all on one line. */
.g-fold > summary .g-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.5rem; min-width: 0; }
.g-fold > summary .g-line .muted { font-weight: 400; }
.g-fold > summary::after { content: "+"; flex: none; font-family: var(--g-display); font-size: 1.2rem; color: var(--ink-muted); }
.g-fold[open] > summary::after { content: "–"; }
.g-fold.wordy > summary::after { content: none; }
/* Labelled one-line fields: the label on the left, one line of input on the right. */
.g-fields { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.55rem 0.8rem; align-items: center; max-width: 46rem; }
.g-fields label { margin: 0; font-size: 0.85rem; }
.g-fields label small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 0.74rem; }
.g-fields input, .g-fields select, .g-fields textarea { margin: 0; width: 100%; }
.g-fields textarea { min-height: 0; height: 2.6rem; resize: vertical; }
.g-fields .note { grid-column: 2; font-size: 0.78rem; color: var(--ink-muted); margin-top: -0.25rem; }
/* One compact picker: where the video comes from, then only that source's field. */
.g-start { margin: 0 0 2rem; padding: 1rem 1.2rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
           box-shadow: var(--shadow); display: grid; gap: 0.7rem; }
.g-start .choice { margin: 0; }
.g-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.g-start-row > select, .g-start-row > input[type=file] { flex: 1 1 240px; margin: 0; }
.g-start-row > select.brand { flex: 0 1 200px; }
.g-start-row .note { flex-basis: 100%; font-size: 0.78rem; color: var(--ink-muted); }
.g-start-label { font-weight: 600; font-size: 0.9rem; }
.g-start > button { margin: 0; justify-self: start; }
/* A draft's verbs: each button with one line saying what it does. */
.g-verbs { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.g-verbs li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: center; }
.g-verbs form { margin: 0; }
.g-verbs button, .g-verbs .g-cta, .g-verbs .btn { margin: 0; width: 100%; justify-content: center; }
.g-verbs .g-cta { padding: 6px 6px 6px 16px; }
.g-verbs .what { font-size: 0.84rem; color: var(--ink-2); line-height: 1.3; }
.g-verbs li.apart { margin-top: 0.4rem; }
/* The options the team wrote: one line each, the chosen or best one open. */
details.g-option > summary { list-style: none; cursor: pointer; display: grid; gap: 0.25rem; }
details.g-option > summary::-webkit-details-marker { display: none; }
details.g-option > summary h3 { margin: 0; }
details.g-option[open] > summary { margin-bottom: 0.3rem; }
.g-option .g-score { font-size: 1rem; }
.g-option .g-score small { font-weight: 400; color: var(--ink-muted); font-size: 0.75rem; }
/* The verdict counts, in words. */
.g-verdicts .g-find p { font-size: 0.86rem; }
.g-verdicts .g-find .mark { font-size: 1.3rem; display: block; }
/* A match in the list: its state in words and a marker. */
.g-idea .g-acts .btn { margin: 0; }
.g-state { font-size: 0.9rem; }
/* The menu: two groups and a small third. */
.g-group h6 { white-space: normal; line-height: 1.2; }
@media (max-width: 640px) {
  .g-fields { grid-template-columns: 1fr; gap: 0.3rem; }
  .g-fields label { margin-top: 0.45rem; }
  .g-fields .note { grid-column: 1; }
  .g-verbs li { grid-template-columns: 1fr; gap: 0.1rem; }
  .g-verbs .what { padding-left: 0.3rem; margin-bottom: 0.3rem; }
  .g-start { padding: 0.9rem; }
}
.g-menu h6 { margin: 6px 12px 2px; font-size: 0.72rem; font-weight: 500; color: var(--ink-muted); }
.g-plan-wide { grid-column: 1 / -1; }
/* One panel with tabs (Matt 2026-10-23: sections under each other are overwhelming to scroll through).
   Markup: .g-tabbed > nav.g-tabnav > .choice > button[data-tab], then section[data-panel]; base.html switches them. */
.g-tabbed { margin: 0.4rem 0 2rem; padding: 0.9rem 1.2rem 1.2rem; border-radius: 24px; background: var(--surface);
            border: 1px solid var(--border); box-shadow: var(--shadow); }
.g-tabnav { overflow-x: auto; scrollbar-width: none; margin: 0 -1.2rem 1rem; padding: 0 1.2rem; }
.g-tabnav::-webkit-scrollbar { display: none; }
.g-tabnav .choice { margin: 0; white-space: nowrap; }
.g-tabnav .choice button { padding: 0.4rem 0.9rem; }
.g-tabnav .choice button b { font-weight: 650; margin-left: 0.3rem; opacity: 0.8; }
.g-tabbed > [data-panel] > .g-section-head:first-child { margin-top: 0; }
.g-tabbed .g-plan { margin: 0; padding: 0; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.g-tabbed .g-fold:last-of-type { border-bottom: 0; }
.g-tabbed .g-row { margin: 0; padding: 4px 0 10px; }
.g-team-note { font-size: 0.85rem; color: var(--ink-2); }
.g-team-note dl { display: grid; grid-template-columns: 6rem 1fr; gap: 0.2rem 0.6rem; margin: 0.4rem 0 0; }
.g-team-note dt { font-weight: 600; color: var(--ink); } .g-team-note dd { margin: 0; }
@media (max-width: 640px) { .g-tabbed { padding: 0.7rem 0.9rem 0.9rem; } .g-tabnav { margin: 0 -0.9rem 0.8rem; padding: 0 0.9rem; } }
body.glass .tabs { flex-wrap: wrap; row-gap: 0.1rem; }
.g-duo.g-verdicts { margin-bottom: 1rem; }
/* The Refresh pill: fixed beside "How?", same shape, never below a scroll. */
.g-refresh { position: fixed; right: 6.2rem; bottom: 1rem; z-index: 30; margin: 0; padding: 0.45rem 0.9rem; border-radius: 999px;
             background: var(--g-solid, var(--surface)); color: var(--ink-2); border: 1px solid var(--border-strong); font-size: 0.85rem;
             font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.g-refresh:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
@media (max-width: 640px) { .g-refresh { right: 5.6rem; font-size: 0.8rem; padding: 0.4rem 0.7rem; } }
@media print { .g-refresh { display: none; } }

/* ---- The finished version (2026-10-23): the shell on a phone, one rule for the folds ---------- */
/* A fold's name takes the line's own colour and size: one rule instead of an inline style on every line. */
.g-fold > summary .g-line > b { color: inherit; font-size: inherit; }
/* The top line is one sentence: what the page can do and whether it runs by itself. */
.g-can { max-width: 58ch; }
/* Room at the end of every page, so the fixed pills never sit on a control. */
body.glass .wrap { padding-bottom: 5rem; }
/* The Refresh pill shrinks to its clock on a phone; How? keeps its word. */
@media (max-width: 640px) {
  .g-refresh { right: 4.6rem; padding: 0.4rem 0.65rem; font-size: 0.78rem; }
  .g-refresh .long { display: none; }
  body.glass .how > summary { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
  /* A table on a phone scrolls sideways inside its box instead of crushing its words. */
  body.glass .scroll table { min-width: 560px; }
  body.glass .scroll table.heat { min-width: 420px; }
}
/* Lines in place of a table (Clipper's videos, the activity log): the g-accts list, with a state first. */
.g-lines { list-style: none; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
           box-shadow: var(--shadow); border-radius: 22px; padding: 0.3rem 1.2rem; margin-bottom: 1rem; }
.g-lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.g-lines li:first-child { border-top: 0; }
.g-lines .t { font-weight: 600; color: var(--ink); text-decoration: none; min-width: 0; flex: 1 1 14rem; }
.g-lines .t:hover { text-decoration: underline; }
.g-lines .facts { font-size: 0.8rem; color: var(--ink-muted); flex: 1 1 12rem; }
.g-lines .sub { flex-basis: 100%; }
.g-lines form { margin: 0; }
.g-lines .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.g-lines .acts button, .g-lines .acts .btn { margin: 0; }
.g-lines .when { font-size: 0.8rem; color: var(--ink-muted); white-space: nowrap; }
.g-lines .kv { font-size: 0.8rem; color: var(--ink-2); flex-basis: 100%; overflow-wrap: anywhere; }
.g-lines .kv b { font-weight: 600; color: var(--ink-muted); }
/* The "Make next" line on Home: the one thing to make, its score, one button. */
.g-next { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 1.4rem; padding: 0.9rem 1.1rem;
          border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.g-next .what { flex: 1 1 18rem; min-width: 0; }
.g-next .what b { display: block; font-family: var(--g-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); }
.g-next .what span { font-size: 0.85rem; color: var(--ink-2); }
.g-next .g-score { font-family: var(--g-display); font-weight: 650; font-size: 1.5rem; color: var(--g-signal); letter-spacing: -0.03em; }
.g-next .g-score small { font-size: 0.72rem; color: var(--ink-muted); font-weight: 500; letter-spacing: 0; }
/* A draft's verbs on a phone: the explanation smaller, the preview beside the title. */
@media (max-width: 640px) {
  .g-verbs .what { font-size: 0.78rem; }
  body.glass .g-post .g-shot { width: min(48%, 180px); margin: 0 auto; }
}
/* A creator's reel with no picture: the lift drawn as a pillar, not an empty box. */
.g-beat-shot .lift { position: absolute; left: 12%; right: 12%; bottom: 0; border-radius: 10px 10px 0 0;
                     background: color-mix(in srgb, var(--g-signal) 22%, transparent); height: calc(14% + var(--l, 0) * 60%); }
.g-beat-shot .lift::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--g-signal); }
/* The old stacked forms (Trends' brief, Creators' direction) take the labelled one-line fields. */
.g-fields textarea.tall { height: 5.2rem; }
.g-fields .choices { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.g-fields .choices label { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 400; font-size: 0.88rem; }
/* The Admin pages in the house shape: numbers as a line, the panel with tabs. */
.g-admin-sum { margin: 0.6rem 0 1.2rem; }
.g-rings { margin-bottom: 1.2rem; }
.g-tabbed .g-rings { margin-top: 0.4rem; }
.g-tabbed .card { background: transparent; border: 0; box-shadow: none; padding: 0.2rem 0 0.6rem; margin: 0; }
.g-tabbed .divided { border-top: 1px solid var(--line); }
/* Verdict counts stack as three columns on a phone, each a short word under its number. */
@media (max-width: 420px) { .g-verdicts .g-find .big { font-size: 2rem; } .g-verdicts .g-find p { font-size: 0.78rem; } }
/* Insights' tabs as one scrolling row, like every other panel. */
body.glass .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -1rem 1.2rem; padding: 0 1rem; }
body.glass .tabs::-webkit-scrollbar { display: none; }
/* A recording on a phone: the recording itself first, the clips under it. */
@media (max-width: 1000px) { .split .sidecol { order: -1; } .split .sidecol .card { margin-bottom: 1.2rem; } body.glass .source-video { max-height: 200px; } }
/* Rename a match in place: a small form inside a fold. */
.g-rename { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.g-rename input[type=text] { flex: 1 1 12rem; margin: 0; }
.g-rename button { margin: 0; }
.g-rename-fold { display: inline-block; }
.g-rename-fold > summary { list-style: none; cursor: pointer; }
.g-rename-fold > summary::-webkit-details-marker { display: none; }
.g-rename-fold[open] { flex-basis: 100%; }

/* Talk to the team (2026-10-23): the last few turns, then one box. */
.g-talk { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.g-chat { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.g-chat li { font-size: 0.9rem; color: var(--ink-2); padding: 0.45rem 0.7rem; border-radius: 12px; background: var(--line); max-width: 46rem; }
.g-chat li.you { align-self: flex-end; background: transparent; border: 1px solid var(--border-strong); }
.g-chat li b { color: var(--ink); margin-right: 0.25rem; }
.g-talk-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.g-talk-form label small { font-weight: 400; color: var(--ink-muted); }
.g-talk-form textarea { width: 100%; margin: 0 0 0.5rem; }
.g-talk-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.g-talk-row select { width: auto; max-width: 100%; margin: 0; }

/* Jokes for a wordless reaction clip (2026-10-23): tap one to use it. */
.g-jokes { margin: 0.4rem 0 0.8rem; }
.g-jokes-head { margin: 0 0 0.5rem; }
.g-jokes ol { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.g-jokes form { margin: 0; }
.g-joke { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; text-align: left;
          padding: 0.6rem 0.8rem; border-radius: 14px; border: 1px solid var(--border-strong); background: transparent;
          color: var(--ink); font-weight: 600; white-space: normal; height: auto; }
.g-joke small { font-weight: 400; color: var(--ink-muted); }
.g-joke:hover { border-color: var(--g-signal); }

/* A reel that needs a clip takes it right there (2026-10-24). */
.g-needs-clip { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem; border: 1px dashed var(--border-strong); border-radius: 12px; }
.g-needs-clip label { font-weight: 600; font-size: 0.9rem; }
.g-needs-clip label small { display: block; font-weight: 400; color: var(--ink-muted); }
.g-needs-clip input[type=file] { margin: 0; width: 100%; }

/* Waiting, everywhere the same (templates/_busy.html, app.js submit) — 2026-10-24. */
.g-busy { display: flex; gap: 0.8rem; align-items: center; margin: 0.6rem 0; padding: 0.8rem 1rem; border-radius: 16px;
          border: 1px solid var(--g-signal); background: color-mix(in srgb, var(--g-signal) 8%, transparent); }
.g-busy-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.g-busy-text b { font-size: 0.98rem; }
.g-busy-text span { color: var(--ink-2); font-size: 0.9rem; }
.g-busy-text small { color: var(--ink-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.g-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--g-signal) 25%, transparent);
          border-top-color: var(--g-signal); animation: g-spin 0.9s linear infinite; display: inline-block; vertical-align: middle; }
.g-spin.small { width: 12px; height: 12px; border-width: 2px; }
button.is-busy { opacity: 0.85; cursor: progress; }
@keyframes g-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g-spin { animation-duration: 3s; } }

/* The Editor's plan inside a reel (2026-10-24). */
.g-edit summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.g-edit summary .ok { color: var(--ok, #2f7a4f); font-weight: 500; }
.g-edit summary .bad { color: var(--bad, #a93b2f); font-weight: 500; }
.g-edit-beats, .g-edit-broll, .g-edit-checks { margin: 0.4rem 0 0.4rem 1.1rem; padding: 0; font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.2rem; }
.g-edit-checks { list-style: none; margin-left: 0; }
.g-edit-checks li.bad { color: var(--bad, #a93b2f); }