/* ============================================================================
   20 · `tk-*` — TICKET PLATFORM

   Scoped to the Tickets page: tabs, search, KPI strip, pills, tables, cards,
   activity feed, charts, heatmap, drawer, form designer and workflow builder.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* =============================================================================
   `tk-*` — TICKET PLATFORM
   =============================================================================
   Scoped to the Tickets page. Every colour, radius and easing resolves to an
   existing site variable — this is a LAYOUT system, not a theme, the same call
   the `gp-*` settings register makes. Namespaced `tk-` because `.ticket-*` is
   already taken by the giveaway prize-claim styles.
   ------------------------------------------------------------------------- */

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tk-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.25rem;
  border-bottom:1px solid var(--border);padding-bottom:.6rem}
.tk-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;
  border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--text-muted);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.tk-tab ion-icon{font-size:16px}
.tk-tab:hover{background:var(--bg-hover);color:var(--text)}
.tk-tab.active{background:rgba(220,38,38,.14);color:var(--text);border-color:rgba(220,38,38,.42)}
@media (max-width:700px){.tk-tab span{display:none}.tk-tab{padding:.5rem .7rem}}

/* ── Global search ───────────────────────────────────────────────────────── */
.tk-search{min-width:min(340px,60vw)}
.page-head-actions{position:relative}
.tk-search-results{position:absolute;top:calc(100% + .35rem);right:0;z-index:400;
  width:min(560px,90vw);max-height:60vh;overflow-y:auto;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.tk-search-row{display:flex;gap:.6rem;align-items:flex-start;width:100%;padding:.6rem .75rem;
  background:none;border:0;border-bottom:1px solid var(--border);color:var(--text);
  font:inherit;text-align:left;cursor:pointer}
.tk-search-row:last-child{border-bottom:0}
.tk-search-row:hover{background:var(--bg-hover)}
.tk-search-kind{flex:0 0 auto;font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;
  padding:.12rem .35rem;border-radius:4px;background:var(--bg-hover);color:var(--text-muted)}
.tk-search-kind--ticket{background:rgba(88,101,242,.2);color:#c9cdfb}
.tk-search-kind--note{background:rgba(250,166,26,.18);color:#f6c177}
.tk-search-main{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tk-search-main strong{font-weight:600;font-size:.85rem}
.tk-search-main em{font-style:normal;font-size:.78rem;color:var(--text-muted)}
.tk-search-more{padding:.6rem .75rem;font-size:.8rem;color:var(--text-muted)}

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.tk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.75rem;margin-bottom:1.25rem}
.tk-kpi{display:flex;gap:.7rem;align-items:center;padding:.9rem 1rem;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px}
.tk-kpi ion-icon{font-size:22px;color:var(--text-muted);flex:0 0 auto}
.tk-kpi div{display:flex;flex-direction:column;min-width:0}
.tk-kpi-value{font-size:1.35rem;font-weight:700;line-height:1.1}
.tk-kpi-label{font-size:.8rem;color:var(--text);font-weight:500}
.tk-kpi-sub{font-size:.72rem;color:var(--text-muted)}

.tk-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}

/* ── Pills, chips, tags ──────────────────────────────────────────────────── */
.tk-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .45rem;
  border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap;
  background:var(--bg-hover);color:var(--text-muted)}
.tk-pill--info{background:rgba(88,101,242,.18);color:#c9cdfb}
.tk-pill--warn{background:rgba(250,166,26,.18);color:#f6c177}
.tk-pill--ok{background:rgba(87,242,135,.15);color:#8ce6a8}
.tk-pill--error{background:rgba(237,66,69,.18);color:#f3a1a2}
.tk-pill--muted{background:var(--bg-hover);color:var(--text-muted)}

.tk-pri{font-size:.72rem;font-weight:600;white-space:nowrap;margin-right:.3rem}
.tk-pri--urgent{color:#ed4245}
.tk-pri--high{color:#faa61a}
.tk-pri--normal{color:var(--text-muted)}
.tk-pri--low{color:var(--text-muted);opacity:.7}

.tk-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.tk-chip{font-size:.72rem;padding:.15rem .45rem;border-radius:6px;
  background:var(--bg-hover);color:var(--text-muted);white-space:nowrap}
.tk-chip--ok{background:rgba(87,242,135,.13);color:#8ce6a8}
.tk-chip--warn{background:rgba(250,166,26,.15);color:#f6c177}
.tk-chip--error{background:rgba(237,66,69,.16);color:#f3a1a2}
.tk-chip--dim{opacity:.65}

.tk-tag{--tag:#5865f2;display:inline-flex;align-items:center;gap:.25rem;
  font-size:.72rem;padding:.12rem .4rem;border-radius:6px;
  background:color-mix(in srgb,var(--tag) 18%,transparent);
  color:var(--tag);border:1px solid color-mix(in srgb,var(--tag) 35%,transparent)}
.tk-tag button{background:none;border:0;color:inherit;cursor:pointer;font-size:.9rem;
  line-height:1;padding:0 0 0 .1rem;opacity:.7}
.tk-tag button:hover{opacity:1}
.tk-tag-list{display:flex;flex-wrap:wrap;gap:.35rem}

/* A panel holding two SUBJECTS under one head (Staff = roles AND people): one
   title, one Add button, and a labelled group per subject. The rule is the same
   one the Logging page follows — a fact appears once, so the groups share the
   section's heading and button instead of restating them. */
.tk-subgroup + .tk-subgroup{margin-top:1.35rem;padding-top:1.15rem;border-top:1px solid var(--border)}
.tk-subgroup > .tk-h5{margin:0}
.tk-subgroup-sub{font-size:.8rem;color:var(--text-muted);margin:.25rem 0 .7rem}

.tk-dim{color:var(--text-muted)}
.tk-err{color:#ed4245;font-size:.82rem}
.tk-h4{font-size:.9rem;font-weight:600;margin:1.1rem 0 .5rem}
.tk-h4:first-child{margin-top:0}
.tk-h5{font-size:.82rem;font-weight:600;margin:.8rem 0 .4rem;display:flex;align-items:center;gap:.4rem}
.tk-linkish{background:none;border:0;color:#5865f2;cursor:pointer;font:inherit;padding:0}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.tk-table-wrap{overflow-x:auto}
.tk-table{width:100%;border-collapse:collapse;font-size:.85rem}
.tk-table th{text-align:left;font-weight:600;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--text-muted);padding:.5rem .6rem;
  border-bottom:1px solid var(--border)}
.tk-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle}
.tk-table tbody tr:last-child td{border-bottom:0}
.tk-row{cursor:pointer;transition:background .12s ease}
.tk-row:hover{background:var(--bg-hover)}
.tk-num{font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap}
.tk-topic{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;max-width:420px}
.tk-row-actions{white-space:nowrap;text-align:right}
.tk-at-cap{color:#ed4245;font-weight:600}

.tk-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;align-items:center}
/* select-enhance.js replaces each <select> with a `.cs-wrap` (display:block,
   width:100%) that becomes the flex item, so sizing only the <select> leaves every
   dropdown full-width and stacked down the page — which is what this filter bar
   was doing with all six of them. Both are targeted, as on `.er-toolbar`. */
.tk-filters .select,.tk-filters .input,.tk-filters .cs-wrap{width:auto;min-width:150px;flex:0 1 auto}
.tk-filters .tk-check{flex:0 0 auto}
.tk-pager{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-top:.9rem;font-size:.82rem;color:var(--text-muted)}

.tk-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;cursor:pointer}
.tk-check input{margin:0}
.tk-switches{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;margin-top:.8rem}

/* ── Empty / loading ─────────────────────────────────────────────────────── */
/* Centred BOTH ways and stretched to the panel, because these panels sit in
   `.tk-grid-2`, whose rows are as tall as their tallest member — an empty state
   pinned to the top-left of a stretched cell reads as a panel that failed to load
   rather than one with nothing to show. */
.tk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2.5rem 1rem;color:var(--text-muted);min-height:8.5rem;height:100%}
.tk-empty ion-icon{font-size:38px;opacity:.4;display:block;margin:0 auto .6rem}
.tk-empty p{max-width:44ch;margin:0 auto;font-size:.87rem}
.tk-empty-inline{display:block;padding:.6rem 0;min-height:0;height:auto;text-align:left}
.tk-loading{display:grid;gap:.6rem}

/* ── Cards / lists ───────────────────────────────────────────────────────── */
.tk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.85rem}
/* Panels & Departments sit side by side, one job on one screen. Equal columns
   rather than the 1.7fr/1fr of `.ga-layout`: neither list is a rail, both are
   card lists of the same weight. Each column is its own grid track, so the two
   panels stay top-aligned however uneven the lists get. */
.tk-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.tk-split-col{min-width:0}
.tk-split-col > .ga-panel + .ga-panel{margin-top:1.25rem}
@media(max-width:1180px){ .tk-split{grid-template-columns:1fr} }
/* Inside a half-width column an auto-fill grid at minmax(320px,1fr) still tries
   for two tracks on a wide screen and squeezes the chips; these lists stack. */
.tk-cards--stack{grid-template-columns:1fr}

/* The free-tier note above a capped list (Forms & Panels, Panels & Departments).
   Named `tk-ftnote`, NOT `tk-note` — that one is a ticket's internal note and has
   its own box, head and <p> rules; sharing the class would restyle both. */
.tk-ftnote{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .8rem;padding:.6rem .75rem;
  background:var(--bg-hover);border:1px solid var(--border);border-left:3px solid var(--text-muted);
  border-radius:8px;font-size:.83rem;line-height:1.5;color:var(--text-secondary)}
.tk-ftnote ion-icon{flex:none;font-size:1.05rem;margin-top:.1rem;color:var(--text-muted)}
.tk-ftnote strong{color:var(--text-primary)}
.tk-ftnote a{color:var(--primary);text-decoration:underline}
.tk-ftnote--warn{border-left-color:var(--warning,#F0B232)}
.tk-ftnote--warn ion-icon{color:var(--warning,#F0B232)}
/* A row the free tier keeps but does not use. Dimmed, never hidden: it still holds
   its staff, SLA and history, and its buttons must stay usable so an owner can edit
   it or delete it to free the slot. Opacity only — `pointer-events:none` here would
   take the delete button with it. */
.tk-card--locked{opacity:.62;border-style:dashed}
.tk-card--locked:hover,.tk-card--locked:focus-within{opacity:1}

/* The panel editor's deployment channel: a state readout, not a form field. */
.tk-deploy{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin:.15rem 0 .35rem}
.tk-card{padding:.9rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px}
.tk-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.tk-card-head h4{margin:0;font-size:.95rem;font-weight:600;display:flex;align-items:center;
  gap:.4rem;flex-wrap:wrap}
.tk-card-sub{margin:.35rem 0 0;font-size:.82rem;color:var(--text-muted)}
.tk-card-actions{display:flex;gap:.3rem;flex:0 0 auto}
.tk-list{display:flex;flex-direction:column;gap:.4rem}
.tk-list-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  padding:.55rem .7rem;background:var(--bg-hover);border-radius:8px;font-size:.84rem}
.tk-stats-inline{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.8rem;
  font-size:.8rem;color:var(--text-muted)}

/* ── Activity feed / timeline ────────────────────────────────────────────── */
.tk-feed{display:flex;flex-direction:column}
.tk-feed-row{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .2rem;
  background:none;border:0;border-bottom:1px solid var(--border);color:var(--text);
  font:inherit;font-size:.83rem;text-align:left;cursor:pointer}
.tk-feed-row:last-child{border-bottom:0}
.tk-feed-row:hover{background:var(--bg-hover)}
.tk-feed-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex:0 0 auto}
.tk-feed-dot--opened{background:#5865f2}
.tk-feed-dot--closed{background:#57f287}
.tk-feed-dot--sla{background:#ed4245}
.tk-feed-dot--rated{background:#faa61a}
.tk-feed-main{flex:1;min-width:0}
.tk-feed-time{color:var(--text-muted);font-size:.75rem;white-space:nowrap}
.tk-timeline{display:flex;flex-direction:column;gap:.3rem;max-height:280px;overflow-y:auto}
.tk-tl-row{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.tk-tl-dot{width:5px;height:5px;border-radius:50%;background:var(--text-muted);flex:0 0 auto}
.tk-tl-row span:nth-child(2){flex:1;min-width:0}

/* ── Bars ────────────────────────────────────────────────────────────────── */
.tk-bars{display:flex;align-items:flex-end;gap:2px;height:130px}
.tk-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:2px}
.tk-bar-fill{width:100%;min-height:2px;background:#5865f2;border-radius:3px 3px 0 0;opacity:.85}
.tk-bar span{font-size:.62rem;color:var(--text-muted)}
.tk-legend{display:flex;flex-direction:column}
.tk-legend-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;padding:.45rem .2rem;background:none;border:0;
  border-bottom:1px solid var(--border);color:var(--text);font:inherit;font-size:.85rem;
  text-align:left;cursor:pointer}
.tk-legend-row:last-child{border-bottom:0}
.tk-legend-row:hover{background:var(--bg-hover)}
.tk-barrow{display:flex;flex-direction:column;gap:.45rem}
.tk-barrow-item{display:grid;grid-template-columns:minmax(90px,1.1fr) 3fr auto auto;
  gap:.6rem;align-items:center;font-size:.82rem}
.tk-barrow-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-barrow-track{height:8px;border-radius:4px;background:var(--bg-hover);overflow:hidden}
.tk-barrow-fill{display:block;height:100%;border-radius:4px}

/* ── Charts ──────────────────────────────────────────────────────────────── */
.tk-chart svg{width:100%;height:220px;display:block}
.tk-chart-legend{display:flex;gap:1rem;justify-content:center;margin-top:.4rem;
  font-size:.75rem;color:var(--text-muted)}
.tk-chart-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;
  margin-right:.3rem;vertical-align:middle}
.tk-an-head{display:flex;justify-content:flex-end;margin-bottom:.9rem}
.tk-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.tk-seg button{padding:.35rem .75rem;background:none;border:0;color:var(--text-muted);
  font:inherit;font-size:.8rem;cursor:pointer}
.tk-seg button.active{background:var(--bg-hover);color:var(--text)}

/* ── Heatmap ─────────────────────────────────────────────────────────────── */
.tk-heat{overflow-x:auto}
.tk-heat-hours,.tk-heat-row{display:grid;
  grid-template-columns:38px repeat(24,minmax(14px,1fr));gap:2px;align-items:center}
.tk-heat-hours span{font-size:.6rem;color:var(--text-muted);text-align:center}
.tk-heat-row{margin-bottom:2px}
.tk-heat-day{font-size:.7rem;color:var(--text-muted)}
.tk-heat-cell{height:16px;border-radius:3px;
  background:color-mix(in srgb,#5865f2 calc(var(--i) * 100%),var(--bg-hover))}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.tk-board{display:flex;flex-direction:column;gap:.3rem}
.tk-board-row{display:grid;grid-template-columns:28px 1.4fr .8fr 1fr .9fr;gap:.6rem;
  align-items:center;padding:.4rem .2rem;font-size:.84rem;border-bottom:1px solid var(--border)}
.tk-board-row:last-child{border-bottom:0}
.tk-board-rank{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--bg-hover);font-size:.72rem;font-weight:700;color:var(--text-muted)}
.tk-board-rank--1{background:rgba(250,166,26,.22);color:#f6c177}
.tk-board-rank--2{background:rgba(148,163,184,.22);color:#cbd5e1}
.tk-board-rank--3{background:rgba(180,83,9,.22);color:#d69e6a}

/* ── Forms inside modals ─────────────────────────────────────────────────── */
.tk-form{display:flex;flex-direction:column;gap:.85rem}
.tk-form .field{display:flex;flex-direction:column;gap:.25rem}
.tk-form .field>span{font-size:.78rem;font-weight:500;color:var(--text-muted)}
.tk-form .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.tk-form .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem}
.tk-details{border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem}
.tk-details summary{cursor:pointer;font-size:.85rem;font-weight:600}
.tk-details[open] summary{margin-bottom:.7rem}
.tk-rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:.3rem;max-height:210px;overflow-y:auto}
.tk-rolechk{display:flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.15rem .3rem;
  border-radius:5px;cursor:pointer}
.tk-rolechk:hover{background:var(--bg-hover)}
.tk-esc-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem;
  font-size:.8rem}
.tk-esc-row .input-sm{width:78px}
.tk-note-inline{display:flex;align-items:center;gap:.4rem;margin-top:.6rem}

/* ── Ticket drawer ───────────────────────────────────────────────────────── */
/* The drawer body IS the modal body, so `.modal-lg`'s flex cap already bounds and
   scrolls it — a second max-height here would fight that cap and re-clip the
   footer it exists to keep on screen. */
.tk-drawer-body{min-height:0}
.tk-drawer-grid{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:1.4rem}
.tk-drawer-side{border-left:1px solid var(--border);padding-left:1.1rem}
@media (max-width:860px){
  .tk-drawer-grid{grid-template-columns:1fr}
  .tk-drawer-side{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:1rem}
}
.tk-meta{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}
.tk-meta-row{display:flex;justify-content:space-between;gap:.75rem;font-size:.83rem;
  padding:.2rem 0;border-bottom:1px solid var(--border)}
.tk-meta-row>span:first-child{color:var(--text-muted)}
.tk-answers{display:flex;flex-direction:column;gap:.4rem}
.tk-answer{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .6rem;
  background:var(--bg-hover);border-radius:8px}
.tk-answer-q{font-size:.73rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}
.tk-answer-a{font-size:.86rem;white-space:pre-wrap;word-break:break-word}
.tk-sla{display:flex;flex-direction:column;gap:.3rem}
.tk-sla-row{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;font-size:.82rem}
.tk-note{padding:.5rem .65rem;background:var(--bg-hover);border-radius:8px;margin-bottom:.4rem}
.tk-note-head{display:flex;justify-content:space-between;font-size:.74rem;margin-bottom:.2rem}
.tk-note p{margin:0;font-size:.85rem;white-space:pre-wrap}
.tk-note-add{display:flex;gap:.5rem;align-items:flex-end;margin-top:.5rem}
.tk-note-add textarea{flex:1}
.tk-actions{display:flex;flex-direction:column;gap:.4rem}
.tk-ai{margin:.8rem 0;padding:.6rem .75rem;border-radius:8px;
  background:rgba(88,101,242,.1);border:1px solid rgba(88,101,242,.28)}
.tk-ai strong{display:flex;align-items:center;gap:.35rem;font-size:.8rem}
.tk-ai p{margin:.3rem 0 0;font-size:.84rem;white-space:pre-wrap}
.tk-dl{display:flex;gap:.25rem;flex-wrap:wrap}
.tk-reasons{display:grid;gap:.4rem}
.tk-reason{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .75rem;text-align:left;
  background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font:inherit;cursor:pointer}
.tk-reason:hover{border-color:rgba(220,38,38,.42)}
.tk-reason em{font-style:normal;font-size:.75rem;color:var(--text-muted)}

/* ── Form designer ───────────────────────────────────────────────────────── */
/* Two panes that scroll INDEPENDENTLY, so the whole body must not scroll as well
   (hence `modal-body--own-scroll` on the element) — nested scrollers make the
   inner pane unreachable. The height comes from `.modal-lg`'s flex cap. */
.tk-designer{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:1.4rem;
  min-height:0}
.tk-designer-main,.tk-designer-side{overflow-y:auto;min-height:0}
.tk-designer-side{border-left:1px solid var(--border);padding-left:1.1rem}
@media (max-width:900px){
  .tk-designer{grid-template-columns:1fr;overflow-y:auto}
  .tk-designer-main,.tk-designer-side{overflow:visible}
  .tk-designer-side{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:1rem}
}
.tk-fields{display:flex;flex-direction:column;gap:.55rem;margin:.9rem 0}
.tk-field-row{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.tk-field-head{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:var(--bg-hover)}
.tk-field-n{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;
  background:var(--bg-card);font-size:.7rem;font-weight:700;color:var(--text-muted)}
.tk-field-label{flex:1;min-width:0}
.tk-field-tools{display:flex;gap:.1rem;margin-left:auto}
.tk-field-body{padding:.6rem;display:flex;flex-direction:column;gap:.6rem}
.tk-cond{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.78rem;
  padding-top:.5rem;border-top:1px dashed var(--border)}
.tk-add-field{display:flex;flex-direction:column;gap:.5rem;padding:.7rem;
  border:1px dashed var(--border);border-radius:10px}
.tk-add-group{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.tk-add-group strong{font-size:.73rem;color:var(--text-muted);min-width:104px}
.tk-plan{display:flex;flex-direction:column;gap:.4rem}
.tk-plan-step{display:flex;gap:.5rem;padding:.5rem .6rem;border-radius:8px;
  background:var(--bg-hover);font-size:.8rem}
.tk-plan-step--component{background:rgba(88,101,242,.12)}
.tk-plan-step--upload{background:rgba(250,166,26,.12)}
/* A note is a step the member reads past, so it reads quieter than a question. */
.tk-plan-step--info{background:rgba(148,163,184,.12);border-left:2px solid var(--text-muted)}

/* ── Form designer: composed add paths ───────────────────────────────────────
   "Custom question" and "From library" are the two entry points most authors
   want; the by-type strip is folded away behind a <details> under them. */
.tk-add-primary{display:flex;gap:.45rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
.tk-add-details{margin-top:.6rem}
.tk-add-details>summary{font-size:.78rem;color:var(--text-muted);cursor:pointer;padding:.3rem 0}
.tk-add-details .tk-add-field{margin-top:.5rem}

/* The inline composer slot. Inline rather than a nested dialog because the
   designer is ALREADY a modal and the page owns exactly one modal element. */
.tk-composer{border:1px solid var(--blurple);border-radius:10px;padding:.8rem;
  display:flex;flex-direction:column;gap:.6rem;background:var(--bg-hover);margin-bottom:.8rem}
.tk-composer-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tk-composer-head strong{display:flex;align-items:center;gap:.4rem;font-size:.85rem}
.tk-composer-foot{display:flex;justify-content:flex-end;gap:.4rem}

.tk-lib-list{display:flex;flex-direction:column;gap:.25rem;max-height:17rem;overflow-y:auto}
.tk-lib-row{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;
  padding:.45rem .55rem;border:1px solid var(--border);border-radius:8px;
  background:var(--bg-card);color:inherit;cursor:pointer;font-size:.8rem;
  transition:border-color .15s,background .15s}
.tk-lib-row:hover{border-color:var(--blurple);background:var(--surface-hover)}
.tk-lib-row[hidden]{display:none}
.tk-lib-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-lib-row em{font-style:normal;font-size:.72rem;flex:0 0 auto}

/* A note row is not a question — the dashed rail says so at a glance. */
.tk-field-row--info{border-style:dashed}
.tk-field-row--info .tk-field-head{background:rgba(148,163,184,.1)}
.tk-plan-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--bg-card);font-size:.68rem;font-weight:700;flex:0 0 auto}
.tk-plan-step em{display:block;font-style:normal;color:var(--text-muted);font-size:.75rem}
.tk-warnbox{margin-top:.8rem;padding:.6rem .75rem;border-radius:8px;
  background:rgba(250,166,26,.1);border:1px solid rgba(250,166,26,.3);font-size:.78rem}
.tk-warnbox ul{margin:.35rem 0 0;padding-left:1.1rem}
.tk-warnbox li{margin-bottom:.2rem}

/* ── Workflow builder ────────────────────────────────────────────────────── */
.tk-wf-group{margin-bottom:1.2rem}
.tk-wf-group>.tk-h5{color:var(--text);border-bottom:1px solid var(--border);padding-bottom:.35rem}
.tk-wf-group .tk-card{margin-bottom:.5rem}
.tk-wf-card--broken{border-color:rgba(237,66,69,.45)}
.tk-flow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.tk-flow-node{font-size:.74rem;padding:.18rem .45rem;border-radius:6px;background:var(--bg-hover)}
.tk-flow-node--trigger{background:rgba(88,101,242,.18);color:#c9cdfb}
.tk-flow-node--cond{background:rgba(250,166,26,.15);color:#f6c177}
.tk-flow-node--action{background:rgba(87,242,135,.13);color:#8ce6a8}
.tk-flow-arrow{color:var(--text-muted);font-size:.7rem}
.tk-builder-step{display:flex;gap:.7rem;padding:.8rem;border:1px solid var(--border);border-radius:10px}
.tk-builder-badge{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--bg-hover);font-size:.76rem;font-weight:700;flex:0 0 auto}
.tk-builder-body{flex:1;min-width:0}
.tk-builder-body .tk-h5:first-child{margin-top:0}
.tk-cond-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.tk-action-row{border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;overflow:hidden}
.tk-action-head{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;background:var(--bg-hover)}
.tk-action-n{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;
  background:var(--bg-card);font-size:.7rem;font-weight:700}
.tk-action-body{padding:.6rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.tk-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.tk-template{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .85rem;text-align:left;
  background:var(--bg-hover);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font:inherit;cursor:pointer}
.tk-template:hover{border-color:rgba(220,38,38,.42)}
.tk-template em{font-style:normal;font-size:.76rem;color:var(--text-muted)}

/* The ticket pages' own single-element toast is gone — it could only ever show ONE
   outcome, so a second overwrote the first before it could be read. `toast()` in
   components.js (the `.az-toasts` stack at the end of this file) replaced it and is
   now used dashboard-wide. */

@media (prefers-reduced-motion:reduce){
  .tk-tab,.tk-row{transition:none}
}