:root {
  --ink: #12303c; --muted: #3f5763; --line: #e3eaed; --bg: #f6f8f9;
  --card: #fff; --accent: #0f8a72; --accent-dark: #0b6b58;
  --pass: #1c7d4d; --pass-bg: #e3f4ea; --fail: #b23b3b; --fail-bg: #fae5e5;
  --warn: #9a6a16; --warn-bg: #fbf0d8; --unknown: #8893a0; --unknown-bg: #eef2f6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: .9em; }

.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.25rem;
  background: #0f2f3f; color: #fff; }
.topbar .brand { color: #fff; font-weight: 700; font-size: 1.05rem; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.topbar nav a { color: #dcebf7; }
.topbar nav a:hover { color: #fff; }
/* Account/admin items stay grouped at the end, split from your work by a divider. */
.topbar nav .nav-account { display: flex; align-items: center; gap: 1.1rem;
  padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.22); }
/* Admin entry is highlighted so an owner's menu reads differently from a member's. */
.topbar nav a.nav-admin { color: #06231d; background: #35CFAE; font-weight: 700;
  padding: .18rem .7rem; border-radius: 999px; }
.topbar nav a.nav-admin:hover { background: #5fd3b4; color: #06231d; }
.topbar nav a.nav-admin .nav-admin-badge { display: inline-block; min-width: 1.1em;
  margin-left: .2rem; padding: 0 .3em; border-radius: 999px; background: #06231d; color: #fff;
  font-size: .72em; font-weight: 700; text-align: center; }
.topbar .hamburger { display: none; }   /* shown only on mobile */

.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
h1 { font-size: 1.5rem; margin: .2rem 0; } h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

button, .btn { display: inline-block; background: var(--accent); color: #fff; border: 0;
  padding: .5rem .9rem; border-radius: 6px; font-size: .92rem; cursor: pointer; }
button:hover, .btn:hover { background: var(--accent-dark); text-decoration: none; }
button:disabled { background: #aab6c2; cursor: default; }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.btn-danger, .danger { background: var(--fail); }
.btn-ghost:hover { background: #e9eff5; }
.linklike { background: none; color: var(--accent); padding: 0; font-size: .85em; }
.linklike.danger { color: var(--fail); }
form.inline { display: inline; }

.flashes { margin-bottom: 1rem; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .5rem; border: 1px solid; }
.flash-info { background: #e8f1fb; border-color: #b9d6f2; }
.flash-error, .flash-warning { background: var(--warn-bg); border-color: #ecd49a; color: var(--warn); }
.flash-error { background: var(--fail-bg); border-color: #eebcbc; color: var(--fail); }

.auth-card { max-width: 340px; margin: 3rem auto; background: var(--card);
  padding: 1.5rem; border-radius: 10px; border: 1px solid var(--line); }
.auth-card label { display: block; margin-bottom: .8rem; }
.auth-card input { width: 100%; }

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  font: inherit; padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); width: 100%; }
label > span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .15rem; }

.badge { display: inline-block; padding: .12rem .5rem; border-radius: 20px; font-size: .8rem; font-weight: 600; }
.badge-pass { background: var(--pass-bg); color: var(--pass); }
.badge-fail { background: var(--fail-bg); color: var(--fail); }
.badge-unknown { background: var(--warn-bg); color: var(--warn); }
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 4px; font-size: .78rem;
  background: var(--unknown-bg); color: var(--muted); text-transform: capitalize; }
.pill-active { background: var(--pass-bg); color: var(--pass); }
.pill-under_contract { background: var(--warn-bg); color: var(--warn); }
.pill-sold, .pill-passed { background: var(--unknown-bg); color: var(--muted); }

.cell { display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center;
  border-radius: 5px; font-weight: 700; }
.cell-pass { background: var(--pass-bg); color: var(--pass); }
.cell-fail { background: var(--fail-bg); color: var(--fail); }
.cell-unknown { background: var(--unknown-bg); color: var(--unknown); }

.controls { display: flex; gap: 1rem; align-items: end; margin-bottom: 1rem; flex-wrap: wrap; }
.controls label { font-size: .82rem; color: var(--muted); }
.controls select { width: auto; }
#compareBtn { margin-left: auto; }

table { border-collapse: collapse; width: 100%; background: var(--card); }
.boats, .history, .breakdown, .compare { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: #eef3f8; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.boats tbody tr:hover { background: #f7fafd; }
.boats .sub { font-size: .8rem; }

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

.scorebar { display: flex; align-items: center; gap: 1.2rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }
.score-main strong { font-size: 1.2rem; } .bonus { color: var(--accent); font-weight: 600; }
.scorebar .ext { margin-left: auto; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; align-items: start; }
.side { display: flex; flex-direction: column; gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }

/* Any wide table scrolls inside its own box instead of shoving the page sideways. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
.table-wrap > table { margin: 0; }

@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  /* Header: collapse the nav behind a ☰ hamburger instead of a wrapping row. */
  .topbar { flex-wrap: wrap; gap: .4rem .9rem; padding: .6rem 1rem; }
  .topbar .brand { font-size: 1rem; }
  .topbar .hamburger { display: block; margin-left: auto; color: #fff; font-size: 1.5rem;
    line-height: 1; cursor: pointer; padding: .1rem .5rem; -webkit-tap-highlight-color: transparent; }
  .topbar nav { display: none; width: 100%; margin: .5rem 0 0; flex-direction: column;
    align-items: stretch; gap: 0; }
  /* On mobile the account cluster just stacks with the rest — no side divider. */
  .topbar nav .nav-account { display: contents; }
  .topbar nav a, .topbar nav .linklike { display: block; width: 100%; padding: .6rem .2rem;
    border-top: 1px solid rgba(255,255,255,.09); font-size: 1rem; }
  .topbar nav form.inline { display: block; width: 100%; }
  .navtoggle:checked ~ nav { display: flex; }
  .container { padding: 1.1rem .9rem 3rem; }
  .page-head { flex-wrap: wrap; }
  h1 { font-size: 1.3rem; }
  #compareBtn { margin-left: 0; }
  th, td { padding: .5rem .55rem; }
  /* Boats list: drop the desktop-only compare checkbox column on phones. */
  .boats th:first-child, .boats td:first-child { display: none; }
  /* Requirements: keep route/setting dropdowns inside the viewport. */
  .reqs select, .reqs-table select { max-width: 100%; }
}

.breakdown td, .breakdown th { padding: .35rem .6rem; }
.breakdown tr.na td { opacity: .55; }
.current-price { font-size: 1.4rem; font-weight: 700; margin-bottom: .6rem; }
.row-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.row-form input { width: auto; flex: 1 1 8rem; } .row-form select { width: auto; }
.history th, .history td { padding: .35rem .6rem; font-size: .9rem; }
.drop { color: var(--pass); font-weight: 600; } .raise { color: var(--fail); font-weight: 600; }

.timeline, .annotations { list-style: none; padding: 0; margin: 0; }
.timeline li, .annotations li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.ann-mark { font-weight: 700; margin-right: .3rem; }
.ann-flag_negative .ann-mark { color: var(--fail); }
.ann-refit_positive .ann-mark { color: var(--pass); }
.broker-now { margin-top: .6rem; }

.fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.fv { display: flex; flex-direction: column; } .fv-val { font-weight: 600; }
.notes { margin-top: 1rem; }

.boat-form fieldset { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 1rem; padding: 1rem; background: var(--card); }
.boat-form legend { font-weight: 700; padding: 0 .4rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.field.wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
/* Duplicate save at the top of the long boat form — set off so it reads as an action
   bar, not the first field. */
.form-actions-top { margin: 0 0 1.1rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--line, #e3eaed); }

.compare th, .compare td { border-right: 1px solid var(--line); }
.compare .rowhdr { text-align: left; background: #f7fafd; position: sticky; left: 0; }
.compare .ctr { text-align: center; }
.compare thead th { vertical-align: bottom; }
.summary-row th { background: #fbfcfe; }

.parse-panel { background: var(--card); border: 1px dashed var(--accent); border-radius: 8px; padding: 1rem; margin-bottom: 1.2rem; }
.parse-panel textarea { margin: .5rem 0; }
.parse-status { font-size: .9rem; margin-left: .6rem; }
.parsed-hit { outline: 2px solid var(--accent); background: #eef6ff; transition: background .3s; }