/* /@fs/srv/isc/app/node_modules/@fontsource-variable/montserrat/wght.css */
/* montserrat-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/montserrat/files/montserrat-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* montserrat-cyrillic-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/montserrat/files/montserrat-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* montserrat-vietnamese-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/montserrat/files/montserrat-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* montserrat-latin-ext-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/montserrat/files/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/montserrat/files/montserrat-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

/* /@fs/srv/isc/app/node_modules/@fontsource-variable/alexandria/wght.css */
/* alexandria-arabic-wght-normal */
@font-face {
  font-family: 'Alexandria Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/alexandria/files/alexandria-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* alexandria-vietnamese-wght-normal */
@font-face {
  font-family: 'Alexandria Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/alexandria/files/alexandria-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* alexandria-latin-ext-wght-normal */
@font-face {
  font-family: 'Alexandria Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/alexandria/files/alexandria-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* alexandria-latin-wght-normal */
@font-face {
  font-family: 'Alexandria Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/@fs/srv/isc/app/node_modules/@fontsource-variable/alexandria/files/alexandria-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

/* /src/styles/tokens.css */
/* ISC design tokens: the single home for raw values (colour, type, spacing, radius, elevation, motion).
   Components use the semantic tokens only (--color-*, --space-*, --text-*, ...). DESIGN.md §2 is the intent
   these values encode; where the two disagree, this file is the bug.

   The colour region below is generated from the measured logo colours by scripts/brand/derive_palette.py,
   which refuses to write while any allowed text/ground pair fails contrast. Everything after it is
   hand-written. Fonts: Montserrat (Latin) and Alexandria (Arabic), both OFL, self-hosted in the app. */

/* colour:start: generated by scripts/brand/derive_palette.py from the measured logo colours.
   Do not edit between these markers by hand: change the script and re-run it. */

:root {
  /* Logo anchors, measured (brand/logo/README.md) */
  --brand-violet: #7742e5;
  --brand-teal: #1edcd1;
  --brand-blue: #358bc6;
  --brand-wordmark-indigo: #5c61dc;
  --brand-wordmark-teal: #0ed0bf;
  --brand-gradient: linear-gradient(45deg, var(--brand-violet), var(--brand-teal));

  /* Primitives */
  --violet-50: #f7f5ff; --violet-100: #edeafe; --violet-200: #dcd7fe; --violet-300: #c4b9fd; --violet-400: #a791fc; --violet-500: #8d62fb; --violet-600: #7742e5; --violet-700: #5f21c4; --violet-800: #460798; --violet-900: #2d0366; --violet-950: #1a0142;
  --teal-50: #defffb; --teal-100: #affef7; --teal-200: #56f9ed; --teal-300: #1edcd1; --teal-400: #1abdb3; --teal-500: #139a92; --teal-600: #0e7f78; --teal-700: #08635d; --teal-800: #044743; --teal-900: #102c2a; --teal-950: #101817;
  --blue-50: #f0f8ff; --blue-100: #ddf0fe; --blue-200: #bee1fe; --blue-300: #8cccfd; --blue-400: #5cade8; --blue-500: #358bc6; --blue-600: #1a75ad; --blue-700: #085a8a; --blue-800: #044165; --blue-900: #022942; --blue-950: #011829;
  --ink-50: #f7f5ff; --ink-100: #edebf8; --ink-200: #dcd9ee; --ink-300: #c4c1d5; --ink-400: #a4a2b5; --ink-500: #868396; --ink-600: #6e6c7e; --ink-700: #555364; --ink-800: #3d3b4b; --ink-900: #262433; --ink-950: #161422;
  --green-50: #e6ffea; --green-100: #c3fece; --green-200: #95f7ab; --green-300: #7cdd93; --green-400: #5bbd74; --green-500: #399d57; --green-600: #17843f; --green-700: #0e672f; --green-800: #074a20; --green-900: #033012; --green-950: #011c08;
  --amber-50: #fff5eb; --amber-100: #fee9d2; --amber-200: #fdd4a6; --amber-300: #fcb358; --amber-400: #df921e; --amber-500: #b67617; --amber-600: #976111; --amber-700: #754b0b; --amber-800: #553505; --amber-900: #372102; --amber-950: #221201;
  --red-50: #fff4f3; --red-100: #fee7e4; --red-200: #fdd0cb; --red-300: #fcaca5; --red-400: #fb756e; --red-500: #de4e4b; --red-600: #c13234; --red-700: #9f101c; --red-800: #750912; --red-900: #4e0408; --red-950: #310203;
  --day: #f7f6fc;
  --night: #180d32;
  --night-deep: #0a051c;
  --night-raised: #231a3e;
  --night-alt: #00222f;
  --night-tint: #2b224c;
  --teal-wash: #e1f8f5;
  --violet-wash: #edeaff;
  --white: #ffffff;
}

:root,
:root[data-theme="light"] {
  --color-bg: var(--day);
  --color-surface: var(--white);
  --color-surface-alt: var(--teal-wash);
  --color-surface-tint: var(--violet-wash);
  --color-surface-inverse: var(--night);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-700);
  --color-text-on-inverse: var(--violet-50);
  --color-text-muted-on-inverse: var(--ink-300);
  --color-accent: var(--violet-600);
  --color-accent-hover: var(--violet-700);
  --color-accent-pressed: var(--violet-800);
  --color-on-accent: var(--white);
  --color-accent-text: var(--violet-700);
  --color-accent-text-on-inverse: var(--teal-300);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-500);
  --color-focus: var(--violet-600);
  --color-thread-1: var(--teal-300);
  --color-thread-2: var(--violet-600);
  --color-thread-3: var(--blue-500);
  --color-success: var(--green-700);
  --color-success-bg: var(--green-50);
  --color-warning: var(--amber-800);
  --color-warning-bg: var(--amber-50);
  --color-danger: var(--red-700);
  --color-danger-bg: var(--red-50);
  --color-info: var(--blue-700);
  --color-info-bg: var(--blue-50);
  --color-mat-edge: var(--violet-800);
  --color-accent-inverse: var(--teal-300);
  --color-accent-inverse-hover: var(--teal-200);
  --color-on-accent-inverse: var(--night);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--night);
    --color-surface: var(--night-raised);
    --color-surface-alt: var(--night-alt);
    --color-surface-tint: var(--night-tint);
    --color-surface-inverse: var(--night-deep);
    --color-text: var(--violet-50);
    --color-text-muted: var(--ink-300);
    --color-text-on-inverse: var(--violet-50);
    --color-text-muted-on-inverse: var(--ink-300);
    --color-accent: var(--teal-300);
    --color-accent-hover: var(--teal-200);
    --color-accent-pressed: var(--teal-400);
    --color-on-accent: var(--night);
    --color-accent-text: var(--teal-300);
    --color-accent-text-on-inverse: var(--teal-300);
    --color-border: #383350;
    --color-border-strong: var(--ink-400);
    --color-focus: var(--teal-300);
    --color-thread-1: var(--teal-300);
    --color-thread-2: var(--violet-600);
    --color-thread-3: var(--blue-500);
    --color-success: var(--green-300);
    --color-success-bg: #122d19;
    --color-warning: var(--amber-300);
    --color-warning-bg: #362207;
    --color-danger: var(--red-300);
    --color-danger-bg: #3f1917;
    --color-info: var(--blue-300);
    --color-info-bg: #0d293d;
    --color-mat-edge: var(--violet-900);
    --color-accent-inverse: var(--teal-300);
    --color-accent-inverse-hover: var(--teal-200);
    --color-on-accent-inverse: var(--night-deep);
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--night);
  --color-surface: var(--night-raised);
  --color-surface-alt: var(--night-alt);
  --color-surface-tint: var(--night-tint);
  --color-surface-inverse: var(--night-deep);
  --color-text: var(--violet-50);
  --color-text-muted: var(--ink-300);
  --color-text-on-inverse: var(--violet-50);
  --color-text-muted-on-inverse: var(--ink-300);
  --color-accent: var(--teal-300);
  --color-accent-hover: var(--teal-200);
  --color-accent-pressed: var(--teal-400);
  --color-on-accent: var(--night);
  --color-accent-text: var(--teal-300);
  --color-accent-text-on-inverse: var(--teal-300);
  --color-border: #383350;
  --color-border-strong: var(--ink-400);
  --color-focus: var(--teal-300);
  --color-thread-1: var(--teal-300);
  --color-thread-2: var(--violet-600);
  --color-thread-3: var(--blue-500);
  --color-success: var(--green-300);
  --color-success-bg: #122d19;
  --color-warning: var(--amber-300);
  --color-warning-bg: #362207;
  --color-danger: var(--red-300);
  --color-danger-bg: #3f1917;
  --color-info: var(--blue-300);
  --color-info-bg: #0d293d;
  --color-mat-edge: var(--violet-900);
  --color-accent-inverse: var(--teal-300);
  --color-accent-inverse-hover: var(--teal-200);
  --color-on-accent-inverse: var(--night-deep);
}

/* colour:end */

/* ---------------------------------------------------------------------------------------------------- */
:root {
  /* Type. Latin is Montserrat; Arabic falls through to Alexandria, Montserrat's Arabic companion by
     the same designer. Both OFL. The app self-hosts the variable fonts from Fontsource ("… Variable");
     the plain names are what the specimen loads from Google Fonts. */
  --font-sans: "Montserrat Variable", "Montserrat", "Alexandria Variable", "Alexandria", system-ui,
    "Segoe UI", sans-serif;
  --font-arabic: "Alexandria Variable", "Alexandria", "Montserrat Variable", "Montserrat", system-ui,
    sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  /* Fluid above --text-4xl. 7xl is the hero's display tier: 72px on a phone (4:1 over the 18px lede,
     DESIGN.md §6.3), 96px at most. */
  --text-5xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-6xl: clamp(2.5rem, 1.6rem + 3.8vw, 3.75rem);
  --text-7xl: clamp(4.5rem, 3.2rem + 5.6vw, 6rem);
  /* A public page's title on a phone (lead, step 08): sized by the screen's width, between the tier
     stepped down (32px) and the full one, "not too large, not too small". About 39px at 375px and 42px
     at 430px; from 48rem the page uses --text-6xl. */
  --text-title: clamp(2rem, 0.9rem + 6.5vw, 2.75rem);

  --leading-display: 1;
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-arabic: 1.9;

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.06em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;

  /* About 66 characters of Montserrat at 400: its "0" is 0.662em wide against an average character of
     0.514em (scripts/brand/measure_fonts.py), so 66ch would hold about 85. */
  --measure: 52ch;
  --measure-arabic: 60ch;

  /* Spacing, 4px base. No value outside this scale appears in a layout. */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* One gutter for the whole app (DESIGN.md §4): 20px on a phone, 32px from tablet up. */
  --gutter: var(--space-5);
  --content-max: 76rem;

  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --target-min: 2.75rem;

  /* Radius. Plates are round; containers are soft-cornered. */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  --border-thin: 1px;
  --border-strong: 2px;
  --plate-rim: 0.375rem;
  --focus-ring: 3px;
  --focus-offset: 2px;

  /* Motion (Emil Kowalski's curves). Interface motion stays under 300ms; only the mat's unroll, the
     one authored moment, runs long. */
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-story: 1100ms;
  --stagger: 60ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --press-scale: 0.97;
  --lift: -0.25rem;
  /* A photo inside its frame leans in a little under the pointer (album covers). */
  --photo-zoom: 1.04;

  /* The mat: the logo's gradient woven as a 2/2 twill (8px cells, set in the specimen's SVG pattern),
     whose diagonals run at the gradient's own 45 degrees. */
  --mat-height: 5.5rem;
  --mat-height-lg: 7.5rem;
  --mat-binding: 0.25rem;
  --plate-sm: 5.25rem;
  --plate-md: 6.5rem;
  --plate-lg: 8.25rem;
  --plate-xl: 14rem;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-8);
  }
}

@media (min-width: 64rem) {
  :root {
    --plate-sm: 8.5rem;
    --plate-md: 11rem;
    --plate-lg: 17rem;
    --plate-xl: 22rem;
  }
}

/* Elevation is two-part (a tight contact shadow and a soft ambient one) plus a rim light, tinted to
   the night hue so shadows never look grey on these grounds. */
:root,
:root[data-theme="light"] {
  --shadow-tint: 24 13 50;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-tint) / 0.08), 0 2px 6px -1px rgb(var(--shadow-tint) / 0.08);
  --shadow-md: 0 1px 2px rgb(var(--shadow-tint) / 0.1), 0 8px 20px -6px rgb(var(--shadow-tint) / 0.16);
  --shadow-lg: 0 2px 4px rgb(var(--shadow-tint) / 0.1), 0 18px 40px -12px rgb(var(--shadow-tint) / 0.26);
  --shadow-xl: 0 4px 8px rgb(var(--shadow-tint) / 0.12), 0 32px 64px -18px rgb(var(--shadow-tint) / 0.34);
  --rim-light: inset 0 1px 0 rgb(var(--rim-tint) / 0.75);
  --rim-tint: 255 255 255;
  --light-field: 255 255 255;
  --light-field-strength: 0.85;
  --scrim: rgb(var(--shadow-tint) / 0.45);
  /* The weave's overlay on the gradient: warp floats shaded, weft floats lit, edges between threads. */
  --weave-shade: rgb(var(--shadow-tint) / 0.16);
  --weave-light: rgb(var(--rim-tint) / 0.16);
  --weave-edge: rgb(var(--shadow-tint) / 0.42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-tint: 4 2 14;
    --shadow-sm: 0 1px 2px rgb(var(--shadow-tint) / 0.5), 0 2px 6px -1px rgb(var(--shadow-tint) / 0.4);
    --shadow-md: 0 1px 2px rgb(var(--shadow-tint) / 0.55), 0 10px 24px -6px rgb(var(--shadow-tint) / 0.6);
    --shadow-lg: 0 2px 4px rgb(var(--shadow-tint) / 0.6), 0 20px 44px -12px rgb(var(--shadow-tint) / 0.7);
    --shadow-xl: 0 4px 8px rgb(var(--shadow-tint) / 0.6), 0 36px 72px -18px rgb(var(--shadow-tint) / 0.8);
    --rim-light: inset 0 1px 0 rgb(var(--rim-tint) / 0.08);
    --light-field: 30 220 209;
    --light-field-strength: 0.1;
    --scrim: rgb(var(--shadow-tint) / 0.7);
    --weave-shade: rgb(var(--shadow-tint) / 0.2);
    --weave-light: rgb(var(--rim-tint) / 0.12);
    --weave-edge: rgb(var(--shadow-tint) / 0.55);
  }
}

:root[data-theme="dark"] {
  --shadow-tint: 4 2 14;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-tint) / 0.5), 0 2px 6px -1px rgb(var(--shadow-tint) / 0.4);
  --shadow-md: 0 1px 2px rgb(var(--shadow-tint) / 0.55), 0 10px 24px -6px rgb(var(--shadow-tint) / 0.6);
  --shadow-lg: 0 2px 4px rgb(var(--shadow-tint) / 0.6), 0 20px 44px -12px rgb(var(--shadow-tint) / 0.7);
  --shadow-xl: 0 4px 8px rgb(var(--shadow-tint) / 0.6), 0 36px 72px -18px rgb(var(--shadow-tint) / 0.8);
  --rim-light: inset 0 1px 0 rgb(var(--rim-tint) / 0.08);
  --light-field: 30 220 209;
  --light-field-strength: 0.1;
  --scrim: rgb(var(--shadow-tint) / 0.7);
  --weave-shade: rgb(var(--shadow-tint) / 0.2);
  --weave-light: rgb(var(--rim-tint) / 0.12);
  --weave-edge: rgb(var(--shadow-tint) / 0.55);
}


/* /src/styles/base.css */
/* The base layer: element defaults, focus, the type tiers and a few utilities every screen shares.
   Values come from tokens.css; components style themselves with CSS Modules. Logical properties
   throughout, so the same rules mirror for Arabic. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}
img {
  block-size: auto;
}

p,
h1,
h2,
h3,
h4,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--color-accent-text);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:lang(ar) {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  line-height: var(--leading-arabic);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Anchored sections clear the sticky header. */
[id] {
  scroll-margin-block-start: calc(var(--space-16) + var(--space-4));
}

/* ---------- Type tiers (DESIGN.md §2.2): the hierarchy the eye can see ---------- */
.display,
.h1,
.h2 {
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.display {
  font-size: var(--text-7xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.h1 {
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
}
.h2 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
}
.h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  max-inline-size: var(--measure);
}
.small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-label);
}
:lang(ar) .display,
:lang(ar) .h1,
:lang(ar) .h2,
:lang(ar) .label {
  letter-spacing: 0;
}

/* ---------- Utilities ---------- */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure {
  max-inline-size: var(--measure);
}
.num {
  font-variant-numeric: tabular-nums lining-nums;
}
/* What people type keeps its own line breaks (DESIGN.md §2.2). */
.as-typed {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Theme switch: a short cross-fade where the browser supports it ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}


/* /src/root.module.css */
._error_1t3ip_1 {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  padding: var(--gutter);
  background:
    radial-gradient(48rem 32rem at 72% 18%, rgb(var(--light-field) / var(--light-field-strength)), transparent 70%),
    var(--color-surface-tint);
}
._errorCard_1t3ip_10 {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  inline-size: min(100%, 36rem);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg), var(--rim-light);
}
._errorText_1t3ip_20 {
  color: var(--color-text-muted);
}
._stack_1t3ip_23 {
  max-inline-size: 100%;
  overflow-x: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-tint);
  font-size: var(--text-xs);
  white-space: pre-wrap;
}


/* /src/components/Button.module.css */
/* Buttons. `data-force` pins hover, focus or pressed for the component page; real use never sets it. */
._button_4bmfs_2 {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: transparent;
  --btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  padding-inline: var(--space-6);
  border: var(--border-thin) solid var(--btn-border);
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
._label_4bmfs_31 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* A short blur hides the swap between two labels (Emil Kowalski). Entry only: the old label just goes. */
._swap_4bmfs_37 {
  animation: _label-in_4bmfs_1 var(--duration-fast) var(--ease-out);
}
@keyframes _label-in_4bmfs_1 {
  from {
    opacity: 0;
    filter: blur(2px);
  }
}

._button_4bmfs_2:active:not(:disabled, [aria-busy="true"]),
._button_4bmfs_2[data-force="active"] {
  transform: scale(var(--press-scale));
}
._button_4bmfs_2[data-force="focus"] {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* ---------- Variants ---------- */
._primary_4bmfs_57 {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-shadow: var(--shadow-sm), var(--rim-light);
}
._primary_4bmfs_57[data-force="hover"] {
  --btn-bg: var(--color-accent-hover);
  --btn-shadow: var(--shadow-md), var(--rim-light);
}
._primary_4bmfs_57:active:not(:disabled, [aria-busy="true"]),
._primary_4bmfs_57[data-force="active"] {
  --btn-bg: var(--color-accent-pressed);
  --btn-shadow: var(--shadow-sm);
}

._secondary_4bmfs_72 {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-accent-text);
  --btn-border: var(--color-accent);
  --btn-shadow: var(--shadow-sm);
}
._secondary_4bmfs_72[data-force="hover"] {
  --btn-bg: var(--color-surface-tint);
  --btn-shadow: var(--shadow-md);
}
._secondary_4bmfs_72[aria-pressed="true"] {
  --btn-bg: var(--color-surface-tint);
  --btn-border: var(--color-accent-text);
  --btn-shadow: none;
}

._quiet_4bmfs_88 {
  padding-inline: var(--space-3);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
._quiet_4bmfs_88[data-force="hover"] {
  --btn-bg: var(--color-surface-tint);
  text-decoration: none;
}
._quiet_4bmfs_88[aria-pressed="true"] {
  --btn-bg: var(--color-surface-tint);
  --btn-fg: var(--color-accent-text);
  text-decoration: none;
}

._danger_4bmfs_104 {
  --btn-bg: var(--color-danger-bg);
  --btn-fg: var(--color-danger);
  --btn-border: var(--color-danger);
}
._danger_4bmfs_104[data-force="hover"] {
  --btn-shadow: var(--shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
  ._primary_4bmfs_57:hover:not(:disabled, [aria-busy="true"]) {
    --btn-bg: var(--color-accent-hover);
    --btn-shadow: var(--shadow-md), var(--rim-light);
  }
  ._secondary_4bmfs_72:hover:not(:disabled, [aria-busy="true"]) {
    --btn-bg: var(--color-surface-tint);
    --btn-shadow: var(--shadow-md);
  }
  ._quiet_4bmfs_88:hover:not(:disabled) {
    --btn-bg: var(--color-surface-tint);
    text-decoration: none;
  }
  ._danger_4bmfs_104:hover:not(:disabled) {
    --btn-shadow: var(--shadow-sm);
  }
}

/* ---------- Disabled and loading ---------- */
._button_4bmfs_2:disabled {
  --btn-bg: var(--color-surface-tint);
  --btn-fg: var(--color-text-muted);
  --btn-border: transparent;
  --btn-shadow: none;
  cursor: not-allowed;
}
._quiet_4bmfs_88:disabled {
  --btn-bg: transparent;
  text-decoration: none;
}
._button_4bmfs_2[aria-busy="true"] {
  cursor: progress;
}

/* ---------- Sizes. Every one keeps the 44px target. ---------- */
._sm_4bmfs_148 {
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
}
._xs_4bmfs_152 {
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

/* ---------- On the dark beat the action is teal (DESIGN.md §2.1) ---------- */
[data-ground="evening"] ._primary_4bmfs_57 {
  --btn-bg: var(--color-accent-inverse);
  --btn-fg: var(--color-on-accent-inverse);
  --btn-shadow: var(--shadow-md);
}
[data-ground="evening"] ._primary_4bmfs_57[data-force="hover"] {
  --btn-bg: var(--color-accent-inverse-hover);
}
[data-ground="evening"] ._quiet_4bmfs_88 {
  --btn-fg: var(--color-text-on-inverse);
}
[data-ground="evening"] ._button_4bmfs_2[data-force="focus"] {
  outline-color: var(--color-accent-text-on-inverse);
}
@media (hover: hover) and (pointer: fine) {
  [data-ground="evening"] ._primary_4bmfs_57:hover:not(:disabled, [aria-busy="true"]) {
    --btn-bg: var(--color-accent-inverse-hover);
  }
  [data-ground="evening"] ._quiet_4bmfs_88:hover:not(:disabled) {
    --btn-bg: transparent;
    --btn-fg: var(--color-accent-text-on-inverse);
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._button_4bmfs_2:active:not(:disabled, [aria-busy="true"]),
  ._button_4bmfs_2[data-force="active"] {
    transform: none;
  }
  ._swap_4bmfs_37 {
    animation: none;
  }
}


/* /src/components/Mat.module.css */
._defs_611rx_1 {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}
._weave_611rx_7 {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

._mat_611rx_14 {
  position: relative;
}
._band_611rx_17 {
  position: relative;
  block-size: var(--mat-height);
  background: var(--brand-gradient);
  border-block: var(--mat-binding) solid var(--color-mat-edge);
  box-shadow: var(--shadow-lg);
}
._roll_611rx_24 {
  position: absolute;
  inset-block: calc(var(--space-2) * -1);
  inset-inline-start: 0;
  inline-size: var(--space-5);
  border-radius: var(--radius-full);
  background:
    linear-gradient(90deg, var(--weave-edge), transparent 40%, transparent 60%, var(--weave-edge)),
    var(--brand-gradient);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Variants ---------- */
@media (min-width: 64rem) {
  ._hero_611rx_40 ._band_611rx_17 {
    block-size: var(--mat-height-lg);
  }
}
._evening_611rx_44 ._band_611rx_17 {
  block-size: var(--space-10);
  box-shadow: none;
  overflow: clip;
}
/* Wider than its band by the distance the threads drift, so no edge ever shows (past base.css's
   cap on every svg's width). */
._evening_611rx_44 ._weave_611rx_7 {
  inline-size: calc(100% + var(--space-24));
  max-inline-size: none;
}
._rule_611rx_55 ._band_611rx_17 {
  block-size: var(--space-3);
  border-block-width: 0;
  border-radius: var(--radius-full);
  box-shadow: none;
  overflow: hidden;
}
._rule_611rx_55 ._roll_611rx_24 {
  inset-block: calc(var(--space-1) * -1);
  inline-size: var(--space-3);
}

/* ---------- The unroll ---------- */
/* Rolled up until the script unrolls it. The roll stays visible, so the mat starts rolled, never
   absent. If the app never starts, the page settles after three seconds and shows it whole. */
.js ._mat_611rx_14[data-unroll]:not([data-unrolled]) ._band_611rx_17 {
  clip-path: inset(0 calc(100% - var(--space-5)) 0 0);
}
.js ._mat_611rx_14[data-unroll]:not([data-unrolled]):dir(rtl) ._band_611rx_17 {
  clip-path: inset(0 0 0 calc(100% - var(--space-5)));
}
.js ._mat_611rx_14[data-unroll]:not([data-unrolled]) ._roll_611rx_24 {
  opacity: 1;
}
.js.settled:not(.hydrated) ._mat_611rx_14[data-unroll] ._band_611rx_17 {
  clip-path: none;
}
.js.settled:not(.hydrated) ._mat_611rx_14[data-unroll] ._roll_611rx_24 {
  opacity: 0;
}

/* ---------- Thread chips ---------- */
._chip_611rx_87 {
  position: relative;
  flex: none;
  overflow: hidden;
  inline-size: var(--space-10);
  block-size: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brand-gradient);
  background-size: 600% 100%;
  box-shadow: var(--shadow-sm);
}
._thread1_611rx_98 {
  background-position: 0 0;
}
._thread2_611rx_101 {
  background-position: 50% 0;
}
._thread3_611rx_104 {
  background-position: 100% 0;
}

/* Reduced motion: no unroll; the band fades in when it's ready. */
@media (prefers-reduced-motion: reduce) {
  .js ._mat_611rx_14[data-unroll]:not([data-unrolled]) ._band_611rx_17,
  .js ._mat_611rx_14[data-unroll]:not([data-unrolled]):dir(rtl) ._band_611rx_17 {
    clip-path: none;
    opacity: 0;
  }
  .js ._mat_611rx_14[data-unroll]:not([data-unrolled]) ._roll_611rx_24 {
    opacity: 0;
  }
  ._mat_611rx_14 ._band_611rx_17 {
    transition: opacity var(--duration-slow) var(--ease-out);
  }
}


/* /src/components/Toast.module.css */
._region_san8b_1 {
  position: fixed;
  z-index: 50;
  inset-block-end: var(--space-4);
  inset-inline: var(--gutter);
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
@media (min-width: 48rem) {
  ._region_san8b_1 {
    inset-inline: auto var(--space-6);
    inset-block-end: var(--space-6);
    justify-items: end;
  }
}
/* A screen holding a bar at its foot (an album's selection, its question before leaving) keeps its
   toasts above the bar, whose height the bar keeps in --dock-height. */
:root:has([data-dock]) ._region_san8b_1 {
  inset-block-end: calc(var(--space-4) + var(--dock-height, 0rem) + var(--space-3));
}

._toast_san8b_27 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: min(26rem, 100%);
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  box-shadow: var(--shadow-xl), var(--rim-light);
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  /* Arrives on the long expo curve; leaves on the short one, faster (DESIGN.md §2.4). */
  transition:
    translate var(--duration-slow) var(--ease-out-expo),
    opacity var(--duration-slow) var(--ease-out-expo);
}
@starting-style {
  ._toast_san8b_27 {
    translate: 0 var(--space-6);
    opacity: 0;
  }
}
._toast_san8b_27[data-dragging] {
  transition: none;
}
._toast_san8b_27[data-leaving] {
  opacity: 0;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}
._toast_san8b_27[data-leaving="down"] {
  translate: 0 var(--space-3);
}
._toast_san8b_27[data-leaving="end"] {
  translate: 100% 0;
}
._toast_san8b_27[data-leaving="start"] {
  translate: -100% 0;
}

._icon_san8b_70 {
  color: var(--color-accent-text-on-inverse);
}
._text_san8b_73 {
  flex: 1;
  font-size: var(--text-sm);
}
._action_san8b_77 {
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-accent-text-on-inverse);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
._close_san8b_88 {
  color: var(--color-text-muted-on-inverse);
}
._toast_san8b_27 :focus-visible {
  outline-color: var(--color-accent-text-on-inverse);
}
@media (hover: hover) and (pointer: fine) {
  ._action_san8b_77:hover {
    background: rgb(var(--rim-tint) / 0.1);
  }
  ._close_san8b_88:hover {
    background: rgb(var(--rim-tint) / 0.1);
    color: var(--color-text-on-inverse);
  }
}

/* Reduced motion: no travel, only a fade. */
@media (prefers-reduced-motion: reduce) {
  ._toast_san8b_27 {
    transition: opacity var(--duration-fast) linear;
  }
  @starting-style {
    ._toast_san8b_27 {
      translate: none;
    }
  }
  ._toast_san8b_27[data-leaving] {
    translate: none;
  }
}


/* /src/components/Icon.module.css */
._icon_si4l2_1 {
  flex: none;
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  fill: currentColor;
}
._sm_si4l2_7 {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
}
._md_si4l2_11 {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
}
._lg_si4l2_15 {
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
}
._directional_si4l2_19:dir(rtl) {
  scale: -1 1;
}

._spin_si4l2_23 {
  animation: _spin_si4l2_23 var(--duration-story) linear infinite;
}
@keyframes _spin_si4l2_23 {
  to {
    rotate: 1turn;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._spin_si4l2_23 {
    animation-duration: calc(var(--duration-story) * 2);
  }
}


/* /src/components/IconButton.module.css */
._iconButton_fx5gu_1 {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  padding: 0;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
._iconButton_fx5gu_1:active:not(:disabled),
._iconButton_fx5gu_1[data-force="active"] {
  transform: scale(var(--press-scale));
}
._iconButton_fx5gu_1[data-force="hover"] {
  background: var(--color-surface-tint);
}
._iconButton_fx5gu_1[data-force="focus"] {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
._iconButton_fx5gu_1[aria-pressed="true"] {
  background: var(--color-surface-tint);
  color: var(--color-accent-text);
}
._iconButton_fx5gu_1:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

._outlined_fx5gu_39 {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}
._outlined_fx5gu_39:disabled {
  border-color: var(--color-border);
  background: transparent;
}

/* Sits inside an input's end (show password, clear search). */
._field_fx5gu_49 {
  position: absolute;
  inset-inline-end: var(--space-1);
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--color-text-muted);
}
._field_fx5gu_49:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

@media (hover: hover) and (pointer: fine) {
  ._iconButton_fx5gu_1:hover:not(:disabled) {
    background: var(--color-surface-tint);
  }
}

[data-ground="evening"] ._iconButton_fx5gu_1:focus-visible {
  outline-color: var(--color-accent-text-on-inverse);
}
@media (hover: hover) and (pointer: fine) {
  [data-ground="evening"] ._plain_fx5gu_70:hover:not(:disabled) {
    background: rgb(var(--rim-tint) / 0.1);
    color: var(--color-text-on-inverse);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._iconButton_fx5gu_1:active:not(:disabled),
  ._iconButton_fx5gu_1[data-force="active"] {
    transform: none;
  }
}


/* /src/layouts/system.module.css */
/* Who is logged in: their picture, their first name, and the position under it for the ISC
   Administration, all one link to their profile. In the night bar it sits at the end, light on dark, and answers the
   pointer as the tabs do; in the phone menu's sheet it's the last row, in the page's ink. */
._who_1hh5s_4 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  min-block-size: var(--space-12);
  color: var(--color-text);
  text-decoration: none;
}
._whoText_1hh5s_13 {
  display: grid;
  justify-items: start;
  min-inline-size: 0;
  line-height: var(--leading-snug);
}
/* The name is isolated inside its own cell, so an Arabic name keeps the column's alignment. */
._name_1hh5s_20 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
._position_1hh5s_24 {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
._who_1hh5s_4 ._avatar_1hh5s_28 {
  --avatar-size: var(--space-10);
}
._whoArrow_1hh5s_31 {
  margin-inline-start: auto;
}
._who_1hh5s_4[aria-current="page"] ._name_1hh5s_20 {
  color: var(--color-accent-text);
}

/* In the night bar: a pill like the tabs, teal where you are (DESIGN.md §2.1). */
[data-ground="evening"] ._who_1hh5s_4 {
  min-block-size: var(--target-min);
  padding-inline: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-on-inverse);
  transition: background-color var(--duration-fast) var(--ease-out);
}
[data-ground="evening"] ._who_1hh5s_4 ._avatar_1hh5s_28 {
  --avatar-size: var(--space-8);
}
[data-ground="evening"] ._name_1hh5s_20 {
  font-size: var(--text-sm);
}
[data-ground="evening"] ._position_1hh5s_24 {
  color: var(--color-text-muted-on-inverse);
}
[data-ground="evening"] ._whoArrow_1hh5s_31 {
  display: none;
}
[data-ground="evening"] ._who_1hh5s_4[aria-current="page"] {
  background: rgb(var(--rim-tint) / 0.08);
}
[data-ground="evening"] ._who_1hh5s_4[aria-current="page"] ._name_1hh5s_20 {
  color: var(--color-accent-text-on-inverse);
}
@media (hover: hover) and (pointer: fine) {
  [data-ground="evening"] ._who_1hh5s_4:hover {
    background: rgb(var(--rim-tint) / 0.08);
  }
}
/* Until 80rem, as the tabs keep their words and let their icons go, the account keeps the picture and
   lets the words go: five tabs leave too little room for a name. The name is still its tooltip, and
   what a screen reader reads. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  [data-ground="evening"] ._whoText_1hh5s_13 {
    display: none;
  }
  [data-ground="evening"] ._who_1hh5s_4 {
    justify-content: center;
    min-inline-size: var(--target-min);
    padding-inline: var(--space-1);
  }
}
/* In the bar, the first name and the position keep to one line each and end in an ellipsis if the bar
   is ever too tight (the whole name is the link's tooltip); the phone menu's sheet shows them whole. */
[data-ground="evening"] ._name_1hh5s_20,
[data-ground="evening"] ._position_1hh5s_24 {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._logOut_1hh5s_91 {
  flex-shrink: 0;
  white-space: nowrap;
}
._loading_1hh5s_95 {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
}


/* /src/components/AppShell.module.css */
._shell_ld3m7_1 {
  min-block-size: 100dvh;
  background: var(--color-bg);
}

/* ---------- The night bar ---------- */
._bar_ld3m7_7 {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
}
._barInner_ld3m7_14 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--space-16);
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
._home_ld3m7_23 {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  padding-inline-end: var(--space-2);
  border-radius: var(--radius-sm);
}
._title_ld3m7_30 {
  font-weight: var(--weight-bold);
}
._tabs_ld3m7_33 {
  display: none;
}
/* The light and dark switch starts the bar's end group: before the menu on phones, before the account
   from 64rem. One switch at every width, never a second one in the menu sheet. */
._themeSwitch_ld3m7_38 {
  margin-inline-start: auto;
}
._account_ld3m7_41 {
  display: none;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-inverse);
}

._strip_ld3m7_49 {
  position: relative;
  block-size: var(--space-2);
  background: var(--brand-gradient);
  overflow: hidden;
}

/* Workspace rhythm and gutter, one rung down on phones (DESIGN.md §4). */
._body_ld3m7_57 {
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
}

@media (min-width: 64rem) {
  ._barInner_ld3m7_14 {
    gap: var(--space-6);
    padding-inline: var(--gutter);
  }
  ._title_ld3m7_30,
  ._menuButton_ld3m7_68 {
    display: none;
  }
  ._tabs_ld3m7_33 {
    display: block;
  }
  ._tabs_ld3m7_33 ul {
    display: flex;
    gap: var(--space-1);
    list-style: none;
  }
  ._account_ld3m7_41 {
    display: flex;
  }
  ._body_ld3m7_57 {
    padding-block: var(--space-10);
    padding-inline: var(--gutter);
  }
}

/* Until 80rem the tabs keep their words and let their icons go, so five sections, the switch and the
   account fit the bar at 1024px; the words carry the meaning, the icons only repeat it. With six
   sections they let them go at every width: the bar stops widening at 76rem, and the account would
   otherwise shrink to a letter or two. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  ._tab_ld3m7_33 > svg {
    display: none;
  }
}
._crowded_ld3m7_97 ._tab_ld3m7_33 > svg {
  display: none;
}

/* Tabs on the night bar: teal marks where you are, never violet (§2.1). */
._tab_ld3m7_33 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-muted-on-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
._tab_ld3m7_33[aria-current="page"] {
  color: var(--color-accent-text-on-inverse);
  background: rgb(var(--rim-tint) / 0.08);
}
@media (hover: hover) and (pointer: fine) {
  ._tab_ld3m7_33:hover {
    color: var(--color-text-on-inverse);
    background: rgb(var(--rim-tint) / 0.08);
  }
}

/* ---------- The menu sheet's contents ---------- */
._sheetHead_ld3m7_129 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._sheetNav_ld3m7_134 {
  display: grid;
  list-style: none;
}
._sheetNav_ld3m7_134 a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--space-12);
  border-block-end: var(--border-thin) solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
._sheetNav_ld3m7_134 a[aria-current="page"] {
  color: var(--color-accent-text);
}
._sheetLabel_ld3m7_152 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
/* Who is logged in, as the sheet's last row (their way to their profile), and Log out under it. */
._sheetAccount_ld3m7_158 {
  display: grid;
  justify-items: stretch;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-thin) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
._sheetAccount_ld3m7_158 > button {
  justify-self: start;
}


/* /src/components/Avatar.module.css */
/* A person's picture, always round (DESIGN.md §2.4: plates are round). The face is the circle that holds
   the photo or the letter; on the profile's plate it sits inside a white rim. */
._avatar_1p2gz_3 {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: var(--avatar-size);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
}
._face_1p2gz_11 {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  color: var(--color-accent-text);
}
._face_1p2gz_11 img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
._initial_1p2gz_26 {
  font-weight: var(--weight-heavy);
  line-height: var(--leading-display);
}

._sm_1p2gz_31 {
  --avatar-size: var(--space-8);
  font-size: var(--text-sm);
}
._md_1p2gz_1 {
  --avatar-size: var(--space-10);
  font-size: var(--text-lg);
}
/* On the night bar a thin light ring keeps a dark photo from sinking into the bar. */
[data-ground="evening"] ._sm_1p2gz_31 ._face_1p2gz_11 {
  box-shadow: 0 0 0 var(--border-thin) rgb(var(--rim-tint) / 0.32);
}

/* The profile's plate: the photo set on a white rim, with the plates' night-tinted shadow. */
._plate_1p2gz_45 {
  --avatar-size: var(--plate-sm);
  padding: var(--plate-rim);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl), var(--rim-light);
  font-size: var(--text-4xl);
}

/* A new picture is set down on the plate, lowered from a little above, as the home page sets the
   club's photos on the mat. */
._settle_1p2gz_55 {
  animation: _set-down_1p2gz_1 var(--duration-slow) var(--ease-out) both;
}
@keyframes _set-down_1p2gz_1 {
  from {
    opacity: 0;
    translate: 0 calc(var(--space-2) * -1);
    scale: 0.94;
  }
}

/* While a picture uploads, the plate dims under the night hue and turns its spinner. */
._busy_1p2gz_67 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgb(var(--shadow-tint) / 0.5);
  color: var(--color-text-on-inverse);
  font-size: var(--text-xl);
}
._plate_1p2gz_45 ._busy_1p2gz_67 {
  inset: var(--plate-rim);
}

@media (prefers-reduced-motion: reduce) {
  ._settle_1p2gz_55 {
    animation-name: _fade-in_1p2gz_1;
  }
  @keyframes _fade-in_1p2gz_1 {
    from {
      opacity: 0;
    }
  }
}


/* /src/components/States.module.css */
/* ---------- Skeletons: the content's shape, breathing slowly ---------- */
._skeleton_sjjiu_2 {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-surface-tint), var(--color-surface-alt), var(--color-surface-tint));
  background-size: 200% 100%;
  animation: _shimmer_sjjiu_1 var(--duration-story) var(--ease-in-out) infinite alternate;
}
._line_sjjiu_9 {
  block-size: var(--space-4);
}
._block_sjjiu_12 {
  block-size: var(--space-24);
  border-radius: var(--radius-lg);
}
._circle_sjjiu_16 {
  inline-size: var(--space-16);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
}
._full_sjjiu_21 {
  inline-size: 100%;
}
._long_sjjiu_24 {
  inline-size: 80%;
}
._short_sjjiu_27 {
  inline-size: 45%;
}
@keyframes _shimmer_sjjiu_1 {
  to {
    background-position: 100% 0;
  }
}

/* ---------- Empty and error ---------- */
._empty_sjjiu_37,
._error_sjjiu_38 {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  align-content: start;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
}
._empty_sjjiu_37 {
  border: var(--border-strong) dashed var(--color-border);
  background: var(--color-surface);
}
._error_sjjiu_38 {
  background: var(--color-danger-bg);
  box-shadow: var(--rim-light);
}
._emptyIcon_sjjiu_54,
._errorIcon_sjjiu_55 {
  display: grid;
  place-items: center;
  inline-size: var(--space-12);
  aspect-ratio: 1;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-full);
}
._emptyIcon_sjjiu_54 {
  background: var(--color-surface-tint);
  color: var(--color-accent-text);
}
._errorIcon_sjjiu_55 {
  background: var(--color-surface);
  color: var(--color-danger);
}
._title_sjjiu_71 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
._text_sjjiu_76 {
  max-inline-size: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
._error_sjjiu_38 ._text_sjjiu_76 {
  color: var(--color-text);
}
._empty_sjjiu_37 > :last-child:not(._text_sjjiu_76, ._title_sjjiu_71),
._error_sjjiu_38 > :last-child:not(._text_sjjiu_76, ._title_sjjiu_71) {
  margin-block-start: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  ._skeleton_sjjiu_2 {
    animation: none;
  }
}


/* /src/components/Logo.module.css */
._logo_5fob6_1 {
  display: inline-flex;
  align-items: center;
}
._always_5fob6_5,
._onLight_5fob6_6,
._onDark_5fob6_7 {
  display: block;
}
._onDark_5fob6_7 {
  display: none;
}
:root[data-theme="dark"] ._onLight_5fob6_6 {
  display: none;
}
:root[data-theme="dark"] ._onDark_5fob6_7 {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ._onLight_5fob6_6 {
    display: none;
  }
  :root:not([data-theme="light"]) ._onDark_5fob6_7 {
    display: block;
  }
}

/* Sizes in CSS pixels never pass what the files hold on the densest screen they meet (§2.5). */
._header_5fob6_29 img {
  block-size: var(--space-10);
  inline-size: auto;
}
._footer_5fob6_33 ._onLight_5fob6_6 img {
  inline-size: 8.25rem;
  block-size: auto;
}
._footer_5fob6_33 ._onDark_5fob6_7 img {
  block-size: var(--space-16);
  inline-size: auto;
}
._appbar_5fob6_41 img {
  block-size: var(--space-8);
  inline-size: auto;
}
@media (min-width: 64rem) {
  ._header_5fob6_29 img,
  ._footer_5fob6_33 ._onLight_5fob6_6 img,
  ._footer_5fob6_33 ._onDark_5fob6_7 img {
    inline-size: 12.5rem;
    block-size: auto;
  }
}


/* /src/components/Sheet.module.css */
._sheet_19abo_1 {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  overflow: hidden;
}
._sheet_19abo_1::backdrop {
  background: transparent;
}
._scrim_19abo_18 {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: var(--scrim);
  cursor: default;
}
._panel_19abo_27 {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  inline-size: min(22rem, 88vw);
  padding-inline: var(--space-5);
  padding-block: 0 var(--space-6);
  background: var(--color-bg);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}
._strip_19abo_42 {
  position: relative;
  flex: none;
  margin-inline: calc(var(--space-5) * -1);
  block-size: var(--space-2);
  background: var(--brand-gradient);
  overflow: hidden;
}

/* The page behind doesn't scroll while the sheet is open. */
:root[data-sheet-open] {
  overflow: hidden;
}


/* /src/components/ThemeSwitch.module.css */
._switch_8y1i5_1 {
  position: relative;
}
._moon_8y1i5_4,
._sun_8y1i5_5 {
  position: absolute;
  inset: 0;
  margin: auto;
  transition:
    opacity var(--duration-base) var(--ease-out),
    rotate var(--duration-slow) var(--ease-out),
    scale var(--duration-slow) var(--ease-out);
}
._sun_8y1i5_5 {
  opacity: 0;
  rotate: -90deg;
  scale: 0.6;
}
:root[data-theme="dark"] ._moon_8y1i5_4 {
  opacity: 0;
  rotate: 90deg;
  scale: 0.6;
}
:root[data-theme="dark"] ._sun_8y1i5_5 {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ._moon_8y1i5_4 {
    opacity: 0;
    rotate: 90deg;
    scale: 0.6;
  }
  :root:not([data-theme="light"]) ._sun_8y1i5_5 {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
  }
}
/* The pressed state is the theme itself; no extra fill. */
._switch_8y1i5_1._switch_8y1i5_1[aria-pressed="true"] {
  background: transparent;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  ._moon_8y1i5_4,
  ._sun_8y1i5_5 {
    transition: opacity var(--duration-base) linear;
    rotate: none;
    scale: none;
  }
}


/* /src/routes/dashboard/home.module.css */
/* The dashboard (Workspace register, DESIGN.md §3.3): quiet records on raised surfaces, the brand in the
   chrome. What needs doing comes first and largest, then the next events and the person's own; the
   club's pages sit in a list beside them from desktop up (7:5). */
._page_ml3g9_4 {
  display: grid;
  gap: var(--space-6);
}
._head_ml3g9_8 {
  display: grid;
  gap: var(--space-1);
}
._greeting_ml3g9_12 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}
._role_ml3g9_18 {
  color: var(--color-text-muted);
}
/* A member's points: a quiet pill under the greeting, the figure tabular and still (DESIGN.md §3.4),
   leading to the rewards; its arrow moves on hover, the figure never does. */
._points_ml3g9_23 {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  margin-block-start: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  color: var(--color-accent-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-out);
}
._points_ml3g9_23:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
._pointsArrow_ml3g9_43 {
  transition: translate var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  ._points_ml3g9_23:hover {
    box-shadow: var(--shadow-sm), var(--rim-light);
  }
  ._points_ml3g9_23:hover ._pointsArrow_ml3g9_43 {
    translate: var(--space-1) 0;
  }
  ._points_ml3g9_23:dir(rtl):hover ._pointsArrow_ml3g9_43 {
    translate: calc(var(--space-1) * -1) 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._points_ml3g9_23:hover ._pointsArrow_ml3g9_43 {
    translate: none;
  }
}
._grid_ml3g9_62 {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
._main_ml3g9_67 {
  display: grid;
  gap: var(--space-6);
  min-inline-size: 0;
}
._cardTitle_ml3g9_72 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
._sectionTitle_ml3g9_77 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

/* ---------- Applications waiting ---------- */
._waiting_ml3g9_86 {
  display: grid;
  gap: var(--space-4);
}
._waitingHead_ml3g9_90 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
._count_ml3g9_96 {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--space-10);
  block-size: var(--space-10);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  color: var(--color-accent-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
}
._people_ml3g9_108 {
  display: grid;
  list-style: none;
  border-block-start: var(--border-thin) solid var(--color-border);
}
._personRow_ml3g9_113 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--border-thin) solid var(--color-border);
}
._personIcon_ml3g9_121 {
  display: inline-grid;
  place-items: center;
  grid-row: span 2;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text);
}
._personName_ml3g9_131 {
  overflow: hidden;
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
._personWhen_ml3g9_137 {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
._review_ml3g9_141 {
  justify-self: start;
}
._none_ml3g9_144 {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  color: var(--color-text-muted);
}

/* ---------- Coming up, and your events ---------- */
._events_ml3g9_152 {
  display: grid;
  gap: var(--space-3);
}
._sectionHead_ml3g9_156 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
._sectionLink_ml3g9_163 {
  font-size: var(--text-sm);
}
._eventList_ml3g9_166 {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
._quietNote_ml3g9_171 {
  max-inline-size: var(--measure);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), var(--rim-light);
  color: var(--color-text-muted);
}
._emptyEvents_ml3g9_179 {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), var(--rim-light);
  color: var(--color-text-muted);
}

/* One raised list, ruled like "In the club": the date, the event, where it stands. */
._history_ml3g9_191 {
  display: grid;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), var(--rim-light);
  overflow: hidden;
}
._history_ml3g9_191 li + li {
  border-block-start: var(--border-thin) solid var(--color-border);
}
._historyRow_ml3g9_202 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "date title"
    "date status";
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
}
._historyDate_ml3g9_212 {
  grid-area: date;
  align-self: start;
  min-inline-size: var(--space-20);
  padding-block-start: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text-muted);
}
._historyTitle_ml3g9_222 {
  grid-area: title;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
/* A long status ("Attendance not confirmed yet") wraps inside its pill on a phone, rather than running
   past the card's edge. */
._historyStatus_ml3g9_230 {
  grid-area: status;
  justify-self: start;
  max-inline-size: 100%;
  padding-block: var(--space-1);
  white-space: normal;
}
._showMore_ml3g9_237 {
  justify-self: start;
}

/* ---------- Peer mentorship ---------- */
._mentor_ml3g9_242 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
._mentorIcon_ml3g9_248 {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  color: var(--white);
}
._mentorText_ml3g9_257 {
  display: grid;
  gap: var(--space-1);
  max-inline-size: var(--measure);
}
._mentorText_ml3g9_257 p {
  color: var(--color-text-muted);
}

/* ---------- In the club ---------- */
._club_ml3g9_267 {
  display: grid;
  gap: var(--space-3);
}
._links_ml3g9_271 {
  display: grid;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), var(--rim-light);
  overflow: hidden;
}
._links_ml3g9_271 li + li {
  border-block-start: var(--border-thin) solid var(--color-border);
}
._link_ml3g9_271 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--target-min);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
._link_ml3g9_271 > span {
  display: grid;
}
._link_ml3g9_271:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: calc(var(--focus-ring) * -1);
}
._linkName_ml3g9_300 {
  font-weight: var(--weight-semibold);
}
._linkText_ml3g9_303 {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (hover: hover) and (pointer: fine) {
  ._link_ml3g9_271:hover {
    background: var(--color-surface-tint);
  }
  ._link_ml3g9_271:hover ._linkName_ml3g9_300 {
    color: var(--color-accent-text);
  }
}
._link_ml3g9_271:active {
  background: var(--color-surface-tint);
}

@media (min-width: 64rem) {
  ._greeting_ml3g9_12 {
    font-size: var(--text-3xl);
  }
  ._grid_ml3g9_62 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
  }
  ._main_ml3g9_67 {
    grid-column: 1 / span 7;
  }
  ._club_ml3g9_267 {
    grid-column: 8 / span 5;
  }
  ._historyRow_ml3g9_202 {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "date title status";
  }
  ._historyDate_ml3g9_212 {
    align-self: center;
    padding-block-start: 0;
  }
}


/* /src/components/AnnouncementItem.module.css */
/* Announcements (Workspace register, DESIGN.md §3.3): one raised sheet with the small two-part shadow and
   rim light, its entries ruled between. The newest leads with the logo's gradient roundel (the
   mentorship card's) and a heavier title; the rest are quieter. Dates are tabular and never move. */
._sheet_rgovj_4 {
  display: grid;
  inline-size: 100%;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), var(--rim-light);
}
._item_rgovj_11 {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-4);
}
._item_rgovj_11 + ._item_rgovj_11 {
  border-block-start: var(--border-thin) solid var(--color-border);
}
._head_rgovj_20 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}
._lead_rgovj_26 ._head_rgovj_20 {
  grid-template-columns: auto minmax(0, 1fr);
}
._roundel_rgovj_29 {
  display: inline-grid;
  place-items: center;
  align-self: start;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  box-shadow: var(--shadow-sm);
  color: var(--white);
}
._heading_rgovj_40 {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}
._title_rgovj_45 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
._lead_rgovj_26 ._title_rgovj_45 {
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}
/* Arabic is never letter-spaced (DESIGN.md §2.2). */
._title_rgovj_45:dir(rtl) {
  letter-spacing: 0;
}
._meta_rgovj_61 {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

._skeletonRoundel_rgovj_67 {
  inline-size: var(--space-10);
}

/* The newest's title stays a tier below the page's own (--text-2xl), at every width. */
@media (min-width: 48rem) {
  ._item_rgovj_11 {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }
}


/* /src/components/EventCard.module.css */
/* An event on the Sufra (DESIGN.md §2.4; the specimen's "Coming up"): a white raised card, its round
   date plate beside the title, then the facts and the action. The card measures its own width, so the
   same card works in a page's column and in the dashboard's narrow one (§3.3). Dates, figures and
   statuses stay plain and still: no texture or motion behind them (§3.4). */
/* The card measures its own width, so its content can't size it: it always fills what holds it, or
   in a flex row it would shrink to nothing. */
._event_pnbv4_7 {
  container-type: inline-size;
  inline-size: 100%;
}
._layout_pnbv4_11 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "plate head"
    "body body";
  gap: var(--space-4);
  align-items: center;
}

/* ---------- The date plate: round, like the club's photo plates ---------- */
._plate_pnbv4_22 {
  grid-area: plate;
  display: grid;
  place-content: center;
  justify-items: center;
  inline-size: var(--space-16);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  box-shadow: inset 0 var(--space-px) 0 var(--color-border);
  line-height: 1;
}
._weekday_pnbv4_34,
._month_pnbv4_35 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
._day_pnbv4_42 {
  margin-block: var(--space-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--color-text);
}

._skeletonPlate_pnbv4_49 {
  grid-area: plate;
}
._featured_pnbv4_52 ._skeletonPlate_pnbv4_49 {
  inline-size: var(--space-20);
}
._compact_pnbv4_55 ._skeletonPlate_pnbv4_49 {
  inline-size: var(--space-12);
}

/* ---------- Title and who it's for ---------- */
._head_pnbv4_60 {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-inline-size: 0;
}
._title_pnbv4_68 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: anywhere;
}
._title_pnbv4_68:dir(rtl) {
  letter-spacing: 0;
}

/* ---------- The facts, the description and the action ---------- */
._body_pnbv4_80 {
  grid-area: body;
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
}
._meta_pnbv4_86 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
._meta_pnbv4_86 li {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-inline-size: 0;
}
/* Centred on the first line, so a place that wraps keeps its icon at the top. */
._meta_pnbv4_86 li > svg {
  flex: none;
  margin-block-start: calc((1lh - var(--icon-sm)) / 2);
}
._meta_pnbv4_86 li > span,
._meta_pnbv4_86 li > bdi {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
/* The day it is from today, as a quiet chip after the date. */
._relative_pnbv4_111 {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}
/* Places running out: said in words ("3 places left"), the colour only repeats it. */
._few_pnbv4_124 {
  color: var(--color-warning);
  font-weight: var(--weight-semibold);
}

._description_pnbv4_129 {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}
._text_pnbv4_134 {
  display: grid;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  color: var(--color-text);
  line-height: var(--leading-normal);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
._text_pnbv4_134 > p {
  inline-size: 100%;
}
/* Folded only once the page's script runs, so without it nothing is ever cut off. */
.js ._folded_pnbv4_147 ._text_pnbv4_134 {
  max-block-size: calc(1em * var(--leading-normal) * 3);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, var(--color-text) 40%, transparent);
}
html:not(.js) ._toggle_pnbv4_152 {
  display: none;
}

._actionsArea_pnbv4_156 {
  display: grid;
  gap: var(--space-3);
}
._actions_pnbv4_156 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* Registered is a status, not a button: the same pill shape, in the success colours. */
._registered_pnbv4_167 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  padding-inline: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
._justChanged_pnbv4_179 {
  animation: _settle-in_pnbv4_1 var(--duration-base) var(--ease-out);
}
@keyframes _settle-in_pnbv4_1 {
  from {
    opacity: 0;
    filter: blur(2px);
    scale: var(--press-scale);
  }
}
._note_pnbv4_189 {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Wider cards: the plate stands beside everything ---------- */
@container (min-width: 32rem) {
  ._layout_pnbv4_11 {
    grid-template-areas:
      "plate head"
      "plate body";
    gap: var(--space-3) var(--space-6);
    align-items: start;
  }
  ._head_pnbv4_60 {
    align-self: end;
    min-block-size: var(--space-8);
  }
}

/* ---------- The next event: the largest plate and the title a tier up (Stage) ---------- */
._featured_pnbv4_52 ._layout_pnbv4_11 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "plate"
    "head"
    "body";
  align-items: start;
}
._featured_pnbv4_52 ._plate_pnbv4_22 {
  inline-size: var(--space-20);
}
._featured_pnbv4_52 ._day_pnbv4_42 {
  font-size: var(--text-3xl);
}
._featured_pnbv4_52 ._title_pnbv4_68 {
  font-size: var(--text-2xl);
}
._featured_pnbv4_52 ._body_pnbv4_80 {
  gap: var(--space-5);
}
@container (min-width: 36rem) {
  ._featured_pnbv4_52 ._layout_pnbv4_11 {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "plate head"
      "plate body";
    gap: var(--space-4) var(--space-8);
  }
  ._featured_pnbv4_52 ._title_pnbv4_68 {
    font-size: var(--text-3xl);
  }
}
@media (min-width: 48rem) {
  ._event_pnbv4_7._featured_pnbv4_52 {
    padding: var(--space-8);
  }
}

/* ---------- The dashboard: a smaller plate, a tighter body (Workspace) ---------- */
._compact_pnbv4_55 ._layout_pnbv4_11 {
  gap: var(--space-3) var(--space-4);
}
._compact_pnbv4_55 ._plate_pnbv4_22 {
  inline-size: var(--space-12);
}
._compact_pnbv4_55 ._day_pnbv4_42 {
  margin-block: 0;
  font-size: var(--text-lg);
}
._compact_pnbv4_55 ._title_pnbv4_68 {
  font-size: var(--text-base);
}
._compact_pnbv4_55 ._body_pnbv4_80 {
  gap: var(--space-3);
}
._compact_pnbv4_55 ._registered_pnbv4_167 {
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}
@container (min-width: 32rem) {
  ._compact_pnbv4_55 ._layout_pnbv4_11 {
    gap: var(--space-2) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._justChanged_pnbv4_179 {
    animation-name: _fade-in_pnbv4_1;
  }
  @keyframes _fade-in_pnbv4_1 {
    from {
      opacity: 0;
    }
  }
}


/* /src/components/Links.module.css */
._arrowLink_etep0_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
  text-decoration: none;
}
._arrow_etep0_1 {
  transition: translate var(--duration-base) var(--ease-out);
}
._arrowLink_etep0_1[data-force="hover"] ._arrow_etep0_1 {
  translate: var(--space-1) 0;
}
._arrowLink_etep0_1[data-force="focus"] {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
._arrowLink_etep0_1:dir(rtl)[data-force="hover"] ._arrow_etep0_1 {
  translate: calc(var(--space-1) * -1) 0;
}
@media (hover: hover) and (pointer: fine) {
  ._arrowLink_etep0_1:hover ._arrow_etep0_1 {
    translate: var(--space-1) 0;
  }
  ._arrowLink_etep0_1:dir(rtl):hover ._arrow_etep0_1 {
    translate: calc(var(--space-1) * -1) 0;
  }
  ._arrowLink_etep0_1:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

._textButton_etep0_36 {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  ._textButton_etep0_36:hover {
    text-decoration-thickness: 0.14em;
  }
}

[data-ground="evening"] ._arrowLink_etep0_1,
[data-ground="evening"] ._textButton_etep0_36 {
  color: var(--color-accent-text-on-inverse);
}

@media (prefers-reduced-motion: reduce) {
  ._arrow_etep0_1 {
    transition: none;
  }
}


/* /src/components/Surface.module.css */
/* ---------- Grounds ---------- */
._section_124nc_2 {
  position: relative;
}
._bg_124nc_5 {
  background: var(--color-bg);
}
._alt_124nc_8 {
  background: var(--color-surface-alt);
}
._tint_124nc_11 {
  background: var(--color-surface-tint);
}
/* The dark beat: one per long page, with its own off-centre light (DESIGN.md §2.4). */
._evening_124nc_15 {
  background:
    radial-gradient(40rem 28rem at 78% 70%, rgb(var(--light-field) / 0.06), transparent 70%),
    var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  overflow: clip;
}
._evening_124nc_15 :focus-visible {
  outline-color: var(--color-accent-text-on-inverse);
}

/* ---------- Rhythm by register, one rung down on phones (DESIGN.md §3, §4) ---------- */
._stage_124nc_27 {
  padding-block: var(--space-16);
}
._flow_124nc_30 {
  padding-block: var(--space-10);
}
._workspace_124nc_33 {
  padding-block: var(--space-8);
}
@media (min-width: 64rem) {
  ._stage_124nc_27 {
    padding-block: var(--space-24);
  }
  ._flow_124nc_30 {
    padding-block: var(--space-16);
  }
  ._workspace_124nc_33 {
    padding-block: var(--space-10);
  }
}

/* ---------- Cards: raised surfaces with the two-part shadow and the rim light ---------- */
._card_124nc_49 {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
._card-stage_124nc_58 {
  padding: var(--space-6);
  box-shadow: var(--shadow-lg), var(--rim-light);
}
._card-flow_124nc_62 {
  padding: var(--space-5);
  box-shadow: var(--shadow-md), var(--rim-light);
}
._card-workspace_124nc_66 {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--rim-light);
}
@media (min-width: 48rem) {
  ._card-stage_124nc_58 {
    padding: var(--space-8);
  }
  ._card-flow_124nc_62 {
    padding: var(--space-6);
  }
  ._card-workspace_124nc_66 {
    padding: var(--space-5);
  }
}
._interactive_124nc_82[data-force="hover"] {
  translate: 0 var(--lift);
  box-shadow: var(--shadow-xl), var(--rim-light);
}
@media (hover: hover) and (pointer: fine) {
  ._interactive_124nc_82:hover {
    translate: 0 var(--lift);
    box-shadow: var(--shadow-xl), var(--rim-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._card_124nc_49 {
    transition: none;
  }
}


/* /src/components/Tag.module.css */
._tag_w8byr_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-8);
  padding-inline: var(--space-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
._open_w8byr_14 {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-thread-1);
}
._members_w8byr_19 {
  background: var(--color-surface-tint);
  color: var(--color-accent-text);
  border-color: var(--color-thread-2);
}
._done_w8byr_24 {
  background: var(--color-success-bg);
  color: var(--color-success);
}
._waiting_w8byr_28 {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
._neutral_w8byr_32 {
  background: var(--color-surface-tint);
  color: var(--color-text-muted);
}


/* /src/components/MessageText.module.css */
/* Text people wrote (DESIGN.md §2.2): held to the measure, line breaks kept, long addresses allowed to
   break so nothing scrolls sideways at 375px. Folding clips to whole lines and fades the last one only
   when something is really hidden. The control to open it needs no gap: its 44px target spaces it. */
._message_1qs1z_4 {
  display: grid;
  justify-items: start;
}
._text_1qs1z_8 {
  display: grid;
  gap: var(--space-3);
  inline-size: 100%;
  color: var(--color-text);
  line-height: var(--leading-normal);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* Each paragraph holds the measure from the start of its own direction, so an Arabic one sits against
   the right edge of an English page, under its right-aligned title. */
._text_1qs1z_8 > p {
  max-inline-size: var(--measure);
  justify-self: self-start;
}
._fold2_1qs1z_23,
._fold3_1qs1z_24,
._fold4_1qs1z_25 {
  overflow: hidden;
}
._fold2_1qs1z_23 {
  max-block-size: calc(1em * var(--leading-normal) * 2);
}
._fold3_1qs1z_24 {
  max-block-size: calc(1em * var(--leading-normal) * 3);
}
._fold4_1qs1z_25 {
  max-block-size: calc(1em * var(--leading-normal) * 4);
}
._faded_1qs1z_37 {
  mask-image: linear-gradient(to bottom, var(--color-text) 55%, transparent);
}

/* Links people typed: the accent, underlined, the underline drawn as a background so the preview can
   draw it in. A long address wraps on its own line breaks. */
._link_1qs1z_43 {
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 0.08em;
  box-decoration-break: clone;
}
@media (hover: hover) and (pointer: fine) {
  ._link_1qs1z_43:hover {
    background-size: 100% 0.14em;
  }
}
._link_1qs1z_43:active {
  color: var(--color-accent-pressed);
}

/* The form's preview: an address that becomes whole draws its underline in, once. */
._live_1qs1z_63 ._link_1qs1z_43 {
  animation: _draw_1qs1z_1 var(--duration-slow) var(--ease-out-expo) both;
}
@keyframes _draw_1qs1z_1 {
  from {
    background-size: 0 0.08em;
  }
}

._toggle_1qs1z_72 {
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  ._live_1qs1z_63 ._link_1qs1z_43 {
    animation: none;
  }
}