/* Application shell: masthead, navigation, breadcrumb, context strip, footer,
 * plus the shared component vocabulary (status badges, messages, empty and
 * loading states, definition groups, data tables).
 */

/* ---------------------------------------------------------------------------
 * Masthead
 * ------------------------------------------------------------------------ */
.app-masthead {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-10));
  background: var(--ink-900);
  color: var(--on-ink);
  border-bottom: var(--border-band) solid var(--rule-strong);
}

.masthead-identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.masthead-identity:hover { color: inherit; }

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.wordmark-rule {
  width: 1px;
  height: 1.1em;
  background: var(--slate-400);
}

.masthead-role {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-ink-muted);
  white-space: nowrap;
}

.masthead-nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.masthead-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--on-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.masthead-nav a:hover {
  color: var(--on-ink);
  border-color: var(--slate-400);
}

.masthead-nav a[aria-current="page"] {
  color: var(--ink-900);
  background: var(--on-ink);
  border-color: var(--on-ink);
}

/* Local-server indicator.
 * States a fact about this server only. It must never be read as a claim that
 * provider processing is local; the copy is paired with an explicit warning on
 * the new-analysis screen whenever a live hosted run is selected. */
.server-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-hair) solid var(--slate-400);
  border-radius: var(--radius-sm);
  color: var(--on-ink-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.server-indicator .dot {
  width: 0.5rem;
  height: 0.5rem;
  border: var(--border-hair) solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------------------
 * Context strip: breadcrumb + case context
 * ------------------------------------------------------------------------ */
.context-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-2) clamp(var(--space-4), 3vw, var(--space-10));
  background: var(--paper);
  border-bottom: var(--border-hair) solid var(--rule);
  font-size: var(--text-xs);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--slate-600);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--slate-400);
}

.breadcrumb a { font-weight: var(--weight-semibold); }

.breadcrumb [aria-current="page"] {
  color: var(--graphite-800);
  font-weight: var(--weight-semibold);
}

.context-case {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-left: auto;
  color: var(--slate-600);
}

.context-case .context-label {
  font-weight: var(--weight-semibold);
  color: var(--graphite-800);
}

.context-case .context-diarienummer { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * Main region and footer
 * ------------------------------------------------------------------------ */
main {
  width: min(var(--shell-max), calc(100% - var(--space-8)));
  min-height: 65vh;
  margin: 0 auto;
  padding: clamp(var(--space-5), 3vw, var(--space-10)) 0 var(--space-12);
}

/* The review workspace needs the width for evidence: claim rail, source page and
   decision form share one screen. It is given its own maximum rather than "no maximum",
   so a 1920px display is used deliberately while outer breathing room survives. */
body[data-route="review"] main {
  width: min(var(--shell-review-max), calc(100% - var(--space-8)));
  max-width: none;
}

footer {
  padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-10)) var(--space-8);
  color: var(--slate-600);
  font-size: var(--text-xs);
}

/* ---------------------------------------------------------------------------
 * Shared components
 * ------------------------------------------------------------------------ */

/* Eyebrow / section kicker */
.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Actions */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.6rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--ink-900);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.action:hover { background: var(--info-tint); color: var(--ink-900); }

.action--primary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--on-ink);
}

.action--primary:hover { background: var(--ink-700); color: var(--on-ink); }

.action--quiet {
  border-color: var(--rule-strong);
  color: var(--ink-700);
  font-weight: var(--weight-semibold);
}

/* Status badge.
 * Four redundant channels: Swedish label, glyph, border treatment, tint.
 * The glyph is aria-hidden; the label carries the accessible name. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.15rem var(--space-2);
  border: var(--border-hair) solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.status-badge .glyph {
  font-family: var(--font-ui);
  line-height: 1;
}

.tone-supported { color: var(--supported-ink); background: var(--supported-tint); }
.tone-partial   { color: var(--partial-ink);   background: var(--partial-tint);
                  border-style: dashed; }
.tone-alert     { color: var(--alert-ink);     background: var(--alert-tint);
                  border-width: 2px; }
.tone-neutral   { color: var(--neutral-ink);   background: var(--neutral-tint); }
.tone-info      { color: var(--info-ink);      background: var(--info-tint); }

/* Messages: error, warning, info. Never colour alone — each carries a bold
 * label and a left rule of distinct weight. */
.message {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid var(--rule);
  border-left-width: var(--border-gutter);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  font-size: var(--text-sm);
}

.message-title {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.message-detail { color: var(--graphite-800); }

.message--error {
  border-color: var(--alert-rule);
  border-left-width: var(--border-gutter-strong);
  background: var(--alert-tint);
  color: var(--alert-ink);
}

.message--warning {
  border-color: var(--partial-rule);
  background: var(--partial-tint);
  color: var(--partial-ink);
}

.message--info {
  border-color: var(--rule-strong);
  background: var(--info-tint);
  color: var(--info-ink);
}

.message--external {
  border-color: var(--external-rule);
  border-left-width: var(--border-gutter-strong);
  background: var(--external-tint);
  color: var(--external-ink);
}

.message--success {
  border-color: var(--supported-rule);
  background: var(--supported-tint);
  color: var(--supported-ink);
}

.message pre {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  max-height: 18rem;
  overflow: auto;
  border: var(--border-hair) solid currentColor;
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Panels */
.panel {
  background: var(--paper-raised);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel);
}

/* Loading state.
 * A determinate skeleton of the shape being loaded, not an indeterminate spinner. */
.loading-state {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--slate-600);
  font-size: var(--text-sm);
}

.loading-bar {
  height: 0.75rem;
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
}

.loading-bar:nth-child(2) { width: 78%; }
.loading-bar:nth-child(3) { width: 54%; }

.loading-slow {
  color: var(--partial-ink);
  font-weight: var(--weight-semibold);
}

/* Empty state. No illustration; a restrained case-file motif only. */
.empty-state {
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  padding: clamp(var(--space-5), 4vw, var(--space-10));
  background: var(--paper-raised);
  border: var(--border-hair) solid var(--rule-strong);
  border-top: var(--border-band) solid var(--ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel);
}

.empty-state h2,
.empty-state h3 { margin: 0; }

.empty-state p { color: var(--slate-600); max-width: var(--reading-max); }

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Definition groups for operator metrics. */
.definition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.definition {
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-hair) solid var(--rule);
  border-left: var(--border-gutter) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
}

.definition dt,
.definition .definition-term {
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.definition dd,
.definition .definition-value {
  margin: var(--space-1) 0 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.definition .definition-note {
  display: block;
  margin-top: var(--space-1);
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  text-transform: none;
  letter-spacing: 0;
}

/* An unavailable value is stated, never rendered as zero, blank or a dash alone. */
.unavailable {
  color: var(--slate-600);
  font-weight: var(--weight-semibold);
  font-style: normal;
}

.unavailable::before {
  content: "—\00a0";
  color: var(--slate-400);
}

/* Data tables */
.data-table-shell {
  overflow-x: auto;
  background: var(--paper-raised);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel);
}

/* A wide table inside the shell must scroll inside the shell, never move the page. The
   register previously produced 92px of page-level horizontal scrolling at 320px because
   its wrapper class did not match any rule at all. */
.data-table-shell:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table caption {
  padding: var(--space-3) var(--space-4);
  color: var(--slate-600);
  font-size: var(--text-xs);
  text-align: left;
}

.data-table thead { background: var(--paper-sunken); }

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hair) solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  color: var(--ink-700);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr:hover { background: var(--paper); }

/* ---------------------------------------------------------------------------
 * Responsive shell
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .app-masthead {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .masthead-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .context-case { margin-left: 0; width: 100%; }
}

/* The role eyebrow is set `white-space: nowrap` and is long on the review route
   ("Juristens granskningsarbetsyta"); measured, it forced 38px of page-level horizontal
   scrolling at 390px and 108px at 320px. The breadcrumb already names the current screen,
   so the eyebrow is dropped rather than wrapped where there is no room for it. */
@media (max-width: 600px) {
  .masthead-role,
  .wordmark-rule { display: none; }
}

@media (max-width: 720px) {
  main { width: calc(100% - var(--space-4)); }
  body[data-route="review"] main { width: calc(100% - var(--space-4)); }
  .empty-actions .action { width: 100%; }
}

.context-link--technical,
.technical-link { color: var(--slate-600); font-weight: var(--weight-medium); }