/* Spotted identity for the server-rendered auth flow (OCT-322).
 *
 * Loaded after the chassis ``admin_saas/tenant_admin/auth.css``, which already
 * declares the token NAMES this file re-values. So the work here is values plus
 * the two shapes Spotted rounds differently, not a second stylesheet.
 *
 * Values are ported verbatim from ``products/spotted/frontend/src/index.css``
 * — the same five tokens the marketing page and the customer app are built
 * from. Keep the three in step.
 *
 * The page reads as the landing page does, which inverts the usual auth shell:
 * the CANVAS is white and the CARD is the tinted surface, because that is the
 * pairing every card on the one-pager uses (`bg-surface` on `bg-canvas`). The
 * chassis paints the page from ``--color-surface-muted`` and the card from
 * ``--color-surface-raised``, so the two tokens carry that pairing.
 *
 * Only the tokens this surface reads are ported. `--color-code` /
 * `--color-code-ink` stay in the SPA: no auth page renders a slab. Success and
 * warning keep the chassis neutrals — the product declares no hue for them, and
 * inventing one here would be a third palette to keep in step. Info is the one
 * exception: the chassis grey read as a foreign element on the violet card, and
 * as a greenish slab in dark mode (DEV-3180). It takes a tint of the product's
 * own violet and keeps the ink as its text, so it adds no new hue.
 */

/* ===== Light ============================================================= */
:root {
  --color-surface-muted: #fff;
  --color-surface: #f6f7fb;
  --color-surface-raised: #f6f7fb;
  --color-surface-sunken: #f6f7fb;

  --color-text: #1a1a2e;
  --color-text-muted: #5b5b77;
  --color-text-subtle: #5b5b77;

  --color-border: #e3e4ee;
  --color-border-strong: #cfd1e2;

  /* One violet, two jobs. `primary` fills a button and carries white on it
   * (4.6:1); `accent` has to read AS TEXT on the canvas, which is the same
   * value here and is NOT in dark — see below. */
  --color-primary: #6d5dfc;
  --color-primary-contrast: #fff;
  --color-accent: #6d5dfc;
  --color-accent-soft: color-mix(in srgb, #6d5dfc 10%, var(--color-surface-muted));

  /* Every link on this surface reads through the deck's `--primary` alias
   * (`deck.css`: `a { color: var(--primary) }`), which the chassis points at
   * `--color-primary` — the button fill. Repoint it at the text tone, or the
   * dark scheme's 12px legal links inherit the fill and land at 4.0:1. */
  --primary: var(--color-accent);

  --color-danger: #d23b5b;
  --color-danger-bg: color-mix(in srgb, #d23b5b 10%, var(--color-surface-raised));

  --color-status-new: #1f7ae0;
  --color-status-planned: #6b74c4;
  --color-status-in-progress: #d9700f;
  --color-status-resolved: #0e8f7a;
  --color-status-dismissed: #8a7d8c;
  --color-danger-line: color-mix(in srgb, #d23b5b 28%, var(--color-surface-raised));

  --color-info: var(--color-text);
  --color-info-bg: color-mix(in srgb, #6d5dfc 8%, var(--color-surface-raised));
  --color-info-line: color-mix(in srgb, #6d5dfc 24%, var(--color-surface-raised));

  --shadow-raise: 0 1px 2px rgb(26 26 46 / 4%), 0 8px 24px rgb(26 26 46 / 6%);
  --shadow-pop: 0 14px 44px rgb(26 26 46 / 24%);
  --shadow-lg: 0 14px 44px rgb(26 26 46 / 24%);

  /* The two the one-pager actually rounds to — `rounded-2xl` for a card,
   * `rounded-xl` for a control. The chassis collapses every radius alias onto
   * the 2px `--radius-1`; Spotted's surfaces are considerably rounder. */
  --radius-control: 12px;
  --radius-card: 16px;
}

/* ===== Dark ==============================================================
 * Same mechanism as the chassis: the OS decides, nothing is stored, no script
 * runs. Both files' dark blocks are ``@media … { :root }`` at equal
 * specificity, and this one loads last. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-muted: #131322;
    --color-surface: #1c1c30;
    --color-surface-raised: #1c1c30;
    --color-surface-sunken: #1c1c30;

    --color-text: #f2f2f7;
    --color-text-muted: #a3a3bd;
    --color-text-subtle: #a3a3bd;

    --color-border: #2c2c45;
    --color-border-strong: #3d3d5c;

    /* The fill does not move — white on #6d5dfc is the button the marketing
     * page ships, and it reads the same on either canvas. The TEXT tone does:
     * #6d5dfc on #131322 is 4.0:1, under AA for the links and the badge copy
     * this surface sets in it. */
    --color-accent: #8f83ff;
    --color-accent-soft: color-mix(in srgb, #6d5dfc 22%, var(--color-surface-muted));

    --color-danger: #ff6b8a;
    --color-danger-bg: color-mix(in srgb, #ff6b8a 12%, var(--color-surface-raised));

    --color-status-new: #5aa8ff;
    --color-status-planned: #9aa2ec;
    --color-status-in-progress: #ffa65c;
    --color-status-resolved: #3fd2b5;
    --color-status-dismissed: #8f8599;
    --color-danger-line: color-mix(in srgb, #ff6b8a 30%, var(--color-surface-raised));

    --color-info-bg: color-mix(in srgb, #8f83ff 14%, var(--color-surface-raised));
    --color-info-line: color-mix(in srgb, #8f83ff 34%, var(--color-surface-raised));

    /* An ink-tinted shadow is invisible on a dark canvas: elevation there is
     * read from the shadow being darker than the surface, so both go to black
     * and deepen. */
    --shadow-raise: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
    --shadow-pop: 0 14px 44px rgb(0 0 0 / 55%);
    --shadow-lg: 0 14px 44px rgb(0 0 0 / 55%);
  }
}

/* ===== The two shapes ====================================================
 * ``.fb-auth`` is only ever added to a body that already carries ``is-auth``,
 * so these need to MATCH the chassis rules' specificity, not exceed it — this
 * file loads last and wins the tie. */
.fb-auth .auth-card {
  border-radius: var(--radius-card);
}

.fb-auth .form-field input,
.fb-auth .form-field select,
.fb-auth .form-field textarea,
.fb-auth .input-affix,
.fb-auth .btn,
.fb-auth .auth-button,
.fb-auth .auth-workspace,
.fb-auth .form-message,
.fb-auth .info-block,
.fb-auth .form-error-summary {
  border-radius: var(--radius-control);
}

/* The one-pager's primary action: a flat accent fill, no border, and hover is
 * opacity rather than a second tone. */
.fb-auth .btn-primary,
.fb-auth .auth-button--sso {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-primary-contrast);
}
.fb-auth .btn-primary:hover,
.fb-auth .auth-button--sso:hover {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-primary-contrast);
  opacity: 0.9;
}
/* The SSO glyph is a mask painted with the button's ink. */
.fb-auth .auth-button--sso::before {
  background: var(--color-primary-contrast);
}

.fb-auth .form-field input:focus,
.fb-auth .form-field select:focus,
.fb-auth .form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
/* The workspace-address group draws its own border and focus ring in place of
 * the input's, so it rings in the seam's accent too (DEV-1966). */
.fb-auth .input-affix:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* ===== The reporter's portal (DEV-3077, DEV-3114) ======================== *
 * A page rather than a card: ``portal/base.html`` replaces the chassis card
 * through ``auth_layout``, and the cards below sit on the canvas the way the
 * customer app's report list and detail do. */
.fb-portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-muted);
}

.fb-portal-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(20px, calc((100% - 960px) / 2));
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 88%, transparent);
  backdrop-filter: blur(10px);
}

.fb-portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.fb-portal-brand img {
  border-radius: 8px;
}

.fb-portal-account {
  position: relative;
  margin-left: auto;
}

.fb-portal-account summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
  cursor: pointer;
  list-style: none;
}

.fb-portal-account summary::-webkit-details-marker {
  display: none;
}

.fb-portal-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 600;
  font-size: 12px;
}

.fb-portal-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raise);
}

.fb-portal-menu a,
.fb-portal-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fb-portal-menu a:hover,
.fb-portal-menu button:hover {
  background: var(--color-surface);
}

.fb-portal-main {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.fb-portal-main h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.fb-portal-main .form-messages {
  margin-bottom: 20px;
}

.fb-portal-main .info-block {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.fb-portal-footer {
  padding: 0 20px 32px;
}

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

.fb-portal-lede {
  margin: 6px 0 0;
  color: var(--color-text-muted);
}

.fb-filter {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.fb-filter a {
  padding: 6px 12px;
  border-radius: 9px;
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.fb-filter a[aria-current] {
  background: var(--color-surface-muted);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.fb-filter span {
  margin-left: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.fb-reports {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.fb-report {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fb-report:hover,
.fb-report:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.fb-report-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.fb-report-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* DEV-3097 — a report of several screens shows them side by side, up to four, its
   count centred over them, as the workspace's list does. */
.fb-report-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  height: 100%;
  background: var(--color-border);
}

.fb-report-mosaic.is-3,
.fb-report-mosaic.is-4 {
  grid-template-rows: 1fr 1fr;
}

.fb-report-mosaic.is-3 > :first-child {
  grid-row: span 2;
}

.fb-report-mosaic > * {
  min-height: 0;
  background: var(--color-surface);
}

.fb-report-screens {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(12 12 22 / 0.8);
  color: #e8e8f0;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  transition: background-color 0.3s, color 0.3s;
}

.fb-report-screens svg {
  width: 12px;
  height: 12px;
}

.fb-report:hover .fb-report-screens {
  background: var(--color-accent);
  color: #fff;
}

.fb-report-text {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fb-report-text b {
  font-size: 15px;
}

.fb-report-text small,
.fb-detail-head p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.fb-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.fb-status svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* `PinCount` in the customer app: the count on an accent disc, then its noun. */
.fb-pin-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fb-pin-count > span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 11px;
  font-weight: 700;
}

.fb-back {
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
}

.fb-back:hover {
  color: var(--color-accent);
}

.fb-detail-head {
  margin: 14px 0 22px;
}

.fb-detail-head h1 {
  font-size: 24px;
}

.fb-detail-head p {
  margin: 8px 0 0;
}

.fb-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 24px;
}

.fb-detail-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fb-detail-aside {
  position: sticky;
  top: 76px;
}

.fb-card {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
}

.fb-card h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.fb-message {
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface-raised));
}

.fb-message h2 {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.fb-message p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fb-shot {
  padding: 0;
  overflow: hidden;
}

.fb-shot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Bounded like the customer app's: a full-page capture runs thousands of pixels
 * tall and would push the comments off the screen. */
.fb-shot-frame {
  max-height: 70vh;
  overflow: auto;
}

.fb-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
  cursor: zoom-in;
}

.fb-notes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.fb-notes li {
  display: flex;
  gap: 10px;
}

.fb-notes p {
  margin: 1px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fb-muted {
  margin: 8px 0 0;
  color: var(--color-text-muted);
}

/* The widget's numbered disc (`.pf-outline-num`): the same pins are burnt into
 * the screenshot above, so the list reads as their legend. */
.fb-pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}

.fb-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fb-status-note {
  margin: 10px 0 0;
  color: var(--color-text-muted);
}

.fb-steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.fb-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding-bottom: 14px;
}

.fb-steps li:last-child {
  padding-bottom: 0;
}

.fb-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.fb-steps li.is-done:not(:last-child)::before {
  background: var(--color-primary);
}

.fb-step-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface-raised);
}

.is-done .fb-step-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.is-done .fb-step-dot::after {
  content: "✓";
  color: var(--color-primary-contrast);
  font-size: 11px;
}

.is-current .fb-step-dot {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.is-current .fb-step-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.fb-steps b {
  display: block;
  font-weight: 600;
}

.fb-steps .is-todo b {
  color: var(--color-text-muted);
  font-weight: 500;
}

.fb-steps small {
  color: var(--color-text-muted);
}

.fb-status-mail {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}

.fb-page {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .fb-detail {
    grid-template-columns: 1fr;
  }

  .fb-detail-aside {
    position: static;
    order: -1;
  }

  .fb-report {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
  }

  .fb-status {
    grid-column: 2;
    justify-self: start;
  }

  .fb-portal-email {
    display: none;
  }

  .fb-portal-main h1 {
    font-size: 24px;
  }
}

/* ===== The reporter's email preferences (DEV-3079) ======================= */
.fb-choices {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.fb-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.fb-choice:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.fb-choice input {
  margin-top: 3px;
  accent-color: var(--color-accent);
}

.fb-choice span {
  display: grid;
  gap: 2px;
}

.fb-choice small {
  color: var(--color-text-muted);
}

.fb-change-address {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.fb-change-address h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
}