/* ==========================================================================
   Swallow — operations cards
   Four double-sided letter cards: outward, homeward, maintenance, emergency.
   Each card is one HTML file; each .sheet is one printed side.

   Type is deliberately large. These get read at arm's length, in glare, on a
   moving boat, and a card you cannot read is a card you will not use — so the
   rule is fewer items per side rather than smaller type.
   ========================================================================== */

:root {
  --ink: #17222e;
  --navy: #0e3159;
  --brass: #a8853c;
  --paper: #f7f3e9;
  --rule: #bfb39d;
  --muted: #5a6672;
  --red: #a23d2b;
  --sea: #3f6070;

  --accent: var(--navy);          /* per-card, set on <body> */
  --accent-ink: var(--navy);
}

body.card--outward     { --accent: #0e3159; --accent-ink: #0e3159; }
body.card--homeward    { --accent: #3f6070; --accent-ink: #2c4753; }
body.card--maintenance { --accent: #8a6c2c; --accent-ink: #6d5522; }
body.card--emergency   { --accent: #a23d2b; --accent-ink: #8a3222; }

* { box-sizing: border-box; }
html { background: #d9d2c3; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  background:
    linear-gradient(rgba(23,34,46,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,34,46,.045) 1px, transparent 1px),
    #e8e1d2;
  background-size: 24px 24px;
}

.screen-tools {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 1rem;
  color: #f7f3e9; background: rgba(23,34,46,.96);
  font: 600 .72rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
}
.screen-tools button {
  border: 1px solid rgba(255,255,255,.55); border-radius: 2px;
  padding: .45rem .75rem; color: #fff; background: transparent;
  font: inherit; cursor: pointer;
}
.screen-tools button:hover { background: rgba(255,255,255,.12); }

.sheet {
  position: relative;
  width: 8.5in; min-height: 11in;
  margin: .35in auto;
  padding: .34in .38in .29in;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(23,34,46,.24);
}
.sheet::after {
  content: ""; position: absolute; inset: .16in;
  border: 1px solid var(--rule); pointer-events: none;
}
/* The emergency card announces itself before you read a word of it. */
body.card--emergency .sheet { border: .07in solid var(--red); }
body.card--emergency .sheet::after { border-color: rgba(162,61,43,.45); }

.sheet-header {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .16in;
  padding: 0 .06in .11in;
  border-bottom: 2px solid var(--accent);
}
.mark { width: .52in; height: .52in; object-fit: contain; }

.eyebrow, .side, .status, .section-no, .sheet-footer, .band__tag, .contacts th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .075em;
}
.eyebrow { margin: 0 0 .02in; color: var(--brass); font-size: 7pt; font-weight: 600; }
h1 {
  margin: 0; color: var(--accent-ink);
  font: 600 25pt/.98 "Fraunces", Georgia, serif; letter-spacing: -.025em;
}
.subtitle { margin: .04in 0 0; color: var(--muted); font-size: 9.5pt; }
.side { align-self: start; padding-top: .03in; color: var(--muted); font-size: 7pt; text-align: right; }
.status {
  display: inline-block; margin-top: .04in; padding: .025in .055in;
  color: #fff; background: var(--red); font-size: 6.4pt;
}

/* The two or three rules that, if broken, end the day badly. */
.critical {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .04in .16in;
  margin: .11in 0 .13in; padding: .085in .11in;
  color: #fff; background: var(--accent);
  font: 600 8.6pt/1.22 "IBM Plex Mono", ui-monospace, monospace;
}
.critical span::before { content: "! "; color: #e6c56d; }

.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: .14in .18in;
  align-items: start;
}
/* Four long sections balance better two-and-two than three-and-one. */
.steps--pairs { grid-template-rows: repeat(2, auto); }
.step { break-inside: avoid; border-top: 1px solid var(--rule); padding-top: .08in; }
.step-heading { display: flex; align-items: baseline; gap: .07in; margin-bottom: .05in; }
.section-no { flex: 0 0 .24in; color: var(--brass); font-size: 9pt; font-weight: 600; }
h2 { margin: 0; color: var(--accent-ink); font: 600 14.5pt/1.05 "Fraunces", Georgia, serif; }
h3 {
  margin: .09in 0 .03in; color: var(--accent-ink);
  font: 600 10.5pt/1.1 "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .06em;
}
h3:first-child { margin-top: 0; }

ul { margin: 0; padding: 0; list-style: none; }
li {
  position: relative; margin: 0 0 .038in; padding-left: .19in;
  font-size: 10.8pt; line-height: 1.22;
}
li::before {
  content: ""; position: absolute; left: .005in; top: .07in;
  width: .1in; height: .1in;
  border: 1px solid var(--accent); background: #fff;
}
/* Emergency steps are read, not ticked — a checkbox invites the wrong behaviour. */
body.card--emergency li { padding-left: .16in; }
body.card--emergency li::before {
  border: 0; background: var(--red);
  width: .05in; height: .05in; border-radius: 50%; top: .085in; left: .03in;
}

/* Once a day, not every time you leave the dock. Skipped visibly on a second launch. */
.band {
  margin: .04in 0 .06in; padding: .07in .09in .06in;
  background: rgba(168,133,60,.13);
  border-left: .035in solid var(--brass);
}
.band__tag {
  display: block; margin-bottom: .04in;
  color: var(--brass); font-size: 6.6pt; font-weight: 600;
}
/* Set a shade smaller than the everyday items — it reads as secondary, which
   is what it is, and it buys back the page depth the band costs. */
.band li { font-size: 9.7pt; margin-bottom: .035in; }

/* The contact block is the most important thing on the emergency card, so it
   gets the full width under the steps rather than a corner of the grid. */
.contact-block {
  margin-top: .13in; padding-top: .08in;
  border-top: .03in solid var(--accent);
}
.contact-block h2 { margin-bottom: .05in; }
.contact-block__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .18in; }
.contact-block .lead { margin: 0 0 .06in; font-size: 9.8pt; line-height: 1.25; }
.contact-block .say { margin: .06in 0 0; font-size: 9.8pt; line-height: 1.25; }

.verify {
  padding: 0 .025in; color: #fff; background: var(--red);
  font: 600 6.2pt/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .035em; text-transform: uppercase; white-space: nowrap;
}
strong { font-weight: 600; }
em { font-style: italic; }

.contacts { width: 100%; border-collapse: collapse; margin: .02in 0 0; font-size: 10pt; }
.contacts th {
  text-align: left; padding: .03in .05in .03in 0;
  color: var(--muted); font-size: 6.6pt; font-weight: 600;
}
.contacts td { padding: .035in .05in .035in 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.contacts td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
/* Written on by hand, so nothing personal lives in the published file. */
.fill { display: inline-block; min-width: 1.35in; border-bottom: 1px solid var(--ink); }

.sheet-footer {
  position: absolute; z-index: 1;
  left: .45in; right: .45in; bottom: .17in;
  display: flex; justify-content: space-between; gap: .2in;
  padding-top: .055in; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 6pt;
}
.sheet-footer strong { color: var(--red); }

@media screen and (max-width: 880px) {
  .sheet { width: calc(100% - 1rem); min-height: auto; margin: .5rem; padding: 1.25rem 1.1rem 3rem; }
  .sheet::after { inset: .45rem; }
  .steps { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .critical { grid-template-columns: 1fr; }
  .sheet-footer { position: static; margin-top: 1rem; }
}

@page { size: letter portrait; margin: 0; }
@media print {
  html, body { background: #fff; }
  .screen-tools { display: none; }
  .sheet {
    width: 8.5in; height: 11in; min-height: 11in; margin: 0;
    box-shadow: none; break-after: page; page-break-after: always;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}