/* Shared tokens and components for the call-flow prototypes (see DESIGN.md). */
:root{
  --cobalt:#1F3FD6; --cobalt-tint:#E8ECFB; --on-cobalt-muted:#C8D1FA; --on-cobalt-quiet:rgba(255,255,255,.14);
  --ink:#0E1116; --ink-hover:#262B33; --ground:#F4F6F8; --muted:#525A66; --line:#D9DEE5; --wave:#C2C8D1; --wave-played:#687080;
  --card:#FFD23F; --card-edge:#8C6A00; --slip-tint:#FFF3C7;
  --end:#E5484D; --end-hover:#CE3A3F;
  --display:"Unbounded", system-ui, sans-serif;
  --text:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--wave-played) var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.field :focus-visible{outline-color:#fff}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--cobalt);text-underline-offset:3px}
[hidden]{display:none !important}

/* the one loud field */
.field{background:var(--cobalt);color:#fff;padding:max(12px, env(safe-area-inset-top)) 20px 26px}
.field-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:22px;color:inherit;text-decoration:none}
.field .icon-btn:first-child{margin-left:-12px}
.clock{font-family:var(--display);font-size:13px;font-weight:500;color:var(--on-cobalt-muted)}
.bug-title{margin:14px 0 0;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.bug-vs{margin:2px 0 0;font-size:15px;color:var(--on-cobalt-muted)}
.goal{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:15px;font-weight:600}

/* marks */
.m-dot{width:20px;height:20px;border-radius:10px;background:var(--cobalt);display:grid;place-items:center;color:#fff;flex:none}
.m-card{display:block;width:15px;height:20px;border-radius:2px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-edge);transform:rotate(-8deg);flex:none}

/* actions */
.actions{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--ground);padding:12px 20px max(12px, env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(14,17,22,.08);display:flex;flex-direction:column;align-items:center}
.primary{width:100%;min-height:56px;padding:10px 20px;text-align:center;line-height:1.25;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;background:var(--ink);color:#fff;font-weight:700;font-size:17px;text-decoration:none;transition:background .2s}
.primary:hover{background:var(--ink-hover);color:#fff}
.primary:active{transform:translateY(1px)}
.secondary{min-height:44px;display:flex;align-items:center;font-weight:600;font-size:15px}
.outline{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:22px;box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700;font-size:15px}
.note{padding:18px 20px 0;font-size:12px;color:var(--muted)}
.page{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:132px}

@media (min-width:900px){
  .page{padding-bottom:0}
  .actions{position:static;box-shadow:none;background:none;padding:0}
}

/* the felt yellow card (assets/v15), used for every slip mark in the app */
.m-card{background:url(assets/v15/card-yellow-s.webp) center/contain no-repeat !important;box-shadow:none !important;border-radius:0 !important;transform:none !important}

/* scripts the brand fonts don't cover get matched Noto faces (loaded by i18n/lang.js); CJK and Devanagari want calmer tracking */
html[lang=ja]{--display:"Unbounded","Noto Sans JP",system-ui,sans-serif;--text:"Manrope","Noto Sans JP",system-ui,sans-serif;line-break:strict}
html[lang=ko]{--display:"Unbounded","Noto Sans KR",system-ui,sans-serif;--text:"Manrope","Noto Sans KR",system-ui,sans-serif;word-break:keep-all}
html[lang=hi]{--display:"Unbounded","Noto Sans Devanagari",system-ui,sans-serif;--text:"Manrope","Noto Sans Devanagari",system-ui,sans-serif}
html:is([lang=ja],[lang=ko],[lang=hi]) :is(h1,h2,h3){letter-spacing:-.005em}