/* Shared workshop controls. Built only on tokens.css.
   A page opts in by linking this file after tokens.css and ui-controls.css.
   Themes (Day, Pink, Christmas, Retro) restyle these by changing tokens, not these rules.
   Existing pages keep their own sheets until they move onto this file. */

.kw-page { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
.kw-page-body {
  width: min(var(--panel-record), 100%); margin: 0 auto; box-sizing: border-box;
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-8);
}

/* Page header. One title: display font, text colour. Gold stays for actions and selection. */
/* Shared page header. One row on desktop: title, stat, badge, view switch, page buttons, then bell, gear and Add. */
.kw-page-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.kw-page-body > .kw-page-head { margin-bottom: 0; }
.kw-page-head-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; min-width: 0; }
.kw-page-head-text { flex: 0 1 auto; min-width: 0; }
.kw-page-title { margin: 0; font: var(--fs-page); color: var(--text); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-page-sub { margin: var(--space-1) 0 0; font: var(--fs-body); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-page-head-stat { flex: 0 0 auto; }
.kw-page-head-badge { flex: 1 1000 auto; min-width: 8px; overflow: hidden; display: flex; justify-content: flex-end; align-items: center; }
.kw-page-head-badge .kw-head-name:empty { display: inline-block; width: 0; overflow: hidden; }
/* The stat, badge, view switch and page buttons. One row with the title from 1200; on tablets their own line under the title,
   bell, gear and Add. Phones: the page buttons stay on the top row as icons and the view switch takes the second. */
.kw-page-head-more { display: contents; }
/* Phones are html.kw-top-on (phone-top.js, from the window's width, so a live-section frame follows the host), not a width here. */
@media (max-width: 1199.98px) {
  html:not(.kw-top-on) .kw-page-head-row { flex-wrap: wrap; row-gap: var(--space-2); }
  html:not(.kw-top-on) .kw-page-head-row > .kw-page-head-text { flex: 1 1 0; }
  html:not(.kw-top-on) .kw-page-head-row > .kw-page-head-actions { margin-left: auto; }
  html:not(.kw-top-on) .kw-page-head-more { order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
  html:not(.kw-top-on) .kw-page-head-more > .kw-page-head-badge { flex: 0 1 auto; min-height: var(--ctrl-md); }
  html:not(.kw-top-on) .kw-page-head-more > .kw-page-head-tools { margin-left: auto; }
  html:not(.kw-top-on) .kw-page-head-more:not(:has(> .kw-page-head-stat, > .kw-page-head-tablist, > .kw-page-head-tools, > .kw-page-head-badge > :not(.kw-head-name:empty))) { display: none; }
}
@media (max-width: 639.98px) {
  html.kw-top-on .kw-top-row:has(> .kw-page-head-more > .kw-page-head-tablist) { flex-wrap: wrap !important; row-gap: var(--space-2); }
  html.kw-top-on .kw-page-head-row > .kw-page-head-text { flex: 1 1 0; min-width: 0; }
  html.kw-top-on .kw-page-head-more > .kw-page-head-tablist { order: 2; flex: 1 1 100%; }
  html.kw-top-on .kw-page-head-more > .kw-page-head-badge { display: none; }
  html.kw-top-on .kw-page-head { margin-bottom: var(--space-3); }
}
/* A narrow header (a tablet, or a laptop with the sidebar pinned) keeps the title whole: the Add buttons show their icon only.
   The name stays the button's accessible name. */
html:not(.kw-top-on) .kw-page-head-row { container: kw-head / inline-size; }
@container kw-head (max-width: 620px) {
  .kw-page-head-actions .kw-btn-add { width: var(--ctrl-md); padding: 0; gap: 0; justify-content: center; font-size: 0; }
}
/* The header stays in view on scroll (phones: phone-top.css). The side shadows cover the page gutters. */
@media screen {
  html:not(.kw-top-on) .kw-page-head, html:not(.kw-top-on) .cos-page-head { position: sticky; top: 0; z-index: 30; padding-top: var(--space-3); padding-bottom: var(--space-3); background: var(--bg);
    box-shadow: calc(-1 * var(--space-6)) 0 0 var(--bg), var(--space-6) 0 0 var(--bg); }
}
/* The subtitle may use the free space beside a short title. It only shortens when the row itself is full. */
.kw-page-head-text { flex: 1 1 auto; }
.kw-page-sub { max-width: 100%; }
/* Cars on Site: one row from 1200, where the title never shortens; below that the layout switch is a second row. */
@media (min-width: 640px) and (max-width: 1199.98px) {
  .cos-page-head.kw-page-head {
    display: grid !important;
    grid-template-columns: minmax(max-content, 1fr) auto;
    grid-template-areas: "text actions" "stat badge" "tabs tabs";
    align-items: center; column-gap: var(--space-3); row-gap: var(--space-2);
  }
  .cos-page-head > .kw-page-head-text { grid-area: text; min-width: max-content; }
  .cos-page-head > .cos-head-metrics { grid-area: stat; }
  .cos-page-head > .kw-head-user { grid-area: badge; min-width: 0; }
  .cos-page-head > #kw-layout { grid-area: tabs; justify-self: start; }
  .cos-page-head > .kw-head-actions { grid-area: actions; position: relative; z-index: 2; }
  .cos-page-head .kw-page-title { overflow: visible; text-overflow: clip; }
  .cos-page-head > .kw-head-user.gta-on .gta-vi { position: static; transform: none; flex-direction: row; align-items: center; width: auto; max-width: 100%; max-height: 48px; }
}
@media (min-width: 1200px) {
  .cos-page-head.kw-page-head {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "text stat badge actions" "tabs tabs tabs tabs";
    align-items: center; column-gap: var(--space-3); row-gap: var(--space-3);
  }
  .cos-page-head > .kw-page-head-text { grid-area: text; }
  .cos-page-head > .cos-head-metrics { grid-area: stat; }
  .cos-page-head > .kw-head-user { grid-area: badge; }
  .cos-page-head > #kw-layout { grid-area: tabs; justify-self: start; }
  .cos-page-head > .kw-head-actions { grid-area: actions; }
}
@media (min-width: 1200px) {
  .cos-page-head.kw-page-head { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "text stat badge tabs actions"; }
  .cos-page-head > #kw-layout { justify-self: end; }
}
.kw-page-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
.kw-page-head-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.kw-page-head-tablist, .kw-page-head-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.kw-page-head-tools { flex-wrap: wrap; justify-content: flex-end; }
/* Below 1440 the header's page buttons (Refresh, Export) show their icon only; the name stays as aria-label and title. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .kw-page-head-row .kw-page-head-tools .kw-btn-label { display: none; }
  .kw-page-head-row .kw-page-head-tools .kw-btn { width: var(--ctrl-md); padding: 0; justify-content: center; }
}
/* Phones: icon-only page buttons. The workshop prefix stays on the title. */
@media (max-width: 639.98px) {
  html.kw-top-on .kw-page-head-row .kw-page-head-tools .kw-btn-label { display: none; }
  html.kw-top-on .kw-page-head-row .kw-page-head-tools .kw-btn { width: var(--ctrl-md); padding: 0; justify-content: center; }
  html.kw-top-on .kw-page-title { white-space: normal; }
  html.kw-top-on .kw-page-body { padding: 0 var(--space-3) var(--space-6); gap: var(--space-4); }
}
.kw-page-head-tablist .kw-seg,
.kw-page-head-tablist .arch-tabs, .cos-page-head > #kw-layout { height: var(--ctrl-md); min-height: var(--ctrl-md); padding: 2px; box-sizing: border-box; }
.kw-page-head-tablist .kw-seg button,
.kw-page-head-tablist .arch-tab, .cos-page-head > #kw-layout > button { height: 100%; min-height: 0; padding: 0 var(--space-3); box-sizing: border-box; }
@media (max-width: 639.98px) {
  .cc-layout { display: none; }
}
.kw-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Buttons. Standard is 36px (Settings). Compact is 32px, the same height as a compact field. */
.kw-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--ctrl-md); min-height: var(--ctrl-md); padding: 0 var(--space-3);
  border-radius: var(--radius-ctrl); border: 1px solid transparent; background: transparent; color: var(--text);
  font: var(--fs-ctrl); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.kw-btn > .fa-plus { font-size: 12px; }
.kw-btn[hidden], .kw-btn.hidden { display: none !important; }
a.kw-btn { text-decoration: none; }
.kw-btn-sm { height: var(--ctrl-xs); min-height: var(--ctrl-xs); padding: 0 var(--space-2); }
.kw-btn:hover { background: var(--hover); }
.kw-btn:focus { outline: none; }
.kw-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }
.kw-btn-primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.kw-btn-primary:hover { background: var(--accent); filter: brightness(1.06); }
.kw-btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.kw-btn-secondary:hover { background: var(--hover); }
.kw-btn-secondary.on,
.kw-btn-secondary[aria-pressed="true"] { border-color: var(--focus); color: var(--accent-ink); box-shadow: none; }
.kw-btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.kw-btn-ghost:hover { background: var(--hover); color: var(--text); }
.kw-btn-danger { background: transparent; color: var(--bad-text); border-color: var(--bad-text); }
/* Icon toggle row (kwChoice, kw-shared.js): fault code marks, the scan picker's tick / ? / X. */
.kw-choice { display: inline-flex; gap: var(--space-1, 4px); }
.kw-choice-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctrl-sm); height: var(--ctrl-sm); min-width: var(--ctrl-sm); padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-ctrl); background: transparent; color: var(--text-2); font-size: 14px; cursor: pointer;
}
.kw-choice-btn:hover { background: var(--hover); color: var(--text); }
.kw-choice-btn.is-ok[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); color: var(--on-solid); }
.kw-choice-btn.is-warn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.kw-choice-btn.is-bad[aria-pressed="true"] { border-color: var(--bad); background: var(--bad); color: var(--on-solid); }
.kw-choice-btn.is-muted[aria-pressed="true"] { border-color: var(--text-3); background: var(--surface-2); color: var(--text); }
@media (max-width: 639.98px) { .kw-choice-btn { width: 44px; height: 44px; min-width: 44px; } }

/* Page Add buttons (Add car, Add booking, Add TSB ...): the same box as the bell and gear, the icon in the accent. */
.kw-btn-add { background: var(--surface); color: var(--text); border-color: var(--border); }
.kw-btn-add > i { color: var(--accent-ink); font-size: 14px; }
.kw-btn-add:hover { background: var(--hover); border-color: var(--focus); }
.kw-btn-danger:hover { background: var(--bad); color: var(--on-solid); border-color: var(--bad); filter: none; }

/* Icon button. Neutral border; gold only when hovered, open or selected. Replaces the 44px gold gear and bell. */
.kw-icon-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctrl-md); height: var(--ctrl-md); min-width: var(--ctrl-md); padding: 0;
  border-radius: var(--radius-ctrl); border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: var(--fs-ctrl); font-size: 1rem; line-height: 1; cursor: pointer;
}
.kw-icon-btn-sm { width: var(--ctrl-xs); height: var(--ctrl-xs); min-width: var(--ctrl-xs); }
.kw-icon-btn:hover { background: var(--hover); color: var(--text); }
.kw-icon-btn:focus { outline: none; }
.kw-icon-btn.on,
.kw-icon-btn[aria-pressed="true"],
.kw-icon-btn[aria-expanded="true"] { border-color: var(--focus); color: var(--accent-ink); box-shadow: none; }
.kw-icon-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }

/* Segmented control, sized to its labels. Standard is 36px and 13px/600, the Settings button.
   The selected segment is a solid fill, which is what the Settings layout switch does, at this height
   rather than the shorter menu switch. Compact is 32px. */
.kw-seg {
  display: inline-flex; align-items: stretch; align-self: flex-start; width: max-content; max-width: 100%;
  box-sizing: border-box; height: var(--ctrl-md); gap: 2px; padding: 2px;
  border-radius: var(--radius-ctrl); border: 1px solid var(--border); background: var(--surface-2);
}
.kw-seg button {
  margin: 0; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
  font: var(--fs-ctrl); line-height: 1; border-radius: var(--radius-sm);
  height: auto; padding: 0 var(--space-3);
}
.kw-seg button.on,
.kw-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.kw-seg button:focus { outline: none; }

/* Toggle row and the switch. */
.kw-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: var(--ctrl-md); margin: 0; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-ctrl); background: transparent; color: var(--text);
  font: var(--fs-ctrl); text-align: left; cursor: pointer;
}
.kw-toggle:hover { background: var(--hover); }
.kw-toggle:focus { outline: none; }
.kw-switch {
  width: var(--ctrl-md); height: var(--space-5); border-radius: var(--radius-pill);
  background: var(--border-strong); position: relative; flex: 0 0 auto;
}
.kw-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: var(--space-4); height: var(--space-4);
  border-radius: var(--radius-pill); background: var(--on-solid); transition: transform .15s;
}
.kw-toggle.on .kw-switch,
.kw-toggle[aria-pressed="true"] .kw-switch { background: var(--accent); }
.kw-toggle.on .kw-switch::after,
.kw-toggle[aria-pressed="true"] .kw-switch::after { transform: translateX(var(--space-4)); }
@media (prefers-reduced-motion: reduce) { .kw-switch::after { transition: none; } }

/* Fields. Standard is 36px and compact is 32px, for an input and a select alike. Values are regular 400.
   A field is only as wide as its size. It does not grow to fill the row. */
.kw-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.kw-field { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-1); width: var(--field-m); max-width: 100%; min-width: 0; flex: 0 1 auto; }
.kw-field-xs { width: var(--field-xs); }
.kw-field-s { width: var(--field-s); }
.kw-field-m { width: var(--field-m); }
.kw-field-l { width: var(--field-l); }
.kw-field-date { width: var(--field-date); }
.kw-field-select { width: 10rem; }
.kw-field-full { width: 100%; flex-basis: 100%; }
.kw-label { margin: 0; font: var(--fs-ctrl); color: var(--text-2); }
.kw-hint, .kw-field-error { margin: 0; font: var(--fs-small); }
.kw-hint { color: var(--text-3); }
.kw-field-error { color: var(--bad-text); }
/* The message sits in its own field, under the control, and wraps inside that field's width.
   A full-width flex line put it at the left of the row, a field's width away from the box. */
.kw-field > .kw-field-error {
  display: block; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: break-word;
}
.kw-input, .kw-select, .kw-textarea {
  box-sizing: border-box; width: 100%; margin: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-ctrl); font: var(--fs-value); font-family: var(--font-ui);
}
.kw-input, .kw-select { height: var(--ctrl-md); padding: 0 var(--space-3); }
.kw-input-sm, .kw-select-sm { height: var(--ctrl-sm); }
.kw-textarea { min-height: calc(var(--ctrl-md) * 3); padding: var(--space-2) var(--space-3); resize: vertical; font: var(--fs-value); }
.kw-input:focus, .kw-select:focus, .kw-textarea:focus { outline: none; }
.kw-input:focus-visible, .kw-select:focus-visible, .kw-textarea:focus-visible {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}
.kw-input:disabled, .kw-select:disabled, .kw-textarea:disabled { opacity: .55; cursor: default; }
.kw-field.is-error .kw-input,
.kw-field.is-error .kw-select,
.kw-field.is-error .kw-textarea { border-color: var(--bad-text); box-shadow: none; }
.kw-input::placeholder, .kw-textarea::placeholder { color: var(--text-3); }
@media (max-width: 639.98px) {
  .kw-field, .kw-field-xs, .kw-field-s, .kw-field-m, .kw-field-l, .kw-field-date, .kw-field-select { max-width: 100%; }
  .kw-field-full { width: 100%; flex-basis: 100%; }
  .kw-field > .kw-field-error { margin-top: var(--space-1); }
}

/* Card and section. Tiles have no shadow. Stat tiles use the small shadow. */
.kw-section { display: flex; flex-direction: column; gap: var(--space-3); }
.kw-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.kw-card {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-tile); padding: var(--space-4);
}
.kw-card-title { margin: 0; font: var(--fs-card); color: var(--text); }
.kw-tile-issue { margin: var(--space-2) 0 0; font: var(--fs-body); color: var(--text); }
.kw-muted { color: var(--text-2); }

/* Tabs. */
.kw-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.kw-tab {
  margin: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2);
  font: var(--fs-ctrl); height: var(--ctrl-md); padding: 0 var(--space-3); cursor: pointer;
  border-radius: var(--radius-ctrl) var(--radius-ctrl) 0 0; border-bottom-width: 1px;
}
.kw-tab.on, .kw-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--focus); border-bottom-width: 1px; }
.kw-tab:focus { outline: none; }
.kw-tabpanel { padding-top: var(--space-4); }

/* Side panel. Form width and the wider record width. */
.kw-backdrop {
  position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: var(--overlay);
}
.kw-drawer {
  width: min(var(--panel-form), 100%); height: 100%; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); border-left: 1px solid var(--line); box-shadow: var(--shadow);
}
.kw-drawer-head, .kw-drawer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--line);
}
.kw-drawer-foot { border-bottom: 0; border-top: 1px solid var(--line); }
.kw-drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-4); }
.kw-drawer-title { margin: 0; font: var(--fs-card); }

/* Confirm modal. */
.kw-modal-back {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: var(--overlay);
}
.kw-modal {
  width: min(var(--panel-confirm), 100%); box-sizing: border-box;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-tile); box-shadow: var(--shadow); padding: var(--space-5);
  max-height: calc(100dvh - 2 * var(--space-4)); overflow: auto;
}
.kw-modal-title { margin: 0; font: var(--fs-card); }
.kw-modal-text { margin: var(--space-2) 0 0; font: var(--fs-body); color: var(--text-2); }
.kw-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
/* kwDialog (kw-shared.js): above the job card and every other layer. */
.kw-dialog { z-index: 10000; }
/* The title and buttons stay put; only the body scrolls. A form (a body) gets a header and footer bar, like the job card. */
.kw-dialog > .kw-modal { display: flex; flex-direction: column; overflow: hidden; }
.kw-dialog > .kw-modal > * { flex: none; }
.kw-dialog > .kw-modal > :is(.kw-modal-body, .kw-modal-text) { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.kw-dialog > .kw-modal > .kw-modal-body { flex-grow: 1; }
.kw-dialog > .kw-modal:has(> .kw-modal-body) { padding: 0; }
.kw-dialog > .kw-modal:has(> .kw-modal-body) > .kw-modal-title { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.kw-dialog > .kw-modal:has(> .kw-modal-body) > :is(.kw-modal-icon, .kw-modal-text) { margin: var(--space-4) var(--space-5) 0; }
.kw-dialog > .kw-modal:has(> .kw-modal-body) > .kw-modal-body { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); }
.kw-dialog > .kw-modal:has(> .kw-modal-body) > .kw-modal-actions { margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.kw-modal-wide { width: min(var(--panel-form), 100%); }
.kw-modal-settings { width: min(var(--panel-settings), 100%); }
.kw-modal-large { width: min(var(--panel-large), 100%); }
.kw-modal-xl { width: min(var(--panel-xl), 100%); }
.kw-modal-icon { display: block; margin-bottom: var(--space-3); font-size: 20px; color: var(--focus); }
.kw-modal-body { margin-top: var(--space-4); font: var(--fs-body); color: var(--text-2); }
.kw-modal-body > .kw-input { width: 100%; box-sizing: border-box; }
.kw-modal-text { white-space: pre-line; overflow-wrap: anywhere; }
.kw-modal-actions { flex-wrap: wrap; }
@media (max-width: 639.98px) { .kw-modal-actions .kw-btn { min-height: 44px; } }

/* Toast. */
.kw-toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: 100;
  max-width: calc(100% - var(--space-8)); box-sizing: border-box; text-align: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-ctrl); box-shadow: var(--shadow);
  padding: var(--space-2) var(--space-4); font: var(--fs-ctrl); pointer-events: none;
}
.kw-toast-bad { background: var(--bad); color: var(--on-solid); border-color: transparent; }

/* Author display:flex would otherwise beat the hidden attribute. */
.kw-backdrop[hidden], .kw-modal-back[hidden], .kw-toast[hidden], .kw-tabpanel[hidden], .kw-btn[hidden] { display: none !important; }
body.kw-scroll-lock { overflow: hidden; }

/* Chips. Status, category, count and filter share .kw-chip and set --chip. */
.kw-chip-status { height: var(--chip-h); padding: 0 var(--space-2); font: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0; text-transform: none; }
.kw-chip-cat { height: var(--chip-h-sm); padding: 0 var(--space-2); font: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0; text-transform: none; }
.kw-chip-count { height: var(--chip-h); padding: 0 var(--space-2); font: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0; text-transform: none; }
.kw-chip-filter { height: var(--ctrl-sm); padding: 0 var(--space-3); font: var(--fs-ctrl); cursor: pointer; }
.kw-chip-filter.on { border-color: color-mix(in srgb, var(--focus) 55%, var(--line)); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* Table. */
.kw-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); }
.kw-table { width: 100%; border-collapse: collapse; font: var(--fs-body); }
.kw-table th {
  text-align: left; font: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.kw-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.kw-table tr:last-child td { border-bottom: 0; }
.kw-table tbody tr:hover td { background: var(--hover); }

/* Stat tile. 62px-class tile: value on the accent, label muted, small shadow. */
.kw-stats { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kw-stat {
  flex: 1 1 calc(var(--ctrl-md) * 4); min-height: var(--stat-h); box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile);
  box-shadow: none; padding: var(--space-2) var(--space-3); text-align: left; color: inherit;
}
button.kw-stat { cursor: pointer; font: inherit; }
button.kw-stat:hover { border-color: color-mix(in srgb, var(--focus) 40%, var(--line)); }
.kw-stat.on {
  border-color: var(--focus);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
button.kw-stat:focus { outline: none; }

/* One keyboard ring for buttons, the view switch, toggles, tabs and stat tiles.
   Text fields keep their own focus. Mouse clicks do not show this (:focus-visible only). */
.kw-btn:focus-visible,
.kw-icon-btn:focus-visible,
.kw-seg button:focus-visible,
.kw-toggle:focus-visible,
.kw-tab:focus-visible,
button.kw-stat:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
.kw-stat-value { display: block; font: var(--fs-section); color: var(--accent-ink); }
.kw-stat-label { display: block; margin-top: var(--space-1); font: var(--fs-small); color: var(--text-2); }

/* In-progress strip, the green bar on a neutral card. */
.kw-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-ctrl);
  background: var(--ip-bg); border: 1px solid var(--ip-border); color: var(--ip-label);
  font: var(--fs-ctrl);
}

/* Themed select list (cars-select.js). Closed control is .kw-select. The list has no Tailwind on this page. */
.cos-select-pop {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctrl);
  box-shadow: var(--shadow); color: var(--text);
}
.kw-state { border-color: var(--line); }
.kw-state-error { border-color: color-mix(in srgb, var(--bad-text) 40%, var(--line)); }
.cos-select-opt:hover { background: var(--hover); }

/* Example jobs. Tiles only. Grid and Compact are the Cars on Site rules
   (cars-views-settings.css on #cars-grid), which start at 640px. */
.kw-jobs { display: flex; flex-direction: column; gap: var(--space-3); }
.kw-jobs > .card {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-tile); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
}
.kw-jobs .badge-category { width: auto; max-width: 100%; }
@media (max-width: 639.98px) {
  .kw-jobs > .card { padding: 14px; }
  .kw-jobs .card > .flex:first-child > .flex-shrink-0:first-child { flex: 1 1 0; min-width: 0; }
  .kw-jobs .card > .flex:first-child > .ml-2 { margin-left: auto; align-self: flex-start; flex: 0 0 auto; max-width: 70%; }
}
/* The row is a flex line here: this page does not load the Tailwind sheet. Insides are cars-tile.css. */
.kw-jobs > .card > .flex { display: flex; align-items: stretch; gap: 0; margin-bottom: var(--space-2); }
.kw-jobs .flex-1 { flex: 1 1 auto; min-width: 0; }
.kw-jobs .flex-shrink-0 { flex: 0 0 auto; }
.kw-jobs .ml-2 { margin-left: 0.5rem; }
.kw-jobs .text-right { text-align: right; }
.kw-jobs .reg-text { align-self: start; height: auto; }
/* A phone stays on Tiles even if Grid or Compact was saved on a wider screen. */
@media (max-width: 639.98px) {
  html.cos-grid .kw-jobs, html.cos-list .kw-jobs { display: flex; flex-direction: column; }
  html.cos-grid .kw-jobs > .card, html.cos-list .kw-jobs > .card { display: block; }
}