/* ===========================================================================
   TraderLab cockpit — shell + design-system foundation
   Clean, modern, ergonomic. No external CSS framework dependency.
   =========================================================================== */

:root {
    --ck-bg: #0f1722;
    --ck-bg-soft: #16212f;
    --ck-panel: #1d2a3a;
    --ck-panel-2: #223247;
    --ck-border: #2c3e54;
    --ck-text: #e7eef6;
    --ck-text-dim: #9fb3c8;
    --ck-accent: #2f81f7;
    --ck-accent-soft: #1b3a5c;
    --ck-good: #2ea043;
    --ck-warn: #d29922;
    --ck-bad: #f85149;
    /* TL Phase 8S (UX review 1b.2): TEXT tokens - --ck-good/warn/bad as text on --ck-panel are below 4.5:1; these are
       above it. The three above stay for borders, translucent backgrounds and icons (>= 3:1). */
    --ck-good-text: #5ed77a;
    --ck-warn-text: #e3b341;
    --ck-bad-text: #ff7b72;
    --ck-radius: 10px;
    --ck-radius-sm: 6px;
    /* TL Phase 10C: the "Lab" of the brand name - the bubbles' and the logo's "Lab" blue on a dark background
       (TraderLab/Docs/branding/README.md). Used by .ck-brand-lab only. */
    --ck-brand-lab: #58a6ff;
}

/* ── Shell layout ───────────────────────────────────────────────────────── */
.ck-shell {
    display: grid;
    grid-template-columns: 264px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas: "brand topbar" "sidebar main";
    height: 100vh;
    background: var(--ck-bg);
    color: var(--ck-text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.ck-brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    background: var(--ck-bg-soft);
    border-right: 1px solid var(--ck-border);
}
/* TL Phase 10A: the flask is an <img> with its own #0f1722 background - no border, no shadow, never shrunk by flex. */
.ck-logo { display: block; flex: none; }
/* TL Phase 10I (E2): the logo of the side menu, /login and the passkey page - flask 36 x 48 (sizes set on the <img>), 9 px, then
   "Trader" + blue "Lab" in 34 px, dropped 3 px to centre it on the flask's body (top, never a margin: under align-items:
   center a margin moves it by half). One line, never wrapped. */
.ck-brand-name { display: block; position: relative; top: 3px; font-size: 2.125rem; font-weight: 700; letter-spacing: -0.7px; line-height: 1; white-space: nowrap; }
.ck-brand-lab { color: var(--ck-brand-lab); }
/* TL Phase 10I: the translated tagline, first element of .ck-sidebar, stays under the logo while the menu scrolls. Its right
   edge is the name's, set from the LEFT so that the vertical scrollbar cannot move it: the percentage is of the menu's content
   box, which narrows with the bar, so the text keeps its distance from the left and the background still spans the links'
   whole width. 203.6px = 14 + 36 + 9 + 152.6 (the name, measured in Segoe UI) - 8 (.ck-sidebar's left padding). z-index: a
   link's focus outline must not paint over it. */
.ck-brand-tagline {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 0 calc(100% - 203.6px) 8px 0;
    background: var(--ck-bg-soft);
    color: var(--ck-text-dim);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.ck-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    background: var(--ck-bg-soft);
    border-bottom: 1px solid var(--ck-border);
}
.ck-topbar .ck-spacer { margin-left: auto; }

.ck-sidebar {
    grid-area: sidebar;
    overflow-y: auto;
    background: var(--ck-bg-soft);
    border-right: 1px solid var(--ck-border);
    /* TL Phase 10I: no top padding, the tagline sits right under the logo. scroll-padding-top: its 23.6 px + a 4 px focus outline,
       so that a link reached by Shift+Tab is never hidden under it. */
    padding: 0 8px 24px;
    scroll-padding-top: 28px;
}

.ck-main {
    grid-area: main;
    overflow-y: auto;
    padding: 22px 26px 60px;
}

/* ── Sidebar navigation ─────────────────────────────────────────────────── */
.ck-nav-group { margin-bottom: 14px; }
.ck-nav-group-title {
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .8px;
    color: var(--ck-text-dim);
    padding: 6px 12px 4px;
}
.ck-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: var(--ck-radius-sm);
    color: var(--ck-text);
    text-decoration: none;
    font-size: .9rem;
}
.ck-nav-link:hover { background: var(--ck-panel-2); }
.ck-nav-link.active { background: var(--ck-accent-soft); color: #fff; }
/* TL 8S1 (item 11, UX/UI): the current page is never told by colour alone - a 3 px accent bar on the left AND bold
   (aria-current="page" for assistive technology). */
.ck-nav-link.active, .ck-nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ck-accent); font-weight: 700; }
.ck-nav-link.locked { color: var(--ck-text-dim); cursor: default; }
.ck-nav-link .ck-ico { width: 20px; text-align: center; }
.ck-nav-link .ck-lock { margin-left: auto; font-size: .7rem; opacity: .7; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.ck-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.ck-badge.available { background: rgba(46,160,67,.16); color: #5ed77a; border-color: rgba(46,160,67,.4); }
.ck-badge.preview   { background: rgba(47,129,247,.16); color: #79b0ff; border-color: rgba(47,129,247,.4); }
.ck-badge.planned   { background: rgba(210,153,34,.16); color: #e3b341; border-color: rgba(210,153,34,.4); }
.ck-badge.adminonly { background: rgba(163,113,247,.16); color: #c4a7fb; border-color: rgba(163,113,247,.4); }
.ck-badge.disabled  { background: rgba(139,148,158,.16); color: #b1bac4; border-color: rgba(139,148,158,.4); }
.ck-badge.env       { background: var(--ck-panel-2); color: var(--ck-text-dim); border-color: var(--ck-border); }

/* ── Module tiles ───────────────────────────────────────────────────────── */
.ck-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 8px 0 26px;
}
.ck-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--ck-panel);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    text-decoration: none;
    color: var(--ck-text);
    transition: border-color .12s, transform .12s;
}
.ck-tile:hover { border-color: var(--ck-accent); transform: translateY(-2px); }
.ck-tile.locked { opacity: .72; }
.ck-tile.locked:hover { transform: none; border-color: var(--ck-border); }
.ck-tile-head { display: flex; align-items: center; gap: 10px; }
.ck-tile-ico { font-size: 1.4rem; }
.ck-tile-title { font-weight: 650; font-size: 1.02rem; }
.ck-tile-desc { color: var(--ck-text-dim); font-size: .86rem; line-height: 1.35; }
.ck-tile-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; }

/* ── Cards / sections ───────────────────────────────────────────────────── */
.ck-card {
    background: var(--ck-panel);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.ck-card h2, .ck-card h3 { margin-top: 0; }
.ck-grid-2 { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:14px; }

.ck-empty {
    border: 1px dashed var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 22px;
    text-align: center;
    color: var(--ck-text-dim);
    background: var(--ck-bg-soft);
}

.ck-list { margin: 6px 0; padding-left: 18px; }
.ck-list li { margin: 3px 0; color: var(--ck-text-dim); }

.ck-status-banner {
    display:flex; align-items:center; gap:10px;
    padding: 10px 14px; border-radius: var(--ck-radius-sm);
    border:1px solid var(--ck-border); background: var(--ck-bg-soft);
    margin-bottom: 16px; font-size: .9rem;
}
.ck-status-banner.warn { border-color: rgba(210,153,34,.5); background: rgba(210,153,34,.08); }

/* ── Help affordance ────────────────────────────────────────────────────── */
.ck-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ck-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    padding: 0;
}
.ck-help-icon:hover { background: #4c97ff; }

.ck-help-launch {
    border: 1px solid var(--ck-border);
    background: var(--ck-panel-2);
    color: var(--ck-text);
    border-radius: var(--ck-radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    font-size: .82rem;
}

/* ── Help panel (right drawer) ──────────────────────────────────────────── */
.ck-help-panel {
    position: fixed;
    top: 0; right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100vh;
    background: var(--ck-panel);
    border-left: 1px solid var(--ck-border);
    box-shadow: -8px 0 30px rgba(0,0,0,.4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.ck-help-panel-head {
    display:flex; align-items:center; gap:10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ck-border);
    background: var(--ck-bg-soft);
}
.ck-help-panel-head h3 { margin:0; font-size: 1.02rem; }
.ck-help-panel-body { padding: 16px; overflow-y: auto; }
.ck-help-panel-body h4 {
    margin: 16px 0 4px; font-size: .76rem; text-transform: uppercase;
    letter-spacing: .6px; color: var(--ck-text-dim);
}
.ck-help-panel-body p { margin: 0 0 6px; font-size: .9rem; line-height: 1.45; }
.ck-help-close {
    margin-left:auto; border:none; background:transparent; color: var(--ck-text-dim);
    font-size: 1.1rem; cursor:pointer;
}
.ck-help-close:hover { color: var(--ck-text); }
.ck-chip {
    display:inline-block; margin:2px 4px 2px 0; padding: 2px 8px;
    border-radius: 999px; font-size: .72rem;
    background: var(--ck-accent-soft); color: #cfe2ff;
}

/* ── Footer strip ───────────────────────────────────────────────────────── */
.ck-footer {
    margin-top: 24px; padding-top: 12px;
    border-top: 1px solid var(--ck-border);
    color: var(--ck-text-dim); font-size: .78rem;
    display:flex; gap:14px; flex-wrap:wrap;
}

/* Operations/coverage legacy content renders on a light surface inside the shell */
.ck-legacy-surface {
    background:#fff; color:#1a1a1a; border-radius: var(--ck-radius);
    padding: 18px 20px; border:1px solid var(--ck-border);
}
.ck-legacy-surface a { color: #1257a8; }

/* ── TL Phase 6A — CkTabs: a real, accessible tab strip (replaces button-swapped pseudo-tabs) ── */
.ck-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ck-border);
    margin-bottom: 14px;
}
.ck-tab {
    appearance: none;
    background: transparent;
    color: var(--ck-text-dim);
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px 15px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    top: 1px;
    transition: color .12s ease, background .12s ease;
}
.ck-tab:hover:not(:disabled) { color: var(--ck-text); background: var(--ck-bg-soft); }
.ck-tab:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: -2px; }
.ck-tab.active {
    color: #fff;
    background: var(--ck-bg-soft);
    border-color: var(--ck-border);
    border-bottom: 1px solid var(--ck-bg-soft);
}
.ck-tab.active::after {
    content: "";
    position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--ck-accent);
    border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.ck-tab:disabled { opacity: .5; cursor: not-allowed; }

/* ── TL Phase 6A — breadcrumb "you are in <area>" affordance on deep-linked sub-pages ── */
.ck-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: var(--ck-text-dim); font-size: .82rem; margin-bottom: 10px;
}
.ck-breadcrumb a { color: var(--ck-text-dim); text-decoration: none; }
.ck-breadcrumb a:hover { color: var(--ck-text); text-decoration: underline; }
.ck-breadcrumb .sep { opacity: .6; }
.ck-breadcrumb .current { color: var(--ck-text); font-weight: 600; }

/* ── TL Phase 6A — nested sub-nav entries under a parent module in the sidebar ── */
.ck-nav-link.sub {
    padding-left: 30px;
    font-size: .82rem;
    /* TL 8S1 (item 11): an allowed sub-item reads like an allowed item - only the indent tells it apart. Dimmed text is
       for group headings and locked entries. */
    color: var(--ck-text);
}
.ck-nav-link.sub.locked { color: var(--ck-text-dim); }
.ck-nav-link.sub.active { color: #fff; }
.ck-nav-link.sub::before {
    content: "└ ";
    opacity: .5;
}

/* ── TL Phase 6A — Configuration hub tiles ── */
.ck-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.ck-config-tile {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--ck-bg-soft);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--ck-text);
    transition: border-color .12s ease, transform .12s ease;
}
.ck-config-tile:hover { border-color: var(--ck-accent); transform: translateY(-2px); }
.ck-config-tile .title { display:flex; align-items:center; gap:8px; font-weight: 700; }
.ck-config-tile .desc { color: var(--ck-text-dim); font-size: .82rem; line-height: 1.35; }

/* ===========================================================================
   TL Phase 8S (ADR-182) - the common lexicon, the "Cannot read" block, the sign-in card, and the phone layout.
   =========================================================================== */

/* Links in running text and the footer: readable on the dark surface (the browser's default blue was 1.9:1) */
.ck-main a:not([class]), .ck-footer a, .ck-list a { color: #79b0ff; }

/* The framework's error bar: hidden until Blazor shows it (only MainLayout's scoped CSS hid it, so in the cockpit shell it
   was always rendered at the bottom of every page) */
#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 12px 16px; background: var(--ck-panel-2); color: var(--ck-text); border-top: 2px solid var(--ck-bad);
}
#blazor-error-ui .reload { color: #79b0ff; display: inline-flex; min-height: 44px; align-items: center; padding: 0 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 10px; }

/* G9: one visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; }

/* The four tones (a word AND an icon; text colours are the -text tokens, >= 4.5:1 on their blended background) */
.ck-state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 999px; border: 1px solid transparent;
    font-size: .8rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.ck-state.good    { color: var(--ck-good-text); background: rgba(46,160,67,.14);  border-color: rgba(46,160,67,.45); }
.ck-state.watch   { color: var(--ck-warn-text); background: rgba(210,153,34,.14); border-color: rgba(210,153,34,.45); }
.ck-state.problem { color: var(--ck-bad-text);  background: rgba(248,81,73,.14);  border-color: rgba(248,81,73,.45); }
.ck-state.neutral { color: var(--ck-text-dim);  background: var(--ck-bg-soft);    border-color: var(--ck-border); }
.ck-state-ico { font-weight: 700; }

.ck-state-banner {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    padding: 12px 14px; margin-bottom: 16px;
    background: var(--ck-panel); border: 1px solid var(--ck-border); border-left-width: 4px;
    border-radius: var(--ck-radius-sm); font-size: .95rem;
}
.ck-state-banner.good    { border-left-color: var(--ck-good); }
.ck-state-banner.good    > strong, .ck-state-banner.good    > .ck-state-ico { color: var(--ck-good-text); }
.ck-state-banner.watch   { border-left-color: var(--ck-warn); }
.ck-state-banner.watch   > strong, .ck-state-banner.watch   > .ck-state-ico { color: var(--ck-warn-text); }
.ck-state-banner.problem { border-left-color: var(--ck-bad); }
.ck-state-banner.problem > strong, .ck-state-banner.problem > .ck-state-ico { color: var(--ck-bad-text); }
.ck-state-banner.neutral { border-left-color: var(--ck-border); }
.ck-state-banner.neutral > strong, .ck-state-banner.neutral > .ck-state-ico { color: var(--ck-text-dim); }
.ck-state-detail { color: var(--ck-text); }

/* R1: the classes the pages used and nobody had defined */
.ck-badge.blocked { background: rgba(248,81,73,.14); color: var(--ck-bad-text); border-color: rgba(248,81,73,.45); }
.ck-badge.ok      { background: rgba(46,160,67,.14); color: var(--ck-good-text); border-color: rgba(46,160,67,.45); }
.ck-status-banner.ok  { border-color: rgba(46,160,67,.5); background: rgba(46,160,67,.08); }
.ck-status-banner.bad { border-color: rgba(248,81,73,.5); background: rgba(248,81,73,.08); }

/* R3/W3/C2/K1: the one "Cannot read" block */
.ck-read-failure {
    background: var(--ck-panel); border: 1px solid rgba(248,81,73,.55); border-left: 4px solid var(--ck-bad);
    border-radius: var(--ck-radius-sm); padding: 14px 16px; margin-bottom: 16px;
}
.ck-read-failure-title { display: flex; align-items: center; gap: 8px; color: var(--ck-bad-text); font-size: 1.02rem; }
.ck-read-failure-what { margin: 8px 0 4px; color: var(--ck-text); }
.ck-read-failure-when { margin: 0; color: var(--ck-text-dim); font-size: .85rem; }
.ck-read-failure-detail { margin-top: 8px; color: var(--ck-text-dim); font-size: .85rem; }
.ck-no-data { color: var(--ck-text-dim); }

/* A1: the "Overall status" card */
.ck-overall { padding: 14px 16px; }
.ck-overall-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ck-overall-head h2 { margin: 0; font-size: 1.05rem; }
.ck-overall-lines { list-style: none; margin: 0; padding: 0; }
.ck-overall-lines a {
    display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap;
    min-height: 44px; padding: 6px 2px; color: var(--ck-text); text-decoration: none;
    border-top: 1px solid var(--ck-border);
}
.ck-overall-lines a:hover .ck-overall-fact { text-decoration: underline; }
/* TL 8U: German and Italian badges are long ("Verlangsamt — seit 9 min kein Tick"): the sentence keeps at least 10em and
   the badge goes under it rather than squeezing it into a column of single words. */
.ck-overall-fact { color: var(--ck-text); font-size: .9rem; flex: 1 1 10em; }

/* G4: "Read-only" in the top bar. TL 8S1 (item 5, 8T §6.1): NEUTRAL - read-only from the Internet is the normal state,
   and amber means "To watch" in the lexicon. Grey, with its icon. */
.ck-badge.readonly {
    background: rgba(159,179,200,.10); color: var(--ck-text-dim); border-color: rgba(159,179,200,.40);
    text-decoration: none; font-size: .78rem;
}

/* TL 8S1 (item 3): the one red text of the lexicon, for lists of blockers (it replaces a colour token that was never defined). */
.ck-bad-text { color: var(--ck-bad-text); }

/* TL 8S1 (item 3): a refused action - it was a light pink box under the dark theme's light text (unreadable). */
.tl-action-refusal {
    background: rgba(248,81,73,.10); border: 1px solid rgba(248,81,73,.5); color: var(--ck-bad-text);
    padding: 8px 12px; border-radius: 6px;
}

/* L1/L2: the sign-in page, in its own layout (no menu) */
body:has(.tl-login-page) { margin: 0; background: var(--ck-bg); }
.tl-login-page {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px 16px; box-sizing: border-box;
    background: var(--ck-bg); color: var(--ck-text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* TL Phase 10I: as wide as the logo, so the tagline's right edge follows the name in any font, with no pixel value. */
.tl-login-brand { display: inline-flex; flex-direction: column; align-items: flex-end; }
.tl-login-logo { display: flex; align-items: center; gap: 9px; }
.tl-login-tagline { margin: 6px 0 0; color: var(--ck-text-dim); font-size: .8125rem; line-height: 1.3; white-space: nowrap; }
.tl-login-card {
    width: 100%; max-width: 360px; box-sizing: border-box;
    background: var(--ck-panel); border: 1px solid var(--ck-border); border-radius: var(--ck-radius); padding: 22px 20px;
}
.tl-login-card h1 { margin: 0 0 14px; font-size: 1.25rem; }
.tl-login-card form { display: flex; flex-direction: column; gap: 14px; }
.tl-login-card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ck-text-dim); }
.tl-login-card input {
    height: 48px; font-size: 16px; padding: 0 12px; box-sizing: border-box; width: 100%;
    background: var(--ck-bg-soft); color: var(--ck-text); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm);
}
.tl-login-card button {
    height: 48px; width: 100%; font-size: 16px; font-weight: 600; cursor: pointer;
    background: #1b62d6; color: #fff; border: none; border-radius: var(--ck-radius-sm);   /* white on it: 5.6:1 (on --ck-accent: 3.75) */
}
.tl-login-error { display: flex; gap: 8px; align-items: baseline; margin: 0 0 12px; color: var(--ck-bad-text); font-size: .95rem; }
/* TL 8Q (UX/UI A): every sign-in slow-down - amber with the "!" icon, never the red of a wrong password */
.tl-login-wait { display: flex; gap: 8px; align-items: baseline; margin: 0 0 12px; color: var(--ck-warn-text); font-size: .95rem; }
.tl-login-wait > span[aria-hidden] { font-weight: 700; }

/* ── TL Phase 8S1 — the page head, "About this page", the workbench, the freshness line, the component cards ── */
.ck-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ck-page-head h1 { margin: 0; }
.ck-about > summary { cursor: pointer; color: var(--ck-text-dim); }
.ck-about[open] > summary { margin-bottom: 8px; }

.ck-wb-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ck-wb-instrument { display: flex; flex-direction: column; gap: 4px; color: var(--ck-text-dim); font-size: .85rem; min-width: 0; }
.ck-wb-controls select, .ck-wb-options select {
    padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ck-border); background: var(--ck-bg-soft); color: var(--ck-text);
    max-width: 100%;
}
.ck-wb-ranges { display: inline-flex; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); overflow: hidden; }
.ck-wb-range {
    min-width: 52px; min-height: 36px; padding: 0 10px; border: none; border-left: 1px solid var(--ck-border);
    background: var(--ck-bg-soft); color: var(--ck-text); cursor: pointer; font: inherit;
}
.ck-wb-range:first-child { border-left: none; }
.ck-wb-range.active { background: var(--ck-accent-soft); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ck-accent); }
.ck-wb-options { flex: 1 1 100%; }
.ck-wb-options > summary { cursor: pointer; color: var(--ck-text-dim); }
.ck-wb-options-body { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-top: 8px; }
.ck-wb-options-body > label { display: flex; flex-direction: column; gap: 4px; color: var(--ck-text-dim); font-size: .85rem; }
.ck-wb-overlays { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ck-wb-overlays label { display: inline-flex; gap: 4px; align-items: center; }
.ck-btn-secondary { background: transparent; }
.ck-wb-dataline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; color: var(--ck-text-dim); font-size: .88rem; }
/* TL Phase 9Z (UX/UI §5 A): what a new choice is loading, grey, in place of the data line - never a spinner alone. */
.ck-wb-loading { color: var(--ck-text-dim); }
/* TL Phase 9X (item 6, UX/UI 9X §6 B): a choice that could not be loaded - dim, never red or amber. */
.ck-wb-notloaded { color: var(--ck-text-dim); }
/* TL Phase 9X (item 11): the credentials' actions on one line on a desk (as before 9X); stacked cards at 768 px and below. */
.ck-cred-actions { white-space: nowrap; }
.ck-chart-card { padding: 8px; }
.ck-chart-phone { display: none; }
.ck-chart-desk { display: block; }
.ck-wb-details > summary, .ck-component-more > summary { cursor: pointer; color: var(--ck-text-dim); }

/* TL 8X: the chart moves through time. A vertical drag that starts on it scrolls the page (pan-y); a horizontal drag and a
   pinch go to the chart. The page zoom of the browser is never forbidden (the viewport tag keeps it). */
.ck-chart-wrap { position: relative; }
.ck-chart { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 8px; }
.ck-chart:active { cursor: grabbing; }
.ck-chart svg text { pointer-events: none; }
.ck-chart-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ck-chart-btn {
    min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--ck-radius-sm); box-sizing: border-box;
    border: 1px solid var(--ck-border); background: var(--ck-panel-2); color: var(--ck-text); font: inherit; font-size: 1.1rem;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ck-chart-btn[disabled] { opacity: .5; cursor: default; }
.ck-chart-now { font-size: .9rem; font-weight: 600; }
.ck-chart-new { font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: var(--ck-accent-soft); color: var(--ck-text); }
.ck-chart-legend { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--ck-text-dim); }
.ck-chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ck-chart-swatch { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
/* TL Phase 8W - the two kinds of IG-history data in the legend: the repair ring (7 px, the marker under a candle) and the
   filled strip (the muted candle colour over the strip's hatch). */
.ck-chart-mark-repaired { display: inline-block; width: 7px; height: 7px; border: 1.6px solid #d29922; border-radius: 50%; box-sizing: border-box; }
/* TL Phase 10D: the completed candle's ring - same size, dashed, the dim text colour (shape AND colour differ). */
.ck-chart-mark-confirmed { display: inline-block; width: 7px; height: 7px; border: 1.6px dashed var(--ck-text-dim); border-radius: 50%; box-sizing: border-box; }
.ck-chart-mark-filled { display: inline-block; width: 16px; height: 10px; border-radius: 2px;
    background: repeating-linear-gradient(-45deg, #8b949e 0 2px, transparent 2px 5px), #7d9f84; }
/* TL 9C (item 3): the "No data" band's own hatch (the drawing's #3b4450 lines at 45°, every 6 px) over the plot's ground. */
.ck-chart-mark-nodata { display: inline-block; width: 16px; height: 10px; border-radius: 2px; border: 1px solid var(--ck-border); box-sizing: border-box;
    background: repeating-linear-gradient(45deg, #3b4450 0 2px, transparent 2px 6px), var(--ck-bg-soft); }
/* TL 9U (UX/UI §6 E): "Market closed" (the band's dark ground) and "Missing - market open" (the band's red hatch, the "No data"
   slant in the --ck-bad family). */
.ck-chart-mark-closed { display: inline-block; width: 16px; height: 10px; border-radius: 2px; border: 1px solid var(--ck-border); box-sizing: border-box;
    background: #1c2128; }
.ck-chart-mark-missing { display: inline-block; width: 16px; height: 10px; border-radius: 2px; border: 1px solid rgba(248,81,73,.55); box-sizing: border-box;
    background: repeating-linear-gradient(45deg, #f85149 0 2px, transparent 2px 6px), #2a1517; }
/* TL 9U (UX/UI §6 B, F): "Reset view" - a secondary button of the chart's group (>= 44 px, as the others; the group wraps). */
.ck-chart-reset { font-size: .9rem; background: transparent; }
.ck-wb-options-body > .ck-wb-shrink, .ck-wb-options-body > .ck-wb-autoscale { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; min-height: 44px; color: var(--ck-text); font-size: .9rem; }
/* TL Phase 9X (item 10c, UX/UI 9X §6 D.10c): the keyboard's ring on the whole 44 px label, not only on the 13 px box (Tab
   only: a mouse click shows none). --ck-accent on the card (--ck-panel): 3.9:1. */
.ck-wb-options-body > label:has(input[type=checkbox]:focus-visible) { outline: 2px solid var(--ck-accent); outline-offset: 2px; border-radius: 4px; }
/* TL 9U1 (UX/UI 9U1 §6 B.3): the line under the chart while a candle goes beyond the fixed scale, with its link back to the
   automatic scale (a >= 44 px target). */
.ck-wb-cut { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 4px 0 0; color: var(--ck-text-dim); font-size: .85rem; }
.ck-wb-cut-link { min-height: 44px; padding: 0 4px; border: none; background: transparent; color: var(--ck-link, #58a6ff); font: inherit; cursor: pointer; text-decoration: underline; }
.ck-tip-band { white-space: normal; max-width: min(260px, 72vw); }
.ck-tip-ig { color: var(--ck-text); font-style: italic; white-space: normal; max-width: min(260px, 72vw); overflow-wrap: anywhere; }
.ck-chart-tip {
    position: absolute; display: none; z-index: 5; padding: 8px 10px; border-radius: var(--ck-radius-sm); white-space: nowrap;
    background: var(--ck-panel); border: 1px solid var(--ck-border); box-shadow: 0 4px 16px rgba(0,0,0,.4);
    font-size: .82rem; color: var(--ck-text); pointer-events: none;
}
.ck-chart-tip.show { display: flex; flex-direction: column; gap: 2px; }
/* TL 9C (items 1, 6; UX/UI A.1, A.6): the edge box is as tall as its text and its text WRAPS inside it (the amber "Too many
   requests…" ran past the chart's border at 375 px with nowrap): never past the chart, never over "Back to now" (below it). */
.ck-chart-edge {
    position: absolute; top: 4px; max-width: 62%; box-sizing: border-box; padding: 6px; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; text-align: center;
}
.ck-chart-edge .ck-state { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
/* TL 9E (item 11, UX/UI D.11): on 2-3 lines the pill is a rounded rectangle (never an oval), the "!" stays on the first line. */
.ck-chart-edge .ck-state { border-radius: 10px; align-items: flex-start; }
.ck-chart-edge.left { left: 4px; }
.ck-chart-edge.right { right: 4px; }
.ck-chart-edge.loading, .ck-chart-edge.failed, .ck-chart-edge.throttled, .ck-chart-edge.unavailable { background: var(--ck-panel); border: 1px solid var(--ck-border); }
/* TL 9C (item 6): "Loading older data…" in grey with a small grey indicator - the words, never a spinner alone. */
.ck-edge-loading { display: inline-flex; align-items: center; gap: 6px; color: var(--ck-text-dim); text-align: left; overflow-wrap: anywhere; }
.ck-spinner { width: 18px; height: 18px; border: 2px solid var(--ck-border); border-top-color: var(--ck-text-dim); border-radius: 50%; animation: ck-spin .9s linear infinite; }
.ck-spinner.small { flex: 0 0 auto; width: 10px; height: 10px; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-spinner { animation: none; } }
.ck-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ck-range-live { display: none; }
.ck-wb-chartzone[data-moving] .ck-range-server { display: none; }
.ck-wb-chartzone[data-moving] .ck-range-live { display: inline; }
/* TL 8X (item 7): "Too many requests — try again after 14:05:32." and its "Try again" (44 px). */
.ck-throttled { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.ck-throttled .ck-state-banner { margin-bottom: 0; flex: 1 1 260px; }
.ck-retry-now {
    min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: var(--ck-radius-sm); cursor: pointer; font: inherit; box-sizing: border-box;
    border: 1px solid var(--ck-border); background: var(--ck-panel-2); color: var(--ck-text);
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.ck-retry-now[disabled] { opacity: .7; cursor: default; }
/* TL 8S2: the same block inside the Home card, under its lines. */
.ck-overall .ck-throttled { margin: 10px 0 0; }

.ck-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 12px; color: var(--ck-text-dim); font-size: .85rem; }
/* TL 9B (UX 8Y P3 6): "Refresh now" and "Pause" wrap together, never "Pause" alone on a line. */
.ck-freshness-actions { display: inline-flex; flex-wrap: nowrap; gap: 8px; }
.ck-refresh-now, .ck-refresh-pause {
    min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--ck-radius-sm); cursor: pointer; font: inherit;
    border: 1px solid var(--ck-border); background: var(--ck-panel-2); color: var(--ck-text); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.ck-refresh-pause { background: transparent; color: var(--ck-text-dim); }
.ck-refresh-now[disabled] { opacity: .7; cursor: default; }

.ck-component-cards { display: none; }
.ck-component-card { background: var(--ck-panel); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); padding: 16px; margin-bottom: 10px; }
.ck-component-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ck-component-name { font-weight: 700; font-size: 16px; color: var(--ck-text); }
.ck-component-id { display: block; font-size: .75rem; color: var(--ck-text-dim); font-weight: 400; }
.ck-component-note { color: var(--ck-text-dim); font-size: 14px; margin: 6px 0 0; }
.ck-component-facts { list-style: none; margin: 10px 0 0; padding: 0; }
.ck-component-facts li { display: flex; gap: 8px; padding: 3px 0; font-size: .9rem; color: var(--ck-text); }
.ck-component-facts .ck-fact-label { color: var(--ck-text-dim); }
.ck-component-facts a { color: var(--ck-text); }
.ck-fact-bad { color: var(--ck-bad-text); }
/* TL 8S2: the recorder's line when the account's bound refused its read - amber (Watch), never red. */
.ck-fact-watch, .ck-component-facts a.ck-fact-watch, .ck-component-table a.ck-fact-watch { color: var(--ck-warn-text); }

/* G1: the phone parts are hidden on a desktop (the desktop shell is unchanged) */
.ck-tabbar, .ck-drawer-open, .ck-drawer-toggle, .ck-topbar-brand { display: none; }

/* ===========================================================================
   G1/G2/G3 - below 768 px: no side menu, full-width content, a bottom tab bar, the full menu in a drawer, one card per
   table row, 44 x 44 px targets, 16 px fields.
   =========================================================================== */
@media (max-width: 768px) {
    body { margin: 0; background: var(--ck-bg); }
    .ck-shell { display: block; height: auto; min-height: 100vh; }
    /* TL Phase 10I: the logo is not in the drawer, so neither is its tagline. */
    .ck-brand, .ck-brand-tagline { display: none; }
    .ck-topbar {
        position: sticky; top: 0; z-index: 50; height: 56px; padding: 0 10px; gap: 8px;
        flex-wrap: nowrap; overflow: hidden;
    }
    .ck-topbar-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
    .ck-topbar .ck-badge.env, .ck-topbar .ck-topbar-desktop { display: none; }
    .ck-topbar a, .ck-topbar button, .ck-drawer-open {
        min-height: 44px; min-width: 44px; box-sizing: border-box;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .ck-drawer-open {
        padding: 0 10px; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm);
        background: var(--ck-panel-2); color: var(--ck-text); cursor: pointer; font-size: .9rem;
    }

    /* TL Phase 10I: the drawer has no tagline, so it keeps its 10 px at the top and nothing to scroll clear of. */
    .ck-sidebar { display: none; padding-top: 10px; scroll-padding-top: 0; }
    .ck-drawer-toggle:checked ~ .ck-sidebar {
        display: block; position: fixed; left: 0; right: 0; top: 56px;
        bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 60; overflow-y: auto; border-right: none;
    }
    .ck-nav-link { min-height: 44px; box-sizing: border-box; }

    .ck-main { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); overflow: visible; }

    .ck-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ck-bg-soft); border-top: 1px solid var(--ck-border);
    }
    .ck-tabbar a {
        flex: 1 1 0; min-width: 0; min-height: 60px; box-sizing: border-box;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--ck-text-dim); text-decoration: none; font-size: .7rem; border-top: 3px solid transparent;
    }
    .ck-tabbar a .ck-tab-ico { font-size: 1.15rem; }
    /* TL 9F (9E left (4), UX §6 B.10): a label never cut - it may take two lines, a long word breaking only at the soft
       hyphen its string table sets (de "Abde-ckung"), at 11.2 px; the bar grows, the page's bottom padding (96 px) stays
       above its height. */
    .ck-tabbar a > span:last-child { max-width: 100%; padding: 0 2px; box-sizing: border-box; text-align: center; line-height: 1.15; hyphens: manual; overflow-wrap: normal; word-break: normal; }
    .ck-tabbar a.active { color: var(--ck-text); font-weight: 700; border-top-color: var(--ck-accent); background: var(--ck-panel); }

    /* G2: targets and fields */
    .ck-main a.ck-help-launch, .ck-main button, .ck-main select,
    .ck-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .ck-main summary, .ck-footer a, .ck-list a {
        min-height: 44px; box-sizing: border-box;
    }
    .ck-main a.ck-help-launch, .ck-main button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
    .ck-list a, .ck-footer a { display: inline-flex; align-items: center; min-width: 44px; }
    .ck-main input, .ck-main select, .ck-main textarea { font-size: 16px; }
    /* A select sizes to its longest option (the workbench's instrument list): never wider than the content. */
    .ck-main select, .ck-main input:not([type=checkbox]):not([type=radio]) { max-width: calc(100vw - 28px); }
    .ck-main label { max-width: 100%; min-width: 0; }
    .ck-main label:has(input[type=checkbox]) { min-height: 44px; }
    .ck-main label:has(> input[type=checkbox]) { display: inline-flex; align-items: center; }
    .ck-help-icon {
        width: 44px; height: 44px; background: radial-gradient(circle, var(--ck-accent) 0 10px, transparent 11px);
        font-size: .8rem;
    }
    .ck-help-icon:hover { background: radial-gradient(circle, #4c97ff 0 10px, transparent 11px); }

    /* G3: one card per table row */
    table.ck-rtable, table.ck-rtable tbody, table.ck-rtable tr, table.ck-rtable td { display: block; width: 100%; box-sizing: border-box; }
    table.ck-rtable thead { display: none; }
    table.ck-rtable tr {
        background: var(--ck-panel); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm);
        padding: 8px 12px; margin-bottom: 10px;
    }
    table.ck-rtable td {
        display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: none !important; text-align: right;
    }
    table.ck-rtable td::before { content: attr(data-label); color: var(--ck-text-dim); text-align: left; }
    table.ck-rtable td[data-label=""]::before { content: none; }
    /* TL Phase 9X (item 11, UX/UI 9X §6 E): the credentials' cards - the reference under its label, wrapping anywhere (never
       letter by letter in the right half), the actions a left-aligned wrapping row of 44 px targets, in their order. */
    table.ck-cred-table td.ck-cred-ref { flex-direction: column; justify-content: flex-start; gap: 2px; text-align: left; }
    table.ck-cred-table td.ck-cred-ref code { overflow-wrap: anywhere; min-width: 0; }
    table.ck-cred-table td.ck-cred-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; white-space: normal; text-align: left; }
    table.ck-cred-table td.ck-cred-actions > button { min-height: 44px; padding: 0 10px; margin: 0; }

    /* TL 8S1 (item 0): the chart's phone drawing (taller), the controls on two lines, the range buttons 44 px. */
    .ck-chart-phone { display: block; }
    .ck-chart-desk { display: none; }
    .ck-chart-card { padding: 4px; margin-left: -6px; margin-right: -6px; }
    .ck-wb-controls { gap: 8px; padding: 10px; }
    .ck-wb-instrument { flex: 1 1 100%; }
    .ck-wb-instrument select { width: 100%; }
    .ck-wb-ranges { flex: 1 1 100%; }
    .ck-wb-range { flex: 1 1 0; min-height: 44px; }
    .ck-wb-options > summary { display: flex; align-items: center; }
    /* TL 8S1 (item 2): one card per component on a phone, the table on a desktop - the same words, in the same order. */
    .ck-component-table { display: none; }
    .ck-component-cards { display: block; }

    .ck-tiles { grid-template-columns: 1fr; }
    .ck-grid-2 { grid-template-columns: 1fr; }
    .ck-card { padding: 14px; }
    h1 { font-size: 1.45rem; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ===========================================================================
   TL 8Y (ADR-188, UX/UI ux-criteria-coverage-8S1-8Y.md §2) - /coverage: the period shortcuts, the sentence, the timeline
   (one row per Paris day; every band has a pattern AND a legend word, never colour alone) and the gap cards.
   =========================================================================== */
/* TL 9B: the period buttons and, beside them, "Refreshing…" (a role="status" region, empty while idle). */
.ck-coverage-periodbar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin: 0 0 12px; }
.ck-coverage-refreshing { color: var(--ck-text-dim); font-size: .85rem; }
.ck-coverage-periods { display: flex; flex: 1 1 auto; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); overflow: hidden; margin: 0; max-width: 480px; }
/* TL 9B (UX 8U P3): one line each in the five languages - short words first, the padding before the font. */
.ck-coverage-period {
    flex: 1 1 0; min-height: 44px; padding: 0 8px; border: none; border-left: 1px solid var(--ck-border);
    background: var(--ck-bg-soft); color: var(--ck-text); cursor: pointer; font: inherit; white-space: nowrap;
}
.ck-coverage-period:first-child { border-left: none; }
.ck-coverage-period.current { background: var(--ck-accent-soft); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ck-accent); }
.ck-coverage-period[disabled] { opacity: .6; cursor: default; }
.ck-coverage-computing { color: var(--ck-text-dim); padding: 12px 0; }
.ck-coverage-sentence { margin-bottom: 10px; flex-wrap: nowrap; align-items: flex-start; }
.ck-coverage-sentence > span:last-child { color: var(--ck-text); }
.ck-coverage-instrument { margin-bottom: 18px; }

.ck-tl-band { position: absolute; top: 0; bottom: 0; display: block; }
.ck-tl-band.recorded { background: var(--ck-good); }
.ck-tl-band.closed { background: var(--ck-bg-soft) repeating-linear-gradient(45deg, rgba(159,179,200,.30) 0 2px, transparent 2px 6px); }
.ck-tl-band.update { background: var(--ck-warn); }
.ck-tl-band.unknown { background: rgba(210,153,34,.30) radial-gradient(circle, var(--ck-warn) 1.2px, transparent 1.6px) 0 0 / 4px 4px; }
.ck-tl-band.outage { background: var(--ck-bad); }
/* TL 9B: before the first recording - grey with a dashed outline (Market closed is hatched: more than colour apart). */
.ck-tl-band.notyet { background: rgba(159,179,200,.16); border: 1px dashed rgba(159,179,200,.75); box-sizing: border-box; }
/* TL 9B: before the period starts - the lightest fill, no hatch, no outline: not a gap, not "not recorded yet".
   TL 9F (UX 9B recette P3): it was 1.1:1 against the track on the dark theme (invisible); a flat grey at 3.2:1 against
   the track (#0f1722), below every coloured band, and the same colour on the legend swatch. */
.ck-tl-band.outside { background: #5f6876; }
/* TL 9F (UX 9B recette P2): an ongoing clean stop past the bound is red on the timeline and on its card, with the sentence. */
.ck-tl-band.update.overdue { background: var(--ck-bad); }
/* TL Phase 8W - a gap filled / repaired from IG's history: the workbench's filled pattern (muted green under a grey hatch),
   never the plain green of "Recorded". */
.ck-tl-band.igfilled { background: repeating-linear-gradient(-45deg, #8b949e 0 2px, transparent 2px 5px), #7d9f84; }

.ck-tl-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; padding: 0; font-size: .78rem; color: var(--ck-text-dim); }
.ck-tl-legend li { display: inline-flex; align-items: center; gap: 5px; }
.ck-tl-swatch { position: relative; display: inline-block; width: 14px; height: 10px; border-radius: 2px; flex: none; }
.ck-tl-swatch.unknown::after { content: "?"; position: absolute; inset: -3px 0 0; font-size: 9px; font-weight: 700; color: var(--ck-text); text-align: center; }

.ck-tl { margin: 0 0 10px; }
.ck-tl-axis, .ck-tl-day { display: grid; grid-template-columns: 58px 1fr; align-items: center; column-gap: 6px; }
/* TL 9B (UX 8Y P3 5.2): every timeline text at 12 px at least, on the page's background (>= 4.5:1). */
.ck-tl-scale { position: relative; height: 15px; font-size: .75rem; line-height: 15px; color: var(--ck-text-dim); }
.ck-tl-scale > span { position: absolute; top: 0; transform: translateX(-50%); }
.ck-tl-scale > span:first-child { transform: none; }
.ck-tl-scale > span:last-child { transform: translateX(-100%); }
/* TL 9B (UX 8Y P3 5.1): 6 px between rows, so each tap target reaches 3 px above and below its bar without touching the next. */
.ck-tl-day { margin-top: 6px; --ck-tl-h: 18px; }
.ck-tl-label { font-size: .75rem; color: var(--ck-text-dim); white-space: nowrap; }
.ck-tl-label small { display: block; font-size: .75rem; }
.ck-tl-lane { position: relative; display: block; }
.ck-tl-track { position: relative; display: block; height: var(--ck-tl-h); background: var(--ck-bg); border-radius: 3px; overflow: hidden; }
.ck-tl-gap { min-width: 3px; }
.ck-tl-gap.selected { outline: 2px solid var(--ck-text); outline-offset: -2px; }
/* The tap targets: a layer over the bar, the bar's height + 3 px each side (never the phone's 44 px button minimum: it would
   reach into the next day); 44 px wide around the mark, split at the midpoint with a neighbour (CoverageView.HitTargets). */
.ck-tl-hits { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ck-tl-h); }
.ck-tl-hits > .ck-tl-hit { position: absolute; top: -3px; bottom: -3px; height: auto; min-height: 0; min-width: 0; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; }
.ck-tl-hit:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: -2px; border-radius: 3px; }
.ck-tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ck-accent); }
/* TL 9B (UX 8U P3): "now" in its own lane ABOVE today's bar - never over the bar, whatever the word's length. */
.ck-tl-day.today .ck-tl-lane { padding-top: 16px; }
.ck-tl-nowlabel { position: absolute; top: 0; font-size: .75rem; line-height: 15px; color: var(--ck-text); white-space: nowrap; transform: translateX(-50%); }
.ck-tl-nowlabel[data-align="start"] { transform: none; }
.ck-tl-nowlabel[data-align="end"] { transform: translateX(-100%); }

.ck-gap-title { font-size: 1rem; margin: 14px 0 8px; }
.ck-gap-none { display: inline-flex; gap: 6px; }
.ck-gap-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ck-gap-card { background: var(--ck-panel); border: 1px solid var(--ck-border); border-left-width: 4px; border-radius: var(--ck-radius-sm); padding: 10px 12px; }
.ck-gap-card.outage { border-left-color: var(--ck-bad); }
.ck-gap-card.update { border-left-color: var(--ck-warn); }
.ck-gap-card.unknown { border-left-color: var(--ck-warn); border-left-style: dotted; }
.ck-gap-card.selected, .ck-gap-card:focus { outline: 2px solid var(--ck-accent); outline-offset: 1px; }
.ck-gap-kind { display: flex; align-items: center; gap: 6px; }
.ck-gap-kind .ck-tl-band { position: relative; }
.ck-gap-card.outage .ck-gap-ico { color: var(--ck-bad-text); }
.ck-gap-card.update .ck-gap-ico, .ck-gap-card.unknown .ck-gap-ico { color: var(--ck-warn-text); }
.ck-gap-card.update.overdue { border-left-color: var(--ck-bad); }
.ck-gap-card.update.overdue .ck-gap-ico { color: var(--ck-bad-text); }
.ck-gap-when { color: var(--ck-text); font-size: .9rem; margin-top: 4px; }
.ck-gap-cause { color: var(--ck-text-dim); font-size: .88rem; margin-top: 2px; }
.ck-gap-check { color: var(--ck-bad-text); font-size: .88rem; font-weight: 600; margin-top: 4px; }
/* TL Phase 8W - the card's IG-history line (what was done about the gap). */
.ck-gap-fill { color: var(--ck-text); font-size: .88rem; margin-top: 4px; overflow-wrap: anywhere; }
/* TL 9E (item 8): IG had nothing to add - final and neutral, grey (never amber, red or the filled mark). */
.ck-gap-fill.neutral { color: var(--ck-text-dim); }
.ck-gap-fill.filled::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: middle;
    background: repeating-linear-gradient(-45deg, #8b949e 0 2px, transparent 2px 5px), #7d9f84; }
.ck-gap-more { margin-top: 8px; min-height: 44px; }
.ck-coverage-details-host { margin-top: 18px; }
/* UX/UI P3 (8S1): the technical view's fields follow the dark theme (they were native white fields). */
.ck-coverage-details-host input, .ck-coverage-details-host select {
    color-scheme: dark; background: var(--ck-bg-soft); color: var(--ck-text); border: 1px solid var(--ck-border);
    border-radius: 4px; min-height: 32px; padding: 2px 6px; font: inherit;
}
@media (max-width: 768px) {
    .ck-coverage-periodbar { margin-bottom: 10px; }
    .ck-coverage-periods { max-width: none; flex-basis: 100%; }
    .ck-coverage-period { padding: 0 4px; }
    .ck-coverage-refreshing:not(:empty) { margin-top: 4px; }
    /* UX/UI §2.5.1: the sentence AND the 7 days fit the first screen above the tab bar - compact blocks on a phone. */
    .ck-coverage-page .ck-state-banner { padding: 8px 10px; margin-bottom: 8px; font-size: .9rem; }
    .ck-coverage-page .ck-freshness { margin: 2px 0 8px; }
    .ck-coverage-page h2 { margin: 4px 0 6px; }
    .ck-tl-legend { margin-bottom: 4px; }
    .ck-tl-axis, .ck-tl-day { grid-template-columns: 50px 1fr; column-gap: 4px; }
    .ck-tl-day { --ck-tl-h: 16px; }
    .ck-gap-cards { grid-template-columns: 1fr; }
    .ck-coverage-details-host input, .ck-coverage-details-host select { font-size: 16px; min-height: 44px; }
}

/* ── TL Phase 8U (ADR-184) — the language selector: a flag AND a code on a 44 x 44 px button, five 44 px rows, each a flag and
   the language's own name, the current one ticked. A native details/summary: it opens without a script. ── */
.ck-lang { position: relative; display: inline-flex; margin: 0; }
.ck-lang-menu > summary { list-style: none; }
.ck-lang-menu > summary::-webkit-details-marker { display: none; }
.ck-lang-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 44px; min-height: 44px; box-sizing: border-box; padding: 0 10px; cursor: pointer;
    border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); background: var(--ck-panel-2);
    color: var(--ck-text); font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.ck-lang-button:focus-visible, .ck-lang-option:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; }
.ck-lang-flag { width: 21px; height: 14px; display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.ck-lang-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 200px; box-sizing: border-box;
    display: flex; flex-direction: column; padding: 4px;
    background: var(--ck-panel); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.ck-lang-option, .ck-topbar .ck-lang-option {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
    min-height: 44px; box-sizing: border-box; padding: 0 12px; cursor: pointer; text-align: left;
    background: none; border: none; border-radius: var(--ck-radius-sm); color: var(--ck-text); font: inherit; font-size: .95rem;
}
.ck-lang-option:hover, .ck-lang-option:focus { background: var(--ck-accent-soft); }
.ck-lang-option.current { font-weight: 700; }
.ck-lang-check { margin-left: auto; color: var(--ck-good-text); font-weight: 700; }
/* The sign-in page: above the card, on the right. */
.tl-login-lang { width: 100%; max-width: 360px; display: flex; justify-content: flex-end; }
@media (max-width: 768px) {
    /* The phone's top bar hides what overflows it: the list is placed against the screen, under the bar. */
    .ck-topbar .ck-lang-list { position: fixed; top: 56px; right: 8px; }
    /* One line in every language (measured: German "Nur Lesen" wrapped beside "Abmelden"): words never wrap, and the
       "TraderLab" word gives its room to the Read-only badge on an Internet session (the page title still says it). */
    .ck-topbar .ck-badge, .ck-topbar .ck-help-launch { white-space: nowrap; }
    .ck-topbar:has(.ck-badge.readonly) .ck-topbar-brand, .ck-topbar:has(.ck-badge.actions) .ck-topbar-brand { display: none; }
}

/* ── TL Phase 8T (ADR-183, UX/UI 8T §1-§6): the second factor ─────────────────────────────────────────────────────── */
.ck-dim { color: var(--ck-text-dim); }
.ck-warn-text { color: var(--ck-warn-text); }
/* §1: "Actions on" is the ACCENT (blue), never green; a recovery code used is AMBER; the box says "Server", neutral. */
.ck-badge.actions { background: rgba(47,129,247,.16); color: #79b0ff; border-color: rgba(47,129,247,.5); text-decoration: none; font-size: .78rem; }
.ck-badge.readonly.warn { background: rgba(210,153,34,.14); color: var(--ck-warn-text); border-color: rgba(210,153,34,.45); }
.ck-badge.server { background: var(--ck-panel-2); color: var(--ck-text-dim); border-color: var(--ck-border); font-size: .78rem; }
.ck-tile-actions { margin-top: 6px; font-size: .82rem; color: #79b0ff; }

/* The recorder's Internet actions (§4): 44 px targets, the key icon, never a refusal drawn as an active button. */
.ck-internet-actions .ck-ia-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ck-border); }
.ck-internet-actions .ck-ia-row:first-of-type { border-top: 0; }
.ck-ia-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-ia-btn {
    min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(47,129,247,.55);
    background: rgba(47,129,247,.12); color: var(--ck-text); font-size: 1rem; cursor: pointer;
}
.ck-ia-btn.ck-ia-locked { border-color: var(--ck-border); background: var(--ck-panel-2); color: var(--ck-text-dim); }
.ck-ia-btn:disabled { opacity: .55; cursor: default; }
.ck-ia-result { margin: 8px 0 0; font-size: .95rem; }
.ck-ia-result[data-tone="good"] { color: var(--ck-good-text); }
.ck-ia-result[data-tone="bad"] { color: var(--ck-bad-text); }

/* §3: the step-up sheet - at the bottom of the screen up to 768 px, a centred box on a desktop. */
.ck-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000; }
.ck-sheet {
    position: fixed; z-index: 1001; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto;
    background: var(--ck-panel); color: var(--ck-text); border-top: 1px solid var(--ck-border);
    border-radius: 14px 14px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
}
.ck-sheet h2 { margin: 0; font-size: 1.15rem; }
.ck-sheet p { margin: 0; }
.ck-sheet-primary, .ck-sheet-secondary {
    display: block; width: 100%; min-height: 48px; border-radius: 10px; font-size: 1rem; text-align: center;
    line-height: 48px; padding: 0 12px; box-sizing: border-box; cursor: pointer; text-decoration: none;
}
.ck-sheet-primary { background: var(--ck-accent); color: #fff; border: 0; }
.ck-sheet-secondary { background: transparent; color: var(--ck-text); border: 1px solid var(--ck-border); }
.ck-sheet-primary:disabled, .ck-sheet-secondary:disabled { opacity: .6; cursor: default; }
.ck-sheet-warn { color: var(--ck-warn-text); }
@media (min-width: 769px) {
    .ck-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 420px; border-radius: 12px; border: 1px solid var(--ck-border); }
}

/* §2: "Confirm it's you" - the main button full width, 48 px; the two other ways visible without scrolling. */
.tl-login-intro { margin: 0 0 12px; color: var(--ck-text-dim); font-size: .95rem; }
.tl-login-card .tl-passkey-primary { width: 100%; min-height: 48px; font-size: 16px; }
.tl-passkey-explained { margin: 8px 0 0; color: var(--ck-text-dim); font-size: .85rem; }
.tl-passkey-secondary { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tl-passkey-secondary a { display: flex; align-items: center; min-height: 44px; color: var(--ck-text); }
.tl-passkey-secondary summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.tl-login-wait[hidden] { display: none; }
.tl-login-wait[data-passkey-status]::before { content: "!"; font-weight: 700; }

/* §5: the enrolment's steps, the ticket field (16 px, dictable), the codes (fixed-width, >= 18 px, no horizontal scroll). */
.ck-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0 0 12px; font-size: .9rem; color: var(--ck-text-dim); }
.ck-steps li span { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--ck-border); margin-right: 4px; }
.ck-steps li.current { color: var(--ck-text); font-weight: 700; }
.ck-steps li.current span { background: var(--ck-accent); border-color: var(--ck-accent); color: #fff; }
.ck-steps li.done span { border-color: var(--ck-good); color: var(--ck-good-text); }
.ck-enrol-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; color: var(--ck-text-dim); }
.ck-enrol-field input { min-height: 48px; font-size: 16px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ck-border); background: var(--ck-panel-2); color: var(--ck-text); }
.ck-ticket-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.ck-enrol-primary, .ck-enrol-secondary {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 10px;
    font-size: 1rem; cursor: pointer; text-decoration: none; margin-top: 8px;
}
.ck-enrol-primary { background: var(--ck-accent); color: #fff; border: 0; width: 100%; }
.ck-enrol-primary.disabled, .ck-enrol-primary:disabled { opacity: .5; pointer-events: none; }
.ck-enrol-secondary { background: transparent; color: var(--ck-text); border: 1px solid var(--ck-border); }
.ck-enrol-warn { color: var(--ck-warn-text); }
.ck-enrol-ok { color: var(--ck-good-text); font-weight: 700; }
.ck-enrol-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; }
.ck-enrol-check input { width: 22px; height: 22px; }
.ck-enrol-another { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--ck-border); color: var(--ck-text-dim); }
.ck-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); gap: 6px 14px; padding-left: 1.6em; margin: 8px 0; }
.ck-codes code { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: .04em; white-space: nowrap; }

/* §6: the Security page's ticket, shown large. */
.ck-ticket { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: .08em; margin: 6px 0; }
.ck-confirm { border: 1px solid var(--ck-border); border-radius: 8px; padding: 8px; background: var(--ck-panel-2); }
.ck-help-launch.danger { border-color: rgba(248,81,73,.55); color: var(--ck-bad-text); }

/* TL Phase 9H (UX/UI 9H §6): the strategy pages on a phone - the outcome right under Evaluate, targets of 44 px, fields of
   16 px (no zoom on focus), a wide table scrolls inside its card, never the page. */
.ck-strategy .ck-grid-2 > * { min-width: 0; }
.ck-strategy input, .ck-strategy select { font-size: 1rem; min-height: 44px; box-sizing: border-box; max-width: 100%; }
.ck-strategy label { max-width: 100%; }
.ck-strategy input[type="checkbox"] { min-height: 0; width: 22px; height: 22px; }
.ck-strategy button { min-height: 44px; }
.ck-strategy .ck-eval-run { font-size: 1rem; padding: 0 16px; }
.ck-eval-status, .ck-eval-refusal { margin-top: 8px; }
.ck-eval-status:empty, .ck-eval-refusal:empty { margin-top: 0; }
.ck-eval-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ck-eval-see { display: inline-flex; align-items: center; min-height: 44px; }
.ck-eval-refusal { color: var(--ck-bad-text); }
.ck-eval-footnote { font-size: .78rem; color: var(--ck-text-dim); margin: 8px 0 0; }

/* ── TL Phase 9T (UX/UI §6 D-E): the alert strip - the first element of <main>, the width of the content column, NOT
   sticky (it scrolls with the page). The red family of the shared guide: a red left border, the ✕ and the word
   "Problem", never colour alone; no animation. Text on its background: #e7eef6 ≈ 14:1, the red word #ff7b72 ≈ 6:1, the
   dimmed "(25 min ago)" ≈ 7:1, the link ≈ 7:1. 1280 px: one line; 375 px: the sentence wraps, the link and the button go
   on their own line below, each a 44 px tap target. ─────────────────────────────────────────────────────────────────── */
.ck-alert {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    margin: 0 0 16px; padding: 10px 14px;
    background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.45); border-left: 4px solid var(--ck-bad);
    border-radius: var(--ck-radius-sm); color: var(--ck-text);
}
.ck-alert-text { margin: 0; flex: 1 1 24rem; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.ck-alert-text > strong, .ck-alert-ico { color: var(--ck-bad-text); }
.ck-alert-ago { color: var(--ck-text-dim); }
.ck-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; flex: 0 0 auto; }
.ck-alert-link { color: #79b0ff; font-weight: 600; }
.ck-alert-hide {
    background: transparent; color: var(--ck-text); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm); padding: 4px 10px; font: inherit; cursor: pointer;
}
.ck-alert-hide:hover { background: var(--ck-bg-soft); }
@media (max-width: 768px) {
    .ck-alert-text { flex-basis: 100%; }
    .ck-alert-actions { flex-basis: 100%; }
    .ck-alert-link, .ck-alert-hide { display: inline-flex; align-items: center; min-height: 44px; }
}