/* Import fonts first */

/* inlined styles/base/fonts.css */
/* Inter Font Face Declarations */
@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Fallback for older browsers - using static fonts */
@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* Import base styles */

/* inlined styles/base/reset.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    flex: 1;
}


/* Marker-scoped redesign compatibility. Converted routes additionally load
 * redesign/source/app.css and redesign/source/a11y.css so the supplied
 * component library remains intact without colliding with legacy routes. */

/* inlined styles/redesign/compat.css */
/* ============================================================
   ResearchGrants AI redesign — live application compatibility

   The supplied design system is preserved in ./source/*.css. This file is
   intentionally limited to marker-scoped aliases and compatibility rules for
   legacy pages that still load styles/main.css. It must not redefine the
   supplied generic component classes (.btn, .card, .input, and so on).
   ============================================================ */

html[data-rg-redesign="v1"] {
  color-scheme: light;

  /* Namespaced aliases keep shared chrome independent from legacy variables.
     Each fallback is the corresponding value from source/tokens.css. */
  --rg-ink: var(--ink, #0a0a0a);
  --rg-paper: var(--paper, #ffffff);
  --rg-surface: var(--surface, #fafafa);
  --rg-surface-2: var(--surface-2, #f4f4f5);
  --rg-border: var(--border, #e0e0e0);
  --rg-border-soft: var(--border-soft, #b5b5b5);
  --rg-border-strong: var(--border-strong, #848484);
  --rg-muted: var(--muted, #4d4d4d);
  --rg-muted-2: var(--muted-2, #6e6e6e);
  --rg-primary: var(--primary, #ff3700);
  --rg-primary-hover: var(--primary-hover, #f03400);
  --rg-primary-soft: var(--primary-soft, #fff1ec);
  --rg-indigo: var(--indigo, rgb(72 94 216));
  --rg-indigo-strong: var(--indigo-strong, rgb(56 76 190));
  --rg-lime: var(--lime, #a3cd39);
  --rg-success: var(--success, #327d41);
  --rg-warning: var(--warning, #9c6700);
  --rg-danger: var(--danger, #c81e1e);
  --rg-danger-soft: var(--danger-soft, #fdecec);
  --rg-focus: var(--focus, rgb(72 94 216));
  --rg-focus-on-dark: var(--focus-on-dark, #ffffff);
  --rg-nav-bg: var(--nav-bg, #0a0a0a);
  --rg-nav-fg: var(--nav-fg, #ffffff);
  --rg-nav-fg-dim: var(--nav-fg-dim, rgb(255 255 255 / 0.64));
  --rg-font-body: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
  --rg-font-heading: var(--font-heading, "Inter Tight", ui-sans-serif, system-ui, sans-serif);
  --rg-font-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --rg-radius: var(--radius, 8px);
  --rg-radius-lg: var(--radius-lg, 14px);
  --rg-radius-sm: var(--radius-sm, 6px);
  --rg-shadow-card: var(--shadow-card, 0 1px 2px rgb(10 10 10 / 0.04), 0 4px 16px rgb(10 10 10 / 0.05));
  --rg-shadow-pop: var(--shadow-pop, 0 8px 30px rgb(10 10 10 / 0.12));
  --rg-header-h: var(--header-h, 60px);
  --rg-content-max: var(--content-max, 1360px);

  scroll-padding-top: calc(var(--rg-header-h) + 16px);
}

html[data-rg-redesign="v1"] body.rg-redesign {
  display: block;
  width: 100%;
  min-width: 0;
  background: var(--rg-surface);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Shared state indicator for legacy, non-<details> accordions. Native
   <details class="accordion"> elements use the source app.css summary arrow. */
html[data-rg-redesign="v1"] .accordion .rg-accordion-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  color: var(--rg-muted-2, #6e6e6e);
  font: 400 14px/1 var(--rg-font-mono, ui-monospace, monospace);
}

html[data-rg-redesign="v1"] .accordion .rg-accordion-arrow::before {
  content: "↓" / "";
}

html[data-rg-redesign="v1"] .accordion [aria-expanded="true"] .rg-accordion-arrow::before {
  content: "↑" / "";
}

/* Legacy accordion adapters. These selectors are limited to controls that
   expand content vertically; dropdown carets and horizontal panel controls
   keep their existing directional icons. */
html[data-rg-redesign="v1"] :where(
  .final-output-section .expand-btn > svg,
  .grants-form-section .expand-btn > svg,
  .researcher-topic-toggle > .researcher-topic-caret,
  .search-result-title > .search-result-caret,
  .so-alt-toggle > .so-alt-chevron,
  .section-suggestions__header > .section-suggestions__chevron,
  .aim-picker-card__expand > svg,
  .nav-section-title > .chevron
) {
  display: none !important;
}

html[data-rg-redesign="v1"] :where(
  .researcher-topic-toggle,
  .search-result-title,
  .so-alt-toggle,
  .section-suggestions__header,
  .nav-section-title
)::after,
html[data-rg-redesign="v1"] :where(
  .final-output-section .expand-btn,
  .grants-form-section .expand-btn,
  .aim-picker-card__expand,
  .accordion-arrow,
  .other-accordion-arrow,
  .qa-section-chevron
)::before {
  color: var(--rg-muted-2, #6e6e6e);
  font: 400 14px/1 var(--rg-font-mono, ui-monospace, monospace);
  text-align: center;
}

html[data-rg-redesign="v1"] :where(
  .researcher-topic-toggle,
  .search-result-title,
  .so-alt-toggle,
  .section-suggestions__header,
  .nav-section-title
)::after,
html[data-rg-redesign="v1"] :where(
  .final-output-section .expand-btn,
  .grants-form-section .expand-btn,
  .aim-picker-card__expand
)::before {
  content: "↓" / "";
}

html[data-rg-redesign="v1"] :where(
  .researcher-topic-toggle,
  .so-alt-toggle,
  .section-suggestions__header,
  .nav-section-title
)::after {
  flex: 0 0 auto;
  margin-left: auto;
}

html[data-rg-redesign="v1"] :where(
  .researcher-topic-toggle[aria-expanded="true"],
  .search-result-title[aria-expanded="true"],
  .so-alt-toggle.expanded,
  .section-suggestions:not(.is-collapsed) > .section-suggestions__header,
  .nav-section:not(.collapsed) > .nav-section-title
)::after,
html[data-rg-redesign="v1"] :where(
  .final-output-section.expanded .expand-btn,
  .grants-form-section.expanded .expand-btn,
  .aim-picker-card__expand[aria-expanded="true"]
)::before {
  content: "↑" / "";
}

html[data-rg-redesign="v1"] :where(.accordion-arrow, .other-accordion-arrow) {
  width: auto !important;
  height: auto !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
}

html[data-rg-redesign="v1"] :where(.accordion-arrow, .other-accordion-arrow)::before {
  content: "↑" / "";
}

html[data-rg-redesign="v1"] :where(
  .accordion-toggle.collapsed .accordion-arrow,
  .other-accordion-toggle.collapsed .other-accordion-arrow
)::before {
  content: "↓" / "";
}

html[data-rg-redesign="v1"] .qa-section-chevron {
  font-size: 0 !important;
  transform: none !important;
}

html[data-rg-redesign="v1"] .qa-section-chevron::before {
  content: "↑" / "";
}

html[data-rg-redesign="v1"] :where(
  .qa-section-header[aria-expanded="false"],
  .qa-subsection-header[aria-expanded="false"]
) .qa-section-chevron::before {
  content: "↓" / "";
}

/* ---------- Shared proposal navigation rail ----------
   The source uses .n/.label; the live injected navigation uses
   .main-nav-number/.main-nav-label. Keep this mapping shared because proposal,
   upload, budget, review, checklist, and submission routes use separate page
   adapters around the same asynchronous navigation component. */
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-hamburger-icon:hover {
  border-color: var(--rg-border);
  background: var(--rg-surface-2);
  color: var(--rg-ink);
  opacity: 1;
}

html[data-rg-redesign="v1"] body.rg-redesign .main-nav-hamburger-icon svg rect,
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-hamburger-icon svg line,
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-hamburger-icon:hover svg rect,
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-hamburger-icon:hover svg line {
  stroke: currentColor;
}

/* main-nav.css paints the rail's hover and active states in the pre-redesign
   orange (#F2711D) on the label/number children, which outrank the anchor's
   own colour. The source rail is grey-on-surface for hover and indigo for the
   current section (.side-nav a.active / a.active .n). */
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-item:hover .main-nav-label,
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-item:hover .main-nav-number {
  color: var(--rg-ink);
}

html[data-rg-redesign="v1"] body.rg-redesign .main-nav-item.active .main-nav-label,
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-item.active-standalone .main-nav-label {
  color: var(--rg-indigo-strong);
}

html[data-rg-redesign="v1"] body.rg-redesign .main-nav-item.active .main-nav-number,
html[data-rg-redesign="v1"] body.rg-redesign .main-nav-item.active-standalone .main-nav-number {
  color: var(--rg-indigo);
}

@media (min-width: 901px) {
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav {
    width: 100%;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-hamburger-icon {
    border-color: var(--rg-border);
    background: var(--rg-paper);
    color: var(--rg-ink);
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-content,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav.collapsed .main-nav-content {
    max-height: none !important;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-item,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-sub-item,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-aim-header,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-aim-section .main-nav-sub-item {
    justify-content: center;
    padding: 8px 0;
    gap: 0;
    line-height: 1.55;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-section-header,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-content > .main-nav-item {
    margin-top: 10px;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-section:not(.expanded) > .main-nav-sub-items,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-aim-section:not(.expanded) > .main-nav-sub-items {
    visibility: hidden;
    pointer-events: none;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-sub-item,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-aim-header,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-aim-section .main-nav-sub-item {
    padding-left: 0;
    font-size: 10px;
    opacity: 0.75;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-label {
    display: none;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-number {
    min-width: 0;
    margin: 0;
    color: var(--rg-muted-2);
    font-family: var(--rg-font-mono);
    font-size: 10.5px;
    font-weight: inherit;
    letter-spacing: 0;
    line-height: 1.55;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-section-header,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-content > .main-nav-item {
    color: var(--rg-ink);
    font-weight: 600;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-item.active .main-nav-number,
  html[data-rg-redesign="v1"] body.rg-redesign .workspace.nav-collapsed .main-nav-item.active-standalone .main-nav-number {
    color: var(--rg-indigo);
  }
}

@media (max-width: 900px) {
  html[data-rg-redesign="v1"] body.rg-redesign .side-nav .main-nav-hamburger-icon {
    display: none;
  }

  html[data-rg-redesign="v1"] body.rg-redesign .main-nav.collapsed .main-nav-content {
    max-height: none !important;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
  }
}

/* The legacy placeholder is itself the banner landmark. Once the semantic
   <header> fragment is inserted, header.js removes that redundant role. */
html[data-rg-redesign="v1"] #header-placeholder {
  height: var(--rg-header-h);
  pointer-events: none;
}

html[data-rg-redesign="v1"] #header-placeholder > .main-header {
  pointer-events: auto;
}

/* .select carries appearance:none plus a background-image caret. Page CSS that
   predates the redesign repaints those controls with a `background:` shorthand
   (.control-field select, .grants-field select, .form-select, .site-select and
   friends), which resets background-image and leaves a select with no caret and
   no native affordance — it reads as a text input. Restate the caret as a
   longhand at a specificity those element-scoped rules cannot outrank. */
html[data-rg-redesign="v1"] select.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e6e6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* a11y.css gives the wizard footer's prev/next links a 24px target by making
   them inline-flex. Flex layout drops the whitespace text node between the
   arrow <span> and its label, so they render as "<-Funding reports". The
   proposal flow already restores the space with gap:8px; apply it everywhere
   so the grants, upload, and review footers read the same. */
html[data-rg-redesign="v1"] .wizard-footer .nav-link {
  gap: 8px;
}

/* ---------- Live dialog overlays ----------
   styles/components/modal.css predates the redesign and uses `.modal` for the
   full-viewport scrim, with `.modal-content` as the dialog surface. The
   supplied system inverts that: `.modal-overlay` is the scrim and `.modal` is
   the dialog. Both sheets ship, app.css loads last, and it wins the shared
   `.modal` name — so every legacy overlay inherits `max-width:640px`,
   `background:var(--paper)` and a card radius. The scrim turns opaque white and
   the overlay collapses against the left edge instead of covering the viewport.

   identity-admin.css already adapts the pages whose overlays were given a
   `.modal-overlay` class as well; these rules cover the rest by keying on the
   one structural tell of a legacy overlay — it *contains* the dialog surface,
   rather than being it. Controllers still show and hide these nodes through
   inline `display`, which is left untouched. */
html[data-rg-redesign="v1"] .modal:has(> .modal-content) {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgb(10 10 10 / 0.45);
  transform: none;
  overflow: auto;
}

/* The dialog surface takes the supplied modal treatment. Width and centering
   stay with modal.css so existing two-column dialogs keep their proportions. */
html[data-rg-redesign="v1"] .modal > .modal-content:not(.modal) {
  border-radius: var(--rg-radius-lg);
  background: var(--rg-paper);
  box-shadow: 0 24px 64px rgb(10 10 10 / 0.3);
}

/* Legacy dialog chrome, mapped onto the supplied head/body/foot composition. */
html[data-rg-redesign="v1"] .modal-content > .modal-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--rg-border);
}

/* The accent word in a dialog title. app.css already colours `.modal-title em`;
   this is the legacy span that carries the same role. It takes --primary-text,
   not --primary: at 13-19px this is body text, and only the text variant
   clears 4.5:1 on paper. */
html[data-rg-redesign="v1"] .modal-title-orange {
  color: var(--primary-text, #d52e00);
  font-style: normal;
}

html[data-rg-redesign="v1"] .modal-step-number {
  color: var(--rg-muted-2);
  font-family: var(--rg-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* The close control's hover was the pre-redesign orange. */
html[data-rg-redesign="v1"] .modal-close:hover svg path {
  stroke: var(--rg-ink);
}

/* modal.css centres a single 170px action button; the supplied footer is a
   right-aligned row above a hairline rule. */
html[data-rg-redesign="v1"] .modal-content .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rg-border-soft);
}

/* The save control was grey with a lime hover; it is the dialog's primary
   action, so it takes the shared action colour. */
html[data-rg-redesign="v1"] .modal-save-btn,
html[data-rg-redesign="v1"] .add-item-btn {
  width: auto;
  min-width: 150px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--action-edge, transparent);
  border-radius: var(--rg-radius-sm);
  background: var(--action, #ff3700);
  color: var(--action-ink, #000);
  font-family: var(--rg-font-body);
  font-size: 13.5px;
  font-weight: 600;
}

html[data-rg-redesign="v1"] .modal-save-btn:hover,
html[data-rg-redesign="v1"] .add-item-btn:hover {
  background: var(--action-hover, #f03400);
}

/* Dialog form controls adopt the supplied input geometry. */
html[data-rg-redesign="v1"] .modal-form-input,
html[data-rg-redesign="v1"] .modal-form-select,
html[data-rg-redesign="v1"] .modal-form textarea {
  min-height: 38px;
  height: auto;
  border: 1px solid var(--rg-border-strong);
  border-radius: var(--rg-radius);
  padding: 8px 12px;
  background: var(--rg-paper);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 13.5px;
}

html[data-rg-redesign="v1"] .modal-form-input:focus,
html[data-rg-redesign="v1"] .modal-form-select:focus,
html[data-rg-redesign="v1"] .modal-form textarea:focus {
  border-color: var(--rg-indigo);
  box-shadow: 0 0 0 3px rgb(72 94 216 / 0.14);
}

html[data-rg-redesign="v1"] .modal-form-input::placeholder,
html[data-rg-redesign="v1"] .modal-form textarea::placeholder {
  color: var(--rg-muted-2);
}

html[data-rg-redesign="v1"] .modal-form-group > label {
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 12.5px;
  font-weight: 500;
}

html[data-rg-redesign="v1"] .modal-dropdown-arrow {
  background-color: var(--rg-muted-2);
}

/* Shared live dialogs keep their controller classes but use the supplied
   modal typography instead of their legacy Helvetica/Arial declarations. */
html[data-rg-redesign="v1"] .warning-title,
html[data-rg-redesign="v1"] .proposal-share-title {
  font-family: var(--rg-font-heading);
}

html[data-rg-redesign="v1"] .warning-subtitle,
html[data-rg-redesign="v1"] .warning-btn,
html[data-rg-redesign="v1"] .proposal-share-dialog {
  font-family: var(--rg-font-body);
}

/* ---------- Ported accessibility compatibility ----------
   These declarations mirror source/a11y.css, but use a namespaced skip-link
   class and a root marker so legacy component selectors cannot collide. */
html[data-rg-redesign="v1"] .rg-skip-link,
html[data-rg-redesign="v1"] .skip-link[data-rg-skip-link] {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2000;
  background: var(--rg-paper);
  color: var(--rg-indigo-strong);
  border: 1px solid var(--rg-indigo);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: top 0.14s ease;
}

html[data-rg-redesign="v1"] .rg-skip-link:focus,
html[data-rg-redesign="v1"] .skip-link[data-rg-skip-link]:focus {
  top: 8px;
}

html[data-rg-redesign="v1"] .rg-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

html[data-rg-redesign="v1"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rg-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

html[data-rg-redesign="v1"] .main-header :where(a, button):focus-visible {
  outline-color: var(--rg-focus-on-dark);
}

html[data-rg-redesign="v1"] [hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-rg-redesign="v1"] *,
  html[data-rg-redesign="v1"] *::before,
  html[data-rg-redesign="v1"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  html[data-rg-redesign="v1"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }

  html[data-rg-redesign="v1"] .main-header,
  html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown {
    border: 1px solid CanvasText;
  }
}

@media print {
  html[data-rg-redesign="v1"] .rg-skip-link,
  html[data-rg-redesign="v1"] .skip-link[data-rg-skip-link] {
    display: none !important;
  }
}


/* Import components */

/* inlined components/organisms/headers/header.css */
/**
 * Shared application header.
 *
 * The navigation, brand, user-chip, account-menu, and responsive declarations
 * below are ported from Downloads/redesign/styles/app.css. Selectors are rooted
 * at the redesign marker and legacy class/ID hooks are retained for live code.
 */

/* ---------- Top navigation (ported from the supplied app.css) ---------- */
html[data-rg-redesign="v1"] .main-header.app-header {
    width: 100%;
    height: var(--rg-header-h);
    background: var(--rg-nav-bg);
    color: var(--rg-nav-fg);
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 24px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border: 0;
    box-shadow: none;
}

html[data-rg-redesign="v1"] .main-header .brand {
    display: flex;
    align-items: center;
    flex: none;
    position: static;
    transform: none;
    text-decoration: none;
}

html[data-rg-redesign="v1"] .main-header .brand:hover {
    text-decoration: none;
}

html[data-rg-redesign="v1"] .main-header .brand img {
    display: block;
    width: auto;
    height: 22px;
}

html[data-rg-redesign="v1"] .main-header .divider {
    width: 1px;
    height: 22px;
    flex: none;
    position: static;
    transform: none;
    background: rgb(255 255 255 / 0.18);
}

html[data-rg-redesign="v1"] .main-header nav {
    display: flex;
    gap: 4px;
    min-width: 0;
}

html[data-rg-redesign="v1"] .main-header nav a {
    color: var(--rg-nav-fg-dim);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    padding: 7px 12px;
    border-radius: 6px;
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    height: auto;
    white-space: nowrap;
    text-decoration: none;
}

html[data-rg-redesign="v1"] .main-header nav a:hover {
    color: var(--rg-nav-fg);
    text-decoration: none;
    background: rgb(255 255 255 / 0.07);
}

html[data-rg-redesign="v1"] .main-header nav a.active,
html[data-rg-redesign="v1"] .main-header nav a.is-active {
    color: var(--rg-nav-fg);
    background: rgb(255 255 255 / 0.1);
}

html[data-rg-redesign="v1"] .main-header .header-spacer {
    flex: 1;
    min-width: 12px;
}

html[data-rg-redesign="v1"] .main-header .user-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    height: auto;
    text-align: right;
    transform: none;
}

html[data-rg-redesign="v1"] .main-header .user-chip .avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rg-indigo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--rg-font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    appearance: none;
}

html[data-rg-redesign="v1"] .main-header .user-chip .avatar:hover,
html[data-rg-redesign="v1"] .main-header .user-chip.open .avatar {
    background: var(--rg-indigo-strong);
}

html[data-rg-redesign="v1"] .main-header .header-user-info {
    position: static;
    transform: none;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

html[data-rg-redesign="v1"] .main-header .header-user-info.is-visible {
    display: flex;
}

html[data-rg-redesign="v1"] .main-header .user-chip .name {
    color: var(--rg-nav-fg);
    font-family: var(--rg-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

html[data-rg-redesign="v1"] .main-header .user-chip .org {
    color: var(--rg-nav-fg-dim);
    font-family: var(--rg-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

html[data-rg-redesign="v1"] .main-header .header-user-initials:empty {
    display: none;
}

html[data-rg-redesign="v1"] .main-header .avatar.has-initials .user-icon {
    display: none;
}

/* ---------- Live account-menu compatibility ----------
   Ported from the supplied .user-menu rules and mapped to the existing
   .user-dropdown fragment so its links, logout handler, and IDs stay live. */
html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: auto;
    min-width: 224px;
    padding: 6px;
    z-index: 60;
    background: var(--rg-paper);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow-pop);
    text-align: left;
    display: flex;
    flex-direction: column;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown.is-hidden {
    display: none;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item {
    width: auto;
    min-height: 38px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 4px;
    color: var(--rg-muted);
    font-family: var(--rg-font-body);
    font-size: 13.5px;
    line-height: 1.3;
    text-decoration: none;
    position: relative;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item:hover,
html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item:focus-visible {
    background: var(--rg-surface);
    color: var(--rg-ink);
    text-decoration: none;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item .dropdown-icon,
html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item span:not(.dropdown-icon) {
    position: static;
    transform: none;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item .dropdown-icon {
    width: 15px;
    height: 15px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rg-muted-2);
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item .dropdown-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item:hover .dropdown-icon svg path,
html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item:hover .dropdown-icon svg rect,
html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item:hover .dropdown-icon svg line {
    stroke: var(--rg-ink);
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item:hover .dropdown-icon svg path[fill]:not([fill="none"]) {
    fill: var(--rg-ink);
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item-spaced {
    color: var(--rg-danger);
    margin-top: 6px;
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item-spaced::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    transform: none;
    background: var(--rg-border-soft);
}

html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item-spaced:hover,
html[data-rg-redesign="v1"] .header-profile-icon .user-dropdown-item-spaced:focus-visible {
    color: var(--rg-danger);
    background: var(--rg-danger-soft);
}

/* Header on narrow screens: ported from the supplied responsive rules. */
@media (max-width: 780px) {
    html[data-rg-redesign="v1"] .main-header.app-header {
        gap: 14px;
        padding: 0 16px;
    }

    html[data-rg-redesign="v1"] .main-header .divider {
        display: none;
    }

    html[data-rg-redesign="v1"] .main-header .brand img {
        height: 19px;
    }

    html[data-rg-redesign="v1"] .main-header nav a {
        padding: 7px 9px;
        font-size: 12.5px;
    }

    html[data-rg-redesign="v1"] .main-header .user-chip > div:first-child {
        display: none;
    }
}

@media (max-width: 460px) {
    html[data-rg-redesign="v1"] .main-header.app-header {
        padding: 0 12px;
        gap: 10px;
    }

    html[data-rg-redesign="v1"] .main-header .brand img {
        height: 16px;
    }

    html[data-rg-redesign="v1"] .main-header nav a {
        padding: 6px 7px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    html[data-rg-redesign="v1"] .main-header.app-header {
        gap: 8px;
    }

    html[data-rg-redesign="v1"] .main-header nav {
        overflow-x: auto;
        min-width: 0;
        scrollbar-width: none;
    }

    html[data-rg-redesign="v1"] .main-header nav::-webkit-scrollbar {
        display: none;
    }

    html[data-rg-redesign="v1"] .main-header nav a {
        padding: 6px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    html[data-rg-redesign="v1"] .main-header .header-spacer {
        min-width: 0;
    }

    html[data-rg-redesign="v1"] .main-header .user-chip {
        flex: none;
    }

    html[data-rg-redesign="v1"] .main-header .brand img {
        height: 15px;
    }
}


/* inlined styles/components/header.css */
/* 
 * Header Component Styles
 * NOTE: The main header styles are now in components/organisms/headers/header.css
 * This file only contains shared dropdown styles that may be used by other components
 */

/* Profile dropdown menu */
.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 177px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.161);
    display: none;
    z-index: 1000;
}

.profile-dropdown.active {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 9px 15px;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    font-family: 'Inter';
}

.dropdown-item svg path,
.dropdown-item svg circle,
.dropdown-item svg rect,
.dropdown-item svg line {
    stroke: #000 !important;
    fill: none !important;
}

.dropdown-item svg path[fill="#707070"],
.dropdown-item svg path[fill="#757575"] {
    fill: #000 !important;
}

.dropdown-item:hover {
    background-color: #F4F4F6;
}

.dropdown-item:hover span {
    color: #F2711D;
}

.dropdown-item:hover svg path,
.dropdown-item:hover svg circle,
.dropdown-item:hover svg rect,
.dropdown-item:hover svg line {
    stroke: #F2711D !important;
}

.dropdown-item:hover svg path[fill="#707070"],
.dropdown-item:hover svg path[fill="#757575"],
.dropdown-item:hover svg path {
    fill: #F2711D !important;
}

.dropdown-item.active {
    background-color: #f4f4f6;
}

.dropdown-item.active span {
    color: #f2711d;
}

.dropdown-item.active svg path,
.dropdown-item.active svg circle {
    stroke: #f2711d !important;
    fill: #f2711d !important;
}

.dropdown-item img, .dropdown-item svg {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.dropdown-divider {
    height: 1px;
    background-color: #dfdfdf;
    margin: 0;
    padding: 0;
}

 /* Dropdown styles only */

/* inlined styles/components/icons.css */
/* Icons Component Styles */

.icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

:root {
    --rg-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.828' height='8.414' viewBox='0 0 14.828 8.414'%3E%3Cpath d='M1.414 1L7.414 7L13.414 1' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
}

.rg-chevron {
    display: inline-block;
    width: 14.828px;
    height: 8.414px;
    background-color: currentColor;
    -webkit-mask-image: var(--rg-chevron-mask);
    mask-image: var(--rg-chevron-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Flip canonical inline chevron path to down by default app-wide */
path[d="M13.414 7L7.414 1L1.414 7"] {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleY(-1);
}

/* Expand/Collapse Icon */
.icon-expand {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
}

.icon-expand::before,
.icon-expand::after {
    content: '';
    position: absolute;
    background-color: #000;
    transition: transform 0.3s ease;
}

/* Horizontal line */
.icon-expand::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}

/* Vertical line */
.icon-expand::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}

/* When collapsed (minus sign) */
.icon-expand.collapsed::after {
    transform: scaleY(0);
}

/* SVG-based icons */
.icon-expand-svg {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Info icons are drawn to the SVG edge; allow stroke to render fully */
.info-icon,
.info-icon svg {
    overflow: visible;
}

.icon-expand-svg.collapsed path:nth-child(2) {
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

/* Global Icon Hover Styles */
/* All icons (except AI and Warning Triangle) change to #F2711D on hover */
/* Default color for all icons is #B7B7B7 (except AI and Warning Triangle) */

/* Stroke-based icons (most icons use stroke) */
.user-icon:hover path,
.user-icon:hover circle,
.user-icon:hover line,
.user-icon:hover rect,
.user-icon:hover g path,
.user-icon:hover g circle,
.user-icon:hover g line,
.user-icon:hover g rect,
.profile-icon:hover path,
.profile-icon:hover circle,
.profile-icon:hover line,
.profile-icon:hover rect,
.profile-icon:hover g path,
.profile-icon:hover g circle,
.profile-icon:hover g line,
.profile-icon:hover g rect,
.organization-icon:hover path,
.organization-icon:hover circle,
.organization-icon:hover line,
.organization-icon:hover rect,
.organization-icon:hover g path,
.organization-icon:hover g circle,
.organization-icon:hover g line,
.organization-icon:hover g rect,
.billing-icon:hover path,
.billing-icon:hover circle,
.billing-icon:hover line,
.billing-icon:hover rect,
.billing-icon:hover g path,
.billing-icon:hover g circle,
.billing-icon:hover g line,
.billing-icon:hover g rect,
.logout-icon:hover path,
.logout-icon:hover circle,
.logout-icon:hover line,
.logout-icon:hover rect,
.logout-icon:hover g path,
.logout-icon:hover g circle,
.logout-icon:hover g line,
.logout-icon:hover g rect,
.delete-icon:hover path,
.delete-icon:hover circle,
.delete-icon:hover line,
.delete-icon:hover rect,
.delete-icon:hover g path,
.delete-icon:hover g circle,
.delete-icon:hover g line,
.delete-icon:hover g rect,
.sidebar-icon:hover path,
.sidebar-icon:hover circle,
.sidebar-icon:hover line,
.sidebar-icon:hover rect,
.sidebar-icon:hover g path,
.sidebar-icon:hover g circle,
.sidebar-icon:hover g line,
.sidebar-icon:hover g rect,
.info-icon:hover path,
.info-icon:hover circle,
.info-icon:hover line,
.info-icon:hover rect,
.info-icon:hover g path,
.info-icon:hover g circle,
.info-icon:hover g line,
.info-icon:hover g rect,
.home-icon:hover path,
.home-icon:hover circle,
.home-icon:hover line,
.home-icon:hover rect,
.home-icon:hover g path,
.home-icon:hover g circle,
.home-icon:hover g line,
.home-icon:hover g rect,
.close-icon:hover path,
.close-icon:hover circle,
.close-icon:hover line,
.close-icon:hover rect,
.close-icon:hover g path,
.close-icon:hover g circle,
.close-icon:hover g line,
.close-icon:hover g rect,
.dashboard-icon:hover path,
.dashboard-icon:hover circle,
.dashboard-icon:hover line,
.dashboard-icon:hover rect,
.dashboard-icon:hover g path,
.dashboard-icon:hover g circle,
.dashboard-icon:hover g line,
.dashboard-icon:hover g rect,
.add-icon:hover path,
.add-icon:hover circle,
.add-icon:hover line,
.add-icon:hover rect,
.add-icon:hover g path,
.add-icon:hover g circle,
.add-icon:hover g line,
.add-icon:hover g rect,
.attach-file-add-icon:hover path,
.attach-file-add-icon:hover circle,
.attach-file-add-icon:hover line,
.attach-file-add-icon:hover rect,
.attach-file-add-icon:hover g path,
.attach-file-add-icon:hover g circle,
.attach-file-add-icon:hover g line,
.attach-file-add-icon:hover g rect {
    stroke: #F2711D !important;
    transition: stroke 0.2s ease;
}

/* Fill-based icons */
.profile-icon:hover path,
.profile-icon:hover g path {
    fill: #F2711D !important;
    transition: fill 0.2s ease;
}

.add-icon:hover path,
.add-icon:hover g path {
    fill: #F2711D !important;
    transition: fill 0.2s ease;
}

.logout-icon:hover path,
.logout-icon:hover g path {
    fill: #F2711D !important;
    transition: fill 0.2s ease;
}

/* Note: AI icon and Warning Triangle icon are excluded from hover color change */


/* inlined styles/components/modal.css */
/* Generic modal styles used across pages */

.modal {
  display: none; /* shown via JS */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fff;
  margin: 60px auto;
  padding: 0;
  border-radius: 4px;
  width: 90%;
  max-width: 900px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid #eee;
}

.modal-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-step-number {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #333;
  margin: 0;
}

.modal-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  color: #333;
  font-weight: normal;
}

.modal-title-orange {
  color: #f2711d;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
}

.modal-close:hover svg path {
  stroke: #f2711d;
}

.modal-body {
  padding: 24px 28px 32px 28px;
}

/* Form layout within modal */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-form.two-column {
  flex-direction: row;
  gap: 28px;
}

.modal-form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.modal-form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.modal-form-row > .modal-form-group {
  flex: 1;
}

.modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.modal-form-group.half-width {
  flex: 1 1 0;
}

.modal-form-input,
.modal-form-select,
.modal-form textarea {
  width: 100%;
  height: 34px;
  border-radius: 4px;
  border: 1px solid #dededf;
  padding: 6px 10px;
  font-size: 14px;
  color: #333;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.modal-form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
}

.modal-form-input::placeholder {
  color: #bbb;
}

/* Dropdown wrapper to show custom arrow */
.modal-dropdown {
  position: relative;
  width: 100%;
}

.modal-dropdown-arrow {
  position: absolute;
  pointer-events: none;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
  background-color: #4d4d4d;
  -webkit-mask-image: var(--rg-chevron-mask);
  mask-image: var(--rg-chevron-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.modal-save-btn {
  width: 170px;
  height: 40px;
  border-radius: 4px;
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  background-color: #b7b7b7; /* default button grey — matches Cancel / --rg-color-gray-400 */
  transition: all 0.2s ease;
}

.modal-save-btn:hover {
  background-color: #aece46;
}

/* Other Direct Costs modal — "Add Item" matches the modal action buttons
   (same height/radius/font and grey→green hover as Cancel / Save and Continue),
   but sized to its content rather than the fixed 170px action-button width. */
.add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  cursor: pointer;
  background-color: #b7b7b7;
  transition: all 0.2s ease;
}

.add-item-btn:hover {
  background-color: #aece46;
}

/* Let the "+" glyph follow the button text colour (white) instead of its
   hard-coded blue, so it reads correctly on the filled background. */
.add-item-btn svg path {
  stroke: currentColor;
}

/* Key Personnel Modal Specific Styles */
.key-personnel-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
}

.form-row .form-section {
  flex: 1;
  min-width: 200px;
}

.form-row .form-input,
.form-row .form-select,
.form-row .dropdown-wrapper {
  width: 100%;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-section label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(51, 51, 51, 0.87);
  margin: 0;
}

.form-input, .form-select {
  width: 509px;
  height: 40px;
  border: 1px solid #dededf;
  border-radius: 4px;
  padding: 0 17px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  background: #fff;
  outline: none;
}

.dropdown-wrapper {
  position: relative;
  width: 509px;
}

.dropdown-arrow {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
  background-color: #4d4d4d;
  -webkit-mask-image: var(--rg-chevron-mask);
  mask-image: var(--rg-chevron-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* Budget Grid Styles */
.budget-grid {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-header {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr) 70px;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.grid-row {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr) 70px;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

/* Dynamic grid for additional years */
.grid-header.year-4 {
  grid-template-columns: 200px repeat(4, 1fr) 70px;
  gap: 6px;
}

.grid-row.year-4 {
  grid-template-columns: 200px repeat(4, 1fr) 70px;
  gap: 6px;
}

.grid-header.year-5 {
  grid-template-columns: 180px repeat(5, 1fr) 60px;
  gap: 4px;
}

.grid-row.year-5 {
  grid-template-columns: 180px repeat(5, 1fr) 60px;
  gap: 4px;
}

.grid-cell {
  display: flex;
  align-items: center;
}

.grid-cell.row-label {
  min-width: 100px;
  max-width: 200px;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
  padding-right: 15px;
}

/* Exception for row labels containing radio groups - allow full display */
.grid-cell.row-label:has(.custom-radio-group) {
  max-width: none !important;
  min-width: 600px !important;
  width: auto !important;
  overflow: visible;
  white-space: normal;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap !important;
}

/* Ensure label within row-label doesn't take full width */
.grid-cell.row-label:has(.custom-radio-group) > label {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Other Personnel Modal - Role Description and Number width ratio */
#other-personnel-modal .form-row .form-section:first-child {
  flex: 4 !important; /* 80% width */
  min-width: 0 !important;
}

#other-personnel-modal .form-row .form-section:last-child {
  flex: 1 !important; /* 20% width */
  min-width: 0 !important;
  max-width: 150px;
}

/* Light grey background for % of Time and Hours/Week rows */
.grid-row.grey-bg-row {
    background-color: #f5f5f5 !important;
}

/* Accordion Styles */
.accordion-toggle {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.accordion-arrow {
  display: inline-block;
  width: 14px;
  height: 8px;
  font-size: 0;
  transition: transform 0.2s ease;
  color: #666;
  background-color: currentColor;
  -webkit-mask-image: var(--rg-chevron-mask);
  mask-image: var(--rg-chevron-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.accordion-toggle:hover .accordion-arrow {
  color: #333;
}

.accordion-toggle.collapsed .accordion-arrow {
  transform: rotate(-90deg);
}

.accordion-content {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
}

.accordion-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.accordion-content .row-label {
  padding-left: 0px;
}

.header-cell {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

.add-period {
  cursor: pointer;
}

.row-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #333;
}

.budget-input {
  width: 120px;
  height: 40px;
  border: 1px solid #dededf;
  border-radius: 4px;
  padding: 0 17px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  background: #fff;
  outline: none;
}

/* Adjust input widths for different year counts */
.year-4 .budget-input {
  width: 120px;
  padding: 0 12px;
}

.year-4 .percent-input {
  width: calc(120px - 20px) !important;
}

.year-5 .budget-input {
  width: 120px;
  padding: 0 12px;
}

.year-5 .percent-input {
  width: calc(120px - 20px) !important;
}

.budget-input.blue-text {
  color: #2185d0;
}

.budget-input.gray-text {
  color: #969696;
}

.budget-input.light-gray-text {
  color: #b7b7b6;
}

.prefill-panel {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prefill-button {
  align-self: flex-start;
  border: none;
  border-radius: 4px;
  background: #B7B7B7;
  color: #fff;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prefill-button:hover {
  background: #AFCD00;
  color: #000;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.prefill-button:active {
  background: #9bb900;
  color: #000;
}

.prefill-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}

.prefill-select.hidden {
  display: none;
}

.prefill-status {
  font-size: 12px;
  color: #4a4a4a;
  min-height: 16px;
}

.salary-cap-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 6px;
  background-color: #fff3cd;
  border: 1px solid #ffe8a1;
  color: #856404;
  font-size: 12px;
  line-height: 1.4;
}

.salary-cap-alert.hidden {
  display: none;
}

.salary-cap-alert__icon {
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  color: #d48806;
}

/* Highlight values over $225,700 */
.budget-input.salary-cap-warning {
  background-color: #fff3cd;
  border-color: #ffc107;
  color: #856404;
  font-weight: 600;
}

.budget-input.salary-cap-warning:focus {
  border-color: #ffb300;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
}

/* Modal content sizing for key personnel */
.key-personnel-modal-content {
  max-width: 1200px;
  width: 90%;
}

.add-period-btn {
  background: none;
  border: none;
  color: #b7b7b7;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.add-period-btn:hover {
  color: #f2711d;
}

.warning-text {
  color: #dc2828;
  font-size: 12px;
}

.warning-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warning-message {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-cancel-btn {
  width: 170px;
  height: 40px;
  border-radius: 4px;
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  background-color: #b7b7b7;
  margin-right: 16px;
  font-family: 'Inter', sans-serif;
}

.modal-cancel-btn:hover {
  opacity: 0.9;
}

/* Budget page modals — Cancel buttons hover to brand green */
#cancel-key-personnel,
#cancel-other-personnel,
#cancel-equipment,
#cancel-travel,
#cancel-participant,
#cancel-other-direct,
#cancel-indirect,
#cancel-fee {
  transition: background-color 0.2s ease;
}

#cancel-key-personnel:hover,
#cancel-other-personnel:hover,
#cancel-equipment:hover,
#cancel-travel:hover,
#cancel-participant:hover,
#cancel-other-direct:hover,
#cancel-indirect:hover,
#cancel-fee:hover {
  background-color: #ABCF00;
  opacity: 1;
}

/* Custom Radio Button Styles */
.custom-radio-group {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: nowrap;
}

.custom-radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #333;
  background-color: #fff;
  border: 1px solid transparent;
}

.custom-radio-option:hover {
  background-color: #f8f8f8;
  border-color: #f2711d;
}

.custom-radio-option.selected {
  background-color: #fff5f0;
  border-color: #f2711d;
}

/* Hide default radio buttons */
.custom-radio-option input[type="radio"] {
  display: none;
}

/* Custom radio button indicator */
.radio-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  background-color: #fff;
  flex-shrink: 0;
}

.custom-radio-option:hover .radio-indicator {
  border-color: #f2711d;
  transform: scale(1.05);
}

.custom-radio-option.selected .radio-indicator {
  border-color: #f2711d;
  background-color: #f2711d;
  box-shadow: 0 2px 8px rgba(242, 113, 29, 0.3);
}

/* Inner dot for selected state */
.radio-indicator::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.custom-radio-option.selected .radio-indicator::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Radio label styling */
.radio-label {
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease;
}

.custom-radio-option.selected .radio-label {
  color: #f2711d;
  font-weight: 600;
}

/* Animation for selection */
@keyframes radioSelect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.custom-radio-option.selected .radio-indicator {
  animation: radioSelect 0.3s ease;
}

/* Other Personnel Modal Specific Styles */
.other-personnel-modal-content {
  max-width: 1200px;
  width: 90%;
}

/* Other Personnel Accordion Styles */
.other-accordion-toggle {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.other-accordion-arrow {
  display: inline-block;
  width: 14px;
  height: 8px;
  font-size: 0;
  transition: transform 0.2s ease;
  color: #666;
  background-color: currentColor;
  -webkit-mask-image: var(--rg-chevron-mask);
  mask-image: var(--rg-chevron-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.other-accordion-toggle:hover .other-accordion-arrow {
  color: #333;
}

.other-accordion-toggle.collapsed .other-accordion-arrow {
  transform: rotate(-90deg);
}

.other-academic-section,
.other-summer-section,
.other-calendar-section {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
}

.other-academic-section.collapsed,
.other-summer-section.collapsed,
.other-calendar-section.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.other-academic-section .row-label,
.other-summer-section .row-label,
.other-calendar-section .row-label {
  padding-left: 0px;
}

/* Input with percent styling for Other Personnel */
.input-with-percent {
  position: relative;
  display: flex;
  align-items: center;
}

.percent-input {
  width: calc(120px - 20px) !important;
  padding-right: 25px !important;
}

.percent-symbol {
  position: absolute;
  right: 8px;
  font-size: 12px;
  color: #666;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .modal-form.two-column {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .modal-content {
    margin: 40px 12px;
    width: calc(100% - 24px);
  }
  
  .form-input, .form-select, .dropdown-wrapper {
    width: 100%;
  }
  
  .grid-header, .grid-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .custom-radio-option {
    padding: 10px;
  }
  
  .radio-indicator {
    width: 18px;
    height: 18px;
  }
  
  .radio-indicator::after {
    width: 6px;
    height: 6px;
  }
}


/* inlined styles/components/version-indicator.css */
/* Version Indicator Component */
.version-indicator {
    position: fixed;
    bottom: 16px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-family: 'Inter', sans-serif;
    user-select: none;
    /* Container itself isn't interactive; only the status link is. */
    pointer-events: none;
}

.version-indicator__version {
    font-size: 12px;
    color: #999;
    padding: 0 2px;
}

.version-indicator__status-link {
    pointer-events: auto;
    display: inline-block;
    font-size: 12px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.version-indicator__status-link:hover {
    color: #333;
    background: rgba(175, 205, 0, 0.1);
    transform: translateY(-1px);
}

.version-indicator__status-link:active {
    transform: translateY(0);
}



/* inlined styles/components/dio-button.css */
/* Dio Chatbot Button Component */
.dio-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.dio-button:hover {
    transform: translateY(-3px) scale(1.05);
    filter: none;
    box-shadow: none;
}

.dio-button:active {
    transform: translateY(-1px) scale(1.02);
    filter: none;
    box-shadow: none;
}

.dio-button:focus-visible {
    outline: 2px solid #5ba8de;
    outline-offset: 2px;
}

.dio-button__bubble {
    display: flex;
    line-height: 0;
    transition: transform 0.2s ease;
}

.dio-button__bubble-svg {
    display: block;
    width: 72px;
    height: 58px;
}

.dio-button__bubble-fill {
    fill: #2185D0;
    transition: fill 0.2s ease;
}

.dio-button__bubble-text {
    fill: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.02em;
}

.dio-button:hover .dio-button__bubble {
    transform: scale(1.03);
}

/* Active state when chat is open */
.dio-button.dio-button--active .dio-button__bubble-fill {
    fill: #1b6fad;
}

/* Pulse animation for attention */
.dio-button--pulse {
    animation: dio-pulse 2s infinite;
}

@keyframes dio-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.9;
    }
}

/* Badge for notifications */
.dio-button__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

/* Tooltip */
.dio-button__tooltip {
    position: absolute;
    right: 78px;
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.dio-button__tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1f2937;
}

.dio-button:hover .dio-button__tooltip {
    opacity: 1;
    visibility: visible;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .dio-button {
        bottom: 16px;
        right: 16px;
    }
    
    .dio-button__bubble-svg {
        width: 64px;
        height: 54px;
    }
    
    .dio-button__bubble-text {
        font-size: 14px;
    }
    
    .dio-button__tooltip {
        display: none;
    }
}



/* inlined styles/components/dio-chat-modal.css */
/* Dio Chat Modal Component */
.dio-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.dio-chat-overlay.dio-chat-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.dio-chat-modal {
    position: fixed;
    bottom: 120px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    height: 520px;
    max-height: calc(100vh - 160px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.dio-chat-modal.dio-chat-modal--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Header */
.dio-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #2185D0;
    color: #ffffff;
    flex-shrink: 0;
}

.dio-chat-header__info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dio-chat-header__avatar {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dio-chat-header__avatar svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

.dio-chat-header__title {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.dio-chat-header__subtitle {
    font-size: 12px;
    opacity: 0.8;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.dio-chat-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.dio-chat-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dio-chat-close svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

/* Messages Area */
.dio-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f9fafb;
}

.dio-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.dio-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.dio-chat-messages::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.dio-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Message Bubbles */
.dio-message {
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dio-message--user {
    align-self: flex-end;
}

.dio-message--assistant {
    align-self: flex-start;
}

.dio-message__content {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
    word-wrap: break-word;
}

.dio-message--user .dio-message__content {
    background: #2185D0;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.dio-message--assistant .dio-message__content {
    background: #ffffff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}

.dio-message__time {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
}

.dio-message--user .dio-message__time {
    text-align: right;
}

/* Typing Indicator */
.dio-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    max-width: 70px;
}

.dio-typing--with-status {
    max-width: none;
    gap: 6px;
}

.dio-typing__dot {
    width: 8px;
    height: 8px;
    background: #9ca3af;
    border-radius: 50%;
    animation: dio-typing-bounce 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.dio-typing__dot:nth-child(1) {
    animation-delay: 0s;
}

.dio-typing__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dio-typing__dot:nth-child(3) {
    animation-delay: 0.4s;
}

.dio-typing__status {
    font-size: 13px;
    color: #6b7280;
    font-family: 'Inter', sans-serif;
    margin-left: 4px;
    white-space: nowrap;
}

@keyframes dio-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

/* Welcome Message */
.dio-welcome {
    text-align: center;
    padding: 20px;
}

.dio-welcome__icon {
    width: 48px;
    height: 48px;
    background: #2185D0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.dio-welcome__icon svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
}

.dio-welcome__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
}

.dio-welcome__text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.dio-welcome__support {
    font-size: 13px;
    color: #4b5563;
    margin: 12px 0 0;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.dio-welcome__support a {
    color: #2185D0;
    font-weight: 500;
    text-decoration: underline;
}

/* Input Area */
.dio-chat-input-area {
    padding: 16px 20px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.dio-chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.dio-chat-input-wrapper:focus-within {
    background: #ffffff;
    box-shadow: 0 0 0 2px #2185D0;
}

.dio-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #111827;
    resize: none;
    max-height: 100px;
    min-height: 24px;
    line-height: 1.5;
    outline: none;
}

.dio-chat-input::placeholder {
    color: #9ca3af;
}

.dio-chat-send {
    width: 36px;
    height: 36px;
    background: #2185D0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dio-chat-send:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 133, 208, 0.4);
}

.dio-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dio-chat-send svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    fill: none;
}

/* Error Message */
.dio-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    margin: 8px 0;
}

/* Header Actions */
.dio-chat-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mode Toggle Button */
.dio-chat-mode-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    transition: all 0.2s ease;
}

.dio-chat-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.dio-chat-mode-toggle--direct {
    background: rgba(251, 146, 60, 0.3);
}

.dio-chat-mode-toggle--direct:hover {
    background: rgba(251, 146, 60, 0.4);
}

.dio-chat-mode-toggle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.dio-mode-label {
    font-weight: 500;
}

/* Suggestions Button */
.dio-chat-suggestions-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.2);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.2s ease;
}

.dio-chat-suggestions-btn:hover {
    background: rgba(34, 197, 94, 0.3);
}

.dio-chat-suggestions-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.dio-suggestions-count {
    font-size: 11px;
    font-weight: 600;
    background: #22c55e;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Welcome Hints */
.dio-welcome__hints {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dio-welcome__hint {
    font-size: 12px;
    color: #2185D0;
    background: #e8f4fd;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
    font-family: 'Inter', sans-serif;
}

/* Message Content Formatting */
.dio-message__content p {
    margin: 0 0 8px 0;
}

.dio-message__content p:last-child {
    margin-bottom: 0;
}

.dio-message__content strong {
    font-weight: 600;
}

.dio-message__content em {
    font-style: italic;
}

/* Action Indicators */
.dio-message__actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dio-action-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
}

.dio-action-indicator svg {
    flex-shrink: 0;
}

.dio-action-indicator span {
    flex: 1;
}

.dio-action-indicator--suggestion {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.dio-action-indicator--applied {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.dio-action-indicator--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.dio-action-view-btn,
.dio-action-undo-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.dio-action-view-btn {
    background: #22c55e;
    color: #ffffff;
}

.dio-action-view-btn:hover {
    background: #16a34a;
}

.dio-action-undo-btn {
    background: #3b82f6;
    color: #ffffff;
}

.dio-action-undo-btn:hover {
    background: #2563eb;
}

/* Field Edit Feedback Classes */
.dio-edit-applied {
    animation: dio-pulse-green 0.6s ease-out;
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

.dio-edit-undone {
    animation: dio-pulse-blue 0.6s ease-out;
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.dio-edit-highlighted {
    animation: dio-pulse-purple 1s ease-out;
    outline: 2px solid #2185D0;
    outline-offset: 2px;
}

@keyframes dio-pulse-green {
    0% {
        outline-color: #22c55e;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        outline-color: transparent;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes dio-pulse-blue {
    0% {
        outline-color: #3b82f6;
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
    100% {
        outline-color: transparent;
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

@keyframes dio-pulse-purple {
    0% {
        outline-color: #2185D0;
        box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(33, 133, 208, 0);
    }
    100% {
        outline-color: transparent;
        box-shadow: 0 0 0 0 rgba(33, 133, 208, 0);
    }
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .dio-chat-modal {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        border-radius: 16px 16px 0 0;
    }
    
    .dio-chat-header {
        padding: 14px 16px;
    }
    
    .dio-chat-messages {
        padding: 16px;
    }
    
    .dio-chat-input-area {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    
    .dio-chat-mode-toggle .dio-mode-label {
        display: none;
    }
    
    .dio-chat-header__actions {
        gap: 6px;
    }
}

/* Web Sources (shown under a reply when Dio browsed the web) */
.dio-message__sources {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
}

.dio-message__sources-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 6px;
}

.dio-message__sources-label svg {
    flex-shrink: 0;
}

.dio-message__sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dio-source {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.dio-source a {
    color: #2185D0;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.dio-source a:hover {
    text-decoration: underline;
}

.dio-source__host {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 11px;
}



/* inlined styles/components/dio-suggestion-modal.css */
/* Dio Suggestion Modal Styles */

.dio-suggestion-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.dio-suggestion-modal--visible {
    opacity: 1;
    visibility: visible;
}

.dio-suggestion-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.dio-suggestion-modal__container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 600px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 80px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.dio-suggestion-modal--visible .dio-suggestion-modal__container {
    transform: translate(-50%, -50%) scale(1);
}

/* Header */
.dio-suggestion-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #2185D0 0%, #2185D0 100%);
    color: #ffffff;
}

.dio-suggestion-modal__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.dio-suggestion-modal__title svg {
    stroke: currentColor;
}

.dio-suggestion-modal__close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.dio-suggestion-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dio-suggestion-modal__close svg {
    stroke: #ffffff;
}

/* Content */
.dio-suggestion-modal__content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: #f9fafb;
}

.dio-suggestion-modal__content::-webkit-scrollbar {
    width: 8px;
}

.dio-suggestion-modal__content::-webkit-scrollbar-track {
    background: transparent;
}

.dio-suggestion-modal__content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.dio-suggestion-modal__content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Suggestion Item */
.dio-suggestion-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease;
}

.dio-suggestion-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dio-suggestion-item:last-child {
    margin-bottom: 0;
}

.dio-suggestion-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dio-suggestion-item__field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    font-family: 'Inter', sans-serif;
}

.dio-suggestion-item__field svg {
    color: #2185D0;
    flex-shrink: 0;
}

.dio-suggestion-item__reason {
    font-size: 12px;
    color: #6b7280;
    font-family: 'Inter', sans-serif;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Diff View */
.dio-suggestion-item__diff {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
}

.dio-suggestion-item__before,
.dio-suggestion-item__after {
    flex: 1;
    min-width: 0;
}

.dio-suggestion-item__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
}

.dio-suggestion-item__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.dio-suggestion-item__before .dio-suggestion-item__label {
    color: #9ca3af;
}

.dio-suggestion-item__after .dio-suggestion-item__label {
    color: #22c55e;
}

.dio-suggestion-item__content {
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    word-break: break-word;
}

.dio-suggestion-item__content--before {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}

.dio-suggestion-item__content--after {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.dio-suggestion-empty-value {
    color: #9ca3af;
    font-style: italic;
}

/* Actions */
.dio-suggestion-item__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dio-suggestion-item__action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.dio-suggestion-item__action svg {
    flex-shrink: 0;
}

.dio-suggestion-item__action--approve {
    background: #22c55e;
    color: #ffffff;
}

.dio-suggestion-item__action--approve:hover {
    background: #16a34a;
}

.dio-suggestion-item__action--reject {
    background: #ef4444;
    color: #ffffff;
}

.dio-suggestion-item__action--reject:hover {
    background: #dc2626;
}

.dio-suggestion-item__action--view {
    background: #f3f4f6;
    color: #374151;
}

.dio-suggestion-item__action--view:hover {
    background: #e5e7eb;
}

/* Footer */
.dio-suggestion-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.dio-suggestion-modal__actions-left,
.dio-suggestion-modal__actions-right {
    display: flex;
    gap: 8px;
}

.dio-suggestion-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.dio-suggestion-btn--primary {
    background: linear-gradient(135deg, #2185D0 0%, #2185D0 100%);
    color: #ffffff;
}

.dio-suggestion-btn--primary:hover {
    box-shadow: 0 4px 12px rgba(33, 133, 208, 0.4);
    transform: translateY(-1px);
}

.dio-suggestion-btn--secondary {
    background: #f3f4f6;
    color: #374151;
}

.dio-suggestion-btn--secondary:hover {
    background: #e5e7eb;
}

/* Empty State */
.dio-suggestion-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    font-family: 'Inter', sans-serif;
}

/* Toast Notifications */
.dio-suggestion-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10020;
    opacity: 0;
    transition: all 0.3s ease;
}

.dio-suggestion-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dio-suggestion-toast--success {
    background: #22c55e;
    color: #ffffff;
}

.dio-suggestion-toast--error {
    background: #ef4444;
    color: #ffffff;
}

.dio-suggestion-toast--warning {
    background: #f59e0b;
    color: #ffffff;
}

.dio-suggestion-toast--info {
    background: #3b82f6;
    color: #ffffff;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .dio-suggestion-modal__container {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 40px);
    }
    
    .dio-suggestion-modal__header {
        padding: 16px 20px;
    }
    
    .dio-suggestion-modal__content {
        padding: 16px 20px;
    }
    
    .dio-suggestion-item__diff {
        flex-direction: column;
    }
    
    .dio-suggestion-item__arrow {
        transform: rotate(90deg);
        padding: 8px 0;
    }
    
    .dio-suggestion-modal__footer {
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
    }
    
    .dio-suggestion-modal__actions-left,
    .dio-suggestion-modal__actions-right {
        width: 100%;
    }
    
    .dio-suggestion-btn {
        flex: 1;
        justify-content: center;
    }
}


/* Supplied Dio redesign. Loaded after the legacy component contracts so its
 * presentation wins while the existing JavaScript hooks remain unchanged. */

/* inlined styles/redesign/source/dio.css */
/* ============================================================
   Dio — AI grant writing assistant

   Written against the class names the app already ships
   (components/atoms/indicators/dio-button.js,
    components/organisms/modals/dio-chat-modal.js,
    components/organisms/modals/dio-suggestion-modal.js)
   so this file drops into the app as-is: one <link>, no markup edits,
   and every id and class the JS binds to survives untouched.

   What changed from the legacy widget, and why:

   · The blue chrome is gone. Blue is not in this system — the app has
     one dark bar (--ink) and one accent (--indigo). Dio's header is the
     same near-black as .app-header, so the assistant reads as part of
     the product rather than a bolted-on third-party chat.
   · Suggest / Direct became a real segmented control. In the old widget
     the two modes looked identical apart from a border, which is the
     wrong signal: Direct writes to the user's fields without review.
     Direct now carries the warning tint.
   · Bubbles are asymmetric on purpose. The user's turn is a chip; Dio's
     is flat body copy, because Dio's turns are long and a tinted block
     of 200 words is harder to read than the page's own prose.

   Contrast is measured against the surface each element actually paints
   on. Everything here clears WCAG 2.2 AA.
   ============================================================ */

/* ============================================================
   0 · The mark

   Dio wears the Diodorus crest. It is delivered as a mask rather than an
   <img> so one asset serves both the black bar and the white panel —
   the artwork ships white-on-transparent, which would vanish on paper.
   Painting it with `background: currentColor` means it simply follows
   whatever colour its container already sets.

   The path is a custom property so the app can repoint it in one line;
   the value here is relative to THIS stylesheet, not to the page.

   SIZE WARNING. The crest is a full seal — a ring of type around a
   figure, with "DIODORUS" set inside it. It resolves from about 40px
   up. Below that the interior detail collapses into a grey disc, which
   is why the launcher and the header avatar carry it as large as their
   containers allow and lean on the adjacent wordmark to do the naming.
   A crisp 24px treatment needs a simplified icon cut of the mark, which
   is a brand decision and is not in the asset folder today.
   ============================================================ */

/* The mark is inlined as a data URI, not linked as a file.

   A CSS mask that points at an external SVG is subject to CORS, and a
   page opened from disk over file:// is an opaque origin in Chrome — so
   the mask silently failed to load there and every placement rendered
   as nothing. It worked over http://, which is what made it look fine
   in testing. Inlining removes the fetch, so the mark now draws from
   file://, http://, and inside the app with no asset path to get wrong.

   The payload is the same artwork with the XML preamble, the generator
   comment, the layer ids and the 124 redundant fill="#fff" attributes
   stripped: 32.2KB down to 28.8KB, ~29.5KB once percent-encoded, and it
   gzips to roughly a third of that. A mask reads alpha only, so dropping
   the fills changes nothing here. assets/dio-mark.svg stays on disk as
   the untouched original for any <img> use. */
:root {
  --dio-mark: url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20252%20252%22><path%20d=%22M215,168.3c-.6,1.3-1.2,2.4-1.6,3.6-2.2,6.6-4.7,13-8.6,18.8-9.5,14.2-22.1,24.8-37.7,31.8-11,4.9-22.5,7.7-34.5,8.5-26.8,1.6-50.5-6.4-71-23.8-10.8-9.2-18.2-20.7-22.7-34.2-.5-1.4-1-2.7-1.6-4.1,0-.2-.2-.3-.3-.5-.2,0-.3.1-.5.2-3.2,2.2-6.6,2.5-9.8.2-3.4-2.4-4.7-5.8-4-9.9,1-5.4,4.9-8.9,10.7-9.6,1.2-.2,2.5-.2,3.8-.2h177.6c2.6,0,5.4.5,7.8,1.4,5.8,2.2,8.5,9.3,6,14.7-1.8,4-7.6,6.9-12.3,3.7-.3-.2-.7-.4-1.3-.7h0ZM109.7,215.3h-.7c-10.7-2.8-21-6.8-30-13.4-10.5-7.7-17.9-17.8-22.2-30.1-.9-2.7-2.8-3.1-5.2-1.7-1.7,1-3.6,1.7-5.4,2.4-1,.3-2.1.2-3.6.3,1.9,4.2,3.6,8.3,5.6,12.2,4.4,8.5,10.8,15.3,18.2,21.4,13.6,11.1,29.1,17.8,46.5,20.3,18.4,2.6,36.1,0,52.9-7.7,18.3-8.4,32.6-21.2,40.9-39.9.9-2,1.6-4.1,2.4-6.2-1.9-.3-3.6-.3-5.1-.8s-2.9-1.6-4.3-2.5c-1.5-.8-3.7,0-4.2,1.6-3.3,9.9-8.8,18.4-16.4,25.6-6.8,6.5-14.7,11.1-23.5,14.5-4.2,1.6-8.6,2.9-12.9,4.3-.5-1.3-.8-2.3-1.2-3.3.9-.3,1.6-.5,2.4-.8,8.3-2.7,16.5-5.8,23.9-10.6,11.7-7.6,19.9-17.9,24.2-31.2.4-1.1.4-1.9-.6-2.7-1.5-1.4-2.2-3.2-2.2-5.2v-1.7h-34.3c-1.3,0-2.6,0-2.6-1.7s1.5-1.4,2.6-1.4h62.5c1.1,0,2.2.2,3.2.6,1.7.7,2.4,2.5,1.9,4.2-.3,1-.8,1.8-1.9,1.7-1-.2-1.3-1-1.3-2s-.3-1.1-.6-1.2c-.4-.1-1,0-1.4.4-1.2.9-1.1,2.2-.6,3.4.8,1.8,2.3,2.8,4.3,2.9,2.1,0,3.5-1,4.4-2.7,1.4-2.6.8-5.9-1.3-8.1-1.9-2.1-4.4-2.6-7.1-2.6h-60.1c-2.7,0-5.3,0-7.9-.7-5.1-1.2-10.2-.4-15.3.2-1.5.2-2.9.7-4.3,1.3-1.9.7-3.8.8-5.8.2-2.1-.6-4.2-1.3-6.3-1.6-5.3-.8-10.7-1.4-16,.5-.5.2-1,0-1.6,0H35.4c-.9,0-1.9,0-2.8.2-5.1.9-7.9,6.9-5,11,1.4,1.9,3.8,2.8,6,2,1.9-.7,2.9-2.4,2.8-4.6,0-1.1-.7-1.7-1.8-1.8-1.2,0-1,.8-1.2,1.6,0,.6-.6,1.5-1.1,1.7-.5.1-1.4-.4-1.8-.9-1.2-1.5-.7-3.9,1.2-4.8,1.2-.5,2.7-.8,4.1-.8h57.3c1.7,0,3.5,0,5.2.1.6,0,1.4.7,1.5,1.1.2,1-.4,1.7-1.5,1.8h-35.1c-.5,4.2-.7,5.2-2.1,6.6-1.2,1.2-1.1,2.3-.6,3.6,3.1,9.4,8.5,17.3,15.6,24.1,7,6.7,15.4,10.8,24.2,14.2,3.4,1.3,6.8,2.5,10.3,3.7-.3,1-.5,1.9-.8,2.9h0ZM207.1,159.9h-2.3c-1.5,0-2.4.8-2.9,2.1-.7,2.1,0,4.5,1.7,5.9s4.3,1.7,6.2.7,3.1-3.3,2.8-5.5c-.3-2.4-1.2-3.2-3.6-3.2h-1.9ZM44.8,159.8h-2c-1.6-.1-2.5.7-2.9,2.2-.9,3.1.6,6.1,3.6,7,2.9.8,6.2-1,7-4s-.8-5.1-3.8-5.1h-1.9ZM192.6,160.1c-.2,4.2,2.5,6.9,5.7,5.7v-5.6h-5.7ZM53.8,165.9c3.6.5,6.1-2.1,5.6-5.7h-5.6v5.7Z%22/><path%20d=%22M126,117.7H27.9c-.9,0-1.8.2-2.6,0-.8-.2-1.6-.8-2-1.4-.5-.8-.5-1.8.5-2.5.3-.2.5-.9.6-1.3,4.1-36.5,23-62.9,55-80.3,11.5-6.3,23.9-10,37-10.9,36.3-2.6,66.2,10.1,89.5,38,11.8,14.2,18.6,30.6,21.2,48.8.2,1.4.2,2.8.4,4.2,0,.6.5,1.1.7,1.7.2.7.7,1.5.4,2.1-.3.7-1.1,1.3-1.8,1.7-.5.3-1.2,0-1.9,0h-99,.1ZM223.6,114c-.6-23.6-14.3-54.5-44.3-73.8-32.5-21-73.6-21.7-106.6,0-26.5,17.4-41.6,41.9-44.9,73.7h45.2c2.8,0,5.3-.6,7.9-1.7,1.4-.6,3-1.1,4.5-1.1,6.5,0,13,0,19.5-.2,1.3,0,2.4.3,3.4,1.3s2.8,1.8,4.7,1.8h25.6c2.1,0,3.8-.5,5.3-1.9.9-.9,2-1.1,3.3-1.1,6.1,0,12.1,0,18.2,0,1.7,0,3.4.5,4.9,1.2,2.2,1,4.4,1.6,6.9,1.6h46.6-.2Z%22/><path%20d=%22M159.8,133.1v-5.8c0-1,.6-1.3,1.5-1.3,2.2,0,3.6,1.5,3.7,3.8,0,2.1-1.3,3.4-3.6,3.4h-1.6,0Z%22/><path%20d=%22M137,211.4c2.9,2.8,3.2,5.9,2.3,9.4,1.1,0,2.2-.1,3.4-.2,0-.7-.1-1.3-.2-2.1,1.1-.3,2.3-.7,3.5-1,.4,1.3.8,2.5,1,3.7,0,.3-.4,1-.7,1-5.7.9-11.3,1.7-17,2.5-1.2.2-2-.5-2-1.9s1-1.4,2-1.5h2.8c2.8-.3,4.4-2,4.1-4.3-.3-2.4-2.5-4-5.1-3.7-2,.2-2.9.9-3.4,2.5h3.3c.9,0,1.5.3,1.5,1.4s-.5,1.4-1.5,1.4h-9.6c-1,0-1.6-.4-1.6-1.5s.7-1.3,1.6-1.3h3.2c-.7-1.9-2.8-2.8-4.8-2.5-2.3.3-3.6,1.7-3.8,3.9-.2,1.8.8,3.3,2.6,3.8,1.3.4,2.8.4,4.2.5,1,0,2,0,2.1,1.3,0,1.2-.8,2.1-2.1,1.9-5.6-.8-11.1-1.6-16.7-2.5-.3,0-.8-.9-.8-1.3,0-1.1.5-2.1.7-3.2,3.4.2,3.6.3,3.4,2.8,1.1.2,2.3.3,3.6.5-1-3.6-.8-6.7,1.9-9.6-2.3-1-4.5-1.9-6.7-2.7-5.7-2.2-11.4-4.4-17.1-6.5-1.6-.6-2.2-1.5-2.1-3.2,0-1.8.4-3.7-.7-5.3,0-.2,0-.8.3-1.1,4.1-4.4,6-10,8.1-15.5,2.5-6.5,4.8-13,7.2-19.6.5-1.4,1.4-2,2.8-2.1,4.8-.4,9.6.1,14.3,1.2,1.9.4,3.5,1.8,5.5,2.8,2.2-2.6,5.5-3.3,9.1-3.5,3.2-.2,6.3-.5,9.5-.5s2.7.5,3.5,2.7c3.2,8.7,6.3,17.5,9.8,26.1,1.1,2.9,3.2,5.4,4.9,8,.5.7.6,1.2.3,2.1-.4,1.6-.5,3.4-.4,5.1,0,1.4-.5,2.1-1.7,2.6-6.9,2.6-13.8,5.2-20.7,7.8-1.2.5-2.4,1.1-3.8,1.8v-.2ZM98,183.7c9.5-.9,18.5-.6,26.4,5.8v-23.8c0-2.7-1.1-4.6-3.5-5.2-3-.8-6.2-1.6-9.3-1.9-4.1-.4-4-.3-5.4,3.5-2.7,7.2-5.4,14.5-8.1,21.6h0ZM153.9,183.7v-.3c-2.8-7.7-5.7-15.4-8.5-23.1-.5-1.4-1.3-2-2.7-1.9-3.8.5-7.6.9-11.3,1.7-2.8.6-3.8,2.4-3.8,5.2v23.9c8-6.5,17-6.4,26.2-5.6h.1ZM157.6,191c-1.4-2.3-3.3-3.5-5.7-4-5-.9-10-.5-14.9.8-5,1.4-9,3.9-9.9,9.6,0,.4-.6.8-1,1.2-.4-.4-.8-.7-1-1.2-.8-1.6-1.2-3.5-2.2-4.9-1.6-2.2-4-3.5-6.6-4.3-4.6-1.5-9.4-2-14.2-1.6-3,.3-5.6,1.5-7.3,4.2.2,0,.3.2.4.2.3,0,.5,0,.8-.1,5-1,10.1-1.7,15.3-1.1,5.4.6,10.5,1.6,11.5,8.4,0,1,1.3,2.1,2.2,2.6,2.1,1,4.5-.4,4.9-3.3.6-3.9,3-5.7,6.4-6.7,3.8-1.1,7.7-1.4,11.6-1,3.2.3,6.4.8,9.9,1.3h-.2ZM103.4,202.4v.4c.2.1.4.3.6.4,6.8,2.6,13.6,5.2,20.4,7.6,1,.4,2.4.3,3.4-.1,5.7-2,11.3-4.3,17-6.4,1.3-.5,2.6-1,3.8-1.4,0-.2,0-.3-.1-.5-4.2.3-8.5-.7-12.4,1.9-1.5,1-3.2,1.7-4.9,2.5-3.7,1.7-7.5,1.7-11.2-.2-1.5-.8-3.1-1.4-4.4-2.3-3.8-2.5-8.1-1.5-12.2-1.9h0ZM92.5,194.7c0,1.1-.2,2.4,0,3.4.2.7,1.2,1.2,2,1.5.3.2.9,0,1.3-.3,1.4-.9,2.5-2.3,4-2.8,5.7-2,11.6-2.3,17.5-.4.5.2,1.1,0,1.7-.1-.3-.5-.5-1.4-.9-1.6-1.5-.7-3.1-1.4-4.7-1.7-7.1-1.2-14,.5-20.9,2h0ZM159.4,194.6c-1-.2-2-.3-3-.6-4.9-1.2-9.8-2-14.9-1.6-2.1.2-4.2.7-6.2,1.3-.9.3-1.5,1.3-2.3,1.9.1.2.2.4.3.5.6,0,1.2-.1,1.8-.3,5.9-1.6,11.7-1.3,17.5.5,1.7.5,3.3,1.3,3.7,3.3,3.7-.9,3.3-.3,3.1-5.1h0ZM98.2,200.1c0,.3.2.5.3.8,6.3-1.7,12.7-2.3,19.2-1.5.2,0,.4-.1,1-.3-.7-.4-1.1-.8-1.5-.9-6-2-11.9-1.6-17.7.9-.5.2-.9.7-1.3,1.1h0ZM133.6,198.8c0,.2,0,.3.1.5h1.6c5.6-.6,11-.5,16.4,1.1.3,0,.6.1.9,0,.3,0,.7-.3.8-.5,0-.2-.1-.6-.3-.8-.3-.3-.7-.4-1.1-.6-5.3-1.9-10.7-2.3-16.2-.9-.8.2-1.5.7-2.3,1.1h.1ZM131.9,202.9c0-.2-.2-.3-.3-.5-.7.1-1.4.2-2,.4-2.5.9-5,1-7.5,0-.5-.2-1.1,0-1.7,0,.4.5.7,1.2,1.2,1.4,2.8,1.2,5.6,1.2,8.3,0,.7-.3,1.2-.9,1.8-1.4h.2Z%22/><path%20d=%22M192.4,189.6c.9,0,1.6.1,1.8-.1,1.3-1.8,2.5-3.7,3.8-5.6-1.4-.8-2.5-1.4-3.7-2,1.3-2.9,2.5-5.8,3.8-8.8,2.1.9,4.2,1.8,6.4,2.7-.5,1.1-1,2-1.5,3.1-.6-.3-1.1-.5-1.6-.8-2.5-1.2-2.5-1.1-3.4,1.7,1.1.6,2.3,1.3,3.6,2-1.8,4.3-4.5,7.9-7.6,11.5-1.6-1.1-3.2-2.3-4.8-3.4,1-1.5,1.8-2.9,2.8-4.2.2-.3,1-.3,1.4-.2.2,0,.4.8.3,1.1-.3.9-.9,1.7-1.6,3h.3Z%22/><path%20d=%22M57.7,185.8c.6-.3,1-.5,1.5-.8,1.1,1.6,2.1,3.1,3.3,4.8-1.5,1.2-3,2.3-4.7,3.6-3.2-3.5-5.6-7.3-7.5-11.7.7-.4,1.2-.7,1.8-1,1.3-.7,1.6-1.6,1-2.9,0-.2-.2-.4-.4-.8-1.2.6-2.4,1.2-3.7,1.8l-1.6-3.2c2.1-.9,4.2-1.8,6.3-2.7,1.3,2.9,2.5,5.8,3.8,8.8-.6.4-1.3.9-2,1.3-1,.5-1.1,1.1-.6,2,.9,1.4,1.7,2.9,2.6,4.2.2.3.8.3,1.3.4,0-.4.2-.9,0-1.3-.3-.8-.7-1.6-1.2-2.5h0Z%22/><path%20d=%22M72.7,200.6c1,1,1.9,1.8,2.7,2.6-.3,1.2-2.7,2-.7,3.4,1.7,1.2,1.8-.7,2.7-1.6,1.1.8,2.3,1.6,3.4,2.6.2.2.2.9,0,1.2-.5,1-1.1,2-1.8,3.3-3.3-2.4-6.6-4.8-9.9-7.2,1.3-1.5,2.3-2.8,3.5-4.2h.1Z%22/><path%20d=%22M173.3,211.9c-1-1.6-1.7-2.8-2.5-4.1,1.4-1,2.7-2,4.1-2.9.5.9.9,1.6,1.4,2.4.9-.7,1.6-1.2,2.3-1.8-.7-.8-1.2-1.6-1.9-2.4.9-.8,1.7-1.6,2.7-2.5,1.2,1.3,2.3,2.6,3.7,4.1-3.3,2.4-6.5,4.7-9.8,7.2Z%22/><path%20d=%22M64.5,200.6q1.9-2.3-.4-4c-.4.7-.8,1.4-1.4,2.2-1.1-1.2-1.8-2-2.7-3,1.6-1.2,3-2.3,4.5-3.4,2,2.1,3.8,4.1,5.8,6.2-1.1,1.3-2.1,2.7-3.3,4.2-.8-.7-1.6-1.4-2.4-2.2h0Z%22/><path%20d=%22M187.6,192.4c1.5,1.2,2.9,2.2,4.5,3.4-.7.9-1.4,1.7-2.3,2.6-.7-.6-1.5-1.2-2.3-1.8-.6.7-1.1,1.3-1.7,1.9.6.7,1.1,1.4,1.7,2.1-.7.7-1.4,1.3-2.3,2.1-1.1-1.4-2.2-2.7-3.3-4.1,1.9-2.1,3.7-4.1,5.7-6.2h0Z%22/><path%20d=%22M75.6,176.6h6.1c1,0,1.4.4,1.4,1.4s-.7,1.2-1.5,1.2h-11.7c-.9,0-1.8-.1-1.8-1.4s1-1.2,1.9-1.2h5.6Z%22/><path%20d=%22M176.7,176.6h5.9c.8,0,1.6.2,1.4,1.2s-.9,1.3-1.3,1.3h-12.5c-.4,0-1-.6-1.1-1.1-.2-.8.3-1.4,1.2-1.4h6.4Z%22/><path%20d=%22M81.6,172.9h-5c-1,0-1.9-.4-1.8-1.5,0-.5,1.1-1.1,1.7-1.1h10.5c.7,0,1.7,0,1.5,1.1,0,.6-.9,1.3-1.5,1.4-1.8.2-3.5,0-5.3,0h0Z%22/><path%20d=%22M170.6,170.3h5.2c.7,0,1.5,0,1.6,1.1,0,1-.5,1.5-1.4,1.5h-10.7c-.5,0-1-.9-1.6-1.4.5-.4,1-1,1.6-1.1,1.8-.1,3.6,0,5.3,0h0Z%22/><path%20d=%22M163.2,216.9c-.8-1.5-1.4-2.8-2.1-4.2.8-.4,1.5-.7,2.2-1.1.4.6.7,1.1,1.1,1.8.8-.3,1.6-.7,2.5-1-.3-.7-.6-1.3-1-2,.6-.4,1.2-.7,2-1.2.7,1.2,1.4,2.2,2,3.4.1.3-.2,1.1-.6,1.3-2,1.1-4,2-6.1,3.1h0Z%22/><path%20d=%22M89.3,216.9c-2.3-1.1-4.4-2.2-6.5-3.3-.3-.1-.5-.9-.3-1.2.5-1.1,1.2-2.1,1.9-3.2.7.4,1.3.7,2,1.1-.3.7-.5,1.3-.9,2.1.9.3,1.7.6,2.5.9.3-.6.6-1,.9-1.6.7.2,1.4.5,2.3.8-.7,1.5-1.3,2.9-2,4.4h0Z%22/><path%20d=%22M70.7,164c1.1,0,2.3-.1,3.4,0,.5,0,.9.8,1.4,1.2-.5.4-1,1-1.5,1-2.2.1-4.5.1-6.7,0-.5,0-1-.8-1.5-1.2.5-.4,1-1,1.6-1.1,1.1-.2,2.2,0,3.3,0h0Z%22/><path%20d=%22M181.6,166.3c-1.1,0-2.2.1-3.3,0-.6,0-1.1-.7-1.6-1.1.5-.4,1-1.2,1.5-1.2,2.2-.1,4.4-.1,6.6,0,.5,0,1.3.7,1.4,1.2.2.9-.6,1.1-1.5,1.1h-3.1,0Z%22/><path%20d=%22M92.3,166.3c-1.1,0-2.2.1-3.3,0-.5,0-1-.7-1.5-1.1.4-.4.9-1.1,1.4-1.2,2.2-.1,4.5-.1,6.7,0,.4,0,.8.8,1.2,1.3-.4.3-.8.9-1.3,1-1.1.2-2.2,0-3.3,0h.1Z%22/><path%20d=%22M159.7,166.3h-3c-1,0-1.6-.4-1.4-1.3,0-.4.9-1,1.4-1,2-.1,4.1,0,6.1,0s1.8.2,1.6,1.2c-.1.5-1,1-1.6,1.1-1,.2-2,0-3,0h-.1Z%22/><path%20d=%22M157,219.3c-.2-.4-.4-.7-.5-.9-.4-1.2-.8-2.3-1.3-3.7,1-.5,1.8-.9,2.9-1.4.6,1.4,1.2,2.8,1.7,4.2,0,.3-.2.9-.5,1-.7.4-1.5.5-2.3.8h0Z%22/><path%20d=%22M81.8,190.1c.8,0,1.6-.1,2.3,0,.5,0,1,.5,1.4.8-.4.6-.8,1.5-1.2,1.6-1.6.2-3.3.1-5-.1-.5,0-.8-1-1.3-1.5.5-.3,1.1-.7,1.6-.8.6-.1,1.3,0,2,0h.2Z%22/><path%20d=%22M92.2,218.1c.7-1.7,1.2-3.2,1.8-4.6h.5c1.9.7,2.4,2,1.7,3.9-.2.6-.5,1.2-.8,2-1-.4-2-.8-3.2-1.3h0Z%22/><path%20d=%22M170.1,190.2c.7,0,1.5-.1,2.2,0,.5.1,1,.5,1.5.8-.4.5-.7,1.5-1.1,1.5-1.7.2-3.5.2-5.2,0-.4,0-.7-1-1.1-1.5.5-.3.9-.7,1.4-.8.8-.1,1.5,0,2.3,0h0Z%22/><path%20d=%22M99.6,215.8c1.2.5,2.3.8,3.3,1.2-.3,1.1-.5,2-.8,2.9,0,.4-.3.9-.5,1.5-1.2-.4-2.3-.9-3.5-1.3.5-1.4.9-2.8,1.4-4.3h0Z%22/><path%20d=%22M150.5,221.4c-.2-.6-.4-1.1-.5-1.5-1-3.2-.9-3.3,2.6-3.9.3.9.6,1.8.9,2.7.1.4.2.9.4,1.5-1.1.4-2.2.8-3.4,1.2Z%22/><path%20d=%22M68.2,170.4c.6,0,1.2-.1,1.7,0,.5.2.9.7,1.3,1-.4.5-.8,1.2-1.2,1.3-1.2.2-2.5.2-3.7,0-.4,0-1-.8-.9-1.1,0-.5.6-1,1-1.2.5-.2,1.2,0,1.9,0h-.1Z%22/><path%20d=%22M89.7,176.6c.4,0,.9-.1,1.2,0,.5.2,1,.5,1.4.8-.4.6-.8,1.5-1.3,1.6-1.1.3-2.4.2-3.5,0-.4,0-.9-.8-.9-1.1,0-.5.6-1.1,1-1.3.6-.2,1.3,0,2,0h.1Z%22/><path%20d=%22M183.9,173c-.7,0-1.5,0-2.1-.3s-.8-.9-.8-1.3.7-.9,1.1-.9c1.1-.1,2.3-.2,3.4,0,.5,0,1.2.7,1.2,1-.1.5-.6,1.2-1.1,1.4-.4.2-1.1,0-1.7,0h0Z%22/><path%20d=%22M162.5,176.7h1.1c1.1,0,1.7.4,1.7,1.5s-1,1-1.7,1-1.6.2-2.3,0c-.6-.3-1.4-.9-1.5-1.5-.2-1.2.9-.8,1.5-.9h1.2Z%22/><path%20d=%22M170.6,166.4h-.9c-.9,0-1.7,0-1.7-1.3s.8-1.2,1.6-1.2h2.2c.9,0,1.5.4,1.5,1.4s-.8,1.1-1.5,1.1h-1.2Z%22/><path%20d=%22M81.5,166.4c-.8-.2-2.4.6-2.4-1.2s1.5-1.1,2.5-1.3h.3c1,0,2.2-.2,2.2,1.3s-1.3,1.1-2.2,1.2h-.4Z%22/><path%20d=%22M177.6,185.5c-.4,0-.8.1-1.1,0-.4-.3-.9-.8-1-1.3,0-.3.6-1,1-1.1.7-.2,1.6-.2,2.3,0,.5.1,1,.7,1.5,1-.4.5-.8,1-1.3,1.3-.4.2-.9,0-1.4.1h0Z%22/><path%20d=%22M74.2,183.1c.5,0,1,0,1.4.1.3.2.8.6.8,1,0,1.8-1.5,1.3-2.5,1.4-1,0-2.1-.2-1.9-1.4,0-.6,1.3-.9,2.1-1.4,0,.1,0,.2.2.3h0Z%22/><path%20d=%22M81.8,183.2c.7.1,1.9-.4,1.9,1.3s-1.2,1.3-2.1,1.3-2,.3-2-1.2,1-1.4,2.2-1.4h0Z%22/><path%20d=%22M170.7,185.8c-1.2,0-2.3.2-2.2-1.4,0-.9.4-1.4,1.3-1.2.9.2,2.5-.7,2.5,1.4s-.9,1.3-1.6,1.2Z%22/><path%20d=%22M160.2,171.3c-.8.5-1.2.9-1.6.9s-.7-.6-1-.9c.4-.3.7-.8,1.1-.8s.8.4,1.5.8Z%22/><path%20d=%22M163.7,182.7c.4.5.9.9.9,1.1,0,.4-.5,1-.8,1s-.9-.5-1-.8c0-.3.5-.7.9-1.3h0Z%22/><path%20d=%22M93.4,172.6c-.4-.7-.8-1-.9-1.4,0-.3.6-.8.8-.8.4,0,.9.5,1,.8,0,.3-.5.7-.9,1.3h0Z%22/><path%20d=%22M88.3,185.1c-.5-.5-.8-.8-1.1-1.1.3-.3.7-.8,1-.9.2,0,.8.5.8.8s-.4.7-.8,1.2h0Z%22/><path%20d=%22M207.1,162.2c1.1.2,2,.6,2,1.9s-.9,1.8-1.9,1.8-2-.7-2-2,.8-1.7,2-1.8h-.1Z%22/><path%20d=%22M45.3,162.2c.9,0,1.6.6,1.7,1.8,0,1-.9,2-1.9,2s-2-1-2-2,.9-1.8,2.3-1.8h0Z%22/><path%20d=%22M131.8,101.9c-3.7,1-7.3,1.1-10.9.3-.3,0-1,.5-1.1.9-.7,2.1-1.7,4-3.6,5.2-1.1.7-2.6,1.1-3.9,1.2-1,0-1.7-.7-1.7-1.8v-.8c.3-1.9,0-3.4-1.9-4.6-2-1.3-2.7-3.1-1.9-5.6.6-1.9.9-4,1.1-6,0-.6-.2-1.5-.7-1.8-1.6-1.3-2.2-3-2-5,0-.5-.2-1.2-.5-1.6-2.1-2.7-1.8-6,.8-8.2.4-.4.8-1,.9-1.5.5-2.5,1.7-3.8,4.3-4.2.4,0,1.1-.3,1.2-.6,2-4.3,5.7-5.9,10-6.1,3.4-.2,6.8,0,10.2.4,3.3.4,5.7,2.4,7.4,5.3.3.6,1.1,1.1,1.7,1.2,2.9.7,3.9,1.6,4.3,4.5,0,.4.4.9.7,1.2,2.6,2.3,2.9,5.3.8,8.1-.4.5-.6,1.3-.6,1.9.1,2-.3,3.6-1.9,4.8-.5.3-.6,1.4-.5,2,.2,2.2.5,4.4,1,6.5.5,2-.2,3.6-1.8,4.6-1.8,1.1-2.4,2.6-2,4.5.6,2.7-1.6,3.4-3.6,2.6-3-1.2-4.7-3.4-5.5-6.4,0-.3-.2-.6-.3-1h0ZM129.4,84.6c0,.3,0,.5-.1.6-.3.4-.7.9-1.1,1.3-.3-.5-.8-.9-.8-1.4,0-1.3,0-2.6,0-3.9,0-2.3,1-3.2,3.3-2.7.8.2,1.7.6,2.4,1,.8.5,1.5,1.3,2.3,1.9,2.8,2.1,7.2,1.4,9.1-1.3.7-1,1.1-2.1.2-3-.3-.3-1.6,0-2.3.5-3.2,1.8-5.9,1.2-7.9-1.9-1-1.6-2.3-2.7-4.1-3.2-1-.3-2-.6-3-.9-3.4-.9-8.4,1.3-10.1,4.4-.5.8-1.2,1.6-2,2-2,.9-4.1.5-6-.6-.5-.3-1.3-.3-2-.4,0,.7,0,1.5,0,2.2,0,.5.5.9.9,1.3,2.5,2.7,6.5,2.8,9.6.3,1-.8,1.9-1.7,3-2.2,2-.9,4,0,4.1,1.9,0,2.2,0,4.5,0,6.7,0,.4-.6.7-1,1.1-.4-.4-.9-.8-1-1.2-.2-.8,0-1.6,0-2.5h-4.2c-.4,5.5,2.3,8.6,7.6,8.9h.5c.5.3,1.1.7,1.6,1-.5.5-.9,1.2-1.5,1.3-2.8.6-5.3,0-7.3-2.1s-3.1-4.9-3.8-7.8c0-.4-.7-1-1-1-1.8,0-3.7.3-5.5.5.3,1.2,1,1.6,3.2,1.7,1.1,0,1.5.3,1.8,1.4,1,3.2,2.8,6,5.2,8.2,3.4,3.1,6.9,3.7,10.5,1.9,4-2,6.4-5.3,7.6-9.3.5-1.6.9-2.5,2.8-2.4,1.2,0,2.3-.5,2.5-1.9-1.7,0-3.2.2-4.6,0-1.5-.3-2.1-.3-2.2,1.4-.1,1.3-.5,2.6-2.3,3.4v-5.4h-4.4v.2ZM129.1,64.9c-.7.4-1.9.8-1.9,1.2,0,.8.6,1.7,1.1,2.3.4.5,1.2.7,1.8.9,2.5.8,4.7,2.2,6.6,4,.8.8,2.3,1.1,3.5,1.2.8,0,1.9-.3,1.8-1.5,0-1.2-1-1.6-2-1.5-1.6,0-2.6-.6-3.4-1.9-1.7-2.7-4.1-4.4-7.7-4.7h.2ZM122.8,64.9c-3,.4-5.3,1.4-6.8,3.7-1.1,1.8-2.1,3.4-4.7,3.1-.4,0-1,1-1.6,1.5.5.5,1,1.3,1.6,1.4,1.5.5,2.9-.2,4-1.3,1.8-1.9,4-3.1,6.5-3.9.6-.2,1.3-.4,1.7-.8.6-.7,1.2-1.5,1.1-2.3,0-.5-1.2-.9-1.9-1.3h.1ZM141.1,89.5c-1.9-.2-2,0-2,1.7v6.3c0,1.9-.4,2.2-2.3,1.7-1.1-.3-1.6,0-1.5,1.2,0,.9,0,1.9.4,2.6.4.8,1.2,1.5,1.9,2.1,0,0,1-.6,1-.7-.6-1.9.6-2.8,1.8-4s1.5-1.9,1.5-2.9c0-2.7-.4-5.3-.7-8.1h0ZM113,89.5c-2.2-.3-2.2-.2-2.2,1.6s0,3.4-.4,5c-.5,2.2,0,3.8,1.9,5,1.1.7,1.6,1.7,1.2,3.1-.3,1.2.5,1.3,1.2.9.5-.3,1.2-.7,1.3-1.2.4-1.5.5-3,.8-4.7-.7,0-1.1,0-1.4,0-2.3.4-2.4.2-2.4-2v-7.7h0ZM132,82.2c0-.2.1-.4.2-.6-.7-.3-1.3-.6-2-.7-.2,0-.6.4-.8.7.2.2.5.6.7.6h2,0ZM120.2,81.6c0,.2,0,.5.2.7.8-.2,1.5-.4,2.3-.5,0-.3-.3-.8-.4-.8-.7.2-1.4.4-2.2.7h0Z%22/><path%20d=%22M194.3,107.8c.5-5.5-2.5-8.2-8.2-9.5-1.6-.4-3.3-.2-5-.4-.6,0-1.1-.4-1.6-.6.4-.5.6-1.1,1.1-1.4,3.7-1.9,7.4-1.4,10.9.6.6.3,1.2.8,2,1-.4-1.9-1.2-3.5-2.5-4.9-2.7-3-6.4-3.8-10.2-4.1-2.1-.2-4.3-.2-6.4-.4-.5,0-1.2-.3-1.3-.6-.1-.4.1-1.1.5-1.3,1.1-.7,2.3-1.5,3.5-1.8,2.8-.5,5.5.4,8.1,1.4.5.2,1,.4,1.6.6-.3-2.8-3.8-6.4-7.1-7.3-1.7-.5-3.5-.7-5.2-1-3.1-.4-5.8-1.7-8.1-3.9-.4-.4-.6-1-.8-1.5.6-.2,1.1-.6,1.7-.6,3.5,0,6.8.7,10.1,2.1.7.3,1.3.6,2.2.6-.3-.4-.5-1-.9-1.3-2.2-2.2-4.4-4.4-6.8-6.5-2.3-2.1-4.9-4-7.1-6.2-2.9-2.9-4-6.5-3.2-10.7,0-.4.1-.9.3-1.2.3-.5.7-.8,1.1-1.2.4.4,1,.7,1.1,1.1,1.2,3,2.4,6,3.4,9.1.8,2.4,1.9,4.6,4.1,5.9-.1-1.9-.4-3.9-.3-5.9,0-1,.8-1.9,1.2-2.9.6.7,1.6,1.3,1.9,2.1.9,2.6,2.1,5.2,2.2,7.9.2,3.1,1.8,4.8,3.8,6.7.2-1.7.3-3.3.5-4.9,0-.7.3-1.3.7-1.9.3-.5.9-1,1.3-1.4.4.5,1,1,1.1,1.6.4,2,.8,4.1.9,6.2,0,1.6,0,3.3-.4,4.8-.3,1.4-.1,2.4.9,3.4.7.6,1.2,1.4,2,2.3.2-3.1,0-6.1,2.6-8.3.4.7.7,1.2.9,1.7,1.4,4,1.1,7.9,0,11.9-.4,1.3-.2,2.1.8,3,.7.6,1.2,1.4,2.1,2.4.3-1.7.3-3.1.7-4.3.5-1.5,1.1-2.9,1.9-4.3.3-.6,1.1-.9,1.6-1.3.3.6.7,1.1.8,1.8,1,5.1.2,10.1-1.8,14.9-1,2.5-1,4.9-.7,7.4,0,.4.8.7,1.2,1,.5.3,1,.7,1.4,1-.5.4-.9,1.2-1.4,1.2h-16c-.5,0-.9-.7-1.4-1.1.5-.3.9-1,1.4-1,3.6,0,7.1,0,10.7-.2h1.8l.3.2Z%22/><path%20d=%22M57.9,92.6c1.2-1.3,2.2-2.2,2.9-3.3.3-.4.3-1.3,0-1.8-1.1-4-1.4-8-.2-12.1.2-.5.6-1,.9-1.5.5.4,1.2.8,1.4,1.3.5,1.4.9,2.9,1.2,4.3,0,.7,0,1.5,0,2.6,2-2.3,3.7-4,3-7.2-.8-3.3-.5-6.8.6-10.1.2-.5.6-.9.9-1.4.5.4,1.1.7,1.4,1.1,1.3,2.2,1.4,4.7,1.2,7.2,1.6-1.4,3.5-2.7,3.7-5.2.2-3.6,1-7,2.9-10.1.3-.6,1-.9,1.6-1.3.4.6,1.1,1.2,1.1,1.8,0,2.3,0,4.6-.2,6.9,1.7-1.2,3.1-2.9,3.8-5.1,1-3.2,2.2-6.4,3.4-9.6.2-.6.9-1,1.4-1.5.4.6,1,1.1,1.1,1.7,1.3,4.7,0,8.8-3.5,12.1-2.3,2.2-4.9,4-7.3,6.1-1.9,1.6-3.7,3.4-5.4,5.2-.6.6-.9,1.4-1.3,2,2.9-.9,5.7-1.8,8.5-2.5,1.2-.3,2.6-.3,3.9-.2.5,0,1.1.5,1.6.7-.3.5-.5,1.1-.8,1.4-2.9,2.8-6.5,3.8-10.4,4.2-4.2.4-7.5,2.4-9.6,6.2-.3.5-.5,1.1-.8,2,1.4-.6,2.5-1.2,3.6-1.4,2.1-.4,4.3-.8,6.5-.8s2.2.9,3.1,1.5c.4.3.7,1.1.5,1.5,0,.3-.9.6-1.4.6-2.9.3-5.7.3-8.6.7-4.8.6-8.4,3-10.2,7.7,0,.2,0,.4-.2,1,.8-.5,1.4-.8,2-1.1,2.8-1.7,5.7-2.1,8.9-1.3.6.2,1.2.4,1.7.7.5.4.8,1,1.1,1.5-.6.2-1.1.5-1.7.5-2.8,0-5.4.3-7.9,1.4-3.5,1.6-5.2,4.3-4.8,8.3.5,0,1,0,1.6,0,3.1,0,6.3,0,9.4.2.8,0,1.8,0,1.6,1.1,0,.4-1,1.1-1.5,1.1h-14.4c-.5,0-1.4-.6-1.6-1.1-.3-1,.7-1.1,1.4-1.1,1.1,0,1.3-.6,1.4-1.6.2-2.7,0-5.3-1.1-8-1.6-4.5-2.4-9.1-1.4-13.9,0-.6.5-1.1.8-1.6.5.4,1.2.6,1.5,1.1,1.5,2,2.3,4.2,2.4,6.7,0,.5,0,1,.2,2v.3Z%22/><path%20d=%22M90.4,37.8c-.5-1-.9-1.8-1.5-2.8,18.1-7.7,36.5-9.2,55.7-5.6-.3,1-.6,1.9-.9,3-18.2-3-36-1.9-53.4,5.4h0Z%22/><path%20d=%22M182.8,46.6c-1,1.1-1.9,2-2.5,2.6-5.4-5.3-12.1-8.2-18.6-11.4-2.3-1.1-4.7-1.8-7-2.7q-2.5-.9-1.3-3.6c10.6,3.1,20.3,8.1,29.4,15h0Z%22/><path%20d=%22M131.5,48.1c0,3.3-2.5,5.7-5.8,5.6-2.8,0-5.3-2.7-5.3-5.7s2.5-5.6,5.5-5.6,5.6,2.6,5.6,5.7ZM128,48.3c0-1.4-1-2.3-2.1-2.3-1.3,0-1.8.9-1.9,2.1,0,1.2,1,2.1,2.1,2,1.2,0,1.9-.8,1.9-1.8Z%22/><path%20d=%22M69.5,46.6c5-4.2,10.6-7,16.3-10,.3.5.5.9.7,1.3.6,1,.3,1.6-.7,2.2-3.3,1.8-6.6,3.7-9.9,5.8-1.1.7-2,1.7-2.8,2.8-.6.8-1.1.9-1.8.2-.6-.7-1.1-1.4-1.8-2.2h0Z%22/><path%20d=%22M160.6,98.9h8.8c.8,0,1.9-.2,1.8,1.1,0,1.1-.8,1.5-1.8,1.5-2.1,0-4.3,0-6.4,0-3.7,0-7.3,0-11,.2-.3,0-.6,0-.8,0-.5-.4-1-.8-1.5-1.3.5-.4,1-1,1.5-1h9.4v-.6Z%22/><path%20d=%22M91.6,101.6h-8.4c-.5,0-1.1,0-1.4-.2-.5-.4-.8-1-1.2-1.6.5-.3,1-.7,1.4-.7,6.3,0,12.5.2,18.8.4.5,0,.9.7,1.4,1-.5.4-.9,1-1.4,1.2-.8.2-1.7,0-2.5,0h-6.7v-.2h0Z%22/><path%20d=%22M210.2,78.2c1.4,3.1,2.7,5.9,4.1,8.9-1.9.6-3.5,1.3-5.2,1.6-.5,0-1.2-1.1-2.2-1.9,1.5-.6,2.5-1,3.6-1.5-.3-1-.6-1.9-1-2.9-.7.3-1.3.4-1.8.7-1.4.8-2.1,0-2.5-1.1-.1-.3,0-1.1.3-1.3,1.5-.9,3-1.7,4.8-2.7v.2Z%22/><path%20d=%22M189.6,51.8c2.6,2.7,4.9,5.2,7.4,7.8-1.2,1.2-2.4,2.2-3.6,3.3-.8-.9-1.5-1.6-2.3-2.5,1.7-1,.9-1.9,0-2.9-1-1.2-1.6-.2-2.5.4-.8-.7-1.6-1.5-2.6-2.4,1.2-1.3,2.2-2.4,3.4-3.7h.2Z%22/><path%20d=%22M59.4,59.2c.5.5.8.9,1.2,1.2-.6.8-1.2,1.5-1.9,2.4-1.2-1-2.4-2-3.7-3.3,2.5-2.6,4.9-5.1,7.4-7.8,1.2,1.3,2.1,2.4,3.3,3.7-.9.7-1.7,1.4-2.6,2.2-.4-.3-.9-.6-1.5-1.2-.7.9-1.3,1.7-2.1,2.6v.2Z%22/><path%20d=%22M208.6,75.3c-1.7,1-3.2,1.8-4.8,2.7-.4-.6-.7-1-1.2-1.7.8-.5,1.5-1,2.5-1.6-.6-.8-1.1-1.7-1.7-2.5-.8.5-1.5,1-2.3,1.5-.7-.9-1.4-1.7-2.3-2.7,1.6-1.1,3.1-2.2,4.7-3.4,1.7,2.5,3.3,5,5,7.7h.1Z%22/><path%20d=%22M43.3,75.5c1.7-2.7,3.3-5.2,5-7.9,1.4,1.1,2.8,1.9,4,3,1.2,1-.4,1.6-.7,2.3-.3.7-.9.9-1.5.3-.3-.3-.7-.6-1.2-1-.4.5-.9,1-1.3,1.5-.8.8-.7,1.4.3,1.9.7.4,1.4.8.7,1.8-.7,1.1-1.3.5-2,0-1-.6-2-1.2-3.3-2Z%22/><path%20d=%22M99.8,96.1c-4.4-.5-8.3-.9-12.2-1.4-.9,0-2-.3-1.8-1.7.2-1.2,1.2-1,2.1-.9,3.8.5,7.5.9,11.3,1.4.9,0,1.9.2,1.7,1.3,0,.6-.9,1-1.2,1.3h0Z%22/><path%20d=%22M151.8,96.1c-.3-.3-1.1-.8-1.2-1.4-.2-1,.8-1.1,1.6-1.2,3.8-.5,7.6-.9,11.5-1.4,1,0,2.1-.4,2.2.9.1,1.1-.8,1.5-1.8,1.6-3.9.5-7.9,1-12.3,1.5Z%22/><path%20d=%22M215.5,90.2c.8,2.8,1.6,5.3,2.4,7.9-2.6.9-2.8.8-3.4-1.5-.6-2.4-.7-2.5-3.1-1.8-1.3.4-1.6-.4-2-1.3-.5-1.1.3-1.3,1.1-1.6,1.6-.5,3.1-1.1,5-1.7Z%22/><path%20d=%22M36.4,90.2c2,.7,3.7,1.3,5.3,2,.3,0,.5,1,.4,1.4-.2.5-.8,1.2-1.2,1.2-.8,0-1.6-.4-2.7-.6-.5,1.5-.9,3-1.4,4.5-.9,0-1.7-.2-2.8-.3.8-2.8,1.6-5.4,2.4-8.2Z%22/><path%20d=%22M125.8,111.4h-5c-.5,0-1-.5-1.5-.7.4-.5.7-1.2,1.2-1.6.3-.2.9,0,1.4,0h8.3c.5,0,1.1,0,1.5.3s.7.9.6,1.4c0,.3-.7.7-1.1.7h-5.4Z%22/><path%20d=%22M148.7,66.9c-1.5,0-1.9-1.1-1.1-2.3.8-1.2,1.7-2.3,2.5-3.4.9-1.2,1.7-2.5,2.7-3.6.3-.4,1-.3,1.6-.5.1.6.6,1.4.4,1.7-1.7,2.6-3.5,5.1-5.3,7.6-.2.3-.7.4-.8.5h0Z%22/><path%20d=%22M153.5,105.1h4.5c.5,0,.9.6,1.4.9-.4.5-.8,1.3-1.2,1.3-3.3,0-6.6,0-9.9,0-.4,0-1.1-.8-1-1.1.1-.5.7-1.1,1.2-1.1,1.7,0,3.3,0,5,0h0Z%22/><path%20d=%22M98.7,105.2h4.4c.5,0,1,.7,1.4,1-.5.4-.9,1.2-1.4,1.2-3,0-5.9,0-8.9,0-.6,0-1.1-.8-1.7-1.3.5-.3,1.1-.9,1.6-1,1.5,0,3,0,4.5,0h0Z%22/><path%20d=%22M104.5,66c-.2.3-.5.8-.8.8s-1.1,0-1.3-.4c-1.3-1.7-2.6-3.4-3.8-5.1-.6-.8-1.2-1.6-1.6-2.5-.2-.4,0-1.2.3-1.4s1.3-.3,1.5,0c1.9,2.6,3.8,5.2,5.7,7.9,0,.2,0,.4.2.8h-.2Z%22/><path%20d=%22M90.6,84.9c2.7.9,5.2,1.6,7.6,2.5.4,0,.8,1.1.7,1.4,0,.4-.9.8-1.4.9-.5,0-1-.2-1.5-.3-1.9-.7-3.8-1.3-5.7-2.1-.4-.2-.9-.9-.9-1.3s.8-.8,1.1-1.1h.1Z%22/><path%20d=%22M161.2,84.8c.4.3,1,.6,1.1,1,0,.4-.3,1.2-.7,1.3-2.2.9-4.4,1.8-6.7,2.5-.5.2-1.3-.5-2-.8.4-.6.7-1.4,1.3-1.6,2.2-.9,4.5-1.6,7-2.4h0Z%22/><path%20d=%22M92.2,77.4c.4.2.6.2.9.4,1.9,1.2,3.8,2.3,5.6,3.6.4.3.4,1.2.6,1.8-.6,0-1.4.5-1.8.3-2-1.1-4-2.3-5.9-3.6-.3-.2-.5-1-.4-1.5,0-.4.6-.7,1-1.1h0Z%22/><path%20d=%22M160.5,79.2c-.2.3-.5.8-1,1.1-1.6,1.1-3.4,2.1-5,3.2-.8.5-1.6.4-2-.4s.1-1.4.5-1.7c1.8-1.3,3.7-2.5,5.7-3.6.9-.5,1.8.2,1.8,1.4Z%22/><path%20d=%22M219.1,104.8c-2,.2-3.9.3-5.7.5-1.1,0-1.5-.5-1.6-1.5-.1-1.1.5-1.4,1.4-1.5,1.3,0,2.6,0,3.9-.5,1.4-.4,1.9.2,2,1.5v1.5h0Z%22/><path%20d=%22M157.4,65.3c.3.2.8.4.9.7.1.4.2,1.2,0,1.4-1.6,1.4-3.2,2.8-4.9,4.1-.3.2-1.2,0-1.5-.4-.3-.3-.3-1.3,0-1.5,1.7-1.4,3.4-2.7,5.1-4.1.1,0,.3,0,.5-.2h-.1Z%22/><path%20d=%22M32.9,104.8v-.7c.1-1.6,1-2.3,2.6-2.1,1.1,0,2.2.2,3.2.4.8,0,1.5.2,1.2,1.3-.2.9-.2,1.7-1.4,1.5-1.8-.2-3.7-.3-5.6-.4Z%22/><path%20d=%22M47,81.2c-.8,1.8-2,2.4-3.7,1.7-1-.4-2-.9-3-1.3,0-.4.2-.6.3-.9.4-.7.7-1.5,1.2-2.5,1.7,1,3.4,2,5.2,2.9h0Z%22/><path%20d=%22M100.6,70.2c-.3.4-.4.9-.8,1.1-.3.2-1,.2-1.3,0-1.6-1.2-3.1-2.4-4.6-3.8-.3-.3-.2-1.1-.3-1.7.6,0,1.3-.3,1.6,0,1.7,1.2,3.3,2.4,4.9,3.7.2,0,.3.4.4.8h.1Z%22/><path%20d=%22M70.8,102h3.3c.4,0,.8.5,1.1.8-.3.4-.7,1.1-1,1.1h-7.2c-.3,0-.6-.5-.9-.8.4-.4.7-1,1.1-1,1.2,0,2.4,0,3.6,0h0Z%22/><path%20d=%22M180.8,104.1c-1,0-2,0-3,0-.5,0-1-.6-1.5-1,.5-.4,1-1,1.5-1,2,0,4.1,0,6.1,0s1,.7,1.5,1c-.5.3-.9.8-1.4.9-1,0-2.1,0-3.1,0h-.1Z%22/><path%20d=%22M53,62.2c1.2,1.1,2.4,2.2,3.7,3.3-.7.9-1.3,1.7-2,2.7-1.4-1.1-2.8-2.1-4.1-3.1.9-1.1,1.6-2,2.4-2.9Z%22/><path%20d=%22M44.2,86.6q-.7,2.6-3,1.8c-1.1-.4-2.2-.8-3.4-1.3.5-1.1.9-2,1.4-3.2,1.7.9,3.3,1.7,5,2.6h0Z%22/><path%20d=%22M199,62.3c.8.9,1.4,1.8,2.3,2.8-1.2.9-2.5,1.9-4,3-.8-.9-1.4-1.6-2.2-2.5,1.4-1.2,2.6-2.3,3.9-3.4h0Z%22/><path%20d=%22M99.8,49.3h-2.8c-.5,0-.8-.6-1.3-.9.4-.4.7-1.3,1.1-1.3,2,0,4.1,0,6.1,0,.4,0,.7.7,1.1,1.1-.4.4-.8,1-1.3,1.1-1,.2-2,0-3,0h.1Z%22/><path%20d=%22M137.6,37.1c-.3.5-.4.9-.7,1.1-1.1,1.1-2.2,2.3-3.4,3.2-.4.4-1.3.2-1.9.3,0-.6,0-1.5.3-1.9,1-1.2,2.2-2.3,3.4-3.4.3-.3,1-.4,1.4-.3.3,0,.5.5.8.9h0Z%22/><path%20d=%22M152,49.3h-2.8c-.4,0-1.2-.7-1.1-.9.1-.5.6-1.3,1-1.3,2,0,3.9,0,5.9,0,.4,0,.8.8,1.2,1.2-.4.3-.9.9-1.3,1-.9.2-1.9,0-2.8,0h0Z%22/><path%20d=%22M135.3,46.8c-.3-.2-.8-.4-.9-.6,0-.4.2-1.1.4-1.2,1.8-.7,3.6-1.4,5.4-2,.4,0,1.3.5,1.4.8,0,.4-.4,1.3-.8,1.4-1.8.6-3.6,1-5.6,1.5h.1Z%22/><path%20d=%22M116.4,46.8c-1.9-.5-3.6-.8-5.2-1.4-.5-.2-.7-1-1.1-1.6.6-.2,1.3-.7,1.8-.6,1.6.4,3.1,1,4.6,1.6.4.2.7.8.7,1.3s-.6.5-.9.7h0Z%22/><path%20d=%22M125.6,106.8h-2.8c-.4,0-.8-.6-1.2-.9.4-.4.7-1,1.1-1h5.8c.4,0,.7.6,1.1.9-.4.4-.7.9-1.1,1-.9.2-1.9,0-2.8,0h0Z%22/><path%20d=%22M120.6,40.9c-.2.2-.4.7-.7.8-.3,0-.9.2-1.1,0-1.4-1.3-2.7-2.6-4-3.9-.2-.3-.2-1.1,0-1.3.3-.3,1.1-.5,1.3-.3,1.5,1.4,2.9,2.9,4.3,4.3,0,0,0,.2,0,.5h0Z%22/><path%20d=%22M139.4,53c-1.6-.5-3-.8-4.3-1.3-.3,0-.5-.8-.7-1.2.4-.2.9-.6,1.3-.6,1.3,0,2.6.3,3.8.7.4,0,1,.8,1,1.2s-.7.8-1.1,1.1h0Z%22/><path%20d=%22M136.4,58.6c-.4.2-1.2.7-1.5.5-1.2-.8-2.5-1.8-3.5-2.9-.7-.8,0-1.4.8-1.5.8-.2,4.1,2.7,4.1,3.9h0Z%22/><path%20d=%22M112.5,52.9c-.4-.4-.8-.8-1.2-1.2.4-.4.8-1,1.2-1.1,1.2-.3,2.4-.6,3.7-.7.4,0,.8.4,1.2.6-.2.4-.4,1-.7,1.2-1.3.5-2.6.8-4.2,1.2Z%22/><path%20d=%22M120.5,56c0,0,0,.4-.3.5-.9.8-1.8,1.6-2.8,2.3-.3.2-1,0-1.4,0-.2,0-.2-.9,0-1.2.8-.9,1.7-1.8,2.7-2.5.8-.5,1.7,0,1.7,1h.1Z%22/><path%20d=%22M66.8,48.9c2.4,2,2.9,3.2,1.5,4.4-.9-1-1.8-2.1-2.8-3.2.3-.3.8-.8,1.3-1.3h0Z%22/><path%20d=%22M185,48.7c.6.5,1,.8,1.7,1.3-.5.6-1,1.1-1.4,1.7-.5.5-.9,1-1.4,1.5-1.3-.5-1.6-1.3-.6-2.3.6-.6,1.1-1.4,1.7-2.2Z%22/><path%20d=%22M208,107.3s.6,0,1,0c.3.2.6.8.7,1.2,0,0-.6.5-.9.6-.6,0-1.3,0-1.8,0-.5-.2-1-.6-1.4-.9.5-.3.9-.6,1.4-.9.2,0,.5,0,1.2,0h-.2Z%22/><path%20d=%22M125.1,36.9s0-.4,0-.8c.2-.3.6-.7.9-.7s.8.4.8.7c0,.8,0,1.7,0,2.5,0,.4-.6.7-.9,1-.3-.4-.6-.8-.8-1.2,0-.3,0-.7,0-1.5Z%22/><path%20d=%22M147.7,30.3c.9.2,1.5.3,2.5.5-.5,1.1-.9,2-1.4,2.8-.1,0-1.4-.2-1.4-.3,0-.9.2-1.8.3-2.9h0Z%22/><path%20d=%22M220.3,109.2c-.7.4-1.2.9-1.5.8-.4,0-.7-.6-1-.9.3-.3.7-.8,1-.8s.7.4,1.4.9h.1Z%22/><path%20d=%22M37.4,110.4c-.5-.5-1-.9-1-1.1,0-.4.6-.7.9-1,.3.3.8.6.9.9,0,.3-.4.7-.8,1.3h0Z%22/><path%20d=%22M215.7,109.2c-.7.4-1.1.9-1.5.9s-.8-.6-.8-1,.6-.8.9-.8.8.4,1.4.9h0Z%22/><path%20d=%22M34.4,109.2c-.7.4-1.2.9-1.5.8-.4,0-.7-.6-.8-1,0-.2.6-.8.9-.7.4,0,.7.5,1.4,1h0Z%22/><path%20d=%22M108.1,57.8c-.4-.6-.9-1-.8-1.3,0-.3.6-.8.9-.8s.8.5.8.9-.4.6-.9,1.2Z%22/><path%20d=%22M98.2,74.8c-.6.3-1,.8-1.2.7-.4-.2-.7-.6-1-1,.3-.2.6-.8.8-.7.4,0,.8.5,1.4,1Z%22/><path%20d=%22M152,41.9c-.4-.6-.8-.9-.8-1.2s.5-.6.8-.9c.3.3.8.5.8.9s-.4.7-.8,1.3h0Z%22/><path%20d=%22M147.1,36.7c.4.5.8.7,1,1.1,0,0-.5.7-.7.7-.4,0-.7-.5-1.1-.8.2-.3.5-.6.8-1Z%22/><path%20d=%22M46.7,102.1c.4.6.9.9.8,1.2,0,.3-.6.7-.9.7s-.8-.5-.7-.7c0-.4.5-.7.9-1.2h0Z%22/><path%20d=%22M155,73.5c.4.5.9.8.9,1,0,.4-.5.8-.8.9-.2,0-.8-.4-.8-.7s.4-.7.8-1.2h0Z%22/><path%20d=%22M103.6,179.7c5.8.3,11.4,1.3,16.6,3.6,1,.4,1.4-.3,1.1-.9-.4-.8-1.2-1.6-1.9-1.9-4.4-1.9-9.1-2.5-13.8-3-1.6-.2-2.1.3-2,2.2h0ZM121,177.5c.3-2.3.3-2.5-1.6-2.9-3.6-.9-7.2-1.6-10.9-2.4-1-.2-1.9-.2-2.1,1-.2,1.3,1,1.1,1.7,1.3,3.7.9,7.5,1.8,11.3,2.7.5.1,1,.2,1.6.4h0ZM109.7,166.8c-.4.4-1.1.7-1.3,1.2-.3,1,.6,1.1,1.4,1.2,3.3.7,6.5,1.4,9.8,2.2.7.1,1.6.6,1.7-.5,0-.6-.6-1.5-1.1-1.7-3.3-.9-6.7-1.6-10.4-2.4h0ZM111.3,161.5c-.4.4-.9.9-1.3,1.3.4.4.8,1,1.4,1.2,2.7.7,5.5,1.2,8.3,1.7.5,0,1.1-.2,1.6-.2-.3-.6-.5-1.7-1-1.8-2.9-.8-5.8-1.4-8.9-2.1h0Z%22/><path%20d=%22M125.5,89.7c-.5,0-1,0-1.4,0-.5,0-.9.5-1.3.8.4.4.7,1,1.1,1.1,1.1.2,2.3,0,3.4,0,.3,0,.7-.7.8-1.1,0-.2-.5-.7-.9-.8-.5,0-1.1,0-1.7,0Z%22/><path%20d=%22M103.6,179.7c0-1.9.4-2.4,2-2.2,4.7.4,9.4,1.1,13.8,3,.8.3,1.6,1.1,1.9,1.9.3.6,0,1.4-1.1.9-5.3-2.3-10.8-3.3-16.6-3.6h0Z%22/><path%20d=%22M121,177.5c-.6-.1-1.1-.3-1.6-.4-3.8-.9-7.5-1.8-11.3-2.7-.7-.2-1.9,0-1.7-1.3.2-1.2,1.1-1.2,2.1-1,3.6.8,7.3,1.5,10.9,2.4,1.9.4,1.9.6,1.6,2.9h0Z%22/><path%20d=%22M109.7,166.8c3.7.8,7.1,1.5,10.4,2.4.5.1,1.2,1.1,1.1,1.7,0,1.1-1,.7-1.7.5-3.3-.7-6.5-1.5-9.8-2.2-.7-.2-1.6-.2-1.4-1.2s.9-.8,1.3-1.2h0Z%22/><path%20d=%22M111.3,161.5c3.1.7,6.1,1.3,8.9,2.1.5.1.7,1.2,1,1.8-.5,0-1.1.3-1.6.2-2.8-.5-5.5-1.1-8.3-1.7-.5-.1-.9-.8-1.4-1.2.4-.4.9-.9,1.3-1.3h0Z%22/><path%20d=%22M147.3,177.4c.3.3,1,.8,1.1,1.5.3,1.2-.9.9-1.5.9-5.1.5-10.1,1.4-14.9,3.2-.4.2-1,0-1.5,0,.2-.6.3-1.3.6-1.9.2-.3.7-.5,1.1-.6,4.7-1.8,9.6-2.6,15.2-3.1h-.1Z%22/><path%20d=%22M144.7,171.9c.3.3,1,.7,1,1.1s-.7,1.1-1.1,1.2c-4.2,1-8.4,2-12.6,2.9-.4,0-1.1-.1-1.2-.4-.3-.9,0-1.7,1-2,2.3-.7,4.6-1.3,7-1.9,1.9-.4,3.8-.7,6.1-1.1l-.2.2Z%22/><path%20d=%22M144,168.4c-.5.3-.9.6-1.4.7-3.5.8-6.9,1.5-10.4,2.2-.5,0-1-.2-1.5-.4.3-.6.5-1.6,1-1.8,2.2-.7,4.4-1.1,6.7-1.6,1.4-.3,2.8-.5,4.2-.6.5,0,1,.5,1.5.8v.6h-.1Z%22/><path%20d=%22M141,161.5l1.3,1.3c-.4.4-.7,1-1.2,1.1-3.1.7-6.1,1.3-9.2,1.8-.4,0-.8,0-1.3-.1,0-.5,0-1,.3-1.5.1-.3.5-.5.9-.6,3-.7,6-1.3,9.3-2h-.1Z%22/><path%20d=%22M125.5,89.7h1.7c.4,0,.9.6.9.8,0,.4-.5,1-.8,1.1-1.1,0-2.3,0-3.4,0-.4,0-.7-.7-1.1-1.1.4-.3.9-.6,1.3-.8.4,0,.9,0,1.4,0Z%22/><path%20d=%22M106.7,142.9h-5.6c-.5,0-1-.5-1.5-.8.4-.4.7-1,1.2-1.1,1.2-.4,1.8-1.3,1.8-2.5v-10.2c0-1.4-.6-2.4-2.1-2.8-.3,0-.5-.7-.7-1,.3-.2.7-.6,1-.6,4.5,0,9.1-.2,13.6.4,4.9.7,7.9,5,7.6,9.8-.3,4.9-3.6,8.3-8.7,8.8-2.1.2-4.3,0-6.4,0h-.2ZM106.5,132.8h0c0,1.9,0,3.8,0,5.6,0,.7.7,1.8,1.2,1.9,3.6.9,7.9.4,9-4.3,1.5-6.3-2.7-10.3-9.2-9.8-.4,0-1.1.9-1.1,1.5,0,1.7,0,3.3,0,5h0Z%22/><path%20d=%22M35.4,142.9h-5.6c-.5,0-1-.5-1.5-.8.4-.4.7-1,1.2-1.1,1.2-.4,1.8-1.3,1.8-2.5v-10.2c0-1.4-.6-2.4-2.1-2.8-.3,0-.5-.7-.7-1,.3-.2.7-.6,1-.6,4.5,0,9.1-.2,13.6.4,4.9.7,7.9,5,7.6,9.8-.3,4.9-3.6,8.3-8.7,8.8-2.1.2-4.3,0-6.4,0h-.2ZM35.3,132.8h0c0,1.9,0,3.8,0,5.6,0,.7.7,1.8,1.2,1.9,3.6.9,7.9.4,9-4.3,1.5-6.3-2.7-10.3-9.2-9.8-.4,0-1.1.9-1.1,1.5,0,1.7,0,3.3,0,5h0Z%22/><path%20d=%22M61.1,142.9h-3.6c-.5,0-.9-.6-1.3-.9.3-.3.6-.9,1-1,1.5-.3,2-1.3,2-2.6v-10.5c0-1.1-.5-1.9-1.6-2.3-.4-.2-.7-.7-1.1-1.1.5-.3,1-.8,1.5-.8h6.7c.4,0,.9.3,1,.6,0,.2-.2.8-.5,1-1.7.7-2,2.1-2,3.7v8.3c0,1.6,0,3.1,2,3.6.3,0,.7.9.6,1-.4.4-.9.8-1.3.8-1.2,0-2.4,0-3.6-.2h0c0,.1.2.4.2.4Z%22/><path%20d=%22M82.5,143.5c-9,0-12.7-8.6-9.2-15,2.1-3.9,5.8-5.1,9.9-5,4.2,0,7.7,1.5,9.7,5.5,3,6-.4,12.9-7,14.1-1.1.2-2.3.3-3.4.4ZM89.2,133.3s.2,0,.2-.1c-.5-1.5-.8-3.2-1.6-4.6-1.3-2.2-3.4-3-5.9-2.7-2.2.3-3.7,1.6-4.5,3.7-.9,2.4-.9,4.9,0,7.3.9,2.5,3.5,4.2,6.1,4s4.6-1.9,5.2-4.6c.2-1,.3-1.9.4-2.9h.1Z%22/><path%20d=%22M128.6,133.2c0-5.8,4.4-9.9,10.7-9.8,6.5,0,11.2,4.2,11.1,10,0,6-4.6,10-11.2,10s-10.6-4.2-10.5-10.1h-.1ZM146.1,133.4c-.7-1.8-1.2-3.7-2.2-5.2-1.3-2-3.4-2.6-5.8-2.3-2.2.3-3.5,1.8-4.2,3.8-.9,2.5-.8,4.9.1,7.3.8,2.1,2.4,3.5,4.8,3.8,2.2.3,4.3-.5,5.4-2.4.8-1.4,1.2-3.2,1.8-5h0Z%22/><path%20d=%22M164.3,135.3v3.3c0,1.1.4,1.9,1.5,2.3.4.1.6.7.9,1-.4.3-.9.8-1.3.8h-6.7c-.4,0-.8-.5-1.2-.7.3-.4.5-.9.9-1,1.5-.4,1.8-1.5,1.8-2.7v-10.3c0-.8-.9-1.5-1.4-2.2-.3-.4-.6-.7-.9-1.1.4-.3.8-.7,1.2-.7,3.3,0,6.6,0,9.9,0,2.1,0,3.7,1.4,4.3,3.5.6,2.1,0,3.9-1.5,5.4s-.5.5-.9.8c1.2,1.8,2.4,3.6,3.6,5.3.9,1.2,2.1,1.8,3.7,1.6.4,0,.9.3,1.3.5-.3.4-.4,1-.8,1.2-2.2,1.5-6.1.9-7.7-1.2-.9-1.2-1.6-2.5-2.4-3.9q-1.3-2.4-4.4-2h0ZM164.2,133.1h1.6c2.3,0,3.6-1.2,3.6-3.4s-1.4-3.8-3.7-3.8-1.5.3-1.5,1.3v5.8h0Z%22/><path%20d=%22M199.3,131.9v-3c0-1.6-.3-2.9-2-3.5-.3,0-.7-.6-.6-.9,0-.3.6-.7.9-.7h7.4c.3,0,.8.4.9.7,0,.3-.3.8-.6.9-1.8.5-2.1,1.9-2.1,3.5,0,2.6,0,5.2-.2,7.8-.3,3.4-2.5,5.6-5.8,6.1-2.1.4-4.4.3-6.5,0-3.5-.6-5.5-3.3-5.6-6.9v-7.7c0-1.4-.5-2.3-1.8-2.8-.4-.2-.6-.7-.9-1,.4-.2.9-.7,1.3-.7h6.7c.3,0,.9.3.9.6s-.2.9-.5,1c-1.2.6-1.5,1.7-1.4,2.9v7.1c0,2.4,1.5,4.3,3.6,5,3.2,1.1,6.1-.7,6.4-4.1.1-1.5,0-2.9,0-4.4h0Z%22/><path%20d=%22M218.8,143.4c-1.4-.3-2.9-.4-4.3-.9-1.7-.5-2.6-3.3-1.5-4.7.7-.9,1.1-.2,1.5.4,1.4,1.9,3.2,2.8,5.6,2.4.8-.2,1.7-.9,2.1-1.6.5-1,0-2.1-1-2.7-1.3-.9-2.8-1.7-4.1-2.6-.7-.5-1.5-1-2.1-1.7-1.4-1.5-1.9-3.2-1.3-5.2.7-2,2.3-3,4.2-3.2,1.7,0,3.6,0,5.3.2,1.8.3,2.8,2.2,2.1,3.8,0,.2-.9.3-1.3,0-1.1-.5-2-1.3-3.1-1.7-1.3-.5-2.7-.5-3.4,1-.8,1.6.5,2.4,1.5,3.2,3.7,2.5,5.6,3.3,3.9,2.3,2.9,1.7,4.1,3.7,3.5,6.2-.5,2.6-2.7,4.2-5.9,4.4h-1.7v.2h0Z%22/></svg>");
}

/* One rule for all three placements. */
.dio-button__bubble,
.dio-chat-header__avatar,
.dio-welcome__icon {
  -webkit-mask: var(--dio-mark) center / contain no-repeat;
  mask: var(--dio-mark) center / contain no-repeat;
  background-color: currentColor;
}

/* The app builds a speech-bubble SVG inside each of these. The elements
   stay (the JS created them and the contract keeps them) but the
   artwork is now the mask above. */
.dio-button__bubble > svg,
.dio-chat-header__avatar > svg,
.dio-welcome__icon > svg { display: none; }

/* ============================================================
   1 · Launcher
   ============================================================ */

/* Fixed, bottom-right, clear of the viewport edge on every size. The
   legacy button was a blue speech-bubble SVG with a separate dark
   tooltip; both are kept as elements (the JS builds them) but the
   bubble becomes the surface and the tooltip becomes its label. */
.dio-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;                       /* 19.6:1 on --ink */
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: background 0.14s ease, transform 0.14s ease;
}

.dio-button:hover {
  background: #262626;
  transform: translateY(-1px);
}

.dio-button:active { transform: none; }

/* The crest, as large as a 44px pill allows. The bundled SVG's own
   text node is dropped in favour of the real .dio-button__tooltip
   label — an SVG <text> is not selectable, translatable, or resizable
   with the user's font settings. */
.dio-button__bubble {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: none;
}

.dio-button__bubble-svg,
.dio-button__bubble-fill,
.dio-button__bubble-text { display: none; }

/* Was a hover-only tooltip. It is the button's visible label now: a
   control whose only name is a tooltip is invisible to anyone who does
   not hover, and on touch there is no hover at all. */
.dio-button__tooltip {
  position: static;
  display: inline;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  box-shadow: none;
  pointer-events: none;
}

/* Unread / pending-suggestion count. */
.dio-button__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--action);
  color: var(--action-ink);          /* 5.80:1 */
  border: 2px solid var(--surface);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

/* While the panel is open the launcher becomes the close affordance. */
.dio-button--active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--border-strong);
}
.dio-button--active:hover { background: var(--surface-2); }
/* The mark follows `color`, which the rule above already flipped to
   --ink, so the crest inverts with the pill. */

/* The legacy pulse was an infinite scaling glow. Kept, but as a single
   calm ring, and switched off entirely for anyone who asked for less
   motion (WCAG 2.3.3). */
.dio-button--pulse { animation: dio-ring 2.4s ease-out 3; }

@keyframes dio-ring {
  0%   { box-shadow: var(--shadow-pop), 0 0 0 0 rgb(163 205 57 / 0.5); }
  70%  { box-shadow: var(--shadow-pop), 0 0 0 12px rgb(163 205 57 / 0); }
  100% { box-shadow: var(--shadow-pop), 0 0 0 0 rgb(163 205 57 / 0); }
}

/* ============================================================
   2 · Panel
   ============================================================ */

/* The panel is an inline companion, not a modal: the whole point of Dio
   is editing the fields behind it, so it must not trap focus or dim the
   page. The overlay element the JS creates stays in the DOM (it is what
   click-outside-to-close listens on) but paints nothing and catches no
   clicks; the ≤620px sheet below turns it back on, because there the
   panel really does cover the page. */
.dio-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: none;
  opacity: 0;
  pointer-events: none;
}

.dio-chat-overlay--visible { opacity: 1; }

/* Anchored ABOVE the launcher — 24px edge + 44px launcher + 12px gap —
   rather than moving the launcher out of the way when the panel opens.
   Pushing the launcher up was tried first and breaks on a short window:
   at 700px tall the panel is capped to 592px and the displaced launcher
   lands at y=0, underneath the app header. Reserving the strip below is
   the only version that holds at every height. */
.dio-chat-modal {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 71;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - var(--header-h) - 104px);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.dio-chat-modal--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- Header ---------- */
.dio-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 12px 12px 14px;
  background: var(--ink);
  color: #fff;
}

.dio-chat-header__info {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

/* The title/subtitle wrapper is an unclassed <div> in the app's markup.
   Without min-width: 0 it refuses to shrink below its content, so with
   three buttons in the bar at 400px the subtitle slid underneath them
   instead of truncating. */
.dio-chat-header__info > div { min-width: 0; }

/* No tinted disc behind it. The crest is already a sealed circle, and a
   second ring inside a 34px one left the interior with nothing to
   resolve into. Full-bleed and white, it at least reads as the mark. */
.dio-chat-header__avatar {
  display: inline-block;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 0;
  background-color: #fff;
  color: #fff;
}

.dio-chat-header__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Same treatment as the org line in the app header, so the two dark
   bars read as one family. 8.2:1 once composited on --ink. */
.dio-chat-header__subtitle {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--nav-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dio-chat-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* ---------- Mode toggle ----------
   Suggest is the safe default: Dio proposes, the user approves. Direct
   writes to the field immediately. The legacy widget drew both the
   same, so the only cue that Dio had started editing your proposal
   unprompted was a one-word label. Direct now takes the warning tint
   and says so in its accessible name. */
.dio-chat-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.dio-chat-mode-toggle:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.5);
}

.dio-chat-mode-toggle svg { display: block; flex: none; }

/* Direct: filled, warm, unmistakably a different state.
   The fill is --warning-soft, not a deeper amber. A deeper one (#ffe9c2)
   was measured first and put --warning at 4.06:1 — the tint the token
   file certifies for this text colour is the light one, at 4.52:1. The
   state does not rest on colour anyway: the label word changes too. */
.dio-chat-mode-toggle--direct {
  background: var(--warning-soft);
  border-color: var(--warning-soft);
  color: var(--warning);            /* 4.52:1 on its own tint */
}
.dio-chat-mode-toggle--direct:hover {
  background: #fff0d0;              /* 4.51:1 — the last step still AA */
  border-color: #fff0d0;
}

.dio-mode-label { line-height: 1; }

/* ---------- Pending suggestions ---------- */
.dio-chat-suggestions-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dio-chat-suggestions-btn:hover { background: rgb(255 255 255 / 0.1); }
.dio-chat-suggestions-btn svg { display: block; flex: none; }

.dio-suggestions-count {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--action);
  color: var(--action-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

/* ---------- Close ---------- */
.dio-chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--nav-fg-dim);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.dio-chat-close:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.dio-chat-close svg { display: block; }

/* ============================================================
   3 · Message stream
   ============================================================ */

.dio-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Welcome ---------- */
.dio-welcome {
  text-align: center;
  padding: 14px 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The app's markup emits the support paragraph BEFORE the prompts, which
   puts a phone number above the two things we actually want tapped. The
   order is fixed here rather than in dio-chat-modal.js so this stays a
   drop-in stylesheet; flex order changes the visual sequence only, and
   the DOM order the screen reader and the tab sequence follow is the one
   in the markup — which reads title, pitch, support, prompts. That is a
   sane reading order either way, so nothing is stranded. */
.dio-welcome__icon    { order: 1; }
.dio-welcome__title   { order: 2; }
.dio-welcome__text    { order: 3; }
.dio-welcome__hints   { order: 4; }
.dio-welcome__support { order: 5; margin-top: 16px; }

/* The one place with room for the mark to be itself: 88px, inked
   straight onto the panel with no disc behind it, so the ring of type
   and the figure inside both resolve. This is the "Hello, I'm Dio"
   moment — the right place for the brand to be legible rather than
   suggested. */
.dio-welcome__icon {
  display: inline-block;
  width: 88px;
  height: 88px;
  border-radius: 0;
  background-color: var(--ink);
  color: var(--ink);
  margin-bottom: 14px;
}

.dio-welcome__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.dio-welcome__text {
  margin: 0 auto 12px;
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--muted);              /* 8.45:1 on paper, 8.1:1 on --surface */
}
.dio-welcome__text strong { color: var(--ink); font-weight: 600; }

/* The support paragraph was the same size and weight as the pitch above
   it, so the phone number competed with the product copy. Stepped down
   and given a rule, which is how the rest of the system marks an aside. */
.dio-welcome__support {
  margin: 0 auto;
  max-width: 34ch;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-2);            /* 5.10:1 on paper */
}
.dio-welcome__support a {
  color: var(--indigo-strong);      /* 7.0:1 on --surface */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dio-welcome__support a:hover { color: var(--ink); }

.dio-welcome__hints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* NOT buttons. The app emits these as bare <span>s with no click
   handler — they are worked examples of what you can ask, not prompts
   you can press. An earlier version of this rule gave them a pointer
   cursor, a hover state and a control-grade border, which promised a
   click that never happens; that is worse than a plain example, so the
   affordances are gone and they are set as quoted sample text.

   Making them genuinely clickable would be a real improvement — it is
   the convention in every other assistant — but it means changing
   dio-chat-modal.js to emit <button>s and wire them to the input, not
   restyling a <span>. Left for that change to make honestly. */
.dio-welcome__hint {
  display: block;
  width: 100%;
  padding: 9px 13px;
  border-left: 2px solid rgb(72 94 216 / 0.4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--indigo-soft);
  color: var(--indigo-strong);      /* 7.0:1 on its own tint */
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
}

/* ---------- Turns ---------- */
.dio-message {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 0;
}

.dio-message__content {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dio-message__content p { margin: 0 0 9px; }
.dio-message__content p:last-child { margin-bottom: 0; }
.dio-message__content strong { font-weight: 600; }
.dio-message__content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 3px;
  padding: 1px 5px;
}
.dio-message__content ul,
.dio-message__content ol { margin: 0 0 9px; padding-left: 20px; }
.dio-message__content li { margin-bottom: 4px; }

/* The user's turn is short and worth marking; a chip does that without
   the width of a full bubble. */
.dio-message--user { align-items: flex-end; }
.dio-message--user .dio-message__content {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: var(--radius) var(--radius) 3px var(--radius);
  background: var(--ink);
  color: #fff;                      /* 19.6:1 */
}

/* Dio's turn is long-form, so it is set as page prose with a rule to
   anchor it rather than a tinted block. */
.dio-message--assistant .dio-message__content {
  border-left: 2px solid var(--border);
  padding-left: 13px;
}

.dio-message__time {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--muted-2);            /* 4.64:1 on --surface */
}
.dio-message--assistant .dio-message__time { padding-left: 15px; }

/* ---------- Sources ---------- */
.dio-message__sources {
  margin: 9px 0 0 15px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.dio-message__sources-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 7px;
}
.dio-message__sources-label svg { display: block; flex: none; }

.dio-message__sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dio-source { font-size: 12.5px; line-height: 1.45; min-width: 0; }
.dio-source a {
  color: var(--indigo-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.dio-source a:hover { color: var(--ink); }
.dio-source__host {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 1px;
}

/* ---------- Typing ---------- */
.dio-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 15px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}

.dio-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  animation: dio-typing-bounce 1.3s ease-in-out infinite;
}
.dio-typing__dot:nth-child(2) { animation-delay: 0.16s; }
.dio-typing__dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes dio-typing-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.dio-typing--with-status { gap: 8px; }
.dio-typing__status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- Errors ---------- */
.dio-error {
  margin-left: 15px;
  padding: 10px 13px;
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--danger-soft);
  color: var(--danger);             /* 5.02:1 on its tint */
  font-size: 12.5px;
  line-height: 1.55;
}

/* ============================================================
   4 · Field-edit indicators

   What Dio did to the page, shown inside the turn that did it. Each
   state carries an icon and a word, never colour alone (WCAG 1.4.1).
   ============================================================ */

.dio-message__actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 10px 0 0 15px;
}

.dio-action-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 12.5px;
  line-height: 1.45;
}
.dio-action-indicator svg { display: block; flex: none; }
.dio-action-indicator strong { font-weight: 600; }

.dio-action-indicator--suggestion {
  background: var(--indigo-soft);
  border-color: rgb(72 94 216 / 0.3);
  color: var(--indigo-strong);
}
.dio-action-indicator--applied {
  background: var(--success-soft);
  border-color: rgb(50 125 65 / 0.3);
  color: var(--success);            /* 4.55:1 on its tint */
}
.dio-action-indicator--error {
  background: var(--danger-soft);
  border-color: rgb(200 30 30 / 0.3);
  color: var(--danger);
}

.dio-action-view-btn,
.dio-action-undo-btn {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: var(--paper);
  color: inherit;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dio-action-view-btn:hover,
.dio-action-undo-btn:hover { background: var(--surface-2); }

/* Where Dio actually wrote, out on the page itself. */
.dio-edit-highlighted {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 3px;
  transition: outline-color 0.2s ease;
}
.dio-edit-applied {
  outline: 2px solid var(--success);
  outline-offset: 2px;
  border-radius: 3px;
}
.dio-edit-undone {
  outline: 2px dashed var(--muted-2);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   5 · Composer
   ============================================================ */

.dio-chat-input-area {
  flex: none;
  padding: 12px 14px 14px;
  background: var(--paper);
  border-top: 1px solid var(--border);
}

/* The wrapper is the control: it carries the border and the focus ring
   so the textarea and the send button read as one field. */
.dio-chat-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--border-strong);   /* 3.4:1 — 1.4.11 */
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dio-chat-input-wrapper:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

.dio-chat-input {
  flex: 1;
  min-width: 0;
  max-height: 132px;
  padding: 8px 0;
  border: 0;
  background: none;
  resize: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.dio-chat-input:focus { outline: none; }
.dio-chat-input::placeholder { color: var(--muted-2); }

.dio-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--action-edge);
  border-radius: var(--radius-sm);
  background: var(--action);
  color: var(--action-ink);         /* 5.80:1 */
  cursor: pointer;
  transition: background 0.12s ease;
}
.dio-chat-send:hover:not(:disabled) { background: var(--action-hover); }
.dio-chat-send svg { display: block; }
.dio-chat-send:disabled {
  background: var(--surface-2);
  border-color: var(--border-soft);
  color: var(--muted-2);
  cursor: not-allowed;
}

/* ============================================================
   6 · Suggestion review

   This one IS a modal — approving a batch of edits to the proposal is a
   decision, and the page behind it must hold still.
   ============================================================ */

.dio-suggestion-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.dio-suggestion-modal--visible { opacity: 1; pointer-events: auto; }

.dio-suggestion-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(10 10 10 / 0.44);
}

.dio-suggestion-modal__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 0.16s ease;
}
.dio-suggestion-modal--visible .dio-suggestion-modal__container { transform: none; }

.dio-suggestion-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
}

.dio-suggestion-modal__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dio-suggestion-modal__title svg { display: block; flex: none; color: var(--indigo); }

.dio-suggestion-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}
.dio-suggestion-modal__close:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
}
.dio-suggestion-modal__close svg { display: block; }

.dio-suggestion-modal__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dio-suggestion-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  flex: none;
  padding: 16px 26px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.dio-suggestion-modal__actions-left,
.dio-suggestion-modal__actions-right { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- One proposed edit ---------- */
.dio-suggestion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.dio-suggestion-item__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.dio-suggestion-item__field {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted-2);
}

.dio-suggestion-item__reason {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1 1 240px;
  min-width: 0;
}

/* Before and after, side by side above 560px and stacked below. The
   arrow rotates with them so the direction still reads. */
.dio-suggestion-item__diff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
}

.dio-suggestion-item__before,
.dio-suggestion-item__after { min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.dio-suggestion-item__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted-2);
}

.dio-suggestion-item__content {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.dio-suggestion-item__content--before {
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  color: var(--ink);
}
.dio-suggestion-item__content--after {
  background: var(--success-soft);
  border-left: 3px solid var(--success);
  color: var(--ink);
}

/* --muted, not --muted-2. "Not set" sits on the red before-tint, where
   --muted-2 measured 4.46:1 — a hair under. */
.dio-suggestion-empty,
.dio-suggestion-empty-value { color: var(--muted); font-style: italic; }

.dio-suggestion-item__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  padding-top: 20px;
}
.dio-suggestion-item__arrow svg { display: block; }

.dio-suggestion-item__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 14px;
}

.dio-suggestion-item__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dio-suggestion-item__action:hover { border-color: var(--ink); }
.dio-suggestion-item__action svg { display: block; flex: none; }

.dio-suggestion-item__action--approve {
  background: var(--action);
  border-color: var(--action-edge);
  color: var(--action-ink);
}
.dio-suggestion-item__action--approve:hover { background: var(--action-hover); }

.dio-suggestion-item__action--reject { color: var(--danger); border-color: var(--border-strong); }
.dio-suggestion-item__action--reject:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}

.dio-suggestion-item__action--view { margin-left: auto; }

/* ---------- Toast ---------- */
.dio-suggestion-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 380px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.dio-suggestion-toast--visible { opacity: 1; transform: none; pointer-events: auto; }

.dio-suggestion-toast--success { border-left-color: var(--success); background: var(--success-soft); }
.dio-suggestion-toast--error   { border-left-color: var(--danger);  background: var(--danger-soft); }
.dio-suggestion-toast--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.dio-suggestion-toast--info    { border-left-color: var(--indigo);  background: var(--indigo-soft); }

/* ============================================================
   7 · Focus

   Two rings, because Dio has both a black bar and white surfaces and
   one ring cannot serve both.
   ============================================================ */

.dio-button:focus-visible,
.dio-chat-modal :focus-visible,
.dio-suggestion-modal :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.dio-chat-header :focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
}

.dio-chat-input-wrapper:focus-within .dio-chat-input:focus-visible { outline: none; }

/* ============================================================
   8 · Responsive

   Below 620px the panel is a bottom sheet: full width, most of the
   height, square top corners against the viewport edge. That is also
   the only size where it covers the page, so the scrim comes back.
   ============================================================ */

@media (max-width: 620px) {
  .dio-chat-overlay {
    background: rgb(10 10 10 / 0.4);
    pointer-events: auto;
    transition: opacity 0.16s ease;
  }

  .dio-chat-modal {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: 86vh;
    max-height: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    transform: translateY(16px);
  }

  /* The sheet covers the bottom of the screen, so the launcher has
     nowhere to sit; the header's close button is the way out. */
  .dio-button--active { display: none; }

  .dio-button { right: 16px; bottom: 16px; }

  .dio-suggestion-modal { padding: 0; align-items: flex-end; }
  .dio-suggestion-modal__container {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .dio-suggestion-modal__header,
  .dio-suggestion-modal__content,
  .dio-suggestion-modal__footer { padding-left: 18px; padding-right: 18px; }
  .dio-suggestion-modal__footer > * { flex: 1; }
  .dio-suggestion-modal__actions-left > *,
  .dio-suggestion-modal__actions-right > * { flex: 1; justify-content: center; }

  .dio-suggestion-toast { right: 16px; left: 16px; bottom: 16px; max-width: none; }
}

/* The diff stacks before the panel does — it lives in a 720px modal. */
@media (max-width: 560px) {
  .dio-suggestion-item__diff { grid-template-columns: minmax(0, 1fr); }
  .dio-suggestion-item__arrow { padding: 0; transform: rotate(90deg); }
}

@media (max-width: 380px) {
  .dio-chat-header { padding: 10px; gap: 8px; }
  .dio-chat-header__avatar { width: 30px; height: 30px; }
  .dio-mode-label { display: none; }     /* icon-only; title attribute carries the name */
  .dio-chat-mode-toggle { padding: 0 8px; }
  .dio-chat-messages { padding: 16px 14px; }
}

/* ============================================================
   9 · Reduced motion (WCAG 2.3.3)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .dio-button,
  .dio-chat-modal,
  .dio-suggestion-modal,
  .dio-suggestion-modal__container,
  .dio-suggestion-toast { transition-duration: 0.01ms; }

  .dio-button--pulse { animation: none; }
  .dio-button:hover { transform: none; }

  /* The dots are the only signal that Dio is still working, so they
     stay — as a still opacity step rather than a bounce. */
  .dio-typing__dot { animation: dio-typing-fade 1.3s steps(2, end) infinite; }
  @keyframes dio-typing-fade { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
}


/* inlined styles/redesign/dio-live.css */
/* Dio live-app compatibility
 *
 * The supplied source stylesheet is kept intact in source/dio.css. These
 * marker-scoped resets remove legacy declarations that the source design does
 * not set because they are absent from its standalone component environment.
 */

html[data-rg-redesign="v1"] body.rg-redesign .dio-message {
  align-self: stretch;
  width: 100%;
  gap: 0;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-message--assistant .dio-message__content {
  padding: 0 0 0 13px;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-source {
  display: block;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-source a {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-message__sources-label {
  font-weight: 400;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-chat-send:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-chat-send:disabled {
  opacity: 1;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-error {
  border: 0;
  border-left: 3px solid var(--danger);
}

html[data-rg-redesign="v1"] body.rg-redesign :where(
  .dio-edit-highlighted,
  .dio-edit-applied,
  .dio-edit-undone
) {
  animation: none;
  box-shadow: none;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-modal__container {
  inset: auto;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-modal__header {
  background: var(--paper);
  color: var(--ink);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-modal__close svg {
  stroke: currentColor;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-modal__content {
  background: transparent;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item {
  margin: 0;
  padding: 0;
  transition: none;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item:hover {
  box-shadow: none;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__header {
  margin: 0;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__field svg {
  color: var(--indigo);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__reason {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__diff {
  margin: 0;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__label {
  margin: 0;
}

html[data-rg-redesign="v1"] body.rg-redesign :where(
  .dio-suggestion-item__before,
  .dio-suggestion-item__after
) .dio-suggestion-item__label {
  color: var(--muted-2);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__content {
  min-height: 0;
  max-height: none;
  overflow: visible;
  word-break: normal;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__content--before {
  border: 0;
  border-left: 3px solid var(--danger);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__content--after {
  border: 0;
  border-left: 3px solid var(--success);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__action--view {
  background: var(--paper);
  color: var(--ink);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-item__action--view:hover {
  background: var(--surface-2);
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-modal__footer {
  flex-direction: row;
}

html[data-rg-redesign="v1"] body.rg-redesign :where(
  .dio-suggestion-modal__actions-left,
  .dio-suggestion-modal__actions-right
) {
  width: auto;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-toast {
  left: auto;
}

html[data-rg-redesign="v1"] body.rg-redesign .dio-suggestion-toast.dio-suggestion-toast--visible {
  transform: none;
}

@media (min-width: 381px) and (max-width: 480px) {
  html[data-rg-redesign="v1"] body.rg-redesign .dio-chat-mode-toggle .dio-mode-label {
    display: inline;
  }
}


/* inlined styles/components/main-content-layout.css */
:root {
    --main-content-max-width: 1158px;
    --main-content-min-width: 320px;
    --main-content-border-radius: 10px;
    --main-content-margin-left: 295px;
    --main-content-margin-right: 75px;
}

body .main-content {
    min-width: var(--main-content-min-width);
    margin-left: 295px;
    margin-right: var(--main-content-margin-right);
    margin-bottom: 180px;
    padding-bottom: 189px;
    border-radius: var(--main-content-border-radius);
    transition: margin-left 0.3s ease;
}

body > div.main-content > div.content-section {
    padding: 0;
    margin-left: 40px;
    margin-right: 40px;
}

body > div.main-content > div.content-section > div.form-section {
    margin: 30px 0;
}

body > div.main-content > div.page-title-container {
    margin-bottom: 40px;
}

/* Default nav button container - compact height */
.main-content .navigation-buttons {
    padding: 12px 40px;
}

/* Align .proposal-title with .main-content (same left edge, same width)
 * Left and right edges match main-content; padding matches its content area. */
body .proposal-title {
    margin-left: 295px;
    margin-right: var(--main-content-margin-right);
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    transition: margin-left 0.3s ease;
}

body > div.proposal-title {
    padding-left: 0;
    padding-bottom: 0;
}

/* Section number color - proposal pages and main-content pages (e.g. researcher-uploads) */
body > div.proposal-container > div.page-title-container > div,
body > div.proposal-container > div.page-title-container > div.section-number,
body .main-content > div.page-title-container > div.section-number {
    color: #b7b7b7 !important;
}

/* When sidebar is collapsed, pin content at 75px instead of centering */
body.nav-collapsed .main-content {
    margin-left: 75px;
}

body.nav-collapsed .proposal-title {
    margin-left: 75px;
}

/* Ensure left/right page navigation links never show browser underlines */
.navigation-buttons a.nav-button,
.navigation-buttons a.nav-button:visited,
.navigation-buttons a.nav-button:hover,
.navigation-buttons a.nav-button:focus,
.navigation-buttons a.nav-button:active {
    text-decoration: none !important;
}




















/* inlined styles/components/desktop-only-overlay.css */
/*
 * Desktop Only Overlay
 * Shown on small viewports (phones / small tablets) to let users know
 * that Research GrantsAI is optimized for desktop use.
 *
 * Matches the app's light theme: white surface, black text, and the
 * lime-green brand accent (#AFCD00) used across the style guide, login,
 * and component library.
 *
 * The overlay element is injected by js/desktop-only-overlay.js.
 */

.desktop-only-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above modals, toasts, nav */
    background-color: #b7b7b7;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
}

.desktop-only-overlay__inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
}

.desktop-only-overlay__card {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 32px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.desktop-only-overlay__logo {
    width: 140px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

.desktop-only-overlay__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #b7b7b7;
    border: 4px solid #AFCD00;
    margin-top: 4px;
}

.desktop-only-overlay__icon svg {
    width: 36px;
    height: 36px;
    stroke: #000;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desktop-only-overlay__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b7b7b7;
    margin: 0;
    background-color: #f7f7f7;
    padding: 5px 12px;
    border-radius: 999px;
    display: inline-block;
}

.desktop-only-overlay__title {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
    color: #000;
}

.desktop-only-overlay__body {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: rgba(0, 0, 0, 0.65);
}

.desktop-only-overlay__tips {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.desktop-only-overlay__tips li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.78);
    text-align: left;
    background-color: #fafafb;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 10px 14px;
}

.desktop-only-overlay__tips li::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background-color: #AFCD00;
}

.desktop-only-overlay__footer {
    font-size: 12.5px;
    color: rgba(0, 0, 0, 0.55);
    margin: 8px 0 0;
}

.desktop-only-overlay__footer a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid #AFCD00;
    padding-bottom: 1px;
}

.desktop-only-overlay__footer a:hover {
    color: #f2711d;
    border-bottom-color: #f2711d;
}

.desktop-only-overlay__dismiss {
    margin-top: 4px;
    background-color: #AFCD00;
    color: #000;
    border: 1px solid #AFCD00;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.desktop-only-overlay__dismiss:hover {
    background-color: #9db800;
    border-color: #9db800;
}

/* Show overlay on small viewports, but only on touch-first devices.
   This keeps desktop browsers that are resized narrow (snapped windows,
   split panes, embedded previews) from incorrectly triggering the overlay,
   while still catching phones and small tablets in portrait. */
@media (max-width: 1024px) and (pointer: coarse) {
    .desktop-only-overlay {
        display: block;
    }

    /* Prevent background scroll bleed-through */
    html.desktop-only-overlay-active,
    body.desktop-only-overlay-active {
        overflow: hidden !important;
        height: 100% !important;
    }
}

/* Respect users who request higher contrast */
@media (prefers-contrast: more) {
    .desktop-only-overlay {
        background-color: #ffffff;
    }
    .desktop-only-overlay__card {
        border-color: #000;
    }
    .desktop-only-overlay__body,
    .desktop-only-overlay__tips li,
    .desktop-only-overlay__footer {
        color: #000;
    }
}


/* inlined components/atoms/inputs/checkbox.css */
/**
 * Checkbox Component Styles
 * Reusable custom checkbox with centered checkmark
 */

.rg-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.rg-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.rg-checkbox__box {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid #d4d4d5;
    border-radius: 3px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rg-checkbox__box svg {
    width: 10px;
    height: 10px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.rg-checkbox__input:checked + .rg-checkbox__box {
    border-color: #afcd00;
    background-color: #afcd00;
}

.rg-checkbox__input:checked + .rg-checkbox__box svg {
    opacity: 1;
    transform: scale(1);
}

.rg-checkbox__input:focus-visible + .rg-checkbox__box {
    outline: 2px solid #2185d0;
    outline-offset: 1px;
}

.rg-checkbox:hover .rg-checkbox__box {
    border-color: #b0b0b0;
}

.rg-checkbox__input:checked + .rg-checkbox__box:hover {
    border-color: #9bb900;
}

.rg-checkbox__label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
}

/* Size variants */
.rg-checkbox--sm .rg-checkbox__box {
    width: 14px;
    height: 14px;
}

.rg-checkbox--sm .rg-checkbox__box svg {
    width: 8px;
    height: 8px;
}

.rg-checkbox--sm .rg-checkbox__label {
    font-size: 12px;
}

.rg-checkbox--lg .rg-checkbox__box {
    width: 20px;
    height: 20px;
}

.rg-checkbox--lg .rg-checkbox__box svg {
    width: 13px;
    height: 13px;
}

.rg-checkbox--lg .rg-checkbox__label {
    font-size: 16px;
}


/* inlined components/organisms/navigation/navigation.css */
/**
 * Navigation Component Styles
 * Imports main navigation component styles
 */


/* inlined components/organisms/navigation/main-nav.css */
/**
 * Main Navigation Component Styles
 * Side navigation component with numbered sections
 */

.main-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    position: fixed;
    top: 203px;
    left: 30px;
    z-index: 50;
    width: 245px;
    max-width: 245px;
    /* Never taller than the viewport; the bottom gap clears the version indicator. */
    max-height: calc(100vh - 203px - 60px);
    box-sizing: border-box;
}

.main-nav-item {
    display: flex;
    align-items: flex-start;
    min-height: 12px;
    text-decoration: none;
    color: inherit;
    font-size: 12pt;
    line-height: 1.3em;
    padding: 0;
    margin-bottom: 20px;
    transition: color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.main-nav-item:last-child {
    margin-bottom: 0;
}

.main-nav-number {
    font-size: 12pt;
    font-weight: 400;
    color: #B0B0B0;
    margin-right: 15px;
    display: flex;
    align-items: center;
    line-height: 1.3em;
    height: auto;
    transition: color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.main-nav-label {
    font-size: 12pt;
    font-weight: 400;
    color: #B0B0B0;
    display: flex;
    align-items: center;
    line-height: 1.3em;
    height: auto;
    max-width: 170px;
    /* Allow the label to shrink to the available width so long labels wrap
     * instead of overflowing and being clipped (flex items won't shrink below
     * their longest word without this). */
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

/* Items inside the active section get black text */
.main-nav-section.active-section .main-nav-label {
    color: #000;
}

.main-nav-section.active-section .main-nav-number {
    color: #000;
}

/* Standalone items (not inside a section) are grey unless active */
.main-nav-item.active-standalone .main-nav-label {
    color: #000;
}

.main-nav-item.active-standalone .main-nav-number {
    color: #000;
}


.main-nav-item:hover .main-nav-label,
.main-nav-item:hover .main-nav-number {
    color: #F2711D;
}

.main-nav-item.active .main-nav-label,
.main-nav-item.active .main-nav-number {
    color: #F2711D;
    font-weight: 600;
}

.main-nav-section {
    margin-bottom: 20px;
}

.main-nav-section:last-of-type {
    margin-bottom: 20px;
}

.main-nav-section-header {
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
}


.main-nav-sub-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    will-change: max-height;
}

.main-nav-sub-items[style*="max-height"] {
    transition: max-height 0.3s ease;
}

.main-nav-section.expanded .main-nav-sub-items {
    max-height: var(--sub-items-height, 2000px);
}

.main-nav-sub-item {
    padding-left: 28px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.main-nav-sub-item:first-child {
    margin-top: 20px;
}

.main-nav-sub-item:last-child {
    margin-bottom: 0;
}

/* Aim accordion sections */
.main-nav-aim-section {
    margin-bottom: 20px;
}

.main-nav-aim-header {
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
    padding-left: 28px;
}

/* When aim section is expanded, the header needs no bottom margin (subsections handle spacing) */
.main-nav-aim-section.expanded .main-nav-aim-header {
    margin-bottom: 0;
}

.main-nav-aim-section .main-nav-sub-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    will-change: max-height;
}

.main-nav-aim-section .main-nav-sub-items[style*="max-height"] {
    transition: max-height 0.3s ease;
}

.main-nav-aim-section.expanded .main-nav-sub-items {
    max-height: var(--sub-items-height, 2000px);
}

.main-nav-aim-section .main-nav-sub-item {
    padding-left: 56px;
    margin-bottom: 20px;
}

.main-nav-aim-section .main-nav-sub-item:first-child {
    margin-top: 20px;
}

.main-nav-aim-section .main-nav-sub-item:last-child {
    margin-bottom: 0;
}

/* Hamburger menu icon */
.main-nav-hamburger-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    position: relative;
    /* Stays pinned at the top; only the nav content below it scrolls. */
    flex-shrink: 0;
}

.main-nav-hamburger-icon:hover {
    opacity: 0.7;
}

.main-nav-hamburger-icon svg {
    display: block;
}

.main-nav-hamburger-icon:hover svg path,
.main-nav-hamburger-icon:hover svg rect,
.main-nav-hamburger-icon:hover svg line {
    stroke: #F2711D;
}

/* Nav content wrapper for collapse animation */
.main-nav-content {
    width: 100%;
    max-width: 245px;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Fill the remaining nav height and scroll when items overflow the viewport. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Thin, unobtrusive scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.main-nav-content::-webkit-scrollbar {
    width: 6px;
}

.main-nav-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-nav-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Collapsed state - slides nav content to the left */
.main-nav.collapsed .main-nav-content {
    transform: translateX(calc(-100% - 30px));
    opacity: 0;
    pointer-events: none;
}




/* Import page-specific styles */

/* inlined styles/pages/login.css */
.login-page-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 40px 20px;
}

.login-container {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.login-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    margin-bottom: 20px;
    text-align: center;
}

.login-info {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    color: rgba(51, 51, 51, 0.87);
    font-size: 13px;
    margin-bottom: 10px;
}

.input-container {
    width: 100%;
    position: relative;
}

.input-container input {
    width: 100%;
    height: 38px;
    padding: 0 15px;
    border: 1px solid #dededf;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}

.input-container input::placeholder {
    color: #b5b5b5;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}


.forgot-password {
    color: #2185d0;
    font-size: 14px;
    text-decoration: underline;
}

.forgot-password.is-disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
}

.login-btn, .signup-btn {
    width: 170px;
    height: 40px;
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-btn {
    background-color: #000000 !important;
}

.signup-btn {
    background-color: rgb(48, 80, 225);
}

.login-btn:hover {
    background-color: #aece46 !important;
}

.signup-btn:hover {
    background-color: #aece46;
}

@media (max-width: 576px) {
    .login-page-container {
        padding: 20px;
    }

    .login-container {
        max-width: 100%;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .forgot-password {
        margin-top: 15px;
    }
    
    .form-buttons {
        flex-direction: column;
    }
    
    .login-btn, .signup-btn {
        width: 100%;
    }
    
    .signup-btn {
        margin-top: 15px;
    }
}

/* Error and success messages */
.error-message {
    display: none;
    color: red;
    margin-top: 10px;
    text-align: center;
}

.success-message {
    display: none;
    color: #AFCD00;
    margin-top: 10px;
    text-align: center;
}


/* inlined styles/pages/registration.css */
/* Registration Page Styles */

/* Registration pages use main-content layout */
/* Header is 83px fixed, so margin-top = 83px (header) + 96px (spacing below header) */
.main-content.profile-registration,
.main-content.organization-registration,
.main-content.plan-registration,
.main-content.admin-registration {
    margin-top: 179px;
    padding-bottom: 40px;
}

.progress-steps {
    display: flex;
    position: relative;
    width: 100%;
    margin-top: 0;
    margin-bottom: 40px;
    padding-left: 40px;
}

.step {
    position: relative;
    margin-right: 60px;
}

.step-text {
    font-size: 22px;
    color: #969696;
    font-weight: 300;
    font-family: 'Inter';
    white-space: nowrap;
}

.step.active .step-text {
    color: #333;
}

/* Step navigation links */
.step-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
}

.step .step-link {
    color: #969696;
}

.step.active .step-link {
    color: #333;
}

.step-link:hover {
    color: #f2711d !important;
}

.step-link:hover .step-text {
    color: #f2711d;
}

.step-indicator {
    position: absolute;
    bottom: -10px;
    left: 3px;
    width: 151px;
    height: 3px;
    background-color: #f2711d;
}

/* Management buttons styling */
.management-buttons {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
}

.management-button {
    position: relative;
}

.management-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
}

.management-text {
    font-size: 18px;
    color: #969696;
    font-weight: 300;
    font-family: 'Inter';
    white-space: nowrap;
}

.management-link:hover .management-text {
    color: #f2711d;
}

/* Only show management buttons when Organization tab is active */
.step:not(.active) .management-buttons {
    display: none;
}

/* Specific widths for different steps */
.profile-registration .step.active .step-indicator {
    width: 78px; /* Shorter width for Profile */
}

.plan-registration .step.active .step-indicator {
    width: 55px; /* Shorter width for Plan */
}

/* Admin: 4 tabs - step indicator widths (match text width per tab) */
.admin-registration .step.active .step-indicator {
    width: 120px;
}

.admin-registration.profile-registration .step.active .step-indicator {
    width: 78px;
}

.admin-registration .step:nth-child(2).active .step-indicator {
    width: 151px; /* [ Organization ] */
}

.admin-registration .step:nth-child(3).active .step-indicator {
    width: 55px; /* [ Plan ] */
}

.admin-registration .step:nth-child(4).active .step-indicator {
    width: 75px; /* [ Users ] */
}

.registration-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    padding-top: 80px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    width: 1158px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Close button - top right of card (profile layout) */
.card-close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-close-btn:hover {
    color: #f2711d;
}

/* Signup-mode tooltip for close (X) button */
.card-close-btn.signup-cancel-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    background: #fff;
    color: #333;
    border: 1px solid #dededf;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 12;
}

.card-close-btn.signup-cancel-tooltip:hover::after,
.card-close-btn.signup-cancel-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Managed (non-editable) fields: email / organization on profile pages */
.registration-form input.managed-field-locked {
    background-color: #f5f5f5;
    color: #6b6b6b;
    cursor: not-allowed;
}

.registration-form input.managed-field-locked:focus {
    outline: none;
    border-color: #dededf;
}

/* Select dropdown (organization admin, organization registration) */
.select-wrapper {
    position: relative;
    width: 100%;
}

.form-select {
    width: 100%;
    height: 40px;
    border: 1px solid #dededf;
    border-radius: 4px;
    padding: 0 15px;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    color: #b5b5b5;
    cursor: pointer;
}

.form-select option {
    color: #000;
}

.form-select option[disabled] {
    color: #b5b5b5;
}

.form-select:invalid,
.form-select option[value=""] {
    color: #b5b5b5;
}

.caret-down {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 8px;
    background-color: #4d4d4d;
    -webkit-mask-image: var(--rg-chevron-mask);
    mask-image: var(--rg-chevron-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 520px;
}

.form-group.half {
    flex: 1;
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-actions {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.form-actions .save-continue-btn {
    flex-shrink: 0;
}

.nav-link-slot {
    width: 200px;
    flex-shrink: 0;
}

.next-link.nav-link-slot {
    justify-content: flex-end;
}

.admin-registration .save-continue-btn {
    position: static;
}

.admin-registration .save-continue-btn:hover {
    background-color: #AFCD00;
}

.admin-new-user-modal-content .modal-save-btn:hover {
    background-color: #AFCD00;
    opacity: 1;
}

/* Admin Users table */
.admin-users-content {
    padding: 0 20px 20px;
}

.admin-users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.admin-users-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-sync-btn {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
}

.admin-sync-btn:hover {
    background: #f0f0f0;
    border-color: #aaa;
}

.admin-sync-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-add-user-link {
    color: #f2711d;
    text-decoration: none;
    font-size: 14px;
}

.admin-add-user-link:hover {
    text-decoration: underline;
}

.admin-users-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-users-search-group {
    display: flex;
    flex: 1 1 360px;
    min-width: 280px;
}

.admin-users-search {
    min-height: 40px;
    min-width: 0;
    flex: 1;
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    color: #111827;
}

.admin-users-search-group:has(.admin-users-search-clear:not([hidden])) .admin-users-search {
    border-radius: 12px 0 0 12px;
}

.admin-users-search:focus {
    position: relative;
    z-index: 1;
    outline: none;
    border-color: #0072CE;
    box-shadow: 0 0 0 2px rgba(0, 114, 206, 0.15);
}

.admin-users-search-clear {
    min-height: 40px;
    border: 1px solid #d7d7d7;
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: #ffffff;
    padding: 0 14px;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
}

.admin-users-search-clear:hover {
    color: #0072CE;
}

.admin-users-filter-status {
    min-height: 18px;
    margin: -8px 0 10px;
    font-size: 13px;
    color: #6b7280;
}

.admin-users-org-filter {
    min-height: 40px;
    min-width: 240px;
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.admin-users-org-filter:focus {
    outline: none;
    border-color: #0072CE;
    box-shadow: 0 0 0 2px rgba(0, 114, 206, 0.15);
}

.admin-users-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-users-table th,
.admin-users-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.admin-users-table th {
    font-weight: 600;
    color: #333;
    background: #fafafa;
}

.admin-users-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.admin-users-table tbody tr:hover {
    background: #f5f5f5;
}

.admin-users-th-id {
    width: 100px;
}

.admin-users-th-num {
    text-align: right;
    width: 90px;
}

.admin-users-table td.admin-users-cell-num {
    text-align: right;
}

.admin-users-table .admin-users-name-link {
    color: #0072CE;
    text-decoration: underline;
}

.admin-users-table .admin-users-name-link:hover {
    color: #005a9e;
}

.admin-users-table .admin-users-status-active {
    color: #2e7d32;
}

.admin-users-table .admin-users-status-paused {
    color: #969696;
}

.admin-users-table .admin-users-status-cancelled {
    color: #c62828;
}

.admin-users-auth-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.7em;
    font-weight: 600;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-users-auth-pending {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.admin-users-auth-blocked {
    background: #fdf1f0;
    color: #9f2d22;
    border: 1px solid #e3b4ae;
}

.admin-user-block-btn--danger {
    color: #9f2d22;
    border-color: #e3b4ae;
}

.admin-user-block-btn--danger:hover:not(:disabled) {
    background: #fdf1f0;
    border-color: #9f2d22;
}

.admin-users-auth-unknown {
    background: #f5f5f5;
    color: #757575;
    border: 1px solid #e0e0e0;
}

.admin-users-loading-row td {
    color: #969696;
    font-style: italic;
}

/* Admin Organizations list (Layer 1) */
.admin-orgs-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.admin-users-table tbody tr.admin-orgs-row,
.admin-users-table tbody tr.admin-users-row {
    cursor: pointer;
}

.admin-users-table tbody tr.admin-users-row:hover {
    background: #f7fbff;
}

.admin-orgs-name-link {
    cursor: pointer;
}

/* Back-to-list button on the organization detail view (Layer 2) */
.admin-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 12px;
    padding: 6px 4px;
    background: none;
    border: none;
    color: #0072CE;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.admin-detail-back:hover {
    text-decoration: underline;
}

.admin-detail-back .nav-arrow-svg {
    width: 11px;
    height: 11px;
}

/* Organization detail: Users section */
.admin-org-users-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    border: 1px solid #dededf;
    border-radius: 4px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #0072CE;
    text-decoration: none;
    background-color: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.admin-org-users-link:hover {
    border-color: #0072CE;
    background-color: #f7fbff;
}

.admin-org-users-link-arrow {
    font-size: 16px;
    line-height: 1;
}

/* Modify Users modal */
.admin-modify-users-modal-content {
    max-width: 620px;
}

.admin-modify-users-modal-content .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.modify-users-section {
    margin-bottom: 24px;
}

.modify-users-section:last-child {
    margin-bottom: 0;
}

.modify-users-section-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.modify-users-list {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.modify-users-empty {
    padding: 16px;
    font-size: 14px;
    color: #969696;
    font-style: italic;
}

.modify-users-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

.modify-users-member:last-child {
    border-bottom: none;
}

.modify-users-member:nth-child(even) {
    background: #fafafa;
}

.modify-users-member-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modify-users-member-name {
    font-size: 14px;
    color: #1d1d1d;
    font-weight: 500;
}

.modify-users-member-email {
    font-size: 12px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modify-users-member-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.modify-users-unassign-btn,
.modify-users-delete-btn {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #d7d7d7;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.modify-users-unassign-btn:hover {
    border-color: #2185d0;
    color: #2185d0;
}

.modify-users-delete-btn {
    color: #c62828;
    border-color: #e6b3b3;
}

.modify-users-delete-btn:hover {
    background: #fdecec;
    border-color: #c62828;
}

.modify-users-add-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.modify-users-add-select-wrap {
    flex: 1;
    min-width: 0;
}

.modify-users-add-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Admin User Info Modal (opened by clicking a user row) */
.admin-user-info-modal-content {
    max-width: 480px;
}

.user-info-list {
    margin: 0 0 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.user-info-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

.user-info-row:last-child {
    border-bottom: none;
}

.user-info-row:nth-child(even) {
    background: #fafafa;
}

.user-info-label {
    flex: 0 0 140px;
    margin: 0;
    font-size: 13px;
    color: #777;
}

.user-info-value {
    flex: 1;
    margin: 0;
    font-size: 14px;
    color: #1d1d1d;
    word-break: break-word;
}

/* Admin New User Modal */
.admin-new-user-modal-content {
    max-width: 560px;
}

.admin-new-user-modal-content .modal-form-select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Admin Plan page: left column read-only info + Add More Tokens button */
.admin-plan-info-column {
    max-width: 320px;
}

.admin-plan-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-plan-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-plan-info-label {
    font-size: 13px;
    color: rgba(51, 51, 51, 0.87);
}

.admin-plan-info-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.admin-add-tokens-btn {
    margin-top: 12px;
    width: 164px;
    height: 27px;
    padding: 0;
    background-color: #2185d0;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
}

.admin-add-tokens-btn:hover {
    background-color: #AFCD00;
}

.admin-add-tokens-btn:active {
    background-color: #9BB900;
}

.admin-credit-edit-btn,
.admin-dashboard-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #d7d7d7;
    border-radius: 999px;
    background: #ffffff;
    color: #1d1d1d;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.admin-credit-edit-btn:hover,
.admin-dashboard-action-link:hover {
    border-color: #2185d0;
    color: #2185d0;
    transform: translateY(-1px);
}

.admin-credit-actions-cell {
    white-space: nowrap;
}

/* Row actions kebab (3-dot) button */
.admin-users-kebab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #4a4a4a;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.admin-users-kebab-btn:hover,
.admin-users-kebab-btn[aria-expanded="true"] {
    background: #f0f0f0;
    border-color: #d7d7d7;
    color: #1d1d1d;
}

.admin-users-kebab-btn:focus-visible {
    outline: 2px solid #2185d0;
    outline-offset: 1px;
}

/* Row actions dropdown menu (appended to <body>, positioned via JS) */
.admin-users-actions-menu {
    position: fixed;
    z-index: 1000;
    min-width: 170px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-users-actions-menu[hidden] {
    display: none;
}

.admin-users-actions-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #1d1d1d;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-users-actions-item:hover:not(:disabled) {
    background: #f3f7fd;
    color: #2185d0;
}

.admin-users-actions-item:disabled {
    color: #969696;
    cursor: default;
}

.admin-users-actions-item--danger {
    color: #c0392b;
}

.admin-users-actions-item--danger:hover:not(:disabled) {
    background: #fdf1f0;
    color: #c0392b;
}

/* Destructive header buttons (e.g. Delete Selected) */
.admin-danger-btn {
    color: #c0392b;
    border-color: #e3b4ae;
}

.admin-danger-btn:hover:not(:disabled) {
    background: #fdf1f0;
    border-color: #c0392b;
}

/* Multi-select checkbox column (only shown to super admins) */
.admin-users-table:not(.admin-users-table--selectable) .admin-users-col-select {
    display: none;
}

.admin-users-th-select {
    width: 36px;
}

.admin-users-select-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #2185d0;
    cursor: pointer;
}

/* Destructive row action (org list Delete) */
.admin-orgs-delete-btn {
    color: #c0392b;
    border-color: #e3b4ae;
}

.admin-orgs-delete-btn:hover {
    background: #fdf1f0;
    border-color: #c0392b;
    color: #c0392b;
}

.admin-dashboard-page {
    padding-bottom: 48px;
}

.admin-dashboard-card {
    width: min(1180px, calc(100vw - 64px));
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.admin-dashboard-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f4f5f7;
    color: #4d4d4d;
    text-decoration: none;
    font-size: 13px;
}

.admin-dashboard-nav-link.active {
    background: #111827;
    color: #ffffff;
}

.admin-dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.admin-dashboard-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #2185d0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-dashboard-title {
    margin: 0 0 10px;
    font-size: 36px;
    line-height: 1.05;
    font-weight: 500;
}

.admin-dashboard-copy {
    margin: 0;
    max-width: 560px;
    color: #5f6368;
    font-size: 15px;
    line-height: 1.5;
}

.admin-dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.admin-dashboard-action-link {
    min-width: 190px;
}

.admin-dashboard-action-link.secondary {
    background: #f7f7f8;
}

.admin-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-dashboard-kpi {
    padding: 20px;
    border: 1px solid #ececec;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.admin-dashboard-kpi-label {
    display: block;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 13px;
}

.admin-dashboard-kpi-value {
    font-size: 32px;
    font-weight: 500;
    color: #111827;
}

.admin-dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid #ececec;
    border-radius: 18px;
    background: #ffffff;
}

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

.admin-dashboard-section-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
}

.admin-dashboard-section-head p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.admin-dashboard-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-dashboard-search,
.admin-dashboard-sort {
    min-height: 40px;
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
    color: #111827;
}

.admin-dashboard-search {
    min-width: 240px;
}

.admin-credit-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 520px;
}

.admin-credit-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.admin-credit-panel-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: rgba(51, 51, 51, 0.87);
}

.admin-credit-panel-head p {
    display: none;
}

.admin-credit-panel-stats {
    display: flex;
    border: 1px solid #dededf;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.admin-credit-stat {
    flex: 1;
    padding: 10px 15px;
}

.admin-credit-stat + .admin-credit-stat {
    border-left: 1px solid #ededed;
}

.admin-credit-stat-label {
    display: block;
    margin-bottom: 2px;
    color: rgba(51, 51, 51, 0.6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-credit-stat-value {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.admin-credit-panel-note {
    color: rgba(51, 51, 51, 0.6);
    font-size: 12px;
}

.admin-credit-modal-content {
    max-width: 560px;
}

.admin-credit-modal-subtitle {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.admin-credit-current {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-credit-current-card {
    padding: 14px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #ececec;
}

.admin-credit-current-label {
    display: block;
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-credit-current-card strong {
    font-size: 26px;
    font-weight: 500;
}

.admin-credit-reason {
    resize: vertical;
    min-height: 96px;
}

.admin-credit-preview {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7fbff;
    color: #1f4f76;
    font-size: 13px;
    line-height: 1.5;
}

.admin-credit-error {
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff1f0;
    color: #b42318;
    font-size: 13px;
}

.nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.87);
    transition: color 0.3s ease;
}

.form-actions a.nav-link,
.form-actions a.nav-link:visited,
.form-actions a.nav-link:hover,
.form-actions a.nav-link:focus,
.form-actions a.nav-link:active {
    text-decoration: none !important;
}

.nav-link:hover {
    color: #f2711d;
}

.nav-link:hover .nav-arrow-svg line,
.nav-link:hover .nav-arrow-svg path {
    stroke: #f2711d;
}

.disabled {
    opacity: 0;
    pointer-events: none;
}

/* SVG arrow styling */
.nav-arrow-svg {
    margin: 0 10px;
    vertical-align: middle;
}

.prev-link .nav-arrow-svg {
    margin-right: 10px;
    margin-left: 0;
}

.next-link .nav-arrow-svg {
    margin-left: 10px;
    margin-right: 0;
}

.save-continue-btn {
    width: 170px;
    height: 40px;
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    background-color: #969696;
    transition: all 0.3s ease;
}


.save-continue-btn:hover {
    background-color: #AFCD00;
    color: #fff;
}

/* When form is changed, add this class via JavaScript */
.save-continue-btn.form-changed {
    background-color: #afcd00;
}

.save-continue-btn.form-changed:hover {
    background-color: #c3e600;
}

/* Plan page: Subscription status */
.plan-status-info {
    padding-top: 10px;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.plan-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.plan-status-active {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.plan-status-past-due {
    background-color: #fff3e0;
    color: #e65100;
}

.plan-status-canceled {
    background-color: #fbe9e7;
    color: #c62828;
}

.plan-status-trialing {
    background-color: #e3f2fd;
    color: #1565c0;
}

/* Plan page: Token info styling */
.plan-token-info {
    padding-top: 10px;
}

.token-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 16px;
}

.token-label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 400;
    min-width: 130px;
}

.token-value {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 400;
    margin-left: 8px;
}

.plan-token-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 60px;
}

.plan-purchase-tokens-btn,
.plan-contact-tokens-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 40px;
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    background-color: #969696;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
}

.plan-purchase-tokens-btn:hover,
.plan-contact-tokens-btn:hover {
    background-color: #AFCD00;
    color: #fff;
}

/* Plan page: label container for Contact Person + Add link */
.plan-registration .label-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.plan-registration .add-link {
    font-size: 13px;
    color: #f2711d;
    text-decoration: none;
}

.plan-registration .add-link:hover {
    text-decoration: underline;
}


/* Dropdown styling */
.input-container.dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-arrow {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 8px;
    background-color: #4d4d4d;
    -webkit-mask-image: var(--rg-chevron-mask);
    mask-image: var(--rg-chevron-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Label with link layout */
.label-with-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Orange links */
.add-new-link {
    text-align: right;
}

.orange-link {
    color: #f2711d;
    text-decoration: none;
    font-size: 14px;
}

.orange-link:hover {
    text-decoration: underline;
}

/* Section divider */
.section-divider {
    height: 1px;
    background-color: #dededf;
    margin: 30px 0;
    width: 100%;
}

/* Form layout */
.registration-form {
    width: 100%;
    padding: 0 20px;
    max-width: 1080px;
    margin: 0 auto;
}

/* Two-column layout */
.form-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}

.form-column {
    flex: 1;
    min-width: 45%;
}

/* Profile page: clean two-column layout */
.profile-registration .form-columns {
    gap: 40px;
}

.profile-registration .form-column-left .form-group {
    max-width: 100%;
}

.profile-registration .form-row-names {
    margin-bottom: 20px;
}

.profile-registration .form-row-names .form-group.half {
    flex: 1;
}

/* Password section (right column on profile) */
.password-section-heading {
    display: block;
    color: rgba(51, 51, 51, 0.87);
    font-size: 13px;
    font-weight: normal;
    margin: 0 0 10px 0;
    font-family: inherit;
}

.password-fields .input-container {
    margin-bottom: 20px;
}

/* Verify email code page */
.verify-email-title {
    margin-top: 0;
}

.verify-email-description {
    margin-bottom: 24px;
    color: #555;
}

.verify-email-form {
    padding: 0;
    max-width: 420px;
}

.verify-email-form-group {
    max-width: 100%;
}

.verify-email-message {
    display: none;
    margin-bottom: 12px;
}

.verify-email-message-error {
    color: #c62828;
}

.verify-email-message-success {
    color: #2e7d32;
}

.verify-email-actions {
    margin-top: 20px;
    justify-content: flex-start;
    gap: 16px;
}

.verify-email-resend-btn {
    background-color: #969696;
}

.password-fields .input-container-confirm {
    margin-bottom: 10px;
}

.current-password-container {
    display: none;
}

/* Form group widths */
.form-group {
    margin-bottom: 20px;
    width: 100%;
    max-width: 520px;
}

/* For paired fields - each should take up 1/4 of the width */
.form-row .form-group.half {
    width: 100%;
    max-width: 100%;
}

/* Profile page form row full width within column */
.profile-registration .form-row {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .form-columns {
        flex-direction: column;
    }
    
    .form-column {
        width: 100%;
    }
    
    .form-group, .form-row {
        width: 100%;
        max-width: 100%;
    }
    
    .registration-form {
        padding: 0 10px;
    }
}

@media (max-width: 576px) {
    .registration-container {
        max-width: 100%;
    }
    
    .registration-card {
        padding: 20px;
    }
    
    .progress-steps {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .step {
        margin-right: 30px;
    }
    
    .step-text {
        font-size: 18px;
    }
    
    .step-indicator {
        width: 70px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .form-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .nav-link-slot {
        display: none;
    }

    .admin-dashboard-card {
        width: calc(100vw - 32px);
    }

    .admin-dashboard-hero,
    .admin-dashboard-section-head,
    .admin-credit-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-dashboard-kpis,
    .admin-credit-panel-stats,
    .admin-credit-current {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-search,
    .admin-dashboard-sort,
    .admin-dashboard-action-link,
    .admin-users-search-group,
    .admin-users-org-filter {
        width: 100%;
    }
}


/* 
 * This file serves as the main entry point for all CSS.
 * It imports all component and page-specific styles.
 * When adding new CSS files, add the import statement here.
 */

/* Announcement requirements */
.announcement-workflow {
    margin: 20px 0;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.announcement-workflow > summary {
    padding: 14px 0;
    cursor: pointer;
    font-weight: 600;
}

.announcement-workflow-content {
    padding: 0 0 20px;
    max-width: 900px;
}

.announcement-workflow-content h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.announcement-workflow-content p,
.announcement-workflow-content ul,
.announcement-workflow-content details {
    margin: 0 0 14px;
}

.announcement-workflow-content ul {
    padding-left: 20px;
}

.announcement-workflow-content input,
.announcement-workflow-content textarea,
.announcement-workflow-content select {
    box-sizing: border-box;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #bcbcbc;
    border-radius: 4px;
    background: #fff;
    color: inherit;
    font: inherit;
}

.announcement-workflow-content button {
    margin: 4px 8px 8px 0;
}

.announcement-workflow-content > a {
    display: block;
    margin: 8px 0;
}

.announcement-workflow summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}