/* One responsive site for phones, foldable cover screens and unfolded screens.
   Keep this stylesheet last so each page shares the same device rules. */
@media screen {
    :root {
        --safe-left: env(safe-area-inset-left, 0px);
        --safe-right: env(safe-area-inset-right, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
    body { min-height:100vh; min-height:100dvh; padding-left:var(--safe-left); padding-right:var(--safe-right); }
    button, a, summary, input, select, textarea { touch-action:manipulation; }
    img, svg, video, canvas { max-width:100%; }
    .ui-brand, .brand, .hero-left, .report-preview, .report-info,
    .user-details, .checkout-layout > *, .task-card-top strong { min-width:0; }
    .card-header > div { min-width:0; flex:1; overflow-wrap:anywhere; }
    .user-details, .report-title, .report-meta, .info-value,
    .task-card-top strong, .checkout-resubmit, .consult-box { overflow-wrap:anywhere; }
    .ui-header nav, .header-links { align-items:center; flex-shrink:0; }
    .ui-header nav a, .header-links a, .account-logout { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    .ui-footer, .site-footer { padding-bottom:calc(28px + var(--safe-bottom)); }
    .checkout-tags { flex-wrap:wrap; }
    .credit-option input[type=checkbox] { width:20px; height:20px; min-height:20px; flex-shrink:0; }
    .share-dialog { overscroll-behavior:contain; max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - var(--safe-bottom)); }
    .share-close { width:44px; height:44px; }
    .share-actions .btn { min-height:48px; }
    .table-wrap { max-width:100%; overscroll-behavior-x:contain; }
}

/* Unfolded phones and small tablets: useful columns without desktop spacing. */
@media screen and (min-width:701px) and (max-width:1100px) {
    .store-width, .container, .hero-container { padding-inline:24px; }
    .hero-container { grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:24px!important; padding-block:32px; }
    .destiny-hero .hero-title { font-size:24px!important; letter-spacing:0; gap:8px; }
    .destiny-headline { font-size:clamp(28px,3.5vw,38px); line-height:1.5; }
    .destiny-description { font-size:15px; }
    .destiny-offer { flex-wrap:wrap; font-size:13px; gap:6px 12px; }
    .destiny-hero .cta-main { min-width:0; width:100%; padding-inline:12px; font-size:16px; }
    .destiny-questions a { font-size:15px; gap:8px; }
    .report-preview { padding:18px; }
    .preview-panel { min-height:0; }
    .preview-panel h2 { font-size:22px; }
    .preview-excerpt { font-size:14px; }
    .preview-details { font-size:13px; }
    .preview-details > div { grid-template-columns:56px minmax(0,1fr); gap:8px; }
    .preview-tabs button { min-height:44px; font-size:12px; }
    .preview-stamp { display:none; }
    .tests-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .test-content { padding:14px; }
    .test-title { font-size:17px; }
    .test-desc, .tests-grid .test-desc { font-size:14px; line-height:1.75; }
    .service-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .service-item { justify-content:flex-start; border:0; font-size:12px; }
    .service-item b { font-size:14px; }
    .catalog-intro { gap:18px; }
    .catalog-intro h2 { font-size:25px; }
    .catalog-search { width:250px; flex-shrink:0; }
    .ui-header-inner { padding:18px 24px; }
    .flow-page > .container { width:min(760px,calc(100% - 48px)); padding:32px; }
    .topic-container { width:min(900px,100%); padding-inline:24px; }
    .report-workspace { width:min(900px,100%); padding-inline:24px; }
    .checkout-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
    .checkout-product { padding:24px; }
    .checkout-price { position:static; align-items:flex-start; margin:18px 0 0; }
    .checkout-price small { margin-left:0; }
    .checkout-product h2, .checkout-product p { max-width:none; }
    .checkout-card { padding:20px; }
    .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Closed foldables and phones: readable content and thumb-sized controls. */
@media screen and (max-width:700px) {
    body { font-size:16px; }
    .store-width, .container, .hero-container { padding-inline:16px; }
    .brand-row { min-height:78px; gap:12px; }
    .brand { gap:8px; flex:1; }
    .brand-name { display:block; font-size:21px; letter-spacing:0; white-space:normal; }
    .brand-planet { display:block; border:0; padding:0; font-size:11px; line-height:1.5; }
    .brand-caption { display:none; }
    .brand-mark { width:38px; height:38px; flex-shrink:0; }
    .header-links { gap:10px; font-size:13px; }
    .header-links > a:first-child, .header-links .desktop-link { display:none; }
    .header-links .account-link { padding:8px 12px; }
    .brand-row .account-logout, .ui-header-inner .account-logout { padding:8px 12px; min-height:44px; font-size:14px; }
    .top-bar { font-size:11px; }
    .top-bar .store-width { gap:10px; }
    .top-bar #userNavHtml { max-width:44%; overflow:hidden; text-overflow:ellipsis; }
    .hero-container { grid-template-columns:minmax(0,1fr)!important; gap:26px!important; padding-block:28px; }
    .destiny-hero { padding:0; }
    .destiny-hero .hero-title { font-size:clamp(22px,5.8vw,30px)!important; gap:9px; line-height:1.4; margin-bottom:16px; letter-spacing:0; }
    .destiny-hero .hero-title img { width:28px; height:28px; }
    .destiny-headline, .destiny-hero .destiny-headline { font-size:clamp(28px,7.4vw,38px); line-height:1.45; }
    .destiny-hero .destiny-description { font-size:15px; }
    .destiny-rule { margin-block:18px; }
    .destiny-offer { flex-wrap:wrap; font-size:13px; gap:6px 12px; }
    .destiny-offer strong { font-size:18px; }
    .destiny-hero .cta-main { width:100%; min-width:0; min-height:54px; padding:14px 12px; font-size:17px; }
    .destiny-questions { max-width:none; margin-top:18px; }
    .destiny-questions a { font-size:16px; gap:10px; min-height:54px; }
    .destiny-questions b { font-size:12px; padding:3px 6px; }
    .report-preview { padding:18px; }
    .preview-heading { font-size:15px; }
    .preview-tabs button { min-height:44px; font-size:13px; }
    .preview-panel { min-height:0; }
    .preview-panel h2 { font-size:22px; }
    .report-preview .preview-excerpt { font-size:15px; }
    .report-preview .preview-details { font-size:14px; }
    .preview-details > div { grid-template-columns:60px minmax(0,1fr); }
    .preview-cta { min-height:48px; font-size:14px; }
    .preview-footnote { font-size:12px; }
    .service-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
    .service-item { justify-content:flex-start; border:0; font-size:11px; }
    .service-item b { font-size:13px; }
    .catalog-intro { display:block; padding-block:26px 16px; }
    .catalog-intro h2 { font-size:24px; }
    .catalog-intro p { font-size:14px; }
    .catalog-search { width:100%; margin-top:16px; min-height:48px; }
    .catalog-search input { font-size:16px; }
    .nav-tabs { flex-wrap:nowrap; overflow-x:auto; gap:4px; padding-bottom:3px; scroll-padding-inline:8px; }
    .nav-tab { min-height:44px; font-size:14px; padding:10px 14px; flex-shrink:0; }
    .nav-tab small { font-size:11px; }
    .catalog-toolbar { font-size:12px; gap:8px; flex-wrap:wrap; }
    .tests-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .test-image { height:128px; }
    .test-content { padding:14px 12px; }
    .test-title { font-size:16px; line-height:1.5; min-height:48px; letter-spacing:0; }
    .tests-grid .test-desc { font-size:14px; line-height:1.7; min-height:0; }
    .product-benefits { flex-wrap:wrap; gap:5px; }
    .product-benefits span { font-size:11px; }
    .test-footer { margin-top:auto; }
    .test-footer .btn-test { min-height:46px; font-size:14px; }
    .test-badge, .image-category { font-size:11px; }
    .guide-options { grid-template-columns:1fr; }
    .guide-option { font-size:14px; }
    .buying-guide summary { font-size:15px; flex-wrap:wrap; }
    .ui-header-inner { padding:14px 16px; gap:12px; }
    .ui-brand { gap:8px; flex:1; }
    .ui-brand b { display:block; font-size:20px; line-height:1.35; }
    .ui-brand em { display:block; border:0; margin:2px 0 0; padding:0; font-size:11px; }
    .ui-brand small { display:none; }
    .ui-brand img { width:36px; height:36px; flex-shrink:0; }
    .ui-header nav { gap:10px; font-size:13px; }
    .ui-header nav > a:first-child { display:none; }
    .ui-header nav .ui-icon { width:16px; height:16px; }
    .ui-stepper { padding-inline:16px; margin:22px auto; }
    .ui-stepper li { gap:5px; font-size:12px; }
    .ui-stepper li > span { width:26px; height:26px; font-size:11px; }
    .ui-stepper li:not(:last-child)::after { margin-inline:6px; }
    .flow-page > .container, .login-container { width:calc(100% - 32px); padding:24px 20px; margin-top:22px; }
    .flow-page h1, .topic-container h1, .checkout-heading h1 { font-size:26px; }
    .form-group label, .form-label, label, .info-row { font-size:15px; }
    input:not([type=radio]):not([type=checkbox]), select, textarea,
    #chartForm input, #chartForm select { min-height:48px; font-size:16px!important; }
    #chartForm .form-group { grid-template-columns:1fr 90px; gap:10px; padding-block:16px; }
    #chartForm .form-group > label { grid-column:1 / -1; font-size:15px; }
    #chartForm .form-group > span { font-size:12px!important; }
    #chartForm input, #chartForm select { padding:10px!important; }
    .info-value { max-width:68%; }
    .tip, .notice, .warning-text, .form-footer, .panel p { font-size:14px; }
    .btn, .primary, .submit-btn, .checkout-primary { min-height:50px; font-size:16px; }
    .btn-group .btn { font-size:15px; }
    .topic-container { padding-inline:16px; margin-top:24px; }
    .panel { padding:22px 18px; }
    .form-grid, .topic-grid { grid-template-columns:1fr; }
    legend { font-size:17px; max-width:100%; }
    label.option { min-height:52px; font-size:16px; padding:14px!important; }
    .question-progress { font-size:13px; }
    .user-card, .quick-actions, .account-page .navbar, .account-page > .section { width:calc(100% - 32px); }
    .user-card { padding:24px 20px; }
    .user-details p { font-size:13px; }
    .quick-actions { gap:8px; }
    .action-item { flex-direction:column; padding:16px 4px; font-size:13px; }
    .report-item { flex-wrap:wrap; padding:18px; }
    .report-title { font-size:17px; }
    .report-meta { font-size:13px; }
    .report-actions { width:100%; gap:10px; justify-content:space-between; font-size:14px; }
    .report-actions a { display:inline-flex; align-items:center; min-height:44px; }
    .bottom-nav { max-width:none; margin:28px 16px; padding:8px; }
    .nav-item { min-height:48px; font-size:14px; }
    .report-workspace { padding-inline:14px; margin-top:18px; }
    .report-toolbar { flex-wrap:wrap; gap:8px; }
    .report-toolbar > a, .report-toolbar button { min-height:44px; display:inline-flex; align-items:center; font-size:14px; }
    .report-header { padding:22px 20px; }
    .header-title { font-size:25px; }
    #userBirthInfo { font-size:14px; }
    #reportNavigation { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
    #reportNavigation a { min-height:44px; font-size:14px; }
    .card-header { padding:22px 20px 16px; gap:10px; }
    .card-header h2 { font-size:21px; }
    .card-content, .report-page .card-content { padding:0 20px 24px; font-size:16px; line-height:1.9; }
    .card-content h3, .card-subtitle { font-size:16px; }
    .report-facts > div { grid-template-columns:68px minmax(0,1fr); gap:10px; }
    .report-facts dt { font-size:14px; }
    .ability-chart { grid-template-columns:1fr; }
    .ability-heading { font-size:15px; }
    .ability-row p, .overseas-cities p { font-size:14px; }
    .overseas-cities { grid-template-columns:1fr; }
    .chapter-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .chapter-metrics > div { padding-inline:0; }
    .chapter-metrics > div:nth-child(even) { border:0; }
    .chapter-metrics span { font-size:12px; }
    .report-tags > span { font-size:13px; }
    .bottom-actions { flex-wrap:wrap; }
    .bottom-actions > .btn { width:100%; min-height:50px; font-size:16px; }
    .checkout-shell { padding:20px 16px calc(40px + var(--safe-bottom)); }
    .checkout-layout { grid-template-columns:minmax(0,1fr); }
    .checkout-product { min-height:0; padding:24px 20px; }
    .checkout-product h2, .checkout-product p { max-width:none; }
    .checkout-product h2 { font-size:24px; }
    .checkout-product p, .checkout-card p { font-size:15px; }
    .checkout-price { position:static; align-items:flex-start; margin-top:20px; }
    .checkout-price small { margin-left:0; }
    .checkout-card { padding:22px 20px; }
    .checkout-assurance { font-size:13px; }
    .checkout-resubmit { padding:18px; font-size:15px; }
    .consult { margin:24px auto; padding-inline:16px; }
    .consult-box { padding:24px 20px; }
    .consult button { width:100%; min-height:50px; font-size:16px; }
    .share-dialog { padding:18px; }
    .share-heading h2 { font-size:19px; }
    .share-actions { bottom:-18px; gap:8px; padding-bottom:calc(12px + var(--safe-bottom)); }
    .share-help, .share-heading p, .share-invite p { font-size:14px; }
    .share-actions .btn { font-size:15px; padding-inline:8px; }
    .report-tasks-panel { width:calc(100% - 32px); padding:18px; }
    .task-panel-list { grid-template-columns:1fr; }
    .task-panel-heading { align-items:flex-start; }
    .task-panel-heading span { display:block; margin-left:0; }
    .task-card-top strong { font-size:16px; }
    .report-task-card p, .report-task-card small { font-size:14px; }
    .ui-footer { margin-inline:16px; }
    .admin-head { height:auto; min-height:76px; padding:12px 16px; gap:12px; }
    .admin-head a { flex-wrap:wrap; gap:8px; font-size:17px; }
    .admin-head small { border:0; padding:0; }
    #app { padding-inline:16px; margin-top:24px; }
    .login-box { margin:32px auto; padding:24px 20px; }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .editor { grid-template-columns:minmax(0,1fr); }
    .editor .wide { grid-column:auto; }
    .admin-head button, .tabs button, .toolbar button, .table button { min-height:44px; }
    .table-wrap { outline:1px solid #eee; }
}

/* Keep the mobile storefront focused: the first screen should lead into products. */
@media screen and (max-width:700px) {
    body:has(.hero-banner) #reportTasksPanel { display:none!important; }
    .hero-container { gap:0!important; padding-block:20px 18px!important; }
    .destiny-hero .hero-title { margin-bottom:10px!important; font-size:18px!important; }
    .destiny-hero .destiny-headline { font-size:27px!important; line-height:1.35!important; margin-bottom:7px!important; }
    .destiny-hero .destiny-description { font-size:13px!important; line-height:1.6!important; }
    .destiny-rule, .destiny-hero .destiny-description { display:none; }
    .destiny-hero .hero-actions { margin-top:14px; }
    .destiny-hero .cta-main { min-height:48px!important; padding-block:11px!important; }
    .destiny-questions { margin-top:9px!important; }
    .destiny-questions a { min-height:42px!important; padding-block:7px!important; }
    .report-preview, .service-strip { display:none!important; }
    .catalog-intro { padding-block:18px 10px!important; }
    .catalog-intro h2 { font-size:17px!important; }
    .catalog-intro p { display:none; }
    .catalog-search { margin-top:9px!important; min-height:44px!important; padding:0 12px; }
    .catalog-search input { min-height:44px; }
    .nav-section { margin-bottom:8px!important; }
    .catalog-toolbar { margin-bottom:9px!important; }
    .tests-grid { gap:9px!important; }
    .tests-grid .test-image { height:84px!important; }
    .tests-grid .test-content { padding:10px 9px!important; }
    .tests-grid .test-title { min-height:0!important; margin-bottom:4px!important; font-size:14px!important; line-height:1.4!important; }
    .tests-grid .test-desc, .tests-grid .product-benefits { display:none!important; }
    .tests-grid .test-footer { margin-top:auto!important; padding-top:7px!important; }
    .tests-grid .test-footer .btn-test { min-height:40px!important; font-size:12px!important; }
}

@media screen and (max-width:380px) {
    .store-width, .container, .hero-container { padding-inline:12px!important; }
    .brand-row { min-height:68px!important; }
    .destiny-hero .destiny-headline { font-size:25px!important; }
    .destiny-questions a { font-size:14px!important; }
    .nav-tab { padding-inline:10px!important; }
    .tests-grid .test-title { font-size:13px!important; }
}

@media screen and (max-width:430px) {
    .ui-stepper li { flex-direction:column; gap:6px; font-size:12px; text-align:center; }
    .ui-stepper li:last-child { flex:1; }
    .ui-stepper li::after { display:none; }
}

/* Narrow cover screens: retain comfortable type instead of shrinking the site. */
@media screen and (max-width:359px) {
    .store-width, .container, .hero-container { padding-inline:12px; }
    .brand-row { flex-wrap:nowrap; gap:6px; padding-block:10px; }
    .brand-row .brand { flex-basis:auto; }
    .brand-row .brand-name { font-size:18px; }
    .brand-row .brand-mark { width:30px; height:30px; }
    .brand-row .header-links { gap:4px; font-size:12px; }
    .brand-row .header-links .account-link, .brand-row .account-logout { padding-inline:6px; font-size:12px; }
    .header-links { margin-left:auto; }
    .ui-header-inner { flex-wrap:wrap; padding:12px; gap:4px 12px; }
    .ui-brand { flex-basis:100%; }
    .ui-header nav { width:100%; justify-content:flex-end; }
    .ui-stepper li { flex-direction:column; gap:6px; font-size:11px; text-align:center; }
    .ui-stepper li:last-child { flex:1; }
    .ui-stepper li::after { display:none; }
    .tests-grid { grid-template-columns:minmax(0,1fr); }
    .test-title { min-height:0; font-size:18px; }
    .test-image { height:155px; }
    .service-row { grid-template-columns:1fr; }
    .destiny-questions a { flex-wrap:wrap; font-size:15px; }
    .destiny-questions i { display:none; }
    .preview-tabs { gap:2px; }
    .preview-tabs button { font-size:12px; }
    .report-preview { padding:16px; }
    .preview-details > div, .report-facts > div { grid-template-columns:minmax(0,1fr); gap:3px; }
    .quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .report-toolbar > div { width:100%; }
    .report-toolbar button { flex:1; justify-content:center; }
    .card-content { padding-inline:16px; }
    .card-header { padding-inline:16px; }
}

/* A physical hinge is exposed by dual-segment browsers. Keep reading/forms in
   one segment and align the storefront's two columns on either side. */
@media screen and (horizontal-viewport-segments:2) {
    :root { --hinge-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); }
    .hero-container { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:max(32px,var(--hinge-gap))!important; }
    .tests-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:max(32px,var(--hinge-gap)); }
    .flow-page > .container, .login-container, .topic-container,
    .report-workspace, .consult, .checkout-shell, .account-page > .section,
    .user-card, .quick-actions, .account-page .navbar, .report-tasks-panel {
        width:calc(env(viewport-segment-width 0 0) - 32px);
        max-width:calc(env(viewport-segment-width 0 0) - 32px);
        margin-left:16px; margin-right:0;
    }
    .checkout-layout, .form-grid, .topic-grid, .ability-chart { grid-template-columns:minmax(0,1fr); }
    .share-dialog { width:calc(env(viewport-segment-width 0 0) - 24px); margin-left:12px; }
}

@media screen and (max-height:500px) and (orientation:landscape) {
    .ui-header-inner { padding-block:10px; }
    .ui-stepper { margin-block:16px; }
    .login-container { margin-top:20px; }
    .share-dialog { max-height:calc(100dvh - 16px); }
}