:root {
  --lic-gold: #c9ab72;
  --lic-gold-dark: #b8985f;
  --lic-black: #000000;
  --lic-white: #ffffff;
  --lic-gray-light: #f7f5ef;
  --lic-gray-mid: #d8d4c8;
  --lic-error-bg: #fde8e8;
  --lic-error-text: #b73a3a;
}

/* TEXT STYLES — IMPORTANT FOR FUTURE EDITS.
   This site uses exactly nine canonical text styles. Before adding any
   new text to the site, see the "Canonical text styles" section of this
   folder's CLAUDE.md for the complete list and the rule for choosing
   between them. Do NOT introduce a tenth style (new combination of
   font-family + size + weight + color + italic) without first asking
   Alene. To make a new element look like one of the existing nine,
   add its selector to the canonical's existing CSS rule rather than
   redefining the values. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  color: var(--lic-black);
  background: var(--lic-white);
  line-height: 1.5;
}

/* Canonical extra-large heading style — any "extra-large Times New Roman
   black bold" heading on this site should match this. <h1> elements get
   it automatically (browser defaults supply 2rem / weight 700). For non-h1
   elements that should share this look (e.g., .view-toggle a), add the
   selector to the rule below rather than redefining the values. */
h1, .view-toggle a {
  font-family: "Times New Roman", serif;
}
h1, .view-toggle a {
  font-size: 2rem;
  font-weight: 700;
}

/* Canonical "normal-size bold" text style — any "bold, sans-serif, black,
   roughly normal-sized (not huge and not tiny)" text on this site should
   match this. Sans-serif is inherited (Open Sans, from body); black is
   inherited (from body). To add a new element that should share this
   look, add the selector to the rule below rather than redefining the
   values. */
button.primary,
button[type="submit"].primary,
button.secondary,
button[type="submit"].secondary,
.tab-nav .tab.active,
.thanked-back,
.thanked-message strong,
.queue-item .assignee strong,
.other-options-context strong,
.primary-link,
th {
  font-size: 1rem;
  font-weight: 600;
}

/* Catch-all: every <strong> element on the site automatically renders at
   canonical 2's weight (600), regardless of where it sits. Without this,
   a bare <strong> in a new container falls back to the browser default
   (weight 700), which is off-canon — the exact trap that produced an
   off-canon donor name on the Other Options page before. font-size,
   color, and font-family inherit from the surrounding context. */
strong {
  font-weight: 600;
}

/* Catch-all: every <code> element renders in the surrounding font (Open
   Sans by default, gold italic when nested inside .form-hint, etc.),
   keeping it on whatever canonical its container belongs to. Without
   this, a bare <code> falls back to the browser-default monospace
   (Menlo on macOS) — a tenth off-canon style, the exact trap that
   surfaced on the admin user-delete page when usernames and role names
   were wrapped in <code>. The semantic <code> markup stays for screen
   readers and future-Claude inspection, it just no longer changes the
   font. */
code {
  font-family: inherit;
}

/* Default link style: LIC gold, underlined. Class-styled links
   (.brand, .view-toggle a, .tab-nav .tab, .thanked-back) already
   override color and text-decoration, so they're unaffected. To
   give a new link this default look, just leave it un-classed. */
a {
  color: var(--lic-gold);
  text-decoration: underline;
}

input, button, select, textarea {
  font-family: inherit;
}

.lic-header {
  background: var(--lic-black);
  color: var(--lic-gold);
  padding: 1rem 2rem;
}
.lic-header-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Canonical "medium-large bold (gold)" text style — same size and weight
   as the black canonical (.queue-item .person-name) but in LIC gold.
   For prominent LIC brand-mark display. Sans-serif (inherits Open Sans
   from body), weight 700, 1.25rem, gold. To add a new element that
   should share this look, add the selector to the rule below rather
   than redefining the values. */
.brand {
  color: var(--lic-gold);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.user-info {
  color: var(--lic-white);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none;
  color: var(--lic-gold);
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  font-size: 1rem;
  padding: 0;
}

main {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

footer {
  text-align: center;
  margin: 4rem 0 2rem;
  color: #888;
  font-size: 1rem;
  font-style: italic;
}

h1 {
  margin-top: 0;
  border-bottom: 3px solid var(--lic-gold);
  padding-bottom: 0.4rem;
}

button.primary, button[type="submit"].primary {
  background: var(--lic-gold);
  color: var(--lic-black);
  border: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  cursor: pointer;
}
button.primary:hover { background: var(--lic-gold-dark); }

/* Secondary button — black background, white text. Same canonical 2 text
   look as .primary (joined to that rule above); only background and color
   differ. Used for the "Other Options" button next to "Mark called/card
   sent/thanked" on each queue item, and for the option-submit buttons on
   the Other Options page itself. */
button.secondary, button[type="submit"].secondary {
  background: var(--lic-black);
  color: var(--lic-white);
  border: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  cursor: pointer;
}
button.secondary:hover { background: #1f1f1f; }

.login-container {
  max-width: 380px;
  margin: 4rem auto;
  padding: 2rem;
  border: 1px solid var(--lic-gray-mid);
  border-radius: 6px;
  background: var(--lic-gray-light);
}
.login-container label {
  display: block;
  margin: 1rem 0;
}
.login-container input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem;
  border: 1px solid var(--lic-gray-mid);
  border-radius: 4px;
  font-size: 1rem;
}
.login-container button { width: 100%; margin-top: 0.5rem; }

/* Segmented control: one rounded pill split in half by two inline anchors.
   The outer pill border lives on .view-toggle itself (not on the individual
   anchors). overflow: hidden clips the straight inner edges so they don't
   poke through the rounded outer corners. */
.view-toggle {
  margin: 1.5rem 0 2rem auto;
  display: flex;
  width: fit-content;
  border: 2px solid var(--lic-gold);
  border-radius: 999px;
  overflow: hidden;
}
.view-toggle a {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  text-decoration: none;
  color: var(--lic-black);
  background: var(--lic-white);
}
.view-toggle a:hover { background: var(--lic-gray-light); }
.view-toggle a.active {
  background: var(--lic-gold);
}

/* Sub-tab row. The active gold tab sits with its bottom flush against the
   queue folder's gold top border below, so the active tab visually merges
   into the folder's top edge (continuous gold). Inactive gray tabs sit just
   above the folder's top border as separate pills. */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6rem;
  margin: 1rem 0 0;
  padding: 0 50px;
}

/* Manila folder: the queue content sits inside a fully-gold container —
   gold border AND gold interior fill — so the active gold sub-tab visually
   melts into the folder as one continuous shape. The individual queue cards
   inside have white backgrounds, so they stand out clearly against the gold
   folder body. */
.queue-folder {
  background: var(--lic-gold);
  padding: 1.5rem 1.5rem 0 1.5rem;
  border-radius: 6px;
}
/* Each tab has two pseudo-element "wings" (::before on the left, ::after on
   the right) that are the SAME height as the tab and square (width matches
   height via aspect-ratio: 1). The outer-top corner of each wing has a 100%
   border-radius, producing a smooth quarter-circle curve from the tab's top
   corner all the way down to the folder edge — a fully gradual flare from
   tab-top to folder-edge. Each wing is colored like its tab body (gray for
   inactive, white on hover, gold for active), so tab + wings read as one
   coherent flared tab shape. The wings need horizontal breathing room, so
   .tab-nav has a large gap and side padding. */
.tab-nav .tab {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--lic-gray-mid);
  text-decoration: none;
  color: var(--lic-black);
  background: var(--lic-gray-light);
  font-size: 1rem;
}
.tab-nav .tab::before,
.tab-nav .tab::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: 0;
  width: auto;
  aspect-ratio: 1;
  background: var(--lic-gray-light);
  border-top: 1px solid var(--lic-gray-mid);
}
.tab-nav .tab::before {
  right: 100%;
  border-top-left-radius: 100%;
  border-left: 1px solid var(--lic-gray-mid);
}
.tab-nav .tab::after {
  left: 100%;
  border-top-right-radius: 100%;
  border-right: 1px solid var(--lic-gray-mid);
}
.tab-nav .tab:hover { background: var(--lic-white); }
.tab-nav .tab:hover::before,
.tab-nav .tab:hover::after { background: var(--lic-white); }
.tab-nav .tab.active {
  background: var(--lic-gold);
  border-top-color: var(--lic-gold);
}
.tab-nav .tab.active::before,
.tab-nav .tab.active::after {
  background: var(--lic-gold);
  border-color: var(--lic-gold);
}

.queue-list { list-style: none; padding: 0; }
.queue-item {
  border: 1px solid var(--lic-gray-mid);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  background: var(--lic-white);
}

.queue-item .action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.queue-item .action-label {
  font-size: 1rem;
  color: #888;
  font-style: italic;
}
.queue-item .assignee {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: var(--lic-gold);
  color: var(--lic-black);
  border-radius: 3px;
  font-size: 1rem;
}

/* Canonical "medium-large bold" text style — for prominent names or
   sub-heading-like display. Sans-serif (inherits Open Sans from body),
   black (inherits), weight 700, 1.25rem. To add a new element that
   should share this look, add the selector to the rule below rather
   than redefining the values. */
.queue-item .person-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.2rem 0 0.5rem;
}

.queue-item .contact-info,
.queue-item .mailing-address {
  font-size: 1rem;
  color: var(--lic-black);
  margin-bottom: 0.7rem;
  white-space: pre-line;
}

.queue-item .narrative,
.queue-item .thank-item-note {
  margin: 0.6rem 0;
  padding: 0.5rem 0.8rem;
  background: var(--lic-gray-light);
  border-radius: 4px;
  font-size: 1rem;
}

.queue-item .donation-history {
  font-size: 1rem;
  color: var(--lic-black);
  margin: 0.5rem 0;
}

.queue-item .thank-for {
  margin-top: 0.9rem;
}
.queue-item .thank-for-header {
  font-size: 1rem;
  color: #888;
  font-style: italic;
  margin-bottom: 0.4rem;
}
.queue-item .thank-item-amount,
.queue-item .thank-item-meta {
  font-size: 1rem;
  color: var(--lic-black);
}
.queue-item .thank-item-meta {
  margin-top: 0.2rem;
}
.mark-done-form {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.empty { color: #888; font-style: italic; }
.error {
  background: var(--lic-error-bg);
  color: var(--lic-error-text);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.thanked-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.thanked-card {
  max-width: 640px;
  width: 100%;
  border: 1px solid var(--lic-gray-mid);
  border-radius: 4px;
  background: var(--lic-white);
  padding: 2rem 2.2rem 2.4rem;
  text-align: center;
}
.thanked-heading {
  margin: 0 0 1.2rem;
  border-bottom: 3px solid var(--lic-gold);
  padding-bottom: 0.4rem;
}
.thanked-message {
  font-size: 1rem;
  margin: 0.9rem 0;
  line-height: 1.6;
}
.thanked-back {
  display: inline-block;
  margin-top: 1.4rem;
  background: var(--lic-gold);
  color: var(--lic-black);
  text-decoration: none;
  padding: 0.55rem 1.3rem;
  border-radius: 4px;
}
.thanked-back:hover { background: var(--lic-gold-dark); }
.thanked-undo-form { margin-top: 1rem; }
.thanked-undo-form .thanked-message { margin: 0; }

/* Other Options page layout. Reuses .thanked-container / .thanked-card for
   the centered card frame, then overrides text-align inside the card so
   the option list stacks vertically and reads left-to-right naturally. */
.other-options-card { text-align: left; }
.other-options-context {
  margin: 0.4rem 0 1.2rem;
  color: var(--lic-black);
  font-size: 1rem;
}
.options-list {
  margin: 1.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.option-row form { margin: 0; }
.other-options-back {
  display: inline-block;
  margin-top: 0.4rem;
}

/* Prompt page (intermediary "fill in the text box" step that note-required
   Other Options route through before they're submitted). Reuses the
   .thanked-card / .other-options-card frame for the centered card with
   left-aligned content. The submit form holds the textarea and primary
   submit button; the Nevermind form sits below it as a small link-style
   button that POSTs back to /queue/other-options. */
.prompt-form {
  margin: 1rem 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.prompt-form textarea {
  width: 100%;
  min-height: 110px;
  padding: 0.5rem;
  border: 1px solid var(--lic-gray-mid);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
.prompt-nevermind-form { margin: 0; }

/* Canonical 7 (muted italic): Open Sans (inherited), 1rem, gray #888,
   weight 400, italic. For secondary / subdued informational text on the
   prompt page — e.g., "Your selection won't be recorded in DPO until you
   fill in the text box below." Canonical 7 is currently spread across
   five rules (.empty, .queue-item .action-label, .queue-item .thank-for-header,
   .prompt-hint, footer) — a future cleanup could merge them into one rule. */
.prompt-hint {
  color: #888;
  font-style: italic;
  font-size: 1rem;
}

/* Tab-nav simplification for narrowish viewports (portrait tablets, phone
   landscape). The curved pseudo-element wings need ~6rem of gap to look
   right, which the viewport can't spare below ~1000px — the tabs wrap and
   the active tab visually disconnects from the folder. Drop the wings and
   shrink the gap so the three tabs sit as simple pill tabs in one row.
   The view toggle and other elements stay desktop-style at this size —
   they only flip to full-stack mobile mode below 600px. */
@media (max-width: 900px) {
  .tab-nav { gap: 0.5rem; padding: 0 0.25rem; }
  .tab-nav .tab::before,
  .tab-nav .tab::after { display: none; }
  .tab-nav .tab {
    padding: 0.5rem 0.8rem;
    border-radius: 6px 6px 0 0;
    border-left: 1px solid var(--lic-gray-mid);
    border-right: 1px solid var(--lic-gray-mid);
  }
  .tab-nav .tab.active {
    border-left-color: var(--lic-gold);
    border-right-color: var(--lic-gold);
  }
}

/* Mobile polish. Triggers at phone widths (≤ 600px). The big shifts: the
   My/Team segmented control stacks vertically because the two 2rem
   Times-New-Roman pills don't fit side-by-side; the section tab nav
   stacks as full-width pills (the desktop folder-tab metaphor breaks
   when there isn't room for tabs in one horizontal row); outer paddings
   tighten so queue items get more of the screen. The nine canonical
   text styles are preserved — no font sizes change here. */
@media (max-width: 600px) {
  .lic-header { padding: 0.85rem 1rem; }
  .lic-header-inner { gap: 0.5rem 1rem; }
  main { padding: 0 0.75rem; margin: 1rem auto 2rem; }

  .view-toggle {
    flex-direction: column;
    width: 100%;
    margin: 1rem 0 1.25rem;
    border-radius: 14px;
  }
  .view-toggle a { text-align: center; padding: 0.5rem 1rem; }

  .tab-nav {
    flex-direction: column;
    gap: 0.35rem;
    padding: 0;
    margin-bottom: 0.6rem;
  }
  .tab-nav .tab {
    display: block;
    text-align: center;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--lic-gray-mid);
    border-radius: 6px;
  }
  .tab-nav .tab.active { border-color: var(--lic-gold); }

  .queue-folder { padding: 1rem 0.65rem 0; }
  .queue-item { padding: 0.85rem 0.9rem; margin-bottom: 1rem; }

  /* Long URLs / addresses in narrative blocks shouldn't push the card wider
     than its container. anywhere is what we want; break-word is the fallback
     for browsers that don't support it. */
  .queue-item .narrative,
  .queue-item .thank-item-note,
  .queue-item .contact-info,
  .queue-item .mailing-address {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .thanked-card { padding: 1.25rem 1rem 1.5rem; }
  .login-container { padding: 1.5rem 1.25rem; margin: 2rem auto; }
}

/* ----- Admin pages -----
   Used by /admin/users (list), /admin/users/new and /admin/users/{id}/edit
   (form, shared template), and /admin/users/{id}/delete (confirm). Visible
   only to admins via the "Admin" link in the header; non-admins get a 403.
   All new text inside the admin pages reuses the nine canonical text styles
   defined above — no tenth style introduced. */

/* Heading catch-all: pins every <h2>–<h6> on the site to canonical 3
   (medium-large bold sans-serif black, weight 700, 1.25rem). Without
   this, a bare <h2> falls back to the browser default (1.5em, weight
   700, slightly different sizing) — off-canon. Smaller heading levels
   (h3–h6) have even more divergent defaults. Joining them all to one
   rule means every heading below h1 renders identically; the semantic
   heading level stays in place for accessibility / screen readers, but
   visually the site uses only two heading scales (canonical 1 for h1,
   canonical 3 for h2–h6). Analogous to the `strong { font-weight: 600 }`
   catch-all higher up. */
h2, h3, h4, h5, h6 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
}

/* ----- HTML element catch-alls for the nine-canonicals rule -----
   Each rule below pins a browser-default-styled HTML element back to one
   of the nine canonicals (or strips its default so it falls back to the
   body baseline canonical 5). The semantic markup stays in place for
   screen readers; only the visual default goes away. Future programmers
   reaching for any of these tags get canonical-compliant rendering
   automatically. To get intentional bold / italic / monospace / etc.,
   use a class tied to the correct canonical (e.g., .form-hint or .empty
   for canonical-7 muted italic). See the "Canonical text styles" section
   of this folder's CLAUDE.md for the full list. Joins the existing
   strong / code / h2-h6 / th catch-alls above. */

/* Pin <b> to canonical 2 (weight 600), matching <strong>. */
b {
  font-weight: 600;
}

/* Strip browser-default italic from inline emphasis and semantic-italic
   tags. Canonical 7 (muted italic) is gray + italic; black italic isn't
   a canonical, so bare <em>/<i>/etc. would be off-canon. For italic, use
   a class tied to canonical 7 (.form-hint, .empty, .prompt-hint, etc.). */
em, i, cite, address, dfn, var {
  font-style: normal;
}

/* Pin monospace-by-default tags to the surrounding font, matching the
   <code> catch-all higher up. */
pre, kbd, samp, var {
  font-family: inherit;
}

/* Pin <small> to inherit font-size so it stays at the surrounding
   canonical's size instead of shrinking. */
small {
  font-size: inherit;
}

/* Strip browser-default underline / strikethrough from these inline
   tags. The <a> rule explicitly sets text-decoration: underline on
   links, so links remain underlined; these rules only affect the
   stripped tags themselves. */
u, ins, s, strike, del {
  text-decoration: none;
}

/* Strip browser-default yellow highlight from <mark> so it falls back
   to surrounding body text instead of standing out as off-canon. */
mark {
  background-color: transparent;
  color: inherit;
}

/* Pin <caption> to body left-alignment instead of the browser-default
   center. <th> alignment is already overridden inside
   .admin-users-table th, but <caption> would otherwise center. */
caption {
  text-align: left;
}

/* Joins canonical 7 (muted italic, gray #888, italic, 1rem). Used inline
   inside form labels (e.g., "(leave blank to keep current)") and as
   block-level hint paragraphs below form fields. Canonical 7 lives across
   several rules — see the older comment near .prompt-hint. */
.form-hint {
  color: #888;
  font-style: italic;
  font-size: 1rem;
}

/* "Admin" link in the header, sitting next to the user's name on the dark
   header bar. Inherits canonical 8 (default gold underlined link) from the
   bare <a> rule; this class only exists so we can pad the click target
   slightly and keep it identifiable for future tweaks. */
.header-link {
  padding: 0 0.25rem;
}

.admin-toolbar { margin: 1rem 0 1.5rem; }

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.admin-users-table th,
.admin-users-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--lic-gray-mid);
}
.admin-users-table thead th {
  background: var(--lic-gold);
  color: var(--lic-black);
  border-bottom: 2px solid var(--lic-gold);
}
.admin-users-table tbody tr:nth-child(even) td {
  background: var(--lic-gray-light);
}

.admin-user-form { max-width: 640px; }
.admin-user-form .form-field { margin: 0.9rem 0; }
.admin-user-form label {
  display: block;
  margin-bottom: 0.3rem;
}
.admin-user-form input[type="text"],
.admin-user-form input[type="password"],
.admin-user-form select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--lic-gray-mid);
  border-radius: 4px;
  font-size: 1rem;
}
.admin-user-form select[disabled] {
  background: var(--lic-gray-light);
  color: #555;
}
.admin-user-form .form-hint { margin-top: 0.2rem; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

/* Anchor tag styled to look like a canonical-2 primary button (gold pill,
   black text, weight 600 — joined into canonical 2's selector list above).
   Used for the "+ New user" entry point on the admin users list page. */
.primary-link {
  display: inline-block;
  background: var(--lic-gold);
  color: var(--lic-black);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
}
.primary-link:hover { background: var(--lic-gold-dark); }

.cancel-link { /* canonical 8 (default gold underlined link); no overrides */ }