/* ═══ layout ═══════════════════════════════════════════════════════════════
   The frame every section renders into: page width, the header block, section
   headings, and the tab strip.

   One max-width (1080px) shared with the mega panel, so the panel's columns
   line up with the page beneath it when it opens. That alignment is most of
   why the panel reads as part of the page rather than an overlay on it.      */

/* 1280, up from 1080. On the 1920-wide screens this product actually runs on,
   a 1080 column left a quarter of the glass empty either side and the home
   page read as a strip down the middle. The mega panel (nav.css) moves with
   it — the alignment between the two is the point of sharing a number. */
.wrap{max-width:1280px;margin:0 auto;padding:32px 20px 64px}
.wrap.wide{max-width:1560px}

.crumbs{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:8px;
}
.crumbs a:hover{color:var(--ink-2)}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:var(--d-card)}
.pagehead .actions{display:flex;gap:8px;flex:none;padding-top:4px;flex-wrap:wrap}
.sub{color:var(--ink-2);font-size:var(--d-body);margin:0;max-width:62ch;line-height:1.55}

.sec{margin:32px 0 12px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sec:first-child{margin-top:0}
.sec .hint{font-size:var(--fs-sm);color:var(--ink-3);text-align:right}
/* A heading that owns the block under it, used where a page has three or four
   distinct areas rather than one list. */
.sechead{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:32px 0 12px;
}
.sechead::before{
  content:"";width:16px;height:3px;border-radius:var(--r-full);flex:none;
  background:var(--accent);
}
.sechead:first-child{margin-top:0}
/* …except under Home's greeting and check-in, where it is first in its own box
   and still follows something. */
#company > .sechead:first-child, #mine > .sechead:first-child{margin-top:24px}

/* ── tab strip ─────────────────────────────────────────────────────────── */
/* Brighter than the muted strip it replaced — his ask. The active tab wears
   the accent (a coloured underline AND a soft wash), the resting ones light
   up on hover, so the strip reads as a control rather than grey words. */
.views{display:flex;gap:4px;margin-bottom:20px;border-bottom:1.5px solid var(--line);overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.view{
  padding:8px 12px;font-size:var(--fs-md);font-weight:500;color:var(--ink-2);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-2px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.view:hover{color:var(--ink);background:color-mix(in srgb, var(--accent) 7%, transparent)}
.view.on{
  color:var(--accent-ink);font-weight:600;border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── grids ─────────────────────────────────────────────────────────────── */
/* A row of figures sits on the ground as one band, ruled above and below and
   divided by hairlines (components.css, docs/71) — so no gap between them, and
   168 rather than 200 so a phone's 360 holds two abreast. */
.tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0;
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:var(--d-gap)}
.split{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:start}
/* A grid's child is as wide as its widest word unless told otherwise, so one
   long table in a column made the COLUMN, and then the page, wider than the
   screen. Told otherwise, the column keeps to its track and the card inside it
   scrolls (base.css). */
.split > *, .cards > *, .tiles > *{min-width:0}

/* ── the dashboard: one grid for a whole page, and no hole in it ───────────
   Home was two `.split` grids stacked, each `align-items:start`: the shorter
   card of a row stopped where its content stopped, and because the rows were
   two grids nothing from the row below could rise into the space. The holes
   under "Where the deductions went" and "This financial year" were that.

   One flowing row of cards instead. Each card says how wide it WANTS to be
   (its basis — a figure, a list, a chart) and grows to share what is left, so
   every row is full at every width: a row's last card takes the remainder
   rather than leaving a cell empty, which is the hole `auto-fit` grids leave
   beside a short last row. Cards in a row are one height, and a card's last
   line sits on its floor, so the air that stretching adds is inside the card
   and above its footer — never a hole in the page beside it.

   Below the width of two cards everything is one column, by arithmetic rather
   than by a media query. build/walk82.mjs measures the boxes at 400, 768, 1024
   and 1440 and fails on a hole. */
.dash{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--d-gap);margin-bottom:var(--d-gap)}
.dash > *{flex:1 1 300px;min-width:0;margin:0}
.dash > .w-s{flex:1 1 184px}
.dash > .w-m{flex:1 1 300px}
.dash > .w-l{flex:2 1 440px}
.dash > .card + .card{margin-top:0}
.dash > .card, .dash > .tile{display:flex;flex-direction:column}
.dash > .card > .foot, .dash > .tile > .foot{margin-top:auto;padding-top:12px}
.dash > .card > .grow{flex:1 1 auto}
/* a column of flex items stretches each to the card's width: a button is not a banner */
.dash > .card > .btn, .pairs > div > .card > .btn{align-self:flex-start}
.dash > .w-t{flex:1 1 215px}
.dash > .tile{flex-basis:184px}

/* Two stacks of cards side by side, where a screen builds them as stacks (Me's
   module cards). The stacks are one height and the LAST card of each grows to
   its stack's floor, so the shorter stack leaves no hole beside the longer; a
   stack with nothing in it is not a column at all. */
.pairs{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--d-gap);margin-bottom:var(--d-gap)}
.pairs > div{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:var(--d-gap)}
.pairs > div:not(:has(> *)){display:none}
.pairs > div > .card{margin:0}
.pairs > div > .card:last-child{flex:1 1 auto}
.dash > .bal{color:inherit;text-decoration:none}
.dash > .tilelink{margin:0}

/* what a widget is made of (sections/home/widgets.js) */
.dash .cardhead{flex-wrap:wrap;gap:4px 12px}
.dash .cardhead h2{white-space:nowrap}
.cardhead h2 a{color:inherit;text-decoration:none}
.cardhead h2 a:hover{color:var(--accent-ink)}
a.plain, a.mv{display:block;color:inherit;text-decoration:none}
a.mv{display:flex;justify-content:space-between;align-items:baseline}
a.mv:hover .mn{color:var(--accent-ink)}
.needlist{margin:-6px -8px 0}
.needrow .nn{
  flex:none;min-width:24px;text-align:center;font-size:var(--fs-sm);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
  padding:2px 6px;border-radius:var(--r-full);background:var(--line-2);
}
.needrow .nn.info{background:var(--info-wash);color:var(--info)}
.needrow .nn.warn{background:var(--warn-wash);color:var(--warn)}
.needrow .nn.bad{background:var(--critical-wash);color:var(--critical)}
.needrow .nd.quiet{background:var(--ink-4)}
.needrow .nt{min-width:0;overflow-wrap:anywhere}
.needrow .na{margin-left:auto;flex:none}
.needrow .na + .ng{margin-left:0}
a.bigfigure{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.bigfigure .bf-v{font-size:var(--fs-4xl);font-weight:600;line-height:1;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums}
.bigfigure .bf-m{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.45}
a.mv .mn{min-width:0}
.prov.oneline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero a.stat{color:inherit;text-decoration:none}

/* the run's five steps, as the console counts them */
.runsteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.runsteps li{
  flex:1 1 112px;display:flex;align-items:center;gap:8px;min-width:0;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--ink-3);
}
.runsteps .rs-n{
  flex:none;width:20px;height:20px;border-radius:var(--r-full);display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--line-2);color:var(--ink-3);
}
.runsteps li.done{color:var(--ink-2)}
.runsteps li.done .rs-n{background:var(--good-wash);color:var(--good)}
.runsteps li.on{border-color:var(--accent);color:var(--ink);font-weight:600;background:var(--accent-wash)}
.runsteps li.on .rs-n{background:var(--accent);color:var(--on-accent)}

table.mini{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.mini th{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:4px 8px 6px 0}
table.mini td{padding:6px 8px 6px 0;border-top:1px solid var(--line-2)}
table.mini .num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}

/* ── the launcher: an area's screens as things you press ───────────────── */
/* Used at the top of each area so the destinations are visible on the page and
   not only inside a menu somebody has to hover to find. A product whose
   navigation lives entirely in a hover panel is a product where half the
   screens are never discovered. */
.launch{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:24px}
.tilelink{
  position:relative;overflow:hidden;
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 16px;
  transition:box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
/* A whisper of colour along the top, brightening on hover — the launcher is
   the closest thing the product has to Odoo's wall of apps, and a row of
   identical white cards was the dullest corner of every screen. Hue varies
   by position (decoration, not meaning — the words carry the meaning). */
.tilelink::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;opacity:.55;
  background:var(--accent);
  transition:opacity var(--fast) var(--ease);
}
.tilelink:hover{
  box-shadow:var(--shadow);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
}
.tilelink:hover::before{opacity:1}
.tilelink .t{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-base);font-weight:600;letter-spacing:0;color:var(--ink);
}
.tilelink .d{font-size:var(--fs-sm);color:var(--ink-3);margin-top:6px;line-height:1.45}
.tilelink .n{
  margin-left:auto;font-size:var(--fs-2xs);font-weight:600;padding:2px 6px;border-radius:var(--r-full);
  background:var(--accent-wash);color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
.tilelink .n.warn{background:var(--warn-wash);color:var(--warn)}
.tilelink .n.bad{background:var(--critical-wash);color:var(--critical)}
.tilelink .n.good{background:var(--good-wash);color:var(--good)}

/* ── the action queue on Home: what needs you, as rows you press ───────── */
/* `.needcard` and `.needcard.clear` stood here until docs/75: the queue is
   drawn as `.needlist` of `.needrow`s, inside an ordinary widget card. */
.needrow{
  display:flex;align-items:center;gap:12px;padding:8px 8px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink-2);font-size:var(--fs-md);
  transition:background var(--fast) var(--ease);
}
.needrow+.needrow{border-top:1px solid var(--line-2)}
.needrow:hover{background:var(--plane)}
.needrow .nd{width:8px;height:8px;border-radius:50%;flex:none}
.needrow .nd.info{background:var(--info)}
.needrow .nd.warn{background:var(--warn)}
.needrow .nd.bad{background:var(--critical)}
.needrow .nt{line-height:1.45}
.needrow .nt b{color:var(--ink)}
.needrow .ng{margin-left:auto;color:var(--ink-3);font-size:var(--fs-md)}
.needrow:hover .ng{color:var(--accent-ink)}

/* ── a greeting band, for the top of Home and Me ───────────────────────── */
.hero{
  border-radius:var(--r);padding:24px 24px;margin-bottom:20px;color:var(--on-brand);
  background:
    radial-gradient(120% 140% at 8% 0%, color-mix(in srgb,var(--brand-light) 55%,transparent), transparent 55%),
    radial-gradient(100% 160% at 100% 100%, color-mix(in srgb,var(--brand-cool) 32%,transparent), transparent 55%),
    linear-gradient(120deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  box-shadow:var(--shadow);
}
.hero h1{color:var(--on-brand);margin:0 0 6px;letter-spacing:-.015em}
.hero .lede{
  color:color-mix(in srgb,var(--on-brand) 82%,transparent);
  font-size:var(--fs-base);line-height:1.55;margin:0;max-width:64ch;
}
.hero .herofoot{
  display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;
  padding-top:16px;border-top:1px solid color-mix(in srgb,var(--on-brand) 18%,transparent);
}
/* The band's quiet words — the lede and these labels — are one strength: 82%
   white. The labels were 62%, and measured against the brightest pixel behind
   them (docs/71 §4.4) they were 3.91:1 at 400px, where the cool light reaches
   the foot of a narrower band; 11px capitals ask 4.5. walk85 measures them. */
.hero .stat .k{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-brand) 82%,transparent);
}
.hero .stat .v{
  font-size:var(--fs-xl);font-weight:600;letter-spacing:-.015em;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.hero .actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.hero .btn{background:var(--on-brand);color:var(--brand-2)}
.hero .btn.ghost{
  background:transparent;color:var(--on-brand);
  border-color:color-mix(in srgb,var(--on-brand) 38%,transparent);
}
.hero .btn.ghost:hover{background:color-mix(in srgb,var(--on-brand) 12%,transparent)}

@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .pagehead{flex-direction:column;gap:12px}
}