/* Screen-only, mobile-first layout layer. Print documents keep their own sizing. */
@media screen {
  :is(.front-body, .admin-body) { --page-gap: clamp(16px, 2vw, 28px); }
  :is(.front-body, .admin-body) :is(main, section, article, aside, form, fieldset, .row > *, .card) { min-width: 0; }
  :is(.front-body, .admin-body) :is(img, video, canvas) { max-width: 100%; }
  :is(.front-body, .admin-body) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { max-width: 100%; }
  :is(.front-body, .admin-body) :is(h1, h2, h3, p, label, legend, a, td, dd, pre) { overflow-wrap: anywhere; }
  :is(.front-body, .admin-body) pre { white-space: pre-wrap; }
  :is(.front-body, .admin-body) :is(.table-responsive, .ux-table-scroll, .backend-table-region, .admin-table-wrap) { max-width: 100%; overflow-x: auto; }
  .front-body .front-main { padding-inline: var(--page-gap); }
  .front-body.home-page .front-main { padding-inline: 0; }
  .front-body.home-page .container { padding-inline: var(--page-gap); }
  .front-body :is(.front-page-heading h1, .content-story-header h1, .calculator-heading h1, .toy-studio-heading h1, .product-detail-title) {
    font-size: clamp(26px, 2vw + 18px, 42px); line-height: 1.45;
  }
  .admin-body .admin-page-heading h1 { font-size: clamp(24px, 2vw + 16px, 36px); line-height: 1.45; }
  :is(.front-body, .admin-body) :is(.front-page-heading, .admin-page-heading, .admin-toolbar, .admin-topbar, .admin-inline-actions, .admin-save-bar, .product-contact-actions) { flex-wrap: wrap; gap: 12px; }
  .front-body :is(.front-page-heading > .btn, .front-job-bottom > .btn) { width: 100%; }
  .front-body :is(.studio-products, .reference-services, .reference-actions, .front-material-grid, .front-auth, .information-service-links, .information-contact-grid, .studio-steps, .studio-services, .studio-review-grid, .content-gallery-grid, .home-faq-list, .account-overview, .studio-footer-grid) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--page-gap);
  }
  .front-body .front-auth-form { padding: var(--page-gap); }
  .front-body :is(.front-job-top, .front-job-bottom, .cart-line form) { flex-wrap: wrap; gap: 12px; }
  .front-body :is(.customer-sticky-summary, .calculator-preview) { position: static; }
  .front-body .front-progress { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .front-body .front-progress li { display: flex; align-items: center; gap: 12px; text-align: start; }
  .front-body .front-progress li > span { flex-shrink: 0; margin: 0; }
  .front-body .journey-steps { flex-direction: column; }
  .front-body .journey-steps li { flex-basis: auto; width: 100%; }
  .front-body .product-specifications th { min-width: 0; width: 40%; }
  .front-body .product-purchase-form #add-chosen-product { min-width: 0; width: 100% !important; }
  .front-body .product-info-column { padding: 16px; }
  .front-body .product-gallery-column { padding: 16px; }
  .front-body .product-purchase-actions { flex-wrap: wrap; }
  .front-body .reference-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .front-body .reference-hero h1 { font-size: clamp(30px, 4vw + 18px, 60px); white-space: normal; line-height: 1.35; }
  .front-body .reference-hero-art { min-height: 0; height: 260px; }
  .front-body .portfolio-project-card { flex-basis: 88%; }
  .front-body .content-story { max-width: 850px; }
  .front-body .content-story-body { font-size: 16px; line-height: 1.9; }
  .front-body .front-footer .studio-footer-grid .footer-quick-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .front-body .front-footer .studio-footer-grid .footer-quick-links a {
    padding-block: 4px;
    margin: 0;
    line-height: 1.5;
  }
  .front-body .front-footer .studio-footer-grid a.footer-social {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
  }
  .front-body .front-footer .footer-social svg { display: block; width: 18px; height: 18px; }
  @media (hover: hover) and (pointer: fine) {
    .front-body .front-footer .studio-footer-grid .footer-quick-links a { min-height: 32px; }
  }
  .front-body .calculator-workspace { grid-template-columns: minmax(0, 1fr); }
  .front-body .calculator-preview .viewer { min-height: 260px; height: clamp(260px, 50vh, 420px); }
  .front-body .calculator-preview-caption { flex-wrap: wrap; }
  .front-body .calculator-options { flex-wrap: wrap; }
  .front-body .calculator-options button { flex: 1 1 64px; }
  .front-body .calculator-heading { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  .front-body .calculator-heading > a { position: static; }
  .front-body #keychain { padding: 16px; }
  .front-body #keychain .kc-layout { grid-template-columns: minmax(0, 1fr); }
  .front-body #keychain :is(.kc-right, .kc-preview, .kc-left) { min-width: 0; position: static; }
  .front-body #keychain .kc-heading { flex-wrap: wrap; }
  .front-body #keychain .kc-actions { max-width: none; width: 100%; }
  .front-body #keychain .kc-mode-buttons { flex-wrap: wrap; }
  .front-body #keychain .kc-view-tools { max-width: calc(100% - 16px); flex-wrap: wrap; }
  body.front-body[data-page="art-toys"] main.front-main { padding: 20px 16px !important; }
  .front-body .art-toy-page :is(#toy-details, #toy-specs) { grid-template-columns: minmax(0, 1fr); }
  .front-body .art-toy-page :is(.toy-reference .toy-uploads, .toy-packages) { grid-template-columns: minmax(0, 1fr); }
  .front-body .art-toy-page .toy-studio-package { grid-column: auto; grid-row: auto; }
  .front-body .art-toy-page .toy-studio-steps { flex-wrap: wrap; margin-inline: 0; gap: 12px; }
  .front-body .art-toy-page .toy-studio-steps a { white-space: normal; }
  .front-body .art-toy-page .toy-style-selector button { white-space: normal; }
  .front-body .art-toy-page .toy-submit-actions { flex-wrap: wrap; }
  .front-body .art-toy-page .toy-submit-actions > * { width: 100%; }
  .admin-body :is(.reference-metrics, .reference-main-grid, .reference-bottom-grid, .quote-board, .sales-body, .sales-summary) { grid-template-columns: minmax(0, 1fr); }
  .admin-body .sales-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .admin-body .sales-summary > a { grid-column: 1 / -1; }
  .admin-body .sales-stat { min-width: 0; }
  .admin-body .sales-stat strong { font-size: clamp(20px, 1.5vw + 8px, 28px); overflow-wrap: anywhere; line-height: 1.4; }
  .admin-body .sales-stat small { display: block; line-height: 1.6; }
  .admin-body .sales-panel > header { flex-wrap: wrap; gap: 8px; }
  .admin-body .sales-period { max-width: 100%; white-space: normal; }
  .admin-body .reference-main-grid .recent-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "customer customer" "status total" "date date";
    gap: 8px 12px;
    align-items: start;
  }
  .admin-body .recent-order .order-box-icon { position: absolute; top: 16px; left: 0; }
  .admin-body .recent-customer { grid-area: customer; min-width: 0; padding-left: 40px; }
  .admin-body .recent-customer strong { display: block; font-size: 13px; line-height: 1.6; }
  .admin-body .recent-customer small { font-size: 14px; line-height: 1.6; }
  .admin-body .recent-order .status-pill {
    grid-area: status; justify-self: start; max-width: 100%;
    overflow-wrap: normal; word-break: normal; padding: 4px 8px;
  }
  .admin-body .recent-total { grid-area: total; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .admin-body .recent-order time { grid-area: date; margin: 0; text-align: start; line-height: 1.6; }
  .admin-body .admin-content { padding-inline: var(--page-gap); }
  .admin-body .admin-location { min-width: 0; flex-wrap: wrap; }
  .admin-body .admin-location strong { font-size: clamp(18px, 1vw + 16px, 24px); }
  .admin-body .admin-save-bar { position: static; }
  .admin-body .admin-inline-actions { width: 100%; }
  .admin-body .admin-inline-actions > .btn { flex: 1 1 160px; }
  .admin-body.pos-page :is(.pos-workspace, .pos-layout) { grid-template-columns: minmax(0, 1fr); }
  .admin-body.pos-page .pos-bill { min-width: 0; }
  .admin-body.pos-page .pos-product-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.front-body, .admin-body) dialog { max-width: calc(100vw - 32px); max-height: 90dvh; overflow: auto; }
  @media (min-width: 576px) {
    .front-body :is(.studio-products, .reference-actions, .front-material-grid, .studio-services, .studio-review-grid, .content-gallery-grid, .account-overview, .studio-footer-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-body.pos-page .pos-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-body .front-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-body .art-toy-page :is(.toy-reference .toy-uploads, .toy-packages) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-body :is(.reference-metrics, .quote-board) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-body .art-toy-page .toy-submit-actions > * { width: auto; flex: 1; }
  }
  @media (min-width: 768px) {
    .front-body :is(.front-page-heading > .btn, .front-job-bottom > .btn) { width: auto; }
    .front-body :is(.reference-services, .information-service-links, .information-contact-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-body .journey-steps { flex-direction: row; }
    .front-body .journey-steps li { flex: 1; width: auto; }
    .front-body .portfolio-project-card { flex-basis: calc((100% - 24px) / 2); }
    .front-body .content-story-body { font-size: 17px; }
    .front-body #keychain { padding: 24px; }
    .front-body #keychain .kc-actions { width: auto; }
    .admin-body .admin-inline-actions { width: auto; }
    .admin-body .admin-save-bar { position: sticky; bottom: 8px; }
  }
  @media (min-width: 992px) {
    .front-body .studio-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .front-body :is(.front-auth, .reference-hero-inner) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-body .reference-hero-art { height: auto; min-height: 340px; }
    .front-body .calculator-workspace { grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); }
    .front-body .calculator-preview { position: sticky; top: 20px; }
    .front-body .calculator-preview .viewer { height: clamp(420px, 65vh, 720px); min-height: 420px; }
    .front-body #keychain .kc-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .front-body .art-toy-page #toy-details { grid-template-columns: 180px minmax(0, 1fr); }
    .front-body .art-toy-page #toy-specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .front-body .art-toy-page .toy-studio-package { grid-column: 2; grid-row: 1 / 5; }
    .front-body .front-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .front-body .studio-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .admin-body .reference-bottom-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    .admin-body.pos-page :is(.pos-workspace, .pos-layout) { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  }
  @media (min-width: 1200px) {
    .front-body :is(.studio-products, .reference-services, .information-service-links, .front-material-grid, .studio-steps) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .front-body.home-page .studio-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .front-body :is(.studio-services, .studio-review-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-body.pos-page .pos-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .front-body .art-toy-page .toy-reference .toy-uploads { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
    .front-body .portfolio-project-card { flex-basis: calc((100% - 48px) / 4); }
    .admin-body .reference-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .admin-body .reference-main-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  }
}