/* Costwitness app skin. Visual source of truth: gmp-ledger-mockup.html.
   Inter Tight for text, IBM Plex Mono for figures, deep green rail, sharp corners. */
:root{
  --ink:#11261F; --deep:#0F3D3A; --bottle:#0F3D3A; --bottle-2:#0C332F;
  --teal:#1F6E69; --lime:#C8F8A9; --lime-deep:#8FD65E;
  --tint:#F4F7F5; --bg:#F4F7F5; --paper:#F2F5F1;
  --surface:#FFFFFF; --surface-2:#F4F7F5; --surface-3:#F8FAF6;
  --rule:rgba(15,61,58,.14); --rule-strong:rgba(15,61,58,.28);
  --border:rgba(15,61,58,.14); --border-2:rgba(15,61,58,.28);
  --text:#11261F; --body:#2E4038; --muted:#5E7269; --faint:#8FA096;
  --flag:#A83C28;
  --ok:#1F6E69; --ok-bg:rgba(31,110,105,.1); --warn:#B07714; --warn-bg:#F6EDD8; --crit:#A83C28; --crit-bg:rgba(168,60,40,.08);
  --rail:248px;
  /* JEDEN RYTM ODSTEPOW DLA KART. 12 wrzesnia 2026.
     Zmierzone przedtem na ekranie Dashboard projektu: trzy rozne odstepy miedzy kartami
     (10px, 14px, 16px) i dwie rozne wartosci wnetrza (.card 20px 22px, .pu-box 10px 12px).
     Od teraz karta ma jeden odstep i jedno wnetrze, a kazda karta w programie bierze je stad.
     Kafelek w srodku karty (.pu-box) to nie karta i zostaje przy swoim, bo to inny szczebel. */
  --card-gap:24px;
  --card-pad:32px;
  --display:'Inter Tight',system-ui,sans-serif;
  --sans:'Inter Tight',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
/* Na waskim ekranie wnetrze karty schodzi do 20px. Jedna zmienna, wiec kazda karta naraz. */
@media (max-width:700px){ :root{ --card-pad:20px } }
*{box-sizing:border-box}
body{margin:0;background:var(--tint);min-height:100vh;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* guest top bar (login, register); signed in pages carry the brand on the rail */
header.top{background:var(--deep);color:#fff;padding:15px clamp(16px,3vw,44px);border-bottom:1px solid rgba(200,248,169,.35);position:sticky;top:0;z-index:20}
.top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:34px;height:34px;display:block}
.logo .word{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.08em;color:#fff}
.logo .word b{color:var(--lime);font-weight:600}
.top-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top-nav a{color:#C4D6D0;font-size:13px}
.top-nav a:hover{color:#fff;text-decoration:none}
.top-nav .who{color:#fff;font-size:13px}
.btn-lime{background:var(--lime);border:1px solid var(--lime);border-radius:2px;padding:9px 16px;font-size:13px;font-weight:600;display:inline-block;text-decoration:none;color:#11261F !important}
.btn-lime:hover{background:#d6ffbc;text-decoration:none}

.wrap{max-width:1120px;margin:26px auto 60px;padding:0 clamp(16px,3vw,44px)}
.wrap.narrow{max-width:460px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-h h1{font-size:24px;letter-spacing:-.01em}
.page-h p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
/* the text block takes the width the page has, the same width as the cards and tables below it */
.page-h>div:first-child{flex:1 1 420px;min-width:0}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:var(--card-pad)}
.card + .card{margin-top:var(--card-gap)}
.card h2{font-size:14px;font-weight:600;margin-bottom:4px}
.card .sub{font-size:12.5px;color:var(--muted);margin-bottom:16px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.proj{display:flex;flex-direction:column;gap:7px;background:var(--deep);border:1px solid rgba(255,255,255,.13);border-radius:3px;padding:18px 20px;transition:border-color .12s,background .12s}
.proj:hover{border-color:rgba(200,248,169,.5);background:var(--bottle-2)}
.proj .proj-t{font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.proj .proj-t:hover{color:var(--lime);text-decoration:none}
.proj .proj-meta{font-size:12px;color:#A9C0B8}
.proj .proj-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.proj .proj-links a{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#DCE8E1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:4px 9px}
.proj .proj-links a:hover{background:rgba(200,248,169,.16);border-color:rgba(200,248,169,.45);color:#fff;text-decoration:none}
.proj .proj-links a .n{color:var(--lime);opacity:1;margin-left:5px}
.proj .proj-open{margin-top:11px;font-size:12.5px;font-weight:600;color:var(--lime)}
.proj .proj-open:hover{color:#fff;text-decoration:none}
/* a shared project card carries a scope chip. The light chip backgrounds disappear on the dark
   card and the teal text goes with them, so the two that need it are restated here. */
.proj .chip-ok{background:rgba(200,248,169,.16);color:var(--lime)}
.proj .chip-hot{background:rgba(255,255,255,.13);color:#FFC0AE}

.lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-bottom:7px}
.field{margin-bottom:15px}
input.txt,select.txt,textarea.txt{width:100%;background:var(--surface);border:1px solid var(--rule-strong);color:var(--ink);border-radius:2px;padding:10px 12px;font-size:14px;font-family:var(--sans)}
input.txt:focus,select.txt:focus,textarea.txt:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,110,105,.12)}
input.txt.mono,select.txt.mono{font-family:var(--mono)}
/* a question box the size of a stamp invites a one line question. This one is written to be read
   by somebody who has to answer it, so it gets room to be written in. */
textarea.txt{min-height:120px;line-height:1.5;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.money-in{position:relative}
.money-in .pre{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-family:var(--mono);font-size:14px}
.money-in input{padding-left:26px;font-family:var(--mono)}
.btn{background:var(--deep);color:#fff;border:none;border-radius:2px;padding:11px 18px;font-size:13px;font-weight:600;display:inline-block;text-decoration:none}
.btn:hover{background:var(--bottle-2);text-decoration:none}
.btn.block{width:100%;text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-strong)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{background:#d6ffbc}

.note{font-size:12.5px;color:var(--muted);margin-top:14px}
.note a{font-weight:600}
.alert{border-radius:2px;border:1px solid transparent;padding:11px 14px;font-size:13px;margin-bottom:16px}
.alert.err{background:var(--crit-bg);color:var(--crit);border-color:rgba(168,60,40,.25)}
.alert.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(31,110,105,.2)}
.alert.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(176,119,20,.28)}

/* The guide. On inside a demonstration project only, so a client reading their own job is never
   told what a column heading means by a bubble they did not ask for. */
/* fixed, not absolute: viewport coordinates only, so no scrolling container can shift it */
.cw-tip{position:fixed;z-index:9999;max-width:330px;background:var(--deep);color:#fff;
  padding:10px 13px;border-radius:3px;font-size:12.5px;line-height:1.55;font-weight:400;
  letter-spacing:0;text-transform:none;text-align:left;
  box-shadow:0 10px 28px rgba(15,61,58,.3);pointer-events:none;opacity:0;
  transition:opacity .1s ease}
.cw-tip.on{opacity:1}
/* a quiet mark that there is something to read here, never a border that moves the layout */
.cw-has-tip{cursor:help}
.cw-has-tip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
th.cw-has-tip{text-decoration:underline dotted rgba(94,114,105,.55);text-underline-offset:3px}
/* The thing being explained is marked while its bubble is up. Without this the reader has to work
   out which of two neighbouring headings the words belong to, which was the whole complaint. */
.cw-lit{outline:2px solid var(--lime);outline-offset:2px;border-radius:2px}
.side .cw-lit,.sidenav .cw-lit{outline-color:var(--lime);outline-offset:-2px}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--rule);color:var(--ink);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.r,table.tbl th.r{text-align:right}
table.tbl tbody tr:hover{background:rgba(31,110,105,.035)}
table.tbl .mono{font-family:var(--mono);font-size:12.5px}
.empty{font-size:13px;color:var(--faint);padding:14px 0}

.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.toolgrid{grid-template-columns:1fr 1fr}}
.toolgrid a{background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:11px 13px;font-size:12.5px;font-weight:600;color:var(--ink);text-align:center}
.toolgrid a:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}

/* ===== app shell: dark rail per the mockup ===== */
.shell{display:flex;min-height:100vh;align-items:stretch}
.side{width:var(--rail);flex:0 0 var(--rail);background:var(--deep);color:#DCE8E1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:0 0 16px;overflow-y:auto}
.side-brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px}
.side-brand img{width:200px;height:auto;display:block}
.side-brand .wordmark{font-size:13px;font-weight:700;letter-spacing:.18em;color:#fff;margin-top:12px;text-transform:uppercase}
.side-brand .subword{font-size:9.5px;letter-spacing:.14em;color:rgba(220,232,225,.55);margin-top:4px;text-transform:uppercase}
.side-new{display:flex;align-items:center;gap:8px;background:var(--lime);color:var(--ink);border-radius:2px;padding:10px 14px;font-size:13px;font-weight:600;margin:0 16px 16px}
.side-new span{font-size:15px;line-height:1;margin-top:-1px}
.side-new:hover{background:#d6ffbc;text-decoration:none}
.railgroup{padding:4px 0 8px}
.railgroup h6{margin:0;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(220,232,225,.42);padding:12px 20px 7px;font-weight:600}
.railproj{font-size:13px;font-weight:600;color:#fff;padding:0 20px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenav{display:flex;flex-direction:column}
.sidenav a{display:flex;align-items:center;gap:11px;padding:9px 20px;border-left:2px solid transparent;color:rgba(220,232,225,.78);font-size:13.5px;font-weight:500}
.sidenav a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.sidenav a.on{background:rgba(200,248,169,.1);color:#fff;border-left-color:var(--lime);font-weight:600}
.sidenav a svg{width:17px;height:17px;flex:none;opacity:.85}
.side-foot{margin-top:auto;padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.1)}
.side-help{font-size:11px;color:rgba(220,232,225,.5);line-height:1.6;margin-bottom:10px}
.side-help a{color:rgba(220,232,225,.8);font-weight:600}
.side-out{padding:0;color:rgba(220,232,225,.6);font-size:12.5px;font-weight:600}
.side-out:hover{color:#fff}
/* The work area takes the window. A cap made sense when every page was a form; the registers
   are tables with eight columns, and a cap only pushed figures onto a second line. */
.main{flex:1;min-width:0;padding:26px 34px 60px;max-width:none}
/* a figure never wraps: "43 d" on two lines reads as two numbers */
table.tbl td.nw,table.tbl th.nw{white-space:nowrap}
/* rows whose first cell carries a name over a smaller line: everything else on the row sits on
   the middle of that block rather than on its top edge, so the eye reads one line, not a stack */
table.tbl.mid td{vertical-align:middle}
/* a figure above the guaranteed maximum price is the one number on the row that must not be scanned past */
table.tbl td.over{color:var(--flag);font-weight:600}
@media (max-width:820px){
  .shell{display:block}
  .side{width:auto;flex:none;position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px;padding:10px 12px}
  .side-brand{padding:6px 10px;border:0;margin:0}
  .side-brand .wordmark,.side-brand .subword{display:none}
  .side-new{margin:0 8px}
  .sidenav{flex-direction:row;flex-wrap:wrap}
  .sidenav a{border-left:0;border-bottom:2px solid transparent;padding:8px 10px}
  .sidenav a.on{border-bottom-color:var(--lime)}
  .side-foot{display:none}
  .main{padding:20px 16px 50px}
}

/* ===== project sub-nav (tabs) ===== */
.subnav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin:6px 0 22px}
.subnav a{padding:9px 13px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink);text-decoration:none}
.subnav a.on{color:var(--deep);border-bottom-color:var(--deep)}
.subnav a .n{font-size:11px;color:var(--faint);margin-left:5px;font-family:var(--mono)}
.subnav a.on .n{color:var(--teal)}

/* ===== chat ===== */
.chat{display:flex;flex-direction:column;gap:12px;max-height:56vh;overflow-y:auto;padding:4px 4px 6px}
.msg{max-width:76%;padding:11px 14px;border-radius:3px;font-size:13.5px;line-height:1.5}
.msg .meta{font-size:10.5px;color:var(--faint);margin-top:5px}
.msg.them{align-self:flex-start;background:var(--surface-2);border:1px solid var(--rule)}
.msg.me{align-self:flex-end;background:var(--deep);color:#fff}
.msg.me .meta{color:#9fc2b6}
.msg.staff{align-self:flex-start;background:rgba(31,110,105,.07);border:1px solid rgba(31,110,105,.2)}
.chat-empty{color:var(--faint);font-size:13px;padding:16px 0;text-align:center}
.composer{display:flex;gap:10px;margin-top:14px}
.composer textarea{flex:1;background:var(--surface);border:1px solid var(--rule-strong);color:var(--ink);border-radius:2px;padding:11px 12px;font-size:14px;font-family:var(--sans);resize:vertical;min-height:46px}
.composer textarea:focus{outline:none;border-color:var(--teal)}
.badge-staff{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);background:rgba(31,110,105,.1);border-radius:2px;padding:2px 7px;margin-left:6px;vertical-align:middle}

/* ===== RFI ===== */
.rfi{border:1px solid var(--rule);border-radius:3px;padding:15px 16px;margin-bottom:12px;background:var(--surface)}
.rfi .rfi-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rfi .rfi-t{font-size:14.5px;font-weight:600;color:var(--ink)}
.rfi .rfi-b{font-size:13px;color:var(--body);margin:6px 0 0;white-space:pre-wrap}
.rfi .rfi-meta{font-size:11px;color:var(--faint);margin-top:8px}
.st{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 9px;border-radius:2px;flex:none}
.st.open{background:var(--warn-bg);color:var(--warn)}
.st.answered{background:var(--ok-bg);color:var(--ok)}
.st.closed{background:var(--surface-2);color:var(--muted)}
.reply{border-top:1px solid var(--rule);margin-top:11px;padding-top:11px}
.reply .r{font-size:12.5px;color:var(--body);margin-bottom:9px;white-space:pre-wrap}
.reply .r b{color:var(--ink)}
.reply .r .rm{color:var(--faint);font-weight:400;font-size:10.5px;margin-left:6px}
/* a control and the button that submits it sit on one line, centred against each other.
   Without align-items a textarea and a button line up on their text baselines, which puts the
   button a few pixels low and reads as a mistake. */
.inline-form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.inline-form input.txt,.inline-form textarea{flex:1;min-width:200px}
/* Pole daty ma stala ilosc do pokazania i nie umie pokazac mniej: albo miesci cala date,
   albo urywa rok. Regula wyzej dawala mu flex:1, czyli flex-basis 0, wiec jego wlasna
   szerokosc nie liczyla sie wcale i dostawalo tylko udzial w wolnym miejscu. W komorce
   tabeli obok listy wyboru i dwoch przyciskow wychodzilo z tego 77 pikseli przy 117
   potrzebnych. Nie rozciaga sie i nie kurczy. */
.inline-form input[type="date"]{flex:0 0 auto;min-width:0;width:130px}
.inline-form textarea{background:var(--surface);border:1px solid var(--rule-strong);border-radius:2px;padding:9px 11px;font-family:var(--sans);font-size:13.5px;resize:vertical}
.btn.sm{padding:9px 14px;font-size:12.5px}
.stat{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.stat .box{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:12px 16px;min-width:120px}
.stat .box .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .box .v{font-family:var(--mono);font-size:22px;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}

footer{padding:18px 30px 40px;color:var(--faint);font-size:11.5px;line-height:1.6;text-align:center}
footer b{color:var(--muted)}
::selection{background:var(--lime);color:var(--deep)}

/* sign out is a POST, styled as the link it replaces */
/* the sign out form is the only one that is not a flex row, and it says so itself below */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linkbtn:hover{text-decoration:underline}
.side .inline-form{display:block}

/* Costwitness logo in the top bar */
.logo-img{height:34px;width:auto;display:block}

/* ---------- Stage 3 modules ---------- */
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
@media(max-width:900px){.tiles4{grid-template-columns:1fr 1fr}}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:16px 18px}
.tile .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tile .big{font-size:26px;font-weight:600;margin-top:6px;letter-spacing:-.02em;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tile .note{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.tile.hot{border-color:rgba(168,60,40,.42);background:rgba(168,60,40,.035)}
.tile.hot .big{color:var(--flag)}
.chip{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2.5px 8px;border-radius:2px;white-space:nowrap}
.chip-ok{background:rgba(31,110,105,.1);color:var(--teal)}
.chip-warn{background:var(--lime);color:var(--ink)}
.chip-hot{background:rgba(168,60,40,.12);color:var(--flag)}
/* neutral: says nothing good or bad, for a state the product cannot judge */
.chip-off{background:rgba(15,61,58,.07);color:var(--muted)}
/* a warning is not good news. The lime chip is a brand accent used for categories, not for states. */
.chip-amber{background:var(--warn-bg);color:var(--warn)}
.h-sub{font-size:11px;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:.04em}
.btn2{background:transparent;border:1px solid var(--rule-strong);border-radius:2px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--deep)}
.rowdel{background:none;border:0;color:var(--flag);font-size:18px;cursor:pointer;line-height:1}
#linestbl input.txt,#linestbl select.txt{padding:6px 8px;font-size:13px}

/* ---------- Contingency ledger, twin drawdown per the mockup ---------- */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:6px 0 4px}
@media(max-width:700px){.twin{grid-template-columns:1fr;gap:26px}}
.twcol{position:relative}
.twhead{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:600;margin-bottom:11px}
.twtrack{position:relative;height:250px;border:1px solid var(--rule-strong);border-radius:2px;background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(15,61,58,.05) 24px 25px);overflow:hidden}
.twfill{position:absolute;left:0;right:0;bottom:0;background:var(--teal)}
.twfill.hot{background:var(--flag)}
.twfill::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.6)}
.twfoot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:10px}
.readout{border-top:1px solid var(--rule);padding:14px 0 2px;font-size:13px;color:var(--muted);line-height:1.55;margin-top:16px}
.readout b{color:var(--ink);font-weight:600}

/* ===== Setup screen =====
   A checklist reads badly as a table: the state, the sentence and the action belong on one line,
   and a table pushes the action to the far edge with dead space in between. Here the row is the
   unit, the sentence takes the space that is going spare, and the action sits at the end of it. */
.su-prog{display:flex;gap:4px;margin:2px 0 16px}
.su-prog span{flex:1;height:6px;border-radius:2px;background:rgba(15,61,58,.1)}
.su-prog span.on{background:var(--teal)}
.su-head{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.su-head b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.su-head span{font-size:12.5px;color:var(--muted)}
.su-next{display:flex;align-items:center;gap:20px;justify-content:space-between;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--teal);border-radius:3px;padding:16px 20px;margin-bottom:16px;flex-wrap:wrap}
.su-next>div:first-child{flex:1 1 420px;min-width:0}
.su-next .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.su-next h3{font-size:16px;margin:3px 0 3px}
.su-next .d{font-size:12.5px;color:var(--muted)}
.su-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.su-row:last-child{border-bottom:0}
.su-row .st{flex:0 0 64px;padding-top:1px}
.su-row .bd{flex:1 1 auto;min-width:0}
.su-row .bd b{display:block;font-size:13.5px;margin-bottom:2px}
.su-row .bd span{font-size:12.5px;color:var(--muted)}
.su-row .ac{flex:0 0 auto;padding-top:1px}
/* the action carries a border so the right edge of the row reads as deliberate, not as leftover
   space. A bare word out there looks like the row ran out before it reached the end. */
.su-row .ac a{display:inline-block;border:1px solid var(--rule-strong);border-radius:2px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.su-row .ac a:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
.su-docs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){.su-docs{grid-template-columns:1fr}}
.su-doc{border:1px solid var(--rule);border-radius:3px;padding:14px 16px;background:var(--surface-3)}
.su-doc .h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.su-doc .h b{font-size:13px}
.su-doc p{margin:0 0 9px;font-size:12.5px;color:var(--muted);line-height:1.45}
.su-doc .f{font-family:var(--mono);font-size:11.5px;color:var(--faint);word-break:break-all}


/* ===== project tabs =====
   The rail carries the work of the job, grouped by the stage it belongs to. These are the places
   you look rather than work you do, so they sit across the top where a tab row belongs and stop
   the rail from growing every time a screen is added. */
.ptabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin:-4px 0 22px}
.ptabs a{padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ptabs a:hover{color:var(--ink);text-decoration:none}
.ptabs a.on{color:var(--ink);border-bottom-color:var(--teal)}


/* ===== two levels, kept apart =====
   Outside a project there is no rail: the account is a short list of places, and a rail full of
   one project's modules beside a list of all projects is what made the two levels blur into one.
   The bar carries the account. The rail, when it appears, carries one project and says so. */
/* The brand block is exactly as wide as the rail below it, so the nav begins on the same
   vertical line as the white work area. A menu that starts a few pixels off that line reads as
   a mistake even to somebody who cannot say why. */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:0;height:52px;padding:0 20px 0 0;background:var(--deep);border-bottom:1px solid rgba(200,248,169,.22)}
.ab-brand{display:flex;align-items:center;gap:9px;flex:0 0 var(--rail);width:var(--rail);padding-left:20px;box-sizing:border-box;color:#fff;font-family:var(--display);font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.ab-brand:hover{text-decoration:none}
.ab-brand b{font-weight:700}
.ab-brand img{display:block;width:26px;height:26px}
.ab-nav{display:flex;align-items:center;gap:17px;flex:1;flex-wrap:wrap}
.ab-nav a{color:#A9C0B8;font-size:13.5px;font-weight:600;padding:16px 0;border-bottom:2px solid transparent;white-space:nowrap}
.ab-nav a:hover{color:#fff;text-decoration:none}
/* Sesja pokazowa. Zamiast odnosnikow do listy projektow i wiadomosci stoi w pasku jedno slowo
   o tym, gdzie sie jest. Nie jest odnosnikiem, bo nie ma tu dokad isc. */
.ab-demo{color:#C8F8A9;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
/* Powrot na strone. Wyglada jak pozostale odnosniki w pasku, bo nim jest, ale stoi obok
   napisu o demie, a nie w rzedzie nawigacji, ktorej w sesji pokazowej nie ma. */
.ab-demo-back{color:#A9C0B8;font-size:13px;font-weight:600;white-space:nowrap}
.ab-demo-back:hover{color:#fff;text-decoration:none}
.ab-nav a.on{color:#fff;border-bottom-color:var(--lime)}
.ab-sep{width:1px;height:18px;background:rgba(255,255,255,.18);flex:0 0 1px}
.ab-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.ab-right a,.ab-right button{color:#A9C0B8;font-size:13px;font-weight:600;background:none;border:0;padding:0;font-family:var(--sans)}
.ab-right a:hover,.ab-right button:hover{color:#fff;text-decoration:none;cursor:pointer}
/* Przycisk probny w pasku, tylko w sesji pokazowej. Bez tego wiersza reguly wyzej zabieraja mu
   tlo i zostaje ciemny napis na ciemnym pasku. Zobaczylem to na szkicu, zanim cokolwiek poszlo
   na serwer, i dlatego ten wiersz tu jest. */
.ab-right a.btn-lime{background:var(--lime);color:#11261F;padding:8px 14px;border-radius:2px;font-weight:600}
.ab-right a.btn-lime:hover{background:#d6ffbc;color:#11261F}
/* the guide switch, which has to say which state it is in without being read twice */
.ab-guide{border:1px solid rgba(169,192,184,.35)!important;border-radius:2px;padding:3px 9px!important}
.ab-guide.on{background:var(--lime);border-color:var(--lime)!important;color:var(--deep)!important}
.ab-guide.on:hover{color:var(--deep)!important}

.side{top:52px;height:calc(100vh - 52px)}
.side-proj{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.side-proj .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(220,232,225,.5);font-weight:700}
.side-proj .n{margin-top:6px;font-size:15px;font-weight:600;color:#fff;line-height:1.25}
.side-back{display:block;color:#A9C0B8;font-size:12.5px;font-weight:600;padding:0 20px}
.side-back:hover{color:var(--lime);text-decoration:none}
@media (max-width:820px){.appbar{height:auto;padding:10px 16px;flex-wrap:wrap;gap:12px}.ab-brand{flex:0 0 auto;width:auto;padding-left:0}.ab-nav a{padding:4px 0}.side{position:static;height:auto}}


/* The preview banner. Loud on purpose: a reviewer who forgets they are in client view spends ten
   minutes wondering where their tools went, and blames the product rather than the switch. */
/* Pasek stanu konta i pasek podgladu klienta.
   Byly przyklejone na top:52px, czyli pod paskiem gornym. Lewa szyna projektu jest wlasnym
   sticky na top:0 i nie ma z-index, wiec przy przewijaniu wjezdzala POD te paski i widac ja
   bylo przez nie. Naprawa nie polega na dobraniu z-index, tylko na wyjeciu ich ze stosu:
   to sa ogloszenia, nie przyrzady, wiec moga odjechac z trescia. Ponizej 820 pikseli i tak
   juz tak dzialaly, wiec teraz jest jedna regula zamiast dwoch. */
.asclient{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--lime);color:var(--ink);padding:9px 20px;font-size:13px;border-bottom:1px solid rgba(15,61,58,.2)}
.asclient button{background:var(--deep);color:#fff;border:0;border-radius:2px;padding:7px 14px;font-size:12.5px;font-weight:600;font-family:var(--sans);cursor:pointer}
.asclient button:hover{background:var(--bottle-2)}


/* The trial banner. Quiet until the last week, then insistent. It never blocks the page, because
   a product that hides a client's own record behind a payment prompt has forgotten whose record
   it is. */
.trialbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--warn-bg);color:var(--ink);padding:9px 20px;font-size:13px;border-bottom:1px solid rgba(176,119,20,.3)}
/* --crit-bg to rgba(168,60,40,.08), czyli osiem procent krycia. Jako delikatne tlo komunikatu
   na bialej karcie dziala; jako tlo paska, pod ktorym przewija sie strona, przepuszczal tekst
   i pasek wygladal na uszkodzony. #F8EFEE to ten sam kolor policzony na bialym tle, wiec
   wyglada tak samo, a niczego juz nie przepuszcza. Wlacza sie na dwa dni przed koncem okresu
   probnego i po nim, czyli dokladnie wtedy, kiedy ten pasek ma byc czytelny. */
.trialbar.out{background:#F8EFEE;border-bottom-color:rgba(168,60,40,.3)}
.trialbar .btn{padding:7px 14px;font-size:12.5px}

/* ---------------------------------------------------------------------------------------------
   Ponizej 560 pikseli mamy telefon, a nie waski pulpit.
   Do tej pory najwezsza regula w tym pliku konczyla sie na 560, wiec telefon dostawal uklad
   tabletu: tabela z szescioma kolumnami szersza niz ekran, ktora przepychala w bok cala strone.
   Dwie kolumny wypadaly poza krawedz, w tym ta ze stanowiskiem, czyli z odpowiedzia.
   Teraz przewija sie sama tabela, a strona stoi.
   --------------------------------------------------------------------------------------------- */
@media (max-width:560px){
  table.tbl{display:block;width:100%;overflow-x:auto}
  /* glowa i tresc jako osobne tabele o tej samej szerokosci minimalnej, zeby kolumny nadal
     stały w jednej linii mimo zwijania */
  table.tbl thead,table.tbl tbody{display:table;width:100%;min-width:520px}
  table.tbl th,table.tbl td{padding-left:10px;padding-right:10px}

  .page-h h1{font-size:22px;line-height:1.15}
  .page-h{flex-wrap:wrap;gap:10px}

  .appbar{padding:10px 12px}
  .ab-nav{flex:1 1 100%;overflow-x:auto;gap:16px}
  .ab-nav a{white-space:nowrap;padding:6px 0}

  .grid,.tiles4,.twin,.row2,.su-docs{grid-template-columns:1fr}

  /* .su-row jest rzedem trzech kolumn o stalych szerokosciach. Na telefonie ostatnia z nich,
     czyli przycisk, nie miesci sie i wypycha karte poza ekran. Rzad staje sie kolumna. */
  .su-row{flex-wrap:wrap;gap:10px}
  .su-row .st{flex:0 0 auto}
  .su-row .bd{flex:1 1 100%;order:2}
  .su-row .ac{flex:1 1 100%;order:3}
  .su-row .ac .btn,.su-row .ac .btn2,.su-row .ac a{width:100%;text-align:center}
}

/* ---------------------------------------------------------------------------------------------
   Ciemny pas na gorze ekranu, na ktorym cos sie zaczyna.
   Dwa miejsca i tylko dwa: naglowek pulpitu i pierwszy ekran nowego konta. Na ekrany robocze,
   czyli rejestry i tabele, to nie wchodzi, bo w nie sie patrzy godzinami, a cyfry czyta sie
   gorzej na ciemnym. Ciemne tlo ma zatrzymac wzrok raz, a nie meczyc go caly czas.
   --------------------------------------------------------------------------------------------- */
.page-h.hero{
  display:block;background:var(--bottle);border-radius:12px;
  padding:26px 28px;margin:0 0 22px;
}
.page-h.hero h1{color:#fff;font-size:27px;line-height:1.18;max-width:22ch}
/* akcent pada raz na naglowek, nigdy dwa razy */
.page-h.hero h1 em{font-style:normal;color:var(--lime)}
.page-h.hero p{color:#BCD5D0;max-width:62ch;font-size:14px;margin-top:10px}
.page-h.hero .heroact{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.page-h.hero .btn2{border-color:rgba(200,248,169,.35);color:var(--lime);background:transparent}
.page-h.hero .btn2:hover{background:rgba(200,248,169,.1)}

/* pusty stan: ten sam pas, a w nim jedna droga wyrozniona i jedna cicha */
.card.hero-empty{background:var(--bottle);border:0;border-radius:12px;padding:var(--card-pad)}
.card.hero-empty h2{color:#fff}
.card.hero-empty h2 .h-sub{color:var(--lime)}
.card.hero-empty .su-row{border-color:rgba(255,255,255,.12)}
.card.hero-empty .bd b{color:#fff}
.card.hero-empty .bd span{color:#BCD5D0}
.card.hero-empty .btn{background:var(--lime);color:var(--bottle);border-color:var(--lime)}
.card.hero-empty .btn2{border-color:rgba(200,248,169,.35);color:var(--lime);background:transparent}
.card.hero-empty .chip-ok{background:var(--lime);color:var(--bottle);border-color:var(--lime)}
.card.hero-empty .chip-off{background:transparent;color:#BCD5D0;border-color:rgba(255,255,255,.22)}

@media (max-width:560px){
  .page-h.hero,.card.hero-empty{padding:var(--card-pad);border-radius:10px}
  .page-h.hero h1{font-size:22px}
}

/* ---------------------------------------------------------------------------------------------
   Szyna projektu na telefonie.
   Przy 820 pikselach szyna przestaje byc kolumna z boku i staje sie blokiem nad trescia. Na
   telefonie ten blok zajmowal caly pierwszy ekran: nazwa projektu, trzy naglowki grup i dziewiec
   odnosnikow, zanim czytelnik zobaczyl cokolwiek. Teraz jest to jeden pasek przewijany palcem,
   czyli tak, jak telefony pokazuja sekcje.
   Nazwa projektu znika stad, bo stoi juz dwa razy nizej: w okruszkach i w naglowku strony.
   --------------------------------------------------------------------------------------------- */
@media (max-width:560px){
  .side{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;width:auto;flex:none;
        overflow-x:auto;white-space:nowrap;padding:0 4px;
        border-bottom:1px solid rgba(255,255,255,.12)}
  .side-brand,.side-foot,.side-new,.side-proj,.side-back{display:none}
  /* naglowki grup znikaja: w jednym pasku szara etykieta miedzy odnosnikami czyta sie
     jak pozycja, ktora nie dziala, a nie jak naglowek */
  .railgroup{display:flex;padding:0;flex:none}
  .railgroup h6{display:none}
  .sidenav{display:flex;flex-direction:row}
  /* ten sam ksztalt co .ptabs: rowna wysokosc, podkreslenie zamiast tla */
  .sidenav a{display:flex;align-items:center;height:44px;padding:0 13px;gap:0;
             border-left:0;border-bottom:2px solid transparent;
             font-size:13px;font-weight:600;color:rgba(220,232,225,.78)}
  .sidenav a.on{background:transparent;border-left-color:transparent;
                border-bottom-color:var(--lime);color:#fff}
  .sidenav a:hover{background:transparent;color:#fff}
  .sidenav a svg{display:none}

  /* gorny pasek: te same pozycje, mniej powietrza */
  .appbar{padding:8px 14px;gap:8px}
  .ab-nav{gap:14px}
  .ab-nav a{font-size:13px;padding:3px 0}
  .ab-right{gap:10px;flex-wrap:wrap}
  .ab-right a,.ab-right button{font-size:12px}
}