/* KIS Market Data Platform — trading-desk shell.
   Signal colours are defined once here and mirrored by any server constant,
   so a single meaning never renders in two different shades. */

:root {
  --bg:        #0e1116;
  --surface:   #161b22;
  --surface-2: #1c2230;
  --border:    #2a3038;
  --text:      #e6edf3;
  --text-dim:  #8b949e;
  --accent:    #0080ff;

  --star:         #ffc107;
  --accent-tint:  rgba(0, 128, 255, 0.10);
  /* The same tint pre-blended onto --bg. A pinned row must be fully opaque or
     the rows sliding under it show through. */
  --accent-tint-solid: #0d1c2d;
  --accent-dim:   rgba(0, 128, 255, 0.72);

  --sig-up:    #4caf50;
  --sig-down:  #e05040;
  --sig-warn:  #ffa028;
  --sig-info:  #0080ff;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Safari inflates body text after a rotation unless told not to — this is
     what makes an iPad in landscape look like everything grew a size. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;          /* matches the reference desk's base size */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- top bar ------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 48px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
  font-size: 15px;
}
.brand span { color: var(--accent); }

.nav { display: flex; gap: 18px; flex: 1; }
.nav a {
  color: var(--text-dim);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); }

.session { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.session .who { color: var(--text-dim); }
.session .who b { color: var(--text); font-weight: 600; }

.badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.badge.master { color: var(--sig-warn); border-color: var(--sig-warn); }
.badge.super  { color: var(--sig-info); border-color: var(--sig-info); }

/* ---- layout ------------------------------------------------------------- */

.page { max-width: 1280px; margin: 0 auto; padding: 28px 20px 64px; }
.page h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
.page .lede { color: var(--text-dim); margin: 0 0 24px; font-size: 14px; }

.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 32px 0 10px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
}
.card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.card p  { margin: 0; color: var(--text-dim); font-size: 13px; }
.card.pending { border-style: dashed; opacity: 0.72; }

/* ---- tables ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); color: var(--text-dim); }

.up   { color: var(--sig-up); }
.down { color: var(--sig-down); }
.warn { color: var(--sig-warn); }
.dim  { color: var(--text-dim); }

/* ---- auth screens ------------------------------------------------------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 30px;
}

.auth-card .brand { display: block; font-size: 18px; margin-bottom: 4px; }
.auth-card .sub {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 0 26px;
  letter-spacing: 0.02em;
}

label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 6px;
}

input[type="text"], input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 9px 11px;
  margin-bottom: 16px;
}
input:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  width: 100%;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }

.alert {
  background: rgba(224, 80, 64, 0.1);
  border: 1px solid var(--sig-down);
  color: var(--sig-down);
  border-radius: 4px;
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 18px;
}

.notice {
  background: rgba(255, 160, 40, 0.08);
  border: 1px solid var(--sig-warn);
  color: var(--sig-warn);
  border-radius: 4px;
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 18px;
}

.foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ---- brief -------------------------------------------------------------- */

.page.wide { max-width: 1480px; }
.page.full { max-width: none; padding-left: 0; padding-right: 0; }
.page.full > .page-head { padding: 0 18vw; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.page-head h1 { margin-bottom: 2px; }
.page-head .lede { margin: 0; }
.head-actions { display: flex; gap: 8px; }

.btn {
  display: inline-block;
  width: auto;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); border-color: var(--text-dim); filter: none; }

.link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  padding: 0;
  width: auto;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.link:hover { color: var(--accent); }

.module { margin-bottom: 34px; }
.module-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  padding-bottom: 7px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--accent);
}

table.brief { margin-bottom: 14px; table-layout: fixed; }
table.brief thead th.sec {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
  width: 42%;
}
table.brief th.num { width: 11.6%; }
table.brief tbody td { padding: 5px 10px; }

td.asset { display: flex; align-items: baseline; gap: 8px; }
td.asset .aname { font-size: 13px; }
td.asset .acode {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

td.last { color: var(--text); font-weight: 600; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.nz { opacity: 0.55; }

/* ---- picker ------------------------------------------------------------- */

.pick-group { margin-bottom: 20px; }
.pick-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pick-cat {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pick-sub { font-size: 12px; color: var(--text-dim); }
.pick-head .link { margin-left: auto; }

.pick-items { display: flex; flex-wrap: wrap; gap: 7px; }

.pick {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
}
.pick:hover { border-color: var(--text-dim); }
.pick.on {
  border-color: var(--accent);
  background: rgba(0, 128, 255, 0.1);
  color: var(--text);
}
.pick input { display: none; }
.pick .pcode { font-family: var(--mono); font-size: 10px; opacity: 0.65; }

@media (max-width: 860px) {
  table.brief thead th.sec { width: 34%; }
  table.brief th.num { width: 13.2%; }
  td.asset { flex-direction: column; gap: 1px; }
}

/* ---- universe admin ----------------------------------------------------- */

.uni-group { margin-bottom: 26px; }

table.uni tbody tr { display: table-row; }
table.uni tbody form { display: contents; }
table.uni tbody td { padding: 4px 6px; vertical-align: middle; }
table.uni td.code { white-space: nowrap; padding-right: 12px; }
table.uni td.mid { text-align: center; }

table.uni input[type="text"],
table.uni input[type="number"],
table.uni select {
  width: 100%;
  margin: 0;
  padding: 4px 7px;
  font-family: var(--sans);
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
}
table.uni input.tiny { width: 58px; text-align: right; font-family: var(--mono); }
table.uni select { cursor: pointer; }

input.chk {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.btn.tiny-btn { padding: 4px 11px; font-size: 12px; font-weight: 500; }

/* ---- carrybook ---------------------------------------------------------- */

.filters.sticky-filters {
  position: sticky;
  top: var(--lib-top, 48px);
  z-index: 11;
}
table.research thead th {
  position: sticky;
  top: calc(var(--lib-top, 48px) + var(--lib-filters, 0px));
  z-index: 10;
  background: var(--bg);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
}
/* Pinned only while its own report is on screen: sticky is bounded by the
   containing <tbody>, so the pair scrolls away together. */
table.research tr.row.open {
  position: sticky;
  top: calc(var(--lib-top, 48px) + var(--lib-filters, 0px) + var(--lib-thead, 0px));
  z-index: 9;
}
table.research tr.row.open td {
  background: var(--accent-tint-solid);
  box-shadow: inset 0 -1px 0 var(--border);
}

.filters {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.filters .f { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.filters .f.grow { flex: 1; min-width: 320px; }
.filters .f > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.filters .cap { text-transform: none; letter-spacing: 0; font-style: normal; opacity: 0.7; }
.filters select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  min-width: 100px;
  cursor: pointer;
}
.filters .btn { align-self: flex-end; }

.pick-items.compact .pick { padding: 4px 9px; font-size: 12px; }
.pick.off { opacity: 0.35; cursor: not-allowed; }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px 10px;
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.legend .lg i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend .lg-name { color: var(--text); }
.legend .lg-ccy { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

.chart-host { position: relative; height: 560px; }
.chart-host svg { width: 100%; height: 100%; display: block; overflow: visible; }

svg .grid { stroke: var(--border); stroke-width: 1; }
svg .grid.zero { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; }
svg .axis { fill: var(--text-dim); font-size: 10px; font-family: var(--mono); text-anchor: end; }
svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .endlbl { font-size: 10px; font-family: var(--mono); }
svg .cross { stroke: var(--text-dim); stroke-width: 1; opacity: 0; pointer-events: none; }

.tip {
  position: absolute;
  top: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 12px;
  pointer-events: none;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.tip .td {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.tip .tr { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.tip .tr i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tip .tn { flex: 1; }
.tip .tv { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.chart-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
}

.footnotes { margin-top: 24px; font-size: 12px; color: var(--text-dim); }
.footnotes p { margin: 0 0 6px; }
.footnotes b { color: var(--sig-warn); }

/* ---- brief: two-column with sticky chart panel -------------------------- */

/* The table is sized to its content, not to the viewport: stretched across a
   wide screen its columns drift apart and the eye loses the row. The panel
   takes the space that frees up. */
/* Gutters are measured against the viewport, not against a capped container:
   a percentage inside a max-width box silently shrinks on a wide screen. */
.brief-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 0 18vw;
}
.brief-aside { position: sticky; top: 68px; display: flex; flex-direction: column; gap: 12px; }

.arow { cursor: pointer; }
.arow:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.arow.sel { background: rgba(0, 128, 255, 0.12); }
.arow.sel td.asset .aname { color: var(--accent); font-weight: 600; }

.panel { padding: 12px 14px 14px; }
.panel > h3 {
  margin: 0 0 9px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
}
.panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head .sym { font-weight: 700; font-size: 13px; }
.presets { display: flex; gap: 3px; margin-left: auto; }
.presets button {
  width: auto; padding: 3px 8px; font-size: 11px; font-weight: 500;
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-dim); cursor: pointer;
}
.presets button:hover { color: var(--text); }
.presets button.on { color: #fff; background: var(--accent); border-color: var(--accent); }

.readout { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; margin-bottom: 6px; }
.readout .ro-date { color: var(--text-dim); }
.readout .ro-ohlc { color: var(--text-dim); }
.readout .ro-ohlc b { color: var(--text); }
.readout .ro-mas { display: flex; gap: 10px; flex-wrap: wrap; }

.chart-host.main { height: 230px; position: relative; background: #000; border-radius: 3px; }
.chart-host.sub { height: 66px; margin-top: 3px; background: #000; border-radius: 3px; }
.panel .chart-host svg { width: 100%; height: 100%; display: block; }
svg .wick { stroke-width: 1; }
svg .ln.ma { stroke-width: 1.2; opacity: 0.85; }
svg .grid.band { stroke-dasharray: 2 3; }
svg .axis.sub-lbl { text-anchor: start; fill: var(--text-dim); }

.panel-empty { padding: 26px 0; text-align: center; font-size: 12px; color: var(--text-dim); }
.panel.loaded .panel-empty { display: none; }

.panel-block { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.panel-block h3 {
  margin: 0 0 8px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
}

.bdg {
  display: grid;
  grid-template-columns: 74px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
}
.bdg + .bdg { border-top: 1px solid var(--border); }
.bdg .k { color: var(--text-dim); white-space: nowrap; }
.bdg .d { font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-align: right; }

.pill {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
  font-size: 10.5px;
  white-space: nowrap;
}
.pill.up { color: var(--sig-up); }
.pill.down { color: var(--sig-down); }
.pill.neutral { color: var(--text-dim); }
.pill.strong { color: #fff; }
.pill.up.strong { background: var(--sig-up); border-color: var(--sig-up); }
.pill.down.strong { background: var(--sig-down); border-color: var(--sig-down); }

table.metrics { font-size: 11.5px; }
table.metrics td { padding: 3px 0; border-bottom: 1px solid var(--border); }
table.metrics td.k { color: var(--text-dim); }
table.metrics td.v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.hlc { padding: 2px 0 4px; }
.hlc-track { position: relative; height: 4px; background: var(--border); border-radius: 2px; }
.hlc-mark {
  position: absolute; top: -3px; width: 2px; height: 10px;
  background: var(--accent); transform: translateX(-1px);
}
.hlc-lbl {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
}
.hlc-lbl .cur { color: var(--accent); }

/* Tablet. An 11-inch iPad in landscape is 1194px wide — just over the old
   1180 threshold, so it kept the two-column split and squeezed a seven-column
   table into 370px. Everything below 1280 gets one column. */
@media (max-width: 1280px) {
  .brief-split {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 24px;
  }
  .page.full > .page-head { padding: 0 24px; }
  .brief-aside { position: static; }
  .page.wide, .page.library { padding-left: 24px; padding-right: 24px; }
}

/* ---- brief panel: tightened table + profile ----------------------------- */

table.brief { max-width: 100%; }
table.brief thead th.sec { width: 38%; }
table.brief th.num { width: 12.4%; }
table.brief thead th { padding: 6px 7px; }
table.brief tbody td { padding: 3.5px 7px; }
td.asset .aname { font-size: 13.5px; }

.metrics-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
table.metrics td { padding: 2.5px 0; }

.hlc { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.hlc-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin-bottom: 7px;
}

svg .wick { stroke-width: 1; }
svg .body { shape-rendering: crispEdges; }

/* ---- carry: tabs, grids ------------------------------------------------- */

.tabs {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.tabs a {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tabs .asof {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

.filters input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 10px;
  margin: 0;
  color-scheme: dark;
}

table.grid-table { font-size: 12px; }
table.grid-table thead th {
  position: sticky;
  top: 48px;
  background: var(--bg);
  z-index: 2;
}
table.grid-table th.lbl, table.grid-table td.lbl { text-align: left; white-space: nowrap; }
table.grid-table td.lbl { color: var(--text); }
table.grid-table th.ccy, table.grid-table td.ccy { width: 56px; color: var(--text-dim); }
table.grid-table td.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.grid-table td.miss, table.grid-table .miss { color: var(--text-dim); opacity: 0.4; }
table.grid-table tr.zero-row { background: rgba(0, 128, 255, 0.08); }
table.grid-table tr.zero-row td.lbl { color: var(--accent); font-weight: 600; }
table.grid-table td.diag { color: var(--text-dim); opacity: 0.45; }

table.matrix td.lbl { font-weight: 600; }
table.raw td.tick { font-size: 10px; }

.footnotes b.plain { color: var(--text); }

/* ---- carry series readout ---------------------------------------------- */

.series-readout {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--mono); font-size: 11px; margin-bottom: 8px; min-height: 17px;
}
.series-readout .rd-date { color: var(--text-dim); }
.series-readout .rd { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); }
.series-readout .rd i { width: 8px; height: 8px; border-radius: 2px; }
.series-readout .rd b { color: var(--text); font-weight: 600; }
.chart-card .chart-host { background: #000; border-radius: 3px; }

/* ---- carry range bar ---------------------------------------------------- */

.range-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.range-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-right: 6px;
}
.range-bar .rg {
  padding: 4px 13px;
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.range-bar .rg:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; }
.range-bar .rg.on {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---- carry custom range ------------------------------------------------- */

.range-custom {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.range-custom input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 7px;
  margin: 0;
  width: auto;
  color-scheme: dark;
}
.range-custom.on input[type="date"] { color: var(--text); border-color: var(--accent); }
.range-custom .tilde { color: var(--text-dim); font-size: 11px; }

.smooth-note {
  margin-left: 12px;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- brief settings drawer ---------------------------------------------- */

.dirty-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sig-warn);
  vertical-align: middle;
  margin-left: 3px;
}

.drawer-veil {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 340px;
  z-index: 41;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 16px 18px 24px;
  overflow-y: auto;
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.drawer-head .link { margin-left: auto; }
.drawer-x {
  width: auto; padding: 0 2px; margin: 0;
  background: none; border: none;
  color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer;
}
.drawer-x:hover { color: var(--text); }
.drawer-note { font-size: 11.5px; color: var(--text-dim); margin: 10px 0 16px; line-height: 1.6; }

.set-mod { margin-bottom: 16px; }
.set-head { display: flex; align-items: center; gap: 8px; }
.set-moves { margin-left: auto; display: flex; gap: 3px; }
.set-moves .mv {
  width: 22px; padding: 1px 0; margin: 0;
  font-size: 10px; line-height: 1.4;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.set-moves .mv:hover:not(:disabled) { color: var(--text); border-color: var(--text-dim); }
.set-moves .mv:disabled { opacity: 0.25; cursor: default; }

.set-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.set-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.set-toggle.sub { font-size: 11.5px; color: var(--text-dim); }
.set-toggle.sub input { width: 12px; height: 12px; }

.set-secs {
  display: flex; flex-direction: column; gap: 4px;
  margin: 7px 0 0 22px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

/* ---- research ---------------------------------------------------------- */
/* Sizing follows the reference library: a 1200px column — narrower than the
   market screens, wide enough for a one-line title — 16px base, and the accent
   spent on the index number and the open row rather than sprayed about. */

.page.library { max-width: 1200px; }

.lib-head { display: flex; align-items: baseline; justify-content: space-between; }
.lib-head h1 {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0;
}
.lib-head .count { font-family: var(--mono); font-size: 1rem; color: var(--text-dim); }

/* The four short columns are fixed; Title takes whatever is left and sits at
   the right edge, where the run of blank space used to be. Reading left to
   right now goes date, source, kind, then the headline — narrowing down. */
table.research { table-layout: fixed; width: 100%; }
table.research thead th {
  text-align: left;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  padding: 0.6rem 0.65rem;
  white-space: nowrap;
}
table.research th.no  { width: 4rem; }
table.research th.rec { width: 2.6rem; text-align: center; }
table.research th.pub { width: 7rem; }
table.research th.hs  { width: 10rem; text-align: center; }
table.research th.cat { width: 8rem;  text-align: center; }
table.research th.ttl { width: auto; }

table.research tr.row { cursor: pointer; }
table.research tr.row td {
  padding: 0.75rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.research tr.row:hover td { background: var(--surface-2); }
table.research tr.row:focus { outline: 1px solid var(--accent); outline-offset: -1px; }

/* The index carries the accent: it is the one column the eye uses to keep its
   place while scrolling, and colouring the title instead would fight the star. */
table.research td.no { color: var(--accent); font-family: var(--mono); white-space: nowrap; }
table.research td.ttl {
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.research td.hs,
table.research td.cat,
table.research td.pub { color: var(--text-dim); white-space: nowrap; }
/* House and Category are short fixed vocabularies, not prose: centring them
   lets the eye scan down the column instead of tracking a ragged left edge. */
table.research td.hs,
table.research td.cat { text-align: center; }
table.research td.pub { font-family: var(--mono); font-size: 0.9rem; }
table.research td.empty { padding: 1.6rem 0.65rem; text-align: center; }
/* The star is its own column and its own control: clicking it must not also
   open the summary underneath. */
table.research td.rec { text-align: center; }
table.research td.rec .star { color: var(--border); font-size: 1.05rem; }
table.research td.rec .star.on { color: var(--star); }
table.research td.rec.can { cursor: pointer; }
table.research td.rec.can:hover { background: rgba(255, 193, 7, 0.1); }
table.research td.rec.can:hover .star { color: var(--star); opacity: 0.7; }
table.research td.rec.can:hover .star.on { opacity: 1; }
table.research td.rec.failed .star { color: var(--sig-down); }

.sum-row td { padding: 0 !important; border-bottom: 1px solid var(--border); }

/* The accent rail on the left marks the whole block as one report's prose. */
/* Spans the full table width, exactly as the reference does — the indent I
   had here squeezed the prose into a column of its own for no reason. The
   measure is capped on .sum-body inside, not by shrinking the box. */
.sum-box {
  padding: 1rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.92;
}
.sum-meta {
  max-width: 900px;
  margin: 0 auto 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Capped measure, centred, justified so the right edge stays flush.
   `word-break: keep-all` is what stops Korean wrapping mid-word — without it
   a line can break inside 「금리」 and the text reads as if it stuttered. */
.sum-body {
  max-width: 900px;
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-character;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: auto;
}

/* Headings and emphasis carry the accent: in a wall of Korean prose they are
   the only way the eye finds the section it wants. */
.sum-body h1, .sum-body h2, .sum-body h3,
.sum-body h4, .sum-body h5, .sum-body h6 {
  color: var(--accent);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-align: left;
}
.sum-body h1 { font-size: 1.4rem; }
.sum-body h2 { font-size: 1.2rem; }
.sum-body h3 { font-size: 1.1rem; }
.sum-body h1:first-child, .sum-body h2:first-child, .sum-body h3:first-child { margin-top: 0; }
.sum-body p { margin: 0.48rem 0; }
.sum-body ul, .sum-body ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.sum-body li { margin-bottom: 0.3rem; }
.sum-body strong { color: var(--accent); font-weight: 600; }
.sum-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 0.5rem 0;
  opacity: 0.9;
}
.sum-body table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; text-align: left; }
.sum-body th, .sum-body td {
  border: 1px solid var(--border); padding: 0.4rem 0.8rem;
  text-align: left; font-size: 0.85rem;
}
.sum-body th { background: var(--accent-tint); font-weight: 700; }
.sum-body code {
  background: var(--surface-2); padding: 0.05rem 0.4rem; border-radius: 3px;
  font-size: 0.9em; font-family: var(--mono);
}
.sum-body pre { background: var(--bg); padding: 0.7rem 0.8rem; border-radius: 4px; overflow-x: auto; text-align: left; }
.sum-body pre code { background: none; padding: 0; }
.sum-body a { color: var(--accent); }
.sum-body hr { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0; }
.sum-body .no-content { color: var(--text-dim); font-style: italic; }

/* Prev/Next rides the bottom of the viewport while the summary is on screen —
   a long report should not force a scroll to the very end to step onward. */
.sum-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  max-width: 900px;
  margin: 1rem auto 0;
  padding: 0.7rem 0 0.6rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.sum-nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 1.4rem;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.sum-nav button {
  width: auto;
  font-family: var(--mono);
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.4rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
}
.sum-nav button:hover { background: var(--accent); color: #fff; filter: none; }
.sum-nav button:disabled,
.sum-nav button:disabled:hover {
  opacity: 0.3; cursor: default;
  background: transparent; color: var(--text-dim); border-color: var(--border);
}

.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.pager {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-top: 1.4rem; font-size: 0.95rem;
}
.pager .cur { font-family: var(--mono); color: var(--text-dim); }

.filters input[type="text"] {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 0.95rem; padding: 0.5rem 0.75rem; margin: 0; width: 100%;
}
.filters input[type="text"]:focus, .filters select:focus {
  outline: none; border-color: var(--accent);
}
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); }


/* ---- tablet & touch ------------------------------------------------------ */
/* Sized for an iPad in either orientation: 820/834 portrait, 1180/1194
   landscape. The dense market tables are the constraint — they carry seven
   columns of numbers and stop being readable long before the viewport does. */

@media (max-width: 1280px) {
  body { font-size: 15px; }

  table { font-size: 13px; }
  table.brief thead th { padding: 5px 6px; }
  table.brief tbody td { padding: 3px 6px; }
  td.asset .aname { font-size: 12.5px; }
  td.asset .acode { display: none; }        /* the name is enough on a tablet */

  .page h1 { font-size: 19px; }
  .page .lede { font-size: 13px; margin-bottom: 18px; }
  .module-title { font-size: 11px; }

  /* The chart panel sits under the table now, so give it room to be read
     rather than the narrow column it had beside it. */
  .chart-host.main { height: 300px; }
  .chart-host.sub { height: 80px; }
  .chart-host { height: 420px; }

  /* Wide tables scroll sideways rather than crushing their columns. The
     scrolling lives on a wrapper, not the table: making the table itself a
     block turns every tbody into its own table, and the Research list has one
     tbody per report — the columns would stop lining up between rows. */
  .table-scroll { overflow-x: auto; }
  .table-scroll > table { min-width: 760px; }
  .table-scroll > table.matrix { min-width: 900px; }

  .sum-box { font-size: 15px; line-height: 1.8; }
  .sum-body, .sum-meta, .sum-nav { max-width: none; }

  .filters { gap: 12px; padding: 12px; }
  .filters .f.grow { min-width: 200px; }

  .drawer { width: 300px; }
}

/* iPad portrait and narrower: the Brief table loses its longest horizon
   rather than shrinking every column past reading size. */
@media (max-width: 900px) {
  .brief-split, .page.full > .page-head { padding: 0 16px; }
  .page.wide, .page.library { padding-left: 16px; padding-right: 16px; }

  table.brief thead th.sec { width: 30%; }
  table.brief th.num { width: 14%; }
  table.brief th.num:nth-last-child(2),
  table.brief tbody td.num:nth-last-child(2) { display: none; }   /* hide 3M */

  .range-bar { flex-wrap: wrap; row-gap: 6px; }
  .range-custom { margin-left: 0; padding-left: 0; border-left: none; }
  .tabs { overflow-x: auto; }
  .tabs .asof { display: none; }
}

/* Touch input, regardless of width: fingers need a bigger target than a
   mouse pointer does. 44px is the size Apple publishes. */
@media (pointer: coarse) {
  .nav a { padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .tabs a { padding: 12px 16px; min-height: 44px; }
  .btn, .presets button, .range-bar .rg, .sum-nav button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pick { padding: 9px 12px; }
  table.brief tbody td, table.research tr.row td { padding-top: 8px; padding-bottom: 8px; }
  .set-moves .mv { min-width: 34px; min-height: 30px; }
  input[type="checkbox"], input.chk { width: 18px; height: 18px; }
  /* Momentum scrolling on the side-scrolling tables. */
  .table-scroll { -webkit-overflow-scrolling: touch; }
}

/* ---- under construction ------------------------------------------------- */
/* A reserved address still has to say what it is, or a trader who lands here
   reads a broken page instead of an unfinished one. */
.uc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; min-height: 54vh; text-align: center;
}
.uc-mark { font-size: 2.6rem; color: var(--star); line-height: 1; }
.uc h1 { margin: 0; font-size: 1.25rem; letter-spacing: .04em; }
.uc p { margin: 0; color: var(--text-dim); font-size: .86rem; }
.uc-note { opacity: .7; font-size: .8rem; }

/* ---- auth: secondary action and field hints ----------------------------- */
.auth-alt {
  display: block; margin-top: .55rem; text-align: center;
  font-size: .78rem; color: var(--text-dim); text-decoration: none;
}
.auth-alt:hover { color: var(--accent); }
.auth-card .hint {
  display: block; margin: -.35rem 0 .15rem; font-size: .72rem; color: var(--text-dim);
}
.signup-done { margin: .4rem 0 .2rem; font-size: .82rem; color: var(--text); line-height: 1.55; }

/* ---- admin: sub tabs ---------------------------------------------------- */
/* Accounts, requests and the log are one job seen three ways, so they share a
   page rather than sitting behind three nav entries. */
.subtabs { display: flex; gap: .15rem; margin: .5rem 0 1rem; border-bottom: 1px solid var(--border); }
.subtabs a {
  padding: .45rem .9rem; font-size: .82rem; color: var(--text-dim);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.subtabs a:hover { color: var(--text); }
.subtabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.subtabs a span {
  margin-left: .3rem; padding: 0 .32rem; border-radius: 2px;
  background: var(--accent-tint); font-family: var(--mono); font-size: .72rem;
}
/* A waiting request is work for the approver, so the count is coloured. */
.subtabs a span.alert { background: var(--star); color: #111; font-weight: 600; }

/* ---- admin: issued credentials ----------------------------------------- */
/* Shown once and never recoverable, so it has to be impossible to miss. */
.issued {
  margin: 0 0 1.1rem; border: 1px solid var(--star);
  border-left-width: 3px; background: var(--accent-tint-solid); border-radius: 3px;
}
.issued-head {
  padding: .5rem .8rem; font-size: .8rem; font-weight: 600; color: var(--star);
  border-bottom: 1px solid var(--border);
}
.issued-body { display: flex; flex-wrap: wrap; gap: .4rem 2rem; padding: .7rem .8rem; }
.issued-body .k { display: block; font-size: .7rem; color: var(--text-dim); letter-spacing: .04em; }
.issued-body .v { display: block; font-size: .92rem; }
.issued-body .pw { font-size: 1.12rem; letter-spacing: .09em; color: var(--star); user-select: all; }
.issued-foot { padding: .45rem .8rem .6rem; font-size: .74rem; color: var(--text-dim); }

/* ---- admin: row actions ------------------------------------------------- */
form.inline { display: inline; }
.btn {
  padding: .22rem .6rem; margin: 0 .1rem; font: inherit; font-size: .76rem;
  border: 1px solid var(--border); border-radius: 2px;
  background: transparent; color: var(--text); cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.ok:hover { border-color: var(--sig-up); color: var(--sig-up); }
.btn.no:hover { border-color: var(--sig-down); color: var(--sig-down); }
.nowrap { white-space: nowrap; }
.empty { padding: 1.6rem 0; text-align: center; font-size: .84rem; color: var(--text-dim); }

/* An icon-only action: the gear opens the master list behind the Brief, which
   only a master sees, so it earns a glyph rather than a nav entry of its own. */
.btn.icon {
  padding: 4px 9px;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}