@import url('./design-tokens.css');
@import url('./shared/tool-shell.css');
/* Shared presentation layer for projector-first practice tools. */
:root{
  --classroom-ink:var(--nt-text); --classroom-sky:var(--nt-primary); --classroom-mint:var(--nt-success); --classroom-line:var(--nt-border);
  --classroom-panel:rgba(255,255,255,.94);
  --classroom-shadow:var(--nt-shadow-float);
}

/* ランダム日付 */
body:has(#date){
  background:radial-gradient(58rem 30rem at -8% -8%,rgba(111,198,255,.22),transparent 62%),radial-gradient(46rem 25rem at 107% 0,rgba(126,229,199,.16),transparent 64%),#f5f8fc;
}
body:has(#date) .topbar{
  border-bottom-color:var(--classroom-line);
  background:rgba(255,255,255,.88);
  box-shadow:0 2px 16px rgba(24,49,83,.05);
}
body:has(#date) .title{color:var(--classroom-ink)}
body:has(#date) .date-card{
  border-color:rgba(126,165,211,.42);
  background:var(--classroom-panel);
  box-shadow:var(--classroom-shadow);
}
body:has(#date) .date{color:var(--classroom-ink)}
body:has(#date) .reading{color:var(--classroom-mint)}
body:has(#date) .button{
  background:var(--classroom-sky);
  box-shadow:0 10px 22px rgba(30,117,216,.24);
}
body:has(#date) .settings{z-index:30;border-color:var(--classroom-line);box-shadow:var(--classroom-shadow)}

/* ランダム時計 */
body:has(#single-time){
  background:radial-gradient(58rem 30rem at -8% -8%,rgba(111,198,255,.22),transparent 62%),radial-gradient(46rem 25rem at 107% 0,rgba(126,229,199,.16),transparent 64%),#f5f8fc;
}
body:has(#single-time) header{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--classroom-line);
  box-shadow:0 2px 16px rgba(24,49,83,.05);
  color:var(--classroom-ink);
}
body:has(#single-time) header a{color:var(--classroom-ink);border-color:var(--classroom-line);background:#fff}
body:has(#single-time) .card,
body:has(#single-time) .settings-panel{border:1px solid rgba(126,165,211,.42);box-shadow:var(--classroom-shadow)}
body:has(#single-time) .time{color:var(--classroom-ink);text-shadow:none}
body:has(#single-time) .answer{color:var(--classroom-mint)}
body:has(#single-time) .tab.active,
body:has(#single-time) .primary{background:var(--classroom-sky)}
body:has(#single-time) .outline{border-color:var(--classroom-sky);color:var(--classroom-sky)}
body:has(#single-time) button:focus-visible,
body:has(#single-time) input:focus-visible{outline:3px solid #69a9f5;outline-offset:3px}

@media (max-width:560px){
  body:has(#single-time) .actions{width:100%}
  body:has(#single-time) .actions button{flex:1 1 100%;min-height:48px}
}

@media (prefers-reduced-motion:reduce){
  body:has(#date) *,body:has(#single-time) *{transition-duration:1ms!important;animation-duration:1ms!important}
}