/* Window size classes (ADR 0060), M3's: compact under 600px (37.5rem), medium from 600px, expanded from 840px
   (52.5rem), large from 1200px (75rem). Media queries use these widths only.

   Material Design 3 (ADR 0044, 0045), written by hand: no Material library is loaded. The colors are M3's
   baseline scheme, unchanged (the values of Google's @material/web tokens, M3 34.0); every color in the app is one
   of these roles, except Strava's brand orange (ADR 0027) and the intensity colours (ADR 0061). The type scale, shapes, state layers and component
   measures follow m3.material.io. */
/* Google Sans Flex, M3 Expressive's typeface, served with the app (ADR 0096, replacing Roboto Flex of ADR 0079): the
   Latin subset with the weight axis, so the type scale looks as designed on every device and offline. Other scripts
   fall back to the system font. Licence: fonts/OFL.txt. */
@font-face {
  font-family: "Google Sans Flex"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("/fonts/google-sans-flex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #4f378b;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #4a4458;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #633b48;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #8c1d18;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-inverse-primary: #d0bcff;
  --md-custom-color-low: #006d43;
  --md-custom-color-low-container: #92f7bc;
  --md-custom-color-on-low-container: #002111;
  --md-custom-color-medium: #914c00;
  --md-custom-color-medium-container: #ffdcc3;
  --md-custom-color-on-medium-container: #2f1500;
  --md-custom-color-high: #ba0c4c;
  --md-custom-color-high-container: #ffd9de;
  --md-custom-color-on-high-container: #400014;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-1:
    0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent),
    0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
  --md-sys-elevation-2:
    0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent),
    0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
  --md-sys-elevation-3:
    0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent),
    0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);

  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.1;
  --md-sys-state-pressed: 0.1;
  --md-sys-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  /* M3 Expressive's springs (ADR 0053): the md.sys.motion.spring tokens (stiffness and damping, from Google's
     @material/web tokens) sampled into linear() easings, each with the time it takes to settle. Spatial springs
     move and resize things and overshoot a little; effects springs fade and recolor. */
  --md-sys-motion-spring-fast-spatial: linear(0, 0.0698, 0.2064, 0.3679, 0.5194, 0.648, 0.7464, 0.8255, 0.8836, 0.9232, 0.9521, 0.9714, 0.9834, 0.9914, 0.9962, 0.9989, 1.0003, 1.0009, 1.0011, 1.0011, 1.0009, 1.0008, 1.0006, 1.0004, 1);
  --md-sys-motion-spring-fast-spatial-duration: 261ms;
  --md-sys-motion-spring-default-spatial: linear(0, 0.0609, 0.1906, 0.3407, 0.4852, 0.6154, 0.7186, 0.7996, 0.8612, 0.9064, 0.9388, 0.9614, 0.9767, 0.9871, 0.9934, 0.9972, 0.9994, 1.0006, 1.0011, 1.0012, 1.0012, 1.001, 1.0008, 1.0006, 1);
  --md-sys-motion-spring-default-spatial-duration: 350ms;
  --md-sys-motion-spring-slow-spatial: linear(0, 0.0502, 0.1582, 0.2919, 0.4228, 0.5458, 0.6494, 0.7373, 0.8076, 0.861, 0.9027, 0.9329, 0.9554, 0.9714, 0.9823, 0.9898, 0.9947, 0.9978, 0.9996, 1.0007, 1.0012, 1.0013, 1.0013, 1.0012, 1);
  --md-sys-motion-spring-slow-spatial-duration: 475ms;
  --md-sys-motion-spring-fast-effects: linear(0, 0.0948, 0.2573, 0.434, 0.5767, 0.6973, 0.7828, 0.8495, 0.8944, 0.9282, 0.9502, 0.9665, 0.977, 0.9846, 0.9898, 0.993, 0.9954, 0.9969, 0.9979, 0.9986, 0.9991, 0.9994, 0.9996, 0.9997, 1);
  --md-sys-motion-spring-fast-effects-duration: 187ms;
  --md-sys-motion-spring-default-effects: linear(0, 0.0824, 0.2335, 0.4004, 0.5423, 0.6635, 0.7572, 0.8246, 0.8765, 0.9138, 0.9393, 0.9581, 0.9708, 0.98, 0.9864, 0.9906, 0.9936, 0.9957, 0.997, 0.998, 0.9986, 0.9991, 0.9994, 0.9996, 1);
  --md-sys-motion-spring-default-effects-duration: 272ms;
  --md-sys-motion-spring-slow-effects: linear(0, 0.0749, 0.2181, 0.3779, 0.5226, 0.6393, 0.7348, 0.8078, 0.8607, 0.901, 0.9301, 0.9504, 0.9654, 0.9759, 0.9831, 0.9883, 0.992, 0.9944, 0.9962, 0.9974, 0.9982, 0.9988, 0.9992, 0.9994, 1);
  --md-sys-motion-spring-slow-effects-duration: 368ms;
  /* Shapes from M3 Expressive's shape library (ADR 0053), approximated as polygons of 72 points each, so that
     clip-path can morph one into another. */
  --md-shape-soft-burst: polygon(50.0% 9.1%, 53.7% 7.6%, 58.0% 4.5%, 62.8% 2.3%, 67.0% 3.3%, 69.9% 7.4%, 71.6% 12.6%, 73.5% 16.4%, 77.0% 17.8%, 82.1% 17.9%, 87.5% 18.5%, 90.9% 21.4%, 91.3% 26.1%, 89.8% 31.4%, 88.7% 35.9%, 90.1% 39.3%, 94.0% 42.2%, 98.2% 45.8%, 100.0% 50.0%, 98.2% 54.2%, 94.0% 57.8%, 90.1% 60.7%, 88.7% 64.1%, 89.8% 68.6%, 91.3% 73.9%, 90.9% 78.6%, 87.5% 81.5%, 82.1% 82.1%, 77.0% 82.2%, 73.5% 83.6%, 71.6% 87.4%, 69.9% 92.6%, 67.0% 96.7%, 62.8% 97.7%, 58.0% 95.5%, 53.7% 92.4%, 50.0% 90.9%, 46.3% 92.4%, 42.0% 95.5%, 37.2% 97.7%, 33.0% 96.7%, 30.1% 92.6%, 28.4% 87.4%, 26.5% 83.6%, 23.0% 82.2%, 17.9% 82.1%, 12.5% 81.5%, 9.1% 78.6%, 8.7% 73.9%, 10.2% 68.6%, 11.3% 64.1%, 9.9% 60.7%, 6.0% 57.8%, 1.8% 54.2%, 0.0% 50.0%, 1.8% 45.8%, 6.0% 42.2%, 9.9% 39.3%, 11.3% 35.9%, 10.2% 31.4%, 8.7% 26.1%, 9.1% 21.4%, 12.5% 18.5%, 17.9% 17.9%, 23.0% 17.8%, 26.5% 16.4%, 28.4% 12.6%, 30.1% 7.4%, 33.0% 3.3%, 37.2% 2.3%, 42.0% 4.5%, 46.3% 7.6%);
  --md-shape-cookie-9: polygon(50.0% 3.3%, 54.3% 1.1%, 58.7% 0.8%, 62.7% 2.6%, 66.0% 6.1%, 68.8% 9.7%, 71.7% 12.4%, 75.5% 13.6%, 80.0% 14.2%, 84.7% 15.3%, 88.3% 17.9%, 90.2% 21.9%, 90.5% 26.6%, 90.3% 31.2%, 90.8% 35.1%, 92.9% 38.5%, 96.0% 41.9%, 98.9% 45.7%, 100.0% 50.0%, 98.9% 54.3%, 96.0% 58.1%, 92.9% 61.5%, 90.8% 64.9%, 90.3% 68.8%, 90.5% 73.4%, 90.2% 78.1%, 88.3% 82.1%, 84.7% 84.7%, 80.0% 85.8%, 75.5% 86.4%, 71.7% 87.6%, 68.8% 90.3%, 66.0% 93.9%, 62.7% 97.4%, 58.7% 99.2%, 54.3% 98.9%, 50.0% 96.7%, 46.1% 94.2%, 42.5% 92.8%, 38.5% 92.9%, 34.0% 93.9%, 29.3% 94.4%, 25.0% 93.3%, 21.9% 90.2%, 20.0% 85.8%, 18.6% 81.4%, 16.7% 77.9%, 13.6% 75.5%, 9.5% 73.4%, 5.6% 70.7%, 3.0% 67.1%, 2.6% 62.7%, 4.0% 58.1%, 5.8% 53.9%, 6.5% 50.0%, 5.8% 46.1%, 4.0% 41.9%, 2.6% 37.3%, 3.0% 32.9%, 5.6% 29.3%, 9.5% 26.6%, 13.6% 24.5%, 16.7% 22.1%, 18.6% 18.6%, 20.0% 14.2%, 21.9% 9.8%, 25.0% 6.7%, 29.3% 5.6%, 34.0% 6.1%, 38.5% 7.1%, 42.5% 7.2%, 46.1% 5.8%);
  --md-shape-pentagon: polygon(50.0% 4.1%, 54.2% 2.6%, 58.5% 1.7%, 62.9% 1.8%, 67.1% 3.1%, 70.8% 5.4%, 74.0% 8.5%, 76.5% 12.1%, 78.6% 15.9%, 80.4% 19.6%, 82.2% 23.0%, 84.2% 26.0%, 86.6% 28.9%, 89.4% 31.6%, 92.4% 34.6%, 95.3% 37.9%, 97.8% 41.6%, 99.4% 45.7%, 100.0% 50.0%, 99.4% 54.3%, 97.8% 58.4%, 95.3% 62.1%, 92.4% 65.4%, 89.4% 68.4%, 86.6% 71.1%, 84.2% 74.0%, 82.2% 77.0%, 80.4% 80.4%, 78.6% 84.1%, 76.5% 87.9%, 74.0% 91.5%, 70.8% 94.6%, 67.1% 96.9%, 62.9% 98.2%, 58.5% 98.3%, 54.2% 97.4%, 50.0% 95.9%, 46.2% 94.0%, 42.6% 92.1%, 39.2% 90.5%, 35.7% 89.3%, 32.0% 88.5%, 28.1% 87.9%, 23.9% 87.3%, 19.6% 86.2%, 15.5% 84.5%, 11.9% 82.0%, 9.1% 78.7%, 7.2% 74.7%, 6.3% 70.4%, 6.2% 65.9%, 6.7% 61.6%, 7.4% 57.5%, 8.0% 53.7%, 8.3% 50.0%, 8.0% 46.3%, 7.4% 42.5%, 6.7% 38.4%, 6.2% 34.1%, 6.3% 29.6%, 7.2% 25.3%, 9.1% 21.3%, 11.9% 18.0%, 15.5% 15.5%, 19.6% 13.8%, 23.9% 12.7%, 28.1% 12.1%, 32.0% 11.5%, 35.7% 10.7%, 39.2% 9.5%, 42.6% 7.9%, 46.2% 6.0%);
  --md-shape-sunny: polygon(50.0% 0.0%, 54.3% 0.7%, 58.3% 2.7%, 62.0% 5.2%, 65.5% 7.4%, 69.2% 8.9%, 73.2% 9.8%, 77.6% 10.7%, 81.8% 12.1%, 85.4% 14.6%, 87.9% 18.2%, 89.3% 22.4%, 90.2% 26.8%, 91.1% 30.8%, 92.6% 34.5%, 94.8% 38.0%, 97.3% 41.7%, 99.3% 45.7%, 100.0% 50.0%, 99.3% 54.3%, 97.3% 58.3%, 94.8% 62.0%, 92.6% 65.5%, 91.1% 69.2%, 90.2% 73.2%, 89.3% 77.6%, 87.9% 81.8%, 85.4% 85.4%, 81.8% 87.9%, 77.6% 89.3%, 73.2% 90.2%, 69.2% 91.1%, 65.5% 92.6%, 62.0% 94.8%, 58.3% 97.3%, 54.3% 99.3%, 50.0% 100.0%, 45.7% 99.3%, 41.7% 97.3%, 38.0% 94.8%, 34.5% 92.6%, 30.8% 91.1%, 26.8% 90.2%, 22.4% 89.3%, 18.2% 87.9%, 14.6% 85.4%, 12.1% 81.8%, 10.7% 77.6%, 9.8% 73.2%, 8.9% 69.2%, 7.4% 65.5%, 5.2% 62.0%, 2.7% 58.3%, 0.7% 54.3%, 0.0% 50.0%, 0.7% 45.7%, 2.7% 41.7%, 5.2% 38.0%, 7.4% 34.5%, 8.9% 30.8%, 9.8% 26.8%, 10.7% 22.4%, 12.1% 18.2%, 14.6% 14.6%, 18.2% 12.1%, 22.4% 10.7%, 26.8% 9.8%, 30.8% 8.9%, 34.5% 7.4%, 38.0% 5.2%, 41.7% 2.7%, 45.7% 0.7%);
  --md-shape-cookie-4: polygon(50.0% 0.0%, 54.3% 0.5%, 58.5% 2.0%, 62.2% 4.3%, 65.6% 7.2%, 68.5% 10.4%, 71.0% 13.7%, 73.3% 16.8%, 75.5% 19.7%, 77.8% 22.2%, 80.3% 24.5%, 83.2% 26.7%, 86.3% 29.0%, 89.6% 31.5%, 92.8% 34.4%, 95.7% 37.8%, 98.0% 41.5%, 99.5% 45.7%, 100.0% 50.0%, 99.5% 54.3%, 98.0% 58.5%, 95.7% 62.2%, 92.8% 65.6%, 89.6% 68.5%, 86.3% 71.0%, 83.2% 73.3%, 80.3% 75.5%, 77.8% 77.8%, 75.5% 80.3%, 73.3% 83.2%, 71.0% 86.3%, 68.5% 89.6%, 65.6% 92.8%, 62.2% 95.7%, 58.5% 98.0%, 54.3% 99.5%, 50.0% 100.0%, 45.7% 99.5%, 41.5% 98.0%, 37.8% 95.7%, 34.4% 92.8%, 31.5% 89.6%, 29.0% 86.3%, 26.7% 83.2%, 24.5% 80.3%, 22.2% 77.8%, 19.7% 75.5%, 16.8% 73.3%, 13.7% 71.0%, 10.4% 68.5%, 7.2% 65.6%, 4.3% 62.2%, 2.0% 58.5%, 0.5% 54.3%, 0.0% 50.0%, 0.5% 45.7%, 2.0% 41.5%, 4.3% 37.8%, 7.2% 34.4%, 10.4% 31.5%, 13.7% 29.0%, 16.8% 26.7%, 19.7% 24.5%, 22.2% 22.2%, 24.5% 19.7%, 26.7% 16.8%, 29.0% 13.7%, 31.5% 10.4%, 34.4% 7.2%, 37.8% 4.3%, 41.5% 2.0%, 45.7% 0.5%);
  --md-shape-oval: polygon(50.0% 11.0%, 53.4% 11.1%, 56.8% 11.4%, 60.2% 11.8%, 63.7% 12.5%, 67.1% 13.3%, 70.5% 14.4%, 74.0% 15.8%, 77.4% 17.4%, 80.8% 19.2%, 84.0% 21.4%, 87.2% 23.9%, 90.2% 26.8%, 92.9% 30.0%, 95.3% 33.5%, 97.3% 37.3%, 98.8% 41.4%, 99.7% 45.7%, 100.0% 50.0%, 99.7% 54.3%, 98.8% 58.6%, 97.3% 62.7%, 95.3% 66.5%, 92.9% 70.0%, 90.2% 73.2%, 87.2% 76.1%, 84.0% 78.6%, 80.8% 80.8%, 77.4% 82.6%, 74.0% 84.2%, 70.5% 85.6%, 67.1% 86.7%, 63.7% 87.5%, 60.2% 88.2%, 56.8% 88.6%, 53.4% 88.9%, 50.0% 89.0%, 46.6% 88.9%, 43.2% 88.6%, 39.8% 88.2%, 36.3% 87.5%, 32.9% 86.7%, 29.5% 85.6%, 26.0% 84.2%, 22.6% 82.6%, 19.2% 80.8%, 16.0% 78.6%, 12.8% 76.1%, 9.8% 73.2%, 7.1% 70.0%, 4.7% 66.5%, 2.7% 62.7%, 1.2% 58.6%, 0.3% 54.3%, 0.0% 50.0%, 0.3% 45.7%, 1.2% 41.4%, 2.7% 37.3%, 4.7% 33.5%, 7.1% 30.0%, 9.8% 26.8%, 12.8% 23.9%, 16.0% 21.4%, 19.2% 19.2%, 22.6% 17.4%, 26.0% 15.8%, 29.5% 14.4%, 32.9% 13.3%, 36.3% 12.5%, 39.8% 11.8%, 43.2% 11.4%, 46.6% 11.1%);

  --md-ref-typeface: "Google Sans Flex", Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-container: #ffd8e4;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-surface-container-lowest: #0f0d13;
    --md-sys-color-surface-container-low: #1d1b20;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-high: #2b2930;
    --md-sys-color-surface-container-highest: #36343b;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
    --md-sys-color-inverse-surface: #e6e0e9;
    --md-sys-color-inverse-on-surface: #322f35;
    --md-sys-color-inverse-primary: #6750a4;
    --md-custom-color-low: #76daa1;
    --md-custom-color-low-container: #005231;
    --md-custom-color-on-low-container: #92f7bc;
    --md-custom-color-medium: #ffb77f;
    --md-custom-color-medium-container: #6e3900;
    --md-custom-color-on-medium-container: #ffdcc3;
    --md-custom-color-high: #ffb2be;
    --md-custom-color-high-container: #900037;
    --md-custom-color-on-high-container: #ffd9de;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
  }
}

/* Plan calendar (ADR 0043, 0045, 0063): M3 roles for the phases and the training intensity, which M3 has no roles
   of its own for. Every phase band has the same light container; the band titles tell them apart. */
:root {
  --phase-base: var(--md-sys-color-surface-container-low);
  --phase-pre: var(--md-sys-color-surface-container-low);
  --phase-competition: var(--md-sys-color-surface-container-low);
  --selected: var(--md-sys-color-secondary-container);
  /* Training intensity has colours of its own (ADR 0061): M3 custom colours, green, amber and red, harmonized toward
     the primary by Google's material-color-utilities (customColor, blend). Not the error role: hard is not wrong. */
  --intensity-low: var(--md-custom-color-low);
  --intensity-medium: var(--md-custom-color-medium);
  --intensity-high: var(--md-custom-color-high);
  --focus-ring: 3px solid var(--md-sys-color-secondary);
  /* The navigation bar's height, which floating things (FAB, snackbar) keep clear of; 0 next to the rail. M3
     Expressive's flexible navigation bar is 64px (ADR 0095). */
  --nav-bar-height: calc(4rem + env(safe-area-inset-bottom));
  /* M3 Expressive's collapsed navigation rail is 96px wide (ADR 0095). */
  --nav-rail-width: 6rem;
  /* The small app bar's height, with the room it leaves for a phone's status bar in an installed app: what sticks
     under it (a plan's tabs, the calendar's week labels) starts there (ADR 0079). */
  --app-bar-height: calc(4rem + max(0px, env(safe-area-inset-top, 0px) - 0.5rem));
  /* The content column's widest; the app bar lines up with it. */
  --content-max: 48rem;
}
@media (min-width: 37.5rem) { :root { --nav-bar-height: 0px; } }
:root:has(.plan-calendar) { --content-max: 80rem; }

* { box-sizing: border-box; }
/* Read out, not shown. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
html, body {
  margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }

a { color: var(--md-sys-color-primary); text-underline-offset: 0.15em; }
a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* Buttons: common buttons with a state layer (::before) for hover, focus and press. */
.md-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: var(--md-sys-shape-corner-full);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem; text-align: center;
  cursor: pointer; user-select: none; isolation: isolate; background: transparent; color: var(--md-sys-color-primary);
  transition: box-shadow var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects),
    border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
  -webkit-tap-highlight-color: transparent;
}
.md-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.md-button:not(:disabled):hover::before { opacity: var(--md-sys-state-hover); }
.md-button:not(:disabled):focus-visible::before { opacity: var(--md-sys-state-focus); }
.md-button:not(:disabled):active::before { opacity: var(--md-sys-state-pressed); }
.md-button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.md-button:disabled { cursor: not-allowed; color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }

.md-button-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.md-button-filled:not(:disabled):hover { box-shadow: var(--md-sys-elevation-1); }
.md-button-filled:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); box-shadow: none;
}
.md-button-outlined { border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); }
.md-button-outlined:disabled { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
.md-button-text { padding: 0 0.75rem; }
/* Expressive buttons morph while pressed: the round shape squares off to the small corner (ADR 0053). */
.md-button:not(:disabled):active, .md-fab:active, .md-icon-button:active { border-radius: var(--md-sys-shape-corner-small); }
/* M3 Expressive's medium button (ADR 0098): 56px, 24px side space, title-medium label and 24px icon; it squares off
   to the medium corner while pressed. */
.md-button-medium { min-height: 3.5rem; padding: 0 1.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.009375rem; }
.md-button-medium .icon { width: 1.5rem; height: 1.5rem; }
.md-button-medium:not(:disabled):active { border-radius: var(--md-sys-shape-corner-medium); }
.md-button-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-button-tonal:not(:disabled):hover { box-shadow: var(--md-sys-elevation-1); }
.md-button-tonal:disabled { background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); box-shadow: none; }
.icon { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }
.md-button .icon { width: 1.25rem; height: 1.25rem; margin-left: -0.25rem; }

/* M3 Expressive's standard button group (ADR 0098): the pressed button widens by 15% on the fast spatial spring and
   the buttons next to it narrow to make room. */
.button-group { display: flex; align-items: center; gap: 0.125rem; }
.button-group > .md-icon-button {
  width: 2.5rem; transition: width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
    border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.button-group > .md-icon-button:active { width: 2.875rem; }
.button-group > .md-icon-button:has(+ .md-icon-button:active), .button-group > .md-icon-button:active + .md-icon-button { width: 2.125rem; }
@media (prefers-reduced-motion: reduce) { .button-group > .md-icon-button { transition: none; } }

/* Icon button (ADR 0047): a 40px circle around a 24px icon. */
.md-icon-button {
  text-decoration: none; position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  padding: 0; border: 0; border-radius: var(--md-sys-shape-corner-full); background: transparent;
  color: var(--md-sys-color-on-surface-variant); cursor: pointer; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.md-icon-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.md-icon-button:hover::before { opacity: var(--md-sys-state-hover); }
.md-icon-button:focus-visible::before, .md-icon-button:active::before { opacity: var(--md-sys-state-focus); }
.md-icon-button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Extended FAB (ADR 0047, 0068): a phone's main action, floating at the bottom right above the navigation bar. From
   the medium window class the same action is a button in the app bar instead (.bar-main-action). */
.md-fab {
  position: fixed; z-index: 3; bottom: calc(var(--nav-bar-height) + 1rem); right: max(1rem, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 0.75rem; height: 3.5rem; padding: 0 1.25rem 0 1rem; isolation: isolate;
  border: 0; border-radius: var(--md-sys-shape-corner-large); cursor: pointer;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
  box-shadow: var(--md-sys-elevation-3); -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.md-fab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.md-fab:hover::before { opacity: var(--md-sys-state-hover); }
.md-fab:focus-visible::before, .md-fab:active::before { opacity: var(--md-sys-state-focus); }
.md-fab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Room under the last item, so the FAB does not cover it. */
@media (max-width: 37.4375rem) {
  main:has(.md-fab) { padding-bottom: 6rem; }
  .bar-main-action { display: none; }
}
@media (min-width: 37.5rem) { .md-fab { display: none; } }
.bar-main-action { flex: none; }

/* Snackbar (ADR 0047): a short message at the bottom, above the FAB when there is one. */
.snackbar {
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-bar-height) + 1rem); width: min(42rem, calc(100% - 2rem));
  display: flex; align-items: center; gap: 0.25rem; min-height: 3rem; padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-3);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem;
  animation: snackbar-in var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial);
}
@media (max-width: 37.4375rem) { body:has(.md-fab) .snackbar { bottom: calc(var(--nav-bar-height) + 5.5rem); } }
@media (min-width: 37.5rem) { .snackbar { left: calc(50% + var(--nav-rail-width) / 2); } }
.snackbar-text { flex: 1; padding: 0.5rem 0; }
.snackbar .snackbar-action { color: var(--md-sys-color-inverse-primary); text-decoration: none; }
.snackbar .md-icon-button { color: var(--md-sys-color-inverse-on-surface); }
@keyframes snackbar-in { from { opacity: 0; transform: translate(-50%, 0.5rem); } }
@media (prefers-reduced-motion: reduce) { .snackbar { animation: none; } }

/* Segmented buttons and filter chips (ADR 0047): a group of radio buttons; the input is hidden but focusable. */
.choice { border: 0; padding: 0; margin: 0.75rem 0 0; min-width: 0; }
.choice legend {
  padding: 0; margin-bottom: 0.5rem;
  font: 500 0.75rem/1rem var(--md-ref-typeface); letter-spacing: 0.03125rem; color: var(--md-sys-color-on-surface-variant);
}
.choice-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice-option { position: relative; margin: 0; font: inherit; color: inherit; letter-spacing: normal; }
.choice-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice-label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; isolation: isolate;
  height: 2rem; padding: 0 1rem; cursor: pointer; user-select: none; color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
  -webkit-tap-highlight-color: transparent;
}
.choice-label::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.choice-label:hover::before { opacity: var(--md-sys-state-hover); }
.choice-label .icon { display: none; width: 1.125rem; height: 1.125rem; margin-left: -0.5rem; }
.choice-option input:checked + .choice-label {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent;
}
.choice-option input:checked + .choice-label .icon { display: block; }
.choice-option input:focus-visible + .choice-label { outline: var(--focus-ring); outline-offset: 2px; }
/* Segmented buttons drawn as M3 Expressive's connected button group (ADR 0053): tonal buttons 2px apart, round outer
   corners, small inner corners that tighten while pressed, and the selected one fully round. */
.segmented .choice-options { flex-wrap: nowrap; gap: 2px; }
.segmented .choice-option { flex: 1; display: flex; }
.segmented .choice-label {
  --outer: var(--md-sys-shape-corner-full); --inner: var(--md-sys-shape-corner-small);
  flex: 1; height: 2.5rem; padding: 0 0.75rem; border: 0; border-radius: var(--inner);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
    background-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.segmented .choice-option:first-child .choice-label { border-radius: var(--outer) var(--inner) var(--inner) var(--outer); }
.segmented .choice-option:last-child .choice-label { border-radius: var(--inner) var(--outer) var(--outer) var(--inner); }
.segmented .choice-label:active { --inner: var(--md-sys-shape-corner-extra-small); }
.segmented .choice-option input:checked + .choice-label {
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
/* Chips square off a little when selected, the Expressive toggle shape. */
.chips .choice-label { transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }
.chips .choice-option input:checked + .choice-label { border-radius: var(--md-sys-shape-corner-medium); }
.supporting {
  margin: 0.25rem 1rem 0; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.025rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* Outlined text fields and selects; their labels sit above them. */
.md-text-field {
  display: block; width: 100%; min-height: 3.5rem; padding: 1rem;
  font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  color: var(--md-sys-color-on-surface); background: transparent; caret-color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small);
  transition: border-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects), box-shadow var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
textarea.md-text-field { resize: vertical; min-height: 6rem; }
.md-text-field:hover:not(:disabled):not(:focus) { border-color: var(--md-sys-color-on-surface); }
.md-text-field:focus { outline: 0; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.md-text-field[aria-invalid="true"] { border-color: var(--md-sys-color-error); }
.md-text-field[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--md-sys-color-error); }
.md-text-field:disabled {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); cursor: not-allowed;
}
.md-text-field::placeholder { color: var(--md-sys-color-on-surface-variant); }
select.md-text-field {
  appearance: none; padding-right: 3rem; cursor: pointer;
  /* The arrow_drop_down triangle, drawn as two half-squares so it takes the on-surface-variant role. */
  background:
    linear-gradient(45deg, transparent 50%, var(--md-sys-color-on-surface-variant) 50%) no-repeat right 1.25rem center / 0.3125rem 0.3125rem,
    linear-gradient(135deg, var(--md-sys-color-on-surface-variant) 50%, transparent 50%) no-repeat right 0.9375rem center / 0.3125rem 0.3125rem;
}
select.md-text-field option { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
input[type="range"] { accent-color: var(--md-sys-color-primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--md-sys-color-primary); width: 1.125rem; height: 1.125rem; }

/* Dialogs: basic dialog, extra-large corners, actions at the end. */
dialog {
  border: none; border-radius: var(--md-sys-shape-corner-extra-large); padding: 1.5rem; margin: auto;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  min-width: 17.5rem; max-width: 35rem; width: calc(100% - 3rem); box-shadow: var(--md-sys-elevation-3);
}
dialog::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); }
dialog .dialog-headline { margin: 0 0 1rem; font: 500 1.5rem/2rem var(--md-ref-typeface); letter-spacing: 0; color: var(--md-sys-color-on-surface); }
dialog .actions { justify-content: flex-end; margin-top: 0; }
dialog[open] { animation: dialog-in var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(-1rem) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }

/* The frame: a small top app bar, the page, and a navigation bar (a navigation rail on wide screens). */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.bar {
  --bar-background: var(--md-sys-color-surface);
  background: var(--bar-background); position: sticky; top: 0; z-index: 2;
  transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
/* Once the page scrolls under it, the app bar takes a container color (ADR 0051; set by atlas/ui/interaction). */
html[data-scrolled] .bar { --bar-background: var(--md-sys-color-surface-container); }
/* A new page fades in (ADR 0051). Opacity only: a transform would move the FAB and snackbar while it runs. */
.page { animation: page-in var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects); }
@keyframes page-in { from { opacity: 0; } }
.bar-content {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem; padding: 0.5rem 1rem; padding-top: max(0.5rem, env(safe-area-inset-top));
  max-width: var(--content-max); width: 100%; margin: 0 auto;
}
.bar h1 { flex: 1; min-width: 0; font: 500 1.375rem/1.75rem var(--md-ref-typeface); margin: 0; } /* title-large emphasized */
/* The back button (ADR 0048) sits at the bar's leading edge, its icon lined up with the page's margin. */
.bar-content > .md-icon-button { margin: 0 -0.25rem 0 -0.5rem; color: var(--md-sys-color-on-surface); }
.bar-content > .button-group { margin: 0 -0.25rem 0 -0.5rem; }
.bar-content > .button-group > .md-icon-button { color: var(--md-sys-color-on-surface); }
/* Linear progress under the app bar while a sync runs (ADR 0048). It fades in late, so a quick sync does not
   flicker. As in M3 Expressive (ADR 0095), a 4px gap in the bar's colour parts the indicator from the track. */
.md-linear-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0.25rem; overflow: hidden;
  background: var(--md-sys-color-secondary-container); opacity: 0;
  animation: progress-appear 0.2s 0.5s forwards;
}
.md-linear-progress::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); box-shadow: 0 0 0 0.25rem var(--bar-background);
  animation: progress-slide 1.6s var(--md-sys-motion-easing) infinite;
}
@keyframes progress-appear { to { opacity: 1; } }
@keyframes progress-slide { from { left: -40%; } to { left: 100%; } }
/* A loading indicator next to a status text (ADR 0048, 0053). */
.loading { display: flex; align-items: center; gap: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
/* M3 Expressive's loading indicator (ADR 0053): a 38px shape in a 48px box that morphs through the shape library
   while it turns, for waits too short for a progress indicator. */
.md-loading-indicator { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; }
.md-loading-indicator::before {
  content: ""; width: 2.375rem; height: 2.375rem; background: var(--md-sys-color-primary);
  clip-path: var(--md-shape-soft-burst); animation: loading-morph 4.2s linear infinite, loading-turn 1.4s linear infinite;
}
@keyframes loading-morph {
  0%, 100% { clip-path: var(--md-shape-soft-burst); }
  16.6% { clip-path: var(--md-shape-cookie-9); }
  33.3% { clip-path: var(--md-shape-pentagon); }
  50% { clip-path: var(--md-shape-sunny); }
  66.6% { clip-path: var(--md-shape-cookie-4); }
  83.3% { clip-path: var(--md-shape-oval); }
}
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .md-linear-progress::before { animation-duration: 4s; }
  .md-loading-indicator::before { animation: loading-turn 4s linear infinite; }
}
main { flex: 1; padding: 0 1rem 1.5rem; max-width: var(--content-max); width: 100%; margin: 0 auto; }

.tabs { position: sticky; bottom: 0; z-index: 2; background: var(--md-sys-color-surface-container); }
.tabs-content {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem;
  max-width: 48rem; width: 100%; margin: 0 auto; padding: 0.375rem 0.5rem;
  padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font: 500 0.75rem/1rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  -webkit-tap-highlight-color: transparent;
}
/* The active indicator grows out from its centre on the fast spatial spring (M3 Expressive, ADR 0095). */
.nav-indicator {
  position: relative; display: grid; place-items: center; width: 3.5rem; height: 2rem;
  border-radius: var(--md-sys-shape-corner-full); isolation: isolate;
  background: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container)) center / 0 100% no-repeat;
  transition: background-size var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.nav-indicator::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--md-sys-color-on-surface); opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.tabs a:hover .nav-indicator::before { opacity: var(--md-sys-state-hover); }
.tabs a:active .nav-indicator::before { opacity: var(--md-sys-state-pressed); }
.tabs a[aria-current="page"] { color: var(--md-sys-color-secondary); font-weight: 700; }
.tabs a[aria-current="page"] .nav-indicator { background-size: 100% 100%; color: var(--md-sys-color-on-secondary-container); }
@media (prefers-reduced-motion: reduce) { .nav-indicator { transition: none; } }
.tabs a:focus-visible { outline: 0; }
.tabs a:focus-visible .nav-indicator { outline: var(--focus-ring); outline-offset: 2px; }
@media (min-width: 37.5rem) {
  .shell { padding-left: var(--nav-rail-width); }
  .tabs { position: fixed; top: 0; bottom: 0; left: 0; width: var(--nav-rail-width); background: var(--md-sys-color-surface); }
  .tabs-content {
    grid-auto-flow: row; grid-auto-rows: max-content; gap: 0.75rem;
    padding: max(2.75rem, env(safe-area-inset-top)) 0 1rem;
  }
}

/* Text and small pieces. */
/* Empty states (ADR 0050): an icon in a tonal circle, a headline, a line of help and maybe an action. */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
  padding: 2.5rem 1rem; color: var(--md-sys-color-on-surface-variant);
}
.empty > .icon {
  width: 5rem; height: 5rem; padding: 1.375rem; margin-bottom: 0.5rem; clip-path: var(--md-shape-cookie-9);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.empty h2 { color: var(--md-sys-color-on-surface); font: 500 1.375rem/1.75rem var(--md-ref-typeface); margin: 0; }
.empty p { margin: 0 0 0.5rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; }
/* A compact one (ADR 0069), for a list with a form under it: the form stays in view on a phone. */
.empty-compact { padding: 1.5rem 1rem; }
.empty-compact > .icon { width: 3.5rem; height: 3.5rem; padding: 0.875rem; margin-bottom: 0.25rem; }
.empty-compact h2 { font: 500 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.009375rem; }
a.md-button { text-decoration: none; }
.signin {
  max-width: 24rem; min-height: 100dvh; margin: 0 auto; padding: 4rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.signin h1 { font: 400 2.25rem/2.75rem var(--md-ref-typeface); margin: 0 0 0.5rem; }
.signin .md-button { margin-top: 1rem; }
.muted { color: var(--md-sys-color-on-surface-variant); margin-top: 0; }
form { display: grid; gap: 0.5rem; }
label {
  font: 500 0.75rem/1rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  color: var(--md-sys-color-on-surface-variant); margin-top: 0.75rem;
}
.error { color: var(--md-sys-color-error); margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; }
/* Sections are list subheaders (ADR 0055, 0069): the app bar holds the page's title. Their text lines up with the
   list items' text. */
.subheader {
  margin: 1.25rem 1rem 0.5rem; color: var(--md-sys-color-on-surface-variant);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
}
.toolbar:empty { display: none; }
/* Banners (ADR 0049): a message at the top of the content until it is resolved, with an icon and actions. */
.banner {
  margin: 0 0 1rem; padding: 1rem 1rem 0.5rem; border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
}
.banner-body { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 0.5rem; }
.banner-body > .icon { color: var(--md-sys-color-on-surface-variant); margin-top: -0.0625rem; }
.banner-text { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; }
.banner-text ul { margin: 0; padding-left: 1.25rem; }
.banner-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-right: -0.5rem; }
.banner-error, .banner.problems { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.banner-error .banner-body > .icon, .banner.problems .banner-body > .icon,
.banner.problems .md-button { color: var(--md-sys-color-on-error-container); }

/* A list of rows that open other pages, such as Settings (ADR 0049). */
.link-list { padding: 0; }
/* A link row's padding is its link's, so the state layer and ripple cover the whole row. `.list.link-list`, not
   `.link-list`: the list's own item padding comes later in this file and would win otherwise. A row that only shows
   something (the account, Sync) has the same padding itself, so all rows line up. */
.list.link-list li { padding: 0; }
.list.link-list li.info-item { padding: 0.75rem 1rem; }
.link-list a {
  position: relative; display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding: 0.75rem 1rem 0.75rem 1rem;
  color: var(--md-sys-color-on-surface); text-decoration: none; isolation: isolate;
}
.link-list a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--md-sys-color-on-surface);
  opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.link-list a:hover { text-decoration: none; }
.link-list a:hover::before { opacity: var(--md-sys-state-hover); }
.link-list a:active::before { opacity: var(--md-sys-state-pressed); }
.link-list a:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.link-list .icon { color: var(--md-sys-color-on-surface-variant); }
.link-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link-item-headline { font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem; }
.link-item-supporting {
  font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; color: var(--md-sys-color-on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Lists (ADR 0047), as M3 Expressive's segmented list (ADR 0053): each item its own filled shape, 2px apart, with
   large corners at the ends of the list and extra-small ones between items; the link is the headline. */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.list li {
  position: relative; padding: 0.75rem 1rem; min-height: 3.5rem; overflow: hidden;
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-extra-small);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
/* The item's lines are centred in it, so a one-line item is as high as M3's 56px with its text in the middle. */
.list li:not(.info-item) { display: flex; flex-direction: column; justify-content: center; }
.list li:first-child { border-top-left-radius: var(--md-sys-shape-corner-large); border-top-right-radius: var(--md-sys-shape-corner-large); }
.list li:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large); border-bottom-right-radius: var(--md-sys-shape-corner-large); }
/* Only rows that open something change shape when pointed at. */
.link-list li:has(> a):hover { border-radius: var(--md-sys-shape-corner-medium); }
.link-list li:has(> a):active, .link-list li:has(> a):focus-within { border-radius: var(--md-sys-shape-corner-large); }
.list a { color: var(--md-sys-color-on-surface); font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem; text-decoration: none; }
.list a:hover { text-decoration: underline; }
/* A row that opens a page (ADR 0069): its headline link covers the whole item, with M3's state layer and the
   segmented list's shape change on hover, like the Settings list. */
.list .row-link::after {
  content: ""; position: absolute; inset: 0; background: var(--md-sys-color-on-surface);
  opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.list .row-link:hover { text-decoration: none; }
/* A row that opens a dialog has a button for its headline (ADR 0080), drawn like the link. */
.list button.row-link {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--md-sys-color-on-surface); font: 500 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
}
.list li:has(.row-link):hover .row-link::after { opacity: var(--md-sys-state-hover); }
.list li:has(.row-link):active .row-link::after { opacity: var(--md-sys-state-pressed); }
.list li:has(.row-link):hover { border-radius: var(--md-sys-shape-corner-medium); }
.list .row-link:focus-visible { outline: 0; }
.list .row-link:focus-visible::after { outline: var(--focus-ring); outline-offset: -3px; }
.list p { margin: 0.125rem 0 0; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; color: var(--md-sys-color-on-surface-variant); }
.list .actions { margin-top: 0.5rem; }
/* An activity's figures are what the row is about: in the body colour, not the supporting text's. */
.list p.figures { color: var(--md-sys-color-on-surface); }
.chip-row { margin-left: 0.5rem; }
.label-chip {
  gap: 0.25rem; display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.5rem; margin-right: 0.25rem;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface-variant); font: 500 0.75rem/1rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  vertical-align: middle;
}
.label-chip .icon { width: 1rem; height: 1rem; margin-left: -0.125rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
/* Today's state of a workout (ADR 0048): an assist-chip-shaped label in the color of its kind, then details. */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.5rem 0; }
.status-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 1rem;
  border-radius: var(--md-sys-shape-corner-small); font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
  border: 1px solid transparent;
}
.status-chip .icon { width: 1.125rem; height: 1.125rem; margin-left: -0.5rem; }
.status-rest { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.status-planned { border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); }
.status-missed { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.status-suggested { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.status-done { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.status-details { color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; line-height: 1.25rem; }
/* The status's action follows it on its line (ADR 0081); the text button's own padding lines its label up. */
.status .status-action { margin-left: -0.25rem; }
.description { white-space: pre-wrap; }
/* A long description shows three lines until More (ADR 0076). */
.description.clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  margin-bottom: 0;
}
.description-toggle { margin-left: -0.75rem; }
/* Panels: filled containers on the page surface. */
.plan-form, .found {
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-large);
}
.plan-form { padding: 1rem 1rem 1.25rem; margin-bottom: 1rem; }
/* Fields side by side line up at the top, where their inputs are: help text under one of them must not move it.
   A button beside a field is centred on the field's 56px input (0.5rem margin + 3.5rem input, the button 2.5rem). */
.row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: start; }
.row > div { flex: 1 1 8rem; }
.row > .md-button { margin-top: 1rem; }
.coach-form { margin-top: 1rem; }
.found { padding: 0.75rem 1rem; margin-top: 0.75rem; }
.found p { margin: 0.25rem 0; }
.totals { color: var(--md-sys-color-on-surface-variant); font-weight: 400; margin-left: 0.5rem; font-size: 0.875rem; }

/* Plan calendar (ADR 0043, 0066): weeks as rows, days as columns, bands per phase, the full width at every size. On
   a phone the days of a week stack. A week and a workout open in dialogs. */
/* The header lines up with the wider page. */
.calendar { min-width: 0; }
.calendar-head { display: none; }
.phase-band { border-radius: var(--md-sys-shape-corner-large); padding: 0.25rem 0.5rem 0.5rem; margin-bottom: 0.75rem; }
.phase-base { background: var(--phase-base); }
.phase-pre { background: var(--phase-pre); }
.phase-competition { background: var(--phase-competition); }
.phase-none { border: 1px dashed var(--md-sys-color-outline-variant); }
.band-title { color: var(--md-sys-color-on-surface-variant); }
.band-title { font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem; margin: 0.375rem 0.25rem 0.5rem; }
.calendar-week {
  display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--md-sys-color-outline-variant);
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium);
  overflow: clip; margin-bottom: 0.375rem; /* clip, not hidden: hidden would stop the sticky week label */
}
.calendar-week.selected { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); }
.week-label {
  font: inherit; text-align: left; cursor: pointer; border: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  padding: 0.375rem 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline;
}
.week-label:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface)); }
.calendar-week.selected .week-label { background: var(--selected); color: var(--md-sys-color-on-secondary-container); }
.week-label:focus-visible, .workout:focus-visible, .add-here:focus-visible { outline: 2px solid var(--md-sys-color-secondary); outline-offset: -2px; }
.week-distance { color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; }
.calendar-day { background: var(--md-sys-color-surface); padding: 0.25rem 0.375rem; display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.5rem; min-height: 2.25rem; }
.day-name { color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; padding-top: 0.125rem; }
.day-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
/* A workout is a small filled card (ADR 0051), its kind a bar along the leading edge. */
.workout {
  --kind: var(--md-sys-color-outline);
  font: inherit; font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.015625rem; text-align: left; cursor: pointer; width: 100%;
  border: 0; border-radius: var(--md-sys-shape-corner-small); box-shadow: inset 0.25rem 0 0 var(--kind);
  padding: 0.375rem 0.5rem 0.375rem 0.75rem; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  display: flex; flex-direction: column; overflow-wrap: break-word; hyphens: auto;
  transition: background-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.workout:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-high)); }
.workout.open { background: var(--selected); color: var(--md-sys-color-on-secondary-container); }
.workout.kind-easy, .workout.kind-long { --kind: var(--intensity-low); }
.workout.kind-tempo, .workout.kind-interval { --kind: var(--intensity-medium); }
.workout.kind-race { --kind: var(--intensity-high); }
.workout.kind-rest { --kind: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); }
/* A long title wraps between words, hyphenated, and stops after two lines; the dialog has all of it (ADR 0075). */
.workout-title {
  font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
/* The kind in words (ADR 0070): the bar's colour alone would not tell easy from long, or tempo from intervals. */
.workout-kind {
  color: var(--md-sys-color-on-surface-variant); font: 500 0.6875rem/1rem var(--md-ref-typeface);
  letter-spacing: 0.03125rem;
}
.workout.open .workout-kind { color: inherit; }
.workout-targets { color: var(--md-sys-color-on-surface-variant); }
/* Adding a workout to a day: an icon button, 40px to touch (ADR 0075). */
.add-here {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer; align-self: flex-start;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: none; color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.add-here .icon { width: 1.25rem; height: 1.25rem; }
.add-here:hover { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); }
.intensity { font-size: 0.75rem; font-weight: 500; padding: 0 0.375rem; border-radius: var(--md-sys-shape-corner-small); border: 1px solid currentColor; }
/* An intensity chip is filled with its custom colour's container (ADR 0061). */
.intensity-low { border-color: transparent; background: var(--md-custom-color-low-container); color: var(--md-custom-color-on-low-container); }
.intensity-medium { border-color: transparent; background: var(--md-custom-color-medium-container); color: var(--md-custom-color-on-medium-container); }
.intensity-high { border-color: transparent; background: var(--md-custom-color-high-container); color: var(--md-custom-color-on-high-container); }
.intensity-setting { margin-top: 0.5rem; }
.intensity-heading { display: flex; justify-content: space-between; align-items: baseline; }
.intensity-heading label { margin: 0; }
.intensity-value { font-weight: 500; font-variant-numeric: tabular-nums; }
.intensity-control { display: flex; align-items: center; gap: 0.5rem; }
/* Material 3's slider (ADR 0051): a thick rounded track, the active part in primary, and a narrow handle with a gap
   around it. `--fill` comes from the view, for browsers without a progress pseudo-element. */
.intensity-control input[type="range"] {
  --gap-color: var(--md-sys-color-surface);
  flex: 1; min-width: 0; height: 2.75rem; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.details-dialog .intensity-control input[type="range"] { --gap-color: var(--md-sys-color-surface-container-high); }
.intensity-control input[type="range"]::-webkit-slider-runnable-track {
  height: 1rem; border-radius: var(--md-sys-shape-corner-full);
  background: linear-gradient(to right, var(--md-sys-color-primary) var(--fill, 0%), var(--md-sys-color-secondary-container) var(--fill, 0%));
}
.intensity-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.25rem; height: 2.75rem; margin-top: -0.875rem; border-radius: 2px;
  background: var(--md-sys-color-primary); box-shadow: 0 0 0 0.375rem var(--gap-color);
}
.intensity-control input[type="range"]::-moz-range-track {
  height: 1rem; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-secondary-container);
}
.intensity-control input[type="range"]::-moz-range-progress {
  height: 1rem; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary);
}
.intensity-control input[type="range"]::-moz-range-thumb {
  width: 0.25rem; height: 2.75rem; border: 0; border-radius: 2px;
  background: var(--md-sys-color-primary); box-shadow: 0 0 0 0.375rem var(--gap-color);
}
.intensity-control input[type="range"]:focus-visible { outline: none; }
.intensity-control input[type="range"]:focus-visible::-webkit-slider-thumb { outline: var(--focus-ring); outline-offset: 0.375rem; }
.intensity-control input[type="range"]:focus-visible::-moz-range-thumb { outline: var(--focus-ring); outline-offset: 0.375rem; }
/* A week without an intensity: the slider sits at 0 but looks inactive until it is moved. */
.intensity-control input[type="range"].unset { opacity: 0.38; }
.intensity-meter { margin-top: 0.25rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; align-items: center; }
.facts dt { color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; }
.facts dt label { margin: 0; }
.facts dd { margin: 0; }
/* A determinate linear progress indicator as Material 3 draws it (ADR 0051): the indicator, a gap, the rest of the
   track, and a stop dot at its end. */
.goal-meter { position: relative; display: flex; align-items: center; gap: 0.25rem; height: 0.625rem; margin-top: 0.75rem; }
/* The active indicator is M3 Expressive's wave (ADR 0053): 3px amplitude, 40px wavelength, 4px thick, drawn by
   masking the bar with a repeating wave. */
.goal-meter span {
  flex: none; display: block; height: 100%; max-width: calc(100% - 0.25rem); background: var(--md-sys-color-primary);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5Q10-1 20 5T40 5' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) repeat-x left center / 2.5rem 0.625rem; mask: var(--wave) repeat-x left center / 2.5rem 0.625rem;
}
.goal-meter::after { content: ""; flex: 1; height: 0.25rem; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-secondary-container); }
.goal-meter::before {
  content: ""; position: absolute; right: 0; top: 50%; width: 0.25rem; height: 0.25rem; transform: translateY(-50%);
  border-radius: 50%; background: var(--md-sys-color-primary);
}
.goal-meter.over span { background: var(--intensity-medium); }
.plan-settings { border: 0; padding: 0; margin: 0.75rem 0 0; min-width: 0; }
.plan-settings legend { font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem; padding: 0; }
@media (min-width: 52.5rem) {
  .calendar-head, .calendar-week { grid-template-columns: 6rem repeat(7, minmax(0, 1fr)); }
  .calendar-head {
    display: grid; gap: 1px; padding: 0 0.5rem 0.25rem; text-align: center;
    color: var(--md-sys-color-on-surface-variant); font: 500 0.75rem/1rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  }
  .calendar-week .week-label { flex-direction: column; gap: 0.125rem; }
  .calendar-day { display: block; min-height: 4.5rem; }
  .calendar-day .day-name { display: none; }
  .add-here { width: 2rem; height: 2rem; }
}

.summary { font-weight: 500; }
.table-wrap { overflow-x: auto; }
table.progress { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.875rem; line-height: 1.25rem; }
table.progress caption { text-align: left; color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; padding-bottom: 0.25rem; }
table.progress th, table.progress td {
  padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); text-align: right; white-space: nowrap;
}
table.progress thead th { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
table.progress th[scope="row"], table.progress th:first-child { text-align: left; font-weight: 500; }
/* On a phone each week is a card of label and value pairs (ADR 0051); the table stays a table for screen readers. */
@media (max-width: 37.4375rem) {
  table.progress thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.progress, table.progress caption, table.progress tbody, table.progress tr, table.progress th, table.progress td { display: block; }
  table.progress tr {
    margin-bottom: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
  }
  table.progress th[scope="row"] { padding: 0 0 0.25rem; border: 0; font: 500 0.875rem/1.25rem var(--md-ref-typeface); }
  table.progress td { display: flex; justify-content: space-between; padding: 0.125rem 0; border: 0; }
  table.progress td::before { content: attr(data-label); color: var(--md-sys-color-on-surface-variant); }
}

/* Strava's brand rules: their button image is shown as it is, with no background, border or padding of ours. */
button.strava-connect { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; margin-top: 0.75rem; line-height: 0; border-radius: 6px; }
button.strava-connect:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
button.strava-connect img { display: block; }
button.strava-connect:disabled { opacity: 0.6; cursor: progress; }
.attribution { margin: 0.75rem 0 0; line-height: 0; }
.attribution img { height: 15px; width: auto; }
/* Disconnect, the quieter action, is set apart at the end of the row (ADR 0074). */
.strava .actions .disconnect { margin-left: auto; }
/* "View on Strava" must be identifiable as a link: bold, underlined and in Strava's orange. */
a.strava-link { color: #FC5200; font-weight: 700; text-decoration: underline; }
/* Training zones in Settings (ADR 0034, 0035) */
.zones-form .subheader { margin: 1.25rem 0 0; }
.zones-form > .muted { font-size: 0.875rem; margin: 0.25rem 0 0; }
/* The value zones are calculated from, with its Calculate button on the line under its help (ADR 0084): beside the
   field, the long label left the field narrow and wrapped on a phone. */
.zone-source { display: grid; justify-items: start; gap: 0.75rem; }
.zone-source > .md-field { justify-self: stretch; }
/* A zone (ADR 0077): an outlined field with its unit, and where the zone ends beside it, lined up with the input. */
.zones { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.zone { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; align-items: start; gap: 1rem; }
.zone-end {
  padding-top: 1rem; color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem; line-height: 1.5rem; letter-spacing: 0.015625rem;
}
/* Save stays in view above the navigation bar while the form scrolls. */
.zones-form > .actions {
  position: sticky; bottom: var(--nav-bar-height); z-index: 1; margin: 1rem -1rem 0; padding: 0.75rem 1rem;
  background: var(--md-sys-color-surface); border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Ripple (ADR 0051): a circle that grows from where the pointer went down and fades. atlas/ui/interaction sets its
   position and size and flips data-ripple between a and b to restart it. */
.md-button, .md-fab, .md-icon-button, .choice-label, .link-list a, .nav-indicator { overflow: hidden; }
:is(.md-button, .md-fab, .md-icon-button, .choice-label, .link-list a, .nav-indicator)[data-ripple]::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--ripple-x); top: var(--ripple-y); width: var(--ripple-size); height: var(--ripple-size);
  border-radius: 50%; background: currentColor; opacity: 0; transform: translate(-50%, -50%) scale(1);
}
[data-ripple="a"]::after { animation: ripple-a 0.45s cubic-bezier(0.2, 0, 0, 1); }
[data-ripple="b"]::after { animation: ripple-b 0.45s cubic-bezier(0.2, 0, 0, 1); }
@keyframes ripple-a { from { opacity: 0.12; transform: translate(-50%, -50%) scale(0); } }
@keyframes ripple-b { from { opacity: 0.12; transform: translate(-50%, -50%) scale(0); } }
@media (prefers-reduced-motion: reduce) {
  [data-ripple]::after { animation: none !important; }
  .page { animation: none; }
}

/* A field with a picker button at its end (ADR 0054). The browser's own picker button is hidden where it can be
   (Chrome, Edge, Safari); the field still takes typing. */
/* The wrapper takes the field's top margin, so the button lines up with the input whether or not that margin would
   collapse through the wrapper (it does not in a flex row). */
.field-with-trigger { position: relative; margin-top: 0.5rem; }
.field-with-trigger > .md-field { margin-top: 0; }
.field-with-trigger .md-text-field { padding-right: 3.5rem; }
.field-with-trigger input::-webkit-calendar-picker-indicator { display: none; }
/* Browsers draw date and time inputs their own way: Safari centres the value and sizes the box to it, Chrome adds
   padding inside. Drawn plainly at a text field's 56px, the button at the end is centred on them (ADR 0086). */
.field-with-trigger input:is([type="date"], [type="time"]) { -webkit-appearance: none; appearance: none; height: 3.5rem; }
.field-with-trigger input::-webkit-datetime-edit { padding: 0; }
.field-with-trigger input::-webkit-date-and-time-value { margin: 0; text-align: start; }
.field-trigger { position: absolute; right: 0.5rem; top: 0.5rem; }
/* The person finder's search turns into a small loading indicator while it looks (ADR 0083). */
.field-trigger:disabled { cursor: progress; }
.field-trigger .md-loading-indicator { width: 1.5rem; height: 1.5rem; }
.field-trigger .md-loading-indicator::before { width: 1.25rem; height: 1.25rem; }

/* M3's modal pickers (ADR 0054): a label, a headline or the time fields, the picking area, and Cancel and OK. */
dialog.picker { padding: 0; min-width: 0; width: auto; max-width: calc(100% - 2rem); }
.picker-label {
  margin: 0; padding: 1rem 1.5rem 0; color: var(--md-sys-color-on-surface-variant);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
}
.picker-headline {
  margin: 0; padding: 2.25rem 1.5rem 0.75rem; color: var(--md-sys-color-on-surface);
  font: 400 2rem/2.5rem var(--md-ref-typeface); border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.picker-actions { justify-content: flex-end; margin: 0; padding: 0.5rem 0.75rem 0.75rem; }

/* Date picker: 360px wide, a month row, then 40px days in 48px cells. */
dialog.date-picker { width: 22.5rem; }
.date-picker-month { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem 0 1.5rem; }
.date-picker-title {
  flex: 1; color: var(--md-sys-color-on-surface-variant);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
}
.date-picker-grid { border-collapse: collapse; margin: 0 auto; table-layout: fixed; }
.date-picker-grid th {
  width: 3rem; height: 3rem; color: var(--md-sys-color-on-surface);
  font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
}
.date-picker-grid td { width: 3rem; height: 3rem; padding: 0; text-align: center; }
.date-picker-day {
  position: relative; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; isolation: isolate; overflow: hidden;
  border-radius: var(--md-sys-shape-corner-full); background: none; cursor: pointer;
  color: var(--md-sys-color-on-surface); font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
.date-picker-day::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.date-picker-day:hover::before { opacity: var(--md-sys-state-hover); }
.date-picker-day:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.date-picker-day.today { color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.date-picker-day.selected { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); box-shadow: none; }

/* Time picker: the hour and minute as large fields, then a 256px dial with the hand. 24-hour: the inner ring holds
   00 and 13 to 23. */
dialog.time-picker { width: 20.5rem; }
.time-picker-fields { display: flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 1.25rem 1.5rem 0; }
.time-picker-part {
  width: 6rem; height: 5rem; padding: 0; border: 0; cursor: pointer; border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  font: 400 3.5625rem/4rem var(--md-ref-typeface); letter-spacing: -0.015625rem; font-variant-numeric: tabular-nums;
  transition: background-color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.time-picker-part.active { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.time-picker-part:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.time-picker-colon { width: 1.5rem; text-align: center; color: var(--md-sys-color-on-surface); font: 400 3.5625rem/4rem var(--md-ref-typeface); }
.time-picker-dial {
  --outer: 6.25rem; --inner: 4.25rem;
  position: relative; width: 16rem; height: 16rem; margin: 2.25rem auto 1.5rem; border-radius: 50%;
  background: var(--md-sys-color-surface-container-highest);
}
.time-picker-dial::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem; margin: -0.25rem;
  border-radius: 50%; background: var(--md-sys-color-primary);
}
.time-picker-hand {
  --r: var(--outer);
  position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: var(--r);
  background: var(--md-sys-color-primary); transform-origin: 50% 100%; transform: rotate(var(--angle));
  transition: transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
    height var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial);
}
.time-picker-hand.inner { --r: var(--inner); }
.time-picker-number {
  --r: var(--outer);
  position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem; padding: 0; border: 0;
  border-radius: 50%; background: none; cursor: pointer; color: var(--md-sys-color-on-surface);
  font: 400 1rem/1.5rem var(--md-ref-typeface); font-variant-numeric: tabular-nums;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--angle)));
}
.time-picker-number.inner { --r: var(--inner); font-size: 0.875rem; }
.time-picker-number:hover:not(.selected) { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.time-picker-number.selected { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.time-picker-number:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .time-picker-hand { transition: none; } }

/* A confirmation dialog's supporting text (ADR 0055): what happens if the action goes ahead. */
dialog .dialog-supporting { margin: 0 0 1.5rem; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; }

/* The app bar's offline icon (ADR 0055): pressing it explains being offline. */
.bar-content > .offline-indicator { margin: 0 -0.5rem 0 0; color: var(--md-sys-color-on-surface-variant); }

/* A Material 3 large badge on a navigation item (ADR 0055): the number of sync problems on Settings. */
.nav-badge {
  position: absolute; top: 0.125rem; left: calc(50% + 0.375rem); min-width: 1rem; height: 1rem; padding: 0 0.25rem;
  border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
  font: 500 0.6875rem/1rem var(--md-ref-typeface); letter-spacing: 0.03125rem; text-align: center;
}

/* A list row that shows something instead of opening a page, such as the account in Settings (ADR 0055). */
.info-item { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }
.info-item > .icon { color: var(--md-sys-color-on-surface-variant); }
.info-item-supporting {
  font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.015625rem; color: var(--md-sys-color-on-surface-variant);
}
.info-item .md-button { margin-right: -0.5rem; }

/* Menus (ADR 0056): a native popover, placed by atlas/ui/interaction under the button that opens it. M3 Expressive's
   rounder menu (ADR 0095): large corners, and items inset 4px with the medium corner, concentric with the menu's. */
.md-menu {
  position: fixed; inset: auto; margin: 0; padding: 0.25rem; min-width: 7rem; max-width: 17.5rem; border: 0;
  border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-2);
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
}
.md-menu:popover-open { animation: menu-in var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-0.25rem); } }
.md-menu-item {
  position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; height: 3rem; padding: 0 0.75rem;
  border: 0; border-radius: var(--md-sys-shape-corner-medium); background: none; cursor: pointer; isolation: isolate;
  text-align: left; white-space: nowrap;
  color: var(--md-sys-color-on-surface); font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
}
.md-menu-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.md-menu-item:hover::before { opacity: var(--md-sys-state-hover); }
.md-menu-item:focus-visible { outline: none; }
.md-menu-item:focus-visible::before { opacity: var(--md-sys-state-focus); }
.md-menu-item .icon { color: var(--md-sys-color-on-surface-variant); }
/* In a list row the menu button sits at the row's top end. */
.list li:has(.md-menu-button) { padding-right: 3.5rem; }
.list .md-menu-button { position: absolute; top: 0.5rem; right: 0.25rem; }
.list .actions:has(> .md-menu-button) { margin: 0; }
@media (prefers-reduced-motion: reduce) { .md-menu:popover-open { animation: none; } }

/* Full-screen dialogs for forms (ADR 0057): on a phone the whole screen, with a top bar of Close, the title and
   the submit button; from 600px a dialog in the middle. A click outside does not close it. */
dialog.form-dialog {
  width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0; margin: 0; padding: 0;
  border-radius: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  box-shadow: none;
}
dialog.form-dialog[open] { display: flex; flex-direction: column; }
.form-dialog-bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0.25rem;
  min-height: 3.5rem; padding: max(0.25rem, env(safe-area-inset-top)) 0.5rem 0.25rem 0.25rem;
  background: var(--md-sys-color-surface);
}
.form-dialog-bar form { display: contents; }
.form-dialog-bar h2 { flex: 1; min-width: 0; margin: 0 0 0 0.25rem; font: 400 1.375rem/1.75rem var(--md-ref-typeface); }
.form-dialog-body { flex: 1; overflow-y: auto; padding: 0 1.5rem 1.5rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.form-dialog .plan-form { background: none; padding: 0; margin: 0; border-radius: 0; }
/* The form (ADR 0085): one 16px rhythm between fields, chips and groups, so a floating label never meets the help
   line above it. Pairs of fields stack on a phone and sit side by side, in equal columns, from 600px. */
.form-dialog-body > form { display: grid; gap: 1rem; padding-top: 0.5rem; }
.form-dialog-body > form :is(.md-field, .field-with-trigger, .choice, .plan-settings) { margin-top: 0; }
.form-dialog-body > form .row { display: grid; gap: 1rem; }
.form-dialog-body > form > .supporting { margin-top: -0.75rem; }
.form-dialog-body > form > .subheader { margin: 0.5rem 0 -0.5rem; }
.form-dialog .plan-settings { display: grid; gap: 1rem; }
.form-dialog .plan-settings legend { margin-bottom: 0.5rem; }
.form-dialog .plan-settings .phases-error { margin-top: -0.75rem; }
.form-dialog textarea.md-text-field { min-height: 0; }
/* Cancel and Save at the bottom are for wider screens; a phone has them in the top bar. */
.form-dialog-actions { display: none; }
@media (min-width: 37.5rem) {
  dialog.form-dialog {
    /* As high as its form, so it scrolls only on a screen too short for it, between its headline and its buttons
       (ADR 0087). */
    width: calc(100% - 3rem); max-width: 35rem; height: fit-content; max-height: calc(100dvh - 4rem); margin: auto;
    border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md-sys-elevation-3);
  }
  /* A basic dialog: the headline at the top, lined up with the fields, and the buttons at the bottom. */
  .form-dialog-bar { min-height: 0; padding: 1.5rem 1rem 0.5rem 1.5rem; background: inherit; }
  .form-dialog-bar h2 { margin: 0; font-size: 1.5rem; line-height: 2rem; }
  .form-dialog-bar :is(.form-dialog-close, .form-dialog-submit) { display: none; }
  .form-dialog-body { padding-bottom: 0.5rem; }
  .form-dialog-actions { display: flex; justify-content: flex-end; margin: 0; padding: 1rem 1.5rem 1.5rem; }
  .form-dialog-body > form .row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* Primary tabs (ADR 0058): under the app bar, the selected tab's label in primary with a 3px indicator under it
   that is as wide as the label, with rounded top corners. */
.md-tab-bar {
  position: sticky; top: var(--app-bar-height); z-index: 1; display: flex; margin: 0.5rem -1rem 1rem; padding: 0 1rem;
  background: var(--md-sys-color-surface); border-bottom: 1px solid var(--md-sys-color-surface-container-highest);
}
html[data-scrolled] .md-tab-bar { background: var(--md-sys-color-surface-container); }
.md-tab {
  position: relative; flex: 1; display: flex; justify-content: center; height: 3rem; padding: 0 1rem; border: 0;
  background: none; cursor: pointer; isolation: isolate; overflow: hidden;
  color: var(--md-sys-color-on-surface-variant); font: 500 0.875rem/1.25rem var(--md-ref-typeface); letter-spacing: 0.00625rem;
  -webkit-tap-highlight-color: transparent;
}
.md-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; }
.md-tab:hover::before { opacity: var(--md-sys-state-hover); }
.md-tab:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.md-tab-label { position: relative; display: flex; align-items: center; height: 100%; }
.md-tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
.md-tab[aria-selected="true"] .md-tab-label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--md-sys-color-primary);
}
@media (min-width: 37.5rem) { .md-tab { flex: none; min-width: 6rem; } }

/* Outlined text fields with a floating label (ADR 0059): the label sits in the field and moves onto its outline
   when the field has focus or a value; date, time and select fields always show something, so their label always
   sits on the outline. The label's background hides the outline behind it: --field-container is the colour of
   what the field is on. */
.md-field { position: relative; margin-top: 0.5rem; }
.md-field-label {
  position: absolute; left: 0.75rem; top: 1rem; max-width: calc(100% - 1.5rem); margin: 0; padding: 0 0.25rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transform-origin: left top;
  color: var(--md-sys-color-on-surface-variant); font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
  transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
    color var(--md-sys-motion-spring-fast-effects-duration) var(--md-sys-motion-spring-fast-effects);
}
.md-field:focus-within .md-field-label,
.md-field .md-text-field:not(:placeholder-shown) ~ .md-field-label,
.md-field:has(select) .md-field-label,
.md-field:has(input[type="date"], input[type="time"]) .md-field-label {
  transform: translateY(-1.5625rem) scale(0.75); background: var(--field-container, var(--md-sys-color-surface));
}
.md-field:focus-within .md-field-label { color: var(--md-sys-color-primary); }
.md-field.has-error .md-field-label { color: var(--md-sys-color-error); }
/* A field's own placeholder (an example) shows only while it has focus, when the label is out of its way. */
.md-field .md-text-field::placeholder { color: transparent; }
.md-field .md-text-field:focus::placeholder { color: var(--md-sys-color-on-surface-variant); }
/* A unit at the end, shown once the label has moved up. */
.md-field.has-suffix .md-text-field { padding-right: 3.5rem; }
.md-field-suffix {
  position: absolute; right: 1rem; top: 1rem; line-height: 1.5rem; pointer-events: none; opacity: 0;
  color: var(--md-sys-color-on-surface-variant);
}
.md-field:focus-within .md-field-suffix, .md-field .md-text-field:not(:placeholder-shown) ~ .md-field-suffix { opacity: 1; }
.md-field-supporting, .phases-error {
  margin: 0.25rem 1rem 0; color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.025rem;
}
.md-field.has-error .md-field-supporting, .phases-error { color: var(--md-sys-color-error); }
@media (prefers-reduced-motion: reduce) { .md-field-label { transition: none; } }
/* What fields sit on. */
@media (min-width: 37.5rem) { dialog.form-dialog { --field-container: var(--md-sys-color-surface-container-high); } }

/* A simple dialog of choices (ADR 0062): each row is a choice, taken at once. */
.choice-dialog .choices { list-style: none; margin: 0 -1.5rem 1rem; padding: 0; }
.choice-row {
  position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.5rem; padding: 0.5rem 1.5rem;
  border: 0; background: none; cursor: pointer; text-align: left; isolation: isolate;
  color: var(--md-sys-color-on-surface); font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.03125rem;
}
.choice-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; }
.choice-row:hover::before { opacity: var(--md-sys-state-hover); }
.choice-row:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.choice-row .icon { color: var(--md-sys-color-on-surface-variant); }

/* With a mouse, the many add buttons of a wide calendar stay faint until their day is pointed at; a
   touch screen has no pointing, so there they are always in full (ADR 0075). */
@media (min-width: 52.5rem) and (hover: hover) {
  .add-here { opacity: 0.4; }
  .calendar-day:hover .add-here, .add-here:focus-visible { opacity: 1; }
}

/* The calendar on a phone (ADR 0062, 0072): a week's label stays under the app bar and the plan's tabs while its days
   scroll by, and a day without workouts takes less room, or none when it cannot be added to. */
@media (max-width: 52.4375rem) {
  .calendar-week .week-label { position: sticky; top: calc(var(--app-bar-height) + 3rem); z-index: 1; }
  .calendar-day:not(:has(.workout)) { min-height: 0; padding-top: 0.125rem; padding-bottom: 0.125rem; }
  .calendar-day:not(:has(.workout)) .day-name { opacity: 0.7; }
  /* For someone who cannot edit the plan an empty day holds nothing, so the stacked days leave it out (ADR 0072). */
  .calendar-day:not(:has(.workout, .add-here)) { display: none; }
}

/* M3's medium app bar (ADR 0062) on a plan's or athlete's page: the name on its own line in headline-medium, under
   the back button and the actions; once the page scrolls it is the small bar again. */
.bar-medium .bar-content { flex-wrap: wrap; row-gap: 0; }
.bar-medium h1 {
  order: 1; flex-basis: 100%; padding: 0.25rem 0 0.5rem;
  font-size: 1.75rem; line-height: 2.25rem;
  transition: font-size var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial);
}
/* The back button keeps the left; whatever follows it on the first row goes to the right. */
.bar-medium .bar-content > .up-link { margin-right: auto; }
html[data-scrolled] .bar-medium .bar-content { flex-wrap: nowrap; }
html[data-scrolled] .bar-medium h1 { order: 0; flex-basis: auto; padding: 0; font-size: 1.375rem; line-height: 1.75rem; }
@media (prefers-reduced-motion: reduce) { .bar-medium h1 { transition: none; } }
/* M3 Expressive's medium flexible app bar (ADR 0097): a subtitle under the name, such as a plan's length and goal. The
   small bar it becomes on scrolling has the name only. */
.bar-subtitle {
  order: 2; flex-basis: 100%; margin: 0 0 0.5rem; color: var(--md-sys-color-on-surface-variant);
  font: 400 1rem/1.5rem var(--md-ref-typeface); letter-spacing: 0.009375rem;
}
.bar-medium h1:has(+ .bar-subtitle) { padding-bottom: 0; }
html[data-scrolled] .bar-subtitle { display: none; }

/* Details dialogs (ADR 0066): a workout or a week, over the calendar. */
.details-body p { margin: 0.25rem 0; }
.details-body .facts { margin-top: 1rem; }
.details-dialog .actions { justify-content: flex-end; margin-top: 1.5rem; }
/* A week's row: its distance against its goal, with a small bar (ADR 0066). */
.week-distance { display: inline-flex; align-items: center; gap: 0.5rem; }
.goal-meter.week-meter { width: 3rem; margin: 0; height: 0.5rem; }
.plan-summary { margin: 0.25rem 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; line-height: 1.25rem; }