/* Articles of the Sunseeker — ONE LOOK, matching the Muse board baseline
   (v18) exactly: the same photographic Captain's Cabin wood wall, the same
   aged parchment recipe, the same brass pins with their punched holes.
   Every board, form and card is a parchment sheet pinned to the wall.
   Navy survives where the Muse board keeps it: the Gangway door panel
   and the aboard pill. Pirata One display type with Spectral body text. */

:root {
  color-scheme: light;
  --wood: #6b4a2a;
  --wood-dark: #4a3016;
  --paper: #f3e9d2;
  --paper-deep: #eee0c2;
  --paper-bright: #fffaf0;
  --ink: #2d2317;
  --ink-dim: #71603f;
  --line: #b49b6d;
  --line-soft: #cbb27e;
  --gold: #e9b949;
  --gold-bright: #f6cf6b;
  --gold-deep: #b9822e;
  --gold-ink: #8a5f10;
  --navy: #0a1730;
  --parchment: #f3e9d2;
  --tan: #d9c69c;
  --rust: #c0452f;
  --rust-bright: #f0937f;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--parchment);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  /* The Muse board's own cabin-wall photograph, set exactly as there:
     cover, fixed, centre top, over the same dark fallback tone. */
  background-color: #241a12;
  background-image: url("/wood-board.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

.font-display, h1.display, .section-head h2, .tile .tile-title, .forge-name, .cal-month, .chart-day-panel-head h3 {
  font-family: "Pirata One", "Spectral", Georgia, serif;
  font-weight: 400;
}

button, select, input, textarea { font: inherit; }
button, [role="button"], select, summary, input:not([type="checkbox"], [type="radio"]) { min-height: 2.25rem; }

.loading-note { padding: 3rem 1.5rem; text-align: center; color: var(--tan); }

/* ------------------------------- primitives ------------------------------- */

.input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper-bright);
  padding: 0.5rem 0.75rem;
  font-size: 16px;
  color: var(--ink);
}
.input::placeholder { color: #a08c62; }
.input.center { text-align: center; }

.label { display: block; margin-bottom: 0.25rem; font-size: 14px; font-weight: 600; color: var(--ink-dim); }

.btn-gold {
  border: none;
  cursor: pointer;
  border-radius: 8px;
  background: var(--gold);
  padding: 0.5rem 1rem;
  font-size: 16px;
  font-weight: 700;
  color: #0a1730;
  box-shadow: 0 2px 5px rgba(43, 26, 8, 0.4);
}
.btn-gold:disabled { opacity: 0.5; cursor: default; }

.btn-ghost {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(43, 26, 8, 0.25);
  padding: 0.375rem 0.75rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--parchment);
}
.btn-ghost:disabled { opacity: 0.5; cursor: default; }

.btn-danger {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--rust-bright);
  background: rgba(43, 26, 8, 0.25);
  padding: 0.375rem 0.75rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--rust-bright);
}
.btn-danger:disabled { opacity: 0.5; cursor: default; }

.btn-block { width: 100%; padding: 0.75rem 1rem; font-size: 18px; margin-top: 1.25rem; }

/* A sheet of aged parchment pinned to the wall — the Muse board's .paper
   recipe verbatim: weathered cream with faint stains and fibre showing
   through, hand-torn edges that are never quite square, and a soft deep
   shadow lifting it off the timbers. Wide sheets carry a brass pin at
   each top corner, exactly as on the Muse board; the dark dots in the
   background layers are the holes the pins punch. */
.card {
  position: relative;
  border-radius: 5px 16px 6px 14px / 14px 6px 16px 5px;
  border: none;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 36px 15px, rgba(43, 30, 16, 0.5) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 36px) 15px, rgba(43, 30, 16, 0.5) 2.5px, transparent 3.5px),
    radial-gradient(ellipse 240px 130px at 88% 6%, rgba(146, 106, 44, 0.15), transparent 70%),
    radial-gradient(ellipse 300px 180px at 6% 96%, rgba(120, 84, 32, 0.13), transparent 70%),
    radial-gradient(ellipse 120px 90px at 62% 88%, rgba(146, 106, 44, 0.08), transparent 70%),
    repeating-linear-gradient(93deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper) 0%, #e7d9b8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 90, 40, 0.22),
    inset 0 0 26px rgba(122, 90, 40, 0.15),
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 16px 28px -6px rgba(0, 0, 0, 0.55),
    0 34px 54px -22px rgba(0, 0, 0, 0.45);
  padding: 1.4rem 1rem 1rem;
  color: var(--ink);
}
.card::before, .card::after {
  /* the brass tacks through the top corners of the sheet — the Muse
     board's domed pin, sitting proud of the sheet's edge */
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbe9a8 0%, var(--gold-bright) 38%, var(--gold-deep) 78%, #7c5516 100%);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  z-index: 2;
  pointer-events: none;
}
.card::before { left: 26px; }
.card::after { right: 26px; }
.card-gold { box-shadow:
    inset 0 0 0 1px rgba(185, 130, 46, 0.45),
    inset 0 0 26px rgba(122, 90, 40, 0.15),
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 16px 28px -6px rgba(0, 0, 0, 0.55),
    0 34px 54px -22px rgba(0, 0, 0, 0.45); }
.card h3 { color: var(--ink); }
.card .dim { color: var(--ink-dim); }
.card .gold-text { color: var(--gold-ink); }
.card .btn-ghost { color: var(--ink); border-color: var(--line); background: rgba(255, 250, 240, 0.45); }
.card .btn-danger { color: var(--rust); border-color: var(--rust); background: transparent; }
.card a { color: var(--gold-ink); font-weight: 600; }
.card .error-text { color: var(--rust); }

.empty-note {
  position: relative;
  border-radius: 5px 16px 6px 14px / 14px 6px 16px 5px;
  border: none;
  background-color: var(--paper-deep);
  background-image:
    radial-gradient(ellipse 220px 120px at 12% 8%, rgba(146, 106, 44, 0.14), transparent 70%),
    radial-gradient(ellipse 280px 170px at 92% 94%, rgba(120, 84, 32, 0.12), transparent 70%),
    repeating-linear-gradient(87deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper-deep) 0%, #e2d0a9 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 90, 40, 0.22),
    inset 0 0 26px rgba(122, 90, 40, 0.15),
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 16px 28px -6px rgba(0, 0, 0, 0.55),
    0 34px 54px -22px rgba(0, 0, 0, 0.45);
  padding: 1.25rem 1rem;
  font-size: 16px;
  color: var(--ink-dim);
}

.error-text { color: var(--rust-bright); font-size: 15px; margin-top: 0.75rem; }
.small { font-size: 14px; }
.dim { color: var(--tan); }
.gold-text { color: var(--gold-bright); }
.mt { margin-top: 1rem; }
.preline { white-space: pre-line; }
.ok-text { color: #58751f; font-weight: 600; }

/* ------------------------------- section heads ------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  border-bottom: 2px solid var(--gold-deep);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.section-head h2 { margin: 0; font-size: 32px; line-height: 1.1; color: var(--parchment); text-shadow: 0 2px 4px rgba(30, 18, 4, 0.6); }
@media (min-width: 640px) { .section-head h2 { font-size: 42px; } }
.section-head .plain { font-size: 16px; color: var(--tan); }

.sub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  border-bottom: 2px solid var(--gold-deep);
  padding-bottom: 0.375rem;
  margin-bottom: 1rem;
}
.sub-head h3 { margin: 0; font-family: "Pirata One", "Spectral", Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--parchment); text-shadow: 0 2px 4px rgba(30, 18, 4, 0.6); }
@media (min-width: 640px) { .sub-head h3 { font-size: 32px; } }
.sub-head .plain { font-size: 15px; color: var(--tan); }

.section-wrap { margin-top: 54px; scroll-margin-top: 1.5rem; }
.section-wrap.first { margin-top: 44px; }

/* A section banner opens a new stretch of the board (The Ship's Papers) —
   a carved sign nailed across the planks above its boards. */
.section-banner {
  margin-top: 76px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  border-top: 3px double var(--gold-deep);
  border-bottom: 3px double var(--gold-deep);
  padding: 0.625rem 0.25rem;
  scroll-margin-top: 1.5rem;
}
.section-banner h2 { margin: 0; font-size: 36px; line-height: 1.1; color: var(--gold-bright); text-shadow: 0 2px 4px rgba(30, 18, 4, 0.6); }
@media (min-width: 640px) { .section-banner h2 { font-size: 46px; } }
.section-banner .plain { font-size: 16px; color: var(--tan); }
.section-wrap.in-papers { margin-top: 34px; }

/* --------------------------------- gangway --------------------------------- */

.gangway {
  margin: 0 auto;
  max-width: 560px;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  margin: 0;
  text-shadow: 0 1px 3px rgba(30, 18, 4, 0.7);
}
.gangway h1 { font-size: 69px; line-height: 1.02; color: var(--parchment); margin: 0.25rem 0 0; text-shadow: 0 2px 5px rgba(30, 18, 4, 0.7); }
@media (min-width: 640px) { .gangway h1 { font-size: 90px; } }
/* The crew sign, half again as big: the business name is the headline a
   visitor reads first, with the board's name and Crew Only on the sign. */
.gangway .eyebrow { font-size: 19px; }
.gangway-sign-sub {
  font-family: "Pirata One", "Spectral", Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--gold-bright);
  margin: 0.375rem 0 0;
  text-shadow: 0 2px 4px rgba(30, 18, 4, 0.7);
}
@media (min-width: 640px) { .gangway-sign-sub { font-size: 45px; } }
.gangway .lede { margin-top: 0.5rem; font-size: 17px; color: var(--parchment); }

.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.5rem; }
.mode-tabs button {
  cursor: pointer;
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  font-size: 16px;
  background: rgba(43, 26, 8, 0.3);
  border: 1px solid var(--line-soft);
  font-weight: 600;
  color: var(--parchment);
}
.mode-tabs button.active { background: var(--gold); border-color: var(--gold); font-weight: 700; color: #0a1730; }

.gangway form.card { margin-top: 1rem; padding: 1.4rem 1.25rem 1.25rem; }

/* The Gangway door is navy, as on the Muse board: the sign-in / sign-up
   form is a navy panel with the gold border — not a parchment sheet.
   No pins on the door. */
.gangway form.card {
  background: #10264c;
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  color: #dbe4f5;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 16px 28px -6px rgba(0, 0, 0, 0.55),
    0 34px 54px -22px rgba(0, 0, 0, 0.45);
}
.gangway form.card::before, .gangway form.card::after { display: none; }
.gangway form.card .label { color: #9db1d4; }
.gangway form.card .input {
  background: #0d1f40;
  border-color: #2a4472;
  color: #dbe4f5;
  color-scheme: dark;
}
.gangway form.card .input::placeholder { color: #9db1d4; }
.gangway form.card .dim { color: #9db1d4; }
.gangway form.card .gold-text { color: var(--gold-bright); }
.gangway form.card .notice { background: #0d1f40; border-color: var(--gold-deep); color: var(--gold-bright); }
.gangway form.card .forge-box { background: #0d1f40; border-color: #2a4472; }
.gangway form.card .forge-box .hint, .gangway form.card .center-note { color: #9db1d4; }
.gangway form.card .center-note button { color: var(--gold-bright); }
.gangway form.card .btn-ghost { border-color: #2a4472; background: transparent; color: #dbe4f5; }
.gangway form.card .stay-signed-in { color: #dbe4f5; font-weight: 500; text-align: left; margin-bottom: 0.75rem; }
.gangway form.card .error-text { color: var(--rust-bright); }
.gangway .lede { color: #e8eefb; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.mode-tabs button { background: rgba(6, 15, 34, 0.45); border-color: #2a4472; }
.notice {
  margin: 0 0 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--gold-deep);
  background: var(--paper-deep);
  padding: 0.5rem 0.75rem;
  font-size: 15px;
  color: var(--gold-ink);
}
.forge-box {
  margin-top: 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--paper-deep);
  padding: 1rem;
}
.forge-box .label { text-align: center; }
.forge-box .roll-row { margin-top: 0.75rem; text-align: center; }
.forge-box .hint { margin-top: 0.5rem; text-align: center; font-size: 14px; color: var(--ink-dim); }
.field-gap { margin-top: 0.75rem; }
.center-note { margin-top: 0.75rem; text-align: center; font-size: 14px; color: var(--ink-dim); }
.center-note button {
  background: none; border: none; cursor: pointer; padding: 0;
  font-weight: 600; color: var(--gold-ink); text-decoration: underline; font-size: 14px;
}

/* ---------------------------------- board ---------------------------------- */

.board-main { margin: 0 auto; max-width: 880px; padding: 0 1.25rem 4rem; }

/* The header sits directly on the cabin wall, exactly as on the Muse
   board — no sign panel, just lettering over the timbers. */
.board-header {
  margin: 0;
  padding: 2.5rem 0.25rem 0.5rem;
}
.board-header .eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.board-header h1 { font-size: 44px; line-height: 1.02; color: var(--parchment); margin: 0.25rem 0 0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.6); }
@media (min-width: 640px) { .board-header h1 { font-size: 60px; } }
.board-header .sub { margin-top: 0.25rem; font-size: 18px; color: #e8eefb; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.aboard-row { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.aboard-pill {
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  background: rgba(6, 15, 34, 0.8);
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-bright);
}

/* hub tiles — small pinned notes */
.hub-nav { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .hub-nav { grid-template-columns: repeat(3, 1fr); } }
.tile {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 5px 16px 6px 14px / 14px 6px 16px 5px;
  border: none;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 50% 15px, rgba(43, 30, 16, 0.5) 2.5px, transparent 3.5px),
    radial-gradient(ellipse 240px 130px at 88% 6%, rgba(146, 106, 44, 0.15), transparent 70%),
    radial-gradient(ellipse 300px 180px at 6% 96%, rgba(120, 84, 32, 0.13), transparent 70%),
    radial-gradient(ellipse 120px 90px at 62% 88%, rgba(146, 106, 44, 0.08), transparent 70%),
    repeating-linear-gradient(93deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper) 0%, #e7d9b8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 90, 40, 0.22),
    inset 0 0 26px rgba(122, 90, 40, 0.15),
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 16px 28px -6px rgba(0, 0, 0, 0.55),
    0 34px 54px -22px rgba(0, 0, 0, 0.45);
  padding: 1.3rem 1rem 1rem;
  color: var(--ink);
}
.tile::before {
  /* one centred brass pin on a narrow sheet, as on the Muse board */
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbe9a8 0%, var(--gold-bright) 38%, var(--gold-deep) 78%, #7c5516 100%);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  z-index: 2;
  pointer-events: none;
}
.tile .tile-title { display: block; font-size: 22px; line-height: 1.25; color: var(--ink); }
.tile .tile-plain { display: block; margin-top: 0.25rem; font-size: 14px; color: var(--ink-dim); }

/* character menu */
.character-box { margin-top: 1.25rem; }
.character-grid { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .character-grid { grid-template-columns: 1fr 1fr; } }
.character-box h2 { font-size: 24px; color: var(--ink); margin: 0; }
.forge-mini {
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--paper-deep);
  padding: 0.75rem;
  text-align: center;
}
.forge-name { margin-top: 0.25rem; min-height: 34px; font-size: 22px; line-height: 1.3; color: var(--ink); }
.flex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.flex-row.between { justify-content: space-between; }
.flex-row.center { justify-content: center; }

/* jobs */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.filter-chip {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(43, 26, 8, 0.3);
  padding: 0.375rem 0.875rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--parchment);
}
.filter-chip.active { background: var(--gold); border-color: var(--gold); font-weight: 700; color: #0a1730; }
.push-right { margin-left: auto; }

.stack { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: 0.75rem; }
.stack-xs { display: grid; gap: 0.5rem; }

.job-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.job-top h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.job-detail { margin-top: 0.375rem; font-size: 16px; line-height: 1.6; }
.job-meta { margin-top: 0.75rem; display: grid; gap: 0.25rem 1.5rem; font-size: 15px; }
@media (min-width: 640px) { .job-meta { grid-template-columns: repeat(3, 1fr); } }
.job-meta dt { font-weight: 600; color: var(--ink-dim); }
.job-meta dd { margin: 0; }
.job-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.status-select-label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.status-select {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper-bright);
  padding: 0.375rem 0.5rem;
  font-size: 14px;
  color: var(--ink);
}

.pill {
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  white-space: nowrap;
}
.pill-Posted { border-color: var(--gold-deep); color: var(--gold-ink); }
.pill-Claimed { border-color: #2f5aa8; color: #2f5aa8; }
.pill-Underway { border-color: var(--gold); background: var(--gold); color: #0a1730; }
.pill-Done { border-color: #3d7a3d; color: #3d7a3d; }
.pill-Knowledge { border-color: var(--navy); color: var(--navy); }

.form-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: span 2; } }
.form-grid-3 { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .form-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* suggestions + hours rows */
.suggestion-meta { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 14px; color: var(--ink-dim); }
.suggestion-meta .gold-text { color: var(--gold-ink); }
.remove-link {
  margin-left: auto; background: none; border: none; cursor: pointer; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--rust);
}
.remove-link:disabled { opacity: 0.5; }

.hours-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem;
  border-radius: 5px; border: 1px solid var(--line-soft);
  background: var(--paper); padding: 0.5rem 0.75rem; font-size: 15px; color: var(--ink);
  box-shadow: 0 4px 10px rgba(30, 18, 4, 0.35);
}
.hours-row .gold-text { color: var(--gold-ink); }
.hours-row .dim { color: var(--ink-dim); }
.sign-row { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 14px; color: var(--ink-dim); }
.sign-row .btn-gold { margin-left: auto; }
.week-totals { margin-top: 1rem; font-size: 16px; }

/* My Watch hours form, phone width only: keep the "Log hours" submit on
   the same line as its "Logging for …" label, at its desktop size. The
   shared .sign-row wraps, so at phone width the row ballooned and the
   button dropped alone onto its own line, reading as a weird expanded
   post button. The label takes the room that's left (wrapping inside
   its own space); the button never grows or shrinks. Desktop is
   untouched — this only applies under 760px. */
@media (max-width: 760px) {
  #hours-form .sign-row { flex-wrap: nowrap; }
  #hours-form .sign-row > span { flex: 1 1 auto; min-width: 0; }
  #hours-form .sign-row .btn-gold { flex: 0 0 auto; }
}

/* checks + manifest tick rows (paper strips) */
.check-row, .tick-row {
  display: flex; cursor: pointer; align-items: center; gap: 0.75rem;
  border-radius: 5px; border: 1px solid var(--line-soft);
  background: var(--paper); padding: 0.625rem 0.75rem; font-size: 16px; color: var(--ink);
  box-shadow: 0 4px 10px rgba(30, 18, 4, 0.35);
}
.tick-row { cursor: default; }
.check-row.done, .tick-row.done { border-color: var(--gold-deep); background: var(--paper-deep); }
.check-row input[type="checkbox"], .tick-row input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: #b9822e; }
.check-row .by, .tick-row .by { margin-left: auto; font-size: 14px; color: var(--ink-dim); white-space: nowrap; }
.tick-main { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.tick-row .dim { color: var(--ink-dim); }
.tick-row .remove-link { margin-left: 0; }

/* chart table — a real calendar: seven boxes to a row, one row per week */
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.cal-month { margin: 0; font-size: 28px; line-height: 1.1; color: var(--parchment); text-shadow: 0 2px 4px rgba(30, 18, 4, 0.6); }
.cal-nav [data-chart-today] { margin-left: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.cal-dow {
  text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--gold-bright); padding: 0.25rem 0; text-shadow: 0 1px 3px rgba(30, 18, 4, 0.6);
}
.cal-cell {
  height: 118px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--paper); color: var(--ink); padding: 0.5rem;
  cursor: pointer; box-shadow: 0 4px 10px rgba(30, 18, 4, 0.35);
}
.cal-cell:hover { border-color: var(--gold-deep); }
.cal-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-blank { background: rgba(245, 237, 216, 0.22); border-style: dashed; box-shadow: none; cursor: default; }
.cal-today { background: var(--paper-bright); box-shadow: 0 0 0 2px var(--gold-deep), 0 4px 10px rgba(30, 18, 4, 0.35); }
.cal-selected { background: var(--paper-bright); box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--gold-deep), 0 4px 10px rgba(30, 18, 4, 0.35); }
.cal-date-row { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; margin-bottom: 0.375rem; }
.cal-date { font-size: 19px; font-weight: 700; line-height: 1; color: var(--ink); }
.cal-today-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--gold); color: var(--navy); border-radius: 999px; padding: 0.125rem 0.45rem;
}
.cal-job { font-size: 13px; line-height: 1.3; overflow: hidden; }
.cal-job strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bubble {
  position: fixed; z-index: 60; width: min(350px, calc(100vw - 24px));
  max-height: 70vh; overflow-y: auto;
  background: var(--paper-bright); color: var(--ink);
  border: 2px solid var(--gold-deep); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(10, 5, 0, 0.55), 0 4px 12px rgba(30, 18, 4, 0.4);
  padding: 0.875rem 1rem;
}
.cal-bubble-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.cal-bubble-head h4 { margin: 0; font-size: 19px; line-height: 1.2; color: var(--ink); }
.cal-bubble-close {
  flex: none; width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gold-deep); background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1;
}
.cal-bubble-item { border-top: 1px solid var(--line-soft); padding: 0.5rem 0; }
.cal-bubble-item:first-of-type { border-top: none; }
.cal-bubble-item p { margin: 0.25rem 0 0; }
.cal-bubble-actions { margin-top: 0.75rem; }
.cal-job-who { color: var(--gold-ink); font-weight: 600; }
.cal-more { margin: 0; font-size: 12.5px; color: var(--ink-dim); }
.cal-notes-marker { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--gold-ink); }
.chart-job {
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--paper-deep); padding: 0.5rem 0.625rem;
}
.chart-job.done { opacity: 0.55; }
.chart-job-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.375rem; margin-bottom: 0.25rem; }
.chart-job .gold-text { color: var(--gold-ink); }
.chart-undated-title { margin: 0 0 0.75rem; font-size: 18px; color: var(--ink); }
.chart-day-panel { margin-top: 1rem; }
.chart-day-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.chart-day-panel-head h3 { margin: 0; font-size: 26px; line-height: 1.15; color: var(--ink); }
.chart-day-sub { margin: 1rem 0 0.5rem; font-size: 17px; color: var(--ink); }
.chart-day-job, .chart-day-note {
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--paper-deep); padding: 0.625rem 0.75rem;
}
@media (max-width: 760px) {
  .cal-grid { gap: 0.3rem; }
  .cal-cell { height: 76px; overflow: hidden; padding: 0.35rem; border-radius: 6px; }
  .cal-date { font-size: 15px; }
  .cal-today-badge { display: none; }
  .cal-job { font-size: 11.5px; padding: 0.25rem 0.3rem; }
  .cal-job-who { display: none; }
  .cal-dow { font-size: 12px; }
  .cal-month { font-size: 23px; }
}

/* captain's cabin */
.crew-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: rgba(180, 155, 109, 0.16); padding: 0.5rem 0.75rem; font-size: 15px;
}
.crew-row .crew-name { margin-right: auto; }
.crew-row .remove-link { margin-left: 0; }
.admin-group-title { margin: 0 0 0.5rem; font-size: 18px; font-weight: 600; color: var(--ink); }

/* money map — a paper chart of the treasure pile, pinned like the rest */
.mm-card-title { margin: 0 0 0.75rem; font-size: 24px; font-family: "Pirata One", "Spectral", Georgia, serif; font-weight: 400; color: var(--ink); }
.mm-stacks { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 0.5rem 0 0.25rem; }
.mm-stack { display: flex; flex-direction: column-reverse; gap: 2px; }
.mm-coin { width: 56px; height: 13px; border-radius: 50%; }
.mm-coin.solid {
  background: linear-gradient(180deg, #f6cf6b, #d9a514 55%, #b9822e);
  border: 1px solid #b9822e;
  box-shadow: inset 0 -2px 3px rgba(122, 84, 16, 0.55), 0 1px 1px rgba(30, 18, 4, 0.35);
}
.mm-coin.ghost { background: rgba(185, 130, 46, 0.1); border: 1px dashed rgba(138, 95, 16, 0.55); }
.mm-fill-line { text-align: center; margin: 0.5rem 0 0; }
.mm-course { position: relative; height: 240px; margin-top: 1rem; }
.mm-course-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-course-line path { stroke: rgba(122, 84, 16, 0.75); stroke-width: 3.5; stroke-dasharray: 12 9; stroke-linecap: round; }
@media (max-width: 760px) {
  /* The pile goes fluid: each stack takes an equal share of the sheet and
     its coins shrink to fit, so five stacks never spill past the parchment
     or crush into each other at phone width. Desktop coin size is the cap. */
  .mm-stacks { width: 100%; gap: 8px; margin-top: 0.75rem; }
  .mm-stack { flex: 1 1 0; min-width: 0; align-items: center; }
  .mm-coin { width: 100%; max-width: 56px; height: 11px; }

  /* The charted course runs down the page: a dashed line threaded through
     the medallions, each stop a full-width row with its name, descriptor
     and amount stacked beside the medallion — nothing wraps or collides,
     and every stop is a generous tap target that still deals the cuts. */
  .mm-course {
    height: auto; position: relative;
    display: flex; flex-direction: column; gap: 0.375rem;
    margin-top: 1.5rem; padding-left: 0; border-left: none;
  }
  .mm-course::before {
    content: ""; position: absolute; left: 25px; top: 32px; bottom: 32px;
    border-left: 3px dashed rgba(122, 84, 16, 0.6);
  }
  .mm-course-line { display: none; }
  .mm-stop {
    position: static; transform: none !important; width: 100%;
    display: grid; grid-template-columns: 44px 1fr; column-gap: 0.75rem;
    align-items: center; text-align: left;
    padding: 0.5rem 0.25rem; min-height: 60px;
  }
  .mm-stop-dot {
    grid-row: 1 / span 3; align-self: center; justify-self: center;
    position: relative; z-index: 1; width: 40px; height: 40px;
  }
  .mm-stop-end .mm-stop-dot { width: 44px; height: 44px; }
  .mm-stop-name, .mm-stop-desc, .mm-stop-amt { grid-column: 2; text-align: left; }
  .mm-stop .mm-stop-name, .mm-stop .mm-stop-desc { text-align: left; }
  .mm-crew-selector { margin-top: 1.25rem; }
}
.mm-crew-selector {
  margin-top: 1rem; padding: 0.875rem 1rem;
  border: 1px solid var(--gold-deep); border-radius: 8px;
  background: var(--paper); box-shadow: 0 3px 8px rgba(30, 18, 4, 0.3);
}
.mm-crew-selector-label { margin: 0 0 0.5rem; font-size: 14px; font-weight: 700; color: var(--ink); }
.mm-stop {
  position: absolute; transform: translate(-50%, -50%); width: 132px;
  cursor: pointer; font: inherit; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: none; padding: 0.25rem;
}
.mm-stop-dot {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--paper-bright); border: 2px solid var(--gold-deep);
  color: var(--gold-ink); font-size: 15px; line-height: 1;
  box-shadow: 0 3px 8px rgba(30, 18, 4, 0.35);
}
.mm-stop.active .mm-stop-dot { background: var(--gold); color: #0a1730; box-shadow: 0 0 0 3px rgba(217, 165, 20, 0.45), 0 3px 8px rgba(30, 18, 4, 0.35); }
.mm-stop-end .mm-stop-dot { width: 46px; height: 46px; font-size: 23px; font-weight: 900; color: #b03024; border-color: #b03024; }
.mm-stop.active.mm-stop-end .mm-stop-dot { background: #b03024; color: #fff; }
.mm-stop-name { font-weight: 700; font-size: 15px; text-align: center; line-height: 1.25; }
.mm-stop-amt { font-size: 13px; color: var(--ink-dim); }
.mm-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mm-chip {
  cursor: pointer; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-bright); padding: 0.375rem 0.875rem;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.mm-chip.active { background: var(--gold); border-color: var(--gold-deep); font-weight: 700; color: #0a1730; }
.mm-pot-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 640px) { .mm-pot-grid { grid-template-columns: 180px 1fr; } }
.mm-pie { width: 160px; height: 160px; display: block; margin: 0 auto; }
.mm-pot-row {
  display: flex; align-items: center; gap: 0.625rem;
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: rgba(180, 155, 109, 0.14); padding: 0.45rem 0.625rem; font-size: 15px;
}
.mm-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(45, 35, 23, 0.35); }
.mm-pot-name { margin-right: auto; font-size: 19px; font-weight: 800; }
.mm-pot-plain { display: block; font-weight: 400; font-size: 13px; color: var(--ink-dim); }
.mm-pot-amt { font-weight: 700; }
.mm-switch-body { margin-top: 1rem; }
.mm-switch-body > p:first-child { margin-top: 0; }
.mm-table-wrap { overflow-x: auto; margin-top: 0.75rem; }
.mm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mm-table th, .mm-table td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.mm-table th { color: var(--ink-dim); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.mm-table tr.mm-sel td { background: rgba(233, 185, 73, 0.28); }
.mm-cut-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: rgba(180, 155, 109, 0.14); padding: 0.5rem 0.625rem; font-size: 15px;
}
@media (min-width: 640px) { .mm-cut-row { grid-template-columns: 1.6fr 0.5fr 0.85fr 0.85fr; align-items: baseline; } }
.mm-cut-name { font-weight: 600; }
.mm-cut-note { display: block; font-weight: 400; font-size: 13px; color: var(--ink-dim); }
.mm-cut-pct { font-weight: 700; color: var(--gold-ink); }
.mm-cut-amt { font-weight: 600; }
.mm-cut-per { font-weight: 400; font-size: 13px; color: var(--ink-dim); }
.mm-cut-row .dim { color: var(--ink-dim); }
.mm-foot { margin-top: 1rem; color: var(--tan); }
.mm-foot a { color: var(--gold-bright); font-weight: 600; }

/* -------------------- parchment hangs & finishes -------------------- */
/* The parchment recipe itself now lives in the base .card / .tile /
   .empty-note rules above, copied verbatim from the Muse board's .paper.
   What remains here is how the sheets hang: each at a slight angle of its
   own, as on the Muse board. Rotations stay under a degree so the board
   reads natural, never messy, and every word stays easy to read. */

.watch-sub {
  font-family: "Pirata One", "Spectral", Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--parchment);
  text-shadow: 0 2px 4px rgba(30, 18, 4, 0.6);
  margin: 1.75rem 0 0.75rem;
}

.empty-note { transform: rotate(-0.3deg); }

/* narrow sheets (the small stacked cards) hang from one centred pin,
   like the Muse board's narrow papers */
.stack-sm > .card::before { left: 50%; transform: translateX(-50%); }
.stack-sm > .card::after { display: none; }
.stack-sm > .card {
  background-image:
    radial-gradient(circle at 50% 15px, rgba(43, 30, 16, 0.5) 2.5px, transparent 3.5px),
    radial-gradient(ellipse 240px 130px at 88% 6%, rgba(146, 106, 44, 0.15), transparent 70%),
    radial-gradient(ellipse 300px 180px at 6% 96%, rgba(120, 84, 32, 0.13), transparent 70%),
    radial-gradient(ellipse 120px 90px at 62% 88%, rgba(146, 106, 44, 0.08), transparent 70%),
    repeating-linear-gradient(93deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper) 0%, #e7d9b8 100%);
}

/* pinned at slight angles — no two sheets hang quite straight */
.hub-nav .tile { transition: transform 0.18s ease; }
.hub-nav .tile:nth-child(3n+1) { transform: rotate(-0.9deg); }
.hub-nav .tile:nth-child(3n+2) { transform: rotate(0.7deg); }
.hub-nav .tile:nth-child(3n) { transform: rotate(-0.35deg); }
.hub-nav .tile:hover { transform: rotate(0deg) translateY(-2px); }
.stack > .card:nth-child(odd), .stack-sm > .card:nth-child(odd) { transform: rotate(-0.45deg); }
.stack > .card:nth-child(even), .stack-sm > .card:nth-child(even) { transform: rotate(0.4deg); }
.section-wrap form.card { transform: rotate(-0.3deg); }
@media (prefers-reduced-motion: reduce) { .hub-nav .tile { transition: none; } }

/* ink sitting into the parchment — a whisper of letterpress on headings */
.card h3, .tile .tile-title, .mm-card-title, .job-top h3 {
  text-shadow: 0 1px 0 rgba(255, 250, 240, 0.5);
}

/* the section rule reads as a doubled gold stitch-line */
.section-head { border-bottom: 3px double var(--gold-deep); }

/* paper strips and calendar parchment get the same fibre as the sheets */
.hours-row, .check-row, .tick-row {
  background-image:
    repeating-linear-gradient(93deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper) 0%, #e7d9b8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 90, 40, 0.18),
    inset 0 0 14px rgba(122, 90, 40, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
.cal-cell {
  background-image:
    radial-gradient(ellipse 240px 130px at 88% 6%, rgba(146, 106, 44, 0.12), transparent 70%),
    repeating-linear-gradient(93deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper) 0%, #e7d9b8 100%);
}

/* -------------------- refit additions (functional only) -------------------- */
/* New pieces from the parity refit, dressed in the board's existing
   palette and paper — no change to the background, papers or layout. */

/* the Knowledge Hold's shelf tabs — parchment tabs up top, active one in gold */
.hold-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.hold-tab {
  cursor: pointer; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(180, 155, 109, 0.25); padding: 0.45rem 0.8rem;
  font-size: 15px; font-weight: 600; color: var(--ink); font-family: inherit;
}
.hold-tab.active { background: var(--gold); border-color: var(--gold-deep); font-weight: 700; color: #0a1730; }
.hold-tab-count { font-size: 12px; font-weight: 700; opacity: 0.75; }

/* compact job rows on the Job Board — a job opens for the works */
.job-compact { padding: 1.15rem 0.9rem 0.65rem; }
.job-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem;
  width: 100%; padding: 0.1rem 0; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.job-row-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.job-row-meta { font-size: 14px; color: var(--ink-dim); }
.job-row .job-pills { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.job-chevron { margin-left: auto; font-weight: 900; color: var(--gold-ink); font-size: 18px; }
.job-panel { border-top: 1px dashed var(--line-soft); margin-top: 0.45rem; padding-top: 0.35rem; }
.job-manifest { margin-top: 0.85rem; }
.job-manifest h4, .builder-step {
  font-family: "Pirata One", "Spectral", Georgia, serif; font-weight: 400;
  font-size: 20px; color: var(--gold-ink); margin: 0.75rem 0 0.4rem;
}
.manifest-add { margin-top: 0.5rem; }
.manifest-row-fields { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .manifest-row-fields { grid-template-columns: 2fr 1fr 1fr; } }

/* the clock spot at the head of My Watch, directly above the Job Board */
.clock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.4rem; }
.clock-status { margin: 0; font-size: 16px; }
.clock-btn { font-size: 17px; padding: 0.6rem 1.4rem; }

/* the Weather Glass — Tacoma's 14 days as small parchment day cards (the
   .card recipe above); a dry day (rain chance 20% or less) wears a gold
   frame and badge so it spots at a glance */
.weather-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.weather-day {
  padding: 1.5rem 0.6rem 0.8rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.weather-day.dry {
  box-shadow:
    inset 0 0 0 2px var(--gold),
    inset 0 0 26px rgba(233, 185, 73, 0.35),
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 16px 28px -6px rgba(0, 0, 0, 0.55),
    0 34px 54px -22px rgba(0, 0, 0, 0.45);
}
.weather-day-head { display: flex; flex-direction: column; line-height: 1.2; }
.weather-icon { font-size: 30px; line-height: 1.15; }
.weather-cond { font-size: 14px; font-weight: 600; }
.weather-temps { font-size: 15px; }
.weather-rain { font-size: 13px; color: var(--ink-dim); }
.dry-badge {
  margin-top: 0.25rem; border-radius: 999px;
  background: var(--gold); color: #0a1730;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem;
}

/* the Knowledge Hold keeps a moderate size; its items scroll inside */
.knowledge-scroll {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.25rem 0.625rem 0.25rem 0.125rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) rgba(43, 26, 8, 0.25);
}
.knowledge-scroll::-webkit-scrollbar { width: 10px; }
.knowledge-scroll::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 6px; }
.knowledge-scroll::-webkit-scrollbar-track { background: rgba(43, 26, 8, 0.25); border-radius: 6px; }

/* floating back-to-top, bottom-right of the board */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  cursor: pointer;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  background: var(--gold);
  color: #0a1730;
  font-weight: 700;
  font-size: 15px;
  padding: 0.55rem 1rem;
  box-shadow: 0 6px 16px rgba(30, 18, 4, 0.55);
}
.back-to-top:hover { background: var(--gold-bright); }

/* job card extras: the pill cluster, the private/test stamps, the split panel */
.job-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
.pill-Private { border-color: var(--rust); color: var(--rust); }
.pill-Test { border-color: var(--navy); color: var(--navy); }
.split-panel {
  margin-top: 0.875rem;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--paper-deep);
  padding: 0.75rem;
}
.split-panel h4 { margin: 0 0 0.5rem; font-size: 17px; color: var(--ink); }
.split-panel .gold-text { color: var(--gold-ink); }
.split-panel .dim { color: var(--ink-dim); }

/* the first-login practice prompt */
.practice-card { margin-top: 1.25rem; }
.practice-card .gold-text { color: var(--gold-ink); }
.practice-card .dim { color: var(--ink-dim); }

/* the Captain's-personal-task checkbox in the job form */
.check-inline { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 15px; font-weight: 600; color: var(--ink-dim); cursor: pointer; }
.check-inline input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: #b9822e; margin-top: 0.15rem; }

/* money map tier descriptor line on the trail stops */
.mm-stop-desc { font-size: 12.5px; font-style: italic; color: var(--gold-ink); text-align: center; line-height: 1.25; }

/* ------------------------------ the scrawl wall ------------------------------ */
/* Crew chat & graffiti, dressed in the board's own paper and ink — the
   canvas is a fresh parchment sheet inside the card, nothing new invented. */
.scrawl-wrap {
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(93deg, rgba(120, 90, 40, 0.028) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, var(--paper) 0%, #e7d9b8 100%);
  box-shadow: inset 0 0 14px rgba(122, 90, 40, 0.14);
  overflow: hidden;
}
#scrawl-canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.scrawl-tools {
  margin-top: 0.75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;
}
.ink-row { display: inline-flex; gap: 0.45rem; }
.ink-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(45, 35, 23, 0.35);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(30, 18, 4, 0.4);
  cursor: pointer; padding: 0;
}
.ink-swatch.active { border-color: var(--gold-deep); outline: 2px solid var(--gold); outline-offset: 1px; }
.chat-list {
  max-height: 46vh;
  overflow-y: auto;
  display: grid; gap: 0.5rem;
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) rgba(43, 26, 8, 0.25);
}
.chat-list::-webkit-scrollbar { width: 10px; }
.chat-list::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 6px; }
.chat-list::-webkit-scrollbar-track { background: rgba(43, 26, 8, 0.25); border-radius: 6px; }
.chat-msg {
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: rgba(180, 155, 109, 0.16); padding: 0.5rem 0.75rem; font-size: 15px;
}
.chat-form-row { display: flex; gap: 0.625rem; align-items: stretch; }
.chat-form-row .input { flex: 1 1 auto; min-width: 0; }
.chat-form-row .btn-gold { flex: 0 0 auto; }
@media (max-width: 760px) {
  .ink-swatch { width: 40px; height: 40px; }
  .scrawl-tools .btn-ghost { min-height: 44px; }
}

/* -------------------- mobile tap targets (phone only) -------------------- */
/* Small controls grow to a comfortable 44px touch height on narrow
   screens; desktop sizing is untouched. */
@media (max-width: 760px) {
  .btn-ghost, .btn-danger { min-height: 44px; }
  .filter-chip, .mm-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .status-select { min-height: 44px; }
  .cal-bubble-close { width: 40px; height: 40px; font-size: 17px; }
  .remove-link { padding: 0.45rem 0.25rem; }
  .back-to-top { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}