/* The Manual: Tampa Bay Quick Sheet
   Mobile first. No external fonts, no JS. Print stylesheet at the bottom.
   Brand: cream #F8F5F0, purple #3D2160 (headings, accents), gold #C9A227 (thin rules only, never text). */

:root {
  --cream: #F8F5F0;
  --purple: #3D2160;
  --gold: #C9A227;
  --ink: #1E1A23;
  --muted: #463F4E;
  --line: #D9CFBF;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 1.125rem/1.5 var(--sans);
}
p { margin: 0; }
ul { margin: 0; padding: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: .75rem; top: -4rem; z-index: 2;
  background: var(--purple); color: #fff; padding: .6rem 1rem; border-radius: .4rem;
}
.skip:focus { top: .75rem; }
a { color: var(--purple); text-underline-offset: .16em; text-decoration-thickness: .08em; }
a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 2px; }

.page { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }

/* ---------- header */
.masthead {
  position: relative;
  padding: .25rem 4.25rem 1rem 0;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 1rem;
}
.quill { position: absolute; top: 0; right: 0; width: 3.25rem; height: 3.25rem; }
.title {
  margin: 0 0 .4rem;
  font: 700 2.1rem/1.1 var(--serif);
  color: var(--purple);
}
.t-pre {
  display: block;
  font-size: .5em; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .2rem;
}
.subtitle {
  font: italic 500 1.15rem/1.35 var(--serif);
  color: var(--purple);
  margin-bottom: .6rem;
}
.subtitle .sub { display: block; }
.subtitle .sub-sep { display: none; }
.quote { margin: .4rem 0 .2rem; padding: .1rem 0 .1rem .9rem; border-left: 3px solid var(--gold); }
.quote blockquote { margin: 0; font: italic 400 1.05rem/1.5 var(--serif); color: var(--ink); }
.quote figcaption { margin-top: .3rem; font-weight: 700; color: var(--purple); }
.intro { font-weight: 700; font-size: 1.2rem; margin-bottom: .35rem; }
.checked { display: flex; gap: .5rem; align-items: flex-start; font-weight: 700; margin: .25rem 0 1.5rem; padding: .75rem 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.checked .line-icon { color: var(--purple); margin-top: .25em; }

.icon { flex: none; }
.line-icon { width: 1em; height: 1em; }

/* ---------- downloads (web only) */
.downloads {
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: .6rem;
  padding: .75rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 1rem;
}
.downloads p { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.downloads a { display: inline-block; padding: .65rem 0; min-width: 2.75rem; }  /* 44px+ tap height on phones */
.dl-imgs { margin-top: .25rem; color: var(--muted); }

/* ---------- urgent banner: meaning carried by a heavy border, not color */
.urgent {
  background: #fff;
  border: 3px solid var(--purple);
  border-radius: .75rem;
  padding: .9rem 1rem 1rem;
  margin-bottom: 1.75rem;
}
.urgent .sec + .sec {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 2px solid var(--purple);
}

/* ---------- sections */
.sec { margin-bottom: 1.75rem; }
.urgent .sec { margin-bottom: 0; }
.sec-h {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--gold);
  font: 700 1.4rem/1.2 var(--serif);
  color: var(--purple);
}
.sec-icon { width: 1.55em; height: 1.55em; }
.grp-h {
  margin: .9rem 0 .2rem;
  font: 700 1.05rem/1.3 var(--sans);
  color: var(--purple);
}
.sec-intro { margin-bottom: .25rem; }
.sec-after {
  margin-top: .6rem;
  padding-left: .7rem;
  border-left: 4px solid var(--purple);
  font-weight: 700;
}

.entries { list-style: none; }
.entry { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.e-head { margin-bottom: .1rem; }
.e-name { color: var(--purple); font-size: 1.08em; }
.e-what { display: block; color: var(--muted); }
.e-details { color: var(--ink); }
.ref { font-size: .82em; color: var(--muted); font-weight: 400; white-space: nowrap; vertical-align: .25em; }
.e-line { position: relative; padding-left: 1.5rem; margin-top: .15rem; }
.e-line .line-icon { position: absolute; left: 0; top: .28em; color: var(--purple); }
.glue { white-space: nowrap; }
.e-phone { font-size: 1.05em; }
/* phone numbers never split across lines; padding grows the tap area to about 44px without moving any text */
a.tel { white-space: nowrap; padding: .65rem .45rem; margin: 0 -.45rem; }
.e-notes { color: var(--muted); font-style: italic; }

/* plain one line items */
.entry.text { position: relative; padding-left: 1.1rem; }
.entry.text::before {
  content: ""; position: absolute; left: .1rem; top: 1.15rem;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--purple);
}

/* letter range rows (Coordinated Entry) */
.row { display: flex; gap: .75rem; padding: .45rem 0; }
.r-range { flex: none; width: 6.6rem; font-weight: 700; color: var(--purple); }
.r-rest { flex: 1; }
.r-org, .r-phone { display: block; }

/* keep this page */
.keep {
  border: 2px dashed var(--purple);
  border-radius: .6rem;
  padding: .9rem 1rem 1.1rem;
  margin: .5rem 0 1.5rem;
}
.blanks { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: .9rem; }
.blank { display: flex; align-items: flex-end; gap: .5rem; flex: 1 1 14rem; }
.blank-l { font-weight: 700; }
.blank-line { flex: 1; border-bottom: 2px solid var(--ink); min-height: 1.6rem; }

/* footer */
.foot { border-top: 2px solid var(--gold); padding-top: 1rem; text-align: center; }
.foot-line { font: 600 1.05rem/1.4 var(--serif); color: var(--purple); }
.foot-url { font-weight: 700; margin: .25rem 0 1rem; }
.foot-url a { display: inline-block; padding: .6rem 0; }
.sources { text-align: left; font-size: 1rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.src-h { font: 700 1.05rem/1.3 var(--sans); color: var(--ink); margin: 0 0 .35rem; }
.sources ol { margin: 0; padding-left: 1.6rem; }
.src-h2 { margin-top: .9rem; }
.p2-note { margin-top: .25rem; }
@media (min-width: 48rem) { .sources ol { column-count: 2; column-gap: 2rem; } }

/* ---------- larger screens */
@media (min-width: 48rem) {
  .page { padding: 2rem 1.5rem 3rem; max-width: 62rem; }
  .title { font-size: 2.6rem; }
  .quill { width: 4rem; height: 4rem; }
  .masthead { padding-right: 5rem; }
  .urgent { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 1.75rem; }
  .urgent .sec + .sec { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 1.75rem; border-left: 2px solid var(--purple); }
  .cols { column-count: 2; column-gap: 2.5rem; }
  .sec { break-inside: auto; }
  .sec-h, .grp-h { break-after: avoid; }
  .entry, .sec-after, .sec-intro { break-inside: avoid; }
}

/* ---------- print: US Letter, black and white safe */
@media print {
  @page { size: letter; margin: .28in .3in .27in; }
  :root { --ink: #000; --muted: #222; --line: #AAA; --gold: #666; --purple: #000; }
  .quill, .icon { filter: grayscale(1); }
  .quote { border-left-color: #666; }
  html, body { background: #fff; }
  body { font-size: 8.1pt; line-height: 1.16; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page { max-width: none; padding: 0; margin: 0; }
  .skip, .downloads { display: none !important; }
  a { color: inherit; text-decoration: none; }
  a.tel { padding: 0; margin: 0; }

  .masthead {
    display: grid; grid-template-columns: 3.7in 1fr .4in; column-gap: .16in; align-items: center;
    padding: 0 0 .06in; margin-bottom: .08in; border-bottom-width: 1.5pt;
  }
  .quote { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0 0 0 7pt; border-left-width: 1.5pt; }
  .quote blockquote { font-size: 8.1pt; line-height: 1.2; color: #000; }
  .quote figcaption { font-size: 8.1pt; margin-top: 1pt; color: #000; }
  .quill { position: static; width: .4in; height: .4in; grid-column: 3; grid-row: 1 / span 3; }
  .title { grid-column: 1; grid-row: 1; font-size: 16pt; line-height: 1.06; margin: 0; text-wrap: balance; }
  .t-pre { display: inline; font-size: 1em; letter-spacing: 0; text-transform: none; margin: 0; }
  .subtitle { grid-column: 1; grid-row: 2; font-size: 9.4pt; line-height: 1.2; margin: 2pt 0 0; }
  .subtitle .sub { display: inline; }
  .subtitle .sub-sep { display: inline; }
  .intro { grid-column: 2; grid-row: 1; font-size: 10pt; margin: 0; align-self: end; }
  .checked { font-size: 8.4pt; color: #000; margin: .02in 0 .05in; padding: 2pt 0; border-width: .75pt; }
  .checked .line-icon { width: 8pt; height: 8pt; margin-top: 1pt; }

  .urgent {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 .14in;
    border: 1.75pt solid #000; border-radius: 5pt; padding: .05in .11in .05in; margin-bottom: .08in;
    background: #fff;
  }
  .urgent .sec + .sec { margin: 0; padding: 0 0 0 .14in; border-top: 0; border-left: 1pt solid #000; }

  .cols { column-count: 2; column-gap: .22in; column-rule: .6pt solid var(--gold); }
  .sec { margin-bottom: .05in; break-inside: auto; }
  .sec-h { font-size: 10.5pt; margin-bottom: 1pt; padding-bottom: 1pt; border-bottom-width: .75pt; gap: 4pt; break-after: avoid; }
  .sec-icon { width: 14pt; height: 14pt; }
  .grp-h { font-size: 8.6pt; margin: 3pt 0 0; break-after: avoid; }
  .sec-intro { margin-bottom: 1pt; }
  .sec-after { margin-top: 2pt; padding-left: 4pt; border-left-width: 2pt; break-inside: avoid; }

  .entry { padding: 1.1pt 0; border-bottom: .5pt solid var(--line); break-inside: avoid; }
  .e-head { margin: 0; }
  .e-name { font-size: 1em; color: #000; }
  .e-what { display: inline; color: #000; }
  .e-details { display: inline; }
  .e-head + .e-details::before { content: ": "; }
  .e-details + .e-details::before { content: " "; }
  .e-head { display: inline; }
  .e-head + .e-line, .e-details + .e-line { margin-left: 3pt; }
  .e-details { margin-right: 3pt; }
  .ref { font-size: 6.8pt; color: #222; vertical-align: 1.5pt; }
  .e-what::before { content: " ("; }
  .e-what::after { content: none; }
  .what-end::after { content: ")"; }
  .e-line { display: inline; margin: 0 5pt 0 0; padding: 0; position: static; }
  .e-line .line-icon { display: inline; position: static; width: 7.5pt; height: 7.5pt; vertical-align: -1pt; margin-right: 1.5pt; color: #000; }
  .e-phone { font-size: 1em; font-weight: 400; }
  a.tel { white-space: nowrap; }
  .e-notes { font-style: italic; }
  .entry.text { padding-left: 8pt; }
  .entry.text::before { top: 5.2pt; width: 3.5pt; height: 3.5pt; background: #000; }
  .r-range, .grp-h, .sec-h, .num, .title, .subtitle, .foot-line { color: #000; }

  .row { gap: 4pt; padding: 1.2pt 0; }
  .r-range { width: .98in; }
  .r-org, .r-phone { display: inline; }
  .row .r-phone { margin-left: 3pt; }
  .urgent .sec-danger .entries { column-count: 2; column-gap: .14in; }
  .urgent .sec-danger .entry:last-child { border-bottom: .5pt solid var(--line); }

  .keep { break-inside: avoid; border-width: 1pt; border-radius: 4pt; padding: .05in .1in .07in; margin: .03in 0 .07in; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4pt 12pt; }
  .blanks { margin: 0; flex: 1; gap: 12pt; }
  .blank { flex: 1 1 1.5in; }
  .blank-line { min-height: 12pt; border-bottom-width: 1pt; }

  .foot { padding-top: .05in; border-top-width: 1.5pt; display: grid; grid-template-columns: 1fr auto; column-gap: .2in; text-align: left; }
  .foot-line { font-size: 9pt; }
  .foot-url { margin: 0; font-size: 9pt; text-align: right; }
  .sources { grid-column: 1 / -1; font-size: 6.8pt; line-height: 1.22; margin-top: 2pt; color: #222; }
  .src-h { display: inline; font-size: 6.8pt; margin: 0 3pt 0 0; color: #000; }
  .sources ol { display: inline; padding: 0; list-style: none; counter-reset: src; }
  .sources li { display: inline; counter-increment: src; margin-right: 4pt; }
  .sources li::before { content: counter(src) ". "; font-weight: 700; }

  /* page 2 (getting around, groceries, clinics) */
  .p2-print { break-before: page; page-break-before: always; }
  .p2-head { font: 700 14pt/1.2 var(--serif); color: #000; margin: 0 0 .09in; padding-bottom: 3pt; border-bottom: 1.5pt solid #666; }
  .p2-note { margin-top: .08in; }
  .p2-foot { margin-top: .1in; }
  .src-h2 { display: inline; margin: 0 3pt 0 0; }
}