/*
 * Waypoints theme components: the parts every page is built from (header, tabs,
 * buttons, forms, messages, cards, the logbook grid, footer, tooltip). Colors
 * come only from tokens.css. Page-specific styles live in application.css.
 */

* { box-sizing: border-box; }
body.cp {
  margin: 0;
  background: var(--cp-page);
  color: var(--cp-text);
  font: var(--cp-size-body)/1.5 var(--cp-font);
}
.cp a { color: var(--cp-link); text-decoration: none; }
.cp a:hover { color: var(--cp-link-hover); }
.cp :focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; }
.cp-wrap { width: min(var(--cp-content-width), 100% - 2 * var(--cp-gutter)); margin: 0 auto; }

/* ---------- Header ---------- */
.cp-header {
  /* One compact row like Torchlit Tabletop and Pilot Light: lockup on the left,
     the account links centered on the right, a hairline rule underneath. */
  display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-4);
  min-height: var(--cp-header-height);
  padding: var(--cp-space-3) var(--cp-space-4);
  background: var(--cp-navy);
  border-bottom: 1px solid var(--cp-navy-line);
  position: relative;
  color: var(--cp-on-navy);
}
.cp-header .cp-logo { display: block; flex: none; }
.cp-header .cp-logo img { display: block; width: 200px; height: auto; }
.cp-header .cp-usernav {
  font-family: var(--cp-font-mono); font-weight: 500; font-size: var(--cp-size-body);
  color: var(--cp-on-navy-muted); text-align: right;
}
.cp .cp-header .cp-usernav a, .cp-usernav .cp-link-button { color: var(--cp-on-navy); }
.cp .cp-header .cp-usernav a:hover, .cp-usernav .cp-link-button:hover { color: var(--cp-on-navy-accent); }
.cp-header .cp-usernav .sep { margin: 0 6px; color: var(--cp-on-navy-muted); }
.cp-header .cp-usernav .trial { color: var(--cp-on-navy-accent); }
.cp-usernav form { display: inline; }
.cp-usernav .cp-link-button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* ---------- App tabs (signed in) ---------- */
.cp-tabs {
  display: flex; margin: 0; padding: 0 0 0 1em; list-style: none;
  height: 30px; line-height: 30px; background: var(--cp-surface-bar); border-bottom: 1px solid var(--cp-rule-strong);
}
.cp-tabs li { padding: 0 2.2em; border-right: 1px solid var(--cp-rule-strong); }
.cp-tabs li:last-child { border-right: 0; }
.cp-tabs a { font-size: var(--cp-size-body); }
.cp .cp-tabs li.active a { color: var(--cp-text-strong); font-weight: bold; }

/* ---------- Section tabs (pages within one app tab, e.g. Admin) ----------
 * A second bar hung off the app tabs: the active app tab gets a gold foot that
 * runs into it, and the pages inside it are quiet, smaller pills. */
.cp-tabs li { position: relative; }
.cp .cp-tabs li.active { box-shadow: inset 0 -3px 0 var(--cp-gold); }
.cp-subnav {
  display: flex; gap: 4px; align-items: center; margin: 0; padding: 6px 1em; overflow-x: auto;
  background: var(--cp-surface-sunken); border-bottom: 1px solid var(--cp-rule);
  font-size: 14px;
}
.cp-subnav a {
  padding: 3px 14px; white-space: nowrap; border-radius: 999px; color: var(--cp-text-muted);
}
.cp .cp-subnav a:hover { background: var(--cp-surface-bar); color: var(--cp-text-strong); }
.cp .cp-subnav a[aria-current=page] { background: var(--cp-surface-bar); color: var(--cp-text-strong); font-weight: bold; }

/* ---------- Buttons ---------- */
.cp-btn-signup {
  display: inline-block; min-width: 150px; padding: 10px 40px;
  font: bold 20px/1.2 var(--cp-font-display); text-align: center;
  background: var(--cp-cta); border: 1px solid var(--cp-cta-border); border-radius: var(--cp-radius-sm);
  box-shadow: var(--cp-shadow-raised); cursor: pointer; white-space: nowrap;
}
.cp .cp-btn-signup, .cp .cp-btn-signup:hover { color: var(--cp-on-cta); }
.cp-btn-signup:hover { background: var(--cp-cta-hover); }
.cp-btn, .cp-btn-pill {
  display: inline-block; font: bold var(--cp-size-caption)/17px var(--cp-font); color: var(--cp-control-text);
  background: var(--cp-control); border: 1px solid var(--cp-control-border); cursor: pointer;
}
.cp-btn { padding: 3px 10px; border-radius: var(--cp-radius-sm); }
/* The 2011 "Save Changes" and "Sign In" button. */
.cp-btn-pill { padding: 1px 12px; font-weight: normal; border-radius: var(--cp-radius-pill); }
.cp .cp-btn-pill { color: var(--cp-control-text); }
.cp-btn:hover, .cp-btn-pill:hover { background: var(--cp-control-hover); }
.cp .cp-link-arrow { white-space: nowrap; font-weight: bold; color: var(--cp-on-navy); font-size: 14px; }
.cp-link-arrow::after { content: " \27A1"; color: var(--cp-go); }

/* ---------- Cards and panels ---------- */
.cp-card {
  background: var(--cp-surface); border: 1px solid var(--cp-rule); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-card);
}
.cp-page { padding-top: var(--cp-space-5); }
.cp-page-title { margin: 0 0 14px; font: var(--cp-size-title)/1.2 var(--cp-font-display); color: var(--cp-text-strong); }
/* The 2011 Account Settings panel, with its grey cap. */
.cp-panel {
  background: var(--cp-surface-sunken); border: 1px solid var(--cp-rule); border-top: 30px solid var(--cp-surface-bar);
  border-radius: 2px; padding: 18px 18px var(--cp-space-5); max-width: 900px;
}
.cp-panel p { margin: 0 0 14px; color: var(--cp-text-muted); }

/* ---------- Forms ---------- */
/* Zero specificity, so any component's own colors (a pill button is an input too) win. */
:where(.cp input, .cp select, .cp textarea) { color: var(--cp-text); background: var(--cp-input); border: 1px solid var(--cp-input-border); }
.cp input[type=checkbox], .cp input[type=radio] { accent-color: var(--cp-selected); }
.cp-field { margin-bottom: 14px; }
.cp-field label { display: block; margin-bottom: 3px; font-weight: bold; color: var(--cp-text); }
.cp-field input { width: 220px; font: var(--cp-size-body) var(--cp-font); padding: 4px 5px; }
.cp-field select { font: var(--cp-size-body) var(--cp-font); padding: 3px; }
.cp-field-hint { margin: 3px 0 0; font-size: var(--cp-size-caption); color: var(--cp-text-muted); }
.cp-panel .cp-field-hint { margin: 3px 0 0; }
.cp .field_with_errors input { background: var(--cp-error); border-color: var(--cp-error-border); }
.cp-errors {
  margin: 0 0 14px; padding: 8px 12px 8px 28px; border: 1px solid var(--cp-error-border); border-radius: 4px;
  background: var(--cp-error); color: var(--cp-error-text); font-weight: bold;
}
.cp-inline-form { display: inline; }

/* ---------- Messages ---------- */
.cp-flash {
  width: min(var(--cp-content-width), 100% - 2 * var(--cp-gutter)); margin: 12px auto 0; padding: 8px 12px;
  border-radius: 4px; font-weight: bold; font-size: var(--cp-size-small);
}
.cp-flash.notice { background: var(--cp-notice); border: 1px solid var(--cp-notice-border); color: var(--cp-notice-text); }
.cp-flash.alert { background: var(--cp-error); border: 1px solid var(--cp-error-border); color: var(--cp-error-text); }
.cp-app .cp-flash { width: auto; margin: 10px 10px 0; }
.cp-warning { background: var(--cp-warning); border: 1px solid var(--cp-warning-border); color: var(--cp-warning-text); }

/* ---------- Landing hero ---------- */
.cp-hero {
  display: flex; flex-wrap: wrap; gap: 20px; margin: 12px auto 10px; padding: 22px 20px 28px;
  color: var(--cp-on-navy); border-radius: var(--cp-radius-panel);
  background: var(--cp-navy-panel) right -60px top -40px / 720px auto no-repeat;
}
/* The page adds background-image: url("hero-chart.svg"), the sectional-chart
   art, since the app and the design folder reach it by different paths. */
.cp-hero h1 {
  flex: 1 1 100%; margin: 0; font: bold var(--cp-size-hero)/1.1 var(--cp-font-display); letter-spacing: -1px;
}
.cp-hero-sample { flex: 0 1 630px; min-width: 0; overflow-x: auto; }
.cp-hero-pitch { flex: 1 1 220px; }
.cp-hero-copy { font-size: 16px; line-height: 1.4; }
.cp .cp-hero-copy a { color: var(--cp-on-navy); font-weight: bold; text-decoration: underline; }
.cp .cp-hero-copy a:hover { color: var(--cp-on-navy-accent); }
.cp-hero-cta { display: flex; align-items: center; gap: var(--cp-space-5); margin-top: 60px; }
.cp-hero table.cp-grid { align-self: start; font-size: 9px; }
.cp-hero table.cp-grid td { height: 14px; padding: 1px 4px; }
.cp-hero table.cp-grid th { padding: 2px; }
.cp-hero table.cp-grid tr.new input { padding: 0 2px; }

/* ---------- Feature grid ---------- */
.cp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 30px; padding: 18px 20px var(--cp-space-5); }
.cp-feature { display: grid; grid-template-columns: 60px 1fr; }
.cp-feature img { width: 48px; height: 48px; margin-top: 2px; }
.cp-feature h3 { margin: 0 0 6px; font: bold var(--cp-size-heading) var(--cp-font); color: var(--cp-text-strong); }
.cp-feature p { margin: 0; font-size: var(--cp-size-small); line-height: 1.4; color: var(--cp-text); }

/* ---------- Footer ---------- */
.cp-footer { text-align: center; padding: 10px 0 40px; border-top: 1px solid var(--cp-rule); margin-top: 30px; }
.cp-footer nav { font-size: 14px; }
.cp-footer nav .sep { color: var(--cp-text-faint); margin: 0 4px; }
.cp-footer small { display: block; margin-top: 20px; font-size: var(--cp-size-caption); color: var(--cp-text-faint); }

/* ---------- Logbook grid ---------- */
.cp-logbook-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: var(--cp-size-small); }
.cp-logbook-bar input[type=text] { font: var(--cp-size-small) var(--cp-font); padding: 3px 4px; }
.cp-logbook-bar .count { color: var(--cp-text-muted); }
.cp-logbook-bar .pager a { margin: 0 3px; }
.cp-logbook-bar .pager .current { background: var(--cp-selected); color: var(--cp-on-selected); padding: 0 4px; font-weight: bold; }
table.cp-grid {
  width: 100%; border-collapse: separate; border-spacing: 1px; background: var(--cp-grid-line);
  font: var(--cp-size-grid)/1.2 var(--cp-font-grid); color: var(--cp-grid-text); font-variant-numeric: tabular-nums;
}
table.cp-grid th {
  background: var(--cp-grid-head); padding: 5px 3px; font-weight: bold; text-align: center; color: var(--cp-grid-text);
}
table.cp-grid th abbr { text-decoration: underline dotted; cursor: help; }
table.cp-grid td { padding: 4px 5px; height: 26px; vertical-align: middle; white-space: nowrap; }
table.cp-grid td.num { text-align: right; }
table.cp-grid tr:nth-child(odd) td { background: var(--cp-row-odd); }
table.cp-grid tr:nth-child(even) td { background: var(--cp-row-even); }
/* Row states below beat the striping above by coming later at equal or higher specificity. */
table.cp-grid tr.new td, table.cp-grid tr.remarks td, table.cp-grid tr.quicktags td { background: var(--cp-row-new); }
table.cp-grid tr.new input { width: 100%; font: var(--cp-size-grid) var(--cp-font-grid); padding: 2px; text-align: right; }
table.cp-grid tr.new input.hint { background: var(--cp-warning); border-color: var(--cp-warning-border); text-align: left; }
table.cp-grid tr.remarks textarea { width: 100%; height: 3em; font: italic var(--cp-size-grid) var(--cp-font-mono); }
table.cp-grid tr.quicktags td { font-size: var(--cp-size-grid); }
table.cp-grid tr.quicktags a { margin-right: 6px; }
table.cp-grid tr.totals td { background: var(--cp-row-totals); }
table.cp-grid tr.totals td:first-child { font-weight: bold; }
table.cp-grid tr.empty td {
  background: var(--cp-row-empty); text-align: center; font: bold var(--cp-size-heading) var(--cp-font); color: var(--cp-text); height: 38px;
}
table.cp-grid tr.duplicate td { background: var(--cp-row-duplicate); }
table.cp-grid tr.invalid td { background: var(--cp-row-invalid); }
table.cp-grid tr.pending td { background: var(--cp-row-pending); }
table.cp-grid tr.awaiting td { background: var(--cp-row-awaiting); }
table.cp-grid tr.requesting td { background: var(--cp-row-requesting); }
table.cp-grid tr.planned td { color: var(--cp-text-faint); font-style: italic; }
table.cp-grid tr.correction td { color: var(--cp-text-muted); font-style: italic; }
/* A row state's word, so states never rest on color alone. */
table.cp-grid .cp-row-note {
  margin-left: 4px; padding: 0 3px; border: 1px solid currentColor; border-radius: 2px; font-size: 9px; font-style: normal;
}
/* A failed cross-country check: tinted, outlined and underlined. */
table.cp-grid tr:nth-child(n) td.cp-flagged { background: var(--cp-flag); box-shadow: inset 0 0 0 1px var(--cp-flag-border); }
table.cp-grid td.cp-flagged span { border-bottom: 1px dotted currentColor; cursor: help; }

/* ---------- Tooltip ---------- */
.cp-tip {
  display: inline-block; position: relative; background: var(--cp-navy-deep); color: var(--cp-on-navy); font-size: var(--cp-size-small);
  padding: 3px 8px; border-radius: var(--cp-radius-sm); box-shadow: var(--cp-shadow-card);
}
.cp-tip::before {
  content: ""; position: absolute; top: -6px; left: 12px; border: 6px solid transparent; border-top: 0;
  border-bottom-color: var(--cp-navy-deep);
}

/* ---------- Text pages (privacy policy, terms) ---------- */
.cp-prose { margin-top: 20px; padding: 10px 30px 20px; font-size: var(--cp-size-body); line-height: 1.5; }
.cp-prose h1 { font: bold 22px var(--cp-font-display); color: var(--cp-text-strong); }
.cp-prose h2 { margin: 22px 0 6px; font: bold var(--cp-size-heading) var(--cp-font); color: var(--cp-text-strong); }
.cp-prose ul { padding-left: 20px; }
.cp-prose li { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .cp * { transition: none !important; }
}