/* Talkworth design system. Logical properties only: stylelint blocks physical left/right. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Heebo"; src: url("/fonts/heebo-hebrew.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  color-scheme: dark;
  --bg: #000;
  --s1: #0d0d0d;
  --s2: #141414;
  --s3: #1a1a1c;
  --s4: #252525;
  --s5: #333;
  --line: #232323;
  --line-2: #2c2c2c;
  --tx: #edf2f5;
  --tx-2: #a8a8a8;
  --tx-3: #8c8c8c;
  --accent: #f6a56b;
  --good: #3ddc97;
  --warn: #f5b544;
  --bad: #f0717c;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --sidebar: 240px;
  --font: "Inter", "Heebo", system-ui, sans-serif;
  --track: -0.0125em;
  --track-head: -0.0225em;
  --lh-14: 20px;
  --lh-15: 24px;
  --lh-13: 18px;
  --lh-12: 16px;
}

html[lang="he"] {
  --track: 0;
  --track-head: 0;
  --lh-14: 22px;
  --lh-15: 26px;
  --lh-13: 20px;
  --lh-12: 17px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 14px/var(--lh-14) var(--font); letter-spacing: var(--track); -webkit-font-smoothing: antialiased; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
[hidden] { display: none !important; }

.icon { inline-size: 16px; block-size: 16px; flex: none; }
.icon--dim { color: var(--tx-3); }
.icon--accent { color: var(--accent); }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-block-start: -60px; inset-inline-start: 12px; z-index: 50; background: #fff; color: #222; padding: 6px 12px; border-radius: var(--r); }
.skip:focus { inset-block-start: 12px; }
.truncate { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.muted { color: var(--tx-2); }
.small { font-size: 12px; line-height: var(--lh-12); }

.iconbtn { display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; flex: none; border-radius: var(--r); color: var(--tx-2); }
.iconbtn:hover { background: var(--s4); color: var(--tx); }

/* Shell */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-block-size: 100dvh; }
.sidebar { background: var(--bg); border-inline-end: 1px solid var(--line); }
.sidebar__in { position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; }
.sidebar__brand { display: flex; align-items: center; justify-content: space-between; block-size: 32px; padding-inline: 8px; }
.sidebar__close { display: none; }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo svg { inline-size: 20px; block-size: 20px; }
.logo__word { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.main { min-inline-size: 0; display: flex; flex-direction: column; background: var(--s1); }
.samplebar { display: flex; align-items: flex-start; gap: 8px; padding: 7px 16px; background: #1f1608; color: var(--warn); border-block-end: 1px solid #3a2a0f; font-size: 12px; line-height: var(--lh-12); }
.topbar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 16px; background: var(--s1); border-block-end: 1px solid var(--line); }
.topbar__title { font-weight: 500; font-size: 14px; }
.topbar__menu { display: none; }
.content { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; }
.scrim { display: none; }

/* Picker */
.picker { position: relative; }
.picker__btn, .picker--static { display: flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 4px 8px; border-radius: var(--r); list-style: none; }
.picker__btn { cursor: pointer; background: var(--s2); border: 1px solid var(--line); }
.picker__btn:hover { background: var(--s3); }
.picker__btn::-webkit-details-marker { display: none; }
.picker__name { flex: 1; font-weight: 500; }
.picker__avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; flex: none; border-radius: var(--r-sm); background: var(--s4); color: var(--accent); font-size: 12px; font-weight: 600; }
.picker__menu { position: absolute; z-index: 30; inset-block-start: calc(100% + 4px); inset-inline: 0; padding: 4px; background: var(--s2); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgb(0 0 0 / 0.6); }
.picker__count { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: 12px; line-height: var(--lh-12); color: var(--tx-3); }
.picker__item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); }
.picker__item:hover, .picker__item.is-active { background: var(--s4); }
.picker__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; }
.picker__text > * { max-inline-size: 100%; }

.tag { flex: none; padding-inline: 6px; border-radius: 999px; font-size: 11px; line-height: 18px; }
.tag--sample { background: #2a1e0a; color: var(--warn); }

/* Navigation */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__row { display: flex; align-items: center; gap: 10px; min-block-size: 34px; padding-inline: 8px; border-radius: var(--r); color: var(--tx-2); }
.nav__row:hover { background: var(--s3); color: var(--tx); }
.nav__row.is-active { background: var(--s4); color: var(--tx); font-weight: 500; }
.nav__row--new { color: var(--tx); margin-block-end: 6px; border: 1px solid var(--line); }
.recents { display: flex; flex-direction: column; gap: 2px; }
.recents__title { padding: 4px 8px; font-size: 12px; line-height: var(--lh-12); color: var(--tx-3); }
.recents__empty { padding: 6px 8px; font-size: 13px; color: var(--tx-3); }
.sidebar__foot { margin-block-start: auto; padding-block-start: 8px; border-block-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 32px; padding: 6px 12px; border-radius: var(--r); font-size: 14px; font-weight: 500; }
.btn--primary { background: #fff; color: #222; }
.btn--primary:hover { background: #ebebeb; color: #222; }

/* Page content */
.wrap { inline-size: 100%; max-inline-size: 980px; margin-inline: auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.wrap--center { flex: 1; justify-content: center; }
.h1 { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: var(--track-head); overflow-wrap: anywhere; }
.h1--page { font-size: 24px; line-height: 32px; }
.lead { color: var(--tx-2); font-size: 15px; line-height: var(--lh-15); margin-block-start: -10px; }

.card { container-type: inline-size; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; min-inline-size: 0; }
.card__title { font-size: 14px; line-height: var(--lh-14); font-weight: 500; margin-block-end: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Ladder */
.ladder { container-type: inline-size; }
.ladder__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.step { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.step__bar { block-size: 3px; border-radius: 2px; background: var(--s5); margin-block-end: 6px; }
.step--now .step__bar { background: var(--accent); }
.step--done .step__bar { background: var(--good); }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; line-height: var(--lh-12); color: var(--tx-3); }
.step--now .step__status { color: var(--accent); }
.step--done .step__status { color: var(--good); }
.step__n { font-variant-numeric: tabular-nums; }
.step__name { font-weight: 500; overflow-wrap: anywhere; }
.step__desc { font-size: 12px; line-height: var(--lh-12); color: var(--tx-2); }
.step__score { font-size: 13px; line-height: var(--lh-13); margin-block-start: auto; padding-block-start: 6px; }
.step--none .step__name { color: var(--tx-2); }

/* Lists */
.actions, .changes { display: flex; flex-direction: column; gap: 12px; }
.action, .change { display: flex; gap: 10px; min-inline-size: 0; }
.action__n { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; flex: none; border-radius: var(--r-sm); background: var(--s4); font-size: 12px; }
.action__text { min-inline-size: 0; overflow-wrap: anywhere; }
.action__title { font-weight: 500; }
.action__why { color: var(--tx-2); font-size: 13px; line-height: var(--lh-13); }
.dot { inline-size: 8px; block-size: 8px; flex: none; border-radius: 50%; margin-block-start: 6px; }
.dot--good { background: var(--good); }
.dot--warn { background: var(--warn); }
.dot--bad { background: var(--bad); }

/* Trend: the time axis stays left to right in both languages */
.trend { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.trend__col { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; line-height: var(--lh-12); color: var(--tx-2); }
.trend__track { inline-size: 100%; max-inline-size: 36px; block-size: 88px; display: flex; align-items: flex-end; background: var(--s3); border-radius: var(--r-sm); overflow: hidden; }
.trend__fill { inline-size: 100%; background: #d7dbde; border-radius: var(--r-sm); }
.trend__fill--0of5 { block-size: 0; }
.trend__fill--1of5 { block-size: 20%; }
.trend__fill--2of5 { block-size: 40%; }
.trend__fill--3of5 { block-size: 60%; }
.trend__fill--4of5 { block-size: 80%; }
.trend__fill--5of5 { block-size: 100%; }

/* States */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.state__icon { display: inline-flex; padding: 8px; border-radius: var(--r); background: var(--s4); color: var(--tx-2); }
.state--error .state__icon { color: var(--bad); }
.state__title { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: var(--track-head); }
.state__body { color: var(--tx-2); max-inline-size: 44ch; margin-block-end: 8px; }

/* Skeletons */
.skel { background: var(--s3); border-radius: var(--r); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.05), transparent); animation: shimmer 1.4s infinite linear; background-size: 200% 100%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel--row { block-size: 34px; margin-block-end: 2px; }
.skel--picker { block-size: 32px; flex: 1; }
.skel--h1 { block-size: 32px; inline-size: 60%; }
.skel--line { block-size: 14px; }
.skel--w40 { inline-size: 40%; }
.skel--step { block-size: 128px; border-radius: var(--r-lg); }
.skel--card { block-size: 240px; border-radius: var(--r-lg); }
.skel--bubble { block-size: 48px; inline-size: 60%; align-self: flex-end; border-radius: var(--r-lg); }

/* Chat */
.content--chat { background: var(--s1); }
.chat { flex: 1; display: flex; flex-direction: column; inline-size: 100%; max-inline-size: 768px; margin-inline: auto; padding-inline: 24px; }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: 24px; padding-block: 32px 24px; min-inline-size: 0; }
.chat__log--center { justify-content: center; }
.chat--new .chat__log { justify-content: center; }
.chat__dock { position: sticky; inset-block-end: 0; padding-block: 8px 16px; background: linear-gradient(to bottom, transparent, var(--s1) 16px); }
.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.welcome .lead { margin-block-start: 0; max-inline-size: 52ch; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 8px; }
.chip { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--tx-2); font-size: 13px; line-height: var(--lh-13); background: var(--s2); }
.chip:hover { background: var(--s4); color: var(--tx); }

.msg { font-size: 15px; line-height: var(--lh-15); min-inline-size: 0; overflow-wrap: anywhere; }
.msg p + p { margin-block-start: 12px; }
.msg--user { align-self: flex-end; max-inline-size: 85%; padding: 10px 12px; background: var(--s4); border-radius: var(--r-lg); font-size: 14px; line-height: var(--lh-14); }
.msg__meta { color: var(--tx-3); font-size: 13px; line-height: var(--lh-13); margin-block-end: 10px; }
.checks { margin-block-start: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--s2); }
.check { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 14px; line-height: var(--lh-14); }
.check + .check { border-block-start: 1px solid var(--line); }
.check__engine { flex: none; inline-size: 92px; font-weight: 500; }
.check__answer { flex: 1; min-inline-size: 0; color: var(--tx-2); }
.pill { flex: none; display: inline-flex; align-items: center; gap: 4px; padding-inline: 8px; border-radius: 999px; font-size: 12px; line-height: 22px; }
.pill .icon { inline-size: 12px; block-size: 12px; }
.pill--correct { background: #0f2a1f; color: var(--good); }
.pill--wrong { background: #2d1417; color: var(--bad); }
.pill--missing { background: #2a1e0a; color: var(--warn); }
.thinking { display: flex; align-items: center; gap: 8px; color: var(--tx-3); font-size: 13px; }
.thinking__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse { 50% { opacity: 0.3; } }

.composer { background: var(--s2); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 12px; }
.composer:focus-within { border-color: #4a4a4a; }
.composer__input { display: block; inline-size: 100%; min-block-size: 24px; resize: none; background: none; border: 0; outline: 0; font-size: 15px; line-height: var(--lh-15); }
.composer__input::placeholder { color: var(--tx-3); }
.composer__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 8px; }
.composer__hint { font-size: 12px; line-height: var(--lh-12); color: var(--tx-3); }
.sendbtn { display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; flex: none; border-radius: 50%; background: #fff; color: #111; }
.sendbtn:hover:not(:disabled) { background: #ebebeb; color: #111; }
.sendbtn:disabled { background: var(--s5); color: var(--tx-3); }

/* Below desktop width the home page tightens */
@media (max-width: 1100px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .ladder__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .step { grid-column: span 2; }
  .step:nth-child(n + 4) { grid-column: span 3; }
}

/* Mobile: the sidebar becomes a drawer from the inline-start edge */
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 40; inset-block: 0; inset-inline-start: -300px; inline-size: 280px; visibility: hidden; transition: inset-inline-start 180ms ease, visibility 180ms; }
  .sidebar.is-open { inset-inline-start: 0; visibility: visible; }
  .sidebar__close { display: inline-flex; }
  .topbar__menu { display: inline-flex; margin-inline-start: -8px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / 0.6); }
  .wrap { padding: 20px 16px 32px; }
  .chat { padding-inline: 16px; }
  .ladder__list { grid-template-columns: minmax(0, 1fr); }
  .step, .step:nth-child(n + 4) { grid-column: auto; }
  .step__bar { margin-block-end: 2px; }
  .h1 { font-size: 26px; line-height: 34px; }
  .h1--page { font-size: 22px; line-height: 30px; }
  .check { flex-wrap: wrap; }
  .check__answer { order: 3; flex-basis: 100%; }
  .check__answer:empty { display: none; }
  .check__engine { flex: 1; inline-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}