/* Machine presence (N12) additions for the Machines detail and the Notifications section. Shared tokens, themes, cards, badges, buttons,
   .facts, .check, .message and .caption come from /billing/styles.css. Everything here is scoped to .hp-* nodes. Nothing animates; every
   state is said in text, never by colour alone; labels stay in normal flow so a wrapped Russian line grows its row. */
.hp-block { margin-top: 20px; }
.hp-block[hidden], .hp-section[hidden] { display: none; }
.hp-block .hp-scope, .hp-section .hp-scope { margin-top: 4px; }
.hp-block .hp-note { margin: 12px 0 0; }
.hp-facts { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); margin: 16px 0 0; }
.hp-facts dd small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.hp-state { display: inline-block; font-weight: 600; padding-left: 8px; border-left: 3px solid hsl(var(--border)); }
.hp-state[data-state="recent"], .hp-state[data-state="fresh"], .hp-state[data-state="current"] { border-left-color: hsl(var(--primary)); }
.hp-sub { font-size: 13px; font-weight: 600; margin: 20px 0 0; }
.hp-block .member-actions { justify-content: flex-start; margin-top: 12px; }
.hp-block [tabindex="-1"]:focus, .hp-section [tabindex="-1"]:focus { outline: none; }
.hp-block [tabindex="-1"]:focus-visible, .hp-section [tabindex="-1"]:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.hp-block input:focus-visible, .hp-section input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.hp-live:empty { display: none; }
.hp-section .hp-live { margin: 12px 0 0; font-size: 13px; }
.hp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; align-items: start; margin-top: 16px; }
.hp-pref h3, .hp-list h3 { margin: 0; }
.hp-pref .check { margin-top: 12px; }
.hp-pref .caption { margin-top: 6px; }
.hp-pref .member-actions, .hp-list .member-actions { justify-content: flex-start; margin-top: 12px; }
.hp-pref .hp-save { margin: 12px 0 0; }
.hp-pref .hp-channels-h { margin-top: 20px; }
.hp-list .hp-title { font-size: 14px; line-height: 1.3; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.hp-list li[data-read="true"] .hp-title { font-weight: 500; }
.hp-list .times + .times { margin-top: 2px; }
@media (max-width: 760px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .hp-facts dd { margin-bottom: 10px; }
  .hp-block .member-actions, .hp-section .member-actions { flex-direction: column; align-items: stretch; }
  .hp-block button, .hp-section button, .hp-section .button { min-height: 44px; }
}