/* Lookout: twentyfifty's market monitor. Palette from twentyfifty's own site (via the 1025
   app): pine greens, sage, and one chartreuse signature that marks twentyfifty itself on
   every chart. Chartreuse is never used for text. */
:root {
  --ink: #122a24;
  --ink-soft: #3d554d;
  --muted: #5c6f68;
  --paper: #f4f5f1;
  --card: #ffffff;
  --band: #eceee9;
  --line: #dde1da;
  --accent: #40803c;
  --accent-soft: #e9f0e4;
  --pine-deep: #18433c;
  --pine: #0b3832;
  --sage: #a2cd9c;
  --chartreuse: #b7c958;
  --amber: #b06a00;
  --amber-soft: #f7ecd9;
  --rose: #9a3b52;
  --rose-soft: #f6e6ea;
  --blue: #245a7a;
  --blue-soft: #e4eef4;
  /* categories A-F */
  --cat-A: #18433c;
  --cat-B: #245a7a;
  --cat-C: #b06a00;
  --cat-D: #9a3b52;
  --cat-E: #5b4b8a;
  --cat-F: #2a7f86;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); overflow-x: clip; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--pine-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); letter-spacing: -0.01em; color: var(--pine-deep); line-height: 1.2; }
h1 { font-size: 2rem; margin: 0 0 0.35rem; font-weight: 600; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; font-weight: 600; }
h3 { font-size: 1.08rem; margin: 1.4rem 0 0.4rem; font-weight: 600; }
p { margin: 0.5em 0; }
.num, td.n, .tab { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 8px; background: #fff; padding: 6px 10px; z-index: 9; }

/* ---------------------------------------------------------------- frame */
.top { background: var(--pine); color: #fff; }
.top .in { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-height: 58px; }
.mark { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; color: #fff; text-decoration: none; position: relative; padding-bottom: 2px; }
.mark svg { position: absolute; left: 0; right: 0; bottom: -5px; width: 100%; height: 8px; overflow: visible; }
.mark small { font-family: var(--sans); font-weight: 400; font-size: 0.78rem; color: #cfe0d6; margin-left: 8px; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.nav a { color: #e3eee7; text-decoration: none; padding: 17px 10px 15px; font-size: 0.93rem; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; }
.nav a.on { color: #fff; border-bottom-color: var(--chartreuse); }
.top form { display: flex; }
.top input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 0.9rem; width: 190px; }
.top input::placeholder { color: #b9cfc3; }
main { max-width: 1240px; margin: 0 auto; padding: 28px 20px 60px; }
.foot { max-width: 1240px; margin: 0 auto; padding: 18px 20px 40px; color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--line); }
.lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 72ch; margin-bottom: 1.2rem; }
.cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.band { background: var(--band); border-radius: 10px; padding: 14px 18px; }
.rule { border-top: 1px solid var(--line); margin: 28px 0; }

/* figures strip: plain numbers, no tiles */
.figures { display: flex; flex-wrap: wrap; gap: 8px 34px; margin: 6px 0 22px; }
.figures div { font-size: 0.86rem; color: var(--muted); }
.figures b { display: block; font-family: var(--serif); font-size: 1.7rem; color: var(--pine-deep); font-weight: 600; line-height: 1.1; }

/* controls */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.seg a { padding: 6px 12px; text-decoration: none; color: var(--ink-soft); font-size: 0.9rem; border-left: 1px solid var(--line); }
.seg a:first-child { border-left: 0; }
.seg a.on { background: var(--pine-deep); color: #fff; }
.bar-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 4px 0 18px; }
form.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
input, select, button, textarea { font: inherit; }
form.filters input, form.filters select, .field { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
button, .btn { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 6px; padding: 6px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: var(--pine-deep); border-color: var(--pine-deep); color: #fff; }
.btn.quiet { background: transparent; color: var(--accent); }

/* category key */
.cat { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.cat-A { background: var(--cat-A); } .cat-B { background: var(--cat-B); } .cat-C { background: var(--cat-C); }
.cat-D { background: var(--cat-D); } .cat-E { background: var(--cat-E); } .cat-F { background: var(--cat-F); }
.key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: var(--ink-soft); margin: 8px 0 14px; }
.key button { background: none; border: 0; color: inherit; padding: 2px 0; cursor: pointer; font-size: inherit; }
.key button[aria-pressed="false"] { opacity: 0.35; }
.key .us { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--chartreuse); border: 2px solid var(--pine); margin-right: 6px; vertical-align: -1px; }

/* significance and tags */
.sig { font-size: 0.74rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.sig.High { background: var(--rose-soft); color: var(--rose); }
.sig.Medium { background: var(--amber-soft); color: var(--amber); }
.sig.Low { background: var(--band); color: var(--muted); }
.tag { font-size: 0.78rem; color: var(--ink-soft); background: var(--accent-soft); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.tag.new { background: var(--chartreuse); color: var(--pine); font-weight: 600; }

/* evidence: a claim with its quote and source */
.ev { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev .meta { font-size: 0.83rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ev .claim { margin: 4px 0; font-weight: 500; }
.ev blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--sage); color: var(--ink-soft); font-family: var(--serif); font-size: 0.97rem; }
.ev .src { font-size: 0.82rem; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- maps */
.mapwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .mapwrap { grid-template-columns: 1fr; } }
.grid5 { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(84px, auto)) 46px; gap: 3px; position: relative; }
.grid5 .cell { background: var(--card); border-radius: 4px; padding: 5px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; position: relative; }
.grid5 .cell.q-hi { background: #f1f6ee; }
.grid5 .ylab, .grid5 .xlab { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
.grid5 .ylab { writing-mode: vertical-rl; transform: rotate(180deg); }
.grid5 .xlab { padding: 4px 4px 0; align-items: flex-start; }
.chip { font-size: 0.74rem; line-height: 1.25; padding: 2px 6px 2px 5px; border-radius: 4px; background: var(--paper); color: var(--ink); text-decoration: none; border-left: 4px solid var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip:hover { background: var(--accent-soft); color: var(--ink); }
.chip.c-A { border-left-color: var(--cat-A); } .chip.c-B { border-left-color: var(--cat-B); } .chip.c-C { border-left-color: var(--cat-C); }
.chip.c-D { border-left-color: var(--cat-D); } .chip.c-E { border-left-color: var(--cat-E); } .chip.c-F { border-left-color: var(--cat-F); }
.chip.us { background: var(--chartreuse); color: var(--pine); font-weight: 700; border-left-color: var(--pine); }
.chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 4px; vertical-align: 1px; }
.axis-title { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.reading { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); border-left: 4px solid var(--chartreuse); padding: 4px 0 4px 14px; margin: 0 0 18px; }
.hidecat-A .c-A, .hidecat-B .c-B, .hidecat-C .c-C, .hidecat-D .c-D, .hidecat-E .c-E, .hidecat-F .c-F { display: none; }
svg text { font-family: var(--sans); }
.arrowmap .firm { cursor: pointer; }
.arrowmap .firm:hover line, .arrowmap .firm:focus line { stroke-width: 3; }
.arrowmap .firm:hover text, .arrowmap .firm:focus text { display: block; }

/* --------------------------------------------------------------- matrix */
.mx { border-collapse: separate; border-spacing: 2px; font-size: 0.84rem; }
.mx th { font-weight: 600; color: var(--ink-soft); text-align: left; padding: 4px 6px; vertical-align: bottom; background: var(--paper); position: sticky; top: 0; z-index: 1; }
.mx th.rot { height: 130px; white-space: nowrap; padding: 0 0 6px; width: 46px; background: transparent; overflow: visible; }
.mx th.rot div { transform: translate(14px, 0) rotate(-50deg); transform-origin: left bottom; width: 30px; }
.mx td { padding: 0; }
.mx td.f { padding: 3px 10px 3px 6px; white-space: nowrap; background: var(--card); border-radius: 3px; }
.mx td.f a { color: var(--ink); text-decoration: none; }
.mx td.f a:hover { text-decoration: underline; }
.mx td.v a, .mx td.v span { display: block; width: 46px; height: 26px; line-height: 26px; text-align: center; border-radius: 3px; text-decoration: none; font-variant-numeric: tabular-nums; }
.mx tr.us td.f { background: var(--chartreuse); font-weight: 700; }
.mx tr.us td.f a { color: var(--pine); }
.mx tr.mean td.f { background: transparent; color: var(--muted); font-style: italic; }
.mx tr.gap td { height: 10px; }
.mx td.cathead { padding: 14px 6px 4px; font-weight: 600; color: var(--pine-deep); font-family: var(--serif); }
.scroll { overflow-x: auto; }

/* ------------------------------------------------------------ direction */
.dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
@media (max-width: 900px) { .dirs { grid-template-columns: 1fr; } }
.rank { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.rank td { padding: 2px 4px; vertical-align: middle; }
.rank td.f { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.rank td.f a { color: var(--ink); text-decoration: none; }
.rank tr.us td.f { font-weight: 700; }
.rank tr.us td.f a { background: var(--chartreuse); color: var(--pine); padding: 0 5px; border-radius: 3px; }
.rank .track { position: relative; height: 12px; background: var(--paper); border-radius: 2px; }
.rank .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }

/* ------------------------------------------------------------ scorecard */
.sc-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.profile { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 0.9rem; margin: 10px 0; }
.profile dt { color: var(--muted); }
.profile dd { margin: 0; }
.scores { width: 100%; border-collapse: collapse; }
.scores td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.scores td.ax { width: 170px; font-weight: 600; color: var(--pine-deep); }
.scores td.scale { width: 220px; }
.scores .lvl { font-weight: 600; }
.scores .why { color: var(--ink-soft); font-size: 0.88rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
ul.plain { padding-left: 1.1em; margin: 0.4em 0; }
ul.plain li { margin: 0.25em 0; }
ul.svc { columns: 2 280px; column-gap: 32px; }
ul.svc li { break-inside: avoid; }
.implication { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 0 8px 8px 0; font-family: var(--serif); font-size: 1.02rem; }
.hypo { background: var(--amber-soft); border-left: 4px solid var(--amber); padding: 10px 14px; border-radius: 0 8px 8px 0; }
details.dim { border-bottom: 1px solid var(--line); padding: 8px 0; }
details.dim summary { cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) 180px 60px; gap: 10px; align-items: center; list-style: none; }
details.dim summary::-webkit-details-marker { display: none; }
details.dim summary .n { color: var(--muted); text-align: right; font-size: 0.85rem; }
details.dim[open] summary { margin-bottom: 4px; }

/* --------------------------------------------------------------- briefs */
.md { max-width: 80ch; }
.md h1 { font-size: 1.6rem; } .md h2 { font-size: 1.25rem; }
.md blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--sage); color: var(--ink-soft); font-family: var(--serif); }
.md table { border-collapse: collapse; font-size: 0.9rem; margin: 10px 0; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.md th { background: var(--accent-soft); color: var(--pine-deep); }
.md img { display: none; }
.side-nav { position: sticky; top: 16px; font-size: 0.9rem; }
.side-nav a { display: block; padding: 4px 0; text-decoration: none; color: var(--ink-soft); }
.side-nav a.on { color: var(--pine-deep); font-weight: 700; }
pre.page { white-space: pre-wrap; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; font-family: var(--serif); font-size: 0.97rem; line-height: 1.6; max-width: 90ch; }
table.list { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.list th, table.list td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { color: var(--muted); font-weight: 600; font-size: 0.82rem; }

/* ------------------------------------------------------------------ ask */
.chat { max-width: 860px; }
.turn { margin: 0 0 18px; }
.turn.q { font-family: var(--serif); font-size: 1.12rem; color: var(--pine-deep); }
.turn.a { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.turn .tools { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.ask-form { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; }
.ask-form textarea { flex: 1; min-height: 48px; max-height: 200px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.thinking { color: var(--muted); font-style: italic; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 24px; }
.suggest button { background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); font-size: 0.88rem; text-align: left; }
.suggest button:hover { border-color: var(--accent); color: var(--pine-deep); background: var(--card); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .top, .foot, .bar-controls, form.filters, .key button { display: none; } body { background: #fff; } }