/* Utility bills · Cidex. One stylesheet: tokens first, then base, shell, components, screens.
   Class names follow the existing Django templates where one already exists (lede, panel, note,
   callout, tiles/tile, month-card, readers, actions, quiet…). New ones are marked NEW. */

:root {
  /* Brand */
  --navy: #001338;
  --navy-glass: rgba(0, 19, 56, .74);
  --blue: #003192;
  --blue-hi: #2858d2;
  --blue-press: #002372;
  --ink: #0b1a33;
  --text: #1d1d1f;
  --text-2: #3a4a5a;
  --muted: #5d6e7c;
  --faint: #86868b;

  /* Status */
  --amber: #8a5a00;   --amber-ink: #6e4800;  --amber-bg: rgba(253, 246, 230, .72);  --amber-line: rgba(232, 199, 122, .85);  --amber-dot: #b07a10;
  --green: #1b6a4f;   --green-bg: rgba(233, 243, 238, .8);    --green-line: rgba(27, 106, 79, .25);
  --red: #9b2c22;     --red-ink: #7a1f17;    --red-bg: rgba(252, 236, 234, .72);    --red-line: rgba(155, 44, 34, .25);
  --info-bg: rgba(232, 237, 247, .85);       --info-line: rgba(0, 49, 146, .2);

  /* Glass */
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .78);
  --glass-blur: blur(24px) saturate(180%);
  --glass-shadow: inset 0 1px 0 #fff, 0 8px 32px rgba(0, 19, 56, .08);
  --hairline: rgba(0, 19, 56, .08);
  --backdrop:
    radial-gradient(900px 600px at 12% -5%, rgba(0, 49, 146, .26), transparent 70%),
    radial-gradient(800px 600px at 100% 75%, rgba(70, 130, 255, .2), transparent 70%),
    radial-gradient(600px 400px at 60% 0%, rgba(176, 122, 16, .09), transparent 70%),
    #eef1f7;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --h1: clamp(28px, 3.2vw, 40px);
  --h2: 22px;

  /* Shape and space */
  --r-sm: 10px;  --r: 14px;  --r-lg: 22px;  --r-xl: 26px;  --pill: 999px;
  --gap: 16px;
  --sidebar: 232px;
  --page-max: 1080px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { background: var(--backdrop); background-attachment: fixed; min-height: 100%; }
body { margin: 0; font: 15px/1.45 var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-press); }
h1 { margin: 0; font-size: var(--h1); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; color: var(--ink); }
h2 { margin: 0; font-size: var(--h2); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
p { margin: 0; }
code, .data { font-family: var(--mono); font-variant-numeric: tabular-nums; }
ul { margin: 0; padding-left: 20px; }
[hidden] { display: none !important; }

/* ---------- Shell (NEW) ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: 14px; padding: 14px; min-height: 100vh; }
.sidebar {
  position: sticky; top: 14px; height: calc(100vh - 28px);
  display: flex; flex-direction: column; gap: 30px; padding: 24px 12px 12px;
  border-radius: 24px; background: var(--navy-glass); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 40px rgba(0, 19, 56, .25);
}
.sidebar .logo { width: 96px; height: auto; margin-left: 12px; display: block; }
.sidebar > a:first-child { display: block; line-height: 0; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; color: rgba(255, 255, 255, .72); }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-item.is-current { color: #fff; font-weight: 500; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .12); }
.nav-item svg { flex: none; }
/* Names the half of the tool the links under it belong to, so the two Find a bill links read apart. */
.nav-heading { margin: 14px 0 2px; padding: 0 12px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--amber-dot); color: #fff; border-radius: var(--pill); padding: 1px 7px; }
.nav-sub { display: flex; flex-direction: column; padding: 2px 0 6px 38px; font-size: 13px; }
.nav-sub a { color: rgba(255, 255, 255, .55); padding: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sub a:hover, .nav-sub a.is-current { color: #fff; }
.user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #2a5fd8, var(--blue)); border: 1px solid rgba(255, 255, 255, .3); }
.user .who { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.user .who span { color: #fff; }
.user form button { all: unset; cursor: pointer; color: rgba(255, 255, 255, .55); }
.user form button:hover { color: #fff; }

main { min-width: 0; }
.page { max-width: var(--page-max); padding: 28px 32px 120px; display: flex; flex-direction: column; gap: 22px; }

/* Rail: the sidebar folds to icons where the content needs the width (bill check, search) */
.shell.rail { grid-template-columns: 68px minmax(0, 1fr); }
.rail .sidebar { padding: 18px 10px 10px; align-items: center; gap: 22px; }
.rail .sidebar .logo { width: 48px; height: auto; margin: 0; }
.rail .nav-item { justify-content: center; padding: 10px; position: relative; }
.rail .nav-item .label, .rail .nav-sub, .rail .nav-heading, .rail .user .who { display: none; }
.rail .nav-count { position: absolute; top: 2px; right: 0; font-size: 10px; padding: 0 5px; }
.rail .user { padding: 4px; background: none; border: 0; }
.rail main.wide .page, .rail main .page { max-width: none; }
main.wide .page { max-width: none; padding: 22px 22px 120px 8px; }

/* ---------- Page header ---------- */
.heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.heading > div { display: flex; flex-direction: column; gap: 10px; }
.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lede { font-size: 17px; color: #4a5869; max-width: 66ch; text-wrap: pretty; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--blue); align-self: flex-start; }
.back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 3px; border-radius: 1px; }

/* ---------- Glass surfaces ---------- */
.panel, .glass { background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); border-radius: var(--r-lg); }
.panel { padding: 24px; }
.panel.flush { padding: 0; overflow: hidden; }

/* ---------- Buttons ---------- */
button, .button, .download, .new, .go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font: 500 15px/1 var(--font); padding: 12px 22px; border-radius: var(--pill); cursor: pointer;
  color: #fff; background: linear-gradient(180deg, rgba(40, 90, 210, .96), rgba(0, 49, 146, .96));
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px rgba(0, 49, 146, .28);
  transition: transform .15s, box-shadow .15s, background .15s;
}
button:hover, .button:hover, .download:hover, .new:hover, .go:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 28px rgba(0, 49, 146, .34); }
button:active, .button:active, .download:active, .new:active, .go:active { transform: none; background: var(--blue-press); }
button:disabled { opacity: .6; cursor: default; transform: none; }
button.quiet, .button.quiet {
  color: var(--text); background: var(--glass); backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 4px 16px rgba(0, 19, 56, .08);
}
button.quiet:hover, .button.quiet:hover { color: var(--text); background: var(--glass-strong); }
.tinted { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--blue); padding: 8px 16px; border-radius: var(--pill); background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 19, 56, .08); }
.tinted:hover { background: #fff; }
.tinted::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); border-radius: 1px; }
.tinted.no-arrow::after { display: none; }
button.danger, .button.danger { background: linear-gradient(180deg, #b8392d, var(--red)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 24px rgba(155, 44, 34, .28); }
.danger-link { color: var(--red); }
.danger-link:hover { color: var(--red-ink); }
.button.small, button.small { padding: 8px 16px; font-size: 14px; }

/* ---------- Status chips (status-{{ status }} from the template) ---------- */
.status, .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); border: 1px solid rgba(0, 19, 56, .1); background: rgba(255, 255, 255, .75); color: var(--muted); }
.status-running, .chip.info { background: var(--info-bg); border-color: var(--info-line); color: var(--blue); }
.status-done, .chip.done { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.status-failed, .status-interrupted, .chip.problem { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.chip.waiting { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.status-running::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- Notes ---------- */
.note { padding: 16px 20px; border-radius: 18px; font-size: 15px; background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 8px; }
.note-problem { background: var(--red-bg); border-color: var(--red-line); color: var(--red-ink); box-shadow: inset 0 1px 0 #fff, 0 8px 28px rgba(155, 44, 34, .1); }
.note-done { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.note-flag { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.note-waiting { padding: 24px; }
.note .title { font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); text-wrap: pretty; }

/* ---------- Progress ---------- */
.bar { height: 8px; border-radius: 9px; background: rgba(0, 19, 56, .08); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #4a80ff, var(--blue)); box-shadow: 0 0 12px rgba(74, 128, 255, .6); }

/* ---------- Forms ---------- */
form { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; font-weight: 600; color: var(--text-2); }
input:not([type=checkbox]):not([type=file]), select {
  font: 16px/1.3 var(--font); color: var(--text); width: 100%;
  padding: 12px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(0, 19, 56, .12); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(0, 49, 146, .14); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.form-foot { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sending { font-size: 15px; color: var(--text-2); }

.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px; text-align: center; border-radius: 18px; border: 1.5px dashed rgba(0, 49, 146, .35); background: rgba(255, 255, 255, .4); cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.is-over { background: rgba(255, 255, 255, .7); border-color: var(--blue); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--blue); background: rgba(0, 49, 146, .1); }
.dropzone strong { font-weight: 500; }
.dropzone strong em { font-style: normal; color: var(--blue); }
.file-list { list-style: none; padding: 0; margin: 0; border-radius: var(--r); overflow: hidden; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .85); }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--hairline); }
.file-list li:last-child { border-bottom: 0; }
.file-list .data { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .size { color: var(--muted); flex: none; }

.confirm { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.confirm input { width: 20px; height: 20px; accent-color: var(--blue); margin: 0; }

/* ---------- Segmented control (NEW) ---------- */
.segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--pill); background: rgba(255, 255, 255, .45); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 4px 20px rgba(0, 19, 56, .06); align-self: flex-start; }
.segmented button { all: unset; cursor: pointer; font-size: 14px; color: var(--text-2); padding: 7px 16px; border-radius: var(--pill); white-space: nowrap; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed=true] { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 19, 56, .12); }

/* ---------- Months ---------- */
.months { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.month-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; height: 100%; padding: 22px 24px; color: var(--text); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); transition: transform .2s, box-shadow .2s, background .2s; }
.month-card:hover { color: var(--text); transform: translateY(-2px); background: var(--glass-strong); box-shadow: inset 0 1px 0 #fff, 0 16px 40px rgba(0, 19, 56, .12); }
.month-card .body { display: flex; flex-direction: column; gap: 6px; }
.month-card .name { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.month-card .by { font-size: 14px; color: var(--muted); }
.month-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.month-card .foot .bar { flex: 1; height: 6px; }
.arrow { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--blue); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 19, 56, .08); }
.arrow::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateX(-1px) rotate(45deg); border-radius: 1px; }
.empty { text-align: center; padding: 48px; color: var(--muted); }

/* ---------- Month ---------- */
.callout { border-radius: var(--r-lg); overflow: hidden; background: var(--amber-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--amber-line); box-shadow: inset 0 1px 0 #fff, 0 10px 32px rgba(176, 122, 16, .12); }
.callout-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; flex-wrap: wrap; }
.callout-head p { font-size: 17px; font-weight: 600; color: var(--amber-ink); }
.callout ul { list-style: none; padding: 0; margin: 0; max-height: 520px; overflow: auto; border-top: 1px solid rgba(176, 122, 16, .18); }
.callout li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 12px 24px; border-bottom: 1px solid rgba(176, 122, 16, .14); }
.callout li:last-child { border-bottom: 0; }
.callout li > a.account { font-family: var(--mono); font-weight: 600; color: var(--text); }
.callout .said { font-size: 14px; color: #4a5869; }
.callout .raw { grid-column: 2; font-size: 13px; color: var(--amber); }
.callout .raw summary { cursor: pointer; }
.callout .raw p { color: var(--text-2); margin-top: 4px; font-family: var(--mono); font-size: 12px; }
.callout.plain { padding: 18px 24px; }
.callout.plain p { color: var(--amber-ink); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tile { padding: 20px 24px; border-radius: var(--r-lg); background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 2px; }
.tile .label { font-size: 14px; color: #4a5869; }
.tile .figure { font-size: 42px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile.waiting { background: var(--amber-bg); border-color: var(--amber-line); }
.tile.waiting .label, .tile.waiting .figure { color: var(--amber); }
.tile.same .figure { color: var(--green); }
.tile.different .figure { color: var(--red); }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.four .figure { font-size: 34px; }

.more { border-radius: var(--r-lg); background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); overflow: hidden; }
.more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; font-weight: 600; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.more[open] summary::after { transform: rotate(-135deg); }
.more .panel { border: 0; box-shadow: none; background: none; backdrop-filter: none; border-top: 1px solid var(--hairline); border-radius: 0; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.figures div { display: flex; flex-direction: column; gap: 2px; }
.figures dt { font-size: 13px; color: var(--muted); }
.figures dd { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.sheets { list-style: none; padding: 0; margin: 0; }
.sheets li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--hairline); }
.sheets li:last-child { border-bottom: 0; }
.section { display: flex; flex-direction: column; gap: 12px; }

.now-reading { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.now-reading img, .scan-placeholder { width: 100%; aspect-ratio: 8.5 / 11; object-fit: cover; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(0, 19, 56, .1); background: repeating-linear-gradient(135deg, #f7f8fa 0 10px, #eff1f5 10px 20px); }
.scan-placeholder { display: grid; place-items: center; font: 12px var(--mono); color: var(--faint); }
.now-reading figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: center; }
.reading-layout .step { font-size: 17px; }

/* ---------- Floating action bar (the template's .actions) ---------- */
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions form { display: contents; }
.actions.floating {
  position: fixed; bottom: 24px; left: calc(50% + (var(--sidebar) + 14px) / 2); transform: translateX(-50%); z-index: 10;
  flex-wrap: nowrap; gap: 4px; padding: 6px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .55); backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 16px 40px rgba(0, 19, 56, .18);
}
.actions.floating > a:not(.download), .actions.floating button.quiet { all: unset; cursor: pointer; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: var(--pill); color: var(--text); white-space: nowrap; }
.actions.floating > a:not(.download):hover, .actions.floating button.quiet:hover { background: rgba(255, 255, 255, .7); }
.actions.floating .danger-link { color: var(--red) !important; }
.actions.floating .sep { width: 1px; height: 22px; background: rgba(0, 19, 56, .12); margin: 0 4px; }
.actions.floating .download, .actions.floating button:not(.quiet) { padding: 11px 20px; font-size: 14px; }
.actions.floating .confirm { padding: 0 10px 0 14px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
td.ours { color: var(--blue); font-weight: 600; }

/* Search table (NEW) */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 240px; position: relative; }
.toolbar .search input { padding-left: 42px; }
.toolbar .search::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 50%; transform: translateY(-60%); }
.toolbar select { width: auto; min-width: 170px; }
.table-scroll { overflow: auto; max-height: 70vh; border-radius: var(--r-lg); }
.table-scroll table { min-width: 1080px; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; background: rgba(246, 248, 252, .92); backdrop-filter: blur(12px); }
.table-scroll tbody tr:hover td { background: rgba(255, 255, 255, .55); }
.table-scroll td { white-space: nowrap; }
.table-scroll td.wrap { white-space: normal; min-width: 260px; max-width: 340px; text-wrap: pretty; color: var(--text-2); }
.table-scroll .sticky-col { position: sticky; left: 0; background: rgba(246, 248, 252, .92); backdrop-filter: blur(12px); }
.table-scroll thead .sticky-col { z-index: 2; }
.result-count { font-size: 14px; color: var(--muted); white-space: nowrap; }

/* Search results: 14 columns, built to fit ~1170px (1280 screen, rail sidebar) without scrolling */
.bills { table-layout: fixed; font-size: 13px; min-width: 1096px !important; }
.rail .page:has(.bills) { padding-left: 20px; padding-right: 20px; }
.bills th { font-size: 11px; letter-spacing: .02em; padding: 10px 8px; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.bills td { padding: 9px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bills td.wrap, .bills td.addr, .bills td:nth-child(1), .bills td:nth-child(2) { white-space: normal; text-overflow: clip; line-height: 1.3; }
/* Provider, bill type and address are words, and a word may be broken to fit: half of "Regulated"
   still reads as what it is. Numbers are never treated this way. */
.bills td.addr, .bills td:nth-child(1), .bills td:nth-child(2) { overflow-wrap: anywhere; }
/* Set at the size of the numbers beside them, so "Regulated" fits its column on one line. */
.bills td:nth-child(1), .bills td:nth-child(2) { font-size: 12px; }
.bills td.data { text-overflow: clip; overflow: visible; }
.bills td.addr { line-height: 1.3; }
.bills td.wrap { min-width: 0; max-width: none; line-height: 1.35; font-size: 12.5px; }
.bills .data { font-size: 12px; }
.bills td.total { font-weight: 700; }
.bills tr.unchecked td { background: rgba(253, 241, 212, .7); }
.bills tr.unchecked td:first-child { box-shadow: inset 3px 0 0 var(--amber-dot); }
.bills tr.unchecked:hover td { background: rgba(253, 236, 196, .9); }
.bills tr { cursor: pointer; }
.bills td.zero { color: var(--faint); }
.legend { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.legend::before { flex: none; content: ""; width: 14px; height: 14px; border-radius: 4px; background: rgba(253, 241, 212, .95); box-shadow: inset 3px 0 0 var(--amber-dot); }

/* Keyboard hints (bill check) */
kbd { font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 19, 56, .15); box-shadow: 0 1px 0 rgba(0, 19, 56, .15); color: var(--text-2); }
.bill-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bill-nav .pos { font-size: 13px; color: var(--muted); }
.bill-nav .step { display: flex; gap: 6px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.keys span { display: inline-flex; align-items: center; gap: 6px; }
.readers tr.unread th[scope=row] { color: var(--red); font-weight: 700; box-shadow: inset 3px 0 0 var(--red); }
.readers tr.unread { background: var(--red-bg); }
.readers tr.unread td input { background: #fff !important; border-color: var(--blue) !important; }

/* ---------- Bill review ---------- */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 20px; align-items: start; }
.scans { position: sticky; top: 14px; padding: 14px; border-radius: 24px; background: rgba(255, 255, 255, .45); backdrop-filter: blur(24px); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 10px; }
.scans .viewer { position: relative; }
.scans .viewer .scan-placeholder { aspect-ratio: auto; height: calc(100vh - 140px); min-height: 520px; box-shadow: none; }
.scans .segmented { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .6); box-shadow: 0 6px 20px rgba(0, 19, 56, .12); }
.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 2px; padding: 4px; border-radius: var(--pill); background: rgba(255, 255, 255, .6); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 6px 20px rgba(0, 19, 56, .12); }
.zoom button { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; font-size: 16px; font-weight: 600; border-radius: 50%; }
.zoom button:hover { background: #fff; }
.review-side { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.review-side h1 { font-size: 36px; }
.readers { font-size: 14px; }
.readers th[scope=row] { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: #4a5869; white-space: normal; }
.readers td { vertical-align: middle; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.readers td:last-child { width: 40%; }
.readers td input { font-family: var(--mono) !important; font-size: 14px !important; padding: 8px 10px !important; border-radius: var(--r-sm) !important; background: rgba(255, 255, 255, .5) !important; }
.readers tr.agree td:nth-child(3)::after { content: " ✓"; color: var(--green); font-family: var(--font); }
.readers tr.disagree { background: var(--amber-bg); }
.readers tr.disagree th[scope=row] { color: var(--amber); font-weight: 700; box-shadow: inset 3px 0 0 var(--amber-dot); }
.readers tr.disagree td input { background: #fff !important; border-color: var(--blue) !important; }
.readers .pick { all: unset; cursor: pointer; padding: 3px 8px; margin: -3px -8px; border-radius: 8px; }
.readers .pick:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.example { display: block; margin-top: 4px; font: 12px var(--font); color: var(--muted); }
.example code { background: rgba(0, 19, 56, .06); padding: 1px 5px; border-radius: 5px; }

/* ---------- Login ---------- */
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; }
.signin .mark { width: 200px; height: 88px; border-radius: 24px; display: grid; place-items: center; background: rgba(0, 19, 56, .78); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 16px 36px rgba(0, 19, 56, .28); }
.signin .mark img { width: 130px; height: auto; display: block; }
.signin .card { width: min(420px, 100%); padding: 32px; border-radius: var(--r-xl); background: var(--glass); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 18px; }
.signin .card h1 { font-size: 34px; }
.signin .eyebrow { font-size: 13px; font-weight: 600; color: var(--blue); }
.signin form { gap: 6px; }
.signin form label:not(:first-of-type) { margin-top: 12px; }
.signin form button { margin-top: 18px; padding: 14px; font-size: 16px; }

/* ---------- Delete ---------- */
.delete-list { font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.note-problem .title { font-size: 17px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .review { grid-template-columns: 1fr; }
  .scans { position: relative; top: 0; }
  .scans .viewer .scan-placeholder { height: 60vh; min-height: 360px; }
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* One column, so the sidebar becomes a row across the top. The shell is a grid a screen tall,
     and its rows stretch, which left that row as a navy box a third of the window deep with the
     logo floating in the middle of it. Named rows keep it to its own height. */
  .shell, .shell.rail { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 10px; gap: 10px; }
  .rail .sidebar { flex-direction: row; padding: 10px 12px; }
  .rail .sidebar .logo { width: 64px; height: auto; }
  .rail .nav-count { position: static; }
  .keys { display: none; }
  .sidebar { position: sticky; top: 10px; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; }
  .sidebar .logo { width: 64px; height: auto; margin: 0 4px; }
  .sidebar nav { flex-direction: row; gap: 2px; }
  .nav-sub, .user .who { display: none; }
  .nav-item { padding: 8px 10px; }
  .nav-item .label, .nav-heading { display: none; }
  .user { margin: 0 0 0 auto; padding: 0; background: none; border: 0; }
  .page { padding: 22px 8px 140px; }
  main.wide .page { padding: 12px 0 140px; }
  .tiles { grid-template-columns: 1fr; }
  .reading-layout { grid-template-columns: 1fr; }
  .callout li { grid-template-columns: 1fr auto; }
  .callout li .said, .callout .raw { grid-column: 1 / -1; }
  /* Action bar becomes a bottom sheet: primary on its own row, the rest beneath */
  .actions.floating { left: 10px; right: 10px; bottom: 10px; transform: none; flex-wrap: wrap; justify-content: center; gap: 2px; border-radius: 22px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .actions.floating .sep { display: none; }
  .actions.floating .download, .actions.floating button:not(.quiet) { order: -1; flex: 1 1 100%; padding: 14px; font-size: 15px; margin-bottom: 4px; }
  .actions.floating .confirm { flex: 1 1 100%; order: -2; padding: 6px 8px 10px; }
  .actions.floating .label-long { display: none; }
  .heading .new { align-self: stretch; }
  .segmented { max-width: 100%; overflow-x: auto; }
  .toolbar select { flex: 1; }
}
@media (max-width: 600px) {
  /* Bill review readings: one card per field instead of a 4-column table */
  .readers thead { display: none; }
  .readers, .readers tbody, .readers tr, .readers th, .readers td { display: block; width: auto !important; }
  .readers tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
  .readers th[scope=row] { grid-column: 1 / -1; padding: 0; border: 0; box-shadow: none !important; }
  .readers td { padding: 0; border: 0; }
  .readers td[data-label]::before { content: attr(data-label); display: block; font: 11px var(--font); color: var(--muted); margin-bottom: 2px; }
  .readers td:last-child { grid-column: 1 / -1; }
  .readers tr.agree td:last-child { display: none; }
  .callout li { padding: 12px 16px; }
  .callout-head, .sheets li, .more summary { padding-left: 16px; padding-right: 16px; }
  .panel { padding: 18px; }
  .month-card .name { font-size: 21px; }
  h1 { letter-spacing: -.03em; }
  .review-side h1 { font-size: 28px; }
  .scans .viewer .scan-placeholder { height: 52vh; min-height: 300px; }
}
@media (max-width: 520px) {
  .tiles.four, .figures { grid-template-columns: 1fr; }
  .heading .new { width: 100%; }
}
@supports not (backdrop-filter: blur(1px)) {
  .panel, .glass, .note, .month-card, .tile, .more, .callout, .signin .card, .scans { background: #fff; }
  .sidebar { background: var(--navy); }
}

/* The row above the table: the filter on one side, the legend and the count on the other. */
.toolbar.between { justify-content: space-between; }
.toolbar.between .toolbar { flex: 0 0 auto; gap: 18px; }

/* A note kept to reading width, and a form that sits on one line with its button. */
.note.narrow { max-width: 620px; }
.inline-form { flex-direction: row; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.inline-form .field { flex: 1; min-width: 220px; }
.table-scroll.tall { max-height: none; }

/* The search box is a real form, so its button sits beside the box rather than under it. */
.toolbar .search { display: flex; gap: 10px; align-items: center; }
.toolbar .search input { flex: 1; min-width: 0; }
.toolbar .search button { flex: 0 0 auto; }

/* A reader can say a paragraph about one bill. In the list that is one line per bill, so the
   first two lines show and the rest stays in "What the readers reported" below it. */
.callout li .said {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.callout .raw p { overflow-wrap: anywhere; }
.callout li > a.tinted { grid-column: 3; }

/* Real readings are long and unbroken — "30120VILLEMAGNERD", a whole address — so the table is
   held to the panel's width and the words break inside it rather than pushing the page sideways. */
.review-side .panel { overflow: hidden; }
.readers { width: 100%; table-layout: fixed; }
.readers th[scope="row"],
.readers td { overflow-wrap: anywhere; }
.readers td .pick { white-space: normal; text-align: left; }

/* The mock-ups showed the scan as a box; the real thing is a page rendered at 200 DPI, around
   1700px wide. Without these it sets the width of the whole page and everything beside it is
   pushed off the edge. */
.scans img,
.now-reading img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  background: #fff;
}
.scans figure { margin: 0; }
.scans figcaption,
.now-reading figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Fourteen headings over narrow money columns. They are set in full — these are the names on
   her own sheet — so they are given room to wrap onto two or three lines and read upright. */
.bills { min-width: 1096px !important; }
.bills thead th {
  font-size: 11px;
  letter-spacing: .01em;
  line-height: 1.25;
  padding: 9px 6px;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  vertical-align: bottom;
}
.bills thead th.num { text-align: right; }

/* A bill with several Site IDs printed a list long enough to cross the figures beside it. Every
   cell keeps to its own column, and the column is cut to hold the longest value there is: 13
   digits of Site ID and 12 of account number. The ellipsis stays as a last resort, so a number
   that somehow does not fit reads as cut rather than as a shorter, wrong number. */
.bills td.data {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Several Site IDs stack down their own column, one to a line. They break at the comma between
   them and never inside a number: half an id is worse than no id. */
.bills td.ids {
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.35;
}
/* The search box and its button sit on one line: forms here are columns by default. */
.toolbar .search { flex-direction: row; }


/* A phone cannot hold fifteen columns, so each bill becomes a card. The heading row is hidden and
   every cell carries its own heading instead, from the data-label the template writes. */
@media (max-width: 600px) {
  .table-scroll:has(.bills) { max-height: none; overflow: visible; }
  .bills { min-width: 0 !important; table-layout: auto; font-size: 14px; }
  .bills colgroup, .bills thead { display: none; }
  .bills, .bills tbody, .bills tr, .bills td { display: block; width: auto; }
  .bills tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .bills td, .bills td.num, .bills td.data,
  .bills td:nth-child(1), .bills td:nth-child(2) {
    padding: 0;
    border: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-align: left;
    font-size: 14px;
  }
  .bills td[data-label]::before {
    content: attr(data-label);
    display: block;
    font: 11px var(--font);
    color: var(--muted);
    margin-bottom: 2px;
  }
  /* A bill prints only some of the money columns; the empty ones would be rows of blank headings. */
  .bills td:empty { display: none; }
  /* The name, the place and the two numbers she searches by run the full width of the card. */
  .bills td[data-label="Provider"],
  .bills td[data-label="Address"],
  .bills td[data-label="Account #"],
  .bills td[data-label="Site ID"],
  .bills td[data-label="Note"] { grid-column: 1 / -1; }
  .bills td[data-label="Provider"] { font-size: 16px; font-weight: 600; }
  .bills td.data, .bills td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .bills td[data-label="Provider"]::before { display: none; }
  .bills td.sticky-col { position: static; background: none; backdrop-filter: none; }
  /* The amber mark belongs to the whole card now, not to a first column that no longer exists. */
  .bills tr.unchecked td, .bills tr.unchecked:hover td { background: none; }
  .bills tr.unchecked {
    background: rgba(253, 241, 212, .7);
    box-shadow: inset 3px 0 0 var(--amber-dot);
  }
  .bills tr.unchecked td:first-child { box-shadow: none; }
}

/* Where a value was read, drawn over the scan. The figure is the thing it is positioned against,
   and it never takes a click: it is a mark on a picture, not a control. */
.scans figure { position: relative; }
.scans .spot {
  position: absolute; pointer-events: none; border-radius: 4px;
  border: 2px solid var(--amber-dot); background: rgba(245, 158, 11, .18);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}
.readers .find {
  all: unset; cursor: pointer; border-bottom: 1px dashed currentColor;
}
.readers .find:hover, .readers .find:focus-visible { color: var(--blue); }
.readers .find.is-found { color: var(--blue); font-weight: 600; }