/* Progress Community shared tokens and layout (spec §9). Package C owns later revisions. */
:root {
  --canvas: #f6f7f4;
  --surface: #ffffff;
  --nav: #15273a;
  --nav-text: #e8eef3;
  --nav-muted: #b9c6d1;
  --text: #1f2a30;
  --muted: #4d5a61;
  --line: #c9d1d0;
  --primary: #0b6b64;
  --primary-hover: #08544e;
  --primary-text: #ffffff;
  --amber-bg: #fff3d6;
  --amber-text: #6d4700;
  --amber-text-strong: #6d4700;
  --amber-line: #d9a441;
  --red-bg: #fde8e8;
  --red-text: #9d1f27;
  --ok-bg: #e3f3ef;
  --ok-text: #0a5a4a;
  --focus: #b35c00;
  --radius: 6px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --sidebar: 232px;
  --tap: 44px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { font-size: var(--fs-xl); line-height: 1.2; margin: 0 0 var(--s2); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-md); line-height: 1.3; margin: var(--s4) 0 var(--s1); }
h3 { font-size: var(--fs-base); margin: var(--s3) 0 var(--s1); }
p { margin: 0 0 var(--s2); }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -0px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.skip { position: absolute; left: var(--s1); top: -100px; z-index: 20; background: var(--surface); color: var(--text); padding: var(--s1) var(--s2); border-radius: var(--radius); }
.skip:focus { top: var(--s1); }

/* Signed-out header */
.public-header { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) var(--s3); background: var(--nav); }
.public-header nav { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.public-header a { color: var(--nav-text); min-height: var(--tap); display: inline-flex; align-items: center; }
.public-header .button { color: var(--primary-text); }
.brand { color: var(--nav-text); font-weight: 700; text-decoration: none; }

/* Signed-in shell: sidebar on desktop, top bar and bottom navigation on small screens */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: var(--nav); color: var(--nav-text); display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s2); overflow-y: auto; }
.sidebar .brand { display: block; min-height: var(--tap); padding-top: var(--s1); }
.search { position: relative; }
.search .icon { position: absolute; left: 10px; top: 12px; color: var(--nav-muted); }
.search input { width: 100%; min-height: var(--tap); padding: 0 var(--s1) 0 32px; border: 1px solid #3b5166; border-radius: var(--radius); background: #0f1e2d; color: var(--nav-text); font: inherit; }
.search input::placeholder { color: var(--nav-muted); }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0px; }
.nav a, .sidebar__account a { display: flex; align-items: center; gap: var(--s1); min-height: var(--tap); padding: 0 var(--s1); border-radius: var(--radius); color: var(--nav-text); text-decoration: none; }
.nav a:hover, .sidebar__account a:hover { background: #22384d; color: var(--nav-text); }
.nav a[aria-current="page"], .sidebar__account a[aria-current="page"] { background: #2b4a63; font-weight: 600; }
.sidebar__account { margin-top: auto; border-top: 1px solid #334a5e; padding-top: var(--s2); }
.link-button { background: none; border: 0; padding: 0 var(--s1); min-height: var(--tap); font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.sidebar .link-button { color: var(--nav-muted); }
.topbar, .bottom-nav { display: none; }
.signed-in main { margin-left: var(--sidebar); }

main { padding: var(--s5) var(--s4); max-width: calc(var(--sidebar) + 960px); }
main:focus { outline: none; }
.narrow { max-width: 78ch; }
.page--landing { max-width: 960px; margin: 0 auto; }
.eyebrow { color: var(--muted); font-weight: 600; margin-bottom: var(--s1); }
.lede { font-size: var(--fs-md); max-width: 70ch; }
.hero { padding: var(--s3) 0 var(--s4); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); margin: var(--s3) 0; }
.card h2 { margin-top: var(--s1); }
.steps { padding-left: 1.4em; margin: 0; display: grid; gap: var(--s1); max-width: 75ch; }
.plain { padding-left: 1.2em; max-width: 75ch; }
.prose { white-space: pre-line; max-width: 75ch; }
.tag { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--amber-text); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--r-pill); padding: 0px 8px; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s3) 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s3); border-radius: var(--radius); border: 2px solid var(--primary); background: var(--primary); color: var(--primary-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); }
.button--secondary { background: var(--surface); color: var(--primary); }
.button--secondary:hover { background: var(--ok-bg); color: var(--primary-hover); }
.button--small { padding: 0 var(--s2); }
.button[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* Forms */

/* Baseline for every form control on the site.
   All the good form styling used to be scoped to wrapper classes (.field, .ai,
   .gov, .composer), so any form written without one fell back to raw browser
   controls: Arial or monospace instead of the site font, a 2px inset border,
   and 21-25px tall inputs well under the 44px tap target. These are element
   selectors on purpose: specificity 0,0,1 means every existing wrapper rule
   still wins, and this only catches what nothing else styles. */
input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=search]),
select,
textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
textarea { min-height: 7rem; resize: vertical; }
/* The native dropdown arrow is kept. An earlier version set appearance:none and
   drew a chevron with gradients, but a later `background:` shorthand elsewhere
   reset background-image to none, leaving a select with no affordance at all. */
select[multiple] { padding: 6px; min-height: 9rem; }
select[multiple] option { padding: 6px 8px; border-radius: 4px; }

/* The raw "Choose File" control is the single ugliest thing on the site. */
input[type=file] { padding: 6px; cursor: pointer; }
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--surface); color: var(--primary, inherit);
  font: inherit; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--focus); }

input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }

input:not([type=hidden],[type=search]):focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
}
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
label { font-weight: 600; }

form { max-width: 60ch; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); margin: 0 0 var(--s3); }
legend { font-weight: 600; padding: 0 var(--s1); }
.field { margin: 0 0 var(--s3); position: relative; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.optional { font-weight: 400; color: var(--muted); }
.hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 4px; }
.field input, .field textarea, .field select { width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; }
.field textarea { min-height: 7rem; resize: vertical; }
.ai input:not([type=hidden]):not([type=checkbox]), .ai select, .ai textarea {
  display: block; width: 100%; min-height: var(--tap); margin: 4px 0 16px;
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit;
}
.ai textarea { min-height: 7rem; resize: vertical; }
.ai label { display: block; margin-top: 12px; }
.ai fieldset label { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ai input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.ai button { border: 2px solid var(--primary); border-radius: var(--radius); background: var(--primary); color: var(--primary-text); margin: 8px 0; }
.ai summary { min-height: 44px; padding: 8px 0; cursor: pointer; }
.ai form { margin-bottom: 16px; }
.ai [role=alert] { color: var(--red-text); }
.field--error input, .field--error textarea { border: 2px solid var(--red-text); }
.error-text { color: var(--red-text); font-weight: 600; display: flex; gap: 4px; align-items: flex-start; margin: 0 0 4px; }
.reveal { position: absolute; right: 4px; bottom: 0; min-height: var(--tap); min-width: var(--tap); background: none; border: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.field:has(.reveal:not([hidden])) input { padding-right: 64px; }
.radio, .checkbox { display: flex; gap: var(--s1); align-items: center; min-height: var(--tap); }
.radio input, .checkbox input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.inline-fields { display: flex; gap: var(--s2); flex-wrap: wrap; }
.inline-fields .field { flex: 1 1 160px; margin-bottom: 0; }
.link-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s2); }
.choices { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.choices li { display: flex; gap: var(--s2); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); }
.choices input { width: 22px; height: 22px; margin-top: 0px; accent-color: var(--primary); flex: none; }
.choices label { display: grid; gap: 0px; cursor: pointer; }
.choices label span { color: var(--muted); }

/* Status and alerts: text plus icon, never colour alone */
.alert, .banner { display: flex; gap: var(--s2); align-items: flex-start; border-radius: var(--radius); padding: var(--s2); margin: 0 0 var(--s3); border: 1px solid; }
.alert p:last-child, .banner p:last-child { margin-bottom: 0; }
.alert ul { margin: var(--s1) 0 0; padding-left: 1.2em; }
.alert__title { font-weight: 700; margin-bottom: 4px; }
.alert--error { background: var(--red-bg); color: var(--red-text); border-color: var(--red-text); }
.alert--error a { color: var(--red-text); }
.alert--ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text); }
.alert--pending, .banner { background: var(--amber-bg); color: var(--amber-text); border-color: var(--amber-line); }
.banner a, .alert--pending a { color: var(--amber-text); }
.alert .icon, .banner .icon { margin-top: 4px; }
.status { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--r-pill); padding: 0 8px; border: 1px solid; }
.status--ok { color: var(--ok-text); background: var(--ok-bg); }
.status--pending { color: var(--amber-text); background: var(--amber-bg); border-color: var(--amber-line); }
.status-line { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; font-weight: 600; }

/* Settings */
.tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1); padding: 0; margin: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); text-decoration: none; color: var(--text); border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { border-bottom-color: var(--primary); font-weight: 700; color: var(--primary); }
.rows { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s1); }
.row { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); }
.row p { margin: 0; }
.row__title { font-weight: 600; overflow-wrap: anywhere; }
.row form { margin: 0; }

/* Tablet and phone: collapse navigation, bottom bar, sticky primary action (spec §9) */
@media (max-width: 800px) {
  .sidebar { display: none; }
  .signed-in main { margin-left: 0; padding-bottom: 64px; }
  main { padding: var(--s3) var(--s2); }
  h1 { font-size: var(--fs-lg); }
  .topbar { display: flex; justify-content: space-between; align-items: center; background: var(--nav); padding: 0 var(--s2); min-height: 56px; }
  .topbar__search { color: var(--nav-text); display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); }
  .bottom-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--nav); border-top: 1px solid #334a5e; }
  .bottom-nav > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
  .bottom-nav a, .bottom-nav summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0px; min-height: 56px; color: var(--nav-text); text-decoration: none; font-size: var(--fs-micro); cursor: pointer; list-style: none; }
  .bottom-nav summary::-webkit-details-marker { display: none; }
  .bottom-nav a[aria-current="page"] { background: #2b4a63; font-weight: 700; }
  .more { position: relative; }
  .more__menu { position: absolute; right: var(--s1); bottom: 64px; min-width: 200px; list-style: none; margin: 0; padding: var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.18); }
  .more__menu a, .more__menu .link-button { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: var(--tap); padding: 0 var(--s1); color: var(--text); font-size: var(--fs-base); flex-direction: row; text-decoration: none; }
  .more__menu form { max-width: none; }
  .actions--sticky { position: sticky; bottom: 64px; background: var(--canvas); padding: var(--s1) 0; margin: 0; border-top: 1px solid var(--line); }
  .signed-out .actions--sticky { bottom: 0; }
  .link-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Community pages: readable evidence, explicit states and responsive controls. */
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.community-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(15rem,1fr); gap:24px; }
.community-card { background:var(--surface); border:1px solid #cbd6d6; border-radius:var(--r-md); padding:20px; margin:16px 0; overflow-wrap:anywhere; }
.community-card h2, .community-card h3 { margin-top:4px; }
.community-card--material { border-left:4px solid var(--primary); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.evidence-state { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.badge { border:1px solid #55716c; border-radius:var(--r-sm); padding:4px 8px; font-size:var(--fs-xs); background:#f0f6f4; }
.maintenance { flex-basis:100%; background:#fff3d4; padding:8px; color:var(--amber-text); }
.reading-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:start; padding:16px 0; }
.reading-controls .help { flex-basis:100%; }
.reading-controls details { max-width:24rem; }
.tab-nav { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #bdccca; margin:24px 0; }
.tab-nav a { padding:12px 16px; min-height:44px; text-decoration:none; }
.tab-nav a[aria-current] { border-bottom:3px solid #006c63; font-weight:700; }
.read-section { border-top:1px solid #cbd6d6; padding-top:16px; margin-top:24px; }
.preserve-lines { white-space:pre-wrap; }
.source-address { overflow-wrap:anywhere; }
.empty-state { padding:32px; border:1px dashed #839d96; border-radius:var(--r-md); margin:16px 0; }
.composer { max-width:54rem; }
.composer textarea, .composer select, .composer input:not([type=hidden]):not([type=checkbox]), .community-search input { width:100%; margin:4px 0 16px; }
.composer label, .reading-controls label { display:block; font-weight:600; margin-top:8px; }
.composer details { margin:16px 0; padding:16px; border:1px solid #cbd6d6; border-radius:var(--r-sm); }
.composer summary, .reading-controls summary { padding:8px 0; min-height:44px; cursor:pointer; }
.composer fieldset { margin:16px 0; }
.community-search { max-width:44rem; margin:16px 0; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
[hidden] { display:none !important; }
@media(max-width:850px) { .community-layout { grid-template-columns:1fr; } .page-heading { align-items:flex-start; flex-direction:column; } .reading-controls { display:block; } .reading-controls form { margin:12px 0; } }

/* Community forms retain full touch targets, including controls inside details. */
.composer input:not([type=hidden]):not([type=checkbox]), .composer select,
.composer textarea, .community-search input, .reading-controls select {
  min-height: 44px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); max-width: 100%;
}
/* Baseline for every bare <button> and submit input.
   Same problem as the inputs: all the real button styling lives on the .button
   class, and 80 of the 144 buttons in the templates are written as plain
   <button> with no class, so they fell through to the grey browser default
   sitting next to a properly styled .button elsewhere on the same page.
   These are element selectors (0,0,1), so every .button, .button--secondary
   and .link-button rule still wins; this only catches what nothing styles.
   The default is the PRIMARY look because almost every bare button in these
   templates is the single submit of its own form ('Submit review', 'Record
   decision', 'Create branch'). The handful that are genuinely secondary carry
   .button--secondary explicitly in the template. */
main button,
main input[type=submit],
main input[type=button],
main input[type=reset] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); width: auto; padding: 0 var(--s3);
  border: 2px solid var(--primary); border-radius: var(--r-pill, var(--radius));
  background: var(--primary); color: var(--primary-text);
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
main button:hover,
main input[type=submit]:hover,
main input[type=button]:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); }
main button:disabled, main input[type=submit]:disabled { opacity: .55; cursor: not-allowed; }
main button:focus-visible, main input[type=submit]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Buttons that are not controls keep their own look. */
main summary > button, main .link-button, main .ident__copy,
main details > summary, main .reveal { border: 0; }
main .link-button, main .reveal { background: none; min-height: var(--tap); padding: 0 var(--s1); }
.composer fieldset { min-width: 0; }

/* Package D governance screens: every control meets the 44 px target. */
.gov label { display: block; font-weight: 600; margin-top: 8px; }
.gov select, .gov input:not([type=hidden]):not([type=checkbox]), .gov textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px;
  margin: 4px 0 12px; font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.gov textarea { min-height: 5rem; resize: vertical; }
.gov .choice { display: flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 400; }
.gov .choice input { width: 22px; height: 22px; flex: none; }
.gov details { margin: 12px 0; }
.gov details summary { min-height: 44px; padding: 8px 0; cursor: pointer; }
.gov fieldset { min-width: 0; margin: 12px 0; }
.gov pre { overflow-x: auto; max-width: 100%; white-space: pre-wrap; word-break: break-word; }
.gov .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gov .actions form { margin: 0; }

/* Package F dashboards */
.metric-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 8px 0; }
.metric-list dt { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.metric-list dd { margin: 0; overflow-wrap: anywhere; }
.metric-value { font-size: var(--fs-lg); font-weight: 700; margin: 4px 0; }
@media (max-width: 480px) { .metric-list { grid-template-columns: 1fr; } .metric-list dd { margin-bottom: 4px; } }