/* ══════════════════════════════════════════════════════════════
   REPORTS ▸ TIMESHEETS — wk-timesheet.js

   This file styles the PAGE only: the period toolbar, the scorecard row, and
   the grid of people. The timesheet DOCUMENT is not here — it lives inside a
   sandboxed iframe (the same viewer the report engine's own reports open in),
   and page stylesheets do not reach inside an iframe, so the sheet carries its
   own inline <style> from docCss() in wk-timesheet.js. That is also what makes
   it print correctly: what you see is a whole document, not a styled div.

   ⚠️ This page owns almost NO layout. It is assembled from the Reports tab's
   own chrome — .wk-tab-picker, .ax-cards-row / .ax-card, .wk-body,
   .wk-focus-panel / .wk-focus-head, .wk-support-module, .rp-overview-grid (all
   work.css) and .rp-card--rr / .rr-thumb / .rr-tag / .wk-rr-search (the wkRrCss
   block report-review.js injects). Tyler, 2026-08-05: "there is no reason why it
   should look any different." So what is left here is only the controls no other
   Reports tab has — the period stepper and the rate-basis switch — plus the two
   places a timesheet card differs from a report card.

   ⚠️ Adding layout here is almost always the wrong fix. If this page drifts
   from the Review Queue, the answer is to use the shared class, not to restate
   it with different numbers.
   ══════════════════════════════════════════════════════════════ */

.wk-ts { display: block; padding-bottom: 40px; }
.wk-ts-boot { font-size: 13px; color: #64748b; padding: 28px; text-align: center; }

/* ── The settings bar ─────────────────────────────────────
   The Review Queue's .wk-tab-picker, holding a PEOPLE picker where it holds a
   project one, and carrying the period controls out to the right. */
.wk-ts-picker { gap: 10px; }
/* WkTimeFilters' picker is sized for a dense financial toolbar; in this bar it
   takes the room the Review Queue's project dropdown takes. */
.wk-ts-picker .wk-ts-pick { flex: 1 1 240px; min-width: 220px; max-width: 480px; }
.wk-ts-picker .wk-ts-pick .fin-tb-pick-trigger { width: 100%; max-width: none; }
/* The period group rides right, so the bar reads "who" on the left and "when"
   on the right — and wraps as one block rather than shedding a control. */
.wk-ts-perwrap {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-left: auto;
}

/* Period stepper */
.wk-ts-per {
  display: flex; align-items: stretch;
  border: 1px solid #cbd5e1; border-radius: 9px; overflow: hidden; background: #fff;
}
.wk-ts-per-nav {
  display: flex; align-items: center; justify-content: center;
  width: 30px; border: 0; background: #fff; color: #475569; cursor: pointer;
  transition: background .12s, color .12s;
}
.wk-ts-per-nav svg { width: 15px; height: 15px; }
.wk-ts-per-nav:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.wk-ts-per-nav:disabled { opacity: .35; cursor: default; }
/* The range face is also the jump-back-to-now button — there is deliberately no
   separate "This period" button next to the mode <select> any more; two controls
   both saying "period" next to each other told you nothing about which was
   which. `is-now` is the state where we're already there: it stays a plain label
   and drops the reset glyph, so the affordance only appears when it does something. */
.wk-ts-per-face {
  display: flex; align-items: center; gap: 7px;
  font: inherit; padding: 0 13px; min-width: 168px; justify-content: center;
  font-size: 13px; font-weight: 700; color: #0f172a;
  background: #fff; border: 0;
  border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .12s;
}
.wk-ts-per-face:hover:not(:disabled) { background: #f1f5f9; }
.wk-ts-per-face:disabled { cursor: default; }
.wk-ts-per-now { width: 13px; height: 13px; color: #94a3b8; flex: 0 0 auto; }
.wk-ts-per-face:hover:not(:disabled) .wk-ts-per-now { color: #0891b2; }
.wk-ts-per-face.is-now .wk-ts-per-now,
.wk-ts-per-face:disabled .wk-ts-per-now { display: none; }
.wk-ts-sel { display: inline-flex; }
.wk-ts-range { display: inline-flex; align-items: center; gap: 6px; }
/* ⚠️ Needed: a `display` rule in a stylesheet outranks the UA's [hidden]
   { display: none }, so without this the custom-range date inputs sit there in
   every mode — on a two-week pay period, next to a period stepper that already
   says which fortnight it is. */
.wk-ts-range[hidden] { display: none; }
.wk-ts-range input {
  font: inherit; font-size: 12.5px; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px; background: #fff;
}
.wk-ts-range-sep { font-size: 12px; color: #94a3b8; }

/* Rate basis — a segmented control, because the two options are one decision
   and the wrong one on a payroll page is the mistake worth making visible. */
.wk-ts-basis {
  display: inline-flex; padding: 2px;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9px;
}
.wk-ts-basis-b {
  font: inherit; font-size: 12.5px; font-weight: 600; color: #64748b;
  background: transparent; border: 0; border-radius: 7px;
  padding: 5px 12px; cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s, box-shadow .13s;
}
.wk-ts-basis-b:hover { color: #0f172a; }
.wk-ts-basis-b.is-on {
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* ── Cards ──────────────────────────────────────────────────
   The anatomy is the report card's. Two adjustments only:
   the status pill carries HOURS (a number, not a word, so it needs tabular
   figures and a touch more room), and the footer's right-hand note is coloured
   inline by approval state. */
.wk-ts-card .rr-thumb-stat {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.wk-ts-card .rp-card-foot-date { font-variant-numeric: tabular-nums; }
/* The Everyone card leads the grid, so its thumb monogram holds a GLYPH where a
   person's holds two letters — the mono span is sized for text and has to be told
   to centre an svg instead. */
.wk-ts-card--all .rr-thumb-comono {
  display: inline-flex; align-items: center; justify-content: center;
}
.wk-ts-card--all .rr-thumb-comono svg { display: block; }
/* A person's card carries their FACE where a report card carries the client's
   logo. Same badge, filled differently: report-review's own rule contains the
   image inside a padded white plate (right for a logo, which must stay whole and
   must not be cropped), and a photo needs the opposite — round, no padding, and
   cropped to fill. The monogram stays underneath for anyone with no photo. */
.wk-ts-card .wk-ts-thumb-face { border-radius: 50%; }
.wk-ts-card .wk-ts-thumb-face img {
  padding: 0; background: none;
  object-fit: cover; object-position: center;
}

/* ── The viewer is report-review.js’s now ─────────────────
   A timesheet opens the REPORT REVIEW POPUP — two panes, the record on the
   left and the document on the right — so the ~95 lines that used to live here
   (a full-bleed modal body, an iframe fill, a person rail beside it, and its own
   head/foot copy) are gone with the viewer they dressed. Nothing in this file
   styles the open sheet any more; the document brings its own CSS inline, and
   the frame around it belongs to report-review.css.
   ⚠️ Do not re-add a .wk-ts-modal skin here. A second modal dressed for one
   report type is exactly what this replaced. */

/* The sheet prints from inside the popup's own iframe (it carries its own
   @media print rules), so the app page needs no print stylesheet here —
   printing the frame prints the document and nothing else. */

/* ── Two groups on one page ────────────────────────────────
   The tab now carries TIMESHEET REPORTS somebody made (their own periods, read
   from the report rows) above THIS PERIOD'S people (computed live from the time
   entries). They are different kinds of thing, so they get a label each — and
   only when both are there, which gridHtml decides. The heading is the app's
   own .wk-focus-title weight, one step down: this is a divider inside a panel,
   not a second panel. */
.wk-ts-group + .wk-ts-group { margin-top: 22px; }
.wk-ts-group-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #64748b; margin: 0 2px 10px;
}
.wk-ts-group-h span {
  font-size: 11px; font-weight: 800; letter-spacing: 0;
  color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc;
  border-radius: 999px; padding: 1px 7px;
}
.wk-ts-orphan-n {
  font-size: 11.5px; line-height: 1.5; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
  padding: 9px 12px; margin: 0 18px 4px;
}

/* ── Every employee has a card ─────────────────────────────
   The grid is the whole roster now, not only the people with hours, so a card
   for an empty period is a normal thing to see. It is drawn quieter — the banner
   loses its saturation and the hours pill goes grey — so a busy grid still reads
   busiest-first without having to check the numbers. Hover restores it: a card
   you are about to click should not look disabled. */
.wk-ts-card--empty .rr-thumb { filter: saturate(.35); opacity: .82; }
.wk-ts-card--empty:hover .rr-thumb { filter: none; opacity: 1; }
.wk-ts-card--empty .rr-thumb-stat { background: #94a3b8 !important; }

/* ⚠️ align-items:start, or one open fold stretches every card in its grid row to
   match. .rp-overview-grid is a plain 3-column grid and grid items stretch by
   default, which was fine while every card was the same height. */
.wk-ts-grid { align-items: start; }

/* ── The versions fold ─────────────────────────────────────
   Under each card and part of it: how often that person's sheet is due, and
   every stored version of it. It is INSIDE .rp-card (which is a flex column with
   overflow:hidden), so it needs no radius of its own — the card clips it. */
.wk-ts-vers { border-top: 1px solid var(--border, #e2e8f0); background: #fbfdfe; }
.wk-ts-vers-h {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font: inherit; font-size: 11.5px; font-weight: 700; color: #475569;
  background: transparent; border: 0; padding: 8px 12px; cursor: pointer;
  text-align: left; transition: background .13s, color .13s;
}
.wk-ts-vers-h:hover { background: #f1f5f9; color: #0f172a; }
.wk-ts-vers-c { flex: 0 0 auto; color: #94a3b8; transition: transform .16s; }
.wk-ts-vers.is-open .wk-ts-vers-c { transform: rotate(90deg); }
.wk-ts-vers-t { flex: 0 0 auto; }
.wk-ts-vers-n {
  flex: 0 0 auto; font-size: 10px; font-weight: 800;
  color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc;
  border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
/* The cadence rides right, in the header, because "every two weeks" is the one
   thing about the fold worth knowing without opening it. */
.wk-ts-vers-cad {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.wk-ts-vers-cad.is-set { color: #0e7490; }
.wk-ts-vers-b { padding: 2px 12px 10px; }
.wk-ts-vers-b[hidden] { display: none; }

/* How often it is due */
.wk-ts-cad {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  padding: 8px 10px; margin-bottom: 9px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 9px;
}
.wk-ts-cad-l {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #94a3b8; flex: 0 0 auto;
}
.wk-ts-cad-s {
  font: inherit; font-size: 12px; font-weight: 650; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 3px 6px;
  background: #fff; cursor: pointer; flex: 1 1 120px; min-width: 118px;
}
.wk-ts-cad-due { flex: 1 1 100%; font-size: 10.5px; color: #94a3b8; line-height: 1.4; }

/* One version */
.wk-ts-vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.wk-ts-v {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 9px; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.wk-ts-v:hover {
  border-color: #67e8f9; transform: translateX(1px);
  box-shadow: 0 2px 8px rgba(8, 145, 178, .10);
}
.wk-ts-v:focus-visible { outline: 2px solid #0891b2; outline-offset: 1px; }
.wk-ts-v-n {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #0e7490;
  background: #ecfeff; border-radius: 6px; padding: 2px 5px;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.wk-ts-v-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wk-ts-v-per {
  font-size: 12px; font-weight: 750; color: #0f172a;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.wk-ts-v-made {
  font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #7c3aed; background: #f5f3ff;
  border: 1px solid #ddd6fe; border-radius: 5px; padding: 0 4px;
}
/* Who it went to and WHERE — the addresses, never a count.
   ⚠️ The truncation lives on .wk-ts-v-subt, the TEXT box, not on this flex row:
   `text-overflow: ellipsis` has no effect on a flex container, so an address
   longer than the card was chopped with no ellipsis and read as a shorter
   address rather than as a truncated one. On a payroll trail that matters. */
.wk-ts-v-sub {
  font-size: 10.5px; color: #94a3b8; line-height: 1.45;
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.wk-ts-v-sub svg { flex: 0 0 auto; }
.wk-ts-v-subt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ts-v-sub.is-sent { color: #0d9488; }
.wk-ts-v-sub.is-bad { color: #dc2626; }
/* "The hours changed since this version" — the blue the document's own callout
   uses for the same statement, so the card and the sheet agree. */
/* ⚠️ IT WRAPS, IT DOES NOT TRUNCATE. A card is ~300px wide in a six-person grid,
   so a one-line clamp cut "Rates filled in on 3.8 hours since this was signed"
   down to "Rate…" — which says nothing at all, on the one row whose whole job is
   to say why a signed sheet is out of date. Two lines of 10px type cost nothing. */
.wk-ts-v-chg {
  font-size: 10px; font-weight: 700; color: #1d4ed8; line-height: 1.4;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
  padding: 1px 5px; margin-top: 3px; align-self: flex-start;
  max-width: 100%;
}
/* "Re-make it" — the one act that answers a signed sheet the ledger has moved
   under. The same blue as the notice beside it, because it is that statement
   finishing its sentence. It must NOT read as a destructive control: the copy
   that was signed stays exactly where it is and keeps its number. */
.wk-ts-v-remake {
  /* ⚠️ `align-self: flex-start`, not `flex: 0 0 auto`. It sits in a COLUMN flex
     box (.wk-ts-v-main), where the cross axis is the width and the default
     `stretch` drew a 125px-wide button across the whole card. */
  align-self: flex-start; margin-top: 4px; padding: 3px 8px;
  font: inherit; font-size: 10px; font-weight: 800; color: #1d4ed8;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.wk-ts-v-remake:hover { background: #dbeafe; border-color: #93c5fd; }
.wk-ts-v-remake:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.wk-ts-v-remake:disabled { color: #94a3b8; background: #f1f5f9; border-color: #e2e8f0; cursor: default; }
.wk-ts-v-st {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; color: var(--c, #64748b);
  margin-top: 2px; white-space: nowrap;
}
.wk-ts-vnone { font-size: 11px; color: #94a3b8; line-height: 1.5; padding: 2px 2px 4px; }

/* ══ WHAT OUR HOURS COST — the standing-rate sheet ═══════════════════════════
   Tyler, 2026-08-18: "I do not want rates to be stored via code. That is
   retarded, and no one will be able to change them." This is the screen that
   replaced the script. See wk-timesheet.js `openRatesSheet`.
   ────────────────────────────────────────────────────────────────────────── */
.wk-ts-costnote { font-size: 11.5px; color: #64748b; line-height: 1.45; margin-bottom: 9px; }
.wk-ts-costbtn {
  width: 100%; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9;
  font-size: 12px; font-weight: 700; font-family: inherit;
}
.wk-ts-costbtn:hover { background: #ede9fe; border-color: #c4b5fd; }

/* ── The same module when there is nothing on record ───────────────────────
   An empty rate store makes every sheet on the tab print dashes, which reads
   as a broken report rather than as a setting nobody has filled in — so the
   module changes colour and states the gap in HOURS instead of describing the
   setting. Amber, not red: it is work outstanding, not a failure. */
.wk-ts-costnote--warn { color: #78350f; }
.wk-ts-costnote--warn b { color: #92400e; font-weight: 800; }
.wk-ts-costbtn.is-warn { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.wk-ts-costbtn.is-warn:hover { background: #fef3c7; border-color: #f59e0b; }

/* A line arriving with a suggested figure in it. Tinted so it is obvious the
   number came from the app rather than from the store — the caption under it
   says the same thing in words, because a tint alone is not a statement. */
.wk-ts-cost-line.is-seeded .wk-ts-cost-in { border-color: #fcd34d; background: #fffbeb; }
.wk-ts-cost-line.is-seeded .wk-ts-cost-hist b { color: #92400e; }

/* ⚠️ Above the report popup, which sits at 1000030 (report-review's own
   scrim). This opens from the rail BEHIND that popup is not possible, but a
   toast fired from here must still land on top — so the sheet sits under the
   toast layer and over everything else on the page. */
.wk-ts-costov {
  position: fixed; inset: 0; z-index: 1000040;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(1.5px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.wk-ts-cost {
  background: #fff; border-radius: 14px; width: 100%; max-width: 720px;
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.wk-ts-cost-h {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px 13px; border-bottom: 1px solid #e2e8f0;
}
.wk-ts-cost-t { font-size: 15px; font-weight: 800; color: #0f172a; }
.wk-ts-cost-s { font-size: 11.5px; color: #7c3aed; font-weight: 700; margin-top: 2px; }
.wk-ts-cost-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: #94a3b8; padding: 0 4px;
}
.wk-ts-cost-x:hover { color: #0f172a; }
/* ⚠️ THE BODY SCROLLS, not the page. Six people is one screen; twenty is not,
   and a sheet that grows past the viewport puts Save off the bottom. */
.wk-ts-cost-b { padding: 14px 18px 18px; overflow-y: auto; }
.wk-ts-cost-load { font-size: 12.5px; color: #64748b; padding: 20px 0; text-align: center; }
.wk-ts-cost-lead {
  font-size: 12px; color: #475569; line-height: 1.5;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px;
  padding: 10px 12px; margin-bottom: 13px;
}
.wk-ts-cost-lead b { color: #0f172a; }

/* One person: name / what it is now / the new figure / from when / Save.
   The history line spans the whole row underneath, because it is the answer to
   "what am I about to bury" and must not be squeezed into a column. */
/* ⚠️ THE GRID MOVED DOWN A LEVEL. A person now carries TWO editable lines —
   client work and our own — so `.wk-ts-cost-r` is the person BLOCK and
   `.wk-ts-cost-line` is the five-column row it used to be. Leaving the grid on
   the person would have laid the two lines out as grid items and put the second
   line's Save button in the first line's date column. */
.wk-ts-cost-r {
  display: block;
  padding: 12px 0 13px; border-bottom: 1px solid #f1f5f9;
}
.wk-ts-cost-line {
  display: grid; align-items: center; gap: 9px;
  grid-template-columns: minmax(140px, 1.5fr) minmax(96px, .9fr) 104px 132px auto;
  padding: 7px 0 0;
}
/* The label column, where the person's name used to sit. */
.wk-ts-cost-lb { display: flex; flex-direction: column; min-width: 0; }
.wk-ts-cost-lb b { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.wk-ts-cost-lb span {
  font-size: 10.5px; color: #94a3b8; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️ "Falls back to the other line" is NOT a gap, so it is not amber. A blank
   client rate is a deliberate, working state — one rate for everything — and
   painting it as a defect would have people typing the same number in twice. */
.wk-ts-cost-nowv em.is-inherit { color: #64748b; font-weight: 600; }
/* The person's name band above the two lines. */
.wk-ts-cost-r > .wk-ts-cost-who { margin-bottom: 2px; }
.wk-ts-cost-r:last-child { border-bottom: 0; }
.wk-ts-cost-who { display: flex; flex-direction: column; min-width: 0; }
.wk-ts-cost-nm {
  font-size: 13px; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-ts-cost-em {
  font-size: 10.5px; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-ts-cost-nowv { font-size: 12px; color: #334155; }
.wk-ts-cost-nowv b { font-size: 14px; font-weight: 800; color: #7c3aed; }
.wk-ts-cost-nowv span { font-size: 10.5px; color: #94a3b8; margin-left: 3px; }
/* ⚠️ AMBER, and it says the words. A dash or a blank here reads as $0, which is
   a rate; "No rate on record" is a gap. */
.wk-ts-cost-nowv em { font-size: 11.5px; font-style: normal; font-weight: 700; color: #b45309; }
.wk-ts-cost-in {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px; background: #fff;
}
.wk-ts-cost-in span { font-size: 12px; font-weight: 700; color: #94a3b8; }
.wk-ts-cost-in input {
  border: 0; outline: 0; width: 100%; min-width: 0; font-size: 13px;
  font-weight: 700; color: #0f172a; font-family: inherit; background: transparent;
}
.wk-ts-cost-from {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #94a3b8; font-weight: 700;
}
.wk-ts-cost-from input {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 6px;
  font-size: 11.5px; font-family: inherit; color: #0f172a; min-width: 0; width: 100%;
}
.wk-ts-cost-save {
  border: 1px solid #7c3aed; background: #7c3aed; color: #fff;
  border-radius: 8px; padding: 7px 14px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: inherit; white-space: nowrap;
}
.wk-ts-cost-save:hover:not(:disabled) { background: #6d28d9; }
.wk-ts-cost-save:disabled { opacity: .55; cursor: default; }
.wk-ts-cost-hist {
  grid-column: 1 / -1; font-size: 10.5px; color: #94a3b8; line-height: 1.4;
}

/* The 403 render. A padlock, never a blank — see the block comment in the js. */
.wk-ts-cost-lock { text-align: center; padding: 26px 18px; }
.wk-ts-cost-lockic { font-size: 30px; margin-bottom: 8px; }
.wk-ts-cost-lock b { display: block; font-size: 13.5px; color: #0f172a; margin-bottom: 6px; }
.wk-ts-cost-lock span {
  display: block; font-size: 12px; color: #64748b; line-height: 1.5;
  max-width: 430px; margin: 0 auto;
}

@media (max-width: 640px) {
  /* ⚠️ The five columns collapse to two, and Save spans. At 640px the date
     input alone is wider than a third of the screen, so the grid was pushing
     Save off the right edge entirely. */
  .wk-ts-cost-line { grid-template-columns: 1fr 1fr; }
  .wk-ts-cost-lb { grid-column: 1 / -1; }
  .wk-ts-cost-save { grid-column: 1 / -1; }
}

/* ══ WHICH HOURS GO ON THE SHEET — the template control ══════════════════════
   Sits in the same fold as the cadence and reuses .wk-ts-cad's row, because the
   two are the same kind of decision about the same vo_reportplan row. */
.wk-ts-tpl { margin-top: 8px; }
.wk-ts-tpl-cap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #64748b; font-weight: 700;
}
.wk-ts-tpl-cap input {
  width: 78px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px 7px;
  font-size: 12px; font-weight: 700; color: #0f172a; font-family: inherit;
}
/* ⚠️ The basis select must not stretch. It shares .wk-ts-cad-s, which is sized
   to be the row's main control, and at full width it pushed the cap input onto
   its own line where the sentence "stop at $1100 for the whole sheet" broke in
   the middle of itself. */
.wk-ts-tpl-basis { max-width: 190px; font-size: 11px; }

/* ⚠️ `.ts-warn--tpl` IS NOT HERE. The document is a self-contained page inside a
   sandboxed iframe with its own <style>, built by docCss() in wk-timesheet.js —
   a rule for it in this file styles nothing at all. */
/* The cap has been chosen but not typed. Amber, and the row says what that
   means for the sheet right now — a blank box with no explanation reads as a
   rule that is already in force. */
.wk-ts-tpl-cap input.is-wanted { border-color: #f59e0b; background: #fffbeb; }
.wk-ts-tpl-want {
  flex-basis: 100%; font-size: 11px; color: #b45309; font-weight: 700; margin-top: 4px;
}

/* ══ THE BATCH — pick all on screen, and a bar that says what it will do ════
   Tyler, 2026-08-18: *"There should be a really easy way for us to, once the
   timesheets are approved, just select what timesheets I want and send a mass
   email… or save it all at once to a downloadable file."*

   🚨 THE PER-CARD TICK IS GONE. Tyler, 2026-09-01: *"feel like it's not
   necessary."* It sat in the banner's bottom-right as a white plate whose
   checkmark was `color:transparent` until ticked, so it read as an unexplained
   white square — the question that retired it was "not sure what that is". The
   batch itself is untouched: the header's "pick all on screen" ticks whatever
   the search box has left showing, and narrowing that box is how a subset gets
   assembled now.

   ⚠️ THE RING IS NOW THE ONLY "THIS ONE IS PICKED" SIGNAL ON THE GRID, so it
   hangs off a class the card writes itself rather than `:has()` over a tick that
   no longer exists. Drop it and "pick all" changes nothing on screen but a
   number in the bar. */
.wk-ts-card.is-picked {
  box-shadow: 0 0 0 2px #0891b2, 0 6px 18px rgba(8, 145, 178, .18);
}

/* The header's toggle. It reads .wk-rr-btn, so it is the same button the rest of
   Reports uses; only the "everything is already picked" state is ours. */
.wk-ts-all.is-on { background: #ecfeff; border-color: #67e8f9; color: #0e7490; }

/* ── The bar ───────────────────────────────────────────────
   ⚠️ STICKY TO THE BOTTOM OF THE VIEWPORT, not appended under the grid. A batch
   assembled by scrolling a roster of twelve would otherwise put its own buttons
   below the last card, i.e. off-screen at exactly the moment they are wanted.
   ⚠️ AND IT IS NOT `position:fixed`. The focus panel is the scroll container and
   a fixed bar would sit over the support rail as well, covering the rates module
   on every screen narrower than the two-column breakpoint. */
.wk-ts-bulk[hidden] { display: none; }
.wk-ts-bulk {
  position: sticky; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 2px 4px; padding: 11px 14px;
  background: #0f172a; color: #fff;
  border-radius: 13px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .2);
  animation: wkTsBulkIn .16s ease-out both;
}
@keyframes wkTsBulkIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .wk-ts-bulk { animation: none; } }
.wk-ts-bulk-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.wk-ts-bulk-n { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.wk-ts-bulk-s {
  font-size: 11px; font-weight: 600; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.wk-ts-bulk-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-ts-bulk-b {
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08);
  color: #fff; border-radius: 9px; padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: background .13s, border-color .13s, opacity .13s;
}
.wk-ts-bulk-b:hover:not(:disabled) { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .36); }
.wk-ts-bulk-b:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
/* ⚠️ A DISABLED BUTTON STILL SAYS WHY. "All approved" greyed out is a statement
   about the batch; hiding it would leave a gap where an answer belongs. */
.wk-ts-bulk-b:disabled { opacity: .42; cursor: default; }
.wk-ts-bulk-b.is-quiet { border-color: transparent; background: none; color: #94a3b8; padding-left: 6px; padding-right: 6px; }
.wk-ts-bulk-b.is-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
.wk-ts-bulk-b.is-go { background: #16a34a; border-color: #16a34a; }
.wk-ts-bulk-b.is-go:hover:not(:disabled) { background: #15803d; border-color: #15803d; }
.wk-ts-bulk-b.is-send { background: #0891b2; border-color: #0891b2; }
.wk-ts-bulk-b.is-send:hover:not(:disabled) { background: #0e7490; border-color: #0e7490; }

@media (max-width: 720px) {
  /* The count and the verbs stack rather than the verbs wrapping one at a time,
     which left a single button orphaned on its own line. */
  .wk-ts-bulk { flex-direction: column; align-items: stretch; }
  .wk-ts-bulk-l { margin-right: 0; }
  .wk-ts-bulk-r { justify-content: flex-end; }
}

/* ══ "NOTHING LOGGED THURSDAY" — the strip under a card's foot ══════════════
   Tyler: *"The important part is that they have all their hours logged by the
   time that it hits."* A quiet week and an unfinished one both render as fewer
   hours, so the card says which it is before anybody signs.

   ⚠️ AMBER, WHICH IS THE GAP COLOUR EVERYWHERE ON THIS TAB. Report blue means "a
   decision was applied" (a template dropped hours on purpose); amber means "a
   fact is missing". Painting this blue would teach people to skim past it.
   ⚠️ It sits BELOW the foot and ABOVE the fold, because it is about the period on
   the card, not about any stored version underneath. */
.wk-ts-gap {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-size: 11.5px; font-weight: 700; line-height: 1.35;
  color: #b45309; background: #fffbeb;
  border-top: 1px solid #fde68a;
}
.wk-ts-gap svg { width: 14px; height: 14px; flex: 0 0 auto; }
.wk-ts-gap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The weekend flag, in the same fold as the cadence and the template. */
.wk-ts-wknd {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #64748b; cursor: pointer;
  white-space: nowrap;
}
.wk-ts-wknd input { accent-color: #0891b2; width: 14px; height: 14px; cursor: pointer; }

/* ══ THIS PERIOD | HISTORY ═════════════════════════════════════════════════
   Reuses the rate-basis segment's shape, because it is the same kind of control
   — two states, one of them on — and a second visual idea for the same idea is
   how a toolbar stops being scannable. */
.wk-ts-view {
  display: inline-flex; align-items: center; gap: 2px;
  background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 9px; padding: 2px;
}
.wk-ts-view-b {
  border: 0; background: none; border-radius: 7px; padding: 5px 11px;
  font: inherit; font-size: 12px; font-weight: 700; color: #64748b; cursor: pointer;
  white-space: nowrap; transition: background .13s, color .13s, box-shadow .13s;
}
.wk-ts-view-b:hover { color: #0f172a; }
.wk-ts-view-b.is-on { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

/* ⚠️ MUTED, NOT HIDDEN. History is every period at once, so the stepper and the
   period kind cannot do anything there — but removing them would reflow the whole
   toolbar on every toggle, and a control that vanishes reads as a bug. Dimmed and
   inert says "not applicable here", which is the true statement. */
.wk-ts-perwrap .is-mute { opacity: .38; pointer-events: none; }

/* ── The history list ──────────────────────────────────────
   A row per stored timesheet, newest first: who, which period, which version of
   theirs, where it got to, where it went and when. Six columns, because the
   sixth — the ADDRESS — is the one the accountant question actually turns on. */
.wk-ts-hist { display: flex; flex-direction: column; gap: 1px; }
.wk-ts-hrow {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(130px, 1.3fr) minmax(120px, 1fr) 34px 108px minmax(150px, 1.6fr) 84px;
  width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid transparent; border-radius: 9px;
  background: none; font: inherit; color: #0f172a; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wk-ts-hrow:nth-child(odd) { background: #f8fafc; }
.wk-ts-hrow:hover { background: #ecfeff; border-color: #a5f3fc; }
.wk-ts-hrow:focus-visible { outline: 2px solid #0891b2; outline-offset: -2px; }
/* ⚠️ Every cell clips its own text. The document's `.ts-co` face block is reused
   for the person, and without a min-width:0 on the grid child a long name pushes
   the address column off the panel instead of ellipsing. */
.wk-ts-hrow > span { min-width: 0; overflow: hidden; }
.wk-ts-hwho { font-weight: 700; font-size: 12.5px; }
.wk-ts-hwho .ts-co-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ts-hnone { font-weight: 700; font-size: 12px; color: #b45309; }
.wk-ts-hper { font-size: 12px; color: #475569; white-space: nowrap; text-overflow: ellipsis; }
.wk-ts-hv {
  font-size: 11px; font-weight: 800; color: #0e7490; background: #ecfeff;
  border: 1px solid #a5f3fc; border-radius: 999px; padding: 1px 0; text-align: center;
}
.wk-ts-hst {
  font-size: 11px; font-weight: 800; color: var(--c, #64748b);
  white-space: nowrap; text-overflow: ellipsis;
}
.wk-ts-hto {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: #64748b;
}
.wk-ts-hto svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* ⚠️ `text-overflow: ellipsis` DOES NOTHING ON A FLEX CONTAINER — the same trap
   the version fold's address line hit. The text needs its own box. */
.wk-ts-hto-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ts-hto.is-sent { color: #0f766e; }
.wk-ts-hto.is-bad { color: #b91c1c; }
.wk-ts-hwhen { font-size: 11px; color: #94a3b8; white-space: nowrap; text-align: right; }

@media (max-width: 900px) {
  /* The version pill and the "when" go first — they are the two shortest facts,
     and at this width the address needs every pixel it can get. */
  .wk-ts-hrow { grid-template-columns: minmax(110px, 1.2fr) minmax(100px, 1fr) 96px minmax(120px, 1.4fr); }
  .wk-ts-hv, .wk-ts-hwhen { display: none; }
}

/* ══ CAP THIS PERIOD — on the card, not in the fold ═════════════════════════
   Tyler, 2026-08-18: *"just make a feature where I can set my cap for a
   report"* — the standing rule lives one click deep in the Versions fold, which
   is the right home for "my sheet always works this way" and the wrong one for
   a decision taken while looking at a total you are about to send. */
.wk-ts-cap {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  font-size: 11.5px; font-weight: 700; color: #475569;
  background: #f8fafc; border-top: 1px solid #eef2f7;
}
.wk-ts-cap svg { width: 13px; height: 13px; flex: 0 0 auto; }
.wk-ts-cap-l { display: inline-flex; align-items: center; gap: 6px; color: #64748b; }
.wk-ts-cap-in {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 3px 7px; background: #fff;
}
.wk-ts-cap-in span { font-size: 11px; font-weight: 800; color: #94a3b8; }
.wk-ts-cap-in input {
  border: 0; outline: 0; width: 62px; min-width: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 800; color: #0f172a;
}
.wk-ts-cap-in:focus-within { border-color: #0891b2; box-shadow: 0 0 0 2px rgba(8,145,178,.15); }
/* ⚠️ The hint wraps to its own line rather than being clipped — it is the only
   thing that says client hours are never dropped to fit, which is the whole
   reason the number behaves the way it does. */
.wk-ts-cap-h { flex-basis: 100%; font-size: 10.5px; font-weight: 600; color: #94a3b8; }

/* Set. Teal rather than amber — a cap is a DECISION somebody took, not a gap in
   the data, and the amber on this card already means "hours are missing". */
.wk-ts-cap.is-on { background: #ecfeff; border-top-color: #a5f3fc; color: #0e7490; }
.wk-ts-cap-on { display: inline-flex; align-items: center; gap: 6px; }
.wk-ts-cap-on b { font-weight: 800; }
.wk-ts-cap-x {
  margin-left: auto; border: 1px solid #a5f3fc; background: #fff; color: #0e7490;
  border-radius: 7px; padding: 3px 9px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700;
}
.wk-ts-cap-x:hover { background: #cffafe; }
/* The cap states the arithmetic it actually did — see personCard. When it took
   nothing off, that is a real answer (the sheet is under the cap, or the hours
   carry no rate), so the line stays teal-but-quiet rather than green. */
.wk-ts-cap-sum { font-size: 10.5px; font-weight: 600; color: #0e7490; opacity: .85; }
.wk-ts-cap.is-idle { background: #f8fafc; border-top-color: #e2e8f0; color: #64748b; }
.wk-ts-cap.is-idle .wk-ts-cap-sum { color: #64748b; }
.wk-ts-cap.is-idle .wk-ts-cap-x { border-color: #cbd5e1; color: #64748b; }
/* A standing template that drops hours reports itself here too — the document
   no longer carries the banner, and hours coming off with nothing saying so is
   the one thing this sheet must never do. */
.wk-ts-cap.is-std { background: #eff6ff; border-top-color: #bfdbfe; color: #1e40af; }
.wk-ts-cap.is-std .wk-ts-cap-sum { color: #1d4ed8; opacity: .9; }
/* ── A cap on SOMEBODY ELSE'S sheet: stated, never editable ────────────────
   A cap is set on your own sheet only (canCapCard, 2026-08-31), but a cap that
   is already on one still has to be visible to an owner — hours coming off a
   sheet with nothing saying so is the silent drop this design forbids. Flatter
   than `.is-on`, and with no control in it, so at a glance it reads as a fact
   about that card rather than something to press. */
.wk-ts-cap.is-ro { background: #f8fafc; border-top-color: #e2e8f0; color: #475569; }
.wk-ts-cap.is-ro .wk-ts-cap-sum { color: #64748b; opacity: 1; }
.wk-ts-cap.is-ro .wk-ts-cap-on b { color: #334155; }
/* The read-only face of the standing rule, in the Versions fold. */
.wk-ts-tpl.is-ro .wk-ts-cad-due { color: #64748b; }

/* ── WHAT A SHEET COVERS ───────────────────────────────────────────────────
   Tyler, 2026-08-31, reading the audience chip as a filter: *"The Timesheet
   area should not only be internal… but should be for everything."* The
   audience chip now says "Private"; this one says what the sheet counts. Muted
   on purpose — it is context for the period beside it, not a status. */
.rr-tag--scope {
  background: #fff; color: #475569; border: 1px solid #e2e8f0;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══ WHO TIMESHEETS GO TO ═══════════════════════════════════════════════════
   The standing rule's editor. It borrows the cost sheet's shell wholesale
   (.wk-ts-costov / .wk-ts-cost / -h / -b / -lead / -save) because it IS the
   same kind of object — an owner-only setting opened off the same rail — and a
   second dialog language on one tab is how two things that do the same job
   start looking like two different features.
   ⚠️ NARROWER THAN THE COST SHEET. That one is a five-column grid per person;
   this is a list of names. At 720px a three-name list is a lot of white. */
.wk-ts-rcp { max-width: 520px; }
.wk-ts-rcp .wk-ts-cost-s { color: #0891b2; }
.wk-ts-rcp-list { margin-bottom: 12px; }
.wk-ts-rcp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #f1f5f9;
}
.wk-ts-rcp-row:last-child { border-bottom: 0; }
.wk-ts-rcp-row .wk-ts-cost-who { flex: 1 1 auto; }
.wk-ts-rcp-x {
  flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  border-radius: 7px; padding: 5px 10px; font-size: 11.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
/* ⚠️ RED ONLY ON HOVER. A list of Remove buttons drawn in red reads as a list
   of problems, and the thing being removed here is usually correct. */
.wk-ts-rcp-x:hover { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.wk-ts-rcp-none {
  font-size: 12px; color: #64748b; line-height: 1.5;
  border: 1px dashed #e2e8f0; border-radius: 9px; padding: 12px 13px;
}
/* Name, address, Add. The name is optional and gets the smaller share — an
   address is the part that has to be right. */
.wk-ts-rcp-add {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto;
  margin-bottom: 12px;
}
.wk-ts-rcp-add input {
  width: 100%; min-width: 0; font-family: inherit; font-size: 12.5px;
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; color: #0f172a;
}
.wk-ts-rcp-add input:focus { outline: 2px solid #a5f3fc; outline-offset: -1px; border-color: #0891b2; }
.wk-ts-rcp-also {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 11.5px; color: #475569; line-height: 1.5;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px;
  padding: 10px 12px; cursor: pointer;
}
.wk-ts-rcp-also b { color: #0f172a; }
.wk-ts-rcp-also input { margin-top: 2px; flex: 0 0 auto; }
.wk-ts-rcp-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid #e2e8f0;
}
.wk-ts-rcp-cancel {
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.wk-ts-rcp-cancel:hover { background: #f8fafc; color: #0f172a; }
/* The rail's own button, in the module's cyan rather than the rates module's
   violet — two settings, two accents, so the eye can tell them apart. */
.wk-ts-rcpbtn { border-color: #a5f3fc; background: #ecfeff; color: #0e7490; }
.wk-ts-rcpbtn:hover { background: #cffafe; border-color: #67e8f9; }

/* ── THE PICKER ─────────────────────────────────────────────────────────────
   Tyler, 2026-09-01: *"it should be the same selection as the normal send
   screen … select a name from the CRM."*

   ⚠️ THE SHAPE IS THE SEND SCREEN'S ROW, IN THIS SHEET'S COLOURS. Face, name
   over address, an affordance on the right — the same anatomy as .bx-pick-row,
   deliberately, because it is the same gesture over the same directory. It is
   NOT that class: send-kit.css defines its tokens (--surface, --brand, --line…)
   only on the kit's own body-portaled roots, and a var() with no value is an
   INVALID declaration a browser drops whole — borrowing the class inside this
   dialog draws transparent text on no card. See the header of send-kit.css.

   The FACE, on screen rather than in the emailed document, so the <img> can
   carry its own onerror and simply leave — no layered-fallback trick needed. */
.wk-ts-rcp-face {
  position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--h), 44%, 93%); color: hsl(var(--h), 42%, 33%);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.wk-ts-rcp-face img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.wk-ts-rcp-pick { margin-bottom: 12px; }
/* The box is the first thing this sheet asks for, so it looks like a box you
   type in rather than a filter over something already on screen. */
.wk-ts-rcp-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #cbd5e1; border-radius: 9px; padding: 0 10px; background: #fff;
}
.wk-ts-rcp-search:focus-within { border-color: #0891b2; box-shadow: 0 0 0 3px #cffafe; }
.wk-ts-rcp-mag { flex: 0 0 auto; width: 14px; height: 14px; color: #94a3b8; display: block; }
.wk-ts-rcp-search:focus-within .wk-ts-rcp-mag { color: #0891b2; }
.wk-ts-rcp-search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 12.5px; color: #0f172a; padding: 9px 0;
}
/* ⚠️ THE LIST SCROLLS, THE SHEET DOES NOT GROW. 1,500 people are one keystroke
   away and the Save button has to stay reachable — .wk-ts-cost-b already
   scrolls, and a second scroller inside it is what keeps the foot in view
   instead of pushing it past the bottom of an 86vh dialog. */
.wk-ts-rcp-res {
  margin-top: 8px; max-height: 268px; overflow-y: auto;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
}
.wk-ts-rcp-res:empty { display: none; }
.wk-ts-rcp-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 11px; border: 0; border-bottom: 1px solid #f1f5f9;
  background: #fff; font-family: inherit; cursor: pointer; color: #0f172a;
}
.wk-ts-rcp-hit:last-child { border-bottom: 0; }
.wk-ts-rcp-hit:hover { background: #f8fafc; }
.wk-ts-rcp-hit.is-on { background: #ecfeff; }
.wk-ts-rcp-hb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wk-ts-rcp-hn {
  font-size: 12.5px; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-ts-rcp-hs {
  font-size: 10.5px; color: #94a3b8; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Which directory this row came out of. Our own people and a client's contact
   look identical otherwise, and "which Amy" is the question this answers. */
.wk-ts-rcp-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc;
  border-radius: 5px; padding: 1px 5px;
}
.wk-ts-rcp-plus {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0;
}
.wk-ts-rcp-hit.is-on .wk-ts-rcp-plus { background: #0891b2; color: #fff; border-color: transparent; }
/* An address the CRM has never heard of — the bookkeeper on a gmail account,
   which is the case this whole setting was built for. It is a row, not a
   refusal, and it carries its own optional name. */
.wk-ts-rcp-raw { background: #fffbeb; cursor: default; }
.wk-ts-rcp-raw:hover { background: #fffbeb; }
.wk-ts-rcp-raw .wk-ts-rcp-face { background: #fef3c7; color: #b45309; }
.wk-ts-rcp-rawn {
  flex: 0 1 130px; min-width: 0; font-family: inherit; font-size: 11.5px;
  padding: 6px 8px; border: 1px solid #fcd34d; border-radius: 7px;
  background: #fff; color: #0f172a;
}
.wk-ts-rcp-rawn:focus { outline: 2px solid #fde68a; outline-offset: -1px; }
.wk-ts-rcp-rawadd {
  flex: 0 0 auto; border: 1px solid #f59e0b; background: #f59e0b; color: #fff;
  border-radius: 7px; padding: 6px 12px; font-size: 11.5px; font-weight: 800;
  font-family: inherit; cursor: pointer;
}
.wk-ts-rcp-rawadd:hover { background: #d97706; border-color: #d97706; }
.wk-ts-rcp-note {
  font-size: 11.5px; color: #64748b; line-height: 1.5; padding: 11px 12px;
}
.wk-ts-rcp-note.is-warn { color: #92400e; background: #fffbeb; border-bottom: 1px solid #fde68a; }
/* The fallback form only draws when the directory could not be reached, so it
   sits INSIDE the results box rather than under the search. */
.wk-ts-rcp-res .wk-ts-rcp-add { margin: 0; padding: 11px 12px; }
@media (max-width: 560px) {
  .wk-ts-rcp-add { grid-template-columns: 1fr; }
  /* The typed-address row carries a name box AND a button beside a name and an
     address: on a phone that is four things in 300px, so it wraps under. */
  .wk-ts-rcp-raw { flex-wrap: wrap; }
  .wk-ts-rcp-raw .wk-ts-rcp-hb { flex: 1 1 calc(100% - 40px); }
  .wk-ts-rcp-rawn { flex: 1 1 auto; }
}