/* Mobile pass (mobile_ui.js, MOBILE_PASS.md): phones (390 px) and small tablets (768 px). Every rule sits in a
   narrow-screen or touch media query, so the desktop look does not change. Grove tokens only. Loaded last. */

/* ---- Touch screens and narrow windows: every control at least 44x44 px ---- */
@media (max-width:820px),(pointer:coarse){
  body :is(button,.button,.ui-button,select,summary,[role=tab],[role=button],input:not([type=checkbox],[type=radio],[type=hidden],[type=range],[type=color],[type=file]),textarea){min-height:44px!important}
  body :is(button,.button,.ui-button,summary.ui-button,select,[role=tab]){min-width:44px!important}
  body :is(button,.button,.ui-button,[role=tab],summary.ui-button){touch-action:manipulation}
  body input[type=file]{min-height:44px;padding:8px 0}
  body input[type=range]{min-height:44px}
  body input[type=color]{min-width:44px;min-height:44px}
  /* A checkbox or radio is tapped through its label, so the label is the target. */
  body label:has(>input:is([type=checkbox],[type=radio])){display:flex!important;align-items:center;gap:10px;min-height:44px}
  body label:has(>input:is([type=checkbox],[type=radio])) input{flex:none;margin:0}
  /* A bare checkbox (a row picker): a 44 px target with the usual small box drawn in its middle. */
  body input:is([type=checkbox],[type=radio]):not(label input){appearance:none;-webkit-appearance:none;flex:none;width:44px!important;height:44px!important;min-height:44px!important;margin:0;border:0;border-radius:var(--ui-radius-sm);cursor:pointer;background:none;position:relative}
  body input:is([type=checkbox],[type=radio]):not(label input)::before{content:'';position:absolute;inset:12px;border:1.5px solid var(--ui-muted,#9fb4a8);border-radius:var(--ui-radius-xs);background:var(--ui-field,#111f17)}
  body input[type=radio]:not(label input)::before{border-radius:var(--ui-radius-round)}
  body input:is([type=checkbox],[type=radio]):not(label input):checked::before{background:var(--ui-accent,#c8f55a);border-color:var(--ui-accent,#c8f55a)}
  body input[type=checkbox]:not(label input):checked::after{content:'';position:absolute;left:18px;top:14px;width:6px;height:11px;border:solid var(--ui-accent-ink,#07120c);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
  body input[type=radio]:not(label input):checked::after{content:'';position:absolute;inset:18px;border-radius:var(--ui-radius-round);background:var(--ui-accent-ink,#07120c)}
  body input:is([type=checkbox],[type=radio]):not(label input):focus-visible{outline:2px solid var(--ui-focus,#c8f55a);outline-offset:-4px}
  body input:is([type=checkbox],[type=radio]):not(label input):disabled{opacity:.5;cursor:not-allowed}

  /* Links that act as buttons or list rows (not links inside a sentence). */
  body :is(.ui-crumbs a,.ui-list a,.ui-link-list a,td a,th a,li>a:only-child,dd>a:only-child,.ui-actions>a,.button-row>a,nav a,.ui-tabs a,.tabs a):not(p a){display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  body :is(.panel-head,.panel-body,.field-stack,.ui-card-head,.toolbar,.form-grid,.button-row,div:has(>button))>a[href]{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .ui-crumbs a{justify-content:center}
  body :is(.ui-sort,th button){min-height:44px!important}
  .ui-crumbs ol{gap:0 6px;align-items:center}
  .ui-crumbs li{display:inline-flex;align-items:center}

  /* The small "?" glossary buttons: a 44 px target, the same small ring drawn in its middle. */
  .uxb-what>summary,body .uxo-q{width:44px!important;height:44px!important;min-width:44px!important;margin:0!important;border:0!important;border-radius:var(--ui-radius-round)!important;
    background:radial-gradient(circle,transparent 0 9.5px,color-mix(in srgb,var(--ui-muted,#9fb4a8) 60%,transparent) 10px 11px,transparent 11.5px)!important}
  .uxb-what>summary:hover,.uxb-what[open]>summary,body .uxo-q:hover,body .uxo-q[aria-expanded=true]{background:radial-gradient(circle,var(--ui-accent,#c8f55a) 0 11px,transparent 11.5px)!important}
  .uxb-what{vertical-align:middle;margin:-10px 0}

  /* Tabs and segmented buttons. */
  .ui-tabs [role=tab],#page-mount .tabs :is(button,a){min-height:44px}
  .ui-seg button{min-height:44px!important;padding:4px 14px}

  /* Top bar and status strip: 44 px buttons. */
  .topbar :is(#menu-toggle,#agents-toggle,#topbar-more,.agents-toggle){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  :root{--strip:44px}
  #status-strip{padding:0 6px;gap:4px}
  #status-strip a.strip-chip{height:44px;padding:0 10px;background:none;border-radius:0}
  #status-strip a.strip-chip[data-tone=danger]{background:#a11e30}
  #status-strip .strip-search{height:44px;min-width:44px;padding:0;border:0;background:none;justify-content:center;gap:6px}
  #status-strip .strip-search>span,#status-strip .strip-search kbd{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:var(--ui-radius-sm);background:rgba(255,255,255,.04);opacity:1;font-size:12px}
  #status-strip #strip-search kbd{display:none}
  #status-strip #strip-search>span{display:inline-flex!important}
  #status-strip #strip-help{display:inline-flex!important}
  #status-strip #strip-help kbd{width:30px;padding:0}
  #status-strip #strip-help[hidden],#status-strip #strip-search[hidden]{display:none!important}
  .strip-jobs-button{min-height:44px!important;display:inline-flex!important;align-items:center}
  #ui-jobs-tray{top:calc(var(--strip,44px) + 6px)}

  /* The drawer: 44 px rows. */
  .sidebar :is(a,button,summary){min-height:44px}
  #navigation summary,#navigation a.shell-solo{height:44px}
  #navigation .shell-links a{min-height:44px;padding-top:0;padding-bottom:0}
  .shell-env-seg{height:44px}
  .sidebar .brand{display:flex;align-items:center}

  /* Menus that drop down: rows a finger can hit. */
  .calm-more-list>*,.ui-menu-body>*,.topbar-actions.open>*{min-height:44px!important}
  #serve-palette li{min-height:44px;align-items:center}
}

/* ---- Small tablets (721-820 px): the sidebar becomes the same drawer as on a phone ---- */
@media (min-width:721px) and (max-width:820px){
  .sidebar{transform:translateX(-100%);width:232px;z-index:30;transition:transform .15s}
  .sidebar.open{transform:translateX(0)}
  .main-shell{margin-left:0}
  #menu-toggle{display:inline-flex}
}

/* ---- Phones and small tablets ---- */
@media (max-width:820px){
  /* A tap on the dimmed page closes the open drawer (mobile_ui.js). */
  .sidebar.open~.main-shell::before{content:'';position:fixed;inset:0;z-index:29;background:rgba(2,6,4,.62);backdrop-filter:blur(2px)}
  .sidebar{overscroll-behavior:contain}

  /* Nothing pushes the page sideways: long words and values wrap, media fits. */
  #content{overflow-wrap:break-word}
  #content :is(img,video,canvas,iframe){max-width:100%}
  #content svg:not([width]){max-width:100%}
  #content pre{max-width:100%;overflow-x:auto}

  /* Sideways strips (hub tabs, page tabs, table scrollers): fade on the side that has more (mobile_ui.js). */
  .mob-more-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .mob-more-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
  .mob-more-start.mob-more-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent)}
  .ui-tabs,#page-mount .tabs{scroll-snap-type:x proximity;scrollbar-width:none}
  .ui-tabs::-webkit-scrollbar,#page-mount .tabs::-webkit-scrollbar{display:none}
  .ui-tabs [role=tab],#page-mount .tabs>*{scroll-snap-align:start;flex:none}

  /* A wide numbers table scrolls in its own box; its first column stays in view. */
  table.mob-scroll{display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  table.mob-scroll :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--ui-card,#0b1610);box-shadow:1px 0 0 var(--ui-line,rgba(255,255,255,.065))}
  table.mob-scroll thead :is(th,td):first-child{z-index:2}
  /* On a small tablet a "cards" table scrolls the same way (cards are for phones). */
  table.mob-cards{display:block;max-width:100%;overflow-x:auto}

  /* Dialogs fit the screen and scroll inside. */
  dialog[open]{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
  #trade-dialog{width:calc(100vw - 16px);padding:14px}
  #trade-dialog :is(.trace-grid,.trade-facts){grid-template-columns:minmax(0,1fr)}
  #trade-dialog :is(.trace-grid,.trade-facts)>*{min-width:0}
  .sdg-tour{max-width:calc(100vw - 24px)}

  /* Charts drawn as SVG scale to the screen; a pinch zooms the page. */
  #content :is(.ui-chart,[id$=-chart]) svg{max-width:100%;height:auto}
  .graph-node-head{touch-action:none}
}

@media (min-width:721px) and (max-width:820px){
  table.mob-cards :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--ui-card,#0b1610)}
}

/* ---- Phones ---- */
@media (max-width:720px){
  /* Forms: one column. */
  #content :is(.form-grid,.aic-form-grid,.ui-form,.split,.ui-split,.ui-split[data-ratio=even],.field-stack){grid-template-columns:minmax(0,1fr)!important}
  #content :is(.form-grid,.aic-form-grid)>*{grid-column:1/-1}
  #content :is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,textarea){max-width:100%;font-size:16px}
  #content .ui-table-filter{max-width:none;flex-basis:100%}

  /* List rows keep their button beside the title when it fits, so lists (Home's Getting started) stay short. */
  #content .ui-list li{padding:8px 10px 8px 12px}
  #content .ui-list-main{flex:1 1 150px}
  #content .ui-list li>:is(.ui-button,button,a.ui-button,.ui-badge){flex:none}
  body[data-ui=grove] #content .ui-empty{padding:18px 10px}
}
@media (max-width:600px){
  /* A toolbar stacked in a column: its search box keeps its own height (flex-basis would set it). */
  #content .uxb-toolbar>*{flex:0 0 auto}
}
@media (max-width:720px){
  /* A list of records: one card per row, each value labelled with its column (mobile_ui.js picks the tables). */
  table.mob-cards{display:block;overflow:visible;width:100%!important;min-width:0!important;border:0}
  table.mob-cards>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.mob-cards>tbody,table.mob-cards>tfoot{display:grid;gap:10px;width:100%}
  table.mob-cards>tbody>tr,table.mob-cards>tfoot>tr,table.mob-cards>tr{display:grid;gap:2px;padding:8px 14px;border:1px solid var(--ui-card-line,rgba(255,255,255,.065));border-radius:var(--ui-radius-md,14px);background:rgba(255,255,255,.02)}
  table.mob-cards>tbody>tr>:is(td,th){display:block;position:relative;min-height:32px;padding:7px 0 7px calc(36% + 12px)!important;border:0!important;text-align:left!important;white-space:normal;min-width:0;width:auto!important;max-width:none;background:none!important;box-shadow:none;overflow-wrap:anywhere}
  /* Same look as the stacked tables of the operations pages (.uxo-stack in ux_ops.css). */
  table.mob-cards>tbody>tr>:is(td,th)::before{content:attr(data-label);position:absolute;left:0;top:8px;width:36%;font-size:11px;font-weight:500;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted,#9fb4a8);overflow-wrap:anywhere}
  table.mob-cards>tbody>tr>:is(td,th)+:is(td,th){border-top:1px solid color-mix(in srgb,var(--ui-line,rgba(255,255,255,.065)) 60%,transparent)!important}
  table.mob-cards>tbody>tr>:is(td,th):is([data-label=""],:not([data-label]),[colspan]){padding-left:0!important}
  table.mob-cards>tbody>tr>:is(td,th):is([data-label=""],:not([data-label]),[colspan])::before{display:none}
  table.mob-cards>tbody>tr>:is(td,th):empty{display:none}
  table.mob-cards>tbody>tr>:is(td,th) small{display:block}
  table.mob-cards>tbody>tr:hover>td{background:none}
  .table-wrap:has(>table.mob-cards),.ui-table-scroll:has(>table.mob-cards){overflow:visible;max-height:none}
  .ui-section .table-wrap:has(>table.mob-cards){margin:0;border-top:0}

  /* A long form keeps its main button in reach (mobile_ui.js marks it). */
  .mob-sticky-action{position:sticky!important;bottom:0;z-index:5;margin-top:12px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--ui-page,#060f0a) 30%)}
  button.mob-sticky-action,a.mob-sticky-action{padding:10px 16px;background:var(--ui-accent,#c8f55a);box-shadow:0 -12px 24px -6px var(--ui-page,#060f0a)}
  .mob-sticky-action>:is(button,.ui-button,a){width:100%}
}