/* Capital Piecemakers portal — one stylesheet for every page.
   Built for easy reading: large type, strong contrast, big buttons.
   Typefaces are served from this site (assets/fonts), nothing is loaded
   from anywhere else. */

@font-face { font-family: "Zilla Slab"; font-weight: 500; font-display: swap;
  src: url("fonts/zilla-slab-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap;
  src: url("fonts/zilla-slab-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --ink: #16213e;        /* text */
  --blue: #24407a;       /* field blue: links, primary buttons */
  --red: #a3262a;        /* binding red: the current step, warnings that stop */
  --paper: #ffffff;
  --wash: #eef2f8;       /* pale chambray: panels */
  --line: #c3cde0;
  --muted: #4a556e;
  --gold: #8a5a00;       /* needs a look */
  --gold-wash: #fdf3d9;
  --green: #256238;      /* done */
  --green-wash: #e5f2e8;
  --red-wash: #fbe9e9;
  --display: "Zilla Slab", Rockwell, Georgia, serif;
  --body: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.55; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 0.9rem; max-width: 68ch; }
a { color: var(--blue); text-underline-offset: 0.15em; }
small, .small { font-size: 0.88rem; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

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

/* ── Page frame ─────────────────────────────────────────────────────────── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 760px; }

.masthead { background: var(--paper); color: var(--ink); border-bottom: 6px solid var(--red); box-shadow: 0 3px 0 var(--ink); }
.masthead .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.wordmark { display: flex; align-items: center; gap: 1.1rem; line-height: 0; text-decoration: none; }
.wordmark img { height: 78px; width: auto; display: block; }
/* The Quilts of Valor mark sits beside the group's logo on the portal, which is
   Quilts of Valor work (nominations and awards). It must not appear on any page
   that raises funds for Capital Piecemakers, Inc. */
.wordmark img.qov { height: 60px; padding-left: 1.1rem; border-left: 2px solid var(--line); box-sizing: content-box; }
@media (max-width: 640px) { .wordmark { gap: 0.7rem; } .wordmark img { height: 58px; } .wordmark img.qov { height: 44px; padding-left: 0.7rem; } }
.masthead .who { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; font-size: 0.92rem; }
.masthead .who button { min-height: 40px; padding: 0.3rem 0.8rem; }

.tabs { background: var(--wash); border-bottom: 1px solid var(--line); margin-top: 3px; }
.tabs .wrap { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tabs a { display: block; padding: 0.85rem 1rem; color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 5px solid transparent; }
.tabs a:hover { background: #dfe6f2; }
.tabs a[aria-current="page"] { border-bottom-color: var(--red); background: var(--paper); }
.count { display: inline-block; min-width: 1.6em; text-align: center; background: var(--red); color: #fff; border-radius: 1em; padding: 0 0.45em; margin-left: 0.35em; font-size: 0.85rem; }

main { padding: 1.75rem 0 4rem; }
.page-head { margin-bottom: 1.25rem; }
.page-head p { margin-top: 0.4rem; color: var(--muted); }

.site-foot { border-top: 1px solid var(--line); padding: 1.25rem 0 2rem; color: var(--muted); font-size: 0.88rem; }
.site-foot p { margin-bottom: 0.4rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
button, .button { font: inherit; font-weight: 700; cursor: pointer; border-radius: 6px; border: 2px solid var(--blue);
  background: var(--paper); color: var(--blue); min-height: 48px; padding: 0.55rem 1.1rem; text-decoration: none; display: inline-block; }
button:hover, .button:hover { background: var(--wash); }
button.primary { background: var(--blue); color: #fff; }
button.primary:hover { background: #1a3163; }
button.stop { border-color: var(--red); color: var(--red); }
button.stop:hover { background: var(--red-wash); }
button.plain { border-color: transparent; text-decoration: underline; padding-left: 0.2rem; padding-right: 0.2rem; }
button:disabled { opacity: 0.55; cursor: default; }
.actions.spaced { margin-bottom: 2.25rem; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
fieldset { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
legend { font-family: var(--display); font-weight: 700; font-size: 1.45rem; padding: 0 0 0.35rem; margin-bottom: 1rem; border-bottom: 3px solid var(--ink); width: 100%; }
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem 1.1rem; }
.field { grid-column: span 6; min-width: 0; }
.field.half { grid-column: span 3; }
.field.third { grid-column: span 2; }
@media (max-width: 640px) { .field.half, .field.third { grid-column: span 6; } }
label, .label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.req { color: var(--red); }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.9rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], select, textarea {
  font: inherit; color: var(--ink); width: 100%; min-height: 50px; padding: 0.55rem 0.7rem; background: #fff;
  border: 2px solid #6b7890; border-radius: 6px; }
input[type="file"] { font: inherit; width: 100%; padding: 0.6rem; border: 2px dashed #6b7890; border-radius: 6px; background: var(--wash); }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
.check { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; }
.check input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; flex: none; accent-color: var(--blue); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--red); background: var(--red-wash); }
.problem { color: var(--red); font-weight: 700; font-size: 0.92rem; margin-top: 0.3rem; }
.trap { position: absolute; left: -6000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Notices ────────────────────────────────────────────────────────────── */
.notice { border-left: 8px solid var(--blue); background: var(--wash); padding: 0.9rem 1.1rem; margin: 0 0 1.25rem; border-radius: 0 6px 6px 0; }
.notice p:last-child { margin-bottom: 0; }
.notice.warn { border-color: var(--gold); background: var(--gold-wash); }
.notice.stop { border-color: var(--red); background: var(--red-wash); }
.notice.done { border-color: var(--green); background: var(--green-wash); }
.notice h2, .notice h3 { margin-bottom: 0.35rem; }

.flag { display: inline-block; font-size: 0.82rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 4px; border: 2px solid currentColor; margin-right: 0.4rem; white-space: nowrap; }
.flag.warn { color: var(--gold); background: var(--gold-wash); }
.flag.stop { color: var(--red); background: var(--red-wash); }
.flag.test { color: var(--muted); background: var(--wash); }
.flag.done { color: var(--green); background: var(--green-wash); }

/* ── The pieced strip: where a veteran's record stands ──────────────────────
   One patch per stage. Finished stages are pieced (a half-square triangle),
   the current stage is bound in red, stages still ahead are basted outlines. */
.strip { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.strip li { text-align: center; font-size: 0.82rem; font-weight: 700; line-height: 1.2; color: var(--muted); }
.strip .patch { display: block; height: 54px; margin-bottom: 0.4rem; border: 3px dashed var(--line); background: var(--paper); }
.strip li.done { color: var(--ink); }
.strip li.done .patch { border: 3px solid var(--ink); background: linear-gradient(135deg, var(--blue) 50%, var(--ink) 50%); }
.strip li.now { color: var(--red); }
.strip li.now .patch { border: 6px solid var(--red); background: linear-gradient(135deg, #fff 50%, var(--wash) 50%); }
.strip.small { max-width: 300px; margin: 0; gap: 3px; }
.strip.small .patch { height: 16px; margin: 0; border-width: 2px; }
.strip.small li.now .patch { border-width: 3px; }
@media (max-width: 640px) { .strip:not(.small) { grid-template-columns: repeat(4, 1fr); } }

/* ── Lists of veterans ──────────────────────────────────────────────────── */
.rows { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.rows > li { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.5rem; align-items: center; padding: 0.95rem 0.5rem; color: inherit; text-decoration: none; }
a.row:hover { background: var(--wash); }
.row .name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; display: block; }
.row .about { color: var(--muted); display: block; }
.row .side { text-align: right; }
.row .wait { font-weight: 700; display: block; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } .row .side { text-align: left; } }
.empty { padding: 2rem 0.5rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.toolbar .field { flex: 1 1 220px; }

/* ── A record ───────────────────────────────────────────────────────────── */
.record-head { border-bottom: 3px solid var(--ink); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.record-head .ref { color: var(--muted); font-weight: 700; }
.panel { background: var(--wash); border-radius: 6px; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.panel h2 { margin-bottom: 0.5rem; }
.section { margin-bottom: 2rem; }
.section > h2 { border-bottom: 1px solid var(--line); padding-bottom: 0.35rem; margin-bottom: 0.75rem; }
dl.facts { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: 0.5rem; } }
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.log .when { color: var(--muted); font-size: 0.88rem; display: block; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { border-bottom: 3px solid var(--ink); font-size: 0.92rem; }
.table-scroll { overflow-x: auto; }
pre.letter { font-family: var(--body); white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; margin: 0.6rem 0 0; max-width: 68ch; }
.code { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.06em; background: #fff; border: 3px solid var(--ink); border-radius: 6px; padding: 0.4rem 0.9rem; display: inline-block; margin: 0.4rem 0; user-select: all; }

/* ── Quilts, calendar, ceremonies ───────────────────────────────────────── */
.rows > li.pick { display: flex; align-items: center; gap: 0.5rem; }
.rows > li.pick > .check { padding: 0 0.25rem 0 0.5rem; }
.rows > li.pick > .row { flex: 1; min-width: 0; }
.row a.name { color: var(--blue); }
.row .side.actions { justify-content: flex-end; margin-top: 0; }
.credit { display: grid; grid-template-columns: 10rem 1fr 11rem 6rem; gap: 0.6rem 0.9rem; padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .credit { grid-template-columns: 1fr 1fr; } }
.quilt-photo { display: block; max-width: 100%; max-height: 420px; border: 3px solid var(--ink); border-radius: 6px; margin-bottom: 1rem; }
.ask { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.panel > h2 + .ask { border-top: 0; margin-top: 0; padding-top: 0; }
input[readonly] { background: var(--wash); }
select:disabled, input:disabled, textarea:disabled { background: var(--wash); color: var(--ink); opacity: 1; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 1.75rem; }
.cal-head { font-weight: 700; font-size: 0.82rem; color: var(--muted); text-align: center; padding-bottom: 0.2rem; }
.cal-day { min-height: 4.6rem; border: 1px solid var(--line); border-radius: 4px; padding: 0.25rem 0.35rem; font-size: 0.8rem; color: var(--ink); text-decoration: none; display: block; overflow: hidden; }
.cal-day.off { border-color: transparent; }
.cal-day.today { border: 3px solid var(--ink); }
.cal-day.has { background: var(--red-wash); }
a.cal-day:hover { background: var(--wash); }
.cal-num { display: block; font-weight: 700; font-size: 0.95rem; }
.cal-mark { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.cal-mark.ceremony { color: var(--red); font-weight: 700; }
@media (max-width: 640px) { .cal { display: none; } }

/* ── Sign-in card ───────────────────────────────────────────────────────── */
.card { max-width: 480px; margin: 2.5rem auto; padding: 0 1.25rem; }
.card h1 { margin-bottom: 0.5rem; }
.card form { margin-top: 1.25rem; display: grid; gap: 1rem; }

/* ── When the nomination form is shown inside the store's page ──────────── */
html.cq-embedded .cq-hide-embed { display: none !important; }
html.cq-embedded main { padding: 0.5rem 0 1rem; }

@media (prefers-reduced-motion: no-preference) { button, .tabs a { transition: background-color 0.12s; } }
@media print { .masthead, .tabs, .actions, .site-foot { display: none; } }