/* ============================================================
   ENDURANCE / THE CONSOLE
   Art-directed design system for the Endurance CRM + app launcher.

   Concept: a hard mechanical instrument panel in three colours.
   One shear angle, taken from the logo's slabs, is the shape
   language for everything - notches, nav edges, status fills,
   button chamfers, and the direction all motion travels.

   Rule that holds it together: RED IS NEVER DECORATION.
   Red only ever means: this is live / this needs you / act here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- palette: red / white / black. neutral greys, no warmth. --- */
  --carbon:   #0E0E0E;   /* black - the rail, plates, display type */
  --carbon-2: #1c1c1c;   /* one step up, for plate layering */
  --signal:   #DA251D;   /* the mark's red. action / live / alert. nothing else. */
  --signal-d: #b21c15;   /* pressed */
  --paper:    #FFFFFF;    /* the data plane */
  --ground:   #F4F4F4;    /* sits behind paper so white reads as raised */
  --surface:  #FAFAFA;    /* a half-step off paper, for secondary panels */
  --rule:     #DCDCDC;    /* hairlines, field underlines, table rules */
  --rule-d:   #BFBFBF;

  --ink:      #111111;    /* text on paper */
  --ink-2:    #6b6b6b;    /* secondary text */
  --ink-3:    #9a9a9a33;  /* faint */
  --on-carbon:   #F5F5F5; /* text on carbon */
  --on-carbon-2: #9c9c9c;

  /* --- the shear. one angle, everywhere. --- */
  --shear: 14px;                 /* horizontal offset used by clip-paths */
  --shear-deg: -9deg;            /* matching skew for motion / accents */

  /* --- depth: one consistent off-axis light, down-right. never two layers. --- */
  --cast:   6px 6px 0 rgba(0,0,0,.14);
  --cast-lg: 14px 14px 0 rgba(0,0,0,.13);
  --cast-plate: 0 2px 0 rgba(0,0,0,.9), 10px 12px 0 rgba(0,0,0,.10);

  --rail-w: 74px;
  --rail-w-open: 262px;

  --tab: clamp(2.6rem, 6vw, 4.2rem);   /* display step */
  --easing: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

[hidden] { display: none !important; }
img { max-width: 100%; }

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Archivo', sans-serif; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--signal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

/* ============================================================
   RAIL  -  persistent left navigation
   72px of glyphs, expands to 262px on hover / focus-within.
   Replaces every "Back to Home" button in the old pages.
   ============================================================ */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: var(--carbon);
  color: var(--on-carbon);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width .34s var(--easing);
  overflow: hidden;
  will-change: width;
}
.rail:hover, .rail:focus-within { width: var(--rail-w-open); }

.rail__mark {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--rail-w);
  min-height: var(--rail-w);
  padding-left: 21px;
  border-bottom: 1px solid #ffffff14;
}
.rail__mark svg { width: 30px; height: 26px; flex: none; --mark-carbon: #F5F5F5; --mark-signal: var(--signal); }
.rail__mark b {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s var(--easing);
}
.rail:hover .rail__mark b, .rail:focus-within .rail__mark b { opacity: 1; }

.rail__nav { display: flex; flex-direction: column; padding: 10px 0; gap: 1px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail__nav::-webkit-scrollbar { display: none; }
.rail__group {
  font-family: 'Archivo', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  color: var(--on-carbon-2);
  padding: 12px 21px 5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s var(--easing);
}
.rail:hover .rail__group, .rail:focus-within .rail__group { opacity: 1; }

.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 38px;
  min-height: 38px;
  padding-left: 22px;
  color: var(--on-carbon);
  white-space: nowrap;
  transition: background .15s;
}
.rail__item svg, .rail__item .ic { width: 20px; height: 20px; flex: none; opacity: .82; }
.rail__item span {
  font-size: 14px; font-weight: 500;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s var(--easing), transform .2s var(--easing);
}
.rail:hover .rail__item span, .rail:focus-within .rail__item span { opacity: 1; transform: none; }
.rail__item:hover { background: #ffffff0f; }

/* active: signal slab on the leading edge, cut at the shear angle */
.rail__item[aria-current="page"] { background: #ffffff14; }
.rail__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.rail__foot {
  flex: 0 0 auto;          /* it also carries .rail__nav; stop it claiming flex:1 */
  border-top: 1px solid #ffffff14;
  padding: 8px 0 12px;
}
.rail__foot .rail__item span { color: var(--on-carbon-2); }

/* ============================================================
   PAGE SHELL  -  content plane overlaps the rail (one depth layer)
   ============================================================ */

.shell {
  margin-left: var(--rail-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.masthead {
  position: relative;
  background: var(--carbon);
  color: var(--on-carbon);
  padding: 24px clamp(20px, 4vw, 52px) 22px;
  /* notch cut from the bottom-right corner at the shear angle */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 40px) 100%, 0 100%);
}
/* live-console marker: a signal slab on the leading edge, same as the rail's
   active item - says "this is a working screen", not decoration */
.masthead::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.masthead h1 { position: relative; }
.masthead h1::after {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.14em;
  margin-left: 0.28em;
  vertical-align: 0.14em;
  background: var(--signal);
  clip-path: polygon(0.14em 0, 100% 0, calc(100% - 0.14em) 100%, 0 100%);
}
.masthead h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 900;
  text-transform: uppercase;
}
.masthead p {
  margin-top: 8px;
  max-width: 62ch;
  color: var(--on-carbon-2);
  font-size: 13.5px;
}
.masthead__meta {
  margin-top: 12px;
  display: flex;
  gap: 6px 22px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--on-carbon-2);
}
.masthead__meta b { color: var(--on-carbon); font-weight: 600; font-family: 'Archivo'; }

/* wide: title bottom-left, description + meta bottom-right, on the title's
   baseline - the width between them is deliberate air, not a dead slab */
@media (min-width: 980px) {
  .masthead {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: clamp(40px, 6vw, 110px);
  }
  .masthead h1 { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
  .masthead p { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; text-align: right; }
  .masthead__meta { grid-column: 2; grid-row: 2; justify-content: flex-end; margin-top: 10px; }
}

/* ---- hero variant: the office wall behind the Console masthead (crm_index only) ----
   An inset plate, not a full-bleed banner. It carries the same side margins as
   .plane below it so the two read as one stacked column of plates on the ground,
   and the narrower box keeps the 3:2 photo from being cropped to a letterbox. */
.masthead--hero {
  /* height tracks width, so the box ratio holds near 3:1 at every screen size
     instead of flattening as the viewport widens - this is what keeps the whole
     wall logo, down to the domain line, inside the frame */
  min-height: clamp(320px, 28vw, 700px);
  margin: clamp(16px, 3vw, 34px) clamp(0px, 4vw, 52px) 0;
  box-shadow: var(--cast-lg);   /* same down-right light as the plane */
  padding: clamp(48px, 8vw, 90px) clamp(24px, 4vw, 52px) clamp(28px, 3vw, 40px);
  /* drop the shared two-column grid: the hero groups its copy in one block */
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.masthead--hero > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;  /* bias crop upward to frame the whole wall logo */
  opacity: 0.82;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;                    /* above the carbon fallback background */
}
/* scrim: the photo shows through the top untouched and the bottom darkens far
   enough to hold the title - but never all the way to solid carbon, or the
   bottom of the wall logo gets painted out */
.masthead--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14,14,14,.18) 0%,
    rgba(14,14,14,.30) 44%,
    rgba(14,14,14,.62) 74%,
    rgba(14,14,14,.88) 100%);
  z-index: 1;
}
/* title, greeting and the running tally as one bottom-left group */
.masthead--hero .masthead__body {
  position: relative;
  z-index: 2;
  max-width: 68ch;
}
.masthead--hero p {
  margin-top: 10px;
  text-align: left;    /* the >=980px rule right-aligns it on other pages */
}
.masthead--hero .masthead__meta { justify-content: flex-start; }
.masthead--hero::before { z-index: 3; }   /* red leading slab stays on top */
.masthead--hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); }
.masthead--hero p,
.masthead--hero .masthead__meta { text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: no-preference) {
  .masthead--hero:hover > img { transform: scale(1.02); }
}
@media (max-width: 640px) {
  .masthead--hero {
    min-height: clamp(260px, 44vh, 360px);
    margin-inline: 0;            /* full-bleed, same as .plane at this width */
    padding: 32px 20px 26px;
  }
  .masthead--hero::after { background: linear-gradient(180deg, rgba(14,14,14,.15) 0%, rgba(14,14,14,.3) 45%, rgba(14,14,14,.72) 78%, rgba(14,14,14,.9) 100%); }
}

/* the working plane, lifted off the ground, cast down-right.
   fills the shell so short pages show breathing room inside the plane,
   not a slab of empty ground below a floating panel. */
.plane {
  flex: 1 1 auto;
  background: var(--paper);
  margin: 0 clamp(0px, 4vw, 52px) clamp(20px, 5vw, 56px);
  margin-top: -14px;
  position: relative;
  z-index: 2;
  box-shadow: var(--cast-lg);
  border: 1px solid var(--rule);
}
.plane--flush { margin-left: 0; margin-right: 0; }

/* ============================================================
   FORM  -  the field ledger
   Bands grouped by what the fields describe, group name hanging
   in the left margin outside the field column.
   ============================================================ */

.ledger { padding: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 44px) 0; max-width: 1500px; }

.band {
  display: grid;
  grid-template-columns: 146px 1fr;
  gap: 0 30px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--rule);
}
.band:first-child { border-top: none; }

.band__name {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 3px;
  position: sticky;
  top: 20px;
  align-self: start;
}
.band__name::before {
  content: "";
  display: block;
  width: 20px; height: 4px;
  margin-bottom: 9px;
  background: var(--signal);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.band__name small {
  display: block;
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-top: 5px;
}

.band__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  align-content: start;
}
/* wide planes carry three field columns; the four bands then read across, not down */
@media (min-width: 1400px) {
  .band__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field > label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 3px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.field > label .req { color: var(--signal); font-weight: 700; }

.field input,
.field select,
.field textarea,
.field .pick__face {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--rule-d);
  padding: 5px 2px;
  transition: border-color .15s;
  border-radius: 0;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 46px; line-height: 1.5; }
.field select { -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 8px center, right 2px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--signal);
}
.field input::placeholder, .field textarea::placeholder { color: #A6A6A6; }

/* mobile-number field: digit groups + remaining count + fill at 10 */
.field--phone { position: relative; }
.field--phone input { letter-spacing: .18em; font-weight: 600; }
.field--phone .tick {
  position: absolute; right: 2px; bottom: 11px;
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  font-family: 'Archivo';
}
.field--phone.is-full input { border-bottom-color: var(--signal); }
.field--phone.is-full .tick { color: var(--signal); }

/* the auto-fill banner: says which fields it changed */
.prefill {
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 12px;
  background: var(--carbon);
  color: var(--on-carbon);
  padding: 12px 18px;
  font-size: 13.5px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 14px));
}
.prefill b { font-family: 'Archivo'; }
.field.is-prefilled input,
.field.is-prefilled select,
.field.is-prefilled textarea { border-bottom-color: var(--signal); }

/* ============================================================
   PICKER  -  our own option list, in place of the browser's
   The native datalist / select popup is drawn by the OS: a rounded
   dark bubble with a tail, which belongs to no design system. This
   replaces it with a carbon plate that reads as the field's own
   underline carried downward - square, hard-shadowed, red only on
   the option you are actually about to commit.
   ============================================================ */

.field--pick { position: relative; }

/* the caret: same two-triangle mark the native selects already draw,
   so a typed picker and a fixed select look like the same control */
.field--pick .pick__wrap > input,
.field--pick .pick__face {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 8px center, right 2px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.field--pick.is-open .pick__wrap > input,
.field--pick.is-open .pick__face { border-bottom-color: var(--signal); }

/* A fixed-choice field keeps its real <select> in the form - it is only made
   invisible and stretched under our own face, so nothing about posting the
   form, resetting it, or checking it for validity changes. */
.pick__wrap { position: relative; display: block; }
.field .pick__wrap > select.pick__native {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: 0;
  pointer-events: none;
}
/* the face: reads exactly like an input, but it is a button, so the value it
   carries is never mistaken for something you can type over */
.field .pick__wrap > .pick__face {
  position: relative;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick__face.is-empty { color: #A6A6A6; }
.field.is-prefilled .pick__face { border-bottom-color: var(--signal); }

.pick {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 40;
  background: var(--carbon);
  color: var(--on-carbon);
  box-shadow: var(--cast);
  /* the focused field's red rule runs straight into the plate */
  border-top: 2px solid var(--signal);
  max-height: 292px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the house shear, cut from the closing corner */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 24px) 100%, 0 100%);
  padding-bottom: 14px;
}
.pick[hidden] { display: none; }

.pick__opt {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  color: var(--on-carbon-2);
  background: none;
  border: 0;
  padding: 9px 16px 9px 18px;
  cursor: pointer;
}
/* the leading slab marks the option the keyboard is on - the same mark the
   rail uses for the page you are on, and the masthead for a live screen */
.pick__opt::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--signal);
  transition: width .12s var(--easing);
}
.pick__opt.is-on {
  color: var(--on-carbon);
  background: var(--carbon-2);
}
.pick__opt.is-on::before { width: 4px; }
/* the part that matched what was typed */
.pick__opt b {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  color: var(--on-carbon);
}
/* the value already saved in this field */
.pick__opt[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 12px; height: 6px;
  margin-top: -5px;
  border-left: 2px solid var(--on-carbon);
  border-bottom: 2px solid var(--on-carbon);
  transform: rotate(-45deg);
}

.pick__none {
  padding: 12px 16px 12px 18px;
  font-size: 13px;
  color: var(--on-carbon-2);
}
.pick__none b { font-family: 'Archivo', sans-serif; color: var(--on-carbon); font-weight: 700; }

/* scrollbar, so a long list does not hand a light OS bar to a black plate */
.pick::-webkit-scrollbar { width: 10px; }
.pick::-webkit-scrollbar-track { background: var(--carbon); }
.pick::-webkit-scrollbar-thumb { background: #3a3a3a; border: 3px solid var(--carbon); }
.pick::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.pick { scrollbar-width: thin; scrollbar-color: #3a3a3a var(--carbon); }

@media (prefers-reduced-motion: reduce) {
  .pick__opt::before { transition: none; }
}
@media (max-width: 640px) {
  .pick { max-height: 240px; }
  .pick__opt { padding: 11px 16px 11px 18px; font-size: 14.5px; }
}
.field.is-prefilled > label::after {
  content: "autofilled";
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--signal); text-transform: uppercase;
}

.ledger__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0 26px;
  margin-left: 176px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 800px) { .ledger__foot { margin-left: 0; } }

/* ============================================================
   ACT  -  the button. chamfered at the shear angle. red = act here.
   Confirmation happens INSIDE the button, same vocabulary.
   ============================================================ */

.act {
  --_bg: var(--signal);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  background: var(--_bg);
  clip-path: polygon(var(--shear) 0, 100% 0, calc(100% - var(--shear)) 100%, 0 100%);
  overflow: hidden;
  transition: transform .12s var(--easing);
}
.act > * { position: relative; z-index: 1; }
.act::after {                       /* sweep fills along the shear on hover */
  content: "";
  position: absolute; inset: 0;
  background: var(--signal-d);
  transform: translateX(-101%) skewX(var(--shear-deg));
  transition: transform .28s var(--easing);
}
.act:hover::after { transform: translateX(0) skewX(var(--shear-deg)); }
.act:active { transform: translate(1px, 1px); }
.act:disabled { opacity: .55; pointer-events: none; }
.act.is-done { --_bg: var(--carbon); }
.act.is-done::after { display: none; }

.act--ghost {
  --_bg: transparent;
  color: var(--ink);
  clip-path: none;                        /* clip-path would crop the outline */
  outline: 2px solid var(--carbon);
  outline-offset: -2px;
}
.act--ghost::after { background: var(--carbon); transform: translateX(-101%); }
.act--ghost:hover::after { transform: none; }
.act--ghost:hover { color: var(--on-carbon); }
.act--ghost:focus-visible { outline: 2px solid var(--signal); }

/* ============================================================
   FLAG  -  customer health without introducing green/orange.
   Shape + fill density instead. Colourblind-safe by construction.
   filled slab = critical / half slab = watch / outline = healthy
   ============================================================ */

.flag {
  --_a: var(--carbon);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Archivo';
  letter-spacing: .04em;
  white-space: nowrap;
}
/* skewed, not clipped: clip-path would slice the border off the hollow variant
   and leave disconnected corner fragments. transform keeps the whole outline. */
.flag i {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--_a);
  transform: skewX(-12deg);
  background: linear-gradient(90deg, var(--_a) var(--_fill, 0%), transparent 0);
}
.flag--crit  { --_a: var(--signal); --_fill: 100%; }
.flag--watch { --_a: var(--carbon); --_fill: 50%; }
.flag--ok    { --_a: var(--carbon); --_fill: 0%; }
.flag--crit span { color: var(--signal); }

/* ============================================================
   TOAST  -  replaces every alert(). enters along the shear.
   ============================================================ */

.toaster {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(92vw, 400px);
}
.toast {
  background: var(--carbon);
  color: var(--on-carbon);
  padding: 14px 20px;
  font-size: 14px;
  display: flex; gap: 12px; align-items: flex-start;
  clip-path: polygon(var(--shear) 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: var(--cast);
  animation: toast-in .3s var(--easing);
}
.toast::before {
  content: "";
  width: 4px; align-self: stretch; flex: none;
  background: var(--signal);
}
.toast.is-bad::before { background: var(--signal); }
.toast.is-good::before { background: var(--on-carbon); }
.toast b { font-family: 'Archivo'; display: block; margin-bottom: 2px; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) skewX(var(--shear-deg)); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   REPORTS  -  the table is the page. full-bleed, no card, no radius.
   ============================================================ */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 26px;
  padding: 20px clamp(18px, 3vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.filterbar .field { min-width: 190px; flex: 1 1 190px; }
.filterbar__actions { display: flex; gap: 12px; margin-left: auto; }

.readout {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px clamp(18px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.readout b { font-family: 'Archivo'; font-size: 30px; font-weight: 900; color: var(--signal); }
.readout span { color: var(--ink-2); font-size: 13px; }
.readout .density {
  margin-left: auto;
  display: inline-flex;
  box-shadow: inset 0 0 0 2px var(--rule-d);
}
.readout .density button {
  padding: 7px 14px; font-size: 12px; font-weight: 700; font-family: 'Archivo';
  color: var(--ink-2);
}
.readout .density button[aria-pressed="true"] { background: var(--carbon); color: var(--on-carbon); }

.datawrap {
  width: 100%;
  overflow: auto;
  max-height: 68vh;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  position: sticky; top: 0;
  background: var(--carbon);
  color: var(--on-carbon);
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
  white-space: nowrap;
  z-index: 3;
  /* red rule under the plate: below this line is live data */
  box-shadow: inset 0 -3px 0 var(--signal);
}
table.data td {
  padding: 16px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  white-space: nowrap;
}
table.data tbody tr:hover td { background: #F5F5F5; }
/* the row under the cursor - a signal slab on its leading edge (this row: act here) */
table.data tbody tr { position: relative; }
table.data tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--signal); }
table.data td.wrap { white-space: normal; min-width: 240px; max-width: 340px; }

/* sticky first two columns - fixed z-order this time */
table.data th:nth-child(1), table.data td:nth-child(1) { position: sticky; left: 0; z-index: 2; background: var(--paper); min-width: 128px; }
table.data th:nth-child(2), table.data td:nth-child(2) { position: sticky; left: 128px; z-index: 2; background: var(--paper); min-width: 168px; }
table.data th:nth-child(1), table.data th:nth-child(2) { z-index: 4; background: var(--carbon); }
table.data tbody tr:hover td:nth-child(1), table.data tbody tr:hover td:nth-child(2) { background: #F5F5F5; }

table.data .mob { font-weight: 600; letter-spacing: .1em; }

table.data.is-dense td { padding: 8px 16px; }

/* row actions */
.rowact { display: inline-flex; gap: 6px; }
.rowact button,
.vault button {
  padding: 6px 12px;
  font-size: 11px; font-weight: 700; font-family: 'Archivo';
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1.5px var(--rule-d);
  color: var(--ink-2);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.rowact button:hover,
.vault button:hover { box-shadow: inset 0 0 0 1.5px var(--carbon); color: var(--ink); }
.rowact button.danger:hover { box-shadow: inset 0 0 0 1.5px var(--signal); color: var(--signal); }

/* ============================================================
   VAULT  -  a password cell on the app-logins page
   The one place in the CRM where the content is withheld by
   default. Covered, it reads as slabs at the house angle rather
   than generic bullets; revealed, it is live, so it takes the
   signal slab and puts itself away again unattended.
   ============================================================ */
.vault {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* the slab hangs in the cell's own padding, so revealing a password does not
   shove the Show / Copy pair sideways - only the mark appears */
.vault::before {
  content: "";
  position: absolute;
  left: -13px; top: -2px; bottom: -2px;
  width: 4px;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  opacity: 0;
  transition: opacity .16s var(--easing);
}
.vault.is-open::before { opacity: 1; }

/* covered and revealed share a width so the Show / Copy pair keeps the same
   column down the table instead of shuffling row to row */
.vault__cover, .vault__plain { min-width: 146px; }

/* covered: five slabs, the same skewed mark the flag and status use */
.vault__cover { display: inline-flex; align-items: center; gap: 4px; }
.vault__cover i {
  width: 9px; height: 15px;
  background: var(--rule-d);
  transform: skewX(-12deg);
}
.vault__plain {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  user-select: all;                 /* one click selects the whole password */
}
.vault__show { min-width: 58px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .vault::before { transition: none; }
}
table.data td input {
  font: inherit; font-size: 13px;
  border: none; border-bottom: 2px solid var(--signal);
  background: #fff; padding: 5px 4px; width: 100%; border-radius: 0;
}
table.data .empty { text-align: center; padding: 60px 20px; color: var(--ink-2); white-space: normal; }
table.data .empty b { display: block; font-family: 'Archivo'; font-size: 18px; margin-bottom: 6px; color: var(--ink); }

/* support status - same slab vocabulary as the flag */
.stat { display: inline-flex; align-items: center; gap: 7px; font-family: 'Archivo'; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.stat i { width: 13px; height: 13px; flex: none; border: 2px solid var(--carbon); transform: skewX(-12deg); }
.stat--pending i { background: linear-gradient(90deg, var(--carbon) 50%, transparent 0); }
.stat--done i { background: var(--carbon); }
.stat--update i { border-color: var(--signal); background: var(--signal); }
.stat--update { color: var(--signal); }

/* ============================================================
   MOTION  -  one orchestrated moment per load: rail draws, plate lands.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rail { animation: rail-draw .5s var(--easing) both; }
  .masthead { animation: plate-land .5s .12s var(--easing) both; }
  .plane { animation: plate-land .5s .2s var(--easing) both; }
  @keyframes rail-draw { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes plate-land {
    from { opacity: 0; transform: translate(-10px, -8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ============================================================
   RESPONSIVE  -  redesigned per breakpoint, not shrunk.
   ============================================================ */

@media (max-width: 1080px) {
  .band { grid-template-columns: 1fr; gap: 14px; }
  .band__name { position: static; }
}

@media (max-width: 800px) {
  .band__fields { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .masthead { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* mobile: rail becomes a bottom bar (thumb reach - these people are in the field) */
@media (max-width: 640px) {
  .rail {
    inset: auto 0 0 0;
    width: 100%;
    height: 60px;
    flex-direction: row;
    border-top: 2px solid var(--signal);
    animation: none;
  }
  .rail:hover, .rail:focus-within { width: 100%; }
  .rail__mark, .rail__group, .rail__foot { display: none; }
  .rail__nav { flex-direction: row; padding: 0; gap: 0; justify-content: space-around; overflow-x: auto; }
  .rail__item { flex-direction: column; gap: 3px; height: 60px; min-height: 60px; padding: 0 10px; justify-content: center; flex: 1; }
  .rail__item span { opacity: 1 !important; transform: none !important; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }
  .rail__item[aria-current="page"]::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%);
  }
  .shell { margin-left: 0; margin-bottom: 60px; }
  .plane { margin: -14px 0 20px; }
  .masthead { padding: 24px 20px 22px; }

  /* reports: stacked record cards, not a 17-column horizontal scroll */
  .datawrap { max-height: none; overflow: visible; }
  table.data, table.data thead, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { display: none; }
  table.data tr { border: 1px solid var(--rule); border-left: 4px solid var(--carbon); margin: 14px clamp(12px,4vw,20px); box-shadow: var(--cast); }
  table.data td { position: static !important; white-space: normal; border: none; border-bottom: 1px solid var(--rule); padding: 10px 16px; display: flex; justify-content: space-between; gap: 20px; min-width: 0 !important; }
  table.data td::before { content: attr(data-label); font-weight: 700; font-family: 'Archivo'; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); flex: none; }
  table.data td:last-child { border-bottom: none; }
  table.data td.wrap { max-width: none; }
}

/* ============================================================
   AGENCY additions - transaction forms, data grids, ledgers, print.
   Same rules as the console: no radius, one shear, red = act / owe / live.
   ============================================================ */

.field input[readonly] { color: var(--ink-2); border-bottom-style: dashed; cursor: default; }
.field--num input { text-align: right; }
.field--calc input { font-weight: 700; }
.field input:disabled, .field select:disabled { color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.field input[type="date"] { min-height: 33px; }

/* mode chip beside the page title: NEW / EDITING */
.modetag {
  display: inline-block; vertical-align: middle; margin-left: 14px;
  font: 800 11px/1 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; background: var(--signal); color: #fff;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.modetag.is-edit { background: var(--on-carbon); color: var(--carbon); }

/* command bar: Save / Edit / Delete / Clear / Close, stays reachable on long forms */
.cmdbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 16px clamp(18px, 3vw, 44px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 6;
}
.cmdbar .spacer { flex: 1 1 auto; }
.act--sm { padding: 11px 24px; font-size: 13px; }
.act--danger.act--ghost:hover::after { background: var(--signal); }
.act--danger.act--ghost:hover { color: #fff; }
.act--danger.act--ghost { outline-color: var(--signal); color: var(--signal); }

/* line-entry strip (receipt forms) */
.linebar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 22px; align-items: end;
  padding: 20px clamp(18px, 3vw, 44px) 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.linebar .field--wide { grid-column: span 2; }
.linebar .linebar__go { display: flex; align-items: flex-end; }

/* grids: receipt lines and ledgers */
.gridwrap { overflow: auto; max-height: 62vh; }
table.grid { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  position: sticky; top: 0; z-index: 2;
  background: var(--carbon); color: var(--on-carbon);
  font: 700 11px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: 13px 14px; white-space: nowrap;
  box-shadow: inset 0 -3px 0 var(--signal);
}
table.grid td { padding: 10px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--paper); }
table.grid th.n, table.grid td.n { text-align: right; }
table.grid tbody tr:hover td { background: #F5F5F5; }
table.grid tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--signal); }
table.grid td.empty { text-align: center; color: var(--ink-2); padding: 34px 14px; }
table.grid tr.grp td { background: var(--ground); font: 800 12px 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
table.grid tr.tot td { background: var(--ground); font-weight: 700; border-top: 2px solid var(--carbon); }
table.grid tr.os td { background: var(--carbon); color: var(--on-carbon); font-weight: 800; border-bottom: none; }
table.grid tr.os td.n.bal { color: var(--signal); font-size: 15px; }
table.grid tbody tr.tot:hover td, table.grid tbody tr.os:hover td, table.grid tbody tr.grp:hover td { box-shadow: none; }
table.grid tbody tr.os:hover td { background: var(--carbon); }
table.grid tbody tr.tot:hover td, table.grid tbody tr.grp:hover td { background: var(--ground); }

/* below 720px: stacked record cards instead of a squeezed 680px-min-width
   table - same technique the CRM's table.data uses, ported to table.grid
   (the ledger and receipt-line grids). */
@media (max-width: 720px) {
  .gridwrap { max-height: none; overflow: visible; }
  table.grid, table.grid thead, table.grid tbody, table.grid tr, table.grid td {
    display: block; width: 100%; min-width: 0;
  }
  table.grid thead { display: none; }
  table.grid tr {
    border: 1px solid var(--rule); border-left: 4px solid var(--carbon);
    margin: 12px 0; box-shadow: var(--cast); background: var(--paper);
  }
  table.grid tr.grp, table.grid tr.tot, table.grid tr.os { border-left-color: var(--signal); }
  table.grid td {
    white-space: normal; border: none; border-bottom: 1px solid var(--rule);
    padding: 9px 14px; display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; position: static; background: transparent;
  }
  table.grid td::before {
    content: attr(data-label); font-weight: 700; font-family: 'Archivo', sans-serif;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); flex: none;
  }
  table.grid td:last-child { border-bottom: none; }
  table.grid td.empty { justify-content: center; text-align: center; }
  table.grid tr.os td { background: var(--carbon); color: var(--on-carbon); }
}

/* totals under a grid */
.totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 46px; padding: 20px clamp(18px, 3vw, 44px) 26px; }
.totals div { text-align: right; }
.totals span { display: block; font: 700 11px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.totals b { font: 900 28px 'Archivo', sans-serif; letter-spacing: -.01em; }
.totals .due b { color: var(--signal); }

.printlogo, .printmeta { display: none; }

@media (max-width: 800px) {
  .cmdbar { position: static; }
  .linebar .field--wide { grid-column: auto; }
}

@media print {
  @page { margin: 12mm; }
  body { background: #fff; }
  .rail, .cmdbar, .filterbar, .linebar, .toaster, .modetag, .noprint, .rowact { display: none !important; }
  .shell { margin: 0; }
  .masthead { background: #fff; color: #000; clip-path: none; padding: 0 0 10px; border-bottom: 3px solid #000; animation: none; }
  .masthead::before, .masthead::after { display: none; }
  .masthead h1, .masthead p { color: #000; }
  .plane { box-shadow: none; border: none; margin: 0; animation: none; }
  .printlogo { display: block; height: 42px; margin-bottom: 8px; }
  .printmeta { display: block; margin: 10px 0; font-size: 12px; }
  .gridwrap { overflow: visible; max-height: none; }
  table.grid th { position: static; background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
  table.grid tr.os td, table.grid tr.tot td, table.grid tr.grp td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.grid td { padding: 6px 10px; }
  .band { break-inside: avoid; }
}

/* a locked select (e.g. Group on the Suppliers screen) should not look pickable */
.field select:disabled { background-image: none; padding-right: 2px; }

/* pickers: a locked face reads as plain text, not a control */
.field .pick__wrap > .pick__face:disabled { background-image: none; padding-right: 2px; cursor: default; color: var(--ink-2); }
/* number fields keep the picker caret; the browser's own spinner would sit on top of it */
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   AGENCY DOCK  -  the left rail is retired. Navigation is a floating bar
   at the foot of the screen, cut to the house shear. The active screen is a
   red block behind its icon; hovering any icon names it above the bar.
   Sits after the copied Endurance rules so it overrides them.
   ============================================================ */

:root { --gutter: clamp(16px, 4vw, 64px); }

.rail { display: none; }
.shell { margin-left: 0; padding-bottom: 64px; }
.masthead { padding-left: var(--gutter); padding-right: var(--gutter); }
.plane { margin-left: var(--gutter); margin-right: var(--gutter); }
.toaster { bottom: 104px; }

.dock {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex; align-items: center; gap: 2px;
  padding: 10px 28px;
  isolation: isolate;
  /* filter, not box-shadow: the bar itself is clipped to a parallelogram */
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .14));
}
.dock::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--carbon);
  clip-path: polygon(var(--shear) 0, 100% 0, calc(100% - var(--shear)) 100%, 0 100%);
}
/* Home: icon only. Parents: icon + label + caret. Both sit on a sheared block. */
.dock__home, .dock__parent {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px;
  color: var(--on-carbon-2);
  transition: color .15s;
}
.dock__home { width: 62px; }
.dock__parent { padding: 0 24px 0 22px; font: 700 14px 'Archivo', sans-serif; letter-spacing: .02em; }
.dock__home::before, .dock__parent::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: transparent;
  clip-path: polygon(var(--shear) 0, 100% 0, calc(100% - var(--shear)) 100%, 0 100%);
  transition: background .15s;
}
.dock .ic { width: 22px; height: 22px; flex: none; }
.dock__home:hover, .dock__parent:hover, .dock__group.is-open > .dock__parent { color: var(--on-carbon); }
.dock__home:hover::before, .dock__parent:hover::before, .dock__group.is-open > .dock__parent::before { background: #ffffff14; }
/* where you are: home itself, or the parent that owns the current page */
.dock__home[aria-current="page"], .dock__group.is-current > .dock__parent { color: #fff; }
.dock__home[aria-current="page"]::before, .dock__group.is-current > .dock__parent::before { background: var(--signal); }

.dock__caret {
  width: 7px; height: 7px; margin-left: 2px; margin-top: 4px;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);           /* points up: the menu opens upward */
  transition: transform .2s var(--easing);
}
.dock__group.is-open .dock__caret { transform: rotate(225deg); margin-top: -4px; }

/* the children: a carbon plate above the parent */
.dock__group { position: relative; }
.dock__menu {
  position: absolute;
  left: 50%; bottom: calc(100% + 16px);
  /* never wider than the viewport (minus a little breathing room), so a
     flyout near the screen edge can't clip off-screen at any width - the
     640px override below still switches to a full-width bottom sheet. */
  width: min(320px, calc(100vw - 32px));
  transform: translate(-50%, 6px);
  background: var(--carbon);
  border-top: 2px solid var(--signal);
  padding: 8px 0 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 24px) 100%, 0 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .16s, transform .16s var(--easing), visibility 0s .16s;
}
/* invisible bridge over the gap, so the pointer can travel up into the menu */
.dock__menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
.dock__group.is-open > .dock__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .16s, transform .16s var(--easing), visibility 0s;
}
@media (hover: hover) {
  .dock__group:hover > .dock__menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .16s, transform .16s var(--easing), visibility 0s;
  }
  .dock__group:hover .dock__caret { transform: rotate(225deg); margin-top: -4px; }
}

.dock__child {
  position: relative;
  display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; align-items: start;
  padding: 11px 20px 11px 22px;
  color: var(--on-carbon-2);
}
.dock__child .ic { grid-row: span 2; margin-top: 2px; }
.dock__child b { font: 700 14.5px/1.3 'Archivo', sans-serif; color: var(--on-carbon); }
.dock__child span { font-size: 12.5px; line-height: 1.4; }
.dock__child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--signal); transition: width .12s var(--easing); }
.dock__child:hover, .dock__child:focus-visible, .dock__child[aria-current="page"] { background: var(--carbon-2); outline: none; }
.dock__child:hover::before, .dock__child:focus-visible::before, .dock__child[aria-current="page"]::before { width: 4px; }
.dock__child[aria-current="page"] .ic { color: var(--signal); }

@media (prefers-reduced-motion: no-preference) {
  .dock { animation: dock-rise .5s .25s var(--easing) both; }
  @keyframes dock-rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------- home: stats strip and three working groups ---------- */
.statstrip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.kpi { padding: 28px clamp(20px, 3vw, 46px) 24px; border-left: 1px solid var(--rule); }
.kpi:first-child { border-left: 0; }
.kpi b { display: block; font: 900 38px/1 'Archivo', sans-serif; letter-spacing: -.01em; color: var(--signal); }
.kpi span { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* Three parents across the plane. The children are not listed until you point at
   (or tap, or focus) a parent - then they drop straight down from it. */
.groups {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 360px;                       /* room for the tallest panel, so the page never jumps */
  border-bottom: 1px solid var(--rule);
  margin-bottom: 64px;
}
.gcol { position: relative; border-left: 1px solid var(--rule); }
.gcol:first-child { border-left: 0; }

.gcol__head {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 24px clamp(20px, 2.4vw, 32px) 22px;
  font: 800 19px/1.1 'Archivo', sans-serif; letter-spacing: -.01em;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  transition: background .15s;
}
.gcol__head i {
  width: 20px; height: 20px; flex: none; background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);   /* the notched corner */
  transition: background .15s;
}
.gcol__head small { margin-left: auto; font: 700 13px 'IBM Plex Sans', sans-serif; letter-spacing: 0; color: var(--ink-2); }
.gcol__caret {
  width: 8px; height: 8px; flex: none; margin: -2px 4px 0 2px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform .2s var(--easing), border-color .15s;
}
.gcol.is-open > .gcol__head { background: #F5F5F5; box-shadow: inset 0 -2px 0 var(--signal); border-bottom-color: transparent; }
.gcol.is-open .gcol__head i { background: var(--signal); }
.gcol.is-open .gcol__caret { transform: rotate(225deg); margin-top: 4px; border-color: var(--ink); }

/* the children: a white plate hung from the parent, cut to the house shear */
.gcol__menu {
  position: absolute; z-index: 30;
  top: 100%; left: -1px; right: -1px;
  background: var(--paper);
  border: 1px solid var(--rule); border-top: 0;
  box-shadow: var(--cast);
  padding-bottom: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 24px) 100%, 0 100%);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s var(--easing), visibility 0s .16s;
}
.gcol.is-open > .gcol__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s, transform .16s var(--easing), visibility 0s;
}
@media (hover: hover) {
  .gcol:hover > .gcol__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s var(--easing), visibility 0s; }
  .gcol:hover > .gcol__head { background: #F5F5F5; box-shadow: inset 0 -2px 0 var(--signal); border-bottom-color: transparent; }
  .gcol:hover .gcol__head i { background: var(--signal); }
  .gcol:hover .gcol__caret { transform: rotate(225deg); margin-top: 4px; border-color: var(--ink); }
}

.gcol__item {
  position: relative;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px clamp(20px, 2.4vw, 32px) 20px;
  border-top: 1px solid var(--rule);
  transition: background .15s;
}
.gcol__item:first-child { border-top: 0; }
.gcol__item .ic { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--ink-2); }
.gcol__item span { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.gcol__item b { display: block; margin-bottom: 2px; font: 700 17px/1.3 'Archivo', sans-serif; color: var(--ink); }
.gcol__item:hover, .gcol__item:focus-visible { background: #F5F5F5; outline: none; }
.gcol__item:hover::before, .gcol__item:focus-visible::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--signal); }
.gcol__item:hover .ic, .gcol__item:focus-visible .ic { color: var(--ink); }

.groups__hint {
  grid-column: 1 / -1; align-self: end;
  padding: 0 clamp(20px, 2.4vw, 32px) 26px;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}

/* narrow screens: one column, panels open in the flow instead of overlaying */
@media (max-width: 900px) {
  .groups { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .gcol { border-left: 0; border-top: 1px solid var(--rule); }
  .gcol:first-child { border-top: 0; }
  .gcol__menu { position: static; display: none; border: 0; box-shadow: none; clip-path: none; padding-bottom: 0; opacity: 1; visibility: visible; transform: none; }
  .gcol.is-open > .gcol__menu { display: block; }
  .groups__hint { display: none; }
}
/* ---------- phones: the dock becomes a full-width bar, thumb reach ---------- */
@media (max-width: 640px) {
  .shell { margin-bottom: 0; padding-bottom: 78px; }
  .plane { margin-left: 0; margin-right: 0; }
  .toaster { bottom: 78px; }
  .dock {
    left: 0; right: 0; bottom: 0; width: 100%;
    transform: none; animation: none; filter: none;
    padding: 0; gap: 0; height: 62px;
    background: var(--carbon); border-top: 2px solid var(--signal);
    justify-content: space-between;
  }
  .dock { overflow: visible; }
  .dock::before { display: none; }
  .dock__home, .dock__group { flex: 1 1 0; }
  .dock__group { position: static; }
  .dock__home, .dock__parent { width: 100%; height: 60px; padding: 0; flex-direction: column; gap: 3px; font-size: 10.5px; }
  .dock__home::before, .dock__parent::before { clip-path: none; }
  .dock__caret { display: none; }
  .dock__menu { left: 0; right: 0; width: auto; bottom: 100%; transform: translateY(6px); clip-path: none; }
  .dock__group.is-open > .dock__menu { transform: none; }
  .kpi b { font-size: 30px; }
  .kpi { padding: 20px 14px 18px; }
  .kpi span { font-size: 11px; }
}

@media print { .dock { display: none !important; } .shell { padding-bottom: 0; } }