/* The home page's picture of the app: your Profile on its Diary tab, drawn at
   the app's own sizes so it reads as the real screen. Every length is in the
   app's points on a 393-point phone; --pt is one point at the card's width, so
   the whole screen scales as one picture. The --type-* steps are the app's
   type scale (packages/design-tokens type), size over line height, and the
   glyphs are the app's Ionicons, kept in the sprite at the top of the page. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.diary-preview {
  --pt: calc(100cqw / 393);
  --app-font: 'Yum Manrope', var(--sans);
  --type-tab: calc(10 * var(--pt)) / calc(12 * var(--pt));
  --type-meta: calc(12 * var(--pt)) / calc(16 * var(--pt));
  --type-chip: calc(13 * var(--pt)) / calc(18 * var(--pt));
  --type-body: calc(14 * var(--pt)) / calc(18 * var(--pt));
  --type-headline: calc(16 * var(--pt)) / calc(21 * var(--pt));
  --type-date: calc(26 * var(--pt)) / calc(30 * var(--pt));
  position: relative;
  container-type: inline-size;
  aspect-ratio: 393 / 640;
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 28px;
  box-shadow: 0 14px 36px #1111110d;
  line-height: normal;
}
.diary-preview svg { display: block; fill: currentColor; }
/* No weight, so a rule below that sets a margin always wins. */
:where(.diary-preview) :where(p, h3) { margin: 0; }

/* Profile's tabs: one glyph each, the chosen one filled over an ink underline. */
.app-tabs { display: flex; margin: calc(16 * var(--pt)) calc(16 * var(--pt)) calc(8 * var(--pt)); border-bottom: 1px solid var(--divider); color: var(--ink-secondary); }
.app-tabs span { flex: 1; display: grid; place-items: center; height: calc(48 * var(--pt)); margin-bottom: -1px; border-bottom: calc(2 * var(--pt)) solid transparent; }
.app-tabs .on { border-bottom-color: var(--ink); color: var(--ink); }
.app-tabs svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }

/* "Your diary" and its Grid · Days · Calendar switch, which works here too. */
.diary-heading { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--pt)); min-height: calc(28 * var(--pt)); padding: 0 calc(16 * var(--pt)); }
.diary-preview h2 { font: 600 var(--type-headline) var(--app-font); letter-spacing: calc(-.1 * var(--pt)); }
.view-switch { display: flex; padding: calc(2 * var(--pt)); border-radius: calc(8 * var(--pt)); background: var(--soft); }
.view-switch button { position: relative; display: grid; place-items: center; width: calc(48 * var(--pt)); height: calc(24 * var(--pt)); padding: 0; border: 0; border-radius: calc(6 * var(--pt)); background: transparent; color: var(--ink-secondary); cursor: pointer; }
/* A finger's worth of target above and below the drawn segment. */
.view-switch button::after { content: ''; position: absolute; inset: -10px 0; }
.view-switch button[aria-pressed='true'] { background: var(--canvas); color: var(--ink); box-shadow: 0 calc(1 * var(--pt)) calc(3 * var(--pt)) #1111111f; }
.view-switch svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.view-switch .on, .view-switch [aria-pressed='true'] .off { display: none; }
.view-switch [aria-pressed='true'] .on { display: block; }
.diary-content { margin-top: calc(12 * var(--pt)); }

/* The Recipe chip, on a card's picture and under an evening's. */
.chip { display: inline-flex; align-items: center; gap: calc(4 * var(--pt)); height: calc(26 * var(--pt)); padding: 0 calc(8 * var(--pt)); border: 1px solid var(--divider); border-radius: calc(10 * var(--pt)); background: var(--soft); color: var(--ink); font: 600 var(--type-meta) var(--app-font); }
.chip svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }

/* Grid: two columns of cards, each the cover with the title, you and the heart. */
.diary-grid { display: flex; align-items: flex-start; gap: calc(4 * var(--pt)); padding: 0 calc(4 * var(--pt)); }
.wall-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--pt)); }
.tile { position: relative; overflow: hidden; border-radius: calc(8 * var(--pt)); background: var(--soft); }
.tile-photo { aspect-ratio: 1; }
.tile .chip { position: absolute; top: calc(156 * var(--pt)); left: calc(8 * var(--pt)); }
.tile > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: calc(12 * var(--pt)) calc(12 * var(--pt)) 0; font: 600 var(--type-body) var(--app-font); }
.tile-by { display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(8 * var(--pt)) calc(12 * var(--pt)) calc(12 * var(--pt)); color: var(--ink-secondary); font: 400 var(--type-meta) var(--app-font); }
.tile-by i { display: grid; place-items: center; flex: none; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; background: var(--soft); color: var(--ink); font-size: calc(10 * var(--pt)); font-style: normal; font-weight: 600; }
.tile-by > span:not(.yum) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yum { display: flex; align-items: center; gap: calc(4 * var(--pt)); height: calc(36 * var(--pt)); margin-right: calc(-8 * var(--pt)); padding: 0 calc(8 * var(--pt)); color: var(--ink); font: 600 var(--type-body) var(--app-font); }
.yum svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }

/* Days: the pins' row, then each evening with its date in a column of its own. */
.diary-days, .diary-calendar { padding: 0 calc(16 * var(--pt)); }
.pinned { display: flex; align-items: center; gap: calc(12 * var(--pt)); margin-bottom: calc(28 * var(--pt)); padding-bottom: calc(24 * var(--pt)); border-bottom: 1px solid var(--divider); color: var(--ink-secondary); font: 400 var(--type-meta) var(--app-font); }
.pinned-label { display: flex; align-items: center; flex: none; gap: calc(4 * var(--pt)); width: calc(56 * var(--pt)); color: var(--ink); }
.pinned-label svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.diary-days h3 { margin-bottom: calc(24 * var(--pt)); font: 600 var(--type-body) var(--app-font); }
.evening { display: flex; gap: calc(12 * var(--pt)); margin-bottom: calc(24 * var(--pt)); }
.eve-day { flex: none; width: calc(56 * var(--pt)); color: var(--ink-secondary); font: 400 var(--type-meta) var(--app-font); }
.eve-day b { display: block; color: var(--ink); font: 400 var(--type-date) var(--app-font); letter-spacing: calc(-.2 * var(--pt)); }
.eve-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--pt)); font: 400 var(--type-body) var(--app-font); }
.eve-body .dish-photo { width: calc(161.8 * var(--pt)); aspect-ratio: 1; background: var(--soft); }
.eve-foot { display: flex; align-items: center; gap: calc(8 * var(--pt)); }
.reach { display: flex; align-items: center; gap: calc(4 * var(--pt)); color: var(--ink-secondary); font: 400 var(--type-meta) var(--app-font); }
.reach svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }

/* Calendar: one month, a cooked day's picture behind its number, today in ink. */
.month-head { display: flex; align-items: center; justify-content: space-between; height: calc(32 * var(--pt)); }
.diary-calendar h3 { font: 600 var(--type-headline) var(--app-font); letter-spacing: calc(-.1 * var(--pt)); }
.month-turn { display: flex; gap: calc(12 * var(--pt)); }
.month-turn svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); margin: calc(4 * var(--pt)); }
.month-turn .off { opacity: .25; }
.month-names { display: flex; margin-top: calc(16 * var(--pt)); color: var(--ink-secondary); font: 500 var(--type-chip) var(--app-font); }
.month-names span { flex: 1; text-align: center; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(4 * var(--pt)); margin-top: calc(8 * var(--pt)); }
.month-grid > span { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: calc(8 * var(--pt)); }
.month-grid b { position: relative; display: grid; place-items: center; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%; color: var(--ink-secondary); font: 600 var(--type-body) var(--app-font); }
.month-grid .cooked { background: var(--soft); }
.month-grid .cooked .dish-photo { position: absolute; inset: 0; }
.month-grid .cooked b { color: var(--on-media); text-shadow: 0 calc(1 * var(--pt)) calc(6 * var(--pt)) #00000073; }
.month-grid .today b { background: var(--ink); color: var(--on-action); }
.month-sum { display: flex; flex-direction: column; gap: calc(2 * var(--pt)); margin-top: calc(12 * var(--pt)); color: var(--ink-secondary); font: 400 var(--type-meta) var(--app-font); }
.month-sum b { color: var(--ink); font-weight: 600; }

/* The dock, Profile chosen; the screen's content runs under it. */
.app-dock { position: absolute; right: 0; bottom: 0; left: 0; display: flex; padding: calc(1 * var(--pt)) 0 calc(9 * var(--pt)); border-top: 1px solid var(--divider); background: var(--canvas); color: var(--ink-secondary); font: 500 var(--type-tab) var(--app-font); }
.app-dock > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--pt)); padding: calc(5 * var(--pt)) calc(4 * var(--pt)); }
.app-dock svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.app-dock .on { color: var(--ink); font-weight: 600; }
.dock-add i { display: grid; place-items: center; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border: calc(2 * var(--pt)) solid var(--ink); border-radius: calc(7 * var(--pt)); color: var(--ink); }
.app-dock .dock-add svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }