/* DoulaFlow interactive demos: the shell and the app look.
 *
 * Two layers in one file.
 *
 * 1. The SHELL (.demo-*, .g-*): the top bar, the guide panel, the completion screen, the
 *    highlight ring and the toast. These use the SITE's tokens (css/tokens.css), because
 *    the shell is part of mydoulaflow.com, not of the product.
 *
 * 2. The APP FRAME (.dfapp, .a-*): a faithful copy of the product's look. The values are
 *    the app's own brand variables, copied from doulaflow/src/app/globals.css on
 *    21 September 2026 (wine #814256, cream #F2E9E1, border #e8ddd2, text #3a2228 and so
 *    on), and the layout mirrors the Tailwind classes on each screen. If the app's palette
 *    changes, change the --a-* block below; nothing else in the frame carries a colour.
 *
 * Every rule in layer 2 is scoped under .dfapp so it cannot leak into the shell, and every
 * rule in layer 1 is scoped under body.demo-page so site.css cannot restyle the frame.
 */

@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/DMSerifDisplay.woff2') format('woff2'); }

/* ------------------------------------------------------------------ 1. the shell */
body.demo-page { font-size: 15px; line-height: 1.5; background: var(--ground); overflow: hidden; }
body.demo-page.demo-scroll { overflow: auto; }
.demo-top { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: var(--ground); }
.demo-top-logo img { height: 20px; width: auto; display: block; }
.demo-top-label { font-size: 13px; color: var(--text-3); display: flex; gap: 10px; align-items: center; min-width: 0; }
.demo-top-label span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-pill { background: var(--demo); color: var(--ground); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.demo-top-exit { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; }
.demo-top-exit:hover { background: var(--surface); }
.demo-top-exit .ico { width: 15px; height: 15px; }

.demo-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: calc(100vh - 52px); height: calc(100dvh - 52px); }
.demo-frame { position: relative; overflow: hidden; background: var(--surface-2); padding: 18px; min-width: 0; }
.demo-guide { border-left: 1px solid var(--rule); background: var(--ground); display: flex; flex-direction: column; overflow-y: auto; }

.g-bar { display: none; }
.g-body { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.g-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-3); }
.g-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--text-2); }
.g-progress { display: flex; flex-direction: column; gap: 6px; }
.g-progress span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.g-track { height: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.g-track div { height: 100%; background: var(--rust); border-radius: 999px; transition: width .3s; }

/* The step card. This is the one place on the site that is allowed to be loud: the visitor has
   to know where to click next without hunting, so it is white on cream, edged in rust, with
   the instruction in large type and the key words in rust. */
.g-card { background: #fff; border: 2px solid var(--rust); border-radius: 14px; padding: 16px 18px 18px; box-shadow: 0 8px 28px rgba(188, 87, 39, .18); display: flex; flex-direction: column; gap: 10px; }
.g-step { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; outline: none; color: var(--text); }
.g-step .g-n { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--rust); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 700; margin-right: 8px; vertical-align: 3px; }
.g-do { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); display: flex; align-items: center; gap: 6px; }
.g-do .ico { width: 15px; height: 15px; }
.g-instr { font-size: 17.5px; line-height: 1.5; color: var(--text); font-weight: 500; }
.g-instr b, .g-instr strong { font-weight: 700; color: var(--accent); background: #FCEBDD; padding: 0 5px; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.g-instr kbd { font: inherit; font-weight: 700; }
.g-result { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; font-weight: 500; color: #1F4A26; background: #DDF0DE; border: 2px solid #4C9A57; padding: 12px 14px; border-radius: 10px; }
.g-result .ico { width: 22px; height: 22px; flex-shrink: 0; color: #2E7D3A; margin-top: 1px; }
.g-why { font-size: 14px; line-height: 1.5; color: var(--text-2); background: var(--surface-2); padding: 0 12px; border-radius: 10px; }
.g-why summary { cursor: pointer; padding: 10px 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); font-weight: 700; list-style: none; display: flex; align-items: center; gap: 6px; }
.g-why summary::-webkit-details-marker { display: none; }
.g-why summary::after { content: '+'; margin-left: auto; font-size: 16px; }
.g-why[open] summary::after { content: '\2013'; }
.g-why p { margin: 0; padding: 0 0 12px; }
.g-ctl { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 2px; }
.g-btn { font-family: var(--font-body); font-size: 16px; font-weight: 600; border-radius: 50px; padding: 13px 18px; cursor: pointer; border: 2px solid var(--border); background: #fff; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s, border-color .15s; }
.g-btn .ico { width: 18px; height: 18px; }
.g-btn:hover:not(:disabled) { background: var(--surface); }
.g-btn:disabled { opacity: .45; cursor: not-allowed; }
.g-btn-next { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 17px; }
.g-btn-next:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.g-btn-next:disabled { background: var(--surface); border-color: var(--surface); color: var(--text-3); opacity: 1; }
.g-btn-next.g-ready { background: var(--rust); border-color: var(--rust); animation: gpulse 1.4s ease-in-out infinite; }
.g-btn-next.g-ready:hover { background: var(--accent); border-color: var(--accent); }
.g-links { display: flex; gap: 18px; font-size: 14px; color: var(--text-2); }
.g-links button, .g-links a { font: inherit; font-weight: 500; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.g-links button:hover, .g-links a:hover { color: var(--accent); }
.g-links .ico { width: 15px; height: 15px; }
.g-keys { font-size: 12.5px; color: var(--text-3); }
.g-phone-only { display: none; }
.g-keys kbd { font-family: var(--font-body); font-size: 11px; border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; background: var(--surface-2); }

/* completion. site.css does not define the primary button (each page carries its own copy),
   so the demo carries the same one as the feature pages. */
body.demo-page .df-btn-primary { background: var(--accent); color: var(--ground); border: none; padding: 13px 26px; border-radius: 50px; font-family: var(--font-body); font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
body.demo-page .df-btn-primary:hover { background: var(--accent-dark); }
.g-done-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.g-done-list li { display: flex; gap: 8px; align-items: flex-start; }
.g-done-list .ico { width: 17px; height: 17px; color: #3F6B45; flex-shrink: 0; margin-top: 2px; }
.g-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.g-cta .df-btn-primary { text-align: center; }
.g-assure { font-size: 12.5px; color: var(--text-3); text-align: center; }
.demo-done { position: absolute; inset: 18px; display: flex; align-items: center; justify-content: center; background: rgba(74, 57, 29, .28); border-radius: 12px; z-index: 30; padding: 16px; }
.demo-done-card { background: var(--ground); border: 1px solid var(--rule); border-radius: 14px; padding: 28px 30px; max-width: 460px; width: 100%; box-shadow: 0 24px 60px rgba(74, 57, 29, .25); text-align: center; }
.demo-done-card .ico-big { width: 44px; height: 44px; color: #3F6B45; margin: 0 auto 10px; display: block; }
.demo-done-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
.demo-done-card p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
.demo-done-card .g-cta { align-items: stretch; }
.demo-done-card .g-links { justify-content: center; margin-top: 14px; }

/* the highlight ring, the pointer tag and the lock. Rust, not plum: plum vanished on the
   app's wine buttons, and the ring has to be the loudest thing in the frame. */
.df-hl { outline: 4px solid var(--rust) !important; outline-offset: 4px; box-shadow: 0 0 0 10px rgba(188, 87, 39, .28) !important; animation: dfpulse 1.2s ease-in-out infinite; position: relative; z-index: 6; }
.a-switch.df-hl, .a-nav a.df-hl { outline-offset: 3px; }
.df-pointer { position: absolute; z-index: 40; display: inline-flex; align-items: center; gap: 5px; background: var(--rust); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 5px 10px 5px 8px; border-radius: 999px; box-shadow: 0 6px 18px rgba(188, 87, 39, .45); pointer-events: none; white-space: nowrap; transform: translateY(-50%); animation: dfnudge 1.2s ease-in-out infinite; }
.df-pointer .ico { width: 15px; height: 15px; }
.df-pointer[hidden] { display: none; }
.df-locked { cursor: not-allowed; }
@keyframes dfpulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(188, 87, 39, .30); } 50% { box-shadow: 0 0 0 14px rgba(188, 87, 39, .16); } }
@keyframes dfnudge { 0%, 100% { margin-left: 0; } 50% { margin-left: -6px; } }
@keyframes gpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(188, 87, 39, .55); } 50% { box-shadow: 0 0 0 9px rgba(188, 87, 39, 0); } }
@media (prefers-reduced-motion: reduce) { .df-hl, .df-pointer, .g-btn-next.g-ready { animation: none; } .g-track div { transition: none; } }

.demo-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); background: var(--text); color: var(--ground); font-size: 13.5px; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: min(92vw, 420px); text-align: center; }
.demo-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.demo-loading { padding: 40px; color: var(--text-3); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* narrow: the guide docks to the bottom and can fold to one line */
@media (max-width: 999px) {
  .demo-body { grid-template-columns: 1fr; height: auto; }
  .demo-frame { height: calc(100vh - 52px - var(--guide-h, 240px)); height: calc(100dvh - 52px - var(--guide-h, 240px)); padding: 10px; }
  .demo-guide { position: fixed; left: 0; right: 0; bottom: 0; border-left: 0; border-top: 1px solid var(--rule); max-height: 52vh; z-index: 40; box-shadow: 0 -10px 30px rgba(74, 57, 29, .14); }
  /* The bar is the guide on a phone. The whole width is one tap target (60px tall), the
     instruction sits in it so most steps need no unfolding, and Next appears in it when
     the step is done. The chevron is decoration; tapping anywhere on the bar folds. */
  .g-bar { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); background: #fff; }
  .g-bar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; min-height: 60px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
  .g-bar-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rust); color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
  .g-bar-n .ico { width: 16px; height: 16px; }
  .g-bar-t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .g-bar-t b, .g-bar-t strong { font-weight: 700; color: var(--accent); background: #FCEBDD; padding: 0 4px; border-radius: 4px; }
  .g-bar-t .g-bar-ok { width: 16px; height: 16px; color: #2E7D3A; vertical-align: -3px; margin-right: 4px; }
  .g-bar-chev { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--accent); flex-shrink: 0; }
  .g-bar-chev .ico { width: 22px; height: 22px; transition: transform .2s; }
  .g-bar-next { flex-shrink: 0; align-self: center; margin: 0 10px 0 0; height: 44px; padding: 0 16px 0 18px; border-radius: 50px; background: var(--rust); color: #fff; font: inherit; font-size: 16px; font-weight: 700; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; animation: gpulse 1.4s ease-in-out infinite; }
  .g-bar-next .ico { width: 18px; height: 18px; }
  .demo-guide.folded .g-body { display: none; }
  .demo-guide.folded .g-bar-chev .ico { transform: rotate(180deg); }
  .g-phone-only { display: inline-flex; }
  .g-body { padding: 14px 16px 18px; gap: 10px; }
  .g-title, .g-why, .g-keys, .g-kicker, .g-progress { display: none; }
  .g-card { padding: 12px 14px 14px; gap: 8px; }
  .g-step { font-size: 19px; }
  .g-instr { font-size: 16px; }
  .g-result { font-size: 14.5px; }
  .g-btn { padding: 11px 16px; }
  .demo-done { inset: 10px; }
  .demo-done-card { padding: 22px 20px; }
  .demo-toast { bottom: calc(var(--guide-h, 240px) + 12px); }
}
@media (max-width: 560px) {
  .demo-top { padding: 0 12px; gap: 10px; }
  .demo-top-label span:last-child { display: none; }
}

/* ------------------------------------------------------------------ 2. the app frame */
.dfapp {
  --a-wine: #814256; --a-wine-dark: #6b3548; --a-cream: #F2E9E1; --a-cream-soft: #FAF6F1;
  --a-rose: #DB9A8F; --a-rose-soft: #F0D9D3; --a-terra: #A66940; --a-border: #e8ddd2;
  --a-text: #3a2228; --a-muted: #8a6f77; --a-tint: #efe7de; --a-white: #ffffff;
  --a-input: #e5e5e5; --a-ring: #b3b3b3; --a-red: #b54141;
  height: 100%; border-radius: 12px; overflow: hidden; display: flex; background: var(--a-white);
  box-shadow: 0 10px 40px rgba(74, 57, 29, .18), 0 0 0 1px rgba(74, 57, 29, .08);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: var(--a-text); font-size: 14px; line-height: 1.45;
  position: relative; -webkit-font-smoothing: antialiased;
}
.dfapp *, .dfapp *::before, .dfapp *::after { box-sizing: border-box; }
.dfapp .ico { width: 16px; height: 16px; flex-shrink: 0; }
.dfapp a { color: inherit; text-decoration: none; }
.dfapp button { font: inherit; color: inherit; }

/* sidebar (desktop) */
.a-side { width: 224px; border-right: 1px solid var(--a-border); background: var(--a-cream); display: flex; flex-direction: column; flex-shrink: 0; }
.a-side-logo { padding: 20px; border-bottom: 1px solid var(--a-border); }
.a-side-logo img { height: 28px; width: auto; display: block; }
.a-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.a-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.a-nav a { display: flex; align-items: center; gap: 12px; border-left: 3px solid transparent; padding: 10px 16px; font-size: 14px; color: var(--a-muted); transition: background .15s, color .15s; }
.a-nav a:hover { background: var(--a-tint); color: var(--a-text); }
.a-nav a[aria-current="page"] { border-left-color: var(--a-wine); background: var(--a-rose-soft); color: var(--a-wine); font-weight: 500; }
.a-side-foot { padding: 12px; border-top: 1px solid var(--a-border); }
.a-user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.a-avatar { height: 28px; width: 28px; border-radius: 999px; background: var(--a-rose-soft); color: var(--a-wine); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a-user-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-user-mail { font-size: 12px; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-signout { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--a-muted); background: none; border: 0; cursor: pointer; }
.a-signout .ico { width: 14px; height: 14px; }

/* main column */
.a-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.a-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 32px; border-bottom: 1px solid var(--a-border); background: var(--a-cream); }
.a-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.a-h1 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.a-sub { font-size: 14px; color: var(--a-muted); margin: 2px 0 0; }
.a-head-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.a-back { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 6px; color: var(--a-text); }
.a-back:hover { background: var(--a-tint); }
.a-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 32px; border-bottom: 1px solid var(--a-border); background: var(--a-cream); }
.a-toolbar .a-input { max-width: 320px; }
.a-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-chip { border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--a-border); background: var(--a-white); color: var(--a-muted); cursor: pointer; transition: border-color .15s; }
.a-chip:hover { border-color: var(--a-wine); }
.a-chip[aria-pressed="true"] { background: var(--a-wine); color: #fff; border-color: var(--a-wine); }
.a-body { flex: 1; overflow-y: auto; padding: 24px 32px; background: var(--a-white); }
.a-stack { display: flex; flex-direction: column; gap: 16px; max-width: 768px; }
.a-pill-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #3F6B45; background: #E7EDDB; border: 1px solid #C8D6BA; padding: 4px 10px; border-radius: 999px; }
.a-pill-ok .ico { width: 13px; height: 13px; }
.a-pill-ok small { font-weight: 400; color: var(--a-muted); }

/* mobile top bar and drawer (shown when the frame itself is narrow) */
.a-mtop { display: none; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--a-border); background: var(--a-cream); }
.a-mtop img { height: 24px; width: auto; display: block; }
.a-menu-btn { display: inline-flex; padding: 4px; margin-left: -4px; border-radius: 6px; background: none; border: 0; cursor: pointer; color: var(--a-text); }
.a-menu-btn .ico { width: 20px; height: 20px; }
.a-drawer { display: none; position: absolute; inset: 0; z-index: 25; }
.a-drawer.on { display: block; }
.a-drawer-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.a-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 288px; max-width: 85%; background: var(--a-cream); border-right: 1px solid var(--a-border); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.a-drawer-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; cursor: pointer; color: var(--a-muted); padding: 4px; border-radius: 6px; }
.dfapp--narrow .a-side { display: none; }
/* On a phone the main column scrolls, so dialogs and the drawer anchor to the frame itself
   (position: static here) and stay centred in view however far down the visitor is. */
.dfapp--narrow .a-main { overflow-y: auto; position: static; }
.dfapp--narrow .a-mtop { display: flex; }
.dfapp--narrow .a-head, .dfapp--narrow .a-body { padding: 16px; }
.dfapp--narrow .a-toolbar { padding: 12px 16px; gap: 12px; }
.dfapp--narrow .a-toolbar .a-input { max-width: none; }
.dfapp--narrow .a-h1 { font-size: 22px; }

/* controls */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.a-btn:focus-visible, .a-input:focus-visible, .a-chip:focus-visible, .a-switch:focus-visible, .a-menu-item:focus-visible, .a-menu-btn:focus-visible, .a-nav a:focus-visible, .a-icon-btn:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 2px; }
.a-btn-primary { background: var(--a-wine); color: #fff; }
.a-btn-primary:hover { background: var(--a-wine-dark); }
.a-btn-secondary { background: var(--a-rose); color: var(--a-text); }
.a-btn-secondary:hover { background: #d08d82; }
.a-btn-outline { background: var(--a-white); border-color: var(--a-border); color: var(--a-text); }
.a-btn-outline:hover { background: var(--a-tint); }
.a-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.a-btn-icon { width: 32px; padding: 0; }
.a-btn:disabled { opacity: .5; cursor: not-allowed; }
.a-icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 6px; color: var(--a-muted); background: none; border: 0; cursor: pointer; }
.a-icon-btn:hover { color: var(--a-red); background: rgba(181, 65, 65, .1); }
.a-input { height: 36px; width: 100%; border: 1px solid var(--a-border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--a-white); color: var(--a-text); }
.a-input::placeholder { color: #a6969b; }
.a-input:focus { outline: none; box-shadow: 0 0 0 2px var(--a-white), 0 0 0 4px var(--a-ring); border-color: var(--a-ring); }
select.a-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a2228' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
textarea.a-input { height: auto; padding: 8px 12px; resize: vertical; min-height: 60px; line-height: 1.45; }
.a-money { position: relative; }
.a-money > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--a-muted); font-size: 14px; pointer-events: none; }
.a-money > .a-input { padding-left: 26px; }
.a-money.a-money-tight > span { left: 8px; }
.a-money.a-money-tight > .a-input { padding-left: 20px; }
.a-input.a-center { text-align: center; }
.a-input.a-w16 { width: 64px; padding: 0 8px; height: 30px; }
.a-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; line-height: 1.3; }
.a-field { margin-bottom: 0; }
.a-help { font-size: 12px; color: var(--a-muted); margin: 6px 0 0; }
.a-error { border-radius: 6px; background: rgba(181, 65, 65, .1); border: 1px solid rgba(181, 65, 65, .3); padding: 10px 14px; font-size: 14px; color: var(--a-red); }
.a-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.a-check input { height: 16px; width: 16px; accent-color: var(--a-wine); }

/* switch (role=switch button) */
.a-switch { position: relative; display: inline-flex; height: 20px; width: 36px; flex-shrink: 0; cursor: pointer; border-radius: 999px; border: 2px solid transparent; background: var(--a-input); transition: background .15s; padding: 0; }
.a-switch[aria-checked="true"] { background: var(--a-wine); }
.a-switch span { display: block; height: 16px; width: 16px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transform: translateX(0); transition: transform .15s; pointer-events: none; }
.a-switch[aria-checked="true"] span { transform: translateX(16px); }

/* cards and lists */
.a-card { border: 1px solid var(--a-border); border-radius: 12px; background: var(--a-cream-soft); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); overflow: hidden; }
.a-card > .a-row { border-top: 1px solid var(--a-border); }
.a-card > .a-row:first-child { border-top: 0; }
.a-auto { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.a-auto-ico { height: 36px; width: 36px; border-radius: 8px; background: var(--a-rose-soft); color: var(--a-wine); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a-auto-t { flex: 1; min-width: 0; }
.a-auto-t p { margin: 0; }
.a-auto-t .t { font-size: 14px; font-weight: 500; }
.a-auto-t .d { font-size: 12px; color: var(--a-muted); margin-top: 2px; }
.a-auto-detail { padding: 0 20px 16px 68px; display: flex; flex-direction: column; gap: 12px; }
.a-auto-detail .a-label-xs { font-size: 12px; font-weight: 500; display: block; margin-bottom: 6px; }
.a-inline { display: flex; align-items: center; gap: 8px; }
.a-inline span { font-size: 14px; color: var(--a-muted); }
.a-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.a-radio { border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-white); color: var(--a-text); padding: 4px 12px; font-size: 12px; font-weight: 500; cursor: pointer; }
.a-radio:hover { background: var(--a-tint); }
.a-radio[aria-checked="true"] { border-color: var(--a-wine); background: var(--a-wine); color: #fff; }
.a-foot-note { font-size: 12px; color: var(--a-muted); margin: 24px 0 0; max-width: 672px; }
.a-wrap-2xl { max-width: 672px; }

/* the reminder preview */
.a-preview { border: 1px solid var(--a-border); background: var(--a-white); border-radius: 8px; padding: 16px; max-width: 384px; }
.a-preview .t { font-size: 14px; font-weight: 600; margin: 0; }
.a-preview .f { font-size: 12px; color: var(--a-muted); margin: 0 0 12px; }
.a-preview .b { font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
.a-preview-box { border-radius: 6px; background: var(--a-cream-soft); border: 1px solid var(--a-border); padding: 8px 12px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.a-preview-box div { display: flex; justify-content: space-between; }
.a-preview-box span:first-child { color: var(--a-muted); }
.a-preview-box span:last-child { font-weight: 500; }
.a-pay { display: inline-block; border-radius: 6px; background: var(--a-wine); color: #fff; padding: 6px 12px; font-size: 12px; font-weight: 600; opacity: .9; }
.a-preview .n { font-size: 11px; color: var(--a-muted); margin: 8px 0 0; }

/* invoice card */
.a-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--a-border); }
.a-inv-num { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-inv-num .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; }
.a-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 500; }
.a-badge-draft { background: var(--a-tint); color: var(--a-muted); }
.a-badge-sent { background: #ECE1E4; color: var(--a-muted); }
.a-badge-partially_paid { background: #F3E4D8; color: var(--a-terra); }
.a-badge-paid { background: var(--a-rose-soft); color: var(--a-wine); }
.a-badge-overdue { background: #E8D0D6; color: var(--a-wine-dark); }
.a-badge-cancelled { background: var(--a-tint); color: #b09aa0; }
.a-inv-client { margin-top: 4px; font-size: 14px; font-weight: 500; }
.a-inv-pkg { font-size: 12px; color: var(--a-muted); }
.a-inv-amt { font-size: 20px; font-weight: 600; color: var(--a-wine); flex-shrink: 0; }
.a-inv-sched { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--a-border); font-size: 14px; }
.a-inv-sched .k { font-size: 12px; color: var(--a-muted); margin-bottom: 2px; }
.a-inv-sched .v { font-weight: 500; }
.a-inv-sched .d { font-size: 12px; color: var(--a-muted); }
.a-inv-prog { padding: 12px 20px; border-bottom: 1px solid var(--a-border); }
.a-inv-prog .l { display: flex; justify-content: space-between; font-size: 12px; color: var(--a-muted); margin-bottom: 6px; }
.a-bar { height: 6px; border-radius: 999px; background: var(--a-border); overflow: hidden; }
.a-bar div { height: 100%; border-radius: 999px; background: var(--a-wine); transition: width .3s; }
.a-inv-act { display: flex; align-items: center; gap: 8px; padding: 12px 20px; flex-wrap: wrap; position: relative; }
.a-more { position: relative; }
.a-inv-act .a-more { margin-left: auto; }
.a-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; background: var(--a-white); border: 1px solid var(--a-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 4px; z-index: 15; }
.a-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; font-size: 14px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--a-text); }
.a-menu-item:hover { background: var(--a-tint); }
.a-menu-item:disabled { opacity: .5; cursor: not-allowed; }
.a-menu-item .ico { width: 14px; height: 14px; }
.a-menu-item.a-danger { color: var(--a-red); }
.a-menu-sep { height: 1px; background: var(--a-border); margin: 4px -4px; }
.a-menu-note { padding: 0 8px 4px; font-size: 12px; color: var(--a-muted); }
.a-empty { border: 1px dashed var(--a-border); border-radius: 12px; background: var(--a-cream-soft); padding: 64px 24px; text-align: center; max-width: 512px; margin: 32px auto 0; }
.a-empty .e { font-size: 30px; margin-bottom: 12px; }
.a-empty p { margin: 0; font-weight: 500; }

/* dialogs live inside the frame so the guide stays visible */
.a-modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.a-modal { background: var(--a-white); border-radius: 10px; width: 100%; max-width: 672px; max-height: 100%; overflow-y: auto; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); position: relative; border: 1px solid var(--a-border); }
.a-modal-sm { max-width: 384px; }
.a-modal-x { position: absolute; top: 16px; right: 16px; background: none; border: 0; cursor: pointer; color: var(--a-muted); padding: 4px; border-radius: 4px; opacity: .7; }
.a-modal-x:hover { opacity: 1; }
.a-modal-title { font-size: 18px; font-weight: 600; margin: 0 0 16px; line-height: 1.2; }
.a-form { display: flex; flex-direction: column; gap: 24px; }
.a-form-tight { gap: 16px; }
.a-form .a-note { font-size: 12px; color: var(--a-muted); margin: 0; }
.a-sec { display: flex; flex-direction: column; gap: 12px; }
.a-sec-h { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--a-muted); margin: 0; }
.a-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.a-sec-head .a-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.a-lines { border: 1px solid var(--a-border); border-radius: 8px; overflow: hidden; }
.a-lines-h { display: grid; grid-template-columns: 1fr 100px 60px 32px; gap: 8px; padding: 8px 12px; background: var(--a-tint); border-bottom: 1px solid var(--a-border); }
.a-lines-h span { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--a-muted); }
.a-line { display: grid; grid-template-columns: 1fr 100px 60px 32px; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--a-border); }
.a-line:last-child { border-bottom: 0; }
.a-total-row { display: flex; justify-content: flex-end; }
.a-total { border-radius: 6px; background: var(--a-tint); border: 1px solid var(--a-border); padding: 8px 16px; font-size: 14px; }
.a-total span { color: var(--a-muted); }
.a-total b { font-weight: 600; color: var(--a-wine); }
.a-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.a-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 16px; border-top: 1px solid var(--a-border); }
.a-modal-foot .a-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.a-balance-box { border-radius: 6px; background: var(--a-tint); padding: 8px 12px; font-size: 14px; color: var(--a-muted); }
.a-balance-box b { font-weight: 600; color: var(--a-wine); }
.a-modal-foot-r { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
.dfapp--narrow .a-lines-h { display: none; }
.dfapp--narrow .a-line { grid-template-columns: 1fr; }
.dfapp--narrow .a-line .a-line-r { display: flex; gap: 8px; align-items: center; }
.dfapp--narrow .a-line .a-line-r .a-money { flex: 1; min-width: 0; }
.dfapp--narrow .a-line .a-line-r .a-center { width: 64px; flex: 0 0 64px; }
.dfapp--narrow .a-grid-2 { grid-template-columns: 1fr; }
.dfapp--narrow .a-modal { padding: 20px 16px; }
.dfapp--narrow .a-auto-detail { padding-left: 20px; }
.a-line-r { display: contents; }

/* ------------------------------------------------------------------ record mode
   What tests/record-demo.js films: the phone app alone, edge to edge, no shell. */
body.demo-record .demo-top, body.demo-record .demo-guide { display: none; }
/* Percentages, not vh: under the recorder's zoom, 100vh is the unzoomed viewport and the page
   lays out twice as tall as the screen, so any scrollIntoView scrolls the window itself. */
html.demo-record-root, body.demo-record, body.demo-record #demo-root { height: 100%; overflow: hidden; }
body.demo-record .demo-body { grid-template-columns: 1fr; height: 100% !important; }
body.demo-record .demo-frame { padding: 0; background: #fff; height: 100% !important; }
body.demo-record .dfapp { border-radius: 0; box-shadow: none; }
body.demo-record .demo-done { inset: 0; border-radius: 0; }
body.demo-record .df-pointer { animation: none; }

/* ------------------------------------------------------------------ video mode
   Phones: the recorded walkthrough in a phone-shaped stage, captions under it in the same
   rust card as the desktop guide. */
body.demo-video-mode { overflow: auto; }
.demo-video { max-width: 480px; margin: 0 auto; padding: 12px 16px 48px; display: flex; flex-direction: column; gap: 12px; }
.v-note { font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.v-note b { color: var(--text); font-weight: 600; }
.v-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.v-stage { position: relative; width: min(100%, calc(58vh * 412 / 915)); aspect-ratio: 412 / 915; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #000; border: 5px solid var(--text); box-shadow: 0 16px 40px rgba(74, 57, 29, .28); cursor: pointer; }
.v-stage video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.v-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--rust); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.v-play .ico { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.v-play[hidden] { display: none; }
.v-card { background: #fff; border: 2px solid var(--rust); border-radius: 14px; padding: 12px 14px 14px; box-shadow: 0 8px 28px rgba(188, 87, 39, .18); display: flex; flex-direction: column; gap: 8px; }
.v-cap { font-size: 16.5px; line-height: 1.45; font-weight: 500; color: var(--text); margin: 0; min-height: 3.2em; }
.v-cap b { font-weight: 700; color: var(--accent); background: #FCEBDD; padding: 0 5px; border-radius: 5px; }
.v-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.v-chip { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.v-chip[aria-current="step"] { background: var(--rust); border-color: var(--rust); color: #fff; }
.v-done { background: var(--ground); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.v-done[hidden] { display: none; }
.v-done .g-cta { align-items: stretch; }
.v-done .g-links { justify-content: center; }

/* ------------------------------------------------------------------ client record
   The case view: header with the ⋯ menu, a 288px sidebar, tabs. Mirrors clients/[id]/page.tsx
   and ClientSidebar.tsx. */
.a-head-client { padding: 18px 32px; }
.a-chip-ok { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; background: #d8e7e4; color: var(--a-text); padding: 5px 10px; font-size: 12px; font-weight: 500; }
.a-chip-ok .ico { width: 14px; height: 14px; }
.a-client-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.a-cside { width: 288px; flex-shrink: 0; border-right: 1px solid var(--a-border); overflow-y: auto; padding: 20px; background: var(--a-white); display: flex; flex-direction: column; gap: 20px; }
.a-cside-id { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6px; }
.a-cside-avatar { height: 56px; width: 56px; border-radius: 50%; background: var(--a-rose); color: var(--a-wine); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.a-cside-id h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2; }
.a-cside-id p { margin: 2px 0 0; font-size: 12px; color: var(--a-muted); }
.a-side-ga { border-radius: 8px; background: var(--a-tint); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.a-side-ga div { display: flex; justify-content: space-between; align-items: center; }
.a-side-ga span { font-size: 12px; color: var(--a-muted); }
.a-side-ga b { font-weight: 600; }
.a-side-ga .v { color: var(--a-text); font-weight: 500; }
.a-cside-contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--a-muted); }
.a-cside-contact div { display: flex; align-items: center; gap: 10px; }
.a-cside-contact .ico { width: 14px; height: 14px; }
.a-cside-contact div .ico:last-child:not(:first-child) { margin-left: auto; }
.a-cside-sec { border-top: 1px solid var(--a-border); padding-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.a-side-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--a-muted); margin: 0 0 8px; }
.a-side-row { display: flex; align-items: center; justify-content: space-between; }
.a-side-row .a-side-h { margin: 0; }
.a-side-box { border-radius: 8px; background: var(--a-cream-soft); padding: 8px 12px; }
.a-side-box .t { font-size: 14px; font-weight: 500; }
.a-side-box .d { font-size: 12px; color: var(--a-muted); margin-top: 2px; }
.a-side-box .s { font-size: 12px; font-weight: 500; }
.a-side-link { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; color: var(--a-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.a-side-link .ico { width: 12px; height: 12px; }
.a-side-link:hover { color: var(--a-wine); }
.a-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.a-tags span { border-radius: 999px; background: var(--a-tint); padding: 2px 8px; font-size: 11px; font-weight: 500; color: var(--a-muted); }
.a-side-bk { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.a-side-bk .ico { width: 14px; height: 14px; color: var(--a-wine); }
.a-side-links { display: flex; gap: 12px; margin-top: 6px; }
.a-side-links button { font: inherit; font-size: 12px; color: var(--a-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.a-cside-foot { display: flex; gap: 8px; padding-top: 4px; }
.a-cside-foot .a-btn { flex-shrink: 0; }
.a-client-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.a-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--a-border); background: var(--a-cream); overflow-x: auto; flex-shrink: 0; }
.a-tab { font: inherit; font-size: 14px; color: var(--a-muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 12px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.a-tab:hover { color: var(--a-text); }
.a-tab[aria-selected="true"] { color: var(--a-text); border-bottom-color: var(--a-wine); }
.a-tab-body { flex: 1; overflow-y: auto; padding: 24px; background: var(--a-white); }
.a-usage { border: 1px solid var(--a-border); border-radius: 12px; background: var(--a-cream-soft); padding: 14px 18px; }
.a-usage-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--a-muted); margin-bottom: 8px; }
.a-usage-h span:first-child { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.a-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.a-usage-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.a-usage-row span:last-child { color: var(--a-muted); font-size: 13px; }
.a-appt { display: flex; align-items: center; gap: 14px; border: 1px solid var(--a-border); border-radius: 12px; background: var(--a-cream-soft); padding: 10px 14px; }
.a-appt-date { width: 52px; height: 56px; border-radius: 8px; background: var(--a-rose-soft); color: var(--a-wine); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a-appt-date span { font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.a-appt-date b { font-size: 20px; font-weight: 600; line-height: 1; }
.a-appt-t { flex: 1; min-width: 0; }
.a-appt-t .t { font-size: 15px; font-weight: 500; }
.a-appt-t .d { font-size: 13px; color: var(--a-muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.a-appt-t .d .ico { width: 13px; height: 13px; }
.a-tag { border-radius: 999px; background: var(--a-tint); padding: 1px 8px; font-size: 11px; }
.a-pending { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--a-border); border-radius: 8px; background: var(--a-cream-soft); padding: 14px 16px; margin-bottom: 16px; font-size: 14px; }
.a-pending .ico { width: 20px; height: 20px; color: var(--a-wine); flex-shrink: 0; margin-top: 2px; }
.a-pending > div { flex: 1; min-width: 0; }
.a-pending .t { margin: 0; font-weight: 500; }
.a-pending .d { margin: 2px 0 0; color: var(--a-muted); }
.a-birth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 16px 20px; }
.a-birth-grid .a-sec-h { font-size: 11px; margin-bottom: 6px; }
.a-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
.a-kv span { color: var(--a-muted); font-size: 13px; }
.a-kv b { font-weight: 500; text-align: right; }
.a-kv-col { flex-direction: column; gap: 0; }
.a-kv-col span { font-size: 12px; }
.a-kv-col b { text-align: left; }
.a-kv-col em { font-style: normal; font-size: 11px; color: #92400e; }
.a-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.a-amber { border-radius: 6px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; padding: 8px 12px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.a-amber p { margin: 0; }
.dfapp--narrow .a-head-client { padding: 14px 16px; align-items: flex-start; flex-direction: column; }
.dfapp--narrow .a-client-body { flex-direction: column; overflow: visible; }
.dfapp--narrow .a-cside { width: auto; border-right: 0; border-bottom: 1px solid var(--a-border); padding: 16px; }
.dfapp--narrow .a-client-main { overflow: visible; }
.dfapp--narrow .a-tabs { padding: 0 8px; }
.dfapp--narrow .a-tab-body { padding: 16px; overflow: visible; }
.dfapp--narrow .a-usage-grid, .dfapp--narrow .a-birth-grid, .dfapp--narrow .a-review-grid { grid-template-columns: 1fr; }

/* the Set a backup dialog: pick lists with a radio dot or a checkbox, the size meter */
.a-modal-md { max-width: 448px; }
.a-modal-back { display: inline-flex; vertical-align: middle; margin-right: 8px; background: none; border: 0; color: var(--a-muted); cursor: pointer; padding: 0; }
.a-modal-back .ico { width: 16px; height: 16px; }
.a-btn-ghost { background: transparent; color: var(--a-text); }
.a-btn-ghost:hover { background: var(--a-tint); }
.a-pick { border: 1px solid var(--a-border); border-radius: 8px; overflow: hidden; }
.a-pick-row { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; font-size: 14px; border-top: 1px solid var(--a-border); }
.a-pick-row:first-child { border-top: 0; }
.a-pick-row:hover { background: var(--a-tint); }
.a-pick-row.on { background: var(--a-rose-soft); }
.a-pick-row > button[role="radio"] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.a-radio-dot { height: 16px; width: 16px; border-radius: 50%; border: 1px solid var(--a-border); flex-shrink: 0; background: #fff; }
.a-pick-row.on .a-radio-dot { border-color: var(--a-wine); background: var(--a-wine); }
.a-pick-row .t { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-pick-row .d { display: block; font-size: 12px; color: var(--a-muted); }
.a-pick-check { padding: 10px 12px; cursor: pointer; gap: 12px; }
.a-pick-check input { height: 16px; width: 16px; accent-color: #7a4a57; flex-shrink: 0; }
.a-pick-check > span { flex: 1; min-width: 0; }
.a-cat { border-radius: 999px; background: var(--a-rose-soft); color: var(--a-wine); padding: 2px 8px; font-size: 10px; font-weight: 500; flex-shrink: 0; }
.a-note-box { border-radius: 6px; background: var(--a-tint); padding: 8px 12px; }
.a-sent { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--a-border); border-radius: 8px; background: var(--a-cream-soft); padding: 16px; font-size: 14px; }
.a-sent-ico { height: 36px; width: 36px; border-radius: 50%; background: #d8e7e4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a-sent .t { margin: 0; font-weight: 500; }
.a-sent .d { margin: 4px 0 0; color: var(--a-muted); }

/* ------------------------------------------------------------------ what the backup sees
   Public pages have no sidebar. A persona strip at the top says whose eyes these are. */
.dfapp--public { background: var(--a-cream); }
.a-persona { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--demo); color: var(--ground); font-size: 13.5px; }
.a-persona .ico { width: 18px; height: 18px; flex-shrink: 0; }
.a-persona b { font-weight: 700; }
.a-body-pub { background: var(--a-cream); padding: 24px 16px 40px; }
.a-email { max-width: 560px; margin: 0 auto; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.a-email-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 28px 28px 24px; }
.a-email-logo { height: 26px; width: auto; display: block; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; box-sizing: content-box; }
.a-email h1 { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 12px; }
.a-email p { font-size: 15px; line-height: 1.55; color: #334155; margin: 0 0 14px; }
.a-email-list { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.9; color: #334155; margin-bottom: 18px; }
.a-email-h { font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0f172a !important; margin-bottom: 6px !important; }
.a-email-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.a-email-table td { padding: 6px 0; vertical-align: top; color: #0f172a; }
.a-email-table td:first-child { color: #64748b; width: 34%; padding-right: 12px; }
.a-email-btn { display: inline-block; background: #7a4a57; color: #fff; font: inherit; font-size: 15px; font-weight: 700; padding: 12px 26px; border-radius: 10px; border: 0; cursor: pointer; }
.a-email-note { font-size: 13px !important; color: #64748b !important; margin: 14px 0 0 !important; }
.a-email-foot { text-align: center; font-size: 12px; color: #94a3b8; margin: 18px 0 0; }
.a-pub { max-width: 672px; margin: 0 auto; }
.a-pub-head { margin-bottom: 16px; }
.a-pub-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--a-muted); margin: 0; }
.a-pub-card { border: 1px solid var(--a-border); border-radius: 16px; background: var(--a-white); padding: 24px; }
.a-pub-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; min-height: 18px; }
.a-pub-sec + .a-pub-sec { margin-top: 24px; }
.a-pub-sec h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--a-muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--a-border); }
.a-pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.a-pub-wide { grid-column: 1 / -1; }
.a-pub-grid .a-label-xs { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.a-pub-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.dfapp--narrow .a-pub-grid { grid-template-columns: 1fr; }
.dfapp--narrow .a-pub-card { padding: 18px 14px; }
.dfapp--narrow .a-email-card { padding: 20px 16px; }
.dfapp--narrow .a-pub-foot { flex-direction: column; align-items: stretch; }