/*
 * Phone and tablet layer, up to 1023px. Rules: packages/design/README.md.
 * Loaded after style.css and motion.css, so it has the last word below 1024px.
 * Nothing here may change the desktop site (1024px and wider): every rule is
 * inside a width or touch media query, or styles markup that desktop never
 * shows (the closed drawer, the phone-only blocks).
 */

/* Astro's <Picture> wraps <img>; let the wrapper take no box of its own so the
   image lays out exactly as a bare <img> did. */
picture {
  display: contents;
}

/* Phone/tablet-only blocks are hidden on desktop. */
.dash-lite,
.principles-accordion,
.process-icon,
.toc-mobile {
  display: none;
}

/* Touch screens of any width: form fields at 16px so iOS does not zoom. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* ---------------------------------------------------------------------------
 * Drawer menu. A closed <dialog> is not rendered, so these rules only matter
 * when the menu is open (phone/tablet).
 * ------------------------------------------------------------------------- */
html.drawer-open {
  overflow: hidden;
}
.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pj-ink);
  overflow: hidden;
  /* Not scrollable at all: with `hidden` the browser scrolled it sideways to
     show the focused close button while the panel slid in from off screen,
     so the panel jumped left and back. */
  overflow: clip;
}
.drawer::backdrop {
  background: rgb(5 6 8 / 0.62);
}
.drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  gap: var(--pj-space-5);
  padding: calc(var(--pj-space-3) + env(safe-area-inset-top))
    calc(var(--pj-space-5) + env(safe-area-inset-right))
    calc(var(--pj-space-5) + env(safe-area-inset-bottom)) var(--pj-space-5);
  background: var(--pj-surface);
  border-left: 1px solid var(--pj-line);
  box-shadow: -20px 0 50px rgb(0 0 0 / 0.35);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[open] .drawer-panel {
  animation: drawer-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer[open] .drawer-panel {
    animation: none;
  }
}
.drawer-close {
  align-self: flex-end;
  width: var(--pj-tap);
  height: var(--pj-tap);
  margin-right: calc(-1 * var(--pj-space-2));
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pj-ink);
  font-size: 30px;
  line-height: 1;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  margin-top: calc(-1 * var(--pj-space-3));
}
.drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 18px;
  border-bottom: 1px solid var(--pj-line);
}
.drawer .drawer-login,
.drawer .drawer-contact {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}
/* In the drawer the language menu is a full-width button whose list opens in
   place below it (no overlay inside the panel). */
.drawer-language .lang-menu-button {
  width: 100%;
  min-height: var(--pj-tap);
  padding: 0 var(--pj-space-4);
  font-size: 16px;
  border-color: #3a3f4b;
  border-radius: 12px;
}
.drawer-language .lang-menu-chevron {
  margin-left: auto;
}
.drawer-language .lang-menu-list {
  position: static;
  display: grid;
  gap: var(--pj-space-2);
  margin-top: var(--pj-space-2);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.drawer-language .lang-menu-list[hidden] {
  display: none;
}
.drawer-language .lang-menu-list a {
  min-height: var(--pj-tap);
  padding: 0 var(--pj-space-4);
  border: 1px solid #3a3f4b;
  border-radius: 12px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * Phone and tablet (up to 1023px)
 * ------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  html {
    scroll-padding-top: calc(84px + env(safe-area-inset-top));
  }
  body {
    font-size: var(--pj-fs-body);
    line-height: 1.65;
  }
  html[lang='zh-CN'] body {
    line-height: 1.75;
  }

  /* Page gutters, never under the notch. */
  .wrap {
    padding-left: max(var(--pj-gutter), env(safe-area-inset-left));
    padding-right: max(var(--pj-gutter), env(safe-area-inset-right));
  }

  /* Header: brand on the left, menu button on the right. Everything else is
     in the drawer. */
  .header-wrap {
    top: calc(var(--pj-space-2) + env(safe-area-inset-top));
    margin-top: calc(var(--pj-space-2) + env(safe-area-inset-top));
    padding-left: max(var(--pj-space-3), env(safe-area-inset-left));
    padding-right: max(var(--pj-space-3), env(safe-area-inset-right));
  }
  .header {
    height: 60px;
    padding: 0 var(--pj-space-2) 0 var(--pj-space-4);
    border-radius: 30px;
    gap: var(--pj-space-3);
  }
  .header .nav,
  .header .nav.open,
  .nav-tools > .lang-menu,
  .nav-tools > .button {
    display: none;
  }
  .brand {
    min-height: var(--pj-tap);
  }
  .header .brand {
    font-size: 20px;
  }
  /* A link standing alone on its line (not inside a sentence) gets a full
     tap row, e.g. the email address on the site notes page. */
  .tap-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--pj-tap);
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pj-tap);
    height: var(--pj-tap);
    padding: 0;
    border-radius: 50%;
    color: #c5d3eb;
    font-size: 22px;
  }

  /* Type scale (packages/design/README.md section 3). */
  html[lang] :is(.page-head h1, .prose h1, .contact-head h1) {
    font-size: var(--pj-fs-h1);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  html[lang]
    :is(
      .section-head h2,
      .faq-layout h2,
      .center-heading h2,
      .benefit-copy h2,
      .closing h2,
      .about-grid h2,
      .prose h2
    ) {
    font-size: var(--pj-fs-h2);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  html[lang]
    :is(
      .case-card h3,
      .process-card h3,
      .detail-step h3,
      .detail-output h3,
      .note-card h2
    ) {
    font-size: var(--pj-fs-h3);
    line-height: 1.3;
    letter-spacing: 0;
  }
  html[lang='zh-CN'] :is(h1, h2) {
    line-height: 1.2;
  }
  .page-head p,
  .contact-head > p,
  .center-heading p,
  .section-head p,
  .benefit-copy > p,
  .faq-layout > div > p,
  .closing p {
    font-size: var(--pj-fs-lead);
    line-height: 1.55;
  }
  main p,
  main li,
  .case-card p,
  .process-card p,
  .faq-list p,
  .note-card p,
  .detail-output p,
  .principle-body p,
  main .notice,
  .prose .notice {
    font-size: var(--pj-fs-body);
    line-height: 1.65;
  }
  html[lang='zh-CN'] :is(main p, main li) {
    line-height: 1.75;
  }
  .eyebrow,
  .case-meta,
  .note-card .note-type,
  .article-header time,
  .breadcrumb,
  .result-count,
  .detail-step .index,
  .process-index {
    font-size: var(--pj-fs-meta);
  }
  .eyebrow {
    letter-spacing: 1.5px;
  }

  /* Buttons and controls: at least 44px tall. */
  .button,
  .button.small {
    min-height: var(--pj-tap);
  }
  .filter {
    min-height: var(--pj-tap);
    padding: 0 var(--pj-space-4);
    font-size: 16px;
  }
  .search {
    min-height: 48px;
    font-size: 16px;
  }
  .backlink,
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: var(--pj-tap);
  }
  .backlink {
    font-size: 16px;
  }

  /* Contact page: heading block, then the email card. */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--pj-stack);
    padding: var(--pj-space-7) 0 var(--pj-section-y);
  }
  .contact-card {
    padding: var(--pj-space-5);
  }
  .contact-card .email-address {
    font-size: 20px;
    overflow-wrap: anywhere;
    min-height: var(--pj-tap);
    display: flex;
    align-items: center;
    margin-bottom: var(--pj-space-4);
  }
  .contact-card .copy-email {
    min-height: var(--pj-tap);
    font-size: 16px;
  }
  .contact-card .form-note {
    font-size: var(--pj-fs-meta);
    line-height: 1.6;
  }

  /* Footer: brand row, then link groups (two columns on phones), then the
     bottom line stacked. Every link is a 44px row. */
  .footer {
    padding-bottom: calc(var(--pj-space-6) + env(safe-area-inset-bottom));
  }
  .footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pj-space-6) var(--pj-space-4);
  }
  .footer-top > .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-intro {
    font-size: 16px;
  }
  .footer-email {
    display: inline-flex;
    align-items: center;
    min-height: var(--pj-tap);
    font-size: 16px;
  }
  .footer h4 {
    font-size: var(--pj-fs-meta);
    margin-bottom: var(--pj-space-1);
  }
  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 16px;
  }
  .footer-links a {
    display: flex;
    align-items: center;
    min-height: var(--pj-tap);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pj-space-2);
    font-size: var(--pj-fs-meta);
  }
  .motion-toggle {
    min-height: var(--pj-tap);
    padding: 0 var(--pj-space-4);
    font-size: var(--pj-fs-meta);
  }

  /* ---- Home: hero ------------------------------------------------------- */
  .page-frame {
    width: 100%;
    border: 0;
  }
  .reference-hero {
    padding-top: var(--pj-space-7);
  }
  .hero-copy {
    padding: 0 var(--pj-gutter);
  }
  .announcement {
    min-height: var(--pj-tap);
    max-width: 100%;
    padding: var(--pj-space-2) var(--pj-space-4);
    font-size: var(--pj-fs-meta);
    pointer-events: auto;
  }
  html[lang] .hero-copy h1 {
    font-size: var(--pj-fs-display);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: var(--pj-space-5) 0 var(--pj-space-4);
  }
  html[lang='zh-CN'] .hero-copy h1 {
    line-height: 1.25;
  }
  .hero-copy p {
    font-size: var(--pj-fs-lead);
    line-height: 1.55;
    padding: 0;
    margin: 0 auto var(--pj-space-5);
    max-width: 34em;
  }
  .hero-copy .button {
    pointer-events: auto;
  }
  /* Static tile band behind a small concept card. */
  .hero-stage {
    height: auto;
    margin-top: var(--pj-space-6);
    padding: var(--pj-space-6) var(--pj-gutter) 0;
  }
  .tile-grid {
    inset: 0 -3px auto;
    height: 150px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
    pointer-events: none;
  }
  .glow-tile:nth-child(n + 25) {
    display: none;
  }
  .glow-tile:before {
    animation: none;
    opacity: 0.35;
  }
  .glow-tile .app-glyph,
  .dashboard-frame,
  .stage-fade {
    display: none;
  }
  .dash-lite {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--pj-space-4) var(--pj-space-4) var(--pj-space-3);
    border: 1px solid #2c3140;
    border-radius: 18px;
    background: rgb(20 22 28 / 0.92);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.45);
    text-align: left;
  }
  .dash-lite-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pj-space-3);
  }
  .dash-lite-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--pj-space-2);
    font-size: 14px;
    font-weight: 500;
  }
  .dash-lite-brand .brand-symbol {
    width: 20px;
  }
  .dash-lite .concept-badge {
    font-size: 12px;
  }
  .dash-lite-heading {
    margin: var(--pj-space-3) 0 var(--pj-space-1);
    font-size: 20px;
    line-height: 1.3;
  }
  .dash-lite-title {
    margin: 0 0 var(--pj-space-2);
    color: var(--pj-muted);
    font-size: 13px;
  }
  .dash-lite ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .dash-lite li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: var(--pj-space-2);
    min-height: 40px;
    border-top: 1px solid #262a35;
    font-size: 14px;
  }
  .dash-lite .activity-icon svg {
    width: 18px;
    height: 18px;
  }
  .dash-lite .status-pill {
    font-size: 12px;
  }
  .hero-footnote {
    max-width: none;
    margin: 0;
    padding: var(--pj-space-4) var(--pj-gutter) var(--pj-space-5);
    font-size: var(--pj-fs-meta);
    line-height: 1.5;
  }

  /* ---- Home: brand animation -------------------------------------------- */
  .film-section {
    padding: var(--pj-section-y) var(--pj-gutter);
  }
  .pill-label {
    font-size: var(--pj-fs-meta);
  }
  .brand-film {
    max-width: 560px;
    width: 100%;
  }
  .film-tagline {
    font-size: var(--pj-fs-body);
  }

  /* ---- Home: design principles as an accordion -------------------------- */
  .benefit-scroll {
    height: auto;
    min-height: 0;
    padding: var(--pj-section-y) var(--pj-gutter);
  }
  .benefit-sticky {
    position: static;
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  .benefit-copy .tabs,
  .benefit-display {
    display: none;
  }
  .principles-accordion {
    display: block;
    margin-top: var(--pj-stack);
    border-bottom: 1px solid var(--pj-line);
  }
  .principles-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pj-space-4);
    min-height: 56px;
    padding: var(--pj-space-3) 0;
    border-top: 1px solid var(--pj-line);
    font-size: var(--pj-fs-h3);
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
  }
  .principles-accordion summary::-webkit-details-marker {
    display: none;
  }
  .principles-accordion summary::after {
    content: '+';
    flex: none;
    font-size: 24px;
    font-weight: 300;
    color: var(--pj-muted);
  }
  .principles-accordion details[open] summary::after {
    content: '−';
  }
  .principle-body {
    padding-bottom: var(--pj-space-5);
  }
  .principle-body p {
    margin: 0;
    color: #c4cad6;
  }
  /* The principle illustrations carry tiny labels: text only below 1024px. */
  .principle-art {
    display: none;
  }

  /* ---- Home: process steps as compact cards ----------------------------- */
  .process-section {
    padding: var(--pj-section-y) var(--pj-gutter);
  }
  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pj-card-gap);
    margin-top: var(--pj-stack);
  }
  .process-card {
    padding: var(--pj-space-5);
    border-radius: 18px;
  }
  .process-art {
    display: none;
  }
  .process-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #1b2231;
    color: #a9c3ff;
  }
  .process-icon svg {
    width: 28px;
    height: 28px;
  }
  .process-card h3 {
    margin: var(--pj-space-4) 0 var(--pj-space-2);
  }
  .process-card p {
    margin: 0;
  }

  /* ---- Use-case cards (home preview and list page) ---------------------- */
  .section {
    padding: var(--pj-section-y) var(--pj-gutter);
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pj-space-3);
    margin-bottom: var(--pj-stack);
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pj-card-gap);
  }
  .case-art,
  .case-card:nth-child(n) .case-art {
    height: 160px;
  }
  .case-art .mini-window-title,
  .case-art .sticker {
    display: none;
  }
  .case-card h3 {
    margin-top: var(--pj-space-2);
  }

  /* ---- Home: FAQ, one column: heading, intro, list, button -------------- */
  .faq-layout {
    display: flex;
    flex-direction: column;
    gap: var(--pj-space-4);
  }
  .faq-layout > div:first-child {
    display: contents;
  }
  .faq-layout h2 {
    order: 1;
    margin: 0;
  }
  .faq-layout > div:first-child > p {
    order: 2;
    margin: 0;
  }
  .faq-list {
    order: 3;
    width: 100%;
  }
  .faq-layout > div:first-child > .button {
    order: 4;
    align-self: flex-start;
    margin-top: var(--pj-space-3);
  }
  .faq-list details {
    padding: 0;
  }
  .faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pj-space-4);
    min-height: 56px;
    padding: var(--pj-space-2) 0;
    font-size: var(--pj-fs-body);
    line-height: 1.4;
  }
  .faq-list details p {
    margin: 0 0 var(--pj-space-4);
  }

  /* ---- Closing call to action ------------------------------------------- */
  .closing {
    padding: var(--pj-section-y) var(--pj-gutter);
  }

  /* ---- Page heads, notices ---------------------------------------------- */
  .page-head {
    padding: var(--pj-space-7) 0 var(--pj-space-6);
  }
  .footer-bottom {
    margin-top: var(--pj-space-6);
  }
  .notice {
    padding: var(--pj-space-4);
    line-height: 1.6;
  }

  /* ---- Use cases list: filters ------------------------------------------ */
  .catalog-tools {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pj-space-3);
  }
  .filters {
    flex-wrap: wrap;
    gap: var(--pj-space-2);
  }

  /* ---- Use case detail -------------------------------------------------- */
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--pj-stack);
  }

  /* ---- FAQ page: section list becomes a collapsed box after the notice -- */
  .docs-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--pj-space-7) 0 var(--pj-section-y);
  }
  .docs-sidebar {
    display: none;
  }
  .toc-mobile {
    display: block;
    margin: 0 0 var(--pj-space-6);
    border: 1px solid var(--pj-line);
    border-radius: 14px;
  }
  .toc-mobile summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--pj-space-4);
    font-size: var(--pj-fs-body);
    cursor: pointer;
  }
  .toc-mobile nav {
    display: flex;
    flex-direction: column;
    padding: 0 var(--pj-space-4) var(--pj-space-2);
  }
  .toc-mobile nav a {
    display: flex;
    align-items: center;
    min-height: var(--pj-tap);
    border-top: 1px solid var(--pj-line);
  }

  /* ---- Journal and article ---------------------------------------------- */
  .note-card {
    grid-template-columns: 1fr 24px;
    gap: var(--pj-space-3);
  }
  .note-card .note-type {
    grid-column: 1 / -1;
  }
  .article-body {
    padding: var(--pj-space-7) 0 var(--pj-section-y);
  }

  /* ---- About ------------------------------------------------------------ */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--pj-space-5);
  }
}

/* ---------------------------------------------------------------------------
 * Phone only (up to 767px)
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Footer link groups side by side (short labels); brand row above. */
  .footer-top {
    grid-template-columns: 0.8fr 1fr 1.2fr;
    gap: var(--pj-space-5) var(--pj-space-3);
  }
  .footer {
    padding-top: var(--pj-space-6);
  }
  /* Process steps: icon on the left, text on the right. */
  .process-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: var(--pj-space-4);
    align-items: start;
    padding: var(--pj-space-4);
  }
  .process-card h3 {
    margin: 0 0 var(--pj-space-1);
    padding-right: var(--pj-space-6);
  }
  .process-icon,
  .process-card h3,
  .process-card p {
    grid-column: 2;
  }
  .process-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  /* One column everywhere; decorative art goes. */
  .process-grid,
  .cards {
    grid-template-columns: 1fr;
  }
  .case-art,
  .case-card:nth-child(n) .case-art {
    display: none;
  }
  .case-card h3 {
    margin-top: var(--pj-space-1);
  }

  .faq-list summary {
    min-height: 52px;
  }
  .brand > .brand-symbol {
    width: 29px;
  }
  .announcement {
    border-radius: 12px;
  }
  .glow-tile {
    border-radius: 7px;
  }
  .pill-label {
    padding: var(--pj-space-2) var(--pj-space-4);
    margin-bottom: var(--pj-space-5);
  }
  .brand-film {
    border-width: 5px;
    border-radius: 20px;
  }
  .video-play {
    bottom: 5%;
  }
  .footer .brand {
    font-size: 24px;
  }
  .hero-copy p br {
    display: none;
  }
  /* No art above the category label on phones. */
  .case-meta {
    margin-top: 0;
  }
  .principle-body {
    padding-bottom: var(--pj-space-4);
  }
  .dash-lite li {
    min-height: 36px;
  }
  .reference-hero {
    padding-top: 40px;
  }
  /* Tighter gaps inside home sections (keeps the phone home page short). */
  .section-head {
    margin-bottom: var(--pj-space-4);
  }
  .principles-accordion,
  .process-grid {
    margin-top: var(--pj-space-4);
  }
  .faq-layout {
    gap: var(--pj-space-3);
  }
  .hero-stage {
    margin-top: var(--pj-space-4);
    padding-top: var(--pj-space-4);
  }
  .hero-footnote {
    padding-top: var(--pj-space-3);
    padding-bottom: var(--pj-space-4);
  }
}