/* ==========================================================================
   Paperless Factory — design system

   A quality record is a ledger entry, not a social feed, and the interface is
   built to read like one: hairline rules instead of shadows, square corners,
   tight vertical rhythm, and small capitalised labels of the kind already
   printed on the paper forms this replaces. Where a consumer product would put
   a card floating on grey, this puts a ruled panel on white.

   The navigation is horizontal because the process is. HARMAN's flowchart runs
   Start → B1 → B9 → END in one line, and the rail across the top of every
   screen is that line: six numbered steps, always visible, with the one you are
   on marked. There is no left sidebar, because a sidebar is a menu and this is
   a sequence.

   Colour: indigo on graphite. One accent, used for the current step, primary
   actions and focus - never for decoration. Status has its own three colours
   and they mean exactly what the flowchart says they mean: green ok for final
   review, amber filling in progress, rose needs re-verification with the CFT.

   No external fonts, no icon fonts, no CSS framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Indigo: the single accent. 4338CA on white is 8.6:1, so unlike a bright
     brand colour it can carry text and sit behind white without exception. */
  --indigo-50:  #EEF0FB;
  --indigo-100: #DFE2F7;
  --indigo-200: #C3C8F0;
  --indigo-300: #9AA1E4;
  --indigo-400: #6E75D6;
  --indigo-500: #4F46E5;
  --indigo-600: #4338CA;   /* primary */
  --indigo-700: #3730A3;   /* hover */
  --indigo-800: #2C2680;
  --indigo-900: #1E1B4B;

  /* Graphite: chrome and type. Slightly warm-neutral so it does not read blue
     next to the indigo. */
  --white:      #FFFFFF;
  --stone-25:   #FCFCFD;
  --stone-50:   #F8F8FA;
  --stone-100:  #F2F2F5;
  --stone-150:  #EAEAEF;
  --stone-200:  #E1E1E8;
  --stone-300:  #CBCBD6;
  --stone-400:  #A5A5B4;
  --stone-500:  #7C7C8D;
  --stone-600:  #5D5D6E;
  --stone-700:  #45454F;
  --stone-800:  #2E2E37;
  --stone-900:  #1B1B22;
  --graphite:   #1E1B2E;   /* the masthead */

  /* Status. These are the flowchart's own three, plus a rose for refusal. */
  --ok-50:   #E8F5EF;
  --ok-200:  #A7D9C3;
  --ok-600:  #047857;
  --ok-700:  #036049;
  --warn-50: #FDF3E3;
  --warn-200:#EFD3A0;
  --warn-600:#B45309;
  --warn-700:#93420A;
  --nok-50:  #FDECEF;
  --nok-200: #F3BFC9;
  --nok-600: #BE123C;
  --nok-700: #9F1239;

  /* Semantic */
  --bg:            var(--stone-50);
  --surface:       var(--white);
  --surface-2:     var(--stone-50);
  --surface-sunk:  var(--stone-100);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --text:          var(--stone-900);
  --text-2:        var(--stone-600);
  --text-3:        var(--stone-500);
  --accent:        var(--indigo-600);
  --accent-hover:  var(--indigo-700);
  --accent-soft:   var(--indigo-50);
  --danger:        var(--nok-600);
  --danger-hover:  var(--nok-700);
  --warn:          var(--warn-600);
  --ok:            var(--ok-600);

  /* Square, not rounded. The whole silhouette of the product turns on this. */
  --r:    3px;
  --r-lg: 4px;

  /* Shadows are for things that genuinely float - a menu, a dialog. Panels
     are separated by rules, which is how a printed form does it. */
  --lift:  0 1px 2px rgba(27, 27, 34, .06);
  --pop:   0 4px 16px rgba(27, 27, 34, .10), 0 1px 3px rgba(27, 27, 34, .06);
  --over:  0 24px 60px rgba(27, 27, 34, .22);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --rail-h: 48px;
  --mast-h: 58px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Every icon the shell draws carries this class. Giving it a size here means an
   icon dropped into a context nobody styled comes out 16px rather than filling
   the panel - which is what a folder glyph did on Storage. */
.ic { width: 16px; height: 16px; flex: 0 0 auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--indigo-100); }

/* --------------------------------------------------------------------------
   3. Typography

   The small capitalised label is the workhorse. Every panel and field on a
   paper inspection form is titled that way, and borrowing it is what stops the
   screens reading like a web app that happens to be about quality.
   -------------------------------------------------------------------------- */
.t-display { font-size: 26px; font-weight: 640; letter-spacing: -.02em; line-height: 1.2; }
.t-h1      { font-size: 20px; font-weight: 640; letter-spacing: -.015em; line-height: 1.25; }
.t-h2      { font-size: 15px; font-weight: 640; letter-spacing: -.005em; }
.t-h3      { font-size: 13.5px; font-weight: 620; }
.t-h4      { font-size: 12.5px; font-weight: 620; }
.t-sm      { font-size: 12.5px; }
.t-xs      { font-size: 11.5px; }
.t-num     { font-variant-numeric: tabular-nums; }

.t-eyebrow {
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.muted   { color: var(--text-2); }
.muted-2 { color: var(--text-3); }
.mono    { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }

.accent-text { color: var(--accent); }
.danger-text { color: var(--danger); }

.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.truncate-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.bullets { list-style: disc; padding-left: 18px; color: var(--text-2); }
.bullets li { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   4. Shell — masthead over a process rail

   Deliberately the opposite shape to a sidebar product: everything structural
   runs across the top, the content gets the full width beneath it, and the
   process is legible from any screen without opening a menu.
   -------------------------------------------------------------------------- */
.app, .shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- masthead --- */
.masthead {
  height: var(--mast-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid var(--stone-200);
  color: var(--stone-800);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 232px;
  height: var(--mast-h);
  margin-left: -20px;
  padding: 0 20px;
  color: #fff;
  background: #080d54;
  text-decoration: none;
  flex: none;
}
.masthead__brand:hover { text-decoration: none; }

/* HARMAN's wordmark, at the proportion it was drawn to be read. */
.masthead__logo {
  height: 22px;
  width: auto;
  flex: none;
  /* The white asset carries its own transparency; nothing else is applied so
     the mark is reproduced exactly as supplied. */
}

/* A rule between whose plant it is and what the product is called. */
.masthead__name {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.masthead__mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--indigo-500);
  border-radius: var(--r);
  color: #fff;
  flex: none;
}
.masthead__mark svg { width: 16px; height: 16px; }

.masthead__name {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: .005em;
  white-space: nowrap;
  line-height: 1.15;
}
.masthead__name small,
.masthead__page-title small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .68);
  margin-top: 2px;
}
.masthead__page-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
}

/* Which screen you are on. Set apart from the brand so the eye reads
   "HARMAN · Paperless Factory" as one thing and the screen name as another. */
.masthead__context {
  margin-left: 6px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .13);
  font-size: 13px;
  font-weight: 560;
  color: rgba(233, 233, 242, .82);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.masthead__spacer { flex: 1 1 auto; }

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--stone-200);
}

.masthead__btn {
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r);
  color: var(--stone-600);
  font-size: 12.5px;
  border: 1px solid var(--stone-200);
}
.masthead__btn:hover { background: var(--stone-50); color: var(--stone-900); }
.masthead__btn svg { width: 15px; height: 15px; }

.masthead__count {
  min-width: 17px; height: 17px;
  padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--indigo-500);
  color: #fff;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.masthead__user {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 9px 0 5px;
  border-radius: var(--r);
  color: var(--stone-800);
  text-decoration: none;
  border: 1px solid var(--stone-200);
}
.masthead__user:hover { background: var(--stone-50); text-decoration: none; }
.masthead__user .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.masthead__user-name { display: block; font-size: 12.5px; font-weight: 560; line-height: 1.15; }
.masthead__user-role {
  display: block;
  font-size: 10px;
  color: var(--stone-500);
  line-height: 1.1;
}

/* Form Templates uses the Figma two-column shell: the complete left rail,
   including its title area, is one 292px navy panel. */
body[data-page="formats"] {
  --mast-h: 58px;
}
body[data-page="formats"] .masthead {
  background: #fff;
  border-bottom: 1px solid var(--stone-200);
}
.masthead__notification { position: relative; }
.masthead__notification .masthead__count {
  position: absolute;
  top: -6px;
  right: -5px;
  background: #e53935;
}

/* --- persistent left navigation --- */
.processrail {
  position: fixed;
  inset: var(--mast-h) auto 0 0;
  width: 232px;
  padding: 16px 12px;
  background: #080d54;
  color: #c8cbe2;
  border-right: 1px solid #171c68;
  z-index: 35;
  overflow-y: auto;
}
.processrail .railstep {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  color: #b8bdc9;
  font-size: 13px;
}
.processrail .railstep:hover { background: rgba(255,255,255,.07); color: #fff; }
.processrail .railstep.is-active { background: #4f46e5; color: #fff; border: 0; }
.processrail .railstep svg { width: 17px; height: 17px; opacity: .9; }
.processrail__split { width: auto; height: 1px; margin: 16px 12px 4px; background: #343946; }
.shell > .canvas { margin-left: 232px; }
@media (max-width: 720px) {
  .processrail { width: 72px; padding-inline: 8px; }
  .processrail .railstep > span { display: none; }
  .processrail .railstep { justify-content: center; padding: 0; }
  .shell > .canvas { margin-left: 72px; }
}
.processrail::-webkit-scrollbar { width: 6px; }
.processrail::-webkit-scrollbar-thumb { background: #3b4050; border-radius: 6px; }

.railstep {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 560;
  border-bottom: 2px solid transparent;
  flex: none;
}
.railstep:hover { color: var(--text); background: var(--stone-50); text-decoration: none; }

.railstep__icon { flex: 0 0 auto; }

.railstep__box {
  font-size: 10px;
  font-weight: 660;
  letter-spacing: .06em;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 1px;
}

.railstep__count {
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: inline-grid; place-items: center;
  background: var(--nok-600);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.railstep.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 640;
}
.railstep.is-active .railstep__icon { color: #fff; }

/* The screens that are not steps of the process. */
.railmore { position: relative; display: flex; align-items: stretch; flex: none; }

.railmore__button { border: 0; background: none; font: inherit; }
.railmore__button svg:last-child { width: 12px; height: 12px; opacity: .6; }

/* Positioned in the viewport rather than inside the rail. The rail scrolls
   sideways on a narrow screen, and `overflow-x` clips an absolutely
   positioned child - so the menu opened and was invisible. Its coordinates
   are set when it opens, from the button's own position. */
.railmore__panel {
  position: fixed;
  min-width: 290px;
  max-width: calc(100vw - 24px);
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--pop);
  z-index: 60;
}

.railmore__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r);
  color: var(--text);
  text-decoration: none;
}
.railmore__item:hover { background: var(--stone-100); text-decoration: none; }
.railmore__item.is-active { background: var(--accent-soft); color: var(--accent); }
.railmore__item svg { margin-top: 2px; color: var(--text-3); }
.railmore__item.is-active svg { color: var(--accent); }

.railmore__label { display: block; font-size: 13px; font-weight: 580; }
.railmore__hint { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* Steps that are set-up rather than process sit after a divider. */
.processrail__split {
  align-self: center;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 8px;
  flex: none;
}

/* --- canvas --- */
.canvas, .main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 24px 72px;
  flex: 1 1 auto;
}
.page--narrow { max-width: 760px; }
.page--wide   { max-width: none; }

.page-head { margin-bottom: 20px; }
.page-head p { color: var(--text-2); max-width: 74ch; margin-top: 6px; }

/* A thin rule under the page title, the way a form's header rule works. */
.page-head--ruled {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 720px) {
  .masthead__name small, .masthead__context, .masthead__user-role { display: none; }
  .page { padding: 16px 14px 56px; }
}

/* --------------------------------------------------------------------------
   5. Layout helpers
   -------------------------------------------------------------------------- */
.row   { display: flex; align-items: center; gap: 10px; }
.row-top { display: flex; align-items: flex-start; gap: 10px; }
.wrap  { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 7px; }
.spacer { flex: 1 1 auto; }
.full  { width: 100%; }

.grid   { display: grid; gap: 14px; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar    { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 320px; }
.grid-aside-left { display: grid; gap: 18px; grid-template-columns: 300px minmax(0, 1fr); }

/* The fill screen is intentionally a single readable column. The approval
   controls are below the inspection content instead of competing with it. */
.fill-content { display: flex; flex-direction: column; gap: 18px; }
.record-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 12px;
}
.record-summary strong { margin-right: 4px; }
.fill-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
}
.fill-approval-section {
  border-top: 3px solid var(--accent);
  padding-top: 18px;
}
.fill-approval-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.fill-approval-section__head p { margin-top: 4px; }
.fill-approval-bottom { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }

/* Approval is a wide, readable summary rather than two tall narrow cards. */
.fill-approval-bottom > .card { overflow: hidden; }
.fill-approval-bottom .card__head { min-height: 48px; padding-inline: 18px; }
.fill-approval-bottom .card__body { padding: 20px 22px; }
#chain, #approval-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
#chain li, #approval-route li {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--stone-25);
  line-height: 1.45;
}
#chain li strong, #approval-route li strong { display: block; margin-bottom: 3px; }
#approval-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}
#approval-people .field { margin-bottom: 0; }
#approval-people .field:last-child { grid-column: 1 / -1; }
#approval-people + .t-h4 { margin-top: 20px !important; }

.cft-picker { position: relative; }
.cft-picker__toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-2);
  text-align: left;
}
.cft-picker__toggle:hover { border-color: var(--accent); }
.cft-picker__toggle svg { width: 14px; height: 14px; flex: none; }
.cft-picker__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--pop);
}
.cft-picker__option {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border-radius: var(--r);
  cursor: pointer;
}
.cft-picker__option:hover { background: var(--accent-soft); }
.cft-picker__option input { position: absolute; opacity: 0; pointer-events: none; }
.cft-picker__option .check__box { margin: 0; }

@media (max-width: 900px) {
  #chain, #approval-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #approval-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #chain, #approval-route, #approval-people { grid-template-columns: minmax(0, 1fr); }
  #approval-people .field:last-child { grid-column: auto; }
  .fill-actions { justify-content: stretch; }
  .fill-actions .btn { flex: 1 1 0; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sidebar, .grid-aside-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.mt-1 { margin-top: 4px; }  .mb-1 { margin-bottom: 4px; }
.mt-2 { margin-top: 8px; }  .mb-2 { margin-bottom: 8px; }
.mt-3 { margin-top: 14px; } .mb-3 { margin-bottom: 14px; }
.mt-4 { margin-top: 22px; } .mb-4 { margin-bottom: 22px; }

.divider { height: 1px; background: var(--border); border: 0; margin: 14px 0; }
.divider--v { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }

.w-tight { max-width: 62ch; }

/* --------------------------------------------------------------------------
   6. Panels

   Ruled, square, flat. A quality form is a set of boxes on a page, and the
   header strip on each panel is the box's printed title.
   -------------------------------------------------------------------------- */
.page--tasks {
  max-width: 1280px;
  padding-top: 18px;
}

.task-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 0 2px;
}

.task-page__title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--stone-900);
}

.task-page__subtitle {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13px;
}

.task-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: none;
}

.task-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  padding: 10px 10px 12px;
  border-right: 1px solid var(--border);
  background: #fff;
}

.task-summary__item:last-child { border-right: 0; }

.task-summary__item.is-active {
  background: #fff;
}

.task-summary__value {
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--accent);
}

.task-summary__value--muted { color: #3b82f6; }
.task-summary__value--warn { color: #f59e0b; }
.task-summary__value--danger { color: #ef4444; }

.task-summary__label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-2);
  text-transform: none;
}

.task-list-wrap {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.page--tasks .task-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 0.8fr) minmax(160px, 0.8fr);
  gap: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 14px;
}

.page--tasks .task-filter-bar .input-icon,
.page--tasks .task-filter-bar .select {
  min-height: 38px;
}

.page--tasks .task-filter-bar .input-icon {
  position: relative;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.page--tasks .task-filter-bar .input-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-3);
  pointer-events: none;
}

.page--tasks .task-filter-bar .input {
  width: 100%;
  height: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 12px 8px 36px;
  box-shadow: none;
}

.page--tasks .task-filter-bar .select {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background-color: var(--surface);
  box-shadow: none;
  padding: 8px 30px 8px 12px;
}

.page--tasks .task-filter-bar .select:last-child {
  border-right: 0;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.task-table th,
.task-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--stone-150);
  text-align: left;
  vertical-align: middle;
}

.task-table th:last-child,
.task-table td:last-child {
  text-align: center;
}

.task-table th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  background: #f7f7f9;
}

.task-table tbody tr:last-child td { border-bottom: 0; }
.task-table tbody tr:hover { background: #fafbff; }

.task-name__title {
  font-weight: 600;
  color: var(--text);
}

.task-date {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text);
}

.task-sub {
  font-size: 11px;
  color: var(--text-3);
}

.task-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #eafaf0;
  color: #16a34a;
  border: 1px solid #b7ebc5;
}

.task-status--alert {
  background: #fff7ed;
  color: #f59e0b;
  border-color: #f9d7a3;
}

.task-status--success {
  background: #ebfdf5;
  color: #1f9d65;
  border-color: #b7ebc5;
}

.task-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.btn--table {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  min-width: 96px;
}

.btn--icon.btn--table {
  min-width: 30px;
  width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--icon.btn--table svg {
  width: 15px;
  height: 15px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.card--pad  { padding: 16px; }

/* In a grid of cards, the panel fills the row height so every footer lines up
   rather than each one floating wherever its own content happens to end. */
.grid > .card, .grid-2 > .card, .grid-3 > .card, .grid-4 > .card {
  display: flex;
  flex-direction: column;
}
.grid > .card > .card__body, .grid-2 > .card > .card__body,
.grid-3 > .card > .card__body, .grid-4 > .card > .card__body { flex: 1 1 auto; }
.card--flat { border-color: var(--stone-150); background: var(--surface-2); }

.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--stone-50);
  border-bottom: 1px solid var(--border);
  min-height: 42px;
}
.card__body { padding: 16px; }
.card__foot {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: var(--stone-25);
}

/* A panel that is carrying a verdict wears it on its left edge, which reads
   at a glance down a list without colouring the whole surface. */
.card--danger { border-left: 3px solid var(--danger); }
.card--warn   { border-left: 3px solid var(--warn); }
.card--ok     { border-left: 3px solid var(--ok); }

.tile-icon {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
}
.tile-icon svg { width: 17px; height: 17px; }
.tile-icon--solid  { background: var(--accent); color: #fff; }
.tile-icon--grey   { background: var(--stone-100); color: var(--text-2); }
.tile-icon--danger { background: var(--nok-50); color: var(--danger); }
.tile-icon--warn   { background: var(--warn-50); color: var(--warn); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--stone-50); border-color: var(--stone-400); text-decoration: none; }
.btn:active { background: var(--stone-100); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.btn--sm svg { width: 13px; height: 13px; }
.btn--lg { height: 40px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--outline {
  background: var(--surface);
  border-color: var(--indigo-200);
  color: var(--accent);
}
.btn--outline:hover { background: var(--accent-soft); border-color: var(--indigo-300); }

.btn--ghost { background: none; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--stone-100); color: var(--text); border-color: transparent; }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

.btn--danger-soft { background: var(--nok-50); border-color: var(--nok-200); color: var(--danger); }
.btn--danger-soft:hover { background: #FADDE3; }

.btn--warn { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn); }
.btn--warn:hover { background: #F9E9CE; }

.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r);
  color: var(--text-2);
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--stone-100); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

.link-row { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   8. Forms

   Labels are small capitals above the control, as on the paper form. Inputs
   are square with a hairline border; the focused one gets an indigo edge
   rather than a glow, so a dense form does not shimmer.
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 14px; }

.field__label {
  display: block;
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.field__hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 5px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
.input::placeholder, .textarea::placeholder { color: var(--stone-400); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--stone-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--stone-100);
  color: var(--text-3);
  cursor: not-allowed;
}

.textarea { min-height: 84px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C7C8D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.input-icon { position: relative; }
.input-icon svg {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-3);
  pointer-events: none;
}
.input-icon .input { padding-left: 32px; }

.password-input { position: relative; }
.password-input .input { padding-right: 40px; }
.password-input__toggle {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--text-3);
  border-radius: var(--r);
}
.password-input__toggle:hover { background: var(--stone-100); color: var(--text); }

/* checkbox / radio rows */
.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  cursor: pointer;
}
.check__box { margin-top: 2px; flex: none; width: 15px; height: 15px; accent-color: var(--accent); }

.day-result {
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: transparent;
  text-align: center;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}
.day-result.is-ok {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}
.day-result.is-not-ok {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}
.day-result:focus-visible { outline-offset: 2px; }
/* Both are spans, so the note has to be told to sit under the label rather
   than running on from it as "...at this stepApproving is not the same...". */
.check__text { display: block; font-size: 13px; }
.check__meta { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }

.check--choice {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--surface);
}
.check--choice:hover { border-color: var(--indigo-200); background: var(--stone-25); }
.check--choice.is-active { border-color: var(--accent); background: var(--accent-soft); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 34px; height: 19px;
  border-radius: 10px;
  background: var(--stone-300);
  position: relative;
  transition: background .15s;
  flex: none;
}
.switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--lift);
  transition: transform .15s;
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(15px); }

.filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
}

.dropzone {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 26px 18px;
  text-align: center;
  background: var(--stone-25);
  color: var(--text-2);
  transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   9. Badges, chips, dots
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 2px;
  background: var(--stone-100);
  border: 1px solid var(--stone-200);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge--accent { background: var(--accent-soft); border-color: var(--indigo-200); color: var(--accent); }
.badge--danger { background: var(--nok-50);  border-color: var(--nok-200);  color: var(--danger); }
.badge--warn   { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn); }
.badge--ok     { background: var(--ok-50);   border-color: var(--ok-200);   color: var(--ok); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px 0 9px;
  border-radius: var(--r);
  background: var(--stone-100);
  border: 1px solid var(--stone-200);
  font-size: 12.5px;
}
.chip__x {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 2px;
  color: var(--text-3);
}
.chip__x:hover { background: var(--stone-300); color: var(--text); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-400); flex: none; }
.dot--accent { background: var(--accent); }
.dot--danger { background: var(--danger); }

/* The flowchart's traffic light. These three colours are specified by the
   process document, so they are named for what they mean there. */
.rag-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, .12);
}
.rag-dot--green  { background: var(--ok-600); }
.rag-dot--yellow { background: #E8A33D; }
.rag-dot--red    { background: var(--nok-600); }

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--indigo-100);
  color: var(--indigo-700);
  font-size: 11.5px;
  font-weight: 660;
  flex: none;
  text-transform: uppercase;
}
.avatar--lg { width: 42px; height: 42px; font-size: 14px; }

/* --------------------------------------------------------------------------
   10. Tables — ruled like a record sheet
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table-wrap--framed {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}

.table { font-size: 13px; }

.table th {
  text-align: left;
  padding: 9px 12px;
  background: var(--stone-50);
  border-bottom: 1px solid var(--border-strong);
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--stone-150);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--stone-25); }

.table--clickable tbody tr { cursor: pointer; }
.table--clickable tbody tr:hover { background: var(--accent-soft); }

/* Spans in the markup, so they need to be told to stack - otherwise a name
   and the username beneath it run together as "System Administratoradmin". */
.cell-title { display: block; font-weight: 580; }
.cell-sub { display: block; font-size: 12px; color: var(--text-3); }

.ocr-table { font-size: 12.5px; width: 100%; }
.ocr-table td, .ocr-table th {
  border: 1px solid var(--border);
  padding: 6px 9px;
}
.ocr-table th { background: var(--stone-100); font-weight: 620; }

/* --------------------------------------------------------------------------
   11. Lists
   -------------------------------------------------------------------------- */
.list { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stone-150);
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--stone-25); }
.list-item__body { flex: 1 1 auto; min-width: 0; }
/* Both are spans in the markup, and `overflow: hidden` does nothing to an
   inline box - which is why a long record number ran under its status badge
   instead of being clipped. */
.list-item__title { display: block; font-weight: 580; }
.list-item__sub { display: block; font-size: 12px; color: var(--text-3); }
.list-item__end { flex: none; display: flex; align-items: center; gap: 8px; }

.row-actions { display: flex; align-items: center; gap: 6px; }

.dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 7px 16px; font-size: 13px; }
.dl dt { color: var(--text-3); font-size: 12px; }
.dl dd { font-weight: 550; }

/* --------------------------------------------------------------------------
   12. Tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.tabs button, .tabs a {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 560;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  text-decoration: none;
}
.tabs button:hover, .tabs a:hover { color: var(--text); text-decoration: none; }
.tabs .is-active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel[hidden] { display: none; }

.viewswitch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  overflow: hidden;
}
.viewswitch button {
  padding: 0 11px; height: 30px;
  font-size: 12.5px; font-weight: 560;
  color: var(--text-2);
  border-right: 1px solid var(--border);
}
.viewswitch button:last-child { border-right: 0; }
.viewswitch button {
  display: inline-flex; align-items: center; gap: 6px;
}
/* Without this the icons render at their natural size and the control becomes
   a black slab. */
.viewswitch svg { width: 14px; height: 14px; flex: none; }
.viewswitch .is-active { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   13. Steps, timeline, trail
   -------------------------------------------------------------------------- */
.steps-mini { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }

.journey { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.journey__step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 12.5px;
}
.journey__num {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 10.5px; font-weight: 660;
}
.journey__label { font-weight: 560; }
.journey__hint { font-size: 11px; color: var(--text-3); }
.journey__sep { width: 14px; height: 1px; background: var(--border-strong); align-self: center; }
.journey__step.is-active { color: var(--accent); }
.journey__step.is-active .journey__num { background: var(--accent); border-color: var(--accent); color: #fff; }

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 1px; background: var(--border);
}
.timeline > * { position: relative; margin-bottom: 14px; }
.timeline > *::before {
  content: ""; position: absolute; left: -20px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}
.timeline__title { font-weight: 580; font-size: 13px; }
.timeline__meta { font-size: 12px; color: var(--text-3); }

.trail__item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--stone-150);
}
.trail__item:last-child { border-bottom: 0; }
.trail__icon {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--stone-100);
  color: var(--text-2);
}
.trail__icon svg { width: 14px; height: 14px; }
.trail__body { flex: 1 1 auto; min-width: 0; }
.trail__title { font-weight: 580; font-size: 13px; }
.trail__meta { font-size: 12px; color: var(--text-3); }
.trail__note {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--stone-50);
  border-left: 2px solid var(--border-strong);
  font-size: 12.5px;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   14. Progress & meters
   -------------------------------------------------------------------------- */
.progress {
  height: 5px;
  background: var(--stone-150);
  border-radius: 3px;
  overflow: hidden;
}
.progress--tall { height: 8px; }
.progress__bar { height: 100%; background: var(--accent); transition: width .25s; }

.meter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.meter-row__label { width: 130px; flex: none; font-size: 12.5px; color: var(--text-2); }
.meter-row__value { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.stat {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.stat__value { font-size: 24px; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__label {
  font-size: 10.5px; font-weight: 680; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-top: 2px;
}
.stat__foot { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.stat--button { cursor: pointer; text-align: left; width: 100%; }
.stat--button:hover { border-color: var(--accent); background: var(--accent-soft); }
.stat--button.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* --------------------------------------------------------------------------
   15. Banners & tips
   -------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--stone-400);
  border-radius: var(--r);
  background: var(--stone-50);
  font-size: 13px;
}
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.banner--accent { background: var(--accent-soft); border-color: var(--indigo-200); border-left-color: var(--accent); color: var(--indigo-800); }
.banner--danger { background: var(--nok-50);  border-color: var(--nok-200);  border-left-color: var(--danger); color: var(--nok-700); }
.banner--warn   { background: var(--warn-50); border-color: var(--warn-200); border-left-color: var(--warn); color: var(--warn-700); }
.banner--info   { background: var(--stone-50); border-left-color: var(--stone-400); }
.banner--grey   { background: var(--stone-50); border-left-color: var(--stone-300); }
.banner--ok     { background: var(--ok-50); border-color: var(--ok-200); border-left-color: var(--ok); color: var(--ok-700); }

.tip {
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--stone-50);
  border-left: 2px solid var(--border-strong);
  padding: 8px 11px;
}

/* --------------------------------------------------------------------------
   16. Empty & loading
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 42px 20px;
  color: var(--text-3);
}
.empty .tile-icon { margin: 0 auto 12px; }
.empty h3 { font-size: 14px; font-weight: 620; color: var(--text); margin-bottom: 5px; }

.skeleton {
  background: linear-gradient(90deg, var(--stone-100) 25%, var(--stone-150) 37%, var(--stone-100) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 2px;
  min-height: 12px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   17. Modal, drawer, toast, tooltip

   `.modal` is the dialog itself and `.scrim` is the backdrop behind it; the
   shell adds `is-open` to both. Neither has any visible state until then,
   which is the part that matters: a dialog with no hidden state is a dialog
   that is always open.
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(27, 27, 34, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.modal, .version-modal-backdrop {
  position: fixed; z-index: 100;
  top: 50%; left: 50%;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 72px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--over);
  transform: translate(-50%, -47%);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.modal.is-open, .version-modal-backdrop.is-open {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.modal--wide { width: min(880px, calc(100vw - 32px)); }

.modal__head, .version-modal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--stone-50);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal__body, .version-modal__body { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.modal__foot, .version-modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: var(--stone-25);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal__foot .btn-row { margin-left: auto; }

.drawer {
  position: fixed; z-index: 100; top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--over);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--stone-50);
}
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.drawer__foot { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

.toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 260px; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--pop);
  padding: 11px 14px;
  animation: toast-in .22s ease;
}
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }
.toast.is-danger { border-left-color: var(--danger); }
.toast.is-danger svg { color: var(--danger); }
.toast__title { font-size: 13px; font-weight: 620; }
.toast__msg { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.toast.is-out { animation: toast-out .18s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(12px); } }

/* A hover label. `.tip` is also used as a plain inline note elsewhere, so the
   bubble only appears when there is something to say. */
.tip[data-tip] { position: relative; }
.tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--graphite); color: #fff;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 4px 8px; border-radius: var(--r);
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 80;
}
.tip[data-tip]:hover::after { opacity: 1; transform: translateX(-50%); }

/* The card you were sent to from another screen. It settles after a moment so
   the page does not stay permanently marked up. */
.is-target {
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent);
  animation: target-settle 4s ease forwards;
}
@keyframes target-settle {
  0%, 55% { box-shadow: inset 0 0 0 1px var(--accent); }
  100%    { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   18. Sign-in

   A split page: the product's claim on the left, the form on the right. The
   graphite panel is the same colour as the masthead, so signing in already
   looks like the product you are about to be inside.
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--graphite);
}

.auth__aside {
  background: var(--graphite);
  color: #E9E9F2;
  padding: 44px clamp(32px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.auth__aside > div { width: 100%; max-width: 520px; margin: 0 auto; }
/* A faint ruled grid, like the paper this replaces. */
.auth__aside::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}
.auth__aside > * { position: relative; z-index: 1; }

.auth__wordmark {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 34px;
}
.auth__wordmark .masthead__name { color: #fff; }
.auth__wordmark .masthead__mark { width: 30px; height: 30px; }
.auth__wordmark svg { width: 18px; height: 18px; }

.auth__aside-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.auth__aside-item {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(233, 233, 242, .78);
  max-width: 44ch;
}
.auth__aside-item strong { color: #fff; font-weight: 600; display: block; margin-bottom: 2px; }
.auth__aside-item .journey__num {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(233, 233, 242, .8);
  flex: none;
}

.auth__panel {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  padding: 48px 32px;
  background: var(--graphite);
}
.auth__content { width: 100%; max-width: 380px; }
.auth__form { width: 100%; color: #E9E9F2; }
.auth__form .t-eyebrow { color: rgba(233, 233, 242, .6); }
.auth__form .muted, .auth__form .muted-2 { color: rgba(233, 233, 242, .72); }

@media (max-width: 900px) {
  .auth__panel { max-width: 460px; padding-inline: 24px; }
}

/* --------------------------------------------------------------------------
   19. Decision bar — approve & sign, object, send back
   -------------------------------------------------------------------------- */
.decision {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--indigo-200);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-soft);
  padding: 14px 16px;
}
.decision__prompt { font-weight: 620; font-size: 14px; }
.decision__sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.decision > .tile-icon { flex: none; }
.decision > div { flex: 1 1 240px; min-width: 0; }
.decision__actions { flex: 1 0 100%; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.next-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  margin-top: 12px;
}
.next-bar__message { display: none; }
.next-bar__text { flex: 1 1 auto; font-size: 13px; color: var(--text-2); }

@media (max-width: 720px) {
  .next-bar { width: 100%; }
}

/* --------------------------------------------------------------------------
   20. Signature
   -------------------------------------------------------------------------- */
.sig-pad {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--stone-25);
  height: 130px;
  touch-action: none;
}
.sig-pad canvas { width: 100%; height: 100%; display: block; }
.sig-pad__baseline {
  position: absolute; left: 22px; right: 22px; bottom: 30px;
  height: 1px; background: var(--border-strong);
  pointer-events: none;
}
.sig-pad__hint {
  position: absolute; left: 22px; bottom: 12px;
  font-size: 11px; color: var(--text-3);
  pointer-events: none;
}
.sig-typed { font-size: 22px; font-style: italic; }

.sig-mark { display: flex; align-items: center; gap: 10px; }
.sig-mark__seal {
  width: 34px; height: 34px;
  border: 1px solid var(--indigo-200);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}
.sig-mark__meta { font-size: 12px; color: var(--text-3); }

.sigblock__name { font-weight: 600; }
.sigblock__role { font-size: 12px; color: var(--text-3); }
.sigblock__rule { border-top: 1px solid var(--border-strong); margin-top: 22px; padding-top: 5px; }
.sigblock__meta { font-size: 11.5px; color: var(--text-3); }

/* --------------------------------------------------------------------------
   21. People pickers
   -------------------------------------------------------------------------- */
.picker__control {
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  padding: 5px 7px;
  min-height: 34px;
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  cursor: text;
}
.picker__control:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.picker__chips { display: contents; }
.picker__label { font-size: 12.5px; color: var(--text-3); }
.picker__panel {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--pop);
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
}
.picker__list { padding: 4px; }
.picker__opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 13px;
}
.picker__opt:hover { background: var(--stone-100); }
.picker__opt--all { border-bottom: 1px solid var(--border); border-radius: 0; }
.picker__who { font-size: 11.5px; color: var(--text-3); }
.picker__empty, .combo__empty { padding: 14px; text-align: center; color: var(--text-3); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   22. Format field editor
   -------------------------------------------------------------------------- */
.spec-editor { display: flex; flex-direction: column; gap: 8px; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 130px 90px 90px 80px 34px;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.spec-row__label { font-weight: 560; }
.spec-row__spec { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .spec-row { grid-template-columns: minmax(0, 1fr) 34px; }
}

.v-value { font-variant-numeric: tabular-nums; font-weight: 580; }
.v-remark { font-size: 12.5px; color: var(--text-2); }
.is-out { color: var(--danger); font-weight: 620; }

/* --------------------------------------------------------------------------
   23. Storage tree
   -------------------------------------------------------------------------- */
.store-folder {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 6px;
}
.store-folder__path { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   24. Org tree
   -------------------------------------------------------------------------- */
.org-chart { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-chart__root { display: flex; flex-direction: column; align-items: center; }
.org-chart__node {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 9px 13px;
  text-align: center;
  min-width: 150px;
}
.org-chart__name { font-weight: 580; font-size: 13px; }
.org-chart__names { font-size: 12px; color: var(--text-3); }
.org-chart__connector { width: 1px; height: 16px; background: var(--border-strong); }
.org-chart__row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------------------
   25. Evidence viewer
   -------------------------------------------------------------------------- */
.viewer-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.viewer, .viewer--full { display: flex; flex-direction: column; min-height: 0; }

.viewer-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.viewer-bar__title { font-weight: 600; font-size: 13.5px; }
.viewer-bar__meta { font-size: 12px; color: var(--text-3); }

.viewer__toolbar {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--stone-50);
}
.viewer__zoom { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; }

.viewer__stage {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--stone-150);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.viewer__stage--flush { padding: 0; background: var(--surface); }

.viewer__frame { width: 100%; height: 100%; border: 0; background: #fff; min-height: 70vh; }
.viewer__image { box-shadow: var(--pop); background: #fff; }
.viewer__page { background: #fff; box-shadow: var(--pop); margin-bottom: 16px; }
.viewer__pageno { font-size: 11.5px; color: var(--text-3); text-align: center; margin-bottom: 16px; }

.viewer__text {
  background: var(--surface);
  padding: 26px 30px;
  max-width: 80ch;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  line-height: 1.65;
}
.viewer__text--mono { font-family: var(--mono); font-size: 12.5px; }

.viewer__fallback { padding: 44px; text-align: center; color: var(--text-3); }

/* --------------------------------------------------------------------------
   26. Audit table
   -------------------------------------------------------------------------- */
.audit-table { font-size: 12.5px; }
.audit-table__activity { font-weight: 560; }
.audit-table__activity-cell { max-width: 380px; }

/* --------------------------------------------------------------------------
   27. Markdown, for text pulled off a sheet
   -------------------------------------------------------------------------- */
.md-h { font-weight: 620; margin: 14px 0 5px; }
.md-list { list-style: disc; padding-left: 20px; margin-bottom: 10px; }
.md-pre {
  background: var(--stone-100);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 11px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
}
.md-code {
  background: var(--stone-100);
  border-radius: 2px;
  padding: 1px 4px;
  font-family: var(--mono);
  font-size: .92em;
}
.md-quote { border-left: 2px solid var(--border-strong); padding-left: 11px; color: var(--text-2); }
.md-hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.md-link { color: var(--accent); }
.md-tablewrap { overflow-x: auto; margin: 10px 0; }
.md-table { font-size: 12.5px; }
.md-table td, .md-table th { border: 1px solid var(--border); padding: 6px 9px; }
.md-cite { font-size: 11.5px; color: var(--text-3); }
.md-cite--link { color: var(--accent); cursor: pointer; }

/* --------------------------------------------------------------------------
   28. State utilities
   -------------------------------------------------------------------------- */
.is-danger { color: var(--danger); }
.is-alert  { color: var(--warn); }
.is-locked { opacity: .6; pointer-events: none; }
.is-empty  { color: var(--text-3); font-style: italic; }
.hidden    { display: none !important; }

/* --------------------------------------------------------------------------
   29. Page actions

   A screen's own buttons sit beside its heading rather than in a bar of their
   own. There is no top bar to put them in any more, and next to the title is
   where they read as acting on this page rather than on the product.
   -------------------------------------------------------------------------- */
.page-head--withactions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.page-head--withactions > :not(.page-head__actions) { grid-column: 1; }

.page-head__actions {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .page-head--withactions { grid-template-columns: minmax(0, 1fr); }
  .page-head__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* A screen with no heading still needs somewhere to put its own controls. */
.page-actions--loose {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   30. Filling a designed form

   The screen that fills a form draws it the way the designer built it, so a
   person who has filled the paper version for years keeps every landmark they
   navigate by: the letterhead, the job details, the ruled table.
   -------------------------------------------------------------------------- */
.fill-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
}

.fill-block__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--stone-800);
}
.fill-logo { height: 22px; width: auto; flex: none; }

/* Job details, two to a line, the way they are printed above the table. */
.fill-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
@media (max-width: 720px) { .fill-details { grid-template-columns: minmax(0, 1fr); } }

.fill-block td .input {
  min-height: 36px;
  border-color: var(--border-strong);
  background: var(--surface);
}
.fill-block td .input:hover { border-color: var(--stone-400); }
.fill-block td .input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

/* Tracking keeps the decision visible and tucks supporting information away
   until it is needed. Native details/summary gives keyboard and screen-reader
   users the same disclosure control without extra JavaScript. */
.track-disclosure {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.track-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 620;
  color: var(--text);
}
.track-disclosure > summary::-webkit-details-marker { display: none; }
.track-disclosure > summary::before {
  content: '›';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
  font-size: 21px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.track-disclosure[open] > summary::before { transform: rotate(90deg); }
.track-disclosure > summary:hover { background: var(--stone-50); }
.track-disclosure__hint {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 400;
}
.track-disclosure__body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}
.track-record-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 28px;
}
.track-record-summary__status { display: none; }
.track-record-extra { margin-top: 8px; }

@media (max-width: 720px) {
  .track-disclosure__hint { display: none; }
  .track-disclosure__body { padding-inline: 8px; }
}

/* Compact tracking toolbar: hierarchy is title → count → controls, not a stack
   of equally loud banners. */
.page-head--tracking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.page-head--tracking p { margin-top: 4px; font-size: 12.5px; }
.tracking-summary {
  display: flex;
  align-items: baseline;
  min-height: 24px;
  color: var(--text-2);
}
.tracking-summary__count {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}
.tracking-summary.banner--grey { background: transparent; border: 0; color: var(--text-2); }
#rag-tiles { gap: 10px; }
#rag-tiles .stat {
  min-height: 82px;
  padding: 10px 13px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
#rag-tiles .stat__value { font-size: 21px; }
#rag-tiles .stat__foot { font-size: 11.5px; margin-top: 4px; line-height: 1.35; }
#rag-tiles .stat--button:focus-visible { outline-offset: -2px; }
#rag-tiles .stat--button.is-active { background: var(--accent-soft); }
.filter-bar { gap: 10px; }
.filter-bar .tracking-search { flex: 1 1 260px !important; min-width: 220px !important; }
.filter-bar .select { min-width: 132px; }
.filter-bar .check { padding: 5px 2px; white-space: nowrap; }

.track-workspace {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
}
.track-workspace > aside { position: sticky; top: 74px; }
.track-workspace > aside > .card { overflow: hidden; }
.track-workspace .card__head { min-height: 58px; padding-block: 9px; }
.track-workspace .list { border: 0; border-radius: 0; }
.track-workspace .list-item { min-height: 68px; padding: 12px 14px; }
.track-workspace .list-item.is-active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.track-workspace .list-item.is-active .list-item__title { color: var(--accent); }

@media (max-width: 1080px) {
  .track-workspace { grid-template-columns: minmax(0, 1fr); }
  .track-workspace > aside { position: static; }
}

@media (max-width: 720px) {
  .page-head--tracking { margin-bottom: 10px; }
  .tracking-summary { margin-bottom: 10px !important; }
  #rag-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar .viewswitch { order: 0; width: 100%; }
  .filter-bar .viewswitch button { flex: 1; }
  .filter-bar .tracking-search { order: 1; min-width: 100% !important; }
  .filter-bar .select { flex: 1; min-width: 0; }
  .filter-bar .check { width: 100%; }
}

/* ==========================================================================
   FIGMA REDESIGN — Paperless Factory
   ==========================================================================
   The shell is now a full-height dark rail on the left carrying the brand,
   and a white bar across the content area carrying the page's own title and
   the account controls. Everything below that is the component vocabulary the
   screens share: a row of counted tiles, a filter bar, a data table, a pager,
   and the two card shapes (template, form).

   These rules come last on purpose. They restate a handful of layout
   properties set earlier in the file, and the cascade is what lets a page that
   has not been moved across yet keep working while the others are.
   -------------------------------------------------------------------------- */

:root {
  --rail-w: 224px;
  --topbar-h: 94px;
  --rail-bg: #0B1043;
  --rail-text: #AEB3D4;
  --rail-active: #4F46E5;
}

/* --- the rail: full height, brand included ------------------------------- */
.processrail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  padding: 0;
  background: var(--rail-bg);
  border-right: 0;
  color: var(--rail-text);
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 0 20px;
  margin: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
.rail__brand:hover { text-decoration: none; color: #fff; }
.rail__brand img { width: 46px; height: auto; flex: none; opacity: .95; }
.rail__brand-divider { width: 1px; height: 30px; background: rgba(255,255,255,.28); flex: none; }
.rail__brand-name { display: block; font-size: 14.5px; font-weight: 640; letter-spacing: -.1px; line-height: 1.2; }
.rail__brand-sub {
  display: block;
  font-size: 8.5px;
  font-weight: 560;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-top: 3px;
}

.rail__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.processrail .railstep {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: var(--rail-text);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.05px;
}
.processrail .railstep:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.processrail .railstep.is-active {
  background: var(--rail-active);
  color: #fff;
  font-weight: 560;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
}
.processrail .railstep svg { width: 18px; height: 18px; opacity: .95; flex: none; }
.processrail .railstep.is-active svg { opacity: 1; }
.processrail__split { display: none; }

/* --- the top bar: page identity + account -------------------------------- */
.masthead {
  position: fixed;
  top: 0;
  left: var(--rail-w);
  right: 0;
  height: var(--topbar-h);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-bottom: 1px solid var(--stone-150);
  z-index: 50;
}
.topbar__back {
  width: 36px; height: 36px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stone-200);
  border-radius: 8px;
  background: #fff;
  color: var(--stone-700);
  cursor: pointer;
}
.topbar__back:hover { background: var(--stone-50); color: var(--stone-900); text-decoration: none; }
.topbar__back svg { width: 17px; height: 17px; }
.topbar__titles { min-width: 0; display: block; }
.topbar__title {
  display: block;
  font-size: 21px;
  font-weight: 640;
  letter-spacing: -.35px;
  color: var(--stone-900);
  line-height: 1.2;
}
.topbar__sub {
  display: block;
  font-size: 12.5px;
  color: var(--stone-500);
  margin-top: 4px;
  line-height: 1.35;
}
.topbar__spacer { flex: 1 1 auto; }
.topbar__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.topbar__btn {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stone-200);
  border-radius: 9px;
  background: #fff;
  color: var(--stone-600);
  cursor: pointer;
}
.topbar__btn:hover { background: var(--stone-50); color: var(--stone-900); text-decoration: none; }
.topbar__btn svg { width: 17px; height: 17px; }
.topbar__count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #E5342B;
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.topbar__user {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 6px 4px 4px;
  border-radius: 10px;
  color: inherit;
}
.topbar__user:hover { background: var(--stone-50); text-decoration: none; }
.topbar__avatar {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--indigo-600);
  color: #fff;
  font-size: 13px; font-weight: 640;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.topbar__who { line-height: 1.25; }
.topbar__name { display: block; font-size: 12.5px; font-weight: 640; color: var(--stone-900); }
.topbar__role { display: block; font-size: 11px; color: var(--stone-500); }

/* --- canvas -------------------------------------------------------------- */
.shell > .canvas {
  margin-left: var(--rail-w);
  padding-top: var(--topbar-h);
  background: #fff;
  min-height: 100vh;
}
.canvas > .page,
.page {
  max-width: none;
  padding: 22px 32px 56px;
}
/* The top bar carries the page's title now. A page that still wants an
   in-body heading opts back in with .page-head--keep. */
.page-head { display: none; }
.page-head--keep { display: block; }

/* --- counted tiles ------------------------------------------------------- */
.statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid var(--stone-150);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 18px;
}
.stat { padding: 18px 22px; border-right: 1px solid var(--stone-150); }
.stat:last-child { border-right: 0; }
.stat__n { font-size: 27px; font-weight: 650; letter-spacing: -.8px; line-height: 1.05; color: var(--indigo-600); }
.stat__l { font-size: 13px; color: var(--stone-700); margin-top: 7px; }
.stat--ok   .stat__n { color: #12A150; }
.stat--warn .stat__n { color: #E8880A; }
.stat--nok  .stat__n { color: #E5484D; }

/* --- filter bar ---------------------------------------------------------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--stone-50);
  border: 1px solid var(--stone-150);
  border-radius: 11px;
  margin-bottom: 18px;
}
.filterbar__search { position: relative; flex: 1 1 300px; min-width: 210px; max-width: 360px; }
.filterbar__search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--stone-400); pointer-events: none;
}
.filterbar__search input {
  width: 100%; height: 42px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--stone-200);
  border-radius: 9px;
  background: #fff;
  font: inherit; font-size: 13.5px;
  color: var(--stone-900);
}
.filterbar__search input::placeholder { color: var(--stone-400); }
.filterbar__search input:focus { outline: 2px solid var(--indigo-200); outline-offset: -1px; border-color: var(--indigo-400); }
.filterbar select {
  height: 42px;
  min-width: 178px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--stone-200);
  border-radius: 9px;
  background-color: #fff;
  font: inherit; font-size: 13.5px;
  color: var(--stone-700);
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
.filterbar__date {
  height: 42px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--stone-200);
  border-radius: 9px;
  background: #fff;
  color: var(--stone-600);
}
.filterbar__date svg { width: 16px; height: 16px; color: var(--stone-500); flex: none; }
.filterbar__date input {
  border: 0; background: transparent; font: inherit; font-size: 13.5px;
  color: var(--stone-700); padding: 0; width: 124px; cursor: pointer;
}
.filterbar__date input:focus { outline: none; }
.filterbar__grow { flex: 1 1 auto; }

/* --- data table ---------------------------------------------------------- */
.dtable-wrap {
  border: 1px solid var(--stone-150);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
.dtable-scroll { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable thead th {
  background: var(--stone-50);
  border-bottom: 1px solid var(--stone-150);
  padding: 14px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--stone-500);
  white-space: nowrap;
}
.dtable tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--stone-150);
  color: var(--stone-700);
  vertical-align: middle;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--stone-25); }
.dtable tbody tr.is-nok { background: #FEF4F5; }
.dtable tbody tr.is-nok:hover { background: #FDEDEF; }
.dtable__strong { font-weight: 620; color: var(--stone-900); }
.dtable__note { display: block; font-size: 11.5px; color: var(--stone-500); font-weight: 500; margin-bottom: 3px; }
.dtable__sub { display: block; font-size: 11.5px; color: var(--stone-500); margin-top: 3px; }
.dtable__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dtable-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 11px;
}
.dtable-head h2 { font-size: 15px; font-weight: 640; color: var(--stone-900); }
.dtable-head span { font-size: 12.5px; color: var(--stone-500); }

/* --- pager --------------------------------------------------------------- */
.pager {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--stone-150);
  font-size: 12.5px;
  color: var(--stone-600);
}
.pager select {
  height: 32px; padding: 0 26px 0 10px;
  border: 1px solid var(--stone-200); border-radius: 7px;
  background-color: #fff; font: inherit; font-size: 12.5px; cursor: pointer;
  appearance: none;
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px;
}
.pager__pages { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.pager__btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--stone-200); border-radius: 7px;
  background: #fff; color: var(--stone-700);
  font: inherit; font-size: 12.5px; font-weight: 550;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pager__btn:hover:not(:disabled) { background: var(--stone-50); }
.pager__btn.is-active { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }
.pager__btn:disabled { opacity: .4; cursor: default; }
.pager__btn svg { width: 14px; height: 14px; }
.pager__gap { color: var(--stone-400); padding: 0 2px; }
.pager__go { display: flex; align-items: center; gap: 8px; }
.pager__go input {
  width: 54px; height: 32px; text-align: center;
  border: 1px solid var(--stone-200); border-radius: 7px;
  font: inherit; font-size: 12.5px; color: var(--stone-800);
}
.pager__go button {
  height: 32px; padding: 0 12px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--indigo-600); font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer;
}
.pager__go button:hover { text-decoration: underline; }

/* --- buttons the Figma adds ---------------------------------------------- */
.btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 7px; }
.btn--approve { background: #12A150; border-color: #12A150; color: #fff; }
.btn--approve:hover:not(:disabled) { background: #0E8A44; border-color: #0E8A44; color: #fff; }
.btn--change { background: #FFF6EA; border-color: #F5C98A; color: #B45309; }
.btn--change:hover:not(:disabled) { background: #FDEDD8; color: #93420A; }
.btn--reject { background: #FEF1F2; border-color: #F5B5BB; color: #C81E2B; }
.btn--reject:hover:not(:disabled) { background: #FDE4E7; color: #9F1239; }
.iconbtn {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stone-200); border-radius: 7px;
  background: #fff; color: var(--stone-600); cursor: pointer;
}
.iconbtn:hover { background: var(--stone-50); color: var(--stone-900); text-decoration: none; }
.iconbtn svg { width: 15px; height: 15px; }
.iconbtn--edit { color: #E8880A; border-color: #F3D6AC; background: #FFFAF2; }
.iconbtn--edit:hover { background: #FDF0DC; color: #B45309; }
.iconbtn--del { color: #E5484D; border-color: #F5C0C3; background: #FFF6F6; }
.iconbtn--del:hover { background: #FDE7E8; color: #C81E2B; }

/* --- chips --------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px;
  border-radius: 5px;
  font-size: 11px; font-weight: 570;
  white-space: nowrap;
}
.chip--indigo { background: var(--indigo-50); color: var(--indigo-700); }
.chip--ok     { background: #E7F7EE; color: #0E7A3E; }
.chip--warn   { background: #FDF2E2; color: #B45309; }
.chip--nok    { background: #FDECEE; color: #C81E2B; }
.chip--grey   { background: var(--stone-100); color: var(--stone-600); }
.chip--blue   { background: #E8F1FE; color: #1D4ED8; }

/* --- template cards ------------------------------------------------------ */
.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}
.tcard {
  border: 1px solid var(--stone-150);
  border-radius: 11px;
  background: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.tcard__body { padding: 18px; flex: 1 1 auto; }
.tcard__title {
  font-size: 14px; font-weight: 600; color: var(--stone-900);
  line-height: 1.45; margin-top: 12px;
}
.tcard__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--stone-150);
  background: var(--stone-25);
}
.tcard__status { font-size: 12.5px; font-weight: 560; }
.tcard__status--verify { color: #E8880A; }
.tcard__status--draft  { color: #2563EB; }
.tcard__status--live   { color: #0E7A3E; }
.tcard__status--gone   { color: var(--stone-500); }
.tcard__spacer { flex: 1 1 auto; }

/* --- form list cards (My Forms) ------------------------------------------ */
.flist { display: flex; flex-direction: column; gap: 16px; }
.fcard {
  border: 1px solid var(--stone-150);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
.fcard__top {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 18px;
}
.fcard__title { font-size: 14.5px; font-weight: 640; color: var(--stone-900); line-height: 1.35; }
.fcard__meta { font-size: 12px; color: var(--stone-500); margin-top: 5px; }
.fcard__acts { margin-left: auto; display: flex; gap: 9px; flex: none; }
.fcard__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--stone-150);
  background: var(--stone-25);
  font-size: 12.5px;
  color: var(--stone-600);
}
.fcard__step { color: var(--indigo-600); font-weight: 600; }
.fcard__when { margin-left: auto; color: var(--stone-500); }
.fcard__when b { color: var(--stone-800); font-weight: 600; }

/* --- tabs ---------------------------------------------------------------- */
.tabbar {
  display: flex; align-items: center; gap: 28px;
  border-bottom: 1px solid var(--stone-150);
  margin: -22px -32px 22px;
  padding: 0 32px;
}
.tabbar__tab {
  appearance: none; border: 0; background: none;
  padding: 15px 2px;
  font: inherit; font-size: 13.5px; font-weight: 560;
  color: var(--stone-500);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.tabbar__tab:hover { color: var(--stone-800); text-decoration: none; }
.tabbar__tab.is-active { color: var(--indigo-600); border-bottom-color: var(--indigo-600); }
.tabbar__spacer { flex: 1 1 auto; }

/* --- record identity block ----------------------------------------------- */
.recid__code {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone-500);
}
.recid__title {
  font-size: 22px; font-weight: 640; letter-spacing: -.4px;
  color: var(--stone-900); line-height: 1.3; margin-top: 7px;
}
.recid__meta { font-size: 13px; color: var(--stone-500); margin-top: 7px; }

/* --- work-instruction banner --------------------------------------------- */
.wibanner {
  display: flex; gap: 11px;
  padding: 15px 17px;
  border: 1px solid #C7D2FE;
  border-left: 3px solid var(--indigo-600);
  border-radius: 9px;
  background: #F5F6FE;
  color: var(--stone-700);
  font-size: 13px;
  line-height: 1.5;
  margin: 20px 0;
}
.wibanner svg { width: 17px; height: 17px; color: var(--indigo-600); flex: none; margin-top: 1px; }
.wibanner b { color: var(--stone-900); font-weight: 640; }

/* --- approval progress timeline ------------------------------------------ */
.approw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}
.progressbar { height: 7px; border-radius: 4px; background: var(--stone-150); overflow: hidden; }
.progressbar > i { display: block; height: 100%; background: var(--indigo-600); border-radius: 4px; }
.steptable { width: 100%; border-collapse: collapse; font-size: 12px; }
.steptable th {
  padding: 11px 13px; text-align: left; font-weight: 600; color: var(--stone-800);
  background: var(--indigo-50); border: 1px solid var(--stone-150); font-size: 12px;
}
.steptable td {
  padding: 11px 13px; border: 1px solid var(--stone-150); color: var(--stone-600);
  vertical-align: top;
}
.steptable .is-done { color: var(--indigo-600); font-weight: 550; }
.steptable .is-now { background: var(--indigo-50); }
.duechip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1px solid var(--indigo-200); border-radius: 6px;
  background: #fff; color: var(--stone-700); font-size: 11.5px; font-weight: 560;
  white-space: nowrap;
}
.deflist { font-size: 12.5px; }
.deflist__row {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--stone-150);
}
.deflist__row:last-child { border-bottom: 0; }
.deflist__k { color: var(--stone-500); flex: 0 0 116px; }
.deflist__v { color: var(--stone-900); font-weight: 550; min-width: 0; word-break: break-word; }

/* --- the success modal --------------------------------------------------- */
.doneveil {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17, 20, 45, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.donecard {
  position: relative;
  width: min(440px, 100%);
  padding: 46px 40px 42px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(16, 20, 50, .22);
}
.donecard__x {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stone-200); border-radius: 8px;
  background: #fff; color: var(--stone-500); cursor: pointer;
}
.donecard__x:hover { background: var(--stone-50); color: var(--stone-900); }
.donecard__x svg { width: 15px; height: 15px; }
.donecard__ring {
  width: 74px; height: 74px; margin: 0 auto 22px;
  border-radius: 50%;
  background: #D7F5E4;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.donecard__ring::before {
  content: ''; position: absolute; inset: -9px;
  border-radius: 50%; background: rgba(18, 161, 80, .10);
}
.donecard__ring svg { width: 34px; height: 34px; color: #12A150; position: relative; }
.donecard h2 { font-size: 20px; font-weight: 650; color: var(--stone-900); letter-spacing: -.3px; }
.donecard p { font-size: 13.5px; color: var(--stone-500); margin-top: 9px; }

/* --- empty state --------------------------------------------------------- */
.blank {
  padding: 56px 24px;
  text-align: center;
  color: var(--stone-500);
  font-size: 13.5px;
  border: 1px dashed var(--stone-200);
  border-radius: 11px;
  background: var(--stone-25);
}
.blank b { display: block; color: var(--stone-800); font-size: 14.5px; font-weight: 620; margin-bottom: 6px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .approw { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  :root { --rail-w: 68px; --topbar-h: 76px; }
  .rail__brand { justify-content: center; margin: 0 10px; }
  .rail__brand-text, .rail__brand-divider { display: none; }
  .rail__nav { padding-inline: 10px; }
  .processrail .railstep { justify-content: center; padding: 0; }
  .processrail .railstep > span { display: none; }
  .masthead { padding: 0 16px; }
  .topbar__sub, .topbar__who { display: none; }
  .page, .canvas > .page { padding: 18px 16px 44px; }
  .tabbar { margin-inline: -16px; padding-inline: 16px; gap: 18px; }
}

/* A column whose content must never wrap: a code, a date, a row of buttons.
   The record column is the only one allowed to take the slack. */
.dtable td.nowrap, .dtable th.nowrap { white-space: nowrap; }
/* The actions column takes only the width its buttons need, and keeps them on
   one line. Allowing it to wrap collapses the column instead, because the 1%
   width lets the cell shrink to nothing once the buttons stop holding it open. */
.dtable td:last-child { white-space: nowrap; width: 1%; }
.dtable .dtable__actions { flex-wrap: nowrap; justify-content: flex-end; }
.dtable tbody td:first-child { min-width: 240px; }

/* The Quality CFT, laid out as the Figma draws it: every member named, with a
   box beside them. A joint review is addressed to all of them at once, so the
   whole team is worth seeing at a glance. */
.cftrow { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 4px 0; }
.cftrow__one { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--stone-700); }
.cftrow__one input { width: 15px; height: 15px; accent-color: var(--indigo-600); cursor: pointer; }

/* The approval timeline's left rail: a clock against each round, joined by a
   dotted line. The line is drawn on the cell rather than between rows so it
   survives a table that scrolls sideways. */
.steptable__rail { width: 34px; padding: 11px 0 11px 4px !important; border: 0 !important; position: relative; }
.steptable td.steptable__rail::before {
  content: '';
  position: absolute;
  /* Centred on the clock: 4px cell padding + 4px margin + half of 23px. */
  left: 19px; top: 0; bottom: 0;
  border-left: 1.5px dotted var(--stone-300);
}
/* The line joins the rounds; it does not run off the top of the first or the
   bottom of the last. */
.steptable tbody tr:first-child td.steptable__rail::before { top: 50%; }
.steptable tbody tr:last-child td.steptable__rail::before { bottom: 50%; }
.steptable tbody tr:first-child:last-child td.steptable__rail::before { display: none; }
.tl {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--stone-300);
  color: var(--stone-400);
  margin-left: 4px;
}
.tl svg { width: 13px; height: 13px; }
.tl--now { border-color: #12A150; color: #12A150; }

/* A column of decisions.
   ----------------------------------------------------------------------------
   Every row on My Approvals carries the same shape - look at it, approve it,
   or send it back - but the words differ by step: "Approve & sign" against
   "Approve", "Return for correction" against "Raise objection". Sized to their
   text and pushed to the right, the buttons landed in a different place on
   every row and the column read as ragged.

   The cell is laid out instead: a fixed slot for the icon, then equal slots
   for the decisions, aligned left. The buttons keep their own words and still
   line up down the table however the labels differ. A step that also offers a
   rejection gets a fourth slot rather than squeezing the other three. */
.dtable .dtable__actions--decide {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, max-content);
  grid-template-columns: 32px;
  /* Written at this specificity on purpose: `.dtable .dtable__actions` above
     pushes actions to the right, which is what makes a column of unequal
     labels look ragged. A modifier alone loses to it and silently does
     nothing. */
  justify-content: start;
  align-items: center;
  gap: 8px;
}
.dtable .dtable__actions--decide > .btn { width: 100%; }

/* --------------------------------------------------------------------------
   31. The folder browser — Resources and the Template Builder

   The Figma stops presenting templates as a wall of cards and lays them out
   the way anybody who has used a filing cabinet expects: the drawers on the
   left, what is in the open drawer in the middle, and the one sheet you pulled
   out on the right. Two screens are built from it - Resources, where a
   template is taken down to be filled, and the Template Builder, where one is
   built - so it is written once, here and in `folderBrowser`.

   The third panel is only there when a sheet is out. An empty 400px column
   next to a table is not a neutral choice - it reads as something missing - so
   the grid drops to two columns until a row is picked.
   -------------------------------------------------------------------------- */
.reslayout {
  display: grid;
  gap: 16px;
  /* The three panels are one object, so they end on the same line. Left to
     their own heights they step down the page and the screen reads as three
     unrelated boxes rather than a cabinet, a drawer and a sheet. */
  align-items: stretch;
  grid-template-columns: 264px minmax(0, 1fr);
}
/* Deliberately not `is-open`: the shell clears that class from every element
   when a link is followed or the browser restores the page, and the layout
   would come back two columns wide with the third panel still in it. */
.reslayout.is-three { grid-template-columns: 264px minmax(0, 1fr) 392px; }

.respanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--stone-150);
  border-radius: 11px;
  overflow: hidden;
}
.respanel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.respanel__head--ruled { border-bottom: 1px solid var(--stone-150); }
/* Where a panel head carries more than one control they keep together at the
   end of the row rather than competing for the space the title needs. */
.respanel__head > .btn + .btn,
.respanel__head > .iconbtn + .btn { margin-left: 6px; }
.respanel__titles { min-width: 0; flex: 1; }
.respanel__title { font-size: 15px; font-weight: 640; color: var(--stone-900); }
.respanel__sub {
  font-size: 11.5px; color: var(--stone-500); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.respanel__body { padding: 0 12px 12px; }

/* --- the drawers ---------------------------------------------------------- */
.resfind { position: relative; margin: 0 4px 10px; }
.resfind input {
  width: 100%; height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--stone-200); border-radius: 8px;
  background: #fff; font: inherit; font-size: 12.5px; color: var(--stone-800);
}
.resfind input::placeholder { color: var(--stone-400); }
.resfind input:focus { outline: none; border-color: var(--indigo-400); box-shadow: 0 0 0 3px var(--indigo-50); }
.resfind svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--stone-400); pointer-events: none;
}

.restree { display: flex; flex-direction: column; gap: 1px; }
/* A row is two buttons, not one button inside another: the twist shows what a
   folder holds, and the folder itself opens it. They are separate acts and a
   keyboard has to be able to reach both. */
.restree__row {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 4px 1px 0;
  border-radius: 7px;
}
.restree__row:hover { background: var(--stone-50); }
/* The open drawer. Tinted rather than outlined, so a tree of twenty folders
   does not turn into a tree of twenty boxes. */
.restree__row.is-on { background: var(--indigo-50); }
.restree__row.is-on .restree__pick { color: var(--indigo-700); font-weight: 600; }
.restree__row.is-on .restree__folder { color: var(--indigo-600); }
/* A folder holding nothing the search matched. Still listed - a folder that
   vanishes while somebody types looks like it was deleted - but stood down. */
.restree__row.is-dim { opacity: .38; }

.restree__pick {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 6px 6px 3px;
  border: 0; border-radius: 6px;
  background: transparent;
  font: inherit; font-size: 12.5px; color: var(--stone-700);
  text-align: left; cursor: pointer;
}
.restree__pick:focus-visible, .restree__twist:focus-visible {
  outline: 2px solid var(--indigo-400); outline-offset: -2px;
}

.restree__twist {
  flex: none;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border: 0; padding: 0; margin: 0;
  background: transparent; color: var(--stone-400); cursor: pointer;
  border-radius: 4px;
}
.restree__twist:hover { background: var(--stone-150); color: var(--stone-700); }
.restree__twist svg { width: 13px; height: 13px; }
.restree__twist--none { visibility: hidden; }
.restree__folder { flex: none; color: var(--stone-400); }
.restree__folder svg { width: 16px; height: 16px; }
.restree__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restree__n {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 550; color: var(--stone-400);
  font-variant-numeric: tabular-nums;
}
.restree__row.is-on .restree__n { color: var(--indigo-500); }

/* --- what is in the drawer ------------------------------------------------ */
.resfolder-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--indigo-100); color: var(--indigo-600);
}
.resfolder-icon svg { width: 22px; height: 22px; }

.restable { width: 100%; border-collapse: collapse; font-size: 13px; }
.restable thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11.5px; font-weight: 600; color: var(--stone-500);
  border-bottom: 1px solid var(--stone-150);
}
.restable thead th:last-child { text-align: right; }
.restable tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--stone-100);
  color: var(--stone-700);
  vertical-align: middle;
}
.restable tbody tr:last-child td { border-bottom: 0; }
.restable tbody tr { cursor: pointer; }
.restable tbody tr:hover { background: var(--stone-25); }
.restable td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.restable__name { color: var(--stone-800); font-weight: 520; }
.restable__sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 3px;
  font-size: 11px; color: var(--stone-400);
}
.restable__sub .mono { font-size: 11px; }
/* The row whose sheet is out on the right, marked on its left edge so the
   middle panel and the right panel are visibly about the same thing. */
.restable tbody tr.is-on { background: var(--indigo-50); }
.restable tbody tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--indigo-600); }
.restable tbody tr.is-on .restable__name { color: var(--indigo-800); font-weight: 620; }

.iconbtn--view { color: var(--indigo-600); border-color: var(--indigo-200); background: var(--indigo-50); }
.iconbtn--view:hover { background: var(--indigo-100); color: var(--indigo-700); }

/* However many controls a row carries, they stay on one line and end flush
   with the Action heading above them. */
.restable__acts { display: inline-flex; gap: 8px; justify-content: flex-end; }

/* A tile that is also a filter. `.stat` is a div's worth of styling and these
   are buttons, so the button's own defaults have to be put back. */
.statrow .stat--button { font: inherit; }

/* The middle panel's pager carries the page numbers alone. Rows-per-page and
   a go-to box belong on a full-width register, not in a 400px column. */
.pager--compact { justify-content: center; margin-top: auto; }
.pager--compact > span:first-child,
.pager--compact > select,
.pager--compact .pager__go { display: none; }
.pager--compact .pager__pages { margin: 0; }

/* --- the sheet you pulled out --------------------------------------------- */
/* A long template name wraps to three lines, and a close button centred
   against three lines sits nowhere in particular. It belongs beside the first
   line, where the eye starts. */
.resdetail .respanel__head { align-items: flex-start; }
.resdetail__x {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--stone-200); border-radius: 8px;
  background: #fff; color: var(--stone-500); cursor: pointer;
}
.resdetail__x:hover { background: var(--stone-50); color: var(--stone-900); }
.resdetail__x svg { width: 15px; height: 15px; }

.respreview {
  border: 1px solid var(--stone-150);
  border-radius: 9px;
  background: var(--stone-100);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.respreview iframe, .respreview img {
  width: 100%; height: 100%;
  border: 0; display: block;
  object-fit: contain;
  background: #fff;
}
.respreview__none {
  text-align: center; padding: 18px;
  color: var(--stone-500); font-size: 12px;
}
.respreview__none svg { width: 26px; height: 26px; margin: 0 auto 8px; color: var(--stone-400); }

.resdetail__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--stone-150);
}
.resdetail__foot .btn { width: 100%; }

@media (max-width: 1180px) {
  .reslayout, .reslayout.is-three { grid-template-columns: 240px minmax(0, 1fr); }
  /* Below this the three columns stop being three columns, so the sheet goes
     under the table rather than beside it. */
  .reslayout.is-three > .resdetail { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .reslayout, .reslayout.is-three { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   32. Reporting — the dashboard

   Three series carry every chart on this screen, and they are states rather
   than identities: passed, waiting, failed. Their colours are NOT the product's
   --ok/--warn/--nok tokens, which is worth saying because the obvious choice is
   wrong: the amber and the rose are 5.7 apart in OKLab under deuteranopia, and
   stacked against each other in one bar a red-green reader cannot tell which
   segment is which. Indigo replaces the amber for "waiting", which also reads
   better - a record part-way through the approval chain is not a warning, it is
   simply not finished.

   The set below was validated rather than chosen by eye: every adjacent pair
   clears the CVD separation floor and the normal-vision floor, all three sit
   inside the lightness band and above the chroma floor, and each carries at
   least 3:1 against white.
   -------------------------------------------------------------------------- */
:root {
  --chart-pass:   #047857;   /* within specification */
  --chart-open:   #6E75D6;   /* raised, not yet judged */
  --chart-fail:   #BE123C;   /* out of specification */
  --chart-grid:   var(--stone-150);
  --chart-ink:    var(--stone-500);
}

.report-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1080px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }

.chartcard { background: var(--surface); border: 1px solid var(--stone-150); border-radius: 11px; }
.chartcard__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px 0;
}
.chartcard__title { font-size: 14px; font-weight: 640; color: var(--stone-900); }
.chartcard__sub { font-size: 11.5px; color: var(--stone-500); }
.chartcard__body { padding: 12px 16px 16px; }

/* The legend is always drawn for two series or more, so identity never rests
   on colour alone. */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--stone-600); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* --- the trend ----------------------------------------------------------- */
.trend { position: relative; }
.trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend__grid line { stroke: var(--chart-grid); stroke-width: 1; }
.trend__tick { font-size: 10px; fill: var(--chart-ink); }
.trend__hit { fill: transparent; cursor: default; }
.trend__hit:hover + .trend__band, .trend__band.is-on { fill: var(--stone-50); }
.trend__band { fill: transparent; pointer-events: none; }

.tip-float {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--stone-900); color: #fff;
  border-radius: 7px; padding: 8px 10px;
  font-size: 11.5px; line-height: 1.45;
  box-shadow: var(--pop);
  white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.tip-float.is-on { opacity: 1; }
.tip-float b { display: block; font-size: 12px; margin-bottom: 3px; }
.tip-float span { display: inline-flex; align-items: center; gap: 5px; }
.tip-float i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* --- department-wise ----------------------------------------------------- */
.deptrow { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 12px;
           align-items: center; padding: 9px 0; border-bottom: 1px solid var(--stone-100); }
.deptrow:last-child { border-bottom: 0; }
.deptrow__name { font-size: 12.5px; font-weight: 560; color: var(--stone-800);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A 2px gap between segments, so two fills never touch and a boundary is never
   an illusion created by two colours meeting. */
.deptbar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden;
           background: var(--stone-100); }
.deptbar span { display: block; min-width: 2px; }
.deptrow__n { font-size: 11.5px; color: var(--stone-500); font-variant-numeric: tabular-nums;
              white-space: nowrap; }
.deptrow__n b { color: var(--stone-900); font-weight: 620; }

/* --- the numbers behind a chart, for anyone who would rather read them ---- */
.numbers { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.numbers th, .numbers td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--stone-100); }
.numbers th:first-child, .numbers td:first-child { text-align: left; }
.numbers thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
                    color: var(--stone-500); font-weight: 620; }
.numbers tbody tr:last-child td { border-bottom: 0; }

/* --- actions ------------------------------------------------------------- */
.actionrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
             border-bottom: 1px solid var(--stone-100); }
.actionrow:last-child { border-bottom: 0; }
.actionrow__body { flex: 1; min-width: 0; }
.actionrow__what { font-size: 12.5px; color: var(--stone-800); }
.actionrow__meta { font-size: 11px; color: var(--stone-500); margin-top: 2px; }
.actionrow__due { font-size: 11px; font-weight: 620; white-space: nowrap; }
.actionrow__due--late { color: var(--nok-600); }

/* --- supporting photographs and documents -------------------------------- */
.shots { display: flex; flex-wrap: wrap; gap: 10px; }
.shot {
  position: relative;
  width: 132px;
  border: 1px solid var(--stone-150);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
}
.shot__thumb {
  display: block; width: 100%; height: 90px;
  object-fit: cover; background: var(--stone-100);
}
/* Anything that is not a picture still gets a tile the same size, so a row of
   attachments is a row rather than a ragged line. */
.shot__file { display: grid; place-items: center; height: 90px; background: var(--stone-50); color: var(--stone-400); }
.shot__file svg { width: 24px; height: 24px; }
.shot__cap { padding: 6px 8px; font-size: 11px; color: var(--stone-600); line-height: 1.35; }
.shot__cap b { display: block; color: var(--stone-800); font-weight: 580;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot__x {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(27, 27, 34, .62); color: #fff;
}
.shot__x svg { width: 12px; height: 12px; }
.shot__x:hover { background: var(--nok-600); }