/* The LEI look (Plans\PLAN - LEI Architecture.md section 14; owner, 2026-10-12: "If I'm not working in the ASK DAVEY
   interface (the troubleshooting AI), please switch to the LEI colour Scheme").
   Used by the Office Portal pages (LEI Office\office.html, admin.html, inbox.html); later the public site and the
   Client Portal (then this file moves to LEI Website\lei.css). Ask Davey (web\index.html, web\login.html) NEVER uses it:
   it keeps its navy / red look.
   It is a THEME (plan decision 22): every colour and font is a variable here, so another company's colour scheme is
   this one block, not a code change. Colours sampled from For Claude\LEI Website\LEI Home Page.png.
   OPTION E (owner, 2026-10-13): BLACK + GOLD. Gold #CFAE3D = what you can click or what is selected, never the colour
   of words on a light page (those use --accent-text #8A7020). Red = only urgent / wrong (entrapment, late, refused,
   expired). Header and footer black in both modes. Offline: no web fonts.
   (The variable names --brass / --navy stayed so nothing else had to change: they hold gold / black now.) */
:root, :root[data-theme] {
  --navy: #0A0B0D;          /* header + footer: black, the same in day and night */
  --navy-deep: #0A0B0D;     /* footer band */
  --brass: #CFAE3D;         /* GOLD (Option E, 2026-10-13; was brass #CFAE3D): buttons, selected, the short rule before a section label, the header's line */
  --brass-text: #8A7020;    /* gold for WORDS on a light page (#CFAE3D is too faint to read on white) */
  --on-brass: #0A0B0D;      /* words on a gold button */
  --serif: Georgia, "Times New Roman", Times, serif;   /* headlines (a bundled serif can replace it later) */

  --bg: #FAFAF8; --panel: #FFFFFF; --panel-2: #EEF0F3; --ink: #0A0B0D; --ink-2: #5B6370; --line: #DCE0E6;
  --text: #2A2F38;          /* paragraph words (headings and main words: --ink) */
  --outline: #2A2F38;       /* outline buttons */
  --band: #16181D;          /* hero / dark bands */
  --on-dark: #FFFFFF; --on-dark-2: #AEB6C2;  /* main / small words on the black header, footer and dark bands */
  --grid: transparent; --head-bg: var(--navy); --foot-bg: var(--navy-deep);
  --accent: var(--brass); --accent-text: var(--brass-text); --on-accent: var(--on-brass);
  --red: #B3261E; --ok: #17724a; --bad: #B3261E; --focus: #0b63ce; --heading: var(--ink);
  /* the dispatch states on the call cards (owner, 2026-10-12): RECEIVED blue, ON MY WAY yellow, ETA late orange */
  --st-blue: #1d5fd1; --st-yellow: #d9a400; --st-yellow-ink: #7a5c00; --st-orange: #c2570c;
  --lift: 0 12px 32px rgba(0, 0, 0, .16); color-scheme: light;
}
/* Text size (My settings, saved to the person's account; lei.js applies it) */
:root[data-text="large"] { font-size: 112.5%; }
:root[data-text="larger"] { font-size: 125%; }
/* the header bar keeps its usual size, so it stays on one line (its widths were measured at normal size) */
:root[data-text="large"] .top { zoom: .889; }
:root[data-text="larger"] .top { zoom: .8; }
/* Night mode (owner, 2026-10-12: "create a night-mode for LEI Office view"): the moon button in the header
   (lei.js; remembered per browser as "lei-theme", separate from Ask Davey's own light / dark choice). The same navy
   and brass, turned down: deep navy page, navy cards, warm white words, brass still marks what you can click. */
:root[data-theme="night"] {
  --bg: #0A0B0D; --panel: #16181D; --panel-2: #16181D; --ink: #FFFFFF; --ink-2: #AEB6C2; --line: #2A2F38;
  --text: #D5DAE1; --outline: #AEB6C2;
  --head-bg: #0A0B0D; --foot-bg: #0A0B0D; --heading: #FFFFFF;
  --brass-text: #CFAE3D;    /* gold words on a dark page */
  --red: #C9372C; --ok: #2f9e6a; --bad: #ff8f86; --focus: #7cb8ff;
  --st-blue: #5aa2ff; --st-yellow: #f5c518; --st-yellow-ink: #f5c518; --st-orange: #ff9f43;
  --lift: 0 14px 40px rgba(0, 0, 0, .5); color-scheme: dark;
}

/* headlines: serif, as in the photo ("Reliable Elevator Service.") instead of Ask Davey's poster capitals */
.heavy:not(.brand) { font-family: var(--serif); font-weight: 700; text-transform: capitalize; letter-spacing: 0; color: var(--heading); }
/* the name in the header: spaced serif capitals ("L E W I S  E L E V A T O R") */
.brand.heavy { font-family: var(--serif); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.brand svg rect:first-child { fill: var(--brass); }
.brand svg rect + rect { fill: var(--navy); }
/* the header's line: a thin brass rule instead of Ask Davey's red */
.top { padding-bottom: calc(.6rem + 2px); }
.top::after { height: 2px; background: linear-gradient(90deg, var(--brass) 0, var(--brass) 30%, transparent 85%); }
.ghost:hover { border-color: var(--brass); }
/* section labels: small spaced capitals with a short brass rule in front ("— OUR SERVICES") */
h2.sub::before { content: ""; display: inline-block; width: 1.4rem; height: 2px; margin: 0 .6rem .2rem 0;
  vertical-align: middle; background: var(--brass); }
/* the confidentiality line sits on a navy band, like the photo's footer */
.legal { padding: .8rem 1rem; border-radius: 10px; background: var(--foot-bg); color: var(--on-dark-2); }
.legal b { color: var(--brass); }
:root[data-theme="night"] .legal { border: 1px solid var(--line); }
/* the company menu (lei.js) */
.lei-wrap { position: relative; display: inline-flex; }
.lei-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 13rem; padding: .35rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); box-shadow: var(--lift); display: grid; gap: .1rem; }
.lei-menu[hidden] { display: none; }
.lei-menu [role=menuitem] { display: block; width: 100%; padding: .6rem .7rem; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink); text-align: left; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.lei-menu [role=menuitem]:hover, .lei-menu [role=menuitem]:focus-visible { background: var(--panel-2); }
.staff-row { display: flex; flex-wrap: wrap; gap: .2rem .9rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.staff-row a { color: var(--accent-text); }
.staff-dlg { width: min(32rem, calc(100vw - 1.5rem)); padding: 0; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: var(--lift); }
.staff-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.staff-dlg .dlg { padding: 1rem 1.1rem; }
.staff-dlg input[type=search] { width: 100%; min-height: 40px; margin: .4rem 0 .6rem; padding: 0 .6rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.staff-dlg .row { display: flex; gap: .6rem; margin-top: .8rem; }
/* titles: every word starts with a capital (owner, 2026-10-12) */
h1, h2, h3, h4, legend, details > summary, .tabs button, .lei-menu [role=menuitem] { text-transform: capitalize; }
/* the moon / sun button in the header */
.theme-btn { width: 40px; padding: 0 !important; justify-content: center; }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-btn .sun, :root[data-theme="night"] .theme-btn .moon { display: none; }
:root[data-theme="night"] .theme-btn .sun { display: block; }

/* Option E (2026-10-13): paragraph words a little softer than headings; outline buttons in their own colour; small
   words on the black header in #AEB6C2 */
:where(main, section, dialog, .card, .item) :where(p, li, dd) { color: var(--text); }
.secondary { border-color: var(--outline) !important; color: var(--outline); }
header.top #who, header.top .meta { color: var(--on-dark-2) !important; }

/* the header with its own bell (2026-10-13): the name, then the brand words, hide on narrower screens so it stays on
   one line for longer (an Office page on a phone still wraps, as before) */
@media (max-width: 1100px) { header.top #who { display: none; } }
@media (max-width: 880px) { header.top .brand > span { display: none; } }