/* DW Guardian — Kidzio adaptation. Uses Kidzio palette/components, only layout/readability additions. */
:root{
  --guardian-parent-max:900px;
  --guardian-font-scale:1;
}
html[dir="rtl"] body{font-family:"Alexandria",system-ui,-apple-system,"Segoe UI",sans-serif}
html[dir="ltr"] body{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif}
html[dir="rtl"] .h-display{font-family:"Alexandria",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:0}
html[dir="ltr"] .h-display{font-family:"Baloo 2","Nunito",system-ui,sans-serif}
html[dir="rtl"] .rtl-flip{transform:scaleX(-1)}
.guardian-parent .device-frame{max-width:var(--guardian-parent-max)}
.guardian-role .device-frame{max-width:760px}
.guardian-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guardian-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.guardian-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.guardian-icon-card{min-height:132px}
.guardian-tap{min-height:52px}
.guardian-tablet-only{display:none}
.guardian-mobile-only{display:flex}
.guardian-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}
.guardian-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guardian-map{min-height:260px;background:linear-gradient(135deg,color-mix(in oklab,var(--color-k-sky) 15%,transparent),color-mix(in oklab,var(--color-k-mint) 15%,transparent));position:relative;overflow:hidden}
.guardian-map:before,.guardian-map:after{content:"";position:absolute;border-radius:999px;background:color-mix(in oklab,var(--color-k-primary) 12%,transparent)}
.guardian-map:before{width:220px;height:220px;left:-80px;top:30px}.guardian-map:after{width:160px;height:160px;right:-45px;bottom:-35px}
.guardian-language-menu{display:none}.guardian-language-menu.open{display:block}

/* Compact landing — no empty vertical desert */
.guardian-role-shell{min-height:100vh;display:flex;flex-direction:column}
.guardian-role-hero{padding:22px 24px 12px;text-align:center}
.guardian-brand-mark{width:88px;height:88px;object-fit:contain;margin-inline:auto;border-radius:28px;filter:drop-shadow(0 12px 18px rgba(60,36,140,.16))}
.guardian-role-visual{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:18px auto 0;max-width:560px}
.guardian-role-visual .mini{min-height:92px}
.guardian-role-shield{width:82px;height:82px;border-radius:28px;display:grid;place-items:center;font-size:42px;box-shadow:var(--shadow-k-soft)}
.guardian-role-actions{margin-top:auto;padding:14px 22px max(20px,env(safe-area-inset-bottom))}
.guardian-brand-title{font-size:clamp(24px,4vw,36px)}

/* Parent home density and rhythm */
.guardian-home-hero{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.guardian-home-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.guardian-home-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.guardian-quick-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.guardian-quick-tiles .tile{min-width:0;width:100%;height:auto;min-height:140px}
.guardian-quick-tiles .tile-emoji{font-size:38px}
.guardian-week-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}

/* Readability: override Kidzio's smallest text for parent-facing screens */
.guardian-parent .text-\[10px\]{font-size:11px!important}
.guardian-parent .text-\[11px\]{font-size:12.5px!important;line-height:1.55!important}
.guardian-parent .text-xs{font-size:13px!important;line-height:1.6!important}
.guardian-parent .text-sm{font-size:14.5px!important;line-height:1.6!important}
.guardian-parent .section-label{font-size:13px!important}
.guardian-parent .setting-text{font-size:14.5px!important}

/* User-selectable font size */
html[data-guardian-font="small"]{--guardian-font-scale:.94}
html[data-guardian-font="medium"]{--guardian-font-scale:1}
html[data-guardian-font="large"]{--guardian-font-scale:1.12}
html[data-guardian-font="large"] .guardian-parent .text-\[11px\]{font-size:14px!important}
html[data-guardian-font="large"] .guardian-parent .text-xs{font-size:14.5px!important}
html[data-guardian-font="large"] .guardian-parent .text-sm{font-size:16px!important}
html[data-guardian-font="large"] .guardian-parent .text-lg{font-size:20px!important}
html[data-guardian-font="large"] .guardian-parent .text-xl{font-size:23px!important}

/* Accent color swatches */
.guardian-color-dot{width:28px;height:28px;border-radius:999px;border:3px solid transparent;box-shadow:0 0 0 1px var(--color-k-border);transition:.18s}
.guardian-color-dot.active{border-color:var(--color-k-surface);box-shadow:0 0 0 3px var(--color-k-primary)}
.guardian-brand-preview{display:flex;align-items:center;gap:12px}
.guardian-brand-preview img{width:48px;height:48px;object-fit:contain;border-radius:16px}

@media (max-width:767px){
  .guardian-parent .device-frame,.guardian-role .device-frame{max-width:430px}
  .guardian-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-hero-grid{grid-template-columns:1fr}
  .guardian-role-grid{grid-template-columns:1fr}
  .guardian-icon-card{min-height:118px}
  .guardian-role-visual{grid-template-columns:1fr 74px 1fr}
  .guardian-role-shield{width:68px;height:68px;font-size:34px;border-radius:22px}
  .guardian-home-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-home-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .guardian-quick-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-week-grid{grid-template-columns:1fr}
  .guardian-home-hero{grid-template-columns:1fr}
}
@media (min-width:768px){
  .guardian-parent .device-frame{box-shadow:0 0 0 1px var(--color-k-border),var(--shadow-k);min-height:100vh}
  .guardian-role .device-frame{box-shadow:0 0 0 1px var(--color-k-border),var(--shadow-k)}
  .guardian-tablet-only{display:flex}
  .guardian-mobile-only{display:none}
  .guardian-parent main.device-frame{padding-inline:14px}
  .guardian-parent .tabbar-inner{max-width:760px}
  .guardian-parent .appbar{padding-inline:1.5rem}
  .guardian-parent section.px-5{padding-left:1.5rem;padding-right:1.5rem}
}


/* RC8.2 — Child UI uses the same responsive canvas quality as Parent UI */
.guardian-child .device-frame{
  width:100%;
  max-width:var(--guardian-parent-max);
  min-height:100vh;
}
.guardian-child .child-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:14px;
}
.guardian-child .child-main-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.guardian-child .child-family-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.guardian-child .child-hero{
  min-height:250px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px;
}
.guardian-child .child-hero-emoji{
  width:116px;height:116px;border-radius:36px;
  display:grid;place-items:center;font-size:58px;
  background:rgba(255,255,255,.18);
}
.guardian-child .child-side-stack{display:grid;gap:12px}
.guardian-child .child-sos{min-height:72px;font-size:18px}
@media (max-width:900px){
  .guardian-child .device-frame{max-width:900px}
  .guardian-child .child-content-grid{grid-template-columns:1fr}
  .guardian-child .child-hero{min-height:210px}
}
@media (max-width:767px){
  .guardian-child .device-frame{max-width:430px}
  .guardian-child .child-content-grid{display:block}
  .guardian-child .child-main-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-child .child-family-grid{grid-template-columns:1fr}
  .guardian-child .child-hero{min-height:190px;grid-template-columns:1fr;text-align:center}
  .guardian-child .child-hero-emoji{width:88px;height:88px;font-size:44px;margin-inline:auto}
}