/* Parent pages only. app.css sets the type and colours; this adds the parent
   layout, the attention block and the phone behaviour.

   Every colour here comes from an app.css variable, so the parent pages follow
   the child pages into dark mode. A hard-coded light background here left white
   text on a near-white panel on a phone set to dark. */

.attention {
  border: 1px solid var(--line);
  border-left: 4px solid var(--wrong);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  background: var(--wrong-bg);
}
.attention.calm { border-left-color: var(--right); background: var(--right-bg); }
.attention h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.attention ul { margin: 0; padding-left: 1.1rem; }
.attention li { margin: 0.2rem 0; line-height: 1.45; }
.attention .who { font-weight: 600; }
.attention p { margin: 0; }

.notes {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--current-bg);
}
.notes ul { margin: 0; padding-left: 1.1rem; }
.notes.bad { background: var(--wrong-bg); }

.rowtools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rowtools label { font-size: 0.85rem; display: inline-flex; gap: 0.25rem; align-items: center; }
.rowtools button { padding: 0.3rem 0.6rem; font-size: 0.85rem; }

.strand { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 0.6rem; padding: 0.2rem 0.7rem; }
.strand > summary { cursor: pointer; padding: 0.5rem 0; font-weight: 600; }
.strand > summary .tally { font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); }
.strand[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.7rem; }
.chips .chip { display: inline-flex; gap: 0.3rem; align-items: baseline; }
.chip .glyph { font-weight: 700; font-family: ui-monospace, "Cascadia Mono", monospace; }
.chip.due-now { outline: 2px solid #c8a24a; }

.settings fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 1.25rem; padding: 0.9rem 1rem; }
.settings legend { font-weight: 600; padding: 0 0.35rem; }
.settings label { display: block; margin: 0.6rem 0 0.2rem; }
.settings input[type="text"], .settings input[type="email"],
.settings input[type="password"], .settings input[type="date"] { max-width: 22rem; width: 100%; }
.settings .help { color: var(--ink-soft); font-size: 0.9rem; margin: 0.2rem 0 0; }

.log { margin: 0 0 1.5rem; }
.log > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }

@media (max-width: 700px) {
  table.grid, table.grid thead, table.grid tbody, table.grid th, table.grid td, table.grid tr {
    display: block;
  }
  table.grid thead { position: absolute; left: -9999px; }
  table.grid tr {
    border: 1px solid var(--line); border-radius: 8px; margin: 0 0 0.7rem; padding: 0.5rem 0.7rem;
  }
  table.grid td { border: 0; padding: 0.15rem 0; }
  table.grid td::before { content: attr(data-label) ": "; font-weight: 600; }
  table.grid td.notitle::before { content: ""; }
  .chips .chip { font-size: 0.95rem; }
}

/* ------------------------------------------------------------------ rewards */

.requests { margin: 0; padding-left: 1.1rem; }
.requests li { margin: 0 0 0.5rem; }

.add-prize { margin: 0 0 1rem; }
.add-prize label { margin-right: 0.6rem; }

.retire-row td { border-top: 0; padding-top: 0; }

table.grid input[type="text"],
table.grid input[type="number"] { width: 100%; box-sizing: border-box; }
table.grid input[type="number"] { max-width: 7rem; }