/* =====================================================================
   ATRIUM THEME LAYER for Campus Intelligence — loaded AFTER app.css
   ---------------------------------------------------------------------
   What this file is: the prototype's design-token system (atrium.css §1–§2)
   brought into the product, and a MAPPING of every `--ciq-*` token and the
   Bootstrap variables onto those tokens. app.css keeps its structure and its
   `--ciq-*` vocabulary; this file changes what the vocabulary resolves to.
   The 121 templates are not edited.

   2a (02-10-2026): ONE theme now, Light/teal (L2, L3). Formerly four themes, chosen with
   <html data-theme="light|dark|k12|brand">:
     light  — Atrium default (teal)
     dark
     k12    — warm, larger, rounder (primary school)
     brand  — the tenant's own colours (Vignan: blue + red)
   The OS preference is followed when nothing has been chosen.

   Sections:  §A Atrium tokens (light)   §B themes   §C map --ciq-* → Atrium
              §D map Bootstrap → Atrium  §E shell (rail, top bar, content)
              §F components (cards, tables, badges, forms, buttons, tiles)
              §G Gray Matter footer · theme switcher   §H print
   ===================================================================== */

/* =====================================================================
   §A  TOKENS — the "Studio" look (08-10-2026), shared with Placeeazee and Fluenzee:
   cool mist background, near-black ink for text and primary actions, flat white
   cards, soft pastel tints for grouping, and one coral accent for what is live or
   selected. Bricolage Grotesque for every word, JetBrains Mono for kickers, labels
   and counters. Was: Atrium Light, teal brand (2a, 02-10-2026).
   ===================================================================== */
/* Fonts are vendored (SIL Open Font License), never a CDN: variable files, one per subset. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("vendor/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("vendor/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("vendor/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("vendor/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* the Studio palette */
  --ink:        #11141B;  --ink-2: #2A2F3C;  --ink-line: #333948;
  --mist:       #EEF0F4;
  --coral:      #FF5B3A;  --coral-text: #D93A1A;  --coral-ink: #B3321A;  --coral-soft: #FFF1EC;
  --peach:      #FCEDE6;  --peach-2: #FFD3C6;
  --cyan:       #CFF4F7;  --cyan-ink: #1C6E77;
  --yellow:     #FFE9B0;  --yellow-ink: #94600E;
  --violet:     #E2DAFF;  --violet-ink: #4B3A9E;
  --mint:       #DDF6E9;  --mint-ink: #1E7A57;

  /* the semantic names every rule below is written against */
  --brand:        var(--ink);          /* primary actions are ink */
  --brand-strong: var(--ink-2);
  --on-brand:     #FFFFFF;
  --brand-soft:   var(--mist);
  --brand-scrim:  rgba(17, 20, 27, .14);
  --accent:       var(--coral);        /* the one signal colour: live, selected, today */
  --on-accent:    var(--ink);

  --bg:           var(--mist);
  --surface:      #FFFFFF;
  --surface-2:    #F5F6F9;
  --surface-3:    var(--mist);
  --border:       #DCE0E8;
  --border-strong:#C3C8D4;

  --text:         var(--ink);
  --text-muted:   #596070;
  --text-faint:   #8A91A0;
  --text-inverse: #FFFFFF;

  --ok:      #1E7A57;  --on-ok:     #FFFFFF;
  --warn:    #94600E;  --on-warn:   #FFFFFF;
  --danger:  #B3321A;  --on-danger: #FFFFFF;
  --info:    #1C6E77;  --on-info:   #FFFFFF;
  --ok-soft:     #E4F6EE;
  --warn-soft:   #FFF2D1;
  --danger-soft: #FFE1D9;
  --info-soft:   #E3F8FA;

  --tint-1: var(--peach);  --on-tint-1: var(--coral-ink);
  --tint-2: var(--cyan);   --on-tint-2: var(--cyan-ink);
  --tint-3: var(--yellow); --on-tint-3: var(--yellow-ink);
  --tint-4: var(--violet); --on-tint-4: var(--violet-ink);
  --tint-5: var(--mint);   --on-tint-5: var(--mint-ink);

  --font-head: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI",
               "Noto Sans", "Nirmala UI", "Noto Sans Devanagari", "Noto Sans Telugu", "Noto Sans Tamil", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-xs: 0.75rem;  --fs-sm: 0.8125rem; --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem; --fs-xl: 1.375rem;  --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;

  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;
  --shadow-1: none;
  --shadow-2: 0 10px 24px rgba(17, 20, 27, .08);
  --shadow-3: 0 12px 32px rgba(17, 20, 27, .18);
  --t-fast: 120ms; --t-med: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --touch: 44px;
  --rail-w: 208px;
  --topbar-h: 56px;
  --foot-h: 40px;
  color-scheme: light;

  /* tables (21-09-2026): header band, rules, zebra — each theme sets its own */
  --tbl-head-bg: var(--surface-2);
  --tbl-head-fg: var(--text);
  --tbl-head-rule: var(--border-strong);
  --tbl-rule: var(--border);
  --tbl-zebra: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  --tbl-hover: var(--brand-soft);
  --tbl-foot-bg: var(--surface-2);
}

/* =====================================================================
   §B  THEMES — tokens only
   ===================================================================== */
/* 2a (Venkat, 02-10-2026; L2, L3): one theme, Light with the teal brand. The Dark, Warm
   and "Institute brand" blocks and the OS dark rule are deleted; nothing re-tints. */

/* =====================================================================
   §C  MAP  --ciq-*  →  Atrium.   Every --ciq token app.css reads now resolves
   to an Atrium token, so the whole product follows the theme. Written on
   :root so a [data-theme] block above changes everything below by reference.
   ===================================================================== */
:root {
  /* brand and accents */
  --ciq-brand: var(--brand);
  --ciq-brand-dark: var(--brand-strong);
  --ciq-brand-hover: var(--brand-strong);
  --ciq-brand-contrast: var(--on-brand);
  --ciq-focus-ring: var(--brand-scrim);

  /* the rail: light surface, like the prototype (was navy) */
  --ciq-sidebar-width: var(--rail-w);
  --ciq-sidebar-bg: var(--surface);
  --ciq-sidebar-fg: var(--text-muted);
  --ciq-sidebar-fg-strong: var(--text);
  --ciq-sidebar-fg-muted: var(--text-faint);
  --ciq-sidebar-hover-bg: var(--surface-2);
  --ciq-sidebar-active-bg: var(--brand-soft);
  --ciq-sidebar-active-bar: var(--brand);
  --ciq-sidebar-heading: var(--text-faint);
  --ciq-sidebar-border: var(--border);

  /* surfaces, borders, text */
  --ciq-page-bg: var(--bg);
  --ciq-card-bg: var(--surface);
  --ciq-border: var(--border);
  --ciq-card-border: var(--border);
  --ciq-control-border: var(--border-strong);
  --ciq-input-bg: var(--surface-3);
  --ciq-text: var(--text);
  --ciq-text-muted: var(--text-muted);
  --ciq-heading: var(--text);

  /* geometry, elevation */
  --ciq-radius-sm: var(--r-sm);
  --ciq-radius-md: var(--r-md);
  --ciq-radius-lg: var(--r-md);
  --ciq-radius-xl: var(--r-lg);
  --ciq-radius-pill: var(--r-full);
  --ciq-card-radius: var(--r-lg);
  --ciq-shadow-sm: var(--shadow-1);
  --ciq-shadow-md: var(--shadow-1);
  --ciq-card-shadow: var(--shadow-1);

  /* top bar */
  --ciq-topbar-bg: var(--surface);
  --ciq-topbar-accent: var(--border);
  --ciq-topbar-accent-height: 1px;
  --ciq-topbar-height: var(--topbar-h);

  /* type */
  --ciq-font-body: var(--font-body);
  --ciq-font-micro: var(--fs-xs);
  --ciq-font-xs: var(--fs-xs);
  --ciq-font-sm: var(--fs-sm);
  --ciq-font-base: var(--fs-md);
  --ciq-font-lg: var(--fs-lg);
  --ciq-font-xl: var(--fs-xl);
  --ciq-tracking: 0.04em;

  /* secondary button */
  --ciq-btn-secondary-bg: var(--surface);
  --ciq-btn-secondary-bg-hover: var(--surface-2);
  --ciq-btn-secondary-fg: var(--text);
  --ciq-btn-secondary-border: var(--border);

  /* status: fg on soft bg, as the prototype's badges */
  --ciq-status-green-fg: var(--ok);      --ciq-status-green-bg: var(--ok-soft);
  --ciq-status-amber-fg: var(--warn);    --ciq-status-amber-bg: var(--warn-soft);
  --ciq-status-red-fg: var(--danger);    --ciq-status-red-bg: var(--danger-soft);
  --ciq-status-neutral-fg: var(--text-muted); --ciq-status-neutral-bg: var(--surface-3);
}

/* =====================================================================
   §D  MAP  Bootstrap 5.3  →  Atrium
   ===================================================================== */
:root, [data-bs-theme] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-faint);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-strong);
  --bs-primary: var(--brand);
  --bs-success: var(--ok);
  --bs-warning: var(--warn);
  --bs-danger: var(--danger);
  --bs-info: var(--info);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-md);
  --bs-heading-color: var(--text);
}
.btn { --bs-btn-border-radius: var(--r-md); --bs-btn-font-weight: 600; --bs-btn-font-size: var(--fs-sm); --bs-btn-padding-y: .45rem; --bs-btn-padding-x: 1rem; }
.btn-sm { --bs-btn-border-radius: var(--r-md); --bs-btn-font-size: var(--fs-xs); }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--on-brand); --bs-btn-hover-bg: var(--brand-strong); --bs-btn-hover-border-color: var(--brand-strong); --bs-btn-hover-color: var(--on-brand); --bs-btn-active-bg: var(--brand-strong); --bs-btn-active-border-color: var(--brand-strong); --bs-btn-active-color: var(--on-brand); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-disabled-color: var(--on-brand); --bs-btn-focus-shadow-rgb: 17, 20, 27; }
.btn-secondary, .btn-outline-secondary, .btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong); --bs-btn-active-color: var(--text); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border); --bs-btn-disabled-color: var(--text-faint); }
.btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-color: var(--on-ok); --bs-btn-hover-bg: var(--ok); --bs-btn-hover-border-color: var(--ok); --bs-btn-hover-color: var(--on-ok); }
.btn-danger, .btn-outline-danger:hover { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-color: var(--on-danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: var(--on-danger); }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); }
.btn-warning { --bs-btn-bg: var(--warn); --bs-btn-border-color: var(--warn); --bs-btn-color: var(--on-warn); --bs-btn-hover-bg: var(--warn); --bs-btn-hover-border-color: var(--warn); --bs-btn-hover-color: var(--on-warn); }
.btn-link { --bs-btn-color: var(--brand); --bs-btn-hover-color: var(--brand-strong); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--brand-scrim); }

.form-control, .form-select { background-color: var(--surface-3); border-color: var(--border); color: var(--text); border-radius: var(--r-md); font-size: var(--fs-sm); min-height: 40px; }
.form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-scrim); color: var(--text); }
.form-control::placeholder { color: var(--text-faint); }
.form-control-sm, .form-select-sm { min-height: 34px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235B6674' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input { background-color: var(--surface); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--brand-scrim); border-color: var(--brand); }
.form-label, .ciq-field-label { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }

.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--border); --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: calc(var(--r-lg) - 1px); --bs-card-cap-bg: transparent; --bs-card-color: var(--text); box-shadow: var(--shadow-1); }
.table { --bs-table-color: var(--text); --bs-table-striped-bg: var(--tbl-zebra); --bs-table-hover-bg: var(--tbl-hover); --bs-table-hover-color: var(--text); font-size: var(--fs-sm); }
.alert-success { --bs-alert-bg: var(--ok-soft); --bs-alert-border-color: color-mix(in srgb, var(--ok) 30%, transparent); --bs-alert-color: var(--text); }
.alert-warning { --bs-alert-bg: var(--warn-soft); --bs-alert-border-color: color-mix(in srgb, var(--warn) 30%, transparent); --bs-alert-color: var(--text); }
.alert-danger  { --bs-alert-bg: var(--danger-soft); --bs-alert-border-color: color-mix(in srgb, var(--danger) 30%, transparent); --bs-alert-color: var(--text); }
.alert-info, .alert-primary { --bs-alert-bg: var(--info-soft); --bs-alert-border-color: color-mix(in srgb, var(--info) 30%, transparent); --bs-alert-color: var(--text); }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-border-color: var(--border); --bs-modal-border-radius: var(--r-xl); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-border-radius: var(--r-lg); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-color: var(--brand); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--brand); }
.badge.bg-primary { background-color: var(--brand) !important; color: var(--on-brand); }
.text-muted { color: var(--text-muted) !important; }
a { color: var(--brand); }
a:hover { color: var(--brand-strong); }
hr { border-color: var(--border); opacity: 1; }

/* =====================================================================
   §E  SHELL — rail · top bar · content, to the prototype's proportions
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body.ciq-body { font-family: var(--font-body); color: var(--text); background: var(--bg); font-size: var(--fs-md); line-height: 1.5; }
h1, h2, h3, h4, .ciq-page-title, .ciq-card-title, .ciq-auth-brand { font-family: var(--font-head); letter-spacing: -0.01em; color: var(--text); }
h1, .ciq-page-title { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3, .ciq-card-title { font-size: var(--fs-md); font-weight: 700; }

/* the rail: light, one px border, 44px rows, rounded active pill in brand-soft */
.ciq-sidebar { background: var(--surface); color: var(--text-muted); border-right: 1px solid var(--border); }
.ciq-sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; min-height: var(--topbar-h); justify-content: center; }
.ciq-sidebar-brand:hover { text-decoration: none; }
.ciq-sidebar-brand .ciq-brand-mark { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: var(--on-brand); font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md); }
.ciq-sidebar-brand .ciq-brand-word { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }
.ciq-sidebar-logo { height: 26px; width: auto; max-width: 160px; object-fit: contain; }
.ciq-nav { padding: 12px 10px; }
.ciq-nav-heading { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 16px 12px 4px; }
.ciq-nav-link { min-height: var(--touch); padding: 0 12px; margin: 2px 0; border-radius: var(--r-md); border-left: 0; color: var(--text-muted); font-weight: 500; font-size: var(--fs-sm); gap: 12px; }
.ciq-nav-link:hover { background: var(--surface-2); color: var(--text); }
.ciq-nav-link.is-active, details.ciq-nav-group[open] > summary.ciq-nav-link { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ciq-nav-link.is-soon { color: var(--text-faint); }
.ciq-nav-ico { color: currentColor; opacity: .9; }
.ciq-nav-ico .bi { font-size: 16px; }
.ciq-nav-grouplink { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; flex: 1; }
.ciq-nav-sub { list-style: none; margin: 0 0 6px; padding: 0 0 0 10px; }
.ciq-nav-sublink { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px 0 22px; border-radius: var(--r-md); color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); }
.ciq-nav-sublink:hover { background: var(--surface-2); color: var(--text); }
.ciq-nav-sublink.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ciq-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.ciq-nav-subhead { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 2px 22px; }
.ciq-soon-tag { background: var(--surface-3); color: var(--text-faint); border-radius: var(--r-full); font-size: 10px; font-weight: 700; padding: 1px 7px; }
details.ciq-nav-group > summary::after { color: var(--text-faint); }

/* the top bar: white, 1px border, 56px, no accent stripe */
.ciq-topbar { min-height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; padding: 0 20px; gap: 12px; }
.ciq-topbar-institute .kicker { display: none; }
.ciq-topbar-institute .name { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.ciq-topbar-toggle { color: var(--text-muted); }
.ciq-context { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ciq-context .ciq-field-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; }
.ciq-identity { display: flex; flex-direction: column; line-height: 1.15; padding: 4px 10px; border-radius: var(--r-full); }
.ciq-identity-name { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.ciq-identity-roles { font-size: var(--fs-xs); color: var(--text-muted); }
.ciq-campus-label { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
/* narrow panes: the top bar wraps instead of overflowing sideways */
@media (max-width: 991px) {
  .ciq-topbar { flex-wrap: wrap; padding: 8px 12px; row-gap: 6px; }
  .ciq-context { margin-left: 0; flex-wrap: wrap; width: 100%; row-gap: 6px; }
  .ciq-content { padding: 16px 16px 24px; }
}

/* content: full width, the prototype's page padding; the footer follows it */
.ciq-content { max-width: none; padding: 24px 32px 24px; }
.ciq-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ciq-page-sub { color: var(--text-muted); font-size: var(--fs-sm); }

/* =====================================================================
   §F  COMPONENTS
   ===================================================================== */
.ciq-badge { border-radius: var(--r-full); min-height: 22px; padding: 2px 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
/* 2a (L4): five tones, one meaning each (app/core/status_labels.py); dark text on a soft
   tint, AA contrast, the words always saying the state. */
.ciq-badge--green   { background: var(--tone-green-bg);   color: var(--tone-green-fg); }
.ciq-badge--amber   { background: var(--tone-amber-bg);   color: var(--tone-amber-fg); }
.ciq-badge--red     { background: var(--tone-red-bg);     color: var(--tone-red-fg); }
.ciq-badge--blue    { background: var(--tone-blue-bg);    color: var(--tone-blue-fg); }
.ciq-badge--neutral, .ciq-badge--default { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

.ciq-table-scroll { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }

/* ---- tables, everywhere (21-09-2026): bold header band, generous cells, vertical
   rules, zebra rows, bold total row. Covers the product's `.ciq-table` and the four
   Bootstrap `.table` screens; colours come from the --tbl-* tokens each theme sets. */
.ciq-table, .table { border-collapse: separate; border-spacing: 0; width: 100%; --bs-table-bg: transparent; --bs-table-border-color: var(--tbl-rule); }
.ciq-table th, .table > * > tr > th {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: var(--tbl-head-fg); background: var(--tbl-head-bg); padding: 14px 20px;
  border-bottom: 2px solid var(--tbl-head-rule); vertical-align: middle;
}
.ciq-table td, .table > * > tr > td { padding: 14px 20px; font-size: var(--fs-sm); line-height: 1.45; border-bottom: 1px solid var(--tbl-rule); vertical-align: middle; color: var(--text); }
.ciq-table th + th, .ciq-table td + td, .table > * > tr > th + th, .table > * > tr > td + td { border-left: 1px solid var(--tbl-rule); }
.ciq-table tbody tr:nth-child(even) > td, .table > tbody > tr:nth-child(even) > td { background: var(--tbl-zebra); }
.ciq-table tbody tr:hover > td, .table > tbody > tr:hover > td { background: var(--tbl-hover); --bs-table-accent-bg: transparent; }
.ciq-table tr:last-child td { border-bottom: 1px solid var(--tbl-rule); }
.ciq-table tfoot td, .table > tfoot > tr > td, .ciq-table tr[id$="-total"] td { font-weight: 700; background: var(--tbl-foot-bg); border-top: 2px solid var(--tbl-head-rule); }
.ciq-table td:first-child, .table > * > tr > td:first-child { font-weight: 500; }
.ciq-table th a, .table th a { color: inherit; }
.ciq-table-scroll { overflow: auto; }
.ciq-table-scroll > .ciq-table tr:last-child td, .ciq-table-scroll > .table tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) { .ciq-table th, .ciq-table td, .table > * > tr > th, .table > * > tr > td { padding: 10px 12px; } }

.ciq-chip, .ciq-chip-btn, .ciq-filter-tab { border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
.ciq-filter-tab--on, .ciq-chip-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.ciq-note, .ciq-hint { color: var(--text-muted); font-size: var(--fs-xs); }
.ciq-warn { background: var(--warn-soft); border-inline-start: 4px solid var(--warn); color: var(--text); border-radius: var(--r-md); }
.ciq-memo { background: var(--info-soft); border-inline-start: 4px solid var(--info); border-radius: var(--r-md); }
.ciq-code { font-family: var(--font-mono); background: var(--surface-3); color: var(--text); border-radius: 6px; padding: 2px 6px; font-size: var(--fs-xs); }
.ciq-empty { color: var(--text-muted); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); }
.ciq-form-error { color: var(--danger); }
.ciq-required { color: var(--danger); }
.ciq-panel, .ciq-perms { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ciq-toolbar { gap: 8px; }

/* dashboard tiles → the prototype's KPI tiles */
.ciq-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; }
.ciq-dash-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 16px 20px; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.ciq-dash-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ciq-dash-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ciq-dash-figure { font-family: var(--font-head); font-size: clamp(1.25rem, 1.5vw, 1.75rem); font-weight: 750; letter-spacing: -0.02em; color: var(--text); }
.ciq-bar { background: var(--surface-3); border-radius: var(--r-full); height: 6px; overflow: hidden; }
.ciq-bar-fill { background: var(--brand); border-radius: inherit; }

/* dashboard extras: an accent rule on each tile, and the one bar left (the seats tile's).
   2a-1 (Venkat, 05-10-2026): NOTHING here is coloured by its position any more. Old: a
   tile's edge, a bar and a column each took info, ok, warn or danger by nth-child, which
   used green, amber and red as decoration. The charts are §O. */
.ciq-dash-tile { position: relative; overflow: hidden; }
.ciq-dash-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand); opacity: .85; }
.ciq-dash-tile .ciq-hint { margin-top: 4px; }
.ciq-bar { height: 8px; }
.ciq-bar-fill { background: linear-gradient(90deg, var(--brand), var(--brand-strong)); transition: width var(--t-med) var(--ease); }

/* ---- application launcher (topbar grid button + popover), as atrium.css .launcher ---- */
.ciq-apps-btn { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--text-muted); display: grid; place-items: center; font-size: 18px; flex: none; }
.ciq-apps-btn:hover, .ciq-apps-btn.is-open { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.ciq-apps { position: fixed; top: var(--topbar-h); left: 0; z-index: 1030; width: min(760px, 100vw); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-end-end-radius: var(--r-xl); box-shadow: var(--shadow-3); }
@media (min-width: 992px) { .ciq-apps { left: var(--rail-w); } }
.ciq-apps-head h3 { font-size: var(--fs-md); margin: 0; }
.ciq-apps-head p { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 14px; }
.ciq-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ciq-app-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 84px; border-radius: var(--r-md); border: 1px solid transparent; color: var(--text); text-decoration: none; }
.ciq-app-tile:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); text-decoration: none; }
.ciq-app-tile.is-active { background: var(--brand-soft); border-color: var(--brand); }
.ciq-app-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 16px; }
.ciq-app-tile b { font-size: var(--fs-sm); font-weight: 600; }
.ciq-app-lvl { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ciq-app-lvl.full { color: var(--ok); }
.ciq-app-lvl.read { color: var(--info); }

/* ---- launchpad on Home ---- */
.ciq-launchpad { margin-bottom: 20px; }
.ciq-launchpad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ciq-launchpad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ciq-launch { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.ciq-launch:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--text); text-decoration: none; }
.ciq-launch-ico { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand) 22%, var(--surface))); color: var(--brand); font-size: 20px; }
.ciq-launch-text { display: flex; flex-direction: column; min-width: 0; }
.ciq-launch-text b { font-size: var(--fs-sm); font-weight: 650; }
.ciq-launch-text small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }

/* ---- application overview page ---- */
.ciq-app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ciq-app-head-ico { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: var(--on-brand); font-size: 26px; box-shadow: var(--shadow-2); flex: none; }
.ciq-app-head .ciq-page-head { margin-bottom: 2px; justify-content: flex-start; align-items: center; }
.ciq-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ciq-screen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.ciq-screen:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand); text-decoration: none; }
.ciq-screen-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--brand); font-size: 14px; }
.ciq-screen-go { font-size: 20px; color: var(--text-faint); }
.ciq-screen:hover .ciq-screen-go { color: var(--brand); }

/* ---- page head with an icon tile (timetable and friends) ---- */
.ciq-page-head--icon { justify-content: flex-start; align-items: center; gap: 14px; }
.ciq-page-ico { width: 52px; height: 52px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 24px; flex: none; }

/* ---- timetable week view (21-09-2026): six subject colours from the theme's tints ---- */
.tt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tt-week { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); }
.tt-week .bi { color: var(--brand); }
.tt-week b { font-weight: 700; }
.tt-week span { color: var(--text-muted); }
.tt-grid th.tt-period-h { white-space: nowrap; }
.tt-grid th.tt-period-h .bi { margin-right: 4px; color: var(--text-muted); }
.tt-grid th.tt-day { text-align: center; }
.tt-grid .tt-day-name { display: block; }
.tt-grid .tt-day-date { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tt-grid th.tt-day.is-today .tt-day-date, .tt-day-date.is-today { background: var(--brand); color: var(--on-brand); }
.tt-grid th.tt-day .ciq-hint { text-transform: none; letter-spacing: 0; font-weight: 500; margin-top: 4px; }
.tt-grid th.tt-period { font-weight: 500; white-space: nowrap; }
.tt-grid tbody th.tt-period { background: var(--tbl-head-bg); border-bottom: 1px solid var(--tbl-rule); padding: 12px 20px; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text); }
.tt-grid tbody tr:nth-child(even) th.tt-period { background: var(--tbl-head-bg); }
.tt-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tt-bg); color: var(--tt-fg); font-weight: 800; font-size: var(--fs-xs); margin-right: 10px; vertical-align: middle; }
.tt-time { vertical-align: middle; font-weight: 600; }
.tt-grid td.tt-cell { padding: 8px 8px; vertical-align: top; }
.tt-grid td.tt-cell.is-today { background: color-mix(in srgb, var(--brand) 5%, var(--surface)) !important; }
.tt-free { color: var(--text-faint); padding-left: 6px; }
.tt-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: var(--fs-xs); color: var(--text-muted); }
.tt-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.tt-key i { width: 12px; height: 12px; border-radius: 3px; background: var(--tt); display: inline-block; }
.tt-no { background: var(--surface-3); color: var(--text-muted); }

/* auth (login, campus picker, 403): the prototype's sign-in hero */
.ciq-auth-main { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 70%, color-mix(in srgb, var(--brand-strong) 70%, #000) 100%); }
.ciq-auth-card { background: var(--surface); color: var(--text); border-radius: var(--r-xl); box-shadow: var(--shadow-3); border: 1px solid var(--border); }
.ciq-auth-brand { color: var(--text); }
.ciq-auth-logo { max-height: 48px; }

/* ---- the sign-in page: brand hero + form + features (atrium.css .signin) ---- */
.ciq-auth-main:has(.ciq-signin) { display: block; padding: 0; background: var(--bg); min-height: 100vh; }
.ciq-signin { min-height: 100vh; display: grid; grid-template-columns: 360px 1fr; }
.ciq-signin-hero {
  position: sticky; top: 0; height: 100vh; overflow: auto; padding: 32px 28px calc(var(--foot-h) + 24px);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 70%, color-mix(in srgb, var(--brand-strong) 70%, #000) 100%);
  color: var(--on-brand); display: flex; flex-direction: column; gap: 24px;
}
.ciq-signin-hero .gm-intro { display: inline-flex; align-items: center; gap: 10px; color: var(--on-brand); text-decoration: none; width: max-content; }
.ciq-signin-hero .gm-mark { display: block; overflow: visible; width: 44px; height: auto; }
.ciq-signin-hero .gm-word { display: flex; flex-direction: column; line-height: 1; }
.ciq-signin-hero .gm-word b { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.ciq-signin-hero .gm-word b i { font-style: normal; color: #FB2E3C; }
.ciq-signin-hero .gm-word small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .32em; color: #FFC400; margin-top: 3px; text-transform: uppercase; }
.ciq-signin-product { display: flex; align-items: center; gap: 12px; }
.ciq-signin-mark { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 20px; background: color-mix(in srgb, var(--on-brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); }
.ciq-signin-names { display: flex; flex-direction: column; line-height: 1.15; }
.ciq-signin-names b { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.01em; }
.ciq-signin-names small { font-size: var(--fs-xs); opacity: .85; }
.ciq-signin-title { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; color: var(--on-brand); margin: 0; }
.ciq-signin-lead { margin: 8px 0 0; opacity: .88; font-size: var(--fs-md); }
.ciq-signin-what { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: var(--fs-sm); opacity: .92; }
.ciq-signin-what li::marker { color: #FFC400; }
.ciq-signin-tenant { margin-top: auto; padding: 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--on-brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--on-brand) 22%, transparent); font-size: var(--fs-sm); display: grid; gap: 12px; }
.ciq-signin-tenant-id { display: flex; gap: 12px; align-items: center; }
.ciq-signin-tenant-id img { height: 40px; width: auto; max-width: 132px; object-fit: contain; flex: none; background: #fff; border-radius: var(--r-md); padding: 5px 8px; }
.ciq-signin-tenant-id b { display: block; font-size: var(--fs-md); }
.ciq-signin-tenant-id span { opacity: .8; font-size: var(--fs-xs); }
.ciq-signin-links a { color: var(--on-brand); text-decoration: underline; font-size: var(--fs-sm); opacity: .85; }

.ciq-signin-main { padding: 40px 40px calc(var(--foot-h) + 32px); display: grid; gap: 28px; align-content: start; }
.ciq-signin-form { display: grid; grid-template-columns: minmax(320px, 420px) minmax(320px, 1fr); gap: 20px; align-items: start; }
.ciq-signin-card .card-body { padding: 28px; }
.ciq-signin-form-title { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.02em; margin: 0; }
.ciq-signin-form-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 4px 0 18px; }
.ciq-input-ico { position: relative; }
.ciq-input-ico > .bi:first-child { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.ciq-input-ico .form-control { padding-left: 36px; min-height: 44px; }
.ciq-input-ico .form-control:has(+ .ciq-eye) { padding-right: 44px; }
.ciq-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--r-sm); display: grid; place-items: center; }
.ciq-eye:hover, .ciq-eye[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.ciq-signin-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 18px; font-size: var(--fs-sm); }
.ciq-signin-btn { min-height: 46px; font-size: var(--fs-md); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ciq-signin-btn .bi { font-size: 22px; }
.ciq-signin-help { margin: 14px 0 0; }
.ciq-signin-card.shake { animation: ciq-shake .4s var(--ease); }
.ciq-signin-card.flash { animation: ciq-flash .8s var(--ease); }
@keyframes ciq-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes ciq-flash { 0% { box-shadow: 0 0 0 0 var(--brand-scrim); } 100% { box-shadow: 0 0 0 12px transparent; } }

.ciq-signin-demo .card-body { padding: 20px 22px; }
.ciq-signin-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ciq-signin-demo-head h3 { margin: 0; font-size: var(--fs-md); }
.ciq-signin-personas { display: grid; gap: 6px; margin-top: 10px; }
.ciq-persona { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); text-align: left; color: var(--text); font: inherit; }
.ciq-persona:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.ciq-persona.is-on { background: var(--brand-soft); border-color: var(--brand); }
.ciq-persona-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--brand); font-size: 14px; }
.ciq-persona-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ciq-persona-text b { font-size: var(--fs-sm); font-weight: 650; }
.ciq-persona-text small { font-size: var(--fs-xs); color: var(--text-muted); }
.ciq-persona code { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text); }

.ciq-signin-features-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ciq-signin-features-head h3 { margin: 0; font-size: var(--fs-md); }
.ciq-signin-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ciq-feature { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.ciq-feature-ico { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 16px; }
.ciq-feature b { font-size: var(--fs-sm); font-weight: 650; }
.ciq-feature small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }

/* the mark draws itself: ring, tail, dot; then the product; then the rest of the hero */
.gm-mark.draw .gm-ring { stroke-dasharray: 220; stroke-dashoffset: 220; animation: gm-draw 1.1s var(--ease) .15s forwards; }
.gm-mark.draw .gm-tail { stroke-dasharray: 160; stroke-dashoffset: 160; animation: gm-draw .8s var(--ease) 1s forwards; }
.gm-mark.draw .gm-dot { transform-origin: -33px 68px; transform: scale(0); animation: gm-pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.75s forwards; }
@keyframes gm-draw { to { stroke-dashoffset: 0; } }
@keyframes gm-pop { to { transform: scale(1); } }
@keyframes gm-in { to { opacity: 1; transform: none; } }
.ciq-intro .intro-2 { opacity: 0; transform: translateY(6px); animation: gm-in .6s var(--ease) 2.2s forwards; }
.ciq-intro .intro-3 { opacity: 0; transform: translateY(6px); animation: gm-in .7s var(--ease) 2.6s forwards; }
@media (prefers-reduced-motion: reduce) { .gm-mark.draw *, .ciq-intro .intro-2, .ciq-intro .intro-3 { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } }

@media (max-width: 991px) {
  .ciq-signin { grid-template-columns: 1fr; }
  .ciq-signin-hero { position: static; height: auto; padding: 24px 20px; }
  .ciq-signin-tenant { margin-top: 0; }
  .ciq-signin-main { padding: 20px 16px calc(var(--foot-h) + 24px); }
  .ciq-signin-form { grid-template-columns: 1fr; }
}

/* =====================================================================
   §G  GRAY MATTER FOOTER (floating) · THEME SWITCHER
   ===================================================================== */
/* 10b-1b walk (Venkat, 01-10-2026): the footer sits BELOW the page's content, in the page's
   flow, never over it. Old: fixed to the window's bottom edge, floating over the last rows
   of every long page (Subject Allotment's EN301 and MA301). */
.gm-foot {
  position: relative; z-index: 1; min-height: var(--foot-h);
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 6px 24px; font-size: var(--fs-xs); color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(8, 12, 18, .06);
}
.gm-foot .gm-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.gm-foot .gm-mark { width: 16px; height: auto; display: block; }
.gm-foot .gm-word { display: flex; flex-direction: column; line-height: 1; }
.gm-foot .gm-word b { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: -0.03em; }
.gm-foot .gm-word b i { font-style: normal; color: #FB2E3C; }
.gm-foot .gm-word small { font-family: var(--font-mono); font-size: 6px; letter-spacing: .32em; color: #FB2E3C; margin-top: 2px; text-transform: uppercase; }
@media (min-width: 992px) { .gm-foot { margin-inline-start: var(--rail-w); } }

/* =====================================================================
   §H  PRINT
   ===================================================================== */
@media print {
  .ciq-sidebar, .ciq-topbar, .gm-foot, .offcanvas, .ciq-apps { display: none !important; }
  .ciq-content { padding: 0; }
  body.ciq-body { background: #fff; color: #000; }
}

/* =====================================================================
   §I  2a LOOK AND FEEL (Venkat, 02-10-2026; L1 to L4)
   The subject palette (10 hues, ordered so that neighbours differ most, because the greedy
   colouring of app/core/subject_colours.py hands out the lowest first: blue, orange, green,
   pink, violet, yellow, cyan, brown, fuchsia, slate; P1 and P2 of the 2a review), the five status tones, the chip, the day
   heading, the timetable grids at 1366 px and the day cards at phone width. Colours live
   only here, in these tokens; app.css refers to them.
   ===================================================================== */
:root {
  /* Studio status pairs (08-10-2026): the same five meanings, in Studio inks. */
  --tone-green-bg: #E4F6EE;   --tone-green-fg: #1E7A57;
  --tone-amber-bg: #FFF2D1;   --tone-amber-fg: #94600E;
  --tone-red-bg: #FFE1D9;     --tone-red-fg: #B3321A;
  --tone-blue-bg: #E3F8FA;    --tone-blue-fg: #1C6E77;
  --tone-neutral-bg: #EEF0F4; --tone-neutral-fg: #596070;

  --subj-1-edge: #1D4ED8;  --subj-1-bg: #DBEAFE;  --subj-1-fg: #1E3A8A;
  --subj-2-edge: #EA580C;  --subj-2-bg: #FFEDD5;  --subj-2-fg: #7C2D12;
  --subj-3-edge: #15803D;  --subj-3-bg: #DCFCE7;  --subj-3-fg: #14532D;
  --subj-4-edge: #DB2777;  --subj-4-bg: #FCE7F3;  --subj-4-fg: #831843;
  --subj-5-edge: #7C3AED;  --subj-5-bg: #EDE9FE;  --subj-5-fg: #4C1D95;
  --subj-6-edge: #CA8A04;  --subj-6-bg: #FEF9C3;  --subj-6-fg: #713F12;
  --subj-7-edge: #0891B2;  --subj-7-bg: #CFFAFE;  --subj-7-fg: #155E75;
  --subj-8-edge: #92400E;  --subj-8-bg: #F3E5D8;  --subj-8-fg: #5C2E0B;
  --subj-9-edge: #A21CAF;  --subj-9-bg: #FAE8FF;  --subj-9-fg: #701A75;
  --subj-10-edge: #475569;  --subj-10-bg: #E2E8F0;  --subj-10-fg: #1E293B;
}
.ciq-subj-1 { --tt: var(--subj-1-edge); --tt-bg: var(--subj-1-bg); --tt-fg: var(--subj-1-fg); }
.ciq-subj-2 { --tt: var(--subj-2-edge); --tt-bg: var(--subj-2-bg); --tt-fg: var(--subj-2-fg); }
.ciq-subj-3 { --tt: var(--subj-3-edge); --tt-bg: var(--subj-3-bg); --tt-fg: var(--subj-3-fg); }
.ciq-subj-4 { --tt: var(--subj-4-edge); --tt-bg: var(--subj-4-bg); --tt-fg: var(--subj-4-fg); }
.ciq-subj-5 { --tt: var(--subj-5-edge); --tt-bg: var(--subj-5-bg); --tt-fg: var(--subj-5-fg); }
.ciq-subj-6 { --tt: var(--subj-6-edge); --tt-bg: var(--subj-6-bg); --tt-fg: var(--subj-6-fg); }
.ciq-subj-7 { --tt: var(--subj-7-edge); --tt-bg: var(--subj-7-bg); --tt-fg: var(--subj-7-fg); }
.ciq-subj-8 { --tt: var(--subj-8-edge); --tt-bg: var(--subj-8-bg); --tt-fg: var(--subj-8-fg); }
.ciq-subj-9 { --tt: var(--subj-9-edge); --tt-bg: var(--subj-9-bg); --tt-fg: var(--subj-9-fg); }
.ciq-subj-10 { --tt: var(--subj-10-edge); --tt-bg: var(--subj-10-bg); --tt-fg: var(--subj-10-fg); }

/* The chip: a coloured left edge, the code, a second line; it wraps, never cut. */
.ciq-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border-radius: var(--r-md); background: var(--tt-bg); color: var(--tt-fg); border-left: 4px solid var(--tt); font-size: var(--fs-sm); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
a.ciq-chip:hover, a.ciq-chip:focus { color: var(--tt-fg); box-shadow: 0 0 0 2px var(--tt); }
.ciq-chip-code { font-weight: 700; }
.ciq-chip-line { font-weight: 500; font-size: var(--fs-xs); }
.ciq-chip .ciq-badge { margin-top: 4px; white-space: normal; }
.ciq-chip + .ciq-chip, .ciq-chip + .ciq-hint { margin-top: 6px; }

/* Timetable grids: fixed columns share the width, so every day shows at 1366 px. */
.tt-grid { table-layout: fixed; width: 100%; }
.tt-grid th.tt-period-h, .tt-grid tbody th.tt-period { width: 112px; padding-left: 12px; padding-right: 8px; }
.tt-grid tbody th.tt-period .tt-time { display: block; white-space: normal; }
.tt-grid th.tt-day { white-space: normal; }

/* A period line (the Attendance Register's Today and Week): period and time, the chip,
   the status. */
.ciq-period-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--tbl-rule); }
.ciq-period-line:last-child { border-bottom: 0; }
.ciq-period-when { font-size: var(--fs-sm); color: var(--text-muted); }
.ciq-period-when b { display: block; color: var(--text); }
.ciq-day-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 16px 0 4px; }
.ciq-day-heading .tt-day-name { font-weight: 700; }
.tt-day-date { display: inline-block; padding: 2px 10px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; }

/* The exam timetable: dates down the side, Morning and Afternoon across. */
.ciq-exam-grid td { vertical-align: top; }
.ciq-exam-grid th.ciq-exam-date { width: 150px; }

/* Phone width (Q8): a timetable becomes one card per day, today first. */
.tt-daycards { display: none; }
@media (max-width: 767.98px) {
  .tt-gridwrap { display: none; }
  .tt-daycards { display: block; }
  .tt-daycard { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; margin-bottom: 12px; background: var(--surface); }
  .tt-daycard.is-today { border-color: var(--brand); }
  .ciq-period-line { grid-template-columns: 72px minmax(0, 1fr); }
}
.ciq-chip-list { display: flex; flex-direction: column; gap: 6px; }

/* F1 of the 2a review (Q8): nothing scrolls sideways at phone width except inside a
   table's own box. A table box is the containing block of what is positioned inside it
   (Tom Select's hidden select), so nothing escapes it and widens the page; form rows wrap. */
.ciq-table-scroll { position: relative; max-width: 100%; }
@media (max-width: 767.98px) {
  .ciq-inline-form, .ciq-toolbar, .ciq-filter-row, .ciq-form-row, .ciq-form-actions { flex-wrap: wrap; }
  .ciq-inline-form .ciq-form-field, .ciq-toolbar .ciq-form-field { min-width: 0; max-width: 100%; }
  .ciq-inline-form .form-control, .ciq-inline-form .form-select { max-width: 100%; }
}

/* =====================================================================
   §J  2a-E THE LEFT EDGE (Venkat, 03-10-2026; an experiment over 806e45a)
   The timetable chip's rounded coloured left edge (4 px, the box's own radius) on every
   card, panel, Home tile and day card of the app: brand teal. Home's "Waiting for you"
   lines carry a tone instead (amber waiting, red overdue or needs action now). Not on
   table rows, form inputs, the sign-in and other auth pages, the Dashboard tiles (their
   own coloured bar since the prototype), or the subject chips (their subject colour).
   ===================================================================== */
:root {
  --edge-w: 4px;
  --edge: var(--brand);
  --tone-amber-edge: #D97706;
  --tone-red-edge: #DC2626;
}
.ciq-edge,
.ciq-body .card,
.ciq-body .ciq-panel,
.ciq-launch,
.tt-daycard { border-left: var(--edge-w) solid var(--edge); }
.ciq-launch:hover { border-left-color: var(--edge); }
/* The sign-in family keeps its plain card. */
.ciq-body .ciq-signin-card, .ciq-body .ciq-signin-demo, .ciq-auth-card { border-left: 1px solid var(--border); }
/* A Waiting line: the chip's shape in its tone, the most urgent first (waiting.py). */
.ciq-edge-list { display: flex; flex-direction: column; gap: 6px; }
.ciq-edge-line { padding: 6px 10px; border-radius: var(--r-md); border-left: var(--edge-w) solid var(--edge); background: var(--surface-2); line-height: 1.35; overflow-wrap: anywhere; }
.ciq-edge-line--amber { --edge: var(--tone-amber-edge); background: var(--tone-amber-bg); }
.ciq-edge-line--red { --edge: var(--tone-red-edge); background: var(--tone-red-bg); }
.ciq-edge-line--amber a { color: var(--tone-amber-fg); }
.ciq-edge-line--red a { color: var(--tone-red-fg); }
/* Stacked cards keep a gap, so their edges never merge into one bar (Venkat, 03-10-2026). */
.ciq-content .card + .card { margin-top: var(--ciq-space-lg); }

/* =====================================================================
   §K  2a-D DENSITY (Venkat, 03-10-2026)
   A typical screen fits one window at 1366x768, for every persona, through the shared
   tokens: the larger spacing steps and the type scale one step down, the stacked-card gap
   10 px, the card, cell, tile and page paddings on tokens. Body text 14 px, labels 12 and
   13 px, colours untouched (D4). Old values beside each.
   ===================================================================== */
:root {
  /* type, one step down (D2): body 15 -> 14; page titles and big numbers 28 -> 21 (1.5x
     body); headings 22 -> 20, 17 -> 16, 36 -> 28. --fs-xs 12 and --fs-sm 13 stay. */
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.3125rem;
  --fs-3xl: 1.75rem;
  /* spacing (D1): the steps from md up, about a third less (12/16/20/24/32 ->
     8/12/16/18/24); xs and sm, the fine detail, stay. */
  --ciq-space-md: 0.5rem;
  --ciq-space-lg: 0.75rem;
  --ciq-space-xl: 1rem;
  --ciq-space-2xl: 1.125rem;
  --ciq-space-3xl: 1.5rem;
  --stack-gap: 10px;        /* between stacked cards and tiles (16) */
  --cell-pad-y: 8px;        /* table cells (14 20) */
  --cell-pad-x: 14px;
  --page-pad-y: 16px;       /* the content area (24 32) */
  --page-pad-x: 24px;
}
.ciq-content { padding: var(--page-pad-y) var(--page-pad-x); }
@media (max-width: 991px) { .ciq-content { padding: 12px 12px 16px; } }
.ciq-page-head { margin-bottom: var(--ciq-space-lg); }
.ciq-page-sub { margin-bottom: var(--ciq-space-lg); }
.ciq-content .card + .card,
.ciq-content .card.mt-3 { margin-top: var(--stack-gap) !important; }
.ciq-content .card.mb-3, .ciq-content .row.mb-3 { margin-bottom: var(--stack-gap) !important; }
.ciq-content .row.g-3 { --bs-gutter-x: var(--stack-gap); --bs-gutter-y: var(--stack-gap); }
.ciq-table th, .table > * > tr > th,
.ciq-table td, .table > * > tr > td { padding: var(--cell-pad-y) var(--cell-pad-x); }
@media (max-width: 767px) {
  .ciq-table th, .ciq-table td, .table > * > tr > th, .table > * > tr > td { padding: 6px 10px; }
}
.ciq-launchpad { margin-bottom: var(--ciq-space-xl); }
.ciq-launchpad-grid { gap: var(--stack-gap); }
.ciq-launch { padding: 10px 14px; }
.ciq-dash-tiles { gap: var(--stack-gap); }
.ciq-dash-tile { padding: var(--ciq-space-lg) var(--ciq-space-xl); }
.ciq-dash-figure { font-size: clamp(1.125rem, 1.4vw, var(--fs-2xl)); }
/* D3: a form row whose fields share one line at desktop width and stack on a phone. */
.ciq-form-row--inline { gap: 0 var(--ciq-space-lg); align-items: flex-start; }
.ciq-form-row--inline > .ciq-form-field { flex: 1 1 14rem; }
.ciq-form-row--inline > .ciq-field--date { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .ciq-form-row--inline > .ciq-form-field, .ciq-form-row--inline > .ciq-field--date { flex: 1 1 100%; max-width: none; }
}
/* D1, table row height: a control inside a table cell (the marks box, a register's
   choice) is 32 px at desktop width (40); a phone keeps 40 px for the finger. */
@media (min-width: 768px) {
  .ciq-table td .form-control, .ciq-table td .form-select,
  .table > * > tr > td .form-control, .table > * > tr > td .form-select { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
}
/* D5 (Venkat, 03-10-2026): the left menu one step tighter at desktop width, every persona:
   an item 30 px tall (44), a sub-item 26 px (36), a group heading's space above 10 px (16);
   the words 14 px for items and sub-items (13) and 11 px for headings (10), the floors of
   the ruling. The phone's drawer keeps 44 px rows for the finger. */
:root {
  --rail-item-h: 30px;
  --rail-sub-h: 26px;
  --rail-fs: 0.875rem;
  --rail-head-fs: 11px;
}
@media (min-width: 992px) {
  .ciq-nav { padding: 8px 10px; }
  .ciq-nav-link { min-height: var(--rail-item-h); margin: 1px 0; font-size: var(--rail-fs); }
  .ciq-nav-sublink { min-height: var(--rail-sub-h); font-size: var(--rail-fs); }
  .ciq-nav-heading { font-size: var(--rail-head-fs); padding: 10px 12px 2px; }
  .ciq-nav-subhead { font-size: var(--rail-head-fs); padding: 6px 12px 2px 22px; }
  .ciq-nav-sub { margin-bottom: 4px; }
}

/* =====================================================================
   §L  10b-2 ONE-STEP ACTIONS (Venkat, 03-10-2026; O1, O2, O4, O5)
   The confirmation line with Undo, the save-on-change row's "Saved" tick, and the
   message box for a refusal. Phone first: every button here is at least 44 px tall; at
   390 px the Undo button sits under the words, full width.
   ===================================================================== */
.ciq-done-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ciq-space-sm) var(--ciq-space-lg); margin-bottom: var(--stack-gap); padding: 8px 12px; border-radius: var(--r-md); border-left: var(--edge-w) solid var(--ok); background: var(--tone-green-bg); color: var(--tone-green-fg); }
.ciq-done-line--undone { border-left-color: var(--tone-neutral-fg); background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.ciq-done-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ciq-done-sent { font-size: var(--fs-sm); }
.ciq-done-undo { margin: 0; }
.ciq-undo-btn { min-height: 44px; min-width: 96px; }
@media (max-width: 575.98px) {
  .ciq-done-undo, .ciq-undo-btn { width: 100%; }
}
/* O4: the row saves on change; its own Save shows only without JavaScript. */
.js .ciq-row-save { display: none; }
.ciq-saved { display: inline-flex; align-items: center; gap: 4px; color: var(--tone-green-fg); font-size: var(--fs-sm); font-weight: 600; }
/* O5: the message box. */
.ciq-refusal { width: min(92vw, 28rem); padding: 20px; border: 1px solid var(--border); border-left: var(--edge-w) solid var(--tone-red-edge); border-radius: var(--r-lg); box-shadow: var(--shadow-3); color: var(--text); background: var(--surface); }
.ciq-refusal::backdrop { background: rgba(16, 24, 40, .45); }
.ciq-refusal p { margin: 0 0 16px; font-size: var(--fs-md); line-height: 1.5; overflow-wrap: anywhere; }
.ciq-refusal-actions { display: flex; justify-content: flex-end; }
.ciq-refusal-actions .btn { min-height: 44px; min-width: 96px; }
/* A decision in its row (Approve, Reject with its reason), and a confirm panel that opens
   in the row (O3): a native <details>, so it works without JavaScript. On a phone each
   button is a full 44 px tap. */
.ciq-row-decide { display: flex; flex-direction: column; gap: 6px; min-width: 12rem; margin: 0; }
.ciq-row-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ciq-confirm > summary { list-style: none; display: inline-flex; align-items: center; }
.ciq-confirm > summary::-webkit-details-marker { display: none; }
.ciq-confirm[open] > summary { margin-bottom: 6px; }
.ciq-confirm-panel { padding: 8px 10px; border-radius: var(--r-md); border-left: var(--edge-w) solid var(--tone-amber-edge); background: var(--tone-amber-bg); color: var(--tone-amber-fg); min-width: 14rem; }
@media (max-width: 767.98px) {
  .ciq-row-buttons .btn, .ciq-confirm > summary.btn, .ciq-confirm-panel .btn { min-height: 44px; }
}
/* A save-on-change row inside a table cell: the control, then "Saved" beside it. */
td > .ciq-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
td > .ciq-save-row .form-select, td > .ciq-save-row .ts-wrapper { flex: 1 1 12rem; min-width: 0; }
/* 10b-2 review (P1): a person picker inside a row keeps one width, focused or not. Tom
   Select hides its text box on blur, the picker narrowed, the row moved under the mouse
   between press and release, and the click on the row's button was lost (older than 10b-2:
   the same on 14df1f8). */
.ciq-toolbar > .ts-wrapper.ciq-person, .ciq-inline-form > .ts-wrapper.ciq-person,
.ciq-save-row > .ts-wrapper.ciq-person { flex: 0 0 auto; width: 18rem; max-width: 100%; }
/* ... and one line, focused or not: the chosen person and the text box share the line
   (the name shortens), so the row's height does not change under the mouse either. */
.ts-wrapper.single.ciq-person .ts-control { flex-wrap: nowrap; overflow: hidden; }
.ts-wrapper.single.ciq-person .ts-control > .item { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.single.ciq-person .ts-control > input { flex: 1 1 2rem; min-width: 2rem; }

/* =====================================================================
   §M  10b-3 MENUS AND HOME (Venkat, 03-10-2026; M2, M3, B9)
   A role heading is a <details> section: its summary is the heading, with the group's
   caret; closed on Home, open on its own screens; one open at a time. Home's daily row of
   tiles, the profile strip and the Waiting line's role tag.
   ===================================================================== */
details.ciq-nav-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
details.ciq-nav-section > summary::-webkit-details-marker { display: none; }
details.ciq-nav-section > summary::after {
  content: ""; margin-left: auto; margin-right: 4px; width: .4em; height: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .55;
}
details.ciq-nav-section[open] > summary::after { transform: rotate(45deg); }
details.ciq-nav-section > summary:hover { color: var(--text); }
.ciq-profile-strip { color: var(--text-muted); margin: 0 0 var(--ciq-space-md); font-size: 13px; }
.ciq-profile-strip b { color: var(--text); font-weight: 700; }
.ciq-role-tag { color: var(--text-faint); font-size: 12px; margin-left: 6px; }
.ciq-daily-tiles { margin-bottom: var(--ciq-space-lg); }
.ciq-insights:empty { display: none; }
.ciq-personal-where { padding: 6px 16px 8px; font-size: 13px; color: var(--text-muted); min-width: 260px; }
.ciq-personal-where dt { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-top: 4px; }
.ciq-personal-where dd { margin: 0; color: var(--text); }
.ciq-apps-filter { margin: 8px 0 12px; max-width: 360px; }
.ciq-apps { max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
.ciq-app-tile[hidden], .ciq-apps-section[hidden] { display: none !important; }

/* =====================================================================
   §N  10b-M MOBILE (Venkat, 03-10-2026; MB1, MB4, MB5)
   Below 768 px: the bottom tab bar (five tabs, each at least 56 px tall), the page padded
   so the bar never covers it; tables marked .ciq-cards-phone become one card per row, each
   cell with its label (data-label); the phone register (one 56 px row a student, a tap
   toggles Absent, a sticky bar with the counts above the tab bar); the day chips.
   Desktop (768 px and up) is unchanged.
   ===================================================================== */
.ciq-tabbar { display: none; }
.ciq-queue-line[hidden] { display: none !important; }
.ciq-queue-line--done { border-left-color: var(--ok, #15803d); }
@media (max-width: 767.98px) {
  .ciq-hide-phone { display: none !important; }
  .ciq-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }
  .ciq-tab {
    flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; padding: 6px 2px;
    color: var(--text-muted); text-decoration: none; background: transparent; border: 0;
    font-size: 12px; line-height: 1.1;
  }
  .ciq-tab-ico { position: relative; font-size: 20px; line-height: 1; }
  .ciq-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ciq-tab.is-active { color: var(--brand); font-weight: 700; }
  .ciq-tab.is-active .ciq-tab-ico { background: var(--brand-soft); border-radius: 12px; padding: 2px 12px; }
  .ciq-tab-dot { position: absolute; top: -2px; right: -6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--danger, #dc2626); border: 2px solid var(--surface); }
  body.ciq-has-tabbar .ciq-main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.ciq-has-tabbar .gm-foot { margin-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* A row that is an action becomes a card. */
  table.ciq-cards-phone, table.ciq-cards-phone tbody, table.ciq-cards-phone tr,
  table.ciq-cards-phone td { display: block; width: 100%; }
  table.ciq-cards-phone thead { display: none; }
  table.ciq-cards-phone tr { border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
  table.ciq-cards-phone td { border: 0; padding: 3px 0; text-align: left; }
  table.ciq-cards-phone td[data-label]::before { content: attr(data-label); display: block;
    font-size: 12px; font-weight: 600; color: var(--text-faint); }
  table.ciq-cards-phone td.ciq-card-actions::before { display: none; }
  table.ciq-cards-phone td.ciq-card-actions .btn,
  table.ciq-cards-phone td.ciq-card-actions button { width: 100%; min-height: 44px; margin-top: 6px; }
  table.ciq-cards-phone td.ciq-card-actions form, table.ciq-cards-phone td.ciq-card-actions input[type=text] { width: 100%; }
  .ciq-table-scroll:has(> table.ciq-cards-phone) { overflow: visible; }

  /* The phone register. */
  table.ciq-register-table thead { display: none; }
  table.ciq-register-table, table.ciq-register-table tbody { display: block; width: 100%; }
  table.ciq-register-table tr { display: flex; align-items: center; min-height: 56px;
    border-bottom: 1px solid var(--border); cursor: pointer; padding: 6px 4px; gap: 8px; }
  table.ciq-register-table td { display: none; border: 0; padding: 0; }
  table.ciq-register-table td.ciq-reg-code { display: block; font-size: 12px; color: var(--text-faint); width: 7.5em; }
  table.ciq-register-table td.ciq-reg-name { display: flex; flex: 1; justify-content: space-between;
    align-items: center; font-size: 15px; }
  .ciq-reg-state { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px;
    background: var(--surface-2, #eef2f6); color: var(--text-muted); }
  tr[data-state="PRESENT"] .ciq-reg-state { background: #dcfce7; color: #166534; }
  tr[data-state="ABSENT"] { background: #fef2f2; }
  tr[data-state="ABSENT"] .ciq-reg-state { background: #fee2e2; color: #991b1b; }
  tr[data-state="ON_LEAVE"] .ciq-reg-state { background: #dbeafe; color: #1e40af; }
  tr[data-on-leave] { cursor: default; }
  .ciq-reg-bar { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5;
    background: var(--surface); border-top: 1px solid var(--border); padding: 8px 0;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ciq-reg-bar .ciq-reg-count { flex: 1 0 100%; font-weight: 700; font-size: 14px; }
  .ciq-reg-bar .btn { flex: 1; min-height: 48px; }

  /* Day chips switch the day in place (Q9). */
  .ciq-daychips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; }
  .ciq-daychip { flex: none; min-height: 44px; min-width: 52px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); font-size: 13px; padding: 0 12px; }
  .ciq-daychip.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
  [data-day-card].ciq-chip-off { display: none !important; }

  /* A card's first line (no label), full-width form controls, the phone-only lines. */
  table.ciq-cards-phone td.ciq-card-head { font-weight: 700; font-size: 15px; }
  table.ciq-cards-phone tfoot, table.ciq-cards-phone tfoot tr, table.ciq-cards-phone tfoot td { display: block; width: 100%; }
  table.ciq-cards-phone tfoot tr { border-left: 4px solid var(--brand); }
  table.ciq-cards-phone td:empty { display: none; }
  table.ciq-cards-phone td.ciq-card-actions select,
  table.ciq-cards-phone td.ciq-card-actions .ts-wrapper { width: 100%; max-width: none; min-height: 44px; }
  table.ciq-cards-phone td.ciq-card-actions summary.btn { display: block; width: 100%; min-height: 44px; margin-top: 6px; }
  .ciq-phone-wide, .ciq-phone-wide.btn { width: 100%; min-height: 44px; }
  .ciq-content .ciq-field--date, .ciq-content .ciq-field--date input { width: 100%; max-width: none; }
  .ciq-content .ciq-field--date input { min-height: 44px; }
  .ciq-today-first { display: flex; flex-direction: column; }
  .ciq-today-first > .ciq-has-classes { order: -1; margin-bottom: var(--stack-gap, 10px); }
  details.ciq-written > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
}
@media (min-width: 768px) {
  .ciq-daychips { display: none; } .ciq-reg-count:empty { display: none; }
  /* The register's status label is the phone row's; on the desktop table the name stands
     alone and the three radio columns say the state (Venkat, 05-10-2026). */
  .ciq-reg-state { display: none; }
  .ciq-phone-only { display: none !important; }
}

/* 10b-M review (Venkat, 04-10-2026): F1 a card's short value sits on its label's line (label
   left, value right); a long value (.ciq-card-long) stays under its label. F2 no zebra
   inside cards or the phone register. F3 a summary button's word centred. F4 every tap
   target on a phone at least 44 px. R1, R2: the top figure, at every width. B1: the
   register's day list as chips. */
.ciq-overall { font-size: 21px; font-weight: 700; margin: 0 0 10px; line-height: 1.2; }
.ciq-overall small { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ciq-figures { display: flex; flex-wrap: wrap; gap: 8px 32px; }
@media (max-width: 767.98px) {
  table.ciq-cards-phone tbody tr:nth-child(even) > td,
  table.ciq-cards-phone tfoot tr > td,
  table.ciq-register-table tbody tr:nth-child(even) > td { background: transparent; }
  table.ciq-cards-phone td[data-label] { display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: baseline; gap: 2px 12px; padding: 2px 0; text-align: right; }
  table.ciq-cards-phone td[data-label]::before { flex: none; display: inline; text-align: left; }
  table.ciq-cards-phone td[data-label] > div, table.ciq-cards-phone td[data-label] > details,
  table.ciq-cards-phone td[data-label] > form { flex: 1 0 100%; text-align: left; }
  table.ciq-cards-phone td[data-label].ciq-card-long { display: block; text-align: left; padding: 3px 0; }
  table.ciq-cards-phone td[data-label].ciq-card-long::before { display: block; }
  table.ciq-cards-phone td.ciq-phone-hide, .ciq-phone-hide { display: none !important; }
  table.ciq-cards-phone tr { padding: 8px 12px; margin-bottom: 8px; }
  /* A card of a few short figures: the heading, then the figures side by side on one line. */
  table.ciq-cards-inline tbody tr { display: flex; flex-wrap: wrap; gap: 0 16px; }
  table.ciq-cards-inline td.ciq-card-head { flex: 1 0 100%; }
  table.ciq-cards-inline td[data-label] { display: inline-flex; width: auto; flex-wrap: nowrap; gap: 4px; }
  table.ciq-cards-phone td.ciq-card-actions summary.btn,
  .ciq-content summary.btn { display: flex; align-items: center; justify-content: center; }
  .ciq-content .form-control, .ciq-content .form-select, .ciq-content .btn,
  .ciq-content summary.btn, .ciq-content .ts-wrapper .ts-control { min-height: 44px; }
  .ciq-content label:has(> input[type=checkbox]), .ciq-content label:has(> input[type=radio]) {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

  /* B1: the day's classes as chips that open their register. */
  .ciq-daychips--classes .ciq-daychip { display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 2px; border-radius: var(--r-md); padding: 6px 12px; min-height: 56px;
    text-decoration: none; color: var(--text); }
  .ciq-daychips--classes .ciq-daychip b { font-size: 13px; }
  .ciq-daychips--classes .ciq-daychip.is-on { background: var(--brand-soft); color: var(--text);
    border-color: var(--brand); border-width: 2px; }
}
@media (min-width: 768px) { .ciq-daychips--classes { display: none; } }

/* =====================================================================================
   §O  2a-1 THE CHART KIT (Venkat, 05-10-2026)
   Small column charts in compact cards, drawn by `_chart.html` from `app/core/charts.py`.
   A branch's or a department's colour is ONE of the eight series tokens below, a campus's
   one of the four campus tokens, by its slot (`series_colours.py`), never by its position. None is red, amber, yellow, orange or green: those are a status.
   A screen sets no chart size of its own.
   ===================================================================================== */
:root {
  --series-1: #2563EB;   /* blue */
  --series-2: #DB2777;   /* pink */
  --series-3: #0891B2;   /* cyan */
  --series-4: #7C3AED;   /* violet */
  --series-5: #92400E;   /* brown */
  --series-6: #475569;   /* slate */
  --series-7: #A21CAF;   /* fuchsia */
  --series-8: #312E81;   /* indigo */
  --series-other: #94A3B8;
  /* The campuses' own four, by campus code order; a fifth repeats the first.
     2a-5 (Venkat, 06-10-2026): four STRONG colours, clearly different: medium-dark, each
     at least 3:1 on white, at least 60 degrees of hue apart, none red, amber or green,
     none a series colour or the brand teal. Outside red, amber and green the wheel keeps
     175 degrees, room for three such colours; the fourth is a dark brown.
     Old (2a-4 polish): blue 400 #60A5FA, violet 400 #A78BFA, fuchsia 400 #E879F9,
     pink 400 #F472B6 (light tints, lighter than every series colour). */
  --campus-1: #4338CA;   /* indigo (hue 244, 7.9:1) */
  --campus-2: #B0127A;   /* magenta (hue 321, 6.5:1) */
  --campus-3: #0F766E;   /* teal (hue 175, 5.5:1) */
  --campus-4: #7B3F00;   /* brown (hue 31, 8.2:1) */
  --chart-h: 140px;        /* the columns' box, the same on every chart */
  --chart-value-h: 18px;   /* the value over a column */
  --chart-label-h: 32px;   /* two lines of 12 px under a column */
}
.ciq-series-1 { --series: var(--series-1); }
.ciq-series-2 { --series: var(--series-2); }
.ciq-series-3 { --series: var(--series-3); }
.ciq-series-4 { --series: var(--series-4); }
.ciq-series-5 { --series: var(--series-5); }
.ciq-series-6 { --series: var(--series-6); }
.ciq-series-7 { --series: var(--series-7); }
.ciq-series-8 { --series: var(--series-8); }
.ciq-series-0 { --series: var(--series-other); }
.ciq-series-brand { --series: var(--brand); }
.ciq-campus-1 { --series: var(--campus-1); }
.ciq-campus-2 { --series: var(--campus-2); }
.ciq-campus-3 { --series: var(--campus-3); }
.ciq-campus-4 { --series: var(--campus-4); }

.ciq-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stack-gap); margin-top: var(--stack-gap); align-items: start; }
@media (max-width: 1199.98px) { .ciq-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ciq-chart-grid { grid-template-columns: minmax(0, 1fr); } }
/* the grid's own gap spaces the cards; the stacked-card margin of §K must not shift one */
.ciq-content .ciq-chart-grid > .card.ciq-chart-card { margin-top: 0 !important; }
.ciq-chart-card { min-width: 0; }
.ciq-chart-title { margin-bottom: 6px; }
.ciq-chart { display: flex; gap: 10px; height: calc(var(--chart-h) + var(--chart-label-h)); }
.ciq-chart--plain { gap: 6px; }
.ciq-chart-group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ciq-chart-cols { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: var(--chart-h); border-bottom: 1px solid var(--border-strong); }
.ciq-chart-col { flex: 1 1 0; min-width: 0; max-width: 44px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ciq-chart-value { height: var(--chart-value-h); line-height: var(--chart-value-h); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ciq-chart-stack { display: flex; flex-direction: column-reverse; width: 100%; height: calc((100% - var(--chart-value-h)) * var(--v) / 100); border-radius: 3px 3px 0 0; overflow: hidden; }
.ciq-chart-seg { flex: 1 0 0; min-height: 2px; background: var(--series); }
.ciq-chart-seg + .ciq-chart-seg { border-bottom: 1px solid var(--surface); }
.ciq-chart-label { height: var(--chart-label-h); padding-top: 3px; max-width: 100%; font-size: 12px; line-height: 14px; color: var(--text-muted); text-align: center; overflow: hidden; overflow-wrap: anywhere; }
.ciq-chart-caption { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.ciq-chart-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.ciq-chart-legend li { display: inline-flex; align-items: center; gap: 5px; }
.ciq-chart-key { width: 10px; height: 10px; border-radius: 2px; background: var(--series); flex: none; }
.ciq-chart-takeaway { margin: 6px 0 0; font-size: 13px; color: var(--text); }
.ciq-chart-all { margin-top: 6px; font-size: 13px; }
.ciq-chart-all > summary { color: var(--brand); cursor: pointer; min-height: 24px; }
.ciq-chart-all .ciq-table-scroll { margin-top: 6px; }
@media (max-width: 767.98px) { .ciq-chart-all > summary { min-height: 44px; display: flex; align-items: center; } }
@media print { .ciq-chart-seg, .ciq-chart-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* =====================================================================================
   §P  2a-2 ANNOUNCEMENTS (Venkat, 05-10-2026)
   One announcement: a title and a short plain text, on Home's box, on the sender's screen
   and under Past announcements. The text keeps the sender's own line breaks.
   ===================================================================================== */
.ciq-announcement { padding: 8px 0; border-top: 1px solid var(--border); }
.ciq-announcement:first-child { border-top: 0; padding-top: 0; }
.ciq-announcement-text { white-space: pre-line; overflow-wrap: anywhere; }

/* =====================================================================
   §Q  2a-3 MY PROGRESS (Venkat, 05-10-2026)
   The student's card on her Home: a row a chip, the tone's word first (the shared status
   label), then one sentence that opens its screen, and under it only what needs saying.
   The SGPA trend is the chart kit's own card, drawn inside this one without a second
   frame. A column lower than the semester before takes the "watch" tone: the ONE place a
   column's colour is a status, and it always carries its number.
   ===================================================================== */
.ciq-insights > .ciq-progress { margin-top: var(--stack-gap); }
.ciq-progress-list { display: flex; flex-direction: column; gap: var(--ciq-space-sm); }
.ciq-progress-chip { display: flex; align-items: flex-start; gap: var(--ciq-space-sm); }
.ciq-progress-chip > .ciq-badge { flex: 0 0 auto; min-width: 5.5rem; text-align: center; }
.ciq-progress-text { min-width: 0; }
.ciq-progress-lines { margin: 2px 0 0; padding-left: 1.1rem; color: var(--ciq-text-muted); font-size: var(--ciq-font-sm); }
.ciq-progress-trends { display: flex; flex-wrap: wrap; gap: var(--stack-gap) 24px; }
.ciq-progress-trend { margin-top: var(--ciq-space-md); flex: 1 1 20rem; max-width: 26rem; min-width: 0; }
.ciq-progress-trend .ciq-chart-card { border: 0; box-shadow: none; }
.ciq-progress-trend .ciq-chart-card::before { display: none; }
.ciq-progress-trend .ciq-chart-card > .card-body { padding: 0; }
.ciq-progress-trend-line { margin-top: var(--ciq-space-sm); }
.ciq-series-watch { --series: var(--warn); }
@media (max-width: 767.98px) {
  .ciq-progress-chip { flex-direction: column; gap: 4px; }
  .ciq-progress-chip > .ciq-badge { min-width: 0; }
}

/* =====================================================================
   §R  2a-4 INSIGHTS (Venkat, 05-10-2026)
   Points to act on reuse the progress card's rows (§Q); a figure tile that opens a
   screen is a plain link in the tile's own look; the insight charts are the kit's.
   ===================================================================== */
.ciq-dash-tile--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ciq-dash-tile--link:hover { text-decoration: none; }
.ciq-insights > .card, .ciq-insights > .ciq-chart-grid { margin-top: var(--stack-gap); }
/* The 2a-4 review: an insight chart's label never breaks mid-word; on a phone a chart
   shows its first six columns (the lowest, or the first age bands) and says so. */
.ciq-insight-charts .ciq-chart-label { overflow-wrap: normal; word-break: keep-all; hyphens: none; white-space: normal; }
.ciq-insight-charts .ciq-chart-card { margin-bottom: 0; }
.ciq-phone-only { display: none; }
@media (max-width: 767.98px) {
  .ciq-insight-charts .ciq-chart-group:nth-child(n+7) { display: none; }
  .ciq-insight-charts .ciq-phone-only { display: block; margin: 4px 0 0; }
}
/* A chart of many columns takes more of the grid, so no label is cut: over 8 columns two
   cells, over 14 the whole row. */
.ciq-insight-chart--wide { grid-column: span 2; }
.ciq-insight-chart--full { grid-column: 1 / -1; }
@media (max-width: 1199.98px) { .ciq-insight-chart--wide { grid-column: 1 / -1; } }

/* =====================================================================================
   §S  2a-5 LOOK (Venkat, 06-10-2026)
   The pie (a donut in SVG, the total in the centre, the slices named beside it with
   their count and share) and the line chart (SVG: a point and its value at each step,
   the round numbers of the scale on the axis, a gap for a missing step). A colour is the
   same class as on a column (`ciq-series-<n>`, `ciq-campus-<n>`); a dropped point takes
   the watch tone (`ciq-series-watch`), the one place a point's colour is a status.
   Desktop type, one step smaller (item 6, measured: the body was already 14 px since
   2a-D at every width; what sat above the 14 px floor comes down): the page title
   21 -> 18 px, a tile's figure at most 18 px (21). The phone keeps its sizes.
   ===================================================================================== */
.ciq-insights--points > .card { margin-bottom: var(--stack-gap); }
.ciq-insights--points { margin-bottom: 0; }
.ciq-pie { display: flex; align-items: center; gap: 14px; min-height: var(--chart-h); }
.ciq-pie-svg { flex: 0 0 auto; width: 132px; height: 132px; }
.ciq-pie-slice { fill: var(--series); stroke: var(--surface); stroke-width: 1; }
.ciq-pie-total { font-family: var(--font-head); font-size: 17px; font-weight: 750; fill: var(--text); letter-spacing: -0.02em; }
.ciq-pie-labels { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; color: var(--text); }
.ciq-pie-labels li { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ciq-pie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ciq-pie-count { font-weight: 700; }
.ciq-pie-pct { color: var(--text-muted); }
.ciq-line { display: block; width: 100%; height: auto; }
.ciq-line-axis, .ciq-line-grid { stroke: var(--border-strong); stroke-width: 1; }
.ciq-line-grid { stroke: var(--border); stroke-dasharray: 2 3; }
.ciq-line-tick, .ciq-line-x { font-size: 10.5px; fill: var(--text-muted); }
.ciq-line-path { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ciq-line-dot { fill: var(--series); stroke: var(--surface); stroke-width: 1; }
.ciq-line-value { font-size: 10px; font-weight: 700; fill: var(--text); }
.ciq-line-x--alt { display: none; }   /* more than ten steps: every other label (the table has every one) */
@media print { .ciq-pie-slice, .ciq-line-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (min-width: 768px) {
  :root { --fs-2xl: 1.125rem; }
  .ciq-dash-figure { font-size: clamp(1rem, 1.2vw, var(--fs-2xl)); }
}

/* =====================================================================================
   §T  2a-6 CLASS TESTS (Venkat's design, 06-10-2026)
   The teacher's paper (a question a form, the options with the answer marked) and the
   student's paper (a question a card, an option a row of at least 44 px, the countdown
   bar); the result's answers, right in the green tone, wrong in the red tone, by the
   edge and the word, never by colour alone.
   ===================================================================================== */
.ciq-ct-tree { display: grid; gap: 6px; }
.ciq-ct-subtopics { margin: 2px 0 0 24px; display: grid; gap: 2px; }
.ciq-ct-check { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.ciq-ct-check input { width: 18px; height: 18px; }
.ciq-radio-row { display: grid; gap: 4px; }
.ciq-ct-question { padding: 12px 0; border-top: 1px solid var(--border); }
.ciq-ct-question:first-of-type { border-top: 0; padding-top: 0; }
.ciq-ct-options { display: grid; gap: 6px; }
.ciq-ct-option { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; }
.ciq-ct-option input[type="radio"] { width: 18px; height: 18px; flex: none; }
.ciq-ct-option--pick { min-height: var(--touch); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
.ciq-ct-option--pick:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ciq-ct-letter { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); font-weight: 700; font-size: var(--fs-xs); flex: none; }
.ciq-ct-text { font-size: var(--fs-md); margin: 0 0 8px; }
.ciq-ct-bar { position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 5; }
.ciq-ct-review { padding-left: 1.2rem; display: grid; gap: 10px; }
.ciq-ct-review-item { padding: 6px 10px; border-left: 4px solid var(--border-strong); border-radius: var(--r-sm); }
.ciq-ct-review-item--right { border-left-color: var(--tone-green-edge); background: var(--tone-green-bg); }
.ciq-ct-review-item--wrong { border-left-color: var(--tone-red-edge); background: var(--tone-red-bg); }

/* =====================================================================
   §J  THE STUDIO LOOK (08-10-2026) — shapes and type, shared with Placeeazee and Fluenzee.
   Loaded last in this file, so it re-skins §D to §I in place; colours still come only
   from the tokens in §A and §I. The rules that keep it coherent:
     · cards are flat white on mist: no border, no shadow, 22px corners;
     · every button, chip and tab is a pill; ink is the default action;
     · coral marks the one live thing (today, the active dot, focus);
     · small labels, table headers and counters are JetBrains Mono capitals.
   ===================================================================== */
::selection { background: var(--peach-2); color: var(--ink); }
:root, [data-bs-theme] { --bs-link-color: var(--coral-text); --bs-link-hover-color: var(--ink); }
a { color: var(--coral-text); }
a:hover { color: var(--ink); }
:focus-visible { outline-color: var(--coral); }

/* type: one face, tight display headings, mono kickers */
body.ciq-body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .ciq-page-title, .ciq-card-title, .ciq-auth-brand { font-weight: 800; letter-spacing: -0.03em; }
h1, .ciq-page-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.04em; }
h3, .ciq-card-title { font-weight: 700; letter-spacing: -0.02em; }
.ciq-nav-heading, .ciq-nav-subhead, .ciq-dash-label, .ciq-context .ciq-field-label, .ciq-app-lvl {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.ciq-nav-heading { font-size: 10.5px; }
.ciq-code, code, .ciq-persona code { font-family: var(--font-mono); }

/* buttons: pills; ink primary, mist secondary, coral for the live moment */
.btn { --bs-btn-border-radius: var(--r-full); --bs-btn-font-weight: 700; --bs-btn-padding-x: 1.15rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { --bs-btn-border-radius: var(--r-full); --bs-btn-padding-x: .85rem; min-height: 32px; }
.btn-lg { min-height: 52px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-secondary, .btn-light { --bs-btn-bg: var(--mist); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--border); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--border); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--mist); --bs-btn-disabled-border-color: transparent; }
.btn-outline-secondary { --bs-btn-bg: transparent; --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--mist); --bs-btn-hover-border-color: var(--border); }
.btn-outline-primary { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ink); --bs-btn-active-color: #fff; }
.btn-warning { --bs-btn-bg: var(--coral); --bs-btn-border-color: var(--coral); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--peach-2); --bs-btn-hover-border-color: var(--peach-2); --bs-btn-hover-color: var(--ink); }
.btn-danger, .btn-outline-danger:hover { --bs-btn-bg: var(--danger-soft); --bs-btn-border-color: transparent; --bs-btn-color: var(--danger); --bs-btn-hover-bg: var(--peach-2); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--danger); }
.btn-link { --bs-btn-color: var(--coral-text); --bs-btn-hover-color: var(--ink); text-decoration: none; }

/* inputs: mist wells with no border; focus is an ink border on white */
.form-control, .form-select { background-color: var(--mist); border-color: transparent; border-width: 1.5px; border-radius: var(--r-md); min-height: 42px; }
.form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-scrim); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--text-muted); }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: var(--r-sm); }
.ts-wrapper .ts-control { background-color: var(--mist) !important; border-color: transparent !important; border-radius: var(--r-md) !important; min-height: 42px; }
.ts-wrapper.focus .ts-control { background-color: var(--surface) !important; border-color: var(--ink) !important; box-shadow: 0 0 0 3px var(--brand-scrim) !important; }
.ts-dropdown { border-radius: var(--r-md); border-color: var(--border); box-shadow: var(--shadow-3); }
.ts-dropdown .active { background: var(--mist); color: var(--ink); }

/* cards and panels: flat white on mist */
.card { --bs-card-border-color: transparent; --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: var(--r-lg); box-shadow: none; }
.card-header { border-bottom: 1px solid var(--border); }
.card-footer { border-top: 1px solid var(--border); }
.ciq-panel, .ciq-perms { border-color: transparent; border-radius: var(--r-lg); }
.ciq-empty { border-radius: var(--r-lg); }
.modal { --bs-modal-border-color: transparent; --bs-modal-border-radius: var(--r-xl); --bs-modal-box-shadow: var(--shadow-3); }
.dropdown-menu { --bs-dropdown-border-color: transparent; --bs-dropdown-box-shadow: var(--shadow-3); --bs-dropdown-link-active-bg: var(--ink); box-shadow: var(--shadow-3); padding: 6px; }
.dropdown-item { border-radius: var(--r-sm); }
.alert { border: 0; border-radius: var(--r-md); }
.alert-success { --bs-alert-color: var(--ok); }
.alert-warning { --bs-alert-color: var(--warn); }
.alert-danger  { --bs-alert-color: var(--danger); }
.alert-info, .alert-primary { --bs-alert-color: var(--info); }
.ciq-warn, .ciq-memo { border-inline-start: 0; border-radius: var(--r-md); }
.ciq-warn { color: var(--warn); }

/* tabs and filter chips: a mist track, the chosen one ink */
.nav-tabs { --bs-nav-tabs-border-color: transparent; --bs-nav-tabs-link-active-bg: var(--ink); --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-border-color: transparent; --bs-nav-link-hover-color: var(--ink); gap: 4px; }
.nav-tabs .nav-link { border-radius: var(--r-full); border: 0; font-weight: 600; font-size: var(--fs-sm); }
.nav-tabs .nav-link:hover:not(.active) { background: var(--mist); }
.nav-pills { --bs-nav-pills-border-radius: var(--r-full); --bs-nav-pills-link-active-bg: var(--ink); }
.ciq-chip-btn, .ciq-filter-tab { border-color: transparent; background: var(--mist); font-weight: 600; }
.ciq-chip-btn:hover, .ciq-filter-tab:hover { background: var(--border); }
.ciq-filter-tab--on, .ciq-chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ciq-badge { font-weight: 600; }
.badge { border-radius: var(--r-full); font-weight: 600; }

/* tables: mono kicker headers, hairline rows, roomy cells, a white box on mist */
:root {
  --tbl-head-bg: var(--surface-2);
  --tbl-head-fg: var(--text-muted);
  --tbl-head-rule: var(--border);
  --tbl-rule: var(--mist);
  --tbl-zebra: var(--surface);
  --tbl-hover: var(--surface-2);
  --tbl-foot-bg: var(--surface-2);
}
.ciq-table-scroll { border: 0; border-radius: var(--r-lg); }
.ciq-table th, .table > * > tr > th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; border-bottom-width: 1px; }
.ciq-table th + th, .ciq-table td + td, .table > * > tr > th + th, .table > * > tr > td + td { border-left: 0; }
.ciq-table tfoot td, .table > tfoot > tr > td, .ciq-table tr[id$="-total"] td { border-top: 1px solid var(--border); }

/* the shell: mist page, a white rail with ink pills, the top bar on mist */
.ciq-sidebar { background: var(--surface); border-right: 0; }
.ciq-sidebar-brand { border-bottom: 0; }
.ciq-sidebar-brand .ciq-brand-mark { background: var(--ink); color: #fff; border-radius: var(--r-sm); }
.ciq-sidebar-brand .ciq-brand-word { font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.03em; }
.ciq-nav-link { border-radius: var(--r-full); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.ciq-nav-link:hover { background: var(--mist); color: var(--ink); }
.ciq-nav-link.is-active, details.ciq-nav-group[open] > summary.ciq-nav-link { background: var(--ink); color: #fff; }
details.ciq-nav-group[open] > summary::after { color: rgba(255, 255, 255, .7); }
.ciq-nav-sublink { border-radius: var(--r-full); color: var(--text-muted); font-weight: 500; }
.ciq-nav-sublink:hover { background: var(--mist); color: var(--ink); }
.ciq-nav-sublink.is-active { background: var(--mist); color: var(--ink); font-weight: 700; }
.ciq-nav-sublink.is-active .ciq-nav-dot { background: var(--coral); opacity: 1; }
.ciq-soon-tag { font-family: var(--font-mono); font-weight: 600; background: var(--mist); }
.ciq-topbar { background: var(--bg); border-bottom: 0; }
.ciq-topbar-institute .name { font-weight: 800; letter-spacing: -0.02em; }
.ciq-identity { background: var(--surface); }

/* dashboard tiles: flat, pastel-tinted in turn, big tight numbers */
.ciq-dash-tile { border: 0; box-shadow: none; border-radius: var(--r-lg); padding: 18px 20px; }
.ciq-dash-tile::before { display: none; }
.ciq-dash-tile:hover { box-shadow: var(--shadow-2); }
.ciq-dash-label { font-size: 10.5px; }
.ciq-dash-figure { font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ciq-bar { background: var(--mist); }
.ciq-bar-fill { background: var(--ink); }
.ciq-col-track { background: var(--mist); }
.ciq-col-fill { background: var(--ink); }
.ciq-col-value { font-family: var(--font-mono); }

/* launchers, app pages, icon tiles: mist squares with ink glyphs */
.ciq-launch, .ciq-feature { border: 0; box-shadow: none; }
.ciq-launch:hover { border-color: transparent; box-shadow: var(--shadow-2); }
.ciq-launch-ico, .ciq-feature-ico, .ciq-app-ico, .ciq-page-ico { background: var(--mist); color: var(--ink); border-radius: var(--r-md); }
.ciq-launch-text b, .ciq-feature b { font-weight: 700; letter-spacing: -0.01em; }
.ciq-app-head-ico { background: var(--ink); box-shadow: none; }
.ciq-apps { border: 0; }
.ciq-apps-btn:hover, .ciq-apps-btn.is-open { background: var(--surface); color: var(--ink); border-color: transparent; }
.ciq-app-tile:hover { background: var(--mist); border-color: transparent; }
.ciq-app-tile.is-active { background: var(--mist); border-color: var(--ink); }
.ciq-screen { border: 0; background: var(--surface); }
.ciq-screen:hover { background: var(--ink); color: #fff; border-color: transparent; }
.ciq-screen:hover .ciq-screen-go { color: #fff; }
.ciq-screen-ico, .ciq-persona-ico { background: var(--mist); border: 0; color: var(--ink); }
.ciq-persona { border: 0; background: var(--mist); }
.ciq-persona:hover { background: var(--border); border-color: transparent; }
.ciq-persona.is-on { background: var(--coral-soft); box-shadow: inset 0 0 0 2px var(--coral); }

/* timetables: today is the live thing, so it is coral */
.tt-week { border: 0; background: var(--surface); }
.tt-week .bi { color: var(--coral); }
.tt-grid th.tt-day.is-today .tt-day-date, .tt-day-date.is-today { background: var(--coral); color: var(--ink); }
.tt-grid td.tt-cell.is-today { background: var(--coral-soft) !important; }
.tt-daycard { border: 0; }
.tt-daycard.is-today { box-shadow: inset 0 0 0 2px var(--coral); }
.ciq-chip { border-radius: var(--r-sm); }

/* sign-in: an ink hero panel beside the white form card, on mist */
.ciq-auth-main { background: var(--bg); }
.ciq-auth-card { border: 0; box-shadow: none; }
.ciq-signin-hero { background: var(--ink); border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.ciq-signin-what li::marker { color: var(--coral); }
.ciq-signin-mark { background: var(--ink-2); border-color: var(--ink-line); }
.ciq-signin-title { font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ciq-signin-tenant { background: var(--ink-2); border-color: var(--ink-line); }
.ciq-signin-card, .ciq-signin-demo { border: 0; }
.ciq-signin-form-title { font-weight: 800; letter-spacing: -0.04em; font-size: var(--fs-2xl); }
.ciq-eye:hover, .ciq-eye[aria-pressed="true"] { background: var(--mist); color: var(--ink); }
@media (max-width: 991px) { .ciq-signin-hero { border-radius: 0 0 var(--r-xl) var(--r-xl); } }

/* footer: quiet, on mist */
.gm-foot { background: var(--bg); border-top: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }


/* =====================================================================
   §K  THE PLACEEAZEE LAYOUTS (08-10-2026) — the same shell, sign-in and Home as
   Placeeazee (pr-studio: studio-app.css, botInterview.css, authStudio.css):
     · a floating white rail (14px off the edges, 32px corners) with a Collapse pill,
       the brand, a user card, mono section labels, icon squares, chevrons, an ink
       active pill, and Change password / Sign Out at its foot;
     · the sign-in page: a logo bar, a peach hero card, a white card;
     · Home: a peach greeting hero, then numbered white sections of pastel tool cards.
   Values are Placeeazee's own (sizes in px as there).
   ===================================================================== */
:root { --rail-w: 300px; --pz-rail: 272px; --peach-muted: #7A6A63; --lilac: #EEE9FF; }
html.ciq-rail-collapsed { --rail-w: 104px; --pz-rail: 76px; }

/* ---- the two-tone wordmark (Placeeazee: navy word, coral gradient tail) ---- */
.pz-zee { background: linear-gradient(90deg, #FF6A4D, #FF8A5C); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- the rail ---- */
.ciq-sidebar { background: var(--surface); }
.ciq-sidebar-fixed {
  top: 14px; bottom: 14px; left: 14px; width: var(--pz-rail);
  border-radius: 32px; padding: 18px 14px 14px; gap: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(17, 20, 27, .03); transition: width var(--t-med) var(--ease);
}
.offcanvas.ciq-sidebar { padding: 16px; gap: 14px; display: flex; flex-direction: column; }
.ciq-rail-collapse {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; flex: none;
  border: 0; border-radius: var(--r-full); background: var(--mist); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.ciq-rail-collapse:hover { background: var(--border); color: var(--ink); }
.ciq-rail-collapse .bi { font-size: 14px; }
.ciq-sidebar-brand { flex-direction: row; align-items: center; gap: 10px; padding: 2px 4px; min-height: 0; height: auto; border: 0; flex: none; }
.ciq-sidebar-brand .ciq-brand-mark { width: 42px; height: 42px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; flex: none; }
.ciq-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ciq-sidebar-brand .ciq-brand-word { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: -0.04em; color: #141B34; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ciq-brand-by { font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ciq-rail-user {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 10px; align-items: center; flex: none;
  padding: 10px 12px; border-radius: 22px; background: var(--mist);
}
.ciq-rail-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; }
.ciq-rail-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ciq-rail-user-name { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ciq-rail-user-role { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ciq-sidebar .ciq-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 2px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ciq-nav-heading { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; color: var(--text-muted); padding: 10px 8px 6px; }
.ciq-nav-link {
  min-height: 44px; padding: 7px 12px 7px 8px; margin: 2px 0; border-radius: var(--r-full); gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.ciq-nav-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--mist); color: var(--ink); flex: none; opacity: 1; }
.ciq-nav-ico .bi { font-size: 15px; }
.ciq-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ciq-nav-link::after { content: "\F285"; font-family: "bootstrap-icons"; font-size: 12px; color: var(--text-faint); margin-left: auto; }
.ciq-nav-link:hover { background: var(--mist); color: var(--ink); }
.ciq-nav-link:hover .ciq-nav-ico { background: var(--surface); }
.ciq-nav-link.is-active, details.ciq-nav-group[open] > summary.ciq-nav-link.is-active { background: var(--ink); color: #fff; }
.ciq-nav-link.is-active .ciq-nav-ico { background: rgba(255, 255, 255, .14); color: #fff; }
a.ciq-nav-link.is-active::after { color: rgba(255, 255, 255, .7); }
details.ciq-nav-group[open] > summary.ciq-nav-link { background: transparent; color: var(--ink); }
details.ciq-nav-group[open] > summary.ciq-nav-link:hover { background: var(--mist); }
details.ciq-nav-group[open] > summary::after { color: var(--text-faint); }
details.ciq-nav-group[open] > summary.ciq-nav-link.is-active::after { color: rgba(255, 255, 255, .7); }
.ciq-nav-sub { padding-left: 22px; margin-bottom: 6px; }
.ciq-nav-sublink { min-height: 36px; padding: 0 12px; font-size: 14px; }
.ciq-rail-foot { display: flex; flex-direction: column; gap: 8px; flex: none; }
.ciq-rail-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px;
  border: 0; border-radius: var(--r-full); background: var(--mist); color: var(--ink);
  font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ciq-rail-btn:hover { background: var(--border); color: var(--ink); }
.ciq-rail-signout { background: var(--peach); color: var(--coral-text); }
.ciq-rail-signout:hover { background: var(--peach-2); color: var(--coral-text); }

/* the rail, collapsed to icons (desktop) */
html.ciq-rail-collapsed .ciq-sidebar-fixed { padding: 18px 10px 14px; }
html.ciq-rail-collapsed .ciq-sidebar-fixed :is(.ciq-rail-collapse-label, .ciq-brand-text, .ciq-rail-user-text, .ciq-nav-heading, .ciq-nav-label, .ciq-soon-tag, .ciq-rail-btn-label, .ciq-nav-sub) { display: none; }
html.ciq-rail-collapsed .ciq-sidebar-fixed :is(.ciq-rail-collapse, .ciq-sidebar-brand, .ciq-nav-link, .ciq-rail-btn) { justify-content: center; padding-left: 0; padding-right: 0; }
html.ciq-rail-collapsed .ciq-sidebar-fixed .ciq-rail-user { grid-template-columns: 38px; justify-content: center; padding: 8px 0; }
html.ciq-rail-collapsed .ciq-sidebar-fixed a.ciq-nav-link::after,
html.ciq-rail-collapsed .ciq-sidebar-fixed details.ciq-nav-group > summary::after { display: none; }
html.ciq-rail-collapsed .ciq-sidebar-fixed .ciq-nav-link { gap: 0; }

/* the top bar: on a desktop the rail holds who you are and Sign Out, so the bar keeps
   the launcher and the institute; below 992 px it carries everything, as before. */
.ciq-topbar { background: transparent; padding: 14px 36px 0; min-height: 0; }
.ciq-topbar-institute .name { font-size: 15px; color: var(--text-muted); font-weight: 600; letter-spacing: 0; }
.ciq-apps-btn { background: var(--surface); color: var(--ink); border-radius: var(--r-full); }
@media (min-width: 992px) {
  .ciq-topbar .ciq-context { display: none; }
  .gm-foot { margin-inline-start: var(--rail-w); }
  .ciq-apps { left: var(--rail-w); top: 64px; border-radius: 0 0 var(--r-xl) var(--r-xl); }
}
.ciq-content { padding: 18px 36px 48px; max-width: 1640px; }
.ciq-main { transition: margin-left var(--t-med) var(--ease); }
@media (max-width: 991px) {
  .ciq-topbar { background: var(--surface); padding: 10px 16px; }
  .ciq-content { padding: 18px 16px 40px; }
}

/* ---- shared Studio blocks: bubble, pill, facts, headline, sections, tool cards ---- */
.pz-bubble { padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.4; font-weight: 500; }
.pz-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); max-width: 100%; }
.pz-dot { width: 8px; height: 8px; border-radius: 50%; background: #35D39A; flex: none; }
.pz-dot.is-off { background: var(--coral); }
.pz-h1 { margin: 0; font-weight: 800; font-size: clamp(40px, 4.4vw, 64px); line-height: .92; letter-spacing: -.045em; text-wrap: balance; color: var(--ink); }
.pz-lede { margin: 0; max-width: 540px; font-size: 17px; line-height: 1.5; color: var(--peach-muted); text-wrap: pretty; }
.pz-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pz-facts > div { padding: 10px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .7); font-size: 14px; white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.pz-facts dt { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pz-facts dd { margin: 0; }
.pz-cta { display: inline-flex; align-self: flex-start; align-items: center; height: 54px; padding: 0 28px; border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.pz-cta:hover { background: var(--ink-2); color: #fff; }
.pz-section { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: var(--r-xl); background: var(--surface); margin-bottom: 18px; }
.pz-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pz-h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.pz-sec-note { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.pz-num { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: none; }
.pz-num-1 { background: #FFE1D6; color: var(--coral-ink); }
.pz-num-2 { background: #FFF1CC; color: var(--yellow-ink); }
.pz-num-3 { background: #DDF6F8; color: var(--cyan-ink); }
.pz-num-4 { background: var(--violet); color: var(--violet-ink); }
.pz-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pz-tool {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; min-height: 170px;
  border-radius: 22px; color: var(--ink); text-decoration: none; text-align: left;
  transition: transform .18s, box-shadow .18s;
}
a.pz-tool:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 20, 27, .08); color: var(--ink); text-decoration: none; }
.pz-tint-0 { background: var(--violet); }
.pz-tint-1 { background: var(--cyan); }
.pz-tint-2 { background: var(--mint); }
.pz-tint-3 { background: var(--yellow); }
.pz-tint-4 { background: var(--peach); }
.pz-tint-5 { background: var(--lilac); }
.pz-tool-top { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.pz-tool-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .75); font-size: 21px; color: var(--ink); }
.pz-tool-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-full); background: var(--surface); color: var(--coral-text); }
.pz-tool .ciq-launch-text { display: flex; flex-direction: column; gap: 6px; }
.pz-tool-title { font-size: 19px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; }
.pz-tool-meta { font-size: 13px; color: #3D4352; line-height: 1.4; }
.pz-tool-go { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14px; }

/* ---- Home: the greeting hero ---- */
.pz-hero { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 40px 48px; border-radius: 40px; background: var(--peach); margin-bottom: 18px; overflow: hidden; }
.pz-hero-host { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pz-hero-host .pz-bubble { align-self: stretch; }
.pz-hero-mark { width: 150px; color: var(--ink); filter: drop-shadow(0 18px 24px rgba(17, 20, 27, .12)); }
.pz-hero-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.pz-hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pz-hero-copy .ciq-page-sub { font-size: 17px; }
#home-waiting, #home-substitutions, #home-marks, #home-duties, #home-cancellations { border-radius: var(--r-xl); }
#home-waiting .card-body, #home-substitutions .card-body { padding: 24px 28px; }

/* ---- the sign-in page ---- */
.ciq-auth-main:has(.pz-auth) { display: block; padding: 0; min-height: 100vh; background: var(--bg); }
.pz-auth { min-height: 100vh; padding-bottom: 24px; }
.pz-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 36px; }
.pz-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.pz-logo:hover { color: var(--ink); }
.pz-logo-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.03em; }
.pz-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.pz-logo-word { font-weight: 800; font-size: 22px; letter-spacing: -.04em; color: #141B34; white-space: nowrap; }
.pz-logo-by { font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.pz-auth-tenant { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-full); background: var(--surface); font-size: 14px; font-weight: 700; color: var(--ink); }
.pz-auth-tenant img { height: 24px; width: auto; }
.pz-auth-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 36px 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 18px; align-items: stretch; }
.pz-auth-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 36px 44px; border-radius: 40px; background: var(--peach); }
.pz-auth-hero .pz-bubble { align-self: stretch; }
.pz-auth-mark { align-self: center; width: 170px; padding: 18px 0 8px; color: var(--ink); filter: drop-shadow(0 18px 24px rgba(17, 20, 27, .14)); }
.pz-auth-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.pz-auth-card { display: flex; flex-direction: column; gap: 14px; padding: 36px 34px; border-radius: var(--r-xl); background: var(--surface); }
.pz-auth-title { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.pz-auth-form { display: flex; flex-direction: column; gap: 8px; }
.pz-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 0; }
.pz-input.form-control { height: 52px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--mist); font-size: 15px; }
.pz-input.form-control:focus { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px rgba(17, 20, 27, .08); }
.pz-password { position: relative; }
.pz-password .pz-input { padding-right: 84px; }
.pz-show { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-full); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer; }
.pz-show:hover { background: var(--border); }
.pz-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; font-size: 13px; }
.pz-forgot { color: var(--text-muted); }
.pz-submit-row { display: flex; gap: 8px; margin-top: 6px; }
.pz-submit, .pz-submit-arrow { height: 54px; border: 0; border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .18s; }
.pz-submit { flex: 1; }
.pz-submit:hover:not(:disabled) { background: var(--ink-2); }
.pz-submit-arrow { width: 54px; flex: none; background: var(--coral); color: var(--ink); font-size: 20px; }
.pz-submit-arrow:hover { background: var(--peach-2); }
.pz-submit:disabled { opacity: .45; cursor: not-allowed; }
.pz-legal { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.pz-demo { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.pz-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pz-auth-inside { max-width: 1180px; margin: 0 auto; width: calc(100% - 72px); }
.pz-auth-inside .pz-tool { min-height: 0; }
.pz-auth-card.shake { animation: ciq-shake .4s var(--ease); }
.pz-auth-card.flash { animation: ciq-flash .8s var(--ease); }

@media (max-width: 1000px) {
  .pz-hero { grid-template-columns: 1fr; padding: 26px 20px; }
  .pz-hero-mark { width: 110px; }
}
@media (max-width: 900px) {
  .pz-auth-main { grid-template-columns: 1fr; padding: 8px 16px 18px; }
  .pz-auth-hero { padding: 24px; }
  .pz-auth-inside { width: calc(100% - 32px); }
}
@media (max-width: 768px) {
  .pz-auth-hero { display: none; }
  .pz-auth-top { padding: 14px 16px; }
  .pz-logo-by, .ciq-brand-by { display: none; }
  .pz-auth-card { padding: 24px 18px; }
  .pz-auth-title { font-size: 32px; }
  .pz-section { padding: 20px 16px; }
  .pz-h2 { font-size: 22px; }
  .pz-sec-note { margin-left: 0; }
}
@media print { .ciq-rail-foot, .ciq-rail-collapse { display: none !important; } .pz-hero, .pz-section { background: #fff; } }
.pz-sec-head.ciq-launchpad-head { justify-content: flex-start; margin-bottom: 0; }
.ciq-topbar-institute { flex-direction: row; align-items: center; gap: 10px; }
.ciq-topbar-institute .ciq-sidebar-logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; padding: 6px 12px; border-radius: var(--r-full); background: var(--surface); }
.ciq-sidebar-brand .ciq-brand-word { font-size: 18px; }


/* =====================================================================
   §L  THE DASHBOARD (08-10-2026) — Placeeazee's layout: a peach hero with the filters and
   a "Needs attention" panel, then numbered white sections; charts are rounded mist panels
   side by side, one hue per chart (validated as a set: CVD and normal-vision separation
   pass; the yellow's 2.4:1 against white is relieved by the printed value on every bar).
   ===================================================================== */
:root {
  --chart-coral: #FF5B3A;
  --chart-cyan: #1C9AA6;
  --chart-violet: #6B55D6;
  --chart-yellow: #D9970F;
}

/* the top bar scrolls away with the page on a desktop; it no longer sits over the content */
@media (min-width: 992px) { .ciq-topbar { position: static; } }

/* hero */
.dash-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: stretch; }
.dash-hero:not(:has(.dash-attention)) { grid-template-columns: 1fr; }
.dash-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: 0; min-width: 0; }
.dash-hero-copy .pz-h1 { font-size: clamp(44px, 5vw, 72px); }
.dash-filters { width: 100%; }
.dash-filters .ciq-screen-filter { display: inline-flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .7); margin: 0; }
.dash-filters .ciq-form-field label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; display: block; }
.dash-filters .form-select { background-color: var(--surface); min-width: 190px; }
.dash-attention { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 28px; background: var(--ink); color: #fff; }
.dash-attention-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark, #C3C8D4); }
.dash-attention-total { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.dash-attention-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-attention-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.dash-attention-list li b { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.dash-attention-list li.is-zero { opacity: .55; }
.dash-swatch { width: 10px; height: 10px; border-radius: 3px; }
.dash-swatch.is-coral { background: var(--chart-coral); }
.dash-swatch.is-violet { background: #A595F5; }
.dash-swatch.is-cyan { background: #5FD3DE; }
.dash-swatch.is-yellow { background: #FFC94D; }

/* sections and tiles */
.dash-sec .ciq-dash-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dash-sec .ciq-dash-tile { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 20px; border-radius: 22px; }
.dash-sec .ciq-dash-figure { font-size: 40px; line-height: 1; order: 1; }
.dash-sec .ciq-dash-label { order: 0; font-size: 11px; color: var(--ink); opacity: .75; }
.dash-sec .ciq-dash-tile .ciq-hint { order: 2; margin-top: auto; color: #3D4352; font-size: 12.5px; line-height: 1.4; }
.dash-sec .ciq-note { border-radius: var(--r-md); }

/* chart panels */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.dash-charts:empty { display: none; }
.dash-chart { --tone: var(--chart-coral); margin: 0; padding: 22px 22px 18px; border-radius: 22px; background: var(--mist); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-tone-coral { --tone: var(--chart-coral); }
.dash-tone-cyan { --tone: var(--chart-cyan); }
.dash-tone-violet { --tone: var(--chart-violet); }
.dash-tone-yellow { --tone: var(--chart-yellow); }
.dash-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-chart-head .ciq-card-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.dash-chart-total { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-chart > .ciq-hint { margin: 0 0 10px; }
.dash-chart .ciq-bars { gap: 2px; }
.dash-chart .ciq-bar-row { grid-template-columns: minmax(5.5rem, 9rem) minmax(0, 1fr) 4.5rem; gap: 12px; padding: 7px 10px; margin: 0 -10px; border-radius: 12px; transition: background .12s; }
.dash-chart .ciq-bar-row:hover { background: var(--surface); }
.dash-chart .ciq-bar-label { font-size: 13.5px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.dash-chart .ciq-bar { height: 12px; border-radius: var(--r-full); background: var(--surface); overflow: hidden; }
.dash-chart .ciq-bar-row:hover .ciq-bar { background: var(--mist); }
.dash-chart .ciq-bar-fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--tone); min-width: 4px; }
.dash-chart .ciq-bar-value { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.dash-chart .ciq-bar-value small { font-size: 11px; font-weight: 500; color: var(--text-muted); min-width: 2.4em; text-align: right; }

/* SGPA columns */
.dash-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: end; height: 220px; padding-top: 6px; }
.dash-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.dash-col-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.dash-col-track { display: flex; align-items: flex-end; width: 100%; max-width: 64px; flex: 1; border-radius: 14px; background: var(--surface); overflow: hidden; }
.dash-col-fill { display: block; width: 100%; min-height: 4px; border-radius: 14px; background: var(--tone); }
.dash-col:hover .dash-col-fill { filter: brightness(1.08); }
.dash-col-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* intake meter */
.dash-meter { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 22px; background: var(--mist); }
.dash-meter-head { display: flex; align-items: baseline; gap: 10px; }
.dash-meter-head b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.dash-meter-head span { color: var(--text-muted); font-size: 14px; }
.dash-meter-track { display: block; height: 14px; border-radius: var(--r-full); background: var(--surface); overflow: hidden; }
.dash-meter-fill { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, #FF6A4D, #FF8A5C); }

@media (max-width: 1000px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-charts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-chart .ciq-bar-row { grid-template-columns: minmax(4rem, 6rem) minmax(0, 1fr) 4rem; gap: 8px; }
  .dash-filters .form-select { min-width: 0; }
  .dash-attention-total { font-size: 48px; }
}
@media print {
  .dash-attention, .dash-chart, .dash-meter { background: #fff; color: #000; border: 1px solid #000; }
}
.dash-sec .ciq-dash-figure { font-size: clamp(28px, 2.4vw, 40px); white-space: nowrap; }
/* the identity menu toggle: no caret line under the name when the top bar wraps */
.ciq-identity.dropdown-toggle::after { display: none; }
.ciq-identity { border: 0; background: var(--mist); }
.pz-tool-title b { font-weight: inherit; }


/* =====================================================================
   §M  EVERY OTHER PAGE (08-10-2026) — the Placeeazee layout applied through the shared
   pieces every screen is built from, so no template changes and no markup a test reads:
     · the page heading (`.ciq-page-head`, or a bare title with its subtitle) becomes the
       peach hero band with the big tight title;
     · each card becomes a white 32px section, its first heading numbered like
       Placeeazee's "1 Your tools" (CSS counters: the HTML is untouched);
     · a filter bar standing on the page becomes a white strip; field labels are mono
       capitals; empty states are mist panels; notes are pastel.
   Home and the Dashboard carry their own heroes and are left out by construction (their
   titles are not direct children of the content column).
   ===================================================================== */

/* ---- the page heading: a peach band ---- */
.ciq-content { counter-reset: ciq-sec; }
.ciq-content > .ciq-page-head,
.ciq-content > h1.ciq-page-title {
  background: var(--peach); margin: 0 0 18px; padding: 36px 40px; border-radius: 40px;
}
.ciq-content > .ciq-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.ciq-content > .ciq-page-head > div:first-child { min-width: 0; }
.ciq-content .ciq-page-title { font-size: clamp(32px, 3.4vw, 52px); font-weight: 800; line-height: .98; letter-spacing: -.045em; text-wrap: balance; color: var(--ink); margin: 0; }
.ciq-content > .ciq-page-head .ciq-page-sub,
.ciq-content > h1.ciq-page-title + .ciq-page-sub { font-size: 16px; line-height: 1.5; color: var(--peach-muted); max-width: 72ch; text-wrap: pretty; }
.ciq-content > .ciq-page-head .ciq-page-sub { margin: 12px 0 0; }
/* a bare title and the subtitle under it read as one band */
.ciq-content > h1.ciq-page-title:has(+ .ciq-page-sub) { margin-bottom: 0; padding-bottom: 10px; border-radius: 40px 40px 0 0; }
.ciq-content > h1.ciq-page-title + .ciq-page-sub { background: var(--peach); margin: 0 0 18px; padding: 4px 40px 32px; border-radius: 0 0 40px 40px; }
.ciq-content > .ciq-page-head .ciq-hint { color: var(--peach-muted); }
.ciq-content > .ciq-page-head .btn-secondary { --bs-btn-bg: var(--surface); --bs-btn-hover-bg: var(--peach-2); }
.ciq-content > .ciq-page-head .ciq-page-ico { background: var(--surface); }
.ciq-content > .ciq-page-head--icon { justify-content: flex-start; align-items: center; }
/* a filter form inside the heading sits on a translucent white strip */
.ciq-content > .ciq-page-head .ciq-screen-filter,
.ciq-content > .ciq-page-head .ciq-toolbar { padding: 12px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .7); }

/* ---- cards: white sections; the first heading is numbered ---- */
.ciq-content .card { --bs-card-border-radius: 32px; --bs-card-inner-border-radius: 32px; margin-bottom: 18px; }
.ciq-content .card.mt-3, .ciq-content .card.mb-3 { margin-top: 0 !important; margin-bottom: 18px !important; }
.ciq-content .card > .card-body { padding: 26px 28px; }
.ciq-content .card > .card-header { padding: 18px 28px; background: transparent; }
.ciq-content .card > .card-body > h2.ciq-card-title,
.ciq-content .card > .card-body > h2.ciq-card-title + * { margin-top: 0; }
.ciq-content .card > .card-body > h2.ciq-card-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 14px; }
.ciq-content .card > .card-body > h2.ciq-card-title:first-child::before {
  counter-increment: ciq-sec; content: counter(ciq-sec);
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: 0; background: #FFE1D6; color: var(--coral-ink);
}
.ciq-content .card:nth-of-type(4n+2) > .card-body > h2.ciq-card-title:first-child::before { background: #FFF1CC; color: var(--yellow-ink); }
.ciq-content .card:nth-of-type(4n+3) > .card-body > h2.ciq-card-title:first-child::before { background: #DDF6F8; color: var(--cyan-ink); }
.ciq-content .card:nth-of-type(4n+4) > .card-body > h2.ciq-card-title:first-child::before { background: var(--violet); color: var(--violet-ink); }
.ciq-content h3.ciq-card-title, .ciq-content div.ciq-card-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
/* a card inside a card is a mist tile, as Placeeazee's tiles inside a section */
.ciq-content .card .card { background: var(--mist); --bs-card-bg: var(--mist); --bs-card-border-radius: 22px; --bs-card-inner-border-radius: 22px; margin-bottom: 12px; }
.ciq-content .card .card > .card-body { padding: 18px 20px; }
.ciq-panel { border-radius: 32px; padding: 6px 10px; }
.ciq-panel > summary { font-weight: 800; letter-spacing: -.02em; }

/* ---- forms: mono capital labels, roomy fields, actions in a row ---- */
.ciq-form-field > label, .ciq-form-field > .form-label, .ciq-field > .ciq-field-label,
.ciq-content .form-label, .ciq-content label.ciq-field-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.ciq-form-grid { gap: 14px 18px; }
.ciq-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.ciq-form-actions .btn-primary { min-height: 48px; padding-left: 26px; padding-right: 26px; font-size: 15px; }
.ciq-form-error { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.ciq-required { color: var(--coral-text); }

/* ---- a filter bar standing on the page (not inside a card) is a white strip ---- */
.ciq-content > form.ciq-toolbar, .ciq-content > .ciq-toolbar, .ciq-content > form.ciq-filter-row,
.ciq-content > .ciq-filter-row, .ciq-content > form.ciq-inline-form, .ciq-content > form.ciq-screen-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  padding: 16px 20px; margin: 0 0 18px; border-radius: var(--r-lg); background: var(--surface);
}

/* ---- tables standing on the page get the white section look ---- */
.ciq-content > .ciq-table-scroll, .ciq-content > .ciq-table { border-radius: 32px; margin-bottom: 18px; }
.ciq-content > .ciq-table-scroll { padding: 8px; background: var(--surface); }
.ciq-table-scroll > .ciq-table { border-radius: 24px; overflow: hidden; }
.ciq-table td .btn-sm { min-height: 30px; }
td.ciq-cell-actions { white-space: nowrap; }
td.ciq-cell-actions > form, td.ciq-cell-actions > .btn, td.ciq-cell-actions > a { display: inline-block; vertical-align: middle; margin: 2px 4px 2px 0; }
.ciq-table .btn { min-height: 34px; --bs-btn-padding-x: .9rem; --bs-btn-font-size: 13px; }

/* ---- empty states, notes, warnings ---- */
.ciq-empty { border: 0; background: var(--mist); border-radius: 22px; padding: 28px 24px; text-align: center; color: var(--text-muted); font-size: 14.5px; }
.ciq-content > .ciq-empty { background: var(--surface); }
.ciq-note { border-radius: 18px; padding: 14px 18px; background: var(--info-soft); color: var(--ink); border: 0; }
.ciq-content > .ciq-note { margin-bottom: 18px; }
.ciq-warn { border-radius: 18px; padding: 14px 18px; background: var(--warn-soft); color: var(--warn); border: 0; }
.ciq-memo { border-radius: 18px; padding: 14px 18px; border: 0; }
.ciq-code { font-weight: 600; background: var(--mist); color: var(--ink); border-radius: 8px; }
.ciq-content > .alert { margin-bottom: 18px; }

/* ---- the app overview pages (Admissions, Exams, ...) ---- */
.ciq-content > .ciq-app-head { background: var(--peach); padding: 32px 40px; border-radius: 40px; margin-bottom: 18px; }
.ciq-app-head-ico { width: 64px; height: 64px; border-radius: 20px; }
.ciq-screens { gap: 12px; }
.ciq-screen { min-height: 64px; padding: 14px 16px; border-radius: 22px; font-weight: 700; }
.ciq-screens .ciq-screen:nth-child(6n+1) { background: var(--violet); }
.ciq-screens .ciq-screen:nth-child(6n+2) { background: var(--cyan); }
.ciq-screens .ciq-screen:nth-child(6n+3) { background: var(--mint); }
.ciq-screens .ciq-screen:nth-child(6n+4) { background: var(--yellow); }
.ciq-screens .ciq-screen:nth-child(6n+5) { background: var(--peach); }
.ciq-screens .ciq-screen:nth-child(6n+6) { background: var(--lilac); }
.ciq-screen-ico { background: rgba(255, 255, 255, .75); }

/* ---- the screens outside the shell: campus picker, password change, 403 ---- */
.ciq-auth-main:not(:has(.pz-auth)) { display: grid; place-items: center; padding: 24px; background: var(--peach); }
.ciq-auth-main:not(:has(.pz-auth)) .ciq-auth-card { border-radius: 32px; padding: 12px; max-width: 520px; width: 100%; }
.ciq-auth-brand { font-weight: 800; letter-spacing: -.04em; }

@media (max-width: 767.98px) {
  .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title { padding: 24px 20px; border-radius: 28px; }
  .ciq-content > h1.ciq-page-title:has(+ .ciq-page-sub) { padding-bottom: 8px; border-radius: 28px 28px 0 0; }
  .ciq-content > h1.ciq-page-title + .ciq-page-sub { padding: 4px 20px 22px; border-radius: 0 0 28px 28px; }
  .ciq-content .card > .card-body { padding: 20px 16px; }
  .ciq-content > .ciq-app-head { padding: 22px 20px; border-radius: 28px; }
}
@media print {
  .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub { background: #fff; padding: 0; }
  .ciq-content .card > .card-body > h2.ciq-card-title:first-child::before { display: none; }
}
.ciq-content > h1.ciq-page-title + .ciq-page-sub { max-width: none; padding-right: max(40px, calc(100% - 900px)); }
.ciq-nav-sublink, .ciq-nav-sublink.is-active { border-left: 0; }
/* "Not permitted" and "Page not found" inside the shell: one peach panel, centred */
.ciq-content > .ciq-page-head:has(> .card) { display: block; padding: 64px 40px; text-align: center; }
.ciq-content > .ciq-page-head > .card { background: transparent; --bs-card-bg: transparent; margin: 0; }
.ciq-content > .ciq-page-head > .card > .ciq-empty { background: transparent; padding: 0; color: var(--peach-muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ciq-content > .ciq-page-head > .card > .ciq-empty .ciq-page-title { font-size: clamp(40px, 4.4vw, 64px); }
.ciq-content > .ciq-page-head > .card > .ciq-empty .btn { --bs-btn-bg: var(--ink); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-color: #fff; min-height: 48px; padding: 0 26px; margin-top: 8px; }
.ciq-content > .ciq-page-head > .card, .ciq-content > .ciq-page-head > .card > .ciq-empty { border: 0; box-shadow: none; }
/* tiles anywhere (student portal, reports) take the Dashboard tile shape */
.ciq-content .ciq-dash-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ciq-content > .ciq-dash-tiles { margin-bottom: 18px; }
.ciq-content .ciq-dash-tile { display: flex; flex-direction: column; gap: 6px; min-height: 130px; padding: 20px; border-radius: 22px; }
.ciq-content .ciq-dash-figure { font-size: clamp(28px, 2.4vw, 40px); line-height: 1; order: 1; white-space: nowrap; }
.ciq-content .ciq-dash-label { order: 0; font-size: 11px; color: var(--ink); opacity: .75; }
.ciq-content .ciq-dash-tile .ciq-hint { order: 2; margin-top: auto; color: #3D4352; font-size: 12.5px; line-height: 1.4; }
.ciq-content > .ciq-dash-tiles > :nth-child(5n+1) { background: var(--surface); }


/* =====================================================================
   §N  LIQUID GLASS (08-10-2026) — frosted, see-through surfaces over a soft colour field.
   One recipe, three strengths:
     --glass-*        clear glass: the rail, sections, cards, the sign-in card;
     --glass-chip-*   lighter glass for pills, fact chips and filter strips on peach;
     --glass-dark-*   smoked glass: "Needs attention", the active menu pill.
   Each pane is a translucent fill + a diagonal sheen (background layers, no pseudo-
   elements, so nothing a component already draws with ::before/::after is disturbed) +
   a hairline white rim + an inner top highlight + a soft drop shadow.
   No blur support, or a reader who asks for less transparency: solid surfaces (bottom).
   ===================================================================== */
:root {
  --glass-fill: rgba(255, 255, 255, .62);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .28) 100%);
  --glass-rim: rgba(255, 255, 255, .75);
  --glass-blur: blur(22px) saturate(170%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 10px 34px rgba(17, 20, 27, .07), 0 1px 2px rgba(17, 20, 27, .04);

  --glass-chip-fill: rgba(255, 255, 255, .52);
  --glass-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 14px rgba(17, 20, 27, .06);

  --glass-dark-fill: rgba(17, 20, 27, .78);
  --glass-dark-sheen: linear-gradient(140deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .07) 100%);
  --glass-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(17, 20, 27, .22);
}

/* ---- the colour field the glass refracts: soft pastel blobs, fixed behind everything ---- */
body.ciq-body {
  background:
    radial-gradient(38vw 38vw at 8% 12%, rgba(255, 175, 150, .55), transparent 70%),
    radial-gradient(34vw 34vw at 92% 6%, rgba(160, 230, 240, .55), transparent 70%),
    radial-gradient(40vw 40vw at 78% 78%, rgba(200, 186, 255, .50), transparent 70%),
    radial-gradient(30vw 30vw at 22% 92%, rgba(255, 225, 150, .45), transparent 70%),
    var(--mist);
  background-attachment: fixed;
}
.ciq-auth-main:has(.pz-auth), .ciq-topbar, .gm-foot { background: transparent; }

/* ---- clear glass ---- */
.ciq-sidebar-fixed,
.ciq-content .card:not(.card .card),
.pz-section,
.pz-auth-card,
.ciq-content > .ciq-table-scroll,
.ciq-content > form.ciq-toolbar, .ciq-content > .ciq-toolbar, .ciq-content > form.ciq-filter-row,
.ciq-content > .ciq-filter-row, .ciq-content > form.ciq-inline-form, .ciq-content > form.ciq-screen-filter,
.ciq-content > .ciq-empty,
.ciq-apps, .dropdown-menu, .ts-dropdown, .modal-content, .offcanvas.ciq-sidebar {
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}
.ciq-content .card { --bs-card-bg: transparent; }
.ciq-sidebar-fixed { background-color: rgba(255, 255, 255, .55); }

/* the peach heroes and banners become tinted glass: peach shows through, the field glows */
.pz-hero, .pz-auth-hero,
.ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub,
.ciq-content > .ciq-app-head {
  background-color: rgba(252, 237, 230, .72);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border: 1px solid rgba(255, 255, 255, .7);
}
/* a bare title and its subtitle stay one pane: no seam between them */
.ciq-content > h1.ciq-page-title:has(+ .ciq-page-sub) { border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); }
.ciq-content > h1.ciq-page-title + .ciq-page-sub { border-top: 0; background-image: none; box-shadow: 0 10px 34px rgba(17, 20, 27, .07); }

/* ---- chip glass: pills, fact chips, filter strips, icon squares, the user card ---- */
.pz-pill, .pz-facts > div, .pz-bubble, .dash-filters .ciq-screen-filter,
.ciq-content > .ciq-page-head .ciq-screen-filter, .ciq-content > .ciq-page-head .ciq-toolbar,
.ciq-rail-user, .ciq-rail-collapse, .ciq-rail-btn:not(.ciq-rail-signout), .ciq-identity, .ciq-apps-btn,
.ciq-topbar-institute .ciq-sidebar-logo, .pz-auth-tenant, .dash-chart-total, .pz-tool-ico, .db-tool-credits {
  background-color: var(--glass-chip-fill);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--glass-chip-shadow);
  border: 1px solid rgba(255, 255, 255, .7);
}
.ciq-rail-signout { background-color: rgba(252, 237, 230, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .6); }

/* pastel tool cards and tiles: tinted glass, the tint at 70% so the field breathes through */
.pz-tool, .ciq-content .ciq-dash-tile { border: 1px solid rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 20px rgba(17, 20, 27, .05); background-image: var(--glass-sheen); }
.pz-tint-0 { background-color: rgba(226, 218, 255, .78); }
.pz-tint-1 { background-color: rgba(207, 244, 247, .78); }
.pz-tint-2 { background-color: rgba(221, 246, 233, .80); }
.pz-tint-3 { background-color: rgba(255, 233, 176, .78); }
.pz-tint-4 { background-color: rgba(252, 237, 230, .82); }
.pz-tint-5 { background-color: rgba(238, 233, 255, .82); }
.pz-tool { background-image: var(--glass-sheen); }

/* chart panels and mist wells inside glass: a faint frosted inset */
.dash-chart, .dash-meter, .ciq-content .card .card, .ciq-empty, .ciq-rail-user {
  background-color: rgba(238, 240, 244, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.dash-chart .ciq-bar, .dash-col-track, .dash-meter-track { background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 2px rgba(17, 20, 27, .06); }
.dash-chart .ciq-bar-fill, .dash-col-fill, .dash-meter-fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }

/* ---- smoked glass ---- */
.dash-attention {
  background-color: var(--glass-dark-fill);
  background-image: var(--glass-dark-sheen);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--glass-dark-shadow);
}
.dash-attention-list li { background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.ciq-nav-link.is-active, details.ciq-nav-group[open] > summary.ciq-nav-link.is-active {
  background-color: rgba(17, 20, 27, .88); background-image: var(--glass-dark-sheen);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px rgba(17, 20, 27, .18);
}

/* ---- buttons: a light catches the top edge ---- */
.btn-primary, .pz-submit, .pz-cta, .ciq-rail-btn.ciq-rail-signout {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(17, 20, 27, .18);
}
.pz-submit-arrow {
  background-image: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 22px rgba(255, 91, 58, .35);
}
.btn-secondary, .btn-light, .pz-show { background-image: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(17, 20, 27, .06); }

/* fields: frosted wells; focus turns clear */
.form-control, .form-select, .ts-wrapper .ts-control {
  background-color: rgba(255, 255, 255, .55) !important;
  border-color: rgba(255, 255, 255, .7) !important;
  box-shadow: inset 0 1px 2px rgba(17, 20, 27, .05);
}
.form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control {
  background-color: rgba(255, 255, 255, .92) !important; border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px rgba(17, 20, 27, .08) !important;
}

/* tables inside glass: rows stay readable, the header band is frosted */
.ciq-table, .table { --tbl-zebra: rgba(255, 255, 255, .55); --tbl-hover: rgba(255, 255, 255, .85); --tbl-head-bg: rgba(245, 246, 249, .7); --tbl-foot-bg: rgba(245, 246, 249, .7); }
.ciq-table td, .table > * > tr > td { background-color: rgba(255, 255, 255, .55); }

/* ---- fallbacks ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ciq-sidebar-fixed, .ciq-content .card, .pz-section, .pz-auth-card, .ciq-apps, .dropdown-menu, .modal-content { background-color: var(--surface); }
  .pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub { background-color: var(--peach); }
  .dash-attention { background-color: var(--ink); }
}
@media (prefers-reduced-transparency: reduce) {
  body.ciq-body { background: var(--mist); }
  .ciq-sidebar-fixed, .ciq-content .card:not(.card .card), .pz-section, .pz-auth-card, .ciq-apps, .dropdown-menu, .modal-content,
  .ciq-content > .ciq-table-scroll, .ciq-content > .ciq-empty { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head { background: var(--peach); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dash-attention { background: var(--ink); backdrop-filter: none; }
}
@media print {
  body.ciq-body { background: #fff; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head { background-color: rgba(252, 232, 222, .84); }
.ciq-content > .pz-hero ~ .card > .card-body > h2.ciq-card-title:first-child::before, .ciq-content > .pz-hero ~ .row .card > .card-body > h2.ciq-card-title:first-child::before { display: none; }
.form-control, .form-select, .ts-wrapper .ts-control { background-color: rgba(232, 235, 241, .78) !important; border-color: rgba(205, 210, 222, .9) !important; }
/* "Needs attention": light glass, not smoked (smoke over peach read as muddy grey) */
.dash-attention { background-color: rgba(255, 255, 255, .62); background-image: var(--glass-sheen); color: var(--ink); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--glass-shadow); }
.dash-attention-kicker { color: var(--text-muted); }
.dash-attention-total { color: var(--coral-text); }
.dash-attention-list li { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 3px rgba(17, 20, 27, .05); border: 1px solid rgba(255, 255, 255, .8); }
.dash-attention-list li.is-zero { opacity: .5; }
.dash-swatch.is-violet { background: var(--chart-violet); } .dash-swatch.is-cyan { background: var(--chart-cyan); } .dash-swatch.is-yellow { background: var(--chart-yellow); }
/* the active menu item: solid ink, a light on its top edge */
.ciq-nav-link.is-active, details.ciq-nav-group[open] > summary.ciq-nav-link.is-active { background-color: var(--ink); background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px rgba(17, 20, 27, .16); }


/* =====================================================================
   §O  HOME'S TOOL CARDS, LIVELIER (08-10-2026): a solid icon tile in the card's own
   accent, a large faint icon watermark, the screens as chips, a bigger title, an Open
   pill whose arrow travels, a light sweep on hover, a live dot on "Waiting".
   ===================================================================== */
.pz-tool { --acc: var(--violet-ink); --acc-2: #8B78F0; position: relative; overflow: hidden; isolation: isolate; min-height: 210px; padding: 22px; gap: 10px; }
.pz-tint-0 { --acc: #5B47C8; --acc-2: #8E7CF2; }
.pz-tint-1 { --acc: #1C8C98; --acc-2: #3CC3CF; }
.pz-tint-2 { --acc: #1E8A5F; --acc-2: #3FC48E; }
.pz-tint-3 { --acc: #B07A0C; --acc-2: #F0B43A; }
.pz-tint-4 { --acc: #D9472A; --acc-2: #FF8A5C; }
.pz-tint-5 { --acc: #6B55D6; --acc-2: #A595F5; }

/* the watermark: the area's icon, large and faint, bottom right */
.pz-tool-mark { position: absolute; right: -18px; bottom: -26px; z-index: -1; font-size: 150px; line-height: 1; color: var(--acc); opacity: .09; transform: rotate(-12deg); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s; pointer-events: none; }
a.pz-tool:hover .pz-tool-mark { transform: rotate(-4deg) scale(1.08); opacity: .14; }

/* the icon tile: solid accent, glossy */
.pz-tool .pz-tool-ico {
  width: 52px; height: 52px; border-radius: 16px; font-size: 24px; color: #fff; border: 0;
  background: linear-gradient(145deg, var(--acc-2), var(--acc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px color-mix(in srgb, var(--acc) 35%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
a.pz-tool:hover .pz-tool-ico { transform: translateY(-2px) rotate(-4deg); }
.pz-tool .pz-tool-ico { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }

/* the title and the screens as chips */
.pz-tool .pz-tool-title { font-size: 21px; margin-top: 8px; }
.pz-tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pz-tool-chips > span { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); white-space: nowrap; }
.pz-tool-chips > span.is-more { background: transparent; border-color: transparent; box-shadow: none; color: var(--acc); font-weight: 700; }

/* Open: a pill; its arrow travels on hover */
.pz-tool .pz-tool-go {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto;
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(17, 20, 27, .05);
  transition: background .2s, color .2s;
}
.pz-tool-arrow { display: inline-block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
a.pz-tool:hover .pz-tool-go { background: var(--ink); color: #fff; border-color: var(--ink); }
a.pz-tool:hover .pz-tool-arrow { transform: translateX(4px); }

/* hover: lift, and a band of light sweeps across */
a.pz-tool { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
a.pz-tool:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 36px color-mix(in srgb, var(--acc) 18%, transparent); }
a.pz-tool::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-110%); transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
a.pz-tool:hover::after { transform: translateX(110%); }

/* "Waiting": a live coral dot */
.pz-tool .pz-tool-count { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 12px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 10px rgba(255, 91, 58, .18); }
.pz-live { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 91, 58, .6); animation: pz-live 1.6s ease-out infinite; }
@keyframes pz-live { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 58, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255, 91, 58, 0); } }

/* the cards come in one after another */
.pz-tools > .pz-tool { animation: pz-rise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.pz-tools > .pz-tool:nth-child(2) { animation-delay: .04s; } .pz-tools > .pz-tool:nth-child(3) { animation-delay: .08s; }
.pz-tools > .pz-tool:nth-child(4) { animation-delay: .12s; } .pz-tools > .pz-tool:nth-child(5) { animation-delay: .16s; }
.pz-tools > .pz-tool:nth-child(6) { animation-delay: .2s; } .pz-tools > .pz-tool:nth-child(n+7) { animation-delay: .24s; }
@keyframes pz-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .pz-tools > .pz-tool, .pz-live { animation: none; }
  a.pz-tool, a.pz-tool::after, .pz-tool-mark, .pz-tool .pz-tool-ico, .pz-tool-arrow { transition: none; }
  a.pz-tool::after { display: none; }
}
.pz-tool-title b, .ciq-launch-text .pz-tool-title b { font-size: inherit; font-weight: 800; letter-spacing: -.03em; }
@media (max-width: 991px) { .ciq-topbar { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border-bottom: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 4px 18px rgba(17, 20, 27, .06); } }


/* =====================================================================
   §P  EVERY BANNER GETS HOME'S TREATMENT (08-10-2026): an accent icon tile, a large faint
   icon watermark, a lift and a light sweep on hover — for the number tiles (Dashboard,
   application pages, student portal), the application overview's screen tiles, the
   launcher's tiles, the sign-in "What's inside" cards, and a GrayMatter mark and a glow
   on every page banner.
   ===================================================================== */

/* ---- number tiles ---- */
.ciq-content .ciq-dash-tile { --acc: #3D4352; --acc-2: #6B7385; position: relative; overflow: hidden; isolation: isolate; min-height: 170px; padding: 20px 20px 18px; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.ciq-tile-ico {
  order: -1; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 6px;
  font-size: 19px; color: #fff; background: linear-gradient(145deg, var(--acc-2), var(--acc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px color-mix(in srgb, var(--acc) 32%, transparent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.ciq-tile-mark { position: absolute; right: -14px; bottom: -22px; z-index: -1; font-size: 120px; line-height: 1; color: var(--acc); opacity: .08; transform: rotate(-12deg); pointer-events: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.ciq-content .ciq-dash-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-110%); transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.ciq-content .ciq-dash-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 32px color-mix(in srgb, var(--acc) 16%, transparent); }
.ciq-content .ciq-dash-tile:hover::after { transform: translateX(110%); }
.ciq-content .ciq-dash-tile:hover .ciq-tile-ico { transform: translateY(-2px) rotate(-5deg); }
.ciq-content .ciq-dash-tile:hover .ciq-tile-mark { transform: rotate(-4deg) scale(1.08); opacity: .13; }
.ciq-content .ciq-dash-tile .ciq-dash-figure { color: var(--ink); }

/* ---- application overview: screen tiles ---- */
.ciq-screen { --acc: #5B47C8; --acc-2: #8E7CF2; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 20px rgba(17, 20, 27, .05); background-image: var(--glass-sheen); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.ciq-screens .ciq-screen:nth-child(6n+2) { --acc: #1C8C98; --acc-2: #3CC3CF; }
.ciq-screens .ciq-screen:nth-child(6n+3) { --acc: #1E8A5F; --acc-2: #3FC48E; }
.ciq-screens .ciq-screen:nth-child(6n+4) { --acc: #B07A0C; --acc-2: #F0B43A; }
.ciq-screens .ciq-screen:nth-child(6n+5) { --acc: #D9472A; --acc-2: #FF8A5C; }
.ciq-screens .ciq-screen:nth-child(6n+6) { --acc: #6B55D6; --acc-2: #A595F5; }
.ciq-screen .ciq-screen-ico { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; color: #fff; border: 0; background: linear-gradient(145deg, var(--acc-2), var(--acc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px color-mix(in srgb, var(--acc) 30%, transparent); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ciq-screen::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); transform: translateX(-110%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ciq-screens .ciq-screen:hover { transform: translateY(-3px); color: var(--ink); background-color: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 28px color-mix(in srgb, var(--acc) 18%, transparent); }
.ciq-screens .ciq-screen:hover .ciq-screen-go { color: var(--ink); transform: translateX(3px); }
.ciq-screen:hover::after { transform: translateX(110%); }
.ciq-screen:hover .ciq-screen-ico { transform: rotate(-6deg); }
.ciq-screen-go { transition: transform .25s; }

/* ---- the launcher's tiles ---- */
.ciq-app-tile { --acc: #5B47C8; --acc-2: #8E7CF2; transition: transform .25s, background .2s; }
.ciq-apps-grid .ciq-app-tile:nth-child(6n+2) { --acc: #1C8C98; --acc-2: #3CC3CF; }
.ciq-apps-grid .ciq-app-tile:nth-child(6n+3) { --acc: #1E8A5F; --acc-2: #3FC48E; }
.ciq-apps-grid .ciq-app-tile:nth-child(6n+4) { --acc: #B07A0C; --acc-2: #F0B43A; }
.ciq-apps-grid .ciq-app-tile:nth-child(6n+5) { --acc: #D9472A; --acc-2: #FF8A5C; }
.ciq-apps-grid .ciq-app-tile:nth-child(6n+6) { --acc: #6B55D6; --acc-2: #A595F5; }
.ciq-app-tile .ciq-app-ico { color: #fff; background: linear-gradient(145deg, var(--acc-2), var(--acc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 12px color-mix(in srgb, var(--acc) 28%, transparent); border-radius: 11px; }
.ciq-app-tile:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .6); }

/* ---- every page banner: a glow and the GrayMatter mark, faint, at the right ---- */
.ciq-content > .ciq-page-head,
.ciq-content > h1.ciq-page-title,
.ciq-content > .ciq-app-head {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -68 110 152'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFC400'/%3E%3Cstop offset='.5' stop-color='%23FB2E3C'/%3E%3Cstop offset='1' stop-color='%2300B36A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='0' cy='-22' r='35' fill='none' stroke='url(%23g)' stroke-width='14'/%3E%3Cpath d='M35,-22 L35,42 Q35,68 9,68 L-16,68' fill='none' stroke='url(%23g)' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='-33' cy='68' r='13' fill='%2311141B'/%3E%3C/svg%3E"),
    radial-gradient(260px 200px at calc(100% - 70px) 50%, rgba(255, 138, 92, .30), transparent 70%),
    radial-gradient(220px 180px at calc(100% - 200px) 0%, rgba(200, 186, 255, .35), transparent 70%),
    var(--glass-sheen);
  background-repeat: no-repeat;
  background-size: 92px auto, auto, auto, auto;
  background-position: right 44px center, 0 0, 0 0, 0 0;
}
/* the mark sits with the title when the subtitle is its own band */
.ciq-content > h1.ciq-page-title:has(+ .ciq-page-sub) { background-position: right 44px top 24px, 0 0, 0 0, 0 0; background-size: 72px auto, auto, auto, auto; }
.ciq-content > .ciq-page-head > div:first-child, .ciq-content > .ciq-page-head > .ciq-page-sub { padding-right: 110px; }
.ciq-content > h1.ciq-page-title { padding-right: 140px; }
/* a banner holding its own controls keeps them clear of the mark */
.ciq-content > .ciq-page-head:has(form, .btn) { background-position: right 44px top 22px, 0 0, 0 0, 0 0; background-size: 64px auto, auto, auto, auto; }
.ciq-content > .ciq-page-head:has(> .card) { background-size: 0 0, auto, auto, auto; }
@media (max-width: 767.98px) {
  .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > .ciq-app-head { background-size: 54px auto, auto, auto, auto; background-position: right 20px top 20px, 0 0, 0 0, 0 0; }
  .ciq-content > .ciq-page-head > div:first-child, .ciq-content > .ciq-page-head > .ciq-page-sub, .ciq-content > h1.ciq-page-title { padding-right: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .ciq-content .ciq-dash-tile, .ciq-content .ciq-dash-tile::after, .ciq-tile-ico, .ciq-tile-mark, .ciq-screen, .ciq-screen::after, .ciq-app-tile { transition: none; }
  .ciq-content .ciq-dash-tile::after, .ciq-screen::after { display: none; }
}
@media print { .ciq-tile-ico, .ciq-tile-mark { display: none; } }
/* title + subtitle as two bands: no seam, the mark on the lower band */
.ciq-content > h1.ciq-page-title:has(+ .ciq-page-sub) { background-image: none; }
.ciq-content > h1.ciq-page-title + .ciq-page-sub { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -68 110 152'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFC400'/%3E%3Cstop offset='.5' stop-color='%23FB2E3C'/%3E%3Cstop offset='1' stop-color='%2300B36A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='0' cy='-22' r='35' fill='none' stroke='url(%23g)' stroke-width='14'/%3E%3Cpath d='M35,-22 L35,42 Q35,68 9,68 L-16,68' fill='none' stroke='url(%23g)' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='-33' cy='68' r='13' fill='%2311141B'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 64px auto; background-position: right 44px bottom 26px; padding-right: max(130px, calc(100% - 900px)); }
@media (max-width: 767.98px) { .ciq-content > h1.ciq-page-title + .ciq-page-sub { background-size: 44px auto; background-position: right 18px bottom 18px; padding-right: 76px; } }
.ciq-content > h1.ciq-page-title + .ciq-page-sub { margin-top: -1px; position: relative; }
/* menus and pop-ups: denser glass, so the page behind never competes with them */
.ciq-apps, .dropdown-menu, .ts-dropdown, .modal-content { background-color: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }


/* =====================================================================
   §Q  MOTION (08-10-2026) — charts draw in, figures count up (static/studio_motion.js).
   Everything here applies only under html.ciq-motion, which the script sets, and never
   when reduced motion is asked for: without the script the page shows as rendered.
   A bar is revealed with clip-path, not scaled, so its rounded ends stay round.
   ===================================================================== */
@keyframes ciq-draw-x { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes ciq-draw-y { from { clip-path: inset(100% 0 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes ciq-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ciq-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }

/* before a block enters: bars hidden, rows and tiles waiting */
html.ciq-motion :is(.dash-chart, .dash-meter, .ciq-bars:not(.dash-chart .ciq-bars)):not(.is-in) :is(.ciq-bar-fill, .dash-meter-fill) { clip-path: inset(0 100% 0 0 round 999px); }
html.ciq-motion .dash-chart:not(.is-in) .dash-col-fill { clip-path: inset(100% 0 0 0 round 14px); }
html.ciq-motion :is(.dash-chart, .ciq-bars:not(.dash-chart .ciq-bars)):not(.is-in) .ciq-bar-row,
html.ciq-motion .ciq-dash-tiles:not(.is-in) > .ciq-dash-tile,
html.ciq-motion .dash-attention:not(.is-in) .dash-attention-list li,
html.ciq-motion .pz-facts:not(.is-in) > div { opacity: 0; }

/* bars: each row slides in, then its bar draws, one after another */
html.ciq-motion :is(.dash-chart, .ciq-bars).is-in .ciq-bar-row { animation: ciq-fade-up .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 60ms); }
html.ciq-motion :is(.dash-chart, .ciq-bars).is-in .ciq-bar-fill { animation: ciq-draw-x 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 60ms + 120ms); }
.ciq-bars > .ciq-bar-row:nth-child(1) { --n: 0; } .ciq-bars > .ciq-bar-row:nth-child(2) { --n: 1; }
.ciq-bars > .ciq-bar-row:nth-child(3) { --n: 2; } .ciq-bars > .ciq-bar-row:nth-child(4) { --n: 3; }
.ciq-bars > .ciq-bar-row:nth-child(5) { --n: 4; } .ciq-bars > .ciq-bar-row:nth-child(6) { --n: 5; }
.ciq-bars > .ciq-bar-row:nth-child(7) { --n: 6; } .ciq-bars > .ciq-bar-row:nth-child(8) { --n: 7; }
.ciq-bars > .ciq-bar-row:nth-child(9) { --n: 8; } .ciq-bars > .ciq-bar-row:nth-child(n+10) { --n: 9; }

/* columns rise from the floor, left to right */
html.ciq-motion .dash-chart.is-in .dash-col-fill { animation: ciq-draw-y 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 90ms); }
.dash-cols > .dash-col:nth-child(1) { --n: 0; } .dash-cols > .dash-col:nth-child(2) { --n: 1; }
.dash-cols > .dash-col:nth-child(3) { --n: 2; } .dash-cols > .dash-col:nth-child(4) { --n: 3; }
.dash-cols > .dash-col:nth-child(5) { --n: 4; } .dash-cols > .dash-col:nth-child(n+6) { --n: 5; }

/* the intake meter fills, with a glint running along it once */
html.ciq-motion .dash-meter.is-in .dash-meter-fill { animation: ciq-draw-x 1.4s cubic-bezier(.2, .7, .2, 1) backwards .15s; position: relative; overflow: hidden; }
html.ciq-motion .dash-meter.is-in .dash-meter-fill::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-100%); animation: ciq-glint 1.1s ease-out 1.4s both;
}
@keyframes ciq-glint { to { transform: translateX(100%); } }

/* tiles, fact chips and the attention rows come in one after another */
html.ciq-motion .ciq-dash-tiles.is-in > .ciq-dash-tile,
html.ciq-motion .pz-facts.is-in > div,
html.ciq-motion .dash-attention.is-in .dash-attention-list li { animation: ciq-fade-up .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 70ms); }
html.ciq-motion .ciq-dash-tiles.is-in .ciq-tile-ico { animation: ciq-pop .55s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--n, 0) * 70ms + 120ms); }
html.ciq-motion .dash-attention.is-in .dash-swatch { animation: ciq-pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--n, 0) * 70ms + 150ms); }
.ciq-dash-tiles > :nth-child(1), .pz-facts > div:nth-child(1), .dash-attention-list li:nth-child(1) { --n: 0; }
.ciq-dash-tiles > :nth-child(2), .pz-facts > div:nth-child(2), .dash-attention-list li:nth-child(2) { --n: 1; }
.ciq-dash-tiles > :nth-child(3), .pz-facts > div:nth-child(3), .dash-attention-list li:nth-child(3) { --n: 2; }
.ciq-dash-tiles > :nth-child(4), .pz-facts > div:nth-child(4), .dash-attention-list li:nth-child(4) { --n: 3; }
.ciq-dash-tiles > :nth-child(5), .dash-attention-list li:nth-child(5) { --n: 4; }
.ciq-dash-tiles > :nth-child(n+6) { --n: 5; }

/* counting figures hold their width so nothing jitters */
.ciq-dash-figure, .dash-attention-total, .pz-facts dt, .dash-chart-total, .dash-col-value, .dash-meter-head b, .ciq-bar-value, .dash-attention-list b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html.ciq-motion * { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}
@media print { html.ciq-motion * { animation: none !important; clip-path: none !important; opacity: 1 !important; } }
/* shown by the safety net: final state, no motion */
html.ciq-motion .no-anim, html.ciq-motion .no-anim * { animation: none !important; }
html.ciq-motion .no-anim :is(.ciq-bar-fill, .dash-meter-fill, .dash-col-fill) { clip-path: none !important; }


/* =====================================================================
   §R  CAMPUS BY CAMPUS AS BANNERS (08-10-2026): one tinted glass card per campus — the
   code large, students on roll with its share of all students, seats filled this year
   as a meter, and the other figures as small icon tiles. The table stays beneath, folded.
   ===================================================================== */
.dash-campuses { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.dash-campus {
  --acc: #5B47C8; --acc-2: #8E7CF2;
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .65);
  background-image: var(--glass-sheen);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 24px rgba(17, 20, 27, .06);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.dash-campus:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 36px color-mix(in srgb, var(--acc) 18%, transparent); }
.dash-campus .pz-tool-mark { font-size: 190px; right: -28px; bottom: -40px; }
.dash-campus:hover .pz-tool-mark { transform: rotate(-4deg) scale(1.06); opacity: .13; }
.dash-campus-head { display: flex; align-items: center; gap: 14px; }
.dash-campus .pz-tool-ico { width: 52px; height: 52px; border-radius: 16px; font-size: 24px; color: #fff; border: 0; background: linear-gradient(145deg, var(--acc-2), var(--acc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px color-mix(in srgb, var(--acc) 35%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dash-campus-name { display: flex; flex-direction: column; line-height: 1; }
.dash-campus-name small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .6; margin-bottom: 4px; }
.dash-campus-name b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }

.dash-campus-hero { display: flex; flex-direction: column; gap: 4px; }
.ciq-content .dash-campus-big { font-size: clamp(44px, 4.4vw, 60px); font-weight: 800; line-height: .95; letter-spacing: -.05em; white-space: nowrap; }
.dash-campus-label { font-size: 14px; font-weight: 600; color: #3D4352; }
.dash-campus-meter { padding: 0; background: transparent !important; box-shadow: none !important; gap: 6px; margin-top: 8px; }
.dash-campus-meter .dash-meter-track { height: 10px; background: rgba(255, 255, 255, .75); }
.dash-campus-meter .dash-meter-fill { background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
.dash-campus-note { font-size: 12.5px; font-weight: 600; color: var(--acc); }
.dash-campus-seats { padding: 14px 16px !important; border-radius: 18px; background: rgba(255, 255, 255, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important; margin: 0; }
.dash-campus-seats-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dash-campus-seats-head b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-campus-seats-head span { font-size: 13px; color: #3D4352; }

.dash-campus-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.dash-campus-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.dash-campus-stats dt { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: .7; }
.dash-campus-stats dt .bi { font-size: 13px; color: var(--acc); opacity: 1; }
.ciq-content .dash-campus-stats dd { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }

.dash-campus-table { margin-top: 4px; }
.dash-campus-table > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(17, 20, 27, .05); list-style: none; }
.dash-campus-table > summary::-webkit-details-marker { display: none; }
.dash-campus-table > summary::before { content: "\F282"; font-family: "bootstrap-icons"; font-size: 12px; transition: transform .2s; }
.dash-campus-table[open] > summary::before { transform: rotate(180deg); }
.dash-campus-table[open] > .ciq-table-scroll { margin-top: 12px; }

/* motion: the banner fades up, its meters fill */
html.ciq-motion .dash-campus:not(.is-in) { opacity: 0; }
html.ciq-motion .dash-campus:not(.is-in) .dash-meter-fill { clip-path: inset(0 100% 0 0 round 999px); }
html.ciq-motion .dash-campus.is-in { animation: ciq-fade-up .55s cubic-bezier(.2, .7, .2, 1) backwards; }
html.ciq-motion .dash-campus.is-in .dash-meter-fill { animation: ciq-draw-x 1.2s cubic-bezier(.2, .7, .2, 1) backwards .2s; }
html.ciq-motion .dash-campus.is-in .dash-campus-stats > div { animation: ciq-fade-up .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.dash-campus-stats > div:nth-child(2) { animation-delay: .05s !important; } .dash-campus-stats > div:nth-child(3) { animation-delay: .1s !important; }
.dash-campus-stats > div:nth-child(4) { animation-delay: .15s !important; } .dash-campus-stats > div:nth-child(5) { animation-delay: .2s !important; }
.dash-campus-stats > div:nth-child(6) { animation-delay: .25s !important; } .dash-campus-stats > div:nth-child(n+7) { animation-delay: .3s !important; }
.dash-campuses > .dash-campus:nth-child(2) { animation-delay: .08s; } .dash-campuses > .dash-campus:nth-child(3) { animation-delay: .16s; }
.dash-campuses > .dash-campus:nth-child(n+4) { animation-delay: .24s; }
@media (max-width: 640px) { .dash-campus { padding: 20px; } .dash-campus-name b { font-size: 26px; } }
@media print { .dash-campus-table > .ciq-table-scroll { display: block; } }
.dash-campus-hero > * { order: 0 !important; }
.dash-campuses { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.dash-campus.pz-tint-0 { --acc: #5B47C8; --acc-2: #8E7CF2; } .dash-campus.pz-tint-1 { --acc: #1C8C98; --acc-2: #3CC3CF; }
.dash-campus.pz-tint-2 { --acc: #1E8A5F; --acc-2: #3FC48E; } .dash-campus.pz-tint-3 { --acc: #B07A0C; --acc-2: #F0B43A; }
.dash-campus.pz-tint-4 { --acc: #D9472A; --acc-2: #FF8A5C; } .dash-campus.pz-tint-5 { --acc: #6B55D6; --acc-2: #A595F5; }


/* =====================================================================
   §S  THE EXAM TIMETABLE AS AN AGENDA (08-10-2026): a summary strip with a countdown,
   then one glass card per exam day — a tear-off date tile with its status, and each
   session with its papers as subject-coloured cards. Past days fade, today glows coral.
   ===================================================================== */
.et-filter { margin-bottom: 14px !important; }
.et-summary { margin: 0 0 18px; }
.et-summary > div { background: rgba(255, 255, 255, .62); }
.et-summary .et-next { gap: 10px; align-items: center; background: var(--ink); color: #fff; border-color: var(--ink); }
.et-summary .et-next dd { font-weight: 600; }
.et-summary .et-next b { color: #FFB199; font-size: 18px; }

.et-timeline { display: flex; flex-direction: column; gap: 14px; position: relative; }
.et-day {
  display: grid !important; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: stretch;
  padding: 18px !important; margin: 0 !important; border-radius: 28px;
  background-color: var(--glass-fill); background-image: var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim) !important; box-shadow: var(--glass-shadow);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.et-day:hover { transform: translateY(-2px); }
.et-day.is-today { box-shadow: 0 0 0 2px var(--coral), 0 16px 36px rgba(255, 91, 58, .18) !important; }
.et-day.is-past { opacity: .62; }
.et-day.is-past:hover { opacity: .9; }

/* the tear-off date */
.et-date {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0 0 14px; border-radius: 20px; overflow: hidden; text-align: center;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(17, 20, 27, .06);
}
.et-date-month {
  align-self: stretch; padding: 7px 0 6px; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: linear-gradient(145deg, #8E7CF2, #5B47C8);
}
.et-day.is-today .et-date-month { background: linear-gradient(145deg, #FF8A5C, #D9472A); }
.et-day.is-past .et-date-month { background: linear-gradient(145deg, #8A91A0, #596070); }
.et-date-day { font-size: 46px; font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.et-date-week { font-size: 13px; font-weight: 700; color: #3D4352; }
.et-date-status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  background: var(--mist); color: var(--ink);
}
.et-day.is-today .et-date-status { background: var(--coral-soft); color: var(--coral-text); }
.et-day.is-past .et-date-status { color: var(--ok); background: var(--ok-soft); }

/* sessions */
.et-sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; min-width: 0; }
.et-session { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(238, 240, 244, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .5); min-width: 0; }
.et-session.is-free { background: transparent; box-shadow: none; border: 1.5px dashed rgba(17, 20, 27, .12); }
.et-session-head { display: flex; align-items: center; gap: 10px; }
.et-session-head b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.et-session-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: #fff; background: linear-gradient(145deg, #F0B43A, #B07A0C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.et-session:nth-child(2) .et-session-ico { background: linear-gradient(145deg, #FF8A5C, #D9472A); }
.et-session:nth-child(3) .et-session-ico { background: linear-gradient(145deg, #8E7CF2, #5B47C8); }
.et-session.is-free .et-session-ico { background: var(--mist); color: var(--text-faint); box-shadow: none; }
.et-session-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--ink); }
.et-free { font-size: 13px; color: var(--text-faint); padding: 4px 2px; }

/* paper cards: the subject's colour as a tint, a glossy top edge, its code in mono */
.et-papers { display: grid; grid-template-columns: 1fr; gap: 8px; }
.et-paper {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px 12px 18px; border-radius: 16px;
  background: linear-gradient(135deg, var(--tt-bg), color-mix(in srgb, var(--tt-bg) 70%, #fff));
  color: var(--tt-fg); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px color-mix(in srgb, var(--tt) 14%, transparent);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.et-paper::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 6px 6px 0; background: var(--tt); }
.et-paper:hover { transform: translateX(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px color-mix(in srgb, var(--tt) 22%, transparent); }
.et-paper-code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.et-paper-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.et-paper-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.et-paper-tags > span { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .7); color: var(--tt-fg); }
.et-duty { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--coral-soft); color: var(--coral-text); box-shadow: inset 0 0 0 1px rgba(255, 91, 58, .25); }

/* the legend: chips */
.et-timeline + .tt-legend { margin-top: 16px; gap: 8px; }
.et-timeline + .tt-legend .tt-key { padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); font-family: var(--font-mono); font-size: 11.5px; }
.et-timeline + .tt-legend .tt-key i { border-radius: 50%; }

/* empty */
.et-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px; border-radius: 28px; background: var(--glass-fill); }
.et-empty-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; color: #fff; background: linear-gradient(145deg, #3FC48E, #1E8A5F); }
.et-empty .ciq-empty { background: transparent; padding: 0; }

/* motion: the days come in one after another, the today pill breathes */
html.ciq-motion .et-day { animation: ciq-fade-up .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.et-timeline > .et-day:nth-child(2) { animation-delay: .06s; } .et-timeline > .et-day:nth-child(3) { animation-delay: .12s; }
.et-timeline > .et-day:nth-child(4) { animation-delay: .18s; } .et-timeline > .et-day:nth-child(n+5) { animation-delay: .24s; }

/* phone: the date becomes a strip above the sessions */
@media (max-width: 767.98px) {
  .et-day { grid-template-columns: 1fr; gap: 12px; padding: 14px !important; }
  .et-date { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 14px 0 0; }
  .et-date-month { align-self: stretch; margin: 0; padding: 0 12px; display: grid; place-items: center; writing-mode: horizontal-tb; }
  .et-date-day { font-size: 30px; }
  .et-date-status { margin: 0 0 0 auto; }
  .et-sessions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .et-day, .et-paper { transition: none; } }
@media print { .et-day { break-inside: avoid; background: #fff; box-shadow: none !important; border: 1px solid #000 !important; } .et-day.is-past { opacity: 1; } }
/* timetable refinements: the date tile tears off from the top; an empty session is a slim line; papers sit side by side */
.et-date { align-self: start; justify-content: flex-start; }
.et-sessions { grid-template-columns: minmax(0, 1fr); }
.et-session.is-free { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; }
.et-session.is-free .et-session-head b { font-size: 13.5px; color: var(--text-muted); }
.et-session.is-free .et-session-ico { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
.et-session.is-free .et-free::before { content: "·"; margin-right: 8px; }
.et-papers { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.et-papers { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }


/* =====================================================================
   §T  EVERY LIST AS CARDS, A TABLE OR A CHART (08-10-2026; static/studio_views.js), and
   the teacher's week as tabs. Cards are the table's own rows re-laid out: each cell wears
   its column's name, the first columns are the card's title, the row's buttons sit along
   its foot. Nothing is moved out of its row, so every form works in every view.
   ===================================================================== */

/* ---- the toolbar above a list ---- */
.tv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.tv-find { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; margin: 0; }
.tv-find .bi { position: absolute; left: 14px; color: var(--text-faint); pointer-events: none; }
.tv-find input {
  width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: 999px; font: inherit; font-size: 14px; color: var(--ink);
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 2px rgba(17, 20, 27, .05), 0 2px 8px rgba(17, 20, 27, .04);
  outline: none; transition: background .2s, box-shadow .2s;
}
.tv-find input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(17, 20, 27, .1); }
.tv-count { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.tv-seg { display: inline-flex; gap: 3px; padding: 4px; margin-left: auto; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(17, 20, 27, .05); }
.tv-seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.tv-seg-btn:hover { color: var(--ink); }
.tv-seg-btn.is-on { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px rgba(17, 20, 27, .18); }
tr.tf-hide { display: none !important; }

/* ---- sortable headers (table view) ---- */
th.tv-sortable { cursor: pointer; user-select: none; }
th.tv-sortable::after { content: "\F127"; font-family: "bootstrap-icons"; margin-left: 6px; font-size: 10px; opacity: .35; }
th.tv-sortable[aria-sort="ascending"]::after { content: "\F148"; opacity: 1; color: var(--coral-text); }
th.tv-sortable[aria-sort="descending"]::after { content: "\F128"; opacity: 1; color: var(--coral-text); }
th.tv-sortable:hover { color: var(--ink); }

/* ---- number columns carry a bar (table view) ---- */
.ciq-table:not(.is-cards) td.tc-num {
  background-image: linear-gradient(90deg, rgba(255, 91, 58, .16), rgba(255, 91, 58, .16));
  background-size: var(--pct, 0%) 6px; background-position: left bottom 8px; background-repeat: no-repeat;
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* ---- the cards view ---- */
.tv-cards-host { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
table.is-cards { display: block; border: 0; }
table.is-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.is-cards > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
table.is-cards > tfoot { display: block; margin-top: 12px; }
table.is-cards > tbody > tr:not([hidden]):not(.d-none) {
  --acc: #5B47C8;
  position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 14px;
  padding: 18px; border-radius: 22px; overflow: hidden;
  background-color: rgba(255, 255, 255, .62); background-image: var(--glass-sheen);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 18px rgba(17, 20, 27, .05);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
table.is-cards > tbody > tr:not([hidden]):hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 14px 30px color-mix(in srgb, var(--acc) 14%, transparent); }
table.is-cards > tbody > tr:nth-child(6n+2) { --acc: #1C8C98; } table.is-cards > tbody > tr:nth-child(6n+3) { --acc: #1E8A5F; }
table.is-cards > tbody > tr:nth-child(6n+4) { --acc: #B07A0C; } table.is-cards > tbody > tr:nth-child(6n+5) { --acc: #D9472A; }
table.is-cards > tbody > tr:nth-child(6n+6) { --acc: #6B55D6; }
table.is-cards > tbody > tr::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff)); }
table.is-cards > tbody > tr > td {
  display: flex; flex-direction: column; gap: 3px; flex: 1 1 42%; min-width: 0;
  padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 14px; color: var(--ink);
}
table.is-cards > tbody > tr > td::before {
  content: attr(data-label); font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
table.is-cards > tbody > tr > td:empty, table.is-cards > tbody > tr > td.tc-handle { display: none; }
/* the title: the first columns, large, no label */
table.is-cards > tbody > tr > td.tc-title { flex-basis: 100%; order: -2; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
table.is-cards > tbody > tr > td.tc-sub { flex-basis: 100%; order: -1; font-size: 14px; font-weight: 600; color: #3D4352; margin-top: -4px; }
table.is-cards > tbody > tr > td.tc-title::before, table.is-cards > tbody > tr > td.tc-sub::before { display: none; }
table.is-cards > tbody > tr > td.tc-title .ciq-code { font-size: 14px; padding: 3px 10px; background: color-mix(in srgb, var(--acc) 14%, #fff); color: var(--acc); }
/* numbers: big, with a bar */
table.is-cards > tbody > tr > td.tc-num { font-size: 22px; font-weight: 800; letter-spacing: -.03em; flex-basis: 28%; font-variant-numeric: tabular-nums; }
table.is-cards > tbody > tr > td.tc-num::after { content: ""; display: block; height: 5px; border-radius: 999px; margin-top: 2px; background: linear-gradient(90deg, var(--acc) var(--pct, 0%), rgba(17, 20, 27, .08) var(--pct, 0%)); }
/* the actions: along the foot of the card */
table.is-cards > tbody > tr > td.tc-actions { flex-basis: 100%; order: 10; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px !important; margin-top: 2px; border-top: 1px solid rgba(17, 20, 27, .07) !important; white-space: normal; }
table.is-cards > tbody > tr > td.tc-actions::before { display: none; }
table.is-cards > tbody > tr > td.tc-actions > form { display: inline-flex; margin: 0; }
/* a full-width row (an open edit form, an empty-state line) spans the grid */
table.is-cards > tbody > tr:not([hidden]):has(> td[colspan]) { grid-column: 1 / -1; }
table.is-cards > tbody > tr > td[colspan] { flex-basis: 100%; }
table.is-cards > tbody > tr > td[colspan]::before { display: none; }
table.is-cards .ciq-badge { align-self: flex-start; }

/* ---- the chart view ---- */
.tv-chart { margin: 0; }
.tv-chart .dash-chart-head { justify-content: space-between; }
.tv-pick { width: auto; min-width: 200px; min-height: 36px; font-weight: 700; }
.tv-chart .ciq-bars { max-height: 640px; overflow-y: auto; padding-right: 4px; }
.tv-chart .ciq-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the teacher's week ---- */
.tw { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.tw-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.tw-day {
  flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .85); cursor: pointer; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(17, 20, 27, .05);
  transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}
.tw-day:hover { transform: translateY(-2px); }
.tw-day-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.tw-day-date { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.tw-day-count { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.tw-day.is-today { box-shadow: inset 0 0 0 2px var(--coral), 0 6px 16px rgba(255, 91, 58, .18); }
.tw-day.is-off { opacity: .55; }
.tw-day.is-on { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px rgba(17, 20, 27, .22); }
.tw-day.is-on .tw-day-count { color: #FFB199; }
.tw-day.is-on.is-today { box-shadow: 0 0 0 2px var(--coral), 0 10px 22px rgba(17, 20, 27, .22); }
.tw.is-live .tw-panel { display: none; }
.tw.is-live .tw-panel.is-on { display: block; animation: ciq-fade-up .35s cubic-bezier(.2, .7, .2, 1) backwards; }
.tw-panel { padding: 20px; border-radius: 26px; background: rgba(238, 240, 244, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.tw-panel + .tw-panel { margin-top: 0; }
.tw-panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tw-panel-head b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.tw-panel-head > span:not([class]) { color: var(--text-muted); font-weight: 600; }
.tw-today-pill, .tw-off-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--coral-soft); color: var(--coral-text); }
.tw-off-pill { background: var(--mist); color: var(--text-muted); }
.tw-line { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; display: flex; flex-direction: column; gap: 8px; }
.tw-line::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(17, 20, 27, .12), rgba(17, 20, 27, .04)); }
.tw-slot { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.tw-slot::before { content: ""; position: absolute; left: -19px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px rgba(17, 20, 27, .18); }
.tw-slot:not(.is-free)::before { box-shadow: inset 0 0 0 3px var(--ink); }
.tw-when { display: flex; align-items: center; gap: 10px; }
.tw-no { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(17, 20, 27, .06); }
.tw-time { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.tw-what { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tw-what .ciq-chip { padding: 12px 16px; border-radius: 16px; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px color-mix(in srgb, var(--tt) 14%, transparent); transition: transform .2s; }
.tw-what a.ciq-chip:hover { transform: translateX(3px); }
.tw-what .ciq-chip-code { font-family: var(--font-mono); font-size: 13px; }
.tw-what .ciq-chip-line { font-size: 13.5px; font-weight: 600; }
.tw-free { display: block; padding: 8px 14px; border-radius: 14px; border: 1.5px dashed rgba(17, 20, 27, .1); font-size: 13px; color: var(--text-faint); }
.tw-flag:empty { display: none; }
.tw-flag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--mist); color: var(--ink); }
.tw-slot.is-now .tw-flag { background: var(--coral); color: #fff; animation: st-pulse 1.5s ease-in-out infinite; }
.tw-slot.is-now::before { background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 91, 58, .25); }
.tw-slot.is-now .tw-no { background: var(--coral); color: #fff; }
.tw-slot.is-next .tw-flag { background: var(--ink); color: #fff; }
.tw-slot.is-done { opacity: .55; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

/* the week at a glance */
.tw-map { padding: 18px 20px; border-radius: 26px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff; }
.tw-map-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tw-map-head b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.tw-map-grid { display: grid; gap: 5px; }
.tw-map-day { border: 0; background: transparent; font: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; border-radius: 8px; cursor: pointer; }
.tw-map-day:hover { background: var(--mist); color: var(--ink); }
.tw-map-day.is-today { color: var(--coral-text); }
.tw-map-p { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; }
.tw-map-cell { height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--tt-fg); background: var(--tt-bg); box-shadow: inset 0 -3px 0 var(--tt); overflow: hidden; white-space: nowrap; transition: transform .15s; }
.tw-map-cell:hover { transform: scale(1.06); }
.tw-map-cell.is-free { background: rgba(17, 20, 27, .04); box-shadow: none; }

/* the classic grid, folded */
.tw-grid { margin-top: 4px; }
.tw-grid > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(17, 20, 27, .05); list-style: none; }
.tw-grid > summary::-webkit-details-marker { display: none; }
.tw-grid > summary::before { content: "\F282"; font-family: "bootstrap-icons"; font-size: 12px; transition: transform .2s; }
.tw-grid[open] > summary::before { transform: rotate(180deg); }
.tw-grid[open] > summary { margin-bottom: 12px; }

/* invigilation duties as date cards */
.tw-duties { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tw-duties li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff; }
.tw-duty-date { width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 10px rgba(17, 20, 27, .06); }
.tw-duty-date small { align-self: stretch; text-align: center; padding: 2px 0; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(145deg, #FF8A5C, #D9472A); }
.tw-duty-date b { font-size: 22px; font-weight: 800; padding: 2px 0 4px; }
.tw-duty-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-muted); }
.tw-duty-text b { font-size: 15px; color: var(--ink); }

@media (max-width: 640px) {
  .tw-slot { grid-template-columns: 1fr auto; }
  .tw-when { grid-column: 1 / -1; }
  .tv-seg { margin-left: 0; }
  table.is-cards > tbody { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  table.is-cards > tbody > tr, .tw-day, .tw-what .ciq-chip, .tw-map-cell { transition: none; }
  .tw-slot.is-now .tw-flag, .tw.is-live .tw-panel.is-on { animation: none; }
}
@media print {
  .tv-bar, .tv-chart, .tw-days, .tw-map { display: none !important; }
  table.is-cards { display: table; } table.is-cards > thead { position: static; width: auto; height: auto; clip: auto; }
  table.is-cards > tbody { display: table-row-group; } table.is-cards > tbody > tr { display: table-row !important; }
  table.is-cards > tbody > tr > td { display: table-cell; } table.is-cards > tbody > tr > td::before { display: none; }
  .tw.is-live .tw-panel { display: block; }
}
.ciq-content > h1.ciq-page-title + .ciq-page-sub { background-size: auto min(88px, calc(100% - 20px)); background-position: right 44px center; }
.tv-chart .ciq-bars { overflow-x: hidden; padding: 0 10px; margin: 0 -10px; }
.tv-chart .ciq-bar-row { grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr) 4.5rem; }

/* =====================================================================
   §U  THE CAMPUS BACKDROP (08-10-2026): an original illustration (static/art/campus.svg),
   fixed behind every screen and the sign-in page. The glass panes blur it; a light veil
   keeps text contrast where it shows through. Reduced transparency and print drop it.
   ===================================================================== */
body.ciq-body {
  background:
    linear-gradient(180deg, rgba(238, 240, 244, .30) 0%, rgba(238, 240, 244, .10) 55%, rgba(238, 240, 244, .30) 100%),
    radial-gradient(38vw 38vw at 8% 12%, rgba(255, 175, 150, .30), transparent 70%),
    radial-gradient(40vw 40vw at 78% 78%, rgba(200, 186, 255, .25), transparent 70%),
    url("art/campus.svg") center bottom / cover no-repeat,
    var(--mist);
  background-attachment: fixed;
}
@media (max-width: 767.98px) { body.ciq-body { background-size: auto, auto, auto, auto 70vh, auto; } }
@media (prefers-reduced-transparency: reduce) { body.ciq-body { background: var(--mist); } }
@media print { body.ciq-body { background: #fff !important; } }

/* =====================================================================
   §V  GLASS YOU CAN SEE THROUGH (08-10-2026): thinner panes and a lighter blur, so the
   campus behind reads as soft shapes and colour. Menus and pop-ups stay near-solid.
   ===================================================================== */
:root {
  --glass-fill: rgba(255, 255, 255, .40);
  --glass-chip-fill: rgba(255, 255, 255, .45);
  --glass-blur: blur(14px) saturate(165%);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .22) 100%);
}
body.ciq-body {
  background:
    linear-gradient(180deg, rgba(238, 240, 244, .12) 0%, rgba(238, 240, 244, 0) 55%, rgba(238, 240, 244, .12) 100%),
    url("art/campus.svg") center bottom / cover no-repeat,
    var(--mist);
  background-attachment: fixed;
}
.ciq-sidebar-fixed { background-color: rgba(255, 255, 255, .42); }
.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head { background-color: rgba(252, 232, 222, .58); }
.pz-tint-0 { background-color: rgba(226, 218, 255, .60); }
.pz-tint-1 { background-color: rgba(207, 244, 247, .60); }
.pz-tint-2 { background-color: rgba(221, 246, 233, .62); }
.pz-tint-3 { background-color: rgba(255, 233, 176, .60); }
.pz-tint-4 { background-color: rgba(252, 237, 230, .64); }
.pz-tint-5 { background-color: rgba(238, 233, 255, .64); }
.dash-chart, .dash-meter, .ciq-content .card .card, .ciq-empty, .tw-panel, .et-session { background-color: rgba(238, 240, 244, .42); }
table.is-cards > tbody > tr:not([hidden]):not(.d-none) { background-color: rgba(255, 255, 255, .45); }
.ciq-table td, .table > * > tr > td { background-color: rgba(255, 255, 255, .45); }
.ciq-table, .table { --tbl-head-bg: rgba(245, 246, 249, .55); --tbl-zebra: rgba(255, 255, 255, .45); }
.dash-attention { background-color: rgba(255, 255, 255, .48); }
.et-day { background-color: rgba(255, 255, 255, .40); }
.form-control, .form-select, .ts-wrapper .ts-control { background-color: rgba(232, 235, 241, .68) !important; }
/* text on the thinner glass gets a faint halo so it never drowns in the scene */
.ciq-content :is(.ciq-page-sub, .ciq-hint, .pz-lede, .tv-count) { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }


/* =====================================================================
   §W  THEMES (08-10-2026): <html data-look="rainbow|light|dark">, chosen under Appearance
   in the rail (or the name menu on a phone), kept per device (localStorage "ciq.look").
     rainbow — everything above: the campus, see-through glass, pastel colour (default);
     light   — the same layouts, calm: plain mist, solid white cards, no scene, no blur;
     dark    — smoked glass over the campus at night, light text, coral accents.
   ===================================================================== */

/* ---- the switcher ---- */
.ciq-look { position: relative; }
.ciq-look-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 60;
  padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 40px rgba(17, 20, 27, .2);
  animation: ciq-fade-up .2s cubic-bezier(.2, .7, .2, 1);
}
.ciq-look-kicker { display: block; margin: 0 4px 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ciq-look-options { display: flex; flex-direction: column; gap: 6px; }
.ciq-look-opt {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 8px; border-radius: 14px; border: 1.5px solid transparent; background: transparent; cursor: pointer; font: inherit; color: var(--ink);
}
.ciq-look-opt:hover { background: rgba(17, 20, 27, .05); }
.ciq-look-opt.is-on { border-color: var(--coral); background: var(--coral-soft); }
.ciq-look-opt b { font-size: 14px; font-weight: 800; }
.ciq-look-opt small { grid-column: 2; font-size: 11.5px; color: var(--text-muted); }
.ciq-look-swatch { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(17, 20, 27, .1); }
.ciq-look-swatch.is-rainbow { background: conic-gradient(from 200deg, #FF8A5C, #FFC94D, #3FC48E, #3CC3CF, #8E7CF2, #FF8A5C); }
.ciq-look-swatch.is-light { background: linear-gradient(135deg, #FFFFFF 50%, #EEF0F4 50%); }
.ciq-look-swatch.is-dark { background: linear-gradient(135deg, #1D212C 50%, #FF5B3A 50%); }
.ciq-personal-menu .dropdown-item.is-on { font-weight: 700; color: var(--coral-text); }
.ciq-personal-menu .dropdown-item.is-on::after { content: " ✓"; }
html.ciq-rail-collapsed .ciq-look-panel { left: 0; right: auto; width: 240px; }

/* =========================== LIGHT =========================== */
html[data-look="light"] body.ciq-body { background: var(--mist); }
html[data-look="light"] {
  --glass-fill: rgba(255, 255, 255, .96);
  --glass-chip-fill: rgba(255, 255, 255, .96);
  --glass-blur: none;
  --glass-sheen: none;
}
html[data-look="light"] :is(.ciq-sidebar-fixed, .ciq-content .card:not(.card .card), .pz-section, .pz-auth-card,
  .ciq-content > .ciq-table-scroll, .et-day, .tw-map, .ciq-content > form.ciq-toolbar, .ciq-content > .ciq-toolbar,
  .ciq-content > form.ciq-filter-row, .ciq-content > form.ciq-inline-form, .ciq-content > form.ciq-screen-filter) {
  background-color: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: 0 1px 2px rgba(17, 20, 27, .04);
}
html[data-look="light"] :is(.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head) {
  background-color: var(--peach); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none;
}
html[data-look="light"] .pz-tint-0 { background-color: var(--violet); }
html[data-look="light"] .pz-tint-1 { background-color: var(--cyan); }
html[data-look="light"] .pz-tint-2 { background-color: var(--mint); }
html[data-look="light"] .pz-tint-3 { background-color: var(--yellow); }
html[data-look="light"] .pz-tint-4 { background-color: var(--peach); }
html[data-look="light"] .pz-tint-5 { background-color: var(--lilac); }
html[data-look="light"] :is(.dash-chart, .dash-meter, .ciq-content .card .card, .ciq-empty, .tw-panel, .et-session, .dash-attention) { background-color: var(--mist); }
html[data-look="light"] table.is-cards > tbody > tr:not([hidden]):not(.d-none) { background-color: #FFFFFF; background-image: none; border-color: var(--border); }
html[data-look="light"] :is(.ciq-table td, .table > * > tr > td) { background-color: #FFFFFF; }
html[data-look="light"] :is(.pz-tool, .ciq-content .ciq-dash-tile, .ciq-screen, .dash-campus) { background-image: none; }
html[data-look="light"] .ciq-content :is(.ciq-page-sub, .ciq-hint, .pz-lede, .tv-count) { text-shadow: none; }

/* =========================== DARK =========================== */
html.look-dark {
  color-scheme: dark;
  --ink: #F2F3F7;   --ink-2: #D6D9E2;  --ink-line: #3A4154;
  --mist: #1A1E28;
  --bg: #0E1016;    --surface: #171A23; --surface-2: #1D212C; --surface-3: #232836;
  --border: #2C3242; --border-strong: #3A4154;
  --text: #ECEEF3;  --text-muted: #A6ADBD; --text-faint: #6F7789;
  --brand: #F2F3F7; --brand-strong: #D6D9E2; --on-brand: #11141B; --brand-soft: #232836; --brand-scrim: rgba(242, 243, 247, .18);
  --peach: #2A1E1E; --peach-2: #4A2C25; --peach-muted: #D9B6A8;
  --cyan: #13292E; --yellow: #2C2414; --violet: #211D38; --mint: #13261E; --lilac: #221F33;
  --coral-soft: rgba(255, 91, 58, .16); --coral-text: #FF8A6E;
  --ok: #4FD39A; --warn: #F2C35A; --danger: #FF8A6E; --info: #6FD3DD;
  --ok-soft: rgba(79, 211, 154, .14); --warn-soft: rgba(242, 195, 90, .14); --danger-soft: rgba(255, 138, 110, .14); --info-soft: rgba(111, 211, 221, .14);
  --glass-fill: rgba(23, 26, 35, .62);
  --glass-chip-fill: rgba(35, 40, 54, .66);
  --glass-rim: rgba(255, 255, 255, .08);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .03) 100%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 34px rgba(0, 0, 0, .35);
  --glass-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .25);
  --tbl-head-bg: rgba(29, 33, 44, .8); --tbl-head-fg: var(--text-muted); --tbl-rule: rgba(255, 255, 255, .06);
  --tbl-zebra: rgba(23, 26, 35, .55); --tbl-hover: rgba(255, 255, 255, .05); --tbl-foot-bg: rgba(29, 33, 44, .8);
}
/* the campus at night */
html.look-dark body.ciq-body {
  background:
    linear-gradient(180deg, rgba(10, 12, 20, .78) 0%, rgba(14, 16, 26, .70) 55%, rgba(10, 12, 20, .82) 100%),
    url("art/campus.svg") center bottom / cover no-repeat,
    #0E1016;
  background-attachment: fixed;
}
/* surfaces that were white glass become smoked glass */
html.look-dark :is(.ciq-sidebar-fixed, .offcanvas.ciq-sidebar) { background-color: rgba(20, 23, 31, .72); }
html.look-dark :is(.ciq-apps, .dropdown-menu, .ts-dropdown, .modal-content, .ciq-look-panel) { background-color: rgba(23, 26, 35, .97); border-color: rgba(255, 255, 255, .08); }
html.look-dark :is(.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head) { background-color: rgba(58, 34, 30, .58); border-color: rgba(255, 255, 255, .08); }
html.look-dark .pz-tint-0 { background-color: rgba(91, 71, 200, .24); }
html.look-dark .pz-tint-1 { background-color: rgba(28, 140, 152, .24); }
html.look-dark .pz-tint-2 { background-color: rgba(30, 138, 95, .24); }
html.look-dark .pz-tint-3 { background-color: rgba(176, 122, 12, .24); }
html.look-dark .pz-tint-4 { background-color: rgba(217, 71, 42, .22); }
html.look-dark .pz-tint-5 { background-color: rgba(107, 85, 214, .22); }
html.look-dark :is(.pz-tool, .ciq-content .ciq-dash-tile, .ciq-screen, .dash-campus, table.is-cards > tbody > tr, .et-day) { border-color: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .25); }
html.look-dark :is(.dash-chart, .dash-meter, .ciq-content .card .card, .ciq-empty, .tw-panel, .et-session, .ciq-rail-user, .dash-attention) { background-color: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
html.look-dark table.is-cards > tbody > tr:not([hidden]):not(.d-none) { background-color: rgba(23, 26, 35, .62); }
html.look-dark :is(.ciq-table td, .table > * > tr > td) { background-color: rgba(23, 26, 35, .55); color: var(--text); }
/* the small white chips and wells */
html.look-dark :is(.pz-pill, .pz-facts > div, .pz-bubble, .dash-filters .ciq-screen-filter, .ciq-rail-collapse, .ciq-rail-btn:not(.ciq-rail-signout),
  .ciq-identity, .ciq-apps-btn, .pz-auth-tenant, .dash-chart-total, .pz-tool-ico, .pz-tool-go, .pz-tool-chips > span, .pz-tool-count,
  .dash-attention-list li, .dash-campus-stats > div, .dash-campus-seats, .et-date, .et-paper-tags > span, .et-session-count, .tw-day, .tw-no,
  .tw-map, .tw-duties li, .tw-duty-date, .tv-seg, .tv-find input, .dash-campus-table > summary, .tw-grid > summary, .ciq-nav-ico, .ciq-code,
  .ciq-tile-ico ~ *, .et-summary > div, .ciq-launch-ico, .ciq-screen-ico, .ciq-persona) {
  background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .08); color: var(--text);
}
html.look-dark .ciq-tile-ico ~ * { background-color: transparent; }
html.look-dark .ciq-rail-signout { background-color: rgba(255, 91, 58, .14); color: #FF9F88; border-color: rgba(255, 91, 58, .2); }
html.look-dark .dash-chart .ciq-bar, html.look-dark :is(.dash-col-track, .dash-meter-track, .dash-campus-meter .dash-meter-track) { background: rgba(255, 255, 255, .08); box-shadow: none; }
html.look-dark .ciq-bar-row:hover { background: rgba(255, 255, 255, .05) !important; }
html.look-dark :is(.form-control, .form-select, .ts-wrapper .ts-control) { background-color: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .12) !important; color: var(--text) !important; }
html.look-dark :is(.form-control, .form-select):focus { background-color: rgba(255, 255, 255, .12) !important; border-color: var(--coral) !important; }
html.look-dark .form-control::placeholder { color: var(--text-faint); }
html.look-dark .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A6ADBD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-image: var(--bs-form-select-bg-img) !important; }
/* things drawn in "ink" with white text now use light ink with dark text */
html.look-dark :is(.btn-primary, .pz-submit, .pz-cta, .ciq-nav-link.is-active, details.ciq-nav-group[open] > summary.ciq-nav-link.is-active,
  .tv-seg-btn.is-on, .tw-day.is-on, .et-summary .et-next, .ciq-rail-avatar, .ciq-sidebar-brand .ciq-brand-mark, .pz-logo-mark,
  .st-tab.is-on, .nav-tabs .nav-link.active, .ciq-filter-tab--on, .chip-ink, a.pz-tool:hover .pz-tool-go, .ciq-screen:hover, .kbd) {
  color: #11141B !important;
}
html.look-dark :is(.ciq-nav-link.is-active .ciq-nav-ico) { background: rgba(17, 20, 27, .1); color: #11141B; }
html.look-dark a.ciq-nav-link.is-active::after { color: rgba(17, 20, 27, .6); }
html.look-dark .tw-day.is-on .tw-day-count, html.look-dark .et-summary .et-next b { color: #D9472A; }
html.look-dark .ciq-sidebar-brand .ciq-brand-word, html.look-dark .pz-logo-word { color: #F2F3F7; }
/* text */
html.look-dark body.ciq-body, html.look-dark :is(h1, h2, h3, h4, .ciq-page-title, .ciq-card-title, .pz-h1, .pz-h2) { color: var(--text); }
html.look-dark .ciq-content :is(.ciq-page-sub, .ciq-hint, .pz-lede, .tv-count) { text-shadow: none; }
html.look-dark :is(.pz-tool-meta, .db-tool-meta, .ciq-dash-tile .ciq-hint, .dash-campus-label, .dash-campus-seats-head span, .et-date-week, .tw-duty-text, .pz-legal) { color: var(--text-muted) !important; }
html.look-dark .ciq-content .ciq-dash-label, html.look-dark .dash-campus-stats dt { color: var(--text-muted); opacity: 1; }
html.look-dark a { color: #FF9F88; }
html.look-dark .card { --bs-card-color: var(--text); }
html.look-dark .ciq-note { background: var(--info-soft); color: var(--text); }
html.look-dark .ciq-warn { background: var(--warn-soft); color: var(--warn); }
html.look-dark .alert { --bs-alert-color: var(--text); }
/* subject colours stay pastel, so they read as labels on the dark panes */
html.look-dark :is(.et-paper, .tw-map-cell:not(.is-free), .ciq-chip) { filter: saturate(.9) brightness(.92); }
html.look-dark .et-paper-name { color: #11141B; }
html.look-dark .tw-map-cell.is-free { background: rgba(255, 255, 255, .05); }
html.look-dark .tw-free, html.look-dark .et-session.is-free { border-color: rgba(255, 255, 255, .12); }
html.look-dark .tw-line::before { background: rgba(255, 255, 255, .1); }
html.look-dark .tw-slot::before { background: #1D212C; }
html.look-dark .ciq-look-opt:hover { background: rgba(255, 255, 255, .06); }
html.look-dark .ciq-look-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
html.look-dark .gm-foot { color: var(--text-muted); }
html.look-dark .gm-foot .gm-link { color: var(--text); }
/* dark: coral only for plain links; menu items, chips and tiles keep their own colours */
html.look-dark a { color: inherit; }
html.look-dark :is(.ciq-content, .gm-foot, .pz-auth) a:not([class]), html.look-dark a.st-link, html.look-dark .btn-link { color: #FF9F88; }
html.look-dark :is(.ciq-nav-link, .ciq-nav-sublink, .ciq-nav-grouplink) { color: var(--text); }
html.look-dark .ciq-nav-sublink { color: var(--text-muted); }
html.look-dark .ciq-nav-sublink.is-active, html.look-dark .ciq-nav-sublink:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
html.look-dark .ciq-nav-link:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
html.look-dark a.ciq-chip, html.look-dark .ciq-chip { color: var(--tt-fg); }
html.look-dark :is(a.pz-tool, a.ciq-launch, a.ciq-screen, a.ciq-app-tile, .pz-logo) { color: var(--text); }
html.look-dark :is(.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head) { background-color: rgba(46, 32, 48, .64); }
.ciq-content > .ciq-page-head > .card { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.look-dark .tw-day.is-on, html.look-dark .et-summary > .et-next, html.look-dark a.pz-tool:hover .pz-tool-go { background-color: var(--ink); border-color: var(--ink); color: #11141B; }
html.look-dark .tw-day.is-on .tw-day-name { opacity: .75; }

/* dark status badges: coloured directly, so the shared tone tokens (and their AA test) stay the light palette */
html.look-dark .ciq-badge--green { background: rgba(79, 211, 154, .16); color: #7FE3B6; }
html.look-dark .ciq-badge--amber { background: rgba(242, 195, 90, .16); color: #F5D27F; }
html.look-dark .ciq-badge--red { background: rgba(255, 138, 110, .16); color: #FFA28A; }
html.look-dark .ciq-badge--blue { background: rgba(111, 211, 221, .16); color: #93E0E7; }
html.look-dark :is(.ciq-badge--neutral, .ciq-badge--default) { background: rgba(255, 255, 255, .08); color: #C3C8D4; }


/* =====================================================================
   §X  EIGHT THEMES (08-10-2026). The campus now sits on its own fixed layer
   (body::before) so a theme can recolour it with a filter, with a wash over it
   (body::after). A theme sets: the page colour, --art-filter, --art-wash, the accent
   (the coral family), the banner tint and the wordmark gradient. Dark and Midnight
   share every dark-family rule through html.look-dark.
   ===================================================================== */
html { background: var(--page, #EEF0F4); }
body.ciq-body { background: transparent !important; }
body.ciq-body::before, body.ciq-body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body.ciq-body::before { z-index: -2; background: url("art/campus.svg") center bottom / cover no-repeat; filter: var(--art-filter, none); }
body.ciq-body::after { z-index: -1; background: var(--art-wash, none); }
@media (max-width: 767.98px) { body.ciq-body::before { background-size: auto 70vh; } }
@media (prefers-reduced-transparency: reduce) { body.ciq-body::before, body.ciq-body::after { display: none; } }
@media print { body.ciq-body::before, body.ciq-body::after { display: none; } html { background: #fff; } }

:root {
  --page: #EEF0F4;
  --art-wash: linear-gradient(180deg, rgba(238, 240, 244, .12), rgba(238, 240, 244, 0) 55%, rgba(238, 240, 244, .12));
  --banner: rgba(252, 232, 222, .58);
  --zee: linear-gradient(90deg, #FF6A4D, #FF8A5C);
}
.pz-zee { background: var(--zee); -webkit-background-clip: text; background-clip: text; }
.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title,
.ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head { background-color: var(--banner); }

/* light: no scene */
html[data-look="light"] { --page: #EEF0F4; --banner: var(--peach); }
html[data-look="light"] body.ciq-body::before, html[data-look="light"] body.ciq-body::after { display: none; }

/* dark: the campus at night */
html[data-look="dark"] { --page: #0E1016; --art-filter: brightness(.55) saturate(.75); --art-wash: linear-gradient(180deg, rgba(10, 12, 20, .62), rgba(14, 16, 26, .5) 55%, rgba(10, 12, 20, .7)); --banner: rgba(46, 32, 48, .64); }

/* ocean: cool blues and teals */
html[data-look="ocean"] {
  --page: #E6F4FA;
  --art-filter: hue-rotate(165deg) saturate(1.05);
  --art-wash: linear-gradient(180deg, rgba(224, 242, 254, .25), rgba(186, 230, 253, .08) 55%, rgba(224, 242, 254, .2));
  --banner: rgba(214, 238, 250, .62);
  --coral: #0EA5E9; --coral-text: #0369A1; --coral-ink: #075985; --coral-soft: #E0F2FE;
  --peach: #DFF1FA; --peach-2: #BAE6FD; --peach-muted: #4B6B7C;
  --zee: linear-gradient(90deg, #0284C7, #22D3EE);
}
/* sunset: warm rose and amber */
html[data-look="sunset"] {
  --page: #FCEFEA;
  --art-filter: hue-rotate(-18deg) saturate(1.45);
  --art-wash: linear-gradient(180deg, rgba(255, 196, 160, .25), rgba(255, 150, 170, .08) 55%, rgba(255, 210, 180, .22));
  --banner: rgba(255, 222, 214, .62);
  --coral: #F43F5E; --coral-text: #BE123C; --coral-ink: #9F1239; --coral-soft: #FFE4E6;
  --peach: #FFE6DE; --peach-2: #FECDD3; --peach-muted: #8A5A60;
  --zee: linear-gradient(90deg, #F43F5E, #FB923C);
}
/* forest: fresh greens */
html[data-look="forest"] {
  --page: #EAF5EE;
  --art-filter: hue-rotate(75deg) saturate(.95);
  --art-wash: linear-gradient(180deg, rgba(220, 245, 228, .25), rgba(187, 247, 208, .06) 55%, rgba(220, 245, 228, .2));
  --banner: rgba(220, 242, 226, .62);
  --coral: #16A34A; --coral-text: #15803D; --coral-ink: #166534; --coral-soft: #DCFCE7;
  --peach: #E3F4E8; --peach-2: #BBF7D0; --peach-muted: #4F6F58;
  --zee: linear-gradient(90deg, #16A34A, #84CC16);
}
/* lavender: soft purples */
html[data-look="lavender"] {
  --page: #F1EEFB;
  --art-filter: hue-rotate(235deg) saturate(.9);
  --art-wash: linear-gradient(180deg, rgba(237, 233, 254, .28), rgba(221, 214, 254, .08) 55%, rgba(237, 233, 254, .22));
  --banner: rgba(234, 228, 255, .62);
  --coral: #8B5CF6; --coral-text: #6D28D9; --coral-ink: #5B21B6; --coral-soft: #EDE9FE;
  --peach: #EEE9FE; --peach-2: #DDD6FE; --peach-muted: #66597F;
  --zee: linear-gradient(90deg, #7C3AED, #EC4899);
}
/* midnight: dark, with neon */
html[data-look="midnight"] {
  --page: #090B18;
  --art-filter: hue-rotate(200deg) brightness(.45) saturate(1.4);
  --art-wash: radial-gradient(60vw 50vh at 85% 10%, rgba(34, 211, 238, .14), transparent 70%), radial-gradient(50vw 50vh at 10% 90%, rgba(217, 70, 239, .14), transparent 70%), linear-gradient(180deg, rgba(9, 11, 24, .55), rgba(9, 11, 24, .45) 55%, rgba(9, 11, 24, .65));
  --banner: rgba(30, 32, 72, .62);
  --coral: #22D3EE; --coral-text: #67E8F9; --coral-soft: rgba(34, 211, 238, .14);
  --zee: linear-gradient(90deg, #22D3EE, #E879F9);
}
html[data-look="midnight"] a.st-link, html[data-look="midnight"] .ciq-content a:not([class]) { color: #67E8F9; }
html[data-look="midnight"] :is(.tw-day.is-on, .tv-seg-btn.is-on, .ciq-nav-link.is-active) { box-shadow: 0 0 0 1px rgba(34, 211, 238, .5), 0 0 18px rgba(34, 211, 238, .25); }
html[data-look="midnight"] .dash-attention-total { color: #67E8F9; text-shadow: 0 0 18px rgba(34, 211, 238, .45); }
html.look-dark .ciq-rail-signout { color: var(--coral-text); }

/* the accent reaches the live dots, the Open pills' hover, the coral buttons */
.pz-live, .tw-slot.is-now .tw-flag, .tw-slot.is-now .tw-no { background: var(--coral); }

/* ---- the switcher: a grid of eight ---- */
.ciq-look-panel { left: 0; right: auto; width: 300px; }
.ciq-look-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ciq-look-opt { grid-template-columns: 30px 1fr; padding: 7px; column-gap: 8px; }
.ciq-look-opt b { font-size: 13px; }
.ciq-look-opt small { font-size: 10.5px; line-height: 1.2; }
.ciq-look-swatch { width: 30px; height: 30px; border-radius: 10px; }
.ciq-look-swatch.is-ocean { background: linear-gradient(135deg, #BAE6FD, #0EA5E9 55%, #0369A1); }
.ciq-look-swatch.is-sunset { background: linear-gradient(135deg, #FED7AA, #FB923C 45%, #F43F5E); }
.ciq-look-swatch.is-forest { background: linear-gradient(135deg, #D9F99D, #4ADE80 45%, #15803D); }
.ciq-look-swatch.is-lavender { background: linear-gradient(135deg, #F5D0FE, #A78BFA 50%, #6D28D9); }
.ciq-look-swatch.is-midnight { background: radial-gradient(circle at 70% 30%, #22D3EE 0 18%, transparent 19%), radial-gradient(circle at 30% 75%, #E879F9 0 14%, transparent 15%), #0B0D1A; }
.ciq-personal-menu { max-height: 70vh; overflow-y: auto; }
html.look-dark :is(.pz-hero, .pz-auth-hero, .ciq-content > .ciq-page-head, .ciq-content > h1.ciq-page-title, .ciq-content > h1.ciq-page-title + .ciq-page-sub, .ciq-content > .ciq-app-head) { background-color: var(--banner); }
.ciq-look-panel { left: 0; right: 0; width: auto; padding: 12px; }
.ciq-look-opt { grid-template-columns: 26px 1fr; padding: 6px; column-gap: 7px; }
.ciq-look-opt small { display: none; }
.ciq-look-opt b { align-self: center; grid-row: 1 / 3; }
.ciq-look-swatch { width: 26px; height: 26px; border-radius: 8px; }
@media (max-width: 991px) { html.look-dark .ciq-topbar { background: rgba(14, 16, 24, .78); border-bottom-color: rgba(255, 255, 255, .08); } }
html.look-dark :is(.ciq-apps-btn, .ciq-topbar-toggle, .ciq-identity) { background-color: rgba(255, 255, 255, .08); color: var(--text); border-color: rgba(255, 255, 255, .1); }
html.look-dark .ciq-identity-name { color: var(--text); } html.look-dark .ciq-identity-roles { color: var(--text-muted); }
html.look-dark .ciq-topbar .btn-secondary { --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-color: var(--text); --bs-btn-hover-bg: rgba(255, 255, 255, .14); --bs-btn-hover-color: var(--text); }

/* audit fixes (dark family): table heads, exam-day cards, card subtitles, today chips */
html.look-dark :is(.ciq-table, .table) { --tbl-head-bg: rgba(29, 33, 44, .85); --tbl-head-fg: #A6ADBD; --tbl-zebra: rgba(23, 26, 35, .55); --tbl-hover: rgba(255, 255, 255, .05); --tbl-foot-bg: rgba(29, 33, 44, .85); --tbl-rule: rgba(255, 255, 255, .06); --tbl-head-rule: rgba(255, 255, 255, .1); }
html.look-dark :is(.ciq-table th, .table > * > tr > th) { background-color: var(--tbl-head-bg); color: var(--tbl-head-fg); }
html.look-dark .et-day { background-color: rgba(23, 26, 35, .62); }
html.look-dark :is(.et-date-week, .et-session-head b, .tc-sub, table.is-cards > tbody > tr > td.tc-sub) { color: var(--text-muted) !important; }
html.look-dark :is(.et-free, .tw-free) { color: #8A92A4; }
html.look-dark .et-date-status { background: rgba(255, 255, 255, .08); color: var(--text); }
html.look-dark .et-day.is-past .et-date-status { background: rgba(79, 211, 154, .16); color: #7FE3B6; }
html.look-dark :is(.tt-day-date.is-today, .tt-grid th.tt-day.is-today .tt-day-date) { color: #11141B; }
html.look-dark .ciq-code { color: #E6E8EE; background: rgba(255, 255, 255, .1); }
html.look-dark table.is-cards > tbody > tr > td.tc-title .ciq-code { background: color-mix(in srgb, var(--acc) 30%, transparent); color: color-mix(in srgb, var(--acc) 35%, #fff); }
html:not(.look-dark) :is(.et-free, .tw-free) { color: var(--text-muted); }
html.look-dark .dash-campus-seats { background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important; }
html.look-dark .dash-campus-meter:not(.dash-campus-seats) { background: transparent !important; }
html.look-dark .dash-campus-seats-head b { color: var(--text); } html.look-dark .dash-campus-seats-head span { color: var(--text-muted); }
html.look-dark .dash-campus-note { color: color-mix(in srgb, var(--acc) 40%, #fff); }

/* =====================================================================
   §Y  STUDIO OVER THE NEWER SCREENS (08-10-2026, the merge into this tree).
   The Studio sections above were written for an older tree; these rules bring the screens
   added since (2a-E's coloured left edge, Home's daily tiles, the undo line, the
   "Written" fold, announcements, the phone's tab bar) into the same look.
   ===================================================================== */
/* 2a-E: cards are flat white in Studio, so the plain left edge goes; the toned lines of
   "Waiting for you" keep theirs (amber waiting, red overdue), as Studio's coral marks. */
.ciq-edge,
.ciq-body .card,
.ciq-body .ciq-panel,
.ciq-launch,
.tt-daycard { border-left: 0; }
.ciq-edge-line { border-left-width: 4px; border-radius: 14px; background: var(--mist); }
.ciq-edge-line a { color: var(--ink); font-weight: 600; }

/* Home: the daily tiles as Studio's pastel tool cards (the tile markup is unchanged). */
.ciq-daily-tiles .ciq-launchpad-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ciq-daily-tiles .ciq-launch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 150px; padding: 20px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 22px;
  background-image: var(--glass-sheen); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 20px rgba(17, 20, 27, .05);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.ciq-daily-tiles .ciq-launch:nth-child(6n+1) { background-color: rgba(226, 218, 255, .78); --acc: #5B47C8; }
.ciq-daily-tiles .ciq-launch:nth-child(6n+2) { background-color: rgba(207, 244, 247, .78); --acc: #1C8C98; }
.ciq-daily-tiles .ciq-launch:nth-child(6n+3) { background-color: rgba(221, 246, 233, .80); --acc: #1E8A5F; }
.ciq-daily-tiles .ciq-launch:nth-child(6n+4) { background-color: rgba(255, 233, 176, .78); --acc: #B07A0C; }
.ciq-daily-tiles .ciq-launch:nth-child(6n+5) { background-color: rgba(252, 237, 230, .82); --acc: #D9472A; }
.ciq-daily-tiles .ciq-launch:nth-child(6n+6) { background-color: rgba(238, 233, 255, .82); --acc: #6B55D6; }
.ciq-daily-tiles .ciq-launch:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 36px color-mix(in srgb, var(--acc, #11141B) 18%, transparent); color: var(--ink); }
.ciq-daily-tiles .ciq-launch-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .75); font-size: 21px; color: var(--acc, var(--ink)); }
.ciq-daily-tiles .ciq-launch-text b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ciq-daily-tiles .pz-tool-go { margin-top: auto; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 700; }
.ciq-daily-tiles .ciq-launch:hover .pz-tool-go { background: var(--ink); color: #fff; }
.ciq-daily-tiles .ciq-launch:hover .pz-tool-arrow { display: inline-block; transform: translateX(4px); }
.ciq-profile-strip.pz-lede { margin: 0; }
/* "Your day" takes the next number of the page's sections (the cards' own counter). */
.ciq-daily-head { display: flex; align-items: center; gap: 12px; }
.ciq-daily-head::before {
  counter-increment: ciq-sec; content: counter(ciq-sec);
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: 0; background: #DDF6F8; color: var(--cyan-ink);
}

/* 2f: the Placements section (``_placements.html``) as a white Studio section, and a
   figure written in words ("No accepted offers yet") wraps instead of running out of its tile. */
.ciq-placements { padding: 28px; border-radius: var(--r-xl); background: var(--surface); margin-bottom: 18px; }
.ciq-placements > .ciq-section-title { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; }
.ciq-content .ciq-dash-figure { white-space: normal; overflow-wrap: anywhere; }
.ciq-placements .ciq-dash-figure { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15; }
html.look-dark .ciq-placements { background: rgba(255, 255, 255, .05); }

/* 2a-1: nothing on the Dashboard is coloured by its position, so every tile takes ONE
   glass tint and one accent (the Studio sections above once rotated five by position). */
.ciq-content .ciq-dash-tile { background-color: rgba(255, 255, 255, .62); --acc: #5B47C8; --acc-2: #8E7CF2; }
.ciq-dash-tile .ciq-dash-label { color: var(--ink); opacity: .75; }
html[data-look="light"] .ciq-content .ciq-dash-tile { background-color: var(--surface); }
html.look-dark .ciq-content .ciq-dash-tile { background-color: rgba(255, 255, 255, .05); }

/* 10b-2's undo line, the message box and a row's confirm panel: pills and soft panels. */
.ciq-done-line { border-radius: 18px; border-left: 0; background: var(--mint, #DDF6E9); }
.ciq-undo-btn, .ciq-refusal-actions .btn { border-radius: 999px; }
.ciq-refusal { border: 0; border-radius: 22px; }
.ciq-confirm-panel { border-left: 0; border-radius: 14px; }

/* 10b-M (MB5): past exam days fold under "Written". */
.ciq-written { margin-top: 12px; }
.ciq-written > summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--surface); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.ciq-written[open] > summary { margin-bottom: 12px; }
.et-timeline .ciq-written > .et-day { margin-top: 12px; }

/* 10b-M (MB1): the phone's bottom tab bar, as the Studio top bar. */
.ciq-tabbar { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 0; box-shadow: 0 -6px 20px rgba(17, 20, 27, .06); }
html.look-dark .ciq-tabbar { background: rgba(14, 16, 24, .82); }
html.look-dark :is(.ciq-edge-line, .ciq-written > summary) { background: rgba(255, 255, 255, .06); color: var(--text); }
html.look-dark .ciq-daily-tiles .ciq-launch { background-color: rgba(255, 255, 255, .06); color: var(--text); border-color: rgba(255, 255, 255, .08); }
html.look-dark .ciq-daily-tiles .ciq-launch-ico, html.look-dark .ciq-daily-tiles .pz-tool-go { background: rgba(255, 255, 255, .1); }

/* 08-10-2026: CampusEZee brand in the rail -- Fluenzee's 3D bars-and-arrow mark (campus
   "ink" palette) in place of the "CI" tile; Campus in black, EZee in red. */
.ciq-sidebar-brand .ciq-brand-mark--3d { width: auto; height: 38px; background: none; border-radius: 0; padding: 0; display: block; flex: none; }
/* position: relative from the start: the flat SVG inside is absolutely placed, and before the
   3D script defines the tag it would otherwise fill the whole rail (seen on reload). */
.ciq-sidebar-brand .ciq-brand-logo { display: block; position: relative; height: 38px; aspect-ratio: 3 / 2; overflow: hidden; }
.ciq-sidebar-brand .ciq-brand-word--ezee { color: #11141b; }
.ciq-sidebar-brand .ciq-brand-word--ezee em { font-style: normal; color: #ff5d38; }