/*
 * GRIDCo Power System Data and Analytics Platform: the one stylesheet every screen shares.
 *
 * An engineering instrument, not a web page: graph-paper ground, surfaces with
 * real depth, tactile controls, tabular figures. One green accent; amber and
 * red only ever mean something. Every size, radius and shadow comes from the
 * tokens below, so a control looks the same on every screen.
 */

/* ---------------------------------------------------------------- tokens */
/* Manrope and JetBrains Mono, under the SIL Open Font License (static/fonts/OFL-*.txt); each one file for all weights */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/static/fonts/manrope.woff2?v=1') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/static/fonts/jetbrains-mono.woff2?v=1') format('woff2'); }
:root {
  --paper: #F5F6F3;         --paper-dot: #D9DDD7;
  --surface: #FFFFFF;       --sunken: #F2F3F0;       --raised: #FBFCFA;
  --ink: #131714;           --mid: #3B423D;          --dim: #656D67;        --faint: #969D97;
  --line: #E1E4DF;          --line-strong: #CCD1CB;  --hair: #EBEDE9;       --rule: #EDEFEB;
  --green: #0B7A4B;         --green-deep: #075A36;   --green-wash: #EEF6F1; --green-edge: #CFE4D7;
  --green-glow: rgba(11, 122, 75, .18);
  --amber: #B7860A;         --amber-deep: #7E5C05;   --amber-wash: #FCF8EC; --amber-edge: #EEDFB4;
  --red: #C21230;           --red-deep: #8F0F1E;     --red-wash: #FDF3F4;   --red-edge: #F0CDD3;

  --h: 40px;  --h-sm: 32px;
  /* the space above the band at the top of every page, and under it */
  --head-top: 18px;  --head-under: 18px;
  /* tight corners read as precise: containers 8, controls 6 */
  --r-sm: 4px;  --r: 6px;  --r-md: 7px;  --r-lg: 8px;
  /* Nothing on the page casts a shadow: borders carry the structure. Only what
     floats over the page (menus, calendars, dialogs) keeps a faint one, to read as on top. */
  --shadow-pop: 0 12px 32px -16px rgba(19, 23, 20, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ---------------------------------------------------------------- ground */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  /* graph paper: the grid this company runs, quietly under everything */
  background-image: radial-gradient(circle at 1px 1px, var(--paper-dot) 1px, transparent 1.3px);
  background-size: 24px 24px;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-deep); }
::selection { background: #CFE8DA; }
/* a component's own display (grid, flex) must never undo the hidden attribute */
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sub { font-size: 13.5px; color: var(--faint); }
.sub.late { color: var(--red); font-weight: 700; }
.wrap { margin: 0 auto; padding: 0 32px; max-width: 1440px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 0 32px; font-size: 13.5px; color: var(--faint); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* going from page to page, or reloading one, blends old into new rather than blanking; the page itself shows at
   once, with no entrance of its own */
@view-transition { navigation: auto; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
/* a list, a date or a file box shows only once controls.js has made it the app's own (base.html) */
.upgrading :is(select.input, input[type=date], input[type=time], input[type=file]):not([data-upgraded]) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- header */
.top {
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 32px; position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 100%; }
.top img { height: 28px; width: auto; display: block; }
.nav { display: flex; align-items: stretch; gap: 2px; margin-left: 22px; height: 100%; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 12px; font: 600 14.5px var(--sans); color: var(--dim); white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--green); }
/* the menu items that do not fit, under More at its end (base.html) */
.nav-more { position: relative; display: flex; }
.nav-more summary { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; font: 600 14.5px var(--sans); color: var(--dim); cursor: pointer; white-space: nowrap; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary:hover, .nav-more[open] summary { color: var(--ink); }
.nav-more:has(a[aria-current="page"]:not([hidden])) summary { color: var(--ink); }
.nav-more .menu { position: absolute; left: 0; top: calc(100% - 4px); z-index: 40; min-width: 220px; display: flex; flex-direction: column; }
.nav-more .menu a { display: flex; align-items: center; padding: 9px 12px; border-radius: var(--r-sm); font: 600 14.5px var(--sans); color: var(--mid); white-space: nowrap; }
.nav-more .menu a:hover { background: var(--sunken); color: var(--ink); }
.acts { min-width: 132px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.help-link { display: inline-flex; align-items: center; gap: 7px; height: var(--h-sm); padding: 0 10px; border-radius: var(--r); font: 600 14.5px var(--sans); color: var(--dim); flex-shrink: 0; }
.help-link:hover { color: var(--ink); background: var(--sunken); }
.help-link[aria-current] { color: var(--green-deep); }
.back { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 10px 0 6px; border-radius: var(--r); font: 600 14.5px var(--sans); color: var(--dim); flex-shrink: 0; }
.back:hover { color: var(--ink); background: var(--sunken); }

/* a form that opens over the page: to add to a list, or to change one of its rows */
dialog.box { border: none; border-radius: var(--r-lg); padding: 0; width: min(480px, 94vw); max-height: 90vh; box-shadow: var(--shadow-pop); color: var(--ink); }
dialog.box.wide { width: min(640px, 94vw); }
dialog.box::backdrop { background: rgba(19, 23, 20, .42); backdrop-filter: blur(3px); }
dialog.box[open] { animation: pop .16s var(--ease); }
dialog.box form { display: flex; flex-direction: column; max-height: 90vh; }
dialog.box .body { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
dialog.box h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
dialog.box .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
dialog.box .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--raised); flex-shrink: 0; }
/* a box with no form of its own: its lines belong to the form of the page */
dialog.box.loose[open] { display: flex; flex-direction: column; }
dialog.box.loose .body { min-height: 0; }
.remark-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.remark-lines label { font-size: 14.5px; font-weight: 600; color: var(--mid); white-space: nowrap; }

/* Admin: its sections down the side, in groups; the page beside them */
.admin { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px; align-items: start; padding-top: var(--head-top); padding-bottom: 24px; }
/* The list stays in its place and scrolls in itself; the page beside it scrolls by its own content.
   78px is the header and the gap below it, 24px the gap at the foot: thus a long list never makes the page longer than the screen. */
.admin-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100dvh - 78px - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* the list's scrollbar: no track, a narrow faint thumb that darkens under the pointer */
.admin-nav::-webkit-scrollbar { width: 5px; }
.admin-nav::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line); }
.admin-nav:hover::-webkit-scrollbar-thumb { background: var(--line-strong); }
@supports not selector(::-webkit-scrollbar) { .admin-nav { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } }
.admin-nav .group { display: flex; flex-direction: column; }
/* a group's name sits at the edge with its icon; its pages hang from a rail below the icon */
.admin-nav .lbl { display: flex; align-items: center; gap: 8px; padding: 0 0 7px 1px; color: var(--mid); }
.admin-nav .lbl svg { flex: none; color: var(--green); }
.admin-nav a { display: block; margin-left: 8px; padding: 6px 10px 6px 15px; border-left: 2px solid var(--line); border-radius: 0 var(--r) var(--r) 0; font: 600 14.5px var(--sans); color: var(--dim); white-space: nowrap; }
.admin-nav a:hover { color: var(--ink); background: var(--sunken); }
.admin-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); border-left-color: var(--green); }
.admin-main { min-width: 0; }
.page-head.admin-head { margin-top: 0; padding: 16px 22px; min-height: 84px; }  /* the admin layout gives the space above it, its list beside it level */
.admin-head h1 { display: flex; align-items: center; gap: 8px; font-size: 24px; }
.admin-head .info > .pop { width: 440px; font-weight: 500; letter-spacing: 0; }
.admin-head .info > .pop p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mid); max-width: none; display: block; overflow: visible; -webkit-line-clamp: unset; }
.admin-main > .subtabs { padding: 0 0 12px; }
@media (max-width: 1000px) {
  .admin { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-nav { position: static; flex-direction: row; gap: 4px; max-height: none; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .admin-nav .group { flex-direction: row; flex-shrink: 0; }
  .admin-nav .lbl { display: none; }
  .admin-nav a { margin-left: 0; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r); }
  .admin-nav a[aria-current="page"] { border-color: var(--line); }
}

/* a page was asked for and has not come yet: a thin line grows along the header's lower edge */
.loadbar { position: fixed; z-index: 40; left: 0; top: 59px; height: 2px; width: 0; background: var(--green); opacity: 0; pointer-events: none; }
html.loading .loadbar { opacity: 1; width: 92%; transition: opacity .15s .12s, width 9s cubic-bezier(.08, .7, .1, 1) .12s; }  /* not for a page that comes at once */
@media (max-width: 900px) { .loadbar { top: 0; } }
@media (prefers-reduced-motion: reduce) { html.loading .loadbar { width: 100%; transition: opacity .15s .12s; } }

/* the report flow's progress */

/* the person menu */
.me { position: relative; }
.me summary { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 13px var(--sans); letter-spacing: .02em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.me summary::-webkit-details-marker { display: none; }
.me[open] summary { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--green-glow); }
.me .menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 260px; }
.me .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.me .who b { display: block; font-size: 15px; }
.me .who span { font-size: 13.5px; color: var(--dim); }
.me .menu a, .me .menu button { display: flex; width: 100%; text-align: left; font: 600 14.5px var(--sans); color: var(--mid); background: none; border: none; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; }
.me .menu a:hover, .me .menu button:hover { background: var(--sunken); color: var(--ink); }
.me .menu .narrow { display: none; }

/* ---------------------------------------------------------------- surfaces */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
/* every popover, menu and tip is the same white panel */
.pop, .me .menu, .hover-tip {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px;
  box-shadow: var(--shadow-pop); animation: pop .14s var(--ease);
}
/* a chart's tip (className: 'chart-tip'): the chart library writes its own look on the element, so this one wins */
.chart-tip { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-pop) !important; padding: 8px 11px !important; }
.chart-tip:empty { display: none !important; }  /* before the first point, the library's box sits under the chart, empty */
/* the top of each page: a band, the page's name on a clear sky that opens into pylons at the right, Ghana's colours
   at its foot. A layer of its own, so the popover of its info icon shows over the tables below it */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; position: relative; z-index: 5;
  min-height: 108px; margin: var(--head-top) 0 var(--head-under); padding: 22px 26px; border: 1px solid #D9E4F1; border-radius: 14px;
  background: linear-gradient(100deg, #F8FBFE 0%, #EEF4FB 55%, #E3EDF8 100%); }
.page-head::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: min(56%, 780px); border-radius: 0 13px 13px 0;
  background: url('/static/pylons-day.jpg') center 10% / cover no-repeat; opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
.page-head::after { content: ''; position: absolute; left: 26px; bottom: -1px; width: 66px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #CE1126 0 33.3%, #FCD116 0 66.6%, #006B3F 0); }
/* its buttons, where they stand on the photo: on a pane of pale glass */
.page-head .page-actions { gap: 8px; }
.page-head .page-actions:has(> *) { padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 18px -12px rgba(16, 30, 54, .45); }
@media (max-width: 700px) { .page-head::before { width: 100%; opacity: .3; } }
.page-head h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.034em; line-height: 1.05; text-wrap: balance; }
.page-head h1 + p { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--dim); line-height: 1.4; max-width: 640px; }  /* what the page is for, in one line: the rest is behind the info icon */
.page-head .eyebrow { display: block; margin-bottom: 10px; }
/* a page of sections one under another; the band's own space under it stands in for the first gap */
.stacked { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.stacked > .page-head { margin-bottom: calc(var(--head-under) - 16px); }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-actions:has(.field label) { align-items: flex-end; }  /* buttons line up with the box, not its label */
/* what an admin list asks to look at, and a name with what to do beside it. button.ask: the box that asks first is a dialog.ask */
.asks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.asks .find-rows { width: min(340px, 100%); }
.asks .find-rows .input { height: var(--h-sm); font-size: 14px; }
.asks .find-count { align-self: center; }
button.ask { display: inline-flex; align-items: center; gap: 8px; height: var(--h-sm); padding: 0 12px; border: 1px solid var(--amber-edge); border-radius: 999px; background: var(--amber-wash); color: var(--amber-deep); font: 700 14px var(--sans); cursor: pointer; }
button.ask:hover { border-color: var(--amber); }
button.ask svg { width: 15px; height: 15px; }
button.ask[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #fff; }
.name-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* a hover tip: words about what the pointer is on (data-tip; see controls.js) */
.hover-tip { position: fixed; z-index: 70; pointer-events: none; max-width: 320px; padding: 8px 11px; border-radius: var(--r); color: var(--ink); font: 500 13.5px var(--sans); line-height: 1.45; animation: none; }
.hint { cursor: help; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }

/* tabs between sibling pages */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { position: relative; font: 600 15.5px var(--sans); color: var(--dim); background: none; border: none; padding: 14px 14px 13px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--ink); }
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--green); }
/* a second row, for the pages under one tab */
.subtabs { display: flex; gap: 6px; padding: 12px 0 18px; }
.subtabs a { font: 600 14.5px var(--sans); color: var(--dim); padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; }
.subtabs a:hover { color: var(--ink); background: var(--sunken); }
.subtabs a[aria-current="page"] { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.tabs .count { font: 600 12.5px var(--mono); color: var(--faint); background: var(--sunken); border-radius: 999px; padding: 2px 7px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px;
  font: 700 15px var(--sans); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; text-decoration: none;
  color: #fff; background-color: var(--green); border: 1px solid var(--green); border-radius: var(--r);
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { color: #fff; background-color: var(--green-deep); border-color: var(--green-deep); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-glow); }
/* aria-disabled: a button that cannot act now, still reachable so its tip says why */
.btn:disabled, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { cursor: not-allowed; color: #fff; background-color: #BFC5BF; border-color: #BFC5BF; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn.ghost { color: var(--ink); background-color: var(--surface); border-color: var(--line-strong); }
.btn.ghost:hover { color: var(--ink); background-color: var(--sunken); border-color: #B9BFB8; }
.btn.ghost:disabled, .btn.ghost:disabled:hover, .btn.ghost[aria-disabled="true"], .btn.ghost[aria-disabled="true"]:hover { color: var(--faint); background-color: transparent; border-color: var(--line); }
.btn.danger { color: var(--red); background-color: var(--surface); border-color: var(--red-edge); }
.btn.danger:hover { color: var(--red-deep); background-color: var(--red-wash); border-color: #E6B3BC; }
/* small: in a table, and in the band at the top of a page, where it covers less of the photo */
.btn.small, .page-head .page-actions .btn { height: var(--h-sm); padding: 0 12px; font-size: 14px; border-radius: var(--r-sm); gap: 6px; }
.btn.small svg, .page-head .page-actions .btn svg { width: 14px; height: 14px; }
.page-head .page-actions .input { height: var(--h-sm); font-size: 14px; }
.btn.block { width: 100%; }
.btn-quiet { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px var(--sans); color: var(--dim); background: none; border: none; cursor: pointer; padding: 0; }
.btn-quiet:hover { color: var(--ink); }
.btn-quiet:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--h); height: var(--h); flex-shrink: 0; padding: 0; color: var(--mid); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.icon-btn:hover { color: var(--ink); background: var(--sunken); border-color: #B9BFB8; }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-glow); }
.icon-btn.small { width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); }
.icon-btn.quiet { background: none; border-color: transparent; color: var(--dim); }
.icon-btn.quiet:hover { background: var(--sunken); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > .label { font-size: 14px; font-weight: 700; color: var(--mid); }
.field small { font-size: 13.5px; line-height: 1.5; color: var(--faint); }
.row { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.input {
  display: block; width: 100%; height: var(--h); padding: 0 12px; margin: 0;
  font: 500 15.5px var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  -webkit-appearance: none; appearance: none;
}
textarea.input { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input.mono { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.input.small { height: var(--h-sm); font-size: 14.5px; border-radius: var(--r-sm); padding: 0 10px; }
.input::placeholder { color: var(--faint); opacity: 1; }
.input:hover { border-color: #B6BDB5; }
.input:focus, .input:focus-visible, .input[aria-expanded="true"] { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
.input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(194, 18, 48, .12); }
.input:disabled, .input[aria-disabled="true"] { cursor: not-allowed; color: var(--faint); background: var(--sunken); }
input[type=search].input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search .input { padding-left: 36px; }
.unit-field { position: relative; }
.unit-field .input { padding-right: 46px; }
.unit-field > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 13px var(--sans); color: var(--faint); pointer-events: none; }

/* tick boxes, drawn: the browser's own look differs on every platform */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; vertical-align: middle;
  width: 18px; height: 18px; border-radius: var(--r-sm); border: 1.5px solid #B4BBB3; background: var(--surface);
  display: inline-grid; place-content: center; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s;
}
input[type=checkbox]::before { content: ''; width: 10px; height: 10px; background: #fff; transform: scale(0); transition: transform .12s var(--ease); clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 22%, 84% 6%, 42% 68%); }
input[type=checkbox]:hover { border-color: var(--green); }
input[type=checkbox]:checked { background: var(--green); border-color: var(--green); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-glow); }
input[type=radio] { accent-color: var(--green); }

/* segmented choice */
.seg { display: inline-flex; gap: 2px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: block; font-size: 14px; font-weight: 600; color: var(--dim); padding: 5px 11px; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; user-select: none; }
.seg input:checked + span { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
.seg input:disabled + span { color: var(--faint); cursor: not-allowed; }

/* switch */
.toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .sw { width: 36px; height: 21px; border-radius: 999px; background: #D5DAD4; flex-shrink: 0; display: flex; align-items: center; padding: 2px; transition: background .15s; }
.toggle .sw::after { content: ''; width: 17px; height: 17px; border-radius: 999px; background: #fff; transition: transform .18s var(--ease); }
.toggle input:checked + .sw { background: var(--green); }
.toggle input:checked + .sw::after { transform: translateX(15px); }
.toggle input:focus-visible + .sw { box-shadow: 0 0 0 3px var(--green-glow); }
.toggle .txt { font-size: 14.5px; line-height: 1.5; color: var(--mid); }

/* choices drawn as buttons (outage types) */
.chips-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.names { display: flex; flex-wrap: wrap; gap: 6px; }
.names button { height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font: 600 13.5px var(--mono); color: var(--ink); cursor: pointer; }
.names button:hover { border-color: var(--green); background: var(--green-wash); }
.type { position: relative; }
.type input { position: absolute; opacity: 0; width: 0; height: 0; }
.type span { display: flex; align-items: center; height: var(--h-sm); padding: 0 13px; font: 700 14px var(--sans); color: var(--mid); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: all .12s; }
.type span:hover { color: var(--ink); border-color: #B6BDB5; }
.type input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.type input:focus-visible + span { box-shadow: 0 0 0 3px var(--green-glow); }

/* ---------------------------------------------------------------- the custom controls (static/controls.js) */
.control { position: relative; min-width: 0; }
.control > .pop { position: absolute; z-index: 35; top: calc(100% + 6px); left: 0; min-width: 100%; }
.control > .pop.up { top: auto; bottom: calc(100% + 6px); }
.control > .pop.floating { position: fixed; z-index: 60; bottom: auto; }
.pop .find { margin-bottom: 6px; min-width: 200px; }
.opts-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--hair); margin-top: 6px; padding: 6px 6px 2px; }
.opts-foot .btn-quiet { font-size: 14px; }
.select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.select-btn .value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--faint); transition: transform .15s var(--ease); }
.select-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.control.compact { display: inline-block; }
.control.compact .select-btn { width: auto; }
.options { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.options li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); font: 500 15px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.options li[data-active] { background: var(--sunken); }
.options li[aria-selected="true"] { color: var(--green-deep); font-weight: 700; }
.options li svg { width: 15px; height: 15px; color: var(--green); visibility: hidden; flex-shrink: 0; }
.options li[aria-selected="true"] svg { visibility: visible; }
.options li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* dates: typed or chosen from a calendar */
.date-field .input { padding-right: 38px; padding-left: 10px; font-size: 13.5px; }  /* a whole date, in the narrowest of its boxes */
.date-field .open { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; }
.time-field .input { padding-left: 36px; }
.time-field > svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.cal { width: 292px; padding: 12px; }
.control > .cal { min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-month { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week span { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--faint); padding: 6px 0; }
.cal-grid { gap: 2px 0; }
.cal-day { height: 34px; border: none; background: none; border-radius: var(--r-sm); cursor: pointer; font: 500 14px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.cal-day:hover:not(:disabled) { background: var(--sunken); }
.cal-day.blank { visibility: hidden; }
.cal-day:disabled { color: #D0D4CF; cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-day[aria-selected="true"] { background: var(--green); color: #fff; font-weight: 600; }
.cal-day:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.cal-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hair); margin-top: 8px; padding-top: 8px; }

/* files, dropped or chosen */
.drop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--raised); cursor: pointer; transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.over { border-color: var(--green); background: var(--green-wash); }
.drop:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
.drop .glyph { width: 38px; height: 38px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); color: var(--green); flex-shrink: 0; }
.drop .glyph svg { width: 18px; height: 18px; }
.drop .words { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; color: var(--mid); }
.drop .words b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop .words span { font-size: 13.5px; color: var(--faint); }
.drop.chosen { border-style: solid; border-color: var(--green-edge); background: var(--green-wash); }
/* beside the buttons at the top of a page: as tall as a button, one line */
.page-actions .drop { height: var(--h-sm); padding: 0 12px; gap: 8px; max-width: 260px; border-radius: var(--r); }
.page-actions .drop .glyph { width: auto; height: auto; background: none; border: none; }
.page-actions .drop .words span { display: none; }

/* ---------------------------------------------------------------- the element picker (static/picker.js) */
.picker { display: flex; flex-direction: column; gap: 8px; }
.picker .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.picker .chips:empty { display: none; }
.pick-box { position: relative; }
.pick-box .input { padding-left: 36px; }
.pick-box > svg { position: absolute; left: 12px; top: 20px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: var(--h-sm); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 4px 0 10px; font-size: 14.5px; max-width: 100%; }
.chip b { font-family: var(--mono); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.chip span:not(.kind) { color: var(--dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .kind { margin-right: -2px; }
.chip button { border: none; background: none; cursor: pointer; font-size: 17.5px; line-height: 1; color: var(--faint); width: 24px; height: 24px; border-radius: var(--r-sm); flex-shrink: 0; }
.chip button:hover { background: var(--red-wash); color: var(--red); }
.picker .options { position: absolute; z-index: 35; top: calc(100% + 6px); left: 0; right: 0; max-height: 340px; }
.picker .options li { display: grid; grid-template-columns: minmax(80px, auto) 124px minmax(0, 1fr); gap: 12px; padding: 9px 10px; font-size: 14.5px; }
.picker .options li[aria-selected="true"] { background: var(--sunken); color: var(--ink); font-weight: 500; }
.picker .options li b { font-family: var(--mono); font-weight: 600; }
.picker .options .fam { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.picker .options .where { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.picker .options .none { display: block; color: var(--faint); cursor: default; }
.picker-note { font-size: 13.5px; color: var(--faint); }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; }
th { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); text-align: right; white-space: nowrap; }
th.l, td.l { text-align: left; }
td { text-align: right; vertical-align: middle; }
/* positioned, so a hidden input inside a wide table scrolls with it rather than widening the page */
.grid-table { overflow-x: auto; position: relative; }
.grid-table table { min-width: 720px; }
/* a long table scrolls in its own box, so its column names stay in view at the top */
.grid-table.scroll { max-height: 70vh; overflow: auto; }
.grid-table th { padding: 11px 14px; text-align: left; background: var(--raised); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.grid-table td { padding: 11px 14px; border-bottom: 1px solid var(--rule); text-align: left; font-size: 15px; vertical-align: top; }
.grid-table tr:last-child td { border-bottom: none; }
.grid-table td.num, .grid-table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grid-table tr.link { cursor: pointer; transition: background-color .1s; }
.grid-table tr.link:hover td { background: #F8FAF7; }
.bsp { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; }
.n-dim { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--faint); }
.track { width: 116px; height: 8px; background: var(--rule); border-radius: 4px; position: relative; flex-shrink: 0; }
.track i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--dim); flex-wrap: wrap; }
.pager nav { display: flex; gap: 6px; align-items: center; }
.pager .at { font: 600 13.5px var(--mono); color: var(--mid); padding: 0 6px; }

/* ---------------------------------------------------------------- status */
.notice { border-radius: var(--r-md); padding: 12px 16px; font-size: 15px; line-height: 1.55; border: 1px solid; }
.notice.bad { background: var(--red-wash); border-color: var(--red-edge); color: var(--red-deep); }
.notice.good { background: var(--green-wash); border-color: var(--green-edge); color: var(--green-deep); }
.notice.warn { background: var(--amber-wash); border-color: var(--amber-edge); color: var(--amber-deep); }

/* the approval of a KPI or a report built here, on its page (see _publish.html) */
.publish { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }  /* a link to #approval: clear of the header */
.publish-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14.5px; }
.publish-form { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.publish-form fieldset { border: 0; margin: 0; padding: 0; }
.publish-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.notice b { font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; font: 700 12.5px var(--sans); letter-spacing: .01em; padding: 0 9px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); color: var(--mid); white-space: nowrap; }
.pill.green, .pill.amber, .pill.red { padding-left: 7px; }
.pill.green::before, .pill.amber::before, .pill.red::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill.green { background: var(--green-wash); border-color: var(--green-edge); color: var(--green-deep); }
.pill.amber { background: var(--amber-wash); border-color: var(--amber-edge); color: var(--amber-deep); }
.pill.red { background: var(--red-wash); border-color: var(--red-edge); color: var(--red-deep); }
.pill svg { width: 12px; height: 12px; }
a.pill:hover { filter: brightness(.97); }
/* a side panel that folds away: flags, history */
details.panel > summary.side-head { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; }
details.panel > summary.side-head::-webkit-details-marker { display: none; }
summary.side-head .right { display: flex; align-items: center; gap: 8px; }
summary.side-head .chev { display: flex; color: var(--faint); transition: transform .15s var(--ease); }
summary.side-head .chev svg { width: 15px; height: 15px; }
summary.side-head:hover .chev { color: var(--ink); }
details[open] > summary.side-head .chev { transform: rotate(90deg); }
details.panel.hist[open] > summary.side-head { border-bottom: 1px solid var(--hair); }

/* flags and their threads (entry/templates/_flags.html) */
.flags { display: flex; flex-direction: column; }
.flags > .notice { margin: 0 16px 10px; }
.flags .none { margin: 0; padding: 0 16px 14px; }
.flag { border-top: 1px solid var(--hair); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.flag header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flag header .what { color: var(--ink); font-size: 15px; }
.flag header .what:hover b { color: var(--green-deep); }
.flag .notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flag .notes li { padding-left: 12px; border-left: 2px solid var(--amber-edge); }
.flag.done .notes li { border-left-color: var(--line); }
.flag .notes .by { font-size: 14px; }
.flag .notes p { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--mid); white-space: pre-wrap; }
.flag .answer, .flags .raise { display: flex; flex-direction: column; gap: 8px; }
.flags .raise { border-top: 1px solid var(--line); padding: 14px 16px 16px; background: var(--raised); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.flag textarea.input, .flags .raise textarea.input { min-height: 58px; font-size: 15px; }
fieldset.bare { border: none; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled .chip button, fieldset:disabled .pick-box { display: none; }
fieldset:disabled .type span { cursor: default; opacity: .6; }
.acts3 { display: flex; justify-content: flex-end; gap: 8px; }
.flag .resolved { margin: 0; }
.flagged { color: var(--amber-deep); }

/* a field that still needs filling in, said beside it (static/controls.js) */
.field-error { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--red-deep); }
.chips-choice + .field-error { margin-top: 8px; }

/* what kind of element a name is: F feeder, L line, T transformer, G generating unit */
.kind { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--r-sm); font: 700 11.5px var(--mono); vertical-align: 1px; margin-right: 7px; border: 1px solid; cursor: default; }
.kind.k-feeder { color: var(--green-deep); background: var(--green-wash); border-color: var(--green-edge); }
.kind.k-line { color: #2C4A7A; background: #EEF2F9; border-color: #CFD9EA; }
.kind.k-transformer { color: #6A4A86; background: #F4F0F8; border-color: #DDD2E8; }
.kind.k-generator { color: var(--amber-deep); background: var(--amber-wash); border-color: var(--amber-edge); }
/* a link that marks something needing a look: a gold flag and words, no box */
.flag-link { display: inline-flex; align-items: center; gap: 7px; font: 700 15px var(--sans); color: var(--ink); }
.flag-link svg { width: 16px; height: 16px; color: var(--amber); }
.flag-link:hover { color: var(--amber-deep); }
/* a yes/no filter */
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--mid); cursor: pointer; user-select: none; white-space: nowrap; }
/* a little (i) that explains on hover or press */
.info { position: relative; display: inline-flex; }
.info > button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; }
.info > button:hover, .info > button[aria-expanded="true"] { color: var(--ink); background: var(--sunken); }
.info > .pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: -8px; width: 340px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--mid); }
.info:hover > .pop, .info:focus-within > .pop { display: block !important; }

/* asking before something that is hard to undo (static/controls.js) */
dialog.ask { border: none; border-radius: var(--r-lg); padding: 0; width: min(440px, 92vw); box-shadow: var(--shadow-pop); color: var(--ink); }
dialog.ask::backdrop { background: rgba(19, 23, 20, .42); backdrop-filter: blur(3px); }
dialog.ask[open] { animation: pop .16s var(--ease); }
.ask-body { padding: 22px 24px 8px; }
.ask-body h2 { margin: 0; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; text-wrap: balance; }
.ask-body p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--dim); }
.ask-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 20px; }
.btn.danger-solid, .btn.danger-solid:hover { color: #fff; background-color: var(--red); border-color: var(--red); }
.btn.danger-solid:hover { background-color: var(--red-deep); border-color: var(--red-deep); }

kbd { font: 600 12.5px var(--mono); background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 1px 6px; color: var(--mid); }

/* ---------------------------------------------------------------- small screens */
/* As the window narrows the menu gives way first, then labels, so nothing ever sits on top of anything else.
   The menu goes as soon as it would run under the buttons beside it (base.html marks the header "crowded"). */
.top.crowded .nav { display: none; }
.top.crowded .me .menu .narrow { display: flex; }
@media (min-width: 901px) and (max-width: 1280px) {
  .top .acts > span, .help-link span { display: none; }  /* the workbook's name, and "Guide" beside its icon */
  .top { padding: 0 20px; gap: 10px; }
  .nav { margin-left: 10px; }
  .nav a { padding: 0 9px; }
  .acts { min-width: 0; }
  .wrap { padding: 0 20px; }
}
/* a short window, as on a laptop with the display scaled up: less heading, more of the page's own work */
@media (min-width: 901px) and (max-height: 760px) {
  :root { --head-top: 12px; --head-under: 14px; }
  .page-head { padding: 14px 22px; min-height: 84px; }
  .page-head h1, .period-head h1 { font-size: 25px; }
  .page-head h1 + p { margin-top: 4px; font-size: 14.5px; }
  .period-head { padding: 14px 0 12px; }
  .period-head p { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .me .menu .narrow { display: flex; }
  .top { height: auto; min-height: 56px; padding: 10px 16px; flex-wrap: wrap; gap: 10px; position: static; }
  .top .brand { height: auto; }
  .acts { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .wrap { padding: 0 16px; }
  :root { --head-top: 12px; --head-under: 14px; }
  .page-head { padding: 18px; min-height: 0; }
}
@media (max-width: 640px) {
  .help-link span { display: none; }
  .btn { padding: 0 14px; }
}

/* ---------------------------------------------------------------- the period picker (templates/_rangepicker.html) */
.rp { display: flex; flex-direction: column; gap: 14px; }
.rp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-presets button { height: 28px; padding: 0 11px; font: 600 13.5px var(--sans); color: var(--mid); background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: all .12s; }
.rp-presets button:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.rp-presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rp-days { display: flex; justify-content: space-between; font-size: 14px; color: var(--dim); padding: 0 2px; }
.rp-inline { flex-direction: row; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rp-inline .field { width: 176px; }
.rp-inline .rp-days { height: var(--h); align-items: center; padding: 0 0 0 4px; }
.rp-inline [data-range-text] { display: none; }

/* a report page's heading: the period it covers, and the dates to change it, on one line */
.period-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 26px 0 18px; border-bottom: 2px solid var(--ink); }
.period-head h1 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.period-head p { margin: 0; font-size: 15px; color: var(--dim); max-width: 560px; line-height: 1.55; }

/* ---- the sign-off strip under a report's header */
.signoff { background: var(--raised); border-bottom: 1px solid var(--line); }
.signoff.waiting { background: var(--amber-wash); border-color: var(--amber-edge); }
.signoff.approved { background: var(--green-wash); border-color: var(--green-edge); }
.signoff.commented { background: var(--red-wash); border-color: var(--red-edge); }
.signoff-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.signoff-say { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 14.5px; color: var(--mid); }
.signoff-say b { color: var(--ink); font-weight: 700; }
.signoff-do { display: flex; align-items: center; gap: 8px; }
.signoff-do form { display: inline-flex; }
.signoff details { position: relative; }
.signoff details summary { list-style: none; }
.signoff details summary::-webkit-details-marker { display: none; }
.signoff-history summary { cursor: pointer; font-weight: 600; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.signoff details .pop { position: absolute; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 32px)); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.signoff-history .pop { left: auto; right: 0; list-style: none; margin: 0; max-height: 320px; overflow-y: auto; font-size: 14px; }
.signoff-history li span { color: var(--faint); }
.signoff-history q { display: block; margin-top: 3px; color: var(--mid); }
.signoff-comment .pop { right: 0; }
.signoff-comment textarea { min-height: 90px; resize: vertical; }
.nav .count, .bell .count { margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber-wash); border: 1px solid var(--amber-edge); color: var(--amber-deep); font: 700 12px var(--sans); }
.bell { gap: 2px; }
@media (max-width: 640px) {
  .signoff-in { position: relative; }
  .signoff details { position: static; }
  .signoff details .pop { left: 16px; right: 16px; width: auto; top: 100%; }
}