/* The Easy Annual design, copied from the mockup's pages (doc/mockup) as they share it. */
/* ===================== Source: settings.html / shop_rates.html / error pages (easyAnnual mockups). Copied verbatim, deduplicated. ===================== */

/* ===================== 1. Tokens (light, dark by device unless data-ea-theme=light, forced dark) + base ===================== */
:root {
  --bg:#EEF3FA; --surface:#FFFFFF; --ink:#0E1E3A; --muted:#55657F; --line:#D3DDEC; --blue:#1E54A8; --blue-hover:#5A82C6; --pale:#C9D8EE; --field:#FFFFFF;
  --th-bg:#8FAEE0; --th-ink:#0B2D6B; --link:#1E54A8;
  --st-red:#F7CACA; --st-red-ink:#7A1D1D; --st-yel:#FBEA9E; --st-yel-ink:#5E4A00; --st-grn:#C4E7C8; --st-grn-ink:#1C5427;
  --font:'Barlow',Arial,sans-serif; --shadow:0 1px 2px rgba(14,30,58,.06);
}
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) {
  --bg:#0A1322; --surface:#111F37; --ink:#E6EDF8; --muted:#9DAEC8; --line:#22365A; --pale:#2A426C; --field:#0D182B; --th-bg:#1C3358; --th-ink:#C9D8EE; --link:#8FAEE0;
  --st-red:#D9A9A9; --st-red-ink:#4A1212; --st-yel:#DCCB86; --st-yel-ink:#2E2400; --st-grn:#A9CDB0; --st-grn-ink:#123419; color-scheme:dark }}
:root[data-ea-theme="dark"] {
  --bg:#0A1322; --surface:#111F37; --ink:#E6EDF8; --muted:#9DAEC8; --line:#22365A; --pale:#2A426C; --field:#0D182B; --th-bg:#1C3358; --th-ink:#C9D8EE; --link:#8FAEE0;
  --st-red:#D9A9A9; --st-red-ink:#4A1212; --st-yel:#DCCB86; --st-yel-ink:#2E2400; --st-grn:#A9CDB0; --st-grn-ink:#123419; color-scheme:dark }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; padding-inline:16px; padding-block:16px 48px }
.wrap { max-width:1280px; margin:0 auto; display:grid; gap:22px }
.navbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px; background:var(--blue); border-radius:16px; position:sticky; top:8px; z-index:12; box-shadow:0 0 0 8px var(--bg), 0 6px 14px 8px rgba(14,30,58,.10) }
html { scroll-padding-top:var(--navh, 130px) }

/* ===================== 2. Navbar base (tiles 210x160, 80px tall; 62px <=980px; 56px <=620px) ===================== */
.navtile { display:block; height:80px; aspect-ratio:210 / 160; flex-shrink:0; border-radius:14px; line-height:0 }
.navtile svg { width:100%; height:100% }
.navtile.right { margin-left:auto }
.navtile:hover svg [fill="#1E54A8"], .navtile:active svg [fill="#1E54A8"] { fill:var(--blue-hover) }
.navtile:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px }
@media (max-width:980px) { .navtile { height:62px } }
@media (max-width:620px) { .navbar { gap:8px; padding:10px } .navbar .navtile { height:56px } .navbar .navtile.right { margin-left:0 } }

/* ===================== 3. Page header pattern: eyebrow / h1 / lede; board card with blue head ===================== */
header.top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between }
.titles { display:grid; gap:2px; min-width:0 }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
h1 { margin:0; font-size:clamp(26px,4vw,34px); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.lede { margin:4px 0 0; color:var(--muted); font-size:14.5px }
section.board { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; min-width:0 }
.bhead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; background:var(--blue) }
h2 { margin:0; font-size:18px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF }
.bhead .hint { color:#FFFFFF; opacity:.85; font-size:13px }

/* ===================== 4. Buttons: .btn (solid), .btn.ghost, .btn.sm, .btn.danger, label.btn, bar-graphic buttons .tbtn ===================== */
.tbtn { appearance:none; border:0; padding:0; background:none; cursor:pointer; border-radius:10px; line-height:0; flex-shrink:0 }
.tbtn .bar { height:46px; width:auto; display:block }
.tbtn.sm .bar { height:36px }
.tbtn:hover:not(:disabled) svg [fill="#1E54A8"] { fill:var(--blue-hover) }
.tbtn:focus-visible { outline:3px solid var(--blue-hover); outline-offset:2px }
.btn { appearance:none; font:inherit; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; height:40px; padding:0 14px; border-radius:9px; border:2px solid var(--blue); background:var(--blue); color:#FFFFFF; cursor:pointer; white-space:nowrap }
.btn:hover:not(:disabled) { background:var(--blue-hover); border-color:var(--blue-hover) } .btn.ghost { background:transparent; color:var(--link) } .btn.ghost:hover:not(:disabled) { color:#FFFFFF }
.btn.sm { height:32px; font-size:12px; padding:0 10px } .btn:disabled { opacity:.45; cursor:not-allowed } .btn:focus-visible { outline:3px solid var(--blue-hover); outline-offset:2px }
label.btn { display:inline-flex; align-items:center; cursor:pointer } label.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed }
.btn.danger { border-color:var(--st-red-ink); color:var(--st-red-ink); background:transparent } .btn.danger:hover:not(:disabled) { background:var(--st-red); border-color:var(--st-red-ink); color:var(--st-red-ink) }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .btn.danger { color:#D9A9A9; border-color:#D9A9A9 } } :root[data-ea-theme="dark"] .btn.danger { color:#D9A9A9; border-color:#D9A9A9 }

/* ===================== 5. Inputs: .in, .fld label+control, .num with $ prefix / unit suffix, .chk checkbox row ===================== */
.in { font:inherit; font-size:15px; font-weight:600; color:var(--ink); background:var(--field); border:2px solid var(--pale); border-radius:9px; height:40px; padding:0 10px; width:100%; min-width:0 }
.in:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--pale) } textarea.in { height:auto; min-height:64px; padding:8px 10px; resize:vertical }
.fld { display:grid; gap:6px; min-width:0 } .fld > span { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink) }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .fld > span { color:#C9D8EE } } :root[data-ea-theme="dark"] .fld > span { color:#C9D8EE }
.num { position:relative; display:block } .fld > .num { text-transform:none; letter-spacing:0; font-size:15px; font-weight:600; color:var(--ink) } .num .in { text-align:right; font-variant-numeric:tabular-nums }
.num[data-pre] .in { padding-left:22px } .num[data-pre]::before { content:attr(data-pre); position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600 }
.num[data-suf] .in { padding-right:40px } .num[data-suf]::after { content:attr(data-suf); position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; font-weight:600 }
.chk { display:flex; gap:8px; align-items:center; font-weight:600; font-size:14.5px; cursor:pointer } .chk input { width:18px; height:18px; accent-color:var(--blue) }
.in::placeholder { color:var(--muted); opacity:.55; font-weight:500 }
.in.date { width:auto }
.fld small { color:var(--muted); font-size:12.5px }
select.in { cursor:pointer }

/* ===================== 6. Settings rows: .sgrid/.srow, segmented radio .seg, on/off switch .tgl, account grid, lock note, saved status ===================== */
.sgrid { display:grid; gap:0 }
.srow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line) }
.srow:last-child { border-bottom:0 }
.srow h3 { margin:0; font-size:15.5px; font-weight:700; color:var(--ink) } .srow p { margin:3px 0 0; font-size:13.5px; color:var(--muted); line-height:1.4 }
.seg { display:inline-flex; border:2px solid var(--blue); border-radius:10px; overflow:hidden; flex-wrap:nowrap }
.seg label { position:relative; cursor:pointer }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.seg span { display:block; padding:0 14px; height:36px; line-height:36px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--link); background:transparent; white-space:nowrap }
.seg label + label span { border-left:2px solid var(--blue) }
.seg input:checked + span { background:var(--blue); color:#FFFFFF }
.seg input:focus-visible + span { outline:3px solid var(--blue-hover); outline-offset:-3px }
.seg input:disabled + span { opacity:.55; cursor:not-allowed }
.acct { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px 24px; padding:16px }
.acct .k { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink) } .acct .v { font-size:16px; font-weight:700; margin-top:3px; color:var(--ink) }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .acct .k { color:#C9D8EE } } :root[data-ea-theme="dark"] .acct .k { color:#C9D8EE }
.bar2 { display:flex; gap:10px; flex-wrap:wrap; padding:0 16px 16px }
.logobox { display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.logoprev { width:220px; height:88px; border:2px dashed var(--pale); border-radius:10px; background:#FFFFFF; display:grid; place-items:center; padding:8px; color:#55657F; font-size:13px; text-align:center }
.logoprev img { max-width:100%; max-height:100%; object-fit:contain } .logoacts { display:grid; gap:8px; justify-items:start; max-width:340px }
.shopf { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:16px } .shopf .wide { grid-column:1 / -1 }
.lockn { margin:0; padding:10px 16px; background:var(--pale); color:#0B2D6B; font-size:13.5px; font-weight:600 }
.saved { font-size:13px; color:#FFFFFF; opacity:.85 }
/* on/off switches (Annual / 100HR) */
.annlede { margin:0; padding:12px 16px 2px; font-size:13.5px; color:var(--muted); line-height:1.45 }
.tgl { position:relative; display:inline-block; width:52px; height:32px; flex:0 0 auto; cursor:pointer }
.tgl input { appearance:none; position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:999px; background:#C9D8EE; cursor:pointer; transition:background .2s }
.tgl input:checked { background:#1E54A8 } .tgl input:focus-visible { outline:3px solid #5A82C6; outline-offset:2px } .tgl input:disabled { cursor:not-allowed; opacity:.55 }
.tgl span { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#FFFFFF; box-shadow:0 2px 4px rgba(11,45,107,.3); transition:transform .2s; pointer-events:none }
.tgl input:checked + span { transform:translateX(20px) }
:root[data-ea-theme="dark"] .tgl input { background:#2A426C } :root[data-ea-theme="dark"] .tgl input:checked { background:#5A82C6 }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .tgl input { background:#2A426C } :root:not([data-ea-theme="light"]) .tgl input:checked { background:#5A82C6 } }
@media (prefers-reduced-motion: reduce) { .tgl input, .tgl span { transition:none } }
.srow:has(.tgl), .srow:has(.cdsel) { grid-template-columns:minmax(0,1fr) auto !important }
.cdsel { width:auto; min-width:120px; height:40px; font-weight:700 }
@media (max-width:700px) { .srow { grid-template-columns:minmax(0,1fr) } .shopf { grid-template-columns:minmax(0,1fr) } .seg span { padding:0 10px } }

/* ===================== 7. Tables: generic (Shop Rates) + table.list with phone cards ===================== */
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink); background:var(--th-bg); padding:10px 12px; white-space:nowrap }
td { padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle }
tbody tr:last-child td { border-bottom:0 }
th.r { text-align:right }
table.list { width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums }
table.list th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink); background:var(--th-bg); padding:10px 12px; white-space:nowrap }
table.list td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle } table.list .r { text-align:right } table.list td:first-child { white-space:nowrap } table.list tr.cur td { background:var(--pale) }
@media (max-width:700px) {   /* phones: saved estimates as cards, so nothing scrolls sideways */
  table.list, table.list tbody, table.list tr, table.list td { display:block } table.list thead { display:none }
  table.list tr { border-bottom:1px solid var(--line); padding:8px 0 12px } table.list tr:last-child { border-bottom:0 }
  table.list td { border:0; padding:4px 16px; display:flex; gap:10px; align-items:center } table.list td.r { text-align:left }
  table.list td[data-l]::before { content:attr(data-l); flex:0 0 96px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--th-ink); opacity:.8 }
  table.list td.hide-s { display:flex } table.list td.lacts { padding-top:8px } table.list .acts { flex-wrap:wrap } table.list td.empty { display:block }
}
@media (max-width:760px) {
  table.stack thead { display:none } table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:auto }
  table.stack tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line) }
  table.stack td { padding:0; border:0 } table.stack td.wide { grid-column:1 / -1 } table.stack td.x { grid-row:1; grid-column:3 }
  table.stack td[data-l]::before { content:attr(data-l); display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px }
  table.stack td.first { grid-column:1 / 3 }
}

/* ===================== 8. Shop Rates widgets: lockbar, in-use chips, pending/was notes, apply-from row, remove x, board footer ===================== */
.hacts { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.saved { font-size:13px; color:var(--muted) }
.eff { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.next { flex-wrap:nowrap } @media (max-width:1100px) { .next { flex-wrap:wrap } }
.next { display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap }
.applyrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; font-weight:600; min-height:34px }
.applyrow input[type=checkbox] { width:18px; height:18px; accent-color:var(--blue); margin:0; cursor:pointer }
.applyrow .in.date { height:34px; font-size:14px; padding:0 8px }
.applyrow .in.date { cursor:pointer }
.pend { display:block; width:fit-content; padding:3px 9px; border-radius:999px; background:var(--st-grn); color:var(--st-grn-ink); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.was { display:block; font-size:12px; color:var(--muted) }
.xbtn.lockd { opacity:.45 } .xbtn.lockd:hover { background:var(--pale); border-color:var(--pale); color:var(--ink) } .w-hrs { width:130px } .w-x { width:56px } .w-svc { width:170px }
.xbtn { appearance:none; border:2px solid transparent; background:none; width:36px; height:36px; border-radius:9px; color:var(--muted); cursor:pointer; font:inherit; font-size:20px; line-height:1 }
.xbtn:hover { border-color:var(--st-red-ink); color:var(--st-red-ink); background:var(--st-red) }
.xbtn:focus-visible { outline:3px solid var(--blue-hover); outline-offset:2px }
.bfoot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--line) }
.note { margin:0; color:var(--muted); font-size:13.5px }
.inuse.up, :root[data-ea-theme] .inuse.up { background:#8FAEE0; color:#0B2D6B !important }
.inuse.inl { display:inline-block; margin:0 0 0 6px; vertical-align:middle }
.lockbar { display:flex; gap:10px; align-items:center; background:var(--st-yel); color:var(--st-yel-ink); border-radius:12px; padding:12px 16px; font-size:14.5px }
.lockbar svg { width:20px; height:20px; flex-shrink:0 } .lockbar[hidden] { display:none }
.who { font-size:13px; color:var(--muted) } .who b { color:var(--ink) }
.locked .mgr-only { display:none !important }
.locked td.mgr-only { display:table-cell !important; visibility:hidden }
.locked .rates .in { background:transparent; border-color:transparent; cursor:default; box-shadow:none; appearance:none; opacity:1 }
.locked .rates select.in { color:var(--ink) }
.chipbox { width:0; min-width:100% }
.inuse[data-jos] { white-space:nowrap; max-width:100%; overflow:hidden }
.inuse { display:block; width:fit-content; margin-top:6px; padding:3px 9px; border-radius:999px; background:var(--pale); color:var(--th-ink); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; white-space:nowrap }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .inuse { color:#C9D8EE } }
:root[data-ea-theme="dark"] .inuse { color:#C9D8EE }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ===================== 9. Toast (fixed bottom centre, 2.6s) ===================== */
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:30; background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:10px; font-weight:600; font-size:14px; max-width:calc(100% - 32px); opacity:0; pointer-events:none; transition:opacity .2s; text-align:center } .toast.show { opacity:1 }

/* ===================== 10. Settings tabs (General / Shop Rates / Shop Practices / Logbook Entries) ===================== */
/* Settings tabs: General · Shop Rates · Shop Practices · Logbook Entries (shared by Settings and Shop Rates) */
.stabs { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding:4px; margin:0 0 16px; background:var(--pale); border-radius:14px }
.stab { display:flex; align-items:center; justify-content:center; text-align:center; min-height:42px; padding:6px 8px; border-radius:10px; font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.2; color:var(--th-ink); text-decoration:none }
.stab:hover { background:rgba(255,255,255,.55) } .stab:focus-visible { outline:3px solid var(--blue-hover, #5A82C6); outline-offset:2px }
.stab[aria-current="page"] { background:#1E54A8; color:#FFFFFF; box-shadow:0 1px 3px rgba(11,45,107,.25) }
:root[data-ea-theme="dark"] .stab { color:#C9D8EE } :root[data-ea-theme="dark"] .stab:hover { background:rgba(255,255,255,.08) } :root[data-ea-theme="dark"] .stab[aria-current="page"] { background:#5A82C6; color:#0B1A33 }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .stab { color:#C9D8EE } :root:not([data-ea-theme="light"]) .stab:hover { background:rgba(255,255,255,.08) } :root:not([data-ea-theme="light"]) .stab[aria-current="page"] { background:#5A82C6; color:#0B1A33 } }
@media (max-width:420px) { .stab { font-size:11.5px; letter-spacing:.04em; padding:6px 4px } }
section.board[hidden], section[data-tab][hidden] { display:none !important }
.ratesframe iframe { display:block; width:100%; height:900px; border:0; background:transparent }

/* ===================== 11. Navbar extras (navfit / tapfix / iosfix / navfix: banner row, BETA flag, Sign out, theme switch, tile states, Menu drop-down, banner/footer buttons, text-size zoom) ===================== */
<style id="navfit">/* 981–1099px (iPads held sideways): all tiles and Menu on one row, Menu still at the right end; tiles shrink a little only as needed */
@media (min-width:981px) and (max-width:1099px) {
  .navbar { column-gap:8px }
  .navbar > .navtile:not(.home) { flex:0 0 min(105px, calc((100% - 80px) / 9)); min-width:0 }
  .navbar > .navtile:not(.home) svg { width:100%; height:auto; max-height:100% }
}
</style>
<style id="tapfix">/* touch screens only: a bigger invisible tap area around small links and buttons (about 44px tall), nothing moves */
@media (pointer: coarse) {
  button.warn, button.info, .sub > a[href], .ebtn, .addvac, details.iaadd > summary, .ealink, .invlink { position:relative }
  button.warn::after, button.info::after { content:""; position:absolute; z-index:2; inset:-3px -13px }   /* these two sit right on top of each other: grow sideways so they never overlap */
  .sub > a[href]::after, .ealink::after, .invlink::after { content:""; position:absolute; z-index:2; inset:-14px -4px }
  .ebtn::after { content:""; position:absolute; z-index:2; inset:-13px -6px }
  .sumline:has(> .addvac) { overflow:visible }
  .addvac::after { content:""; position:absolute; z-index:2; inset:-11px -4px }
  details.iaadd > summary::after { content:""; position:absolute; z-index:2; inset:-14px 0 }
}
</style>
<style id="iosfix">@supports (-webkit-touch-callout: none) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size:16px !important } }</style>
.navbar { background:#1E54A8 }   /* nav bar in the palette blue (was the deepest #0B2D6B) */
/* tablets: tiles cluster from the left in rows of 5 and 4; Menu sits at the far right */
@media (max-width:980px) and (min-width:621px) { .navbar { display:grid; grid-template-columns:repeat(4, max-content) minmax(max-content, 1fr); justify-content:stretch; gap:10px 12px }
  .navbar .navtile.right { margin-left:0 } .navbar .navtile:last-child { grid-column:5; justify-self:end } }
.navtile .navs { display:none }
/* phones: square tiles cluster from the left; Menu sits at the far right of the top row. --t scales the squares so five always fit (up to 72 px) */
@media (max-width:620px) { .navbar { --t:min(72px, calc((100vw - 52px - 32px) / 5)); display:grid; grid-template-columns:repeat(4, var(--t)) minmax(var(--t), 1fr); gap:8px }
  .navbar .navtile:last-child { grid-column:-2 / -1; justify-self:end; width:var(--t) !important }
  /* squares scale with the screen width (up to 72 px) so five always fit across */
  .navbar .navtile { height:auto; width:var(--t); aspect-ratio:1 / 1 } .navbar .navtile.right { margin-left:0 }
  /* order by name (not position, so adding a tile can't shuffle them): top row Job Orders, Calendar, Create JO, Estimates, then Menu at the far right;
     second row AD Research, Inventory, Order Parts, Personnel */
  .navbar .navtile[aria-label="Job orders"] { order:1 } .navbar .navtile[aria-label="Calendar"] { order:2 } .navbar .navtile[aria-label="Create job order"] { order:3 }
  .navbar .navtile[aria-label="Estimates"] { order:4 } .navbar .navtile.menubtn { order:6 } .navbar .navtile[aria-label="AD research"] { order:7 }
  .navbar .navtile[aria-label="Inventory"] { order:8 } .navbar .navtile[aria-label="Order parts"] { order:9 } .navbar .navtile[aria-label="Personnel"] { order:10 } .navbar .navtile.home { order:11 }
  .navtile .navr { display:none } .navtile .navs { display:block }
 }
/* small phones: the theme button stays inside the bar */
@media (max-width:360px) { .navbar .navbanner .themebtn { margin-right:0 } .navbar .navbanner { gap:8px } .navbar .navbanner .bannersvg { height:34px !important } .navacts { gap:6px } }
/* wider phones have room for six across: AD Research moves up to the top row, before Menu */
@media (min-width:440px) and (max-width:620px) { .navbar { --t:min(72px, calc((100vw - 52px - 40px) / 6)); grid-template-columns:repeat(5, var(--t)) minmax(var(--t), 1fr) }
  .navbar .navtile[aria-label="AD research"] { order:5 } }
/* every screen: the easyAnnual header sits on the navy bar above the tiles; Home lives in it, so the Home tile is hidden */
.navbar .navbanner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:0 0 100%; grid-column:1 / -1; order:-1; justify-self:stretch; line-height:0; padding:2px 0 }
.navbar .navhome { display:block; border-radius:8px }
.navbar .navbanner .bannersvg { height:46px; width:auto; display:block } .navbar .navtile.home { display:none }
@media (max-width:620px) { .navbar .navbanner .bannersvg { height:40px } }
/* theme switch: on the banner row, centered over Menu; flat like the nav tiles, white border on hover */
.themebtn { appearance:none; flex-shrink:0; width:42px; height:42px; border-radius:999px; border:2px solid transparent; background:#5A82C6; color:#FFFFFF; display:grid; place-items:center; padding:0; cursor:pointer; margin-right:calc((80px * 210 / 160 - 42px) / 2); transition:border-color .12s, background .12s }
.themebtn:hover { border-color:#FFFFFF } .themebtn:active { background:#0B2D6B }
.navacts { display:flex; align-items:center; gap:10px }
.signout { appearance:none; display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 16px 0 13px; border-radius:999px; border:2px solid transparent; background:#5A82C6; color:#FFFFFF; font:700 13px 'Barlow',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:border-color .12s, background .12s }
.signout svg { width:17px; height:17px; flex-shrink:0 }
.signout:hover { border-color:#FFFFFF } .signout:active { background:#0B2D6B } .signout:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px }
@media (max-width:620px) { .signout { height:38px; padding:0 11px } .signout span { display:none } }
.themebtn:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px }
.themebtn .ti { width:20px; height:20px; display:block } .themebtn .ti-moon { display:none }
:root[data-ea-theme="dark"] .themebtn .ti-sun { display:none } :root[data-ea-theme="dark"] .themebtn .ti-moon { display:block }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .themebtn .ti-sun { display:none } :root:not([data-ea-theme="light"]) .themebtn .ti-moon { display:block } }
/* the switch sits on the next lighter palette blue (#5A82C6) in both themes so it stands out from the navy bar */
@media (max-width:980px) and (min-width:621px) { .themebtn { margin-right:calc((62px * 210 / 160 - 42px) / 2) } }
@media (max-width:620px) { .themebtn { width:38px; height:38px; margin-right:max(0px, calc((var(--t) - 38px) / 2)) } }
@media (max-width:980px) and (min-width:621px) { .navbar .navtile { justify-self:start } .navbar .navtile:last-child { justify-self:end } }
.navhome:hover tspan { text-decoration:underline } .navhome:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px }
.navbar .folded { display:none !important }
/* tiles sit on the navy bar with no border; hover adds the white border; the current page (and a tile just clicked, until its page loads) is a solid blue tile */
.navtile svg > rect:nth-of-type(-n+3), .navtile svg g [fill="#1E54A8"] { fill:#1E54A8 !important; transition:fill .12s }
.navtile svg g [stroke="#1E54A8"] { stroke:#1E54A8 !important; transition:stroke .12s }
.navtile:not([aria-current]):not(.pressed):not([aria-expanded="true"]):hover svg > rect:nth-of-type(2) { fill:#FFFFFF !important }
.navtile:is(.pressed,[aria-current],[aria-expanded="true"]) svg > rect:nth-of-type(-n+3), .navtile:is(.pressed,[aria-current],[aria-expanded="true"]) svg g [fill="#1E54A8"] { fill:#5A82C6 !important }
.navtile:is(.pressed,[aria-current],[aria-expanded="true"]) svg g [stroke="#1E54A8"] { stroke:#5A82C6 !important }
.navtile[aria-current] { cursor:default }
/* Menu drop-down: bar-style tiles under the Menu tile */
#navmenu { position:fixed; z-index:60; display:grid; gap:8px; padding:10px; border-radius:14px; background:#0B2D6B; box-shadow:0 10px 26px rgba(0,0,0,.32) }
#navmenu[hidden] { display:none }
#navmenu a { display:block; line-height:0; border-radius:12px }
#navmenu a svg { height:56px; width:auto; display:block }
#navmenu a:hover svg [fill="#1E54A8"] { fill:#5A82C6 }
#navmenu a:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px }
@media (prefers-reduced-motion: reduce) { .navtile svg * { transition:none !important } }
/* banners (blue board headers) and footers (pager / undo / bottom bars) work like the nav:
   buttons sit flat on the bar with no border; hover adds the border; pressed or current is solid */
html .mbtn, html .bhead .ghost { border-color:transparent; background:transparent; color:#FFFFFF }
html .mbtn:hover:not(.on), html .bhead .ghost:hover { border-color:#FFFFFF; background:transparent }
html .mbtn:active, html .mbtn.on, html .bhead .ghost:active { border-color:#FFFFFF; background:#FFFFFF; color:#1E54A8 }
html .mbtn.solid:not(.on):not(:active) { background:transparent; color:#FFFFFF }
html .bhead .tbtn svg > rect:nth-of-type(-n+3), html .bhead .tbtn svg g [fill="#1E54A8"] { fill:#1E54A8 !important }
html .bhead .tbtn svg > rect:nth-of-type(2) { fill:#1E54A8 !important }
html .bhead .tbtn:hover svg > rect:nth-of-type(2) { fill:#FFFFFF !important }
html .bhead .tbtn:active svg > rect:nth-of-type(-n+3), html .bhead .tbtn:active svg g [fill="#1E54A8"] { fill:#0B2D6B !important }
html .pager button, html .undobtn, html .confirm .ghost { border-color:transparent; background:transparent }
html .pager button:hover:not(:disabled):not(.on), html .undobtn:hover:not(:disabled), html .confirm .ghost:hover { border-color:var(--link, #1E54A8); background:transparent; color:var(--link, #1E54A8) }
html .pager button.on, html .pager button:active:not(:disabled), html .undobtn:active:not(:disabled), html .confirm .ghost:active { border-color:var(--blue, #1E54A8); background:var(--blue, #1E54A8); color:#FFFFFF }
/* dark theme: footer text in white so it stands out from the navy bar */
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .pager button:not(.on), :root:not([data-ea-theme="light"]) .undobtn, :root:not([data-ea-theme="light"]) .confirm .ghost, :root:not([data-ea-theme="light"]) .pager select { color:#FFFFFF }
  :root:not([data-ea-theme="light"]) .pager button:hover:not(:disabled):not(.on), :root:not([data-ea-theme="light"]) .undobtn:hover:not(:disabled), :root:not([data-ea-theme="light"]) .confirm .ghost:hover { color:#FFFFFF; border-color:#FFFFFF }
  :root:not([data-ea-theme="light"]) .pager button:disabled { opacity:.45 } }
:root[data-ea-theme="dark"] .pager button:not(.on), :root[data-ea-theme="dark"] .undobtn, :root[data-ea-theme="dark"] .confirm .ghost, :root[data-ea-theme="dark"] .pager select { color:#FFFFFF }
:root[data-ea-theme="dark"] .pager button:hover:not(:disabled):not(.on), :root[data-ea-theme="dark"] .undobtn:hover:not(:disabled), :root[data-ea-theme="dark"] .confirm .ghost:hover { color:#FFFFFF; border-color:#FFFFFF }
:root[data-ea-theme="dark"] .pager button:disabled { opacity:.45 }
html { overflow-anchor:none }
/* text size (Settings): the page content and dialogs grow; the nav bar and its menu keep their size so they stay lined up */
.wrap > :not(.navbar):not(.dmodal), .dmodal > * { zoom:var(--ea-z, 1) }   /* the fold script keeps the page steady itself; the browser's own scroll anchoring would double it */
.navbar .navbanner { position:relative }
.navbar .navbanner .navhome, .navbar .navbanner .navacts { position:relative; z-index:2 }
.doodle { position:absolute; inset:0 -4px -6px; pointer-events:none; z-index:3; overflow:visible }   /* above Sign out: the plane flies over it */
.doodle svg { overflow:visible; display:block }
.navbar .navbanner .navhome { cursor:pointer; text-decoration:none }
/* BETA flag: a small yellow speech bubble over the easyANNUAL wordmark */
.navbar .navbanner .betaflag { position:absolute; left:54%; top:-3px; transform:translateX(-50%); background:#FBEA9E; color:#0B2D6B; font:800 9.5px/1 Barlow, Arial, sans-serif; letter-spacing:.14em; padding:3px 6px 3px 7px; border-radius:999px; pointer-events:none; white-space:nowrap }
.navbar .navbanner .betaflag::after { content:""; position:absolute; left:50%; bottom:-4px; margin-left:-4px; border:4px solid transparent; border-bottom:0; border-top-color:#FBEA9E }
.ddtext { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; gap:8px; pointer-events:none; opacity:0;
  font:500 20px/1 'Barlow',Arial,sans-serif; color:#C9D8EE; white-space:nowrap }
.ddtext .ddroll { position:relative; display:inline-block; height:30px; width:0; perspective:300px; transition:width .45s cubic-bezier(.3,.7,.3,1); overflow:visible; background:none; border:0; padding:0 }
.ddtext .ddrw { position:absolute; left:0; right:0; top:0; height:30px; line-height:30px; text-align:center; transform-origin:50% 50% -12px; font-weight:700; color:#FFFFFF; letter-spacing:.02em; white-space:nowrap }
.ddtext .ddrw.in { animation:rwIn .22s cubic-bezier(.2,.8,.3,1.2) both }
.ddtext .ddrw.out { animation:rwOut .2s ease-in both }
.ddtext .ddrw.last { font-size:23px }
@keyframes rwIn { from { transform:rotateX(-90deg); opacity:0 } to { transform:rotateX(0); opacity:1 } }
@keyframes rwOut { from { transform:rotateX(0); opacity:1 } to { transform:rotateX(90deg); opacity:0 } }
@media (prefers-reduced-motion: reduce) { .ddtext { display:none } }
/* the easyAnnual paper plane gives a little wiggle when the logo is clicked */
.bannersvg .pplane { transform-box:fill-box; transform-origin:50% 55% }
.bannersvg .pplane.wiggle { animation:ppwiggle .7s ease-in-out }
.bannersvg .pplane.wiggle2 { animation:ppwiggle .7s ease-in-out 2 }
@keyframes ppwiggle { 0% { transform:none } 15% { transform:rotate(-10deg) translateY(-1px) } 35% { transform:rotate(8deg) } 55% { transform:rotate(-6deg) translateY(-1px) } 75% { transform:rotate(3deg) } 100% { transform:none } }
@media (prefers-reduced-motion: reduce) { .bannersvg .pplane.wiggle, .bannersvg .pplane.wiggle2 { animation:none } }

/* ===================== 12. Confirm dialog (check / cancel icon buttons), hover tips, undo button, warning box, trash button ===================== */
.delbtn { appearance:none; border:0; padding:0; background:none; cursor:pointer; line-height:0; border-radius:12px; flex-shrink:0 }
.delbtn svg { width:44px; height:44px; display:block }
.delbtn:hover svg [fill="#1E54A8"], .delbtn:active svg [fill="#1E54A8"] { fill:#5A82C6 }
.delbtn:focus-visible, .dbtn:focus-visible { outline:3px solid #5A82C6; outline-offset:2px }
.undorow { display:flex; justify-content:flex-end; padding:10px 16px; border-top:1px solid var(--line, #D3DDEC); background:var(--surface, #FFFFFF) }
.undobtn { appearance:none; border:2px solid var(--link, #1E54A8); background:var(--surface, #FFFFFF); height:36px; padding:0 14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; border-radius:9px; font:700 13px 'Barlow',Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--link, #1E54A8) }
.undobtn svg { display:none }
.undobtn:hover:not(:disabled) { background:#5A82C6; border-color:#5A82C6; color:#FFFFFF }
.undobtn:hover:not(:disabled) svg [fill="#1E54A8"] { fill:#5A82C6 }
.undobtn:focus-visible { outline:3px solid #5A82C6; outline-offset:2px }
.undobtn:disabled { cursor:not-allowed; filter:grayscale(1); opacity:.4; pointer-events:none }
.undowrap { display:inline-flex; border-radius:12px }
.undowrap:has(.undobtn:disabled) { cursor:not-allowed }
.undorow.mid { justify-content:center }
.dwarn { width:100%; text-align:left; background:var(--st-yel, #FBEA9E); color:var(--st-yel-ink, #5E4A00); border-radius:10px; padding:10px 12px; font-size:13.5px; line-height:1.45 }
.dwarn b { display:block; margin-bottom:4px; font-size:14px }
.dwarn ul { margin:0; padding-left:18px }
.dmodal { position:fixed; inset:0; z-index:40; display:none; place-items:center; padding:16px; background:rgba(11,45,107,.45) }
.dmodal.show { display:grid }
.dcard { width:min(420px, 100%); background:var(--surface, #FFFFFF); color:var(--ink, #0E1E3A); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px rgba(11,45,107,.35); font-family:'Barlow',Arial,sans-serif }
.dcard .dh { background:#1E54A8; color:#FFFFFF; padding:14px 18px; font-size:18px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 }
.dcard .db { padding:18px; display:grid; gap:18px; justify-items:center; text-align:center }
.dcard .dq { font-size:17px; font-weight:700; margin:0 }
.dcard .dd { font-size:14px; color:var(--muted, #55657F); margin:4px 0 0 }
.dcard .drowb { display:flex; gap:28px; justify-content:center }
.dbtn { appearance:none; border:0; padding:0; background:none; cursor:pointer; line-height:0; border-radius:14px; display:grid; justify-items:center; gap:6px }
.dbtn svg { width:64px; height:64px; display:block }
.dbtn:hover svg [fill="#1E54A8"] { fill:#5A82C6 }
.dbtn:hover svg [stroke="#1E54A8"] { stroke:#5A82C6 }
.dtip { position:fixed; z-index:41; max-width:min(260px, calc(100vw - 24px)); background:#0B2D6B; color:#FFFFFF; font:500 13.5px/1.45 'Barlow',Arial,sans-serif; padding:10px 12px; border-radius:10px; box-shadow:0 0 0 2px #FFFFFF, 0 6px 18px rgba(14,30,58,.25); pointer-events:none; opacity:0; transition:opacity .12s }
.dtip.show { opacity:1 }
@media (prefers-reduced-motion: reduce) { .dtip { transition:none } }