/* Shared look for the website's copies of Meridian's pages. */
.ma-page {
  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--face); font-weight: var(--w-regular); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
  line-height: normal; user-select: none; -webkit-user-select: none; cursor: default;
}
.ma-page * { box-sizing: border-box; }
.ma-page button { all: unset; box-sizing: border-box; cursor: default; }
.ma-icon { display: inline-block; flex: none; background: currentColor;
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.ma-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: auto; }
.ma-scroll::-webkit-scrollbar { display: none; }

/* HoverLightenStyle: SwiftUI's brightness adds to every channel, which an
   SVG filter can do and CSS brightness() cannot. */
.ma-hl, .ma-hl2, .ma-row-hl { transition: filter 0.12s ease-out; }
.ma-page.dark .ma-hl:hover { filter: url(#ma-up-06); }
.ma-page.dark .ma-hl2:hover { filter: url(#ma-up-132); }
.ma-page.light .ma-hl:hover { filter: url(#ma-down-10); }
.ma-page.light .ma-hl2:hover { filter: url(#ma-down-22); }
.ma-page.dark .ma-row-hl:hover { filter: url(#ma-up-06); }
.ma-page.light .ma-row-hl:hover { filter: url(#ma-down-10); }
.ma-page.dark .ma-hl:active { filter: url(#ma-up-06); }
.ma-page.light .ma-hl:active { filter: url(#ma-down-10); }

/* The page rail (NotchNav): dots that open into labelled pills under the
   pointer, on the app's spring (response 0.5, damping 0.78). */
.ma-rail { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 50;
  width: 30px; height: 240px; padding-left: 6px; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 10px; }
.ma-rail.open { width: 264px; height: 276px; }
.ma-rail .row { position: relative; height: 18px; display: flex; align-items: center; pointer-events: none;
  transition: height var(--spring-time, .75s) var(--spring, ease), transform var(--spring-time, .75s) var(--spring, ease); }
.ma-rail.open .row { pointer-events: auto; }
.ma-rail .dot { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; display: grid; place-items: center;
  transition: opacity var(--spring-time, .75s) var(--spring, ease), transform var(--spring-time, .75s) var(--spring, ease); }
.ma-rail .dot i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.ma-rail .row.exit .dot i { width: 7px; height: 7px; background: none; box-shadow: inset 0 0 0 1.5px var(--dot); }
.ma-rail .row.on .dot i { width: 8px; height: 8px; background: var(--accent); }
.ma-rail.open .dot { opacity: 0; transform: scale(0.6); }
.ma-rail .pill { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  white-space: nowrap; line-height: normal; font-size: 16.2px; font-weight: var(--w-semibold); color: var(--pill-ink);
  transform-origin: 9px 50%; transform: scale(0.69); opacity: 0;
  transition: transform var(--spring-time, .75s) var(--spring, ease), opacity var(--spring-time, .75s) var(--spring, ease), color .2s ease; }
.ma-page.dark .ma-rail .pill { background-color: rgba(0,0,0,0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.25) brightness(0.9); backdrop-filter: blur(10px) saturate(1.25) brightness(0.9);
  box-shadow: 0 0 0 0.75px rgba(0,0,0,0.75), inset 0 0 0 0.75px rgba(0,0,0,0.75),
              inset 0 1.5px 1px -0.5px rgba(255,255,255,0.28), inset 0 -1px 1px -0.5px rgba(255,255,255,0.10); }
.ma-page.dark .ma-rail .row.on .pill { background-image: linear-gradient(var(--accent-25), var(--accent-25)); }
.ma-page.light .ma-rail .pill { background-color: #fff;
  box-shadow: 0 0 0 0.75px rgba(0,0,0,0.9), inset 0 0 0 0.75px rgba(0,0,0,0.9), 0 1px 6px rgba(0,0,0,0.10); }
.ma-page.light .ma-rail .row.on .pill { background-image: linear-gradient(var(--accent-22), var(--accent-22)); }
.ma-rail .row.on .pill { color: var(--accent); font-weight: var(--w-bold); }
.ma-rail.open .pill { opacity: 1; transform: scale(1.15); }
.ma-rail.open .row.hover { z-index: 1; }
.ma-rail.open .row.hover .pill { transform: scale(1.40); color: var(--text);
  transition: transform .4s cubic-bezier(0,0,.58,1), opacity var(--spring-time, .75s) var(--spring, ease), color .2s ease; }
.ma-rail.open .row.on.hover .pill { color: var(--accent); }
.ma-rail .glyph { position: relative; width: 16px; height: 16px; flex: none; }
.ma-rail .glyph .ma-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ma-rail .name { min-width: var(--label-min, 66px); }

/* Every face stacks at its own line height, which normal reads per face and weight. */
.ma-page .mini, .ma-page .pop { line-height: normal; }

/* MiniCalendarPicker, in the system face. */
.ma-mini { padding: 16px; border-radius: 16px; background: var(--surface-alt); font-family: system-ui, -apple-system, sans-serif;
  box-shadow: 0 0 0 0.5px var(--border-40, rgba(0,0,0,.1)), inset 0 0 0 0.5px var(--border-40, rgba(0,0,0,.1)); display: flex; flex-direction: column; gap: 12px; }
.ma-pop .ma-mini { box-shadow: 0 0 0 0.5px var(--border), 0 8px 30px rgba(0,0,0,0.25); }
.ma-mini .head { display: flex; align-items: center; }
.ma-mini .title { flex: 1; font-size: 20.25px; font-weight: 600; color: var(--text); }
.ma-mini .navs { display: flex; gap: 2px; }
.ma-mini .nb { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-2); }
.ma-mini .wdays { display: flex; }
.ma-mini .wdays span { flex: 1; text-align: center; font-size: 14.85px; font-weight: 600; color: var(--text-2); }
.ma-mini .rows { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; padding-bottom: 0.7px; }
.ma-mini .r { display: flex; }
.ma-mini .d { flex: 1; min-height: 32px; display: grid; place-items: center; position: relative; font-size: 17.55px; font-weight: 500; }
.ma-mini .d i { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ma-mini .d span { position: relative; }

/* Past the range the site shows: drawn as disabled. */
.ma-page .ma-off { opacity: 0.35; pointer-events: none; }

/* A page sliding under two fingers ignores the pointer until it lands. */
.ma-swiping { will-change: transform; }
.ma-swiping * { pointer-events: none !important; }