/* Redrob component styles. Every value is a token; nothing is hard-coded but
   geometry that has no token (control heights, hairline widths) and the optical
   corrections in 15-optical.md, which are hard-coded on purpose. */

.rr-root,
[class^="rr-"],
[class*=" rr-"] {
  box-sizing: border-box;
}

/* ---------------------------------------------- The surfaces nobody designs */
/* The only global element rules in this file, and they are here because a brand
   that does not set them is letting the browser set them. A reader drags a
   selection across the hero more often than they click anything, and until this
   block existed that selection was Chrome's blue on a page whose whole argument
   is one specific blue. Each of these is a brand surface that ships by default. */

::selection { background: var(--blue-2); color: var(--ink-primary); }
[data-theme="dark"] ::selection { background: var(--blue-8); color: var(--gray-1); }

/* The caret is the one mark on screen that is unambiguously the person's. */
:root { caret-color: var(--action-primary); }
[data-theme="dark"] { caret-color: var(--ink-brand); }

/* Chrome paints a remembered field pale yellow, over the top of everything. The
   inset shadow is the only thing that reaches it, and the 9999s transition is what
   stops the yellow flashing before the shadow lands. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: inset 0 0 0 100px var(--surface-base);
  -webkit-text-fill-color: var(--ink-primary);
  caret-color: var(--action-primary);
  transition: background-color 9999s ease-in-out 0s;
}

/* A list marker is type. It takes the type's color, not the browser's black. */
li::marker { color: var(--ink-secondary); }

/* Native checkbox, radio, range and progress, wherever consumer content has them. */
:root { accent-color: var(--action-primary); }

/* A dialog's own backdrop, which is otherwise a flat 0.5 black. */
::backdrop { background: var(--overlay-scrim); }

/* ---------------------------------------------------------------- Button */

.rr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.rr-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-width);
}
.rr-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: 13px; }
.rr-btn--md { height: var(--control-height-md); padding: 0 var(--space-4); font-size: 14px; }
.rr-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-5); font-size: 15px; }
.rr-btn--block { width: 100%; }
.rr-btn--pill { border-radius: var(--radius-full); }
/* A pill takes the next step up the space scale from its rectangular twin. The end cap
   curves away from the label, so the same 16px of padding reads as less than it does
   against a straight edge. The lg size already did this - space-5 to space-6, measured
   at 8px wider - and sm and md had been left on the rectangle's value. */
.rr-btn--pill.rr-btn--sm { padding: 0 var(--space-4); }
.rr-btn--pill.rr-btn--md { padding: 0 var(--space-5); }
.rr-btn--pill.rr-btn--lg { padding: 0 var(--space-6); }

.rr-btn--primary {
  background: var(--action-primary);
  color: var(--ink-on-brand);
}
.rr-btn--primary:hover:not(:disabled) { background: var(--action-primary-hover); }

.rr-btn--secondary {
  background: var(--surface-base);
  border-color: var(--border-strong);
  color: var(--ink-primary);
}
.rr-btn--secondary:hover:not(:disabled) { background: var(--surface-sunken); }

.rr-btn--ghost {
  background: transparent;
  color: var(--ink-brand);
}
.rr-btn--ghost:hover:not(:disabled) { background: var(--surface-brand-subtle); }

.rr-btn--danger {
  background: var(--status-danger);
  color: var(--redrob-white);
}
.rr-btn--danger:hover:not(:disabled) { filter: brightness(0.92); }

.rr-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rr-btn__icon { display: inline-flex; width: 1em; height: 1em; }

/* The loader is the gateway, not a ring. Three faces raked to the brand's own
   40 degrees, short-tall-short like the mark's silhouette, lit left to right:
   light crossing a threshold. A rotating ring is the single most borrowed
   element in the category, which is why there is not one in this system. */

.rr-loader {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
}
.rr-loader__bars {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 28px;
  line-height: 0;
  flex: none;
}
.rr-loader--sm .rr-loader__bars { font-size: 16px; }
.rr-loader--lg .rr-loader__bars { font-size: 44px; }

.rr-loader__bar {
  display: block;
  width: 0.19em;
  min-width: 2px;
  border-radius: 1px;
  background: var(--border-strong);
  transform: skewX(calc(-1 * var(--tick-angle)));
  animation: rr-loader-pass 1080ms var(--easing-standard) infinite;
}
.rr-loader__bar:nth-child(1) { height: 0.6em; animation-delay: 0ms; }
.rr-loader__bar:nth-child(2) { height: 1em;   animation-delay: 110ms; }
.rr-loader__bar:nth-child(3) { height: 0.6em; animation-delay: 220ms; }

@keyframes rr-loader-pass {
  0%, 62%, 100% { background: var(--border-strong); }
  16%, 40%      { background: var(--action-primary); }
}

.rr-loader--inverse .rr-loader__bar { background: rgba(255, 255, 255, 0.34); }
@keyframes rr-loader-pass-inverse {
  0%, 62%, 100% { background: rgba(255, 255, 255, 0.34); }
  16%, 40%      { background: var(--redrob-white); }
}
.rr-loader--inverse .rr-loader__bar { animation-name: rr-loader-pass-inverse; }

.rr-loader--muted .rr-loader__bar { animation-name: rr-loader-pass-muted; }
@keyframes rr-loader-pass-muted {
  0%, 62%, 100% { background: var(--border-subtle); }
  16%, 40%      { background: var(--ink-muted); }
}

.rr-loader__label { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.rr-loader__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reduced motion: no travel, one slow shared fade so the surface still reads
   as working rather than frozen. */
@media (prefers-reduced-motion: reduce) {
  .rr-loader__bar { animation: rr-loader-hold 1800ms var(--easing-standard) infinite; animation-delay: 0ms !important; }
  @keyframes rr-loader-hold {
    0%, 100% { background: var(--border-strong); }
    50%      { background: var(--action-primary); }
  }
}

/* Button and anything else that asked for a spinner gets the same device.
   The class name is kept so no consumer has to change. */
.rr-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 13px;
  line-height: 0;
  flex: none;
}
.rr-spinner::before,
.rr-spinner::after,
.rr-spinner > i { content: ''; }
.rr-spinner::before,
.rr-spinner::after {
  display: block;
  width: 0.19em;
  min-width: 2px;
  height: 0.6em;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.32;
  transform: skewX(calc(-1 * var(--tick-angle)));
  animation: rr-spinner-pass 1080ms var(--easing-standard) infinite;
}
.rr-spinner::after { animation-delay: 220ms; }
@keyframes rr-spinner-pass {
  0%, 62%, 100% { opacity: 0.32; }
  16%, 40%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rr-spinner::before, .rr-spinner::after { animation-duration: 1800ms; animation-delay: 0ms; }
}

/* ------------------------------------------------------------ IconButton */

.rr-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.rr-iconbtn:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink-primary); }
.rr-iconbtn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.rr-iconbtn--sm { width: var(--control-height-sm); height: var(--control-height-sm); }
.rr-iconbtn--md { width: var(--control-height-md); height: var(--control-height-md); }
.rr-iconbtn--lg { width: var(--control-height-lg); height: var(--control-height-lg); }
.rr-iconbtn--primary { background: var(--action-primary); color: var(--ink-on-brand); }
.rr-iconbtn--primary:hover:not(:disabled) { background: var(--action-primary-hover); color: var(--ink-on-brand); }
.rr-iconbtn--secondary { border-color: var(--border-strong); color: var(--ink-primary); }
.rr-iconbtn--round { border-radius: var(--radius-full); }

/* ----------------------------------------------------------------- Field */

.rr-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.rr-field__label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ink-primary);
}
.rr-field__req { color: var(--status-danger); margin-left: 2px; }
.rr-field__hint { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-field__error { font-size: 12px; line-height: 18px; color: var(--status-danger); font-weight: 500; }

.rr-control {
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink-primary);
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--field-radius);
  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}
.rr-control::placeholder { color: var(--ink-muted); }
.rr-control:hover:not(:disabled):not([aria-invalid="true"]) { border-color: var(--ink-secondary); }
.rr-control:focus {
  outline: none;
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px var(--surface-brand-subtle);
}
.rr-control[aria-invalid="true"] { border-color: var(--status-danger); }
.rr-control:disabled { background: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed; }
.rr-control--sm { height: var(--control-height-sm); padding: 0 var(--space-2); font-size: 13px; }
.rr-control--md { height: var(--control-height-md); padding: 0 var(--space-3); font-size: 14px; }
.rr-control--lg { height: var(--control-height-lg); padding: 0 var(--space-4); font-size: 15px; }

.rr-textarea { min-height: 96px; padding: var(--space-3); font-size: 14px; line-height: 22px; resize: vertical; height: auto; }

.rr-select-wrap { position: relative; display: block; }
/* The list version: a button that looks like the field, and a list drawn by the system */
.rr-select__button { display: flex; align-items: center; text-align: left; cursor: pointer; }
.rr-select__button:disabled { cursor: not-allowed; }
.rr-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-select__button--empty .rr-select__value { color: var(--ink-muted); }
.rr-select-wrap--list .rr-select-wrap__caret { transition: transform var(--duration-fast) var(--easing-standard); }
.rr-select-wrap--open .rr-select-wrap__caret { transform: rotate(180deg); }
.rr-select__list {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(420px, 90vw);
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none;
  background: var(--surface-raised, var(--surface-base)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, var(--shadow-md)); font-family: var(--font-sans);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  animation: rr-select-in var(--duration-fast) var(--easing-standard);
}
.rr-select__list[hidden] { display: none; }
.rr-select__list--up { top: auto; bottom: calc(100% + 6px); }
@keyframes rr-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rr-select__option {
  display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 20px; color: var(--ink-primary); cursor: pointer; user-select: none;
}
.rr-select__list--sm .rr-select__option { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.rr-select__option--active { background: var(--surface-sunken); }
.rr-select__option[aria-selected="true"] { font-weight: 600; }
.rr-select__option[aria-selected="true"] .rr-select__check { color: var(--action-primary); }
.rr-select__option[aria-disabled="true"] { color: var(--ink-muted); cursor: not-allowed; }
.rr-select__otext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rr-select__odetail { font-size: 12px; line-height: 17px; font-weight: 400; color: var(--ink-secondary); }
.rr-select__check { flex: none; display: inline-flex; width: 16px; height: 16px; }
@media (forced-colors: active) {
  .rr-select__option--active { outline: 2px solid Highlight; outline-offset: -2px; }
  .rr-select__list { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) { .rr-select__list { animation: none; } .rr-select-wrap__caret { transition: none; } }
.rr-select { appearance: none; padding-right: var(--space-8); cursor: pointer; }
.rr-select-wrap__caret {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  pointer-events: none;
  color: var(--ink-secondary);
}

/* ------------------------------------------------------- Checkbox, Radio */

.rr-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-primary);
  cursor: pointer;
}
.rr-choice--disabled { color: var(--ink-muted); cursor: not-allowed; }
.rr-choice__box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-base);
  color: var(--ink-on-brand);
  transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}
.rr-choice__box--radio { border-radius: var(--radius-full); }
.rr-choice__input { position: absolute; opacity: 0; width: 0; height: 0; }
.rr-choice__input:checked + .rr-choice__box,
.rr-choice__input:indeterminate + .rr-choice__box {
  background: var(--action-primary);
  border-color: var(--action-primary);
}
.rr-choice__input:focus-visible + .rr-choice__box { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-choice__input:disabled + .rr-choice__box { background: var(--surface-sunken); border-color: var(--border-subtle); }
.rr-choice__mark { width: 12px; height: 12px; opacity: 0; }
.rr-choice__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; opacity: 0; }
.rr-choice__input:checked + .rr-choice__box .rr-choice__mark,
.rr-choice__input:checked + .rr-choice__box .rr-choice__dot,
.rr-choice__input:indeterminate + .rr-choice__box .rr-choice__mark { opacity: 1; }
.rr-choice__text { display: flex; flex-direction: column; gap: 2px; }
.rr-choice__hint { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }

/* ---------------------------------------------------------------- Switch */

.rr-switch { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans); font-size: 14px; color: var(--ink-primary); cursor: pointer; }
.rr-switch--disabled { color: var(--ink-muted); cursor: not-allowed; }
.rr-switch__track {
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.rr-switch--sm .rr-switch__track { width: 32px; height: 20px; }
.rr-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--redrob-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--easing-settle);
}
.rr-switch--sm .rr-switch__thumb { width: 16px; height: 16px; }
.rr-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.rr-switch__input:checked + .rr-switch__track { background: var(--action-primary); }
.rr-switch__input:checked + .rr-switch__track .rr-switch__thumb { transform: translateX(16px); }
.rr-switch--sm .rr-switch__input:checked + .rr-switch__track .rr-switch__thumb { transform: translateX(12px); }
.rr-switch__input:focus-visible + .rr-switch__track { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-switch__input:disabled + .rr-switch__track { opacity: 0.5; }

/* ----------------------------------------------------------------- Badge */

.rr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.rr-badge--sm { height: 20px; padding: 0 var(--space-2); font-size: 11px; }
.rr-badge--md { height: 24px; padding: 0 var(--space-3); font-size: 12px; }
.rr-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

.rr-badge--subtle.rr-badge--neutral { background: var(--surface-sunken); color: var(--ink-secondary); }
.rr-badge--subtle.rr-badge--brand   { background: var(--blue-1); color: var(--blue-8); }
.rr-badge--subtle.rr-badge--success { background: var(--accent-green-1); color: var(--accent-green-5); }
.rr-badge--subtle.rr-badge--warning { background: var(--accent-orange-1); color: var(--accent-orange-5); }
.rr-badge--subtle.rr-badge--danger  { background: var(--accent-red-1); color: var(--accent-red-5); }
.rr-badge--subtle.rr-badge--info    { background: var(--accent-sky-1); color: var(--accent-sky-5); }

[data-theme="dark"] .rr-badge--subtle.rr-badge--brand   { background: var(--blue-9); color: var(--blue-3); }
[data-theme="dark"] .rr-badge--subtle.rr-badge--success { background: var(--accent-green-5); color: var(--accent-green-2); }
[data-theme="dark"] .rr-badge--subtle.rr-badge--warning { background: var(--accent-orange-5); color: var(--accent-orange-2); }
[data-theme="dark"] .rr-badge--subtle.rr-badge--danger  { background: var(--accent-red-5); color: var(--accent-red-2); }
[data-theme="dark"] .rr-badge--subtle.rr-badge--info    { background: var(--accent-sky-5); color: var(--accent-sky-2); }

.rr-badge--solid { color: var(--redrob-white); }
.rr-badge--solid.rr-badge--neutral { background: var(--gray-7); }
.rr-badge--solid.rr-badge--brand   { background: var(--action-primary); }
.rr-badge--solid.rr-badge--success { background: var(--accent-green-4); }
.rr-badge--solid.rr-badge--warning { background: var(--accent-orange-4); }
.rr-badge--solid.rr-badge--danger  { background: var(--accent-red-4); }
.rr-badge--solid.rr-badge--info    { background: var(--accent-sky-4); }

.rr-badge--outline { background: transparent; border-color: currentColor; }
.rr-badge--outline.rr-badge--neutral { color: var(--ink-secondary); }
.rr-badge--outline.rr-badge--brand   { color: var(--ink-brand); }
.rr-badge--outline.rr-badge--success { color: var(--status-success); }
.rr-badge--outline.rr-badge--warning { color: var(--status-warning); }
.rr-badge--outline.rr-badge--danger  { color: var(--status-danger); }
.rr-badge--outline.rr-badge--info    { color: var(--status-info); }

/* ------------------------------------------------------------------ Card */

.rr-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  font-family: var(--font-sans);
  color: var(--ink-primary);
  overflow: hidden;
}
.rr-card--feature {
  border-radius: var(--card-radius-feature);
  border-top-left-radius: 0;
  border-color: var(--border-strong);
}
.rr-card--feature .rr-card__body { padding: var(--space-6); gap: var(--space-3); }
.rr-card--feature .rr-card__slot { display: block; }
span.rr-card__title, span.rr-card__desc { display: block; }
.rr-card__title { font-size: 27px; line-height: 34px; letter-spacing: -0.018em; }
.rr-card--quiet { background: transparent; border-color: transparent; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.rr-card--quiet .rr-card__body { padding: var(--space-4) 0; }
.rr-card--interactive { cursor: pointer; transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.rr-card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.rr-card--interactive:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-card__media { display: block; width: 100%; background: var(--surface-sunken); }
.rr-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--card-padding); }
.rr-card--tight .rr-card__body { padding: var(--space-4); }
.rr-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-secondary);
}
.rr-card__title { margin: 0; font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.012em; }
.rr-card__desc { margin: 0; font-size: 13px; line-height: 21px; color: var(--ink-secondary); }
.rr-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* ----------------------------------------------------------------- Alert */

.rr-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  color: var(--ink-primary);
}
.rr-alert__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.rr-alert__body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.rr-alert__title { font-size: 14px; line-height: 20px; font-weight: 600; }
.rr-alert__text { font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.rr-alert--info    { background: var(--accent-sky-1);    border-color: var(--accent-sky-2);    }
.rr-alert--success { background: var(--accent-green-1);  border-color: var(--accent-green-2);  }
.rr-alert--warning { background: var(--accent-orange-1); border-color: var(--accent-orange-2); }
.rr-alert--danger  { background: var(--accent-red-1);    border-color: var(--accent-red-2);    }
.rr-alert--info .rr-alert__icon    { color: var(--accent-sky-4); }
.rr-alert--success .rr-alert__icon { color: var(--accent-green-4); }
.rr-alert--warning .rr-alert__icon { color: var(--accent-orange-4); }
.rr-alert--danger .rr-alert__icon  { color: var(--accent-red-4); }
.rr-alert--info, .rr-alert--success, .rr-alert--warning, .rr-alert--danger { color: var(--redrob-black); }
.rr-alert--info .rr-alert__text, .rr-alert--success .rr-alert__text,
.rr-alert--warning .rr-alert__text, .rr-alert--danger .rr-alert__text { color: var(--gray-8); }

/* On dark, a tinted panel inverts: the deep step carries the fill, the lightest the text. */
[data-theme="dark"] .rr-alert--info    { background: var(--accent-sky-5);    border-color: var(--accent-sky-4);    color: var(--accent-sky-1); }
[data-theme="dark"] .rr-alert--success { background: var(--accent-green-5);  border-color: var(--accent-green-4);  color: var(--accent-green-1); }
[data-theme="dark"] .rr-alert--warning { background: var(--accent-orange-5); border-color: var(--accent-orange-4); color: var(--accent-orange-1); }
[data-theme="dark"] .rr-alert--danger  { background: var(--accent-red-5);    border-color: var(--accent-red-4);    color: var(--accent-red-1); }
[data-theme="dark"] .rr-alert--info .rr-alert__text    { color: var(--accent-sky-2); }
[data-theme="dark"] .rr-alert--success .rr-alert__text { color: var(--accent-green-2); }
[data-theme="dark"] .rr-alert--warning .rr-alert__text { color: var(--accent-orange-2); }
[data-theme="dark"] .rr-alert--danger .rr-alert__text  { color: var(--accent-red-2); }
[data-theme="dark"] .rr-alert--info .rr-alert__icon    { color: var(--accent-sky-2); }
[data-theme="dark"] .rr-alert--success .rr-alert__icon { color: var(--accent-green-2); }
[data-theme="dark"] .rr-alert--warning .rr-alert__icon { color: var(--accent-orange-2); }
[data-theme="dark"] .rr-alert--danger .rr-alert__icon  { color: var(--accent-red-2); }
[data-theme="dark"] .rr-alert .rr-iconbtn { color: inherit; }
[data-theme="dark"] .rr-alert .rr-iconbtn:hover { background: rgba(255, 255, 255, 0.12); color: inherit; }

/* ------------------------------------------------------------------ Tabs */

.rr-tabs { font-family: var(--font-sans); }
.rr-tabs__list { display: flex; gap: var(--space-1); }
.rr-tabs--line .rr-tabs__list { border-bottom: 1px solid var(--border-subtle); gap: var(--space-5); }
.rr-tab {
  appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.rr-tab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); border-radius: var(--radius-xs); }
.rr-tabs--line .rr-tab { padding: var(--space-3) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rr-tabs--line .rr-tab:hover { color: var(--ink-primary); }
.rr-tabs--line .rr-tab[aria-selected="true"] { color: var(--ink-brand); border-bottom-color: var(--action-primary); }
.rr-tabs--pill .rr-tab { padding: 0 var(--space-4); height: 36px; border-radius: var(--radius-full); }
.rr-tabs--pill .rr-tab:hover { background: var(--surface-sunken); color: var(--ink-primary); }
.rr-tabs--pill .rr-tab[aria-selected="true"] { background: var(--action-primary); color: var(--ink-on-brand); }
.rr-tab__count {
  font-size: 11px;
  font-weight: 600;
  padding: 0 var(--space-2);
  height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--ink-secondary);
}
.rr-tabs--pill .rr-tab[aria-selected="true"] .rr-tab__count { background: var(--blue-8); color: var(--ink-on-brand); }

/* ---------------------------------------------------------------- Avatar */

.rr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  overflow: visible;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-on-brand);
  background: var(--action-primary);
  border-radius: var(--radius-full);
}
/* A disc and a square of the same declared size do not read as the same size, and a
   person (circle) and an organization (square) sit in the same list. The circle keeps
   its true 40px so it still lines up with the 40px controls beside it; the square,
   which is the exception, carries the correction. 0.975 is the convention for this
   overshoot, not a measurement - perceived size is not something this file can measure,
   and saying so is more useful than a number that pretends otherwise. */
.rr-avatar--square { border-radius: var(--radius-md); transform: scale(0.975); }
.rr-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.rr-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.rr-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.rr-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.rr-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rr-avatar__status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 30%;
  min-width: 8px;
  min-height: 8px;
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-base);
}
.rr-avatar__status--online { background: var(--status-success); }
.rr-avatar__status--busy { background: var(--status-danger); }
.rr-avatar__status--away { background: var(--status-warning); }
.rr-avatar__status--offline { background: var(--gray-5); }
.rr-avatar-group { display: inline-flex; }
.rr-avatar-group .rr-avatar { border: 2px solid var(--surface-base); margin-left: calc(var(--space-2) * -1); }
.rr-avatar-group .rr-avatar:first-child { margin-left: 0; }

/* ----------------------------------------------------------------- Table */

/* overflow-x, not hidden. Seven hugging columns exceed a 880px container and the old
   rule cut the last one off at the edge with no way to reach it: a table quietly losing
   data at a laptop width. The radius still clips the corners because overflow-y is
   hidden, and the region is focusable so a keyboard can scroll it. */
.rr-table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface-raised);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.rr-table-wrap::-webkit-scrollbar { height: 10px; }
.rr-table-wrap::-webkit-scrollbar-track { background: transparent; }
.rr-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px;
  border: 3px solid var(--surface-raised); }
.rr-table-wrap:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; color: var(--ink-primary); }
/* The caption is a title, not a row: its own band on the raised surface, with the
   sunken header band starting cleanly below it. */
.rr-table caption {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  background: var(--surface-raised);
}
.rr-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  background: var(--surface-sunken);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.rr-table caption + thead th { border-top: 1px solid var(--border-subtle); }
.rr-table thead:first-child th { border-top: none; }
/* Every column hugs its content; one column takes the slack. A hugging column
   sizes to its longest CELL, so it must not wrap - prose goes in the grow
   column, and any other column that needs to wrap passes wrap: true. */
.rr-table th.rr-table--hug { width: 1%; }
.rr-table .rr-table--hug { white-space: nowrap; }
/* 24px so a row with a chip in it is the same height as a row without one. */
.rr-table td { padding: var(--table-cell-y) var(--space-4); line-height: 24px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.rr-table--dense th { padding: var(--space-2) var(--space-4); }
.rr-table--dense td { padding: var(--space-2) var(--space-4); }
.rr-table tbody tr:last-child td { border-bottom: none; }
.rr-table tbody tr:hover td { background: var(--surface-sunken); }
.rr-table .rr-table--num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; }
/* A chip in a cell centers on the row, not on the text baseline. */
.rr-table td > .rr-badge, .rr-table td > .rr-task { vertical-align: middle; }

/* ----------------------------------------------------------------- Modal */

.rr-modal-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--overlay-scrim);
}
.rr-modal {
  width: 100%;
  max-width: 480px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  color: var(--ink-primary);
  overflow: hidden;
}
.rr-modal__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.rr-modal__title { margin: 0; font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; flex: 1; }
.rr-modal__body { padding: var(--space-3) var(--space-5) var(--space-5); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.rr-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

/* --------------------------------------------------------------- Tooltip */

.rr-tooltip { position: relative; display: inline-flex; }
.rr-tooltip__bubble {
  position: absolute;
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--redrob-black);
  color: var(--redrob-white);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.rr-tooltip:hover .rr-tooltip__bubble,
.rr-tooltip:focus-within .rr-tooltip__bubble,
.rr-tooltip--open .rr-tooltip__bubble { opacity: 1; }
[data-theme="dark"] .rr-tooltip__bubble { background: var(--gray-1); color: var(--redrob-black); }
.rr-tooltip__bubble--top { bottom: 100%; left: 50%; transform: translate(-50%, calc(var(--space-2) * -1)); }
.rr-tooltip__bubble--bottom { top: 100%; left: 50%; transform: translate(-50%, var(--space-2)); }
.rr-tooltip__bubble--left { right: 100%; top: 50%; transform: translate(calc(var(--space-2) * -1), -50%); }
.rr-tooltip__bubble--right { left: 100%; top: 50%; transform: translate(var(--space-2), -50%); }

/* ----------------------------------------------------------------- Toast */

.rr-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 360px;
  max-width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  color: var(--ink-primary);
}
.rr-toast__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.rr-toast--success .rr-toast__icon { color: var(--status-success); }
.rr-toast--danger .rr-toast__icon { color: var(--status-danger); }
.rr-toast--warning .rr-toast__icon { color: var(--status-warning); }
.rr-toast--info .rr-toast__icon { color: var(--status-info); }
.rr-toast__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.rr-toast__title { font-size: 14px; line-height: 20px; font-weight: 600; }
.rr-toast__text { font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-toast__action { align-self: flex-start; margin-top: var(--space-1); }

/* -------------------------------------------------------------- Progress */

.rr-progress { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-2); }
.rr-progress__head { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; }
.rr-progress__label { color: var(--ink-primary); font-weight: 500; }
.rr-progress__value { color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-progress__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.rr-progress--sm .rr-progress__track { height: 4px; }
.rr-progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--action-primary);
  transition: width var(--duration-slow) var(--easing-standard);
}
.rr-progress--success .rr-progress__bar { background: var(--status-success); }
.rr-progress--warning .rr-progress__bar { background: var(--status-warning); }
.rr-progress--danger .rr-progress__bar { background: var(--status-danger); }
.rr-progress--indeterminate .rr-progress__bar { width: 40%; animation: rr-slide 1.4s ease-in-out infinite; }
@keyframes rr-slide {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rr-progress--indeterminate .rr-progress__bar { animation: none; width: 100%; opacity: 0.6; }
}

/* ------------------------------------------------------------ Pagination */

.rr-pagination { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); }
.rr-page {
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.rr-page:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink-primary); }
.rr-page:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-page[aria-current="page"] { background: var(--action-primary); color: var(--ink-on-brand); font-weight: 600; }
.rr-page:disabled { opacity: 0.4; cursor: not-allowed; }
.rr-page__gap { min-width: 24px; text-align: center; color: var(--ink-muted); }

/* ------------------------------------------------------------ Breadcrumb */

.rr-breadcrumb { font-family: var(--font-sans); font-size: 13px; line-height: 20px; }
.rr-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.rr-breadcrumb__link { color: var(--ink-secondary); text-decoration: none; border-radius: var(--radius-xs); }
.rr-breadcrumb__link:hover { color: var(--ink-brand); text-decoration: underline; }
.rr-breadcrumb__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-breadcrumb__sep { color: var(--ink-muted); }
.rr-breadcrumb__current { color: var(--ink-primary); font-weight: 600; }

/* ---------------------------------------------------------------- Menu */

.rr-menu { position: relative; display: inline-flex; }
.rr-menu__list {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 3;
  min-width: 200px;
  padding: var(--space-2);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}
.rr-menu__list--right { left: auto; right: 0; }
.rr-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-primary);
  text-align: left;
  cursor: pointer;
}
.rr-menu__item:hover:not(:disabled) { background: var(--surface-sunken); }
.rr-menu__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.rr-menu__item:disabled { color: var(--ink-muted); cursor: not-allowed; }
.rr-menu__item--danger { color: var(--status-danger); }
.rr-menu__icon { display: inline-flex; width: 16px; height: 16px; color: var(--ink-secondary); }
.rr-menu__item--danger .rr-menu__icon { color: inherit; }
.rr-menu__label { flex: 1; }
.rr-menu__shortcut { font-size: 12px; color: var(--ink-muted); }
.rr-menu__sep { height: 1px; margin: var(--space-2) 0; background: var(--border-subtle); }

/* ------------------------------------------------------------ Combobox */

.rr-combo { position: relative; }
.rr-combo__input { cursor: text; }
.rr-combo__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 3;
  max-height: 224px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.rr-combo__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-primary);
  cursor: pointer;
}
.rr-combo__option--active { background: var(--surface-sunken); }
.rr-combo__option--selected { color: var(--ink-brand); font-weight: 600; }
.rr-combo__option-desc { flex: 1; font-size: 12px; color: var(--ink-secondary); font-weight: 400; }
.rr-combo__check { display: inline-flex; color: var(--action-primary); }
.rr-combo__empty { padding: var(--space-3); font-size: 13px; color: var(--ink-secondary); }

/* ---------------------------------------------------------- DatePicker */

.rr-datepicker { position: relative; }
.rr-cal {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 3;
  width: 280px;
  padding: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}
.rr-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rr-cal__month { font-size: 14px; font-weight: 600; color: var(--ink-primary); }
.rr-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: var(--space-3); }
.rr-cal__day {
  height: 34px;
  font-variant-numeric: tabular-nums;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-primary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.rr-cal__day:hover { background: var(--surface-sunken); }
.rr-cal__day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.rr-cal__day--today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.rr-cal__day--selected { background: var(--action-primary); color: var(--ink-on-brand); font-weight: 600; }
.rr-cal__day--selected:hover { background: var(--action-primary-hover); }
.rr-cal__foot { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }

/* ---------------------------------------------------------- FileUpload */

.rr-upload { display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-sans); }
.rr-upload__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-8) var(--space-5);
  /* The dashed border and the centered label are the two things this system
     removes everywhere else - EmptyState was de-centered for exactly this
     reason. They stay here because a drop zone is not a block of copy, it is a
     target: the dash says the edge is a boundary you cross rather than a
     container, and centering says the whole area is live, not just the words.
     It is the one centered thing in the system and this is the argument for it. */
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-align: center;
  transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
}
.rr-upload__zone--over { border-color: var(--action-primary); background: var(--surface-brand-subtle); }
.rr-upload__zone--invalid { border-color: var(--status-danger); }
.rr-upload__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rr-upload__icon { width: 24px; height: 24px; color: var(--ink-brand); }
.rr-upload__title { font-size: 14px; font-weight: 600; color: var(--ink-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rr-upload__hint { font-size: 13px; color: var(--ink-secondary); }
.rr-upload__meta { font-size: 12px; color: var(--ink-muted); }
.rr-upload__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-upload__file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 13px;
}
.rr-upload__file-name { flex: 1; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-upload__file-size { color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Skeleton */

.rr-skeleton {
  display: block;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.rr-skeleton--text { height: 12px; border-radius: var(--radius-full); }
.rr-skeleton--circle { border-radius: var(--radius-full); width: 40px; height: 40px; }
.rr-skeleton--rect { height: 120px; border-radius: var(--radius-lg); }
.rr-skeleton-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--surface-raised), transparent);
  animation: rr-shimmer 1.4s ease-in-out infinite;
}
@keyframes rr-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rr-skeleton::after { animation: none; } }

/* ---------------------------------------------------------- EmptyState */

/* Left, not centered. 00-narrative.md says structure comes from edges, Hero and Band
   refuse a centering prop, and an empty state centered inside a left-aligned panel was
   the one thing on a real screen that looked imported from another system. */
.rr-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: left;
  font-family: var(--font-sans);
}
/* compact was 400px tall in a side panel, taller than the live panel beside it */
.rr-empty--compact { padding: var(--space-5) var(--space-4); gap: var(--space-2); }
.rr-empty--compact .rr-empty__title { font-size: 17px; line-height: 24px; }
.rr-empty--compact .rr-empty__icon { width: 32px; height: 32px; }
.rr-empty--compact .rr-empty__icon svg { width: 17px; height: 17px; }
.rr-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--surface-brand-subtle);
  color: var(--ink-brand);
}
.rr-empty__icon svg { width: 22px; height: 22px; }
.rr-empty__title { margin: 0; font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-primary); }
.rr-empty__desc { margin: 0; max-width: 42ch; font-size: 13px; line-height: 21px; color: var(--ink-secondary); }
.rr-empty__actions { display: flex; gap: var(--space-3); margin-top: var(--space-1); }

/* ----------------------------------------------------------- Accordion */

.rr-accordion { font-family: var(--font-sans); border-top: 1px solid var(--border-subtle); }
.rr-accordion__item { border-bottom: 1px solid var(--border-subtle); }
.rr-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-primary);
  text-align: left;
  cursor: pointer;
}
.rr-accordion__trigger:hover { color: var(--ink-brand); }
.rr-accordion__trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-xs); }
.rr-accordion__trigger:disabled { color: var(--ink-muted); cursor: not-allowed; }
.rr-accordion__label { flex: 1; }
.rr-accordion__meta { font-size: 13px; font-weight: 400; color: var(--ink-secondary); }
.rr-accordion__chevron { display: inline-flex; color: var(--ink-secondary); transition: transform var(--duration-base) var(--easing-settle); }
.rr-accordion__chevron--open { transform: rotate(180deg); }
.rr-accordion__panel { padding: 0 0 var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
@media (prefers-reduced-motion: reduce) { .rr-accordion__chevron { transition: none; } }

/* ------------------------------------------------------------- Stepper */

.rr-stepper { font-family: var(--font-sans); }
.rr-stepper__list { display: flex; list-style: none; margin: 0; padding: 0; }
.rr-stepper__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); flex: 1; padding-right: var(--space-4); }
.rr-stepper__step:last-child { flex: none; padding-right: 0; }
.rr-stepper__marker {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
}
.rr-stepper__text { display: flex; flex-direction: column; gap: 2px; }
.rr-stepper__label { font-size: 14px; font-weight: 600; color: var(--ink-secondary); }
.rr-stepper__desc { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.rr-stepper__line {
  position: absolute;
  top: 14px;
  left: calc(28px + var(--space-2));
  right: var(--space-2);
  height: 1px;
  background: var(--border-subtle);
}
.rr-stepper__step--done .rr-stepper__marker { background: var(--action-primary); border-color: var(--action-primary); color: var(--ink-on-brand); }
.rr-stepper__step--done .rr-stepper__label { color: var(--ink-primary); }
.rr-stepper__step--done .rr-stepper__line { background: var(--action-primary); }
.rr-stepper__step--current .rr-stepper__marker { border-color: var(--action-primary); color: var(--ink-brand); box-shadow: 0 0 0 3px var(--surface-brand-subtle); }
.rr-stepper__step--current .rr-stepper__label { color: var(--ink-primary); }
.rr-stepper--vertical .rr-stepper__list { flex-direction: column; gap: var(--space-5); }
.rr-stepper--vertical .rr-stepper__step { flex-direction: row; align-items: flex-start; gap: var(--space-3); padding-right: 0; padding-bottom: var(--space-2); }
.rr-stepper--vertical .rr-stepper__text { padding-top: 3px; }
.rr-stepper--vertical .rr-stepper__line { top: 32px; bottom: calc(var(--space-2) * -1); left: 14px; right: auto; width: 1px; height: auto; }

/* ---------------------------------------------------------------- Stat */

.rr-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  font-family: var(--font-sans);
  min-width: 220px;
}
.rr-stat__label { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-stat__value { font-size: 40px; line-height: 46px; font-weight: 700; color: var(--ink-primary); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rr-stat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-1); }
.rr-stat__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; font-weight: 600; }
.rr-stat__delta--good { color: var(--status-success); }
.rr-stat__delta--bad { color: var(--status-danger); }
.rr-stat__delta--flat { color: var(--ink-secondary); }
.rr-stat__arrow { font-size: 14px; line-height: 1; }
.rr-stat__period { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: var(--space-1); }
.rr-stat__spark { flex: none; overflow: visible; }
.rr-stat__spark-line { stroke: var(--gray-5); }
.rr-stat__spark-dot { fill: var(--action-primary); stroke: var(--surface-raised); stroke-width: 2; }

/* -------------------------------------------------------------- Drawer */

.rr-drawer-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--overlay-scrim);
}
.rr-drawer {
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  background: var(--surface-base);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  color: var(--ink-primary);
}
.rr-drawer--right { margin-left: auto; border-left: 1px solid var(--border-subtle); }
.rr-drawer--left { margin-right: auto; border-right: 1px solid var(--border-subtle); }
.rr-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.rr-drawer__titles { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.rr-drawer__title { margin: 0; font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; }
.rr-drawer__desc { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); font-size: 14px; line-height: 22px; }
.rr-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

/* =================================================================
   Foundations added in the 2026 refresh: surfaces, density, motion
   and accessibility infrastructure. Nothing here touches the logo,
   the brand colors or Pretendard.
   ================================================================= */

/* ---- Soft surfaces: a wash, optionally with grain ----------------
   Atmosphere only. Never put a wash behind body copy - it goes on
   the ground, under a card, or behind a display heading. */

.rr-wash { position: relative; background-image: var(--wash-quiet); background-repeat: no-repeat; }
.rr-wash--brand { background-image: var(--wash-brand); }
.rr-wash--deep  { background-image: var(--wash-deep); }
.rr-wash--edge  { background-image: var(--wash-edge); }
[data-theme="dark"] .rr-wash,
[data-theme="dark"] .rr-wash--brand { background-image: var(--wash-deep); }

/* Fine grain. It is what keeps a wash from reading as a generated
   mesh: a texture, at 3-4% over the color, never on its own. */
.rr-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  /* Under the content, not over it. As a positioned pseudo-element at z-index
     auto this painted above every in-flow child, so the grain sat on the body
     copy and on the screenshots as well as on the ground - measured at 6/255,
     invisible but real, and the wrong side of "atmosphere goes on the ground".
     -1 is safe because .rr-grain isolates, so it cannot fall behind the page. */
  z-index: -1;
}
[data-theme="dark"] .rr-grain::before { opacity: 0.06; }
.rr-grain { position: relative; isolation: isolate; }

/* ---- Material: a floating surface over content ------------------- */

.rr-material {
  background: var(--surface-material);
  backdrop-filter: saturate(140%) blur(12px);
}
@supports not (backdrop-filter: blur(1px)) {
  .rr-material { background: var(--surface-raised); }
}

/* ---- Density ------------------------------------------------------
   One attribute on a container switches the whole subtree. Only the
   component tokens move; type, color and radii stay as they are. */

[data-density="compact"] {
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --control-height-lg: 40px;
  --card-padding: 16px;
  --table-cell-y: 8px;
  --section-gap: 16px;
}

/* ---- Accessibility infrastructure -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rr-btn, .rr-iconbtn, .rr-control, .rr-choice__box, .rr-switch__track,
  .rr-switch__thumb, .rr-card--interactive, .rr-accordion__chevron,
  .rr-progress__bar, .rr-tooltip__bubble, .rr-menu__item {
    transition-duration: 1ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .rr-material { background: var(--surface-raised); backdrop-filter: none; }
  .rr-wash, .rr-wash--brand, .rr-wash--deep, .rr-wash--edge { background-image: none; }
  .rr-grain::before { display: none; }
}

@media (forced-colors: active) {
  .rr-btn, .rr-iconbtn, .rr-control, .rr-card, .rr-menu__list, .rr-cal, .rr-combo__list { border: 1px solid ButtonBorder; }
  .rr-btn--primary, .rr-badge--solid { forced-color-adjust: none; }
  .rr-choice__input:checked + .rr-choice__box { background: Highlight; border-color: Highlight; }
  .rr-wash, .rr-grain::before, .rr-stat__spark { display: none; }
  .rr-progress__bar, .rr-switch__input:checked + .rr-switch__track { background: Highlight; }
}

/* ---- Emphasis: the one action a view is about --------------------- */

.rr-btn--emphasis {
  box-shadow: 0 0 0 4px var(--surface-brand-subtle);
}
.rr-btn--emphasis:hover:not(:disabled) { box-shadow: 0 0 0 6px var(--surface-brand-subtle); }

/* =================================================================
   AI surfaces
   ================================================================= */

/* ---- Message ------------------------------------------------------ */

.rr-msg { display: flex; gap: var(--space-3); font-family: var(--font-sans); max-width: 72ch; }
.rr-msg__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-primary);
}
.rr-msg__author { font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.rr-msg__content { margin: 0; }
.rr-msg__footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.rr-msg--user .rr-msg__bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.rr-msg--assistant .rr-msg__bubble {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--border-ai);
  border-radius: var(--radius-lg);
  background-color: var(--surface-ai);
  background-image: var(--wash-quiet);
}
[data-theme="dark"] .rr-msg--assistant .rr-msg__bubble { background-image: var(--wash-deep); }
.rr-msg__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--action-primary);
  color: var(--ink-on-brand);
  font-size: 11px;
  font-weight: 700;
}
.rr-msg--user .rr-msg__mark { background: var(--gray-6); }

/* ---- Streaming ---------------------------------------------------- */

.rr-streaming { display: inline; font-family: var(--font-sans); }
.rr-streaming__caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  border-radius: 2px;
  background: var(--action-primary);
  animation: rr-blink 1.1s steps(2, start) infinite;
}
@keyframes rr-blink { 50% { opacity: 0.15; } }
.rr-streaming__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink-secondary);
}
.rr-streaming__stop { margin-left: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .rr-streaming__caret { animation: none; } }

/* ---- Citation ------------------------------------------------------ */

.rr-cite--static { cursor: default; }
.rr-cite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-ai);
  border-radius: var(--radius-full);
  background: var(--surface-brand-subtle);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-brand);
  text-decoration: none;
  vertical-align: 2px;
  cursor: pointer;
}
.rr-cite:hover { background: var(--blue-2); }
[data-theme="dark"] .rr-cite:hover { background: var(--blue-9); }
.rr-cite:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-cite__index { font-variant-numeric: tabular-nums; }
.rr-cite__source { font-weight: 500; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Tool call ----------------------------------------------------- */

.rr-action {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: var(--font-sans);
  overflow: hidden;
}
.rr-action__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-primary);
  text-align: left;
  cursor: pointer;
}
.rr-action__head:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(var(--focus-ring-width) * -1); }
.rr-action__icon { display: inline-flex; width: 16px; height: 16px; color: var(--ink-secondary); }
.rr-action__name { font-weight: 600; font-family: var(--font-mono); font-size: 13px; }
.rr-action__summary { flex: 1; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-action__state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 600; }
.rr-action__state--running { color: var(--ink-brand); }
.rr-action__state--done { color: var(--status-success); }
.rr-action__state--error { color: var(--status-danger); }
.rr-action__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-secondary);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---- Confidence ----------------------------------------------------- */

.rr-confidence { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 12px; }
.rr-confidence__bars { display: inline-flex; gap: 2px; }
.rr-confidence__bar { width: 6px; height: 12px; border-radius: 2px; background: var(--border-strong); }
.rr-confidence__bar--on { background: currentColor; }
.rr-confidence--high { color: var(--status-success); }
.rr-confidence--medium { color: var(--status-warning); }
.rr-confidence--low { color: var(--status-danger); }
.rr-confidence__label { font-weight: 600; }
.rr-confidence__note { color: var(--ink-secondary); font-weight: 400; }

/* ---- Permission gate ------------------------------------------------ */

.rr-approval {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: var(--font-sans);
  max-width: 560px;
}
.rr-approval__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.rr-approval__icon { flex: none; width: 20px; height: 20px; color: var(--status-warning); margin-top: 2px; }
.rr-approval__title { font-size: 14px; font-weight: 600; color: var(--ink-primary); }
.rr-approval__what { font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-approval__detail {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-primary);
  overflow-x: auto;
}
.rr-approval__actions { display: flex; gap: var(--space-2); }

/* ---- Agent timeline -------------------------------------------------- */

.rr-timeline { font-family: var(--font-sans); }
.rr-timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rr-timeline__step { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.rr-timeline__step:last-child { padding-bottom: 0; }
.rr-timeline__rail {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
}
.rr-timeline__dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}
.rr-timeline__line { flex: 1; width: 1px; margin-top: var(--space-1); background: var(--border-subtle); }
.rr-timeline__step--done .rr-timeline__dot { background: var(--status-success); }
.rr-timeline__step--active .rr-timeline__dot { background: var(--action-primary); box-shadow: 0 0 0 3px var(--surface-brand-subtle); }
.rr-timeline__step--error .rr-timeline__dot { background: var(--status-danger); }
.rr-timeline__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-1); }
.rr-timeline__label { font-size: 14px; font-weight: 600; color: var(--ink-primary); }
.rr-timeline__step--todo .rr-timeline__label { color: var(--ink-secondary); font-weight: 500; }
.rr-timeline__meta { font-size: 12px; color: var(--ink-muted); }
.rr-timeline__detail { font-size: 13px; line-height: 20px; color: var(--ink-secondary); }

/* ---- Prompt suggestions ---------------------------------------------- */

.rr-prompts { display: flex; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-sans); }
.rr-prompts__item { display: inline-flex; }
.rr-prompt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
}
.rr-prompt:hover { border-color: var(--border-strong); background: var(--surface-brand-subtle); }
.rr-prompt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); }
.rr-prompt__icon { display: inline-flex; width: 14px; height: 14px; color: var(--ink-brand); }

/* ---- Composer ---------------------------------------------------------- */

.rr-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rr-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  box-sizing: border-box;
  position: relative;
}
/* Inside a composer the model panel anchors to the whole field, so it opens
   clear of what the person is writing rather than over it. */
.rr-composer .rr-model { position: static; }
.rr-composer .rr-model[data-align="end"] .rr-model__panel { right: 0; }
.rr-composer:focus-within { border-color: var(--border-strong); }
.rr-composer__context { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-1); }
.rr-composer__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-base); font-size: 12px; font-weight: 600; color: var(--ink-secondary);
}
.rr-composer__chip svg { color: var(--ink-brand); }
.rr-composer__input {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-primary);
  box-sizing: border-box;
}
.rr-composer__input::placeholder { color: var(--ink-muted); }
.rr-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rr-composer__lead, .rr-composer__trail { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.rr-composer__tools { display: inline-flex; align-items: center; min-width: 0; }
.rr-composer__tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: transparent; color: var(--ink-secondary); cursor: pointer;
}
.rr-composer__tool:hover { background: var(--surface-sunken); color: var(--ink-primary); }
.rr-composer__send {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-full);
  background: var(--action-primary); color: var(--ink-on-brand); cursor: pointer;
}
.rr-composer__send:hover:not(:disabled) { background: var(--action-primary-hover); }
.rr-composer__send:disabled { background: var(--surface-sunken); color: var(--ink-muted); cursor: default; }
.rr-composer__send--stop { background: var(--ink-primary); color: var(--surface-base); }
.rr-composer__tool:focus-visible,
.rr-composer__send:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ---- Model picker ------------------------------------------------------ */

.rr-model { position: relative; display: inline-flex; min-width: 0; font-family: var(--font-sans); }
.rr-model__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 32px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.rr-model__trigger:hover, .rr-model__trigger[aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink-primary); }
.rr-model__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-model__trig-name { font-weight: 600; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; }
.rr-model__trig-effort { color: var(--ink-secondary); }
.rr-model__trig-caret { display: inline-flex; color: var(--ink-muted); }
.rr-model__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 3;
  width: min(520px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-sizing: border-box;
}
.rr-model[data-placement="top"] .rr-model__panel { top: auto; bottom: calc(100% + var(--space-3)); }
.rr-model[data-align="end"] .rr-model__panel { left: auto; right: calc(var(--space-1) * -1); }
.rr-model__ask { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-3); }
.rr-model__head { display: flex; flex-direction: column; gap: 2px; }
.rr-model__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-primary); letter-spacing: -0.005em; }
.rr-model__meta { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-model__list { display: flex; flex-direction: column; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; }
.rr-model__item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--ink-primary);
  cursor: pointer;
}
.rr-model__item { position: relative; }
.rr-model__item + .rr-model__item::before {
  content: ''; position: absolute; top: 0; left: var(--space-2); right: var(--space-2);
  height: 1px; background: var(--border-subtle);
}
.rr-model__item:hover, .rr-model__item[aria-selected="true"] { background: var(--surface-sunken); }
.rr-model__item:hover::before, .rr-model__item[aria-selected="true"]::before,
.rr-model__item:hover + .rr-model__item::before,
.rr-model__item[aria-selected="true"] + .rr-model__item::before { display: none; }
.rr-model__item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(var(--focus-ring-width) * -1); }
.rr-model__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--surface-sunken); font-size: 12px; font-weight: 700; color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.rr-model__item:first-child .rr-model__rank { background: var(--action-primary); color: var(--ink-on-brand); }
.rr-model__item:hover .rr-model__rank, .rr-model__item[aria-selected="true"] .rr-model__rank { box-shadow: 0 0 0 1px var(--border-subtle); }
.rr-model__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr-model__name { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 20px; font-weight: 600; }
.rr-model__on { font-weight: 400; color: var(--ink-secondary); }
.rr-model__check { display: inline-flex; align-self: center; color: var(--action-primary); }
.rr-model__effort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.rr-model__steps { display: inline-flex; gap: 2px; }
.rr-model__steps > span { width: 4px; height: 10px; border-radius: 1px; background: var(--border-subtle); }
.rr-model__steps > span.is-on { background: var(--action-primary); }
.rr-model__why { font-size: 13px; line-height: 19px; color: var(--ink-primary); }
.rr-model__price { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rr-model__per { font-weight: 400; font-size: 12px; color: var(--ink-secondary); }
.rr-model__basis { font-size: 12px; line-height: 18px; color: var(--ink-secondary); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.rr-model__basis summary { cursor: pointer; color: var(--ink-primary); font-weight: 600; }
.rr-model__basis summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-model__basis > div { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.rr-model__basis p { margin: 0; }
/* On a phone the panel is a sheet across the bottom of the screen, whatever
   the trigger's position: an anchored popover would run off one edge. */
@media (max-width: 560px) {
  .rr-model .rr-model__panel,
  .rr-model[data-placement] .rr-model__panel {
    position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; width: auto;
    max-height: calc(100vh - 32px);
  }
  .rr-model__ask { grid-template-columns: 1fr; }
}

/* =================================================================
   Marks of authorship: the things that keep this from reading as a
   generated template. Each is derived from the brand, not from a
   trend - the tick is the logo's own 40 degrees.
   ================================================================= */

/* ---- The tick: the brand's rake, at label size --------------------- */

.rr-tick {
  flex: none;
  display: inline-block;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--action-primary);
  transform: rotate(var(--tick-angle));
}
.rr-tick--muted { background: var(--border-strong); }
.rr-tick--lg { height: 18px; width: 3px; }

/* A section marker: the tick, a sentence-case label in Pretendard, then a
   hairline that runs
   to the end of the row. Editorial, and nothing like an eyebrow. */
.rr-section-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-secondary);
}
/* 35-korean.md sets the Korean floor at 13px: 12px Hangul is below the size at which the
   jamo separate cleanly, so the section mark takes its own step rather than the Latin one. */
:lang(ko) .rr-section-mark,
.rr-section-mark:lang(ko) { font-size: 13px; line-height: 20px; }
.rr-section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ---- Edge light: a highlight where a surface catches the light ----- */

[data-theme="dark"] .rr-edge-light { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.rr-edge-light { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ---- Kinetic wash: opt-in, slow enough to notice only if you stare - */

.rr-wash--kinetic {
  background-size: 180% 180%;
  animation: rr-drift 28s ease-in-out infinite alternate;
}
@keyframes rr-drift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 60%; }
}
@media (prefers-reduced-motion: reduce) { .rr-wash--kinetic { animation: none; } }

/* ---- Overlap: depth from geometry rather than blur ----------------- */

.rr-overlap { margin-top: calc(var(--space-10) * -1); position: relative; z-index: 1; }

/* ---- Figures ------------------------------------------------------- */

.rr-numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; }

/* ------------------------------------------------- Voice: the serif layer */
/* Newsreader sets Latin, Nanum Myeongjo sets Korean. Neither face carries the
   other's script, so the fallback order in --font-serif does the switching. */

.rr-voice-1,
.rr-voice-2,
.rr-voice-quote,
.rr-voice-lede {
  font-family: var(--font-serif);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: balance;
}
/* The two display sizes take Newsreader's display cut: the optical size axis
   instanced at 52, which is the grade 64px and 40px both want. Rendered against
   the text cut at 64px the difference is not subtle - the text cut is drawn for
   18px, and above about 30px its hairlines read heavy and its serifs blunt. One
   file covers both sizes; instanced at 64 and at 40 separately the two are
   indistinguishable, so the system carries one. The fallback keeps this layer
   working before tokens.css regenerates. See 30-typography.md. */
.rr-voice-1    { font-family: var(--font-serif-display, 'Newsreader Display', Newsreader, 'Nanum Myeongjo', Georgia, serif); font-size: 64px; line-height: 66px; font-weight: 400; letter-spacing: -0.022em; }
.rr-voice-2    { font-family: var(--font-serif-display, 'Newsreader Display', Newsreader, 'Nanum Myeongjo', Georgia, serif); font-size: 40px; line-height: 48px; font-weight: 400; letter-spacing: -0.015em; }
.rr-voice-quote{ font-size: 23px; line-height: 34px; font-weight: 400; letter-spacing: -0.004em; font-style: italic; }
.rr-voice-lede { font-size: 19px; line-height: 31px; font-weight: 400; letter-spacing: -0.002em; color: var(--ink-secondary); }

/* Korean optical correction. Hangul sits taller on the body than Latin caps,
   and Myeongjo more so than Wanted Sans, so each script gets its own size. */
:lang(ko).rr-voice-1,    [lang="ko"] .rr-voice-1    { font-size: 56px; line-height: 74px; letter-spacing: -0.01em; }
:lang(ko).rr-voice-2,    [lang="ko"] .rr-voice-2    { font-size: 35px; line-height: 52px; letter-spacing: -0.006em; }
:lang(ko).rr-voice-quote,[lang="ko"] .rr-voice-quote{ font-size: 21px; line-height: 36px; font-style: normal; letter-spacing: 0; }
:lang(ko).rr-voice-lede, [lang="ko"] .rr-voice-lede { font-size: 18px; line-height: 32px; letter-spacing: 0; }

/* Korean in the system face. Same rule, one step of line height more. */
:lang(ko).rr-kr,  [lang="ko"] .rr-kr { font-family: var(--font-sans-kr); }
[lang="ko"] { word-break: keep-all; overflow-wrap: break-word; }

/* --------------------------------------------------------------- Statement */

.rr-statement { display: flex; flex-direction: column; gap: var(--space-5); }
/* The measure lives on the type, not the container - a ch on the container
   resolves against the container's 15px, which is not the size that is set. */
.rr-statement .rr-voice-1 { max-width: 19ch; }
.rr-statement .rr-voice-2 { max-width: 24ch; }
.rr-statement--wide .rr-voice-1 { max-width: 26ch; }
.rr-statement--wide .rr-voice-2 { max-width: 32ch; }
.rr-statement__lede { max-width: 44ch; }
.rr-statement__mark { display: flex; align-items: center; gap: var(--space-3); }

/* ------------------------------------------------------------------- Quote */

.rr-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-6);
  border-left: 2px solid var(--action-primary);
}
.rr-quote .rr-voice-quote { max-width: 34ch; }
.rr-quote--plain { border-left: 0; padding-left: 0; }
.rr-quote__cite {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink-primary);
}
.rr-quote__role { font-weight: 400; color: var(--ink-muted); }

/* ------------------------------------------------- MarkReveal: the splash */
/* The one place the logo is allowed to move. The artwork is never redrawn,
   recolored, rotated or distorted - it is uncovered along a 40 degree edge, in
   the direction the light travels, and the light rides on that edge. 16.8% is
   the horizontal run of a 40 degree line across the lockup's own height. */

.rr-reveal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-base);
}
.rr-reveal--dark { background: var(--redrob-black); }

.rr-reveal__ground {
  position: absolute;
  inset: 0;
  background: var(--wash-brand);
  background-size: 200% 200%;
  opacity: 0;
  animation: rr-reveal-ground 2200ms var(--easing-entrance, cubic-bezier(.16,1,.3,1)) forwards;
}
@keyframes rr-reveal-ground {
  0%   { background-position: 122% 122%; opacity: 0; }
  35%  { opacity: 1; }
  100% { background-position: 2% 2%; opacity: 1; }
}

.rr-reveal__lock { position: relative; line-height: 0; width: 360px; }
.rr-reveal--sm .rr-reveal__lock { width: 240px; }
.rr-reveal--lg .rr-reveal__lock { width: 520px; }
.rr-reveal--symbol .rr-reveal__lock { width: 96px; }
.rr-reveal--symbol.rr-reveal--lg .rr-reveal__lock { width: 144px; }
.rr-reveal__lock img { display: block; width: 100%; }

.rr-reveal__art {
  clip-path: polygon(-40% 0%, -31.6% 0%, -48.4% 100%, -40% 100%);
  animation: rr-reveal-wipe 1400ms var(--easing-entrance, cubic-bezier(.16,1,.3,1)) forwards;
}
@keyframes rr-reveal-wipe {
  from { clip-path: polygon(-40% 0%, -31.6% 0%, -48.4% 100%, -40% 100%); }
  to   { clip-path: polygon(-40% 0%, 128.4% 0%, 111.6% 100%, -40% 100%); }
}

.rr-reveal__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: var(--rr-reveal-mask);
          mask-image: var(--rr-reveal-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(130deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 60%);
  background-size: 300% 300%;
  animation: rr-reveal-sheen 1400ms var(--easing-entrance, cubic-bezier(.16,1,.3,1)) forwards;
}
@keyframes rr-reveal-sheen {
  from { background-position: 124% 124%; opacity: 1; }
  85%  { opacity: 1; }
  to   { background-position: -30% -30%; opacity: 0; }
}

/* Hand-off: the same arrival, then one quiet pass every 4.2s. Slow enough that
   it never nags, present enough that the surface is clearly still working. */
.rr-reveal--handoff .rr-reveal__sheen {
  animation: rr-reveal-sheen 1400ms var(--easing-entrance, cubic-bezier(.16,1,.3,1)) forwards,
             rr-reveal-pass 4200ms var(--easing-entrance, cubic-bezier(.16,1,.3,1)) 1400ms infinite;
}
@keyframes rr-reveal-pass {
  0%   { background-position: 124% 124%; opacity: 0.8; }
  33%  { background-position: -30% -30%; opacity: 0; }
  100% { background-position: -30% -30%; opacity: 0; }
}

/* Reduced motion: the lockup is simply there, on the ground it would have
   arrived on. A splash has nothing to say that the mark does not. */
@media (prefers-reduced-motion: reduce) {
  .rr-reveal__art { animation: none; clip-path: none; }
  .rr-reveal__sheen { display: none; }
  .rr-reveal__ground { animation: none; opacity: 1; background-position: 2% 2%; }
}

/* --------------------------------------------------------------- Scroller */
/* A scroll region that looks like the rest of the system: a hairline thumb, no
   track box, and light falling away at the edge the content runs past. The
   browser default is a gray trench with a gray slab in it, which is the one
   piece of chrome every product inherits and nobody chooses. */

.rr-scroller {
  position: relative;
  timeline-scope: --rr-scroll;
  min-height: 0;
}
.rr-scroller__view {
  overflow: auto;
  overscroll-behavior: contain;
  scroll-timeline: --rr-scroll block;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  height: 100%;
}
.rr-scroller--x .rr-scroller__view { overflow-x: auto; overflow-y: hidden; scroll-timeline: --rr-scroll inline; }
.rr-scroller--y .rr-scroller__view { overflow-x: hidden; overflow-y: auto; }
.rr-scroller--gutter-auto .rr-scroller__view { scrollbar-gutter: auto; }
.rr-scroller__view:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(var(--focus-ring-width) * -1);
  border-radius: var(--radius-sm);
}

/* WebKit and Blink still need the pseudo-elements. Same values, written twice. */
.rr-scroller__view::-webkit-scrollbar { width: 10px; height: 10px; }
.rr-scroller__view::-webkit-scrollbar-track { background: transparent; }
.rr-scroller__view::-webkit-scrollbar-corner { background: transparent; }
.rr-scroller__view::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.rr-scroller__view:hover::-webkit-scrollbar-thumb { background: var(--ink-muted); background-clip: content-box; }
.rr-scroller__view::-webkit-scrollbar-thumb:hover { background: var(--ink-secondary); background-clip: content-box; }
.rr-scroller__view::-webkit-scrollbar-thumb:active { background: var(--action-primary); background-clip: content-box; }

.rr-scroller--thin .rr-scroller__view::-webkit-scrollbar { width: 6px; height: 6px; }
.rr-scroller--thin .rr-scroller__view::-webkit-scrollbar-thumb { border-width: 1px; }

.rr-scroller--inverse .rr-scroller__view { scrollbar-color: rgba(255,255,255,0.28) transparent; }
.rr-scroller--inverse .rr-scroller__view::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); background-clip: content-box; }
.rr-scroller--inverse .rr-scroller__view:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.46); background-clip: content-box; }

/* One scrollbar, everywhere. The comment above says why the browser default is not
   an option, and then five regions in this bundle shipped it anyway - the language
   menu, the combobox list, the drawer body, an agent action's body and an approval
   detail - while two more carried the Firefox properties without the WebKit ones.
   The same product showed three different scrollbars depending on which panel you
   opened, which is the tell of a system that stopped at its own component boundary. */
.rr-combo__list,
.rr-drawer__body,
.rr-action__body,
.rr-approval__detail,
.rr-lang__menu,
.rr-siteheader__panel,
.rr-price__scroll,
.rr-review__scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.rr-combo__list::-webkit-scrollbar,
.rr-drawer__body::-webkit-scrollbar,
.rr-action__body::-webkit-scrollbar,
.rr-approval__detail::-webkit-scrollbar,
.rr-lang__menu::-webkit-scrollbar,
.rr-siteheader__panel::-webkit-scrollbar,
.rr-price__scroll::-webkit-scrollbar,
.rr-review__scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rr-combo__list::-webkit-scrollbar-track,
.rr-drawer__body::-webkit-scrollbar-track,
.rr-action__body::-webkit-scrollbar-track,
.rr-approval__detail::-webkit-scrollbar-track,
.rr-lang__menu::-webkit-scrollbar-track,
.rr-siteheader__panel::-webkit-scrollbar-track,
.rr-price__scroll::-webkit-scrollbar-track,
.rr-review__scroll::-webkit-scrollbar-track { background: transparent; }
.rr-combo__list::-webkit-scrollbar-corner,
.rr-drawer__body::-webkit-scrollbar-corner,
.rr-action__body::-webkit-scrollbar-corner,
.rr-approval__detail::-webkit-scrollbar-corner,
.rr-lang__menu::-webkit-scrollbar-corner,
.rr-siteheader__panel::-webkit-scrollbar-corner,
.rr-price__scroll::-webkit-scrollbar-corner,
.rr-review__scroll::-webkit-scrollbar-corner { background: transparent; }
.rr-combo__list::-webkit-scrollbar-thumb,
.rr-drawer__body::-webkit-scrollbar-thumb,
.rr-action__body::-webkit-scrollbar-thumb,
.rr-approval__detail::-webkit-scrollbar-thumb,
.rr-lang__menu::-webkit-scrollbar-thumb,
.rr-siteheader__panel::-webkit-scrollbar-thumb,
.rr-price__scroll::-webkit-scrollbar-thumb,
.rr-review__scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.rr-combo__list::-webkit-scrollbar-thumb:hover,
.rr-drawer__body::-webkit-scrollbar-thumb:hover,
.rr-action__body::-webkit-scrollbar-thumb:hover,
.rr-approval__detail::-webkit-scrollbar-thumb:hover,
.rr-lang__menu::-webkit-scrollbar-thumb:hover,
.rr-siteheader__panel::-webkit-scrollbar-thumb:hover,
.rr-price__scroll::-webkit-scrollbar-thumb:hover,
.rr-review__scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-secondary); background-clip: content-box; }


/* The edges. Light falls away where the content runs past the frame. Without
   scroll-driven animation the start edge stays off and the end edge stays on,
   which is correct for a region you have not scrolled yet. */
.rr-scroller__edge {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.rr-scroller--y .rr-scroller__edge,
.rr-scroller:not(.rr-scroller--x) .rr-scroller__edge { left: 0; right: 0; height: var(--rr-scroller-fade, 28px); }
.rr-scroller--x .rr-scroller__edge { top: 0; bottom: 0; width: var(--rr-scroller-fade, 28px); height: auto; }

.rr-scroller__edge--start { top: 0; opacity: 0; background: linear-gradient(to bottom, var(--rr-scroller-bg, var(--surface-base)), transparent); }
.rr-scroller__edge--end   { bottom: 0; opacity: 1; background: linear-gradient(to top, var(--rr-scroller-bg, var(--surface-base)), transparent); }
.rr-scroller--x .rr-scroller__edge--start { left: 0; top: 0; background: linear-gradient(to right, var(--rr-scroller-bg, var(--surface-base)), transparent); }
.rr-scroller--x .rr-scroller__edge--end   { right: 0; left: auto; top: 0; background: linear-gradient(to left, var(--rr-scroller-bg, var(--surface-base)), transparent); }

@supports (animation-timeline: scroll()) {
  .rr-scroller__edge--start {
    animation: rr-scroller-in linear both;
    animation-timeline: --rr-scroll;
    animation-range: 0 var(--rr-scroller-fade, 28px);
  }
  .rr-scroller__edge--end {
    animation: rr-scroller-out linear both;
    animation-timeline: --rr-scroll;
    animation-range: calc(100% - var(--rr-scroller-fade, 28px)) 100%;
  }
  @keyframes rr-scroller-in  { to { opacity: 1; } }
  @keyframes rr-scroller-out { to { opacity: 0; } }
}
.rr-scroller--no-fade .rr-scroller__edge { display: none; }

/* The edges are a cue, not motion. Nothing here moves, so reduced motion is
   already satisfied - but forced colors has no gradients, so drop them. */
@media (forced-colors: active) {
  .rr-scroller__edge { display: none; }
}

/* The generated avatar. The artwork fills the tile; Avatar clips it. */
.rr-avatar-mark { display: block; width: 100%; height: 100%; border-radius: inherit; }
.rr-avatar > .rr-avatar-mark { position: absolute; inset: 0; }

/* ==================================================== Agent harness surfaces */

/* ---- Diff --------------------------------------------------------------- */
/* Hairlines and a tinted gutter, not two boxes side by side. The code is the
   one place the mono face belongs, and the line numbers are Pretendard with
   tabular figures so the columns hold. */

.rr-changes { font-family: var(--font-sans); border: 1px solid var(--border-subtle); border-radius: var(--card-radius); overflow: hidden; background: var(--surface-raised); }
.rr-changes__head { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.rr-changes__title { font-size: 14px; font-weight: 600; color: var(--ink-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-changes__count { flex: none; font-size: 12px; color: var(--ink-secondary); }
.rr-changes__body { display: flex; flex-direction: column; }
.rr-changes__item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.rr-changes__item:last-child { border-bottom: 0; }
.rr-changes__where { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.rr-changes__kind { flex: none; font-size: 11px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-secondary); }
.rr-changes__item--added .rr-changes__kind { background: var(--accent-green-1); color: var(--accent-green-5); }
.rr-changes__item--removed .rr-changes__kind { background: var(--accent-red-1); color: var(--accent-red-5); }
.rr-changes__item--changed .rr-changes__kind { background: var(--surface-brand-subtle); color: var(--ink-brand); }
.rr-changes__label { font-size: 13px; font-weight: 500; color: var(--ink-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-changes__before, .rr-changes__after { margin: 0 0 var(--space-1); font-size: 14px; line-height: 22px; display: flex; gap: var(--space-2); align-items: baseline; }
.rr-changes__before:last-child, .rr-changes__after:last-child { margin-bottom: 0; }
.rr-changes__tag { flex: none; width: 34px; font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.rr-changes__before { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--gray-4); }
.rr-changes__before .rr-changes__tag { text-decoration: none; }
.rr-changes__after { color: var(--ink-primary); }
.rr-changes__note { margin: var(--space-2) 0 0 42px; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-changes__foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); background: var(--surface-base); }
[data-theme="dark"] .rr-changes__item--added .rr-changes__kind { background: var(--accent-green-5); color: var(--accent-green-1); }
[data-theme="dark"] .rr-changes__item--removed .rr-changes__kind { background: var(--accent-red-5); color: var(--accent-red-1); }
[data-theme="dark"] .rr-changes__before { text-decoration-color: var(--gray-7); }

/* ---- CostMeter ---------------------------------------------------------- */
/* A threshold that fills. The spent side is the near side, raked at 40 degrees
   where it meets what is left. */

.rr-meter { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-2); }
.rr-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.rr-meter__value { font-size: 21px; font-weight: 700; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; color: var(--ink-primary); }
.rr-meter__of { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.rr-meter__label { font-size: 12px; font-weight: 500; color: var(--ink-secondary); }
.rr-meter__track { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.rr-meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--action-primary); }
.rr-meter__fill::after { content: ''; position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; background: inherit; transform: skewX(calc(-1 * var(--tick-angle))); }
.rr-meter--warning .rr-meter__fill { background: var(--status-warning); }
.rr-meter--danger .rr-meter__fill { background: var(--status-danger); }
.rr-meter__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 12px; color: var(--ink-secondary); }
.rr-meter__legend span { font-variant-numeric: tabular-nums; }
.rr-meter__legend b { font-weight: 500; color: var(--ink-primary); }

/* ---- ScopeBadge --------------------------------------------------------- */

.rr-scope { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-2); }
.rr-scope__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); font-size: 13px; }
.rr-scope__row:first-of-type { border-top: 0; }
.rr-scope__icon { flex: none; font-size: 16px; line-height: 0; color: var(--ink-muted); }
.rr-scope__label { flex: 1; min-width: 0; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-scope__mode { flex: none; font-size: 11px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-full); }
.rr-scope__mode--read { background: var(--surface-sunken); color: var(--ink-secondary); }
.rr-scope__mode--write { background: var(--accent-orange-1); color: var(--accent-orange-5); }
.rr-scope__mode--none { background: transparent; color: var(--ink-muted); }
[data-theme="dark"] .rr-scope__mode--write { background: var(--accent-orange-5); color: var(--accent-orange-1); }

/* ---- AgentRoster -------------------------------------------------------- */
/* N agents at once. A list on hairlines, not a grid of identical cards. */

.rr-roster { font-family: var(--font-sans); }
.rr-roster__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.rr-roster__row:first-child { border-top: 0; }
.rr-roster__state { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; }
.rr-roster__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-roster__name { font-size: 14px; font-weight: 500; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-roster__step { font-size: 12px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-roster__meta { flex: none; display: flex; gap: var(--space-4); font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rr-roster__actions { flex: none; }

/* ---- TaskStatus ---------------------------------------------------------- */

.rr-task { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 18px; }
.rr-task__dot { flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--ink-muted); }
.rr-task--running .rr-task__dot { background: var(--action-primary); }
.rr-task--blocked .rr-task__dot { background: var(--status-warning); }
.rr-task--failed .rr-task__dot { background: var(--status-danger); }
.rr-task--done .rr-task__dot { background: var(--status-success); }
.rr-task--stopped .rr-task__dot { background: var(--ink-muted); }
.rr-task__label { color: var(--ink-primary); }
.rr-task__elapsed { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- AgentHandoff ------------------------------------------------------- */
/* The thesis at its most literal: one agent on the near side, one on the far,
   and the 40 degree seam between them carrying what crossed. */

.rr-handoff { font-family: var(--font-sans); border: 1px solid var(--border-subtle); border-radius: var(--card-radius); background: var(--surface-raised); padding: var(--space-4); }
.rr-handoff__step { display: flex; align-items: flex-start; gap: var(--space-3); }
.rr-handoff__rail { flex: none; width: 20px; display: flex; justify-content: center; }
.rr-handoff__dot { width: 20px; height: 20px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rr-handoff__dot--done { background: var(--surface-brand); color: var(--ink-on-brand); }
.rr-handoff__dot--now { background: var(--surface-raised); border: 2px solid var(--action-primary); }
.rr-handoff__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rr-handoff__name { font-size: 15px; font-weight: 600; color: var(--ink-primary); }
.rr-handoff__note { font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-handoff__when { flex: none; font-size: 12px; color: var(--ink-muted); padding-top: 2px; }
.rr-handoff__pass { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
.rr-handoff__pass .rr-handoff__rail { position: relative; align-self: stretch; min-height: 34px; }
.rr-handoff__pass .rr-handoff__rail::before { content: ''; position: absolute; left: 50%; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; background: var(--border-ai); }
.rr-handoff__arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--surface-raised); color: var(--action-primary); align-self: center; }
.rr-handoff__passlabel { font-size: 11px; font-weight: 600; color: var(--ink-brand); }
.rr-handoff__carried { margin: var(--space-3) 0 0 calc(20px + var(--space-3)); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-ai); border: 1px solid var(--border-ai); }
.rr-handoff__carriedhead { display: block; font-size: 11px; font-weight: 600; color: var(--ink-secondary); margin-bottom: var(--space-2); }
.rr-handoff__carried ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-handoff__carried li { font-size: 13px; line-height: 20px; color: var(--ink-primary); display: flex; gap: var(--space-2); align-items: baseline; }
.rr-handoff__carried li::before { content: ''; flex: none; width: 2px; height: 10px; background: var(--action-primary); transform: rotate(var(--tick-angle)); }

/* ---- Schedule ----------------------------------------------------------- */

.rr-schedule { font-family: var(--font-sans); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.rr-schedule__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-schedule__name { font-size: 14px; font-weight: 500; color: var(--ink-primary); }
.rr-schedule__when { font-size: 12px; color: var(--ink-secondary); }
.rr-schedule__last { flex: none; display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); }
.rr-schedule--off .rr-schedule__name,
.rr-schedule--off .rr-schedule__when { color: var(--ink-muted); }

/* ---- CheckIn ------------------------------------------------------------ */
/* The agent has stopped and needs a person. It waits; it does not guess. */

.rr-checkin {
  font-family: var(--font-sans); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  border: 1px solid var(--border-strong); background: var(--surface-raised);
  /* The notch. A run has one open check-in at a time, by construction: it has
     stopped and is waiting. That is what earns the mark here. */
  border-radius: var(--card-radius-feature);
  border-top-left-radius: 0;
}
.rr-checkin__mark { display: flex; align-items: center; gap: var(--space-3); font-size: 12px; font-weight: 500; color: var(--ink-secondary); }
.rr-checkin__q { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ink-primary); margin: 0; }
.rr-checkin__ctx { font-size: 13px; line-height: 20px; color: var(--ink-secondary); margin: 0; }
.rr-checkin__opts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rr-checkin__wait { display: flex; align-items: center; gap: var(--space-3); font-size: 12px; color: var(--ink-muted); }

/* ---- MemoryMeter ------------------------------------------------------- */

.rr-mem__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.rr-mem__title { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.rr-mem__full { font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-mem__key--left { color: var(--ink-muted); }
.rr-mem { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-2); }
.rr-mem__bar { display: flex; height: 6px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-sunken); }
.rr-mem__seg { height: 100%; }
.rr-mem__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 12px; color: var(--ink-secondary); }
.rr-mem__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.rr-mem__swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rr-mem__num { font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* =======================================================================
   The evidence layer
   Ten components for work whose value is a claim about a body of material.
   The shared rule: the claim and the thing it rests on are never more than
   one move apart, and what was NOT read is as visible as what was.
   ======================================================================= */

/* ---- Criteria ---------------------------------------------------------- */

.rr-criteria {
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 620px;
}
.rr-criteria__request {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  text-wrap: pretty;
}
.rr-criteria__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.rr-criteria__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.rr-criteria__weight {
  flex: none;
  width: 96px;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink-secondary);
}
.rr-criteria__weight--required { color: var(--ink-brand); }
.rr-criteria__weight--excluded { color: var(--status-danger); }
.rr-criteria__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-criteria__label { font-size: 14px; line-height: 20px; color: var(--ink-primary); }
.rr-criteria__detail { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-criteria__row--excluded .rr-criteria__label { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.rr-criteria__row--off { opacity: 0.5; }
.rr-criteria__guess {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  color: var(--ink-brand);
  background: var(--surface-ai);
  border: 1px solid var(--border-ai);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  white-space: nowrap;
}
.rr-criteria__guessIcon { display: inline-flex; }
.rr-criteria__drop {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin: -1px 0 0;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--ink-secondary); cursor: pointer;
  transition: color var(--duration-fast) var(--easing-standard), background var(--duration-fast) var(--easing-standard);
}
.rr-criteria__drop:hover { color: var(--ink-primary); background: var(--surface-sunken); }
.rr-criteria__drop:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-criteria__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rr-criteria__note { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }

/* ---- SourceSet --------------------------------------------------------- */

.rr-sourceset {
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 560px;
}
.rr-sourceset__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.rr-sourceset__title { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.rr-sourceset__updated { font-size: 12px; color: var(--ink-secondary); }
.rr-sourceset__count { margin: 0; font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-sourceset__count strong { color: var(--ink-primary); font-weight: 600; }
.rr-sourceset__bar { height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.rr-sourceset__fill { display: block; height: 100%; background: var(--action-primary); }
.rr-sourceset__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.rr-sourceset__row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle);
}
.rr-sourceset__icon { flex: none; display: inline-flex; color: var(--ink-muted); margin-top: 1px; }
.rr-sourceset__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-sourceset__name { font-size: 14px; line-height: 20px; color: var(--ink-primary); }
.rr-sourceset__reason { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-sourceset__num { flex: none; font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-sourceset__state { flex: none; font-size: 11px; font-weight: 500; color: var(--ink-secondary); white-space: nowrap; }
.rr-sourceset__state--skipped { color: var(--status-warning); }
.rr-sourceset__state--pending { color: var(--ink-secondary); }
.rr-sourceset__row--skipped .rr-sourceset__name { color: var(--ink-secondary); }
.rr-sourceset__missed { margin: 0; font-size: 12px; line-height: 18px; color: var(--status-warning); }

/* ---- Evidence ---------------------------------------------------------- */

.rr-evidence {
  font-family: var(--font-sans);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  max-width: 620px;
}
.rr-evidence__claim { display: flex; flex-direction: column; gap: 2px; }
.rr-evidence__claimLabel { font-size: 11px; font-weight: 500; color: var(--ink-secondary); }
.rr-evidence__claimText { font-size: 14px; line-height: 20px; color: var(--ink-primary); }
.rr-evidence__passage {
  margin: 0;
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--border-strong);
  font-size: 14px;
  line-height: 23px;
  color: var(--ink-secondary);
  text-wrap: pretty;
}
.rr-evidence__mark {
  background: var(--surface-brand-subtle);
  color: var(--ink-primary);
  box-shadow: 0 1px 0 0 var(--action-primary);
  padding: 1px 0;
  border-radius: 1px;
}
.rr-evidence__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: 12px; color: var(--ink-secondary); }
.rr-evidence__icon { display: inline-flex; color: var(--ink-brand); }
.rr-evidence__source { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-secondary); font-weight: 500; text-decoration: none; }
a.rr-evidence__source:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 2px; }
a.rr-evidence__source:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-evidence__ext { display: inline-flex; }
.rr-evidence__actions { margin-left: auto; display: inline-flex; gap: var(--space-2); }

/* ---- ReviewGrid -------------------------------------------------------- */

.rr-review { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-3); }
.rr-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rr-review__title { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.rr-review__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.rr-review__table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rr-review__table th,
.rr-review__table td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.rr-review__table thead th {
  font-size: 11px; font-weight: 500; color: var(--ink-secondary);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap; padding-bottom: var(--space-2);
}
.rr-review__corner, .rr-review__rowhead {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface-base);
  border-right: 1px solid var(--border-subtle);
  min-width: 170px;
}
.rr-review__rowhead { font-weight: 400; display: table-cell; }
.rr-review__rowname, .rr-review__rowbtn { display: block; font-size: 13px; font-weight: 500; color: var(--ink-primary); }
.rr-review__rowbtn { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.rr-review__rowbtn:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 2px; }
.rr-review__rowbtn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-review__rowsub { display: block; font-size: 11px; color: var(--ink-secondary); margin-top: 2px; }
.rr-review__open {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.rr-review__open:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-review__open:hover .rr-review__value { text-decoration: underline; text-underline-offset: 2px; }
.rr-review__value { color: var(--ink-primary); line-height: 19px; }
.rr-review__cell--none .rr-review__value { color: var(--ink-secondary); font-style: italic; }
.rr-review__cell--unsure { background: var(--surface-sunken); }
.rr-review__cell--unsure .rr-review__value { color: var(--ink-primary); }
.rr-review__flag { display: inline-flex; vertical-align: -2px; margin-left: var(--space-2); color: var(--status-warning); }
.rr-review__src {
  display: inline-block; margin-left: var(--space-1);
  font-size: 10px; line-height: 1; vertical-align: super;
  color: var(--ink-brand); font-variant-numeric: tabular-nums;
}
.rr-review__wait { display: block; height: 12px; width: 70%; border-radius: var(--radius-xs); }
.rr-review__foot { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }

/* ---- MatchBreakdown ---------------------------------------------------- */

.rr-match { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; }
.rr-match__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.rr-match__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rr-match__name { font-size: 16px; font-weight: 600; color: var(--ink-primary); }
.rr-match__sub { font-size: 12px; color: var(--ink-secondary); }
.rr-match__verdict { flex: none; font-size: 13px; font-weight: 500; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-match__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.rr-match__row { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.rr-match__icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--ink-muted); }
.rr-match__icon--met { color: var(--status-success); }
.rr-match__icon--partly { color: var(--status-warning); }
.rr-match__icon--missing { color: var(--status-danger); }
.rr-match__cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-match__label { font-size: 14px; line-height: 20px; color: var(--ink-primary); }
.rr-match__row--missing .rr-match__label,
.rr-match__row--unknown .rr-match__label { color: var(--ink-secondary); }
.rr-match__evidence { font-size: 12px; line-height: 18px; color: var(--ink-secondary); text-align: left; }
.rr-match__evidence--none { color: var(--ink-secondary); font-style: italic; }
.rr-match__evidence--link { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.rr-match__evidence--link:hover { color: var(--ink-brand); text-decoration-style: solid; }
.rr-match__evidence--link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-match__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Redline ----------------------------------------------------------- */

.rr-redline {
  font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  max-width: 620px;
}
.rr-redline--kept, .rr-redline--reverted { border-color: var(--border-subtle); background: var(--surface-base); }
.rr-redline__head { display: flex; align-items: center; gap: var(--space-2); }
.rr-redline__icon { display: inline-flex; color: var(--ink-muted); }
.rr-redline__label { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.rr-redline__source { font-size: 12px; color: var(--ink-secondary); margin-left: auto; }
.rr-redline__text { margin: 0; font-size: 14px; line-height: 24px; color: var(--ink-primary); text-wrap: pretty; }
.rr-redline__out {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--status-danger);
  background: var(--surface-sunken);
  padding: 1px 2px;
  border-radius: 2px;
}
.rr-redline__in {
  text-decoration: none;
  color: var(--ink-primary);
  background: var(--surface-brand-subtle);
  box-shadow: 0 1px 0 0 var(--action-primary);
  padding: 1px 2px;
  border-radius: 2px;
}
.rr-redline__why { margin: 0; font-size: 12px; line-height: 19px; color: var(--ink-secondary); }
.rr-redline__whyLabel { display: block; font-size: 11px; font-weight: 500; color: var(--ink-secondary); }
.rr-redline__actions { display: flex; gap: var(--space-2); }
.rr-redline__settled { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-secondary); }
.rr-redline__settledIcon { display: inline-flex; color: var(--ink-muted); }

/* ---- Finding ----------------------------------------------------------- */

.rr-finding {
  font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  max-width: 560px;
}
.rr-finding--settled { opacity: 0.62; }
.rr-finding__head { display: flex; align-items: center; gap: var(--space-3); }
.rr-finding__sev {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 11px; font-weight: 600;
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  border: 1px solid currentColor;
}
.rr-finding__sevIcon { display: inline-flex; }
.rr-finding__sev--high { color: var(--status-danger); }
.rr-finding__sev--medium { color: var(--status-warning); }
.rr-finding__sev--low { color: var(--ink-secondary); }
.rr-finding__sev--note { color: var(--ink-brand); }
.rr-finding__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink-primary); }
.rr-finding__state { flex: none; font-size: 11px; color: var(--ink-secondary); }
.rr-finding__where {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1);
  border: 0; background: none; padding: 0; font-family: inherit;
  font-size: 12px; color: var(--ink-brand); cursor: pointer;
}
.rr-finding__where--static { color: var(--ink-secondary); cursor: default; }
.rr-finding__where:not(.rr-finding__where--static):hover { text-decoration: underline; text-underline-offset: 2px; }
.rr-finding__where:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-finding__whereIcon { display: inline-flex; }
.rr-finding__detail { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-finding__evidence { margin-top: var(--space-1); }
.rr-finding__do { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-primary); }
.rr-finding__doLabel { display: block; font-size: 11px; font-weight: 500; color: var(--ink-secondary); }
.rr-finding__actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }

/* ---- Playbook ---------------------------------------------------------- */

.rr-playbook {
  font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--surface-raised);
  max-width: 560px;
}
.rr-playbook__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.rr-playbook__icon { flex: none; display: inline-flex; color: var(--ink-brand); margin-top: 1px; }
.rr-playbook__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-playbook__name { font-size: 15px; font-weight: 600; color: var(--ink-primary); }
.rr-playbook__purpose { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-playbook__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.rr-playbook__step { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.rr-playbook__n {
  flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-secondary); background: var(--surface-sunken); border-radius: var(--radius-xs);
}
.rr-playbook__cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-playbook__label { font-size: 14px; line-height: 20px; color: var(--ink-primary); }
.rr-playbook__detail { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-playbook__gate {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 11px; font-weight: 500; color: var(--ink-brand);
  background: var(--surface-brand-subtle); border-radius: var(--radius-full);
  padding: 1px var(--space-2); white-space: nowrap;
}
.rr-playbook__gateIcon { display: inline-flex; }
.rr-playbook__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 12px; }
.rr-playbook__foothalf { color: var(--ink-secondary); }
.rr-playbook__meta { color: var(--ink-secondary); text-align: right; }

/* ---- Shortlist --------------------------------------------------------- */

.rr-shortlist {
  font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  max-width: 420px;
}
.rr-shortlist__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.rr-shortlist__title { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.rr-shortlist__count { font-size: 12px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-shortlist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rr-shortlist__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.rr-shortlist__item:last-child { border-bottom: 0; }
.rr-shortlist__cell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rr-shortlist__label { font-size: 13px; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-shortlist__sub { font-size: 11px; color: var(--ink-secondary); }
.rr-shortlist__drop {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink-secondary); cursor: pointer;
}
.rr-shortlist__drop:hover { color: var(--ink-primary); background: var(--surface-sunken); }
.rr-shortlist__drop:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-shortlist__none { margin: var(--space-1) 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-shortlist__actions { display: flex; gap: var(--space-2); padding-top: var(--space-1); }

/* ---- DecisionNotice ---------------------------------------------------- */

.rr-notice {
  font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  background: var(--surface-base);
  max-width: 640px;
  /* The notch. One decision, one notice, and it is the only surface in this system
     written for somebody who may never log in. If anything earns the mark, this does. */
  border-radius: var(--card-radius-feature);
  border-top-left-radius: 0;
}
/* quiet is the version that sits inside an application form beside other text, where it
   is one element among many rather than the thing the screen is for */
.rr-notice--quiet { border-radius: var(--card-radius); }
.rr-notice--quiet { border-color: var(--border-subtle); background: var(--surface-sunken); }
.rr-notice__head { display: flex; align-items: center; gap: var(--space-2); }
.rr-notice__icon { display: inline-flex; color: var(--ink-brand); }
.rr-notice__title { font-size: 14px; font-weight: 600; color: var(--ink-primary); }
.rr-notice__decision { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-primary); text-wrap: pretty; }
.rr-notice__cols { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.rr-notice__col { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-notice__colTitle { font-size: 11px; font-weight: 600; color: var(--ink-secondary); }
.rr-notice__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rr-notice__items li { font-size: 13px; line-height: 19px; color: var(--ink-secondary); padding-left: var(--space-4); position: relative; }
.rr-notice__items li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 2px; background: var(--ink-secondary);
}
.rr-notice__items--used li::before { background: var(--status-success); }
.rr-notice__items--not li::before { background: var(--border-strong); }
.rr-notice__items--not li { color: var(--ink-secondary); }
.rr-notice__human { margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-primary); }
.rr-notice__humanIcon { flex: none; display: inline-flex; color: var(--ink-brand); margin-top: 3px; }
.rr-notice__rights { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-notice__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.rr-notice__link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 500; color: var(--ink-brand); text-decoration: none; }
.rr-notice__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.rr-notice__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-notice__ext { display: inline-flex; }
.rr-notice__contact { font-size: 12px; color: var(--ink-secondary); overflow-wrap: anywhere; }

@media (prefers-reduced-transparency: reduce) {
  .rr-criteria__guess { background: none; }
}

/* =======================================================================
   The web layer
   A public site, not a product screen. The rule that runs through all of
   it: structure comes from edges and ground changes, not from another
   border. Three components ship with a constraint removed rather than
   documented - Hero has no alignment, Band has no centering, FeatureRow
   takes one subject and not an array.
   ======================================================================= */

/* ---- PageShell --------------------------------------------------------- */

/* PageShell owns rr-pageshell. AppShell owns rr-shell. They both used to claim
   rr-shell, and because AppShell's block comes later its two-column grid won:
   a whole marketing page laid itself out inside a 232px sidebar column. Two
   components sharing one namespace is not a naming preference, it is a defect
   waiting for whichever stylesheet loads second. */
.rr-pageshell { display: flex; flex-direction: column; min-height: 100vh; background: var(--surface-base); }
.rr-pageshell__header, .rr-pageshell__footer { flex: none; }
.rr-pageshell__skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  transform: translateY(-200%);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink-on-brand); background: var(--action-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  text-decoration: none;
}
.rr-pageshell__skip:focus { transform: translateY(0); outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-pageshell__main { flex: 1; }
.rr-pageshell__main:focus { outline: none; }

/* ---- Band -------------------------------------------------------------- */

/* One rail, two numbers. The header's mark, the first word of every band and the
   footer's first column stand on the same vertical line because all three measure
   from --page-gutter and --rail-max and from nothing else. Change one of these and
   the whole page moves together; compute a gutter locally and it stops lining up. */
.rr-band, .rr-siteheader, .rr-sitefooter {
  --rail-max: 1180px;
  --page-gutter: var(--space-10);
}
@media (max-width: 720px) {
  .rr-band, .rr-siteheader, .rr-sitefooter { --page-gutter: var(--space-6); }
}

/* The fallbacks are not decoration. --band-gap and the three marketing steps are
   tokens, and a generated tokens.css that has not caught up with them would leave
   every band on a page with no vertical rhythm at all. A band with no padding is
   not a degraded band, it is an invisible one. */
.rr-band { position: relative; padding: var(--band-gap, 128px) 0; overflow: hidden; background: var(--surface-base); }
.rr-band--sm { padding: var(--space-24, 96px) 0; }
.rr-band--lg { padding: var(--space-40, 160px) 0; }
.rr-band--raised { background: var(--surface-raised); }
.rr-band--sunken { background: var(--surface-sunken); }
.rr-band--wash { background: var(--surface-base) var(--wash-brand) no-repeat; }
.rr-band--brand { background: var(--gradient-deep); color: var(--ink-on-brand); }
.rr-band--brand .rr-section-mark,
.rr-band--brand .rr-band__rail { color: var(--ink-on-brand); }
/* The construction at page scale: the near side dark, a lit seam on the rake, the
   light falling away past it and cooling to the teal edge. The same composition
   the Cover is described by, one register up - derived from the mark rather than
   bought, which is the test the texture register already applies to itself.
   140deg is the 40 degree rake in CSS. This is a GROUND, not a layer: it is the
   dark counterpart to sunken, and it says nothing about what is on it. Depth of
   content is 40-surfaces-and-motion.md and stays there. */
.rr-band--deep {
  /* The stops as tokens at an alpha, which is how the wash gradients are written
     too. Explicit zero-alpha ends rather than `transparent`, so no engine can
     interpolate the fade through transparent black and gray the seam. */
  --band-deep-edge: #2b52ff00;   /* blue-6, 0%  - the near side, unlit */
  --band-deep-seam: #2b52ff42;   /* blue-6, 26% - the lit seam on the rake */
  --band-deep-cool: #6ff4f01a;   /* accent-teal-3, 10% - the light cooling past it */
  --band-deep-far:  #030c3400;   /* blue-10, 0% - the far side, fallen away */
  background-color: var(--redrob-black);
  background-image: linear-gradient(140deg,
    var(--band-deep-edge) 0%,
    var(--band-deep-edge) 30%,
    var(--band-deep-seam) 44%,
    var(--band-deep-cool) 58%,
    var(--band-deep-far)  82%);
  color: var(--ink-on-brand);
}
.rr-band--deep .rr-section-mark,
.rr-band--deep .rr-band__rail { color: var(--ink-on-brand); }
/* On a dark ground the threshold is light catching an edge, not a dark rule. */
.rr-band--deep.rr-band--threshold::after { background: rgba(255, 255, 255, .34); opacity: 1; }
/* Figure's credit sets --ink-muted, a light-theme gray, so it ignored whatever
   color the band set around it: 1.84:1 on the brand ground and 4.22:1 on this
   one's lit seam, against a 4.5:1 floor for 12px. Measured at each ground's
   lightest point, not its average, because both grounds are gradients. */
.rr-band--deep .rr-figure__caption,
.rr-band--brand .rr-figure__caption { color: rgba(255, 255, 255, .88); }
.rr-band--deep .rr-figure__credit,
.rr-band--brand .rr-figure__credit { color: rgba(255, 255, 255, .78); }
.rr-band--threshold::after {
  /* One hairline on the rake. skewX(-40deg) from the foot holds 40 degrees at any band
     height; the old clip-path used 34vh for the run, so the angle drifted with the
     window and the band (about 36 degrees on a 415px band in a 900px window). */
  content: ''; position: absolute; top: 0; bottom: 0; left: 78%; width: 1px; pointer-events: none;
  background: var(--border-strong); opacity: .5;
  transform: skewX(-40deg); transform-origin: 0 100%;
}
/* On the brand ground the threshold is the social cards' and the email hero's: one 40
   degree cut near the right edge, the ground beyond it lit one step, a teal seam on
   the cut with one faint line either side (assets/Social/render.js, 85-social.md). The
   cut starts at 62% along the foot of the band and leans right as it rises; skewX(-40deg)
   from the bottom edge keeps it on the rake at any band height. Type never crosses it,
   so a brand band with a threshold keeps its content in the left two thirds. */
.rr-band--brand.rr-band--threshold { background: linear-gradient(130deg, var(--blue-6) 0%, var(--blue-6) 44%, var(--blue-7) 100%); }
.rr-band--brand.rr-band--threshold::after { display: none; }   /* the hairline gives way to the cut */
.rr-band__cut { position: absolute; inset: 0; pointer-events: none; overflow: hidden; container-type: size; --cut-x: 62%; }
.rr-band__cut--spectrum { --cut-x: 56%; }
.rr-band__cut::before,
.rr-band__cut::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  transform: skewX(-40deg); transform-origin: 0 100%;
}
.rr-band__cut {
  /* Measured off the social cards: past the seam the ground is lit only a step, and it
     falls away toward the far edge. Brighter than this and the cut reads as a panel. */
  --cut-lit: #2c4ee0;
  --cut-far: #2240d8;
}
.rr-band__cut::before { left: var(--cut-x); width: 100%; background: linear-gradient(130deg, var(--cut-lit) 0%, var(--cut-far) 100%); }
.rr-band__cut::after {
  left: calc(var(--cut-x) - 26px); width: 44px;
  background: linear-gradient(90deg,
    rgba(111, 244, 240, .26) 0, rgba(111, 244, 240, .26) 1px, transparent 1px, transparent 26px,
    rgba(111, 244, 240, .9) 26px, rgba(111, 244, 240, .9) 29px, transparent 29px, transparent 43px,
    rgba(111, 244, 240, .38) 43px, rgba(111, 244, 240, .38) 44px, transparent 44px);
}
.rr-band__cut--spectrum::after { display: none; }   /* no hairlines beside the spectrum */
/* threshold="spectrum": the suite cards' spectrum seam (85-social.md). After the teal seam,
   seven lines in suite order at each product's step 4, each 1% of the width with an equal
   gap, on the same rake. Suite surfaces only: never inside one product's page. */
.rr-band__spectrum {
  /* The suite card's spectrum: eight lines of one width with one gap between each, the teal
     seam first, then the seven products in suite order at step 4 (20-color.md; literal here
     because product variables belong to AppShell). Each line 1% of the band's width. */
  --spec-1: #7AC6FF;
  --spec-2: #5FD2D6;
  --spec-3: #5DDB87;
  --spec-4: #FFA664;
  --spec-5: #FFA193;
  --spec-6: #FF98CA;
  --spec-7: #DCA2FF;
  --spec-t: max(4px, 1cqw);
  position: absolute; top: 0; bottom: 0; left: var(--cut-x); width: calc(var(--spec-t) * 15);
  transform: skewX(-40deg); transform-origin: 0 100%;
  background: linear-gradient(90deg, var(--accent-teal-3) 0.0%, var(--accent-teal-3) 6.6667%, transparent 6.6667%, transparent 13.3333%, var(--spec-1) 13.3333%, var(--spec-1) 20.0%, transparent 20.0%, transparent 26.6667%, var(--spec-2) 26.6667%, var(--spec-2) 33.3333%, transparent 33.3333%, transparent 40.0%, var(--spec-3) 40.0%, var(--spec-3) 46.6667%, transparent 46.6667%, transparent 53.3333%, var(--spec-4) 53.3333%, var(--spec-4) 60.0%, transparent 60.0%, transparent 66.6667%, var(--spec-5) 66.6667%, var(--spec-5) 73.3333%, transparent 73.3333%, transparent 80.0%, var(--spec-6) 80.0%, var(--spec-6) 86.6667%, transparent 86.6667%, transparent 93.3333%, var(--spec-7) 93.3333%, var(--spec-7) 100.0%, transparent 100.0%);
}

.rr-band--brand.rr-band--threshold > .rr-band__rail { z-index: 1; }
@media (max-width: 860px) {
  .rr-band__cut, .rr-band__cut--spectrum { --cut-x: 80%; }
}

/* ---- Product grounds on a Band (20-color.md, The three product grounds) ---------
   The ramps are literal here, as the spectrum's are: --product-* belongs to AppShell.
   --pg-1/3/4/5/6/7 are steps 1, 3, 4, 5, 6 (the mark) and 7 of the product's ramp. */
.rr-band--p-router { --pg-1: #F0F8FF; --pg-3: #B3DEFF; --pg-4: #7AC6FF; --pg-5: #37ABF5; --pg-mark: #1194DD; --pg-7: #0069A1; }
.rr-band--p-chat { --pg-1: #E9FBFB; --pg-3: #98E8EA; --pg-4: #5FD2D6; --pg-5: #3DB5B9; --pg-mark: #149CA0; --pg-7: #007275; }
.rr-band--p-code { --pg-1: #E9FDED; --pg-3: #97EFAF; --pg-4: #5DDB87; --pg-5: #3ABE6C; --pg-mark: #02A252; --pg-7: #00783B; }
.rr-band--p-desk { --pg-1: #FFF5EE; --pg-3: #FFCBA8; --pg-4: #FFA664; --pg-5: #EB8227; --pg-mark: #D87101; --pg-7: #964D00; }
.rr-band--p-office { --pg-1: #FFF4F2; --pg-3: #FFC8C0; --pg-4: #FFA193; --pg-5: #FF6C5B; --pg-mark: #FE4D3E; --pg-7: #B81610; }
.rr-band--p-browser { --pg-1: #FFF3F8; --pg-3: #FFC4DE; --pg-4: #FF98CA; --pg-5: #FF58B4; --pg-mark: #F14AA8; --pg-7: #AD1373; }
.rr-band--p-design { --pg-1: #FAF4FF; --pg-3: #EAC9FF; --pg-4: #DCA2FF; --pg-5: #CD72FF; --pg-mark: #C162F4; --pg-7: #8832B2; }
/* Section tick in the product's mark: the one place the page names where you are. */
.rr-band--product .rr-tick { background: var(--pg-mark); }
/* Light ground: the field stays white, the far side of the cut is lit in the product,
   brightest at the seam and fading to its tint; the seam is the mark. */
.rr-band--product:not(.rr-band--brand) .rr-band__cut { --cut-x: 84%; }
.rr-band--product:not(.rr-band--brand) .rr-band__cut::before {
  background: linear-gradient(130deg, var(--pg-5) 0%, var(--pg-3) 30%, var(--pg-1) 72%);
}
.rr-band--product .rr-band__cut::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pg-mark) 38%, transparent) 0, color-mix(in srgb, var(--pg-mark) 38%, transparent) 1px, transparent 1px, transparent 26px,
    var(--pg-mark) 26px, var(--pg-mark) 29px, transparent 29px, transparent 43px,
    color-mix(in srgb, var(--pg-mark) 38%, transparent) 43px, color-mix(in srgb, var(--pg-mark) 38%, transparent) 44px, transparent 44px);
}
.rr-band--product.rr-band--threshold::after { display: none; }
.rr-band--product.rr-band--threshold > .rr-band__rail { z-index: 1; }
/* Dark theme: the far side dims to the product's deep ground rather than a lit block. */
[data-theme="dark"] .rr-band--product:not(.rr-band--brand) .rr-band__cut::before {
  background: linear-gradient(130deg, color-mix(in srgb, var(--pg-mark) 55%, transparent) 0%, color-mix(in srgb, var(--pg-7) 22%, transparent) 60%, transparent 100%);
}
/* Brand ground: the mark is the field, the far side lit toward its step 4, a white seam.
   White type at headline size only, and a white pill. */
.rr-band--brand.rr-band--product,
.rr-band--brand.rr-band--product.rr-band--threshold { background: var(--pg-mark); }
.rr-band--brand.rr-band--product .rr-band__cut::before {
  background: linear-gradient(130deg, var(--pg-4) 0%, var(--pg-5) 45%, var(--pg-mark) 100%);
}
.rr-band--brand.rr-band--product .rr-band__cut::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,.38) 0, rgba(255,255,255,.38) 1px, transparent 1px, transparent 26px,
    rgba(255,255,255,.95) 26px, rgba(255,255,255,.95) 29px, transparent 29px, transparent 43px,
    rgba(255,255,255,.38) 43px, rgba(255,255,255,.38) 44px, transparent 44px);
}
.rr-band--brand.rr-band--product .rr-tick { background: #fff; }
/* the rail: content hangs from the left of a centered measure. There is no centering
   prop, because a centered band is the first half of the tell. */
.rr-band__rail {
  width: min(100% - var(--page-gutter) * 2, var(--rail-max));
  margin-inline: auto;
  position: relative;
}
.rr-band__rail--wide { width: min(100% - var(--page-gutter) * 2, 1440px); }
@media (max-width: 1024px) {
  .rr-band { padding: var(--space-24, 96px) 0; }
  .rr-band--sm { padding: var(--space-16) 0; }
  .rr-band--lg { padding: var(--space-32, 128px) 0; }
}
@media (max-width: 720px) {
  .rr-band { padding: var(--space-16) 0; }
  .rr-band--sm { padding: var(--space-12) 0; }
  .rr-band--lg { padding: var(--space-20) 0; }
}

/* ---- Mark -------------------------------------------------------------- */
/* 10-logo.md: Primary on a light ground, Primary White on a dark one. Every web
   surface here sits on a ground that flips with the theme, so a single dark PNG is
   a lockup that disappears - which is exactly what happened on the header, the
   footer, the hero and the shell. Pass both files and this swaps them. */

/* Two classes deep on purpose. Every host sets `display` on its own mark with a
   selector like `.rr-siteheader__mark img`, which is one class and one element and
   therefore outranks a single class here - a one-class rule left both lockups on
   screen at once on the light theme. */
.rr-mark { display: inline-flex; align-items: center; }
.rr-mark .rr-mark__light, .rr-mark .rr-mark__dark { display: block; width: auto; }
.rr-mark .rr-mark__dark { display: none; }
[data-theme="dark"] .rr-mark .rr-mark__light { display: none; }
[data-theme="dark"] .rr-mark .rr-mark__dark { display: block; }
/* tone forces the variant for a panel whose ground does not follow the theme -
   a light card inside the dark theme, or a dark band inside the light one.
   Without it the white lockup lands on a white panel and disappears. These
   sit after the theme rules on purpose: equal specificity, later one wins. */
.rr-mark[data-tone="light"] .rr-mark__light { display: block; }
.rr-mark[data-tone="light"] .rr-mark__dark  { display: none; }
.rr-mark[data-tone="dark"]  .rr-mark__light { display: none; }
.rr-mark[data-tone="dark"]  .rr-mark__dark  { display: block; }

/* ---- SiteHeader -------------------------------------------------------- */

.rr-siteheader {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-5) max(var(--page-gutter), calc((100% - var(--rail-max)) / 2));
  font-family: var(--font-sans); background: var(--surface-base);
}
.rr-siteheader--stuck { position: sticky; top: 0; border-bottom: 1px solid var(--border-subtle); }
.rr-siteheader--stuck::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px;
  background: var(--wash-edge); transform: scaleY(-1); pointer-events: none;
}
.rr-siteheader__mark { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.rr-siteheader__mark img, .rr-siteheader__mark svg { display: block; height: 26px; width: auto; }
.rr-siteheader__mark:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }
.rr-siteheader__nav { flex: 1; display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.rr-siteheader__section { position: relative; }
.rr-siteheader__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink-secondary); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
  transition: color var(--duration-fast) var(--easing-standard);
}
.rr-siteheader__link:hover, .rr-siteheader__link--open { color: var(--ink-primary); }
.rr-siteheader__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-siteheader__chev { display: inline-flex; transition: transform var(--duration-fast) var(--easing-standard); }
.rr-siteheader__chev--open { transform: rotate(180deg); }
.rr-siteheader__panel {
  position: absolute; left: 0; top: calc(100% + var(--space-2)); min-width: 280px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3);
}
.rr-siteheader__list { list-style: none; margin: 0; padding: 0; }
.rr-siteheader__item {
  display: flex; flex-direction: column; gap: 1px; padding: var(--space-3);
  border-radius: var(--radius-sm); text-decoration: none;
}
.rr-siteheader__item:hover { background: var(--surface-sunken); }
.rr-siteheader__item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.rr-lang__row > [dir="rtl"] { display: block; text-align: left; }
.rr-siteheader__itemLabel { font-size: 14px; font-weight: 500; color: var(--ink-primary); }
.rr-siteheader__itemDetail { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-siteheader__end { flex: none; display: flex; align-items: center; gap: var(--space-3); }
.rr-siteheader__toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; background: none; color: var(--ink-primary); cursor: pointer; border-radius: var(--radius-sm);
}
.rr-siteheader__toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-siteheader__drawer { display: none; }
.rr-siteheader__mlist, .rr-siteheader__msub { list-style: none; margin: 0; padding: 0; }
/* ---- ThemeSwitch: System, Light, Dark ------------------------------------ */
.rr-theme {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface-base);
}
.rr-theme__opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--ink-muted); cursor: pointer; position: relative;
}
.rr-theme__opt::before { content: ""; position: absolute; inset: -4px 0; }   /* 36px target */
.rr-theme__opt:hover { color: var(--ink-primary); }
.rr-theme__opt[aria-checked="true"] { background: var(--surface-sunken); color: var(--ink-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.rr-theme__opt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-theme--sm .rr-theme__opt { width: 24px; height: 24px; }
.rr-band--deep .rr-theme, .rr-band--brand .rr-theme { border-color: rgba(255,255,255,.28); background: transparent; }
.rr-siteheader__theme { display: inline-flex; }
.rr-siteheader__mtheme { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0 var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--border-subtle); font-size: 14px; color: var(--ink-secondary); }
@media (max-width: 900px) { .rr-siteheader__theme { display: none; } }
.rr-shell__theme { margin-top: auto; padding: var(--space-3) var(--space-3) var(--space-4); }
@media (max-width: 900px) {
  .rr-siteheader { gap: var(--space-3); flex-wrap: wrap; }
  .rr-siteheader__nav { display: none; }
  .rr-siteheader__toggle { display: inline-flex; }
  .rr-siteheader__drawer { display: block; flex-basis: 100%; }
  .rr-siteheader__drawer[hidden] { display: none; }
  .rr-siteheader__mitem { padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
  .rr-siteheader__mlink { display: block; font-size: 16px; font-weight: 600; color: var(--ink-primary); text-decoration: none; padding: var(--space-2) 0; }
  .rr-siteheader__msub li a { display: block; font-size: 14px; color: var(--ink-secondary); text-decoration: none; padding: var(--space-2) 0; }
}

/* ---- SiteFooter -------------------------------------------------------- */

.rr-sitefooter {
  font-family: var(--font-sans); background: var(--surface-sunken);
  padding: var(--space-16) max(var(--page-gutter), calc((100% - var(--rail-max)) / 2)) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-10);
}
.rr-sitefooter__top { display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-16); }
.rr-sitefooter__brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.rr-sitefooter__mark img, .rr-sitefooter__mark svg { display: block; height: 24px; width: auto; }
.rr-sitefooter__line { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); max-width: 34ch; }
.rr-sitefooter__cols { flex: 2 1 480px; display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-10); }
.rr-sitefooter__col { flex: 1 1 140px; display: flex; flex-direction: column; gap: var(--space-3); }
.rr-sitefooter__colTitle { font-size: 12px; font-weight: 600; color: var(--ink-primary); }
.rr-sitefooter__colList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-sitefooter__colList a { font-size: 13px; color: var(--ink-secondary); text-decoration: none; }
.rr-sitefooter__colList a:hover { color: var(--ink-primary); text-decoration: underline; text-underline-offset: 2px; }
.rr-sitefooter__colList a { display: inline-flex; align-items: center; gap: 4px; }
.rr-sitefooter__divider { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.rr-sitefooter__ext { display: inline-flex; color: var(--ink-muted); }
/* The registered-office block used to live here. It moved to the legal pages:
   Korea's disclosure is a named person, a registration number and an address, and
   a footer is where that goes to be scrolled past rather than read. */
.rr-sitefooter__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--ink-secondary);
}
.rr-sitefooter__legalLinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.rr-sitefooter__legalLinks a, .rr-sitefooter__legalBtn {
  font-size: 12px; color: var(--ink-secondary); text-decoration: none;
  border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer;
}
.rr-sitefooter__legalLinks a:hover, .rr-sitefooter__legalBtn:hover { color: var(--ink-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---- LangSwitch -------------------------------------------------------- */

.rr-lang { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); }
.rr-lang__icon { display: inline-flex; color: var(--ink-secondary); }
.rr-lang__list { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: var(--space-1); }
.rr-lang__item + .rr-lang__item::before { content: '\00b7'; color: var(--border-strong); margin-right: var(--space-1); }
.rr-lang__link, .rr-lang__on, .rr-lang__off { font-size: 13px; padding: var(--space-1) 2px; border-radius: 2px; }
.rr-lang__link { color: var(--ink-secondary); text-decoration: none; }
.rr-lang__link:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 2px; }
.rr-lang__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-lang__on { color: var(--ink-primary); font-weight: 600; }
.rr-lang__off { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); cursor: not-allowed; }

.rr-lang--menu { position: relative; }
.rr-lang__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 0; background: none; font-family: inherit; font-size: 13px;
  color: var(--ink-secondary); padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
}
.rr-lang__trigger:hover { color: var(--ink-primary); }
.rr-lang__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-lang__chev { display: inline-flex; transition: transform var(--duration-fast) var(--easing-standard); }
.rr-lang__chev--open { transform: rotate(180deg); }
.rr-lang__menu {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30;
  list-style: none; margin: 0; padding: var(--space-2); min-width: 180px;
  max-height: 60vh; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.rr-lang__row { display: block; }
.rr-lang__row > * { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.rr-lang__row > a:hover { background: var(--surface-sunken); color: var(--ink-primary); }

/* ---- ConsentBar -------------------------------------------------------- */
/* The one place in this system where a shadow is correct: it genuinely floats
   over the page. Do not read this as permission to shadow anything else. */

.rr-consent {
  position: relative; font-family: var(--font-sans);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5); max-width: 720px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.rr-consent__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rr-consent__text { margin: 0; font-size: 13px; line-height: 21px; color: var(--ink-primary); }
.rr-consent__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rr-consent__cat { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.rr-consent__req { flex: none; font-size: 11px; color: var(--ink-secondary); margin-top: 3px; }
.rr-consent__actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Hero -------------------------------------------------------------- */

.rr-hero { display: flex; gap: var(--space-12); align-items: center; font-family: var(--font-sans); }
.rr-hero__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rr-hero--media .rr-hero__body { flex: 1 1 52%; }
.rr-hero__mark { margin-bottom: var(--space-8); }
.rr-hero__mark img, .rr-hero__mark svg { display: block; height: 30px; width: auto; }
.rr-hero__lede {
  margin: var(--space-6) 0 0; max-width: 46ch;
  font-size: 17px; line-height: 28px; color: var(--ink-secondary); text-wrap: pretty;
}
:lang(ko) .rr-hero__lede { font-size: 16px; line-height: 33px; }
.rr-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-8); }
.rr-hero__second {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 14px; font-weight: 500; color: var(--ink-brand); text-decoration: none;
}
.rr-hero__second:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-hero__second:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.rr-hero__secondIcon { display: inline-flex; }
/* The display cut as the hero's h1: no inherited heading margin, and a phone-width
   wrap balances rather than leaving one word on the second line. */
.rr-hero__statement > .rr-rake { margin: 0; text-wrap: balance; }
.rr-hero__foot { margin: var(--space-6) 0 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-hero__media { flex: 1 1 44%; min-width: 0; }

/* The film hero (46-imagery.md, Generated film). The film fills the whole Band, so the
   rail lets go of positioning and the film sits against the Band's own box; everything
   in the hero body rides above it. The scrim is the 30-60% black the imagery rules allow
   under type, darkest behind the words and lifting toward the far side: white text holds
   4.99:1 at the 98th percentile of the brightest frame (measured across the film). */
.rr-band:has(.rr-hero--film) .rr-band__rail { position: static; }
/* Film hero: the type sits low on the left, over the scrim, and the film has the rest of
   the frame. The credit and the control are a caption in the bottom-right corner of the
   band, off the reading line and away from the call to action. */
.rr-band:has(.rr-hero--film) { --film-pad-top: var(--space-20, 80px); --film-pad-bottom: var(--space-24, 96px);
  padding: var(--film-pad-top) 0 var(--film-pad-bottom); }
/* The band fills the first screen under the header (72px), so the credit is never below the fold. */
.rr-hero--film { min-height: max(440px, calc(min(100svh, 960px) - 72px - var(--film-pad-top) - var(--film-pad-bottom)));
  align-items: flex-end; color: #fff; }
.rr-hero__film { position: absolute; inset: 0; z-index: 0; background: var(--redrob-black); overflow: hidden; }
.rr-hero__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-hero__film::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10, 11, 12, .62) 0, rgba(10, 11, 12, 0) 28%),
    linear-gradient(90deg, rgba(10, 11, 12, .6) 0%, rgba(10, 11, 12, .4) 56%, rgba(10, 11, 12, .12) 100%);
}
.rr-hero--film .rr-hero__body > :not(.rr-hero__film) { position: relative; z-index: 1; }
.rr-hero--film .rr-hero__statement, .rr-hero--film .rr-rake { color: #fff; }
.rr-hero--film .rr-hero__lede { color: var(--gray-1); }
.rr-hero--film .rr-hero__foot, .rr-hero--film .rr-hero__second { color: var(--gray-1); }
.rr-hero--film .rr-hero__body > .rr-hero__filmbar {
  position: absolute; z-index: 1; bottom: var(--space-6);
  right: max(var(--page-gutter), calc((100% - var(--rail-max)) / 2));
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .92);
}
.rr-hero__filmcredit { white-space: nowrap; }
@media (max-width: 480px) { .rr-hero__filmcredit { white-space: normal; } }
.rr-hero__filmtoggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; color: #fff; background: rgba(10, 11, 12, .24); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; opacity: .82;
  transition: opacity var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease;
}
.rr-hero__filmtoggle::before { content: ""; position: absolute; inset: -10px; }  /* 44px target */
.rr-hero__filmtoggle:hover { opacity: 1; border-color: rgba(255, 255, 255, .8); }
.rr-hero__filmtoggle:focus-visible { opacity: 1; outline: var(--focus-ring-width) solid #fff; outline-offset: 2px; }
.rr-hero__filmtoggle svg { display: block; width: 8px; height: 8px; }
@media (max-width: 860px) {
  .rr-hero__film::after { background: linear-gradient(180deg, rgba(10, 11, 12, .5) 0%, rgba(10, 11, 12, .6) 100%); }
  .rr-band:has(.rr-hero--film) { --film-pad-top: var(--space-12, 48px); --film-pad-bottom: var(--space-20, 80px); }
  .rr-hero--film .rr-hero__body { justify-content: flex-end; }
  .rr-hero--film .rr-hero__body > .rr-hero__filmbar { right: var(--page-gutter); bottom: var(--space-5); }
}
.rr-hero__media img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .rr-hero { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .rr-hero--media .rr-hero__body { flex: 1 1 auto; }
}

/* ---- FeatureRow -------------------------------------------------------- */

/* Top-aligned, not centered. A paragraph floating at the middle of a tall screenshot
   shares no edge with anything; the heading and the top of the media do. */
.rr-feature { display: flex; gap: var(--space-12); align-items: flex-start; font-family: var(--font-sans); }
.rr-feature--flip { flex-direction: row-reverse; }
.rr-feature__body { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rr-feature__mark { margin-bottom: var(--space-4); }
.rr-feature__title { margin: 0; font-size: 27px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-primary); }
:lang(ko) .rr-feature__title { font-size: 26px; line-height: 41px; }
.rr-feature__text { margin-top: var(--space-4); font-size: 17px; line-height: 28px; color: var(--ink-secondary); max-width: 46ch; text-wrap: pretty; }
:lang(ko) .rr-feature__text { font-size: 16px; line-height: 33px; }
.rr-feature__text p { margin: 0 0 var(--space-3); }
.rr-feature__text p:last-child { margin-bottom: 0; }
.rr-feature__points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rr-feature__points li { display: flex; gap: var(--space-3); font-size: 15px; line-height: 24px; color: var(--ink-primary); }
.rr-feature__tick {
  /* The rake was 21.5 degrees: the old polygon slid 70% of 9px across 16px of height,
     which is a slope of 0.394 where the system's is tan 40 = 0.8391. Every other tick
     in the file - Loader, the spinner, CostMeter, AgentHandoff - takes the angle from
     --tick-angle; this one was drawn by hand and missed. The numbers below are the
     40 degree parallelogram solved for a 2px perpendicular stroke: the top edge starts
     at 80% of 13px, travels 10.4px left across 12.4px of height (slope 0.8387), and
     leaves (13 - 10.4) x cos40 = 1.99px of stroke. margin-top centers it on the line's
     ink - cap top to descender, measured at 35.5 to 49.25 on a 15px/24px line - and
     not on the 24px line box, which sits 0.6px lower. */
  flex: none; width: 13px; height: 12.4px; margin-top: 6.1px; background: var(--ink-brand);
  clip-path: polygon(80% 0, 100% 0, 20% 100%, 0 100%);
}
.rr-feature__action { margin-top: var(--space-6); }
.rr-feature__media { flex: 1 1 56%; min-width: 0; }
/* The distance from the rail's edge to the viewport's, written the one way that
   resolves the same wherever it is used - no percentages, so the caption can use it
   to step back onto the rail while the image beside it runs off the page. The old
   form spelled the same idea with 1180 and --space-10 hardcoded, which stopped being
   the rail the moment either changed. The band clips, so a scrollbar costs a few
   pixels of image rather than a horizontal scrollbar on the page. */
.rr-feature--bleed { --rail-inset: max(var(--page-gutter), calc((100vw - var(--rail-max)) / 2)); }
.rr-feature--bleed .rr-feature__media { margin-right: calc(-1 * var(--rail-inset)); }
.rr-feature--bleed.rr-feature--flip .rr-feature__media { margin-right: 0; margin-left: calc(-1 * var(--rail-inset)); }
/* The picture bleeds; its caption is still copy, and copy stays on the rail. */
.rr-feature--bleed .rr-feature__media .rr-figure__caption { padding-right: var(--rail-inset); }
.rr-feature--bleed.rr-feature--flip .rr-feature__media .rr-figure__caption { padding-right: 0; padding-left: var(--rail-inset); }
@media (max-width: 860px) {
  .rr-feature, .rr-feature--flip { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .rr-feature--bleed .rr-feature__media,
  .rr-feature--bleed.rr-feature--flip .rr-feature__media { margin: 0; }
  .rr-feature--bleed .rr-feature__media .rr-figure__caption { padding: 0; }
}

/* ---- Figure ------------------------------------------------------------ */
/* No frame. The caption is what earns the element; a border round a screenshot is the
   container this system argues against. */

.rr-figure { margin: 0; font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-3); }
.rr-figure__frame { width: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); }
.rr-figure__frame > img, .rr-figure__frame > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-figure__caption { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-figure__credit { color: var(--ink-muted); }

/* ---- LogoRow ----------------------------------------------------------- */

.rr-logorow {
  font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.rr-logorow__claim { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-primary); }
.rr-logorow__period { color: var(--ink-secondary); }
.rr-logorow__period::before { content: ', '; }
.rr-logorow__marks {
  list-style: none; margin: 0; padding: 0;
  /* Even spacing: the first mark on the left rail, the last on the right edge, the rest
     spread between, so the gaps are equal whatever the marks' widths. */
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-6);
}
/* Seven or more marks: an even grid of four across, so a wall never ends on a row of two. */
/* Seven or more marks (an investor wall): the grid most company pages use - equal cells on
   hairlines, each mark centered in its cell, so eight marks of any shape read as one set. */
.rr-logorow:has(.rr-logorow__marks > :nth-child(7)) { padding: 0; border: 0; }
.rr-logorow__marks:has(> :nth-child(7)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); }
.rr-logorow__marks:has(> :nth-child(7)) > .rr-logorow__mark { display: flex; align-items: center; justify-content: center; min-height: 128px; padding: var(--space-6);
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.rr-logorow__mark img { display: block; height: calc(26px * var(--logo-scale, 1)); width: auto; max-width: 168px; object-fit: contain; filter: grayscale(1) contrast(1.3); opacity: .78; }
.rr-logorow__mark a:hover img { filter: none; opacity: 1; }
/* A customer sends one file, and it is almost always dark artwork on transparent.
   Inverting is what keeps a row of other people's marks legible on the dark theme
   without asking six companies for a second file. */
/* Dark grounds invert the (dark-on-transparent) customer files: the dark theme, and the
   deep and brand bands in either theme. */
[data-theme="dark"] .rr-logorow__mark img,
.rr-band--deep .rr-logorow__mark img,
.rr-band--brand .rr-logorow__mark img { filter: grayscale(1) invert(1) contrast(1.3); opacity: .82; }
[data-theme="dark"] .rr-logorow__mark a:hover img,
.rr-band--deep .rr-logorow__mark a:hover img,
.rr-band--brand .rr-logorow__mark a:hover img { filter: grayscale(1) invert(1) contrast(1.3); opacity: 1; }
.rr-logorow__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
@media (max-width: 720px) {
  .rr-logorow__marks { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; row-gap: var(--space-6); column-gap: var(--space-6); }
  .rr-logorow__marks:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-logorow__marks:has(> :nth-child(7)) > .rr-logorow__mark { min-height: 96px; padding: var(--space-4); }
  .rr-logorow__mark img { height: calc(20px * var(--logo-scale, 1)); }
}

/* ---- CustomerStory ----------------------------------------------------- */

.rr-story { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; }
.rr-story__head { display: flex; align-items: center; gap: var(--space-3); }
.rr-story__logo img { display: block; height: 22px; width: auto; }
.rr-story__who { display: flex; flex-direction: column; }
.rr-story__customer { font-size: 15px; font-weight: 600; color: var(--ink-primary); }
.rr-story__sector { font-size: 12px; color: var(--ink-secondary); }
.rr-story__figure { display: flex; flex-direction: column; gap: var(--space-1); }
.rr-story__value {
  font-size: 52px; line-height: 56px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink-primary); font-variant-numeric: tabular-nums;
}
.rr-story__label { font-size: 15px; line-height: 24px; color: var(--ink-primary); max-width: 34ch; }
.rr-story__period { margin: 0; font-size: 12px; color: var(--ink-secondary); }
.rr-story__body { font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.rr-story__body p { margin: 0 0 var(--space-3); }
.rr-story__quote { margin-top: var(--space-2); }
.rr-story__more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 14px; font-weight: 500; color: var(--ink-brand); text-decoration: none;
}
.rr-story__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-story__more:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.rr-story__moreIcon { display: inline-flex; }

/* ---- Form -------------------------------------------------------------- */
/* No box. The fields sit on the page ground and hang from the same left edge as
   everything else; a form in a tinted rounded panel is the generated layout's idea
   of importance. */

.rr-form { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-5); max-width: 520px; }
.rr-form__title { margin: 0; font-size: 27px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-primary); }
.rr-form__desc { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.rr-form__errors {
  padding: var(--space-4); border: 1px solid var(--status-danger); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.rr-form__errors:focus { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-form__errorsTitle { margin: 0; font-size: 14px; font-weight: 600; color: var(--status-danger); }
.rr-form__errorsList { margin: 0; padding-left: var(--space-5); font-size: 14px; line-height: 22px; }
.rr-form__errorsList a { color: var(--status-danger); }
.rr-form__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.rr-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rr-form__consent { padding-top: var(--space-1); }
.rr-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.rr-form__note { font-size: 12px; line-height: 18px; color: var(--ink-secondary); max-width: 34ch; }
.rr-form--done { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.rr-form__doneIcon { flex: none; color: var(--status-success); margin-top: 2px; }
.rr-form__doneBody { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-form__doneTitle { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-primary); }
.rr-form__doneText { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-secondary); }

/* ---- PriceTable -------------------------------------------------------- */

.rr-price { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-4); }
.rr-price__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.rr-price__table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 14px; table-layout: fixed; }
.rr-price__table th, .rr-price__table td {
  text-align: left; vertical-align: top; padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
/* Top, not bottom. Bottom put the column's own label on the baseline of the buttons
   beside it, which reads as a fourth button. Fixed layout, so two plans and five are
   the same width as each other rather than whatever their longest cell asked for.
   The 1px height is the usual table-cell trick: it makes the row's height definite,
   which is what lets the cell's contents stretch to it. */
.rr-price__table thead th { border-bottom: 1px solid var(--border-strong); vertical-align: top; height: 1px; }
.rr-price__table tbody th { font-weight: 400; color: var(--ink-primary); }
.rr-price__table thead th:first-child,
.rr-price__table tbody th:first-child { width: 36%; padding-right: var(--space-8); }
.rr-price__plan { display: block; font-size: 17px; font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-3); }
/* The price is the headline of its column, so it is set like one. */
.rr-price__price { margin: 0 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.rr-price__amount { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.rr-price__per { font-size: 12px; color: var(--ink-secondary); }
.rr-price__detail { display: block; font-size: 12px; line-height: 18px; color: var(--ink-secondary); margin-bottom: var(--space-3); max-width: 24ch; }
/* Every plan's button on one line, whether its qualifier ran to one line or three.
   The cell stretches to the row, so the action can be pushed to the bottom of it. */
.rr-price__planCell { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.rr-price__action { display: block; margin-top: auto; padding-top: var(--space-1); }
.rr-price__groupRow th {
  padding-top: var(--space-6); font-size: 12px; font-weight: 600; color: var(--ink-secondary);
  border-bottom: 1px solid var(--border-strong);
}
.rr-price__rowDetail { display: block; font-size: 12px; line-height: 18px; color: var(--ink-secondary); margin-top: 2px; }
.rr-price__yes { display: inline-flex; color: var(--status-success); }
.rr-price__no { display: inline-flex; color: var(--ink-muted); }
.rr-price__val { font-size: 14px; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.rr-price__foot { margin: 0; font-size: 12px; line-height: 19px; color: var(--ink-secondary); }

/* ---- ArticleLayout ----------------------------------------------------- */

.rr-article { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-8); max-width: 42rem; }
.rr-article__head { display: flex; flex-direction: column; gap: var(--space-4); }
.rr-article__title { margin: 0; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.025em; color: var(--ink-primary); text-wrap: balance; }
:lang(ko) .rr-article__title { font-size: 35px; line-height: 50px; }
.rr-article__standfirst { margin: 0; font-size: 19px; line-height: 31px; font-family: var(--font-serif); color: var(--ink-secondary); text-wrap: pretty; }
:lang(ko) .rr-article__standfirst { font-family: var(--font-serif-kr); font-size: 18px; line-height: 32px; }
.rr-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 13px; color: var(--ink-secondary); }
.rr-article__by { display: inline-flex; align-items: center; gap: var(--space-2); }
.rr-article__avatars { display: inline-flex; }
.rr-article__avatar { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-base); }
.rr-article__avatar + .rr-article__avatar { margin-left: -6px; }
.rr-article__avatar > img { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.rr-article__names { color: var(--ink-secondary); }
.rr-article__author { color: var(--ink-primary); font-weight: 600; text-decoration: none; }
a.rr-article__author:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 3px; }
a.rr-article__author:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-article__role { color: var(--ink-secondary); }
.rr-article__finding { margin: var(--space-2) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.rr-article__findingValue { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--ink-primary); }
.rr-article__findingLabel { font-size: 15px; line-height: 24px; color: var(--ink-secondary); max-width: 40ch; }
.rr-article__findingPeriod { color: var(--ink-muted); }
.rr-article__paper { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--ink-brand); font-weight: 600; text-decoration: none; }
.rr-article__paper:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-article__paper:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-article__paperIcon { display: inline-flex; }
.rr-article__toc {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.rr-article__tocTitle { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.rr-article__tocList { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; }
.rr-article__tocList a { color: var(--ink-secondary); text-decoration: none; }
.rr-article__tocList a:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 2px; }
.rr-article__body { font-size: 17px; line-height: 28px; color: var(--ink-primary); }
:lang(ko) .rr-article__body { font-size: 16px; line-height: 33px; }
.rr-article__body p { margin: 0 0 var(--space-5); text-wrap: pretty; }
.rr-article__body h2 { font-size: 27px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; margin: var(--space-10) 0 var(--space-4); }
.rr-article__body h3 { font-size: 21px; line-height: 28px; font-weight: 600; margin: var(--space-8) 0 var(--space-3); }
.rr-article__body ul, .rr-article__body ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.rr-article__body li { margin-bottom: var(--space-2); }
/* :not([class]) because this styles PROSE - a bare blockquote an author typed -
   and every component that ships a blockquote brings its own. Unscoped, this
   rule outranks them on specificity (0,1,1 against a single class) and reaches
   inside them: Quote drew a second rule 24px from its first, and Evidence's
   source passage was repainted as a 23px italic pull quote when it is meant to
   be a 14px secondary passage. A prose rule must stop at prose. */
.rr-article__body blockquote:not([class]) {
  margin: var(--space-8) 0; padding-left: var(--space-5); border-left: 2px solid var(--action-primary);
  font-family: var(--font-serif); font-size: 23px; line-height: 34px; font-style: italic; color: var(--ink-primary);
}
.rr-article__body a { color: var(--ink-brand); }
.rr-article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.rr-article__tag {
  font-size: 12px; color: var(--ink-secondary); text-decoration: none;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 3px var(--space-3);
}
.rr-article__tag:hover { border-color: var(--border-strong); color: var(--ink-primary); }
.rr-article__tag:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ---- PostList ---------------------------------------------------------- */

/* ==== Publications: Research, News, Blog ==================================== */

/* The labeled picture, shared by IndexHeader and NewsSection. */
.rr-pubpic { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-pubpic__frame { display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); aspect-ratio: 3 / 2; }
.rr-pubpic__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-pubpic__caption { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-pubpic__label { margin-left: auto; text-align: right; }

/* IndexHeader: the top of Research, News and Blog. */
.rr-indexhead { font-family: var(--font-sans); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--space-12); row-gap: var(--space-8); align-items: end; }
.rr-indexhead__text { display: flex; flex-direction: column; gap: var(--space-5); }
.rr-indexhead__title { margin: 0; font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -.03em; color: var(--ink-primary); }
:lang(ko) .rr-indexhead__title { font-size: 54px; line-height: 64px; letter-spacing: -.02em; }
.rr-indexhead__lede { margin: 0; max-width: 46ch; font-size: 18px; line-height: 28px; color: var(--ink-secondary); text-wrap: pretty; }
:lang(ko) .rr-indexhead__lede { font-size: 17px; line-height: 30px; word-break: keep-all; }
.rr-indexhead__topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.rr-indexhead__topic { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink-secondary); text-decoration: none; border: 1px solid var(--border-subtle); }
.rr-indexhead__topic:hover { color: var(--ink-primary); border-color: var(--border-strong); }
.rr-indexhead__topic.is-current { color: var(--ink-primary); background: var(--surface-sunken); border-color: var(--surface-sunken); font-weight: 600; }
.rr-indexhead__topic:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-indexhead__figure { grid-column: 1 / -1; margin-top: var(--space-4); }
.rr-indexhead__figure .rr-pubpic__frame { aspect-ratio: 21 / 9; }

/* PostList and its stories. */
.rr-posts { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-12); }
.rr-pub { position: relative; }
.rr-pub__body { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-pub__meta { margin: 0; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); }
.rr-pub__title { margin: 0; font-size: 19px; line-height: 27px; font-weight: 600; text-wrap: pretty; }
.rr-pub__link { color: var(--ink-primary); text-decoration: none; }
.rr-pub__link::after { content: ""; position: absolute; inset: 0; }             /* the whole story is the target */
.rr-pub:hover .rr-pub__link { color: var(--ink-brand); }
.rr-pub__link:focus-visible { outline: none; }
.rr-pub:has(.rr-pub__link:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 4px; border-radius: 4px; }
.rr-pub__summary { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); max-width: 62ch; }
.rr-pub__finding { margin: var(--space-1) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.rr-pub__findingValue { font-size: 17px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink-primary); }
.rr-pub__findingLabel { font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.rr-pub__findingPeriod { color: var(--ink-muted); }
.rr-pub__foot { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-pub__by { color: var(--ink-primary); font-weight: 500; }
.rr-pub__paper { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  color: var(--ink-brand); font-weight: 600; text-decoration: none; }
.rr-pub__paper:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-pub__paper:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-pub__paperIcon { display: inline-flex; }

/* The lead: the newest story, notched. With a picture it runs across. */
.rr-posts__lead { border: 1px solid var(--border-subtle); border-radius: var(--card-radius-feature); border-top-left-radius: 0;
  padding: var(--space-6); background: var(--surface-raised); }
.rr-posts__lead:hover { border-color: var(--border-strong); }
.rr-pub--lead .rr-pub__title { font-size: 27px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.rr-pub--lead .rr-pub__summary { font-size: 15px; line-height: 24px; max-width: 56ch; }
.rr-pub--lead .rr-pub__finding { margin-top: var(--space-3); }
.rr-pub--lead .rr-pub__findingValue { font-size: 40px; line-height: 44px; letter-spacing: -.025em; }
.rr-pub--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }

.rr-posts__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.rr-posts__item { border-bottom: 1px solid var(--border-subtle); padding: var(--space-5) 0; }

/* group="year": the News archive. The year sits in its own column on the left. */
.rr-posts__groups { display: flex; flex-direction: column; gap: var(--space-10); }
.rr-posts__group { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--space-8); }
.rr-posts__year { margin: 0; padding-top: var(--space-4); font-size: 20px; line-height: 28px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-primary); border-top: 1px solid var(--border-strong); }

/* NewsSection: the homepage band. */
.rr-news { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-8); }
.rr-news__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); }
.rr-news__title { margin: 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-primary); }
.rr-news__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink-primary); text-decoration: none; }
.rr-news__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-news__all:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.rr-news__allIcon { display: inline-flex; }
.rr-news__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-12); align-items: start; }
.rr-news__body--text { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.rr-news__lead { display: flex; flex-direction: column; gap: var(--space-5); }
.rr-news__figure .rr-pubpic__frame img { transition: transform var(--duration-slow, 320ms) ease; }
.rr-news__lead:hover .rr-news__figure .rr-pubpic__frame img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .rr-news__lead:hover .rr-news__figure .rr-pubpic__frame img { transform: none; } }
.rr-news__leadText { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-news__meta { margin: 0; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); }
.rr-news__leadTitle { margin: 0; font-size: 27px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.rr-news__summary { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-secondary); max-width: 56ch; }
.rr-news__leadTitle a, .rr-news__itemTitle a { color: var(--ink-primary); text-decoration: none; }
.rr-news__leadTitle a:hover, .rr-news__itemTitle a:hover { color: var(--ink-brand); }
.rr-news__leadTitle a:focus-visible, .rr-news__itemTitle a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-news__list { list-style: none; margin: 0; padding: 0; }
.rr-news__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.rr-news__item:first-child { padding-top: 0; }
.rr-news__itemTitle { margin: 0; font-size: 19px; line-height: 27px; font-weight: 600; text-wrap: pretty; }

:lang(ko) .rr-pub__title, :lang(ko) .rr-pub__summary, :lang(ko) .rr-news__summary,
:lang(ko) .rr-news__itemTitle, :lang(ko) .rr-news__leadTitle { word-break: keep-all; }

@media (max-width: 860px) {
  .rr-pubpic__caption { flex-direction: column; gap: 2px; }
  .rr-pubpic__label { margin-left: 0; text-align: left; }
  .rr-indexhead { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .rr-indexhead__title { font-size: 40px; line-height: 46px; }
  .rr-indexhead__topics { order: 3; margin: 0 calc(-1 * var(--page-gutter, 24px)); overflow-x: auto; scrollbar-width: none; }
  .rr-indexhead__topics ul { flex-wrap: nowrap; justify-content: flex-start; padding: 0 var(--page-gutter, 24px); }
  .rr-indexhead__topic { min-height: 44px; white-space: nowrap; }
  .rr-indexhead__figure { order: 2; margin: 0; }
  .rr-indexhead__figure .rr-pubpic__frame { aspect-ratio: 4 / 3; }
  .rr-pub--media { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .rr-posts__lead { padding: var(--space-5); }
  .rr-pub--lead .rr-pub__findingValue { font-size: 32px; line-height: 36px; }
  .rr-posts__group { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .rr-posts__year { border-top: 0; padding-top: 0; }
  .rr-news__body { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .rr-news__title { font-size: 27px; line-height: 34px; }
  .rr-news__item:first-child { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
}

/* ==== Company: Milestones, PeopleList ====================================== */

.rr-miles { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans);
  display: grid; grid-template-columns: repeat(var(--rr-miles-n, 7), minmax(0, 1fr)); column-gap: var(--space-5);
  border-top: 1px solid var(--border-strong); }
.rr-miles__item { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-5); position: relative; }
.rr-miles__mark { position: absolute; top: -6px; left: 0; display: inline-flex; height: 12px; align-items: center; }
.rr-miles__year { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink-primary); }
.rr-miles__text { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-secondary); text-wrap: pretty; }
.rr-miles__item--now .rr-miles__year { color: var(--ink-brand); }
.rr-miles__item--now .rr-miles__text { color: var(--ink-primary); }
:lang(ko) .rr-miles__text { word-break: keep-all; }

.rr-people { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: var(--space-6); row-gap: var(--space-8); }
.rr-people__item { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-4); border-top: 1px solid var(--border-strong); }
.rr-people__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-4); background: var(--surface-sunken); }
.rr-people--photos .rr-people__item { border-top: 0; padding-top: 0; }
.rr-people__name { margin: 0; font-size: 19px; line-height: 27px; font-weight: 600; color: var(--ink-primary); }
.rr-people__name a { color: inherit; text-decoration: none; }
.rr-people__name a:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 3px; }
.rr-people__name a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.rr-people__title { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.rr-people__bio { margin: var(--space-2) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); max-width: 36ch; }


@media (max-width: 860px) {
  .rr-miles { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .rr-miles__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
  .rr-miles__item:first-child { border-top-color: var(--border-strong); }
  .rr-miles__mark { display: none; }
  .rr-miles__year { font-size: 17px; line-height: 23px; }
}

/* ---- StoryHeader ------------------------------------------------------- */

.rr-storyhead { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-6); }
.rr-storyhead__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 13px; }
.rr-storyhead__logo img { display: block; height: 22px; width: auto; }
.rr-storyhead__customer { font-weight: 600; color: var(--ink-primary); }
.rr-storyhead__sector { color: var(--ink-secondary); }
.rr-storyhead__sector::before { content: '\00b7'; margin-right: var(--space-2); color: var(--border-strong); }
.rr-storyhead__claim { margin: 0; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.025em; color: var(--ink-primary); max-width: 28ch; text-wrap: balance; }
:lang(ko) .rr-storyhead__claim { font-size: 35px; line-height: 50px; }
/* Three rows across every fact - figure, period, label - and not two. With two, a
   fact carrying a period made its whole cell taller, so the figures beside it sat
   level with that period line instead of with the figure. Each part now has a row
   of its own and the row is shared, which is the one thing a row of figures has to
   get right. */
.rr-storyhead__facts {
  margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  display: grid; grid-template-rows: auto auto auto; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-12); row-gap: 2px;
}
.rr-storyhead__fact { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: inherit; }
.rr-storyhead__fact dd { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; margin: 0; row-gap: inherit; }
/* Bottom of its own row, so the larger first figure and the smaller two sit on one
   line rather than one hanging below the others. */
.rr-storyhead__value  { grid-row: 1; align-self: end; }
.rr-storyhead__period { grid-row: 2; align-self: start; }
.rr-storyhead__fact dt { grid-row: 3; align-self: start; margin-top: var(--space-3); }
.rr-storyhead__fact:first-child .rr-storyhead__value { font-size: 52px; line-height: 56px; }
@media (max-width: 720px) {
  .rr-storyhead__facts { grid-auto-flow: row; grid-template-rows: none; gap: var(--space-6); }
  .rr-storyhead__fact { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
  .rr-storyhead__fact dd { display: flex; flex-direction: column; }
  .rr-storyhead__value, .rr-storyhead__period { align-self: flex-start; }
  .rr-storyhead__fact dt { margin-top: 0; }
  .rr-storyhead__fact:first-child .rr-storyhead__value { font-size: 44px; line-height: 48px; }
}
/* The label is what the figure means, so it is the darker of the two lines under it.
   Set at the same size and color as the period, the two read as one two-line caption
   and a fact carrying a period looked a row out of step with the ones that do not. */
.rr-storyhead__fact dt { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-primary); max-width: 22ch; }
/* Layout for this lives with the facts grid above. Left as a flex column here it
   silently won that rule, and `align-self: end` on the figure then meant "right"
   rather than "bottom of its row" - a column flex container's cross axis is
   horizontal. That is how the figures ended up right-aligned in their columns. */
.rr-storyhead__fact dd { margin: 0; }
.rr-storyhead__value { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
/* An annotation on the figure, not a second label: smaller, quieter, and tight up
   against the number it qualifies. */
.rr-storyhead__period { font-size: 11px; line-height: 16px; color: var(--ink-secondary); }

/* ---- LegalDoc ---------------------------------------------------------- */

.rr-legal { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-8); max-width: 44rem; }
.rr-legal__head { display: flex; flex-direction: column; gap: var(--space-3); }
.rr-legal__title { margin: 0; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.025em; color: var(--ink-primary); }
.rr-legal__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 13px; color: var(--ink-secondary); }
.rr-legal__entity { font-weight: 600; color: var(--ink-primary); }
.rr-legal__summary { margin: var(--space-2) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-secondary); padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.rr-legal__toc { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.rr-legal__tocList { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; }
.rr-legal__tocList a { color: var(--ink-secondary); text-decoration: none; }
.rr-legal__tocList a:hover { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 2px; }
.rr-legal__body { display: flex; flex-direction: column; gap: var(--space-8); }
.rr-legal__section { scroll-margin-top: var(--space-16); }
.rr-legal__h { display: flex; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--ink-primary); }
.rr-legal__n { color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rr-legal__text { font-size: 15px; line-height: 26px; color: var(--ink-primary); }
.rr-legal__text p { margin: 0 0 var(--space-4); }
.rr-legal__text ul, .rr-legal__text ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.rr-legal__text li { margin-bottom: var(--space-2); }
.rr-legal__text dfn { font-style: normal; font-weight: 600; }
.rr-legal__text a { color: var(--ink-brand); }
.rr-legal__history { padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.rr-legal__historyList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.rr-legal__historyList li { display: flex; gap: var(--space-4); }
.rr-legal__hDate { flex: none; width: 8rem; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.rr-legal__contact { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); }

@media print {
  .rr-legal { max-width: none; gap: 12pt; color: #000; }
  .rr-legal__toc, .rr-legal__summary { border: 0; background: none; padding: 0; }
  .rr-legal__title { font-size: 18pt; line-height: 22pt; }
  .rr-legal__h { font-size: 12pt; line-height: 16pt; page-break-after: avoid; }
  .rr-legal__text { font-size: 10pt; line-height: 15pt; }
  .rr-legal__section { page-break-inside: avoid; }
  .rr-legal__text a::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #444; }
}

/* ==========================================================================
   Optical left: type set against a hard edge
   The reasoning, the measurements and the cases that were rejected are in
   15-optical.md. These values are literal on purpose.
   ========================================================================== */

/* Measured from rendered glyphs at deviceScaleFactor 4, not from font metrics.
   Pretendard puts 13 of its 26 capitals - every flat-stemmed one - exactly 3.75px
   right of the text box at 72px, 2.75px at 52px and 2.00px at 36px. That is the
   same 5.2% of the size three times, so it is a property of the face and can be
   written once in em. Round caps sit at 4.5% and diagonals at 1.7%, which is the
   face doing its own optical spacing; correcting to the stem leaves O half a pixel
   inside the rail and A two and a half, which is where they belong. */
.rr-hero__lede, .rr-hero__foot { margin-left: -0.054em; }

/* Newsreader's mode is 4.3% at 64px and 4.4% at 40px, not Pretendard's 5.2%, so
   Statement gets its own number. The mark inside it is Pretendard and gets the
   other one. */
.rr-statement > * { margin-left: -0.043em; }
.rr-statement > .rr-statement__mark { margin-left: -0.054em; }

/* Not corrected, and each for its own reason:
   - the lockup and any image in the hero, because an image's left edge is its
     own edge and has no side bearing to remove;
   - .rr-hero__actions, because a button's border is the edge - shifting it would
     misalign the box to align the label inside it;
   - Quote, because .rr-voice-quote is italic and Newsreader's italic mode is
     already 0.00px: B, D and E sit flush and the round caps hang past the rule;
   - Korean, below. */
:lang(ko) .rr-hero__lede, :lang(ko) .rr-hero__foot,
[lang="ko"] .rr-hero__lede, [lang="ko"] .rr-hero__foot,
.rr-statement:lang(ko) > *, [lang="ko"] .rr-statement > * { margin-left: 0; }

/* ---------------------------------------------------- The figures, at size */
/* Pretendard's 6 and 9 end in a curl. Its ss01 set ends them in a straight
   stroke instead, which is the rule the icons already follow - butt caps, no
   round terminals - applied to the one place in the system where the face
   disagrees with it. Turned on only where a figure is large enough for the
   difference to be there: at 14px the curl is two pixels and changing it is
   churn. Not set globally, because ss01 in Wanted Sans means Q, j and t, and a
   global would reach into a face where the same name means something else.
   This replaced a house figure set, drawn and then rejected; 15-optical.md. */
.rr-stat__value, .rr-storyhead__value, .rr-price__amount, .rr-meter__value {
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* ------------------------------------------------- What the screens changed */
/* Streaming's label: the line that says what it is doing, beside the text it is
   producing. See ScreenDesk. */
.rr-streaming__label { color: var(--ink-secondary); margin-right: var(--space-2); }

/* Hangul must not break mid-syllable-block in a data cell. The keep-all rule is scoped
   to [lang="ko"], which PageShell guarantees on the website and nothing guarantees in a
   product screen, so a mixed-language table broke 주식회사 한미글로벌엔지니어링건설 across three
   lines at an arbitrary point. A cell marked lang="ko" now gets the rule wherever it is. */
.rr-table td:lang(ko), .rr-table th:lang(ko) {
  word-break: keep-all; overflow-wrap: break-word;
}

/* A money column. The system's founding argument is a price set in the wrong currency,
   and three right-aligned strings put ₩, ₹ and $ in three different places. The symbol
   pins left, the figure pins right, and the column is tabular. */
.rr-table .rr-table--money { text-align: right; }
.rr-table .rr-table--money > span { display: flex; justify-content: space-between; gap: var(--space-4);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; }
.rr-table .rr-table--money .rr-money__sym { color: var(--ink-secondary); }

/* ==========================================================================
   AppShell: the frame a product screen lives in
   Built after a real Desk screen had to hand-roll forty lines of chrome.
   ========================================================================== */

.rr-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  min-height: 100%;
  background: var(--surface-base);
  font-family: var(--font-sans);
  color: var(--ink-primary);
}
.rr-shell--norail { grid-template-columns: 232px minmax(0, 1fr); }

.rr-shell__skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--space-3) var(--space-4); background: var(--surface-raised);
  color: var(--ink-primary); font-size: 13px; border-radius: 0 0 var(--radius-md) 0;
}
.rr-shell__skip:focus { left: 0; outline: var(--focus-ring-width) solid var(--focus-ring); }

/* The sidebar. In light, sunken reads as its own region; in dark, sunken and base sit
   within two points of lightness, so the region was doing nothing but its border. Dark
   gets raised instead, which is the direction elevation actually runs there. */
.rr-shell__side {
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  display: flex; flex-direction: column; min-width: 0;
}
[data-theme="dark"] .rr-shell__side { background: var(--surface-raised); }

/* Product theming (20-color.md). data-product on the shell maps the product's roles
   onto four generic variables; the wash tokens carry their own dark value. The light
   enters from the top edge of the sidebar - the system's wash-edge, tinted - and fades
   out before the nav, so selection, text and controls stay Redrob Blue and ink. Only
   AppShell reads --product-*; lint/system.py fails any other component that does. */
.rr-shell[data-product="router"]  { --product-mark: var(--product-router);  --product-wash: var(--product-router-wash);  --product-fill: var(--product-router-fill);  --product-line: var(--product-router-line); }
.rr-shell[data-product="chat"]    { --product-mark: var(--product-chat);    --product-wash: var(--product-chat-wash);    --product-fill: var(--product-chat-fill);    --product-line: var(--product-chat-line); }
.rr-shell[data-product="code"]    { --product-mark: var(--product-code);    --product-wash: var(--product-code-wash);    --product-fill: var(--product-code-fill);    --product-line: var(--product-code-line); }
.rr-shell[data-product="desk"]    { --product-mark: var(--product-desk);    --product-wash: var(--product-desk-wash);    --product-fill: var(--product-desk-fill);    --product-line: var(--product-desk-line); }
.rr-shell[data-product="office"]  { --product-mark: var(--product-office);  --product-wash: var(--product-office-wash);  --product-fill: var(--product-office-fill);  --product-line: var(--product-office-line); }
.rr-shell[data-product="browser"] { --product-mark: var(--product-browser); --product-wash: var(--product-browser-wash); --product-fill: var(--product-browser-fill); --product-line: var(--product-browser-line); }
.rr-shell[data-product="design"]  { --product-mark: var(--product-design);  --product-wash: var(--product-design-wash);  --product-fill: var(--product-design-fill);  --product-line: var(--product-design-line); }
.rr-shell[data-product] .rr-shell__side {
  background-image: linear-gradient(180deg, var(--product-wash) 0, transparent 132px);
}
/* On dark the wash is step 10, which at full strength reads as a band of color rather
   than light at the edge. Half of it is enough to say which product this is. */
[data-theme="dark"] .rr-shell[data-product] .rr-shell__side {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--product-wash) 55%, transparent) 0, transparent 132px);
}

.rr-shell__brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden;
  padding: var(--space-5) var(--space-4) var(--space-4); }
.rr-shell__product { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-primary); }

.rr-shell__nav { display: flex; flex-direction: column; gap: 1px; padding: var(--space-1) var(--space-2); }
.rr-shell__nav a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-2); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-secondary); text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}
.rr-shell__nav a:hover { background: var(--surface-base); color: var(--ink-primary); }
[data-theme="dark"] .rr-shell__nav a:hover { background: var(--surface-sunken); }
/* The ground and the weight carry the selection. No inset bar down the left
   edge: a tinted pill with a bright rule on one side is the most copied
   sidebar in software and it reads as a template rather than as this system. */
.rr-shell__nav a[aria-current] {
  background: var(--surface-base); color: var(--ink-primary); font-weight: 600;
}
[data-theme="dark"] .rr-shell__nav a[aria-current] { background: var(--surface-sunken); }
.rr-shell__nav a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.rr-shell__navicon { display: inline-flex; flex: none; color: var(--ink-muted); }
.rr-shell__nav a[aria-current] .rr-shell__navicon { color: var(--ink-brand); }
.rr-shell__navlabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-shell__navmeta { flex: none; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rr-shell__aside { padding: var(--space-4) var(--space-2) var(--space-4); min-width: 0; }

.rr-shell__main { display: flex; flex-direction: column; min-width: 0; }
.rr-shell__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle);
}
.rr-shell__heading { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.rr-shell__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rr-shell__meta { margin: 0; font-size: 12px; color: var(--ink-muted); }
.rr-shell__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* The measure. With the rail dropped at 1080px the work column ran body text to about
   1100px, which is twice a readable line. The website caps at --rail-max; product had
   nothing, so it gets its own, narrower, because a work column is read not scanned. */
.rr-shell__work { padding: var(--space-6); display: flex; flex-direction: column;
  gap: var(--space-6); min-width: 0; flex: 1 1 auto; }
.rr-shell__work > * { max-width: var(--work-max, 860px); }
.rr-shell__work--full > * { max-width: none; }
/* The work region takes programmatic focus from the skip link. Hiding the ring
   outright also hid it from anyone who tabbed there, so it is hidden only when
   the focus did not come from the keyboard. */
.rr-shell__main:focus:not(:focus-visible) { outline: none; }
.rr-shell__work { min-width: 0; }

.rr-shell__foot { margin-top: auto; border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-6) var(--space-5); background: var(--surface-base);
  display: flex; flex-direction: column; gap: var(--space-3); }
.rr-shell__foot > * { max-width: var(--work-max, 860px); }

.rr-shell__rail { border-left: 1px solid var(--border-subtle); padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

/* The rail drops first, then the sidebar narrows. Nothing reflows into a hamburger
   here: that is the consumer's call and depends on the product. */
@media (max-width: 1180px) {
  .rr-shell { grid-template-columns: 232px minmax(0, 1fr); }
  .rr-shell__rail { display: none; }
}
@media (max-width: 900px) {
  .rr-shell, .rr-shell--norail { grid-template-columns: 76px minmax(0, 1fr); }
  .rr-shell__product, .rr-shell__navlabel, .rr-shell__navmeta, .rr-shell__aside { display: none; }
  .rr-shell__nav a { justify-content: center; }
  .rr-shell__brand { justify-content: center; padding-inline: var(--space-2); }
}

/* ==========================================================================
   The borders
   Six controls at the places an interface decides who gets to use it.
   ========================================================================== */

.rr-name, .rr-addr { display: flex; flex-direction: column; gap: var(--space-4); }
.rr-addr--group { border: 0; margin: 0; padding: 0; min-width: 0; }
.rr-addr--group > legend { padding: 0; margin-bottom: var(--space-3); font-size: 15px; }
.rr-name__row, .rr-addr__row { min-width: 0; }
/* a postcode is short and the field should say so, the way a day field says two digits */
.rr-addr__row--short { max-width: 13rem; }

.rr-phone__row { display: flex; gap: var(--space-2); align-items: stretch; }
.rr-phone__country { flex: none; width: 7.5rem; }
.rr-phone__num { flex: 1 1 auto; min-width: 0; }

/* Money. The symbol is its own span so a column can pin it left while the
   figures pin right, and so it can sit a step back in the ink scale: the
   figure is the information, the symbol is the unit. */
.rr-money { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1;
  white-space: nowrap; }
.rr-money__sym { color: var(--ink-secondary); }

/* ConvertedAmount. The local figure leads at full weight; the conversion is a
   second reading, not an equal one; the rate line is the receipt. */
.rr-fx { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans); }
.rr-fx__local { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink-primary); }
.rr-fx__conv { display: flex; align-items: baseline; gap: var(--space-2);
  font-size: 15px; line-height: 22px; color: var(--ink-secondary); }
.rr-fx__eq { color: var(--ink-muted); }
.rr-fx__rate { margin: var(--space-1) 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; }
.rr-fx__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }

/* Timestamp. The zone is part of the value, so it is not allowed to be quieter
   than the time it qualifies. The second zone is, because it is the other
   party's and the reader is not in it. */
.rr-time { font-variant-numeric: tabular-nums; }
.rr-time__origin { color: var(--ink-muted); margin-left: var(--space-2); }
.rr-time__origin::before { content: ''; display: inline-block; width: 2px; height: 9px;
  margin-right: var(--space-2); background: var(--border-strong);
  transform: rotate(var(--tick-angle)); vertical-align: -1px; }

/* ---- DateInput and the rebuilt DatePicker ------------------------------- */

.rr-dateinput { border: 0; margin: 0; padding: 0; min-width: 0; font-family: var(--font-sans); }
.rr-dateinput__legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--ink-primary);
  margin-bottom: var(--space-2); }
.rr-dateinput__row { display: flex; gap: var(--space-3); align-items: flex-end; }
.rr-dateinput__label { display: block; font-size: 12px; color: var(--ink-secondary);
  margin-bottom: var(--space-1); }
/* the width is the instruction: two characters for a day, four for a year. The
   month is wider than a number because it also takes the word. */
.rr-dateinput__part--two { width: 4.5rem; }
.rr-dateinput__part--three { width: 8rem; }
.rr-dateinput__part--four { width: 6rem; }
.rr-dateinput__part input { width: 100%; }

.rr-datepicker__field { display: flex; gap: var(--space-2); align-items: center; }
.rr-datepicker__input { flex: 1 1 auto; min-width: 0; }
.rr-datepicker__open { flex: none; }
.rr-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  padding: 0 var(--space-2) var(--space-1); }
.rr-cal__days span { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-muted);
  padding: var(--space-1) 0; }

/* ---- Charts -------------------------------------------------------------
   Square corners and butt caps, because corners are corners here. The dataviz
   default is a 4px rounded data end; this system says no rounded terminals
   anywhere, and a bar is a mark like any other. Hairlines at three values, not
   a grid: the rules are there to be read past. */

.rr-chart { margin: 0; font-family: var(--font-sans); display: flex; flex-direction: column;
  gap: var(--space-2); }
.rr-chart__title { font-size: 14px; font-weight: 600; letter-spacing: -0.008em; color: var(--ink-primary); }
.rr-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.rr-chart__key { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12px; color: var(--ink-secondary); }
/* the swatch carries identity; the label stays in ink, never in the series color */
.rr-chart__swatch { width: 9px; height: 9px; flex: none; }
.rr-chart__plot { display: block; width: 100%; height: auto; overflow: visible; }
.rr-chart__rules line { stroke: var(--border-subtle); stroke-width: 1; }
.rr-chart__rules text, .rr-chart__xlab text { font-size: 11px; fill: var(--ink-muted);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.rr-chart__xlab--on { fill: var(--ink-primary); font-weight: 600; }
.rr-chart__honest { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.rr-chart__table-toggle { align-self: flex-start; background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px; color: var(--ink-brand); cursor: pointer; text-decoration: none; }
.rr-chart__table-toggle:hover { text-decoration: underline; text-underline-offset: 2px; }
.rr-chart__table-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px; border-radius: 2px; }
.rr-chart__table { margin-top: var(--space-2); }
.rr-spark { display: inline-block; flex: none; width: 96px; height: 24px; vertical-align: middle;
  color: var(--ink-brand); }

/* ---- Illustration ------------------------------------------------------- */

.rr-ill { display: inline-block; color: var(--ink-primary); }
.rr-ill svg { display: block; width: 100%; height: auto; }
/* an object is a thing in the world and takes the ink; a construction is the
   brand's own geometry and sits quieter, because it is a ground rather than a
   subject */
.rr-ill--construction { color: var(--ink-secondary); }
.rr-ill--sm { width: 96px; }
.rr-ill--md { width: 160px; }
.rr-ill--lg { width: 260px; }
.rr-ill--xl { width: 400px; }

/* ==========================================================================
   Motion: the grammar
   The four curves were already here. What was missing is what they are for,
   and what the brand's 40 degrees does when it moves. See 40-surfaces-and-motion.md.
   ========================================================================== */

/* One travel distance, resolved onto the rake. 16px along the 40 degree axis is
   12.25 across and 10.28 up, and everything that arrives arrives along it. */
:root { --rake-dx: 12.25px; --rake-dy: 10.28px; }

@keyframes rr-arrive {
  from { opacity: 0; transform: translate(calc(var(--rake-dx) * -1), var(--rake-dy)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes rr-leave {
  from { opacity: 1; transform: translate(0, 0); }
  to   { opacity: 0; transform: translate(var(--rake-dx), calc(var(--rake-dy) * -1)); }
}
/* A threshold crossing, not a fade. The edge is the mark's own angle and it
   travels; the thing behind it is revealed rather than faded up. */
@keyframes rr-cross {
  from { clip-path: polygon(-40% 0%, -31.6% 0%, -48.4% 100%, -40% 100%); }
  to   { clip-path: polygon(-40% 0%, 128.4% 0%, 111.6% 100%, -40% 100%); }
}

.rr-arrive { animation: rr-arrive var(--duration-base) var(--easing-entrance) both; }
.rr-leave  { animation: rr-leave var(--duration-fast) var(--easing-exit) both; }
.rr-cross  { animation: rr-cross var(--duration-slow) var(--easing-standard) both; }
/* the overshoot that means a control has taken the change, not that it is happy */
.rr-settle { transition: transform var(--duration-fast) var(--easing-settle); }

/* Stagger. Never more than five, never more than 40ms apart: past that a list
   stops reading as one thing arriving and starts reading as a performance. */
.rr-stagger > * { animation: rr-arrive var(--duration-base) var(--easing-entrance) both; }
.rr-stagger > :nth-child(1) { animation-delay: 0ms; }
.rr-stagger > :nth-child(2) { animation-delay: 40ms; }
.rr-stagger > :nth-child(3) { animation-delay: 80ms; }
.rr-stagger > :nth-child(4) { animation-delay: 120ms; }
.rr-stagger > :nth-child(n+5) { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .rr-arrive, .rr-leave, .rr-cross, .rr-stagger > * { animation: none; }
  .rr-settle { transition: none; }
}

/* ==========================================================================
   Hindi. See 37-devanagari.md.
   Korean needed a size correction because Hangul sits taller than Latin caps.
   Devanagari does not: Noto Sans Devanagari's x-height is 0.536 em against
   Pretendard's 0.530, so the sizes are the same and only the leading changes.
   What Devanagari needs instead is vertical room. Its ink spans 1.164 em,
   because matras stack above the headline and conjuncts hang below the
   baseline, and Latin leading cuts both off.
   ========================================================================== */

:lang(hi), [lang="hi"] {
  font-family: var(--font-sans-hi, 'Noto Sans Devanagari', Pretendard, 'Nirmala UI', sans-serif);
}

/* The floor. At text sizes 1.45 is the point below which a matra above and a
   conjunct below start meeting the lines either side of them. Display lines
   stand alone, so they tighten toward 1.3, still clear of the 1.164 em ink:
   the hero here is 72/94 where the Latin one is 72/72. */
:lang(hi) .rr-voice-1, [lang="hi"] .rr-voice-1 { font-size: 60px; line-height: 84px; letter-spacing: 0; }
:lang(hi) .rr-voice-2, [lang="hi"] .rr-voice-2 { font-size: 38px; line-height: 56px; letter-spacing: 0; }
:lang(hi) .rr-voice-quote, [lang="hi"] .rr-voice-quote { font-size: 21px; line-height: 38px; font-style: normal; letter-spacing: 0; }
:lang(hi) .rr-voice-lede, [lang="hi"] .rr-voice-lede { font-size: 18px; line-height: 33px; letter-spacing: 0; }

/* Devanagari has no italic and no small caps. A slanted substitute is as wrong
   here as it is in Nanum Myeongjo, so the voice is set upright and carries its
   emphasis with the rule and the ground instead. */
:lang(hi) em, :lang(hi) i, [lang="hi"] em, [lang="hi"] i { font-style: normal; font-weight: 600; }

/* Devanagari breaks between words, so keep-all is wrong here - that rule is
   Korean's, where a syllable block has no word boundary in it. Hindi wants
   ordinary word wrapping and a guard against a long compound. */
:lang(hi), [lang="hi"] { word-break: normal; overflow-wrap: break-word; }

/* A cell in a mixed-script table, the same way Korean gets one. */
.rr-table td:lang(hi), .rr-table th:lang(hi) { line-height: 1.7; }

/* ---- Texture: pattern derived from the mark ------------------------------
   Five patterns, all built from the same 40 degree rake as the logo, the tick,
   the icons and the direction the light travels. CSS gradient angles measure
   clockwise from "to top", so a stripe rising 40 degrees to the right is
   180 - 40 = 140deg. Nothing here is a background image; a pattern that ships
   as a PNG is a pattern nobody can retune, and at 2x it is also 40KB.

   These are ATMOSPHERE, not information. The rules are in 48-pattern.md and
   the short version is: never behind body copy, one per page, and if you
   cannot see it in a screenshot at 100% you have set it correctly. */
:root {
  --tex-ink: var(--ink-primary);
  --tex-alpha: 0.05;
  --tex-scale: 14px;          /* the stripe period, measured across the stripe */
}
[data-theme="dark"] { --tex-alpha: 0.07; }

.rr-tex { position: relative; isolation: isolate; }
.rr-tex::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--tex-alpha); color: var(--tex-ink);
}

/* 1. Rake. The house stripe: 2px on the rake, the icon stroke weight, at the
      icon angle. Use it on a ground change, never over type. */
.rr-tex--rake::before {
  background-image: repeating-linear-gradient(140deg,
    currentColor 0 2px, transparent 2px var(--tex-scale));
}

/* 2. Threshold. One rake stripe every eight, so the field reads as a border
      being crossed at intervals rather than as hatching. The mark's idea at
      page scale. */
.rr-tex--threshold::before {
  background-image: repeating-linear-gradient(140deg,
    currentColor 0 2px, transparent 2px calc(var(--tex-scale) * 6));
}

/* 3. Weave. The rake and its complement at 50 degrees - the two angles the
      logo's faces already use. The only pattern in the set with a second
      direction in it, so it is also the only one that can carry a large
      empty area without reading as a mistake. */
.rr-tex--weave::before {
  background-image:
    repeating-linear-gradient(140deg, currentColor 0 1.5px, transparent 1.5px var(--tex-scale)),
    repeating-linear-gradient(40deg,  currentColor 0 1.5px, transparent 1.5px var(--tex-scale));
}

/* 4. Rule. Horizontal hairlines at the body leading, so a texture panel and a
      paragraph beside it are on the same rhythm. The one pattern that is not
      raked, because a ruled ground is a page, and a page is level. */
.rr-tex--rule::before {
  /* 24px, which is `body`'s line-height. It was var(--leading-body, 28px) and
     that token does not exist, so it always fell back to 28 - `body-lg`'s
     leading, not `body`'s. The claim that a texture panel and the paragraph
     beside it share a rhythm was false by 4px per line. */
  background-image: repeating-linear-gradient(180deg,
    currentColor 0 1px, transparent 1px 24px);
}

/* 5. Grid. The 2x2 dot of the icon set, repeated on the rake. Dots sit on a
      raked lattice rather than a square one, which is the only thing that
      keeps it from being every dotted background ever shipped. */
.rr-tex--grid::before {
  background-image: radial-gradient(currentColor 1px, transparent 1.2px),
                    radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: var(--tex-scale) calc(var(--tex-scale) * 0.839);
  background-position: 0 0, calc(var(--tex-scale) / 2) calc(var(--tex-scale) * 0.4196);
}

/* Scale. Three steps and no more - the pattern is a texture at every one of
   them, and a graphic at anything larger. */
.rr-tex--fine  { --tex-scale: 8px; }
.rr-tex--coarse{ --tex-scale: 24px; }

/* Fade. A pattern that stops at a hard edge reads as a swatch; one that runs
   off the page reads as ground. The mask travels on the rake too. */
.rr-tex--fade::before {
  -webkit-mask-image: linear-gradient(140deg, #000 0%, #000 45%, transparent 85%);
          mask-image: linear-gradient(140deg, #000 0%, #000 45%, transparent 85%);
}

/* On the brand ground the pattern is the light, not the ink. */
.rr-band--brand.rr-tex::before, .rr-tex--reverse::before {
  --tex-ink: var(--ink-on-brand); --tex-alpha: 0.14;
}
/* Light on a saturated ground carries far less apparent texture than ink on
   paper does, so the brand ground runs at 14% rather than 5. Measured, not
   guessed: at 5% the stripe is invisible on the deep gradient. */

/* Weave is two gradient layers, so every crossing is two passes of the ink and
   lands at roughly twice the density the other four run at. 0.7 puts the
   crossings back on the same weight, which is what "all five at 5%" has to
   mean if it means anything. */
.rr-tex--weave::before { opacity: calc(var(--tex-alpha) * 0.7); }

/* Print: a pattern is atmosphere and atmosphere does not survive a laser
   printer - it survives as gray. Off. */
@media print { .rr-tex::before { display: none; } }

/* The same three switches the wash and the grain already answer to. A texture
   is atmosphere of exactly that class and shipped without them, which was an
   oversight rather than a decision: 40-surfaces-and-motion.md says atmosphere
   must survive being switched off. Forced colors matters most - it overrides
   color but not opacity, so a 5% stripe of CanvasText can render at full
   strength over a high-contrast ground. */
@media (prefers-reduced-transparency: reduce) { .rr-tex::before { display: none; } }
@media (forced-colors: active) { .rr-tex::before { display: none; } }
@media (prefers-contrast: more) { .rr-tex::before { display: none; } }

/* ---- Diagram -------------------------------------------------------------
   The one thing that separates a diagram from a picture of boxes is whether
   its encodings are declared. Here they are: SHAPE says what a step is, GROUND
   says who acted, and SEQUENCE says when. Nothing else carries meaning - not
   size, not position on the page, not color beyond the two grounds.

   And no arrowheads. An arrow in a process diagram is doing the job that
   reading order already does, and once one connector has a head every
   connector needs one, which is how a five-box diagram acquires forty lines.
   Direction here is the 40 degree tick at each junction: the same mark that
   opens a section head, pointing the way the page already reads. */

.rr-dia { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rr-dia__title {
  font-size: 13px; line-height: 20px; font-weight: 600;
  color: var(--ink-secondary); order: -1;
}
.rr-dia__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rr-dia--flow  > .rr-dia__steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.rr-dia--stack > .rr-dia__steps { grid-auto-flow: row; gap: 10px; }

.rr-dia__step {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px 16px;
  background: var(--surface-base);
  border-top: 2px solid var(--ink-primary);
}
/* The junction tick. A 40 degree mark in the gap between two steps, drawn on
   the border they share, pointing the way the diagram reads. */
.rr-dia__step + .rr-dia__step::before {
  content: ""; position: absolute; pointer-events: none;
  width: 11px; height: 2px; background: var(--action-primary);
  transform: rotate(-40deg);
}
.rr-dia--flow .rr-dia__step + .rr-dia__step::before { left: -11px; top: -2px; }
/* In the flow view the rule is broken by the column gap, so the tick sits in
   that break and reads as a junction. Stacked, the rule runs unbroken across
   the step, and a tick laid across it read as a scratch rather than a mark, so
   here it sits in the row gap above the rule instead. */
.rr-dia--stack .rr-dia__step + .rr-dia__step::before { left: 12px; top: -7px; }
/* The gap belongs to the grid, not to the item. A margin on an item sized
   minmax(0, 1fr) makes the item wider than the column it sits in, so the steps
   overlapped and their top rules ran into one another. */

/* Ground says who acted. Two grounds, because there are two answers that
   matter to a person reading a decision: a human did this, or a machine did. */
.rr-dia__step--person   { background: var(--surface-base);   border-top-color: var(--ink-primary); }
.rr-dia__step--machine  { background: var(--surface-raised);  border-top-color: var(--action-primary); }
.rr-dia__step--system   { background: var(--surface-sunken);  border-top-color: var(--border-strong); }
/* A decision is a person too - its footer says so - so it keeps the person's
   ground and the person's rule. It used to double the rule to 4px, which put a
   second weight in a row of fives and read as a misrendered border rather than
   as meaning. The rake carries it instead: the mark's own 40 degrees, the same
   angle as the junction tick, at the texture register's alpha. */
.rr-dia__step--decision {
  background-color: var(--surface-base);
  /* A band under the rule, not a fill. Filling the cell made a tall lane step
     read as a hatched placeholder - the missing-image swatch - and the taller
     the cell the louder the mark got. Fixed at 34px it stays a mark on the
     rule whatever the step's height, and the flow and lane views match. */
  /* Two layers: the hatch, and the step's own ground fading in over it, so the
     band ends by running out rather than by stopping on a straight edge. */
  background-image:
    linear-gradient(to bottom, transparent 0, var(--surface-base) 100%),
    repeating-linear-gradient(140deg, var(--dia-rake) 0 1px, transparent 1px 7px);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 38px, 100% 38px;
  background-position: 0 0, 0 0;
}
.rr-dia__step--decision > * { position: relative; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), print {
  .rr-dia__step--decision { background-image: none; }
}
@media (forced-colors: active) { .rr-dia__step--decision { background-image: none; } }

.rr-dia__seq {
  font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.rr-dia__label { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink-primary); }
.rr-dia__note  { font-size: 13px; line-height: 19px; color: var(--ink-secondary); }
/* Who acted is written out, not left to the ground alone. A ground is a
   reminder for someone who already knows the key; the word is for everyone
   else, and for the screen reader, which cannot see a ground at all. */
.rr-dia__who {
  margin-top: auto; padding-top: 10px;
  font-size: 12px; line-height: 16px; color: var(--ink-muted);
}
/* In lanes the row is already labeled, so the line inside every step would
   say it a second time. It stays in the DOM for nobody - it is removed. */
.rr-dia--lanes .rr-dia__who { display: none; }

/* Lanes. Two rows, labeled on the left, steps placed in the row of whoever
   acted. The gaps in a lane are the point: an empty cell under "A person" is
   a stretch nobody was watching. */
.rr-dia--lanes > .rr-dia__steps { grid-auto-flow: unset; gap: 8px; align-items: stretch; }
.rr-dia--lanes .rr-dia__step { margin: 0 !important; }
.rr-dia--lanes .rr-dia__step + .rr-dia__step::before { display: none; }
.rr-dia__lane {
  display: flex; align-items: center; padding-right: 16px;
  font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap;
  border-right: 1px solid var(--border-subtle);
}
.rr-dia__source { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }

/* Under 720 a row of five boxes is five slivers, so the flow becomes a stack
   and the tick moves to the top left of each step. */
@media (max-width: 720px) {
  .rr-dia--flow > .rr-dia__steps { grid-auto-flow: row; }
  .rr-dia--flow .rr-dia__step + .rr-dia__step::before { left: 12px; top: -7px; }
  .rr-dia--lanes > .rr-dia__steps { grid-template-columns: auto 1fr !important; }
  .rr-dia--lanes .rr-dia__step { grid-column: 2 !important; grid-row: auto !important; }
  .rr-dia__lane { display: none; }
}
@media print {
  .rr-dia__step { background: #fff !important; border: 1px solid #000; border-top-width: 2px; }
}

/* ---- The display cut, and the strata ------------------------------------
   The system has exactly two overarching devices. The rake, which is in the
   logo, the icons, the gradient, the section mark, the motion and the
   patterns - and now in the letterforms. And the strata, which is the only
   thing in the system that expresses depth, and does it without a shadow.
   08-devices.md states both and caps the count at two. */

/* Declared here as well as in tokens.css, because a consumer who pulls the
   bundle without the token sheet still needs the face. Duplicate @font-face
   rules for the same family and source are harmless. */
@font-face {
  font-family: 'Redrob Rake Display';
  src: url('../fonts/RedrobRakeDisplay.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  /* Latin and figures. Hangul is the Korean cut below; there is no Devanagari
     cut and no italic. */
  unicode-range: U+0020-007E, U+2013, U+2018-201D, U+00B7, U+20A9, U+20B9;
}
/* The Korean cut: Wanted Sans ExtraBold with the throat opened - every ㅇ and the
   ring of every ㅎ, by the same knife, angle and 52/2048 em as the Latin cut. The
   mouth, ㅁ, stays closed. 2,350 syllables (KS X 1001), 171KB, fetched only when a
   Hangul glyph actually renders in it. size-adjust is the system's own Korean
   correction - Hangul sits taller on the body than Latin caps, so it is set at 96%
   - which is what lets "Border 경계" read as one line in one face. */
@font-face {
  font-family: 'Redrob Rake Display KR';
  src: url('../fonts/RedrobRakeDisplayKR.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  size-adjust: 96%;
  unicode-range: U+AC00-D7A3;
}

/* Display only, and the floor is real: below 40px the openings stop reading as
   openings and start reading as damage. The rule is enforced by the type
   scale rather than by hope - there is no small size on this face. */
.rr-rake {
  font-family: var(--font-rake, 'Redrob Rake Display', 'Redrob Rake Display KR', Pretendard, 'Wanted Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-feature-settings: 'kern' 1;
}
/* A display number is set once, so it takes proportional figures - tabular is for
   figures that re-render in place, which is why Stat keeps them and this does not. */
.rr-storyhead__value.rr-rake { font-variant-numeric: proportional-nums; }
.rr-rake--1 { font-size: clamp(44px, 7.2vw, 92px); line-height: 1.02; }
/* The smallest size is 42px, not 40, because the floor applies to what renders:
   Hangul is set at 96%, and 96% of 42 is the 40.3px the openings need. */
.rr-rake--2 { font-size: clamp(42px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -0.03em; }
.rr-rake--3 { font-size: clamp(42px, 3.6vw, 48px); line-height: 1.1;  letter-spacing: -0.025em; }
/* Hangul syllable blocks are already dense, so the Latin cut's -0.035em would
   crowd them. The face is the same stack either way - the Korean cut picks up the
   Hangul, the Latin cut the Latin - so a mixed line stays in one face. */
.rr-rake:lang(ko) { letter-spacing: -0.02em; }
/* Devanagari has no cut, so a Hindi line falls back whole rather than setting half
   in one face and half in another at a different weight. */
.rr-rake:lang(hi) { font-family: var(--font-sans-hi); letter-spacing: -0.01em; }

/* ---- Strata --------------------------------------------------------------
   Three grounds, and a meaning for each: the surface is the claim, one layer
   down is the evidence it rests on, two down is the source that evidence came
   from. There is no third layer, and there is no shadow anywhere in it.

   IBM Carbon moved from box-shadow elevation in v9 to layered grays in v11
   for the same reason this system refuses shadows: a shadow is a picture of a
   light source the interface does not have. Material 3 now leads with tonal
   elevation too. */
.rr-strata { --layer-depth: 0; }
[data-layer="0"] { background: var(--surface-base); }
[data-layer="1"] { background: var(--surface-raised); }
[data-layer="2"] { background: var(--surface-sunken); }
/* A border has to step with its ground or the deepest layer loses its edge. */
[data-layer="1"] { border-color: var(--border-subtle); }
[data-layer="2"] { border-color: var(--border-strong); }
/* Layer two is where muted ink gets closest to failing, so it is the ground
   the ink-muted value was solved against: 4.54:1 in light, 4.75:1 in dark. */
[data-layer] { box-shadow: none; }

@media (forced-colors: active) {
  /* Forced colors flattens every ground, so the ladder has to fall back to
     something that survives: a border per layer. */
  [data-layer="1"], [data-layer="2"] { border: 1px solid CanvasText; }
}

/* Two corrected token values, carried here as well as in tokens.json.
   tokens.css is regenerated by the page rather than by this file, so until it
   is, a consumer loading only the bundle would get the old values - and both
   of these were corrections to real defects, not preferences. Once tokens.css
   regenerates the two declarations agree and this block is inert.

   surface-sunken dark: was #000000, which put layer two 7.51 L* BELOW the page
   instead of above it. The dark ladder reversed at the second step. #1c1f26
   makes the two steps +5.28 and +3.47 L* on gray-9 #17181B, against light's +2.10 and +2.83
   in the same perceptual units.

   ink-muted light: was gray-6 #7c8390 - 3.81:1 on the page, 3.62:1 on layer
   one, 3.37:1 on layer two. Below AA for normal text on every ground in the
   system, not just the deep one. #686e78 clears 4.5:1 on all three light
   layers, at 5.13, 4.87 and 4.54 (the first try, #696f79, missed layer two at 4.47).
   ink-muted dark: gray-6 was 4.32:1 on layer two; #838a97 clears 4.75. */
:root { --ink-muted: #686e78; --dia-rake: rgba(10, 11, 12, 0.06); }
[data-theme="dark"] { --surface-sunken: #1c1f26; --ink-muted: #838a97; --dia-rake: rgba(255, 255, 255, 0.09); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --surface-sunken: #1c1f26; --ink-muted: #838a97; }
}

/* The chart series palette, as tokens. They were six hex literals inside
   bundle.js that happened to equal six named palette tokens and never read
   them, so the two could drift apart silently. Validated as a set by
   scripts/validate_palette.js - reordered so green and orange are not
   adjacent, and with lightness varied across the dark set. Do not reorder. */
:root {
  --series-1: #2B52FF; --series-2: #AE5100; --series-3: #8944FF;
  --series-4: #00864A; --series-5: #A31310; --series-6: #D2A100;
}
[data-theme="dark"] {
  --series-1: #2E56F0; --series-2: #E17223; --series-3: #844BEF;
  --series-4: #239B5B; --series-5: #AD251E; --series-6: #B08922;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #2E56F0; --series-2: #E17223; --series-3: #844BEF;
    --series-4: #239B5B; --series-5: #AD251E; --series-6: #B08922;
  }
}

/* A product's brand ground takes the white pill with black type (20-color.md). */
.rr-band--brand.rr-band--product .rr-btn--primary { background: #fff; color: var(--redrob-black); }
.rr-band--brand.rr-band--product .rr-btn--primary:hover:not(:disabled) { background: var(--gray-1); }
.rr-band--brand.rr-band--product .rr-btn--emphasis { box-shadow: 0 0 0 4px rgba(255, 255, 255, .24); }
.rr-band--brand.rr-band--product .rr-btn--emphasis:hover:not(:disabled) { box-shadow: 0 0 0 6px rgba(255, 255, 255, .3); }

/* ---- Model Guide ------------------------------------------------------- */

.rr-guide { display: flex; flex-direction: column; gap: var(--space-6); font-family: var(--font-sans); color: var(--ink-primary); min-width: 0; }
.rr-guide__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.rr-guide__title { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.rr-guide__lede { margin: var(--space-2) 0 0; max-width: 60ch; font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.rr-guide__mode { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--surface-base); }
.rr-guide__modeopt { height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-secondary); cursor: pointer; }
.rr-guide__modeopt[aria-checked="true"] { background: var(--surface-sunken); color: var(--ink-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.rr-guide__modeopt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-guide__ask { display: grid; grid-template-columns: minmax(180px, 260px) minmax(220px, 380px); gap: var(--space-4); align-items: end; }
.rr-guide__head { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.rr-guide__rtitle { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.rr-guide__meta { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-guide__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.rr-guide__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rr-guide__row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  width: 100%; padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.rr-guide__row:hover { background: var(--surface-sunken); }
.rr-guide__row[aria-pressed="true"] { background: var(--surface-raised); border-color: var(--border-subtle); }
.rr-guide__row:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.rr-guide__list li:first-child .rr-model__rank { background: var(--action-primary); color: var(--ink-on-brand); }
.rr-guide__rowend { display: flex; flex-direction: column; align-items: flex-end; }
.rr-guide__score { font-size: 13px; color: var(--ink-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rr-guide__small { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rr-guide__score b { font-size: 16px; color: var(--ink-primary); }
.rr-guide__bar { display: flex; height: 6px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: var(--surface-sunken); max-width: 240px; }
.rr-guide__seg--quality { background: var(--series-1); }
.rr-guide__seg--reliability { background: var(--series-3); }
.rr-guide__seg--speed { background: var(--series-6); }
.rr-guide__seg--cost { background: var(--series-4); }
.rr-guide__detail { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); min-width: 0; }
.rr-guide__dhead { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; }
.rr-guide__dhead > :first-child { min-width: 0; }
.rr-guide__cost { flex: none; }
.rr-guide__rank { margin: 0 0 4px; display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.rr-guide__dname { margin: 0 0 6px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.rr-guide__dname span { font-weight: 400; color: var(--ink-secondary); }
.rr-guide__cost { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rr-guide__costv { font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rr-guide__costu { font-size: 12px; line-height: 18px; color: var(--ink-secondary); max-width: 24ch; }
.rr-guide__why { margin: 0; font-size: 15px; line-height: 24px; }
.rr-guide__sample { display: flex; flex-direction: column; gap: var(--space-4); }
.rr-guide__turn { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-guide__label { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.rr-guide__illus { font-weight: 500; padding: 1px 8px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-secondary); }
.rr-guide__prompt { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 14px; line-height: 22px; color: var(--ink-primary); }
.rr-guide__output { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-base); font-size: 14px; line-height: 22px; white-space: pre-wrap; }
.rr-guide__output:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-guide__cut { margin: 0; font-size: 12px; color: var(--ink-muted); }
.rr-guide__calc { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.rr-guide__tablewrap { overflow-x: auto; }
.rr-guide__table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.rr-guide__table th, .rr-guide__table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.rr-guide__table thead th { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.rr-guide__table tbody th { font-weight: 600; white-space: nowrap; }
.rr-guide__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-guide__totalrow th, .rr-guide__totalrow td { border-bottom: 0; font-weight: 700; }
.rr-guide__key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.rr-guide__formula { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-guide__formula code { font-family: var(--font-mono); font-size: 12px; }
.rr-guide__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.rr-guide__facts dt { font-size: 12px; color: var(--ink-secondary); }
.rr-guide__facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rr-guide__note { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-guide__note b { color: var(--ink-primary); }
.rr-guide__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.rr-guide__runlink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-brand); text-decoration: none; }
.rr-guide__runlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-guide__empty { padding: var(--space-8); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--ink-secondary); font-size: 14px; }
.rr-guide__empty p { margin: 0; }
.rr-guide__emptyt { font-weight: 700; color: var(--ink-primary); margin-bottom: 4px !important; }
.rr-guide__method { font-size: 13px; line-height: 21px; color: var(--ink-secondary); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.rr-guide__method summary { cursor: pointer; font-weight: 600; color: var(--ink-primary); }
.rr-guide__method > div { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); max-width: 72ch; }
.rr-guide__method p { margin: 0; }
.rr-model__guide { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-brand); text-decoration: none; }
.rr-model__guide:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .rr-guide__grid, .rr-guide__ask { grid-template-columns: minmax(0, 1fr); }
  .rr-guide__detail { padding: var(--space-4); }
}

/* =====================================================================
   How Desk works for you: Redrob Auto in ModelPicker, the status line
   under the composer, and the receipts an answer leaves in the chat.
   ===================================================================== */

/* ---- AppShell nav groups ---- */
.rr-shell__navhead { display: block; margin: var(--space-4) 0 2px; padding: 0 var(--space-2); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.rr-shell__navhead:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .rr-shell__navhead { height: 1px; margin: var(--space-2) var(--space-2); padding: 0; overflow: hidden; color: transparent; background: var(--border-subtle); }
}

/* ---- ModelPicker: Redrob Auto and what cannot run here ---- */
.rr-model__trig-auto { display: inline-flex; color: var(--ink-brand); }
.rr-model__auto { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-brand-subtle); }
.rr-model__autoicon { display: inline-flex; color: var(--ink-brand); margin-top: 2px; }
.rr-model__auto b { display: block; font-size: 14px; line-height: 20px; color: var(--ink-primary); }
.rr-model__auto small { display: block; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-model__autotag { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--surface-brand-subtle);
  font-size: 11px; line-height: 18px; font-weight: 600; color: var(--ink-brand); align-self: center; }
.rr-model__item--away { cursor: default; }
.rr-model__item--away:hover { background: transparent; }
.rr-model__item--away .rr-model__name, .rr-model__item--away .rr-model__on, .rr-model__item--away .rr-model__why,
.rr-model__item--away .rr-model__price, .rr-model__item--away .rr-model__per, .rr-model__item--away .rr-model__effort { color: var(--ink-muted); }
.rr-model__item--away .rr-model__name { font-weight: 500; }
.rr-model__item--away .rr-model__steps { opacity: .5; }
.rr-model__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-model__back { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-brand); cursor: pointer; }
.rr-model__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.rr-model__back:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ---- Composer with a status line ---- */
.rr-composer-group { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-composer-group .rr-cstatus { position: static; }
.rr-composer-group .rr-cstatus__panel { bottom: calc(100% + var(--space-2)); }

/* ---- ComposerStatus ---- */
.rr-cstatus { position: relative; }
.rr-cstatus__row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--space-1); }
.rr-cstatus__item { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full);
  background: none; font: inherit; font-size: 13px; color: var(--ink-secondary); cursor: pointer; white-space: nowrap; }
.rr-cstatus__item:hover, .rr-cstatus__item[aria-expanded="true"] { background: var(--surface-sunken); }
.rr-cstatus__item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-cstatus__icon { display: inline-flex; color: var(--ink-muted); }
.rr-cstatus__icon svg { width: 15px; height: 15px; }
.rr-cstatus__value { font-weight: 600; color: var(--ink-primary); }
.rr-cstatus__item--safe .rr-cstatus__icon { color: var(--status-success); }
.rr-cstatus__item--on .rr-cstatus__icon { color: var(--ink-brand); }
.rr-cstatus__item--warn .rr-cstatus__icon, .rr-cstatus__item--warn .rr-cstatus__value { color: var(--status-warning); }
.rr-cstatus__panel { position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + var(--space-2));
  max-height: min(600px, 72vh); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lg); }
@media (max-width: 720px) { .rr-cstatus__name { display: none; } }

/* Level bars and the running light */
.rr-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.rr-bars i { display: block; width: 4px; border-radius: 1px; background: var(--border-strong); }
.rr-bars i:nth-child(1) { height: 6px; }
.rr-bars i:nth-child(2) { height: 9px; }
.rr-bars i:nth-child(3) { height: 12px; }
.rr-bars--safe i[data-on="true"] { background: var(--status-success); }
.rr-bars--on i[data-on="true"], .rr-bars--brand i[data-on="true"] { background: var(--ink-brand); }
.rr-live { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--status-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-success) 20%, transparent); }
.rr-live--inline { margin-right: var(--space-2); vertical-align: 1px; }

/* Shared panel text */
.rr-panellede { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); max-width: 640px; }
.rr-panelfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-panelfoot a { font-weight: 600; color: var(--ink-brand); text-decoration: none; }
.rr-panelfoot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- StatusCard ---- */
.rr-scard { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
.rr-scard__icon { display: inline-flex; }
.rr-scard__title { margin: 0; font-size: 17px; line-height: 25px; font-weight: 600; color: var(--ink-primary); }
.rr-scard__sub { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); max-width: 640px; }
.rr-scard--safe { background: color-mix(in srgb, var(--status-success) 9%, var(--surface-raised)); }
.rr-scard--safe .rr-scard__icon { color: var(--status-success); }
.rr-scard--warn { background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-raised)); }
.rr-scard--warn .rr-scard__icon { color: var(--status-warning); }
.rr-scard--brand { background: var(--surface-brand-subtle); }
.rr-scard--brand .rr-scard__icon { color: var(--ink-brand); }
.rr-scard--plain { background: var(--surface-sunken); }
.rr-scard--plain .rr-scard__icon { color: var(--ink-secondary); }
.rr-scard--lg { grid-template-columns: 32px minmax(0, 1fr); gap: 18px; padding: 28px 32px; border-radius: var(--radius-xl); }
.rr-scard--lg .rr-scard__icon svg { width: 32px; height: 32px; }
.rr-scard--lg .rr-scard__title { font-size: 24px; line-height: 32px; }
.rr-scard--lg .rr-scard__sub { margin-top: 6px; font-size: 15px; line-height: 24px; }
@media (max-width: 720px) { .rr-scard--lg { padding: var(--space-5); } .rr-scard--lg .rr-scard__title { font-size: 20px; line-height: 28px; } }

/* ---- PrivacyProtection, MemoryScope, SecondOpinionSetting ---- */
.rr-privacy, .rr-memscope, .rr-opset { display: flex; flex-direction: column; gap: var(--space-4); }
.rr-privacy__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.rr-privacy__level { padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.rr-privacy__level[data-on="true"] { border-color: color-mix(in srgb, var(--status-success) 55%, transparent); background: color-mix(in srgb, var(--status-success) 5%, transparent); }
.rr-privacy__levelhead { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.rr-privacy__yours { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--status-success); }
.rr-privacy__level p { margin: 6px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.rr-privacy__last { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-privacy__last > span:first-child { display: inline-flex; color: var(--status-success); }
.rr-privacy__last a { font-weight: 600; color: var(--ink-brand); text-decoration: none; }
@media (max-width: 720px) { .rr-privacy__levels { grid-template-columns: minmax(0, 1fr); } }
.rr-memscope__options { display: flex; flex-direction: column; gap: 10px; }
.rr-memscope__option { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink-primary); cursor: pointer; }
.rr-memscope__option input { margin-top: 3px; accent-color: var(--action-primary); }
.rr-memscope__option small { display: block; font-size: 13px; line-height: 19px; color: var(--ink-secondary); }
.rr-opset__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink-primary); }
.rr-opset .rr-panellede { margin-top: calc(var(--space-3) * -1); }
.rr-opset__note { margin: calc(var(--space-2) * -1) 0 0; font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-seg { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.rr-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-secondary); cursor: pointer; }
.rr-seg button[aria-checked="true"] { background: var(--surface-raised); color: var(--ink-primary); box-shadow: var(--shadow-sm); }
.rr-seg button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ---- AnswerReceipt ---- */
.rr-receipt { display: flex; flex-direction: column; gap: var(--space-2); }
.rr-receipt__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rr-receipt__item { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface-base); font: inherit; font-size: 12px; line-height: 18px; color: var(--ink-secondary); cursor: pointer; text-align: left; }
.rr-receipt__item:hover, .rr-receipt__item[aria-expanded="true"] { border-color: var(--border-strong); color: var(--ink-primary); }
.rr-receipt__item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-receipt__icon { display: inline-flex; color: var(--ink-brand); }
.rr-receipt__label { font-weight: 600; color: var(--ink-primary); }
.rr-receipt__item--agree .rr-receipt__icon { color: var(--status-success); }
.rr-receipt__item--differ .rr-receipt__icon, .rr-receipt__item--differ .rr-receipt__sub { color: var(--status-warning); }
.rr-receipt__item--differ .rr-receipt__sub { font-weight: 600; }
.rr-receipt__busy { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-secondary); }
.rr-receipt__detail { max-width: 640px; padding: var(--space-3) 14px; border-radius: var(--radius-lg); background: var(--surface-sunken); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-receipt__detail a { font-weight: 600; color: var(--ink-brand); text-decoration: none; }
@media (max-width: 720px) { .rr-receipt__item { flex-wrap: wrap; padding: 4px 10px; } }

/* ---- PrivateText ---- */
.rr-private { border-radius: 3px; padding: 0 2px; background: color-mix(in srgb, var(--status-success) 12%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--status-success) 70%, transparent); cursor: help;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rr-private--out { background: color-mix(in srgb, var(--ink-muted) 14%, transparent); box-shadow: inset 0 -1px 0 var(--ink-muted); }
.rr-private:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }

/* ---- Disputed ---- */
.rr-dispute__mark { padding: 0 1px; border-radius: 3px; cursor: pointer; background: color-mix(in srgb, var(--status-warning) 16%, transparent);
  box-shadow: inset 0 -2px 0 var(--status-warning); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rr-dispute__mark:hover, .rr-dispute--open .rr-dispute__mark { background: color-mix(in srgb, var(--status-warning) 28%, transparent); }
.rr-dispute__mark:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-dispute__mark sup { margin-left: 2px; font-size: 10px; font-weight: 700; color: var(--status-warning); }
.rr-dispute__panel { display: block; margin: 10px 0 12px; padding: var(--space-3) 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-raised); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-dispute__title { display: block; margin-bottom: var(--space-2); font-weight: 600; color: var(--ink-primary); }
.rr-dispute__view { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: var(--space-3); padding: 3px 0; }
.rr-dispute__who { font-weight: 600; color: var(--ink-primary); }
.rr-dispute__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 10px; }
@media (max-width: 720px) { .rr-dispute__view { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---- OpinionAdded ---- */
.rr-opadd { margin-top: var(--space-3); padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.rr-opadd__head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink-brand); }
.rr-opadd__head span { display: inline-flex; }
.rr-opadd__body > p { margin: 0; }

/* ---- ModelSwitch and MemorySaved ---- */
.rr-mswitch { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-mswitch__icon { display: inline-flex; margin-top: 3px; color: var(--ink-brand); }
.rr-mswitch b { font-weight: 600; color: var(--ink-primary); }
.rr-memsaved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); max-width: 640px;
  border-radius: var(--radius-md); background: var(--surface-brand-subtle); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.rr-memsaved__icon { display: inline-flex; color: var(--ink-brand); }
.rr-memsaved b { font-weight: 600; color: var(--ink-primary); }
.rr-memsaved__undo { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink-brand); cursor: pointer; }
.rr-memsaved__undo:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ---- MemoryList ---- */
.rr-memlist { list-style: none; margin: 0; padding: 0; }
.rr-memlist__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-4); padding: 18px 0; border-top: 1px solid var(--border-subtle); }
.rr-memlist__item:first-child { border-top: 0; }
.rr-memlist__text { font-size: 15px; line-height: 22px; color: var(--ink-primary); }
.rr-memlist__meta { font-size: 13px; line-height: 19px; color: var(--ink-secondary); }
.rr-memlist__dot { margin: 0 var(--space-2); color: var(--ink-muted); }
.rr-memlist__actions, .rr-memlist__lock { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: flex; gap: 4px; }
.rr-memlist__lock { font-size: 13px; color: var(--ink-secondary); }

/* ---- OpinionGrid ---- */
.rr-opgrid { overflow-x: auto; }
.rr-opgrid table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.rr-opgrid th, .rr-opgrid td { padding: 18px 18px 18px 12px; border-top: 1px solid var(--border-subtle); vertical-align: top; text-align: left; }
.rr-opgrid thead th { padding-top: 0; padding-bottom: 12px; border-top: 0; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.rr-opgrid thead th small { display: block; font-weight: 400; color: var(--ink-muted); }
.rr-opgrid__model { display: block; white-space: nowrap; }
.rr-opgrid__point { width: 37%; }
.rr-opgrid__point b { display: block; font-weight: 600; color: var(--ink-primary); }
.rr-opgrid__point span { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.rr-opgrid__row--differ th, .rr-opgrid__row--differ td { background: color-mix(in srgb, var(--status-warning) 6%, transparent); }
.rr-opgrid__v { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rr-opgrid__v span { display: inline-flex; }
.rr-opgrid__v--agree { color: var(--status-success); }
.rr-opgrid__v--differ { color: var(--status-warning); }
.rr-opgrid__v--added { color: var(--ink-brand); }
.rr-opgrid__v--quiet { font-style: italic; font-weight: 400; color: var(--ink-muted); }
.rr-opgrid__v--wrote { font-weight: 400; color: var(--ink-secondary); }
.rr-opgrid__note { display: block; margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--ink-secondary); }

@media (forced-colors: active) {
  .rr-private, .rr-dispute__mark { box-shadow: none; text-decoration: underline; }
  .rr-bars i[data-on="true"], .rr-live { background: CanvasText; }
}


/* ---------- Scrollbars, everywhere the system draws ----------
   Thin, on the page's own ink, invisible track. Firefox reads scrollbar-color; WebKit and Blink need the pseudo-elements.
   The Scroller component keeps its own gutter and states; this is the default for everything else. */
:root { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--ink-secondary); background-clip: content-box; }
.rr-select__list::-webkit-scrollbar { width: 8px; }


/* ---- AppShell: folding the sidebar into a tray of icons ----
   The same tray the shell falls back to below 900px, on request. Labels stay in the
   accessibility tree (visually hidden, never display: none), and each icon carries its
   name as a tooltip. Items without an icon, like recent chats, leave the tray. */
.rr-shell { transition: grid-template-columns var(--duration-base, 200ms) var(--easing-standard); }
.rr-shell__symbol { display: none; width: 24px; height: 24px; flex: none; }
.rr-shell__fold {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink-secondary); cursor: pointer;
}
.rr-shell__fold:hover { background: var(--surface-base); color: var(--ink-primary); }
[data-theme="dark"] .rr-shell__fold:hover { background: var(--surface-sunken); }
.rr-shell__fold:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.rr-shell--folded { grid-template-columns: 64px minmax(0, 1fr) 300px; }
.rr-shell--folded.rr-shell--norail { grid-template-columns: 64px minmax(0, 1fr); }
.rr-shell--folded .rr-shell__brand { flex-direction: column; gap: var(--space-3); padding-inline: var(--space-2); }
.rr-shell--folded .rr-shell__brand .rr-mark, .rr-shell--folded .rr-shell__brand > img:not(.rr-shell__symbol), .rr-shell--folded .rr-shell__product { display: none; }
.rr-shell--folded .rr-shell__symbol { display: block; }
.rr-shell--folded .rr-shell__fold { margin-left: 0; }
.rr-shell--folded .rr-shell__nav a { justify-content: center; }
.rr-shell--folded .rr-shell__navlabel, .rr-shell--folded .rr-shell__navmeta {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rr-shell--folded .rr-shell__navitem--text, .rr-shell--folded .rr-shell__aside { display: none; }
.rr-shell--folded .rr-shell__navhead { height: 1px; margin: var(--space-2) var(--space-2); padding: 0; overflow: hidden; color: transparent; background: var(--border-subtle); }
.rr-shell--folded .rr-shell__theme { padding-inline: var(--space-2); display: flex; justify-content: center; }
.rr-shell--folded .rr-shell__theme > * { flex-direction: column; }
@media (max-width: 900px) {
  .rr-shell__navlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; display: inline !important; }
  .rr-shell__navitem--text { display: none; }
  .rr-shell__fold { display: none; }
  .rr-shell__brand:has(.rr-shell__symbol) .rr-mark, .rr-shell__brand:has(.rr-shell__symbol) > img:not(.rr-shell__symbol) { display: none; }
  .rr-shell__symbol { display: block; }
  .rr-shell__theme { padding-inline: var(--space-2); display: flex; justify-content: center; }
  .rr-shell__theme > * { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .rr-shell { transition: none; } }

/* ==========================================================================
   Playbooks, scheduling and connectors
   ========================================================================== */

/* ---- PlaybookRow ---- */
.rr-pbrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 180px; gap: var(--space-4); align-items: center; width: 100%;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--ink-primary); text-decoration: none; font: inherit; text-align: left; }
a.rr-pbrow, button.rr-pbrow { cursor: pointer; }
a.rr-pbrow:hover, button.rr-pbrow:hover { border-color: var(--border-strong); }
.rr-pbrow:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-pbrow__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; align-self: start;
  border-radius: var(--radius-md); background: var(--surface-brand-subtle); color: var(--ink-brand); }
.rr-pbrow__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rr-pbrow__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rr-pbrow__name b { font-size: 15px; line-height: 22px; font-weight: 600; }
.rr-pbrow__summary { font-size: 14px; line-height: 21px; color: var(--ink-secondary); }
.rr-pbrow__foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.rr-pbrow__asks { display: inline-flex; align-items: center; gap: 5px; }
.rr-pbrow__worth { display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-4); }
.rr-pbrow__worth b { font-size: 17px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rr-pbrow__worth span { font-size: 12px; line-height: 17px; color: var(--ink-secondary); }
@media (max-width: 720px) {
  .rr-pbrow { grid-template-columns: 40px minmax(0, 1fr); }
  .rr-pbrow__worth { grid-column: 2; padding-left: 0; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: baseline; }
}

/* ---- ConnectorCard ---- */
.rr-connector { display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; padding: 18px 20px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); }
.rr-connector__top { display: flex; align-items: center; gap: var(--space-3); }
.rr-connector__logo { flex: none; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-primary); }
.rr-connector--on .rr-connector__logo { background: var(--surface-brand-subtle); color: var(--ink-brand); }
.rr-connector__logo img { width: 24px; height: 24px; }
.rr-connector__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rr-connector__name b { font-size: 15px; line-height: 21px; font-weight: 600; }
.rr-connector__name span { font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.rr-connector__does { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-secondary); }
.rr-connector__act { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; }
.rr-connector__act .rr-btn--ghost:first-child { margin-left: -10px; }

/* ---- TimePicker ---- */
.rr-time { position: relative; }
.rr-time__field { position: relative; display: flex; align-items: center; height: 32px; box-sizing: border-box; border: 1px solid var(--border-strong);
  border-radius: var(--field-radius); background: var(--surface-base);
  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.rr-time__field--md { height: 40px; }
.rr-time__field:hover { border-color: var(--ink-secondary); }
.rr-time__field:focus-within, .rr-time__field--open { border-color: var(--action-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 18%, transparent); }
.rr-time__input { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 10px; border: 0; background: transparent; font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--ink-primary); outline: none; }
.rr-time__field--md .rr-time__input { font-size: 14px; padding-left: 12px; }
.rr-time__open { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 100%; padding: 0; border: 0;
  background: none; color: var(--ink-secondary); cursor: pointer; border-radius: var(--field-radius); }
.rr-time__open:hover, .rr-time__field--open .rr-time__open { color: var(--ink-brand); }
.rr-time__open:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.rr-time__pop { box-sizing: border-box; position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; width: 260px; padding: 14px 14px 12px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 12px; animation: rr-select-in var(--duration-fast) var(--easing-standard); }
.rr-time__head { display: flex; align-items: baseline; justify-content: space-between; }
.rr-time__read { display: flex; align-items: center; gap: 2px; }
.rr-time__seg { padding: 0 6px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: 32px; line-height: 40px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink-muted); cursor: pointer; }
.rr-time__seg:hover { color: var(--ink-secondary); }
.rr-time__seg--on, .rr-time__seg--on:hover { background: var(--surface-brand-subtle); color: var(--ink-brand); }
.rr-time__seg:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-time__colon { font-size: 32px; font-weight: 600; color: var(--ink-muted); }
.rr-time__day { font-size: 12px; color: var(--ink-muted); }
.rr-time__dial { width: 228px; height: 228px; align-self: center; touch-action: none; cursor: pointer; user-select: none; }
.rr-time__face { fill: var(--surface-sunken); }
.rr-time__band { fill: color-mix(in srgb, var(--ink-primary) 4%, transparent); }
.rr-time__tick { stroke: var(--border-strong); stroke-width: 1; }
.rr-time__tick--five { stroke: var(--ink-muted); stroke-width: 1.5; }
.rr-time__ghost { fill: color-mix(in srgb, var(--action-primary) 16%, transparent); }
.rr-time__hand { transform-origin: 120px 120px; transition: transform 220ms var(--easing-standard); }
.rr-time__hand line { stroke: var(--action-primary); stroke-width: 2; }
.rr-time__knob, .rr-time__pin { fill: var(--action-primary); }
.rr-time__dot { fill: var(--ink-on-brand); }
.rr-time__num { font-family: var(--font-sans); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; fill: var(--ink-primary); pointer-events: none; }
.rr-time__num--in { font-size: 12px; fill: var(--ink-secondary); }
.rr-time__num--on { fill: var(--ink-on-brand); font-weight: 700; }
.rr-time__quick { display: flex; gap: 6px; }
.rr-time__chip { flex: 1; min-width: 0; height: 28px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--surface-base);
  font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-secondary); cursor: pointer; }
.rr-time__chip:hover { border-color: var(--border-strong); color: var(--ink-primary); }
.rr-time__chip[aria-pressed="true"] { background: var(--surface-brand-subtle); border-color: transparent; color: var(--ink-brand); }
.rr-time__chip:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-time__others { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-secondary); }
.rr-time__others svg { flex: none; margin-top: 2px; color: var(--ink-muted); }
.rr-time__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-subtle);
  font-size: 12px; line-height: 16px; color: var(--ink-muted); }
@media (forced-colors: active) { .rr-time__knob, .rr-time__pin { fill: Highlight; } .rr-time__num--on { fill: HighlightText; } .rr-time__hand line { stroke: Highlight; } }

/* ---- SchedulePicker ---- */
.rr-sched { display: flex; flex-direction: column; gap: 12px; }
.rr-sched__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-primary); }
.rr-sched__modes { align-self: stretch; display: flex; }
.rr-sched__modes button { flex: 1; padding: 0 8px; font-size: 12px; }
.rr-sched__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: start; }
.rr-sched__days { display: flex; gap: 4px; }
.rr-sched__day { flex: 1; height: 32px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-base);
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-secondary); cursor: pointer; }
.rr-sched__day:hover { border-color: var(--border-strong); }
.rr-sched__day[aria-pressed="true"] { background: var(--action-primary); border-color: var(--action-primary); color: var(--ink-on-brand); }
.rr-sched__day:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.rr-sched__sum { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface-sunken); font-size: 13px; line-height: 19px; color: var(--ink-primary); }
.rr-sched__sum svg { flex: none; margin-top: 2px; color: var(--ink-brand); }
.rr-sched__note { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-secondary); }

/* ---- AppAccess ---- */
.rr-access { display: flex; flex-direction: column; gap: 10px; }
.rr-access__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-primary); }
.rr-access__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.rr-access__i { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.rr-access__i > .rr-access__mode { grid-column: 2 / 4; width: auto; }
.rr-access__i .rr-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rr-access__icon { display: inline-flex; width: 24px; justify-content: center; color: var(--ink-secondary); }
.rr-access__icon img { width: 16px; height: 16px; }
.rr-access__t { display: flex; flex-direction: column; min-width: 0; }
.rr-access__t b { font-size: 13px; line-height: 18px; font-weight: 600; }
.rr-access__t span { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rr-access__picklab .rr-access__t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-access__fixed { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }
.rr-access__note { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-secondary); }
.rr-access__picklist { max-height: 360px; overflow-y: auto; margin: 12px -8px 8px; padding: 0 8px; }
.rr-access__picklist ul { list-style: none; margin: 0; padding: 0; }
.rr-access__pickh { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.rr-access__pick { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px; border-radius: var(--radius-md); cursor: pointer; }
.rr-access__pick:hover { background: var(--surface-sunken); }
.rr-access__pick .rr-choice__text { flex: 1; min-width: 0; }
.rr-access__picklab { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rr-access__pickicon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-primary); }
.rr-access__state { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }
.rr-access__empty { margin: 12px 0; font-size: 14px; color: var(--ink-secondary); }

@media (prefers-reduced-motion: reduce) { .rr-time__hand { transition: none; } .rr-time__pop { animation: none; } }