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

:root {
  --ink: #1c2126;
  --ink-soft: #2b333c;
  --mist: #eef1f4;
  --panel: #ffffff;
  --line: #d8dee4;
  --text: #232a31;
  --muted: #656f7a;
  --gold: #f9bf3d;
  --gold-deep: #7c630f;
  --gold-wash: #fdf3d6;
  /* 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;
  --wash-head: #f8fafb;
  --wash-band: #fbfcfd;
  --line-strong: #b9c2cb;
  /* 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. On the ink chrome it would read 2.82:1, so the header and the
     left drawer set it back to --gold (9.69:1 there). */
  --focus-ring: var(--gold-deep);
  /* The edge of a control whose options are all off (the verdict pair):
     3.32:1 on the panel, the 3:1 a control's boundary needs. */
  --line-control: #858e98;
  --rail-muted: #8b96a1; /* muted ink on the drawer: 5.39:1 against --ink */
}

body {
  background: var(--mist);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--text);
}

.aucra-mono {
  font-family: "IBM Plex Mono", monospace;
}

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

.aucra-header {
  background: var(--ink);
  --focus-ring: var(--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 rgba(249, 191, 61, 0.28);
}

.aucra-menu-btn.q-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
}

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

.aucra-search {
  width: 250px;
}
.aucra-search .q-field__control {
  height: 36px;
  min-height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0 12px;
  transition: background 0.15s, outline-color 0.15s;
  outline: 2px solid transparent;
  outline-offset: 0;
}
.aucra-search .q-field__control:hover {
  background: rgba(255, 255, 255, 0.13);
}
/* `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: rgba(255, 255, 255, 0.16);
  outline-color: var(--focus-ring);
  outline-offset: 2px;
}
.aucra-search .q-field__native {
  color: #e8edf2;
}
.aucra-search .q-field__native::placeholder {
  /* 6.06:1 on the field at rest, 4.61:1 focused (was 3.26:1). */
  color: #aab4bd;
}
.aucra-search .q-icon {
  color: #77828c;
}

.aucra-status {
  color: #7f8a94;
  font-size: 22px;
  cursor: default;
  transition: color 0.15s;
}
.aucra-status-pending {
  color: var(--gold);
}

button.aucra-user {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  color: #e8edf2;
  font-family: inherit;
}
button.aucra-user:hover {
  background: rgba(255, 255, 255, 0.08);
}
.aucra-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aucra-user-name {
  font-size: 0.9rem;
}
.aucra-user-caret {
  color: #7f8a94;
  font-size: 18px;
}
.aucra-menu-hint {
  font-size: 0.78rem;
  color: var(--muted);
}
a.aucra-menu-link {
  font-size: 0.85rem;
  color: var(--gold-deep);
  text-decoration-line: none;
}
a.aucra-menu-link:hover {
  text-decoration-line: underline;
}

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

aside.q-drawer--left {
  background: var(--ink);
  --focus-ring: var(--gold);
  padding: 0;
  overflow-x: hidden;
  transition: width 0.3s cubic-bezier(0.33, 0, 0.2, 1) !important;
}
.q-page-container {
  transition: padding 0.3s cubic-bezier(0.33, 0, 0.2, 1) !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: #3a434c var(--ink);
}

a.aucra-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 14px;
  height: 36px;
  margin: 2px 10px;
  padding: 0 14px;
  border-radius: 6px;
  color: #aab4bd;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s,
    padding 0.3s cubic-bezier(0.33, 0, 0.2, 1), gap 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}
a.aucra-nav:hover {
  background: var(--ink-soft);
  color: #ffffff;
  opacity: 1;
}
.aucra-nav .q-icon {
  font-size: 22px;
  flex: 0 0 24px;
}
a.aucra-nav-active {
  background: var(--ink-soft);
  color: #ffffff;
  box-shadow: inset 2px 0 0 var(--gold);
}
.aucra-nav-active .q-icon {
  color: var(--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 0.18s 0.12s, max-width 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}
.aucra-collapsed .nav-label {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.1s, max-width 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}

/* 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 0.18s 0.12s, max-height 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}
.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 0.12s, max-height 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}

/* 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;
  padding-top: 6px;
  border-top: 1px solid var(--ink-soft);
}
.aucra-nav-pinned a.aucra-nav {
  margin-left: 0;
  margin-right: 0;
}
.aucra-nav-pinned + .aucra-foot {
  border-top: 0;
  padding-top: 0;
}

/* The list above ends wherever the viewport cuts it, so the foot carries a
   rule and a gap: a half-row clipped by the scroll edge would otherwise sit
   straight on top of this line in a short window.
   The ink is --rail-muted: 5.39:1 on the drawer's --ink, by the WCAG relative
   luminance formula. The hard coded #66707a it replaces was 3.22:1. */
.aucra-foot {
  flex: 0 0 auto;
  margin: 0 10px 12px;
  padding: 9px 14px 0;
  border-top: 1px solid var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.16em;
  color: var(--rail-muted);
  white-space: nowrap;
}

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

.aucra-caption {
  flex: 0 0 auto;
  box-sizing: content-box;
  margin: 12px 10px 3px;
  padding: 0 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  min-height: 16px;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d98a3;
  /* 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 {
  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: 6px;
  color: #aab4bd;
  font-size: 0.83rem;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
a.aucra-clause:hover {
  background: var(--ink-soft);
  color: #ffffff;
  opacity: 1;
}
.aucra-clause-deep {
  margin-left: 36px;
}
.aucra-clause-id {
  flex: 0 0 38px;
  font-size: 0.72rem;
  color: #8d98a3;
}
.aucra-clause-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aucra-clause-active {
  background: var(--ink-soft);
  color: #ffffff;
  box-shadow: inset 2px 0 0 var(--gold);
}
.aucra-clause-active .aucra-clause-id {
  color: var(--gold);
}
.aucra-clause-heading {
  height: 26px;
  color: #7f8a94;
  cursor: default;
}
.aucra-clause-ref {
  cursor: pointer;
}
.aucra-clause-ref:hover {
  background: var(--ink-soft);
  color: #ffffff;
}
.aucra-clause-mark {
  font-size: 14px;
  color: #7f8a94;
}

/* ---- 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 rgba(28, 33, 38, 0.08);
}
button.aucra-ai-tab.aucra-ai-tab-open {
  display: none;
}
.aucra-ai-tab .tab-chevron,
.aucra-ai-tab .tab-spark {
  position: absolute;
  transition: opacity 0.15s;
}
.aucra-ai-tab .tab-chevron {
  color: var(--muted);
  font-size: 20px;
  opacity: 1;
}
.aucra-ai-tab .tab-spark {
  opacity: 0;
  font-size: 15px;
}
.aucra-ai-tab:hover .tab-chevron {
  opacity: 0;
}
/* The sparkle appears immediately on hover; the 0.12s animation-delay keeps it
   in its natural gold for a beat before the colors start cycling. */
.aucra-ai-tab:hover .tab-spark {
  opacity: 1;
  animation: aucra-hue 1.6s linear 0.12s infinite;
}
@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 rgba(28, 33, 38, 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. */

/* ---- 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;
  }
  .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: 6px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  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;
  }
}