/* RR42 Suite: product icons, the app switcher and the top bar.
 *
 * Canonical copy, beside js/suite.js (see there): other apps carry this
 * file unchanged, NakedERP as public/css/rr42_suite.css. Every class is
 * prefixed `rr42-` and sizes are in px, so it reads the same inside an
 * app whatever that app's own root font size, reset or theme. The light
 * look is the default; a dark theme on <html> - `data-theme="dark"` as
 * NakedERP's office UI sets it, or the `dark` class of its /nk UI -
 * switches the icons, the panel and the bar to dark. */


/* ---------------------------------------------------------------- */
/* Product icons                                                     */

/* Drawn by RR42Suite.drawIcon(): filled shapes on a 48x48 grid,
 * Google-style. One palette for all of them, so nine pictures read as
 * one suite: the two ends of the rr42.de homepage gradient, deepened
 * enough to hold up as solid fills, the brand teal, and a warm sand. */
.rr42-icon {
   --rr-teal: #0e6577;
   --rr-sky: #79b2c2;
   --rr-coral: #e1745a;
   --rr-sand: #f0b44f;
   --rr-ink: #181213;
   --rr-track: rgb(24 18 19 / .1);

   flex: none;
   display: block;
   overflow: visible;

   * {
      transform-box: fill-box;
      transform-origin: center;
   }

   /* Fill and stroke together: the funnel and shield paths carry a thin
    * stroke in their own colour, which is what rounds their corners. */
   .f-teal  { fill: var(--rr-teal);  stroke: var(--rr-teal); }
   .f-sky   { fill: var(--rr-sky);   stroke: var(--rr-sky); }
   .f-coral { fill: var(--rr-coral); stroke: var(--rr-coral); }
   .f-sand  { fill: var(--rr-sand);  stroke: var(--rr-sand); }
   .f-ink   { fill: var(--rr-ink); }
   .f-white { fill: #fff; }
   .f-white-soft { fill: rgb(255 255 255 / .5); }
   .f-track { fill: var(--rr-track); }

   :is(.s-sky, .s-sand, .s-coral, .s-ink, .s-white) {
      fill: none;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
   }
   .s-sky   { stroke: var(--rr-sky); }
   .s-sand  { stroke: var(--rr-sand); }
   .s-coral { stroke: var(--rr-coral); }
   .s-ink   { stroke: var(--rr-ink); stroke-width: 3.5; }
   .s-white { stroke: #fff; stroke-width: 4.5; }
   .s-gauge { stroke-width: 6; stroke-linecap: butt; }
}

/* On a dark surface the ink parts (the gauge's needle, the calendar's
 * rings) and the slider tracks would vanish. */
:root:is([data-theme="dark"], .dark) .rr42-icon {
   --rr-ink: #e8e2e0;
   --rr-track: rgb(255 255 255 / .16);
}

@media (prefers-reduced-motion: no-preference) {

   /* Each icon acts out its app while its host is hovered or focused.
    * The animations end where the drawing rests, so leaving mid-way
    * just snaps back to the still icon. */
   .rr42-icon-host:is(:hover, :focus-visible) .rr42-icon {
      .a-grow  { animation: rr42-grow .7s cubic-bezier(.3, 1.35, .5, 1) calc(var(--d) * 70ms) backwards; transform-origin: 50% 100%; }
      .a-drop  { animation: rr42-drop .9s ease-in-out; }
      .a-bob   { animation: rr42-bob .6s ease-in-out; }
      .a-blink { animation: rr42-blink .9s ease-in-out calc(var(--d) * 120ms); }
      .a-book  { animation: rr42-book .65s cubic-bezier(.3, 1.4, .5, 1); }
      .a-draw  { animation: rr42-draw .55s ease-out .05s backwards; }
      .a-pop   { animation: rr42-pop .5s cubic-bezier(.3, 1.8, .5, 1) .35s backwards; }
      .a-wave  { animation: rr42-wave .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) * 70ms); }
      .a-flash { animation: rr42-flash .8s ease-out calc(var(--d) * 140ms); }
      .a-slide { animation: rr42-slide .8s ease-in-out; }
      .a-spin  { animation: rr42-spin .7s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d) * 90ms) backwards; }

      /* The handset rings as one piece: both halves and both pads turn
       * about one point of the icon, not each about its own box. */
      .a-ring {
         animation: rr42-ring .75s ease-in-out;
         transform-box: view-box;
         transform-origin: 21.5px 26.5px;
      }

      /* Pivots on the gauge's hub, which is a point in the icon's own
       * coordinates - hence the view-box, not the part's own box. */
      .a-swing {
         animation: rr42-swing 1s cubic-bezier(.3, 1.3, .5, 1);
         transform-box: view-box;
         transform-origin: 24px 30px;
      }
   }

   /* Status is the one icon that moves on its own: it stands for a live
    * signal, and a slow ping is what says so. */
   .rr42-icon .a-ping {
      opacity: .35;
      animation: rr42-ping 2.4s cubic-bezier(.2, .6, .4, 1) infinite;
   }
}

/* Still, the halo would only be a pale disc behind the beacon. */
@media (prefers-reduced-motion: reduce) {
   .rr42-icon .a-ping { display: none; }
}

@keyframes rr42-grow  { from { transform: scaleY(.35); } }
@keyframes rr42-drop  {
   0%   { transform: translateY(0);    opacity: 1; }
   55%  { transform: translateY(20px); opacity: 0; }
   56%  { transform: translateY(-8px); opacity: 0; }
   100% { transform: translateY(0);    opacity: 1; }
}
@keyframes rr42-bob   { 50% { transform: translateY(-3px); } }
@keyframes rr42-blink { 30% { transform: translateY(-3px); opacity: .6; } 60% { transform: none; opacity: 1; } }
@keyframes rr42-book  { from { transform: translateX(-14px) scale(.8); } }
@keyframes rr42-draw  { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes rr42-pop   { from { transform: scale(0); } }
@keyframes rr42-wave  { 40% { transform: scale(.72); } }
@keyframes rr42-flash { from { opacity: .25; transform: scale(.85); } }
@keyframes rr42-swing { from { transform: rotate(-80deg); } }
@keyframes rr42-slide { 50% { transform: translateX(var(--dx)); } }
@keyframes rr42-spin  { from { transform: rotate(-90deg) scale(.4); } }
@keyframes rr42-ring  {
   15% { transform: rotate(-11deg); }
   30% { transform: rotate(9deg); }
   45% { transform: rotate(-7deg); }
   60% { transform: rotate(5deg); }
   75% { transform: rotate(-2deg); }
}
@keyframes rr42-ping  {
   0%        { transform: scale(1);   opacity: .35; }
   70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* An icon popping into place, for grids that build in one by one. */
@keyframes rr42-icon-in { from { opacity: 0; transform: scale(.55) rotate(-8deg); } }


/* ---------------------------------------------------------------- */
/* App mark                                                          */

/* Drawn by RR42Suite.drawMark(): the app's icon in black and white on
 * the 28px rounded tile of the RR42 "42" mark, for the left end of the
 * app's own bar. Same tile, same ink as the "42" on www.rr42.de and
 * /apps, so the bars line up; the colours stay with the launcher. The
 * four hues become white and two greys so two-tone icons still read;
 * the white details become cut-outs in the tile's ink. */
.rr42-mark {
   flex: none;
   display: grid;
   place-items: center;
   box-sizing: border-box;
   inline-size: 28px;
   block-size: 28px;
   border-radius: 6px;
   background: #181213;

   .rr42-icon {
      --rr-teal: #ffffff;
      --rr-coral: #ffffff;
      --rr-sand: #d8d3d1;
      --rr-sky: #a19a98;
      --rr-ink: #ffffff;
      --rr-track: rgb(255 255 255 / .3);

      inline-size: 20px;
      block-size: 20px;

      .f-white { fill: #181213; }
      .f-white-soft { fill: rgb(24 18 19 / .55); }
      .s-white { stroke: #181213; }
   }
}

/* Dark: the tile turns white and the icon ink, like a negative. */
:root:is([data-theme="dark"], .dark) .rr42-mark {
   background: #ffffff;

   .rr42-icon {
      --rr-teal: #181213;
      --rr-coral: #181213;
      --rr-sand: #4b4341;
      --rr-sky: #7a7270;
      --rr-ink: #181213;
      --rr-track: rgb(24 18 19 / .28);

      .f-white { fill: #ffffff; }
      .f-white-soft { fill: rgb(255 255 255 / .55); }
      .s-white { stroke: #ffffff; }
   }
}


/* ---------------------------------------------------------------- */
/* Top bar                                                           */

/* The bar every app of the suite opens with, after NakedERP's home bar:
 * 56px, frosted, three columns - the app's mark and name, search in
 * the middle, the app's own actions then the switcher and the avatar
 * on the right. The side columns stay equal while there is room, so
 * search sits in the true centre; when it gets tight, search shrinks. */
.rr42-bar {
   --rr42-bar-ink: #181213;
   --rr42-bar-muted: #645c59;
   --rr42-bar-subtle: #847c79;
   --rr42-bar-line: #e8e4e3;
   --rr42-bar-control: #ffffff;
   --rr42-bar-glass: rgb(255 255 255 / .86);
   --rr42-bar-edge: rgb(24 18 19 / .07);
   --rr42-bar-focus: 0 0 0 3px rgb(0 72 90 / .2);

   position: sticky;
   top: 0;
   z-index: 50;
   box-sizing: border-box;
   display: grid;
   grid-template-columns: minmax(max-content, 1fr) minmax(0, 520px) minmax(max-content, 1fr);
   align-items: center;
   column-gap: 16px;
   block-size: 56px;
   padding-inline: 20px;
   border-block-end: 1px solid var(--rr42-bar-edge);
   background: var(--rr42-bar-glass);
   -webkit-backdrop-filter: blur(20px) saturate(120%);
   backdrop-filter: blur(20px) saturate(120%);
   color: var(--rr42-bar-ink);
   font: 300 15px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;

   @media (max-width: 640px) {
      column-gap: 10px;
      padding-inline: 14px;
   }
}

:root:is([data-theme="dark"], .dark) .rr42-bar {
   --rr42-bar-ink: #ffffff;
   --rr42-bar-muted: #a8a09d;
   --rr42-bar-subtle: #7a716e;
   --rr42-bar-line: #2e2627;
   --rr42-bar-control: #1d1718;
   --rr42-bar-glass: rgb(20 15 16 / .86);
   --rr42-bar-edge: rgb(255 255 255 / .06);
   --rr42-bar-focus: 0 0 0 3px rgb(131 163 172 / .25);
}

.rr42-bar__brand {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-self: start;
   min-inline-size: 0;
   color: inherit;
   text-decoration: none;

   &:hover,
   &:focus { color: inherit; text-decoration: none; }

   &:focus-visible {
      outline: none;
      border-radius: 8px;
      box-shadow: var(--rr42-bar-focus);
   }

   img {
      display: block;
      inline-size: 28px;
      block-size: 28px;
      border-radius: 6px;
   }
}

.rr42-bar__name {
   font-size: 15px;
   font-weight: 400;
   letter-spacing: .08em;
   white-space: nowrap;
}

.rr42-bar__search {
   grid-column: 2;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 8px;
   inline-size: 100%;
   block-size: 34px;
   padding-inline: 14px;
   border: 1px solid var(--rr42-bar-line);
   border-radius: 999px;
   background: var(--rr42-bar-control);
   color: var(--rr42-bar-muted);
   font-size: 13px;
   cursor: text;
   transition: box-shadow .15s, border-color .15s;

   &:focus-within {
      border-color: transparent;
      box-shadow: var(--rr42-bar-focus);
   }

   svg {
      flex: none;
      inline-size: 16px;
      block-size: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
   }

   input {
      flex: 1;
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--rr42-bar-ink);
      font: inherit;
      outline: none;
      -webkit-appearance: none;
      appearance: none;

      &::placeholder { color: var(--rr42-bar-muted); opacity: 1; }
      &::-webkit-search-cancel-button { -webkit-appearance: none; }
   }

   kbd {
      flex: none;
      padding: 0;
      background: none;
      box-shadow: none;
      color: var(--rr42-bar-subtle);
      font: inherit;
      font-size: 12px;
      line-height: 1;
   }

   @media (max-width: 640px) {
      kbd { display: none; }
   }
}

.rr42-bar__actions {
   grid-column: 3;
   display: flex;
   align-items: center;
   justify-self: end;
   gap: 12px;
}


/* ---------------------------------------------------------------- */
/* App switcher                                                      */

/* The round 3x3 button left of the avatar. 36px, no taller: it sits in
 * header rows that were measured without it. Its hover wash is mixed
 * from currentColor, so it works on whichever ink the header is in. */
.rr42-switcher {
   display: flex;

   /* An author `display` outranks the browser's own [hidden] rule. */
   &[hidden] { display: none; }
}

.rr42-switcher__toggle {
   display: grid;
   place-items: center;
   box-sizing: border-box;
   inline-size: 36px;
   block-size: 36px;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: inherit;
   cursor: pointer;
   transition: background-color .2s;

   &:hover,
   &[aria-expanded="true"] {
      background: color-mix(in srgb, currentColor 9%, transparent);
   }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: 2px;
   }
}

.rr42-switcher__waffle {
   display: block;
   inline-size: 22px;
   block-size: 22px;

   circle {
      fill: currentColor;
      transition: fill .25s calc(var(--n) * 30ms);
   }
}

/* Hovering the waffle colours its dots from the icon palette - a hint
 * of what the panel holds, and the one place a header shows colour. */
.rr42-switcher__toggle:is(:hover, [aria-expanded="true"]) .rr42-switcher__waffle circle {
   &:nth-child(4n + 1) { fill: #0e6577; }
   &:nth-child(4n + 2) { fill: #e1745a; }
   &:nth-child(4n + 3) { fill: #f0b44f; }
   &:nth-child(4n + 4) { fill: #79b2c2; }
}

/* The colours of everything that opens over a page: the switcher's
 * panel, the account menu and the Connect AI dialog. */
:is(.rr42-switcher__panel, .rr42-account__panel, .rr42-connect) {
   --rr42-panel-frame: #f6f4f1;
   --rr42-panel-sheet: #ffffff;
   --rr42-panel-ink: #181213;
   --rr42-panel-hover: #f1eeea;
   --rr42-panel-current: rgb(0 72 90 / .07);
   --rr42-panel-line: rgb(24 18 19 / .09);
   --rr42-panel-quiet: rgb(24 18 19 / .7);
   --rr42-panel-pill: rgb(24 18 19 / .35);
   --rr42-panel-shadow: 0 2px 6px rgb(24 18 19 / .1), 0 18px 48px rgb(24 18 19 / .18);
}

:root:is([data-theme="dark"], .dark) :is(.rr42-switcher__panel, .rr42-account__panel, .rr42-connect) {
   --rr42-panel-frame: #140f10;
   --rr42-panel-sheet: #211a1b;
   --rr42-panel-ink: #e8e2e0;
   --rr42-panel-hover: #2a2223;
   --rr42-panel-current: rgb(131 163 172 / .14);
   --rr42-panel-line: rgb(255 255 255 / .08);
   --rr42-panel-quiet: rgb(232 226 224 / .7);
   --rr42-panel-pill: rgb(232 226 224 / .35);
   --rr42-panel-shadow: 0 2px 6px rgb(0 0 0 / .4), 0 18px 48px rgb(0 0 0 / .5);
}

/* The panel: Google's layout - a tinted frame, the apps on a sheet
 * inside it, three to a row, the full launcher linked underneath.
 * Placed by suite.js, fixed to the viewport, attached to <body>. The
 * account menu is the same frame with other things on its sheet. */
:is(.rr42-switcher__panel, .rr42-account__panel) {
   position: fixed;
   z-index: 1000;
   box-sizing: border-box;
   inline-size: min(336px, calc(100vw - 24px));
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 8px 8px 12px;
   background: var(--rr42-panel-frame);
   color: var(--rr42-panel-ink);
   border-radius: 28px;
   box-shadow: var(--rr42-panel-shadow);
   font: 300 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
   text-align: start;
   transform-origin: top right;

   *, *::before, *::after { box-sizing: border-box; }

   &[hidden] { display: none; }

   @media (prefers-reduced-motion: no-preference) {
      animation: rr42-switcher-in .18s cubic-bezier(.2, .7, .3, 1);
   }
}

@keyframes rr42-switcher-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

.rr42-switcher__sheet {
   padding: 8px;
   background: var(--rr42-panel-sheet);
   border-radius: 22px;
}

.rr42-switcher__group {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2px;

   & + & {
      margin-block-start: 8px;
      padding-block-start: 8px;
      border-block-start: 1px solid var(--rr42-panel-line);
   }
}

.rr42-switcher__item {
   display: grid;
   justify-items: center;
   align-content: start;
   gap: 8px;
   padding: 14px 4px 12px;
   border-radius: 16px;
   color: inherit;
   text-decoration: none;
   font-size: 13px;
   font-weight: 300;
   line-height: 1.2;
   text-align: center;
   text-wrap: balance;
   transition: background-color .15s;

   &:hover,
   &:focus {
      color: inherit;
      text-decoration: none;
   }

   &:hover { background: var(--rr42-panel-hover); }

   &[aria-current="page"] { background: var(--rr42-panel-current); }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: -2px;
   }

   .rr42-icon {
      inline-size: 42px;
      block-size: 42px;
   }

   /* Every opening replays this: display: none to visible restarts a
    * CSS animation, so the icons pop in each time, one after another. */
   @media (prefers-reduced-motion: no-preference) {
      .rr42-icon {
         animation: rr42-icon-in .45s cubic-bezier(.3, 1.5, .5, 1) backwards;
         animation-delay: calc(var(--i, 0) * 25ms + 40ms);
      }
   }
}

.rr42-switcher__empty {
   margin: 0;
   padding: 20px 16px;
   font-size: 15px;
   text-align: center;
   color: var(--rr42-panel-quiet);
}

/* The outlined pill of rr42.de's header buttons. */
.rr42-switcher__all {
   display: block;
   inline-size: fit-content;
   margin: 12px auto 0;
   padding: 7px 18px;
   border: 1px solid var(--rr42-panel-pill);
   border-radius: 24px;
   color: inherit;
   text-decoration: none;
   font-size: 14px;
   line-height: 1.4;
   transition: background-color .2s, color .2s, border-color .2s;

   &:hover,
   &:focus {
      color: inherit;
      text-decoration: none;
   }

   &:hover {
      background: rgb(0 72 90);
      border-color: transparent;
      color: #fff;
   }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: 3px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .rr42-bar__search,
   .rr42-switcher__toggle,
   .rr42-switcher__waffle circle,
   .rr42-switcher__item,
   .rr42-switcher__all { transition: none; }
}


/* ---------------------------------------------------------------- */
/* Account menu                                                      */

/* A person's picture: their photo, or their initials on ink. */
.rr42-avatar {
   --rr42-avatar-bg: #181213;
   --rr42-avatar-ink: #ffffff;

   display: grid;
   place-items: center;
   flex: none;
   overflow: hidden;
   border-radius: 50%;
   background: var(--rr42-avatar-bg);
   color: var(--rr42-avatar-ink);
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: .02em;
   line-height: 1;
   user-select: none;

   img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
   }
}

:root:is([data-theme="dark"], .dark) .rr42-avatar {
   --rr42-avatar-bg: #e8e2e0;
   --rr42-avatar-ink: #181213;
}

.rr42-avatar--button {
   inline-size: 32px;
   block-size: 32px;
   font-size: 13px;
}

.rr42-avatar--large {
   inline-size: 64px;
   block-size: 64px;
   font-size: 24px;
}

.rr42-account {
   display: flex;

   &[hidden] { display: none; }
}

/* 36px like the switcher's button, so the two sit as a pair; the ring
 * on hover is mixed from currentColor, so it works on any header ink. */
.rr42-account__toggle {
   display: grid;
   place-items: center;
   box-sizing: border-box;
   inline-size: 36px;
   block-size: 36px;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: inherit;
   cursor: pointer;

   .rr42-avatar { transition: box-shadow .2s; }

   &:hover .rr42-avatar,
   &[aria-expanded="true"] .rr42-avatar {
      box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
   }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: 2px;
   }
}

/* Who is signed in, centred on the frame above the sheet, as in
 * Google's account menu. */
.rr42-account__who {
   display: grid;
   justify-items: center;
   gap: 2px;
   padding: 18px 12px 16px;
   text-align: center;

   .rr42-avatar { margin-block-end: 10px; }
}

.rr42-account__name {
   margin: 0;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.3;
   overflow-wrap: anywhere;
}

.rr42-account__email {
   margin: 0;
   font-size: 13px;
   color: var(--rr42-panel-quiet);
   overflow-wrap: anywhere;

   &[hidden] { display: none; }
}

/* The outlined pill of rr42.de's header buttons, like "All apps". */
.rr42-account__manage {
   margin: 12px 0 0;
   padding: 7px 18px;
   border: 1px solid var(--rr42-panel-pill);
   border-radius: 24px;
   background: transparent;
   color: inherit;
   font: inherit;
   font-size: 14px;
   line-height: 1.4;
   cursor: pointer;
   transition: background-color .2s, color .2s, border-color .2s;

   &[hidden] { display: none; }

   &:hover {
      background: rgb(0 72 90);
      border-color: transparent;
      color: #fff;
   }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: 3px;
   }
}

.rr42-account__sheet {
   display: grid;
   gap: 2px;
   padding: 6px;
   background: var(--rr42-panel-sheet);
   border-radius: 22px;
}

.rr42-account__item {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 14px;
   inline-size: 100%;
   margin: 0;
   padding: 12px 14px;
   border: 0;
   border-radius: 16px;
   background: transparent;
   color: inherit;
   font: inherit;
   font-size: 15px;
   text-align: start;
   cursor: pointer;
   transition: background-color .15s;

   &:hover { background: var(--rr42-panel-hover); }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: -2px;
   }

   .rr42-icon {
      inline-size: 36px;
      block-size: 36px;
   }
}

/* Connect AI leads the sheet, so it gets the colour; sign out is a
 * plain line underneath, apart from it. */
.rr42-account__item--connect {
   padding-block: 14px;

   & + .rr42-account__item {
      margin-block-start: 4px;
      border-block-start: 1px solid var(--rr42-panel-line);
      border-radius: 0 0 16px 16px;
   }
}

.rr42-account__text {
   display: grid;
   gap: 2px;
   min-inline-size: 0;

   strong {
      font-size: 16px;
      font-weight: 400;
   }

   span {
      font-size: 13px;
      color: var(--rr42-panel-quiet);
   }
}

:is(.rr42-account__go, .rr42-account__glyph) {
   display: block;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.rr42-account__go {
   inline-size: 18px;
   block-size: 18px;
   opacity: .3;
   transition: opacity .2s, transform .2s;
}

.rr42-account__item:hover .rr42-account__go {
   opacity: .9;
   transform: translateX(2px);
}

/* Sized to the AI icon's column, so both labels start on one line. */
.rr42-account__glyph {
   inline-size: 36px;
   block-size: 20px;
   opacity: .7;
}


/* ---------------------------------------------------------------- */
/* Connect AI                                                        */

/* A modal <dialog>: the same frame and sheet as the panels, wider, with
 * one tab per assistant. Built by suite.js on first use. */
.rr42-connect {
   box-sizing: border-box;
   inline-size: min(680px, calc(100vw - 24px));
   max-inline-size: none;
   max-block-size: calc(100dvh - 24px);
   margin: auto;
   padding: 0;
   overflow: auto;
   overscroll-behavior: contain;
   border: 0;
   border-radius: 28px;
   background: var(--rr42-panel-frame);
   color: var(--rr42-panel-ink);
   box-shadow: var(--rr42-panel-shadow);
   font: 300 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   text-align: start;

   *, *::before, *::after { box-sizing: border-box; }

   &::backdrop {
      background: rgb(24 18 19 / .45);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
   }

   @media (prefers-reduced-motion: no-preference) {
      &[open] { animation: rr42-connect-in .22s cubic-bezier(.2, .7, .3, 1); }
   }

   a {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: var(--rr42-panel-pill);
      text-underline-offset: 3px;

      &:hover { text-decoration-color: currentColor; }
   }

   code, pre {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   }
}

@keyframes rr42-connect-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.rr42-connect__frame {
   display: grid;
   gap: 16px;
   padding: 24px;

   @media (max-width: 640px) {
      padding: 18px 14px;
   }
}

.rr42-connect__head {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: start;
   gap: 16px;

   > .rr42-icon {
      inline-size: 44px;
      block-size: 44px;
      margin-block-start: 2px;
   }

   /* On a phone the lead takes the full width under icon and title,
    * rather than a narrow column beside the icon. */
   @media (max-width: 640px) {
      grid-template-areas: "icon title close" "lead lead lead";
      align-items: center;
      gap: 10px 12px;

      > .rr42-icon {
         grid-area: icon;
         inline-size: 36px;
         block-size: 36px;
         margin: 0;
      }

      .rr42-connect__heading { display: contents; }
      .rr42-connect__title { grid-area: title; margin: 0; }
      .rr42-connect__lead { grid-area: lead; }
      .rr42-connect__close { grid-area: close; margin: 0 -6px 0 0; }
   }
}

/* The sparkle turns in as the dialog opens. */
@media (prefers-reduced-motion: no-preference) {
   .rr42-connect[open] .rr42-connect__head .a-spin {
      animation: rr42-spin .8s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d) * 120ms + 80ms) backwards;
   }
}

.rr42-connect__title {
   margin: 0 0 6px;
   font-size: 28px;
   font-weight: 300;
   line-height: 1.15;
   letter-spacing: -.01em;

   @media (max-width: 640px) {
      font-size: 23px;
   }
}

.rr42-connect__lead {
   margin: 0;
   max-inline-size: 52ch;
   font-size: 15px;
   color: var(--rr42-panel-quiet);
}

.rr42-connect__close {
   display: grid;
   place-items: center;
   inline-size: 36px;
   block-size: 36px;
   margin: -4px -4px 0 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: inherit;
   cursor: pointer;
   transition: background-color .2s;

   &:hover { background: var(--rr42-panel-hover); }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: 2px;
   }
}

.rr42-connect__x {
   inline-size: 20px;
   block-size: 20px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
}

/* The address, on its own sheet: the one thing every guide needs. */
.rr42-connect__url {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 12px;
   padding: 10px 10px 10px 18px;
   background: var(--rr42-panel-sheet);
   border-radius: 18px;

   @media (max-width: 640px) {
      grid-template-columns: 1fr auto;

      .rr42-connect__label { grid-column: 1 / -1; }
   }
}

.rr42-connect__label {
   font-size: 12px;
   font-weight: 400;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--rr42-panel-quiet);
}

/* Small enough on a phone that the address stays on one line. */
.rr42-connect__address {
   min-inline-size: 0;
   font-size: 15px;
   overflow-wrap: anywhere;

   @media (max-width: 640px) {
      font-size: 13px;
   }
}

/* An outlined pill that fills teal on hover, like every other button. */
.rr42-connect__copy {
   flex: none;
   margin: 0;
   padding: 6px 14px;
   border: 1px solid var(--rr42-panel-pill);
   border-radius: 24px;
   background: transparent;
   color: inherit;
   font: inherit;
   font-size: 13px;
   line-height: 1.4;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color .2s, color .2s, border-color .2s;

   &:hover {
      background: rgb(0 72 90);
      border-color: transparent;
      color: #fff;
   }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: 2px;
   }
}

/* The assistants as a row of tabs on the frame; the chosen one turns
 * white and joins the sheet below it. Scrolls sideways on a phone. */
.rr42-connect__tabs {
   display: flex;
   gap: 4px;
   margin-block-end: -16px;
   overflow-x: auto;
   scrollbar-width: none;

   &::-webkit-scrollbar { display: none; }

   /* On a phone not all of them fit: the row fades out at the right
    * edge to say there is more, and its end padding lets the last tab
    * scroll clear of the fade. */
   @media (max-width: 640px) {
      padding-inline-end: 32px;
      -webkit-mask-image: linear-gradient(to left, transparent, #000 32px);
      mask-image: linear-gradient(to left, transparent, #000 32px);
   }
}

.rr42-connect__tab {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: none;
   margin: 0;
   padding: 10px 16px 12px;
   border: 0;
   border-radius: 16px 16px 0 0;
   background: transparent;
   color: var(--rr42-panel-quiet);
   font: inherit;
   font-size: 14px;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color .15s, color .15s;

   &:hover { color: var(--rr42-panel-ink); background: var(--rr42-panel-hover); }

   &[aria-selected="true"] {
      background: var(--rr42-panel-sheet);
      color: var(--rr42-panel-ink);
      font-weight: 400;
   }

   &:focus { outline: none; }

   &:focus-visible {
      outline: 2px solid rgb(0 72 90);
      outline-offset: -2px;
   }
}

/* Status, as a colour from the icon palette: teal ready, sand likely,
 * coral on request. */
.rr42-connect__dot {
   inline-size: 8px;
   block-size: 8px;
   border-radius: 50%;
   background: var(--rr42-status);
}

:is(.rr42-connect__tab, .rr42-connect__status)[data-status="ready"] { --rr42-status: #0e6577; }
:is(.rr42-connect__tab, .rr42-connect__status)[data-status="likely"] { --rr42-status: #f0b44f; }
:is(.rr42-connect__tab, .rr42-connect__status)[data-status="request"] { --rr42-status: #e1745a; }

.rr42-connect__sheet {
   padding: 22px 24px 24px;
   background: var(--rr42-panel-sheet);
   border-radius: 22px;

   @media (max-width: 640px) {
      padding: 18px 16px 20px;
   }
}

/* The first tab's sheet meets its tab square, the rest round. */
.rr42-connect__tabs:has(.rr42-connect__tab:first-child[aria-selected="true"]) + .rr42-connect__sheet {
   border-start-start-radius: 0;
}

.rr42-connect__panel {
   display: grid;
   gap: 14px;
   font-size: 15px;

   &[hidden] { display: none; }

   &:focus { outline: none; }

   p { margin: 0; }
}

.rr42-connect__status {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 10px;
   font-size: 13px;
   color: var(--rr42-panel-quiet);
}

.rr42-connect__chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 3px 10px 3px 8px;
   border-radius: 999px;
   background: color-mix(in srgb, var(--rr42-status) 16%, transparent);
   color: var(--rr42-panel-ink);
   font-size: 12px;
   font-weight: 400;
   letter-spacing: .04em;

   &::before {
      content: "";
      inline-size: 7px;
      block-size: 7px;
      border-radius: 50%;
      background: var(--rr42-status);
   }
}

.rr42-connect__intro {
   line-height: 1.55;
}

/* Numbered steps, the numbers in small rings. */
.rr42-connect__steps {
   display: grid;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: rr42-step;

   li {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 12px;
      align-items: baseline;
      line-height: 1.55;
      counter-increment: rr42-step;

      &::before {
         content: counter(rr42-step);
         display: grid;
         place-items: center;
         inline-size: 24px;
         block-size: 24px;
         border: 1px solid var(--rr42-panel-pill);
         border-radius: 50%;
         font-size: 12px;
         font-weight: 400;
         line-height: 1;
         transform: translateY(-1px);
      }
   }

   /* Menu and button names. 600, not 400 or 500: against 300 those
    * hardly show, and not at all where Helvetica falls back to Arial,
    * which has nothing between regular and bold. */
   strong { font-weight: 600; }
}

.rr42-connect__inline {
   padding: 1px 6px;
   border-radius: 6px;
   background: var(--rr42-panel-frame);
   font-size: .9em;
   overflow-wrap: anywhere;
}

/* Values to type into a form, each with its own copy button. */
.rr42-connect__fields {
   display: grid;
   gap: 2px;
   margin: 0;
   padding: 6px 6px 6px 14px;
   border-radius: 16px;
   background: var(--rr42-panel-frame);
}

.rr42-connect__field {
   display: grid;
   grid-template-columns: 140px 1fr;
   align-items: center;
   gap: 4px 12px;
   padding-block: 4px;

   dt {
      font-size: 13px;
      color: var(--rr42-panel-quiet);
   }

   dd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-inline-size: 0;
      margin: 0;
   }

   code {
      min-inline-size: 0;
      font-size: 13px;
      overflow-wrap: anywhere;
   }

   @media (max-width: 640px) {
      grid-template-columns: 1fr;
   }
}

/* Commands and config files: ink, like a terminal. */
.rr42-connect__code {
   margin: 0;
   overflow: hidden;
   border-radius: 16px;
   background: #181213;
   color: #f6f4f1;

   figcaption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 8px 8px 16px;
      border-block-end: 1px solid rgb(255 255 255 / .08);
      font-size: 13px;
      color: rgb(246 244 241 / .7);
   }

   .rr42-connect__copy {
      border-color: rgb(246 244 241 / .3);
      color: #f6f4f1;
   }

   pre {
      margin: 0;
      padding: 14px 16px;
      overflow-x: auto;
      font-size: 13px;
      line-height: 1.55;
      white-space: pre;
   }
}

.rr42-connect__note {
   padding-block-start: 12px;
   border-block-start: 1px solid var(--rr42-panel-line);
   font-size: 13px;
   color: var(--rr42-panel-quiet);

   strong { font-weight: 600; color: var(--rr42-panel-ink); }
}

.rr42-connect__foot {
   margin: 0;
   padding-inline: 4px;
   font-size: 13px;
   color: var(--rr42-panel-quiet);
}

/* Heard, not seen. */
.rr42-connect__live {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
   .rr42-account__toggle .rr42-avatar,
   .rr42-account__manage,
   .rr42-account__item,
   .rr42-account__go,
   .rr42-connect__close,
   .rr42-connect__copy,
   .rr42-connect__tab { transition: none; }

   .rr42-account__item:hover .rr42-account__go { transform: none; }
}