:root{
  --ink:#1d2321; --muted:#6b7672; --line:#e2e6e4; --bg:#f7f8f7; --card:#fff;
  --green:#2f6b4f; --red:#9b2c2c; --amber:#8a6d1f; --amberbg:#fdf6e3; --accent:#3f7d62;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:var(--ink);color:#fff;padding:.7rem 1.2rem}
nav a{color:#dfe7e3;text-decoration:none;font-size:.94rem}
nav a:hover{color:#fff;text-decoration:underline}
nav a.refresh{padding:.28rem .55rem;border-radius:7px;background:rgba(255,255,255,.1);font-weight:600}
nav a.refresh:hover{background:rgba(255,255,255,.18);text-decoration:none}
nav a.right{margin-left:auto}
.brand{font-weight:700;letter-spacing:.06em;margin-right:.6rem}
.brand em{font-style:normal;font-weight:400;opacity:.75}
main{max-width:1060px;margin:0 auto;padding:1.4rem 1.2rem 4rem}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.12rem;margin:1.8rem 0 .6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.card.narrow{max-width:26rem;margin:3rem auto}
.tiles{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem}
.tile span{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.tile strong{display:block;font-size:1.45rem;margin-top:.2rem}
.tile.good strong{color:var(--green)}
.cogs{font-size:1.9rem;font-weight:700;margin:.3rem 0 1rem;color:var(--accent)}
.cogs small{display:block;font-size:.82rem;font-weight:400;color:var(--muted);margin-top:.15rem}
table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1rem}
th,td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f0f3f1;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.total td{font-weight:700;background:#f4f7f5;border-bottom:none}
tr.assumed{background:var(--amberbg)}
small{color:var(--muted);font-size:.8rem}
.minus{color:var(--red)}
.good{color:var(--green)}
.bad{color:var(--red)}
.note,.warn{border-radius:10px;padding:.7rem .9rem;margin:0 0 1rem;font-size:.92rem}
.note{background:#eef4f1;border:1px solid #cfe0d7}
.warn{background:var(--amberbg);border:1px solid #e6d9a8;color:var(--amber)}
.pill{display:inline-block;background:#e6efe9;color:var(--accent);border-radius:999px;
  padding:.1rem .55rem;font-size:.72rem;font-weight:600;vertical-align:middle}
.warnpill{background:#f6ecc9;color:var(--amber)}
form.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
label{display:block;font-size:.82rem;color:var(--muted)}
label.check{display:flex;gap:.35rem;align-items:center;padding-bottom:.5rem}
input,select{display:block;margin-top:.2rem;padding:.45rem .55rem;font-size:.95rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);min-width:8rem}
button{padding:.5rem .95rem;font-size:.95rem;font-weight:600;border:0;border-radius:8px;
  background:var(--accent);color:#fff;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.link{background:none;color:var(--muted);padding:0;font-weight:400;font-size:.82rem;
  text-decoration:underline}
details{margin-top:.8rem}
summary{cursor:pointer;font-size:.9rem;color:var(--accent);font-weight:600}
ol{padding-left:1.3rem}
ol li{margin-bottom:.45rem}
@media (max-width:640px){
  table{display:block;overflow-x:auto;white-space:nowrap}
  .cogs{font-size:1.55rem}
}

/* Tap-to-open sections made by fold.js (same behaviour as the LUUBA service desk). */
details.fold-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:0;margin:0 0 1rem}
details.fold-panel > summary{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.2rem;
  cursor:pointer;list-style:none;color:var(--ink);font-size:1rem;font-weight:400}
details.fold-panel > summary::-webkit-details-marker{display:none}
details.fold-panel > summary h2{flex:1;min-width:0;margin:0;font-size:1.12rem}
details.fold-panel[open] > summary{border-bottom:1px solid var(--line)}
details.fold-panel > .section-body{padding:1rem 1.2rem 1.1rem}
details.fold-panel > .section-body > table:last-child{margin-bottom:0}
details.fold-panel > .section-body > :first-child{margin-top:0}
.section-chevron{font-size:1.5rem;line-height:1;color:var(--accent);transition:transform .15s}
details.fold-panel[open] > summary .section-chevron{transform:rotate(90deg)}
@media (max-width:640px){
  details.fold-panel > summary{padding:.8rem 1rem}
  details.fold-panel > summary h2{font-size:1.02rem}
  details.fold-panel > .section-body{padding:.8rem 1rem 1rem}
}
@media print{details.fold-panel .section-chevron{display:none}}