/* App-shell extras for the redesign — builds on tokens.css + components.css.
   No inline styles; all values come from tokens. */

/* page background behind the centered .app shell */
html, body { min-height: 100%; }

/* anchors styled as buttons never get the default link underline */
a.btn, .btn { text-decoration: none; }

/* rail icon sizing (icons use currentColor) */
.rail__brand svg { width: 22px; height: 22px; color: #fff; }
.rail__item svg  { width: 23px; height: 23px; }
.rail a { text-decoration: none; }

/* screen header: title on the left, actions on the right */
.screen-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-7);
}
.screen-head__sub { font-size: var(--text-md); color: var(--grey-500); margin-top: 4px; }

/* circular "+" add button used at the top-right of list screens */
.add-circle {
  width: 52px; height: 52px; border-radius: var(--radius-pill); flex: none;
  background: var(--teal-600); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-btn-sm);
  font-size: 26px; line-height: 1; text-decoration: none;
}
.add-circle:hover { background: var(--teal-700); }

/* flash messages → token-based alerts, stacked at the top of the main area */
.flash-stack { display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-9) 0; }
.flash {
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  padding: 12px 16px; border-radius: var(--radius-md);
}
.flash--success { color: var(--success); background: var(--success-bg); }
.flash--danger  { color: var(--danger);  background: var(--danger-bg); }
.flash--info    { color: var(--info-text); background: var(--info-bg); }

/* a clickable row's inner actions stop row navigation; keep them inline */
.row-actions { display: inline-flex; gap: 8px; align-items: center; }

/* utility: visually-removed helper form/element */
.u-hidden { display: none; }