/* ROMVI R16 · Visual foundation / 2026-10-13
   Single final override layer for legacy multi-layer R15 CSS.
   Theme-safe, readable and restrained. No application logic or access policy here.
   When R15 CSS is consolidated, move these declarations to component tokens. */
:root{
  --r16-ease:cubic-bezier(.2,.7,.25,1);
  --r16-motion-fast:160ms;
  --r16-motion-sheet:220ms;
}
html[data-theme="dark"]{
  --r16-space-panel:#101e31;
  --r16-space-border:rgba(164,200,237,.22);
  --r16-space-tile:rgba(23,44,67,.8);
  --r16-space-text:#f3f8ff;
  --r16-space-muted:#c1d2e6;
  --r16-space-secondary:#a7bfd5;
  --r16-space-tint:rgba(91,192,220,.12);
  --r16-space-selected:rgba(91,192,220,.2);
}
html[data-theme="light"]{
  --r16-space-panel:#f9fcff;
  --r16-space-border:rgba(45,85,123,.21);
  --r16-space-tile:#fff;
  --r16-space-text:#172b44;
  --r16-space-muted:#405a73;
  --r16-space-secondary:#4d6378;
  --r16-space-tint:#e8f5fb;
  --r16-space-selected:#dceff8;
}

/* Main Spaces bottom sheet (R3/R4) also has to follow the selected theme. */
.r3-sheet__panel{
  background:linear-gradient(150deg,#13273e,#101d30 70%,#1d2240)!important;
  color:var(--r16-space-text)!important;
  border-color:var(--r16-space-border)!important;
}
.r3-sheet__head h2,.r3-space-option.r4-space strong{color:var(--r16-space-text)!important}
.r3-sheet__head p,.r3-sheet__notice,
.r3-space-option.r4-space .r4-space-description{color:var(--r16-space-muted)!important}
.r3-space-option.r4-space .r4-space-description{font-size:12px!important;line-height:1.5!important}
.r3-space-option.r4-space .r4-space-tag{font-size:10.5px!important;line-height:1.35!important}
.r4-space-disclaimer{font-size:11px!important;line-height:1.45!important}
.r3-space-option.r4-space{min-height:154px}
.r3-sheet__close{color:var(--r16-space-text)!important;border-color:var(--r16-space-border)!important}
.r3-space-option.r4-space{transition:transform var(--r16-motion-fast) var(--r16-ease),border-color var(--r16-motion-fast),box-shadow var(--r16-motion-fast)!important}
.r3-space-option.r4-space:active{transform:scale(.992)}
.r3-space-option.r4-space:focus-visible{outline:3px solid #128b9c!important;outline-offset:2px!important}

html[data-theme="light"] .r3-sheet__panel{
  background:linear-gradient(150deg,#fff,#f2f8fd 70%,#edf3fb)!important;
  box-shadow:0 24px 65px rgba(26,61,97,.18)!important;
}
html[data-theme="light"] .r3-sheet{background:rgba(25,49,77,.3)!important}
html[data-theme="light"] .r3-sheet__close{background:#edf4fa!important}
html[data-theme="light"] .r3-sheet__notice{background:#e7f2f9!important}
html[data-theme="light"] .r3-space-option.r4-space{
  background:var(--r16-space-tile)!important;
  border-color:var(--r16-space-border)!important;
  box-shadow:0 4px 14px rgba(37,78,117,.045);
}
html[data-theme="light"] .r3-space-option.r4-space--solo{background:linear-gradient(140deg,#f1fbfc,#fff)!important}
html[data-theme="light"] .r3-space-option.r4-space--work{background:linear-gradient(140deg,#f6f2ff,#fff)!important}
html[data-theme="light"] .r3-space-option.r4-space--family{background:linear-gradient(140deg,#eef5ff,#fff)!important}
html[data-theme="light"] .r3-space-option.r4-space--child{background:linear-gradient(140deg,#fff9ef,#fff)!important}
html[data-theme="light"] .r3-space-option.r4-space--life{background:linear-gradient(140deg,#f6f9fd,#fff)!important}
html[data-theme="light"] .r3-space-option.r4-space[aria-current="true"]{
  border-color:#167c9d!important;
  box-shadow:inset 0 0 0 1px rgba(22,124,157,.3),0 5px 18px rgba(29,104,145,.08)!important;
}
html[data-theme="light"] .r4-space--solo .r4-space-icon{color:#086e82!important;background:#d8f4f5!important}
html[data-theme="light"] .r4-space--work .r4-space-icon{color:#6251a8!important;background:#ece3ff!important}
html[data-theme="light"] .r4-space--family .r4-space-icon{color:#235b9a!important;background:#e0edff!important}
html[data-theme="light"] .r4-space--child .r4-space-icon{color:#926013!important;background:#fff0d4!important}
html[data-theme="light"] .r4-space-tag{color:#286c87!important}
html[data-theme="light"] .r4-space--work .r4-space-tag{color:#5b4e9a!important}
html[data-theme="light"] .r4-space--family .r4-space-tag{color:#235c9c!important}
html[data-theme="light"] .r4-space--child .r4-space-tag,html[data-theme="light"] .r4-space-disclaimer{color:#87530f!important}

/* Inline Solo / Work / Family / Child command bars and cards. */
.romvi-spaces-10{
  background:rgba(8,22,39,.84)!important;
  border-color:var(--r16-space-border)!important;
  transition:background-color var(--r16-motion-fast),border-color var(--r16-motion-fast)!important;
}
.romvi-space-btn{font-size:12px!important;min-height:44px!important;color:var(--r16-space-muted)!important;
  transition:color var(--r16-motion-fast),border-color var(--r16-motion-fast),background-color var(--r16-motion-fast)!important}
.romvi-space-btn.active{color:var(--r16-space-text)!important}
.romvi-space-btn:focus-visible{outline:2px solid #1d96aa!important;outline-offset:2px!important}
.romvi-mode-card-10{border-color:var(--r16-space-border)!important}
.romvi-mode-kicker-10{font-size:11px!important}
.romvi-mode-copy-10{font-size:13px!important;line-height:1.5!important;color:var(--r16-space-muted)!important}
.romvi-mode-badge-10{font-size:10.5px!important;color:var(--r16-space-muted)!important}
.romvi-mode-stat-10 span{font-size:10.5px!important;line-height:1.35!important;color:var(--r16-space-secondary)!important}
.romvi-next-10 small{font-size:10.5px!important;color:var(--r16-space-secondary)!important}
.romvi-next-10 b{font-size:12px!important}
.romvi-next-score-10{font-size:11px!important}
.romvi-mode-actions-10 button{font-size:12px!important;min-height:42px!important;
  transition:background-color var(--r16-motion-fast),border-color var(--r16-motion-fast),transform var(--r16-motion-fast) var(--r16-ease)!important}
.romvi-mode-actions-10 button:active{transform:scale(.987)}
.romvi-mode-foot-10{font-size:11.5px!important;line-height:1.5!important;color:var(--r16-space-secondary)!important}
html[data-theme="light"] .romvi-spaces-10{background:rgba(255,255,255,.92)!important;box-shadow:0 6px 22px rgba(31,65,100,.065)!important}
html[data-theme="light"] .romvi-space-btn:hover{background:#eef6fa!important;color:var(--r16-space-text)!important}
html[data-theme="light"] .romvi-space-btn.active{background:linear-gradient(135deg,#def2f6,#ecebfb)!important;border-color:#9ccbd9!important}
html[data-theme="light"] .romvi-mode-card-10{background:linear-gradient(140deg,#fff,#f3f8fc)!important}
html[data-theme="light"] .romvi-mode-stat-10,html[data-theme="light"] .romvi-next-10,html[data-theme="light"] .romvi-mode-badge-10,
html[data-theme="light"] .romvi-mode-actions-10 button{background:#fff!important;border-color:var(--r16-space-border)!important;color:var(--r16-space-text)!important}
html[data-theme="light"] .romvi-mode-kicker-10,html[data-theme="light"] .romvi-next-score-10{color:#0b738c!important}
html[data-theme="light"] .romvi-mode-stat-10 b,html[data-theme="light"] .romvi-mode-title-10,html[data-theme="light"] .romvi-next-10 b{color:var(--r16-space-text)!important}
html[data-theme="light"] .romvi-mode-actions-10 button.primary{background:linear-gradient(135deg,#e0f4f7,#eaeafd)!important}

/* Real full-width primary login actions and balanced light-mode setup CTA. */
.kairo-auth-card>.kairo-auth-btn,.kairo-auth-form>.kairo-auth-btn,.kairo-auth-retry{
  display:flex!important;align-items:center;justify-content:center;width:100%!important;max-width:100%!important;min-height:50px!important;
}
.kairo-auth-card,.kairo-auth-form{min-width:0}
html[data-theme="light"] #setup .go,
html[data-theme="light"] .onboard-primary{
  background:linear-gradient(115deg,#086a7c,#18507d)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(12,87,121,.18)!important;
}
html[data-theme="light"] #setup .go:hover,html[data-theme="light"] .onboard-primary:hover{
  background:linear-gradient(115deg,#075d70,#15466f)!important;
}
html[data-theme="light"] .kairo-auth-card>p,html[data-theme="light"] .kairo-auth-meta{color:#4b6078!important}

/* Better vertical composition on tall phones, tablets and desktop. */
#setup{justify-content:flex-start!important;padding-top:clamp(64px,10dvh,124px)!important;padding-bottom:max(30px,env(safe-area-inset-bottom))!important;gap:14px!important;overflow-y:auto!important}
#setup>img,#setup>h1,#setupDesc,#setup>.mode-choice,#setup>input,#setup>.go{flex-shrink:0!important}
#setupDesc{max-width:400px!important;line-height:1.55!important}
#setup .mode-choice,#setup input,#setup .go{max-width:400px!important}
.onboarding{align-items:center!important;overflow-y:auto!important;padding:clamp(22px,4dvh,42px) max(20px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom))!important}
.onboard-top,.onboard-stage,.onboard-actions{width:min(100%,540px)!important}
.onboard-stage{flex:1 0 auto!important;align-content:start!important;padding-top:clamp(26px,7dvh,78px)!important}
.onboard-stage h1{max-width:500px!important;font-size:clamp(30px,6vw,46px)!important;line-height:1.08!important}
.onboard-stage p{max-width:490px!important;font-size:14px!important;line-height:1.6!important}
.onboard-visual{max-width:100%!important;margin-top:24px!important;gap:10px!important}
.onboard-chip{padding:15px!important;min-height:85px!important}
.onboard-chip b{font-size:13px!important;line-height:1.4!important}
.onboard-actions{flex-shrink:0!important;margin-top:25px!important}

/* Only subtle interaction feedback: one-time sheet reveal and button press. */
@keyframes r16-panel-appear{from{opacity:.6;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.r3-sheet:not([hidden]) .r3-sheet__panel{animation:r16-panel-appear var(--r16-motion-sheet) var(--r16-ease) both}
#setup .go,.onboard-primary,.kairo-auth-btn.google{
  transition:transform var(--r16-motion-fast) var(--r16-ease),box-shadow var(--r16-motion-fast),filter var(--r16-motion-fast)!important;
}
#setup .go:active,.onboard-primary:active,.kairo-auth-btn.google:active{transform:scale(.99)}
@media(max-width:430px){
  #setup{padding-top:clamp(50px,8dvh,95px)!important}
  .onboard-stage{padding-top:clamp(20px,5dvh,48px)!important}
  .onboard-visual{gap:8px!important}
  .onboard-chip{padding:12px!important}
  .r3-space-option.r4-space .r4-space-description{font-size:12px!important}
}
@media(max-height:660px){
  #setup{padding-top:32px!important}
  .onboard-stage{padding-top:22px!important}
  .onboard-visual{margin-top:16px!important}
  .onboard-actions{margin-top:16px!important}
}
@media(prefers-reduced-motion:reduce){
  .r3-sheet:not([hidden]) .r3-sheet__panel{animation:none!important}
  .romvi-spaces-10,.romvi-space-btn,.r3-space-option.r4-space,.romvi-mode-actions-10 button,
  #setup .go,.onboard-primary,.kairo-auth-btn.google{transition:none!important;transform:none!important}
}