/* devices, privacy notice and account pages: styles for this feature only. Scope every rule to its own class prefix. */

/* ---------- sign-in and invite pages: the lines added for "one login, one person" ----------
   The layout itself is in app.css (the .welcome block). */
/* The slot stays in the accessibility tree while empty (a live region must
   exist before its message arrives) and gives back the gap it would take. */
.welcome-card .welcome-ended:empty { margin-top: -16px; }
/* Sits with the note above it rather than a full gap away (the sign-in card). */
.welcome-card p.muted.small + .welcome-one-person { margin-top: -8px; }
.welcome-one-person a { color: var(--su-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* "The app is for Multiplier Method students for now." takes a row of its
   own; "Not a student yet? Book a call" follows as one row. */
.welcome-about-note { flex-basis: 100%; }

/* ---------- Settings: Your devices ---------- */
.dev-body { gap: 12px; }
.dev-rule { font-size: 13px; }
.dev-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
.dev-item { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 14px; }
.dev-item + .dev-item { border-top: 1px solid var(--border); }
.dev-what { min-width: 0; flex: 1 1 220px; }
.dev-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.dev-foot { gap: 8px 12px; }
.dev-privacy a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  /* Tap targets on a phone: the buttons are the only controls in the card. */
  .dev-item .btn, .dev-foot .btn { min-height: 40px; }
}

/* ---------- Admin: an account's devices and networks ---------- */
/* The hidden attribute would lose to "display: table-row" set anywhere else. */
.acct-detail[hidden] { display: none; }
table.data tr.acct-detail:hover td, table.data td.acct-detail-cell { background: #fafbfc; }
/* The users table is wider than its card and scrolls sideways. The panel is
   sized from the visible part of that scroller (a container query unit), not
   from the table, and sticks to its left edge, so it is always all in view. */
.acct-scroll { container-type: inline-size; }
table.data td.acct-detail-cell { position: static; padding: 12px 14px; }
.acct-panel { display: flex; flex-direction: column; gap: 10px; width: calc(100cqw - 28px); max-width: 760px; position: sticky; left: 14px; }
.acct-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.acct-panel table.acct-devices th, .acct-panel table.acct-devices td { position: static; }
.acct-networks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---------- privacy notice (views/privacy.js): an open page, outside the app shell ---------- */
.privacy { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.privacy-brand { display: flex; align-items: center; gap: 12px; padding: 16px max(16px, calc((100% - 720px) / 2)); background: var(--su-ink); color: #fff; }
/* The logo is a circle drawn on a black square (no transparency). */
.privacy-brand img { width: 36px; height: 36px; flex: none; border-radius: 50%; }
.privacy-brand-name { font: 600 17px/1.1 var(--display); letter-spacing: .6px; text-transform: uppercase; }
.privacy-brand-sub { font-size: 12px; color: #a1a1aa; letter-spacing: .3px; }
.privacy-main { max-width: 720px; margin: 0 auto; padding: 20px 16px 56px; font-size: 16px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.privacy-main h1 { margin: 12px 0 4px; font-size: 30px; line-height: 1.15; color: var(--su-ink); }
.privacy-updated { margin-bottom: 16px; font-size: 14px; color: var(--muted); }
.privacy-main p { margin: 0 0 12px; }
.privacy-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--su-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--su-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.privacy-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.privacy-section h2 { margin: 0 0 10px; font-size: 20px; color: var(--su-ink); }
.privacy-list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.privacy-list dt { font-weight: 650; color: var(--su-ink); }
.privacy-list dd { margin: 2px 0 0; }
.privacy-list + p { margin-top: 14px; }
@media (min-width: 720px) {
  .privacy-main { padding-top: 32px; }
  .privacy-list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .privacy-list dd { margin: 0; }
}