/* ══════════════════════════════════════════════════════════════════════════
   ACHLINE — application surface.

   This is the product, not the marketing page. It shares the company's ink,
   its navy and its typeface, and then does what an application has to do that
   a printed page does not: hold a lot of true things in a small space, and
   make the one that has gone wrong findable in under a second.

   Rules held throughout:
   · One ink (#14120F). One action colour (navy). Three status hues, and a
     status hue is never used for decoration.
   · Every number is tabular. A column of money that does not align is a bug.
   · Row height 40px. Density is the point; air goes between blocks, not rows.
   · Radius 8px on surfaces, 6px on controls, 999px on pills. Nothing rounder.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Libre Franklin"; font-style:normal; font-weight:400 600;
  font-display:block; src:url("/fonts/libre-franklin-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:300 600;
  font-display:block; src:url("/fonts/newsreader-latin.woff2") format("woff2");
}

:root{
  --ground:#F1EFE9;          /* the desk the cards sit on */
  --surface:#FFFFFF;
  --surface-2:#FAF9F6;
  --rail:#14120F;            /* the company's ink, used as a wall */
  --rail-2:#221F1A;
  --rail-ink:#EDEAE2;
  --rail-ink-2:#918B7E;

  --ink:#14120F;
  --ink-2:#57534A;
  --ink-3:#6B655B;   /* 4.82:1 on the lightest tint we paint. verified, not guessed */
  --hair:#E4E0D6;
  --hair-2:#EFECE4;
  --line:#CFC9BB;

  --navy:#1C3D5A;
  --navy-2:#284E70;
  --navy-tint:#E8EDF3;

  --ok:#2F6B43;   --ok-tint:#E6EFE8;
  --bad:#8F2A1E;  --bad-tint:#F6E9E6;
  --hold:#8A5A12; --hold-tint:#F6EEE0;
  --wait:#57534A; --wait-tint:#EEECE6;
  --stop:#4A3A6B; --stop-tint:#EDE9F3;

  --shadow-1:0 1px 1px rgba(20,18,15,.04), 0 2px 6px rgba(20,18,15,.05);
  --shadow-2:0 1px 2px rgba(20,18,15,.06), 0 12px 28px -14px rgba(20,18,15,.22);

  --r:8px; --r-c:6px;
  --ui:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 13px/1.45 var(--ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"ss01" 1;
}
.num,table,input,.kpi-v,.big{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:-.01em}

/* ────────────────────────────  SHELL  ──────────────────────────── */
.app{display:grid; grid-template-columns:228px minmax(0,1fr); min-height:100vh}

/* ────────────────────────────  RAIL  ──────────────────────────── */
.rail{
  background:var(--rail); color:var(--rail-ink);
  display:flex; flex-direction:column; padding:0 0 14px;
  border-right:1px solid var(--rail);
}
.rail-brand{display:flex; align-items:center; gap:8px; padding:16px 16px 14px}
.rail-brand svg{height:17px; width:auto; flex:none; color:#fff; position:relative; top:1px}
.rail-brand .mk-stop{fill:#DE6E5B}
.rail-brand .wm{
  font:400 19px/1 var(--serif); letter-spacing:.005em; color:#fff;
  position:relative; top:1px;
}
.org{
  margin:0 10px 14px; padding:8px 10px; border-radius:var(--r-c);
  background:var(--rail-2); display:flex; align-items:center; gap:8px; cursor:default;
}
.org-badge{
  width:22px; height:22px; border-radius:5px; flex:none;
  background:#3B4B5C; color:#fff; font:600 10px/22px var(--ui); text-align:center; letter-spacing:.02em;
}
.org-name{display:block; font-size:12px; font-weight:500; color:var(--rail-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.org-sub{display:block; font-size:10px; color:var(--rail-ink-2); letter-spacing:.03em}
.org svg{width:12px; height:12px; margin-left:auto; color:var(--rail-ink-2); flex:none}

.rail nav{padding:0 10px; display:flex; flex-direction:column; gap:1px}
.rail-sec{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--rail-ink-2);
  padding:14px 8px 6px; font-weight:500;
}
.rail a{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--r-c);
  color:var(--rail-ink); text-decoration:none; font-size:12.5px; line-height:18px;
}
.rail a svg{width:15px; height:15px; flex:none; color:var(--rail-ink-2)}
.rail a .ct{
  margin-left:auto; font-size:10.5px; color:var(--rail-ink-2);
  background:rgba(255,255,255,.07); border-radius:20px; padding:1px 6px; min-width:20px; text-align:center;
}
.rail a[aria-current]{background:rgba(255,255,255,.10); font-weight:500}
.rail a[aria-current] svg{color:#fff}
.rail a[aria-current] .ct{background:var(--navy); color:#fff}
.rail a.flag .ct{background:var(--bad); color:#fff}

.rail-foot{margin-top:auto; padding:14px 16px 0; border-top:1px solid rgba(255,255,255,.09); margin-inline:10px}
.rail-user{display:flex; align-items:center; gap:9px}
.avatar{
  width:26px; height:26px; border-radius:50%; flex:none; background:#3B4B5C;
  color:#fff; font:600 10px/26px var(--ui); text-align:center; letter-spacing:.03em;
}
.rail-user .avatar{color:#fff}   /* wins over .rail-user span, which is the muted role */
.rail-user > span:last-child{min-width:0}
.rail-user b{display:block; font-size:12px; font-weight:500; color:var(--rail-ink)}
.rail-user span{display:block; font-size:10.5px; color:var(--rail-ink-2)}

/* ────────────────────────────  TOP BAR  ──────────────────────────── */
.main{min-width:0; display:flex; flex-direction:column}
.top{
  display:flex; align-items:center; gap:14px; padding:0 22px; height:52px;
  background:var(--surface); border-bottom:1px solid var(--hair); flex:none;
}
.crumb{font-size:12px; color:var(--ink-3)}
.crumb b{color:var(--ink); font-weight:500}
.crumb .sep{padding:0 6px; color:var(--ink-3)}
.search{
  margin-left:auto; display:flex; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-c);
  padding:5px 9px; width:238px; color:var(--ink-3); font-size:12px;
  white-space:nowrap; overflow:hidden;
}
.search svg{width:13px; height:13px; flex:none}
.search .kbd{
  margin-left:auto; font:500 10px/1 var(--ui); color:var(--ink-3);
  border:1px solid var(--hair); border-radius:3px; padding:3px 4px; background:#fff;
}
.clock{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2)}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none}
.dot.amber{background:var(--hold)}
.top .icon-btn{
  width:28px; height:28px; border-radius:var(--r-c); border:1px solid var(--hair);
  background:#fff; display:grid; place-items:center; color:var(--ink-2); position:relative;
}
.top .icon-btn svg{width:14px; height:14px}
.top .icon-btn .pip{
  position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; border-radius:20px;
  background:var(--bad); color:#fff; font:600 9px/15px var(--ui); text-align:center; padding:0 3px;
  border:1.5px solid #fff;
}

/* ────────────────────────────  PAGE  ──────────────────────────── */
.page{padding:20px 22px 30px; display:flex; flex-direction:column; gap:16px; flex:1; min-width:0}
.page-head{display:flex; align-items:flex-start; gap:16px}
.page-head h1{
  margin:0; font:400 22px/1.2 var(--serif); letter-spacing:-.005em;
}
.page-head p{margin:4px 0 0; font-size:12.5px; color:var(--ink-2); max-width:62ch}
.page-head .acts{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}

/* ────────────────────────────  CONTROLS  ──────────────────────────── */
.btn{
  appearance:none; border:1px solid var(--navy); background:var(--navy); color:#fff;
  font:500 12.5px/1 var(--ui); padding:8px 13px; border-radius:var(--r-c); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn svg{width:14px; height:14px}
.btn.ghost{background:#fff; border-color:var(--hair); color:var(--ink)}
.btn.quiet{background:transparent; border-color:transparent; color:var(--navy); padding-inline:6px}
.btn.sm{padding:5px 9px; font-size:11.5px}
.btn[disabled]{opacity:.45}

.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-c); padding:2px; gap:2px}
.seg span{
  font-size:12px; padding:5px 11px; border-radius:4px; color:var(--ink-2); white-space:nowrap;
}
.seg span[aria-current]{background:#fff; color:var(--ink); font-weight:500; box-shadow:var(--shadow-1)}
.seg span .n{color:var(--ink-3); font-size:11px; padding-left:5px}

.filters{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2);
  border:1px solid var(--hair); background:#fff; border-radius:20px; padding:4px 10px;
}
.chip svg{width:11px; height:11px; color:var(--ink-3)}
.chip.on{border-color:var(--navy); color:var(--navy); background:var(--navy-tint); font-weight:500}

/* ────────────────────────────  CARDS  ──────────────────────────── */
.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow-1)}
.card-head{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--hair-2);
}
.card-head h2{margin:0; font:500 13.5px/1.3 var(--ui); letter-spacing:.005em}
.card-head .sub{font-size:11.5px; color:var(--ink-3)}
.card-head .acts{margin-left:auto; display:flex; align-items:center; gap:8px}
.card-body{padding:16px}
.card-foot{padding:10px 16px; border-top:1px solid var(--hair-2); display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--ink-3)}

.grid{display:grid; gap:16px}
.g-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1fr) 316px}
.g-focus{grid-template-columns:340px minmax(0,1fr)}

/* ────────────────────────────  KPI  ──────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.kpi{padding:14px 16px; border-right:1px solid var(--hair-2)}
.kpi:last-child{border-right:0}
.kpi-l{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.kpi-v{font:400 26px/1.15 var(--serif); margin-top:5px; letter-spacing:-.01em}
.kpi-v small{font-size:15px; color:var(--ink-3)}
.kpi-n{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.kpi.ok .kpi-v{color:var(--ok)}
.kpi.bad .kpi-v{color:var(--bad)}
.delta{font-size:11px; font-weight:500; padding:1px 6px; border-radius:20px; margin-left:6px; position:relative; top:-3px}
.delta.up{background:var(--ok-tint); color:var(--ok)}
.delta.dn{background:var(--bad-tint); color:var(--bad)}

/* ────────────────────────────  STATUS  ──────────────────────────── */
.st{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500;
  padding:2px 8px 2px 6px; border-radius:20px; white-space:nowrap; letter-spacing:.01em;
}
.st::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.st.settled{background:var(--ok-tint); color:var(--ok)}
.st.returned{background:var(--bad-tint); color:var(--bad)}
.st.retry{background:var(--hold-tint); color:var(--hold)}
.st.pending,.st.submitted{background:var(--wait-tint); color:var(--wait)}
.st.blocked{background:var(--stop-tint); color:var(--stop)}
.st.info{background:var(--navy-tint); color:var(--navy)}
.st.plain{background:transparent; color:var(--ink-3); padding-left:0}
.st.plain::before{display:none}

.code{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--hair); border-radius:4px; padding:1px 5px; color:var(--ink-2); background:var(--surface-2);
}
.code.bad{border-color:#E4C6C0; background:var(--bad-tint); color:var(--bad)}
.code.stop{border-color:#D6CEE6; background:var(--stop-tint); color:var(--stop)}

/* ────────────────────────────  TABLE  ──────────────────────────── */
table.t{width:100%; border-collapse:collapse; font-size:12.5px}
table.t thead th{
  font:500 10.5px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--hair); white-space:nowrap; background:var(--surface-2);
}
table.t tbody td,table.t tbody th{
  padding:0 12px; height:40px; border-bottom:1px solid var(--hair-2); text-align:left;
  font-weight:400; vertical-align:middle;
}
table.t tbody tr:last-child td,table.t tbody tr:last-child th{border-bottom:0}
table.t .r{text-align:right}
table.t .who{font-weight:500}
table.t .sub{display:block; font-size:11px; color:var(--ink-3); font-weight:400; margin-top:-1px}
table.t tbody tr.hi{background:var(--bad-tint)}
table.t tbody tr.hi td,table.t tbody tr.hi th{border-bottom-color:#EEDBD6}
table.t tbody tr.sel{background:var(--navy-tint)}
table.t tr.child td,table.t tr.child th{background:var(--surface-2); height:36px; font-size:12px; color:var(--ink-2)}
table.t tr.child .tree{padding-left:22px; position:relative; color:var(--ink-2)}
table.t tr.child .tree::before{
  content:""; position:absolute; left:8px; top:-8px; bottom:50%; width:8px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line); border-bottom-left-radius:3px;
}
.row-note{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--bad);
  padding:0 12px 10px; margin-top:-4px;
}
.row-note svg{width:13px; height:13px; flex:none}

/* ────────────────────────────  GAUGES  ──────────────────────────── */
.gauge{padding:14px 16px}
.gauge-h{display:flex; align-items:baseline; gap:8px}
.gauge-h .l{font-size:11.5px; color:var(--ink-2); font-weight:500}
.gauge-h .cap{margin-left:auto; font-size:10.5px; color:var(--ink-3)}
.gauge-v{font:400 30px/1.1 var(--serif); margin:6px 0 9px; letter-spacing:-.015em}
.gauge-v .u{font-size:16px; color:var(--ink-3); margin-left:2px}
.track{height:7px; border-radius:20px; background:var(--hair-2); position:relative; overflow:hidden}
.track i{position:absolute; inset:0 auto 0 0; border-radius:20px; display:block}
.track i.ok{background:var(--ok)} .track i.hold{background:var(--hold)} .track i.bad{background:var(--bad)}
.track .mark{position:absolute; top:-3px; bottom:-3px; width:1.5px; background:var(--ink); opacity:.55}
.scale{display:flex; justify-content:space-between; font-size:10px; color:var(--ink-3); margin-top:5px}

.ring{display:flex; align-items:center; gap:16px}
.ring svg{width:104px; height:104px; flex:none; transform:rotate(-90deg)}
.ring .bg{fill:none; stroke:var(--hair-2); stroke-width:9}
.ring .fg{fill:none; stroke:var(--ok); stroke-width:9; stroke-linecap:butt}
.ring .tick{fill:none; stroke:var(--ok); stroke-width:7; stroke-linecap:round; stroke-linejoin:round}
.ring-t .pc{font:400 30px/1 var(--serif); letter-spacing:-.015em}
.ring-t .lbl{font-size:11px; color:var(--ink-3); margin-top:4px}
.ring-t .rem{font-size:12.5px; color:var(--ink-2); margin-top:8px}
.ring-t .rem b{font-weight:500; color:var(--ink)}

/* ────────────────────────────  FACTS  ──────────────────────────── */
.facts{display:grid; grid-template-columns:1fr 1fr; gap:0}
.fact{padding:9px 16px; border-bottom:1px solid var(--hair-2)}
.fact:nth-child(odd){border-right:1px solid var(--hair-2)}
.fact .l{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.fact .v{font-size:14px; margin-top:3px; font-weight:500}
.fact .v small{font-weight:400; color:var(--ink-3); font-size:11.5px}

/* ────────────────────────────  BANNERS  ──────────────────────────── */
.banner{
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:var(--r);
  font-size:12.5px; line-height:1.5; border:1px solid;
}
.banner svg{width:15px; height:15px; flex:none; margin-top:1px}
.banner b{font-weight:600}
.banner.warn{background:var(--hold-tint); border-color:#E7D5B4; color:#5E3E0C}
.banner.stop{background:var(--stop-tint); border-color:#D6CEE6; color:#3A2D54}
.banner.ok{background:var(--ok-tint); border-color:#C9DDCF; color:#22522F}
.banner .acts{margin-left:auto; display:flex; gap:8px; flex:none}

/* ────────────────────────────  FEED  ──────────────────────────── */
.feed{display:flex; flex-direction:column}
.fd{display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid var(--hair-2)}
.fd:last-child{border-bottom:0}
.fd .sev{width:6px; height:6px; border-radius:50%; margin-top:6px; flex:none; background:var(--ink-3)}
.fd.critical .sev{background:var(--bad)} .fd.warning .sev{background:var(--hold)} .fd.info .sev{background:var(--navy)}
.fd > span:nth-child(2){min-width:0}
.fd .m{display:block; font-size:12.5px; line-height:1.45}
.fd .m b{font-weight:500}
.fd .meta{font-size:11px; color:var(--ink-3); margin-top:3px; display:flex; gap:8px; align-items:center}
.fd .ack{margin-left:auto; flex:none}

/* ────────────────────────────  TIMELINE / STEPS  ──────────────────────────── */
.steps{display:flex; align-items:center; gap:0; padding:2px 0}
.step{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-3)}
.step .b{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; flex:none}
.step .b svg{width:8px; height:8px; color:#fff}
.step.done{color:var(--ink)} .step.done .b{background:var(--ok); border-color:var(--ok)}
.step.now{color:var(--ink); font-weight:500} .step.now .b{border-color:var(--navy); background:var(--navy)}
.step.now .b::after{content:""; width:5px; height:5px; border-radius:50%; background:#fff}
.rail-x{flex:1; height:1px; background:var(--hair); margin:0 10px; min-width:18px}
.rail-x.done{background:var(--ok)}

/* ────────────────────────────  KANBAN  ──────────────────────────── */
.board{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; align-items:start}
.col-h{display:flex; align-items:center; gap:7px; padding:0 2px 9px}
.col-h .t{font-size:11.5px; font-weight:600; letter-spacing:.02em}
.col-h .n{font-size:10.5px; color:var(--ink-3); background:var(--hair-2); border-radius:20px; padding:1px 6px}
.col-h .amt{margin-left:auto; font-size:10.5px; color:var(--ink-3)}
.stack{display:flex; flex-direction:column; gap:8px}
.deal{background:#fff; border:1px solid var(--hair); border-radius:var(--r-c); padding:10px; box-shadow:var(--shadow-1)}
.deal .n{font-size:12px; font-weight:500; line-height:1.3}
.deal .a{font:400 17px/1.1 var(--serif); margin-top:6px}
.deal .m{display:flex; align-items:center; gap:6px; margin-top:7px; font-size:10.5px; color:var(--ink-3)}
.deal .m .iso{background:var(--surface-2); border:1px solid var(--hair); border-radius:3px; padding:1px 4px}
.deal .stip{display:flex; gap:3px; margin-top:8px}
.deal .stip i{height:3px; flex:1; border-radius:2px; background:var(--hair-2)}
.deal .stip i.y{background:var(--ok)}
.deal .stip i.n{background:var(--bad)}
.deal.flag{border-left:2px solid var(--bad)}

/* ────────────────────────────  MISC  ──────────────────────────── */
.spark{display:block; width:100%; height:52px}
.spark path{fill:none; stroke:var(--navy); stroke-width:1.5}
.spark .area{fill:var(--navy-tint); stroke:none}
.legend{display:flex; gap:14px; font-size:11px; color:var(--ink-3); padding-top:8px}
.legend i{display:inline-block; width:8px; height:2px; border-radius:2px; margin-right:5px; position:relative; top:-3px}
.hr{height:1px; background:var(--hair-2); margin:0}
.mut{color:var(--ink-3)}
.tab-bar{display:flex; gap:2px; border-bottom:1px solid var(--hair); padding:0 16px}
.tab-bar a{
  font-size:12.5px; color:var(--ink-2); text-decoration:none; padding:10px 11px 9px;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tab-bar a[aria-current]{color:var(--ink); font-weight:500; border-bottom-color:var(--navy)}
.tab-bar .n{font-size:10.5px; color:var(--ink-3); padding-left:5px}