:root {
  --bg: #0d1117;
  --panel: #151b23;
  --panel-2: #1b232d;
  --line: #263041;
  --line-soft: #1e2734;
  --txt: #e3e9f2;
  --txt-dim: #8b97a8;
  --txt-mute: #5f6b7d;
  --accent: #4c9aff;
  --accent-solid: #4c9aff;
  --on-accent: #fff;
  --good: #3fb950;
  --bad: #f85149;
  --warn: #d29922;
  --row-hover: #172030;
  --note-bg: #1d1a10;
  --note-line: #3d3418;
  --note-txt: #e0c877;
  --grp-tint: rgba(76, 154, 255, .07);
  --shadow: rgba(0, 0, 0, .45);
  --backdrop: rgba(0, 0, 0, .6);
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  --bg: #fff;
  --panel: #fff;
  --panel-2: #f4f6f9;
  --line: #d5dce5;
  --line-soft: #e9edf2;
  --txt: #000;
  --txt-dim: #4b5563;
  --txt-mute: #6b7280;
  /* Ticker blue is deliberately unchanged across themes. A darker shade is
     used for solid buttons, where white sits on top of it. */
  --accent: #4c9aff;
  --accent-solid: #1c6fd6;
  --on-accent: #fff;
  --good: #17803d;
  --bad: #c62430;
  --warn: #92620a;
  --row-hover: #eef4fd;
  --note-bg: #fdf6e3;
  --note-line: #e6d5a8;
  --note-txt: #6b4e08;
  --grp-tint: rgba(76, 154, 255, .1);
  --shadow: rgba(15, 23, 42, .18);
  --backdrop: rgba(15, 23, 42, .35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 12px; }

.topbar h1 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.sub { margin: 1px 0 0; font-size: 11.5px; color: var(--txt-dim); }
.topbar-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }

/* Navigation reads as a link, not a control, so the one solid button in the
   header is unambiguously the primary action. */
.navlink {
  color: var(--txt-dim);
  text-decoration: none;
  font-weight: 550;
  white-space: nowrap;
  padding: 6px 2px;
}
.navlink:hover { color: var(--txt); }

/* The help button sits against the page title rather than in the menu: the
   question it answers ("how am I meant to use this?") is asked while looking
   at the page, not while hunting through settings. */
.title-pair { display: inline-flex; align-items: center; gap: 5px; }
.title-pair .hint { flex: none; }

/* ------------------------------------------------------------ header menu */

/* Everything you touch once a session — the account, the explainer, the CSV,
   the theme — lives behind one button so the header carries three controls
   instead of six. */
.menu-wrap { position: relative; display: flex; }

.avatar {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--txt-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.avatar:hover { background: var(--row-hover); color: var(--txt); }
/* Signed in: the initial stands in for the address, so state is visible at a
   glance without an arbitrarily long email dictating the layout. */
.avatar.is-user { background: var(--accent-solid); border-color: transparent; color: var(--on-accent); letter-spacing: 0; }

/* With a real picture the accent circle would only show as a rim, so drop it
   and let the photo be the whole button. */
.avatar.has-photo { background: none; border-color: var(--line); overflow: hidden; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  max-width: min(280px, 80vw);
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
}

.menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: none;
  color: var(--txt);
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover { background: var(--row-hover); }

/* The signed-in address is arbitrarily long; ellipsise rather than let it set
   the menu width. */
.menu-item.account {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--txt-dim);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--accent-solid);
  color: var(--on-accent);
  padding: 6px 12px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: var(--panel-2); border-color: var(--line); color: var(--txt); }
.btn.ghost:hover { background: var(--row-hover); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* Theme toggle: show whichever icon represents the theme you'd switch to. */
.btn.icon { display: grid; place-items: center; padding: 6px; width: 30px; height: 28px; }
.ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ico-moon { fill: currentColor; stroke: none; }
:root[data-theme="light"] .ico-sun,
:root:not([data-theme="light"]) .ico-moon { display: none; }

/* ---------------------------------------------------------------- filters */

.filters { background: var(--panel); border-bottom: 1px solid var(--line); }

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px 14px;
  padding: 12px 18px;
}

.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-mute); font-weight: 600; }

input[type="search"], input[type="number"], input[type="email"], input[type="password"], select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--txt);
  border-radius: var(--radius);
  padding: 5px 8px;
  font: inherit;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

.segmented { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segmented button {
  flex: 1;
  background: var(--bg);
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--txt-dim);
  font: inherit;
  padding: 5px 4px;
  cursor: pointer;
  white-space: nowrap;
}
.segmented button:last-child { border-right: 0; }
.segmented button.on { background: var(--accent-solid); color: var(--on-accent); font-weight: 600; }
.segmented button:not(.on):hover { background: var(--panel-2); color: var(--txt); }

.checks { gap: 5px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-dim); cursor: pointer; }
.chk input { accent-color: var(--accent); margin: 0; }
/* The Options cell is five checkboxes tall, so it stretches its whole grid row.
   Aligning the button to the end of that cell dropped it well below the
   controls beside it. Align to the top instead, with a blank label standing in
   for the heading every other cell has, so it lands level with them. */
.f.actions { justify-content: flex-start; }
.f.actions::before {
  content: '\00a0';
  font-size: 10.5px;
  letter-spacing: .6px;
  font-weight: 600;
}

.hint {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line); color: var(--txt-dim);
  font: inherit; font-size: 9px; font-weight: 700; line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.hint:hover, .hint[aria-expanded="true"] { background: var(--accent-solid); color: var(--on-accent); }
.hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Click-to-open explanation. The native title attribute only appears on hover
   and ignores clicks entirely, which reads as a dead button. */
.hint-bubble {
  position: absolute;
  z-index: 100;
  max-width: 270px;
  background: var(--panel-2);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 22px var(--shadow);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.statusline {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-2);
  font-size: 12px;
}
.spacer { flex: 1; }
.muted { color: var(--txt-dim); }

/* ---------------------------------------------------------------- table */

.table-wrap { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 12.5px; }

thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--txt-dim);
  font-weight: 600;
  white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--txt); }
th.sorted-asc::after { content: " ▲"; font-size: 8px; color: var(--accent); }
th.sorted-desc::after { content: " ▼"; font-size: 8px; color: var(--accent); }

tbody td { padding: 6px 9px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
tbody tr:hover { background: var(--row-hover); cursor: pointer; }

.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
th.num { text-align: right; }

.tick { font-weight: 650; color: var(--accent); font-family: var(--mono); }
.company { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.rank { color: var(--txt-mute); }

/* Group letter — reads as a block label, not another number. */
td.grp {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  background: var(--grp-tint);
  border-right: 1px solid var(--line);
  width: 34px;
}
th.grp { text-align: center; border-right: 1px solid var(--line); }
.score { font-weight: 650; }
.up { color: var(--good); }
.down { color: var(--bad); }
.flag { color: var(--warn); cursor: help; }

.empty { padding: 40px 18px; text-align: center; color: var(--txt-dim); }

.pager {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 28px;
  font-size: 12px;
}
.inline { display: inline-flex; align-items: center; gap: 6px; }
.inline select { width: auto; }

/* Attribution. Sits in the bottom corner, quiet enough not to compete with the
   table but present on every screen. */
.credit {
  padding: 0 18px 22px;
  text-align: right;
  font-size: 11px;
  color: var(--txt-mute);
}

/* ---------------------------------------------------------------- drawer */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 50;
  display: flex; flex-direction: column;
  box-shadow: -18px 0 44px var(--shadow);
}
/* A class-level display would otherwise beat the [hidden] attribute. */
[hidden] { display: none !important; }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-size: 19px; font-family: var(--mono); color: var(--accent); }
.drawer-body { overflow-y: auto; padding: 14px 16px 30px; }

.scrim { position: fixed; inset: 0; background: var(--backdrop); z-index: 40; }

.dsec { margin-bottom: 18px; }
.dsec h3 {
  margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--txt-mute); font-weight: 600;
}
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--txt-dim); }
.kv span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kv.total { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 6px; font-weight: 650; border-bottom: 0; }
.kv.total span:first-child { color: var(--txt); }
.kv .neg { color: var(--bad); }

.headline { display: flex; gap: 10px; margin-bottom: 16px; }
.hl {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 11px;
}
.hl b { display: block; font-size: 19px; font-family: var(--mono); line-height: 1.2; }
.hl small { color: var(--txt-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }

.note {
  background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note-txt);
  padding: 8px 10px; border-radius: var(--radius); font-size: 12px; margin-bottom: 14px;
}

/* The sector select and its ranking toggle read as one control, because the
   button does nothing until the select has a value. */
.sectorpick { display: flex; gap: 6px; align-items: stretch; }
.sectorpick select { flex: 1; min-width: 0; }
.sectorpick .btn { white-space: nowrap; flex: none; }
.sectorpick .btn.on {
  background: var(--accent-solid);
  border-color: transparent;
  color: var(--on-accent);
}
.sectorpick .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ simple mode */

/* Hide rather than unbuild: the filters keep holding the preset, so the same
   query runs and switching back is instant. */
body.simple #filters,
body.simple .table-wrap,
body.simple .pager { display: none; }

.simple-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--line);
}
.simple-head h2 { margin: 0; font-size: 20px; letter-spacing: -.3px; }

.simplelist {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Thirty names read as a list at any width; columns only appear when there
     is room for a second one without the eye having to hunt for it. */
  columns: 2;
  column-gap: 28px;
}
.simplelist li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.simplelist li:hover { background: var(--row-hover); }
.s-tick {
  font-family: var(--mono);
  font-weight: 650;
  color: var(--accent);
  min-width: 62px;
  flex: none;
}
.s-name {
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .simplelist { columns: 1; }
}

/* ---------------------------------------------------------------- dialogs */

dialog {
  background: var(--panel); color: var(--txt);
  border: 1px solid var(--line); border-radius: 10px;
  max-width: 620px; width: 92vw; padding: 22px;
}
dialog::backdrop { background: var(--backdrop); }

/* Long enough to need scrolling on a laptop, so bound it explicitly rather
   than trusting the UA default to overflow rather than clip. */
.helpdlg { max-height: calc(100vh - 60px); overflow-y: auto; }
.helpdlg p { font-size: 13px; line-height: 1.55; }
.helpdlg .steps { font-size: 13px; line-height: 1.5; }
.helpdlg .steps li { margin-bottom: 10px; }

/* Each setting verbatim next to what it does — the raw name so it matches the
   query you can inspect, the plain reading so it means something. */
.preset { margin: 0; font-size: 12.5px; }
.preset > div {
  display: grid;
  grid-template-columns: minmax(0, 210px) 1fr;
  gap: 4px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.preset > div:last-child { border-bottom: 0; }
.preset dt {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.preset dd { margin: 0; color: var(--txt-dim); line-height: 1.5; }

@media (max-width: 560px) {
  .preset > div { grid-template-columns: 1fr; gap: 2px; }
}
dialog h2 { margin: 0 0 12px; font-size: 17px; }
dialog h3 { margin: 18px 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-mute); }
.steps { margin: 0; padding-left: 20px; }
.steps li { margin-bottom: 7px; }
.defs { margin: 0; padding-left: 18px; color: var(--txt-dim); }
.defs li { margin-bottom: 6px; }
.disclaimer {
  margin: 18px 0 14px; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--txt-dim); font-size: 11.5px;
}
/* ----------------------------------------------------- basket composition */

.basket {
  padding: 7px 18px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 11.5px;
  color: var(--txt-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: baseline;
}
.basket-lead { color: var(--txt-mute); font-weight: 600; }
.basket-sep { color: var(--line); }
.basket .warn { color: var(--bad); font-weight: 550; }

/* ---------------------------------------------------------------- portfolio */

.sig { font-size: 11px; white-space: nowrap; }
.sig-act  { color: var(--bad); font-weight: 600; }   /* a date is approaching */
/* Past the target date and still short-term: the last chance to act. */
.sig-urgent { color: var(--on-accent); background: var(--bad); font-weight: 700; padding: 2px 6px; border-radius: 4px; }

/* The date is the instruction, so it reads at full strength; the day number
   rides along quietly for people who count in days. */
/* A ticker you cannot buy back yet. Stronger than the ⚠/◆ data flags, because
   this one is about your own money rather than the filing. */
.flag.wash { color: var(--bad); font-weight: 700; cursor: help; }

/* Import preview: enough rows to spot a misread date column without the dialog
   growing past the screen. */
#importDlg { min-width: min(560px, 92vw); }
.importpreview { max-height: 42vh; overflow-y: auto; }
.setall { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--txt-dim); }
.setall label { display: flex; align-items: center; gap: 6px; }
.setall input[type="date"] { width: auto; }
.dateinput { width: 100%; min-width: 130px; }

.importskipped {
  margin-top: 10px;
  font-size: 12px;
  color: var(--txt-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.selldate { white-space: nowrap; }
.dayno { color: var(--txt-mute); font-size: 11px; margin-left: 4px; }
.sig-wait { color: var(--txt-dim); }
.sig-ok   { color: var(--good); }
.sig-note { color: var(--txt-dim); }
.sig-closed, .sig-unknown { color: var(--txt-mute); }

tr.closed { opacity: .55; }
.rowacts { white-space: nowrap; text-align: right; }
.rowacts .linkbtn { margin-left: 10px; font-size: 11px; }
.linkbtn.danger { color: var(--bad); }

/* ------------------------------------------------------- accounts & views */

.views { display: flex; gap: 6px; align-items: center; }
.views select { flex: 1; }
.views .btn { flex: none; white-space: nowrap; }
.btn.danger { color: var(--bad); border-color: var(--line); }
.btn.danger:hover { border-color: var(--bad); }

/* Sits inline after the "Saved views" label, so it must not inherit the
   uppercase treatment the label itself carries. */
#viewScope { text-transform: none; letter-spacing: 0; font-weight: 400; }
#viewScope.warn { color: var(--bad); }

.btn.google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--bg);
  border-color: var(--line);
  color: var(--txt);
  padding: 9px 12px;
}
.btn.google:hover { border-color: var(--txt-mute); }
.gmark { width: 17px; height: 17px; flex: none; }

.divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 2px; color: var(--txt-mute); font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.authform { display: flex; flex-direction: column; gap: 12px; }
.authactions { display: flex; gap: 8px; margin-top: 4px; }
.authnote { margin: 0; font-size: 12px; color: var(--txt-dim); }
.autherror {
  margin: 0; padding: 8px 10px;
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  border-radius: var(--radius);
  color: var(--bad); font-size: 12px;
}
.authswitch { display: flex; gap: 14px; margin: 2px 0 0; flex-wrap: wrap; }
.linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--accent); font: inherit; font-size: 12px;
  cursor: pointer; text-decoration: underline;
}
.linkbtn:hover { opacity: .8; }

.log {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; max-height: 320px; overflow: auto;
  font-family: var(--mono); font-size: 11.5px; color: var(--txt-dim);
  white-space: pre-wrap; margin: 0 0 14px;
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .company { max-width: 150px; }

  /* Once the header wraps, the actions get their own row. Without this they
     stop short of the right edge, and the menu — right-aligned to its button —
     hangs off the left of the screen. */
  .topbar-actions { width: 100%; }

  /* Nothing in the header may make the page scroll sideways. */
  .topbar, .topbar-actions, .brand { min-width: 0; max-width: 100%; }
  .brand h1, .sub { overflow-wrap: anywhere; }
}

/* A long word or a wide table must scroll inside its own container, never
   drag the whole document sideways. */
html, body { max-width: 100%; overflow-x: hidden; }