/* Sign-in and account pages only (loaded by Page::$account). Ported from web/src/styles/{components,pages}.css.
   Brand: STREAMR_BRAND.md. Tokens come from site.css; never literal colors here. */

/* ---------- Forms ---------- */
.form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > label,
.segmented-field legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.field input,
.inline-form input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke-strong);
  background: var(--bg-raised);
  color: var(--text-1);
  transition: border-color var(--dur-fade) ease-out, box-shadow var(--dur-fade) ease-out;
}

.field input::placeholder,
.inline-form input::placeholder {
  color: var(--text-3);
}

.field input:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.24);
}

.field input:focus-visible,
.inline-form input:focus-visible {
  outline: none;
  border-color: var(--grape-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--grape-start) 35%, transparent);
}

.field input[aria-invalid="true"] {
  border-color: var(--confetti-orange);
}

.field input:disabled {
  opacity: 0.6;
}

.field-help {
  font-size: 13px;
  color: var(--text-2);
}

.field-error,
.inline-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-1);
}

.field-error svg,
.inline-error svg {
  flex: none;
  margin-top: 3px;
  color: var(--confetti-orange);
}

.inline-error {
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--confetti-orange) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--confetti-orange) 30%, transparent);
}

.inline-success {
  font-size: 14px;
  color: var(--text-2);
}

.field-row {
  display: grid;
  gap: 18px;
}

@media (min-width: 560px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.segmented-field {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.segmented-field legend {
  padding: 0;
  margin-bottom: 8px;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  width: fit-content;
  max-width: 100%;
}

.segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-snappy) var(--ease-snappy), color var(--dur-snappy) var(--ease-snappy);
}

.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment:hover {
  color: var(--text-1);
}

/* Selected: Grape Deep pill + white label (shape + color, §2.4) */
.segment.is-sel {
  background: var(--grape-deep);
  color: var(--text-1);
}

.note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-m);
  background: var(--glass);
  border: 1px solid var(--stroke);
  color: var(--text-2);
  font-size: 15px;
}

.note svg {
  flex: none;
  margin-top: 2px;
  color: var(--grape-text);
}

.advanced-body {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.inline-form input {
  flex: 1 1 200px;
  min-height: 40px;
}


.dialog-text {
  color: var(--text-2);
  margin-bottom: 16px;
}

.dialog-text strong {
  color: var(--text-1);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 420px) {
  .dialog-actions .btn {
    flex: 1 1 100%;
  }
}


/* ---------- Banner ---------- */
.banner {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: var(--r-l);
  background: var(--glass);
  border: 1px solid var(--stroke);
}

.banner > svg {
  flex: none;
  color: var(--grape-text);
  margin-top: 2px;
}

.banner-success {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--grape-start) 22%, transparent), transparent 60%),
    var(--bg-elevated);
  border-color: color-mix(in srgb, var(--grape-start) 35%, transparent);
}

.banner-success strong {
  font-family: var(--font-brand);
  font-size: 1.1rem;
}

.banner-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--confetti-mint) 16%, transparent);
  color: var(--confetti-mint);
}

/* ---------- Confetti (§7.4) ---------- */
.confetti {
  position: absolute;
  left: 34px;
  top: 34px;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  width: 12px;
  height: 3px; /* 4:1 capsule sprinkle */
  border-radius: var(--r-pill);
  opacity: 0;
  animation: confetti-burst 1.1s cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
}

.confetti-piece.is-dot {
  width: 5px;
  height: 5px;
}

.confetti-yellow {
  background: var(--confetti-yellow);
}
.confetti-mint {
  background: var(--confetti-mint);
}
.confetti-orange {
  background: var(--confetti-orange);
}
.confetti-pink {
  background: var(--confetti-pink);
}
.confetti-white {
  background: var(--text-1);
}

@keyframes confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.6);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
}

.confetti-check {
  position: absolute;
  left: 18px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--confetti-mint);
  pointer-events: none;
  animation: check-fade var(--dur-fade) ease-out both;
}

@keyframes check-fade {
  from {
    opacity: 0;
  }
}

/* ---------- Meter ---------- */
.meter {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grape);
  transition: width var(--dur-spring) ease-out;
}


/* ---------- Sign in ---------- */
.auth-page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 64px - 200px);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 36px 32px;
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

@media (max-width: 480px) {
  .auth-card {
    padding: 26px 18px;
  }
}

.auth-glyph {
  margin-bottom: 18px;
}

.auth-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.code-input {
  font-size: 28px !important;
  letter-spacing: 0.45em;
  text-align: center;
  padding-left: calc(14px + 0.45em) !important;
  min-height: 60px !important;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 18px;
}

.auth-fine {
  margin-top: 20px;
  font-size: 14px;
}

/* ---------- Account ---------- */
.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.account-head .muted {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.account-signout {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.tabs {
  margin-block: 28px 28px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px;
  margin-inline: -4px;
}

.tabs ul {
  display: flex;
  gap: 6px;
  padding: 4px;
  width: fit-content;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--stroke);
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color var(--dur-snappy) var(--ease-snappy), color var(--dur-snappy) var(--ease-snappy);
}

.tab:hover {
  color: var(--text-1);
  text-decoration: none;
}

/* Selected tab: Grape Deep pill, white label (§7.2) */
.tab.is-active {
  background: var(--grape-deep);
  color: var(--text-1);
}

.account-body {
  display: grid;
  gap: 20px;
}

.account-body > section {
  display: grid;
  gap: 20px;
  align-content: start;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.section-head .muted {
  margin-top: 4px;
  max-width: 60ch;
}

.sub-card {
  display: grid;
  gap: 18px;
}

.sub-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.sub-top .eyebrow {
  margin-bottom: 4px;
}

.sub-detail {
  font-size: 1.05rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding-block: 14px;
  border-block: 1px solid var(--stroke);
}

.facts dt {
  font-size: 13px;
  color: var(--text-2);
}

.facts dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 480px) {
  .actions .btn {
    flex: 1 1 100%;
  }
}

.devices-summary {
  display: grid;
  gap: 16px;
}

.devices-summary-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.devices-summary-head > svg {
  flex: none;
  color: var(--grape-text);
}

.devices-summary-head > div {
  flex: 1;
}

.row-list {
  display: grid;
  gap: 10px;
}

.row-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 18px 20px;
  border-radius: var(--r-l);
  background: var(--bg-elevated);
  border: 1px solid var(--stroke);
  transition: border-color var(--dur-fade) ease-out;
}

.row-card:hover {
  border-color: var(--stroke-strong);
}

.row-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  background: var(--bg-raised);
  color: var(--grape-text);
}

.row-main {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.row-meta {
  font-size: 14px;
  color: var(--text-2);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 560px) {
  .row-actions {
    width: 100%;
    padding-left: 60px;
  }
}

@media (max-width: 400px) {
  .row-actions {
    padding-left: 0;
  }
}


/* =========================================================================
   Server-rendered additions (no React state: radios, <details>, confirm cards)
   ========================================================================= */

/* Selected segment without JS: the checked radio drives it. */
.segment:has(input:checked) {
  background: var(--grape-deep);
  color: var(--text-1);
}

/* Meter widths in 5% steps (strict CSP: no inline style attributes). */
.meter > .m-0 { width: 0; } .meter > .m-5 { width: 5%; } .meter > .m-10 { width: 10%; } .meter > .m-15 { width: 15%; }
.meter > .m-20 { width: 20%; } .meter > .m-25 { width: 25%; } .meter > .m-30 { width: 30%; } .meter > .m-35 { width: 35%; }
.meter > .m-40 { width: 40%; } .meter > .m-45 { width: 45%; } .meter > .m-50 { width: 50%; } .meter > .m-55 { width: 55%; }
.meter > .m-60 { width: 60%; } .meter > .m-65 { width: 65%; } .meter > .m-70 { width: 70%; } .meter > .m-75 { width: 75%; }
.meter > .m-80 { width: 80%; } .meter > .m-85 { width: 85%; } .meter > .m-90 { width: 90%; } .meter > .m-95 { width: 95%; }
.meter > .m-100 { width: 100%; }

.banner p {
  margin: 0;
}

.banner-flash > svg {
  color: var(--confetti-mint);
}

.account-body > .inline-error,
.account-flash {
  margin-bottom: 0;
}

/* Confirmation step (server-rendered, or replaced by confirm() when JS runs) */
.confirm-card {
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--grape-start) 35%, transparent);
}

.confirm-card .dialog-text {
  margin-bottom: 0;
}

.confirm-card .dialog-actions {
  justify-content: flex-start;
}

.inline-actions {
  display: contents;
}

/* Playlist form: one group of fields per type. JS shows only the chosen one; without JS all are listed. */
.type-group {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: var(--r-l);
  border: 1px solid var(--stroke);
}

.js .type-group {
  padding: 0;
  border: 0;
}

.type-group[hidden] {
  display: none;
}

.type-group-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.js .type-group-title,
.js .nojs-only {
  display: none;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}

.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--grape-deep);
}

.advanced > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
}

.advanced > summary::-webkit-details-marker {
  display: none;
}

.advanced[open] .advanced-show,
.advanced:not([open]) .advanced-hide {
  display: none;
}

.back-link {
  font-size: 15px;
}

.back-link svg {
  transform: rotate(180deg);
}

/* Password toggle exists only when JS can run it. */
.password-toggle[hidden] {
  display: none;
}

.form-card {
  max-width: 720px;
}

.form-card .form {
  margin-top: 0;
}

.error-page {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding-block: 96px;
}

/* /link: approving a TV sign-in by code */
.link-device-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-l, 18px);
  color: var(--grape-text);
  background: rgba(162, 59, 255, 0.12);
  margin-bottom: 8px;
}
.state-icon--ok { color: var(--confetti-mint); }