/*
 * App page and home App panel (UI-022) on the owner-approved App launch design
 * (docs/design/app-launch-20261028, revision 2). Loaded on the home page and
 * the App page, after home.css. Site colours, type, buttons, ledger rows and
 * the layered head resolve to tokens.css and public.css. The composition
 * values and the phone illustration's own palette are declared in the token
 * block below, like chrome.css does, so this sheet stays inside the UI
 * contract's value rules.
 *
 * The phone is the iPhone app's ledger screen drawn in HTML: one unit is one
 * iOS point (--app-u). Its colours are fixed illustration values (the app's
 * Theme.swift), not site tokens.
 */

:root {
  /* phone illustration palette (the app's own light screen) */
  --app-ink: #29335C;
  --app-ink-soft: #5B6284;
  --app-ink-faint: #6E7491;
  --app-tile: #ECEEF5;
  --app-hairline: #E7E9F0;
  --app-dashed: #BFC4D3;
  --app-bezel: #1F2645;
  --app-paper: #FFFFFF;
  --app-pending: #B53A1E;
  --app-black: #000000;
  --app-pill-fill: rgba(255, 255, 255, 0.94);
  --app-pill-line: rgba(41, 51, 92, 0.08);
  --app-pill-on: rgba(41, 51, 92, 0.075);
  --app-pill-shadow: rgba(41, 51, 92, 0.24);
  --app-plus-shadow: rgba(41, 51, 92, 0.36);
  /* the home panel's ground: the brand navy, with the deep navy and the sky
     that its press shadow and focus ring use so they read on it */
  --app-navy: #29335C;
  --app-navy-deep: #151932;
  --app-sky: #8FC9FF;

  /* phone geometry */
  --app-sw: 316px;
  --app-frame: 10px;

  /* App page composition */
  --app-title-zh: clamp(3rem, 15vw, 6rem);
  --app-title-en: clamp(2.75rem, 12vw, 5.5rem);
  --app-hero-pad: 3.5rem 0 2.5rem;
  --app-plate-pad: 2.5rem 0 4.5rem;
  --app-h2: clamp(1.75rem, 5vw, 2.5rem);
  --app-co-title: 1.5rem;
  --app-co-gap: 1.75rem 2.5rem;
  --app-co-line: 0.9rem;
  --app-co-reach-x: 3.5rem;
  --app-co-width: 17.5rem;
  --app-marker: 9px;
  --app-steps-gap: 2.25rem 2.5rem;
  --app-step-no: 3.25rem;
  --app-facts-gap: 1.25rem;
  --app-close-pad: 2.25rem;
  --app-icon: 4.5rem;

  /* home panel composition */
  --app-promo-gap: 3.4rem;
  --app-promo-h2: clamp(2.5rem, 11vw, 4.75rem);
  --app-promo-art: 22rem;
  --app-promo-copy-pad: 2rem 1.5rem 2.25rem;
  --app-corner: 4.75rem;
  --app-corner-fill: 4rem;
  --app-promo-min: 30rem;
  --app-promo-min-wide: 32rem;
  --app-promo-phone-top: 6.5rem;
  --app-promo-copy-inset: 4.5rem;
}

/* ---------- App page: head ---------- */

/* The layered head with the ticks on its top edge only, the ghost glyph in
   the last tick column and the kicker rule one column short of it. */
.layered.layered-app { padding: var(--app-hero-pad); }
.layered-app .grid-bg,
.layered-app .grid-bg i { background: linear-gradient(var(--color-border) 0 0) top var(--tick-side) / 1px var(--head-tick) no-repeat; }
.layered.layered-app .ghost { display: none; top: var(--space-1); right: var(--head-edge); line-height: 1; letter-spacing: 0; }
.layered-app .kicker { margin-block-end: var(--space-5); }
.app-hero { display: grid; gap: var(--space-6); }

.app-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-text);
}
.app-title span { display: inline-block; }
.app-title-zh { font-size: var(--app-title-zh); }
.app-title-en { font-size: var(--app-title-en); letter-spacing: -0.02em; }
.app-title .rule-under { box-shadow: inset 0 -0.12em 0 var(--color-press); }
.app-title-en .rule-under { color: var(--color-accent); }

.app-deck { display: grid; gap: var(--space-5); align-content: end; }
.app-deck .support { margin: 0; font-size: var(--text-body-lg); text-wrap: pretty; }
.app-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.app-status { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--chrome-min-target); font-weight: var(--weight-semibold); }
.app-status::before { content: ""; flex: none; width: var(--space-3); height: var(--space-3); background: var(--color-accent); }
.app-cta-note { inline-size: 100%; margin: 0; font-size: var(--text-label); color: var(--color-text-muted); }
/* The all-link's underline stays under the text; the 44px target is a
   centred pseudo-element, so the link keeps its height. */
.app-setup-link { position: relative; margin-top: 0; }
.app-setup-link::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)) 0; }

/* The two platform facts under the hero: the home ledger's rows. */
.app-ledger,
.app-facts { display: grid; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-mono); }
.app-ledger::before,
.app-facts::before { content: ""; display: block; block-size: 2px; background: var(--color-text); }
.app-ledger > span { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-block-end: 1px dashed var(--color-border-strong); color: var(--color-text-muted); }
.app-ledger > span > span:first-child { margin-inline-end: auto; }
.app-ledger b { font-weight: var(--weight-semibold); color: var(--color-text); text-align: end; }

@media (min-width: 768px) {
  .layered.layered-app .ghost { display: block; font-size: calc(var(--head-module) * 0.45); -webkit-text-stroke: 1px var(--color-ghost); }
  :lang(en) .layered.layered-app .ghost { font-size: calc(var(--head-module) / 2.4); }
  .layered-app .kicker { margin-inline-end: var(--head-module); }
}
@media (min-width: 1024px) {
  .layered.layered-app { --app-hero-pad: 4.5rem 0 3rem; }
  .app-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-10); align-items: end; }
}

/* ---------- App page: the annotated ledger ---------- */

.app-plate { padding: var(--app-plate-pad); }
.app-plate-grid { position: relative; display: grid; justify-items: center; row-gap: var(--space-8); }
.app-plate .app-phone { box-shadow: 14px 14px 0 var(--color-press-soft); }
.app-callouts { display: grid; gap: var(--app-co-gap); inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.app-co { padding-top: var(--app-co-line); border-block-start: 2px solid var(--color-text); }
.app-co h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--app-co-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: -0.015em;
}
.app-co h3 small { font-family: var(--font-body); font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--color-text-muted); letter-spacing: 0; }
.app-co p { max-width: 30ch; margin: var(--space-1) 0 0; color: var(--color-text-muted); text-wrap: pretty; }

@media (min-width: 640px) {
  .app-callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* From 1024px the four callouts stand beside the phone, each on a hairline to
   the thing it names (--y is the callout's offset down the screen, --reach
   how far the line runs onto the phone). */
@media (min-width: 1024px) {
  .app-plate-grid { grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); align-items: start; }
  .app-plate-grid > .app-phone { --app-sw: 360px; grid-column: 2; grid-row: 1; }
  .app-callouts { display: contents; }
  .app-co {
    --reach: 0px;
    position: relative;
    z-index: 2;
    grid-row: 1;
    align-self: start;
    width: min(var(--app-co-width), calc(100% - var(--app-co-reach-x)));
    margin-top: var(--y);
    padding-top: 0;
    border-block-start: 0;
  }
  .app-co-left { grid-column: 1; justify-self: end; margin-right: var(--app-co-reach-x); text-align: right; }
  .app-co-left h3 { justify-content: flex-end; }
  .app-co-left p { margin-left: auto; }
  .app-co-right { grid-column: 3; justify-self: start; margin-left: var(--app-co-reach-x); }
  .app-co::before { content: ""; position: absolute; top: var(--app-co-line); block-size: 1px; width: calc(var(--app-co-reach-x) + var(--reach)); background: var(--color-text); }
  .app-co-left::before { left: 100%; }
  .app-co-right::before { right: 100%; }
  .app-co::after { content: ""; position: absolute; top: calc(var(--app-co-line) - var(--app-marker) / 2); width: var(--app-marker); height: var(--app-marker); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg); }
  .app-co-left::after { left: calc(100% + var(--app-co-reach-x) + var(--reach) - var(--app-marker) / 2); }
  .app-co-right::after { right: calc(100% + var(--app-co-reach-x) + var(--reach) - var(--app-marker) / 2); }
  .app-co-bare::after { display: none; }
  .app-co-total { --y: 154px; --reach: 32px; }
  .app-co-review { --y: 135px; --reach: 25px; }
  .app-co-sources { --y: 279px; --reach: 19px; }
  .app-co-manual { --y: 713px; --reach: 23px; }
}

/* ---------- App page: setup, requirements, closing lockup ---------- */

.app-section { padding-block: var(--space-10); border-block-start: 1px solid var(--color-border); }
.app-section h2 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--app-h2); font-weight: var(--weight-bold); line-height: 1.15; letter-spacing: -0.02em; }
.app-steps { display: grid; gap: var(--app-steps-gap); margin: 0; padding: 0; list-style: none; }
.app-steps li::before { content: ""; display: block; block-size: 2px; margin-block-end: var(--space-4); background: var(--color-text); }
.app-step-no { display: block; font-family: var(--font-display); font-size: var(--app-step-no); font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.02em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.app-steps h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-body-lg); font-weight: var(--weight-semibold); line-height: 1.4; }
.app-steps p { max-width: 34ch; margin: 0; color: var(--color-text-muted); text-wrap: pretty; }
.app-setup-note { max-width: 60ch; margin: var(--space-8) 0 0; padding-block: var(--space-1); padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--color-text); }
@media (min-width: 768px) {
  .app-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.app-facts > div { display: flex; align-items: baseline; gap: var(--app-facts-gap); padding: var(--space-3) 0; border-block-end: 1px dashed var(--color-border-strong); }
.app-facts dt { flex: 0 0 auto; max-width: 50%; color: var(--color-text-muted); }
.app-facts dd { flex: 1 1 0; margin: 0; font-weight: var(--weight-semibold); text-align: end; text-wrap: pretty; }

.app-close { padding-block-end: var(--space-2); }
.app-close-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-facts-gap) var(--space-5); padding-block: var(--app-close-pad); border-block: 1px solid var(--color-border-strong); }
.app-icon { flex: none; width: var(--app-icon); height: var(--app-icon); border-radius: var(--space-4); box-shadow: 0 0 0 1px var(--color-border); }
.app-close-id b { display: block; font-family: var(--font-display); font-size: var(--text-heading); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.app-close-id span { font-family: var(--font-mono); font-size: var(--chrome-footer-mono-size); color: var(--color-text-muted); }
.app-close .app-cta { margin-inline-start: auto; }

/* ---------- home: the App panel ---------- */

/* A navy panel with the C FOCUS open corner: a coral square in a notch cut
   from the top-right corner. The primary button's press shadow, the focus
   ring and the phone's offset shadow are re-pointed to the deep navy and the
   sky so they read on it. */
.app-promo { padding-block: 0 var(--app-promo-gap); }
.app-promo-body {
  --color-press: var(--app-navy-deep);
  --color-focus: var(--app-sky);
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--space-5) 0 var(--space-5) var(--space-5);
  background: var(--app-navy);
  color: var(--app-paper);
}
.app-promo-corner { position: absolute; top: 0; right: 0; width: var(--app-corner); height: var(--app-corner); background: var(--color-bg); }
.app-promo-corner i { position: absolute; top: 0; right: 0; width: var(--app-corner-fill); height: var(--app-corner-fill); background: var(--color-accent); }
.app-promo-copy { position: relative; display: grid; align-content: start; gap: var(--space-4); padding: var(--app-promo-copy-pad); }
.app-promo-body .tag { color: color-mix(in srgb, var(--app-paper) 72%, transparent); }
.app-promo h2 { margin: 0; font-family: var(--font-display); font-size: var(--app-promo-h2); font-weight: var(--weight-bold); line-height: 1.04; letter-spacing: -0.025em; }
.app-promo h2 span { display: block; }
.app-promo-text { max-width: 30ch; margin: 0; font-size: var(--text-body-lg); color: color-mix(in srgb, var(--app-paper) 82%, transparent); text-wrap: pretty; }
.app-promo-actions { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); }
.app-promo-meta { margin: 0; font-family: var(--font-mono); font-size: var(--chrome-footer-mono-size); color: color-mix(in srgb, var(--app-paper) 66%, transparent); }
/* The second action: a flat white outline on the navy. */
.app-outline { background: transparent; border-color: color-mix(in srgb, var(--app-paper) 85%, transparent); color: var(--app-paper); box-shadow: none; }
.app-outline:hover { background: color-mix(in srgb, var(--app-paper) 8%, transparent); }
.app-promo-art { position: relative; height: var(--app-promo-art); }
.app-promo-art .app-phone { position: absolute; top: var(--space-2); left: 50%; transform: translateX(-50%); box-shadow: 14px 14px 0 var(--app-navy-deep); }

@media (min-width: 768px) {
  .app-promo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: var(--app-promo-min); --app-corner: 5.5rem; --app-corner-fill: 4.63rem; }
  .app-promo-copy { align-content: center; padding: var(--space-8) var(--space-6) var(--space-8) var(--space-8); }
  .app-promo-art { height: auto; }
  .app-promo-art .app-phone { top: var(--app-promo-phone-top); }
}
@media (min-width: 1200px) {
  .app-promo-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: var(--app-promo-min-wide); }
  .app-promo-copy { padding-inline-start: var(--app-promo-copy-inset); }
}

/* ---------- the phone: the app's ledger screen, 1 unit = 1 iOS point ---------- */

.app-phone {
  --app-u: calc(var(--app-sw) / 393);
  flex: none;
  width: calc(var(--app-sw) + var(--app-frame) * 2);
  padding: var(--app-frame);
  border-radius: calc(55 * var(--app-u) + var(--app-frame));
  background: var(--app-bezel);
}
.app-ph-screen { position: relative; overflow: hidden; width: var(--app-sw); height: calc(852 * var(--app-u)); border-radius: calc(55 * var(--app-u)); background: var(--app-paper); color: var(--app-ink); font-family: -apple-system, "SF Pro Text", "Noto Sans", "Noto Sans TC", sans-serif; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app-ph-screen svg { display: block; }
.app-ph-status { display: flex; align-items: center; justify-content: space-between; height: calc(54 * var(--app-u)); padding: calc(4 * var(--app-u)) calc(30 * var(--app-u)) 0 calc(48 * var(--app-u)); font-size: calc(17 * var(--app-u)); font-weight: 600; color: var(--app-black); }
.app-ph-sys { display: flex; align-items: center; gap: calc(6 * var(--app-u)); }
.app-ph-island { position: absolute; top: calc(11 * var(--app-u)); left: 50%; width: calc(124 * var(--app-u)); height: calc(36 * var(--app-u)); border-radius: calc(18 * var(--app-u)); background: var(--app-black); transform: translateX(-50%); }
.app-ph-top { display: flex; align-items: center; gap: calc(10 * var(--app-u)); min-height: calc(66 * var(--app-u)); padding: calc(8 * var(--app-u)) calc(20 * var(--app-u)) calc(14 * var(--app-u)); }
.app-ph-logo { display: flex; align-items: center; gap: calc(6 * var(--app-u)); margin-right: auto; font-family: var(--font-display); font-size: calc(23 * var(--app-u)); font-weight: 800; letter-spacing: -0.02em; }
.app-ph-logo svg { width: calc(25 * var(--app-u)); height: auto; }
.app-ph-month { display: flex; align-items: center; gap: calc(4 * var(--app-u)); font-size: calc(14 * var(--app-u)); font-weight: 500; color: var(--app-ink-soft); }
.app-ph-month svg { width: calc(9 * var(--app-u)); }
.app-ph-avatar { display: grid; place-items: center; width: calc(32 * var(--app-u)); height: calc(32 * var(--app-u)); border-radius: 50%; background: var(--app-tile); font-size: calc(14 * var(--app-u)); font-weight: 600; }
.app-ph-sum { position: relative; margin: 0 calc(16 * var(--app-u)); padding: calc(18 * var(--app-u)) calc(20 * var(--app-u)) calc(16 * var(--app-u)); border-radius: calc(24 * var(--app-u)) 0 calc(24 * var(--app-u)) calc(24 * var(--app-u)); background: var(--app-navy); color: var(--app-paper); }
.app-ph-sum-label { padding: 0 calc(72 * var(--app-u)) calc(10 * var(--app-u)) 0; font-size: calc(13 * var(--app-u)); color: color-mix(in srgb, var(--app-paper) 76%, transparent); }
.app-ph-big { display: flex; align-items: flex-start; font-family: var(--font-display); font-weight: 600; line-height: 1; }
.app-ph-cur { padding: calc(5 * var(--app-u)) calc(3 * var(--app-u)) 0 0; font-size: calc(18 * var(--app-u)); opacity: 0.78; }
.app-ph-whole { font-size: calc(50 * var(--app-u)); letter-spacing: -0.02em; }
.app-ph-cents { padding-top: calc(3 * var(--app-u)); font-size: calc(24 * var(--app-u)); }
.app-ph-groups { display: flex; gap: calc(22 * var(--app-u)); padding-top: calc(16 * var(--app-u)); }
.app-ph-groups span { display: block; font-size: calc(12 * var(--app-u)); color: color-mix(in srgb, var(--app-paper) 72%, transparent); }
.app-ph-groups b { display: block; font-size: calc(15 * var(--app-u)); font-weight: 600; }
.app-ph-notch { position: absolute; top: 0; right: 0; width: calc(76 * var(--app-u)); height: calc(76 * var(--app-u)); background: var(--app-paper); }
.app-ph-focus { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--app-u)); width: calc(64 * var(--app-u)); height: calc(64 * var(--app-u)); background: var(--color-accent); color: var(--app-paper); }
.app-ph-focus b { font-family: var(--font-display); font-size: calc(27 * var(--app-u)); font-weight: 700; line-height: 1; }
.app-ph-focus span { font-size: calc(12 * var(--app-u)); font-weight: 600; }
.app-ph-chips { display: flex; gap: calc(4 * var(--app-u)); padding: calc(14 * var(--app-u)) calc(16 * var(--app-u)) 0; }
.app-ph-chips span { display: flex; align-items: center; height: calc(34 * var(--app-u)); padding: 0 calc(14 * var(--app-u)); border-radius: var(--radius-pill); font-size: calc(15 * var(--app-u)); font-weight: 500; color: var(--app-ink-soft); white-space: nowrap; }
.app-ph-chips .on { background: var(--app-tile); color: var(--app-ink); font-weight: 600; }
.app-ph-day { display: flex; align-items: baseline; gap: calc(8 * var(--app-u)); padding: calc(16 * var(--app-u)) calc(20 * var(--app-u)) calc(6 * var(--app-u)); }
.app-ph-day b { font-size: calc(15 * var(--app-u)); font-weight: 600; }
.app-ph-day span { font-size: calc(13 * var(--app-u)); color: var(--app-ink-faint); }
.app-ph-day em { margin-left: auto; font-size: calc(14 * var(--app-u)); font-style: normal; font-weight: 500; color: var(--app-ink-soft); }
.app-ph-rows { margin: 0; padding: 0 calc(8 * var(--app-u)); list-style: none; }
.app-ph-rows li { position: relative; display: flex; align-items: center; gap: calc(12 * var(--app-u)); min-height: calc(66 * var(--app-u)); padding: calc(11 * var(--app-u)) calc(12 * var(--app-u)); }
.app-ph-rows li + li::before { content: ""; position: absolute; top: 0; left: calc(64 * var(--app-u)); right: calc(12 * var(--app-u)); block-size: 1px; background: var(--app-hairline); }
.app-ph-tile { display: grid; flex: none; place-items: center; width: calc(40 * var(--app-u)); height: calc(40 * var(--app-u)); border-radius: calc(11 * var(--app-u)); background: var(--app-tile); font-size: calc(17 * var(--app-u)); font-style: normal; font-weight: 600; }
.app-ph-text { display: flex; flex: 1; flex-direction: column; gap: calc(2 * var(--app-u)); min-width: 0; }
.app-ph-text b { overflow: hidden; font-size: calc(16 * var(--app-u)); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.app-ph-text small { display: flex; align-items: center; gap: calc(8 * var(--app-u)); font-size: calc(13 * var(--app-u)); color: var(--app-ink-faint); white-space: nowrap; }
.app-ph-text small i { display: inline-flex; align-items: center; gap: calc(5 * var(--app-u)); font-style: normal; }
.app-ph-text small svg { width: calc(12 * var(--app-u)); height: auto; }
.app-ph-pending { display: flex; align-items: center; gap: calc(6 * var(--app-u)); font-size: calc(13 * var(--app-u)); font-weight: 600; color: var(--app-pending); }
.app-ph-pending::before { content: ""; width: calc(6 * var(--app-u)); height: calc(6 * var(--app-u)); border-radius: 50%; background: var(--color-warning-fill); }
.app-ph-amount { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--app-u)); }
.app-ph-amount b { font-size: calc(16 * var(--app-u)); font-weight: 600; white-space: nowrap; }
.app-ph-amount small { font-size: calc(12 * var(--app-u)); color: var(--app-ink-faint); }
.app-ph-raw { display: grid; place-items: center; min-width: calc(62 * var(--app-u)); min-height: calc(24 * var(--app-u)); padding: 0 calc(8 * var(--app-u)); border: 1.5px dashed var(--app-dashed); border-radius: calc(6 * var(--app-u)); font-size: calc(14 * var(--app-u)); font-weight: 600; color: var(--app-ink-faint); }
.app-ph-tabs { position: absolute; left: calc(14 * var(--app-u)); right: calc(14 * var(--app-u)); bottom: calc(38 * var(--app-u)); display: flex; align-items: center; gap: calc(10 * var(--app-u)); }
.app-ph-pill { display: flex; flex: 1; height: calc(62 * var(--app-u)); padding: calc(4 * var(--app-u)); border: 1px solid var(--app-pill-line); border-radius: var(--radius-pill); background: var(--app-pill-fill); box-shadow: 0 calc(12 * var(--app-u)) calc(30 * var(--app-u)) var(--app-pill-shadow); }
.app-ph-pill span { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--app-u); border-radius: calc(27 * var(--app-u)); font-size: calc(12 * var(--app-u)); font-weight: 600; color: var(--app-ink-faint); }
.app-ph-pill span.on { background: var(--app-pill-on); color: var(--app-ink); }
.app-ph-pill svg { width: auto; height: calc(22 * var(--app-u)); }
.app-ph-pill em { position: absolute; top: calc(4 * var(--app-u)); left: calc(50% + 7 * var(--app-u)); display: grid; place-items: center; min-width: calc(19 * var(--app-u)); height: calc(19 * var(--app-u)); padding: 0 calc(5 * var(--app-u)); border-radius: var(--radius-pill); background: var(--color-warning-fill); color: var(--app-ink); font-size: calc(12 * var(--app-u)); font-style: normal; font-weight: 700; }
.app-ph-plus { display: grid; flex: none; place-items: center; width: calc(62 * var(--app-u)); height: calc(62 * var(--app-u)); border-radius: 50%; background: var(--color-action-accent); color: var(--app-paper); box-shadow: 0 calc(10 * var(--app-u)) calc(22 * var(--app-u)) var(--app-plus-shadow); }
.app-ph-plus svg { width: calc(22 * var(--app-u)); }
.app-ph-home { position: absolute; bottom: calc(8 * var(--app-u)); left: 50%; width: calc(134 * var(--app-u)); height: calc(5 * var(--app-u)); border-radius: calc(2.5 * var(--app-u)); background: var(--app-black); transform: translateX(-50%); }