/*
 * Bootstrap bridge
 *
 * Re-points Bootstrap's runtime custom properties at our design tokens, so a
 * component lifted from the template and a component we wrote resolve to the same
 * palette without recompiling any Sass.
 *
 * Loads after the OneUI stylesheet and after any colour theme, so it wins. When a
 * theme is active it deliberately does NOT override the palette: a theme is the
 * user's choice of colour, and only the structural values below are forced.
 */

/* --- Palette -------------------------------------------------------------
   Applied only when no colour theme is loaded. A theme brings its own compiled
   palette and must be allowed to replace these. */
html:not([data-theme]),
html[data-theme="default"] {
  --bs-body-bg:            var(--gc-surface);
  --bs-body-color:         var(--gc-text);
  --bs-secondary-color:    var(--gc-text-muted);
  --bs-border-color:       var(--gc-border);
  --bs-primary:            var(--gc-primary);
  --bs-link-color:         var(--gc-primary);
  --bs-link-hover-color:   var(--gc-primary-hover);
  --bs-success:            var(--gc-success);
  --bs-warning:            var(--gc-warning);
  --bs-danger:             var(--gc-danger);
  --bs-info:               var(--gc-info);
}

/* --- Structure -----------------------------------------------------------
   These hold under every theme, because they are accessibility and layout
   requirements rather than taste. */

/* Every interactive control reaches the 44px minimum target. Controls inside a
   dense table row are the documented exception: the row itself is 48px and the
   whole row is the click target. */
.btn,
.form-control,
.form-select,
.form-check-input,
.page-link {
  min-height: var(--gc-tap-min);
}

.btn-sm,
.form-control-sm,
.form-select-sm {
  min-height: 2rem;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: .125rem;
}

/* The input boundary must reach 3:1 against the surface behind it, which
   Bootstrap's default border does not. */
.form-control,
.form-select,
.form-check-input {
  border-color: var(--gc-text-muted);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--gc-surface-sunken);
  color: var(--gc-text-disabled);
}

/* Focus is a ring plus a halo so it stays visible on the warm page ground, on a
   white card and on the dark navigation rail alike. */
:focus-visible {
  outline: 3px solid var(--gc-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--gc-focus-halo);
}

.btn:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .25rem rgba(44, 95, 124, .25);
}

/* Body text never falls below 16px: below that, mobile browsers zoom on focus,
   which throws the user out of the layout. */
body,
.form-control,
.form-select {
  font-size: 1rem;
}

/* --- Skip link ----------------------------------------------------------- */
.gc-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 2000;
  padding: .75rem 1rem;
  background: var(--gc-surface-raised);
  color: var(--gc-primary);
  border: 2px solid var(--gc-primary);
  border-radius: 0 0 .5rem 0;
}

.gc-skip-link:focus {
  inset-inline-start: 0;
}

/* --- Shell details ------------------------------------------------------- */

/* The role chip in the header. Says which hat the user is wearing, which matters
   in an office where one person may hold several. */
.gc-role-chip {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gc-primary-on-subtle);
  background: var(--gc-primary-subtle);
  border-radius: 1rem;
}

/* Initials rather than a photograph. There is no avatar upload anywhere in this
   system and a counselling record is not a place for one. */
.gc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gc-text-on-dark);
  background: var(--gc-primary);
  border-radius: 50%;
}

/* The unread count. Hidden when zero rather than showing a nought, because a
   nought still reads as something to attend to. */
.gc-bell-count {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  transform: translate(35%, -35%);
  font-size: .6875rem;
  min-width: 1.125rem;
}

.gc-bell-count:empty {
  display: none;
}

/* Icons. Always beside a text label, always hidden from assistive technology. */
.gc-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  vertical-align: -.125em;
  flex: none;
}

.nav-main-link-icon.gc-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* The heading above the current page carries the same marker as the link
   (10 section 3.2). Groups are headings, never disclosures, so there is no
   chevron and nothing to open. */
.nav-main-heading--active {
  color: inherit;
  opacity: 1;
  font-weight: 700;
}

.nav-main-link-badge {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.gc-seal,
.gc-seal-lg {
  vertical-align: middle;
}

/* --- Kiosk --------------------------------------------------------------- */
.gc-kiosk #page-container {
  min-height: 100vh;
  background: var(--gc-surface);
}

/* --- Content widths ------------------------------------------------------

   **These selectors are the shape they are because the two-class version lost.**
   `.content.content-narrow-gc` is two classes; OneUI caps the content area with
   `#page-container > #main-container .content`, which is two ids and a class and
   therefore wins whatever the source order. Both `-gc` widths were declared,
   compiled, written into nineteen templates and applied to nothing: every screen
   in the product rendered at the container's cap. Measured in a browser, not
   reasoned about -- the specificity is exactly the kind of thing that reads as
   fine and is not (D-122).

   The container selector is repeated for `#page-header` and `#page-footer` so the
   header rule, the content and the footer keep one measure between them. OneUI
   applies its own cap to the same three; ours replaces it. */

#page-container > #main-container .content,
#page-container > #page-footer .content,
#page-container > #page-header .content,
#page-container > #page-header .content-header {
  max-width: var(--gc-content-ceiling);
}

/* A reading measure for a screen whose job is a form or a page of prose. Wider
   than this a label and its input drift so far apart that they stop reading as a
   pair. `10` section 5.7 sets the number; this is where it takes effect. */
#page-container > #main-container .content.content-narrow-gc {
  max-width: var(--gc-content-narrow);
}

/* The two register screens that reproduce wide printed tables, and the
   statistics pages. Declared and, as of D-122, still used by no screen -- the
   assignment is `10`'s to make. */
#page-container > #main-container .content.content-wide-gc {
  max-width: var(--gc-content-wide);
}

/* A reading measure for one block inside a wide page. The two rules above
   only ever match the container `base.html` renders, so a template that wrote
   `content-narrow-gc` on an inner div got no width at all -- the same shape of
   silent miss D-122 records. This one is a single class and applies anywhere,
   which is what a mixed page needs: the booking wizard keeps its question
   steps at the measure while the slot grid uses the whole width. */
.gc-measure {
  max-width: var(--gc-content-narrow);
}

/* --- Display face ---------------------------------------------------------
   One weight, one subset. The body stack is the platform's own fonts and costs
   nothing; this is used only for page titles and the display numeral on the
   check-in poster.

   The URL is relative so that collectstatic rewrites it to the fingerprinted
   name. font-display: swap means a slow network shows the system serif first
   rather than nothing, which matters on the campus connection. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/source-serif-4-600-latin-ext.596d71390520.woff2") format("woff2");
  /* Latin plus the diacritics Filipino and Waray need. */
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gc-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Declared here rather than in the compiled palette because it exists to
     *replace* a compiled behaviour: OneUI's own cap on an unboxed container is
     1920px, and 1800 is where a line of help text in the settings panel is
     still a line somebody reads rather than scans across (D-122). Changing it
     needs no rebuild of the bundle, which is the point of it living here. */
  --gc-content-ceiling: 1800px;
}

/* `.gc-qr__code` was in this list and never took the serif: `components.css`
   loads later and sets it to monospace, which is the right answer anyway -- a
   check-in code is read character by character off a poster, and a serif face
   is where an O and a 0 stop being distinguishable. The rule was dead and its
   comment claimed the opposite. */
h1, .h1,
.display-1 {
  font-family: var(--gc-font-display);
}