/* ============================================================
   iPhone rules, one file, loaded last on every page.

   Chris judges this product on an iPhone in Safari, so the behaviour Safari
   needs lives here rather than being scattered through four stylesheets:
   16px form text so focus never zooms the page, safe-area insets on anything
   pinned to an edge, dynamic viewport units instead of 100vh, real 44px
   targets, no visible scrollbars, and no horizontal scroll anywhere.

   Every colour is an existing token. The fallbacks chain to the token the
   other stylesheets publish under a different name; none of them is new.
   ============================================================ */

:root{
  --ios-surface:var(--surface,var(--paper,var(--white,#fff)));
  --ios-line:var(--line,#e9ecf1);
  --ios-ink:var(--ink,#1a2433);
  --ios-muted:var(--ink-3,var(--muted,#646b7a));
  --ios-brand:var(--brand,var(--azure,#18b0fb));
  --ios-dock:70px;
  --ios-safe-bottom:env(safe-area-inset-bottom,0px);
  --ios-safe-top:env(safe-area-inset-top,0px);
  --ios-dock-clearance:calc(var(--ios-dock) + var(--ios-safe-bottom));
}

/* ---- Never a sideways scroll, on any route ---- */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%}

/* ---- Safari zooms on focus below 16px. Nothing typed into is smaller on a phone or a
        touch screen; a desktop keeps the workspace's compact 13px, 32px fields. ---- */
input,select,textarea,button{font-family:inherit}
@media(max-width:767px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  /* A 16px control needs the room to hold 16px text. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px}
}
.button.compact,button.compact{font-size:13px}

/* ---- Touch feedback: no grey flash, one visible press state ---- */
a,button,summary,label,[role=button],input,select,textarea{-webkit-tap-highlight-color:transparent}
a:active,button:active,summary:active,[role=button]:active{opacity:.72}
button,a,summary{touch-action:manipulation}

/* ---- Anything that scrolls, scrolls like an app and shows no bar ---- */
.table-scroll,.sub-nav,.tab-strip,.bell-panel,.mobile-more-sheet,.nav-list,
.queue-pills,.code,.details-section pre,.measurement-tabs,.map-scroll{
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;
}
.table-scroll::-webkit-scrollbar,.sub-nav::-webkit-scrollbar,.tab-strip::-webkit-scrollbar,
.bell-panel::-webkit-scrollbar,.mobile-more-sheet::-webkit-scrollbar,.nav-list::-webkit-scrollbar,
.queue-pills::-webkit-scrollbar,.code::-webkit-scrollbar,.details-section pre::-webkit-scrollbar,
.measurement-tabs::-webkit-scrollbar,.map-scroll::-webkit-scrollbar{width:0;height:0;display:none}

/* ---- Dynamic viewport: 100vh is wrong the moment Safari's bars move ---- */
.initial-loading,.auth-layout,.onboarding-container{min-height:100dvh}
.shell{min-height:100dvh}
.sidebar{height:100dvh}
.measurement-workspace .main-column{min-height:100dvh}

@media(max-width:767px),(pointer:coarse) and (orientation:landscape) and (max-width:1023px) and (max-height:500px){
  /* The dock floats over the page, so the page ends above it. */
  .shell,.measurement-workspace .main-column{min-height:100dvh}
  .main-content,.measure-main{padding-bottom:calc(var(--ios-dock-clearance) + 28px)}
  body.mobile-keyboard-open .main-content,body.mobile-keyboard-open .measure-main{padding-bottom:28px}

  /* The header sits under the notch, not behind it. */
  .topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
    padding-top:env(safe-area-inset-top,0px);height:auto;min-height:56px}
  .sidebar{display:none}

  /* Side gutters survive the home indicator and a landscape notch. */
  .main-content{padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px))}

  /* 44px everywhere a finger lands. */
  .nav-link,.sub-link,.mobile-tab,.mobile-more-link,.bell-row,.row-link,
  .button,.icon-button,.details-section summary,.map-credit-toggle{min-height:44px}
  .icon-button{min-width:44px}
  .button.compact,button.compact{min-height:40px;padding:8px 12px}
  .table-footer .button{min-height:44px}

  /* A strip of tabs scrolls inside itself rather than clipping its last tab. */
  .sub-nav,.tab-strip,.measurement-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x proximity;padding-bottom:4px}
  .sub-nav>*,.tab-strip>*,.measurement-tabs>*{flex:none;scroll-snap-align:start}

  /* Panels never force the page sideways. */
  .panel,.split,.detail-grid,.plans,.form-grid,.metrics{min-width:0}
  .split,.detail-grid,.form-grid,.plans,.split-even{grid-template-columns:minmax(0,1fr)}
  .code,pre{overflow-x:auto;word-break:break-word}

  /* The sheet and the dock both clear the home indicator. */
  .mobile-dock{padding-bottom:calc(4px + var(--ios-safe-bottom))}
  .mobile-more-sheet{padding-bottom:calc(20px + var(--ios-safe-bottom))}
}

/* ---- Tables become dense rows on a phone: the address and its date on the left, the area
        and the status on the right, one hairline between rows (the Saved list in an app). ---- */
@media(max-width:600px){
  .measurement-table,.measurement-table thead,.measurement-table tbody,
  .measurement-table tr,.measurement-table td{display:block;width:auto}
  .measurement-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .measurement-table{white-space:normal;border-collapse:separate;border-spacing:0}
  .measurement-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;
    border:0;border-bottom:1px solid var(--ios-line);border-radius:0;background:transparent;padding:10px 16px;margin:0}
  .measurement-table tr:last-child{border-bottom:0}
  .measurement-table tbody>tr{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 16px}
  .measurement-table .address-cell{min-width:0}
  .measurement-table .address-cell>span:last-child{min-width:0;overflow:hidden}
  .measurement-table .address-cell strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .measurement-table td{border:0;padding:0;height:auto;display:block}
  .measurement-table td[data-label]:not(.measurement-property):not(.table-checkbox)::before{content:none}
  .measurement-table td.measurement-property{grid-column:1;grid-row:1 / span 2;padding:0}
  .measurement-table td[data-label="Lawn area"]{grid-column:2;grid-row:1;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
  .measurement-table td[data-label="Status"]{grid-column:2;grid-row:2;justify-self:end;text-align:right}
  /* The last cell keeps a desktop gutter elsewhere; in a phone row it ends flush with the area. */
  .measurement-table tbody>tr>td:last-child,.measurement-table tbody>tr>td:first-child{padding:0}
  .measurement-table td[data-label="Status"] .state-line{font-size:12px;color:var(--ios-muted)}
  .measurement-table .row-link{min-height:44px;width:100%}
  .measurement-table .address-cell strong{max-width:none;font-size:15px;font-weight:500;line-height:1.35}
  .measurement-table .address-cell small{font-size:13px}
  .table-scroll{overflow:visible}
  /* The administration list carries a select box and three more columns. The box takes its own
     left column (it used to float over the area); run time, cost and rating share a third line. */
  .measurement-table tbody>tr:has(>td.table-checkbox){grid-template-columns:32px minmax(0,1fr) auto auto;gap:2px 12px;padding:10px 16px 10px 8px}
  .measurement-table tbody>tr>td.table-checkbox{position:static;grid-column:1;grid-row:1 / span 2;align-self:center;justify-self:center;width:32px;min-width:32px;padding:0}
  .measurement-table tbody>tr>td.table-checkbox input[type=checkbox]{margin:0}
  .measurement-table tbody>tr:has(>td.table-checkbox)>td.measurement-property{grid-column:2 / 4;grid-row:1 / span 2}
  .measurement-table tbody>tr:has(>td.table-checkbox)>td[data-label="Lawn area"]{grid-column:4;grid-row:1}
  .measurement-table tbody>tr:has(>td.table-checkbox)>td[data-label="Status"]{grid-column:4;grid-row:2}
  .measurement-table tbody>tr>td[data-label="Your rating"]{grid-column:2;grid-row:3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .measurement-table tbody>tr>td[data-label="Run time"]{grid-column:3;grid-row:3;text-align:right}
  .measurement-table tbody>tr>td[data-label="Recorded cost"]{grid-column:4;grid-row:3;text-align:right}
  .measurement-table tbody>tr>td:is([data-label="Your rating"],[data-label="Run time"],[data-label="Recorded cost"]){margin-top:4px;font-size:12px;color:var(--ios-muted);font-variant-numeric:tabular-nums}
}

/* ---- Sign in: one column, no line-art crossing the links ---- */
@media(max-width:700px){
  .auth-layout{grid-template-columns:minmax(0,1fr)}
  .auth-aside,.auth-visual,.auth-lines,.auth-guides,.auth-video{display:none!important}
  .auth-main{padding:28px max(20px,env(safe-area-inset-left,0px)) 40px max(20px,env(safe-area-inset-right,0px));
    min-height:100dvh;justify-content:center}
  .auth-main>.brand-mark{position:static;margin-bottom:24px}
}

/* ---- Marketing: the CTAs and the price cards stack, nothing juts out ---- */
@media(max-width:600px){
  .hero-actions,.cta-actions,.pricing-grid,.plan-grid,.footer-columns{
    display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .hero-actions>.button,.cta-actions>.button{width:100%;justify-content:center;min-height:48px}
  .site-header .header-inner{padding-top:env(safe-area-inset-top,0px)}
}

/* ---- Standalone (added to the Home screen) keeps the same insets ---- */
@media(display-mode:standalone){
  body{padding-top:0}
}

/* ---- Controls at thumb size on a phone ---- */
@media(max-width:767px),(pointer:coarse){
  /* The box stays 20px; the target around it is 44px. */
  .table-checkbox{min-width:44px}
  .table-checkbox input[type=checkbox]{margin:12px}
  .checkbox-label,.remember-label{min-height:44px;padding:4px 0}
  /* The switch is sized in one place, portal.css (the 46x28 phone track); only its row is here. */

  /* Credits & billing on one column; a pack card needs its price and per-credit line
     to stay readable, so packs stack one per row here instead of crowding three across. */
  .plan-card-lead{flex-direction:column;gap:14px}
  .plan-card-credits{text-align:left}
  .plan-card-actions .button{width:100%;justify-content:center;min-height:48px}
  .pack-row{grid-template-columns:1fr;gap:10px}
  .pack-buy{min-height:48px}

  /* The saved-location map sits under the list and keeps its own box. */
  .list-map{padding:0 16px 16px}
  .free-map{min-height:280px;aspect-ratio:4/3;height:auto}
  .free-map svg{width:100%;height:auto;display:block}
}

/* ---- The zoom rule has to win. A one-off #id in another sheet is still a
        1.3x zoom the moment Safari focuses that field, so this is the one
        place in the product where !important is the correct tool. ---- */
@media(max-width:767px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select,textarea{font-size:16px!important}
}

/* ---- Every tap target a finger can reach is at least 44px ---- */
@media(max-width:767px),(pointer:coarse){
  .button.compact,button.compact,.pack-button{min-height:44px}
  .brand,.footer-mark,.docs-label{display:inline-flex;align-items:center;min-height:44px}
  .menu-toggle,.search-trigger,#menu-toggle,#search-open,.mobile-profile,.bell-button{
    min-width:44px;min-height:44px}
  .site-footer a,.footer-pill,.marketing-footer a{display:inline-flex;align-items:center;min-height:44px}
  /* A segmented control is a row of taps, so each segment is one. */
  .segmented button,.segment-row button,.scope-tabs button,.filter-row button{min-height:44px}
  /* The heading anchors exist for a mouse; a thumb has no use for a 10px hash. */
  a.anchor{display:none}
  /* Code samples scroll inside their own box rather than widening the page. */
  code,pre,.code,.api-sample{max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  code::-webkit-scrollbar,pre::-webkit-scrollbar,.code::-webkit-scrollbar{width:0;height:0;display:none}
}

/* ---- A 44px reach around controls that must stay visually small ---- */
@media(pointer:coarse){
  /* appearance:none makes the box paintable, so a transparent pseudo-element
     can carry the touch area without growing the 20px box itself. */
  input[type=checkbox]{position:relative}
  input[type=checkbox]::after{content:"";position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .free-map-pin{position:relative}
  .free-map-pin::after{content:"";position:absolute;inset:-11px}
}

/* ---- Marketing and docs controls reach 44px too ---- */
@media(max-width:767px),(pointer:coarse){
  .button,.button-small,.button-dark,.button-outline,.map-segments button,
  .copy-button,.footer-pill,.skip-link{min-height:44px}
  .map-segments button{padding-top:10px;padding-bottom:10px}
  .copy-button{padding:10px 14px}
  .footer-mark,.brand{min-width:44px}
  .button.text,.button.text.compact{min-height:44px;padding-top:10px;padding-bottom:10px}
}

/* ---- The last few that another sheet sizes more specifically ---- */
@media(max-width:767px),(pointer:coarse){
  .header-actions>.button,.hero-actions>.button,.cta-actions>.button,
  .mobile-nav-actions>.button,.map-segments button,.footer-pill{min-height:44px}
  .text-link,.docs-footer a,.footer-bottom a,.footer-links a{
    display:inline-flex;align-items:center;min-height:44px}
  .free-map .maplibregl-ctrl-group button{width:44px;height:44px}
  .map-credit-toggle{width:44px;height:44px}
}

@media(max-width:767px),(pointer:coarse){
  .plan-card .button,.plan-card>.button{min-height:44px}
  .doc-footer a,.doc-footer div a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- The settings tab strip runs to both screen edges, so a tab that scrolls
        off looks like it scrolls rather than like it was cut off. ---- */
@media(max-width:767px){
  .sub-nav{width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-right:-16px;
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
    scroll-padding-inline:16px}
}

@media(max-width:767px),(pointer:coarse){
  .page-heading .button,.location-panel .map-actions .button,
  .detail-heading .button,.panel-heading .button{min-height:44px}
}