/* Account pages (sign in, sign up, plans, platform) and the account forms shared with the editor's dialogs. */

/* Screen sizes: four shared steps, the same in both stylesheets (and 720 in js/liveedit.js).
     480    small phones
     720    phones — 721 and up is a tablet or bigger
     1024   tablets — 1025 and up is a desktop
     1280   narrow desktops
   Components that live in a dialog use container queries sized to themselves instead. */

/* ---------- forms ---------- */

/* Rows keep their natural height. Side by side in a grid, fields stretch to the tallest one, and without this
   that spare height is shared out between the label, the box and the hint — so a field with a one-line hint sits
   its box lower, and taller, than the field beside it with a two-line hint. Nothing lines up. */
.form-field {
  display: grid;
  align-content: start;
  gap: 6px;
}

.form-label {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}

.form-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d6d6d2;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-input:hover:not(:focus):not([readonly]) {
  border-color: #bdbdb8;
}

.form-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgb(20 20 20 / 0.08);
}

.form-input[readonly] {
  background: var(--surface-2);
  color: var(--text-2);
}

.form-input[aria-invalid] {
  border-color: var(--brand);
}

.form-input[aria-invalid]:focus {
  box-shadow: 0 0 0 3px rgb(215 50 43 / 0.12);
}

/* A FastGen menu standing in for a field keeps its value in a hidden input, which is what an error marks; the
   button people see is outlined in its place (the country on the billing details, the topic on Contact us). */
.menu-field:has(> input[aria-invalid]) > .menu-button {
  border-color: var(--brand);
}

.form-hint {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.form-error {
  font-size: var(--fs-sm);
  color: var(--danger);
}

.password-wrap {
  position: relative;
}

.password-wrap .form-input {
  padding-inline-end: 64px;
}

.reveal {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}

/* Buttons that were grey (Ahmed, 28 Oct 2026): #EAF0FF where they have a fill, #D4DEFC under the pointer, FastGen
   blue with white words while pressed. */
.reveal:hover {
  background: var(--accent-hover);
  color: var(--text);
}

.reveal:active {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-large {
  min-height: 46px;
  font-size: var(--fs-base);
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.auth-notice {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
}

.auth-notice.is-error {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.auth-notice.is-info {
  background: var(--surface-2);
  color: var(--text-2);
}

.auth-notice.is-success {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success-ink);
}

.auth-notice:focus {
  outline: none;
}

/* ---------- sign in / sign up ---------- */

.auth-body {
  background: var(--surface);
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  min-height: 100vh;
}

/* Brand panel: dark, with the pitch and the post sizes FastGen exports. */
.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 48px;
  background: var(--text);
  color: #fff;
}

/* The logo file is solid black, so it is drawn as a shape in the panel's logo colour: white unless the Super Admin
   chooses another (an inline background-color, from server/content.mjs). */
.auth-brand-logo {
  display: block;
  flex: none;
  align-self: flex-start;
  width: 159px;
  height: 84px;
  background-color: #fff;
  -webkit-mask: url('../FastGen-logo.svg') center / contain no-repeat;
  mask: url('../FastGen-logo.svg') center / contain no-repeat;
}

/* High-contrast modes repaint backgrounds, which would hide a logo drawn as one. */
@media (forced-colors: active) {
  .auth-brand-logo {
    forced-color-adjust: none;
    background-color: CanvasText !important;
  }
}

.auth-brand-copy {
  display: grid;
  gap: var(--sp-4);
  max-width: 520px;
}

.auth-brand-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.auth-brand-text {
  color: rgb(255 255 255 / 0.72);
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.auth-formats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

/* Drawn in the panel's text colour (white unless the Super Admin chooses one), so they read on a light background too. */
.auth-format {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.auth-format-ratio {
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Form panel: the form sits in a fixed-width column in the middle. */
.auth-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-5);
}

/* The language menu: in the corner, out of the form's way (the left corner in Arabic). On About, Terms and Privacy it
   sits at the end of the header instead. Only as wide as the language's name. */
.auth-lang {
  position: absolute;
  top: var(--sp-4);
  inset-inline-end: var(--sp-5);
}

:is(.auth-lang, .page-lang) .menu-button {
  width: auto;
}

/* Over an English page shown to someone reading in Arabic, saying its Arabic version isn't written yet. */
.page-lang-note {
  font-family: 'Alyamama', var(--font);
}

.auth-card {
  width: 100%;
  max-width: 360px;
}

.auth-logo {
  display: none; /* the brand panel shows the logo; small screens show this one */
  margin-bottom: 40px;
}

.auth-logo img {
  display: block;
}

#auth-view {
  display: grid;
  gap: var(--sp-5);
}

.auth-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.auth-title:focus {
  outline: none;
}

.auth-sub {
  margin-top: calc(var(--sp-2) - var(--sp-5));
  color: var(--text-2);
  font-size: var(--fs-base);
}

.auth-sub strong {
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.auth-form {
  display: grid;
  gap: var(--sp-4);
}

.auth-form .btn-large {
  margin-top: var(--sp-2);
}

/* A checkbox with its words beside it and a hint underneath ("Trust this browser for 30 days"). */
.check-field {
  display: grid;
  gap: var(--sp-1);
}

.check-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
  cursor: pointer;
}

.check-label input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.check-field .form-hint {
  padding-left: calc(16px + var(--sp-2));
}

.auth-forgot {
  justify-self: end;
  margin-top: calc(-1 * var(--sp-2));
  font-size: var(--fs-md);
}

.auth-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
}

.auth-link:hover {
  text-decoration-color: currentColor;
}

.auth-foot {
  color: var(--text-2);
  font-size: var(--fs-md);
  text-align: center;
}

/* "By starting a trial you agree to the Terms and the Privacy Policy", under the button that starts it. */
.auth-agree {
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.provider-list {
  display: grid;
  gap: var(--sp-2);
}

.provider-btn {
  min-height: 46px;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-base);
  text-decoration: none;
}

.provider-icon {
  display: inline-flex;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-actions {
  display: grid;
  gap: var(--sp-2);
}

.auth-status {
  min-height: 1.45em;
  color: var(--text-2);
  font-size: var(--fs-md);
  text-align: center;
}

@media (max-width: 720px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-aside {
    display: none;
  }

  .auth-main {
    align-items: flex-start;
    padding: var(--sp-6) var(--sp-4);
  }

  .auth-lang {
    inset-inline-end: var(--sp-4);
  }

  .auth-logo {
    display: inline-block;
    margin-bottom: var(--sp-6);
  }
}

/* ---------- plans & platform pages ---------- */

.page-body {
  height: auto;
  min-height: 100%;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.page-head img {
  display: block;
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  color: var(--text-2);
  font-size: var(--fs-md);
}

.page-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-main {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px var(--sp-5) 64px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-sub {
  max-width: 620px;
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-lg);
}

/* Monthly / Annual. Only shown when a plan is actually sold both ways, so it sits above the cards rather than
   inside them: one choice for the whole page, not one per card. */
.billing-switch {
  display: inline-flex;
  gap: 2px;
  margin-top: var(--sp-5);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.billing-option {
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
}

.billing-option:hover {
  color: var(--text);
}

.billing-option.is-on {
  background: var(--accent);
  color: #fff;
}

/* The switch already spaces the cards away from the heading when it is there. */
.billing-switch + .plans {
  margin-top: var(--sp-4);
}

/* Cards size themselves to how many plans there are, so adding one doesn't need a new column count.
   The five shared rows — name, description, price, features, button — let each card hand its parts to the same
   tracks, so prices sit on one line however many lines of description run above them. */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--sp-4);
  margin-top: 40px;
}

/* Only the customer-facing cards: a card in the panel holds a form, not these five parts. */
.plan:not(.plan-card) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: var(--sp-3);
}

/* What a year works out at per month, so the two prices can be compared without doing the division. It lives
   inside the price line rather than beside it, because the cards line up five parts and this would be a sixth. */
.plan-price-note {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* The "Let's talk" card has no figure to anchor it, so its price line carries the weight a number would. */
.plan.is-contact .plan-price {
  color: var(--text);
  font-weight: 500;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.plan h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.plan-price {
  color: var(--text-2);
}

.plan .btn {
  margin-top: auto;
}

/* A plan that can't be bought yet: the button, and underneath it the reason, since a disabled button can't show
   a tooltip. The pair sits at the foot of the card as the button alone did. */
.plan-action {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.plan-action .btn {
  margin-top: 0;
}

.plan-soon {
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Template setup services: one wide card under the plans, its words on the start side and its price and button on
   the end side. On a phone the two stack. */
.service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.service-card h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.service-text {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  max-width: 62ch;
}

/* The price sits above its button, centred over it. */
.service-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  flex: none;
  min-width: 180px;
  text-align: center;
}

/* Sized and weighted like the plans' prices (it carries .plan-price too). */
.service-price {
  white-space: nowrap;
}

.service-price-note {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 400;
}

@media (max-width: 720px) {
  .service-card {
    flex-direction: column;
    align-items: stretch;
  }
}

.plans-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
}

.plans-note strong {
  color: var(--text);
  font-weight: 500;
}

.pulse-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--warn-dot);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

@media (max-width: 720px) {
  .plans,
  .plans-edit {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  /* Stacked, there is nothing to line a card up with, so it goes back to being a plain column. */
  .plan:not(.plan-card) {
    display: flex;
    grid-row: auto;
  }

  .page-main {
    padding: var(--sp-6) var(--sp-4) 48px;
  }

  .page-head {
    padding: var(--sp-3) var(--sp-4);
  }
}

/* Super Admin */

.platform-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.stat {
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.stat-value {
  display: block;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* The headline metric (Organizations) stands out. */
.stat.is-featured {
  background: var(--accent);
  color: var(--accent-ink);
}

.stat.is-featured .stat-value {
  font-size: 36px;
}

.stat.is-featured .stat-label,
.stat.is-featured .stat-note {
  color: rgb(255 255 255 / 0.8);
}

/* Counts that are bad news (e.g. Expired) are red when above zero, and muted at zero. */
.stat.is-warning .stat-value {
  color: var(--danger);
}

.stat.is-zero .stat-value {
  color: var(--text-3);
}

.stat-label {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.org-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
}

.org-toolbar h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.org-search {
  width: min(280px, 100%);
  min-height: 38px;
}

.org-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.org-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.org-table th,
.org-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.org-table th {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface-2);
}

.org-table tr:last-child td {
  border-bottom: 0;
}

.org-name {
  font-weight: 500;
}

.org-meta {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status.is-trial {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.status.is-paid {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success-ink);
}

.status.is-expired {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.plan-form {
  display: grid;
  gap: var(--sp-4);
}

.plan-form-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: var(--sp-3);
}

.form-select {
  appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-inline-end: 34px;
}

/* A menu standing in for a form field wears that field's clothes — .form-input sizes it — but draws its own
   chevron, so the background image and the room kept for it both go. */
.menu-button.form-select {
  background-image: none;
  padding-inline-end: 12px;
}

/* A filter sits in a bar beside others and is as wide as its longest option, not as wide as the bar. */
.menu-button.filter-select {
  width: auto;
}

.plan-preview {
  color: var(--text-2);
  font-size: var(--fs-md);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

@media (max-width: 720px) {
  .platform-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- editor: account ---------- */

a.menu-item {
  color: var(--text);
  text-decoration: none;
}

.menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}

.trial-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 10px;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.trial-badge:hover {
  background: var(--accent-hover);
}

.trial-badge:active {
  background: var(--accent);
  color: var(--accent-ink);
}

.trial-badge-title {
  font-weight: 500;
  color: var(--text);
}

.trial-badge.is-ending {
  border-color: #f0d68a;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.trial-badge.is-ending .trial-badge-title {
  color: var(--warn-ink);
}

.account-dialog {
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
}

.account-dialog:not(.dialog-wide) {
  width: min(440px, calc(100vw - 32px));
}

.account-form {
  display: grid;
  gap: var(--sp-4);
}

.account-form .form-input {
  min-height: 40px;
  font-size: var(--fs-md);
}

.account-section {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.account-section.is-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.account-section-title {
  font-size: var(--fs-base);
  font-weight: 600;
}

.avatar-small {
  width: 32px;
  height: 32px;
  font-size: var(--fs-xs);
}

.avatar-pending {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px dashed #c9c9c5;
}

.team-who {
  display: grid;
  min-width: 0;
}

.team-name {
  font-size: var(--fs-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-you {
  color: var(--text-3);
  font-weight: 400;
}

.team-email {
  color: var(--text-3);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-pill {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.role-pill.is-admin {
  background: var(--accent);
  color: var(--accent-ink);
}

.role-pill.is-owner {
  background: var(--text);
  color: var(--surface);
}

/* The owner's role switch: looks like the pill, with a chevron. */
/* A pill rather than a field: the role sits in a row of names, and a full-width box would shout. The chevron is
   the menu's own, so there is no background image to line up any more. */
.role-select {
  width: auto;
  min-height: 0;
  gap: 5px;
  padding: 2px 8px;
  border: 0;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

.role-select .menu-chevron {
  width: 6px;
  height: 6px;
  margin-inline-end: 0;
  border-color: currentColor;
}

.role-select.is-admin {
  background-color: var(--accent);
  color: var(--accent-ink);
}

.role-select:hover {
  filter: brightness(0.96);
}

.role-select option {
  background: var(--surface);
  color: var(--text);
}

/* ---------- editor: Team ---------- */

.team {
  width: min(1040px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  container: team / inline-size;
}

.team[open] {
  display: flex;
  flex-direction: column;
}

.team-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.team-title {
  flex: 1;
  min-width: 0;
}

.team-sub {
  margin-top: 2px;
  font-size: var(--fs-md);
  color: var(--text-2);
}

.team-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.team-main {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 8px 24px 88px;
  overflow-y: auto;
}

.team-table {
  width: 100%;
  border-collapse: collapse;
}

.team-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
  text-align: start;
}

.team-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.team-table tbody tr:last-child td {
  border-bottom: 0;
}

.team-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-seen {
  font-size: var(--fs-md);
  color: var(--text-2);
  white-space: nowrap;
}

.team-seen.is-waiting {
  color: var(--warn-ink);
}

.team-more {
  width: 48px;
  text-align: end;
}

.team-more .more-btn {
  margin-inline-start: auto;
}

.team-alone {
  margin-top: 16px;
  font-size: var(--fs-md);
  color: var(--text-2);
}

/* How many of the plan's places are taken (account.js places), in the warning colours once they all are. */
.team-places {
  margin-top: 16px;
  font-size: var(--fs-md);
  color: var(--text-2);
}

.team-places.is-full {
  color: var(--warn-ink);
}

/* The panel beside the list for adding someone. */
.team-add {
  flex: none;
  width: 360px;
  padding: 20px;
  border-inline-start: 1px solid var(--line);
  background: #fbfbfa;
  overflow-y: auto;
}

.team-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.team-add h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.team-add-form {
  display: grid;
  gap: 14px;
}

.team-add .form-input {
  min-height: 40px;
  font-size: var(--fs-base);
}

.team-add-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.team-added {
  display: grid;
  gap: 12px;
}

/* Two answers side by side, the chosen one raised: Editor or Admin. */
.seg-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  font-size: var(--fs-md);
}

.seg-choice span {
  display: block;
  padding: 7px;
  border-radius: var(--radius-xs);
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
}

.seg-choice input:checked + span {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.seg-choice input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* A field with a small button beside it, such as a password with "make another". */
.field-with-button {
  display: flex;
  gap: 6px;
}

.field-with-button .form-input {
  flex: 1;
  min-width: 0;
}

.field-with-button .icon-btn {
  width: 40px;
  height: auto;
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mono-input {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-md);
}

/* Two arrows chasing each other: make another. */
.regen-icon {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.5 7.5A6 6 0 0 0 4.6 6.3M4.5 12.5a6 6 0 0 0 10.9 1.2M4 3v3.8h3.8M16 17v-3.8h-3.8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phones and narrow windows: the panel takes the place of the list while it's open. */
@container team (max-width: 720px) {
  .team-head {
    padding: 14px 16px;
  }

  .team-main {
    padding: 4px 16px 88px;
  }

  .team-add {
    width: 100%;
    border-inline-start: 0;
  }

  .team-layout:has(.team-add:not([hidden])) .team-main {
    display: none;
  }

  .team-table thead {
    display: none;
  }

  .team-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .team-table td {
    padding: 0;
    border: 0;
  }

  .team-table td:first-child {
    grid-column: 1 / -1;
  }

  .team-table td.team-seen {
    grid-column: 1;
    font-size: var(--fs-sm);
  }

  .team-table td.team-more {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
  }
}

/* ---------- editor: permissions ---------- */

.panel-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  max-width: 420px;
  margin: 48px auto;
  padding: 0 var(--sp-4);
  text-align: center;
}

.panel-empty h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.panel-empty p {
  color: var(--text-2);
}

.panel-empty .btn {
  margin-top: var(--sp-2);
}

.preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 var(--sp-2) var(--sp-3);
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-md);
}

.preview-banner strong {
  font-weight: 600;
}

/* Same bar, different news: the allowance one is a warning, and it is the one thing still lit while the
   editor is locked, because it is the way out. It must come after .preview-banner to win. */
.limit-banner {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.limit-banner .btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

.preview-exit {
  flex: none;
  background: var(--surface);
  color: var(--text);
}

.preview-exit:hover {
  background: var(--accent-hover);
}

.preview-exit:active {
  background: var(--accent);
  color: var(--accent-ink);
}

.perm-page {
  width: min(1180px, calc(100vw - 32px));
  height: min(860px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.25);
  overflow: hidden;
}

.perm-page[open] {
  display: flex;
  flex-direction: column;
}

.perm-page::backdrop {
  background: rgb(20 20 20 / 0.45);
}

.perm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.perm-head h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.perm-sub {
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-md);
}

.perm-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  min-height: 0;
}

.perm-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  padding: var(--sp-4);
  border-inline-end: 1px solid var(--line);
  background: var(--bg);
}

.perm-list-search {
  min-height: 38px;
  font-size: var(--fs-md);
}

.perm-template-list {
  display: grid;
  align-content: start;
  gap: 2px;
  margin: 0 -6px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.perm-template {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.perm-template:hover {
  background: var(--surface-3);
}

.perm-template[aria-current='true'] {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.perm-thumb {
  flex: none;
  width: 36px;
  height: 45px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  object-fit: cover;
}

.perm-template-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.perm-template-name {
  font-size: var(--fs-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perm-template-meta {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.perm-dirty-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn-dot);
}

.perm-list-empty {
  padding: var(--sp-4) 6px;
  color: var(--text-3);
  font-size: var(--fs-md);
}

.perm-select-wrap {
  display: none;
}

.perm-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  padding: var(--sp-4) var(--sp-5) 0;
}

.perm-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.perm-template-title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.perm-summary {
  color: var(--text-2);
  font-size: var(--fs-md);
}

.perm-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.perm-save-state {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.perm-save-state.is-dirty {
  color: var(--warn-ink);
}

.perm-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.perm-quick-label {
  margin-inline-end: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.perm-quick-spacer {
  flex: 1;
}

.perm-filter {
  min-height: 38px;
  font-size: var(--fs-md);
}

.perm-sections {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  flex: 1;
  min-height: 0;
  margin: 0 calc(-1 * var(--sp-5));
  padding: 2px var(--sp-5) var(--sp-5);
  overflow-y: auto;
}

.perm-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.perm-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
}

.perm-section-head::-webkit-details-marker {
  display: none;
}

.perm-section-head:hover {
  background: var(--surface-2);
}

.perm-section[open] > .perm-section-head {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.perm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* The tabs' own icons come without a size of their own: all of them 16px, the size the editor's tabs draw them. */
.perm-icon svg {
  width: 16px;
  height: 16px;
}

.perm-section-title {
  display: grid;
  flex: 1;
  min-width: 0;
}

.perm-section-name {
  font-weight: 600;
}

.perm-section-meta {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.perm-section.is-hidden .perm-section-name,
.perm-section.is-hidden .perm-icon {
  color: var(--text-3);
}

.perm-master {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.perm-master-label {
  min-width: 46px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: end;
}

.perm-chevron {
  width: 8px;
  height: 8px;
  margin: 0 4px 4px;
  border: solid var(--text-3);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.perm-section[open] .perm-chevron {
  margin: 4px 4px 0;
  transform: rotate(225deg);
}

.perm-section-body {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) 14px var(--sp-4) 60px;
}

.perm-section.is-hidden .perm-group {
  opacity: 0.55;
}

.perm-hidden-note {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-md);
}

.perm-group {
  display: grid;
  gap: 4px;
}

.perm-group-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.perm-group-check {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.perm-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.perm-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.perm-option-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
}

.perm-rec {
  padding: 0 6px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-xs);
}

@media (max-width: 1024px) {
  .perm-page {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .perm-head {
    padding: var(--sp-4);
  }

  .perm-body {
    display: flex;
    flex-direction: column;
  }

  .perm-aside {
    display: none;
  }

  .perm-select-wrap {
    display: grid;
    gap: 4px;
    padding: var(--sp-3) var(--sp-4) 0;
  }

  .perm-main {
    flex: 1;
    padding: var(--sp-3) var(--sp-4) 0;
  }

  .perm-toolbar {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .perm-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .perm-save-state {
    flex-basis: 100%;
  }

  .perm-sections {
    margin: 0 calc(-1 * var(--sp-4));
    padding: 2px var(--sp-4) var(--sp-5);
  }

  .perm-section-body {
    padding: var(--sp-3) 14px;
  }

  .perm-options {
    grid-template-columns: 1fr;
  }

  .perm-master-label,
  .perm-quick-label {
    display: none;
  }
}

/* ---------- Super Admin "log in as" banner ---------- */

.imp-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 40px;
  padding: 4px var(--sp-4);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-md);
}

.imp-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imp-end {
  flex: none;
  min-height: 28px;
  background: #fff;
  color: var(--brand);
}

.imp-end:hover {
  background: var(--danger-bg);
}

@media (min-width: 1025px) {
  body.is-impersonating .app {
    height: calc(100vh - 40px);
  }
}

@media (max-width: 720px) {
  .imp-text {
    white-space: normal;
    font-size: var(--fs-sm);
  }
}

.plan.is-current {
  border-color: var(--accent);
}

.plan-description {
  color: var(--text-2);
  font-size: var(--fs-md);
}

.plan-price {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}

.plan-features {
  display: grid;
  /* The list now sits in a row taller than itself, and a grid's auto rows stretch to fill by default. */
  align-content: start;
  gap: 6px;
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-md);
}

.plan-features li {
  display: flex;
  gap: 8px;
}

.plan-features li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 9px;
  margin: 3px 3px 0 2px;
  border: solid var(--success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.plans-usage {
  margin-top: var(--sp-4);
  color: var(--text-2);
}

/* Billing details: what goes on the organization's invoices. The owner's to fill in; other admins see who that is. */
.invoice-section {
  margin-top: 48px;
}

.invoice-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-3);
}

.invoice-title {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.invoice-sub {
  margin-top: 4px;
  color: var(--text-2);
}

.invoice-card {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.invoice-empty {
  color: var(--text-2);
}

.invoice-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
}

.invoice-side {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.invoice-label {
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.invoice-address {
  font-style: normal;
  line-height: 1.55;
}

.invoice-address span {
  display: block;
}

.invoice-address span:first-child {
  font-weight: 600;
}

.org-billing {
  display: grid;
  gap: 4px;
  font-size: var(--fs-md);
}

.account-dialog.invoice-dialog {
  width: min(520px, calc(100vw - 32px));
}

@media (max-width: 720px) {
  .invoice-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Super Admin panel sections ---------- */

/* The section links, down the side (see "Super Admin: layout" below). */
.platform-nav-link {
  flex: none;
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.platform-nav-link:hover {
  color: var(--text);
}

.platform-nav-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}


.section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.section-bar .page-sub {
  margin-top: 0;
  font-size: var(--fs-base);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter-select {
  width: auto;
  min-height: 38px;
  font-size: var(--fs-md);
}

.platform-stats {
  margin-top: 0;
}

a.stat {
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease);
}

a.stat:hover {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

a.stat.is-featured {
  color: var(--accent-ink);
}

.stat-note {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.chart {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.chart-head {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: var(--fs-md);
}

.chart-head strong {
  color: var(--text);
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  margin-top: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.chart-bar {
  flex: 1;
  min-width: 2px;
  height: calc(var(--v) * 100%);
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.chart-bar:hover {
  background: color-mix(in srgb, var(--accent), #000 25%);
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* In the editor now: one large number where a chart would be, with a dot that says it's live. */
.live-card {
  display: flex;
  flex-direction: column;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

.live-count {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--sp-3);
}

.live-value {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.live-value.is-zero {
  color: var(--text-3);
}

.subhead {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 600;
}

.top-orgs {
  margin-top: var(--sp-5);
}

.top-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.top-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: var(--fs-md);
}

.top-list li + li {
  border-top: 1px solid var(--line);
}

.table-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: #c9c9c5;
  text-underline-offset: 3px;
}

.actions-cell {
  text-align: right;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.row-menu {
  position: relative;
}

.row-menu > summary {
  list-style: none;
  letter-spacing: 1px;
}

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

.row-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
  text-align: left;
}

.menu-danger {
  color: var(--danger);
}

.menu-danger.is-confirming {
  background: var(--danger-bg);
}

.org-table-wrap:has(.row-menu[open]) {
  overflow: visible;
}

.people-table .group-row th,
.people-table .group-row td {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-md);
}

.people-group.is-collapsed .person-row {
  visibility: collapse; /* keeps column widths steady */
}

.group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  margin: -4px 0 -4px -4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.group-toggle:hover {
  background: var(--line);
}

.group-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.group-chevron {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 2px 0 4px;
  border: solid var(--text-2);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}

.group-toggle[aria-expanded='true'] .group-chevron {
  transform: rotate(45deg);
}

.group-status {
  margin-left: 10px;
}

.people-table .group-indent {
  width: 28px;
  border-bottom-color: transparent;
}

.people-table tr.is-disabled .org-name {
  color: var(--text-3);
  text-decoration: line-through;
}

/* Three across, so the three priced plans make a row and Enterprise sits with the trial beneath them. */
.plans-edit {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: none;
  align-items: start;
  margin-top: var(--sp-4);
}

.plan-edit {
  display: grid;
  gap: var(--sp-3);
}

/* "Price on request" sits beside its switch, not above it like the text fields. */
.plan-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.plan-contact-row .form-label {
  margin: 0;
}

/* Price and allowances stay readable but clearly out of play while the plan is priced on request. */
.plan-edit .is-muted {
  opacity: 0.45;
}

.plan-edit .form-input {
  min-height: 38px;
  font-size: var(--fs-md);
}

.price-row {
  display: grid;
  gap: var(--sp-3);
}

.price-selects {
  display: grid;
  grid-template-columns: minmax(0, 140px);
  gap: var(--sp-2);
}

.plan-features-input {
  resize: vertical;
  line-height: 1.5;
}

.audit-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.audit-item {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: 10px 14px;
  font-size: var(--fs-md);
}

.audit-item + .audit-item {
  border-top: 1px solid var(--line);
}

.audit-time {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.audit-text strong {
  font-weight: 600;
}

.audit-badge {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  vertical-align: 1px;
}

.audit-org {
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: right;
}

@media (max-width: 720px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }

  .audit-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .audit-org {
    text-align: left;
  }

  .filters,
  .filters > *,
  .section-bar .org-search {
    width: 100%;
  }
}

.section-bar .page-sub {
  flex: 1 1 260px;
}

.section-bar .filters {
  justify-content: flex-end;
}

/* People: the search on top, and the two menus under it sharing its width equally. */
.filters.people-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, 100%);
}

.people-filters .org-search {
  grid-column: 1 / -1;
  width: 100%;
}

.people-filters .filter-select {
  width: 100%;
}

@media (max-width: 720px) {
  .filters.people-filters {
    width: 100%;
  }
}

/* ---------- header profile menu (Plans & Platform pages) ---------- */

.page-who-placeholder {
  display: block;
  width: 180px;
  height: 44px;
}

.head-profile-wrap {
  position: relative;
}

.head-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.head-profile:hover,
.head-profile[aria-expanded='true'] {
  background: var(--accent-hover);
  border-color: var(--accent-200);
}

.head-profile-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.head-profile-name {
  font-size: var(--fs-md);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-profile-sub {
  color: var(--text-3);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-profile-chevron {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 3px 2px;
  border: solid var(--text-2);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.head-profile[aria-expanded='true'] .head-profile-chevron {
  margin: 3px 4px 0 2px;
  transform: rotate(225deg);
}

.head-menu {
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: auto;
  width: 260px;
  z-index: 70;
}

.head-menu-who {
  display: grid;
  padding: 8px 10px 6px;
}

.head-menu-name {
  font-weight: 600;
  font-size: var(--fs-md);
}

.head-menu-email {
  color: var(--text-3);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.avatar-large {
  width: 52px;
  height: 52px;
  font-size: var(--fs-base);
}

.avatar.has-photo {
  overflow: hidden;
  background: var(--surface-2);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.photo-section {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
}

.photo-section .avatar-large {
  width: 72px;
  height: 72px;
  font-size: var(--fs-lg);
}

.photo-trigger {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.photo-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center no-repeat;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.photo-trigger:hover::after,
.photo-trigger:focus-visible::after {
  opacity: 1;
}

.photo-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.photo-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-profile-name {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.email-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.email-value {
  margin-top: 2px;
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}

.email-pending {
  display: grid;
  gap: 6px;
}

.email-pending strong {
  color: var(--text);
  font-weight: 600;
}

.email-pending .link-btn {
  justify-self: start;
  font-size: var(--fs-md);
}

.chart-empty {
  display: grid;
  place-items: center;
  height: 120px;
  margin-top: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-md);
}

@media (max-width: 720px) {
  .head-profile-text {
    display: none;
  }

  .head-profile {
    padding-right: 8px;
  }
}

/* ---------- two-step sign-in ---------- */

.two-step-status {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-weight: 500;
}

.status-dot {
  flex: none;
  margin-top: 6px; /* centered on the first line */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}

.status-dot.is-on {
  background: var(--success);
}

.two-step-actions {
  justify-content: flex-start;
}

/* My profile → Passkeys. */
.passkey-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.passkey-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.passkey-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* System Settings → Header and footer code. */
.code-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 2;
}

.site-code-allowed {
  display: grid;
  gap: var(--sp-2);
}

.allowed-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.allowed-list code {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* Under the error alerts: the address an outside uptime checker watches. */
.uptime-note {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.trusted-browsers {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.two-step-steps {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.two-step-qr {
  display: flex;
  justify-content: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.two-step-key,
.backup-codes code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.two-step-key span {
  white-space: nowrap; /* groups of four wrap whole */
}

.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.two-step-setup,
.two-step-codes {
  display: grid;
  gap: var(--sp-3);
}

.super-admin-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* ---------- profile window: two columns on desktop, so nothing needs scrolling ---------- */

.account-dialog.profile-dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
}

.profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.profile-top .photo-section {
  padding-bottom: 0;
}

.profile-plan {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.profile-plan-name {
  font-weight: 600;
}

.profile-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--sp-6);
}

.profile-col + .profile-col {
  padding-inline-start: var(--sp-6);
  border-inline-start: 1px solid var(--line);
}

.profile-col > .account-section {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
}

.profile-col > .account-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.profile-plan .btn {
  text-decoration: none;
}

/* While two-step sign-in is being set up, it takes the whole column (the QR code needs the room). */
.profile-col:has(.two-step-setup, .two-step-codes) > .account-section:not(:has(.two-step)) {
  display: none;
}

.profile-col:has(.two-step-setup, .two-step-codes) > .account-section:has(.two-step) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 720px) {
  .profile-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-col + .profile-col {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .profile-col + .profile-col > .account-section:first-child {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
  }
}

/* QR code beside its instructions */
.two-step-scan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.two-step-qr-wrap {
  display: grid;
  gap: var(--sp-2);
  width: min-content; /* the note wraps to the QR code's width */
}

.two-step-qr {
  padding: var(--sp-2);
}

.two-step-app-note {
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.45;
}

@media (max-width: 480px) {
  .two-step-scan {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

/* Two short fields side by side (new password and its confirmation). */
.field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.field-pair-hint {
  margin-top: calc(-1 * var(--sp-2));
}

@media (max-width: 480px) {
  .field-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- allowances, the AI section ---- */

/* Posters and AI Image Extensions sit side by side: two separate monthly allowances. */
.allowance-row {
  display: grid;
  /* One under the other, all the same width. Side by side, the third field had nothing to pair with and
     took the whole row, and two hints of different lengths left a hole under the shorter one. They are
     three of the same kind of thing — a number and a line about it — so none of them earns more room. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.plan-card.is-trial-card {
  border-style: dashed;
}

/* Template setup services in the panel: a full-width card under the plans, its fields in two columns
   (what it is on one side, its price, note and button on the other). */
.setup-service-edit {
  margin-top: var(--sp-4);
}

.setup-service-edit .plan-edit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-5);
  align-items: start;
}

.setup-service-edit .plan-edit > .form-message,
.setup-service-edit .plan-edit > .form-hint,
.setup-service-edit .plan-edit > .plan-contact-row,
.setup-service-edit .plan-edit > .dialog-actions {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .setup-service-edit .plan-edit {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The one switch that turns every AI tool on or off. */
.ai-master {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ai-master .subhead {
  margin: 0 0 4px;
}

.ai-switch {
  display: inline-flex;
  flex: none;
}

.ai-switch .switch {
  width: 48px;
  height: 28px;
}

.ai-switch .switch::after {
  width: 24px;
  height: 24px;
}

.ai-switch .switch:checked::after {
  transform: translateX(20px);
}

/* Each AI tool's own switch, under the one for them all: one row each, in a box like it. */
.ai-tools {
  margin-top: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ai-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.ai-tool + .ai-tool {
  border-top: 1px solid var(--line);
}

.ai-tool .org-meta {
  margin: 2px 0 0;
}

.ai-block {
  margin-top: var(--sp-5);
}

.ai-block .section-bar {
  align-items: center;
}

.ai-block .plan-edit {
  max-width: 560px;
  margin-top: var(--sp-3);
}

/* A saved key is never shown again: only enough of it to tell two keys apart. */
.key-mask {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.is-positive {
  color: #1c7a4a;
  font-weight: 600;
}

.is-negative {
  color: var(--danger);
  font-weight: 600;
}

@media (max-width: 720px) {
  .ai-master {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* The overview gets its breathing room from the filter bar above the figures; the AI section has no such bar,
   so the figures ask for it themselves. */
.ai-stats {
  margin-top: var(--sp-5);
}

/* A line that explains the table under it shouldn't touch that table. */
.ai-note {
  margin-bottom: var(--sp-4);
}

/* A status line at the head of a section ("Sending. Messages go out through SMTP.") stands apart from the card
   under it, as the note above it does. */
.ai-block > .auth-notice {
  margin-bottom: var(--sp-3);
}

/* The AI page's status lines ("On, but nothing to call yet") stand apart from the on/off card above them, and from
   each other when there are two. */
.ai-master ~ .auth-notice {
  margin-top: var(--sp-3);
}

/* Left, under the fields it saves — right-aligned inside a narrow form leaves it stranded mid-page. */
.ai-block .plan-edit .dialog-actions {
  justify-content: flex-start;
  margin-top: var(--sp-1);
}

/* The models (25 Oct 2026): each tool's under its name, on a row in the header's grey. */
.model-group th {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* A model switched on whose key isn't there says so under its name. */
.model-wait {
  margin-top: 4px;
}

/* Add API key under the keys, as far from them as the note above is. */
.add-key {
  margin-top: var(--sp-4);
}

/* Names and model ids, edited in their rows. */
.model-input {
  min-width: 190px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
}

/* The models' cost a box no wider than its number, the size menu as narrow as 1K and 2K, and the form that adds one a
   little apart from the list. */
.input-prefix > .model-price {
  width: 96px;
  padding: 6px 8px 6px 22px;
  font-size: var(--fs-sm);
}

.org-table .form-select {
  min-width: 72px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
}

/* As far from the table as the next section is (.ai-block .plan-edit would make it 12px). */
.ai-block .model-add {
  margin-top: var(--sp-5);
}

/* ---- errors ---- */

/* A count on the navigation, so a new failure shows from any section. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-inline-start: 6px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.error-list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.error-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.error-item.is-new {
  border-color: var(--danger);
}

/* The header fills the card, so its focus ring is drawn just inside it and curves with the card's corners (less its
   1 px border) instead of a square box sticking out past them. Same for the messages below. */
.error-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
}

.error-item[open] > summary,
.message-item[open] > summary {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.error-item > summary:focus-visible,
.message-item > summary:focus-visible {
  outline-offset: -2px;
}

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

.error-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.error-message {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.error-body {
  padding: 0 var(--sp-4) var(--sp-4);
}

.error-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
}

.error-facts dt {
  color: var(--text-2);
}

.error-facts dd {
  margin: 0;
}

/* The stack is the useful part, so it keeps its own line breaks and scrolls rather than wrapping into soup. */
.error-stack {
  max-height: 260px;
  margin: 0;
  padding: var(--sp-3);
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}

/* A currency sign inside the box, in front of the number, so the unit isn't a guess. */
.input-prefix {
  position: relative;
  display: block;
}

.input-prefix > span {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  pointer-events: none;
}

.input-prefix > .form-input {
  padding-inline-start: 26px;
}

/* ---- reading pages (About, Terms) ---- */

/* A comfortable measure for reading: long lines are the fastest way to make text unreadable. */
.prose {
  max-width: 68ch;
}

.prose h2 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.prose p,
.prose li {
  color: var(--text-2);
  line-height: 1.7;
}

.prose p {
  margin: 0 0 var(--sp-3);
}

.prose ul {
  margin: 0 0 var(--sp-3);
  padding-inline-start: 1.2em;
}

.prose li {
  margin-bottom: 6px;
}

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

.prose .auth-notice {
  margin: var(--sp-4) 0;
}

.prose-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* The card and the legal links share a column, so the links sit under the card rather than beside it. */
.auth-column {
  display: grid;
  width: 100%;
  max-width: 360px;
}

.auth-column > .auth-card {
  max-width: none;
}

/* Links people expect to find before they sign up. */
.auth-legal {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}

/* The "Cookies" link beside About, Terms and Privacy: a button, dressed like its neighbours. */
.auth-legal .link-btn {
  font-size: inherit;
}

/* The cookie banner (js/consent.js): a card at the foot of the sign-in page that leaves the form usable. Accept and
   Decline are the same size, so neither is the easy way out. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.cookie-banner-text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-2);
}

.cookie-banner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

/* A quiet strip at the foot of the page: present when looked for, invisible when not. */
.page-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  max-width: 1040px;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.page-foot a {
  color: var(--text-2);
  text-decoration: none;
}

.page-foot a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Pages: the words on the public pages ---------- */

/* One column, not three: a page of writing needs the width, unlike a plan card's handful of numbers. */
.content-cards {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.content-card {
  max-width: 820px;
}

.content-edit {
  display: grid;
  gap: var(--sp-3);
}

.content-actions {
  justify-content: flex-start;
}

/* EN | AR under a card's title (languageTabs): which language's boxes show. Buttons rather than the radio inputs the
   other switches use, so changing language isn't counted as a change to the form. */
.lang-tabs {
  justify-self: start;
}

.lang-tabs .seg {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}

.lang-tabs .seg span {
  min-width: 48px;
}

.lang-tabs .seg[aria-pressed='true'] span {
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}

.lang-tabs .seg:focus-visible {
  outline: none;
}

.lang-tabs .seg:focus-visible span {
  outline: 2px solid var(--focus);
}

/* One language's boxes, laid out like the form around them. */
.lang-pane {
  display: grid;
  gap: var(--sp-3);
}

.lang-pane[hidden] {
  display: none;
}

/* ---------- the writing box ---------- */

.rich-field {
  display: grid;
  gap: 6px;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-2);
}

.rich-button {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}

.rich-button:hover {
  background: var(--surface);
  color: var(--text);
}

.rich-button.is-bold {
  font-weight: 700;
}

.rich-button.is-italic {
  font-style: italic;
}

.rich-link-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-2);
}

.rich-link-row .form-input {
  min-height: 32px;
}

/* Deep enough to write in, and it grows rather than scrolling away from what is being written. */
.rich-text {
  min-height: 260px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.rich-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* The writing box shows the shape of the page, not its exact typography: it is an editor, not a preview. */
.rich-text > * + * {
  margin-top: 0.85em;
}

.rich-text h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.rich-text h3 {
  font-size: var(--fs-base);
  font-weight: 600;
}

.rich-text ul,
.rich-text ol {
  padding-inline-start: 1.5em;
}

.rich-text li {
  list-style: revert;
}

.rich-text a {
  color: var(--accent);
}

/* ---------- the sign-in page's left side ---------- */

.auth-bg-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.colour-input {
  width: 64px;
  padding: 2px;
}

.form-range {
  flex: 1;
  max-width: 260px;
  accent-color: var(--accent);
}

/* The same panel the visitor sees, small enough to sit beside the fields that change it. */
.auth-bg-preview {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 170px;
  padding: var(--sp-4);
  border-radius: var(--radius);
  color: #fff;
}

.auth-bg-logo {
  width: 99px;
  height: 52px;
  margin-bottom: auto;
  background-color: #fff;
  -webkit-mask: url('../FastGen-logo.svg') center / contain no-repeat;
  mask: url('../FastGen-logo.svg') center / contain no-repeat;
}

.auth-bg-title {
  margin-top: var(--sp-6);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
}

.auth-bg-text {
  margin-top: 6px;
  font-size: var(--fs-md);
  color: rgb(255 255 255 / 0.72); /* as on the page itself, until a colour is chosen */
}

/* Headline, text and logo colours side by side, wrapping where the card is narrow. */
.auth-colours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
}

/* Muted the same way a plan's price is when it's on request: still readable, clearly not in play. */
.content-edit .is-muted {
  opacity: 0.45;
}

/* ---- System Settings ---- */

.setting-cards {
  display: grid;
  gap: var(--sp-4);
}

.setting-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  background: var(--surface);
}

.setting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.setting-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
}

.setting-lines {
  display: grid;
  gap: 2px;
  margin: var(--sp-3) 0;
}

/* Label, value, and the button that copies it. The value takes the slack so the buttons stay in one column. */
.setting-line {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.setting-line:last-child {
  border-bottom: 0;
}

.setting-label {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* A key, an ID or a URL is read character by character, and it must not push the card wider than the page. */
.setting-value {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.setting-value.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

.setting-actions {
  margin-top: var(--sp-3);
}

.status.is-ready {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success-ink);
}

.status.is-off {
  background: var(--surface-2);
  color: var(--text-3);
}

@media (max-width: 720px) {
  .setting-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setting-label {
    grid-column: 1 / -1;
  }
}

/* The email form lives inside a settings card, so it shouldn't also draw its own box, and it has the card's
   width to work with rather than the narrow column a standalone form gets. */
.ai-block .setting-form {
  max-width: none;
  margin-top: 0;
}

/* Two or three short fields to a row, folding to one on a narrow screen. The Allowances dialog stacks its fields
   on purpose; these are short enough to sit side by side. */
.setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3) var(--sp-4);
}

/* A grid column refuses to shrink below its content unless told to. Without this, one long option — "None — only
   for a server on this machine" — widens its column until the whole card overflows its own frame. */
.setting-grid > * {
  min-width: 0;
}

.setting-subhead {
  margin-top: var(--sp-3);
}

.setting-buttons {
  display: flex;
  gap: var(--sp-2);
}

/* Label, address box, button — the same three columns as the lines above it, so they line up. */
.setting-test {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.setting-test .form-input {
  max-width: 320px;
}

/* Sits under the row rather than squeezing into one of its three columns. */
.setting-test-note {
  grid-column: 1 / -1;
  margin: 0;
}

/* The messages read as a list of what FastGen sends; one opens at a time to be edited. */
.message-list {
  display: grid;
  gap: var(--sp-2);
}

.message-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.message-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: calc(var(--radius-lg) - 1px);
  cursor: pointer;
}

.message-item[open] > summary {
  border-bottom: 1px solid var(--line);
}

.message-body {
  padding: var(--sp-4);
}

.message-area {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}

/* A placeholder is something to copy exactly, so it is set apart from the sentence explaining it. */
.placeholder-chip {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
}

/* ---------- Super Admin: unsaved changes ---------- */

/* Along the foot of the page while any form in the section holds changes that haven't been saved. */
.unsaved-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(880px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--text);
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
  transform: translateX(-50%);
  animation: unsaved-bar-in 0.2s var(--ease);
}

@keyframes unsaved-bar-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

.unsaved-bar::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn-dot);
}

.unsaved-bar-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-base);
}

.unsaved-bar-discard,
.unsaved-bar-save {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  cursor: pointer;
}

.unsaved-bar-discard {
  border: 1px solid rgb(255 255 255 / 0.35);
  background: transparent;
  color: #fff;
}

.unsaved-bar-discard:hover {
  background: rgb(255 255 255 / 0.12);
}

.unsaved-bar-save {
  border: 0;
  background: #fff;
  color: var(--text);
  font-weight: 600;
}

.unsaved-bar-save:hover {
  background: var(--accent-hover);
}

.unsaved-bar-save:active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Room at the foot of the page, so the bar never sits over the last Save button. */
body.has-unsaved-bar .page-main {
  padding-bottom: 96px;
}

/* The card whose changes the bar is talking about. */
.has-changes {
  border-color: var(--warn-dot) !important;
  box-shadow: 0 0 0 3px rgb(224 161 0 / 0.15);
}

@media (max-width: 720px) {
  .unsaved-bar {
    flex-wrap: wrap;
  }

  .unsaved-bar-text {
    flex-basis: calc(100% - 20px);
  }
}

/* ---------- editor: copy permissions to other templates ---------- */

.copy-dialog {
  width: min(560px, calc(100vw - 32px));
}

.copy-dialog[open] {
  display: grid;
  gap: 12px;
}

.copy-dialog .dialog-head,
.copy-dialog .dialog-sub {
  margin: 0;
}

.copy-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-tools .form-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
}

.copy-list {
  display: grid;
  max-height: min(340px, 45vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.copy-list li + li {
  border-top: 1px solid var(--line);
}

.copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.copy-row:hover {
  background: var(--surface-2);
}

.copy-row.is-picked {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.copy-row input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.copy-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.copy-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-meta {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.copy-state {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.copy-state.is-replaced {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.copy-empty {
  padding: 16px;
  color: var(--text-3);
  text-align: center;
}

.copy-foot {
  font-size: var(--fs-md);
  color: var(--text-2);
}

/* ---------- Super Admin: layout ---------- */

.page-head-start {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-head-label {
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-2);
}

/* The whole width of the screen: its tables have many columns, and 790px left them cramped. */
.page-main.is-platform {
  max-width: 1480px;
  padding: 28px 32px 64px;
}

.platform {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}

.platform-side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 18px;
}

.platform-group {
  display: grid;
  gap: 2px;
}

/* Lighter than the links under it, so a heading reads as a label for the group rather than one more link. */
.platform-group-title {
  padding: 0 10px 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
}

.platform-side .platform-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
}

.platform-side .platform-nav-link:hover {
  background: var(--surface-2);
}

.platform-side .platform-nav-link[aria-current='page'] {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-weight: 600;
}

.platform-main {
  min-width: 0;
}

.platform-main > .page-title {
  margin-bottom: 4px;
}

/* Online, until the platform account has two-step sign-in: just this, where the panel would be. */
.platform-gate {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 560px;
  margin: 48px auto;
  padding: 0 16px;
}

/* ---------- Super Admin: organizations ---------- */

.org-toolbar {
  justify-content: flex-start;
}

.org-toolbar .org-search {
  max-width: 340px;
}

.status-filter {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  width: auto;
}

.status-filter span {
  padding-inline: 12px;
  white-space: nowrap;
}

.seg-choice .seg-count {
  display: inline;
  padding: 0;
  color: var(--text-3);
  font-weight: 400;
}

.org-table.is-wide {
  width: 100%;
}

.org-table .num {
  font-variant-numeric: tabular-nums;
}

.org-row {
  cursor: pointer;
}

.org-row:hover td {
  background: var(--surface-2);
}

.org-row.is-open td {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.org-open {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.org-open:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* One organization's plan, allowances and activity, beside the list rather than on a page of its own. */
.org-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(400px, 100vw);
  padding: 22px 24px;
  overflow-y: auto;
  border-inline-start: 1px solid var(--line);
  background: var(--surface);
  box-shadow: -16px 0 40px rgb(0 0 0 / 0.1);
  animation: org-panel-in 0.2s var(--ease);
}

@keyframes org-panel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

.org-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.org-panel-head h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.org-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.org-facts > div {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.org-panel-section {
  display: grid;
  gap: 12px;
}

.org-panel-section h3 {
  font-size: var(--fs-base);
  font-weight: 600;
}

.usage {
  display: grid;
  gap: 6px;
}

.usage-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-md);
}

.usage-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.usage-track {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-3);
}

.usage-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.usage-track.is-high .usage-fill {
  background: var(--warn-dot);
}

.org-activity {
  display: grid;
  gap: 8px;
}

.org-activity-item {
  font-size: var(--fs-md);
  line-height: 1.45;
}

.org-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* On a desktop the panel is wider, and its actions take two rows: Activate plan across the whole width, the others
   (Allowances, Custom plan, Log in as owner) side by side under it, sharing the row equally. */
@media (min-width: 1025px) {
  .org-panel {
    width: min(600px, 100vw);
  }

  .org-panel-actions .btn {
    flex: 1 1 0;
    padding: 10px 14px;
    font-size: var(--fs-base);
    white-space: nowrap;
  }

  .org-panel-actions .btn-primary {
    flex-basis: 100%;
  }
}

/* Narrow screens: the sections go across the top in one scrolling row. */
@media (max-width: 1024px) {
  .page-main.is-platform {
    padding: 20px 16px 48px;
  }

  .platform {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .platform-side {
    position: static;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .platform-group {
    display: flex;
    gap: 4px;
  }

  .platform-group-title {
    display: none;
  }

  .platform-side .platform-nav-link {
    flex: none;
    white-space: nowrap;
  }

  .org-facts {
    grid-template-columns: 1fr;
  }
}


/* ---------- Super Admin: pop-ups ---------- */

.popup-card-section .popup-section-note {
  margin: -4px 0 var(--sp-4);
}

.popup-switch-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* The fields beside the preview, so each change can be seen as it's made; one above the other when narrow. */
.popup-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--sp-5);
  align-items: start;
}

.popup-fields {
  display: grid;
  gap: var(--sp-3);
}

.popup-preview-wrap {
  position: sticky;
  top: 16px;
  display: grid;
  gap: var(--sp-2);
}

/* The dimmed page the pop-up opens over, in miniature. */
.popup-preview {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: rgb(20 20 20 / 0.45);
}

.popup-preview .popup-card {
  width: 100%;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}

.popup-preview-empty {
  max-width: 220px;
  color: #fff;
  font-size: var(--fs-md);
  text-align: center;
}

.popup-image-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.popup-thumb {
  display: grid;
  place-items: center;
  width: 96px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.popup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-fields textarea.form-input {
  resize: vertical;
  min-height: 96px;
  font: inherit;
  line-height: 1.5;
}

.popup-audience {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dialog.popup-editor-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.popup-list-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* The heading and its note take the room; the button keeps to its own size beside them. */
.popup-list-head > div {
  flex: 1 1 280px;
}

.popup-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.popup-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}

.popup-row-thumb {
  width: 72px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

.popup-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.popup-row-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.popup-row-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.status.is-draft {
  background: var(--surface-2);
  color: var(--text-2);
}

@media (max-width: 1024px) {
  .popup-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .popup-preview-wrap {
    position: static;
  }
}

@media (max-width: 720px) {
  .popup-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .popup-row-thumb {
    width: 56px;
  }

  .popup-row-actions {
    grid-column: 1 / -1;
  }
}

/* ---------- Contact us ---------- */

/* The form, and the address to write to without it; one above the other on a phone. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: var(--sp-5);
  align-items: start;
  max-width: 900px;
  margin-top: 32px;
}

.contact-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* Every field is required, so it's said once at the top rather than marked on each. */
.contact-required {
  margin-bottom: calc(-1 * var(--sp-2));
}

.contact-message {
  min-height: 160px;
  resize: vertical;
  font: inherit;
  line-height: 1.55;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* The box only programs fill in (js/contact-page.js): kept out of sight and out of reach, but still in the form. */
.contact-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-side {
  display: grid;
  gap: 6px;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.contact-side-title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.contact-side-text {
  color: var(--text-2);
}

.contact-email {
  overflow-wrap: anywhere;
}

.contact-sent {
  justify-items: start;
}

.contact-sent:focus {
  outline: none;
}

.contact-sent h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.contact-sent p {
  color: var(--text-2);
}

/* A tick in a green disc: sent. */
.contact-sent-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}

.contact-sent-icon::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 15px;
  width: 8px;
  height: 14px;
  border: solid var(--success);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.contact-closed p {
  color: var(--text-2);
}

.contact-back {
  margin-top: 32px;
  text-align: start;
}

@media (max-width: 720px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--sp-5);
  }
}

/* System Settings → Email: the Contact us page's own card, under the sender's, and the sign-up alerts under that. */
.contact-settings,
.signup-alerts,
.error-alerts,
.cookie-consent {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* The switch is a control, not a message: outlined, so it doesn't run into the grey status line above it, and in a
   form narrow enough that the switch stays next to its words. */
.signup-alerts .setting-form,
.error-alerts .setting-form,
.cookie-consent .setting-form {
  max-width: 640px;
}

.signup-alerts .plan-contact-row,
.error-alerts .plan-contact-row,
.cookie-consent .plan-contact-row {
  background: none;
  border: 1px solid var(--line);
}

.contact-settings textarea.form-input {
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

/* ---------- Super Admin: newsletters ---------- */

.newsletter-notice {
  margin-top: var(--sp-3);
}

.newsletter-card .newsletter-note {
  margin: -4px 0 var(--sp-4);
}

.newsletter-list {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.newsletter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}

.newsletter-row-main {
  flex: 1 1 320px;
  min-width: 0;
}

.newsletter-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.newsletter-row-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.newsletter-people > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 500;
}

.newsletter-people[open] > summary {
  margin-bottom: var(--sp-3);
}

/* Others: the add row (email, name, Add on one line where there's room), and the table, scrolling past twelve rows. */
.others-add {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: end;
}

.others-add > .form-message {
  grid-column: 1 / -1;
}

/* The button lines up with the inputs, not with their error lines under them. */
.others-add > .btn {
  margin-bottom: 0;
  align-self: start;
  margin-top: calc(var(--fs-sm) * 1.5 + 6px);
}

/* Import and Remove all keep to their own size at the heading's end, as New newsletter does. */
.popup-list-head > .others-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.others-hint {
  margin: var(--sp-2) 0 var(--sp-4);
}

.others-table {
  max-height: 520px;
  overflow-y: auto;
}

.others-remove {
  text-align: end;
}

@media (max-width: 640px) {
  .others-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .others-add > .btn {
    margin-top: 0;
    justify-self: start;
  }
}

.newsletter-top {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-bottom: var(--sp-3);
}

.newsletter-top .subhead {
  margin: 0;
  font-size: var(--fs-xl);
}

/* The code beside what it makes; one above the other when there isn't room for both. */
.newsletter-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.newsletter-code {
  min-height: 560px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}

.newsletter-preview {
  display: grid;
  gap: var(--sp-2);
}

.newsletter-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newsletter-width {
  margin-top: 0;
}

.newsletter-frame-wrap {
  display: grid;
  justify-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.newsletter-frame {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
}

/* A phone's width, to see the layout fold. */
.newsletter-frame-wrap.is-phone .newsletter-frame {
  width: 375px;
  max-width: 100%;
}

.newsletter-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-4);
}

/* Accounting's three figures fill the row the same way. */
.accounting-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.newsletter-section {
  margin-top: var(--sp-5);
}

.newsletter-url {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsletter-error {
  max-width: 320px;
  margin-top: 4px;
  white-space: normal;
}

.person-cell {
  display: grid;
}

/* In the profile: whether the newsletter comes, and the button that changes it. */
.newsletter-pref {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
}

/* The page a newsletter's Unsubscribe link opens. */
.unsub-card {
  display: grid;
  gap: var(--sp-3);
  max-width: 520px;
  margin: 32px auto 0;
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.unsub-card p {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.unsub-card strong {
  color: var(--text);
}

.unsub-note {
  font-size: var(--fs-md);
}

.unsub-form {
  margin-top: var(--sp-2);
}

@media (max-width: 1024px) {
  .newsletter-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsletter-code {
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .newsletter-stats,
  .accounting-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Super Admin: accounting ---------- */

.section-intro {
  flex: 1 1 360px;
}

.key-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: var(--fs-md);
}

.key-list dt {
  color: var(--text-2);
}

.key-list dd {
  margin: 0;
}

.setting-card.is-current {
  border-color: var(--accent);
}

/* The Stripe link card and the last events: the title and each part under it 12px apart, as in the other settings
   cards. The keys cards' lines likewise start 12px under their title. */
.webhook-note,
.events-card {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.setting-head + .key-list {
  margin-top: var(--sp-3);
}

.webhook-url {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.webhook-url code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-md);
}

.webhook-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 20px;
  font-size: var(--fs-md);
  line-height: 1.5;
}

.event-list {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
  padding-inline-start: 18px;
}

.event-list code,
.event-log code {
  font-size: var(--fs-sm);
}

.event-log {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-log li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* A table under a row of figures keeps the space the figures keep between themselves, as Overview's charts do. */
.platform-stats + .org-table-wrap {
  margin-top: var(--sp-3);
}

/* Earnings & spendings: the months shown. From and to, each picked from a calendar of months, and the periods asked
   for most beside them. */
.period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.period-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.period-word {
  color: var(--text-2);
  font-size: var(--fs-md);
}

.period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* The period chosen: filled blue, as a chosen choice is elsewhere (it was grey). */
.period-presets .btn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

.month-field {
  position: relative;
}

.month-button {
  width: auto;
  min-width: 128px;
}

.month-pop {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 20;
  width: 248px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
}

.month-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.month-step {
  min-width: 32px;
  font-size: var(--fs-lg);
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.month-cell {
  padding: 8px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
}

.month-cell:hover:not(:disabled) {
  background: var(--accent-hover);
}

.month-cell:active:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}

.month-cell.is-on {
  background: var(--accent);
  color: var(--accent-ink);
}

.month-cell:disabled {
  color: var(--text-3);
  opacity: 0.4;
  cursor: default;
}

.month-cell:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* A redraw on its way: the section dims rather than disappearing. */
.ai-block[aria-busy='true'] {
  opacity: 0.6;
  transition: opacity 0.15s;
}

.expense-form {
  margin-bottom: var(--sp-4);
}

/* "What for" across the top, then amount, currency, how often and the dates side by side as room allows. */
.expense-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  /* As wide as the box it's in, so the columns are counted from that: left to size itself, it took its 920px cap and
     laid out four columns even inside the narrow Edit spending dialog, cutting off the fields and the Save button. */
  width: 100%;
  min-width: 0;
  max-width: 920px;
}

.expense-fields > .expense-name {
  grid-column: 1 / -1;
}

.expense-fields > [hidden] {
  display: none;
}

/* ---------- We Hear You (js/hear-page.js) ----------
   One column of cards, a little narrower than the other pages so lines stay easy to read: the welcome on top, the
   box to write in, the filters, then each suggestion with its likes and comments under it. */

.hear-main {
  max-width: 760px;
}

.hear-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(20 20 20 / 0.04);
}

/* The welcome: what this page is for, on the brand's light blue. */
.hear-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: 32px 32px 28px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(47 107 255 / 0.16), transparent 60%),
    linear-gradient(180deg, var(--accent-50), #f6f8ff);
  border: 1px solid var(--accent-100);
}

.hear-hero-text {
  min-width: 0;
}

.hear-eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hear-title {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hear-lead {
  max-width: 560px;
  margin: 0 0 var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-lg);
  line-height: 1.55;
}

.hear-privacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.8);
  border: 1px solid var(--accent-100);
  color: var(--accent-deep);
  font-size: var(--fs-md);
  font-weight: 500;
}

.hear-icon,
.hear-verified {
  display: inline-grid;
  flex: none;
  place-items: center;
}

/* ---- the bell (Super Admin) ---- */

.hear-bell-wrap {
  position: relative;
  flex: none;
}

.hear-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-100);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-deep);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.hear-bell:hover {
  background: var(--accent-50);
}

.hear-bell[aria-expanded='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.hear-bell-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.hear-bell-count[hidden] {
  display: none;
}

.hear-bell-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 40;
  width: min(380px, calc(100vw - 32px));
  max-height: min(520px, 70vh);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 16px 40px rgb(20 20 20 / 0.14);
}

.hear-bell-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.hear-bell-new {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hear-bell-list {
  margin: 0;
  padding: 6px;
  list-style: none;
}

.hear-bell-item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.hear-bell-item:hover {
  background: var(--surface-2);
}

.hear-bell-item.is-unread {
  background: var(--accent-50);
}

.hear-bell-item.is-unread:hover {
  background: var(--accent-hover);
}

.hear-bell-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: var(--fs-md);
}

.hear-bell-org,
.hear-bell-when {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.hear-bell-quote {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hear-bell-empty {
  margin: 0;
  padding: 20px 16px;
  color: var(--text-3);
  font-size: var(--fs-md);
}

/* ---- writing a suggestion ---- */

.hear-composer {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
}

.hear-composer:focus-within {
  border-color: var(--accent-200);
  box-shadow: 0 0 0 4px var(--accent-50);
}

.hear-composer-row {
  display: flex;
  gap: var(--sp-3);
}

.hear-composer-body {
  flex: 1;
  min-width: 0;
}

.hear-textarea {
  display: block;
  width: 100%;
  min-height: 0;
  resize: none;
  font: inherit;
  line-height: 1.5;
}

.hear-composer .hear-textarea {
  min-height: 84px;
  padding: 10px 12px;
  border-color: transparent;
  background: var(--surface-2);
  font-size: var(--fs-lg);
}

.hear-composer .hear-textarea:focus {
  background: var(--surface);
}

.hear-preview {
  position: relative;
  display: inline-block;
  margin-top: var(--sp-3);
}

.hear-preview[hidden] {
  display: none;
}

.hear-preview img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.hear-preview-remove {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgb(20 20 20 / 0.7);
  color: #fff;
  cursor: pointer;
}

.hear-composer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  padding-inline-start: 52px;
}

.hear-add-picture {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hear-add-picture[hidden] {
  display: none;
}

.hear-composer-note,
.hear-count {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.hear-composer-foot .btn-primary {
  margin-inline-start: auto;
}

/* ---- filters and order ---- */

.hear-controls {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.hear-controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.hear-list-title {
  margin: 0;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

.hear-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hear-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hear-chip:hover {
  border-color: var(--accent-200);
  color: var(--text);
}

.hear-chip.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.hear-chip-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.hear-chip.is-on .hear-chip-count {
  background: rgb(255 255 255 / 0.22);
  color: inherit;
}

.hear-sort {
  margin-top: 0;
}

/* ---- a suggestion ---- */

.hear-list {
  display: grid;
  gap: var(--sp-4);
}

.hear-post {
  padding: 20px 20px 16px;
  scroll-margin: 96px;
}

.hear-post.is-hidden {
  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 12px, #fafaf9 12px, #fafaf9 24px);
}

.hear-post.is-flashed,
.hear-comment.is-flashed .hear-bubble {
  animation: hear-flash 1.6s var(--ease);
}

@keyframes hear-flash {
  0%, 30% { box-shadow: 0 0 0 4px var(--accent-200); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hear-post-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.hear-post-who {
  flex: 1;
  min-width: 0;
}

.hear-post-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
}

.hear-post-meta {
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.hear-when {
  color: var(--text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.hear-more {
  flex: none;
  margin-inline-end: -6px;
}

.hear-anon-avatar {
  background: var(--surface-3);
  color: var(--text-3);
}

.hear-fastgen-avatar {
  overflow: hidden;
  padding: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.hear-fastgen-avatar img {
  width: 64%;
  height: 64%;
  object-fit: contain;
}

.hear-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hear-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hear-status.is-review { background: var(--surface-2); color: var(--text-2); }
.hear-status.is-planned { background: var(--accent-50); color: var(--accent-deep); }
.hear-status.is-progress { background: var(--warn-bg); color: var(--warn-ink); }
.hear-status.is-done { background: #e3f5ea; color: var(--success-ink); }
.hear-status.is-declined { background: var(--danger-bg); color: var(--danger-ink); }

.hear-hidden-note {
  margin: var(--sp-3) 0 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--fs-sm);
}

.hear-post-body {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-lg);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hear-picture {
  display: block;
  margin-top: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.hear-picture img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.hear-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.hear-like,
.hear-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 600;
}

.hear-like {
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hear-like svg path {
  fill: transparent;
  transition: fill var(--dur) var(--ease);
}

.hear-like:hover {
  border-color: #f3b4b0;
  color: var(--brand);
}

.hear-like.is-on {
  border-color: #f6c9c5;
  background: #fdeeed;
  color: var(--brand);
}

.hear-like.is-on svg path {
  fill: currentColor;
}

.hear-like.is-on .hear-icon {
  animation: hear-pop 0.32s var(--ease);
}

@keyframes hear-pop {
  50% { transform: scale(1.3); }
}

.hear-fastgen-liked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  color: var(--accent-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hear-tiny-avatar {
  width: 20px;
  height: 20px;
}

/* ---- comments ---- */

.hear-thread {
  margin-top: var(--sp-3);
}

.hear-comments {
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}

.hear-comment {
  display: flex;
  gap: 10px;
  scroll-margin: 120px;
}

.hear-comment-main {
  flex: 1;
  min-width: 0;
}

.hear-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px 10px;
  border-radius: 4px var(--radius-lg) var(--radius-lg);
  background: var(--surface-2);
}

:root[dir='rtl'] .hear-bubble {
  border-radius: var(--radius-lg) 4px var(--radius-lg) var(--radius-lg);
}

.hear-comment.is-fastgen .hear-bubble {
  background: var(--accent-50);
  box-shadow: inset 0 0 0 1px var(--accent-100);
}

.hear-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: var(--fs-md);
}

.hear-fastgen-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-deep);
}

.hear-verified {
  color: var(--accent);
}

.hear-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}

.hear-author-detail {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.hear-comment-body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hear-comment-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 4px 0 0;
  padding-inline-start: 12px;
  font-size: var(--fs-sm);
}

.hear-comment-actions .link-btn {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hear-danger {
  color: var(--danger);
}

.hear-comment-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.hear-comment-form .avatar {
  flex: none;
  margin-bottom: 4px;
}

.hear-comment-input {
  flex: 1;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 19px;
  background: var(--surface-2);
  border-color: transparent;
}

.hear-comment-input:focus {
  background: var(--surface);
}

.hear-comment-form .btn {
  flex: none;
  height: 38px;
}

.hear-edit {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.hear-comment .hear-edit {
  min-width: min(480px, 70vw);
  margin-top: 4px;
}

.hear-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.hear-edited {
  font-style: italic;
}

/* ---- nothing to show ---- */

.hear-empty {
  padding: 40px 24px;
  color: var(--text-2);
  text-align: center;
}

.hear-empty p {
  margin: 0 0 var(--sp-3);
}

.hear-empty-title {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
}

@media (max-width: 640px) {
  .hear-hero {
    padding: 24px 20px 20px;
  }

  .hear-title {
    font-size: 28px;
  }

  .hear-lead {
    font-size: var(--fs-base);
  }

  .hear-composer-foot {
    padding-inline-start: 0;
  }

  .hear-post {
    padding: 16px 16px 12px;
  }

  .hear-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -16px;
    padding-inline: 16px;
    scrollbar-width: none;
  }

  .hear-chip {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hear-post.is-flashed,
  .hear-comment.is-flashed .hear-bubble,
  .hear-like.is-on .hear-icon {
    animation: none;
  }
}

/* The Super Admin's bell in the header of the Super Admin panel: what's new on We Hear You (js/header-profile.js). */
.head-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.head-bell:hover {
  background: var(--surface-2);
  color: var(--text);
}

.head-bell-count {
  position: absolute;
  top: 0;
  inset-inline-end: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.head-bell-count[hidden] {
  display: none;
}