/* What lives in Clarabit: six tabs on the left, one product panel on the right that morphs. */

.inside { padding: clamp(96px, 12vw, 160px) 0 0; }

.inside-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.inside-title { font-size: clamp(32px, 4.2vw, 52px); }
.inside-lede { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--body); max-width: 30ch; }

/* ---------- Tabs ---------- */
.inside-tabs { margin-top: 36px; display: flex; flex-direction: column; gap: 2px; }

.inside-tab {
  position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 14px;
  width: 100%; min-height: 44px; padding: 15px 17px; text-align: left;
  font: inherit; color: inherit; background: transparent; cursor: pointer;
  border: 0; border-radius: var(--radius);
  overflow: hidden;
}
/* Two layers under the content: the wash (hover faint, selected = .wash in lime) and a pointer spotlight. */
.inside-tab::before,
.inside-tab::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.inside-tab::before { background: linear-gradient(to right, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0) 70%); }
.inside-tab::after { background: radial-gradient(220px circle at var(--inside-mx, 50%) var(--inside-my, 50%), rgb(255 255 255 / 0.05), transparent 70%); }
.inside-tab:hover::before, .inside-tab:hover::after { opacity: 1; }
.inside-tab[aria-selected="true"]::before {
  opacity: 1; background-color: var(--card);
  background-image: linear-gradient(to right, color-mix(in oklab, var(--lime) 14%, var(--card)), var(--card) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lime) 24%, var(--line)), inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.inside-tab[aria-selected="true"]::after { background: radial-gradient(220px circle at var(--inside-mx, 50%) var(--inside-my, 50%), rgb(111 181 65 / 0.08), transparent 70%); }
.inside-tab:focus-visible { outline-offset: -2px; border-radius: var(--radius); }

.inside-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inside-tab-title { font-size: 15.5px; font-weight: 600; color: var(--body-strong); line-height: 1.35; transition: color var(--dur-base) var(--ease); }
.inside-tab-line { font-size: 14px; line-height: 1.45; color: var(--muted); }
.inside-tab-line { transition: color var(--dur-base) var(--ease); }
.inside-tab:hover .inside-tab-title, .inside-tab[aria-selected="true"] .inside-tab-title { color: var(--title); }
.inside-tab[aria-selected="true"] .inside-tab-line { color: var(--body); }

.inside-tab-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.inside-tab-bar > span { display: block; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); border-radius: 2px; }
.inside-tab[aria-selected="true"] .inside-tab-bar { opacity: 1; }
.inside.inside-manual .inside-tab-bar { opacity: 0; }

/* Duotone icon: wash under a 1.6px stroke. Gray at rest, lime on the active tab. */
.inside-ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.inside-ico .w { fill: var(--muted); fill-opacity: 0.2; transition: fill var(--dur-base) var(--ease), fill-opacity var(--dur-base) var(--ease); }
.inside-tab:hover .inside-ico .w { fill-opacity: 0.28; }
.inside-tab:hover .inside-ico .s { stroke: var(--body-strong); }
.inside-ico .s { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-base) var(--ease); }
.inside-tab[aria-selected="true"] .inside-ico .w { fill: var(--lime); fill-opacity: 0.3; }
.inside-tab[aria-selected="true"] .inside-ico .s { stroke: var(--lime-ink); }
.inside-ico--sm { width: 18px; height: 18px; margin: 0; }
.inside-ico--sm .w { fill: var(--info); fill-opacity: 0.3; }
.inside-ico--sm .s { stroke: var(--info-ink); }

.inside-caption { display: none; }

/* ---------- Panel ---------- */
.inside-panel {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03) 40%, var(--line)) border-box;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.inside-chrome {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.02), rgb(255 255 255 / 0)) var(--sidebar);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045), 0 1px 0 rgb(0 0 0 / 0.25);
}
.inside-mark { width: 20px; height: 20px; }
.inside-crumb { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.inside-pause {
  position: relative; margin-left: auto; flex: none;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.inside-pause::before { content: ""; position: absolute; inset: -6px; }
.inside-pause:hover { background: var(--raised); color: var(--ink); }
.inside-pause svg { width: 16px; height: 16px; }
.inside-pause path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inside-play-i { display: none; }
.inside-pause[aria-pressed="true"] .inside-pause-i { display: none; }
.inside-pause[aria-pressed="true"] .inside-play-i { display: inline; }
.inside.inside-manual .inside-pause { visibility: hidden; }

/* The canvas the views sit on: the factory canvas dot grid. */
.inside-views {
  display: grid;
  padding: clamp(20px, 3vw, 32px);
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.3px);
  background-size: 18px 18px;
  background-position: 9px 9px;
}
.inside-view {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.985);
  transition: opacity 260ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.inside-view.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 420ms var(--ease) 90ms, transform 520ms var(--ease) 90ms, visibility 0s;
}
.inside-view:focus-visible { outline-offset: 6px; border-radius: var(--radius); }
.inside-view { display: flex; flex-direction: column; justify-content: center; }
.inside-ui { display: flex; flex-direction: column; gap: 18px; }

/* Things that arrive at a step: data-at="n" shows once the view reaches step n. */
.inside-view [data-at] { opacity: 0; transform: translateY(8px); transition: opacity 480ms var(--ease), transform 560ms var(--ease); }
.inside-view.inside-s1 [data-at="1"],
.inside-view.inside-s2 [data-at="2"],
.inside-view.inside-s3 [data-at="3"],
.inside-view.inside-s4 [data-at="4"],
.inside-view.inside-s5 [data-at="5"] { opacity: 1; transform: none; }

/* Two states stacked in one slot, cross-faded. */
.inside-swap { display: inline-grid; align-items: center; justify-items: start; }
.inside-swap.inside-end { justify-items: end; }
.inside-swap > * { grid-area: 1 / 1; transition: opacity 360ms var(--ease), transform 420ms var(--ease); }
.inside-swap-b { opacity: 0; transform: translateY(4px); }
.inside-swap--inline { vertical-align: baseline; justify-items: center; }

/* ---------- Shared bits ---------- */
.inside-head { display: flex; align-items: center; gap: 10px; min-height: 28px; min-width: 0; }
.inside-head > * { flex: none; }
.inside-head > .inside-head-title { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inside-head-title { font-size: 16px; font-weight: 600; color: var(--title); letter-spacing: -0.01em; }
.inside-end { margin-left: auto; }
.inside-ref { font-family: var(--mono); font-size: 0.86em; color: var(--body-strong); letter-spacing: 0; white-space: nowrap; }
.inside-quiet { color: var(--muted); font-size: 13px; }
.inside-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Status grammar comes from tokens.css (.pill, .badge, .live-dot); these only pick the tone. */
.badge.inside-w-lime { --wash: var(--lime); }
.badge.inside-w-info { --wash: var(--info); }
.badge.inside-w-success { --wash: var(--success); }
.badge.inside-badge-live::before { display: none; }
.pill.mono { font-size: 11px; letter-spacing: 0; }
.inside:not([data-inview]) .live-dot,
.inside:not([data-inview]) .inside-node-ring::after { animation-play-state: paused; }

.inside-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inside-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Refs take the lime wash when their row is hovered (the panel's rows aren't direct parents). */
.inside :is(.inside-card, .inside-log li, .inside-queue li, .inside-ticket li, .inside-ticket-h, .inside-bubble):hover .ref,
.inside-s5 .inside-q-first .inside-q-top .ref { background: var(--lime-soft); box-shadow: -4px 0 0 var(--lime-soft), 4px 0 0 var(--lime-soft); color: var(--lime-ink); }

/* Inner surfaces read lit from above. */
.inside :is(.inside-card, .inside-doc, .inside-beat, .inside-comment, .inside-bubble, .inside-ledger-col, .inside-queue li) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); }

.inside-card {
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.inside-card--flat { background: var(--card); border-color: var(--line); padding: 12px 16px; }
.inside-card-p { font-size: 14px; color: var(--body); }
.inside-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); min-width: 0; }
.inside-row b { color: var(--title); font-weight: 600; white-space: nowrap; }

/* Avatars: people round, agents rounded-square. */
.inside-av {
  position: relative; display: inline-grid; place-items: center; place-content: stretch;
  width: 26px; height: 26px; font-size: 12px; color: var(--title); line-height: 1;
}
.inside-av--lg { width: 40px; height: 40px; font-size: 15px; }
.inside-fill-blue { background-color: var(--id-blue); }
.inside-fill-purple { background-color: var(--id-purple); }
.inside-fill-teal { background-color: var(--id-teal); }
.inside-fill-orange { background-color: var(--id-orange); }
.inside-badge {
  position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; background: var(--raised); border: 2px solid var(--card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.inside-logo { display: block; width: 62%; height: 62%; background: var(--title); }
.inside-logo--codex { -webkit-mask: url("../assets/ai/codex.svg") center / contain no-repeat; mask: url("../assets/ai/codex.svg") center / contain no-repeat; }
.inside-logo--claude { -webkit-mask: url("../assets/ai/claude.svg") center / contain no-repeat; mask: url("../assets/ai/claude.svg") center / contain no-repeat; }
.inside-badge .inside-logo { width: 12px; height: 12px; }
.inside-logo--inline { flex: none; width: 16px; height: 16px; margin-top: 2px; background: #d97757; }

.inside-foot { font-size: 13px; color: var(--muted); }

/* ---------- 1. Gates ---------- */
.inside-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.inside-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.inside-step + .inside-step::before,
.inside-step + .inside-step::after {
  content: ""; position: absolute; top: 13px; right: calc(50% + 18px); width: calc(100% - 36px); height: 2px; border-radius: 2px;
}
.inside-step + .inside-step::before { background: var(--line-strong); }
.inside-step + .inside-step::after { background: var(--success); transform-origin: 0 50%; transition: transform 700ms var(--ease-inout); }
.inside-step.is-now::after, .inside-step.is-done::after { transform: scaleX(1); }
.inside-step.is-gate::after { transform: scaleX(0); }

.inside-node {
  position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success-soft); border: 1px solid var(--success-line); color: var(--success-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.inside-node > * { grid-area: 1 / 1; }
.inside-node svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 320ms var(--ease), transform 420ms var(--ease); }
.inside-step-l { font-size: 13px; color: var(--body); line-height: 1.3; display: flex; flex-direction: column; gap: 2px; }
.inside-step-l small { font-size: 12px; color: var(--muted); }

.inside-step.is-now .inside-node { background: var(--info-soft); border-color: var(--info-line); color: var(--info-ink); transition: background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease); }
.inside-step.is-now .inside-node svg { opacity: 0; transform: scale(0.6); }
.inside-node-ring { width: 8px; height: 8px; border-radius: 50%; background: var(--info-ink); transition: opacity 300ms var(--ease); }
.inside-node-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--info); opacity: 0; animation: inside-ping 2s var(--ease) infinite; }

.inside-step.is-gate .inside-node { background: var(--raised); border-color: var(--line-strong); color: var(--muted); transition: background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease); }
.inside-step.is-gate .inside-node svg:not(.inside-lock) { opacity: 0; transform: scale(0.6); }
.inside-step.is-gate .inside-step-l { color: var(--title); font-weight: 500; }

/* Step 3: the person approves. Review completes, Done unlocks. */
.inside-s3 .inside-step.is-now .inside-node,
.inside-s3 .inside-step.is-gate .inside-node { background: var(--success-soft); border-color: var(--success-line); color: var(--success-ink); }
.inside-s3 .inside-step.is-now .inside-node svg,
.inside-s3 .inside-step.is-gate .inside-node svg:not(.inside-lock) { opacity: 1; transform: none; }
.inside-s3 .inside-step.is-now .inside-node-ring,
.inside-s3 .inside-step.is-now .inside-node-ring::after { opacity: 0; animation: none; }
.inside-s3 .inside-step.is-gate .inside-lock { opacity: 0; transform: scale(0.6); }
.inside-s3 .inside-step.is-gate::after { transform: scaleX(1); }
#inside-view-gates.inside-s3 .inside-head .inside-swap-a { opacity: 0; transform: translateY(-4px); }
#inside-view-gates.inside-s3 .inside-head .inside-swap-b { opacity: 1; transform: none; }

/* ---------- 2. Pages ---------- */
.inside-doc { background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px 8px 10px; }
.inside-doc-h { font-size: 13px; font-weight: 600; color: var(--title); padding: 0 12px 8px; }
.inside-lines { list-style: none; margin: 0; padding: 0; }
.inside-lines li { position: relative; display: flex; gap: 12px; padding: 7px 12px; font-size: 14px; color: var(--body-strong); border-radius: 8px; }
.inside-lines li > span { position: relative; }
.inside-ln { flex: none; width: 14px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 1px; }
.inside-line-target::before,
.inside-line-target::after { content: ""; position: absolute; inset: 0; border-radius: 8px; opacity: 0; transition: opacity 420ms var(--ease); }
.inside-line-target::before { background: linear-gradient(to right, rgb(217 147 13 / 0.16), rgb(217 147 13 / 0.03) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning) 30%, var(--line)); }
.inside-line-target::after { background: linear-gradient(to right, rgb(31 157 111 / 0.16), rgb(31 157 111 / 0.03) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success) 30%, var(--line)); }
.inside-s1 .inside-line-target::before { opacity: 1; }
.inside-s4 .inside-line-target::before { opacity: 0; }
.inside-s4 .inside-line-target::after { opacity: 1; }
#inside-view-pages.inside-s4 .inside-swap-a { opacity: 0; transform: translateY(-4px); }
#inside-view-pages.inside-s4 .inside-swap-b { opacity: 1; transform: none; }
.inside-line-target .inside-swap-b { color: var(--success-ink); font-weight: 600; }

.inside-thread { display: flex; flex-direction: column; gap: 10px; padding-left: clamp(0px, 4vw, 40px); }
.inside-comment {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px;
  font-size: 14px; color: var(--body-strong);
}
.inside-comment-who { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.inside-comment-who b { color: var(--title); font-weight: 600; font-size: 14px; }

/* ---------- 3. Sessions ---------- */
.inside-beat {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 18px 12px 14px;
}
.inside-beat-l { font-size: 13px; color: var(--muted); flex: none; }
.inside-beat-track {
  flex: 1; min-width: 0; height: 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.inside-beat-strip { display: flex; align-items: center; gap: 3px; height: 100%; width: max-content; margin-left: auto; will-change: transform; }
.inside-beat-strip i { flex: none; width: 3px; border-radius: 2px; background: var(--line-strong); }
.inside-beat-strip i.inside-beat-pk { background: var(--muted); }
.inside-beat-head { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); transition: background-color 400ms var(--ease); }
.inside-s5 .inside-beat-head { background: var(--faint); }
#inside-view-sessions.inside-s5 .inside-head .inside-swap-a { opacity: 0; transform: translateY(-4px); }
#inside-view-sessions.inside-s5 .inside-head .inside-swap-b { opacity: 1; transform: none; }

.inside-log { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; }
.inside-log li { position: relative; display: flex; align-items: center; gap: 14px; min-height: 40px; font-size: 14px; color: var(--body-strong); padding-left: 20px; }
.inside-log li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.5px var(--line-strong); }
.inside-log li + li::after { content: ""; position: absolute; left: 3px; bottom: calc(50% + 7px); height: 26px; width: 1px; background: var(--line-strong); }
.inside-log .inside-time { width: 38px; flex: none; }
#inside-view-sessions.inside-s4 .inside-log .inside-swap-a { opacity: 0; transform: translateY(-4px); }
#inside-view-sessions.inside-s4 .inside-log .inside-swap-b { opacity: 1; transform: none; }

/* ---------- 4. Handoffs ---------- */
.inside-seats { display: flex; align-items: center; gap: 14px; }
.inside-seat { display: flex; align-items: center; gap: 12px; flex: none; }
.inside-seat > span:not(.inside-av) { display: flex; flex-direction: column; line-height: 1.3; }
.inside-seat b { color: var(--title); font-weight: 600; font-size: 15px; }
.inside-seat small { color: var(--muted); font-size: 13px; }
.inside-seat--r { text-align: right; }
.inside-seat--r > span:not(.inside-av) { align-items: flex-end; }
.inside-seat-line { flex: 1; height: 0; border-top: 1.5px dashed var(--line-strong); }

.inside-track { position: relative; --inside-travel: 0px; }
.inside-ticket {
  width: min(250px, 72%);
  border: 1px solid transparent; border-radius: var(--radius);
  background: linear-gradient(var(--raised), var(--raised)) padding-box,
    linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04) 40%, var(--line-strong)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), var(--shadow-overlay); padding: 14px 16px;
  transition: transform 1300ms var(--ease-inout);
}
.inside-s1 .inside-ticket { transform: translateX(var(--inside-travel)); }
.inside-ticket-h { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--title); font-weight: 600; margin-bottom: 10px; }
.inside-ticket-h span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inside-ticket ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inside-ticket li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--body); border-top: 1px solid var(--line); }

.inside-chat { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.inside-bubble {
  display: flex; gap: 10px; max-width: 86%;
  padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--body-strong);
  background: var(--card); border: 1px solid var(--line-strong);
}
.inside-bubble--me { background: var(--raised); color: var(--ink); border-bottom-right-radius: 6px; }

/* ---------- 5. Attention ---------- */
.inside-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lime-ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--lime-line), inset 0 1px 0 rgb(255 255 255 / 0.05); }
.inside-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inside-queue li {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 12px 14px;
}
.inside-queue li::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 1px color-mix(in oklab, var(--info) 30%, var(--line)), inset 0 1px 0 rgb(255 255 255 / 0.04), 0 12px 28px -18px rgb(0 0 0 / 0.9); background: linear-gradient(to right, color-mix(in oklab, var(--info) 14%, var(--card)), var(--card) 70%); opacity: 0; transition: opacity 420ms var(--ease); pointer-events: none; }
.inside-s5 .inside-q-first::after { opacity: 1; }
.inside-qi { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.inside-qi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inside-qi circle { fill: currentColor; fill-opacity: 0.18; }
.inside-qi--info { background: var(--info-soft); color: var(--info-ink); }
.inside-qi--critical { background: var(--critical-soft); color: var(--critical-ink); }
.inside-qi--warning { background: var(--warning-soft); color: var(--warning-ink); }
.inside-qi--muted { background: var(--raised); color: var(--body); }
.inside-q-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inside-q-top { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.inside-q-top b { color: var(--title); font-weight: 600; }
.inside-q-text small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inside-q-act { flex: none; height: 30px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); border: 1px solid var(--line-strong); }
.inside-q-first .inside-q-act { background: var(--primary); color: var(--primary-fg); border-color: transparent; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.3); }

/* ---------- 6. Time ---------- */
.inside-total { font-size: 22px; font-weight: 650; color: var(--title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.inside-split { display: flex; gap: 3px; height: 14px; margin-top: 6px; }
.inside-split .inside-seg { display: block; border-radius: 4px; transform-origin: 0 50%; background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 70%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.inside-view .inside-split [data-at] { opacity: 1; transform: scaleX(0); transition: transform 700ms var(--ease); }
.inside-view.inside-s1 .inside-split [data-at="1"],
.inside-view.inside-s2 .inside-split [data-at="2"],
.inside-view.inside-s3 .inside-split [data-at="3"],
.inside-view.inside-s4 .inside-split [data-at="4"] { transform: none; }

.inside-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inside-ledger-col { background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px 6px; }
.inside-ledger-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
.inside-ledger-h span:last-child { color: var(--body-strong); font-variant-numeric: tabular-nums; }
.inside-ledger-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; color: var(--body-strong); }
.inside-ledger-row + .inside-ledger-row { border-top: 1px solid var(--line); }
.inside-t { margin-left: auto; color: var(--title); font-variant-numeric: tabular-nums; font-weight: 500; }

@keyframes inside-ping {
  0% { opacity: 0.7; transform: scale(0.6); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .inside-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .inside-lede { max-width: none; }
  .inside-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 28px; }
  .inside-tab { align-items: center; gap: 10px; padding: 13px; min-height: 52px; }
  .inside-tab:not([aria-selected="true"]) { box-shadow: inset 0 0 0 1px var(--line-soft); }
  .inside-tab-title { font-size: 14px; }
  .inside-tab-line { display: none; }
  .inside-tab-bar { left: 12px; right: 12px; }
  .inside-caption { display: block; font-size: 15px; color: var(--body); margin: 0 0 14px; min-height: 1.5em; }
}

@media (max-width: 560px) {
  .inside-steps .inside-step-l { font-size: 12px; }
  .inside-step + .inside-step::before,
  .inside-step + .inside-step::after { right: calc(50% + 16px); width: calc(100% - 32px); }
  .inside-hide-sm { display: none; }
  .inside-ledger { grid-template-columns: 1fr; gap: 10px; }
  .inside-seat small { font-size: 12px; }
  .inside-av--lg { width: 34px; height: 34px; font-size: 14px; }
  .inside-q-act { display: none; }
  .inside-bubble { max-width: 100%; }
  .inside-thread { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .inside-node-ring::after { animation: none; }
  .inside-tab-bar { display: none; }
}