/* Creatortranscripts Night Desk: component styles. Load tokens.css first, then this file. Class prefix: ps-. */

body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); font-size: 14.5px; line-height: 22px; -webkit-font-smoothing: antialiased; }
.ps-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ps-ic--sm { width: 15px; height: 15px; }
.ps-label { font-family: var(--font-mono); font-size: 11.5px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ps-mono { font-family: var(--font-mono); }
.ps-spin { animation: ps-spin .9s linear infinite; transform-origin: 50% 50%; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes ps-blink { 50% { opacity: 0; } }
@keyframes ps-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ps-spin, .ps-progress__sweep, .ps-cursor, .ps-skeleton { animation: none !important; } }

/* preview layout only */
.ps-demo { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); align-items: flex-end; padding: var(--space-5) var(--space-6); }
.ps-demo--top { align-items: flex-start; }
.ps-demo--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.ps-state { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }

/* Button */
.ps-btn { box-sizing: border-box; height: 44px; min-width: 44px; padding: 0 15px; border: 1px solid var(--line-ghost); border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ps-btn:hover, .ps-btn.is-hover { background: var(--surface-selected); border-color: var(--line-hover); }
.ps-btn:active, .ps-btn.is-pressed { background: var(--surface-pressed); }
.ps-btn:focus-visible, .ps-btn.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ps-btn--main { height: 48px; padding: 0 20px; border: 0; background: var(--amber); color: var(--on-amber); font-size: 15px; font-weight: 600; gap: 10px; }
.ps-btn--main:hover, .ps-btn--main.is-hover { background: var(--amber-hover); }
.ps-btn--main:active, .ps-btn--main.is-pressed { background: var(--amber-pressed); }
.ps-btn--search { height: 48px; padding: 0 22px; border: 0; background: var(--ink); color: var(--surface-page); font-size: 15px; font-weight: 600; }
.ps-btn--search:hover, .ps-btn--search.is-hover { background: var(--ink-bright); }
.ps-btn--search:active, .ps-btn--search.is-pressed { background: var(--paper-pressed); }
.ps-btn--danger { border-color: var(--alarm-line); color: var(--alarm); }
.ps-btn--danger:hover, .ps-btn--danger.is-hover { background: var(--alarm-tint); border-color: var(--alarm); }
.ps-btn--quiet { border-color: transparent; }
.ps-btn--block { width: 100%; }
.ps-btn:disabled, .ps-btn.is-disabled { cursor: not-allowed; background: var(--surface-raised); border: 1px dashed var(--line-ghost); color: var(--ink-faint); }
.ps-btn.is-loading { cursor: progress; background: var(--surface-active); border: 0; color: var(--ink); }

/* Text field */
.ps-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ps-input { box-sizing: border-box; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-page); color: var(--ink-muted); }
.ps-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-bright); font: inherit; font-size: 16px; font-weight: 500; }
.ps-input input::placeholder { color: var(--ink-faint); font-weight: 400; }
.ps-input:hover, .ps-input.is-hover { border-color: var(--ink-faint); }
.ps-input:focus-within, .ps-input.is-focus { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.ps-input.is-error { border-color: var(--alarm); }
.ps-input.is-disabled { border-style: dashed; border-color: var(--line-ghost); background: transparent; color: var(--ink-faint); }
.ps-input.is-disabled input { color: var(--ink-faint); }
.ps-input--num input { flex: none; width: 44px; font-family: var(--font-mono); }
.ps-suffix { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.ps-help { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.ps-help--error { color: var(--alarm); display: flex; align-items: center; gap: 6px; }

/* Paste box */
.ps-paste { box-sizing: border-box; width: 100%; min-height: 200px; resize: vertical; padding: 14px 16px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-page); color: var(--ink-code); font-family: var(--font-mono); font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-all; }
.ps-paste:focus, .ps-paste.is-focus { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.ps-paste.is-error { border-color: var(--alarm); }

/* Select */
.ps-select { position: relative; display: inline-flex; min-width: 200px; }
.ps-select select { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; height: 48px; padding: 0 42px 0 14px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-page); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.ps-select .ps-ic { position: absolute; right: 14px; top: 15px; pointer-events: none; color: var(--ink-muted); }
.ps-select select:hover, .ps-select.is-hover select { border-color: var(--ink-faint); }
.ps-select select:focus-visible, .ps-select.is-focus select { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.ps-select select:disabled, .ps-select.is-disabled select { border-style: dashed; border-color: var(--line-ghost); color: var(--ink-faint); cursor: not-allowed; }

/* Tick box: 20 px box, 44 px hit area */
.ps-tick { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ps-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ps-tick__box { box-sizing: border-box; width: 20px; height: 20px; border-radius: var(--radius-xs); border: 1.5px solid var(--line-control); display: flex; align-items: center; justify-content: center; color: var(--on-amber); }
.ps-tick__box svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.ps-tick:hover .ps-tick__box, .ps-tick.is-hover .ps-tick__box { border-color: var(--ink-muted); }
.ps-tick input:checked + .ps-tick__box, .ps-tick.is-checked .ps-tick__box { background: var(--amber); border-color: var(--amber); }
.ps-tick input:checked + .ps-tick__box svg, .ps-tick.is-checked .ps-tick__box svg { visibility: visible; }
.ps-tick input:focus-visible + .ps-tick__box, .ps-tick.is-focus .ps-tick__box { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 3px; }
.ps-tick input:disabled + .ps-tick__box, .ps-tick.is-disabled .ps-tick__box { border-style: dashed; border-color: var(--line-ghost); }
.ps-tick--phone .ps-tick__box { width: 22px; height: 22px; border-radius: 6px; }

/* Segmented choice */
.ps-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-page); overflow: hidden; }
.ps-seg button { height: 42px; padding: 0 16px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--ink-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ps-seg button:first-child { border-left: 0; }
.ps-seg button:hover, .ps-seg button.is-hover { background: var(--surface-raised); color: var(--ink); }
.ps-seg button[aria-pressed="true"] { background: var(--surface-active); color: var(--ink-bright); font-weight: 600; box-shadow: var(--shadow-chosen); }
.ps-seg button:focus-visible, .ps-seg button.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -3px; }
.ps-seg button:disabled { color: var(--ink-faint); cursor: not-allowed; background: transparent; }
.ps-seg--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; background: none; overflow: visible; }
.ps-seg--grid button { height: 44px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-page); display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ps-seg--grid button:first-child { border-left: 1px solid var(--line-control); }
.ps-seg--grid button[aria-pressed="true"] { border-color: var(--ink); box-shadow: none; }

/* Tabs */
.ps-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.ps-tab { height: 46px; padding: 0 4px; border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-size: 14.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.ps-tab:hover, .ps-tab.is-hover { color: var(--ink); }
.ps-tab[aria-selected="true"] { color: var(--ink-bright); font-weight: 600; box-shadow: var(--shadow-chosen); }
.ps-tab[aria-selected="true"] .ps-ic { color: var(--amber); }
.ps-tab:focus-visible, .ps-tab.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ps-tabs--phone { gap: 0; }
.ps-tabs--phone .ps-tab { flex: 1 1 0; justify-content: center; }

/* Side menu */
.ps-menu { box-sizing: border-box; width: var(--rail); padding: 18px 14px; background: var(--surface-rail); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.ps-menu__group { margin: 16px 0 6px 12px; }
.ps-menu__item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.ps-menu__item:hover, .ps-menu__item.is-hover { background: var(--surface-raised); color: var(--ink); }
.ps-menu__item[aria-current="page"] { background: var(--surface-selected); color: var(--ink-bright); font-weight: 600; box-shadow: var(--shadow-current); }
.ps-menu__item[aria-current="page"] .ps-ic { color: var(--amber); }
.ps-menu__item:focus-visible, .ps-menu__item.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* Steps */
.ps-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ps-steps li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-faint); }
.ps-steps__dot { box-sizing: border-box; width: 22px; height: 22px; border-radius: var(--radius-pill); border: 1px solid var(--line-control); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.ps-steps__dot svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ps-steps li.is-done .ps-steps__dot { background: var(--surface-raised); color: var(--ink); }
.ps-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.ps-steps li[aria-current="step"] .ps-steps__dot { background: var(--ink); border-color: var(--ink); color: var(--surface-page); }
.ps-steps__rule { width: 28px; height: 1px; background: var(--line-ghost); }

/* Result row */
.ps-row { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) 150px 104px 96px 120px; align-items: center; min-height: var(--row); border-bottom: 1px solid var(--surface-selected); cursor: pointer; }
.ps-row:hover, .ps-row.is-hover { box-shadow: var(--shadow-row-hover); }
.ps-row.is-ticked { background: var(--amber-tint); }
.ps-row__n { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.ps-row.is-ticked .ps-row__n { color: var(--amber); }
.ps-row__title { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.ps-row__id { font-family: var(--font-mono); font-size: 13px; color: var(--ink-code); }
.ps-row__meta { font-size: 13.5px; color: var(--ink-faint); }
.ps-row__meta.is-known { color: var(--ink-muted); }
.ps-row__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; color: var(--ink-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.ps-row__link:hover { color: var(--amber); }
.ps-row.is-unavailable { cursor: default; }
.ps-row.is-unavailable .ps-row__title { color: var(--ink-muted); }
.ps-row__na { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink-faint); }
.ps-row__note { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

/* Count bar (pinned to the bottom of the screen) */
.ps-bar { position: sticky; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding: 14px var(--space-8); background: var(--surface-panel); border-top: 1px solid var(--line); }
.ps-bar__count { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; }
.ps-bar__count strong { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--amber); }
.ps-bar__count.is-empty strong { color: var(--ink-faint); }
.ps-bar__ids { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.ps-bar__note { font-size: 13.5px; color: var(--ink-muted); }
.ps-bar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ps-bar--phone { padding: 12px 16px 16px; gap: 12px; flex-wrap: nowrap; }

/* Status chip: always icon + words */
.ps-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ps-chip .ps-ic { width: 15px; height: 15px; }
.ps-chip--saved { background: var(--saved-tint); color: var(--saved); }
.ps-chip--failed { background: var(--alarm-tint); color: var(--alarm); }
.ps-chip--retry { background: var(--retry-tint); color: var(--retry); }
.ps-chip--paused { background: var(--paused-tint); color: var(--paused); }
.ps-chip--none { background: var(--neutral-tint); color: var(--ink-muted); }
.ps-chip--working { background: var(--surface-selected); color: var(--ink); }
.ps-chip--waiting { border: 1px dashed var(--line-ghost); color: var(--ink-faint); }
.ps-chip--quoted { color: var(--ink); padding-left: 0; }

/* Progress */
.ps-progress { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-pill); background: var(--surface-selected); overflow: hidden; }
.ps-progress__part { height: 100%; background: var(--ink); }
.ps-progress__part--saved { background: var(--saved); }
.ps-progress__part--none { background: var(--ink-muted); }
.ps-progress__part--failed { background: var(--alarm); }
.ps-progress--busy { position: relative; height: 4px; }
.ps-progress__sweep { position: absolute; top: 0; left: 0; width: 38%; height: 100%; border-radius: var(--radius-pill); background: var(--ink); animation: ps-sweep 1.5s cubic-bezier(.4, 0, .2, 1) infinite; }
.ps-count { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.ps-count strong { font-family: var(--font-mono); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
.ps-count .ps-count__of { font-size: 18px; font-weight: 500; color: var(--ink-muted); }
.ps-count .ps-count__what { margin-left: 4px; font-size: 17px; font-weight: 600; }
.ps-cursor { display: inline-block; width: 9px; height: 3px; margin-left: 3px; background: var(--amber); animation: ps-blink 1.06s steps(1) infinite; }
.ps-skeleton { border-radius: 4px; background: var(--surface-selected); animation: ps-pulse 1.6s ease-in-out infinite; }

/* Notices */
.ps-test { margin: 0; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 14px 0 11px; border: 1px solid var(--amber-line); border-radius: var(--radius-pill); font-size: 12.5px; color: var(--ink); }
.ps-test strong, .ps-test-strip strong { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--amber); }
.ps-test .ps-ic, .ps-test-strip .ps-ic { width: 15px; height: 15px; color: var(--amber); }
.ps-test-strip { margin: 0; box-sizing: border-box; min-height: 34px; padding: 7px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--amber-line); background: var(--amber-tint); font-size: 12px; line-height: 1.35; color: var(--ink); }
.ps-hint { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-faint); }
.ps-hint .ps-ic { width: 15px; height: 15px; }

/* Message blocks: errors and empty states */
.ps-msg { display: flex; gap: 14px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-panel); }
.ps-msg > .ps-ic { width: 22px; height: 22px; margin-top: 1px; color: var(--ink-muted); }
.ps-msg__body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-msg__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.ps-msg__text { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink); }
.ps-msg__more { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }
.ps-msg__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ps-msg--error { border-color: var(--alarm-line); background: var(--alarm-wash); }
.ps-msg--error > .ps-ic { color: var(--alarm); }
.ps-msg--empty { border-style: dashed; border-color: var(--line-ghost); background: transparent; }

/* Dialog */
.ps-scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ps-dialog { box-sizing: border-box; width: 460px; max-width: 100%; padding: 24px; border: 1px solid var(--line-ghost); border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-dialog); display: flex; flex-direction: column; gap: 14px; }
.ps-dialog__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.ps-dialog__text { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink-muted); }
.ps-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Summary figures (quote) */
.ps-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-panel); }
.ps-summary__cell { min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); }
.ps-summary__cell:first-child { border-left: 0; }
.ps-summary__fig { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.ps-summary__fig strong { font-family: var(--font-mono); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
.ps-summary__fig span { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.ps-summary__fig.is-short strong { color: var(--alarm); }

/* Transcript text */
.ps-reading { box-sizing: border-box; background: var(--surface-reading); border-radius: var(--radius-lg); padding: 36px 44px; }
.ps-transcript { max-width: var(--reading-measure); margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; letter-spacing: .005em; color: var(--ink-reading); }
.ps-transcript::selection { background: var(--amber); color: var(--on-amber); }
@media (max-width: 600px) { .ps-reading { padding: 20px 16px; border-radius: 0; } .ps-transcript { font-size: 17px; line-height: 28px; } }

/* ================= Part 2: Library, reader, export, sign in, billing ================= */

/* Header: page header, back link, signed-out header, phone top bar, icon button */
.ps-head { min-height: 64px; box-sizing: border-box; padding: 10px var(--space-8); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.ps-head__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ps-head__sub { font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.ps-head > .ps-test, .ps-head__end { margin-left: auto; }
.ps-head--out { background: var(--surface-rail); }
.ps-head__links { display: flex; align-items: center; gap: 8px; }
.ps-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; margin-left: -6px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.ps-back:hover, .ps-back.is-hover { color: var(--ink); background: var(--surface-raised); }
.ps-back:focus-visible, .ps-back.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ps-phonebar { height: 56px; box-sizing: border-box; padding: 0 8px 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); background: var(--surface-rail); }
.ps-iconbtn { box-sizing: border-box; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.ps-iconbtn--line { border: 1px solid var(--line-ghost); }
.ps-iconbtn:hover, .ps-iconbtn.is-hover { background: var(--surface-selected); }
.ps-iconbtn:active, .ps-iconbtn.is-pressed { background: var(--surface-pressed); }
.ps-iconbtn:focus-visible, .ps-iconbtn.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ps-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 3px; }
.ps-link:hover, .ps-link.is-hover { color: var(--amber); text-decoration-color: var(--amber); }
.ps-link:focus-visible, .ps-link.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }

/* Tag: marks on boards and in the prototype. Never used in the finished product except as noted. */
.ps-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; box-sizing: border-box; padding: 0 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.ps-tag .ps-ic { width: 13px; height: 13px; }
.ps-tag--server { border: 1px dashed var(--ink-faint); color: var(--ink-muted); }
.ps-tag--sim { background: var(--ink); color: var(--surface-page); }
.ps-tag--sample { border: 1px dotted var(--line-control); color: var(--ink-faint); }
.ps-proposal { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border: 1px dashed var(--line-control); border-radius: var(--radius-lg); }
.ps-proposal__text { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }
.ps-simbar { margin: 0; box-sizing: border-box; min-height: 44px; padding: 8px var(--space-8); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; background: var(--ink); color: var(--surface-page); font-size: 13.5px; line-height: 20px; font-weight: 500; }
.ps-simbar strong { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }

/* Pager: 25 a page */
.ps-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 16px 0; }
.ps-pager__where { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }
.ps-pager__where strong { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ps-pager__nav { margin-left: auto; display: flex; gap: 8px; }

/* Filter chips: what the list (and an export) covers right now */
.ps-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ps-scope__lead { font-size: 13.5px; color: var(--ink-muted); margin-right: 2px; }
.ps-fchip { display: inline-flex; align-items: center; height: 44px; box-sizing: border-box; padding-left: 14px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--surface-raised); font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.ps-fchip__key { color: var(--ink-faint); margin-right: 6px; }
.ps-fchip__val { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ps-fchip button { width: 42px; height: 42px; margin-left: 2px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ps-fchip button:hover, .ps-fchip button.is-hover { color: var(--ink); background: var(--surface-selected); }
.ps-fchip button:focus-visible, .ps-fchip button.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -3px; }
.ps-fchip--static { padding-right: 14px; }
.ps-fchip--all { padding-right: 14px; border-style: dashed; border-color: var(--line-ghost); background: transparent; color: var(--ink-muted); }

/* Collection list: All transcripts, each collection, New collection */
.ps-folders { display: flex; flex-direction: column; gap: 2px; }
.ps-folders__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 6px 12px; }
.ps-folders__count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.ps-folder { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.ps-folder__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-folder:hover, .ps-folder.is-hover { background: var(--surface-raised); color: var(--ink); }
.ps-folder[aria-current="true"] { background: var(--surface-selected); color: var(--ink-bright); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); }
.ps-folder:focus-visible, .ps-folder.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ps-create { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-panel); }
.ps-create__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Transcript row: one saved transcript in the Library */
.ps-tlist { list-style: none; margin: 0; padding: 0; }
.ps-thead, .ps-trow { display: grid; grid-template-columns: 116px minmax(0, 1fr) 150px minmax(0, 1.2fr) 150px; align-items: center; column-gap: 12px; }
.ps-thead { height: 36px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ps-thead > :first-child { padding-left: 12px; }
.ps-trow { position: relative; min-height: 56px; border-bottom: 1px solid var(--surface-selected); }
.ps-trow:hover, .ps-trow.is-hover { box-shadow: var(--shadow-row-hover); }
.ps-trow.is-open { z-index: 3; background: var(--surface-selected); }
.ps-trow__platform { padding-left: 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ps-trow__id { justify-self: start; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); text-decoration: none; }
.ps-trow__id .ps-ic { width: 16px; height: 16px; color: var(--ink-faint); }
.ps-trow__id::after { content: ""; position: absolute; inset: 0; }
.ps-trow__id:hover, .ps-trow__id.is-hover { color: var(--amber); }
.ps-trow__id:focus-visible, .ps-trow__id.is-focus { outline: 0; }
.ps-trow__id:focus-visible::after, .ps-trow__id.is-focus::after { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.ps-trow__lang, .ps-trow__src { font-size: 13.5px; line-height: 20px; color: var(--ink-muted); min-width: 0; }
.ps-trow__lang code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin-left: 6px; }
.ps-trow__acts { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.ps-orig { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.ps-orig .ps-ic { width: 15px; height: 15px; }
.ps-orig:hover, .ps-orig.is-hover { color: var(--amber); }
.ps-orig:focus-visible, .ps-orig.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
.ps-trow__title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.ps-tcard { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 12px 4px 12px 16px; border-bottom: 1px solid var(--surface-selected); }
.ps-tcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ps-tcard__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ps-tcard__more { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.ps-tcard .ps-iconbtn { position: relative; z-index: 1; color: var(--ink-muted); }
.ps-tcard .ps-trow__id { min-height: 0; }

/* Popover: Add to a collection */
.ps-pop { box-sizing: border-box; width: 280px; padding: 8px; border: 1px solid var(--line-ghost); border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-dialog); display: flex; flex-direction: column; gap: 2px; }
.ps-pop__title { margin: 6px 10px 6px; }
.ps-pop__item { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-align: left; display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.ps-pop__item .ps-ic { color: var(--ink-faint); }
.ps-pop__item:hover, .ps-pop__item.is-hover { background: var(--surface-raised); }
.ps-pop__item:focus-visible, .ps-pop__item.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.ps-pop__foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.ps-pop__empty { margin: 4px 10px 8px; font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }

/* Balance: credits and search allowance left */
.ps-balance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-panel); }
.ps-balance__cell { min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.ps-balance__cell:first-child { border-left: 0; }
.ps-balance__fig { margin: 0; font-family: var(--font-mono); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.ps-balance__what { font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.ps-balance__cell.is-out .ps-balance__fig { color: var(--alarm); }
.ps-balance__cell.is-out .ps-balance__what { color: var(--ink); }
.ps-balance--list { grid-template-columns: 1fr; }
.ps-balance--list .ps-balance__cell { flex-direction: row; align-items: baseline; gap: 10px; padding: 10px 14px; border-left: 0; border-top: 1px solid var(--line); }
.ps-balance--list .ps-balance__cell:first-child { border-top: 0; }
.ps-balance--list .ps-balance__fig { min-width: 44px; text-align: right; }

/* Activity: recent jobs and recent quotes */
.ps-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ps-activity__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 8px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.ps-activity__item:hover, .ps-activity__item.is-hover { background: var(--surface-raised); }
.ps-activity__item:focus-visible, .ps-activity__item.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
.ps-activity__when { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.ps-activity__item .ps-chip { margin-left: auto; }
.ps-activity__none { margin: 0; padding: 8px; font-size: 13.5px; color: var(--ink-faint); }
.ps-chip--sm { height: 24px; padding: 0 8px 0 6px; gap: 6px; font-size: 12.5px; }
.ps-chip--sm .ps-ic { width: 14px; height: 14px; }

/* Format choice: one of three, as large radio cards */
.ps-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ps-choice { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 14px 16px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-page); cursor: pointer; }
.ps-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ps-choice__name { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.ps-choice__dot { box-sizing: border-box; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line-control); display: flex; align-items: center; justify-content: center; }
.ps-choice__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-amber); visibility: hidden; }
.ps-choice__ext { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
.ps-choice__text { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.ps-choice:hover, .ps-choice.is-hover { border-color: var(--ink-faint); }
.ps-choice:has(input:checked), .ps-choice.is-chosen { border-color: var(--amber); background: var(--amber-tint); }
.ps-choice:has(input:checked) .ps-choice__dot, .ps-choice.is-chosen .ps-choice__dot { border-color: var(--amber); background: var(--amber); }
.ps-choice:has(input:checked) .ps-choice__dot::after, .ps-choice.is-chosen .ps-choice__dot::after { visibility: visible; }
.ps-choice:has(input:focus-visible), .ps-choice.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ps-choice.is-disabled { cursor: not-allowed; border-style: dashed; border-color: var(--line-ghost); }
.ps-choice.is-disabled .ps-choice__name, .ps-choice.is-disabled .ps-choice__text { color: var(--ink-faint); }

/* Meta list: facts about one transcript */
.ps-meta { margin: 0; display: flex; flex-direction: column; }
.ps-meta__row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--surface-selected); }
.ps-meta__row:first-child { padding-top: 0; }
.ps-meta dt { font-family: var(--font-mono); font-size: 11.5px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ps-meta dd { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink); }
.ps-meta dd code { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-code); }
.ps-meta__more { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }

/* Plan card: the $29 plan and the $12 top-up */
.ps-plan { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-panel); }
.ps-plan.is-current { border-color: var(--line-control); }
.ps-plan__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.ps-plan__name { margin: 0; font-size: 15.5px; line-height: 22px; font-weight: 600; }
.ps-plan__price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.ps-plan__price strong { font-family: var(--font-mono); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
.ps-plan__price span { font-size: 14px; color: var(--ink-muted); }
.ps-plan__gets { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--line); }
.ps-plan__gets li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-plan__gets strong { font-family: var(--font-mono); font-size: 20px; line-height: 26px; font-weight: 600; }
.ps-plan__gets span { font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.ps-plan__note { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.ps-plan__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

/* Payment table: payments, refunds and checkouts */
.ps-ptable { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 20px; }
.ps-ptable th { height: 36px; padding: 0 12px 0 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ps-ptable td { height: 56px; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--surface-selected); color: var(--ink-muted); vertical-align: middle; }
.ps-ptable td.is-main { color: var(--ink); font-weight: 500; }
.ps-ptable td.is-num, .ps-ptable th.is-num { text-align: right; font-family: var(--font-mono); }
.ps-ptable td.is-num { color: var(--ink); font-size: 14px; }
.ps-ptable td.is-none { color: var(--ink-faint); }
.ps-ptable tr:last-child td { border-bottom: 0; }

/* Auth: signed-out pages */
.ps-auth { box-sizing: border-box; width: 440px; max-width: 100%; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-panel); display: flex; flex-direction: column; gap: 20px; }
.ps-auth__title { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; }
.ps-auth__text { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink-muted); }
.ps-auth__text strong { color: var(--ink); font-weight: 600; }
.ps-auth__foot { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; font-size: 13.5px; color: var(--ink-muted); }
.ps-auth__foot p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.ps-auth__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface-selected); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.ps-auth__icon .ps-ic { width: 22px; height: 22px; }
.ps-input__toggle { height: 44px; margin-right: -12px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); font: inherit; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ps-input__toggle:hover, .ps-input__toggle.is-hover { color: var(--ink); background: var(--surface-selected); }
.ps-input__toggle:focus-visible, .ps-input__toggle.is-focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
.ps-rule { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.ps-rule .ps-ic { width: 15px; height: 15px; }
.ps-rule.is-met { color: var(--saved); }
.ps-rule.is-short { color: var(--alarm); }

/* Sheets: the phone menu, and bottom sheets for filters, collections and export */
.ps-sheetwrap { position: absolute; inset: 0; z-index: 10; background: var(--scrim); display: flex; flex-direction: column; justify-content: flex-end; }
.ps-sheet { box-sizing: border-box; max-height: 88%; overflow: auto; padding: 6px 16px 20px; border-top: 1px solid var(--line-ghost); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-panel); display: flex; flex-direction: column; gap: 14px; }
.ps-sheet__grip { align-self: center; width: 36px; height: 4px; margin: 6px 0 2px; border-radius: var(--radius-pill); background: var(--line-ghost); }
.ps-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-sheet__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.ps-drawer { position: absolute; inset: 56px 0 0 0; z-index: 10; background: var(--scrim); }
.ps-drawer__panel { box-sizing: border-box; padding: 12px 16px 20px; background: var(--surface-rail); border-bottom: 1px solid var(--line-ghost); display: flex; flex-direction: column; gap: 2px; }
.ps-drawer__panel .ps-menu__group { margin: 14px 0 6px 12px; }
.ps-drawer__panel .ps-menu__group:first-child { margin-top: 4px; }

/* Message block: more kinds */
.ps-msg--done > .ps-ic { color: var(--saved); }
.ps-msg--wait > .ps-ic { color: var(--ink); }
.ps-msg--paused > .ps-ic { color: var(--paused); }
.ps-msg--info > .ps-ic { color: var(--ink-muted); }

/* Notice: the billing test-mode block */
.ps-testblock { margin: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: 1px solid var(--amber-line); border-radius: var(--radius-lg); background: var(--amber-tint); font-size: 14px; line-height: 21px; color: var(--ink); }
.ps-testblock .ps-ic { margin-top: 1px; color: var(--amber); }
.ps-testblock strong { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .06em; color: var(--amber); }

@media (max-width: 600px) {
  .ps-head { padding: 12px 16px; }
  .ps-choices { grid-template-columns: 1fr; }
  .ps-plan { padding: 18px 16px; }
  .ps-auth { padding: 24px 16px; border-radius: 0; border-left: 0; border-right: 0; }
}