/* Technik — the touch design (chosen in the account menu, remembered on
   the device). A dark rail with the sections, a white side menu with the
   section's pages (the open page in solid blue), quiet white cards with a
   thin border, 8–12 px corners and big tap targets. Light by default; Dark
   and Automatic work too. Loaded after app.css, only for this design:
   everything here overrides the classic look. No gradients, glows or
   movement: colour changes only. Technik's colours: the logo's navy
   (#1B1F4B, the menu bar) and its blue (#1A6FD0, what you click, the same
   in light and dark); its round font Nunito (app.css). */

:root[data-design="touch"] {
  /* Technik's navy and blue, solid. */
  --t-rail: #1b1f4b; --t-rail-ink: #a6a9cc; --t-rail-hover: #272c63; --t-rail-avatar: #2c3170;
  --t-cta: #1a6fd0;
  --t-side: #ffffff;
  --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f5f6fa; --stripe: #f9fafc; --hover: #f1f4fa; --btn-hover: #f1f4fa; --press: #e6ecf6;
  --line: #ececf4; --border: #e2e2ee; --border-strong: #cbcbdf; --input-border: #d7d7e6;
  --text: #2e3156; --text-strong: #1b1f4b; --muted: #6b6e8e;
  --link: #1a6fd0; --blue: #1a6fd0; --blue-dark: #155db0; --blue-line: #a9c6ef; --focus: #1a6fd0; --blue-soft: #eaf1fb;
  --subnav-active: #eaf1fb; --primary: #1a6fd0; --primary-hover: #155db0; --primary-soft: #eaf1fb;
  --head: transparent; --chart: #1a6fd0;
  --danger: #d23047; --danger-soft: #fdeef0; --warning: #a86400; --warning-soft: #fff4e2;
  --success: #12845a; --success-soft: #e7f6ee; --info: #1a6fd0; --info-soft: #eaf1fb;
  --photo: #f1f3f6;
  --shadow: 0 2px 8px rgba(27, 31, 75, .08);
  --shadow-sm: 0 1px 2px rgba(27, 31, 75, .05);
  /* One set of roundings everywhere: surfaces, controls (and the cards inside a surface), chips, menu tiles; counts are circles. */
  --r-card: 12px; --r-ctl: 8px; --r-chip: 6px; --r-tile: 10px;
  --radius: var(--r-ctl); --radius-sm: var(--r-chip);
  /* The round font everywhere (app.css: Nunito as "Technik Sans"). */
  --font: "Technik Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-design="touch"][data-theme="dark"] {
  --t-rail: #0a0b24; --t-rail-ink: #8c90b8; --t-rail-hover: #181b45; --t-rail-avatar: #1d2150;
  --t-side: #11143a;
  --bg: #0e1030; --surface: #15183f; --surface-2: #1b1f4b; --stripe: #181b44; --hover: #1f2352; --btn-hover: #23285b; --press: #2a2f69;
  --line: #1d2150; --border: #262a5c; --border-strong: #383d7c; --input-border: #2f346a;
  --text: #d9daf0; --text-strong: #f4f4fd; --muted: #9295bd;
  --link: #5c9de8; --blue: #1a6fd0; --blue-dark: #155db0; --blue-line: #2b4f80; --focus: #5c9de8; --blue-soft: rgba(26, 111, 208, .2);
  --subnav-active: rgba(26, 111, 208, .2); --primary: #1a6fd0; --primary-hover: #2a7fe0; --primary-soft: rgba(26, 111, 208, .2);
  --t-cta: #1a6fd0; --chart: #1a6fd0;
  --danger: #ff6b7f; --danger-soft: rgba(255, 107, 127, .12); --warning: #f3b54a; --warning-soft: rgba(243, 181, 74, .12);
  --success: #3ccf95; --success-soft: rgba(60, 207, 149, .12); --info: #5c9de8; --info-soft: rgba(26, 111, 208, .2);
  --photo: #dfe4ea;
  --shadow: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root[data-design="touch"][data-theme="system"] {
  --t-rail: #0a0b24; --t-rail-ink: #8c90b8; --t-rail-hover: #181b45; --t-rail-avatar: #1d2150;
  --t-side: #11143a;
  --bg: #0e1030; --surface: #15183f; --surface-2: #1b1f4b; --stripe: #181b44; --hover: #1f2352; --btn-hover: #23285b; --press: #2a2f69;
  --line: #1d2150; --border: #262a5c; --border-strong: #383d7c; --input-border: #2f346a;
  --text: #d9daf0; --text-strong: #f4f4fd; --muted: #9295bd;
  --link: #5c9de8; --blue: #1a6fd0; --blue-dark: #155db0; --blue-line: #2b4f80; --focus: #5c9de8; --blue-soft: rgba(26, 111, 208, .2);
  --subnav-active: rgba(26, 111, 208, .2); --primary: #1a6fd0; --primary-hover: #2a7fe0; --primary-soft: rgba(26, 111, 208, .2);
  --t-cta: #1a6fd0; --chart: #1a6fd0;
  --danger: #ff6b7f; --danger-soft: rgba(255, 107, 127, .12); --warning: #f3b54a; --warning-soft: rgba(243, 181, 74, .12);
  --success: #3ccf95; --success-soft: rgba(60, 207, 149, .12); --info: #5c9de8; --info-soft: rgba(26, 111, 208, .2);
  --photo: #dfe4ea;
  --shadow: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  color-scheme: dark;
} }

[data-design="touch"] body { font-size: 15px; line-height: 1.5; -webkit-tap-highlight-color: transparent; background: var(--bg); }
[data-design="touch"] h1, [data-design="touch"] h2, [data-design="touch"] h3 { font-weight: 650; color: var(--text-strong); letter-spacing: 0; }
[data-design="touch"] h2 { font-size: 17px; }
[data-design="touch"] h3 { font-size: 15px; }
[data-design="touch"] ::selection { background: rgba(26, 111, 208, .22); }
[data-design="touch"] * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
[data-design="touch"] svg.icon { stroke-width: 1.7; }
[data-design="touch"] a:hover { text-decoration: none; }

/* ---------------------------------------------------------------- frame */
/* The rail: compact (icons) or wide (names and the whole logo). Compact, it
   opens over the page while the pointer is on it and closes when it leaves;
   "Keep the menu open" makes it wide (remembered on the device). */
:root[data-design="touch"] { --rail-c: 80px; --rail-x: 248px; --rail-w: var(--rail-c); --side-x: 248px; --z: 1; --vh100: calc(100vh / var(--z)); }
:root[data-design="touch"][data-rail="wide"] { --rail-w: var(--rail-x); }
.t-shell { display: grid; grid-template-columns: var(--rail-w) var(--side-x) minmax(0, 1fr); min-height: var(--vh100); transition: grid-template-columns .2s ease; }
.t-body:not(.t-has-side) .t-shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

.t-rail { position: sticky; top: 0; height: var(--vh100); width: var(--rail-w); z-index: 60; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 0 16px; background: var(--t-rail); overflow: hidden; transition: width .2s ease; }
.t-rail.is-open { width: var(--rail-x); box-shadow: var(--shadow); }
.t-rail-logo { position: relative; flex: none; display: block; height: 48px; margin: 0 16px; }
.t-rail-logo img { position: absolute; top: 50%; transform: translateY(-50%); transition: opacity .15s ease; }
.t-logo-mark { left: 6px; width: 36px; height: 36px; object-fit: contain; }
.t-logo-full { left: 8px; width: auto; height: 22px; opacity: 0; }
.t-rail.is-open .t-logo-full, [data-rail="wide"] .t-logo-full { opacity: 1; }
.t-rail.is-open .t-logo-mark, [data-rail="wide"] .t-logo-mark { opacity: 0; }
.t-rail-items { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 2px 16px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.t-rail-items::-webkit-scrollbar { display: none; }
.t-rail-bottom { display: flex; flex-direction: column; gap: 6px; padding: 0 16px; }
/* An item keeps its icon where it is (centred in the compact rail); the name
   comes next to it as the rail opens. */
.t-rail-item, .t-account-btn { position: relative; flex: none; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 13px; overflow: hidden;
  border-radius: var(--r-tile); color: var(--t-rail-ink); background: none; border: 0; font: inherit; cursor: pointer; text-align: left; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease; }
.t-rail-item svg.icon { flex: none; width: 22px; height: 22px; }
.t-rail-item:hover, .t-account-btn:hover { background: var(--t-rail-hover); color: #fff; text-decoration: none; }
.t-rail-item:active { background: var(--t-rail-hover); }
.t-rail-item.active { background: var(--blue); color: #fff; }
.t-rail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; opacity: 0; transition: opacity .15s ease; }
.t-rail.is-open .t-rail-label, [data-rail="wide"] .t-rail-label { opacity: 1; transition-delay: .05s; }
.t-dot { position: absolute; top: 4px; left: 28px; --b: 18px; background: var(--blue); color: #fff; transition: left .2s ease, top .2s ease; }
.t-rail.is-open .t-dot, [data-rail="wide"] .t-rail .t-dot { left: auto; right: 12px; top: 13px; --b: 22px; }
.t-rail-item.active .t-dot { background: #fff; color: var(--blue); }
.t-rail-pin svg.icon { transition: opacity .15s ease; }
[data-rail="wide"] .t-rail-pin svg.icon { transform: rotate(180deg); }
.t-rail-pin { opacity: .85; }
[data-rail="wide"] .t-pin-open, :root:not([data-rail="wide"]) .t-pin-close { display: none; }
.t-rail-pin:hover { opacity: 1; }

/* The account bubble (the photo, else the initials) and its card. */
.t-account { position: relative; }
.t-account-btn { list-style: none; padding: 0; gap: 14px; }
.t-account-btn::-webkit-details-marker { display: none; }
.t-avatar { flex: none; width: 48px; height: 48px; border-radius: var(--r-tile); display: grid; place-items: center; overflow: hidden;
  background: var(--t-rail-avatar); color: #fff; font-size: 15px; font-weight: 700; transition: background-color .15s ease; }
.t-avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-account-btn:hover { background: none; }
.t-account-btn:hover .t-avatar, .t-account[open] .t-avatar { background: var(--blue); }
.t-account-card { position: fixed; left: calc(var(--rail-w) + 8px); bottom: 14px; width: 340px; max-height: calc(var(--vh100) - 28px); overflow-y: auto; z-index: 80;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); padding-bottom: 8px;
  animation: t-fade .15s ease-out both; white-space: normal; }
.t-rail.is-open .t-account-card { left: calc(var(--rail-x) + 8px); }
.t-account-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  margin-top: 40px; padding: 40px 18px 16px; border-bottom: 1px solid var(--line); }
.t-account-head b { font-size: 16px; font-weight: 650; color: var(--text-strong); }
.t-account-head .muted { font-size: 13.5px; }
.t-account-mark { position: absolute; top: -32px; width: 64px; height: 64px; border-radius: var(--r-card); display: grid; place-items: center;
  background: var(--t-rail); border: 4px solid var(--surface); }
.t-account-mark img { width: 34px; height: 34px; object-fit: contain; }
.t-account-mark.has-photo { overflow: hidden; background: var(--surface-2); }
.t-account-mark.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-org { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: var(--r-chip); background: var(--surface-2);
  color: var(--muted); font-size: 13px; font-weight: 600; }
.t-org svg.icon { width: 16px; height: 16px; }
.t-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 11px 18px; color: var(--text-strong); background: none;
  border: 0; font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.t-menu-row svg.icon { width: 19px; height: 19px; color: var(--muted); }
.t-menu-row:hover { background: var(--hover); text-decoration: none; }
.t-menu-value { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 13.5px; }
.t-menu-form select { flex: 1; min-height: 40px !important; }
.t-menu-sep { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.t-langs { cursor: default; }
.t-lang-list { display: flex; gap: 6px; flex-wrap: wrap; }
.t-lang-list a { min-width: 42px; padding: 6px 10px; border-radius: var(--r-chip); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
.t-lang-list a[aria-current="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.t-lang-list a:hover { text-decoration: none; background: var(--hover); }

/* Appearance (both rows: design and colours). */
[data-design="touch"] .appearance { padding: 10px 18px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
[data-design="touch"] .appearance-label { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; font-weight: 500; color: var(--text-strong); }
[data-design="touch"] .appearance-label svg.icon { width: 19px; height: 19px; color: var(--muted); }
[data-design="touch"] .theme-switch { display: flex; gap: 4px; padding: 4px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface-2); }
[data-design="touch"] .theme-switch:last-child { margin-bottom: 0; }
[data-design="touch"] .theme-switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 8px;
  border: 0; border-radius: var(--r-chip); background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
[data-design="touch"] .theme-switch button svg.icon { width: 16px; height: 16px; }
[data-design="touch"] .theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* The side menu: a group name in plain grey, the pages under it, the open one solid blue. */
.t-side { position: sticky; top: 0; height: var(--vh100); overflow-y: auto; z-index: 30; padding: 26px 14px 24px; background: var(--t-side);
  border-right: 1px solid var(--border); }
.t-side-group + .t-side-group { margin-top: 22px; }
.t-side-head { padding: 0 12px 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.t-side-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; margin-bottom: 2px; border-radius: var(--r-ctl);
  color: var(--text); font-size: 14.5px; font-weight: 500; line-height: 1.3; transition: background-color .15s ease, color .15s ease; }
.t-side-item svg.icon { flex: none; width: 19px; height: 19px; color: var(--muted); transition: color .15s ease; }
.t-side-item:hover { background: var(--hover); color: var(--text-strong); text-decoration: none; }
.t-side-item:active { background: var(--press); }
.t-side-item.active { background: var(--blue); color: #fff; }
.t-side-item.active svg.icon { color: #fff; }
.t-count { margin-left: auto; --b: 24px; background: var(--blue-soft); color: var(--link); }
.t-count.warn { background: var(--warning-soft); color: var(--warning); }
.t-side-item.active .t-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* The page: the path to it, its title (the page's own head), the tools on the right. */
.t-main { min-width: 0; padding: 22px clamp(16px, 3vw, 40px) 48px; }
.t-top { display: flex; align-items: center; gap: 12px; max-width: 1320px; min-height: 44px; margin: 0 auto 18px; }
.t-title { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 650; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; }
.t-crumbs span { overflow: hidden; text-overflow: ellipsis; }
.t-crumbs svg.icon { flex: none; width: 15px; height: 15px; }
.t-crumbs [aria-current] { color: var(--text-strong); font-weight: 600; }
.t-tools { display: flex; align-items: center; gap: 8px; }
/* The tools at the top right: just the icon; a background only under the pointer or finger. */
.t-tool, .t-side-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-ctl); flex: none;
  background: none; border: 0; color: var(--text-strong); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.t-tool svg.icon, .t-side-toggle svg.icon { width: 20px; height: 20px; }
.t-tool:hover, .t-side-toggle:hover { background: var(--hover); text-decoration: none; }
.t-tool:active, .t-side-toggle:active { background: var(--press); }
.t-tool .t-dot { top: -6px; right: -6px; left: auto; --b: 20px; background: var(--blue); color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.t-side-toggle { display: none; }
.t-lock { margin: 0; }
.t-top > .t-lock { margin-left: -4px; }
/* Who is signed in and the logo: only in the top bar of a tablet or handheld (below). */
.t-who, .t-top-logo { display: none; }
.t-top-logo img { height: 22px; width: auto; }
.t-top-logo .t-logo-on-dark { display: none; }
:root[data-theme="dark"] .t-top-logo .t-logo-on-light { display: none; }
:root[data-theme="dark"] .t-top-logo .t-logo-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .t-top-logo .t-logo-on-light { display: none; }
  :root[data-theme="system"] .t-top-logo .t-logo-on-dark { display: block; }
}
.t-search { position: relative; }
.t-search svg.icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
[data-design="touch"] .t-search input[type=search] { width: clamp(170px, 24vw, 320px); min-height: 44px; padding-left: 42px; border-radius: var(--r-ctl); background: var(--surface); }
.t-content { max-width: 1320px; margin: 0 auto; }
.t-main > .banner { max-width: 1320px; margin: 0 auto 16px; }
/* The settings tabs are the side menu here. */
[data-design="touch"] .t-content > nav.tabs.settings-tabs { display: none; }

/* ---------------------------------------------------------------- components */
[data-design="touch"] .page-head { align-items: flex-end; margin-bottom: 20px; }
[data-design="touch"] .page-head h1 { font-size: 24px; font-weight: 700; line-height: 1.25; }
[data-design="touch"] .page-head .sub { margin-top: 4px; color: var(--muted); font-size: 14px; }
[data-design="touch"] .page-head .actions { gap: 8px; }
[data-design="touch"] .card, [data-design="touch"] .intro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; margin-bottom: 16px; box-shadow: none; }
[data-design="touch"] .card > h2:first-child, [data-design="touch"] .card > input[type=hidden] + h2, [data-design="touch"] .card-head {
  margin: -20px -20px 14px; padding: 18px 20px 0; background: none; color: var(--text-strong); font-size: 16.5px; font-weight: 650; min-height: 0; }
[data-design="touch"] .card-head h2 { font-size: 16.5px; margin: 0; }
[data-design="touch"] .card > h2:first-child a, [data-design="touch"] .card-head a:not(.btn) { color: var(--link); }
[data-design="touch"] .card > h2:first-child .muted, [data-design="touch"] .card-head h2 .muted, [data-design="touch"] .card-head .muted { color: var(--muted); font-weight: 500; }
[data-design="touch"] .card.flush { padding: 0; overflow: hidden; }
[data-design="touch"] .card.flush .card-head, [data-design="touch"] .card.flush > h2:first-child { margin: 0; padding: 18px 20px 12px; }
[data-design="touch"] .card h2:not(:first-child) { color: var(--text-strong); }
[data-design="touch"] .card-pad { padding: 16px 20px; }
[data-design="touch"] .grid { gap: 16px; }

/* Figures: white cards like the rest, the name in plain grey above the number. */
[data-design="touch"] .stats { gap: 12px; }
[data-design="touch"] .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; transition: border-color .15s ease; }
[data-design="touch"] a.stat:hover { border-color: var(--blue-line); text-decoration: none; }
[data-design="touch"] .stat .label { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
[data-design="touch"] .stat .value { margin-top: 4px; color: var(--text-strong); font-size: 24px; font-weight: 700; }
[data-design="touch"] .stat .hint { color: var(--muted); }
[data-design="touch"] .stat.warn .value { color: var(--warning); }
[data-design="touch"] .stat.bad .value { color: var(--danger); }

[data-design="touch"] .btn { min-height: 44px; padding: 9px 16px; gap: 8px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-strong); font-size: 14.5px; font-weight: 600; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
[data-design="touch"] .btn:hover { background: var(--hover); text-decoration: none; }
[data-design="touch"] .btn:active { background: var(--press); }
/* A button never runs out of its box: a long text wraps. */
[data-design="touch"] .btn { white-space: normal; text-align: center; line-height: 1.25; }
[data-design="touch"] .btn svg.icon { width: 18px; height: 18px; }
[data-design="touch"] .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
[data-design="touch"] .btn-primary, [data-design="touch"] .btn-accent { background: var(--blue); border-color: var(--blue); color: #fff; }
[data-design="touch"] .btn-primary:hover, [data-design="touch"] .btn-accent:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
[data-design="touch"] .btn-primary:active, [data-design="touch"] .btn-accent:active { background: var(--blue-dark); }
[data-design="touch"] .btn-danger { background: var(--surface); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); color: var(--danger); }
[data-design="touch"] .btn-danger:hover { background: var(--danger-soft); }
[data-design="touch"] .btn-ghost { background: none; border-color: transparent; }
[data-design="touch"] .btn-ghost:hover { background: var(--hover); }
[data-design="touch"] .btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
[data-design="touch"] .btn-sm svg.icon { width: 16px; height: 16px; }
[data-design="touch"] .btn-lg { min-height: 52px; padding: 12px 20px; font-size: 15.5px; }
[data-design="touch"] .btn[disabled], [data-design="touch"] .btn.disabled { opacity: .5; box-shadow: none; }
[data-design="touch"] .icon-btn { min-width: 40px; min-height: 40px; border-radius: var(--r-ctl); }

[data-design="touch"] label { font-size: 13.5px; font-weight: 600; color: var(--text); }
[data-design="touch"] input[type=text], [data-design="touch"] input[type=email], [data-design="touch"] input[type=password], [data-design="touch"] input[type=search],
[data-design="touch"] input[type=number], [data-design="touch"] input[type=date], [data-design="touch"] input[type=time], [data-design="touch"] input[type=tel], [data-design="touch"] input[type=url],
[data-design="touch"] input[type=file], [data-design="touch"] input:not([type]), [data-design="touch"] select, [data-design="touch"] textarea {
  min-height: 44px; padding: 10px 13px; border-radius: var(--r-ctl); border: 1px solid var(--input-border); background: var(--surface); color: var(--text-strong);
  font-size: 15px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
[data-design="touch"] input::placeholder, [data-design="touch"] textarea::placeholder { color: var(--muted); opacity: .85; }
[data-design="touch"] textarea { min-height: 96px; }
[data-design="touch"] input:focus, [data-design="touch"] select:focus, [data-design="touch"] textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); outline: none; }
[data-design="touch"] input[type=checkbox], [data-design="touch"] input[type=radio] { width: 20px; height: 20px; accent-color: var(--blue); }
[data-design="touch"] .check { min-height: 40px; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--text); }
[data-design="touch"] .field { margin-bottom: 14px; }
[data-design="touch"] .field .hint { color: var(--muted); font-size: 13px; font-weight: 400; }
[data-design="touch"] .form-actions { gap: 10px; }

[data-design="touch"] .table-wrap { border-radius: var(--r-ctl); }
[data-design="touch"] .table th, [data-design="touch"] .table td { padding: 13px 14px; border-bottom-color: var(--line); }
[data-design="touch"] .table th { background: none; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
[data-design="touch"] .table tbody tr { transition: background-color .15s ease; }
[data-design="touch"] .table tbody tr:hover { background: var(--hover); }
[data-design="touch"] .card.flush .table th:first-child, [data-design="touch"] .card.flush .table td:first-child { padding-left: 20px; }
[data-design="touch"] .card.flush .table th:last-child, [data-design="touch"] .card.flush .table td:last-child { padding-right: 20px; }
[data-design="touch"] .table td.thumb img, [data-design="touch"] .table td.thumb .ph { border-radius: var(--r-chip); }

/* Labels inside a card: plain text, no box or background (no cards in cards);
   the colour of the text says what it is, a status keeps its coloured dot. */
[data-design="touch"] .badge, [data-design="touch"] .tag-ok, [data-design="touch"] .tag-no, [data-design="touch"] .status, [data-design="touch"] .pill-planned,
[data-design="touch"] .pill-warranty, [data-design="touch"] .pill-count, [data-design="touch"] .bike-no, [data-design="touch"] .label-blue {
  padding: 0; margin-top: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.4; }
[data-design="touch"] .badge { color: var(--muted); }
[data-design="touch"] .badge.green, [data-design="touch"] .tag-ok { color: var(--success); }
[data-design="touch"] .badge.red, [data-design="touch"] .tag-no, [data-design="touch"] .pill-count.full { color: var(--danger); }
[data-design="touch"] .badge.orange, [data-design="touch"] .pill-warranty { color: var(--warning); }
[data-design="touch"] .badge.blue, [data-design="touch"] .label-blue { color: var(--link); }
[data-design="touch"] .badge.teal { color: #0f8790; }
[data-design="touch"] .status { gap: 7px; color: var(--text); white-space: nowrap; }
[data-design="touch"] .status::before { width: 8px; height: 8px; }
/* In the repair cards and rows the colour is already the line on the left: no dot there. */
[data-design="touch"] .job .status::before, [data-design="touch"] .job-card .status::before, [data-design="touch"] [data-live-rows] .status::before { display: none; }
[data-design="touch"] .pill-planned { gap: 5px; color: var(--text); font-weight: 500; }
[data-design="touch"] .pill-planned svg.icon { width: 15px; height: 15px; color: var(--muted); }
[data-design="touch"] a.pill-planned { color: var(--link); }
[data-design="touch"] .pill-count { color: var(--muted); }
[data-design="touch"] .bike-no, [data-design="touch"] .job .what span.bike-no, :root[data-design="touch"][data-theme="dark"] .bike-no { color: var(--text-strong); background: none; font-weight: 700; }
[data-design="touch"] .bike-no { vertical-align: baseline; }
[data-design="touch"] .job .what span.bike-no { display: inline; margin: 0; padding: 0; }
[data-design="touch"] .what b .bike-no, [data-design="touch"] h1 .bike-no { font-size: inherit; font-weight: inherit; line-height: inherit; vertical-align: baseline; }
[data-design="touch"] h1 .status, [data-design="touch"] h1 .badge, [data-design="touch"] h1 .pill-warranty, [data-design="touch"] h2 .tag-ok, [data-design="touch"] h2 .tag-no { margin-left: 8px; font-size: 14px; vertical-align: middle; }
[data-design="touch"] button.tag-ok, [data-design="touch"] button.tag-no { padding: 4px 6px; margin: -4px -6px; border-radius: var(--r-chip); transition: background-color .15s ease; }
[data-design="touch"] button.tag-ok:hover, [data-design="touch"] button.tag-no:hover { background: var(--hover); }
/* Counts everywhere: the same round bubble. */
[data-design="touch"] .nav-count, [data-design="touch"] .kpi b { --b: 24px; background: var(--blue-soft); color: var(--link); }
[data-design="touch"] .nav-count.warn { background: var(--warning-soft); color: var(--warning); }

/* The status chips above the repairs: bordered chips with a status dot (as filter chips). */
[data-design="touch"] .kpis { gap: 8px; margin-bottom: 14px; }
[data-design="touch"] .kpi { position: relative; gap: 10px; min-height: 44px; padding: 8px 10px 8px 14px; border-radius: var(--r-ctl); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-strong); font-size: 14px; font-weight: 600; box-shadow: none; transition: background-color .15s ease, border-color .15s ease; }
[data-design="touch"] .kpi.st { box-shadow: none; }
[data-design="touch"] .kpi.st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--border-strong)); }
[data-design="touch"] .kpi:hover { border-color: var(--blue); background: var(--blue-soft); text-decoration: none; }

[data-design="touch"] .flash, [data-design="touch"] .banner { border-radius: var(--r-ctl); padding: 12px 16px; font-weight: 500; }
[data-design="touch"] .flash-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
[data-design="touch"] .flash-error, [data-design="touch"] .banner-bad { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
[data-design="touch"] .flash-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: var(--info); }
[data-design="touch"] .banner-warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }

/* Tabs: a line under the open one. */
[data-design="touch"] .tabs { gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; margin-bottom: 16px; }
[data-design="touch"] .tabs a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14.5px; transition: color .15s ease, border-color .15s ease; }
[data-design="touch"] .tabs a:hover { color: var(--text-strong); background: none; text-decoration: none; }
[data-design="touch"] .tabs.kind-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
[data-design="touch"] .tabs.kind-tabs::-webkit-scrollbar { display: none; }
[data-design="touch"] .tabs.kind-tabs a { white-space: nowrap; }
[data-design="touch"] .chips { gap: 4px 18px; margin: 8px 0 14px; }
[data-design="touch"] .chips a { min-height: 36px; font-size: 13.5px; }
[data-design="touch"] .rent-grid th, [data-design="touch"] .rent-grid td { height: 36px; }
[data-design="touch"] .rent-grid td a { line-height: 36px; }
[data-design="touch"] .tabs a.active { background: none; color: var(--blue); border-color: var(--blue); }
[data-design="touch"] .tabs + .card.flush, [data-design="touch"] .tabs-flush + .card.flush { border-top: 1px solid var(--border); margin-top: 0; }
/* Sub-pages (the mechanics' lists on a phone or tablet): the same line under the open one as the tabs. */
[data-design="touch"] .subnav { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
[data-design="touch"] .subnav a { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--muted); font-size: 14.5px; font-weight: 600; transition: color .15s ease, border-color .15s ease; }
[data-design="touch"] .subnav a:hover { background: none; color: var(--text-strong); }
[data-design="touch"] .subnav a.active { background: none; color: var(--blue); border-bottom-color: var(--blue); }
[data-design="touch"] .pager a, [data-design="touch"] .pager span { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-ctl); }
[data-design="touch"] .quicklinks { gap: 8px; }
[data-design="touch"] .quicklinks a { min-height: 50px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--border); font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease; }
[data-design="touch"] .quicklinks a:hover { background: var(--blue-soft); border-color: var(--blue); }
[data-design="touch"] .quicklinks svg.icon { width: 19px; height: 19px; color: var(--blue); }
[data-design="touch"] .filters { gap: 10px; align-items: center; }
[data-design="touch"] .filters .field { margin-bottom: 0; }
[data-design="touch"] .filters .field label + input, [data-design="touch"] .filters .field label + select { margin-top: 4px; }
[data-design="touch"] .kv dt { color: var(--muted); }
[data-design="touch"] .empty { color: var(--muted); }
[data-design="touch"] hr { border-top-color: var(--line); }

[data-design="touch"] dialog { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow); animation: t-fade .15s ease-out both; }
[data-design="touch"] dialog::backdrop { background: rgba(8, 15, 26, .5); }

/* Repairs as cards: a status line on the left, the border turns blue under the pointer. */
[data-design="touch"] .jobs { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
[data-design="touch"] .job { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; border: 1px solid var(--border);
  border-radius: var(--r-ctl); background: var(--surface); color: var(--text); box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease; }
[data-design="touch"] .job:last-child { border-bottom: 1px solid var(--border); }
[data-design="touch"] .job.st-card { box-shadow: none; padding-left: 20px; }
[data-design="touch"] .job.st-card::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--st, var(--border-strong)); }
[data-design="touch"] .job:hover { border-color: var(--blue-line); background: var(--hover); text-decoration: none; }
[data-design="touch"] .job .what b { color: var(--text-strong); font-size: 15px; font-weight: 650; }
[data-design="touch"] .job .what span { font-size: 13px; margin-top: 2px; }
[data-design="touch"] .job-time { width: auto; min-width: 48px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--text-strong); font-size: 14px; font-weight: 650; text-align: left; }
[data-design="touch"] .job-mech { font-size: 13px; }
[data-design="touch"] .job .what b small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
[data-design="touch"] .job-amount { color: var(--text-strong); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-design="touch"] .job .job-meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
[data-design="touch"] .job .job-meta:empty { display: none !important; }
[data-design="touch"] .job .job-meta svg.icon { width: 14px; height: 14px; }
[data-design="touch"] .job .job-meta span { display: inline-flex; align-items: center; gap: 4px; margin-top: 0; font-size: inherit; }
[data-design="touch"] .wo-cards { gap: 10px; margin: 0; padding: 0; }
[data-design="touch"] .wo-cards .job { padding-top: 16px; padding-bottom: 16px; }
[data-design="touch"] .wo-cards .job-time { min-width: 40px; }
@media (max-width: 880px) {
  [data-design="touch"] .wo-cards .job { flex-wrap: wrap; }
  [data-design="touch"] .wo-cards .job .what { flex-basis: calc(100% - 70px); }
  [data-design="touch"] .wo-cards .job-mech { display: none; }
}
/* Numbers and labels that always fit their widget. */
[data-design="touch"] .dash-w .stat .value { font-size: clamp(17px, 10cqi, 24px); }
[data-design="touch"] .dash-w .stat .label { font-size: clamp(11px, 5.4cqi, 13px); }
[data-design="touch"] .dash-w .stat .hint { font-size: 12.5px; }

/* The repairs list: each repair its own card row. */
[data-design="touch"] .card.flush[data-live-table] { background: none; border: 0; padding: 0; overflow: visible; }
[data-design="touch"] [data-live-rows] { overflow: visible; }
[data-design="touch"] [data-live-rows] .table { border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; }
[data-design="touch"] [data-live-rows] .table thead th { border: 0; padding-top: 6px; padding-bottom: 2px; }
[data-design="touch"] [data-live-rows] .table tbody td { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background-color .15s ease, border-color .15s ease; }
[data-design="touch"] [data-live-rows] .table tbody td:first-child { border-left: 1px solid var(--border); border-radius: var(--r-ctl) 0 0 var(--r-ctl); box-shadow: inset 3px 0 0 var(--st, transparent); padding-left: 20px; }
[data-design="touch"] [data-live-rows] .table tbody td:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
[data-design="touch"] [data-live-rows] .table tbody tr:hover { background: none; }
[data-design="touch"] [data-live-rows] .table tbody tr:hover td { background: var(--hover); border-color: var(--blue-line); }
[data-design="touch"] tr.st { box-shadow: none; }

/* The home screen's widgets. */
[data-design="touch"] .dash { gap: 16px; }
[data-design="touch"] .dash-w > .card.dash-card { padding: 20px; }
[data-design="touch"] .dash-w > .card.dash-card > h2:first-child, [data-design="touch"] .dash-w > .card.dash-card > .card-head { margin: -20px -20px 12px; padding: 18px 20px 0; }
[data-design="touch"] .dash-w > .card.flush.dash-card { padding: 0; }
[data-design="touch"] .dash-w > .card.flush.dash-card > .card-head { margin: 0; padding: 18px 20px 10px; }
[data-design="touch"] .dash-w > .stat.dash-card { padding: 16px 18px; }
[data-design="touch"] .dash-root.editing .dash-w { outline: 2px dashed var(--blue-line); outline-offset: 4px; border-radius: var(--r-card); }
[data-design="touch"] .dash-root.editing .dash-tools { border-radius: var(--r-ctl); padding: 4px; gap: 3px; box-shadow: var(--shadow); }
[data-design="touch"] .dash-tools button { width: 32px; height: 34px; border-radius: var(--r-chip); }
@container (max-width: 240px) { [data-design="touch"] .dash-tools button { width: 25px; height: 30px; } }
[data-design="touch"] .dash-root.editing .dash-bar { border-radius: var(--r-ctl); padding: 12px 14px; border-color: var(--border); }
[data-design="touch"] .dash-bar select { min-height: 44px; }
[data-design="touch"] .bars .bar span.col { border-radius: 4px 4px 0 0; }

/* The planner's cards: the same as the repair cards, small. */
[data-design="touch"] .job-card { min-height: 66px; padding: 9px 8px 8px 18px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface);
  box-shadow: none; font-size: 13px; transition: background-color .15s ease, border-color .15s ease; }
[data-design="touch"] .job-card.st-card { box-shadow: none; }
[data-design="touch"] .job-card.st-card::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--st, var(--border-strong)); }
[data-design="touch"] .job-card:hover { border-color: var(--blue-line); background: var(--hover); z-index: 1; }
[data-design="touch"] .job-card.drag-ghost { box-shadow: var(--shadow); }
[data-design="touch"] .jc-name { font-size: 14px; }
[data-design="touch"] .jc-meta { font-size: 12.5px; }
[data-design="touch"] .jc-tools { padding: 3px; gap: 2px; border-radius: var(--r-chip); background: var(--surface-2); }
[data-design="touch"] .jc-tools button { width: 28px; height: 28px; border-radius: 6px; }
[data-design="touch"] .job-card .jc-meta { padding-right: 100px; min-height: 30px; line-height: 30px; }
[data-design="touch"] .slot { min-height: 54px; }
[data-design="touch"] .daycol { border-radius: var(--r-card); }
[data-design="touch"] .daycol { padding: 12px; background: var(--surface); }
[data-design="touch"] .daycol.today { border-color: var(--blue); box-shadow: none; }
[data-design="touch"] .dayhead b { font-size: 15px; font-weight: 650; }
[data-design="touch"] .dayhead .day-date { font-size: 12.5px; }
[data-design="touch"] progress.day-fill { height: 6px; border-radius: 3px; margin: 6px 0 12px; }
[data-design="touch"] .slot { border-radius: var(--r-ctl); }
[data-design="touch"] .slot-add, [data-design="touch"] .slot-free { min-height: 52px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
[data-design="touch"] .slot-free { min-height: 0; }
[data-design="touch"] .products .table th { text-transform: none; font-size: 13px; }
[data-design="touch"] .planner-toolbar { gap: 10px; margin-bottom: 16px; }
[data-design="touch"] .seg { padding: 3px; gap: 3px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface); }
[data-design="touch"] .seg .btn, [data-design="touch"] .seg .btn:first-child, [data-design="touch"] .seg .btn:last-child { margin: 0; min-height: 38px; border: 0; border-radius: var(--r-chip); background: none; }
[data-design="touch"] .seg .btn:hover { background: var(--hover); }
[data-design="touch"] .seg .btn.is-on { background: var(--blue); color: #fff; }
[data-design="touch"] .planner-jump input[type=date], [data-design="touch"] .planner-mech select { min-height: 44px; }
[data-design="touch"] .planner { gap: 16px; }
[data-design="touch"] .planner-board { gap: 12px; }
[data-design="touch"] .planner-left { padding: 12px 16px; }
[data-design="touch"] .planner-left .card-head, [data-design="touch"] .planner-left .card-head h2 { margin: 0; padding: 0; }
[data-design="touch"] .planner-list { gap: 8px; }
[data-design="touch"] dialog h2 { padding: 20px 22px 6px; background: none; color: var(--text-strong); font-size: 18px; font-weight: 650; }
[data-design="touch"] .dialog-body { padding: 10px 22px 20px; }
[data-design="touch"] .slot-chips li { padding: 6px 6px 6px 12px; border-radius: var(--r-chip); background: var(--surface-2); }
[data-design="touch"] .plan-pick .job-card { min-height: 56px; }
[data-design="touch"] .slot-free, [data-design="touch"] .slot .free { border-radius: var(--r-ctl); }

/* The till: the articles as product cards (photo on grey, name, price, a
   plus), the order on the right. */
[data-design="touch"] .pos { grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; }
[data-design="touch"] .pos-search svg { left: 14px; width: 19px; height: 19px; }
[data-design="touch"] .pos-search input { min-height: 48px; padding-left: 44px !important; font-size: 15px; }
[data-design="touch"] .pos-results li button, [data-design="touch"] .picker-results li button { min-height: 52px; border-radius: var(--r-ctl); margin-bottom: 6px; }
[data-design="touch"] .pos-results li button:hover { border-color: var(--blue); background: var(--blue-soft); }
[data-design="touch"] .quick { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
[data-design="touch"] .quick button { position: relative; min-height: 0; justify-content: flex-start; gap: 2px; padding: 8px 8px 12px; border: 1px solid var(--border);
  border-radius: var(--r-card); background: var(--surface); transition: border-color .15s ease, background-color .15s ease; }
[data-design="touch"] .quick button:hover { border-color: var(--blue); background: var(--surface); }
[data-design="touch"] .quick button:active { background: var(--blue-soft); }
[data-design="touch"] .quick .qk-img { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden; border-radius: var(--r-ctl);
  background: var(--photo); color: var(--border-strong); font-style: normal; }
[data-design="touch"] .quick .qk-img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
[data-design="touch"] .quick .qk-img svg.icon { width: 30px; height: 30px; color: #b3bccb; }
[data-design="touch"] .quick button b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; padding: 0 4px;
  color: var(--text-strong); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
[data-design="touch"] .quick button > span { padding: 2px 4px 0; color: var(--text-strong); font-size: 15px; font-weight: 700; }
[data-design="touch"] .quick .qk-add { position: absolute; right: 8px; bottom: 9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-ctl);
  background: var(--blue-soft); color: var(--blue); font-style: normal; transition: background-color .15s ease, color .15s ease; }
[data-design="touch"] .quick .qk-add svg.icon { width: 17px; height: 17px; stroke-width: 2; }
[data-design="touch"] .quick button:hover .qk-add { background: var(--blue); color: #fff; }
[data-design="touch"] .ticket { top: 22px; max-height: calc(var(--vh100) - 44px); padding: 20px; }
:root.tk-frameless[data-design="touch"] .ticket { top: calc(22px + var(--tb-h)); max-height: calc(var(--vh100) - 44px - var(--tb-h)); }
[data-design="touch"] .ticket .lines { margin: 4px -20px 0; padding: 0 20px; }
[data-design="touch"] .tline { padding: 10px 0; }
[data-design="touch"] .tline .desc { font-weight: 600; color: var(--text-strong); }
[data-design="touch"] .tline .amount { font-weight: 700; color: var(--text-strong); }
[data-design="touch"] .tline .meta { font-size: 12.5px; }
[data-design="touch"] .tline .controls input { min-height: 34px; padding: 4px 8px; border-radius: var(--r-chip); font-size: 14px; }
[data-design="touch"] .tline.locked { margin: 0 -20px; padding: 10px 20px; }
[data-design="touch"] .ticket-total { padding: 14px 0 2px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 22px; color: var(--text-strong); }
[data-design="touch"] .ticket-vat { font-size: 12.5px; }
[data-design="touch"] .paybtns { gap: 8px; margin-top: 14px; }
[data-design="touch"] .keypad button { min-height: 56px; border-radius: var(--r-ctl); font-size: 19px; }
[data-design="touch"] .wo-card, [data-design="touch"] .job, [data-design="touch"] .day { border-radius: var(--r-ctl); }
[data-design="touch"] .paybtns .btn { min-height: 56px; font-size: 15.5px; }
@media (max-width: 1180px) { [data-design="touch"] .pos { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ---------------------------------------------------------------- motion */
@keyframes t-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-out { to { opacity: 0; } }

/* Page changes: at once. The tapped menu item lights up straight away, the
   page dims while the next one comes and that one fades in briefly (no
   cross-document transition: it held every click back until the next page
   was drawn). */
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
.t-content { animation: t-fade .14s ease-out both; }
.t-leaving .t-content { opacity: .45; transition: opacity .12s ease; }
.t-rail-item.is-going { background: var(--blue); color: #fff; }
.t-side-item.is-going { background: var(--blue); color: #fff; }
.t-side-item.is-going svg.icon { color: #fff; }

/* The riding bike while a page loads: in the place of the page's content
   (not a window over it), and only when the page takes a moment. */
.t-loader { display: none; }
.t-loading .t-content, .t-loading .auth-card { display: none; }
.t-loading .t-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: calc(52vh / var(--z)); animation: t-fade .2s ease both; }
.t-bike { width: 150px; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.t-bike .t-tyre { stroke: var(--text-strong); stroke-width: 3.4; }
.t-bike .t-rim { stroke: var(--muted); stroke-width: 1.2; opacity: .6; }
.t-bike .t-hub { fill: var(--text-strong); stroke: none; }
.t-bike .t-spokes { stroke: var(--muted); stroke-width: 1; opacity: .7; }
.t-bike .t-frame { stroke: var(--blue); stroke-width: 3.4; }
.t-bike .t-parts { stroke: var(--text-strong); stroke-width: 3; }
.t-bike .t-ring { stroke: var(--text-strong); stroke-width: 2; }
.t-bike .t-crank path { stroke: var(--text-strong); stroke-width: 2.6; }
.t-bike .t-road path { stroke: var(--muted); stroke-width: 2.6; opacity: .5; }
.t-wheel, .t-crank { transform-box: view-box; transform-origin: 0 0; animation: t-spin .7s linear infinite; }
.t-crank { animation-duration: 1.1s; }
.t-ride { animation: t-bob .35s ease-in-out infinite alternate; }
.t-road { animation: t-road .6s linear infinite; }
@keyframes t-spin { to { transform: rotate(360deg); } }
@keyframes t-bob { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes t-road { from { transform: translateX(0); } to { transform: translateX(-26px); } }
.t-loader-text { color: var(--muted); font-weight: 600; font-size: 14px; }
/* The other kinds of business: a skateboard, a laptop, sound levels, a ring. */
.t-skate .t-tyre { stroke-width: 3; }
.t-laptop .t-track { fill: var(--surface-2); stroke: none; }
.t-laptop .t-bar { fill: var(--blue); stroke: none; animation: t-load 1.1s ease-in-out infinite; }
@keyframes t-load { from { transform: translateX(-20px); } to { transform: translateX(46px); } }
.t-levels .t-road-line { stroke: var(--muted); stroke-width: 2.6; opacity: .5; }
.t-levels .t-level { fill: var(--blue); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: t-eq .8s ease-in-out infinite alternate; }
.t-levels .t-level:nth-of-type(2) { animation-delay: -.3s; animation-duration: .7s; }
.t-levels .t-level:nth-of-type(3) { animation-delay: -.55s; animation-duration: .9s; }
.t-levels .t-level:nth-of-type(4) { animation-delay: -.15s; animation-duration: .75s; }
.t-levels .t-level:nth-of-type(5) { animation-delay: -.45s; animation-duration: .85s; }
@keyframes t-eq { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
.t-ring-loader { width: 84px; }
.t-ring-loader .t-ring-track { stroke: var(--border); stroke-width: 6; }
.t-ring-loader .t-ring-arc { stroke: var(--blue); stroke-width: 6; }
.t-ring-spin { transform-box: view-box; transform-origin: 40px 40px; animation: t-spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .t-content, .t-account-card, .t-loader, [data-design="touch"] dialog, [data-design="touch"] .auth-card { animation: none !important; }
  .t-wheel, .t-crank, .t-ride, .t-road, .t-laptop .t-bar, .t-levels .t-level, .t-ring-spin { animation-duration: 2s; }
}

/* ---------------------------------------------------------------- the sign-in pages */
[data-design="touch"] .auth { background: var(--bg); }
[data-design="touch"] .auth-side { background: var(--t-rail); color: #d4d6ee; }
[data-design="touch"] .auth-side h2 { color: #fff; font-size: 28px; font-weight: 700; }
[data-design="touch"] .auth-side li { color: #d4d6ee; font-size: 15px; }
[data-design="touch"] .auth-side li svg { color: #7fa6f7; }
[data-design="touch"] .auth-side .small { color: rgba(255, 255, 255, .65); }
[data-design="touch"] .auth-watermark { opacity: .06; filter: brightness(0) invert(1); }
[data-design="touch"] .auth-main { background: var(--bg); }
[data-design="touch"] .auth-card { border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px 28px 24px; background: var(--surface); box-shadow: none;
  animation: t-in .2s ease-out both; }
[data-design="touch"] .auth-card h1 { margin: 0 0 6px; padding: 20px 0 2px; background: none; color: var(--text-strong); font-size: 26px; font-weight: 700; }
[data-design="touch"] .auth-side .brand-logo { height: 30px; }
[data-design="touch"] .auth-card .lead { color: var(--muted); }
[data-design="touch"] .lang-switch a { border-radius: var(--r-chip); }
.auth-design { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
[data-design="touch"] .auth-design { padding: 4px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface-2); }
[data-design="touch"] .auth-design button { flex: 1; }
/* The PIN screen: the people as bordered tiles, the chosen one blue. */
[data-design="touch"] .person { min-height: 56px; padding: 10px 12px; border-radius: var(--r-ctl); transition: background-color .15s ease, border-color .15s ease; }
[data-design="touch"] .person:hover { background: var(--hover); }
[data-design="touch"] .person:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: none; }
[data-design="touch"] .avatar { width: 36px; height: 36px; border-radius: var(--r-ctl); background: var(--blue-soft); color: var(--blue); font-weight: 700; }
[data-design="touch"] .person:has(input:checked) .avatar { background: var(--blue); color: #fff; }
[data-design="touch"] .person .who b { font-weight: 650; color: var(--text-strong); }
[data-design="touch"] .pinpad { gap: 10px; }
[data-design="touch"] .pinpad button { min-height: 56px; border-radius: var(--r-ctl); background: var(--surface); font-weight: 600; transition: background-color .15s ease; }
[data-design="touch"] .pinpad button:hover { background: var(--hover); }
[data-design="touch"] .pinpad button:active { transform: none; background: var(--press); }
[data-design="touch"] .pinpad button.is-pressed { transform: none; background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
[data-design="touch"] .pinpad .enter, [data-design="touch"] .pinpad .enter:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-height: 780px) and (min-width: 881px) {
  .t-rail-items { gap: 4px; margin-top: 12px; }
  .t-rail-item, .t-account-btn { height: 44px; padding: 0 11px; }
  .t-account-btn { padding: 0 0 0 2px; }
  .t-avatar { width: 44px; height: 44px; }
  .t-rail-item svg.icon { width: 22px; height: 22px; }
  .t-dot { left: 26px; top: 2px; }
}
@media (max-width: 1180px) {
  :root[data-design="touch"] { --side-x: 224px; }
  .t-side { padding: 22px 10px 20px; }
}
@media (max-width: 880px) {
  .t-shell, .t-body:not(.t-has-side) .t-shell { grid-template-columns: minmax(0, 1fr); }
  .t-rail, .t-rail.is-open { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; flex-direction: row; gap: 4px; overflow: visible;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: var(--t-rail); box-shadow: none; }
  .t-rail-logo, .t-rail-pin { display: none; }
  .t-rail-items { flex-direction: row; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; gap: 4px; justify-content: flex-start; }
  .t-rail-bottom { flex-direction: row; gap: 4px; padding: 0; }
  .t-rail-item { width: 50px; height: 50px; padding: 0; justify-content: center; }
  .t-avatar { width: 50px; height: 50px; }
  .t-rail-label { display: none; }
  .t-dot, .t-rail.is-open .t-dot, [data-rail="wide"] .t-rail .t-dot { left: auto; right: 3px; top: 3px; --b: 18px; }
  .t-account-card, .t-rail.is-open .t-account-card { left: auto; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); width: min(330px, calc(100vw - 16px)); }
  .t-side { position: fixed; top: 0; left: 0; bottom: calc(64px + env(safe-area-inset-bottom)); width: min(300px, 86vw); height: auto; z-index: 55;
    transform: translateX(-104%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .t-side-open .t-side { transform: none; }
  .t-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(8, 15, 26, .45); animation: t-in .2s ease both; }
  .t-side-toggle { display: grid; }
  .t-main { padding: 14px 14px calc(92px + env(safe-area-inset-bottom)); }
  /* The top bar in one row: the menu and who is signed in, the logo in the
     middle, the lock in the corner; search and the other tools below. */
  .t-top { position: relative; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .t-side-toggle { order: 0; }
  .t-who { order: 1; display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto;
    max-width: calc(50% - 57px - 56px); overflow: hidden; color: var(--text-strong); font-size: 15px; font-weight: 600; white-space: nowrap; }
  .t-who span { overflow: hidden; text-overflow: ellipsis; }
  .t-who > span:first-child { flex: none; max-width: 100%; }
  .t-who-rest { flex: 0 1 auto; min-width: 0; white-space: pre; }
  .t-top-logo { display: block; position: absolute; left: 50%; top: 22px; transform: translate(-50%, -50%); line-height: 0; }
  .t-top > .t-lock { order: 2; margin-left: 0; }
  .t-crumbs { display: none; }
  .t-title { order: 3; flex-basis: 100%; font-size: 20px; }
  .t-tools { width: 100%; order: 3; }
  .t-search { flex: 1; min-width: 0; }
  .t-tools .t-tool[href="/monteur"], .t-tools .t-tool[href="/pos/last-receipt"] { display: none; }
  [data-design="touch"] .t-search input[type=search] { width: 100%; }
  [data-design="touch"] .card { padding: 16px; border-radius: var(--r-card); }
  [data-design="touch"] .card > h2:first-child, [data-design="touch"] .card > input[type=hidden] + h2, [data-design="touch"] .card-head { margin: -16px -16px 12px; padding: 14px 16px 0; }
  [data-design="touch"] .auth-side { display: none; }
  [data-design="touch"] .pos { grid-template-columns: minmax(0, 1fr); }
}
.t-scrim[hidden] { display: none; }
/* The mechanics' view on a tablet or handheld: the bar at the bottom is
   away until the arrow in the corner brings it up; its × puts it away. */
.t-rail-open, .t-rail-close { display: none; }
@media (max-width: 880px) {
  .t-rail-toggle .t-rail { transform: translateY(calc(100% + 4px)); transition: transform .2s ease; }
  .t-rail-toggle.t-rail-up .t-rail { transform: none; }
  .t-rail-toggle .t-rail-close { display: flex; width: 50px; height: 50px; padding: 0; justify-content: center; }
  .t-rail-toggle .t-rail-close svg.icon { width: 22px; height: 22px; }
  .t-rail-toggle .t-rail-open { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 58; display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-tile); background: var(--t-rail); color: #fff; box-shadow: var(--shadow); cursor: pointer;
    transition: opacity .15s ease; }
  .t-rail-toggle .t-rail-open svg.icon { width: 22px; height: 22px; stroke-width: 2; }
  .t-rail-toggle.t-rail-up .t-rail-open { opacity: 0; pointer-events: none; }
  .t-rail-toggle .t-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .t-rail-toggle .t-side { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .t-rail-toggle .t-rail { transition: none; } }
@media (max-width: 480px) {
  /* A handheld: the first name only, a smaller logo. */
  .t-who-rest { display: none; }
  .t-who { max-width: calc(50% - 47px - 56px); }
  .t-top-logo img { height: 18px; }
}

/* /admin › Servers: the updates list */
[data-design="touch"] .server-update { border-radius: var(--r-ctl); padding: 12px 14px; background: var(--surface); }
[data-design="touch"] .server-update progress { height: 8px; border-radius: 4px; overflow: hidden; }
[data-design="touch"] .server-pick { width: 22px; height: 22px; }
[data-design="touch"] dialog.ask-dialog .dialog-body { padding: 20px 20px 18px; }
[data-design="touch"] .ask-text { font-size: 15px; }

/* ---------------------------------------------------------------- size
   The whole design smaller or bigger (account menu › Size), remembered on
   the device. Heights of the screen are corrected for it (--vh100). */
:root[data-design="touch"][data-scale="75"] { zoom: 0.75; --z: 0.75; }
:root[data-design="touch"][data-scale="80"] { zoom: 0.8; --z: 0.8; }
:root[data-design="touch"][data-scale="85"] { zoom: 0.85; --z: 0.85; }
:root[data-design="touch"][data-scale="90"] { zoom: 0.9; --z: 0.9; }
:root[data-design="touch"][data-scale="95"] { zoom: 0.95; --z: 0.95; }
:root[data-design="touch"][data-scale="105"] { zoom: 1.05; --z: 1.05; }
:root[data-design="touch"][data-scale="110"] { zoom: 1.1; --z: 1.1; }
:root[data-design="touch"][data-scale="120"] { zoom: 1.2; --z: 1.2; }
:root[data-design="touch"][data-scale="130"] { zoom: 1.3; --z: 1.3; }
:root[data-design="touch"][data-scale="140"] { zoom: 1.4; --z: 1.4; }
[data-design="touch"] .auth { min-height: var(--vh100); }
.size-switch { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.size-switch output { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-design="touch"] .size-switch { padding: 4px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface-2); }
[data-design="touch"] .size-switch button { display: grid; place-items: center; width: 44px; height: 38px; border: 0; border-radius: var(--r-chip); background: var(--surface);
  color: var(--text-strong); cursor: pointer; box-shadow: var(--shadow-sm); }
[data-design="touch"] .size-switch button[disabled] { opacity: .4; cursor: default; }
[data-design="touch"] .size-switch button svg.icon { width: 18px; height: 18px; }
[data-design="touch"] .size-switch .size-reset { width: auto; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 600; }

/* ---------------------------------------------------------------- big screens
   More of the screen and more side by side. */
@media (min-width: 1700px) {
  .t-top, .t-content, .t-main > .banner { max-width: 1720px; }
  .t-main { padding-left: 48px; padding-right: 48px; }
  [data-design="touch"] .jobs.wo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-design="touch"] .grid-main { grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr); }
  [data-design="touch"] .pos { grid-template-columns: minmax(0, 1fr) 440px; }
}
@media (min-width: 2200px) {
  .t-top, .t-content, .t-main > .banner { max-width: 2160px; }
  [data-design="touch"] .jobs.wo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-design="touch"] .grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Profile photo block */
[data-design="touch"] .avatar-edit .avatar-edit-text h2 { margin: 0 0 4px; padding: 0; }
[data-design="touch"] .avatar-preview { width: 96px; height: 96px; border-radius: var(--r-card); background: var(--t-rail); color: #fff; }

/* Technik Monteur: its lists are in the side menu (on a phone the tabs stay). */
@media (min-width: 881px) { [data-design="touch"] .t-monteur.t-has-side .t-content > nav.subnav { display: none; } }
[data-design="touch"] .t-monteur .scan-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
[data-design="touch"] .t-monteur .scan-bar input { flex: 1; }

/* The printing window in the touch design */
[data-design="touch"] dialog.print-overlay { border: 0; background: transparent; box-shadow: none; animation: none; }
[data-design="touch"] .po-card { border: 1px solid var(--border); border-radius: var(--r-card); }
[data-design="touch"] .po-mark { content: url(mark-white.png); width: 24px; height: 24px; }
[data-design="touch"] .po-icon { background: var(--t-rail); }
[data-design="touch"] .po-track i { background: var(--blue); }
[data-design="touch"] dialog .po-title { padding: 0; font-size: 18px; }

/* ---------------------------------------------------------------- the window's own title bar
   Technik on Windows, touch design: no Windows title bar. The menu bar's
   colour runs up to the top edge; the bar has a tiny logo in the middle and
   Technik's own buttons. Shown only by app.js, in the app that can do it. */
.tk-titlebar { display: none; }
:root.tk-frameless { --tb-h: 34px; }
.t-body { --side-w: 0px; }
.t-body.t-has-side { --side-w: var(--side-x); }
.tk-frameless .tk-titlebar { display: block; position: fixed; top: 0; left: 0; right: 0; height: var(--tb-h); z-index: 65; user-select: none; -webkit-user-select: none; }
/* Over the rail: its own colour; over the side menu and the page: theirs (the page scrolls underneath). */
.tk-frameless .t-body .tk-titlebar { background: linear-gradient(to right, transparent var(--rail-w), var(--t-side) var(--rail-w),
  var(--t-side) calc(var(--rail-w) + var(--side-w)), var(--bg) calc(var(--rail-w) + var(--side-w))); }
.tk-tb-drag { position: absolute; inset: 0; }
.tk-tb-logo { position: absolute; left: 50%; top: 50%; width: 96px; height: 14px; transform: translate(-50%, -50%); pointer-events: none;
  background: url(logo.png) center / contain no-repeat; opacity: .85; }
:root[data-theme="dark"] .tk-tb-logo { background-image: url(logo-white.png); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .tk-tb-logo { background-image: url(logo-white.png); } }
.tk-tb-buttons { position: absolute; top: 0; right: 6px; height: 100%; display: flex; align-items: center; gap: 4px; }
.tk-tb-btn { display: grid; place-items: center; width: 38px; height: 26px; padding: 0; border: 0; border-radius: var(--r-chip); background: none;
  color: var(--text-strong); cursor: pointer; transition: background-color .14s ease, color .14s ease; }
.tk-tb-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tk-tb-btn:hover { background: var(--hover); }
.tk-tb-btn:active { background: var(--press); }
.tk-tb-close:hover { background: #d23047; color: #fff; }
.tk-ic-restore, .tk-max .tk-ic-max { display: none; }
.tk-max .tk-ic-restore { display: block; }
/* An Android tablet: the bar is as high as Android's status bar, which keeps
   its own clock and icons; no window buttons and nothing to drag. */
.tk-tablet .tk-tb-buttons, .tk-tablet .tk-tb-drag { display: none; }
.tk-tablet .tk-titlebar { pointer-events: none; }
.tk-tablet .tk-tb-logo { height: min(16px, calc(var(--tb-h) - 8px)); }
/* Its height: Android's status bar (the app tells the page; data-tbh from the server for the first paint). */
:root.tk-tablet { --tb-h: calc(24px / var(--z, 1)); }
:root.tk-tablet[data-tbh="16"] { --tb-h: calc(16px / var(--z, 1)); } :root.tk-tablet[data-tbh="17"] { --tb-h: calc(17px / var(--z, 1)); } :root.tk-tablet[data-tbh="18"] { --tb-h: calc(18px / var(--z, 1)); } :root.tk-tablet[data-tbh="19"] { --tb-h: calc(19px / var(--z, 1)); } :root.tk-tablet[data-tbh="20"] { --tb-h: calc(20px / var(--z, 1)); } :root.tk-tablet[data-tbh="21"] { --tb-h: calc(21px / var(--z, 1)); } :root.tk-tablet[data-tbh="22"] { --tb-h: calc(22px / var(--z, 1)); } :root.tk-tablet[data-tbh="23"] { --tb-h: calc(23px / var(--z, 1)); } :root.tk-tablet[data-tbh="24"] { --tb-h: calc(24px / var(--z, 1)); } :root.tk-tablet[data-tbh="25"] { --tb-h: calc(25px / var(--z, 1)); } :root.tk-tablet[data-tbh="26"] { --tb-h: calc(26px / var(--z, 1)); } :root.tk-tablet[data-tbh="27"] { --tb-h: calc(27px / var(--z, 1)); } :root.tk-tablet[data-tbh="28"] { --tb-h: calc(28px / var(--z, 1)); } :root.tk-tablet[data-tbh="29"] { --tb-h: calc(29px / var(--z, 1)); } :root.tk-tablet[data-tbh="30"] { --tb-h: calc(30px / var(--z, 1)); } :root.tk-tablet[data-tbh="31"] { --tb-h: calc(31px / var(--z, 1)); } :root.tk-tablet[data-tbh="32"] { --tb-h: calc(32px / var(--z, 1)); } :root.tk-tablet[data-tbh="33"] { --tb-h: calc(33px / var(--z, 1)); } :root.tk-tablet[data-tbh="34"] { --tb-h: calc(34px / var(--z, 1)); } :root.tk-tablet[data-tbh="35"] { --tb-h: calc(35px / var(--z, 1)); } :root.tk-tablet[data-tbh="36"] { --tb-h: calc(36px / var(--z, 1)); } :root.tk-tablet[data-tbh="37"] { --tb-h: calc(37px / var(--z, 1)); } :root.tk-tablet[data-tbh="38"] { --tb-h: calc(38px / var(--z, 1)); } :root.tk-tablet[data-tbh="39"] { --tb-h: calc(39px / var(--z, 1)); } :root.tk-tablet[data-tbh="40"] { --tb-h: calc(40px / var(--z, 1)); } :root.tk-tablet[data-tbh="41"] { --tb-h: calc(41px / var(--z, 1)); } :root.tk-tablet[data-tbh="42"] { --tb-h: calc(42px / var(--z, 1)); } :root.tk-tablet[data-tbh="43"] { --tb-h: calc(43px / var(--z, 1)); } :root.tk-tablet[data-tbh="44"] { --tb-h: calc(44px / var(--z, 1)); } :root.tk-tablet[data-tbh="45"] { --tb-h: calc(45px / var(--z, 1)); } :root.tk-tablet[data-tbh="46"] { --tb-h: calc(46px / var(--z, 1)); } :root.tk-tablet[data-tbh="47"] { --tb-h: calc(47px / var(--z, 1)); } :root.tk-tablet[data-tbh="48"] { --tb-h: calc(48px / var(--z, 1)); }
/* Everything starts below the bar; the rail's colour goes up behind it. */
.tk-frameless .t-rail { padding-top: calc(18px + var(--tb-h)); }
.tk-frameless .t-rail.is-open { z-index: 70; }
.tk-frameless .t-side { padding-top: calc(26px + var(--tb-h)); }
.tk-frameless .t-main { padding-top: calc(22px + var(--tb-h)); }
.tk-frameless .auth-side { padding-top: calc(44px + var(--tb-h)); }
.tk-frameless .auth-main { padding-top: var(--tb-h); }
@media (max-width: 880px) {
  .t-body.t-has-side { --side-w: 0px; }
  .tk-frameless .t-body .tk-titlebar { background: var(--bg); }
  .tk-frameless .t-body .tk-tb-logo { display: none; }
  .tk-frameless .t-rail { padding-top: 7px; }
  .tk-frameless .t-main { padding-top: calc(14px + var(--tb-h)); }
  .tk-frameless .t-side { top: var(--tb-h); }
}

/* ---------------------------------------------------------------- count bubbles
   Always a perfect circle with the figure exactly in its middle: a fixed
   size (--b per place), at most "99+" (smaller figure for three signs), and
   the figure centred on its own height (cap height to baseline), not on the
   font's line, which sits a little high or low depending on the font. */
.t-dot, .t-count, [data-design="touch"] .nav-count, [data-design="touch"] .kpi b {
  box-sizing: border-box; display: inline-grid; place-items: center; flex: none;
  width: var(--b); height: var(--b); min-width: var(--b); max-width: var(--b); padding: 0; margin-block: 0;
  border-radius: 50%; overflow: hidden; white-space: nowrap; text-align: center;
  font-size: calc(var(--b) * .5); font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; }
.t-dot.n3, .t-count.n3, [data-design="touch"] .nav-count.n3, [data-design="touch"] .kpi b.n3 { font-size: calc(var(--b) * .36); letter-spacing: -.02em; }
@supports (text-box: trim-both cap alphabetic) {
  .t-dot, .t-count, [data-design="touch"] .nav-count, [data-design="touch"] .kpi b {
    display: inline-block; text-box: trim-both cap alphabetic; padding-top: calc((var(--b) - 1cap) / 2); }
}

/* Gift vouchers, discounts, scan window (touch) */
[data-design="touch"] .ticket-disc { padding: 10px 0 4px; font-size: 13.5px; }
[data-design="touch"] .ticket-disc-in input { min-height: 34px; width: 74px; border-radius: var(--r-chip); font-size: 14px; }
[data-design="touch"] .voucher-info { border-radius: var(--r-tile); border-color: var(--border); background: var(--surface-2); }
[data-design="touch"] .voucher-card .voucher-face { border-radius: var(--r-card); }
[data-design="touch"] .scan-head { background: none; color: var(--text-strong); padding: 16px 14px 4px 22px; }
[data-design="touch"] .scan-head h2 { font-size: 18px; padding: 0; color: var(--text-strong); }
[data-design="touch"] .lde-size input { min-height: 34px; border-radius: var(--r-chip); }