/* ============================================================
   /app/ — interactive app demo (2026-09-16)
   A sample-data walkthrough of the Standards app that lives on the page itself: pick a shooter
   type, take a five-stop tour, explore freely, then choose a plan. It is NOT the live app --
   nothing here signs in, loads the real app, or touches an account. Scoped under .c1d so
   nothing leaks into the rest of the site.
   Colors inside the phone mirror the app itself (its green is the app's own --green); the bezel
   and phone radii only exist to draw a device, not part of the site system.
   ============================================================ */

.c1d-sec{border-bottom:1px solid var(--line);background:var(--graphite-3);}
.c1d{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px;align-items:start;margin-top:36px;}
.c1d-side{display:grid;gap:26px;min-width:0;}
.c1d-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);}
.c1d-q{font-size:19px;font-weight:700;margin-top:6px;}

.c1d-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.c1d-chip{font:600 14px 'Inter',sans-serif;padding:10px 16px;border-radius:999px;border:1px solid var(--line);color:var(--bone-dim);background:var(--graphite-2);cursor:pointer;transition:border-color .2s,color .2s,background .2s;}
.c1d-chip:hover{border-color:var(--slate-2);color:var(--bone);}
.c1d-chip[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--graphite);}
.c1d-chip:focus-visible,.c1d-step:focus-visible,.c1d-btn:focus-visible,.c1d-tab:focus-visible,.c1d-spot:focus-visible,.c1d-plan:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

.c1d-steps{display:grid;gap:8px;margin-top:12px;}
.c1d-step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--graphite-2);color:var(--bone);cursor:pointer;font:inherit;transition:border-color .2s,background .2s,opacity .2s;}
.c1d-step:hover{border-color:var(--slate);}
.c1d-step .n{font:700 12px 'JetBrains Mono',monospace;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--slate);color:var(--bone-dim);}
.c1d-step b{display:block;font-size:15px;}
.c1d-step .d{display:block;font-size:13px;color:var(--slate-2);margin-top:2px;}
.c1d-step[aria-current="true"]{border-color:var(--orange);background:linear-gradient(90deg,rgba(201,83,30,.16),transparent 70%);}
.c1d-step[aria-current="true"] .n{background:var(--orange);border-color:var(--orange);color:var(--graphite);}
.c1d-step.done .n{border-color:#3FA66A;color:#3FA66A;}
.c1d-steps.off .c1d-step{opacity:.45;pointer-events:none;}

.c1d-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}
.c1d-btn{font:700 12px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:4px;border:1px solid var(--orange);background:var(--orange);color:var(--graphite);cursor:pointer;transition:background .15s,transform .15s var(--ease-out);}
.c1d-btn:hover{background:#e0672f;}
.c1d-btn:active{transform:scale(.97);}
.c1d-btn.ghost{background:transparent;border-color:var(--slate);color:var(--bone);}
.c1d-btn.ghost:hover{border-color:var(--bone);}
.c1d-btn:disabled{opacity:.35;cursor:default;}
.c1d-link{background:none;border:0;padding:0;font:500 13px 'Inter',sans-serif;color:var(--slate-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.c1d-link:hover{color:var(--bone);}

/* plan choice at the end */
.c1d-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.c1d-plan{display:grid;gap:6px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--graphite-2);color:var(--bone);font:inherit;cursor:pointer;transition:border-color .2s,transform .2s var(--ease-out);}
.c1d-plan:hover{border-color:var(--orange);transform:translateY(-2px);}
.c1d-plan h4{font-size:18px;font-weight:800;text-transform:uppercase;margin:0;}
.c1d-plan .pr{font:700 14px 'JetBrains Mono',monospace;color:var(--orange);}
.c1d-plan p{font-size:13.5px;color:var(--bone-dim);margin:0;}
.c1d-plan .go{font:700 11px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);margin-top:4px;}
.c1d-note{font-size:12.5px;color:var(--slate-2);}

/* ---------------- phone ---------------- */
.c1d-phonewrap{position:sticky;top:96px;display:grid;justify-items:center;gap:10px;}
.c1d-phone{width:320px;max-width:100%;aspect-ratio:320/650;border-radius:44px;background:#0B0D0F;padding:11px;box-shadow:0 0 0 1px #33393F,0 30px 60px rgba(0,0,0,.55),inset 0 0 0 2px #1E2327;}
.c1d-screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--graphite);display:flex;flex-direction:column;color:var(--bone);font-size:13px;line-height:1.45;}
.c1d-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:#000;z-index:5;}
.c1d-sbar{flex:0 0 auto;height:42px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 22px 4px;font:600 11px 'JetBrains Mono',monospace;}
.c1d-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 16px 10px;border-bottom:1px solid var(--line);}
.c1d-head .t{font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;}
.c1d-av{width:28px;height:28px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--graphite);}
.c1d-body{flex:1 1 auto;overflow:auto;padding:14px 14px 12px;display:grid;align-content:start;gap:10px;scrollbar-width:none;}
.c1d-body::-webkit-scrollbar{display:none;}
.c1d-tabs{flex:0 0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);background:var(--graphite-2);padding:6px 4px 16px;}
.c1d-tab{display:grid;justify-items:center;gap:3px;background:none;border:0;font:600 9.5px 'Inter',sans-serif;letter-spacing:.04em;color:var(--slate-2);padding:4px 0;cursor:pointer;}
.c1d-tab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;}
.c1d-tab[aria-current="true"]{color:var(--orange);}

.c1d-card{position:relative;background:var(--graphite-2);border:1px solid var(--line);border-radius:10px;padding:12px;transition:box-shadow .3s;}
.c1d-card.hl,.c1d-stats.hl{box-shadow:0 0 0 2px var(--orange);}
.c1d-eb{font:9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);}
.c1d-big{font-size:17px;font-weight:800;line-height:1.2;margin-top:3px;}
.c1d-sm{font-size:11.5px;color:var(--bone-dim);}
.c1d-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.c1d-pill{font:9.5px 'JetBrains Mono',monospace;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--bone-dim);white-space:nowrap;}
.c1d-pill.or{border-color:var(--orange);color:var(--orange);}
.c1d-pill.gd{border-color:#3FA66A;color:#3FA66A;}
.c1d-cta{display:block;width:100%;text-align:center;background:var(--orange);color:var(--graphite);border:0;font:700 11.5px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:10px;border-radius:8px;margin-top:10px;cursor:pointer;}
.c1d-cta:disabled{opacity:.45;cursor:default;}
.c1d-drill{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:12px;}
.c1d-drill:first-child{border-top:0;}
.c1d-drill .cat{font-size:10px;color:var(--slate-2);white-space:nowrap;}
.c1d-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-radius:10px;transition:box-shadow .3s;}
.c1d-stat{background:var(--graphite-2);border:1px solid var(--line);border-radius:10px;padding:9px 6px;text-align:center;}
.c1d-stat b{display:block;font:700 16px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.c1d-stat span{font-size:9.5px;color:var(--slate-2);}

.c1d-reps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px;}
.c1d-rep{position:relative;background:var(--graphite-3);border:1px solid var(--line);border-radius:7px;text-align:center;padding:7px 0 6px;font:11.5px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.c1d-rep small{display:block;font:8.5px 'Inter',sans-serif;color:var(--slate-2);}
.c1d-rep .mk{position:absolute;top:-6px;right:-5px;width:15px;height:15px;border-radius:50%;font-size:9px;line-height:15px;color:#fff;}
.c1d-rep .mk.ok{background:#3FA66A;} .c1d-rep .mk.no{background:var(--slate);}
.c1d-rep.live{border-color:var(--orange);background:rgba(201,83,30,.14);}
.c1d-timer{display:grid;justify-items:center;gap:2px;padding:10px 0 2px;}
.c1d-clock{font:700 34px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.c1d-clock.beep{color:var(--orange);}
.c1d-timer .msg{font-size:10.5px;color:var(--slate-2);text-align:center;min-height:15px;}

/* all-time totals with twelve weekly bars under each (matches the app's Stats screen) */
.c1d-tot{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:8px;}
.c1d-totc{min-width:0;}
.c1d-totc .k{display:block;font:8.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);}
.c1d-totc b{display:block;font:700 16px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;margin-top:1px;}
.c1d-wk{display:block;width:100%;height:22px;margin-top:5px;}
.c1d-chart{width:100%;height:auto;display:block;}
.c1d-chart text{font:8.5px 'JetBrains Mono',monospace;fill:var(--slate-2);}
.c1d-prs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}

.c1d-sum{margin:8px 0 0;display:grid;gap:2px;}
.c1d-sum dt{font:8.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-top:6px;}
.c1d-sum dt:first-child{margin-top:0;}
.c1d-sum dt.nx{color:var(--orange);}
.c1d-sum dd{margin:0;font-size:11.5px;color:var(--bone);}
.c1d-quote{border-left:2px solid var(--orange);padding-left:10px;font-size:11.5px;color:var(--bone);margin-top:8px;}
.c1d-list{margin:6px 0 0;padding-left:16px;font-size:11.5px;color:var(--bone-dim);display:grid;gap:2px;}

.c1d-spot{position:absolute;top:-9px;right:-9px;z-index:4;width:24px;height:24px;border-radius:50%;border:0;background:var(--orange);color:var(--graphite);font:700 13px 'Inter',sans-serif;line-height:24px;cursor:pointer;animation:c1dPulse 1.8s var(--ease-out) infinite;}
@keyframes c1dPulse{0%{box-shadow:0 0 0 0 rgba(201,83,30,.55);}100%{box-shadow:0 0 0 12px rgba(201,83,30,0);}}
.c1d-tip{position:absolute;left:10px;right:10px;bottom:72px;z-index:6;background:var(--bone);color:var(--graphite);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.45;box-shadow:0 10px 24px rgba(0,0,0,.5);animation:c1dRise .35s var(--ease-out);}
.c1d-tip b{display:block;font-size:12.5px;margin-bottom:2px;}
@keyframes c1dRise{from{opacity:.4;transform:translateY(8px);}to{opacity:1;transform:none;}}
.c1d-cap{font:11px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--slate-2);text-align:center;}

@media(max-width:900px){
  .c1d{grid-template-columns:1fr;gap:36px;}
  .c1d-phonewrap{position:static;}
}
@media(max-width:520px){
  .c1d-plans{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .c1d *{animation:none!important;transition:none!important;}
}