/* TCT Formula Desk. One stylesheet, no build step. The Sample Desk's sheet with this
   desk's own accent, so the three desks read as one family and are still told apart. */

:root{
  --ink:#16191d; --mut:#6b727c; --line:#e2e5ea; --bg:#f6f8f7; --card:#fff;
  --accent:#2f6b4f; --warn:#a8600f; --bad:#a52a2a; --ok:#1c6b45;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.top{
  display:flex; align-items:center; gap:18px; padding:10px 18px;
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
@media(max-width:720px){
  header.top{flex-wrap:wrap; gap:6px 12px; padding:8px 12px}
  header.top .brand{order:1; flex:1 1 auto; font-size:14px}
  header.top .who{order:2; flex:0 0 auto; white-space:normal; text-align:right; font-size:12px}
  header.top .tabs{order:3; flex:1 0 100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  header.top .tabs::-webkit-scrollbar{display:none}
  header.top .tabs a{white-space:nowrap}
  .wrap{padding:14px 12px 48px}
  h1{font-size:19px}
  html,body{overflow-x:hidden}
}
header.top[hidden]{display:none}
.brand{font-weight:650; color:var(--ink); letter-spacing:.2px}
.tabs{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.tabs a{padding:6px 11px; border-radius:7px; color:var(--mut); font-size:14px}
.tabs a.on{background:#e8f1ec; color:var(--accent); font-weight:600}
.who{color:var(--mut); font-size:13px; white-space:nowrap}

.wrap{max-width:1100px; margin:0 auto; padding:20px 18px 60px}
h1{font-size:21px; margin:0 0 4px}
h2{font-size:16px; margin:26px 0 10px}
.sub{color:var(--mut); font-size:13px; margin:0 0 18px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:0 0 14px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row > *{flex:1 1 220px; min-width:0}
.split{display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start}
@media(max-width:820px){ .split{grid-template-columns:1fr} }

label{display:block; font-size:12px; color:var(--mut); margin:0 0 4px; font-weight:600; letter-spacing:.02em; text-transform:uppercase}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-size:16px}
textarea{min-height:96px; resize:vertical; line-height:1.5}
.field{margin:0 0 13px}

button{border:1px solid var(--line); background:#fff; color:var(--ink); padding:9px 14px; border-radius:8px; cursor:pointer; min-height:42px; font-size:14px}
button:hover{border-color:#c9cfd8}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.primary:hover{background:#265a42}
button.small{min-height:34px; padding:5px 10px; font-size:13px}
button.danger{border-color:var(--bad); color:var(--bad)}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.03em}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tr[data-nav]{cursor:pointer}
tr[data-nav]:hover{background:#f2f7f4}
.scroll{overflow-x:auto}

.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; background:#e8f1ec; color:var(--accent); white-space:nowrap}
.pill.gray{background:#f0f1f3; color:var(--mut)}
.pill.warn{background:#fdf1e0; color:var(--warn)}
.pill.bad{background:#fdecec; color:var(--bad)}
.pill.ok{background:#e6f3ec; color:var(--ok)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:600}
.muted{color:var(--mut)}
.small{font-size:13px}
.err{background:#fdecec; border:1px solid #f3c9c9; color:var(--bad); padding:10px 13px; border-radius:8px; margin:0 0 14px}
.notice{background:#fdf6e7; border:1px solid #f0dfb8; color:var(--warn); padding:10px 13px; border-radius:8px; margin:0 0 14px}
.empty{color:var(--mut); padding:22px; text-align:center}

.thread{display:flex; flex-direction:column; gap:11px}
.remark{background:#fafbfc; border:1px solid var(--line); border-radius:9px; padding:10px 12px}
.remark .meta{font-size:12px; color:var(--mut); margin:0 0 5px; display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.remark .body{white-space:pre-wrap; font-size:14px}

/* ---------- the formula editor ----------
   Rows are compact on purpose: a formula has fifteen to forty of them and the whole point
   is seeing the total and the cost without scrolling. Inputs inside the table are smaller
   than the form inputs but stay at 16px on a phone so iOS does not zoom. */
table.formula td{padding:5px 6px}
table.formula input, table.formula select{padding:6px 8px; font-size:15px; min-height:38px}
table.formula input.pct{width:92px; text-align:right}
table.formula select.phase{width:70px}
table.formula td.mat{min-width:220px}
@media(max-width:720px){ table.formula input, table.formula select{font-size:16px} }
.totals{display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; padding:10px 12px; background:#f2f7f4; border-radius:8px; margin:10px 0}
.totals .big{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}
.totals .bad{color:var(--bad)}
.totals .ok{color:var(--ok)}
.unknown{color:var(--warn)}
tr.stale td.price{color:var(--warn)}
.kv{display:flex; gap:10px; font-size:13px; margin:2px 0}
.kv .k{color:var(--mut); min-width:120px}

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