/* v359 interface foundation. Loaded after legacy screen styles: all new shared
   presentation belongs here, with screen details in interface-pages/training.
   Keep visibility, media rendering and application state in their existing modules. */
:root {
  --p-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --p-bg:#151a19; --p-paper:#202725; --p-raised:#2a3330;
  --p-ink:#f0f4f1; --p-muted:#a8b5ad; --p-line:#ffffff1c; --p-accent:#93c9b0;
  --pc-bg:var(--p-bg); --pc-paper:var(--p-paper); --pc-ink:var(--p-ink);
  --pc-line:var(--p-line); --pc-edge:transparent; --pc-shadow:none; --pc-depth:0px;
  --pc-mint:#2b3f35; --pc-citrus:#373b2e; --pc-peach:#39342e; --pc-blue:#2b383d; --pc-coral:var(--p-accent);
  --ui-bg:var(--p-bg); --ui-surface:var(--p-paper); --ui-surface-raised:var(--p-raised);
  --ui-text:var(--p-ink); --ui-muted:var(--p-muted); --ui-border:var(--p-line); --ui-accent:var(--p-accent);
  --interface-action:#b4dfc8; --interface-on-action:#142d22;
  --interface-selected:#293f34; --interface-shadow:0 2px 12px #0000000d;
  color-scheme:dark;
}
:root[data-theme="soft"] {
  --p-bg:#f5f6f4; --p-paper:#ffffff; --p-raised:#edf0ed;
  --p-ink:#1c2923; --p-muted:#5f6e65; --p-line:#2036291c; --p-accent:#276449;
  --pc-mint:#e6efe8; --pc-citrus:#edf0e7; --pc-peach:#f1eeea; --pc-blue:#eaf0f2;
  --interface-action:#234b38; --interface-on-action:#fff;
  --interface-selected:#e8f1eb; --interface-shadow:0 2px 12px #152e1f04;
  color-scheme:light;
}
body { font-family:var(--p-font); font-weight:400; letter-spacing:0; }
button,input,select,textarea { font-family:var(--p-font); }
:is(button,a,summary,input,textarea,select):focus-visible { outline:2px solid var(--p-accent); outline-offset:4px; }
::selection { background:var(--interface-selected); color:var(--p-ink); }
/* Consistent navigation and controls. The live camera keeps its own colors. */
.screen:not(#screen-training) .back-btn {
  min-height:44px; padding:8px 12px; border:0; border-radius:10px;
  background:transparent; color:var(--p-accent); box-shadow:none; font:500 14px/1.5 var(--p-font);
}
:is(#screen-menu,#screen-auth,#screen-settings,#screen-journal,#screen-round-setup,#screen-gym-timer,#screen-ai-menu,#screen-challenge,#screen-tips,#screen-result,#screen-voice-setup,#consent-gate,#control-guide,#daily-wrap) :is(.primary-btn,.secondary-btn) {
  min-height:50px; padding:13px 20px; border:1px solid transparent; border-radius:13px;
  font:600 15px/1.5 var(--p-font); letter-spacing:0; box-shadow:none; text-shadow:none;
}
:is(#screen-auth,#screen-settings,#screen-journal,#screen-round-setup,#screen-gym-timer,#screen-ai-menu,#screen-challenge,#screen-tips,#screen-result,#screen-voice-setup,#consent-gate,#control-guide,#daily-wrap) .primary-btn { background:var(--interface-action); color:var(--interface-on-action); }
:is(#screen-auth,#screen-settings,#screen-journal,#screen-round-setup,#screen-gym-timer,#screen-ai-menu,#screen-challenge,#screen-tips,#screen-result,#screen-voice-setup,#consent-gate,#control-guide,#daily-wrap) .secondary-btn { background:var(--p-raised); color:var(--p-ink); }
:is(#screen-auth,#screen-settings,#screen-journal,#screen-round-setup,#screen-gym-timer,#screen-ai-menu,#screen-challenge,#screen-tips,#screen-result,#screen-voice-setup) :is(.primary-btn,.secondary-btn):not(:disabled):active { transform:scale(.985); box-shadow:none; }
#daily-navigation {
  width:min(480px,calc(100% - 24px)); padding:5px 8px; gap:2px;
  bottom:max(10px,env(safe-area-inset-bottom)); border:1px solid var(--p-line); border-radius:22px;
  background:var(--p-paper); box-shadow:0 5px 24px #0b251217;
}
#daily-navigation button { position:relative; min-height:54px; gap:4px; border:0; border-radius:14px; font:500 10px/1.3 var(--p-font); color:var(--p-muted); background:transparent; }
#daily-navigation button[aria-current="page"] { background:transparent; color:var(--p-accent); font-weight:700; box-shadow:none; }
#daily-navigation button[aria-current="page"]::after { content:''; position:absolute; bottom:2px; width:3px; height:3px; border-radius:50%; background:currentColor; }
#daily-navigation svg { width:22px; height:22px; stroke-width:1.65; }
/* Home: a clear starting point, then useful tools. No ornamental headings. */
#screen-menu { --home-border:var(--p-line); background:var(--p-bg); }
#screen-menu .menu-content { padding-top:20px; padding-inline:max(20px,env(safe-area-inset-left),env(safe-area-inset-right)); }
#screen-menu :is(.menu-top,.home-heading,.home-workspace,.home-footer) { max-width:1080px; }
#screen-menu .menu-top { margin-bottom:20px; padding-bottom:0; border:0; }
#screen-menu .home-brand { grid-template-columns:30px 1fr; align-items:center; gap:8px; }
#screen-menu .home-brand-symbol { width:30px; height:30px; border-radius:9px; padding:5px; background:var(--interface-action); color:var(--interface-on-action); }
#screen-menu .brand-mark { font:700 26px/1 var(--p-font); letter-spacing:-1.4px; }
#screen-menu .brand-tag { display:none; }
#screen-menu .home-toolbar { gap:6px; }
#screen-menu .home-toolbar .lang-mini { border:0; background:none; padding:0; gap:0; }
#screen-menu .home-toolbar .lang-btn { min-width:44px; min-height:44px; flex-shrink:0; font-weight:500; font-size:11px; border-radius:10px; padding-inline:9px; }
#screen-menu .menu-card.menu-shortcut { border:0; border-radius:12px; background:transparent; width:44px; height:44px; min-height:44px; color:var(--p-muted); }
#screen-menu .home-heading { position:relative; border:0; margin:0 auto 28px; padding:4px 0 0; }
#screen-menu .home-eyebrow { display:none; }
.home-date { margin:0 0 8px; color:var(--p-muted); font:500 12px/1.5 var(--p-font); }
#screen-menu .home-heading h1 { max-width:calc(100% - 45px); font:700 clamp(26px,6.8vw,38px)/1.4 var(--p-font); letter-spacing:-.035em; }
#screen-menu .home-heading h1 em { display:inline; font-style:normal; }
#screen-menu .home-subtitle { margin-top:10px; font:400 13px/1.7 var(--p-font); max-width:520px; }
#screen-menu button.home-craft-emblem { top:25px; right:0; width:44px; border-radius:50%; background:var(--p-raised); overflow:hidden; }
#screen-menu .home-craft-emblem img { border-radius:50%; }
#screen-menu .home-workspace { gap:32px; }
#screen-menu .home-start-path-heading { margin-bottom:14px; display:block; }
#screen-menu :is(.home-start-path-heading,.home-coaching-heading) h2 { margin:0; font:600 19px/1.5 var(--p-font); letter-spacing:-.02em; }
#screen-menu :is(.home-start-path-heading,.home-coaching-heading) p { margin-top:6px; font:400 13px/1.7 var(--p-font); }
#screen-menu :is(.home-start-kicker,.home-coaching-heading > span,.companion-kicker,.home-feature-caption,.home-note-kicker,.playground-kicker) { display:none; }
#screen-menu .home-start-path-heading p { display:none; }
#screen-menu .home-start-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#screen-menu .home-start-options button {
  grid-template-columns:minmax(0,1fr); grid-template-rows:120px auto; min-height:0;
  gap:14px; padding:10px 10px 16px; align-items:start; align-content:start;
  border:1px solid var(--p-line); border-radius:18px; background:var(--p-paper); box-shadow:var(--interface-shadow);
}
#screen-menu .home-start-options .home-start-copy { grid-row:2; padding:0 4px; }
#screen-menu .home-start-options .home-start-art { grid-row:1; width:100%; height:120px; border-radius:11px; }
#screen-menu .home-start-art-learn > img { object-position:50% 0%; }
#screen-menu .home-start-options strong { font:600 16px/1.5 var(--p-font); letter-spacing:-.025em; }
#screen-menu .home-start-options small { font:400 12px/1.65 var(--p-font); margin-top:6px; }
#screen-menu .home-start-options [data-home-start="move"] { background:var(--p-paper); }
#screen-menu .home-start-art-move { background:var(--interface-selected); }
#screen-menu .home-start-art-move > svg { width:110px; display:block; margin:auto; }
#screen-menu .home-art-time { font:500 27px/1 var(--p-font); inset:37% 0 auto; letter-spacing:-.05em; }
#screen-menu .home-art-time-note { display:none; }
#screen-menu .home-start-arrow { display:none; }
#screen-menu .home-start-options [data-home-start="ask"] { grid-column:1/-1; grid-template-columns:1fr 52px; grid-template-rows:auto; padding:16px; gap:12px; align-items:center; }
#screen-menu [data-home-start="ask"] .home-start-copy { grid-row:1; padding:0; }
#screen-menu [data-home-start="ask"] .home-start-art { width:52px; height:56px; border-radius:12px; background:var(--p-raised); }
#screen-menu .home-start-art-ask > img { padding:4px; }
#screen-menu .home-art-chat { display:none; }
#screen-menu :is(.home-note,.home-companion,.home-camera-free,.home-use-guide,.home-progress) { border:1px solid var(--p-line); box-shadow:none; border-radius:18px; background:var(--p-paper); }
#screen-menu :is(.home-note,.home-companion,.home-camera-free) { padding:20px; }
#screen-menu :is(.home-note h2,.home-camera-free h2,.companion-hello p,.home-companion h2) { font:600 17px/1.5 var(--p-font); letter-spacing:-.02em; }
#screen-menu :is(.home-note-description,.home-camera-free > p,.companion-note) { font:400 12px/1.75 var(--p-font); }
#screen-menu .home-note-top { padding-bottom:0; border:0; }
#screen-menu .home-note-action { background:var(--interface-action); color:var(--interface-on-action); font-weight:600; }
#screen-menu .home-note-meta { font-size:11px; }
#screen-menu .companion-hello { grid-template-columns:64px 1fr; gap:14px; margin-bottom:18px; }
#screen-menu .companion-portrait { width:64px; height:64px; padding:0; border:0; border-radius:16px; background:var(--p-raised); }
#screen-menu .companion-portrait img { width:64px; height:64px; object-fit:contain; }
#screen-menu .companion-choices { gap:4px; padding:4px; background:var(--p-raised); border-radius:12px; }
#screen-menu .companion-choices button { min-height:44px; border:0; border-radius:9px; background:transparent; color:var(--p-muted); font-weight:500; box-shadow:none; padding:8px 4px; }
#screen-menu .companion-choices button[aria-pressed="true"] { background:var(--p-paper); color:var(--p-ink); box-shadow:0 1px 4px #00000012; }
#screen-menu .companion-reply { padding:12px 0 0; border:0; background:none; font:400 13px/1.8 var(--p-font); }
#screen-menu .home-essential { gap:0; }
#screen-menu .home-essential .menu-card { min-height:76px; padding:16px 0; border:0; border-top:1px solid var(--p-line); border-radius:0; background:transparent; box-shadow:none; }
#screen-menu .home-essential .card-icon { width:32px; color:var(--p-accent); background:none; }
#screen-menu .home-essential .card-title { font:600 14px/1.6 var(--p-font); }
#screen-menu .home-essential .card-desc { font:400 12px/1.6 var(--p-font); }
#screen-menu .home-essential .three-card-time { font:600 22px/1 var(--p-font); color:var(--p-accent); }
#screen-menu .home-progress { padding:20px; }
#screen-menu .home-progress-heading { font:500 13px/1.7 var(--p-font); }
#screen-menu .home-progress-value { font-weight:600; }
#screen-menu .home-progress-track { gap:5px; }
#screen-menu .home-progress-track span { height:5px; border:0; border-radius:3px; background:var(--p-raised); box-shadow:none; }
#screen-menu .home-progress-track span.is-complete { background:var(--p-accent); }
#screen-menu .home-progress-action { font-weight:500; font-size:13px; }
#screen-menu .menu-secondary { gap:12px; }
#screen-menu .home-coaching-heading { margin:0 0 2px; }
#screen-menu .menu-secondary > .menu-card { min-height:176px; padding:22px 12px 18px; gap:13px; border:1px solid var(--p-line); border-radius:18px; background:var(--p-paper); box-shadow:var(--interface-shadow); }
#screen-menu .menu-secondary > .menu-card .card-icon { width:34px; height:34px; min-height:34px; padding:4px; border:0; border-radius:0; background:transparent; color:var(--p-accent); box-shadow:none; }
#screen-menu .menu-secondary .card-title { font:600 14px/1.6 var(--p-font); letter-spacing:-.02em; }
#screen-menu .menu-secondary .card-desc { font:400 12px/1.65 var(--p-font); text-wrap:pretty; }
#screen-menu .menu-secondary .vc-entry-arrow { top:12px; right:12px; font-size:13px; opacity:.65; }
#screen-menu .home-workspace > .menu-hero { height:340px; border-radius:20px; }
/* Legacy hero uses !important colors. This is the only same-priority override. */
#screen-menu #menu-today-card { border:0 !important; border-radius:15px; box-shadow:none; padding:18px; background:#ffffffed !important; color:#1c2923 !important; }
#screen-menu #menu-today-card :is(.card-title,.card-desc,.today-meta,.home-start,.home-ai-requirement) { color:#1c2923; }
#screen-menu #menu-today-card .card-title { font:600 22px/1.4 var(--p-font); }
#screen-menu #menu-today-card .card-desc { font-size:13px; }
#screen-menu #menu-today-card .today-kicker { display:none; }
#screen-menu #menu-today-card .home-start { font-weight:600; border:0; }
#screen-menu #menu-today-card .home-ai-requirement { color:#56685c; font:400 11px/1.7 var(--p-font); }
#screen-menu .menu-more { border-top:1px solid var(--p-line); }
#screen-menu .menu-more-sum { padding:14px 0; font:600 15px/1.6 var(--p-font); }
#screen-menu .menu-more-grid .menu-card { border:1px solid var(--p-line); border-radius:14px; padding:16px; box-shadow:none; background:var(--p-paper); }
#screen-menu .menu-more-grid .card-title { font:600 14px/1.6 var(--p-font); }
#screen-menu .menu-more-grid .card-desc { font:400 12px/1.7 var(--p-font); }
#screen-menu .menu-more-grid .card-icon { color:var(--p-accent); }
#screen-menu .home-use-guide { padding:0; }
#screen-menu .home-use-guide summary { padding:18px; font-weight:500; }
#screen-menu .playground-copy h2 { font:600 21px/1.5 var(--p-font); letter-spacing:-.025em; }
#screen-menu .playground-copy p { font:400 13px/1.75 var(--p-font); }
#screen-menu .playground-card { border:1px solid var(--p-line); border-radius:18px; box-shadow:none; }
#screen-menu .playground-card strong { font-weight:600; }
#screen-menu .home-footer { display:none; }
@media(min-width:900px) {
  #screen-menu .menu-content { padding-top:28px; }
  #screen-menu .home-heading { padding:16px 0 4px; margin-bottom:32px; }
  #screen-menu .home-heading h1 { font-size:38px; }
  #screen-menu button.home-craft-emblem { width:56px; top:25px; }
  #screen-menu .home-workspace { gap:32px; }
  #screen-menu .home-start-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  #screen-menu .home-start-options button, #screen-menu .home-start-options [data-home-start="ask"] { grid-column:auto; grid-template-columns:1fr; grid-template-rows:170px auto; padding:12px 12px 20px; gap:18px; }
  #screen-menu .home-start-options .home-start-art, #screen-menu [data-home-start="ask"] .home-start-art { grid-row:1; width:100%; height:170px; }
  #screen-menu [data-home-start="ask"] .home-start-copy { grid-row:2; padding:0 6px; }
  #screen-menu .home-start-options .home-start-copy { padding:0 6px; }
  #screen-menu .home-start-art-move > svg { width:160px; }
  #screen-menu .home-art-time { font-size:36px; }
  #screen-menu .home-start-options strong { font-size:19px; }
  #screen-menu .home-start-options small { font-size:13px; }
  #screen-menu .home-workspace > .menu-hero { height:420px; }
  #screen-menu .menu-secondary > .menu-card { min-height:172px; }
}
@media(max-width:359px) {
  #screen-menu .menu-content { padding-inline:16px; }
  #screen-menu .brand-mark { font-size:24px; }
  #screen-menu .home-heading h1 { font-size:25px; }
  #screen-menu .home-start-options { gap:10px; }
  #screen-menu .home-start-options strong { font-size:14px; }
  #screen-menu .home-start-options small { font-size:11px; }
  #screen-menu .home-start-options button { grid-template-rows:104px auto; }
  #screen-menu .home-start-options .home-start-art { height:104px; }
  #screen-menu .home-start-art-move > svg { width:96px; }
  #screen-menu .home-art-time { font-size:24px; }
  #screen-menu .menu-secondary > .menu-card { padding-inline:10px; }
  #screen-menu .menu-secondary .card-title { font-size:13px; }
}
@media(hover:hover) and (pointer:fine) {
  #screen-menu .home-start-options button:hover { transform:translateY(-2px); box-shadow:0 4px 16px #102c1710; border-color:var(--p-accent); }
  #daily-navigation button:hover { background:var(--p-raised); }
}
@media(prefers-reduced-motion:reduce) {
  #screen-menu .home-start-options button:hover, #screen-menu .home-start-options button:active,
  :is(#screen-auth,#screen-settings,#screen-journal,#screen-round-setup,#screen-gym-timer,#screen-ai-menu,#screen-challenge,#screen-tips,#screen-result,#screen-voice-setup) :is(.primary-btn,.secondary-btn):not(:disabled):active { transform:none; }
}