/* usharbormaster — "Chart & Light List" theme (opt-in).
 *
 * Loaded only when the ushm_theme cookie is "chart". The classic look stays
 * the default for everyone; see theme.cfm and layout/htmlhead.cfm.
 *
 * The conventions here are borrowed from NOAA charts and the Light List,
 * because that is what these users read all day:
 *   - MAGENTA is the chart colour for lights, radio and regulatory info,
 *     i.e. exactly this product's subject. It is rationed to interaction and
 *     state, never used as decoration.
 *   - ITALIC marks a water feature, upright marks land.
 *   - Red and green NEVER carry meaning alone; a shape column carries it too,
 *     which is both a chart convention and what makes it colourblind-safe.
 *   - Positions are monospaced with tabular figures so coordinates align down
 *     the page and scan like a Light List column.
 *
 * Fonts are the ones already vendored in styles/fonts — no CDN call, which
 * matters on a locked-down government network and on a phone in the field.
 */

@font-face{font-family:'Source Serif 4';src:url('/styles/fonts/SourceSerif4-400.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/styles/fonts/PublicSans-400.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/styles/fonts/PublicSans-400-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/styles/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/styles/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --navy:#16315C; --navy-deep:#0E2140;
  --magenta:#C6127F; --magenta-ink:#9B0E63;
  --buff:#F4EFE2; --buff-deep:#EAE2CE; --shoal:#DCEAF2;
  --buoy-red:#C8102E; --buoy-green:#007A33;
  --paper:#FBF8F0; --line:#D9CFB8; --line-soft:#EAE2CE;
  --ink:#1A2233; --ink-muted:#5A6472; --ink-faint:#8A8676;
  --ok:#007A33; --warn:#B45309; --err:#C8102E;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;
  --r:3px;
}
[data-theme="dark"]{
  --paper:#0F1822; --buff:#16202B; --buff-deep:#1C2733; --shoal:#16283A;
  --line:#2A3644; --line-soft:#212C39;
  --ink:#E9E3D5; --ink-muted:#A9AFB8; --ink-faint:#6E7681;
  --navy:#9FC0F0; --magenta:#FF5BB8; --magenta-ink:#FF7FC7;
  --buoy-red:#F0596E; --buoy-green:#46B863;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1822; --buff:#16202B; --buff-deep:#1C2733; --shoal:#16283A;
  --line:#2A3644; --line-soft:#212C39;
  --ink:#E9E3D5; --ink-muted:#A9AFB8; --ink-faint:#6E7681;
  --navy:#9FC0F0; --magenta:#FF5BB8; --buoy-red:#F0596E; --buoy-green:#46B863;
}}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0 0 var(--s2)}
h1{font-size:30px} h2{font-size:21px} h3{font-size:16px}
a{color:var(--navy)}
.wrap{max-width:1120px;margin:0 auto;padding:var(--s5) var(--s4)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}
.coords{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
/* depth-contour rule, used as the section divider */
.contour{height:1px;border:0;background-image:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 11px);margin:var(--s5) 0}

.govbar{background:var(--navy-deep);color:#EDF1F7;font-size:12px;padding:5px 0}
.govbar .wrap{padding:0 var(--s4)}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);
  background:var(--buff);border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brandmark b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.02em}
.brandmark i{font-family:var(--serif);font-style:italic;font-weight:400}

.btn{font-family:var(--sans);font-size:14px;font-weight:600;padding:8px 16px;border-radius:var(--r);
  border:1px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn-primary:hover{background:var(--magenta-ink);border-color:var(--magenta-ink)}
.btn-secondary{background:var(--buff);border-color:var(--line)}
.btn-ghost{border-color:transparent}
/* Official actions (sign in, submit registration): navy, the service's colour.
   Magenta stays rationed to chart accents — eyebrow, flare, focus. */
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
[data-theme="dark"] .btn-navy{color:#0E2140}
[data-theme="dark"] .btn-navy:hover{background:var(--navy);filter:brightness(1.1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-navy{color:#0E2140}
  :root:not([data-theme="light"]) .btn-navy:hover{background:var(--navy);filter:brightness(1.1)}
}

/* Agency lockup — the U.S. Coast Guard leads on public pages, the way the
   classic banner did; the product mark lives in the footer. */
.agency{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.agency img{display:block}
.agency-name{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.15}
.agency-sub{font-size:11.5px;color:var(--ink-muted);letter-spacing:.02em}
/* User chrome in layout/appheader.cfm. Both classes live in ushm.css; without
   them here the avatar stacked on top of "Sign out" under the chart theme. */
.flex{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700}

.card{background:var(--buff);border:1px solid var(--line);border-radius:var(--r)}
.tablehead{background:var(--buff-deep);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.stat{background:var(--buff);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);border-top:2px solid var(--navy)}
.stat.warn{border-top-color:var(--warn)} .stat.crit{border-top-color:var(--magenta)} .stat.ok{border-top-color:var(--ok)}
.stat .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.stat .v{font-family:var(--mono);font-weight:500;font-size:28px;line-height:1.1;margin-top:5px}

table.datatable{width:100%;border-collapse:collapse;font-size:13.5px}
table.datatable th{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--navy);white-space:nowrap}
table.datatable td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
table.datatable tr:hover td{background:var(--shoal)}
.aidname{font-weight:600}
.water{font-style:italic;color:var(--ink-muted)}   /* chart convention */
.sym{display:inline-block;width:13px;text-align:center;margin-right:6px}

.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1px solid}
.b-approved{color:var(--buoy-green);border-color:var(--buoy-green)}
.b-pending{color:var(--ink-muted);border-color:var(--line)}
.b-due{color:var(--warn);border-color:var(--warn)}
.b-overdue{color:var(--magenta);border-color:var(--magenta)}

/* A lighted aid blinks its real characteristic. Established aids only. */
.flash{animation:ushm-fl 4s steps(1,end) infinite}
.flash-6s{animation-duration:6s}
@keyframes ushm-fl{0%,12%{opacity:1}12.01%,100%{opacity:.18}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;opacity:1}}

input[type=text],input[type=password],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--magenta);outline-offset:-1px;border-color:var(--magenta)}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);margin-bottom:4px}

.alert{display:flex;gap:10px;padding:11px 13px;border-radius:var(--r);font-size:13.5px;border:1px solid;margin-bottom:var(--s2)}
.a-err{color:var(--err);border-color:var(--err)}
.a-warn{color:var(--warn);border-color:var(--warn)}
.a-ok{color:var(--ok);border-color:var(--ok)}

.page-center{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.page-center>.card{width:100%;max-width:420px;padding:var(--s5)}

/* Long-form pages (registration): top-aligned, wider card, grouped fields */
.page-top{display:flex;justify-content:center;padding:var(--s5) var(--s4)}
.page-top>.card{width:100%;max-width:680px;padding:var(--s5)}
.field{margin-bottom:var(--s3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
.field-row-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 var(--s3)}
@media(max-width:640px){.field-row,.field-row-3{grid-template-columns:1fr}}
.radio-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);padding-top:2px}
.radio-row label{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:400;color:var(--ink);margin:0}
.radio-row input[type=radio]{accent-color:var(--magenta)}
.hint{font-size:12px;color:var(--ink-faint);margin-top:4px}
.captcha-img{display:block;border:1px dashed var(--line);border-radius:var(--r);background:#fff}
footer{border-top:1px solid var(--line);margin-top:var(--s6);padding:var(--s4);font-size:12.5px;color:var(--ink-muted)}
.mi{font-family:var(--serif);font-size:14px;color:var(--ink)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}

/* MotionInfo mark. The supplied asset is white-on-transparent, which is
   invisible on the light chart paper, so a navy tint is derived from its alpha
   channel and both are shipped. Swapped by theme rather than filtered, because
   CSS filters cannot tint a PNG to a specific brand colour dependably. */
.mi-logo{display:block;height:38px;width:auto;margin-bottom:6px}
.mi-logo-dark{display:none}
[data-theme="dark"] .mi-logo{display:none}
[data-theme="dark"] .mi-logo-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mi-logo{display:none}
  :root:not([data-theme="light"]) .mi-logo-dark{display:block}
}

/* Aid marks + status colour coding (secure/dashboard.cfm).
   The status swatch colour comes from dbo.status.StatusColor — the same values
   the classic grid's KEY uses, so the colour language carries over unchanged.
   The mark SVG is drawn by components/AidSymbol.cfc: shape carries the meaning
   alongside colour, so red/green deficiency doesn't lose information. */
.symcell{width:30px;padding-right:0}
.aidsym{display:block}
.statusdot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;
  vertical-align:baseline;border:1px solid rgba(0,0,0,.25)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);padding:12px 16px;border-top:1px solid var(--line-soft);font-size:12px}
.legend .item{display:flex;align-items:center;gap:7px;color:var(--ink-muted)}
.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}