/* ============================================================
   Școala Tudo - design tokens (LOCKED, from DESIGN-BRIEF §3.1)
   Native Apple visual language. Brand tint green #16a34a.
   ============================================================ */
:root{
  --bg:#fff;--grouped:#f2f2f7;--grouped-d:#f5f5f7;
  --label:#1d1d1f;--label2:rgba(60,60,67,.6);--label3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.18);--fill:rgba(120,120,128,.12);--fill2:rgba(118,118,128,.22);
  --tint:#16a34a;--tint-d:#0f7a37;--tint-l:#eaf7ef;--tint-bd:#cdebd8;
  --red:#ff3b30;--blue:#007aff;--amber:#ff9500;--purple:#a987e0;
  --f:-apple-system,'SF Pro Text','SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,monospace;

  /* spacing + radii scale (Apple-grade, consistent across surfaces) */
  --r-card:12px;        /* grouped inset cards */
  --r-tile:7px;         /* 29px icon tiles, continuous corner */
  --r-btn:12px;
  --r-field:11px;
  --pad:16px;           /* default screen gutter */
  --tap:44px;           /* min touch target */
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --ease:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--f);color:var(--label);
  background:#dfe3ea;          /* neutral stage behind device frames */
  font-size:17px;line-height:1.35;letter-spacing:-.01em;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
/* balanced headings + orphan-free body copy (pixel-clean wrap, DESIGN-BRIEF §4) */
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;margin:0;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}

/* line icons render at currentColor, never filled blobs */
svg.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.ic.sm{width:18px;height:18px}
svg.ic.lg{width:26px;height:26px}

/* in-frame screens: default flex column; Alpine x-show toggles visibility */
.screen-view{display:flex;flex-direction:column;flex:1;min-height:0}

/* x-cloak: hide Alpine markup until hydrated (no flash of unstyled template) */
[x-cloak]{display:none!important}

/* shared utility: muted caption text, dividers */
.muted{color:var(--label2)}
.muted3{color:var(--label3)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* ---- prototype stage (one device + caption, centered) ---- */
.stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:40px 24px 64px;gap:22px}
.cap{width:100%;text-align:center}
.cap h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.cap p{color:#5b6472;font-size:15px;line-height:1.45;margin:6px auto 0;max-width:560px}
.cap .role-tag{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px;
  border-radius:13px;background:#fff;border:1px solid #d7dbe2;color:#3a4351;font-size:13px;
  font-weight:600;margin-bottom:12px}
.cap .role-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--tint)}
.stage-back{color:#5b6472;font-size:14px;font-weight:500;padding:4px 12px}
.stage-back:hover{color:var(--tint)}

/* default scroll behavior for in-frame screens */
.screen-view{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.screen-view::-webkit-scrollbar{display:none}

/* read-aloud hidden when the browser has no speech synthesis */
.no-tts .listen{display:none}

/* flex layout helpers - use a CLASS (not inline display) on x-show elements,
   because Alpine x-show wipes inline `display` when it reveals an element. */
.vfill{display:flex;flex-direction:column;flex:1;min-height:0}
.vmid{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:center}