/* ============================================================================
   Slab Reinforcement Generator — design system
   Tone: refined / industrial / engineering-instrument. Swiss-technical, restrained.
   Type: IBM Plex Sans (body) + IBM Plex Mono (labels, numbers — tabular figures).
   Color: concrete neutrals + ONE confident accent (rebar orange). No purple.
   ========================================================================== */

@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/static/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600;
  font-display:swap; src:url('/static/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600;
  font-display:swap; src:url('/static/fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root{
  --ink:#151a1f; --ink-soft:#39414a; --muted:#6b757f; --faint:#9aa4ad;
  --line:#e4e7ea; --line-strong:#cfd5db; --paper:#eceff1; --surface:#ffffff; --surface-2:#f7f9fa;
  --accent:#c2410c; --accent-bright:#ea580c; --accent-soft:#fbeee7; --accent-ink:#7c2d12;
  --steel:#0f766e; --steel-soft:#ecfdf6;
  --warn:#92400e; --warn-bg:#fffaeb; --warn-line:#fde68a;
  --err:#9f1239; --err-bg:#fdf2f4; --err-line:#f9c9d4; --ok:#15803d;
  --grid:rgba(21,26,31,.035);
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px -16px rgba(16,24,32,.18);
  --r:10px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.5;
  font-size:15px; letter-spacing:.005em;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  font-variant-numeric:tabular-nums;
}
.mono{font-family:var(--mono)} .num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
a{color:var(--accent-ink);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:.7rem 1.4rem;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand .mark{flex:0 0 auto;width:34px;height:34px;border:1.5px solid var(--ink);
  border-radius:7px;display:grid;place-items:center;background:var(--surface)}
.brand .ttl{font-weight:600;font-size:.98rem;line-height:1.1}
.brand .sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:.12rem}
.greeting{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid #f0d9cd;padding:.18rem .55rem;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}

/* ---- buttons ---- */
.btn{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;
  padding:.5rem .8rem;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.btn.ghost{background:transparent}
.btn.sm{padding:.34rem .6rem;font-size:.68rem}

/* ---- layout ---- */
.wrap{max-width:1000px;margin:1.4rem auto;padding:0 1.4rem 4rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.3rem;margin:1.1rem 0;box-shadow:var(--shadow)}
.card > h2{font-size:.78rem;font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .85rem;display:flex;align-items:center;gap:.5rem}
.card > h2::before{content:"";width:14px;height:2px;background:var(--accent);display:inline-block}

/* ---- forms ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem 1.2rem}
label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.28rem}
input,select{width:100%;padding:.56rem .6rem;border:1px solid var(--line-strong);border-radius:8px;
  font-size:.92rem;font-family:var(--sans);background:var(--surface);color:var(--ink);
  font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hint{font-family:var(--mono);font-size:.66rem;color:var(--faint);margin-top:.2rem}

/* ---- tables: engineering deliverable ---- */
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:400;text-align:left;padding:.45rem .55rem;
  border-bottom:1.5px solid var(--line-strong)}
tbody td{padding:.44rem .55rem;border-bottom:1px solid var(--line);vertical-align:baseline}
tbody tr:last-child td{border-bottom:1.5px solid var(--line-strong)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.unit{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
td.clause{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
td.note{color:var(--ink-soft);font-size:.82rem}
tr.key td{background:var(--accent-soft)}
tr.key td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.key td.num{color:var(--accent-ink);font-weight:600}

/* ---- result hero ---- */
.hero{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hero .big{font-family:var(--mono);font-weight:600;font-size:2.1rem;letter-spacing:-.02em;color:var(--accent-ink)}
.hero .big small{font-size:1rem;color:var(--muted);font-weight:400}
.hero .meta{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);text-align:right}
.chip{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  text-transform:uppercase;padding:.18rem .5rem;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-soft)}

/* ---- framing panel ---- */
.framing{border-left:3px solid var(--steel);background:linear-gradient(0deg,var(--surface),var(--steel-soft));}
.framing .ok{color:var(--steel);font-weight:600;font-size:.92rem}
.framing .sys{color:var(--ink-soft);margin:.45rem 0;font-size:.86rem}
.framing .roadmap{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-top:.4rem}
.framing ul{margin:.35rem 0 0;padding-left:1.1rem;color:var(--ink-soft);font-size:.84rem;columns:2;column-gap:1.4rem}
@media(max-width:560px){.framing ul{columns:1}}

/* ---- warnings ---- */
.warn{font-family:var(--sans);font-size:.85rem;padding:.55rem .85rem;border-radius:8px;margin:.5rem 0;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
.warn.error{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}

/* ---- drawings ---- */
.draw{display:flex;gap:1rem;flex-wrap:wrap}
.draw > div{flex:1 1 320px;border:1px solid var(--line);border-radius:8px;padding:.6rem;background:var(--surface-2)}
.draw svg{width:100%;height:auto}

/* ---- result line ---- */
.result-line{font-family:var(--mono);font-size:.9rem;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--accent);padding:.7rem .9rem;border-radius:8px}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:820px){.login-wrap{grid-template-columns:1fr}}
.login-aside{position:relative;background:#11161b;color:#e8ebee;padding:2.4rem 2.6rem;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.login-aside::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px;mask-image:radial-gradient(120% 100% at 30% 20%,#000,transparent 75%)}
@media(max-width:820px){.login-aside{display:none}}
.login-aside .mk{position:relative;display:flex;align-items:center;gap:.7rem}
.login-aside .mk .mark{width:36px;height:36px;border:1.5px solid #e8ebee;border-radius:8px;display:grid;place-items:center}
.login-aside h2{position:relative;font-size:1.8rem;line-height:1.18;font-weight:600;max-width:18ch;margin-top:auto}
.login-aside .lead{position:relative;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:#9aa4ad;margin-top:.7rem}
.login-aside .foot{position:relative;font-family:var(--mono);font-size:.68rem;color:#7b858f}
.login-main{display:flex;align-items:center;justify-content:center;padding:2rem}
.login-card{width:100%;max-width:360px}
.login-card h1{font-size:1.3rem;margin-bottom:.25rem}
.login-card .greet{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--accent-ink);margin-bottom:1.3rem}
.login-card .field{margin-bottom:.9rem}
.login-card .btn.primary{width:100%;justify-content:center;padding:.65rem;font-size:.78rem}

/* ---- toasts ---- */
#toasts{position:fixed;top:1rem;right:1rem;z-index:60;display:flex;flex-direction:column;gap:.5rem}
.toast{font-family:var(--mono);font-size:.78rem;background:var(--ink);color:#fff;padding:.6rem .85rem;
  border-radius:8px;box-shadow:var(--shadow);opacity:0;transform:translateX(12px);
  animation:toastIn .25s forwards}
.toast.err{background:var(--err)} .toast.ok{background:var(--ok)}
@keyframes toastIn{to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .4s both}

footer{color:var(--muted);font-family:var(--mono);font-size:.68rem;text-align:center;padding:1.2rem;letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- login blueprint graphic ---- */
.login-bp{position:relative;width:100%;max-width:340px;opacity:.95;margin:.5rem auto}

/* ---- guided tour ---- */
.tour-overlay{position:fixed;inset:0;z-index:80;background:rgba(16,22,28,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:1.5rem}
.tour-overlay[hidden]{display:none}
.tour-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow);max-width:460px;width:100%;padding:1.1rem 1.2rem;animation:fadeUp .25s both}
.tour-step{font-size:.66rem;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;margin-bottom:.4rem}
.tour-body{font-size:.92rem;color:var(--ink);margin-bottom:.95rem}
.tour-actions{display:flex;justify-content:space-between;gap:.5rem}
.tour-highlight{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

@media print{
  .topbar .actions,.noprint,.tour-overlay{display:none!important}
  body{background:#fff;font-size:11px} .card{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .topbar{position:static;backdrop-filter:none}
}