/* =====================================================================
   ROOTS — user area (spec §15, §16)

   New file. Every selector is prefixed `ua-` or scoped under `.ua-app`, so
   nothing here can collide with roots.css or roots-extra.css. That also means
   this file needs its own cache-buster and the other pages' cached copies
   stay valid, as with roots-extra.css in the v5 delivery.

   Noto Sans is self-hosted from /assets/fonts/. No fonts.googleapis.com
   request: HANDOVER §3 and spec §17 both forbid third-party requests from
   authenticated case views, and a font CDN would leak a request per pageview.
   ===================================================================== */

/* --- Self-hosted Noto Sans ------------------------------------------ */
/* latin-ext is loaded for DE/FR/IT diacritics; unicode-range means the
   browser only downloads it when those glyphs are actually used. */

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/noto-sans-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/noto-sans-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design system tokens (spec §15) -------------------------------- */

.ua-app {
  --ua-bg:            #F5F8F7;   /* approved page background (design system §7) */
  --ua-surface:       #FFFFFF;
  --ua-green:         #0B5D55;
  --ua-green-soft:    #E7F3F0;
  --ua-text:          #172321;
  --ua-text-2:        #536360;
  --ua-border:        #D9E1DF;
  --ua-waiting:       #B26A00;
  --ua-critical:      #C62828;
  --ua-success:       #26734D;

  --ua-radius:        14px;   /* cards 14–16px (design system §7) */
  --ua-radius-sm:     10px;
  --ua-shadow:        0 1px 2px rgba(16,33,29,.04), 0 6px 18px rgba(16,33,29,.05);
  --ua-pad:           24px;
  --ua-gap:           16px;
  --ua-sidebar-w:     256px;
  --ua-touch:         44px;

  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ua-text);
  background: var(--ua-bg);
}

/* --- Typography (spec §15) ------------------------------------------ */

.ua-h1     { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 0; }
.ua-h2     { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; }
.ua-h3     { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0; }
.ua-body   { font-size: 15px; font-weight: 400; line-height: 1.55; }
.ua-label  { font-size: 12px; font-weight: 700; letter-spacing: .04em;
             text-transform: uppercase; color: var(--ua-text-2); }
.ua-muted  { color: var(--ua-text-2); }
/* Monospace is reserved for case IDs and technical metadata (spec §15). */
.ua-mono   { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
             font-size: 13px; letter-spacing: -.01em; }

@media (min-width: 1200px) {
  .ua-h1 { font-size: 32px; }
  .ua-h2 { font-size: 24px; }
}

/* --- Shell (spec §16) ----------------------------------------------- */

.ua-shell {
  display: grid;
  grid-template-columns: var(--ua-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.ua-shell.ua-collapsed { --ua-sidebar-w: 72px; }

.ua-sidebar {
  background: var(--ua-surface);
  border-right: 1px solid var(--ua-border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 4px;
}
.ua-navgroup { margin-top: 18px; padding: 0 10px 6px; }
.ua-navlink {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--ua-touch);
  padding: 0 12px;
  border-radius: var(--ua-radius-sm);
  color: var(--ua-text);
  font-size: 15px;
  text-decoration: none;
}
.ua-navlink:hover  { background: var(--ua-bg); }
.ua-navlink[aria-current="page"] {
  background: var(--ua-green-soft);
  color: var(--ua-green);
  font-weight: 700;
}
.ua-navlink svg { flex: 0 0 20px; width: 20px; height: 20px; }
.ua-badge {
  margin-left: auto;
  min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: var(--ua-green); color: #fff;
  font-size: 12px; font-weight: 700;
}
.ua-shell.ua-collapsed .ua-navlink span,
.ua-shell.ua-collapsed .ua-navgroup,
.ua-shell.ua-collapsed .ua-emergency-text { display: none; }

/* Emergency card: permanent, but never the dominant element (spec §3). */
.ua-emergency {
  margin-top: auto;
  background: var(--ua-green-soft);
  border-radius: var(--ua-radius);
  padding: 14px;
  font-size: 13px;
}
.ua-emergency b { font-size: 17px; color: var(--ua-green); }

/* Centered content container (§8) — cap the working column so pages do not
   stretch edge-to-edge on wide monitors. Applies to every user page via the
   shared shell (topbar + content stay aligned). */
.ua-main   { padding: var(--ua-pad) 32px 48px; min-width: 0; max-width: 1472px; margin-left: auto; margin-right: auto; width: 100%; }
.ua-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ua-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* --- Summary cards (spec §5) ---------------------------------------- */

.ua-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ua-gap);
  margin-bottom: 24px;
}
.ua-card {
  background: var(--ua-surface);
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius);
  box-shadow: var(--ua-shadow);
  padding: 18px;
  display: flex; gap: 14px; align-items: flex-start;
  text-align: left;
  min-height: var(--ua-touch);
  cursor: pointer;
  font: inherit; color: inherit;
}
.ua-card:hover { border-color: var(--ua-green); }
.ua-card:focus-visible { outline: 2px solid var(--ua-green); outline-offset: 2px; }
.ua-card-figure { font-size: 26px; font-weight: 800; line-height: 1.1; }
.ua-card-title  { font-size: 14px; font-weight: 700; }
.ua-card-sub    { font-size: 12px; color: var(--ua-text-2); }
.ua-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; flex: 0 0 40px;
  background: var(--ua-green-soft); color: var(--ua-green);
}

/* Semantic accents. `escalation-due` only carries red when the count is
   non-zero — spec §5: "Red only when required". */
.ua-tone-teal    .ua-card-icon { background: var(--ua-green-soft); color: var(--ua-green); }
.ua-tone-amber   .ua-card-icon { background: #FDF3E3; color: var(--ua-waiting); }
.ua-tone-red     .ua-card-icon { background: #FBEAEA; color: var(--ua-critical); }
.ua-tone-purple  .ua-card-icon { background: #EFEDFA; color: #4A3F9E; }
.ua-tone-green   .ua-card-icon { background: #E6F2EC; color: var(--ua-success); }
.ua-tone-blue    .ua-card-icon { background: #E7F0FB; color: #1F5FA8; }
.ua-card[data-count="0"].ua-tone-red .ua-card-icon {
  background: var(--ua-bg); color: var(--ua-text-2);
}

/* --- Grids (spec §16) ------------------------------------------------ */

.ua-grid-primary,
.ua-grid-secondary {
  display: grid;
  gap: var(--ua-gap);
  margin-bottom: var(--ua-gap);
}
.ua-grid-primary   { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ua-grid-secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ua-panel {
  background: var(--ua-surface);
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius);
  padding: 18px 20px;
  box-shadow: var(--ua-shadow);
}
.ua-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ua-link {
  color: var(--ua-green); font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.ua-link:hover { text-decoration: underline; }

/* --- Recent cases table (spec §6) ------------------------------------ */

.ua-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ua-table th {
  text-align: left; padding: 0 10px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ua-text-2);
  border-bottom: 1px solid var(--ua-border);
}
.ua-table td { padding: 14px 10px; border-bottom: 1px solid var(--ua-border); }
.ua-table tbody tr:last-child td { border-bottom: 0; }
.ua-table tbody tr:hover { background: var(--ua-bg); cursor: pointer; }
.ua-case-no { font-weight: 700; }

/* --- Status pills ---------------------------------------------------- */

.ua-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.ua-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.ua-pill-waiting  { background: #FDF3E3; color: var(--ua-waiting); }
.ua-pill-response { background: #E6F2EC; color: var(--ua-success); }
.ua-pill-escalated{ background: #FBEAEA; color: var(--ua-critical); }
.ua-pill-closed   { background: #E6F2EC; color: var(--ua-success); }
.ua-pill-neutral  { background: var(--ua-bg); color: var(--ua-text-2); }

.ua-deadline-ok      { color: var(--ua-text-2); }
.ua-deadline-soon    { color: var(--ua-waiting); font-weight: 700; }
.ua-deadline-overdue { color: var(--ua-critical); font-weight: 700; }

/* --- Timeline (spec §7) ---------------------------------------------- */

.ua-timeline { list-style: none; margin: 0; padding: 0; }
.ua-timeline li {
  position: relative;
  padding: 0 0 22px 34px;
}
.ua-timeline li::before {
  content: ''; position: absolute; left: 9px; top: 22px; bottom: 0;
  width: 2px; background: var(--ua-border);
}
.ua-timeline li:last-child { padding-bottom: 0; }
.ua-timeline li:last-child::before { display: none; }
.ua-timeline-dot {
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ua-green-soft); color: var(--ua-green);
}
.ua-timeline-title { font-size: 14px; font-weight: 700; }
.ua-timeline-meta  { font-size: 12px; color: var(--ua-text-2); }
.ua-timeline li[data-state="pending"] .ua-timeline-dot {
  background: var(--ua-bg); color: var(--ua-text-2);
}
.ua-timeline li[data-state="critical"] .ua-timeline-dot {
  background: #FBEAEA; color: var(--ua-critical);
}

/* --- Escalation ladder (spec §8) ------------------------------------- */

.ua-ladder { display: grid; gap: 8px; font-size: 13px; }
.ua-ladder-step {
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius-sm);
  padding: 10px 12px;
  background: var(--ua-surface);
}
.ua-ladder-step[data-current="true"] {
  border-color: var(--ua-green);
  background: var(--ua-green-soft);
  font-weight: 700;
}
.ua-ladder-arrow { text-align: center; color: var(--ua-text-2); line-height: 1; }

/* --- Community (spec §11) -------------------------------------------- */

.ua-post {
  border-bottom: 1px solid var(--ua-border);
  padding: 16px 0;
}
.ua-post:last-child { border-bottom: 0; }
.ua-post-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.ua-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ua-green-soft); color: var(--ua-green);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  flex: 0 0 36px;
}
.ua-post-author { font-size: 14px; font-weight: 700; }
.ua-post-meta   { font-size: 12px; color: var(--ua-text-2); }
.ua-cat {
  display: inline-block; padding: 2px 9px; border-radius: 6px;
  background: var(--ua-green-soft); color: var(--ua-green);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; margin-bottom: 8px;
}
.ua-post-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ua-action {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--ua-border); border-radius: var(--ua-radius-sm);
  background: var(--ua-surface); color: var(--ua-text-2);
  font: inherit; font-size: 13px; cursor: pointer;
}
.ua-action:hover { border-color: var(--ua-green); color: var(--ua-green); }
.ua-action[aria-pressed="true"] {
  background: var(--ua-green-soft); border-color: var(--ua-green);
  color: var(--ua-green); font-weight: 700;
}

/* Spec §11 safeguarding rule. This notice is mandatory on any local-help
   post; it must never be styled away or made dismissible. */
.ua-safeguard {
  border-left: 3px solid var(--ua-waiting);
  background: #FDF9F2;
  border-radius: var(--ua-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: #6B4A12;
  margin-top: 10px;
}

.ua-moderation-note {
  background: var(--ua-green-soft);
  border-radius: var(--ua-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ua-green);
}

/* --- Documents (spec §13) -------------------------------------------- */

.ua-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ua-doc {
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--ua-border); border-radius: var(--ua-radius-sm);
  padding: 12px; background: var(--ua-surface);
  min-height: var(--ua-touch);
}
.ua-doc-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center;
               border-radius: 8px; background: var(--ua-bg); }
.ua-doc-name { font-size: 14px; font-weight: 600; }
.ua-doc-meta { font-size: 12px; color: var(--ua-text-2); }

.ua-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ua-touch); padding: 0 18px;
  border-radius: var(--ua-radius-sm); border: 1px solid transparent;
  background: var(--ua-green); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none;
}
.ua-btn:hover { filter: brightness(1.08); }
.ua-btn-ghost { background: var(--ua-surface); color: var(--ua-text);
                border-color: var(--ua-border); }
.ua-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* --- States ---------------------------------------------------------- */

.ua-empty { padding: 28px 12px; text-align: center; color: var(--ua-text-2); font-size: 14px; }
.ua-skeleton {
  background: linear-gradient(90deg, var(--ua-bg) 25%, #EEF3F1 37%, var(--ua-bg) 63%);
  background-size: 400% 100%;
  animation: ua-shimmer 1.3s ease infinite;
  border-radius: 6px; height: 14px;
}
@keyframes ua-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ua-skeleton { animation: none; } }

/* Shown when an endpoint is unreachable — the v5 rule: never show invented
   figures silently on a child-safety console. */
.ua-degraded {
  background: #FDF3E3; border: 1px solid #E9D2A8; color: #6B4A12;
  border-radius: var(--ua-radius-sm); padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px;
}

.ua-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;
}

/* --- Responsive (spec §16) ------------------------------------------- */

@media (max-width: 1199px) {
  .ua-shell { --ua-sidebar-w: 72px; }
  .ua-sidebar .ua-navlink span,
  .ua-sidebar .ua-navgroup,
  .ua-emergency-text { display: none; }
  .ua-grid-primary, .ua-grid-secondary { grid-template-columns: minmax(0, 1fr); }
  .ua-main { padding: var(--ua-pad); }
}

@media (max-width: 767px) {
  .ua-shell { grid-template-columns: minmax(0, 1fr); }
  .ua-sidebar {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    flex-direction: row; justify-content: space-around;
    border-right: 0; border-top: 1px solid var(--ua-border);
    padding: 6px 4px;
  }
  .ua-sidebar .ua-navlink { flex-direction: column; gap: 2px; min-width: var(--ua-touch); }
  .ua-emergency { display: none; }
  .ua-main { padding: 16px 16px 84px; }
  .ua-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tables become cards (spec §16). Requires data-label on each cell. */
  .ua-table thead { display: none; }
  .ua-table, .ua-table tbody, .ua-table tr, .ua-table td { display: block; width: 100%; }
  .ua-table tr {
    border: 1px solid var(--ua-border); border-radius: var(--ua-radius-sm);
    margin-bottom: 10px; padding: 6px 10px;
  }
  .ua-table td { border-bottom: 0; padding: 6px 0; display: flex; gap: 12px; }
  .ua-table td::before {
    content: attr(data-label);
    flex: 0 0 40%; font-size: 12px; font-weight: 700; color: var(--ua-text-2);
    text-transform: uppercase; letter-spacing: .04em;
  }
}

@media print {
  .ua-sidebar, .ua-topbar-right, .ua-post-actions { display: none; }
  .ua-shell { grid-template-columns: 1fr; }
}

/* =====================================================================
   FINAL INTEGRATION & UX INSTRUCTIONS — 2026-08-08
   Applied verbatim from the master brief. Appended as an override block so
   the working dashboard keeps functioning; the cascade applies these last.
   ===================================================================== */

/* --- §4 Increase visual contrast: instructed token values --------------- */
.ua-app {
  --ua-bg:          #F5F8F7;   /* --roots-bg */
  --ua-border:      #CBD8D5;   /* --roots-border */
  --ua-green-dark:  #084B45;   /* --roots-primary-dark */
  --ua-blue:        #2563A6;   /* --roots-blue */
  --ua-green-soft:  #E3F0ED;   /* --roots-soft-green */
}

/* --- §3 Remove the grid/lines from the authenticated area only --------- */
.ua-app, .ua-shell, .ua-main {
  background-color: #F5F8F7;
  background-image: none !important;
}
.ua-main::before, .ua-main::after,
.ua-app::before, .ua-app::after {
  background-image: none !important;
  display: none !important;
}

/* --- §4 Panel/card definition (instructed rule) ------------------------- */
.ua-panel, .ua-card {
  background: #FFFFFF;
  border: 1px solid #CBD8D5;
  box-shadow: 0 4px 18px rgba(23,35,33,.05);
}

/* --- §5 One typography system ------------------------------------------- */
.ua-app {
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ua-h1 { font-size: 30px; font-weight: 700; }
@media (min-width: 1200px) { .ua-h1 { font-size: 34px; } }
.ua-h2 { font-size: 21px; }
@media (min-width: 1200px) { .ua-h2 { font-size: 24px; } }
.ua-card-title { font-size: 16px; font-weight: 700; }
.ua-post-meta, .ua-doc-meta, .ua-timeline-meta, .ua-card-sub { font-size: 13px; }

/* --- §29 Load-error state (no demo data in production) ------------------ */
.ua-load-error {
  background: #FFFFFF; border: 1px solid #CBD8D5;
  box-shadow: 0 4px 18px rgba(23,35,33,.05);
  border-radius: var(--ua-radius); padding: 28px; text-align: center;
  max-width: 560px; margin: 40px auto;
}
.ua-load-error h2 { font-size: 20px; margin: 0 0 8px; }
.ua-load-error p  { color: var(--ua-text-2); font-size: 15px; margin: 0 0 18px; }

/* --- §6/§8/§28 Authentication modal ------------------------------------- */
.ra-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(23,35,33,.45);
  display: grid; place-items: center; padding: 20px;
}
.ra-modal {
  width: 100%; max-width: 420px; background: #FFFFFF;
  border: 1px solid #CBD8D5; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(23,35,33,.18);
  padding: 28px; position: relative;
}
.ra-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ua-text-2);
  cursor: pointer; border-radius: 10px;
}
.ra-close:hover { background: var(--ua-green-soft); color: var(--ua-green); }
.ra-modal h2 { font-size: 22px; margin: 0 0 4px; }
.ra-modal .ra-sub { color: var(--ua-text-2); font-size: 14px; margin: 0 0 18px; }
.ra-field { margin-bottom: 14px; }
.ra-field label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ua-text-2); margin-bottom: 6px;
}
.ra-wrap { position: relative; }
.ra-field input[type=email], .ra-field input[type=password],
.ra-field input[type=text] {
  width: 100%; min-height: 48px; padding: 0 48px 0 14px; box-sizing: border-box;
  border: 1px solid #CBD8D5; border-radius: 10px;
  background: #F5F8F7; color: var(--ua-text); font: inherit; font-size: 15px;
}
.ra-field input:focus { outline: 2px solid var(--ua-green); outline-offset: 1px; }
.ra-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ua-text-2);
  cursor: pointer; border-radius: 10px;
}
.ra-eye:hover, .ra-eye:focus-visible { color: var(--ua-green); background: var(--ua-green-soft); }
.ra-row { display: flex; align-items: center; justify-content: space-between;
          font-size: 14px; margin: 4px 0 16px; }
.ra-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ra-link { color: var(--ua-green); text-decoration: none; font-weight: 600;
           background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.ra-link:hover { text-decoration: underline; }
.ra-submit {
  width: 100%; min-height: 48px; border: 0; border-radius: 10px;
  background: var(--ua-green); color: #fff; font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer;
}
.ra-submit:hover { background: var(--ua-green-dark); }
.ra-submit:disabled { opacity: .55; cursor: not-allowed; }
.ra-foot { text-align: center; font-size: 14px; color: var(--ua-text-2); margin-top: 16px; }
.ra-msg { font-size: 14px; margin-top: 12px; display: none; }
.ra-msg.show { display: block; }
.ra-msg.error { color: var(--ua-critical); }
.ra-msg.good  { color: var(--ua-success); }
:focus-visible { outline: 2px solid var(--ua-green); outline-offset: 2px; }

/* --- §27 Mobile bottom navigation (rendered by roots-shell.js) ---------- */
.ua-bottomnav { display: none; }
@media (max-width: 767px) {
  .ua-bottomnav {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 40;
    background: #FFFFFF; border-top: 1px solid #CBD8D5;
    justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .ua-bottomnav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 44px; min-height: 44px; justify-content: center;
    font-size: 11px; color: var(--ua-text-2); text-decoration: none;
  }
  .ua-bottomnav a[aria-current="page"] { color: var(--ua-green); font-weight: 700; }
}

/* =====================================================================
   PHASE 1 — shared-shell hardening (2026-08-12)

   Three defensive rules only. No palette, typography or layout change:
   the tokens above already match the ROOTS design system (spec §15).
   Added to support the audited fixed roots-shell.js and the Phase 1
   acceptance tests without touching any working page.
   ===================================================================== */

/* §6/§15 — bulletproof the grid removal at the body level. User-area pages
   carry <body class="ua-app">, so this is the same ::before that roots.css
   paints the engineering grid on; content:none stops the box being generated
   at all, not just hidden. Scoped to .ua-app so the homepage/admin grid,
   which those pages legitimately use, is untouched. */
body.ua-app::before,
body.ua-app::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* §5/§1 — staged-migration guard styling. The fixed roots-shell.js marks
   not-yet-migrated destinations with data-migration-disabled and points them
   at "#"; make those links visibly unavailable and truly inert so Phase 1
   introduces no navigation into legacy/404 pages (acceptance Test 15). */
.ua-navlink[data-migration-disabled],
.ua-bottomnav a[data-migration-disabled],
.ua-action[data-migration-disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* §15 — defensive empty-badge rule. Badges are already hidden until a
   positive count is set (roots-shell.js setBadge), but .ua-badge has an
   unconditional green fill at a fixed size, so any badge ever shown without
   a number would read as an empty green circle. Never render an empty one. */
.ua-badge:empty { display: none !important; }

/* §19 — language selector as a legible segmented control. The shell renders
   bare DE/FR/IT/EN buttons in .ua-langs with no styling of their own, which
   read as one run-on word; give them a clear segmented appearance. */
.ua-langs {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--ua-border); border-radius: 8px; overflow: hidden;
}
.ua-langs button {
  min-width: 34px; min-height: 34px; padding: 0 9px;
  background: var(--ua-surface); color: var(--ua-text-2);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border: 0; cursor: pointer;
}
.ua-langs button + button { border-left: 1px solid var(--ua-border); }
.ua-langs button:hover { color: var(--ua-green); }
.ua-langs button[aria-pressed="true"] { background: var(--ua-green-soft); color: var(--ua-green); }

/* §16 mobile — on phones the shared shell uses the bottom navigation only
   (spec §Responsive: "hide/collapse desktop sidebar; bottom navigation").
   The earlier ≤767px rule repurposed the full 20-item sidebar as an icon row,
   which both duplicated the bottom-nav and overflowed horizontally. Hide the
   desktop sidebar on mobile so the bottom-nav is the single mobile nav and the
   page has no horizontal scroll (acceptance Test 18). */
@media (max-width: 767px) {
  .ua-sidebar { display: none !important; }
  /* Let the topbar wrap so the action cluster (language, bell, Website,
     Report) drops onto its own line instead of overflowing the viewport. */
  .ua-topbar { flex-wrap: wrap; }
  .ua-topbar-right { flex-wrap: wrap; row-gap: 8px; }
}

/* =====================================================================
   APPROVED USER-AREA REDESIGN — 2026-08-19
   Applied to the existing build 20260817-08. This block is last in the
   cascade and is the authoritative design system; the two earlier override
   blocks are left intact so nothing that already works loses its rule.

   Spec: §1 branding · §2 design language · §5 sidebar · §7 header
         §9 content width · §24–26 states · §27 status · §28 tables
         §29 filters · §30 responsive · §31 accessibility
   ===================================================================== */

/* --- §1/§7 tokens ------------------------------------------------------ */
.ua-app {
  --ua-green-i:      #107166;   /* interactive / accent green */
  --ua-nav:          #072F2B;   /* deep ROOTS green — #0B5D55 darkened */
  --ua-nav-hover:    #0A3E38;
  --ua-nav-active:   #12695F;   /* lighter green active surface (§5) */
  --ua-nav-label:    #7FA9A2;
  --ua-nav-text:     #DCE9E6;

  --ua-violet:       #63459E;   --ua-violet-bg: #EDE8F8;  --ua-violet-line: #D7CCEE;
  --ua-info:         #17629F;   --ua-info-bg:   #E4EFF9;  --ua-info-line:   #C4DCF0;
  --ua-ok-bg:        #E3F3EB;   --ua-ok-line:   #BFE3D2;
  --ua-warn-bg:      #FCF0D9;   --ua-warn-line: #EFD9A6;
  --ua-danger-bg:    #FCE8E3;   --ua-danger-line: #F2C7BC;
  --ua-neutral-bg:   #EDF1F0;   --ua-neutral-line: #DCE4E2;

  --ua-sidebar-w:    236px;     /* §5: 224–240 (was 256) */
  --ua-head-h:       68px;      /* §7: 64–72 */
  --ua-content:      1400px;    /* §9: 1360–1440 (was 1472) */
  --ua-content-form: 1040px;    /* §9: forms 900–1100 */
}

/* --- §5 SIDEBAR: deep ROOTS green ------------------------------------- */
.ua-app .ua-sidebar {
  background: var(--ua-nav);
  border-right: 0;
  color: var(--ua-nav-text);
  position: sticky; top: 0; height: 100vh;
  padding: 16px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ua-app .ua-sidebar::-webkit-scrollbar { width: 6px; }
.ua-app .ua-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

.ua-app .ua-sidebar .ua-navlink { color: var(--ua-nav-text); min-height: 40px; font-size: 14px; }
.ua-app .ua-sidebar .ua-navlink:hover { background: var(--ua-nav-hover); color: #fff; }
.ua-app .ua-sidebar .ua-navlink[aria-current="page"] {
  background: var(--ua-nav-active); color: #fff; font-weight: 700;   /* §5 */
}
.ua-app .ua-sidebar .ua-navlink svg { opacity: .85; flex: 0 0 18px; width: 18px; height: 18px; }
.ua-app .ua-sidebar .ua-navlink[aria-current="page"] svg { opacity: 1; }

/* Brand lockup — the existing inline ROOTS shield, on the dark rail. */
.ua-app .ua-sidebar > .ua-navlink:first-child { color: #fff; }
.ua-app .ua-sidebar > .ua-navlink:first-child:hover { background: transparent; }
.ua-app .ua-sidebar .ua-card-sub,
.ua-app .ua-sidebar .ua-emergency-text { color: var(--ua-nav-label); }
.ua-app .ua-navgroup { color: var(--ua-nav-label); font-size: 10.5px; letter-spacing: .09em; }

/* Badges must stay legible on the dark rail; green-on-green vanished. */
.ua-app .ua-sidebar .ua-badge { background: #C7492F; color: #fff; min-width: 20px; height: 20px; font-size: 11px; }

/* §6 emergency — distinct, deliberately quieter than navigation. */
.ua-app .ua-emergency {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--ua-nav-text);
}
.ua-app .ua-emergency b { color: #fff; }
.ua-app .ua-emergency a { text-decoration: none; }

/* --- §7 HEADER: one compact bar --------------------------------------- */
.ua-app .ua-topbar {
  min-height: var(--ua-head-h);
  background: var(--ua-surface);
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius);
  padding: 0 16px;
  margin-bottom: 24px;
}
.ua-app .ua-topbar > .ua-h3 { font-size: 16px; font-weight: 700; }
.ua-app .ua-topbar .ua-action { min-height: 38px; }
.ua-app .ua-topbar .ua-btn   { min-height: 38px; padding: 0 14px; }
.ua-app .ua-topbar .ua-action[href="notifications.html"] { position: relative; }
.ua-app .ua-topbar .ua-badge {
  position: absolute; top: -7px; right: -7px; margin: 0;
  background: #C7492F; color: #fff;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px;
  border: 2px solid var(--ua-surface);
}

/* --- §9 content width -------------------------------------------------- */
.ua-app .ua-main { max-width: var(--ua-content); }
.ua-app .ua-main.ua-main-form { max-width: var(--ua-content-form); }

/* --- §27 STATUS SYSTEM: one mapping, six states ------------------------ */
.ua-app .ua-pill {
  border: 1px solid transparent;
  padding: 4px 10px; font-size: 12px; font-weight: 650;
}
.ua-app .ua-pill-response,
.ua-app .ua-pill-delivered { background: var(--ua-ok-bg);      color: #10704F;         border-color: var(--ua-ok-line); }
.ua-app .ua-pill-waiting   { background: var(--ua-warn-bg);    color: #8A5A00;         border-color: var(--ua-warn-line); }
.ua-app .ua-pill-due       { background: var(--ua-danger-bg);  color: #B23A26;         border-color: var(--ua-danger-line); }
.ua-app .ua-pill-escalated { background: var(--ua-violet-bg);  color: var(--ua-violet); border-color: var(--ua-violet-line); }
.ua-app .ua-pill-info      { background: var(--ua-info-bg);    color: var(--ua-info);   border-color: var(--ua-info-line); }
.ua-app .ua-pill-closed,
.ua-app .ua-pill-neutral   { background: var(--ua-neutral-bg); color: var(--ua-text-2); border-color: var(--ua-neutral-line); }
/* Matching KPI icon tone for the violet analytical state. */
.ua-app .ua-tone-violet .ua-card-icon { background: var(--ua-violet-bg); color: var(--ua-violet); }

/* --- §29 FILTERS: one control system ---------------------------------- */
.ua-app .ua-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--ua-surface); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius); box-shadow: var(--ua-shadow);
  padding: 14px 16px; margin-bottom: var(--ua-gap);
}
.ua-app .ua-input, .ua-app .ua-select, .ua-app .ua-filters input, .ua-app .ua-filters select {
  min-height: 38px; height: 38px; padding: 0 11px; box-sizing: border-box;
  border: 1px solid var(--ua-border); border-radius: var(--ua-radius-sm);
  background: var(--ua-surface); color: var(--ua-text);
  font: inherit; font-size: 14px;
}
.ua-app .ua-input:hover, .ua-app .ua-select:hover { border-color: #B8CDC8; }
.ua-app .ua-input:focus, .ua-app .ua-select:focus,
.ua-app .ua-filters input:focus, .ua-app .ua-filters select:focus {
  outline: none; border-color: var(--ua-green-i);
  box-shadow: 0 0 0 3px rgba(16,113,102,.14);
}
.ua-app .ua-input-search { min-width: 220px; flex: 1 1 220px; }
.ua-app .ua-select {
  -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  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='%23536360' 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;
}
/* Chip filters (§14 document types, §22 notification categories) */
.ua-app .ua-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-app .ua-chip {
  min-height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ua-border); border-radius: 999px;
  background: var(--ua-surface); color: var(--ua-text-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ua-app .ua-chip:hover { background: var(--ua-green-soft); border-color: var(--ua-green); }
.ua-app .ua-chip[aria-pressed="true"] { background: var(--ua-green); border-color: var(--ua-green); color: #fff; }

/* --- §24/§26 EMPTY + ERROR STATES ------------------------------------- */
/* §24: an empty state must say what is empty, why it matters and what to do
   next. The old .ua-empty was a grey sentence with no way forward. */
.ua-app .ua-empty {
  display: grid; justify-items: center; gap: 6px;
  padding: 44px 20px; text-align: center;
}
.ua-app .ua-empty-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px;
  display: grid; place-items: center;
  background: var(--ua-green-soft); color: var(--ua-green);
}
.ua-app .ua-empty-title { font-size: 15.5px; font-weight: 700; color: var(--ua-text); }
.ua-app .ua-empty p { margin: 0; max-width: 46ch; font-size: 14px; color: var(--ua-text-2); }
.ua-app .ua-empty .ua-btn { margin-top: 10px; }
/* §26: an API failure must never look like "you have no data". */
.ua-app .ua-empty-error .ua-empty-icon { background: var(--ua-danger-bg); color: #B23A26; }

/* --- §28 TABLES -------------------------------------------------------- */
.ua-app .ua-tablewrap { width: 100%; overflow-x: auto; }
.ua-app .ua-table th { padding: 11px 12px; background: #FAFCFB; font-size: 10.5px; }
.ua-app .ua-table td { padding: 13px 12px; border-bottom: 1px solid #E8EEEC; }
.ua-app .ua-table tbody tr:hover { background: #FBFDFC; }
.ua-app .ua-td-right { text-align: right; }
.ua-app .ua-pagesize { display: inline-flex; gap: 4px; }
.ua-app .ua-pagesize button {
  min-height: 30px; min-width: 34px; padding: 0 9px;
  border: 1px solid var(--ua-border); border-radius: 8px;
  background: var(--ua-surface); color: var(--ua-text-2);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ua-app .ua-pagesize button[aria-pressed="true"] {
  background: var(--ua-green); border-color: var(--ua-green); color: #fff;
}

/* --- §30 RESPONSIVE: 390 / 768 / 1024 / 1440 / 1920 -------------------- */

/* The ≤1199px rule above squeezed the rail to a 72px icon strip with no
   labels. That starts at 1024, not at 1200 — full desktop begins at 1024
   per §30, so a 1100px laptop keeps the labelled sidebar. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .ua-app .ua-shell { --ua-sidebar-w: 236px; }
  .ua-app .ua-sidebar .ua-navlink span,
  .ua-app .ua-sidebar .ua-navgroup,
  .ua-app .ua-emergency-text { display: revert; }
}

/* ≤1023px — off-canvas drawer. The rail slides in over the content instead
   of disappearing, so every destination stays reachable. */
@media (max-width: 1023px) {
  .ua-app .ua-shell { grid-template-columns: minmax(0, 1fr); }
  .ua-app .ua-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: 280px; height: 100vh;
    transform: translateX(-100%);
    transition: transform .2s ease;
    display: flex !important;          /* beats the ≤767px display:none */
    flex-direction: column;
  }
  .ua-app .ua-shell.ua-drawer-open .ua-sidebar { transform: translateX(0); }
  .ua-app .ua-sidebar .ua-navlink span,
  .ua-app .ua-sidebar .ua-navgroup,
  .ua-app .ua-emergency-text { display: revert; }
  .ua-app .ua-sidebar .ua-navlink { flex-direction: row; gap: 12px; }
  .ua-app .ua-emergency { display: block; }
  .ua-app .ua-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(7,47,43,.45);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .ua-app .ua-shell.ua-drawer-open .ua-scrim { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1024px) { .ua-app .ua-scrim { display: none; } }

@media (max-width: 767px) {
  .ua-app .ua-main { padding: 16px 16px 90px; }
  .ua-app .ua-topbar { min-height: 0; padding: 10px 12px; row-gap: 8px; }
  .ua-app .ua-topbar > .ua-h3 { font-size: 15px; }
  .ua-app .ua-filters { padding: 12px; }
  .ua-app .ua-filters input, .ua-app .ua-filters select,
  .ua-app .ua-input, .ua-app .ua-select { flex: 1 1 100%; min-width: 0; width: 100%; }
}

@media (max-width: 480px) {
  .ua-app .ua-cards { grid-template-columns: minmax(0, 1fr); }
  /* §7 — the label collapses on the narrowest phones, the icon and the
     action stay. Report an Incident is never removed. */
  .ua-app .ua-topbar .ua-action span { display: none; }
}

/* 1920: §30 — the extra room goes to the margins, not the columns. Handled
   by max-width on .ua-main; nothing stretches edge to edge. */

/* --- §31 ACCESSIBILITY -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ua-app .ua-sidebar { transition: none; }
  .ua-app .ua-scrim   { transition: none; }
}
@media (forced-colors: active) {
  .ua-app .ua-pill, .ua-app .ua-badge, .ua-app .ua-btn { border: 1px solid ButtonText; }
}