/* Clarity: one useful number, one next action, and details within reach.
   Loaded last so the web and native shell share the same presentation. */
:root {
  --ink: #191f28;
  --ink-strong: #191f28;
  --muted: #5f6b7a;
  --paper: #f4f6f8;
  --wash: #f2f4f6;
  --line: #edf0f3;
  --surface: #fff;
  --action: #087f68;
  --accent: #087f68;
  --accent-hover: #076d59;
  --accent-soft: #eaf5f0;
  --positive: #087f68;
  --negative: #b63442;
  --orange: #a76924;
  --soft-orange: #fff4e7;
  --brand-yellow: var(--accent);
  --brand-soft: var(--accent-soft);
  --brand-ink: var(--ink);
  --radius: 24px;
  --control-radius: 14px;
  --control-depth: none;
  --text-body: 16px;
  --text-meta: 13px;
  --space-section: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
  font-synthesis: none;
  color-scheme: light;
}

html { background: var(--paper); scrollbar-color: #c8cdd3 transparent; }
body { background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.6; letter-spacing: -.02em; }
h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.035em; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p,small,span,button,a { overflow-wrap: break-word; }
button:hover:not(:disabled),a:hover { filter: none; }
button:disabled { transform: none; }
.brand,.steps-brand { letter-spacing: -.055em; }
.brand-dot { color: var(--accent); }
.brand-highlight { color: var(--accent); background: transparent; font-style: normal; }
.card { padding: 28px; border: 0; background: var(--surface); border-radius: var(--radius); box-shadow: none; }
.card-heading { margin-bottom: 20px; }
.card-heading h2 { font-size: 21px; }
.card-heading p { font-size: 13px; line-height: 1.6; }
.category-icon,.home-secondary-icon,.asset-empty-icon,.goal-symbol { border: 0; background: var(--wash); border-radius: 14px; }
.tag,.tag.gray { background: var(--wash); color: var(--muted); font-weight: 500; }
.tag.orange { background: var(--soft-orange); color: var(--orange); }
.progress { height: 6px; background: var(--wash); }
.progress>span,.today-budget-progress>span { background: var(--accent); }
.empty { padding: 36px 12px; font-size: 14px; line-height: 1.7; }

/* Controls remain recognisable across sheets, lists, and full pages. */
.button {
  min-height: 52px; padding: 14px 20px; border: 1px solid transparent;
  border-radius: var(--control-radius); background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600; box-shadow: none;
}
.button:hover:not(:disabled) { background: var(--accent-hover); }
.button .icon { filter: brightness(0) invert(1); }
.button.secondary,.button.soft { border-color: transparent; background: var(--wash); color: var(--ink); box-shadow: none; }
.button.secondary:hover:not(:disabled),.button.soft:hover:not(:disabled) { background: #e9edf1; }
.button.secondary .icon,.button.soft .icon,.button.danger .icon { filter: none; }
.button.danger { border-color: transparent; background: #fff0f1; color: #b63442; }
.button.danger:hover:not(:disabled) { background: #fde5e8; }
.button:disabled,.google-button:disabled { border-color: transparent; background: #edf0f3; color: var(--muted); opacity: 1; }
.text-button { min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 500; }
.text-button:hover:not(:disabled) { color: var(--ink); }
.icon-button { min-width: 44px; min-height: 44px; border-radius: 12px; }
input:not([type=radio]):not([type=checkbox]),select,textarea,.form-field input,.form-field select {
  min-height: 52px; border: 1px solid transparent; border-radius: 12px;
  background: var(--wash); color: var(--ink); font-size: 16px;
}
input::placeholder,textarea::placeholder { color: var(--muted); }
input[type=checkbox],input[type=radio],progress { accent-color: var(--accent); }
.form-field label,.form-field>label,.form-field .between>label { font-weight: 500; }
.form-help { color: var(--muted); font-size: 13px; line-height: 1.6; }
.form-error { color: #b63442; }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.button:focus-visible { outline-color: #000; }
.button.apple-signin:focus-visible { outline-color: var(--muted); }
:is(input,select,textarea)[aria-invalid=true] { border-color: var(--negative); }

/* Desktop feels like a calm reading space, with a narrow navigation rail. */
.sidebar { width: 224px; padding: 36px 20px 24px; border-right: 0; background: #fff; }
.layout { margin-left: 224px; }
.layout,.main,.view,.home-overview,.home-shortcuts,.plan-grid,.asset-management-grid { min-width: 0; }
.brand-area { padding-inline: 16px; }
.brand-area .brand { font-size: 27px; }
.brand-area p { margin-top: 12px; color: var(--muted); }
.nav-caption { padding-top: 36px; font-size: 12px; letter-spacing: 0; font-weight: 500; }
.nav { gap: 6px; }
.nav-button { min-height: 52px; padding: 14px 16px; border-radius: 14px; color: var(--muted); font-size: 15px; font-weight: 500; }
.nav-button[aria-current=page],.nav-button[aria-current=page]:hover { background: var(--accent-soft); color: #066953; font-weight: 600; }
.nav-button:hover { background: var(--wash); }
.sidebar-note { border-top: 0; padding-top: 28px; }
.sidebar-note strong { color: #4e5968; font-size: 13px; }
.sidebar-note p,.sidebar-footer { font-size: 12px; }
.prototype-bar { padding-inline: 40px; min-height: 40px; background: transparent; border: 0; color: var(--muted); }
.prototype-bar button,.session-button { color: var(--muted); font-size: 12px; text-decoration: none; }
.main { max-width: 1120px; padding: 28px 40px 48px; }
.topbar,.native-app .topbar { align-items: center; margin-bottom: 26px; }
.topbar :is(h1,h2),.main .topbar :is(h1,h2),.native-app .topbar :is(h1,h2) { font-size: 28px; font-weight: 700; }
.topbar-subtitle { font-size: 14px; }
.topbar-actions .button,.native-app .topbar-actions .button { min-height: 44px; border-radius: 12px; }
.topbar-actions [data-action=add] { background: var(--accent); color: #fff; border-color: transparent; }
.topbar-actions [data-action=add] .icon { filter: brightness(0) invert(1); }
body[data-view=home] .topbar-actions [data-action=add] { background: #fff; color: var(--ink); }
body[data-view=home] .topbar-actions [data-action=add] .icon { filter: none; }
.profile-select { background: #fff; border: 0; }
.month-toolbar { border-bottom: 0; margin-bottom: 18px; padding-bottom: 0; }
.month-picker strong { color: #4e5968; font-size: 16px; }
.month-picker .icon-button { background: transparent; }
.footer { border: 0; padding-top: 12px; margin-top: 28px; font-size: 12px; color: var(--muted); }

/* Home opens with the current amount and a single full-width action. */
.home-overview { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin-bottom: 16px; padding: 30px 32px; border: 0; border-radius: var(--radius); background: #fff; }
.home-overview .home-money-summary { display: block; min-width: 0; padding: 0; border: 0; background: transparent; }
.home-overview .today-budget { width: 100%; border: 0; padding: 0; }
.home-overview .today-budget-heading>span { color: #4e5968; font-size: 15px; font-weight: 500; }
.home-overview .today-budget>strong { margin: 10px 0 20px; font-size: 44px; line-height: 1.2; letter-spacing: -.045em; font-weight: 700; }
.home-overview .today-budget>.today-budget-meta { max-width: 100%; }
.home-overview .today-actions { margin: 24px 0 0; }
.home-overview .today-actions .button { width: 100%; max-width: none; min-height: 54px; background: var(--accent); border-color: transparent; color: #fff; }
.home-overview .today-actions .button .icon { filter: brightness(0) invert(1); }
.home-overview .today-actions .button:hover { background: var(--accent-hover); }
.home-overview .today-budget-detail { margin-top: 4px; }
.home-overview .today-budget-detail>summary { min-height: 44px; padding-block: 8px; font-size: 13px; }
.today-budget-empty { font-size: 22px; }
.today-focus { border: 0; background: #fff; }
.today-focus .today-budget { border: 0; }
.today-focus-copy { border-color: var(--line); }
.today-focus .eyebrow,.today-focus-copy>p:not(.eyebrow),.today-budget small { color: var(--muted); }
.today-actions .button { color: #fff; border-color: transparent; }
.today-actions .button .icon { filter: brightness(0) invert(1); }
.home-shortcuts,.home-shortcuts.today-next { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 12px 0 24px; padding: 0; border: 0; }
.home-shortcut { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 84px; padding: 20px; border: 0; border-radius: 20px; background: #fff; text-align: left; color: var(--ink); }
.home-shortcut:hover { background: #fafbfc; }
.home-shortcut>.icon,.home-shortcut>[data-icon],.home-shortcut>.category-icon { flex-shrink: 0; width: 24px; height: 24px; }
.home-shortcut strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; }
.home-shortcut small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-shortcut>.icon:last-child { width: 18px; height: 18px; margin-left: auto; opacity: .5; }
.home-shortcuts .home-shortcut,.home-shortcuts .today-plan-link { display: flex; flex-direction: row; width: 100%; min-height: 68px; padding: 16px 24px; font-size: 15px; white-space: normal; }
.home-shortcut>span { min-width: 0; flex: 1; font-size: 15px; font-weight: 600; line-height: 1.5; }
.home-attention { margin: 16px 0; padding: 18px 20px; border: 0; border-radius: 18px; background: #fff4e7; color: #81531f; }
.home-attention p { font-size: 14px; line-height: 1.6; }
.home-attention .text-button { color: #81531f; }
.home-recent { margin-top: 24px; }
.home-recent .card-heading { margin-bottom: 4px; }
.home-secondary { margin-top: 12px; border: 0; border-radius: 20px; background: #fff; }
.home-secondary>summary { min-height: 76px; padding: 16px 24px; gap: 14px; }
.home-secondary>summary strong { font-size: 15px; }
.home-secondary>summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.home-secondary-icon { width: 40px; height: 40px; }
.home-secondary .today-schedule { margin: 0; padding-top: 0; border: 0; }
.today-schedule { border: 0; background: #fff; }
.today-schedule-end .text-button { min-height: 44px; }
.today-next { border-color: var(--line); }

/* Records use quiet dividers rather than a grid of bordered controls. */
.ledger-summary-strip { padding: 24px 28px; margin-bottom: 16px; border: 0; border-radius: var(--radius); background: #fff; gap: 24px; }
.ledger-summary-strip strong { font-size: 24px; }
.ledger-records { padding: 16px 28px 8px; }
.ledger-controls input,.ledger-controls select { background: var(--wash); border: 0; }
.transaction-row,.ledger-list .transaction-row { min-height: 80px; border-bottom-color: var(--line); }
.transaction-info strong,.ledger-list .transaction-info strong { font-size: 15px; }
.transaction-amount,.ledger-list .transaction-amount { font-size: 16px; font-weight: 600; }
.transaction-info small,.ledger-list .transaction-info small { color: var(--muted); font-size: 13px; }
.transaction-info .transaction-state { border: 0; padding: 2px 6px; background: var(--wash); color: #4e5968; font-size: 11px; }
.transaction-row .category-icon { width: 44px; height: 44px; background: var(--wash); }
.group-date { color: var(--muted); font-size: 13px; }
.filter,.asset-filters button,.policy-chip { min-height: 44px; border: 0; border-radius: 12px; background: #fff; color: #4e5968; }
.filter[aria-pressed=true],.asset-filters button[aria-pressed=true],.policy-chip[aria-pressed=true] { background: var(--accent-soft); border-color: transparent; color: #066953; }
.filter[aria-pressed=true] .icon { filter: none; }
.insight-card,.spend-preview,.achievement-rules { background: var(--wash); border-color: transparent; }
.member-calendar [aria-current=date] strong { background: var(--accent); }

/* Plans and assets preserve the amount before optional mechanics. */
.plan-overview { padding: 28px; }
.plan-overview>strong,.plan-overview .plan-amount,.plan-budget-amount { font-size: 40px; }
.plan-budget-meta { color: var(--muted); }
.plan-budget-meta strong { font-size: 17px; }
.plan-secondary { margin-top: 12px; border: 0; border-radius: 20px; background: #fff; }
.plan-secondary>summary { min-height: 72px; padding: 20px 24px; font-size: 15px; }
.plan-secondary>.plan-detail-body,.plan-secondary>.plan-primary-actions { padding: 0 24px 16px; }
.plan-secondary .recurring-card { padding: 0 24px 16px; }
.asset-empty-start { border: 0; background: #fff; border-radius: var(--radius); }
.asset-empty-start .button { color: #fff; border-color: transparent; }
.asset-empty-start .button .icon { filter: brightness(0) invert(1); }
#assets-view .asset-main-amount { font-size: 34px; margin-block: 10px; }
.asset-management-item { border: 0; }
.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms { margin-top: 16px; border-top: 1px solid var(--line); color: var(--ink); }
:is(.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms)>summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #4e5968; }
:is(.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms)>summary::-webkit-details-marker { display: none; }
:is(.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms)>summary::after { content: ''; flex-shrink: 0; width: 7px; height: 7px; margin-right: 5px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
:is(.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms)[open]>summary::after { transform: rotate(225deg); }
.asset-item-details .asset-actions,.asset-item-details .asset-page-actions { margin-top: 12px; }
#asset-savings-terms,#asset-opening { margin-top: 16px; border-top: 1px solid var(--line); }
#asset-savings-terms>summary,#asset-opening>summary { display: flex; align-items: center; min-height: 52px; padding: 14px 0; list-style: none; cursor: pointer; color: #4e5968; font-size: 14px; font-weight: 500; }
#asset-savings-terms>summary::-webkit-details-marker,#asset-opening>summary::-webkit-details-marker { display: none; }
#asset-savings-terms>summary::after,#asset-opening>summary::after { content: ''; width: 7px; height: 7px; margin: 0 5px 0 auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
#asset-savings-terms[open]>summary::after,#asset-opening[open]>summary::after { transform: rotate(225deg); }
.asset-registration,.asset-basis { border-color: var(--line); }
.card-bill { background: var(--wash); }

/* Welcome offers a restrained sample; account input stays easy to scan. */
#auth-shell { min-height: 100dvh; background: var(--paper); }
.auth-header { max-width: 1200px; padding: 36px 48px; }
.auth-header .brand { font-size: 29px; }
.auth-frame { max-width: 1140px; grid-template-columns: minmax(0,1fr) 440px; gap: 80px; padding: 24px 48px 64px; }
.auth-intro h2 { font-size: 48px; line-height: 1.3; letter-spacing: -.055em; }
.auth-intro .eyebrow { color: var(--accent); letter-spacing: .05em; font-size: 12px; }
.auth-intro-copy { max-width: 30ch; margin-top: 24px; font-size: 17px; line-height: 1.8; }
.auth-benefits { margin-top: 36px; gap: 24px; }
.auth-benefits .category-icon { width: 44px; height: 44px; border: 0; background: #e8edf0; }
.auth-benefits strong { font-size: 15px; }
.auth-benefits small { font-size: 13px; }
.auth-signature { margin-top: 32px; color: var(--muted); font-size: 13px; }
.auth-card { padding: 36px; border: 0; border-radius: 28px; background: #fff; box-shadow: none; }
.auth-card :is(h1,h2) { font-size: 32px; line-height: 1.35; }
.auth-card-copy { color: var(--muted); line-height: 1.7; }
.auth-step-row #auth-step,.auth-step-count { color: var(--muted); font-size: 12px; font-weight: 500; }
.auth-showcase,.auth-product-preview { background: var(--paper); padding: 24px; border-radius: 20px; }
.auth-showcase>strong,.auth-showcase .showcase-amount { font-size: 38px; }
.auth-showcase .text-button { border-color: #e6eaee; color: #4e5968; font-size: 13px; }
.auth-showcase .auth-sample-tag { background: #fff; color: var(--muted); font-size: 11px; padding: 4px 7px; }
.auth-showcase-progress>span { background: var(--accent); }
.auth-card .google-button { min-height: 54px; background: #fff; border: 1px solid #e5e8eb; border-radius: 14px; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500; }
.auth-card .google-button:hover:not(:disabled) { background: var(--wash); }
.auth-card .google-button:disabled { color: #8b95a1; background: var(--wash); border-color: transparent; }
.auth-card .auth-money-example { border: 0; background: var(--wash); }
.auth-card [data-auth=guest] { background: var(--accent); color: #fff; border-color: transparent; }
/* :not(:disabled) matches the weight of '.button.secondary:hover:not(:disabled)'; without it the grey wins under white text. */
.auth-card [data-auth=guest]:hover:not(:disabled) { background: var(--accent-hover); }
.auth-card [data-auth=guest] .icon { filter: brightness(0) invert(1); }
.auth-google-note,.auth-card-footnote,.auth-form-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-divider,.auth-divider span { background: #fff; }

/* Dialog geometry respects the existing native keyboard and dock behaviour. */
dialog { border: 0; border-radius: 26px; background: #fff; box-shadow: 0 24px 80px #191f2824; }
dialog::backdrop { background: #191f2873; backdrop-filter: blur(3px); }
dialog .dialog-header { border-bottom-color: var(--line); }
dialog .dialog-header h2 { font-size: 21px; }
#entry-form .entry-type { background: var(--wash); }
#entry-form .entry-type label { color: var(--muted); font-weight: 500; }
#entry-form .entry-type label:has(input:checked) { box-shadow: none; color: var(--ink); }
.guidance-overview,.guidance-sample-label { background: var(--accent-soft); }
.sheet-discard,.native-app .sheet-discard:not([hidden]) { background: #fff4e7; }
.toast { background: var(--ink); border: 0; border-radius: 16px; }
.toast-action { color: #80e1c1; }

/* Settings and community follow the same generous list rhythm. */
.feature-directory { gap: 24px; }
.more-section-list { padding: 0 24px; border-radius: 20px; }
.feature-directory button,.feature-directory a { min-height: 78px; border-color: var(--line); }
.feature-directory button:hover,.feature-directory a:hover { color: var(--accent); }
.social-person,.social-goal,.social-notification,.frugal-member { border: 0; border-radius: 18px; background: var(--wash); }
.social-tabs button { background: var(--wash); font-weight: 500; }
.social-tabs [aria-current=page] { background: var(--accent-soft); color: #066953; }
.social-notification.unread { background: var(--accent-soft); border-left: 0; }
.social-reactions button,.frugal-reactions button { border: 0; background: #fff; }
.social-reactions [aria-pressed=true],.frugal-reactions [aria-pressed=true] { background: var(--accent-soft); color: #066953; }
.achievement-badge,.achievement-next { border: 0; background: var(--wash); }
.achievement-badge.is-earned { background: var(--accent-soft); }
.frugal-shell .card { border: 0; }
.frugal-shell .frugal-back { border: 0; }
.frugal-shell #room-message:not(:empty),.native-app #native-notice { background: #fff4e7; color: #81531f; }

@media (min-width: 1000px) {
  body[data-view=home] .main { max-width: 920px; }
  .home-overview { padding: 36px; }
  .home-overview .today-budget>strong { font-size: 48px; }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .sidebar { width: 192px; padding-inline: 12px; }
  .layout { margin-left: 192px; }
  .main { padding-inline: 28px; }
  .prototype-bar { padding-inline: 28px; }
  .auth-frame { gap: 40px; grid-template-columns: minmax(0,1fr) 400px; padding-inline: 32px; }
  .auth-intro h2 { font-size: 40px; }
  .auth-card { padding: 30px; }
}

@media (max-width: 760px) {
  .sidebar { display: none; }
  .layout { margin-left: 0; }
  .main,.native-app .main { padding: 22px 20px calc(112px + var(--app-safe-bottom)); }
  .prototype-bar { min-height: 40px; padding: 6px 20px; font-size: 12px; }
  .prototype-bar button,.prototype-bar .session-button { min-width: 44px; font-size: 12px; }
  .topbar,.native-app .topbar { margin-bottom: 22px; gap: 12px; }
  /* With large system text the actions move under the title instead of squeezing
     it to two characters a line or running off the screen. */
  .topbar { flex-wrap: wrap; }
  .topbar-actions { max-width: 100%; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .topbar :is(h1,h2),.main .topbar :is(h1,h2),.native-app .topbar :is(h1,h2) { font-size: 26px; }
  .topbar-actions .button,.native-app .topbar-actions .button { min-height: 44px; font-size: 13px; }
  .card { padding: 24px; border-radius: 22px; }
  .home-overview { padding: 26px 24px; border-radius: 24px; margin-bottom: 12px; }
  .home-overview .today-budget { display: flex; align-items: flex-start; padding: 0; border: 0; }
  .home-overview .today-budget>* { grid-column: auto; grid-row: auto; }
  .home-overview .today-budget>strong { font-size: 38px; margin: 10px 0 18px; }
  .home-overview .today-budget-meta { font-size: 12px; gap: 8px; }
  .home-overview .today-actions { margin-top: 20px; }
  .home-overview .today-actions .button { min-height: 52px; }
  .home-shortcuts,.home-shortcuts.today-next { gap: 10px; margin: 12px 0 24px; }
  .home-shortcut { flex-wrap: nowrap; gap: 12px; padding: 16px 20px; min-height: 68px; border-radius: 20px; }
  .home-shortcut strong { font-size: 14px; }
  .home-shortcuts .today-plan-link { min-height: 68px; padding: 16px 20px; }
  .home-shortcut>span { font-size: 14px; }
  .home-shortcut small { font-size: 12px; }
  .home-shortcut>.icon:last-child { display: block; }
  .home-secondary>summary { padding: 16px 20px; }
  .home-secondary>summary small { font-size: 12px; }
  .home-recent { margin-top: 24px; }
  .transaction-row,.ledger-list .transaction-row { gap: 10px; min-height: 78px; }
  .transaction-info strong,.ledger-list .transaction-info strong { font-size: 15px; }
  .transaction-info small,.ledger-list .transaction-info small { font-size: 12px; }
  .transaction-amount,.ledger-list .transaction-amount { font-size: 15px; }
  .transaction-date { font-size: 12px; }
  .transaction-row .category-icon { width: 40px; height: 40px; }
  .ledger-summary-strip { padding: 22px 20px; gap: 14px; border-radius: 22px; }
  .ledger-summary-strip strong { font-size: 18px; }
  .ledger-summary-strip span,.ledger-summary-strip small { font-size: 12px; }
  .ledger-records { padding: 12px 20px 4px; }
  .ledger-controls select { font-size: 14px; min-height: 48px; }
  .plan-overview { padding: 24px; }
  .plan-overview>strong,.plan-overview .plan-amount,.plan-budget-amount { font-size: 36px; }
  .plan-secondary>summary { padding-inline: 20px; }
  .plan-secondary>.plan-detail-body,.plan-secondary>.plan-primary-actions,.plan-secondary .recurring-card { padding-inline: 20px; }
  #assets-view .asset-main-amount { font-size: 32px; }
  #mobile-nav,.native-app #mobile-nav {
    display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
    position: fixed; inset: auto 0 0; z-index: 100;
    min-height: calc(76px + var(--app-safe-bottom)); height: auto;
    padding: 8px 10px calc(8px + var(--app-safe-bottom)); gap: 4px;
    background: #fffffffa; border-top: 1px solid #edf0f3; box-shadow: none;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  #mobile-nav button,.native-app #mobile-nav button { min-height: 58px; gap: 4px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; }
  #mobile-nav button>span { font-size: 12px; font-weight: 500; }
  #mobile-nav .icon { width: 23px; height: 23px; opacity: .65; margin: 2px 0; }
  #mobile-nav button[aria-current=page],.native-app #mobile-nav button[aria-current=page] { background: transparent; color: var(--ink); }
  #mobile-nav button[aria-current=page]>span { font-weight: 600; }
  #mobile-nav button[aria-current=page]::before { content: none; }
  #mobile-nav button[aria-current=page] .icon { background: transparent; border-radius: 0; box-shadow: none; opacity: 1; }
  .native-app.keyboard-open #mobile-nav { display: none; }
  #auth-shell .auth-header,.native-app #auth-shell .auth-header { padding: 28px 24px 14px; }
  #auth-shell .auth-frame,.native-app #auth-shell .auth-frame { display: block; max-width: 480px; min-height: 0; padding: 20px 24px calc(36px + var(--app-safe-bottom)); }
  #auth-shell .auth-card,.native-app #auth-shell .auth-card { padding: 0; background: transparent; border: 0; border-radius: 0; }
  .auth-intro { display: none; }
  #auth-welcome :is(h1,h2),.native-app #auth-welcome :is(h1,h2) { font-size: 32px; line-height: 1.35; margin: 8px 0 18px; }
  .auth-card-copy,.native-app .auth-card-copy { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
  .auth-showcase,.auth-product-preview { padding: 24px; background: #fff; margin: 24px 0; border-radius: 22px; }
  .auth-showcase>strong,.auth-showcase .showcase-amount { font-size: 38px; }
  .auth-card .google-button { background: #fff; min-height: 54px; }
  .auth-card [data-auth=guest] { margin-top: 16px; min-height: 54px; }
  .auth-divider,.auth-divider span { background: var(--paper); }
  .auth-step-row { margin-bottom: 20px; }
  dialog .dialog-header h2 { font-size: 20px; }
  #edit-dialog:not(.native-sheet) { border-radius: 26px 26px 0 0; }
  .native-app dialog[open]:not(#import-dialog):not(#native-age-dialog) { border-radius: 26px 26px 0 0; }
  .more-section-list { padding-inline: 20px; }
  .feature-directory { gap: 24px; }
  .toast { bottom: calc(92px + var(--app-safe-bottom)); }
  .footer { font-size: 11px; line-height: 1.7; }
}

@media (max-width: 360px) {
  .main,.native-app .main { padding-inline: 16px; }
  .card,.home-overview { padding-inline: 20px; }
  .home-overview .today-budget>strong { font-size: 34px; }
  .home-shortcut { padding: 16px; }
  .home-shortcut strong { font-size: 13px; }
  .ledger-summary-strip { padding-inline: 16px; gap: 10px; }
  .ledger-summary-strip strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 2026-10-14 focus pass: one disclosure marker everywhere, quieter chrome,
   and denser lists so the useful number is reached with less scrolling. */
:where(details>summary) { list-style: none; }
:where(details>summary)::-webkit-details-marker { display: none; }
:where(details:not(.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms,#asset-savings-terms,#asset-opening)>summary:not(:has(img,svg,[data-icon])))::after {
  content: ''; display: inline-block; flex-shrink: 0; width: 7px; height: 7px; margin-left: 10px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .55;
  vertical-align: 3px; transform: rotate(45deg); transition: transform .2s ease;
}
:where(details[open]:not(.asset-item-details,.asset-cash-summary,.asset-registration-options,.asset-savings-terms,#asset-savings-terms,#asset-opening)>summary:not(:has(img,svg,[data-icon])))::after { vertical-align: 0; transform: rotate(225deg); }

/* Saved state is announced while saving or on failure, not while idle. */
#save-status:empty { display: none; }
.prototype-bar { justify-content: flex-end; }
.prototype-bar:has(#save-status:not(:empty)) { justify-content: space-between; }
/* A member name is shown whole or ends with an ellipsis, never clipped. */
.prototype-actions .session-button { display: inline-block; max-width: min(60vw, 240px); line-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-note,.sidebar-footer { display: none; }

/* Attention keeps its colour without a second padded box around the summary. */
.home-secondary.home-attention { margin: 12px 0 0; padding: 0; background: #fff; color: inherit; }
.home-secondary.home-attention>summary strong { color: #81531f; }

.feature-directory button,.feature-directory a { min-height: 56px; padding-block: 14px; }

/* Asset cards: one name, one amount, one action. */
.asset-management-item .asset-main-amount { margin-top: 4px; }
/* A valuation date sits under the amount so large figures never break inside the date. */
.asset-figure-sep { display: none; }
.asset-figure-note { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.asset-management-item .card-heading { margin-bottom: 8px; }
@media (max-width: 760px) {
  #assets-view .asset-management-item .asset-main-amount { font-size: 26px; }
  .asset-management-item { padding: 20px 22px; }
}

/* Loan interest: month, echo bar, amount as text. */
.loan-interest { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6e8df; }
.loan-interest h4 { margin: 0; font-size: 15px; }
.loan-interest-compare { margin: 4px 0 10px; }
.loan-interest-months { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.loan-interest-months li { display: grid; grid-template-columns: 4.5em minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 28px; }
.loan-interest-months small { color: #646b5d; font-size: 11px; }
.loan-interest-months svg { display: block; width: 100%; height: 8px; }
.loan-interest-months strong { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.loan-interest-track { fill: #eff0e9; }
.loan-interest-fill { fill: #809964; }
.loan-interest-current .loan-interest-fill { fill: #49653e; }
.feature-directory a>span.more-hint[hidden] { display: none; }

/* A saved cash plan on the today home: three facts from the member's own entry. */
.home-cash-plan { margin: 12px 0 24px; padding: 20px 24px; border-radius: 20px; background: #fff; }
.home-cash-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-cash-plan-heading h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.home-cash-plan-heading .text-button { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.home-cash-plan-heading .text-button .icon { width: 16px; height: 16px; }
.home-cash-plan-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 12px 0 0; }
.home-cash-plan-metrics>div { min-width: 0; }
.home-cash-plan-metrics dt { color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-cash-plan-metrics dd { margin: 4px 0 0; min-width: 0; }
.home-cash-plan-metrics strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.home-cash-plan-metrics small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.home-cash-plan [data-plan-short=true],.home-cash-plan [data-plan-short=true]+small { color: var(--negative); }
.home-cash-plan>.form-help { margin: 12px 0 0; font-size: 12px; }
.guidance-save { margin-top: 12px; }
.guidance-saved { margin: 4px 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; line-height: 1.6; }
@media (max-width: 760px) {
  .home-cash-plan { padding: 16px 20px; }
  .home-cash-plan-metrics { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 8px; }
  .home-cash-plan-metrics>div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .home-cash-plan-metrics>div:first-child { border-top: 0; }
  .home-cash-plan-metrics dd { margin: 0; text-align: right; }
  .home-cash-plan-metrics strong { font-size: 17px; }
}

/* This week's filled days: records or no-spend checks. Quiet progress, no warnings. */
.home-habit { margin: 12px 0 24px; padding: 18px 24px; border-radius: 20px; background: #fff; }
.home-habit-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.home-habit-heading h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.home-habit-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.habit-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.habit-day { display: grid; place-items: center; aspect-ratio: 1; max-width: 44px; width: 100%; margin: 0 auto; border-radius: 50%; background: var(--wash); color: var(--muted); font-size: 13px; font-weight: 600; }
.habit-day.is-filled { background: var(--accent); color: #fff; }
.habit-day.is-no-spend { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.habit-day.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: #9aa3ad; }
.habit-day.is-today:not(.is-filled):not(.is-no-spend) { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.habit-today { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.habit-today.is-closed { color: var(--accent); font-weight: 600; }
.habit-today.is-closed .text-button { font-weight: 500; }
.habit-check { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.habit-today .text-button,.day-no-spend { min-height: 44px; }
.day-no-spend { display: block; margin: 0 0 8px; }
.member-calendar .calendar-amounts .calendar-no-spend { display: inline-block; padding: 1px 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 760px) {
  .home-habit { padding: 16px 20px; }
  .habit-week { gap: 4px; }
}

/* Re-record a frequent expense: chips under the amount question, never on the home screen. */
.entry-templates { margin: 16px 0 0; }
.entry-templates>p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.entry-template-list { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-template { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.entry-template:hover { border-color: var(--accent); }
.entry-template:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entry-template .icon { width: 16px; height: 16px; flex-shrink: 0; }
.entry-template span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-template b { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.entry-no-spend { margin-top: 12px; }

.habit-share { min-height: 44px; margin-left: auto; }
.habit-card-preview { margin: 0 auto 12px; max-width: 270px; }
.habit-card-preview img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.habit-card-actions { display: grid; gap: 8px; margin-top: 16px; }
.habit-card-actions .button { width: 100%; text-align: center; text-decoration: none; }
/* No long-press photo save inside the app: iOS would need a photo permission the app does not declare. */
.native-app .habit-card-preview img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* 024: the choices above a card preview. They wrap at 320px and at 200% text. */
.card-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: -4px 0 8px; }
.card-amount { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.card-amount input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.card-amount:only-child { margin-left: 0; }
/* Kind and ratio: one full-width segmented row each, under the back link and the amount box. */
.card-choices { order: 1; flex: 1 1 100%; display: flex; gap: 2px; margin-top: 6px; padding: 3px; border-radius: 14px; background: var(--wash); }
.card-choice { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 10px; border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.3; }
.card-choice[aria-pressed=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px #191f2814; }

.export-records>p { margin: 0 0 12px; line-height: 1.6; }
.export-records .button { margin-top: 8px; }

.amount-visibility { min-height: 40px; padding-inline: 12px; font-size: 13px; }

.home-recap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 12px 0 24px; padding: 18px 24px; border-radius: 20px; background: var(--accent-soft); }
.home-recap h2 { margin: 2px 0; font-size: 16px; }
.home-recap p { margin: 0; color: var(--muted); font-size: 13px; }
.year-recap-title { margin: 4px 0 16px; color: var(--accent); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.year-recap dl { display: grid; gap: 0; margin: 0 0 12px; }
.year-recap dl>div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.year-recap dt { color: var(--muted); font-size: 14px; }
.year-recap dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.auth-provider-warning { padding: 12px 14px; border-radius: 12px; background: var(--soft-orange); color: var(--orange); font-weight: 600; }

/* Design review 2026-10-15: defects found across phone, tablet and desktop. */
/* Amounts stay whole on one line when they fit; very large text still wraps instead of overflowing. */
.ledger-summary-strip strong { word-break: keep-all; overflow-wrap: break-word; }
.transaction-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-budget:has(>strong[data-over-budget="true"]) .today-budget-progress>span { background: var(--negative); }
.home-attention .today-schedule .text-button:not([data-action="today-recurring-complete"]) { color: var(--muted); }
.month-toolbar>.ledger-tools { margin-bottom: 0; }
:is(.asset-warnings,.asset-breakdown,.asset-legacy-summary)>summary { display: flex; align-items: center; min-height: 52px; }
:is(.asset-warnings,.asset-breakdown,.asset-legacy-summary)>summary::after { margin-left: auto; margin-right: 5px; }
.asset-breakdown dl>div { align-items: baseline; }
.asset-group[data-count="1"] .asset-management-grid { grid-template-columns: minmax(0,1fr); }
.question-flow .form-field>.between>label { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.prototype-actions .session-button { min-height: 44px; margin-block: -6px; line-height: 44px; }
#previous-month,#next-month { min-width: 44px; }
.card-heading>.text-button { min-width: 44px; justify-content: flex-end; }
/* Titles, results and errors take script focus (tabindex=-1, also set by
   motion.reveal) only to be announced. Browsers treat that as :focus-visible on
   first load or after typing, so these non-controls never draw a ring. */
[tabindex="-1"]:focus { outline: none; }
@media (max-width: 760px) {
  #plan-goals>.goal-card { padding-inline: 20px; }
  /* Summary rows wrap item by item rather than splitting a number. */
  .ledger-summary-strip { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  .ledger-summary-strip>div { flex: 1 1 auto; min-width: 0; }
  /* Short web phones keep the sheet title and close button in view. */
  #edit-dialog:not(.native-sheet)>.dialog-header { position: sticky; top: 0; z-index: 4; background: #fff; }
}
@media (min-width: 761px) {
  :is(#edit-dialog,#info-dialog,#subscription-dialog,#category-dialog):not(.native-sheet)>.dialog-header { padding: 0 0 18px; margin-bottom: 20px; }
}
/* The 192px tablet rail has room for its labels. */
@media (min-width: 761px) and (max-width: 1000px) {
  .nav-button { justify-content: flex-start; padding: 14px 16px; }
  .nav-button>span { display: inline; }
  .brand-area { text-align: left; padding-inline: 16px; }
}

/* Calendar-first ledger (2026-10-16): 내역 opens on a month grid with the
   picked day's records underneath; 목록 keeps the searchable list. */
.ledger-mode { grid-column: 2; grid-row: 1; display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--wash); }
.ledger-mode>button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ledger-mode>button[aria-pressed=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px #191f2814; }
.ledger-mode .icon { width: 16px; height: 16px; }
.ledger-records:not(.ledger-calendar) .ledger-toolbar { align-items: center; margin-bottom: 4px; }
.ledger-calendar { padding: 16px 20px 12px; }
.ledger-calendar .ledger-toolbar { align-items: center; margin-bottom: 12px; }
.ledger-calendar .calendar-key { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 12px; margin: 0; color: var(--muted); font-size: 12px; }
.ledger-calendar .member-calendar { gap: 0; margin: 0; }
.ledger-calendar .calendar-weekday { padding: 0 0 8px; background: none; color: var(--muted); font-size: 12px; text-align: center; }
.ledger-calendar .member-calendar>button,.ledger-calendar .calendar-blank { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 84px; padding: 6px 2px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; text-align: center; }
.ledger-calendar .member-calendar>button:hover { background: var(--wash); }
.ledger-calendar .member-calendar>button[aria-pressed=true] { border-radius: 12px; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.ledger-calendar .member-calendar>button>strong { display: grid; place-items: center; width: 2em; height: 2em; min-height: 0; margin: 0 0 2px; border-radius: 50%; color: var(--ink); font-size: 13px; font-weight: 600; }
.ledger-calendar .calendar-weekday[data-weekday="0"],.ledger-calendar .member-calendar>button[data-weekday="0"]>strong { color: var(--negative); }
.ledger-calendar .calendar-weekday[data-weekday="6"],.ledger-calendar .member-calendar>button[data-weekday="6"]>strong { color: #2f62b3; }
.ledger-calendar .member-calendar>button[aria-current=date]>strong { background: var(--accent); color: #fff; }
.ledger-calendar .member-calendar .calendar-amounts { display: grid; gap: 1px; width: 100%; margin: 0; }
.ledger-calendar .member-calendar .calendar-amounts small { margin: 0; overflow: hidden; font-size: 11px; line-height: 1.35; letter-spacing: -.02em; text-overflow: clip; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger-calendar .calendar-amounts .income,.ledger-calendar .calendar-key .income { color: var(--positive); }
.ledger-calendar .calendar-amounts .expense,.ledger-calendar .calendar-key .expense { color: var(--ink); }
.ledger-calendar .calendar-amounts .transfer,.ledger-calendar .calendar-key .transfer { color: var(--muted); }
.ledger-calendar .member-calendar .calendar-amounts .calendar-forecast { padding: 0; border: 0; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 2px; }
.ledger-calendar .member-calendar .calendar-amounts .calendar-no-spend { justify-self: center; padding: 0 4px; font-size: 10px; }
.ledger-day { margin-top: 16px; padding: 20px 24px 24px; }
.ledger-day .card-heading { margin-bottom: 6px; }
.ledger-day h2 { font-size: 17px; }
.ledger-day-totals { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 13px; }
.ledger-day-totals b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-day-totals .expense { color: var(--ink); }
.ledger-day-totals .income { color: var(--positive); }
.ledger-day .transaction-list { margin: 8px 0 16px; }
.ledger-day .transaction-list>.empty { padding: 20px 12px; }
.ledger-day .day-no-spend { margin: 0 0 12px; }
/* 더보기 > 이용 안내·개인정보·문의: three stacked document buttons. */
.service-documents { display: grid; gap: 8px; }
.home-calendar-link { display: grid; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin-top: 12px; padding: 16px 24px; border: 0; border-radius: 20px; background: #fff; color: inherit; text-align: left; }
.home-calendar-link strong { display: block; font-size: 15px; line-height: 1.5; font-weight: 600; }
.home-calendar-link small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-calendar-link>.icon:last-child { width: 18px; height: 18px; opacity: .65; }
@media (max-width: 760px) {
  .ledger-calendar { padding: 12px 10px 8px; }
  .ledger-calendar .ledger-toolbar { padding-inline: 6px; }
  .ledger-calendar .calendar-key { font-size: 12px; gap: 2px 8px; }
  .ledger-mode>button { padding: 0 12px; font-size: 13px; }
  .ledger-calendar .member-calendar>button,.ledger-calendar .calendar-blank { min-height: 62px; padding: 4px 1px 6px; }
  .ledger-calendar .member-calendar>button>strong { width: 2em; height: 2em; font-size: 12px; }
  .ledger-calendar .member-calendar .calendar-amounts small { font-size: 10px; letter-spacing: -.04em; }
  .ledger-day { padding: 18px 20px 20px; }
  .home-calendar-link { padding: 16px 20px; }
  .home-calendar-link small { font-size: 12px; }
}
@media (min-width: 1100px) {
  .ledger-calendar { padding: 20px 28px 16px; }
  .ledger-calendar .member-calendar>button,.ledger-calendar .calendar-blank { min-height: 96px; }
  .ledger-calendar .member-calendar .calendar-amounts small { font-size: 12px; }
  .ledger-day { padding: 22px 28px 26px; }
  .ledger-day>.button.wide { width: auto; min-width: 200px; padding-inline: 24px; }
}

/* 2026-10-16 mobile and app pass: secondary screens reach the same touch size as
   the main tabs. Disclosure rows that were 21-42px tall become full rows. */
.adjustment-rules>summary,.reflection-entry>summary { display: flex; align-items: center; min-height: 44px; padding-block: 4px; }
.dialog-actions .text-button { min-width: 44px; }
/* On the warning surface the risky discard button keeps a visible white edge. */
.sheet-discard .button.danger { background: #fff; }
@media (max-width: 760px) {
  /* Phone web dialogs open from the bottom like the record sheet and the app,
     so the close button, content and actions sit in the same places everywhere. */
  html:not(.native-app) :is(#info-dialog,#category-dialog,#subscription-dialog,#sharing-dialog,#social-dialog)[open] {
    position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 94dvh;
    border: 0; border-radius: 26px 26px 0 0; padding-bottom: var(--app-safe-bottom);
  }
  html:not(.native-app) #info-dialog.policy-dialog[open] { width: 100% !important; }
  /* As in the record sheet, the title and close button sit 20px from the edge
     and stay at the top while a long sheet scrolls. */
  html:not(.native-app) :is(#info-dialog,#category-dialog,#subscription-dialog)[open] { padding: 0 20px calc(20px + var(--app-safe-bottom)); scroll-padding-top: 84px; }
  html:not(.native-app) :is(#info-dialog,#category-dialog,#subscription-dialog)>.dialog-header { position: sticky; top: 0; z-index: 4; margin-top: 0; padding: 18px 0; background: inherit; }
}