/* ═══ 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:30px 22px 90px}
.wrap.wide{max-width:1560px}

.crumbs{
  font-size:11px;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}
.pagehead .actions{display:flex;gap:8px;flex:none;padding-top:4px;flex-wrap:wrap}
.sub{color:var(--ink-2);font-size:14.5px;margin:0 0 26px;max-width:62ch;line-height:1.55}

.sec{margin:34px 0 14px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sec:first-child{margin-top:0}
.sec .hint{font-size:12.5px;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:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:30px 0 12px;
}
.sechead::before{
  content:"";width:16px;height:3px;border-radius:99px;flex:none;
  background:linear-gradient(90deg,var(--accent),var(--brand-cool));
}
.sechead:first-child{margin-top:0}

/* ── 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:22px;border-bottom:1.5px solid var(--line);overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.view{
  padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
  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);font-weight:600;border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── grids ─────────────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.split{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:start}

/* ── 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:26px}
.tilelink{
  position:relative;overflow:hidden;
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow-sm);
  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:linear-gradient(90deg,var(--accent),var(--brand-cool));
  transition:opacity var(--fast) var(--ease);
}
.launch .tilelink:nth-child(4n+2)::before{
  background:linear-gradient(90deg,var(--violet),var(--accent))}
.launch .tilelink:nth-child(4n+3)::before{
  background:linear-gradient(90deg,var(--good),var(--brand-cool))}
.launch .tilelink:nth-child(4n)::before{
  background:linear-gradient(90deg,var(--warn),var(--violet))}
.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:9px;
  font-size:15px;font-weight:620;letter-spacing:-.016em;color:var(--ink);
}
.tilelink .d{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.45}
.tilelink .n{
  margin-left:auto;font-size:11px;font-weight:650;padding:2px 7px;border-radius:99px;
  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{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:6px 8px;margin-bottom:18px;
}
.needcard.clear{
  padding:12px 16px;font-size:13px;color:var(--ink-3);
  border-style:dashed;box-shadow:none;background:none;
}
.needrow{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink-2);font-size:13.5px;
  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(--accent)}
.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-4);font-size:14px}
.needrow:hover .ng{color:var(--accent)}

/* ── a greeting band, for the top of Home and Me ───────────────────────── */
.hero{
  border-radius:var(--r);padding:24px 26px;margin-bottom:22px;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:-.03em}
.hero .lede{
  color:color-mix(in srgb,var(--on-brand) 82%,transparent);
  font-size:14.5px;line-height:1.55;margin:0;max-width:64ch;
}
.hero .herofoot{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;
  padding-top:18px;border-top:1px solid color-mix(in srgb,var(--on-brand) 18%,transparent);
}
.hero .stat .k{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-brand) 62%,transparent);
}
.hero .stat .v{
  font-size:19px;font-weight:640;letter-spacing:-.022em;margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.hero .actions{display:flex;gap:8px;margin-top:18px;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}
}