/* «Estudi» (ADR 0028): the page head (eyebrow and headline), the shared pieces the screens
   are built from (stats, sheets, tags, segmented controls, switches, meters, class group
   colours), the connectors, the empty states, the sign-in page and the entrance
   choreography. The view transitions between pages are in sidebar.css (a school's pages
   only). Loaded by base.html after the page's own CSS (never by the questionnaire).
   Colours come from tokens.css only. The catalogue of these pieces for the stage-2
   screens: docs/design/estudi-stage2.md. */

/* ------------------------------------------------------------------ page head */
/* The eyebrow: a short rule and a line of mono capitals (the breadcrumbs, or this). */
.c-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) .875rem; margin: 0 0 var(--sp-3);
  color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase;
}
.c-eyebrow::before { content: ""; flex: 0 0 1.75rem; height: 1px; background: var(--c-ink-3); }
/* The headline: Bricolage at 40-76 px, tight but never touching (-0.024em, not the
   prototype's -0.032em). The h1 keeps a meaningful name: a visually hidden section name
   goes before a playful headline. */
.c-hero, .c-page__title, .has-shell main > h1:first-child, .has-shell main > .c-crumbs + h1 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; line-height: .96;
  letter-spacing: var(--track-hero); font-variation-settings: "wdth" 92, "opsz" 96; text-wrap: balance;
}
.c-hero--giant { font-size: var(--fs-giant); line-height: .92; letter-spacing: var(--track-hero); }
.c-hero--sub { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); }
.c-hero em, .c-page__title em { font-style: normal; color: var(--c-ink-3); }
.c-lede { max-width: 56ch; margin: var(--sp-3) 0 0; color: var(--c-ink-2); font-size: var(--fs-lg); line-height: 1.5; }
.c-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) 1.875rem; margin: 0 0 1.75rem; }
.c-head__main { flex: 1 1 24rem; min-width: 0; }

/* ------------------------------------------------------------------ numbers */
.c-stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) 2.125rem; margin: 0; padding: 0; }
.c-stat { display: grid; gap: var(--sp-1); margin: 0; }
.c-stat__n, .c-stats dd {
  order: -1; margin: 0; font-family: var(--font-display); font-size: 2.875rem; font-weight: 700; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 92, "opsz" 96;
}
.c-stat__n small { margin-left: 2px; color: var(--c-ink-3); font-size: .4em; font-weight: 500; letter-spacing: -.01em; }
.c-stat__l, .c-stats dt { color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.c-stat--alert .c-stat__n, .c-stats .c-stat--alert dd { color: var(--c-danger); }
.c-stat--big .c-stat__n { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* ------------------------------------------------------------------ surfaces */
/* A held sheet (white, a hairline ring, a contact shadow). Most content sits on paper. */
.c-sheet { background: var(--c-sheet); border-radius: var(--r-lg); box-shadow: var(--sh-1), 0 0 0 1px var(--c-line); }
.c-sheet--pad { padding: 1.25rem; }
.c-rule { border: 0; border-top: 1px solid var(--c-ink); margin: var(--sp-5) 0; }
.c-kv { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 6px var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.c-kv dt { padding-top: 3px; color: var(--c-ink-3); font-family: var(--font-mono); font-size: .65625rem; letter-spacing: var(--track-mono); text-transform: uppercase; }
.c-kv dd { margin: 0; }

/* ------------------------------------------------------------------ class group colours */
/* .g-N carries class group N's fill, tint, stroke and text-on-fill to a component, which
   uses --gc, --gt, --gs and --gi (a group header, a tab, a rule, a chip). */
.g-1 { --gc: var(--viz-c1); --gt: var(--viz-t1); --gs: var(--viz-s1); --gi: var(--viz-ink1); }
.g-2 { --gc: var(--viz-c2); --gt: var(--viz-t2); --gs: var(--viz-s2); --gi: var(--viz-ink2); }
.g-3 { --gc: var(--viz-c3); --gt: var(--viz-t3); --gs: var(--viz-s3); --gi: var(--viz-ink3); }
.g-4 { --gc: var(--viz-c4); --gt: var(--viz-t4); --gs: var(--viz-s4); --gi: var(--viz-ink4); }
.g-5 { --gc: var(--viz-c5); --gt: var(--viz-t5); --gs: var(--viz-s5); --gi: var(--viz-ink5); }
.g-6 { --gc: var(--viz-c6); --gt: var(--viz-t6); --gs: var(--viz-s6); --gi: var(--viz-ink6); }
.g-7 { --gc: var(--viz-c7); --gt: var(--viz-t7); --gs: var(--viz-s7); --gi: var(--viz-ink7); }
.g-8 { --gc: var(--viz-c8); --gt: var(--viz-t8); --gs: var(--viz-s8); --gi: var(--viz-ink8); }
/* A row's group mark (lists, attention rows): a 6 px bar at the left edge. */
.c-gbar { box-shadow: inset 6px 0 0 var(--gc, var(--c-ink)); }
/* A group header: a 3 px top rule (board columns) or a tinted head with an inset rule. */
.c-ghead { box-shadow: inset 0 3px 0 var(--gc, var(--c-ink)); }
.c-ghead--tint { background: var(--gt, var(--c-paper)); box-shadow: inset 0 4px 0 var(--gc, var(--c-ink)); }

/* ------------------------------------------------------------------ tags: quiet, mono, never pills */
.c-tag {
  display: inline-flex; align-items: center; min-height: 1.125rem; padding: 0 5px; border: 1px solid var(--c-line-2); border-radius: 1px;
  color: var(--c-ink-2); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; white-space: nowrap;
}
.c-tag--strong { border-color: var(--c-ink); color: var(--c-ink); }
.c-tag--alert { border-color: currentColor; color: var(--c-danger-text); }
.c-tag--good { border-color: currentColor; color: var(--c-success-text); }
.c-tag--solid { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-paper); }

/* ------------------------------------------------------------------ segmented controls, tabs, switches */
/* Segmented: a well with a white knob on the pressed button (aria-pressed or aria-current). */
.c-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 5px; background: var(--c-well); }
.c-seg__btn, .c-seg > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0 var(--sp-3); border: 0; border-radius: 3px;
  background: transparent; box-shadow: none; color: var(--c-ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 550; text-decoration: none;
  cursor: pointer; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.c-seg__btn:hover, .c-seg > a:hover { background: transparent; color: var(--c-ink); transform: none; box-shadow: none; }
.c-seg__btn[aria-pressed="true"], .c-seg > a[aria-current] { background: var(--c-sheet); color: var(--c-ink); box-shadow: var(--sh-1); }
.c-seg--menu { display: flex; margin: 0; }
.c-seg--menu .c-seg__btn { flex: 1 1 auto; min-height: var(--h-touch); }
@media (pointer: coarse) { .c-seg__btn, .c-seg > a { min-height: var(--h-touch); } }
/* Group tabs: joined boxes; the current one takes its group's tint and a 3 px rule. */
.c-gtabs { display: inline-flex; overflow: hidden; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--c-line-2); }
.c-gtabs > :is(a, button):hover { background: var(--c-paper); color: var(--c-ink); transform: none; box-shadow: none; }
.c-gtabs > :is(a, button, span) {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: 0; background: var(--c-sheet);
  color: var(--c-ink); font: inherit; font-size: var(--fs-sm); font-weight: 650; text-decoration: none; box-shadow: none;
}
.c-gtabs > * + * { border-left: 1px solid var(--c-line-2); }
.c-gtabs > :is([aria-current], [aria-pressed="true"]) { background: var(--gt, var(--c-paper-2)); box-shadow: inset 0 -3px 0 var(--gc, var(--c-ink)); }
.c-gtabs .c-dot { display: none; }
/* A toggle: a button[aria-pressed] with a track and a knob that springs across (a form
   field is input.c-switch, sociogram/flow.css). */
.c-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.25rem; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--c-ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 550; cursor: pointer; }
.c-toggle:hover { background: transparent; color: var(--c-ink); transform: none; box-shadow: none; }
.c-toggle__track { position: relative; flex: none; width: 1.875rem; height: 1.125rem; border-radius: 9px; background: var(--c-border-strong); transition: background-color 250ms var(--ease); }
.c-toggle__track::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: .875rem; height: .875rem; border-radius: 50%; background: var(--c-sheet);
  box-shadow: var(--sh-1); transition: transform 400ms var(--spring);
}
.c-toggle[aria-pressed="true"] { color: var(--c-ink); }
.c-toggle[aria-pressed="true"] .c-toggle__track { background: var(--c-ink); }
.c-toggle[aria-pressed="true"] .c-toggle__track::after { transform: translateX(.75rem); }

/* ------------------------------------------------------------------ meters */
.c-track { position: relative; height: 6px; border-radius: 1px; background: var(--c-paper-2); }
.c-track__fill { position: absolute; inset: 0 auto 0 0; border-radius: 1px; background: var(--c-ink-2); transition: width 600ms var(--spring); }
.c-track__tick { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--c-ink); opacity: .45; }
.c-pips { display: inline-flex; align-items: center; gap: 3px; height: .625rem; }
.c-pips > i { width: 7px; height: 10px; border-radius: 1px; background: var(--c-paper-2); }
.c-pips > i.is-on { background: var(--c-ink-2); }

/* ------------------------------------------------------------------ connectors (ADR 0026) */
/* «Torna a …»: a quiet button with the arrow, at the left of a flow's footer or above the h1. */
.c-back { display: inline-flex; align-items: center; gap: var(--sp-2); }
.c-back .icon { width: 1rem; height: 1rem; transition: transform 300ms var(--spring); }
.c-back:hover .icon { transform: translateX(-3px); }
.c-back--top { margin: 0 0 var(--sp-2) calc(-1 * var(--sp-2)); }
/* «Què vols fer ara?»: a ruled row of next jobs, one primary (ink rule on top). */
.c-next { margin: var(--sp-7) 0 var(--sp-4); padding: 0; }
.c-next__title { display: flex; align-items: center; gap: .875rem; margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--track-display); }
.c-next__title .icon { display: none; }
.c-next__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-ink); }
@media (min-width: 64rem) { .c-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-next__list > li + li { border-left: 1px solid var(--c-line); } }
.c-next__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-1) var(--sp-3); height: 100%; min-height: 6.5rem; box-sizing: border-box;
  padding: var(--sp-4) 1.375rem var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none;
  transition: background-color var(--dur-2) var(--ease);
}
.c-next__item:hover { background: var(--c-sheet); color: var(--c-ink); }
.c-next__item--primary { box-shadow: inset 0 3px 0 var(--c-ink); }
.c-next__icon { display: none; }
.c-next__text { display: grid; gap: var(--sp-1); min-width: 0; align-self: start; }
.c-next__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650; letter-spacing: var(--track-display); line-height: 1.15; font-variation-settings: "wdth" 92, "opsz" 24; }
.c-next__hint { color: var(--c-ink-2); font-size: var(--fs-sm); }
.c-next__arrow { color: var(--c-ink); transition: transform 350ms var(--spring); }
.c-next__item:hover .c-next__arrow { transform: translateX(5px); }
/* A message's one link (R9). */
.c-alert__link { margin-left: var(--sp-1); font-weight: 600; }

/* ------------------------------------------------------------------ error pages */
.c-error-page { margin-top: var(--sp-6); }
.c-error-page .c-empty__title { max-width: 18ch; font-size: var(--fs-hero); line-height: .96; letter-spacing: var(--track-hero); font-variation-settings: "wdth" 92, "opsz" 96; }
.c-error-page .c-empty__text { font-size: var(--fs-lg); }

/* ------------------------------------------------------------------ sign-in: two columns */
.is-signin, .is-signin .c-header { background: var(--c-paper); }
.is-signin .c-header { border-bottom: 0; }
.is-signin main { max-width: none; padding: 0; }
.c-signin__art { display: none; }
.c-signin__panel { width: min(26rem, 100%); margin: var(--sp-6) auto var(--sp-7); padding: 0 var(--gutter); box-sizing: border-box; }
.c-signin__brand { display: flex; align-items: center; gap: .625rem; margin: 0 0 var(--sp-6); }
.c-signin__panel h1 { margin: 0; font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); line-height: .96; letter-spacing: var(--track-hero); font-variation-settings: "wdth" 92, "opsz" 96; }
.c-signin__lead { margin: var(--sp-3) 0 var(--sp-6); color: var(--c-ink-2); font-size: var(--fs-lg); }
.c-signin__panel button[type="submit"] { width: 100%; min-height: var(--h-touch); }
.c-signin__links { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.c-signin__lock { display: flex; gap: var(--sp-2); margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); color: var(--c-text-muted); font-size: var(--fs-sm); }
.c-signin__lock .icon { margin-top: .15em; }
@media (min-width: 64rem) {
  /* The left half is a sheet of the year: the class as three bands of colour and a line of
     type; the form takes the right half on the paper. */
  .is-signin { padding-left: 50%; }
  .c-signin__art {
    position: fixed; inset: 0 50% 0 0; display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-5); padding: var(--sp-7);
    background: var(--c-sheet); border-right: 1px solid var(--c-line);
  }
  .c-signin__tagline { max-width: 18ch; margin: 0; align-self: end; font-family: var(--font-display); font-size: clamp(2.75rem, 1rem + 3.4vw, 4.75rem); font-weight: 700; line-height: .96; letter-spacing: var(--track-hero); font-variation-settings: "wdth" 92, "opsz" 96; }
  .c-signin__bands { display: grid; grid-template-columns: 3fr 2fr 4fr; height: .75rem; }
  .c-signin__bands > i { display: block; background: var(--viz-c1); }
  .c-signin__bands > i:nth-child(2) { background: var(--viz-c2); }
  .c-signin__bands > i:nth-child(3) { background: var(--viz-c3); }
  .c-signin__panel { margin-top: 14vh; }
}

/* ------------------------------------------------------------------ the entrance */
/* The page head rises first, then the content (the prototype's choreography). Only on a
   full page load; htmx swaps do not replay it. Nothing moves with reduced motion. */
@keyframes c-rise { from { opacity: 0; transform: translateY(18px); } }
/* Only with scripting: a page without JavaScript stays still from the first paint. */
@media (scripting: enabled) {
  .c-rise, .has-shell main > :is(.c-crumbs, .c-eyebrow, .c-page, .c-head, .c-home__head, .c-flow) { animation: c-rise var(--dur-rise) var(--spring) backwards; }
  .has-shell main > :is(.c-page, .c-head, .c-home__head) { animation-delay: 60ms; }
  .has-shell main > :is(.c-page, .c-head) + * { animation: c-rise var(--dur-rise) var(--spring) 140ms backwards; }
  .c-rise--1 { animation-delay: 50ms; }
  .c-rise--2 { animation-delay: 120ms; }
  .c-rise--3 { animation-delay: 200ms; }
  .c-rise--4 { animation-delay: 280ms; }
  .c-rise--5 { animation-delay: 360ms; }
}
@supports not (animation-timing-function: linear(0, 1)) {
  .c-rise, .has-shell main > * { animation-timing-function: var(--spring-fallback); }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 47.99rem) {
  .c-stat__n, .c-stats dd { font-size: 2.25rem; }
  .c-stats { gap: var(--sp-3) 1.75rem; }
  .c-next__item { min-height: 0; }
}

/* ------------------------------------------------------------------ forced colours and print */
@media (forced-colors: active) {
  .c-signin__bands { forced-color-adjust: none; }
  .c-sheet, .c-gtabs, .c-seg { border: 1px solid CanvasText; }
  .c-seg__btn[aria-pressed="true"], .c-seg > a[aria-current], .c-gtabs > :is([aria-current], [aria-pressed="true"]) { outline: 2px solid CanvasText; outline-offset: -2px; }
  .c-toggle__track { border: 1px solid CanvasText; }
  .c-toggle[aria-pressed="true"] .c-toggle__track { background: Highlight; }
}
@media print {
  body { background: #fff; }
  .c-signin__art { display: none; }
  .c-hero, .c-page__title { font-size: 28pt; }
  * { animation: none !important; }
}

/* The index (students, lists): the group bar at the row edge, room for it. */
.c-index tbody > tr > :first-child { padding-left: 1.25rem; }
.c-index thead > tr > :first-child { padding-left: 1.25rem; }