/* ---- ui/layout.py: the platform's softer look ----

   The user's requests of 2026-09-29: rounder corners, panels the page shows
   through a little, a region's sections as cards of their own, and under a
   tab bar a gap with nothing drawn in it. Drawn on the clause pages first,
   then on every page (the user, the same day): `layout.content` gives every
   page's column `aucra-soft`, the tool window and the pages before sign in
   included, and the tokens and the page's ground are in `brand.css`. Ink is
   untouched: the panels stay near white, so every contrast measured on
   --panel holds. */

.aucra-soft .aucra-panel {
  background: var(--soft-panel);
  border-color: var(--soft-line);
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(12px) saturate(1.2);
}
/* A head or a foot with a wash of its own follows the panel's corners. */
.aucra-soft .aucra-panel > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.aucra-soft .aucra-panel > :last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.aucra-soft .aucra-region-head,
.aucra-soft .aucra-panel-head {
  border-bottom-color: var(--soft-line);
}
.aucra-soft .aucra-region-letter {
  border-radius: 7px;
}
.aucra-soft .aucra-guidance.aucra-boxed,
.aucra-soft .aucra-register-detail {
  border-radius: var(--soft-radius-inner);
}
.aucra-soft .aucra-control .q-field__control,
.aucra-soft .aucra-control .q-field__control:before,
.aucra-soft .aucra-select .q-field__control,
.aucra-soft .aucra-select .q-field__control:before,
.aucra-soft .aucra-matrix-cell .q-field__control,
.aucra-soft .aucra-matrix-cell .q-field__control:before,
.aucra-soft .aucra-editor.q-editor,
.aucra-soft .aucra-btn,
.aucra-soft a.aucra-step {
  border-radius: 8px;
}
.aucra-soft .aucra-outline-row {
  border-radius: 8px;
}

/* ---- every tab bar ---- */

/* A bar is a card of its own, round at all four corners, with the tabs as
   soft pills inside it. The active one is lifted onto the panel's white and
   keeps the gold mark under its label. The kit draws every bar
   (`kit/tabs.py`), so a clause page's regions, Principles, the Overview
   matrix and the Debug page all take it. */
.aucra-soft .aucra-tabs {
  padding: 1px;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(12px) saturate(1.2);
  /* A low shadow only: a deep one would blur into the gap under the bar. */
  box-shadow: 0 1px 2px rgba(28, 33, 38, 0.05);
}
/* Quasar clips the row of tabs at its own box (overflow hidden, kept for its
   scroll arrows), which cut a tab's focus ring (2px, 2px out) and the active
   pill's shadow. The bar's 5px inset sits inside that box instead, so both
   fit and the bar keeps its size. */
.aucra-soft .aucra-tabs .q-tabs__content {
  padding: 4px;
  column-gap: 4px;
  row-gap: 4px;
}
.aucra-soft .aucra-tabs .q-tab {
  margin-right: 0;
  padding: 0 14px;
  min-height: 38px;
  border-radius: 10px;
  transition: background 0.15s, box-shadow 0.15s;
}
.aucra-soft .aucra-tabs .q-tab:hover {
  background: rgba(238, 241, 244, 0.9);
}
.aucra-soft .aucra-tabs .q-tab--active,
.aucra-soft .aucra-tabs .q-tab--active:hover {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--soft-line), 0 1px 3px rgba(28, 33, 38, 0.1);
}
.aucra-soft .aucra-tabs .q-tab__indicator {
  left: 14px;
  right: 14px;
  bottom: 4px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .aucra-soft .aucra-tabs .q-tab {
    transition: none;
  }
}

/* The gap between the bar and what it switches: 18px of the page's own
   ground and nothing drawn in it (the user, 2026-09-29), so the tabs read as
   the way through the page and not as the top of its first panel. Quasar's
   panel box clips what overflows it, so the panels get 8px of room on each
   side for their shadow. */
.aucra-soft .aucra-tab-panels {
  width: calc(100% + 16px);
  margin: 0 -8px;
  background: transparent;
}
.aucra-soft .aucra-tab-panels .q-tab-panel {
  padding: 18px 8px 12px;
}

/* ---- the sections of a region: one card each ----

   A region whose content has several parts is a stack of cards
   (`kit/panel.region_cards`, the user's request of 2026-09-29): the first
   holds the region head and the first part, each later part is a
   `section_card`, and the page's ground shows in the 10px between them with
   nothing drawn there (`content.css` lays the stack out). Every card takes
   the panel look above, round at all four corners. Each part's head is a
   band on the head wash with a gold marker before its title, the first one
   under the region head included, so the parts all start alike; a head that
   opens a card follows the card's top corners, through the box 6.6 wraps it
   in too. */
.aucra-soft :is(.aucra-panel:has(> .aucra-region-head), .aucra-section-card)
  > .aucra-panel-head,
.aucra-soft :is(.aucra-panel:has(> .aucra-region-head), .aucra-section-card)
  > .aucra-comm-read-target > .aucra-panel-head {
  padding: 14px 18px;
  background-color: var(--wash-head);
}
.aucra-soft .aucra-section-card > :first-child > .aucra-panel-head:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.aucra-soft :is(.aucra-panel:has(> .aucra-region-head), .aucra-section-card)
  > .aucra-panel-head .aucra-panel-title::before,
.aucra-soft :is(.aucra-panel:has(> .aucra-region-head), .aucra-section-card)
  > .aucra-comm-read-target > .aucra-panel-head .aucra-panel-title::before,
.aucra-soft .aucra-panel > * > .aucra-band-head .aucra-band-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--gold);
  vertical-align: -2px;
}
/* A section head's band already draws the line under it, so the first
   lettered block of that section (6.6's assumptions) and the box it sits in,
   and the head of the register under it (6.6's risks and stakeholders), draw
   no top line of their own, which would double it. */
.aucra-soft .aucra-panel > .aucra-panel-head ~ * > .aucra-register:first-child
  > .aucra-register-head:first-child,
.aucra-soft .aucra-panel > .aucra-panel-head + .aucra-comm-block,
.aucra-soft .aucra-panel > .aucra-panel-head + * > .aucra-block:first-child {
  border-top: 0;
}
/* 6.3's threshold chips are single choice options, so they take the 10px
   corners of a choice group, as the mockup draws them (design_choices.py). */
.aucra-soft .aucra-threshold-chip {
  border-radius: 10px;
}