/* "מכירים את זה?" — tabs (one per pain) with a large panel: problem, Tikli's answer, and a small
   dark "artifact" card. Each pain has a colour tone. tabs.js drives it; without JS every panel is
   shown in a stack. */

.ico {
  flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px;
  background: linear-gradient(135deg, var(--hue), var(--hue-2));
  fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: 0 10px 20px -12px var(--hue);
}

.pain-tabs { display: grid; grid-template-columns: 330px 1fr; gap: 24px; align-items: start; }
html:not(.js) .tab-list { display: none; }
html:not(.js) .pain-tabs { grid-template-columns: 1fr; }
.tab-list { display: grid; gap: 6px; }
.tab {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  text-align: start; cursor: pointer; font: 500 1rem var(--body); color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 16px; padding: 10px 12px;
  transition: background .2s, color .2s;
}
.tab:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.tab .ico { width: 34px; height: 34px; padding: 8px; background: var(--surface-2); stroke: var(--muted); box-shadow: none; }
.tab[aria-selected="true"] { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: 0 14px 30px -22px var(--hue); }
.tab[aria-selected="true"] .ico { background: linear-gradient(135deg, var(--hue), var(--hue-2)); stroke: #fff; }
/* Auto-advance timer: a thin bar fills the selected tab; its animationend moves to the next tab. */
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--hue), var(--hue-2)); transform-origin: right;
  animation: timer 7s linear forwards; animation-play-state: paused;
}
.pain-tabs.is-running .tab[aria-selected="true"]::after { animation-play-state: running; }
.pain-tabs.is-running:hover .tab[aria-selected="true"]::after,
.pain-tabs.is-running:focus-within .tab[aria-selected="true"]::after { animation-play-state: paused; }
.pain-tabs.is-manual .tab::after { display: none; }
.pain-tabs > .motion-toggle { grid-column: 1; grid-row: 2; justify-self: start; }
.pain-tabs > .panels { grid-column: 2; grid-row: 1 / span 2; }
@keyframes timer { from { transform: scaleX(0); } }

.panels { display: grid; gap: 20px; }
.js .panels { gap: 0; }
.js .pain-panel { grid-area: 1 / 1; transition: opacity .35s, transform .35s; }
.js .pain-panel:not(.is-active) { visibility: hidden; opacity: 0; transform: translateY(8px); }
.pain-panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 290px; gap: 28px; align-items: center;
  padding: 32px; border-radius: 28px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -42px var(--hue);
}
.pain-panel::before {
  content: ""; position: absolute; inset-block: auto -120px; inset-inline: -80px auto; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--wash), transparent); pointer-events: none;
}
.pp-text, .viz { position: relative; }
.pp-text .ico { width: 52px; height: 52px; padding: 13px; border-radius: 16px; }
.label { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); margin: 16px 0 4px; }
.pp-text h3 { font-size: 1.5rem; margin: 0 0 8px; }
.pp-text > p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.pp-answer { margin-top: 20px; padding: 16px 20px; border-radius: 18px; background: var(--wash); border-inline-start: 4px solid var(--hue); }
.pp-answer .label { margin-top: 0; color: var(--hue-ink); }
.pp-answer p { margin: 0; color: var(--hue-ink); font-weight: 500; font-size: 1.05rem; }

.viz {
  display: grid; gap: 10px; align-content: start; color: #fff; font-size: .9rem;
  background: linear-gradient(155deg, var(--ink) 55%, color-mix(in srgb, var(--hue) 45%, var(--ink)));
  border-radius: 20px; padding: 18px; box-shadow: 0 24px 40px -26px rgba(22, 35, 42, .8);
  transform: rotate(-1.5deg);
}
.viz-title { margin: 0 0 2px; font-size: .75rem; color: var(--on-dark-muted); letter-spacing: .02em; }
.viz-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.viz-row > span:first-child { color: var(--on-dark-muted); }
/* Timeline cards (reminders, guidance): one label column as wide as the longest label (rows share
   the card's grid via subgrid), values aligned at the start, and a dot-and-line track. */
.viz-steps { grid-template-columns: auto 1fr; column-gap: 12px; }
.viz-steps > :not(.viz-row) { grid-column: 1 / -1; }
.viz-steps .viz-row {
  position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  padding-inline-start: 18px; text-wrap: pretty;
}
.viz .nw { white-space: nowrap; }
.viz-steps .viz-row::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--hue-2);
}
.viz-steps .viz-row:not(:nth-last-child(2))::after {
  content: ""; position: absolute; inset-inline-start: 3.5px; top: calc(.55em + 10px); bottom: -12px;
  width: 1px; background: rgba(255, 255, 255, .22);
}
.viz-row.meter { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: center; }
.bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hue-2), #fff); }
/* Fill widths as classes, not style attributes, so the CSP needs no 'unsafe-inline'. */
.bar .w70 { width: 70%; } .bar .w90 { width: 90%; } .bar .w100 { width: 100%; }
.viz-file { display: grid; gap: 2px; margin: 0; }
.viz-file s { color: var(--on-dark-faint); font: .8rem ui-monospace, monospace; text-align: end; }
.viz-file span::before { content: "↳ "; color: var(--hue-2); }
.viz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.viz-chips span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .8rem; }
.viz-chips span:last-child { background: var(--hue); }
.viz .tag { justify-self: start; margin-top: 4px; }

/* Left-to-right mirror (English): the timer fills from the start side, the card tilts the other way,
   and gradients run with the reading direction. */
[dir="ltr"] .tab[aria-selected="true"]::after { transform-origin: left; background: linear-gradient(270deg, var(--hue), var(--hue-2)); }
[dir="ltr"] .viz { transform: rotate(1.5deg); }
[dir="ltr"] .bar i { background: linear-gradient(270deg, var(--hue-2), #fff); }
[dir="ltr"] .viz-row.meter { grid-template-columns: 9em 1fr auto; }

/* Phones and tablets: a row of icon chips over swipeable cards (the next card peeks in). No timer
   and no pause button: nothing moves on its own. tabs.js keeps the chips and the cards in sync. */
@media (max-width: 1000px) {
  .pain-tabs { grid-template-columns: 1fr; gap: 14px; }
  .pain-tabs > .motion-toggle { display: none; }
  .pain-tabs > .panels { grid-column: auto; grid-row: auto; }
  .tab-list { display: flex; justify-content: space-between; gap: 4px; max-width: 520px; }
  .tab { padding: 4px; border-radius: 14px; }
  .tab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab::after, .tab[aria-selected="true"]::after { display: none; }
  .js .panels {
    display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -24px; padding: 4px 24px 28px; scroll-padding-inline: 24px;
  }
  .js .panels::-webkit-scrollbar { display: none; }
  .js .pain-panel { grid-area: auto; flex: 0 0 min(86%, 520px); scroll-snap-align: start; transition: none; }
  .js .pain-panel:not(.is-active) { visibility: visible; opacity: 1; transform: none; }
  .pain-panel { grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 20px; border-radius: 24px; }
  .pp-text .ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; }
  .label { margin-top: 12px; }
  .pp-text h3 { font-size: 1.2rem; }
  .pp-text > p, .pp-answer p { font-size: .98rem; }
  .pp-answer { margin-top: 14px; padding: 12px 14px; border-radius: 14px; }
  .viz, [dir="ltr"] .viz { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab::after { display: none; }
  .js .pain-panel { transition: none; }
}