/* Cimarron-Memorial High School — Spartans.
   Brand: maroon #800000, silver #999999, white, black. Times New Roman.
   Times carries the headings and the brand, as the guide asks; the form
   controls stay in a system sans, which is far easier to read at 14px on a
   district monitor. Legibility wins inside the inputs, brand wins everywhere
   a reader's eye actually lands. */

:root {
  --maroon:#800000;
  --maroon-deep:#5c0000;
  --maroon-bright:#a01414;
  --maroon-wash:#f7ecec;
  --maroon-line:#e2c9c9;

  --silver:#999999;
  --silver-soft:#e6e6e6;
  --silver-wash:#f2f2f2;

  --paper:#f3f1f1;
  --surface:#ffffff;
  --sunken:#eceaea;
  --hair:#d9d5d5;
  --hair-strong:#bdb7b7;

  --ink:#141414;
  --ink-2:#43403f;
  --ink-3:#6f6a6a;

  --ok:#1f6b46;
  --ok-wash:#e3f0e9;
  --warn:#9a3412;
  --warn-wash:#fbeade;

  --radius:8px;
  --radius-sm:5px;
  --serif:"Times New Roman", Times, Georgia, serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --shadow:0 1px 2px rgba(20,10,10,.05), 0 6px 18px rgba(20,10,10,.06);
  --shadow-lift:0 2px 6px rgba(20,10,10,.08), 0 14px 34px rgba(20,10,10,.12);
  --ring:0 0 0 3px rgba(128,0,0,.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --maroon:#e08b8b; --maroon-deep:#f0b3b3; --maroon-bright:#f0a0a0;
    --maroon-wash:#2e1717; --maroon-line:#4a2626;
    --silver:#9a9a9a; --silver-soft:#2c2a2a; --silver-wash:#211f1f;
    --paper:#131111; --surface:#1c1a1a; --sunken:#252222;
    --hair:#332f2f; --hair-strong:#4a4444;
    --ink:#f0ecec; --ink-2:#c4bebe; --ink-3:#948d8d;
    --ok:#78c39c; --ok-wash:#16281f;
    --warn:#e09a68; --warn-wash:#2e2018;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.5);
    --ring:0 0 0 3px rgba(224,139,139,.25);
  }
}
:root[data-theme="dark"] {
  --maroon:#e08b8b; --maroon-deep:#f0b3b3; --maroon-bright:#f0a0a0;
  --maroon-wash:#2e1717; --maroon-line:#4a2626;
  --silver:#9a9a9a; --silver-soft:#2c2a2a; --silver-wash:#211f1f;
  --paper:#131111; --surface:#1c1a1a; --sunken:#252222;
  --hair:#332f2f; --hair-strong:#4a4444;
  --ink:#f0ecec; --ink-2:#c4bebe; --ink-3:#948d8d;
  --ok:#78c39c; --ok-wash:#16281f;
  --warn:#e09a68; --warn-wash:#2e2018;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(224,139,139,.25);
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

.wrap { width:min(1180px, 100% - 2.5rem); margin-inline:auto; }

h1,h2,h3 { font-family:var(--serif); letter-spacing:0; }

.skip {
  position:absolute; left:-9999px; top:0; background:var(--maroon); color:#fff;
  padding:.6rem 1rem; z-index:50; border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus { left:0; }

:where(a,button,input,textarea,label,summary,[tabindex]):focus-visible {
  outline:2px solid var(--maroon); outline-offset:2px; border-radius:3px;
}

svg { flex:none; }

/* ------------------------------------------------------------- masthead */
.masthead {
  background:var(--surface); border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 rgba(128,0,0,.05);
  position:relative;
}
.masthead::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, var(--maroon) 0%, var(--maroon) 62%, var(--silver) 62%, var(--silver) 100%);
}
.masthead-inner {
  width:min(1180px, 100% - 2.5rem); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 0; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:.7rem; }
.crest { color:var(--maroon); display:grid; place-items:center; }
.brand-text { display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong { font-family:var(--serif); font-size:1.2rem; font-weight:700; }
.brand-text span { font-size:.78rem; color:var(--ink-3); }

.save-state { margin:0; font-size:.8rem; color:var(--ink-3); min-height:1.2em; }
.save-state.ok { color:var(--ok); }
.save-state.bad { color:var(--warn); font-weight:600; }

/* --------------------------------------------------------------- banner */
.banner {
  width:min(1180px, 100% - 2.5rem); margin:1rem auto 0; padding:.7rem 1rem;
  border-radius:var(--radius-sm); font-size:.92rem; border:1px solid var(--hair);
  background:var(--surface); color:var(--ink-2);
  display:flex; align-items:center; gap:.6rem; box-shadow:var(--shadow);
}
.banner svg { color:var(--ok); }
.banner-warn { background:var(--warn-wash); border-color:var(--warn); color:var(--ink); }
.banner-warn svg { color:var(--warn); }

/* ------------------------------------------------------------ page head */
.page-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap; padding:1.9rem 0 1.3rem;
}
.page-head h1 {
  margin:0; font-size:2rem; line-height:1.15; font-weight:700;
  display:flex; align-items:center; gap:.6rem;
}
.lede { margin:.4rem 0 0; color:var(--ink-2); font-size:.96rem; max-width:64ch; }
.row-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

.back {
  background:var(--surface); border:1px solid var(--hair-strong);
  padding:.42rem .85rem .42rem .55rem; margin-bottom:.7rem;
  border-radius:99px; color:var(--maroon);
  font:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:var(--shadow);
  transition:border-color .12s, background .12s, transform .08s;
}
.back:hover {
  border-color:var(--maroon); background:var(--maroon-wash);
  color:var(--maroon-deep); text-decoration:none;
}
.back:active { transform:translateY(1px); }
.back-arrow {
  display:grid; place-items:center; width:1.25rem; height:1.25rem;
  border-radius:50%; background:var(--maroon); color:#fff; flex:none;
}
.back-arrow svg { width:.85em; height:.85em; }

.doc-badge {
  width:2.1rem; height:2.1rem; border-radius:var(--radius-sm); flex:none;
  display:grid; place-items:center; color:#fff; background:var(--maroon);
}

/* -------------------------------------------------------------- buttons */
.btn {
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  padding:.5rem .95rem; border-radius:var(--radius-sm);
  border:1px solid var(--hair-strong); background:var(--surface); color:var(--ink);
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  transition:border-color .12s, background .12s, transform .08s, box-shadow .12s;
}
.btn:hover:not(:disabled) { border-color:var(--maroon); color:var(--maroon); }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--maroon); border-color:var(--maroon); color:#fff; }
.btn-primary:hover:not(:disabled) {
  background:var(--maroon-deep); border-color:var(--maroon-deep); color:#fff; box-shadow:var(--ring);
}
:root[data-theme="dark"] .btn-primary, :root:not([data-theme="light"]) .btn-primary { color:#2a0d0d; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn-primary { color:#fff; } }
.btn-small { padding:.34rem .7rem; font-size:.82rem; }
.btn-lg { padding:.65rem 1.3rem; font-size:.95rem; }
.btn-add { border-style:dashed; }

.icon-btn {
  font:inherit; font-size:.8rem; cursor:pointer; background:none;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:.3rem .55rem; color:var(--ink-3);
}
.icon-btn:hover:not(:disabled) { border-color:var(--maroon); color:var(--maroon); }
.icon-danger:hover:not(:disabled) { border-color:var(--warn); color:var(--warn); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------ trip list */
.empty {
  background:var(--surface); border:1px dashed var(--hair-strong);
  border-radius:var(--radius); padding:2.4rem 2rem; text-align:center; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.empty-crest { color:var(--maroon); opacity:.85; }
.empty p { margin:0; max-width:56ch; }

.trip-list { list-style:none; margin:0 0 3rem; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.trip-card {
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  display:flex; align-items:center; gap:1rem; padding:.4rem .75rem .4rem .25rem;
  box-shadow:var(--shadow); border-left:4px solid var(--maroon);
  transition:box-shadow .14s, transform .1s;
}
.trip-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-1px); }
.trip-open {
  flex:1; text-align:left; background:none; border:0; cursor:pointer; font:inherit;
  padding:.65rem .75rem; border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:.2rem; min-width:0;
}
.trip-name { font-family:var(--serif); font-weight:700; font-size:1.15rem; }
.trip-open:hover .trip-name { color:var(--maroon); }
.trip-meta { font-size:.8rem; color:var(--ink-3); }
.trip-tools { display:flex; gap:.15rem; flex:none; }

.meter {
  display:block; height:4px; background:var(--sunken); border-radius:99px;
  margin-top:.45rem; overflow:hidden;
}
.meter-fill {
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--maroon), var(--maroon-bright));
  transition:width .3s ease;
}

/* --------------------------------------------------- which document grid */
.doc-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  gap:.9rem; padding-bottom:4rem;
}
.doc-card {
  font:inherit; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--hair);
  border-top:4px solid var(--maroon);
  border-radius:var(--radius); padding:1.25rem 1.3rem 1.1rem;
  display:flex; flex-direction:column; gap:.75rem;
  box-shadow:var(--shadow); transition:box-shadow .16s, transform .12s, border-color .16s;
}
.doc-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.doc-card-icon {
  width:2.6rem; height:2.6rem; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:var(--maroon-wash); color:var(--maroon);
}
.doc-card-body { display:flex; flex-direction:column; gap:.2rem; }
.doc-card-sub {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--maroon);
}
.doc-card-name { font-family:var(--serif); font-size:1.3rem; font-weight:700; line-height:1.2; }
.doc-card-blurb { font-size:.85rem; color:var(--ink-2); line-height:1.5; margin-top:.15rem; }
.doc-card { min-height:13rem; }
.doc-card-body { margin-top:auto; }

/* Three tones from the brand: maroon, black, silver. */
.doc-two { border-top-color:var(--ink); }
.doc-two .doc-card-icon { background:var(--silver-wash); color:var(--ink); }
.doc-two .doc-card-sub { color:var(--ink-2); }
.doc-two.doc-badge, .doc-badge.doc-two { background:var(--ink); }
.doc-three { border-top-color:var(--silver); }
.doc-three .doc-card-icon { background:var(--silver-wash); color:var(--ink-2); }
.doc-three .doc-card-sub { color:var(--ink-3); }
.doc-badge.doc-three { background:var(--silver); }

/* ---------------------------------------------------------------- layout */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:1.25rem; padding-bottom:4rem; align-items:start; }
.layout-wide { grid-template-columns:minmax(0,1fr); }
.main-col { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.side-col { min-width:0; }
.side-sticky { position:sticky; top:1rem; display:flex; flex-direction:column; gap:1rem; }
@media (max-width:900px) {
  .layout { grid-template-columns:minmax(0,1fr); }
  .side-sticky { position:static; }
}

/* ----------------------------------------------------------------- cards */
.card {
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--radius); padding:1.2rem 1.3rem 1.4rem; box-shadow:var(--shadow);
}
.card-head { margin-bottom:1.1rem; }
.card h2 {
  margin:0; font-size:1.25rem; font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}
.card-icon {
  width:1.75rem; height:1.75rem; border-radius:var(--radius-sm); flex:none;
  display:grid; place-items:center; background:var(--maroon-wash); color:var(--maroon);
}
.card-blurb { margin:.4rem 0 0; font-size:.87rem; color:var(--ink-3); max-width:66ch; line-height:1.5; }
.card-foot { margin:.9rem 0 0; font-size:.79rem; color:var(--ink-3); }
.card-side { padding:1rem 1.1rem 1.15rem; }
.card-side h2 {
  font-family:var(--sans); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); font-weight:700; margin-bottom:.75rem;
}
.card-side h2 svg { color:var(--maroon); }
.card-alert { border-color:var(--warn); }

/* --------------------------------------------------------- the finish bar */
.finish-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem 1.5rem; flex-wrap:wrap;
  border-top:4px solid var(--maroon); background:var(--surface);
}
.finish-text { min-width:0; }
.finish-text h2 { margin:0 0 .2rem; }
.finish-status { margin:0; font-size:.87rem; color:var(--ink-3); max-width:60ch; }
.finish-status-warn { color:var(--warn); }
.finish-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---------------------------------------------------------------- fields */
.field-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
.field { grid-column:span 2; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.field-wide { grid-column:span 3; }
.field-full { grid-column:1 / -1; }
.field[hidden] { display:none; }
@media (max-width:720px) {
  .field-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .field, .field-wide { grid-column:1 / -1; }
}

.field-label {
  font-size:.87rem; font-weight:600; color:var(--ink);
  display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap;
}
.optional { font-size:.7rem; font-weight:500; color:var(--ink-3); font-style:italic; }
.field-help { margin:.1rem 0 0; font-size:.78rem; color:var(--ink-3); line-height:1.45; }

input[type=text], input[type=tel], input[type=number], input[type=date], input[type=time], textarea {
  font:inherit; font-size:.94rem; width:100%; padding:.5rem .6rem;
  border:1px solid var(--hair-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
  transition:border-color .12s, box-shadow .12s;
}
input[type=number], input[type=date], input[type=time] { font-variant-numeric:tabular-nums; }
textarea { resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:var(--ink-3); opacity:.7; }
input:hover, textarea:hover { border-color:var(--ink-3); }
input:focus, textarea:focus { border-color:var(--maroon); box-shadow:var(--ring); outline:none; }

.daterange { display:flex; align-items:center; gap:.5rem; }
.daterange-sep { font-size:.82rem; color:var(--ink-3); flex:none; }

/* --------------------------------------------------------------- choices */
.choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr)); gap:.45rem; }
.choices-inline { display:flex; flex-wrap:wrap; gap:.5rem; }
.choices-wrap { grid-template-columns:repeat(auto-fit, minmax(10rem,1fr)); }

.choice {
  display:flex; align-items:flex-start; gap:.5rem; cursor:pointer;
  border:1px solid var(--hair); border-radius:var(--radius-sm);
  padding:.5rem .65rem; background:var(--surface); min-width:0;
  transition:border-color .12s, background .12s;
}
.choice:hover { border-color:var(--hair-strong); background:var(--sunken); }
.choice input { margin:.2rem 0 0; flex:none; accent-color:var(--maroon); }
.choice:has(input:checked) {
  border-color:var(--maroon); background:var(--maroon-wash); box-shadow:inset 0 0 0 1px var(--maroon);
}
.choice-body { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.choice-label { font-size:.88rem; line-height:1.35; }
.choice-hint { font-size:.74rem; color:var(--ink-3); line-height:1.35; }
.choices-inline .choice { padding:.4rem .8rem; }

.field-check { gap:.2rem; }
.check-row {
  display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size:.9rem;
  padding:.55rem .7rem; border:1px solid var(--hair); border-radius:var(--radius-sm);
  transition:border-color .12s, background .12s;
}
.check-row:hover { border-color:var(--hair-strong); background:var(--sunken); }
.check-row:has(input:checked) { border-color:var(--maroon); background:var(--maroon-wash); }
.check-row input { margin:.2rem 0 0; flex:none; accent-color:var(--maroon); }

/* -------------------------------------------------------------- itinerary */
.itin-head { margin-bottom:1.1rem; }
.itin-head .field { grid-column:span 1; }
.itin-rows { display:flex; flex-direction:column; gap:.5rem; }

.itin-row {
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto; gap:.7rem;
  align-items:start; padding:.6rem .7rem; border:1px solid var(--hair);
  border-left:3px solid var(--maroon-line);
  border-radius:var(--radius-sm); background:var(--surface);
  transition:border-color .12s;
}
.itin-row:hover { border-left-color:var(--maroon); }

.itin-time { display:flex; flex-direction:column; gap:.1rem; padding-top:.5rem; }
.itin-start {
  font-size:.85rem; font-weight:700; color:var(--maroon);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.itin-nextday {
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--ink); border-radius:99px; padding:.05rem .35rem;
  width:fit-content;
}
.itin-body { display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.itin-line { display:flex; gap:.5rem; align-items:center; }
.itin-line .itin-activity { flex:1 1 auto; min-width:0; }
.itin-row input[type=text] { font-size:.88rem; padding:.4rem .55rem; }
.itin-activity { font-weight:600; }

.itin-end-wrap { display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.itin-end-wrap span { font-size:.76rem; color:var(--ink-3); }
.itin-row input.itin-end { width:8.5rem; flex:none; font-size:.86rem; padding:.35rem .45rem; }

.itin-place-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:.45rem; }

.itin-markers { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.itin-marker { display:flex; align-items:center; gap:.4rem; min-width:0; }
.itin-marker-toggle {
  display:flex; align-items:center; gap:.3rem; cursor:pointer; white-space:nowrap;
  font-size:.76rem; font-weight:600; color:var(--ink-3);
  border:1px solid var(--hair); border-radius:99px; padding:.2rem .6rem;
  transition:border-color .12s, background .12s, color .12s;
}
.itin-marker-toggle:hover { border-color:var(--hair-strong); }
.itin-marker-toggle:has(input:checked) {
  border-color:var(--maroon); background:var(--maroon-wash); color:var(--maroon);
}
.itin-marker-toggle input { accent-color:var(--maroon); margin:0; }
.itin-row input.itin-marker-label {
  font-size:.8rem; padding:.25rem .5rem; width:11rem; flex:none;
  border-style:dashed; color:var(--maroon);
}
.itin-marker-label[hidden] { display:none; }

.itin-tools { display:flex; gap:.1rem; padding-top:.3rem; }
.itin-tools .icon-btn { padding:.25rem .4rem; line-height:1; }
.itin-tools .icon-btn:disabled { opacity:.28; cursor:not-allowed; border-color:transparent; }

.itin-empty {
  margin:0; padding:1.6rem 1.1rem; text-align:center; color:var(--ink-3);
  border:1px dashed var(--hair-strong); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.itin-empty svg { color:var(--maroon); opacity:.7; }
.itin-empty p { margin:0; font-size:.88rem; max-width:44ch; }

.itin-add { display:flex; align-items:center; gap:.5rem; margin-top:.9rem; flex-wrap:wrap; }
.itin-summary { margin:0 0 0 auto; font-size:.8rem; color:var(--ink-3); font-weight:600; }
.itin-warnings { list-style:none; margin:.85rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.itin-warnings li {
  font-size:.8rem; color:var(--ink); background:var(--warn-wash);
  border-radius:var(--radius-sm); padding:.45rem .65rem;
  display:flex; align-items:center; gap:.45rem;
}
.itin-warnings svg { color:var(--warn); }

@media (max-width:720px) {
  .itin-row { grid-template-columns:4.5rem minmax(0,1fr); }
  .itin-tools { grid-column:2; justify-content:flex-end; }
  .itin-place-row { grid-template-columns:minmax(0,1fr); }
  .itin-summary { margin-left:0; }
  .itin-line { flex-wrap:wrap; }
  .itin-line .itin-activity { flex:1 1 100%; }
  .itin-row input.itin-marker-label { width:100%; }
  .itin-marker { flex:1 1 100%; }
}

/* ------------------------------------------------------------- side rail */
.chain { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.chain li { display:flex; flex-direction:column; gap:.05rem; padding-left:.8rem; border-left:2px solid var(--maroon); }
.chain-role { font-size:.87rem; font-weight:700; }
.chain-why { font-size:.75rem; color:var(--ink-3); }
.flag {
  margin:.9rem 0 0; padding:.55rem .7rem; font-size:.79rem; line-height:1.45;
  background:var(--warn-wash); border-radius:var(--radius-sm); color:var(--ink);
  display:flex; gap:.45rem; align-items:flex-start;
}
.flag svg { color:var(--warn); margin-top:.1rem; }

.ratio { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.ratio li { display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; }
.ratio-mark {
  flex:none; width:1.2rem; height:1.2rem; border-radius:50%; display:grid;
  place-items:center; font-size:.72rem; font-weight:700; margin-top:.06rem;
}
.ratio .ok .ratio-mark { background:var(--ok-wash); color:var(--ok); }
.ratio .bad .ratio-mark { background:var(--warn-wash); color:var(--warn); }
.ratio .bad { color:var(--ink); font-weight:600; }

.attach-card { padding:0; }
.attach-card > summary {
  display:flex; align-items:center; gap:.5rem; padding:1rem 1.1rem;
  cursor:pointer; list-style:none;
}
.attach-card > summary::-webkit-details-marker { display:none; }
.attach-card > summary h2 { margin:0; }
.attach-card > summary::after {
  content:"▸"; color:var(--ink-3); font-size:.7rem; transition:transform .15s ease;
}
.attach-card[open] > summary::after { transform:rotate(90deg); }
.attach-count {
  margin-left:auto; font-size:.72rem; font-weight:700; color:var(--maroon);
  background:var(--maroon-wash); border-radius:99px; padding:.1rem .5rem;
  font-variant-numeric:tabular-nums;
}
.attach-list { list-style:none; margin:0; padding:0 1.1rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.attach-list li { font-size:.8rem; line-height:1.4; color:var(--ink-2); padding-left:.9rem; position:relative; }
.attach-list li::before {
  content:""; position:absolute; left:0; top:.5em;
  width:5px; height:5px; border-radius:50%; background:var(--hair-strong);
}
.attach-list .attach-extra { color:var(--ink); font-weight:600; }
.attach-list .attach-extra::before { background:var(--maroon); }
.attach-card .card-foot { padding:0 1.1rem 1rem; margin:0; }

/* ---------------------------------------------------------------- footer */
.foot { border-top:1px solid var(--hair); background:var(--surface); margin-top:auto; }
.foot-inner { padding:1.6rem 0; display:flex; flex-direction:column; gap:.35rem; }
.foot p { margin:0; font-size:.8rem; color:var(--ink-3); max-width:72ch; }
.foot-contact { color:var(--ink-2) !important; }
.foot-meta { font-family:var(--mono); font-size:.71rem !important; letter-spacing:.03em; }

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

/* ------------------------------------------------------- checklist view */
.check-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.check-item {
  display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  padding:.65rem .8rem; border:1px solid var(--hair); border-radius:var(--radius-sm);
  transition:border-color .12s, background .12s;
}
.check-item:hover { border-color:var(--hair-strong); background:var(--sunken); }
.check-item:has(input:checked) { border-color:var(--maroon); background:var(--maroon-wash); }
.check-item input { margin:.25rem 0 0; flex:none; accent-color:var(--maroon); width:1.05rem; height:1.05rem; }
.check-body { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.check-label { font-size:.92rem; font-weight:600; }
.check-item:has(input:checked) .check-label { color:var(--maroon); }
.check-note { font-size:.79rem; color:var(--ink-3); line-height:1.45; }

/* the fourth document tone: silver-on-black, for the checklist */
.doc-four { border-top-color:var(--maroon-deep); }
.doc-four .doc-card-icon { background:var(--maroon-wash); color:var(--maroon-deep); }
.doc-four .doc-card-sub { color:var(--maroon-deep); }
.doc-badge.doc-four { background:var(--maroon-deep); }

/* typed times, and the day controls in the itinerary */
.time-input { font-variant-numeric:normal !important; }
.itin-row input.time-input { width:8.5rem; }
.itin-day {
  font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--maroon); background:var(--maroon-wash); border-radius:99px;
  padding:.1rem .4rem; width:fit-content; margin-bottom:.15rem;
}
.itin-row.starts-day { border-top:2px solid var(--maroon-line); margin-top:.5rem; }
.itin-plusday {
  font:inherit; font-size:.7rem; font-weight:700; cursor:pointer; flex:none;
  background:none; color:var(--ink-3); border:1px dashed var(--hair-strong);
  border-radius:99px; padding:.2rem .5rem; white-space:nowrap;
}
.itin-plusday:hover { border-color:var(--maroon); color:var(--maroon); }
.itin-plusday.is-on {
  border-style:solid; border-color:var(--maroon); background:var(--maroon-wash); color:var(--maroon);
}

.combo { display:block; }
.crest { display:block; height:2.3rem; width:auto; }

/* ------------------------------------------------ the pre-submit check */
.verify {
  border:0; padding:0; border-radius:var(--radius); max-width:34rem; width:calc(100% - 2.5rem);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lift);
  border-top:5px solid var(--maroon);
}
.verify::backdrop { background:rgba(20,10,10,.45); backdrop-filter:blur(2px); }
.verify-inner { padding:1.4rem 1.5rem 1.3rem; display:flex; flex-direction:column; gap:.85rem; }
.verify h2 { margin:0; font-size:1.4rem; font-weight:700; }
.verify-lede { margin:0; font-size:.92rem; color:var(--ink-2); line-height:1.55; }
.verify-missing {
  background:var(--warn-wash); border-radius:var(--radius-sm); padding:.8rem .95rem;
  display:flex; flex-direction:column; gap:.45rem;
}
.verify-missing-head {
  margin:0; display:flex; align-items:center; gap:.45rem;
  font-size:.87rem; font-weight:700; color:var(--warn);
}
.verify-missing ul {
  margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.15rem;
  font-size:.85rem; color:var(--ink-2);
}
.verify-more { margin:0; font-size:.79rem; color:var(--ink-3); }
.verify-actions { display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; margin-top:.3rem; }
@media (max-width:520px) { .verify-actions .btn { flex:1 1 auto; justify-content:center; } }