/* web.css — Invoked on the web. Only the website build loads this (tools/build-web.mjs).
 * On a computer (wide windows) the app is not a phone in a frame: a menu on the left, the screens filling the rest, content in a
 * comfortable wide column, lists in columns, and sheets as centred dialogs. Under 900px wide it stays the phone layout. */
.web-side{display:none;}
@media (min-width:900px){
  body.web-app{background:var(--paper,#F4F7FA);padding-top:0 !important;-webkit-user-select:auto;user-select:auto;}
  body.web-app .web-bar{display:none;}
  body.web-app #nav{display:none !important;}
  body.web-app .stage{display:block;padding:0 0 0 252px !important;min-height:100vh;}
  body.web-app .phone{max-width:none !important;width:100%;height:100vh !important;min-height:0;border-radius:0;box-shadow:none;background:var(--paper,#F4F7FA);}
  body.web-app .tabs{display:none !important;}
  body.web-app .screen .scroll > *{max-width:1040px;margin-left:auto;margin-right:auto;}
  body.web-app .screen .foot{padding-left:max(22px,calc((100% - 1040px)/2));padding-right:max(22px,calc((100% - 1040px)/2));display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  body.web-app .screen .foot > .btn,body.web-app .screen .foot > button{flex:1 1 220px;max-width:420px;margin:0;}
  body.web-app .screen .foot > p,body.web-app .screen .foot > .fine{flex:1 1 100%;}
  /* the menu */
  body.web-app .web-side{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:252px;z-index:9000;background:#0B1520;color:#fff;padding:22px 14px 16px;box-sizing:border-box;font-family:Archivo,system-ui,sans-serif;}
  .web-side .ws-logo{padding:2px 10px 22px;} .web-side .ws-logo svg{display:block;width:150px;height:auto;}
  .web-side .ws-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;margin-bottom:3px;border-radius:12px;color:rgba(255,255,255,.78);font:600 .9375rem Archivo,system-ui,sans-serif;text-align:left;cursor:pointer;background:none;border:0;}
  .web-side .ws-item svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;}
  .web-side .ws-item:hover{background:rgba(255,255,255,.08);color:#fff;}
  .web-side .ws-item[aria-current="true"]{background:rgba(255,255,255,.14);color:#fff;}
  .web-side .ws-item.rec{background:#E5484D;color:#fff;margin:6px 0 12px;justify-content:center;}
  .web-side .ws-item.rec:hover{background:#D23C42;}
  .web-side .ws-sep{height:1px;background:rgba(255,255,255,.12);margin:10px 8px;}
  .web-side .ws-grow{flex:1;}
  .web-side .ws-me{padding:12px 12px 4px;font-size:.8125rem;color:rgba(255,255,255,.7);line-height:1.4;overflow:hidden;text-overflow:ellipsis;}
  .web-side .ws-me b{display:block;color:#fff;font-size:.9375rem;}
  .web-side .ws-out{margin-top:6px;}
  /* sheets are dialogs here, not drawers */
  body.web-app .sheetwrap{align-items:center;justify-content:center;}
  body.web-app .sheet{max-width:560px;width:calc(100% - 48px);border-radius:20px !important;max-height:88vh;overflow:auto;transform:translateY(24px);opacity:0;transition:transform .2s,opacity .2s;}
  body.web-app .sheetwrap.in .sheet{transform:none;opacity:1;}
  body.web-app .qm-wrap{align-items:center;justify-content:center;}
  body.web-app .qm-card,body.web-app .sigpad .sp-card{border-radius:20px !important;max-width:560px;}
  /* lists in columns */
  body.web-app .hm-main{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;}
  body.web-app .hm-main > *{margin:0 !important;}
  body.web-app .hm-rest{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;}
  body.web-app .hm-rest > h3,body.web-app .hm-rest > .t,body.web-app .hm-rest > p,body.web-app .hm-rest > .dash-h,body.web-app .hm-rest > div:not(.hm-card){grid-column:1 / -1;}
  body.web-app .dash-grid{grid-template-columns:repeat(3,1fr) !important;}
  body.web-app #dashList,body.web-app #caseList,body.web-app .cases-list{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;}
}
@media (min-width:1500px){
  body.web-app .screen .scroll > *{max-width:1180px;}
  body.web-app #dashList,body.web-app #caseList,body.web-app .cases-list{grid-template-columns:1fr 1fr 1fr;}
}
/* phone-only settings rows */
body.web-app #swFace,body.web-app #swBg,body.web-app #swCrash,body.web-app [data-go="s22"]{display:none !important;}