/* ==========================================================================
   Fisar interactive dashboard demo
   --------------------------------------------------------------------------
   A replica of the Fisar SAR application, rendered in markup instead of the
   flat screenshot the hero used to carry. Authored here in build/; copied to
   site/css/dashboard.css by build-dashboard.py. Never edit the copy in site/.

   ARCHITECTURE — the one thing to understand before changing anything:

   The whole app is laid out inside `.fdash-canvas`, which is a FIXED
   1669x1038 box (the CSS pixel size of the real app's viewport in the source
   screenshots). It is never reflowed. To fit its container it is scaled with
   `transform: scale()`, set by dashboard.js from a ResizeObserver.

   That buys three things:
     1. the layout is pixel-identical to the real app at every breakpoint,
        so it can be checked against the screenshots by diffing;
     2. resizing the window costs one compositor transform, not a reflow of
        ~600 nodes;
     3. the mobile tour's "zoom into this bit" is just a change of scale and
        transform-origin — no layout work at all.

   HARD RULE: no `filter` or `backdrop-filter` anywhere in this file. A
   `filter: blur(200px)` in the hero is what froze the homepage on iOS for
   30-60s (see build/ notes + the mobile-perf memory). Shadows only, and few.
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  /* matches the clamped wght axis in the shipped subset (see
     dashboard/subset-font.py) — declaring 100 1000 here would invite the
     browser to ask for weights the file no longer carries */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* latin only — the demo copy is all ASCII */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   APP SWITCHER
   Fisar ships two applications: the DPO's workspace and the organisation's.
   The strip sits above the frame and is the fullscreen host, so both remain
   reachable at full size. The active tab is painted the same dark as the
   frame's border and tucks under its top edge, so the two read as one shape.
   ========================================================================== */

/* Doubled class on purpose (0,2,0): it has to beat the inline
   `<style>.fdash-wrap{display:none}</style>` guard in shell.html, which sits
   inside the Barba container and is therefore LATER in document order than
   this file. That guard is what stops the widget painting as raw markup when
   it arrives before the stylesheet does. */
.fdash-wrap.fdash-wrap {
  display: block;
}

.fdash-wrap {
  /* Sentinel read back by app.js (verifyHeroDashboard) — the cheapest possible
     proof that this stylesheet actually applied, one getComputedStyle call. */
  --fd-css-ok: 1;
  position: relative;
  width: 100%;
}

/* The portrait-phone fallback (see shell.html). Off everywhere else. */
.fdash-still {
  display: none;
}

.fdash-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  /* clears the frame's 2rem top-left corner, so the active tab always lands
     on straight border rather than half-over the curve */
  padding-left: 1.75rem;
}

.fdash-tab {
  appearance: none;
  border: 0;
  margin: 0 0 -0.75rem;
  padding: 0.75rem 1.5rem 1.4rem;
  border-radius: 0.9rem 0.9rem 0 0;
  background: #fbfbf7;
  color: rgba(29, 39, 41, 0.7);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

/* "Data Protection Officer" wraps to two lines on a phone, which leaves the
   two tabs different heights. The short form only ever appears next to
   "Organisation", where it cannot be read as anything else. */
.fdash-tab__short {
  display: none;
}

.fdash-tab:hover {
  background: #fff;
  color: var(--swatch--dark, #1d2729);
}

.fdash-tab.is-on {
  background: var(--swatch--dark, #1d2729);
  color: #f3f3ed;
  font-weight: 700;
  cursor: default;
}

.fdash {
  /* Tailwind v4 tokens, sampled straight out of the reference screenshots so
     the replica matches the shipped app rather than my memory of Tailwind. */
  --fd-app-bg: #fafafa;
  --fd-panel: #ffffff;
  --fd-line: #e5e5e5;
  --fd-line-soft: #f0f0f0;
  --fd-line-faint: #f3f4f6;

  --fd-ink: #0a0a0a;
  --fd-ink-2: #101828;
  --fd-body: #364153;
  --fd-muted: #4a5565;
  --fd-soft: #6a7282;
  --fd-faint: #99a1af;

  --fd-green-deep: #085c41; /* New SAR button, sidebar brand */
  --fd-green: #00a63e;
  --fd-green-600: #00944f;
  --fd-green-500: #14b477;
  --fd-green-050: #f0fdf4;
  --fd-green-100: #dcfce7;
  --fd-green-200: #b9f8cf;
  --fd-mint: #e3fdec;
  --fd-tint: #f7fbf9; /* stat-card wash */

  --fd-lime: #e2eeb9; /* LOW priority chip — the brand lime */
  --fd-lime-ink: #4a5a17;

  --fd-amber-bg: #fff8ed;
  --fd-amber-line: #ffd6a8;
  --fd-amber-ink: #973c00;

  --fd-blue-bg: #eff6ff;
  --fd-blue-line: #bedbff;
  --fd-blue-ink: #1c398e;

  --fd-red: #e7000b;
  --fd-amber: #e17100;

  --fd-radius: 10px;
  --fd-radius-lg: 14px;

  position: relative;
  display: block;
  width: 100%;
  /* 1669 x 1038 — kept in sync with --fdash-w/h below and with dashboard.js */
  aspect-ratio: 1669 / 1038;
  border: 1rem solid var(--swatch--dark, #1d2729);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 30px 50px -5px #12141d4d;
  background: var(--fd-app-bg);
  contain: layout paint;
}

/* The unscaled world. Sized in px and never reflowed; `--fd-scale` is written
   by dashboard.js. Before JS runs the fallback keeps it sensibly sized rather
   than overflowing at 1669px inside a narrow hero. */
.fdash-canvas {
  --fd-scale: 1;
  position: absolute;
  inset: 0;
  width: 1669px;
  height: 1038px;
  transform-origin: 0 0;
  transform: scale(var(--fd-scale));
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fd-ink);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  display: flex;
  background: var(--fd-app-bg);
}

/* Between parse and the first fit() the canvas would render at scale 1 —
   1669px of app inside a hero a third that wide, i.e. the top-left corner
   only. dashboard.js sets .fd-js the moment it runs and .is-ready after the
   first fit, so the gap is hidden but a page where the script never executes
   still shows the app rather than an empty box. */
.fdash.fd-js:not(.is-ready) .fdash-canvas {
  visibility: hidden;
}

.fdash-canvas * {
  box-sizing: border-box;
}

/* The resets are wrapped in :where() so they carry ZERO specificity. Written
   plainly, `.fdash-canvas button { background: none }` (0,1,1) would beat
   every `.fd-btn--green`-style rule (0,1,0) and every button in the app would
   come out transparent. */
:where(.fdash-canvas button) {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

:where(.fdash-canvas svg) {
  display: block;
  flex: none;
}

/* The widget must not inherit the host page's element defaults. It is dropped
   into the Webflow homepage (normalize.css + webflow.css) but is also opened
   standalone in the dev harness, and the two disagree about h3/h4/p.
   `max-width` matters as much as the margins: the site sets `p { max-width:
   50ch }`, which silently capped the New SAR modal's centred sub-heading at
   513px so it centred inside its own narrow box and read as left-aligned. */
:where(.fdash) h1,
:where(.fdash) h2,
:where(.fdash) h3,
:where(.fdash) h4,
:where(.fdash) h5,
:where(.fdash) h6,
:where(.fdash) p,
:where(.fdash) figure,
:where(.fdash) ul,
:where(.fdash) ol {
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

:where(.fdash-canvas) input {
  margin: 0;
}

/* [hidden] must beat the display values the component classes set — the view
   sections are `display: block` and .fd-back is `display: flex`. */
.fdash [hidden] {
  display: none !important;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.fd-side {
  width: 268px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;
  background: var(--fd-app-bg);
}

.fd-side__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 4px;
}

.fd-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-logo__mark {
  width: 22px;
  height: 22px;
}

.fd-logo__word {
  height: 15px;
  width: auto;
}

.fd-side__collapse {
  color: var(--fd-soft);
  padding: 4px;
  border-radius: 6px;
}

.fd-side__collapse:hover {
  background: #f0f0f0;
}

.fd-newsar {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 33px;
  padding: 0 13px;
  margin-top: 22px;
  border-radius: var(--fd-radius);
  background: var(--fd-green-deep);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: background 0.15s;
}

.fd-newsar:hover {
  background: #064c36;
}

.fd-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.fd-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--fd-radius);
  color: var(--fd-body);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
}

.fd-nav__item:hover {
  background: #f1f2f0;
}

.fd-nav__item[aria-current="page"] {
  background: #e8e9e7;
  border-color: #7dcaa8;
  color: var(--fd-ink);
  font-weight: 700;
}

.fd-nav__item svg {
  width: 19px;
  height: 19px;
  opacity: 0.85;
}

.fd-side__spacer {
  flex: 1;
}

.fd-storage {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: var(--fd-panel);
  padding: 8px 13px 9px;
}

.fd-storage__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--fd-body);
  font-weight: 500;
}

.fd-storage__head svg {
  width: 16px;
  height: 16px;
  color: var(--fd-soft);
}

.fd-storage__pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--fd-green-600);
  font-size: 13px;
}

.fd-storage__track {
  height: 6px;
  border-radius: 999px;
  background: #ececec;
  margin: 7px 0 5px;
  overflow: hidden;
}

.fd-storage__fill {
  height: 100%;
  width: 1%;
  background: var(--fd-green-600);
  border-radius: 999px;
}

.fd-storage__meta {
  font-size: 12.5px;
  color: var(--fd-soft);
}

/* ==========================================================================
   PANEL (topbar + scrolling view area)
   ========================================================================== */

.fd-panel {
  flex: 1;
  min-width: 0;
  margin: 8px 8px 8px 0;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fd-top {
  height: 69px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--fd-line);
}

.fd-top__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--fd-body);
}

.fd-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--fd-body);
  font-weight: 500;
}

.fd-back:hover {
  color: var(--fd-ink);
}

.fd-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.fd-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border-radius: var(--fd-radius);
  background: var(--fd-amber-bg);
  color: var(--fd-body);
}

.fd-bell svg {
  width: 19px;
  height: 19px;
}

.fd-bell__badge {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fd-green);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fd-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #d4d4d4;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.fd-avatar svg {
  width: 20px;
  height: 20px;
}

.fd-user__name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

.fd-user__role {
  font-size: 12.5px;
  color: var(--fd-soft);
  line-height: 1.25;
}

.fd-user__chev {
  color: var(--fd-soft);
  margin-left: 2px;
}

/* The scrolling view region. Views are swapped in here by dashboard.js. */
.fd-views {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}

.fd-views::-webkit-scrollbar {
  width: 8px;
}

.fd-views::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 999px;
}

.fd-view {
  padding: 22px 26px 32px;
}

.fd-view[hidden] {
  display: none;
}

/* ==========================================================================
   SHARED PIECES
   ========================================================================== */

.fd-h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.fd-sub {
  font-size: 14px;
  color: var(--fd-soft);
  margin-top: 2px;
}

.fd-viewhead {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}

.fd-viewhead__actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.fd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--fd-radius);
  font-size: 14.5px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}

.fd-btn svg {
  width: 16px;
  height: 16px;
}

.fd-btn--green {
  background: var(--fd-green-600);
  color: #fff;
  font-weight: 700;
}

.fd-btn--green:hover {
  background: #007f43;
}

.fd-btn--deep {
  background: var(--fd-green-deep);
  color: #fff;
  font-weight: 700;
}

.fd-btn--deep:hover {
  background: #064c36;
}

.fd-btn--ghost {
  border: 1px solid var(--fd-line);
  background: #fff;
  color: var(--fd-ink);
}

.fd-btn--ghost:hover {
  background: #f7f7f7;
}

.fd-btn--muted {
  background: #8ec3a8;
  color: #fff;
  font-weight: 700;
  cursor: default;
}

.fd-card {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: var(--fd-panel);
}

/* --- stat card row (Dashboard + SAR Monitoring) --- */

.fd-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  margin-bottom: 17px;
}

.fd-stat {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: linear-gradient(160deg, #fbfdfc 0%, var(--fd-tint) 100%);
  padding: 18px 20px 20px;
}

.fd-stat__k {
  font-size: 14px;
  color: var(--fd-muted);
  font-weight: 500;
}

.fd-stat__v {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 8px 0 10px;
}

.fd-stat__d {
  font-size: 13px;
  color: var(--fd-soft);
}

/* --- chips --- */

.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.fd-chip svg {
  width: 13px;
  height: 13px;
}

.fd-chip--low {
  background: var(--fd-lime);
  color: var(--fd-lime-ink);
}

.fd-chip--none {
  background: #eef1e6;
  color: #7a8560;
  min-width: 34px;
  justify-content: center;
}

.fd-chip--done {
  background: #eef2ff;
  border: 1px solid #c6d2fe;
  color: #372aac;
}

.fd-chip--idv {
  background: #eef2ff;
  border: 1px solid #c6d2fe;
  color: #372aac;
}

.fd-chip--prog {
  background: var(--fd-blue-bg);
  border: 1px solid var(--fd-blue-line);
  color: var(--fd-blue-ink);
}

.fd-chip--warn {
  background: var(--fd-amber-bg);
  border: 1px solid var(--fd-amber-line);
  color: var(--fd-amber-ink);
}

.fd-chip--beta {
  background: var(--fd-amber-bg);
  border: 1px solid var(--fd-amber-line);
  color: var(--fd-amber-ink);
}

.fd-chip--soon {
  background: var(--fd-blue-bg);
  border: 1px solid var(--fd-blue-line);
  color: var(--fd-blue-ink);
}

/* --- request rows (Dashboard "Recent", Monitoring "All Requests") --- */

.fd-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.fd-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  line-height: 1.35;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}

.fd-row:hover {
  background: #fafbfa;
  border-color: #d4ded8;
}

.fd-row__av {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #ededed;
  color: var(--fd-body);
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.fd-row__id {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.fd-row__id svg {
  width: 15px;
  height: 15px;
  color: var(--fd-faint);
}

.fd-row__name {
  font-size: 13.5px;
  color: var(--fd-muted);
}

.fd-row__mail {
  font-size: 13px;
  color: var(--fd-soft);
}

.fd-row__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fd-row__due {
  font-size: 13.5px;
  color: var(--fd-soft);
  white-space: nowrap;
}

.fd-row__bin {
  color: #f1817a;
  padding: 4px;
}

.fd-row__bin svg {
  width: 17px;
  height: 17px;
}

/* --- misc utilities --- */

.fd-bar {
  height: 8px;
  border-radius: 999px;
  background: #e6e7eb;
  overflow: hidden;
}

.fd-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--fd-green-600);
}

.fd-search {
  width: 340px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
  font: inherit;
  font-size: 14.5px;
  color: var(--fd-ink);
  background: #fff;
}

.fd-search::placeholder {
  color: var(--fd-faint);
}

.fd-search:focus {
  outline: 2px solid var(--fd-green-200);
  outline-offset: -1px;
}

/* --- logo --- */

.fd-logo__full {
  height: 30px;
  width: 71px;
}

.fd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- cards / layout --- */

.fd-pad {
  padding: 27px 24px 24px;
}

.fd-h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

.fd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: stretch;
}

.fd-cardhead {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.fd-cardhead > :last-child {
  margin-left: auto;
}

/* --- Request Processing Overview --- */

.fd-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 21px;
}

.fd-tile {
  border-radius: var(--fd-radius-lg);
  padding: 14px 18px;
  min-height: 126px;
}

.fd-tile--pale {
  background: linear-gradient(150deg, #f4faf6 0%, #eef6f1 100%);
  border: 1px solid #e4efe8;
}

.fd-tile--mint {
  background: var(--fd-mint);
  border: 1px solid var(--fd-green-200);
}

.fd-tile__top {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.fd-tile__ic {
  color: var(--fd-green-600);
}

.fd-tile__tag {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--fd-muted);
}

.fd-tile__v {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fd-green-600);
  line-height: 1.1;
}

.fd-tile__k {
  font-size: 13.5px;
  color: var(--fd-muted);
  margin-top: 1px;
}

.fd-sla {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--fd-line);
}

.fd-sla__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.fd-sla__ic {
  color: #f54a00;
}

.fd-sla__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--fd-body);
}

.fd-sla__pct {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--fd-green-600);
}

.fd-sla__note {
  font-size: 13.5px;
  color: var(--fd-soft);
  margin-top: 9px;
}

/* --- filter pills --- */

.fd-pills {
  display: flex;
  gap: 7px;
  flex: none;
}

.fd-pill {
  flex: none;
  height: 30px;
  padding: 0 15px;
  border-radius: 999px;
  background: #f1f2f4;
  color: var(--fd-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.fd-pill:hover {
  background: #e7e9eb;
}

.fd-pill.is-on {
  background: #00a66c;
  color: #fff;
  font-weight: 700;
}

/* ==========================================================================
   CHARTS (Metrics) — hand-authored inline SVG. The data never changes, so
   there is no charting library and no runtime layout maths.
   ========================================================================== */

.fd-chart {
  width: 100%;
  height: auto;
  display: block;
}

.fd-chart text {
  font-family: inherit;
  font-size: 11px;
  fill: var(--fd-soft);
}

.fd-perf {
  border-radius: var(--fd-radius-lg);
  background: linear-gradient(160deg, #f7fbf8 0%, #eef7f1 100%);
  border: 1px solid #e6f0ea;
  padding: 16px 18px 24px;
  margin-top: 21px;
}

.fd-perf__k {
  font-size: 13.5px;
  color: var(--fd-muted);
}

.fd-perf__v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fd-green-600);
  line-height: 1.15;
  margin-bottom: 4px;
}

.fd-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-left: auto;
  flex: none;
}

.fd-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fd-muted);
}

.fd-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: block;
}

.fd-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--fd-line);
  margin-top: 16px;
  padding-top: 18px;
  text-align: center;
}

.fd-totals__v {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fd-totals__k {
  font-size: 13.5px;
  color: var(--fd-muted);
  margin-top: 2px;
}

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */

.fd-ints {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.fd-int__top {
  min-height: 40px;
}

.fd-int {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 232px;
}

.fd-int__body {
  padding: 20px 20px 18px;
  flex: 1;
}

.fd-int__top {
  display: flex;
  align-items: flex-start;
  margin-bottom: 17px;
}

/* The supplied marks are a mix of square icons and wide lock-ups, so the slot
   is height-constrained and lets width follow the artwork. */
.fd-int__logo {
  height: 40px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  object-position: left center;
}

.fd-int__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fd-int__desc {
  font-size: 14px;
  color: var(--fd-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.fd-int__foot {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--fd-line-soft);
}

.fd-int__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: var(--fd-radius);
  font-size: 15px;
  font-weight: 500;
  background: var(--fd-green-deep);
  color: #fff;
  transition: background 0.15s;
}

.fd-int__btn:hover {
  background: #064c36;
}

.fd-int__btn--off {
  background: #eef5e4;
  color: #2f4a2c;
}

.fd-int__btn--off:hover {
  background: #e5efd6;
}

.fd-int__soon {
  font-size: 13.5px;
  color: var(--fd-soft);
  text-align: center;
  line-height: 1.5;
}

/* ==========================================================================
   SAR DETAIL / MEDIA AI DETAIL
   ========================================================================== */

/* Not equal columns: "SAR Progress" carries a status phrase, an info icon and
   a verification chip on one line, and wraps into a mess at 1fr. The ratios are
   taken from the reference screenshot. */
.fd-status {
  display: grid;
  grid-template-columns: 1.2fr 1.05fr 0.85fr 1.45fr 0.7fr;
  gap: 20px;
  margin: 18px 0 16px;
}

.fd-status__k {
  font-size: 13.5px;
  color: var(--fd-soft);
}

.fd-status__v {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.fd-status__v--green {
  color: var(--fd-green-600);
}

.fd-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 22px;
}

.fd-step {
  text-align: center;
}

.fd-step__dot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #dfe2e8;
  color: var(--fd-muted);
}

.fd-step__dot--done {
  background: var(--fd-green-500);
  color: #fff;
}

.fd-step__dot--now {
  background: #d4e94a;
  color: #35400a;
}

.fd-step__dot svg {
  width: 19px;
  height: 19px;
}

.fd-step__label {
  font-size: 14.5px;
  color: var(--fd-body);
}

.fd-tabline {
  border-bottom: 1px solid var(--fd-line);
  margin-bottom: 22px;
}

.fd-tabline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fd-ink);
  font-size: 15px;
  color: var(--fd-body);
}

.fd-tabline svg {
  width: 17px;
  height: 17px;
}

.fd-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
}

.fd-fact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.fd-fact svg {
  width: 20px;
  height: 20px;
  color: var(--fd-faint);
  margin-top: 2px;
}

.fd-fact__k {
  font-size: 14.5px;
  color: var(--fd-soft);
}

.fd-fact__v {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-attached {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.fd-attached__ic {
  width: 38px;
  height: 38px;
  border-radius: var(--fd-radius);
  background: var(--fd-green-100);
  color: var(--fd-green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.fd-attached__ic svg {
  width: 20px;
  height: 20px;
}

/* --- detected faces --- */

.fd-file {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  padding: 16px 18px 18px;
  margin-top: 18px;
}

.fd-file__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.fd-file__head svg {
  width: 17px;
  height: 17px;
  color: var(--fd-soft);
}

.fd-file__name {
  font-size: 15px;
  font-weight: 500;
}

.fd-file__count {
  font-size: 13.5px;
  color: var(--fd-soft);
}

.fd-check {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--fd-body);
}

.fd-check__box {
  width: 17px;
  height: 17px;
  border: 1.5px solid #b5b9c0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.12s, border-color 0.12s;
}

.fd-check__box svg {
  width: 12px;
  height: 12px;
}

.fd-check[aria-checked="true"] .fd-check__box {
  background: #155dfc;
  border-color: #155dfc;
  color: #fff;
}

.fd-faces {
  display: flex;
  gap: 14px;
}

.fd-face {
  position: relative;
  width: 69px;
  height: 69px;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.12s;
}

.fd-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fd-face[aria-pressed="true"] {
  border-color: var(--fd-green-500);
}

.fd-face__tick {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--fd-green-500);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

.fd-face__tick svg {
  width: 12px;
  height: 12px;
}

.fd-face[aria-pressed="true"] .fd-face__tick {
  display: flex;
}

/* ==========================================================================
   NEW SAR MODAL
   ========================================================================== */

.fd-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(23, 23, 23, 0.42);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fd-modal[hidden] {
  display: none;
}

/* The close bar is transparent so the dimmed application shows through it,
   as in the real app — the sheet slides up under the existing topbar rather
   than replacing it. */
.fd-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 44px;
  color: var(--fd-ink);
  font-size: 15.5px;
  background: none;
}

.fd-modal__sheet {
  background: #fff;
  min-height: calc(100% - 44px);
  padding-top: 60px;
  padding-bottom: 56px;
}

.fd-modal__title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
}

.fd-modal__sub {
  text-align: center;
  color: var(--fd-muted);
  font-size: 15px;
  margin-top: 6px;
}

.fd-segs {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: #f4f4f5;
  border-radius: 12px;
  width: max-content;
  margin: 22px auto 0;
}

.fd-seg {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fd-body);
  transition: background 0.15s, color 0.15s;
}

.fd-seg svg {
  width: 17px;
  height: 17px;
}

.fd-seg.is-on {
  background: #00a642;
  color: #fff;
  font-weight: 700;
}

.fd-form {
  width: 790px;
  margin: 26px auto 0;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  padding: 26px 30px 28px;
}

.fd-form__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.fd-form__legend svg {
  width: 20px;
  height: 20px;
  color: var(--fd-green-600);
}

.fd-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}

.fd-field {
  margin-bottom: 17px;
}

.fd-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 7px;
}

.fd-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--fd-soft);
}

.fd-label svg {
  width: 14px;
  height: 14px;
  color: var(--fd-faint);
}

.fd-input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--fd-line);
  border-radius: 9px;
  padding: 0 13px;
  font: inherit;
  font-size: 14.5px;
  background: #fff;
  color: var(--fd-ink);
  display: flex;
  align-items: center;
  gap: 9px;
}

.fd-input--area {
  height: 118px;
  align-items: flex-start;
  padding-top: 11px;
}

.fd-input--tags {
  height: 84px;
  align-items: flex-start;
  padding-top: 11px;
}

.fd-input span {
  color: var(--fd-faint);
}

.fd-input svg {
  width: 16px;
  height: 16px;
  color: var(--fd-soft);
}

.fd-input__end {
  margin-left: auto;
  color: var(--fd-soft);
}

.fd-hintline {
  font-size: 13px;
  color: var(--fd-soft);
  margin: -3px 0 8px;
}

.fd-drop {
  border: 1.5px dashed #d4d4d8;
  border-radius: var(--fd-radius-lg);
  padding: 42px 20px;
  text-align: center;
  margin-top: 6px;
}

.fd-drop svg {
  width: 38px;
  height: 38px;
  color: var(--fd-green-600);
  margin: 0 auto 12px;
}

.fd-drop__t {
  font-size: 15px;
  font-weight: 700;
}

.fd-drop__s {
  font-size: 13.5px;
  color: var(--fd-soft);
  margin-top: 4px;
}

.fd-form__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.fd-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex: none;
}

/* ==========================================================================
   HOTSPOTS + COACH NOTE
   ========================================================================== */

.fd-spot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--fd-lime);
  color: #2f3d0c;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 18;
  cursor: help;
}

.fd-spot svg {
  width: 13px;
  height: 13px;
}

.fd-spot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--fd-lime);
  opacity: 0;
  animation: fd-ping 2.6s ease-out infinite;
}

@keyframes fd-ping {
  0% { transform: scale(0.85); opacity: 0.9; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* Tips open upwards by default. Near the top of a view that puts them outside
   .fd-views, which scrolls and therefore clips — hence the --below modifier,
   which every spot in the top ~60px of a view must use. */
.fd-spot__tip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  width: 250px;
  margin-left: -125px;
  z-index: 19;
  padding: 11px 13px;
  border-radius: 10px;
  background: #1d2729;
  color: #f3f3ed;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  pointer-events: none;
}

.fd-spot:hover .fd-spot__tip,
.fd-spot:focus-visible .fd-spot__tip,
.fd-spot[data-open] .fd-spot__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fd-spot--below .fd-spot__tip {
  bottom: auto;
  top: calc(100% + 11px);
  transform: translateY(-4px);
}

.fd-spot--below:hover .fd-spot__tip,
.fd-spot--below:focus-visible .fd-spot__tip,
.fd-spot--below[data-open] .fd-spot__tip {
  transform: translateY(0);
}

/* keep a tip that hangs off the right edge inside the panel */
.fd-spot--left .fd-spot__tip {
  left: auto;
  right: -8px;
  margin-left: 0;
}

/* ==========================================================================
   CHROME OUTSIDE THE SCALED CANVAS
   ========================================================================== */

.fd-fs {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 0;
  background: rgba(29, 39, 41, 0.78);
  color: #f3f3ed;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.fd-fs svg {
  width: 17px;
  height: 17px;
}

.fdash:hover .fd-fs,
.fd-fs:focus-visible,
.fdash.is-fs .fd-fs {
  opacity: 1;
}

.fd-fs:hover {
  background: #1d2729;
}

.fd-note {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 30;
  max-width: 340px;
  margin: 0;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(29, 39, 41, 0.9);
  color: #f3f3ed;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.fd-note.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* mobile-tour pointer — lives inside the canvas so it shares its coordinates */
.fd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;
  width: 26px;
  height: 26px;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  filter: none;
}

.fd-cursor[hidden] {
  display: none;
}

.fd-ripple {
  position: absolute;
  z-index: 24;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 999px;
  border: 2px solid var(--fd-green-500);
  pointer-events: none;
  animation: fd-ripple 0.55s ease-out forwards;
}

@keyframes fd-ripple {
  from { transform: scale(0.35); opacity: 0.95; }
  to   { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   FULLSCREEN
   Native Fullscreen API where it exists; on iPhone Safari (which refuses
   requestFullscreen on anything but <video>) dashboard.js falls back to
   .is-fs-fallback, a fixed overlay that covers the viewport instead.

   The host is .fdash-wrap, not .fdash: fullscreening the frame alone would
   leave the app switcher outside the fullscreen element and therefore off
   screen, stranding whoever went full size in whichever dashboard they
   happened to be looking at.
   ========================================================================== */

.fdash-wrap:fullscreen,
.fdash-wrap.is-fs-fallback {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  margin: 0;
  z-index: 2147483000;
  background: var(--swatch--dark, #1d2729);
  display: flex;
  flex-direction: column;
}

.fdash-wrap:fullscreen .fdash-tabs,
.fdash-wrap.is-fs-fallback .fdash-tabs {
  flex: none;
  padding: 0.5rem 0 0 0.75rem;
}

.fdash-wrap:fullscreen .fdash-tab,
.fdash-wrap.is-fs-fallback .fdash-tab {
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  background: rgba(243, 243, 237, 0.12);
  color: rgba(243, 243, 237, 0.72);
}

.fdash-wrap:fullscreen .fdash-tab.is-on,
.fdash-wrap.is-fs-fallback .fdash-tab.is-on {
  background: #f3f3ed;
  color: var(--swatch--dark, #1d2729);
}

.fdash-wrap:fullscreen .fdash,
.fdash-wrap.is-fs-fallback .fdash {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  border-width: 0.5rem 0 0;
  box-shadow: none;
  background: var(--fd-app-bg);
}

/* ==========================================================================
   RESPONSIVE
   Phones get the auto-tour and no interaction (dashboard.js sets .is-tour),
   so the canvas is inert but still legible because the tour zooms it.
   ========================================================================== */

@media (max-width: 991px) {
  .fdash {
    border-width: 0.5rem;
    border-radius: 1.25rem;
  }
  .fdash-tabs {
    padding-left: 1rem;
  }
  .fdash-tab {
    font-size: 0.85rem;
    padding: 0.6rem 1.1rem 1rem;
    margin-bottom: -0.4rem;
    border-radius: 0.7rem 0.7rem 0 0;
  }
  .fd-fs__txt {
    display: none;
  }
  .fd-fs {
    padding: 0;
    width: 36px;
    justify-content: center;
    opacity: 1;
  }
}

/* ==========================================================================
   PORTRAIT PHONES — the flat screenshot instead of the app
   The interactive demo needs a pointer and room to show a 1669px canvas.
   In portrait neither is available, so the whole widget stands down and the
   hero shows the still it carried before. dashboard.js gates the tour and the
   deferred fetch on this exact query, so nothing runs behind the image.
   ========================================================================== */

@media (max-width: 767px) and (orientation: portrait) {
  .fdash-still {
    display: block;
  }
  .fdash-still img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
  }
  .fdash-wrap > .fdash-tabs,
  .fdash-wrap > .fdash {
    display: none;
  }
}

@media (max-width: 767px) {
  .fdash {
    /* Near-square on phones. The tour zooms to a fixed canvas-px span, so the
       frame is a viewport onto the app rather than a shrunken picture of all
       of it — and a 16:10 letterbox would leave nothing legible inside.
       Landscape only now; portrait gets the still above. */
    aspect-ratio: 5 / 6;
  }
  .fdash-tabs {
    padding-left: 0.75rem;
  }
  .fdash-tab {
    font-size: 0.75rem;
    padding: 0.5rem 0.8rem 0.85rem;
  }
  .fdash-tab__long {
    display: none;
  }
  .fdash-tab__short {
    display: inline;
  }
  .fd-note {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    font-size: 12.5px;
    padding: 10px 12px;
  }
}

.fdash.is-tour .fdash-canvas {
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .fd-spot::after {
    animation: none;
  }
  .fdash.is-tour .fdash-canvas {
    transition: none;
  }
  .fd-cursor {
    display: none !important;
  }
}

/* axis labels sit under the perf chart as text, not SVG, so they inherit the
   page font at a real px size rather than being scaled with the viewBox */
.fd-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fd-soft);
  padding: 2px 4px 6px;
}

/* --- Upcoming Deadlines list ---------------------------------------------
   min-height matches what the old empty state reserved, so the Dashboard's
   two-column row keeps the height it was measured against. */
.fd-dls {
  min-height: 267px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.fd-dl {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: #fff;
  line-height: 1.35;
  transition: border-color 0.15s, background 0.15s;
}

.fd-dl:hover {
  background: #fafbfa;
  border-color: #d4ded8;
}

.fd-dl__tick {
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--fd-green-500);
  flex: none;
}

.fd-dl__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fd-dl__id {
  font-size: 13px;
  color: var(--fd-soft);
}

.fd-dl__days {
  margin-left: auto;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--fd-green-600);
}

.fd-dl__days span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--fd-soft);
}

/* ==========================================================================
   ORGANISATION APP
   The second dashboard reuses the shell, the stat cards, the chips and the
   buttons; only the pieces below are new — a data table, the plan/storage
   meters, the plan cards, a billing table and the email-template screen.
   ========================================================================== */

/* four stat cards rather than six */
.fd-stats--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* the Active Subscription card carries a plan name, not a count */
.fd-stat__v--txt {
  font-size: 23px;
}

/* --- search box with a leading icon --- */

.fd-searchwrap {
  position: relative;
  width: 340px;
  flex: none;
}

.fd-searchwrap svg {
  position: absolute;
  left: 13px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  color: var(--fd-faint);
  pointer-events: none;
}

.fd-searchwrap .fd-search {
  width: 100%;
  padding-left: 38px;
}

/* --- data table (DPO list) ---------------------------------------------
   Grid rather than <table>: every cell is a single line, the column ratios
   are taken from the reference, and a grid keeps the header and the rows in
   lockstep without colspan gymnastics. */

.fd-tbl__head,
.fd-tbl__row {
  display: grid;
  grid-template-columns: 1.5fr 1.25fr 1.5fr 0.9fr 0.75fr 1.15fr 0.8fr 0.7fr;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.fd-tbl__head {
  height: 54px;
  font-size: 14px;
  color: var(--fd-soft);
  border-bottom: 1px solid var(--fd-line);
}

.fd-tbl__row {
  height: 74px;
  border-bottom: 1px solid var(--fd-line-soft);
  font-size: 14.5px;
  color: var(--fd-body);
}

.fd-tbl__row:last-child {
  border-bottom: 0;
}

.fd-tbl__row:hover {
  background: #fafbfa;
}

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

.fd-tbl__av {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ededed;
  color: var(--fd-body);
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.fd-tbl__name {
  font-weight: 500;
  color: var(--fd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-tbl__acts {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fd-tbl__acts svg {
  width: 18px;
  height: 18px;
}

.fd-tbl__ban {
  color: #f1817a;
}

.fd-tbl__send {
  color: var(--fd-soft);
}

/* SLA figure — outlined pill, so it reads as a measurement rather than a
   status (the solid green pill next to it is the status) */
.fd-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--fd-green-200);
  background: #fff;
  color: var(--fd-green-600);
  font-size: 13px;
  font-weight: 500;
}

.fd-chip--live {
  background: var(--fd-green-deep);
  color: #fff;
  height: 28px;
  border-radius: 8px;
}

.fd-chip--paid {
  background: var(--fd-green-050);
  border: 1px solid var(--fd-green-200);
  color: #0a6b3d;
}

/* --- pagination --- */

.fd-page {
  display: flex;
  align-items: center;
  margin-top: 18px;
  font-size: 14px;
  color: var(--fd-soft);
}

.fd-page b {
  color: var(--fd-ink);
}

.fd-page__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fd-body);
}

.fd-page__nav svg {
  width: 15px;
  height: 15px;
  color: var(--fd-faint);
}

.fd-page__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--fd-line);
  border-radius: 8px;
  background: #fff;
  color: var(--fd-ink);
  font-weight: 500;
}

/* --- current plan --------------------------------------------------------
   The green rule down the left edge is the app's own convention for "this is
   the thing that is currently true", used on the active subscription. */

.fd-plan {
  border: 1px solid var(--fd-line);
  border-left: 5px solid var(--fd-green-600);
  border-radius: var(--fd-radius-lg);
  background: linear-gradient(160deg, #fbfdfc 0%, var(--fd-tint) 100%);
  padding: 24px 26px 26px;
}

.fd-plan__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fd-plan__name {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fd-plan__when {
  font-size: 14.5px;
  color: var(--fd-muted);
  margin-top: 4px;
}

.fd-plan__ref {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 13px;
  border: 1px solid var(--fd-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  color: var(--fd-body);
}

.fd-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}

.fd-meter {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
  background: #fff;
  padding: 15px 17px 16px;
}

.fd-meter__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--fd-body);
  margin-bottom: 11px;
}

.fd-meter__head svg {
  width: 17px;
  height: 17px;
  color: var(--fd-soft);
}

.fd-meter__v {
  margin-left: auto;
}

.fd-meter__v b {
  font-weight: 700;
  color: var(--fd-ink);
}

.fd-meter__foot {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--fd-soft);
  margin-top: 9px;
}

.fd-meter__foot i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--fd-green-600);
  display: block;
}

.fd-meter__foot span {
  margin-left: auto;
}

/* --- plan / storage cards --- */

.fd-plancards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 16px;
  max-width: 1090px;
}

.fd-price {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  background: #fff;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
}

.fd-price__k {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.fd-price__k svg {
  width: 19px;
  height: 19px;
  color: var(--fd-soft);
}

.fd-price__v {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-top: 10px;
}

.fd-price__v em {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  color: var(--fd-soft);
  letter-spacing: 0;
  margin-left: 7px;
}

.fd-price__desc {
  font-size: 14px;
  color: var(--fd-muted);
  line-height: 1.5;
  margin-top: 9px;
}

.fd-price__desc svg {
  width: 15px;
  height: 15px;
  color: var(--fd-faint);
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
}

/* margin-bottom, not a margin on the button: the button carries margin-top:auto
   to sit on the card's floor, and auto resolves to 0 on whichever card is the
   taller of the two — so the gap has to come from the list side. */
.fd-price__list {
  list-style: none;
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fd-price__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--fd-body);
}

.fd-price__list svg {
  width: 17px;
  height: 17px;
  color: var(--fd-green-600);
}

.fd-price__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: auto;
  border-radius: var(--fd-radius);
  background: var(--fd-green-600);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background 0.15s;
}

.fd-price__cta:hover {
  background: #007f43;
}

/* the add-on is gated until 80% of storage is used, so it is shown but inert */
.fd-price__cta--off {
  background: #a9dcc2;
  cursor: default;
}

.fd-price__cta--off:hover {
  background: #a9dcc2;
}

.fd-stepper {
  display: flex;
  align-items: center;
  height: 44px;
  margin: 8px 0 20px;
  padding: 0 14px;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
  color: var(--fd-faint);
}

.fd-stepper svg {
  width: 17px;
  height: 17px;
}

.fd-stepper b {
  margin: 0 auto;
  font-size: 15px;
  color: var(--fd-ink);
}

/* --- billing history --- */

.fd-bill__head,
.fd-bill__row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 2.6fr 1.15fr 0.9fr 0.8fr 0.35fr;
  align-items: center;
  gap: 14px;
}

.fd-bill__head {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fd-soft);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--fd-line);
}

.fd-bill__row {
  height: 66px;
  border-bottom: 1px solid var(--fd-line-soft);
  font-size: 14px;
  color: var(--fd-body);
}

.fd-bill__row:last-child {
  border-bottom: 0;
}

.fd-bill__amt {
  font-weight: 700;
  color: var(--fd-ink);
}

.fd-bill__dots {
  color: var(--fd-faint);
  letter-spacing: 0.12em;
  text-align: right;
}

/* --- email configuration --- */

.fd-emhead {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 26px;
}

.fd-emhead__ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #e0e7ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.fd-emhead__ic svg {
  width: 22px;
  height: 22px;
}

.fd-email {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
}

.fd-email__right {
  border-left: 1px solid var(--fd-line);
  padding-left: 36px;
}

.fd-tmpl {
  display: flex;
  gap: 10px;
  margin: 12px 0 22px;
}

.fd-tmpl span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  background: #f4f4f5;
  color: var(--fd-body);
}

.fd-tmpl span.is-on {
  background: var(--fd-green-100);
  color: #056d3b;
  font-weight: 700;
}

/* the email body is several paragraphs, so the shared .fd-input box has to
   stack rather than centre a single line */
.fd-input--doc {
  height: 196px;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  padding-top: 13px;
  line-height: 1.5;
}

.fd-input--doc span {
  color: var(--fd-body);
}

.fd-input--fill span {
  color: var(--fd-ink);
}

.fd-kvs {
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius-lg);
  padding: 20px 22px 22px;
  margin-top: 26px;
}

.fd-kv {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  color: var(--fd-body);
  margin-top: 13px;
}

.fd-kv b {
  margin-left: auto;
  font-weight: 400;
  color: var(--fd-ink);
}

/* --- Add DPO dialog ------------------------------------------------------
   The New SAR modal is a full-height sheet; this one is a small centred
   dialog, so .fd-modal switches layout mode rather than growing a variant of
   the sheet. */

.fd-modal--mid {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.fd-dialog {
  width: 560px;
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px 28px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3);
}

.fd-dialog__head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.fd-dialog__title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.fd-dialog__x {
  margin-left: auto;
  color: var(--fd-soft);
  padding: 4px;
}

.fd-dialog__x svg {
  width: 18px;
  height: 18px;
}

.fd-dialog .fd-field:last-of-type {
  margin-bottom: 22px;
}

.fd-dialog .fd-input--focus {
  border-color: var(--fd-green-500);
  outline: 3px solid var(--fd-green-100);
  outline-offset: -1px;
}