/* ═══════════════════════════════════════════════════════════════
   HelmHero v1 — components.css
   Reusable UI components. Build screens from these, not inline styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons ───────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--hh-grad);
  border-radius: var(--r-pill);
  padding: 11px 24px;
  box-shadow: var(--shadow-btn);
  transition: transform .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap;
  user-select: none;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20,126,251,.40);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-primary.full { width: 100%; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--hh-ink-2);
  background: transparent;
  border: 1px solid var(--hh-border);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.btn-secondary:hover {
  color: var(--hh-blue);
  border-color: var(--hh-blue);
}
.btn-secondary:disabled { opacity: .4; cursor: not-allowed; }
.btn-secondary.full { width: 100%; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

/* ── Form inputs ───────────────────────────────────────────────── */

.field { margin-bottom: 16px; }

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--hh-muted);
  margin-bottom: 7px;
}

.field-label .provenance {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--hh-aqua-deep);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.field-label .provenance.estimated { color: var(--hh-muted); }
.field-label .provenance.manual    { color: var(--hh-blue); }

.inp {
  width: 100%;
  background: var(--hh-surface);
  border: 1.5px solid var(--hh-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--hh-ink);
  outline: none;
  transition: border-color .15s;
}
.inp:focus { border-color: var(--hh-blue); }
.inp::placeholder { color: var(--hh-muted); }
.inp.has-value { border-color: var(--hh-aqua-deep); }

.inp-time {
  font-family: var(--mono);
  font-size: 13px;
  width: auto;
  flex: 0 0 auto;
}

.inp-hint {
  font-size: 11px;
  color: var(--hh-muted);
  margin-top: 5px;
  line-height: 1.4;
}

/* ── Cards ─────────────────────────────────────────────────────── */

.card {
  background: var(--hh-surface);
  border: 1px solid var(--hh-border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.card + .card { margin-top: 10px; }

/* Selectable card (boat selector, option picker) */
.card-selectable {
  background: var(--hh-surface);
  border: 1.5px solid var(--hh-border);
  border-radius: var(--r-md);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-selectable:hover { border-color: var(--hh-border); background: var(--hh-surface-2); }
.card-selectable.selected {
  border-color: var(--hh-blue);
  background: var(--hh-tint-blue);
}
.card-selectable + .card-selectable { margin-top: 6px; }

.card-selectable .card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--hh-ink);
}
.card-selectable .card-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--hh-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.card-selectable .card-check {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--hh-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.card-selectable.selected .card-check {
  background: var(--hh-blue);
  border-color: var(--hh-blue);
}
.card-selectable.selected .card-check::after {
  content: '';
  width: 5px; height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* ── KPI cards ─────────────────────────────────────────────────── */

.kpi {
  background: var(--hh-surface);
  border: 1px solid var(--hh-border);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hh-grad);
}
.kpi-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hh-ink);
  line-height: 1.2;
}
.kpi-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--hh-muted);
  margin-top: 4px;
}

/* ── Chips ─────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  background: var(--hh-tint-blue);
  color: var(--hh-ink-2);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

.chip.good    { background: var(--hh-tint-green);  color: var(--hh-aqua-deep); border-color: rgba(0,168,132,.2); }
.chip.warn    { background: var(--hh-tint-amber);  color: var(--amber);        border-color: rgba(212,130,10,.2); }
.chip.critical{ background: var(--hh-tint-red);    color: var(--red);          border-color: rgba(192,57,43,.2); }

/* ── Capability disclosure ─────────────────────────────────────── */

.disclosure-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--hh-surface);
  border: 1px solid var(--hh-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.disclosure-item.locked {
  background: var(--hh-bg);
  border-color: var(--hh-border-soft);
}
.disclosure-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.disclosure-item:not(.locked) .disclosure-icon { background: var(--hh-tint-green); }
.disclosure-item.locked .disclosure-icon {
  background: var(--hh-surface-2);
  border: 1px solid var(--hh-border);
}
.disclosure-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  color: var(--hh-ink);
}
.disclosure-item.locked .disclosure-title { color: var(--hh-muted); }
.disclosure-desc {
  font-size: 11px;
  color: var(--hh-muted);
  line-height: 1.45;
  margin-top: 2px;
}

/* ── Felt rating ───────────────────────────────────────────────── */

.felt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.felt-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--hh-surface);
  border: 1.5px solid var(--hh-border);
  border-radius: var(--r-md);
  padding: 11px 6px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--hh-muted);
  transition: all .15s;
  user-select: none;
}
.felt-option:hover { background: var(--hh-surface-2); }
.felt-option.selected {
  background: var(--hh-tint-blue);
  border-color: var(--hh-blue);
  color: var(--hh-blue);
}
.felt-option svg { transition: color .15s; }

/* ── Provenance / quality badge ────────────────────────────────── */

.quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 2px 7px;
}
.quality-badge.file     { background: var(--hh-tint-green); color: var(--hh-aqua-deep); }
.quality-badge.estimated{ background: var(--hh-tint-blue);  color: var(--hh-blue); }
.quality-badge.manual   { background: var(--hh-tint-blue);  color: var(--hh-blue); }

/* ── Toast ─────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--hh-navy);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  border-radius: var(--r-lg);
  padding: 12px 20px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.toast.visible {
  transform: translateX(-50%) translateY(0);
}
.toast a {
  color: var(--hh-aqua-bright);
  margin-left: 10px;
  font-weight: 600;
}

/* ── Responsive form wrapper ───────────────────────────────────── */

.form-wrap {
  width: 90vw;
  margin: 0 auto;
}
@media (min-width: 601px)  { .form-wrap { max-width: 680px; } }
@media (min-width: 1025px) { .form-wrap { max-width: 760px; } }

/* ── Divider ───────────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--hh-border);
  margin: 18px 0;
}

/* ── Inline SVG icon sizing ────────────────────────────────────── */

.icon-sm  { width: 14px; height: 14px; }
.icon-md  { width: 18px; height: 18px; }
.icon-lg  { width: 22px; height: 22px; }

/* ── Crew pills ────────────────────────────────────────────────── */
.crew-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.crew-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--hh-surface);
  border: 1.5px solid var(--hh-border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--hh-muted);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.crew-pill:hover { border-color: var(--hh-aqua-deep); color: var(--hh-aqua-deep); }
.crew-pill.selected {
  background: var(--hh-tint-green);
  border-color: var(--hh-aqua-deep);
  color: var(--hh-aqua-deep);
}
.crew-flair {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 400;
  opacity: .7;
}

/* ── Data tables (cross-site) ─────────────────────────────────── */

table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.t thead tr {
  border-bottom: 2px solid var(--hh-border, #DBE3EC);
}
table.t thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--hh-muted, #697C90);
  text-align: left;
  padding: 0 8px 8px;
  white-space: nowrap;
}
table.t tbody tr {
  border-bottom: 1px solid var(--hh-border-soft, #E8EEF5);
}
table.t tbody tr:last-child { border-bottom: none; }
table.t tbody td {
  padding: 7px 8px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--hh-ink, #0A1B2E);
}
table.t tbody td.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
table.t tbody tr:hover {
  background: var(--hh-surface-2, #EEF3F9);
}
table.t tbody tr.row-active {
  background: var(--hh-tint-blue, #E8F1FE);
  box-shadow: inset 3px 0 0 var(--hh-blue, #147EFB);
}
table.t tfoot tr {
  border-top: 2px solid var(--hh-border, #DBE3EC);
}
table.t tfoot td {
  padding: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--hh-ink, #0A1B2E);
}

/* Compact density */
table.t.t-compact tbody td { padding: 4px 8px; line-height: 1.4; }
table.t.t-compact tbody td > div { margin: 0; }

/* Right-aligned numeric columns */
table.t th.num, table.t td.num { text-align: right; }

/* ── Scroll wrapper ───────────────────────────────────────────── */

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Panel card ───────────────────────────────────────────────── */

.panel {
  background: var(--hh-surface, #fff);
  border: 1px solid var(--hh-border, #DBE3EC);
  border-radius: var(--r-md, 10px);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(10, 27, 46, .06);
}
.panel:last-child { margin-bottom: 0; }

.pt {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--hh-muted, #697C90);
  margin-bottom: 10px;
}

.panel-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--hh-ink, #0A1B2E);
  margin: 0 0 8px;
}

/* ── What is this? (expandable explainer, §8 Layer 1) ─────────── */

.witi {
  background: var(--hh-surface-2, #EEF3F9);
  border: 1px solid var(--hh-border-soft, #E8EEF5);
  border-radius: var(--r-md, 10px);
  margin-bottom: 12px;
  cursor: pointer;
  overflow: hidden;
}
.witi-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}
.witi-icon {
  display: inline-block;
  width: 8px;
  font-size: 8px;
  color: var(--hh-muted, #697C90);
}
.witi-icon::before { content: '\25B6'; }
.witi.open .witi-icon::before { content: '\25BC'; }
.witi-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--hh-muted, #697C90);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.witi-body {
  display: none;
  padding: 0 12px 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--hh-ink-2, #3C4F63);
}
.witi.open .witi-body { display: block; }

/* ── Coach reads this as (callout box, §8 Layer 2) ────────────── */

.coach-callout {
  background: var(--hh-tint-blue, #E8F1FE);
  border: 1px solid var(--hh-blue, #147EFB);
  border-left: 3px solid var(--hh-blue, #147EFB);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  padding: 9px 12px;
  margin-bottom: 12px;
}
.cc-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hh-blue, #147EFB);
  margin-bottom: 3px;
}
.cc-text {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--hh-ink, #0A1B2E);
}

/* ═══════════════════════════════════════════════════════════════
   Help system — Mode-1 card overlay (see HELP-ARCHITECTURE.md §3)
   Graphical-first card: gradient strip · line-icon visual · headline ·
   ≤2-line body · optional gradient CTA · ghost Back/Next · dots · Skip.
   ═══════════════════════════════════════════════════════════════ */
.help-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
  background:rgba(10,27,46,.30);backdrop-filter:blur(2px);}
.help-card{position:relative;width:380px;max-width:100%;background:var(--hh-surface);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;}
.help-strip{height:4px;background:var(--hh-grad);}
.help-skip{position:absolute;top:14px;right:16px;font-family:var(--sans);font-size:12.5px;
  color:var(--hh-muted);background:none;border:0;cursor:pointer;padding:4px;}
.help-skip:hover{color:var(--hh-ink-2);}
.help-visual{height:150px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 0%, var(--hh-tint-blue) 0%, var(--hh-surface) 70%);}
.help-icon{width:72px;height:72px;fill:none;stroke:var(--hh-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.help-icon .accent{stroke:var(--hh-aqua-deep);}
.help-cardbody{padding:22px 26px 8px;text-align:center;}
.help-cardbody h2{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.3px;margin-bottom:9px;color:var(--hh-ink);}
.help-cardbody p{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--hh-ink-2);max-width:300px;margin:0 auto;min-height:42px;}
.help-ctarow{padding:14px 26px 4px;text-align:center;min-height:18px;}
.help-cta-btn{font-family:var(--display);font-weight:700;font-size:14px;border:0;border-radius:var(--r-md);
  padding:11px 20px;cursor:pointer;background:var(--hh-grad);color:#fff;box-shadow:var(--shadow-btn);}
.help-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 20px;}
.help-ghost{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--hh-ink-2);background:var(--hh-surface);
  border:0;box-shadow:inset 0 0 0 1.5px var(--hh-border);border-radius:var(--r-md);padding:9px 16px;cursor:pointer;min-width:78px;}
.help-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--hh-blue);color:var(--hh-blue);}
.help-ghost:disabled{opacity:.35;cursor:default;box-shadow:inset 0 0 0 1.5px var(--hh-border);color:var(--hh-ink-2);}
.help-next{color:var(--hh-blue);}
.help-dots{display:flex;gap:7px;}
.help-dot{width:7px;height:7px;border-radius:50%;background:var(--hh-border);transition:.2s;}
.help-dot.on{background:var(--hh-blue);width:20px;border-radius:var(--r-pill);}
@media(max-width:600px){
  .help-overlay{place-items:end center;padding:0;}
  .help-card{width:100%;max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;}
}

/* ═══════════════════════════════════════════════════════════════
   Help section — Tutorial archive (Mode 3) + Glossary (Mode 2)  v1.54.0
   ═══════════════════════════════════════════════════════════════ */
.tut-title{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.4px;margin-bottom:4px;color:var(--hh-ink);}
.tut-sub{color:var(--hh-muted);font-size:14px;margin-bottom:22px;}
.sh-help{display:flex;align-items:center;gap:10px;margin:24px 0 13px;}
.sh-help .bar{width:3px;height:16px;border-radius:2px;background:var(--hh-grad);}
.sh-help h2{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--hh-ink-2);margin:0;}
.tut-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.tut-tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--hh-surface);border:1px solid var(--hh-border);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.15s;}
.tut-tile:hover{border-color:var(--hh-blue);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.tut-ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--hh-tint-blue);}
.tut-ic .help-icon{width:26px;height:26px;}
.tut-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.tut-name{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--hh-ink);}
.tut-n{font-family:var(--mono);font-size:11px;color:var(--hh-muted);margin-top:2px;}
.tut-go{font-family:var(--display);font-weight:700;font-size:12px;color:var(--hh-blue);flex:0 0 auto;}
.gl-search{margin-bottom:16px;max-width:360px;}
.gl-search input{width:100%;font-family:var(--sans);font-size:13.5px;color:var(--hh-ink);background:var(--hh-surface);border:1px solid var(--hh-border);border-radius:var(--r-pill);padding:10px 16px;outline:0;}
.gl-search input:focus{border-color:var(--hh-blue);}
.gl-group{margin-bottom:16px;}
.gl-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--hh-aqua-deep);margin-bottom:6px;}
.gl-term{padding:10px 0;border-bottom:1px solid var(--hh-border);}
.gl-term:last-child{border-bottom:0;}
.gl-term dt{font-family:var(--display);font-weight:700;font-size:14px;color:var(--hh-ink);margin-bottom:3px;}
.gl-ac{font-family:var(--mono);font-weight:600;font-size:11.5px;color:var(--hh-blue);margin-left:7px;}
.gl-term dd{font-size:13.5px;line-height:1.5;color:var(--hh-ink-2);}

/* ═══════════════════════════════════════════════════════════════
   Invite a skipper — modal + feed card (6D)  v1.55.0
   ═══════════════════════════════════════════════════════════════ */
.inv-scrim{position:fixed;inset:0;background:rgba(10,27,46,.30);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;z-index:1200;}
.inv-modal{width:400px;max-width:100%;background:var(--hh-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;}
.inv-modal-strip{height:4px;background:var(--hh-grad);}
.inv-modal-body{padding:22px 24px 24px;}
.inv-modal-x{float:right;background:none;border:0;color:var(--hh-muted);font-size:18px;cursor:pointer;line-height:1;}
.inv-modal h2{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:6px;color:var(--hh-ink);}
.inv-modal-sub{font-size:13.5px;color:var(--hh-ink-2);line-height:1.5;margin-bottom:18px;}
.inv-form{display:flex;gap:8px;margin-bottom:8px;}
.inv-form input{flex:1;font-family:var(--sans);font-size:14px;color:var(--hh-ink);border:1px solid var(--hh-border);border-radius:var(--r-md);padding:11px 13px;outline:0;}
.inv-form input:focus{border-color:var(--hh-blue);}
.inv-send{font-family:var(--display);font-weight:700;font-size:13.5px;border:0;border-radius:var(--r-md);padding:0 18px;cursor:pointer;background:var(--hh-grad);color:#fff;box-shadow:var(--shadow-btn);}
.inv-send:disabled{opacity:.55;cursor:default;box-shadow:none;}
.inv-status{font-size:12.5px;min-height:16px;margin-bottom:2px;}
.inv-status.ok{color:var(--hh-aqua-deep);}
.inv-status.warn{color:#C8412B;}
.inv-left{font-family:var(--mono);font-size:11.5px;color:var(--hh-muted);margin:4px 0 18px;}
.inv-left b{color:var(--hh-aqua-deep);}
.inv-sent-h{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--hh-muted);margin-bottom:6px;}
.inv-sent-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--hh-border);font-size:13.5px;color:var(--hh-ink-2);}
.inv-sent-row:last-child{border-bottom:0;}
.inv-pill{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);}
.inv-pill.pending{background:var(--hh-surface-2);color:var(--hh-muted);}
.inv-pill.joined{background:var(--hh-tint-green);color:var(--hh-aqua-deep);}

.feedinv-card{position:relative;background:var(--hh-surface);border:1px solid var(--hh-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:14px;}
.feedinv-strip{height:4px;background:var(--hh-grad);}
.feedinv-x{position:absolute;top:9px;right:11px;background:none;border:0;color:var(--hh-muted);font-size:14px;cursor:pointer;line-height:1;}
.feedinv-body{display:flex;align-items:center;gap:14px;padding:14px 16px;}
.feedinv-ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--hh-tint-blue);}
.feedinv-ic svg{width:24px;height:24px;fill:none;stroke:var(--hh-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feedinv-ic .accent{stroke:var(--hh-aqua-deep);}
.feedinv-main{flex:1;min-width:0;}
.feedinv-main h3{font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:2px;color:var(--hh-ink);}
.feedinv-main p{font-size:12.5px;color:var(--hh-muted);line-height:1.4;}
.feedinv-btn{font-family:var(--display);font-weight:700;font-size:13px;border:0;border-radius:var(--r-md);padding:9px 16px;cursor:pointer;background:var(--hh-grad);color:#fff;box-shadow:var(--shadow-btn);flex:0 0 auto;}
@media(max-width:600px){.feedinv-main p{display:none;}}

/* Invite chooser step (skipper / crew) — v1.56.0 */
.inv-modal h2{display:flex;align-items:center;}
.inv-back{background:none;border:0;color:var(--hh-muted);font-size:22px;font-weight:700;cursor:pointer;margin-right:8px;line-height:1;padding:0;}
.inv-back:hover{color:var(--hh-blue);}
.inv-choice{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--hh-surface);border:1px solid var(--hh-border);border-radius:var(--r-lg);padding:14px 15px;cursor:pointer;margin-bottom:10px;transition:.15s;}
.inv-choice:hover{border-color:var(--hh-blue);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.inv-choice-ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--hh-tint-blue);}
.inv-choice-ic svg{width:22px;height:22px;stroke:var(--hh-blue);}
.inv-choice-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.inv-choice-h{font-family:var(--display);font-weight:700;font-size:15px;color:var(--hh-ink);}
.inv-choice-p{font-size:12.5px;color:var(--hh-muted);line-height:1.35;margin-top:1px;}
.inv-choice-go{font-family:var(--display);font-weight:700;font-size:18px;color:var(--hh-muted);flex:0 0 auto;}

/* ═══════════════════════════════════════════════════════════════
   Issue register — report a bug / idea / question (6B)  v1.57.0
   (reuses .inv-scrim / .inv-modal-strip / .inv-modal-body / .inv-modal-x / .inv-status)
   ═══════════════════════════════════════════════════════════════ */
.iss-modal{width:440px;max-width:100%;background:var(--hh-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;}
.iss-lbl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--hh-muted);display:block;margin:14px 0 7px;}
.iss-chips{display:flex;gap:8px;flex-wrap:wrap;}
.iss-chip{font-family:var(--display);font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--hh-border);background:var(--hh-surface);color:var(--hh-ink-2);cursor:pointer;transition:.12s;}
.iss-chip:hover{border-color:var(--hh-blue);}
.iss-chip.on{border-color:transparent;background:var(--hh-grad);color:#fff;box-shadow:var(--shadow-btn);}
.iss-input{width:100%;font-family:var(--sans);font-size:14px;color:var(--hh-ink);border:1px solid var(--hh-border);border-radius:var(--r-md);padding:11px 13px;outline:0;background:var(--hh-surface);}
.iss-input:focus{border-color:var(--hh-blue);}
textarea.iss-input{min-height:84px;resize:vertical;line-height:1.5;}
.iss-auto{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--hh-muted);margin:12px 0 14px;}
.iss-auto svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:var(--hh-muted);stroke-width:2;}
.iss-send{width:100%;font-family:var(--display);font-weight:700;font-size:14px;border:0;border-radius:var(--r-md);padding:12px;cursor:pointer;background:var(--hh-grad);color:#fff;box-shadow:var(--shadow-btn);}
.iss-send:disabled{opacity:.55;cursor:default;box-shadow:none;}
.iss-reg-wrap{margin-top:22px;border-top:1px solid var(--hh-border);padding-top:16px;}
.iss-reg-h{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--hh-muted);margin-bottom:8px;}
.iss-grp{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--hh-ink-2);margin:12px 0 4px;}
.iss-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hh-border);}
.iss-row:last-child{border-bottom:0;}
.iss-row-main{flex:1;min-width:0;}
.iss-row-t{font-size:13.5px;font-weight:600;color:var(--hh-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.iss-row-area{font-family:var(--mono);font-size:10.5px;color:var(--hh-muted);margin-top:2px;}
.iss-pill{font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);flex:0 0 auto;}
.iss-pill.open{background:var(--hh-surface-2);color:var(--hh-muted);}
.iss-pill.look{background:var(--hh-tint-amber,#fff4e0);color:#B7791F;}
.iss-pill.done{background:var(--hh-tint-green);color:var(--hh-aqua-deep);}

/* ═══════════════════════════════════════════════════════════════
   Admin — Reports triage (6C stage 1)  v1.58.0
   ═══════════════════════════════════════════════════════════════ */
.adm-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.adm-fchips{display:flex;gap:7px;flex-wrap:wrap;}
.adm-fchip{font-family:var(--mono);font-size:12px;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--hh-border);background:var(--hh-surface);color:var(--hh-ink-2);cursor:pointer;}
.adm-fchip.on{border-color:transparent;background:var(--hh-navy);color:#fff;}
.adm-statusfilter{font-family:var(--sans);font-size:13px;border:1px solid var(--hh-border);border-radius:var(--r-md);padding:8px 11px;background:var(--hh-surface);color:var(--hh-ink);margin-left:auto;}
.adm-card{background:var(--hh-surface);border:1px solid var(--hh-border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:15px 16px;margin-bottom:12px;}
.adm-top{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.adm-kind{font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:var(--r-pill);}
.adm-kind.bug{background:var(--hh-tint-red,#fdeaee);color:#C8412B;}
.adm-kind.idea{background:var(--hh-tint-blue);color:var(--hh-blue);}
.adm-kind.question{background:var(--hh-tint-amber,#fff4e0);color:#B7791F;}
.adm-kind.other{background:var(--hh-surface-2);color:var(--hh-muted);}
.adm-area{font-family:var(--mono);font-size:11px;color:var(--hh-muted);}
.adm-title{font-family:var(--display);font-weight:700;font-size:15.5px;margin-bottom:4px;color:var(--hh-ink);}
.adm-det{font-size:13.5px;color:var(--hh-ink-2);line-height:1.5;margin-bottom:8px;white-space:pre-wrap;}
.adm-ctx{font-family:var(--mono);font-size:11px;color:var(--hh-muted);background:var(--hh-surface-2);border-radius:8px;padding:7px 10px;margin-bottom:11px;word-break:break-word;}
.adm-triage{display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap;}
.adm-status{font-family:var(--sans);font-size:13px;border:1px solid var(--hh-border);border-radius:var(--r-md);padding:9px 11px;background:var(--hh-surface);color:var(--hh-ink);}
.adm-comment{flex:1;min-width:200px;font-family:var(--sans);font-size:13px;color:var(--hh-ink);border:1px solid var(--hh-border);border-radius:var(--r-md);padding:9px 11px;outline:0;min-height:40px;resize:vertical;line-height:1.45;background:var(--hh-surface);}
.adm-comment:focus{border-color:var(--hh-blue);}
.adm-save{font-family:var(--display);font-weight:700;font-size:12.5px;border:1px solid var(--hh-border);background:var(--hh-surface);color:var(--hh-ink);border-radius:var(--r-md);padding:9px 15px;cursor:pointer;}
.adm-save:hover{border-color:var(--hh-blue);}
@media(max-width:600px){.adm-comment{min-width:100%;}.adm-statusfilter{margin-left:0;}}

/* Admin — publish handoff bar + Send now (6C stage 2)  v1.59.0 */
.adm-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:14px 0 6px;margin-top:6px;background:linear-gradient(transparent,var(--hh-bg) 36%);}
.adm-pub-msg{flex:1;font-family:var(--mono);font-size:12px;}
.adm-pub-msg.ok{color:var(--hh-aqua-deep);}
.adm-pub-msg.warn{color:#C8412B;}
.adm-pub-msg a{color:var(--hh-blue);font-weight:600;text-decoration:none;}
.adm-publish{font-family:var(--display);font-weight:700;font-size:14px;border:0;border-radius:var(--r-md);padding:12px 20px;cursor:pointer;background:var(--hh-grad);color:#fff;box-shadow:var(--shadow-btn);flex:0 0 auto;}
.adm-publish:disabled{opacity:.6;cursor:default;}
.adm-send{font-family:var(--display);font-weight:700;font-size:12.5px;border:1px solid var(--hh-blue);background:var(--hh-tint-blue);color:var(--hh-blue);border-radius:var(--r-md);padding:9px 14px;cursor:pointer;}
.adm-send:hover{background:var(--hh-blue);color:#fff;}
.adm-send:disabled{opacity:.6;cursor:default;}