/* V18 full-device responsive layer. Loaded after V17 so business markup stays compatible. */
:root {
  --v18-viewport-height: 100vh;
  --v18-keyboard-height: 0px;
  --v18-safe-top: env(safe-area-inset-top, 0px);
  --v18-safe-right: env(safe-area-inset-right, 0px);
  --v18-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v18-safe-left: env(safe-area-inset-left, 0px);
  --v18-page-gutter: clamp(12px, 2.4vw, 36px);
  --v18-content-max: 1600px;
  --v18-readable-max: 72ch;
  --v18-fluid-title: clamp(1.75rem, 1.12rem + 2.35vw, 3.75rem);
  --v18-fluid-heading: clamp(1.25rem, 1.02rem + 1vw, 2rem);
  --v18-fluid-body: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
  --v18-fluid-space: clamp(12px, 1.2vw, 24px);
  --v18-touch-target: 44px;
}

@supports (height: 100dvh) {
  :root {
    --v18-viewport-height: 100dvh;
  }
}

html {
  min-width: 320px;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  min-width: 320px;
  min-height: var(--v18-viewport-height);
  padding-left: var(--v18-safe-left);
  padding-right: var(--v18-safe-right);
  font-size: var(--v18-fluid-body);
  overflow-wrap: anywhere;
}

body[data-v18-keyboard='open'] {
  --v18-safe-bottom: 0px;
}

*,
*::before,
*::after {
  min-width: 0;
}

:is(img, picture, video, canvas) {
  max-width: 100%;
  height: auto;
}

img {
  object-fit: cover;
}

:is(button, [role='button'], input, select, textarea, a) {
  max-width: 100%;
}

:is(button, [role='button'], input, select, textarea) {
  min-height: var(--v18-touch-target);
  touch-action: manipulation;
}

:is(input, select, textarea) {
  font-size: max(16px, 1em);
}

:is([data-ui-template-root], .workspace-panel, .panel, .ui-card, .catalog-workspace) {
  container-type: inline-size;
}

:is(.header-inner, .app-shell, [data-ui-template='admin'] .workspace, .ui-shell__main) {
  width: min(100%, var(--v18-content-max));
  margin-inline: auto;
}

:is(.hero h1, [data-ui-template='dashboard'] h1) {
  font-size: var(--v18-fluid-title);
}

:is(h2, .section-title, .panel-heading h2) {
  font-size: var(--v18-fluid-heading);
}

:is(.modal, .dialog, [role='dialog'], .shell-drawer, .family-order-sheet) {
  max-width: min(100% - (2 * var(--v18-page-gutter)), 760px);
  max-height: calc(
    var(--v18-viewport-height) - var(--v18-safe-top) - var(--v18-safe-bottom) - 24px
  );
  overscroll-behavior: contain;
}

:is(.modal, .dialog, [role='dialog'], .shell-drawer, .family-order-sheet)
  :is(.body, .content, .modal-body, .drawer-body) {
  min-height: 0;
  overflow-y: auto;
}

[data-v18-scroll-region] {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

/* Admin tables are annotated by v18-runtime.js and become readable cards on compact screens. */
table[data-v18-card-table='true'] td[data-label]::before {
  content: attr(data-label);
}

body[data-v18-network='slow'] :is(.v17-skeleton, .skeleton) {
  animation-duration: 2.4s;
}

body[data-v18-network='slow'] img:not([fetchpriority='high']) {
  content-visibility: auto;
}

/* 320-374: smallest supported phones. */
@media (max-width: 374px) {
  :root {
    --v18-page-gutter: 12px;
    --v18-fluid-space: 12px;
  }

  .header-inner {
    padding-inline: var(--v18-page-gutter) !important;
  }

  .home-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :is(.service-grid, .category-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :is(.header-action, .login-button, .location-picker) {
    padding-inline: 10px !important;
  }

  #header-open-publish {
    min-width: 52px;
    padding-inline: 8px !important;
    font-size: 0;
    white-space: nowrap;
  }

  #header-open-publish::after {
    content: '发布';
    font-size: 14px;
  }

  [data-ui-template='admin'] :is(.workspace, .admin-workspace),
  .ui-shell__main {
    padding-inline: 12px !important;
  }
}

/* 375-479: mainstream phones. */
@media (min-width: 375px) and (max-width: 479px) {
  :root {
    --v18-page-gutter: 14px;
  }

  .home-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :is(.service-grid, .category-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 480-767: large phones, landscape phones and small foldables. */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --v18-page-gutter: clamp(16px, 4vw, 24px);
  }

  .home-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :is(.service-grid, .category-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Shared mobile shell and mobile admin card treatment. */
@media (max-width: 767px) {
  body {
    padding-bottom: var(--v18-safe-bottom);
  }

  .site-header {
    padding-top: var(--v18-safe-top);
  }

  .header-inner {
    gap: 10px !important;
  }

  .header-workspace {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  .header-actions {
    margin-left: auto;
  }

  .app-shell {
    padding-inline: var(--v18-page-gutter) !important;
  }

  :is(.toolbar, .panel-heading, .header-tools, .form-actions, .empty-actions) {
    align-items: stretch;
    flex-wrap: wrap;
  }

  :is(.toolbar, .panel-heading, .form-actions, .empty-actions) > * {
    max-width: 100%;
  }

  [data-ui-template='admin'] :is(.shell > aside, .admin-shell > .sidebar),
  .station-sidebar {
    padding-top: max(12px, var(--v18-safe-top)) !important;
  }

  [data-ui-template='admin'] :is(.workspace > header, .workspace-header),
  .station-header {
    position: relative !important;
    flex-direction: column;
    align-items: stretch !important;
    padding-top: max(12px, var(--v18-safe-top)) !important;
  }

  [data-ui-template='admin'] :is(.header-tools, .header-actions),
  .station-header .header-actions {
    width: 100%;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  table[data-v18-card-table='true'] {
    display: block;
  }

  table[data-v18-card-table='true'] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table[data-v18-card-table='true'] :is(tbody, tr, td) {
    display: block;
    width: 100%;
  }

  table[data-v18-card-table='true'] tbody {
    display: grid;
    gap: 12px;
  }

  table[data-v18-card-table='true'] tr {
    overflow: hidden;
    border: 1px solid var(--ui-color-line, rgba(34, 69, 54, 0.12));
    border-radius: var(--ui-radius-lg, 18px);
    background: var(--ui-color-surface, #fffdf8);
    box-shadow: var(--ui-shadow-sm, 0 8px 24px rgba(27, 55, 45, 0.06));
  }

  table[data-v18-card-table='true'] td {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    text-align: right !important;
  }

  table[data-v18-card-table='true'] td[data-label]::before {
    color: var(--ui-color-muted, #6f7972);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: left;
  }

  table[data-v18-card-table='true'] td[colspan] {
    display: block;
    text-align: center !important;
  }

  table[data-v18-card-table='true'] td[colspan]::before {
    content: none;
  }

  :is(.shell-drawer, .family-order-sheet, [role='dialog']) {
    width: 100%;
    max-width: none;
    max-height: calc(var(--v18-viewport-height) - var(--v18-safe-top));
    margin: 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(16px + var(--v18-safe-bottom));
  }
}

/* 768-1023: tablets and foldable expanded panes. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --v18-page-gutter: clamp(20px, 3vw, 32px);
  }

  :is(.home-entry-grid, .service-grid, .category-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  [data-ui-template='admin'] :is(.metric-grid, .business-metric-grid),
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-v18-priority='tertiary'] {
    display: none !important;
  }
}

/* 1024-1439: standard desktop and large tablets. */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --v18-page-gutter: clamp(24px, 2.5vw, 36px);
    --ui-sidebar-width: clamp(220px, 19vw, 260px);
  }

  :is(.home-entry-grid, .service-grid, .category-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* >=1440: wide desktop and 2K/4K; line lengths stay bounded. */
@media (min-width: 1440px) {
  :root {
    --v18-page-gutter: clamp(28px, 2vw, 48px);
    --v18-content-max: min(88vw, 1760px);
  }

  :is(.home-entry-grid, .service-grid, .category-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :is(.hero-copy, .section-copy, .panel-copy, .empty-copy p) {
    max-width: var(--v18-readable-max);
  }
}

/* Landscape phones and short windows must keep actions reachable. */
@media (orientation: landscape) and (max-height: 560px) {
  :is(.site-header, [data-ui-template='admin'] .workspace > header, .station-header) {
    position: relative !important;
  }

  :is(.modal, .dialog, [role='dialog'], .shell-drawer, .family-order-sheet) {
    max-height: calc(var(--v18-viewport-height) - 8px);
    overflow-y: auto;
  }
}

/* Foldable browsers exposing hinge segments keep content out of the hinge. */
@media (horizontal-viewport-segments: 2) {
  [data-ui-template-root] {
    padding-left: max(var(--v18-page-gutter), env(viewport-segment-right 0 0));
    padding-right: max(var(--v18-page-gutter), env(viewport-segment-left 1 0));
  }
}

body[data-display-mode='senior'],
body.senior-mode {
  --v18-touch-target: 52px;
  --v18-fluid-body: clamp(1.0625rem, 1rem + 0.36vw, 1.3125rem);
  line-height: 1.75;
}

body[data-display-mode='senior'] :is(p, li, label, input, select, textarea, button),
body.senior-mode :is(p, li, label, input, select, textarea, button) {
  line-height: 1.65;
}

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

@media (prefers-contrast: more) {
  :is(button, input, select, textarea, .ui-card, .panel) {
    border-width: 2px !important;
  }
}

@container (max-width: 520px) {
  :is(.two-column, .detail-layout, .form-grid, .business-workspace-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.panel-heading, .card-heading) {
    align-items: stretch;
    flex-direction: column;
  }
}