/* Shared reading surfaces for analysis, family and practice screens. */
:root, body.easy { --r: 14px; }
body { word-break: keep-all; overflow-wrap: break-word; }
button, a, summary { word-break: keep-all; }
button > span, .choice > span:last-child { min-width: 0; }
button > [aria-hidden="true"] { flex-shrink: 0; }

/* One rounded surface per reading group, including text outside existing cards. */
.page-heading, .intro, .input-panel, .busy-panel, .empty, #connect-panel,
.journey-heading, .gentle-note, .family-panel, .feedback-row,
.brand, .home-link, main > footer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.brand { padding: 8px 12px; }
.home-link { display: inline-flex; padding: 10px 16px; margin-bottom: 16px; }
.journey-heading { padding: 12px 16px; flex-wrap: wrap; }
.page-heading, .intro { max-width: none; }
.input-panel { min-width: 0; }
.family-panel { padding: 20px; }
.gentle-note { padding: 12px 16px; }
.result-layout > div > p.helper { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.navigation button, .navigation > a, .text-button, .listen,
.notification-settings, .speak-button, .invite-link-details code,
.risk-banner, .result-panel, .call-dialog, dialog.error-dialog {
  border-radius: var(--r);
}
.navigation button, .navigation > a, .text-button, .listen {
  border: 1px solid var(--line);
  background: var(--surface);
}
.listen { justify-content: center; min-height: 52px; }
.listen[aria-pressed="true"], .speak-button[aria-pressed="true"] {
  background: var(--navy-tint); border-color: var(--navy);
}
#speech-status { margin-top: 12px; }
#toast { pointer-events: none; }
ul { list-style: none; padding-left: 0; }
.evidence-dot, .guardian-line .dot, .engine-chip::before { display: none; }
.highlight-why { padding-left: 0; }
.entry-body ul { padding-left: 0; }
.evidence-list li + li, .history-analysis li + li { margin-top: 10px; }
.result-more { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.result-more > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
.result-more > summary::after { content: '+'; margin-left: auto; padding-left: 12px; }
.result-more[open] > summary::after { content: '−'; }
.result-more > summary { list-style: none; }
.result-more > summary::-webkit-details-marker { display: none; }
.engine-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.engine-head { flex-wrap: wrap; }
.feedback strong span { display: inline-block; }
.primary { line-height: 1.5; padding-block: 14px; }

/* Status is identified by words and color, including in-flight operations. */
#guardian-status-panel { border-width: 2px; background: var(--bg); }
#guardian-status-panel[data-state="connected"] { background: var(--safe-bg); border-color: var(--safe); color: var(--safe-ink); }
#guardian-status-panel[data-state="waiting"] { background: var(--alert-bg); border-color: var(--alert-line); color: var(--alert-ink); }
#guardian-status-panel[data-state="checking"],
#guardian-status-panel[data-state="creating"] { background: var(--navy-tint); border-color: var(--navy); }
#guardian-status-panel[data-state="revoking"],
#guardian-status-panel[data-state="error"] { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
#guardian-status-panel[aria-busy="true"] { border-style: dashed; }
#guardian-status { min-height: 1.6em; }
#guardian-status-panel .button-row { flex-wrap: wrap; }
#guardian-status-panel .text-button { padding-inline: 14px; }
#connect-button[aria-busy="true"] { background: var(--navy-tint); color: var(--navy); border: 2px dashed var(--navy); opacity: 1; }

/* Easy mode retains decisions, consent and safety instructions. */
body.easy .page-heading .eyebrow, body.easy .page-heading .intro-copy,
body.easy .kind-tabs small, body.easy .sample-row > .helper,
body.easy .feature-card, body.easy .daily-link, body.easy #drop-hint,
body.easy .feedback-row,
body.easy .intro .eyebrow, body.easy .card-counter { display: none; }
body.easy .page-heading, body.easy .intro { padding: 18px; margin-bottom: 18px; }
body.easy .page-heading h1 { margin-bottom: 0; }
body.easy .kind-tabs button { min-height: 80px; }
body.easy .kind-tabs button > .ic:not(.check) { top: 50%; transform: translateY(-50%); }
body.easy .result-layout { display: flex; flex-direction: column; }
body.easy .result-layout > .sidebar-stack { order: -1; }
body.easy .result-more { padding: 14px; }
body.easy .result-more > summary { font-size: var(--fs-body); }
body.easy .family-panel { padding: 16px; }
body.easy .activity-card { padding: 20px; }
body.easy .scenario { padding: 16px; }
body.easy .category, body.easy .example-label { font-size: 18px; }
body.easy .mode-toggle { min-height: 56px; font-size: 20px; white-space: normal; padding-block: 10px; }
body.easy .listen { width: 100%; min-height: 60px; font-size: var(--fs-body); }
body.easy .card-bottom { display: block; }
body.easy .choice small { display: block; margin: 4px 0 0; font-size: 18px; }
body.easy .feedback { padding: 16px; }
body.easy .feedback strong { display: block; }
body.easy .memory-items { flex-wrap: wrap; }
body.easy .memory-items span { flex: 1 1 80px; font-size: 28px; }

@media (max-width: 640px) {
  .input-panel, .family-panel { padding: 16px; }
  .page-heading, .intro { padding: 18px; }
  .brand { max-width: 100%; }
  .brand strong.brand-word { font-size: 24px; }
  body.easy .page { padding-inline: 12px; }
  body.easy .activity-card { padding: 16px; }
  body.easy .scenario { padding: 14px; }
  body.easy .choice { padding: 14px 12px; gap: 10px; }
  body.easy .primary { padding-inline: 16px; }
  .feedback strong span { max-width: 100%; }
  .completion-stats { padding: 12px; }
}