/* Hollywood Signal components. Needs tokens/dist/tokens.css.
   Stable components use tokens only: check/check.py fails on a raw colour above the LABS line.
   Add .hs-night to any container to switch it to the night palette. */

/* ---------- Surfaces ---------- */
.hs-surface{background:var(--hs-ground);color:var(--hs-text);font-family:var(--hs-font-sans);font-size:var(--hs-size-base);line-height:1.6;-webkit-font-smoothing:antialiased}
.hs-night{background:var(--hs-ground);color:var(--hs-text)}
.hs-panel{background:var(--hs-panel);border-radius:var(--hs-radius-card);padding:var(--hs-space-5)}

/* ---------- Masthead: logo left, edition label right ---------- */
.hs-masthead{display:flex;align-items:center;justify-content:space-between;gap:var(--hs-space-5);padding-bottom:var(--hs-space-4);border-bottom:1px solid var(--hs-rule)}
.hs-masthead img,.hs-masthead svg{display:block;height:28px;width:auto}
.hs-masthead__meta{font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--hs-muted);text-align:right}

/* ---------- Title block ---------- */
.hs-kicker{display:inline-flex;align-items:center;gap:var(--hs-space-2);font-family:var(--hs-font-mono);font-weight:500;font-size:var(--hs-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--hs-accent)}
.hs-kicker::before{content:"";width:.7em;height:.7em;background:currentColor;flex:none}  /* the mark's centre square */
.hs-headline{font-family:var(--hs-font-sans);font-weight:400;font-size:var(--hs-size-3xl);line-height:1.05;letter-spacing:-.03em;color:var(--hs-ink);margin:var(--hs-space-3) 0 0}
.hs-headline--display{font-size:var(--hs-size-4xl);line-height:1.02}
.hs-standfirst{font-size:var(--hs-size-md);line-height:1.5;color:var(--hs-text);max-width:38em;margin:var(--hs-space-4) 0 0}
.hs-byline{font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--hs-muted)}

/* ---------- Rules ---------- */
.hs-rule{border:0;border-top:1px solid var(--hs-rule);margin:var(--hs-space-6) 0}
.hs-rule--signal{border-top:3px solid var(--hs-accent);width:var(--hs-space-8)}  /* counts as the one accent */

/* ---------- Section head (The Watchlist, The Ledger, Market Signals) ---------- */
.hs-section{display:flex;align-items:baseline;gap:var(--hs-space-3);border-top:1px solid var(--hs-ink);padding-top:var(--hs-space-3);margin:var(--hs-space-7) 0 var(--hs-space-4)}
.hs-section__n{font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);color:var(--hs-muted)}
.hs-section__t{font-weight:500;font-size:var(--hs-size-lg);letter-spacing:-.01em;color:var(--hs-ink);margin:0}

/* ---------- Buttons ---------- */
.hs-button{display:inline-flex;align-items:center;gap:var(--hs-space-2);font:500 var(--hs-size-sm)/1 var(--hs-font-sans);padding:12px 20px;border-radius:var(--hs-radius-pill);background:var(--hs-accent);color:var(--hs-on-accent);text-decoration:none;border:1px solid var(--hs-accent)}
.hs-button--ghost{background:transparent;color:var(--hs-ink);border-color:var(--hs-rule)}

/* ---------- Property card: one adaptation candidate ---------- */
.hs-property{display:grid;grid-template-columns:1fr auto;gap:var(--hs-space-2) var(--hs-space-5);padding:var(--hs-space-5);background:var(--hs-panel);border-radius:var(--hs-radius-card)}
.hs-property__format{grid-column:1/-1;font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--hs-muted)}
.hs-property__title{font-size:var(--hs-size-xl);line-height:1.15;letter-spacing:-.02em;color:var(--hs-ink);margin:0}
.hs-property__by{color:var(--hs-muted);font-size:var(--hs-size-sm);margin-top:2px}
.hs-property dl{grid-column:1/-1;display:grid;grid-template-columns:9.5em 1fr;gap:var(--hs-space-1) var(--hs-space-4);margin:var(--hs-space-3) 0 0;font-size:var(--hs-size-sm)}
.hs-property dt{font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--hs-muted);padding-top:2px}
.hs-property dd{margin:0;color:var(--hs-text)}

/* ---------- Grade: square, like the mark ---------- */
.hs-grade{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 8px;box-sizing:border-box;border:2px solid var(--hs-ink);font:500 var(--hs-size-lg)/1 var(--hs-font-mono);color:var(--hs-ink);font-variant-numeric:tabular-nums}
.hs-grade--top{background:var(--hs-accent);border-color:var(--hs-accent);color:var(--hs-on-accent)}  /* A+ only; counts as the accent */

/* ---------- Status square: filled = optioned, hollow = tracking, dash = passed ---------- */
.hs-status{display:inline-flex;align-items:center;gap:var(--hs-space-2);font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--hs-text)}
.hs-status::before{content:"";width:10px;height:10px;box-sizing:border-box;border:2px solid var(--hs-ink);flex:none}
.hs-status--optioned::before{background:var(--hs-ink)}
.hs-status--passed::before{border:0;border-top:2px solid var(--hs-muted);height:2px}
.hs-status--passed{color:var(--hs-muted)}

/* ---------- Tables: watchlist and ledger ---------- */
.hs-table{width:100%;border-collapse:collapse;font-size:var(--hs-size-sm)}
.hs-table th{font-family:var(--hs-font-mono);font-weight:500;font-size:var(--hs-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--hs-muted);text-align:left;padding:0 var(--hs-space-3) var(--hs-space-2) 0;border-bottom:1px solid var(--hs-ink)}
.hs-table td{padding:var(--hs-space-3) var(--hs-space-3) var(--hs-space-3) 0;border-bottom:1px solid var(--hs-rule);vertical-align:top;color:var(--hs-text)}
.hs-table td.hs-num,.hs-table th.hs-num{font-family:var(--hs-font-mono);font-variant-numeric:tabular-nums;text-align:right}
.hs-table strong{font-weight:500;color:var(--hs-ink)}

/* ---------- Market signal: numbered item ---------- */
.hs-signal{display:grid;grid-template-columns:3em 1fr;gap:var(--hs-space-3);padding:var(--hs-space-4) 0;border-bottom:1px solid var(--hs-rule)}
.hs-signal__n{font:500 var(--hs-size-sm)/1.5 var(--hs-font-mono);color:var(--hs-muted)}
.hs-signal__t{margin:0;color:var(--hs-text)}
.hs-signal__t strong{font-weight:500;color:var(--hs-ink)}

/* ---------- Figure: one number that matters ---------- */
.hs-figure{display:flex;flex-direction:column;gap:var(--hs-space-1)}
.hs-figure__v{font:400 var(--hs-size-3xl)/1 var(--hs-font-mono);letter-spacing:-.03em;color:var(--hs-ink);font-variant-numeric:tabular-nums}
.hs-figure__l{font-family:var(--hs-font-mono);font-size:var(--hs-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--hs-muted)}
.hs-figure__src{font-size:var(--hs-size-xs);color:var(--hs-muted)}

/* ---------- Quote ---------- */
.hs-quote{margin:0;padding-left:var(--hs-space-5);border-left:1px solid var(--hs-ink);font-size:var(--hs-size-xl);line-height:1.3;letter-spacing:-.015em;color:var(--hs-ink)}
.hs-quote cite{display:block;margin-top:var(--hs-space-3);font:normal var(--hs-size-xs)/1.4 var(--hs-font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--hs-muted)}

/* ---------- Frame: the viewfinder brackets around an image or a key figure ---------- */
.hs-frame{position:relative;padding:var(--hs-space-4);--hs-arm:22%;--hs-stroke:3px}
.hs-frame::before,.hs-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--hs-ink),var(--hs-ink)) top left/var(--hs-arm) var(--hs-stroke),
    linear-gradient(var(--hs-ink),var(--hs-ink)) top left/var(--hs-stroke) var(--hs-arm),
    linear-gradient(var(--hs-ink),var(--hs-ink)) top right/var(--hs-arm) var(--hs-stroke),
    linear-gradient(var(--hs-ink),var(--hs-ink)) top right/var(--hs-stroke) var(--hs-arm);
  background-repeat:no-repeat}
.hs-frame::after{transform:scaleY(-1)}
.hs-frame img{display:block;width:100%;height:auto}

/* ---------- Tags and colophon ---------- */
.hs-tag{display:inline-block;font-family:var(--hs-font-sans);font-size:var(--hs-size-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--hs-text);padding:4px 10px;border:1px solid var(--hs-rule);border-radius:var(--hs-radius-pill)}
.hs-colophon{font-size:var(--hs-size-xs);color:var(--hs-muted);border-top:1px solid var(--hs-rule);padding-top:var(--hs-space-3);display:flex;justify-content:space-between;gap:var(--hs-space-4)}

/* ---------- LABS: proposed, not for live work until promoted above ---------- */
/* Lock-on: brackets close in on the centre square. For motion end cards and loading states. */
@keyframes hs-labs-lock{from{transform:scale(1.35);opacity:0}to{transform:scale(1);opacity:1}}
.hs-labs-lockon .hs-labs-bracket{transform-origin:50% 50%;animation:hs-labs-lock var(--hs-dur-lock) var(--hs-ease-lock) both}
/* Duotone: tints a sourced photograph slate-and-blue for covers. Needs a rights check per image. */
.hs-labs-duotone{position:relative;background:#181C24}
.hs-labs-duotone img{mix-blend-mode:luminosity;opacity:.85;display:block;width:100%}
.hs-labs-duotone::after{content:"";position:absolute;inset:0;background:#3250F5;mix-blend-mode:color;opacity:.55}