/* Healthier Hawaii Together — testimony tool.
   Design values sampled directly from healthierhawaiitogether.com:
     type      Satoshi, headings at weight 500 (not bold)
     h1        52px / 52px, letter-spacing -1.56px (-0.03em)
     h2        30px / 33px, letter-spacing -0.3px (-0.01em), color #2F78A7
     body      18px / 25.2px (1.4)
     buttons   pill, border-radius 100px, padding 10px 28px
     palette   #2F78A7 primary, #3F93C9, #68AAD4, ink #0D0D0D, white
*/

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");

:root {
  --ink: #0d0d0d;
  /* Kept at/above WCAG AA on white: 0.72 ~= 4.9:1, 0.62 ~= 4.6:1. The muted
     tokens carry disclosure copy and form hints, so they must stay legible. */
  --ink-soft: rgba(13, 13, 13, 0.72);
  --ink-faint: rgba(13, 13, 13, 0.62);
  --blue: #2f78a7;
  --blue-mid: #3f93c9;
  --blue-light: #68aad4;
  --blue-wash: #eef5fa;
  --line: rgba(13, 13, 13, 0.12);
  --bg: #ffffff;
  --radius: 16px;
  --pill: 100px;
  --maxw: 54rem;
  /* Structural bands (masthead, partner footer) track the window more
     closely than the reading column does. */
  --maxw-band: 68rem;
  --font: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- masthead (mirrors the site's dark hero band) ---------- */

.masthead {
  background: var(--ink);
  color: #fff;
  padding: 1.1rem 1.25rem;
}

.masthead-inner {
  max-width: var(--maxw-band);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wordmark {
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}

/* The campaign, under the site's own name, and the page label after it. */
.mast-sub {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
}

.mast-sub a { color: inherit; text-decoration: none; }
.mast-sub a:hover { text-decoration: underline; }

.mast-page {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 620px) {
  /* Stacked on a phone: the two names read as one run-on line side by side. */
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .wordmark { font-size: 1.15rem; }
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 6rem;
}

/* ---------- progress ---------- */

.journey { margin-bottom: 1.75rem; }

.progress {
  display: flex;
  gap: 5px;
  margin-bottom: 0.55rem;
}

.progress i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.25s ease;
}

.progress i.done { background: var(--blue-light); }
.progress i.here { background: var(--blue); }

/* "Step 6 of 8 · Edit and sign" on the left, what comes next on the right. */
.progress-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* "To:" and "RE:" carry their lines indented beneath the label, one per line,
   the way the printed letter sets them. */
/* The exact indent is set from the label's width in letter-head.js; this is
   the fallback for the moment before that runs. */
.lh-lines { display: block; padding-left: 2.2ch; }
.lh-line { display: block; }

/* The points inside the statement, in the letter's own face. */
.statement-points { margin: 0 0 1rem; padding-left: 1.4rem; }
.statement-points li { margin-bottom: 0.4rem; }

/* Which site the board is showing. Two front doors, one collection. */
.site-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  flex-wrap: wrap;
}

.site-tab {
  min-height: 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.site-tab:hover { border-color: var(--blue-light); color: var(--ink); }

.site-tab.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* An error shown beside the button that caused it, for pages long enough
   that the alert at the top is off screen. */
.inline-error { color: #b42318; font-weight: 500; margin-top: 0.5rem; }

.progress-caption b { color: var(--ink); font-weight: 600; }
.progress-next { color: var(--ink-faint); }

/* ---------- type ---------- */

h1 {
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

h2 {
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--blue);
  margin: 2.2rem 0 0.6rem;
}

h3 {
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--blue);
  margin: 0 0 0.4rem;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 0.7rem;
}

p { margin: 0 0 1.05rem; }

.lede { font-size: 1.08rem; color: var(--ink-soft); }

.fine { font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }

/* ---------- panels ---------- */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.25rem;
  margin: 1.35rem 0;
}

.panel.wash { background: var(--blue-wash); border-color: transparent; }
.panel p:last-child { margin-bottom: 0; }

/* ---------- criteria ---------- */

.criterion {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  display: block;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.criterion:hover { border-color: var(--blue-light); }
.criterion.picked { border-color: var(--blue); background: var(--blue-wash); }

.criterion-top { display: flex; align-items: flex-start; gap: 0.75rem; }

.criterion input {
  margin: 0.25rem 0 0;
  width: 19px;
  height: 19px;
  accent-color: var(--blue);
  flex: none;
}

.criterion-label {
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

/* The criterion as the statute puts it, under its name. */
.criterion-statute {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}

.criterion-plain {
  margin: 0.45rem 0 0 1.95rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.criterion-advisory {
  margin: 0.55rem 0 0 1.95rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--blue-light);
  padding-left: 0.65rem;
}

details.statute { margin: 0.55rem 0 0 1.95rem; }

details.statute summary {
  font-size: 0.85rem;
  color: var(--blue);
  cursor: pointer;
  font-weight: 500;
}

details.statute p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.45rem 0 0;
  font-style: italic;
}

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

label.field { display: block; margin-bottom: 1.15rem; }

label.field > span {
  display: block;
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

label.field .hint {
  display: block;
  font-weight: 400;
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blue-light);
  outline-offset: 1px;
  border-color: var(--blue);
}

textarea { min-height: 9.5rem; resize: vertical; line-height: 1.5; }

/* The writing box holds a whole letter and is grown to fit it in app.js, so
   it never scrolls inside the page. */
textarea.testimony-box {
  min-height: 24rem;
  overflow-y: hidden;
  resize: none;
}

.row { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.row > * { flex: 1 1 13rem; }

/* Side-by-side fields rarely carry the same number of label lines — one has a
   hint, the other does not — which used to leave their inputs on different
   baselines. Making each field a column and pushing the control to the bottom
   lines the inputs up whatever sits above them. */
.row > label.field {
  display: flex;
  flex-direction: column;
}

.row > label.field > input,
.row > label.field > select,
.row > label.field > textarea {
  margin-top: auto;
}

.counter { font-size: 0.82rem; color: var(--ink-faint); text-align: right; }

/* ---------- choices ---------- */

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  margin-bottom: 0.55rem;
  cursor: pointer;
}

.choice.picked { border-color: var(--blue); background: var(--blue-wash); }
.choice input { margin: 0.2rem 0 0; accent-color: var(--blue); flex: none; }
.choice b { font-weight: 500; display: block; font-size: 1rem; }
.choice em { font-style: normal; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- buttons (pill, matching the site) ---------- */

.actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.9rem;
  flex-wrap: wrap;
  align-items: center;
}

button,
label.file-button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--pill);
  padding: 0.7rem 1.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 46px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

button.primary { background: var(--blue); color: #fff; }
button.primary:hover:not(:disabled) { background: #26648c; }

button.ghost,
label.file-button.ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
button.ghost:hover,
label.file-button.ghost:hover { border-color: var(--blue); }

button.link {
  background: none;
  border: none;
  color: var(--blue);
  padding: 0.3rem 0;
  text-decoration: underline;
  min-height: 0;
  font-weight: 500;
}

button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- letter preview ---------- */

.letter {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.5rem 1.6rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.65;
}

.letter .head {
  font-family: var(--font);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
}

.letter .head b { color: var(--ink); font-weight: 500; }
.letter p { margin: 0 0 0.95rem; }
.letter p:last-child { margin-bottom: 0; }

textarea.letter-edit {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.65;
  min-height: 24rem;
}

/* ---------- signature ---------- */

.sigwrap {
  border: 1px dashed var(--blue-light);
  border-radius: 12px;
  background: #fcfdfe;
  position: relative;
  touch-action: none;
}

canvas#sigpad { display: block; width: 100%; height: 160px; touch-action: none; }

.sigwrap .baseline {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 2.2rem;
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}

.sigwrap .prompt {
  position: absolute;
  left: 1.2rem;
  bottom: 0.65rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  pointer-events: none;
}

/* ---------- attestation ---------- */

.attest {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--blue-light);
  background: var(--blue-wash);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 1.4rem 0;
  cursor: pointer;
}

.attest input {
  margin-top: 0.2rem;
  width: 21px;
  height: 21px;
  accent-color: var(--blue);
  flex: none;
}

.attest span { font-size: 0.95rem; line-height: 1.45; }

/* ---------- status ---------- */

.alert {
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  margin: 1.1rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.alert.err { background: #fdeeee; border: 1px solid #f0c2c2; color: #8c2020; }
.alert.ok { background: #edf7ef; border: 1px solid #bfe0c6; color: #1e5c2c; }
.alert.note { background: var(--blue-wash); border: 1px solid var(--blue-light); }

.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 0.5rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ---------- letterhead ---------- */

.lh-preview {
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  text-align: center;
}

.lh-preview img { max-width: 100%; max-height: 110px; }

/* ---------- meta table (review page) ---------- */

.meta {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.meta th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-faint);
  padding: 0.35rem 1rem 0.35rem 0;
  vertical-align: top;
  white-space: nowrap;
  width: 1%;
}

.meta td { padding: 0.35rem 0; }

blockquote.their-words {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--blue-light);
  background: #fafcfd;
  border-radius: 0 12px 12px 0;
  white-space: pre-wrap;
  font-size: 0.97rem;
  line-height: 1.55;
}

@media (max-width: 30rem) {
  h1 { font-size: 1.75rem; }
  main { padding: 1.25rem 1rem 5rem; }
}

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

/* ---------- internal dashboard ---------- */

main.wide { max-width: 72rem; }

.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.board-head h1 { margin-bottom: 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem;
  margin: 1.5rem 0 1rem;
}

.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.stat b {
  display: block;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.stat span { font-size: 0.85rem; color: var(--ink-soft); }

.stage { margin-top: 2.25rem; }
.stage h2 { margin-top: 0; }

/* Wide tables scroll inside their own container so the page never does. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 44rem;
}

table.board th {
  text-align: left;
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding: 0 0.75rem 0.5rem 0;
}

table.board td {
  vertical-align: top;
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

table.board td:first-child { width: 1.6rem; padding-right: 0.4rem; }
table.board input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); }

table.board .sub {
  font-size: 0.85rem;
  color: var(--ink-faint);
  line-height: 1.35;
}

table.board a {
  color: var(--blue);
  font-weight: 500;
  display: block;
  margin-bottom: 0.2rem;
}

table.board button.link { font-size: 0.85rem; padding: 0; }

.stale {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8c5a20;
  background: #fdf3e4;
  border: 1px solid #f0d9b4;
  border-radius: 100px;
  padding: 0.1rem 0.55rem;
}

.stale.self-file {
  color: #1e4d6b;
  background: var(--blue-wash);
  border-color: var(--blue-light);
}

/* ---------- note quality meter ---------- */

ul.starters {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

ul.starters li { margin-bottom: 0.4rem; }


/* Applicants' own position — visually distinct from our explanation so it
   never reads as the agency's finding or ours. */
.panel.applicants {
  border-left: 3px solid var(--blue-light);
  background: #fbfcfd;
}

/* ---------- numbered steps ---------- */

ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

ol.steps li:last-child { margin-bottom: 0; }

ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.05rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol.steps li b {
  display: block;
  font-weight: 500;
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: 0.1rem;
}

/* ---------- overview list of criteria ---------- */

.crit-overview { margin: 0; }

.crit-overview .row {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.crit-overview .row:first-child { padding-top: 0; }
.crit-overview .row:last-child { padding-bottom: 0; border-bottom: none; }

.crit-overview .name {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.crit-overview .name .n { color: var(--blue); }

.crit-overview .q {
  margin: 0.3rem 0 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.crit-overview .law {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-faint);
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 0.7rem;
}

.crit-overview .na {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #8c5a20;
  background: #fdf3e4;
  border: 1px solid #f0d9b4;
  border-radius: 100px;
  padding: 0.05rem 0.55rem;
}

/* Criterion 3 is shown but cannot be picked, so it reads as present-and-settled
   rather than as an option being withheld. */
.criterion.off {
  cursor: default;
  background: rgba(13, 13, 13, 0.02);
  border-style: dashed;
}

.criterion.off:hover { border-color: var(--line); }
.criterion.off .criterion-label { color: var(--ink-faint); font-weight: 400; }
.criterion.off .criterion-plain { color: var(--ink-faint); }
.criterion.off input { opacity: 0.4; }

/* Per-criterion brief on the note screen: what the application already commits
   to, and what this person could add. Deliberately compact — it is context for
   the box below it, not reading material. */
.panel.brief { padding: 0.85rem 1rem; margin-bottom: 0.6rem; }
.panel.brief h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.brief-line { margin: 0 0 0.55rem; }
.brief-line:last-child { margin-bottom: 0; }

.brief-line b {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.12rem;
}

/* The worked example on the writing screen: closed by default, because most
   people start writing without it, and one click away for everyone else. */
details.sample { margin: 0.2rem 0 1.2rem; }

/* Example experiences: the same list on the criterion and writing screens. */
ul.examples { margin: 0; padding-left: 1.2rem; }
ul.examples li { margin-bottom: 0.35rem; }
.brief-line ul.examples { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
.brief-line ul.examples li { margin-bottom: 0.2rem; }

.brief-line p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Letterhead previews. A PDF cannot be shown as an <img>, so it gets a label
   and an inline viewer where the browser has one. */
.lh-chip {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.lh-pdf {
  display: block;
  width: 100%;
  height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

@media (max-width: 620px) {
  .lh-pdf { height: 150px; }
}

/* Rendered-letter preview. Tall enough to read a full page without scrolling
   inside the frame on a laptop. */
.doc-view {
  display: block;
  width: 100%;
  height: 780px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

@media (max-width: 820px) {
  .doc-view { height: 520px; }
}

/* A file input styled as a button. The native control cannot be styled to
   match, and "choose file / no file chosen" reads as a form field rather than
   an action. */
.file-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

/* Statutory pincite alongside the quoted wording. Lighter than the quote it
   labels — it identifies the paragraph, it is not the point. */
.cite {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Typed signature preview — shows roughly how it will sit on the letter. */
.typed-sig {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--ink);
  padding: 0.5rem 0 0.2rem;
  border-bottom: 1px solid var(--line);
  max-width: 22rem;
  overflow-wrap: anywhere;
}

/* A label that behaves like an inline link, for the hidden file input on the
   signing page's one-line letterhead control. */
.linkish {
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

/* The sender block above the Date/To/From/RE rows, as the letter prints it. */
.sender {
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}

.sender b { font-size: 1.05rem; }

/* Partner band at the foot of the landing page. Blue field, white type, and
   the two notices side by side on a wide screen, stacked on a phone. */
/* Pages with the partner band keep it at the foot of the screen. On a short
   step the band sits on the bottom edge instead of floating up under the
   content, so moving between steps of different lengths does not make it jump.
   On a long step it simply follows the content. It is not fixed over the page:
   the band is tall, and on a phone it would cover a third of the form. */
.with-footer body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* width: a flex column would otherwise shrink main to its content, because
   its auto side margins take the free space. */
.with-footer body > main { flex: 1 0 auto; width: 100%; }
.with-footer body > .partners { flex-shrink: 0; }

/* No elastic overscroll past the band, which otherwise pulls the page off the
   bottom edge and shows the background beneath it. */
.with-footer,
.with-footer body { overscroll-behavior-y: none; }

.partners {
  background: var(--blue-mid);
  color: #fff;
  margin-top: 3.5rem;
  padding: 2.25rem 1.25rem 2.5rem;
}

.partners-inner {
  max-width: var(--maxw-band);
  margin: 0 auto;
}

.partner-lockup {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-bottom: 1.75rem;
}

.partner-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}

.partner-notes p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 620px) {
  .partners { padding: 1.75rem 1.1rem 2rem; }
  .partner-notes { grid-template-columns: 1fr; gap: 1rem; }
}

/* Partner marks, reversed to white. Sized by eye against each other rather
   than to equal widths: the HMSA wordmark is short and wide, the Hawaiʻi
   Pacific Health lockup is a four-line stack, so matching their widths would
   leave one visually much larger than the other. */
.partner-logos {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.9rem;
}

.logo-hmsa { width: 11rem; height: auto; }
.logo-hph { width: 15rem; height: auto; }

@media (max-width: 620px) {
  .partner-logos { gap: 1.4rem; }
  .logo-hmsa { width: 8.5rem; }
  .logo-hph { width: 12rem; }
}

/* The wordmark links back to the campaign site. Styled to look like the
   masthead it already was — underlining it would make the header look like a
   navigation bar the form does not have. */
.wordmark a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0.55rem 0.25rem;
  margin: -0.55rem -0.25rem;
}

.wordmark a:hover,
.wordmark a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- the editable letter ----------

   The letter is edited in place rather than in a box below a preview. The
   sheet is deliberately paper-like: serif, generous margins, a white field on
   a tinted ground. Someone about to put their name on a filing should be
   looking at the filing.

   Only what is theirs is editable. The date, addressee and subject line are
   set by the filing format and are rendered, not typed. */
.letter-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 2.25rem 2.5rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 3px rgba(13, 13, 13, 0.06);
  /* One face for the whole letter, as the renderer sets it: the printed
     letter is Noto Serif throughout, headings included, so a sans-serif
     heading block on screen was showing people a letter they never get. */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}

/* The sender block and the Date/To/From/RE rows, in the letter's own face. */
.letter-sheet .sender,
.letter-sheet .head {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: inherit;
}

.letter-sheet .sender b { font-size: 1.1rem; }
.letter-sheet .head b { font-weight: 700; color: inherit; }

/* The rule the renderer draws between the heading block and the letter. */
.letter-sheet .head {
  border-bottom: 1px solid rgba(13, 13, 13, 0.35);
  padding-bottom: 0.9rem;
}

.letter-body {
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
  margin-top: 1.4rem;
  min-height: 9rem;
  outline: none;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.letter-body p { margin: 0 0 1rem; }
.letter-body p:last-child { margin-bottom: 0; }

/* A quiet affordance: it looks like the letter until you go near it, then it
   looks like something you can type in. */
.letter-body:hover { background: rgba(47, 120, 167, 0.04); }

.letter-body:focus {
  background: rgba(47, 120, 167, 0.05);
  box-shadow: inset 0 0 0 1px var(--blue-light);
}

.letter-body:empty::before {
  content: "Your letter will appear here.";
  color: var(--ink-faint);
}

/* The heading rows inside the sheet read as part of the letter, not as a form. */
.letter-sheet .sender { border-bottom-color: rgba(13, 13, 13, 0.18); }

/* Their own details in the heading, typed in place. Quiet until pointed at,
   like the body; an empty optional field shows what belongs there. */
.lh-edit {
  font: inherit;
  display: inline-block;
  min-width: 1.5ch;
  padding: 0 0.15rem;
  margin: 0 -0.15rem;
  border-radius: 4px;
  outline: none;
  border-bottom: 1px dashed transparent;
  cursor: text;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.letter-sheet .lh-edit { border-bottom-color: rgba(47, 120, 167, 0.35); }
.lh-edit:hover { background: rgba(47, 120, 167, 0.06); }

.lh-edit:focus {
  background: rgba(47, 120, 167, 0.08);
  border-bottom-color: var(--blue);
}

.lh-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  font-weight: 400;
  font-style: italic;
}

.lh-sep.is-faint { color: var(--ink-faint); font-weight: 400; }

.needs-name [data-field="name"] {
  background: rgba(200, 40, 40, 0.08);
  border-bottom: 2px solid #c02828;
}

.letter-signoff {
  font-family: inherit;
  color: var(--ink-soft);
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.letter-signoff b { color: var(--ink); font-weight: 600; }

@media (max-width: 620px) {
  .letter-sheet { padding: 1.25rem 1.1rem 1.6rem; }
  .letter-body { font-size: 1rem; }
}

/* A letter opened on the pipeline board.

   It sits under the table rather than inside it: the table scrolls sideways
   on a narrow screen, and a letter in one of its cells scrolled away with it.
   The sheet is the one the signer sees, so it keeps the printed measure, and
   the body loses its hover affordance because nothing here is editable. */
.letter-slot {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.letter-slot .letter-sheet {
  max-width: 44rem;
  margin: 0.25rem 0 0;
}

.letter-slot .letter-body { min-height: 0; cursor: default; }
.letter-slot .letter-body:hover { background: transparent; }

/* The support site's letters print in a sans face, so they read as one
   standard statement rather than as individual letters. The board shows that
   difference rather than setting every letter in the same face. */
.letter-sheet.is-support {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}