@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin-700-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/work-sans-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/work-sans-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/work-sans-latin-600-normal.woff2) format("woff2");
}

/* ---- The palette ----
   Every color the site draws is one flat entry here, and nothing is computed from another: no color-mix, no alpha.
   There are two palettes, light and dark. Names are theme, family, number: --light-bg-100. In every family 100 is
   the lightest step and the numbers increase as the color gets darker.
     bg    the surfaces: the page, cards, the drawer, the empty slots
     ink   everything drawn in the foreground: text, borders, outlines and small marks, on one scale
   Only the two theme blocks below use these names; the rest of the stylesheet uses the names those blocks define. */
:root {
  --main-width: 1100px;
  --light-bg-100: #fffaf4;
  --light-bg-200: #faf6f0;
  --light-bg-300: #f4eee6;
  --light-bg-400: #f0e8de; /* also the light theme-color in index.html, which tints the browser's toolbar to match */
  --light-bg-500: #e8ded1;
  --light-bg-600: #ddd3c6;
  --light-ink-100: #ded0c1;
  --light-ink-200: #c2b3a4;
  --light-ink-300: #907f72;
  --light-ink-400: #725f52;
  --light-ink-500: #2f2520;
  --light-ink-600: #1f1713; /* strongest foreground on the light page */

  /* Insights: hue identifies the suit; Ace starts light and the scale darkens through Ten. */
  --light-wands-100: #F1E4CC;
  --light-wands-200: #EBD6AF;
  --light-wands-300: #E3C58E;
  --light-wands-400: #D9B16D;
  --light-wands-500: #C99A4E;
  --light-wands-600: #B98436;
  --light-wands-700: #9F6D2D;
  --light-wands-800: #855827;
  --light-wands-900: #6D4725;
  --light-wands-1000: #573A22;
  --light-cups-100: #E1E7E4;
  --light-cups-200: #CFDAD8;
  --light-cups-300: #B9CAC9;
  --light-cups-400: #9FB8B9;
  --light-cups-500: #82A3A7;
  --light-cups-600: #688D93;
  --light-cups-700: #55767E;
  --light-cups-800: #466168;
  --light-cups-900: #3B5057;
  --light-cups-1000: #314249;
  --light-swords-100: #E7E1DF;
  --light-swords-200: #D8CCCA;
  --light-swords-300: #C6B4B2;
  --light-swords-400: #B19A99;
  --light-swords-500: #997E7F;
  --light-swords-600: #816568;
  --light-swords-700: #6E5357;
  --light-swords-800: #5C4549;
  --light-swords-900: #4C393D;
  --light-swords-1000: #3D2E31;
  --light-pentacles-100: #E1E5D8;
  --light-pentacles-200: #D0D8C2;
  --light-pentacles-300: #BBC9A8;
  --light-pentacles-400: #A2B78C;
  --light-pentacles-500: #87A36F;
  --light-pentacles-600: #708D59;
  --light-pentacles-700: #5E764B;
  --light-pentacles-800: #4F633F;
  --light-pentacles-900: #425237;
  --light-pentacles-1000: #36442F;

  /* The dark surfaces are one warm hue (58° in OKLCH) and only lightly tinted, each step slightly more colorful as it gets lighter, so none reads as gray. */
  --dark-bg-100: #3c3531;
  --dark-bg-150: #2e2925;
  --dark-bg-050: #4a413c;
  --dark-bg-200: #27221f;
  --dark-bg-300: #1d1916; /* also the dark theme-color in index.html */
  --dark-bg-400: #15110f;
  --dark-ink-100: #e7d4c4;
  --dark-ink-200: #a59384;
  --dark-ink-300: #74675d;
  --dark-ink-400: #4c443f;
  --dark-ink-500: #3c3531;
  --dark-ink-600: #2f2925;

  /* The same suit identities, compressed for a dark page so the cells do not flare against it. */
  --dark-wands-100: #C89537;
  --dark-wands-200: #C18E30;
  --dark-wands-300: #B9882E;
  --dark-wands-400: #B1802E;
  --dark-wands-500: #A97C33;
  --dark-wands-600: #A87831;
  --dark-wands-700: #7A5322;
  --dark-wands-800: #704A21;
  --dark-wands-900: #634122;
  --dark-wands-1000: #563921;
  --dark-cups-100: #8CA397;
  --dark-cups-200: #809D98;
  --dark-cups-300: #759795;
  --dark-cups-400: #6A9091;
  --dark-cups-500: #658A8F;
  --dark-cups-600: #64878D;
  --dark-cups-700: #456066;
  --dark-cups-800: #3E565C;
  --dark-cups-900: #384B52;
  --dark-cups-1000: #314249;
  --dark-swords-100: #AE9993;
  --dark-swords-200: #AB918D;
  --dark-swords-300: #A68A87;
  --dark-swords-400: #9F8281;
  --dark-swords-500: #987D7E;
  --dark-swords-600: #977A7D;
  --dark-swords-700: #705458;
  --dark-swords-800: #654C50;
  --dark-swords-900: #594247;
  --dark-swords-1000: #4D3A3E;
  --dark-pentacles-100: #95A375;
  --dark-pentacles-200: #8A9E68;
  --dark-pentacles-300: #80985F;
  --dark-pentacles-400: #77915B;
  --dark-pentacles-500: #718C59;
  --dark-pentacles-600: #6D8A57;
  --dark-pentacles-700: #4D613E;
  --dark-pentacles-800: #465838;
  --dark-pentacles-900: #3E4D33;
  --dark-pentacles-1000: #35432E;
}

/* ---- What the page uses ----
   Each name is a thing you can see, and each theme says which palette entry it takes. */
:root {
  --page: var(--light-bg-400);                 /* the background behind everything */
  --card: var(--light-bg-200);                 /* the boxes in the grid */
  --card-hover: var(--light-bg-100);           /* a card when you point at it */
  --empty-day-background: var(--light-bg-400); /* a past day with no card, left blank: the page itself, so it does not draw the eye */
  --card-well: var(--light-bg-500);            /* the dashed slot inside a card that you click to add a card */
  --card-well-hover: var(--light-bg-600);      /* that slot when its card is pointed at */
  --skeleton-background: var(--light-bg-500);
  --skeleton-highlight: var(--light-bg-400);   /* the moving highlight during loading */
  --page-well: var(--light-bg-500);            /* the dashed rows on the page: "Show earlier days" and "Add today's card" */
  --page-well-hover: var(--light-bg-600);      /* those rows when you point at them */
  --dropdown: var(--light-bg-200);             /* the ... menu */
  --drawer: var(--light-bg-300);               /* the side panel: between the page and a card, so it is not glaring white */
  --search: var(--light-bg-100);               /* the picker's search box: the warm white of a hovered card, not a stark white field */
  --button-hover: var(--light-bg-500);         /* a hovered button or menu item: a step darker than what it sits on */
  --confirmation-button: var(--button-hover);
  --confirmation-button-hover: var(--light-bg-400);
  --primary-button-background: var(--light-ink-500);
  --primary-button-background-hover: var(--light-ink-400);
  --primary-button-border: var(--light-ink-500);
  --primary-button-border-hover: var(--light-ink-400);
  --primary-button-text: var(--light-bg-100);

  --text: var(--light-ink-500);
  --text-strong: var(--light-ink-600);         /* masthead and other deliberately emphatic editorial text */
  --text-muted: var(--light-ink-400);          /* dates, labels, hints */
  --border: var(--light-ink-100);              /* thin borders on cards and buttons */
  --border-strong: var(--light-ink-200);       /* firmer borders */
  --drawer-border: var(--light-ink-100);       /* the border down the drawer's left side */
  --card-well-border: var(--light-ink-300);    /* the dashed outline around an empty card slot */
  --card-well-border-hover: var(--light-ink-400);
  --page-well-border: var(--light-ink-300);    /* the dashed outline of a page-well */
  --page-well-border-hover: var(--light-ink-400);
  --card-well-icon: var(--light-ink-400);      /* the + in an empty card slot */
  --icon-button-border: var(--light-ink-100);  /* the thin outline of the small icon buttons: the drawer's close button and the ... menu button */
  --button-border: var(--light-ink-300);       /* the outline of every outlined button (Save today): one border, so no button differs from another */
  --search-border-focus: var(--light-ink-300); /* the search box's outline while you type: firmer than at rest, short of the full muted color */
  --focus-outline: var(--light-ink-300);       /* the outline just outside a control when the keyboard is on it */
  --bullets: var(--light-ink-300);             /* the bullets in the drawer's lists */

  --moon-lit: var(--light-bg-500);             /* the lit part of the moon: opaque, since it is drawn over the dark disc */
  --moon-shadow: var(--light-ink-400);         /* the dark part of the moon: a new moon is a dark disc */

  /* Effects are not palette entries: a shadow has offsets and blur as well as a color, so each is written out whole. */
  /* The drawer's cast shadow, in a warm brown: three layers, each wider and fainter, so it falls off smoothly and reads as
     hovering over the grid. Each has an 80px spread (with an x offset of 80px minus how far it should
     reach past the edge), which pushes its top and bottom ends beyond the window so it never fades short. */
  --drawer-shadow:
    78px 0 6px 80px rgba(60, 38, 28, 0.15),
    68px 0 32px 80px rgba(60, 38, 28, 0.15),
    48px 0 64px 80px rgba(60, 38, 28, 0.15);
  --popover-shadow: 0 8px 24px -8px rgba(60, 38, 28, 0.35); /* under the dropdown and the toast */
  --sticky-shadow: 0 8px 14px -12px rgba(60, 38, 28, 0.45);
  --card-hover-brightness: brightness(1.12); /* a hovered card, in the Calendar and the Spread */
  --picker-dim-filter: saturate(0) sepia(0.15); /* the picker's cards at rest: a warm gray, the warmth of the drawer's own surface */
  --picker-dim-opacity: 0.7;                    /* and how far they fade toward the drawer */
}

:root {
  --caps-tracking: 0.06em; /* the letter spacing of every capitalized label and button */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Libre Baskerville for reading text and page/dialog titles; Work Sans for controls and small interface text. */
  --font-serif: "Libre Baskerville", Baskerville, "Iowan Old Style", Georgia, serif;
  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale: each step is the one below times 1.125, from a 16px base. Most font sizes use these steps;
     the page title is twice its fluid header base size. */
  /* Readability comes first, and the layout adapts to fit the text, not the other way round. What counts is the height of
     the letters that carry the text: the x-height for lower case, the cap height for all caps, which read larger at the
     same size. Work Sans has an x-height of 0.50em and caps of 0.66em; Libre Baskerville 0.53em and 0.77em. Apple's
     minimums (11pt for text, 17pt for body) are read that way. On a touch screen the floor is about 7px of letter
     height, which puts all caps at 11.2px, a sans sentence at 14.2px and a serif one at 14.2px or more. */
  --phi: 1.618034;
  --step: 1.272020; /* the ratio the spacing scale below is built on */
  --scale: 1.125;
  --text-base: 1rem;                                                                   /* 16px: body copy, buttons and secondary text */
  --text-2xs: calc(var(--text-base) / var(--scale) / var(--scale) / var(--scale));             /* 11.2px: every all-caps label, and the date on each day */
  --text-xs: calc(var(--text-base) / var(--scale) / var(--scale));                     /* 12.6px: the footer, with a mouse in a window wider than a phone's */
  --text-sm: calc(var(--text-base) / var(--scale));                                    /* 14.2px: the drawer's reading text */
  --text-md: calc(var(--text-base) * var(--scale));                                    /* 18px */
  --text-lg: calc(var(--text-base) * var(--scale) * var(--scale));                     /* 20.3px */
  --text-xl: calc(var(--text-base) * var(--scale) * var(--scale) * var(--scale));      /* 22.8px: every title, the page's and the drawers' */
  --text-2xl: calc(var(--text-base) * var(--scale) * var(--scale) * var(--scale) * var(--scale)); /* 25.6px: the plus on an empty day */

  /* Spacing scale on the same ratios, from an 8px base: each step is the last times 1.272. */
  --space-base: 0.5rem;

  /* The page's side margin at small sizes. Set here, on the root, so the drawer, which derives its own smaller
     spacing scale, still gets the page's value and not one scaled down to its own base. */
  --page-margin: calc(var(--space-base) * var(--phi) * var(--step));

  /* Image scale on the same ratios, anchored on the card in the drawer. */
  --image-lg: 300px;                                  /* the card in the detail drawer */
}

/* The steps of the spacing and image scales are worked out from a base size (--space-base, --image-lg), and are
   declared here on the detail drawer as well as the page so that the drawer can have a base of its own. */
:root, .card-detail {
  --space-2xs: calc(var(--space-base) / var(--phi));                 /* 4.9px */
  --space-xs: calc(var(--space-base) / var(--step));                 /* 6.3px */
  --space-sm: var(--space-base);                                     /* 8px */
  --space-md: calc(var(--space-base) * var(--step));                 /* 10.2px */
  --space-lg: calc(var(--space-base) * var(--phi));                  /* 12.9px */
  --space-xl: calc(var(--space-lg) * var(--step));                   /* 16.5px */
  --space-2xl: calc(var(--space-base) * var(--phi) * var(--phi));   /* 20.9px */
  --space-3xl: calc(var(--space-2xl) * var(--step));                 /* 26.6px */
  --space-4xl: calc(var(--space-base) * var(--phi) * var(--phi) * var(--phi)); /* 33.9px */
  --space-5xl: calc(var(--space-4xl) * var(--step));                 /* 43.1px */
  --image-sm: calc(var(--image-lg) / (var(--phi) * var(--phi) * var(--step))); /* 90px: picker thumbnails */
}

/* The detail drawer is drawn at a smaller scale than the page's own, closer to the card grid behind it: the spacing and
   the card are about 15% smaller. Its text is one step down the type scale (see below). */
.card-detail {
  --space-base: 0.425rem;
  --image-lg: 255px;
  --drawer-pad-r: var(--space-4xl); /* a little more room on the right than the other sides, for the close button and the text's edge */
  padding-right: var(--drawer-pad-r);
  font-size: var(--text-sm);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: var(--dark-bg-300);
    --card: var(--dark-bg-200);
    --card-hover: var(--dark-bg-100);
    --empty-day-background: var(--dark-bg-200);
    --card-well: var(--dark-bg-200);           /* the same as a card: only its outline sets it apart */
    --skeleton-background: var(--dark-bg-200);
    --picker-dim-filter: saturate(0) sepia(0.6) hue-rotate(-15deg); /* a rust gray, where light mode's is a warm gray */
    --card-well-hover: var(--dark-bg-200);     /* the slot keeps its fill on hover; its card lights up around it */
    --skeleton-highlight: var(--dark-bg-150);
    --page-well: var(--dark-bg-200);
    --page-well-hover: var(--dark-bg-100);     /* the rows brighten on hover */
    --dropdown: var(--dark-bg-200);
    --drawer: var(--dark-bg-200);
    --search: var(--dark-bg-100);
    --button-hover: var(--dark-bg-100);        /* in dark mode a hovered, focused or pressed button lightens rather than darkens */
    --confirmation-button-hover: var(--dark-bg-050);
    --primary-button-background: var(--dark-bg-100);
    --primary-button-background-hover: var(--dark-bg-050);
    --primary-button-border: var(--dark-ink-300);
    --primary-button-border-hover: var(--dark-ink-300);
    --primary-button-text: var(--dark-ink-100);

    --text: var(--dark-ink-100);
    --text-strong: var(--dark-ink-100);
    --text-muted: var(--dark-ink-200);
    --border: var(--dark-ink-500);
    --border-strong: var(--dark-ink-400);
    --drawer-border: var(--dark-ink-400);      /* firmer, since the shadow alone does not separate the drawer from the page */
    --card-well-border: var(--dark-ink-300);
    --card-well-border-hover: var(--dark-ink-300); /* the slot's outline does not change on hover */
    --page-well-border: var(--dark-ink-300);
    --page-well-border-hover: var(--dark-ink-200);
    --card-well-icon: var(--dark-ink-200);
    --icon-button-border: var(--dark-ink-500);
    --button-border: var(--dark-ink-300);
    --search-border-focus: var(--dark-ink-300);
    --focus-outline: var(--dark-ink-200);
    --bullets: var(--dark-ink-300);

    --moon-lit: var(--dark-ink-200);
    --moon-shadow: var(--dark-bg-100);

    --drawer-shadow:
      78px 0 6px 80px rgba(26, 14, 10, 0.55),
      68px 0 32px 80px rgba(26, 14, 10, 0.55),
      48px 0 64px 80px rgba(26, 14, 10, 0.55);
    --sticky-shadow: 0 8px 14px -12px rgba(26, 14, 10, 0.7);
  }
  /* Light text on a dark ground looks heavier than it is when the browser smooths it for dark-on-light
     (macOS thickens it); grayscale smoothing gives it its intended weight. */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

* { box-sizing: border-box; }
/* Interface text is sans: controls, labels, dates and metadata. Display headings stay serif, like the diary's reading text. */
button, input, .day-date, .detail-section h3 { font-family: var(--font-sans); }
button { white-space: nowrap; }
/* The small uppercase dates and action buttons take the medium weight so they hold up at small sizes. The drawer's
   section headings, which are muted as well as small, take the semibold. */
.day-date { font-weight: 500; }
.detail-section h3 { font-weight: 600; }

body {
  margin: 0;
  --page-top: var(--space-4xl);
  --page-gutter: var(--space-3xl);
  padding: var(--page-top) var(--page-gutter) var(--space-5xl);
  background: var(--page);
  color: var(--text);
  font-family: var(--font-serif);
}

main {
  --header-base-size: clamp(var(--text-sm), calc(0.64rem + 0.52vw), var(--text-base));
  max-width: var(--main-width);
  margin: 0 auto;
}

.page-head h1 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-serif);
  font-size: calc(2 * var(--header-base-size));
  font-weight: 400;
  line-height: 1.2;
}
.page-scope { width: 100%; min-width: 0; }
.story-prompt {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: var(--header-base-size);
  line-height: 1.5;
}
.story-prompt .run-in { color: var(--text); }
/* The selected period reads as an editorial caption for the diary, not another piece of toolbar chrome. */
.range-picker {
  min-width: 0;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: var(--header-base-size);
  font-weight: 400;
  line-height: 1.5;
}
.range-choice {
  position: relative;
  display: inline-block;
}
.range-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-strong);
  font: inherit;
  font-weight: 400;
  white-space: normal;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.range-label {
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.21em;
  text-decoration-skip-ink: auto;
}
.range-button:hover .range-label,
.range-button:focus-visible .range-label,
.range-button[aria-expanded="true"] .range-label { text-decoration-line: underline; }
.range-button .icon { width: 0.72em; height: 0.72em; stroke-width: 3; margin-left: var(--space-2xs); vertical-align: -0.05em; }
.range-choice .range-menu {
  right: 0;
  left: auto;
  width: max-content;
  min-width: 9rem;
  max-width: calc(100vw - 2 * var(--space-xl));
  white-space: nowrap;
}
.range-menu [hidden] { display: none; }
.menu[hidden] { display: none; }

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-sm);
}

.week + .week { margin-top: var(--space-sm); }



.day {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* The cell's padding shrinks with the window, so a narrow cell keeps its card as large as it can. */
  padding: clamp(3px, 0.6vw, var(--space-xs));
  min-width: 0;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
/* The whole cell is clickable, so the whole cell reacts. */
.day { cursor: pointer; }
.day:hover { border-color: var(--border-strong); background: var(--card-hover); }
.day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xs);
}
.day-date { font-size: var(--text-2xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; }
.moon { display: inline-flex; color: var(--text-muted); line-height: 0; cursor: default; } /* the thin ring around the icon takes this color (at 45%, set in the SVG) */
.day { --moon-size: calc(var(--space-xl) * 0.82); }
.moon svg { display: block; width: var(--moon-size); height: var(--moon-size); }
.moon .moon-shadow { fill: var(--moon-shadow); }
.moon .moon-lit { fill: var(--moon-lit); }

.slot {
  position: relative;
  aspect-ratio: 3 / 5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.slot img { height: 100%; max-width: 100%; border-radius: inherit; } /* the image's own box is the card, so its corners round; the slot is a touch wider than a card, and the card sits in the middle */
button.slot:not(.empty) { background: var(--skeleton-background); }
/* In Edit, on a day with a card, an X takes the moon's place, on every card at rest, so what can be removed is plain
   before anything is pointed at. The two share one spot, so the row does not change size. */
.day-tail { display: inline-grid; align-items: center; justify-items: center; }
.day-tail > * { grid-area: 1 / 1; }
.slot-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  --remove-size: max(var(--moon-size), var(--space-lg)); /* stays legible where the moon is shrunk to fit */
  width: calc(var(--remove-size) + var(--space-xs));
  height: calc(var(--remove-size) + var(--space-xs));
  margin: calc(-0.5 * var(--space-xs));
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  z-index: 1; /* above the moon it replaces, which would otherwise take the click */
  transition: opacity 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.slot-remove .icon { width: var(--remove-size); height: var(--remove-size); }
.moon { transition: opacity 0.15s var(--ease); }
.day-tail .moon { opacity: 0; pointer-events: none; }
.slot-remove:hover, .slot-remove:focus-visible, .slot-remove:active { outline: none; background: var(--button-hover); color: var(--text); }
/* A past day with no card, once the past is done: a blank, with no plus and nothing to click. */
.slot.closed { background: none; } /* in the Calendar the cell's own surface shows: only a day open to a card has a well */
.spread-view .slot.closed { background: var(--page-well); }
.day.closed, .day.closed:hover, .diary-loading .day { cursor: default; border-color: var(--border); }
body:not(.spread-view) .day.closed, body:not(.spread-view) .day.closed:hover,
body:not(.spread-view).diary-loading .day { background: var(--empty-day-background); }

/* A card brightens when pointed at. In the Calendar the cell's own tint barely shows behind a card, so the card itself carries part of the hover; in the Spread there is no cell at all. */
.day:not(.closed):hover .slot img { filter: var(--card-hover-brightness); }
/* With a drawer open the grid's cards lose some color, so the drawer's card is the one in color. */
body:has(dialog[open]) .weeks .slot img { filter: saturate(0.5); }
button.slot {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes settle {
  from { opacity: 0; transform: scale(0.96); }
}
.day.enter { animation: rise 0.35s var(--ease) both; }
.slot.enter { animation: settle 0.3s var(--ease) both; }

:focus-visible { outline: 2px solid var(--focus-outline); /* 3:1 or better against the page and cards, in both themes */ outline-offset: 2px; }
/* Buttons use a shared hover, focus and pressed treatment. Confirmation popover actions define their own states below. */
button.action:hover, button.action:focus-visible, button.action:active,
button.action.quiet:hover, button.action.quiet:focus-visible, button.action.quiet:active,
button.link:hover, button.link:focus-visible, button.link:active,
.detail-close:hover, .detail-close:focus-visible, .detail-close:active {
  outline: none;
  background: var(--button-hover);
  color: var(--text);
}

img.fade { opacity: 0; transition: opacity 0.25s var(--ease), filter 0.2s var(--ease); }
img.fade.loaded { opacity: 1; }
/* An empty card slot is quiet at rest: no outline, and just a faint plus. Pointing at it (anywhere on its cell,
   since the whole cell is the target) brings up a firmer dashed outline and the muted plus, and, in the light theme, it takes the same slightly darker fill as the rows above the grid. */
button.slot.empty {
  position: relative;
  border: 1px dashed var(--card-well-border);
  background: var(--card-well);
  color: var(--card-well-icon);
  font-size: var(--text-2xl);
  font-weight: 300;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.slot-plus { position: relative; z-index: 1; transition: opacity 0.25s var(--ease); }
.day:hover button.slot.empty { border-color: var(--card-well-border-hover); background: var(--card-well-hover); color: var(--card-well-icon); }

/* Dialogs are drawers: a full-height panel pinned to the right edge that slides in. */
dialog {
  /* Pinned by its own edges rather than by a viewport-height: the top and bottom are both 0, so
     the panel always spans the visible window whatever the browser's dialog defaults or toolbars do. */
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  max-width: 100vw;
  height: auto;
  max-height: none;
  --drawer-pad: var(--space-3xl);
  margin: 0;
  padding: var(--drawer-pad);
  border: 0;
  border-left: 1px solid var(--drawer-border);
  background: var(--drawer);
  color: var(--text);
  font-size: var(--text-base);
  overflow-y: auto;
  box-shadow: var(--drawer-shadow);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
/* The page behind an open drawer does not scroll, so it cannot rubber-band and drag the drawer with it. */
html:has(dialog[open]) { overflow: hidden; }
dialog[open] { transform: none; }
@starting-style {
  dialog[open] { transform: translateX(100%); }
}
.confirmation-popover {
  position: fixed;
  z-index: 20;
  --arrow-left: 50%;
  display: grid;
  width: min(320px, calc(100vw - var(--page-margin) - var(--page-margin)));
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--dropdown);
  color: var(--text);
  box-shadow: var(--popover-shadow);
  font-family: var(--font-sans);
  white-space: normal;
}
.confirmation-popover strong {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
}
.confirmation-popover p {
  margin: var(--space-xs) 0 var(--space-md);
  max-width: 38ch;
  font-size: var(--text-xs);
  line-height: 1.45;
}
.confirmation-popover-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
}
.confirmation-popover[hidden] { display: none; }
.confirmation-popover::after {
  position: absolute;
  left: var(--arrow-left, 50%);
  width: 10px;
  height: 10px;
  border: solid var(--border);
  background: var(--dropdown);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.confirmation-popover[data-placement="top"]::after {
  bottom: -6px;
  border-width: 0 1px 1px 0;
}
.confirmation-popover[data-placement="bottom"]::after {
  top: -6px;
  border-width: 1px 0 0 1px;
}

.card-detail[open] {
  display: flex;
  flex-direction: column;
}
.detail-body {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  /* Room under the last line, so the text plainly ends and does not look cut off at the bottom of the window. It is
     here and not on the drawer, since a scrolling container's own bottom padding is not reliably kept in every browser. */
  padding-bottom: var(--space-4xl);
}
/* Behind a drawer the page dims a little, easing in as the drawer slides out. */
dialog::backdrop {
  background: transparent;
  transition: background-color 0.3s var(--ease), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
dialog[open]::backdrop { background: rgba(60, 38, 28, 0.26); } /* a warm brown rather than black */
@media (prefers-color-scheme: dark) {
  dialog[open]::backdrop { background: rgba(26, 14, 10, 0.38); } /* the page is already dark, so it takes more */
}
@starting-style {
  dialog[open]::backdrop { background: transparent; }
}

.detail-close {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-xl);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4xl);
  height: var(--space-4xl);
  padding: 0;
  border: 1px solid var(--icon-button-border);
  border-radius: 6px;
  background: var(--drawer);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.detail-close .icon { width: var(--space-xl); height: var(--space-xl); }
.detail-image { width: 100%; max-width: var(--image-lg); border-radius: 6px; } /* the same size in one column as beside the text */
dialog h2 { margin: 0; font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 400; line-height: 1.2; }
.detail-tagline { margin: var(--space-2xs) 0 0; color: var(--text-muted); font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.5; } /* a quiet descriptor beneath the title */
.detail-below { grid-column: 1 / -1; }
.detail-section { margin-top: var(--space-3xl); max-width: 70ch; } /* a line's height between sections; and the longest a section's lines run */
/* The text runs on a 22px line. A label sits under half a line above what it names (6.8px between them), and a
   whole line (22.5px) below the section before, so it clearly belongs to what follows. Any less than that between
   a label and its text read as cramped. */
.detail-section h3 {
  margin: 0 0 var(--space-sm);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
}
.detail-section p, .detail-section li { margin: 0 0 var(--space-xs); line-height: 1.55; text-wrap: pretty; } /* Libre Baskerville is a large-looking face and wants a little more than 1.5; pretty keeps a lone word off the last line */
.detail-section p:last-child, .detail-section li:last-child { margin-bottom: 0; }
/* An end mark after the last word of the drawer's last text, so it plainly ends there: a small outlined diamond with
   curved-in sides, drawn as a shape so it looks the same on every device. Its box sets it where the character ⟡ would
   sit at 1.2 times the text. It takes the text's own color. Its width and left margin are taken back by the right margin,
   so it hangs past the end of the line and never pushes the last word onto a new one. */
.end-mark { display: inline-block; width: 1.254em; height: 1.254em; margin: 0 -1.444em 0 0.19em; color: var(--text); vertical-align: -0.25em; }
/* A light page draws text a little heavier than its outline, so the shape gets a thin stroke to match. The dark theme
   smooths its text to the plain outline (see the body's font smoothing), so there the shape is left as it is. */
.end-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 0.4; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) {
  .end-mark svg { stroke: none; }
}
/* Everything below the card shares one line length. */
.detail-section ul { margin: 0; padding: 0; list-style: none; }
/* Hanging bullets: the marker sits in the gutter so the text lines up with everything else. */
.detail-section li { position: relative; margin-bottom: var(--space-xs); }
.detail-section li::before {
  content: "";
  position: absolute;
  left: -0.63em;
  top: 0.63em; /* centers the dot on the first line (line height 1.5) */
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background: var(--bullets); /* about as quiet as the labels */
}
.gd-title { font-weight: 400; }

/* Card appearance metadata: a small factual label beneath the card tagline. */
.detail-metadata {
  margin: var(--space-sm) 0 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--caps-tracking);
}

/* The secondary button, the same wherever it appears: small medium-weight sans capitals,
   muted until hovered, underlined only on hover. */
button.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  /* Padding gives the hover fill some room; the negative margin puts the text back where it was. */
  padding: var(--space-2xs) var(--space-xs);
  margin: 0;
  border-radius: 6px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--caps-tracking);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The selected period stays editorial and left-aligned. View controls and utilities form one compact cluster at the right edge. */
.page-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: last baseline;
  column-gap: var(--space-xl);
  padding: var(--space-sm) 0;
  margin: 0 0 var(--space-lg);
}
.page-controls[hidden],
.page-controls [hidden] { display: none; }
.view-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--space-xl);
  white-space: nowrap;
}
/* Initial, Browse and Edit occupy the same grid cell. Hidden states remain in layout so the toolbar's height,
   baseline and right edge do not jump when its state changes. */
.page-actions {
  display: grid;
  grid-template-areas: "state";
  align-items: baseline;
  justify-items: end;
}
.page-actions > .toolbar-state {
  grid-area: state;
  justify-self: end;
}
.page-actions > .toolbar-state[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.initial-actions {
  display: flex;
  align-items: baseline;
}
.edit-actions {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}
.edit-actions > button.action {
  padding: var(--space-2xs) var(--space-xs);
  min-width: 4rem;
  justify-content: center;
  line-height: 1.5;
}
.edit-actions > button.action.quiet { margin-left: 0; }
.edit-actions > button.action:hover,
.edit-actions > button.action:focus-visible,
.edit-actions > button.action:active {
  background: var(--button-hover);
}
.action.primary {
  border-color: var(--primary-button-border);
  background: var(--primary-button-background);
  color: var(--primary-button-text);
}
.action.primary:hover,
.action.primary:focus-visible,
.action.primary:active {
  border-color: var(--primary-button-border-hover);
  background: var(--primary-button-background-hover);
  color: var(--primary-button-text);
}
.browse-actions {
  display: flex;
  flex-wrap: nowrap;
  align-self: center;
  align-items: center;
  gap: var(--space-xl);
}
/* In Edit the prompt scrolls away, while the action bar stays reachable at the top. */
.controls-stuck .page-actions {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  width: 100%;
  padding: var(--space-sm) max(var(--page-gutter), calc((100vw - var(--main-width)) / 2));
  border-bottom: 1px solid var(--border);
  background: var(--page);
  box-shadow: var(--sticky-shadow);
}
.more { position: relative; display: flex; }
.more-button {
  display: inline-flex;
  padding: var(--space-2xs) var(--space-xs);
  margin: calc(-1 * var(--space-2xs)) calc(-1 * var(--space-xs));
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.more-button .icon { width: var(--space-2xl); height: var(--space-2xl); stroke-width: 4; } /* three round dots, wide and full, a dot's width apart */
.more-button:hover, .more-button:focus-visible, .more-button[aria-expanded="true"] { background: var(--button-hover); color: var(--text); }
.menu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: calc(-1 * var(--space-xs));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 9rem;
  padding: var(--space-xs);
  background: var(--dropdown);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--popover-shadow);
}
/* Menu rows use the same text metrics even inside the story prompt's taller line-height. */
.menu button.link { margin: 0; padding: var(--space-sm); width: 100%; line-height: normal; }
/* The view choices are inline at larger sizes and move into the menu at small ones. */
.menu .menu-view { display: none; }
.menu hr { margin: 0; border: 0; border-top: 1px solid var(--border); }
/* The chosen view carries a check where the other items have their icon; the unchosen one keeps the space. */
.menu button.link[aria-checked="false"] .icon { visibility: hidden; }

.tool {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--caps-tracking);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.tool:hover, .tool:focus-visible { color: var(--text); }
.tool[aria-pressed="true"] {
  color: var(--text);
  font-weight: 500;
}
/* When space gets tight, the view choice moves into the overflow menu before it forces the prompt onto a third line. */
@media (max-width: 810px) {
  .page-controls { column-gap: var(--space-lg); }
  .page-actions > .toolbar-state[hidden] { display: none; }
  .view-control { display: none; }
  /* The dots get an outline here, as the drawer's close button has, so they read as a button. */
  .more-button {
    align-items: center;
    justify-content: center;
    width: var(--space-4xl);
    height: var(--space-4xl);
    padding: 0;
    margin: 0;
    border: 1px solid var(--icon-button-border);
  }
  .menu button.menu-view { display: inline-flex; }
  .menu hr.menu-view { display: block; }
}

/* A dashed row along the top of the grid, styled like an empty card slot: there is more diary above. */
.earlier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm);
  border: 1px dashed var(--page-well-border);
  border-radius: 6px;
  background: var(--page-well);
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--caps-tracking);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.earlier[hidden] { display: none; }
.earlier:hover, .earlier:focus-visible, .earlier:active { outline: none; background: var(--page-well-hover); border-color: var(--page-well-border-hover); color: var(--text); }
.add-today:not([hidden]) { position: sticky; top: 0; z-index: 5; }

/* Both diary prompt rows use the same quiet interface voice; their boxes provide the emphasis. */

/* Cards view only: no dates, moon phases or frames, just the cards. */
.spread-view .day-head { display: none; }
/* No prompts either: the earlier-weeks row goes, and an empty day is a quiet block a shade darker
   than the page, in the space a card would take, so each
   card stays under its weekday. A week with no cards at all folds away. An empty block still opens
   the picker. */
.spread-view .earlier { display: none; }
/* The Cards view dissolves the week rows into one grid: the days flow on from one another, seven to a row
   from a Monday, and a week with no cards at all is left out whole (`bare-week`), which keeps every row a
   Monday to Sunday. */
.spread-view .bare-week { display: none; }
.spread-view .weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-sm); }
.spread-view .week { display: contents; }
.spread-view button.slot.empty { border-style: solid; border-color: transparent; background: var(--page-well); color: transparent; }
/* On hover the page placeholder gives way to the empty card slot's dashed outline, tint and plus. */
.spread-view .day:hover button.slot.empty { border-style: dashed; border-color: var(--page-well-border-hover); background: var(--page-well-hover); }
/* In Calendar and Cards the one empty day open to a card is the one to add next, so it is drawn to be found, the same
   as an empty day is in Edit: a dashed outline and plus, while the blanks around it are left plain. */
.tidy button.slot.empty { border: 1px dashed var(--card-well-border); background: var(--card-well); color: var(--card-well-icon); }
/* With no cards around them, the Cards view's empty blocks are on the page, like the rows above the grid. */
.spread-view.tidy button.slot.empty { border-color: var(--page-well-border); background: var(--page-well); }

.spread-view .day,
.spread-view .day:hover { padding: 0; background: none; border-color: transparent; }

button.action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--caps-tracking);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
/* A destructive action stays quiet: no border, muted, and pushed away from the primary one. */
button.action.quiet { margin-left: auto; border-color: transparent; color: var(--text-muted); }
.confirmation-popover-actions .action { margin: 0; }
.confirmation-popover-actions .action.quiet { margin-left: 0; }
.confirmation-popover .action {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: normal;
}
.confirmation-popover .action:not(.quiet) {
  padding: var(--space-2xs) var(--space-md);
  border-radius: 6px;
  background: var(--confirmation-button);
  color: var(--text);
}
.confirmation-popover .action.quiet {
  padding: var(--space-2xs) var(--space-md);
  border-radius: 6px;
}
.confirmation-popover .action:hover {
  background: transparent;
  text-decoration: underline;
}
.confirmation-popover .action:not(.quiet):hover {
  background: var(--confirmation-button-hover);
  text-decoration: none;
}
.confirmation-popover .action.quiet:hover,
.confirmation-popover .action.quiet:active {
  background: transparent;
  color: var(--text-strong);
  text-decoration: none;
}
.confirmation-popover .action:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
  background: transparent;
}
.confirmation-popover .action:not(.quiet):focus-visible {
  background: var(--text);
  color: var(--page);
}
.confirmation-popover.compact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: max-content;
  max-width: calc(100vw - var(--page-margin) - var(--page-margin));
  padding: var(--space-xs) var(--space-sm);
}
.confirmation-popover.compact[hidden] { display: none; }
.confirmation-popover.compact strong {
  white-space: nowrap;
  font-size: var(--text-xs);
}
.confirmation-popover.compact p,
.confirmation-label-compact { display: none; }
.confirmation-popover.compact .confirmation-popover-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2xs);
}
.confirmation-popover.compact .confirmation-label-full { display: none; }
.confirmation-popover.compact .confirmation-label-compact { display: inline; }

/* Deck reads as two related spreads: the Majors and the complete Minor Arcana suits. */
.weeks[hidden],
.deck-content[hidden] { display: none; }
.deck-content {
  --deck-card-gap: var(--space-sm);
  --deck-group-gap: var(--space-5xl);
  display: grid;
  gap: var(--deck-group-gap);
}
.deck-spread-group {
  display: grid;
  gap: var(--space-sm);
}
.deck-spread-row {
  display: grid;
  gap: var(--deck-card-gap);
}
.deck-major-spread .deck-spread-row {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.deck-minor-spread .deck-spread-row {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}
.deck-card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.deck-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3.5;
  object-fit: cover;
  border-radius: 4px;
  transition: filter 0.2s var(--ease);
}
.deck-card.unseen img {
  filter: grayscale(1);
}
@media (max-width: 760px) {
  .deck-content {
    --deck-card-gap: var(--space-xs);
    --deck-group-gap: var(--space-4xl);
  }
  .deck-spread-group { gap: var(--space-xs); }
}

.card-picker[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.picker-results {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Room for cards that grow on hover, canceled out so the grid lines up with the search box. */
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)) 0;
  padding: var(--space-xs);
}
.card-picker h2 { margin-bottom: var(--space-xl); font-size: var(--text-md); }
.picker-search {
  width: 100%;
  margin-bottom: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--search);
  color: var(--text);
  font: inherit;
  font-family: var(--font-sans);
  transition: border-color 0.15s var(--ease);
}
.picker-search:focus { border-color: var(--search-border-focus); outline: none; } /* firmer than at rest, short of the full muted color: the box is focused as soon as the drawer opens */
.picker-search::placeholder { color: var(--text-muted); opacity: 1; } /* the palette's own muted color, not the browser's gray */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--image-sm), 1fr));
  gap: var(--space-2xs);
}
.picker-grid [hidden] { display: none; }
.picker-empty { transition: opacity 0.18s var(--ease), display 0.18s allow-discrete; }
.picker-empty[hidden] { display: none; opacity: 0; }
@starting-style {
  button.pick, .picker-empty { opacity: 0; }
}
button.pick {
  position: relative;
  isolation: isolate; /* keeps the frame behind the card, inside this button */
  display: flex;
  align-items: flex-start;
  align-self: start; /* each frame hugs its own card, so the space around it is the same on every side */
  --frame-pad: clamp(3px, 0.6vw, var(--space-xs)); /* the same as a day's in the calendar grid */
  padding: 4px; /* what the thumbnails are set apart by; the frame grows beyond it */
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: opacity 0.18s var(--ease);
}
button.pick.ghost { transition: none; }
/* The frame is drawn behind the card and extends past the button, so lighting it does not move anything: it is as
   far from the card as a day's frame is in the calendar grid. */
button.pick::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(4px - var(--frame-pad) - 1px);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
/* One card is active: the one pointed at or in focus, or, once there is a search, the one Enter would pick. Its frame
   lights, lighter than the drawer, and, where there is a pointer, the rest fade to a warm gray, so the active
   one is the brightest thing there. All the cards start at full color; the change is a fade over a third of a second,
   so pointing at a card is not a flash. */
button.pick.active::before { border-color: var(--border-strong); background: var(--card-hover); }
button.pick:focus-visible { outline: none; }
button.pick:focus-visible::before { border-color: var(--text-muted); }
button.pick img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px; /* as a card's in the calendar */
  aspect-ratio: 684 / 1197; /* a card's shape (every card image has it), so the grid is its full height before the images arrive and nothing moves when they do */
  transition: opacity 0.3s ease, filter 0.3s ease; /* opacity is also the fade-in as an image loads */
}
@media (hover: hover) {
  /* Every card rests faded to a warm gray and the active one is in full color, so pointing at a card only lights it,
     where fading the rest on the first move would flash the whole grid. Once loaded, so the fade-in still shows. */
  button.pick:not(.active) img.loaded { filter: var(--picker-dim-filter); opacity: var(--picker-dim-opacity); }
}
.picker-empty { margin: var(--space-xl) 0 0; color: var(--text-muted); }
/* At the small sizes the picker's padding matches the page's margin, and more thumbnails fit across: five in the
   drawer's 520px, four on a phone. */
@media (max-width: 860px) {
  .card-picker { --drawer-pad: var(--page-margin); }
  .picker-grid { grid-template-columns: repeat(5, 1fr); }
  button.pick::before { border-radius: 6px; } /* as a day's in the calendar */
}
@media (max-width: 560px) {
  .picker-grid { grid-template-columns: repeat(4, 1fr); }
}

/* The note on the left, the data controls on the right, on one row; a message about an import or
   export gets a line of its own underneath. On a narrow screen the controls wrap under the note. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  margin-top: var(--space-4xl);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}
footer p { margin: 0; line-height: 1.5; }
button.inline-link,
a.inline-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.18em;
  cursor: pointer;
}
button.inline-link:hover, button.inline-link:focus-visible, a.inline-link:hover, a.inline-link:focus-visible { color: var(--text); }
a.inline-link .icon { width: 1em; height: 1em; margin-left: 0.08em; vertical-align: -0.15em; stroke-width: 2.5; }
.status { flex-basis: 100%; }
.status:empty { display: none; }

/* Below a full desktop the seven columns stay, with tighter margins, gutters and corners, so a day's widest label, at
   the full size, and its moon still fit on one line. 810px is about where the desktop spacing runs out of room for
   that; the next step, at 750px, is where these tighter cells do. */
@media (max-width: 810px) {
  body { --page-top: var(--space-2xl); --page-gutter: var(--page-margin); padding: var(--page-top) var(--page-gutter) var(--space-3xl); }
  .week { gap: var(--space-2xs); }
  .week + .week { margin-top: var(--space-2xs); }
  .spread-view .weeks { gap: var(--space-2xs); }
  .day { --moon-size: calc(var(--space-lg) * 0.88); }
  /* Less rounding on a small card. */
  .day { border-radius: 6px; }
}
/* Narrower than that there is no room for seven, so the days flow, as many per row as fit, each with its full
   date and moon. The week rows dissolve into one grid, as in the Cards view. */
@media (max-width: 750px) {
  .weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2xs); }
  .week { display: contents; }
  .spread-view .weeks { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
  .tidy .day.before-first-card,
  .tidy .day.after-last-card { display: none; }
}
@media (max-width: 560px) {
  dialog { border-left: 0; border-radius: 0; }
}
/* The footer is a sentence with a link in it, so on anything held close, a touch screen of any width or a window as
   narrow as a phone, it takes the next step up the type scale. Readability sets this; the layout is left to fit it. */
@media (pointer: coarse), (max-width: 560px) {
  footer { font-size: var(--text-sm); }
}

/* On wide screens the picker is wider, so six thumbnails fit across. Each is at most as big as a card in the calendar
   grid at its widest (135px), so the picker's cards read as the same size as the grid's. The drawer is six thumbnails
   (each with its frame), the gaps, its padding and its 1px border. */
@media (min-width: 1000px) {
  .card-picker .picker-grid { grid-template-columns: repeat(6, 1fr); }
  .card-picker {
    width: min(calc(6 * (135px + 8px) + 5 * var(--space-2xs) + 2 * var(--drawer-pad) + 1px), calc(100vw - 2 * var(--space-5xl)));
  }
}

/* The card's drawer has one column: the title and subheading, then the card, then the text. The column is as wide as
   a 375px phone leaves (342px), which is also about as wide as the deck's images stay sharp, so the card fills it
   edge to edge and the text takes the same width. On a wider window the drawer stays that width, as a side sheet.
   It goes to two columns (the card, and the text beside it) once the window is wide enough for both, about 880px. */
.card-detail {
  width: min(calc(342px + var(--drawer-pad) + var(--drawer-pad-r) + 1px), 100vw);
}
.detail-head { order: -1; margin: 0 0 var(--space-2xl); }
.detail-head h2 { padding-right: var(--space-4xl); } /* the title keeps clear of the close button; the subheading is below it and does not need to */
.detail-image { display: block; max-width: none; } /* fills the column, so nothing is left empty beside it */
/* The page's own margins shrink at this width, and the drawer's padding matches them on every side. */
@media (max-width: 860px) {
  .card-detail { --drawer-pad: var(--page-margin); --drawer-pad-r: var(--page-margin); }
}
/* In one column the list bullets are left out, as there is no gutter for them; the items are set a little further apart
   instead, so each still reads as its own. */
@media (max-width: 879.98px) {
  .detail-tagline { font-size: var(--text-sm); } /* the column is the card's width: a larger subheading wraps and outweighs the title */
  .detail-section li::before { display: none; }
  .detail-section li { margin-bottom: var(--space-sm); }
  .detail-section li:last-child { margin-bottom: 0; }
}
@media (min-width: 880px) {
  .card-detail {
    --drawer-gutter: var(--space-4xl); /* a little more separation between the card and the reading column */
    --image-w: var(--image-lg);
    --text-w: 46ch; /* the column beside the card */
    width: min(calc(var(--image-w) + var(--drawer-gutter) + var(--text-w) + var(--drawer-pad) + var(--drawer-pad-r) + 1px), calc(100vw - 2 * var(--space-5xl)));
  }
  .detail-body {
    grid-template-columns: var(--image-w) minmax(0, var(--text-w));
    column-gap: var(--drawer-gutter);
  }
  .detail-head {
    order: 0;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .detail-left { grid-column: 1; grid-row: 2; }
  .detail-image { max-width: none; }
  .detail-text { grid-column: 2; grid-row: 2; }
  .detail-text .detail-section:first-of-type { margin-top: 0; }
}

/* Switching between the Calendar and Cards views: cards glide, everything else cross-fades. */
:root::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: var(--ease);
}

/* On touch screens the small text controls get a 44px-tall hit area, without looking bigger. */
@media (pointer: coarse) {
  button.link, .tool, button.toast-action, button.toast-close, .more-button, .range-button { position: relative; }
  button.link::after, .tool::after, button.toast-action::after, button.toast-close::after, .more-button::after, .range-button::after {
    content: "";
    position: absolute;
    inset: -14px -6px;
  }
  .earlier, button.action { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after, ::backdrop {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}
/* The picker's dimming is a fade, not movement, so it keeps its duration where motion is reduced: without it the
   cards would change brightness in one frame. */
@media (prefers-reduced-motion: reduce) {
  button.pick:not(.ghost) img { transition-duration: 0.3s !important; }
  button.pick:not(.ghost)::before { transition-duration: 0.15s !important; }
}

/* Toast: an inverted bar that carries one action (undo). It appears at the bottom right, where the
   drawer's Remove button was, since that is where the eye already is. */
.toast {
  position: fixed;
  right: var(--space-2xl);
  bottom: var(--space-2xl);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: calc(100vw - 2 * var(--space-2xl));
  padding: var(--space-sm) var(--space-lg);
  border-radius: 6px; /* the controls' radius: the bar is about a button's size */
  background: var(--text);
  color: var(--page);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  /* The bar is light in the dark theme, so its dark text gets the browser's own smoothing back, not the grayscale that thins it. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  box-shadow: var(--popover-shadow); /* the dropdown's: warm, and pulled in so it does not spread */
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--space-sm));
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
}
/* With an action, the bar's right padding is closer to the button's own, so the label is not held far from the edge. */
.toast:has(.toast-action) { padding-right: var(--space-sm); }
.toast.show {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.toast.error-bar {
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  justify-content: space-between;
  padding: 0;
  border-radius: 0;
  transform: translateY(100%);
}
.toast.error-bar.show { transform: none; }
.error-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: min(var(--main-width), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin: 0 auto;
  padding: var(--space-md) 0 calc(var(--space-md) + env(safe-area-inset-bottom));
}
.toast.error-bar .toast-message { flex: 1 1 auto; min-width: 0; }
.toast.error-bar button.inline-link,
.toast.error-bar button.inline-link:hover,
.toast.error-bar button.inline-link:focus-visible {
  color: inherit;
  text-decoration-color: currentColor;
}
.diary-loading .slot-plus {
  opacity: 0;
}
.diary-loading .skeleton-button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 300%;
  background: linear-gradient(90deg, transparent, var(--skeleton-background), var(--skeleton-highlight), var(--skeleton-background), transparent);
  pointer-events: none;
  animation: skeleton-shimmer 1.2s linear infinite;
}
.diary-loading .skeleton-button {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  color: transparent;
  cursor: default;
  pointer-events: none;
}
.diary-loading button.slot.empty { border: 1px solid var(--border); }
.diary-loading .skeleton-button > * { opacity: 0; }
.diary-loading .day { pointer-events: none; }
@keyframes skeleton-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .diary-loading .slot-plus {
    transition: none;
  }
  .diary-loading .skeleton-button::before {
    animation: none;
    transform: none;
    opacity: 0;
  }
}
button.toast-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--space-2xl);
  height: var(--space-2xl);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
button.toast-close .icon { width: var(--space-md); height: var(--space-md); }
button.toast-close:hover { opacity: 0.75; }
button.toast-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 6px; /* the same as Cancel */
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--caps-tracking);
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}
@media (max-width: 560px) {
  .toast { left: var(--space-xl); right: var(--space-xl); bottom: var(--space-xl); max-width: none; justify-content: space-between; }
}
/* The toast is a sentence too, so it takes the same step up on touch and in a phone-narrow window as the footer. */
@media (pointer: coarse), (max-width: 560px) {
  .toast { font-size: var(--text-sm); }
}


/* Legal page */
.legal-page { max-width: 760px; }
.legal-head { margin-bottom: var(--space-xl); }
.legal-head h1 { margin-top: var(--space-xl); }
.legal-back { color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-xs); text-decoration: none; }
.legal-back:hover, .legal-back:focus-visible { color: var(--text); text-decoration: underline; }
.legal-nav { display: flex; gap: var(--space-xl); margin-top: var(--space-2xl); font-family: var(--font-sans); font-size: var(--text-sm); }
.legal-nav a { color: var(--text-muted); }
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--text); }
.legal-content { font-size: var(--text-sm); line-height: 1.7; }
.legal-content section + section { margin-top: var(--space-5xl); padding-top: var(--space-5xl); border-top: 1px solid var(--border); }
.legal-content h2 { margin: 0 0 var(--space-sm); font-size: var(--text-xl); }
.legal-content h3 { margin: var(--space-4xl) 0 var(--space-md); font-family: var(--font-serif); font-size: var(--text-md); font-weight: 600; line-height: 1.35; }
.legal-content p { margin: 0 0 var(--space-md); }
.legal-content ul { margin: 0 0 var(--space-md); padding-left: 1.4em; }
.legal-content li { margin-bottom: var(--space-xs); }
.legal-updated { color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.legal-content code { font-family: var(--font-sans); font-size: 0.9em; }
@media (pointer: coarse), (max-width: 560px) {
  .legal-content { font-size: var(--text-base); }
  .legal-updated { font-size: var(--text-sm); }
}