/* Sierra — the standalone public page, in the public library's look (Sam,
   2026-10-24: "align her format with the new library look while preserving her
   basics", then "White background for her as well"; the mock-up is
   prototype/sierra_library_look_mockup.html). The paintings of the 2026-10-08
   redesign are gone.

   Two views on one page, keyed on <body data-view>:
     arriving — the greeting over a gold rule, the question box and a few
                starter questions, on a white page.
     asking   — the greeting folds away; the conversation takes a centered column
                and the question box docks beneath it.
   No header row (Sam, 2026-10-27): the logo, About Sierra, Light and Dark sit in
   the footer. In the Ask Sierra side bar (<html data-panel>, from sidebar.js's
   ?panel=1) the footer is plain text: the mark and the beta note.

   Self-contained: the page loads no COBI file and no web font. Its tokens carry
   the library's values (library/index.html) under Sierra's own names, and every
   hex lives in a :root block.

   Theme: the cpl_theme.js contract. No data-theme follows the OS; data-theme
   "light" or "dark" (set in <head> from ?theme=, then the reader's stored
   choice) wins. Each dark value is written twice, under the media query and
   under the explicit attribute, so an explicit choice beats the OS in both
   directions. Dark paper is the library's dark surface, so in the side bar she
   meets the bar's own color. */

:root {
  --sierra-paper: #FFFFFF;        /* Sam: "White background for her as well" */
  --sierra-ink: #17243B;          /* the library's ink, 15.4:1 on white */
  --sierra-body: #17243B;
  --sierra-muted: #58677D;        /* 5.8:1 */
  /* The beta note and the side bar's footer: the sentences telling a reader to
     confirm with the coordinator and to leave personal information out. At 13-15px
     there is no large-text exemption, so this is the library's muted text. */
  --sierra-faint: #58677D;
  --sierra-surface: #FFFFFF;
  --sierra-subtle: #F5FAFF;       /* the library's page: the About panel, zebra rows */
  --sierra-tint: #EAF4FE;         /* the library's pill: the question line, table heads */
  --sierra-border: #D9E4EF;
  --sierra-border-strong: #A9C8E5;
  --sierra-field: #6F8399;        /* the question box's edge, 3.9:1 */
  --sierra-cobalt: #0D5BC6;       /* interactive, links, focus: 6.2:1 */
  --sierra-on-cobalt: #FFFFFF;
  --sierra-heading: #082B61;      /* labels, the pick, Ask's fill */
  --sierra-on-heading: #FFFFFF;
  --sierra-title: #072C66;        /* the greeting */
  --sierra-gold: #F4B300;         /* the rule under the greeting, as under the library's title */
  --sierra-crimson: #920000;      /* the one state a reader must act on */
  --sierra-shadow: 0 12px 24px rgba(8, 43, 97, .10);
  --sierra-navy: #002F6D;         /* seal blue: the Whitney roundel beside each answer */
  /* Sierra's name and its mountain line: the library title's navy. */
  --sierra-ghost: #072C66;
  --sierra-foot-bg: #082B61;      /* the library's navy band */
  --sierra-foot-fg: #DCE9F7;      /* 11.6:1 on the band */
  --sierra-fade-mid: #F5FAFF;     /* the library's fade: white, then its page, then its page end */
  --sierra-fade-end: #EEF6FB;
  --sierra-display: Georgia, 'Times New Roman', serif;
  --sierra-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] {
  --sierra-paper: #12233D; --sierra-ink: #E3EAF4; --sierra-body: #E3EAF4;
  --sierra-muted: #A9B7CA; --sierra-faint: #A9B7CA;
  --sierra-surface: #12233D; --sierra-subtle: #0E1D33; --sierra-tint: #1B3356;
  --sierra-border: #2A3E5C; --sierra-border-strong: #4B6B95; --sierra-field: #7F95B3;
  --sierra-cobalt: #8DBDF5; --sierra-on-cobalt: #0B1628;
  --sierra-heading: #D5E3F7; --sierra-on-heading: #0B1628; --sierra-title: #E8F0FB;
  --sierra-gold: #F2B527; --sierra-crimson: #F0A0A0;
  --sierra-shadow: 0 12px 24px rgba(0, 0, 0, .35);
  --sierra-ghost: #E8F0FB;
  --sierra-foot-bg: #06111F; --sierra-foot-fg: #C9D7EA;
  --sierra-fade-mid: #0B1628; --sierra-fade-end: #0E1D33;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The docked bar sits over the bottom of the page while reading; this keeps a
   control that takes focus (Copy, a rating, a link in an answer) clear of it
   (WCAG 2.4.11, focus not obscured). */
html { scroll-padding-bottom: 12.5rem; }
body {
  margin: 0; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-family: var(--sierra-font); font-size: 16px; line-height: 1.55;
  color: var(--sierra-body); background: var(--sierra-paper);
}
/* Her landing takes the library's fade (Sam, 2026-10-24: "Fades white to pale blue
   looks good too"); the conversation and the side bar read on white, so the docked
   box and the bar's own white never sit as patches on blue. */
:root:not([data-panel]) body[data-view="arriving"] {
  background-image: linear-gradient(180deg, var(--sierra-paper) 0, var(--sierra-fade-mid) 38rem, var(--sierra-fade-end) 100%);
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sierra-cobalt); outline-offset: 2px; }

/* Visually hidden, still announced. Carries the "(opens in a new tab)" cue —
   clipped rather than display:none, because display:none and visibility:hidden
   both remove an element from the accessibility tree, which would drop the
   warning instead of relocating it. */
.s-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Skip link — off-screen until focused. */
.s-skip {
  position: absolute; left: 8px; top: -60px; z-index: 20;
  background: var(--sierra-surface); color: var(--sierra-cobalt);
  border: 2px solid var(--sierra-cobalt); border-radius: 8px;
  padding: 9px 14px; font: 600 .9rem var(--sierra-font); text-decoration: none;
  transition: top .12s ease-in;
}
.s-skip:focus { top: 8px; }

/* ── The page ── */
.s-main {
  flex: 1; width: 100%; min-height: 0;
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(24px, 5vw, 48px) 16px 8px;
}
.s-hello, .s-frame, .s-try { width: 100%; max-width: 46rem; margin: 0 auto; }

/* Sierra's name and her logo, one navy (the library title's). The logo is
   decorative to a screen reader; the name is text. The ridge sits above the
   word (Sam, 2026-10-08: "Keep the ridgeline mostly above Sierra"), clear of
   every letter, so the word needs no halo and no lowered dot. */
.s-peak { position: relative; display: inline-block; padding-top: .44em; color: var(--sierra-ghost); white-space: nowrap; }
.s-ridge {
  position: absolute; pointer-events: none;
  left: -2%; top: 0; width: 104%; height: .5em;
  color: inherit;
}

/* Arriving: the greeting over a gold rule, left-aligned in the column. */
.s-hello { display: grid; gap: 12px; }
.s-hello h1 {
  margin: 0; font-family: var(--sierra-display); font-weight: 700;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em;
  color: var(--sierra-title); text-wrap: balance;
}
.s-hello p { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--sierra-muted); text-wrap: balance; }
.s-rule { width: 66px; height: 4px; background: var(--sierra-gold); }

/* The question box: a bordered field and Ask. Arriving it sits under the
   greeting; asking it docks. One form. */
/* minmax(0, 1fr), not the implicit auto track: an auto track takes the input's
   intrinsic width (its size attribute, ~200px at this font) as a floor, and at
   320px that floor pushed the bar 15px past the edge. */
.s-form { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.s-ask { display: flex; gap: 10px; align-items: flex-end; }
.s-input {
  /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so the
     input refused to shrink below its intrinsic width and pushed the button past
     the edge: the page scrolled sideways by 19px at 320px. */
  flex: 1; min-width: 0; min-height: 50px; padding: 12px 14px; display: block;
  border: 1px solid var(--sierra-field); border-radius: 9px; background: var(--sierra-surface); color: var(--sierra-ink);
  font: inherit; font-size: 1.0625rem; line-height: 1.45;
  resize: none; overflow-y: hidden;
}
.s-input::placeholder { color: var(--sierra-muted); opacity: 1; }
.s-input:focus-visible { outline: 2px solid var(--sierra-cobalt); outline-offset: 2px; }
.s-send {
  flex: 0 0 auto; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 1rem var(--sierra-font); color: var(--sierra-on-heading); background: var(--sierra-heading);
}
.s-send:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-send:disabled { opacity: .6; cursor: default; text-decoration: none; }

.s-status { font-size: .875rem; color: var(--sierra-muted); }
.s-status:empty { display: none; }
.s-status.s-error { color: var(--sierra-crimson); font-weight: 600; }

/* Arriving: starter questions where the paintings were, as words. The links and
   starters read in regular weight (Sam, 2026-10-25). */
.s-try { display: grid; gap: 4px; }
.s-try-label { margin: 0; font: 700 .875rem var(--sierra-font); color: var(--sierra-heading); }
.s-try-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.s-try-q {
  background: none; border: 0; padding: 4px 2px; min-height: 32px; cursor: pointer; text-align: left;
  font: 400 1rem var(--sierra-font); color: var(--sierra-cobalt);
  text-decoration: underline; text-underline-offset: 3px;
}
.s-try-q:hover { text-decoration-thickness: 2px; }
.s-word {
  background: none; border: 0; padding: 8px 4px; min-height: 40px; cursor: pointer;
  font: 400 1rem var(--sierra-font); color: var(--sierra-cobalt);
  text-decoration: underline; text-underline-offset: 3px;
}
.s-word:hover { text-decoration-thickness: 2px; }

/* The views. The greeting stays in the accessibility tree while reading, so the
   page keeps its h1; it is clipped the way .s-sr is, never display:none. */
body[data-view="asking"] .s-try { display: none; }
body[data-view="asking"] .s-hello {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body[data-view="arriving"] .s-log, body[data-view="arriving"] .s-dock { display: none; }
/* ── Asking: the conversation, a centered column ── */
.s-log {
  width: 100%; max-width: 46rem; margin: 0 auto; padding-top: 4px;
  display: flex; flex-direction: column; gap: 24px;
}
.s-msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.s-user { align-items: flex-end; }
.s-who {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sierra-display); font-weight: 700; font-size: 1.05rem; color: var(--sierra-heading);
}
/* The Whitney roundel the COBI tab and the Fact Sheet drawer draw beside each
   answer (SIERRA_MARK), sized to the name it sits beside. */
.s-mark { flex: 0 0 auto; width: 24px; height: 24px; }
.s-mark svg { width: 100%; height: 100%; display: block; }
.s-bubble { font-size: 1.0625rem; line-height: 1.65; color: var(--sierra-body); overflow-wrap: anywhere; max-width: 100%; }
.s-user .s-bubble {
  max-width: 85%; padding: 10px 16px; border-radius: 11px;
  background: var(--sierra-tint); color: var(--sierra-ink); line-height: 1.5;
}
.s-bubble p { margin: 0 0 12px; } .s-bubble p:last-child { margin-bottom: 0; }
.s-bubble ul, .s-bubble ol { margin: 4px 0 12px; padding-left: 22px; } .s-bubble li { margin: 3px 0; }
.s-bubble a { color: var(--sierra-cobalt); }
.s-bubble code { background: var(--sierra-tint); padding: 1px 5px; border-radius: 5px; font-size: .9em; }
.s-bubble h3, .s-bubble h4, .s-bubble h5 { margin: 16px 0 6px; line-height: 1.3; color: var(--sierra-heading); font-family: var(--sierra-display); }
.s-bubble h3 { font-size: 1.12rem; } .s-bubble h4 { font-size: 1.02rem; } .s-bubble h5 { font-size: .95rem; }
.s-bubble h3:first-child, .s-bubble h4:first-child, .s-bubble h5:first-child { margin-top: 2px; }
.s-bubble hr { border: none; border-top: 1px solid var(--sierra-border); margin: 14px 0; }
.s-bubble table { border-collapse: collapse; margin: 8px 0 12px; font-size: .92em; display: block; max-width: 100%; overflow-x: auto; }
.s-bubble th, .s-bubble td { border: 1px solid var(--sierra-border); padding: 5px 10px; text-align: left; vertical-align: top; }
.s-bubble th { background: var(--sierra-tint); color: var(--sierra-heading); font-weight: 700; }
.s-bubble tbody tr:nth-child(even) { background: var(--sierra-subtle); }
.s-typing { letter-spacing: 3px; color: var(--sierra-muted); animation: s-pulse 1.1s infinite; }
@keyframes s-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* A scroll container is reachable by keyboard ONLY if it is focusable (WCAG
   2.1.1). sierra.js makes the log and a wide answer table focusable exactly
   while they overflow. The dotted rule is the only visual sign a table continues
   past its edge. */
.s-log[tabindex] { outline-offset: -2px; }
.s-scrollx { overflow-x: auto; }
.s-scrollx[tabindex] { border-left: 2px dotted var(--sierra-border-strong); }

/* ── Per-answer feedback (Helpful / Not helpful + note) and Copy ── */
.s-fb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  margin-top: -12px; font-size: .8125rem; color: var(--sierra-faint);
}
/* The rating and Copy controls are underlined words (First Light's Controls
   rule, 2026-10-09; the same words My College's Sierra carries in cpl_chat.js).
   A <button> does not inherit font-family or color from the page, so both are
   spelled out; nowrap keeps "Not helpful" on one line while the row wraps. The
   pick reads by weight beside aria-pressed, never color alone. */
.s-fb-btn {
  border: 0; background: none; border-radius: 0; padding: 2px 0; min-height: 24px; cursor: pointer;
  font-size: .8125rem; line-height: 1.4; color: inherit;
  font-family: inherit; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.s-fb-btn:hover { color: var(--sierra-ink); text-decoration-thickness: 2px; }
.s-fb-btn.on { color: var(--sierra-ink); font-weight: 700; }
/* Copy shares the word form but NOT the .s-fb-btn class: that class means "a
   rating button" to the code (btns.up/btns.down) and to the tests, which assert
   exactly two of them. */
.s-fb-copy {
  border: 0; background: none; border-radius: 0; padding: 2px 0; min-height: 24px; cursor: pointer;
  font-size: .8125rem; line-height: 1.4; color: inherit;
  font-family: inherit; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.s-fb-copy:hover { color: var(--sierra-ink); text-decoration-thickness: 2px; }
.s-fb-copy.on { color: var(--sierra-ink); font-weight: 700; }
/* An author `display` rule beats the UA stylesheet's [hidden], so the note
   composer needs this companion (the 2026-08-14 root defect). */
.s-fb-note { display: flex; flex: 1 1 100%; gap: 6px; margin-top: 4px; }
.s-fb-note[hidden] { display: none; }
.s-fb-note input {
  flex: 1; min-width: 0; min-height: 36px;
  border: 1px solid var(--sierra-field); border-radius: 8px;
  padding: 6px 10px; font: .875rem var(--sierra-font);
  background: var(--sierra-surface); color: var(--sierra-ink);
}
.s-fb-note button {
  border: 0; background: none; border-radius: 0; padding: 2px 4px; min-height: 36px; cursor: pointer;
  color: var(--sierra-cobalt); font: 600 .875rem var(--sierra-font);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.s-fb-note button:hover { text-decoration-thickness: 2px; }
.s-fb-note button:disabled { opacity: .6; cursor: default; text-decoration: none; }
.s-fb-done { color: var(--sierra-muted); font-weight: 600; }
.s-fb-sending { color: var(--sierra-faint); font-weight: 600; }
.s-fb-fail { color: var(--sierra-crimson); font-weight: 600; }

/* The docked box: sticky at the foot of the column while reading. */
.s-dock {
  position: sticky; bottom: 0; z-index: 2;
  width: 100%; max-width: 46rem; margin: 0 auto; padding: 14px 0 10px;
  background: linear-gradient(transparent, var(--sierra-paper) 22%);
}
/* The row and the docked form sit where the gradient is already solid paper;
   their own paper background makes that true for anything that reads the color
   under the words. */
.s-dock .s-form { background: var(--sierra-paper); }
.s-dock-row { display: flex; justify-content: flex-end; padding: 2px 4px 0; background: var(--sierra-paper); }

/* ── Footer: the mark (the link to MAP), the beta note, the links out, About
   Sierra, Light and Dark. On her own page, the library's navy band; in the side
   bar, plain text, the links and controls left to the page beside her. */
.s-foot { margin-top: 18px; font-size: .875rem; color: var(--sierra-faint); }
.s-foot-in { max-width: 1180px; margin: 0 auto; padding: 18px 16px 22px; display: grid; gap: 10px; }
.s-foot p { margin: 0; }
.s-foot a { color: var(--sierra-cobalt); }
.s-home { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; border-radius: 4px; }
.s-home:hover { opacity: .85; }
.s-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.s-links ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.s-links a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 400; text-underline-offset: 3px; }
/* About Sierra, Light and Dark: words like every control on the page, at the
   links' size and on their row, set to its right where the row has room. A
   <button> inherits neither font nor color, so both are spelled out. */
.s-foot-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-left: auto; }
.s-about {
  background: none; border: 0; padding: 0; min-height: 24px; cursor: pointer; white-space: nowrap;
  font: 400 .875rem var(--sierra-font); color: var(--sierra-foot-fg);
  text-decoration: underline; text-underline-offset: 3px;
}
.s-about:hover, .s-about[aria-expanded="true"] { text-decoration-thickness: 2px; }
.s-theme { display: flex; gap: 12px; }
.s-theme-btn {
  background: none; border: 0; padding: 0 2px; min-height: 24px; min-width: 24px; cursor: pointer; white-space: nowrap;
  font: 400 .875rem var(--sierra-font); color: var(--sierra-foot-fg);
  text-decoration: underline; text-underline-offset: 3px;
}
/* The pick is bold with a heavier rule, so color is never the only signal. */
.s-theme-btn[aria-pressed="true"] { font-weight: 700; text-decoration-thickness: 2px; }
/* Her introduction opens under the row as footer text. The [hidden] companion is
   deliberate: an author `display` would otherwise beat the UA's [hidden] (the
   2026-08-14 lesson on .s-fb-note). */
.s-about-panel { display: block; max-width: 46rem; }
.s-about-panel[hidden] { display: none; }
:root:not([data-panel]) .s-foot { background: var(--sierra-foot-bg); color: var(--sierra-foot-fg); }
:root:not([data-panel]) .s-foot a { color: var(--sierra-foot-fg); }
:root:not([data-panel]) .s-foot :focus-visible { outline-color: var(--sierra-foot-fg); }
/* The CPL Initiative mark: white on the band in both themes; in the side bar,
   navy on paper, white on the dark paper. */
.s-foot-logo { height: 30px; width: auto; display: none; }
:root:not([data-panel]) .s-foot-logo-white, :root[data-panel] .s-foot-logo-navy { display: block; }
:root[data-panel][data-theme="dark"] .s-foot-logo-navy { display: none; }
:root[data-panel][data-theme="dark"] .s-foot-logo-white { display: block; }

/* ── In the side bar ── */
/* The bar names her and the page beside it carries the links; her footer says
   what About Sierra said (Sam, 2026-10-25: "No need for the About Sierra button
   since you include it in the footer"), and the host sets her theme. So the
   footer's row of links and controls stands down whole, the introduction with it. */
:root[data-panel] .s-foot-row, :root[data-panel] .s-about-panel { display: none; }
:root[data-panel] .s-main { padding-top: 4px; }
:root[data-panel] .s-hello h1 { font-size: 1.95rem; }
:root[data-panel] .s-try-list li:nth-child(n+3) { display: none; }
:root[data-panel] .s-foot { border-top: 1px solid var(--sierra-border); margin-inline: 16px; }
:root[data-panel] .s-foot-in { padding-inline: 0; }

/* ── Phone ── */
@media (max-width: 560px) {
  .s-main { gap: 16px; }
  .s-send { padding: 0 18px; }
  .s-user .s-bubble { max-width: 92%; }
}
/* Sierra animates one thing: the typing indicator, infinite while an answer
   streams. Under reduced motion it stands down and the cue is not lost: the
   dots still say "thinking" by being there. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .s-typing { animation: none; opacity: .8; }
}