/* Linea Divina leads: styled after NOAA nautical charts.
   Water (page), paper (panels), land buff (rail, table heads), chart magenta (anything you can act on),
   depth blue (data). Numbers you watch are set like chart soundings: condensed italic. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-normal.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --water: #e9f0f2;        /* page: chart water */
  --paper: #ffffff;        /* panels */
  --land: #efdfa8;         /* chart buff: rail */
  --land-soft: #f7efd2;    /* table heads, chips */
  --ink: #142029;
  --muted: #586874;
  --line: #c8d5db;
  --magenta: #a1185a;      /* chart magenta: actions, links, focus */
  --magenta-ink: #ffffff;
  --depth: #2f6890;        /* depth contour blue: data */
  --ok: #2b7a4b; --warn: #a85a0a; --bad: #b0281f;
  --row-hover: #f2f7f9;
  --c-vol: var(--depth); --c-oi: var(--magenta);
  /* compat names used by older templates */
  --accent: var(--magenta); --chip: var(--land-soft); --bg: var(--water); --panel: var(--paper);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {                /* night chart: dim, low-glare */
    --water: #0d1820; --paper: #12222c; --land: #1f2a20; --land-soft: #1a2a26;
    --ink: #d9e4e8; --muted: #8ea1ab; --line: #24394a;
    --magenta: #e2599c; --magenta-ink: #10141a; --depth: #74a8cc;
    --ok: #57b77d; --warn: #e0a34a; --bad: #ff7a70; --row-hover: #16303c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--water); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 14.5px; line-height: 1.5; font-stretch: 100%;
  font-variant-numeric: tabular-nums;
}
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- frame: rail + sheet */
.app { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-height: 100vh; }
.rail {
  background: var(--land); border-right: 1px solid var(--line); padding: 20px 0 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
}
.mark { display: block; padding: 0 20px 18px; color: var(--ink); text-decoration: none; }
.mark:hover { text-decoration: none; }
.mark b { display: block; font-stretch: 68%; font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -.01em; }
.mark span { display: block; font-style: italic; color: var(--muted); font-size: 13px; margin-top: 4px; }
#nav { display: flex; flex-direction: column; }
#nav a { color: var(--ink); padding: 5px 20px 5px 17px; border-left: 3px solid transparent; font-size: 14px; }
#nav a:hover { background: color-mix(in srgb, var(--paper) 45%, transparent); text-decoration: none; }
#nav a.active { border-left-color: var(--magenta); color: var(--magenta); font-weight: 650; background: color-mix(in srgb, var(--paper) 60%, transparent); }
#nav .grp { margin: 16px 20px 4px; font-size: 12.5px; font-style: italic; color: var(--muted); }
#inboxBadge { background: var(--magenta); color: var(--magenta-ink); margin-left: 4px; }
.rail-foot { margin-top: auto; padding: 18px 20px 0; font-size: 13px; color: var(--muted); }
.rail-foot .fix { font-style: italic; font-stretch: 80%; margin: 10px 0 0; }
.rail-foot .link { font-size: 13px; }
.sheet { min-width: 0; }
main { max-width: 1240px; padding: 26px 32px 72px; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; padding: 12px 0 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .mark { padding: 0 16px 8px; }
  .mark b { font-size: 21px; }
  #nav { flex-direction: row; overflow-x: auto; white-space: nowrap; }
  #nav .grp { display: none; }
  #nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 8px 12px; }
  #nav a.active { border-bottom-color: var(--magenta); }
  .rail-foot { display: flex; gap: 12px; align-items: baseline; padding: 6px 16px 8px; margin: 0; }
  .rail-foot .fix { display: none; }
  main { padding: 18px 16px 60px; }
}

/* ---------------------------------------------------------------- type */
h1 { font-stretch: 70%; font-weight: 750; font-size: 32px; line-height: 1.05; letter-spacing: -.012em; margin: 0 0 16px; }
h1 .muted { font-stretch: 90%; font-weight: 400; font-size: 18px; letter-spacing: 0; }
h2 { font-stretch: 85%; font-weight: 680; font-size: 16.5px; line-height: 1.25; margin: 0 0 10px; }
h2 .muted { font-weight: 400; font-size: 14px; }
p { max-width: 78ch; }
.muted { color: var(--muted); }
.stat {                 /* soundings */
  font-style: italic; font-stretch: 72%; font-weight: 640; font-size: 38px; line-height: 1.05;
  color: var(--depth); letter-spacing: -.01em;
}
.stat.overdue { color: var(--bad); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- surfaces */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.two { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; min-width: 0; }
/* headline numbers read as one strip of soundings, not a row of boxes */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: auto; margin: 6px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* label, number and note share rows across the strip, so a two-line label never pushes its number down */
.kpis .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; align-content: start; background: none; border: 0; border-radius: 0; border-left: 1px solid var(--line); padding: 10px 16px 12px; }
.kpis .card > :first-child { align-self: end; }
.kpis .card:first-child { border-left: 0; padding-left: 0; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 5px 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 960px) { .kv { grid-template-columns: 110px 1fr; } }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--land-soft); font-stretch: 85%; font-weight: 650; font-size: 13px; color: var(--ink); white-space: nowrap; border-bottom-color: color-mix(in srgb, var(--line) 60%, var(--ink)); }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--magenta); }
tbody tr:hover, tr:hover > td { background: var(--row-hover); }
tr:has(> th):hover > td { background: none; }
.tablewrap { overflow-x: auto; }

/* ---------------------------------------------------------------- chips + status */
.chip { font-style: normal; font-stretch: 100%; font-weight: 500; letter-spacing: 0; vertical-align: .15em; line-height: 1.5; display: inline-block; padding: 0 7px; border-radius: 3px; background: var(--land-soft); border: 1px solid color-mix(in srgb, var(--land) 70%, var(--line)); font-size: 12.5px; margin: 1px 3px 1px 0; white-space: nowrap; }
.s-not_contacted { color: var(--muted); }
.s-reached_out { color: var(--depth); }
.s-call_booked, .s-kalshi_intro { color: var(--magenta); }
.s-onboarded { color: var(--ok); }
.s-not_a_fit { color: var(--bad); }
.overdue { color: var(--bad); font-weight: 650; }
.flag-block { color: var(--bad); font-weight: 650; }
.flag-warn { color: var(--warn); }

/* dashboard bars */
.bar { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.bar span.lbl a { color: var(--ink); }
.bar span.lbl a:hover { color: var(--magenta); }
.bar span.lbl { width: 170px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar span.fill { height: 9px; background: var(--depth); border-radius: 1px; }

/* ---------------------------------------------------------------- forms */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; min-width: 0; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--ink)); }
textarea { width: 100%; min-height: 76px; line-height: 1.45; }
input[type=search] { min-width: 240px; flex: 1; }
input[type=checkbox] { accent-color: var(--magenta); }
button { background: var(--magenta); color: var(--magenta-ink); border: 1px solid var(--magenta); border-radius: 3px; padding: 7px 14px; cursor: pointer; font-stretch: 92%; font-weight: 620; }
button:hover { filter: brightness(1.08); }
button.secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
button.secondary:hover { border-color: var(--magenta); color: var(--magenta); filter: none; }
button.link { background: none; border: 0; color: var(--magenta); padding: 0; font-weight: 500; font-stretch: 100%; }
button.link:hover { text-decoration: underline; filter: none; }
button:disabled { opacity: .5; cursor: default; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pager { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.form { display: grid; gap: 9px; }
.form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.form .row > * { flex: 1; min-width: 140px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.busy { opacity: .6; pointer-events: none; }
details > summary { cursor: pointer; color: var(--magenta); }

/* ---------------------------------------------------------------- lists, messages, toast, login */
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 7px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
.msg { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 3px; padding: 11px 14px; margin: 10px 0; }
.msg.inbound { border-left-color: var(--depth); }
.msg.draft, .msg.approved { border-left-color: var(--warn); }
.msg pre { white-space: pre-wrap; font: inherit; margin: 6px 0 0; max-width: 78ch; }
.msg textarea.body { min-height: 230px; font-size: 14px; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--water); padding: 9px 16px; border-radius: 3px; max-width: 90vw; }
#toast.err { background: var(--bad); color: #fff; }
.login { max-width: 380px; margin: 9vh auto; }
.login h1 { margin-bottom: 4px; }

/* ---------------------------------------------------------------- market charts (inline SVG) */
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 10px; font-family: "Archivo", sans-serif; font-style: italic; }
.chart .vol { fill: var(--c-vol); opacity: .8; }
.chart .oi { fill: none; stroke: var(--c-oi); stroke-width: 2; }
.chart .px { fill: none; stroke: var(--ok); stroke-width: 2; }
.chart .bid { fill: none; stroke: var(--depth); stroke-width: 1.2; stroke-dasharray: 3 3; }
.chart .ask { fill: none; stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 3 3; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 5px; }
.spark { width: 120px; height: 28px; }
.ladder td.imp { width: 38%; }
.ladder .impbar { height: 7px; background: var(--depth); border-radius: 1px; margin-top: 6px; }
.ladder tr.sel > td { background: var(--row-hover); }
.ladder tr.sel > td:first-child { box-shadow: inset 3px 0 0 var(--magenta); }

/* ---------------------------------------------------------------- public booking page */
.public { min-height: 100vh; }
.public .masthead { background: var(--land); border-bottom: 1px solid var(--line); }
.public .masthead div, .public main { max-width: 720px; margin: 0 auto; }
.public .masthead div { padding: 18px 20px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.public .masthead b { font-stretch: 68%; font-weight: 800; font-size: 24px; letter-spacing: -.01em; }
.public .masthead span { font-style: italic; color: var(--muted); }
.public main { padding: 30px 20px 64px; }
.public h1 { font-size: 36px; }
/* day strip: pick a day, then a time */
.public .days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 12px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.public .days button { flex: none; display: grid; justify-items: center; min-width: 64px; padding: 6px 8px 7px; line-height: 1.15; }
.public .days button small { font-size: 12px; color: var(--muted); font-weight: 500; }
.public .days button b { font-style: italic; font-stretch: 72%; font-size: 24px; font-weight: 640; color: var(--depth); }
.public .days button[aria-pressed="true"] { border-color: var(--magenta); box-shadow: inset 0 -3px 0 var(--magenta); }
.public .days button[aria-pressed="true"] b { color: var(--magenta); }
.public #slots h2 { font-stretch: 75%; font-size: 19px; margin: 0 0 10px; }
.public .times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.public .times button { font-style: italic; font-stretch: 80%; font-size: 16px; padding: 9px 8px; }
.public .times button[aria-pressed="true"] { background: var(--magenta); color: var(--magenta-ink); border-color: var(--magenta); }
.public .foot { color: var(--muted); font-size: 13.5px; margin-top: 30px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- scrollbars
   Thin chart-style rails: a depth-blue thumb on the surface it scrolls (water for pages, buff in the sidebar),
   magenta while you drag or hover. Firefox and Chrome use the standard properties; Safari uses ::-webkit-scrollbar. */
:root {
  --sb-thumb: color-mix(in srgb, var(--depth) 45%, var(--line));
  --sb-thumb-hover: var(--magenta);
  --sb-track: transparent;
}
/* Firefox only: in Chrome these standard properties would override the styled ::-webkit-scrollbar below
   (and bring back the arrow buttons). */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
  *:hover { scrollbar-color: color-mix(in srgb, var(--depth) 70%, var(--line)) var(--sb-track); }
}
.rail { --sb-thumb: color-mix(in srgb, var(--ink) 25%, var(--land)); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-hover); background-clip: padding-box; border-width: 2px; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* weekly report: replies with their substance */
.reply-item { border-left: 3px solid var(--magenta); padding: 6px 0 6px 12px; margin: 12px 0; }
.reply-item blockquote { margin: 6px 0; font-style: italic; }
.chip.ok { border-color: var(--ok); }
.chip.warn { border-color: var(--warn); }

/* intelligence views */
.meter { display: inline-block; width: 64px; height: 7px; background: var(--water); border: 1px solid var(--line); vertical-align: middle; border-radius: 1px; }
.meter > span { display: block; height: 100%; background: var(--depth); }
.small { font-size: 13px; }
table.small td { padding: 5px 8px; }
ul.plain.small li { margin: 3px 0; }
svg.chart polyline.l0 { stroke: var(--depth); } svg.chart polyline.l1 { stroke: var(--magenta); }
svg.chart polyline.l2 { stroke: var(--ok); } svg.chart polyline.l3 { stroke: var(--warn); }
svg.chart polyline.l0, svg.chart polyline.l1, svg.chart polyline.l2, svg.chart polyline.l3 { fill: none; stroke-width: 1.8; }
.graphwrap { padding: 6px; overflow-x: auto; }
svg.graph { width: 100%; min-width: 720px; height: auto; display: block; }
svg.graph line { stroke: var(--line); stroke-width: 1.2; }
svg.graph line.e-affiliated_with { stroke: var(--depth); stroke-width: 1.8; }
svg.graph line.e-member_of { stroke: color-mix(in srgb, var(--depth) 45%, var(--line)); stroke-dasharray: 4 3; }
svg.graph line.e-affected { stroke: color-mix(in srgb, var(--bad) 40%, var(--line)); }
svg.graph text { font-size: 11px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
svg.graph text.c { font-weight: 700; font-size: 13px; }
svg.graph a:hover circle { stroke: var(--ink); stroke-width: 2; }
svg.akmap { width: 100%; height: auto; display: block; }
svg.akmap polygon { fill: var(--land-soft); stroke: color-mix(in srgb, var(--land) 70%, var(--line)); stroke-width: .6; }
svg.akmap circle { fill: var(--depth); opacity: .8; }
svg.akmap circle.hit { fill: var(--bad); }
.chip.bad { border-color: var(--bad); color: var(--bad); }
a.chip { text-decoration: none; color: inherit; }
a.chip.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }

/* integrity screen */
ul.flags li { margin: 4px 0; }
ul.flags li.dismissed { opacity: .55; }
ul.flags li.dismissed > .chip:first-child { text-decoration: line-through; }
ul.flags .rv button { font-size: 11.5px; padding: 1px 7px; margin-left: 2px; }
svg.graph line.via { stroke: color-mix(in srgb, var(--warn) 55%, var(--line)); stroke-width: 1.6; }
svg.akmap circle.warn { fill: var(--warn); }
svg.scatter, svg.timeline { width: 100%; height: auto; display: block; }
svg.scatter text, svg.timeline text { font-size: 11px; fill: var(--muted); }
svg.scatter text.ax { fill: var(--ink); }
svg.scatter line.grid, svg.timeline line.grid { stroke: var(--line); stroke-width: .6; }
svg.timeline line.lane { stroke: var(--line); stroke-width: 1; }
svg.scatter path.cap { fill: none; stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 5 4; }
svg.scatter path.cap.x4 { stroke: var(--warn); }
svg.scatter circle { fill: var(--depth); opacity: .55; }
svg.scatter circle.warn { fill: var(--warn); opacity: .9; }
svg.scatter circle.bad { fill: var(--bad); opacity: 1; }
svg.scatter a:hover circle, svg.timeline a:hover circle { stroke: var(--ink); stroke-width: 1.5; }
table.heat td { text-align: center; white-space: nowrap; }
table.heat td:first-child { text-align: left; }

/* who will close */
.cbar { display: inline-flex; gap: 2px; align-items: center; }
.cbar i { display: inline-block; height: 9px; border-radius: 1px; }
.pos { color: var(--ok); font-weight: 600; }
.neg { color: var(--bad); font-weight: 600; }
table.close td ul.plain li { margin: 1px 0; }

/* funding desk */
.fitem { padding: 7px 0; border-bottom: 1px solid var(--line); }
.fdoc textarea { width: 100%; font: inherit; font-size: 13px; margin: 6px 0; }
.fdoc summary { cursor: pointer; padding: 4px 0; }
a.btn { display: inline-block; padding: 4px 10px; border: 1px solid var(--ink); border-radius: 3px; text-decoration: none; color: var(--ink); }

/* media */
table.media textarea { width: 100%; font: inherit; font-size: 12px; margin-top: 4px; }
table.media td:nth-child(3) { min-width: 300px; }
table.intake td { vertical-align: top; padding: 3px 6px 3px 0; } table.intake input { width: 100%; } #iproj { width: 100%; margin-bottom: 6px; }

/* phone: (760) 462-RISK, keypad digits under the letters */
body.public .risk-line { display: inline-flex; align-items: baseline; gap: .04em; color: inherit; text-decoration: none; font-family: inherit; font-weight: 700;
  font-stretch: 112%; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.5; letter-spacing: -0.005em; }
body.public .risk-line .risk-word { color: #C2185B; letter-spacing: .06em; }
body.public .risk-line ruby { ruby-position: under; }
body.public .risk-line rt { font-family: inherit; font-size: .3em; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: currentColor; text-align: center; }
body.public .risk-line:hover .risk-word { color: #9C1349; }
body.public .risk-line.small-line { font-size: 1.15em; line-height: 1.7; vertical-align: -.1em; }
body.public .phone-card { margin: 1.6rem 0 1.2rem; padding: 20px 24px 16px; border-left: 4px solid #C2185B; background: transparent; border-radius: 0 12px 12px 0; max-width: 34rem; }
body.public .phone-card p { margin: .2rem 0 0; font-size: .98rem; }

/* line icons (web/icons/build_icons.py) + the ley-line mark */
.ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#nav a { display: flex; align-items: center; gap: 10px; }
#nav a .ic { color: var(--muted); }
#nav a:hover .ic, #nav a.active .ic { color: var(--magenta); }
.rail .mark { display: flex; align-items: center; gap: 11px; }
.rail .mark .logo { width: 40px; height: 40px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.rail .mark .logo .earth { fill: currentColor; fill-opacity: .2; stroke: currentColor; stroke-opacity: .7; stroke-width: 1.3; }
.rail .mark .logo .ley { stroke: var(--magenta); stroke-width: 2.4; }
.rail .mark .logo .node { fill: currentColor; stroke: none; }
.rail .mark .logo .home { fill: #E9C46A; stroke: var(--ink); stroke-width: 1.1; }
.rail .mark .mk { display: block; font-style: normal; color: inherit; font-size: inherit; margin: 0; }
.rail .mark .mk > span { display: block; font-style: italic; color: var(--muted); font-size: 13px; margin-top: 4px; }
@media (max-width: 860px) { #nav a { gap: 6px; } .rail .mark .logo { width: 30px; height: 30px; } }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }