/* qc-shell.css — the LOOK of the app shell (the sidebar today; the top bar and
   the account menu join it in later steps).

   The approved design is Administration → UI Kit → Design reference
   (public/kit/design/sidebar.html, 16 Sep 2026). Change it there first.

   WHY A FILE OF ITS OWN
   qc-ui.css is generated from MES-Lite and every rule in it is fenced inside
   `.qc-ui`; MES-Lite has no sidebar to copy and the sidebar is not a kit
   screen. The shell is drawn from SkillApp's design instead, so it lives here,
   and its icons are generated next door (qc-shell-icons.css).

   WHY EVERY RULE STARTS WITH `html`
   index.html styles the sidebar in inline <style> blocks that load AFTER this
   file, so at equal specificity they would win. The extra `html` makes each
   rule here one step more specific than index.html's `nav.sidebar …` rules —
   a deliberate, visible precedence instead of a race on source order. Behaviour
   (position, the slide-in, z-index, width on a phone) stays in index.html.

   COLOURS are tokens only (brand-tokens.css): --chrome-* follow the light/dark
   switch, --brand-* follow the company's Branding, --nav-* / --mod-* are fixed. */

/* ── Panel ─────────────────────────────────────────────────────────────────── */
html nav.sidebar {
  border-right: 1px solid var(--chrome-border);
}
html nav.sidebar .sidebar-logo {
  border-bottom: 1px solid var(--chrome-border);
}
html nav.sidebar .sidebar-content {
  padding: 8px 8px 40px;
}
html nav.sidebar .sidebar-section {
  border-bottom: 1px solid var(--chrome-border);
  margin-bottom: 8px;
  padding-bottom: 8px;
}
html nav.sidebar .sidebar-section + .sidebar-section {
  margin-top: 8px;
}

/* ── A row ─────────────────────────────────────────────────────────────────── */
html nav.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  /* A FLOOR, never a fixed height: at 200% zoom or a large browser font the
     row grows with its text instead of clipping it. 44px is WCAG 2.5.5. */
  min-height: 2.75rem;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  position: relative;
  color: var(--chrome-text);
  background-color: transparent;
  text-decoration: none;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
}
html nav.sidebar a:hover {
  background-color: var(--chrome-hover);
  color: var(--chrome-text);
}
html nav.sidebar a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
/* The selected screen: a tint of the Branding colour and a bar on the left, as
   SkillApp does. It replaces a solid green fill with a ▶ drawn over the end of
   the label — bold text plus the arrow did not fit, so long names were cut. The
   bar is an inset shadow, not a border, so the row does not move sideways. */
html nav.sidebar a.active,
html nav.sidebar a#navHome.active {
  background-color: var(--chrome-nav-on-bg);
  color: var(--chrome-nav-on-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

/* CLICKS MUST STILL LAND ON THE LINK. Existing code tests the click target
   itself — e.g. the "Entered By" auto-fill runs `e.target.matches('nav.sidebar a')`
   (index.html, AUTO-FILL). Without this, a click on the icon or the label would
   target the span and that code would silently stop running. With it, the
   target is the <a> exactly as it was before the icons existed. */
html nav.sidebar a > .nav-icon,
html nav.sidebar a > .nav-label,
html nav.sidebar .section-title > .nav-modicon {
  pointer-events: none;
}

html nav.sidebar .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Screen icon: a tinted tile, the glyph in the colour of what it does ──── */
html nav.sidebar .nav-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--fc, var(--nav-setup)) calc(100% - var(--chrome-tile-lift)), #fff);
  background-color: color-mix(in srgb, var(--fc, var(--nav-setup)) var(--chrome-tile-wash), transparent);
}
html nav.sidebar .nav-icon::before {
  content: "";
  position: absolute;
  inset: 5.5px;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}

/* ── Module heading: the module's app icon beside its name ────────────────── */
html nav.sidebar .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
  padding: 8px 10px 4px;
  border-bottom: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-text-muted);
}
/* The module name is the SAME colour as its app icon, in both themes — as in
   the approved design (user, 16 Sep 2026). */
html nav.sidebar .section-title[data-module] {
  color: var(--mc);
}
html nav.sidebar .nav-modicon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--mc) 72%, #fff) 0%,
    var(--mc) 55%,
    color-mix(in srgb, var(--mc) 82%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
html nav.sidebar .nav-modicon::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: #fff;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}

/* The "Admin" divider inside a module list lines up with the row text. */
html nav.sidebar li.sidebar-subhead {
  margin: 10px 0 2px;
  padding: 10px 10px 4px;
}

@media (prefers-reduced-motion: reduce) {
  html nav.sidebar a { transition: none; }
}

/* Windows high-contrast: backgrounds are replaced, so the selected row and the
   icons must not rely on them. */
@media (forced-colors: active) {
  html nav.sidebar a.active { outline: 2px solid Highlight; outline-offset: -2px; }
  html nav.sidebar .nav-icon::before,
  html nav.sidebar .nav-modicon::before { background-color: CanvasText; }
}

/* ══ SHAPES ═══════════════════════════════════════════════════════════════════
   qc-shell.js puts data-nav on <html> from the screen width, and --qc-nav-w
   (0 / 64 / 256). "drawer" (phones) has NO rules here: it is today's behaviour.

   The page is moved aside with PADDING on its container, not a margin on
   <main>: index.html has `main { margin-left: 0 !important }` for tablets, and
   a padding is not something that rule can undo. */
html[data-nav="panel"] .container,
html[data-nav="rail"] .container {
  padding-left: var(--qc-nav-w);
}
html[data-nav="panel"] header,
html[data-nav="rail"] header {
  left: var(--qc-nav-w);
}
/* The menu button and its dimmed backdrop belong to the phone shape only. */
html[data-nav="panel"] header .mobile-menu-btn,
html[data-nav="rail"] header .mobile-menu-btn,
html[data-nav="panel"] .sidebar-overlay,
html[data-nav="rail"] .sidebar-overlay {
  display: none !important;
}
#qcNavToggle { display: none; }
html[data-nav="panel"] #qcNavToggle,
html[data-nav="rail"] #qcNavToggle {
  display: inline-flex;
}

/* Bars fixed to the page's left edge move with it, or they would sit under the
   sidebar. Position only — nothing else about them changes.
   NOT the checklist Cancel/Submit bar any more (21 Sep 2026): it is sticky, in
   the page, which already starts after the sidebar — this offset pushed it a
   second sidebar-width to the right, Submit off the screen. */
html[data-nav="panel"] body.vm-touch-nav #vmTabBar,
html[data-nav="rail"] body.vm-touch-nav #vmTabBar {
  left: var(--qc-nav-w);
}

/* ── panel: always open ───────────────────────────────────────────────────── */
html[data-nav="panel"] nav.sidebar {
  transform: none;
  box-shadow: none;
  /* BELOW every popup. On a phone the sidebar only exists while the page is
     dimmed, so it could sit on top; here it is always visible, and a Fleet
     dialog (z-index 500–1001) must still cover it so nobody navigates away
     from an open dialog. Page content is z-index 1. */
  z-index: 90;
}
html[data-nav="panel"] nav.sidebar .sidebar-logo {
  box-sizing: border-box;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-nav="panel"] nav.sidebar .sidebar-logo-img {
  height: auto;
  max-height: 38px;
  max-width: 100%;
}

/* ── rail: the module strip, with the screens list opening beside it ─────── */
.qc-rail { display: none; }
html[data-nav="rail"] .qc-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 64px;
  z-index: 10002;               /* above the screens list, which slides out from under it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 16px;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  background-color: var(--chrome-bg-2);
  border-right: 1px solid var(--chrome-border);
}
html[data-nav="rail"] .qc-rail::-webkit-scrollbar { width: 0; }
.qc-rail-logo {
  flex: none;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qc-rail-logo img { width: 30px; height: 30px; object-fit: contain; }
.qc-rail-sep {
  flex: none;
  width: 28px;
  height: 1px;
  margin: 4px 0;
  background-color: var(--chrome-border);
}
.qc-rail-app {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.qc-rail-app:hover { background-color: var(--chrome-hover); }
.qc-rail-app:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.qc-rail-app[aria-expanded="true"] { background-color: var(--chrome-hover); }
.qc-rail-app > * { pointer-events: none; }
/* iPhone-style app icon: filled squircle, soft gradient, white line glyph. */
.qc-app {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--mc) 72%, #fff) 0%,
    var(--mc) 55%,
    color-mix(in srgb, var(--mc) 82%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18);
}
.qc-app::before {
  content: "";
  position: absolute;
  inset: 8.5px;
  background-color: #fff;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
/* The current module (or Home): a ring in its own colour. */
.qc-rail-app.is-on .qc-app {
  box-shadow: 0 0 0 2px var(--chrome-bg-2), 0 0 0 4px var(--mc);
}
/* "Opens in a new tab" mark on an external app. */
.qc-rail-ext {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--chrome-bg-2);
}
.qc-rail-ext::before {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: var(--chrome-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qc-rail-tip {
  position: fixed;
  z-index: 10070;
  transform: translateY(-50%);
  padding: 5px 9px;
  border-radius: 6px;
  background-color: var(--chrome-text);
  color: var(--chrome-bg);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* The screens list opens beside the strip, not over it. It is the same sidebar
   element with the same links; only where it sits changes. */
html[data-nav="rail"] nav.sidebar {
  left: 64px;
  width: 256px;
  max-width: none;
}
html[data-nav="rail"] nav.sidebar.open {
  box-shadow: 12px 0 28px -16px rgba(0, 0, 0, 0.35);
}
html[data-nav="rail"] nav.sidebar .sidebar-logo {
  display: none;              /* the strip already shows the logo */
}
@media (prefers-reduced-motion: reduce) {
  html[data-nav="rail"] nav.sidebar { transition: none; }
}
@media (forced-colors: active) {
  .qc-app::before, .qc-rail-ext::before { background-color: CanvasText; }
  .qc-rail-app.is-on { outline: 2px solid Highlight; }
}

/* While the app decides which module's links to show (qc-shell.js adds the
   class for well under a second), the list is hidden but keeps its space, so
   nothing moves and nothing blinks. Only where the sidebar is on screen. */
html.qc-nav-pending[data-nav="panel"] nav.sidebar .sidebar-content {
  visibility: hidden;
}

/* ── Home: the module cards carry the same app icon as the sidebar and strip ── */
html #launcherSection .lc-card-icon {
  background: none;
}
html #launcherSection .lc-card-icon .qc-app {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
html #launcherSection .lc-card-icon .qc-app::before { inset: 25%; }
html #launcherSection .lc-card:hover .lc-card-icon { background: none; }

/* On a phone and an iPad, Home is an Apple-style app grid: the icon, the name,
   nothing else. (index.html already drops the card chrome under 560px; this
   extends the same treatment to the iPad and squares the icon off.) */
@media (max-width: 1279px) {
  html #launcherSection .lc-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 8px; }
  html #launcherSection .lc-card {
    flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 0; background: none; border: 0; box-shadow: none;
    border-radius: 0; overflow: visible; min-width: 0;
  }
  html #launcherSection .lc-card:hover { transform: none; box-shadow: none; }
  html #launcherSection .lc-card-icon { width: 62px; height: 62px; }
  html #launcherSection .lc-card-icon .qc-app { border-radius: 14px; }
  html #launcherSection .lc-card:active .lc-card-icon { transform: scale(.94); }
  html #launcherSection .lc-card-body { flex: 0 1 auto; align-items: center; width: 100%; gap: 0; }
  html #launcherSection .lc-card-name {
    white-space: normal; text-overflow: clip; overflow: hidden;
    font-size: .75rem !important; line-height: 1.3 !important; margin: 0 !important;
    font-weight: 500; letter-spacing: 0; width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  html #launcherSection .lc-card-desc, html #launcherSection .lc-card-cta { display: none; }
  html #launcherSection .lc-card-glow, html #launcherSection .lc-card-line { display: none; }
}

/* ══ ACCOUNT MENU ═════════════════════════════════════════════════════════════
   The avatar menu, from the approved design: one small header, where-you-are,
   two short groups, and a row of round buttons instead of three full-width
   ones. The panel box itself (position, width, shadow, .show) stays in
   index.html; this is its inside. */
html .user-dropdown .acct-head {
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, var(--brand-a12), transparent);
  border-bottom: 1px solid var(--chrome-border);
}
html .user-dropdown .dropdown-avatar {
  position: relative;
  overflow: visible;
  cursor: pointer;
  margin-bottom: 2px;
}
html .user-dropdown .dropdown-avatar img { border-radius: 50%; }
html .user-dropdown .avatar-edit-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--chrome-panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  display: grid;
  place-items: center;
}
html .user-dropdown .avatar-edit-badge::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: var(--chrome-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z'/%3E%3Cpath d='M15 13a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z'/%3E%3Cpath d='M15 13a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html .user-dropdown .acct-chip {
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--brand-a20);
  color: var(--chrome-nav-on-text);
  font-size: .6875rem;
  font-weight: 600;
}
html .user-dropdown .acct-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
html .user-dropdown .acct-where {
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  overflow: hidden;
}
html .user-dropdown .acct-wrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
}
html .user-dropdown .acct-wrow + .acct-wrow { border-top: 1px solid var(--chrome-border); }
html .user-dropdown .acct-wtxt { min-width: 0; flex: 1; }
html .user-dropdown .acct-wtxt small { display: block; font-size: .6875rem; color: var(--chrome-text-muted); }
html .user-dropdown .acct-wtxt b {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--chrome-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .user-dropdown .acct-glabel {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chrome-text-muted);
  padding: 2px 4px 4px;
}
html .user-dropdown .acct-kv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: .8125rem;
  color: var(--chrome-text);
}
html .user-dropdown .acct-kv .nav-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: color-mix(in srgb, var(--fc, var(--nav-setup)) calc(100% - var(--chrome-tile-lift)), #fff);
  background-color: color-mix(in srgb, var(--fc, var(--nav-setup)) var(--chrome-tile-wash), transparent);
}
html .user-dropdown .acct-kv .nav-icon::before,
html .user-dropdown .acct-wrow .nav-icon::before,
html .user-dropdown .acct-fbtn .nav-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
html .user-dropdown .acct-wrow .nav-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--fc, var(--nav-setup)) calc(100% - var(--chrome-tile-lift)), #fff);
  background-color: color-mix(in srgb, var(--fc, var(--nav-setup)) var(--chrome-tile-wash), transparent);
}
html .user-dropdown .acct-k { color: var(--chrome-text-muted); }
html .user-dropdown .acct-v {
  margin-left: auto;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .user-dropdown .acct-v a { color: var(--brand); text-decoration: none; }
/* A row with nothing in it is hidden by qc-shell.js, not left saying "-". */
html .user-dropdown .acct-kv[hidden] { display: none; }

html .user-dropdown .acct-foot {
  border-top: 1px solid var(--chrome-border);
  padding: 10px 6px 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
}
html .user-dropdown .acct-fbtn {
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px;
  border-radius: 10px;
  font: inherit;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--chrome-text);
}
html .user-dropdown .acct-fbtn .c {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fc);
  background-color: color-mix(in srgb, var(--fc) 13%, transparent);
  transition: background-color .15s ease;
}
html .user-dropdown .acct-fbtn:hover .c { background-color: color-mix(in srgb, var(--fc) 24%, transparent); }
html .user-dropdown .acct-fbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html .user-dropdown .acct-fbtn .nav-icon {
  position: relative;
  width: 19px;
  height: 19px;
  background: none;
  color: inherit;
}

/* The light/dark switch lives in this menu now (as SkillApp), so the header
   keeps only Back, notifications and refresh. */
html header #qcThemeBtn { display: none !important; }

/* The panel is a column: header and buttons pinned, only the middle scrolls.
   index.html makes the whole panel scroll with 20px of padding, which pushed
   the button row out of the bottom (measured: 819px against a 790px panel). */
html .user-dropdown.user-dropdown {
  padding: 0;
  overflow: hidden;
  border-width: 1px;
  border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .08);
}
html .user-dropdown.show { display: flex; flex-direction: column; }
html .user-dropdown .acct-head,
html .user-dropdown .acct-foot { flex: none; }
html .user-dropdown .acct-body { flex: 1 1 auto; min-height: 0; }
/* The button labels are white in index.html's panel rules (it was a dark-only
   panel); they must read on the light one too. */
html .user-dropdown .acct-fbtn { color: var(--chrome-text) !important; }
html .user-dropdown .acct-k { color: var(--chrome-text-muted) !important; }
html .user-dropdown .acct-v,
html .user-dropdown .acct-wtxt b { color: var(--chrome-text) !important; }
html .user-dropdown .acct-wtxt small { color: var(--chrome-text-muted) !important; }
/* The body is a flex column, so its children must not be allowed to shrink —
   measured: the Company/Plant box was squashed 95px into 76px and clipped the
   Plant row. */
html .user-dropdown .acct-body > * { flex: none; }
/* A company with branding on but no square mark shows its initials on the strip
   — better than a wide logo squashed into 34px. */
.qc-rail-initials {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background-color: var(--brand);
  color: var(--brand-contrast);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── What is waiting for you ──────────────────────────────────────────────── */
.qc-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--danger-dark);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--chrome-bg-2);
  pointer-events: none;
}
#launcherSection .lc-card-icon .qc-count { box-shadow: 0 0 0 2px #fff; }
html nav.sidebar a .qc-pill {
  margin-left: auto;
  flex: none;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background-color: var(--danger-dark);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (forced-colors: active) {
  .qc-count, html nav.sidebar a .qc-pill { border: 1px solid CanvasText; }
}

/* ══ Matching the approved design (review of 16 Sep 2026) ═══════════════════ */

/* The avatar carries a thin ring in the Branding colour, as in the design. */
html header .avatar-circle {
  box-shadow: 0 0 0 2px var(--chrome-bg), 0 0 0 3.5px var(--brand);
}

/* The round buttons in the account menu: the glyph fills its box. The shared
   tile rule insets it by 5px, which left a 9px speck inside a 40px circle. */
html .user-dropdown .acct-fbtn .nav-icon {
  width: 20px;
  height: 20px;
}
html .user-dropdown .acct-fbtn .nav-icon::before {
  inset: 0;
}

/* Home on a laptop: THREE cards across, as in the design, with room for the
   description. (index.html's own grid is four across above 1280px.) */
@media (min-width: 1280px) {
  html #launcherSection .lc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── iPad flyout: only the module's screens, under a header ──────────────────
   In the design, tapping a strip icon opens that module's list with the
   module's app icon, its name and a close button on top — no Home or Overview
   rows (Home is the house on the strip) and no second module heading. */
.qc-fly-head { display: none; }
html[data-nav="rail"] nav.sidebar .qc-fly-head {
  flex: none;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--chrome-border);
}
.qc-fly-head .qc-app { width: 26px; height: 26px; border-radius: 7px; }
.qc-fly-head .qc-app::before { inset: 6px; }
.qc-fly-head strong {
  flex: 1;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--mc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qc-fly-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--chrome-border);
  background: transparent;
  color: var(--chrome-text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.qc-fly-close:hover { background-color: var(--chrome-hover); }
.qc-fly-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.qc-fly-close svg { width: 18px; height: 18px; }
html[data-nav="rail"] nav.sidebar #sidebarNavHome { display: none !important; }
html[data-nav="rail"] nav.sidebar .section-title[data-module] { display: none; }
html[data-nav="rail"] nav.sidebar .sidebar-section { border-bottom: 0; }

/* The close button beside the iPad list's title. index.html forces a colour,
   background, padding and size on EVERY <button> with !important, so without
   these the X was drawn white-on-white (user, 16 Sep 2026). Colour and
   background always travel as a pair here (docs/issue_learning.md §2). */
html nav.sidebar .qc-fly-head .qc-fly-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--chrome-border) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--chrome-text) !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}
html nav.sidebar .qc-fly-head .qc-fly-close:hover {
  background: var(--chrome-hover) !important;
  color: var(--chrome-text) !important;
}
html nav.sidebar .qc-fly-head .qc-fly-close svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ── Home hero, as the approved design ─────────────────────────────────────
   A small "COMPANY · PLANT" line, then "Good evening, Ashish" — greeting bold,
   first name light — in the app's own face, not the large serif. */
html #launcherSection .lc-hero { margin: 0 0 24px; }
html #launcherSection .lc-pip { display: none; }
html #launcherSection .lc-eyebrow {
  margin: 0 0 6px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
html #launcherSection .lc-name {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  color: #1d1d1f;
}
html #launcherSection .lc-name .lc-last {
  font-style: normal;
  font-weight: 400;
  color: #6e6e73;
}
html #launcherSection .lc-sub[hidden] { display: none; }
/* The card arrow is the design's double chevron in a tinted circle. */
html #launcherSection .lc-arrow { opacity: 1; }
html #launcherSection .lc-arrow svg { width: 14px; height: 14px; }

/* The uploaded photo fills its circle and is clipped BY THE IMAGE, because the
   avatar box stays overflow:visible for the camera badge that hangs off its
   corner. Rebuilding the menu dropped the photo's sizing, so it rendered at its
   natural size and spilled out of the card (user, 16 Sep 2026). */
html .user-dropdown .dropdown-avatar > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}