/* ============================================================
   shell.css — shared app shell: theme tokens, header bar, nav,
   and light-theme form cards. Linked by every page so the header
   and layout stay uniform and only need editing in one place.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Palette aligned with the LIS Quote Tool */
  --bg:#F0F2F5;--surf:#FFFFFF;--mid:#1D2B3A;--panel:#EEF0F3;
  --bdr:#C8CDD6;--muted:#5A6070;--txt:#1A1D23;--bright:#FFFFFF;
  --acc:#1A4FA0;--acc2:#E8EEF8;--grn:#166534;--red:#991B1B;
  --amber:#92400E;--amberbg:#FEF3C7;
  --headbar:#1A4FA0;--shadow-md:0 4px 6px rgba(0,0,0,.07);
}
body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,sans-serif;min-height:100vh}

/* HEADER BAR — two stable zones: brand block (left) + meta/nav (right).
   Each zone is its own column, so changing the title text never reflows the
   nav. align-items:flex-start keeps both zones top-aligned. */
header{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 20px 11px;background:var(--headbar);gap:10px 20px;flex-wrap:wrap;box-shadow:var(--shadow-md)}
.hl{display:flex;flex-direction:column;gap:7px;align-items:flex-start;min-width:0}
.hl-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
header h1{font-size:1.25rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#FFFFFF}
.tag{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;flex-shrink:0}
.hlegend{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.lg-item{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.lg-ex{cursor:default;pointer-events:none}
#lu{font-size:.66rem;color:rgba(255,255,255,.85)}
#rc{font-size:.62rem;color:rgba(255,255,255,.55)}

/* NAV — works identically for <button> (in-page) and <a> (cross-page) */
nav{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;justify-content:flex-end}
.nav-btn{padding:5px 12px;border-radius:4px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s;text-decoration:none;display:inline-block}
.nav-btn:hover{opacity:.85}
.nb-view{background:#FFFFFF;color:var(--acc)}
.nb-edit{background:rgba(255,255,255,.15);color:#FFFFFF;border:1px solid rgba(255,255,255,.25)}
.nb-hist{background:rgba(255,255,255,.15);color:#FFFFFF;border:1px solid rgba(255,255,255,.25)}
.nb-active{background:#FFFFFF!important;color:var(--acc)!important}

/* LIGHT-THEME FORM CARD (login / change-password) — sits below the header
   bar, so auth screens share the same shell as the rest of the app. */
.authmain{max-width:430px;margin:42px auto;padding:0 20px;width:100%}
.card{background:var(--surf);border:1px solid var(--bdr);border-top:3px solid var(--acc);border-radius:8px;padding:30px 32px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-md)}
.card h1{font-size:1.15rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--mid)}
.card .sub{font-size:.82rem;color:var(--muted);margin-top:-8px;line-height:1.5}
.card label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.card input{background:var(--surf);border:1.5px solid var(--bdr);border-radius:5px;color:var(--txt);font-family:inherit;font-size:.95rem;padding:10px 12px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.card input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,79,160,.12)}
.card button{background:var(--acc);color:#fff;border:none;border-radius:5px;padding:11px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s;margin-top:4px}
.card button:hover{opacity:.9}
.card button:active{transform:scale(.98)}
.card button:disabled{opacity:.5;cursor:default}
.error{display:none;background:#FEE2E2;border:1px solid #E0A0A0;color:#991B1B;font-size:.8rem;padding:9px 12px;border-radius:5px}
.error.show{display:block}
.msg{display:none;font-size:.8rem;padding:9px 12px;border-radius:5px}
.msg.error{display:block;background:#FEE2E2;border:1px solid #E0A0A0;color:#991B1B}
.msg.ok{display:block;background:#DCFCE7;border:1px solid #86C9A0;color:#166534}
.skip{text-align:center;font-size:.78rem}
.skip a{color:var(--muted)}