/* Shared brand tokens and base styling.
 *
 * Derived from the Tree House Recovery TN wordmark (`logo.png`): the mark is a
 * single dark slate, #444c4d, set in a wide-tracked geometric sans with the
 * tagline letter-spaced underneath. Those two things -- the slate and the
 * tracking -- are what carry the identity here.
 *
 * The site itself is behind Cloudflare and its stylesheets could not be read,
 * so the greens and the paper tone are the ones this project already used in
 * `portal.css`, kept because they belong to the same outdoors register rather
 * than because they were sampled from the live site. Swap the three values
 * under "borrowed, not sampled" if you want an exact match.
 *
 * No build step and no framework, in keeping with the rest of `app/static`.
 */

:root {
  /* One dark for all dark text and fills: headings, body, buttons, the
     nav. `--slate-dark` is the hover step below it. */
  --slate: #303030;
  --slate-dark: #1f1f1f;

  /* Borrowed, not sampled. */
  --leaf: #2f6b4f;
  --leaf-dark: #24523d;
  --paper: #f2f2f2;

  --ink: #303030;
  --surface: #ffffff;
  --line: #ddd8ce;
  --muted: #6b7671;
  --danger: #a3352b;

  --radius: 3px;
  --shadow: 0 1px 2px rgb(34 41 43 / 6%);

  /* Lato for titles and copy alike, self-hosted (public/fonts/lato.css);
     the system stack only until it has loaded. */
  --font-display: Lato, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: Lato, "Helvetica Neue", Arial, system-ui, sans-serif;

  /* The menu bar's items. Not `--ink`: the bar sits on the white band, where
     body ink read a shade too heavy next to the wordmark. */
  --nav-ink: #303030;

  color-scheme: light;
}

/* --- dark -----------------------------------------------------------------
 * Stamped on <html> by `theme.js` before first paint (saved choice, else the
 * OS preference) and flipped by the toggle in the menu bar. Only this one
 * attribute is ever consulted -- there is no `prefers-color-scheme` block to
 * keep in step with it.
 *
 * Every colour below is the same *role* as its light counterpart, so no rule
 * elsewhere needs a dark variant: `--paper` stays the ground, `--surface` the
 * cards and the band, `--slate` the headings and the default button fill with
 * `--paper` as its text -- which is why the fills invert cleanly (light button,
 * dark text) instead of needing a second text token. `--leaf` brightens
 * enough to read as link text on the dark ground; `--paper` on it still
 * clears 7:1 for the submit buttons.
 */
:root[data-theme="dark"] {
  --slate: #d3d7d6;
  --slate-dark: #e6e9e8;

  --leaf: #5aa882;
  --leaf-dark: #7cc3a0;
  --paper: #1b2022;

  --ink: #e8e6e1;
  --surface: #242b2d;
  --line: #3a4346;
  --muted: #9aa5a0;
  --danger: #e07b72;

  --shadow: 0 1px 2px rgb(0 0 0 / 40%);
  --nav-ink: #e8e6e1;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

a {
  color: var(--leaf-dark);
}

/* The masthead carries the wordmark itself rather than re-setting the name in
   a substitute typeface, which never quite matches. */
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}

/* --- the menu -----------------------------------------------------------------
 * A hamburger at the right end of the masthead row (`Menu` in Chrome.jsx),
 * and the items as a dropdown hanging under it. Lives here, in the one sheet
 * every page loads, so the transcribe page gets it too. `nav.menu-bar`, not
 * `.menu-bar`: the element also carries `.header-nav`, whose `font-size` in
 * admin.css would otherwise win over an earlier-loaded class of equal weight.
 * Sizes are px: the scraped stylesheet's 10px root halves any rem.
 */
/* The bell and the menu, together at the masthead's right. */
.site-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* The bell: what this staff member has been asked to give, with the count
   on its shoulder; it opens the list (`/give`). Drawn like the menu button
   so the two read as one set of controls. */
.held-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.held-bell svg {
  width: 24px;
  height: 24px;
}

.site-tools .held-bell:hover:not(:disabled),
.site-tools .held-bell[aria-current="page"] {
  border-color: var(--line);
  background: var(--paper);
  color: var(--nav-ink);
}

.held-bell:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

.held-bell .count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Nothing held: the bell is quiet, not gone, so the way to the page stays
   where it always is. */
.held-bell[data-count="0"] {
  color: color-mix(in srgb, var(--nav-ink) 55%, transparent);
}

/* The toast: "You've just been assigned 2 surveys to give." Bottom centre,
   a dark card, the whole of it the way to the list. */
.held-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(92vw, 520px);
  padding: 14px 18px;
  border: 0;
  border-left: 5px solid var(--leaf);
  border-radius: 14px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 55%);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  animation: held-toast-in 0.18s ease-out;
}

.held-toast svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.held-toast-go {
  margin-left: auto;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 15%);
  font-weight: 700;
  font-size: 13px;
}

.held-toast:hover .held-toast-go {
  background: rgb(255 255 255 / 28%);
}

@keyframes held-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .held-toast {
    animation: none;
  }
}

.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
  /* Resets brand.css's `button` display styling below. */
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.menu-button svg {
  width: 26px;
  height: 26px;
}

/* `.site-menu` prefix: brand.css's `button:hover:not(:disabled)` below is
   (0,2,1) and would otherwise paint the hovered button slate. */
.site-menu .menu-button:hover:not(:disabled),
.site-menu .menu-button[aria-expanded="true"] {
  border-color: var(--line);
  background: var(--paper);
  color: var(--nav-ink);
}

.menu-button:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

nav.menu-bar {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 240px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 35%);
  font-size: 16px;
}

.menu-bar a,
.menu-bar a:visited {
  color: var(--nav-ink);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
}

.menu-bar a:hover {
  background: var(--paper);
}

/* The page you're on. */
.menu-bar a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* "Dashboard" leads the list and is the way back to it from every other page,
   so it wears the brand's own accent rather than blending into the rest. */
.menu-bar a.menu-accent,
.menu-bar a.menu-accent:visited {
  color: var(--leaf);
}

.menu-bar a.menu-accent:hover {
  color: var(--leaf-dark);
}

/* The light/dark toggle: last in the list, a quiet outlined pill rather than
   one more bold item. Resets everything `button` below sets. */
.menu-bar .theme-toggle {
  margin: 6px 6px 2px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--nav-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.menu-bar .theme-toggle:hover:not(:disabled) {
  border-color: var(--leaf);
  background: var(--surface);
  color: var(--leaf);
}

.menu-bar .theme-toggle svg {
  width: 15px;
  height: 15px;
  flex: none;
}

button {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  background: var(--slate);
  color: var(--paper);
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--slate-dark);
  border-color: var(--slate-dark);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The one action per screen that commits something. */
button[type="submit"] {
  background: var(--leaf);
  border-color: var(--leaf);
}

button[type="submit"]:hover:not(:disabled) {
  background: var(--leaf-dark);
  border-color: var(--leaf-dark);
}

/* `:not()` twice, for specificity alone: thr-site.css styles
   `input[type="text"], input[type="password"], …` at (0,1,1) -- white
   background, grey-blue text, 15px padding -- and a bare `input` loses to it
   on every field that carries a type attribute. Invisible in light mode,
   where white on white passed; in dark mode those fields stayed white. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: left;
}

th,
td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* --- page background ---------------------------------------------------------
 * White (the dark surface in dark mode). The live site's hero photograph used
 * to sit behind every page; the app's own panels carry their own surfaces and
 * the picture only competed with them.
 */
body {
  background-color: var(--surface);
}

/* --- the masthead ------------------------------------------------------------
 * The Canopy lockup (`src/layout/Brand.jsx`), the whole of it one link. The
 * login page draws the same lockup larger with `.portal-brand`.
 */
.site-masthead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 24px;
  background: var(--surface);
  position: relative;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand-mark {
  display: block;
  width: 44px;
  height: 44px;
  -webkit-user-select: none;
  user-select: none;
}

.brand-rule {
  width: 2px;
  height: 40px;
  background: var(--ink);
  opacity: 0.85;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* The mark is a dark PNG; inverting it is what keeps it legible on dark. */
:root[data-theme="dark"] .brand-mark {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

a.site-brand,
a.site-brand:visited {
  display: inline-flex;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}

/* The logo is the logo: no colour change on hover, only a touch of fade. */
a.site-brand:hover {
  opacity: 0.8;
}

a.site-brand:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 6px;
}

/* The injected chrome is theirs; the app's own content sits between the two. */
#thr-header,
#thr-footer {
  background: var(--surface);
}

.site-copyright {
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.site-legal {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.site-legal a {
  color: var(--muted);
  margin: 0 8px;
}

/* --- layout of the injected chrome -----------------------------------------
 * Applies on every page, including the ones that do not load `admin.css`.
 * The header and footer are full-bleed; only the app's own content is held to
 * a column. Constraining `body` instead squeezed their nav and wrapped it.
 */
#app > #thr-header,
#app > #thr-footer {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* `thr-footer.html` is stripped to the copyright line only -- the live
   site's footer verbatim (a map link, JCAHO/SAMHSA badges, a LegitScript
   stub) has been replaced, not left broken. `#thr-footer` is the flex
   container rather than the `<footer>` it wraps so the centering holds
   regardless of what that inner element is.
   Same selector, same specificity, as the `padding: 0` two rules up:
   placed after it, this is what decides the tie and gives the padding
   back. */
#app > #thr-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 32px;
}