/* ==========================================================================
 * Neda | Achievements - application stylesheet
 *
 * Values come from Neda_Design_Rules.md (2026-09-16) and the owner decisions
 * recorded after it. They are declared once, as custom properties, in section
 * 1; nothing below that names a colour, a radius or a typeface of its own.
 *
 * DIRECTION: this sheet uses logical properties only (inline/block, start/
 * end). There is no `left`, `right`, `margin-left` or `text-align: left` in
 * it, so Arabic and Persian need no second stylesheet. The single exception
 * is `background-position`, which has no logical form; it is answered for RTL
 * explicitly in section 7. test/06-shell.test.js fails if a physical
 * property is added.
 * ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --neda-lime: #C4C40E;
  --neda-cyan: #0EC4C5;
  --neda-cherry: #D7263D;
  --neda-purple: #6A4C93;
  --neda-blue: #2F80ED;
  --neda-gold: #F2B705;
  --neda-black: #000000;
  --neda-white: #FFFFFF;

  /* House tints: text-box 1-4. Fills only, always under black ink. */
  --neda-tint-1: #ECF9F8;
  --neda-tint-2: #D8F2F2;
  --neda-tint-3: #F8F9EA;
  --neda-tint-4: #F1F3D6;
  --neda-purple-light: #DCD5E7;
  --neda-cherry-light: #FDD4D2;
  --neda-gold-light: #FDF0D6;

  --neda-ink: #000000;
  --neda-ink-muted: rgba(0, 0, 0, 0.72);           /* 9.6:1 on white */
  --neda-edge: rgba(0, 0, 0, 0.45);                /* control boundary, 3.36:1 */
  --neda-edge-soft: rgba(0, 0, 0, 0.14);

  --neda-font: "Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif;
  --neda-text: 15px;
  --neda-h1: 30px;
  --neda-h2: 24px;
  --neda-h3: 19px;
  --neda-small: 14px;

  /* Boxes (cards, panels, notices, dialogs) keep 10px. Every labelled button,
     text field, select and dropdown card or row is 35px with 8px corners
     (owner, 2026-10-11 to 2026-10-13, estate-wide; replaces 40px/10px). */
  --neda-radius: 10px;
  --neda-radius-control: 8px;
  --neda-radius-menu: 8px;
  --neda-radius-row: 8px;
  --neda-control: 35px;
  --neda-row-text: 14px;
  --neda-target: 44px;
  --neda-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 30px -12px rgba(0, 0, 0, 0.18);
  --neda-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  --neda-gutter: clamp(16px, 4vw, 40px);
  --neda-measure: 1200px;
  /* The page ground is the Neda Mild Aurora: text-box 1 at the top running
     evenly to text-box 3 at the foot (owner, 2026-10-11; the ground of the
     Achievement Vault on eCampus, which this product succeeds). --neda-surface
     is its top stop: the solid colour a field's focus-ring gap is drawn in. */
  --neda-surface: var(--neda-tint-1);
  --neda-surface-end: var(--neda-tint-3);
}

/* 2. Typefaces -------------------------------------------------------------
 * Self-hosted, never from a font CDN. Licences ship beside the files.
 * font-weight 400 800 (not the file's 200-800) so nothing can render thin. */
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: local("Atkinson Hyperlegible Next"), url("../fonts/atkinson-hyperlegible-next-v7-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-v7-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-v7-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-v7-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arabic script: Noto Naskh Arabic, Arabic blocks only, so an LTR page never
   downloads it. The house face stays FIRST in the RTL stack so Latin runs on
   an RTL page (brand names, addresses, credential codes) keep the brand face. */
@font-face {
  font-family: "Noto Naskh Arabic"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/noto-naskh-arabic-v44-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
html[dir="rtl"], html[lang^="ar"], html[lang^="fa"], html[lang^="ckb"] {
  --neda-font: "Atkinson Hyperlegible Next", "Noto Naskh Arabic", "Sakkal Majalla", "Traditional Arabic", "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-block-size: 100vh; display: flex; flex-direction: column;
  font-family: var(--neda-font); font-size: var(--neda-text); line-height: 1.6;
  color: var(--neda-ink); background-color: var(--neda-surface-end);
  background-image: linear-gradient(180deg, var(--neda-surface) 0%, var(--neda-surface-end) 100%);
  /* A long word or address breaks rather than widening the page (WCAG 1.4.10). */
  overflow-wrap: break-word;
}
h1, h2, h3 { line-height: 1.25; margin-block: 0 12px; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--neda-h1); }
h2 { font-size: var(--neda-h2); }
h3 { font-size: var(--neda-h3); }
p { margin-block: 0 12px; }
section { margin-block-end: 28px; }
code, .hash { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }

/* Links: black, permanently underlined; hover cherry, still underlined. */
a { color: var(--neda-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--neda-cherry); }

/* Focus: cherry, fully opaque, never blue, :focus-visible only. */
:focus-visible { outline: 3px solid var(--neda-cherry); outline-offset: 3px; border-radius: var(--neda-radius); }
main:focus { outline: none; }

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.muted { color: var(--neda-ink-muted); }
.prose { white-space: pre-line; max-inline-size: 70ch; }
.lede { font-size: var(--neda-h3); max-inline-size: 60ch; }

.skip-link {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
  padding: 10px 16px; background: var(--neda-white); border: 1.5px solid var(--neda-black);
  border-radius: var(--neda-radius); font-weight: 700; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* 4. Shell ---------------------------------------------------------------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 12px; padding-inline: var(--neda-gutter);
  background: var(--neda-white); border-block-end: 1px solid var(--neda-edge-soft);
}
.brand { text-decoration: none; min-block-size: var(--neda-target); display: inline-flex; align-items: center; }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: 0.01em; }
.brand__bar { color: var(--neda-cherry); font-weight: 400; padding-inline: 2px; }
.brand:hover { color: var(--neda-ink); }
.site-header__tools { display: flex; align-items: center; gap: 10px; }

.shell {
  flex: 1; inline-size: 100%; max-inline-size: calc(var(--neda-measure) + 2 * var(--neda-gutter));
  margin-inline: auto; padding-inline: var(--neda-gutter); padding-block: 24px 48px;
  display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .is-signed-in .shell { grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  /* Sticky, but never taller than the window: a short window or large text would
     otherwise leave the last links below the fold while focus moves onto them. */
  .site-nav { position: sticky; inset-block-start: 16px; max-block-size: calc(100vh - 32px); overflow-y: auto; }
}
.main { min-inline-size: 0; }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
@media (min-width: 960px) { .site-nav__list { flex-direction: column; flex-wrap: nowrap; } }
/* A navigation row is a dropdown-sized row: 35px (7 + 21 + 7), 14px regular
   text, 8px corners (owner, 2026-10-11). It may wrap only where a language's
   label cannot fit the column; a row is never clipped (WCAG 1.4.10). */
.site-nav__link {
  display: flex; align-items: center; min-block-size: var(--neda-control);
  padding: 7px 14px; border-radius: var(--neda-radius-row); text-decoration: none;
  font-size: var(--neda-row-text); line-height: 21px;
  transition: background 0.15s ease, color 0.15s ease;
}
/* The current page: the whole row in text-box 4, a bold black label and a 3px
   cyan underline on the label text - never a bar along an edge of the row
   (owner, 2026-10-11, "eyebrow style"). The bold label carries the state; the
   tint alone is 1.13:1 and is not relied on. */
.site-nav__link[aria-current="page"] {
  background: var(--neda-tint-4); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--neda-cyan); text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.site-nav__link:hover, .site-nav__link:focus-visible { background: var(--neda-cherry); color: var(--neda-white); outline: none; text-decoration-color: currentColor; }

.site-footer { padding-block: 20px; padding-inline: var(--neda-gutter); background: var(--neda-white); border-block-start: 1px solid var(--neda-edge-soft); font-size: var(--neda-small); color: var(--neda-ink-muted); }
.site-footer p { margin: 0; max-inline-size: var(--neda-measure); margin-inline: auto; }

/* Menus are <details>: operable with no script at all. */
.menu { position: relative; }
.menu__button {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--neda-control); min-inline-size: var(--neda-target); padding-inline: 12px;
  background: var(--neda-white); border: 1.5px solid var(--neda-edge); border-radius: var(--neda-radius-control);
  font-weight: 700; font-size: var(--neda-small); transition: background 0.15s ease, color 0.15s ease;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__button:hover, .menu__button:focus-visible { background: var(--neda-cherry); border-color: var(--neda-cherry); color: var(--neda-white); outline: none; }
/* Open is light lime, never cherry, and the pointer resting on an open trigger
   does not turn it cherry (owner, 2026-10-11 and 2026-10-12). The keyboard on
   an open trigger is shown by the house ring around the lime. */
.menu[open] > .menu__button, .menu[open] > .menu__button:hover { background: var(--neda-tint-4); border-color: var(--neda-edge); color: var(--neda-ink); }
.menu[open] > .menu__button:focus-visible { background: var(--neda-tint-4); border-color: var(--neda-edge); color: var(--neda-ink); outline: 3px solid var(--neda-cherry); outline-offset: 3px; }
.menu__name { max-inline-size: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__list {
  position: absolute; z-index: 60; inset-block-start: calc(100% + 6px); inset-inline-start: 0;
  min-inline-size: 200px; margin: 0; padding: 6px; list-style: none; background: var(--neda-white);
  border: 1px solid rgba(0, 0, 0, 0.18); border-radius: var(--neda-radius-menu); box-shadow: var(--neda-menu-shadow);
}
.menu__list--end { inset-inline: auto 0; }
.site-header__tools .menu:first-child .menu__list { inset-inline: auto 0; }
/* Where the header can wrap (a phone, 400% zoom), the tools take a line of their own
   and the open lists hang from the END of that line - never from a narrow trigger
   sitting at the start, whose end-aligned list would open past the start edge of
   the viewport, where nothing can scroll to it (WCAG 1.4.10; a scrollWidth
   measurement cannot see overflow toward the start). Logical, so RTL needs nothing. */
@media (max-width: 40em) {
  .site-header__tools { flex: 1 0 auto; justify-content: flex-end; position: relative; }
  .site-header__tools .menu { position: static; }
  .site-header__tools .menu__list, .site-header__tools .menu:first-child .menu__list {
    inset-inline: auto 0; min-inline-size: min(200px, calc(100vw - 2 * var(--neda-gutter))); max-inline-size: calc(100vw - 2 * var(--neda-gutter));
  }
}
/* Every dropdown row is one size: 35px (7 + 21 + 7), 14px regular text, 8px
   corners, on a solid white 8px card (owner, 2026-10-11 and 2026-10-12). Where
   there is room the list grows to its longest label so a row stays one line;
   on a narrow screen a row may wrap rather than be cut off (WCAG 1.4.10). */
.menu__item {
  display: block; inline-size: 100%; padding: 7px 14px; border-radius: var(--neda-radius-row);
  text-decoration: none; text-align: start; color: var(--neda-ink); background: none; border: 0;
  font: inherit; font-size: var(--neda-row-text); line-height: 21px; min-block-size: var(--neda-control);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
@media (min-width: 40.0625em) {
  .menu__list { inline-size: max-content; max-inline-size: min(420px, calc(100vw - 2 * var(--neda-gutter))); }
  .menu__item { white-space: nowrap; }
}
.menu__item[aria-current="true"] { background: var(--neda-tint-4); font-weight: 700; }
/* The selected row of a list also carries a black tick at its end: the fill is
   1.13:1, the tick and the bold label are what say "chosen" (owner, 2026-10-11).
   A mask in currentColor, so it is white on the cherry row and has no entry in
   the accessibility tree. */
.menu__item[aria-current="true"]::after, .neda-select__option.is-selected::after {
  content: ""; display: inline-block; inline-size: 14px; block-size: 14px; margin-inline-start: 10px; vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--neda-cherry); color: var(--neda-white); outline: none; }

/* 5. Page furniture ------------------------------------------------------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block-end: 24px; }
.page-header__title { margin-block-end: 6px; }
.page-header__intro { margin: 0; max-inline-size: 65ch; color: var(--neda-ink-muted); }
.breadcrumb { font-size: var(--neda-small); margin-block-end: 8px; }

/* A Neda card: white, 10px corners, no border, two-layer shadow. No accent
   strip along any edge (owner, 2026-09-14). */
.card { background: var(--neda-white); border-radius: var(--neda-radius); box-shadow: var(--neda-card-shadow); padding: 20px; }
.card__title { font-size: var(--neda-h3); margin-block-end: 6px; }
.card__meta { color: var(--neda-ink-muted); margin-block-end: 10px; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.card__foot { margin-block: 12px 0; font-size: var(--neda-small); }
/* Titles and values a person typed - one unbroken word, an address - break
   anywhere rather than push a flex or grid row wider than 320 px (WCAG 1.4.10).
   `anywhere`, not `break-word`: only it lowers the min-content width a flex
   item or a grid track is sized from. */
.card__title, .card__meta, .page-header__title, .panel__title, .breadcrumb, .link-row > :first-child,
.plain-list > li, .notice, .prose, .lede, .choice__label, .choice__hint, .card__tags, .evidence-group__parent { overflow-wrap: anywhere; }
/* Every grid names its columns. An implicit column is `auto`, sized by its widest item's
   min-content, so one card or row with a wide unbreakable part widened every card and the page
   (SUITE=a11y, endorsements at 320 px: 128 px; 1.4.10). minmax(0, 1fr) lets the column shrink to
   the container and the content wrap inside it. test/30 fails a grid that does not say. */
.card-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.questions { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* The overview's figures sit inside a white card, so they are not cards of
   their own (owner, 2026-10-11: no card inside a card). They take the Admin
   Area's "At a glance" construction - one row each, the width of the card, in
   Royal Purple light, black ink 14.71:1 (owner, 2026-10-11). A figure is a
   link to content, not a button: under the pointer it takes the content hover,
   light lime with black ink; the keyboard draws the house cherry ring (the
   tile rule, 2026-10-07). It never fills cherry. */
.metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.metric {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 14px;
  border-radius: var(--neda-radius-row); background: var(--neda-purple-light); color: var(--neda-ink);
  text-decoration: none; transition: background 0.15s ease;
}
.metric__value { font-size: 24px; font-weight: 700; line-height: 1.2; min-inline-size: 2ch; }
.metric__label { font-size: var(--neda-small); }
.metric:hover { background: var(--neda-tint-4); color: var(--neda-ink); }

/* The timeline keeps its chronological order in every direction: it is a
   vertical list, so there is nothing to mirror and nothing is mirrored. */
.timeline { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.timeline__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 720px) { .timeline__item { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; } }
.timeline__date { margin: 0; padding-block-start: 20px; font-weight: 700; font-size: var(--neda-small); }
@media (max-width: 719px) { .timeline__date { padding-block-start: 0; } }

.plain-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.panel { background: var(--neda-white); border-radius: var(--neda-radius); box-shadow: var(--neda-card-shadow); padding: 20px; }
.panel__title { font-size: var(--neda-h3); }
.panel__subtitle { font-size: var(--neda-text); margin-block-start: 16px; }

.facts { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-block: 0 24px; }
.facts dt { font-size: var(--neda-small); color: var(--neda-ink-muted); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
/* A Neda serial (0039) stays on one line where it fits, and breaks only when it would
   otherwise overflow: unbroken it made 320 px pages scroll sideways under WCAG 1.4.12 text
   spacing (SUITE=a11y, 2026-10-13). UAX #14 forbids a break between a hyphen and a digit
   (LB25), so the hyphens alone give no break; overflow-wrap supplies one. Copying is
   unchanged: the stored ASCII, no character inserted. */
.serial { overflow-wrap: anywhere; }

.table { inline-size: 100%; border-collapse: collapse; background: var(--neda-white); border-radius: var(--neda-radius); }
/* A table too wide for the screen scrolls in its own region, never the page (components.js tableRegion).
   position: relative makes the region the containing block of what is absolutely positioned inside
   it - the .visually-hidden text of an action button, most of all - so that text is clipped with the
   table. Without it, a hidden label in the last column sat at its static place far past the edge,
   and the PAGE scrolled sideways by 272 px at 320 px (SUITE=a11y, hand issuance; 1.4.10). */
.table-scroll { position: relative; max-inline-size: 100%; overflow-x: auto; border-radius: var(--neda-radius); }
.table th, .table td { text-align: start; padding: 10px 14px; border-block-end: 1px solid var(--neda-edge-soft); vertical-align: top; }
.table thead th { font-size: var(--neda-small); color: var(--neda-ink-muted); font-weight: 700; }
.table tbody th { font-weight: 400; }
.table tbody tr:last-child > * { border-block-end: 0; }

.empty, .welcome { background: var(--neda-white); border-radius: var(--neda-radius); box-shadow: var(--neda-card-shadow); padding: clamp(24px, 5vw, 48px); max-inline-size: 760px; }
.empty__title { font-size: var(--neda-h3); }
.welcome__points { padding-inline-start: 20px; margin-block: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }

.notice { background: var(--neda-tint-3); border-radius: var(--neda-radius); padding: 12px 16px; max-inline-size: 80ch; }
.notice--ok { background: var(--neda-tint-4); font-weight: 700; }
/* Information: light gold, a full gold border, never an edge stripe. */
.notice--locale-draft { background: var(--neda-gold-light); border: 1.5px solid var(--neda-gold); margin-block-end: 16px; }
/* The draft marker inherits the item's colour: inside a control that turns cherry with white text
   on hover and focus, a colour of its own stays behind on the cherry (1.4.3; test/30). */
.menu__draft { font-size: var(--neda-small); font-weight: 400; }
/* Something that did not happen (flash.not_sent): the estate's warning box,
   light cherry with a thin cherry border on every side, never a spine
   (owner, 2026-09-28). Not bold: it is not a success to celebrate. */
.notice--problem { background: var(--neda-cherry-light); border: 1px solid var(--neda-cherry); }

/* Tags and trust labels: light fill, black ink. The label is always words;
   tone adds a border style or a mark, never colour alone. */
/* inline-block, not inline-flex: in a flex box every text run and the brand-name span around it (translate="no")
   become separate items, the spaces between them are dropped and a gap is drawn instead - "verified by  Neda".
   Running text keeps its own spaces (owner, 2026-10-29). */
.tag, .trust {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; line-height: 1.5; background: var(--neda-tint-2); color: var(--neda-ink);
}
.tag--attention { background: var(--neda-gold-light); border: 1.5px solid var(--neda-black); font-weight: 700; }
/* Expired, suspended, revoked: the estate's warning colours, light cherry with
   a cherry edge (owner, 2026-09-28: warnings cherry, information gold). Words
   say it; the colour only repeats it. */
.tag--warning { background: var(--neda-cherry-light); border: 1.5px solid var(--neda-cherry); font-weight: 700; }
.trust { border: 1.5px solid transparent; }
.trust__mark { display: inline-block; inline-size: 14px; block-size: 14px; vertical-align: -2px; margin-inline-end: 6px; }
.trust--verified { background: var(--neda-tint-4); border-color: var(--neda-black); font-weight: 700; }
.trust--attested { background: var(--neda-purple-light); }
.trust--neutral { background: var(--neda-white); border-color: var(--neda-edge); }
.trust--pending { background: var(--neda-white); border: 1.5px dashed var(--neda-edge); }
.trust--problem { background: var(--neda-cherry-light); border-color: var(--neda-black); font-weight: 700; }
/* What is said beside a cryptographic label (RC-16, RC-19): words in the ink colour, never a colour alone. */
.trust-fact { font-size: 13px; line-height: 1.5; color: var(--neda-ink); }

/* Technical details: the provenance a specialist reads (source, verification,
   authority, the checks, the precise label) - kept, folded away behind a
   native <details> so ordinary screens speak plain words. The summary is a
   control: cherry under the pointer and the keyboard, light lime while open. */
.disclosure { margin-block: 12px 0; }
.disclosure__summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-block-size: var(--neda-control); padding-inline: 12px 14px; border-radius: var(--neda-radius-control);
  border: 1.5px solid var(--neda-edge); background: var(--neda-white); color: var(--neda-ink);
  font-size: var(--neda-small); font-weight: 700; transition: background 0.15s ease, color 0.15s ease;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::before {
  content: ""; inline-size: 12px; block-size: 12px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}
[dir="rtl"] .disclosure__summary::before { transform: scaleX(-1); }
.disclosure[open] > .disclosure__summary::before { transform: rotate(90deg); }
.disclosure__summary:hover, .disclosure__summary:focus-visible { background: var(--neda-cherry); border-color: var(--neda-cherry); color: var(--neda-white); outline: none; }
.disclosure[open] > .disclosure__summary { background: var(--neda-tint-4); border-color: var(--neda-edge); color: var(--neda-ink); }
.disclosure[open] > .disclosure__summary:focus-visible { background: var(--neda-tint-4); color: var(--neda-ink); outline: 3px solid var(--neda-cherry); outline-offset: 3px; }
.disclosure__body { padding-block-start: 14px; }
.disclosure__body > :last-child { margin-block-end: 0; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 8px 24px; }

/* 6. Buttons --------------------------------------------------------------
 * 35px, 8px corners, bold label (owner, 2026-10-11/13). Hover and
 * :focus-visible are ONE rule: cherry fill, white label, no ring. No button is
 * cherry at rest. The small button is the same height - "all buttons must be
 * 35" - with less padding. */
.button {
  /* One line box, so a label with a brand name in it keeps its own spaces (see .tag above): 21 + 2 x 5.5 + 2 x 1.5 = 35. */
  display: inline-block; text-align: center; vertical-align: middle;
  min-block-size: var(--neda-control); padding-block: 5.5px; padding-inline: 16px; border-radius: var(--neda-radius-control);
  border: 1.5px solid transparent; font: inherit; font-size: var(--neda-small); font-weight: 700; line-height: 21px;
  text-decoration: none; cursor: pointer; color: var(--neda-black);
  transition: background 0.15s ease, color 0.15s ease;
}
.button--primary { background: var(--neda-lime); }
/* The secondary button: Lime light, black bold label, a 2px black edge with the
   fill clipped inside it (owner, 2026-09-16; 2px since 2026-10-11 - 1.5px drew
   as a scratchy hairline). */
.button--secondary { background: var(--neda-tint-4); border: 2px solid var(--neda-black); background-clip: padding-box; padding-block: 5px; }
.button--danger { background: var(--neda-white); border-color: var(--neda-cherry); color: var(--neda-cherry); }
.button--small { padding-inline: 12px; }
.button:hover, .button:focus-visible { background: var(--neda-cherry); border-color: var(--neda-cherry); color: var(--neda-white); outline: none; }

/* 7. Forms ---------------------------------------------------------------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-inline-size: 640px; margin-block-end: 28px; }
.form--inline, .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-inline-size: none; }
.filters { margin-block-end: 20px; }
.filters .field { flex: 1 1 220px; }
.inline-form { display: inline; margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.field__label { font-weight: 700; padding: 0; }
.field__required { font-weight: 400; color: var(--neda-ink-muted); }
.field__hint { margin: 0; font-size: var(--neda-small); color: var(--neda-ink-muted); }
.field__error { margin: 0; font-weight: 700; color: var(--neda-cherry); }
/* The mark is decoration: the words and the colour say it is an error. Its
   alternative text is empty, so an error read through aria-describedby is not
   prefixed with "exclamation" or "bang" (CSS generated-content alt text). */
.field__error::before { content: "! "; content: "! " / ""; }

.input, .neda-form .neda-select__button {
  inline-size: 100%; block-size: var(--neda-control); padding-inline: 12px; font: inherit;
  color: var(--neda-ink); background: var(--neda-white); border: 1.5px solid var(--neda-edge);
  border-radius: var(--neda-radius-control);
}
/* A placeholder is an example, never the instruction; it gets a declared colour
   so its contrast is measured, not left to the engine. */
.input::placeholder { color: var(--neda-ink-muted); opacity: 1; }
.input--area { block-size: auto; min-block-size: 96px; padding-block: 8px; resize: vertical; line-height: 1.5; }
.input--file { block-size: auto; padding: 6px; }
.input--file::file-selector-button {
  margin-inline-end: 12px; min-block-size: 29px; padding-inline: 14px; border-radius: var(--neda-radius-row);
  border: 1.5px solid var(--neda-black); background: var(--neda-tint-4); font: inherit;
  font-size: var(--neda-small); font-weight: 700; cursor: pointer;
}
.input--file:hover::file-selector-button { background: var(--neda-cherry); border-color: var(--neda-cherry); color: var(--neda-white); }
.field--invalid .input, .field--invalid .neda-select__button { border-color: var(--neda-cherry); border-width: 2px; }
/* Text boxes: the ring only; the resting border is untouched. */
.input:focus-visible, .neda-form .neda-select__button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--neda-field-gap, var(--neda-surface)), 0 0 0 6px var(--neda-cherry);
}
/* The ring's gap takes the colour actually behind the field: white inside a
   white box, the ground's top stop on the page. */
.card, .panel, .empty, .welcome, .dialog, .reveal, .picker__group, .cv-preview, .error-summary { --neda-field-gap: var(--neda-white); }

/* Radios and checkboxes are drawn here, not by the browser. */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-block-size: var(--neda-target); padding-block: 6px; }
.choice__input {
  appearance: none; -webkit-appearance: none; flex: none; inline-size: 24px; block-size: 24px; margin: 0;
  background: var(--neda-white); border: 1.5px solid var(--neda-edge); border-radius: 6px;
  display: grid; place-content: center; cursor: pointer;
}
.choice__input[type="radio"] { border-radius: 50%; }
.choice__input::before { content: ""; inline-size: 12px; block-size: 12px; transform: scale(0); background: var(--neda-black); border-radius: 2px; }
.choice__input[type="radio"]::before { border-radius: 50%; }
.choice__input:checked { border-color: var(--neda-black); border-width: 2px; }
.choice__input:checked::before { transform: scale(1); }
.choice:hover .choice__input { border-color: var(--neda-cherry); }
.choice__text { display: grid; grid-template-columns: minmax(0, 1fr); }
.choice__label { font-weight: 700; }
.choice__hint { font-size: var(--neda-small); color: var(--neda-ink-muted); }
/* A picker row: only the box and the title (its <label>) choose; the hint below
   is the choice's description (views/components.js pickerChoice, W2A11Y-14). */
.choice--described { cursor: default; }
.choice--described .choice__label { cursor: pointer; }

.error-summary { background: var(--neda-white); border: 2px solid var(--neda-cherry); border-radius: var(--neda-radius); padding: 16px 20px; max-inline-size: 640px; margin-block-end: 20px; }
.error-summary__title { font-size: var(--neda-h3); }
.error-summary ul { margin: 0; padding-inline-start: 20px; }

/* The Neda select (public/js/neda-select.js, shared with the estate). */
.neda-form select, .neda-form .neda-select__button {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='8' fill='%230EC4C5'/%3E%3Cpath d='M11 14.5l6 6 6-6' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 30px 30px;
  padding-inline-end: 46px;
}
/* background-position has no logical form: the one place a side is named. */
[dir="rtl"] .neda-form select, [dir="rtl"] .neda-form .neda-select__button { background-position: left 5px center; }
.neda-select { position: relative; inline-size: 100%; }
/* The closed select wraps: the chosen value is read at rest in full, at 320 px
   and under a text-spacing override - "{title} (version {version})" and
   "Competencies: {title}" put what tells two choices apart last, and an
   ellipsis cut it off (W2A11Y-19, A11Y-SR-11). One line keeps the control height. */
.neda-form .neda-select__button {
  display: block; text-align: start; font-weight: 400; line-height: 1.4; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere; block-size: auto; min-block-size: var(--neda-control); padding-block: 5px;
}
/* Open, it is light lime - the fill and the arrow square - never cherry, and
   its own edge stays (owner, 2026-10-12). Cherry is for the active row only. */
.neda-form .neda-select__button[aria-expanded="true"] {
  background-color: var(--neda-tint-4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='8' fill='%23F1F3D6'/%3E%3Cpath d='M11 19.5l6-6 6 6' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.neda-form .neda-select__button.is-placeholder { color: var(--neda-ink-muted); }
.neda-select .neda-select__native { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.neda-select__list {
  position: absolute; z-index: 60; inset-inline: 0; inset-block-start: calc(100% + 6px); margin: 0; padding: 6px;
  list-style: none; background: var(--neda-white); border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--neda-radius-menu); box-shadow: var(--neda-menu-shadow); max-block-size: 320px; overflow: auto;
}
.neda-select__list:focus-visible { outline: none; }
.neda-select__option { padding: 7px 14px; min-block-size: var(--neda-control); font-size: var(--neda-row-text); line-height: 21px; border-radius: var(--neda-radius-row); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.neda-select__option.is-selected { background: var(--neda-tint-4); font-weight: 700; }
.neda-select__option.is-active, .neda-select__option.is-active.is-selected { background: var(--neda-cherry); color: var(--neda-white); }
.neda-select__option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Confirmation dialog (public/js/app.js) - a <dialog>, not window.confirm. */
.dialog { border: 0; border-radius: var(--neda-radius); padding: 24px; max-inline-size: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); color: var(--neda-ink); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialog__text { margin-block-end: 20px; font-weight: 700; }

/* 9. Sharing ----------------------------------------------------------------
 * The one-time reveal of a room's link and code, the record picker, the QR
 * code for public verification. Tokens only; no edge stripes. */
.reveal { background: var(--neda-white); border-radius: var(--neda-radius); box-shadow: var(--neda-card-shadow); border: 1.5px solid var(--neda-black); padding: 20px; margin-block-end: 24px; }
.reveal__value { overflow-wrap: anywhere; }
.reveal__code { display: inline-block; font-size: 28px; font-weight: 700; letter-spacing: 0.12em; padding: 6px 14px; border-radius: var(--neda-radius-row); background: var(--neda-tint-4); }
.picker { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.picker__group { border: 1.5px solid var(--neda-edge-soft); border-radius: var(--neda-radius); padding: 10px 16px 12px; margin: 0; min-inline-size: 0; background: var(--neda-white); }
.picker__legend { font-weight: 700; padding-inline: 6px; }
.qr { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; }
.qr__code { inline-size: 168px; block-size: 168px; padding: 8px; background: var(--neda-white); border: 1px solid var(--neda-edge-soft); border-radius: var(--neda-radius-row); }
.qr__code svg { display: block; inline-size: 100%; block-size: 100%; color: var(--neda-black); }
.qr figcaption { font-size: var(--neda-small); color: var(--neda-ink-muted); max-inline-size: 48ch; }
.room-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 24px; }

/* 10. Modules ----------------------------------------------------------------
 * One marked place per module, kept apart so module branches merge without
 * touching each other's lines. Tokens and logical properties only; prefer the
 * classes above to new ones. A module writes its rules directly under its marker. */

/* module: inbox */


/* module: wallet */
/* Two short rows of links and chips: the wallet's other views, and the filters in use. */
.wallet-links, .wallet-active { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.wallet-links [aria-current] { font-weight: 700; }


/* module: evidence-competency */
.evidence-group__parent { font-weight: 700; margin-block: 0 10px; }


/* module: endorsements */
.endorsement__statement { margin-block: 12px 0; margin-inline: 0; padding-inline-start: 16px; overflow-wrap: anywhere; }


/* module: pathways */


/* module: records-cv */
.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 16px; }
.link-row .cv-actions { margin-block-end: 0; }
.cv-page { background: var(--neda-white); page: cv; }
.cv-doc { max-inline-size: 820px; margin-inline: auto; padding: 32px var(--neda-gutter); overflow-wrap: anywhere; }
.cv-doc__footer { margin-block-start: 28px; }
.cv-preview { background: var(--neda-white); border-radius: var(--neda-radius); box-shadow: var(--neda-card-shadow); padding: 24px; margin-block-end: 24px; }
.cv-doc__header { margin-block-end: 20px; }
.cv-doc__headline { font-size: var(--neda-h3); margin: 0; }
.cv-doc__meta { margin: 0; color: var(--neda-ink-muted); overflow-wrap: anywhere; }
.cv-doc__section { margin-block-start: 24px; }
.cv-doc__entry { margin-block-end: 14px; break-inside: avoid; }
.cv-doc__entry > h3, .cv-doc__entry > h5 { margin-block-end: 2px; font-size: var(--neda-text); }
.cv-doc__section > h4 { font-size: var(--neda-h3); margin-block: 0 12px; }
.cv-doc__facts { margin: 4px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cv-doc__facts div { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-doc__facts dt { font-weight: 700; }
.cv-doc__facts dd { margin: 0; }
.cv-doc caption { text-align: start; padding-block-end: 6px; }
@page cv { margin: 18mm; }
@media print {
  .cv-doc { max-inline-size: none; padding: 0; }
  .cv-doc h2, .cv-doc h3 { break-after: avoid; }
  .cv-doc__entry { break-inside: avoid; }
  .cv-doc a { color: inherit; text-decoration: none; }
  .cv-doc .table { border: 0; }
  /* The printed CV has no scroll region; the preview's (WCAG 1.4.10), if its page is printed, clips nothing. */
  .cv-doc .table-scroll { overflow: visible; }
}


/* module: collections-packs */
.item-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }


/* module: integrations */


/* module: issuing-admin */


/* 8. Preferences and modes ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :focus-visible, .button:focus-visible, .input:focus-visible, .menu__button:focus-visible,
  .menu__item:focus-visible, .site-nav__link:focus-visible,
  .neda-form .neda-select__button:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; box-shadow: none; }
  .button, .tag, .trust, .card, .panel, .metric, .menu__list, .neda-select__list { border: 1px solid CanvasText; }
  /* The dialog stands apart by a shadow and a tinted backdrop, both of which
     forced colours remove: it draws its own boundary (A11Y-SR-12). */
  .dialog { border: 2px solid CanvasText; }
  .site-nav__link[aria-current="page"] { text-decoration-color: CanvasText; }
  .disclosure__summary:focus-visible, .menu[open] > .menu__button:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
  .disclosure__summary { border: 1px solid CanvasText; }
  .menu__item[aria-current="true"]::after, .neda-select__option.is-selected::after, .disclosure__summary::before { forced-color-adjust: none; background-color: CanvasText; }
  .neda-select__option.is-active.is-selected::after { background-color: HighlightText; }
  .neda-select__option.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .choice__input:checked::before { background: CanvasText; }
}
@media print {
  .site-header, .site-nav, .site-footer, .form-actions, .button, .skip-link { display: none !important; }
  body { background: #fff; }
  .card, .panel { box-shadow: none; border: 1px solid #000; }
}