/* Touch layout for the portal and sign-in. The isolated tablet has its own CSS. */
.mobile-demo-note,.mobile-table-hint{display:none}
@media screen and (max-width:900px){
  :root{font-size:16px;--mobile-nav-height:64px;--muted:oklch(43% .025 158)}
  body{line-height:1.55}
  small{font-size:14px}
  main#main{padding:20px 16px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px)}
  .app-shell{margin-left:0}
  .app-shell,.dashboard-main,.dashboard-side,.heading-actions,.request-info{min-width:0}
  .topbar{height:64px;padding-inline:max(12px,env(safe-area-inset-left));gap:8px}
  .mobile-menu{display:inline-flex;margin-left:0;flex-shrink:0}
  .icon-button,.notification{width:44px;height:44px;min-width:44px;min-height:44px}
  .icon-button .icon{width:21px;height:21px}
  .breadcrumbs{gap:6px;font-size:15px;min-width:0;flex:1}
  .breadcrumbs>span,.breadcrumbs>.icon,.user-name,.user-chip>.icon,.topbar-divider{display:none}
  .breadcrumbs strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .compact-brand{display:grid;place-items:center;width:32px;flex:0 0 32px;min-height:44px}
  .compact-brand img{width:28px;height:28px}
  .topbar-right{gap:4px}
  .topbar .demo-tag{display:none}
  .user-chip{min-width:44px;min-height:44px;justify-content:center}
  .user-chip>.avatar{width:32px;height:32px;font-size:14px}
  .notification-count{top:2px;right:1px;font-size:11px;min-width:18px;height:18px;line-height:18px}
  .mobile-demo-note{display:block;padding:7px 16px;background:var(--sand);color:oklch(37% .07 80);font-size:14px;text-align:center}
  .sidebar{width:min(320px,calc(100vw - 48px));padding:24px 16px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain;transform:translateX(-100%);transition:transform .18s ease-out}
  body.menu-open .sidebar{transform:translateX(0)}
  .nav-item{font-size:15px;min-height:44px;padding:10px 12px;gap:12px}
  .nav-item .icon{width:20px;height:20px}
  .nav-label{font-size:13px;letter-spacing:.04em}
  .nav-count{font-size:14px;padding-inline:7px}
  .sidebar-note{font-size:14px}
  .brand.brand-full .brand-caption{font-size:12px}
  .bottom-nav{display:flex;position:fixed;inset:auto 0 0;align-items:center;justify-content:space-around;background:white;border-top:1px solid var(--line);z-index:15;height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:2px}
  .bottom-nav>a{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;min-height:52px;font-size:12px;gap:3px;border-radius:10px;color:var(--muted)}
  .bottom-nav .icon{width:21px;height:21px}
  .bottom-nav .bottom-scan{min-width:0;min-height:52px;margin-top:0;box-shadow:none;background:var(--brand);color:white}
  .bottom-nav>a[aria-current]{background:var(--mint);font-weight:650}
  .bottom-nav .bottom-scan[aria-current]{background:var(--brand);color:white}
  .page-heading{gap:12px;margin-bottom:20px;flex-direction:column;align-items:flex-start}
  .page-heading h1{font-size:26px;letter-spacing:-.03em;overflow-wrap:anywhere}
  .page-heading p{font-size:16px;line-height:1.6}
  h2,.panel-heading h2,.incident-heading h2{font-size:18px;line-height:1.4}
  h3{font-size:17px}
  .heading-actions{width:100%;max-width:none;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
  .heading-actions>.button,.heading-actions>form{width:auto;max-width:100%}
  .heading-actions>form>.button{max-width:100%}
  .heading-actions>.primary{order:-1}
  .heading-actions:has(>.date-pill:only-child){display:none}
  .bottom-nav>a>span{max-width:100%;white-space:nowrap;line-height:1.2}
  .metric-card{padding:18px 16px}
  .garment-cover{height:104px}
  .garment-symbol .icon{width:48px;height:48px}
  .garment-body{padding:16px}
  .photo-preview .avatar,.photo-preview>img{width:72px;height:72px}
  .photo-form input[type=file]{min-height:44px;padding:4px}
  .photo-form input::file-selector-button{min-height:34px;padding:6px 10px}
  .profile-data>div{column-gap:12px;row-gap:4px}
  .button,.small-button,.heading-actions .button,.button-row .button,
  .panel-heading>.button-row .button,.period-fields .button,.clock-banner>.button{
    min-height:44px;min-width:44px;padding:9px 12px;font-size:15px;line-height:1.4;
    white-space:normal;text-align:center;overflow-wrap:anywhere
  }
  .button .icon{width:18px;height:18px}
  .button:hover{transform:none}
  .button:active{transform:scale(.96)}
  .button-row{gap:8px}
  .text-link,.text-button,.notice-content .text-button,.panel-heading .text-link,.panel-bottom-link{
    font-size:15px;min-width:44px;min-height:44px;line-height:1.4;white-space:normal;padding-block:8px
  }
  .text-link .icon,.panel-bottom-link .icon{width:19px;height:19px}
  input,select,textarea,.filters select,.search-field input,.compact-form input,.compact-form select,
  .period-fields label select,.period-fields label input,.action-details input,.action-details textarea{
    font-size:16px;min-height:44px;line-height:1.4
  }
  input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:22px;flex-shrink:0}
  .field label,.line-card p>label,.form-panel form>p>label,.inset-form label,
  .filters>label,.period-fields label,.month-filters label,.signature-panel label,.request-review label{font-size:16px}
  .field.checkbox-field{min-height:48px;align-items:center;grid-template-columns:1fr 28px}
  .field.checkbox-field label{padding-block:10px}
  .field.checkbox-field input{width:22px}
  .inline-check{min-height:48px;gap:12px}
  .help,.help-line{font-size:14px;line-height:1.6}
  .errorlist,.warnings{font-size:15px}
  .form-panel{padding:20px 16px}
  .form-aside p,.balance-note small,.empty p{font-size:16px}
  .form-actions{flex-direction:row;flex-wrap:wrap;gap:8px}
  .form-actions .button{width:auto;min-width:0;flex:1}.form-actions .button.primary{flex:1.5}
  .panel-heading{flex-wrap:wrap;align-items:center;padding:16px;gap:8px 12px}
  .panel-heading p{font-size:15px;line-height:1.55}
  .panel-heading>.button-row{width:auto;max-width:100%;gap:8px}
  .panel-heading>.button-row .button{flex:1;padding-inline:9px;font-size:15px}
  .panel-foot{font-size:14px;line-height:1.6;gap:12px;padding:16px 18px}
  .page-footer{font-size:13px;padding-top:24px}
  .badge,.days-chip,.size-chip{font-size:12px;line-height:1.4;white-space:normal}
  .badge{padding:4px 8px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:16px 14px;min-width:0}
  .stat-label{font-size:14px;line-height:1.4;align-items:flex-start;min-width:0}
  .stat-icon{width:26px;height:26px;flex-shrink:0}
  .stat-icon>.icon{width:16px;height:16px}
  .stat-number{font-size:28px;letter-spacing:-.03em}
  .stat-number>span{font-size:13px;display:block;margin:3px 0 0}
  .stat-caption{font-size:13px;line-height:1.5;align-items:flex-start}
  .metric-card>span{font-size:14px}
  .metric-card>small{font-size:13px}
  .metric-card>strong{font-size:30px}
  .chart-grid{grid-template-columns:minmax(0,1fr)}
  .balance-strip small{font-size:14px;letter-spacing:0}
  .balance-strip>div{padding-inline:18px;min-width:50%;flex:1 1 50%}
  .balance-strip strong{font-size:30px}
  .balance-strip strong>span{font-size:16px}
  .clock-banner{padding:20px;gap:16px}
  .clock-banner h2{font-size:23px;letter-spacing:-.025em}
  .clock-banner p,.clock-banner>div>span{font-size:16px}
  .clock-banner>.button{width:100%}
  .request-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;padding:16px;column-gap:10px;row-gap:6px;align-items:start}
  .request-row>.request-icon{grid-area:1/1/3/2;width:32px;height:32px}
  .request-info{grid-area:1/2/2/3;min-width:0}
  .request-row>.badge{grid-area:2/2/3/3;justify-self:start}
  .request-row>.icon-button,.request-row>.request-manage{grid-area:1/3/3/4;align-self:center}
  .request-info strong,.absence-row strong{font-size:16px}
  .request-info>span,.absence-row small{font-size:15px}
  .request-row>.icon-button{display:inline-flex}
  .quick-panel>a{padding:14px 16px;min-height:64px}
  .quick-panel>a>span:nth-child(2){font-size:16px}
  .quick-panel small{font-size:14px}
  .person-cell strong{font-size:16px}
  .person-cell small{font-size:14px}
  .avatar.small{width:36px;height:36px;font-size:13px}
  .message,.scan-feedback,.camera-placeholder,.steps,.scanner-panel .center{font-size:16px;line-height:1.6}
  .scan-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .scan-actions legend{font-size:17px;margin-bottom:16px}
  .action-option{min-height:48px;gap:8px;padding:10px;font-size:15px}
  .action-option:only-of-type{grid-column:1/-1}
  .scanner-panel form{display:flex;flex-direction:column}
  .scan-actions{order:0}
  .scanner-panel #camera-start,.scanner-panel #camera-stop{order:1;margin:0 0 18px}
  .camera-frame{order:2}
  .scan-feedback{order:3}
  .scanner-panel .center{order:4}
  .scanner-panel .center{text-align:center}
  .segmented{flex-wrap:wrap;gap:6px}
  .segmented a{min-height:44px;min-width:56px;padding:8px 10px;font-size:15px}
  .section-tabs{gap:18px;scroll-padding:16px}
  .section-tabs a{font-size:15px;min-height:44px;padding-block:8px}
  .filters{gap:10px;padding:16px}
  .filters .button{flex:1}
  .filters .text-link{justify-content:center;min-width:70px}
  .period-top .segmented{width:100%;margin-bottom:0}
  .period-top .segmented a{flex:1}
  .period-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;width:100%}
  .period-navigation>strong{font-size:16px;min-width:0}
  .period-navigation>.button{grid-column:1/-1;width:100%;margin-top:4px}
  .period-calendar{position:static;flex-basis:100%;min-width:0;width:100%}
  .period-fields>.button{flex-basis:100%}
  .mini-calendar{position:static;width:100%;margin-top:12px;padding:12px 0;border:0;box-shadow:none;overflow-x:auto}
  .mini-week,.mini-weekdays{gap:0;min-width:308px}
  .mini-weekdays{font-size:14px}
  .mini-week a{font-size:16px;min-height:44px}
  .mini-week a.outside{opacity:1;color:var(--muted)}
  .mini-calendar>small{font-size:14px}
  .trace-panel>summary,.action-details,.action-details summary{font-size:16px}
  .trace-panel>summary>span{font-size:14px}
  .action-details summary{min-height:48px;padding-block:10px}
  .time-span,.report-scope,.compact-data,.garment-category,.line-card legend{font-size:15px}
  .day-link{display:inline-flex;align-items:center;min-height:48px;font-size:16px}
  .variant-list .size-chip,.add-size{min-width:44px;min-height:44px;font-size:14px;display:grid;place-items:center}
  .document-list>a{font-size:16px;flex-wrap:wrap;gap:12px}
  .signature-panel p,.signature-panel input{font-size:16px}
  .document-paper{font-size:16px}
  .document-paper h2{font-size:20px}
  .paper-company,.paper-signatures,.paper-footer{font-size:14px}
  .paper-signatures{gap:16px;flex-wrap:wrap}
  .sticky-actions{bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  .notice-row{padding:16px;gap:12px;flex-wrap:nowrap}
  .notice-content{flex:1 1 0;min-width:0}
  .notice-content h2{font-size:18px}
  .notice-meta,.notice-footnote,.request-detail-heading p,.request-facts dt,.email-origin{font-size:15px}
  .notice-content p{font-size:16px}
  .notice-pagination{flex-wrap:wrap}
  .notice-pagination .button{flex:1}
  .request-detail h3{font-size:17px}
  .profile-data,.profile-heading p,.incident-heading p,.incident-detail{font-size:16px}
  .resolution,.resolution-form label,.module-row,.device-row small,.audit-detail{font-size:15px}
  .profile-data>div{flex-wrap:wrap}
  .confirm-dialog{padding:24px 20px;max-height:calc(100svh - 32px);overflow:auto}
  .confirm-dialog p{font-size:16px}
  .confirm-dialog form{display:grid;grid-template-columns:1fr 1fr}
  .auth-main{padding:32px 20px}
  .auth-card,.auth-card .button{width:100%}
  .auth-description,.auth-card input,.auth-help,.auth-forgot,.demo-box p{font-size:16px}
  .auth-forgot a{display:inline-flex;align-items:center;min-height:48px}
  .auth-mobile-brand small,.eyebrow{font-size:13px}
  .demo-box strong{font-size:17px}
  .demo-box .button-row{display:grid}
  /* Compact records become labelled, readable rows; desktop keeps native tables. */
  table,td{font-size:16px}
  .panel th{font-size:14px}
  .mobile-records,.mobile-records tbody,.mobile-records tr,.mobile-records td{display:block;width:100%}
  .mobile-records thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mobile-records tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .mobile-records tbody tr:last-child{border-bottom:0}
  .mobile-records td{padding:6px 0;border:0;overflow-wrap:anywhere}
  .mobile-records td[data-label]::before{content:attr(data-label);display:block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:5px}
  .mobile-records .action-details{min-width:0;max-width:none}
  .mobile-records .button-row{display:flex;flex-wrap:wrap}
  .mobile-records .empty{padding:20px 0}
  .mobile-records .person-cell{white-space:normal}
  .schedule{min-width:1020px}
  .schedule th:first-child{width:165px}
  .schedule th,.schedule th>span{font-size:16px}
  .schedule td{padding:14px 8px}
  .shift-chip,.shift-chip.away{font-size:14px;padding:8px 5px}
  .mobile-table-hint{display:block;font-size:14px;color:var(--muted);padding:0 18px 14px}
  .calendar-scroll{overflow-x:auto}
  .calendar-grid{min-width:630px}
  .calendar-day-label{font-size:15px;padding:12px 4px}
  .calendar-cell{min-height:92px;padding:7px}
  .calendar-cell>time{font-size:17px;width:30px;height:30px}
  .calendar-event{font-size:14px;padding:6px;overflow-wrap:normal}
}
@media screen and (max-width:380px){
  .stats-grid,.metric-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-number>span{display:inline;margin-left:8px}
  .stat-label{align-items:center}
  .bottom-nav>a{font-size:12px}
  .breadcrumbs{gap:4px}
  .scan-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:900px) and (prefers-reduced-motion:reduce){
  .button:active{transform:none}
}