/* Choir Commons.

   Most members here use a screen reader, so the rules that shaped this file
   are not negotiable:

     - Nothing carries meaning by colour alone. Task status is a word inside
       the chip, the flash message starts with "Done" or "Problem", and the
       per-page accent colours are decoration over a heading that already
       says what the page is.
     - Text keeps a strong contrast ratio in both themes.
     - The focus ring is loud on purpose and is never removed.
     - No animation beyond a hover tint, and none at all when the reader has
       asked for reduced motion.

   Everything below is presentation. Turn the stylesheet off and every page
   still reads in the right order with the right headings. */

:root {
  color-scheme: light dark;

  --ink: #15171c;
  --muted: #545b68;
  --paper: #eef0f6;
  --card: #ffffff;
  --panel: #f6f7fb;
  --line: #d9dde6;
  --link: #1d4ed8;

  --brand: #3730a3;
  --brand-2: #0f766e;

  /* The header band and the text on it. Kept separate from --accent because
     --accent flips light in dark mode (it is used as text there) while the
     band must stay dark under white lettering. */
  --band-1: #3730a3;
  --band-2: #0f766e;
  --on-band: #ffffff;

  --accent: var(--brand);
  /* Text that sits ON an accent-coloured fill, such as a button face. */
  --on-accent: #ffffff;

  --ok-bg: #e7f4e9;
  --ok-line: #1f6b32;
  --ok-ink: #14532d;
  --bad-bg: #fdecea;
  --bad-line: #a32718;
  --bad-ink: #7f1d1d;
  --warn-bg: #fdf2e0;
  --warn-line: #a25a06;
  --warn-ink: #7c3d00;
  --info-bg: #e8effc;
  --info-line: #1d4ed8;
  --info-ink: #1e3a8a;

  --focus: #c2410c;
  --shadow: 0 1px 2px rgba(20, 23, 30, .07), 0 6px 18px rgba(20, 23, 30, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceff5;
    --muted: #a6aebc;
    --paper: #0e1014;
    --card: #191c23;
    --panel: #21252e;
    --line: #333a46;
    --link: #9cbcff;

    --brand: #8f8bf0;
    --brand-2: #4cbdb1;

    --band-1: #221d5c;
    --band-2: #0b3f3c;
    --on-band: #ffffff;

    /* In dark mode --accent is a light colour, so anything filled with it
       needs dark lettering, not white. */
    --on-accent: #10131a;

    --ok-bg: #15301c;
    --ok-line: #4f9e63;
    --ok-ink: #b6e5c1;
    --bad-bg: #331614;
    --bad-line: #d4705f;
    --bad-ink: #f6bcb2;
    --warn-bg: #33260f;
    --warn-line: #c99442;
    --warn-ink: #f0d5a6;
    --info-bg: #172341;
    --info-line: #7ba1f0;
    --info-ink: #c3d6fb;

    --focus: #ffa14f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .4);
  }
}

/* Per-page accent. Decoration only: it tints the header band, the rule under
   the page title and the edge of each panel. The heading text is what
   actually tells you where you are. */
body.area-home         { --accent: #3730a3; }
body.area-new          { --accent: #7b2d8f; }
body.area-announcements{ --accent: #a25a06; }
body.area-projects     { --accent: #0f766e; }
body.area-tasks        { --accent: #6d28d9; }
body.area-feedback     { --accent: #b0173c; }
body.area-access       { --accent: #0369a1; }
body.area-manage       { --accent: #334155; }

@media (prefers-color-scheme: dark) {
  body.area-home         { --accent: #8f8bf0; }
  body.area-new          { --accent: #d59ce8; }
  body.area-announcements{ --accent: #dda255; }
  body.area-projects     { --accent: #4cbdb1; }
  body.area-tasks        { --accent: #a98bf5; }
  body.area-feedback     { --accent: #ef7d9c; }
  body.area-access       { --accent: #74b3e8; }
  body.area-manage       { --accent: #9fb0c6; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.05rem/1.65 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

a { color: var(--link); }
a:hover { text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: static;
  display: inline-block;
  margin: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  font-weight: 700;
}

/* ---------- the header band ---------- */

header {
  background: linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 100%);
  color: var(--on-band);
  border-bottom: 4px solid var(--accent);
}
header .wrap { padding-bottom: 0.4rem; }

.brand {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.brand a { color: var(--on-band); text-decoration: none; }
.brand a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

.tagline {
  margin: 0.1rem 0 0.85rem;
  color: var(--on-band);
  opacity: 0.88;
  font-size: 0.98rem;
}

/* Nav as tabs. The current page is marked by weight and a solid pill as well
   as colour, and it already carries aria-current for the screen reader. */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.nav-list a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px 999px 0 0;
  color: var(--on-band);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid transparent;
  border-bottom: none;
}
.nav-list a:hover {
  background: rgba(255, 255, 255, .18);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.nav-list a[aria-current="page"] {
  background: var(--card);
  color: var(--accent);
  font-weight: 800;
}

/* ---------- the content panel ---------- */

main {
  max-width: 52rem;
  margin: 1.5rem auto 2rem;
  padding: 1.4rem 1.6rem 1.8rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* The sign-in screens are a single narrow card, so the header band's contents
   line up with it instead of floating off to the left. */
body.bare main { max-width: 34rem; margin-top: 2.5rem; }
body.bare header .wrap,
body.bare footer .wrap { max-width: 34rem; }

h1 {
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0.2rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--accent);
}

h2 {
  font-size: 1.28rem;
  line-height: 1.3;
  margin: 1.8rem 0 0.6rem;
}

h3 { font-size: 1.08rem; margin: 1.3rem 0 0.4rem; }

p { margin: 0 0 0.9rem; }

/* ---------- panels inside the content area ---------- */

main > section,
.task,
.announcement,
.reply,
.admin-row,
.welcome {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  padding: 0.2rem 1.1rem 0.9rem;
  margin: 0 0 1.15rem;
}

main > section > h2:first-child,
.welcome > h2:first-child { margin-top: 0.9rem; }

.task > h3:first-child,
.announcement > h2:first-child,
.reply > h3:first-child,
.admin-row > h3:first-child { margin-top: 0.9rem; }

.task > *:last-child,
.announcement > *:last-child,
.reply > *:last-child,
.welcome > *:last-child,
main > section > *:last-child { margin-bottom: 0.4rem; }

.welcome { border-left-width: 8px; }
.welcome li { margin-bottom: 0.5rem; }
.hint,
.welcome .hint { display: block; color: var(--muted); font-size: 0.95rem; }

/* A reply sits inside the announcement it answers, so it is indented and
   quieter than the thing it is replying to. */
.reply {
  margin-left: 1.2rem;
  background: var(--card);
  border-left-width: 4px;
}
.reply h3 { font-size: 1.05rem; }

/* The line on the home page pointing at what has changed. It is a link with
   a count in words, not a red dot: a dot says nothing out loud. */
.fresh {
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-left: 6px solid var(--info-line);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  color: var(--info-ink);
  font-weight: 500;
}
.fresh a { color: inherit; }

/* What has changed, one line each. */
ul.activity { padding-left: 1.15rem; }
ul.activity li { margin-bottom: 0.7rem; }

/* ---------- the flash message ---------- */

/* Colour is the smaller half of the signal. The word "Done" or "Problem" in
   front of the text is the real one. */
.flash {
  border: 1px solid;
  border-left-width: 6px;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin: 0 0 1.2rem;
  font-weight: 500;
}
.flash p { margin: 0; }
.flash-ok    { background: var(--ok-bg);  border-color: var(--ok-line);  color: var(--ok-ink); }
.flash-error { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.flash-ok a, .flash-error a { color: inherit; }

/* ---------- chips ---------- */

/* The status word lives inside the chip, so this survives styles being off
   and never asks anybody to tell green from amber. */
.pill {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border: 1.5px solid;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill-not-started { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pill-in-progress { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.pill-completed   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok-ink); }
.pill-kind        { background: var(--card);    border-color: var(--line);      color: var(--muted); }

/* ---------- lists ---------- */

ul.name-list, ul.events, ul.tasks, ul.cards { padding-left: 1.15rem; }
ul.events li, ul.tasks li { margin-bottom: 0.8rem; }

ul.name-list { list-style: none; padding-left: 0; }
ul.name-list li { margin-bottom: 0.5rem; }
ul.name-list a {
  display: block;
  padding: 0.65rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}
ul.name-list a:hover { background: var(--card); text-decoration: underline; }

ul.cards { list-style: none; padding-left: 0; }
ul.cards > li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  padding: 0.2rem 1.1rem 0.8rem;
  margin-bottom: 1.1rem;
}
ul.cards h2 { margin-top: 0.9rem; }

/* The roster. One row per person, the name a link to their own page, so the
   list stays short enough to walk by ear. */
ul.roster { list-style: none; padding-left: 0; }
ul.roster > li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  margin-bottom: 0.7rem;
}
ul.roster > li > a { font-weight: 600; }

/* ---------- forms ---------- */

.field { margin: 0 0 1.15rem; }
.field label { display: block; font-weight: 700; }
.field .req { font-weight: 400; color: var(--muted); }
.field input[type="text"],
.field input[type="password"],
.field select,
.field textarea {
  width: 100%;
  max-width: 34rem;
  margin-top: 0.35rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field-check { display: flex; gap: 0.55rem; align-items: flex-start; }
.field-check label { font-weight: 400; }

fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem 1rem;
  background: var(--card);
}
legend { font-weight: 700; padding: 0 0.4rem; }
.radio { display: inline-flex; gap: 0.4rem; margin: 0.2rem 1.2rem 0.2rem 0; }

button {
  font: inherit;
  font-weight: 700;
  padding: 0.6rem 1.15rem;
  color: var(--on-accent);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
button:hover { filter: brightness(1.12); }
button:active { filter: brightness(0.94); }

form.inline { display: inline; }
form.inline button {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  margin: 0.2rem 0.4rem 0.2rem 0;
}
form.inline button:hover { background: var(--panel); filter: none; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 0.96rem;
}
footer p { margin: 0 0 0.5rem; }
.who {
  padding: 0.6rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  margin-bottom: 0.9rem;
  color: var(--ink);
}
.who p { margin: 0; }

pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
}

@media (max-width: 34rem) {
  main { margin: 0.9rem 0.6rem 1.4rem; padding: 1rem 1rem 1.3rem; border-radius: 12px; }
  h1 { font-size: 1.55rem; }
  .nav-list a { padding: 0.35rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- the help disclosure ---------- */

/* The long version of anything, folded away. Plain HTML, no JavaScript. The
   summary is a real control, so it takes the same loud focus ring as
   everything else and is reached by keyboard in the ordinary way. */
.help {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 1.2rem;
}
.help > summary {
  cursor: pointer;
  padding: 0.65rem 1rem;
  font-weight: 600;
  color: var(--link);
  border-radius: 10px;
}
.help > summary:hover { background: var(--card); }
.help[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.help-body { padding: 0.2rem 1rem 0.6rem; }
.help-body p:last-child { margin-bottom: 0.6rem; }