/* =====================================================================
   Detailed Implementation Plan - stylesheet

   The app is read far more than it is admired: budget grids, WBS trees,
   date columns. So the type is set for tabular data first - numerals
   line up in columns, codes are monospaced, and colour is reserved for
   status rather than decoration.

   No web fonts. Field staff load this over slow connections.
   ===================================================================== */

:root {
  /* Surfaces */
  --paper:    #f4f6f8;
  --card:     #ffffff;
  --sunken:   #eef1f5;

  /* Ink. The navy is the sidebar and the headings; it is dark enough
     to carry white text at small sizes. */
  --ink:      #16233f;
  --ink-soft: #46536b;
  --ink-mute: #68748a;

  /* Lines */
  --line:      #dde3ea;
  --line-firm: #c3ccd8;

  /* Accent: the orange from the staff portal. Used for the thing you
     are meant to press, and for the current page in the sidebar.
     Never for text on white at small sizes, where it fails contrast. */
  --accent:      #ef7d1a;
  --accent-dark: #d97210;
  --accent-wash: #fdf0e2;
  --accent-ink:  #8a4302;

  /* Navy, for headings and anything that should read as structure
     rather than as an action. */
  --navy:       #16233f;
  --navy-soft:  #24365c;

  /* Status */
  --good:      #2e6b34;
  --good-wash: #eaf3e6;
  --warn:      #8a5a06;
  --warn-wash: #fbf0dc;
  --bad:       #b3261e;
  --bad-wash:  #fbecea;
  --info-wash: #e9eff5;

  --radius:    8px;
  --radius-sm: 5px;

  /* No web font is downloaded. Field staff load this over slow
     connections, and a page that waits on a font file is a page
     that shows nothing. These are the faces already on the
     machine that come closest to the staff portal: humanist,
     open apertures, clear at small sizes. */
  --sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
          BlinkMacSystemFont, "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* The type scale is set here, once. Everything else is in rem, so
   raising this raises the whole system in proportion rather than
   leaving some things behind. 17px reads comfortably on a laptop at
   arm's length and survives a projector in a meeting. */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* Numerals line up in every table without extra classes */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 300; /* Makes text strong and clear */

}

a { color: var(--navy-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { font-weight: 600; margin: 0 0 .5rem; line-height: 1.3;
  color: var(--navy); letter-spacing: -.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5875rem; }
h3 { font-size: 1.4625rem; }

code, .mono, .wbs-code {
  font-family: var(--mono);
  font-size: .875em;
}

/* ---------------------------------------------------------------------
   Sign in
   --------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}

.auth-card h1 { font-size: 1.25rem; margin-bottom: .25rem; }
.auth-org { color: var(--ink-mute); font-size: .875rem; margin: 0 0 1.75rem; }

/* ---------------------------------------------------------------------
   Application shell
   --------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 20rem;
  flex: 0 0 20rem;
  background: var(--navy);
  color: #c4cddd;
  padding: 1.25rem 0 2rem;
  display: flex;
  flex-direction: column;
}

.brand {
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: .75rem;
}
.brand strong { color: #fff; display: block; font-size: 1.5rem; font-weight: 600;
  line-height: 1.2; }
.brand span { color: var(--accent); font-size: .9375rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; }

.nav-group { margin-bottom: .25rem; }
.nav-group > p {
  margin: 1rem 1rem .375rem;
  font-size: 1.125rem;
  letter-spacing: .04em;
  color: #8091ab;
  font-weight: 600;
}

.sidebar a {
  display: block;
  padding: .375rem 1rem;
  color: #c4cddd;
  font-size: 1rem;
  line-height: 1.2;
  border-left: 4px solid transparent;
}
.sidebar a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.sidebar a[aria-current] {
  background: var(--accent);
  border-left-color: var(--accent-dark);
  color: var(--navy);
  font-weight: 600;
}

.sidebar-foot {
  margin-top: auto;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 1.125rem;
}
.sidebar-foot a { padding: .25rem 0; border: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: .75rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.project-switch { display: flex; align-items: center; gap: .5rem; }
.project-switch select {
  font: inherit;
  padding: .3125rem .5rem;
  border: 1px solid var(--line-firm);
  border-radius: var(--radius-sm);
  background: var(--card);
  max-width: 20rem;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: .875rem; }

.content { padding: 1.75rem; flex: 1; }
.content > header { margin-bottom: 1.5rem; }
.content > header p { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------------
   Cards, tables, forms
   --------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.375rem;
  margin-bottom: 1.25rem;
}
.card > h2 { margin-bottom: .75rem; }

.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.stat { display: flex; flex-direction: column; gap: .125rem; }
.stat .value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.stat .label { color: var(--ink-mute); font-size: .8125rem; }

/* Wide tables scroll inside their own container, never the page */
.table-scroll { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data th {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
  font-size: .8125rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .5625rem .625rem;
  border-bottom: 1px solid var(--line-firm);
  white-space: nowrap;
}
table.data td { padding: .5625rem .625rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:hover { background: var(--sunken); }
table.data .num { text-align: right; }

label { display: block; font-weight: 600; font-size: .9375rem; margin: .875rem 0 .25rem;
  color: var(--navy); }
label .hint { display: block; font-weight: 400; color: var(--ink-mute); font-size: .8125rem;
  line-height: 1.45; margin-top: .125rem; }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  font: inherit;
  padding: .5rem .625rem;
  border: 1px solid var(--line-firm);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}
textarea { min-height: 6rem; resize: vertical; }

.btn {
  display: inline-block;
  padding: .5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--navy);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.btn:hover { background: var(--accent-dark); text-decoration: none; color: var(--navy); }
.btn-block { display: block; width: 100%; }
.btn-quiet { background: var(--card); color: var(--ink); border-color: var(--line-firm); }
.btn-quiet:hover { background: var(--sunken); color: var(--ink); }

/* ---------------------------------------------------------------------
   Status. A solid dot plus a word - never colour alone, so the grid
   still reads correctly when printed or seen by a colour-blind user.
   --------------------------------------------------------------------- */
.status { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; font-size: .8125rem; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-mute); }
.status-good::before    { background: var(--good); }
.status-warn::before    { background: var(--warn); }
.status-bad::before     { background: var(--bad); }
.status-accent::before  { background: var(--accent); }

.tag {
  display: inline-block;
  padding: .0625rem .4375rem;
  border-radius: 3px;
  font-size: .75rem;
  font-weight: 500;
  background: var(--sunken);
  color: var(--ink-soft);
}
.tag-good   { background: var(--good-wash); color: var(--good); }
.tag-warn   { background: var(--warn-wash); color: var(--warn); }
.tag-bad    { background: var(--bad-wash);  color: var(--bad); }
.tag-accent { background: var(--accent-wash); color: var(--accent-dark); }

.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--sunken);
  margin-bottom: 1.25rem;
  font-size: .9375rem;
}
.alert-bad  { border-color: #eebfbb; background: var(--bad-wash);  color: #7a1a15; }
.alert-good { border-color: #c3ddc0; background: var(--good-wash); color: #1f4a24; }
.alert-warn { border-color: #e6cf9a; background: var(--warn-wash); color: #6b4605; }

/* An empty screen is an invitation to act, not an apology */
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--ink-soft); }
.empty h2 { color: var(--ink); }
.empty p { max-width: 30rem; margin: 0 auto 1.25rem; }

.muted { color: var(--ink-mute); }
.small { font-size: .8125rem; }

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
#toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 60;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: .625rem .875rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  max-width: 22rem;
}
.toast-bad { background: var(--bad); }

/* ---------------------------------------------------------------------
   Narrow screens. Field staff work from a handset, so the sidebar
   folds into a horizontal strip rather than disappearing behind a menu.
   --------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    padding: .5rem;
    gap: .25rem;
    align-items: center;
  }
  .brand, .nav-group > p, .sidebar-foot { display: none; }
  .nav-group { display: flex; }
  .sidebar a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap;
    padding: .5rem .75rem; font-size: 1.125rem; }
  .sidebar a[aria-current] { border-left: 0; border-bottom-color: #57b89c; }
  .content, .topbar { padding: 1rem; }
}

@media print {
  .sidebar, .topbar, .btn, #toasts { display: none !important; }
  body { background: #fff; }
  .card { border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   Form validation. The message sits under the field it belongs to.
   --------------------------------------------------------------------- */
.field-error {
  margin: .25rem 0 0;
  font-size: .8125rem;
  color: var(--bad);
}
[aria-invalid] { border-color: var(--bad); }
[aria-invalid]:focus { outline-color: var(--bad); }

.form-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.form-actions { margin-top: 1.5rem; display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; }

fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
fieldset > legend {
  padding: 0; font-weight: 600; font-size: .9375rem;
  margin-bottom: .25rem;
}
fieldset > .legend-hint { color: var(--ink-mute); font-size: .8125rem; margin: 0 0 .5rem; }

.checkbox-row { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0 0; }
.checkbox-row input { width: auto; margin-top: .3125rem; }
.checkbox-row label { margin: 0; }

.page-actions { display: flex; gap: .625rem; align-items: center; margin-left: auto; }
.content > header { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.content > header > div { min-width: 0; }

/* ---------------------------------------------------------------------
   Data grid
   --------------------------------------------------------------------- */
.grid-toolbar {
  display: flex; gap: .625rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.grid-search { flex: 1 1 14rem; min-width: 10rem; }
.grid-search input { width: 100%; }
.grid-toolbar select { width: auto; min-width: 9rem; }
.grid-actions { display: flex; gap: .5rem; margin-left: auto; }

.sort-btn {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; text-align: left;
}
.sort-btn:hover { color: var(--ink); text-decoration: underline; }
th[aria-sort="ascending"] .sort-btn::after  { content: " \2191"; }
th[aria-sort="descending"] .sort-btn::after { content: " \2193"; }

.grid-row-actions { white-space: nowrap; }
.grid-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }
.grid-empty p { margin-bottom: 1rem; }
.grid-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .875rem; margin-top: .25rem;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.grid-pages { display: flex; gap: .5rem; }

/* ---------------------------------------------------------------------
   Edit panel. Slides in from the right on a wide screen, fills the
   screen on a phone, so field staff get a usable form either way.
   --------------------------------------------------------------------- */
.panel-overlay {
  position: fixed; inset: 0; background: rgba(22,33,30,.45);
  display: flex; justify-content: flex-end; z-index: 50;
}
.panel {
  background: var(--card); width: min(38rem, 100%);
  display: flex; flex-direction: column; max-height: 100vh;
  border-left: 1px solid var(--line-firm);
}
.panel-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.375rem; border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; }
.panel-close {
  margin-left: auto; background: none; border: 0; font-size: 1.5rem;
  line-height: 1; cursor: pointer; color: var(--ink-mute); padding: .25rem .5rem;
}
.panel-close:hover { color: var(--ink); }
.panel-body { padding: 1.25rem 1.375rem; overflow-y: auto; flex: 1; }
.panel-body fieldset { margin-bottom: 1.25rem; }
.panel-body fieldset:last-of-type { margin-bottom: 0; }
.panel-body legend {
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
  padding-bottom: .375rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--line); width: 100%;
}
.panel-field { margin-bottom: .25rem; }
.panel-field label { margin-top: .75rem; }
.panel-body [type=submit] { display: none; }
.panel-foot {
  display: flex; gap: .625rem; align-items: center;
  padding: 1rem 1.375rem; border-top: 1px solid var(--line);
}
.panel-foot .btn-danger { margin-left: auto; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #8e1e17; color: #fff; }

@media (max-width: 40rem) {
  .panel { width: 100%; border-left: 0; }
  .grid-actions { margin-left: 0; width: 100%; }
  .grid-actions .btn { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------------------
   Work breakdown
   --------------------------------------------------------------------- */
.view-tabs { display: flex; gap: .25rem; }
.view-tab {
  font: inherit; padding: .375rem .875rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-firm);
  border-radius: var(--radius-sm); color: var(--ink-soft);
}
.view-tab.is-active { background: var(--accent); border-color: var(--accent-dark);
  color: var(--navy); font-weight: 600; }

.wbs-table td { vertical-align: middle; }
.wbs-code { white-space: nowrap; color: var(--ink-mute); }
.wbs-desc { display: flex; align-items: baseline; gap: .5rem; min-width: 18rem; }
.wbs-tag {
  font-size: .75rem; font-weight: 600; padding: .0625rem .375rem;
  border-radius: 3px; background: var(--sunken); color: var(--ink-mute);
  white-space: nowrap; flex: none;
}
.wbs-level-outcome  { background: var(--accent-wash); }
.wbs-level-outcome td { font-weight: 500; }
.wbs-level-outcome .wbs-tag { background: var(--accent); color: #fff; }
.wbs-level-output .wbs-tag  { background: var(--info-wash); color: #1c4468; }

.icon-btn {
  font: inherit; line-height: 1; padding: .25rem .4375rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-soft);
}
.icon-btn:hover { background: var(--sunken); color: var(--ink); }

.progress {
  display: inline-block; width: 4rem; height: .4375rem; vertical-align: middle;
  background: var(--sunken); border-radius: 3px; overflow: hidden; margin-right: .375rem;
}
.progress span { display: block; height: 100%; background: var(--accent); }

/* Schedule ------------------------------------------------------------ */
.gantt { min-width: 46rem; font-size: .8125rem; }
.gantt-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.gantt-head { border-bottom: 1px solid var(--line-firm); font-weight: 600; color: var(--ink-soft); }
.gantt-label {
  flex: 0 0 20rem; padding: .375rem .625rem .375rem 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-scale { flex: 1; display: flex; }
.gantt-month {
  border-left: 1px solid var(--line); padding: .375rem .375rem;
  font-size: .75rem; white-space: nowrap; overflow: hidden;
}
.gantt-track { flex: 1; position: relative; height: 1.75rem; }
.gantt-bar {
  position: absolute; top: .4375rem; height: .875rem; border-radius: 3px;
  background: var(--line-firm); overflow: hidden; min-width: 3px;
}
.gantt-fill { display: block; height: 100%; background: var(--accent); }
.gantt-outcome  { background: #b9cfc8; }
.gantt-output   { background: #c6d5e4; }
.gantt-activity { background: #d3dbd8; }
.gantt-task     { background: #dfe4e2; }

/* build 2026.09.10 Version 1 */
.build-stamp {
  margin: 2rem 1.75rem 1rem; font-size: .75rem; color: var(--ink-mute); text-align: right;
}

/* ---------------------------------------------------------------------
   Budget phasing grid
   --------------------------------------------------------------------- */
.budget-table { font-size: .8125rem; }
.budget-table th, .budget-table td { padding: .375rem .5rem; }
.budget-table tfoot th, .budget-table tfoot td {
  border-top: 2px solid var(--line-firm); font-weight: 600; border-bottom: 0;
}
.q-head {
  text-align: center; font-size: .75rem; color: var(--ink-mute);
  border-left: 1px solid var(--line); font-weight: 600;
}
.month-head { font-size: .75rem; white-space: nowrap; min-width: 4.5rem; }
.month-cell { padding: .125rem .25rem; }
.month-input {
  width: 5rem; padding: .1875rem .3125rem; text-align: right;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  font: inherit; font-variant-numeric: tabular-nums;
}
.month-input:hover { border-color: var(--line); background: var(--card); }
.month-input:focus { border-color: var(--accent); background: var(--card); outline: none; }
.budget-table td > div { margin-bottom: .0625rem; }

/* ---------------------------------------------------------------------
   Change approvals
   --------------------------------------------------------------------- */
.change-card { border-left: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; }
.change-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.change-head h2 { margin: 0; }
.change-facts { width: auto; margin: .75rem 0 0; font-size: .875rem; }
.change-facts th { width: 9rem; color: var(--ink-soft); font-weight: 500; }
.change-decide { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.nav-count {
  display: inline-block; margin-left: .375rem; padding: 0 .375rem;
  border-radius: 999px; background: var(--warn); color: #fff;
  font-size: .75rem; font-weight: 600;
}

/* ---------------------------------------------------------------------
   Collapsible navigation groups
   --------------------------------------------------------------------- */
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: .5rem;
  margin: 1rem 0 .375rem; padding: .25rem 1rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 1.125rem; font-weight: 600;
  letter-spacing: .04em; color: #7e928c; text-align: left;
}
.nav-group-toggle:hover { color: #cfdad6; }
.nav-group-toggle:focus-visible { outline: 2px solid #57b89c; outline-offset: -2px; }

/* A chevron drawn from two borders, so there is no icon file to load
   on a slow connection. It points down when open, right when closed. */
.nav-chevron {
  width: .625rem; height: .625rem; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}
.nav-group-toggle[aria-expanded="false"] .nav-chevron {
  transform: rotate(-45deg) translate(-1px, 1px);
}
@media (prefers-reduced-motion: reduce) {
  .nav-chevron { transition: none; }
}

.nav-group-items { overflow: hidden; }
.nav-group-toggle[aria-expanded="false"] + .nav-group-items { display: none; }

@media (max-width: 48rem) {
  .nav-group-toggle { display: none; }
  .nav-group-items { display: flex !important; }
}

/* Dashboard -------------------------------------------------------- */
.attention-list { margin: .5rem 0 0; padding-left: 1.125rem; }
.attention-list li { margin-bottom: .375rem; }
.value-good { color: var(--good); }
.value-warn { color: var(--warn); }
.value-bad  { color: var(--bad); }
.breakdown-row td { color: var(--ink-soft); background: var(--sunken); font-size: .8125rem; }

/* ---------------------------------------------------------------------
   Glossary
   --------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.glossary { margin: 0; }
.glossary-item { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.glossary-item:last-child { border-bottom: 0; padding-bottom: 0; }
.glossary-item dt { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.glossary-short { font-weight: 600; }
.glossary-long { color: var(--ink-mute); font-size: .875rem; }
.glossary dd { margin: .1875rem 0 0; color: var(--ink-soft); max-width: 46rem; }
.glossary dd p { margin: 0 0 .375rem; }
.glossary dd p:last-child { margin-bottom: 0; }
.glossary-here {
  border-left: 2px solid var(--line-firm); padding-left: .75rem;
  color: var(--ink-mute); font-size: .9375rem;
}

/* ---------------------------------------------------------------------
   Explore
   --------------------------------------------------------------------- */
.explore-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.explore-field { flex: 1 1 11rem; min-width: 9rem; }
.explore-field label { margin-top: 0; }
.explore-field select { width: 100%; }
.explore-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .875rem; }
.explore-head h2 { margin: 0; flex: 1 1 auto; }

.chart { width: 100%; height: auto; min-width: 34rem; }
.chart-label { font-size: 12.5px; fill: var(--ink-mute); font-family: var(--sans); }
.chart-value { font-size: 12.5px; fill: var(--ink-soft); font-family: var(--sans);
               font-variant-numeric: tabular-nums; }
.chart-grid { stroke: var(--line); stroke-width: 1; }

.explore-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .875rem;
                  font-size: .8125rem; color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: center; gap: .375rem; }
.legend-swatch { width: .75rem; height: .75rem; border-radius: 2px; display: inline-block; }

table.heat th[scope="row"] { font-weight: 400; white-space: nowrap; }
table.heat td { transition: none; }
.glossary-tools { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.glossary-tools .explore-field { flex: 1 1 16rem; }
.glossary-tools input[type=search] { width: 100%; }
.glossary-tools .btn { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------
   Attachments
   --------------------------------------------------------------------- */
.attach-block { margin-top: 1.5rem; }
.attach-row {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .4375rem 0; border-bottom: 1px solid var(--line);
}
.attach-row:last-child { border-bottom: 0; }
.attach-row .icon-btn { margin-left: auto; }
.attach-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.attach-tools input[type=file] { font-size: .8125rem; flex: 1 1 12rem; }
.attach-caption { flex: 1 1 12rem; }
.attach-tools select { width: auto; }
.check-row { display: block; font-weight: 400; margin: .25rem 0; cursor: pointer; }
.check-row input { width: auto; margin-right: .375rem; }

/* Dropdown lists: the lists on the left, the values in the selected one
   on the right. Collapses to one column on a narrow screen. */
.lookup-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 55rem) { .lookup-layout { grid-template-columns: 1fr; } }
.lookup-side-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-mute); margin: 0 0 .5rem; }
.lookup-lists { display: flex; flex-direction: column; gap: 1px; }
.lookup-list { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .45rem .6rem; border-radius: 4px; font: inherit; color: var(--ink); }
.lookup-list:hover { background: var(--sunken); }
.lookup-list.is-active { background: var(--sunken); font-weight: 600; }
.lookup-list-name { flex: 1; }
.lookup-list-count { font-size: .75rem; color: var(--ink-mute); white-space: nowrap; }
.lookup-list-count.is-empty { color: var(--bad); }
.lookup-order { white-space: nowrap; width: 3.5rem; }
.lookup-move { background: none; border: 0; cursor: pointer; padding: 0 .2rem;
  color: var(--ink-mute); font-size: .95rem; line-height: 1; }
.lookup-move:hover:not(:disabled) { color: var(--ink); }
.lookup-move:disabled { opacity: .25; cursor: default; }
tr.is-off td { color: var(--ink-mute); }

/* Help page. The contents list is all that shows until something is
   chosen; the part chosen opens in a panel over the page. */
.guide-index { margin: .5rem 0 0; padding-left: 1.4rem; }
.guide-index li { margin: .3rem 0; }
.guide-index-link { background: none; border: 0; padding: .15rem 0; font: inherit;
  color: var(--navy-soft); cursor: pointer; text-align: left; }
.guide-index-link:hover { text-decoration: underline; }
.panel.panel-wide { max-width: 44rem; }
.guide-body h3 { margin: 1.3rem 0 .4rem; font-size: 1rem; }
.guide-body p { margin: .6rem 0; }
.guide-steps { margin: .6rem 0; padding-left: 1.1rem; }
.guide-steps li { margin: .35rem 0; }
.guide-note { border-left: 3px solid var(--accent); background: var(--accent-wash);
  color: var(--ink);
  padding: .6rem .8rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.guide-foot { flex-wrap: wrap; gap: .4rem; }
.guide-marks { list-style: none; margin: -.4rem 0 .8rem; padding: 0;
  font-size: .8rem; color: var(--ink-mute); }
.guide-marks li { margin: .15rem 0; }
.guide-marks code { background: var(--sunken); padding: 0 .25rem; border-radius: 3px; }
.guide-index .pill { margin-left: .4rem; }

/* The five worked examples sit behind one line of the contents with a
   dropdown, rather than filling a third of it. */
.guide-index-examples { margin-top: .6rem; }
.guide-index-label { display: block; margin-bottom: .3rem; }
.guide-example-pick { width: auto; max-width: 100%; min-width: 16rem; }

/* Reference library: one block per document, grouped by category. */
.resource-row { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.resource-row:last-child { border-bottom: 0; padding-bottom: 0; }
.resource-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.resource-row p { margin: .25rem 0; max-width: 46rem; }
.resource-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.btn-small { padding: .25rem .625rem; font-size: .8125rem; }

/* Reading a file in the page rather than downloading it. */
.panel.panel-read { width: min(60rem, 100%); }
.read-body { padding: 0; display: flex; flex-direction: column; }
.read-frame { width: 100%; height: 78vh; border: 0; background: var(--sunken); }
.read-image { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.read-text { margin: 0; padding: 1.25rem; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: .875rem; }

/* Ticking who may see a resource. Scrolls rather than making the
   panel enormous once there are thirty people. */
.pick-box { max-height: 11rem; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .4rem .6rem; margin-bottom: .75rem; }

/* ---------------------------------------------------------------------
   Messages. Folder rail, list, reading pane: the shape people already
   know from every mail client, so nobody has to be taught it.
   --------------------------------------------------------------------- */
.mail { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 55rem) { .mail { grid-template-columns: 1fr; } }

.mail-rail { display: flex; flex-direction: column; gap: 1px; }
.mail-compose { margin-bottom: .75rem; text-align: center; }
.mail-folder { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .5rem .75rem; border-radius: 999px; font: inherit; color: var(--ink); }
.mail-folder:hover { background: var(--sunken); }
.mail-folder.is-active { background: var(--accent-wash); font-weight: 600; color: var(--navy); }
.mail-count { background: var(--accent); color: var(--navy); font-weight: 700;
  font-size: .75rem; border-radius: 999px; padding: 0 .45rem; }

.mail-main { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); min-width: 0; }
.mail-bar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.mail-search { flex: 1 1 16rem; min-width: 10rem; }
.mail-bar-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

.mail-list { display: flex; flex-direction: column; }
.mail-row { display: grid; grid-template-columns: auto auto auto 11rem 1fr auto;
  gap: .6rem; align-items: center; padding: .6rem 1rem;
  border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; }
.mail-row:hover { background: var(--sunken); }
.mail-row.is-unread { background: #fff; }
.mail-row.is-unread .mail-from,
.mail-row.is-unread .mail-subject-text { font-weight: 700; color: var(--navy); }
.mail-row input[type=checkbox] { width: auto; margin: 0; }
.mail-star { background: none; border: 0; cursor: pointer; font-size: 1.05rem;
  line-height: 1; color: var(--ink-mute); padding: 0; }
.mail-star.is-on { color: var(--accent); }
.mail-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy-soft);
  color: #fff; font-size: .75rem; font-weight: 700; flex: none; }
.mail-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-preview { color: var(--ink-mute); }
.mail-when { color: var(--ink-mute); font-size: .8125rem; white-space: nowrap; }

.mail-read { padding: 1rem 1.25rem; }
.mail-read-subject { margin: .75rem 0 1rem; }
.mail-message { border: 1px solid var(--line); border-radius: var(--radius);
  padding: .875rem 1rem; margin-bottom: .75rem; }
.mail-message.is-draft { border-style: dashed; background: var(--sunken); }
.mail-message-head { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; }
.mail-message-who { min-width: 0; }
.mail-message-when { margin-left: auto; white-space: nowrap; }
.mail-body { white-space: pre-wrap; word-break: break-word; max-width: 46rem; }
.mail-reply-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Sidebar: tighter and quieter.

   Paste this at the END of asset-css.php. It only overrides the sidebar,
   so nothing else in your stylesheet changes, and removing it puts the
   old sizing back.

   The cause of the bulk is that the sidebar is sized in rem while the
   root is 17px, so 15rem became 255px and .9375rem links became 16px.
   Everything below is sized in px for that reason: the navigation should
   not grow when somebody changes the type scale of the content.
   --------------------------------------------------------------------- */

.sidebar {
  width: 208px;
  flex: 0 0 208px;
  padding: 14px 0 20px;
}

/* The brand: still there, no longer shouting. */
.brand { padding: 0 14px 12px; margin-bottom: 4px; }
.brand strong { font-size: 14px; line-height: 1.25; }
.brand span { font-size: 10px; letter-spacing: .09em; }

/* Group headings read as labels, not as headings competing with the
   items under them. */
.nav-group { margin-bottom: 0; }
.nav-group > p,
.nav-group-toggle {
  margin: 12px 0 2px;
  padding: 2px 14px;
  font-size: 10.5px;
  letter-spacing: .09em;
  color: #7d8ea8;
}

/* The items themselves: the part people actually read. */
.sidebar a {
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  border-left-width: 2px;
}
.sidebar a:hover { background: rgba(255,255,255,.07); }
.sidebar a[aria-current] { font-weight: 600; }

.sidebar-foot { padding: 10px 14px 0; font-size: 12px; }
.sidebar-foot a { padding: 3px 0; font-size: 12px; }

/* The count badge shrinks with everything else. */
.sidebar .nav-count { font-size: 10px; padding: 0 5px; }

/* On a narrow screen the sidebar already becomes a horizontal strip;
   keep the smaller type there too. */
@media (max-width: 55rem) {
  .sidebar { width: auto; flex: none; padding: 8px 0; }
  .sidebar a { padding: 6px 10px; font-size: 13px; }
}