/* The portal's LAYOUT. Colour and type come from tokens.css, which is generated from
   scripts/render_trend_html.py so the index and the reports it lists stay one family.
   Nothing in this file should name a colour. */

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:inherit}

.wrap{max-width:820px; margin:0 auto;
  padding:clamp(28px,5vw,64px) clamp(18px,4vw,40px) 88px;
  display:flex; flex-direction:column; min-height:100vh}

/* -- masthead ------------------------------------------------------------- */
.masthead{margin-bottom:clamp(32px,5vw,52px)}
.mark{display:inline-block; margin-bottom:28px; color:var(--ink)}
.logo{height:22px; width:auto; display:block}
.eyebrow{margin:0 0 10px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
h1{margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,5vw,42px); line-height:1.1; letter-spacing:-.02em}
.standfirst{margin:12px 0 0; color:var(--ink-2); max-width:52ch}
.backlink{margin:0 0 28px; font-size:14px}
.backlink a{color:var(--ink-3); text-decoration:none}
.backlink a:hover{color:var(--accent)}

/* -- listings ------------------------------------------------------------- */
.listing{margin-bottom:clamp(30px,5vw,48px)}
.listing h2{display:flex; align-items:baseline; gap:10px;
  margin:0 0 4px; font-family:var(--font-mono); font-weight:500;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.count{font-size:11px; color:var(--ink-3); opacity:.7}
.listing .note{margin:0 0 14px; font-size:13px; color:var(--ink-3); max-width:56ch}
.listing h2 + .row{margin-top:14px}
.empty{margin:14px 0 0; padding:18px 0; font-size:14px; color:var(--ink-3);
  border-top:1px solid var(--rule)}

.row{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 2px; border-top:1px solid var(--rule); text-decoration:none;
  transition:border-color .12s ease, padding-left .12s ease}
.row:last-of-type{border-bottom:1px solid var(--rule)}
.row:hover{border-top-color:var(--rule-2); padding-left:8px}
.row:hover .name{color:var(--accent)}
.row .name{font-family:var(--font-display); font-weight:500; font-size:17px;
  letter-spacing:-.01em; transition:color .12s ease}
.row .meta{display:flex; gap:14px; flex-shrink:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3)}
.row .latest,.row .period{color:var(--ink-2)}
.row .cut.missing{opacity:.55}
.listing.ended .row .name{color:var(--ink-3)}
.listing.ended .row:hover .name{color:var(--ink-2)}

/* -- the client share link ------------------------------------------------ */
.share{margin-top:8px; padding:20px; background:var(--surface); border-radius:8px}
.share h2{margin:0 0 4px; font-family:var(--font-mono); font-weight:500;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.share .note{margin:0 0 12px; font-size:13px; color:var(--ink-3); max-width:56ch}
.share input{width:100%; padding:10px 12px; border:1px solid var(--rule-2);
  border-radius:6px; background:var(--ground); color:var(--ink);
  font-family:var(--font-mono); font-size:12px}

/* -- the gate ------------------------------------------------------------- */
.gate{max-width:320px}
.gate label{display:block; margin-bottom:8px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.gate input{width:100%; padding:11px 13px; border:1px solid var(--rule-2);
  border-radius:6px; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:15px}
.gate input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.gate button{margin-top:14px; padding:11px 22px; border:0; border-radius:6px;
  background:var(--ink); color:var(--ground); cursor:pointer;
  font-family:var(--font-display); font-weight:500; font-size:15px}
.gate button:hover{background:var(--accent)}
.gate .error{margin:10px 0 0; font-size:13px; color:var(--crit)}

/* -- colophon ------------------------------------------------------------- */
.colophon{margin-top:auto; padding-top:32px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3)}
.colophon form{margin:0}
.colophon button{padding:0; border:0; background:none; cursor:pointer;
  font:inherit; letter-spacing:inherit; color:var(--ink-3)}
.colophon button:hover{color:var(--accent)}

@media (max-width:560px){
  .row{flex-direction:column; gap:6px}
  .row .meta{gap:12px}
}