/* r2 visual shell, shared through the public brand assets so the login loads it.
   Presentation only: existing DOM, scripts, state classes and storage are retained.
   Do not add a framework reset here: hidden dialogs and export renderers keep their rules. */
:root {
  --r2-ink: #141312;
  --r2-ink-soft: #2f2b28;
  --r2-muted: #575049;
  --r2-mute-soft: #6e6862;
  --r2-sheet: #f3f0eb;
  --r2-paper: #f6f3ef;
  --r2-white: #fff;
  --r2-line: #c7c0b7;
  --r2-line-soft: #e3ddd5;
  --r2-coral: #f88588;
  --r2-coral-soft: #fbb6b8;
  --r2-coral-wash: #fee7e7;
  --r2-coral-deep: #b94a4e;
  --r2-success: #2f7360;
  --r2-success-wash: #e3f1eb;
  --r2-warning: #8a4a10;
  --r2-warning-wash: #fcf0e1;
  --r2-error: #c90d17;
  --r2-control: 8px;
  --r2-container: 12px;
  --r2-card: 16px;
  --r2-ease: cubic-bezier(.22, 1, .36, 1);
  --lustra-coral: var(--r2-coral);
  --lustra-n100: var(--r2-paper);
  --lustra-n200: var(--r2-line-soft);
}

/* Retain the existing desktop rail and its accessible mobile drawer controller. */
.shell {
  font-family: "Figtree", "Area Normal", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--r2-ink);
  height: 100dvh;
}
.shell > .work-wrap { background: var(--r2-sheet); }
.shell > .work-wrap > main.work,
.shell > main.work { background-color: var(--r2-sheet); }
.shell .ops-rail {
  --rail-mute: #b0aba5;
  --rail-line: #3d3a3a;
  --rail-panel: #2e2c2b;
  --rail-coral: var(--r2-coral);
}
.ops-rail .ops-brand { min-height: 60px; }
.ops-rail .ops-link { border-radius: 12px; }
.ops-rail :is(.ops-link, .ops-brand-link, .ops-jump, .tools-toggle) {
  transition: background-color 120ms var(--r2-ease), color 120ms var(--r2-ease), border-color 120ms var(--r2-ease);
}
.ops-rail .ops-link.is-active,
.ops-rail .ops-link[aria-current="page"] { background-color: #2e2c2b; }
.ops-rail .ops-next a { border-radius: var(--r2-container); }
.ops-rail .profile-menu {
  border-color: #4a4643;
  border-radius: var(--r2-container);
  box-shadow: 0 12px 32px #0004;
}
.ops-sheet-bar {
  background: var(--r2-white);
  border-bottom-color: var(--r2-line-soft);
  min-width: 0;
}
.ops-crumb { color: var(--r2-mute-soft); font-size: 13px; }
.ops-crumb b { color: var(--r2-ink); }
.ops-sheet-date { color: var(--r2-muted); }
.ops-sheet-action { background: var(--r2-coral); color: #211f1f; border-radius: var(--r2-control); }
.ops-sheet-action:hover { background: var(--r2-coral-soft); }
.ops-sheet-quiet { border-color: var(--r2-line); border-radius: var(--r2-control); color: var(--r2-ink); }
.ops-sheet-quiet:hover { background: var(--r2-paper); }
.ops-palette-card { border: 1px solid var(--r2-line-soft); border-radius: var(--r2-card); }
.ops-palette-card input { color: var(--r2-ink); border-bottom-color: var(--r2-line-soft); }
.ops-palette-list button { border-radius: var(--r2-control); }
.ops-palette-list button span { color: var(--r2-muted); }
.shell :focus-visible { outline: 2px solid var(--r2-coral-deep); outline-offset: 3px; }
.ops-rail :focus-visible { outline-color: var(--r2-coral-soft); }
.shell :is(input, select, textarea) { accent-color: var(--r2-coral-deep); }
.shell ::selection { background: var(--r2-coral-soft); color: #211f1f; }

/* Login and profile chooser retain the original form, validation and save queue. */
.door .stack { width: min(100%, 400px); }
.door #loginForm {
  border: 1px solid #3d3a3a;
  border-radius: var(--r2-card);
  padding: 26px;
  background: #1b1b1bf2;
}
.door :is(.lead, label, .hint, .kicker) { color: #d3d2d2; }
.door :is(.aside, .foot p, .steps li) { color: #afaeae; }
.door .steps li[aria-current="step"] { color: #fff; }
.door #password { border-color: #4a4848; border-radius: var(--r2-control); }
.door #password:focus { border-color: var(--r2-coral-soft); }
.door #submit { border-radius: var(--r2-control); }
.door #showPassword { color: #d3d2d2; }
.door :focus-visible { outline: 2px solid var(--r2-coral-soft); outline-offset: 3px; }
.id-page .profile-card {
  border-color: #3d3a3a;
  border-radius: var(--r2-card);
  background: #ffffff07;
  transition: border-color 120ms var(--r2-ease), background-color 120ms var(--r2-ease), transform 220ms var(--r2-ease);
}
.id-page .profile-card:hover { border-color: #6e6862; background: #ffffff0d; }
.id-page :is(.profile-role, .profile-meta, .id-lede, .id-foot, .id-brand-kicker) { color: #bdb8b3; }
.id-page .profile-face { border-radius: var(--r2-container); }
.id-page :is(.id-search input, .id-orgs, .id-new) { border-color: #4a4848; border-radius: var(--r2-control); }
.id-page :focus-visible { outline: 2px solid var(--r2-coral-soft); outline-offset: 3px; }
body:has(.id-page) .dialog { border-color: #4a4848; border-radius: var(--r2-card); }
body:has(.id-page) .dialog :is(input, select, .btn-primary, .btn-ghost) { border-radius: var(--r2-control); }

@media (max-width: 860px) {
  /* Use the same menu controller and buttons in the reference's phone header.
     Opening the menu still restores the original full-height navigation drawer. */
  .shell, .shell.tools-collapsed,
  .shell:has(> .chat-col), .shell.tools-collapsed:has(> .chat-col) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr);
    transition: none;
  }
  .shell > .tools-col.ops-rail { grid-column: 1; grid-row: 1; }
  .shell > .work-wrap, .shell > main.work { grid-column: 1; grid-row: 2; }
  .shell.tools-collapsed > .ops-rail {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 94px;
    grid-template-rows: 56px;
    align-items: center;
    overflow: visible;
  }
  .shell.tools-collapsed .ops-rail .ops-brand,
  .shell.tools-collapsed .ops-rail .index { display: contents; }
  .shell.tools-collapsed .ops-rail .ops-wordmark-link {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin-left: 42px;
  }
  .shell.tools-collapsed .ops-rail .ops-mark,
  .shell.tools-collapsed .ops-rail .index-nav,
  .shell.tools-collapsed .ops-rail .index-profile-wrap,
  .shell.tools-collapsed .ops-rail .ops-jump-mark,
  .shell.tools-collapsed .ops-rail .ops-jump-keys { display: none; }
  .shell.tools-collapsed .ops-rail .tools-toggle {
    grid-column: 1;
    grid-row: 1;
    width: 36px;
    height: 36px;
    margin: 0 0 0 12px;
    background: transparent;
  }
  .shell.tools-collapsed .ops-rail .tools-toggle::before {
    width: 16px;
    height: 12px;
    border: 0;
    transform: none;
    background: linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat,
                linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
                linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
  }
  .shell.tools-collapsed .ops-rail .ops-jump {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: auto;
    height: 36px;
    margin: 0 12px 0 0;
    padding: 0 10px;
    border: 1px solid var(--rail-line);
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  .shell.tools-collapsed .ops-rail .ops-jump-label { display: inline; }
  .shell > .work-wrap { border-radius: 16px 16px 0 0; }
  .ops-sheet-bar { gap: 8px; padding: 12px; }
  .ops-crumb { min-width: 0; overflow-wrap: anywhere; }
  .ops-sheet-side { max-width: 100%; }
}
@media (max-width: 420px) {
  .door #loginForm { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .ops-rail :is(.ops-link, .ops-brand-link, .ops-jump, .tools-toggle),
  .id-page .profile-card { transition-duration: 0s; }
}