/* Catch and Print Co. portal and customer pages.

   ONE stylesheet for every page a captain or a customer sees (the admin pages keep
   captain_portal.css). The tokens are copied from the storefront's assets/cp-base.css so the portal
   and catchandprintco.com read as one site: flat colour, Oswald display type, Inter body, 2px corners,
   ink buttons with spaced uppercase labels, square image tiles, ruled lists instead of shadowed cards.

   Phone first. Two rules this sheet exists to keep:
   - no text under 14px on a phone (the old portal had 29 labels at 7-12px on the catch page alone);
   - every control a thumb has to hit is at least 48px tall, buttons 50px. */

:root {
  --cp-paper: #f4f1ea;
  --cp-paper-deep: #e9e4d8;
  --cp-white: #ffffff;
  --cp-ink: #0f2327;
  --cp-ink-soft: #3d4e52;
  --cp-muted: #6b7a7d;
  --cp-rule: #d9d3c5;
  --cp-brand: #0b3d49;
  --cp-good: #1d6b4f;
  --cp-bad: #9b2c1f;
  --cp-display: 'Oswald', 'Arial Narrow', sans-serif;
  --cp-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --cp-gutter: 16px;
  --cp-max: 1120px;
  --cp-top-h: 56px;
  --cp-tab-h: 64px;
}
@media (min-width: 760px) { :root { --cp-gutter: 32px; --cp-top-h: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must beat every class that sets `display`. The UA rule loses to any class selector,
   which once left an empty coloured badge on every dashboard. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cp-paper); color: var(--cp-ink);
  font-family: var(--cp-body); font-size: 16px; line-height: 1.55;
  overflow-x: hidden;
  /* Footer sits at the bottom of the window on short pages instead of leaving a strip of paper. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body > main, body > .cp-center, body > .cp-main { flex: 1 0 auto; width: 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.cp-display, h1.cp-h1 {
  font-family: var(--cp-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.02; margin: 0; color: var(--cp-ink);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
}
.cp-h2 {
  font-family: var(--cp-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: .02em; line-height: 1.12; margin: 0;
}
.cp-h3 {
  font-family: var(--cp-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: .03em; line-height: 1.2; margin: 0;
}
.cp-lead { font-size: 1.05rem; line-height: 1.6; color: var(--cp-ink-soft); margin: 0; }
.cp-body { font-size: 1rem; line-height: 1.6; color: var(--cp-ink-soft); margin: 0; }
.cp-small { font-size: .9rem; line-height: 1.5; color: var(--cp-muted); margin: 0; }
.cp-strong { font-weight: 600; color: var(--cp-ink); }
.cp-good { color: var(--cp-good); }
.cp-bad { color: var(--cp-bad); }

/* ---------- Buttons ---------- */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: 2px; cursor: pointer;
  font-family: var(--cp-body); font-size: .875rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  background: var(--cp-ink); color: var(--cp-white); border: 1.5px solid var(--cp-ink);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cp-btn:hover { background: var(--cp-brand); border-color: var(--cp-brand); color: var(--cp-white); }
.cp-btn:focus-visible, .cp-link:focus-visible, .cp-input:focus-visible { outline: 3px solid var(--cp-brand); outline-offset: 2px; }
.cp-btn[disabled], .cp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cp-btn--ghost { background: transparent; color: var(--cp-ink); }
.cp-btn--ghost:hover { background: var(--cp-ink); color: var(--cp-white); border-color: var(--cp-ink); }
.cp-btn--light { background: var(--cp-white); color: var(--cp-ink); border-color: var(--cp-white); }
.cp-btn--light:hover { background: var(--cp-paper); color: var(--cp-ink); border-color: var(--cp-paper); }
.cp-btn--block { display: flex; width: 100%; }
.cp-btn--small { min-height: 48px; padding: 0 18px; }
.cp-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-btn-row > .cp-btn { flex: 1 1 auto; }

.cp-link {
  display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0;
  cursor: pointer; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--cp-ink);
}
.cp-link span { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.cp-link:hover { color: var(--cp-brand); }
.cp-text-link { color: var(--cp-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header (storefront parity: teal bar, white wordmark) ---------- */
.cp-top {
  position: sticky; top: 0; z-index: 40; background: var(--cp-brand); color: var(--cp-white);
}
.cp-top__inner {
  max-width: var(--cp-max); margin-inline: auto; padding-inline: var(--cp-gutter);
  height: var(--cp-top-h); display: flex; align-items: center; gap: 20px;
}
.cp-top__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.cp-top__logo img { height: 22px; width: auto; }
@media (min-width: 760px) { .cp-top__logo img { height: 28px; } }
.cp-top__spacer { flex: 1; }
.cp-top__link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--cp-white);
  font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; opacity: .88; background: none; border: 0; padding: 0; cursor: pointer;
}
.cp-top__link:hover, .cp-top__link[aria-current="page"] { opacity: 1; }
.cp-top__link[aria-current="page"] span { border-bottom: 2px solid var(--cp-white); padding-bottom: 4px; }

/* Portal desktop nav lives in the top bar; on a phone it moves to the bottom tab bar. */
.cp-nav { display: none; align-items: center; gap: 26px; }
.cp-top__send { display: none; }
@media (min-width: 900px) {
  .cp-nav { display: flex; }
  .cp-top__send { display: inline-flex; min-height: 44px; padding: 0 18px; }
}
.cp-top__logout form { margin: 0; }

/* ---------- Bottom tab bar (phone) ---------- */
.cp-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--cp-white); border-top: 1px solid var(--cp-rule);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cp-tabbar ul {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--cp-tab-h);
}
.cp-tabbar a {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--cp-muted); font-size: 14px; font-weight: 600; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.cp-tabbar svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cp-tabbar a[aria-current="page"] { color: var(--cp-ink); }
.cp-tabbar a[aria-current="page"] svg { stroke-width: 2.3; }
.cp-tabbar .cp-tabbar__send { color: var(--cp-ink); }
.cp-tabbar .cp-tabbar__send svg {
  width: 40px; height: 32px; padding: 5px 10px; background: var(--cp-ink); stroke: var(--cp-white);
  border-radius: 2px; stroke-width: 2.2;
}
@media (min-width: 900px) { .cp-tabbar { display: none; } }
.cp-has-tabbar { padding-bottom: calc(var(--cp-tab-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .cp-has-tabbar { padding-bottom: 0; } }

/* ---------- Page layout ---------- */
.cp-main { max-width: var(--cp-max); margin-inline: auto; padding: 24px var(--cp-gutter) 56px; }
.cp-main--narrow { max-width: 640px; }
.cp-main--form { max-width: 760px; }
@media (min-width: 760px) { .cp-main { padding-top: 40px; padding-bottom: 80px; } }
.cp-page-head { margin-bottom: 20px; }
.cp-page-head .cp-lead { margin-top: 10px; max-width: 60ch; }
.cp-section { margin-top: 36px; }
.cp-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.cp-grid-2 { display: grid; gap: 16px; }
@media (min-width: 760px) { .cp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.cp-grid-3 { display: grid; gap: 16px; }
@media (min-width: 760px) { .cp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* A plain white block with a hairline. No shadow, no gradient. */
.cp-panel { background: var(--cp-white); border: 1px solid var(--cp-rule); border-radius: 2px; padding: 20px; }
@media (min-width: 760px) { .cp-panel { padding: 24px 28px; } }
.cp-panel--ink { background: var(--cp-ink); border-color: var(--cp-ink); color: var(--cp-white); }
.cp-panel--ink .cp-small, .cp-panel--ink .cp-body { color: rgba(255, 255, 255, .8); }
.cp-panel--paper { background: var(--cp-paper-deep); border-color: var(--cp-paper-deep); }
.cp-panel + .cp-panel { margin-top: 16px; }
.cp-rule { border: 0; border-top: 1px solid var(--cp-rule); margin: 20px 0; }

/* ---------- Money, points, big figures ---------- */
.cp-figure-label { font-size: .9rem; font-weight: 600; color: var(--cp-ink-soft); margin: 0; }
.cp-figure {
  font-family: var(--cp-display); font-weight: 600; font-size: clamp(2.3rem, 7vw, 3rem); line-height: 1;
  margin: 6px 0 6px; color: var(--cp-ink); letter-spacing: .01em;
}
.cp-panel--ink .cp-figure, .cp-panel--ink .cp-figure-label { color: var(--cp-white); }
.cp-figure--md { font-size: 2rem; }
.cp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cp-split > div { min-width: 0; }

/* ---------- Ruled lists ---------- */
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list > li, .cp-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--cp-rule);
}
.cp-list > li:first-child { border-top: 1px solid var(--cp-rule); }
.cp-list--flush > li:first-child { border-top: 0; padding-top: 0; }
.cp-list--flush > li:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-row__main { min-width: 0; flex: 1; }
.cp-row__title { font-weight: 600; color: var(--cp-ink); margin: 0; overflow-wrap: anywhere; }
.cp-row__sub { font-size: .9rem; color: var(--cp-muted); margin: 2px 0 0; }
.cp-row__amount { font-family: var(--cp-display); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.cp-row__amount.is-plus { color: var(--cp-good); }
.cp-row__amount.is-minus { color: var(--cp-bad); }

/* ---------- Status label: sentence case, never shouty ---------- */
.cp-status {
  display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--cp-ink);
}
.cp-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--cp-muted); flex: none; }
.cp-status.is-working::before { background: #b7892f; }
.cp-status.is-sent::before { background: var(--cp-brand); }
.cp-status.is-done::before { background: var(--cp-good); }
.cp-status.is-problem::before { background: var(--cp-bad); }

/* ---------- Step timeline ---------- */
.cp-steps { list-style: none; margin: 0; padding: 0; }
.cp-steps li {
  position: relative; padding: 0 0 14px 30px; font-size: .95rem; color: var(--cp-muted); line-height: 1.4;
}
.cp-steps li:last-child { padding-bottom: 0; }
.cp-steps li::before {
  content: ''; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--cp-rule); background: var(--cp-white);
}
.cp-steps li::after {
  content: ''; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--cp-rule);
}
.cp-steps li:last-child::after { display: none; }
.cp-steps li.is-done { color: var(--cp-ink-soft); }
.cp-steps li.is-done::before { background: var(--cp-ink); border-color: var(--cp-ink); }
.cp-steps li.is-done::after { background: var(--cp-ink); }
.cp-steps li.is-now { color: var(--cp-ink); font-weight: 600; }
.cp-steps li.is-now::before { border-color: var(--cp-ink); background: var(--cp-white); box-shadow: inset 0 0 0 3px var(--cp-white), inset 0 0 0 7px var(--cp-ink); }
.cp-steps li small { display: block; font-weight: 400; color: var(--cp-muted); font-size: .9rem; margin-top: 2px; }

/* ---------- Progress meter ---------- */
.cp-meter { height: 8px; background: var(--cp-paper-deep); border-radius: 1px; overflow: hidden; margin: 10px 0 8px; }
.cp-meter > span { display: block; height: 100%; background: var(--cp-ink); }
.cp-panel--ink .cp-meter { background: rgba(255, 255, 255, .2); }
.cp-panel--ink .cp-meter > span { background: var(--cp-white); }

/* ---------- Notices ---------- */
.cp-note {
  background: var(--cp-paper-deep); border-left: 3px solid var(--cp-ink); padding: 14px 16px;
  font-size: .95rem; line-height: 1.55; color: var(--cp-ink-soft); margin: 0;
}
.cp-note strong { color: var(--cp-ink); }
.cp-note--good { border-left-color: var(--cp-good); }
.cp-note--bad { border-left-color: var(--cp-bad); }
.cp-note a { color: var(--cp-brand); font-weight: 600; }
.cp-note ul { margin: 6px 0 0; padding-left: 20px; }
.cp-error-text { color: var(--cp-bad); font-size: .95rem; font-weight: 600; margin: 0; }

/* ---------- Forms ---------- */
.cp-form { display: grid; gap: 18px; }
.cp-field { display: grid; gap: 6px; min-width: 0; }
.cp-field > span, .cp-label { font-size: .95rem; font-weight: 600; color: var(--cp-ink); }
.cp-field .cp-hint, .cp-hint { font-size: .9rem; color: var(--cp-muted); font-weight: 400; line-height: 1.45; }
.cp-optional { font-weight: 400; color: var(--cp-muted); }
.cp-input, .cp-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .cp-field select, .cp-field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #c8c1b1; border-radius: 2px;
  background: var(--cp-white); color: var(--cp-ink); font-size: 16px; line-height: 1.3;
}
.cp-field textarea { min-height: 110px; resize: vertical; }
.cp-field input:focus, .cp-field select:focus, .cp-field textarea:focus { outline: 2px solid var(--cp-brand); outline-offset: 0; border-color: var(--cp-brand); }
.cp-field input[readonly] { background: var(--cp-paper); color: var(--cp-ink-soft); }
.cp-field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .cp-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--cp-ink-soft); cursor: pointer; }
.cp-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--cp-ink); }
.cp-pw { position: relative; }
.cp-pw input { padding-right: 76px !important; }
.cp-pw button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 42px; padding: 0 12px;
  background: none; border: 0; cursor: pointer; font-size: .875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cp-brand);
}

/* ---------- Drawers ---------- */
.cp-drawer { border-top: 1px solid var(--cp-rule); }
.cp-drawer:last-of-type { border-bottom: 1px solid var(--cp-rule); }
.cp-drawer > summary {
  list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-weight: 600; font-size: 1rem;
}
.cp-drawer > summary::-webkit-details-marker { display: none; }
.cp-drawer > summary::after { content: '+'; font-family: var(--cp-display); font-size: 1.5rem; line-height: 1; color: var(--cp-ink-soft); }
.cp-drawer[open] > summary::after { content: '\2212'; }
.cp-drawer__body { padding-bottom: 18px; }

/* ---------- Loading / errors ---------- */
.cp-loading { color: var(--cp-muted); font-size: .95rem; margin: 0; }
.cp-empty { color: var(--cp-muted); font-size: .95rem; margin: 0; padding: 6px 0; }
.load-error {
  background: #f7e6e2; border-left: 3px solid var(--cp-bad); padding: 14px 16px; color: var(--cp-ink);
  font-size: .95rem; margin: 0 0 16px;
}
.load-error button { background: none; border: 0; padding: 0; color: var(--cp-brand); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* ---------- Dialog ---------- */
.cp-dialog {
  position: fixed; inset: 0; z-index: 80; background: rgba(15, 35, 39, .55);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
@media (min-width: 640px) { .cp-dialog { align-items: center; padding: 24px; } }
.cp-dialog__card {
  background: var(--cp-white); width: 100%; max-width: 520px; padding: 24px var(--cp-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 2px 2px 0 0; max-height: 92vh; overflow-y: auto;
}
@media (min-width: 640px) { .cp-dialog__card { border-radius: 2px; padding: 28px; } }

/* ---------- Toast (copy confirmations) ---------- */
.cp-toast {
  position: fixed; left: 50%; bottom: calc(var(--cp-tab-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 90; background: var(--cp-ink); color: var(--cp-white);
  padding: 12px 18px; font-size: .95rem; font-weight: 600; border-radius: 2px; max-width: calc(100vw - 32px);
}
@media (min-width: 900px) { .cp-toast { bottom: 28px; } }

/* ---------- Footer ---------- */
.cp-foot { border-top: 1px solid var(--cp-rule); background: var(--cp-white); }
.cp-foot__inner {
  max-width: var(--cp-max); margin-inline: auto; padding: 24px var(--cp-gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  font-size: .9rem; color: var(--cp-muted);
}
.cp-foot a { color: var(--cp-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Simple centred page (sign in, thank you, link expired) ---------- */
.cp-center { max-width: 480px; margin-inline: auto; padding: 36px var(--cp-gutter) 64px; }
@media (min-width: 760px) { .cp-center { padding-top: 72px; } }
.cp-center .cp-display { font-size: clamp(1.9rem, 6vw, 2.5rem); }
.cp-center .cp-lead { margin-top: 12px; }
.cp-center-actions { display: grid; gap: 12px; margin-top: 24px; }
.cp-after { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cp-rule); display: grid; gap: 8px; font-size: .95rem; color: var(--cp-ink-soft); }
.cp-after a { color: var(--cp-brand); font-weight: 600; }

/* ---------- Code chip (referral codes, reward codes) ---------- */
.cp-code {
  display: inline-block; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 1.15rem; font-weight: 700;
  letter-spacing: .08em; background: var(--cp-paper); border: 1px dashed var(--cp-ink-soft); padding: 8px 14px; border-radius: 2px;
  overflow-wrap: anywhere;
}
.cp-copy-field { display: flex; gap: 8px; align-items: stretch; }
.cp-copy-field input { flex: 1; min-width: 0; min-height: 50px; padding: 0 12px; border: 1px solid #c8c1b1; border-radius: 2px; background: var(--cp-paper); font-size: 16px; color: var(--cp-ink-soft); }

/* Panels side by side in a grid take the grid's gap, not the stacked-panel margin. */
.cp-grid-2 > .cp-panel + .cp-panel, .cp-grid-3 > .cp-panel + .cp-panel { margin-top: 0; }
/* The page's main call to action is full width on a phone, a normal button on desktop. */
@media (min-width: 900px) { .cp-btn--cta { display: inline-flex; width: auto; min-width: 300px; } }

/* ---------- Stack spacing ----------
   Last in the sheet on purpose: a component that zeroes its own margin (.cp-note, .cp-small) must
   still take the stack's gap when it sits inside one. */
.cp-stack > * + * { margin-top: 12px; }
.cp-stack-lg > * + * { margin-top: 20px; }