/* ==========================================================================
   Safe Haven — the whole stylesheet

   The look is read off the two logos: a house and a furnished room drawn in
   one fine gold line on flat charcoal, with "Safe Haven" signed underneath.
   So the portal is a drawing, not a set of cards:

     · the ground is a draughtsman's sheet under a lamp: a ruled grid, a pool
       of light, dark at the edges (body::before). What sits on it is framed
       in a clear gold line on its own plain surface.
     · everything is a 1px gold line: frames, rules, buttons, fields
     · corners are square; a frame that matters is ruled twice, like a
       drawing's border
     · headings are signed in the script; labels are small tracked capitals;
       the text is a light geometric sans
     · gold is only ever line or type, except the one filled button a page
       is asking you to press

   The layout is a fixed menu down the left and one page beside it. Everyone
   lands on the home page: a greeting and the same pages set out as choices,
   with no figures on it.

   (This deliberately shares nothing with the Takahashi portal's styling:
   that one is rounded, textured, foil-edged cards.)
   ========================================================================== */

@import url('fonts.css');

:root {
  color-scheme: dark;

  --bg:          #181716;
  --bg-raised:   #1e1d1b;   /* dropdown lists, toasts, dialogs: only what floats */
  --wash:        rgba(222, 198, 142, 0.07);
  --wash-strong: rgba(222, 198, 142, 0.14);

  --gold:        #d8b96c;
  --gold-soft:   #f3e2ae;
  --gold-dim:    #a88a4e;
  --gold-ink:    #1b1508;

  --line:        rgba(216, 185, 108, 0.9);
  --line-soft:   rgba(216, 185, 108, 0.46);

  --text:        #efe9dc;
  --text-dim:    #d6cfbf;
  --text-faint:  #aea692;
  --text-ghost:  #857d6c;

  --pos:         #a3cba9;
  --warn:        #e2a274;
  --neg:         #e2918a;

  --font-ui:     'Jost', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Oooh Baby', 'Segoe Script', cursive;   /* the closest free match to the logo's signature */
  --font-mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  --side:        240px;   /* eight squares of the ground's grid */
  --cell:        30px;    /* one square of it */
  --ease:        cubic-bezier(0.3, 0.7, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The ground the drawing sits on: a draughtsman's sheet under a lamp (Matt's
   pick of five: "blueprint and spotlight work the best together"). A grid of
   fine squares (--cell, 30px) inside larger ones (five cells), a wide soft
   light behind the page, darker at the edges. It stays put while the page
   scrolls.

   Things are set out ON the grid, as on a drawing (Matt: elements should be
   "aesthetically aligned with the background"): the grid starts at the
   menu's edge, the page's margins are one cell, and its width is a whole
   number of cells, so frames begin and end on a line. Signed out, the grid
   starts at the sign-in card's corner instead, and the card is 15 by 19
   cells. --grid-x / --grid-y say where the grid starts.

   There is no grain over it and no second glow: both drew as blur and blocks
   on a scaled display (Matt: "a bit blurry/pixelated").

   Because the ground is ruled, whatever sits on it has to stand clear of it
   (Matt: "borders, text, and dividing lines need to be more distinguishable
   from the background"): frames and dividers are 2px of near-solid gold, the
   lighter dividers 1px, text is lighter, and frames are filled with
   --surface, so the grid stops at their edge. */
:root {
  /* Gold as metal, not paint (Matt: "the gold can also be more metallic"): it runs from a bright
     highlight to a slightly deeper gold and back. Kept gentle: the first version, which ran down to
     bronze, was too much (Matt: "tone down the current metallic effect"). */
  --metal: linear-gradient(100deg, #c9a95f 0%, #e9d69c 22%, #d8b96c 45%, #c2a058 65%, #e3cd8f 85%, #cfae64 100%);
  --metal-edge: linear-gradient(135deg, #e6d298 0%, #cdab60 35%, #dfc784 60%, #c4a25a 100%) 1;
  --surface: linear-gradient(180deg, #1d1b18, #151412);
  --lift: 0 30px 60px -34px rgba(0, 0, 0, 0.95), 0 10px 22px -14px rgba(0, 0, 0, 0.6);
  --grid-x: calc(50vw - 225px);
  --grid-y: calc(50vh - 285px);
}
body:has(.shell[data-authed="true"]) { --grid-x: var(--side); --grid-y: 0px; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 100% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(rgba(216, 185, 108, 0.1) 1px, transparent 1px) var(--grid-x) var(--grid-y) / 150px 150px,
    linear-gradient(90deg, rgba(216, 185, 108, 0.1) 1px, transparent 1px) var(--grid-x) var(--grid-y) / 150px 150px,
    linear-gradient(rgba(216, 185, 108, 0.04) 1px, transparent 1px) var(--grid-x) var(--grid-y) / var(--cell) var(--cell),
    linear-gradient(90deg, rgba(216, 185, 108, 0.04) 1px, transparent 1px) var(--grid-x) var(--grid-y) / var(--cell) var(--cell),
    radial-gradient(ellipse 85% 80% at 55% 38%, #2a2620 0%, #1c1a17 55%, #121110 100%);
}/* What stands on the ground */
.choices.lead, .choices:not(.lead) .choice, .money, .flow, .panel, .steps, .note, .done {
  background: var(--surface);
  box-shadow: var(--lift);
}
.panel, .steps { padding: 20px 22px 22px; border: 2px solid var(--line); }
.choices:not(.lead) .choice { border-color: var(--line); }
::selection { background: var(--wash-strong); color: var(--gold-soft); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }
p { color: var(--text-dim); }
[hidden] { display: none !important; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Small type helpers
   -------------------------------------------------------------------------- */
.num    { font-variant-numeric: tabular-nums lining-nums; }
.figure { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.mono   { font-family: var(--font-mono); font-size: 0.78rem; }
.dim    { color: var(--text-dim); }
.faint  { color: var(--text-faint); }
.pos    { color: var(--pos); }
.warn   { color: var(--warn); }
.neg    { color: var(--neg); }
.accent { color: var(--gold); }
.right  { text-align: right; }
.medium { font-weight: 500; }

/* Small tracked capitals: every label, table heading and button */
.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* --------------------------------------------------------------------------
   Shell: the menu down the left, the page beside it
   -------------------------------------------------------------------------- */
.shell { min-height: 100vh; }
.shell[data-authed="true"] { padding-left: var(--side); }
.shell[data-authed="false"] .side { display: none; }

.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  display: flex;
  flex-direction: column;
  padding: 26px 0 20px;
  border-right: 2px solid var(--line);
  /* a darker plane than the page, so the page reads as lit */
  background: linear-gradient(180deg, #151413, #100f0e);
  box-shadow: 14px 0 40px -18px rgba(0, 0, 0, 0.75);
  overflow-y: auto;
  z-index: 20;
}

/* Staff / Manager: which set of pages the menu and the home page show (managers only) */
.modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 16px 20px 6px; border: 2px solid var(--line); }
/* the gold under whichever side is up: one piece that slides across (motion.js sets data-side) */
.modes::before {
  content: '';
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--metal);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.3);
  transition: transform 0.32s var(--ease);
}
.modes[data-side="manager"]::before { transform: translateX(100%); }
.modes.no-slide::before { transition: none; }
.modes .mode { position: relative; }
.mode {
  height: 34px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.mode + .mode { border-left: 2px solid var(--line); }
.mode:hover { color: var(--gold-soft); background: var(--wash); }
.mode[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }

/* The logo itself: the house with the name signed under it. It goes home. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 20px;
  text-align: center;
}
.brand-mark { width: 172px; height: auto; display: block; transition: opacity 0.2s var(--ease); }
.brand:hover .brand-mark { opacity: 0.8; }
/* (the logo's wrapper: what the lit windows are drawn behind) */
.logo { position: relative; display: block; isolation: isolate; }
.brand-logo { display: block; }
/* (the narrow bar's: there is no room for the signature there, so the house and the name set in type) */
.brand-house { display: none; width: 44px; height: 44px; }
.brand-name {
  display: none;
  font-family: var(--font-script);
  font-size: 1.7rem;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--gold);
}
.brand-sub { margin-top: 6px; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-faint); }

/* the Menu button belongs to the narrow layout only */
.side .side-menu { display: none; }

.side-nav { flex: 1; padding: 6px 0 18px; border-top: 1px solid var(--line-soft); }
.side-group { padding: 18px 24px 6px; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-ghost); }

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 24px;
  text-align: left;
  font-size: 0.95rem;
  color: var(--text-dim);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.side-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-dim); }
.side-link:hover { color: var(--text); background: var(--wash); }
.side-link[aria-current="page"] { color: var(--gold); }
.side-link[aria-current="page"] svg { color: var(--gold); }
/* the current page: a short rule drawn in from the menu's edge */
.side-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  border-top: 1px solid var(--gold);
}
.side-link:disabled { color: var(--text-ghost); cursor: default; background: none; }
.side-link:disabled svg { color: var(--text-ghost); }
.side-badge {
  margin-left: auto;
  padding: 0 6px;
  border: 2px solid var(--line);
  font-size: 0.72rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.side-foot { padding: 16px 20px 0; border-top: 1px solid var(--line-soft); }
.account { display: flex; align-items: center; gap: 11px; min-width: 0; margin-bottom: 12px; }
.account-text { display: flex; flex-direction: column; min-width: 0; }
.account-name { font-size: 0.92rem; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-meta { font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .btn { width: 100%; }

/* Initials, in an outlined square */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 2px solid var(--line);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.stage { min-width: 0; }

.page {
  /* the page fills the window beside the menu, however wide (Matt: no empty space down the right) */
  width: 100%;
  width: calc(round(down, 100% - 2 * var(--cell), var(--cell)) + 2 * var(--cell));
  padding: 45px var(--cell) 110px;
  animation: page-in 0.3s var(--ease) backwards;
}
.is-quiet .page { animation: none; }
/* Back, one level up (app.backButton): small, at the page's top right, level with its heading */
.page { position: relative; }
.page-back { position: absolute; top: 52px; right: var(--cell); z-index: 1; gap: 6px; }
.page-back .page-back-icon { width: 14px; height: 14px; transform: scaleX(-1); }
/* (in a page's heading: at the right end of its gold line, just above it, as Matt marked) */
.page-head { position: relative; }
.page-head .page-back { top: auto; right: 0; bottom: 14px; }
.page-head:has(.page-back) p { padding-right: 120px; }
@keyframes page-in { from { opacity: 0; } }

/* Moving between pages (motion.js). The page being left is lifted into a
   ghost, pinned where it was, and fades off: upwards when going on to a page,
   downwards when coming back to a home page. The new page's pieces (its
   heading, then each box) settle into place one after another, from the other
   direction. Only opacity and transform move. */
.page-ghost { position: fixed; z-index: 5; pointer-events: none; animation: page-out 0.24s var(--ease) forwards; }
.page-ghost .page, .page-ghost .page > * { animation: none; }
.page-ghost.out-forward { --out-y: -12px; }
.page-ghost.out-back { --out-y: 12px; }
@keyframes page-out { to { opacity: 0; transform: translateY(var(--out-y, 0)); } }

.page-fresh .page { animation: none; }
.page-fresh .page > * { animation: piece-in 0.55s var(--ease) 0.08s backwards; }
.page-fresh.page-in-back .page > * { --in-y: -16px; }
.page-fresh .page > :nth-child(2) { animation-delay: 0.14s; }
.page-fresh .page > :nth-child(3) { animation-delay: 0.2s; }
.page-fresh .page > :nth-child(4) { animation-delay: 0.26s; }
.page-fresh .page > :nth-child(5) { animation-delay: 0.32s; }
.page-fresh .page > :nth-child(n + 6) { animation-delay: 0.38s; }
@keyframes piece-in { from { opacity: 0; transform: translateY(var(--in-y, 16px)); } }

/* Every page signs its name */
.page-head { margin-bottom: 30px; padding-bottom: 18px; border-bottom: 2px solid var(--line); }
.page-head h1 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 3.3rem;
  line-height: 1.05;
  color: var(--gold);
}
.page-head p { margin-top: 4px; font-size: 0.98rem; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   Home: a greeting and the choices, nothing else. The three things to record
   are drawn large, in one ruled frame split by fine lines; the pages to look
   things up in, and a manager's, are rows under them.
   -------------------------------------------------------------------------- */
.home-head { padding: 14px 0 34px; text-align: center; }
.home-hello { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dim); }
.home-head h1 { margin-top: 6px; font-family: var(--font-script); font-weight: 400; font-size: 3.9rem; line-height: 1.1; color: var(--gold); }
.home-note { margin-top: 8px; color: var(--warn); }

.home-group { margin-bottom: 34px; }
/* Their orders someone has made (To build): the word that the storage is ready, until Got it */
.ready-note { margin: 0 0 34px; padding: 16px 22px 8px; border: 1px solid var(--line); background: var(--bg); }
.ready-title { margin-bottom: 6px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.ready-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ready-title + .ready-line { border-top: 0; }
.ready-line strong { font-weight: 500; color: var(--text); }
/* thirds of the home page fall on the grid too */
.page.home { width: calc(round(down, 100% - 2 * var(--cell), 3 * var(--cell)) + 2 * var(--cell)); }
/* the group's name sits on a rule drawn out to both edges */
.home-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.home-label::before, .home-label::after { content: ''; flex: 1; border-top: 1px solid var(--line-soft); }

.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cell); }
.choices.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1240px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  text-align: left;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.choice:hover, .choice:focus-visible { border-color: var(--gold); background: var(--wash); }
.choice:disabled { cursor: default; border-style: dashed; background: none; border-color: var(--line-soft); }
.choice:disabled .choice-icon, .choice:disabled .choice-name { color: var(--text-ghost); }
.choice:disabled .choice-go { display: none; }
.choice-icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--gold); }
.choice-text { display: flex; flex-direction: column; min-width: 0; }
.choice-name { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; color: var(--text); }
.choice-line { margin-top: 1px; font-size: 0.9rem; color: var(--text-faint); }
.choice-count { padding: 0 7px; border: 2px solid var(--line); font-size: 0.72rem; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--gold); }
.choice-go { width: 22px; height: 22px; flex-shrink: 0; margin-left: auto; color: var(--gold-dim); transition: transform 0.18s var(--ease), color 0.18s var(--ease); }
.choice:hover .choice-go { color: var(--gold); transform: translateX(4px); }

/* The large ones (the three to record, the manager's pages): tall, the drawing
   above the name, the frame ruled in gold. Full rows on a 12-column grid:
   employee-view renderHome gives each its span (--span, --span-mid on a
   smaller window) and marks whether it starts a row or sits under one. */
.choices.lead { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; border: 2px solid var(--line); }
.choices.lead .choice { flex-direction: column; align-items: flex-start; gap: 0; min-height: 232px; padding: 30px 30px 28px; border: 0; }
@media (min-width: 1360px) {
  .choices.lead .choice { grid-column: span var(--span, 4); }
  .choices.lead .choice:not([data-place~="starts"]) { border-left: 1px solid var(--line-soft); }
  .choices.lead .choice[data-place~="below"] { border-top: 1px solid var(--line-soft); }
}
@media (min-width: 901px) and (max-width: 1359px) {
  .choices.lead .choice { grid-column: span var(--span-mid, 4); }
  .choices.lead .choice:not([data-place~="starts-mid"]) { border-left: 1px solid var(--line-soft); }
  .choices.lead .choice[data-place~="below-mid"] { border-top: 1px solid var(--line-soft); }
}
/* Settings, Positions: what each can see, as tags; its dialog's two lists of areas to tick */
.area-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.area-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; margin-top: 18px; }
.area-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.area-group legend { padding: 0; margin-bottom: 8px; }
.area-option { display: flex; align-items: flex-start; gap: 12px; padding: 9px 6px; margin: 0 -6px; cursor: pointer; }
.area-option:hover { background: var(--wash); }
.area-option .tick { margin-top: 3px; flex-shrink: 0; }
.area-name { display: block; color: var(--text); }
.area-line { display: block; margin-top: 2px; font-size: 0.84rem; color: var(--text-faint); }
.portal-option { margin-top: 6px; margin-bottom: 4px; }
/* Settings, Commission: a kind of work's exceptions by position, under its slider (manager-view exceptionsBlock) */
.exceptions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.exceptions-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.exception { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.exception:last-child { border-bottom: 0; }
.exception-positions { flex: 1; min-width: 0; color: var(--text); }
.exception-rate { font-size: 1.05rem; color: var(--gold); }
.exceptions-none { margin: 6px 0 0; font-size: 0.88rem; color: var(--text-faint); }
.exception-entry { align-self: flex-start; }
.exception-entry .field { width: 120px; }
.area-option.is-taken { cursor: default; opacity: 0.55; }
.area-option.is-taken:hover { background: none; }
/* a position with fewer pages (store.AREAS): one choice across, or two */
.choices.one { grid-template-columns: minmax(0, 1fr); }
.choices .choice:hover, .choices .choice:focus-visible { background: var(--wash); }
/* (a row carries its own surface, so its wash goes over that, not in place of it) */
.choices:not(.lead) .choice:hover, .choices:not(.lead) .choice:focus-visible { background: linear-gradient(var(--wash), var(--wash)), var(--surface); }
.choices.lead .choice-icon { width: 58px; height: 58px; margin-bottom: auto; }
.choices.lead .choice-name { margin-top: 26px; font-size: 1.5rem; font-weight: 300; }
.choices.lead .choice-line { margin-top: 4px; font-size: 0.95rem; color: var(--text-dim); }
.choices.lead .choice-go { position: absolute; right: 28px; top: 32px; width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Buttons: an outline and small capitals. One filled button per page.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 2px solid var(--line);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { border-color: var(--gold); background: var(--wash); color: var(--gold-soft); }
.btn:disabled { opacity: 0.35; cursor: default; background: none; border-color: var(--line-soft); }
.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--gold-ink); }

.btn-danger { border-color: rgba(226, 145, 138, 0.5); color: var(--neg); }
.btn-danger:hover { border-color: var(--neg); background: rgba(226, 145, 138, 0.08); color: var(--neg); }

.btn-ghost { border-color: transparent; color: var(--text-faint); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 0.66rem; letter-spacing: 0.14em; }

.linkish {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  text-align: left;
}
.linkish:hover { text-decoration-color: var(--gold); }

.x-btn { width: 34px; height: 34px; font-size: 1.5rem; line-height: 1; color: var(--text-faint); }
.x-btn:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.field-group { display: flex; flex-direction: column; margin-bottom: 20px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }

.field-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.field-label .faint { letter-spacing: 0.06em; text-transform: none; font-size: 0.78rem; font-weight: 400; color: var(--text-ghost); }

.field {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
textarea.field { height: auto; padding: 10px 14px; }
textarea.field.mono { font-size: 0.88rem; line-height: 1.5; }

/* Properties: an address that isn't on the list has three buttons */
.row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.field::placeholder { color: var(--text-ghost); }
.field:hover { border-color: var(--line); }
.field:focus { outline: none; border-color: var(--gold); background: var(--wash); }
.field:disabled { color: var(--text-faint); border-style: dashed; cursor: not-allowed; }
.field.invalid { border-color: var(--neg); }
input[type="number"].field { -moz-appearance: textfield; }
input[type="number"].field::-webkit-inner-spin-button { -webkit-appearance: none; }

.field-hint { margin-top: 6px; font-size: 0.84rem; color: var(--text-faint); }
/* a figure shown where a field would be, that can't be typed into */
.field-static { display: flex; align-items: center; min-height: 46px; color: var(--text-dim); }
.field-hint.error { color: var(--neg); }

/* Material amounts: six small boxes, three to a row */
.material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
.material-grid .field-label { align-items: center; }
.money-label .mat { display: flex; gap: 12px; }
/* (the stock tiles have the room: the picture at the size it was cut, and a little over) */
.money-label .mat-icon { width: 40px; height: 40px; padding: 3px; }

/* A material's picture beside its name (calc.materialLabel). The pictures are
   cut from a screenshot and some are dark (the rubber), so each sits on a
   faintly lit square. */
.mat { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mat-icon { flex-shrink: 0; width: 24px; height: 24px; padding: 1px; background: rgba(240, 225, 190, 0.14); border: 1px solid var(--line-soft); }
.ledger-line:has(.mat) { align-items: center; }
/* a material a manager added with no picture: its first letter on the same square */
.mat-letter { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; line-height: 1; color: var(--gold); }
.money-label .mat-letter { font-size: 1.25rem; }
/* the Add material dialog: the picture as it will look, larger, and its buttons */
.material-picture { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.material-picture .mat-icon { width: 48px; height: 48px; padding: 3px; }
.material-picture .mat-letter { font-size: 1.4rem; }
/* what a storage takes, in its row: one material to a line, two columns of them */
.mats { display: grid; grid-template-columns: repeat(2, max-content); gap: 5px 12px; }
.mats .mat { gap: 6px; white-space: nowrap; }
.mats .mat-icon { width: 22px; height: 22px; }
/* the catalog's tables have many columns: a long heading over a short figure takes two lines */
.catalog-tbl th { white-space: normal; line-height: 1.5; vertical-align: bottom; }

/* Dropdowns (dropdowns.js): the real select stays in the form, hidden */
.dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.dd-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold-dim); transition: transform 0.15s var(--ease); }
.dd-open { border-color: var(--gold); }
.dd-open .dd-chev { transform: rotate(180deg); }

.dd-pop {
  position: fixed;
  z-index: 300;
  display: flex;
  border: 1px solid var(--gold);
  background: var(--bg-raised);
}
.dd-scroll { flex: 1; overflow-y: auto; padding: 4px 0; }
.dd-option { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; color: var(--text-dim); }
.dd-option.active { background: var(--wash-strong); color: var(--text); }
.dd-option[aria-selected="true"] { color: var(--gold); }
.dd-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-meta { font-size: 0.8rem; color: var(--text-faint); }
.dd-tick { width: 15px; height: 15px; flex-shrink: 0; }

.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 11px; width: 17px; height: 17px; color: var(--gold-dim); pointer-events: none; }
.search .field { width: 220px; height: 38px; padding-left: 36px; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Sections: a small-capitals heading on a rule. No box.
   -------------------------------------------------------------------------- */
.panel { margin-bottom: 46px; }
.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}
.panel-head h2 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.panel-head p { margin-top: 5px; max-width: 70ch; font-size: 0.9rem; color: var(--text-faint); }
.panel-count { margin-left: 10px; letter-spacing: 0.04em; color: var(--text-ghost); }
.panel-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.empty { padding: 30px 0; color: var(--text-faint); }
.empty strong { display: block; font-weight: 500; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   Figures: a ruled row, the numerals drawn light
   -------------------------------------------------------------------------- */
.money { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 44px; border: 2px solid var(--line); }
.money-item { padding: 20px 24px 22px; border-left: 1px solid var(--line-soft); min-width: 0; }
.money-item:first-child { border-left: 0; }
/* Payroll's four: two by two where four across would crowd their labels and figures */
@media (min-width: 901px) and (max-width: 1279px) {
  .money.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money.four .money-item:nth-child(3) { border-left: 0; }
  .money.four .money-item:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}
.money-label { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.money-value { display: block; margin-top: 6px; font-size: 2.1rem; font-weight: 300; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.money-item.lead .money-value { color: var(--gold); }
.money-value.warn { color: var(--warn); }
.money-note { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--text-faint); }
.money.stock .money-value { font-size: 1.6rem; }
/* (a manager can add materials: narrower tiles keep seven to a row at 1440px) */
.money.stock { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.money.stock .money-item { padding: 20px 18px 22px; }

/* --------------------------------------------------------------------------
   Tables: open, ruled rows
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tbl th {
  padding: 14px 10px 10px;
  text-align: left;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-soft);
}
.tbl td { padding: 13px 10px; vertical-align: middle; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.tbl th:first-child, .tbl td:first-child { padding-left: 2px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 2px; }
.tbl th.right, .tbl td.right { text-align: right; }
.tbl td.right, .tbl td.who, .tbl td.num { white-space: nowrap; }
.tbl td.key { color: var(--text); font-weight: 500; }
.tbl tbody tr:hover td { background: var(--wash); }
.tbl td.figure { font-size: 1rem; }
.tbl td.figure.accent { color: var(--gold); }
/* a storage's pictures in its row: small, framed, the same size whatever the picture's shape */
.thumbs { display: inline-flex; flex-direction: column; gap: 6px; vertical-align: middle; }
.thumb { display: block; width: 62px; height: 40px; padding: 0; border: 1px solid var(--line); background: var(--bg); overflow: hidden; cursor: zoom-in; transition: border-color 0.15s var(--ease); }
.thumb:hover, .thumb:focus-visible { border-color: var(--gold); }
/* (the name shows in the frame if the picture can't be fetched) */
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; font-size: 0.72rem; line-height: 38px; text-align: center; color: var(--text-faint); }
.cell-sub { margin-top: 1px; font-size: 0.78rem; font-weight: 400; }
.cell-date, .cell-time { display: block; white-space: nowrap; }
.cell-time { font-size: 0.78rem; color: var(--text-faint); }
.row-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.request-position .field { height: 38px; min-width: 190px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; }
.pager-count, .pager-at { font-size: 0.84rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pager-buttons { display: flex; align-items: center; gap: 12px; }

/* A figure typed straight into a table cell (a material's price and stock) */
.cell-entry { display: inline-flex; align-items: center; gap: 8px; }
.cell-entry-lead { color: var(--text-faint); }
.cell-entry .field { width: 112px; height: 38px; text-align: right; }

/* Where something stands: a small square, drawn open until it is done */
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; white-space: nowrap; }
.state::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; flex-shrink: 0; }
.state.paid    { color: var(--pos); }
.state.paid::before { background: currentColor; }
.state.payable { color: var(--gold); }
.state.held    { color: var(--warn); }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
}
.tag.on   { border-color: var(--line); color: var(--gold); }
.tag.mute { border-style: dashed; color: var(--text-ghost); }
.tag.warn { border-color: rgba(226, 162, 116, 0.5); color: var(--warn); }

/* --------------------------------------------------------------------------
   A record form: the fields, and what they come to beside them
   -------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 2px solid var(--line); }
.flow-form { padding: 30px 32px 28px; }
.flow-side { padding: 30px 32px; border-left: 2px solid var(--line); }
.flow-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line-soft); }

.total { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 2px solid var(--line); }
.total-label { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.total-value { display: block; margin-top: 4px; font-size: 2.9rem; font-weight: 300; line-height: 1.1; color: var(--gold); }
.total-note { display: block; margin-top: 6px; font-size: 0.88rem; color: var(--text-faint); }
.total-note.warn { color: var(--warn); }
/* the bank's commission against the portal's pay (Payroll, and the record dialog) */
.tbl td.warn, .field-hint.warn { color: var(--warn); }

.ledger { display: flex; flex-direction: column; }
.ledger + .ledger { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.ledger-line { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 8px 0; font-size: 0.93rem; color: var(--text-dim); }
.ledger-line > span:last-child { color: var(--text); text-align: right; }
.ledger-line.minus > span:last-child { color: var(--neg); }
.ledger-line.sum { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--line); color: var(--text); }
.ledger-line.sum > span:last-child { font-size: 1.3rem; font-weight: 300; color: var(--gold); }

.rate-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 44px; padding-top: 20px; }

/* --------------------------------------------------------------------------
   Framed twice, like a drawing's border: the sign-in card, the confirmation,
   the dialogs
   -------------------------------------------------------------------------- */
.auth-card, .done, .modal-content {
  border: 2px solid var(--line);
  outline: 1px solid var(--line-soft);
  outline-offset: 6px;
}

.done { max-width: 620px; margin: 8px auto 0; padding: 34px 40px 36px; text-align: center; }
.done-mark { display: block; width: 128px; height: auto; margin: 0 auto 2px; }
.done h1 { font-family: var(--font-script); font-weight: 400; font-size: 3rem; line-height: 1.1; color: var(--gold); }
.done > p { margin-top: 2px; }
.done-lines { margin: 24px 0 4px; text-align: left; border-top: 2px solid var(--line); }
.done-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.done-line > span:last-child { color: var(--text); font-weight: 500; text-align: right; }
.done-line.lead > span:last-child { font-size: 1.5rem; font-weight: 300; color: var(--gold); }
.done-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
/* the pay summary: a line's detail under it, the people paid set in under Total paid */
.done-line small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--text-faint); }
.done-line.sub { padding-left: 26px; font-size: 0.92rem; }
.done-line.sub > span:last-child { color: var(--text-dim); }
.pay-done .done-line > span:last-child { flex-shrink: 0; white-space: nowrap; }
.period-line.complete > span:last-child { color: var(--pos); }

/* --------------------------------------------------------------------------
   Payroll
   -------------------------------------------------------------------------- */
.last-pay { margin: -12px 0 26px; font-size: 0.92rem; color: var(--text-faint); }
.last-pay strong { font-weight: 500; color: var(--text); }

.steps { display: flex; flex-direction: column; gap: 40px; }
/* Finish, the width of the steps above it */
.pay-finish { margin-top: 30px; }
.pay-finish .btn { width: 100%; height: 60px; font-size: 0.84rem; letter-spacing: 0.2em; }
/* (greyed out until something is done, but still plainly there: Matt found the faded one "invisible") */
.pay-finish .btn:disabled {
  opacity: 1;
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-faint);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
.pay-finish-hint { margin-top: 10px; text-align: center; font-size: 0.88rem; color: var(--text-faint); }
.step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
.step-n {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  font-family: var(--font-script);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold);
}
.step[data-state="done"] .step-n { border-color: var(--pos); color: var(--pos); font-family: var(--font-ui); font-size: 1.1rem; }
.step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--line); }
.step-title { font-size: 1.25rem; font-weight: 400; color: var(--text); }
.step-note { margin-top: 2px; max-width: 72ch; font-size: 0.92rem; color: var(--text-faint); }
.step-body:empty { display: none; }
.step-line { margin-top: 16px; font-size: 0.93rem; color: var(--text-dim); }
.step-line strong { font-weight: 500; color: var(--text); }
.step-sub { margin: 26px 0 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warn); }
.step-sub + p { margin-top: 4px; font-size: 0.9rem; color: var(--text-faint); }
.flag-acts { display: inline-flex; gap: 8px; }
/* My work: Copy memo beside Update, one over the other where the table runs short of room */
.work-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Uploading the bank's export (bank.js): a dashed frame to drop the file on,
   the link box under it, then what the upload did */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  border: 1px dashed var(--line);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.drop:hover, .drop.over { border-color: var(--gold); border-style: solid; background: var(--wash); }
.drop svg { width: 40px; height: 40px; margin-bottom: 6px; color: var(--gold); }
.drop strong { font-size: 1.1rem; font-weight: 400; color: var(--text); }
.drop span { font-size: 0.9rem; color: var(--text-faint); }
.drop u { color: var(--gold); text-underline-offset: 3px; }
.drop.busy { cursor: default; }
/* a storage's picture in its dialog (SafeHavenApp.showItemPicture): the same frame, smaller, showing the picture once there is one */
.pic-drop { justify-content: center; height: 150px; padding: 12px; }
.pic-drop svg { width: 28px; height: 28px; margin-bottom: 2px; }
.pic-drop strong { font-size: 0.95rem; }
.pic-drop span { font-size: 0.82rem; }
.pic-drop img { min-height: 0; max-width: 100%; max-height: 100%; flex: 1; object-fit: contain; }
.pic-clear { margin-top: 8px; }
.pic-row { margin-top: 22px; }
.or-rule { display: flex; align-items: center; gap: 16px; margin: 22px 0 14px; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.or-rule::before, .or-rule::after { content: ''; flex: 1; border-top: 1px solid var(--line-soft); }
.link-row { display: flex; gap: 10px; }
.link-row .field { flex: 1; min-width: 0; }
.link-row .btn { height: 46px; }
.bank-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-soft); }
.bank-file svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); }
.bank-file > span { display: flex; flex-direction: column; min-width: 0; }
.bank-file strong { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-file > span > span { font-size: 0.86rem; color: var(--text-faint); }
.bank-verdict { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 4px; }
.bank-verdict b { font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bank-verdict.ok b { color: var(--gold); }
.bank-verdict span { font-size: 1.05rem; color: var(--text); }
.bank-section { margin: 28px 0 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.bank-section span { margin-left: 6px; color: var(--text-faint); }

/* The Bank records window (bank-records.js): one table under headings that
   stay put, by day (newest first) unless a column sorts it */
.bank-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bank-bar .search { flex: 1; min-width: 240px; }
.bank-bar .search .field { width: 100%; height: 40px; }
.step-acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* a row of choices where one is on (the Staff / Manager switch has its own sliding gold) */
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg-btn { height: 40px; padding: 0 14px; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--text-faint); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn:hover { color: var(--gold-soft); background: var(--wash); }
.seg-btn[aria-pressed="true"] { background: var(--metal); color: var(--gold-ink); }
.seg-n { margin-left: 4px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.bank-count { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 0.88rem; color: var(--text-faint); }
.bank-in { color: var(--pos); }
.bank-out { color: var(--neg); }
/* the frame keeps the edge; the rows scroll inside it, under the headings */
.bank-frame { overflow: hidden; border: 1px solid var(--line-soft); }
.bank-scroll { position: relative; z-index: 0; max-height: max(340px, calc(100vh - 330px)); padding: 0 14px; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.tbl.bank-tbl { table-layout: fixed; min-width: 900px; }
.tbl.bank-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); }   /* opaque: rows pass under it */
.bank-tbl th:nth-child(1) { width: 92px; }
.bank-tbl th:nth-child(2) { width: 140px; }
.bank-tbl th:nth-child(4) { width: 150px; }
.bank-tbl th:nth-child(5) { width: 120px; }
.bank-tbl th:nth-child(6) { width: 84px; }
.bank-tbl th:nth-child(7) { width: 200px; }
/* (bank-rec-, not bank-comment: that is the boxed comment on the job and order forms) */
.bank-tbl .bank-rec-comment { overflow-wrap: anywhere; font-weight: 400; }
.bank-tbl .nowrap { white-space: nowrap; }
.tbl.bank-tbl tbody td.bank-in { color: var(--pos); }
.tbl.bank-tbl tbody td.bank-out { color: var(--neg); }
.bank-tbl tr.bank-day td { padding-top: 22px; padding-bottom: 8px; border-bottom-color: var(--line); }
.bank-tbl tr.bank-day:hover td { background: none; }
.bank-tbl tr.bank-none td { padding: 44px 30px; text-align: center; color: var(--text-faint); }
.bank-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bank-day-head h4 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.bank-day-sum { font-size: 0.85rem; color: var(--text-faint); }
.bank-more { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
/* a column's heading opens its filter */
.bank-col-btn { display: inline-flex; align-items: center; gap: 6px; margin: -6px -8px; padding: 6px 8px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.bank-col-btn:hover, .bank-col-btn[aria-expanded="true"] { background: var(--wash); color: var(--text); }
.bank-col-btn.is-on { color: var(--gold); }
.bank-col-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.bank-pop { position: fixed; z-index: 300; width: 300px; max-width: calc(100vw - 24px); padding: 14px; border: 1px solid var(--line); background: var(--bg); box-shadow: var(--lift); }
.bank-pop-sorts { display: flex; gap: 8px; margin-bottom: 14px; }
.bank-pop-sort { flex: 1; height: 34px; border: 1px solid var(--line-soft); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.bank-pop-sort:hover { border-color: var(--line); color: var(--text); }
.bank-pop-sort[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--wash); }
.bank-pop .field { height: 40px; }
.bank-pop-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bank-pop-tools { display: flex; gap: 16px; margin: 10px 0 6px; font-size: 0.86rem; }
.bank-pop-list { max-height: 264px; margin: 0 -6px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.bank-pop-option { display: flex; align-items: center; gap: 10px; padding: 6px; font-size: 0.92rem; color: var(--text-dim); cursor: pointer; }
.bank-pop-option:hover { background: var(--wash); color: var(--text); }
.bank-pop-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-pop-n { font-size: 0.8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.bank-pop-none { margin: 10px 6px; font-size: 0.88rem; color: var(--text-faint); }
/* (the same window serves every table's column filter: column-filters.js) */
/* a heading with a filter has its arrow too: a two-word heading may take two lines rather than widen the table */
.tbl th:has(> .col-btn) { white-space: normal; line-height: 1.5; vertical-align: bottom; }
.col-btn { align-items: flex-end; text-align: left; }
.col-btn svg { margin-bottom: 4px; }
.tbl th.right .col-btn { text-align: right; }
.col-bar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 0.88rem; color: var(--text-faint); }
.bank-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 0.86rem; }
/* a tick box drawn like everything else here: a square, gold when on */
.tick { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.tick:checked { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231a1814' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; }

.step-clear { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--pos); }
.step-clear::before { content: ''; width: 7px; height: 7px; background: currentColor; }

.payee { border-bottom: 1px solid var(--line-soft); }
.payee-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 2px; text-align: left; }
.payee-head:hover { background: var(--wash); }
.payee-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.payee-name { font-size: 1.02rem; font-weight: 500; color: var(--text); }
.payee-id { font-size: 0.8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.payee-warn, .payee-warn-note { color: var(--warn); }
.payee-warn-note { font-size: 0.88rem; }
.payee-count { font-size: 0.86rem; color: var(--text-faint); white-space: nowrap; }
.payee-owed { min-width: 104px; text-align: right; font-size: 1.3rem; font-weight: 300; color: var(--gold); }
.payee.is-paid .payee-owed { color: var(--text-faint); text-decoration: line-through; }
.payee-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.payee-toggle svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.payee .when-open, .payee.open .when-closed { display: none; }
.payee.open .when-open { display: inline; }
.payee.open .payee-toggle svg { transform: rotate(180deg); }
.payee-drop { display: none; }
.payee.open .payee-drop { display: block; }
.payee-body { margin: 0 0 16px 50px; padding: 4px 0 4px 18px; border-left: 2px solid var(--line); }
.payee-to { padding: 8px 0 12px; }

.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 11px;
  border: 1px dashed var(--line);
  white-space: nowrap;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.copy-chip:hover { border-style: solid; border-color: var(--gold); background: var(--wash); }
.copy-chip-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.copy-chip-value { font-weight: 500; font-variant-numeric: tabular-nums; }
.copy-chip svg { width: 15px; height: 15px; color: var(--gold-dim); }
.copy-chip .copy-ok, .copy-chip.copied .copy-icon { display: none; }
.copy-chip.copied .copy-ok { display: inline; color: var(--pos); }
/* the bank comment for a job or an order: boxed with Copy on the form's side (app.commentBox), small under a name in a table row (app.refLine) */
.bank-comment {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding: 12px 14px;
  border: 1px solid var(--line);
}
.bank-comment-label { width: 100%; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.bank-comment-text { flex: 1 1 auto; font-weight: 500; overflow-wrap: anywhere; }
.bank-comment-wait { margin-top: 22px; }
.note-chip.mini { height: 24px; gap: 6px; padding: 0 7px; margin-top: 3px; font-size: 0.82rem; font-weight: 400; color: var(--text-faint); }
.note-chip.mini .copy-chip-value { font-weight: 400; }
.note-chip.mini svg { width: 12px; height: 12px; }

.pay-line {
  display: grid;
  /* (the amount in a slot of its own width, so State ID and Copy memo line up from line to line) */
  grid-template-columns: 118px minmax(150px, 1.1fr) minmax(0, 1.4fr) 180px auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.pay-line .tag { justify-self: start; }
.pay-line > .copy-chip { justify-self: end; }
.pay-line-what { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pay-line-open { color: var(--text); }
.pay-line-date { font-size: 0.8rem; color: var(--text-faint); }
.pay-line-memo { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; color: var(--text-faint); overflow-wrap: anywhere; }
.pay-line-act { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.pay-line.is-paid > :not(.pay-line-act) { opacity: 0.45; }
.pay-line.is-paid .copy-chip-value { text-decoration: line-through; }
/* a line's "⋯" (Split payment / Undo split); lines without one keep its room */
.pay-menu { display: inline-flex; align-items: center; gap: 8px; }
.pay-menu .btn[hidden] { display: none; }
.pay-menu.is-empty { width: 32px; }
.pay-more { width: 32px; padding: 0; }
.pay-more svg { width: 16px; height: 16px; }
.pay-more[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
/* the split dialog */
.split-what { margin-bottom: 18px; color: var(--text-dim); }
.split-what strong { color: var(--text); font-weight: 500; }
.split-memos { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); }
.split-memos-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.split-memo { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Notes
   -------------------------------------------------------------------------- */
.note { padding: 14px 18px; border: 1px solid var(--line-soft); color: var(--text-dim); font-size: 0.93rem; }
.note strong { display: block; margin-bottom: 2px; font-weight: 500; color: var(--text); }
.note.attn { border-color: rgba(226, 162, 116, 0.5); }
.note.attn strong { color: var(--warn); }
.note-with-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* --------------------------------------------------------------------------
   Settings: the rates
   -------------------------------------------------------------------------- */
.rate { padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
/* a rate per kind of work, then the tax on materials: two abreast where there is room, never three
   (Matt: four rates, two rows of two; one column once two won't fit at 380px) */
.rate-list.by-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(min(380px, 100%), calc((100% - 56px) / 2)), 1fr)); gap: 0 56px; }
.rate-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.rate-name { font-size: 1.15rem; color: var(--text); }
.rate-entry { display: inline-flex; align-items: center; gap: 10px; }
.rate-entry-lead { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.rate-entry-box { position: relative; display: inline-block; }
.rate-entry-box .field { width: 104px; padding-right: 32px; text-align: right; font-size: 1.3rem; font-weight: 300; color: var(--gold); }
.rate-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.rate-ends { display: flex; justify-content: space-between; gap: 18px; margin-top: 8px; font-size: 0.88rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rate-help { margin-top: 10px; max-width: 72ch; font-size: 0.88rem; color: var(--text-faint); }
.rate-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* The slider: a solid bar, gold up to its value, with a solid gold block to
   drag. Chunky on purpose (Matt: a thin line with a small square "blend[ed]
   into the surrounding lines"). */
.slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 34px; background: transparent; cursor: pointer; }
.slider::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(90deg, var(--gold) 0 var(--fill, 0%), rgba(240, 225, 190, 0.1) var(--fill, 0%));
  box-shadow: inset 0 0 0 1px var(--line);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 26px;
  margin-top: -8px;
  border: 2px solid var(--bg);
  background: var(--metal);
  box-shadow: 0 0 0 1px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.6);
}
.slider:hover::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { filter: brightness(1.12); }
.slider::-moz-range-track { height: 10px; background: rgba(240, 225, 190, 0.1); box-shadow: inset 0 0 0 1px var(--line); }
.slider::-moz-range-progress { height: 10px; background: var(--gold); }
.slider::-moz-range-thumb { width: 12px; height: 22px; border: 2px solid var(--bg); border-radius: 0; background: var(--metal); box-shadow: 0 0 0 1px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.6); }

/* --------------------------------------------------------------------------
   Dialogs
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  padding: 30px 18px;
  overflow-y: auto;
  background: rgba(8, 8, 7, 0.78);
}
.modal-overlay.active { display: flex; }
.modal-overlay.active { animation: page-in 0.2s var(--ease) backwards; }
.modal-content { width: 100%; margin: auto; background: var(--bg); animation: modal-in 0.3s var(--ease) backwards; }
/* a dialog comes up a little as it appears */
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px 12px; border-bottom: 2px solid var(--line); }
.modal-title { font-family: var(--font-script); font-weight: 400; font-size: 2.1rem; line-height: 1.1; color: var(--gold); }
.modal-body { padding: 24px 26px 8px; }
.modal-text { margin-bottom: 18px; color: var(--text-dim); }
.modal-foot { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding: 16px 26px 22px; }
.foot-left { margin-right: auto; }
/* a storage's picture, larger: the whole picture, never taller than the window */
.picture-box { width: auto; max-width: min(1100px, 100%); }
.picture-side { margin-left: 10px; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dim); -webkit-text-fill-color: currentColor; }
.picture-img { display: block; max-width: 100%; max-height: calc(100vh - 170px); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Sign-in: the logo, in a ruled frame
   -------------------------------------------------------------------------- */
/* (one column the width of the window: sized to the card instead, a phone cut its right side off) */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 30px 18px; }
/* The card is 15 cells by 19 and the grid starts at its corner, so its frame
   lies along the ground's lines. It is the one raised thing on the page: its
   own surface, lit along the top edge, a long soft shadow under it. */
.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 450px;
  max-width: 100%;
  min-height: 570px;
  padding: 30px 45px;
  text-align: center;
  outline: 0;
  background: linear-gradient(180deg, #23201c, #161513);
  box-shadow: 0 46px 90px -28px rgba(0, 0, 0, 0.9), 0 18px 36px -18px rgba(0, 0, 0, 0.7);
}
.auth-logos { display: flex; justify-content: center; }
.auth-logo { width: 290px; max-width: 100%; height: auto; display: block; }
.auth-sub { margin-top: 12px; font-size: 0.66rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--text-faint); }
.auth-lede { margin: 22px 0 18px; color: var(--text-dim); }
.auth-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
#google-signin-button { display: flex; justify-content: center; min-height: 44px; }
/* (Google draws its button in a light frame: under the page's dark colour scheme the browser paints a white box behind it. Found live on the Takahashi portal.) */
#google-signin-button { color-scheme: light; }
.auth-foot { margin-top: 22px; font-size: 0.8rem; }
.auth-foot a { color: var(--text-faint); }
.auth-foot a:hover { color: var(--gold); }
/* The privacy page (privacy.html, which Google's sign-in setup links to): the sign-in card, read top to bottom */
.privacy-card { width: 640px; text-align: left; }
.privacy-card .auth-logos, .privacy-card .auth-sub { text-align: center; }
.privacy-card h1 { margin-top: 26px; font-family: var(--font-script); font-weight: 400; font-size: 3rem; color: var(--gold); text-align: center; }
.privacy-card h2 { margin: 26px 0 8px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dim); }
.privacy-card p, .privacy-card li { color: var(--text-dim); line-height: 1.6; }
.privacy-card p + p { margin-top: 10px; }
.privacy-card ul { margin: 0; padding-left: 20px; }
.privacy-card li + li { margin-top: 6px; }
.privacy-card a { color: var(--gold); }
.privacy-foot { margin-top: 30px; font-size: 0.85rem; text-align: center; }
/* A reload while signed in on the live site: nothing to sign in to while the session is checked (app.js startRemote) */
html[data-resuming] #view-login { visibility: hidden; }

/* The stand-in for Google's button while there is no Client ID */
.gsi-placeholder { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 320px; height: 44px; border: 2px solid var(--line); color: var(--text); font-size: 0.95rem; }
.gsi-placeholder:hover { border-color: var(--gold); background: var(--wash); }
.gsi-placeholder svg { width: 18px; height: 18px; }
.signin-notice { margin-top: 14px; font-size: 0.9rem; color: var(--text-dim); }
.signin-notice strong { display: block; font-weight: 500; color: var(--text); }
.signin-notice.error strong { color: var(--neg); }
.signin-notice code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold); }

/* --------------------------------------------------------------------------
   Demo tab and toasts
   -------------------------------------------------------------------------- */
/* Top right, clear of the menu, the tables and the toasts */
.demo-dock { position: fixed; right: 14px; top: 12px; z-index: 60; }
.demo-tab { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px dashed var(--line); background: var(--bg); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.demo-tab:hover { border-style: solid; color: var(--gold); }
.demo-dot { width: 5px; height: 5px; background: var(--gold); }
.demo-pop { position: absolute; right: 0; top: 34px; width: 250px; padding: 6px 0 8px; border: 1px solid var(--gold); background: var(--bg-raised); }
.demo-pop-head { padding: 10px 14px 4px; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-ghost); }
.demo-pick { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 14px; text-align: left; color: var(--text-dim); }
.demo-pick:hover { background: var(--wash-strong); color: var(--text); }
.demo-pick span { font-size: 0.76rem; color: var(--text-faint); }

.toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
  max-width: 380px;
  padding: 11px 16px 11px 14px;
  border: 2px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--bg-raised);
  font-size: 0.93rem;
  color: var(--text);
  overflow: hidden;
  animation: toast-in 0.25s var(--ease) backwards;
  transition: opacity 0.2s var(--ease), height 0.25s var(--ease), padding 0.25s var(--ease), margin 0.25s var(--ease);
}
.toast.success { border-left-color: var(--pos); }
.toast.error   { border-left-color: var(--neg); }
.toast.warning { border-left-color: var(--warn); }
.toast.leaving { opacity: 0; }
.toast.closing { height: 0 !important; padding-top: 0; padding-bottom: 0; margin-top: -10px; border-width: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   Gilding: the script, the frames and the filled buttons are metal
   -------------------------------------------------------------------------- */
.page-head h1, .home-head h1, .done h1, .modal-title, .brand-name {
  width: fit-content;
  /* room for the script's swashes, which the gilding would otherwise be cut off at */
  padding: 0.1em 0.3em 0.14em;
  margin-left: -0.3em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.home-head h1, .done h1 { margin-left: auto; margin-right: auto; }
.choices.lead, .money, .flow, .panel, .steps, .auth-card, .done, .modal-content, .modes { border-image: var(--metal-edge); }
.btn-primary, .btn-primary:hover, .mode[aria-pressed="true"] {
  background: var(--metal);
  border-color: #c9a85e;
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.3);
}
.btn-primary:hover { filter: brightness(1.06); }
/* (the switch's gold is its sliding piece, not the pressed button's own ground) */
.modes[data-side] .mode[aria-pressed="true"] { background: none; box-shadow: none; }
/* --------------------------------------------------------------------------
   Finishing touches (ambience.js): gold dust and lights in the house's
   windows. Each is a class on <html>.
   -------------------------------------------------------------------------- */
/* None of these costs anything per frame: they are transform and opacity
   animations, which the browser's compositor runs on its own (Matt: "super
   light weight"). */

/* dust: fine gold dust settling through the light. Three layers of a tiled
   picture of specks (drawn once by ambience.js), each sliding down and a
   little sideways by exactly one tile, so it loops without a seam. */
.fx-dust-host { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-dust-layer {
  position: absolute;
  /* one tile bigger than the window on every side it slides towards */
  inset: calc(-1 * var(--tile)) 0 0 calc(-1 * var(--tile));
  background-size: var(--tile) var(--tile);
  will-change: transform;
  animation: dust-fall linear infinite;
}
.fx-dust-1 { animation-duration: 70s; opacity: 0.9; }
.fx-dust-2 { animation-duration: 110s; opacity: 0.7; }
.fx-dust-3 { animation-duration: 170s; opacity: 0.5; }
@keyframes dust-fall { to { transform: translate3d(var(--tile), var(--tile), 0); } }
/* (the far layers drift the other way a little, so the three never move as one sheet) */
.fx-dust-2 { animation-name: dust-fall-left; inset: calc(-1 * var(--tile)) calc(-1 * var(--tile)) 0 0; }
@keyframes dust-fall-left { to { transform: translate3d(calc(-0.5 * var(--tile)), var(--tile), 0); } }

/* windows: someone is home. Each window's glass is its own picture, traced
   from the logo, laid behind the drawing so the frames stay crisp over it.
   Each goes on and off in its own time (the lengths share no common beat, so
   the house never repeats itself noticeably); a light takes a moment to come
   up and to go out. Only opacity changes. */
.logo-light { display: none; }
.fx-windows .logo-light {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 196, 110, 0.55));
  animation: light-long 23s linear infinite;
}
.fx-windows .logo-light-1 { background-image: url('../img/logo-light-1.png'); animation: light-short 31s linear -9s infinite; }
.fx-windows .logo-light-2 { background-image: url('../img/logo-light-2.png'); animation: light-long 37s linear -20s infinite; }
.fx-windows .logo-light-3 { background-image: url('../img/logo-light-3.png'); animation: light-twice 29s linear -4s infinite; }
.fx-windows .logo-light-4 { background-image: url('../img/logo-light-4.png'); animation: light-big 43s linear -2s infinite; }
.fx-windows .logo-light-5 { background-image: url('../img/logo-light-5.png'); animation: light-twice 41s linear -27s infinite; }
.fx-windows .logo-light-6 { background-image: url('../img/logo-light-6.png'); animation: light-short 19s linear -12s infinite; }
/* on for most of its time */
@keyframes light-long {
  0%, 4% { opacity: 0; }
  6%, 62% { opacity: 0.72; }
  64%, 100% { opacity: 0; }
}
/* the big window: it is most of the house's glass, so it is on least (Matt: one long spell lit was too much).
   Two short spells of about five seconds, far apart, and dark the rest of the time. */
@keyframes light-big {
  0%, 10% { opacity: 0; }
  12%, 24% { opacity: 0.72; }
  26%, 61% { opacity: 0; }
  63%, 73% { opacity: 0.72; }
  75%, 100% { opacity: 0; }
}
/* on for a short while */
@keyframes light-short {
  0%, 40% { opacity: 0; }
  43%, 70% { opacity: 0.72; }
  73%, 100% { opacity: 0; }
}
/* on, off, and on again */
@keyframes light-twice {
  0%, 8% { opacity: 0; }
  10%, 34% { opacity: 0.72; }
  36%, 58% { opacity: 0; }
  60%, 86% { opacity: 0.72; }
  88%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-windows .logo-light { animation: none !important; opacity: 0.68; }
}
/* the same for someone who has switched the animations off here (ambience.js) */
.fx-still.fx-windows .logo-light { animation: none !important; opacity: 0.68; }

/* The animations switch: a small unlabelled mark beside the account, and under
   the sign-in card (Matt: "more of a hidden button, similar to the takahashi
   portal"). Dim gold while on; grey and struck through when off. */
.animations-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  color: var(--gold-dim);
  opacity: 0.7;
  transition: color 0.15s var(--ease), opacity 0.15s var(--ease), background 0.15s var(--ease);
}
.animations-toggle svg { width: 18px; height: 18px; }
.animations-toggle:hover, .animations-toggle:focus-visible { opacity: 1; color: var(--gold); background: var(--wash); }
.animations-slash { display: none; }
.animations-toggle[aria-pressed="false"] { color: var(--text-ghost); }
.animations-toggle[aria-pressed="false"]:hover { color: var(--text-dim); }
.animations-toggle[aria-pressed="false"] .animations-slash { display: inline; }
.auth { position: relative; }
.auth-animations { position: absolute; left: 50%; bottom: 14px; margin: 0; transform: translateX(-50%); }
/* Icons (icons.js): drawn in the current colour; the large ones in a finer line */
.icon-thin * { stroke-width: 1; }

/* Small controls keep a fine line; the 2px rule is for frames and dividers */
.btn, .avatar, .side-badge, .choice-count, .demo-tab, .demo-pop, .gsi-placeholder { border-width: 1px; }
.auth-card, .done, .modal-content { outline-color: transparent; }

/* --------------------------------------------------------------------------
   Narrow windows: the menu folds up under a bar across the top
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* (above the heading, at the right: a narrow heading would run under it) */
  .page-back, .page-head .page-back { position: static; display: flex; width: max-content; margin: 0 0 14px auto; }
  .page-head:has(.page-back) p { padding-right: 0; }
  .shell[data-authed="true"] { padding-left: 0; }
  .side { position: sticky; top: 0; inset: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 16px; border-right: 0; border-bottom: 2px solid var(--line); overflow: visible; }
  .brand { flex-direction: row; gap: 10px; padding: 0; }
  .brand-mark, .brand-sub, .brand-logo { display: none; }
  .brand-house, .brand-name { display: block; }
  .side .side-menu { display: inline-flex; margin-left: auto; }
  .side-nav, .side-foot { display: none; flex-basis: 100%; }
  .side.open .side-nav, .side.open .side-foot { display: block; }
  .side.open .side-nav { margin-top: 8px; }
  .side-foot { padding: 14px 4px 8px; }
  .side-link, .side-group { padding-left: 8px; padding-right: 8px; }
  .side-link[aria-current="page"]::before { display: none; }
  /* the bar's Menu button has the top right corner here */
  .demo-dock { top: auto; right: auto; left: 14px; bottom: 14px; }
  .demo-pop { top: auto; right: auto; left: 0; bottom: 34px; }

  body:has(.shell[data-authed="true"]) { --grid-x: 0px; }
  .page, .page.home { width: 100%; padding: 28px 15px 90px; }
  .page-head h1 { font-size: 2.7rem; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-form, .flow-side { padding: 22px 18px; }
  .flow-side { border-left: 0; border-top: 2px solid var(--line); }
  .money { grid-template-columns: minmax(0, 1fr); }
  .money-item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .money-item:first-child { border-top: 0; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .payee-body { margin-left: 0; }
  /* the name across the top, what they are owed on a line under it */
  .payee-head { flex-wrap: wrap; row-gap: 6px; }
  .payee-who { flex: 1 1 calc(100% - 64px); }
  .payee-count { margin-left: 50px; }
  .payee-owed { min-width: 0; margin-left: auto; }
  .pay-line { grid-template-columns: minmax(0, 1fr); }
  .pay-line-act { justify-content: flex-start; flex-wrap: wrap; }
  .pay-line > .copy-chip { justify-self: start; }
  .auth-card { min-height: 0; padding: 28px 20px 30px; }
  .auth-logo { width: 230px; }
  .done { padding: 26px 20px 28px; }
  .home-head { padding: 6px 0 26px; }
  .home-head h1 { font-size: 2.9rem; }
  .choices, .choices.lead, .choices.pair { grid-template-columns: minmax(0, 1fr); }
  .choices.lead .choice { flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 18px 18px; border-left: 0; border-top: 1px solid var(--line-soft); }
  .choices.lead .choice:first-child { border-top: 0; }
  .side { background: #131211; box-shadow: none; }
  .modes { margin: 12px 8px 4px; }
  .choices.lead .choice-icon { width: 34px; height: 34px; margin-bottom: 0; }
  .choices.lead .choice-name { margin-top: 0; font-size: 1.1rem; }
  .choices.lead .choice-go { position: static; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .side, .demo-dock, .toast-container { display: none !important; }
  .shell[data-authed="true"] { padding-left: 0; }
}

/* My work's Record payment: the job's total, what the decorator has written down and what is left */
.client-pay-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--line-soft); }
.client-pay-sum div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.client-pay-sum div + div { border-left: 1px solid var(--line-soft); }
.client-pay-sum span { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.client-pay-sum strong { font-weight: 400; font-size: 1.2rem; color: var(--text); }
.client-pay-sum strong.accent { color: var(--gold); }
.client-pay-list { margin: 0 0 18px; padding: 0; list-style: none; }
.client-pay-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line-soft); color: var(--text-dim); }
.client-pay-list strong { font-weight: 500; color: var(--text); }
.client-pay-entry { display: flex; gap: 10px; }
.client-pay-entry .field { flex: 1; min-width: 0; }