/* the hidden attribute must win over any element/class display rule */
[hidden] { display: none !important; }

:root {
  --bg: #0e1726;
  --panel: #16223a;
  --panel-2: #1d2c49;
  --line: #2a3b5e;
  --text: #e6edf7;
  --muted: #93a4c2;
  --accent: #4ea1ff;
  --accent-2: #1d6fd6;
  --good: #46c87c;
  --warn: #f1b24a;
  --bad: #ff6b6b;
  --yellow: #f2d24a;
  --blue: #4ea1ff;
  --red: #ff6b6b;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); }

header.app {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #16223a, #121b2e);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}

header.app h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
header.app h1 .sub { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 8px; }

.profile-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.whoami { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* "Saved" indicator */
.saved-flash {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--good);
  border: 1px solid var(--good); border-radius: 999px;
  padding: 2px 8px;
  opacity: 0; transform: translateY(-1px);
  transition: opacity .15s ease;
  pointer-events: none;
}
.saved-flash.show { opacity: 1; }
@keyframes cellSaved {
  0%   { background: rgba(70, 200, 124, .45); }
  100% { background: transparent; }
}
.cell-saved { animation: cellSaved .9s ease-out; }
.gauge-pick { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.gauge-pick select { padding: 4px 6px; }

/* converter modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; width: 100%; max-width: 420px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-x { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.modal-x:hover { color: var(--text); }
.conv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.conv-grid input { width: 100%; font-size: 18px; text-align: center; }
.whoami a { margin-left: 6px; }

.sync { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.sync::before { content: "● "; }
.sync.synced { color: var(--good); border-color: #2a5a3e; }
.sync.saving { color: var(--warn); border-color: #6a5524; }
.sync.offline { color: var(--muted); }

nav.tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 57px;
  z-index: 19;
}
nav.tabs button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
nav.tabs button:hover { color: var(--text); }
nav.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 4px; font-size: 16px; }
.card .hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--muted); }
.field.grow { flex: 1; min-width: 160px; }

input, select, textarea, button {
  font: inherit;
  color: var(--text);
}
input, select, textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 56px; width: 100%; }
input[type="number"] { width: 100px; }

button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
button.primary:hover { background: var(--accent); border-color: var(--accent); }
button.ghost { background: none; }
button.danger { color: var(--bad); border-color: #5a2a33; }
button.danger:hover { background: #2a1620; border-color: var(--bad); }
button.sm { padding: 5px 9px; font-size: 13px; }

.muted { color: var(--muted); }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
}
.tape-yellow { background: rgba(242, 210, 74, .15); color: var(--yellow); border-color: #6a5d22; }
.tape-blue { background: rgba(78, 161, 255, .15); color: var(--blue); border-color: #2a4d77; }
.tape-red { background: rgba(255, 107, 107, .15); color: var(--red); border-color: #6a2a2a; }

/* wind-band pills — vivid solid: Light=blue, Medium=yellow, Heavy=red */
.band-light { background: #1f6fb2; color: #fff; border-color: #1f6fb2; }
.band-medium { background: #f1c000; color: #11212f; border-color: #f1c000; }
.band-heavy { background: #cf3a32; color: #fff; border-color: #cf3a32; }

.warn-flag {
  color: var(--warn);
  font-size: 12px;
  cursor: help;
}

/* Grid table — scrolls within its own box so the header row and wire column stay pinned */
.grid-wrap { overflow: auto; max-height: 75vh; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
table.grid th, table.grid td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
table.grid th:first-child, table.grid td:first-child { border-left: 1px solid var(--line); }
table.grid thead th { border-top: 1px solid var(--line); }
table.grid thead th { background: var(--panel-2); position: sticky; top: 0; z-index: 3; }
table.grid th.wire-col { background: var(--panel-2); white-space: nowrap; position: sticky; left: 0; z-index: 2; }
table.grid thead th.wire-col { z-index: 4; }
table.grid tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.cell-main { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 12px; }
.cell-turns { color: var(--accent); font-size: 12px; }
.cell-edit input { width: 64px; padding: 4px 6px; margin: 2px 0; }
.cell-edit { display: flex; flex-wrap: wrap; gap: 4px; }
.cell-edit label { font-size: 10px; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }

.setup-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.setup-tabs button.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.setup-tabs .tab-actions { display: flex; gap: 6px; margin-left: auto; }

/* Log entries */
.log-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--panel-2);
}
.log-entry .le-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.log-entry .le-date { font-weight: 600; }
.log-entry .le-body { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.log-entry .le-section h4 { margin: 0 0 2px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.log-entry .le-section .val { white-space: pre-wrap; }
.le-actions { margin-left: auto; display: flex; gap: 6px; }

.empty { color: var(--muted); text-align: center; padding: 30px; }

.notes-list { margin: 6px 0 0; padding-left: 18px; }
.notes-list li { margin: 2px 0; }

.banner {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  border: 1px solid;
}
.banner.warn { background: rgba(241,178,74,.1); border-color: #6a5524; color: var(--warn); }
.banner.info { background: rgba(78,161,255,.08); border-color: #2a4d77; color: var(--accent); }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 50;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.side-pair { display: flex; gap: 6px; }
.side-pair input { width: 70px; }

.ps-head { margin: 0; font-size: 13px; }
.ps-wire { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.ps-name { width: 78px; font-weight: 600; flex: none; }
.ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; }
.ps-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.ps-grid .ps-cap { display: block; white-space: nowrap; line-height: 1.3; }
.ps-grid input { width: 100%; }
.kvtable { width: 100%; border-collapse: collapse; }
.kvtable td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.kvtable td:first-child { color: var(--muted); width: 38%; }

details.ref { margin-top: 8px; }
details.ref summary { cursor: pointer; color: var(--muted); }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.analysis-target { font-size: 12px; color: var(--muted); }

/* ===================== mobile / narrow screens ===================== */
@media (max-width: 700px) {
  /* header no longer sticky (it wraps tall); let the tab bar pin to the top instead */
  header.app {
    position: static;
    padding: 12px 14px;
    gap: 10px;
  }
  header.app h1 { font-size: 16px; }
  header.app h1 .sub { display: none; }

  nav.tabs {
    top: 0;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav.tabs button { padding: 12px 12px; white-space: nowrap; }

  /* profile controls: full-width select, evenly wrapped buttons */
  .profile-bar { width: 100%; margin-left: 0; gap: 6px; }
  #profileSelect { flex: 1 1 100%; }
  .profile-bar button { flex: 1 1 auto; }

  main { padding: 12px; }
  .card { padding: 14px; }

  /* stack form fields full-width; 16px inputs avoid iOS focus-zoom */
  .row .field { flex: 1 1 100%; }
  .field input, .field select, .field textarea { width: 100%; }
  input, select, textarea { font-size: 16px; }
  input[type="number"] { width: 100%; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .side-pair { width: 100%; }
  .side-pair input { flex: 1; width: auto; }
  .ps-wire { flex-direction: column; align-items: stretch; gap: 4px; }
  .ps-name { width: auto; }
  .ps-grid { grid-template-columns: 1fr 1fr; }

  /* log entry sections stack one per row */
  .log-entry .le-body { grid-template-columns: 1fr; }
  .le-actions { margin-left: auto; }

  /* grid cell inputs stay compact even at 16px font */
  table.grid th, table.grid td { padding: 6px 7px; }
  .cell-edit input { width: 58px; font-size: 14px; }

  /* trim the frozen label column: narrow, wrapping, top-aligned */
  table.grid th.wire-col {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    font-size: 12px;
    line-height: 1.25;
    vertical-align: top;
  }
}

@media (max-width: 380px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ===== Rig diagram ===== */
.diagram-host { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.diag-fig { margin: 0; flex: 1 1 300px; min-width: 280px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.diag-fig figcaption { text-align: center; color: var(--muted); font-size: 12px; margin-top: 4px; }
.diag-svg { width: 100%; height: auto; display: block; background: #f6f8fa; border-radius: 6px; }
.diag-svg .diag-t { font: 10px -apple-system, sans-serif; fill: #5c6b76; }
.diag-legend { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.diag-scale { min-width: 220px; }
.diag-bar { height: 12px; border-radius: 6px; border: 1px solid var(--line); }
.diag-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.diag-scale-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.diag-tbl { border-collapse: collapse; font-size: 13px; }
.diag-tbl td { padding: 2px 10px 2px 0; }
.diag-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ===== Print ===== */
.print-only { display: none; }
.print-title { font-size: 18px; font-weight: 700; }
.print-meta { font-size: 12px; color: #444; margin: 2px 0 12px; }
.hdr-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Styled tuning card (grid printout) — hidden on screen, shown only when printing */
#printCard { display: none; }
.tcard { background:#f5f6f4; color:#11212f; max-width:880px; margin:0 auto; font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tcard header { background:transparent; color:#11212f; padding:14px 26px 10px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; border-bottom:3px solid #f1c000; }
.tcard .eyebrow { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.32em; font-size:11px; font-weight:500; color:#5c6b76; margin:0 0 4px; }
.tcard h1 { font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:32px; line-height:.95; margin:0; color:#0c2233; }
.tcard .src { text-align:right; font-size:12px; color:#5c6b76; line-height:1.5; white-space:nowrap; }
.tcard .src b { color:#11212f; font-weight:600; }
.tcard .wrap { padding:22px 26px 8px; }
.tcard .section-label { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:600; color:#0c2233; margin:18px 0 8px; display:flex; align-items:center; gap:10px; }
.tcard .section-label:first-child { margin-top:0; }
.tcard .section-label .sub { font-weight:500; letter-spacing:.02em; color:#5c6b76; font-size:11px; text-transform:none; }
.tcard .section-label::after { content:""; flex:1; height:1px; background:#c9cfca; }
.tcard table { width:100%; border-collapse:collapse; font-size:13px; }
.tcard th, .tcard td { padding:7px 10px; text-align:left; }
.tcard thead th { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600; color:#0c2233; border-bottom:2px solid #0c2233; }
.tcard .boatcol { text-align:right; }
.tcard .rowlabel { font-weight:600; color:#11212f; white-space:nowrap; }
.tcard .num { font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:#11212f; }
.tcard .num .g { color:#5c6b76; font-size:11px; }
.tcard .num .d { color:#1f6fb2; font-weight:600; }
.tcard .muted { color:#9aa6ad; }
.tcard .base td, .tcard .base th { border-bottom:1px solid #e7e9e4; }
.tcard .base tr:last-child td { border-bottom:none; }
.tcard .matrix td { border-bottom:1px solid #e7e9e4; vertical-align:middle; }
.tcard .matrix .grp td { border-top:2px solid #c9cfca; }
.tcard .matrix tr:last-child td { border-bottom:none; }
.tcard .range { font-family:"Oswald",sans-serif; font-weight:600; color:#fff; text-align:center; width:64px; line-height:1.15; vertical-align:middle; }
.tcard .range small { display:block; font-size:9px; letter-spacing:.14em; font-weight:500; opacity:.85; text-transform:uppercase; }
.tcard .r-light { background:#1f6fb2; color:#fff; }
.tcard .r-med { background:#f1c000; color:#11212f; }
.tcard .r-heavy { background:#cf3a32; color:#fff; }
.tcard .foot { padding:6px 26px 24px; }
.tcard .legend { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:11.5px; color:#5c6b76; padding:12px 0 4px; border-top:1px solid #c9cfca; margin-top:6px; }
.tcard .legend b { color:#11212f; font-weight:600; }
.tcard .legend .d { color:#1f6fb2; }
.tcard .chip { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.tcard .chip-y { background:#f1c000; } .tcard .chip-b { background:#1f6fb2; } .tcard .chip-r { background:#cf3a32; }
.tcard .notes { margin-top:14px; }
.tcard .notes h3 { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:#0c2233; margin:0 0 8px; }
.tcard .notes ul { margin:0; padding-left:18px; }
.tcard .notes li { font-size:12.5px; line-height:1.5; margin-bottom:4px; color:#11212f; }
.tcard .hullnote { margin-top:14px; background:#eef2f0; border-left:3px solid #0c2233; padding:10px 14px; font-size:12px; line-height:1.5; color:#11212f; border-radius:0 4px 4px 0; }
.tcard .terminote { margin-top:10px; background:#f1efe8; border-left:3px solid #5c6b76; padding:10px 14px; font-size:11.5px; line-height:1.5; color:#11212f; border-radius:0 4px 4px 0; }
.tcard .setup { display:flex; gap:14px; align-items:flex-start; margin:0 0 18px; padding:13px 16px; background:#0c2233; color:#eef3f6; border-radius:5px; }
.tcard .setup .tag { font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:600; background:#f1c000; color:#11212f; padding:5px 9px; border-radius:3px; white-space:nowrap; margin-top:1px; }
.tcard .setup .sbody { font-size:12.5px; line-height:1.55; }

@media print {
  @page { size: landscape; margin: 1cm; }
  @page cardpage { size: portrait; margin: 0.7cm; }
  /* force the whole page white so the dark app theme doesn't print as
     ink-heavy bands around the content */
  html, body { background: #fff !important; }
  .toast, .modal-overlay, button { display: none !important; }

  /* ---- grid: styled tuning card ---- */
  body[data-print="card"] header.app,
  body[data-print="card"] nav.tabs,
  body[data-print="card"] main { display: none !important; }
  body[data-print="card"] #printCard { display: block !important; page: cardpage; }
  /* compact so it fits on one page */
  .tcard { max-width: none; font-size: 10.5px; line-height: 1.25; }
  .tcard header { padding: 8px 16px 7px; border-bottom-width: 2px; }
  .tcard h1 { font-size: 22px; }
  .tcard .eyebrow { font-size: 9px; margin-bottom: 1px; }
  .tcard .src { font-size: 9.5px; line-height: 1.3; }
  .tcard .wrap { padding: 9px 16px 2px; }
  .tcard .foot { padding: 3px 16px 6px; }
  .tcard .section-label { margin: 6px 0 3px; font-size: 10.5px; }
  /* pack columns to content and align left so values stay near their labels
     (whitespace falls on the right instead of stretching columns apart) */
  .tcard table { font-size: 10.5px; width: auto; }
  .tcard .boatcol, .tcard .num { min-width: 62px; }
  .tcard th, .tcard td { padding: 1px 14px; line-height: 1.25; }
  .tcard td:last-child, .tcard th:last-child { padding-right: 8px; }
  .tcard thead th { font-size: 9.5px; }
  .tcard .num .g, .tcard .range small { font-size: 8.5px; }
  .tcard .setup { margin: 0 0 7px; padding: 6px 11px; }
  .tcard .setup .sbody { font-size: 10px; line-height: 1.35; }
  .tcard .setup .tag { font-size: 9px; padding: 3px 7px; }
  .tcard .legend { padding: 5px 0 2px; font-size: 9.5px; gap: 2px 14px; }
  .tcard .notes { margin-top: 6px; }
  .tcard .notes h3 { margin-bottom: 3px; }
  .tcard .notes li { font-size: 10px; line-height: 1.3; margin-bottom: 1px; }
  .tcard .hullnote, .tcard .terminote { margin-top: 6px; padding: 6px 10px; font-size: 9.5px; line-height: 1.35; }
  /* avoid splitting a wind-range group across pages */
  .tcard .matrix tr { break-inside: avoid; }

  /* ---- log / analysis: print the on-screen view, ink-friendly ---- */
  body[data-print="log"] header.app, body[data-print="log"] nav.tabs,
  body[data-print="analysis"] header.app, body[data-print="analysis"] nav.tabs { display: none !important; }
  body[data-print="log"] .view, body[data-print="analysis"] .view { display: none !important; }
  body[data-print="log"] #view-log { display: block !important; }
  body[data-print="analysis"] #view-analysis { display: block !important; }
  body[data-print="log"] #view-log > .card:first-child { display: none !important; }
  body[data-print="log"] .print-only, body[data-print="analysis"] .print-only { display: block !important; }
  body[data-print="log"] .card, body[data-print="analysis"] .card { border: none !important; box-shadow: none !important; background: #fff !important; padding: 0 !important; margin: 0 0 10px !important; }
  body[data-print="log"] h1, body[data-print="log"] h2, body[data-print="log"] h3, body[data-print="log"] h4,
  body[data-print="analysis"] h1, body[data-print="analysis"] h2, body[data-print="analysis"] h3, body[data-print="analysis"] h4 { color: #000 !important; }
  body[data-print="log"] .hint, body[data-print="log"] .muted, body[data-print="log"] .cell-sub,
  body[data-print="analysis"] .hint, body[data-print="analysis"] .muted, body[data-print="analysis"] .cell-sub { color: #333 !important; }
  body[data-print="log"] a, body[data-print="analysis"] a { color: #000 !important; text-decoration: none; }
  body[data-print="log"] .grid-wrap, body[data-print="analysis"] .grid-wrap { overflow: visible !important; max-height: none !important; }
  body[data-print="log"] table.grid, body[data-print="analysis"] table.grid { border-collapse: collapse !important; width: 100% !important; font-size: 10px !important; }
  body[data-print="log"] table.grid th, body[data-print="log"] table.grid td,
  body[data-print="analysis"] table.grid th, body[data-print="analysis"] table.grid td { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; padding: 3px 4px !important; vertical-align: top; }
  body[data-print="log"] .pill, body[data-print="analysis"] .pill { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; }
  body[data-print="log"] input, body[data-print="log"] textarea,
  body[data-print="analysis"] input, body[data-print="analysis"] textarea { border: none !important; background: transparent !important; color: #000 !important; padding: 0 !important; }
}

/* ===== auth + sharing ===== */
/* hide app chrome until /api/me resolves; then either login or app shows */
body.auth-pending > header.app,
body.auth-pending > nav.tabs,
body.auth-pending > main,
body.auth-pending #loginScreen { display: none; }

#loginScreen { display: none; }
body.logged-out > header.app,
body.logged-out > nav.tabs,
body.logged-out > main,
body.logged-out #printCard,
body.logged-out .toast { display: none; }
body.logged-out #loginScreen { display: flex; }

.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--card, #16222e); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px 26px; max-width: 380px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.login-card h1 { margin: 0 0 6px; font-size: 22px; }
.login-sub { color: var(--muted, #8aa0b2); font-size: 14px; margin: 0 0 16px; line-height: 1.45; }
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.login-card input[type="email"] { padding: 10px 12px; font-size: 15px; }
.login-msg { color: #6fcf97; font-size: 13px; margin: 12px 0 0; min-height: 1em; }

.share-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.share-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: rgba(255,255,255,.04); border-radius: 6px; font-size: 14px; }
.share-list li.pending { opacity: .75; }
.share-list .role { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #8aa0b2); margin-left: 6px; }
.share-invite { display: flex; gap: 8px; align-items: center; }
.share-invite input[type="email"] { flex: 1; padding: 8px 10px; }
.share-invite select { padding: 8px; }

/* ---- view-only (viewer) role ---- */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}
/* hide editing-only controls when the active boat is read-only */
body.role-viewer #btnAddSetup,
body.role-viewer #setupTabs .tab-actions,
body.role-viewer #btnAddNote,
body.role-viewer #btnDelSetup,
body.role-viewer #btnPrefill,
body.role-viewer #logForm,
body.role-viewer #setupNotes [data-delnote],
body.role-viewer #logList [data-editlog],
body.role-viewer #logList [data-dellog] { display: none !important; }
/* grid cells become non-editable, visibly inert */
body.role-viewer #gridHost input {
  pointer-events: none; background: #f1f3f5; color: #475569; border-color: #e2e8f0;
}