/* ============================================================
   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 > 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 > 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; }
}