/* the tablet-first layout (docs/tablet-ui.md), linked after app.css on every signed-in page and the sign-in pages.
   app.css keeps its 40 KB budget; this sheet only overrides its widths, the side menu, the touch targets and the gaps.
   Widths: <768 phone and small tablet portrait (drawer menu) · 768-1199 tablet (icon rail + drawer, the user may
   expand it) · 1200+ wide (full menu, the user may collapse it). Touch is a pointer, not a width:
   (any-pointer:coarse) or (hover:none) gets 44 px targets at every width. Logical properties only (Arabic first). */
:root{--tap:44px;--tap-main:48px;--gap-tap:8px;--gap-group:14px;--nav-gap:2px;--rail-w:76px;--read-max:1120px;--top-h:62px}

/* 1. the width: the header and the shell use the screen; reading pages and forms keep a readable measure */
.top-in,.shell{max-width:none}
.top-in{padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))}
main.wrap{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
main.wrap.read{max-width:calc(var(--read-max) + 56px);margin-inline:auto}
main.wrap>form:not(.datebar,.filters,.inline,.searchbar,.wide),main.wrap>.page-intro{max-width:var(--read-max)}
main.wrap>p,.card>p:not(.actions){max-width:90ch}
main.wrap>.datebar{max-width:640px}
@media (min-width:1600px){.tiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}

/* the header on a phone: the brand is clipped rather than run under the plan; the word mark goes under 480 px */
.top .brand{overflow:hidden;flex:0 1 auto}
@media (max-width:479px){.app .top .brand-name{display:none}.top-in{gap:6px}}
/* the input types app.css does not style (a link, a month, a time) look and size like the others */
input[type=url],input[type=month],input[type=time],input[type=week],input[type=datetime-local]{width:100%;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--field);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);min-height:44px}
input[type=url]:focus,input[type=month]:focus,input[type=time]:focus,input[type=week]:focus,input[type=datetime-local]:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--navy)}

/* 2. the side menu (O06): ONE control for every page. Below 768 px a drawer (the burger); 768-1199 an icon rail (the labels
   stay for screen readers and come back in the drawer the burger opens over it); 1200+ the full menu. The pin changes the
   default of the size class it is pressed in, for this user of this shop on this device (the pm_nav_<user>_<shop> cookie,
   app.js): html.nav-t-full = expanded at 768-1199, html.nav-w-mini = the rail at 1200+. The drawer is html.nav-open (app.js:
   focus kept inside, Escape / the scrim / the close button shut it and give the focus back); #nav:target without script. */
.nav-pin{display:none}
.nav-scrim{display:none}
html.nav-open .nav,.nav:target{display:flex;position:fixed;inset-block:0;inset-inline-start:0;top:0;height:auto;width:min(84vw,320px);background:var(--card);box-shadow:var(--shadow);border-inline-end:1px solid var(--line);padding:14px 10px calc(14px + env(safe-area-inset-bottom,0px));z-index:40;gap:var(--nav-gap);overflow-y:auto;overscroll-behavior:contain}
html.nav-open .nav-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(16,24,40,.45)}
html.nav-open .nav .nav-close,.nav:target .nav-close{display:flex}
html.nav-open .nav .nav-foot,.nav:target .nav-foot{display:flex}
html.nav-open body{overflow:hidden}
@media (min-width:768px){
  .burger{display:inline-flex}
  .nav{display:flex;position:sticky;inset:auto;top:var(--top-h);height:calc(100vh - var(--top-h));height:calc(100dvh - var(--top-h));width:var(--rail-w);flex:none;box-shadow:none;background:transparent;border-inline-end:1px solid var(--line);padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px));gap:var(--gap-tap);overflow-y:auto;z-index:20}
  .nav>a:not(.nav-close){justify-content:center;gap:0;padding:0;min-height:var(--tap);flex:none}
  .nav>a:not(.nav-close)>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav>a .i{width:24px;height:24px}
  .nav-foot,.nav .nav-close{display:none}
  main.wrap{padding-block-start:18px;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
  .nav-pin{display:inline-flex;align-items:center;justify-content:center;align-self:center;order:-3;width:var(--tap);height:var(--tap);flex:none;margin:0 0 4px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--muted);cursor:pointer;font:inherit}
  .nav-pin:hover{color:var(--navy);border-color:var(--navy-3)}
  .nav-pin .i{width:20px;height:20px}
  [dir=rtl] .nav-pin .i{transform:scaleX(-1)}
  .nav-pin .i-in{display:none}
  .nav{align-items:stretch}
  /* the drawer over the rail: the full menu with its labels and its foot */
  html.nav-open .nav,.nav:target{position:fixed;inset-block:0;inset-inline-start:0;top:0;height:auto;width:min(84vw,320px);background:var(--card);box-shadow:var(--shadow);padding:14px 10px calc(14px + env(safe-area-inset-bottom,0px));z-index:40;gap:var(--nav-gap)}
  html.nav-open .nav>a:not(.nav-close),.nav:target>a:not(.nav-close){justify-content:flex-start;gap:10px;padding:9px 12px}
  html.nav-open .nav>a:not(.nav-close)>span,.nav:target>a:not(.nav-close)>span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  html.nav-open .nav .nav-foot,.nav:target .nav-foot{display:flex}html.nav-open .nav .nav-close,.nav:target .nav-close{display:flex}html.nav-open .nav .nav-pin,.nav:target .nav-pin{display:none}
}
/* the full menu: 1200 px and wider unless the user collapsed it there, or 768-1199 when the user expanded it there */
@media (min-width:1200px){
  html:not(.nav-w-mini) .burger{display:none}
  html:not(.nav-w-mini) .nav{width:var(--nav-w);padding:12px 8px 16px;gap:var(--nav-gap)}
  html:not(.nav-w-mini) .nav>a:not(.nav-close){justify-content:flex-start;gap:10px;padding:9px 12px}
  html:not(.nav-w-mini) .nav>a:not(.nav-close)>span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  html:not(.nav-w-mini) .nav-foot{display:flex}
  html:not(.nav-w-mini) .nav>.nav-pin{align-self:flex-end}
  html:not(.nav-w-mini) .nav-pin .i-out{display:none}html:not(.nav-w-mini) .nav-pin .i-in{display:block}
  main.wrap{padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px))}
}
@media (min-width:768px) and (max-width:1199.98px){
  html.nav-t-full .burger{display:none}
  html.nav-t-full .nav{width:var(--nav-w);padding:12px 8px 16px;gap:var(--nav-gap)}
  html.nav-t-full .nav>a:not(.nav-close){justify-content:flex-start;gap:10px;padding:9px 12px}
  html.nav-t-full .nav>a:not(.nav-close)>span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  html.nav-t-full .nav-foot{display:flex}
  html.nav-t-full .nav>.nav-pin{align-self:flex-end}
  html.nav-t-full .nav-pin .i-out{display:none}html.nav-t-full .nav-pin .i-in{display:block}
}

/* 3. the spacing primitives: a row of buttons (.btn-row), a column (.btn-col), groups of either (.btn-groups) */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-tap)}
.btn-col{display:flex;flex-direction:column;align-items:stretch;gap:var(--gap-tap)}
.btn-col>.btn{width:100%}
.btn-groups{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-group)}
.btn-groups.col{flex-direction:column;align-items:stretch}
.btn-row form,.btn-col form{margin:0}
/* app.css's own groups get the same gaps */
.actions,.row-actions,.tabs,.chips,.datebar,.tenders,.aa-actions,.tax-actions,.wiz-steps ol,.c-line{gap:var(--gap-tap)}
.btn.block+.btn.block,.btn.block+form,.btn.block+.btn,form+.btn.block{margin-block-start:var(--gap-tap)}
.banner .inline{gap:var(--gap-tap) var(--gap-group)}
.card>p.actions+p.actions,.actions+.actions{margin-block-start:var(--gap-tap)}
/* buttons and forms side by side in a table cell (td.act and the like): never touching, across or down */
td>.btn,td>form,td>a.btn{margin-block:4px}
td>.btn:not(:last-child),td>a.btn:not(:last-child),td>form:not(:last-child){margin-inline-end:var(--gap-tap)}
td>form{display:inline-block;vertical-align:middle}
/* two boxes in one field (a name and its phone) */
.field>input+input,.field>input+select,.field>select+input{margin-block-start:var(--gap-tap)}
td.act .row-actions{margin-block:2px}

/* 4. focus you can see (the keyboard, a scanner's tab), on every control */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.chip:focus-visible,.prod:focus-visible,.pick:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn:focus-visible{box-shadow:0 0 0 5px var(--navy-soft)}

/* 5. touch: a finger, not a width (pointer:coarse, a touch-only screen, a phone held in either orientation) */
@media (any-pointer:coarse),(hover:none){
  :root{--nav-gap:var(--gap-tap)}
  .btn{min-height:var(--tap);min-width:var(--tap)}
  .btn.sm{min-height:var(--tap);padding:.45em 1em;font-size:14px}
  .btn.lg,.btn.primary.lg{min-height:52px}
  .btn.primary:not(.sm){min-height:var(--tap-main)}
  .burger{width:var(--tap);height:var(--tap)}
  .lang,a.pill,.top .pal-open{min-height:var(--tap);display:inline-flex;align-items:center}
  .top .pal-open{min-width:var(--tap);justify-content:center}
  .chip{min-height:var(--tap);display:inline-flex;align-items:center;padding-inline:14px}
  .tabs a{min-height:var(--tap);padding-inline:14px}
  .nav a{min-height:var(--tap)}
  .nav-foot{gap:var(--gap-tap)}.nav-foot a{min-height:var(--tap);display:flex;align-items:center}
  .foot-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:4px}
  .datepick{width:var(--tap);height:var(--tap);right:0}
  .datewrap .datefield{padding-right:48px}
  .check{min-height:var(--tap)}.check input{width:24px;height:24px;margin-top:2px}
  .choice input{width:24px;height:24px}
  .filters input[type=search],.filters select{font-size:16px}
  details.tech summary,.dev-pick>summary,.rt-due-actions summary{min-height:var(--tap)}
  .c-btn{min-height:36px;display:inline-flex;align-items:center;padding-inline:12px}
  .tw td>a:only-child:not(.btn){display:inline-block;padding-block:10px}
  th.sort{padding-block:14px}
  td>input:not([type=checkbox],[type=radio],[type=hidden]),td>select{min-width:64px}
}
/* no action is hover-only: what hover shows, focus and touch show too */
@media (hover:none){.bars rect:hover,.hb:hover rect{fill:var(--navy-3)}}

/* 7. U01 density (/account/display, html[data-density]): Comfortable is the default; Compact tightens the page, the cards,
   the tables and the product tiles for a mouse only. It never changes a control's size, so the touch rules (§5) keep 44 px
   targets and 8 px gaps on any screen a finger can use. */
@media (hover:hover) and (pointer:fine){
  html[data-density=compact] main.wrap{padding-block-start:12px}
  html[data-density=compact] .card{padding:12px 14px}
  html[data-density=compact] .tw th,html[data-density=compact] .tw td{padding-block:6px}
  html[data-density=compact] h1{margin-block:4px 10px}
  html[data-density=compact] .grid-p{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  html[data-density=compact] .prod{min-height:64px;padding:8px 10px}
  html[data-density=compact] .cl{padding:6px 8px}
}

/* 6. print: the side menu and the pin stay off paper */
@media print{.nav,.nav-pin,.burger,.nav-scrim{display:none!important}main.wrap,main.wrap.read{max-width:none;padding:0}}

/* 7. W01 role workspaces (docs/role-workspaces.md): the header's workspace link and the /workspace choice */
.ws-switch{display:inline-flex;align-items:center;gap:.35em;min-height:44px;text-decoration:none}
.ws-switch-l{color:var(--muted)}
.ws-choose{display:flex;flex-wrap:wrap;gap:8px}
.ws-choose .btn{min-height:48px}
.ws-switcher{position:relative}
.ws-switcher summary{cursor:pointer;min-height:44px}
.ws-options{position:absolute;inset-inline-end:0;inset-block-start:100%;z-index:100;display:flex;flex-direction:column;gap:8px;padding:12px;min-width:180px;max-height:65vh;overflow:auto;background:var(--panel,var(--bg));border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px #0003}
.ws-options .btn{min-height:44px;justify-content:start}