/* The reader's pages and the account pages (F7 UI-3, UI-5; D-24): /me/* and /accounts/*,
   loaded there only, through {% block extra_css %}. Forms in a narrow column, each label over
   its field, errors below it; the hub's sections. Semantic tokens only. */

/* the notices of the last action, and the verification banner */
.notices { margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.notice { padding: var(--space-2) var(--space-4); border-radius: var(--radius); border-left: 4px solid var(--color-accent); background: var(--color-accent-tint); font-size: var(--text-sm); max-width: none; }
.notice--error { border-left-color: var(--color-ink-soft); background: var(--color-surface-alt); }
.banner { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-left: 4px solid var(--color-highlight); border-radius: var(--radius); background: var(--color-highlight-soft); font-size: var(--text-sm); }
.banner p { margin: 0; max-width: none; }

/* forms */
.form { display: grid; gap: var(--space-3); max-width: 30rem; margin: var(--space-3) 0; }
.form--inline { margin-top: var(--space-2); }
.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.field input[type="email"], .field input[type="password"], .field input[type="text"], .field select, .field textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--text-base) / 1.3 var(--font-sans);
}
.field textarea { min-height: 5rem; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--color-ink); border-width: 2px; }
.field__help { font-size: var(--text-xs); color: var(--color-ink-muted); }
.field__help ul { margin: 0; padding-left: 1.1em; }
.field__error, .form__error { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ink); }
.field__error::before, .form__error::before { content: "\26A0\00a0"; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form__consent { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }
.form__alt { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form .btn-gf { justify-self: start; }
.btn-gf--danger { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-accent-ink); }
.btn-gf--danger:hover { background: var(--color-ink-soft); color: var(--color-accent-ink); }

/* the account's page */
.account-facts { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.account-facts dd { margin: 0; }
.account-section { margin: 0 0 var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.account-links { display: grid; gap: var(--space-2); }
.account-signout { margin-top: var(--space-5); }
.state { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.state--on { background: var(--color-highlight-soft); color: var(--color-highlight-ink); }
.state--warn { background: var(--color-surface-alt); color: var(--color-ink); border-radius: var(--radius); padding: var(--space-1) var(--space-2); }

/* My page (UI-3, UI-10): the stream, and the side's boxes beside it on a wide screen */
.hub-head { margin-bottom: var(--space-4); }
.hub { display: grid; gap: var(--space-5); }
@media (min-width: 52rem) { .hub { grid-template-columns: minmax(0, 1fr) 18rem; } }
.hub-section { margin: 0 0 var(--space-5); }
.hub-section h2 { margin-bottom: var(--space-2); }
.hub-list { display: grid; gap: var(--space-2); }
.hub-list li { max-width: none; }
.hub-list__note { display: block; font-size: var(--text-sm); color: var(--color-ink-soft); }
.hub-more { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.hub__side > .hub-section { padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.hub-note { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.hub-only { margin: var(--space-2) 0 var(--space-3); }
.empty-note { color: var(--color-ink-soft); font-size: var(--text-sm); }
.tool-list { display: grid; gap: var(--space-2); }

/* Saved (UI-4) */
.reader-kinds { margin: var(--space-4) 0; }
.saved-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.saved { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); max-width: none; }
.saved--pinned { border-left: 4px solid var(--color-highlight); }
.saved__title { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.saved__meta { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-ink-muted); }
.saved__note { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.saved__note-input { flex: 1 1 14rem; min-width: 0; min-height: 2rem; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-line-strong); border-radius: var(--radius); font: var(--text-sm) / 1.3 var(--font-sans); }
.saved__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* What is new, the feeds, the limits (UI-3, UI-4, RT-5, RT-6) */
.new-count { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-highlight-soft); color: var(--color-highlight-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.hub-day { margin: var(--space-4) 0 var(--space-2); color: var(--color-ink-muted); }
.hub .entries > li.is-new { position: relative; }
.new-flag { position: absolute; left: -0.5rem; top: var(--space-2); z-index: 2; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-highlight-ink); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.feed-link { font-size: var(--text-sm); }
.feed-link summary { cursor: pointer; color: var(--color-accent); }
.feed-link__body { display: grid; gap: var(--space-1); margin: var(--space-2) 0; max-width: 34rem; }
.feed-link__url { width: 100%; min-width: 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-line-strong); border-radius: var(--radius); font: var(--text-xs) / 1.4 var(--font-mono); }
.feed-link__note { font-size: var(--text-xs); color: var(--color-ink-muted); }
.quota-table { margin: var(--space-4) 0 var(--space-5); border-collapse: collapse; font-size: var(--text-sm); }
.quota-table th, .quota-table td { padding: var(--space-1) var(--space-4) var(--space-1) 0; border-bottom: 1px solid var(--color-line); text-align: left; }
/* Your watch list (UI-8): the email in one place at the top, then the groups */
.watch-email { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-left: 4px solid var(--color-highlight); border-radius: var(--radius); background: var(--color-surface); }
.watch-email h2 { margin-bottom: var(--space-2); }
.watch-email__address { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.watch-email__all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.watch-email__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.watch-email__choices { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.watch-email__choices .btn-gf.is-on { border-color: var(--color-accent); background: var(--color-accent-tint); }
.watch-email__note, .watch-email__how { font-size: var(--text-xs); color: var(--color-ink-soft); }
.watch-email__how { margin: var(--space-2) 0 0; max-width: none; }
.watch-email__day { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2) var(--space-3); margin: 0; max-width: none; }
.watch-email__day .field { gap: 0; }
.watch-email__day select { min-height: 2rem; padding: 0 var(--space-2); font-size: var(--text-sm); }
.watch-group { margin: 0 0 var(--space-5); }
.watch-group h2 { margin-bottom: var(--space-2); }
.chip--search { border-style: dashed; }
.cadence { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.cadence select { min-height: 2rem; padding: 0 var(--space-2); border: 1px solid var(--color-line-strong); border-radius: var(--radius); background: var(--color-surface); font: inherit; }
.hub-digests { font-size: var(--text-sm); color: var(--color-ink-soft); }
.choice { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.choice__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.feedback-about, .feedback-identity { font-size: var(--text-sm); color: var(--color-ink-soft); }