/* =====================================================================
   THE QnQ KIT — every class a screen is allowed to use.

   This file and qnq-tokens.css are the ONLY two files in the app that
   may contain a size or a colour. A screen composes these classes
   through window.QK (qnq-kit.js) and writes no layout CSS of its own.

   Every number here is the number the signed goldens were drawn at
   (docs/design/reskin/goldens/gen.py). The header, the primary button
   and the bar land on exactly these coordinates in a 390x844 frame, and
   docs/design/reskin/kit-diff.mjs proves it on every run:

       Back            x 4    y 54   44 x 44
       right action    x 342  y 54   44 x 44
       title centre    x 195
       primary button  x 16   y 762  358 x 52
       bar             x 0    y 756  390 x 58
       bar slots       17/92/169/242/317 at y 764 (the + at 758)

   Do not change a number in this file without regenerating the goldens
   and having Sam sign them again.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0 · The shell. A screen is: status strip, header, body, then either a
   primary-action foot or the bar. Nothing else.
   ------------------------------------------------------------------ */
/* the kit brings its own box model, so it is right on any host page */
.qk-shell,.qk-shell *,
[class^="qk-"],[class*=" qk-"]{box-sizing:border-box}
/* …and its own type. Every signed golden is set in the phone's body face
   at 1.35 (goldens/FleetLight.html:36 body{font-family:-apple-system,…,"SF Pro
   Text"…;line-height:1.35}); until the de-drift pass (4 Sep 2026, C2) only
   .qk-shell, .qk-hdr and .qk-bar declared it, so a kit row, pill, section
   or card standing on a host column outside a shell (the office's tab
   pages) inherited the host's face and line-height — Inter at 1.55 — and
   measured 2 px taller (pill 29 not 27, heading 23 not 20, fold row 66 not
   64) and wider (a name that fits one line on the golden wrapped). Every
   kit element now carries the face and the line-height itself; a kit class
   with its own opinion (.qk-display, .qk-prose, .qk-banner, --wrap) still
   wins, because it comes later at the same specificity. */
[class^="qk-"],[class*=" qk-"]{font-family:var(--qk-font-body);line-height:var(--qk-line-body)}

.qk-shell{
  position:relative;display:flex;flex-direction:column;
  height:100%;min-height:0;
  background:var(--qk-ground);color:var(--qk-ink);
  font-family:var(--qk-font-body);font-size:var(--qk-size-body);
  line-height:var(--qk-line-body);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}

/* The device frame the goldens and the kit preview are drawn in. A real
   phone gets the same geometry from the safe-area inset instead. */
.qk-phone{
  --qk-safe-bottom:var(--qk-home-h);
  --qk-safe-top:var(--qk-status-h);
  width:390px;height:844px;flex:none;
}

/* the phone's status bar. A real device gives it as the safe-area
   inset; the 390x844 preview frame declares it as the golden's 54. */
.qk-status{height:var(--qk-safe-top);flex:none}

/* ---------------------------------------------------------------------
   1 · The header. Back is ALWAYS top-left. Close (or the one screen
   action) is ALWAYS top-right. The title is ALWAYS centred. Same size,
   same touch target, same icon, on every screen, for every function.
   ------------------------------------------------------------------ */
.qk-hdr{
  height:var(--qk-header-h);flex:none;position:relative;
  font-family:var(--qk-font-body);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--qk-space-1);
}
.qk-hdr__title{
  position:absolute;left:var(--qk-hdr-title-inset);right:var(--qk-hdr-title-inset);text-align:center;
  font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);
  letter-spacing:var(--qk-track-display);color:var(--qk-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qk-tap{
  width:var(--qk-tap);height:var(--qk-tap);flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--qk-ink);background:transparent;border:0;
  border-radius:var(--qk-radius-pill);
  font-family:inherit;padding:0;cursor:pointer;
}
.qk-tap--text{
  width:auto;padding:0 var(--qk-space-3);
  font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);
}
.qk-tap[disabled]{color:var(--qk-ink-3);cursor:default}

/* ---------------------------------------------------------------------
   2 · Icons. One family, one stroke weight, round caps, at every size.
   ------------------------------------------------------------------ */
.qk-i{
  width:var(--qk-icon);height:var(--qk-icon);flex:none;
  stroke:currentColor;fill:none;stroke-width:var(--qk-icon-stroke);
  stroke-linecap:round;stroke-linejoin:round;
}
.qk-i--sm{width:var(--qk-icon-sm);height:var(--qk-icon-sm)}
.qk-chev{
  width:var(--qk-icon-sm);height:var(--qk-icon-sm);flex:none;
  stroke:var(--qk-chev,var(--qk-ink-3));fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  margin-right:-6px;margin-left:-2px;
}

/* ---------------------------------------------------------------------
   3 · The body. Content on the spacing scale, nothing else.
   ------------------------------------------------------------------ */
.qk-body{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:var(--qk-body-gap);
  /* 6 is half the 12 gap: the first card sits closer to the header */
  padding:var(--qk-body-top) 20px 0;   /* ChatGPT's card inset, measured: 20 */
}
.qk-body::-webkit-scrollbar{width:0;height:0}
.qk-body{scrollbar-width:none}
/* a body's children never squash: a flex column shrinks its children when
   the content overflows, and a row with an explicit min-height (56) can be
   pressed from 64 to 56 - the wizard's crane line measured 56 on Checks
   (22 cards) and 64 on Start with the same markup (cohort 9, 5 Sep 2026).
   The goldens never overflow, so they never show it. */
.qk-body>*{flex-shrink:0}
.qk-body--tight{gap:var(--qk-air)}
.qk-body--centred{justify-content:center;gap:0}
/* the centred finish - the disc, the eyebrow, the title and one line breathe
   14 (goldens/Renter-Submitted.html:121 .body style="…gap:14px") */
.qk-body--finish{gap:14px}
/* a list scrolls under the frosted bar, so it needs the bar's height
   plus its own air beneath the last card */
.qk-body--bar{padding-bottom:96px}

/* ---------------------------------------------------------------------
   4 · Type. Figtree for titles and big numbers only.
   ------------------------------------------------------------------ */
.qk-display{
  font-family:var(--qk-font-number);font-weight:var(--qk-weight-display);
  letter-spacing:var(--qk-track-display);line-height:var(--qk-line-flat);
  font-variant-numeric:tabular-nums;
}
.qk-display--title{
  font-family:var(--qk-font-display);font-weight:var(--qk-weight-title);
  letter-spacing:var(--qk-track-title);line-height:.95;
}
.qk-size-hero{font-size:var(--qk-size-hero)}
.qk-size-display{font-size:var(--qk-size-display)}
.qk-size-big{font-size:var(--qk-size-big)}
.qk-size-number{font-size:var(--qk-size-number)}
.qk-size-title{font-size:var(--qk-size-title)}
.qk-size-title-sm{font-size:var(--qk-size-title-sm)}

.qk-eyebrow--warn{color:var(--qk-warn)}   /* the reader's kicker (Office-Reader, Renter-Reader: 'Safe work procedure' in the warn colour) */
.qk-eyebrow{
  font-size:var(--qk-size-eyebrow);font-weight:var(--qk-weight-semi);
  letter-spacing:var(--qk-track-eyebrow);text-transform:uppercase;
  color:var(--qk-ink-3);
}
/* the small stat tiles' eyebrow is 11, not 11.5: the signed binder pins it
   (Office-Binder.html: .eyebrow{font-size:11px}); the gate read it through
   the tracking (1.1 vs 1.15 px). De-drift pass. */
.qk-stats .qk-eyebrow{font-size:11px}
.qk-section{
  display:flex;align-items:baseline;gap:var(--qk-space-2);
  font-size:17px;font-weight:var(--qk-weight-semi);   /* the group's name in full ink on the cards' own edge (Sam, 19 Sep 2026: "These look shitty" — grey and indented) */
  letter-spacing:-.01em;text-transform:none;
  color:var(--qk-ink);padding-left:4px;
  margin:var(--qk-space-2) 0 calc(-1 * var(--qk-space-3));   /* the name sits 12 over its group; the stack's 24 stands above it (docs/design/WHAT-MAKES-IT-LOOK-GOOD.md) */
}
.qk-section:first-child,.qk-body>.qk-section:first-child,.qk-body>.qk-stack>.qk-section:first-child{margin-top:0}
.qk-section__count{
  font-size:15px;font-weight:400;
  color:var(--qk-ink-3);
}
.qk-section:first-child{margin-top:0}
/* …but a heading that opens a nested stack standing after something keeps
   its 8: the goldens' .h:first-child{margin-top:0} lifts the margin only
   from the first heading of the body (Office-Sites at 104), while the
   heading after the stat tiles (Office-Expiries, Office-Binder) has it. A
   host that fills a list through its own box (#expiryList, #maintBeyond)
   would otherwise land 8 px high (de-drift pass). */
.qk-stack>*+.qk-stack>.qk-section:first-child{margin-top:var(--qk-space-2)}
/* a late section's count is red — the one colour a late card carries */
.qk-section__count--bad{color:var(--qk-bad)}
/* the ring-i on a heading line sits hard right, flush with the header's
   action above it (the ring's 44 hangs into the page edge as it does in a
   row), and the line grows no taller for it */
.qk-section--info{align-items:center}
/* the heading line is the eyebrow's own (11.5 at 1.35 = 15.5 — TodayLight
   .h, Astra's shape, 7 Sep 2026), so the 44 ring hangs (44 − 15.5) / 2 each
   way and the line grows no taller for it; at −12 it stood 20 and pushed
   everything under the heading 4.5 px down (Today's first row 316 for 311). */
.qk-section .qk-info{margin:calc((var(--qk-size-eyebrow) * var(--qk-line-body) - var(--qk-tap)) / 2) -12px calc((var(--qk-size-eyebrow) * var(--qk-line-body) - var(--qk-tap)) / 2) auto}
.qk-sub{font-size:var(--qk-size-sub);color:var(--qk-ink-3)}
/* a sub-line standing on the ground between blocks, aligned with the
   headings' 4 (goldens/Office-JobDetails.html: `.sub style="font-size:15px;
   padding:0 4px"` — where the job comes from); as a link it keeps the
   grey and takes the goldens' underline. Composition de-drift, 5 Sep 2026. */
.qk-sub--inset{padding:0 4px;font-size:var(--qk-size-caption);line-height:var(--qk-line-body)}   /* 14 / 1.35 = 18.9, the golden's inline 14px; the kit's 15 read 20.3 and lifted the sheet 2 px */
/* a page's display title inset like the golden's (Office-Package: .disp.t style="padding:4px 4px 0", 30 tall) */
.qk-display--inset{padding:4px 4px 0}
/* a card's 14 sub-line with no inset (Office-Package: .sub style="font-size:15px" under each link) */
.qk-sub--sm{font-size:var(--qk-size-caption);line-height:var(--qk-line-body)}
/* the 13 line under a sheet's button (Renter-MaintInfo: 'Section 6.7.3 · page 367' at 17.5) */
.qk-sub--small{font-size:var(--qk-size-small);line-height:var(--qk-line-body)}
/* in a sheet, what follows an eyebrow pulls up 6 (Renter-MaintInfo: the title and the second prose both mt -6 after their eyebrow) */
.qk-sheet .qk-eyebrow+.qk-prose{margin-top:-6px}
a.qk-sub--link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.qk-muted{color:var(--qk-ink-2)}
.qk-prose{font-size:var(--qk-size-name);line-height:var(--qk-line-prose);color:var(--qk-ink-2)}
.qk-credit{
  flex:none;height:14px;margin:var(--qk-space-1) 0 6px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--qk-font-body);
  font-size:var(--qk-size-credit);font-weight:var(--qk-weight-semi);line-height:1;
  letter-spacing:var(--qk-track-credit);text-transform:uppercase;
  color:var(--qk-ink-3);opacity:.7;
}
.qk-credit b{font-weight:var(--qk-weight-semi)}
/* Astra's credit is the one line; a second span (the copyright, kept in the markup) does not draw */
.qk-credit>span+span{display:none}

/* ---------------------------------------------------------------------
   5 · Cards and rows. One card per list item, air between them.
   A card is: name, one sub-line, one pill or none, the ring-i.
   ------------------------------------------------------------------ */
.qk-card{
  background:var(--qk-card);border-radius:var(--qk-radius-card);
  padding:var(--qk-space-4);display:flex;flex-direction:column;
  gap:var(--qk-space-2);
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
}
.qk-card--flush{padding:0}
.qk-card--loading{gap:var(--qk-air)}
/* the centred card's rhythm is the goldens' (Office-Crews / Renter-Rigging: padding 28 20 24, gap 8, the title 6 under the tile, the act 8 under the line) */
.qk-card--centred{align-items:center;gap:var(--qk-space-2);padding:28px 20px 24px}
.qk-card--centred>.qk-btn{margin-top:var(--qk-space-2)}
.qk-card--hero{
  flex-direction:row;align-items:center;gap:var(--qk-space-3);
  padding:var(--qk-space-3) var(--qk-space-4) var(--qk-space-3) 14px;
}
/* the quiet office's card — "Nothing needs you today" — is the hero strip
   on the plain card's 16 all round (Office-TodayQuiet.html: .card
   style="flex-direction:row;align-items:center;gap:12px;padding:16px"),
   where the detail screens' hero (CraneLight, Office-SiteCard,
   Office-ClientCard) is 12 / 16 / 12 / 14. De-drift pass, cohort 2. */
.qk-card--hero.qk-card--calm{padding:var(--qk-space-4)}
/* the card that is a control: the kit check square leading one sentence,
   the whole card the tap (goldens/Renter-Start.html:130 and
   Renter-Sign.html:126: .card style="flex-direction:row;align-items:center;
   gap:12px" > .chk + .prose 15px ink). A <button class="qk-card qk-card--check">
   - the browser's button dress comes off here, so the screen adds no CSS.
   Cohort 9, 5 Sep 2026. */
.qk-card--check{
  flex-direction:row;align-items:center;gap:var(--qk-space-3);
  width:100%;text-align:left;border:0;appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* the check card's sentence is 15 (Renter-Sign / CheckLight: `.prose style="font-size:15px"`), so the golden's two lines stay two */
.qk-card--check .qk-prose{color:var(--qk-ink);font-size:15px}
/* the check's item card: the question, its ring-ⓘ and Pass · Fail · N/A on
   12 / 16 / 12 (goldens/CheckLight.html:126, CheckDark.html: .card
   style="gap:8px;padding:12px 16px 12px"). Cohort 9, 5 Sep 2026. */
.qk-card--item{padding:12px var(--qk-space-4)}
/* the item's question wraps at the body line (CheckLight: 16px/600 with no tighter line), so its head reads 40 with the hint */
.qk-card--item .qk-name--wrap{line-height:var(--qk-line-body)}
/* the card of acts: a line about the thing, then its buttons, 10 apart on
   14 / 16 (goldens/CraneLight.html Site access: .card style="gap:10px;
   padding:14px 16px"; every Renter-Maint* card the same). Composition
   de-drift, 5 Sep 2026. */
.qk-card--acts{padding:14px var(--qk-space-4);gap:var(--qk-air)}
/* the board's open check — the card the golden opens under a check: 12 /
   14 / 14 / 16, its lines 10 apart; the body inside it (the entry) keeps
   the same 10 with no padding of its own (goldens/Office-VisitBoard.html:132
   `.card style="gap:10px;padding:12px 14px 14px 16px"`). Composition
   de-drift, 5 Sep 2026. */
.qk-card--entry{padding:12px 14px 14px 16px;gap:var(--qk-air)}   /* Office-VisitBoard: the open item's card, 16 at the left */
.qk-card--entry.qk-card--entry-flush{padding-left:14px}   /* Renter-MaintOpen: 12 14 14 — flush with its rows' 14 */
.qk-card--entry .qk-area{min-height:64px}   /* Renter-MaintOpen: the note box 64 (.area.ink style="min-height:64px") */
.qk-card--entry .qk-name{line-height:1.3}   /* Renter-MaintOpen: the open card's name line 20.9 (16 at 1.3) over its 18.9 sub; no token carries 1.3 */
.qk-card--entry>.qk-card__body{padding:0;gap:var(--qk-air)}
/* the stat card: the one big number and its caption, a smaller fact on
   the right (Today's tile, drawn only when the number is above zero) */
.qk-card--stat{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:18px 20px}
.qk-stat__main,.qk-stat__side{display:flex;flex-direction:column;gap:6px}
.qk-stat__side{align-items:flex-end;text-align:right}
.qk-stat__cap{font-size:var(--qk-size-small)}
/* THE GROUPED LIST (Sam, 9 Sep 2026, ChatGPT's settings in hand: "This looks so nice and clean
   compared to ours. Why?"). A list is ONE card per group: the rows sit inside it with a hairline
   between them, no card, no shadow and no gap of their own; the icon is a plain line drawing,
   no grey tile; the name is one line at 17 regular; a sub-line only where it changes what you
   do; on the right a chevron or a grey value, never a button. A row outside a group keeps its
   own card. */
.qk-rows{
  display:flex;flex-direction:column;gap:0;
  background:var(--qk-card);border-radius:var(--qk-radius-card);
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
  overflow:hidden;
}
.qk-rows .qk-row{position:relative;background:transparent;border-radius:0;box-shadow:none;min-height:var(--qk-row);padding:10px 20px;gap:10px}   /* ChatGPT, measured: 51 tall, 20 in, the icon 24 then 10 to the name */   /* Material: one line 56, two lines ~68; Apple: 16 from the edge */
.qk-rows>.qk-row+.qk-row::before,.qk-rows>*+*>.qk-row:first-child::before,.qk-rows>*+.qk-row::before,.qk-rows>.qk-row+*>.qk-row:first-child::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:1px;
  background:var(--qk-rule);pointer-events:none;
}
.qk-rows .qk-row--tile::before{left:54px}
/* A FIELD IN A GROUP IS A ROW, NOT A TILE (Sam, 18 Sep 2026: "Why are they all joined like that?"): inside .qk-rows a field
   drops its own corners and shadow and takes the group's hairline, on every screen that groups fields */
.qk-rows>.qk-field,.qk-rows>*>.qk-field:only-child{border-radius:0;box-shadow:none;background:transparent}
.qk-rows>.qk-field+.qk-field::before,.qk-rows>*+.qk-field::before,.qk-rows>.qk-field+*>.qk-field:first-child::before,.qk-rows>.qk-field+*::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:var(--qk-rule);pointer-events:none;
}
.qk-rows>.qk-field{position:relative}
.qk-rows .qk-tile{width:24px;height:24px;border-radius:0;background:transparent;color:var(--qk-ink)}
.qk-rows .qk-tile .qk-i{width:22px;height:22px;stroke-width:1.6}
.qk-rows .qk-tile--crane .qk-i{width:24px;height:24px}
.qk-rows .qk-tile--ink,.qk-rows .qk-tile--ok{background:transparent;color:var(--qk-ink)}
.qk-rows .qk-row__name{font-weight:var(--qk-weight-semi,600)}   /* a row's name 600 on every list (the one kit, 29 Sep 2026: row names on cards 17/600) */
.qk-rows .qk-row__value{font-weight:var(--qk-weight-regular,400);color:var(--qk-ink-3)}
.qk-rows .qk-row__sub{font-size:var(--qk-size-sub)}
.qk-row__sub--wrap{white-space:normal;overflow:visible;text-overflow:clip}   /* audit 30: a sub-line that says something reads whole (subWrap) */
/* a fold: a row with its open detail beneath it; the row pins under the
   header while the fold is open, so the name stays on screen and folds it */
.qk-fold{display:flex;flex-direction:column;gap:var(--qk-air)}
.qk-fold--open>.qk-row{position:sticky;top:calc(var(--qk-safe-top) + var(--qk-header-h));z-index:3}
.qk-fold--open>.qk-row .qk-chev{transform:rotate(90deg)}
.qk-chev{transition:transform var(--qk-duration) var(--qk-ease)}
.qk-rows--tight{gap:0}

.qk-row{
  display:flex;align-items:center;gap:var(--qk-space-3);
  min-height:var(--qk-row);
  padding:var(--qk-air) var(--qk-space-4);
  background:var(--qk-card);border-radius:var(--qk-radius-card);
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
  width:100%;text-align:left;border:0;font-family:inherit;color:inherit;
}
.qk-row--tile{min-height:var(--qk-row-tile);padding:var(--qk-space-3) 14px}
/* the compact line: a 44 tile in 6 px, 56 tall, 14 each side - the crane
   line over the daily check's four steps (goldens/Renter-Start.html:123,
   CheckLight.html:123, Renter-Review.html:123, Renter-Sign.html:123:
   .row style="min-height:56px;padding:6px 14px"). Cohort 9, 5 Sep 2026. */
.qk-row--compact{min-height:var(--qk-row);padding:6px 14px}
.qk-row--section{min-height:64px;padding:var(--qk-air) 14px}
.qk-row--switch{min-height:var(--qk-row);padding:var(--qk-space-2) 14px var(--qk-space-2) var(--qk-space-4)}
.qk-row__main{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
/* the name over its sub-line with no 3 between — the golden's plain text
   block on a card's head line (goldens/Office-VisitBoard.html:133, the open
   check: 39.8 tall, where the row's `.main` gap gives 42.8). Composition
   de-drift, 5 Sep 2026. */
.qk-row__main--flush{gap:0}
.qk-row__name{
  font-size:var(--qk-size-row);font-weight:var(--qk-weight-regular,400);
  letter-spacing:0;color:var(--qk-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qk-row__name--wrap{
  white-space:normal;text-overflow:clip;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-height:1.25;
}
.qk-row__sub{
  font-size:var(--qk-size-caption);color:var(--qk-ink-3);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* the 13 contact line under a person's role (Self-PeopleLight: .sub 13px, one line) */
.qk-row__sub--sm{font-size:var(--qk-size-small)}
/* a live figure riding in a sub-line (the menu's "12 cranes · 7 on rent"):
   the number is the part being read, so it is set upright, in ink, and
   tabular so a column of them does not jitter (reskin, cohort 6) */
.qk-row__sub em{
  font-style:normal;font-weight:var(--qk-weight-semi);color:var(--qk-ink);
  font-variant-numeric:tabular-nums;
}
/* a line for a screen reader only (a crane's Erected / On the ground) */
.qk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a mini button, or a line of them, riding on a row */
.qk-row>.qk-btn--mini,.qk-row>.qk-btn-row{flex:none}
.qk-row>.qk-btn-row>.qk-btn--mini{width:auto}
/* a control too long to ride beside the words takes its own line beneath
   them, hard right where a thumb expects it */
.qk-row--stack{flex-wrap:wrap;row-gap:var(--qk-space-2)}
.qk-row__acts{flex-basis:100%;display:flex;justify-content:flex-end;gap:var(--qk-space-2)}
.qk-row__acts .qk-btn--mini{width:auto}
a.qk-btn{text-decoration:none}
.qk-row__value{
  font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);
  color:var(--qk-ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.qk-hero__cap{font-size:var(--qk-size-tiny);color:var(--qk-ink-3)}
.qk-name{
  font-size:var(--qk-size-name);font-weight:var(--qk-weight-semi);
  letter-spacing:var(--qk-track-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qk-name--wrap{white-space:normal;overflow:visible;text-overflow:clip;line-height:var(--qk-line-tight)}
/* the name on a card's line wraps at the body's own line-height, never
   clipped (goldens/CraneLight.html Site access: a plain 16 / 600 div over
   the sub-line, 21.6 tall; the row's clamped `.n.wrap` is the 1.25 above).
   Composition de-drift, 5 Sep 2026. */
.qk-name--flow{white-space:normal;overflow:visible;text-overflow:clip}

/* ---------------------------------------------------------------------
   6 · The tile. A crane drawing or a section icon on a 44 square.
   ------------------------------------------------------------------ */
.qk-tile{
  width:var(--qk-tile-size);height:var(--qk-tile-size);flex:none;
  border-radius:var(--qk-radius-tile);background:var(--qk-tile);
  display:flex;align-items:center;justify-content:center;
  color:var(--qk-tile-ink);
}
.qk-tile .qk-i{width:20px;height:20px}
.qk-tile--crane .qk-i{width:30px;height:30px}
.qk-tile--ink{background:var(--qk-primary-bg);color:var(--qk-primary-fg)}
.qk-tile--ok{background:var(--qk-ok-bg);color:var(--qk-ok)}
.qk-tile--bad{background:var(--qk-bad-bg);color:var(--qk-bad)}   /* a day with an issue on the crew's logbook (L2, 19 Sep 2026) */

/* ---------------------------------------------------------------------
   7 · Pills, chips, the live marker.
   ------------------------------------------------------------------ */
.qk-pill{
  display:inline-flex;align-items:center;flex:none;
  font-size:var(--qk-size-pill);font-weight:var(--qk-weight-semi);
  padding:var(--qk-space-1) 10px;
  border-radius:var(--qk-radius-pill);white-space:nowrap;
}
.qk-pill--ok{background:var(--qk-ok-bg);color:var(--qk-ok)}
.qk-pill--warn{background:var(--qk-warn-bg);color:var(--qk-warn)}
.qk-pill--bad{background:var(--qk-bad-bg);color:var(--qk-bad)}
.qk-pill--quiet{background:var(--qk-soft);color:var(--qk-ink-2)}

.qk-chips--sort{margin-top:-4px}.svc__by{margin:2px 0 10px}
.dk-table tr.dk-group td{padding-top:14px;padding-bottom:6px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--qk-ink-3);background:none}
.qk-chips{display:flex;gap:var(--qk-space-2);flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:var(--qk-space-4)}   /* a chip row scrolls sideways inside itself, never the page (the busy rig, 14 Sep 2026) */
.qk-chips::-webkit-scrollbar{display:none}
.qk-chips--wrap{flex-wrap:wrap}
.qk-chip{
  height:var(--qk-chip);padding:0 14px;border:0;
  border-radius:var(--qk-radius-pill);display:inline-flex;align-items:center;
  gap:6px;font-family:inherit;
  font-size:var(--qk-size-caption);font-weight:var(--qk-weight-medium);
  color:var(--qk-ink-2);background:var(--qk-card);
  box-shadow:inset 0 0 0 1px var(--qk-edge);
  white-space:nowrap;cursor:pointer;
}
.qk-card .qk-chip:not(.is-on):not(.qk-chip--on){background:var(--qk-field)}   /* audit 27: 'Off' on a white card was bare text in light */
.qk-chip--on{
  background:var(--qk-chip-on-bg);color:var(--qk-chip-on-fg);
}
.qk-chip .qk-i{width:18px;height:18px}

.qk-live{
  width:var(--qk-space-2);height:var(--qk-space-2);flex:none;
  border-radius:50%;background:var(--qk-accent);
  box-shadow:0 0 0 var(--qk-space-1) color-mix(in srgb, var(--qk-accent) 18%, transparent);
}

/* ---------------------------------------------------------------------
   8 · The ring-i. A 44 target that opens the note behind it.
   ------------------------------------------------------------------ */
.qk-info{
  width:var(--qk-tap);height:var(--qk-tap);flex:none;
  margin:-10px -12px -10px 0;
  display:flex;align-items:center;justify-content:center;
  color:var(--qk-ink-3);background:transparent;border:0;padding:0;
  cursor:pointer;
}
.qk-info .qk-i{width:22px;height:22px}
.qk-info--tight{margin:-6px -8px -6px 0}

/* ---------------------------------------------------------------------
   9 · Buttons. One system: pill radius, two heights (52 full / 44 mini),
   three colourings (ink primary, quiet outline, red destructive).
   Full width is a width, not a fourth style.
   ------------------------------------------------------------------ */
.qk-btn{
  height:var(--qk-btn);width:100%;border:0;
  border-radius:var(--qk-radius-pill);
  display:flex;align-items:center;justify-content:center;gap:var(--qk-space-2);
  font-family:inherit;font-size:var(--qk-size-body);
  font-weight:var(--qk-weight-semi);letter-spacing:var(--qk-track-tight);
  padding:0 20px;white-space:nowrap;cursor:pointer;
}
.qk-btn--mini{height:var(--qk-btn-mini);font-size:var(--qk-size-sub);width:auto;padding:0 18px}
/* a mini that spans its card — the 44 primary at the foot of an open
   check (goldens/Office-VisitBoard.html: `btn p m style="width:100%"`).
   Composition de-drift, 5 Sep 2026. */
.qk-btn--full{width:100%}
/* a quiet button riding in a chip row or on a list row ("Add a link",
   "Resend") is chip-height — the signed Self-EditorLight / Self-SentLight
   goldens draw it `class="btn s m" style="height:34px;font-size:15px;
   padding:0 14px"` (icon 18, 6 before the word); beside a person's name
   inside a card ("Send a test") it is 36 (Self-AlertOpenLight, the same
   inline style at 36). Both keep --mini so a screen's mini anchor still
   finds them (de-drift pass, C4). */
.qk-btn--chip{height:var(--qk-chip);font-size:var(--qk-size-caption);padding:0 14px;gap:6px}
.qk-btn--compact{height:36px;font-size:var(--qk-size-caption);padding:0 14px;gap:6px}
.qk-btn--chip .qk-i,.qk-btn--compact .qk-i{width:18px;height:18px}
.qk-btn--primary{background:var(--qk-primary-bg);color:var(--qk-primary-fg);box-shadow:var(--qk-shadow-primary)}
.qk-btn--quiet{background:transparent;color:var(--qk-ink);box-shadow:inset 0 0 0 1.5px var(--qk-rule)}
.qk-btn--danger{background:var(--qk-bad);color:var(--qk-bad-fg)}
.qk-btn--off,.qk-btn[disabled]{background:var(--qk-soft);color:var(--qk-ink-3);box-shadow:none;cursor:default}
.qk-btn--ok-on{background:var(--qk-ok-bg);color:var(--qk-ok);box-shadow:inset 0 0 0 1.5px var(--qk-ok)}
.qk-btn--bad-on{background:var(--qk-bad-bg);color:var(--qk-bad);box-shadow:inset 0 0 0 1.5px var(--qk-bad)}
.qk-btn--accepted,.qk-btn--accepted[disabled]{background:var(--qk-ok);color:var(--qk-ok-fg);box-shadow:none;cursor:default}
.qk-btn--accepted .qk-i{width:22px;height:22px;stroke-width:2.5}
.qk-btn--grow{flex:1;width:auto}
.qk-btn--start{align-self:flex-start}
.qk-btn .qk-i{width:20px;height:20px}

.qk-seg{display:flex;gap:var(--qk-space-2)}
.qk-seg .qk-btn{flex:1;width:auto;padding:0}
.qk-btn-row{display:flex;gap:var(--qk-space-2)}
/* a line of actions that may wrap: every button shares the line evenly,
   and the More disclosure (when there is one) drops to its own line */
.qk-btn-row--wrap{flex-wrap:wrap}
.qk-btn-row--wrap>.qk-btn{flex:1 1 auto;width:auto}
.qk-btn-row>.qk-more{flex:1 1 100%}
/* a line of two that fills the card: each button grows from nothing
   (flex-basis 0), so the longer word takes what it needs and the other
   takes the rest — goldens/CraneLight.html Site access: `.btn s m
   style="flex:1"` × 2 in a `display:flex;gap:8px` line (175 / 143 at 390).
   Composition de-drift, 5 Sep 2026. */
.qk-btn-row--fill>.qk-btn{flex:1 1 0%;width:auto}
/* the quiet red: a destructive act ON A PAGE wears the quiet outline with
   the red word — the filled red belongs to the confirm alone (goldens v2,
   F1: CraneLight End access, Office-VisitBoard Found a problem,
   Office-SiteCard Finish site, Office-Certificate Remove — `btn dq m`).
   Composition de-drift, 5 Sep 2026. */
.qk-btn--danger-quiet{background:transparent;color:var(--qk-bad);box-shadow:inset 0 0 0 1.5px var(--qk-rule)}

/* ---------------------------------------------------------------------
   10 · The primary-action foot. One primary action per screen, full
   width, fixed at the bottom, always the same button.
   ------------------------------------------------------------------ */
.qk-foot{
  flex:none;display:flex;flex-direction:column;gap:var(--qk-air);
  padding:var(--qk-space-4) var(--qk-space-4) var(--qk-safe-bottom);
}

/* ---------------------------------------------------------------------
   11 · The bar. Frosted, glued to the bottom, a hairline on top, the
   active tab in the soft gold-tinted pill, the centre + as the disc.
   ------------------------------------------------------------------ */
.qk-bar{
  position:absolute;left:0;right:0;bottom:var(--qk-safe-bottom);z-index:2;
  font-family:var(--qk-font-body);
  height:var(--qk-bar-h);
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:var(--qk-space-2) 18px 0;
  background:var(--qk-bar);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 -0.5px 0 var(--qk-bar-line);
}
/* the frosted fill carries on behind the home indicator */
.qk-bar::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:var(--qk-safe-bottom);background:var(--qk-bar);
}
.qk-tab{
  display:flex;flex-direction:column;align-items:center;gap:var(--qk-space-1);
  width:var(--qk-tab-w);border:0;background:transparent;padding:0;
  font-family:inherit;cursor:pointer;
  color:var(--qk-ink-3);font-size:var(--qk-size-tab);
  font-weight:var(--qk-weight-medium);letter-spacing:.01em;
}
.qk-tab__pill{
  display:flex;align-items:center;justify-content:center;
  width:var(--qk-tab-pill-w);height:var(--qk-tab-pill-h);
  border-radius:var(--qk-radius-pill);font-weight:400;
}
/* THE BAR (Sam, 9 Sep 2026: "the menu bar looks like garbage"): no pill behind the
   chosen tab. Four thin icons; the chosen one goes ink and a shade heavier, its label
   with it. A frosted bar, a hairline, nothing else. */
.qk-tab--on{color:var(--qk-ink);font-weight:var(--qk-weight-semi)}
.qk-tab--on .qk-tab__pill{background:transparent}
.qk-tab__pill .qk-i{width:27px;height:27px;stroke-width:1.6}
.qk-tab--on .qk-tab__pill .qk-i{stroke-width:2.1}

/* the phone's home indicator — drawn out of flow, so it never moves the
   button above it; the foot's own bottom padding holds the space */
.qk-home{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:var(--qk-home-h);
  display:flex;align-items:center;justify-content:center;
}
.qk-home i{width:134px;height:5px;border-radius:3px;background:var(--qk-ink);opacity:.25}

/* ---------------------------------------------------------------------
   12 · Fields and inputs.
   ------------------------------------------------------------------ */
.qk-field{
  display:flex;justify-content:space-between;align-items:center;
  min-height:var(--qk-field);gap:var(--qk-space-3);
  padding:var(--qk-air) var(--qk-space-4);
  background:var(--qk-card);border-radius:var(--qk-radius-card);
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
}
.qk-field__label{font-size:var(--qk-size-sub);color:var(--qk-ink-3);flex:none}
.qk-field__value{
  font-size:var(--qk-size-body);font-weight:var(--qk-weight-medium);
  color:var(--qk-ink);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:0;background:transparent;font-family:inherit;min-width:0;
}
.qk-field__value--empty{color:var(--qk-ink-3);font-weight:400}
.qk-field--edit .qk-field__value{position:relative;padding-right:2px}
.qk-field--edit .qk-field__value::after{
  content:"";display:inline-block;width:1.5px;height:20px;
  background:var(--qk-ink);vertical-align:-4px;margin-left:2px;
}
.qk-input{
  height:var(--qk-row);border-radius:var(--qk-radius-field);
  background:var(--qk-field);box-shadow:inset 0 0 0 1.5px var(--qk-rule);
  display:flex;align-items:center;justify-content:center;gap:var(--qk-space-3);
  font-size:var(--qk-size-number);letter-spacing:.2em;color:var(--qk-ink);
  font-variant-numeric:tabular-nums;
  border:0;font-family:inherit;text-align:center;width:100%;
}
.qk-input .qk-caret{width:1.5px;height:26px;background:var(--qk-ink);margin-left:-8px}
input.qk-input{display:block;padding:0;line-height:var(--qk-row);appearance:none;-webkit-appearance:none}
.qk-input::placeholder{color:var(--qk-ink-3);letter-spacing:.2em;opacity:1}
.qk-input:focus{outline:none;background:var(--qk-on-pill)}
.qk-input:focus-visible{outline:none}
.qk-input--text{justify-content:flex-start;text-align:left;padding:0 var(--qk-space-4);font-size:var(--qk-size-body);letter-spacing:0}
input.qk-input--text{padding:0 var(--qk-space-4)}
.qk-input--text::placeholder{letter-spacing:0}
/* the search box is a button's height, 52, not the PIN box's 56 — the
   signed search sheet draws it so (Office-Search.html: .input style="…
   height:52px"); the name card's text box keeps 56 (Renter-NameCard). */
.qk-input--search{height:var(--qk-btn)}
input.qk-input--search{line-height:var(--qk-btn)}
.qk-input--bad,.qk-input--bad:focus{box-shadow:inset 0 0 0 1.5px var(--qk-bad)}
.qk-area{
  min-height:84px;border-radius:var(--qk-radius-field);
  background:var(--qk-field);box-shadow:inset 0 0 0 1.5px var(--qk-rule);
  padding:var(--qk-space-3) 14px;
  font-size:var(--qk-size-name);color:var(--qk-ink-3);
  line-height:var(--qk-line-body);font-family:inherit;border:0;width:100%;
}
.qk-area--filled{color:var(--qk-ink)}
/* THE CHIPPED WORDS BOX (corrective pass, 3 Sep — the signed Self-Editor
   goldens): a contenteditable presentation whose {placeholders} stand as
   quiet grey chips; the value underneath keeps the braces byte for byte.
   .qk-words--line is the one-line variant (a subject, a push title). */
.alxwords{white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.alxwords:focus{outline:none;background:var(--qk-on-pill)}
.alxwords--line{min-height:0;padding-top:12px;padding-bottom:12px;white-space:normal}
.alxtok{
  display:inline-block;vertical-align:baseline;
  background:var(--qk-tile);color:var(--qk-ink-2);
  border-radius:8px;padding:1px 8px;margin:0 1px;
  font-size:.92em;line-height:1.45;white-space:nowrap;user-select:none;
}
/* A time field whose printed value is the golden's clock ("9:00 am") —
   the native time input still does the picking, invisible over the row
   (corrective pass, round 2). */
.alxtimef{position:relative}
.alxtimef__in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;margin:0;padding:0;cursor:pointer}
/* a note in a field's clothes (QK.field({textarea})): the box wraps its own
   words. The base .qk-field__value is a one-line right-aligned value with
   white-space:nowrap — on a textarea that nowrap gave a long placeholder an
   intrinsic width wider than a phone, and a mobile viewport quietly grew to
   fit it (found on the crews review, reskin cohort 6). */
textarea.qk-field__value--area{
  white-space:pre-wrap;overflow:auto;text-overflow:clip;text-align:left;width:100%;
  min-height:84px;border-radius:var(--qk-radius-field);
  background:var(--qk-field);box-shadow:inset 0 0 0 1.5px var(--qk-rule);
  padding:var(--qk-space-3) 14px;font-size:var(--qk-size-name);
  line-height:var(--qk-line-body);resize:none;font-weight:400;
}
textarea.qk-field__value--area::placeholder{color:var(--qk-ink-3);opacity:1}
textarea.qk-field__value--area:focus{outline:none;background:var(--qk-on-pill)}

/* the switch. It saves itself, so a screen of switches has no Save. */
.qk-switch{
  width:var(--qk-switch-w);height:var(--qk-switch-h);flex:none;
  border-radius:var(--qk-radius-pill);background:var(--qk-rule);
  position:relative;border:0;padding:0;cursor:pointer;
  transition:background var(--qk-duration) var(--qk-ease);
}
.qk-switch i{
  position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:var(--qk-knob);box-shadow:var(--qk-knob-shadow);
  transition:left var(--qk-duration) var(--qk-ease);
}
.qk-switch--on{background:var(--qk-ok)}
.qk-switch--on i{left:23px}

.qk-check{
  width:28px;height:28px;flex:none;border-radius:var(--qk-radius-check);
  box-shadow:inset 0 0 0 1.5px var(--qk-rule);
}
.qk-check--on{
  background:var(--qk-ok);box-shadow:none;color:var(--qk-primary-fg);
  display:flex;align-items:center;justify-content:center;
}
.qk-check--on .qk-i{width:18px;height:18px;stroke-width:2.25}

/* ---------------------------------------------------------------------
   13 · The four states. Every screen ships all four.
   ------------------------------------------------------------------ */
.qk-skeleton{height:14px;border-radius:7px;background:var(--qk-skeleton)}
.qk-banner{
  display:flex;align-items:center;gap:var(--qk-air);
  padding:var(--qk-air) 14px;border-radius:var(--qk-radius-box);
  background:var(--qk-warn-bg);color:var(--qk-warn);
  font-size:var(--qk-size-caption);font-weight:var(--qk-weight-medium);
  line-height:1.3;
}
.qk-banner .qk-i{width:var(--qk-icon-sm);height:var(--qk-icon-sm)}
button.qk-banner{width:100%;border:0;font-family:inherit;text-align:left;cursor:pointer}
.qk-empty__title{font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);margin-top:6px}
.qk-empty__line{text-align:center}
.qk-empty__tile{display:flex}
.qk-error__title{
  font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);
  color:var(--qk-bad);
}
.qk-redbox{
  border-radius:var(--qk-radius-box);background:var(--qk-bad-bg);
  padding:var(--qk-space-3) 14px;
  display:flex;flex-direction:column;gap:6px;
}
.qk-redbox__label{
  font-size:var(--qk-size-pill);font-weight:var(--qk-weight-bold);
  color:var(--qk-bad);
}
.qk-redbox__text{font-size:var(--qk-size-sub);color:var(--qk-ink);line-height:var(--qk-line-body)}

/* ---------------------------------------------------------------------
   14 · The scrim, the sheet, the dialog, the toast.
   Destructive always confirms.
   ------------------------------------------------------------------ */
.qk-scrim{position:absolute;inset:0;background:var(--qk-scrim);z-index:5;border:0}
.qk-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:var(--qk-ground);
  border-radius:var(--qk-radius-sheet) var(--qk-radius-sheet) 0 0;
  /* the bottom is the sheet's own 14 gap and then the phone's home band:
     every signed sheet golden ends `…<button class="btn s">…</button>
     <div class="home">` inside a .sheet{gap:14px} (goldens/Office-JobDetails.html,
     Office-YourData.html), so its last button ends at 800 (748 + 52), not
     at the band's edge. The kit padded the band alone until the de-drift
     pass (4 Sep 2026, C11) and every sheet's Close sat 14 low. */
  padding:12px var(--qk-space-4) calc(14px + var(--qk-safe-bottom));   /* the golden .sheet{padding:12px 16px 0}: at 10 every sheet stood 2 px low (7 Sep 2026) */
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--qk-shadow-sheet);
  /* a full sheet rises to the status band plus the body's air — Office-Menu
     stands at 64 (54 + 10) with 780 of sheet; 88% capped it at 743 (top 101)
     and the menu scrolled 37 px of rows the golden shows (de-drift pass). */
  max-height:calc(100% - var(--qk-safe-top) - var(--qk-air));overflow-y:auto;
}
/* the quiet button after a sheet's rows takes a 2 px lead: every list sheet
   golden draws `<div class="rows">…</div><button class="btn s"
   style="margin-top:2px">Cancel</button>` (SheetLight.html:135,
   SheetDark.html, Renter-Plus.html:141, Office-Search.html, Tablet-P-Sheet.html);
   a sheet whose button follows something else (Office-JobDetails, Office-SignSheet,
   Office-YourData) draws none. Cohort 9, 5 Sep 2026. */
.qk-sheet>.qk-rows+.qk-btn--quiet{margin-top:2px}
/* THE SHEET'S KICKER AND TITLE (Office-SignSheet, Office-Enquiry's card, 6 Sep 2026): the goldens draw the title 6 closer
   to the eyebrow above it (`.disp.t style="margin-top:-6px"`) and a sheet's sentence at 15 (`.prose style="font-size:15px"`) */
.qk-sheet>.qk-eyebrow+.qk-display--title{margin-top:-6px}
.qk-sheet>.qk-prose{font-size:15px}
/* an empty line in a sheet (an error line waiting to speak) takes no room and no gap — the golden's sheet ends at its last button */
.qk-sheet>.qk-sub:empty{display:none}
.qk-grab{
  width:36px;height:5px;border-radius:3px;
  background:var(--qk-rule);align-self:center;flex:none;
}
/* THE SHEET'S X (Sam, 9 Sep 2026: "the close button is awful"): a round white button
   at the top right, as the apps he uses close a sheet. No Close at the bottom. */
.qk-sheet__x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  border:0;padding:0;background:var(--qk-card);color:var(--qk-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(28,36,48,.08),0 2px 8px rgba(28,36,48,.06);
}
.qk-sheet__x .qk-i{width:16px;height:16px;stroke-width:2.2}
.qk-dialog{
  position:absolute;left:var(--qk-space-5);right:var(--qk-space-5);
  top:300px;z-index:6;   /* where every signed dialog sits: the golden .dlg{top:300px} (DialogLight, Astra's shape, 7 Sep 2026) */
  background:var(--qk-card);border-radius:var(--qk-radius-sheet);
  box-shadow:var(--qk-shadow-dialog),inset 0 0 0 1px var(--qk-edge);
  padding:var(--qk-space-5) 20px var(--qk-space-4);
  display:flex;flex-direction:column;gap:var(--qk-space-2);
}
.qk-dialog__line{font-size:var(--qk-size-name);margin-bottom:var(--qk-air)}
.qk-toast{
  position:absolute;left:var(--qk-space-5);right:var(--qk-space-5);bottom:110px;
  z-index:4;background:var(--qk-toast-bg);color:var(--qk-toast-fg);
  border-radius:var(--qk-radius-pill);padding:var(--qk-space-3) 18px;
  font-family:var(--qk-font-body);
  font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);line-height:var(--qk-line-body);
  text-align:center;box-shadow:var(--qk-shadow-primary);
  display:flex;align-items:center;justify-content:center;gap:var(--qk-space-3);
  pointer-events:none;
}
.qk-toast span{flex:1;min-width:0}
.qk-toast button{
  flex:none;background:none;border:0;padding:0;font:inherit;font-weight:var(--qk-weight-semi);
  color:var(--qk-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;pointer-events:auto;
}

/* ---------------------------------------------------------------------
   15 · Motion is a settle. One duration, one ease, transform and
   opacity only. Reduced motion is honoured by the token itself.
   ------------------------------------------------------------------ */
.qk-enter{animation:qk-fade var(--qk-duration) var(--qk-ease) both}
.qk-enter-up{animation:qk-up var(--qk-duration) var(--qk-ease) both}
.qk-enter-pop{animation:qk-pop var(--qk-duration) var(--qk-ease) both}
.qk-leave{animation:qk-fade var(--qk-duration) var(--qk-ease) reverse both}
.qk-leave-down{animation:qk-up var(--qk-duration) var(--qk-ease) reverse both}
.qk-leave-pop{animation:qk-pop var(--qk-duration) var(--qk-ease) reverse both}
.qk-leave-up{animation:qk-lift var(--qk-duration) var(--qk-ease) both}
@keyframes qk-fade{from{opacity:0}to{opacity:1}}
@keyframes qk-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes qk-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes qk-lift{to{opacity:0;transform:translateY(-14px) scale(.98)}}
@keyframes qk-nudge{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .qk-enter,.qk-enter-up,.qk-enter-pop,.qk-leave,.qk-leave-down,.qk-leave-pop,.qk-leave-up,
  .qk-door,.qk-door>*,.qk-door__foot,.qk-input--nudge{animation-duration:1ms;animation-delay:0ms}
  .qk-switch,.qk-switch i{transition-duration:1ms}
}

/* ---------------------------------------------------------------------
   16 · Small helpers a screen is allowed to use instead of writing CSS.
   ------------------------------------------------------------------ */
.qk-stack{display:flex;flex-direction:column;gap:var(--qk-space-5)}   /* BREATHING ROOM (Sam, 9 Sep 2026): groups stand 24 apart */
.qk-stack--tight{gap:var(--qk-space-2)}
.qk-stack--tight>.qk-section{margin-bottom:0}
@media (max-width:1279px){.bnd>.bnd__b{overflow-x:hidden}}   /* audit 66: a layer's body scrolls one way — phone and tablet only; at width the PAGE scrolls, and overflow-x on the body clipped the crane's form at its foot (second pass, slice 1) */
/* ONE HEADER OVER EVERY PAGE (Sam, 21 Sep 2026: "Also want the header showing everywhere... Make sure the header shows and functions the same as on
   all other pages"). On a phone the office's one header stands, fixed, over every pushed page (body.has-layer, set by the office): the page's own
   bar gives way, its content starts under the header and runs beneath it, and the header makes its move from the page's own scrolling.
   Fixed, nothing in it scrolls natively, so the search is carried up by --hp and the scroll-driven animations (which watch the window)
   stand down. The sheets and their scrim stand above it (the tokens' 90 and 91); the search's answers just under it. */
.qk-hdr__layermore{display:none}
@media (max-width:1023.98px){
  body.has-layer #opsHdr.qk-hdr--sticky.qk-hdr--brand{position:fixed;left:0;right:0;top:0;z-index:calc(var(--layer-z,80) + 2);pointer-events:none}
  body.has-layer #opsHdr>*{pointer-events:auto}
  body.has-layer #opsHdr .qk-hdr__title--brand,body.has-layer #opsHdr>button.qk-tap:first-child{position:static}
  body.has-layer #opsHdr .qk-hdr__search,body.has-layer #opsHdr .qk-hdr__date,body.has-layer #opsHdr #whoTap,body.has-layer #opsHdr .qk-hdr__title--brand,body.has-layer #opsHdr.qk-hdr--sticky.qk-hdr--brand::before{animation:none !important}
  body.has-layer #opsHdr .qk-hdr__search{transform:translateY(calc(var(--hp,0) * -54px))}
  body.has-layer #opsHdr.qk-hdr--sticky.qk-hdr--brand::before{top:0;bottom:calc(var(--hp,0) * 54px - var(--qk-space-6));opacity:1}
  body.has-layer-more #opsHdr .qk-hdr__layermore{display:flex;order:2;margin:0 -8px 0 0}
  body.has-layer-more #opsHdr .qk-hdr__search{margin-right:calc(var(--hx) * 44px);flex-basis:calc(100% - var(--hx) * (var(--hin) + 44px))}
  body.has-layer .bnd.qk-shell:not(#addCrane)>.qk-hdr,body.has-layer #ppOverlay>.qk-hdr{display:none}
  body.has-layer .bnd.qk-shell:not(#addCrane)>.bnd__b::before,body.has-layer #ppOverlay #ppScroll::before{content:"";display:block;flex:none;height:var(--ops-h,122px)}
  body.has-layer #ppOverlay #ppScroll::before{height:calc(var(--ops-h,122px) - var(--qk-safe-top))}
  #ppSheet.qk-scrim{z-index:calc(var(--layer-z,80) + 5)}   /* the reader's scroller already starts under the status bar, which --ops-h counts too (the whole-app polish, 26 Sep 2026: 54 px of gap on a notched phone) */
  /* UI PASS F6 (22 Sep 2026): Add a crane is a SHEET on a phone (audit 51) - its own title, grab bar and round X - never a pushed page under
     the office header; the header rule above had hidden its title and stood a blank band where the header would be */
  body.has-layer .omnisheet{z-index:calc(var(--layer-z,80) + 1);bottom:0}   /* a pushed page covers the bar at the foot, so the answers run to the foot too */
}
/* one title style (Sam, 12 Sep 2026): a pushed page's header title is empty at rest and fills on scroll; the big title stands in the content */
@media (max-width:1279px){
  .bnd.qk-shell>.qk-hdr .qk-hdr__title{opacity:0;transition:opacity var(--qk-duration) var(--qk-ease)}
  .bnd.qk-shell>.qk-hdr.is-lifted .qk-hdr__title{opacity:1}
  .bnd__bigtitle{margin:2px 0 8px;padding:0 4px}
}   /* audit 26: the section's -12 was drawn for a 24 stack; in a tight stack it pulled the card over the heading */
.qk-stack--flush{gap:var(--qk-space-1)}
.qk-stack--body{gap:var(--qk-body-gap)}   /* the body's own rhythm, on a host's column */
.qk-stack--cards{gap:var(--qk-body-gap-cards)}   /* Today's card stack (TodayLight: .body gap 14 where a list body is 12) */
/* the sheet's own rhythm, on a stack inside it: every signed sheet golden
   lays its blocks straight in the .sheet{gap:14px} (Office-Menu, Office-
   JobDetails, Office-YourData), with .h{margin-top:8px} on every heading —
   the first too. A host that fills a sheet through one box (#dayBody,
   #bnavGrid) lost that rhythm to the stack's 10 and the section's
   first-child rule, and its sheet stood 37 px short (de-drift pass). */
.qk-stack--sheet{gap:14px}
.qk-stack--sheet>.qk-section:first-child{margin-top:var(--qk-space-2)}
/* a sheet whose list opens with a heading (Office-Menu's sheetlist): the first heading sits flush at the top, later ones keep their 8 */
.qk-stack--sheet.qk-stack--sheet-flush>.qk-section:first-child{margin-top:0}
.qk-line{display:flex;align-items:center;gap:var(--qk-air)}
/* a card's head line (a kicker beside a pill) is as tall as what stands on it: the pill's 22.2 when one does
   (Office-Reader, "2 signed"), the eyebrow's 15.5 when none does (Renter-Reader) — measured 7 Sep 2026 */
.qk-line--between{justify-content:space-between}
.qk-grow{flex:1;min-width:0}
.qk-right{text-align:right}
.qk-hidden,[hidden]{display:none!important}

/* =====================================================================
   17 · The three widths — SIGNED (goldens v2, 5 Sep 2026; the wide pass).
   The phone (390) is the signed golden and its geometry is law. Tablet
   portrait (834 × 1194, Tablet-P-*), tablet landscape (1194 × 834,
   Tablet-L-*, Self-Tablet-*) and desktop (1440 × 900, Desktop-*,
   Self-Desktop-*) are signed too now — the same kit, the same tokens, laid
   out wider, and measured by the anatomy gate at each width (scripts/
   check-golden-anatomy.mjs; the anchors are gen.py's .rail / .pane.list /
   .pane.detail / .col2 / .foot.form / .measure, the kit names below).

   THE SIDEBAR LAW (Sam, 5 Sep 2026: "make sure sidebar is always used like
   this on desktop"): from 1024 up every office screen is rail + list +
   detail. The bar becomes the rail (qk-bar--adaptive), the section's
   column becomes the list pane (qk-pane--list), and whatever the section
   opens — a crane, a binder, the alerts — stands beside it in the detail
   pane (qk-pane--detail). On a tablet portrait the bar stays at the
   bottom; the list and the open item share the screen only while
   something is open. A pane's header is a leading title: 20 of air above,
   the title 20/700 left-aligned, Back hanging 12 into the gutter, and no
   empty left slot. Save follows its form (qk-foot--form) on the rail
   layouts — the phone's pinned foot stays on the phone and the tablet
   portrait. Every number is the golden's (goldens/gen.py CSS3).
   ===================================================================== */
/* the rail's own pieces — the mark, Today, the word Add, the credit — are
   drawn into the bar by the office and exist for the rail alone: hidden at
   every width until the rail shows them (1024 / 1280 below) */
.qk-rail__only,.qk-rail__word{display:none}
/* a field the phone's golden does not draw (the crane's Site, Tablet-P-Pair up) */
.qk-wide-only{display:none}
/* the site access card's buttons: on the phone and the tablet portrait the
   pair fills one line and End access stands alone beneath (CraneLight,
   Tablet-P-Pair) — the wrapper is invisible to the card's column */
.qk-acts{display:contents}
/* =====================================================================
   THE THREE WIDTHS (Astra's laws, Sam 7 Sep 2026: identical on phone,
   tablet and desktop).
   THE TABLET LAW (780 to 1279, both orientations): every screen is ONE
   full-width column, the phone's flow at the tablet's scale — rows 76
   tall with 17/15 type, fields 64, the bar at the bottom centred with
   the tabs 56 apart; a list beside its record exists only on the desktop.
   THE BUTTON LAW: at width a button keeps the phone's measure, 390,
   centred under the content it belongs to.
   THE DESKTOP (1280 up): the 240 rail with the seal and the company name,
   the sections as 44 rows, the credit at its foot; the content centred in
   1120 — one header over it all, the 390 list beside the fill column, the
   record's title as a display line in the fill column.
   ===================================================================== */
.qk-wide-only{display:none}
.qk-acts{display:contents}
@media (min-width:780px){
  .qk-shell--wide .qk-body,.qk-body--measure-tp{max-width:none;margin:0 auto;width:100%;padding-left:var(--qk-space-5);padding-right:var(--qk-space-5);gap:var(--qk-col-gap)}
  .qk-body--measure-tp>.qk-stack,.qk-pane__body>.qk-stack,.qk-stack--body,.qk-host .qk-stack--body{gap:var(--qk-col-gap)}   /* a wide column's blocks are 14 apart (Tablet-P-Today .column, Desktop-Pair .col); the phone's list body is 12 */
  /* the tablet's scale */
  /* .qk-host: a screen's own column that plays the body (the office's .ops>.wrap) and takes the tablet's scale with it */
  .qk-body .qk-row,.qk-pane__body .qk-row,.qk-host .qk-row{min-height:var(--qk-row-tile);padding:var(--qk-space-3) var(--qk-space-5)}
  .qk-body .qk-row--compact,.qk-host .qk-row--compact{height:var(--qk-row);min-height:0;padding:6px 14px}   /* the compact row is 56 at width even with a 15 sub-line inside (Tablet-P-Check .row 56, its main 45.2 centred) */
  .qk-host .qk-row--section,.qk-body .qk-row--section{min-height:64px;padding:var(--qk-air) 14px}   /* the settings' section rows keep the phone's 64 and 10/14 at every width (Tablet-P-Settings, Tablet-L-Settings, Desktop-Settings) */
  .qk-body .qk-row__sub,.qk-pane__body .qk-row__sub,.qk-host .qk-row__sub{font-size:var(--qk-size-sub)}
  .qk-body .qk-field,.qk-pane__body .qk-field,.qk-host .qk-field{min-height:64px;padding-top:0;padding-bottom:0;padding-left:var(--qk-space-5);padding-right:var(--qk-space-5);font-size:var(--qk-size-body)}
  .qk-rows--crane{gap:var(--qk-air)}
  .qk-field.qk-wide-only{display:flex}
  /* THE BUTTON LAW (Astra): at width a full button keeps the phone's measure, 390, centred under the content it
     belongs to; a pair shares that width. Minis, chips and compact buttons ride where they are. */
  .qk-btn:not(.qk-btn--mini):not(.qk-btn--chip):not(.qk-btn--compact):not(.qk-row>.qk-btn){box-sizing:border-box;width:100%;max-width:var(--qk-pane-btn-max);margin-left:auto;margin-right:auto;align-self:center}
  .qk-btn-row:not(.qk-row>.qk-btn-row){width:100%;max-width:var(--qk-pane-btn-max);margin-left:auto;margin-right:auto;align-self:center}
  .qk-btn-row>.qk-btn{max-width:none;margin:0}
  .qk-sheet .qk-btn:not(.qk-btn--mini):not(.qk-btn--chip):not(.qk-btn--compact):not(.qk-row>.qk-btn),.qk-sheet .qk-btn-row:not(.qk-row>.qk-btn-row){max-width:none}   /* a sheet's buttons fill the sheet (Tablet-P-Sheet: Cancel 568 in the 600 sheet); the law is the page's */
  .qk-foot{align-items:center}
  /* a full screen's pinned foot on a tablet pads 16 above the home band (Tablet-P-Check: the foot at 1080, Continue at 1096 of 1194) */
  .qk-shell--screen>.qk-foot{padding-bottom:calc(var(--qk-space-4) + var(--qk-safe-bottom))}
  /* one column: the check cards one per line, the crane's fields one per line */
  .qk-col2--wide,.qk-col2,.qk-col2--desk{display:flex;flex-direction:column;gap:var(--qk-air)}
  /* the panes do not stand side by side on a tablet (the record is its own screen, as on the phone) */
  .qk-pane{display:flex;flex-direction:column;min-width:0;position:relative}
  .qk-pane--detail,.qk-pane--single,.qk-pane--list{flex:1;min-width:0}
  .qk-pane>.qk-body,.qk-pane__body{padding:var(--qk-body-top) var(--qk-space-5) var(--qk-space-5);gap:var(--qk-space-3)}
  .qk-pane>.qk-foot{padding:var(--qk-space-3) var(--qk-space-5) var(--qk-space-5)}
  .qk-row--sel{box-shadow:var(--qk-shadow),inset 0 0 0 2px var(--qk-ink)}
  .qk-measure,.qk-measure--desk{max-width:none;display:flex;flex-direction:column;gap:var(--qk-space-3)}
  .qk-row--max{max-width:none}
  /* the bar on a tablet: centred, the tabs 56 apart */
  .qk-bar--adaptive{justify-content:center;gap:var(--qk-bar-gap-wide);padding-left:0;padding-right:0}
  .qk-hdr{padding-left:var(--qk-space-5);padding-right:var(--qk-space-5)}
}
@media (min-width:1280px){
  /* THE RAIL: the adaptive bar leaves the bottom and stands down the left as Astra's rail */
  .qk-bar--adaptive{
    top:0;bottom:0;left:0;right:auto;width:var(--qk-rail-w);height:auto;
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:var(--qk-rail-gap);padding:var(--qk-rail-pad);
    box-shadow:1px 0 0 var(--qk-bar-line);
  }
  .qk-bar--adaptive::after{display:none}
  .qk-bar--adaptive .qk-rail__only{display:flex}
  /* the brand row: the seal (36, round) and the company name */
  .qk-bar--adaptive .qk-rail__mark{order:-2;display:flex;align-items:center;gap:var(--qk-space-3);padding:var(--qk-space-2) var(--qk-space-2) 20px;margin:0}
  .qk-bar--adaptive .qk-rail__mark{flex-direction:column;align-items:flex-start;gap:var(--qk-air)}   /* the wordmark, the company beneath (QnQ is Datum) */
  .qk-bar--adaptive .qk-rail__mark .qk-door__company{margin:0;text-align:left}
  .qk-bar--adaptive .qk-rail__mark .qk-logo{width:var(--qk-rail-mark);height:auto}   /* no display here: the theme's rule hides the other mark (both had shown, 7 Sep 2026) */
  .qk-bar--adaptive .qk-rail__word{display:inline}
  .qk-bar--adaptive #bnavMore{display:none}   /* the rail names every section (Sam, 9 Sep 2026); More is the phone's and the tablet's */
  .qk-bar--adaptive .qk-tab{
    flex-direction:row;width:100%;height:var(--qk-btn-mini);gap:var(--qk-space-3);
    padding:0 var(--qk-space-3);border-radius:var(--qk-rail-tab-radius);justify-content:flex-start;
    font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);color:var(--qk-ink-2);letter-spacing:0;
  }
  .qk-bar--adaptive .qk-tab__pill{width:22px;height:22px;background:none}
  .qk-bar--adaptive .qk-tab__pill .qk-i{width:22px;height:22px}
  .qk-bar--adaptive .qk-tab--on{background:var(--qk-on-pill);color:var(--qk-ink);font-weight:var(--qk-weight-semi)}
  .qk-bar--adaptive .qk-tab--on .qk-tab__pill{background:none}
  .qk-bar--adaptive .qk-credit{display:flex;margin-top:auto;justify-content:flex-start;padding:0 var(--qk-space-2)}
  .qk-toast--adaptive{bottom:calc(var(--qk-space-5) + var(--qk-safe-bottom))}
  /* beside the rail: the page and its full-screen layers start at the rail's edge; the doors do not */
  .qk-beside-rail{margin-left:var(--qk-rail-w)}
  .qk-shell--screen.qk-beside-rail{margin-left:0;left:var(--qk-rail-w)}
  /* the content: centred in 1120, 24 a side, the list 390 beside the fill column, 24 between */
  .qk-shell--wide .qk-body{max-width:1120px}
  .qk-pane--list{width:var(--qk-pane-list-w);flex:none;box-shadow:none}
  .qk-pane--detail{flex:1;min-width:0}
  .qk-pane--single{flex:1}
  .qk-pane--single>.qk-body,.qk-pane--single>.qk-foot{max-width:var(--qk-measure-wide);width:100%;margin:0 auto}
  .qk-pane>.qk-hdr{padding-top:calc(var(--qk-safe-top) + var(--qk-pane-top))}
  .qk-pane>.qk-hdr--sticky .qk-hdr__title{top:calc(var(--qk-safe-top) + var(--qk-pane-top))}
  .qk-pane>.qk-body,.qk-pane__body{padding:var(--qk-body-top) var(--qk-space-5) var(--qk-space-5);gap:var(--qk-space-3)}
  .qk-pane--list>.qk-body,.qk-pane--list .qk-pane__body{padding:var(--qk-body-top) 0 var(--qk-space-5) var(--qk-space-5)}
  /* the record's header becomes its display title in the fill column (Astra: "Fraser Mills" in Barlow Condensed);
     a detail beside its list needs no Back and no Close — choosing another row is the way on */
  body.is-paned .qk-pane--detail>.qk-hdr{height:auto;padding:calc(var(--qk-space-2) + 4px) var(--qk-space-5) 0 0;box-sizing:content-box}   /* Desktop-Pair: the title line stands 4 under the columns' 8 (at 76 of the 64 top) */
  body.is-paned .qk-pane--detail>.qk-hdr>.qk-tap{display:none}
  body.is-paned .qk-pane--detail>.qk-hdr .qk-hdr__title,body.is-paned .qk-pane__hdr .qk-hdr__title{
    position:static;top:auto;left:auto;right:auto;flex:1;min-width:0;height:auto;
    display:flex;align-items:center;justify-content:flex-start;text-align:left;
    font-family:var(--qk-font-display);font-size:var(--qk-size-big);font-weight:var(--qk-weight-title);
    letter-spacing:var(--qk-track-title);line-height:.95;padding:0;
  
    overflow:visible;text-overflow:clip;   /* Barlow's glyphs at .95 stand 3 past the line box; the record's name fits its column */
  }
  body.is-paned .qk-pane__hdr>.qk-tap{display:none}
  /* THE LEAD BAND (Sam, 9 Sep 2026: "The top of each card should always be in line … Don't stagger them"): on the desktop every
     column opens with one 44 band under the 72 — the list's first group heading or eyebrow sits at its foot, the record's display
     title sits at its foot — so the first card of the list and the first card of the record share one top (130) on every page.
     The goldens draw the same band (gen.py CSS3 .lead); the anatomy gate measures it at 1440. */
  body.is-paned .qk-pane--detail>.qk-hdr{height:44px;box-sizing:border-box;margin-top:var(--qk-space-2);padding:0 var(--qk-space-5) 6px 0;display:flex;align-items:flex-end}
  body.is-paned .qk-pane--detail>.qk-hdr .qk-hdr__title{align-items:flex-end}
  body.is-paned .qk-pane--detail>.qk-pane__body,body.is-paned .qk-pane--detail>.bnd__b.qk-pane__body{margin-top:var(--qk-col-gap);padding-top:0}
  .qk-host .panel>.qk-stack>.qk-eyebrow:first-child,.qk-host .panel>.qk-stack>.qk-section:first-child,.qk-pane--list .qk-body>.qk-stack>.qk-section:first-child{height:44px;box-sizing:border-box;margin:0;display:flex;align-items:flex-end;padding-bottom:6px}
  .qk-host .panel>.qk-rows:first-child{margin-top:58px}   /* a list with nothing to say above its first card keeps the band's height (44 + the 14 gap) */
  /* in a desktop pane the column has no gutter, so a heading's ring-ⓘ stands flush with the column's right edge instead of hanging 12 past it (the busy rig read the pane 12 wider than its box) */
  body.is-paned .qk-pane--detail .qk-section .qk-info,body.is-paned .qk-pane__body .qk-section .qk-info{margin-right:0}
  /* the list's header is the one header over the whole content (Astra: "Jobs" centred, the action at the right) */
  .qk-hdr.qk-hdr--lead,.qk-pane--list>.qk-hdr{padding-top:calc(var(--qk-safe-top) + var(--qk-pane-top));padding-left:var(--qk-space-5);padding-right:var(--qk-space-1)}
  /* a full screen beside the rail (the renter's wizard, its readers): the header's taps stand at the inner 1120's edges, 24 in (Desktop-Check: 304 and 1332) */
  .qk-shell--screen.qk-beside-rail>.qk-hdr{padding-left:calc((100% - var(--qk-desk-inner)) / 2 + var(--qk-space-5));padding-right:calc((100% - var(--qk-desk-inner)) / 2 + var(--qk-space-5))}
  .qk-shell--screen.qk-beside-rail>.qk-hdr>.qk-hdr__title{left:calc((100% - var(--qk-desk-inner)) / 2 + var(--qk-hdr-title-inset));right:calc((100% - var(--qk-desk-inner)) / 2 + var(--qk-hdr-title-inset))}   /* the title 64 in from the inner's edge (Desktop-Check .t at 344) */
  .qk-pane--single .qk-row--max{max-width:none}   /* the single column's strip row spans the column (Desktop-Check .row 712 of 712) */
  .qk-hdr--pane-centred,.qk-hdr--pane-single{box-sizing:content-box;padding-top:calc(var(--qk-safe-top) + var(--qk-pane-top));padding-left:var(--qk-space-5);padding-right:var(--qk-space-1)}
  /* Save under the form at the phone's measure, centred (the button law) */
  .qk-foot--form{padding:var(--qk-space-1) 0 0;flex-direction:row;justify-content:center}
  .qk-foot--form>.qk-btn{max-width:var(--qk-pane-btn-max)}
  .qk-shell--flow{overflow-y:auto}
  .qk-shell--flow>.qk-body{flex:none;overflow:visible;padding-bottom:0}
  .qk-shell--flow>.qk-foot{margin:var(--qk-col-gap) auto 0;width:100%;max-width:var(--qk-measure-wide);padding:var(--qk-space-4) var(--qk-space-5) var(--qk-space-5);flex-direction:row;justify-content:center}
  .qk-shell--flow>.qk-foot>.qk-btn{align-self:auto;width:100%;max-width:var(--qk-pane-btn-max)}
  /* pairs on the desktop only: the crane's fields, the alert switches, the check cards */
  .qk-col2,.qk-col2--wide,.qk-col2--desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--qk-air);align-items:start}   /* minmax(0,…): a long name wraps inside its half (Desktop-Check: 351 cards), it does not widen the track */
  .qk-col2>.qk-section,.qk-col2>.qk-eyebrow,.qk-col2--wide>.qk-section,.qk-col2--desk>.qk-section,.qk-col2--desk>.qk-eyebrow{grid-column:1 / -1}
  .qk-body--measure-tp{max-width:var(--qk-measure-wide)}
  .qk-row--max{max-width:var(--qk-row-max)}
  .qk-measure--desk{max-width:var(--qk-measure)}
  .qk-acts{display:flex;align-items:center;gap:var(--qk-space-2)}
  .qk-acts>.qk-btn-row{flex:none}
  .qk-acts>.qk-btn-row--fill>.qk-btn{flex:none}
  .qk-acts>.qk-btn--start{align-self:auto;margin-left:auto}
  .qk-rows--pane>.qk-disc[open]>summary.qk-row{box-shadow:var(--qk-shadow),inset 0 0 0 2px var(--qk-ink)}
  .qk-rows--pane>.qk-disc[open]>summary .qk-chev{transform:none}
  /* a fixed sheet is a centred dialog here */
  .qk-sheet--fixed{padding:var(--qk-space-5) 20px var(--qk-space-4);max-height:calc(100vh - var(--qk-space-5) * 2);overflow-y:auto}
  .qk-sheet--fixed>.qk-grab{display:none}
  .qk-prose{max-width:68ch}
  /* the desktop's rows are the phone's again (the tablet's scale is the tablet's) */
  /* ASTRA'S DESKTOP ROOM (Sam, 9 Sep 2026: "Astra has more breathing room?" — "Yes to all of this"): PeopleDesktopLight's rows are
     76 tall at 12/24 with 17/15 type and its fields 64 at 0/24 — the tablet's scale, kept on the desktop (this block had put the
     phone's 56 back). The settings' section rows keep their 64 and the check rows their 56 (below). */
  .qk-body .qk-row,.qk-pane__body .qk-row,.qk-host .qk-row{min-height:var(--qk-row-tile);padding:var(--qk-space-3) var(--qk-space-5)}
  .qk-body .qk-row--tile,.qk-pane__body .qk-row--tile,.qk-host .qk-row--tile{min-height:var(--qk-row-tile);padding:var(--qk-space-3) var(--qk-space-5)}
  .qk-body .qk-rows .qk-row,.qk-pane__body .qk-rows .qk-row,.qk-host .qk-rows .qk-row{min-height:var(--qk-row);padding:9px var(--qk-space-5)}
  .qk-rows .qk-row--tile::before{left:calc(var(--qk-space-5) + 28px + var(--qk-space-3))}
  .qk-rows>.qk-row+.qk-row::before,.qk-rows>*+*>.qk-row:first-child::before{left:var(--qk-space-5)}
  .qk-host .qk-row--section,.qk-body .qk-row--section{min-height:64px;padding:var(--qk-air) 14px}   /* Desktop-Settings: the section rows 64 and 10/14 */
  .qk-body .qk-row--compact,.qk-host .qk-row--compact{height:var(--qk-row);min-height:0;padding:6px 14px}   /* the compact row keeps its 56 and 6/14 on the desktop too (Desktop-Check .row 56) — after the plain row's restore, or that wins */
  .qk-body .qk-row__sub,.qk-pane__body .qk-row__sub,.qk-host .qk-row__sub{font-size:var(--qk-size-sub)}
  .qk-body .qk-field,.qk-pane__body .qk-field,.qk-host .qk-field{min-height:64px;padding:0 var(--qk-space-5);font-size:var(--qk-size-body)}
  .qk-body .qk-field--stack,.qk-pane__body .qk-field--stack,.qk-host .qk-field--stack{padding:10px var(--qk-space-5) 12px}
   /* audit 18: the wide rule zeroed a stacked field's padding and the value sat on the card's edge */
}
@media (hover:hover){
  .qk-row[role="button"]:hover,button.qk-row:hover{background:var(--qk-card);filter:brightness(.985)}
  .qk-btn:hover{filter:brightness(1.06)}
  .qk-tab:hover{color:var(--qk-ink)}
}
.qk-shell :focus-visible{outline:2px solid var(--qk-ink-3);outline-offset:2px;border-radius:var(--qk-radius-check)}   /* a quiet ring, never the old gold (9 Sep 2026) */

/* =====================================================================
   18 · The door. Office and renter share it: the mark, one line, the
   box, one button, on a card that sits a little above centre. The lock,
   the dead link and the name card are the same card at other moments.
   Every number is the signed door golden's (goldens/gen.py: door, lock,
   dead link, name card).
   ===================================================================== */
.qk-shell--screen{position:fixed;inset:0;height:auto}
.qk-shell--lock{z-index:var(--qk-z-lock)}
.qk-shell--screen>.qk-credit{margin-bottom:calc(20px + var(--qk-safe-bottom))}   /* the credit 20 above the home strip on every door (Sam, 15 Sep 2026: "the datum software is crammed all the way down") */
.qk-body--door{justify-content:center;gap:0;padding-bottom:var(--qk-door-lift)}
.qk-body--door-low{padding-bottom:calc(var(--qk-door-lift-sm) + var(--qk-safe-bottom))}   /* Renter-NameCard: no credit beneath this card, so the home strip's 30 is the body's own (the card centres at 180, not 195) */
.qk-door{
  width:100%;max-width:var(--qk-door-w);margin:0 auto;flex:none;
  background:var(--qk-card);border-radius:var(--qk-radius-sheet);
  padding:var(--qk-space-6) var(--qk-space-5) var(--qk-space-5);
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
  font-family:var(--qk-font-body);color:var(--qk-ink);text-align:center;
  animation:qk-up var(--qk-duration) var(--qk-ease) both;
}
.qk-door--sm{padding-top:28px}
.qk-door--stacked{margin-top:var(--qk-space-3)}
/* the pieces settle in a beat behind the card, one after another */
.qk-door>*{animation:qk-fade var(--qk-duration) var(--qk-ease) both}
.qk-door>:nth-child(2){animation-delay:var(--qk-stagger)}
.qk-door>:nth-child(3){animation-delay:calc(var(--qk-stagger) * 2)}
.qk-door>:nth-child(4){animation-delay:calc(var(--qk-stagger) * 3)}
.qk-door>:nth-child(n+5){animation-delay:calc(var(--qk-stagger) * 4)}
.qk-door__foot{animation:qk-fade var(--qk-duration) var(--qk-ease) both;animation-delay:calc(var(--qk-stagger) * 4)}
/* an accepted PIN: the card lifts away, whole */
.qk-door.qk-leave-up{animation-name:qk-lift}
.qk-door.qk-leave-up>*{animation:none}
/* the mark: the ink one by day, the reverse one in the dark */
.qk-logo{display:block;height:auto;align-self:center}
.qk-logo--dark{display:none}
[data-theme="dark"] .qk-logo--light{display:none}
[data-theme="dark"] .qk-logo--dark{display:block}
.qk-door__logo{width:var(--qk-door-logo)}
.qk-door__sub{margin:0;font-size:var(--qk-size-name);line-height:var(--qk-line-body);color:var(--qk-ink-3);text-align:center}
.qk-door__sub--ink{color:var(--qk-ink)}
.qk-door__line{margin:0;font-size:var(--qk-size-caption);line-height:var(--qk-line-body);color:var(--qk-ink-3);text-align:center}
.qk-door__line b{color:var(--qk-ink);font-weight:var(--qk-weight-semi)}
.qk-door__title{
  margin:0;font-family:var(--qk-font-display);font-weight:var(--qk-weight-title);
  font-size:var(--qk-size-title);letter-spacing:var(--qk-track-title);line-height:.95;   /* the display title's .95 (Office-Lock, Renter-NameCard; measured 7 Sep 2026) */
  text-align:center;color:var(--qk-ink);
}
.qk-door__title--md{font-size:var(--qk-size-title-md)}
.qk-door__err{margin:0;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-medium);line-height:var(--qk-line-body);color:var(--qk-bad);text-align:center}
.qk-door__err:empty{display:none}
.qk-door__msg{margin:var(--qk-space-3) auto 0;max-width:var(--qk-door-w);font-size:var(--qk-size-caption);line-height:var(--qk-line-body);color:var(--qk-ink-2);text-align:center}
.qk-door__msg:empty{display:none}
.qk-door__msg--bad{color:var(--qk-bad)}
.qk-door__msg--good{color:var(--qk-ok)}
.qk-door__or{
  margin:0;display:flex;align-items:center;gap:var(--qk-space-3);
  font-size:var(--qk-size-eyebrow);font-weight:var(--qk-weight-semi);
  letter-spacing:var(--qk-track-eyebrow);text-transform:uppercase;color:var(--qk-ink-3);
}
.qk-door__or::before,.qk-door__or::after{content:"";flex:1;height:1px;background:var(--qk-rule)}
.qk-door__label{margin:0;display:block;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi);color:var(--qk-ink);text-align:left}
.qk-door__group{display:flex;flex-direction:column;align-items:stretch}
.qk-door__foot{width:100%;max-width:var(--qk-door-w);margin:0 auto;flex:none;text-align:center}
/* a foot that holds only a link ("Forgot your PIN?") takes no room in the
   centred column, so the card stays where the signed door puts it —
   DoorLight.html: the card at 203 with nothing beneath it; the link in flow
   sat the office's card at 177 (de-drift pass, cohort 1). The screen takes
   the class off while the foot's form is open, so the form has its room. */
.qk-door__foot--float{height:0;overflow:visible}
.qk-door__link{
  display:block;margin:var(--qk-space-4) auto 0;background:none;border:0;
  padding:var(--qk-space-2) var(--qk-space-1);font-family:var(--qk-font-body);
  font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);color:var(--qk-ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.qk-door__note{margin:var(--qk-space-4) auto 0;max-width:var(--qk-door-w);font-family:var(--qk-font-body);font-size:var(--qk-size-caption);line-height:var(--qk-line-body);color:var(--qk-ink-3);text-align:center}
.qk-door .qk-eyebrow{text-align:left}
.qk-door .qk-chips{justify-content:flex-start}
.qk-door .qk-input--nudge{animation:qk-nudge var(--qk-duration) var(--qk-ease) both}
/* the box's own focus is its ring, never the keyboard's gold outline */
.qk-shell .qk-input:focus-visible{outline:none}
/* the rhythm down the card: one default, and the pairs the goldens set */
.qk-door>*+*,.qk-door__group>*+*{margin-top:14px}
.qk-door .qk-logo+.qk-logo{margin-top:0}   /* the two marks share one slot */
.qk-door .qk-door__logo+.qk-door__sub{margin-top:22px}
.qk-door .qk-door__logo+.qk-door__title{margin-top:20px}
.qk-door .qk-door__logo+.qk-door__line{margin-top:var(--qk-space-4)}
/* the dead link (Renter-DeadLink.html): the sentence 8 under the title */
.qk-door .qk-door__title+.qk-door__sub{margin-top:8px}
/* the name card (Renter-NameCard.html): title 8 under the crane line, the box 18 under the
   title, the eyebrow 16 under the box, the chips 8 under the eyebrow, Continue 18 under the chips */
.qk-door .qk-door__line+.qk-door__title{margin-top:8px}
.qk-door .qk-door__title+.qk-input{margin-top:18px}
.qk-door .qk-input+.qk-eyebrow{margin-top:var(--qk-space-4)}
.qk-door .qk-eyebrow+.qk-chips{margin-top:8px}
.qk-door .qk-chips+.qk-btn,.qk-door .qk-chips+.qk-door__err+.qk-btn{margin-top:18px}
.qk-door .qk-door__line+.qk-door__title{margin-top:var(--qk-space-2)}
.qk-door .qk-door__title+.qk-door__sub{margin-top:6px}
.qk-door .qk-door__title--md+.qk-door__sub{margin-top:var(--qk-space-2)}
.qk-door .qk-door__title+.qk-input{margin-top:18px}
.qk-door .qk-door__sub+.qk-btn,.qk-door .qk-door__sub+.qk-door__group{margin-top:18px}
.qk-door .qk-btn+.qk-btn{margin-top:var(--qk-air)}
.qk-door .qk-btn+.qk-door__or{margin-top:var(--qk-space-4)}
.qk-door .qk-input+.qk-door__err,.qk-door .qk-btn+.qk-door__err{margin-top:var(--qk-air)}
.qk-door .qk-input+.qk-eyebrow{margin-top:var(--qk-space-4)}
.qk-door .qk-eyebrow+.qk-chips{margin-top:var(--qk-space-2)}
.qk-door .qk-chips+.qk-btn,.qk-door .qk-input--text+.qk-btn{margin-top:18px}
.qk-door .qk-door__label+.qk-input{margin-top:6px}
.qk-door .qk-door__err+.qk-btn{margin-top:14px}
@media (min-width:780px){
  /* the card centres in the WHOLE frame (Tablet-P-Door, Tablet-L-Door,
     Desktop-Door: the stage is the frame; the credit and the home band are
     drawn over it): no lift, no status band, the credit out of flow — its
     box ends 50 above the frame's edge on a tablet (the golden's bottom 44
     over the 30 home band, plus the credit's 6) and 30 on a desktop */
  .qk-body--door,.qk-body--door-low{padding-top:0;padding-bottom:0}
  /* Astra's door at width: the 480 column centred, its body 432 wide from 188 (Tablet-P-Door, Tablet-L-Door, Desktop-Door — the same 188 at every width) */
  .qk-body--door:has(>.qk-door--astra),.qk-body--door.qk-body--astra{width:432px;max-width:432px;margin:calc(188px - var(--qk-safe-top)) auto 0;padding-top:var(--qk-space-5)}   /* 188 from the frame's top, the status band (54 on a tablet, none on a desktop) counted */
  /* (the status band stays on a tablet — Tablet-P-Today's .top 54, every full-screen layer's header at 54; the desktop's panes carry their own 20, see the 1280 block) */
  /* (until 7 Sep 2026 a rule here hid every layer's status band from 780; Astra's tablet keeps the band) */
  .qk-shell--screen>.qk-credit{position:absolute;left:0;right:0;bottom:calc(20px + var(--qk-safe-bottom));margin:0}
}
@media (min-width:1280px){
  .qk-shell--screen>.qk-credit{bottom:50px}   /* Desktop-Door: the credit at 836 of 900 — 20 above the mock's 30 home strip, as on the tablet */
}

/* =====================================================================
   19 · A page that scrolls the document (both apps, today). The kit's
   header sticks to the top, its bar is fixed to the bottom, its toast
   sits above the bar. A host that carries its own wide navigation shows
   the bar on a phone only (--phone).
   ===================================================================== */
.qk-hdr--sticky{
  position:sticky;top:0;z-index:var(--qk-z-hdr);
  box-sizing:content-box;padding-top:var(--qk-safe-top);
  background:var(--qk-bar);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0.5px 0 var(--qk-bar-line);
}
.qk-hdr--sticky .qk-hdr__title{
  top:var(--qk-safe-top);height:var(--qk-header-h);
  display:flex;align-items:center;justify-content:center;
}
.qk-hdr--sticky .qk-hdr__title>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* THE BRAND HEADER (Sam, 18 Sep 2026): the lockup where the section's name was, the initials at the right, and the
   search bar on its own line under them. The header grows; sticky keeps it in flow so nothing has to be re-padded. */
.qk-hdr--brand{height:auto;min-height:var(--qk-header-h);flex-wrap:wrap;gap:10px 12px;padding:10px 16px 14px}   /* TWO ROWS WITH AIR (Sam, 19 Sep 2026: "This all looks very cramped"): the lockup and the initials on the first, the search bar on its own under them */
.qk-hdr--brand .qk-hdr__title--brand{cursor:pointer;-webkit-tap-highlight-color:transparent}   /* the lockup is the way Home (Sam, 19 Sep 2026) */
.qk-hdr--brand>button.qk-tap{order:2;margin-left:0}
/* BACK AT THE FAR LEFT (Sam, 20 Sep 2026, of the chevron standing between the date and his initials on a visit: "What's with that arrow?... This looks off"): it shared the initials' order and so landed beside them; a Back stands where every phone puts it, its glyph on the page's own margin */
.qk-hdr--brand>button.qk-tap:first-child{order:-1;margin:0 -6px 0 -10px}
.qk-hdr--brand .qk-hdr__date{order:1;margin-left:auto;display:inline-flex;align-items:center}   /* the date tile at the right, beside the initials (Sam's pick, 19 Sep 2026) */
.qk-hdr--brand .qk-hdr__date .qk-tile--date{width:40px;height:40px;border-radius:11px;background:var(--qk-soft);color:var(--qk-ink);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;margin:0}
.qk-hdr--brand .qk-hdr__date .qk-tile--date small{font-size:9px;font-weight:600;letter-spacing:.05em;color:var(--qk-accent);text-transform:uppercase}
.qk-hdr--brand .qk-hdr__date .qk-tile--date b{font-size:17px;font-weight:700;margin-top:2px}
.qk-hdr--brand .qk-hdr__search{order:3;flex:1 0 100%;height:44px;margin:0}
.qk-hdr--brand .qk-hdr__title--brand{position:static;height:auto;flex:none;order:0;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0;transform:none}
.qk-hdr--brand>.qk-tap:first-child:empty{display:none}
.qk-hdr--brand .qk-avatar{box-shadow:inset 0 0 0 1.5px var(--qk-accent)}   /* the second hint of gold: a ring on the initials */
.qk-hdr--sticky.qk-hdr--brand .qk-hdr__title--brand{top:auto}
.qk-hdr--sticky.qk-hdr--brand{padding-top:calc(var(--qk-safe-top) + 10px)}
.qk-hdr__logo{height:36px;width:auto}   /* the lockup stands to the tiles beside it (Sam, 19 Sep 2026: "Is the qnq logo the correct size on all devices?") */
@media (min-width:768px){.qk-hdr__logo{height:40px}}   /* which of the two shows is the kit's .qk-logo--light/--dark rule, untouched */
.qk-hdr__search{flex:1 1 auto;min-width:0;order:2;display:flex;align-items:center;gap:8px;height:38px;margin:0;padding:0 14px;border-radius:var(--qk-radius-pill);background:var(--qk-soft);box-shadow:inset 0 0 0 1px var(--qk-edge);cursor:text}
.qk-hdr__search .qk-i{width:18px;height:18px;flex:none;color:var(--qk-accent)}   /* the one hint of colour, as Precision's blue on its glyph */
.qk-hdr__search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:17px;color:var(--qk-ink);outline:none;padding:0;-webkit-appearance:none;appearance:none}
.qk-hdr__search input::placeholder{color:var(--qk-ink-3)}
:root[data-theme="light"] .ops .qk-hdr__search input,:root .qk-hdr__search input{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;height:100%;padding:0!important;margin:0}   /* the office's own light-mode input skin never reaches the bar */
.qk-hdr__search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.qk-tab--on .qk-tab__pill .qk-i{color:var(--qk-accent)}   /* the chosen tab's icon carries the gold (18 Sep 2026) */
/* the search's answer: a panel from the header's foot to the bottom, on the ground, over a scrim */
.omnisheet{position:fixed;left:0;right:0;top:120px;bottom:calc(var(--qk-bar-h) + var(--qk-safe-bottom));z-index:calc(var(--qk-z-scrim) - 1)}   /* under every sheet, above the bar's own line; the bar stays his */
@media (min-width:1280px){.omnisheet{bottom:0}}
/* THE ANSWERS STAND OVER THEIR OWN BACKDROP (found 21 Sep 2026, on the live site: a tap on a search result closed the search and opened nothing - the
   backdrop is a button with the scrim's own z-index, the answers had none, so every tap landed on the backdrop) */
.omnisheet .qk-scrim{position:absolute;inset:0;z-index:0}
.omnisheet .omnisheet__c{z-index:1}
.omnisheet__c{position:absolute;left:0;right:0;top:0;bottom:0;overflow:auto;background:var(--qk-ground);padding:12px 16px calc(24px + var(--qk-safe-bottom))}
@media (min-width:1280px){.omnisheet__c{left:auto;right:24px;width:520px;bottom:auto;max-height:70vh;border-radius:var(--qk-radius-sheet);box-shadow:var(--qk-shadow-dialog)}}
/* a dressed file input: the chip and the file's name in the field; the input itself stays for the form */
.qk-filepick{display:flex;align-items:center;gap:12px;min-width:0}
.qk-filepick__b{width:auto;flex:none;height:36px;padding:0 14px;gap:6px;font-size:15px}
.qk-filepick__b .qk-i{width:18px;height:18px}
.qk-filepick__n{font-size:15px;color:var(--qk-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-filepick__n.is-set{color:var(--qk-ink)}
input[type="file"][data-dressed]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.qk-field:has(>input[type="file"][data-dressed]){position:relative}
/* More: the appearance row's three chips */
.bnav__apr{justify-content:space-between}
.qk-seg--mini{gap:6px;flex:none}
.qk-seg--mini .qk-chip{height:32px;padding:0 12px;font-size:15px}
.qk-seg--mini .qk-chip{background:var(--qk-soft)}
.qk-seg--mini .qk-chip.qk-chip--on{background:var(--qk-chip-on-bg);color:var(--qk-chip-on-fg)}
.bnavsheet__rows.qk-rows>.newsheet__r{background:transparent;border-radius:0;box-shadow:none;min-height:60px;padding:0 20px;gap:14px}
.bnavsheet__rows.qk-rows>.newsheet__r .qk-row__name{font-size:17px;font-weight:400}
.bnavsheet__rows .qk-row__sub{display:none}   /* icon, name, chevron: nothing more (Sam, 19 Sep 2026: "Make sure this matches that same aesthetic") */
.bnavsheet__rows.qk-rows>.newsheet__r .qk-row__val{color:var(--qk-ink-3);font-size:17px;display:inline-flex;align-items:center;flex:none}
.bnavsheet__rows.qk-rows>.newsheet__r .qk-stepper{color:var(--qk-ink-3);flex:none;margin-left:var(--qk-space-1)}
.bnavsheet__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--qk-space-2)}
.bnavsheet__x{margin-right:calc(var(--qk-space-2) * -1);color:var(--qk-ink-2)}
.bnavsheet__rows.qk-rows>.newsheet__r .qk-tile{width:24px;height:24px}
.bnavsheet__rows.qk-rows+.bnavsheet__rows.qk-rows{margin-top:12px}
@media (min-width:1280px){
  /* the desktop record title's span keeps Barlow's tall glyphs unclipped (the name fits its 658 column) */
  body.is-paned .qk-pane--detail>.qk-hdr .qk-hdr__title>span{overflow:visible;text-overflow:clip}
}
/* A header printed straight on the ground — no bar surface, no blur, no
   hairline (corrective pass, 3 Sep: the signed Self-* goldens print the
   back chevron and the title on the canvas itself; the built screens wore
   the white bar the goldens never had). Still sticky, and still opaque,
   so scrolled content passes beneath it rather than through it. */
.qk-hdr--ground{
  background:var(--qk-ground);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
/* …and the bar surface comes back while the page is scrolled (round 2:
   the goldens speak only for the rest state; lifted, the frosted bar and
   its hairline keep passing content from colliding with the title). */
/* THE PINNED HEADER (Sam, 20 Sep 2026: "On the two pillars app, when we scroll down everything fades but the search bar and the
   header stay"; then, of the tall band that stayed: "The stickied search bar and logo is shitty... it feels cheap. I want it to feel
   super premium" - he took the recommendation). On a phone the office's band pins 56px ABOVE the top, which is the height of the
   logo row: the logo, the date and the initials scroll away with the page, natively, with no threshold and no jump, and only the
   search stays. Pinned, the search is a floating glass pill on the surface and shadow of the bar at the foot, the page falling away
   into the ground's own colour above and behind it. 56 = the search's offset in the band (64) less the 8 it keeps from the top;
   the safe area is in the band's own padding, so the figure holds under a notch. The desktop keeps its band. */
/* AND THEN HIS OWN IDEA, WHICH IS THE ONE THAT SHIPS (Sam, 20 Sep 2026, of the band on the live site: "It's 2 different colors and shitty";
   then: "when I scroll down, the search bar shrinks and moves into position right next to logo and the date and the S disappear...
   As I start to scroll it could smoothly transition into positioning itself next to the logo"; on the frames: "yes that looks good...
   When it's ready and tested to be super smooth and working flawlessly, push it live"). Nothing snaps: --hp is how far the first
   54 px of scroll have gone, 0 to 1 (the office sets it on #opsHdr as the page moves), and everything follows it, so it tracks his
   thumb both ways. The band pins 54 px above the top (the search's 64 in the band less the 10 it keeps from the top, which sets its centre level with the logo's), so the search RISES by the page's own scrolling; the logo is carried
   back down by the same amount and so stands still; the date and the initials fade as they leave; and the search steps aside
   first (--hx, done by 14 px, when its top would reach the logo's foot) and then rises beside the logo - one row, one colour, the
   page falling away into the ground under it. Pinned, the search is the floating glass pill on the surface and shadow of the bar at
   the foot. ON A SCREEN WITH A BACK (a maintenance visit), Back stands where the logo does, the logo fades, and the pill - which
   there carries the crane and the count - sits beside Back with the whole row to itself. */
@media (max-width:1023.98px){
  #opsHdr.qk-hdr--sticky.qk-hdr--brand{top:-54px;--hx:min(1,calc(var(--hp,0) * 3.8));--hin:95px;--qk-pill-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)}
  #opsHdr.qk-hdr--sticky.qk-hdr--brand:has(>button.qk-tap:first-child){--hin:46px}
  :root[data-theme="light"] #opsHdr.qk-hdr--sticky.qk-hdr--brand{--qk-pill-shadow:0 8px 24px rgba(28,36,48,.14),0 1px 2px rgba(28,36,48,.06)}
  #opsHdr.qk-hdr--sticky.qk-hdr--brand,#opsHdr.qk-hdr--sticky.qk-hdr--brand.is-lifted{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  #opsHdr.qk-hdr--sticky.qk-hdr--brand::before{content:"";position:absolute;left:0;right:0;top:54px;bottom:calc(var(--qk-space-6) * -1);z-index:-1;pointer-events:none;opacity:var(--hp,0);
    background:linear-gradient(var(--qk-ground) 40%,color-mix(in srgb,var(--qk-ground) 60%,transparent) 70%,transparent)}
  /* THE LOGO IS PINNED BY THE BROWSER, NOT BY SCRIPT (Sam, 21 Sep 2026, on his phone: "The transition of the search bar moving as I start
     scrolling isn't smooth. The logo jiggles around... it feels clunky"). It had been carried back down by a transform the office set on
     every scroll event - and a phone scrolls ahead of its scripts, so the logo was always a frame behind the page: the jiggle. Now the
     logo (and Back, on a visit) is position:sticky inside the pinned band: the band rides up 54 px with the page and the logo holds its
     place within it, natively, on the same thread as the scroll - it cannot move. The search still rises by the page's own scrolling. */
  #opsHdr.qk-hdr--brand .qk-hdr__title--brand{position:sticky;top:calc(var(--qk-safe-top) + 14px);left:auto;right:auto;bottom:auto;z-index:1}   /* where it already stands: 36 tall, level with the pinned pill's centre */
  #opsHdr.qk-hdr--brand>button.qk-tap:first-child{position:sticky;top:calc(var(--qk-safe-top) + 10px);z-index:1}
  #opsHdr.qk-hdr--brand:has(>button.qk-tap:first-child) .qk-hdr__title--brand{opacity:calc(1 - var(--hp,0) * 4.6)}   /* gone by 12 px, before the pill's top reaches its foot at 14 */
  #opsHdr.qk-hdr--brand.is-stuck:has(>button.qk-tap:first-child) .qk-hdr__title--brand{visibility:hidden;pointer-events:none}
  #opsHdr.qk-hdr--brand .qk-hdr__date,#opsHdr.qk-hdr--brand #whoTap{opacity:calc(1 - var(--hp,0) * 2.4)}   /* they leave with the page, natively; only the fade is added */
  #opsHdr.qk-hdr--brand.is-stuck .qk-hdr__date,#opsHdr.qk-hdr--brand.is-stuck #whoTap{visibility:hidden;pointer-events:none}
  #opsHdr.qk-hdr--brand .qk-hdr__search{position:relative;margin-left:calc(var(--hx) * var(--hin));flex:0 0 calc(100% - var(--hx) * var(--hin));transition:background-color .28s ease,box-shadow .28s ease}
  #opsHdr.qk-hdr--brand.is-stuck .qk-hdr__search{background:color-mix(in srgb,var(--qk-card) 72%,transparent);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:inset 0 0 0 1px var(--qk-edge),var(--qk-pill-shadow)}
  /* on a visit the pill carries the crane and the count, over a line of the header card's gold */
  #opsHdr .qk-hdr__search.has-prog::after{content:"";position:absolute;left:20px;right:20px;bottom:6px;height:2.5px;border-radius:2px;
    background:linear-gradient(to right,var(--qk-accent) var(--qk-pill-p,0%),var(--qk-rule) var(--qk-pill-p,0%))}
  #opsHdr .qk-hdr__search.has-prog.is-ok::after{background:var(--qk-ok)}
  #opsHdr .qk-hdr__search.has-prog input::placeholder{color:var(--qk-ink-2);font-weight:var(--qk-weight-semi)}
}
@media (max-width:1023.98px) and (prefers-reduced-motion:reduce){#opsHdr.qk-hdr--brand .qk-hdr__search{transition:none}}
/* IN STEP WITH HIS FINGER: where the browser has scroll-driven animations (Chrome on Android, Safari on iOS 26) the step aside, the
   fades and the ground under the row are animations on the page's own scroll timeline - sampled with the scroll itself, never a frame
   late. They outrank the --hp declarations above, which stay for a browser without them. */
@supports (animation-timeline: scroll()) {
  @media (max-width:1023.98px){
    @keyframes hdrTuck{from{margin-left:0;flex-basis:100%}to{margin-left:var(--hin);flex-basis:calc(100% - var(--hin))}}
    @keyframes hdrFade{to{opacity:0}}
    @keyframes hdrGround{from{opacity:0}to{opacity:1}}
    #opsHdr.qk-hdr--sticky.qk-hdr--brand .qk-hdr__search{animation:hdrTuck linear both;animation-timeline:scroll(root block);animation-range:0px 14px}
    #opsHdr.qk-hdr--sticky.qk-hdr--brand .qk-hdr__date,#opsHdr.qk-hdr--sticky.qk-hdr--brand #whoTap{animation:hdrFade linear both;animation-timeline:scroll(root block);animation-range:0px 22px}
    #opsHdr.qk-hdr--sticky.qk-hdr--brand:has(>button.qk-tap:first-child) .qk-hdr__title--brand{animation:hdrFade linear both;animation-timeline:scroll(root block);animation-range:0px 12px}
    #opsHdr.qk-hdr--sticky.qk-hdr--brand::before{animation:hdrGround linear both;animation-timeline:scroll(root block);animation-range:0px 54px}
  }
}
/* at width the band stays, and the page falls away under it */
@media (min-width:1024px){.qk-hdr--sticky.qk-hdr--ground.is-lifted::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--qk-space-5);background:linear-gradient(var(--qk-ground),transparent);pointer-events:none}}
.qk-hdr--ground.is-lifted{
  background:var(--qk-bar);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0.5px 0 var(--qk-bar-line);
}
.qk-body--page{flex:none;overflow:visible;min-height:0}
.qk-body--page.qk-body--bar{padding-bottom:calc(96px + var(--qk-safe-bottom))}
.qk-bar--fixed{position:fixed;z-index:var(--qk-z-bar)}
/* a sheet over a page that scrolls the document (the office's ⓘ): the
   scrim and the sheet are fixed, above the bar and under the toast. On a
   tablet the sheet is capped at 600 and centred; from 1024 up it is a
   centred dialog (the goldens' Tablet-P-Sheet / Tablet-L-Sheet). */
.qk-scrim--fixed{position:fixed;z-index:var(--qk-z-scrim)}
.qk-sheet--fixed{position:fixed;z-index:var(--qk-z-sheet)}
/* the search sheet stands from 120 on a phone (Office-Search: .sheet style="top:120px", 724 tall, the results scrolling inside it) */
@media (max-width:779px){
  .qk-sheet--search{top:120px;bottom:0;max-height:none}
}
@media (min-width:780px){
  .qk-sheet--fixed{left:calc(50% - 300px);right:auto;width:600px}
}
@media (max-width:1023px){
  .daypanel>#dayClose{display:none}   /* audit 52: on the phone and the tablet the sheet closes with its round X; the desktop's footer keeps Close */
}
@media (min-width:780px) and (max-width:1023px){
  /* audit 23: the 600-wide sheet stood over the full-width bar, which showed as two stubs beside it */
  body:has(#dayBack:not([hidden])) .qk-bar--float,body:has(#dayBack:not([hidden])) .qk-fab{visibility:hidden}   /* the day sheet only: other scrims hide by display, not [hidden] */
}
@media (min-width:1024px){
  .qk-sheet--fixed{
    inset:0;margin:auto;width:480px;height:fit-content;
    border-radius:var(--qk-radius-sheet);padding-bottom:var(--qk-space-4);
  }
}
.qk-toast--fixed{
  position:fixed;z-index:var(--qk-z-toast);
  left:var(--qk-space-5);right:var(--qk-space-5);
  bottom:calc(var(--qk-bar-h) + var(--qk-space-5) + var(--qk-safe-bottom));
  max-width:440px;margin:0 auto;
}
/* THE TOAST, ON THE BAR'S OWN GLASS (Sam, 20 Sep 2026, of a flat grey slab across the screen: "Do we need this it looks shitty"; the consistency audit,
   21 Sep 2026). Where a toast still earns its place it is a small floating capsule - the surface, blur, edge and shadow of the bar at the
   foot and the pinned search - as wide as its words, centred, never a band. Centred by its margins, never by a transform: the rise and the leave own
   the transform, and a translateX here was dropped for their length - the capsule came up half its width to the right and snapped across. */
@media (max-width:1023.98px){.qk-toast--fixed,.qk-toast{
  left:0;right:0;margin-left:auto;margin-right:auto;width:fit-content;max-width:calc(100vw - 48px);
  background:color-mix(in srgb,var(--qk-card) 78%,transparent);color:var(--qk-ink);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 0 0 1px var(--qk-edge),0 8px 24px rgba(0,0,0,.28);
  padding:11px 20px;font-size:15px;
}}
/* the document knows about the frosted header and the bar: anything the
   browser scrolls into view (a focused box, a button a rig or a keyboard
   reaches for) lands clear of both instead of under them */
.qk-doc{
  scroll-padding-top:calc(var(--qk-safe-top) + var(--qk-header-h) + var(--qk-space-3));
  scroll-padding-bottom:calc(var(--qk-bar-h) + var(--qk-safe-bottom) + var(--qk-space-5));
}
@media (min-width:781px){
  .qk-bar--phone{display:none}
  .qk-toast--phone{bottom:calc(var(--qk-space-5) + var(--qk-safe-bottom))}
  .qk-body--phone-bar.qk-body--bar{padding-bottom:var(--qk-space-5)}
}

/* =====================================================================
   20 · The crane card (cohort 3). The editable field, the More
   disclosure, the photo strip, a signature, the fixed dialog.
   ===================================================================== */
/* an editable field: the value is a real input or a select in the same
   right-aligned clothes; the whole card is its label */
.qk-field--input{cursor:text}
.qk-field__value{flex:1}
input.qk-field__value,select.qk-field__value{
  appearance:none;-webkit-appearance:none;padding:0;margin:0;
  height:auto;line-height:var(--qk-line-body);outline:none;color:var(--qk-ink);
  text-align:right;border-radius:0;
}
input.qk-field__value::placeholder{color:var(--qk-ink-3);font-weight:400;opacity:1}
select.qk-field__value{appearance:auto;-webkit-appearance:auto;text-align-last:right;cursor:pointer;background:transparent}
/* a field whose value runs long (a name, an address, a customer) stacks:
   the label above, the box beneath, the whole width, so nothing is cut */
/* the stacked field's box is the goldens' (.field.stack{padding:10px 16px 12px}, Office-SignSheet / Office-Certificate): 66 tall with its 13 label */
.qk-field--stack{flex-direction:column;align-items:stretch;gap:var(--qk-space-1);padding:10px 16px 12px}
.qk-field--stack .qk-field__label{font-size:13px}
.qk-field--stack .qk-field__value{text-align:left;width:100%}
.qk-field--stack select.qk-field__value{text-align-last:left}
/* a field's own note, under its value: the manual's floor under Frequency (17 Sep 2026) */
.qk-field__note{display:block;font-size:13px;line-height:1.4;color:var(--qk-ink-3);margin-top:var(--qk-space-1)}
input.qk-field__value::-webkit-date-and-time-value{text-align:right}
input.qk-field__value::-webkit-calendar-picker-indicator{opacity:.55}
.qk-field--input:focus-within{box-shadow:var(--qk-shadow);background:var(--qk-on-pill)}   /* a field being typed in lifts a shade, never a border (Sam, 10 Sep 2026: 'nowhere else on the app are we using borders') */
/* A DATE FIELD (Office-Certificate "Runs out on", 6 Sep 2026): the date reads as the field's own text with the edit caret;
   the native date picker lies invisible over the whole field, so a tap anywhere opens it and Chrome's taller date
   control never sets the field's height (it read 68 against the golden's 52 as a plain input) */
.qk-field--date{position:relative;cursor:pointer}
.qk-field__date{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font:inherit}

/* the More disclosure: a mini quiet button that opens a 2-up grid */
.qk-more{display:block;margin:0;padding:0;border:0;background:none}
.qk-more>summary{list-style:none;cursor:pointer}
.qk-more>summary::-webkit-details-marker{display:none}
.qk-more>summary::marker{content:""}
.qk-more__b{display:grid;grid-template-columns:1fr 1fr;gap:var(--qk-space-2);margin-top:var(--qk-space-2)}
.qk-more__b>.qk-btn{width:100%;padding:0 var(--qk-space-3)}
.qk-more__b>.qk-btn:only-child{grid-column:1/-1}
.qk-more__b--stack{display:flex;flex-direction:column;gap:var(--qk-air)}
/* the lone More under a line of actions takes the whole line */
.qk-btn-row>.qk-more>summary{width:100%}
/* a field inside a card sits on the field fill, never white on white */
.qk-card .qk-field{background:var(--qk-field);box-shadow:none}
.qk-card .qk-field--input:focus-within{box-shadow:none;background:var(--qk-on-pill)}
.qk-field__value--wrap{white-space:normal;overflow:visible;text-overflow:clip;line-height:var(--qk-line-body)}
/* the hour meter as a shape: twelve readings, one line, the last one a dot */
.qk-spark{flex:none;display:block;width:76px;height:22px;overflow:visible}
.qk-spark path{fill:none;stroke:var(--qk-ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qk-spark circle{fill:var(--qk-ink)}

/* photographs: 86 tiles, the Remove on the corner, the caption beneath */
.qk-photos{display:flex;flex-wrap:wrap;gap:var(--qk-space-3) var(--qk-space-2)}
.qk-photo{position:relative;width:86px;display:flex;flex-direction:column;gap:var(--qk-space-1)}
.qk-photo__o{
  display:block;width:86px;height:86px;border-radius:var(--qk-radius-tile);
  overflow:hidden;border:0;padding:0;background:var(--qk-soft);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--qk-edge);
}
.qk-photo__o img{width:100%;height:100%;object-fit:cover;display:block}
.qk-photo__x{
  position:absolute;top:-6px;right:-6px;width:24px;height:24px;
  border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--qk-primary-bg);color:var(--qk-primary-fg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--qk-shadow-primary);
}
.qk-photo__x .qk-i{width:12px;height:12px;stroke-width:2.5}
.qk-photo__cap{font-size:var(--qk-size-tiny);line-height:var(--qk-line-tight);color:var(--qk-ink-3);overflow-wrap:anywhere}
.qk-photo__wait{
  width:86px;height:86px;border-radius:var(--qk-radius-tile);background:var(--qk-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 var(--qk-space-2);font-size:var(--qk-size-small);
  font-weight:var(--qk-weight-semi);color:var(--qk-ink-3);line-height:var(--qk-line-tight);
}

/* a signature, on paper, in either mode */
.qk-ink{
  display:block;width:100%;max-width:320px;height:auto;
  background:var(--qk-paper);border-radius:var(--qk-radius-box);
  box-shadow:inset 0 0 0 1px var(--qk-rule);
}
/* a PIN shown once: the display face, spaced */
.qk-pin{letter-spacing:.2em}

/* a dialog over a page that scrolls the document: fixed, centred, above
   the bar (the goldens' centred confirm, 420 wide at most) */
.qk-dialog--fixed{
  position:fixed;bottom:auto;left:var(--qk-space-5);right:var(--qk-space-5);
  margin:0 auto;max-width:420px;z-index:var(--qk-z-sheet);
  /* on the phone it sits where every signed dialog sits — the golden
     .dlg{top:300px} (gen.py's .dlg rule; DialogLight measured 300 on 7 Sep
     2026), the kit's own .qk-dialog{top:300px} above — not centred on its
     own height (which put it at 282 over Fleet and 295 over Settings;
     de-drift pass, C6). It is centred only on the wider frames. */
}
/* NEVER TALLER THAN THE SCREEN (26 Sep 2026: a tie back's eight fields ran Save off the bottom of a phone): a dialog scrolls inside
   itself; a tall one (--tall) rises to the top of the screen first */
.qk-dialog--fixed{max-height:calc(100dvh - 300px - var(--qk-space-4));overflow-y:auto;overscroll-behavior:contain}
.qk-dialog--fixed>*{flex-shrink:0}
.qk-dialog--fixed.qk-dialog--tall{top:calc(env(safe-area-inset-top, 0px) + var(--qk-space-4));max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 2 * var(--qk-space-4))}
@media (min-width:780px){
  .qk-dialog--fixed{top:50%;transform:translateY(-50%);max-height:calc(100dvh - 2 * var(--qk-space-4))}
  .qk-dialog--fixed.qk-dialog--tall{top:50%}
}

/* =====================================================================
   21 · The Schedule and the visit (cohort 4). A disclosure whose summary
   is a row, the check row with its square, the finish moment, a field
   that is a button, a note in a field's clothes.
   ===================================================================== */
/* a row as a disclosure's summary (a lane, a machine in the records) or
   as a label (a crane to tick on Also apply) */
summary.qk-row{list-style:none;cursor:pointer}
summary.qk-row::-webkit-details-marker{display:none}
summary.qk-row::marker{content:""}
label.qk-row{cursor:pointer}
.qk-disc{display:block;margin:0;padding:0;border:0;background:none}
.qk-disc[open]>summary .qk-chev{transform:rotate(90deg)}
.qk-disc__b{display:flex;flex-direction:column;gap:var(--qk-air);margin-top:var(--qk-air)}
.qk-disc__b:empty{display:none}
/* an empty container on a stack takes no air (a list drawn later) */
.qk-stack>div:empty{display:none}
/* the ring-ⓘ leading a row: TPC's information mark hard left, hanging
   into the row's edge as it does on the right */
.qk-info--lead{margin:-10px 0 -10px -12px}
/* a row as the head line of a card (the check row: the card is white,
   the row inside it carries no chrome of its own), and the card's body
   beneath it (the entry that opens under a check) */
.qk-row--flush,.qk-card>.qk-row--flush{background:transparent;box-shadow:none}
.qk-card__body{padding:0 var(--qk-space-4) var(--qk-space-4);display:flex;flex-direction:column;gap:var(--qk-space-2)}
.qk-card--flush>.qk-row--flush+.qk-card__body{padding-top:0}
/* a name that must read whole, however long (a check on the board: the
   row IS the work, so it never clamps) */
.qk-row__name--whole{white-space:normal;overflow:visible;text-overflow:clip;display:block;line-height:1.25}
/* a sub-line that reads whole beneath it (the book's interval and the greasing product on a schedule row) */
.qk-row__sub--wrap{white-space:normal;overflow:visible;text-overflow:clip}
/* a row name at 600 (Self-SentLight's sent rows) and the compact name of a person's card (Self-PeopleLight: 15.5/600) */
.qk-row__name--strong{font-weight:600}
.qk-row__name--compact{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
/* a button row at the list's left edge (Office-CertTypes: Add a type) */
.qk-btn-row--start{justify-content:flex-start}
/* a row name that wraps at the body's own line-height and is never
   clipped — the golden's plain `.n` (20.9 tall on one line, so the row
   reads 63 with its sub-line) where --wrap and --whole clamp at 1.25
   (goldens/Office-VisitBoard.html's check rows). Composition de-drift,
   5 Sep 2026. */
.qk-row__name--flow{white-space:normal;overflow:visible;text-overflow:clip;display:block}
/* the check row: the square in its 44 slot, the row at least 66 */
.qk-row--check{min-height:var(--qk-row-check)}
.qk-check-slot{
  width:var(--qk-tap);height:var(--qk-tap);flex:none;
  display:flex;align-items:center;justify-content:center;
  margin:-10px -8px -10px 0;
}
/* a native checkbox in the square's clothes */
input.qk-check{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;
  background:transparent;cursor:pointer;position:relative;
}
input.qk-check:checked{background:var(--qk-ok);box-shadow:none}
input.qk-check:checked::after{
  content:"";position:absolute;left:10px;top:5px;width:6px;height:12px;
  border:solid var(--qk-ok-fg);border-width:0 2.25px 2.25px 0;transform:rotate(45deg);
}
/* a field that is a button (tap to change), its value on two lines */
button.qk-field{width:100%;border:0;font-family:inherit;text-align:left;cursor:pointer;color:inherit}
.qk-field__value--two{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  white-space:normal;overflow:visible;text-overflow:clip;
}
.qk-field__value--two b{font-weight:var(--qk-weight-semi)}
.qk-field__value--two em{font-style:normal;font-size:var(--qk-size-caption);color:var(--qk-ink-3);font-weight:400}
/* a note in a field's clothes: the label above, the box the whole width */
textarea.qk-field__value{
  appearance:none;-webkit-appearance:none;width:100%;margin:0;padding:0;
  text-align:left;line-height:var(--qk-line-body);outline:none;resize:none;
  color:var(--qk-ink);border-radius:0;min-height:0;
}
textarea.qk-field__value::placeholder{color:var(--qk-ink-3);font-weight:400;opacity:1}
/* the note area as a real box to type in */
textarea.qk-area{color:var(--qk-ink);display:block;outline:none;resize:none;appearance:none;-webkit-appearance:none}
textarea.qk-area::placeholder{color:var(--qk-ink-3);opacity:1}
textarea.qk-area:focus{outline:none;background:var(--qk-on-pill)}
/* a row in an anchor's clothes (a link to a file) */
a.qk-row{text-decoration:none;color:inherit;cursor:pointer}
/* prose that keeps its line breaks (a manual's note as written) */
.qk-prose--lines{white-space:pre-line}
/* a line that says something only when there is something to say */
.qk-msg{font-size:var(--qk-size-caption);color:var(--qk-ink-2);line-height:var(--qk-line-body)}
.qk-msg:empty{display:none}
.qk-sheet__sub:empty{display:none}
/* the finish moment: the whole screen, the green disc, two lines, a tap
   anywhere takes it away */
.qk-okdisc{
  width:var(--qk-okdisc);height:var(--qk-okdisc);border-radius:50%;flex:none;
  background:var(--qk-ok);color:var(--qk-ok-fg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--qk-shadow-primary);
  animation:qk-pop var(--qk-duration) var(--qk-ease) both;
}
.qk-okdisc .qk-i{width:40px;height:40px;stroke-width:2.25}
.qk-finish{
  position:fixed;inset:0;z-index:var(--qk-z-lock);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--qk-space-3);padding:var(--qk-space-5);text-align:center;cursor:pointer;
  background:var(--qk-scrim);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  color:var(--qk-paper);font-family:var(--qk-font-body);
  animation:qk-fade var(--qk-duration) var(--qk-ease) both;
}
.qk-finish.is-out{animation:qk-fade var(--qk-duration) var(--qk-ease) reverse both}
.qk-finish__title{color:var(--qk-paper);margin-top:var(--qk-space-3)}
.qk-finish__line{font-size:var(--qk-size-name);line-height:var(--qk-line-body);opacity:.8;max-width:var(--qk-door-w)}

/* =====================================================================
   22 · The + sheet, the maker and the binder (cohort 7). The tile-card
   grid the + sheet's fourteen doors stand in, the numbered tile a
   binder section wears, the small stat tiles across a detail's head,
   and a link handed over in a real box.
   ===================================================================== */
/* two tile-cards to a line; a whole job (--wide) takes the line */
/* the tile-cards stand the list's air apart and carry it inside, and their
   name is 15 — the signed + sheet (Office-Plus.html: .tiles{gap:10px},
   .tilecard{gap:10px}, .tilecard .n{font-size:15px}); the kit drew 8 / 8 /
   15.5 (de-drift pass). */
.qk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--qk-air)}
.qk-tiles[hidden]{display:none}
/* a field kept only for its save path (the hidden monthly rate) */
.qk-field[hidden]{display:none}
.qk-tilecard{
  background:var(--qk-card);border:0;border-radius:var(--qk-radius-card);
  padding:14px;display:flex;flex-direction:column;gap:var(--qk-air);
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
  text-align:left;cursor:pointer;
  font-family:inherit;color:var(--qk-ink);min-height:var(--qk-tap);
}
.qk-tilecard[hidden]{display:none}
.qk-tilecard--wide{grid-column:1 / -1;flex-direction:row;align-items:center}
.qk-tilecard__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.qk-tilecard__t b{
  font-size:var(--qk-size-sub);font-weight:var(--qk-weight-semi);
  letter-spacing:var(--qk-track-tight);line-height:var(--qk-line-tight);
  color:var(--qk-ink);
}
.qk-tilecard__t small{
  font-size:var(--qk-size-small);color:var(--qk-ink-3);
  line-height:var(--qk-line-body);
}
/* the numbered tile: a binder section is known by its number */
.qk-tile--num{
  font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);
  color:var(--qk-ink-2);
}
/* small stat tiles across the head of a detail (the binder's counts) */
/* the tiles are the list's air apart and their number is 36 — the signed
   binder and expiries screens (.stats{gap:10px}, .disp at 36px); the kit
   drew them 8 apart with the 30 "big" number and every list beneath them
   sat 6 px high (de-drift pass). */
.qk-stats{display:flex;gap:var(--qk-air)}
/* PROGRESS (cohort 10, goldens v2 Renter-Maint): the "This week · 1 of 4" card — the value 17/500 ink, tabular; the 6 px track, radius 3, the fill in ok green */
.qk-progress{height:6px;border-radius:3px;background:var(--qk-soft);overflow:hidden}
.qk-progress>i{display:block;height:100%;background:var(--qk-ok);border-radius:3px;transition:width .3s ease}
.qk-progress__v{font-size:15px;font-weight:500;color:var(--qk-ink-2);font-variant-numeric:tabular-nums;margin-left:auto}   /* Renter-Maint: .v 15px #4A5563 */
/* a tile that is a photograph (a finished item's thumbnail on its row) */
.qk-tile--photo{padding:0;overflow:hidden}.qk-tile--photo img{width:100%;height:100%;object-fit:cover;display:block}
/* PAGES (cohort 10, Renter-Manual): the manual's cited pages as a snapped strip, one page per swipe, its caption beneath */
.qk-pages{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.qk-pages::-webkit-scrollbar{display:none}
.qk-pages__p{flex:0 0 100%;scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:8px}
.qk-pages__p img{display:block;width:100%;height:auto}
/* a row that is a search field (Renter-Reader): the glyph leads, the input is bare inside the row */
.qk-row__input{flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;outline:none;padding:0}
.qk-row__input::placeholder{color:var(--qk-muted, #7A8594)}
/* a found word in a reader */
.qk-prose mark.pp-m{background:var(--qk-warn-bg);color:inherit;border-radius:3px;padding:0 1px}
/* the signature pad (the sign sheet): the hairline box, green once there is ink */
.qk-pad{display:block;width:100%;height:150px;border-radius:var(--qk-radius-card);box-shadow:inset 0 0 0 1.5px var(--qk-rule);background:var(--qk-soft);color:var(--qk-ink);touch-action:none}   /* the sheet's own tone, the page's ink (Sam, 18 Sep 2026: not white in the dark); the record is re-inked dark on the way out */   /* the card's grey, the page's ink (Sam, 10 Sep 2026: 'Not white.') */
.qk-pad.is-ink{box-shadow:inset 0 0 0 1.5px var(--qk-ok)}
/* the renter goldens' small chip (Renter-Maint Photo, Renter-Reader Part N): 28 tall, 12.5 */
.qk-chip--sm{height:28px;font-size:12px;padding:0 10px}
/* the filter strip (Sam, 6 Sep 2026, the customer's timeline: "arrange the buttons better"): small chips on ONE line that slides sideways, never wraps */
.qk-chips--strip{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qk-chips--strip::-webkit-scrollbar{display:none}
.qk-chips--strip>.qk-chip{flex:none;height:28px;font-size:12px;padding:0 10px}
/* a section head with the goldens' 8 of air above it (Renter-Documents / Binder / Procedures .h) */
.qk-section--air{padding-top:var(--qk-space-2)}
/* a card padded 14 all round (Renter-BinderOpen) */
.qk-card--snug{padding:14px}
/* a button row with its two ends apart (Renter-MaintOpen: Add photo left, Save right) */
.qk-btn-row--ends{justify-content:space-between}
/* a row that is a search field: the goldens' 44 pill (Renter-Reader) */
.qk-row--search{min-height:44px;border-radius:999px;padding:0 14px}
/* a section head that is a tap (the renter board's Monthly fold): the browser's button clothes off, the section's own kept */
button.qk-section{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0 0 0 21px;width:100%;text-align:left;font:inherit;font-size:17px;font-weight:var(--qk-weight-semi);letter-spacing:0;text-transform:none;color:var(--qk-ink-3);cursor:pointer}   /* the section's own eyebrow metrics (Renter-Maint .h 11.5/600, 7 Sep 2026) */
.qk-section__chev{margin-left:auto;display:inline-flex;align-self:center;transition:transform .18s ease}
.qk-section__chev .qk-chev{transform:rotate(90deg)}
.is-open .qk-section__chev .qk-chev{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.qk-section__chev{transition:none}}
/* a sheet title at the goldens' 22 (Renter-MaintInfo, Renter-SignSheet) */
.qk-size-title-md{font-size:var(--qk-size-title-md)}
/* an empty state's tile is the goldens' 56 (Renter-Rigging) */
.qk-empty__tile .qk-tile{width:56px;height:56px;border-radius:16px}
/* the disc in a dialog is the goldens' 84 (Renter-Signed) */
.qk-dialog .qk-okdisc{width:64px;height:64px;margin:0 auto}
.qk-dialog .qk-okdisc+.qk-display{margin-top:6px}
.qk-dialog .qk-okdisc~.qk-muted,.qk-dialog .qk-okdisc~.qk-sub{margin-bottom:10px}
.qk-stats .qk-stat .qk-display{font-size:var(--qk-size-stat)}
.qk-stats .qk-stat{
  flex:1;background:var(--qk-card);border-radius:var(--qk-radius-card);
  padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;
  gap:var(--qk-space-1);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
  min-width:0;text-align:center;
}
.qk-stats .qk-stat .qk-sub{font-size:var(--qk-size-small)}
.qk-stat--bad .qk-display{color:var(--qk-bad)}
.qk-stat--warn .qk-display{color:var(--qk-warn)}
/* a link handed over: a real box he can select, in the field's clothes */
input.qk-link{
  width:100%;box-sizing:border-box;min-height:var(--qk-btn-mini);
  padding:10px 14px;border:0;border-radius:var(--qk-radius-field);
  background:var(--qk-field);box-shadow:inset 0 0 0 1.5px var(--qk-rule);
  font:inherit;font-size:var(--qk-size-small);color:var(--qk-ink);
  font-variant-numeric:tabular-nums;
}
input.qk-link:focus{outline:none;background:var(--qk-on-pill)}
/* a message line that has gone wrong says so plainly */
.qk-msg--bad{color:var(--qk-bad)}
/* a filed document's row: the file itself in the tile's frame, and the
   words as a link in the row's own clothes */
.qk-tile img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
a.qk-tile{overflow:hidden;cursor:pointer;color:inherit;text-decoration:none}
a.qk-row__main{text-decoration:none;color:inherit;cursor:pointer;min-width:0}

/* =====================================================================
   28 · Settings and the rest (cohort 8): the checkbox-driven switch, the
   tour, the photo lightbox, the marking layer and the photo grid.
   Extended here once, used by the office — never patched in a screen.
   ===================================================================== */
/* A kit switch driven by the host's own checkbox. Settings' data-alert /
   data-feel / fingerprint switches keep their checkboxes (their handlers
   read .checked); the box is invisible, the kit switch shows its state. */
label.qk-row--switch{cursor:pointer}
.qk-row--switch input[type="checkbox"]{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.qk-row--switch input[type="checkbox"]:checked~.qk-switch{background:var(--qk-ok)}
.qk-row--switch input[type="checkbox"]:checked~.qk-switch i{left:23px}
.qk-row--switch input[type="checkbox"]:focus-visible~.qk-switch{outline:2px solid var(--qk-ink-3);outline-offset:2px}

/* The tour: one spotlight box whose spread shadow IS the dim, and the kit
   card beside it. Everything but the card takes no taps, so the office
   underneath stays alive at every step. */
.qk-tour{position:fixed;inset:0;z-index:var(--qk-z-lock);pointer-events:none}
/* THE TOUR, PREMIUM (Sam, 23 Sep 2026: "The tour looks like shit"): a spotlight, not a yellow box - the page dims to near black and the
   thing being shown keeps its own light behind a gold hairline and a soft halo; the card is the kit's card with a chapter eyebrow, a
   thin gold progress line, one sentence, and Back / Next as two pills. */
.qk-tour__hole{
  position:absolute;border-radius:var(--qk-radius-card);
  box-shadow:0 0 0 1.5px rgba(255,206,5,.9),0 0 0 7px rgba(255,206,5,.12),0 0 36px 6px rgba(255,206,5,.16),0 0 0 100vmax rgba(0,0,0,.76);
  transition:left var(--qk-duration) var(--qk-ease),top var(--qk-duration) var(--qk-ease),
             width var(--qk-duration) var(--qk-ease),height var(--qk-duration) var(--qk-ease);
}
.qk-tour__card{
  position:absolute;pointer-events:auto;width:min(340px,calc(100vw - 24px));padding:var(--qk-space-4) var(--qk-space-4) var(--qk-space-4);
  border-radius:var(--qk-radius-card);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.6);overflow:hidden;
  transition:left var(--qk-duration) var(--qk-ease),top var(--qk-duration) var(--qk-ease);
}
.qk-tour__card:focus{outline:none}
.qk-tour__bar{position:absolute;left:0;top:0;height:3px;background:var(--qk-gold);border-radius:0 2px 2px 0;transition:width var(--qk-duration) var(--qk-ease)}
.qk-tour__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--qk-space-3);margin:2px 0 var(--qk-space-2)}
.qk-tour__eyebrow{font-size:11px;font-weight:var(--qk-weight-semi);letter-spacing:.12em;text-transform:uppercase;color:var(--qk-gold)}
.qk-tour__lbl{font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);color:var(--qk-ink-3);font-variant-numeric:tabular-nums;margin-left:auto}
.qk-tour__lbl--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qk-tour__skip{background:none;border:0;padding:6px 0 6px 12px;margin:-6px 0;font:inherit;font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);color:var(--qk-ink-3);cursor:pointer}
.qk-tour__say{margin:0 0 var(--qk-space-3);font-size:17px;font-weight:var(--qk-weight-medium);line-height:1.45;color:var(--qk-ink);letter-spacing:-.005em}
.qk-tour__acts{display:flex;align-items:center;gap:var(--qk-space-2);margin-top:2px}
.qk-tour__acts .qk-btn{flex:1 1 0;width:auto;height:var(--qk-btn-mini)}
@media (prefers-reduced-motion:reduce){.qk-tour__hole,.qk-tour__card{transition:none}}

/* One photograph, as big as the glass allows. */
.qk-phbig{
  position:fixed;inset:0;z-index:var(--qk-z-lock);background:var(--qk-scrim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--qk-space-3);padding:var(--qk-space-4);
}
.qk-phbig img{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;border-radius:var(--qk-radius-card)}
.qk-phbig__cap{margin:0;color:var(--qk-paper);font-size:var(--qk-size-caption);line-height:var(--qk-line-body);text-align:center;max-width:var(--qk-door-w)}
.qk-phbig .qk-btn--quiet{background:var(--qk-card);box-shadow:none}

/* The marking layer: a finger, one line, Undo. The canvas needs the whole
   screen, so this layer keeps it. */
.qk-markback{
  position:fixed;inset:0;z-index:var(--qk-z-lock);background:var(--qk-scrim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--qk-space-3);padding:var(--qk-space-4);
}
.qk-markback__b{flex:1;min-height:0;width:100%;display:grid;place-items:center}
.qk-markback__b canvas{max-width:100%;max-height:100%;border-radius:var(--qk-radius-card);touch-action:none;background:var(--qk-ink)}
.qk-markback__a{display:flex;gap:var(--qk-space-2);flex-wrap:wrap;justify-content:center;width:100%;padding-bottom:var(--qk-safe-bottom)}
.qk-markback__a .qk-btn--primary{flex:1 1 160px;width:auto}
.qk-markback__a .qk-btn--quiet{background:var(--qk-card);box-shadow:none}

/* The gallery: the photo tiles on a fill grid, grouped under kit sections. */
.qk-photos--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--qk-space-2)}
.qk-photos--grid .qk-photo{width:auto}
.qk-msg--ok{color:var(--qk-ok)}
/* a card's own head line as the tap into its detail (People, cohort 8) */
button.qk-line{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;display:flex;align-items:center;gap:var(--qk-air)}
/* an enquiry's card (Office-Enquiry): the eyebrow, a 17/600 line, the message at 15 — 6 apart */
.qk-card--tight{gap:6px}
.qk-card__h{font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);letter-spacing:-.01em;color:var(--qk-ink)}
.qk-prose--sm{font-size:15px}
/* the renter's This-week card (Renter-Maint: padding 14 16, gap 8) */
.qk-card--progress{padding:14px 16px;gap:var(--qk-space-2)}

/* =====================================================================
   19 · Astra's door pieces (Sam, 7 Sep 2026: identical). The seal is the
   company's round mark: QnQ's lettermark on the primary disc, 112 on the
   door under a soft shadow, 36 on the rail. The field row is a white 56
   card row with the words inside; the logotype is the display face at 30.
   ===================================================================== */
.qk-seal{
  width:112px;height:112px;border-radius:56px;flex:none;
  background:var(--qk-primary-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.qk-seal__img{width:82px;height:auto;display:block}
.qk-seal--sm{width:36px;height:36px;border-radius:18px;box-shadow:none}
.qk-seal--sm .qk-seal__img{width:26px}
.qk-door__logotype{
  margin:var(--qk-space-5) 0 0;text-align:center;
  font-family:var(--qk-font-display);font-weight:var(--qk-weight-title);
  font-size:var(--qk-size-big);letter-spacing:.01em;line-height:.95;
  text-transform:uppercase;color:var(--qk-ink);
}
/* the company inside Datum, under the wordmark (QnQ is Datum — Sam, 9 Sep 2026) */
.qk-door__company{margin:var(--qk-space-4) 0 0;text-align:center;font-size:var(--qk-size-sub);font-weight:var(--qk-weight-semi);letter-spacing:-.01em;color:var(--qk-ink)}
.qk-door__ask{margin:var(--qk-space-2) 0 0;font-size:var(--qk-size-name);color:var(--qk-ink-2);text-align:center}
.qk-door__field{
  box-sizing:border-box;width:100%;height:56px;margin-top:var(--qk-space-6);
  display:flex;align-items:center;justify-content:center;gap:var(--qk-space-3);padding:0 18px;
  border-radius:var(--qk-radius-card);background:var(--qk-card);
  box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
}
.qk-door__field>.qk-input{
  flex:1;min-width:0;height:auto;margin:0;padding:0;border:0;box-shadow:none;background:transparent;
  font-size:var(--qk-size-number);text-align:center;letter-spacing:.2em;color:var(--qk-ink);
}
/* THE ENTRY RULE (7 Sep 2026, after Sam's "Research what other major apps do"): a phone number or an email reads
   from the left of its row (Astra's door); a PIN or a code sits in the middle as centred dots, the pattern the
   major apps use. The row is Astra's; only the words inside follow the kind of entry. Empty, faint dots. */
.qk-door__field>.qk-input::placeholder{letter-spacing:.2em;color:var(--qk-rule)}
.qk-door__field>.qk-input:focus{outline:none;box-shadow:none}
/* a NAME in the door's field (Renter-NameCard: "Type your name" centred in the body's 17, grey): no dots, no tracking */
.qk-door__field--text>.qk-input{font-size:var(--qk-size-row);letter-spacing:0}
.qk-door__field--text>.qk-input::placeholder{letter-spacing:0;color:var(--qk-ink-3)}
.qk-door .qk-door__title+.qk-door__field{margin-top:18px}   /* Renter-NameCard: the title to the name box is 18 (the PIN row's 32 is the door's) */
.qk-door .qk-door__field+.qk-eyebrow{margin-top:var(--qk-space-4)}   /* Renter-NameCard: the name box to 'What you do here' is 16, as the bare input's was */
.qk-door--astra{
  max-width:none;background:none;border-radius:0;padding:0;box-shadow:none;animation:none;
}
/* the door's body: Astra's flow from the top under the glow, 24 in, nothing lifted to the centre */
.qk-body--door:has(>.qk-door--astra),.qk-body--door.qk-body--astra{
  justify-content:flex-start;align-items:stretch;gap:0;
  padding:var(--qk-space-5) var(--qk-space-4) 0;
  background:radial-gradient(circle at 50% 110px, var(--qk-card) 0, var(--qk-ground) 240px);
}
.qk-door--astra>*{animation:none}
.qk-door--astra>.qk-door__field~.qk-btn,.qk-door--astra .qk-door__field~.qk-btn{margin-top:var(--qk-space-4)}   /* and inside a display:contents wrapper (the Datum door groups the field, the line and Continue) */   /* DoorLight: the PIN row to Continue is 16; the empty error line stands between them, and this outranks .qk-door .qk-door__err+.qk-btn's 14 */
/* the mark centred in the band Astra's seal and name take, so the line, the row and Continue land where Astra's do */
.qk-door--astra>.qk-door__logo{margin-top:44px}
.qk-door--astra>.qk-door__ask{margin-top:52px}
/* ONE DOOR FOR EVERY COMPANY (Sam, 15 Sep 2026: "I want all companies using 1 consistent login screen. The only thing
   changing is their logo."): the Datum door's anatomy, measured at 390 — one mark box, 168 by 112, the company's mark
   centred inside it, wide or round, so nothing below it ever moves; the ask 32 under the box; the field 32 under the
   ask; Continue 16 under; one quiet note under Continue; the language chip and the credit at the foot. */
.qk-door__mark{width:var(--qk-door-logo);height:112px;align-self:center;display:flex;align-items:center;justify-content:center;line-height:0}
.qk-door__mark .qk-logo{margin:0;max-width:100%;max-height:112px;width:auto;height:auto;object-fit:contain}   /* a round seal keeps its proportions inside the box; a wide mark fills it */
.qk-door__mark svg{display:block;width:100%;height:auto;max-height:112px}   /* a traced wordmark (the Datum door) sits in the same box */
.qk-door__mark svg path{fill:currentColor}
.qk-door--astra>.qk-door__mark{margin-top:44px}
.qk-door--astra>.qk-door__mark+.qk-door__ask{margin-top:32px}
.qk-door--astra>.qk-btn+.qk-door__note{margin-top:14px}
.qk-door--astra .qk-door__field~.qk-door__note{margin-top:var(--qk-space-4)}   /* with no Continue on the PIN step the note takes Continue's line: 16 under the field, the empty error line between */   /* the door's own rhythm (the Datum door Sam measured: the note 14 under Continue) */
button.qk-door__note{background:none;border:0;cursor:pointer;display:block;-webkit-appearance:none;appearance:none;color:var(--qk-ink-2)}
.qk-door__foot--bottom{margin-top:auto;padding-top:var(--qk-space-4);padding-bottom:24px}
/* THE PIN AS DOTS (Sam, 15 Sep 2026: "Is 1 a good idea? No submit?" → yes): the field is N hollow dots that fill as the
   digits are typed and the door opens on the last one — no Continue on that step. The row is the door's field; the real
   input lies over it unseen, so a tap opens the phone's number pad; the app submits at N and marks a wrong PIN .is-bad
   (the kit shakes it), then clears the digits. */
.qk-door__field--pin{position:relative;cursor:pointer}
.qk-door__field--pin>.qk-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;color:transparent;caret-color:transparent;cursor:pointer}
.qk-pin__dots{display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.qk-pin__dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--qk-rule);background:transparent;transition:background var(--qk-duration) var(--qk-ease),box-shadow var(--qk-duration) var(--qk-ease)}
.qk-pin__dot.is-on{background:var(--qk-ink);box-shadow:none}
.qk-door__field--pin.is-bad{animation:qk-nudge var(--qk-duration) var(--qk-ease) both;box-shadow:var(--qk-shadow),inset 0 0 0 1.5px var(--qk-bad)}
.qk-door__field--pin.is-bad .qk-pin__dot.is-on{background:var(--qk-bad)}
/* THE WELCOME IS THE DOOR'S NEXT FRAME (Sam, 15 Sep 2026: logo + greeting, "a smooth transition where the login screen
   morphs into this and the logo slides up… zero seam… super super clean and smooth"): on an accepted PIN the door's
   lines fade, the mark glides up, the greeting fades in under it; the app's first frame paints the same picture. */
.qk-shell.is-welcome .qk-door__ask,.qk-shell.is-welcome .qk-door__field,.qk-shell.is-welcome .qk-door__err,.qk-shell.is-welcome .qk-btn,.qk-shell.is-welcome .qk-door__note,.qk-shell.is-welcome .qk-door__foot{animation:none;opacity:0;transition:opacity .26s ease;pointer-events:none}
.qk-shell.is-welcome .qk-door__mark{animation:none;transform:translateY(-24px);transition:transform .64s cubic-bezier(.16,1,.3,1)}
.qk-welcome{position:fixed;left:0;right:0;top:50%;margin-top:-37px;text-align:center;font-family:var(--qk-font-body);pointer-events:none;opacity:0;transform:translateY(14px);transition:opacity .42s ease .18s,transform .64s cubic-bezier(.16,1,.3,1) .18s}
.qk-shell.is-welcome .qk-welcome{opacity:1;transform:none}
.qk-welcome__word{font-size:17px;line-height:20px;color:var(--qk-ink-2)}
.qk-welcome__name{margin-top:6px;padding:0 24px;font-size:44px;line-height:48px;font-weight:600;letter-spacing:-.02em;color:var(--qk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-welcome__line{margin-top:14px;font-size:15px;line-height:20px;color:var(--qk-ink-3);opacity:0;transition:opacity .36s ease}   /* the honest line when the office is still assembling after the beat */
.qk-welcome__line.is-in{opacity:1}
.qk-shell.is-leaving{opacity:0;transition:opacity .36s ease;pointer-events:none}   /* the door with its greeting fades as the office rises under it */
/* THE STILL DOOR AFTER AN ACCEPTED PIN (Sam, 15 Sep 2026, on the Two Pillars door: "Should we even have the welcome screen?
   … Ok do that. Do it cleanly."): the field, Continue, the error line, the note and the chip dissolve in 220 ms; the mark does
   not move; the ask line fades out and comes back in the same slot as the honest line (.is-in); the office fades in the
   instant it is ready — no beat, no hold, the same face on every open. Nothing moves but two fades. */
.qk-shell.is-wait .qk-door__field,.qk-shell.is-wait .qk-door__err,.qk-shell.is-wait .qk-btn,.qk-shell.is-wait .qk-door__note,.qk-shell.is-wait .qk-door__group,.qk-shell.is-wait .qk-door__foot{animation:none;opacity:0;transition:opacity .22s ease;pointer-events:none}
.qk-shell.is-wait .qk-door__mark{animation:none}
.qk-shell.is-wait .qk-door__ask{animation:none;opacity:0;transition:opacity .22s ease}
.qk-shell.is-wait .qk-door__ask.is-in{opacity:1}
/* THE WAIT RING (Sam, 15 Sep 2026, with DoorDash's launch screen as his reference: "Show a nice spinning wheel or
   something", then "Make it better"): a thin broken ring — three dashes of three lengths (40, 22, 14 on a 132
   circumference, so the pattern closes), round caps — 48 wide in the middle of the glass, turning once a second in the
   company's own accent (the door sets the colour inline: QnQ's gold), fading in with the honest line. Its rotation is
   keyed to the wall clock (animationDelay = -(now % 1000) ms) so a door that changes documents shows the wheel at the
   same angle on both sides. Datum's final numbers, one set for every door. */
.qk-wait-ring{position:fixed;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;opacity:0;transition:opacity .3s ease;pointer-events:none;color:var(--qk-ink-3)}
.qk-shell.is-wait .qk-wait-ring.is-in{opacity:1}
.qk-wait-ring svg{width:48px;height:48px;display:block;animation:qkWaitRing 1s linear infinite}
.qk-wait-ring circle{fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-dasharray:40 18.65 22 18.65 14 18.65}
@keyframes qkWaitRing{to{transform:rotate(360deg)}}
}   /* the door with its greeting fades as the office rises under it */
@media (prefers-reduced-motion:reduce){.qk-shell.is-leaving{transition:none}.qk-shell.is-wait .qk-door__ask,.qk-shell.is-wait .qk-door__field,.qk-shell.is-wait .qk-door__err,.qk-shell.is-wait .qk-btn,.qk-shell.is-wait .qk-door__note,.qk-shell.is-wait .qk-door__group,.qk-shell.is-wait .qk-door__foot{transition:none}.qk-wait-ring{transition:none}.qk-wait-ring svg{animation:none}.qk-shell.is-welcome .qk-door__mark,.qk-shell.is-welcome .qk-door__ask,.qk-shell.is-welcome .qk-door__field,.qk-shell.is-welcome .qk-door__err,.qk-shell.is-welcome .qk-btn,.qk-shell.is-welcome .qk-door__note,.qk-shell.is-welcome .qk-door__foot,.qk-welcome{transition:none}}   /* the language chip sits at the foot, 24 above the credit (Sam, 15 Sep 2026, on the Datum door: "The language is cramped at bottom") */


/* =====================================================================
   THE FLOATING BAR (Sam, 9 Sep 2026: "I want this" · "exact same size" · "Why is ours so thick
   and bold and theirs is so clean?"): thin rounded glyphs at 22, the chosen tab bright in its
   pill, the rest softer; the capsule 60 tall, 19 in, 16 up, a touch lighter than the ground;
   the + a 56 circle with 8 between. Dark in both looks. The desktop keeps the rail.
   ===================================================================== */
@media (max-width:1023px){
  .qk-bar--float{
    position:fixed;left:19px;right:calc(19px + 56px + 8px);bottom:16px;height:60px;border-radius:999px;
    background:var(--qk-float,rgba(31,31,31,.97));color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--qk-float-edge,rgba(255,255,255,.05));
    padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:0;
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:var(--qk-z-bar);
  }
  .qk-bar--float::after{display:none}
.qk-bar--float.qk-bar--nofab{right:19px}   /* a bar with no + beside it runs to the same 19 on both sides (Astra's ask, 15 Sep; the crew's bar, 16 Sep 2026) */
  .qk-bar--float .qk-tab{flex:1 1 auto;min-width:0;padding:0 8px;white-space:nowrap;width:auto;height:48px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(255,255,255,.78);font-size:12px;font-weight:400;letter-spacing:0;transition:background var(--qk-duration) var(--qk-ease),color var(--qk-duration) var(--qk-ease)}
  .qk-bar--float .qk-tab--on{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
  .qk-bar--float .qk-tab__pill{width:auto;height:auto;background:transparent}
  .qk-bar--float .qk-tab__pill .qk-i{width:22px;height:22px;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .qk-bar--float .qk-tab--on .qk-tab__pill .qk-i{stroke-width:1.9}
  .qk-fab{
    position:fixed;right:19px;bottom:18px;width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;
    background:var(--qk-float,rgba(31,31,31,.97));color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--qk-float-edge,rgba(255,255,255,.05));
    display:flex;align-items:center;justify-content:center;z-index:var(--qk-z-bar);
  }
  .qk-fab .qk-i{width:24px;height:24px;stroke-width:1.6;stroke-linecap:round}
  .qk-fab:active{transform:scale(.96)}
  .qk-host{padding-bottom:calc(60px + 16px + 24px) !important}
}
@media (min-width:1024px){ .qk-fab{display:none} }


/* one list style everywhere (Sam, 9 Sep 2026: 'The entire app needs to have consistency'): the grouped card; the pill rows are gone */

/* THE LARGE TITLE: a tab screen's name top left at 34/700, the search a round button beside it */
.qk-hdr--large{height:auto;min-height:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--qk-safe-top) + var(--qk-space-3)) var(--qk-space-4) var(--qk-space-2)}
.qk-hdr--large .qk-hdr__title{position:static;transform:none;width:auto;font-size:34px;font-weight:700;letter-spacing:-.02em;text-align:left;justify-content:flex-start;flex:1;padding:0;margin:0}
.qk-hdr--large .qk-hdr__title span{text-align:left}
.qk-hdr--large>.qk-tap:first-child:empty{display:none}
.qk-hdr--large .qk-hdr__act{width:44px;height:44px;border-radius:50%;background:var(--qk-card);display:flex;align-items:center;justify-content:center;box-shadow:var(--qk-shadow)}


/* THE RECORD HEADER (the direction §12): the thing's name large, its status beside it, one fact line */
.qk-record{display:flex;flex-direction:column;gap:var(--qk-space-2);padding:var(--qk-space-2) var(--qk-space-1) var(--qk-space-2)}
.qk-record__top{display:flex;align-items:center;gap:var(--qk-space-3);flex-wrap:wrap}
.qk-record__name{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.qk-record__facts{font-size:var(--qk-size-sub);color:var(--qk-ink-3)}
.qk-record__go{margin:var(--qk-space-2) 0 0}
.qk-danger{color:var(--qk-bad)}

/* a sheet's title is ink, like every title (the More sheet read blue, 9 Sep 2026) */
.qk-sheet .qk-display--title{color:var(--qk-ink)}
/* THE DASHBOARD'S COUNTS: two by two on a phone, four across from 600 */
.dash-stats .qk-stats{flex-wrap:wrap;gap:10px}
.dash-stats .qk-stat{flex:1 1 calc(50% - 5px);min-width:0}
@media (min-width:600px){.dash-stats .qk-stat{flex:1 1 calc(25% - 8px)}}

/* every screen's words are ink; the office's old paper palette leaked into the big numbers (9 Sep 2026: rgb(195,211,228) on the counts) */
.qk-host,.qk-display{color:var(--qk-ink)}
.qk-stat--bad .qk-display{color:var(--qk-bad)}
/* the counts' words in plain case, like ChatGPT's 'Total Cranes' */
.dash-stats .qk-stat .qk-eyebrow{text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;color:var(--qk-ink-3)}
.dash-stats .qk-stat{padding:14px 14px 12px;gap:2px;align-items:flex-start;text-align:left}
.dash-stats .qk-stat .qk-display{font-size:28px}
.dash-stats .qk-stat>.qk-i{width:24px;height:24px;color:var(--qk-ink-2);margin-bottom:6px;stroke-width:1.6}
.dash-stats .qk-stat--bad>.qk-i{color:var(--qk-bad)}
.dash-stats .qk-stat--ok>.qk-i{color:var(--qk-ok)}
/* the attention rows: the icon carries the colour */
.qk-rows .row--bad .qk-tile{color:var(--qk-bad)}
.qk-rows .row--warn .qk-tile{color:var(--qk-warn)}

/* =====================================================================
   THE CRANE CARD (Sam, 9 Sep 2026: the Fleet mockup, "with our look"): the photo or the glyph, the
   model, the state pill, the site with a pin, three facts with their labels. Obvious at a glance.
   ===================================================================== */
.qk-ccard__list{display:flex;flex-direction:column;gap:12px}
.qk-ccard{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;width:100%;text-align:left;border:0;padding:14px;
  background:var(--qk-card);border-radius:var(--qk-radius-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);
  color:var(--qk-ink);font-family:inherit;cursor:pointer}
.qk-ccard__ph{width:76px;height:76px;flex:none;border-radius:12px;background:var(--qk-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--qk-ink-2)}
.qk-ccard__ph img{width:100%;height:100%;object-fit:cover;display:block}
.qk-ccard__ph .qk-i{width:42px;height:42px;stroke-width:1.4}
.qk-ccard__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.qk-ccard__top{display:flex;align-items:center;gap:8px}
.qk-ccard__name{font-size:17px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-ccard__top .qk-chev{margin:0 -4px 0 0}
.qk-ccard__go{display:flex;align-items:center;align-self:stretch;margin:0 -6px 0 -2px;color:var(--qk-ink-3)}   /* the card's chevron at its right edge, centred on the head row (19 Sep 2026) */
.qk-ccard__sub{font-size:15px;color:var(--qk-ink-3);display:flex;align-items:center;gap:5px;min-width:0}
.qk-ccard__sub>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-ccard__sub .qk-i{width:15px;height:15px;flex:none;stroke-width:1.75}
.qk-ccard__facts{flex:1 1 100%;display:flex;margin-top:0;padding-top:10px;border-top:1px solid var(--qk-rule)}
.qk-ccard__facts>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qk-ccard__facts b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--qk-ink)}
.qk-ccard__facts i{font-style:normal;font-size:13px;color:var(--qk-ink-3)}
.fleet__filter{margin-bottom:-8px}

/* HOME'S COUNTS AS PILLS (Sam, 9 Sep 2026: "Pills like these" — the Cranes filter): one scrolling row, the count bold */
.dash-pills{display:flex;flex-wrap:wrap;gap:8px}
.dash-pills::-webkit-scrollbar{display:none}
.dash-pills .qk-chip{flex:none;font-size:15px}
.dash-pills .qk-chip b{font-weight:700;color:var(--qk-ink);margin-right:5px}
.dash-pills .qk-chip--bad{background:var(--qk-bad-bg);color:var(--qk-bad)}
.dash-pills .qk-chip--bad b{color:var(--qk-bad)}
.dash-pills .qk-chip--ok{background:var(--qk-ok-bg);color:var(--qk-ok)}
.dash-pills .qk-chip--ok b{color:var(--qk-ok)}

/* =====================================================================
   THE TYPE SCALE, TIGHTENED (Sam, 9 Sep 2026: "Is our font too big? Why does it look so cheap?"):
   the row name stays 17 like ChatGPT's; everything secondary drops a step so the hierarchy reads —
   sub-lines 14, chips 14 in a 34 pill, group labels 15, the card's facts 16 over 12.5.
   ===================================================================== */
.qk-rows .qk-row__sub,.qk-row__sub{font-size:15px;line-height:1.3}
.qk-section{font-size:17px}   /* the group's name at the row's own size (Sam, 19 Sep 2026) */
.qk-chip{height:34px;padding:0 13px;font-size:15px;font-weight:500}
.dash-pills .qk-chip{font-size:15px}
.dash-pills .qk-chip b{font-size:15px}
.qk-ccard{padding:14px 16px 12px}
.qk-ccard__name{font-size:17px;font-weight:600}
.qk-ccard__sub{font-size:15px;line-height:1.3}
.qk-ccard__main{gap:3px}
.qk-ccard__facts{padding-top:10px;margin-top:4px}
.qk-ccard__facts b{font-size:17px}
.qk-ccard__facts i{font-size:12px}
.qk-ccard__ph{width:64px;height:64px;border-radius:10px}
.qk-ccard__ph .qk-i{width:34px;height:34px}
.qk-ccard__facts>span:last-child{flex:1.35}

/* UPCOMING AS COLUMNS (Sam, 9 Sep 2026: "Organize upcoming in date, crane, title format"): the day, the crane, the thing — one line */

/* a contained group's View all sits in the section head (Sam, 9 Sep 2026: "It's all contained and has a view all button"; the head is the kit's section since 16 Sep) */
.qk-panel__all{display:flex;align-items:center;gap:0;border:0;background:none;padding:0;font-family:inherit;font-size:15px;color:var(--qk-ink-2);cursor:pointer}
.qk-panel__all .qk-chev{width:18px;height:18px;margin:0 -4px 0 0}
.qk-panel .qk-ccard__list{padding:4px 12px 12px}
.qk-panel .qk-ccard{background:var(--qk-soft);box-shadow:none}

/* HOME'S PILLS, AGAIN (Sam, 9 Sep 2026: "That's the best pills you can do?"): the word, then the count in a
   round badge; the badge carries the colour, the pill stays quiet */
.dash-pills .qk-chip{height:38px;padding:0 7px 0 14px;gap:9px;font-size:15px;font-weight:500;color:var(--qk-ink);background:var(--qk-card);box-shadow:inset 0 0 0 1px var(--qk-rule)}
.dash-pills .qk-chip b{order:2;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--qk-on-pill);color:var(--qk-ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;margin:0;font-variant-numeric:tabular-nums}
.dash-pills .qk-chip--ok{background:var(--qk-card);color:var(--qk-ink)}
.dash-pills .qk-chip--ok b{background:var(--qk-ok);color:#0F2A18}
.dash-pills .qk-chip--bad{background:var(--qk-card);color:var(--qk-ink)}
.dash-pills .qk-chip--bad b{background:var(--qk-bad);color:#2A1210}

/* all three on one line, even on a 375 phone (Sam, 9 Sep 2026: "I want them all to fit") */
.dash-pills{gap:8px;flex-wrap:nowrap}
.dash-pills .qk-chip{height:36px;padding:0 5px 0 12px;gap:7px;font-size:15px;letter-spacing:-.01em}
.dash-pills .qk-chip b{min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:12px}

/* the Cranes chips: Home's pills with the chosen one lit */
.dash-pills .qk-chip--on{background:var(--qk-chip-on-bg);color:var(--qk-chip-on-fg);box-shadow:none}
.dash-pills .qk-chip--on b{background:rgba(0,0,0,.12);color:var(--qk-chip-on-fg)}
[data-theme="dark"] .dash-pills .qk-chip--on b{background:rgba(255,255,255,.1)}
/* the bleed is the page's own gutter, 16 px: at 20 the row stood 4 px past each edge of a phone, the Cranes page slid sideways by that much, and the one header over a crane opened from it was 4 px wider than on every other page (found by the every-page header sweep, 21 Sep 2026) */
.fleet__filter{overflow-x:auto;scrollbar-width:none;margin:0 -16px -8px;padding:0 16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}   /* a severed chip reads as sliding (second pass) */
.fleet__filter::-webkit-scrollbar{display:none}
.qk-ccard__facts b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* THE MAP ON A CRANE CARD (Sam, 9 Sep 2026: "I want the pin with map showing where it is"): a 96 square of
   OpenStreetMap with a pin on the site; tap for the phone's maps app */
.qk-ccard__map{position:relative;flex:none;width:104px;height:104px;border-radius:12px;overflow:hidden;background:var(--qk-soft);display:block;text-decoration:none;color:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.qk-ccard__map img{position:absolute;width:128px;height:128px;max-width:none;display:block}
.qk-ccard__map--sized .qk-ccard__city{display:none}   /* a small map carries no city label: it would only be cut (19 Sep 2026) */
.qk-ccard__map .qk-ccard__pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-25px 0 0 -13px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.qk-ccard__map .qk-ccard__pin svg{width:26px;height:26px;display:block}
.qk-ccard__map .qk-ccard__pin path{fill:#E5352B;stroke:#fff;stroke-width:1.2}   /* the map marker's own red and white, the same in both themes (the pin's colours live here, never in the kit's JS) */
.qk-ccard__map .qk-ccard__pin circle{fill:#fff}
.qk-ccard__city{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-ccard__osm{position:absolute;right:4px;top:3px;font-size:7.5px;letter-spacing:.02em;color:rgba(0,0,0,.5);background:rgba(255,255,255,.65);padding:0 4px;border-radius:3px}
[data-theme="light"] .qk-ccard__osm{color:rgba(0,0,0,.5);background:rgba(255,255,255,.6)}
.qk-ccard__city{font-size:12px;letter-spacing:.01em;padding:4px 8px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
/* the state beside the name; the map in the card's corner, the blank map where no address is on file (Sam, 20 Sep 2026) */
.qk-ccard__side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qk-ccard__top--state .qk-ccard__name{flex:0 1 auto}
.qk-ccard__top--state .qk-pill{flex:none}
.qk-crane-head__name--state{display:flex;align-items:center;gap:8px;min-width:0}
.qk-crane-head__name--state>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-crane-head__name--state .qk-pill{flex:none}
.qk-crane-head .qk-ccard__side{margin-left:auto}
.qk-crane-head .qk-ccard__side .qk-ccard__map{margin:0}
.qk-ccard__map--blank{background:
  linear-gradient(118deg,transparent 45%,var(--qk-rule) 45%,var(--qk-rule) 50%,transparent 50%),
  linear-gradient(24deg,transparent 60%,var(--qk-rule) 60%,var(--qk-rule) 63.5%,transparent 63.5%),
  linear-gradient(90deg,transparent 20%,var(--qk-rule) 20%,var(--qk-rule) 22.5%,transparent 22.5%),
  linear-gradient(0deg,transparent 24%,var(--qk-rule) 24%,var(--qk-rule) 26%,transparent 26%),
  var(--qk-soft)}
.qk-ccard__map--blank .qk-ccard__pin{filter:none;opacity:.7}
.qk-ccard__map--blank .qk-ccard__pin path{fill:var(--qk-soft);stroke:var(--qk-ink-3);stroke-width:1.5}
.qk-ccard__map--blank .qk-ccard__pin circle{fill:var(--qk-ink-3)}
.qk-ccard__sub--contact{margin-top:2px}
.qk-ccard__link{color:var(--qk-ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-width:0}
.qk-ccard__link .qk-i{width:17px;height:17px;flex:none;color:var(--qk-ink-3)}   /* QUIET AGAIN (Sam, 20 Sep 2026 evening, of a Home with a dozen gold marks: "Are we using too much accent color and are we using it in the right places?... What do you think is best"): the accent marks where he is and how far along - the active tab, a bar, the month, his initials, the search - and a row's mark takes the grey of the words beside it. That morning he had put these marks on the accent; shown both ways, side by side */
.qk-ccard__link>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-credit__map{display:block;font-size:10px;color:var(--qk-ink-3);opacity:.7;margin-top:2px}

/* THE BINDER'S SECTIONS (Two Pillars' binder, Sam, 9 Sep 2026): each a card that opens; the number and the
   short name, the count on the right, the rows inside */
.bnd__groups{display:flex;flex-direction:column;gap:12px}
.bnd__groups>.qk-disc{background:var(--qk-card);border-radius:var(--qk-radius-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);overflow:hidden}   /* the section cards only; the documents inside are flat rows (9 Sep 2026) */
.bnd__groups .qk-disc>summary{list-style:none;cursor:pointer;min-height:56px;padding:10px 20px;background:transparent;border-radius:0;box-shadow:none}
.bnd__groups .qk-disc>summary::-webkit-details-marker{display:none}
.bnd__groups .qk-disc>summary .qk-row__name{font-weight:600}
.bnd__groups .qk-disc>summary .qk-row__value{font-variant-numeric:tabular-nums}
/* a section is a dropdown (Sam, 9 Sep 2026: 'I want these to open downward in a dropdown'): the chevron points down, and up once open */
.bnd__groups .qk-disc>summary .qk-chev{transform:rotate(90deg)}
.bnd__groups .qk-disc[open]>summary .qk-chev{transform:rotate(-90deg)}
.bnd__groups .qk-disc__b{padding:0}
.bnd__groups .qk-disc__b .qk-rows{border-radius:0;box-shadow:none;border-top:1px solid var(--qk-rule)}

/* the binder's own fixes (9 Sep 2026): the pills wrap under the header with air above; a document's title and a
   section's name may take two lines, never an ellipsis */
#bnd .dash-pills{flex-wrap:wrap;margin-top:8px}
.bnd__groups .brow .qk-row__name,.bnd__groups .bnd__gs .qk-row__name{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.qk-row--quiet .qk-row__name{color:var(--qk-ink-3);font-size:15px}

/* THE CRANE PAGE'S HEAD AND TABS (the mockup, Sam, 9 Sep 2026) */
.qk-crane-head{display:flex;gap:14px;align-items:flex-start;background:var(--qk-card);border-radius:var(--qk-radius-card);padding:16px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge)}
.qk-crane-head__ph{width:84px;height:84px;flex:none;border-radius:12px;overflow:hidden;background:var(--qk-soft)}
.qk-crane-head__ph img{width:100%;height:100%;object-fit:cover;display:block}
.qk-crane-head__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.qk-crane-head__name{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--qk-ink)}
.qk-crane-head__sub{font-size:15px;color:var(--qk-ink-3)}
.qk-crane-head__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.qk-ctabs{display:flex;border-bottom:1px solid var(--qk-rule);margin:-8px 0 -8px}
.qk-ctab{flex:1;border:0;background:none;padding:12px 4px 11px;font-family:inherit;font-size:15px;font-weight:500;color:var(--qk-ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.qk-ctab--on{color:var(--qk-ink);border-bottom-color:var(--qk-ink)}
.crane__tabs{margin:-4px 0 -8px}

/* THE DOCUMENT ROWS, REFINED (Sam, 9 Sep 2026: "Make this look way better too"): a small grey number, the
   name at 15 medium on up to two lines, the day and who beneath at 13, a small state word, the chevron */
.bnd__groups .brow{padding:12px 16px 12px 14px;gap:10px;min-height:56px;align-items:center}
.bnd__groups .brow .qk-tile--num{width:26px;height:26px;min-width:26px;font-size:13px;font-weight:600;color:var(--qk-ink-3);background:transparent;border-radius:0;justify-content:flex-start}
.bnd__groups .brow .qk-row__name{font-size:15px;font-weight:500;line-height:1.3}
.bnd__groups .brow .qk-row__sub{font-size:13px;margin-top:2px}
.bnd__groups .brow .qk-pill{font-size:12px;padding:2px 8px;font-weight:600}
.bnd__groups .brow .qk-row__value{font-size:13px}
.bnd__groups .qk-disc>summary{min-height:60px;padding:12px 16px 12px 16px}
.bnd__groups .qk-disc>summary .qk-row__name{font-size:17px;font-weight:600;line-height:1.25}
.bnd__groups .qk-disc>summary .qk-row__value{font-size:15px;color:var(--qk-ink-3)}
.bnd__groups .qk-disc>summary .qk-chev{color:var(--qk-ink-3)}

/* the crane page's three pills fill the width, evenly (Sam, 9 Sep 2026: "Full width even pills") */
.crane__tabs .qk-chip{flex:1 1 0;justify-content:center;padding:0 8px}
.qk-crane-head__pills.dash-pills{flex-wrap:wrap;gap:8px;align-items:center}
.qk-crane-head__pills .qk-pill{height:36px;display:inline-flex;align-items:center;padding:0 12px;font-size:15px}
.qk-crane-head{padding:16px 14px 14px}
.qk-crane-head__pills .qk-pill{padding:0 11px}
.qk-crane-head__pills .qk-chip{padding:0 5px 0 11px;gap:6px}
.qk-crane-head__pills.dash-pills{gap:6px;flex-wrap:nowrap}

/* THE SECTION CARD, SPRUCED (Sam, 9 Sep 2026): the number in a roundel, a thin bar of what is on file, the count badge */
.bnd__groups .bnd__gs{gap:12px;padding:14px 16px}
.bnd__num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--qk-on-pill);color:var(--qk-ink);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.bnd__g--full .bnd__num{background:var(--qk-ok-bg);color:var(--qk-ok)}
.bnd__tile{flex:none}
.bnd__bar{display:block;height:4px;border-radius:2px;background:var(--qk-soft);overflow:hidden;margin-top:8px;width:100%}
.bnd__bar i{display:block;height:100%;border-radius:2px;background:var(--qk-ink-3)}
.bnd__g--full .bnd__bar i{background:var(--qk-ok)}
.bnd__cnt{flex:none;font-size:13px;font-weight:600;color:var(--qk-ink);background:var(--qk-on-pill);border-radius:12px;height:24px;padding:0 9px;display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.bnd__cnt span{font-weight:400;color:var(--qk-ink-3)}
.bnd__cnt--full{background:var(--qk-ok-bg);color:var(--qk-ok)}
.bnd__cnt--full span{color:var(--qk-ok);opacity:.7}
.bnd__groups .qk-disc>summary .qk-row__name{font-size:17px;font-weight:600;line-height:1.25}
.qk-crane-head .qk-ccard__map{margin-left:auto}
.qk-crane-head .qk-ccard__sub--contact{margin-top:1px}

/* THE TIMELINE (the crane page's History, 9 Sep 2026): the day on the left, a dot on a line, the event and who */
.qk-tl{padding:4px 20px 8px;display:flex;flex-direction:column}
.qk-tl__r{display:grid;grid-template-columns:58px 16px 1fr;column-gap:10px;align-items:start;position:relative;padding:12px 0}
.qk-tl__r::before{content:"";position:absolute;left:calc(58px + 10px + 7px);top:0;bottom:0;width:2px;background:var(--qk-rule)}
.qk-tl__r:first-child::before{top:50%}
.qk-tl__r:last-child::before{bottom:50%}
.qk-tl__d{font-size:15px;color:var(--qk-ink-3);padding-top:2px;white-space:nowrap}
.qk-tl__dot{width:12px;height:12px;border-radius:50%;background:var(--qk-ok);margin:5px 2px 0;position:relative;z-index:1;box-shadow:0 0 0 3px var(--qk-card)}
.qk-tl__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.qk-tl__t{font-size:17px;color:var(--qk-ink);line-height:1.3}
.qk-tl__by{font-size:15px;color:var(--qk-ink-3)}
/* the head's three pills fill the width evenly (Sam, 9 Sep 2026: 'Make these full size') */
.qk-crane-head__pills .qk-chip,.qk-crane-head__pills .qk-pill{flex:1 1 0;justify-content:center;min-width:0}
.qk-crane-head__pills .qk-chip>span{white-space:nowrap}
.qk-crane-head{flex-wrap:wrap}
.qk-crane-head__pills.dash-pills{flex:1 1 100%;margin-top:4px}

/* a group's heading is the kit's section head above its card — sentence case, one size for every list (the kit
   findings, item 8, 16 Sep 2026; the 9 Sep band in small capitals is retired) */
.qk-panel__all{font-size:15px}
/* a pill never shrinks below its words; if three cannot fit they wrap (9 Sep 2026: 'This is messed up') */
.qk-crane-head__pills.dash-pills{flex-wrap:wrap}
.qk-crane-head__pills .qk-chip,.qk-crane-head__pills .qk-pill{flex:1 1 auto;min-width:max-content}
/* the head's rhythm (Sam, 9 Sep 2026: 'Is spacing optimized'): 4 between lines, 6 above the contact lines, 12 above the pills */
.qk-crane-head__main{gap:4px}
.qk-crane-head .qk-ccard__sub--contact{margin-top:2px}
.qk-crane-head__pills.dash-pills{margin-top:0}
.qk-crane-head{row-gap:12px}
label.qk-row.badd{cursor:pointer}
.qk-crane-head__pills--one .qk-pill{flex:0 0 auto;min-width:0}

/* THE DOCUMENT DROPDOWNS INSIDE A SECTION (Two Pillars' binder, 9 Sep 2026) */
.bnd__docs{display:flex;flex-direction:column}
.bnd__docs .bnd__d{border-top:1px solid var(--qk-rule)}
.bnd__docs .bnd__d>summary{list-style:none;cursor:pointer;min-height:56px;padding:10px 16px 10px 14px;gap:10px;align-items:center;background:transparent;border-radius:0;box-shadow:none}
.bnd__docs .bnd__d>summary::-webkit-details-marker{display:none}
.bnd__docs .bnd__d>summary .qk-row__name{font-size:15px;font-weight:500;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bnd__docs .bnd__d>summary .qk-chev{transform:rotate(90deg);color:var(--qk-ink-3)}
.bnd__docs .bnd__d[open]>summary .qk-chev{transform:rotate(-90deg)}
.bnd__docs .bnd__d[open]>summary{background:var(--qk-soft)}
.bnd__num--sm{width:26px;height:26px;font-size:13px;font-weight:600;color:var(--qk-ink-3);background:transparent;justify-content:flex-start}
.bnd__none{font-size:13px;color:var(--qk-ink-3);white-space:nowrap}
.bnd__d__b{padding:0 0 14px;margin:0;gap:0}
.bnd__files{border-radius:0;box-shadow:none;background:transparent}
.bnd__files .bdoc{padding:10px 16px}
.bnd__who{margin:10px 16px 0;font-size:13px;color:var(--qk-ink-3)}
.bnd__d__acts{display:flex;flex-direction:column;gap:8px;padding:12px 16px 0}
.bnd__d__acts .qk-btn{width:100%}
/* a soft button: no ring, the soft ground (Sam, 9 Sep 2026: 'I hate the weird border around that not applicable') */
.qk-btn--soft,.qk-btn--soft:focus-visible{box-shadow:none;background:var(--qk-soft);color:var(--qk-ink)}
/* the map's top meets the name's top (Sam, 9 Sep 2026: 'Is the map square positioned properly?') */
.qk-crane-head__name{line-height:1.15}
.qk-crane-head .qk-ccard__map{margin-top:3px}
.bnd__docs .bnd__d{background:transparent;border-radius:0;box-shadow:none}
.bnd__docs .bnd__d>summary{min-height:56px}
.bnd__d__b .bnd__who{margin-top:12px}

/* THE OPENED DOCUMENT, CLEANED (Sam, 9 Sep 2026: "This looks like shit and cluttered"): one-line names, the number in a
   small box, the files on a soft panel, two compact buttons side by side */
.bnd__docs .bnd__d>summary .qk-row__name{white-space:nowrap;display:block;-webkit-line-clamp:unset;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:500}
.bnd__num--sm{width:28px;height:28px;border-radius:7px;background:var(--qk-soft);color:var(--qk-ink-2);justify-content:center;font-size:13px;font-weight:600}
.bnd__docs .bnd__d>summary{padding:10px 16px}
.bnd__docs .bnd__d[open]>summary{background:transparent}
.bnd__d__b{background:var(--qk-soft);padding:8px 12px 12px;margin:0 0 4px}
.bnd__files{background:transparent}
.bnd__files .bdoc{padding:8px 4px;min-height:56px;gap:12px}
.bnd__files .bdoc .qk-tile{width:44px;height:44px;border-radius:10px;background:var(--qk-card);color:var(--qk-ink-2);overflow:hidden}
.bnd__files .bdoc .qk-tile img{width:100%;height:100%;object-fit:cover;display:block}
.bnd__files .bdoc .qk-row__name{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnd__files .bdoc .qk-row__sub{font-size:13px}
.bnd__files .bdoc::before{left:60px;right:4px}
.bnd__d__acts{flex-direction:row;gap:8px;padding:6px 4px 0}
.bnd__d__acts .qk-btn{flex:1;width:auto;min-height:44px;height:44px;font-size:15px;padding:0 12px}
.bnd__d__acts .qk-btn .qk-i{width:18px;height:18px}
.bnd__d__acts .qk-btn--soft{background:var(--qk-card)}

/* small actions under a document's files (Sam, 9 Sep 2026: "Why are the buttons so giant?") */
.bnd__d__acts{justify-content:flex-start;align-items:center;gap:14px;padding:8px 4px 2px}
.bnd__d__acts .qk-btn{flex:0 0 auto;width:auto;min-height:34px;height:34px;font-size:15px;font-weight:600;padding:0 14px;border-radius:999px}
.bnd__d__acts .qk-btn .qk-i{width:16px;height:16px}
.bnd__d__acts .qk-btn--soft{background:transparent;color:var(--qk-ink-3);padding:0 4px;box-shadow:none;font-weight:500}

/* THE FILES, AS TWO PILLARS LAYS THEM OUT (9 Sep 2026) */
.bnd__d__b{background:var(--qk-soft);padding:6px 16px 10px;margin:0;display:block}
.bnd__f{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--qk-rule)}
.bnd__f:last-of-type{border-bottom:0}
.bnd__f__pic{width:48px;height:48px;flex:none;border-radius:10px;background:var(--qk-card);display:flex;align-items:center;justify-content:center;color:var(--qk-ink-2);overflow:hidden}
.bnd__f__pic img{width:100%;height:100%;object-fit:cover;display:block}
.bnd__f__pic .qk-i{width:22px;height:22px}
.bnd__f__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.bnd__f__name{font-size:15px;font-weight:600;color:var(--qk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnd__f__sub{font-size:13px;color:var(--qk-ink-3)}
.bnd__f__bin{flex:none;width:40px;height:40px;border-radius:10px;border:0;background:var(--qk-card);color:var(--qk-bad);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bnd__f__bin .qk-i{width:18px;height:18px}
.bnd__f__open{flex:none;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--qk-ink);text-decoration:none;padding:0 2px 0 4px}
.bnd__addrow{display:flex;align-items:center;gap:12px;padding:12px 0 4px}
.bnd__add{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer;font-size:15px;font-weight:500;color:var(--qk-ink)}
.bnd__add__box{width:40px;height:40px;border-radius:10px;background:var(--qk-card);display:flex;align-items:center;justify-content:center;color:var(--qk-ink);flex:none}
.bnd__add__box .qk-i{width:18px;height:18px}
.bnd__na.qk-btn{flex:0 0 auto;width:auto;height:32px;min-height:32px;padding:0 6px;font-size:13px;font-weight:500;color:var(--qk-ink-3);background:transparent;box-shadow:none}
.bnd__cnt--n{min-width:28px;height:28px;border-radius:14px;padding:0 8px;justify-content:center}
.bnd__cnt--zero{color:var(--qk-ink-3)}
.bnd__none{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--qk-ink-3)}

/* BREATHING ROOM IN THE BINDER (Sam, 9 Sep 2026: "It needs breathing room, it's messy it's busy"): taller document
   rows, the number and the count as quiet grey text, the open document's files on an inset card with air around it */
.bnd__docs .bnd__d>summary{min-height:62px;padding:14px 20px;gap:14px}
.bnd__num--sm{width:24px;height:auto;border-radius:0;background:transparent;color:var(--qk-ink-3);justify-content:flex-start;font-size:15px;font-weight:500}
.bnd__cnt--n,.bnd__cnt--zero{min-width:0;height:auto;padding:0;background:transparent;color:var(--qk-ink-3);font-size:15px;font-weight:500;border-radius:0}
.bnd__docs .bnd__d>summary .qk-chev{margin-left:2px}
.bnd__d__b{margin:0 16px 16px;border-radius:12px;padding:4px 16px 10px;background:var(--qk-soft)}
.bnd__docs .bnd__d[open]>summary{background:transparent}
.bnd__f{padding:14px 0;gap:14px}
.bnd__f__pic{width:44px;height:44px}
.bnd__f__bin{width:36px;height:36px;border-radius:9px}
.bnd__f__open{font-size:12px;padding-left:6px}
.bnd__addrow{padding:12px 0 6px;gap:14px}
.bnd__add__box{width:36px;height:36px;border-radius:9px}
.bnd__add{font-size:15px}

/* =====================================================================
   THE BINDER, TO TWO PILLARS' RHYTHM (Sam, 9 Sep 2026: "Inspiration" · "Do way better"): tall rows with air,
   the section's number in a big square, the count in a circle, a document's number in a box, the files on
   their own ground with a picture, the name, when it was filed and how big, a bin in a box, OPEN.
   ===================================================================== */
.bnd__groups .bnd__gs{min-height:80px;padding:16px 20px;gap:16px;align-items:center}
.bnd__num{width:48px;height:48px;border-radius:14px;background:var(--qk-on-pill);font-size:18px;font-weight:700}
.bnd__groups .qk-disc>summary .qk-row__name{font-size:17px;font-weight:600;letter-spacing:0}   /* the one list size and weight */
.bnd__bar{display:none}
.bnd__cnt{min-width:40px;height:40px;border-radius:20px;padding:0 12px;font-size:15px;font-weight:600;background:var(--qk-on-pill);color:var(--qk-ink)}
.bnd__cnt span{display:none}
.bnd__groups .qk-disc>summary .qk-chev{width:22px;height:22px;margin-left:2px}
.bnd__docs{border-top:1px solid var(--qk-rule)}
.bnd__docs .bnd__d{border-top:0;border-bottom:1px solid var(--qk-rule)}
.bnd__docs .bnd__d:last-child{border-bottom:0}
.bnd__docs .bnd__d>summary{min-height:76px;padding:16px 20px;gap:16px;align-items:center}
.bnd__num--sm{width:44px;height:44px;border-radius:12px;background:var(--qk-soft);color:var(--qk-ink);justify-content:center;font-size:15px;font-weight:700}
.bnd__docs .bnd__d>summary .qk-row__name{font-size:17px;font-weight:600;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.bnd__cnt--n,.bnd__cnt--zero{min-width:36px;height:36px;border-radius:18px;padding:0 10px;background:var(--qk-soft);color:var(--qk-ink);font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.bnd__cnt--zero{color:var(--qk-ink-3)}
.bnd__d__b{margin:0;border-radius:0;padding:8px 24px 16px;background:var(--qk-ground)}
.bnd__f{padding:18px 0;gap:16px;border-bottom:1px solid var(--qk-rule)}
.bnd__f:last-of-type{border-bottom:1px solid var(--qk-rule)}
.bnd__f__pic{width:52px;height:52px;border-radius:12px;background:var(--qk-card)}
.bnd__f__pic .qk-i{width:24px;height:24px}
.bnd__f__name{font-size:17px;font-weight:600}
.bnd__f__sub{font-size:15px}
.bnd__f__bin{width:44px;height:44px;border-radius:12px;background:var(--qk-card);box-shadow:inset 0 0 0 1px var(--qk-rule)}
.bnd__f__bin .qk-i{width:20px;height:20px}
.bnd__f__open{font-size:12px;letter-spacing:.1em;padding-left:8px}
.bnd__addrow{padding:18px 0 6px;gap:16px}
.bnd__add__box{width:52px;height:52px;border-radius:12px;background:var(--qk-card);box-shadow:inset 0 0 0 1px var(--qk-rule)}
.bnd__add__box .qk-i{width:20px;height:20px}
.bnd__add{font-size:17px;font-weight:600}
.bnd__na.qk-btn{font-size:13px;color:var(--qk-ink-3)}

/* the open document's files keep their air (the section rule's padding:0 was winning), and a small clean Upload */
.bnd__groups .bnd__d__b{padding:6px 24px 16px}
.bnd__up{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:999px;background:var(--qk-primary-bg);color:var(--qk-primary-fg);font-size:15px;font-weight:600;cursor:pointer}
.bnd__up .qk-i{width:17px;height:17px;stroke-width:2}
.bnd__addrow{justify-content:space-between;padding:16px 0 4px}

/* =====================================================================
   OPTION C, POLISHED (Sam, 9 Sep 2026: "This is the closest but it needs a major polish" · "Subtle trash" ·
   "Open pill" · "Swap these"): a card per document inside the section; the open one holds its files on a
   darker inset — the picture, one-line name, when it was filed; a grey bin; Open as a pill; Not applicable
   left, Upload right. One rhythm: 32 roundels, 30 counts, 12 gaps.
   ===================================================================== */
.bnd__docs{border-top:0;padding:4px 12px 12px;display:flex;flex-direction:column;gap:10px}.bnd__docs .bnd__d{border:0;background:var(--qk-soft);border-radius:14px;overflow:hidden}.bnd__docs .bnd__d>summary{min-height:64px;padding:12px 16px;gap:12px}.bnd__num--sm{width:32px;height:32px;border-radius:50%;background:var(--qk-on-pill);font-size:15px}.bnd__docs .bnd__d>summary .qk-row__name{font-size:15px;font-weight:600}.bnd__cnt--n,.bnd__cnt--zero{min-width:30px;height:30px;background:var(--qk-on-pill)}.bnd__groups .bnd__d__b{background:var(--qk-card);margin:0 10px 10px;border-radius:10px;padding:4px 14px 12px}.bnd__f{padding:12px 0}.bnd__f__pic{width:44px;height:44px;background:var(--qk-soft)}.bnd__f__bin{width:36px;height:36px;box-shadow:none;background:var(--qk-soft)}
.bnd__docs .bnd__d>summary{min-height:64px;padding:12px 16px;gap:12px;align-items:center}
.bnd__docs .bnd__d>summary .qk-row__name{font-size:15px;font-weight:600;line-height:1.3}
.bnd__num--sm{width:32px;height:32px;border-radius:50%;background:var(--qk-on-pill);color:var(--qk-ink);font-size:15px;font-weight:600;justify-content:center}
.bnd__cnt--n,.bnd__cnt--zero{min-width:30px;height:30px;border-radius:15px;padding:0 9px;background:var(--qk-on-pill);color:var(--qk-ink);font-size:15px;font-weight:600}
.bnd__cnt--zero{color:var(--qk-ink-3);background:transparent;box-shadow:inset 0 0 0 1px var(--qk-rule)}
.bnd__groups .bnd__d__b{background:var(--qk-card);margin:0 10px 10px;border-radius:10px;padding:2px 14px 12px}
.bnd__f{padding:12px 0;gap:12px;border-bottom:1px solid var(--qk-rule)}
.bnd__f:last-of-type{border-bottom:1px solid var(--qk-rule)}
.bnd__f__pic{width:44px;height:44px;border-radius:10px;background:var(--qk-soft)}
.bnd__f__pic .qk-i{width:20px;height:20px}
.bnd__f__name{font-size:15px;font-weight:600}
.bnd__f__sub{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnd__f__bin{width:32px;height:32px;border-radius:8px;background:transparent;box-shadow:none;color:var(--qk-ink-3)}
.bnd__f__bin .qk-i{width:17px;height:17px}
.bnd__f__open{font-size:13px;font-weight:600;letter-spacing:0;padding:0 12px;height:30px;display:inline-flex;align-items:center;border-radius:15px;background:var(--qk-on-pill);color:var(--qk-ink)}
.bnd__addrow{justify-content:space-between;padding:12px 0 2px;gap:12px}
.bnd__na.qk-btn{padding:0;font-size:15px;color:var(--qk-ink-3)}
.bnd__up{height:34px;font-size:15px;padding:0 14px 0 12px}
.bnd__groups .bnd__gs{min-height:76px;padding:14px 16px;gap:12px}
.bnd__num{width:40px;height:40px;border-radius:12px;font-size:17px}
.bnd__cnt{min-width:36px;height:36px;font-size:15px}
.bnd__none{font-size:13px;font-weight:500;letter-spacing:0;color:var(--qk-ink-3);white-space:nowrap}
.crn__share{padding:0}
.crn__share .qk-link,.crn__share .qk-sub,.crn__share .qk-btn-row,.crn__share .qk-msg{margin:12px 20px 0}
.crn__share .qk-msg:empty{display:none}
.crn__share>.qk-btn-row{padding-bottom:14px}
/* Upload the same size as Open (Sam, 9 Sep 2026: 'That upload button is big?') */
.bnd__up{height:30px;font-size:13px;font-weight:600;padding:0 12px 0 10px;gap:6px;background:var(--qk-primary-bg);color:var(--qk-primary-fg)}
.bnd__up .qk-i{width:15px;height:15px}
.bnd__addrow{padding:10px 0 0}

/* THE BINDER'S SEARCH BOX (9 Sep 2026): a rounded field with the glass, the results in the grouped list */
.bnd__search{margin:-4px 0 -8px}
.bnd__search__box{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:14px;background:var(--qk-card);box-shadow:inset 0 0 0 1px var(--qk-edge)}
.bnd__search__box .qk-i{width:18px;height:18px;color:var(--qk-ink-3);flex:none}
.bnd__search__box input{flex:1;min-width:0;border:0;background:transparent;color:var(--qk-ink);font:inherit;font-size:17px;outline:none;padding:0}
.bnd__search__box input::placeholder{color:var(--qk-ink-3)}
.bnd__search__box input::-webkit-search-cancel-button{-webkit-appearance:none}

/* SECTIONS AND DOCUMENTS TELL APART (Sam, 9 Sep 2026: "It all kinda blends together… how can we differentiate it a
   bit? Some space maybe?"): the section is the card — a boxed number, a bold name; the documents inside sit on the
   darker ground, lighter and smaller, with a plain grey number and air between them; the files inside a document
   come back up to the card colour */
.bnd__groups .bnd__gs{min-height:76px;padding:16px 18px}
.bnd__groups>.qk-disc[open]>summary{border-bottom:1px solid var(--qk-rule)}
.bnd__groups .qk-disc>summary .qk-row__name{font-size:17px;font-weight:700}
.bnd__docs{padding:14px 12px 14px;gap:8px}
.bnd__docs .bnd__d{background:var(--qk-ground);border-radius:12px}
.bnd__docs .bnd__d>summary{min-height:58px;padding:11px 14px 11px 16px;gap:12px}
.bnd__docs .bnd__d>summary .qk-row__name{font-size:15px;font-weight:500;color:var(--qk-ink)}
.bnd__num--sm{width:26px;height:auto;min-width:26px;border-radius:0;background:transparent;color:var(--qk-ink-3);font-size:15px;font-weight:500;justify-content:flex-start}
.bnd__none{font-size:13px;color:var(--qk-ink-3)}
.bnd__docs .bnd__d>summary .qk-chev{width:18px;height:18px}
.bnd__groups .bnd__d__b{background:var(--qk-card);margin:0 10px 10px;border-radius:10px;padding:2px 14px 12px}

/* the document rows, cleaned (9 Sep 2026): the name has the row; a green dot means a file is on it; an empty open
   document shows only its Upload row, no dark box */
.bnd__dot{width:8px;height:8px;border-radius:50%;background:var(--qk-ok);flex:none;margin-right:2px}
.bnd__docs .bnd__d>summary{padding:12px 14px 12px 16px;gap:12px;min-height:56px}
.bnd__docs .bnd__d>summary .qk-row__name{font-size:15px;font-weight:500;line-height:1.3}
.bnd__groups .bnd__d__b--empty{background:transparent;margin:0;padding:0 16px 10px;border-radius:0}
.bnd__d__b--empty .bnd__addrow{padding:2px 0 0;border-top:1px solid var(--qk-rule);padding-top:10px}
/* the section keeps its thin bar as its only measure (9 Sep 2026) */
.bnd__bar{display:block}
.bnd__groups .qk-disc>summary .qk-row__main{gap:0}

/* THE DOCUMENTS TAB ON ONE GRID (Sam, 9 Sep 2026: "Is spacing optimized everywhere?"): 16 between the head, the pills,
   the search and the first section; 12 between sections; 16 above and below a section's documents; 8 between
   documents; the open document's inset 12 in */
.crane__tabs{margin:-8px 0 -8px}
.bnd__search{margin:0 0 -8px}
.bnd__docs{padding:16px 12px 16px}
.bnd__groups .bnd__d__b{margin:0 12px 12px}
.bnd__docs{padding:6px 12px 16px}
/* no focus ring on a sheet's rows: the tap is the whole row (10 Sep 2026) */
.qk-sheet .qk-row:focus-visible,.bnavsheet .qk-row:focus-visible{outline:none}
.bnavsheet__grid{padding-top:8px}
/* the + sheet: search on top, groups with a line under each thing (10 Sep 2026) */
.newsheet__g{display:flex;flex-direction:column;gap:12px}
#dayBody .newsheet__g .qk-section{margin:12px 0 -4px;padding-left:4px}
#dayBody .bnd__search{margin:0}
.newsheet__r .qk-row__sub{font-size:15px}
.newsheet__r{min-height:64px}

/* THE + AS BIG BUTTONS (option I, Sam 10 Sep 2026): each thing its own card, 60 tall, 10 between */
.newsheet__big{display:flex;flex-direction:column;gap:10px}
.newsheet__big .newsheet__r{background:var(--qk-card);border-radius:16px;min-height:60px;padding:0 20px;box-shadow:inset 0 0 0 1px var(--qk-edge);gap:14px}
.newsheet__big .newsheet__r .qk-row__name{font-size:17px;font-weight:600}
.newsheet__big .newsheet__r .qk-tile{width:24px;height:24px}

/* SAFETY'S PROGRAM GROUPS (10 Sep 2026): the binder's section cards without the numbers; the documents inside are plain rows */
.safety__groups .bnd__gs{min-height:64px;padding:12px 20px;gap:12px}
.safety__groups .bnd__gs .qk-row__name{font-size:17px;font-weight:600}
.safety__groups .qk-disc__b .qk-rows{border-radius:0;box-shadow:none;border-top:1px solid var(--qk-rule);background:transparent}
.safety__groups .qk-disc__b .qk-row{padding:12px 20px 12px 24px}
.safety__groups .qk-disc__b .qk-row__name{font-size:15px;font-weight:500;white-space:normal;line-height:1.3}

/* THE READER'S TWO FLOATING PILLS (Two Pillars' anatomy, our look; Sam, 10 Sep 2026) */
.pp-sign-pill{position:fixed;right:18px;bottom:calc(22px + var(--qk-safe-bottom));z-index:9300;display:inline-flex;align-items:stretch;height:54px;padding:0;border:0;border-radius:27px;background:var(--qk-primary-bg);color:var(--qk-primary-fg);font-family:inherit;font-size:17px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;overflow:hidden}
.pp-sign-pill .pp-pill-sign{display:inline-flex;align-items:center;gap:9px;padding:0 18px 0 22px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.pp-sign-pill .pp-pill-div{width:1px;margin:12px 0;background:currentColor;opacity:.25}
.pp-sign-pill .pp-pill-more{display:inline-flex;align-items:center;justify-content:center;width:52px;border:0;background:none;color:inherit;cursor:pointer}
.pp-sign-pill .pp-pill-more .qk-i{width:22px;height:22px}
.pp-sign-menu{position:fixed;right:18px;bottom:calc(88px + var(--qk-safe-bottom));z-index:9301;min-width:236px;padding:6px;border-radius:18px;background:var(--qk-card);box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 0 0 1px var(--qk-rule)}
.pp-sign-menu[hidden]{display:none}
.pp-sign-menu__r{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 14px;border:0;border-radius:12px;background:none;color:var(--qk-ink);font-family:inherit;font-size:17px;font-weight:500;text-align:left;cursor:pointer}
.pp-sign-menu__r .qk-i{width:22px;height:22px;stroke-width:1.9;color:var(--qk-ink-2)}
.pp-sign-menu__r:active{background:var(--qk-ground)}
.pp-sign-pill .qk-i{width:20px;height:20px;stroke-width:2}
.pp-sign-pill.done{background:var(--qk-ok);color:#0F2A18}
.pp-signers-chip{position:fixed;left:18px;bottom:calc(28px + var(--qk-safe-bottom));z-index:9300;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border:0;border-radius:21px;background:var(--qk-card);box-shadow:0 6px 18px rgba(0,0,0,.3),inset 0 0 0 1px var(--qk-rule);color:var(--qk-ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pp-signers-chip b{color:var(--qk-ok);font-weight:700}
/* the signers sheet's rows (Two Pillars' shape, 13 Sep 2026): initials in a circle before the name */
.pp-signer-av{width:36px;height:36px;border-radius:50%;background:var(--qk-ink);color:var(--qk-bg);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.02em;flex:none;order:-1}
/* the document editor at width: the words beside the page (13 Sep 2026) */
/* editing the words in place: the editable runs show a faint underline on hover and a ring while typing */
.ped-inplace [contenteditable]{border-radius:4px;outline:none;transition:box-shadow .12s}
.ped-inplace [contenteditable]:hover{box-shadow:0 0 0 2px var(--qk-rule)}
.ped-inplace [contenteditable]:focus{box-shadow:0 0 0 2px var(--qk-accent, var(--qk-ink-3))}
.ped-inplace{padding:12px 16px}
body.desk-full .ped-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
body.desk-full .ped-preview-wrap{display:flex;flex-direction:column;gap:10px;min-width:0;position:sticky;top:calc(var(--qk-pane-top) + var(--qk-header-h) + 16px)}   /* the phone stays in view while the words scroll (16 Sep 2026: it was cut by the viewport) */
body.desk-full .ped-preview{max-height:calc(100vh - 270px);overflow:auto;display:flex;justify-content:center;padding:12px;border:1px solid var(--qk-rule);border-radius:14px;background:var(--qk-ground)}
.ped-phone{border:10px solid var(--qk-ink);border-radius:44px;background:var(--qk-bg);overflow:hidden;display:flex;flex-direction:column;transform:scale(.82);transform-origin:top center;margin-bottom:-150px}
.ped-phone__hdr{padding:10px 18px 6px;font-weight:700;font-size:15px;color:var(--qk-ink);border-bottom:1px solid var(--qk-rule)}
.ped-phone__body{flex:1;overflow:auto;padding:12px}
.ped-pdf{width:100%;min-height:78vh;border:0;background:#fff;border-radius:6px}
.ped-preview.is-remaking iframe.ped-pdf{opacity:.45;transition:opacity .2s}
.ped-phone .ped-phone__body{flex:1;overflow:auto}
.ped-phone .qk-foot{display:none}
.ped-diff ins{background:rgba(52,199,89,.22);text-decoration:none;border-radius:3px;padding:0 2px}
.ped-diff del{background:rgba(255,69,58,.18);text-decoration:line-through;border-radius:3px;padding:0 2px}
.ped-diffcard .qk-sub ins,.ped-diffcard .qk-sub del{padding:0 4px}
.ped-changes{width:100%}
.guide-page img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.pp-signers-chip[hidden]{display:none}
#ppScroll{padding-bottom:calc(90px + var(--qk-safe-bottom))}
.safety__groups{display:flex;flex-direction:column;gap:24px}
/* no pull-to-refresh rubber band on the office (Sam, 10 Sep 2026: 'It just opens up the refresh pull down'): the page is the app */
html,body{overscroll-behavior-y:none}
/* A SHEET HOLDS THE SCROLL (Josue, testing live, 20 Sep 2026: "When opening an item on the + button and trying to scroll, it scrolls
   the background. It confuses"). While the day sheet is open the page behind it stands still, and a drag that reaches the end of
   the sheet goes nowhere else. */
body:has(#dayBack:not([hidden])){overflow:hidden}
#dayBack,#dayBack .qk-sheet,#dayBody{overscroll-behavior:contain}
/* Home's On Rent label with View all at its end, then the same crane card as Cranes (10 Sep 2026) */
/* the label is Cranes' own label, byte for byte; View all rides on its line (Sam, 10 Sep 2026: 'These screens need to feel identical') */
.dash-sechead{position:relative;display:contents}
.dash-sechead__all{position:absolute;right:0;margin-top:-30px}
.dash-sechead .qk-panel__all{font-size:15px;color:var(--qk-ink-3);padding-right:2px}
.dash-sechead{display:block;position:relative}
.dash-sechead .qk-section{margin-top:8px;margin-bottom:-12px}
.dash-sechead__all{position:absolute;right:2px;top:8px;margin:0}
/* a procedure's row: the full name on two lines at most, the facts under it (10 Sep 2026) */
.safety__d{min-height:64px;padding:12px 20px}
.safety__d .qk-row__name--wrap{font-size:17px;font-weight:500;line-height:1.3}
.safety__d .qk-row__sub{font-size:13px;margin-top:2px}

/* the reader's Contents: a plain left-aligned list, the number then the name (10 Sep 2026: it was centred) */
.swp-toc-list{align-items:stretch !important;text-align:left !important;padding:4px 0 0}
.swp-toc-list li,.swp-toc-list li>a,.swp-toc-list li>button{display:flex !important;align-items:flex-start;justify-content:flex-start !important;text-align:left !important;gap:12px;width:100%;margin:0 !important}
.swp-toc-list li{padding:8px 4px}

/* PROCEDURE CARDS (Two Pillars' list, our look; Sam, 10 Sep 2026): a card each, 12 apart, a soft tile with the shield */
.proc-cards{display:flex;flex-direction:column;gap:12px}
.proc-card{background:var(--qk-card);border-radius:var(--qk-radius-card);min-height:76px;padding:14px 16px 14px 16px;gap:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);align-items:center}
.proc-card__tile{width:48px;height:48px;border-radius:12px;background:var(--qk-on-pill);color:var(--qk-ink);display:flex;align-items:center;justify-content:center;flex:none}
.proc-card__tile .qk-i{width:24px;height:24px}
.proc-card__name{font-size:17px;font-weight:600;line-height:1.3}   /* the one list size (consistency check, 10 Sep 2026) */
.proc-card .qk-row__sub{font-size:15px;margin-top:3px}
.proc-card__ok{color:var(--qk-ok)}
.swp-toc__h{padding:4px 4px 8px;min-height:0;background:transparent;box-shadow:none;border-radius:0}
.swp-toc__h .qk-row__name{font-size:17px;font-weight:600}
.swp-toc__h .qk-row__value{font-size:17px;font-weight:600;color:var(--qk-ink)}


/* the View all inside Cranes' own section label (Home = Cranes, Sam 10 Sep 2026) */
.qk-section .qk-section__all{margin-left:auto;position:static;font-size:15px;font-weight:400;color:var(--qk-ink-3);padding-right:2px}

/* the floating Sign pill: hidden under the sheet, smaller while the reading scrolls */
.pp-sign-pill,.pp-signers-chip{transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s}
.pp-sign-pill{transform-origin:100% 100%}
.pp-signers-chip{transform-origin:0 100%}
.pp-sign-pill.is-scrolling{transform:scale(.8)}
.pp-signers-chip.is-scrolling{transform:scale(.86)}
#ppOverlay.pp-sheet-open .pp-sign-pill,#ppOverlay.pp-sheet-open .pp-signers-chip{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pp-sign-pill,.pp-signers-chip{transition:none}}


/* THE CRANE PAGE'S THREE-DOTS MENU (Sam, 10 Sep 2026): plain rows on the sheet's ground, an icon and a verb, no chevron */
.cmenu{display:flex;flex-direction:column;gap:2px;margin:0 -4px}
.cmenu__r{display:flex;align-items:center;gap:16px;width:100%;min-height:54px;padding:0 12px;border:0;border-radius:14px;background:none;color:var(--qk-ink);font-family:inherit;font-size:17px;font-weight:500;text-align:left;cursor:pointer}
.cmenu__r .qk-i{width:24px;height:24px;stroke-width:1.9;color:var(--qk-ink-2);flex:none}
.cmenu__r:active{background:var(--qk-card)}
.cmenu__r.is-danger{color:var(--qk-bad)}
.cmenu__r.is-danger .qk-i{color:var(--qk-bad)}

/* the Sign pill's menu stands off the page (Sam, 10 Sep 2026: "This all blends") */
.pp-sign-menu{background:#fff;box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08)}
[data-theme="dark"] .pp-sign-menu{background:#2C2C2E;box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14)}
[data-theme="dark"] .pp-sign-menu__r:active{background:#3A3A3C}

/* the Safety tabs are the first thing under the large title: no negative pull (Sam, 10 Sep 2026: "Pills are cut off at the top") */
.qk-stack>.crane__tabs:first-child{margin-top:0}
.cmenu__r:focus{outline:0}
.cmenu__r:focus-visible{outline:0;box-shadow:none}   /* the sheet hands focus to its first row; on a phone that must not read as a lit row */


/* =====================================================================
   THE DOOR'S OWN BEAT (Sam, 10 Sep 2026: "a nice gentle entry… smooth and flawless"): the card settles in over
   640ms with its pieces 90ms apart; an accepted PIN lifts the card over the same beat while the office rises in
   behind it, the bar and the + a beat later. Reduced motion: none of it.
   ===================================================================== */
:root{--qk-door-duration:640ms;--qk-door-stagger:90ms}
.qk-door{animation-duration:var(--qk-door-duration)}
.qk-door>*{animation-duration:var(--qk-door-duration)}
.qk-door>:nth-child(2){animation-delay:var(--qk-door-stagger)}
.qk-door>:nth-child(3){animation-delay:calc(var(--qk-door-stagger) * 2)}
.qk-door>:nth-child(4){animation-delay:calc(var(--qk-door-stagger) * 3)}
.qk-door>:nth-child(n+5){animation-delay:calc(var(--qk-door-stagger) * 4)}
.qk-door__foot{animation-duration:var(--qk-door-duration);animation-delay:calc(var(--qk-door-stagger) * 5)}
#login .qk-credit{animation:qk-fade var(--qk-door-duration) var(--qk-ease) both;animation-delay:calc(var(--qk-door-stagger) * 6)}
.qk-door.qk-leave-up{animation-duration:var(--qk-door-duration)}
#app.qk-arrive{animation:qk-up var(--qk-door-duration) var(--qk-ease) both}
#app.qk-arrive .qk-bar--float,#app.qk-arrive .qk-fab{animation:qk-up var(--qk-door-duration) var(--qk-ease) both;animation-delay:calc(var(--qk-door-stagger) * 2)}
/* the map thumbnails arrive on a fade, never a pop */
.qk-ccard__map img{opacity:0;transition:opacity .45s var(--qk-ease)}
.qk-ccard__map img.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){:root{--qk-door-duration:1ms;--qk-door-stagger:0ms}.qk-ccard__map img{transition:none;opacity:1}}

/* THE OFFICE DOOR SETTLES IN (Sam, 10 Sep 2026: "a nice gentle entry"): the Astra door had every entry switched
   off, so it snapped on. The mark rises first, then the ask, the box, the button and the link, 90ms apart. */
.qk-door--astra>*{animation:qk-up var(--qk-door-duration) var(--qk-ease) both}
.qk-door--astra>:nth-child(1){animation-delay:0ms}   /* the mark box (both marks inside it are one mark) */
.qk-door--astra>:nth-child(2){animation-delay:var(--qk-door-stagger)}
.qk-door--astra>:nth-child(3){animation-delay:calc(var(--qk-door-stagger) * 2)}
.qk-door--astra>:nth-child(4){animation-delay:calc(var(--qk-door-stagger) * 3)}
.qk-door--astra>:nth-child(n+5){animation-delay:calc(var(--qk-door-stagger) * 4)}
.qk-door--astra.qk-leave-up>*{animation:none}
/* on a phone the door is top-anchored, never centred (Sam, 15 Sep 2026: one login screen for every company — the mark box's
   top 71 under the status band, as the Datum door and Astra's signed drawing have it; until then it sat above the centre) */
@media (max-width:767px){
  .qk-body--door:has(>.qk-door--astra),.qk-body--door.qk-body--astra{justify-content:flex-start;padding-top:71px;padding-bottom:0;background:radial-gradient(circle at 50% 34%, var(--qk-card) 0, var(--qk-ground) 260px)}
  .qk-door--astra>.qk-door__logo{margin-top:0}
  .qk-door--astra>.qk-door__mark{margin-top:0}
  .qk-door--astra>.qk-door__ask{margin-top:32px}
  /* the mark box 200 wide on a phone (Sam, 15 Sep 2026, on the Two Pillars door: "Make it super clean and optimize the
     logo size" — 168, 200 and 220 were rendered, 200 chosen); the box stays 112 tall, so nothing under it moves */
  .qk-door__mark{width:200px}
  .qk-door__mark .qk-logo{width:200px;height:112px}   /* the mark's box is the whole 200 by 112; object-fit keeps a round seal round (Astra, 15 Sep 2026) */
}


/* =====================================================================
   THE BRAND BAND (Sam, 10 Sep 2026, after Two Pillars' header): the mark top left, the search pill beside it,
   pinned at the top. At rest it stands on the ground; once content passes under it, it takes the ground colour
   and a hairline so nothing collides with it. The large title beneath scrolls away.
   ===================================================================== */
/* one mark at a time: the band's display:block above outranked the logo theme rule by order, so light mode drew both (found 11 Sep 2026) */
/* the large title sits under the band: no safe-top of its own, the search button gone (the band carries it) */
/* the band carries the search: the title row's magnifier goes */
/* THE PAGE FADES OUT UNDER THE FLOATING BAR (Sam, 10 Sep 2026: "The menu bar can get kinda lost"): a soft fade
   into the ground behind the capsule and the +, so the bar always stands on quiet ground. The bar itself is untouched. */
@media (max-width:1023px){
  .ops::after{content:'';position:fixed;left:0;right:0;bottom:0;height:128px;pointer-events:none;z-index:calc(var(--qk-z-bar) - 1);background:linear-gradient(to bottom,rgba(21,21,21,0) 0%,rgba(21,21,21,.78) 45%,#151515 100%)}
  :root[data-theme="light"] .ops::after{background:linear-gradient(to bottom,rgba(243,243,240,0) 0%,rgba(243,243,240,.8) 45%,#F3F3F0 100%)}
  body.is-paned .ops::after{display:none}
}

/* the mark is a button: the way home (Sam, 10 Sep 2026) */


/* =====================================================================
   SETTINGS LIKE THE PHONE'S OWN (Sam, 10 Sep 2026): a labelled group per subject, one card per group, rows with
   a name and a value on the right, a chevron where a row opens a page, a switch where a thing is on or off, a
   helper line under a card. The old form, the summary and the foot stay in the document, hidden.
   ===================================================================== */
#tab-setup #setForm,#tab-setup #setSummary,#tab-setup #safetyBox,#tab-setup #dataBox,#tab-setup #tourRowBox,#tab-setup #officeRow,#tab-setup #aboutRow{display:none}
.set{display:flex;flex-direction:column;gap:26px;padding-bottom:8px}
.set-group{display:flex;flex-direction:column}
.set-label{font-size:15px;font-weight:600;color:var(--qk-ink-3);padding:0 4px 8px}
.set-card{background:var(--qk-card);border-radius:16px;overflow:hidden;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge)}
.set-help{font-size:15px;line-height:1.45;color:var(--qk-ink-3);padding:8px 16px 0}
.set-help .qk-msg{display:inline;margin:0;padding:0;font-size:inherit;color:inherit}
.set-help .qk-msg--ok{color:var(--qk-ok)}
.set-help .qk-msg--bad{color:var(--qk-bad)}
.set-help .qk-msg:empty{display:none}
/* every row in a card, the ones drawn here and the ones moved in */
.set-card>.set-row,.set-card>.qk-row,.set-card>.qk-rows>.qk-row,.set-card>#feelSwitches>.qk-row,.set-card>#faceBox>.qk-row{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:0 16px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--qk-ink);font-family:inherit;font-size:17px;font-weight:400;text-align:left;cursor:pointer;position:relative;margin:0}
.set-card>.qk-rows{display:contents}
.set-card>#feelSwitches,.set-card>#faceBox{display:contents}
.set-card>#faceBox[hidden]{display:none}
/* the hairline between rows, inset to the text like the phone's */
.set-card>*+*::before,.set-card>.qk-rows>.qk-row+.qk-row::before,.set-card>#feelSwitches>.qk-row+.qk-row::before{content:'';position:absolute;left:16px;right:0;top:0;height:1px;background:var(--qk-rule)}
.set-card>*:first-child::before{display:none}
.set-row__ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--qk-ink-2)}
.set-row__ic .qk-i{width:22px;height:22px;stroke-width:1.75}
.set-row__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-row__val{color:var(--qk-ink-3);font-size:17px;max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.set-row .qk-chev{flex:none;width:18px;height:18px;color:var(--qk-ink-3)}
.set-row--danger{color:var(--qk-bad);justify-content:center}
.set-row--danger .set-row__name{flex:none}
/* the rows moved in keep their tile as the icon and put their sub-line on the right as the value */
.set-card .qk-row .qk-tile{width:26px;height:26px;background:transparent;color:var(--qk-ink-2);margin:0;flex:none}
.set-card .qk-row .qk-tile .qk-i{width:22px;height:22px;stroke-width:1.75}
.set-card .qk-row .qk-row__main{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.set-card .qk-row .qk-row__name{font-size:17px;font-weight:400;color:var(--qk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-card .qk-row .qk-row__sub{font-size:17px;color:var(--qk-ink-3);text-align:right;max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-card .qk-row--switch .qk-row__main,.set-card .qk-row--desc .qk-row__main{flex-direction:column;align-items:flex-start;gap:2px}   /* a link row with a description under its name (Take the tour, Sam's copy of 22 Sep 2026) stacks like a switch row; the rest keep the value at the right */
.set-card .qk-row--switch .qk-row__sub{text-align:left;max-width:none;font-size:15px;white-space:normal}
.set-card .qk-row--switch{padding-top:9px;padding-bottom:9px}
.set-card .qk-row .qk-chev{width:18px;height:18px;color:var(--qk-ink-3)}
.set-card .qk-row:active,.set-card>.set-row:active{background:var(--qk-on-pill)}
/* the switch: the phone's green, the phone's size */
.set-card .qk-switch{width:51px;height:31px;border-radius:999px;background:var(--qk-rule)}
.set-card .qk-switch i{top:2px;left:2px;width:27px;height:27px}
.set-card .qk-switch--on,.set-card .qk-row--switch input[type="checkbox"]:checked~.qk-switch{background:#34C759}
.set-card .qk-switch--on i,.set-card .qk-row--switch input[type="checkbox"]:checked~.qk-switch i{left:22px}
/* THE PERSON AT THE TOP (ChatGPT's settings, Sam 19 Sep 2026): initials in a ring, a pencil, the name, the company */
.set-profile{display:flex;align-items:center;gap:var(--qk-space-4);width:100%;padding:var(--qk-space-3) var(--qk-space-1) 0;margin-bottom:calc(var(--qk-space-2) * -1);background:none;border:0;font:inherit;color:var(--qk-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.set-profile__av{position:relative;flex:none}
.set-profile .qk-avatar.set-profile__ini{width:64px;height:64px;border-radius:32px;font-size:24px;font-weight:600;box-shadow:inset 0 0 0 2px var(--qk-accent)}   /* outranks the kit's 32px avatar, which is written later in this file */
.set-profile .qk-avatar.set-profile__ini:empty{visibility:visible}
.set-profile__pen{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:13px;background:var(--qk-card);box-shadow:0 0 0 2px var(--qk-ground),var(--qk-shadow);display:flex;align-items:center;justify-content:center;color:var(--qk-ink)}
.set-profile__pen .qk-i{width:14px;height:14px}
.set-profile__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-profile__name{font-size:22px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-profile__name:empty::before{content:'You'}
.set-profile__sub{font-size:15px;color:var(--qk-ink-3)}
body.desk-set .set-profile{display:none}
/* the account cards, one card on the phone (Company, People and PINs, Alerts, Billing); the desktop keeps them as its tabs */
#setList>.set-group--join>.set-label{display:none}
#setList>.set-group--join+.set-group--join{margin-top:-26px}
#setList>.set-group--join>.set-card{position:relative;box-shadow:inset 1px 0 0 var(--qk-edge),inset -1px 0 0 var(--qk-edge),inset 0 1px 0 var(--qk-edge);border-bottom-left-radius:0;border-bottom-right-radius:0}
#setList>.set-group--join+.set-group--join>.set-card{border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 1px 0 0 var(--qk-edge),inset -1px 0 0 var(--qk-edge)}
#setList>.set-group--join+.set-group--join>.set-card::before{content:'';position:absolute;left:16px;right:0;top:0;height:1px;background:var(--qk-rule)}
#setList>.set-group--join-end>.set-card{border-bottom-left-radius:16px;border-bottom-right-radius:16px;box-shadow:var(--qk-shadow),inset 1px 0 0 var(--qk-edge),inset -1px 0 0 var(--qk-edge),inset 0 -1px 0 var(--qk-edge)}
#setList>.set-group--join>.set-help:has(>.qk-msg:empty:only-child){display:none}
#setList>.set-group--join>.set-help:not(:empty){padding-bottom:var(--qk-space-2)}
/* the settings page: the fold's body on its own page */
.setpage .bnd__b{padding:8px 16px calc(120px + var(--qk-safe-bottom))}
.setpage .qk-pane__hdr{display:none}
.setpage .qk-disc__b{display:flex;flex-direction:column;gap:12px}

/* settings polish: the name never gives way to the value (the icons came back 19 Sep 2026, ChatGPT's rows) */
.set-row__val,.set-card .qk-row .qk-row__sub{max-width:44%;flex:none}
.set-card .qk-row--switch .qk-row__sub{max-width:none;flex:1}
.set-card #s-cranes .qk-row__sub{display:none}
.set-card #s-cranes .qk-row__value{color:var(--qk-ink-3);font-size:17px;font-weight:400}
.set-help .qk-msg:not(:empty)::after{content:' '}

/* the audit: hidden pieces leave no hairline or gap; the people page's rows read as the phone's */
.set-card>[hidden],.setpage [hidden]{display:none !important}
.set-card>#feelSwitches>.qk-row .qk-row__sub[hidden]{display:none}
.setpage .qk-section{font-size:15px;font-weight:600;color:var(--qk-ink-3);padding-left:4px;margin:8px 0 0}   /* audit 26: the -2 pulled the card over the heading's descenders */
.setpage .qk-section .qk-info{display:none}
#installBtn.set-row{display:flex}
#installBtn[hidden]{display:none !important}

/* START A RENTAL: the fields grouped in cards, the button last */
.rental__form .qk-rows{overflow:visible}
.rental__form .qk-btn--primary{margin-top:6px}
.rental__form .qk-field:focus-visible,.rental__form .qk-field:focus{outline:0;box-shadow:none}
/* no ring on the first control a sheet hands focus to (Sam, 10 Sep 2026: "I don't like that border, we don't do that anywhere else") */
.qk-sheet .qk-field:focus-visible,.qk-sheet button:focus-visible:not(.qk-btn),.bnd .qk-field:focus-visible{outline:none}

/* the date field's invisible picker never shows a text caret over the date */
.qk-field__date{caret-color:transparent;color:transparent}
.qk-field__value:focus,.qk-field__value:focus-visible,textarea.qk-field__value--area:focus{outline:none;box-shadow:none}

/* a note box sits flat in its card: no inset border, no second surface (Sam, 10 Sep 2026: no borders anywhere) */
textarea.qk-field__value--area{box-shadow:none;background:transparent;padding:6px 0 0;border-radius:0}
textarea.qk-field__value--area:focus{background:transparent}

.qk-row--off .qk-row__name{color:var(--qk-ink-3)}

/* Clients, Crews, Enquiries on the Cranes pattern (Sam, 10 Sep 2026): no bars, no drawer, no banner */
#tab-leads #lineMixBox,#tab-leads .more,#tab-clients .more,#tab-crews .more,#tab-crews #crewSender,#tab-crews #crewTiles,#tab-leads #leadTiles{display:none !important}
#client .qk-crane-head{margin-bottom:4px}
#client .qk-crane-head__main{width:100%}
/* the client page sits under the sheets (it shared the scrim's layer and painted over its own menu) */
#client{z-index:75}


/* WORKER PROFILES (Sam, 10 Sep 2026) */
#worker{z-index:75}
.qk-row--act .qk-row__name{color:var(--qk-ink-2)}
.cert__pic{display:block;border-radius:16px;overflow:hidden;background:var(--qk-card)}
.cert__pic img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain}
.qf-switch{background:var(--qk-card);padding:0 16px}

/* CERTIFICATE THUMBNAILS (Sam, 10 Sep 2026) */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cert-tile{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;background:var(--qk-card);border-radius:16px;overflow:hidden;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);color:var(--qk-ink);font-family:inherit;text-align:left;cursor:pointer}
.cert-tile:active{background:var(--qk-on-pill)}
.cert-tile__pic{position:relative;display:block;aspect-ratio:4/3;background:var(--qk-on-pill);overflow:hidden}
.cert-tile__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cert-tile__doc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--qk-ink-2)}
.cert-tile__doc .qk-i{width:30px;height:30px;stroke-width:1.5}
.cert-tile__doc b{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--qk-ink-3)}
.cert-tile__doc--none{color:var(--qk-ink-3)}
.cert-tile__pill{position:absolute;left:8px;bottom:8px}
.cert-tile__name{padding:10px 12px 0;font-size:15px;font-weight:600;line-height:1.3}
.cert-tile__sub{padding:2px 12px 12px;font-size:13px;color:var(--qk-ink-3)}
.cert-tile--add .cert-tile__pic{background:transparent;box-shadow:inset 0 0 0 1px var(--qk-rule)}
.cert-tile--add .cert-tile__name{color:var(--qk-ink-2);padding-bottom:12px}
.cert-tile--add .cert-tile__doc .qk-i{width:26px;height:26px}

/* THE DATE PILL (Sam, 10 Sep 2026: "the next due date… jumps out at you… give everything a bit of breathing room"):
   one date under a row's name, in its own shape, with the calendar mark; the caption after it stays quiet. */
.qk-row__meta{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.qk-pill--date{gap:6px;padding:5px 11px 5px 9px;font-size:13px;font-weight:var(--qk-weight-semi);line-height:1}
.qk-pill--date .qk-i{width:15px;height:15px;flex:none}
.qk-row__meta .qk-row__sub{margin:0}
/* SAM, 20 SEP 2026 — the service row: a tick a fat finger hits, and a chevron that says the row opens.
   "The checkmarks I don't love they are very small and hard to press with fat fingers." · "there's nothing
   indicating that you can expand this section and nobody will figure that out. Add an arrow or something" */
.mb__tap{position:relative}
.mb__svcpdf{display:flex;justify-content:center;margin-top:var(--qk-space-3)}   /* the finished visit's own record (23 Sep 2026) */
.vman__who{margin-top:var(--qk-space-2)}.vman__r{cursor:default}.vman .mbc__r{padding-right:var(--qk-space-4)}
.mbc__src{display:block;font-size:var(--qk-text-xs,12px);color:var(--qk-ink-3);margin-top:2px}   /* the printed row's source line on the visit card (23 Sep 2026) */
.mb__tap::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--qk-tap);height:var(--qk-tap)}
.mb__chev{display:inline-flex;align-items:center;justify-content:center;width:var(--qk-space-5);height:var(--qk-space-5);flex:none;color:var(--qk-ink-3);transition:transform .18s ease}
.mb__chev svg{width:var(--qk-space-5);height:var(--qk-space-5);stroke-width:2}
.mb__chev.is-open{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.mb__chev{transition:none}}
/* who owes a binder document, as a pill on its line (Sam, 20 Sep 2026: "each thing should have a little pill") */
.bnd__who{flex:none;margin-right:var(--qk-space-2)}
/* the + sheet, grouped with a box to find one (Sam, 20 Sep 2026) */
.newsheet__find{margin:0 0 var(--qk-space-3)}
/* A GROUP'S NAME STANDS CLEAR OF ITS FIRST CARD (Sam, 20 Sep 2026, on the + sheet with "Cranes" and "Records" cut in half by
   the card under them: "wtf no"). The kit's section pulls its group up 12 because a stack's 24 gap stands between them; this
   list has no stack, so the first card rode over the name. Its own margins: 26 above, 12 below. And a card whose line wraps
   keeps 12 of air above and below its words instead of running them to its edges. */
#newList .qk-section,.occ .qk-section{margin:26px 0 12px}
#newList .qk-section:first-child{margin-top:0}
.occ .qk-section:first-child{margin-top:10px}   /* the crane's name stands above it */
.occ.qk-stack{gap:0}
.newsheet__big .newsheet__r{padding-top:12px;padding-bottom:12px}
/* the box that narrows the list reads from the left like every search box, not from the right like a form's value */
.newsheet__find .qk-field__value{text-align:left}
/* THE OCCURRENCE SHEET (20 Sep 2026): the + sheet's cards; work and reference are read, not tapped; Back beside the one action,
   held at the foot of the sheet while the list runs under it */
.occ__r .qk-row__name--wrap{white-space:normal}
/* and on the sheets: a name and one line on every card, and a list's cards all as tall as its tallest */
#newList .newsheet__big,.occ .newsheet__big{display:grid;grid-auto-rows:1fr}
.newsheet__big .newsheet__r{min-height:68px}
.occ .newsheet__big .newsheet__r:not([data-occpick]):not([data-occcrane]){cursor:default}
.occ__acts{position:sticky;bottom:0;margin-top:24px;padding:12px 0 0;background:var(--qk-ground);z-index:2}
.occ__acts::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;background:linear-gradient(to bottom,transparent,var(--qk-ground));pointer-events:none}
.occ__acts::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(14px + var(--qk-safe-bottom));background:var(--qk-ground)}
.occ__acts>.qk-btn{width:auto;flex:1 1 0}
.occ__acts>.qk-btn:first-child{flex:0 0 32%}
/* the crane record's facts, the form's shape (Sam, 20 Sep 2026: "Can it look more like this") */
.crn-fact{background:transparent;border-radius:0;padding:var(--qk-space-3) var(--qk-space-4);width:100%;text-align:left}
.qk-panel .crn-fact+.crn-fact{box-shadow:inset 0 1px 0 var(--qk-edge)}
.crn-fact .qk-field__value{text-align:left;font-size:var(--qk-size-body)}
.crn-fact--go{position:relative;padding-right:var(--qk-space-6)}
.crn-fact--go::after{content:"";position:absolute;right:var(--qk-space-4);top:50%;width:7px;height:7px;border-right:2px solid var(--qk-ink-3);border-bottom:2px solid var(--qk-ink-3);transform:translateY(-50%) rotate(-45deg)}
/* what to do, on the card (Sam, 20 Sep 2026) */
.mb__how{color:var(--qk-ink-2);font-size:var(--qk-size-sub);line-height:var(--qk-line-prose)}
.mb__how p{margin:0 0 var(--qk-space-2)}
.mb__how__l{margin:0 0 var(--qk-space-2);padding-left:var(--qk-space-5);display:flex;flex-direction:column;gap:var(--qk-space-1)}
.mb__how__c{color:var(--qk-ink);font-weight:var(--qk-weight-medium)}
.mb__how--none{color:var(--qk-ink-3)}
.mb__save{margin-top:var(--qk-space-2)}
.mb .mb__r{padding-top:16px;padding-bottom:16px}
.mb .qk-line.mb__r{padding-top:4px;padding-bottom:12px}
/* THE VISIT (Sam, 20 Sep 2026). A CARD PER ITEM, chosen from three layouts rendered with the real items: "I think this. It's nice
   and clean. I don't like unnecessary clutter from words that aren't needed." Then, on a screen of green cards: "I don't like
   this" · "Take it to another level." So: the component in bold, the action under it, the ring-i at the left and the square at
   the right. A job ticked now stays where it is - the square fills, the words dim, nothing moves under his thumb. A finished
   card keeps its place behind what is left: its round check green, its words dimmed, the date it is next due under its name.
   Every check is round and stands at the right. The progress stands in the header card. */
.vhead__prog{display:flex;flex-direction:column-reverse;align-items:stretch;gap:var(--qk-space-2);margin-top:var(--qk-space-3)}   /* the count over a full-width bar (the UI polish, 24 Sep 2026) */
.vhead__prog .mbc__bar{flex:1 1 auto;margin:0}
.bnd__job__lines{margin-top:var(--qk-space-4)}   /* air between the bar and the job lines (Sam, 22 Sep 2026: "It’s so cramped") */
.bnd__job__lines .qk-row{min-height:80px;padding-top:16px;padding-bottom:16px}   /* every line the same thickness, two lines of name or one (Sam, 22 Sep 2026: "more breathing room and make them all the same thickness") */
.vhead__n{flex:none;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi);color:var(--qk-ink-2);font-variant-numeric:tabular-nums}
.vhead__n.is-ok{color:var(--qk-ok)}
.mbc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--qk-space-3);margin:var(--qk-space-4) var(--qk-space-1) 0}
.vsheet .mbc__head+.mbc__stack{margin-top:calc(var(--qk-space-2) * -1)}
.mbc__h{margin:0;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--qk-ink-3)}
.mbc__pill{flex:none;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi);line-height:1;color:var(--qk-ink-3);font-variant-numeric:tabular-nums}
.mbc__pill.is-ok{color:var(--qk-ok)}
.mbc__bar{height:calc(var(--qk-space-1) * 1.5);border-radius:var(--qk-space-1);background:var(--qk-rule);overflow:hidden}
.mbc__bar i{display:block;height:100%;border-radius:var(--qk-space-1);background:var(--qk-accent);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.mbc__bar.is-ok i{background:var(--qk-ok)}
.mbc__stack{display:flex;flex-direction:column;gap:var(--qk-space-2)}
.qk-section+.mbc__stack{margin-top:var(--qk-space-3)}   /* a section head ends in a negative margin the kit's stacks stand above; this stack had nothing above it and its first card covered the head (the schedule's "Not yet dated", 22 Sep 2026) */
.mbc{background:var(--qk-card);border-radius:var(--qk-radius-card)}
.mbc .mbc__r{display:flex;align-items:center;gap:var(--qk-space-3);padding:var(--qk-space-3) var(--qk-space-4);min-height:calc(var(--qk-tap) + var(--qk-space-5));cursor:pointer}
/* EVERY CARD THE SAME SIZE (Sam, 20 Sep 2026: "I want all cards the same size"). His titles run from two words to a dozen, so a
   card is three lines tall whatever it says: the name and what is done to it share the three, and a title longer than that ends
   in an ellipsis - its whole wording is one tap away on the i and in the entry. A short one sits centred in the same card. */
.mbc .mbc__r{height:92px;min-height:0;box-sizing:border-box}
.mbc__t{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.mbc__t>.mbc__n,.mbc__t>.mbc__s,.mbc__words>.mbc__n,.mbc__words>.mbc__s{display:block}
.mbc__words{display:block;min-width:0}
.mbc__t>.mbc__s,.mbc__words>.mbc__s{margin-top:2px}
.mbc__n{font-size:var(--qk-size-body);font-weight:var(--qk-weight-semi);line-height:var(--qk-line-body);color:var(--qk-ink);transition:color .25s ease}
.mbc__s{font-size:var(--qk-size-sub);line-height:var(--qk-line-body);color:var(--qk-ink-3)}
.mbc__s--bad{color:var(--qk-bad)}
.mbc.is-done .mbc__n{color:var(--qk-ink-3);font-weight:var(--qk-weight-medium)}
.mbc.is-done .mbc__i{opacity:.45}
.mbc__i{flex:none}
/* the Schedule list's card: when it falls due over the crane it is on, at the right (Sam, 20 Sep 2026) */
.mbc--go{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mbc--go .qk-chev{flex:none;color:var(--qk-ink-3)}
.mbc__when{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:42%}
.mbc__when b{font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);color:var(--qk-ink-2);white-space:nowrap}
.mbc__when i{font-style:normal;font-size:13px;color:var(--qk-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* a card that is read, not ticked (an occurrence's specifications): the whole card opens its information sheet; a book where the check would be */
.mbc--ref .mbc__r--ref{appearance:none;-webkit-appearance:none;background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit}
.mbc__ref{flex:none;width:var(--qk-tap);height:var(--qk-tap);display:inline-flex;align-items:center;justify-content:center;color:var(--qk-ink-3)}
.mbc__box{flex:none;border-radius:50%;transition:background-color .18s ease,box-shadow .18s ease}   /* round, every one (Sam, 20 Sep 2026) */
.mbc.is-open .mb__e{padding:0 var(--qk-space-4) var(--qk-space-4)}
/* the tick that has just landed: the square springs once and the mark draws itself */
/* ALIVE WHEN CHECKED (Sam, 20 Sep 2026: "live feeling when checked"): the circle springs, a ring of its own green opens out from it
   and is gone, and the mark draws itself - under half a second, once, on the tick that has just landed */
@keyframes mbcPop{0%{transform:scale(.6)}45%{transform:scale(1.18)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes mbcRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--qk-ok) 55%,transparent)}100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--qk-ok) 0%,transparent)}}
@keyframes mbcDraw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.mbc.is-just .mbc__box{animation:mbcPop .42s cubic-bezier(.2,.8,.2,1),mbcRing .6s ease-out}
.mbc.is-just .mbc__box .qk-i{stroke-dasharray:24;animation:mbcDraw .3s .1s ease-out both}
@media (prefers-reduced-motion:reduce){.mbc__bar i,.mbc__n,.mbc__box{transition:none}.mbc.is-just .mbc__box,.mbc.is-just .mbc__box .qk-i{animation:none}}


/* THE GRIP (Settings lists, 10 Sep 2026: Coleman rearranges his lists by dragging). The handle takes the
   pointer; the row it lifts rides above its neighbours on the card's own colour. */
.qk-row__grip{flex:none;width:28px;height:44px;margin-left:-8px;display:flex;align-items:center;justify-content:center;
  color:var(--qk-ink-3);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:8px}
.qk-row__grip .qk-i{width:20px;height:20px}
.qk-row__grip:focus-visible{outline:2px solid var(--qk-ink);outline-offset:-2px}
.qk-rows--sorting .qk-row{-webkit-user-select:none;user-select:none}
.qk-rows .qk-row--lift,.qk-row--lift{z-index:5;background:var(--qk-card);box-shadow:var(--qk-shadow-primary);border-radius:var(--qk-radius-box);cursor:grabbing}
.qk-rows .qk-row--lift::before{display:none}

/* THE SERVICE PAGE'S SCHEDULE (11 Sep 2026): the List / Calendar switch, and a month of days on a card — a dot on a day with work due, red once it is past, the picked day filled */
.svc__switch{margin:0 0 var(--qk-space-3)}
.svc__more{padding:var(--qk-space-2) var(--qk-space-3)}
.svc__edit{margin-top:var(--qk-space-3)}
.svc-cal{padding:var(--qk-space-3)}
.svc-cal__head{justify-content:space-between;margin-bottom:var(--qk-space-2)}
.svc-cal__month{font-size:var(--qk-size-name);font-weight:var(--qk-weight-semi)}
.svc-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.svc-cal__w{text-align:center;font-size:var(--qk-size-caption);color:var(--qk-ink-3);padding:4px 0 6px}
.svc-cal__d{position:relative;aspect-ratio:1;border:0;background:none;border-radius:var(--qk-radius-field);color:var(--qk-ink);font:inherit;font-size:var(--qk-size-sub);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svc-cal__d--pad{cursor:default}
.svc-cal__d>span{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.svc-cal__d.is-today>span{box-shadow:inset 0 0 0 1.5px var(--qk-ink-3)}
.svc-cal__d.is-on>span{background:var(--qk-primary-bg);color:var(--qk-primary-fg);box-shadow:none}
.svc-cal__d>i{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:999px;background:var(--qk-ink-2)}
.svc-cal__d.is-late>i{background:var(--qk-warn)}   /* decision 5: late is amber, like the pill */
.svc-cal__d.is-on>i{background:var(--qk-ink)}

/* ONE CARD PER CRANE ON THE SERVICE PAGE (11 Sep 2026): the procedures' card with the maintenance record on a second line */
.svc-crane{background:var(--qk-card);border-radius:var(--qk-radius-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);overflow:hidden}
.svc-crane .svc-crane__main{background:none;box-shadow:none;border-radius:0;width:100%}
.svc-crane__rec{gap:var(--qk-space-2);padding:10px 16px 12px;border-top:1px solid var(--qk-rule);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the binder's two buttons, side by side at its foot; the crane's procedures as a small heading inside their folder (Sam, 21 Sep 2026) */
.crn__acts{margin-top:var(--qk-space-4)}
.crn__acts>.qk-btn{flex:1 1 0;width:auto;gap:8px}
.crn__share:empty{display:none}
.bnd__sub{font-size:15px;margin:16px 0 8px;padding-left:4px}
/* an alert's row on the list: the switch at the right is its own button; an alert that is off reads quietly (Sam, 21 Sep 2026) */
.alx__row{cursor:pointer}
.alx__row .alx__sw{appearance:none;-webkit-appearance:none;border:0;padding:0;flex:none;cursor:pointer}
.alx__row.is-off .qk-row__name{color:var(--qk-ink-3)}
/* the record's PDF button, under the card's words (Sam, 20 Sep 2026) */
/* on the card's own last line, at the right of the count: the card keeps its height */
.svc-crane{position:relative}
.svc-crane__foot{position:absolute;right:16px;bottom:14px;padding:0}
.svc-crane__pdf{width:auto;height:34px;min-height:0;gap:6px;padding:0 13px;font-size:15px}
.svc-crane__pdf .qk-i{width:16px;height:16px}
.svc-crane__rec>.qk-i{width:var(--qk-icon-sm);height:var(--qk-icon-sm);color:var(--qk-ink-3);flex:none}
.svc-crane__rectxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
/* the month's checks as a bar on the crane's card */
.svc-crane__main{align-items:flex-start;padding-top:16px;padding-bottom:16px}
.svc-crane__main .qk-chev{align-self:center}
.svc-prog{display:block;height:6px;border-radius:999px;background:var(--qk-rule);margin:10px 0 8px;overflow:hidden}
.svc-prog>i{display:block;height:100%;border-radius:999px;background:var(--qk-ink);transition:width .4s var(--qk-ease)}
.svc-prog.is-ok>i{background:var(--qk-ok)}
.svc-crane__state{margin-top:0}
/* a day's row lifts under a held finger and drops on a day (11 Sep 2026) */
.svc-drag{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.svc-drag.is-lifting{opacity:.35}
.svc-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%) scale(1.02);opacity:.95;background:var(--qk-card);border-radius:var(--qk-radius-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge)}
body.svc-dragging{-webkit-user-select:none;user-select:none}
.svc-cal__d.is-over>span{box-shadow:inset 0 0 0 2px var(--qk-ink);border-radius:999px}
/* THE DESKTOP'S HOME (Sam, 11 Sep 2026: "Desktop needs to be optimized in every possible way"): the whole width, the
   crane cards in a grid, the three panels side by side, the header over the content's left edge */
@media (min-width:1280px){
  /* THE RULE (Sam, 11 Sep 2026): side by side only when they are the same kind of thing. The crane cards are
     peers, so they share a row; Upcoming, Enquiries and Needs attention are three different things, so they
     stack full width. One column of about 1200 under the title. */
  body.desk-home .ops>.wrap{max-width:1264px;margin:0;padding-left:32px;padding-right:32px}
  body.desk-home #todayBoard .qk-ccard__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:16px;align-items:start}
  body.desk-home .ops>.wrap>.panel{width:auto}
  body.desk-home .ops__detail{display:none}   /* no empty pane ground painted over the width */
  body.desk-home .ops>#opsHdr{padding-left:32px;padding-right:32px}
  body.desk-home .ops>#opsHdr .qk-hdr__title{left:calc(32px + var(--qk-hdr-title-inset));right:32px;text-align:left;justify-content:flex-start}
  body.desk-home #todayBoard .dash-panels{display:flex;flex-direction:column;gap:var(--qk-col-gap)}
}
/* THE DESKTOP'S PAIRS (11 Sep 2026): list at the left, the record filling the rest of the width */
@media (min-width:1280px){
  body.desk-pair .ops>.wrap{max-width:none;margin:0;padding-left:32px;padding-right:32px}
  body.desk-pair .ops>#opsHdr{padding-left:32px;padding-right:32px}
  body.desk-pair .ops>#opsHdr .qk-hdr__title{left:calc(32px + var(--qk-hdr-title-inset));right:32px;text-align:left;justify-content:flex-start}
  body.desk-pair .ops>.wrap>.panel{width:var(--qk-pane-list-w)}
  body.desk-pair .ops__detail,body.desk-pair.is-paned .bnd.qk-pane--detail,body.desk-pair.is-paned #crn.qk-pane--detail,body.desk-pair.is-paned #rlog.qk-pane--detail,body.desk-pair.is-paned #ppOverlay.qk-pane--detail,body.desk-pair.is-paned #setForm>.qk-disc[open]>.qk-disc__b{left:calc(var(--qk-rail-w) + 32px + var(--qk-pane-list-w) + 24px);right:32px}
}
/* the crane page's overview: a stack on the phone, two columns on the desktop's pane (11 Sep 2026) */
.crn-overview{display:flex;flex-direction:column;gap:var(--qk-space-3);min-width:0}
.crn-overview>div{display:flex;flex-direction:column;gap:var(--qk-space-3);min-width:0}
@media (min-width:1280px){
  /* (the two-column overview was tried and withdrawn under the same rule — the groups are different things) */
}
/* the Service list's chosen card while its board stands in the pane */
.svc-crane.is-on{box-shadow:var(--qk-shadow),inset 0 0 0 2px var(--qk-ink)}
/* the code the desktop shows for signing on a phone (11 Sep 2026): black on white, so any camera reads it */
.pp-qr{display:flex;justify-content:center;padding:var(--qk-space-2) 0}
.pp-qr svg{width:220px;height:220px;color:#000;background:#fff;border-radius:12px;padding:12px;box-sizing:content-box}
.pp-phone-sign{max-width:440px}
/* THE DESKTOP'S SETTINGS (Sam, 11 Sep 2026: "Tabs across the top"): the section names in one row under the title,
   the section beneath as cards — a compact form with the label at the left of its field, then the section's rows */
#setNav,#setHead{display:none}
.set-row--inlined{display:none!important}
@media (min-width:1280px){
  body.desk-set .ops>.wrap>.panel{width:auto}
  /* Settings at width is a desktop page like the others: no phone header over it (it covered the tab row), its own title, then the tabs */
  body.desk-set .ops>#opsHdr{display:none}
  body.desk-set .ops>.wrap{padding-top:28px}
  body.desk-set #setHead{margin:0 0 12px;max-width:960px}
  body.desk-set #setList{display:none}
  body.desk-set .ops__detail{display:none}   /* the pair's empty fill column would stand over the tab row */
  /* the tab row and the cards share one reading column (the way Apple, GitHub and Linear lay settings out — Sam, 11 Sep 2026: 'the toggles seem far away') */
  body.desk-set #setHead{display:flex}
  body.desk-set #setNav{display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--qk-rule);padding:0 4px;height:44px;max-width:960px}
  .set-tab{height:44px;padding:0 2px;border:0;background:none;color:var(--qk-ink-3);font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .set-tab:hover{color:var(--qk-ink)}
  .set-tab.is-on{color:var(--qk-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--qk-ink)}
  .set-tab--out{margin-left:auto;color:var(--qk-bad)}
  .set-tab--out:hover{color:var(--qk-bad);opacity:.8}
  body.desk-set.is-paned #setPage.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px;top:calc(var(--qk-pane-top) + var(--qk-header-h) + 76px)}   /* 24 under the tab row's rule (16 Sep 2026: the 128 left a dead band Sam read as broken) */   /* below the tab row (the panel starts 4 under the header's foot, the tabs are 44, then 20 of air) */
  /* a Settings fold that is its own layer (Maintenance schedules, Daily log items) takes the settings page's own box below the tab row,
     never the pair's fill column over a full-width page (the two screens the sweep never reached, 16 Sep 2026) */
  /* EVERY page a Settings row opens (21 Sep 2026; Sam, of Procedures standing as a pane over the Safety program card with its heading adrift: "wtf this is awful").
     The treatment was written for Maintenance schedules and Daily log items alone (16 Sep 2026); Procedures, Crew access, Change history, Support, Removed
     cranes and Load a schedule fell through to the pair's fill column and stood over the settings column. One rule for all of them. */
  body.desk-set.is-paned :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul).qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px;top:calc(var(--qk-pane-top) + var(--qk-header-h) + 76px)}
  /* …and read as a settings sub-page: the 44 header with "‹ Settings" and the name in small type, the body left-aligned at the settings width */
  body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul)>.qk-hdr{height:44px;min-height:44px;align-items:center}
  body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul)>.qk-hdr>.qk-tap:first-child{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul)>.qk-hdr>.qk-tap:first-child::after{content:'Settings'}
  body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul)>.qk-hdr>.qk-tap:first-child:hover{background:var(--qk-soft);color:var(--qk-ink)}
  body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul)>.qk-hdr .qk-hdr__title{left:auto;right:auto;position:static;margin-left:12px;font-size:15px;font-weight:600}
  body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul) .bnd__in,body.desk-set :is(#msc,#lgi,#prc,#sas,#chg,#mgd,#cty,#rul)>.bnd__b{margin-left:0;margin-right:0;max-width:960px}
  body.desk-set #setPage:not(.is-sub)>.qk-hdr{display:none}
  body.desk-set #setPage.is-sub>.qk-hdr{height:44px;min-height:44px;align-items:center}
  body.desk-set #setPage.is-sub #setPageBack{visibility:visible;display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.desk-set #setPage.is-sub #setPageBack::after{content:attr(data-crumb)}
  body.desk-set #setPage.is-sub #setPageBack:hover{background:var(--qk-soft);color:var(--qk-ink)}
  body.desk-set #setPage.is-sub>.qk-hdr .qk-hdr__title{left:auto;right:auto;position:static;margin-left:12px;font-size:15px;font-weight:600}
  body.desk-set #setPage>.bnd__b{padding-top:4px}
  body.desk-set #setPageBody{max-width:960px;display:flex;flex-direction:column;gap:18px}   /* the same width as the tab row above it */
  .set-desk-foot{display:flex;justify-content:flex-end;padding:8px 0 24px;max-width:960px}   /* DECISION 15: Sign out below the cards */
  /* the form card */
  body.desk-set .set-desk-form{background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);padding:18px 24px 22px}
  .set-desk-card__t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--qk-ink);margin:0 0 14px}
  .set-desk-card__t .qk-info{margin:0}
  body.desk-set .set-desk-form>.qk-disc__b{display:flex;flex-direction:column;gap:10px}
  body.desk-set .set-desk-form>.qk-disc__b>.qk-hdr--lead,body.desk-set .set-desk-form>.qk-disc__b>.qk-section--info{display:none}
  body.desk-set .set-desk-form .qk-field{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:16px;min-height:0;padding:0;margin:0;background:none;box-shadow:none;border-radius:0}
  body.desk-set .set-desk-form .qk-field__label{font-size:15px;color:var(--qk-ink-2)}
  body.desk-set .set-desk-form .qk-field__value{width:100%;height:38px;padding:0 12px;border-radius:10px;background:var(--qk-soft);box-shadow:inset 0 0 0 1px var(--qk-edge);font-size:15px;text-align:left;color:var(--qk-ink)}
  body.desk-set .set-desk-form .qk-field__value:focus{box-shadow:inset 0 0 0 1.5px var(--qk-ink)}
  body.desk-set .set-desk-form select.qk-field__value{text-align-last:left}
  body.desk-set .set-desk-form textarea.qk-field__value{height:auto;min-height:96px;padding:10px 12px}
  body.desk-set .set-desk-form .qk-rows{display:flex;flex-direction:column;gap:0;background:none;box-shadow:none}
  body.desk-set .set-desk-form .qk-rows>.qk-row{min-height:44px;padding:0;background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--qk-rule)}
  body.desk-set .set-desk-form .qk-rows>.qk-row:first-child{border-top:0}
  body.desk-set .set-desk-form .qk-row__name{font-size:15px}
  body.desk-set .set-desk-form .qk-btn:not(.qk-btn--mini){width:auto;max-width:none;margin:6px 0 0;align-self:flex-start;height:36px;padding:0 14px;font-size:15px;border-radius:10px}
  body.desk-set .set-desk-form .qk-col2,body.desk-set .set-desk-form .qk-col2--wide,body.desk-set .set-desk-form .qk-col2--desk{display:flex;flex-direction:column;gap:0}
  /* the rows the form carries (switches, the pages behind chevrons, a person): flat lines, a hairline between */
  body.desk-set .set-desk-form .qk-stack>.qk-row,body.desk-set .set-desk-form>.qk-disc__b>.qk-row{min-height:46px;padding:4px 0;margin:0;background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--qk-rule)}
  body.desk-set .set-desk-form .qk-stack>.qk-row:first-child,body.desk-set .set-desk-form>.qk-disc__b>.qk-row:first-of-type{border-top:0}
  body.desk-set .set-desk-form .qk-section{padding:14px 0 6px;margin:0;font-size:13px;letter-spacing:.04em;text-transform:none;color:var(--qk-ink-3)}
  body.desk-set .set-desk-form .qk-row__sub{font-size:13px}
  body.desk-set .set-desk-form .qk-msg{margin:0;font-size:15px}
  /* the section's rows: their own card */
  body.desk-set #setPageBody>.set-group{background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);padding:16px 24px 12px;margin:0}
  body.desk-set #setPageBody>.set-group.set-group--empty{display:none}
  body.desk-set #setPageBody>.set-group>.set-label{display:block;font-size:15px;font-weight:600;color:var(--qk-ink);padding:0 0 6px}
  body.desk-set #setPageBody>.set-group>.set-label:empty{display:none}
  body.desk-set #setPageBody>.set-group>.set-card{background:none;box-shadow:none;border-radius:0;overflow:visible}
  body.desk-set #setPageBody>.set-group>.set-card>.set-row,body.desk-set #setPageBody>.set-group>.set-card>.qk-row,body.desk-set #setPageBody>.set-group>.set-card>.qk-rows>.qk-row,body.desk-set #setPageBody>.set-group>.set-card>#feelSwitches>.qk-row,body.desk-set #setPageBody>.set-group>.set-card>#faceBox>.qk-row{padding:0;min-height:48px}
  body.desk-set #setPageBody>.set-group>.set-card>*+*::before,body.desk-set #setPageBody>.set-group>.set-card>.qk-rows>.qk-row+.qk-row::before,body.desk-set #setPageBody>.set-group>.set-card>#feelSwitches>.qk-row+.qk-row::before{left:0}
  body.desk-set #setPageBody .set-row__name,body.desk-set #setPageBody .set-card .qk-row .qk-row__name{font-size:14.5px}
  body.desk-set #setPageBody .set-row__val,body.desk-set #setPageBody .set-card .qk-row .qk-row__sub{font-size:15px}
  body.desk-set #setPageBody>.set-group>.set-help{padding:10px 0 0;font-size:13px}
  body.desk-set #setPageBody .qk-col2,body.desk-set #setPageBody .qk-col2--wide,body.desk-set #setPageBody .qk-col2--desk{display:flex;flex-direction:column;gap:var(--qk-space-2)}
  /* THE ALERTS SCREEN at the desktop's width: its list stands where the section navigation stood, its record fills the rest */
  body.desk-pair #alxList:not([hidden]){left:calc(var(--qk-rail-w) + 32px - var(--qk-space-5));width:calc(var(--qk-pane-list-w) + var(--qk-space-5) * 2)}
  body.desk-pair #alxList:not([hidden])>.qk-hdr{padding-left:32px;padding-right:32px}
  body.desk-pair #alxList:not([hidden])>.qk-hdr .qk-hdr__title{left:calc(32px + var(--qk-hdr-title-inset));right:32px;text-align:left;justify-content:flex-start}
  body.desk-pair.is-paned #alx.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px + var(--qk-pane-list-w) + 24px);right:32px}
}
/* New on the rail (11 Sep 2026): the primary pill under the sections */
@media (min-width:1280px){
  .qk-bar--adaptive .qk-rail__new{margin-top:var(--qk-space-4);background:var(--qk-primary-bg);color:var(--qk-primary-fg);font-weight:var(--qk-weight-semi);justify-content:center;border-radius:999px}
  .qk-bar--adaptive .qk-rail__new:hover{opacity:.92}
  .qk-bar--adaptive .qk-rail__new .qk-tab__pill .qk-i{stroke-width:2.2}
}
/* =====================================================================
   THE DESKTOP LANGUAGE (Sam, 11 Sep 2026: "a perfect desktop computer program… not just taking a phone app and
   making it work on a desktop"): denser type, tables for lists, a toolbar with the actions at the right, compact
   buttons, a record across the width with a main column and a facts sidebar. Everything here lives at 1280 up.
   ===================================================================== */
@media (min-width:1280px){
  body.desk-pair .ops>.wrap,body.desk-home .ops>.wrap{font-size:15px}
  /* the toolbar: filters at the left, the action at the right */
  .dk-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0 0 14px}   /* everything at the left, the search first (12 Sep 2026) */
  .dk-toolbar .qk-chips{margin:0}
  .dk-toolbar .qk-chip{height:32px;font-size:13px}
  .dk-toolbar>.qk-btn.dk-btn,.qk-btn.dk-btn:not(.qk-btn--mini){width:auto!important;max-width:none!important;height:36px;padding:0 14px;font-size:15px;border-radius:10px;margin:0!important;align-self:auto!important;display:inline-flex;gap:8px;flex:none}
  .dk-btn.qk-btn .qk-i{width:16px;height:16px}
  /* the table */
  .dk-tablewrap{background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);overflow:hidden}
  .dk-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
  .dk-table th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--qk-ink-3);padding:12px 16px;border-bottom:1px solid var(--qk-rule);white-space:nowrap}
  .dk-table td{padding:12px 16px;border-bottom:1px solid var(--qk-rule);vertical-align:middle;color:var(--qk-ink)}
  .dk-table tbody tr:last-child td{border-bottom:0}
  .dk-table tbody tr{cursor:pointer}
  .dk-table tbody tr:hover td{background:var(--qk-soft)}
  .dk-table tbody tr.is-on td{background:var(--qk-on-pill)}
  .dk-table td b{font-weight:600;display:block}
  .dk-sub{display:block;font-size:12px;color:var(--qk-ink-3);margin-top:2px}
  .dk-muted{color:var(--qk-ink-3)}
  .dk-num{text-align:right;font-variant-numeric:tabular-nums}
  .dk-table .qk-pill{font-size:12px}
  /* the Cranes list takes the width; a record replaces it across the width */
  body.desk-table .ops>.wrap>.panel{width:auto}
  body.desk-table .ops__detail{display:none}
  body.desk-full .ops>.wrap>.panel{width:auto}
  body.desk-full .ops>#opsHdr{display:none}   /* a record across the width carries its own header (‹ Cranes); the office header's lone search tap floated above it (16 Sep 2026) */
  body.desk-full.is-paned #crn.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px}
  /* the record's own header carries the way back: the arrow and the word Cranes */
  body.desk-full.is-paned #crn.qk-pane--detail>.qk-hdr #crnBackTap{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.desk-full.is-paned #crn.qk-pane--detail>.qk-hdr #crnBackTap::after{content:'Cranes'}
  body.desk-full.is-paned #crn.qk-pane--detail>.qk-hdr #crnBackTap:hover{background:var(--qk-soft);color:var(--qk-ink)}
  /* the record's header is the breadcrumb alone — the header card beneath already says the name */
  body.desk-full.is-paned #crn.qk-pane--detail>.qk-hdr .qk-hdr__title{display:none}
  body.desk-full.is-paned #crn.qk-pane--detail>.qk-hdr{height:44px;min-height:44px;align-items:center}
  /* the record's tabs: underline tabs at the left, not the phone's pills */
  body.desk-full #crn .crane__tabs{display:flex;gap:28px;border-bottom:1px solid var(--qk-rule);margin:4px 0 16px;padding:0 4px}
  body.desk-full #crn .crane__tabs .qk-chip{background:none;box-shadow:none;border-radius:0;height:40px;padding:0 2px;font-size:15px;font-weight:500;color:var(--qk-ink-3);flex:none;width:auto;justify-content:center}
  body.desk-full #crn .crane__tabs .qk-chip--on{color:var(--qk-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--qk-ink)}
  body.desk-full #crn .crane__tabs .qk-chip:hover{color:var(--qk-ink)}
  /* the record: a main column beside a facts sidebar */
  body.desk-full #crn .crn-overview{display:flex;flex-direction:column;gap:var(--qk-space-3)}   /* one column, the groups stacked full width (Sam, 12 Sep 2026: 'I don't love the 2 columns') */
  body.desk-full #crn .crn-main,body.desk-full #crn .crn-side{display:flex;flex-direction:column;gap:var(--qk-space-3);min-width:0}
  body.desk-full #crn .qk-row,body.desk-full #crn .qk-field{min-height:44px}
  body.desk-full #crn .qk-row__name,body.desk-full #crn .qk-row__value,body.desk-full #crn .qk-field__value{font-size:15px}
}
.crn-main,.crn-side{display:contents}
/* the desktop list page: the title row with its count and action, a summary strip, a bar in a cell; the record's
   repeated rows stand down beside its band */
@media (min-width:1280px){
  body.desk-table .ops>#opsHdr{display:none}
  body.desk-table .ops>.wrap{padding-top:28px}
  .dk-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px}
  body.desk-full:has(#crn:not([hidden]),#client:not([hidden]),#worker:not([hidden]),#lead:not([hidden]),#ppOverlay:not([hidden]),.vhead) #opsHdr .qk-hdr__title{visibility:hidden}   /* audit 54: the office header said the list's name over the record's band */
  body:has(#crn:not([hidden])) #tab-fleet .dk-pagehead,body:has(#client:not([hidden])) #tab-clients .dk-pagehead,body:has(#worker:not([hidden])) #tab-crews .dk-pagehead,body:has(#lead:not([hidden])) #tab-leads .dk-pagehead{display:none}   /* audit 54: the list's title over '‹ the list' over the record's own band said one word three times */
  .dk-pagehead__acts{display:flex;align-items:center;gap:10px;flex:none}
  .msc-desk .dk-toolbar,#lgi .dk-toolbar{flex-wrap:wrap;gap:10px 16px}
  .dk-pagehead h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--qk-ink)}
  .dk-count{display:block;margin-top:4px;font-size:15px;color:var(--qk-ink-3)}
  .dk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
  .dk-tile{background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
  .dk-tile b{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--qk-ink)}
  .dk-tile span{font-size:12px;color:var(--qk-ink-3)}
  .dk-tile--ok b{color:var(--qk-ok)}
  .dk-tile--warn b{color:var(--qk-warn)}
  .dk-tile--bad b{color:var(--qk-bad)}
  .dk-svc{min-width:180px}
  .dk-bar{display:block;height:6px;border-radius:999px;background:var(--qk-rule);overflow:hidden;margin:2px 0 6px;max-width:140px}
  .dk-bar>i{display:block;height:100%;border-radius:999px;background:var(--qk-ink)}
  .dk-bar__t{font-size:12px;color:var(--qk-ink-3)}
  body.desk-full .bnd .dk-dup{display:none}
}
.dk-only{display:none}
/* the record's band on the desktop */
@media (min-width:1280px){
  body.desk-full .bnd .dk-band{display:flex;align-items:center;gap:20px;padding:18px 20px;background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);margin:0 0 4px}
  .dk-band__main{flex:1;min-width:0}
  .dk-band__title{display:flex;align-items:center;gap:12px}
  .dk-band__title h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--qk-ink)}
  .dk-band__facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:15px;color:var(--qk-ink-2)}
  .dk-band__facts>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
  .dk-band__facts .qk-i{width:15px;height:15px;color:var(--qk-ink-3);flex:none}
  .dk-band__acts{display:flex;gap:8px;flex:none;align-items:center}
  .dk-band__acts .qk-btn{width:auto;max-width:none;margin:0;height:34px;padding:0 12px;font-size:15px;gap:6px}
  .dk-band__acts .dk-more{width:34px;padding:0;justify-content:center}
  body.desk-full #crn .dk-band .qk-ccard__map{width:168px;height:96px;border-radius:10px;flex:none;margin:0}
  .dk-mapstrip{display:block;height:150px;border-radius:14px;overflow:hidden;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);margin:0 0 4px;text-decoration:none}
  .dk-mapstrip .qk-ccard__map{display:block;width:100%!important;height:150px!important;border-radius:0;box-shadow:none;margin:0}
}
/* the desktop's search in the toolbar, the record's map card */
@media (min-width:1280px){
  .dk-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:var(--qk-card);box-shadow:inset 0 0 0 1px var(--qk-edge);min-width:300px;color:var(--qk-ink-3)}
  .dk-search .qk-i{width:16px;height:16px;flex:none}
  .dk-search input{flex:1;min-width:0;border:0;background:none;color:var(--qk-ink);font:inherit;font-size:15px;outline:none}
  .dk-search input::placeholder{color:var(--qk-ink-3)}
  .dk-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--qk-ink-3)}
}
/* the desktop's Home (11 Sep 2026): a page like the others — its own title row, tiles, tables */
@media (min-width:1280px){
  body.desk-home .ops>#opsHdr{display:none}
  body.desk-home .ops>.wrap{max-width:none;padding-top:28px}
  .dk-sectionhead{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 10px}
  .dk-sectionhead h2{margin:0;font-size:15px;font-weight:600;color:var(--qk-ink)}
  .dk-link{display:inline-flex;align-items:center;gap:2px;border:0;background:none;color:var(--qk-ink-3);font:inherit;font-size:15px;cursor:pointer;padding:0}
  .dk-link .qk-chev{width:14px;height:14px}
  .dk-link:hover{color:var(--qk-ink)}
  .dk-table--tight td,.dk-table--tight th{padding:10px 16px}
  .dk-date{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--qk-ink-2);width:120px}
  .dk-empty{padding:14px 16px;font-size:15px;color:var(--qk-ink-3);background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge)}
}
/* the records across the width — every list section's (11 Sep 2026) */
.dk-side,.dk-main{display:contents}
@media (min-width:1280px){
  body.desk-full.is-paned .bnd.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px}
  body.desk-full.is-paned .bnd.qk-pane--detail>.qk-hdr{height:44px;min-height:44px;align-items:center}
  body.desk-full.is-paned .bnd.qk-pane--detail>.qk-hdr .qk-tap--back,body.desk-full.is-paned #clientBackTap,body.desk-full.is-paned #leadBackTap{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.desk-full.is-paned .bnd.qk-pane--detail>.qk-hdr .qk-tap--back:hover,body.desk-full.is-paned #clientBackTap:hover,body.desk-full.is-paned #leadBackTap:hover{background:var(--qk-soft);color:var(--qk-ink)}
  body.desk-full.is-paned #clientBackTap::after{content:'Clients'}
  body.desk-full.is-paned #workerBackTap::after{content:'Crews'}
  body.desk-full.is-paned #leadBackTap::after{content:'Enquiries'}
  body.desk-full.is-paned #svcPaneBack::after{content:'Service'}
  body.desk-full.is-paned #svcPane.qk-pane--detail>.qk-hdr .qk-hdr__title{display:none}
  body.desk-full #svcPane .vsheet{max-width:960px}
  body.desk-full.is-paned #client.qk-pane--detail>.qk-hdr .qk-hdr__title,body.desk-full.is-paned #worker.qk-pane--detail>.qk-hdr .qk-hdr__title,body.desk-full.is-paned #lead.qk-pane--detail>.qk-hdr .qk-hdr__title{display:none}
  body.desk-full .bnd .qk-row,body.desk-full .bnd .qk-field{min-height:44px}
  body.desk-full .bnd .qk-row__name,body.desk-full .bnd .qk-row__value,body.desk-full .bnd .qk-field__value{font-size:15px}
  body.desk-full #client .bnd__in{display:flex;flex-direction:column;gap:var(--qk-space-3)}   /* stacked, the same rule */
  body.desk-full #client .bnd__in>.dk-band{grid-column:1/-1}
  body.desk-full #client .dk-side,body.desk-full #client .dk-main{display:flex;flex-direction:column;gap:var(--qk-space-3);min-width:0}
  body.desk-full #lead .bnd__in,body.desk-full #worker .bnd__in{max-width:960px}
  body.desk-full #lead .qk-chips,body.desk-full #lead .qk-chips .qk-chip{width:auto}
  body.desk-full #lead .qk-chips{display:flex;gap:8px}
  body.desk-full #lead .qk-chips .qk-chip{flex:0 0 auto;min-width:96px;justify-content:center}
  body.desk-full #worker .cert-grid{grid-template-columns:repeat(4,1fr)}
  body.desk-full .bnd .dk-only{display:block}
  body.desk-full .bnd .dk-band__facts a.dk-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
  body.desk-full .bnd .dk-band__facts a.dk-link:hover{color:var(--qk-ink);text-decoration:underline}
  .dk-toolbar>span:empty{flex:1}
}
/* THE TOAST ON THE DESKTOP (Sam, 11 Sep 2026: "why is it offset from all the stuff above it? It kinda just looks
   out of place"): a desktop program's notice sits in the bottom-right corner, its own width, not centred on a
   phone column */
@media (min-width:1280px){
  body .ops .qk-toast--fixed{left:auto;right:24px;bottom:24px;width:auto;max-width:420px;min-width:220px;margin:0;text-align:left;justify-content:flex-start;padding:12px 20px;font-size:15px}
}

/* THE DESKTOP'S SERVICE (11 Sep 2026): the cranes side by side, the schedule as a table or a month calendar */
@media (min-width:1280px){
  .dk-pagehead__acts{display:flex;gap:8px;align-items:center}
  .dk-sectionhead .qk-chips.dk-seg{margin:0;display:flex;gap:4px;padding:3px;background:var(--qk-soft);border-radius:10px}
  .dk-sectionhead .dk-seg .qk-chip{height:30px;width:auto;flex:none;min-width:88px;justify-content:center;font-size:13px;border-radius:8px;box-shadow:none;background:none}
  .dk-sectionhead .dk-seg .qk-chip--on{background:var(--qk-card);color:var(--qk-ink);box-shadow:var(--qk-shadow)}
  .dk-sectionhead{align-items:center}
  .dk-sectionhead h2 .dk-sub{display:inline;margin:0 0 0 6px;font-weight:500}
  /* DENSER AT WIDTH (Sam, 12 Sep 2026: "This is not optimized"): three cranes across at 1440 instead of two, and the
     records line takes less height, so the month's cranes fit a screen before the schedule table */
  body.desk-table .proc-cards.dk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
  body.desk-table .dk-cards .svc-crane__rec{padding:6px 16px 8px}
  body.desk-table .dk-cards .svc-crane__main{padding-left:16px;padding-right:16px}
  /* DECISION 5 (12 Sep 2026): no red for lateness — the Due cell's amber pill says it, like the board's */
  .dk-table .dk-date .qk-pill{margin-right:8px;vertical-align:middle}
  .svc-dk{background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);overflow:hidden}
  .svc-dk__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--qk-rule)}
  .svc-dk__month{font-size:17px;font-weight:600;color:var(--qk-ink)}
  .svc-dk__nav{display:flex;gap:6px}
  .svc-dk__nav .qk-btn{width:auto;min-width:34px;height:32px;padding:0 12px;margin:0;font-size:15px}
  .svc-dk__wk{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--qk-rule)}
  .svc-dk__w{padding:8px 10px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--qk-ink-3)}   /* sentence case, one size (item 8, 16 Sep 2026) */
  .svc-dk__grid{display:grid;grid-template-columns:repeat(7,1fr)}
  .svc-dk__d{position:relative;min-height:112px;padding:8px 8px 28px;border-right:1px solid var(--qk-rule);border-bottom:1px solid var(--qk-rule);display:flex;flex-direction:column;gap:4px;min-width:0}
  .svc-dk__d:nth-child(7n){border-right:0}
  .svc-dk__grid>.svc-dk__d:nth-last-child(-n+7){border-bottom:0}
  .svc-dk__d.is-pad{background:color-mix(in srgb,var(--qk-soft) 40%,transparent)}
  .svc-dk__d.is-pad .svc-dk__n{color:var(--qk-ink-3);opacity:.5}
  .svc-dk__n{font-size:13px;font-weight:500;color:var(--qk-ink-2);line-height:1;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;flex:none}
  .svc-dk__d.is-today .svc-dk__n{background:var(--qk-primary-bg);color:var(--qk-primary-fg);font-weight:600}
  .svc-dk__ev{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;margin:0;padding:5px 8px;border-radius:7px;background:var(--qk-soft);color:var(--qk-ink);font:inherit;font-size:12px;line-height:1.25;text-align:left;cursor:grab;box-shadow:inset 3px 0 0 var(--qk-ink-3);-webkit-tap-highlight-color:transparent}
  .svc-dk__ev>span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
  .svc-dk__ev>small{font-size:12px;color:var(--qk-ink-3);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .svc-dk__ev:hover{background:var(--qk-on-pill)}
  /* no edge rail (Sam, 26 Sep 2026: "I don't like these weird side borders"): a late job on the calendar is told by its amber dot and pill */
  .svc-dk__ev.is-lifting{opacity:.35}
  .svc-dk__add{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border:0;border-radius:999px;background:var(--qk-soft);color:var(--qk-ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s}
  .svc-dk__add .qk-i{width:14px;height:14px}
  .svc-dk__d:hover .svc-dk__add,.svc-dk__add:focus-visible{opacity:1}
  .svc-dk__d.is-over{background:var(--qk-on-pill);box-shadow:inset 0 0 0 2px var(--qk-ink)}
  body.svc-dragging .svc-dk__ev{cursor:grabbing}
  .svc-dk__ev--over{display:none}
  .svc-dk__d.is-all .svc-dk__ev--over{display:flex}
  .svc-dk__d.is-all .svc-dk__more{display:none}
  .svc-dk__more{border:0;background:none;padding:2px 8px;margin:0;font:inherit;font-size:12px;font-weight:600;color:var(--qk-ink-2);text-align:left;cursor:pointer;border-radius:6px}
  .svc-dk__more:hover{background:var(--qk-soft);color:var(--qk-ink)}
}

/* THE DESKTOP'S SAFETY (11 Sep 2026): the cards three across; the reader across the width on a band, the document
   in a centred column, the phone's floating pill stood down (the band carries Sign on your phone) */
@media (min-width:1280px){
  body.desk-table #safetyHome .proc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  body.desk-table #safetyHome .proc-card{min-height:88px}
  body.desk-table #safetyHome .qk-section{margin-top:22px}
  body.desk-table #safetyHome .dk-toolbar .qk-chips.dk-seg{margin:0;display:flex;gap:4px;padding:3px;background:var(--qk-soft);border-radius:10px;overflow:visible}
  body.desk-table #safetyHome .dk-seg .qk-chip{height:30px;width:auto;flex:none;min-width:96px;justify-content:center;font-size:13px;border-radius:8px;box-shadow:none;background:none}
  body.desk-table #safetyHome .dk-seg .qk-chip--on{background:var(--qk-card);color:var(--qk-ink);box-shadow:var(--qk-shadow)}
  body.desk-full.is-paned #ppOverlay.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px}
  body.desk-full.is-paned #ppOverlay.qk-pane--detail>.qk-hdr{height:44px;min-height:44px;align-items:center}
  body.desk-full.is-paned #ppOverlay.qk-pane--detail>.qk-hdr .qk-hdr__title,body.desk-full.is-paned #ppOverlay #ppCloseBtn{display:none}
  body.desk-full.is-paned #ppOverlay #ppBackBtn{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.desk-full.is-paned #ppOverlay #ppBackBtn::after{content:'Safety'}
  body.desk-full.is-paned #ppOverlay #ppBackBtn:hover{background:var(--qk-soft);color:var(--qk-ink)}
  body.desk-full #ppOverlay .swp-doc{max-width:none}
  body.desk-full #ppOverlay .dk-band{display:flex;align-items:center;gap:20px;padding:18px 20px;background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);margin:0 0 20px}
  body.desk-full #ppOverlay .dk-band{max-width:none}   /* the band, the search row and the document share the column's full width (Sam, 16 Sep 2026: "Different width") */
  body.desk-full #ppOverlay .pp-doccol{max-width:none;margin:0;display:flex;flex-direction:column;gap:var(--qk-space-3)}
  body.desk-full #ppOverlay .dk-dup{display:none}
  body.desk-full #ppSignFab,body.desk-full #ppSignersChip{display:none!important}
}

/* THE DESKTOP'S DIALOGS (11 Sep 2026): a footer — the buttons in a row at the right, the one that does it last,
   their own width; everything else keeps the column above them */
@media (min-width:1280px){
  .qk-dialog--fixed{max-width:480px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 8px;padding:22px 24px 20px}
  .qk-dialog--fixed>*{flex:1 1 100%;order:0;min-width:0}
  .qk-dialog--fixed>.qk-title,.qk-dialog--fixed>.qk-display{margin-bottom:2px}
  .qk-dialog--fixed>.qk-btn{flex:0 0 auto;width:auto!important;max-width:none!important;min-width:104px;height:38px;padding:0 16px;font-size:15px;border-radius:10px;order:2;margin:8px 0 0!important}
  .qk-dialog--fixed>.qk-btn--primary,.qk-dialog--fixed>.qk-btn--danger{order:3}
  /* the row sits at the right: the first button to draw takes the slack (the primary when it stands alone; Cancel beside it) */
  .qk-dialog--fixed>.qk-btn--quiet{margin-left:auto!important}
  .qk-dialog--fixed>.qk-btn--quiet~.qk-btn--quiet{margin-left:0!important}
  .qk-dialog--fixed>.qk-btn--primary:only-of-type,.qk-dialog--fixed>.qk-btn--danger:only-of-type{margin-left:auto!important}
  .qk-dialog--fixed.pp-phone-sign{max-width:460px}
}

/* THE GAPS AGAINST THE WELL-KNOWN DESKTOP PROGRAMS (Sam, 11 Sep 2026: "fix it so we're not behind"): sortable
   column heads, rows that take the keyboard, chips with counts, desktop text sizes, the New menu beside its button */
@media (min-width:1280px){
  .dk-table thead th{cursor:pointer;user-select:none;position:relative;padding-right:22px}
  .dk-table thead th:empty{cursor:default}
  .dk-table thead th:hover{color:var(--qk-ink)}
  .dk-table thead th.is-sorted{color:var(--qk-ink)}
  .dk-table thead th.is-sorted::after{content:'';position:absolute;right:8px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  .dk-table thead th.is-sorted.is-desc::after{transform:rotate(-135deg);margin-top:-1px}
  .dk-table tbody tr[role="button"]:focus{outline:none}
  .dk-table tbody tr[role="button"]:focus-visible td{background:var(--qk-on-pill);box-shadow:inset 2px 0 0 var(--qk-ink)}
  .dk-toolbar .dk-seg--chips{display:flex;gap:4px;padding:3px;background:var(--qk-soft);border-radius:10px;margin:0;overflow:visible}
  .dk-toolbar .dk-seg--chips .qk-chip{height:30px;width:auto;flex:none;padding:0 10px 0 12px;font-size:13px;border-radius:8px;box-shadow:none;background:none;gap:6px}
  .dk-toolbar .dk-seg--chips .qk-chip--on{background:var(--qk-card);color:var(--qk-ink);box-shadow:var(--qk-shadow)}
  .dk-chipn{font-style:normal;font-size:12px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--qk-on-pill);color:var(--qk-ink-2);display:inline-flex;align-items:center;justify-content:center}
  .qk-chip--on .dk-chipn{background:var(--qk-primary-bg);color:var(--qk-primary-fg)}
  /* the desktop's text sizes where the phone's still stood */
  body.desk-table #safetyHome .proc-card__name,body.desk-table .dk-cards .proc-card__name{font-size:15px}
  body.desk-table #safetyHome .proc-card .qk-row__sub,body.desk-table .dk-cards .qk-row__sub{font-size:13px}
  body.desk-full #ppOverlay .swp-toc-name,body.desk-full #ppOverlay .swp-toc__h .qk-row__name,body.desk-full #ppOverlay .swp-toc__h .qk-row__value{font-size:15px}
  body.desk-full #svcPane .mb .qk-row__name{font-size:14.5px}
  body.desk-full .bnd .qk-section,body.desk-table .qk-section{font-size:15px}
  /* the New menu: beside the rail's New, its own size, no sheet */
  #dayBack.is-new{background:transparent}
  #dayBack.is-new .daypanel{position:fixed;left:calc(var(--qk-rail-w) + 12px);right:auto;top:auto;bottom:24px;transform:none;width:300px;max-width:300px;max-height:calc(100vh - 48px);margin:0;padding:8px;border-radius:14px;box-shadow:var(--qk-shadow-dialog),inset 0 0 0 1px var(--qk-edge)}
  #dayBack.is-new .qk-grab,#dayBack.is-new #dayClose,#dayBack.is-new #daySub{display:none}
  #dayBack.is-new #dayTitle{font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--qk-ink-3);padding:6px 12px 4px;margin:0;text-align:left}
  #dayBack.is-new .newsheet__big{display:flex;flex-direction:column;gap:2px}
  #dayBack.is-new .newsheet__big .newsheet__r{min-height:40px;padding:0 10px;border-radius:9px;background:none;box-shadow:none;gap:10px}
  #dayBack.is-new .newsheet__big .newsheet__r:hover{background:var(--qk-soft)}
  #dayBack.is-new .newsheet__big .newsheet__r .qk-row__name{font-size:15px;font-weight:500}
  #dayBack.is-new .newsheet__big .newsheet__r .qk-tile{width:22px;height:22px;background:none;color:var(--qk-ink-2)}
  #dayBack.is-new .newsheet__big .newsheet__r .qk-chev{display:none}
  /* A DESKTOP PROGRAM'S MENU (Sam, 20 Sep 2026, on the phone sheet's find box, big group names and two-line rows squeezed into it:
     "wtf? That's not what a desktop program looks like"). What a New menu is on a desktop: small quiet group labels, one line per
     command with its mark, a hover, nothing to type into and nothing explained - the names are verbs and say it. */
  #dayBack.is-new .newsheet__find{display:none}
  #dayBack.is-new .newsheet__big .newsheet__r{min-height:34px;padding:0 10px;align-items:center}
  #dayBack.is-new .newsheet__big .newsheet__r .qk-row__sub{display:none}
  #dayBack.is-new #newList .qk-section{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--qk-ink-3);margin:10px 0 2px;padding:0 10px}
  #dayBack.is-new #newList .qk-section:first-child{margin-top:2px}
  #dayBack.is-new #newList .qk-section+.newsheet__big{margin-bottom:6px}
  #dayBack.is-new #dayTitle{display:none}
}

/* BILLING (12 Sep 2026): the plan's total line, the next-charge note, the desktop's invoice table */
.bill__total .qk-row__name,.bill__total .qk-row__value{font-weight:600;color:var(--qk-ink)}
.bill__next{padding:6px 4px 0;color:var(--qk-ink-3)}
@media (min-width:1280px){
  body.desk-set #setPageBody .dk-tablewrap{margin-top:4px}
  body.desk-set #setPageBody .dk-table td .dk-link{display:inline-flex;align-items:center;gap:4px;color:var(--qk-ink-2);text-decoration:none;font-size:13px}
  body.desk-set #setPageBody .dk-table td .dk-link .qk-i{width:14px;height:14px}
  body.desk-set #setPageBody .dk-table td .dk-link:hover{color:var(--qk-ink);text-decoration:underline}
}

/* THE DESKTOP'S ALERTS (12 Sep 2026): a page of its own over Settings — the events as tables, one alert across the
   width on a band with its parts as panels, Save at the right of a footer */
@media (min-width:1280px){
  body.desk-set.is-paned #alx.qk-pane--detail,body.desk-pair.is-paned #alx.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px;top:calc(var(--qk-pane-top) + var(--qk-header-h))}
  body.desk-set #alxList,body.desk-pair #alxList{display:none!important}
  body.is-paned #alx.qk-pane--detail>.qk-hdr{height:44px;min-height:44px;align-items:center}
  body.is-paned #alx.qk-pane--detail>.qk-hdr .qk-hdr__title{display:none}
  body.is-paned #alx #alxBk{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.is-paned #alx #alxBk::after{content:attr(data-crumb)}
  body.is-paned #alx #alxBk:hover{background:var(--qk-soft);color:var(--qk-ink)}
  body.is-paned #alx .qk-measure--desk{max-width:960px}   /* decision 9: Settings holds 960 everywhere (second pass, finding 1) */
  #alx .alx-desk,#alx .alx-desk--event{max-width:960px}   /* audit 28: the alerts list and the open alert ran 1136 while every Settings tab holds 960 */
  #alx .alx-desk--event{gap:var(--qk-space-3)}
  #alx .alx-desk--event .dk-band{display:flex;align-items:center;gap:20px;padding:18px 20px;background:var(--qk-card);border-radius:14px;box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);margin:0 0 4px}
  #alx .alx-desk--event .dk-dup{display:none}
  #alx .alx-panel .alx-recips{padding:0;gap:0}
  #alx .alx-panel .alx-recips>.qk-card{background:none;box-shadow:none;border-radius:0;padding:12px 16px;border-top:1px solid var(--qk-rule)}
  #alx .alx-panel .alx-recips>.qk-card:first-child{border-top:0}
  #alx .alx-panel .alx-recips .qk-chips{margin-top:8px}
  #alx .alx-panel>.qk-btn-row,#alx .alx-panel>.qk-btn-row:not(.qk-row>.qk-btn-row){display:flex;justify-content:flex-start;width:100%;max-width:none;margin:0;align-self:stretch;padding:10px 16px 12px;border-top:1px solid var(--qk-rule)}
  #alx .alx-panel>.qk-btn-row>.qk-btn{width:auto!important;max-width:none!important;margin:0!important;height:34px;padding:0 14px;font-size:15px}
  #alx .alx-panel>.qk-field,#alx .alx-panel>.qk-row{border-top:1px solid var(--qk-rule);border-radius:0;box-shadow:none;background:none}
  body.is-paned #alx>.qk-foot{position:static;flex-direction:row;justify-content:flex-end;max-width:960px;margin:0;padding:12px 0 24px;background:none;box-shadow:none;border:0}
  body.is-paned #alx>.qk-foot>.qk-btn{width:auto!important;max-width:none!important;min-width:140px;height:40px;padding:0 22px;margin:0!important;border-radius:10px;font-size:15px}
}

/* the alert's page, plainer (12 Sep 2026): 'Send by' before the chips, the chosen ways filled, a sentence under the band */
.alx-how{gap:12px;align-items:center;margin-top:10px}
.alx-how__l{flex:none;font-size:13px;color:var(--qk-ink-3)}
.alx-how .qk-chips{margin:0}
.alx-how .qk-chip--on{background:var(--qk-primary-bg);color:var(--qk-primary-fg)}
.alx-lead{margin:2px 4px 6px;color:var(--qk-ink-2)}

/* ONE COLUMN FOR EVERY RECORD AT WIDTH (the audit, 12 Sep 2026): a record's body is left-aligned and capped at 960,
   the same on the crane, the client, the worker, the enquiry and the service board; the reader alone reads centred */
@media (min-width:1280px){
  body.desk-full .bnd.qk-pane--detail>.qk-pane__body,body.desk-full .bnd.qk-pane--detail>.bnd__b{max-width:none;margin:0}
  body.desk-full .bnd .bnd__in{max-width:960px;margin:0}
}

/* THE AUDIT (12 Sep 2026): under a record across the width, the table it came from is out of sight — its card's
   shadow was showing as a faint stripe at both edges of the record */
@media (min-width:1280px){
  body.desk-full .ops>.wrap>.panel{visibility:hidden}
}

/* THE AUDIT (12 Sep 2026): every door from New is a dialog at width, and every dialog wears the same footer —
   the buttons in a row at the right, Close first, the one that does it last (the rule the confirms already keep) */
@media (min-width:1280px){
  #dayBack:not(.is-new) .daypanel{padding:22px 24px 20px}
  #dayBack:not(.is-new) .day__foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px}
  /* a dialog longer than the window keeps its buttons in sight: the footer holds to the dialog's foot while the body runs under it (20 Sep 2026) */
  #dayBack:not(.is-new) .day__foot{position:sticky;bottom:-20px;z-index:2;margin:12px -24px -20px;padding:12px 24px 20px;background:var(--qk-ground);border-radius:0 0 var(--qk-radius-sheet) var(--qk-radius-sheet)}
  #dayBack:not(.is-new) .day__foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;background:linear-gradient(to bottom,transparent,var(--qk-ground));pointer-events:none}
  .occ__acts:empty{display:none}
  #dayBack:not(.is-new) .day__foot .qk-btn{flex:0 0 auto;width:auto!important;max-width:none!important;min-width:104px;height:38px;padding:0 16px;font-size:15px;border-radius:10px;margin:0!important}
  #dayBack:not(.is-new) .day__foot .qk-btn--primary,#dayBack:not(.is-new) .day__foot .qk-btn--danger{order:2}
  /* Add a crane: the same dialog, over the table it adds to */
  body #addCrane.bnd:not([hidden]){position:fixed;inset:0!important;margin:auto;width:520px;height:fit-content;max-height:calc(100vh - 80px);border-radius:var(--qk-radius-sheet);background:var(--qk-card);box-shadow:var(--qk-shadow-dialog),inset 0 0 0 1px var(--qk-edge),0 0 0 100vmax var(--qk-scrim);padding:22px 24px 20px;overflow:hidden;z-index:var(--qk-z-sheet);transform:none!important}
  body #addCrane.bnd:not([hidden])>.qk-hdr{position:static;height:auto;min-height:0;margin:0 0 12px;padding:0;background:none;box-shadow:none;border:0;display:flex;align-items:center;-webkit-backdrop-filter:none;backdrop-filter:none}
  body #addCrane.bnd:not([hidden])>.qk-hdr>.qk-tap{display:none}
  body #addCrane.bnd:not([hidden])>.qk-hdr .qk-hdr__title{position:static;left:auto;right:auto;flex:1;text-align:left;justify-content:flex-start;font-size:22px;font-weight:700;letter-spacing:-.01em;transform:none}
  body #addCrane.bnd:not([hidden])>.bnd__b{padding:0;margin:0;overflow-y:auto;min-height:0;flex:1 1 auto;max-width:none}
  body #addCrane.bnd:not([hidden]) .bnd__in{max-width:none;margin:0;padding:0}
  body #addCrane.bnd:not([hidden])>.qk-foot{position:static;padding:14px 0 0;margin:0;background:none;box-shadow:none;border:0;display:flex;justify-content:flex-end;gap:8px}
  body #addCrane.bnd:not([hidden])>.qk-foot .qk-btn{flex:0 0 auto;width:auto!important;max-width:none!important;min-width:104px;height:38px;padding:0 16px;font-size:15px;border-radius:10px;margin:0!important}
  body #addCrane.bnd:not([hidden])>.qk-foot .dk-only{display:inline-flex}
  /* the procedure reader's pane keeps the page's edges (272 and 1408), the way every record does; the document
     itself reads centred beneath its band */
  body.desk-full #ppOverlay>.qk-pane__body{padding-left:0;padding-right:0}
}

/* audit 51: on the phone and the tablet Add a crane is a SHEET like every other door from New — bottom-anchored,
   the sheet's radius, a grab bar, the title at the left, the round X, the scrim behind; the ids and the pinned
   Add crane survive (Office-AddCrane, field for field). The desktop's dialog (above) is untouched. */
@media (max-width:1023px){
  body #addCrane.bnd:not([hidden]){top:auto;bottom:0;height:auto;max-height:92vh;border-radius:var(--qk-radius-sheet) var(--qk-radius-sheet) 0 0;box-shadow:0 -1px 0 var(--qk-edge),0 -100vh 0 100vh rgba(0,0,0,.45);z-index:var(--qk-z-sheet)}
  body #addCrane.bnd:not([hidden])>.qk-hdr{position:relative;background:none;box-shadow:none;height:auto;min-height:0;padding:22px var(--qk-space-5) 6px}
  body #addCrane.bnd:not([hidden])>.qk-hdr::before{content:'';position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--qk-rule)}
  body #addCrane.bnd:not([hidden])>.qk-hdr>.qk-tap:first-child{display:none}
  body #addCrane.bnd:not([hidden])>.qk-hdr .qk-hdr__title{position:static;flex:1;text-align:left;justify-content:flex-start;font-size:var(--qk-size-title,24px);font-weight:700;opacity:1;visibility:visible;transform:none;color:var(--qk-ink)}   /* the ground header hides its small title at rest; this sheet has no large title of its own, so the header's is the one it shows (Sam, 14 Sep 2026: the sheet had no name) */
  body #addCrane.bnd:not([hidden])>.qk-hdr>#addCraneCloseTap{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--qk-card);color:var(--qk-ink);box-shadow:0 1px 2px rgba(28,36,48,.08),0 2px 8px rgba(28,36,48,.06);display:flex;align-items:center;justify-content:center}
}
/* second pass, 12 Sep 2026 */
#alx .alx-how .qk-chip:not(.qk-chip--on){background:var(--qk-field);box-shadow:none}   /* 'Off' on the Send by row read as bare text in light */
.pp-phone-sign .qk-field__value{white-space:normal;word-break:break-all;text-align:left}   /* the link reads whole */
.set-row__name{white-space:normal}   /* a settings row's name reads whole */
@media (min-width:1024px){#dayBack .qk-sheet__x{display:none}}   /* a desktop dialog has one footer and no X */
@media (min-width:780px) and (max-width:1023px){body #addCrane.bnd:not([hidden]){left:calc(50% - 300px);right:auto;width:600px}}   /* Add a crane is the same 600 sheet as every door at tablet width */
/* moved from ops.html on the second pass: the tablet's reading width (decision 1) lives in the kit */
@media (min-width:781px) and (max-width:1023px){
  /* DECISION 1 (12 Sep 2026): the tablet is the phone's layout held to a reading width — 680, centred; the bar stays;
     a record's buttons run the card's width */
  .ops>.wrap{max-width:680px;margin:0 auto}
  body .bnd>.bnd__b.qk-pane__body,body #alx .bnd__b.qk-pane__body,body #setPage .bnd__b{max-width:680px;margin-left:auto;margin-right:auto}   /* outranks the office's own 781+ margin rule */
  .ops,.bnd,#alx,#setPage{--qk-pane-btn-max:100%}
  #ppOverlay .pp-doccol,#ppOverlay .swp-doc{max-width:680px;margin:0 auto}
  #opsHdr{max-width:680px;margin:0 auto;padding-left:var(--qk-space-5);padding-right:var(--qk-space-5)}   /* the title holds the reading width too (second pass) */
}
.cedit .qk-rows{gap:var(--qk-space-2)}   /* second pass: the stacked field cards butted into one another at width (every width) */

/* ---------------------------------------------------------------------
   17 · THE ELEVATED TREATMENT (Sam, 15–16 Sep 2026, on Astra: "Astra pages look amazing" · "I want everything built to this
   same level of care" · "Same consistent look"; taken into the kit from Astra's [ask] rules on Sam's "Yes" in the QnQ
   chat, 16 Sep): real paper under every card (the shadow token), the one number on a dark card, the period as bars,
   one capsule for two or three choices, the soft tile and the date tile on rows, rich rows. Rejected on the way: flat
   white cards with grey text and no visual ("very very plain"); the same glyph repeated down a list.
   ------------------------------------------------------------------ */
/* the dark card: the one that carries the number, the way a bank's card or a fitness ring sits on a pale page */
.qk-card--ink{background-color:var(--qk-hero-bg);background-image:linear-gradient(165deg,var(--qk-hero-bg2),var(--qk-hero-bg) 70%);color:var(--qk-hero-ink);box-shadow:0 2px 4px rgba(0,0,0,.10),0 18px 44px rgba(28,36,48,.26)}
.qk-card--ink .qk-display,.qk-card--ink .qk-name,.qk-card--ink .qk-row__name{color:var(--qk-hero-ink)}
.qk-card--ink .qk-sub,.qk-card--ink .qk-hero__cap,.qk-card--ink .qk-display__u,.qk-card--ink .qk-row__sub{color:var(--qk-hero-ink2)}
.qk-card--ink .qk-pill--quiet{background:var(--qk-hero-soft);color:var(--qk-hero-ink2)}
.qk-card--ink .qk-pill--ok{background:rgba(255,255,255,.14);color:#6BCB8E}
.qk-card--ink+.qk-btn--primary,.qk-stack>.qk-card--ink+.qk-btn--primary{margin-top:var(--qk-space-2)}   /* the primary under it with a full breath */
.qk-display__u{font-size:.5em;font-weight:var(--qk-weight-medium);margin-left:.08em}   /* the unit beside the number: am, h, m */
/* the period as bars: one bar a day against a full day's height, days to come as faint stubs, a breath between the weeks,
   the day letters beneath in the caption grey; no axis and no figures — the number above is the figure */
.qk-bars{margin-top:var(--qk-space-2);display:flex;flex-direction:column;gap:8px;align-items:center}
.qk-bars__bars{display:flex;align-items:flex-end;gap:12px;height:56px}
.qk-bars__b{flex:none;width:14px;display:block;border-radius:7px;background:var(--qk-ink);opacity:.88;min-height:5px}
.qk-bars__b--todo{height:5px;background:var(--qk-soft);opacity:1}
.qk-bars__b--week{margin-left:14px}
.qk-bars__l{display:flex;gap:12px}
.qk-bars__l span{flex:none;width:14px;text-align:center;font-size:var(--qk-size-eyebrow);font-weight:var(--qk-weight-medium);color:var(--qk-ink-3)}
.qk-bars__l span.qk-bars__b--week{margin-left:14px}
.qk-card--ink .qk-bars__b{background:var(--qk-hero-ink);opacity:.94}
.qk-card--ink .qk-bars__b--todo{background:var(--qk-hero-soft);opacity:1}
.qk-card--ink .qk-bars__l span{color:var(--qk-hero-ink3)}
/* one capsule in place of loose chips: two or three choices, the chosen one a raised thumb */
.qk-segc{display:flex;padding:3px;border-radius:999px;background:var(--qk-seg)}
.qk-segc__b{flex:1;min-width:0;height:40px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:var(--qk-size-body);font-weight:var(--qk-weight-medium);color:var(--qk-ink-2);cursor:pointer;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-segc__b--on{background:var(--qk-seg-on);color:var(--qk-ink);font-weight:var(--qk-weight-semi);box-shadow:0 1px 2px rgba(28,36,48,.08),0 3px 8px rgba(28,36,48,.10)}
.qk-segc__b:focus-visible{outline:2px solid var(--qk-ink);outline-offset:2px}
/* the row's tile as a soft 36 square with the line glyph in it, the way a phone's own settings and wallet lists carry theirs */
.qk-rows .qk-tile--soft{width:36px;height:36px;border-radius:10px;background:var(--qk-soft);color:var(--qk-ink);display:inline-flex;align-items:center;justify-content:center;margin-right:2px}
.qk-rows .qk-tile--soft .qk-i{width:20px;height:20px;stroke-width:1.75}
.qk-rows .qk-row--soft::before{left:68px}
/* the date as the row's tile: the weekday small over the day's number, so the same glyph is never repeated down a list;
   the site or the crane becomes the row's name with the day's detail under it; the hairline starts at the text */
.qk-rows .qk-tile--date{width:44px;height:44px;border-radius:12px;background:var(--qk-soft);color:var(--qk-ink);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1}
.qk-rows .qk-tile--date small{font-size:var(--qk-size-tiny);font-weight:var(--qk-weight-semi);color:var(--qk-accent);line-height:1}   /* the month on the accent, as the header's date tile reads (Sam, 20 Sep 2026) */
.qk-rows .qk-tile--date b{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);font-variant-numeric:tabular-nums;line-height:1}
.qk-rows .qk-row--date::before{left:76px}
/* rich rows: bold tabular figures, names and lines that wrap rather than clip */
.qk-rows--rich .qk-row__name{font-weight:var(--qk-weight-semi);white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.qk-rows--rich .qk-row__sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.qk-rows--rich .qk-row__value{color:var(--qk-ink);font-weight:var(--qk-weight-semi);font-variant-numeric:tabular-nums}
/* HOME'S PANELS STACK WITH THE STACK'S OWN GAP (found 16 Sep 2026 on Sam's phone: the Upcoming and Needs attention heads sat on
   their cards). A section head carries a negative bottom margin that counts on the 24 the stack puts between groups; the
   .dash-panels wrapper had no gap at phone width, so the cards rose under their heads. The desktop's own rule keeps its gap. */
.dash-panels{display:flex;flex-direction:column;gap:var(--qk-space-5)}
/* THE HEADER AS ASTRA'S ON THE PHONE (Sam, 16 Sep 2026: "I want whatever is best" → one header on both apps): the
   section's name centred, the search at the left tap, the person's initials at the right; the body of Home opens with
   the day, as Astra's Today does. The large left title and the brand band belong to the wider shells (from 768). */
.qk-avatar{width:32px;height:32px;border-radius:16px;background:var(--qk-tile);color:var(--qk-tile-ink);display:inline-flex;align-items:center;justify-content:center;font-size:var(--qk-size-small);font-weight:var(--qk-weight-semi);letter-spacing:.02em}
.qk-dayhead{display:flex;flex-direction:column;gap:3px;padding:8px 0 6px}
.qk-dayhead--row{flex-direction:row;align-items:center;gap:14px}
.qk-dayhead--row .qk-tile--date{width:52px;height:52px;border-radius:14px;background:var(--qk-soft);color:var(--qk-ink);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none}
.qk-dayhead--row .qk-tile--date small{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--qk-accent);text-transform:uppercase}
.qk-dayhead--row .qk-tile--date b{font-size:22px;font-weight:700;margin-top:2px}   /* the day on one line, with the tile the Upcoming rows wear (19 Sep 2026) */
.qk-avatar:empty{visibility:hidden}   /* no grey circle before the name is known */

/* THE TOAST UNDER A FULL-SCREEN LAYER (Sam, 17 Sep 2026: "What's with that grey button?"): the bar is hidden under an
   open layer, so the toast was standing where the bar stood, floating over the record's rows like a stray button. It
   drops to the bottom edge — unless the layer has a foot of its own to stay clear of. */
@media (max-width:1279px){
  body:has(.bnd.qk-shell:not([hidden])):not(:has(.bnd.qk-shell:not([hidden])>.qk-foot:not(:empty))) .qk-toast--fixed{bottom:calc(var(--qk-space-5) + var(--qk-safe-bottom))}
}

/* THE OTHER SETTINGS PAGES AT WIDTH (17 Sep 2026, the simulator's desktop run): Change history, Support, Alert rules,
   Crew access and Certificates opened as raw panes over the Settings tabs; they stand the way Maintenance schedules
   and Daily log items do — under the tabs, a Settings breadcrumb, the 960 column. */
@media (min-width:1280px){
  body.desk-set.is-paned #chg.qk-pane--detail,body.desk-set.is-paned #mgd.qk-pane--detail,body.desk-set.is-paned #rul.qk-pane--detail,body.desk-set.is-paned #sas.qk-pane--detail,body.desk-set.is-paned #cty.qk-pane--detail{left:calc(var(--qk-rail-w) + 32px);right:32px;top:calc(var(--qk-pane-top) + var(--qk-header-h) + 76px)}
  body.desk-set #chg>.qk-hdr,body.desk-set #mgd>.qk-hdr,body.desk-set #rul>.qk-hdr,body.desk-set #sas>.qk-hdr,body.desk-set #cty>.qk-hdr{height:44px;min-height:44px;align-items:center}
  body.desk-set #chg>.qk-hdr>.qk-tap--back,body.desk-set #mgd>.qk-hdr>.qk-tap--back,body.desk-set #rul>.qk-hdr>.qk-tap--back,body.desk-set #sas>.qk-hdr>.qk-tap--back,body.desk-set #cty>.qk-hdr>.qk-tap--back{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px 0 4px;border-radius:10px;color:var(--qk-ink-2);font-size:15px}
  body.desk-set #chg>.qk-hdr>.qk-tap--back::after,body.desk-set #mgd>.qk-hdr>.qk-tap--back::after,body.desk-set #rul>.qk-hdr>.qk-tap--back::after,body.desk-set #sas>.qk-hdr>.qk-tap--back::after,body.desk-set #cty>.qk-hdr>.qk-tap--back::after{content:'Settings'}
  body.desk-set #chg>.qk-hdr>.qk-tap--back:hover,body.desk-set #mgd>.qk-hdr>.qk-tap--back:hover,body.desk-set #rul>.qk-hdr>.qk-tap--back:hover,body.desk-set #sas>.qk-hdr>.qk-tap--back:hover,body.desk-set #cty>.qk-hdr>.qk-tap--back:hover{background:var(--qk-soft);color:var(--qk-ink)}
  body.desk-set #chg>.qk-hdr .qk-hdr__title,body.desk-set #mgd>.qk-hdr .qk-hdr__title,body.desk-set #rul>.qk-hdr .qk-hdr__title,body.desk-set #sas>.qk-hdr .qk-hdr__title,body.desk-set #cty>.qk-hdr .qk-hdr__title{left:auto;right:auto;position:static;margin-left:12px;font-size:15px;font-weight:600}
  body.desk-set #chg .bnd__in,body.desk-set #mgd .bnd__in,body.desk-set #rul .bnd__in,body.desk-set #sas .bnd__in,body.desk-set #cty .bnd__in{margin:0;max-width:960px}
}

/* THE UPDATE PILL (18 Sep 2026): "Update ready · Update · Not now", over the bar on the phone, bottom right at width —
   the same contract as Two Pillars' pill: it waits until nobody is mid-work, and it never reloads on its own */
/* THE UPDATE SHEET — the size of Two Pillars' (Sam, 18 Sep 2026): a scrim over everything, one 320px card, the logo, Update ready, one line, one big Update button. It stays until tapped. */
.qk-upd{position:fixed;inset:0;z-index:calc(var(--qk-z-lock) - 1);display:flex;align-items:center;justify-content:center;padding:24px;background:var(--qk-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:qk-fade .2s ease}
.qk-upd__card{width:min(320px,100%);background:var(--qk-card);border-radius:22px;padding:32px 22px 22px;box-shadow:var(--qk-shadow-dialog),inset 0 0 0 1px var(--qk-edge);text-align:center;color:var(--qk-ink);animation:qk-pop .22s ease}
.qk-upd__logo{width:150px;height:auto;display:block;margin:0 auto}
.qk-upd__logo--light{display:none}
:root[data-theme="light"] .qk-upd__logo--dark{display:none}
:root[data-theme="light"] .qk-upd__logo--light{display:block}
.qk-upd__t{margin-top:26px;font-size:22px;font-weight:600;line-height:1.15}
.qk-upd__s{margin-top:5px;font-size:15px;font-weight:500;line-height:1.4;color:var(--qk-ink-2)}
.qk-upd__go{height:52px;margin-top:24px;font-size:17px;font-weight:700}
.qk-upd__bar{position:relative;height:8px;margin-top:28px;border-radius:999px;background:var(--qk-soft);overflow:hidden}
.qk-upd__bar>i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:999px;background:var(--qk-accent);animation:qk-upd-slide 1.6s ease-in-out infinite}
@keyframes qk-upd-slide{from{left:-40%}to{left:100%}}
@media (prefers-reduced-motion:reduce){.qk-upd,.qk-upd__card{animation:none}.qk-upd__bar>i{animation:none;left:0;width:100%;opacity:.6}}

/* a filled-in form (18 Sep 2026): the choice chips in a field, the drawn signature on a finished one */
.frm .qk-field--stack .qk-segc{margin-top:8px}
.frm__ink{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:var(--qk-radius-card);background:var(--qk-soft)}
#dayTitle{padding-right:56px}   /* a long form name clears the close button (18 Sep 2026) */
.frm .qk-field input:disabled,.frm .qk-field textarea:disabled,.frm .qk-field select:disabled{opacity:1;color:var(--qk-ink);-webkit-text-fill-color:var(--qk-ink)}
.frm .qk-row--switch:disabled{opacity:.7}
.frm .qk-field__value::placeholder{color:var(--qk-ink-3)}

/* THE TWO GUIDES (site/office-guide.html, site/site-guide.html; Sam, 21 Sep 2026: "he's gonna be on his phone so make sure it's setup
   that way"). Built from docs/handover/guides/*.md by scripts/dev/build-guides.mjs out of the kit's own pieces - the shell, the section
   rows, the fold - and these few rules for what a fold holds: a step is its number, its words and one quiet note; a point is its words;
   a photograph is the phone's own screen with the card's corners. Every size and colour a token. */
.guide__lead{color:var(--qk-ink-2)}
.guide__fold>summary{list-style:none;cursor:pointer}
.guide__fold>summary::-webkit-details-marker{display:none}
/* an arrow down opens in place, and turns up when it has (the app's one rule, the same day) */
.guide__fold>summary .qk-chev{transform:rotate(90deg)}
.guide__fold[open]>summary .qk-chev{transform:rotate(-90deg)}
.guide__b{padding:0 14px var(--qk-air);margin-top:0;gap:var(--qk-air)}
.guide__b .qk-prose{margin:0;color:var(--qk-ink)}
.guide__b a{color:var(--qk-ink);text-decoration:underline;text-underline-offset:3px}
.guide__h{margin:var(--qk-air) 0 0;font-family:var(--qk-font-body);font-size:var(--qk-size-name);font-weight:700;color:var(--qk-ink)}
.guide__steps,.guide__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--qk-air)}
.guide__steps{counter-reset:gs}
.guide__steps>li,.guide__list>li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:start}
.guide__steps>li::before{counter-increment:gs;content:counter(gs);grid-row:1 / span 2;align-self:start;width:28px;height:28px;border-radius:8px;background:var(--qk-seg);color:var(--qk-ink);font-weight:700;font-size:var(--qk-size-sub);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.guide__list>li{grid-template-columns:1fr}
.guide__main{display:block;font-size:var(--qk-size-name);line-height:var(--qk-line-prose);color:var(--qk-ink)}
.guide__steps .guide__main{padding-top:2px}   /* the first line level with its number */
.guide__list .guide__main{align-self:start}
.guide__note{grid-column:2;font-size:var(--qk-size-sub);line-height:var(--qk-line-prose);color:var(--qk-ink-2)}
.guide__list .guide__note{grid-column:1}
.guide__main b,.guide__note b,.guide__b .qk-prose b,.guide__h b{font-weight:700;color:var(--qk-ink)}
.guide__shot{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:var(--qk-radius-card);box-shadow:inset 0 0 0 1px var(--qk-edge)}

/* THE BINDER'S OWN NUMBERS, AS TWO PILLARS SHOWS THEM (Sam, 21 Sep 2026: "I like how the crane binder shows the numbers we should do that"):
   the group's number before its name with a middle dot, each document's checklist number in the kit's rounded tile (it was a circle),
   and the files held as a quiet count at the right of a group and of a document. */
.bnd__gno{font-variant-numeric:tabular-nums;color:var(--qk-ink-2)}
.bnd__gno::after{content:"\00a0\00b7\00a0";color:var(--qk-ink-3)}
.bnd__n{flex:none;min-width:28px;justify-content:center;text-align:center;font-variant-numeric:tabular-nums}
.bnd__docs .bnd__num--sm,.bnd__num--sm{width:36px;height:36px;border-radius:var(--qk-radius-tile);background:var(--qk-on-pill);color:var(--qk-ink);font-size:15px;font-weight:700;justify-content:center;font-variant-numeric:tabular-nums}

/* EVERY GROUP CARD THE SAME SIZE (Sam, 21 Sep 2026, of the six with "Zoning & Anti-Collision (If applicable)" standing taller on its two
   lines: "I want all these the same size"): one height for all six, tall enough for a name on two lines, a one-line name centred in it.
   The files count rides at the right end of the bar's own line, so the name keeps the card's whole width and never reaches a third line. */
.bnd__groups .bnd__g>.bnd__gs{height:92px;min-height:92px;box-sizing:border-box;align-items:center}
.bnd__tally{display:flex;align-items:center;gap:var(--qk-air);margin-top:var(--qk-space-2)}
.bnd__tally .bnd__segs{flex:1;margin-top:0}
.bnd__tally .bnd__n{flex:none;min-width:0;font-size:var(--qk-size-small);font-weight:600;line-height:1;color:var(--qk-ink-2);font-variant-numeric:tabular-nums;background:none;padding:0}

/* A PROCEDURE IS A CARD OF ITS OWN, EVERY CARD ONE HEIGHT (Sam, 21 Sep 2026: "I thought we fixed this layout?" - see procRow). The sheet's
   own card (.newsheet__r) with a name on one line or two and its number under it. */
.prc__cards .prc__card{height:88px;min-height:88px;box-sizing:border-box;align-items:center;width:100%;text-align:left}
.prc__cards .prc__card .prc__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.25;font-size:17px;font-weight:600;color:var(--qk-ink)}   /* 16: the longest name in the pack ("Crane Component Loading Unloading Storage and Transport") stands whole on two lines of a phone */
.prc__cards .prc__card .qk-row__sub{display:block;font-style:normal;margin-top:2px}
.prc__cards .prc__card .qk-pill{flex:none}
/* THE PDF BUTTON HAS ITS OWN LINE (Sam, 21 Sep 2026, of the button's top edge against the end of the progress bar: "PDF button is encroaching"):
   the count's line is as tall as the button and stands level with it, and the bar stands clear above them both. */
.svc-crane__main{padding-bottom:14px;min-height:143px;box-sizing:border-box}   /* one height down the list, with a schedule or without (his law: "I want all cards the same size") */
.svc-crane__state{display:flex;align-items:center;min-height:34px;margin-top:10px}
.svc-crane .svc-prog{margin-right:0}
/* the visit card's arrow: down when shut, up when open */
.mbc__v{flex:none;align-self:center;transform:rotate(90deg);color:var(--qk-ink-3);margin:0 2px 0 6px;transition:transform var(--qk-duration) var(--qk-ease)}
.mbc.is-open .mbc__v{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.mbc__v{transition:none}}

/* A CARD EACH DOWN THE CLIENTS AND THE ENQUIRIES, AS THE PROCEDURES (21 Sep 2026): the sheet's card, one height, a name on one line,
   its one line under it, the pill at the right */
.lst__cards .lst__card{height:76px;min-height:76px;box-sizing:border-box;align-items:center;width:100%;text-align:left}
.lst__cards .lst__card .qk-row__name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;font-weight:600}
.lst__cards .lst__card .qk-row__sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.lst__cards .lst__card .qk-row__main{min-width:0}
.lst__cards .lst__card .qk-pill{flex:none}
/* the list card's tile is the kit's tile (the 40 seat), as on the procedure, crane and binder cards (Sam, 26 Sep 2026: "Audit the whole app for consistency of look") */
.newsheet__big.lst__cards .lst__card .qk-tile{width:var(--qk-tile-size);height:var(--qk-tile-size);border-radius:var(--qk-radius-tile);background:var(--qk-tile);color:var(--qk-tile-ink)}

/* THE PLUS STANDS OUT (Sam, 21 Sep 2026: "Should the plus sign pop a bit more so it stands out or no?"; six options rendered on his own Home,
   dark and light; he weighed 4 (a yellow plus on the dark button) against 2 and took 2): the button in the logo's yellow, the plus dark
   and a little heavier, in both themes. The one filled accent in the chrome: yellow on the bar says where he is, the yellow button says
   what to press. One line to change should he want 4 after all. */
.qk-fab{background:var(--qk-gold);color:#151515;box-shadow:0 8px 22px rgba(0,0,0,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
.qk-fab .qk-i{stroke-width:2.4}
/* THE LIGHT LOOK'S BAR AND + (Sam, 21 Sep 2026: "Dark mode looks amazing, light mode gold button with the dark menu looks off. Show me other
   options" - seven rendered on his own Home; he leaned to 3): a pale bar on the light ground, the chosen tab in a soft grey pill with the
   gold icon, the + dark with a white plus. The dark look keeps its dark bar and yellow button. */
@media (max-width:1023px){
  [data-theme="light"] .qk-bar--float{background:rgba(255,255,255,.97);color:#131313;box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.06)}
  [data-theme="light"] .qk-bar--float .qk-tab{color:rgba(19,19,19,.6)}
  [data-theme="light"] .qk-bar--float .qk-tab--on{background:rgba(19,19,19,.07);color:#131313}
  [data-theme="light"] .qk-bar--float .qk-tab--on .qk-tab__pill .qk-i{color:#A87A00}
  [data-theme="light"] .qk-fab{background:rgba(31,31,31,.97);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.05)}
  [data-theme="light"] .qk-fab .qk-i{stroke-width:1.8}
}

/* THE CREW'S INSTALL CARD (21 Sep 2026): one line - the tile, the name, Install at the right - with the close at the corner;
   an iPhone's steps stand beneath as the kit's own rows. Gone once installed. */
.ins{position:relative;padding:14px 16px}
.ins__head{display:flex;align-items:center;gap:12px;padding-right:30px}
.ins__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ins__go{flex:none}
.ins__go .qk-btn{width:auto;min-width:88px}
.ins .qk-rows{margin-top:12px}
.ins__done{margin-top:10px}
.ins__x{position:absolute;top:4px;right:4px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:999px;color:var(--qk-ink-3,var(--qk-ink-2));cursor:pointer;-webkit-tap-highlight-color:transparent}
.ins__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ins__x[hidden]{display:none}
/* THE JOB SITE AT THE HEAD OF A BINDER (21 Sep 2026): a card with the site's name and its facts */
.bnd__site{padding:14px 16px}
.bnd__site .qk-name{margin:4px 0 8px}
/* WHAT A CRANE STILL NEEDS, ON ITS CARD (21 Sep 2026): a dashed tile with the plus and the words; opens the crane's Details */
.qk-ccard__add{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:6px 12px 6px 6px;border:1.5px dashed var(--qk-hair,rgba(127,127,127,.45));border-radius:14px;background:none;color:var(--qk-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
.qk-ccard__add__plus{width:28px;height:28px;border-radius:9px;background:var(--qk-gold);color:#151515;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;line-height:1;flex:none}
/* THE TOOLBOX MEETING'S SHEET (21 Sep 2026): a topic a block, its three controls as check rows, Yes · No · N/A as small chips */
.tb .tb__topic{padding:14px 20px;border-bottom:1px solid var(--qk-rule)}   /* the card's 20 edge (the assessment, 26 Sep 2026: the boxes and N/A pills sat on the card's edges) */
.tb .tb__topic:last-child{border-bottom:0}
.tb .tb__topic__t{font-weight:600;font-size:15px}
.tb .tb__topic.is-na .tb__topic__t{color:var(--qk-ink-3)}
.tb .tb__ctl .qk-row{padding:6px 0;min-height:0}
.tb .tb__ynn{display:inline-flex;gap:6px;flex:none}
.tb .tb__ynn .qk-chip{padding:4px 10px;font-size:15px;min-height:30px}   /* the kit's chip type (the consistency audit, 26 Sep 2026) */
.tb .qk-msg.is-bad{color:var(--qk-bad,#B42318)}
/* WHO BRINGS WHAT, AS DOTS (21 Sep 2026): a party's colour on the binder's rows and in the legend above them */
.bdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;margin:0 8px 0 4px;background:#C9CED6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.bdot--owner{background:#FFCE05}.bdot--prime{background:#1F6FEB}.bdot--sup{background:#1E8E4C}.bdot--user{background:#7C3AED}.bdot--mobile{background:#E8590C}.bdot--other{background:#8A94A6}
.bdot--none{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.55)}
.bdot[data-bwdot]{width:22px;height:22px;margin:0 2px 0 4px;box-shadow:none;background-clip:content-box;padding:6px;box-sizing:border-box}
.bdot--none[data-bwdot]{background:transparent;padding:0;width:22px;height:22px;position:relative}
.bdot--none[data-bwdot]::after{content:'';position:absolute;inset:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.55)}
.bnd__legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 4px 10px;font-size:13px;color:var(--qk-ink-2)}
.bnd__legend__t{width:100%;font-weight:600;color:var(--qk-ink);font-size:13px}
.bnd__legend__i{display:inline-flex;align-items:center;gap:6px}.bnd__legend__i b{font-weight:600;color:var(--qk-ink)}

/* THE CRANE CARD'S VIEW (Sam, 22 Sep 2026: "a view button that allows me to open them in a pop up and view them all"): a small quiet
   button at the end of the card's facts, opening the crane's checklist */
.qk-ccard__facts .qk-ccard__view{margin-left:auto;align-self:center}
/* SERVICE APART FROM INSPECTIONS on the schedule (Sam, 22 Sep 2026): two blocks under one list, each with its own heading and count */
.svc__kind{margin-top:var(--qk-space-4)}.svc__kind:first-child{margin-top:0}
.svc__kind__h{margin:0 0 var(--qk-space-2)}.svc__kind__h .qk-count{font-weight:500;color:var(--qk-ink-3);margin-left:6px}
/* WHO DOES WHAT (Settings): the rhythm line above each run of rows */
.who__k{margin:var(--qk-space-3) 0 var(--qk-space-1)}

/* THE WHEEL WHILE A PDF IS MADE (Sam, 22 Sep 2026: "When he clicks pdf, for anything in his app, it doesn't show the nice loading wheel
   or anything"): one quiet pill above the tab bar, a turning ring and the words, from the moment a PDF is asked for until it arrives */
.qk-wheel{position:fixed;left:50%;bottom:calc(var(--qk-safe-bottom,0px) + 96px);transform:translateX(-50%);z-index:calc(var(--qk-z-scrim) + 30);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--qk-bg-2);color:var(--qk-ink);box-shadow:0 8px 24px rgba(0,0,0,.28);font:600 15px/1.2 var(--qk-font-body);pointer-events:none}
.qk-wheel[hidden]{display:none}
.qk-wheel__ring{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--qk-ink-3);border-top-color:var(--qk-accent,#FFCE05);animation:qk-turn .8s linear infinite;flex:none}
@keyframes qk-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.qk-wheel__ring{animation-duration:1.6s}}

/* ======================================================================
   THE UI PASS, THE KIT'S PART (Sam, 22 Sep 2026: "i want perfection in every way. every detail matters"). Both apps — the office and
   the crew's site — wear these. docs/design/UI-PASS-2026-09-22.md names each finding.
   ====================================================================== */
/* F1 · a field in a grouped list stands on the list's own 20 px edge, the edge its hairlines and every row already keep */
.qk-rows>.qk-field,.qk-rows>*>.qk-field:only-child{padding-left:20px;padding-right:20px}
/* F4 · ONE DROPDOWN: the browser's own select pads its value 4 px in and draws its own arrow in each platform's style; the kit's
   select is drawn flat, its value on the same edge as a typed value, the kit's chevron at its end, in the ink of the theme */
select.qk-field__value{-webkit-appearance:none;appearance:none;padding-right:22px;background-repeat:no-repeat;background-position:right center;background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme="dark"] select.qk-field__value{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A69E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select.qk-field__value::-ms-expand{display:none}
/* F8 · no painted text caret after a value: no other field carries one, and a caret that never blinks reads as a flaw */
.qk-field--edit .qk-field__value::after{content:none}
/* F5 · a switch row's words wrap to two lines rather than cut ("Designated qualified super…") */
.qk-row:has(.qk-switch) .qk-row__name,.qk-field:has(.qk-switch) .qk-field__label,.qk-row:has(input[type="checkbox"][role="switch"]) .qk-row__name{white-space:normal;overflow:visible;text-overflow:clip}
/* S6 · THE HEADER'S GROUND FOLLOWS THE SEARCH: the band's ground faded out from 40% of its height, above the pill's own foot, so a page
   scrolling up showed through beside and under the pill ("THIS JOB" read behind the search, the calendar's weekdays beside the lockup).
   The ground is now solid to 6 px past the pill's foot wherever the pill stands (its foot is 108 under the safe top at rest, 54 once
   tucked), then falls away over 20 px. */
@media (max-width:1023.98px){
  #opsHdr.qk-hdr--sticky.qk-hdr--brand::before{bottom:-60px;
    background:linear-gradient(var(--qk-ground) calc(var(--qk-safe-top) + 114px - var(--hp,0) * 54px),transparent calc(var(--qk-safe-top) + 134px - var(--hp,0) * 54px))}
}
/* F9 · a dressed date or time: the words where the value stands, the native control invisible over the whole field */
.qk-field--dressed{position:relative;cursor:pointer}
.qk-field__native{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;cursor:pointer;font:inherit;z-index:1}
.qk-field__shown{flex:1;min-width:0;font-size:var(--qk-size-body);font-weight:var(--qk-weight-medium);color:var(--qk-ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-field--stack .qk-field__shown{text-align:left;width:100%}
.qk-field__shown--empty{color:var(--qk-ink-3);font-weight:400}
/* S1 · ONE SECTION HEADING: the visit's and the records' uppercase grey bands ("MAINTENANCE · MONTHLY  15 left") wear the app's one
   heading — the name in full ink at 17/600, the count in grey at 15 right after it — as "Erected 3" and "Underway 2" do */
.mbc__head{justify-content:flex-start;align-items:baseline;gap:var(--qk-space-2)}
.mbc__h{font-size:17px;font-weight:var(--qk-weight-semi);letter-spacing:-.01em;text-transform:none;color:var(--qk-ink)}
.mbc__pill{font-size:15px;font-weight:400;color:var(--qk-ink-3)}
/* S5 · ONE SEARCH FIELD: the header's search is the pattern — a full pill on the soft ground, a hairline edge, the gold glass at 18,
   the words at 16. The document search, the binder search, the New sheet's search and the desktop's searches all wear it. */
.bnd__search__box,.dk-search,.newsheet__find,.qk-row--search.pp-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--qk-radius-pill);background:var(--qk-soft);box-shadow:inset 0 0 0 1px var(--qk-edge);min-height:0}
.bnd__search__box>.qk-i,.dk-search>.qk-i,.newsheet__find>.qk-i,.qk-row--search.pp-search>.qk-i{width:18px;height:18px;flex:none;color:var(--qk-accent);stroke-width:2}
.bnd__search__box input,.dk-search input,.newsheet__find input,.qk-row--search.pp-search input{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0;font:inherit;font-size:17px;font-weight:400;color:var(--qk-ink);text-align:left;outline:none;-webkit-appearance:none;appearance:none}
.bnd__search__box input::placeholder,.dk-search input::placeholder,.newsheet__find input::placeholder,.qk-row--search.pp-search input::placeholder{color:var(--qk-ink-3);opacity:1}
@media (min-width:1024px){.dk-search{height:40px}}
/* D2 · a desktop has no bottom bar: the tablet's strip under the bar (ops.html, audit 67) hid the last 86 px of every detail page — the
   crane, a client, the binder cut off by a hard edge above bare ground */
@media (min-width:1024px){body:has(.bnd.qk-shell:not([hidden]))::after{content:none}}
/* C1–C5 · THE CRANE CARD, REDRAWN (the UI pass, 22 Sep 2026): the head (name and state, the site, the client) beside the map; the address,
   the phone and the email the card's whole width, never cut; the facts as numbers that read; the month's maintenance the card's foot */
.qk-ccard.ccard{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--qk-space-3);padding:var(--qk-space-4)}
.ccard__head{display:flex;align-items:flex-start;gap:var(--qk-space-3)}
.ccard__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.ccard .qk-ccard__top{gap:var(--qk-space-2);flex-wrap:wrap}
.ccard .qk-ccard__name{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);white-space:normal}
.ccard__site{font-size:15px;line-height:1.3;color:var(--qk-ink-2)}
.ccard .qk-ccard__sub--contact{margin-top:0}
.ccard .qk-ccard__link{align-items:flex-start}
.ccard .qk-ccard__link .qk-i{margin-top:1px}
.ccard .qk-ccard__link>span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
.ccard__lines{display:flex;flex-direction:column;gap:var(--qk-space-2)}
.ccard .qk-ccard__add{align-self:flex-start;margin:0;height:36px;padding:0 14px 0 5px;gap:var(--qk-space-2);border:0;border-radius:var(--qk-radius-pill);background:var(--qk-soft);box-shadow:inset 0 0 0 1px var(--qk-edge);font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi)}
.ccard .qk-ccard__add__plus{width:26px;height:26px;border-radius:50%;font-size:17px}
.ccard .qk-ccard__facts{padding-top:var(--qk-space-3);margin:0;border-top:1px solid var(--qk-rule)}
.ccard .qk-ccard__facts>span,.ccard .qk-ccard__facts>span:last-child{flex:1}
.ccard .qk-ccard__facts b{font-size:22px;font-weight:var(--qk-weight-semi);letter-spacing:-.01em;line-height:1.15}
.ccard .qk-ccard__facts i{font-size:12px;margin-top:2px}
.ccard__foot{display:flex;align-items:center;gap:var(--qk-space-3);margin:0 calc(var(--qk-space-4) * -1) calc(var(--qk-space-4) * -1);padding:14px var(--qk-space-4);border:0;border-top:1px solid var(--qk-rule);border-radius:0 0 var(--qk-radius-card) var(--qk-radius-card);background:transparent;color:var(--qk-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ccard__foot:active{background:var(--qk-soft)}
.ccard__foot__t{flex:none;font-size:15px;font-weight:var(--qk-weight-medium)}
.ccard__foot__bar.svc-prog{flex:1;min-width:40px;margin:0}
.ccard__foot__n{flex:none;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi);color:var(--qk-ink-2);font-variant-numeric:tabular-nums}
.ccard__foot .qk-chev{flex:none;margin-right:-4px;color:var(--qk-ink-3)}
@media (min-width:768px){.ccard .qk-ccard__facts{max-width:60%}}
/* C6 · the crane's page wears its card's head: the site, the company with its building, the address with its pin beside the map; the
   renter's phone and email beneath, the card's whole width */
.qk-crane-head__main{display:flex;flex-direction:column;gap:6px}
.qk-crane-head__main>.qk-crane-head__sub:first-of-type{color:var(--qk-ink-2)}
.qk-crane-head .qk-ccard__link>span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
.qk-crane-head .qk-ccard__link{align-items:flex-start}
.qk-crane-head__lines{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--qk-space-2)}
.qk-crane-head__lines .qk-ccard__sub--contact{margin-top:0}
/* THE BANNER CARD: the map the card's whole width across its top (the card's own corners), the state and the site laid over it on a
   shade; in dark mode the map's own light tiles are turned to night so the banner never glares */
.ccard--banner.qk-ccard.ccard{padding:0;gap:0;overflow:hidden}
.ccard__banner{position:relative;display:block;height:132px;overflow:hidden}
.qk-ccard__map.qk-ccard__map--banner{position:absolute;inset:0;width:auto;height:auto;border-radius:0;box-shadow:none}
.qk-ccard__map--banner .qk-ccard__tiles{position:absolute;left:50%;top:50%;display:block}
.qk-ccard__map--banner .qk-ccard__tiles img{position:absolute;width:128px;height:128px;max-width:none}
.qk-ccard__map--banner .qk-ccard__city{display:none}
.qk-ccard__map--banner .qk-ccard__pin{margin-top:-30px}
:root[data-theme="dark"] .qk-ccard__map--banner .qk-ccard__tiles{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.6)}
.ccard__banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(transparent,rgba(0,0,0,.62));pointer-events:none}
.ccard__over{position:absolute;left:var(--qk-space-4);right:var(--qk-space-4);top:var(--qk-space-3);bottom:var(--qk-space-3);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;z-index:2;pointer-events:none}
.ccard__over .qk-pill{box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ccard__place{display:flex;flex-direction:column;gap:1px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ccard__place b{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);line-height:1.2}
.ccard__place i{font-style:normal;font-size:var(--qk-size-caption);opacity:.85}
.ccard__ph{position:absolute;right:var(--qk-space-3);top:var(--qk-space-3);z-index:2;width:56px;height:56px;border-radius:var(--qk-radius-tile);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ccard__body{display:flex;flex-direction:column;gap:var(--qk-space-3);padding:var(--qk-space-4) var(--qk-space-4) 0}
.ccard__model{font-size:var(--qk-size-title-md);font-weight:var(--qk-weight-bold);letter-spacing:-.015em;line-height:1.15;color:var(--qk-ink)}
.ccard--banner .ccard__lines{gap:var(--qk-space-2)}
.ccard--banner .qk-ccard__facts{margin:var(--qk-space-4) var(--qk-space-4) 0}
.ccard--banner .qk-ccard__facts:last-child{margin-bottom:var(--qk-space-4)}
.ccard--banner .ccard__foot{margin:var(--qk-space-4) 0 0}
.ccard--banner:not(:has(.qk-ccard__facts)) .ccard__body{padding-bottom:var(--qk-space-4)}
.ccard__model{display:flex;align-items:center;gap:10px}
.ccard__kind{flex:none;width:34px;height:34px;border-radius:var(--qk-radius-tile);background:var(--qk-soft);color:var(--qk-ink);display:inline-flex;align-items:center;justify-content:center}
.ccard__kind .qk-i{width:24px;height:24px;stroke-width:1.5}
.ccard__foot.is-late .ccard__foot__n{color:var(--qk-bad)}
.ccard__kind .qk-tile{width:34px;height:34px;border-radius:var(--qk-radius-tile);background:var(--qk-soft);color:var(--qk-ink);margin:0}
.ccard__kind .qk-tile svg{width:26px;height:26px}
/* H2 · THE TABLET'S HEADER STANDS ON THE CONTENT'S EDGE: it was held to a 680 column while the page ran the full width, so the logo and
   the headings did not share a left edge. The header now runs the page's width on its 24 gutter, and the crane cards sit two across. */
@media (min-width:781px) and (max-width:1023px){
  #opsHdr{max-width:none;margin:0;padding-left:var(--qk-space-5);padding-right:var(--qk-space-5)}
  .qk-ccard__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--qk-space-4);align-items:start}
  .qk-ccard__list>.bwrap{min-width:0}
  .ccard .qk-ccard__facts{max-width:none}
}
/* the foot in two lines: the name with its state pill and the arrow, then the bar the whole width with the count at its end */
.ccard__foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:var(--qk-space-2);row-gap:10px}
.ccard__foot__t{grid-column:1;grid-row:1}
.ccard__foot__late{grid-column:2;grid-row:1}
.ccard__foot>.qk-chev{grid-column:3;grid-row:1}
.ccard__foot__bar.svc-prog{grid-column:1/3;grid-row:2}
.ccard__foot__n{grid-column:3;grid-row:2;justify-self:end;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi);color:var(--qk-ink-3)}
.ccard__foot.is-late .ccard__foot__n{color:var(--qk-ink-3)}
.ccard__foot__bar.svc-prog{grid-column:1/2}
.ccard__foot__n{grid-column:2/4}
.ccard__foot__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the crane's page banner: a touch taller than the card's, the model at the page title's 24, the card's foot room below */
.crane__hero .ccard__banner{height:156px}
.crane__hero .ccard__model{font-size:var(--qk-size-title);letter-spacing:-.02em}
.crane__hero .ccard__body{padding-bottom:var(--qk-space-4)}
.crane__hero{cursor:default}
/* THE OVERVIEW'S FOUR TILES and the month's row (the UI pass): two across, the label small over the number, a line of when under it */
.crn-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--qk-space-3)}
.crn-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:var(--qk-space-4);border:0;border-radius:var(--qk-radius-card);background:var(--qk-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);color:var(--qk-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
div.crn-stat{cursor:default}
.crn-stat:active{background:var(--qk-soft)}
.crn-stat__l{font-size:13px;color:var(--qk-ink-3)}
.crn-stat__v{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:var(--qk-weight-semi);letter-spacing:-.01em;line-height:1.15;font-variant-numeric:tabular-nums}
.crn-stat__s{font-size:13px;color:var(--qk-ink-3)}
.crn-stat__dot{width:10px;height:10px;border-radius:50%;background:var(--qk-ok);flex:none}
.crn-stat--warn .crn-stat__dot{background:var(--qk-warn)}
.crn-stat--bad .crn-stat__dot{background:var(--qk-bad)}
.crn-stat--ok .crn-stat__v,.crn-stat--warn .crn-stat__v,.crn-stat--bad .crn-stat__v{font-size:19px}
.qk-card.crn-month{margin:0;padding:var(--qk-space-4);border-radius:var(--qk-radius-card);background:var(--qk-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);border-top:0}
@media (min-width:781px){.crn-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* THE DOCUMENTS TAB, INCH BY INCH (the UI pass, 22 Sep 2026 — Sam: "Go inch by inch on every page") */
.bnd__site .qk-name{margin:6px 0 2px}   /* the binder card's title as close to its line as the job card's */
.bnd__site__line{margin:0}
/* the job card's lines stand in the card itself, hairlines between, no box inside the box */
.bnd__job .qk-rows.bnd__job__lines{background:transparent;box-shadow:none;border-radius:0;margin:var(--qk-space-4) calc(var(--qk-space-4) * -1) 0;border-top:1px solid var(--qk-rule)}
.bnd__job .bnd__job__lines .qk-row{padding-left:var(--qk-space-4);padding-right:var(--qk-space-4)}
.bnd__job .bnd__job__lines .qk-row+.qk-row::before{left:var(--qk-space-4);right:var(--qk-space-4)}
.bnd__job__add .qk-row__name{color:var(--qk-ink)}
.bnd__job>.qk-btn-row{margin-top:var(--qk-space-2)}
/* THE BINDER, AS SAM PICKED IT (22 Sep 2026: "Closer to this") */
.bnd__legend{padding:0 4px;gap:6px 16px;font-size:15px}
.bnd__legend__ev{width:100%;color:var(--qk-ink-2);font-size:15px}
.bnd__groups .qk-disc>summary .qk-row__name{font-weight:var(--qk-weight-semi)}
.bnd__groups .bnd__n{font-size:13px;color:var(--qk-ink-3);white-space:nowrap}
.bnd__groups .qk-disc.bnd__g>summary.bnd__gs{min-height:92px}
/* inside an open group: one list with hairlines, never a box in a box in a box */
html body .bnd__groups .bnd__docs{padding:0;gap:0;border-top:0;background:transparent}
html body .bnd__groups .bnd__docs .bnd__d{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;overflow:visible}
html body .bnd__groups .bnd__docs .bnd__d+.bnd__d{border-top:1px solid var(--qk-rule)}
html body .bnd__groups .bnd__docs .bnd__d>summary{min-height:60px;padding:14px var(--qk-space-4);gap:var(--qk-space-3);align-items:flex-start;background:transparent}
html body .bnd__groups .bnd__docs .bnd__d>summary .qk-row__name{font-size:var(--qk-size-row);font-weight:400;line-height:1.3;white-space:normal;display:block;-webkit-line-clamp:unset;overflow:visible;text-overflow:clip;color:var(--qk-ink)}
html body .bnd__groups .bnd__docs .bnd__d>summary .qk-chev{margin-top:6px}
html body .bnd__groups .bnd__docs .bnd__d[open]>summary{background:transparent}
html body .bnd__groups .qk-disc.bnd__g[open]>.qk-disc__b{padding:0}
/* the section's number is its state */
html body .bnd__groups .bnd__docs .bnd__num--sm{width:34px;min-width:34px;height:34px;border-radius:50%;justify-content:center;font-size:15px;font-weight:var(--qk-weight-semi);background:transparent;box-shadow:inset 0 0 0 1.5px var(--qk-rule);color:var(--qk-ink-3);font-variant-numeric:tabular-nums}
html body .bnd__groups .bnd__docs .bnd__num--on{background:var(--qk-ok-bg);box-shadow:inset 0 0 0 1.5px var(--qk-ok);color:var(--qk-ok)}
html body .bnd__groups .bnd__docs .bnd__num--stale{background:var(--qk-warn-bg);box-shadow:inset 0 0 0 1.5px var(--qk-warn);color:var(--qk-warn)}
html body .bnd__groups .bnd__docs .bnd__num--na{box-shadow:none;outline:1.5px dashed var(--qk-rule);outline-offset:-1.5px}
.bnd__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.bnd__resp{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:var(--qk-radius-pill);background:var(--qk-soft);box-shadow:inset 0 0 0 1px var(--qk-edge);font-size:13px;font-weight:var(--qk-weight-medium);color:var(--qk-ink-2);cursor:pointer}
.bnd__resp .bdot{width:8px;height:8px;margin:0;flex:none}
.bnd__resp--none{color:var(--qk-ink-3)}
.bnd__onfile{font-size:15px;color:var(--qk-ink-3)}
/* an open section: its files and actions on a soft band, on the name's edge */
html body .bnd__groups .bnd__d__b,html body .bnd__groups .bnd__d__b--empty{background:var(--qk-soft);margin:0;border-radius:0;padding:var(--qk-space-2) var(--qk-space-4) var(--qk-space-3) calc(var(--qk-space-4) + 46px)}
html body .bnd__groups .bnd__d__b .qk-rows{background:transparent;box-shadow:none;border-radius:0}
html body .bnd__groups .bnd__d__b .qk-row{box-shadow:none}
html body .bnd__groups .bnd__d__b .qk-rows>.qk-row{background:transparent}
html body .bnd__groups .bnd__d__b .qk-row__sub{white-space:normal;overflow:visible;text-overflow:clip}
html body .bnd__groups .bnd__f{padding:10px 0;border-bottom:1px solid var(--qk-rule)}
html body .bnd__groups .bnd__uprow,html body .bnd__groups .bnd__roperow{background:transparent;box-shadow:none;padding:10px 0;min-height:52px;height:auto;border-radius:0;gap:var(--qk-space-3);color:var(--qk-ink);font-weight:400;justify-content:flex-start}
html body .bnd__groups .bnd__uprow .qk-row__name,html body .bnd__groups .bnd__roperow .qk-row__name{font-size:var(--qk-size-row)}
html body .bnd__groups .bnd__addrow,html body .bnd__groups .bnd__d__b--empty .bnd__addrow{justify-content:space-between;padding:var(--qk-space-1) 0 0;border-top:0}
html body .bnd__groups .bnd__addrow:empty{display:none}
html body .bnd__groups .bnd__na.qk-btn{padding:0;height:32px;min-height:32px;font-size:15px;color:var(--qk-ink-3)}
/* POLISH: the upload box, filed documents never cut, dividers on the name's edge */
html body .bnd__groups .bnd__drop{display:flex;align-items:center;gap:var(--qk-space-3);margin:var(--qk-space-2) 0 0;padding:14px var(--qk-space-4);min-height:68px;box-sizing:border-box;border-radius:var(--qk-radius-box);border:1.5px dashed var(--qk-ink-3);background:transparent;box-shadow:none;color:var(--qk-ink);cursor:pointer;height:auto;font-weight:400;transition:background-color .2s var(--qk-ease),border-color .2s var(--qk-ease)}
html body .bnd__groups .bnd__drop:hover,html body .bnd__groups .bnd__drop:active{background:var(--qk-card);border-color:var(--qk-accent)}
.bnd__drop__ic{width:40px;height:40px;border-radius:50%;background:var(--qk-card);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px var(--qk-edge)}
.bnd__drop__ic .qk-i{width:20px;height:20px;color:var(--qk-accent);stroke-width:2}
.bnd__drop__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.bnd__drop__t b{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi)}
.bnd__drop__t small{font-size:13px;color:var(--qk-ink-3)}
html body .bnd__groups .bnd__addrow{padding:var(--qk-space-2) 0 0}
/* a filed document: its name and when it was filed in full, the bin and Open at the right */
html body .bnd__groups .bnd__f{align-items:center;gap:var(--qk-space-3);padding:12px 0}
html body .bnd__groups .bnd__f__main{flex:1;min-width:0}
html body .bnd__groups .bnd__f__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;text-overflow:clip;font-size:15px;font-weight:var(--qk-weight-semi);line-height:1.3}
html body .bnd__groups .bnd__f__sub{white-space:normal;overflow:visible;text-overflow:clip;font-size:13px;margin-top:2px}
html body .bnd__groups .bnd__f__pic{width:40px;height:40px;border-radius:var(--qk-radius-tile);background:var(--qk-card)}
/* dividers between sections start at the name, as a grouped list's do */
html body .bnd__groups .bnd__docs .bnd__d+.bnd__d{border-top:0;position:relative}
html body .bnd__groups .bnd__docs .bnd__d+.bnd__d::before{content:"";position:absolute;left:62px;right:0;top:0;height:1px;background:var(--qk-rule);z-index:1}
html body .bnd__groups .bnd__docs .bnd__d[open]+.bnd__d::before{left:0}
/* NOTHING BLENDS (Sam, 22 Sep 2026: "These blend in together"): the open section is a recessed band and everything in it is a raised card —
   a filed document, a rope entry, Add rope record entry — then the dashed upload box, then Not applicable. Light: white cards on the soft
   band; dark: lifted cards on a well darker than the group. */
.bnd__groups{--band-bg:var(--qk-soft);--band-item:var(--qk-card);--band-tile:var(--qk-soft)}
[data-theme="dark"] .bnd__groups{--band-bg:var(--qk-ground);--band-item:#262626;--band-tile:#333333}
html body .bnd__groups .bnd__d__b,html body .bnd__groups .bnd__d__b--empty{background:var(--band-bg);padding:var(--qk-space-3) var(--qk-space-4) var(--qk-space-3) calc(var(--qk-space-4) + 46px);display:flex;flex-direction:column;gap:var(--qk-space-2)}
html body .bnd__groups .bnd__d__b>.bnd__f,html body .bnd__groups .bnd__d__b .qk-row,html body .bnd__groups .bnd__d__b>.qk-rows>.qk-row{background:var(--band-item);border-radius:var(--qk-radius-box);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px var(--qk-edge);padding:12px 14px;margin:0;border-bottom:0;min-height:64px}
html body .bnd__groups .bnd__d__b .qk-row::before{display:none}
html body .bnd__groups .bnd__d__b .qk-tile,html body .bnd__groups .bnd__f__pic{background:var(--band-tile);width:40px;height:40px;border-radius:var(--qk-radius-tile)}
html body .bnd__groups .bnd__d__b>.qk-rows{display:flex;flex-direction:column;gap:var(--qk-space-2);background:transparent;box-shadow:none}
html body .bnd__groups .bnd__drop{margin:0;background:transparent}
html body .bnd__groups .bnd__drop__ic{background:var(--band-item)}
html body .bnd__groups .bnd__f__bin{width:36px;height:36px;border-radius:50%;background:transparent}
html body .bnd__groups .bnd__f__open{background:var(--band-tile)}
html body .bnd__groups .bnd__addrow{padding:0}
/* the upload box is filled like the cards beside it, its dashed edge and gold icon mark it as the place to drop a file (Sam: "It's blending
   together"); the band's items run its full width so a filed document's name has room */
html body .bnd__groups .bnd__drop{background:var(--band-item);border-color:color-mix(in srgb,var(--qk-accent) 55%,var(--qk-ink-3))}
html body .bnd__groups .bnd__drop__ic{background:var(--band-tile);box-shadow:none}
html body .bnd__groups .bnd__d__b,html body .bnd__groups .bnd__d__b--empty{padding:var(--qk-space-3) var(--qk-space-4)}
html body .bnd__groups .bnd__d__b>.bnd__f{gap:var(--qk-space-3)}
html body .bnd__groups .bnd__f__bin{width:32px;height:32px;margin-right:-4px}
/* SERVICE, REDRAWN (the UI pass): the month card, a card per scheduled crane with its bar and PDF foot, one list for the rest */
.svcsum{display:flex;flex-direction:column;gap:10px;padding:var(--qk-space-4)}
.svcsum__top{display:flex;align-items:center;justify-content:space-between;gap:var(--qk-space-2)}
.svcsum__n{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.svcsum__n b{font-size:28px;font-weight:var(--qk-weight-bold);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.svcsum__n span{font-size:15px;color:var(--qk-ink-3)}
.svcsum__bar.svc-prog,.svcx__bar.svc-prog{margin:0}
.svcx__list{display:flex;flex-direction:column;gap:var(--qk-space-3)}
.svcx{background:var(--qk-card);border-radius:var(--qk-radius-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);overflow:hidden}
.svcx__main{display:flex;flex-direction:column;gap:14px;width:100%;padding:var(--qk-space-4);border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svcx__main:active{background:var(--qk-soft)}
.svcx__head{display:flex;align-items:center;gap:var(--qk-space-3)}
.svcx__tile.qk-tile{width:44px;height:44px;border-radius:var(--qk-radius-tile);background:var(--qk-soft);flex:none;margin:0}
.svcx__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svcx__name{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi)}
.svcx__site{font-size:15px;color:var(--qk-ink-3)}
.svcx__head .qk-chev{color:var(--qk-ink-3);flex:none}
.svcx__prog{display:flex;align-items:center;gap:var(--qk-space-3)}
.svcx__bar.svc-prog{flex:1}
.svcx__n{flex:none;font-size:var(--qk-size-caption);font-weight:var(--qk-weight-semi);color:var(--qk-ink-2);font-variant-numeric:tabular-nums}
.svcx__foot{display:flex;align-items:center;justify-content:space-between;padding:10px var(--qk-space-4);border-top:1px solid var(--qk-rule);font-size:15px;color:var(--qk-ink-2)}
.svcx__foot .svc-crane__pdf{margin:0}
.svcx__load .qk-row__value{color:var(--qk-accent);font-weight:var(--qk-weight-semi)}
.svcx__hint{margin:calc(var(--qk-space-3) * -1 + 4px) 4px 0;font-size:15px}
/* THE VISIT (the UI pass): the empty tick reads at a glance in both themes; the ⓘ steps back behind the name */
.mbc .mbc__box.qk-check:not(.qk-check--on){box-shadow:inset 0 0 0 2px var(--qk-ink-3);background:transparent}
.mbc .mbc__box.qk-check:not(.qk-check--on):active{background:var(--qk-soft)}
.mbc .mbc__i .qk-i{width:19px;height:19px;color:var(--qk-ink-3);opacity:.8}
.vsheet>.qk-rows .qk-row{min-height:68px}
/* SERVICE WITH RINGS (the UI pass): the month's ring on top, a ring on each crane */
.svcring{--p:0;--c:var(--qk-accent);position:relative;flex:none;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--qk-rule) 0);display:grid;place-items:center}
.svcring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--qk-card)}
.svcring.is-ok{--c:var(--qk-ok)}
.svcring__v{position:relative;font-size:17px;font-weight:var(--qk-weight-bold);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
.svcring__v small{font-size:11px;font-weight:var(--qk-weight-semi);color:var(--qk-ink-3);margin-left:1px}
.svcring--big{width:96px;height:96px}
.svcring--big::before{inset:9px}
.svcring--big .svcring__v{font-size:24px}
.svcring--big .svcring__v small{font-size:15px}
.qk-card.svcsum{flex-direction:row;align-items:center;gap:var(--qk-space-4);padding:var(--qk-space-4) var(--qk-space-5) var(--qk-space-4) var(--qk-space-4)}
.svcsum__id{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.svcsum__n{font-size:15px;color:var(--qk-ink-3);display:block}
.svcsum__n b{font-size:22px;color:var(--qk-ink);margin-right:4px}
.svcsum__meta{font-size:15px;color:var(--qk-ink-3)}
.svcsum__id .qk-pill{margin-top:4px}
.svcx__head{align-items:center;gap:var(--qk-space-4)}
.svcx__main{gap:0}
.svcx__state{display:flex;align-items:center;gap:var(--qk-space-2);margin-top:6px;flex-wrap:wrap}
.svcx__n{font-size:15px}
.ccard__model .qk-ccard__name{font-size:inherit;font-weight:inherit;letter-spacing:inherit;white-space:normal;overflow:visible;text-overflow:clip;flex:0 1 auto}
.mbc__st{display:block;margin-top:6px}
.mbc__st .qk-pill{vertical-align:middle}
.mbc .mbc__t{-webkit-line-clamp:4;line-clamp:4}
.mbc .mbc__r{height:auto;min-height:92px}
/* ONE HEIGHT FOR EVERY JOB STILL TO DO (Sam, 26 Sep 2026: "Make sure all cards are consistent size"): the title on up to two lines, the
   instruction on one (whole when the card opens), the pills under them; a done card still folds quiet (20 Sep 2026) and an open one grows */
.mb .mbc:not(.is-done):not(.is-open) > .mbc__r{height:113px;min-height:0}
/* the title and the instruction share two lines: a long title takes both, and the instruction (whole when the card opens) steps aside */
.mb .mbc:not(.is-done):not(.is-open) .mbc__words{max-height:calc(2 * var(--qk-line-body) * var(--qk-size-body) + 2px);overflow:hidden}
.mb .mbc:not(.is-done):not(.is-open) .mbc__n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb .mbc:not(.is-done):not(.is-open) .mbc__words>.mbc__s--two{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
/* a done job folds to one line (Sam, 20 Sep 2026: "finished work goes quiet") and every done card is one height too */
.mb .mbc.is-done:not(.is-open) > .mbc__r{height:104px;min-height:0}
.mb .mbc.is-done:not(.is-open) .mbc__n{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb .mbc:not(.is-open) .mb__t{min-width:0}
/* the visit card's layout (26 Sep 2026): the words from the card's 20 edge, the tick alone at the right, the ⓘ and the arrow at the end of the pills */
.mb .mbc > .mbc__r{padding:14px 16px 14px 16px;gap:14px;align-items:center}
/* the premium polish (Sam, 26 Sep 2026): the tick leads, the arrow alone at the right edge */
.mb .mbc > .mbc__r > .mbc__box{order:0;flex:none}
.mb .mbc > .mbc__r > .mbc__v{flex:none;width:18px;height:18px;color:var(--qk-ink-3);margin-left:2px}
.mb .mbc{position:relative}
/* no edge rail on the card (Sam, 26 Sep 2026: "I don't like these weird side borders"): the state is the pill's */
.vhead .vhead__manage{height:var(--qk-chip);font-size:15px;padding:0 13px;gap:6px}
.vhead .vhead__manage .qk-i{width:16px;height:16px}
.mb .mbc .mb__t{flex:1 1 auto}
.mb .mbc .mbc__st{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;margin-top:8px;min-width:0}
.mb .mbc .mbc__st .qk-pill{flex:none}
.mb .mbc .mbc__tools{display:inline-flex;align-items:center;gap:2px;margin-left:auto;flex:none;color:var(--qk-ink-3)}
.mb .mbc .mbc__tools .mbc__i{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;margin:-7px -8px -7px 0}   /* a 44 tap round a small glyph, the row's height unchanged */

.mbc__st{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mbc__st:empty{display:none}
.mbc__st .qk-pill{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a heading's state ("15 left", "Done", "Filed") is a pill; a bare count after a heading stays a grey number (Sam, 22 Sep 2026: "Pill? Or no?") */
.mbc__pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--qk-radius-pill);background:var(--qk-soft);color:var(--qk-ink-2);font-size:12px;font-weight:var(--qk-weight-semi);align-self:center}
.mbc__pill.is-ok{background:var(--qk-ok-bg);color:var(--qk-ok)}
.mbc__head{align-items:center}
/* SAFETY (the UI pass): the revision and what is next are pills; long procedure names in full; the contents' numbers soft circles */
.prc__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:4px}
.prc__meta .qk-row__sub{margin:0}
.prc__cards .prc__card .prc__name,.newsheet__r.prc__card .prc__name{-webkit-line-clamp:3;line-clamp:3}
/* one height for every document card (Sam: "I want all cards the same size"; 26 Sep 2026), sized for the longest name standing whole on
   three lines at the cards' 17 px with the revision under it */
.prc__cards .prc__card{height:112px;min-height:112px;padding-top:12px;padding-bottom:12px}
/* the document's code as its tile: the kind small on the accent over the number, the Upcoming rows' date tile (26 Sep 2026) */
.prc__cards .prc__card .qk-tile.qk-tile--date,.newsheet__r.prc__card .qk-tile.qk-tile--date{width:var(--qk-tile-size);height:var(--qk-tile-size);border-radius:var(--qk-radius-tile);background:var(--qk-tile);color:var(--qk-ink);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1;flex:none;white-space:nowrap}
.prc__cards .prc__card .qk-tile.qk-tile--date small,.newsheet__r.prc__card .qk-tile.qk-tile--date small{font-size:var(--qk-size-tiny);font-weight:var(--qk-weight-semi);letter-spacing:.04em;color:var(--qk-accent);line-height:1}
.prc__cards .prc__card .qk-tile.qk-tile--date b,.newsheet__r.prc__card .qk-tile.qk-tile--date b{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);font-variant-numeric:tabular-nums;line-height:1}
.evc__next{margin-top:var(--qk-space-3)}
.evc__next .qk-pill{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .swp-doc .swp-toc-num{width:28px;height:28px;border-radius:50%;background:var(--qk-soft);color:var(--qk-ink-2);box-shadow:inset 0 0 0 1px var(--qk-edge)}
/* THE EVENT CARD, SPACED (Sam, 22 Sep 2026: "what happened to auditing spacing?"): on the 4/8 rhythm — the kind and its state, 8, the site
   (22/700 at 1.2, never the display face's 0.95 that let it touch its neighbours), 4, the crane and the day, 16, the bar and its count,
   12, what is next as a pill */
.qk-card.evc{padding:var(--qk-space-4) var(--qk-space-4) 18px}
.evc>.qk-line{display:flex;align-items:center;gap:var(--qk-space-2);min-height:22px;margin:0}
.evc>.qk-line .qk-eyebrow{line-height:1}
.evc>.qk-title,.evc>.qk-display{display:block;margin:var(--qk-space-2) 0 0;font-size:var(--qk-size-title-md);font-weight:var(--qk-weight-bold);line-height:1.2;letter-spacing:-.01em}
.evc>.vhead__sub{margin:var(--qk-space-1) 0 0;font-size:15px;line-height:1.35}
.evc>.vhead__prog{margin:var(--qk-space-4) 0 0}
.evc>.evc__next{margin:var(--qk-space-3) 0 0}

/* THE PILL UNDER A LONG NAME (the UI pass, 22 Sep 2026): QK.row({ pillBelow:true }) — the name keeps the whole first line, the sub-line gives
   way to the pill at its right. The pill stands on the same right edge a row's pill always does. */
.qk-row__subline{display:flex;align-items:center;gap:var(--qk-space-2);min-width:0}
.qk-row__subline .qk-row__sub{flex:1;min-width:0}
.qk-row__subline .qk-pill{flex:none}

/* A CRANE OUT OF SERVICE (the UI pass, 22 Sep 2026): the fault is the card's foot — a soft red band on the card's edge, the warning, what is
   wrong in full (it wraps, never cut), when it was reported */
.ccard__fault{display:flex;align-items:flex-start;gap:var(--qk-space-3);margin:var(--qk-space-4) 0 0;padding:14px var(--qk-space-4);background:var(--qk-bad-bg);color:var(--qk-bad);border-radius:0 0 var(--qk-radius-card) var(--qk-radius-card)}
.ccard__fault>.qk-i{flex:none;width:22px;height:22px;margin-top:1px}
.ccard__fault__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ccard__fault__t b{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);color:var(--qk-ink);line-height:1.3}
.ccard__fault__t i{font-style:normal;font-size:var(--qk-size-sub);color:var(--qk-ink-2)}
.ccard--banner:has(.ccard__fault):not(:has(.qk-ccard__facts)) .ccard__body{padding-bottom:0}
/* the visit card's action line reads whole, over two lines at most (the UI pass, 22 Sep 2026: "First Check One Month After Erection" was cut) */
.mbc__s--two{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* the reader's Contents head says its count as every heading does: grey, right after the word (the UI pass, 22 Sep 2026 — it stood at the
   far right in bold) */
.swp-toc__h{justify-content:flex-start;gap:var(--qk-space-2)}
.swp-toc__h .qk-row__main{flex:none}
.swp-toc__h .qk-row__value{font-size:var(--qk-size-sub);font-weight:var(--qk-weight-regular,400);color:var(--qk-ink-3);margin:0}
.pp-tb-sub .pp-rev{margin:0}
/* a section head that is a tap wears the one section heading (the UI pass, 22 Sep 2026 — the crew's board "Monthly 0 of 6" stood grey at 16,
   indented 21, unlike every other heading): full ink, 17/600, on the cards' edge; only the chevron says it folds */
button.qk-section{font-size:17px;font-weight:var(--qk-weight-semi);letter-spacing:-.01em;color:var(--qk-ink);padding:0 0 0 4px;display:flex;align-items:baseline;gap:var(--qk-space-2)}
/* a pill still asking the server shows the shape of what is coming, never "Checking…" (the UI standard §6) */
.qk-pill--skel{min-width:72px;color:transparent!important;background:linear-gradient(90deg,var(--qk-soft) 0%,var(--qk-rule) 50%,var(--qk-soft) 100%)!important;background-size:200% 100%!important;animation:qk-skel 1.2s ease-in-out infinite}
@keyframes qk-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.qk-pill--skel{animation:none}}
/* SETTINGS WEARS THE ONE SECTION HEADING (the UI pass, 22 Sep 2026 — T2: its group labels "You", "Cranes", "Your plan" stood grey at 15,
   a third heading style beside the app's own): full ink, 17/600, on the cards' edge, as every other page */
.set-label,.setpage .qk-section{font-size:17px;font-weight:var(--qk-weight-semi);letter-spacing:-.01em;color:var(--qk-ink);padding-left:4px}
.set-label{padding-bottom:10px}

/* the serial numbers box closes with its X, top right (Sam, 24 Sep 2026) */
.serial__x{position:absolute;top:var(--qk-space-3);right:var(--qk-space-3)}
.qk-dialog:has(.serial__x)>.qk-title{padding-right:var(--qk-space-7)}

/* STEPS — the parts of a job in order (UI standard, "Steps"; 26 Sep 2026). A disc per step joined by a thin rule; the state is the disc
   and one coloured line under the name, never a pill beside it, so a long state never cuts a name. */
.qk-steps{list-style:none;margin:0;padding:0}
.qk-steps{--qk-step-pad:12px}
.qk-step{position:relative}
.qk-step+.qk-step::before{content:"";position:absolute;left:17px;top:calc(var(--qk-step-pad) * -1);height:calc(var(--qk-step-pad) * 2);border-left:2px solid var(--qk-rule)}
.qk-step--done+.qk-step::before{border-left-color:var(--qk-ok)}
.qk-step__hit{display:flex;align-items:center;gap:var(--qk-space-3);width:100%;padding:var(--qk-step-pad) 0;background:none;border:0;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qk-step__disc{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:var(--qk-size-sub);font-weight:var(--qk-weight-bold);font-variant-numeric:tabular-nums;color:var(--qk-ink-3);background:var(--qk-card);box-shadow:inset 0 0 0 2px var(--qk-rule);position:relative;z-index:1}
.qk-step__disc svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qk-step--done .qk-step__disc{background:var(--qk-ok);color:var(--qk-ok-fg);box-shadow:none}
.qk-step--next .qk-step__disc{color:var(--qk-ink);box-shadow:inset 0 0 0 2px var(--qk-accent)}
.qk-step__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qk-step__name{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);color:var(--qk-ink);line-height:1.25}
.qk-step--todo .qk-step__name{color:var(--qk-ink-2)}
.qk-step__status{font-size:var(--qk-size-sub);font-weight:var(--qk-weight-medium);color:var(--qk-ink-3);line-height:1.3}
.qk-step__status:empty{display:none}
.qk-step__status--ok{color:var(--qk-ok)}   /* the green text token; --qk-ok-fg is the writing ON green (it drew the state white on the card) */
.qk-step__status--warn{color:var(--qk-warn)}
.qk-step__status--bad{color:var(--qk-bad)}
.qk-step .qk-chev,.qk-step__hit>svg:last-child{flex:none;color:var(--qk-ink-3)}
/* the job card as steps (26 Sep 2026): the steps under the bar with air, then the job's buttons on one wrapping line under a hairline */
.bnd__job .bnd__job__steps{margin-top:var(--qk-space-4);padding-top:var(--qk-space-2);border-top:1px solid var(--qk-rule)}
.bnd__job .bnd__job__steps{--qk-step-pad:12px}
.bnd__job__acts>*{flex:1 1 auto;justify-content:center}   /* each row of buttons fills the card's width, never a ragged edge */
.bnd__job__acts{display:flex;flex-wrap:wrap;gap:var(--qk-space-2);margin-top:var(--qk-space-2);padding-top:var(--qk-space-4);border-top:1px solid var(--qk-rule)}

/* ACTIONS (QK.acts, 26 Sep 2026): equal tiles, the icon in its seat over a two-line label */
.qk-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--qk-space-2)}
.qk-act{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:92px;padding:14px 6px 12px;border:0;border-radius:16px;background:var(--qk-seg);color:var(--qk-ink);font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .12s ease}
.qk-act:active{transform:scale(.97)}
.qk-act__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--qk-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge)}
.qk-act__ic svg{width:20px;height:20px}
.qk-act__l{font-size:var(--qk-size-sub);font-weight:var(--qk-weight-semi);line-height:1.25;color:var(--qk-ink)}
/* the job card's lower half: the actions, then the documents still owed as plain lines in the card (never a card in a card) */
.bnd__job__top{margin-left:auto;display:flex;gap:6px}
.bnd__job__top .qk-btn--mini{padding:0 13px;height:var(--qk-chip);font-size:15px;gap:6px}   /* All events and PDF are the small button the PDF wears on Service and the OHS manual (the consistency audit, 26 Sep 2026) */
.bnd__job .qk-acts{margin-top:var(--qk-space-3);padding-top:var(--qk-space-4);border-top:1px solid var(--qk-rule)}
.bnd__job__docs{margin-top:var(--qk-space-4);padding-top:var(--qk-space-3);border-top:1px solid var(--qk-rule)}
.bnd__job__docs>.qk-section{margin:0 0 var(--qk-space-1)}
.bnd__job__docs>.qk-rows{background:none;box-shadow:none;border-radius:0;overflow:visible}
.bnd__job__docs>.qk-rows .qk-row{padding-left:0;padding-right:0}
.fw__card{padding-top:var(--qk-space-1);padding-bottom:var(--qk-space-1)}
/* REQUIRED, QUIETLY (26 Sep 2026): on a form where most lines are still to fill, "Required" is a small amber word after a dot, not a
   tinted pill on every line - the lines read as a list, not a wall of tags */
.qk-pill.qk-pill--req{background:none;padding:0;gap:6px;color:var(--qk-ink-3);font-size:var(--qk-size-sub);font-weight:var(--qk-weight-regular,400)}   /* grey, the small size, no dot (the whole-app polish, 26 Sep 2026): a new record is all "Required", and amber on every line shouted; a refused filing names what is missing */
/* THE PLACEHOLDER AS A LITTLE CERTIFICATE (26 Sep 2026; Sam 24 Sep: "a nice little place holder"): a small white sheet with the ribbon
   and three ruled lines on the tinted ground, instead of a grey block; the state pill stands at the top so it never sits on the words */
.cert-tile__doc--none{background:linear-gradient(160deg,var(--qk-field),var(--qk-on-pill))}
.cert-tile__sheet{display:flex;flex-direction:column;align-items:center;gap:4px;width:52px;padding:8px 0 9px;border-radius:5px;background:var(--qk-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);color:var(--qk-accent)}
.cert-tile__doc .cert-tile__sheet .qk-i{width:18px;height:18px;stroke-width:1.8}
.cert-tile__sheet i{display:block;width:30px;height:2px;border-radius:1px;background:var(--qk-rule)}
.cert-tile__sheet i:last-child{width:20px}
.cert-tile__pill{top:8px;bottom:auto}
/* the event cards, one height (Sam, 26 Sep 2026): the date at the right of the kind line, the crane on one line, the Next row held on a finished event */
.evc .qk-line{width:100%}
.evc__day{margin-left:auto;font-size:var(--qk-size-sub);color:var(--qk-ink-3);white-space:nowrap}
.evc__crane{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.35em}
.evc__next--none{visibility:hidden}
.evc__nopill{visibility:hidden;width:0;padding-left:0;padding-right:0;margin-left:calc(var(--qk-air) * -1)}

/* dropdown values in the text face: tabular figures widen the hyphen ("R275 - 12RB", "Condition - based" in light mode; the whole-app polish, 26 Sep 2026) */
select,select.qk-field__value{font-variant-numeric:normal}

/* the picker field's chevron: the dropdown's own, 14 wide, 8 from its value (the whole-app polish, 26 Sep 2026) */
.qk-field__chev{width:14px;height:14px;flex:none;margin-left:8px;fill:none;stroke:var(--qk-ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;align-self:center}
.qk-field--stack>.qk-field__chev{position:absolute;right:var(--qk-space-5);top:50%;margin:0}

/* Add a crane: Standing is a row with its two choices at the right; More dates is the small button, not a full-width bar (26 Sep 2026) */
.cstatus .qk-field{align-items:center}
.cstatus #cStatusChips{margin:0 0 0 auto;flex:none;gap:6px;flex-wrap:nowrap}
.qk-more>summary.qk-btn--mini{width:auto;display:inline-flex;align-self:flex-start}
/* SETTINGS ON THE STANDARD'S EDGE (the whole-app polish, 26 Sep 2026: Settings rows stood 16 in with hairlines to the card's edge, every
   other grouped list 20 in with hairlines inset 20 both sides) */
.set-card>.set-row,.set-card>.qk-row,.set-card>.qk-rows>.qk-row,.set-card>#feelSwitches>.qk-row,.set-card>#faceBox>.qk-row{padding-left:20px;padding-right:20px}
.set-card>*+*::before,.set-card>.qk-rows>.qk-row+.qk-row::before,.set-card>#feelSwitches>.qk-row+.qk-row::before,#setList>.set-group--join+.set-group--join>.set-card::before{left:20px;right:20px}
/* Add a crane's title on the sheets' 16 edge, as Start a rental and every other sheet (the whole-app polish, 26 Sep 2026) */
@media (max-width:1279px){html body #addCrane.bnd>.qk-hdr.qk-hdr--ground{padding-left:16px}}
/* the + menu and the event picker wear the kit's 40 tile, as every list card does (the whole-app polish, 26 Sep 2026) */
#newList .newsheet__big .newsheet__r .qk-tile,.occ .newsheet__big .newsheet__r .qk-tile{width:var(--qk-tile-size);height:var(--qk-tile-size);border-radius:var(--qk-radius-tile);background:var(--qk-tile);color:var(--qk-tile-ink)}
#newList .newsheet__big .newsheet__r .qk-tile .qk-i,.occ .newsheet__big .newsheet__r .qk-tile .qk-i{width:22px;height:22px}
/* THE + (26 Sep 2026): the crane actions as large tiles two across, the rest a grouped card */
#newList .plus-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#newList .plus-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;min-height:116px;padding:16px 16px 18px;border:0;border-radius:var(--qk-radius-card);background:var(--qk-card);box-shadow:var(--qk-shadow),inset 0 0 0 1px var(--qk-edge);color:var(--qk-ink);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
#newList .plus-tile:active{transform:scale(.97)}
#newList .plus-tile .qk-tile{width:var(--qk-tile-size);height:var(--qk-tile-size);border-radius:var(--qk-radius-tile);background:var(--qk-tile);color:var(--qk-tile-ink)}
#newList .plus-tile .qk-tile .qk-i{width:22px;height:22px}
#newList .plus-tile__t{font-size:var(--qk-size-row);font-weight:var(--qk-weight-semi);line-height:1.25;letter-spacing:-.01em}
#newList .qk-rows .plus-row .qk-row__sub{white-space:normal}
/* THE + PREMIUM PASS (Sam, 26 Sep 2026: "You can do better I want a premium pass"): the crane tiles carry the brand's gold on a soft
   gold seat and say what they cover; the rows' icons sit on the kit's small seat; the type a touch tighter */
#newList .plus-tile{min-height:132px;padding:16px 16px 16px;gap:16px}
#newList .plus-tile .qk-tile{background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
#newList .plus-tile__w{display:flex;flex-direction:column;gap:3px;min-width:0}
#newList .plus-tile__t{letter-spacing:-.015em}
#newList .plus-tile__s{font-size:var(--qk-size-sub);line-height:1.3;color:var(--qk-ink-3)}
#newList .qk-rows .plus-row .qk-tile{width:32px;height:32px;border-radius:9px;background:var(--qk-tile);color:var(--qk-tile-ink)}
#newList .qk-rows .plus-row .qk-tile .qk-i{width:18px;height:18px}
#newList .qk-rows .plus-row{gap:14px}
#newList .plus-tile{justify-content:flex-start;gap:14px}   /* the name under the seat, level across a row whatever the line under it */
/* the compact + tiles (Sam, 26 Sep 2026: "This is ugly", of the grouped rows): the same card, the gold seat beside the name, one height */
#newList .plus-tile--compact{flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:0;height:96px;padding:14px 14px 0;gap:12px}
#newList .plus-tile--compact .qk-tile{width:34px;height:34px;border-radius:10px;flex:none}
#newList .plus-tile--compact .qk-tile .qk-i{width:19px;height:19px}
#newList .plus-tile--compact .plus-tile__t{font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#newList .plus-tile--compact .plus-tile__w{width:100%}
/* an odd one out takes the row, so the grid ends square */
#newList .plus-grid--compact>.plus-tile:last-child:nth-child(odd){grid-column:1 / -1}
/* the binder's document cards one height, with or without the line under the name (Sam, 26 Sep 2026: "Yes" to one size) */
html body .bnd__groups .bnd__d__b>.bnd__f{min-height:86px;box-sizing:border-box}
/* SERVICE ON THE BOARD'S LANGUAGE (Sam, 26 Sep 2026: "Yes", "Do better"): no rings; the crane's tile, its name and site and pills, then its bar */
.svcx .svcx__tile{width:var(--qk-tile-size);height:var(--qk-tile-size);border-radius:var(--qk-radius-tile);background:var(--qk-tile);color:var(--qk-tile-ink);flex:none}
.svcx .svcx__tile svg{width:26px;height:26px}
.svcx .svcx__prog{display:flex;align-items:center;gap:12px;margin-top:14px;width:100%}
.svcx .svcx__prog .mbc__bar{flex:1;margin:0}
.svcx .svcx__cnt{flex:none;font-size:var(--qk-size-sub);font-weight:var(--qk-weight-semi);color:var(--qk-ink-2);font-variant-numeric:tabular-nums}
.svcx .svcx__main{flex-direction:column;align-items:stretch}
.svcsum2 .vhead__prog{margin-top:14px}
/* an odd last stat takes the row, so the tiles end square (the whole-app polish, 26 Sep 2026) */
@media (max-width:780px){.crn-stats>:last-child:nth-child(odd){grid-column:1 / -1}}

/* =====================================================================================================================================
   THE FINISH (Sam, 26 Sep 2026: "What can we do to make this less bland and give it a nice premium look?"). One layer over the kit,
   nothing moved: cards catch the light at their top edge and stand off the ground; the card at the head of a screen carries a soft gold
   glow from its corner and a gold eyebrow, so every screen has one place the eye lands; the seat of a thing you can open wears the
   brand's gold, as the + does; the numbers that matter are set to be read at a glance. State colours stay red, amber and green.
   ===================================================================================================================================== */
[data-theme="dark"]{--qk-sheen:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 44%);--qk-lift:inset 0 1px 0 rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.35),0 14px 30px -20px rgba(0,0,0,.9)}
:root:not([data-theme="dark"]){--qk-sheen:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 40%);--qk-lift:0 1px 2px rgba(28,36,48,.06),0 10px 28px -12px rgba(28,36,48,.14)}
.qk-card,.qk-crane-head,.lst__cards .lst__card,.prc__cards .prc__card,.mb .mbc,.svc-crane.svcx,#newList .plus-tile,.qk-body .qk-rows,.qk-pane__body .qk-rows,.qk-host .qk-rows,.crn-stat{
  background-image:var(--qk-sheen);box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge)}
/* the hero: a soft gold light from the top right, the eyebrow in gold */
.vhead,.svcsum2,.qk-crane-head,#ppHead{
  background-image:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--qk-accent) 12%,transparent),transparent 58%),var(--qk-sheen)}
.vhead .qk-eyebrow,.svcsum2 .qk-eyebrow,.qk-crane-head .qk-eyebrow,#ppHead .qk-eyebrow{color:var(--qk-accent)}
/* the seat of a thing you open wears the gold */
.lst__cards .lst__card .qk-tile,.svcx .svcx__tile,.prc__cards .prc__card .qk-tile.qk-tile--date,.newsheet__r.prc__card .qk-tile.qk-tile--date{
  background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
.prc__cards .prc__card .qk-tile.qk-tile--date b{color:var(--qk-ink)}
/* the figures that matter */
.svcsum2 .qk-display{font-size:30px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.crn-stat__v{font-size:24px;font-weight:var(--qk-weight-bold,700);letter-spacing:-.02em}
.crn-stat--ok .crn-stat__v,.crn-stat--warn .crn-stat__v,.crn-stat--bad .crn-stat__v{font-size:22px}
.newsheet__big.lst__cards .lst__card .qk-tile{background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}

/* EVERY ICON IN A ROW SITS ON THE GOLD SEAT (Sam, 26 Sep 2026: "Assess every screen"; the + menu's seat, which he approved, replacing
   bare line icons and grey seats in Settings, Help, People, Alerts, the binder groups, Work after an event and every Add row) */
.qk-rows .qk-row .qk-tile:not(.qk-tile--date):not(.qk-tile--bad):not(.qk-tile--warn):not(.qk-tile--ok),.set-card .qk-row .qk-tile,.set-card>.set-row .qk-tile,.bnd__groups .qk-disc>summary .qk-tile,.occ .newsheet__big .newsheet__r .qk-tile{
  width:34px;height:34px;min-width:34px;border-radius:50%;background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge);flex:none}   /* never a state tile: a red, amber or green seat keeps its colour and size (26 Sep 2026: the crew's day with an issue went gold) */
.qk-rows .qk-row .qk-tile:not(.qk-tile--date):not(.qk-tile--bad):not(.qk-tile--warn):not(.qk-tile--ok) .qk-i,.set-card .qk-row .qk-tile .qk-i,.set-card>.set-row .qk-tile .qk-i,.bnd__groups .qk-disc>summary .qk-tile .qk-i,.occ .newsheet__big .newsheet__r .qk-tile .qk-i{width:19px;height:19px;stroke:currentColor}
.qk-rows .qk-row .qk-tile.qk-tile--crane svg,.bnd__groups .qk-disc>summary .qk-tile svg{width:22px;height:22px}
.qk-rows .qk-row{gap:14px}

/* ONE TYPE SCALE (Sam, 26 Sep 2026: "I want a full ui premium polish done. Assess everything. Fonts, weights, spacing"): the sweep measured
   twelve sizes in use (9, 12, 13, 14, 15, 16, 17, 20, 22, 24, 26, 30); the app now speaks seven - 30 the hero figure, 24 a page title,
   22 a card title or a stat, 17 a name or a value, 15 a line under it, 13 a pill or a label, 12 an eyebrow or a tab - each step clearly
   apart from the next. (The 14s became 15, the 16s 17, the 20s 22, the 26s 24.) */
/* Settings' own row icons on the gold seat too, and one switch: gold when on (26 Sep 2026: two greens, neither the brand) */
.set-row__ic{width:34px;height:34px;border-radius:10px;background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
.set-row__ic .qk-i{width:19px;height:19px}
.qk-switch--on,.qk-row--switch input[type="checkbox"]:checked~.qk-switch,.set-card .qk-switch--on,.set-card .qk-row--switch input[type="checkbox"]:checked~.qk-switch{background:var(--qk-accent)}
/* ONE INSIDE EDGE (26 Sep 2026: the sweep found 14 beside 16 and 20): cards 16, a grouped list's rows 20 */
html body .bnd__groups .bnd__d__b>.bnd__f{padding-left:16px;padding-right:16px}
.qk-rows .qk-row.qk-row--soft{padding-left:20px;padding-right:20px}
#newList .plus-tile--compact{padding-left:16px;padding-right:16px}
.qk-crane-head{padding:16px}
/* the page head card (26 Sep 2026): its steps under the bar on Home, the space between it and the list */
.phead+*{margin-top:4px}
.phead .fw__steps{margin-top:16px;border-top:1px solid var(--qk-rule);padding-top:8px}
.phead .fw__steps .qk-card{background:none;box-shadow:none;padding:0}
/* Settings opens on the account's head card: the card, the gold light, the gold eyebrow (26 Sep 2026) */
.set-profile{background-color:var(--qk-card);background-image:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--qk-accent) 12%,transparent),transparent 58%),var(--qk-sheen);border-radius:var(--qk-radius-card);box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge);padding:16px;margin-bottom:8px;text-align:left}
.set-profile .qk-eyebrow{color:var(--qk-accent);display:block;margin-bottom:4px}
.set-profile__main{display:flex;flex-direction:column;min-width:0}
/* THE ONE EMPTY STATE (26 Sep 2026): the section's mark on the gold seat, one line, its action under it - never a grey "No ..." slab */
.qk-empty__tile .qk-tile{width:44px;height:44px;border-radius:12px;background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
.qk-empty__tile .qk-tile .qk-i{width:22px;height:22px}
.qk-empty__tile{display:flex;justify-content:center;margin-bottom:10px}
/* HOME'S LISTS AS CARDS (the assessment, 26 Sep 2026: Enquiries and Needs attention were plain rows under a heading): each item its own
   card on the gold seat, one height, the Clients list's own look; the desktop keeps its tables */
@media (max-width:1279px){
  .dash-panels .qk-rows--rich{background:none;background-image:none;box-shadow:none;display:flex;flex-direction:column;gap:10px;overflow:visible}
  .dash-panels .qk-rows--rich>.qk-row{background-color:var(--qk-card);background-image:var(--qk-sheen);border-radius:var(--qk-radius-card);box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge);min-height:76px;padding:12px 16px}
  .dash-panels .qk-rows--rich>.qk-row::before{display:none}
  .dash-panels .qk-rows--rich>.qk-row .qk-tile:not(.qk-tile--date){width:40px;height:40px;border-radius:var(--qk-radius-tile)}
  .dash-panels .qk-rows--rich>.qk-row .qk-row__sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* the crane card: its model's mark on the gold seat, and every card in a list one height, the tallest's (Sam: "I want all cards the same size") */
.ccard__kind .qk-tile{background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
.qk-ccard__list{display:grid;grid-auto-rows:1fr;gap:var(--qk-space-3)}
.qk-ccard__list>*{min-height:0}
.qk-ccard__list>*>.qk-ccard{height:100%}
/* the record's big figure, the Service month's size (26 Sep 2026) */
.rechead__n{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums;color:var(--qk-ink)}
.rechead .vhead__prog{margin-top:12px}
/* THE LOGO ON ITS OWN LAYER (Sam, 26 Sep 2026: "When I'm scrolling fast in the app the qnq logo flickers"): the logo is sticky inside the
   pinned band, and every scroll repaints the band around it; on its own compositor layer the phone moves it without repainting it. */
@media (max-width:1023.98px){
  #opsHdr.qk-hdr--brand .qk-hdr__title--brand{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
}
/* THE PACKAGE SHEET (Sam, 26 Sep 2026, "Yes to all"): the QR with the seal centred on its own card, the site under it in the
   title's size, then Email | Text, one field, Send, and the Opened list. */
.pks{display:flex;flex-direction:column;gap:14px}
.pks .pks__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 20px 20px}
.pks__qr{width:220px;height:220px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--qk-edge)}
.pks__qr svg{display:block;width:100%;height:100%}
.pks__site{margin-top:14px;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--qk-ink)}
.pks__crane{margin-top:3px}
.pks .pks__via{align-self:stretch}
.pks .pks__send{width:100%}
.pks .qk-msg:empty{display:none}
#pksOpened .qk-section{margin:8px 2px 10px}
/* the package's card wears the head card's finish: the soft gold light from the top right, the gold eyebrow, the QR on its own
   white plate with a hairline and a lift, so it reads as the one thing on the sheet (Sam, 26 Sep 2026: "Can you make it even better") */
.pks .pks__card{background-image:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--qk-accent) 12%,transparent),transparent 58%),var(--qk-sheen);padding-top:18px}
.pks .pks__card .qk-eyebrow{color:var(--qk-accent);margin:0 0 14px}
.pks__qr{width:232px;height:232px;border-radius:20px;padding:6px;box-sizing:border-box;box-shadow:0 0 0 1px var(--qk-edge),0 1px 2px rgba(16,24,40,.06),0 14px 30px -16px rgba(16,24,40,.28)}
/* THE PACKAGE AS A PASS (Sam, 26 Sep 2026: "Is that the best you can do"): the house navy in both themes, the soft gold light from
   the top right, the mark in white and the crane in gold, the QR on its own white plate, the site large, and a foot of three
   figures under a perforation. */
.pks__pass{position:relative;border-radius:24px;overflow:hidden;color:#fff;text-align:center;padding:18px 20px 0;
  background:radial-gradient(120% 70% at 100% 0%,rgba(254,190,1,.20),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(90,140,220,.16),transparent 60%),linear-gradient(160deg,#0B3468 0%,#062A55 55%,#041E3D 100%);
  box-shadow:0 1px 2px rgba(4,30,61,.25),0 18px 40px -18px rgba(4,30,61,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.pks__top{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.pks__logo{height:26px;width:auto;display:block}
.pks__tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FEBE01}
.pks .pks__qr{width:236px;height:236px;margin:0 auto;border-radius:22px;padding:8px;box-sizing:border-box;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 16px 34px -14px rgba(0,0,0,.55)}
.pks__site{margin-top:18px;font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.015em;color:#fff}
.pks__addr{margin-top:4px;font-size:15px;color:rgba(255,255,255,.66)}
.pks__foot{display:grid;grid-template-columns:1fr 1fr 1.5fr;margin:20px -20px 0;padding:14px 8px 16px;position:relative;
  border-top:1.5px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.035)}
.pks__foot::before,.pks__foot::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--qk-sheet,var(--qk-ground))}
.pks__foot::before{left:-10px}.pks__foot::after{right:-10px}
.pks__foot>div{display:flex;flex-direction:column;gap:3px;align-items:center}
.pks__foot b{font-size:19px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pks__foot span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.58);white-space:nowrap}
/* the perforation's notches are cut out of the pass (a mask), so the sheet shows through them in either theme; the lift is a
   drop shadow on a wrapper, which follows the cut */
.pks__lift{filter:drop-shadow(0 1px 2px rgba(4,30,61,.22)) drop-shadow(0 16px 26px rgba(4,30,61,.30))}
.pks .pks__pass{box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-mask:radial-gradient(circle at 0 calc(100% - 74px),transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - 74px),transparent 10px,#000 10.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 calc(100% - 74px),transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - 74px),transparent 10px,#000 10.5px) right/51% 100% no-repeat}
.pks .pks__foot{height:74px;box-sizing:border-box;padding:13px 8px 0}
.pks .pks__foot::before,.pks .pks__foot::after{display:none}
#sgoSigned .qk-section{margin:8px 2px 10px}
.bnd__job__opt{margin-top:var(--qk-space-4)}
.bnd__job__opt>.qk-section{margin:0 2px 10px}
/* READY FOR SERVICE, ONE CARD (Sam, 27 Sep 2026: "Polish that. It looks cheap"): the gold eyebrow, the count large, the bar, then each
   item with a round mark - green tick on file, amber ring still to come - its whole name and its state under it */
.glc{margin-top:var(--qk-space-4);padding:18px 18px 8px;background-image:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--qk-accent) 12%,transparent),transparent 58%),var(--qk-sheen)}
.glc .qk-eyebrow{color:var(--qk-accent)}
.glc__n{margin:6px 0 10px;font-size:15px;color:var(--qk-ink-2,var(--qk-muted))}
.glc__n b{font-size:24px;font-weight:700;color:var(--qk-ink);font-variant-numeric:tabular-nums;margin-right:2px}
.glc__rows{margin-top:10px}
.glc__r{display:flex;align-items:center;gap:14px;width:100%;padding:12px 0;background:none;border:0;border-top:1px solid var(--qk-hair,var(--qk-edge));text-align:left;color:inherit;font:inherit;cursor:pointer}
.glc__r .qk-i{flex:none;width:16px;height:16px;color:var(--qk-muted);opacity:.7}
.glc__m{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box}
.glc__m.is-on{background:var(--qk-ok);color:#fff}
.glc__m.is-on .qk-i{width:15px;height:15px;color:#fff;opacity:1;stroke-width:3}
.glc__m.is-off{border:2px solid color-mix(in srgb,var(--qk-warn) 80%,transparent)}
.glc__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.glc__t b{font-size:17px;font-weight:600;line-height:1.3;color:var(--qk-ink)}
.glc__t em{font-style:normal;font-size:15px;color:var(--qk-muted)}
.glc__t em.is-due{color:var(--qk-warn)}
/* ALSO FOR THIS JOB as tiles, the + menu's look: a gold seat, the name, the state under it */
.optg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.optg__t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:112px;padding:14px;border:0;border-radius:var(--qk-radius-card,16px);background-color:var(--qk-card);text-align:left;color:inherit;font:inherit;cursor:pointer;
  background-image:var(--qk-sheen);box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge)}
.optg__seat{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
.optg__seat .qk-i{width:20px;height:20px}
.optg__t b{font-size:16px;font-weight:600;line-height:1.25;color:var(--qk-ink)}
.optg__t small{font-size:14px;color:var(--qk-muted)}
.optg__t.is-ok small{color:var(--qk-ok)}
.optg__t.is-part small{color:var(--qk-warn)}
.optg{grid-template-columns:repeat(2,minmax(0,1fr))}.optg__t{min-width:0}.optg__t b{overflow-wrap:anywhere}
.optg__t b.qk-row__name{white-space:normal;overflow:visible;text-overflow:clip;display:block;max-width:100%}
.optg__t{min-height:150px}

/* THE ICON SEAT, ONE SETTING (Sam, 27 Sep 2026, of the gold seat in dark mode: "Is this color the best to use?" ... "I want premium and
   not corny" ... "B"): light keeps its pale gold; dark is graphite with a faint top light and a brass glyph - gold as a detail, never a
   tint over grey (the mix read as muddy olive) */
:root{--qk-seat:color-mix(in srgb,var(--qk-accent) 14%,transparent);--qk-seat-ink:var(--qk-accent);--qk-seat-edge:none}
[data-theme="dark"]{--qk-seat:linear-gradient(180deg,#2C2C2C,#242424);--qk-seat-ink:#E9C85A;--qk-seat-edge:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05)}
/* ONE TILE ANATOMY ON THE JOB CARD (Sam, 27 Sep 2026: "Symmetrical. Matching. Perfect."): the optional records take the action tiles'
   shape - a round seat, the name centred under it, its state beneath - two to a row, and an odd last tile centred on a row of its own;
   every tappable tile's seat is the one icon seat (graphite and brass in dark, pale gold in light) */
.optg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.optg__t{flex:0 0 calc((100% - 10px) / 2);min-height:128px;align-items:center;justify-content:flex-start;text-align:center;padding:16px 10px 14px;gap:3px}
.optg__seat{width:44px;height:44px;border-radius:50%;margin:0 0 8px}
.optg__t b.qk-row__name{text-align:center}
.qk-act__ic{background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
.optg__t{background:var(--qk-seg);background-image:none;box-shadow:none}
/* the flawless pass (27 Sep 2026): Ready for service is a flat card (the gold light is for a screen's head card only); a done line's
   state is green; an optional record's state takes its colour */
.glc{background-image:var(--qk-sheen)}
.glc__t em:not(.is-due){color:var(--qk-ok)}
.bnd__job__opt--rec .qk-row__sub.is-ok{color:var(--qk-ok)}
.bnd__job__opt--rec .qk-row__sub.is-part{color:var(--qk-warn)}
.optg{justify-content:flex-start}
.optg__t{min-height:112px;justify-content:center;padding:14px 10px}.optg__seat{margin:0 0 10px}
.ccard__banner{flex:none}   /* the banner keeps its 132 inside a card of one height (the flawless pass, 27 Sep 2026: it had shrunk to 46 and cut the site) */
.ccard__foot__bar.svc-prog,.ccard__foot__n{align-self:center}.ccard__foot__n{line-height:1}   /* the bar and its count on one line (the flawless pass, 27 Sep 2026) */
.qk-pill.is-ghost{visibility:hidden}   /* keeps a card line its height when there is no state to say */
/* THE CRANE'S FIGURES IN THE TILE FAMILY (Sam, 27 Sep 2026: "I like this look better" ... "Update the entire app" ... "Make sure the
   entire app has the same feel"): Hours, Standing and Last service are three equal tiles on the grey of the job card's tiles, flat, the
   words left-aligned; the erected day stays in the Site panel below, so Standing says only how long */
.crn-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.crn-stats>:last-child:nth-child(odd){grid-column:auto}
.crn-stat{min-width:0;min-height:96px;padding:14px 12px;background:var(--qk-seg);background-image:none;box-shadow:none}
.crn-stat:active{background:var(--qk-soft)}
.crn-stat__v{font-size:20px;white-space:nowrap}
.crn-stat--ok .crn-stat__v,.crn-stat--warn .crn-stat__v,.crn-stat--bad .crn-stat__v{font-size:17px;gap:6px}
.crn-stat__dot{width:8px;height:8px}
.crn-stat__l,.crn-stat__s{overflow-wrap:anywhere}
.crn-fact--go .qk-field__chev{display:none}   /* one arrow on a row that opens (the flawless pass, 27 Sep 2026: the kit's down arrow sat beside the row's chevron) */
/* "Is this perfection in every way?" (Sam, 27 Sep 2026) - an empty figure is quiet, never set as big as a number; in light the map
   fades into the card and the site reads in ink (white on a grey fade read muddy) */
.crn-stat.is-none .crn-stat__v{font-size:17px;font-weight:var(--qk-weight-semi);color:var(--qk-ink-3)}
:root:not([data-theme="dark"]) .ccard__banner::after{height:96px;background:linear-gradient(rgba(255,255,255,0),var(--qk-card) 88%)}
:root:not([data-theme="dark"]) .ccard__place{color:var(--qk-ink);text-shadow:none}
:root:not([data-theme="dark"]) .ccard__place i{color:var(--qk-ink-2);opacity:1}
/* the crane page's Rental and Client rows read as the Details rows below them: name in ink on the left, value quiet on the right,
   the one thin chevron (27 Sep 2026) */
.crn-fact:not(.qk-field--stack){display:flex;align-items:center;gap:var(--qk-space-3);min-height:56px}
.crn-fact:not(.qk-field--stack) .qk-field__label{flex:none;font-size:var(--qk-size-row);color:var(--qk-ink);font-weight:var(--qk-weight-regular,400)}
.crn-fact:not(.qk-field--stack) .qk-field__value{flex:1;min-width:0;text-align:right;font-size:var(--qk-size-row);color:var(--qk-ink-3);font-weight:var(--qk-weight-regular,400)}
.crn-fact--go::after{width:8px;height:8px;border-width:0 1.5px 1.5px 0;border-color:var(--qk-ink-4,var(--qk-ink-3));opacity:.75}
.crn-fact.crn-fact--go:not(.qk-field--stack){padding-right:46px}.crn-fact--go:not(.qk-field--stack)::after{right:24px}
/* THE HOME CARD'S FIGURES ARE THE CRANE PAGE'S TILES (Sam, 27 Sep 2026: "Yes 100%" - one fact, one look): grey tiles side by side,
   the label above the figure as on the crane page; the Add details plus sits on the one icon seat, not a bright gold disc */
.ccard .qk-ccard__facts{gap:10px;padding-top:0;border-top:0}
.ccard .qk-ccard__facts>span,.ccard .qk-ccard__facts>span:last-child{flex:1 1 0;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding:12px 12px 14px;border-radius:var(--qk-radius-card);background:var(--qk-seg)}
.ccard .qk-ccard__facts i{font-size:13px;margin:0}
.ccard .qk-ccard__facts b{font-size:20px;font-weight:var(--qk-weight-bold,700);letter-spacing:-.02em}
@media (min-width:768px){.ccard .qk-ccard__facts{max-width:none}}
.ccard .qk-ccard__add__plus{background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge)}
/* MONEY — COLEMAN'S DASHBOARD (Sam, 27 Sep 2026: "Calvin's dashboard but for Coleman" ... "Make it malleable for every aspect of his
   business"): the head card is the period's profit; the period capsule with its arrows under it; four grey tiles two by two (the crane
   page's family); the months as paired bars, revenue in the accent beside costs in grey; lists in the kit's rows */
.mon-hero .qk-display{font-variant-numeric:tabular-nums}
.mon-hero.is-loss .qk-display{color:var(--qk-bad)}
.mon-per{display:flex;align-items:center;gap:10px}
.mon-per .qk-segc{flex:1;min-width:0}
.mon-step{display:flex;gap:4px;flex:none}
.mon-step .qk-tap{width:40px;height:40px;border-radius:50%;background:var(--qk-seg)}
.crn-stats.mon-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.mon-stat .crn-stat__v{font-size:20px;font-variant-numeric:tabular-nums}
.mon-stat--bad .crn-stat__s{color:var(--qk-bad)}
.mon-stat--warn .crn-stat__s{color:var(--qk-warn)}
.mon-row .qk-row__value{font-variant-numeric:tabular-nums;color:var(--qk-ink);font-weight:var(--qk-weight-semi)}
.mon-row.is-loss .qk-row__value{color:var(--qk-bad)}
.mon-total .qk-row__name,.mon-total .qk-row__value{font-weight:var(--qk-weight-bold,700);color:var(--qk-ink)}
.mon-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mon-head .qk-section{margin:0}
.mon-chart{padding:16px 12px 12px}
.mon-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;height:132px}
.mon-bar{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.mon-bar__pair{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.mon-bar__pair i{display:block;width:40%;max-width:12px;min-height:2px;border-radius:3px 3px 0 0}
.mon-bar__rev{background:var(--qk-accent)}
.mon-bar__cost{background:var(--qk-ink-3);opacity:.55}
.mon-bar__m{font-size:11px;color:var(--qk-ink-3);text-align:center}
.mon-key{display:flex;gap:16px;margin-top:12px;font-size:13px;color:var(--qk-ink-3)}
.mon-key span{display:inline-flex;align-items:center;gap:6px}
.mon-key i{display:inline-block;width:10px;height:10px;border-radius:3px}
.mon-none{padding:18px}
.mon-sheet .mon-line{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--qk-seg);background-image:none;box-shadow:none}
.mon-line__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mon-state{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mon-state b{font-size:24px;font-weight:var(--qk-weight-bold,700);font-variant-numeric:tabular-nums}
.qk-btn.is-danger{color:var(--qk-bad)}
/* MONEY ON A DESKTOP (Sam, 27 Sep 2026: "Go look at how optimized Calvin's dashboard on desktop is too"): the width is used - the
   profit and the four figures in one row, the months beside what needs attention, the three breakdowns side by side, the invoices
   beside the costs; the period controls stand at the top right */
@media (min-width:1024px){
  body.desk-table #tab-money{width:auto}
  .mon{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;align-items:start}
  .mon>.mon-b{min-width:0;display:flex;flex-direction:column;gap:10px}
  .mon-b--hero{grid-column:1 / -1;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .mon-b--hero .mon-hero{grid-column:1;margin:0}
  .mon-b--hero .mon-per{grid-column:2;min-width:360px}
  .mon-b--tiles{grid-column:1 / -1}
  .crn-stats.mon-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mon-b--months{grid-column:span 4}
  .mon-b--att{grid-column:span 2}
  .mon-b--hero{order:0}.mon-b--tiles{order:1}.mon-b--months{order:2}.mon-b--att{order:3}.mon-b--cranes{order:4}.mon-b--types{order:5}.mon-b--kinds{order:6}.mon-b--inv{order:7}.mon-b--cost{order:8}.mon-b--foot{order:9}
  .mon-b--cranes,.mon-b--types,.mon-b--kinds{grid-column:span 2}
  .mon-b--inv,.mon-b--cost{grid-column:span 3}
  .mon-b--foot{grid-column:1 / -1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .mon-b--foot>.qk-section{grid-column:1 / -1}
  .mon-bars{height:220px}
  .mon-bar__pair i{max-width:18px}
}
/* MONEY, THE DESKTOP PROGRAM (Sam, 27 Sep 2026: "It needs the same caliber as Calvin" ... "I want a premium desktop program"):
   the head with the period at the right, four figure cards, the breakdown card with its ring and ranked bars, the months beside
   Needs attention, the tables; one chart palette, the accent first */
:root{--mon-c1:var(--qk-accent);--mon-c2:rgb(28,52,86);--mon-c3:rgb(52,120,190);--mon-c4:rgb(40,140,90);--mon-c5:rgb(205,105,35);--mon-c6:rgb(125,88,190);--mon-c0:rgb(190,196,206)}
[data-theme="dark"]{--mon-c2:rgb(150,176,214);--mon-c0:rgb(92,96,104)}
.mon-c1{--c:var(--mon-c1)}.mon-c2{--c:var(--mon-c2)}.mon-c3{--c:var(--mon-c3)}.mon-c4{--c:var(--mon-c4)}.mon-c5{--c:var(--mon-c5)}.mon-c6{--c:var(--mon-c6)}.mon-c0{--c:var(--mon-c0)}
.mdk{display:flex;flex-direction:column;gap:20px;padding:8px 0 40px}
.mdk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:8px 0 4px}
.mdk-head h1{margin:4px 0 0;font-size:32px;font-weight:var(--qk-weight-bold,700);letter-spacing:-.02em;line-height:1.1;color:var(--qk-ink)}
.mdk-sub{margin-top:6px;font-size:14px;color:var(--qk-ink-3)}
.mdk-per{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mdk-pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 14px;border:0;border-radius:12px;background:var(--qk-card);box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge);color:var(--qk-ink);font:inherit;font-size:15px;font-weight:var(--qk-weight-semi);cursor:pointer}
.mdk-pbtn .qk-i{width:18px;height:18px}
.mdk-range{cursor:default;min-width:120px}
.mdk-pick{position:relative;padding-right:12px}
.mdk-pick select{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;padding:0 22px 0 0;cursor:pointer}
.mdk-pick .qk-i{position:absolute;right:12px;pointer-events:none;width:16px;height:16px}
.mdk-new{background:var(--qk-ink);color:var(--qk-card);box-shadow:none}
.mdk-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mdk-fig{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 22px;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.mdk-fig b{font-size:32px;font-weight:var(--qk-weight-bold,700);letter-spacing:-.02em;line-height:1.1;color:var(--qk-ink);font-variant-numeric:tabular-nums}
.mdk-fig span{font-size:14px;color:var(--qk-ink-3)}
.mdk-fig--bad span{color:var(--qk-bad)}
.mdk-card{padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.mdk-card__h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mdk-card__h h3{margin:0;font-size:18px;font-weight:var(--qk-weight-bold,700);letter-spacing:-.01em;color:var(--qk-ink)}
.mdk-count{font-size:14px;color:var(--qk-ink-3);margin-right:auto}
.mdk-seg{min-width:280px}
.mdk-by__b{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:center}
.mon-ring{position:relative;width:220px;height:220px;margin:0 auto}
.mon-ring svg{width:100%;height:100%}
.mon-ring__bg{fill:none;stroke:var(--qk-seg);stroke-width:18}
.mon-ring__s{fill:none;stroke:var(--c);stroke-width:18}
.mon-ring__t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mon-ring__t span{font-size:13px;color:var(--qk-ink-3)}
.mon-ring__t b{font-size:28px;font-weight:var(--qk-weight-bold,700);letter-spacing:-.02em;color:var(--qk-ink)}
.mdk-rank{display:flex;flex-direction:column}
.mdk-rank__r{display:flex;flex-direction:column;gap:8px;padding:12px 0;border:0;border-bottom:1px solid var(--qk-rule);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
div.mdk-rank__r{cursor:default}
.mdk-rank__r:last-child{border-bottom:0}
.mdk-rank__top{display:flex;align-items:center;gap:10px;min-width:0}
.mdk-rank__top b{flex:1;min-width:0;font-weight:var(--qk-weight-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--qk-ink)}
.mdk-rank__top em{font-style:normal;font-weight:var(--qk-weight-bold,700);font-variant-numeric:tabular-nums;color:var(--qk-ink)}
.mdk-rank__top small{width:52px;text-align:right;font-size:13px;color:var(--qk-ink-3);font-variant-numeric:tabular-nums}
.mon-dot{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.mdk-rank__bar{display:block;height:6px;border-radius:3px;background:var(--qk-seg);overflow:hidden}
.mdk-rank__bar i{display:block;height:100%;border-radius:3px;background:var(--c)}
.mdk-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.mdk-row--wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.mdk-row>.mdk-card:only-child{grid-column:1 / -1}
.mdk-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;height:260px}
.mdk-bar{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.mdk-bar__v{font-size:12px;font-weight:var(--qk-weight-semi);color:var(--qk-ink-2);text-align:center;font-variant-numeric:tabular-nums;min-height:15px}
.mdk-bar__pair{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.mdk-bar__pair i{display:block;width:44%;max-width:26px;min-height:2px;border-radius:5px 5px 0 0}
.mdk-bar__m{font-size:13px;color:var(--qk-ink-3);text-align:center}
.mdk-bar:hover .mdk-bar__pair i{filter:brightness(1.08)}
.mdk-att__r{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border:0;border-bottom:1px solid var(--qk-rule);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mdk-att__r:last-child{border-bottom:0}
.mdk-att__r span{display:flex;flex-direction:column;gap:3px;min-width:0}
.mdk-att__r b{font-weight:var(--qk-weight-semi);color:var(--qk-ink)}
.mdk-att__r small{font-size:13px;color:var(--qk-ink-3)}
.mdk-att__v{flex:none;font-style:normal;font-weight:var(--qk-weight-bold,700);font-variant-numeric:tabular-nums;padding:5px 12px;border-radius:999px;background:var(--qk-seg);color:var(--qk-ink)}
.mdk-att__v.is-warn{background:color-mix(in srgb,var(--qk-warn) 16%,transparent);color:var(--qk-warn)}
.mdk-att__v.is-bad{background:color-mix(in srgb,var(--qk-bad) 14%,transparent);color:var(--qk-bad)}
.mdk-none{padding:24px 0;color:var(--qk-ink-3)}
.mdk-tbl{padding-bottom:10px}
.mdk-tbl .dk-table tr[role="button"]{cursor:pointer}
.mdk-tbl .dk-table tr[role="button"]:hover td{background:var(--qk-soft)}
.mdk-tbl .dk-table td,.mdk-tbl .dk-table th{padding-left:0}
.mdk-tbl .dk-table .dk-num{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
.mdk-tbl .dk-table .is-bad{color:var(--qk-bad)}
.mdk-tbl .dk-table tbody tr:last-child td{border-bottom:0}
.mdk-all{align-self:flex-start;border:0;background:none;padding:6px 0;font:inherit;font-weight:var(--qk-weight-semi);color:var(--qk-accent);cursor:pointer}
.mdk-foot{display:flex;flex-wrap:wrap;gap:10px}
.mdk-link{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--qk-seg);color:var(--qk-ink);font:inherit;font-size:14px;font-weight:var(--qk-weight-semi);cursor:pointer}
.mdk-link .qk-i{width:16px;height:16px}
.mdk-months .mdk-bars{flex:1;height:auto;min-height:280px}
.mdk-bar__pair{position:relative;padding-top:22px}
.mdk-bar__pair .mdk-bar__v{position:absolute;left:0;right:0;margin-bottom:6px;min-height:0;line-height:1}
.mdk-bar__pair i{position:relative}
.mdk-bars{height:auto}
.mdk-pick select,.mdk-pick select:focus{border:0!important;box-shadow:none!important;background:transparent!important;height:auto;min-height:0;outline:0;font-size:15px;font-weight:var(--qk-weight-semi)}
.mdk-tbl .dk-table td{white-space:nowrap}
.mdk-tbl .dk-table td:has(>b):not(.dk-num){white-space:normal;width:40%}
.mdk-months .mdk-bars{padding-top:28px}.mdk-bar__pair{padding-top:0}
.mdk-row--wide{grid-template-columns:repeat(2,minmax(0,1fr))}   /* every row splits in half, on the figures' middle gutter, so the card edges line up down the page (Sam, 27 Sep 2026: "Should these be inline") */
.mdk-row,.mdk-figs{gap:20px}
/* Money's blocks keep the list's own spacing on a phone: the heading, then its card, 10 apart (27 Sep 2026: the heading sat on its card) */
.mon>.mon-b{display:flex;flex-direction:column;gap:10px}
.mon-head .qk-section,.mon-b>.qk-section{margin:0}
.mon-start__go{margin-top:16px}
.mon--start.mon--desk{display:flex;flex-direction:column;gap:20px;max-width:760px}
.mon-steps{margin-top:14px}
.mdk--start .mdk-row{align-items:start}
.mdk-plain.qk-rows{box-shadow:none;background:none;background-image:none;padding:0}
.ccard__foot--tcr.is-still{cursor:default}.ccard__foot--tcr.is-still .qk-chev{visibility:hidden}
/* the crane page's figures fit a phone's third: a long word or a date with its year wraps rather than running into the next tile (the bug check, 27 Sep 2026) */
.crn-stat__v{font-size:18px;white-space:normal;overflow-wrap:anywhere;line-height:1.15}
/* THE INVOICE PAGE (Sam, 27 Sep 2026: "see them just like the mockup we did for procedures"): on a computer the form beside the
   invoice's own PDF; on a phone the form, and Preview opens the PDF */
.inved__pdf{display:none}
.inved__form>.qk-btn{width:100%}
@media (min-width:1024px){
  .inved{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);gap:28px;align-items:start}
  .inved__pdf{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
  .inved__bar{justify-content:space-between}
  .inved .ped-preview{max-height:calc(100vh - 150px);overflow:auto;display:flex;justify-content:center;padding:12px;border-radius:var(--qk-radius-card);background:var(--qk-seg)}
  .inved .ped-pdf{min-height:calc(100vh - 180px)}
  .inved__phone{display:none}
}
/* each line's taxes as chips; a chip off is a tax this line does not carry (Sam, 27 Sep 2026: "different tax rates like adding pst or gst ect") */
.mon-taxchips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mon-taxchips .qk-chips{flex-wrap:wrap}
.mon-sum .qk-row__sub{font-size:13px}
.mon-line__g--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mon-adds{gap:8px}
.mon-line .mon-taxchips{padding:0 12px}
/* the preview is the size of the page it shows (Sam, 27 Sep 2026: "What's with all that overflow?"): a letter page's shape, no dark
   viewer ground below a one-page invoice; a longer one scrolls inside its page */
@media (min-width:1024px){
  .inved .ped-preview{max-height:none;overflow:visible;padding:0;background:none;display:block}
  .inved .ped-pdf{display:block;width:100%;height:auto;min-height:0;aspect-ratio:8.5/11;border-radius:10px;box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge);background:rgb(255,255,255)}
}
/* the invoice's pages as white sheets at their true proportions (27 Sep 2026: "I want perfection") */
.inved__pages{display:flex;flex-direction:column;gap:16px}
.inved__page{display:block;width:100%;height:auto;background:rgb(255,255,255);border-radius:6px;box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge)}
@media (min-width:1024px){ .inved .ped-preview{border:0} .inved__pdf{max-height:calc(100vh - 24px);overflow:auto} }
/* the whole first page in view on a desktop: the sheet scales to the window's height, centred in its column */
@media (min-width:1024px){ .inved__page{margin:0 auto} }
@media (min-width:1024px){ body .inved .ped-preview{max-height:none;overflow:visible;padding:0;border:0;background:none} }   /* over the procedure editor's own frame rule (body.desk-full .ped-preview) */
.mon-b--taxret{order:6}
@media (min-width:1024px){ .mon-b--taxret{grid-column:1 / -1} }
.crn-stats.mon-age{grid-template-columns:repeat(3,minmax(0,1fr))}
.mon-rcpt{width:100%;cursor:pointer}
/* THE TAX RETURN, ANSWER FIRST (Sam, 27 Sep 2026: "This is awful"): the net large in the head card, one period capsule, the CRA's line
   number in each row's seat */
.mon-trhead .qk-display{font-size:34px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.mon-trper{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px;border-radius:var(--qk-radius-pill);background:var(--qk-seg)}
.mon-trper .qk-tap{width:40px;height:40px;border-radius:50%;background:var(--qk-card);box-shadow:var(--qk-lift)}
.mon-trper span{display:flex;flex-direction:column;align-items:center;gap:1px}
.mon-trper b{font-size:16px;font-weight:var(--qk-weight-bold,700);color:var(--qk-ink)}
.mon-trper small{font-size:13px;color:var(--qk-ink-3)}
.mon-trs .mon-tr{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left}
.mon-tr__n{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--qk-seat);color:var(--qk-seat-ink);box-shadow:var(--qk-seat-edge);font-size:13px;font-weight:var(--qk-weight-bold,700);font-variant-numeric:tabular-nums}
.mon-tr .qk-row__value{font-variant-numeric:tabular-nums;color:var(--qk-ink);font-weight:var(--qk-weight-semi)}
.mon-tr--total .qk-row__name,.mon-tr--total .qk-row__value{font-weight:var(--qk-weight-bold,700);font-size:17px}
.mon-trdl{align-self:center}
.mon-age-dot{flex:none;width:12px;height:12px;border-radius:50%;margin:0 2px 0 6px}
.mon-age-dot.is-ok{background:var(--qk-ok)}.mon-age-dot.is-warn{background:var(--qk-warn)}.mon-age-dot.is-bad{background:var(--qk-bad)}
/* the bank (27 Sep 2026): money in reads green, the description in full under the head card */
.mon-bank.is-in .qk-row__value{color:var(--qk-ok)}
.mon-bankdesc{font-size:var(--qk-fs-body,15px);line-height:1.45;color:var(--qk-ink-2);overflow-wrap:anywhere}
.mon-bank .qk-row__name--wrap,.mon-sheet .mon-row .qk-row__name--wrap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mon-row.has-match .qk-row__sub{color:var(--qk-ok)}
/* the invoice's PDF on a phone, inside the form (28 Sep 2026): the page at the form's width, a tap opens it whole */
.inved__live{display:flex;flex-direction:column;gap:10px}
.inved__live .ped-preview{display:block;cursor:zoom-in;transition:opacity .2s ease}
.inved__live .ped-preview:empty{aspect-ratio:8.5/11;border-radius:6px;background:var(--qk-seg)}
.inved__live .ped-preview.is-remaking{opacity:.55}
.inved__live .inved__page{width:100% !important}
.mon-sendto{display:contents}
.inved__say:empty{display:none}
/* ---------- THE FIGURE TILE, THE DATA CARD, THE PAGE'S TABS (the Datum UI standard, 28 Sep 2026: QnQ and Astra, "the best of the best") ---------- */
.fig{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px 22px;min-width:0;border:0;text-align:left;font:inherit;color:inherit}
button.fig{cursor:pointer}
button.fig:hover{box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-rule)}
.fig__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fig__l{font-size:15px;font-weight:600;line-height:1.3;color:var(--qk-ink)}
.fig__i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--qk-soft);color:var(--qk-accent)}
.fig__i .qk-i{width:18px;height:18px}
.fig__v{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px}
.fig__v b{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--qk-ink);font-variant-numeric:tabular-nums}
.fig__v em{font-style:normal;font-size:16px;font-weight:600;color:var(--qk-ink-2)}
.fig__d{align-self:center;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.fig__d.is-good{background:var(--qk-ok-soft,rgba(52,168,83,.16));color:var(--qk-ok)}
.fig__d.is-bad{background:var(--qk-bad-soft,rgba(217,48,37,.16));color:var(--qk-bad)}
.fig__s{font-size:14px;line-height:1.4;color:var(--qk-ink-3)}
.fig--ok .fig__v b{color:var(--qk-ok)}
.fig--warn .fig__v b{color:var(--qk-warn)}
.fig--bad .fig__v b{color:var(--qk-bad)}
.dk-stats .fig,.mdk-figs .fig{height:100%}
.mdk-card__h h3 small{margin-left:10px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--qk-ink-3)}
.mdk-tabs{display:flex;gap:28px;border-bottom:1px solid var(--qk-rule);margin-top:-4px;overflow-x:auto;scrollbar-width:none}
.mdk-tab{flex:none;background:none;border:0;padding:0 0 12px;font:inherit;font-size:16px;font-weight:500;color:var(--qk-ink-3);cursor:pointer;position:relative}
.mdk-tab:hover{color:var(--qk-ink)}
.mdk-tab.is-on{color:var(--qk-ink);font-weight:600}
.mdk-tab.is-on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--qk-accent)}
.mdk-range .qk-i{width:18px;height:18px;color:var(--qk-ink-3)}
.dk-seat{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--qk-soft);font-size:12px;font-weight:600;color:var(--qk-ink-2)}
.dk-who{display:inline-flex;align-items:center;gap:12px}
.dk-table td.is-ok b{color:var(--qk-ok)}
@media (min-width:1024px){ .dk-table th{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--qk-ink-3)} }
/* the floating menu stands off a white card in light mode (Astra, 28 Sep 2026, on Sam's "Do we need shadow around that menu so it stands out more") */
@media (max-width:1023px){ [data-theme="light"] .qk-bar--float{box-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06),inset 0 0 0 1px rgba(0,0,0,.07)} }
/* the sidebar's count badges: only on the desktop rail, beside the destination's name */
.qk-rail__badge{display:none}
@media (min-width:1024px){
  .qk-bar--adaptive .qk-rail__badge{display:inline-grid;place-items:center;margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
  .qk-rail__badge.is-bad{background:var(--qk-bad-soft,rgba(217,48,37,.16));color:var(--qk-bad)}
  .qk-rail__badge.is-warn{background:var(--qk-warn-soft,rgba(234,179,8,.18));color:var(--qk-warn)}
}
.fig{justify-content:flex-start}
.fig__v{margin-top:auto}
.fig__v{margin-top:0}
.fig__s{margin-top:auto}
@media (min-width:1024px){ .dk-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }   /* tiles fill their row, however many there are */
/* the data card's heading is the page's section heading: 17/600, its sub 15/400 grey, on the one type scale (agreed with Astra, 28 Sep 2026) */
.mdk-card__h h3{font-size:17px;font-weight:600;letter-spacing:0}
.mdk-card__h h3 small{font-size:15px}
/* THE + FOLLOWS THE ACCENT (Sam, 28 Sep 2026: "Should the + button take on the accent color?" "Yes"): gold stays the brand's bright gold;
   any other accent fills the +. The plus is white on the deeper light-mode accents, dark on yellow and on every dark-mode accent (the
   dark-mode accents are light tints), so it always reads */
html[data-accent]:not([data-accent="gold"]) .qk-fab{background:var(--qk-accent);color:#FFFFFF}
html[data-accent="yellow"] .qk-fab,html[data-theme="dark"][data-accent]:not([data-accent="gold"]) .qk-fab{color:#151515}
html[data-accent="yellow"]:not([data-accent="gold"]) .qk-fab{color:#151515}
[data-theme="light"] .qk-bar--float .qk-tab--on .qk-tab__pill .qk-i{color:var(--qk-accent)}   /* the chosen tab follows the accent in light as in dark (gold is #A87A00 either way) */
/* shared-kit fixes from Astra's phone walk (29 Sep 2026, sent under UI-STANDARD's "the exact rule the same hour"):
   - in dark mode the icon seats' ink was a fixed brass, so a chosen accent never reached the row icons, empty tiles, action tiles or the
     + sheet (Sam in Astra: "Accent color not changing"); gold keeps the brass
   - a section's count never breaks onto its own line beside a long heading
   - a button with no colour of its own inherits the text colour instead of the phone's system blue (zero specificity, so every
     classed button's own colour still wins) */
[data-theme="dark"][data-accent]:not([data-accent="gold"]){--qk-seat-ink:var(--qk-accent)}
.qk-section__count{white-space:nowrap}
:where(button){color:inherit}
/* Money's five sections on the phone (29 Sep 2026): one capsule, the five fit a phone's width */
.mon-tabs .qk-segc__b{padding-left:2px;padding-right:2px;min-width:0;font-size:13px;flex:1 1 0;overflow:visible;text-overflow:clip}
/* NOTHING CUT (the phone walk, 29 Sep 2026: Sam's own finds, by machine): the Needs attention list, the crew's maintenance cards and the
   binder's section names read in full, wrapping onto as many lines as they need; a line under a crew tile is a caption, not a kicker */
.need-sheet .qk-row__name,.need-sheet .qk-row__sub{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#mbBody .mbc__t{-webkit-line-clamp:6;line-clamp:6}   /* the crew's cards: room for a two-line name and a two-line done line (the phone walk, 29 Sep 2026) */
#tab-logbook .qk-stat .qk-eyebrow{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.25;text-wrap:balance}
/* a sub-line marked to wrap wraps everywhere, on Home's panels and in the + sheet's lists too (the phone walk, 29 Sep 2026) */
.dash-panels .qk-rows--rich>.qk-row .qk-row__sub.qk-row__sub--wrap,.lst__cards .lst__card .qk-row__sub.qk-row__sub--wrap{white-space:normal;overflow:visible;text-overflow:clip}
@media (max-width:1023px){ .mon>.mon-b:last-child{margin-bottom:48px} }   /* Money's last row clears the floating bar */
#mbBody .mbc__n{white-space:normal;overflow-wrap:anywhere}
/* the invoice row: two lines, the name and amount, then the number, date and state (29 Sep 2026) */
.qk-row.mon-ic{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding-top:14px;padding-bottom:14px;text-align:left}
.mon-ic__l{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.mon-ic__n{font-size:17px;font-weight:600;color:var(--qk-ink);min-width:0;overflow-wrap:anywhere}
.mon-ic__v{flex:none;font-size:17px;font-weight:600;color:var(--qk-ink);font-variant-numeric:tabular-nums}
.mon-ic__s{font-size:15px;color:var(--qk-ink-3);min-width:0}
.mon-ic__l--2 .qk-pill{flex:none}
/* THE NEW (+) SHEET, PREMIUM PASS, ONE FOR ALL THREE APPS (Sam, 29 Sep 2026, in the Astra chat: "I like it. Make sure it's reflected
   on all 3 qnq Astra and Kempo"; astra-concrete-pumping/docs/kit-proposals/NEW-GRID-PREMIUM.md): white card tiles with a faint top
   sheen, a hairline and a soft layered shadow; the seat a brass coin with a thin inner highlight; quieter group headings; tightened
   names; a press that gives; a quick arrival cascade (none with Reduce Motion). Held to the + sheet (.newgrid): the job card's optional
   records keep their own tiles. QnQ's one difference: with an accent other than gold, the coin takes the accent (Sam, 28 Sep 2026). */
.newsheet .qk-section,.newsheet .qk-section__title{font-size:15px;font-weight:600;color:var(--qk-ink-2);letter-spacing:.01em}
.newgrid .optg__t{border-radius:20px;background:var(--qk-card);background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 42%);
  box-shadow:0 0 0 1px rgba(28,24,16,.05),0 1px 2px rgba(28,24,16,.05),0 8px 22px -10px rgba(28,24,16,.16);transition:transform .16s cubic-bezier(.2,0,0,1),box-shadow .16s}
.newgrid .optg__t:active{transform:scale(.97);box-shadow:0 0 0 1px rgba(28,24,16,.06),0 1px 2px rgba(28,24,16,.06)}
.newgrid .optg__seat{width:48px;height:48px;background:radial-gradient(120% 120% at 30% 20%,#FBF1D6 0%,#F1DEAA 55%,#E6CB85 100%);color:#8A6400;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(138,100,0,.18),0 1px 2px rgba(138,100,0,.18)}
html[data-accent]:not([data-accent="gold"]) .newgrid .optg__seat{background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--qk-accent) 8%,#fff) 0%,color-mix(in srgb,var(--qk-accent) 18%,#fff) 55%,color-mix(in srgb,var(--qk-accent) 30%,#fff) 100%);color:var(--qk-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 color-mix(in srgb,var(--qk-accent) 18%,transparent),0 1px 2px color-mix(in srgb,var(--qk-accent) 18%,transparent)}
.newgrid .optg__seat .qk-i{width:22px;height:22px;stroke-width:1.7}
.newgrid .optg__t b.qk-row__name{font-size:16px;font-weight:600;letter-spacing:-.01em}
@keyframes nk-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.newsheet .newgrid .optg__t{animation:nk-arrive .26s cubic-bezier(.2,0,0,1) both}
.newsheet .newgrid .optg__t:nth-child(2){animation-delay:.03s}.newsheet .newgrid .optg__t:nth-child(3){animation-delay:.06s}
@media (prefers-reduced-motion:reduce){.newsheet .newgrid .optg__t{animation:none}.newgrid .optg__t{transition:none}}
[data-theme="dark"] .newgrid .optg__t{background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 8px 22px -10px rgba(0,0,0,.6)}
[data-theme="dark"] .newgrid .optg__seat{background:radial-gradient(120% 120% at 30% 20%,#3A3222 0%,#2B251A 100%);color:#E9C85A;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(233,200,90,.18)}
[data-theme="dark"][data-accent]:not([data-accent="gold"]) .newgrid .optg__seat{background:radial-gradient(120% 120% at 30% 20%,#333 0%,#262626 100%);color:var(--qk-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px color-mix(in srgb,var(--qk-accent) 22%,transparent)}
/* THE RIM, ONE FOR ALL THREE APPS (Sam, 29 Sep 2026, in the Astra chat, of Apple's icons: "Apple adds something to the edges of their
   icons that makes it pop can we add something like that to these cards?" ... "Yes that looks good"; astra-concrete-pumping/docs/
   kit-proposals/NEW-GRID-PREMIUM.md): light catching the card's edge, brightest along the top and fading down the sides, a faint darker
   line along the bottom. QnQ's cards all stand on --qk-lift, so the rim rides in it and every card takes it at once; the + tiles too. */
:root{--qk-rim:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(28,24,16,.05)}
[data-theme="dark"]{--qk-rim:inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.35)}
[data-theme="dark"]{--qk-lift:var(--qk-rim),0 1px 2px rgba(0,0,0,.35),0 14px 30px -20px rgba(0,0,0,.9)}
:root:not([data-theme="dark"]){--qk-lift:var(--qk-rim),0 1px 2px rgba(28,36,48,.06),0 10px 28px -12px rgba(28,36,48,.14)}
.newgrid .optg__t{box-shadow:var(--qk-rim),0 0 0 1px rgba(28,24,16,.05),0 1px 2px rgba(28,24,16,.05),0 8px 22px -10px rgba(28,24,16,.16)}
.newgrid .optg__t:active{box-shadow:var(--qk-rim),0 0 0 1px rgba(28,24,16,.06),0 1px 2px rgba(28,24,16,.06)}
[data-theme="dark"] .newgrid .optg__t{box-shadow:var(--qk-rim),0 0 0 1px rgba(255,255,255,.06),0 8px 22px -10px rgba(0,0,0,.6)}
/* EVERY TAP TARGET 44 (the one kit, 29 Sep 2026, the KEMPO audit's L4; Sam: "Yes"): what was drawn smaller keeps its look and gains the
   height a finger needs. A text link grows by padding that its negative margin gives back, so nothing around it moves. */
html body .qk-section__all,html body .who__not{display:inline-flex;align-items:center;min-height:44px;margin-top:-12px;margin-bottom:-12px}
html body .qk-sheet__x{width:44px;height:44px;top:10px;right:10px}
html body .qk-ccard__add,html body .ccard .qk-ccard__add{height:44px}
html body .svc-crane__pdf{height:44px}
html body .it__h{min-height:44px}
html body #padClr{height:44px}
/* EVERY ICON IN A LIST IS ROUND (the one kit, 29 Sep 2026, C3): the list tile takes the + sheet's coin shape */
html body .qk-rows .qk-row .qk-tile:not(.qk-tile--date):not(.qk-tile--time),html body .qk-rows .qk-tile:not(.qk-tile--date):not(.qk-tile--time){border-radius:50%}
/* THE + IS THE PRIMARY BUTTON'S INK (the one kit, 29 Sep 2026, COLOUR-SYSTEM.md rule 3 / C1; Sam: "Listen to what Kempo and yo dawg
   say"): black in light, white in dark, whatever the accent - two main buttons, one colour. Replaces the gold + in dark and the 28 Sep
   "+ follows the accent"; the accent keeps where-you-are and what-you-tap. */
html body .qk-fab,html[data-accent] body .qk-fab,html[data-theme][data-accent] body .qk-fab{background:var(--qk-primary-bg);color:var(--qk-primary-fg)}
/* THE PHONE'S OWN FACE, EVERY THEME (the one kit, 29 Sep 2026, L6): the office's body takes the kit's face in light and dark alike (dark
   had fallen through to the marketing sheet's IBM Plex Sans); the office's --ui now leads with the phone's own face too */
html:root body{font-family:var(--qk-font-body)}
/* Save on the save bar is a full primary, 52 high (L3) */
.savebar .qk-btn{width:auto;padding:0 26px}
/* THE ONE KIT ON THE CREW'S PAGES (29 Sep 2026, the KEMPO audit; Sam: "Yes to all", "Listen to what Kempo and yo dawg say"):
   L1 the phone's gutter 16; L2 24 between groups; L5 section headings 15/600 in the secondary ink, every screen (the + sheet's own) */
.qk-body{padding-left:16px;padding-right:16px}
.qk-body--tight{gap:24px}
.qk-section{font-size:15px;font-weight:600;color:var(--qk-ink-2)}
/* the form's progress bar under its header (P9): the share of checks answered, green when all are */
.wiz-prog{flex:none;height:4px;margin:2px 16px 8px;border-radius:2px;background:var(--qk-rule);overflow:hidden}
.wiz-prog>i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:var(--qk-ink-2);transition:width .25s cubic-bezier(.2,0,0,1)}
.wiz-prog.is-full>i{background:var(--qk-ok)}
@media (prefers-reduced-motion:reduce){.wiz-prog>i{transition:none}}
/* the answers' marks (P4): a green tick on Pass, a red X on Fail, before and after choosing */
.vrow .vmark{display:inline-flex;margin-right:6px}
.vrow .vmark .qk-i{width:16px;height:16px;stroke-width:2.4}
.vrow .vmark--ok{color:var(--qk-ok)}.vrow .vmark--bad{color:var(--qk-bad)}
/* "N checks left" reads as not ready yet, and still takes a tap to the first unanswered check */
.wiz-left{color:var(--qk-ink-3)}
/* THE DONE SCREEN IN THE OUTCOME'S COLOUR (the one kit, 29 Sep 2026, P7): the whole page green when the log is on the record, amber when
   it is kept on the phone for want of signal; a white disc with the tick in the outcome's colour; Done a white primary, View record a
   quiet outline. The same page in light and dark: it is a moment, not a theme. */
.splash{background:linear-gradient(180deg,#178A43 0%,#1FB85A 100%);color:#FFFFFF}
.splash.is-amber{background:linear-gradient(180deg,#B7791F 0%,#D69E2E 100%)}
.splash .qk-okdisc{width:112px;height:112px;background:#FFFFFF;color:#178A43;box-shadow:0 18px 40px -12px rgba(0,0,0,.35)}
.splash.is-amber .qk-okdisc{color:#B7791F}
.splash .qk-okdisc .qk-i{width:52px;height:52px;stroke-width:2.6}
.splash #spK{color:rgba(255,255,255,.88);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.splash #spT,.splash #spN{color:#FFFFFF}
.splash #spN{opacity:.9}
.splash .qk-foot{background:transparent;box-shadow:none;border:0}
.splash #spDone{background:#FFFFFF;color:#178A43;box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.splash.is-amber #spDone{color:#8A5A12}
.splash #spView{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.splash .sp-acts{align-self:stretch;gap:12px;margin-top:28px}
/* ONE HEIGHT PER LIST, NOTHING CUT (29 Sep 2026): a list's cards share the tallest card's height (the grid's equal rows), so a line that
   needs two lines has them and every card in the list stays the same size (Sam, 20 + 26 Sep: "All cards the same size") */
.lst__cards{display:grid;grid-auto-rows:1fr}
.lst__cards .lst__card{height:auto;min-height:76px}
html body .lst__cards .lst__card .qk-tile{border-radius:50%}   /* every icon in a list is round (C3), the card lists' too */
/* THE CREW'S HISTORY, A CARD PER LOG (the one kit, 29 Sep 2026, KEMPO's census: the only rich list drawn flat inside one card; Sam's
   list style B, a card per item with air): each week's row is its own white card, as every other list in the app */
#hist>.qk-rows--rich{background:none;background-image:none;box-shadow:none;display:flex;flex-direction:column;gap:10px;overflow:visible}
#hist>.qk-rows--rich>.qk-row{background-color:var(--qk-card);background-image:var(--qk-sheen);border-radius:var(--qk-radius-card);box-shadow:var(--qk-lift),inset 0 0 0 1px var(--qk-edge);padding:12px 16px}
#hist>.qk-rows--rich>.qk-row::before{display:none}
/* ONE LOOK PER PIECE (the one kit's ruling, 29 Sep 2026, KEMPO's census group B; "the kit decides"): the initials carry no accent ring
   (the accent marks only where you are and what you tap); a row's value is 400 in the secondary ink on every list, rich or plain; a
   section heading's tracking is +.01em everywhere, inside a page body or not */
html body .qk-hdr--brand .qk-avatar,html body .qk-avatar{box-shadow:none}
html body .qk-rows .qk-row__value,html body .qk-rows--rich .qk-row__value{font-weight:400;color:var(--qk-ink-3)}
.qk-section{letter-spacing:.01em}