/* A dedicated compact workspace; desktop keeps its existing layout. */
@media (max-width: 820px) {
  html:has(.mobile-app-shell),
  body:has(.mobile-app-shell) { height: auto; overflow-x: clip; overflow-y: visible; }
  #root:has(.mobile-app-shell) { height: auto; }
  .mobile-app-shell .mobile-main { overflow: visible; }
  body.mobile-drawer-open:has(.mobile-app-shell),
  body.phone-filter-open:has(.mobile-app-shell),
  body.phone-flow-open:has(.mobile-app-shell) { overflow: hidden; }
  .mobile-app-shell {
    --phone-ink: #16344b;
    --phone-muted: #5c7082;
    --phone-blue: #1764c0;
    --phone-line: #e8edf2;
    background: #f2f5f8;
    color: var(--phone-ink);
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  }
  .mobile-app-shell button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .mobile-app-shell button:focus-visible,
  .mobile-app-shell [role="button"]:focus-visible { outline: 3px solid #1764c0; outline-offset: 3px; }
  .phone-app-bar { position: sticky; top: 0; z-index: 35; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 64px; padding: max(8px, env(safe-area-inset-top)) 18px 8px; background: #fff; border-bottom: 1px solid var(--phone-line); }
  .phone-app-bar > a { display: grid; width: 44px; height: 44px; place-items: center; }
  .phone-app-bar img { width: 34px; height: 34px; object-fit: contain; }
  .phone-app-bar > strong { font-size: 17px; text-align: center; overflow-wrap: anywhere; }
  .phone-account { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid #d9e5ef; border-radius: 50%; background: #ecf3fa; color: var(--phone-blue); font: inherit; font-weight: 700; }
  .mobile-main { padding: 20px 18px calc(96px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav { border-top: 1px solid #e6ebf0; box-shadow: none; background: #fff; }
  .mobile-bottom-nav button { gap: 5px; min-height: 68px; padding: 10px 4px; color: #7c8b99; font-size: 11px; }
  .mobile-bottom-nav button .ui-icon { width: 23px; height: 23px; }
  .mobile-bottom-nav button.active { color: var(--phone-blue); background: #f1f7fd; }
  .phone-workspace { display: grid; gap: 20px; max-width: 600px; margin: 0 auto; }
  .mobile-main.page-dashboard:has(.phone-create-quote) { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .phone-welcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .phone-welcome > div { min-width: 0; }
  .phone-welcome p { margin: 0 0 7px; font-size: 12px; color: var(--phone-muted); }
  .phone-welcome h1 { margin: 0 0 6px; font-size: 25px; line-height: 1.35; letter-spacing: -.5px; overflow-wrap: anywhere; }
  .phone-welcome div > span { font-size: 13px; color: var(--phone-muted); }
  .phone-welcome-icon { flex: 0 0 auto; display: grid; width: 46px; height: 46px; place-items: center; color: #cf9b39; }
  .phone-welcome-icon .ui-icon { width: 32px; height: 32px; stroke-width: 1.5; }
  .phone-day-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 18px 0; border: 1px solid var(--phone-line); border-radius: 18px; background: #fff; }
  .phone-day-overview button { display: grid; min-width: 0; gap: 9px; min-height: 72px; padding: 0 22px; border: 0; background: transparent; text-align: left; color: var(--phone-ink); font: inherit; }
  .phone-day-overview button + button { border-left: 1px solid var(--phone-line); }
  .phone-day-overview button > span { font-size: 13px; color: var(--phone-muted); }
  .phone-day-overview strong { display: flex; align-items: baseline; gap: 8px; font-size: 32px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
  .phone-day-overview small { font-size: 12px; color: var(--phone-muted); font-weight: 400; }
  .phone-create-quote { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 600px; margin: 0 auto; min-height: 56px; padding: 12px 16px; border: 0; border-radius: 16px; background: #1764c0; color: white; font: inherit; text-align: left; box-shadow: 0 4px 16px #1764c01a; }
  .phone-create-symbol { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #ffffff4d; border-radius: 14px; background: #ffffff12; }
  .phone-create-quote > span:nth-child(2) { display: grid; gap: 6px; }
  .phone-create-quote strong { font-size: 17px; }
  .phone-create-quote small { font-size: 12px; color: #dae9fb; line-height: 1.4; }
  .phone-create-quote > .ui-icon { width: 20px; }
  .phone-create-quote .phone-create-symbol { width: 32px; height: 32px; border: 0; background: transparent; }
  .phone-create-quote small { display: none; }
  .phone-section { display: grid; min-width: 0; gap: 12px; }
  .phone-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .phone-section-heading h2 { margin: 0; font-size: 17px; color: var(--phone-ink); }
  .phone-section-heading > span { font-size: 11px; color: var(--phone-muted); }
  .phone-section-heading button { display: inline-flex; align-items: center; min-height: 44px; gap: 2px; padding: 0; border: 0; background: none; color: var(--phone-muted); font: inherit; font-size: 12px; }
  .phone-section-heading .ui-icon { width: 14px; }
  .phone-task-list { padding: 0 16px; background: #fff; border: 1px solid var(--phone-line); border-radius: 18px; }
  .phone-task-list button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 12px 0; border: 0; background: transparent; color: var(--phone-ink); text-align: left; font: inherit; font-size: 14px; }
  .phone-task-list button + button { border-top: 1px solid var(--phone-line); }
  .phone-task-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: #edf4fc; color: var(--phone-blue); }
  .phone-task-icon .ui-icon { width: 18px; height: 18px; }
  .phone-task-list b { min-width: 24px; padding: 4px 6px; border-radius: 8px; color: var(--phone-muted); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
  .phone-task-list .has-count { color: #ad6f17; background: #fff3dc; }
  .phone-task-list button > .ui-icon { width: 16px; color: #a0afbd; }
  .phone-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .phone-shortcuts button { display: grid; justify-items: center; align-content: center; min-width: 0; min-height: 98px; gap: 10px; padding: 12px 6px; border: 1px solid var(--phone-line); border-radius: 16px; background: #fff; color: var(--phone-ink); font: inherit; }
  .phone-shortcuts button > span { display: grid; width: 34px; height: 34px; place-items: center; color: #49738e; }
  .phone-shortcuts .ui-icon { width: 25px; height: 25px; stroke-width: 1.6; }
  .phone-shortcuts strong { font-size: 12px; font-weight: 600; }
  .phone-payments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 16px; border: 1px solid var(--phone-line); border-radius: 18px; background: #fff; }
  .phone-payments > div { display: grid; min-width: 0; gap: 10px; }
  .phone-payments span { font-size: 12px; color: var(--phone-muted); }
  .phone-payments strong { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .phone-payments button { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; min-height: 44px; padding: 10px; border: 0; border-radius: 10px; background: #fff4ed; color: #b06c31; text-align: left; font: inherit; font-size: 12px; }
  .phone-payments button .ui-icon { width: 16px; flex: 0 0 auto; }
  .phone-payments button .ui-icon:last-child { margin-left: auto; }
  .phone-workspace-footer { margin: 0; text-align: center; letter-spacing: 2px; color: #9eacb8; font-size: 10px; }
  .phone-create-quote,
  .phone-shortcuts button,
  .phone-task-list button { transition: background-color 150ms ease, transform 150ms ease; }
  .phone-create-quote:active,
  .phone-shortcuts button:active { transform: scale(.98); }
  .phone-task-list button:active { background: #f2f6fa; }
  .mobile-main.page-quotes .quote-list-toolbar .section-leading-icon,
  .mobile-main.page-quotes .quote-list-toolbar h2 { display: none; }
  .mobile-main.page-quotes .quote-list-toolbar { margin: 0 0 12px; padding: 0; }
  .mobile-main.page-quotes .quote-list-toolbar .section-title p { margin: 0; }
  .mobile-main.page-quotes .quote-searchbar { min-height: 50px; border-radius: 14px; background: #fff; }
  .mobile-main.page-quotes .quote-searchbar input { font-size: 16px; }
  .mobile-main.page-quotes .quote-list-panel > .list { display: grid; gap: 12px; }
  .phone-quote-status-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0; scrollbar-width: none; }
  .phone-quote-status-tabs::-webkit-scrollbar { display: none; }
  .phone-quote-status-tabs button { flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border: 1px solid #dce5ee; border-radius: 12px; background: #fff; color: var(--phone-muted); font: inherit; font-size: 14px; }
  .phone-quote-status-tabs button[aria-pressed="true"] { border-color: #1764c0; background: #eaf3fe; color: #1764c0; font-weight: 600; }
  .phone-empty-state { display: grid; justify-items: center; gap: 12px; padding: 32px 24px; border: 1px solid var(--phone-line); border-radius: 16px; background: #fff; text-align: center; }
  .phone-empty-state > .ui-icon { width: 32px; height: 32px; color: var(--phone-blue); }
  .phone-empty-state h3 { margin: 0; font-size: 16px; color: var(--phone-ink); }
  .phone-empty-state p { margin: 0; max-width: 280px; color: var(--phone-muted); font-size: 14px; line-height: 1.6; }
  .phone-empty-state .btn { min-height: 48px; margin-top: 4px; }
  .mobile-main.page-quotes .phone-quote-card { display: grid; gap: 10px; min-width: 0; padding: 17px; border: 1px solid var(--phone-line); border-radius: 18px !important; background: #fff; box-shadow: none; cursor: pointer; }
  .phone-quote-card-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
  .phone-quote-card-heading > strong { min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; }
  .phone-quote-card-heading .pill { flex: 0 0 auto; font-size: 11px; }
  .phone-quote-trip { margin: 0; font-size: 14px; color: #4e667a; overflow-wrap: anywhere; }
  .phone-quote-travel { display: flex; align-items: center; gap: 7px; color: var(--phone-muted); font-size: 12px; line-height: 1.6; flex-wrap: wrap; }
  .phone-quote-travel .ui-icon { width: 14px; height: 14px; flex: 0 0 auto; }
  .phone-quote-owner { margin-left: auto; }
  .phone-quote-card footer { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; margin-top: 3px; padding-top: 13px; border-top: 1px solid var(--phone-line); }
  .phone-quote-card footer small { min-width: 0; font-size: 11px; color: #8c9baa; overflow-wrap: anywhere; }
  .phone-quote-card footer strong { font-size: 17px; color: var(--phone-ink); overflow-wrap: anywhere; }
  .phone-quote-card footer > .ui-icon { width: 16px; color: #9aaab8; }
  .mobile-resource-page > .panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .mobile-resource-page .customer-library-hero { padding: 0 0 14px; background: transparent; border: 0; }
  .mobile-resource-page .customer-library-hero h2,
  .mobile-resource-page .customer-library-hero .eyebrow { display: none; }
  .mobile-resource-page .customer-library-hero p { font-size: 12px; line-height: 1.6; }
  .mobile-resource-page .customer-library-hero-actions { width: 100%; justify-content: space-between; }
  .mobile-resource-page .customer-library-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0; }
  .mobile-resource-page .customer-library-search input { grid-column: 1 / -1; min-height: 48px; font-size: 16px; border-radius: 12px; }
  .mobile-resource-page .customer-library-card { padding: 16px; border: 1px solid var(--phone-line); border-radius: 18px; box-shadow: none; }
  .mobile-document-list-page .mobile-document-titlebar h1 { display: none; }
  .mobile-document-card { border-radius: 18px; border-color: var(--phone-line); box-shadow: none; }
  .mobile-document-filters input:not([type="checkbox"]):not([type="radio"]),
  .mobile-document-filters select { min-height: 48px !important; height: 48px !important; font-size: 16px; }
  .mobile-document-filters input[type="checkbox"] { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; appearance: none; border: 0; background: transparent; cursor: pointer; }
  .mobile-document-filters input[type="checkbox"]::before { content: ""; display: block; width: 20px; height: 20px; margin: 12px; border: 1px solid #a8bccd; border-radius: 5px; background: #fff; }
  .mobile-document-filters input[type="checkbox"]:checked::before { content: "✓"; display: grid; place-items: center; border-color: #1764c0; background: #1764c0; color: #fff; font-size: 16px; }
  .mobile-more-drawer { padding-top: 8px; }
  .mobile-more-drawer::before { content: ""; display: block; width: 32px; height: 4px; margin: 0 auto; border-radius: 2px; background: #d8e1e8; }
  .mobile-more-drawer-list button { min-height: 58px; font-size: 14px; }
  .login { min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 24px; background: #f2f5f8; }
  .login form { width: 100%; max-width: 400px; padding: 28px 22px; border-radius: 24px; box-shadow: 0 12px 40px #16344b0a; }
  .login h1 { font-size: 22px; line-height: 1.5; }
  .login input { min-height: 50px; font-size: 16px; border-radius: 12px; }
  .login form > .btn { width: 100%; min-height: 50px; border-radius: 12px; }
  /* Four type sizes and a consistent 4px spacing rhythm for the home surface. */
  .phone-app-bar { padding-right: 16px; padding-left: 16px; }
  .phone-app-bar > strong,
  .phone-section-heading h2,
  .phone-create-quote strong,
  .phone-task-list button,
  .phone-payments strong { font-size: 16px; font-weight: 600; }
  .phone-welcome h1 { margin-bottom: 4px; font-size: 24px; font-weight: 600; }
  .phone-welcome p { margin-bottom: 8px; }
  .phone-welcome div > span,
  .phone-day-overview button > span,
  .phone-section-heading > span,
  .phone-task-list b,
  .phone-workspace-footer { font-size: 12px; }
  .phone-day-overview { padding: 16px 0; border-radius: 16px; }
  .phone-day-overview button { gap: 8px; padding: 0 24px; }
  .phone-day-overview strong { font-weight: 600; }
  .phone-task-list { border-radius: 16px; }
  .phone-task-list button { min-height: 64px; gap: 12px; font-weight: 400; }
  .phone-task-list b { padding: 4px 8px; font-weight: 600; }
  .phone-shortcuts { gap: 12px; }
  .phone-shortcuts button { min-height: 88px; gap: 8px; padding: 12px 8px; }
  .phone-shortcuts button > span { width: 32px; height: 32px; border-radius: 8px; background: #edf3fa; }
  .phone-shortcuts button:nth-child(3n + 2) > span { color: #3e7166; background: #edf5f2; }
  .phone-shortcuts button:nth-child(3n) > span { color: #85663a; background: #f7f2e9; }
  .phone-shortcuts .ui-icon { width: 20px; height: 20px; }
  .phone-payments { gap: 16px; padding: 16px; border-radius: 16px; }
  .phone-payments > div { gap: 8px; }
  .mobile-main.page-quotes { padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
  .mobile-main.page-quotes > .quotes { display: block; height: auto; min-height: 0; overflow: visible; }
  .mobile-main.page-quotes .quote-list-panel { display: block; height: auto; max-height: none; overflow: visible; }
  .mobile-main.page-quotes .quote-list-panel > .list { height: auto; max-height: none; overflow: visible; }
  .phone-quote-search-dock { position: sticky; top: calc(64px + max(0px, env(safe-area-inset-top) - 8px)); z-index: 30; margin: 0 -4px 12px; padding: 8px 4px 0; background: #f2f5f8; border-bottom: 1px solid #e3eaf0; }
  .mobile-main.page-quotes .phone-quote-search-dock .quote-searchbar { display: flex; gap: 4px; min-height: 48px; padding: 4px 8px; margin: 0; }
  .mobile-main.page-quotes .phone-quote-search-dock .quote-searchbar > .ui-icon { display: none; }
  .mobile-main.page-quotes .phone-quote-search-dock input { flex: 1; width: 0; min-width: 0; height: 44px; padding: 0 4px; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; }
  .phone-quote-search-dock .quote-search-actions { flex: 0 0 auto; display: flex; gap: 4px; }
  .mobile-main.page-quotes .phone-quote-search-dock .btn.icon-only { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; }
  .phone-quote-search-dock .quote-search-clear:disabled { display: none; }
  .phone-filter-trigger { position: relative; }
  .phone-filter-trigger b { position: absolute; right: 0; top: 0; display: grid; min-width: 16px; height: 16px; padding: 0 3px; place-items: center; border-radius: 8px; background: #1764c0; color: #fff; font-size: 10px; }
  .phone-quote-search-dock .phone-quote-status-tabs { margin: 8px 0 0; padding-bottom: 8px; }
  .phone-quote-search-dock .phone-quote-status-tabs button { padding: 8px 12px; font-size: 12px; }
  .mobile-main.page-quotes .quote-list-filter-disclosure { display: none; }
  .mobile-main.page-quotes .phone-quote-card { gap: 8px; padding: 12px; border-radius: 16px !important; }
  .phone-quote-card-heading > strong { font-size: 15px; line-height: 1.4; }
  .phone-quote-trip { font-size: 12px; line-height: 1.5; }
  .phone-quote-card footer { margin: 0; padding-top: 8px; }
  .phone-quote-card footer strong { font-size: 16px; }
  .phone-quote-card footer small { line-height: 1.5; color: var(--phone-muted); }
  .phone-quote-card .phone-quote-owner { display: block; margin: 0; font-size: 11px; }
  body.phone-filter-open { overflow: hidden; }
  .phone-filter-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 600px; max-height: min(90dvh, 780px); margin: 0 auto; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: #16344b; box-shadow: 0 -8px 32px #16344b20; overflow: hidden; }
  .phone-filter-sheet::backdrop { background: #16344b70; }
  .phone-filter-sheet form { display: flex; flex-direction: column; max-height: min(90dvh, 780px); }
  .phone-filter-sheet header { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #e8edf2; }
  .phone-filter-sheet h2 { margin: 0; font-size: 18px; }
  .phone-filter-sheet header button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 12px; background: #f2f5f8; color: #16344b; }
  .phone-filter-body { min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
  .phone-filter-body label { display: grid; gap: 8px; color: #5c7082; font-size: 12px; }
  .phone-filter-body select,
  .phone-filter-body input { width: 100%; min-width: 0; height: 48px; min-height: 48px; padding: 8px 12px; border: 1px solid #d8e3ed; border-radius: 12px; background: #fff; color: #16344b; font-size: 16px; }
  .phone-filter-body .quote-people-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0; }
  .phone-filter-body .quote-date-filter-disclosure { margin-top: 16px; }
  .phone-filter-body summary { min-height: 44px; }
  .phone-filter-body .quote-date-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 12px; }
  .phone-filter-body .quote-date-range-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .phone-filter-error { color: #b42318; font-size: 14px; line-height: 1.5; }
  .phone-filter-sheet footer { display: grid; grid-template-columns: 1fr 2fr; flex-shrink: 0; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e8edf2; background: #fff; }
  .phone-filter-sheet footer .btn { min-height: 48px; }
  .phone-flow-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 600px; max-height: 94dvh; margin: 0 auto; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: #16344b; overflow: hidden; }
  .phone-flow-sheet::backdrop { background: #16344b70; }
  .phone-flow-sheet form { display: flex; flex-direction: column; max-height: 94dvh; }
  .phone-flow-sheet header,
  .phone-flow-sheet footer { flex-shrink: 0; }
  .phone-flow-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e8edf2; }
  .phone-flow-sheet h2 { margin: 0; font-size: 18px; }
  .phone-flow-sheet header button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 12px; background: #f2f5f8; color: #16344b; }
  .phone-flow-body { min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
  .phone-flow-body section[hidden] { display: none; }
  .phone-flow-body h3 { margin: 8px 0 20px; font-size: 16px; }
  .phone-flow-body label { display: grid; gap: 8px; margin-bottom: 16px; font-size: 12px; color: #5c7082; }
  .phone-flow-body input,
  .phone-flow-body textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #d8e3ed; border-radius: 12px; background: #fff; color: #16344b; font: inherit; font-size: 16px; }
  .phone-flow-body textarea { resize: vertical; line-height: 1.6; }
  .phone-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .phone-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; }
  .phone-flow-steps li { padding: 12px 4px; border-bottom: 3px solid #e8edf2; color: #5c7082; text-align: center; font-size: 12px; }
  .phone-flow-steps li[aria-current="step"] { border-color: #1764c0; color: #1764c0; font-weight: 600; }
  .phone-flow-review { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #f2f5f8; font-size: 14px; overflow-wrap: anywhere; }
  .phone-flow-hint { color: #5c7082; font-size: 12px; line-height: 1.6; }
  .phone-flow-error { margin: 0; padding: 12px 16px; color: #b42318; font-size: 14px; }
  .phone-flow-sheet footer { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e8edf2; }
  .phone-flow-sheet footer .btn { min-height: 48px; }
  .phone-itinerary-day { border: 1px solid #e0e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
  .phone-itinerary-day summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 72px; padding: 12px; list-style: none; cursor: pointer; }
  .phone-itinerary-day summary::-webkit-details-marker { display: none; }
  .phone-itinerary-day summary > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
  .phone-itinerary-day summary small { color: #5c7082; font-size: 12px; line-height: 1.5; }
  .phone-itinerary-day summary strong { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .phone-itinerary-day summary > .ui-icon { width: 20px; color: #738596; }
  .phone-itinerary-day[open] summary > .ui-icon { transform: rotate(180deg); }
  .phone-itinerary-body { padding: 0 12px 12px; border-top: 1px solid #e8edf2; }
  .phone-itinerary-body p { margin: 12px 0; color: #465e73; white-space: pre-wrap; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
  .phone-itinerary-body .btn { width: 100%; min-height: 44px; }
  .mobile-quote-detail { overflow: visible; }
  .mobile-quote-detail-shell .mobile-main.page-quotes { padding: 0 0 calc(86px + env(safe-area-inset-bottom)); }
  .mobile-quote-detail .mobile-page-header { min-height: 64px; padding: max(8px, env(safe-area-inset-top)) 16px 8px; }
  .mobile-quote-detail .mobile-page-header h1 { font-size: 16px; font-weight: 600; color: var(--phone-ink); }
  .mobile-quote-detail .mobile-icon-button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 12px; background: #f2f5f8; color: var(--phone-ink); }
  .mobile-quote-detail-content { width: 100%; max-width: 600px; margin: 0 auto; gap: 12px; padding: 12px 16px; }
  .mobile-quote-summary-card,
  .mobile-quote-section-card { box-shadow: none; border-color: var(--phone-line); }
  .mobile-quote-summary-top { gap: 8px; }
  .mobile-quote-summary-top small { display: block; color: var(--phone-muted); font-size: 12px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }
  .mobile-quote-summary-top h2 { margin-top: 8px; color: var(--phone-ink); font-size: 20px; line-height: 1.4; font-weight: 600; }
  .mobile-quote-summary-top .pill { flex-shrink: 0; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 4px 8px; }
  .mobile-quote-destination { gap: 8px; margin: 12px 0 16px; font-size: 14px; color: var(--phone-muted); }
  .mobile-quote-summary-grid { gap: 12px 16px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .mobile-quote-summary-grid > div { padding: 0; background: transparent; }
  .mobile-quote-summary-grid dt { color: var(--phone-muted); font-size: 12px; }
  .mobile-quote-summary-grid dd { margin-top: 4px; color: var(--phone-ink); font-size: 14px; line-height: 1.5; font-weight: 600; }
  .mobile-quote-summary-grid .phone-quote-dates,
  .mobile-quote-summary-grid .phone-quote-price { grid-column: 1 / -1; }
  .mobile-quote-summary-grid .phone-quote-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--phone-line); }
  .mobile-quote-summary-grid .phone-quote-price dd { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; }
  .mobile-quote-section-trigger { min-height: 56px; gap: 12px; padding: 12px 16px; font-size: 14px; }
  .mobile-quote-section-trigger strong { font-weight: 600; }
  .mobile-quote-section-body { padding: 0 12px 12px; }
  .mobile-itinerary-list { gap: 12px; }
  .mobile-itinerary-day-index { font-size: 12px; font-weight: 600; }
  .mobile-quote-detail-actions { gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: none; }
  .mobile-quote-detail-actions .btn { min-height: 48px; font-size: 14px; font-weight: 600; }
  html:has(.mobile-quick-edit-backdrop),
  body:has(.mobile-quick-edit-backdrop) { overflow-y: hidden; }
  .mobile-quick-edit-sheet { height: 100%; max-height: 94dvh; max-width: 600px; margin: 0 auto; border-radius: 24px 24px 0 0; box-shadow: none; }
  .mobile-quick-edit-sheet > header { min-height: 64px; padding: 12px 16px; }
  .mobile-quick-edit-sheet > header h2 { color: #16344b; font-size: 18px; font-weight: 600; }
  .mobile-quick-edit-sheet > header small { font-size: 12px; color: #5c7082; }
  .mobile-quick-edit-body { padding: 16px; scroll-padding: 16px; }
  .phone-quick-edit-group { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
  .phone-quick-edit-group:last-child { margin-bottom: 0; }
  .phone-quick-edit-group legend { width: 100%; margin-bottom: 16px; padding: 0 0 8px; border-bottom: 1px solid #e8edf2; color: #16344b; font-size: 14px; font-weight: 600; }
  .mobile-quick-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .mobile-quick-edit-grid .mobile-quick-edit-wide { grid-column: 1 / -1; }
  .mobile-quick-edit-field { gap: 8px; color: #5c7082; font-size: 12px; font-weight: 400; }
  .mobile-quick-edit-field input,
  .mobile-quick-edit-field select,
  .mobile-quick-edit-field textarea { min-height: 48px; padding: 12px; border-color: #d8e3ed; border-radius: 12px; color: #16344b; font-size: 16px; }
  .mobile-quick-edit-savebar { gap: 8px 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: none; }
  .mobile-quick-edit-savebar .btn { min-height: 48px; font-size: 14px; font-weight: 600; }
  .phone-quick-edit-note { grid-column: 1 / -1; margin: 0; color: #5c7082; font-size: 12px; line-height: 1.5; }
  /* Finish the shared phone surfaces without changing desktop layouts. */
  html:has(.mobile-quote-export-backdrop),
  body:has(.mobile-quote-export-backdrop),
  html:has(.mobile-quote-revision-backdrop),
  body:has(.mobile-quote-revision-backdrop),
  html:has(.manual-ticket-modal-backdrop),
  body:has(.manual-ticket-modal-backdrop) { overflow-y: hidden; }
  .mobile-quote-detail .phone-terms-edit { width: 100%; min-height: 48px; margin-top: 16px; font-size: 14px; }
  .mobile-terms-list { gap: 16px; }
  .mobile-terms-list section { padding: 12px; background: #f2f5f8; }
  .mobile-terms-list strong { font-size: 14px; font-weight: 600; }
  .mobile-terms-list p { font-size: 14px; line-height: 1.7; color: #465e73; }
  .mobile-cost-summary { gap: 12px; }
  .mobile-cost-summary span { gap: 8px; padding: 12px; background: #f2f5f8; }
  .mobile-cost-summary small { color: #5c7082; font-size: 12px; }
  .mobile-cost-summary strong { color: #16344b; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mobile-cost-list { gap: 12px; }
  .mobile-cost-list > div { align-items: baseline; padding-bottom: 12px; font-size: 14px; }
  .mobile-cost-list strong { flex-shrink: 0; max-width: 50%; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mobile-quote-status-panel { gap: 12px; padding: 16px; border-color: #e8edf2; box-shadow: none; }
  .mobile-quote-status-panel strong { font-size: 14px; font-weight: 600; }
  .mobile-quote-status-panel small { font-size: 12px; }
  .mobile-quote-status-actions { gap: 12px; }
  .mobile-quote-status-actions .btn { min-height: 48px; font-size: 14px; }
  .mobile-quote-history-list { gap: 12px; }
  .mobile-quote-history-card { gap: 8px; padding: 12px; border-color: #e8edf2; box-shadow: none; }
  .mobile-quote-history-card strong { font-size: 14px; font-weight: 600; }
  .mobile-quote-history-card small,
  .mobile-quote-history-hint { color: #5c7082; font-size: 12px; line-height: 1.6; }
  .mobile-quote-export-sheet,
  .mobile-quote-revision-dialog { max-width: 600px; margin: 0 auto; border-radius: 24px 24px 0 0; box-shadow: none; }
  .mobile-quote-export-sheet > header,
  .mobile-quote-revision-dialog > header { padding: 12px 16px; }
  .mobile-quote-export-sheet > header h2,
  .mobile-quote-revision-dialog > header h2 { color: #16344b; font-size: 18px; font-weight: 600; }
  .mobile-quote-export-body,
  .mobile-quote-revision-body { padding: 16px; }
  .mobile-quote-export-language { gap: 4px; background: #f2f5f8; }
  .mobile-quote-export-language button { min-height: 48px; padding: 8px 4px; font-size: 14px; font-weight: 600; }
  .mobile-quote-export-language button.active { box-shadow: none; }
  .mobile-quote-export-scope select { min-height: 48px; font-size: 16px; font-weight: 400; }
  .mobile-quote-export-status { padding: 12px; font-size: 14px; line-height: 1.6; }
  .mobile-quote-export-status button { min-height: 48px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
  .mobile-quote-export-group { gap: 12px; padding-top: 24px; }
  .mobile-quote-export-group h3 { font-size: 14px; font-weight: 600; }
  .mobile-quote-export-group article { gap: 12px; padding: 12px 0; }
  .mobile-quote-export-group article > span { color: #16344b; font-size: 14px; line-height: 1.6; font-weight: 400; }
  .mobile-quote-export-action { min-height: 48px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
  .mobile-quote-revision-dialog > footer { gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .mobile-quote-revision-dialog > footer .btn { min-height: 48px; font-size: 14px; }
  .mobile-document-list-page,
  .mobile-invoice-detail,
  .mobile-resource-page { width: 100%; max-width: 600px; margin: 0 auto; }
  .mobile-document-titlebar .eyebrow { display: none; }
  .mobile-document-titlebar p { color: #5c7082; font-size: 12px; line-height: 1.6; }
  .mobile-document-titlebar .btn { min-height: 48px; }
  .mobile-document-filters { gap: 12px; padding: 12px; box-shadow: none; border-color: #e8edf2; }
  .mobile-document-filters .btn { min-height: 48px; }
  .mobile-document-list { gap: 12px; }
  .mobile-document-list .invoice-card { padding: 16px; box-shadow: none; border-color: #e8edf2; }
  .mobile-document-empty { gap: 12px; padding: 32px 16px; border: 1px solid #e8edf2; color: #5c7082; font-size: 14px; }
  .mobile-document-empty strong { color: #16344b; font-weight: 600; }
  .mobile-document-detail-shell .mobile-main { padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
  .mobile-document-detail-header { top: 0; margin: 0; padding: 12px 16px; border-radius: 0; box-shadow: none; }
  .mobile-document-status { white-space: nowrap; font-size: 12px; font-weight: 600; }
  .mobile-document-editor-panel label { gap: 8px; color: #5c7082; font-size: 12px; }
  .mobile-document-editor-panel input:not([type="checkbox"]):not([type="radio"]),
  .mobile-document-editor-panel select { height: 48px !important; min-height: 48px !important; font-size: 16px; border-radius: 12px; }
  .mobile-document-editor-panel textarea { font-size: 16px; line-height: 1.6; }
  .mobile-document-editor-panel .invoice-payment-qr-picker input[type="checkbox"] { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; appearance: none; border: 0; background: transparent; cursor: pointer; }
  .mobile-document-editor-panel .invoice-payment-qr-picker input[type="checkbox"]::before { content: ""; display: block; width: 20px; height: 20px; margin: 12px; border: 1px solid #a8bccd; border-radius: 4px; background: #fff; }
  .mobile-document-editor-panel .invoice-payment-qr-picker input[type="checkbox"]:checked::before { content: "✓"; display: grid; place-items: center; border-color: #1764c0; background: #1764c0; color: #fff; font-size: 16px; }
  .mobile-document-editor-panel .invoice-payment-qr-picker input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
  .mobile-document-editor-panel .btn { min-height: 48px !important; font-size: 14px; }
  .mobile-resource-page .customer-library-hero p { margin-top: 0; }
  .mobile-resource-page .customer-card-top strong { font-size: 16px; font-weight: 600; }
  .mobile-resource-page .customer-card-top small { font-size: 12px; }
  .mobile-resource-page .customer-card-avatar { width: 40px; height: 40px; font-size: 16px; }
  .mobile-resource-page .customer-card-contact-list { gap: 12px; margin-top: 16px; }
  .mobile-resource-page .customer-card-contact { gap: 4px; padding: 0; background: transparent; }
  .mobile-resource-page .customer-card-contact-name { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-weight: 600; }
  .mobile-resource-page .customer-card-contact-name small { font-size: 12px; font-weight: 400; }
  .mobile-resource-page .customer-card-contact-summary { display: grid; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-weight: 400; }
  .customer-card-contact-summary a { display: flex; align-items: center; min-height: 44px; gap: 8px; color: #1764c0; text-decoration: none; }
  .customer-card-contact-summary a span { min-width: 0; overflow-wrap: anywhere; }
  .customer-card-contact-summary a .ui-icon { flex-shrink: 0; width: 16px; height: 16px; }
  .mobile-resource-page .customer-card-note { margin: 12px 0; font-size: 12px; line-height: 1.6; }
  .mobile-resource-page .customer-card-note strong { font-size: 12px; font-weight: 600; }
  .mobile-resource-page .customer-library-card { align-content: start; gap: 12px; }
  .mobile-resource-page .customer-card-contact-list { margin-top: 0; }
  .mobile-resource-page .customer-card-contact span,
  .mobile-resource-page .customer-card-contact.is-primary span { padding: 0; border: 0; background: transparent; border-radius: 0; }
  .mobile-resource-page .customer-card-contact-summary a span { color: inherit; font-weight: 400; }
  .mobile-resource-page .customer-card-note { display: block; margin: 0; background: transparent; }
  .mobile-resource-page .customer-card-note strong { display: inline; }
  .mobile-resource-page .customer-card-actions { gap: 12px; margin-top: 16px; }
  .mobile-resource-page .customer-card-actions .btn { min-height: 48px; font-size: 14px; }
  .mobile-resource-page .mobile-resource-filter-strip { gap: 8px; margin: 16px 0; }
  .mobile-resource-page .mobile-resource-filter-strip button { min-height: 44px; font-size: 12px; }
  .mobile-resource-page .ticket-main,
  .mobile-resource-page .hotel-card,
  .mobile-resource-page .ticket-card,
  .mobile-resource-page .template-card { border-color: #e8edf2; box-shadow: none; }
  .mobile-resource-page input:not([type="checkbox"]):not([type="radio"]),
  .mobile-resource-page select { height: 48px !important; min-height: 48px !important; font-size: 16px; }
  .manual-ticket-modal-backdrop .manual-ticket-modal { max-width: 600px; margin: 0 auto; box-shadow: none; }
  .manual-ticket-modal-head h2 { font-size: 18px; font-weight: 600; }
  .manual-ticket-modal-head p { font-size: 12px; line-height: 1.6; color: #5c7082; }
  .manual-ticket-modal-backdrop input:not([type="checkbox"]):not([type="radio"]),
  .manual-ticket-modal-backdrop select { height: 48px !important; min-height: 48px !important; font-size: 16px; }
  .manual-ticket-modal-backdrop .modal-form-actions { position: sticky; bottom: 0; gap: 12px; margin: 0 -12px -12px; padding: 12px; background: #fff; border-top: 1px solid #e8edf2; }
  .finance-page .link-btn { min-height: 44px; }
  html:has(.mobile-app-shell main.page-finance),
  body:has(.mobile-app-shell main.page-finance) { height: auto; overflow-x: clip; overflow-y: visible; }
  .mobile-app-shell main.page-finance { height: auto; max-height: none; overflow: visible; }
  .mobile-app-shell .finance-filter-bar input,
  .mobile-app-shell .finance-filter-bar select { min-height: 48px; height: 48px; font-size: 16px; }
  .mobile-app-shell .finance-filter-bar label { min-width: 0; }
}

@media (max-width: 400px) {
  .mobile-quote-export-group article { grid-template-columns: minmax(0, 1fr); }
  .mobile-quote-export-group article > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mobile-quote-export-excel { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .phone-create-quote,
  .phone-shortcuts button,
  .phone-task-list button { transition: none; }
}