/* =========================================================================
   PSC Marine — Customer Repair Order Portal
   Palette: harbor navy / gelcoat white / channel-marker teal /
            buoy orange (warnings) / signal red (over estimate)
   Type:    Barlow Semi Condensed (display, like shop signage) + Barlow (body)
   Signature element: the "hour meter" — a ticked gauge bar comparing
            technician time on the clock to the estimate.
   ====================================================================== */

:root{
  --navy:      #0d2438;
  --navy-deep: #081827;
  --gelcoat:   #f4f7f9;
  --hull:      #ffffff;
  --line:      #d7dee4;
  --ink:       #12212f;
  --ink-soft:  #54646f;
  --teal:      #0e7d84;
  --teal-dark: #0a5f65;
  --buoy:      #e08a00;
  --signal:    #c8402e;
  --ok:        #2e7d4f;
  --radius:    10px;
  --shadow:    0 1px 3px rgba(13,36,56,.10), 0 6px 18px rgba(13,36,56,.06);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--gelcoat);
}
h1,h2,h3{ font-family:'Barlow Semi Condensed','Barlow',sans-serif; letter-spacing:.2px; }
a{ color:var(--teal-dark); }
.wrap{ max-width:880px; margin:0 auto; padding:0 20px; }

/* ---------------------------------------------------------------- header */
.masthead{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  border-bottom:3px solid var(--teal);
}
.masthead-in{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.brand{ display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.brand-mark{ color:#8fd0d4; display:flex; }
.brand-text strong{
  display:block; font-family:'Barlow Semi Condensed',sans-serif;
  font-size:20px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.brand-text small{ display:block; font-size:12px; color:#a9c1cf; letter-spacing:.6px; }
.masthead-nav{ display:flex; align-items:center; gap:18px; }
.masthead-nav a{ color:#dceaf0; text-decoration:none; font-size:14px; font-weight:500; }
.masthead-nav a:hover{ color:#fff; }
.masthead-phone{ color:#a9c1cf; font-size:14px; }
.btn-ghost{ border:1px solid #3a586d; padding:7px 14px; border-radius:6px; }

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--hull); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px; margin:26px 0;
}
.card h1{ margin:0 0 6px; font-size:26px; }
.card h2{ margin:0 0 4px; font-size:20px; }
.lede{ color:var(--ink-soft); margin:0 0 20px; }

/* ------------------------------------------------------------------ forms */
label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
input[type=email], input[type=text]{
  width:100%; padding:12px 14px; font:inherit;
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
input:focus{ outline:3px solid rgba(14,125,132,.30); border-color:var(--teal); }
.code-input{
  font-family:'Barlow Semi Condensed',monospace; font-size:30px; font-weight:700;
  letter-spacing:14px; text-align:center; max-width:320px;
}
.btn{
  display:inline-block; margin-top:16px; padding:12px 26px;
  background:var(--teal); color:#fff; font:inherit; font-weight:600;
  border:0; border-radius:8px; cursor:pointer;
}
.btn:hover{ background:var(--teal-dark); }
.btn:focus-visible{ outline:3px solid rgba(14,125,132,.4); outline-offset:2px; }
.form-note{ font-size:13px; color:var(--ink-soft); margin-top:14px; }

.alert{ border-radius:8px; padding:12px 16px; margin:0 0 18px; font-size:14px; }
.alert-info{ background:#e8f3f4; border:1px solid #bcdcde; color:var(--teal-dark); }
.alert-warn{ background:#fdf3e3; border:1px solid #efd3a2; color:#7a5200; }
.alert-err { background:#fbebe8; border:1px solid #efc4bc; color:#8f2c1e; }

/* --------------------------------------------------------- order listing */
.order{ margin:22px 0; }
.order-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; }
.order-num{
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700;
  color:var(--navy); font-size:18px;
}
.order-vessel{ color:var(--ink-soft); font-size:14px; }
.badge{
  font-size:12px; font-weight:600; letter-spacing:.4px;
  padding:3px 10px; border-radius:999px; text-transform:uppercase;
}
.badge-status{ background:#e6edf2; color:var(--navy); }
.badge-live{ background:#e2f3e9; color:var(--ok); }
.badge-live::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ok); margin-right:6px; vertical-align:1px;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce){ .badge-live::before{ animation:none; } }

/* ----------------------------------------------- signature: the hour meter */
.meter{ margin:14px 0 4px; }
.meter-track{
  position:relative; height:22px; border-radius:6px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(10% - 1px),
      rgba(13,36,56,.14) calc(10% - 1px), rgba(13,36,56,.14) 10%),
    #e7edf1;
  border:1px solid var(--line);
}
.meter-fill{
  height:100%;
  background:linear-gradient(180deg, #13959d, var(--teal));
  transition:width .6s ease;
}
.meter-fill.warn{ background:linear-gradient(180deg, #f09d17, var(--buoy)); }
.meter-fill.over{ background:linear-gradient(180deg, #d9553f, var(--signal)); }
.meter-legend{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:14px; margin-top:6px;
}
.meter-hours strong{
  font-family:'Barlow Semi Condensed',sans-serif; font-size:20px; color:var(--navy);
}
.meter-state{ font-weight:600; }
.meter-state.ok{ color:var(--ok); }
.meter-state.warn{ color:var(--buoy); }
.meter-state.over{ color:var(--signal); }

/* --------------------------------------------------------------- services */
details.svc{ margin-top:10px; }
details.svc summary{
  cursor:pointer; font-size:14px; color:var(--teal-dark); font-weight:500;
  list-style:none;
}
details.svc summary::before{ content:'▸ '; }
details.svc[open] summary::before{ content:'▾ '; }
.svc-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:14px; }
.svc-table th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-soft); border-bottom:1px solid var(--line); padding:6px 8px;
}
.svc-table td{ padding:7px 8px; border-bottom:1px solid #eef2f5; }
.svc-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.svc-declined{ color:var(--ink-soft); text-decoration:line-through; }

.section-title{
  font-family:'Barlow Semi Condensed',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft);
  margin:34px 0 0;
}
.invoice-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.invoice-row:last-child{ border-bottom:0; }

.empty{ text-align:center; color:var(--ink-soft); padding:34px 0; }

/* ---------------------------------------------------------------- footer */
.site-foot{
  margin-top:48px; background:var(--navy-deep); color:#c4d4dd;
  padding:26px 0 30px; font-size:14px;
}
.foot-grid{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-right{ text-align:right; }
.site-foot a{ color:#9fd3d7; text-decoration:none; }
.foot-note{ margin-top:16px; padding-top:14px; border-top:1px solid #1d3a4e; color:#7d94a2; font-size:12px; }

@media (max-width:560px){
  .card{ padding:20px 16px; }
  .foot-right{ text-align:left; }
  .code-input{ letter-spacing:9px; font-size:24px; }
}