/* Phone layout for the signed-in workspaces (dentist portal, Lab Studio,
   Administration). Below 720px the shell stops being a squeezed desktop
   page and behaves like an app: a slim sticky app bar, a bottom tab bar
   for the places each role goes most, and the full sidebar as a bottom
   sheet behind the Menu tab. Loaded last so it wins over the earlier
   responsive passes in workspace.css / workspace-polish.css. */

.ws-appbar-title,.ws-tabbar,.ws-sheet-grip,.ws-sheet-backdrop{display:none}

/* While the workflow note is open it is pinned bottom-right; leave room
   so the last row of a page (the case wizard's Continue) can scroll
   clear of it instead of sitting underneath. */
@media(min-width:721px){body.workplace:has(#wfHint.wf-hint:not(.wf-hint-mini)) .workspace-content{padding-bottom:260px}}

@media(max-width:720px){
  body.workplace{
    --tabbar-h:64px;
    --safe-b:env(safe-area-inset-bottom,0px);
    -webkit-tap-highlight-color:transparent;
    background:#f7f5f8;
  }
  body.ws-sheet-lock{overflow:hidden}

  /* ------------------------------------------------------------ app bar */
  .workplace .topbar{position:sticky;top:0;z-index:45;padding-top:env(safe-area-inset-top,0px);
    background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-bottom:1px solid var(--line)}
  .workplace .topbar-inner{padding:8px 14px;gap:10px;min-height:56px}
  .workplace .topbar .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none}
  .workplace .brand-logo{width:34px;height:34px}
  .workplace .ws-appbar-title{display:block;font-size:15px;font-weight:650;letter-spacing:-.005em;color:#2d1142;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .workplace .ws-appbar-title:empty{display:none}
  .workplace .topbar-actions{gap:8px;margin-left:auto}
  .workplace .ws-search-trigger,.workplace #notifBtn{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:12px}
  .workplace .ws-search-trigger .ws-search-label,.workplace .ws-search-trigger .ws-search-kbd{display:none}

  /* -------------------------------------------------------------- shell */
  .workspace-shell{display:block;min-height:0}
  .workspace-content{padding:20px 16px calc(var(--tabbar-h) + var(--safe-b) + 28px)}
  .workspace-shell:not(:has(.ws-tabbar)) .workspace-content{padding-bottom:40px}

  /* The sidebar becomes a bottom sheet, opened from the Menu tab. */
  .workspace-sidebar{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:10px 16px calc(var(--safe-b) + 18px);gap:12px;border:0;border-radius:22px 22px 0 0;background:#fff;
    box-shadow:0 -18px 50px -20px rgba(33,19,41,.45);transform:translateY(104%);visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
  .workspace-shell.sheet-open .workspace-sidebar{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .ws-sheet-grip{display:block;width:40px;height:5px;border-radius:5px;background:#ddd3e2;margin:0 auto 4px;flex-shrink:0}
  .ws-sheet-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(33,19,41,.42);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:ws-fade .2s ease}
  .ws-sheet-backdrop[hidden]{display:none}
  @keyframes ws-fade{from{opacity:0}}

  .workspace-brand-row{padding:4px 0 14px;border-bottom:1px solid var(--line);gap:8px}
  .workspace-brand{flex:1;min-width:140px;font-size:16px}
  .workspace-monogram{width:32px;height:36px}
  .workspace-nav-label{display:none}
  .workspace-sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}
  .workspace-sidebar nav :is(a,button){min-height:52px;padding:10px 12px;border-radius:12px;font-size:13px;white-space:normal;
    min-width:0;background:#f8f5fa;border:1px solid transparent}
  .workspace-sidebar nav [aria-current=page]{padding-left:12px}
  .workspace-sidebar nav :is(a,button):active{transform:scale(.98)}
  .workspace-sidebar .ws-nav-label .ws-nav-text{white-space:normal;line-height:1.3}
  .workspace-sidebar .ws-nav-group{grid-column:1/-1;padding:14px 4px 2px}
  .workspace-sidebar .ws-nav-group:first-child{padding-top:4px}
  .workspace-support{display:flex;margin:4px 0 0;padding:14px 4px 0;border-top:1px solid var(--line)}
  .workspace-admin .workspace-support,.workspace-portal .workspace-support{display:none}

  /* ------------------------------------------------------------ tab bar */
  .ws-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:6px 6px calc(var(--safe-b) + 6px);min-height:var(--tabbar-h);
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
    border-top:1px solid var(--line);box-shadow:0 -6px 24px -18px rgba(45,17,66,.35)}
  .ws-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:6px 2px;border:0;background:none;font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.01em;
    color:var(--ws-faint);text-decoration:none;cursor:pointer;border-radius:12px;position:relative}
  .ws-tab span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ws-tab .ws-icon{width:22px;height:22px;padding:3px 14px;box-sizing:content-box;border-radius:100px;transition:background .18s ease,color .18s ease}
  .ws-tab:is([aria-current=page],[data-current]){color:#2d1142}
  .ws-tab:is([aria-current=page],[data-current]) .ws-icon{background:#efe7f4;color:#2d1142}
  .ws-tab-menu[aria-expanded=true]{color:#2d1142}
  .ws-tab:active .ws-icon{transform:scale(.92)}
  /* The dentist's "New case" is the one action worth a raised button. */
  .ws-tab-primary .ws-icon{width:24px;height:24px;padding:9px;margin-top:-20px;background:linear-gradient(145deg,#3e2152,#2d1142);
    color:#f0dcb6;border-radius:50%;box-shadow:0 8px 18px -6px rgba(45,17,66,.55),0 0 0 4px #fff}
  .ws-tab-primary:is([aria-current=page]) .ws-icon{background:linear-gradient(145deg,#3e2152,#2d1142);color:#fff}
  .ws-tab-primary{color:#2d1142}

  /* Floating helpers clear the tab bar instead of sitting on it. */
  .workplace .wf-hint,.workplace .wf-hint-mini{bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px)}
  .workplace .wf-hint-mini{width:auto;left:auto;right:14px;max-height:none;overflow:visible;background:none;border:0;box-shadow:none;padding:0}
  .workplace .wf-hint-mini button{width:34px;height:34px;font-size:14px;opacity:.92}
  .workplace .wf-hint{max-height:55dvh;overflow:auto}
  .workplace .toast-host{bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px)}

  /* No fade-in-on-scroll for workspace content on a phone: a fast flick
     outruns the observer and shows blank bands where figures should be. */
  .workplace .reveal,.workplace .reveal :is(h1,h2,h3,.eyebrow,.eyebrow-accent,p,.btn){opacity:1;transform:none;transition:none}

  /* --------------------------------------------------------- page heads */
  .workplace .page-head{margin-bottom:18px;padding-bottom:16px;gap:12px}
  .workplace .page-head h1,.workplace .welcome-card h1{font-size:26px!important;margin:4px 0 2px}
  .workplace .lede{font-size:13px!important}
  .workplace .workspace-context{display:none}
  .workplace .section-head,.workplace .sec-head{margin:22px 0 10px}
  .workplace :is(.section-head,.sec-head) h2{font-size:18px}

  /* Quick actions: a 2-up grid of tappable tiles, not a stack of rows. */
  .workspace-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
  .workspace-quick-actions button{flex-direction:column;align-items:flex-start;gap:10px;min-height:84px;padding:14px;border-radius:14px;
    font-size:13px;font-weight:600;color:#2d1142;box-shadow:0 2px 10px #2d114206}
  .workspace-quick-actions button .ws-icon{width:20px;height:20px;padding:7px;border-radius:10px;background:#f3edf7;color:#6a4680;box-sizing:content-box}
  /* Hide only the arrow: the label is its own <span> too, and hiding every
     span left the tiles as bare icons. */
  .workspace-quick-actions button span[aria-hidden]{display:none}
  .workspace-quick-actions button:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:center;min-height:60px}
  .workspace-quick-actions button:active{transform:scale(.98);background:#f7f2fa}

  /* Figures: two per row, compact — a phone screen should show the whole
     "today" picture at once, not one number per screenful. */
  .workplace .stat-row,.lab-today{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
  .lab-today-tile,.workplace .stat-card{padding:14px;border-radius:14px}
  .lab-today-tile .n,.workplace .stat-card .n{font-size:26px}
  .lab-today-tile .l,.workplace .stat-card .l{font-size:12px}
  .lab-today-tile .m{font-size:10.5px;line-height:1.35}
  .lab-today>:first-child:nth-last-child(odd){grid-column:1/-1}
  .lab-today>:first-child:nth-last-child(odd) .n{font-size:30px}
  .stat-card-v2{flex-direction:row;align-items:flex-start;gap:10px}
  .admin-hero-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .admin-hero-side .stat-card{flex-direction:column}
  .lab-pipeline-v2{gap:8px}
  .pipe-stage{padding:12px;border-radius:14px}
  :is(.lab-today-tile,.stat-card,.pipe-stage,.case-card):active{transform:scale(.985)}

  .workplace :is(.card,.case-card){padding:16px;border-radius:14px}
  .workplace .portal-hero{padding:20px 18px;border-radius:16px}
  .workplace .portal-hero h1{font-size:25px!important}

  /* Queue tabs: one swipeable row of chips instead of a wrapped block. */
  .workplace .workspace-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:-16px;padding:2px 16px 6px;width:auto;gap:8px;background:none;border:0;box-shadow:none;border-radius:0}
  .workplace .workspace-tabs::-webkit-scrollbar{display:none}
  .workplace .workspace-tabs button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;min-height:40px;padding:8px 14px;
    border-radius:100px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;gap:7px}
  .workplace .workspace-tabs button[aria-pressed=true]{background:#2d1142;border-color:#2d1142;color:#fff}

  /* Lab station picker: one clean list of rows. */
  .role-pick-grid{grid-template-columns:1fr;gap:10px;min-height:0}
  .workplace .role-pick{flex-direction:row;align-items:center;gap:14px;height:auto;padding:16px;border-radius:16px}
  .workplace .role-pick .rp-num{width:42px;height:42px;border-radius:12px}
  .workplace .role-pick .rp-body{flex:1;gap:3px}
  .workplace .role-pick .rp-body b{font-size:18px}
  .workplace .role-pick .rp-body small{font-size:12px;line-height:1.45}
  .workplace .role-pick .rp-go{align-self:center}
  .workplace .role-pick-wide{flex-direction:row;align-items:center;padding:20px 16px}
  .role-pick-page{margin-bottom:0}

  /* Case cards: same content, a third less height — the progress rail
     and footer were padded for a desktop column. */
  .workplace .case-card{padding:14px 15px}
  .workplace .case-card .cc-title{font-size:17px;margin-top:8px;line-height:1.3}
  .workplace .case-card .cc-status{margin-top:8px}
  .workplace .case-card .case-progress{margin-top:10px;padding:6px 0 0}
  .workplace .case-card .case-journey{margin-top:0}
  .workplace .case-card .jstep-label{font-size:9.5px}
  .workplace .case-card .cc-foot{margin-top:10px;padding-top:10px;align-items:center}
  .workplace .case-card .cc-foot .btn{min-height:36px;padding:7px 14px;font-size:12.5px}
  .workplace .case-list{gap:10px}

  /* Tables become one card per row; each cell is labelled with its
     column heading (workspace.js copies it into data-label). */
  .workplace .table-wrap{border:0;background:none;box-shadow:none;overflow:visible;border-radius:0}
  .workplace .cases-table{display:block;min-width:0;width:100%}
  .workplace .cases-table tbody{display:grid;gap:10px}
  .workplace .cases-table thead{display:none}
  .workplace .cases-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:14px 15px;
    background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px #2d114206;position:relative}
  .workplace .cases-table td{display:block;padding:0;border:0;min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;box-shadow:none}
  .workplace .cases-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
    font:600 9.5px/1.3 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:#8b7e91}
  .workplace .cases-table td:first-child{grid-column:1/-1;font-size:14px;font-weight:700}
  .workplace .cases-table td:first-child::before{display:none}
  .workplace .cases-table td:last-child:not([data-label]){grid-column:1/-1}
  .workplace .cases-table td:last-child:not([data-label]):empty{display:none}
  .workplace .cases-table td:last-child .btn{width:100%}
  .workplace .cases-table .pill{white-space:normal}
  .workplace .queue-table tbody tr{cursor:pointer;grid-template-columns:repeat(3,minmax(0,1fr));padding-right:15px}
  .workplace .queue-table td[data-label=Status]{grid-column:span 2}
  .workplace .queue-table td:last-child:not([data-label]){position:absolute;top:14px;right:15px;grid-column:auto;font-size:12.5px}

  /* Dentist home: the tab bar already carries New case, so the hero
     keeps its greeting and gives the screen back to the cases. */
  .workplace .portal-hero-actions{display:none}
  .workplace .portal-hero h1{font-size:23px!important}
  .feed-row{grid-template-columns:62px 1fr}
  .feed-time{white-space:nowrap}

  /* Admin tab headers: the tab name says it; the stock subtitle only
     pushed the work down. */
  .workplace .page-head .lede-generic{display:none}
  .workplace .lede .link-btn{display:inline;width:auto;margin:0;min-height:0;padding:0;vertical-align:baseline;color:#2d1142;text-decoration:underline;font-size:inherit}

  /* Products: when the row wraps, the name needs the full width (it was
     being squeezed to zero and set one letter per line). */
  .prod-summary-toggle{flex:1 1 100%}
  .prod-summary-row>[data-quick-product-visibility]{margin-left:68px}

  /* Long record ids (appointment UUIDs) stay on one line. */
  .workplace .cases-table td.cid-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#6c5f75}

  /* Prescription choices: two compact tiles per row instead of a long
     single column of large cards (a crown sheet ran ~6 screens). */
  .workplace .visual-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .workplace .visual-option{flex-direction:column;align-items:flex-start;gap:6px;min-height:0;padding:10px}
  .workplace .visual-option.selected{padding:9px}
  .workplace .visual-option strong{font-size:13px;line-height:1.3}
  .workplace .visual-option small{font-size:11px;margin-top:1px;line-height:1.35}
  .workplace .visual-option .rx-art{flex:0 0 32px;width:32px;height:32px}
  .workplace .visual-option-icon{flex:0 0 28px;height:28px;width:28px;font-size:14px}

  /* Lab board stations: two per row, compact. */
  .station-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .station{padding:13px;gap:8px}
  .station-name{font-size:10px;letter-spacing:.08em}
  .station-icon{width:26px;height:26px}
  .station-count b{font-size:26px}
  .station-oldest{display:none}
  /* Three figures fit one row. */
  .workplace .stat-strip:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .workplace .stat-strip:has(>:nth-child(3):last-child) .chipstat{padding:12px}
  .workplace .stat-strip:has(>:nth-child(3):last-child) .chipstat b{font-size:24px}

  /* Record-page pager sits clear of the tab bar. */
  .workspace-content>nav.u{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}

  /* Wizard footers keep their actions in reach. */
  .workplace .wiz-foot{flex-wrap:wrap}
  .workplace .wiz-foot .btn{flex:1 1 auto;min-height:48px}
}

@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .workspace-sidebar,.workspace-shell.sheet-open .workspace-sidebar{transition:none}
  .ws-sheet-backdrop{animation:none}
}

/* Edge-swipe back indicator for the installed app (utils/backNavigation.js) */
.edge-back{position:fixed;left:-44px;top:50%;z-index:9999;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel,#fff);color:var(--violet,#2d1142);box-shadow:0 6px 20px rgba(20,10,30,.18);opacity:0;transform:translate3d(0,-50%,0);pointer-events:none;will-change:transform,opacity}
.edge-back.is-armed{background:var(--violet,#2d1142);color:#fff}