/* OhMyShift — faces. Both files are local; the cards render with no network.
 *
 * Roboto Flex — SIL Open Font License 1.1 (fonts/OFL-RobotoFlex.txt).
 *   Source: github.com/google/fonts, ofl/robotoflex (variable TTF), subset to
 *   Latin + Latin Extended-A + general punctuation + arrows, every axis kept
 *   (opsz, wght 100–1000, GRAD −200…150, wdth 25–151, slnt and the parametric
 *   axes). OhMyShift spends three of them: wght for hierarchy, wdth for the
 *   code "stamp" (112) and the compact headline (94), GRAD for the dark theme
 *   (−20: thinner strokes so light text on ink does not bloom).
 *   On Android the same face ships as a variable font resource; the axes are
 *   set with FontVariation.Settings.
 *
 * Material Symbols Sharp — Apache License 2.0 (fonts/LICENSE-MaterialSymbols-Apache-2.0.txt).
 *   Source: github.com/google/material-design-icons, variablefont/. Subset to
 *   the glyphs listed in design/tools/icons.txt, ligatures kept, so an icon is
 *   written by name: <span class="ic">calendar_month</span>. Sharp, not Rounded
 *   or Outlined: the roster is a grid and OhMyShift's corners are small.
 *   Compose uses the vector drawables of the same glyphs (FILL 0 / FILL 1 pairs).
 */
@font-face {
  font-family: 'Roboto Flex';
  src: url('/fonts/RobotoFlex-ohmyshift.woff2') format('woff2');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: oblique 0deg 10deg;
  font-display: block;
}
@font-face {
  font-family: 'Material Symbols Sharp';
  src: url('/fonts/MaterialSymbolsSharp-ohmyshift.woff2') format('woff2');
  font-weight: 100 700;
  font-display: block;
}

/* OhMyShift — M3 colour roles, light and dark. Generated by design/tools/palette.mjs; do not edit by hand.
 * OKLCH seeds: ink 262 (primary, dark neutrals), paper 85 (light neutrals),
 * marker 95 (tertiary = the PA highlighter), error 27 (Material's hue).
 * Every ratio printed in guidelines/*.html is measured from these hex values. */
/* Switching: the `.dark` class on an ancestor (the cards) — Compose switches on isSystemInDarkTheme(). No dynamic colour. */
:root {
  color-scheme: light;
  --md-sys-color-primary: #2D4268;
  --md-sys-color-on-primary: #FCFAF6;
  --md-sys-color-primary-container: #CEDFFD;
  --md-sys-color-on-primary-container: #132548;
  --md-sys-color-inverse-primary: #B5CBF3;
  --md-sys-color-secondary: #4F5869;
  --md-sys-color-on-secondary: #FCFAF6;
  --md-sys-color-secondary-container: #D8E0EF;
  --md-sys-color-on-secondary-container: #1E293D;
  --md-sys-color-tertiary: #725F09;
  --md-sys-color-on-tertiary: #FCFAF6;
  --md-sys-color-tertiary-container: #FEDE62;
  --md-sys-color-on-tertiary-container: #382D00;
  --md-sys-color-error: #B7191C;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FEDBD7;
  --md-sys-color-on-error-container: #5C0206;
  --md-sys-color-background: #FCFAF6;
  --md-sys-color-on-background: #12161D;
  --md-sys-color-surface: #FCFAF6;
  --md-sys-color-on-surface: #12161D;
  --md-sys-color-surface-variant: #E8E4DC;
  --md-sys-color-on-surface-variant: #474D58;
  --md-sys-color-surface-dim: #E2DED5;
  --md-sys-color-surface-bright: #FDFCF9;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F4EE;
  --md-sys-color-surface-container: #F1EEE8;
  --md-sys-color-surface-container-high: #EBE7E0;
  --md-sys-color-surface-container-highest: #E5E1D9;
  --md-sys-color-outline: #747B87;
  --md-sys-color-outline-variant: #C9CED6;
  --md-sys-color-inverse-surface: #282E38;
  --md-sys-color-inverse-on-surface: #F1EEE9;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-surface-tint: #2D4268;
}
@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;
  --md-sys-color-primary: #BFD2F3;
  --md-sys-color-on-primary: #182846;
  --md-sys-color-primary-container: #33476D;
  --md-sys-color-on-primary-container: #DDE8FD;
  --md-sys-color-inverse-primary: #384D73;
  --md-sys-color-secondary: #BBC5D5;
  --md-sys-color-on-secondary: #212938;
  --md-sys-color-secondary-container: #384355;
  --md-sys-color-on-secondary-container: #DDE5F2;
  --md-sys-color-tertiary: #EED059;
  --md-sys-color-on-tertiary: #322800;
  --md-sys-color-tertiary-container: #E9C944;
  --md-sys-color-on-tertiary-container: #2C2300;
  --md-sys-color-error: #FEA196;
  --md-sys-color-on-error: #5C0206;
  --md-sys-color-error-container: #831A18;
  --md-sys-color-on-error-container: #FEDBD7;
  --md-sys-color-background: #0A0F19;
  --md-sys-color-on-background: #E1E5EB;
  --md-sys-color-surface: #0A0F19;
  --md-sys-color-on-surface: #E1E5EB;
  --md-sys-color-surface-variant: #2E3643;
  --md-sys-color-on-surface-variant: #B8BEC8;
  --md-sys-color-surface-dim: #0A0F19;
  --md-sys-color-surface-bright: #39404D;
  --md-sys-color-surface-container-lowest: #050911;
  --md-sys-color-surface-container-low: #121823;
  --md-sys-color-surface-container: #1A212D;
  --md-sys-color-surface-container-high: #242C39;
  --md-sys-color-surface-container-highest: #2E3644;
  --md-sys-color-outline: #8C939F;
  --md-sys-color-outline-variant: #404856;
  --md-sys-color-inverse-surface: #E1E5EB;
  --md-sys-color-inverse-on-surface: #232933;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-surface-tint: #BFD2F3;
}
}

/* OhMyShift — shift-type colour roles. Generated by design/tools/palette.mjs; do not edit by hand.
 * OKLCH seeds: ink 262 (primary, dark neutrals), paper 85 (light neutrals),
 * marker 95 (tertiary = the PA highlighter), error 27 (Material's hue).
 * Every ratio printed in guidelines/*.html is measured from these hex values. */
/* Each family has three roles: -container (chip fill), -on-container (code text on the fill),
 * and the bare accent (dot, dashed outline, 4dp bar on a surface). Families that are not work —
 * agob, ferie, riposo — sit on the neutral ladder on purpose: an absence is the absence of colour.
 * --oms-pa-* is the roster's yellow highlighter: one meaning, prestazione aggiuntiva, both themes. */
:root {
  --oms-shift-mattino-container: #B8EAB8;
  --oms-shift-mattino-on-container: #003909;
  --oms-shift-mattino: #107823;
  --oms-shift-pome-container: #FED0B1;
  --oms-shift-pome-on-container: #492201;
  --oms-shift-pome: #954E0F;
  --oms-shift-notte-container: #D5D7FD;
  --oms-shift-notte-on-container: #28245E;
  --oms-shift-notte: #5953B5;
  --oms-shift-guardia-container: #FECBD3;
  --oms-shift-guardia-on-container: #540F24;
  --oms-shift-guardia: #A53453;
  --oms-shift-rep-container: #F6C9FD;
  --oms-shift-rep-on-container: #44184B;
  --oms-shift-rep: #894095;
  --oms-shift-ria-container: #B3E2FF;
  --oms-shift-ria-on-container: #003249;
  --oms-shift-ria: #096B95;
  --oms-shift-visite-container: #96EDE7;
  --oms-shift-visite-on-container: #023633;
  --oms-shift-visite: #02736E;
  --oms-shift-agob-container: #E5E1D9;
  --oms-shift-agob-on-container: #12161D;
  --oms-shift-agob: #474D58;
  --oms-shift-ferie-container: #EBE7E0;
  --oms-shift-ferie-on-container: #474D58;
  --oms-shift-ferie: #747B87;
  --oms-shift-riposo-container: #F1EEE8;
  --oms-shift-riposo-on-container: #474D58;
  --oms-shift-riposo: #C9CED6;
  --oms-pa-container: #FEDE62;
  --oms-pa-on-container: #382D00;
}
@media (prefers-color-scheme: dark) {
:root {
  --oms-shift-mattino-container: #1B481F;
  --oms-shift-mattino-on-container: #D2F2D2;
  --oms-shift-mattino: #90D192;
  --oms-shift-pome-container: #5E2F05;
  --oms-shift-pome-on-container: #FEE2CF;
  --oms-shift-pome: #F5AB77;
  --oms-shift-notte-container: #373668;
  --oms-shift-notte-on-container: #E4E6FE;
  --oms-shift-notte: #B3B6FF;
  --oms-shift-guardia-container: #612734;
  --oms-shift-guardia-on-container: #FEDFE3;
  --oms-shift-guardia: #FBA0B0;
  --oms-shift-rep-container: #512C57;
  --oms-shift-rep-on-container: #FADCFE;
  --oms-shift-rep: #DFA6E8;
  --oms-shift-ria-container: #02435F;
  --oms-shift-ria-on-container: #D1EDFE;
  --oms-shift-ria: #71C9FA;
  --oms-shift-visite-container: #004744;
  --oms-shift-visite-on-container: #BEF4F0;
  --oms-shift-visite: #59D4CD;
  --oms-shift-agob-container: #2E3644;
  --oms-shift-agob-on-container: #E1E5EB;
  --oms-shift-agob: #B8BEC8;
  --oms-shift-ferie-container: #242C39;
  --oms-shift-ferie-on-container: #B8BEC8;
  --oms-shift-ferie: #8C939F;
  --oms-shift-riposo-container: #1A212D;
  --oms-shift-riposo-on-container: #B8BEC8;
  --oms-shift-riposo: #404856;
  --oms-pa-container: #E9C944;
  --oms-pa-on-container: #2C2300;
}
}

/* OhMyShift — type. Roboto Flex on the fifteen M3 roles, plus three roles of
 * OhMyShift's own: code (the shift stamp), time (tabular hours) and wordmark.
 *
 * Personality, in three moves the Android system face allows:
 *  1. Width. Codes are set at wdth 112 and weight 750: a two-letter stamp that
 *     survives 18dp in a month cell and greyscale at 06:45. Headlines sit at
 *     wdth 94 so "Aggiornamento obbligatorio" fits a 412dp row.
 *  2. Grade. The dark theme sets GRAD −20 on everything: strokes thin a hair so
 *     light text on ink reads at the same weight as dark text on paper.
 *  3. Numerals. Every hour, day number and tally is tabular (tnum). Same-day
 *     spans use an en dash (07:30–14:00); a span that crosses midnight uses an
 *     arrow (20:00 → 08:00) — the arrow is the "I sleep at the hospital" sign.
 *
 * Weights stop at 750 (codes) and 600 (titles). No role is bold-for-emphasis.
 * Compose: Typography(...) with FontVariation.Settings for wdth/GRAD; tabular
 * figures through FontFeatureSettings("tnum").
 */
:root {
  --oms-font: 'Roboto Flex', Roboto, system-ui, sans-serif;
  --oms-font-icons: 'Material Symbols Sharp';
  --oms-grade: 0;

  /* role: size / line-height / weight / tracking / width */
  --oms-type-display-l: 500 52px/60px var(--oms-font);  --oms-track-display-l: -0.02em;  --oms-wdth-display: 94%;
  --oms-type-display-m: 500 40px/48px var(--oms-font);  --oms-track-display-m: -0.015em;
  --oms-type-headline-l: 500 32px/40px var(--oms-font); --oms-track-headline-l: -0.01em; --oms-wdth-headline: 94%;
  --oms-type-headline-m: 500 28px/36px var(--oms-font); --oms-track-headline-m: -0.01em;
  --oms-type-headline-s: 500 24px/32px var(--oms-font); --oms-track-headline-s: -0.005em;
  --oms-type-title-l: 500 22px/28px var(--oms-font);    --oms-track-title-l: 0;
  --oms-type-title-m: 600 16px/24px var(--oms-font);    --oms-track-title-m: 0.005em;
  --oms-type-title-s: 600 14px/20px var(--oms-font);    --oms-track-title-s: 0.005em;
  --oms-type-body-l: 400 16px/24px var(--oms-font);     --oms-track-body-l: 0.01em;
  --oms-type-body-m: 400 14px/20px var(--oms-font);     --oms-track-body-m: 0.015em;
  --oms-type-body-s: 400 12px/16px var(--oms-font);     --oms-track-body-s: 0.02em;
  --oms-type-label-l: 600 14px/20px var(--oms-font);    --oms-track-label-l: 0.01em;
  --oms-type-label-m: 600 12px/16px var(--oms-font);    --oms-track-label-m: 0.03em;
  --oms-type-label-s: 600 11px/16px var(--oms-font);    --oms-track-label-s: 0.05em;

  /* OhMyShift's own roles */
  --oms-type-code: 750 13px/16px var(--oms-font);       --oms-track-code: 0.01em;  --oms-wdth-code: 112%;
  --oms-type-code-s: 750 11px/14px var(--oms-font);
  --oms-type-code-l: 750 16px/20px var(--oms-font);
  --oms-type-time: 500 14px/20px var(--oms-font);       --oms-track-time: 0.01em;
  --oms-type-wordmark: 650 28px/32px var(--oms-font);   --oms-track-wordmark: -0.02em; --oms-wdth-wordmark: 104%;
}
@media (prefers-color-scheme: dark) { :root { --oms-grade: -20; } }

/* Type utilities: one class per role, used by every card. */
.t-display-l { font: var(--oms-type-display-l); letter-spacing: var(--oms-track-display-l); font-stretch: var(--oms-wdth-display); }
.t-display-m { font: var(--oms-type-display-m); letter-spacing: var(--oms-track-display-m); font-stretch: var(--oms-wdth-display); }
.t-headline-l { font: var(--oms-type-headline-l); letter-spacing: var(--oms-track-headline-l); font-stretch: var(--oms-wdth-headline); }
.t-headline-m { font: var(--oms-type-headline-m); letter-spacing: var(--oms-track-headline-m); font-stretch: var(--oms-wdth-headline); }
.t-headline-s { font: var(--oms-type-headline-s); letter-spacing: var(--oms-track-headline-s); font-stretch: var(--oms-wdth-headline); }
.t-title-l { font: var(--oms-type-title-l); letter-spacing: var(--oms-track-title-l); }
.t-title-m { font: var(--oms-type-title-m); letter-spacing: var(--oms-track-title-m); }
.t-title-s { font: var(--oms-type-title-s); letter-spacing: var(--oms-track-title-s); }
.t-body-l { font: var(--oms-type-body-l); letter-spacing: var(--oms-track-body-l); }
.t-body-m { font: var(--oms-type-body-m); letter-spacing: var(--oms-track-body-m); }
.t-body-s { font: var(--oms-type-body-s); letter-spacing: var(--oms-track-body-s); }
.t-label-l { font: var(--oms-type-label-l); letter-spacing: var(--oms-track-label-l); }
.t-label-m { font: var(--oms-type-label-m); letter-spacing: var(--oms-track-label-m); }
.t-label-s { font: var(--oms-type-label-s); letter-spacing: var(--oms-track-label-s); }
.t-code { font: var(--oms-type-code); letter-spacing: var(--oms-track-code); font-stretch: var(--oms-wdth-code); font-variant-numeric: tabular-nums; }
.t-code-s { font: var(--oms-type-code-s); letter-spacing: var(--oms-track-code); font-stretch: var(--oms-wdth-code); font-variant-numeric: tabular-nums; }
.t-code-l { font: var(--oms-type-code-l); letter-spacing: var(--oms-track-code); font-stretch: var(--oms-wdth-code); font-variant-numeric: tabular-nums; }
.t-time { font: var(--oms-type-time); letter-spacing: var(--oms-track-time); font-variant-numeric: tabular-nums; }
.t-wordmark { font: var(--oms-type-wordmark); letter-spacing: var(--oms-track-wordmark); font-stretch: var(--oms-wdth-wordmark); }
.tnum { font-variant-numeric: tabular-nums; }

/* OhMyShift — shape. The roster is a grid of cells, and OhMyShift keeps the
 * grid's corners: small radii everywhere, no pills of its own.
 *
 *   extra-small 2   checkbox, PA badge, hairline tags
 *   small       6   ShiftChip (the stamp), day cells, filter chips, text fields
 *   medium     10   buttons, cards, the day-strip, settings groups
 *   large      16   NextShiftHero, dialogs, FAB
 *   extra-large 24  bottom sheets (top corners), the launcher tile
 *
 * The only pills on screen are the ones stable Material 3 forces and does not
 * let a theme change: the NavigationBar indicator, Switch and Slider. They are
 * accepted, not imitated. Compose: Shapes(extraSmall = 2.dp, small = 6.dp,
 * medium = 10.dp, large = 16.dp, extraLarge = 24.dp); Button, FilterChip and
 * AssistChip receive shape = MaterialTheme.shapes.medium / small explicitly,
 * because their stable defaults are CornerFull. */
:root {
  --md-sys-shape-corner-extra-small: 2px;
  --md-sys-shape-corner-small: 6px;
  --md-sys-shape-corner-medium: 10px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 24px;
  --md-sys-shape-corner-full: 9999px; /* Material's own: nav indicator, switch, slider */
  --oms-phone-corner: 28px; /* the device frame in the cards, not a component */
}

/* The download page, direction A «Carta» of design/proposals/03-website. Tokens only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  font: var(--oms-type-body-m); font-family: var(--oms-font);
  font-variation-settings: 'GRAD' var(--oms-grade);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--md-sys-color-primary); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; color: var(--md-sys-color-on-surface); }
.ic {
  font-family: var(--oms-font-icons); font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; flex: none; width: 1em; overflow: hidden;
}
.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px; }
.wm { font: var(--oms-type-wordmark); letter-spacing: var(--oms-track-wordmark); font-stretch: var(--oms-wdth-wordmark); color: inherit; text-decoration: none; }
.hlw { background: linear-gradient(transparent 58%, var(--oms-pa-container) 58%, var(--oms-pa-container) 92%, transparent 92%); }
.lang { font: var(--oms-type-label-l); text-decoration: none; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); padding: 6px 10px; }
main { flex: 1; padding: 8px 16px 40px; }
.tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-extra-large); overflow: hidden; }
.tile b { position: relative; font: 800 56px/1 var(--oms-font); font-stretch: 125%; color: var(--md-sys-color-on-primary); }
.tile i { position: absolute; left: 18%; right: 18%; bottom: 22%; height: 16%; background: var(--oms-pa-container); transform: skewX(-8deg); }
h1 { font: 500 34px/40px var(--oms-font); letter-spacing: -0.015em; font-stretch: 94%; margin: 16px 0 12px; text-wrap: balance; max-width: 18ch; }
.lede { font: var(--oms-type-body-l); color: var(--md-sys-color-on-surface-variant); max-width: 56ch; }
.dl { margin-top: 24px; max-width: 560px; display: grid; gap: 10px; }
.dlbtn { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 14px 20px; border-radius: var(--md-sys-shape-corner-medium); font: var(--oms-type-title-m); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.dlbtn small { display: block; font: var(--oms-type-body-s); opacity: .85; }
.sha { font: var(--oms-type-body-s); color: var(--md-sys-color-on-surface-variant); }
.sha .k { font: var(--oms-type-label-s); letter-spacing: var(--oms-track-label-s); display: block; }
.note, .soon { font: var(--oms-type-body-s); color: var(--md-sys-color-on-surface-variant); max-width: 52ch; }
.soon { font: var(--oms-type-title-m); color: var(--md-sys-color-on-surface); }
.pts { margin-top: 40px; display: grid; gap: 20px; }
.pts li { display: flex; gap: 12px; }
.pts .ic { color: var(--md-sys-color-primary); }
.pts h2 { font: var(--oms-type-title-m); }
.pts p { font: var(--oms-type-body-m); color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }
footer { display: flex; flex-direction: column; gap: 6px; padding: 20px 16px 28px; border-top: 1px solid var(--md-sys-color-outline-variant); font: var(--oms-type-body-s); color: var(--md-sys-color-on-surface-variant); }
@media (min-width: 900px) {
  .top { padding: 28px 64px; }
  main { padding: 24px 64px 64px; }
  h1 { font-size: 60px; line-height: 64px; }
  .lede { font-size: 19px; line-height: 30px; }
  .pts { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; }
  footer { flex-direction: row; justify-content: space-between; padding: 24px 64px; }
}