@import url('/tokens.css');

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 24px }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
button, input { font: inherit }
button, a { -webkit-tap-highlight-color: transparent }
button { cursor: pointer; color: inherit }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px }
button:disabled { cursor: default; opacity: .4 }
[hidden] { display: none!important }
h1, h2, h3, p { margin: 0 }
::selection { background: #684326; color: #fff }
.topbar { max-width: 1320px; margin: auto; padding: 29px 52px; display: flex; align-items: center; justify-content: space-between; gap: 28px }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 24px; font-weight: 700; letter-spacing: -.9px; white-space: nowrap }
.brand img { mix-blend-mode: screen; flex-shrink: 0 }
.brand-light { font-weight: 400; color: var(--muted) }
.account-actions { display: flex; align-items: center; gap: 12px }
.account-identity { min-width:0; max-width:320px; text-align:right; overflow-wrap:anywhere }
.account-identity strong { display:block; font-size:16px; font-weight:600 }
.account-identity a { display:block; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:3px }
.account-country { display:block; font-size:12px; color:var(--muted); letter-spacing:.06em }
.account-actions #logout-button { flex-shrink:0 }
.header-login { display: inline-flex; gap: 20px; align-items: center; font-size: 14px; padding: 10px 0 }
.header-login span { color: var(--accent) }
.header-login:hover, .quiet:hover, footer a:hover, .text-link:hover { color: var(--accent) }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 46px; padding: 16px 23px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #1b130d; font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover) }
.button span { font-size: 20px; line-height: 1 }
.eyebrow, .label, .practice-caption { font-family: Consolas, 'Courier New', monospace; font-size: 11px; letter-spacing: 1.7px; font-weight: 400 }
.eyebrow { color: var(--muted); display: flex; align-items: center; gap: 10px }
.dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; display: inline-block; flex-shrink: 0 }
.login-status { max-width: 360px; font-size: 14px; color: var(--accent); margin-top: 18px }
footer { max-width: 1320px; margin: auto; padding: 30px 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--muted) }
footer .maker { color: #c1bcb2; font-size: 14px; font-weight: 700; letter-spacing: .14em }
footer p { font-size: 11px }
footer>div { display: flex; gap: 25px }
.workspace { max-width: 1320px; min-height: calc(100svh - 200px); margin: 34px auto 54px; padding: 0 52px }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px }
.workspace-heading h1 { font-size: 46px; line-height: 1.2; font-weight: 500; letter-spacing: -1.5px; margin: 12px 0 }
.account-status { font-size: 14px; color: var(--muted); margin-bottom: 28px }
.dashboard { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden }
.dashboard-toolbar { padding: 19px 24px; border-bottom: 1px solid var(--line) }
.dashboard-toolbar .label { color: var(--accent) }
.dataset-note { display: block; margin-top: 6px; color: var(--muted); font-size: 13px }
.status:empty { display: none }
.status { padding: 24px; font-size: 14px; color: var(--muted) }
.status.error { color: var(--negative) }
.dashboard-body { display: grid; grid-template-columns: minmax(0, 1fr) }
.dashboard-body.with-sidebar { grid-template-columns: 230px minmax(0, 1fr) }
.mode-sidebar { padding: 24px 12px; border-right: 1px solid var(--line) }
.mode-sidebar>.label { display: block; padding: 0 12px 16px; color: var(--muted) }
.mode-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 12px; margin-bottom: 7px; border: 1px solid transparent; background: transparent; border-radius: 3px; text-align: left; font-size: 15px }
.mode-button small { display: block; font: 12px Consolas, monospace; color: var(--muted); margin-top: 3px; max-width: 125px; overflow-wrap: anywhere }
.mode-button b { font: 17px Consolas, monospace }
.mode-button[aria-pressed=true] { background: var(--raised); border-color: #64503f }
.mode-button[aria-pressed=true] b { color: var(--accent) }
.mode-button:hover:not([aria-pressed=true]) { background: var(--raised) }
.dashboard-main { padding: 27px 30px 18px; min-width: 0 }
.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px }
.chart-heading h2 { font-size: 27px; font-weight: 500; letter-spacing: -.7px; margin-top: 2px }
.range-picker { display: flex; background: var(--paper); border-radius: 3px; padding: 3px; gap: 3px }
.range-picker button { border: 0; background: transparent; padding: 9px 12px; border-radius: 2px; font: 13px Consolas, monospace }
.range-picker button[aria-pressed=true] { background: var(--raised); color: var(--accent) }
.metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 26px 0 18px }
.metrics>div { border-left: 1px solid var(--line); padding-left: 24px }
.metrics>div:first-child { padding-left: 0; border-left: 0 }
.metrics .label { font-size: 11px; letter-spacing: .5px; color: var(--muted) }
.metrics strong { display: block; font-size: 35px; line-height: 1.45; font-weight: 500; letter-spacing: -1.1px; font-variant-numeric: tabular-nums }
.metrics strong.positive { color: var(--positive) }
.metrics strong.negative { color: var(--negative) }
.metric-note { display: block; font-size: 12px; color: var(--muted) }
.chart-wrap { min-height: 210px; position: relative }
#rating-chart { width: 100%; height: auto; display: block; overflow: visible }
.chart-wrap text { font: 13px Consolas, monospace; fill: var(--muted) }
.chart-point { cursor: pointer }
.chart-point:focus { outline: none; stroke: var(--ink); stroke-width: 4 }
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 12px; color: var(--muted); padding: 10px 0 23px; border-bottom: 1px solid var(--line) }
.legend-dot { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: 7px }
.history-heading { display: flex; align-items: center; justify-content: space-between; padding: 19px 0 10px }
.history-heading h3 { font-size: 15px; font-weight: 500 }
.quiet { border: 0; background: transparent; padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; font-size: 13px }
.table-scroll { overflow-x: auto }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap }
th { font: 11px Consolas, monospace; color: var(--muted); letter-spacing: .7px; padding: 9px 18px 9px 0 }
td { border-top: 1px solid var(--line); padding: 11px 18px 11px 0; font-size: 14px; color: var(--muted) }
td.positive { color: var(--positive) }
td.negative { color: var(--negative) }
td:nth-child(2) { font: 15px Consolas, monospace; color: var(--ink) }
tr.clickable { cursor: pointer }
tr.clickable:hover td, tr.clickable:focus td { background: var(--raised) }
.match-columns { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 34px; margin-top: 12px }
.match-columns h3 { font-size: 15px; font-weight: 500; margin: 18px 0 4px }
.session-block { margin: 14px 0 22px }
.session-head { font-size: 13px; color: var(--muted); margin: 0 0 4px }
.pointer-card { border: 1px solid var(--line); padding: 16px 18px; margin: 14px 0 }
.pointer-card h3 { margin: 0 0 8px; font-size: 15px }
.pointer-evidence { font-size: 13px; color: var(--muted); margin: 0 0 8px; white-space: pre-wrap }
.pointer-advice { font-size: 14px; margin: 0 }
.moment-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.catalog-row { padding: 8px 0; border-top: 1px solid var(--line) }
.catalog-quiet { opacity: .6 }
.catalog-title { font-size: 14px; margin: 0 }
.catalog-need { font-size: 12px; color: var(--muted); margin: 2px 0 0 }
.goal-list { list-style: none; padding: 0; font-size: 14px; color: var(--muted) }
.goal-list li { border-top: 1px solid var(--line); padding: 9px 0; font-family: Consolas, monospace }
.goal-list li.positive { color: var(--positive) }
.goal-list li.negative { color: var(--negative) }
.meta-list { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7 }
.meta-list dt { float: left; clear: left; min-width: 130px; color: var(--muted) }
.meta-list dd { margin: 0 0 4px 130px; color: var(--ink); overflow-wrap: anywhere }
#trends-playlist { margin-top: 8px; padding: 9px 12px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; font: 14px Consolas, monospace }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 34px 30px; margin: 28px 0 12px }
.trend-card { min-width: 0 }
.trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px }
.trend-head .label { color: var(--muted); font-size: 11px; letter-spacing: .6px }
.trend-head strong { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums }
.trend-plot { width: 100%; height: auto; display: block; overflow: visible; margin-top: 10px }
.trend-plot text { font: 12px Consolas, monospace; fill: var(--muted) }
.trend-caption { font-size: 12px; color: var(--muted); margin-top: 4px }
.trend-empty { margin-top: 10px; padding: 46px 8px; border: 1px dashed var(--line); border-radius: 4px; text-align: center; font-size: 13px; color: var(--muted) }
.trends-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted) }
#library-content .metrics { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
#library-content h3 { font-size: 15px; font-weight: 500; margin: 18px 0 4px }
#experiment-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; border: 1px solid var(--line); padding: 16px 18px; margin: 14px 0 }
.exp-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted) }
.exp-field input, .exp-field select { padding: 9px 12px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; font: 14px Consolas, monospace; min-width: 150px }
.exp-field input { font-family: inherit }
#exp-hypothesis { min-width: 260px }
#experiment-form .button { padding: 10px 18px; gap: 0; display: inline-block }
.dashboard-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center }
#playback-pane { margin-top: 18px }
#playback-canvas { display: block; width: 100%; max-width: 900px; border: 1px solid var(--line); border-radius: 4px; background: #10160f; margin-top: 10px }
.playback-controls { display: flex; align-items: center; gap: 14px; margin-top: 8px; max-width: 900px }
.playback-controls input[type=range] { flex: 1; accent-color: var(--accent) }
#playback-clock { font: 13px Consolas, monospace; min-width: 40px; text-align: right }
.form-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px }
.form-pip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 3px; font: 11px Consolas, monospace; color: var(--muted) }
.form-pip.win { color: var(--positive); border-color: var(--positive) }
.form-pip.loss { color: var(--negative); border-color: var(--negative) }
.privacy { max-width: 760px; margin: 50px auto 80px; padding: 0 28px; line-height: 1.8; color: #c5c0b6 }
.privacy h1 { font-size: 42px; font-weight: 500; letter-spacing: -1.5px; line-height: 1.2; margin: 18px 0 25px; color: var(--ink) }
.privacy h2 { font-size: 23px; font-weight: 500; line-height: 1.3; margin: 32px 0 12px; color: var(--ink) }
.privacy p+p { margin-top: 14px }
.privacy a { text-decoration: underline; text-underline-offset: 3px; color: var(--accent) }
.consent { max-width: 640px; margin: 60px auto 90px; padding: 0 28px; line-height: 1.8; color: #c5c0b6 }
.consent h1 { font-size: 42px; font-weight: 500; letter-spacing: -1.5px; line-height: 1.2; margin: 18px 0 22px; color: var(--ink) }
.consent .pairing { font-size: 18px; margin-bottom: 14px; color: var(--ink) }
.consent .pairing strong { font-family: Consolas, 'Courier New', monospace; color: var(--accent) }
.consent .button { margin-top: 22px }
.text-link { font-size: 14px }
.skip { position: absolute; top: -90px; left: 20px; padding: 12px; background: var(--ink); color: var(--paper); z-index: 10 }
.skip:focus { top: 12px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0) }
#chart-empty { text-align: center; padding: 70px 10px; font-size: 14px; color: var(--muted) }

@media(max-width:1000px) {
  .dashboard-body.with-sidebar { grid-template-columns: 195px minmax(0,1fr) }
  .dashboard-main { padding: 23px 20px }
  .metrics>div { padding-left: 14px }
  footer { flex-wrap: wrap }
}
@media(max-width:720px) {
  .match-columns { grid-template-columns: 1fr }
  .topbar { padding: 20px 24px; gap: 15px }
  .brand { font-size: 21px; gap: 8px }
  .brand img { width: 36px; height: 36px }
  .header-login { font-size: 13px; gap: 12px }
  .eyebrow { font-size: 10px; letter-spacing: 1.3px }
  footer { padding: 26px 28px; gap: 18px; justify-content: flex-start }
  footer p { order: 3; width: 100% }
  footer>div { margin-left: auto; gap: 20px }
  .workspace { padding: 0 16px }
  .workspace-heading h1 { font-size: 36px }
  .dashboard-toolbar { padding: 17px }
  .dashboard-body { display: block }
  .mode-sidebar { padding: 16px 12px 5px; border-right: 0; border-bottom: 1px solid var(--line) }
  #mode-list { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 7px }
  .mode-button { min-width: 152px; width: auto; padding: 10px; gap: 18px }
  .mode-sidebar>.label { padding: 0 3px 9px }
  .dashboard-main { padding: 22px 15px 10px }
  .metrics { gap: 5px }
  .metrics strong { font-size: 29px }
  .metrics>div { padding-left: 11px; min-width: 0 }
  .metrics .label { font-size: 10px; letter-spacing: 0 }
  .chart-wrap { min-height: 130px; overflow-x: auto }
  #rating-chart { min-width: 560px }
  .chart-foot { align-items: flex-start }
  .chart-foot>span:last-child { text-align: right; max-width: 60% }
  .privacy { margin-top: 30px }
  .privacy h1 { font-size: 32px }
  .privacy-header { flex-wrap: wrap }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
  * { transition: none!important }
}

/* Approved Plan / Grind / Review / Repeat landing page. */

  #site-shell { --cr-black:#0c0c0b; --cr-white:#f3f1ed; --cr-orange:#f58d45; --cr-muted:#aaa7a1; --cr-line:#37322c; --cr-route:#805635; width:100%; container-type:inline-size; }
  #site-shell * { box-sizing:border-box; }
  #site-shell .cr-page { background:var(--cr-black); color:var(--cr-white); font:16px/1.5 Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
  #site-shell a { color:inherit; text-decoration:none; }
  #site-shell .cr-header { padding:25px 5%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  #site-shell .cr-brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:-.9px; white-space:nowrap; }
  #site-shell .cr-brand img { mix-blend-mode:screen; flex-shrink:0; }
  #site-shell .cr-domain { color:var(--cr-muted); font-weight:400; }
  #site-shell .cr-signin { font-size:13px; white-space:nowrap; padding:12px 0; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#76736b; }
  #site-shell .cr-signin:hover, #site-shell .cr-footer a:hover { color:var(--cr-orange); }
  #site-shell .cr-main { max-width:1200px; margin:0 auto; padding:61px 7% 46px; }
  #site-shell .cr-eyebrow { font-size:11px; letter-spacing:.17em; color:var(--cr-muted); }
  #site-shell #landing h1 { margin-top:21px; font-size:clamp(48px,7.7cqw,102px); font-weight:700; letter-spacing:-.058em; line-height:1.02; }
  #site-shell #landing h1 span { font-weight:400; color:var(--cr-orange); }
  #site-shell .cr-circuit { position:relative; margin-top:64px; padding-inline:29px; }
  #site-shell .cr-stages { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:0; list-style:none; }
  #site-shell .cr-stages li { position:relative; padding:22px 0 25px; border-top:1px solid var(--cr-line); }
  #site-shell .cr-stages li::before { content:""; width:5px; height:5px; background:var(--cr-orange); position:absolute; top:-3px; left:0; border-radius:50%; }
  #site-shell .cr-location { color:var(--cr-muted); font-size:10px; letter-spacing:.09em; }
  #site-shell .cr-index { color:var(--cr-orange); margin-right:9px; font-variant-numeric:tabular-nums; }
  #site-shell #landing h2 { margin-top:24px; font-size:clamp(28px,3.5cqw,43px); line-height:1.12; font-weight:500; letter-spacing:-.045em; }
  #site-shell .cr-description { max-width:225px; margin-top:16px; color:var(--cr-muted); font-size:13px; line-height:1.6; }
  #site-shell .cr-return { position:relative; height:43px; border-bottom:1px solid var(--cr-route); }
  #site-shell .cr-circuit::before, #site-shell .cr-circuit::after { content:""; position:absolute; top:0; bottom:0; width:29px; border:1px solid var(--cr-route); pointer-events:none; }
  #site-shell .cr-circuit::before { left:0; border-right:0; border-radius:20px 0 0 20px; }
  #site-shell .cr-circuit::after { right:0; border-left:0; border-radius:0 20px 20px 0; }
  #site-shell .cr-return p { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); padding:0 18px; background:var(--cr-black); font-size:18px; line-height:28px; letter-spacing:-.4px; }
  #site-shell .cr-repeat-index { color:var(--cr-orange); font-size:10px; letter-spacing:.09em; font-variant-numeric:tabular-nums; margin-right:9px; vertical-align:middle; }
  #site-shell .cr-period { color:var(--cr-orange); }
  #site-shell .cr-potential { margin-top:48px; text-align:right; font-size:13px; color:var(--cr-muted); }
  #site-shell .cr-footer { max-width:none; margin:0 5%; padding:25px 0; border-top:1px solid var(--cr-line); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"notice maker links"; align-items:center; gap:24px; color:var(--cr-muted); }
  #site-shell .cr-maker { grid-area:maker; justify-self:center; font-size:14px; font-weight:700; letter-spacing:.14em; }
  #site-shell .cr-footer p { grid-area:notice; font-size:11px; }
  #site-shell .cr-footer nav { grid-area:links; justify-self:end; display:flex; gap:24px; font-size:12px; }
  #site-shell .cr-footer nav a { padding:12px 0; }
  @container (max-width:700px) {
    #site-shell .cr-header.has-account { flex-wrap:wrap; }
    #site-shell .has-account .account-actions { width:100%; justify-content:space-between; }
    #site-shell .account-identity { text-align:left; }
    #site-shell .cr-header { padding:18px 20px; gap:12px; }
    #site-shell .cr-brand { font-size:18px; gap:6px; }
    #site-shell .cr-brand img { width:28px; height:28px; }
    #site-shell .cr-signin { font-size:12px; }
    #site-shell .cr-main { padding:40px 26px 34px; }
    #site-shell .cr-eyebrow { font-size:10px; letter-spacing:.12em; }
    #site-shell #landing h1 { font-size:clamp(40px,10.9cqw,70px); margin-top:19px; line-height:1.05; }
    #site-shell .cr-circuit { margin-top:39px; padding-inline:22px; }
    #site-shell .cr-stages { grid-template-columns:1fr; gap:0; }
    #site-shell .cr-stages li { padding:20px 0 26px; }
    #site-shell #landing h2 { font-size:32px; margin-top:14px; }
    #site-shell #landing h2 br { display:none; }
    #site-shell #landing h2 br::after { content:" "; }
    #site-shell .cr-description { max-width:none; font-size:13px; margin-top:8px; }
    #site-shell .cr-location { font-size:10px; }
    #site-shell .cr-return { height:25px; }
    #site-shell .cr-circuit::before, #site-shell .cr-circuit::after { width:22px; }
    #site-shell .cr-circuit::before { border-radius:15px 0 0 15px; }
    #site-shell .cr-circuit::after { border-radius:0 15px 15px 0; }
    #site-shell .cr-return p { font-size:17px; }
    #site-shell .cr-potential { margin-top:39px; text-align:left; font-size:12px; }
    #site-shell .cr-footer { max-width:none; margin:0 24px; padding:24px 0 19px; grid-template-columns:1fr; grid-template-areas:"maker" "links" "notice"; gap:12px; }
    #site-shell .cr-footer p { justify-self:start; }
    #site-shell .cr-footer nav { justify-self:center; font-size:11px; gap:20px; }
  }
  @container (max-width:350px) {
    #site-shell .cr-header { padding-inline:16px; gap:8px; }
    #site-shell .cr-brand { font-size:16px; gap:5px; }
    #site-shell .cr-brand img { width:24px; height:24px; }
    #site-shell .cr-signin { font-size:11px; }
    #site-shell .cr-main { padding-inline:22px; }
    #site-shell #landing h1 { font-size:36px; }
    #site-shell #landing h2 { font-size:29px; }
  }

/* Run selection keeps columns aligned inside a horizontally scrollable table. */
.runs-editor{padding:24px;display:grid;gap:16px}
.runs-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.runs-editor label{display:grid;gap:6px;font-size:13px}
.runs-editor input:not([type=checkbox]),.runs-editor select{padding:10px 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px;max-width:100%}
.runs-editor input[type=search]{width:min(620px,100%)}
.runs-editor input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.runs-table{min-width:1250px}
.runs-table th button{white-space:nowrap;text-align:left;background:transparent;border:0;color:inherit;padding:4px 0}
.runs-table td{white-space:nowrap}
.runs-table th[aria-sort=ascending],.runs-table th[aria-sort=descending]{color:var(--accent)}
#runs-summary{line-height:1.7}

.runs-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.run-card{padding:20px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.run-card h3{margin:0 0 8px;overflow-wrap:anywhere}
.run-card p{color:var(--muted);margin:0 0 16px}
#runs-delete-prompt{border:1px solid var(--negative);padding:16px;border-radius:4px}