/* Shared portal theme (#255 Do item 6): self-hosted fonts and the #254
   design system's color tokens as CSS variables. Every other portal page
   (dashboard, guides, account, admin -- later issues) loads this file. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/fraunces/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/fraunces/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-sans/instrument-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/instrument-sans/instrument-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/instrument-sans/instrument-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Color tokens, #254 "Design system" section, verbatim values. */
  --ground: #F4F1EA;
  --card: #FFFDF8;
  --panel: #ECE7DC;
  --ink: #1E1B16;
  --secondary-text: #5A5347;
  --body-text: #4A443A;
  --line: #E2DCCF;
  --strong-line: #D6CFBF;
  --row-divider: #EEE8DC;
  --pine: #2C5A4E;
  --pine-hover: #1F4238;
  --pine-tint: #E3ECE6;
  --pine-tint-text: #24493F;
  --sienna: #8A4B1F;
  --sienna-tint: #F5E6D6;
  --sienna-tint-text: #7A4019;
  --sienna-tint-text-strong: #5E3212;
  --running-dot: #3E8A63;
  --dark-band: #1E1B16;
  --dark-band-text: #F4F1EA;
  --dark-band-text-secondary: #D9D2C3;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
}

a {
  color: var(--pine);
}
a:hover {
  color: var(--pine-hover);
}

/* Accessibility (#254): a 3px pine focus ring, 2px offset, on every
   interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--pine);
  outline-offset: 2px;
}

button {
  font-family: inherit;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pine);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pine-tint);
  color: var(--pine-tint-text);
  font-size: 14px;
  font-weight: 500;
}

.placeholder {
  background: var(--sienna-tint);
  color: var(--sienna-tint-text);
  padding: 2px 6px;
  border-radius: 6px;
}

/* SignedOut.dc.html's decorative tile grid: shape/layout shared here, the
   per-tile tint/foreground pair stays inline (one-off values, not reusable
   tokens -- same split the design itself uses). */
.tile {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dashboard responsive switch (#259): Main.dc.html (desktop, >600px) and
   Mobile-Dashboard.dc.html (phone, <=600px) are two structurally different
   layouts, not one reflowed at a breakpoint, so both render in the DOM and
   this pair of rules picks which one is visible. `!important` overrides
   each element's own inline `display` (the exact-to-the-mock layout mode
   for that breakpoint), which a plain stylesheet rule of equal or lower
   specificity could not. 600px sits between the design's two reference
   widths (390 and 1440) with no reference value of its own to match --
   picked as the conventional phone/desktop split. */
.dashboard-mobile {
  display: none !important;
}
@media (max-width: 600px) {
  .dashboard-desktop {
    display: none !important;
  }
  .dashboard-mobile {
    display: flex !important;
  }
}

/* Guide page responsive switch (#260), the same mechanism as the dashboard
   pair above (Guide-*.dc.html desktop, >600px, vs Guide-*-Mobile.dc.html
   phone, <=600px): both render in the DOM, this pair of rules picks which
   is visible. A separate class from `.dashboard-desktop`/`.dashboard-mobile`
   -- same mechanism, kept distinct so a guide page's markup is not tagged
   with a "dashboard" class it is not part of. */
.guide-mobile {
  display: none !important;
}
@media (max-width: 600px) {
  .guide-desktop {
    display: none !important;
  }
  .guide-mobile {
    display: flex !important;
  }
}

/* The mobile account menu (<details>/<summary>, app_layout.html): no
   JavaScript needed to open or close it, so no default marker/outline to
   suppress either. */
.account-menu {
  position: relative;
}
.account-menu > summary {
  list-style: none;
}
.account-menu > summary::-webkit-details-marker {
  display: none;
}

/* The mobile "Edit" toggle on the Pinned section (dashboard.html):
   swaps every row's trailing Guide link for a pin-toggle button, for every
   section on the page, without JavaScript. `:has()` lets one checkbox
   anywhere inside `.dashboard-mobile` drive descendants that are not its
   own siblings (the checkbox lives in the Pinned section's header; the rows
   it affects are in every category section below). */
.dashboard-mobile:has(#mobile-edit-toggle:checked) .row-guide {
  display: none !important;
}
.dashboard-mobile:has(#mobile-edit-toggle:checked) .row-pin {
  display: flex !important;
}
.row-pin {
  display: none !important;
}

/* The Edit toggle's own checkbox (#259 review round 1, F5): visually
   hidden (the standard sr-only clip pattern -- NOT opacity, which an
   earlier round wrongly claimed put the focus ring on the control itself;
   a 1px clipped element's outline is not usably visible), with the ring
   drawn on its LABEL instead via `:has()` on the checkbox's
   focus-visible state. `label:has(+ input:focus-visible)` requires the
   input to be the label's next sibling, which is dashboard.html's markup
   order (label, then input). Also swaps the label's "Edit"/"Done" text
   with the same checked-state selector the row-guide/row-pin swap above
   uses. */
.edit-toggle-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.edit-label:has(+ .edit-toggle-checkbox:focus-visible) {
  outline: 3px solid var(--pine);
  outline-offset: 2px;
}
.edit-label-done {
  display: none;
}
.dashboard-mobile:has(#mobile-edit-toggle:checked) .edit-label-text {
  display: none;
}
.dashboard-mobile:has(#mobile-edit-toggle:checked) .edit-label-done {
  display: inline;
}

/* Account & security page (#266): unlike the dashboard/guide pairs above,
   `Account.dc.html` has no dedicated phone design of its own
   (portal-design/README.md's file table lists only one Account file) --
   the issue itself only asks for a column-count reflow ("2-column grid on
   desktop, one column on the phone"), so this page reflows the SAME markup
   with a media query instead of duplicating it. Padding lives on these
   classes (not inline style, which a plain rule of equal specificity could
   not override) so the query below can narrow it at the same 600px split
   the dashboard/guide pairs use. */
.account-header,
.account-section,
.account-grid,
.account-footer {
  padding-left: 80px;
  padding-right: 80px;
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 600px) {
  .account-header,
  .account-section,
  .account-grid,
  .account-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .account-grid {
    grid-template-columns: 1fr;
  }
}

/* #263 `/admin/access`: one responsive layout, same reasoning as
   `.account-header`/`.account-section`/`.account-grid` above (no dedicated
   phone design for this page either) -- its own classes rather than reusing
   the `.account-*` ones, since this is a different page with a different
   header (nav tabs, no "All services" back link). */
.admin-header,
.admin-section,
.admin-main,
.admin-footer {
  padding-left: 80px;
  padding-right: 80px;
}
@media (max-width: 600px) {
  .admin-header,
  .admin-section,
  .admin-main,
  .admin-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* A generic, single-control version of the .dashboard-desktop/.guide-desktop
   breakpoint-switch pairs above: for one small control (not a whole page
   section) that needs a different VALUE depending on breakpoint, with no
   JavaScript -- #266's Account page "show the checklist again" control uses
   this to pick the dashboard's own get-started-d/get-started-m anchor
   (`account.html`'s own comment names the exact use). Same 600px split,
   same !important-over-inline-display mechanism, just not tied to one
   page's class names. */
.bp-mobile-only {
  display: none !important;
}
@media (max-width: 600px) {
  .bp-desktop-only {
    display: none !important;
  }
  .bp-mobile-only {
    display: flex !important;
  }
}

/* The no-match panel (#259 review round 1, F3): always rendered (so
   client-side search -- which cannot insert new elements the server never
   sent -- has something to toggle), shown/hidden with the `hidden`
   attribute rather than inline `display`. Origin trumps specificity in the
   cascade (any author rule beats the user-agent `[hidden]{display:none}`
   rule regardless of order), so the visible state has to be an author rule
   too, kept lower-specificity than the `[hidden]` override below so it
   loses when both apply. */
.no-match-panel {
  display: flex;
}
.no-match-panel[hidden] {
  display: none;
}