/* The site's look, the Dashboard's (dashboard/index.html): a deep navy band
   across the top, white cards with soft deep shadows on a pale blue-grey page,
   navy ink, bold display type. Every app page loads this last (Admin, My
   profile, Activity log, Surveys, NCAAA), so it only re-themes: each page keeps
   its own layout. The colours are the pages' own variables, given the
   Dashboard's values. */
:root{
  --navy:#13294B; --navy-2:#1C3F7A; --teal:#1C3F7A;
  --sky:#93A9D6; --sky-pale:#EAF0FB;
  --paper:#FFFFFF; --bg:#F1F4F9; --wash:#F1F4F9;
  --line:#E3E8F1; --line-2:#EDF1F7;
  --ink:#0F172A; --muted:#66708A; --faint:#9AA3B8; --grey:#9AA3B8;
  --band-1:#0F2347; --band-2:#1C3F7A; --on-band:#DCE6FF;
  --ui:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(15,35,71,.05),0 28px 56px -32px rgba(15,35,71,.32);
  --shadow-sm:0 1px 2px rgba(15,35,71,.05),0 14px 32px -24px rgba(15,35,71,.32);
}
/* the scroll bar is always there, so a page never shifts sideways when it would appear or go (switching views) */
html{overflow-y:scroll}
/* the page: the navy band at the top (tall enough for the bar and the title), then pale blue-grey */
html body{min-height:100vh;--band:0px;background:linear-gradient(180deg,var(--band-1) 0,var(--band-2) var(--band),#EEF1F7 var(--band),#E7EBF3 100%) #EEF1F7}
body:has(header.top){--band:190px}                  /* My profile: the bar, and the first card rises out of the band */
body:has(.head h1){--band:168px}                    /* Admin: the bar and the title, ending before the first heading */

/* ---------------------------------------------------------------- the bar at the top: on the band, light text */
header.top{background:transparent;border:0;box-shadow:none}
header.top .org b,header.top .brand{color:#fff}
header.top .mark{background:#fff;color:var(--band-1)}
.head h1{color:#fff!important}
/* a bar that stays on top while scrolling (Activity log, Surveys, NCAAA) is the band itself */
header.app{background:linear-gradient(180deg,var(--band-1),#16305E);border:0;box-shadow:0 10px 30px -18px rgba(15,35,71,.6);color:var(--on-band)}
header.app .brand,header.app .brand b{color:#fff}
header.app .ctx{border-top-color:rgba(255,255,255,.12)}
header.app .ctx,header.app .ctx label,header.app .status{color:var(--on-band)}
.brand,.brand b{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.back{background:#fff;border-color:transparent;color:var(--band-1);box-shadow:none}
.back:hover{background:var(--on-band);color:var(--band-1)}

/* ---------------------------------------------------------------- titles */
main h1,.head h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.sh,.rhead h2,.listhead h2,main > .card h2,.dh h2,.empty h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em}

/* ---------------------------------------------------------------- the cards */
.mod,.msg,main > .card,.rblock,.empty,.rec,.tlbox,.lane,.mail,.login form{
  background:var(--paper);border-color:transparent;border-radius:28px;box-shadow:var(--shadow)}
.login form{border-top:0}
.entry{border-color:transparent;border-radius:22px;box-shadow:var(--shadow-sm)}
.entry:hover{border-color:transparent;box-shadow:var(--shadow)}
.which button{border-radius:22px}
.which button:hover,.which button:focus-visible{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
dialog,.modal{border-radius:28px;background:var(--paper);box-shadow:0 40px 90px -30px rgba(15,35,71,.5)}
dialog::backdrop{background:rgba(15,35,71,.45)}

/* ---------------------------------------------------------------- controls */
button.b,.views,.chip,.search input,.ay select{border-color:var(--line)}
button.b:hover,.chip:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{outline-color:var(--navy-2)!important}

/* ---------------------------------------------------------------- tables (the report's, TP-152) */
table.t th,table.t td{border-color:#D3DBE8}
table.t th{background:#EEF2F9}
table.t td.blank{background:#F7F9FC}
/* rounded, to sit well in their cards: separate borders (collapsed ones cannot round), each cell drawing only its right and bottom line */
table.t{border-collapse:separate;border-spacing:0;border:1px solid #D3DBE8;border-radius:14px;overflow:hidden}
table.t th,table.t td{border:0;border-right:1px solid #D3DBE8;border-bottom:1px solid #D3DBE8}
table.t tr > :last-child{border-right:0}
table.t tbody tr:last-child > *{border-bottom:0}

/* the demo account (menu.js sets html.demo): what would change something is not shown */
.demo .noview{display:none !important}