/* Radar workstation: docked panels in the spirit of a trading terminal.
   Layout: toolbar, a 2-column mosaic (watchlist left, news + radar + topic
   monitor right), status bar. Dark by default; html[data-theme=light] swaps tokens. */
:root {
  --bg: #0e0f11;
  --gutter: #000000;
  --bar: #17191c;
  --panel: #131518;
  --head: #202328;
  --colhead: #1a1c20;
  --line: #2c3036;
  --line2: #3a3f46;
  --rowline: #1f2226;
  --fg: #e3e5e8;
  --sub: #b4b8be;
  --muted: #878c94;
  --input: #0b0c0e;
  --sel: #163d72;
  --sel-fg: #ffffff;
  --hover: #1a1e24;
  --link: #5ea1ff;
  --ring: #2a2e34;
  --disc: #0f1113;
  --track: #24272c;
  --why: #1a1d21;
  --hot: #ff4d4f;
  --warm: #ffa940;
  --low: #878c94;
  --brand: #d81222;
  --sweep: 255, 159, 26;
  --sans: Barlow, "Segoe UI", Tahoma, sans-serif;
  --cond: "Barlow Semi Condensed", Barlow, "Segoe UI", sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f4f6; --gutter: #d9dce1; --bar: #ffffff; --panel: #ffffff; --head: #e9ecf0; --colhead: #f5f6f8;
  --line: #c9ced6; --line2: #b8bec8; --rowline: #eceef1; --fg: #111418; --sub: #3d434c; --muted: #646b75;
  --input: #ffffff; --sel: #d6e6ff; --sel-fg: #0b1f3a; --hover: #f2f5f9; --link: #0b5bd3; --ring: #d3d8df;
  --disc: #fafbfc; --track: #e6e9ee; --why: #f5f6f8; --hot: #c4141c; --warm: #b25e00; --low: #646b75;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.4 var(--sans); }
a { color: var(--link); }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--link); outline-offset: 1px; }
.muted { color: var(--muted); font-weight: 500; }
.app { min-height: 100%; display: flex; flex-direction: column; }

/* ── toolbar ─────────────────────────────────────────────── */
.toolbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; background: var(--bar); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg); }
.logo { background: var(--brand); color: #ffffff; font: 600 13px/1 var(--cond); letter-spacing: 0.08em; padding: 5px 7px; }
.brand-sub { font-size: 12px; color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.tabs a { padding: 4px 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current="page"] { color: var(--fg); background: var(--panel); border-color: var(--line); }
.filter { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.filter input { width: 240px; max-width: 46vw; padding: 4px 8px; border: 1px solid var(--line2); border-radius: 0; background: var(--input); color: var(--fg); font: 12.5px var(--sans); }
.filter input:focus { outline: 1px solid var(--link); border-color: var(--link); }
body:not(:has(#rows)) .filter { display: none; }
.tool-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tool-right a { color: var(--fg); text-decoration: none; }
.tool-right a:hover, .tool-right a[aria-current="page"] { color: var(--link); }
.tool-right form { margin: 0; }
.tool-right button { font: 500 12px var(--sans); color: var(--muted); background: transparent; border: 1px solid var(--line2); border-radius: 0; padding: 2px 8px; cursor: pointer; }
.tool-right button:hover { color: var(--fg); border-color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 5px; }
.live i, .statusbar .dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--sweep)); display: inline-block; }
.live i { animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ── desk + panels ───────────────────────────────────────── */
.desk { flex: 1; padding: 3px; background: var(--gutter); display: flex; flex-direction: column; gap: 3px; }
.panel { background: var(--panel); border: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 4px 8px; background: var(--head); border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font: 600 12.5px/1.4 var(--cond); letter-spacing: 0.05em; text-transform: uppercase; }
.panel-head h2 .muted { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.panel-head a { font-size: 12px; text-decoration: none; }
.head-tools { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.head-tools button { font: 500 12px var(--sans); color: var(--link); background: none; border: none; padding: 0; cursor: pointer; }
.p-solo { max-width: 980px; }

.subtabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px; background: var(--panel); border: 1px solid var(--line); }
.subtabs a { padding: 3px 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.subtabs a:hover { color: var(--fg); }
.subtabs a[aria-current="page"] { color: var(--fg); background: var(--head); border-color: var(--line); }
.mosaic { flex: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 3px; }
.p-watch { grid-row: 1 / span 3; }
.p-news { grid-column: 2; }
.p-radar { grid-column: 2; }
.p-mon { grid-column: 2; }
@media (min-width: 1500px) {
  .mosaic { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; }
  .p-watch { grid-row: 1 / span 2; }
  .p-news { grid-column: 2; grid-row: 1 / span 2; }
  .p-radar { grid-column: 3; grid-row: 1; }
  .p-mon { grid-column: 3; grid-row: 2; }
}

/* ── watchlist grid ──────────────────────────────────────── */
.w-head, .wrow { display: grid; grid-template-columns: 44px 104px 64px minmax(0, 1fr) 92px 32px; column-gap: 10px; align-items: center; padding: 0 8px; }
.w-head { padding-block: 5px; background: var(--colhead); border-bottom: 1px solid var(--line); font: 600 11.5px var(--sans); letter-spacing: 0.04em; color: var(--muted); }
.w-head span:first-child, .w-head span:nth-child(5), .w-head span:nth-child(6) { text-align: right; }
.wrow { padding-block: 6px; border-bottom: 1px solid var(--rowline); color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums; }
.wrow:hover { background: var(--hover); }
.wrow.sel { background: var(--sel); color: var(--sel-fg); }
.wrow.sel span { color: var(--sel-fg) !important; }
.c-rel { text-align: right; font-weight: 600; }
.c-topic, .c-ctry, .c-time, .c-src { color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-time, .c-src { text-align: right; }
.also { margin-top: auto; padding: 8px; border-top: 1px solid var(--line); }
.also h3 { margin: 0 0 4px; font: 600 12px var(--cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.also p { margin: 0; padding: 3px 0; font-size: 12.5px; color: var(--sub); }
.also p::before { content: "› "; color: var(--muted); }
.pager { display: flex; justify-content: space-between; padding: 6px 8px; border-top: 1px solid var(--line); font-size: 12px; }
.pager a { text-decoration: none; }

/* relevance colours */
.rel-hot { color: var(--hot); } .rel-warm { color: var(--warm); } .rel-low, .rel-none { color: var(--low); }
.rel-bg-hot { background: var(--hot); } .rel-bg-warm { background: var(--warm); } .rel-bg-low, .rel-bg-none { background: var(--low); }
.rel-border-hot { border-left-color: var(--hot) !important; } .rel-border-warm { border-left-color: var(--warm) !important; }

/* ── news ────────────────────────────────────────────────── */
.news { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fields { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; font-variant-numeric: tabular-nums; }
.fields div { display: flex; gap: 5px; }
.fields dt { color: var(--muted); }
.fields dd { margin: 0; font-weight: 600; }
.fields dd a { color: var(--fg); text-decoration: none; }
.fields dd a:hover { color: var(--link); }
.headline { margin: 0; font: 600 20px/1.3 var(--sans); letter-spacing: -0.005em; text-wrap: balance; }
.why { margin: 0; padding: 6px 10px; background: var(--why); border-left: 2px solid var(--low); font-size: 13px; }
.summary { margin: 0; font-size: 14.5px; line-height: 1.55; max-width: 72ch; }
.details p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--sub); max-width: 72ch; }
.sources { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; border-top: 1px solid var(--rowline); font-size: 12.5px; }
.sources span { color: var(--muted); }
.sources a { overflow-wrap: anywhere; }
.from { margin: 0; font-size: 12px; color: var(--muted); }

/* ── radar ───────────────────────────────────────────────── */
.p-radar > :not(.panel-head) { margin-inline: auto; }
.scope { position: relative; width: min(100% - 20px, 280px); aspect-ratio: 1; margin-top: 10px; }
.scope .ring { position: absolute; border-radius: 50%; border: 1px solid var(--ring); }
.scope .r1 { inset: 4%; background: var(--disc); } .scope .r2 { inset: 16%; } .scope .r3 { inset: 28%; } .scope .r4 { inset: 40%; }
.scope .cross { position: absolute; background: var(--ring); }
.scope .cross.h { left: 4%; right: 4%; top: 50%; height: 1px; }
.scope .cross.v { top: 4%; bottom: 4%; left: 50%; width: 1px; }
.scope .sweep { position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; animation: sweep 5s linear infinite;
  background: conic-gradient(from 0deg, rgba(var(--sweep), 0.7) 0deg 0.8deg, rgba(var(--sweep), 0.1) 0.8deg 30deg, rgba(var(--sweep), 0) 30deg); }
@keyframes sweep { to { transform: rotate(1turn); } }
.blip { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 160ms ease, transform 160ms ease; }
.blip:hover { transform: translate(-50%, -50%) scale(1.4); }
.blip.sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--link); }
.blip.dim { opacity: 0.18; }
.scope-note { margin: 8px auto 10px; font-size: 11.5px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .scope .sweep, .live i { animation: none; } }

/* ── topic monitor ───────────────────────────────────────── */
.mon-head, .mon-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px 40px 40px; column-gap: 8px; align-items: center; padding: 5px 8px; font-variant-numeric: tabular-nums; }
.mon-head { background: var(--colhead); border-bottom: 1px solid var(--line); font: 600 11.5px var(--sans); color: var(--muted); }
.mon-head span:not(:first-child), .mon-row span:not(:first-child) { text-align: right; }
.mon-row { border-bottom: 1px solid var(--rowline); color: var(--fg); text-decoration: none; }
.mon-row:hover { background: var(--hover); }
.mon-row.sel { background: var(--sel); color: var(--sel-fg); }
.mon-row.sel span { color: var(--sel-fg); }
.mon-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mon-name .bar { display: block; height: 3px; background: var(--track); }
.mon-name .bar i { display: block; height: 3px; }

/* ── conference deadlines ────────────────────────────────── */
.conf { display: flex; flex-direction: column; gap: 3px; max-width: 1280px; }
.cf-row { display: grid; grid-template-columns: 62px 150px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 7px 8px; border-bottom: 1px solid var(--rowline); font-variant-numeric: tabular-nums; }
.cf-row:hover { background: var(--hover); }
.cf-head { padding-block: 5px; background: var(--colhead); border-bottom: 1px solid var(--line); font: 600 11.5px var(--sans); letter-spacing: 0.04em; color: var(--muted); }
.cf-head:hover { background: var(--colhead); }
.cf-left { font-weight: 600; text-align: right; }
.cf-row small { display: block; color: var(--muted); font-size: 11.5px; }
.cf-name a { color: var(--fg); font-weight: 600; text-decoration: none; }
.cf-name a:hover { color: var(--link); }
.cf-dates, .cf-place { color: var(--sub); }
.cf-est .cf-dl, .cf-est .cf-name a, .cf-est .cf-name { color: var(--sub); font-style: italic; }
.cf-est .cf-name a { font-weight: 500; }

/* ── index, calendar, empty ──────────────────────────────── */
.index { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.index a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--rowline); border-right: 1px solid var(--rowline); color: var(--fg); text-decoration: none; font-size: 13.5px; }
.index a:hover { background: var(--hover); }
.index b { font-weight: 600; color: var(--muted); margin-right: 4px; }
.cal-nav { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.cal-nav a { text-decoration: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dow { padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--colhead); border-bottom: 1px solid var(--line); }
.day { min-height: 54px; padding: 4px 8px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--rowline); border-bottom: 1px solid var(--rowline); color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.day.has { color: var(--fg); }
.day.has:hover { background: var(--hover); }
.day b { align-self: flex-end; font-weight: 600; }
.day.today > span:first-child { color: var(--link); font-weight: 600; }
.empty { max-width: 640px; }
.empty p, .empty-inline { margin: 0; padding: 10px; color: var(--muted); }

/* ── forms: sign in, invitation, account, admin ─────────── */
.intro { padding: 10px 6px; }
.kicker { margin: 0; font: 600 12px var(--cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.intro h1 { margin: 2px 0; font: 600 20px var(--sans); }
.meta { margin: 0; color: var(--muted); }
.auth { max-width: 440px; margin: 24px auto; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); }
.auth h1 { margin: 2px 0 6px; font: 600 20px var(--sans); }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.panels .auth { margin: 0; max-width: none; }
.auth-intro { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form.row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.form.row .field { flex: 1 1 220px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field span { font: 600 11.5px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.field small { color: var(--muted); font-size: 12px; }
.field input, .field select, .copy { font: 14px var(--sans); padding: 6px 8px; border: 1px solid var(--line2); border-radius: 0; background: var(--input); color: var(--fg); width: 100%; }
.field input:focus, .field select:focus, .copy:focus { outline: 1px solid var(--link); border-color: var(--link); }
.copy { font-size: 12.5px; margin-top: 6px; }
.copy.small { font-size: 12px; padding: 3px 6px; margin: 0; }
.btn { font: 600 13px var(--sans); padding: 6px 14px; background: var(--link); color: #ffffff; border: 1px solid var(--link); border-radius: 0; cursor: pointer; align-self: flex-start; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line2); }
.btn.small { padding: 2px 8px; font-size: 12px; }
.form-error { margin: 8px 0; padding: 6px 10px; border-left: 2px solid var(--hot); background: var(--why); color: var(--hot); font-size: 13px; }
.form-notice { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--link); background: var(--why); font-size: 13px; }
.group { background: var(--panel); border: 1px solid var(--line); padding: 10px; margin-top: 3px; }
.group > h2 { margin: 0 0 8px; font: 600 12.5px var(--cond); letter-spacing: 0.05em; text-transform: uppercase; }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font: 600 11.5px var(--sans); color: var(--muted); padding: 5px 8px; background: var(--colhead); border-bottom: 1px solid var(--line); }
td { padding: 6px 8px; border-bottom: 1px solid var(--rowline); vertical-align: middle; }
td small { color: var(--muted); }
td form { margin: 0; }
tr.off td { color: var(--muted); }

/* ── status bar ──────────────────────────────────────────── */
.statusbar { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 4px 10px; background: var(--bar); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.statusbar span { display: inline-flex; align-items: center; gap: 5px; }
.statusbar .push { margin-left: auto; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .p-watch, .p-news, .p-radar, .p-mon { grid-column: 1; grid-row: auto; }
  .panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cf-row { grid-template-columns: 54px minmax(0, 1fr); row-gap: 2px; }
  .cf-head { display: none; }
  .cf-dl, .cf-name, .cf-dates, .cf-place { grid-column: 2; }
  .w-head, .wrow { grid-template-columns: 38px minmax(0, 1fr) 30px; }
  .w-head span:nth-child(2), .w-head span:nth-child(3), .w-head span:nth-child(5), .c-topic, .c-ctry, .c-time { display: none; }
  .c-head { white-space: normal; }
  .filter input { width: 100%; }
  .filter { flex: 1 1 100%; }
  .statusbar .push { margin-left: 0; }
}
