/* 6 Watt Labs, phone layer.
   Load after every other stylesheet. Desktop is untouched: every rule sits
   under max-width:760px, or under the queries the theme already uses for its
   phone layout (the homepage stage at 1080px and rotated phones). */

/* ---------- Homepage stage: the step controls live in the stage bar ---------- */
@media (max-width:1080px){
  .assembly-controls{right:var(--gutter);bottom:0;width:auto;height:44px;padding:0;display:flex;align-items:center;background:none;border:0;border-radius:0}
  .assembly-buttons{display:contents}
  .assembly-step{order:2;display:block;padding:0 6px}
  .assembly-step .mono{font-size:12px;letter-spacing:.06em;color:var(--stage-muted)}
  .assembly-step [data-assembly-name],
  .assembly-buttons button>span:not([aria-hidden]){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .assembly-buttons [data-assembly-prev]{order:1}
  .assembly-buttons [data-assembly-next]{order:3}
  .assembly-buttons button{position:relative;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;font-size:17px;line-height:1}
  .assembly-buttons button::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--stage-ink) 26%,transparent);border-radius:var(--radius);transition:border-color .2s}
  .assembly-buttons button:hover:not(:disabled){background:none}
  .assembly-buttons button:hover:not(:disabled)::before{border-color:var(--stage-ink)}
  .assembly-buttons button:focus-visible{outline-offset:-4px!important}
  .stage-bar .phases{width:auto;min-width:0;max-width:calc(100% - 150px);overflow:hidden}
  .phases span.is-current{font-size:12px}
  .stage-copy{bottom:64px}
}
@media (max-width:359px){
  .phases span:not(.is-current){display:none}
}

/* ---------- Phone type and touch: portrait phones and rotated phones ---------- */
@media (max-width:760px),(max-width:1080px) and (max-height:600px) and (orientation:landscape){
  :root{--m-tap:44px;--m-cta:52px;--m-body:16px;--m-small:15px;--m-lede:17px;--m-mono:12px}

  main,.site-footer{overflow-x:clip}

  /* Header */
  .site-header .brand{min-height:var(--m-tap)}
  .js .menu-toggle{min-height:var(--m-tap);margin-right:-10px;padding:0 10px 0 14px;gap:12px;font-size:16px}
  .js #main-nav.open .login-link{min-height:var(--m-cta);font-size:16px!important}
  /* The open menu covers the page instead of floating over live links. */
  .js #main-nav.open .nav-cta{font-size:16px}
  .js #main-nav.open{min-height:calc(100svh - var(--header-h));padding-bottom:max(28px,env(safe-area-inset-bottom))}

  /* Data labels: JetBrains Mono, never under 12px */
  .mono,.kicker,.fig-bar,.glyph-caption,
  .public-section-links a,.topic-links a,.research-back,.back-link,.privacy-sections a,
  .example-note b,.offer-number,.process-path .step,.step-output,.rail-num,
  .about-evidence h3,.about-fact-list dt,.lesson-number,.quality-provenance,
  .research-card-number,.research-tag,.research-example-label,.research-steps button span,
  .research-stage-label,.research-records dt,.research-decision span,.research-review-record span,
  .research-flow-feedback,.research-other span,.quality-artifact figcaption,
  .quality-demo-steps button span,.quality-demo-status dt,
  main label:not(.auth-remember)>span:not(.checkbox-copy),.brief-layout .brief-details summary span,
  .planner-intro-note,.planner-form legend span,.planner-result>label,.planner-action-status{font-size:var(--m-mono)!important}
  .planner-result::before{font-size:var(--m-mono)}

  /* Body copy: 16px, line-height about 1.55. The studio and theme sheets set
     these at many specificities, so the phone sizes are marked important. */
  .offer p,.rail p:not(.rail-price),.fit-note p:not(.kicker),.audience-row p,
  .site-footer p,.site-footer a,
  .service-detail li,.example-note,.offer-row p,.process-path p,
  .about-grid p,.about-principles p,.about-audiences p,.about-evidence p,.about-fact-list dd,
  .education-comparison p,.reading-note,
  .quality-work-card p:not(.quality-provenance),.research-card p,.research-honesty p,.research-records dd,
  .research-hold p,.research-measures p,.research-other a,.quality-case-details p,
  .quality-demo-heading p,.quality-demo-status dd,.quality-demo-human p,
  .plain-note p,.planner-note p:not(.kicker),.planner-note a,.planner-result>p,
  .planner-details>p,.form-errors,.flash,
  main label,.planner-form label,.field--checkbox label,.auth-remember,.auth-remember span,.draft-recovery__consent,.draft-recovery,
  .brief-layout .brief-details summary,.planner-details summary,.brief-layout .form-actions :is(button,a),
  .auth-help,.auth-methods a,
  .text-link,.text-button,.planner-secondary,.offer-link,.research-card-link{font-size:var(--m-body)!important;line-height:1.55}

  /* Secondary notes: 15px, never smaller */
  .helptext,.planner-field small,.form-privacy,main p>small,
  .draft-recovery__help,.draft-recovery__status,#draft-status,.errorlist,
  .planner-privacy,.planner-carry p,.planner-error,.planner-fields .planner-estimate,
  .research-local-note,.preview-note,.quality-limitation,.quality-demo-foot,.footer-bottom span{font-size:var(--m-small)!important;line-height:1.55}

  .copy-block .kicker,.page-intro .kicker,.section-head .kicker{letter-spacing:.08em}

  /* Links and buttons: at least 44px to touch */
  .text-link,.text-button,.planner-secondary{min-height:var(--m-tap);padding:0;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  .planner-secondary{display:inline-flex;align-items:center}
  .form-actions .text-button,.planner-actions .planner-secondary{align-self:flex-start}
  .offer-link,.research-card-link{min-height:var(--m-tap);align-items:center}
  .public-section-links a,.topic-links a{min-height:var(--m-tap);padding:0 14px}
  .public-section-links,.topic-links{gap:8px}
  .back-link,.research-back,.quality-artifact figcaption a{display:inline-flex;align-items:center;min-height:var(--m-tap);line-height:1.55}
  .privacy-sections a{display:inline-flex;align-items:center;min-height:var(--m-tap);padding:0 12px}
  .auth-methods a{display:inline-flex;align-items:center;min-height:var(--m-tap);padding:0}
  .draft-recovery summary{display:flex;align-items:center;min-height:var(--m-tap)}
  .field--checkbox label,.auth-remember,.draft-recovery__consent{min-height:var(--m-tap);align-items:flex-start;padding-top:10px}
  .research-other a,.quality-example-next a,.planner-note>a{display:inline-flex;align-items:center;min-height:var(--m-tap)}
  .flow-set>span{font-size:14px;padding:8px 8px}
  /* Links inside running text keep their line; padding widens the touch area only. */
  main :is(p,li,dd,small,.helptext)>a:not([class]){padding-block:12px}

  /* Footer */
  .footer-brand{min-height:var(--m-tap);align-items:center}
  .site-footer>div:not(.footer-bottom):not(:first-child){gap:0}
  .site-footer>div:not(.footer-bottom):not(:first-child)>a,.site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:var(--m-tap)}

  /* Forms: 16px fields so iOS never zooms, and a clear focus ring */
  main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea){min-height:52px;font-size:16px!important}
  main :is(input,select,textarea):not([type=checkbox]):not([type=file]):focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 18%,transparent)}
  main input[type=checkbox]{width:22px;height:22px}
  main input[type=file]::file-selector-button{min-height:var(--m-tap)}
}

/* ---------- Portrait phones: layout ---------- */
@media (max-width:760px){
  /* Homepage stage copy: tighter rhythm, so the drawing gets the room.
     frontier.js reads --header-h on the stage to place the drawing; 56px
     starts it 16px under the 64px header instead of 24px. */
  .frontier-home .stage{--header-h:56px}
  .copy-block .kicker{font-size:12px}
  .copy-block h1{font-size:clamp(30px,9.4vw,44px);line-height:1.02;margin:12px 0 14px}
  .copy-block h1 br{display:inline}
  .copy-block h2{margin:12px 0}
  .copy-block .lede{font-size:16px;line-height:1.55}
  .copy-block[data-block="layers"] .lede{min-height:calc(1.55em * 4)}
  .copy-block .actions{margin-top:20px;gap:4px 24px}
  .copy-block .actions .button{flex:1 1 100%;min-height:var(--m-cta);padding:0 22px;font-size:16px}
  .copy-block .actions .text-link{min-height:var(--m-tap);font-size:16px}
  .meter{margin-top:14px;font-size:12px}

  /* Primary actions: full width */
  main .button,main form button[type=submit]:not(.text-button):not(.planner-secondary),.auth-page main form>button{width:100%;min-height:var(--m-cta);font-size:16px}
  .research-stage-content section>.button+.text-button{margin-left:0}
  .form-actions,.planner-actions{align-items:stretch;gap:8px 20px}

  /* Homepage sections */
  .statement{padding:88px var(--gutter) 80px}
  .section{padding:72px var(--gutter)}
  .section-head{margin-bottom:36px}
  .section-head .kicker{margin-bottom:10px}
  .section-head p:not(.kicker){font-size:var(--m-lede)}
  .offer,.offer:nth-child(2n){padding:0 0 28px}
  .offer+.offer{padding-top:8px}
  .glyph{height:190px}
  .rail{row-gap:40px}
  .closing{padding:64px var(--gutter) 72px;gap:8px}
  .closing-cube{height:280px}
  .closing-copy h2,.closing-section h2{text-wrap:balance}
  .closing-copy p{font-size:var(--m-lede)}

  /* Inner pages */
  .page-intro{padding-top:40px}
  .page-intro h1{margin-bottom:20px}
  .page-intro>p:not(.kicker){font-size:var(--m-lede);line-height:1.55}
  .page-intro>.text-link{margin-top:24px}
  .public-section-links,.topic-links{margin-top:28px}
  .section-heading{margin-bottom:40px}
  .section-heading>p,.research-teaser p:not(.kicker),.quality-research-intro p,.service-detail>div:last-child>p:not(.example-note),.studio-section>div:last-child>p{font-size:var(--m-lede)}

  /* Page figures: full width, framed, sized for the drawing inside */
  .page-fig{height:340px;margin-top:40px}
  .page-fig[data-kind="map"]{height:420px}
  .page-fig[data-kind="steps"]{height:340px}
  .page-fig[data-kind="cube"]{height:360px}
  .page-fig[data-kind="stack"]{height:400px}
  .page-fig[data-kind="scene"]{height:auto}
  .page-fig[data-kind="scene"] .scene{position:relative;inset:auto;display:block;width:calc(100% - 24px);height:auto;aspect-ratio:464/272;margin:20px 12px 68px}
  /* Learn, Fig. 05: the wide rule-or-AI scene shrinks its labels to ~5px here.
     Phones get the same diagram drawn top-to-bottom (assets/src/rule-or-ai.html). */
  .page-fig[data-kind="scene"]:has(>svg[viewBox="6 70 464 272"]) .scene{width:min(calc(100% - 40px),330px);aspect-ratio:3/4;margin:32px auto 80px;background:url("assets/mobile-rule-or-ai.aa4b59ae6608.png") center/contain no-repeat}
  .page-fig[data-kind="scene"]:has(>svg[viewBox="6 70 464 272"]) .scene>*{display:none}
  .page-fig[data-kind="steps"] .fig-scene{left:10px;width:calc(100% - 20px)}
  .fig-bar{height:48px;padding:0 var(--gutter)}
  .page-fig .fig-scene{height:calc(100% - 48px)}
  .page-fig::before,.page-fig::after{inset:0 0 48px}
  .fig-scene .fig-label text{font-size:12px}

  /* Service scenes: edge to edge, the full 4:3 drawing */
  .service-detail{gap:28px}
  .service-art{aspect-ratio:auto;max-height:none;margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0}
  .service-art .scene{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:4/3;margin:8px 0 44px}
  .service-art::before{inset:0 0 44px}
  .glyph-caption{padding:0 var(--gutter)}

  /* The brief form: one column, no double gutter */
  .brief-layout{width:auto;grid-template-columns:minmax(0,1fr);gap:32px;padding:32px var(--gutter) 64px}
  .brief-layout .project-form,.planner-form,.planner-result{padding:22px 16px}
  /* Optional sections: title on its own line, the tag under it, + on the right */
  .brief-layout .brief-details summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;min-height:var(--m-tap);margin-left:0}
  .brief-layout .brief-details summary span{grid-area:2/1;margin:4px 0 0}
  .brief-layout .brief-details summary::after{grid-area:1/2/3/3}
  .text-link{text-wrap:balance}
  .planner{width:auto;grid-template-columns:minmax(0,1fr);padding-inline:var(--gutter)}

  /* The studio cube on How we work */
  .studio-section{gap:24px}
  .studio-monogram{aspect-ratio:auto;height:280px}

  /* Footer */
  .site-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 20px;padding:56px var(--gutter) 24px}
  .footer-bottom{gap:0 24px;padding-top:16px}
  .footer-bottom span{margin-bottom:8px}
}

/* The verification widget is a fixed 300px; below that it scales to fit. */
@media (max-width:374px){
  .cf-turnstile{width:246px;height:60px;overflow:visible}
  .cf-turnstile>div{transform:scale(.82);transform-origin:0 0}
}
@media (min-width:360px) and (max-width:374px){
  .cf-turnstile{width:286px;height:69px}
  .cf-turnstile>div{transform:scale(.95)}
}

/* ---------- Short phones ---------- */
@media (max-height:680px) and (max-width:760px){
  .stage-copy{bottom:56px}
}
/* The first iPhone SE (568px tall): the hero copy is most of the screen, so
   it tightens a step further to leave the cube some room. */
@media (max-height:600px) and (max-width:760px){
  .copy-block .kicker{letter-spacing:.03em;gap:8px}
  .copy-block .kicker::before{width:12px}
  .copy-block h1,.copy-block h2{margin:10px 0}
  .copy-block .lede{font-size:15px;line-height:1.5}
  .copy-block .actions{margin-top:16px;gap:0 24px}
}

/* ---------- Rotated phones ---------- */
@media (max-width:1080px) and (max-height:600px) and (orientation:landscape){
  .assembly-controls{bottom:0;width:auto}
  .stage-bar{right:var(--gutter);height:44px}
  .stage-copy{bottom:56px}
  .copy-block .kicker{font-size:12px}
  .copy-block .lede{font-size:15px;line-height:1.5}
  .copy-block .actions .button{min-height:var(--m-tap);font-size:15px}
  .meter{font-size:12px}
}
@media (max-width:1080px) and (max-height:360px) and (orientation:landscape){
  .stage-copy{bottom:48px}
}