/* dwyt – design ported from StockMaster (shadcn/ui tokens): steel-blue primary, quiet greys,
   collapsible left sidebar, light and dark themes. Plain CSS (no build step); colours are HSL
   triplets so they can take an alpha: hsl(var(--primary) / .1). */

@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --background: 210 20% 98%; --foreground: 215 25% 12%;
  --card: 0 0% 100%; --card-foreground: 215 25% 12%;
  --primary: 213 80% 38%; --primary-foreground: 0 0% 100%;
  --secondary: 210 16% 93%; --secondary-foreground: 215 25% 20%;
  --muted: 210 16% 93%; --muted-foreground: 215 15% 42%;
  --accent: 213 60% 94%; --accent-foreground: 213 80% 30%;
  --destructive: 0 72% 45%; --destructive-foreground: 0 0% 100%;
  --success: 152 60% 30%; --success-bg: 145 60% 93%;
  --warning: 32 90% 30%; --warning-bg: 43 95% 92%; --warning-line: 40 85% 70%;
  --info-bg: 213 70% 94%;
  --border: 214 20% 88%; --input: 214 20% 84%; --ring: 213 80% 45%;
  --sidebar-background: 213 30% 96%; --sidebar-foreground: 215 25% 20%;
  --sidebar-muted: 215 15% 45%; --sidebar-primary: 213 80% 38%;
  --sidebar-accent: 213 25% 88%; --sidebar-border: 214 20% 86%;
  --radius: .5rem;
  --shadow-sm: 0 1px 2px hsl(215 30% 10% / .05);
  --shadow: 0 1px 3px hsl(215 30% 10% / .08), 0 1px 2px hsl(215 30% 10% / .04);
  --shadow-lg: 0 10px 30px hsl(215 30% 10% / .18);
  --sidebar-w: 15rem; --sidebar-w-collapsed: 4.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 215 30% 10%; --foreground: 210 20% 92%;
    --card: 215 28% 13%; --card-foreground: 210 20% 92%;
    --primary: 213 75% 62%; --primary-foreground: 215 30% 8%;
    --secondary: 215 25% 18%; --secondary-foreground: 210 20% 88%;
    --muted: 215 25% 18%; --muted-foreground: 215 15% 62%;
    --accent: 215 25% 22%; --accent-foreground: 213 75% 75%;
    --destructive: 0 70% 64%; --destructive-foreground: 0 0% 100%;
    --success: 152 50% 58%; --success-bg: 152 40% 16%;
    --warning: 40 85% 65%; --warning-bg: 38 50% 16%; --warning-line: 38 50% 32%;
    --info-bg: 213 40% 20%;
    --border: 215 20% 22%; --input: 215 20% 26%; --ring: 213 75% 62%;
    --sidebar-background: 215 35% 8%; --sidebar-foreground: 210 18% 84%;
    --sidebar-muted: 215 15% 58%; --sidebar-primary: 213 75% 65%;
    --sidebar-accent: 215 28% 16%; --sidebar-border: 215 28% 15%;
    --shadow-lg: 0 10px 30px hsl(0 0% 0% / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 215 30% 10%; --foreground: 210 20% 92%;
  --card: 215 28% 13%; --card-foreground: 210 20% 92%;
  --primary: 213 75% 62%; --primary-foreground: 215 30% 8%;
  --secondary: 215 25% 18%; --secondary-foreground: 210 20% 88%;
  --muted: 215 25% 18%; --muted-foreground: 215 15% 62%;
  --accent: 215 25% 22%; --accent-foreground: 213 75% 75%;
  --destructive: 0 70% 64%; --destructive-foreground: 0 0% 100%;
  --success: 152 50% 58%; --success-bg: 152 40% 16%;
  --warning: 40 85% 65%; --warning-bg: 38 50% 16%; --warning-line: 38 50% 32%;
  --info-bg: 213 40% 20%;
  --border: 215 20% 22%; --input: 215 20% 26%; --ring: 213 75% 62%;
  --sidebar-background: 215 35% 8%; --sidebar-foreground: 210 18% 84%;
  --sidebar-muted: 215 15% 58%; --sidebar-primary: 213 75% 65%;
  --sidebar-accent: 215 28% 16%; --sidebar-border: 215 28% 15%;
  --shadow-lg: 0 10px 30px hsl(0 0% 0% / .5);
  color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 15px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 1.375rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; font-weight: 650; margin: 1.5rem 0 .6rem; }
h3 { font-size: .98rem; font-weight: 600; }
a { color: hsl(var(--primary)); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: .5rem 0; }
code { font: .85em ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: hsl(var(--muted));
  border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 1px 5px; word-break: break-all; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: calc(var(--radius) - 2px); }
[hidden] { display: none !important; }
.icon { flex-shrink: 0; display: inline-block; vertical-align: -0.2em; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--radius);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- frame: sidebar + content -------------------------------------------------------- */
.shell { display: flex; min-height: 100dvh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border)); z-index: 40; }
.sb-inner { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.sb-animate .sidebar { transition: width .2s ease; }
.logo { flex-shrink: 0; }
.sb-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 16px;
  border-bottom: 1px solid hsl(var(--sidebar-border)); min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; flex: 1; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 750; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.1; }
.brand-sub { font-size: .7rem; color: hsl(var(--sidebar-muted)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo .logo-a { fill: hsl(var(--primary)); }
.logo .logo-b { fill: hsl(var(--primary-foreground)); }
.logo .logo-c { fill: hsl(var(--primary-foreground) / .7); }
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 10px 12px; }
.sb-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-group { margin: 14px 10px 6px; font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--sidebar-muted)); white-space: nowrap; }
.sb-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px;
  color: hsl(var(--sidebar-foreground)); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
  min-height: 40px; transition: background-color .12s, color .12s; }
.sb-link:hover { background: hsl(var(--sidebar-accent)); }
.sb-link[aria-current="page"] { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-primary)); font-weight: 600; }
.sb-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: hsl(var(--sidebar-primary)); }
.sb-chev { margin-left: auto; opacity: .5; }
.sb-foot { border-top: 1px solid hsl(var(--sidebar-border)); padding: 12px; display: grid; gap: 8px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: hsl(var(--sidebar-accent) / .6); min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .8rem; font-weight: 700; }
.sb-user-text { display: flex; flex-direction: column; min-width: 0; }
.sb-user-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: .7rem; color: hsl(var(--sidebar-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tools { display: flex; gap: 4px; }
.sb-tools form { margin: 0; flex: 1; display: flex; }
.sb-tools .icon-button { flex: 1; gap: 8px; font-size: .8rem; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px;
  padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.icon-button:hover { background: hsl(var(--sidebar-accent)); box-shadow: none; }
.content .icon-button:hover { background: hsl(var(--accent)); }
.when-dark { display: none; }
:root[data-theme="dark"] .when-dark { display: inline-block; }
:root[data-theme="dark"] .when-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .when-dark { display: inline-block; }
  :root:not([data-theme="light"]) .when-light { display: none; }
}
.sb-close { display: none; }
.sb-backdrop { position: fixed; inset: 0; z-index: 39; background: hsl(215 30% 5% / .55); }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 32px 48px; }
main:focus { outline: none; }
.mobile-top { display: none; }

/* collapsed (desktop): icons only, names as tooltips (title attribute) */
@media (min-width: 900px) {
  .sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  .sb-collapsed .sb-head { flex-direction: column; padding: 12px 8px; gap: 6px; }
  .sb-collapsed .brand { flex: 0; justify-content: center; }
  .sb-collapsed .brand-text, .sb-collapsed .sb-label, .sb-collapsed .sb-chev,
  .sb-collapsed .sb-user-text { display: none; }
  .sb-collapsed .sb-group { margin: 10px 0 4px; height: 1px; overflow: hidden; color: transparent;
    background: hsl(var(--sidebar-border)); }
  .sb-collapsed .sb-nav { padding: 8px; }
  .sb-collapsed .sb-link { justify-content: center; padding: 10px 0; }
  .sb-collapsed .sb-link[aria-current="page"]::before { left: -8px; }
  .sb-collapsed .sb-foot { padding: 8px; }
  .sb-collapsed .sb-user { justify-content: center; padding: 6px 0; background: none; }
  .sb-collapsed .sb-tools { flex-direction: column; }
  .sb-collapsed .sb-collapse .icon { transform: scaleX(-1); }
}

/* mobile: the sidebar is an off-canvas drawer opened from the top bar */
@media (max-width: 899px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(18rem, 86vw); overflow-y: auto;
    transform: translateX(-102%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    box-shadow: var(--shadow-lg); }
  .sb-open .sidebar { transform: none; visibility: visible; }
  .sb-collapse { display: none; }
  .sb-close { display: inline-flex; }
  .mobile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0;
    z-index: 30; padding: 8px 8px; min-height: 56px; background: hsl(var(--background) / .88);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); }
  .mobile-top { justify-content: flex-start; }
  .mobile-top .brand { flex: 0 0 auto; color: hsl(var(--primary)); gap: 8px; }
  .mobile-top .mobile-spacer { flex: 1; }
  .mobile-top [data-sidebar-open] { position: relative; }
  .mobile-top .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--background)); }
  main { padding: 18px 16px 40px; }
}

/* signed out: a centred card */
.bare-main { max-width: 420px; padding: 10vh 16px 40px; }
.bare-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; color: hsl(var(--primary)); }
.bare-brand .brand-name { font-size: 1.5rem; }
.login { margin: 0; }

/* ---- building blocks ------------------------------------------------------------------ */
.card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 1px); padding: 20px; margin: 16px 0; box-shadow: var(--shadow-sm); }
.card > h2:first-child, .card > .bar:first-child h2 { margin-top: 0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.bar h1, .bar h2 { margin-bottom: 0; }
main > .bar:first-child, main > h1:first-child { margin-bottom: 1.25rem; }
.muted, .meta { color: hsl(var(--muted-foreground)); font-size: .875rem; }
.meta { line-height: 1.55; }
.error, .error-text { color: hsl(var(--destructive)); }
p.error { background: hsl(var(--destructive) / .08); border: 1px solid hsl(var(--destructive) / .3); border-radius: var(--radius); padding: 10px 14px; }
.warn-box, .notice { background: hsl(var(--warning-bg)); border: 1px solid hsl(var(--warning-line)); color: hsl(var(--foreground));
  border-radius: var(--radius); padding: 10px 14px; font-size: .9rem; }

/* forms */
label { display: block; margin: 10px 0; font-size: .875rem; font-weight: 500; }
label.choice { display: inline-flex; align-items: center; gap: 8px; margin: 4px 16px 4px 0; font-weight: 400; font-size: .9rem; min-height: 32px; }
input, select, button, textarea, .button { font: inherit; }
input:not([type=radio]):not([type=checkbox]):not([type=file]), select, textarea { display: block; width: 100%; margin-top: 6px;
  min-height: 40px; padding: 8px 12px; border: 1px solid hsl(var(--input)); border-radius: 6px; background: hsl(var(--card));
  color: hsl(var(--foreground)); font-size: .9rem; font-weight: 400; transition: border-color .12s, box-shadow .12s; }
input:not([type=radio]):not([type=checkbox]):focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .2); }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground) / .8); }
input[type=radio], input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: hsl(var(--primary)); }
input[type=file] { display: block; margin-top: 6px; font-size: .875rem; max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; margin-right: 10px; padding: 6px 12px; border: 1px solid hsl(var(--input));
  border-radius: 6px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); cursor: pointer; }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
  linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 15px top 50%, right 10px top 50%;
  background-size: 5px 5px; background-repeat: no-repeat; }
input.num { display: inline-block !important; width: 4.5em !important; margin: 0 !important; min-height: 32px !important; padding: 4px 8px !important; }
fieldset { border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin: 14px 0; padding: 8px 14px 10px; min-width: 0; }
legend { padding: 0 6px; color: hsl(var(--muted-foreground)); font-size: .8rem; font-weight: 600; }
textarea { min-height: 72px; resize: vertical; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
/* labels of one row whose text wraps to a different number of lines: the fields still line up at the bottom */
.grid > label:not(.choice), .catedit .row > label { display: flex; flex-direction: column; justify-content: flex-end; }
progress { width: 100%; height: 8px; accent-color: hsl(var(--primary)); }

/* buttons (shadcn: default / outline / destructive / ghost) */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 16px;
  border: 1px solid hsl(var(--primary)); border-radius: 6px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: .875rem; font-weight: 550; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, border-color .12s, box-shadow .12s, transform .12s; }
button:hover, .button:hover { background: hsl(var(--primary) / .9); box-shadow: var(--shadow); }
button:active, .button:active { transform: translateY(1px); }
button.secondary, .button.secondary { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); }
button.secondary:hover, .button.secondary:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
button.danger { background: hsl(var(--card)); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .45); }
button.danger:hover { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
button.small, .button.small { min-height: 32px; padding: 5px 12px; font-size: .8rem; }
button.link { min-height: 0; padding: 0; border: 0; background: none; color: hsl(var(--primary)); font-weight: 500; box-shadow: none; }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.sb-tools button, .icon-button { border: 0; min-height: 40px; background: transparent; color: inherit; font-weight: 500; box-shadow: none; }
form.inline { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; line-height: 1.4; padding: 2px 8px;
  border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  text-decoration: none; white-space: nowrap; vertical-align: 1px; }
a.badge:hover { border-color: hsl(var(--primary) / .5); }
.badge.warn { background: hsl(var(--warning-bg)); border-color: hsl(var(--warning-line)); color: hsl(var(--warning)); }
.badge.cloud, .badge.meaning { background: hsl(var(--info-bg)); border-color: hsl(var(--primary) / .3); color: hsl(var(--accent-foreground)); }
.badge.own, .badge.literal { background: hsl(var(--success-bg)); border-color: hsl(var(--success) / .3); color: hsl(var(--success)); }
.badge.meaning { border-style: dashed; }

/* segmented tabs */
.views { display: inline-flex; gap: 2px; flex-wrap: wrap; padding: 3px; border-radius: 8px; background: hsl(var(--muted)); margin: 0 0 12px; }
.views a { padding: 5px 12px; border-radius: 6px; text-decoration: none; font-size: .82rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.views a:hover { color: hsl(var(--foreground)); }
.views a.active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow); }

/* filters and search rows */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
/* as specific as the general input rule, or its margin-top pushes the field below the select next to it */
.filters input:not([type=radio]):not([type=checkbox]):not([type=file]) { flex: 1 1 240px; min-width: 0; width: auto;
  margin: 0; }
.filters select { width: auto; flex: 0 0 auto; margin: 0; }
.filters label { margin: 0; }
.filters .muted { flex-basis: 100%; }
.search { display: flex; gap: 8px; flex: 1; max-width: 520px; }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-top: 8px; }
.stack > * { margin: 0; }

/* lists as cards with row dividers */
.items, .jobs, .transcripts, .samba ul, .results, .channels, .hits { list-style: none; padding: 0; margin: 0; }
.items { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 1px);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.item { display: flex; gap: 16px; padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); transition: background-color .12s; }
.item:last-child { border-bottom: 0; }
.item:hover { background: hsl(var(--accent) / .45); }
.item > div { min-width: 0; flex: 1; }
.item .thumb { flex-shrink: 0; }
.item .thumb img, .nothumb { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; background: hsl(var(--muted)); }
.nothumb { display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.item .title { overflow-wrap: anywhere; font-weight: 600; text-decoration: none; color: hsl(var(--foreground)); font-size: .95rem; line-height: 1.4; }
.item a.title:hover { color: hsl(var(--primary)); text-decoration: underline; }
.item .meta .badge { margin-left: 2px; }
.item .actions { margin-top: 8px; }
.preview { margin: 4px 0 0; font-size: .85rem; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2;
  line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item.channel.inactive .title { color: hsl(var(--muted-foreground)); }
.tags { margin: 0 0 14px; }
@media (max-width: 600px) {
  .item { gap: 12px; padding: 12px; }
  .item .thumb img, .nothumb { width: 112px; }
  /* portrait phone: picture and title side by side, everything else under them at full width */
  .item.media { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .item.media > div { display: contents; }
  .item.media > .thumb { grid-column: 1; grid-row: 1; }
  .item.media > div > .title { grid-column: 2; grid-row: 1; align-self: center; }
  .item.media > div > :not(.title) { grid-column: 1 / -1; margin: 0; }
  .item.media .preview { -webkit-line-clamp: 6; line-clamp: 6; }
}

.jobs > li.card { margin: 10px 0; padding: 14px 16px; }
.job { padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.job .state { font-weight: 600; margin-right: 8px; }
.job.failed .state { color: hsl(var(--destructive)); }
.job.done .state { color: hsl(var(--success)); }
.pager { display: flex; gap: 16px; justify-content: center; margin: 16px 0; }

/* item page */
.item-head { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.item-head .cover { width: 280px; max-width: 100%; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }
.item-head h1 { margin: 0; font-size: 1.3rem; }
.item-head-text { flex: 1 1 320px; min-width: 0; }
.item-head .meta a { overflow-wrap: anywhere; }
.transcripts { margin: 0 0 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.transcripts li { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border)); font-size: .875rem; }
.transcripts li:last-child { border-bottom: 0; }
.transcripts li.current { background: hsl(var(--accent) / .6); }
.transcript .ts { font-variant-numeric: tabular-nums; font-size: .78rem; margin-right: 6px; text-decoration: none; }
.transcript .speaker { font-weight: 600; margin-right: 4px; }
.transcript .para { margin: 0 0 .9rem; }
.transcript .para p { margin: .1rem 0 0; display: inline; }
.transcript .para .orig, .transcript .para .hu { display: inline; margin: 0; }
.transcript .hu { border-left: 3px solid hsl(var(--primary) / .35); padding-left: 10px; }
.transcript .pair { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px 16px; align-items: start; }
.transcript .pair .lead { grid-row: 1; white-space: nowrap; }
.transcript .pair .orig, .transcript .pair .hu { display: block; margin: 0; }
.transcript.two-col .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2px; }
.transcript.two-col .cols p { display: block; }
.para .ts { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.para:target, .para.hit, .transcript p:target { background: hsl(var(--warning-bg)); border-radius: 4px; }
@media (max-width: 720px) {
  .transcript .pair, .transcript.two-col .cols { grid-template-columns: 1fr; gap: 4px; }
  .item-head .cover { width: 100%; }
}
.item-actions { margin: 10px 0 16px; }
.translation-bar { margin: 8px 0; }
.backfill { margin: 0 0 8px; }

/* summary */
.summary h2 { margin-top: 0; }
.summary-text { font-size: .95rem; }
.summary-text h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.summary-text ul { padding-left: 1.2rem; margin: .4rem 0; }
.summary-text li { margin: .3rem 0; }
.summary-text .ts { font-variant-numeric: tabular-nums; font-size: .8rem; text-decoration: none; }
.summary .versions { list-style: none; padding: 0; }
.summary .point { margin: .2rem 0; }
details.regen, .summary details, .card details { margin-top: 12px; }
details > summary { cursor: pointer; color: hsl(var(--primary)); font-size: .875rem; font-weight: 550; width: fit-content; }
.regen-form { max-width: 480px; }

/* info popover */
details.info { display: inline-block; position: relative; vertical-align: middle; margin: 0; }
details.info > summary { list-style: none; cursor: pointer; color: hsl(var(--muted-foreground)); font-size: .95rem; padding: 0 4px;
  border-radius: 4px; }
details.info > summary:hover { color: hsl(var(--primary)); }
details.info > summary::-webkit-details-marker { display: none; }
details.info[open] > dl { position: absolute; z-index: 10; left: 0; top: 1.7em; width: max-content; max-width: min(380px, 85vw);
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 10px 14px; margin: 0;
  box-shadow: var(--shadow-lg); display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: .82rem; color: hsl(var(--foreground)); }
details.info dt { color: hsl(var(--muted-foreground)); }
details.info dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  details.info[open] > dl { position: fixed; left: 16px; right: 16px; top: 30vh; max-width: none; width: auto; }
}

/* search */
.result.card { padding: 14px 18px; margin: 10px 0; }
.result .title { font-weight: 600; text-decoration: none; }
.hits { margin: 6px 0 0; }
.hits li { margin: 6px 0; }
.snippet { font-size: .9rem; margin-top: 2px; }
mark { background: hsl(var(--warning-bg)); color: inherit; padding: 0 2px; border-radius: 3px; box-shadow: inset 0 -2px 0 hsl(var(--warning-line)); }
.ext { text-decoration: none; margin: 0 4px; }
.search-form details { margin-top: 8px; }

/* misc */
.samba { max-height: 320px; overflow: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 8px; }
.samba li { padding: 2px 0; }
.takeout { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.takeout label { margin: 0; }
.code { font-family: ui-monospace, monospace; font-size: 1.3rem; letter-spacing: 3px; }
.token { word-break: break-all; user-select: all; }
.qr svg { display: block; margin: 8px 0; background: #fff; padding: 8px; border-radius: 6px; }
.channels li { padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center; justify-content: space-between; }
.channels li.inactive { opacity: .6; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid hsl(var(--border)); }
th { color: hsl(var(--muted-foreground)); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.filters:has(input[type=file]) { align-items: flex-end; }

/* ---- page refinements ------------------------------------------------------------------ */
.crumbs { display: flex; align-items: center; gap: 4px; margin: -6px 0 14px; font-size: .8rem; color: hsl(var(--muted-foreground)); min-width: 0; }
.crumbs a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.crumbs a:hover { color: hsl(var(--primary)); text-decoration: underline; }
.crumbs [aria-current] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.item-head { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 1px);
  padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.cover-link { display: block; flex-shrink: 0; }
.nocover { width: 280px; aspect-ratio: 16 / 9; display: grid; place-items: center; background: hsl(var(--muted));
  color: hsl(var(--muted-foreground)); border-radius: var(--radius); flex-shrink: 0; }
.item-head h1 { margin: 2px 0 10px; }
.facts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 16px; font-size: .85rem; }
.facts li { min-width: 0; }
.fact-k { display: block; font-size: .68rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.facts .fact-url { grid-column: 1 / -1; }
.facts .fact-url a { overflow-wrap: anywhere; }
.head-tags { margin: 0 0 10px; }
.head-actions { margin-top: 4px; }
.push-right { margin-left: auto; }
.jump { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; margin: 0 0 4px; padding: 6px 0;
  background: hsl(var(--background) / .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 550;
  text-decoration: none; white-space: nowrap; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.jump a:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
section[id], .para[id] { scroll-margin-top: 64px; }
@media (max-width: 899px) {
  .jump { top: 56px; }
  section[id], .para[id] { scroll-margin-top: 120px; }
  .nocover, .cover-link { width: 100%; }
  .item-head { padding: 12px; }
}
.two-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 16px; }
.two-cards > .card { margin-bottom: 0; }
@media (max-width: 420px) { .two-cards { grid-template-columns: 1fr; } }
details.help { margin: 0 0 12px; }
details.help > summary { display: inline-flex; align-items: center; gap: 6px; }
details.help p { margin-top: 6px; }
/* wide screens: name, settings in one line, delete; narrower (also a zoomed-in browser): the settings go under the
   name, so the name never gets squeezed to a letter per line */
.item.channel { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 10px 16px; }
.ch-avatar { width: 34px; height: 34px; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.item.channel.inactive .ch-avatar { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.ch-main .meta { font-size: .8rem; }
.channel-form { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
.channel-form select { display: inline-block; width: auto; margin: 0; min-height: 32px; padding: 4px 28px 4px 10px; font-size: .8rem; }
.channel-form label.choice { margin: 0 4px; font-size: .8rem; min-height: 0; white-space: nowrap; }
button.icon-only { padding: 5px 8px; }
.button .icon, button .icon { margin-left: -2px; }
button.icon-only .icon { margin: 0; }
@media (max-width: 1400px) {
  .item.channel { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 16px; }
  .channel-form { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
  .ch-delete { grid-column: 3; grid-row: 1; }
}
@media (max-width: 600px) { .channel-form { grid-column: 1 / -1; } }
.search input { margin: 0 !important; }
.search-form .choice { margin-top: 10px; }
.backfill form { display: inline-block; margin: 0 6px 6px 0; }
.result .ts { font-variant-numeric: tabular-nums; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.hits li { display: block; padding-top: 8px; border-top: 1px dashed hsl(var(--border)); }
.hits li:first-child { border-top: 0; }
.grid > p:last-child { align-self: end; margin: 10px 0; }
.actions > input:not([type=hidden]) { flex: 1 1 240px; width: auto; margin: 0; }

/* ---- questions (round 6) ------------------------------------------------------------------- */
.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; }
.chat-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.chat-note { margin: 4px 0 10px; }
.chat-older { margin: 6px 0 10px; }
.chat-list { list-style: none; padding: 0; margin: 6px 0 0; font-size: .875rem; }
.chat-list li { padding: 3px 0; }
.chat-log { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; max-width: 100%; }
.msg.user { align-items: flex-end; }
.msg .bubble { border-radius: 12px; padding: 10px 14px; font-size: .925rem; line-height: 1.6; overflow-wrap: anywhere; }
.msg.user .bubble { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); white-space: pre-wrap;
  border-bottom-right-radius: 4px; max-width: min(640px, 92%); }
.msg.bot .bubble { background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); border-bottom-left-radius: 4px;
  max-width: 100%; }
.msg.bot.failed .bubble { background: hsl(var(--destructive) / .06); border-color: hsl(var(--destructive) / .3); }
.msg-meta { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: 3px; padding: 0 4px; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.md h4 { font-size: .95rem; margin: .8rem 0 .3rem; }
.md ul, .md ol { padding-left: 1.3rem; margin: .4rem 0; }
.md li { margin: .2rem 0; }
.md p { margin: .45rem 0; }
.md pre { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 10px 12px;
  overflow-x: auto; font-size: .82rem; }
.md pre code { background: none; border: 0; padding: 0; word-break: normal; white-space: pre; }
.md blockquote { margin: .5rem 0; padding: 2px 12px; border-left: 3px solid hsl(var(--primary) / .4); color: hsl(var(--muted-foreground)); }
.md .table-wrap { overflow-x: auto; margin: .5rem 0; }
.md table { font-size: .85rem; background: hsl(var(--card)); }
.md a.ts, .md a.cite { font-variant-numeric: tabular-nums; font-size: .8rem; text-decoration: none; padding: 0 5px;
  border-radius: 4px; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); white-space: nowrap; }
.md a.ts:hover, .md a.cite:hover { text-decoration: underline; }
.chat-sources { margin: 4px 4px 0; font-size: .82rem; }
.chat-sources ol { margin: 4px 0 0; padding-left: 1.6rem; }
.chat-sources li { margin: 2px 0; }
.dots { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); opacity: .3;
  animation: dot 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-form { margin-top: 8px; }
.chat-form textarea { min-height: 84px; margin-top: 0; }
.chat-actions { justify-content: flex-end; margin-top: 8px; }
.chat-actions select { width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; margin: 0; min-height: 38px; text-overflow: ellipsis; }
.item.conv { align-items: center; }
.item.conv .actions { flex-shrink: 0; }
.md th, .md td { overflow-wrap: normal; word-break: normal; min-width: 5.5em; }
.md th { text-transform: none; letter-spacing: 0; font-size: .82rem; color: hsl(var(--foreground)); }

/* Runners page: what each runner can do and what runs behind its model names */
.runner .runner-name { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.runner-h { display: flex; align-items: center; gap: 6px; margin: 18px 0 6px; font-size: .95rem; }
.cap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.runner > .table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin: 6px 0; }
.runner > .table-wrap table { min-width: 760px; margin: 0; }
.models td, .models th { vertical-align: top; }
.models td { font-size: .85rem; }
.models .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.model-pick { display: grid; gap: 4px; }
.model-hint { margin: 2px 0 0; font-size: .85rem; }
@media (max-width: 640px) {
  .runner > .table-wrap { overflow: visible; }
  .runner > .table-wrap table { min-width: 0; }
  .models thead { display: none; }
  .models, .models tbody, .models tr, .models td { display: block; }
  .models tr { padding: 6px 0; border-bottom: 1px solid hsl(var(--border)); }
  .models tr:last-child { border-bottom: 0; }
  .models td { border: 0; padding: 4px 12px; }
  .models td[data-label]::before { content: attr(data-label); display: block; color: hsl(var(--muted-foreground));
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
}
select { max-width: 100%; }

/* Runner sharing (decision 17.5) */
.shares td, .shares th { vertical-align: top; font-size: .85rem; }
.shares progress { margin-top: 4px; max-width: 160px; display: block; }
.share-opts { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.share-opts legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.share-offer h2 { display: flex; gap: 8px; align-items: center; }
.cap-list .quota { max-width: 220px; display: block; margin: 4px 0 0 52px; }
@media (max-width: 640px) {
  .shares thead { display: none; }
  .shares, .shares tbody, .shares tr, .shares td { display: block; }
  .runner > .table-wrap table.shares { min-width: 0; }
  .shares tr { padding: 6px 0; border-bottom: 1px solid hsl(var(--border)); }
  .shares tr:last-child { border-bottom: 0; }
  .shares td { border: 0; padding: 4px 12px; }
  .shares td[data-label]::before { content: attr(data-label); display: block; color: hsl(var(--muted-foreground));
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .cap-list .quota { margin-left: 0; }
}

/* Paging of the lists */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pager-size label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.pager-size select { width: auto; margin: 0; min-height: 34px; padding-top: 4px; padding-bottom: 4px; }

/* the count of new Inbox videos next to "Postaláda" */
.sb-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; line-height: 1;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.sb-count + .sb-chev { margin-left: 6px; }
.sb-collapsed .sb-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; }

/* caption rule (decision 18.9) */
.captions-policy { border: 0; padding: 0; margin: 14px 0 0; }
.captions-policy legend { font-weight: 600; padding: 0; margin-bottom: 4px; font-size: 1rem; color: hsl(var(--foreground));
  text-transform: none; letter-spacing: 0; }
.captions-policy label.policy { align-items: flex-start; display: flex; margin: 6px 0; }
.captions-policy label.policy input { margin-top: 3px; }
.small-note { font-size: .8rem; margin: 0 0 6px; }
.machine-captions { margin-top: 10px; padding-top: 10px; border-top: 1px dashed hsl(var(--border)); width: 100%; }

.runner-actions { display: inline-flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }

/* Runner install command and remote settings (round 7d) */
.cmd { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin: 8px 0; }
.cmd code { flex: 1 1 280px; display: block; padding: 10px 12px; border-radius: var(--radius); background: hsl(var(--muted));
  font-size: .88rem; word-break: break-all; user-select: all; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 2px; }
.modes button { text-align: left; border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 10px 12px; display: flex;
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; background: hsl(var(--card));
  color: hsl(var(--foreground)); font-weight: 400; min-height: 0; min-width: 0; white-space: normal; line-height: 1.35;
  overflow-wrap: anywhere; }
.modes button .muted { display: block; }
.modes button:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.modes button.on, .modes button.on:hover { border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 1px hsl(var(--primary));
  background: hsl(var(--primary) / .06); }
.rs-field { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 6px 16px; padding: 11px 0;
  border-top: 1px solid hsl(var(--border)); align-items: start; }
.rs-field:first-of-type { border-top: 0; }
.rs-field .lbl { font-weight: 600; }
.rs-field .help { grid-column: 2; color: hsl(var(--muted-foreground)); font-size: .85rem; margin: 0; }
.rs-field.off { opacity: .65; }
.rs-field.hidden { display: none; }
.rs-field input[type=text], .rs-field input[type=password], .rs-field select, .rs-field textarea { width: 100%; max-width: 440px; }
.secret { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.secret input[type=password] { flex: 1 1 200px; }
.lock { font-size: .85rem; color: hsl(var(--muted-foreground)); }
.savebar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 0;
  background: hsl(var(--background)); border-top: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.state { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.log { width: 100%; border-collapse: collapse; }
.log td, .log th { padding: 8px 10px; text-align: left; vertical-align: top; }
.log tr + tr td { border-top: 1px solid hsl(var(--border)); }
.spin { display: inline-block; width: .9rem; height: .9rem; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary));
  border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -0.15em; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .rs-field { grid-template-columns: 1fr; }
  .rs-field .help { grid-column: 1; }
  .log thead { display: none; }
  .log tr { display: block; padding: 8px 0; }
  .log td { display: block; padding: 2px 0; }
  .log tr + tr td { border-top: 0; }
  .log tr + tr { border-top: 1px solid hsl(var(--border)); }
}

/* ---- round 8: Megnézendő, read marks, inbox decisions, sharing (19.1–19.4) ---- */
.icon.filled { fill: currentColor; }
button.on, .button.on { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / .5); }
button.on:hover { background: hsl(var(--primary) / .16); }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--primary));
  margin-right: 6px; vertical-align: .1em; }
.item.read .title { font-weight: 500; color: hsl(var(--muted-foreground)); }
.item.focus { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; border-radius: 8px; }
.item.media { align-items: flex-start; }
.item > .side-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; align-self: flex-start; min-width: 0; }
.side-actions form { margin: 0; }
.desc { margin: 6px 0 0; font-size: .85rem; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2;
  line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.desc b { color: hsl(var(--foreground)); font-weight: 600; }
.keys { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: hsl(var(--muted-foreground));
  margin: -4px 0 12px; }
.keys kbd { display: inline-block; min-width: 1.4em; text-align: center; padding: 1px 6px; border: 1px solid hsl(var(--border));
  border-bottom-width: 2px; border-radius: 5px; background: hsl(var(--card)); font: 600 .75rem/1.4 ui-monospace, monospace; }
@media (hover: none) { .keys { display: none; } }
.consent-hint { font-size: .85rem; margin: 8px 0 0; }
.share-what { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 12px; }
.share-what > div { min-width: 0; }
.share-what .title { font-weight: 600; display: block; overflow-wrap: anywhere; }
.share-what .meta a { overflow-wrap: anywhere; }
.share-thumb { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: hsl(var(--muted)); }
@media (max-width: 600px) {
  .item.media > .side-actions { display: flex; grid-column: 1 / -1; justify-self: end; margin: 0; }
  .share-what { flex-direction: column; }
  .share-thumb { width: 100%; max-width: 320px; }
}

/* reading the summary aloud (19.7, 19.8): one compact player row, the settings under it */
.speak { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--muted) / .35); }
.speak[hidden] { display: none; }
.speak-bar { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.speak-main { min-width: 7.5rem; }
.speak-main .speak-ico-pause, .speak-main.playing .speak-ico-play { display: none; }
.speak-main.playing .speak-ico-pause { display: inline-block; }
.speak-seek { flex: 1 1 8rem; min-width: 6rem; margin: 0; accent-color: hsl(var(--primary)); padding: 0; min-height: 32px; }
.speak-pos { font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }
.speak-opts { margin-top: 8px; }
.speak-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; margin: 0; font-weight: 400; }
.speak-opt select { width: auto; margin: 0; min-height: 32px; padding: 4px 28px 4px 10px; font-size: .85rem; max-width: 12rem; }
.speak-opt[hidden], .speak-now[hidden] { display: none; }
.speak-now { margin: 8px 0 0; font-size: .85rem; color: hsl(var(--muted-foreground)); border-left: 3px solid hsl(var(--primary));
  padding-left: 8px; }
.speak-help { margin: 8px 0 0; font-size: .85rem; }
.narrow-only { display: none; }
@media (max-width: 600px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .speak { padding: 8px 10px; }
  .speak-main { min-width: 0; }
  .speak-main [data-speak-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* a summary written by AssemblyAI's small trial model (19.9) */
.trial-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; padding: 8px 12px; font-size: .85rem;
  border: 1px solid hsl(var(--warning-line)); background: hsl(var(--warning-bg)); border-radius: 8px; }
.trial-note .icon { flex-shrink: 0; margin-top: 2px; }

/* 19.10: the recordings the runner found on a page */
.pagecard h2 { margin-bottom: 6px; }
.pick { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid hsl(var(--border));
  border-radius: 10px; margin: 8px 0; }
.pick > div { min-width: 0; flex: 1; }
.pick.chosen { border: 2px solid hsl(var(--primary)); background: hsl(var(--primary) / .06); }
.pick .ph { width: 120px; aspect-ratio: 16 / 9; border-radius: 6px; flex-shrink: 0; object-fit: cover; display: flex;
  align-items: center; justify-content: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.pick .what { font-weight: 600; }
.pick .muted { font-size: .85rem; }
.pick p { margin: 6px 0 0; }
.pick-url a { overflow-wrap: anywhere; }
@media (max-width: 600px) { .pick .ph { width: 80px; } }

/* 19.12: the tracks of an own file */
.trackcard h3 { font-size: .95rem; margin: 14px 0 4px; }
.track { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid hsl(var(--border));
  border-radius: 10px; margin: 8px 0; }
.track > div { flex: 1; min-width: 0; }
.track.chosen { border: 2px solid hsl(var(--primary)); background: hsl(var(--primary) / .06); }
.track.off { opacity: .65; }
.track .what { font-weight: 600; }
.track .muted { font-size: .85rem; overflow-wrap: anywhere; }
.track .tno { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); padding-top: 1px; }
.track p { margin: 6px 0 0; }

/* categories (decision 19.13) */
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; align-items: center; }
.cat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .82rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: inherit; text-decoration: none;
  white-space: nowrap; cursor: pointer; }
a.cat:hover { border-color: hsl(var(--primary) / .5); }
.cat.on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.cat.main { font-weight: 600; }
.cat.soft { border-style: dashed; color: hsl(var(--muted-foreground)); }
.cat.soft.on { color: hsl(var(--primary-foreground)); }
.cat .n { opacity: .7; font-variant-numeric: tabular-nums; }
.auto { font-size: .72rem; opacity: .75; }
.catmore { display: contents; }
.catmore > summary { list-style: none; }
.catmore > summary::-webkit-details-marker { display: none; }
.catmore[open] > .cats { flex-basis: 100%; margin: 0; }
.item .cats { margin: 4px 0 0; }
.item .cat { font-size: .75rem; padding: 1px 8px; }
.facts .cat { font-size: .78rem; padding: 1px 8px; }
.catedit .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; }
.catedit .row label { min-width: 0; }
.catedit .row select { width: 100%; }
.catlist { width: 100%; border-collapse: collapse; font-size: .88rem; }
.catlist th, .catlist td { text-align: left; padding: 8px 6px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.catlist td.d { color: hsl(var(--muted-foreground)); font-size: .82rem; }
.catlist .acts { white-space: nowrap; }
.catlist .acts form { display: inline; }
.catlist details > summary { cursor: pointer; display: inline-block; }
.catlist details form.stack { display: block; margin-top: 6px; white-space: normal; }
.sugg { border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.sugg .what { font-weight: 600; }
.sugg .muted { font-size: .85rem; }
.sugg form { display: inline; }
.sugg p { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.near { display: inline-block; padding: 1px 8px; border-radius: 999px; background: hsl(var(--warning-bg)); font-size: .8rem; }
@media (max-width: 600px) {
  .catlist .d { display: none; }
  .catlist td, .catlist th { padding: 6px 4px; }
  .catlist .acts { white-space: normal; }
  .catlist .acts button, .catlist .acts summary { margin: 0 0 4px; }
}
.catedit > details > summary { color: inherit; font-size: inherit; width: auto; }
.catedit > details > summary h2 { display: inline; margin: 0; }
.catedit > details[open] > summary { margin-bottom: 8px; }
.catlist summary.button { list-style: none; color: hsl(var(--foreground)); }
.catlist summary.button::-webkit-details-marker { display: none; }
.catedit:has(> details:not([open])) { padding-top: 12px; padding-bottom: 12px; }
.catlist .acts-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; justify-content: flex-end; }
.catlist .acts-row details[open] { flex-basis: 100%; }
.catlist .acts-row details[open] form.stack { min-width: min(260px, 70vw); }
@media (max-width: 600px) {
  .catlist thead { display: none; }
  .catlist tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 8px 0;
    border-bottom: 1px solid hsl(var(--border)); }
  .catlist td { border: 0; padding: 0; }
  .catlist td:first-child { flex: 1 1 120px; min-width: 0; }
  .catlist td.acts { flex: 0 1 auto; }
  .catlist .acts-row { flex-wrap: nowrap; }
  .catlist .acts-row:has(details[open]) { flex-wrap: wrap; }
  .catlist td:nth-child(3):not(.acts) { flex: 0 0 auto; }
}
.catlist .acts-row form, .catlist .acts-row details { margin: 0; }
.sugg .what .muted { font-weight: 400; }
.item.tokenrow { align-items: center; }
.item.tokenrow > form { flex-shrink: 0; }
.item .actions-row { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; align-items: center; }
.bare-home { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.bare-links { text-align: center; margin-top: 18px; }
.bare-links a { color: hsl(var(--muted-foreground)); }