/* AuCRA INSIGHT chrome layer: tokens, header, drawers, assistant, responsive
   shell. Content styling lives beside it in content.css; layout.py links both. */

:root {
  /* Two families, three styles (platform polish plan D1): headers Light in
     the head face, text Normal and emphasis Bold in the text face. No
     monospace, no serif; 500 and 700 are not loaded. Tracking is a little
     open everywhere but the headers. Swapping a family is this line. */
  --font-text: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-head: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --weight-light: 300;
  --weight-text: 400;
  --weight-bold: 600;
  --tracking: 0.012em;
  --tracking-caps: 0.06em;
  /* Spacing steps (#259): 4, 8, 12, 16, 24 and 32 px, for the rules that set space. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --ink: #1c2126;
  --ink-soft: #2b333c;
  --mist: #eef1f4;
  /* The page's ground (#258): flat, the one cool grey under the white chrome.
     --muted reads 4.68:1 on it, --gold-deep 5.27:1, --warn 4.59:1 and
     --line-control 3.04:1; a white panel only 1.09:1, so the panels keep
     their edge and shadow. --mist stays the fills' grey. Every colour token
     here has its dark value in `brand_dark.css` (#262). */
  --page: #f3f5f7;
  --panel: #ffffff;
  --line: #d8dee4;
  --text: #232a31;
  --muted: #656f7a;
  --gold: #f9bf3d;
  --gold-deep: #7c630f;
  --gold-wash: #fdf3d6;
  /* The clause head's output card: a paler wash than the tags', ruled in the
     gold. --muted reads 4.90:1 on it and --gold-deep 5.52:1. */
  --output-wash: #fefaee;
  --output-line: #f2e2b3;
  /* One green for the PASS chip's ink and the level 0 risk ink, which sit on
     the same wash (--pass-wash, #e3f2e8): #2d7649 reads 4.77:1 there and
     5.53:1 on the panel, where the two greens it replaced read 4.35:1 and
     4.51:1. White on it as a background reads 5.53:1. */
  --pass: #2d7649;
  --pass-wash: #e3f2e8;
  --warn: #b45309;
  --warn-wash: #fdf1e3;
  /* A gap line, the field a row still needs (platform polish plan D4): a
     red that reads 5.9:1 on the panel and 5.2:1 on the page. */
  --gap: #b3261e;
  --gap-wash: #fbeae8;
  --wash-head: #f8fafb;
  --wash-band: #fbfcfd;
  --line-strong: #b9c2cb;
  /* Text and marks on --ink, --ink-soft, --pass and --gold-deep (#262). */
  --on-ink: #ffffff;
  /* The shadows' colour as channels, so each rule keeps its own alpha. */
  --shade: 28 33 38;
  /* A hovered row and step: a faint gold over the panel. */
  --gold-tint: #fdf8ec;
  /* A not started dot and segment, a not applicable segment. */
  --idle: #c3cbd3;
  --idle-soft: #e2e7ec;
  /* The charts' one series (`kit/chart.py` reads these values). */
  --series: #2a78d6;
  --series-hover: #256abf;
  /* The assistant tab's sparkle, its gradient's warm end. */
  --spark-end: #f08a24;
  /* The risk levels without a token of their own (`content_scheme.css`):
     level 0 is the pass pair, 2 the gold pair, 3 the warn pair, 4 the gap. */
  --risk-1-wash: #eaf3d9;
  --risk-1-ink: #467019;
  --risk-4-wash: #fbe4e1;
  --risk-5-wash: #f3d9d9;
  --risk-5-ink: #7f1d1d;
  /* Placeholder text: 4.69:1 on the panel every box is drawn on (was 2.50). */
  --placeholder: #6b7580;
  /* The focus ring: the gold text colour, 5.76:1 on the panel and 5.08:1 on
     the page. The header and the left drawer set it to --chrome-gold. */
  --focus-ring: var(--gold-deep);
  /* The resting edge of a control (#188): a field, a select, the rich text
     box, a choice card, the verdict pair. 3.32:1 on the panel and 3.26:1 on
     the soft panel over the page, the 3:1 a control's boundary needs. */
  --line-control: #858e98;
  /* The tick inside the mark of a chosen option (`kit.css`, the choice
     controls): white on --gold-deep, 5.76:1. A background, so a screen reader
     hears only the control's own aria-pressed. */
  --choice-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.3l2.3 2.3 4.6-4.9' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* The native select's arrow_drop_down in --muted, which a data URI cannot read (#143). */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23656f7a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  /* The shell's chrome, the header and the rail (#257): the panel's colour
     in both themes. Ratios read on the chrome, a hovered row (--chrome-soft)
     and the open row (--chrome-active): --chrome-strong 16.2, 14.3, 14.7;
     --rail-text 14.5, 12.8, 13.1; --rail-muted, ids, captions and icons,
     5.11, 4.51, 4.62; --chrome-gold, the open row's id, icon and bar, the
     pending save and the ring, 5.76, 5.08, 5.20; --chrome-warn 5.02.
     `tests/test_dark_theme.py` holds the dark ones. */
  --chrome: var(--panel);
  --chrome-soft: var(--mist);
  --chrome-active: var(--gold-wash);
  --chrome-strong: var(--ink);
  --chrome-ink: var(--text);
  --rail-text: var(--text);
  --rail-muted: var(--muted);
  --chrome-gold: var(--gold-deep);
  --chrome-warn: var(--warn);
  /* A header button's hover, the separators, the pinned foot's rule, the
     header's foot, the rail's edge and its scrollbar. */
  --chrome-wash: var(--mist);
  --chrome-line: var(--line);
  --chrome-rule: var(--line);
  --chrome-edge: var(--line);
  --rail-edge: var(--line);
  --rail-thumb: var(--line-strong);
  /* The search box: its edge 3.32:1, its hint 4.69:1 at rest and focused,
     4.56:1 hovered. */
  --search-fill: var(--panel);
  --search-hover: var(--wash-band);
  --search-focus: var(--panel);
  --search-edge: var(--line-control);
  --search-hint: var(--placeholder);
  /* The softer look (`pages_soft.css`): rounder corners, an opaque white
     panel (#258: the flat ground has nothing to show through), a lighter
     line and a low shadow. */
  --soft-radius: 16px;
  --soft-radius-inner: 10px;
  --soft-line: color-mix(in srgb, var(--line-strong) 55%, transparent);
  --soft-panel: var(--panel);
  --soft-shadow: 0 1px 2px rgb(var(--shade) / 0.04), 0 12px 28px -20px rgb(var(--shade) / 0.28);
  /* What floats over the page: a menu, a popover, the preview and info cards, a toast. */
  --soft-float-shadow: 0 12px 32px -12px rgb(var(--shade) / 0.35);
  /* One pace for every transition and animation. Quick for hover, press and
     small fades; base for cards, menus, tooltips and folds; slow for the
     drawers, the tool panels and the rail. Things appearing ease out, things
     moving or changing shape ease in and out. Loops keep their own speed. */
  --motion-quick: 200ms;
  --motion-base: 280ms;
  --motion-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* The page's ground, flat (#258): the gold washes it carried under the dark
   chrome took --muted to 4.29:1 at the top right. */
body {
  background: var(--page);
  font-family: var(--font-text);
  font-weight: var(--weight-text);
  letter-spacing: var(--tracking);
  color: var(--text);
}

/* Ids, counts, dates and file names: the text face with lining, equal width
   figures, so a column of numbers still lines up without a monospace. */
.aucra-mono {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}
/* A header: the head face, Light, no tracking. The page title, a region's
   name and a panel's title all take it (content.css sizes them). */
.aucra-head {
  font-family: var(--font-head);
  font-weight: var(--weight-light);
  letter-spacing: 0;
}

/* ---- header ---- */

.aucra-header {
  background: var(--chrome);
  /* Quasar's marginal section would draw the header's words white. */
  color: var(--chrome-strong);
  --focus-ring: var(--chrome-gold);
  /* 56px total: the border is part of the box, not added to it. */
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  flex-wrap: nowrap;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--chrome-edge);
}

.aucra-menu-btn.q-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--chrome-strong);
}

/* Undo, Redo, Save and Export (`ui/undo_bar.py`): icons on the ink, dimmed
   while there is nothing to undo or redo but still focusable, since each
   answers in a sentence. The full header needs 920px with them: below 1024px
   Save and Export give way and the account shows its avatar alone, and below
   480px the wordmark gives way to the logo. */
.aucra-undo-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.aucra-undo-btn.q-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--chrome-ink);
}
.aucra-undo-btn.q-btn:hover {
  background: var(--chrome-wash);
}
/* The platform's ring, not Quasar's pale helper (as on the menu buttons). */
.aucra-undo-btn.q-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.aucra-undo-btn .q-focus-helper {
  display: none;
}
.aucra-undo-btn.aucra-undo-none {
  color: var(--rail-muted);
}
.aucra-undo-btn.q-btn.disabled {
  opacity: 0.35 !important;
}
.aucra-undo-sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--chrome-line);
}
@media (max-width: 1023px) {
  .aucra-undo-sep,
  .aucra-undo-file,
  .aucra-user-name,
  .aucra-user-caret {
    display: none;
  }
  button.aucra-user {
    gap: 0;
    padding: 4px;
  }
}
@media (max-width: 479px) {
  .aucra-header > :has(> .aucra-wordmark) {
    display: none;
  }
  .aucra-header > .q-img,
  .aucra-header > button.aucra-user {
    flex-shrink: 0;
  }
}
/* Share keeps its word on one line beside its icon, and under 1024px draws
   the icon alone, its accessible name the word (share_button.py). Quasar's
   content row wraps by default. Its important `.block` display is layered,
   so the hide belongs to the earlier `base` layer. */
.aucra-share-slot {
  align-items: center;
  flex-shrink: 0;
}
.q-btn.aucra-share-btn .q-btn__content {
  flex-wrap: nowrap;
  white-space: nowrap;
}
@layer base {
  @media (max-width: 1023px) {
    .q-btn.aucra-share-btn .q-btn__content > .block {
      display: none !important;
    }
  }
}
@media (max-width: 1023px) {
  .q-btn.aucra-share-btn .q-icon.on-left {
    margin-right: 0;
  }
}
@media (max-width: 389px) {
  .aucra-header.q-header {
    gap: 3px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .aucra-header .q-btn.aucra-share-btn {
    padding: 0 2px;
    min-width: 24px;
  }
  .aucra-share-btn .q-icon.on-right {
    margin-left: 0;
  }
}
/* A bare page drawn for a reader who is signed in (the recovery codes after
   the forced setup, AA9): the shell stays built for the pages after it, but
   none of it shows and the page takes the whole window, as before sign in. */
.q-layout:has(.aucra-content.aucra-bare) .q-header,
.q-layout:has(.aucra-content.aucra-bare) .q-drawer-container {
  display: none;
}
.q-layout:has(.aucra-content.aucra-bare) .q-page-container {
  padding: 0 !important;
}

.aucra-wordmark {
  letter-spacing: 0.16em;
  font-size: 1rem;
  white-space: nowrap;
}
.aucra-wordmark b {
  font-weight: var(--weight-bold);
  color: var(--chrome-strong);
}
.aucra-wordmark span {
  font-weight: 300;
  color: var(--chrome-gold);
}

/* The search gives way first when the bar is tight, down to a box that
   still reads, so the account's name keeps more of itself. */
.aucra-search {
  width: 250px;
  flex: 0 1 250px;
  min-width: 140px;
}
.aucra-search .q-field__control {
  height: 36px;
  min-height: 36px;
  background: var(--search-fill);
  /* An edge keeps the box in sight on a white bar, and in the slate where
     the scrolled header over a white page blends to about its fill. */
  box-shadow: inset 0 0 0 1px var(--search-edge);
  border-radius: 8px;
  padding: 0 12px;
  transition: background var(--motion-quick) var(--ease-out), outline-color var(--motion-quick) var(--ease-out);
  outline: 2px solid transparent;
  outline-offset: 0;
}
.aucra-search .q-field__control:hover {
  background: var(--search-hover);
}
/* `q-field--focused` lands on the field root, which is the element that
   carries `aucra-search`, so the two classes are one element and never a
   descendant pair. The ring is the platform's: 2px gold at 2px offset. */
.aucra-search.q-field--focused .q-field__control,
.aucra-search .q-field__native:focus-visible {
  background: var(--search-focus);
  outline-color: var(--focus-ring);
  outline-offset: 2px;
}
.aucra-search .q-field__native {
  color: var(--chrome-ink);
}
.aucra-search .q-field__native::placeholder {
  /* The field is opaque, so the scrolled header's glass never reaches it. */
  color: var(--search-hint);
}
.aucra-search .q-icon {
  color: var(--rail-muted);
}

.aucra-status {
  color: var(--rail-muted);
  font-size: 22px;
  cursor: default;
  transition: color var(--motion-quick) var(--ease-out);
}
.aucra-status-pending {
  color: var(--chrome-gold);
}

button.aucra-user {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--chrome-ink);
  font-family: inherit;
}
button.aucra-user:hover {
  background: var(--chrome-wash);
}
.aucra-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-weight: var(--weight-bold);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* One line, cut with an ellipsis: the whole name is in the menu. */
.aucra-user-name {
  font-size: 0.9rem;
  min-width: 0;
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aucra-user-avatar,
.aucra-user-caret {
  flex-shrink: 0;
}
.aucra-user-caret {
  color: var(--rail-muted);
  font-size: 18px;
}

/* ---- left drawer (navigation rail) ---- */

aside.q-drawer--left {
  background: var(--chrome);
  /* An edge that takes no width, so the slate's transparent one moves nothing. */
  box-shadow: inset -1px 0 0 var(--rail-edge);
  --focus-ring: var(--chrome-gold);
  padding: 0;
  overflow-x: hidden;
  transition: width var(--motion-slow) var(--ease-in-out) !important;
}
.q-page-container {
  transition: padding var(--motion-slow) var(--ease-in-out) !important;
}
.q-drawer__content {
  display: flex;
  flex-direction: column;
  /* NiceGUI's nicegui-drawer default padding/gap live on this node, not the
     aside; they shrink the collapsed rail items below the icon width. Insets
     come from the items' own margins instead. */
  padding: 0;
  gap: 0;
  /* Faded-out labels keep their box; without this the collapsed rail grows a
     horizontal scrollbar and can be swiped blank. */
  overflow-x: hidden;
}

/* The list scrolls inside the rail; rows keep their natural height rather than
   being squeezed by the column when the standard is taller than the viewport. */
.aucra-nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rail-thumb) var(--chrome);
}

a.aucra-nav {
  /* Holds the active row's mark (below). */
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 14px;
  height: 36px;
  margin: 2px 10px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--rail-text);
  text-decoration-line: none;
  white-space: nowrap;
  transition: background var(--motion-quick) var(--ease-out), color var(--motion-quick) var(--ease-out),
    padding var(--motion-slow) var(--ease-in-out), gap var(--motion-slow) var(--ease-in-out);
}
a.aucra-nav:hover {
  background: var(--chrome-soft);
  color: var(--chrome-strong);
  opacity: 1;
}
.aucra-nav .q-icon {
  font-size: 22px;
  flex: 0 0 24px;
}
a.aucra-nav-active {
  background: var(--chrome-active);
  color: var(--chrome-strong);
}
/* The active row's gold mark: a short bar with round ends at the row's left
   edge, like a section head's marker. An inset shadow followed the row's 8px
   corners into a bracket. --chrome-gold on the open row reads 5.20:1
   (slate 4.69:1). */
a.aucra-nav-active::before,
.aucra-clause-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--chrome-gold);
}
.aucra-nav-active .q-icon {
  color: var(--chrome-gold);
}
/* Collapsed: drop the padding and gap so the icon centers instead of being
   pushed against the clipped right edge of the rail. */
.aucra-collapsed a.aucra-nav {
  padding: 0;
  gap: 0;
  justify-content: center;
}

/* Labels fade out slightly before the rail finishes narrowing, and fade back
   in only after it has widened enough to hold them. max-width must reach 0 in
   the collapsed state: an invisible label that keeps its box makes the rail a
   scrollable container that focus jumps (keyboard/AT) can swipe blank. */
.nav-label {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  transition: opacity var(--motion-base) var(--ease-out) calc(var(--motion-slow) - var(--motion-base)), max-width var(--motion-slow) var(--ease-in-out);
}
.aucra-collapsed .nav-label {
  opacity: 0;
  max-width: 0;
  transition: opacity var(--motion-quick) var(--ease-out), max-width var(--motion-slow) var(--ease-in-out);
}

/* Clause rows, captions and the foot leave the rail by fading with the labels
   rather than vanishing on frame 0; max-height then takes their space back. */
.aucra-collapsible {
  opacity: 1;
  max-height: 40px;
  transition: opacity var(--motion-base) var(--ease-out) calc(var(--motion-slow) - var(--motion-base)), max-height var(--motion-slow) var(--ease-in-out);
}
/* A caption at 12px takes three lines where its words are long: "Clause 7 ·
   Cybersecurity activities" is 264px against a 180px name (#259). */
.aucra-caption.aucra-collapsible {
  max-height: 56px;
}
.aucra-collapsed .aucra-collapsible {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--motion-quick) var(--ease-out), max-height var(--motion-slow) var(--ease-in-out);
}

/* The pinned row under the list. The list above it ends wherever the viewport
   cuts it, so this rule keeps a half-clipped clause row off it; the foot then
   needs no second line of its own. */
.aucra-nav-pinned {
  flex: 0 0 auto;
  margin: 0 10px 12px;
  padding-top: 6px;
  border-top: 1px solid var(--chrome-rule);
}
.aucra-nav-pinned a.aucra-nav {
  margin-left: 0;
  margin-right: 0;
}
/* The Accounts group of the pinned foot (accounts area plan Q7): a head
   that is not a link, and its rows indented under it. Folded, the head
   goes (`aucra-collapsible`) and the rows centre their icons as every row. */
.aucra-nav-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 32px;
  padding: 0 14px;
  color: var(--rail-muted);
  font-size: 0.92rem;
  white-space: nowrap;
}
.aucra-nav-group-head .q-icon {
  font-size: 22px;
  flex: 0 0 24px;
}
.aucra-nav-group a.aucra-nav {
  padding-left: 28px;
}
.aucra-nav-group a.aucra-nav .q-icon {
  font-size: 20px;
}
.aucra-collapsed .aucra-nav-group a.aucra-nav {
  padding-left: 0;
}


/* ---- sidebar: clause navigation ---- */

.aucra-caption {
  flex: 0 0 auto;
  box-sizing: content-box;
  margin: 12px 10px 3px;
  padding: 0 14px;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  min-height: 16px;
  line-height: 1.45;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail-muted);
  /* Wraps onto a second line: "Clause 7 · Cybersecurity activities" does not
     fit the rail at this tracking, and a truncated caption misleads. */
  white-space: normal;
}

.aucra-clause {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 10px;
  height: 30px;
  margin: 1px 10px;
  padding: 0 12px 0 14px;
  border-radius: 8px;
  color: var(--rail-text);
  font-size: 0.83rem;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background var(--motion-quick) var(--ease-out), color var(--motion-quick) var(--ease-out);
}
a.aucra-clause:hover {
  background: var(--chrome-soft);
  color: var(--chrome-strong);
  opacity: 1;
}
.aucra-clause-deep {
  margin-left: 36px;
}
.aucra-clause-id {
  flex: 0 0 38px;
  font-size: 0.75rem;
  color: var(--rail-muted);
}
.aucra-clause-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aucra-clause-active {
  background: var(--chrome-active);
  color: var(--chrome-strong);
}
.aucra-clause-active .aucra-clause-id {
  color: var(--chrome-gold);
}
.aucra-clause-heading {
  height: 26px;
  color: var(--rail-muted);
  cursor: default;
}
.aucra-clause-ref {
  cursor: pointer;
}
.aucra-clause-ref:hover {
  background: var(--chrome-soft);
  color: var(--chrome-strong);
}
/* The open row keeps its fill under the pointer: a hover rule outranks it. */
a.aucra-nav-active:hover,
a.aucra-clause-active:hover,
.aucra-clause-ref.aucra-clause-active:hover {
  background: var(--chrome-active);
}
.aucra-clause-mark {
  font-size: 14px;
  color: var(--rail-muted);
}

/* ---- sidebar: folding groups (sidebar folding plan D2, D4, D5) ----
   The head is a button dressed as the caption or head it replaces. Folded,
   the body takes its height back as `aucra-collapsible` does, over the
   rail's own 0.3 s ease, then goes hidden so its rows leave the tab order.
   The 4 px padding, cancelled by the margin, keeps a row's focus ring
   inside the clip. */
.aucra-fold {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
}
.aucra-fold-head {
  display: flex;
  align-items: center;
  font-family: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.aucra-fold-head:hover {
  color: var(--chrome-strong);
}
.aucra-fold-head[aria-disabled="true"] {
  cursor: default;
}
.aucra-fold-head[aria-disabled="true"] .aucra-fold-chevron {
  opacity: 0.35;
}
.aucra-fold-head:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-caption.aucra-fold-head {
  gap: 8px;
}
.aucra-fold-name {
  flex: 1;
  min-width: 0;
}
/* Two classes: `.aucra-dot` (content.css, loaded after) draws it inline. */
.aucra-fold-head .aucra-fold-dot {
  display: none;
  order: 1;
}
.aucra-folded > .aucra-fold-head .aucra-fold-dot {
  display: inline-block;
}
.aucra-fold-chevron {
  order: 2;
  flex: 0 0 auto;
  font-size: 18px;
  transition: transform var(--motion-base) var(--ease-in-out);
}
.aucra-folded > .aucra-fold-head .aucra-fold-chevron {
  transform: rotate(-90deg);
}
/* Settings stays a link; its chevron sits on the row's right end, in line
   with the Accounts head's. */
.aucra-fold-side {
  position: absolute;
  top: 2px;
  right: 0;
  width: 46px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
  color: var(--rail-text);
}
.aucra-fold-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4px;
  margin: -4px;
  overflow: hidden;
  opacity: 1;
  max-height: calc(var(--fold-rows, 12) * 40px + 8px);
  transition: opacity var(--motion-quick) var(--ease-out) calc(var(--motion-base) - var(--motion-quick)), max-height var(--motion-base) var(--ease-out),
    visibility 0s;
}
.aucra-folded > .aucra-fold-body {
  padding: 0;
  margin: 0;
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-quick) var(--ease-out), max-height var(--motion-base) var(--ease-out),
    visibility 0s var(--motion-base);
}
@media (prefers-reduced-motion: reduce) {
  .aucra-fold-body,
  .aucra-folded > .aucra-fold-body,
  .aucra-fold-chevron {
    transition: none;
  }
}

/* ---- assistant (edge tab + right drawer) ---- */

button.aucra-ai-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 56px;
  z-index: 1500;
  background: var(--panel);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgb(var(--shade) / 0.08);
}
button.aucra-ai-tab.aucra-ai-tab-open {
  display: none;
}
/* Below 1024px the panels end 32px in from the edge, so a 30px handle met
   them with 2px to spare and its shadow on their border (C4 of the
   2026-10-13 state check). At 24px, still the smallest target WCAG 2.5.8
   asks for, it keeps 8px clear on every page. */
@media (max-width: 1023px) {
  button.aucra-ai-tab {
    width: 24px;
  }
}
/* The icon (ui/assistant/tab_icon.py) morphs the chevron's outline into the
   sparkle's on hover, turning a little as it goes, and the colours start
   cycling once the morph has landed. */
.aucra-ai-tab .tab-icon-box {
  display: flex;
}
.aucra-ai-tab .tab-chevron,
.aucra-ai-tab .tab-spark {
  transition: opacity var(--motion-slow, 420ms) var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)),
    d var(--motion-slow, 420ms) var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1));
}
.aucra-ai-tab stop {
  stop-color: var(--muted);
  transition: stop-color var(--motion-slow, 420ms) var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1));
}
.aucra-ai-tab:hover stop {
  stop-color: var(--gold);
}
.aucra-ai-tab:hover stop:last-child {
  stop-color: var(--spark-end);
}
.aucra-ai-tab:hover .tab-icon {
  animation: aucra-tab-turn var(--motion-slow, 420ms) var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)),
    aucra-hue 1.6s linear var(--motion-slow, 420ms) infinite;
}
/* Where d is no CSS property (Safari), the star crossfades over the chevron. */
.aucra-ai-tab .tab-spark {
  opacity: 0;
}
.aucra-ai-tab:hover .tab-chevron {
  opacity: 0;
}
.aucra-ai-tab:hover .tab-spark {
  opacity: 1;
}
@supports (d: path("M0 0")) {
  .aucra-ai-tab .tab-spark {
    display: none;
  }
  .aucra-ai-tab:hover .tab-chevron {
    opacity: 1;
    d: var(--tab-star);
  }
}
@keyframes aucra-tab-turn {
  50% {
    transform: rotate(-14deg) scale(1.08);
  }
}
@keyframes aucra-hue {
  to {
    filter: hue-rotate(360deg);
  }
}

aside.q-drawer--right {
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 0;
  box-shadow: -8px 0 24px rgb(var(--shade) / 0.10);
}
/* drawer.py supplies the responsive width to Quasar and its page layout. */
/* The drawer's own body, turns and foot are in assistant.css and
   assistant_bubbles.css. */

/* ---- responsive shell ---- */

/* At or below the drawer's breakpoint Quasar takes the rail out of the flow
   and overlays it, so the content column owns the whole viewport. */
@media (max-width: 1023px) {
  .aucra-menu-wide {
    display: none;
  }
  .aucra-content {
    max-width: 100%;
    padding: 16px !important;
  }
}
@media (min-width: 1024px) {
  .aucra-menu-narrow {
    display: none;
  }
}

/* The full header (menu, wordmark, 250px search, named account chip) needs
   760px; below that it used to wrap out of its 56px row and land on the page.
   It drops to icons instead: search to its magnifier, account to its avatar. */
@media (max-width: 767px) {
  .aucra-header {
    gap: 8px;
  }
  .aucra-wordmark {
    min-width: 0;
    overflow: hidden;
  }
  .aucra-search {
    width: 38px;
    flex: 0 0 38px;
    min-width: 0;
  }
  .aucra-search .q-field__control {
    padding: 0 8px;
  }
  .aucra-search .q-field__control-container,
  .aucra-user-name,
  .aucra-user-caret {
    display: none;
  }
  .aucra-search .q-field__prepend {
    padding-right: 0;
  }
  button.aucra-user {
    gap: 0;
    padding: 4px;
  }
}

/* The skip link: first in the tab order, off screen until it has focus, then
   over the header's left end. The column it lands on takes focus by script
   only, so it draws no ring of its own. */
.aucra-skip-link {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 3000;
  transform: translateY(-200%);
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.aucra-skip-link:focus,
.aucra-skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Out of the column's flow, so its gap does not open above the page. */
.aucra-main-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.aucra-main-mark:focus {
  outline: none;
}

/* A page drawn before sign in (sign in, first administrator, reset) sits in
   the middle of a tall window; a short one keeps it at the top. The height
   leaves out NiceGUI's 16px above and below the content, so nothing scrolls,
   and `body` outweighs the 64px top padding pages.css gives the column. */
@media (min-height: 640px) {
  body .aucra-content.aucra-bare {
    min-height: calc(100vh - 32px);
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}