/* ============================================================
   FS25 Portal — Shared components
   Depends on: 01-tokens.css, 02-base.css
   ------------------------------------------------------------
   Page-specific styling lives in 05-08. Anything used by three
   or more templates belongs here.
   ============================================================ */

/* ============================================================
   Panels
   ------------------------------------------------------------
   One surface treatment, reused everywhere: flat olive panel,
   hairline border, faint top highlight so it reads as sheet
   metal catching light rather than a floating card.
   ============================================================ */

.panel,
.admin-card,
.settings-card,
.profile-card,
.forum-form-card,
.editor-card,
.discord-card,
.forum-sidebar-card,
.stat-card,
.auth-card {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
}

.panel-pad { padding: var(--s5); }

/* Section heads inside panels */
.settings-card-header,
.profile-admin-header,
.builder-card-header,
.attachments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.settings-card-header h2,
.attachments-header h2 {
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-dim);
}

/* ============================================================
   Buttons
   ------------------------------------------------------------
   Condensed caps on a low-radius body: a machine control, not a
   web bubble. Primary is the only amber fill on a page, so it
   always reads as the single main action.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  min-height: 36px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  line-height: 1;
  white-space: nowrap;
  border: var(--hairline) solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }

.btn-primary {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
}
.btn-primary:hover {
  background: var(--amber-bright);
  border-color: var(--amber-bright);
  color: var(--bg);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-3);
  border-color: var(--amber-line);
  color: var(--text);
}

.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red-line);
}
.btn-danger:hover { background: var(--red-soft); color: var(--red); }

.btn-success {
  background: transparent;
  color: var(--green);
  border-color: var(--green-line);
}
.btn-success:hover { background: var(--green-soft); color: var(--green); }

.btn-warning {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber-line);
}
.btn-warning:hover { background: var(--amber-soft); color: var(--amber); }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-sm { min-height: 30px; padding: var(--s1) var(--s3); font-size: var(--fs-base); }
.btn-xs { min-height: 26px; padding: 2px var(--s2); font-size: var(--fs-sm); }
.btn-full { width: 100%; }

.btn:disabled,
.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.inline-form { display: inline-flex; margin: 0; }

/* ============================================================
   Forms
   ------------------------------------------------------------
   Inputs are recessed wells — darker than the panel they sit in,
   the way a control cutout reads on a machine console.
   ============================================================ */

.form-group { margin-bottom: var(--s4); }

.form-group > label,
.checkbox-label,
.toggle-label {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-dim);
}

.form-input,
.form-textarea,
.filter-select,
.role-select,
.search-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: var(--s3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.form-input:focus,
.form-textarea:focus,
.filter-select:focus,
select:focus,
textarea:focus,
input:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--bg);
}

.form-textarea,
textarea { min-height: 130px; resize: vertical; line-height: var(--lh-normal); }

select,
.filter-select,
.role-select {
  appearance: none;
  padding-right: var(--s6);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3A692' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
}

.form-hint {
  display: block;
  margin-top: var(--s2);
  line-height: 1.5;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
}

.form-actions,
.form-actions-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border);
}

.form-divider {
  height: 3px;
  border-top: var(--hairline) solid var(--border);
  border-bottom: var(--hairline) solid var(--border);
  margin: var(--s5) 0;
}

.checkbox-group { display: flex; flex-direction: column; gap: var(--s2); }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}

.file-input {
  padding: var(--s2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.file-input::file-selector-button {
  margin-right: var(--s3);
  padding: var(--s1) var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r);
  cursor: pointer;
}
.file-input::file-selector-button:hover { border-color: var(--amber-line); }

/* ---------- Toggle switch ---------- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: var(--hairline) solid var(--border);
}
.toggle-row:last-child { border-bottom: 0; }

.toggle-info { flex: 1; min-width: 0; }
.toggle-desc { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 2px; }
.toggle-hint { display: block; margin-top: var(--s1); }

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--text-faint);
  border-radius: var(--r-round);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--amber-soft);
  border-color: var(--amber);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translate(20px, -50%);
  background: var(--amber);
}
.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ============================================================
   Alerts
   ------------------------------------------------------------
   A coloured left edge rather than a wash: the same plate logic
   as the spec block, so state reads consistently.
   ============================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--text-faint);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-2);
  color: var(--text);
}

.alert svg { flex-shrink: 0; margin-top: 2px; }

.alert-error,
.alert-danger {
  border-left-color: var(--red);
  background: var(--red-soft);
  color: var(--text);
}
.alert-error svg, .alert-danger svg { color: var(--red); }

.alert-success {
  border-left-color: var(--green);
  background: var(--green-soft);
}
.alert-success svg { color: var(--green); }

.alert-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}
.alert-warning svg { color: var(--amber); }

.alert-info {
  border-left-color: var(--steel);
  background: var(--steel-soft);
}
.alert-info svg { color: var(--steel); }

/* ============================================================
   Avatars
   ============================================================ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--bg);
  background: var(--amber);
  border-radius: var(--r);
  overflow: hidden;
  object-fit: cover;
}

.avatar.small  { width: 26px; height: 26px; font-size: var(--fs-sm); }
.avatar.large  { width: 56px; height: 56px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-round);
  background: var(--green);
  border: 2px solid var(--surface);
  flex-shrink: 0;
}

/* ============================================================
   Status badges
   ------------------------------------------------------------
   Stamped plates, not pills. Workflow states share one system so
   "planned / in progress / done" reads as a progression wherever
   it appears — roadmap, tickets, or threads.
   ============================================================ */

.status-badge,
.thread-badge,
.post-category-badge,
.level-badge,
.discord-badge,
.discord-badge-inline,
.post-pin-badge,
.level-requirement-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}

/* Workflow progression */
.status-badge.planned,
.thread-badge.planned      { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }

.status-badge.in_progress,
.status-badge.progress,
.thread-badge.in_progress   { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }

.status-badge.done,
.thread-badge.done,
.thread-badge.solved,
.status-badge.solved,
.status-badge.resolved      { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }

.status-badge.closed,
.thread-badge.locked,
.status-badge.locked        { color: var(--text-faint); border-color: var(--border-strong); }

.status-badge.open          { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }
.status-badge.waiting       { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }

/* Priority */
.status-badge.low           { color: var(--text-dim); }
.status-badge.medium        { color: var(--steel); border-color: var(--steel-line); }
.status-badge.high          { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.status-badge.critical      { color: var(--red);   border-color: var(--red-line);   background: var(--red-soft); }

.status-badge.danger        { color: var(--red);   border-color: var(--red-line);   background: var(--red-soft); }

.level-badge,
.post-pin-badge { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }

.discord-badge,
.discord-badge-inline { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }

/* ============================================================
   Tables
   ============================================================ */

.admin-table-wrapper,
.table-wrapper {
  overflow-x: auto;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.admin-table,
.mini-table { width: 100%; font-size: var(--fs-sm); }

.admin-table th,
.mini-table th {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
  background: var(--bg-sunk);
  border-bottom: var(--hairline) solid var(--border);
  white-space: nowrap;
}

.admin-table td,
.mini-table td {
  padding: var(--s3) var(--s4);
  border-bottom: var(--hairline) solid var(--border-faint);
  vertical-align: middle;
}

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

.admin-table tbody tr { transition: background var(--t) var(--ease); }
.admin-table tbody tr:hover { background: var(--surface-2); }

.actions-cell { text-align: right; white-space: nowrap; }

/* ============================================================
   Empty state
   ------------------------------------------------------------
   An empty screen is an invitation to act, so it gets a real
   heading and, where the page provides one, an action.
   ============================================================ */

.empty-state,
.roadmap-empty,
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s8) var(--s5);
  text-align: center;
  color: var(--text-dim);
  border: var(--hairline) dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.empty-state svg { color: var(--text-faint); opacity: 0.7; }

.empty-state h3 {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text);
}

.empty-state p { font-size: var(--fs-sm); max-width: 44ch; }

/* ============================================================
   Markdown toolbar + rendered content
   ============================================================ */

.md-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
  padding: var(--s2);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
}

.md-toolbar + .form-textarea,
.md-toolbar + textarea { border-radius: 0 0 var(--r) var(--r); }

.md-btn,
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  background: transparent;
  border: var(--hairline) solid transparent;
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.md-btn:hover,
.toolbar-btn:hover {
  background: var(--surface-3);
  color: var(--amber);
  border-color: var(--border-strong);
}

/* Rendered prose */
.post-content,
.forum-post-content {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-dim);
  overflow-wrap: break-word;
}

.post-content > * + * { margin-top: var(--s3); }

.post-content h1,
.post-content h2,
.post-content h3,
.forum-post-content h1,
.forum-post-content h2,
.forum-post-content h3 {
  margin-top: var(--s5);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.post-content h1 { font-size: var(--fs-lg); }
.post-content h2 { font-size: var(--fs-md); }
.post-content h3 { font-size: var(--fs-base); }

.post-content ul,
.post-content ol,
.forum-post-content ul,
.forum-post-content ol { padding-left: var(--s5); }

.post-content li + li { margin-top: var(--s1); }

.post-content strong { color: var(--text); font-weight: 600; }

.post-content blockquote,
.forum-post-content blockquote {
  padding: var(--s2) var(--s4);
  border-left: var(--plate-edge) solid var(--amber-line);
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: 0 var(--r) var(--r) 0;
}

.post-content pre,
.forum-post-content pre {
  padding: var(--s4);
  overflow-x: auto;
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.post-content pre code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
}

.post-content img { border-radius: var(--r); margin: var(--s3) 0; }

.post-content table { font-size: var(--fs-sm); margin: var(--s3) 0; }
.post-content th,
.post-content td {
  padding: var(--s2) var(--s3);
  border: var(--hairline) solid var(--border);
  text-align: left;
}
.post-content th { background: var(--bg-sunk); color: var(--text); }

.post-content.compact {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
}

/* ============================================================
   Attachments
   ============================================================ */

.attachments-list,
.attachment-preview-list,
.attachments-existing-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.attachment-item,
.attachment-link,
.attachment-file {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  color: var(--text-dim);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.attachment-link:hover { border-color: var(--amber-line); color: var(--text); }

.attachment-icon { color: var(--text-faint); flex-shrink: 0; }

.attachment-info,
.attachment-file-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.attachment-name,
.attachment-file-name {
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size,
.attachment-file-size {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

/* An image attachment renders as an anchor wrapping a thumbnail and its
   filename — not a bare <img> — so the frame goes on the link. */
.attachment-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  width: calc(var(--s8) + var(--s6));
  padding: var(--s2);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  color: var(--text-dim);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.attachment-thumb:hover { border-color: var(--amber-line); color: var(--text); }

.attachment-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
}

.attachment-thumb-name {
  font-size: var(--fs-2xs);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wrapper emitted by partials/attachments.ejs beneath a post body. */
.post-attachments {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border);
}

.post-attachments .attachments-header {
  padding: 0 0 var(--s3);
  border-bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
  justify-content: flex-start;
  gap: var(--s2);
}

/* Mixed thumbnails and file rows sit in one wrapping row. */
.post-attachments .attachments-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.post-attachments .attachment-file { flex: 1 1 240px; }

/* ============================================================
   XP meter
   ------------------------------------------------------------
   A fuel/level gauge: a recessed well with an amber fill.
   ============================================================ */

.xp-bar,
.progress {
  position: relative;
  height: 6px;
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  background: var(--amber);
  transition: width var(--t-slow) var(--ease);
}

.xp-text,
.xp-amount {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.xp-positive { color: var(--green); }

/* ============================================================
   Modal
   ============================================================ */

.roadmap-modal,
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}

.roadmap-modal.open,
.modal.open { display: flex; }

.roadmap-modal-backdrop,
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.roadmap-modal-dialog,
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-3);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.roadmap-modal-header,
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.roadmap-modal-title,
.modal-title {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.roadmap-modal-close,
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r);
  color: var(--text-dim);
}
.roadmap-modal-close:hover { background: var(--surface-2); color: var(--red); }

.roadmap-modal-body,
.modal-body { padding: var(--s5); overflow-y: auto; }

.roadmap-modal-image {
  width: 100%;
  border-radius: var(--r);
  border: var(--hairline) solid var(--border);
  margin-bottom: var(--s4);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 600px) {
  .form-actions,
  .form-actions-row { flex-direction: column; align-items: stretch; }
  .form-actions .btn,
  .form-actions-row .btn { width: 100%; }

  .toggle-row { flex-direction: column; align-items: flex-start; gap: var(--s2); }

  .admin-table th,
  .admin-table td { padding: var(--s2) var(--s3); }

  .spec-plate { gap: var(--s2) var(--s4); }
}

/* ============================================================
   Level plate
   ------------------------------------------------------------
   The large level marker on profile and admin user pages.
   Replaces an inline indigo gradient left over from the old
   palette, so the value now comes from tokens like everything
   else and needs no !important to enforce.
   ============================================================ */

.level-badge-lg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: calc(var(--s8) + var(--s1));
  height: calc(var(--s8) + var(--s1));
  flex-shrink: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--amber-dim), var(--amber));
  border: var(--hairline) solid var(--amber);
  border-radius: var(--r-lg);
  color: var(--bg);
  box-shadow: var(--edge-light);
}

/* ============================================================
   Error page numeral
   ------------------------------------------------------------
   The status code set as a stamped serial rather than gradient
   display type — it is machine output, so it reads as data.
   ============================================================ */

.error-code {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-caps);
  line-height: 1;
  color: var(--amber);
  margin-bottom: var(--s3);
}