/* StudioSay
   ---------
   Cool paper ground, deep navy-purple sidebar, one navy-purple accent - the
   brand colour. Colour is reserved
   for status and for whichever page you are on; everything else earns its
   place through weight and spacing. One typeface, with tabular figures so
   times and money line up in a column.

   Every class name the old stylesheet defined still works, so pages I have
   not rewritten keep their shape. */

:root {
  --accent: #1F3C73;          /* the brand colour */
  --accent-dark: #182F5A;
  --ink: #16243F;
  --ink-2: #3E495E;
  --muted: #586173;
  --faint: #8392AD;
  --line: #D8DEE8;
  --line-2: #E9EDF4;
  --bg: #EFF2F7;
  --paper: #FFFFFF;
  --sand: #F2F5FB;
  --good: #2F6B4F;
  --bad: #A33A2C;
  --warn: #A5521A;
  --side: #16243F;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, sans-serif; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* ---- shell ---- */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.main { flex: 1; min-width: 0; }
.wrap { max-width: 1180px; padding: 26px 30px 90px; }

/* ---- sidebar ---- */
.side {
  flex: none; width: 216px; background: var(--side);
  padding: 18px 0 22px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .brand {
  display: block; padding: 0 18px 16px; color: #EFF2F7;
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.side .brand:hover { color: #fff; }
.side .brand span { display: block; font-size: 11.5px; font-weight: 400; color: #91A3C5; margin-top: 3px; }
.side .termpick {
  display: block; margin: -10px 18px 14px; padding: 0; text-align: left;
  font-size: 11.5px; color: #91A3C5; border-bottom-color: #3C5380;
}
.side .termpick:hover, .side .termpick.on { color: #DDE8FE; border-bottom-color: #97BAFC; }
.side nav { flex: 1; padding: 0 8px; }
.side .group { margin-bottom: 1px; }

/* A section heading is a button now, so it has to be un-button-ed first. */
.side .glabel {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 0; padding: 9px 10px; border: 0; background: none; cursor: pointer;
  border-radius: 7px; text-align: left; font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #8398BF; transition: color .12s, background .12s;
}
.side .glabel:hover { color: #DDE8FE; background: #1E335A; }
.side .glabel span { flex: 1; min-width: 0; }
.side .glabel .caret {
  flex: none; width: 10px; height: 10px; opacity: .55;
  transition: transform .16s ease, opacity .12s;
}
.side .group.open .glabel .caret { transform: rotate(-180deg); }
.side .glabel:hover .caret { opacity: 1; }

/* Icons take the link's colour, so they brighten with the text rather than
   needing their own hover rule. */
.side .ico { flex: none; width: 17px; height: 17px; opacity: .8; }
.side .glabel .ico { width: 15px; height: 15px; }
.side a:hover .ico, .side a.on .ico, .side .glabel:hover .ico { opacity: 1; }

/* The sidebar no longer expands - there is nothing under an area but the
   area itself, and its pages are named across the top of the page instead.
   These rules stay only so older markup does not reflow if it turns up. */
.side .items { display: none; }

.side a.top, .side nav .items a {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  font-size: 13px; color: #B4C3E1; border-radius: 7px;
  transition: color .12s, background .12s;
}
.side a.top { padding: 9px 10px; font-size: 13.5px; font-weight: 500; margin-bottom: 1px; }
.side nav a:hover { color: #FFFFFF; background: #20355E; }

/* Current page: a brass bar in the gutter rather than a border that shifts
   the text, plus enough weight to find at a glance. */
.side nav a.on { color: #fff; background: #1F3C73; font-weight: 500; position: relative; }
.side nav a.on::before {
  content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: #97BAFC;
}
.side a.top.on::before { left: -3px; }
.side nav a span { flex: 1; min-width: 0; }
.side .count {
  flex: none; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; background: #97BAFC; color: #16243F;
}
.side .glabel .count { margin-right: 2px; }

/* The open section: its heading stays lit but quieter, its pages sit
   indented underneath, and the page you are on gets the bar. */
.side nav a.top.open { background: none; color: #fff; }
.side nav a.top.open::before { display: none; }
.side .subnav { display: flex; flex-direction: column; gap: 1px; margin: 0 0 8px; padding: 2px 0 4px 26px;
                border-left: 1px solid #263C65; margin-left: 18px; }
.side .subnav a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px;
                  color: #B4C3E1; border-radius: 6px; position: relative; }
.side .subnav a:hover { color: #fff; background: #20355E; }
.side .subnav a.on { color: #fff; background: #1F3C73; font-weight: 600; }
.side .subnav a.on::before { content: ''; position: absolute; left: -27px; top: 50%; transform: translateY(-50%);
                             width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: #97BAFC; }
.side .subnav a span { flex: 1; min-width: 0; }

/* The webmaster console is not a teaching section, so it does not look like
   one. Brass label, and a rule above it. */
.side .group.wm { margin-top: 12px; padding-top: 8px; border-top: 1px solid #263C65; }
.side .group.wm .glabel { color: #97BAFC; }
.side .group.wm .glabel:hover { color: #C3D8FF; }

.side .signout {
  margin: 14px 18px 0; padding-top: 14px; border-top: 1px solid #263C65;
  font-size: 12.5px; color: #91A3C5;
}
@media (prefers-reduced-motion: reduce) {
  .side .items, .side .glabel .caret { transition: none; }
}
.side .signout:hover { color: #EFF2F7; }

/* ---- the pages of this area ----
   The second level, and the last one. A tab row says what else is in here
   without anybody having to open anything, and reads left to right in the
   order the work happens - which on the Term page is literally the set-up
   checklist. Underlines rather than boxes: they sit on the page's own paper
   instead of building a second bar above the content. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 1px;
  margin: -6px 0 24px; border-bottom: 1px solid var(--line);
}
.tabs a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; margin-bottom: -1px;
  font-size: 13.5px; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.tabs a:hover { color: var(--ink); border-bottom-color: var(--line); }
.tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .tcount {
  min-width: 17px; text-align: center; padding: 1px 6px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; background: var(--accent); color: #fff;
}
@media screen and (max-width: 900px) {
  .tabs { margin: 0 0 20px; }
  .tabs a { padding: 8px 11px; font-size: 13px; }
}

/* ---- headings ---- */
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
h2 {
  font-size: 14px; font-weight: 600; color: var(--ink); margin: 30px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
}
h2 span { font-size: 13px; font-weight: 400; color: var(--muted); }
h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }
.sub { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 24px; }

/* ---- cards & stats ---- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; box-shadow: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px; }
.stat b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; display: block; line-height: 1.1; }
.stat span { font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ---- tables: tighter ---- */
table {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: none;
}
th {
  background: var(--sand); font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
}
td { padding: 8px 14px; border-top: 1px solid var(--line-2); }
tbody tr:hover td { background: #F6F8FD; }
.name { font-weight: 500; }
.muted { color: var(--muted); }
.num { text-align: right; }
.tag {
  background: var(--sand); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 600;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #CED5E2;
  background: var(--paper); color: var(--ink); border-radius: 7px; padding: 7px 14px;
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
}
.btn:hover { background: var(--sand); color: var(--ink); }
.btn.primary { background: var(--side); border-color: var(--side); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #182F5A; color: #fff; }
.btn.ok { color: var(--good); border-color: #C6DACB; }
.btn.ok:hover { background: #F1F7F3; }
.btn.warn { color: var(--bad); border-color: #E6C8C1; }
.btn.warn:hover { background: #FBF1EF; }
.btn.on { background: var(--good); border-color: var(--good); color: #fff; }
/* Small buttons are for table rows only. Anywhere else on a page a "tiny"
   button is drawn at the normal size, so buttons side by side always match. */
.btn.tiny { padding: 7px 14px; font-size: 13px; }
td .btn.tiny, th .btn.tiny, .list .btn.tiny { padding: 4px 10px; font-size: 12px; }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- forms ---- */
input:not([type]), input[type=text], input[type=date], input[type=time], input[type=number], input[type=search], input[type=url],
input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #CED5E2; border-radius: 7px;
  font-family: inherit; font-size: 14px; color: var(--ink); background: #FFFFFF;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background: #fff;
}
label {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 5px;
}
.field { margin-bottom: 14px; }

/* Field help is never printed on the page - it waits behind the "?" beside
   the label it belongs to. Declared here as well as in inc/help.php so it is
   hidden from the first paint rather than when the footer loads. */
.fh { display: none !important; }

/* ---- notices ---- */
.notice { border-radius: 8px; padding: 11px 15px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.6; }
.notice.good { background: #EAF0EB; border: 1px solid #C6DACB; color: #255B41; }
.notice.info { background: var(--sand); border: 1px solid var(--line); color: var(--ink-2); }
.notice.warn { background: #FBF1EA; border: 1px solid #EACBB5; color: var(--warn); }
.notice.bad  { background: #F6EAE7; border: 1px solid #E6C8C1; color: #8A2E22; }

.empty {
  background: var(--paper); border: 1px dashed var(--line); border-radius: 11px;
  padding: 34px; text-align: center; color: var(--muted); font-size: 13.5px;
}

/* ---- banners ---- */
.asbar {
  text-align: center; font-size: 12.5px; padding: 7px 16px; font-weight: 600;
  background: #2A1F14; color: #D8DEE8; border-bottom: 1px solid #1F3C73;
}
.asbar a { color: #C3D8FF; text-decoration: underline; margin-left: 8px; }
.archivebar, .planbar { text-align: center; font-size: 12.5px; padding: 7px 16px; font-weight: 600; }
.archivebar { background: var(--sand); color: var(--muted); border-bottom: 1px solid var(--line); }
.planbar { background: #FBF1EA; color: var(--warn); border-bottom: 1px solid #EACBB5; }

/* The teaching side moved to a sidebar. The PORTAL still uses a top bar, and
   should - a parent has four pages, not forty. */
.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 940px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 22px; min-height: 58px; flex-wrap: wrap;
}
.topbar .brand { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.topbar .nav { display: flex; gap: 3px; flex-wrap: wrap; }
.topbar .nav a {
  padding: 6px 12px; border-radius: 7px; font-size: 13.5px; color: var(--muted);
}
.topbar .nav a:hover { background: var(--sand); color: var(--ink); }
.topbar .nav a.on { background: var(--side); color: #fff; font-weight: 500; }

/* The teaching side's old second row and term picker are gone. */
.subbar { display: none; }
.periodpick { display: none; }

/* ---- popups ---- */
/* Editing something should not cost you your place in a list, so an edit
   opens over the page rather than replacing it. */
.dlg-back {
  position: fixed; inset: 0; background: rgba(20,22,26,.44); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dlg {
  width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow: auto;
  background: var(--paper); border-radius: 13px; box-shadow: 0 24px 60px rgba(20,22,26,.28);
}
.dlg-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 20px;
  border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--paper);
}
.dlg-head b { font-size: 15px; font-weight: 600; }
.dlg-x {
  margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: var(--sand); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.dlg-x:hover { background: #EAE6DD; color: var(--ink); }
.dlg-body { padding: 19px 20px; }
.dlg-body h1, .dlg-body h2 { border: 0; margin-top: 0; padding: 0; }
.dlg-body .sub { margin-bottom: 16px; }
.dlg-foot {
  display: flex; gap: 9px; justify-content: flex-end; padding: 14px 20px;
  background: #FAF8F4; border-top: 1px solid var(--line-2);
}

/* ---- availability spans ---- */
.spanbar {
  position: relative; height: 42px; background: var(--sand);
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
}
.spanbar .open { position: absolute; top: 0; bottom: 0; background: #ECF1FA; }
.spanbar .taken {
  position: absolute; top: 4px; bottom: 4px; background: var(--side); border-radius: 5px;
  color: #fff; font-size: 10.5px; padding: 3px 5px; overflow: hidden; white-space: nowrap; font-weight: 600;
}
.spanbar .gap {
  position: absolute; top: 4px; bottom: 4px; border: 1px dashed #97BAFC;
  border-radius: 5px; color: var(--accent-dark); font-size: 10.5px; padding: 3px 5px;
  overflow: hidden; white-space: nowrap;
}

/* ---- phones and small tablets ----
   The sidebar becomes a menu that slides out from the left, opened by the
   Menu button in a bar across the top. Everything else gets bigger to tap. */
.mbar, .mback, .side .mclose { display: none; }
@media screen and (max-width: 900px) {
  .mbar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 250;
    background: var(--side); color: #fff; padding: 8px 12px; min-height: 54px;
  }
  .mbtn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
    background: #20355E; color: #fff; border: 0; border-radius: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .mbrand { color: #EFF2F7; font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbrand:hover { color: #fff; }
  .mback { position: fixed; inset: 0; z-index: 290; background: rgba(20,18,40,.45); }
  body.navopen .mback { display: block; }
  body.navopen { overflow: hidden; }

  .shell { display: block; }
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    width: 290px; max-width: 86vw; height: 100%; padding: 14px 0 24px;
    transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto;
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  body.navopen .side { transform: none; }
  .side .mclose {
    display: block; position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
    background: none; border: 0; color: #B4C3E1; font-size: 26px; line-height: 1; cursor: pointer;
  }
  .side .brand { padding-right: 52px; }
  .side a.top { padding: 12px 12px; font-size: 15px; }
  .side .subnav a { padding: 10px 12px; font-size: 14.5px; }
  .side .signout { padding: 6px 0; font-size: 14px; }

  .wrap { padding: 18px 16px 70px; }
  .hide-sm { display: none; }

  /* Page tabs: one row you can swipe along, instead of wrapping into a pile. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }

  /* Wide tables scroll sideways inside their own box. */
  .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0; }
  .tscroll > table { width: max-content; min-width: 100%; }
}
@media screen and (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 21px; }
  /* 16px stops the phone zooming in every time you tap a box. */
  input:not([type]), input[type=text], input[type=date], input[type=time], input[type=number], input[type=url],
  input[type=email], input[type=tel], input[type=password], input[type=search], select, textarea { font-size: 16px; padding: 11px 12px; }
  .btn { min-height: 42px; padding: 9px 15px; font-size: 14.5px; }
  .btn.tiny { min-height: 38px; padding: 7px 12px; font-size: 13.5px; }
  .actions { gap: 8px; }
  td { padding: 11px 12px; }
  .dlg-back { padding: 0; align-items: stretch; }
  .dlg { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  dialog { max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- repeated components ------------------------------------------------
   These were inline, in dozens of places, in slightly different spellings
   each time - which is how a design drifts. Declared once here so they can
   only look one way. */

/* Checkboxes and radios were each overriding the global full-width input rule
   with their own inline style="width:auto" - 35 of them. The rule belongs
   here, so the next one written does the right thing without being told. */
input[type="checkbox"], input[type="radio"] { width: auto; }

/* The small uppercase label that heads a block inside a card. */
.eyebrow {
  font-family: Montserrat, Archivo, system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #66728A; margin: 0 0 9px;
}

/* A choice presented as a bordered card with a radio or checkbox in it, used
   by every "pick one of these" setting in the app. */
.choice {
  display: flex; gap: 11px; align-items: flex-start; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
  font-size: 14.5px; font-weight: 400; color: var(--ink-2);
  text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.choice:hover { border-color: #cbc3b5; }
.choice.on { border-color: var(--accent); background: var(--sand); }
.choice input { margin-top: 2px; }
.choice .why {
  display: block; font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 3px;
}
.choicelist { display: flex; flex-direction: column; gap: 9px; }

/* A row of controls that ends in a button, which has to line up with the
   inputs rather than with their labels. */
.bar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.bar .btn { height: 41px; }
.bar > * { margin-bottom: 0; }

/* Listing-table head, so every table in the app agrees on what a header is. */
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list thead tr { background: #FBFBFA; }
table.list thead th {
  text-align: left; padding: 11px 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: #73819B;
}
table.list tbody tr { border-top: 1px solid var(--line-2); }
table.list td { padding: 10px 12px; }

/* The listing-table header row, for tables not using table.list. */
tr.thead { background: #FBFBFA; }
tr.thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #73819B;
}

/* ---- Sections without cards ----
   No rounded boxes. Each section is a white band that runs the width of the
   page column, with a hairline above and below, so it stands off the grey
   ground. Section headings are a small purple label with a rule running out
   to the right, so the eye can find where each part starts. Long tables get
   soft stripes and a tinted header. */
.main .card:not(.thm) {
  background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
}
.main .card:not(.thm) + .card:not(.thm) { margin-top: 0; border-top: 0 !important; }
.main .pane.card { border-top: 1px solid var(--line) !important; }
.main h2:not(dialog h2) {
  font-size: 19px; font-weight: 700; letter-spacing: -.005em; text-transform: none; color: #1F3C73; line-height: 1.3;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 34px 0 14px; align-items: baseline; justify-content: space-between;
}
.main h3 { font-size: 15.5px; font-weight: 700; color: #16243F; margin: 18px 0 8px; }
.main h2:not(dialog h2) span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.main table tbody tr:nth-child(even) td { background: #F8FAFE; }
.main table tbody tr:hover td { background: #EEF3FC; }
table.list thead tr, tr.thead { background: #F2F5FB !important; }
.main .stats { display: flex !important; flex-wrap: wrap; gap: 6px 28px !important; grid-template-columns: none !important; margin-bottom: 18px !important; }
.main .stat { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }


/* Moving between pages: the browser swaps only the page, and the sidebar and
   logo stay put instead of blinking (Chrome, Edge and Safari; others just load
   the page as before). */
@view-transition { navigation: auto; }
.side { view-transition-name: side; }
::view-transition-group(side), ::view-transition-old(side), ::view-transition-new(side) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }

/* Phones: tabs are one dropdown (built in footer.php). */
.tabsPick { display: none; }
@media screen and (max-width: 720px) {
  .tabs.hasPick { display: none !important; }
  .tabsPick { display: block; width: 100%; margin: 4px 0 12px; padding: 11px 14px; font-size: 16px; font-weight: 600; color: #16243F;
              border: 1px solid #D8DEE8; border-radius: 9px; background: #fff; }
}

/* Phones: a safety net so boxes never overlap or run off the screen. */
@media screen and (max-width: 720px) {
  .main *, .main *::before, .main *::after { box-sizing: border-box; }
  .main input:not([type=checkbox]):not([type=radio]), .main select, .main textarea { max-width: 100%; }
  .main img, .main video, .main iframe { max-width: 100%; height: auto; }
  .main h1, .main h2, .main h3, .main p, .main td, .main th, .main label, .main a { overflow-wrap: break-word; word-break: normal; }
  .main [style*="display:flex"]:not([style*="nowrap"]):not(.calGrid) { flex-wrap: wrap; }
  .main [style*="display:flex"] > * { min-width: 0; }
  .main [style*="min-width:2"], .main [style*="min-width:3"] { min-width: 0 !important; }
  .main table { max-width: 100%; }
  .main dialog { max-width: calc(100vw - 16px); }
  /* Rows of fields laid out in set columns stack one under another; the columns that
     share out the width by themselves (auto-fit) keep going side by side when there's room. */
  .main [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]):not([style*="repeat(7"]):not(.calGrid):not(.stats):not([data-keepgrid]) { grid-template-columns: minmax(0,1fr) !important; }
  .main [style*="display:grid"] > *, .main [style*="display: grid"] > * { min-width: 0; }
  .main [style*="display:grid"] > .btn, .main [style*="display:grid"] > button { justify-self: start; height: auto !important; }
  /* Date and time boxes: full width, a normal height, the date on the left. iPhones otherwise
     size them by themselves and they spill into the next box. */
  .main input[type=date], .main input[type=time], .main input[type=datetime-local], .main input[type=month] {
    -webkit-appearance: none; appearance: none; display: block; width: 100% !important; min-width: 0; min-height: 44px; text-align: left; }
  .main input::-webkit-date-and-time-value { text-align: left; }
  .main select { min-width: 0; }
}

/* ===== One look for every page (lists, one-item pages, settings, make/send).
   Off for the special looks (90s, 2000s, Dark, Paper, Soft, Compact). ===== */
/* Sections, not cards: no box around each thing. */
body:not([class*="theme-"]) .main .card:not(.thm){background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 0 22px !important}
body:not([class*="theme-"]) .main .card:not(.thm) + .card:not(.thm){margin-top:0 !important}
/* Headings */
body:not([class*="theme-"]) .main h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
body:not([class*="theme-"]) .main h2{font-size:19px;font-weight:700;letter-spacing:-.005em;text-transform:none;color:#1F3C73;line-height:1.3;margin:32px 0 14px;padding:0 0 8px;border-bottom:1px solid #D8DEE8}
body:not([class*="theme-"]) .main .card > h2:first-child{margin-top:8px}
body:not([class*="theme-"]) .main h3{font-size:15.5px;font-weight:700;color:#16243F;margin:18px 0 8px}
body:not([class*="theme-"]) .main h2 span{text-transform:none;letter-spacing:0;font-weight:400}
body:not([class*="theme-"]) .main dialog h2{font-size:18px;text-transform:none;letter-spacing:0;color:#16243F;border:0;padding:0;margin:0 0 12px}
body:not([class*="theme-"]) .main .eyebrow{color:#1F3C73;letter-spacing:.08em}
/* Lists: one white surface, tight rows, thin lines. */
body:not([class*="theme-"]) .main table.list{background:#fff;border-radius:10px;overflow:hidden;font-size:14.5px}
body:not([class*="theme-"]) .main table.list thead tr, body:not([class*="theme-"]) .main tr.thead{background:#fff !important}
body:not([class*="theme-"]) .main table.list thead th, body:not([class*="theme-"]) .main tr.thead th{padding:10px 12px;font-size:11px;letter-spacing:.07em;color:#66728A;border-bottom:1px solid #D8DEE8}
body:not([class*="theme-"]) .main table.list td{padding:10px 12px;border-bottom:1px solid #ECEFF5;vertical-align:middle}
body:not([class*="theme-"]) .main table.list tbody tr:last-child td{border-bottom:0}
body:not([class*="theme-"]) .main table.list tbody tr:hover td{background:#F5F7FC}
/* No buttons on rows: they read as links. */
body:not([class*="theme-"]) .main td .btn:not(.primary), body:not([class*="theme-"]) .main .list .btn:not(.primary){background:none !important;border:0 !important;box-shadow:none !important;padding:2px 0 !important;min-height:0 !important;color:#1F3C73 !important;font-weight:600;text-decoration:none}
body:not([class*="theme-"]) .main td .btn:not(.primary):hover{text-decoration:underline}
body:not([class*="theme-"]) .main td .btn.warn{color:#A33A2C !important}
body:not([class*="theme-"]) .main td form{display:inline}
body:not([class*="theme-"]) .main td .btn + .btn, body:not([class*="theme-"]) .main td form + form, body:not([class*="theme-"]) .main td .btn + form, body:not([class*="theme-"]) .main td form + .btn{margin-left:14px}
/* Buttons and fields */
body:not([class*="theme-"]) .main .btn{border-radius:8px;padding:8px 15px;font-size:14px}
body:not([class*="theme-"]) .main .btn.primary{background:#1F3C73;border-color:#1F3C73}
body:not([class*="theme-"]) .main .btn.primary:hover{background:#182F5A;border-color:#182F5A}
body:not([class*="theme-"]) .main input:not([type=checkbox]):not([type=radio]):not([type=color]), body:not([class*="theme-"]) .main select, body:not([class*="theme-"]) .main textarea{border:1px solid #D8DEE8;border-radius:9px;background:#fff}
body:not([class*="theme-"]) .main .actions{gap:8px 12px}
/* Messages: a slim line, not a box. (Ones that need you go in the pill.) */
body:not([class*="theme-"]) .main .notice.good{background:none !important;border:0 !important;padding:2px 0 !important;color:#255B41;font-weight:600}
body:not([class*="theme-"]) .main .notice.good::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2F6B4F;margin-right:8px;vertical-align:1px}
/* Popups */
body:not([class*="theme-"]) dialog{border:0 !important;border-radius:14px !important;box-shadow:0 24px 60px rgba(30,27,58,.25) !important}

/* ----- Phones ----- */
@media screen and (max-width: 720px) {
  body:not([class*="theme-"]) .main h1{font-size:22px}
  body:not([class*="theme-"]) .main h2{font-size:17.5px}
  /* Lists become stacked rows: the first column in bold, the rest as small lines under it. */
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]), body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) tbody{display:block;width:100%}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) thead{display:none}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:11px 14px;border-bottom:1px solid #ECEFF5}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) tbody tr:last-child{border-bottom:0}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td{display:block;padding:0 !important;border:0 !important;background:none !important;text-align:left !important;white-space:normal !important;font-size:14px;color:#3E495E;width:auto !important}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td:empty{display:none}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td:first-child{flex-basis:100%;font-size:15.5px;font-weight:600;color:#16243F}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td:first-child:has(input[type=checkbox]){flex-basis:auto;order:-1}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td:first-child:has(input[type=checkbox]) + td{flex:1 1 calc(100% - 40px);font-size:15.5px;font-weight:600;color:#16243F}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";color:#66728A}
  body:not([class*="theme-"]) .main table:has(> thead):not([data-keep]) td:last-child:has(.btn, form){flex-basis:100%;margin-top:4px}
  /* A list's "check all" box stays on phones, as its own row above the list. */
  body:not([class*="theme-"]) .main table:has(> thead th input[type=checkbox]):not([data-keep]) thead{display:block}
  body:not([class*="theme-"]) .main table:has(> thead th input[type=checkbox]):not([data-keep]) thead tr{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid #D8DEE8;background:#fff !important}
  body:not([class*="theme-"]) .main table:has(> thead th input[type=checkbox]):not([data-keep]) thead th{display:none}
  body:not([class*="theme-"]) .main table:has(> thead th input[type=checkbox]):not([data-keep]) thead th:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;width:auto !important;padding:0 !important;border:0 !important;background:none !important;font-size:14px;font-weight:600;color:#16243F;text-transform:none;letter-spacing:0}
  body:not([class*="theme-"]) .main table:has(> thead th input[type=checkbox]):not([data-keep]) thead th:has(input[type=checkbox])::after{content:"Check all"}
  /* Rows of buttons wrap; a page's main button fills the width. */
  body:not([class*="theme-"]) .main .actions{justify-content:flex-start}
  body:not([class*="theme-"]) .main .btn{min-height:42px}
  body:not([class*="theme-"]) .main td .btn{min-height:0}
  body:not([class*="theme-"]) .main dialog{width:calc(100vw - 16px) !important;max-height:calc(100vh - 24px)}
}

/* Bulk actions: one "With checked" menu instead of a row of buttons. */
.bulkMenu{position:relative;display:inline-block}
.bulkMenu > summary{list-style:none;cursor:pointer}
.bulkMenu > summary::-webkit-details-marker{display:none}
.bulkMenu .bulkList{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:240px;max-width:calc(100vw - 24px);background:#fff;border-radius:12px;box-shadow:0 14px 36px rgba(30,27,58,.18);padding:6px 0;display:flex;flex-direction:column}
.bulkMenu .bulkList .btn, .bulkMenu .bulkList button, .bulkMenu .bulkList a{display:block !important;width:100%;text-align:left;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:10px 16px !important;margin:0 !important;min-height:0 !important;font-size:14px !important;font-weight:400 !important;color:#16243F !important;white-space:normal}
.bulkMenu .bulkList .btn:hover, .bulkMenu .bulkList button:hover{background:#F2F5FB !important}
.bulkMenu .bulkList .warn{color:#A33A2C !important}

/* Phones: checkboxes big enough to tap, with room around them so the tap lands. */
@media screen and (max-width: 720px) {
  .main input[type=checkbox], .main input[type=radio] { width: 22px !important; height: 22px !important; min-width: 22px; margin: 0; accent-color: #1F3C73; flex: none; }
  .main td > input[type=checkbox]:only-child, .main td > label > input[type=checkbox]:only-child { margin: 4px 6px 4px 0; }
  .main td:has(> input[type=checkbox]:only-child) { padding-top: 12px !important; padding-bottom: 12px !important; width: 44px; }
}

/* Headings: the same clear sizes on every page and in every look (themes keep their own colours),
   always well above the 14px text under them. */
.main h1{font-size:25px !important;font-weight:700 !important;line-height:1.25}
.main h2{font-size:19px !important;font-weight:700 !important;line-height:1.3;margin-top:30px !important}
.main h1 + h2,.main h2:first-child{margin-top:12px !important}
.main h3{font-size:15.5px !important;font-weight:700 !important}
.main dialog h2,.main .printSheet h2{font-size:18px !important;margin-top:0 !important}
.main h2 span{font-size:13.5px}
@media screen and (max-width:720px){.main h1{font-size:22px !important}.main h2{font-size:17.5px !important}}

:root{--side:#101E3A;}