*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;line-height:1.5}
a{color:inherit}
main{max-width:1180px;margin:0 auto;padding:32px 20px 72px}
/* Georgian has no capitals: section labels are plain sentence case, set apart by weight and colour, not by size. */
h2{font-size:15px;margin:0 0 12px;font-weight:600;color:var(--ink)}
main>section,.two{margin-top:34px}
.calm{margin:0;padding:18px 16px;color:var(--muted)}
b,strong,.num,.when{font-variant-numeric:tabular-nums}

/* greeting and the one main action */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.today{margin:0;color:var(--muted);font-size:14px;font-weight:500}
.hero h1{margin:4px 0 0;font-size:28px;font-weight:700;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
.main-action{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r-md);background:var(--accent);color:#fff;font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 30%,transparent),0 6px 14px -4px var(--accent-glow);transition:transform .14s var(--ease-out),box-shadow .16s ease,background-color .16s ease}
.main-action:active{transform:scale(.97)}

/* what waits today: the first tile is the most urgent and gets the most room */
.tiles{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:2px;padding:20px 20px 18px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-1);text-decoration:none;transition:transform .16s var(--ease-out),box-shadow .16s ease,opacity .26s var(--ease-out)}
.tile:active{transform:scale(.985)}
.tile .num{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--accent)}
.tile.warn .num{color:var(--warn)}
.tile.go .num{color:var(--ok)}
.tile strong{font-size:16px;font-weight:600;margin-top:10px;text-wrap:balance}
.tile .text{color:var(--muted);font-size:13.5px;flex:1;max-width:34ch;text-wrap:pretty}
.tile em{font-style:normal;font-weight:600;font-size:14px;color:var(--accent);margin-top:12px}
.tile.warn{background:linear-gradient(180deg,var(--warn-soft),#fff 62%)}
/* a short cascade when the page opens; seen a few times a day, so quick and small */
.tile{@starting-style{opacity:0;transform:translateY(6px)}}
.tile:nth-child(2){transition-delay:0s,0s,.04s}
.tile:nth-child(3){transition-delay:0s,0s,.08s}
.tile:nth-child(4){transition-delay:0s,0s,.12s}
/* placeholders in the shape of the tiles while the numbers load */
.tiles .ghost{height:176px;border-radius:var(--r-lg);background:linear-gradient(100deg,var(--line) 30%,var(--ground) 50%,var(--line) 70%);background-size:220% 100%;animation:shimmer 1.1s linear infinite}
@keyframes shimmer{to{background-position:-120% 0}}

/* two lists side by side */
.two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.panel{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px}
.panel header h2{margin:0}
.panel header a{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;border-radius:var(--r-sm)}
.rows .row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);text-decoration:none;transition:background-color .12s ease}
.rows a.row:active{background:var(--ground)}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:#e2a03f;box-shadow:0 0 0 3px #e2a03f26}
.dot.hard{background:#d2463c;box-shadow:0 0 0 3px #d2463c26}
.what{display:flex;flex-direction:column;min-width:0;flex:1.2}
.what strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.what small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.why{flex:1.4;color:var(--ink);font-size:13.5px}
.when{flex:none;padding:3px 9px;border-radius:var(--r-sm);background:var(--ground);color:var(--muted);font-size:12.5px;font-weight:500;white-space:nowrap}
.when.near{background:var(--warn-soft);color:var(--warn);font-weight:600}
.go{flex:none;color:#b3bcc7;font-size:16px;transition:transform .16s var(--ease-out),color .12s ease}
#soon .what{flex:2.2}
#soon .why{flex:none;color:var(--muted);font-size:12.5px}

/* the path of an order, one slim line */
.journey{display:flex;align-items:stretch;gap:4px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:8px}
.arrow{align-self:center;color:#b3bcc7;font-size:20px}
.step{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);text-decoration:none;transition:background-color .12s ease,transform .14s var(--ease-out)}
.step:active{transform:scale(.98)}
.step i{flex:none;font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background-color .12s ease,color .12s ease}
.step span{display:flex;flex-direction:column;min-width:0;flex:1}
.step strong{font-size:13.5px;font-weight:600;line-height:1.25}
.step small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step b{flex:none;font-size:18px;font-weight:700;color:var(--ink)}
.step b.zero{color:#c3cad3;font-weight:500}

/* hover only where there is a real pointer; a tap on a phone must not leave things lifted */
@media(hover:hover) and (pointer:fine){
 .main-action:hover{background:var(--accent-strong);box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 30%,transparent),0 10px 20px -6px var(--accent-glow)}
 .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
 .tile:hover:active{transform:translateY(0) scale(.985)}
 .rows a.row:hover{background:color-mix(in srgb,var(--ground) 60%,#fff)}
 a.row:hover .go{color:var(--accent);transform:translateX(3px)}
 .step:hover{background:var(--accent-soft)}
 .step:hover i{background:var(--accent);color:#fff}
 .panel header a:hover{text-decoration:underline}
}
@media(prefers-reduced-motion:reduce){
 .tile,.main-action,.step,.go{transition:opacity .2s ease,background-color .12s ease,box-shadow .16s ease}
 .tile:hover,.tile:active,.main-action:active,.step:active{transform:none}
 .tiles .ghost{animation:none}
}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}.journey{flex-direction:column}.arrow{display:none}}
@media(max-width:560px){main{padding:20px 12px 48px}.hero h1{font-size:23px}.tiles{grid-template-columns:1fr}.why{display:none}}

/* palette choice: five swatches, one click, remembered on this computer */
.palette{display:flex;align-items:center;gap:10px;margin-top:40px;color:var(--muted);font-size:13.5px}
.palette button{width:26px;height:26px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);padding:0;cursor:pointer;transition:transform .14s var(--ease-out),box-shadow .14s ease}
.palette button:active{transform:scale(.92)}
.palette button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
/* The tile tone "go" shares its name with the row arrow above; a tile keeps its own text colour and size. */
.tile.go{color:var(--ink);font-size:inherit}
/* "How an order goes" sits inside a panel: one frame, not a card in a card; the small line may wrap instead of being cut. */
.panel .journey{background:none;box-shadow:none;border-radius:0;padding:10px 8px 12px}
.step small{white-space:normal;line-height:1.3}
/* A person with one thing to do (worker, inspector) gets one wide tile, not a small one in an empty row. */
.tiles:has(>.tile:only-child){grid-template-columns:1fr}
.tiles>.tile:only-child{flex-direction:row;align-items:center;gap:18px;padding:22px 24px}
.tiles>.tile:only-child strong{margin-top:0;font-size:18px}
.tiles>.tile:only-child .text{max-width:none}
.tiles>.tile:only-child em{margin-top:0;white-space:nowrap}
/* Two or three tiles fill the row instead of leaving an empty place. */
@media(min-width:1001px){.tiles:has(>.tile:nth-child(3):last-child){grid-template-columns:1.35fr 1fr 1fr}.tiles:has(>.tile:nth-child(2):last-child){grid-template-columns:1.35fr 1fr}}

/* Start page as a dashboard (update 77): four numbers, three pictures, two short lists, the order's path. */
main#content{max-width:1280px}
.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{padding:18px 20px 16px;gap:0}
.tile .num{font-size:38px}
.tile strong{font-size:14.5px;font-weight:500;color:var(--muted);margin-top:8px}
.tile em{font-size:13px;margin-top:14px}
.charts{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(220px,.8fr);gap:14px;margin:14px 0}
.chart-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chart-card .chip{font-size:12.5px;color:var(--muted);background:var(--ground);padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.chart-area{position:relative;height:230px;padding:6px 16px 16px}
.donut{display:grid;gap:12px;padding:8px 18px 18px}.donut canvas{max-height:150px}
.legend{display:grid;gap:7px;font-size:13.5px}.legend span{display:flex;align-items:center;gap:8px;color:var(--muted)}.legend i{width:9px;height:9px;border-radius:50%}.legend b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.panel.flow{margin-top:14px}.panel.flow .journey{padding:14px 16px 18px}
.rows .why{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1200px){.charts{grid-template-columns:1fr 1fr}.chart-card.slim{grid-column:1 / -1}.donut{grid-template-columns:160px 1fr;align-items:center}}
@media(max-width:760px){.tiles{grid-template-columns:1fr 1fr}.charts{grid-template-columns:1fr}.donut{grid-template-columns:1fr}}