/* trial.css — shared Focus/Join shell. One system across focus.html + full.html.
   Tokens = the feedback-loop contract: change here, both surfaces stay aligned. */
:root {
  --carve-bg: #0a0a0f;
  --carve-ink: #eaf0ff;
  --carve-mute: rgba(178, 196, 232, .72);
  --carve-mute-soft: rgba(178, 196, 232, .55);
  --carve-panel: #272b3d;
  --carve-panel-deep: #1c1f2e;
  --carve-go: #7CE3B0;
  --carve-go-ink: #04110a;
  --carve-amber: #ff9f0a;
  --carve-amber-ink: #1a1000;
  --carve-over: #ff7a6b;
  --carve-over-ink: #1a0806;
  --carve-night: #8FB8F0;
  --carve-night-ink: #08111f;
  --carve-tasks: #5BA8FF;
  --carve-tasks-ink: #061018;
  --carve-violet: #B89CFF;
  --carve-beat: 200ms;
  --carve-font: 'Space Grotesk', system-ui, sans-serif;
}

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; padding: 0; height: 100%; background: #000;
      overscroll-behavior: none; font-family: 'Space Grotesk', system-ui, sans-serif; }
    html { overflow: hidden; }
    body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; color: #eaf0ff; }

    #app {
      position: fixed; inset: 0;
      display: flex; flex-direction: column;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    }
    #top {
      flex: none; display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 14px 18px 0;
    }
    #brand {
      font: 600 13px 'Space Grotesk'; letter-spacing: .14em; color: rgba(178,196,232,.55);
      text-transform: uppercase; text-decoration: none;
    }
    #signin, #btn-account, #btn-focus {
      flex: none; border: 0; border-radius: 12px; cursor: pointer;
      background: var(--carve-panel); color: var(--carve-ink); text-decoration: none;
      display: inline-flex; align-items: center; justify-content: center;
      font: 600 13px var(--carve-font); padding: 10px 14px; min-height: 40px;
    }
    #stats-hidden { display: none !important; }
    #modes {
      flex: none; display: flex; gap: 8px; padding: 10px 18px 0;
    }
    #modes button {
      flex: 1; border: 0; border-radius: 980px; min-height: 40px; cursor: pointer;
      background: #1c1c1e; color: rgba(178,196,232,.65);
      font: 600 13px 'Space Grotesk';
    }
    #modes button.on { background: #272b3d; color: #fff; }

    /* Start/End sit on Focus — not a third tab */
    #daybar {
      flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin: 4px 18px 0; padding: 8px 0;
      background: transparent; border: 0;
    }
    #daybar[hidden] { display: none !important; }
    .db-copy { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; }
    .db-copy b { font: 500 13px 'Space Grotesk'; color: rgba(234,240,255,.85); }
    .db-copy span { font: 400 12px 'Space Grotesk'; color: var(--carve-mute-soft); }
    .db-btn {
      border: 0; border-radius: 980px; min-height: 36px; cursor: pointer;
      font: 600 13px 'Space Grotesk'; padding: 8px 14px;
    }
    .db-go { background: #7CE3B0; color: #0a1410; }
    .db-end { background: #8FB8F0; color: #08111f; }
    .db-ack { background: #B89CFF; color: #120a1a; }
    .db-solid { background: #272b3d; color: #eaf0ff; }
    .db-more {
      flex: none; width: 44px; min-width: 44px; padding: 0;
      background: #272b3d; color: #eaf0ff; font: 700 16px/1 'Space Grotesk';
    }

    #stage { flex: 1; min-height: 0; position: relative; }
    #loop, #focus-gate, #review {
      position: absolute; inset: 0; display: none; overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    #focus-gate {
      flex-direction: column; align-items: center; justify-content: center;
      padding: 28px 22px; text-align: center; gap: 16px;
    }
    .fg-h {
      margin: 0; font: 600 26px/1.15 'Space Grotesk'; color: #fff; letter-spacing: -.02em;
    }
    .fg-blurb {
      margin: 0; max-width: 280px;
      font: 400 15px/1.45 'Space Grotesk'; color: rgba(178,196,232,.65);
    }

    /* shared loop tokens */
    .loop-shell {
      display: flex; flex-direction: column; justify-content: center;
      gap: 18px; padding: 28px 22px 36px; max-width: 360px; width: 100%; margin: 0 auto;
      min-height: 100%; animation: loopIn var(--carve-beat) ease both;
    }
    .loop-shell-welcome { justify-content: flex-start; padding-top: 36px; gap: 14px; }
    .loop-h {
      font: 500 13px 'Space Grotesk'; letter-spacing: .08em; text-transform: uppercase;
      color: var(--carve-mute); margin-bottom: 2px;
    }
    .loop-hero {
      font: 600 clamp(42px, 12vw, 56px)/1 'Space Grotesk'; color: #fff; letter-spacing: -.04em;
    }
    .loop-tag { font: 500 22px/1.25 'Space Grotesk'; color: #fff; letter-spacing: -.02em; }
    .loop-blurb { margin: 0; font: 400 16px/1.45 'Space Grotesk'; color: rgba(178,196,232,.78); }
    .loop-steps { margin: 4px 0 0; padding: 0 0 0 1.15em; font: 500 15px/1.55 'Space Grotesk'; color: #eaf0ff; }
    .loop-privacy { margin: 4px 0 8px; font: 400 12.5px/1.45 'Space Grotesk'; color: var(--carve-mute-soft); }
    .loop-label { font: 500 15px 'Space Grotesk'; color: #eaf0ff; }
    .loop-opt { font-weight: 400; color: var(--carve-mute-soft); }
    .loop-q { font: 500 28px/1.2 'Space Grotesk'; color: #fff; letter-spacing: -.02em; }
    .loop-task {
      font: 600 clamp(32px, 9vw, 48px)/1.15 'Space Grotesk'; color: #fff;
      letter-spacing: -.03em; word-break: break-word;
    }
    .loop-task-sm {
      font-size: clamp(20px, 5.5vw, 28px);
      font-weight: 600;
      color: rgba(234,240,255,.92);
    }
    .loop-timer {
      font: 300 clamp(40px, 12vw, 64px)/1 'Space Grotesk'; color: #fff;
      font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    }
    .loop-timer-sm {
      font-size: clamp(28px, 8vw, 40px);
      color: rgba(234,240,255,.9);
    }
    .loop-input, .loop-area {
      width: 100%; max-width: 320px;
      background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.18);
      border-radius: 0; color: #f5f5f7; font: 500 17px 'Space Grotesk';
      padding: 12px 2px; outline: none; resize: none;
    }
    .loop-input:focus, .loop-area:focus { border-bottom-color: rgba(124,227,176,.7); }
    .loop-row { display: flex; gap: 10px; max-width: 320px; }
    .loop-row-mood { flex-wrap: wrap; }
    .loop-btn {
      border: 0; border-radius: 980px; cursor: pointer;
      font: 600 15px 'Space Grotesk'; padding: 12px 18px; min-height: 44px;
    }
    .loop-btn:active { opacity: .85; transform: scale(.98); }
    .loop-btn-primary { width: auto; min-width: 160px; max-width: 100%; background: #7CE3B0; color: #04110a; }
    .loop-btn-try { width: auto; min-width: 120px; background: #fff; color: #000; }
    .loop-btn-yes { flex: 1; background: #7CE3B0; color: #04110a; }
    .loop-btn-no { flex: 1; background: #ff7a6b; color: #1a0808; }
    .loop-btn-mood { flex: 1; min-width: 88px; background: #5BA8FF; color: #061018; }
    .loop-btn-mood.mood-sad { background: #8FB8F0; color: #08111f; }
    .loop-btn-mood.mood-ok { background: #272b3d; color: #eaf0ff; }
    .loop-btn-mood.mood-good { background: #7CE3B0; color: #04110a; }
    .loop-btn-ghost { width: auto; min-width: 120px; background: #272b3d; color: #eaf0ff; }
    .loop-shell-welcome .loop-btn-primary { min-height: 48px; font-size: 16px; }
    .loop-shell-welcome .loop-blurb { margin: 0 0 6px; }
    .loop-q-sm { font: 500 22px/1.2 'Space Grotesk'; }
    .loop-area-opt { opacity: .85; font-size: 15px; }
    .loop-note-toggle {
      align-self: flex-start; border: 0; cursor: pointer;
      background: var(--carve-panel); color: var(--carve-ink);
      font: 600 13px var(--carve-font); padding: 8px 12px; border-radius: 10px; min-height: 36px;
    }

    .loop-shell-session { justify-content: flex-start; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .loop-session-body { display: flex; flex-direction: column; gap: 18px; flex: 1; }
    .loop-dock {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
      display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
      padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
      background: linear-gradient(to top, #000 75%, rgba(0,0,0,0));
    }
    .loop-dock .loop-btn-primary { width: auto; min-width: 140px; max-width: 100%; }
    .tb-end { background: #8FB8F0 !important; color: #08111f !important; }

    .loop-fade-in { animation: loopIn var(--carve-beat) ease both; }
    .gate-fade-in { animation: gateFade var(--carve-beat) ease both; }
    .fade-in { animation: gateFade var(--carve-beat) ease both; }
    @media (prefers-reduced-motion: reduce) {
      .loop-fade-in, .gate-fade-in, .fade-in { animation: none !important; }
      .loop-slot, .loop-len, .loop-progress i { transition: none !important; }
    }

    /* ring / timeline (Review) */
    .dv-toggle { display: flex; gap: 8px; margin-bottom: 4px; }
    .dv-tog {
      flex: 1; border: 0; border-radius: 12px; min-height: 40px; cursor: pointer;
      background: #191d2b; color: rgba(178,196,232,.65); font: 600 13px 'Space Grotesk';
    }
    .dv-tog.on { background: #272b3d; color: #fff; }
    .dv-viz { margin: 0 auto 6px; width: 100%; max-width: 420px; }
    .dv-ring { display: block; margin: 0 auto; }
    .dv-scroll {
      height: min(46vh, 380px); overflow: auto; border-radius: 0;
      background: transparent; border: 0;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      -webkit-overflow-scrolling: touch;
    }
    .dv-track { position: relative; margin-left: 64px; }
    .dv-hour {
      position: absolute; left: -64px; width: 58px; height: 0;
      border-top: 1px solid rgba(255,255,255,.06);
      font: 400 11px 'Space Grotesk'; color: rgba(178,196,232,.45);
    }
    .dv-hour span { position: relative; top: -7px; display: block; text-align: right; padding-right: 8px; }
    .dv-block {
      position: absolute; left: 8px; right: 10px; border-radius: 10px;
      padding: 6px 10px; overflow: hidden;
      display: flex; flex-direction: column; justify-content: center; gap: 2px;
    }
    .dv-block b { font: 600 13px 'Space Grotesk'; }
    .dv-block span { font: 400 11px 'Space Grotesk'; opacity: .8; }
    .dv-block.live { box-shadow: 0 0 0 2px rgba(255,159,10,.35); }
    .dv-now {
      position: absolute; left: 0; right: 0; height: 2px; background: #fff;
      box-shadow: 0 0 8px rgba(255,255,255,.5);
    }
    .dv-tl-head {
      display: flex; justify-content: space-between; align-items: center;
      font: 500 12px 'Space Grotesk'; color: rgba(178,196,232,.55); margin-bottom: 8px;
    }
    .dv-now-label { color: #fff; }
    .dv-hour-strong span { color: rgba(234,240,255,.75); font-weight: 500; }
    .dv-now span {
      position: absolute; right: 0; top: -10px;
      font: 600 10px 'Space Grotesk'; color: #fff; letter-spacing: .06em; text-transform: uppercase;
    }
    .dv-empty-track {
      position: absolute; left: 8px; right: 10px; top: 40%; text-align: center;
      font: 400 13px 'Space Grotesk'; color: rgba(178,196,232,.45);
    }

    /* review */
    #review { flex-direction: column; }
    .rv-shell {
      max-width: 360px; width: 100%; margin: 0 auto; padding: 20px 22px 36px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .rv-title { font: 600 24px/1.15 'Space Grotesk'; color: #fff; letter-spacing: -.02em; }
    .rv-path {
      margin: -6px 0 0; font: 400 13px/1.4 'Space Grotesk'; color: rgba(178,196,232,.55);
    }
    .rv-viz-swap {
      align-self: flex-start; border: 0; cursor: pointer;
      background: #272b3d; color: #eaf0ff; border-radius: 10px;
      padding: 8px 12px; font: 600 12px 'Space Grotesk'; min-height: 36px;
    }
    .rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
    .rv-item { background: transparent; border-radius: 0; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .rv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 15px 'Space Grotesk'; color: #fff; }
    .rv-top b { flex: 1; min-width: 0; font-weight: 600; }
    .rv-chip {
      flex: none; font: 600 10px/1 'Space Grotesk'; letter-spacing: .06em; text-transform: uppercase;
      padding: 5px 8px; border-radius: 6px; background: #1c1f2e; color: rgba(234,240,255,.72);
    }
    .rv-chip[data-topic="food"] { background: #2a2210; color: #FFB84D; }
    .rv-chip[data-topic="movement"] { background: #0f241c; color: #7CE3B0; }
    .rv-chip[data-topic="work"] { background: #2a1c08; color: #ff9f0a; }
    .rv-chip[data-topic="study"] { background: #0e1a2a; color: #5BA8FF; }
    .rv-chip[data-topic="social"] { background: #241018; color: #E8A0BF; }
    .rv-chip[data-topic="money"] { background: #0f241c; color: #7CE3B0; }
    .rv-chip[data-topic="rest"] { background: #121a28; color: #8FB8F0; }
    .rv-chip[data-topic="home"] { background: #1a1428; color: #B89CFF; }
    .rv-mark { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
    .rv-mark.ok { background: #7CE3B0; color: #0a1410; }
    .rv-mark.no { background: #ff7a6b; color: #1a0808; }
    .rv-mark.live { background: #ff9f0a; color: #1a1000; font-size: 10px; }
    .rv-live { box-shadow: none; }
    .rv-meta { margin-top: 6px; font: 400 12.5px 'Space Grotesk'; color: rgba(178,196,232,.55); }
    .rv-cat {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 18px 0 6px; margin-top: 2px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      font: 600 11px/1 'Space Grotesk'; letter-spacing: .08em; text-transform: uppercase;
      color: rgba(178,196,232,.45);
    }
    .rv-cat span:last-child { font-weight: 500; color: rgba(178,196,232,.35); text-transform: none; letter-spacing: 0; }
    .rv-empty { padding: 18px 0; text-align: left; color: var(--carve-mute-soft); font: 400 14px 'Space Grotesk'; }
    .rv-untracked .rv-top b { font-weight: 500; color: rgba(234,240,255,.88); }
    .rv-mark.untracked { background: #272b3d; color: rgba(184,156,255,.9); font-size: 13px; }
    .rv-extra { padding-left: 12px; margin-left: 10px; border-left: 2px solid rgba(184,156,255,.35); }
    .rv-end { background: #8FB8F0 !important; color: #08111f !important; width: auto !important; min-width: 160px; }
    .rv-actions {
      display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
      padding-top: 8px;
    }
    .rv-actions .loop-btn-ghost { min-width: 160px; }
    .rv-more-tog {
      border: 0; background: #1c1f2e; color: rgba(234,240,255,.75); border-radius: 10px;
      padding: 10px 14px; font: 600 13px 'Space Grotesk'; cursor: pointer; min-height: 40px;
    }
    .rv-more { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .rv-more[hidden] { display: none !important; }

    .loop-recent {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px;
    }
    .loop-chip {
      border: 0; cursor: pointer; text-align: left;
      background: #272b3d; color: #eaf0ff; border-radius: 10px;
      padding: 10px 12px; font: 500 13px/1.25 'Space Grotesk';
      display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%;
    }
    .loop-chip span {
      font: 600 10px/1 'Space Grotesk'; letter-spacing: .08em; text-transform: uppercase;
      color: var(--carve-mute-soft);
    }
    .loop-topic {
      margin: -4px 0 0; font: 500 12px 'Space Grotesk'; color: #ff9f0a;
    }
    .loop-slots {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2px;
    }
    .loop-slot {
      border: 0; cursor: pointer; border-radius: 999px;
      min-height: 40px; min-width: 44px; padding: 8px 14px;
      font: 600 13px 'Space Grotesk'; letter-spacing: -.01em;
      background: #272b3d; color: #eaf0ff;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }
    .loop-slot.on {
      background: #ff9f0a; color: #1a1000;
      transform: scale(1.05);
    }
    .loop-slot.loop-slot-pop { transform: scale(1.08); }
    .loop-slot-hint {
      margin: 0 0 6px; font: 500 12px/1.35 'Space Grotesk';
      color: rgba(178,196,232,.55); min-height: 1.2em;
    }
    .loop-slot-hint.locked { color: #7CE3B0; }
    .loop-plan-top {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .loop-len {
      border: 0; cursor: pointer; border-radius: 999px;
      min-height: 36px; padding: 8px 12px;
      font: 600 12px 'Space Grotesk'; letter-spacing: .04em; text-transform: uppercase;
      background: #ff9f0a; color: #1a1000;
      transition: transform .18s ease, opacity .18s ease;
    }
    .loop-len:active { transform: scale(.97); opacity: .9; }
    .loop-progress {
      width: 100%; max-width: 280px; height: 6px; border-radius: 999px;
      background: #1c1f2e; overflow: hidden;
    }
    .loop-progress i {
      display: block; height: 100%; width: 0; border-radius: 999px;
      background: #ff9f0a; transition: width .2s linear;
    }
    .loop-progress i.over { background: #ff7a6b; }

    .end-sheet {
      position: fixed; inset: 0; z-index: 60;
      display: flex; align-items: flex-end; justify-content: center;
      background: rgba(0,0,0,.75);
    }
    .end-sheet-inner {
      width: 100%; max-width: 400px;
      background: #12151f; border-radius: 20px 20px 0 0;
      padding: 24px 22px calc(20px + env(safe-area-inset-bottom));
      display: flex; flex-direction: column; gap: 14px;
    }
    .end-sheet-compact { gap: 10px; }
    .ov-item { width: 100%; text-align: center; }

    @keyframes loopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes gateFade { from { opacity: 0; } to { opacity: 1; } }
    /* Shared by feedback.js / sync.js / unlocks / controls — lived only in orphaned classic.html before. */
    @keyframes hudFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes hudRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    @media (prefers-reduced-motion: reduce) {
      .loop-fade-in, .gate-fade-in, .fade-in { animation: none !important; }
      .loop-slot, .loop-len, .loop-progress i { transition: none !important; }
    }