/* Shared desktop and browser-preview workspace. */
body { font:var(--hd-text-body)/1.5 var(--sans); grid-template-columns:176px minmax(0,1fr); }
button,input,select,textarea { font-family:inherit; }
.sidebar { padding:var(--hd-space-6) var(--hd-space-3) var(--hd-space-4); background:var(--rail); }
.brand { padding:0 8px 24px; }.brand img { max-width:138px; }.version { color:var(--quiet); font-size:var(--hd-text-micro); }
.nav { display:flex; flex-direction:column; gap:var(--hd-space-1); }
.nav-label { font-size:var(--hd-text-micro); letter-spacing:.09em; margin-top:22px; color:var(--quiet); }
.nav-button { min-height:40px; padding:8px 12px; border-radius:var(--hd-radius); font-size:14px; font-weight:500; gap:10px; }
.nav-button:hover { background:var(--panel-2); }
.nav-button.active { background:var(--panel-2); color:var(--ink); border-color:transparent; box-shadow:inset 3px 0 var(--orange); }
.nav-icon { width:17px; height:17px; display:inline-flex; flex:none; align-items:center; justify-content:center; }.nav-icon svg { width:17px; height:17px; }
.sidebar-footer { border-top:1px solid var(--line-2); }.sidebar-action { font-size:12px; }
.view-header { padding:var(--hd-space-5) var(--hd-space-6) var(--hd-space-4); min-height:87px; border-bottom:1px solid var(--line-2); align-items:center; }
h1 { font-size:var(--hd-text-title); font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.view-sub { color:var(--muted); margin-top:4px; font-size:var(--hd-text-label); }
.view-body { padding:var(--hd-space-5) var(--hd-space-6); }.status-pill { background:transparent; font-size:12px; padding:7px 10px; border-color:var(--line); }
.button { min-height:var(--hd-control-height); border-radius:var(--hd-radius); border-color:var(--hd-control-border); font-size:var(--hd-text-label); font-weight:600; padding:7px 12px; }
.button.primary { background:var(--orange); color:var(--void); }.button.primary:hover:not(:disabled) { background:var(--hd-accent-hover); }.button.link { color:var(--blue); }.button.link:hover { color:var(--ink); }
.button:disabled { opacity:.5; }.button:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--hd-focus); outline-offset:3px; }
.card { border-radius:var(--hd-radius); border-color:var(--line); padding:var(--hd-space-4); }.card-title,.rec-card h2 { font-size:var(--hd-text-section); letter-spacing:0; font-weight:650; }
.home-layout { grid-template-columns:minmax(0,1fr) 286px; gap:var(--hd-space-6); }.home-left,.home-right { gap:var(--hd-space-4); }
.capture-title { font-size:17px; }.capture-detail { font-size:12px; color:var(--muted); }
.session-grid { margin:15px 0 8px; padding:12px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); gap:16px; }
.stat { background:transparent; border:0; padding:0; }.stat b { font-size:22px; font-weight:600; }.stat span { font-size:var(--hd-text-micro); color:var(--muted); }
.session-label { font-size:var(--hd-text-section); font-weight:650; letter-spacing:0; text-transform:none; color:var(--ink); margin:var(--hd-space-6) 0 var(--hd-space-2); }
.match-row { padding:13px 0; gap:12px; border-bottom:1px solid var(--line-2); background:transparent; border-radius:0; }.match-row:hover { background:#ffffff04; }
.place { background:transparent; font-size:20px; font-weight:650; border:0; }.place.win { color:var(--gold); background:transparent; }
.match-title { font-size:14px; }.match-meta,.match-num small,.highlight-state { font-size:var(--hd-text-small); }.match-num { font-size:13px; }
.review-callout { background:var(--panel); border:1px solid var(--line); }.review-callout h2 { font-size:16px; }.review-callout p { font-size:12px; }.review-callout .button { width:100%; margin-top:16px; }
.tip-card { font-size:12px; color:var(--muted); background:transparent; border:0; padding:0 2px; }.tip-mark { display:none; }
.review-layout { grid-template-columns:204px minmax(0,1fr); gap:18px; }.clip-sidebar { background:transparent; border:0; border-right:1px solid var(--line-2); border-radius:0; padding-right:14px!important; }
.clip-match-heading { padding:14px 0 9px; font-size:12px; color:var(--muted); border-color:var(--line-2); }.clip-item { padding:11px 9px; border-radius:var(--hd-radius); }.clip-title { font-size:12px; }.clip-meta { font-size:var(--hd-text-micro); }.clip-play { background:transparent; }
.video-wrap { border:0; border-radius:var(--hd-radius); background:#08090b; }
.clip-trimmer { padding:11px 0 0; border:0; border-radius:0; background:transparent; }.trim-heading h3 { font-size:12px; font-weight:600; }.trim-summary { color:var(--muted); }.trim-transport { margin-top:9px; }
.trim-sync { font-size:var(--hd-text-micro); }.review-fields { gap:14px; }.review-fields textarea { height:36px; }.review-actions { padding-top:8px; border-top:1px solid var(--line-2); }
.recording-layout { gap:28px; }.recording-col { gap:20px; }.rec-card { border:0; border-bottom:1px solid var(--line); background:transparent; border-radius:0; padding:0 0 20px; }.rec-card h2 { margin:0 0 14px; }.field-grid { gap:14px; }
.settings-stack { max-width:960px; gap:26px; }.settings-stack>.card { padding:0 0 24px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; }.setting-row { padding:14px 0; }.setting-row b { font-size:14px; font-weight:600; }.setting-row .hint { display:block; max-width:70ch; margin-top:4px; line-height:1.55; }
.hint,.muted { color:var(--muted); }.field label { font-size:12px; margin-bottom:6px; }input[type=text],select { height:var(--hd-control-height); font-size:var(--hd-text-label); }textarea { font-size:var(--hd-text-label); }
input[type=text],select,textarea { border-color:var(--hd-control-border); border-radius:var(--hd-radius); background:var(--cut); }
.confirm-dialog { border-radius:10px; }.confirm-title { font-size:22px; }
.recap-hero { background:transparent; border:0; padding:0 0 20px; }.recap-stats { background:var(--panel); border-top:1px solid var(--line); border-radius:var(--hd-radius); }.recap-clip.button { background:transparent; border:1px solid var(--line); border-radius:var(--hd-radius); }
.preview-bar { display:flex; align-items:center; gap:16px; padding:8px 18px; background:#252a30; border-bottom:1px solid #48505b; font-size:12px; color:var(--ink); }.preview-bar strong { white-space:nowrap; }.preview-bar>span { flex:1; color:#c1c7ce; }.preview-bar label { display:flex; align-items:center; gap:8px; }.preview-bar select { width:150px; height:30px; }.preview-bar button { background:transparent; color:var(--ink); border:1px solid #616a76; padding:5px 10px; border-radius:4px; cursor:pointer; }
body.browser-preview { grid-template-rows:auto minmax(0,1fr); }.browser-preview>.preview-bar { grid-column:1/-1; }.browser-preview>.sidebar { grid-row:2; }.browser-preview>.workspace { grid-row:2; }
@media(max-width:1200px) { .view-body { padding:16px; }.view-header { padding:18px 16px; }.home-layout { grid-template-columns:minmax(0,1fr) 252px; }.review-layout { grid-template-columns:170px minmax(0,1fr); gap:12px; }.button { padding-inline:9px; } }
@media(max-height:760px) and (min-width:761px) { .sidebar { padding-top:14px; }.brand { padding-bottom:12px; }.view-header { min-height:70px; padding-block:12px; }.view-sub { margin-top:2px; }.view-body { padding-block:12px; }.clip-trimmer { padding-top:5px; } }
@media(max-width:760px) {
  body,body.browser-preview { display:flex; flex-direction:column; height:auto; min-height:100dvh; overflow:auto; }
  .sidebar { position:sticky; top:0; z-index:10; width:100%; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); flex:none; }
  .brand,.nav-label,.sidebar-footer { display:none; }.nav { display:flex; flex-direction:row; gap:4px; overflow:auto; }.nav-button { min-height:40px; padding:8px 10px; white-space:nowrap; flex:none; font-size:12px; }.nav-icon { display:none; }
  .workspace { min-height:0; overflow:visible; }.view { height:auto; }.view.active { display:block; }.view-header { gap:10px; flex-wrap:wrap; }h1 { font-size:24px; }.view-body,.view-body.scroll { overflow:visible; height:auto; }.home-layout,.recording-grid { display:grid; grid-template-columns:1fr; }.home-right { display:grid; grid-template-columns:1fr; }.settings-stack { width:100%; }
  .review-layout { display:flex; flex-direction:column; }.clip-sidebar { border:0; padding:0!important; }.clip-list { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; }.clip-match-heading { display:none; }.clip-item { flex:0 0 190px; }.review-detail { grid-template-rows:auto auto auto auto; overflow:visible; }.video-wrap { aspect-ratio:16/9; min-height:190px; }.review-fields { grid-template-columns:1fr; }.review-actions .match-link { margin-left:0; }
  .match-row { grid-template-columns:42px minmax(0,1fr) auto; }.match-num { display:none; }.match-map { display:block; }.recap-stats { grid-template-columns:repeat(3,1fr); }.recap-stats>div { padding:12px; }.recap-stats dd { font-size:22px; }.recap-hero { gap:14px; }.recap-identity h2 { font-size:24px; }.recap-placement strong { font-size:38px; }
  .preview-bar { flex-wrap:wrap; gap:8px; padding:8px 12px; }.preview-bar>span { flex-basis:60%; }.preview-bar label { margin-right:auto; }.header-right { flex-wrap:wrap; }.hotkey { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Fit the preview chrome into the app height, rather than adding a second viewport. */
.workspace { height:100%; }
.home-left > .capture-card { border:0; background:transparent; padding:0; }
.stats { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 0; border:0; border-block:1px solid var(--line); border-radius:0; }
.stats .stat { padding:0 10px; }
.recent { background:transparent; border:0; border-radius:0; }
.match-row { padding-inline:10px; }
.recording-col .grow { flex:0; }.rec-card h2 { text-transform:none; }
#view-recording .view-body { overflow:auto; }
@media(max-width:760px) { html { height:auto; overflow:auto; }.workspace { height:auto; }.nav-button { width:auto; }.view-body { min-height:0; }.home-left { min-height:0; }.recent { flex:none; }.sidebar { flex-direction:row; }.nav { width:100%; }.review-actions { padding-bottom:16px; } }

/* Polish: shared reading rhythm, control states, and responsive settings. */
:root { --focus:var(--hd-focus); --control-radius:var(--hd-radius); }
body { font-variant-numeric:tabular-nums; }
* { scrollbar-width:thin; scrollbar-color:#555e69 transparent; }
a,.button.link { text-underline-offset:3px; }
input,textarea { caret-color:var(--orange); }
input::placeholder,textarea::placeholder { color:var(--quiet); opacity:1; }
textarea:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.button:not(.primary):not(.danger):not(.danger-solid):not(.link):not(:disabled):hover { border-color:var(--quiet); background:var(--hd-hover); }
.button:disabled:hover { cursor:not-allowed; }
input:not(:disabled):hover,select:not(:disabled):hover,textarea:not(:disabled):hover { border-color:var(--quiet); }
.nav-button { font-weight:600; }
.nav-button[aria-current=page] { color:var(--ink); }
.card-title { padding-bottom:0; border-bottom:0; margin-bottom:16px; }
.capture-state { font-size:22px; font-weight:600; }
.capture-detail:empty { display:none; }
.capture-card .stats { margin-top:18px; }
.capture-card .session-label { margin-top:var(--hd-space-6); }
.match-title,.account-name { overflow-wrap:anywhere; }
.account-sub { line-height:1.5; }
.clip-item { align-items:flex-start; }
.clip-title { white-space:normal; overflow-wrap:anywhere; line-height:1.4; font-weight:600; }
.clip-meta { line-height:1.5; }
.clip-match-heading:first-child { border-top:0; padding-top:0; }
.clip-item.active { box-shadow:inset 2px 0 var(--orange); }
.review-fields label { font-weight:500; }
.review-fields .counter { color:var(--quiet); font-size:var(--hd-text-micro); }
.trim-heading h3,.trim-transport .button { font-size:12px; }
.trim-sync summary { padding:4px 0; }
.trim-sync[open] { padding-bottom:8px; }
.settings-stack > .card > .card-title + .setting-row,
.rec-card > h2 + .setting-row { border-top:0; padding-top:0; }
.setting-row { column-gap:12px; }
.setting-row > .dot { margin-top:7px; }
.setting-row .hint { font-size:13px; }
.settings-stack > .card > p { max-width:75ch; font-size:13px; line-height:1.6; }
.settings-stack .row { flex-wrap:wrap; gap:8px; }
.switch { width:36px; height:22px; cursor:pointer; }
.switch span::after { width:16px; height:16px; }
.switch input:checked + span::after { transform:translateX(14px); }
.switch:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--control-radius); }
.switch:hover span { border-color:#75808d; }
.enable-line b,.mic-line b { font-size:13px; font-weight:600; }
.rec-card .hint { line-height:1.6; }
.choice { align-items:center; padding:10px; }
.choice b { font-size:13px; font-weight:600; }
.choice:has(input:checked) span span { color:#eac8bc; }
.choice:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:3px; }
.metrics { margin-top:14px; }
.metric { padding:10px; }
.sound-controls { grid-template-columns:auto minmax(120px,1fr); gap:12px; }
.sound-controls > .sound-volume { grid-column:1; }
.sound-controls > .button { justify-self:start; }
.sound-volume input { margin:0; min-height:24px; }
.empty,.recent-empty { line-height:1.6; }
.empty { padding:24px; }
.toast { max-width:min(430px,calc(100vw - 32px)); }
.recap-identity { min-width:0; }
.recap-identity h2 { overflow-wrap:anywhere; }
@media (min-width:1500px) {
  .sound-controls { grid-template-columns:auto minmax(130px,1fr) minmax(105px,.7fr) auto; }
  .sound-controls > .sound-volume { grid-column:auto; }
}
@media (max-width:1100px) {
  .recording-layout { grid-template-columns:1fr; height:auto; gap:20px; }
}
@media (max-width:760px) {
  .recording-layout { grid-template-columns:1fr; }
  .recording-col { min-width:0; }
  .home-left > .capture-card { flex:none; }
  .nav-button { min-height:44px; }
  .button,.trim-transport .button { min-height:var(--hd-touch-height); }
  .field input,.field select,.path input { min-height:var(--hd-touch-height); }
  .review-fields textarea { height:64px; }
  .setting-row > .button { grid-column:2; justify-self:start; }
  .recap-hero { flex-wrap:wrap; }
  .recap-stats > div:nth-child(4) { border-left:0; }
  .recap-stats > div:nth-child(n+4) { border-top:1px solid var(--line); }
  .trim-transport { flex-wrap:wrap; gap:8px; }
  .trim-selected-event { flex-basis:100%; order:1; }
}

/* Motion acknowledges actions; media and timeline geometry remain immediate. */
:root { --motion-fast:var(--hd-motion-fast); --motion-state:var(--hd-motion-state); --motion-ease:var(--hd-ease); }
@media (prefers-reduced-motion:no-preference) {
  .nav-button,.clip-item,.button,.choice,.preview-bar button,.recap-clip,summary,
  input:not([type='range']),select,textarea {
    transition:background-color var(--motion-fast) var(--motion-ease),
      border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease);
  }
  .switch span { transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease); }
  .switch span::after { transition:transform var(--motion-state) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease); }
  .toast { transition:opacity var(--motion-fast) var(--motion-ease),transform var(--motion-state) var(--motion-ease); transform:translateY(6px); }
  .toast.show { transform:translateY(0); }
  .publish-feedback { transition:background-color var(--motion-state) var(--motion-ease),border-color var(--motion-state) var(--motion-ease),color var(--motion-state) var(--motion-ease); }
  #pair-panel:not([hidden]) { animation:hd-recorder-feedback var(--motion-state) var(--motion-ease); }
  .confirm-dialog[open]::backdrop { animation:hd-recorder-feedback var(--motion-fast) var(--motion-ease); }
}
@keyframes hd-recorder-feedback { from { opacity:.65; } to { opacity:1; } }
.button:not(:disabled):not(.trim-marker):not(.trim-handle):active { filter:brightness(.9); }
@media (prefers-reduced-motion:reduce) {
  .toast,.toast.show { transform:none; }
}
html[data-motion-paused] *,html[data-motion-paused] *::before,html[data-motion-paused] *::after {
  animation:none!important;transition:none!important;
}

/* Playback and trim share one row under the video, in three groups. */
.trim-transport { flex-wrap:wrap; justify-content:space-between; gap:8px 16px; }
.trim-transport .button:nth-last-child(2) { margin-left:0; }
.trim-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.trim-group[aria-label='Trim'] { margin-left:auto; }
/* Trim handles stay slim but take a 24px-wide target. */
.trim-handle::before { content:''; position:absolute; inset:-4px -8px; }

/* Match-row review link: a real target, not just its text. */
.button.link.review-match { display:inline-flex; align-items:center; min-height:32px; padding:4px 6px; }

/* The one definition of the Highlights detail pane (the phone preview overrides it above).
   The video takes whatever the tools leave, never under 160px, and the pane scrolls with
   the decision row pinned to its bottom edge so Publish and Delete stay in reach at the
   smallest window. */
@media (min-width:761px) {
  .review-detail { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(180px,1fr) auto auto; gap:10px; min-height:0; overflow:auto; }
  .review-detail .review-actions { position:sticky; bottom:0; z-index:2; padding-bottom:4px; background:var(--void); }
}

/* Shortcut hints inside the trim buttons. */
.trim-transport kbd { margin-left:6px; padding:0 4px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font:600 var(--hd-text-micro)/1.4 var(--sans); }
/* Short windows: tighter tools so the video keeps more of the pane. */
@media (min-width:761px) and (max-height:680px) {
  .trim-track { height:32px; }
  .trim-transport .button { min-height:30px; padding-block:4px; }
  .review-fields textarea { height:32px; }
  .review-detail { gap:6px; }
  .clip-trimmer { padding-top:4px; }
}

/* Highlights: browse matches, watch first, reveal editing tools on demand. */
.review-layout { grid-template-columns:252px minmax(0,1fr); gap:24px; }
.clip-sidebar { padding-right:16px!important; }
.clip-list { padding:0 4px 8px 0; }
.clip-match-group { padding-block:6px 12px; border-bottom:1px solid var(--line-2); }
.clip-match-heading { display:list-item; padding:10px 2px; border:0; cursor:pointer; font-weight:400; }
.clip-match-heading::marker { color:var(--quiet); font-size:10px; }
.clip-match-heading strong { color:var(--ink); font-size:13px; font-weight:600; }
.clip-match-heading span { display:block; margin:5px 0 0 14px; color:var(--muted); font-size:12px; }
.clip-item { grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin:2px 0; padding:12px 10px; border:0; background:transparent; box-shadow:none; }
.clip-item:hover { background:var(--panel); }
.clip-item.active { background:var(--panel-2); box-shadow:none; }
.clip-item.active .clip-title { color:var(--orange); }
.clip-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip-meta { margin-top:4px; font-size:12px; color:var(--muted); }
.clip-duration { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.review-clip-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.review-clip-heading h2 { margin:0; font-size:18px; font-weight:600; overflow-wrap:anywhere; }
.review-clip-heading > span { margin-left:auto; color:var(--muted); font-size:12px; }
.review-tools { min-width:0; }
.review-metadata { margin-top:12px; border-top:1px solid var(--line-2); }
.review-metadata > summary { width:fit-content; padding:10px 0; cursor:pointer; color:var(--muted); font-size:13px; }
.review-metadata[open] > summary { color:var(--ink); }
.review-metadata .review-fields { padding:4px 0 12px; }
.review-metadata .review-fields textarea { height:64px; resize:vertical; }
.review-metadata .reason-strip { flex-wrap:wrap; padding:0 0 12px; border:0; background:transparent; }
.review-tools > .state-banner { display:block; padding:10px 0; }
.clip-trimmer:not(.is-trimming) .trim-track { background:var(--panel-2); }
/* Leave room for the handles' larger pointer targets at either end. */
.clip-trimmer .trim-track { margin-inline:14px; }
.clip-trimmer .trim-group[hidden],.clip-trimmer .trim-handle[hidden],.clip-trimmer .trim-selection[hidden] { display:none; }
.trim-transport .button:nth-last-child(2) { margin-left:0; }
.trim-transport .trim-toggle { margin-left:auto; }
.is-trimming .trim-transport { flex-wrap:wrap; }
.trim-group[aria-label='Trim'] { margin-left:0; }
.trim-sync { margin-top:12px; }
.review-actions .button.danger { background:transparent; border-color:transparent; color:var(--muted); }
.review-actions .button.danger:hover { border-color:var(--red); color:var(--red); }
@media (min-width:761px) and (max-width:1100px) {
  .review-layout { grid-template-columns:218px minmax(0,1fr); gap:16px; }
}
@media (max-width:760px) {
  .review-layout { gap:16px; }
  .clip-sidebar { padding-right:0!important; max-height:205px; }
  .clip-list { display:block; overflow:auto; }
  .clip-match-heading { display:list-item; }
  .clip-item { width:100%; }
  .review-detail { display:flex; flex-direction:column; gap:12px; overflow:visible; }
  .review-clip-heading > span { margin-left:0; }
  .trim-transport { flex-wrap:wrap; }
  .video-wrap { flex:none; }
}