/* [inbox] The notification inbox (the bell), the phone switches, and Simple view for grown-ups.
   public/screens/inbox.js, public/screens/simple.js. Tokens from public/ui/tokens.css. */

/* ---------- the bell ---------- */
.p-bell:not(.p-kid-help) { position: relative; } /* the kid home's bell keeps its place in the sky */
.p-bell .p-bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; pointer-events: none; }
.p-kid-help.p-kid-bell { top: 90px; } /* under help and search in the kid home's sky */

/* ---------- the inbox page ---------- */
.p-inbox { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.p-inbox-row .ui-row-title, .p-inbox-row .ui-row-sub { overflow-wrap: break-word; min-width: 0; }
.p-inbox-row.is-unread .ui-row-title { font-weight: 800; }
.p-inbox-icon.is-new { position: relative; }
.p-inbox-icon.is-new::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #F2A93B); border: 2px solid var(--surface, #fff); }
.p-inbox-foot { text-align: center; }
.p-inbox .ui-section-head { flex-wrap: wrap; gap: 8px; }
.p-inbox .ui-section-head h2 { flex: 1 0 auto; }
/* Very narrow (a phone at 200%): the words get the whole row. */
@media (max-width: 300px) { .p-inbox-row .p-inbox-icon, .p-inbox-row .ui-row-end { display: none; } }
/* Kids: bigger rows, bigger pictures, fewer words. */
.p-inbox--kid .ui-row { min-height: 64px; }
.p-inbox--kid .p-inbox-icon svg { width: 30px; height: 30px; }
.p-inbox--kid .ui-row-title { font-size: var(--text-lg); }
:root[data-skin="little"] .p-inbox--kid .ui-row { min-height: 76px; }
:root[data-skin="little"] .p-inbox--kid .p-inbox-icon svg { width: 40px; height: 40px; }

/* ---------- phone switches (Settings, a child's Rules tab) ---------- */
.p-notify-kind { display: flex; flex-direction: column; gap: 2px; }
.p-notify-kind > .ui-hint { margin: 0 0 4px; }
.p-notify-urgent { display: flex; gap: 6px; align-items: flex-start; color: var(--warning-text, inherit); }
.p-notify-urgent svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.es-simple { margin-top: 4px; }

/* ---------- Simple view: bigger words and buttons (presentation only) ---------- */
:root[data-simple="1"] {
  --text-xs: 15px;
  --text-sm: 17px;
  --text-md: 20px;
  --text-lg: 23px;
  --text-xl: 27px;
  --tap: 56px;
  --row-pad: 16px;
}
:root[data-simple="1"] body { font-size: var(--text-md); }
:root[data-simple="1"] .ui-btn { min-height: 52px; font-size: 18px; }
:root[data-simple="1"] .ui-btn--sm { min-height: 44px; font-size: 16px; }
:root[data-simple="1"] .ui-row { min-height: 60px; }
:root[data-simple="1"] .ui-row-title { font-size: var(--text-md); }
:root[data-simple="1"] .ui-row-sub { font-size: var(--text-sm); }
/* A very narrow screen is usually a phone already zoomed to 200% (big text on top of big text breaks
   words in the middle): back to the usual sizes there, the phone's zoom does the rest. */
@media (max-width: 340px) {
  :root[data-simple="1"] { --text-xs: 13px; --text-sm: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 22px; --tap: 48px; --row-pad: 10px; }
  :root[data-simple="1"] .ui-btn { min-height: 48px; font-size: 16px; }
  :root[data-simple="1"] .ui-row-title { font-size: var(--text-md); }
  .sv-kid-buttons .sv-big { min-height: 56px; font-size: 16px; }
  .sv-kid-head { flex-wrap: wrap; }
  .sv-home .ui-row > .p-row-icon, .sv-home .ui-row > .p-row-art { display: none; } /* the words get the row */
}

.sv-home { display: flex; flex-direction: column; gap: 20px; }
.sv-kids { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .sv-kids { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.sv-kid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv-kid-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sv-kid-head h2 { margin: 0; font-size: var(--text-xl); overflow-wrap: anywhere; min-width: 0; }
.sv-kid-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-kid-buttons .sv-big { min-height: 72px; flex-direction: column; gap: 6px; padding: 10px 8px; white-space: normal; text-align: center; line-height: 1.2; font-size: 18px; }
.sv-kid-buttons .sv-big svg { width: 28px; height: 28px; }
.sv-kid-buttons .sv-big span { overflow-wrap: anywhere; }
/* One column when the words are very big (200% zoom) or the screen very narrow. */
@media (max-width: 300px) { .sv-kid-buttons { grid-template-columns: 1fr; } }
.sv-kid-manage { border-top: 1px solid var(--line, rgba(0, 0, 0, 0.1)); }
.sv-help { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.sv-offer { display: flex; flex-direction: column; gap: 10px; }
.sv-offer h2 { margin: 0; }
.sv-offer p { margin: 0; }