/* The Armory.
   Two materials, deliberately: brushed steel for the frame (the rail, the top
   bar, the plate edges) and lit glass for the data (dots, bars, numbers). Metal
   holds the thing together; the digital part is what we do. Nothing glows
   except information. */

:root {
  --ink: #0d0f12;
  --panel: #14171c;
  --panel-2: #191d24;
  --line: #262c35;
  --text: #e9edf3;
  --dim: #8c95a3;
  --orange: #f26a1b;
  --ember: #ff8a3d;
  --gold: #c8933a;
  --good: #46a35d;
  --bad: #c2453a;

  /* Brushed steel: a hard specular line, then the fall-off either side. */
  --steel: linear-gradient(180deg, #2a3039 0%, #1d222a 18%, #171b21 55%, #23282f 100%);
  --steel-edge: linear-gradient(90deg, #3a424e, #6a7484 18%, #2f353e 40%, #454e5b 72%, #2a2f38);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }

.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; min-height: 100dvh; }

/* The rail ---------------------------------------------------------------- */
.rail {
  background: var(--steel);
  border-right: 1px solid #0a0c0f;
  box-shadow: inset -1px 0 0 #39414d;
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem .75rem;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem 1.25rem; }
.brand .mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-weight: 900; color: #10130f;
  background: linear-gradient(160deg, var(--ember), var(--orange) 55%, #b64a0e);
  border-radius: 7px;
  box-shadow: 0 1px 0 #ffb27e inset, 0 2px 6px rgba(0,0,0,.5);
}
.brand .word { font-weight: 800; letter-spacing: .16em; font-size: .82rem; }

.rail nav { display: flex; flex-direction: column; gap: .15rem; }
.rail nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .6rem; border-radius: 8px;
  color: var(--dim); font-size: .9rem; border: 1px solid transparent;
}
.rail nav a i { font-style: normal; opacity: .55; width: 1rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .rail nav a:hover { color: var(--text); background: rgba(255,255,255,.04); } }
.rail nav a.on {
  color: var(--text); background: rgba(242,106,27,.12);
  border-color: rgba(242,106,27,.35);
}
.rail nav a.on i { color: var(--orange); opacity: 1; }

.rail .who {
  margin-top: auto; display: flex; align-items: center; gap: .6rem;
  padding: .6rem; border-top: 1px solid #0a0c0f; box-shadow: 0 -1px 0 #39414d;
}
.rail .who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.rail .who b { display: block; font-size: .85rem; }
.rail .who small { color: var(--dim); font-size: .72rem; }

/* Top bar ----------------------------------------------------------------- */
.body { min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.5rem;
  background: var(--steel);
  border-bottom: 1px solid #0a0c0f;
  box-shadow: 0 1px 0 #39414d inset, 0 6px 18px rgba(0,0,0,.35);
  position: sticky; top: 0; z-index: 4;
}
.topbar h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
main { padding: 1.5rem; max-width: 1180px; }

/* Stat plates ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .95rem 1.1rem; position: relative; overflow: hidden;
}
.stat::before {                     /* the milled edge along the top of the plate */
  content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--steel-edge);
}
.stat .k { color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.stat .v { display: block; font-size: 2.1rem; font-weight: 750; line-height: 1.15; margin: .25rem 0 .1rem; }
.stat .s { color: var(--dim); font-size: .78rem; }
.stat .s.warn { color: var(--gold); }

/* Panels ------------------------------------------------------------------ */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin-top: 1.1rem; position: relative; overflow: hidden;
}
.panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--steel-edge); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.panel-head h2, .stats + section h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.two .panel { margin-top: 1.1rem; }
.none { color: var(--dim); }
.note { color: var(--dim); font-size: .82rem; }

.ghost {
  background: transparent; color: var(--dim); font: inherit; font-size: .8rem;
  border: 1px solid var(--line); border-radius: 7px; padding: .35rem .7rem; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .ghost:hover { color: var(--text); border-color: var(--orange); } }

/* The map ----------------------------------------------------------------- */
.mapwrap { background: radial-gradient(60% 70% at 50% 40%, #12161c, #0d0f12); border-radius: 10px; padding: .5rem; }
.usmap { width: 100%; height: auto; display: block; }
.usmap .state { fill: #1b2029; stroke: #2b323d; stroke-width: .6; }
.usmap .dot {
  fill: rgba(242,106,27,.32); stroke: var(--ember); stroke-width: 1.1;
  filter: drop-shadow(0 0 6px rgba(242,106,27,.55));
}
@media (hover: hover) and (pointer: fine) { .usmap .dot:hover { fill: rgba(255,138,61,.6); } }

.ranked { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ranked li { display: grid; grid-template-columns: 9rem 1fr 4rem; align-items: center; gap: .75rem; font-size: .85rem; }
.ranked .bar { background: #1b2029; height: 8px; border-radius: 999px; overflow: hidden; }
.ranked .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--ember)); }
.ranked .n { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Call rows --------------------------------------------------------------- */
.call {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 9px; margin-bottom: .45rem;
}
@media (hover: hover) and (pointer: fine) { .call:hover { border-color: var(--orange); } }
.call .when { color: var(--dim); font-size: .8rem; white-space: nowrap; }
.call .when b { color: var(--text); }
.call .who { flex: 1; font-weight: 600; font-size: .92rem; }

.status { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; padding: .18rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.s-showed { color: var(--good); border-color: rgba(70,163,93,.5); }
.s-noshow { color: var(--bad); border-color: rgba(194,69,58,.5); }
.s-confirmed { color: var(--gold); border-color: rgba(200,147,58,.45); }
.count { color: var(--orange); }

/* Brief ------------------------------------------------------------------- */
.brief .top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.brief h1 { font-size: 1.5rem; margin-bottom: .2rem; }
.brief .sub { color: var(--dim); margin: 0; font-size: .92rem; }
.brief .sub a { color: var(--ember); }
.brief .when { text-align: right; color: var(--dim); font-size: .85rem; }
.brief .when b { display: block; color: var(--text); }
.brief section { margin-top: 1.5rem; }
.brief h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: .6rem; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.1rem; margin: 0; }
dt { color: var(--dim); font-size: .85rem; }
dd { margin: 0; }

blockquote {
  margin: 0 0 .55rem; padding: .8rem 1rem; background: var(--panel-2);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0 9px 9px 0; white-space: pre-wrap; font-size: .92rem;
}
blockquote cite { display: block; margin-top: .45rem; color: var(--dim); font-size: .75rem; font-style: normal; }

details.more { margin-top: .9rem; }
details.more summary { color: var(--dim); font-size: .82rem; cursor: pointer; }
details.more dl { margin-top: .6rem; font-size: .88rem; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.tags span { font-size: .72rem; padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); }

.saved { background: #13231a; border: 1px solid rgba(70,163,93,.5); color: #cfeed8; padding: .7rem 1rem; border-radius: 9px; font-size: .88rem; }

.outcome { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.outcome textarea {
  width: 100%; padding: .75rem; border-radius: 9px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font: inherit; resize: vertical;
}
.buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .55rem; margin-top: .75rem; }
.buttons button {
  padding: .95rem .7rem; font: 650 .95rem/1.2 inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .buttons button:hover { border-color: currentColor; } }
.b-contract {
  background: linear-gradient(180deg, var(--ember), var(--orange) 60%, #c9500f);
  border-color: #dd6317; color: #17110c;
  box-shadow: 0 1px 0 rgba(255,190,150,.6) inset;
}
.b-pitched { color: var(--gold); }
.b-noshow, .b-unfit { color: var(--dim); }

/* Calendar ---------------------------------------------------------------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.cal .dow { color: var(--dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; text-align: center; padding: .3rem 0; }
.cal .day { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; min-height: 5.5rem; padding: .4rem; }
.cal .day.off { opacity: .35; }
.cal .day.now { border-color: var(--orange); }
.cal .day .n { color: var(--dim); font-size: .72rem; }
.cal .ev { display: block; font-size: .72rem; margin-top: .25rem; padding: .2rem .35rem; border-radius: 5px; background: rgba(242,106,27,.15); border: 1px solid rgba(242,106,27,.35); }

/* Activity ---------------------------------------------------------------- */
.runs { width: 100%; border-collapse: collapse; font-size: .88rem; }
.runs td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.runs .at { color: var(--dim); white-space: nowrap; }
.runs .did { color: var(--dim); }
.runs .bad { color: var(--bad); display: block; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }

  /* One scrolling strip, not a wrapping block. Wrapped, the rail grew to a
     full phone screen of links before any content — and the call list is the
     one page that gets opened on a phone, mid-dial. A strip you swipe costs
     one line. */
  .rail {
    position: sticky; top: 0; z-index: 30;
    height: auto; flex-direction: row; align-items: center;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    gap: .15rem; padding: .5rem .6rem;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail nav { flex-direction: row; flex-wrap: nowrap; }
  /* align-self keeps each link its own height. Without it they stretch to the
     tallest item in the strip, so the active chip came out as a tall box. */
  .rail a { white-space: nowrap; align-self: center; padding: .35rem .55rem; }
  .rail nav { align-items: center; }
  /* The group headings and the signed-in card are orientation, and there is no
     room for orientation on a phone. The links themselves still say where you
     are. */
  .rail .group, .rail .who { display: none; }
  .rail .sub { display: inline-flex; flex-direction: row; gap: .15rem; margin: 0 0 0 .15rem; }
  .two { grid-template-columns: 1fr; }
  .brief .when { text-align: left; }
  .buttons { grid-template-columns: 1fr 1fr; }
  .b-contract { grid-column: 1 / -1; }
}

/* Your day ---------------------------------------------------------------- */
/* The list is numbered because the order IS the content: this first, then
   that. Grouped by kind rather than interleaved, so it reads as "two
   rebuttals, then two bills" instead of a flat pile. */
ol.day { list-style: none; margin: 0; padding: 0; counter-reset: day; }
ol.day .it {
  counter-increment: day;
  position: relative;
  padding: 13px 14px 13px 46px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2);
  margin-bottom: 9px;
}
ol.day .it::before {
  content: counter(day);
  position: absolute; left: 13px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
  color: var(--dim); background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
}
/* The first thing is the first thing. One accent, not a rainbow — if every
   row is coloured, none of them is emphasised. */
ol.day .it:first-child { border-color: rgba(242,106,27,.45); }
ol.day .it:first-child::before {
  color: #fff; background: linear-gradient(160deg, var(--ember), var(--orange));
  border-color: transparent;
}
.it-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.it-head { font-size: .97rem; }
.it-worth { margin-left: auto; color: var(--gold); font-variant-numeric: tabular-nums; }
.it-why { color: var(--dim); font-size: .85rem; margin-top: 3px; }
.it-do { margin-top: 7px; font-size: .88rem; font-weight: 600; color: var(--ember); }
.it-do a { color: var(--text); margin-left: 7px; font-weight: 500; }

/* The note it is reasoning from, verbatim. If this contradicts the line above
   it, the line above it is wrong and you can see so without opening the job. */
.it-said {
  margin-top: 8px; padding: 7px 10px;
  border-left: 2px solid var(--line);
  color: var(--dim); font-size: .82rem; line-height: 1.45;
}
.it-said .it-when {
  display: inline-block; margin-right: 7px;
  color: var(--text); opacity: .6; font-size: .74rem;
}

/* `.tag` had colour variants but no base, so it rendered as plain text glued
   to whatever preceded it: "Lost / Not Qualified answered" read as one phrase. */
.tag {
  display: inline-block; margin-left: 6px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .1rem .45rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--dim); vertical-align: 1px;
}
.tag.t-rebuttal  { color: var(--ember); }
.tag.t-invoice   { color: var(--gold); }
.tag.t-owed      { color: var(--bad); }
.tag.t-carrier   { color: var(--text); }
.tag.t-client    { color: var(--text); }
.tag.t-escalated { color: var(--bad); }

ul.quiet { list-style: none; margin: 0; padding: 0; }
ul.quiet li {
  color: var(--dim); font-size: .8rem;
  padding: 4px 0; border-bottom: 1px solid var(--line);
}
ul.quiet li:last-child { border-bottom: 0; }

table.board { width: 100%; border-collapse: collapse; }
table.board td { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
table.board tr:last-child td { border-bottom: 0; }
table.board .b-n { text-align: right; width: 3ch; font-variant-numeric: tabular-nums; }
table.board .b-old { text-align: right; color: var(--dim); font-size: .78rem; width: 11ch; }

@media (max-width: 640px) {
  ol.day .it { padding-left: 40px; }
  .it-worth { margin-left: 0; }
}

/* The send switch ---------------------------------------------------------- */
/* Quiet while it is off, because off is the normal and safe state and a red
   warning bar for "working as intended" is how people learn to ignore bars.
   Loud when it is on, because that is the state worth noticing. */
.gate {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-2); color: var(--dim); font-size: .82rem;
}
.gate-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dim); flex: none;
}
.gate.gate-on {
  border-color: rgba(242,106,27,.5); color: var(--text);
  background: rgba(242,106,27,.08);
}
.gate.gate-on .gate-dot {
  background: var(--ember); box-shadow: 0 0 8px var(--ember);
}

/* Pipeline ----------------------------------------------------------------- */
table.src, table.funnel { width: 100%; border-collapse: collapse; }
table.src th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); font-weight: 600;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
table.src td { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
table.src tr:last-child td { border-bottom: 0; }
table.src .n { text-align: right; font-variant-numeric: tabular-nums; width: 9ch; }
table.src .n small { color: var(--dim); margin-left: 4px; }

table.funnel td { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
table.funnel tr:last-child td { border-bottom: 0; }
/* Answered stages are context, not work. Dimmed so the live part of the funnel
   is what the eye lands on. */
table.funnel tr.done td { color: var(--dim); }
table.funnel .f-n { text-align: right; width: 5ch; font-variant-numeric: tabular-nums; padding-right: 11px; }
table.funnel .f-m { text-align: right; color: var(--dim); font-size: .78rem; width: 12ch; }
table.funnel .f-o { text-align: right; color: var(--dim); font-size: .78rem; width: 12ch; }

ul.leads { list-style: none; margin: 0 0 4px; padding: 0; }
ul.leads li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .87rem;
}
ul.leads li:last-child { border-bottom: 0; }
ul.leads .d {
  flex: none; width: 5ch; text-align: right;
  color: var(--dim); font-size: .78rem; font-variant-numeric: tabular-nums;
}
ul.leads .d.bad { color: var(--bad); }
.sub-h {
  margin: 13px 0 5px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); font-weight: 600;
}
.panel > .sub-h:first-of-type { margin-top: 0; }

/* The relay ---------------------------------------------------------------- */
.relay-wrap { overflow-x: auto; margin: 4px 0 2px; }
.relay { width: 100%; min-width: 760px; height: auto; display: block; }

.relay .w { fill: none; stroke-width: 1.4; }
.relay .w-planned { stroke: var(--line); }
.relay .w-partial { stroke: var(--gold); stroke-opacity: .45; }
.relay .w-running,
.relay .w-live    { stroke: var(--orange); stroke-opacity: .7; }

/* A dash crawling along the wire. Slow, and only on the wires that carry
   something today — motion on every line at once is a screensaver, motion on
   the two that are live tells you which two are live. */
.relay .w-running, .relay .w-live {
  stroke-dasharray: 5 9;
  animation: crawl 2.6s linear infinite;
  animation-delay: calc(var(--i, 0) * -.35s);
}
@keyframes crawl { to { stroke-dashoffset: -28; } }

.relay .n circle { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.relay .n-running circle { fill: var(--orange); stroke: var(--ember); }
.relay .n-partial circle { fill: var(--gold); stroke: var(--gold); }

.relay text { font-size: 12.5px; fill: var(--text); font-weight: 550; }
.relay .sys { font-size: 10.5px; fill: var(--dim); font-weight: 400; }
.relay .sub { font-size: 10px; fill: var(--dim); font-weight: 400; }
.relay .n-planned .nm { fill: var(--dim); font-weight: 450; }
.relay .chief rect { stroke: var(--line); stroke-width: 1; }
.relay .you circle { fill: var(--orange); }
.relay .you text { fill: #fff; font-size: 11.5px; font-weight: 700; }

/* The roster --------------------------------------------------------------- */
.roster {
  display: grid; gap: 11px; margin-top: 15px;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.ag {
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); padding: 13px 14px;
  display: flex; flex-direction: column;
}
.ag header { display: flex; align-items: center; gap: 8px; }
.ag h3 { margin: 0; font-size: .93rem; font-weight: 600; }
.ag h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .ag h3 a:hover { border-bottom-color: var(--orange); } }
.ag-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--line); border: 1px solid var(--line);
}
.ag-state {
  margin-left: auto; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim);
}
.ag-role { margin: 7px 0 0; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dim); }
.ag-makes { margin: 6px 0 0; font-size: .85rem; line-height: 1.45; color: var(--text); }
.ag-missing {
  margin: 9px 0 0; padding: 7px 9px; font-size: .78rem; line-height: 1.4;
  color: var(--dim); border-left: 2px solid var(--gold);
  background: rgba(200,147,58,.06);
}
.ag footer {
  margin-top: auto; padding-top: 11px;
  display: flex; gap: 9px; flex-wrap: wrap;
  font-size: .72rem; color: var(--dim);
}
.ag-hands { margin-left: auto; }

/* Running gets the accent and a breathing dot; half-built gets brass; not
   hired recedes. Three states, three weights, so the grid is scannable before
   any of it is read. */
.ag-running { border-color: rgba(242,106,27,.4); }
.ag-running .ag-dot {
  background: var(--orange); border-color: var(--ember);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,106,27,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(242,106,27,0); }
}
.ag-partial .ag-dot { background: var(--gold); border-color: var(--gold); }
.ag-planned { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
  .relay .w-running, .relay .w-live, .ag-running .ag-dot { animation: none; }
}

/* Org chart: managers, members, links ------------------------------------- */
.relay a { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .relay a:hover .nm { fill: var(--ember); } }
@media (hover: hover) and (pointer: fine) { .relay a:hover circle { stroke: var(--ember); } }
@media (hover: hover) and (pointer: fine) { .relay a:hover rect { stroke: var(--ember); } }

.relay .mg rect, .relay .chief rect { stroke: var(--line); stroke-width: 1; }
.relay .mg-running rect, .relay .chief-running rect { stroke: rgba(242,106,27,.55); }
.relay .mg-partial rect { stroke: rgba(200,147,58,.5); }
.relay .mg-planned .nm, .relay .chief-planned .nm { fill: var(--dim); font-weight: 500; }

/* Department blocks on the roster */
.deptblock { margin-top: 20px; }
.dept-h {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--dim);
}
.dept-h i { font-style: normal; color: var(--orange); font-size: .9rem; }
/* The manager's card leads its own department, so the grid reads as a team
   rather than as a bag of equals. */
.ag-boss { border-color: rgba(255,255,255,.14); background: var(--panel-2); }

/* One member of staff ------------------------------------------------------ */
.pagehead { margin-bottom: 12px; }
.back { color: var(--dim); font-size: .84rem; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--text); } }

.staff-top { display: flex; align-items: flex-start; gap: 12px; }
.staff-top h1 { margin: 0; font-size: 1.3rem; }
.staff-sub { margin: 4px 0 0; font-size: .82rem; color: var(--dim); }
.staff-sub a { color: var(--ember); text-decoration: none; }
.staff-state { margin-left: auto; }
.ag-dot-running { background: var(--orange); border-color: var(--ember); }
.ag-dot-partial { background: var(--gold); border-color: var(--gold); }
.staff-top .ag-dot { margin-top: 7px; }
.staff-makes { margin: 13px 0 0; font-size: 1rem; line-height: 1.5; }
.staff-plan { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--dim); }

.btn {
  display: inline-block; margin-top: 13px; padding: 7px 13px;
  border: 1px solid rgba(242,106,27,.45); border-radius: 7px;
  color: var(--ember); text-decoration: none; font-size: .85rem; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: rgba(242,106,27,.1); } }

ul.does { list-style: none; margin: 0; padding: 0; }
ul.does li {
  position: relative; padding: 6px 0 6px 18px;
  font-size: .87rem; line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
ul.does li:last-child { border-bottom: 0; }
ul.does li::before {
  content: '▸'; position: absolute; left: 0; top: 6px;
  color: var(--orange); font-size: .8rem;
}

ul.runlist { list-style: none; margin: 0; padding: 0; }
ul.runlist li {
  display: flex; gap: 11px; padding: 5px 0;
  border-bottom: 1px solid var(--line); font-size: .84rem;
}
ul.runlist li:last-child { border-bottom: 0; }
.r-when { color: var(--dim); font-size: .76rem; white-space: nowrap; }

/* Your asks ---------------------------------------------------------------- */
.askform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.askform input[type=text] { flex: 1 1 320px; }
.askform input, .askform select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: .88rem;
}
.askform input[type=text]::placeholder { color: var(--dim); }
.askform .btn { margin-top: 0; }

ul.asks { list-style: none; margin: 0; padding: 0; }
ul.asks .ask { border-bottom: 1px solid var(--line); }
ul.asks .ask:last-child { border-bottom: 0; }
ul.asks form { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.a-w {
  flex: none; width: 10ch; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dim);
}
.ask-w-bleeds .a-w { color: var(--bad); }
.ask-w-earns  .a-w { color: var(--ember); }
.ask-w-frees  .a-w { color: var(--gold); }
.a-what { flex: 1; font-size: .89rem; }
.a-due { margin-left: 8px; font-size: .74rem; color: var(--gold); }
ul.asks select {
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--dim); font: inherit; font-size: .76rem;
}
/* Done and parked recede rather than vanish — "what did I decide not to do"
   is a question worth being able to answer. */
.ask-done .a-what, .ask-parked .a-what { color: var(--dim); text-decoration: line-through; }
.ask-done, .ask-parked { opacity: .55; }
ul.asks .x {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 3px;
}
@media (hover: hover) and (pointer: fine) { ul.asks .x:hover { color: var(--bad); } }

/* An ask on the morning list reads as yours, not as something the CRM found. */
ol.day .it-ask { border-left: 2px solid var(--ember); }
.tag.t-ask { color: var(--ember); }

/* Skills ------------------------------------------------------------------- */
.staff-cadence { margin: 8px 0 0; font-size: .82rem; color: var(--dim); }
.staff-cadence b { color: var(--text); font-weight: 600; }

ul.skills { list-style: none; margin: 0; padding: 0; }
ul.skills .sk {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .85rem;
}
ul.skills .sk:last-child { border-bottom: 0; }
.sk-mark {
  flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--line);
}
.sk-have .sk-mark  { background: var(--good); }
.sk-near .sk-mark  { background: var(--gold); }
.sk-needs .sk-mark { background: var(--line); border: 1px solid var(--dim); }
.sk-what { flex: 1; }
.sk-needs .sk-what { color: var(--dim); }
.sk-stands {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim);
}
.sk-have .sk-stands { color: var(--good); }
.sk-near .sk-stands { color: var(--gold); }

/* The call list ------------------------------------------------------------ */
ul.dials, ul.calls { list-style: none; margin: 0; padding: 0; }
ul.dials li, ul.calls li {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .87rem;
}
ul.dials li:last-child, ul.calls li:last-child { border-bottom: 0; }
.d-age {
  flex: none; width: 5ch; text-align: right;
  color: var(--dim); font-size: .78rem; font-variant-numeric: tabular-nums;
}
.d-age.bad { color: var(--bad); }
.d-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tap to dial. This gets opened on a phone; nobody should be copying a number
   into a keypad by hand. */
.d-tel {
  flex: none; color: var(--ember); text-decoration: none;
  font-variant-numeric: tabular-nums; font-size: .82rem;
  padding: 3px 8px; border: 1px solid rgba(242,106,27,.3); border-radius: 6px;
}
@media (hover: hover) and (pointer: fine) { .d-tel:hover { background: rgba(242,106,27,.12); } }
.d-tel.none { color: var(--dim); border-color: var(--line); }

.c-when { flex: none; width: 15ch; color: var(--text); font-size: .82rem; }
.c-who { flex: 1; }
.c-do { flex: none; color: var(--ember); font-size: .8rem; font-weight: 600; }

/* Two offices: Chris's person draws quieter than Hunter's, because this is
   Hunter's screen and the hierarchy should read at a glance. */
.relay .you-other circle { fill: var(--gold); opacity: .85; }
.relay .you-other text { fill: #1a1408; }

.signout { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }