/* ===========================================================================
   Marquee — the system.
   ---------------------------------------------------------------------------
   One file. Every colour, size and space in the product is named here and
   nowhere else.

   This exists because it did not. The tokens were copy-pasted into twelve
   files, so changing the gold meant changing it twelve times and missing four
   — which is how the app ended up with 44 colours and SIX different golds
   (#B9975B, #C8A96A, #C9A76A, #D9A441 and two dim variants). Nobody chooses
   six golds. A system without a single source of truth drifts into them, and
   the eye notices two panels not quite matching long before it can say why.

   Rules that keep it true:
     · A hex value in a page file is a bug. Use a var(). test/tokens.test.mjs
       fails the build on one, and on a var() naming a token that is not
       defined here -- which is how six colours got in that nobody chose:
       var(--mq-sunk, #EFEBE3) has no --mq-sunk, so it quietly painted a
       colour the system does not have, in five files, for months.
     · --mq-gold appears ONCE per screen. It marks the action that starts
       work, never every action. An accent used everywhere is wallpaper.
     · Bodoni is a display face: 32px and up, never smaller. Its thick-thin
       contrast goes fragile at body size and reads fussy rather than
       authoritative.
     · Figures use tabular numerals so columns align.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts, served from this origin.
   ---------------------------------------------------------------------------
   Every page used to fetch these from Google at render time, which meant text
   landed in a fallback face and then jumped when the real one arrived. That
   flash, on every navigation, is the single loudest "this was not paid for"
   signal a site has — and it is entirely avoidable.

   Two variable fonts and two static weights, 96 KB for the set. font-display:
   swap keeps text readable while they load; the preload hints in the page head
   mean they usually arrive before first paint.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/bodoni-moda-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/archivo-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
  /* --- Paper -------------------------------------------------------------
     Light, not dark. Marquee's output is presented to sellers at kitchen
     tables and printed; dark UI does neither. Luxury property is a light
     medium — Sotheby's, Christie's, Knight Frank are cream and ink. Gold on
     near-black is the most overused shortcut to "premium" there is, and it
     does not read as expensive to a seller. It reads as an app. */
  --mq-paper:        #F7F5F0;  /* the ground */
  --mq-paper-raised: #FFFFFF;  /* cards, inputs — one step up, never a shadow */
  --mq-paper-sunk:   #F0EDE6;  /* wells, table stripes */

  /* --- Ink --------------------------------------------------------------- */
  --mq-ink:          #14110D;  /* body and headings */
  --mq-ink-muted:    #6B655C;  /* secondary text — 4.8:1 on paper */
  --mq-ink-faint:    #8C8680;  /* large text and rules only: 3.3:1 */

  /* --- Structure --------------------------------------------------------- */
  --mq-rule:         #DFD9CE;  /* hairlines */
  --mq-rule-strong:  #14110D;  /* the 2px rule that opens a section */

  /* --- The one accent -----------------------------------------------------
     Darkened from #B9975B, which fails contrast on a light ground. This is
     5.5:1 on paper and 6.1:1 under white. */
  --mq-gold:         #7A5F26;

  /* --- Meaning, used sparingly ------------------------------------------- */
  --mq-confirmed:    #14110D;  /* a confirmed fact is simply ink */
  --mq-unchecked:    #9A4B32;  /* and an unchecked one is not alarming, just warm */
  --mq-positive:     #2F6B4F;
  /* Something went wrong and the person has to know: a refused save, a card
     declined, a seat that cannot be added. Darker and colder than
     --mq-unchecked, which is not a failure at all -- it is a fact nobody has
     confirmed yet. The two were the same shade of "red-ish" in five files. */
  --mq-alert:        #8C2F1E;

  /* --- The report band (Parry, 21 Oct: "make it look more like the market
     report with some color") ----------------------------------------------
     A dark band behind a photograph, the brighter gold that reads on it, and
     the two chips a week's change can wear: green up, amber down. Used on
     the weekly seller report and the example pages, nowhere else. */
  --mq-night:        #151515;
  --mq-gold-bright:  #C9A24A;
  --mq-gold-brown:   #8A6D1F;
  --mq-up:           #256B42;
  --mq-up-bg:        #E3F2E8;
  --mq-down:         #7A4A10;
  --mq-down-bg:      #FBEEDD;
  --mq-quote-bg:     #F4F2EE;

  /* --- The two ends -------------------------------------------------------
     Ink is #14110D, not black, because a warm near-black on cream is what
     print looks like. These two are for the places that want the actual
     ends of the range: the pressed state of a solid button, the bed behind
     a photograph or a video, and type sitting on ink or gold. */
  --mq-ink-deep:     #000000;
  --mq-ink-reverse:  #FFFFFF;

  /* --- Type --------------------------------------------------------------- */
  --mq-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --mq-ui:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mq-mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* A six-step scale. Sizes outside it are a decision somebody has to
     justify, which is the point. */
  --mq-t-xs:  11px;
  --mq-t-sm:  13px;
  --mq-t-md:  15px;
  --mq-t-lg:  19px;
  --mq-t-xl:  25px;   /* the ceiling for the grotesque */
  --mq-t-2xl: 34px;   /* Bodoni starts here */
  --mq-t-3xl: 52px;

  /* --- Space, on a 4px grid ---------------------------------------------- */
  --mq-s-1:  4px;
  --mq-s-2:  8px;
  --mq-s-3:  12px;
  --mq-s-4:  16px;
  --mq-s-5:  24px;
  --mq-s-6:  32px;
  --mq-s-7:  48px;
  --mq-s-8:  64px;

  /* --- Measures -----------------------------------------------------------
     Three, used deliberately. One width for prose, figures and tables alike
     is the clearest sign of a template rather than a designed product. */
  --mq-measure-prose: 65ch;
  --mq-measure-wide:  1100px;
  --mq-measure-page:  1240px;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mq-paper);
  color: var(--mq-ink);
  font-family: var(--mq-ui);
  font-size: var(--mq-t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
a { color: var(--mq-gold); }
a:hover { color: var(--mq-ink); }

/* Keyboard users are not optional. This was missing from the open house and
   login pages entirely. */
:focus-visible { outline: 2px solid var(--mq-gold); outline-offset: 2px; }
::selection { background: var(--mq-ink); color: var(--mq-paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Type roles
   --------------------------------------------------------------------------- */

.mq-display { font-family: var(--mq-display); font-weight: 400; letter-spacing: -0.018em; line-height: 1.06; }
.mq-display-1 { font-size: var(--mq-t-3xl); }
.mq-display-2 { font-size: var(--mq-t-2xl); line-height: 1.12; }

/* The small caps that carry the record-keeping. Plex Mono is doing the
   document work here and it should keep doing it. */
.mq-label {
  font-family: var(--mq-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mq-ink-muted);
}

.mq-muted { color: var(--mq-ink-muted); }
.mq-small { font-size: var(--mq-t-sm); }

/* Figures. Tabular numerals so digits sit in columns — most of why financial
   software looks engineered and marketing software does not. */
.mq-figure { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------------------------------------------------------------------------
   The three components. Every page uses these rather than hand-rolling.
   --------------------------------------------------------------------------- */

.mq-btn {
  display: inline-block;
  font-family: var(--mq-ui);
  font-size: var(--mq-t-md);
  font-weight: 500;
  line-height: 1.2;
  padding: 14px 24px;
  min-height: 44px;              /* a real touch target */
  border: 1px solid var(--mq-ink);
  background: transparent;
  color: var(--mq-ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 120ms ease, color 120ms ease;
}
.mq-btn:hover { background: var(--mq-ink); color: var(--mq-paper); }
.mq-btn[disabled] { opacity: 0.45; cursor: default; }
.mq-btn[disabled]:hover { background: transparent; color: var(--mq-ink); }

/* Solid: the ordinary commit. */
.mq-btn--solid { background: var(--mq-ink); color: var(--mq-paper); }
.mq-btn--solid:hover { background: var(--mq-ink-deep); color: var(--mq-paper); }

/* Gold: ONE per screen, for the action that starts work. */
.mq-btn--gold { background: var(--mq-gold); border-color: var(--mq-gold); color: var(--mq-ink-reverse); }
.mq-btn--gold:hover { background: var(--mq-ink); border-color: var(--mq-ink); color: var(--mq-paper); }

.mq-btn--block { display: block; width: 100%; }

.mq-panel {
  border: 1px solid var(--mq-rule);
  background: var(--mq-paper-raised);
  padding: var(--mq-s-5);
}
.mq-panel--flat { background: transparent; }

.mq-field { display: block; margin-top: var(--mq-s-4); }
.mq-field > span {
  display: block;
  font-size: var(--mq-t-sm);
  color: var(--mq-ink-muted);
  margin-bottom: var(--mq-s-1);
}
.mq-input {
  width: 100%;
  padding: 13px 12px;
  min-height: 44px;
  background: var(--mq-paper-raised);
  border: 1px solid var(--mq-rule);
  color: var(--mq-ink);
  font-family: var(--mq-ui);
  font-size: 16px;               /* 16px or iOS zooms the page on focus */
  border-radius: 0;
}
.mq-input:focus { border-color: var(--mq-ink); }
textarea.mq-input { min-height: 88px; resize: vertical; line-height: 1.55; }

/* Consent and choice. Unticked by default, everywhere, always. */
.mq-check { display: flex; gap: var(--mq-s-3); align-items: flex-start; margin-top: var(--mq-s-4); }
.mq-check input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--mq-gold); }
.mq-check span { font-size: var(--mq-t-sm); color: var(--mq-ink-muted); }

/* ---------------------------------------------------------------------------
   The sourced value.
   ---------------------------------------------------------------------------
   The primitive that makes the differentiator visible. A figure never appears
   without saying where it came from, and confidence is carried by SHAPE —
   filled square confirmed, hollow square unchecked — so it survives greyscale,
   printing, and colour blindness. A coloured pill reading "verified" says
   nothing about by whom, from what, or when.
   --------------------------------------------------------------------------- */

.mq-sourced { display: flex; align-items: baseline; gap: 9px; }
.mq-sourced__dot { width: 7px; height: 7px; flex: none; transform: translateY(-1px); }
.mq-sourced__dot--confirmed { background: var(--mq-confirmed); }
.mq-sourced__dot--unchecked { border: 1px solid var(--mq-unchecked); }
.mq-sourced__text { font-family: var(--mq-mono); font-size: var(--mq-t-xs); line-height: 1.45; }
.mq-sourced--unchecked .mq-sourced__text { color: var(--mq-unchecked); }
.mq-sourced__when { color: var(--mq-ink-muted); }

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.mq-page { max-width: var(--mq-measure-page); margin: 0 auto; padding-inline: var(--mq-s-5); }
.mq-narrow { max-width: 560px; margin: 0 auto; padding-inline: var(--mq-s-5); }
.mq-prose { max-width: var(--mq-measure-prose); }
.mq-stack { display: flex; flex-direction: column; }
.mq-row { display: flex; gap: var(--mq-s-3); flex-wrap: wrap; }

.mq-rule-top { border-top: 1px solid var(--mq-rule); }
.mq-rule-top--strong { border-top: 2px solid var(--mq-rule-strong); }

/* Every page gets these. Five had no mobile rules at all, including the open
   house sheet — the one page certain to be used on a phone, at a door, by a
   stranger. */
@media (max-width: 720px) {
  :root { --mq-t-3xl: 34px; --mq-t-2xl: 26px; --mq-t-xl: 21px; }
  .mq-page, .mq-narrow { padding-inline: var(--mq-s-4); }
  .mq-panel { padding: var(--mq-s-4); }
  .mq-row--stack-sm { flex-direction: column; }
  .mq-row--stack-sm > * { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Print. Agents print this and hand it to sellers. Until the ground went
   light, that was not possible.
   --------------------------------------------------------------------------- */

@media print {
  :root { --mq-paper: #FFFFFF; --mq-paper-raised: #FFFFFF; }
  body { font-size: 11pt; }
  .mq-btn, .mq-no-print { display: none !important; }
  .mq-panel { border-color: #BBB; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ===========================================================================
   Document pages — privacy, terms, data deletion.
   ---------------------------------------------------------------------------
   These three carried an identical 30-line copy of the old tokens each. They
   are long-form reading, so they get the prose measure and nothing else; the
   masthead is shared because a legal page that does not look like the product
   is a legal page people assume belongs to somebody else.
   =========================================================================== */

.mq-doc { max-width: 760px; margin: 0 auto; padding-inline: var(--mq-s-5); padding-block: 0 90px; }

.mq-mast {
  border-bottom: 1px solid var(--mq-rule);
  position: sticky; top: 0; z-index: 9;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(8px);
}
.mq-mast__in {
  max-width: 760px; margin: 0 auto;
  padding: var(--mq-s-4) var(--mq-s-5);
  display: flex; justify-content: space-between; align-items: center; gap: var(--mq-s-5);
}
.mq-mark { text-decoration: none; color: var(--mq-ink); }
.mq-mark b {
  font-family: var(--mq-display); font-size: 22px; font-weight: 400;
  letter-spacing: 0.16em; display: block; line-height: 1;
}
.mq-mark span {
  font-family: var(--mq-mono); font-size: 8px; letter-spacing: 0.26em;
  color: var(--mq-ink-muted); text-transform: uppercase; display: block; margin-top: 7px;
}
.mq-back { font-size: var(--mq-t-sm); color: var(--mq-ink-muted); text-decoration: none; }
.mq-back:hover { color: var(--mq-ink); }

.mq-doc h1 {
  font-family: var(--mq-display); font-weight: 400;
  font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.015em;
  line-height: 1.08; margin-top: 58px;
}
.mq-doc h2 { font-family: var(--mq-display); font-size: 23px; font-weight: 400; margin-top: var(--mq-s-7); }
.mq-doc h2 + p, .mq-doc h2 + ul { margin-top: var(--mq-s-3); }
.mq-doc p + p, .mq-doc ul + p, .mq-doc p + ul { margin-top: var(--mq-s-3); }
.mq-doc p { color: var(--mq-ink-muted); }
.mq-doc ul { padding-left: 20px; color: var(--mq-ink-muted); margin: 0; }
.mq-doc li { margin-bottom: 10px; }
.mq-doc li b, .mq-doc p b { color: var(--mq-ink); font-weight: 500; }
.mq-doc .mq-lede { font-size: 16.5px; color: var(--mq-ink-muted); margin-top: var(--mq-s-5); }
.mq-doc .mq-stamp {
  font-family: var(--mq-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mq-ink-muted); margin-top: var(--mq-s-4);
}
.mq-doc .mq-box {
  border: 1px solid var(--mq-rule); background: var(--mq-paper-raised);
  padding: 22px 24px; margin-top: var(--mq-s-5);
}
.mq-doc .mq-box p { color: var(--mq-ink); }

.mq-foot {
  border-top: 1px solid var(--mq-rule); margin-top: 70px; padding-top: var(--mq-s-5);
  font-size: 12.5px; color: var(--mq-ink-muted);
  display: flex; justify-content: space-between; gap: var(--mq-s-4); flex-wrap: wrap;
}
.mq-foot a { color: var(--mq-ink-muted); text-decoration: none; }
.mq-foot a:hover { color: var(--mq-ink); }

@media (max-width: 720px) {
  .mq-doc { padding-inline: var(--mq-s-4); }
  .mq-mast__in { padding: var(--mq-s-3) var(--mq-s-4); }
  .mq-doc h1 { margin-top: var(--mq-s-6); }
}

/* A way back out of a screen that was reached from a link and has no page
   behind it. Quiet on purpose: it is an exit, not an action. */
.mq-link-quiet{font-family:var(--mq-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--mq-ink-muted);
  display:inline-block;padding:10px 0;min-height:40px}
.mq-link-quiet:hover{color:var(--mq-ink)}

/* ===========================================================================
   Hollywood: the agent's screens (Parry, 15 Oct: "lets go with the hollywood
   white with the gold aceents"; "make sure that you add the glass look like
   we have on oure orbs").
   ---------------------------------------------------------------------------
   Switched on by a wrapper, class="mq-hollywood", in the layouts of the
   screens only an agent sees: home, the campaign, sign in, team. Everything
   a seller, buyer or visitor sees (presentations, flyer, the weekly seller
   report, the photo page, the open house forwards, the legal pages) keeps the
   light paper above, because it is printed and handed across a table.

   It works by redefining the same tokens, so no page carries a colour of its
   own and the rule at the top of this file still holds. The page-level
   aliases (--hair, --stone, --ink, --bone ...) are restated here because a
   custom property that names another is resolved where it is defined: the
   copies on :root would keep the light values.

   Black ground, warm white bulbs and lettering, gold for the accent and the
   menu, glass panels with the orbs' top shine, a white ticket per listing on
   home with a gold stub. Motion stops for anyone who asked for less of it.
   =========================================================================== */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-400.woff2') format('woff2');
}
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/work-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/work-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/work-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/work-sans-700.woff2') format('woff2'); }

.mq-hollywood {
  --mq-paper:        #0D0D0D;
  --mq-paper-raised: #1A1814;
  --mq-paper-sunk:   #24211C;
  --mq-ink:          #FAF6EE;
  --mq-ink-muted:    #CFC6B5;   /* 10:1 on the ground */
  --mq-ink-faint:    #A39A8A;   /* 6.4:1 */
  --mq-rule:         #3B362E;
  --mq-rule-strong:  #D4AF37;
  --mq-gold:         #D4AF37;   /* 9:1 on the ground */
  --mq-confirmed:    #FAF6EE;
  --mq-unchecked:    #E6A882;
  --mq-positive:     #86D3A8;
  --mq-alert:        #F2917A;
  --mq-ink-deep:     #000000;
  --mq-ink-reverse:  #0D0D0D;   /* type on cream or gold */
  --mq-bulb:         #FFF0CF;
  --mq-bulb-core:    #FFF8E6;
  --mq-white:        #FFFFFF;
  --mq-stub-hi:      #F6DC86;
  --mq-stub-lo:      #C59A2E;
  --mq-ticket-ink:   #14110D;
  --mq-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --mq-ui:      'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --mq-mono:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  /* the pages' own names for the same things */
  --hair: var(--mq-rule); --hair2: var(--mq-ink-faint);
  --stone: var(--mq-ink-muted); --stone2: var(--mq-ink-muted);
  --bone: var(--mq-ink); --brass: var(--mq-gold); --brassDim: var(--mq-rule);
  --ink: var(--mq-paper); --ink2: var(--mq-paper-raised); --ink3: var(--mq-paper-sunk);
  --f-display: var(--mq-display); --f-ui: var(--mq-ui); --f-mono: var(--mq-mono);

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--mq-ink);
  font-family: var(--mq-ui);
}
:root {
  --mq-hw-ground: #0D0D0D;
  --mq-hw-ink:    #FAF6EE;
}
body:has(.mq-hollywood) { background: var(--mq-hw-ground); color: var(--mq-hw-ink); }

/* Stage light: warm, soft, behind everything, so the glass has something to
   blur -- the way the orbs float on light in the Brain. */
.mq-hollywood::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% -6%, rgba(255,232,180,.16), transparent 70%),
    radial-gradient(34% 30% at 6% 42%, rgba(212,175,55,.13), transparent 70%),
    radial-gradient(38% 34% at 96% 30%, rgba(255,236,200,.08), transparent 70%),
    radial-gradient(30% 26% at 46% 104%, rgba(212,175,55,.10), transparent 70%);
}

.mq-hollywood ::selection { background: var(--mq-gold); color: var(--mq-ink-reverse); }

/* --- Type: Bebas for display. It is all capitals, so it needs air, not the
   negative tracking Bodoni wanted. --- */
.mq-hollywood .disp, .mq-hollywood .mq-display, .mq-hollywood h1, .mq-hollywood h2 {
  font-family: var(--mq-display); font-weight: 400; letter-spacing: .02em; line-height: 1;
}
.mq-hollywood h1 { text-shadow: 0 0 18px rgba(255,236,200,.18); }
.mq-hollywood .lbl, .mq-hollywood .mq-label, .mq-hollywood .grouplbl {
  font-weight: 600; letter-spacing: .2em; color: var(--mq-ink-muted);
}

/* --- The sign. The masthead becomes the marquee: a glass panel, a warm
   border, a row of bulbs above and below that chase. --- */
.mq-hollywood .mast {
  position: sticky; top: 0; z-index: 40;
  margin: 10px 10px 0; padding-block: 10px;
  background: rgba(22,21,19,.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 2px solid rgba(255,240,207,.85); border-radius: 14px;
  box-shadow: 0 0 16px 1px rgba(255,236,200,.38), 0 0 54px 6px rgba(255,220,160,.12),
              inset 0 0 22px rgba(255,236,200,.14), inset 0 1px 0 rgba(255,255,255,.45);
}
.mq-hollywood .mast::before, .mq-hollywood .mast::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 8px; pointer-events: none;
  background: radial-gradient(circle, var(--mq-bulb-core) 0 2.3px, rgba(255,240,207,.45) 2.6px, transparent 3.6px) 0 50% / 18px 8px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,236,200,.95));
  animation: mq-chase 1.4s linear infinite;
}
.mq-hollywood .mast::before { top: 3px; }
.mq-hollywood .mast::after { bottom: 3px; animation-delay: -.7s; }
@keyframes mq-chase { 0%, 49.9% { background-position-x: 0; } 50%, 100% { background-position-x: 9px; } }
.mq-hollywood .mast b {
  font-family: var(--mq-display) !important; font-size: 30px !important; letter-spacing: .22em !important;
  color: var(--mq-bulb);
  text-shadow: 0 0 6px rgba(255,236,200,.9), 0 0 18px rgba(255,220,160,.55), 0 0 40px rgba(255,200,120,.3);
}
.mq-hollywood .mast a { color: var(--mq-gold); text-shadow: 0 0 6px rgba(212,175,55,.7), 0 0 18px rgba(212,175,55,.35); }
.mq-hollywood .mast a:has(b) { color: inherit; text-shadow: none; }
.mq-hollywood .pinned { background: rgba(13,13,13,.9); }
.mq-hollywood .linkbtn {
  background: none; border: 0; padding: 10px 2px; min-height: 44px; cursor: pointer;
  font: inherit; font-size: var(--mq-t-sm); color: var(--mq-ink-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.mq-hollywood .linkbtn:hover { color: var(--mq-ink); }

/* --- Glass: the panels on every agent screen get the orbs' finish. --- */
.mq-hollywood :is(.panel, .mq-panel, .subnote, .pickrow) {
  background-color: rgba(26,24,20,.62);
  background-image: radial-gradient(130% 70% at 15% 0%, rgba(255,250,240,.13), transparent 55%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(255,240,207,.16);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.35);
}

/* --- Buttons: a shine on top, like an orb. Solid is cream with dark type;
   gold stays the one action that starts work. --- */
.mq-hollywood :is(.mq-btn--solid, .mq-btn--gold, .addbtn, .subcta) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(0,0,0,.35);
  border-radius: 8px;
}
.mq-hollywood .mq-btn { border-radius: 8px; }
.mq-hollywood .mq-btn--solid:hover { background-color: var(--mq-white); color: var(--mq-ink-reverse); }
.mq-hollywood .mq-btn--gold { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 18px rgba(212,175,55,.45); }
.mq-hollywood .mq-btn--gold:hover { background-color: var(--mq-bulb); border-color: var(--mq-bulb); color: var(--mq-ink-reverse); }
.mq-hollywood .mq-input, .mq-hollywood .field, .mq-hollywood input:not([type=checkbox]):not([type=radio]), .mq-hollywood textarea, .mq-hollywood select {
  border-radius: 8px;
}

/* --- Home: each listing is a white ticket with a gold stub. Inside the
   ticket the tokens flip back to ink on paper, so every line in it reads. --- */
.mq-hollywood.mq-home .cards .card {
  --mq-ink: #14110D; --mq-ink-muted: #534C42; --mq-ink-faint: #6E675C;
  --mq-rule: #DDD3C2; --mq-paper: #FAF6EE; --mq-paper-raised: #FFFFFF; --mq-paper-sunk: #EFE8DA;
  --mq-gold: #7A5F26; --mq-unchecked: #9A4B32; --mq-ink-reverse: #FFFFFF;
  --hair: var(--mq-rule); --stone: var(--mq-ink-muted); --stone2: var(--mq-ink-muted);
  position: relative; overflow: hidden;
  padding-left: 34px;
  color: var(--mq-ink);
  background: linear-gradient(180deg, rgba(255,253,247,.97), rgba(241,234,220,.95));
  border: 0; border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--mq-white), inset 0 -10px 22px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.45);
}
.mq-hollywood.mq-home .cards .card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(180deg, var(--mq-stub-hi), var(--mq-stub-lo));
  border-right: 2px dashed var(--mq-ticket-ink);
}
.mq-hollywood.mq-home .cards .cardwrap:first-child .card::before { box-shadow: 0 0 14px rgba(246,220,134,.9); }
.mq-hollywood.mq-home .cards .card:hover { box-shadow: inset 0 1px 0 var(--mq-white), 0 0 0 2px var(--mq-bulb), 0 0 22px rgba(255,236,200,.35); }
.mq-hollywood.mq-home .cards .card.card-done { opacity: .78; }
.mq-hollywood.mq-home .addbtn { background-color: var(--mq-gold); border-color: var(--mq-gold); color: var(--mq-ink-reverse); }

/* --- The weekly questions (Parry, 16 Oct: "build 3"). The route is shared
   with the seller, so app/report/page.js wraps only the agent's branch; the
   seller's page and the PDF stay on paper. Inside the agent's screen, the
   preview of what the seller gets is paper too, so it reads as theirs. --- */
.mq-hollywood.mq-report .bar { background: rgba(13,13,13,.92); backdrop-filter: blur(10px); }
.mq-hollywood.mq-report .tab.on { color: var(--mq-ink-reverse); }
.mq-hollywood .previewframe {
  --mq-paper: #F7F5F0; --mq-paper-raised: #FFFFFF; --mq-paper-sunk: #F0EDE6;
  --mq-ink: #14110D; --mq-ink-muted: #6B655C; --mq-ink-faint: #8C8680;
  --mq-rule: #DFD9CE; --mq-gold: #7A5F26; --mq-unchecked: #9A4B32; --mq-ink-reverse: #FFFFFF;
  --hair: var(--mq-rule); --hair2: var(--mq-ink-faint);
  --stone: var(--mq-ink-muted); --stone2: var(--mq-ink-muted);
  --bone: var(--mq-ink); --brass: var(--mq-gold); --brassDim: var(--mq-rule);
  --ink: var(--mq-paper); --ink2: var(--mq-paper-raised); --ink3: var(--mq-paper-sunk);
  --mq-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --mq-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mq-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-display: var(--mq-display); --f-ui: var(--mq-ui); --f-mono: var(--mq-mono);
  color: var(--mq-ink); font-family: var(--mq-ui);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

@media (max-width: 720px) {
  .mq-hollywood .mast { margin: 6px 6px 0; border-radius: 12px; }
  .mq-hollywood .mast b { font-size: 24px !important; }
}
@media print {
  .mq-hollywood .mast::before, .mq-hollywood .mast::after, .mq-hollywood::before { display: none; }
}