/* =====================================================================
   ARHIC-BPMS
   A public-finance control system, not a marketing site. Colour carries
   meaning only: the state of a document, the direction of a variance.
   Structure comes from hairline rules and alignment rather than shadowed
   cards, and every figure is set in tabular numerals so columns line up
   on the digit.
   ===================================================================== */

:root {
  --ink:          #101d18;
  --ink-2:        #3d4c46;
  --ink-3:        #6b7a73;
  --rule:         #d5dcd7;
  --rule-soft:    #e6ebe7;
  --paper:        #ffffff;
  --canvas:       #eff2ef;
  --rail:         #0e2a21;
  --rail-2:       #16382c;
  --rail-ink:     #cfe0d7;
  --primary:      #12503a;
  --primary-2:    #0d3d2c;
  --primary-pale: #e4efe8;
  --over:         #9e2a2b;
  --over-pale:    #fbeaea;
  --under:        #1e6f4c;
  --caution:      #8a6100;
  --caution-pale: #fdf3e0;
  --focus:        #1a73e8;
  --radius:       4px;
  --shell-w:      248px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

h1 { font-size: 1.3rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 0.98rem; font-weight: 600; margin: 0 0 .8rem; }
h3 { font-size: .9rem; font-weight: 600; margin: 0 0 .5rem; }
a  { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-2); }

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

/* ---------- Shell ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--rail); color: #fff;
  padding: .65rem 1.25rem; border-bottom: 1px solid var(--rail-2);
  z-index: 40;
}
.brand {
  color: #fff; text-decoration: none; font-weight: 600;
  letter-spacing: .01em; font-size: .98rem;
  display: flex; align-items: center; gap: .55rem;
}
.brand::before {
  content: ""; width: 8px; height: 18px; border-radius: 1px;
  background: linear-gradient(180deg, #4f9c78 0%, #2f7a58 100%);
}
.topnav { display: flex; align-items: center; gap: 1.1rem; font-size: .85rem; }
.topnav a { color: #dff0e7; }
.topnav a:hover { color: #fff; }
.who { color: var(--rail-ink); }
.who strong { color: #fff; font-weight: 600; }
.context-chip {
  border: 1px solid #2c5a48; border-radius: 999px;
  padding: .12rem .6rem; color: #dff0e7; font-size: .78rem;
}

.shell { display: flex; min-height: 0; align-items: stretch; }

/*
 * The rail holds its own position while the page scrolls, and scrolls
 * separately when its own list is longer than the screen. overscroll-behavior
 * stops a flick at the end of the menu from carrying on into the page behind
 * it.
 */
.sidebar {
  width: var(--shell-w); flex: 0 0 var(--shell-w);
  background: var(--rail); color: var(--rail-ink);
  padding: .9rem 0 2rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16); border-radius: 4px;
}
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.sidebar nav { display: flex; flex-direction: column; }
.sidebar a {
  color: var(--rail-ink); text-decoration: none;
  padding: .48rem 1.25rem; font-size: .885rem;
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: var(--rail-2); color: #fff; }
.sidebar a.is-active {
  background: var(--rail-2); color: #fff; font-weight: 600; border-left-color: #4f9c78;
}
.nav-head {
  margin: 1.1rem 1.25rem .3rem; font-size: .72rem; font-weight: 600;
  color: #7fa494; letter-spacing: .04em;
}

.main { flex: 1 1 auto; padding: 1.35rem 1.6rem 3rem; min-width: 0; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.page-head .sub { color: var(--ink-3); font-size: .88rem; margin: .25rem 0 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.breadcrumb { font-size: .82rem; color: var(--ink-3); margin: 0 0 .5rem; }
.breadcrumb a { color: var(--ink-3); }

/*
 * Pinned rail.
 *
 * On a screen wide enough for the sidebar, the page itself does not scroll:
 * the body becomes a column, the top bar takes its natural height, and the
 * row below it is given the remaining space. The rail and the content area
 * each scroll inside that row, so the menu stays put while the content
 * moves, and a long menu can still be scrolled on its own.
 *
 * Doing it this way means no hard-coded top bar height. Nothing has to be
 * kept in step when the bar gains a logo or a second line.
 */
@media (min-width: 901px) {
  html { height: 100%; }

  body:not(.is-centered) {
    height: 100%; margin: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body:not(.is-centered) .topbar { flex: 0 0 auto; }
  body:not(.is-centered) .shell {
    flex: 1 1 auto; min-height: 0;          /* min-height:0 lets the children scroll */
  }
  body:not(.is-centered) .sidebar {
    height: auto; align-self: stretch; overflow-y: auto;
  }
  body:not(.is-centered) .main { overflow-y: auto; }
}

/* ---------- Panels ---------- */

.panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.05rem 1.15rem; margin-bottom: 1.1rem;
}
.panel > h2 {
  margin: -.15rem 0 .85rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--rule-soft);
}
.panel-flush { padding: 0; }
.panel-flush > h2 { margin: 0; padding: .9rem 1.15rem .7rem; }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Figure cards ---------- */

.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.card-label { color: var(--ink-3); font-size: .8rem; margin: 0 0 .3rem; }
.card-figure { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.card-note { color: var(--ink-3); font-size: .78rem; margin: .35rem 0 0; }
.card-accent { border-left: 3px solid var(--primary); }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; }

table.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.table th, table.table td {
  padding: .5rem .65rem; text-align: left;
  border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
table.table thead th {
  background: #f6f8f6; color: var(--ink-2); font-weight: 600; font-size: .8rem;
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 1;
}
table.table tbody tr:hover { background: #f8faf8; }
table.table tfoot td {
  font-weight: 600; border-top: 2px solid var(--rule); border-bottom: none; background: #f6f8f6;
}
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; letter-spacing: -.01em;
}
.line-meta { color: var(--ink-3); font-size: .78rem; }
.is-over  { color: var(--over); }
.is-under { color: var(--under); }
.is-over-generated  { color: var(--under); font-weight: 600; }
.is-under-generated { color: var(--over); }

/* ---------- State pills ---------- */

.state {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.state-draft       { background: #f0f2f1; color: var(--ink-2); border-color: var(--rule); }
.state-submitted   { background: #eef3fb; color: #1b4d8f; border-color: #cfe0f5; }
.state-review      { background: #eef3fb; color: #1b4d8f; border-color: #cfe0f5; }
.state-bilateral   { background: var(--caution-pale); color: var(--caution); border-color: #f0dcb4; }
.state-agreed      { background: var(--primary-pale); color: var(--primary); border-color: #c6ded1; }
.state-recommended { background: var(--primary-pale); color: var(--primary); border-color: #c6ded1; }
.state-approved    { background: #e3f2e9; color: #14603f; border-color: #bcdcc9; }
.state-returned    { background: var(--caution-pale); color: var(--caution); border-color: #f0dcb4; }
.state-rejected    { background: var(--over-pale); color: var(--over); border-color: #f0c8c8; }

/* ---------- Workflow stage rail ---------- */

.stage-rail {
  display: grid; gap: 0; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: .25rem 0 .2rem; padding: 0; list-style: none;
}
.stage { position: relative; padding: 2.1rem .7rem 0 0; min-width: 0; }
.stage::before {
  content: ""; position: absolute; top: 11px; left: 0; right: 0;
  height: 2px; background: var(--rule);
}
.stage:last-child::before { right: calc(100% - 24px); }
.stage::after {
  content: ""; position: absolute; top: 4px; left: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule);
}
.stage-done::before    { background: var(--primary); }
.stage-done::after     { background: var(--primary); border-color: var(--primary); }
.stage-current::before { background: linear-gradient(90deg, var(--primary) 50%, var(--rule) 50%); }
.stage-current::after  { border-color: var(--primary); background: var(--paper); box-shadow: 0 0 0 4px var(--primary-pale); }
.stage-halted::before  { background: var(--over); }
.stage-halted::after   { background: var(--over); border-color: var(--over); }

.stage-label { font-weight: 600; font-size: .855rem; }
.stage-current .stage-label { color: var(--primary); }
.stage-halted .stage-label  { color: var(--over); }
.stage-pending .stage-label { color: var(--ink-3); font-weight: 500; }
.stage-note  { color: var(--ink-3); font-size: .76rem; margin: .15rem 0 0; }
.stage-actor { color: var(--ink-2); font-size: .76rem; margin: .3rem 0 0; }

/* ---------- Trail ---------- */

.trail { list-style: none; margin: 0; padding: 0; }
.trail li {
  padding: .5rem 0 .5rem .95rem; border-left: 2px solid var(--rule);
  position: relative; font-size: .86rem;
}
.trail li::before {
  content: ""; position: absolute; left: -5px; top: .95rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.trail-comment {
  display: block; color: var(--ink-2); margin-top: .2rem;
  border-left: 2px solid var(--rule-soft); padding-left: .6rem;
}

/* ---------- Forms ---------- */

label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=file],
select, textarea {
  width: 100%; padding: .45rem .55rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
textarea { min-height: 80px; resize: vertical; }
input[type=checkbox] { width: auto; accent-color: var(--primary); }

.field { margin-bottom: .75rem; }
.field-wide { grid-column: 1 / -1; }
.line-form, .filter-bar {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end;
}
.form-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.inline-form input[type=file] { max-width: 320px; }
.num-input { text-align: right; font-variant-numeric: tabular-nums; }
.hint { color: var(--ink-3); font-size: .8rem; margin: .4rem 0 0; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.checkbox-row label { margin: 0; font-weight: 500; }

button, .button {
  display: inline-block; padding: .45rem .85rem;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  border-radius: var(--radius); font: inherit; font-size: .875rem; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
button:hover, .button:hover { background: var(--primary-2); color: #fff; }
.button-quiet { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.button-quiet:hover { background: #f4f6f4; color: var(--ink); border-color: var(--ink-3); }
.button-danger { background: var(--over); border-color: var(--over); }
.button-danger:hover { background: #872426; }
.button-small { padding: .25rem .55rem; font-size: .8rem; }

/* ---------- Alerts ---------- */

.alert {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  background: var(--paper); border-radius: var(--radius);
  padding: .6rem .85rem; margin-bottom: .9rem; font-size: .89rem;
}
.alert-success { border-left-color: var(--under); background: #f1f8f4; }
.alert-error   { border-left-color: var(--over);  background: var(--over-pale); }
.alert-warning { border-left-color: var(--caution); background: var(--caution-pale); }

.empty { color: var(--ink-3); font-size: .88rem; margin: .3rem 0; }
.meta  { color: var(--ink-3); font-size: .8rem; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: .35rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .88rem; }
.plain-list li:last-child { border-bottom: none; }

/* ---------- Utilisation meter ---------- */

.meter {
  position: relative; height: 6px; background: var(--rule-soft);
  border-radius: 3px; overflow: hidden; min-width: 70px;
}
.meter span { display: block; height: 100%; background: var(--primary); }
.meter-over span { background: var(--over); }
.meter-low span  { background: var(--caution); }

/* ---------- Sign-in ----------
   The Centre's identity on the left, the form on the right, on one themed
   background. Both arrive with a short movement — enough to draw the eye,
   short enough not to delay anyone signing in, and switched off entirely
   for a device that asks for less motion.
   ------------------------------------------------------------------- */

.auth-body {
  margin: 0; min-height: 100vh; color: #fff;
  background:
    radial-gradient(120% 90% at 78% 8%,
      color-mix(in srgb, var(--primary) 52%, transparent) 0%, transparent 62%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--rail) 84%, var(--primary)) 0%,
      var(--rail) 54%,
      color-mix(in srgb, var(--rail) 84%, #000) 100%);
  background-attachment: fixed;
}

.auth-body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12;
  background-image:
    repeating-linear-gradient(60deg, transparent 0 26px, var(--accent) 26px 27px),
    repeating-linear-gradient(-60deg, transparent 0 26px, var(--accent) 26px 27px);
  -webkit-mask-image: radial-gradient(115% 85% at 12% 8%, #000 28%, transparent 76%);
          mask-image: radial-gradient(115% 85% at 12% 8%, #000 28%, transparent 76%);
}

.auth-shell {
  position: relative; z-index: 1;
  display: grid; min-height: 100vh; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: 2.5rem clamp(1.5rem, 6vw, 5rem);
  max-width: 1440px; margin: 0 auto;
}

/* ---------- Left: the Centre ---------- */

.auth-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.4rem; background: none; padding: 0; color: #fff; max-width: 620px;
  animation: auth-rise .7s cubic-bezier(.2,.7,.3,1) both;
}

.auth-logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 18px; padding: 1rem 1.15rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  animation: auth-logo-in .8s cubic-bezier(.2,.7,.3,1) both;
}

/* Rendered at its own proportions, capped by height, so a high-resolution
   file stays sharp instead of being squeezed into a box. */
.auth-logo {
  display: block; height: clamp(84px, 11vw, 132px); width: auto;
  max-width: min(320px, 60vw); object-fit: contain;
}

.auth-wordmark {
  display: inline-block; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em;
  padding: .5rem 1rem; border: 2px solid var(--accent); border-radius: 10px;
}

.auth-brand-body { width: 100%; }
.auth-brand-body h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.15; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 .5rem; max-width: 18ch; text-wrap: balance;
}
.auth-tagline {
  margin: 0; font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.5;
  color: color-mix(in srgb, #fff 82%, var(--accent)); max-width: 44ch; text-wrap: pretty;
}

.auth-points { list-style: none; margin: .6rem 0 0; padding: 0; max-width: 52ch; }
.auth-points li {
  position: relative; padding: .45rem 0 .45rem 1.6rem;
  font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.88); text-wrap: pretty;
  animation: auth-rise .7s cubic-bezier(.2,.7,.3,1) both;
}
.auth-points li:nth-child(1) { animation-delay: .12s; }
.auth-points li:nth-child(2) { animation-delay: .20s; }
.auth-points li:nth-child(3) { animation-delay: .28s; }
.auth-points li::before {
  content: ""; position: absolute; left: 0; top: 1.1rem;
  width: 10px; height: 2px; background: var(--accent); border-radius: 2px;
}

.auth-brand-foot {
  margin: 0; font-size: .78rem; color: rgba(255,255,255,.55); max-width: 46ch;
}

/* ---------- Right: the form ---------- */

.auth-panel {
  display: flex; align-items: center; justify-content: flex-end;
  background: none; padding: 0; width: 100%;
}

.auth-panel-inner {
  width: 100%; max-width: 384px;
  padding: 1.8rem 1.6rem 1.5rem;
  border-radius: 18px; text-align: left;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  animation: auth-panel-in .75s cubic-bezier(.2,.7,.3,1) .1s both;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .auth-panel-inner { background: rgba(12, 22, 18, .84); }
}

.auth-form h2 {
  font-size: 1.2rem; font-weight: 600; margin: 0 0 .3rem;
  letter-spacing: -0.01em; color: #fff; text-align: center;
}
.auth-sub {
  color: rgba(255,255,255,.72); font-size: .84rem; margin: 0 0 1.3rem;
  text-align: center; text-wrap: pretty;
}

.auth-form .field { margin-bottom: .85rem; }
.auth-form label { color: rgba(255,255,255,.84); font-weight: 500; margin-bottom: .35rem; }

.auth-form input[type=text],
.auth-form input[type=password] {
  padding: .58rem .7rem; border-radius: 9px; font-size: .95rem;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  caret-color: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-form input::placeholder { color: rgba(255,255,255,.55); }
.auth-form input[type=text]:focus,
.auth-form input[type=password]:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  outline: none;
  color: #fff;
}

/* Autofill.
   The browser paints its own pale background over a filled field and keeps
   its own dark text — on a dark panel that left pale text on pale ground,
   which is what made the username unreadable. The inset shadow repaints the
   field, the fill colour repaints the text, and the absurd transition delay
   is the long-standing way of stopping the browser overriding both again. */
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus,
.auth-form input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 60px color-mix(in srgb, var(--rail) 82%, #000) inset !important;
          box-shadow: 0 0 0 60px color-mix(in srgb, var(--rail) 82%, #000) inset !important;
  border: 1px solid rgba(255,255,255,.28);
  transition: background-color 100000s ease-in-out 0s;
}
.auth-form input:autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 60px color-mix(in srgb, var(--rail) 82%, #000) inset;
}

.auth-submit {
  width: 100%; padding: .62rem; margin-top: .5rem;
  font-size: .93rem; font-weight: 600; border-radius: 9px;
  background: var(--accent); border-color: var(--accent);
  color: color-mix(in srgb, var(--rail) 85%, #000);
  transition: transform .12s ease, background .15s ease;
}
.auth-submit:hover {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
  border-color: color-mix(in srgb, var(--accent) 86%, #fff);
  color: color-mix(in srgb, var(--rail) 85%, #000);
  transform: translateY(-1px);
}
.auth-submit:active { transform: translateY(0); }

.auth-foot {
  margin: 1rem 0 0; padding-top: .85rem; text-align: center;
  border-top: 1px solid rgba(255,255,255,.16); font-size: .85rem;
}
.auth-foot a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }

.auth-notice {
  margin: 1rem 0 0; padding: .65rem .8rem; border-radius: 10px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  font-size: .83rem; color: rgba(255,255,255,.85); text-align: center;
}

.auth-body .alert {
  margin-bottom: 1rem; color: var(--ink); text-align: left;
  background: rgba(255,255,255,.94); border-color: rgba(255,255,255,.4);
}

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes auth-logo-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes auth-panel-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Centred, for anyone who prefers it ---------- */

.auth-centred .auth-shell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.4rem;
}
.auth-centred .auth-brand { align-items: center; max-width: 460px; }
.auth-centred .auth-brand-body h1 { margin-inline: auto; max-width: 24ch; }
.auth-centred .auth-tagline { margin-inline: auto; }
.auth-centred .auth-points { display: none; }
.auth-centred .auth-panel { justify-content: center; }
.auth-centred .auth-logo { height: clamp(64px, 9vw, 92px); }

/* ---------- Narrow screens: one column, identity above the form ---------- */

@media (max-width: 900px) {
  .auth-shell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem 1.3rem; gap: 1.3rem;
  }
  .auth-brand { align-items: center; max-width: 460px; gap: 1rem; }
  .auth-brand-body h1 { margin-inline: auto; max-width: 22ch; }
  .auth-tagline { margin-inline: auto; }
  .auth-points, .auth-brand-foot { display: none; }
  .auth-logo { height: clamp(64px, 15vw, 92px); }
  .auth-panel { justify-content: center; }
  .auth-panel-inner { max-width: 420px; }
}

@media (max-width: 380px) {
  .auth-panel-inner { padding: 1.4rem 1.1rem 1.25rem; border-radius: 14px; }
  .auth-brand-body h1 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-brand, .auth-logo-plate, .auth-panel-inner, .auth-points li {
    animation: none !important;
  }
  .auth-submit { transition: none; }
}

/* ---------- Menu button, drawer and tab bar ----------
   Below 1024px the fixed rail becomes a drawer. It is driven by a single
   hidden checkbox, so it opens and closes with no JavaScript; the script in
   the layout only adds Escape-to-close. Above 1024px none of this shows and
   the rail behaves exactly as before.
   ------------------------------------------------------------------- */

/* Visually hidden but still focusable, so the menu can be reached by keyboard. */
.nav-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.nav-toggle:focus-visible + .topbar .nav-button { outline: 2px solid #fff; outline-offset: 2px; }

.nav-button, .nav-close, .nav-backdrop, .tabbar, .topbar-account { display: none; }

.nav-button {
  width: 40px; height: 40px; border-radius: var(--radius);
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid transparent; flex: 0 0 auto;
}
.nav-button:hover, .nav-button:focus-visible { background: rgba(255,255,255,.12); }
.nav-button-bars, .nav-button-bars::before, .nav-button-bars::after {
  display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
}
.nav-button-bars { position: relative; }
.nav-button-bars::before, .nav-button-bars::after { content: ""; position: absolute; left: 0; }
.nav-button-bars::before { top: -6px; }
.nav-button-bars::after  { top: 6px; }

.nav-identity { display: none; }

.topbar-account {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.16); color: #fff; text-decoration: none;
  align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600;
}

@media (max-width: 1024px) {
  .nav-button { display: flex; }
  .topbar { gap: .65rem; padding: .55rem .9rem; flex-wrap: nowrap; }
  .topnav { display: none; }
  .topbar-account { display: flex; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .shell { display: block; min-height: 0; }
  .main { padding: 1rem .9rem 5.5rem; }

  /* The drawer itself. Off-canvas, full height, scrolls independently. */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(310px, 86vw); flex: none; padding: 0 0 2rem;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .nav-toggle:checked ~ .shell .sidebar {
    transform: translateX(0);
    box-shadow: 6px 0 28px rgba(0,0,0,.35);
  }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(8,16,13,.55);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
  }
  .nav-toggle:checked ~ .nav-backdrop { opacity: 1; visibility: visible; }

  /* Who you are, which year you are in, and the way out — at the top of the
     drawer, because that is where they went when the top bar got narrow. */
  .nav-identity {
    display: block; position: relative;
    padding: 1rem 1.1rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.07), transparent);
  }
  .nav-identity-who { display: flex; align-items: center; gap: .6rem; color: #fff; }
  .nav-identity-who strong { display: block; font-size: .92rem; line-height: 1.25; }
  .nav-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--rail); font-weight: 700;
  }
  .nav-identity-role { font-size: .78rem; color: var(--rail-ink); }
  .nav-identity-year {
    margin: .7rem 0 0; font-size: .76rem; color: var(--rail-ink);
    border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    padding: .15rem .6rem; display: inline-block;
  }
  .nav-identity-links { margin: .7rem 0 0; display: flex; gap: 1rem; font-size: .84rem; }
  .nav-identity-links a { color: #fff; padding: 0; border: none; }
  .nav-close {
    display: block; position: absolute; top: .5rem; right: .6rem;
    width: 34px; height: 34px; line-height: 32px; text-align: center;
    color: #fff; font-size: 1.5rem; cursor: pointer; border-radius: 50%;
  }
  .nav-close:hover { background: rgba(255,255,255,.14); }

  /* Touch targets, not the 32px rows a mouse can hit. */
  .sidebar nav { flex-direction: column; }
  .sidebar a {
    padding: .7rem 1.1rem; font-size: .93rem;
    border-left: 3px solid transparent; border-bottom: none;
    white-space: normal;
  }
  .sidebar a.is-active { border-left: 3px solid var(--accent); border-bottom: none; }
  .nav-head {
    display: block; margin: 1.1rem 1.1rem .2rem;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  }

  /* Bottom bar: the four places people live in, plus the way into the rest. */
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--paper); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a, .tabbar-menu {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    padding: .5rem .2rem .55rem; text-decoration: none; cursor: pointer;
    color: var(--ink-3); font-size: .68rem; text-align: center; line-height: 1.15;
  }
  .tabbar a.is-active { color: var(--primary); font-weight: 600; }
  .tabbar-dot {
    width: 18px; height: 18px; border-radius: 5px;
    border: 2px solid currentColor; opacity: .85;
  }
  .tabbar a.is-active .tabbar-dot { background: var(--primary-pale); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stage-rail { grid-auto-flow: row; grid-auto-columns: auto; }
  .stage { padding: 0 0 .9rem 1.6rem; }
  .stage::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .stage:last-child::before { bottom: 50%; right: auto; }
  .stage::after { top: 2px; left: 0; }
}

/* Tablets are wide enough for two columns of figures. */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 1.2rem 1.4rem 5.5rem; }
}

/* The bottom bar is a phone affordance; on a tablet the drawer is enough. */
@media (min-width: 741px) {
  .tabbar { display: none; }
  .main { padding-bottom: 3rem; }
}

@media (max-width: 420px) {
  .tabbar a, .tabbar-menu { font-size: .63rem; }
  .brand-name { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Print: budget papers should print as official documents ---------- */

@media print {
  body { background: #fff; font-size: 11pt; }
  .topbar, .sidebar, .page-actions, .form-actions, .filter-bar,
  form, .alert, .button, button { display: none !important; }
  .shell { display: block; }
  html, body { height: auto; overflow: visible; display: block; }
  .main, .sidebar { overflow: visible; height: auto; }
  .shell { display: block; }
  .main { padding: 0; }
  .panel { border: none; border-top: 1px solid #000; border-radius: 0; padding: 0 0 12pt; margin: 0 0 12pt; }
  .panel > h2 { border-bottom: none; }
  table.table { font-size: 9.5pt; }
  table.table thead th { background: none; border-bottom: 1px solid #000; position: static; }
  table.table td, table.table th { padding: 3pt 4pt; }
  .print-only { display: block !important; }
  .print-head { text-align: center; margin-bottom: 12pt; }
  .print-head h1 { font-size: 13pt; }
  .print-head p { margin: 2pt 0; font-size: 10pt; }
  .signature-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24pt; margin-top: 36pt; }
  .signature-block div { border-top: 1px solid #000; padding-top: 4pt; font-size: 9.5pt; }
  a { color: #000; text-decoration: none; }
}

.print-only { display: none; }

/* ---------- Inline line editing ---------- */

.edit-line {
  border: 1px solid var(--rule); border-radius: var(--radius);
  margin-bottom: .5rem; background: #fbfcfb;
}
.edit-line > summary {
  cursor: pointer; padding: .5rem .7rem; font-size: .87rem;
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
}
.edit-line > summary::marker { color: var(--ink-3); }
.edit-line[open] > summary { border-bottom: 1px solid var(--rule-soft); font-weight: 600; }
.edit-line > form { padding: .8rem .7rem; }
.num-inline { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.link-danger {
  background: none; border: none; color: var(--over); padding: .25rem .35rem;
  font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline;
}
.hidden { display: none; }

/* ---------- Ceiling strip on the entry screen ---------- */

.ceiling-strip {
  display: grid; gap: .7rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.ceiling-item {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .6rem .7rem; background: var(--paper);
}
.ceiling-item .card-label { margin-bottom: .15rem; }
.ceiling-figure {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 .4rem;
  font-variant-numeric: tabular-nums;
}
.ceiling-item .meter { margin-bottom: .35rem; }

/* ---------- Setup tabs ---------- */

.tabs {
  display: flex; gap: .2rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); margin-bottom: 1.1rem;
}
.tabs a {
  padding: .45rem .8rem; text-decoration: none; color: var(--ink-2);
  font-size: .875rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--primary); }
.tabs a.is-active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

.is-retired { opacity: .6; }

/* ---------- Statements ---------- */

.statement-head { text-align: center; margin: 0 0 1rem; }
.statement-org { font-weight: 600; margin: 0; font-size: 1rem; }
.statement-head h1 { font-size: 1.15rem; margin: .3rem 0; font-weight: 600; }
.statement-meta { margin: .1rem 0; color: var(--ink-3); font-size: .84rem; }

table.table tr.row-head td { background: #f6f8f6; border-top: 1px solid var(--rule); }
table.table tr.row-total td {
  font-weight: 600; border-top: 1px solid var(--rule); border-bottom: 2px solid var(--rule);
}

.variance {
  border: 1px solid var(--rule); border-left: 3px solid var(--caution);
  border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: .7rem;
}
.variance.is-explained { border-left-color: var(--under); }
.variance-head { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; font-size: .87rem; }
.variance-text { margin: .5rem 0 .2rem; font-size: .89rem; }
.no-print { }

@media print {
  .no-print { display: none !important; }
  .variance { border-left-width: 1px; page-break-inside: avoid; }
  .statement-head { margin-bottom: 18pt; }
}

/* ---------- Logo ---------- */

.brand-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 5px; padding: 3px 5px; line-height: 0;
}
.brand-logo { height: 24px; width: auto; display: block; }
.brand-name { font-weight: 600; letter-spacing: .02em; }
.brand-has-logo::before { display: none; }

.splash-chip {
  display: inline-flex; background: #fff; border-radius: 16px;
  padding: 16px; margin-bottom: .9rem; line-height: 0;
  animation: splash-rise .5s ease both;
}
.splash-chip .splash-logo { margin: 0; max-width: 116px; max-height: 116px; animation: none; }
.login-logo { display: block; max-height: 64px; max-width: 180px; margin: 0 auto 1rem; }

/* ---------- Splash ---------- */

.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: var(--rail);
  opacity: 1; transition: opacity .35s ease;
}
.splash.is-done { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; padding: 1.5rem; max-width: 320px; }
.splash-logo {
  max-width: 132px; max-height: 132px; margin: 0 auto .9rem; display: block;
  animation: splash-rise .5s ease both;
}
.splash-fallback {
  display: inline-block; margin-bottom: .9rem;
  font-size: 1.6rem; font-weight: 600; letter-spacing: .06em; color: #fff;
  border: 2px solid var(--accent); border-radius: 6px; padding: .5rem 1rem;
  animation: splash-rise .5s ease both;
}
.splash-name {
  color: #fff; font-size: .95rem; font-weight: 600; margin: 0 0 .2rem;
  animation: splash-rise .5s .06s ease both;
}
.splash-note {
  color: var(--rail-ink); font-size: .8rem; margin: 0 0 1rem;
  animation: splash-rise .5s .12s ease both;
}
.splash-bar {
  width: 150px; height: 3px; margin: 1rem auto 0; border-radius: 2px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.splash-bar span {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: var(--accent); animation: splash-sweep 1.1s ease-in-out infinite;
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* Without JavaScript the splash still clears itself. */
.splash { animation: splash-clear .1s forwards; animation-delay: 5s; }
@keyframes splash-clear { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-name, .splash-note { animation: none; }
  .splash-bar span { animation: none; width: 100%; }
}
@media print { .splash { display: none !important; } }

/* ---------- Branding screen ---------- */

.swatch-grid {
  display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.swatch {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .7rem; background: var(--paper); cursor: pointer; display: block;
}
.swatch input { margin-right: .4rem; }
.swatch-bars { display: flex; height: 26px; border-radius: 3px; overflow: hidden; margin: .5rem 0 .4rem; }
.swatch-bars span { flex: 1; }
.swatch-name { font-weight: 600; font-size: .87rem; }
.swatch-note { color: var(--ink-3); font-size: .78rem; margin: .2rem 0 0; }
.logo-preview {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 1rem; text-align: center; background: #fbfcfb; margin-bottom: .6rem;
}
.logo-preview img { max-height: 80px; max-width: 100%; }
.logo-preview-dark { background: var(--rail); }

/* ---------- Minute sheet ---------- */

.letter-body { white-space: pre-wrap; font-size: .93rem; line-height: 1.7; }

.minutes { list-style: none; margin: 0; padding: 0; counter-reset: minute; }
.minute {
  border-left: 2px solid var(--rule); padding: .6rem 0 .6rem .9rem;
  margin-bottom: .2rem; position: relative;
}
.minute::before {
  content: ""; position: absolute; left: -5px; top: 1rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rule);
}
.minute.is-pending { border-left-color: var(--primary); }
.minute.is-pending::before { background: var(--primary); }
.minute-head { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; font-size: .88rem; }
.minute-seq {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; font-weight: 600;
  background: var(--primary-pale); color: var(--primary);
}
.minute-text {
  margin: .4rem 0 .2rem; font-size: .9rem; white-space: pre-wrap;
  border-left: 2px solid var(--rule-soft); padding-left: .7rem;
}
@media print {
  .minute { page-break-inside: avoid; }
  .letter-body { font-size: 11pt; }
}

/* =====================================================================
   Dashboard
   Grid for the page skeleton, flex inside each block. Everything reflows
   to one column on a phone without a media query per component.
   ===================================================================== */

.dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.dash-head h1 { font-size: 1.35rem; }
.dash-head .sub { color: var(--ink-3); font-size: .87rem; margin: .3rem 0 0; }
.dash-year { display: flex; align-items: center; gap: .5rem; }
.dash-year label { margin: 0; font-size: .8rem; color: var(--ink-3); }
.dash-year select { width: auto; min-width: 120px; }

/* The "what needs me" strip */
.dash-strip {
  display: grid; gap: .6rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.strip-item {
  display: flex; align-items: baseline; gap: .55rem;
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule); border-radius: var(--radius);
  padding: .65rem .8rem; text-decoration: none; color: var(--ink);
}
.strip-item:hover { border-color: var(--ink-3); color: var(--ink); }
.strip-item.is-live { border-left-color: var(--primary); }
.strip-item.is-warn { border-left-color: var(--caution); }
.strip-figure { font-size: 1.3rem; font-weight: 600; line-height: 1; }
.strip-label { color: var(--ink-3); font-size: .8rem; }

/* Headline figures */
.dash-kpis {
  display: grid; gap: .9rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kpi {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.kpi-accent { border-left: 3px solid var(--primary); }
.kpi-label { color: var(--ink-3); font-size: .8rem; margin: 0; }
.kpi-figure {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.kpi-note { color: var(--ink-3); font-size: .78rem; margin: 0; }
.kpi .meter { margin: .1rem 0; }

/* Two-column body: content and a working rail */
.dash-grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.dash-main > .panel, .dash-side > .panel { margin-bottom: 0; }

/* Monthly bars, drawn with flex rather than a chart library */
.chart {
  display: flex; align-items: flex-end; gap: .5rem;
  height: 170px; padding-top: .5rem;
}
.chart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.chart-bars {
  flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end;
  justify-content: center; gap: 3px;
}
.bar { width: 44%; min-height: 2px; border-radius: 2px 2px 0 0; display: block; }
.bar-revenue { background: var(--primary); }
.bar-expense { background: var(--accent, #4F9C78); opacity: .85; }
.chart-label { font-size: .72rem; color: var(--ink-3); }
.chart-key { display: flex; gap: 1rem; align-items: center; font-size: .78rem; margin: .7rem 0 0; }
.key { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); }
.key::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
.key-revenue::before { background: var(--primary); }
.key-expense::before { background: var(--accent, #4F9C78); }

/* Side rail lists */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.feed-item { padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .88rem; }
.feed-item:last-child { border-bottom: none; }
.feed-item.is-urgent { border-left: 2px solid var(--caution); padding-left: .55rem; }
.feed-meta { color: var(--ink-3); font-size: .77rem; margin: .2rem 0 0; }
.feed-item .meter { margin: .35rem 0 .2rem; }

.pipeline { list-style: none; margin: 0; padding: 0; }
.pipeline li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .42rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .88rem;
}
.pipeline li:last-child { border-bottom: none; }
.pipeline-count {
  min-width: 26px; text-align: center; border-radius: 999px;
  background: #f0f2f1; color: var(--ink-2);
  font-size: .78rem; font-weight: 600; padding: .1rem .45rem;
}
.pipeline-count.is-live { background: var(--primary-pale); color: var(--primary); }

.quick { display: flex; flex-wrap: wrap; gap: .45rem; }
.quick .button { flex: 1 1 auto; text-align: center; }

@media (max-width: 1050px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .chart { height: 130px; }
  .dash-head h1 { font-size: 1.18rem; }
}

/* Ceiling shown against the line being entered */
.ceiling-inline {
  margin: 0; padding: .5rem .65rem; font-size: .85rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--primary);
  border-radius: var(--radius); background: #fbfcfb; color: var(--ink-2);
}
.ceiling-inline.is-tight  { border-left-color: var(--caution); background: var(--caution-pale); }
.ceiling-inline.is-breach { border-left-color: var(--over); background: var(--over-pale); color: var(--over); font-weight: 600; }

/* ---------- Role permissions ---------- */

.perm-group {
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: .7rem .8rem; background: #fbfcfb;
}
.perm-group.has-some { border-color: var(--rule); background: var(--paper); }
.perm-group h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.perm-count {
  font-size: .72rem; font-weight: 600; color: var(--ink-3);
  background: #f0f2f1; border-radius: 999px; padding: .1rem .45rem;
}
.perm-group.has-some .perm-count { background: var(--primary-pale); color: var(--primary); }
.perm-note { display: block; color: var(--ink-3); font-size: .74rem; font-weight: 400; margin-top: .1rem; }
.perm-all { margin-top: .5rem; }

/* ---------- Users ---------- */

.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-pale); color: var(--primary);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  margin-right: .55rem; vertical-align: middle;
}
.user-name { display: inline-block; vertical-align: middle; line-height: 1.25; }

/* ---------- Photographs ---------- */

.profile-row { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.profile-photo {
  width: 108px; height: 132px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: #f4f6f5;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-initials { font-size: 1.6rem; font-weight: 700; color: var(--ink-3); }

.photo-thumb {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  margin-right: .55rem; vertical-align: middle; border: 1px solid var(--rule-soft);
}
.payslip-photo {
  width: 96px; height: 116px; object-fit: cover;
  border: 1px solid var(--rule); border-radius: 3px;
}

/* ---------- Sign-in preview on the appearance screen ---------- */

.auth-mini-preview {
  display: grid; grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; margin-top: 1rem; min-height: 150px;
}
.auth-mini-brand {
  padding: 1rem; color: #fff; display: flex; flex-direction: column; gap: .35rem;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--rail) 86%, var(--primary)) 0%, var(--rail) 100%);
}
.auth-mini-brand strong { font-size: .95rem; line-height: 1.25; }
.auth-mini-brand span { font-size: .76rem; color: rgba(255,255,255,.75); }
.auth-mini-mark {
  align-self: flex-start; border: 2px solid var(--accent); border-radius: 3px;
  padding: .1rem .4rem; font-weight: 700; font-size: .8rem !important;
  color: #fff !important;
}
.auth-mini-form {
  padding: 1rem; background: var(--paper);
  display: flex; flex-direction: column; gap: .3rem; justify-content: center;
}
.auth-mini-label { font-size: .7rem; color: var(--ink-3); }
.auth-mini-input {
  height: 22px; border: 1px solid var(--rule); border-radius: 3px; margin-bottom: .3rem;
}
.auth-mini-button {
  background: var(--primary); color: #fff; text-align: center;
  padding: .3rem; border-radius: 3px; font-size: .78rem; font-weight: 600; margin-top: .3rem;
}
@media (max-width: 700px) { .auth-mini-preview { grid-template-columns: 1fr; } }

/* ---------- Letters ---------- */

.letter-preview {
  white-space: pre-wrap; word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.55; color: var(--ink-2);
  background: #fbfcfb; border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: .9rem 1rem; margin: 0; max-height: 460px; overflow-y: auto;
}
textarea.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.5;
}

.addition-block {
  border-top: 1px solid var(--rule-soft); margin-top: .8rem; padding: .9rem .7rem 0;
}
.addition-block h3 { margin-bottom: .5rem; }

/* ---------- Public verification page ---------- */

.public-body {
  margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink);
  display: flex; flex-direction: column;
}
.public-head {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.3rem; background: var(--rail); color: #fff;
}
.public-head strong { display: block; font-size: .98rem; }
.public-head span { font-size: .8rem; color: var(--rail-ink); }
.public-head .auth-logo { height: 38px; }
.public-head .auth-logo-plate { padding: .35rem .45rem; border-radius: 9px; }
.public-main { flex: 1 1 auto; padding: 1.8rem 1.2rem; display: flex; justify-content: center; }
.public-foot {
  padding: 1rem 1.3rem; text-align: center; color: var(--ink-3); font-size: .8rem;
  border-top: 1px solid var(--rule);
}
.verify-panel { width: 100%; max-width: 560px; }
.verify-panel h1 { font-size: 1.25rem; margin: 0 0 .3rem; }
.verify-panel .sub { color: var(--ink-3); font-size: .9rem; margin: 0 0 1.2rem; }
.verify-panel input[type=text] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.verify-panel button { width: 100%; margin-top: .8rem; padding: .6rem; }
.verify-verdict {
  display: inline-block; padding: .3rem .8rem; border-radius: 999px;
  font-weight: 600; font-size: .84rem; margin-bottom: .9rem;
}
.verify-good { background: #e3f2e9; color: #14603f; border: 1px solid #bcdcc9; }
.verify-warn { background: var(--caution-pale); color: var(--caution); border: 1px solid #f0dcb4; }
.verify-bad  { background: var(--over-pale); color: var(--over); border: 1px solid #f0c8c8; }
.verify-table th { width: 40%; color: var(--ink-2); font-weight: 600; }

/* ---------- Two-step verification ---------- */

.twofactor-grid { display: grid; grid-template-columns: 210px 1fr; gap: 1.4rem; align-items: start; }
.twofactor-qr { background: #fff; padding: .6rem; border: 1px solid var(--rule); border-radius: var(--radius); }
.twofactor-qr svg { display: block; width: 100%; height: auto; }
.secret-key {
  background: var(--primary-pale); padding: .5rem .7rem; border-radius: var(--radius);
  letter-spacing: .12em; font-size: .95rem;
}
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem; letter-spacing: .35em; text-align: center;
}
.recovery-codes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem;
  background: #fbfcfb; border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem;
}
.recovery-codes span { font-size: .95rem; letter-spacing: .06em; }
@media (max-width: 700px) { .twofactor-grid { grid-template-columns: 1fr; } }

.letter-editor { min-height: 380px; line-height: 1.6; }

/* ---------- Signature ---------- */

.signature-row { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; align-items: start; }
.signature-preview {
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
  min-height: 96px; display: flex; align-items: center; justify-content: center; padding: .8rem;
}
.signature-preview img { max-width: 100%; max-height: 80px; }
@media (max-width: 700px) { .signature-row { grid-template-columns: 1fr; } }

.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: .35rem;
  background: var(--accent); color: var(--rail); border-radius: 9px;
  font-size: .7rem; font-weight: 700; text-align: center; line-height: 18px;
}

.staff-picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .2rem 1rem; max-height: 260px; overflow-y: auto; padding: .5rem .7rem;
}

.readiness { list-style: none; margin: 0 0 1rem; padding: 0; }
.readiness li {
  padding: .3rem 0 .3rem 1.5rem; position: relative; font-size: .89rem;
}
.readiness li::before {
  position: absolute; left: 0; top: .3rem; font-weight: 700;
}
.readiness li.ok::before   { content: "\2713"; color: var(--under); }
.readiness li.warn::before { content: "!"; color: var(--caution); }
.readiness li.bad::before  { content: "\00D7"; color: var(--over); }

/* ---------- The notification bell ---------- */

.bell { position: relative; flex: 0 0 auto; }
.bell > summary {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.bell > summary::-webkit-details-marker { display: none; }
.bell > summary:hover, .bell[open] > summary { background: rgba(255,255,255,.14); }

/* Drawn rather than an image file, so it follows the palette. */
.bell-icon {
  width: 14px; height: 14px; border: 2px solid #fff; border-bottom: none;
  border-radius: 7px 7px 0 0; position: relative; margin-top: -3px;
}
.bell-icon::before {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px;
  height: 2px; background: #fff; border-radius: 1px;
}
.bell-icon::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 3px;
  transform: translateX(-50%); background: #fff; border-radius: 0 0 3px 3px;
}
.bell-count {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--over); color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 17px; text-align: center;
}

.bell-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  width: min(380px, calc(100vw - 2rem));
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28); overflow: hidden;
}
.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border-bottom: 1px solid var(--rule-soft); font-size: .88rem;
}
.link-quiet {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font: inherit; font-size: .82rem; text-decoration: underline; padding: 0;
}
.bell-empty { padding: 1.1rem .9rem; color: var(--ink-3); font-size: .86rem; margin: 0; }
.bell-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.bell-list li { border-bottom: 1px solid var(--rule-soft); }
.bell-list a {
  display: block; padding: .6rem .8rem; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent;
}
.bell-list a:hover { background: #f7f9f7; }
.bell-list li.is-unread a { background: var(--primary-pale); border-left-color: var(--primary); }
.bell-list li.is-urgent a { border-left-color: var(--over); }
.bell-title { display: block; font-size: .87rem; font-weight: 600; line-height: 1.3; }
.bell-detail { display: block; font-size: .8rem; color: var(--ink-2); margin-top: .15rem; }
.bell-when { display: block; font-size: .74rem; color: var(--ink-3); margin-top: .25rem; }
.bell-all {
  display: block; padding: .6rem; text-align: center; font-size: .84rem;
  background: #f6f8f6; text-decoration: none;
}

@media (max-width: 1024px) {
  .bell-panel { right: -70px; }
}

.alert-row.is-unread { background: var(--primary-pale); }

/* =====================================================================
   Sign-in: three finished designs, chosen on the appearance screen.
   Everything below overrides the base sign-in styles above.
   ===================================================================== */

/* ---------- studio: brand panel left, solid white form right ----------
   The arrangement most business systems use, and the one that survives a
   bad screen and a bright room: dark text on white, full-contrast fields,
   the brand doing its work on the other half of the page.
   ------------------------------------------------------------------- */

.auth-studio { background: var(--paper); }
.auth-studio::before { display: none; }

.auth-studio .auth-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; padding: 0; max-width: none; min-height: 100vh; align-items: stretch;
}

.auth-studio .auth-brand {
  position: relative; overflow: hidden;
  justify-content: space-between; max-width: none;
  padding: clamp(2rem, 4vw, 3.4rem);
  background:
    radial-gradient(120% 100% at 80% 0%,
      color-mix(in srgb, var(--primary) 60%, transparent) 0%, transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--rail) 82%, var(--primary)) 0%,
      var(--rail) 58%,
      color-mix(in srgb, var(--rail) 82%, #000) 100%);
}
.auth-studio .auth-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image:
    repeating-linear-gradient(60deg, transparent 0 28px, var(--accent) 28px 29px),
    repeating-linear-gradient(-60deg, transparent 0 28px, var(--accent) 28px 29px);
  -webkit-mask-image: radial-gradient(110% 80% at 20% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(110% 80% at 20% 0%, #000 30%, transparent 78%);
}
.auth-studio .auth-brand > * { position: relative; z-index: 1; }

.auth-studio .auth-logo-plate {
  background: #fff; border-radius: 20px; padding: 1.1rem 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}
.auth-studio .auth-logo { height: clamp(96px, 10vw, 148px); }

.auth-studio .auth-brand-body h1 {
  font-size: clamp(1.7rem, 3vw, 2.5rem); max-width: 16ch; margin-bottom: .6rem;
}
.auth-studio .auth-tagline { font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 40ch; }

.auth-studio .auth-panel {
  background: var(--paper); justify-content: center; align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.auth-studio .auth-panel-inner {
  max-width: 380px; background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0;
  animation: auth-rise .6s cubic-bezier(.2,.7,.3,1) .05s both;
}

.auth-studio .auth-form h2 {
  color: var(--ink); font-size: 1.45rem; text-align: left; margin-bottom: .4rem;
}
.auth-studio .auth-sub { color: var(--ink-3); text-align: left; font-size: .9rem; margin-bottom: 1.6rem; }
.auth-studio .auth-form label { color: var(--ink-2); font-size: .85rem; font-weight: 600; }

.auth-studio .auth-form input[type=text],
.auth-studio .auth-form input[type=password] {
  background: #fff; color: var(--ink); border: 1px solid var(--rule);
  padding: .7rem .8rem; font-size: .98rem; border-radius: 10px;
}
.auth-studio .auth-form input::placeholder { color: var(--ink-3); }
.auth-studio .auth-form input[type=text]:focus,
.auth-studio .auth-form input[type=password]:focus {
  border-color: var(--primary); background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.auth-studio .auth-form input:-webkit-autofill,
.auth-studio .auth-form input:-webkit-autofill:hover,
.auth-studio .auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 60px #fff inset !important;
          box-shadow: 0 0 0 60px #fff inset !important;
  border: 1px solid var(--rule);
}

.auth-studio .auth-submit {
  background: var(--primary); border-color: var(--primary); color: #fff;
  padding: .72rem; font-size: .98rem; border-radius: 10px; margin-top: .9rem;
}
.auth-studio .auth-submit:hover {
  background: var(--primary-2); border-color: var(--primary-2); color: #fff;
}
.auth-studio .auth-foot { border-top-color: var(--rule-soft); text-align: left; }
.auth-studio .auth-foot a { color: var(--primary); text-decoration-color: var(--rule); }
.auth-studio .auth-notice {
  background: var(--primary-pale); border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--ink-2); text-align: left;
}
.auth-studio .auth-brand-foot { color: rgba(255,255,255,.55); }
.auth-studio .alert { color: var(--ink); background: var(--over-pale); }

@media (max-width: 900px) {
  .auth-studio .auth-shell { display: flex; flex-direction: column; }
  .auth-studio .auth-brand {
    padding: 2rem 1.4rem 1.8rem; align-items: center; text-align: center; gap: 1rem;
  }
  .auth-studio .auth-logo { height: clamp(70px, 17vw, 104px); }
  .auth-studio .auth-panel { padding: 1.8rem 1.3rem 2.4rem; }
  .auth-studio .auth-panel-inner { max-width: 420px; }
  .auth-studio .auth-form h2, .auth-studio .auth-sub, .auth-studio .auth-foot { text-align: center; }
}

/* ---------- card: a white card on a light page ----------
   Quieter. The crest sits above the card, the page stays light, and the
   colour appears only on the button — the arrangement of most sign-ins
   people meet day to day.
   ------------------------------------------------------------------- */

.auth-card {
  background:
    radial-gradient(90% 70% at 50% 0%,
      color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 70%),
    var(--canvas);
  color: var(--ink);
}
.auth-card::before { opacity: .05; }

.auth-card .auth-shell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.2rem; padding: 2.5rem 1.3rem;
}
.auth-card .auth-brand { align-items: center; max-width: 440px; gap: 1rem; }
.auth-card .auth-logo-plate {
  background: #fff; box-shadow: 0 10px 30px rgba(16,29,24,.12); border-radius: 18px;
}
.auth-card .auth-logo { height: clamp(74px, 10vw, 104px); }
.auth-card .auth-brand-body h1 {
  color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-inline: auto; max-width: 22ch;
}
.auth-card .auth-tagline { color: var(--ink-3); margin-inline: auto; }
.auth-card .auth-points { display: none; }
.auth-card .auth-brand-foot { color: var(--ink-3); text-align: center; }

.auth-card .auth-panel { justify-content: center; }
.auth-card .auth-panel-inner {
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 18px 46px rgba(16,29,24,.10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  max-width: 400px; padding: 1.9rem 1.7rem 1.6rem; text-align: left;
}
.auth-card .auth-form h2 { color: var(--ink); }
.auth-card .auth-sub { color: var(--ink-3); }
.auth-card .auth-form label { color: var(--ink-2); font-weight: 600; }
.auth-card .auth-form input[type=text],
.auth-card .auth-form input[type=password] {
  background: #fff; color: var(--ink); border: 1px solid var(--rule);
  padding: .68rem .8rem; border-radius: 10px;
}
.auth-card .auth-form input::placeholder { color: var(--ink-3); }
.auth-card .auth-form input[type=text]:focus,
.auth-card .auth-form input[type=password]:focus {
  border-color: var(--primary); color: var(--ink); background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.auth-card .auth-form input:-webkit-autofill,
.auth-card .auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 60px #fff inset !important;
}
.auth-card .auth-submit {
  background: var(--primary); border-color: var(--primary); color: #fff;
  padding: .7rem; border-radius: 10px;
}
.auth-card .auth-submit:hover { background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
.auth-card .auth-foot { border-top-color: var(--rule-soft); }
.auth-card .auth-foot a { color: var(--primary); }
.auth-card .auth-notice { background: var(--primary-pale); color: var(--ink-2); border-color: transparent; }
.auth-card .alert { color: var(--ink); }

/* The sign-in page lays itself out; the body must not also be a flex
   container, or the shell is centred as a flex item and cannot fill the
   window. A single grid row makes both halves full height. */
.auth-body { display: block; }
.auth-body .auth-shell { width: 100%; margin: 0 auto; }
.auth-studio .auth-shell {
  margin: 0; grid-template-rows: minmax(100vh, auto); align-content: stretch;
}
.auth-studio .auth-brand, .auth-studio .auth-panel { height: 100%; }

/* =====================================================================
   Sign-in: the card arrangement.
   Crest above, a card beneath it, each field carrying an icon, and a
   button the width of the card. Three backgrounds: the Centre's colour,
   white, or a pale grey page.
   ===================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.auth-brand:where(.auth-brand) { }

.auth-brand-card, .auth-light, .auth-soft { }

/* ---- shared shape ---- */

.auth-brand-style .auth-shell,
.auth-light .auth-shell,
.auth-soft .auth-shell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; padding: 2.5rem 1.2rem; text-align: center; max-width: none; margin: 0;
}

.auth-brand-style .auth-brand,
.auth-light .auth-brand,
.auth-soft .auth-brand {
  align-items: center; max-width: 420px; gap: .8rem; background: none; padding: 0;
}
.auth-brand-style .auth-points,
.auth-light .auth-points,
.auth-soft .auth-points { display: none; }

.auth-brand-style .auth-logo-plate,
.auth-light .auth-logo-plate,
.auth-soft .auth-logo-plate {
  background: none; box-shadow: none; padding: 0;
}
.auth-brand-style .auth-logo,
.auth-light .auth-logo,
.auth-soft .auth-logo { height: clamp(96px, 16vw, 132px); max-width: 80vw; }

.auth-brand-style .auth-brand-body h1,
.auth-light .auth-brand-body h1,
.auth-soft .auth-brand-body h1 {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); margin: 0 auto .2rem; max-width: 24ch;
}
.auth-brand-style .auth-tagline,
.auth-light .auth-tagline,
.auth-soft .auth-tagline { font-size: .85rem; margin-inline: auto; }

.auth-brand-style .auth-panel,
.auth-light .auth-panel,
.auth-soft .auth-panel { justify-content: center; width: 100%; }

.auth-brand-style .auth-panel-inner,
.auth-light .auth-panel-inner,
.auth-soft .auth-panel-inner {
  max-width: 400px; padding: 1.9rem 1.6rem 1.7rem; border-radius: 16px; text-align: left;
}

.auth-brand-style .auth-form h2,
.auth-light .auth-form h2,
.auth-soft .auth-form h2 { text-align: center; font-size: 1.5rem; margin-bottom: .25rem; }
.auth-brand-style .auth-sub,
.auth-light .auth-sub,
.auth-soft .auth-sub { text-align: center; margin-bottom: 1.5rem; }

/* A field with an icon at the left, and the eye on the right. */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon .icon {
  position: absolute; left: .85rem; width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .55; pointer-events: none;
}
.input-icon input {
  padding: .82rem .9rem .82rem 2.7rem !important;
  border-radius: 12px !important; font-size: .97rem;
}
.input-icon .reveal {
  position: absolute; right: .4rem; background: none; border: none; cursor: pointer;
  padding: .4rem; line-height: 0; color: inherit; opacity: .55;
}
.input-icon .reveal .icon { position: static; opacity: 1; }
.input-icon .reveal:hover, .input-icon .reveal.is-on { opacity: 1; }

.auth-brand-style .auth-submit,
.auth-light .auth-submit,
.auth-soft .auth-submit {
  padding: .82rem; border-radius: 12px; font-size: 1rem; margin-top: 1.1rem;
}
.auth-brand-style .auth-foot,
.auth-light .auth-foot,
.auth-soft .auth-foot { text-align: center; border-top: none; padding-top: .9rem; }

/* ---- brand: the Centre's colour behind, a translucent card ---- */

.auth-brand-style {
  background:
    radial-gradient(120% 90% at 80% 0%,
      color-mix(in srgb, var(--primary) 55%, transparent) 0%, transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--rail) 86%, var(--primary)) 0%,
      var(--rail) 55%,
      color-mix(in srgb, var(--rail) 88%, #000) 100%);
  color: #fff;
}
.auth-brand-style .auth-panel-inner {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 26px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.16);
}
.auth-brand-style .auth-form input[type=text],
.auth-brand-style .auth-form input[type=password] {
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.auth-brand-style .auth-form input::placeholder { color: rgba(255,255,255,.6); }
.auth-brand-style .auth-form input:focus {
  background: rgba(255,255,255,.16); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.auth-brand-style .input-icon .icon { color: #fff; }
.auth-brand-style .auth-submit {
  background: var(--accent); border-color: var(--accent);
  color: color-mix(in srgb, var(--rail) 88%, #000); font-weight: 700;
}
.auth-brand-style .auth-submit:hover {
  background: color-mix(in srgb, var(--accent) 88%, #fff);
  border-color: color-mix(in srgb, var(--accent) 88%, #fff);
}

/* ---- light: white page, white card ---- */

.auth-light { background: #fff; color: var(--ink); }
.auth-light::before { display: none; }
.auth-light .auth-brand-body h1 { color: var(--ink); }
.auth-light .auth-tagline { color: var(--ink-3); }
.auth-light .auth-brand-foot { color: var(--ink-3); }
.auth-light .auth-panel-inner {
  background: #fff; border: 1px solid var(--rule-soft);
  box-shadow: 0 16px 40px rgba(16,29,24,.10);
}
.auth-light .auth-form h2 { color: var(--ink); }
.auth-light .auth-sub { color: var(--ink-3); }
.auth-light .auth-form input[type=text],
.auth-light .auth-form input[type=password] {
  background: #fbfcfb; color: var(--ink); border: 1px solid var(--rule);
}
.auth-light .auth-form input::placeholder { color: var(--ink-3); }
.auth-light .auth-form input:focus {
  background: #fff; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.auth-light .input-icon .icon { color: var(--ink-2); }
.auth-light .auth-submit {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.auth-light .auth-submit:hover { background: var(--primary-2); border-color: var(--primary-2); }
.auth-light .auth-foot a { color: var(--primary); }

/* ---- soft: pale page, white card ---- */

.auth-soft {
  background: linear-gradient(180deg, #eef1f6 0%, #e8ecf3 100%);
  color: var(--ink);
}
.auth-soft::before { display: none; }
.auth-soft .auth-brand-body h1 { color: var(--ink); }
.auth-soft .auth-tagline, .auth-soft .auth-brand-foot { color: var(--ink-3); }
.auth-soft .auth-panel-inner {
  background: #fff; border: 1px solid rgba(16,29,24,.06);
  box-shadow: 0 18px 46px rgba(16,29,24,.12);
}
.auth-soft .auth-form h2 { color: var(--ink); }
.auth-soft .auth-sub { color: var(--ink-3); }
.auth-soft .auth-form input[type=text],
.auth-soft .auth-form input[type=password] {
  background: #fff; color: var(--ink); border: 1px solid var(--rule);
}
.auth-soft .auth-form input::placeholder { color: var(--ink-3); }
.auth-soft .auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.auth-soft .input-icon .icon { color: var(--ink-2); }
.auth-soft .auth-submit { background: var(--primary); border-color: var(--primary); color: #fff; }
.auth-soft .auth-submit:hover { background: var(--primary-2); border-color: var(--primary-2); }
.auth-soft .auth-foot a { color: var(--primary); }

/* Autofill, on the light cards. */
.auth-light .auth-form input:-webkit-autofill,
.auth-soft .auth-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 60px #fff inset !important;
}

/* The Centre's crest is dark on transparent, so on the brand background it
   keeps its white plate; on the light cards it needs none. */
.auth-brand-style .auth-logo-plate {
  background: #fff; border-radius: 18px; padding: .85rem 1rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
}
.auth-brand-style .auth-logo { height: clamp(84px, 14vw, 112px); }

/* =====================================================================
   Sign-in on a short window.

   A centred flex column clips its own top when the content is taller than
   the window: the overflow goes off the top edge where it cannot be
   scrolled to. On a laptop with a browser's bookmark bar open, that cut
   the crest in half. Three things fix it: the safe keyword, which centres
   only while there is room and falls back to the top when there is not;
   dvh, so a phone's address bar does not steal height; and a smaller
   crest and tighter card once the window is short.
   ===================================================================== */

.auth-body { min-height: 100vh; min-height: 100dvh; overflow-y: auto; }

.auth-brand-style .auth-shell,
.auth-light .auth-shell,
.auth-soft .auth-shell,
.auth-card .auth-shell,
.auth-centred .auth-shell {
  min-height: 100vh; min-height: 100dvh;
  justify-content: center;
  justify-content: safe center;   /* never clips what it cannot show */
  padding-block: clamp(1.2rem, 4vh, 2.5rem);
}

/* Short windows: 1366x768 with a bookmark bar is about 640px of page. */
@media (max-height: 820px) {
  .auth-brand-style .auth-logo,
  .auth-light .auth-logo,
  .auth-soft .auth-logo { height: clamp(64px, 9vh, 92px); }

  .auth-brand-style .auth-shell,
  .auth-light .auth-shell,
  .auth-soft .auth-shell { gap: 1rem; }

  .auth-brand-style .auth-panel-inner,
  .auth-light .auth-panel-inner,
  .auth-soft .auth-panel-inner { padding: 1.5rem 1.5rem 1.3rem; }

  .auth-brand-style .auth-form h2,
  .auth-light .auth-form h2,
  .auth-soft .auth-form h2 { font-size: 1.3rem; }

  .auth-brand-style .auth-sub,
  .auth-light .auth-sub,
  .auth-soft .auth-sub { margin-bottom: 1.1rem; }

  .auth-brand-style .input-icon input,
  .auth-light .input-icon input,
  .auth-soft .input-icon input { padding-block: .7rem !important; }

  .auth-brand-style .auth-submit,
  .auth-light .auth-submit,
  .auth-soft .auth-submit { padding: .72rem; margin-top: .85rem; }

  .auth-brand-foot { display: none; }
}

@media (max-height: 660px) {
  .auth-brand-style .auth-brand-body,
  .auth-light .auth-brand-body,
  .auth-soft .auth-brand-body { display: none; }   /* the crest still identifies it */
  .auth-brand-style .auth-logo,
  .auth-light .auth-logo,
  .auth-soft .auth-logo { height: clamp(52px, 8vh, 72px); }
}

.import-next {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius);
  background: var(--primary-pale); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.import-next h3 { margin: 0 0 .4rem; font-size: 1rem; }
.import-next p { margin: 0 0 .6rem; font-size: .9rem; }

.grade-actions { border-top: 1px solid var(--rule-soft); margin-top: .6rem; padding-top: .6rem; }

/* =====================================================================
   Editing in a dialog.

   A list of people is for scanning; a form is for filling in. Putting the
   second inside the first — a form open under every row — turned eight
   people into a page nobody could read. The editor is a dialog now: the
   list stays a list, and the form appears over it when it is wanted.
   ===================================================================== */

.sheet {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(88vh, 760px);
  padding: 0; border: none; border-radius: 14px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 70px rgba(16,29,24,.28);
  overflow: hidden;
}
.sheet::backdrop { background: rgba(10, 20, 16, .5); backdrop-filter: blur(2px); }

.sheet-form { display: flex; flex-direction: column; max-height: inherit; text-align: left; }

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--rule-soft);
  background: var(--primary-pale);
}
.sheet-head h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.sheet-sub { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-3); }
.sheet-close {
  background: none; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
  color: var(--ink-3); padding: 0 .2rem;
}
.sheet-close:hover { color: var(--ink); }

.sheet-body { padding: 1.1rem 1.3rem; overflow-y: auto; }
.sheet-body .field { margin-bottom: .9rem; }
.sheet-body .field:last-child { margin-bottom: 0; }
.sheet-body label { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.sheet-body input, .sheet-body select { width: 100%; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
@media (max-width: 520px) { .field-pair { grid-template-columns: 1fr; } }

.sheet-foot {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .9rem 1.3rem; border-top: 1px solid var(--rule-soft); background: #fbfcfb;
}

/* The row's own actions, kept on one line and out of the way. */
.row-actions {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; align-items: center;
}
.row-actions form { margin: 0; }
.table-users td { vertical-align: middle; }
.table-users .person { display: flex; align-items: center; gap: .6rem; }
.table-users .person-text { display: flex; flex-direction: column; line-height: 1.35; }
.table-users .person-name { font-weight: 600; }
.table-users .person-meta { font-size: .78rem; color: var(--ink-3); }
.table-users .role-name { display: block; font-size: .9rem; }
.user-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--primary-pale); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}

/* =====================================================================
   Classes the markup was already using with nothing behind them.

   Found by listing every class name in the views and checking each
   against this file. Eight had no rule at all, which is how the users
   screen came to unfold a form across the table: the markup expected a
   layout the stylesheet never provided.
   ===================================================================== */

/* The row of buttons that moves a document to its next stage. */
.action-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem;
  padding: .9rem 1rem; border: 1px solid var(--rule-soft); border-radius: var(--radius);
  background: #fbfcfb;
}
.action-form .field { margin: 0; min-width: 200px; flex: 1 1 220px; }
.action-form .field-wide { flex: 1 1 100%; }
.action-form button { flex: 0 0 auto; }

/* A form that stands on its own as the whole page, rather than in a panel. */
.form-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
  box-shadow: 0 1px 2px rgba(16,29,24,.04);
  max-width: 900px;
}
.form-card .form-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }

/* Budget lines: many narrow numeric columns, so they are held tight and
   the figures line up under one another. */
.table-lines th, .table-lines td { padding: .45rem .55rem; font-size: .86rem; }
.table-lines .num, .table-lines td.num { font-variant-numeric: tabular-nums; }
.table-lines tbody tr:hover { background: var(--primary-pale); }

/* Performance reporting: the same, with room for the variance columns. */
.table-report th, .table-report td { padding: .45rem .55rem; font-size: .86rem; }
.table-report td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A paragraph of somebody's own writing, set for reading. */
.prose {
  max-width: 68ch; line-height: 1.65; color: var(--ink-2);
  white-space: pre-line; text-wrap: pretty;
}

/* A figure that needs attention without being wrong yet. */
.is-caution { color: var(--caution); }

/* The tick beside a code that is in use. */
.check { color: var(--under); font-weight: 700; }

/* The top block of the sign-in page, above the name. */
.auth-brand-top { display: flex; flex-direction: column; align-items: center; gap: .6rem; }

.sheet-aside { margin-right: auto; font-size: .8rem; color: var(--ink-3); align-self: center; }
.sheet-body input[disabled] { background: #f4f6f4; color: var(--ink-3); }

.sheet-award {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.3rem; border-top: 1px solid var(--rule-soft); background: var(--primary-pale);
}
.sheet-award p { margin: .15rem 0 0; }

.import-step { margin: 1.1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.import-step h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.import-step p { margin: 0 0 .7rem; font-size: .9rem; }
.alert-info { background: var(--primary-pale); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }

/* The four steps of a payroll, so it is plain where you are and what is next. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; list-style: none; margin: 0 0 1.1rem; padding: 0; counter-reset: none; }
.steps li a { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink-2); height: 100%; }
.steps .step-n { flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--rule-soft); font-weight: 700; font-size: .85rem; }
.steps .step-t { display: flex; flex-direction: column; line-height: 1.3; }
.steps .step-t small { color: var(--ink-3); font-size: .76rem; margin-top: .15rem; }
.steps .is-now a { border-color: var(--primary); background: var(--primary-pale); color: var(--ink); }
.steps .is-now .step-n { background: var(--primary); color: #fff; }
.steps .is-done .step-n { background: var(--under, #2e7d5b); color: #fff; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 1.6rem; bottom: 1.4rem; z-index: 60;
  width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 29, 24, .28);
  transition: transform .15s ease, background .15s ease;
}
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--primary-2); transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) { .to-top { right: 1rem; bottom: 1rem; } }

/* Headings between blocks on a long page. */
.section-title { margin: 1.6rem 0 .2rem; font-size: 1.15rem; }
.section-hint { margin: 0 0 .9rem; }

#copy_from { min-width: 290px; max-width: 100%; }

.sheet-wide { width: min(760px, calc(100vw - 2rem)); }
.pay-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.pay-sum > div { display: flex; flex-direction: column; padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fbfcfb; }
.pay-sum strong { font-size: 1.1rem; margin: .1rem 0; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pay-sum { grid-template-columns: 1fr; } }
.sheet-body h3 { margin: 1.1rem 0 .5rem; font-size: 1rem; }

/* ---------- Payment vouchers ---------- */
.panel-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .6rem .9rem 0; border-bottom: 1px solid var(--rule-soft); }
.panel-tabs a { padding: .5rem .85rem; border-radius: var(--radius) var(--radius) 0 0; text-decoration: none; color: var(--ink-3); font-size: .88rem; border-bottom: 2px solid transparent; }
.panel-tabs a:hover { color: var(--ink); }
.panel-tabs a.is-on { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }

.facts { display: grid; grid-template-columns: 8rem 1fr; gap: .45rem 1rem; margin: 0 0 1rem; }
.facts dt { color: var(--ink-3); font-size: .85rem; }
.facts dd { margin: 0; }

.table-position td { padding: .5rem .2rem; border-bottom: 1px solid var(--rule-soft); }
.table-position .num { font-variant-numeric: tabular-nums; }
.table-position .is-total td { border-top: 2px solid var(--ink-3); border-bottom: none; padding-top: .7rem; }
.position-after { margin: .9rem 0 .5rem; padding: .7rem .85rem; border-radius: var(--radius); background: var(--primary-pale); font-size: .9rem; }
.position-after.is-over { background: #fbe3e3; }

.timeline { list-style: none; margin: .4rem 0 0; padding: 0; border-left: 2px solid var(--rule); }
.timeline li { position: relative; padding: .3rem 0 .6rem 1.1rem; color: var(--ink-3); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .55rem; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--rule); }
.timeline li.is-done { color: var(--ink); }
.timeline li.is-done::before { background: var(--primary); border-color: var(--primary); }

.action-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.action-row form { margin: 0; }

/* ---------- Payroll adjustments, per person ---------- */
.person-finder { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0 1rem; }
.person-finder label { font-weight: 600; font-size: .88rem; }
.person-finder select { min-width: 280px; max-width: 100%; }
.slip-find { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.slip-find input { max-width: 360px; width: 100%; }

/* The dialogs make every input fill its row; a tick box must not. */
.sheet-body input[type=checkbox], .sheet-body input[type=radio],
.sheet-form input[type=checkbox], .sheet-form input[type=radio] { width: auto; flex: 0 0 auto; }
.sheet-body .checkbox-row, .sheet-form .checkbox-row { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; }
.sheet-body .checkbox-row label, .sheet-form .checkbox-row label { margin: 0; font-weight: 500; }

/* ---------- Bank details ---------- */
.table-banks td { vertical-align: middle; }
.table-banks td input[type=text] { width: 100%; min-width: 210px; }
.check-cell { font-size: .86rem; }
.chip { display: inline-block; margin: .1rem .25rem .1rem 0; padding: .22rem .6rem; border: 1px solid var(--rule); border-radius: 999px; background: #fff; color: var(--ink-2); cursor: pointer; font-size: .8rem; }
.chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }

.button-danger { background: #b3261e; border-color: #b3261e; }
.button-danger:hover { background: #8c1d18; }

/* ---------- Budget position ---------- */
.table-report tr.row-over > td { background: #fdf2f1; }
.table-position-full th, .table-position-full td { white-space: nowrap; }
.table-position-full td:nth-child(2) { white-space: normal; min-width: 11rem; }
.nav-badge { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; background: #c0392b; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.plain-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.plain-list li { padding: .25rem 0; }

/* ---------- Fund releases ---------- */
.table tr.row-current > td { background: #eef7f3; }