/* ==========================================================================
   RB DesignTech — Coder "Modern" skin
   Design system: Minimalist Dark (layered slate + warm amber)

   HOW THIS WORKS
   --------------
   Coder v2.35's frontend is Tailwind + shadcn/ui driven by HSL-triplet CSS
   custom properties scoped on `.dark`. That is the seam this skin uses: we
   redefine Coder's OWN tokens rather than fighting its components with
   per-selector overrides. Colour needs almost no `!important` as a result.

   HARD CONSTRAINTS discovered in the running deployment (do not break these):
   1. Coder writes `hsl(var(--border-default) / .5)`. Every token below MUST
      stay a BARE HSL TRIPLET — no `rgba()`, no baked-in `/ alpha`. Putting
      alpha inside a token silently kills every alpha-modified usage.
   2. CSP is `font-src 'self' data:` and `script-src 'self'`. Fonts are
      self-hosted under /rb-fonts (a Google Fonts @import is silently dropped
      — that is why the older 1qrx chalkboard skin never actually loaded
      Kalam/Patrick Hand). No inline <script> either.
   3. `.dark` may sit on <html> or a descendant, so the token block is scoped
      to both to guarantee it outranks Coder's own `.dark` declaration.

   TOGGLES (set by rb-skin.js on <html>, persisted in localStorage)
   ---------------------------------------------------------------
   data-skin  = "classic" | "modern"        classic = zero rules apply
   data-shade = "obsidian" | "graphite" | "midnight"
   data-width = "full" | "centered"
   data-density = "compact" | "cozy" | "comfortable"
   data-glow  = "on" | "off"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPEFACES — self-hosted to satisfy `font-src 'self'`.
   Space Grotesk carries display/headline duty (the design system's geometric
   personality). Body text rides on Geist Variable and labels on JetBrains
   Mono, both of which Coder ALREADY bundles — zero added payload, and they
   are the closest peers to the system's Inter/JetBrains pairing.
   -------------------------------------------------------------------------- */
/* vietnamese */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/rb-fonts/space-grotesk-0.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
/* latin-ext */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/rb-fonts/space-grotesk-1.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* latin */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/rb-fonts/space-grotesk-2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------------------
   2. SHADE LADDERS — the single source of truth.
   Each shade is four stacked darks (s1 deepest -> s4 most elevated), three
   text weights, two border weights. Adding a fourth shade = add one block
   here and one <button> in rb-skin.js. Nothing else in this file changes.

   All values are BARE HSL TRIPLETS (see constraint 1).
   -------------------------------------------------------------------------- */

/* Obsidian — the design system's canonical ladder.
   #0A0A0F -> #12121A -> #1A1A24 -> #24242F */
html[data-skin="modern"][data-shade="obsidian"]{
  --rb-s1: 240 20% 5%;
  --rb-s2: 240 18% 9%;
  --rb-s3: 240 16% 12%;
  --rb-s4: 240 13% 16%;
  --rb-fg: 0 0% 98%;
  --rb-fg2: 240 5% 60%;
  --rb-fg3: 240 4% 46%;
  --rb-bd: 240 8% 16%;
  --rb-bd2: 240 6% 22%;
}

/* Graphite — the whole ladder lifted ~5pp. For bright rooms and for people
   who find true-black fatiguing; keeps the slate hue and amber accent. */
html[data-skin="modern"][data-shade="graphite"]{
  --rb-s1: 240 14% 10%;
  --rb-s2: 240 12% 14%;
  --rb-s3: 240 11% 18%;
  --rb-s4: 240 10% 24%;
  --rb-fg: 0 0% 97%;
  --rb-fg2: 240 6% 66%;
  --rb-fg3: 240 5% 52%;
  --rb-bd: 240 8% 24%;
  --rb-bd2: 240 8% 32%;
}

/* Midnight — same depth as Obsidian, hue rotated cooler and saturation up.
   The coldest ground makes the warm amber read hardest. */
html[data-skin="modern"][data-shade="midnight"]{
  --rb-s1: 226 32% 6%;
  --rb-s2: 226 30% 10%;
  --rb-s3: 225 26% 14%;
  --rb-s4: 224 22% 20%;
  --rb-fg: 210 20% 98%;
  --rb-fg2: 220 14% 64%;
  --rb-fg3: 220 12% 50%;
  --rb-bd: 224 20% 19%;
  --rb-bd2: 224 18% 27%;
}

/* Shared across every shade: the warm accent is the constant that makes this
   one family rather than three themes. #F59E0B / amber-500. */
html[data-skin="modern"]{
  --rb-accent: 38 92% 50%;
  --rb-accent-fg: 240 20% 5%;

  /* Elevation + glow. `--rb-glow-a` is dialled to 0 by data-glow="off" so the
     whole atmospheric layer has one kill switch (motion/perf sensitive users,
     remote desktops where backdrop-blur is expensive). */
  --rb-glow-a: 1;
  --rb-shadow-md: 0 4px 6px hsl(0 0% 0% / .3);
  --rb-shadow-lg: 0 10px 15px hsl(0 0% 0% / .3);
  --rb-shadow-xl: 0 20px 25px hsl(0 0% 0% / .4);
  --rb-glow-sm: 0 0 20px hsl(var(--rb-accent) / calc(.15 * var(--rb-glow-a)));
  --rb-glow-md: 0 0 40px hsl(var(--rb-accent) / calc(.20 * var(--rb-glow-a)));
  --rb-glow-btn: 0 0 20px hsl(var(--rb-accent) / calc(.40 * var(--rb-glow-a)));

  /* Type roles. Space Grotesk is self-hosted; Geist/JetBrains ship with Coder. */
  --rb-font-display: 'Space Grotesk', 'Geist Variable', system-ui, sans-serif;
  --rb-font-body: 'Geist Variable', Inter, system-ui, sans-serif;
  --rb-font-mono: 'JetBrains Mono', 'Geist Mono Variable', ui-monospace, monospace;

  /* Density multiplier. The design system's py-24/32/40 section rhythm is a
     MARKETING scale — applied literally to a workspace table it would push
     three rows below the fold. We keep the *intent* (breathing room) as a
     tunable multiplier on Coder's own spacing instead. */
  --rb-density: 1;
  --rb-gutter: clamp(1rem, 2.2vw, 2.5rem);
}

html[data-skin="modern"][data-density="compact"]{ --rb-density: .82; }
html[data-skin="modern"][data-density="cozy"]{ --rb-density: 1; }
html[data-skin="modern"][data-density="comfortable"]{ --rb-density: 1.28; }
html[data-skin="modern"][data-glow="off"]{ --rb-glow-a: 0; }

/* --------------------------------------------------------------------------
   3. MAP ONTO CODER'S TOKENS — the only place our names meet Coder's names.
   Scoped to <html> AND to any descendant carrying Coder's theme class, because
   `.dark` may be set on <html> or on a wrapper; `html[data-skin] .dark` (0,2,1)
   outranks Coder's bare `.dark` (0,1,0) either way.
   -------------------------------------------------------------------------- */
html[data-skin="modern"],
html[data-skin="modern"] .dark,
html[data-skin="modern"] .light,
html[data-skin="modern"] [class*="dark-"]{
  --surface-primary: var(--rb-s1);
  --surface-secondary: var(--rb-s2);
  --surface-tertiary: var(--rb-s3);
  --surface-quaternary: var(--rb-s4);
  --surface-grey: var(--rb-s2);
  --surface-invert-primary: var(--rb-fg);
  --surface-invert-secondary: var(--rb-fg2);

  --content-primary: var(--rb-fg);
  --content-secondary: var(--rb-fg2);
  --content-disabled: var(--rb-fg3);
  --content-invert: var(--rb-accent-fg);
  --content-link: var(--rb-accent);

  --border-default: var(--rb-bd);
  --border-secondary: var(--rb-bd2);
  --border: var(--rb-bd);
  --input: var(--rb-bd);
  --ring: var(--rb-accent);

  --overlay-default: var(--rb-s1) / 82%;

  /* Warning/orange family re-pointed at the accent so status chrome reads as
     one warm family instead of competing oranges. Success/destructive keep
     their semantic hues — never recolour a red. */
  --content-warning: var(--rb-accent);
  --border-warning: var(--rb-accent);
  --highlight-orange: var(--rb-accent);

  /* shadcn derives rounded-md/-sm from --radius, so this single bump gives the
     design system's 12px cards / 10px controls / 8px chips in one line. */
  --radius: .75rem;

  --background: var(--rb-s1);
  --foreground: var(--rb-fg);
  --muted: var(--rb-s2);
  --muted-foreground: var(--rb-fg2);
  --primary: var(--rb-accent);
  --primary-foreground: var(--rb-accent-fg);
}

/* --------------------------------------------------------------------------
   4. ATMOSPHERE — the signature layer.
   Two fixed, massively-blurred amber orbs plus a whisper of noise. This is
   what separates "Minimalist Dark" from "dark mode with the colours inverted".
   Everything here is pointer-events:none and sits at z-index 0 behind Coder.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] body{
  background-color: hsl(var(--rb-s1));
  font-family: var(--rb-font-body);
  -webkit-font-smoothing: antialiased;
}

html[data-skin="modern"] body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48rem 32rem at 78% -8%,  hsl(var(--rb-accent) / calc(.055 * var(--rb-glow-a))), transparent 62%),
    radial-gradient(38rem 30rem at 6% 104%,  hsl(var(--rb-accent) / calc(.035 * var(--rb-glow-a))), transparent 60%),
    radial-gradient(60rem 40rem at 50% 50%,  hsl(var(--rb-s2) / .55), transparent 70%);
  filter: blur(24px);
}

/* Noise keeps the large flat darks from banding on cheap panels. */
html[data-skin="modern"] body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lift the real app above the atmosphere. */
html[data-skin="modern"] #root,
html[data-skin="modern"] #coder{ position:relative; z-index:1; background:transparent; }

@media (prefers-reduced-motion: reduce){
  html[data-skin="modern"] *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY — hierarchy through size and weight, never colour.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] h1,
html[data-skin="modern"] h2,
html[data-skin="modern"] h3,
html[data-skin="modern"] [class*="MuiTypography-h"]{
  font-family: var(--rb-font-display);
  letter-spacing:-.025em;
  font-weight:600;
}
html[data-skin="modern"] code,
html[data-skin="modern"] pre,
html[data-skin="modern"] kbd{ font-family: var(--rb-font-mono); }

/* Mono, wide-tracked micro-labels are the design system's metadata voice. */
html[data-skin="modern"] .rb-label{
  font-family:var(--rb-font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:hsl(var(--rb-fg3));
}

/* --------------------------------------------------------------------------
   6. SURFACES — glass cards.
   Coder's shadcn cards already read `--surface-*`, so they retheme for free.
   These rules add the *material*: translucency, blur, and the hover lift.
   -------------------------------------------------------------------------- */
/* Restricted to CONTAINERS on purpose. An earlier, greedier version of this
   selector ([class*="bg-surface"] with no element or invert guard) also matched
   Coder's primary button, whose utilities are `... rounded-md border
   bg-surface-invert-primary text-content-invert` — a LIGHT button with DARK
   text. Painting glass over it left dark-on-dark at 1.14:1, i.e. an invisible
   "Sign in". Cards are divs and sections; buttons and links are not, and
   anything *-invert-* is styled to carry its own inverted foreground. */
html[data-skin="modern"] div[class*="rounded-"][class*="border"][class*="bg-surface-"]:not([class*="invert"]):not([role="button"]),
html[data-skin="modern"] section[class*="rounded-"][class*="border"][class*="bg-surface-"]:not([class*="invert"]),
html[data-skin="modern"] .rb-card{
  background: hsl(var(--rb-s3) / .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid hsl(var(--rb-bd));
  border-radius:var(--radius);
  transition: border-color 300ms ease-out, background-color 300ms ease-out, box-shadow 300ms ease-out, transform 300ms ease-out;
}

/* MUI/Emotion bridge — Coder v2.35 still ships mui-*.js and emotion-*.js for
   its legacy pages. Those components read a JS theme we cannot reach from CSS,
   so this is the one place selector overrides are unavoidable. Kept to
   surfaces/borders only; layout is left alone. */
html[data-skin="modern"] .MuiPaper-root,
html[data-skin="modern"] .MuiCard-root,
html[data-skin="modern"] .MuiDialog-paper,
html[data-skin="modern"] .MuiPopover-paper,
html[data-skin="modern"] .MuiMenu-paper{
  background-color: hsl(var(--rb-s3) / .82) !important;
  backdrop-filter: blur(10px);
  color: hsl(var(--rb-fg)) !important;
  border:1px solid hsl(var(--rb-bd)) !important;
  border-radius: var(--radius) !important;
  background-image:none !important;
  box-shadow: var(--rb-shadow-lg) !important;
}
html[data-skin="modern"] .MuiAppBar-root{
  background-color: hsl(var(--rb-s1) / .72) !important;
  backdrop-filter: blur(12px);
  border-bottom:1px solid hsl(var(--rb-bd)) !important;
  box-shadow:none !important;
}
html[data-skin="modern"] .MuiTableCell-root{
  border-bottom:1px solid hsl(var(--rb-bd)) !important;
  color: hsl(var(--rb-fg)) !important;
}
html[data-skin="modern"] .MuiTableHead-root .MuiTableCell-root{
  background-color: hsl(var(--rb-s2) / .8) !important;
  font-family: var(--rb-font-mono); font-size:.6875rem;
  letter-spacing:.08em; text-transform:uppercase;
  color: hsl(var(--rb-fg3)) !important;
}
html[data-skin="modern"] .MuiTableRow-root:hover .MuiTableCell-root{
  background-color: hsl(var(--rb-fg) / .025) !important;
}
html[data-skin="modern"] .MuiDivider-root{ border-color: hsl(var(--rb-bd)) !important; }
html[data-skin="modern"] .MuiChip-root{
  background-color: hsl(var(--rb-s4) / .7) !important;
  border:1px solid hsl(var(--rb-bd)) !important;
  color: hsl(var(--rb-fg2)) !important;
  border-radius:9999px !important;
}
html[data-skin="modern"] .MuiTab-root{ text-transform:none !important; color:hsl(var(--rb-fg2)) !important; }
html[data-skin="modern"] .MuiTab-root.Mui-selected{ color:hsl(var(--rb-accent)) !important; }
html[data-skin="modern"] .MuiTabs-indicator{ background-color:hsl(var(--rb-accent)) !important; box-shadow:var(--rb-glow-sm); }

/* --------------------------------------------------------------------------
   7. CONTROLS — amber primary, press-in feedback, amber focus ring everywhere.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] .MuiButton-root{
  text-transform:none !important;
  font-family:var(--rb-font-body) !important;
  border-radius:calc(var(--radius) - 2px) !important;
  transition:all 200ms ease-out !important;
}
html[data-skin="modern"] .MuiButton-containedPrimary{
  background-color:hsl(var(--rb-accent)) !important;
  color:hsl(var(--rb-accent-fg)) !important;
  box-shadow:none !important;
}
html[data-skin="modern"] .MuiButton-containedPrimary:hover{
  filter:brightness(1.1);
  box-shadow:var(--rb-glow-btn) !important;
}
html[data-skin="modern"] .MuiButton-root:active{ transform:scale(.98); }
html[data-skin="modern"] .MuiButton-outlined{
  border-color:hsl(var(--rb-bd2)) !important; color:hsl(var(--rb-fg)) !important;
}
html[data-skin="modern"] .MuiButton-outlined:hover{
  background-color:hsl(var(--rb-fg) / .05) !important;
  border-color:hsl(var(--rb-fg) / .25) !important;
}

/* Coder's shadcn buttons: reach them by their utility signature rather than a
   component class, then let the token layer do the colour work. */
html[data-skin="modern"] button:active:not(:disabled){ transform:scale(.98); }
html[data-skin="modern"] button,
html[data-skin="modern"] a[role="button"]{ transition:all 200ms ease-out; }

html[data-skin="modern"] .MuiOutlinedInput-root,
html[data-skin="modern"] .MuiInputBase-root{
  background-color:hsl(var(--rb-s3) / .6) !important;
  backdrop-filter:blur(8px);
  border-radius:calc(var(--radius) - 2px) !important;
  color:hsl(var(--rb-fg)) !important;
}
html[data-skin="modern"] .MuiOutlinedInput-notchedOutline{ border-color:hsl(var(--rb-bd)) !important; }
html[data-skin="modern"] .Mui-focused .MuiOutlinedInput-notchedOutline{
  border-color:hsl(var(--rb-accent) / .5) !important; border-width:1px !important;
}
html[data-skin="modern"] .Mui-focused.MuiInputBase-root{
  box-shadow:0 0 0 2px hsl(var(--rb-accent) / .2), 0 0 20px hsl(var(--rb-accent) / calc(.1 * var(--rb-glow-a))) !important;
}

/* One amber focus ring for every focusable thing — brand coherence doubling as
   the accessibility affordance. */
html[data-skin="modern"] :focus-visible{
  outline:2px solid hsl(var(--rb-accent));
  outline-offset:2px;
  border-radius:calc(var(--radius) - 4px);
}
/* The palette's own field is exempt: the dialog is already the focus, and a
   ring around a borderless input inside a focused card reads as a mistake. */
html[data-skin="modern"] .rb-palette-input:focus-visible{ outline:none; }

/* Hard floor: inverted surfaces keep Coder's own colours, whatever else
   matches. This is the pairing that breaks catastrophically when split. */
html[data-skin="modern"] [class*="bg-surface-invert"]{
  background-color:hsl(var(--surface-invert-primary)) !important;
  color:hsl(var(--content-invert)) !important;
}

html[data-skin="modern"] ::-webkit-scrollbar{ width:11px; height:11px; }
html[data-skin="modern"] ::-webkit-scrollbar-track{ background:transparent; }
html[data-skin="modern"] ::-webkit-scrollbar-thumb{
  background:hsl(var(--rb-s4)); border-radius:9999px;
  border:3px solid transparent; background-clip:content-box;
}
html[data-skin="modern"] ::-webkit-scrollbar-thumb:hover{ background:hsl(var(--rb-bd2)); background-clip:content-box; }

/* --------------------------------------------------------------------------
   8. LAYOUT — reclaiming the full width.
   Coder centres its content in a fixed-max-width column, which wastes most of
   a 27" display. We cannot target its container by class (Emotion hashes them
   and they change between releases), so rb-skin.js tags any auto-centred,
   max-width-constrained block inside <main> with [data-rb-wide] at runtime and
   we widen those. Detection by COMPUTED STYLE survives Coder upgrades.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] main{
  padding-inline: calc(var(--rb-gutter) * var(--rb-density));
}
html[data-skin="modern"][data-width="full"] [data-rb-wide]{
  max-width:none !important;
  width:100% !important;
}
html[data-skin="modern"][data-width="centered"] [data-rb-wide]{
  max-width:96rem !important;   /* generous, but still a column */
}
/* Density reaches Coder's own rhythm through its densest surface: tables. */
html[data-skin="modern"] .MuiTableCell-root{
  padding-top:calc(.75rem * var(--rb-density)) !important;
  padding-bottom:calc(.75rem * var(--rb-density)) !important;
}

/* --------------------------------------------------------------------------
   9. THE DOCK — right-edge control surface.
   Collapsed it is a 52px icon rail (HORIZONTAL collapse); expanded it is a
   336px panel whose sections are accordions (VERTICAL collapse). Both axes,
   as asked, and it never covers content because <body> gets padding-right.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] body{ padding-right:52px; transition:padding-right 300ms ease-out; }
html[data-skin="modern"][data-dock="open"] body{ padding-right:336px; }
@media (max-width:900px){
  html[data-skin="modern"] body,
  html[data-skin="modern"][data-dock="open"] body{ padding-right:0; }
}

.rb-dock{
  position:fixed; top:0; right:0; bottom:0; z-index:2147483000;
  width:52px; display:flex; flex-direction:column;
  background:hsl(var(--rb-s2) / .82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-left:1px solid hsl(var(--rb-bd));
  font-family:var(--rb-font-body); color:hsl(var(--rb-fg));
  transition:width 300ms ease-out;
}
html[data-skin="modern"][data-dock="open"] .rb-dock{ width:336px; box-shadow:-20px 0 40px hsl(0 0% 0% / .35); }
@media (max-width:900px){
  .rb-dock{ width:44px; }
  html[data-skin="modern"][data-dock="open"] .rb-dock{ width:min(336px, 92vw); }
}

.rb-dock-rail{
  width:52px; flex:0 0 52px; display:flex; flex-direction:column;
  align-items:center; gap:6px; padding:10px 0;
  border-right:1px solid transparent;
}
html[data-skin="modern"][data-dock="open"] .rb-dock-rail{ border-right-color:hsl(var(--rb-bd)); }
@media (max-width:900px){ .rb-dock-rail{ width:44px; flex-basis:44px; } }

.rb-dock-body{ display:flex; min-height:0; flex:1; }
.rb-dock-panel{
  flex:1; min-width:0; overflow-y:auto; overflow-x:hidden;
  padding:14px 16px 24px; display:none;
}
html[data-skin="modern"][data-dock="open"] .rb-dock-panel{ display:block; }

.rb-ico{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; border:1px solid transparent; background:transparent;
  color:hsl(var(--rb-fg2)); cursor:pointer; transition:all 200ms ease-out;
}
.rb-ico:hover{ background:hsl(var(--rb-fg) / .06); color:hsl(var(--rb-fg)); }
.rb-ico[aria-selected="true"]{
  color:hsl(var(--rb-accent));
  background:hsl(var(--rb-accent) / .12);
  border-color:hsl(var(--rb-accent) / .28);
  box-shadow:var(--rb-glow-sm);
}
.rb-ico svg{ width:18px; height:18px; stroke-width:1.5; }
.rb-ico-text{ display:none; white-space:nowrap; }
.rb-rail-spacer{ flex:1; }

.rb-dock-title{
  font-family:var(--rb-font-display); font-size:.95rem; font-weight:600;
  letter-spacing:-.02em; margin:2px 0 2px;
}
.rb-dock-sub{ font-size:.75rem; color:hsl(var(--rb-fg2)); margin-bottom:14px; line-height:1.5; }

/* Accordion section = the vertical collapse. */
.rb-section{ border-top:1px solid hsl(var(--rb-bd)); padding:12px 0; }
.rb-section:first-of-type{ border-top:0; }
.rb-section-head{
  width:100%; display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--rb-font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:hsl(var(--rb-fg3)); transition:color 200ms ease-out;
}
.rb-section-head:hover{ color:hsl(var(--rb-fg2)); }
.rb-section-head .rb-caret{ margin-left:auto; transition:transform 250ms ease-out; }
.rb-section[data-open="false"] .rb-caret{ transform:rotate(-90deg); }
.rb-section-body{
  overflow:hidden; max-height:60rem; opacity:1;
  transition:max-height 300ms ease-out, opacity 200ms ease-out, margin 300ms ease-out;
  margin-top:10px;
}
.rb-section[data-open="false"] .rb-section-body{ max-height:0; opacity:0; margin-top:0; }

/* Segmented control — Classic / Modern and Full / Centered live here. */
.rb-seg{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  padding:4px; border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--rb-s1) / .6); border:1px solid hsl(var(--rb-bd));
}
.rb-seg button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:7px 8px; border-radius:calc(var(--radius) - 5px);
  font-family:var(--rb-font-body); font-size:.8125rem; font-weight:500;
  color:hsl(var(--rb-fg2)); transition:all 200ms ease-out;
}
.rb-seg button:hover{ color:hsl(var(--rb-fg)); background:hsl(var(--rb-fg) / .05); }
.rb-seg button[aria-pressed="true"]{
  background:hsl(var(--rb-accent)); color:hsl(var(--rb-accent-fg)); font-weight:600;
  box-shadow:var(--rb-glow-btn);
}

/* Shade swatches — each previews its own ladder, so the choice is legible
   before you commit to it. */
.rb-shades{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rb-shade{
  cursor:pointer; border-radius:calc(var(--radius) - 2px); padding:8px;
  border:1px solid hsl(var(--rb-bd)); background:hsl(var(--rb-s1) / .5);
  transition:all 250ms ease-out; text-align:left;
}
.rb-shade:hover{ border-color:hsl(var(--rb-bd2)); transform:translateY(-1px); }
.rb-shade[aria-pressed="true"]{
  border-color:hsl(var(--rb-accent) / .45);
  box-shadow:0 0 0 1px hsl(var(--rb-accent) / .25), var(--rb-glow-sm);
}
.rb-shade-strip{ display:flex; height:22px; border-radius:6px; overflow:hidden; margin-bottom:6px; }
.rb-shade-strip i{ flex:1; }
.rb-shade-name{ font-size:.6875rem; font-family:var(--rb-font-mono); letter-spacing:.04em; color:hsl(var(--rb-fg2)); }
.rb-shade[aria-pressed="true"] .rb-shade-name{ color:hsl(var(--rb-accent)); }

/* Range slider — real <input type=range>, amber track fill. */
.rb-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; }
.rb-row label{ font-size:.8125rem; color:hsl(var(--rb-fg2)); }
.rb-row output{ font-family:var(--rb-font-mono); font-size:.6875rem; color:hsl(var(--rb-accent)); letter-spacing:.04em; }
.rb-range{ -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; }
.rb-range::-webkit-slider-runnable-track{
  height:4px; border-radius:9999px;
  background:linear-gradient(to right, hsl(var(--rb-accent)) var(--rb-fill,50%), hsl(var(--rb-s4)) var(--rb-fill,50%));
}
.rb-range::-moz-range-track{ height:4px; border-radius:9999px; background:hsl(var(--rb-s4)); }
.rb-range::-moz-range-progress{ height:4px; border-radius:9999px; background:hsl(var(--rb-accent)); }
.rb-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5px;
  border-radius:9999px; background:hsl(var(--rb-accent));
  box-shadow:var(--rb-glow-btn); border:0; transition:transform 200ms ease-out;
}
.rb-range::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:9999px; background:hsl(var(--rb-accent)); }
.rb-range:active::-webkit-slider-thumb{ transform:scale(1.15); }

/* Switch */
.rb-switch{
  position:relative; width:38px; height:22px; border-radius:9999px; cursor:pointer;
  background:hsl(var(--rb-s4)); border:1px solid hsl(var(--rb-bd));
  transition:all 250ms ease-out; flex:0 0 auto;
}
.rb-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:9999px; background:hsl(var(--rb-fg2)); transition:all 250ms ease-out;
}
.rb-switch[aria-checked="true"]{ background:hsl(var(--rb-accent) / .28); border-color:hsl(var(--rb-accent) / .5); }
.rb-switch[aria-checked="true"]::after{ left:18px; background:hsl(var(--rb-accent)); box-shadow:var(--rb-glow-sm); }

/* --------------------------------------------------------------------------
   10. COMMAND PALETTE (Cmd/Ctrl-K)
   The agentic surface: one text field that reaches every workspace, template
   and action. Deliberately quiet — dark glass, one amber highlight on the
   active row, no chrome competing with the query.
   -------------------------------------------------------------------------- */
.rb-palette{
  position:fixed; inset:0; z-index:2147483100; display:none;
  align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px;
  background:hsl(var(--rb-s1) / .72); backdrop-filter:blur(6px);
  font-family:var(--rb-font-body);
}
.rb-palette[data-open="true"]{ display:flex; animation:rb-fade 180ms ease-out; }
@keyframes rb-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes rb-rise{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

.rb-palette-box{
  width:min(640px, 100%); max-height:70vh; display:flex; flex-direction:column;
  background:hsl(var(--rb-s3) / .92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid hsl(var(--rb-bd2)); border-radius:var(--radius);
  box-shadow:var(--rb-shadow-xl), 0 0 60px hsl(var(--rb-accent) / calc(.1 * var(--rb-glow-a)));
  overflow:hidden; animation:rb-rise 220ms ease-out;
}
.rb-palette-field{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid hsl(var(--rb-bd)); }
.rb-palette-field svg{ width:18px; height:18px; stroke-width:1.5; color:hsl(var(--rb-accent)); flex:0 0 auto; }
.rb-palette-input{
  flex:1; background:transparent; border:0; outline:0;
  color:hsl(var(--rb-fg)); font-size:1rem; font-family:var(--rb-font-body);
}
.rb-palette-input::placeholder{ color:hsl(var(--rb-fg3)); }
.rb-palette-list{ overflow-y:auto; padding:6px; }
.rb-palette-group{
  font-family:var(--rb-font-mono); font-size:.625rem; letter-spacing:.09em;
  text-transform:uppercase; color:hsl(var(--rb-fg3)); padding:10px 10px 6px;
}
.rb-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:calc(var(--radius) - 4px);
  background:transparent; border:0; cursor:pointer; text-align:left;
  color:hsl(var(--rb-fg)); font-size:.875rem; font-family:var(--rb-font-body);
  transition:background-color 150ms ease-out;
}
.rb-opt svg{ width:16px; height:16px; stroke-width:1.5; color:hsl(var(--rb-fg2)); flex:0 0 auto; }
.rb-opt{ position:relative; }
.rb-opt[data-active="true"]{
  background:hsl(var(--rb-accent) / .16);
  color:hsl(var(--rb-fg));
  box-shadow:inset 2px 0 0 hsl(var(--rb-accent));
}
.rb-opt[data-active="true"] svg{ color:hsl(var(--rb-accent)); }
.rb-opt[data-active="true"] .rb-opt-sub{ color:hsl(var(--rb-accent) / .8); }
.rb-opt-sub{ margin-left:auto; font-family:var(--rb-font-mono); font-size:.6875rem; color:hsl(var(--rb-fg3)); }
.rb-palette-foot{
  display:flex; gap:14px; padding:8px 14px; border-top:1px solid hsl(var(--rb-bd));
  font-size:.6875rem; color:hsl(var(--rb-fg3)); font-family:var(--rb-font-mono);
}
.rb-kbd{
  display:inline-block; padding:1px 5px; border-radius:4px; margin-right:4px;
  background:hsl(var(--rb-s1)); border:1px solid hsl(var(--rb-bd2)); color:hsl(var(--rb-fg2));
}
.rb-empty{ padding:28px 16px; text-align:center; color:hsl(var(--rb-fg3)); font-size:.8125rem; }

/* --------------------------------------------------------------------------
   11. TIPS — the "tips & tricks" surface inside the dock.
   Glass cards with a mono kicker, an amber accent line, and a copyable
   command. Written for this deployment specifically (DeepInfra models, the
   ephemeral-workspace caveat), not generic filler.
   -------------------------------------------------------------------------- */
.rb-tip{
  position:relative; padding:11px 12px 11px 15px; margin-bottom:9px;
  border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--rb-s1) / .55); border:1px solid hsl(var(--rb-bd));
  transition:all 250ms ease-out;
}
.rb-tip::before{
  content:""; position:absolute; left:0; top:11px; bottom:11px; width:2px;
  border-radius:9999px; background:hsl(var(--rb-accent) / .55);
  box-shadow:var(--rb-glow-sm);
}
.rb-tip:hover{ border-color:hsl(var(--rb-bd2)); background:hsl(var(--rb-s1) / .8); }
.rb-tip h4{
  margin:0 0 4px; font-family:var(--rb-font-display);
  font-size:.8125rem; font-weight:600; letter-spacing:-.01em; color:hsl(var(--rb-fg));
}
.rb-tip p{ margin:0; font-size:.75rem; line-height:1.55; color:hsl(var(--rb-fg2)); }
.rb-tip code{
  display:block; margin-top:7px; padding:6px 8px; border-radius:6px;
  background:hsl(var(--rb-s1)); border:1px solid hsl(var(--rb-bd));
  font-family:var(--rb-font-mono); font-size:.6875rem; color:hsl(var(--rb-accent));
  cursor:copy; word-break:break-all; transition:all 200ms ease-out;
}
.rb-tip code:hover{ border-color:hsl(var(--rb-accent) / .4); }
.rb-tip code.rb-copied{ color:hsl(var(--rb-fg)); border-color:hsl(var(--rb-accent) / .6); }

/* Status pills used in the dock's "This deployment" section. */
.rb-stat{ display:flex; align-items:center; gap:8px; padding:7px 0; font-size:.75rem; color:hsl(var(--rb-fg2)); }
.rb-stat b{ margin-left:auto; font-family:var(--rb-font-mono); font-size:.6875rem; font-weight:500; color:hsl(var(--rb-fg)); }
.rb-dot{ width:6px; height:6px; border-radius:9999px; background:hsl(var(--rb-accent)); box-shadow:var(--rb-glow-sm); flex:0 0 auto; }
.rb-dot.rb-pulse{ animation:rb-pulse 2.4s ease-in-out infinite; }
@keyframes rb-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* Floating hint shown once, so the palette is discoverable without a tour. */
.rb-hint{
  position:fixed; bottom:18px; left:18px; z-index:2147483000;
  display:flex; align-items:center; gap:8px; padding:9px 13px;
  border-radius:9999px; background:hsl(var(--rb-s3) / .9); backdrop-filter:blur(10px);
  border:1px solid hsl(var(--rb-bd2)); box-shadow:var(--rb-shadow-lg);
  font-family:var(--rb-font-body); font-size:.75rem; color:hsl(var(--rb-fg2));
  animation:rb-rise 300ms ease-out;
}
.rb-hint button{ background:none; border:0; color:hsl(var(--rb-fg3)); cursor:pointer; font-size:1rem; line-height:1; padding:0 0 0 4px; }
.rb-hint button:hover{ color:hsl(var(--rb-fg)); }

/* --------------------------------------------------------------------------
   12. CLASSIC — stock Coder, plus one way back.
   Every rule above is scoped to [data-skin="modern"], so Classic inherits
   exactly zero of them. The palette, hint and dock panel are hidden and body
   padding is released. The ONE thing we keep is a small return pill, because
   a toggle you cannot reach from the other side is a trap. It is deliberately
   self-contained -- it must not read --rb-* tokens, which do not exist here.
   -------------------------------------------------------------------------- */
html[data-skin="classic"] body{ padding-right:0 !important; }
html[data-skin="classic"] .rb-palette,
html[data-skin="classic"] .rb-hint,
html[data-skin="classic"] .rb-dock-panel,
html[data-skin="classic"] .rb-dock .rb-ico:not([data-act="skin"]),
html[data-skin="classic"] .rb-rail-spacer{ display:none !important; }

html[data-skin="classic"] .rb-dock{
  top:auto; bottom:16px; right:16px; width:auto; height:auto;
  border:1px solid rgba(255,255,255,.14); border-radius:9999px;
  background:rgba(20,20,26,.9); backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4); overflow:hidden;
}
html[data-skin="classic"] .rb-dock-body{ flex:0 0 auto; }
html[data-skin="classic"] .rb-dock-rail{
  width:auto; flex-basis:auto; flex-direction:row; padding:0; border:0;
}
html[data-skin="classic"] .rb-dock .rb-ico[data-act="skin"]{
  width:auto; height:auto; padding:8px 14px; gap:7px; border-radius:9999px;
  display:flex; align-items:center; color:rgba(250,250,250,.82);
  font:500 12px/1 system-ui, sans-serif;
}
html[data-skin="classic"] .rb-dock .rb-ico[data-act="skin"]:hover{ background:rgba(255,255,255,.08); color:#fff; }
/* The pill's label is a real element, not ::after content — pseudo-element
   text is invisible to screen readers, and this button is the ONLY way back
   from Classic, so it must be reachable by assistive tech. */
html[data-skin="classic"] .rb-dock .rb-ico[data-act="skin"] .rb-ico-text{ display:inline; }

/* --------------------------------------------------------------------------
   13. WHITE-LABEL
   Coder's own appearance settings (application name, logo) are a PREMIUM
   feature and this deployment reports `appearance: not_entitled`, so the skin
   is the only route to branding without buying a licence.

   What is removed: the Coder logo mark and the "Coder" wordmark — trademarks,
   which we have no licence to display and no need to.
   What is KEPT: the copyright line and version string in the footer. Coder's
   core is AGPL-3.0, which requires a modified interactive UI to carry the
   Appropriate Legal Notices. It stays legible, just small and quiet.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] [data-rb-coder-mark]{ display:none !important; }

/* Stands in for the hidden Coder logo in the app bar. Sized to sit on a 56px
   bar without changing its height; the wordmark drops away on narrow screens
   so it can never push the nav into a wrap. */
.rb-navmark{ display:inline-flex; align-items:center; gap:9px; }
.rb-navmark-badge{
  width:24px; height:24px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center;
  background:hsl(var(--rb-accent)); color:hsl(var(--rb-accent-fg));
  font-family:var(--rb-font-display); font-weight:700; font-size:10px; letter-spacing:-.02em;
  box-shadow:var(--rb-glow-sm);
}
.rb-navmark-name{
  font-family:var(--rb-font-display); font-weight:600; font-size:.875rem;
  letter-spacing:-.02em; color:hsl(var(--rb-fg)); white-space:nowrap;
}
@media (max-width:720px){ .rb-navmark-name{ display:none; } }
html[data-skin="classic"] .rb-navmark{ display:none !important; }

html[data-skin="modern"] [data-rb-legal]{
  font-size:.6875rem !important;
  line-height:1.6;
  color:hsl(var(--rb-fg3)) !important;
  font-family:var(--rb-font-mono);
  letter-spacing:.02em;
}
html[data-skin="modern"] [data-rb-legal] a{ color:hsl(var(--rb-fg3)); text-decoration:underline; text-underline-offset:2px; }
html[data-skin="modern"] [data-rb-legal] a:hover{ color:hsl(var(--rb-accent)); }

/* --------------------------------------------------------------------------
   14. SPLIT LOGIN — brand on the left, the form on the right.
   The wrapper is tagged by rb-skin.js rather than matched by class, because
   Coder's login wrapper is a Tailwind utility soup that will change between
   releases. Below 900px it collapses to a compact brand header above the form.
   -------------------------------------------------------------------------- */
html[data-skin="modern"] [data-rb-login-wrap]{
  display:grid !important;
  grid-template-columns:1.05fr .95fr;
  min-height:100vh;
  padding:0 !important;
  max-width:none !important;
  align-items:stretch;
  gap:0;
}
/* The form column: centred in its half, with the panel's edge as its only rule. */
html[data-skin="modern"] [data-rb-login-form]{
  justify-self:center; align-self:center;
  width:100%; max-width:22rem;
  padding:2.5rem 1.5rem;
}

.rb-brand{
  /* Coder's login wrapper is `... justify-center min-h-full text-center`, and
     this panel is a sibling inside it — without this it inherits the centring
     meant for the narrow form column. `start`, not `left`, stays RTL-safe. */
  text-align:start;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(2rem,4vw,3.5rem);
  background:
    radial-gradient(38rem 26rem at 18% 12%, hsl(var(--rb-accent) / calc(.10 * var(--rb-glow-a))), transparent 60%),
    linear-gradient(160deg, hsl(var(--rb-s2)), hsl(var(--rb-s1)) 70%);
  border-right:1px solid hsl(var(--rb-bd));
}
/* A faint grid gives the panel material without competing with the form. */
.rb-brand::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(hsl(var(--rb-fg) / .022) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--rb-fg) / .022) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(60% 60% at 30% 30%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(60% 60% at 30% 30%, #000, transparent 75%);
}
.rb-brand > *{ position:relative; }

.rb-mark{ display:flex; align-items:center; gap:12px; }
.rb-mark-badge{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:hsl(var(--rb-accent)); color:hsl(var(--rb-accent-fg));
  font-family:var(--rb-font-display); font-weight:700; font-size:15px; letter-spacing:-.03em;
  box-shadow:var(--rb-glow-btn);
}
.rb-mark-name{
  font-family:var(--rb-font-display); font-weight:600; font-size:1.0625rem;
  letter-spacing:-.02em; color:hsl(var(--rb-fg));
}
.rb-mark-name span{ color:hsl(var(--rb-fg2)); font-weight:500; }

.rb-brand-lede{ max-width:24rem; margin:clamp(2rem,5vh,3.5rem) 0; }
.rb-brand-kicker{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:18px;
  padding:5px 11px; border-radius:9999px;
  background:hsl(var(--rb-accent) / .1); border:1px solid hsl(var(--rb-accent) / .22);
  font-family:var(--rb-font-mono); font-size:.625rem; letter-spacing:.09em;
  text-transform:uppercase; color:hsl(var(--rb-accent));
  box-shadow:var(--rb-glow-sm);
}
.rb-brand-lede h2{
  font-family:var(--rb-font-display); font-weight:600;
  font-size:clamp(1.75rem,3.1vw,2.5rem); line-height:1.12; letter-spacing:-.03em;
  margin:0 0 14px; color:hsl(var(--rb-fg)); text-wrap:balance;
}
.rb-brand-lede p{ margin:0; font-size:.9375rem; line-height:1.65; color:hsl(var(--rb-fg2)); }

.rb-brand-specs{ display:grid; gap:11px; margin-top:26px; padding:0; list-style:none; }
.rb-brand-specs li{ display:flex; align-items:flex-start; gap:10px; font-size:.8125rem; color:hsl(var(--rb-fg2)); }
.rb-brand-specs b{ color:hsl(var(--rb-fg)); font-weight:500; }
.rb-spec-dot{
  width:5px; height:5px; margin-top:7px; flex:0 0 auto; border-radius:9999px;
  background:hsl(var(--rb-accent)); box-shadow:var(--rb-glow-sm);
}

@media (max-width:900px){
  html[data-skin="modern"] [data-rb-login-wrap]{ grid-template-columns:1fr; min-height:0; }
  .rb-brand{
    border-right:0; border-bottom:1px solid hsl(var(--rb-bd));
    padding:1.5rem 1.25rem; gap:14px;
  }
  .rb-brand-lede{ margin:0; }
  .rb-brand-lede h2{ font-size:1.375rem; }
  .rb-brand-lede p, .rb-brand-specs{ display:none; }   /* compact header only */
}

/* --------------------------------------------------------------------------
   15. MOBILE CORRECTIONS
   Three things break below ~900px and all three were caught on a 375px device:
   (a) the login form column is 22rem + 3rem of padding = wider than the screen,
   (b) the brand wordmark is a nowrap flex row and clips,
   (c) the dock is a full-height fixed rail, so with body padding released it
       sits ON TOP of the right edge of the content.
   The dock becomes a floating pill, and a bottom sheet when opened — the same
   gesture vocabulary a phone user expects, instead of a desktop rail shrunk.
   -------------------------------------------------------------------------- */
@media (max-width:900px){

  /* (a) let the form use the screen it has */
  html[data-skin="modern"] [data-rb-login-wrap]{ grid-template-columns:minmax(0,1fr); }
  html[data-skin="modern"] [data-rb-login-wrap] > *{ min-width:0; }
  html[data-skin="modern"] [data-rb-login-form]{
    max-width:none; width:100%; padding:1.75rem 1.15rem 2.5rem;
  }

  /* (b) the wordmark may wrap; it must never clip */
  .rb-mark{ flex-wrap:wrap; }
  .rb-mark-name{ font-size:1rem; min-width:0; overflow-wrap:anywhere; }
  .rb-brand-lede h2{ overflow-wrap:break-word; }

  /* (c) closed: a floating pill, not a rail */
  .rb-dock{
    top:auto; bottom:14px; right:14px; width:auto; height:auto;
    border:1px solid hsl(var(--rb-bd2)); border-radius:9999px;
    box-shadow:var(--rb-shadow-lg); overflow:hidden;
  }
  .rb-dock-body{ flex:0 0 auto; min-height:0; }
  .rb-dock-rail{
    width:auto; flex:0 0 auto; flex-direction:row; padding:5px 7px; gap:2px;
    border-right:0 !important;
  }
  .rb-rail-spacer{ display:none; }

  /* open: a bottom sheet */
  html[data-skin="modern"][data-dock="open"] .rb-dock{
    left:0; right:0; bottom:0; width:auto; max-height:80vh;
    border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0;
  }
  html[data-skin="modern"][data-dock="open"] .rb-dock-body{
    flex:1; flex-direction:column; min-height:0;
  }
  html[data-skin="modern"][data-dock="open"] .rb-dock-rail{
    justify-content:center; border-bottom:1px solid hsl(var(--rb-bd));
  }
  html[data-skin="modern"][data-dock="open"] .rb-dock-panel{
    display:block; flex:1; min-height:0; overflow-y:auto;
  }

  /* the hint would collide with the pill */
  .rb-hint{ display:none; }
}
