/* ===================================================================
   Apex Engineering Corp — project hours
   Palette sampled from the company logo:
     amber #F59E0B · black #111111 · off-white #FEFDFB

   Where each one goes is decided by contrast, not taste. The amber is
   2.15:1 on white — far below the 4.5:1 needed for text — so on light
   surfaces it does fills, rules, borders and badges only. It carries text
   solely on black, where it measures 8.79:1. Amber text on a light
   surface uses --brand-ink (#B45309, 5.02:1).
   =================================================================== */
:root{
  --brand:#F59E0B; --brand-hi:#FBBF3F; --brand-lo:#D98908; --brand-ink:#B45309;
  --ink:#111111; --ink-2:#191919; --ink-3:#262626; --mute:#6E6A63;
  --paper:#FAF8F4; --sheet:#FFFFFF; --rule:#E6E1D8; --rule-2:#D6CFC2;
  --ok:#0F766E; --watch:#B45309; --urgent:#C2410C; --over:#B91C1C;
}

body{ background:var(--paper); color:var(--ink); font-size:.9375rem; }

.num{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
.eyebrow{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brand-ink); font-weight:600; }

/* ---------- masthead: the wordmark is 6.9:1, so it needs the full width ---------- */
.masthead{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--ink); border-bottom:3px solid var(--brand);
  padding:.85rem 1.25rem;
}
.mast-mark{ display:block; line-height:0; }
.mast-mark img{ height:34px; width:auto; display:block; }
@media (max-width:575.98px){ .mast-mark img{ height:26px; } }
.mast-rule{ width:1px; align-self:stretch; background:var(--ink-3); margin:0 .25rem; }
.mast-app{ color:var(--brand); font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; font-weight:600; }
.mast-who{ margin-left:auto; display:flex; align-items:baseline; gap:.6rem;
           font-size:.8125rem; color:#9C978E; }
.mast-who .mast-name{ color:#fff; }
.mast-who .mast-role{ color:var(--brand); text-transform:uppercase; letter-spacing:.1em; font-size:.65rem; }
.mast-who a{ color:#9C978E; text-decoration:none; }
.mast-who a:hover{ color:var(--brand); }

/* ---------- sidebar ---------- */
.rail{ background:var(--ink-2); min-height:calc(100vh - 68px); }
@media (max-width:767.98px){ .rail{ min-height:auto; } }
.rail a{ display:flex; align-items:center; gap:.6rem; padding:.72rem 1.1rem; color:#A8A39B;
         text-decoration:none; border-left:3px solid transparent; white-space:nowrap; font-size:.875rem; }
.rail a:hover{ color:#fff; background:var(--ink-3); }
.rail a.active{ color:#fff; background:var(--ink-3); border-left-color:var(--brand); font-weight:500; }
.rail a.active i{ color:var(--brand); }
.rail .tag{ margin-left:auto; background:var(--brand); color:var(--ink); border-radius:2px;
            padding:0 .38rem; font-size:.72rem; font-weight:700; }

/* ---------- page furniture ---------- */
.page-head{ border-bottom:2px solid var(--ink); padding-bottom:.75rem; }
.page-head h1{ font-weight:600; letter-spacing:-.01em; }

.card, .panel{ border:1px solid var(--rule); border-radius:3px; background:var(--sheet); }
.rule-top{ border-top:1px solid var(--rule); }

/* ---------- the drawdown staff ---------- */
.staff{ position:relative; width:100%; height:11px; background:#EDE8DE;
        border:1px solid var(--rule-2); border-radius:2px; overflow:hidden; }
.staff .fill{ position:absolute; inset:0 auto 0 0; transition:width .35s ease; }
.staff .tick{ position:absolute; bottom:0; width:1px; background:#C6BEB0; height:45%; }
.staff .tick.major{ height:100%; }
.staff .tick.under{ background:rgba(255,255,255,.65); }
.staff .hatch{ position:absolute; top:0; bottom:0; right:0;
   background:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 5px); opacity:.85; }
.staff.lg{ height:14px; } .staff.sm{ height:8px; }

.t-ok{ color:var(--ok); } .t-watch{ color:var(--watch); }
.t-urgent{ color:var(--urgent); } .t-over{ color:var(--over); }
.f-ok{ background:var(--ok); } .f-watch{ background:var(--watch); }
.f-urgent{ background:var(--urgent); } .f-over{ background:var(--over); }

.chip{ display:inline-block; padding:.1rem .45rem; border:1px solid currentColor;
       border-radius:2px; font-size:.75rem; }

/* ---------- register rows ---------- */
.reg-row{ display:block; padding:1rem; color:inherit; text-decoration:none;
          border-left:3px solid transparent; }
.reg-row:hover{ background:#FDF6E8; color:inherit; border-left-color:var(--brand); }
.reg-row + .reg-row{ border-top:1px solid var(--rule); }
.pnum{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--brand-ink); font-weight:500; }

/* the same black header band as the PDF and Excel exports, so the three match */
table.reg{ font-size:.875rem; }
table.reg thead th{ background:var(--ink); color:#fff; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; font-size:.6875rem; border-bottom:none;
  padding-top:.55rem; padding-bottom:.55rem; }
table.reg thead th:first-child{ border-left:3px solid var(--brand); }
table.reg td{ vertical-align:middle; border-color:var(--rule); }
table.reg tbody tr:hover{ background:#FDF6E8; }

/* ---------- buttons ---------- */
.btn-brand{ background:var(--ink); border-color:var(--ink); color:#fff; font-weight:500; }
.btn-brand:hover{ background:var(--ink-3); border-color:var(--ink-3); color:var(--brand); }
.btn-amber{ background:var(--brand); border-color:var(--brand); color:var(--ink); font-weight:600; }
.btn-amber:hover{ background:var(--brand-lo); border-color:var(--brand-lo); color:var(--ink); }
.btn-outline-secondary{ border-color:var(--rule-2); color:#4A463F; }
.btn-outline-secondary:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.nav-tabs{ border-bottom:2px solid var(--ink); }
.nav-tabs .nav-link{ color:#4A463F; border:none; border-bottom:3px solid transparent;
                     border-radius:0; font-size:.875rem; padding:.5rem .9rem; }
.nav-tabs .nav-link:hover{ color:var(--ink); border-bottom-color:var(--rule-2); }
.nav-tabs .nav-link.active{ color:var(--ink); font-weight:600; background:transparent;
                            border-bottom-color:var(--brand); }

.mailbody{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
  white-space:pre-wrap; background:#FBF8F2; border:1px solid var(--rule);
  border-left:3px solid var(--brand); border-radius:2px; padding:.85rem; margin:0; }

.notice{ border:1px solid var(--rule); border-left-width:3px; border-radius:3px; background:var(--sheet); }
.notice.l-50{ border-left-color:var(--ok); }
.notice.l-75, .notice.l-80{ border-left-color:var(--watch); }
.notice.l-90{ border-left-color:var(--urgent); }
.notice.l-100, .notice.l-negative{ border-left-color:var(--over); }
.notice.l-info{ border-left-color:var(--brand); }

.alert-warning{ background:#FEF6E6; border-color:var(--brand); color:#6B4708; }
.alert-secondary{ background:#F5F2EC; border-color:var(--rule-2); color:#4A463F; }

a{ color:var(--brand-ink); }
a:hover{ color:var(--ink); }
.form-control:focus, .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(245,158,11,.22); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---------- signed-out screens: white, so the mark goes on as supplied ---------- */
.signin-mark{ width:100%; max-width:15rem; height:auto; display:block; margin:0 auto 1.5rem; }

/* ---------- year tabs on the project list ----------
   One tab per year, as the project spreadsheet has. The strip scrolls
   sideways on a phone rather than wrapping into a second row. */
.year-tabs{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
            scrollbar-width:thin; }
.year-tabs .nav-link{ white-space:nowrap; display:flex; align-items:baseline; gap:.4rem; }
.year-tabs .yr-count{ font-size:.6875rem; color:#4A463F; background:#F1ECE2;
                      border-radius:2px; padding:0 .3rem; }
.year-tabs .nav-link.active .yr-count{ background:var(--brand); color:var(--ink); font-weight:600; }