/* Phone layout (max-width 700px and smaller). Desktop rules live in the other files; these only adjust them for small screens. */
/* ===== phone polish ===== */
html,body{overflow-x:clip;max-width:100%}
img,iframe,video{max-width:100%}
.t,.m,.tq-m b,.tup-m b,.pb-n{overflow-wrap:break-word;min-width:0}
@media (max-width:700px){
  input,select,textarea{font-size:16px!important}
  .top-in{padding:8px 12px}
  .as{padding:0 12px 8px;gap:6px;font-size:13px;flex-wrap:nowrap}
  .as .hint,.rolebar .hint{display:none}
  .as label{white-space:nowrap}
  .as select{max-width:150px;padding:5px 8px}
  .rolebar{flex-wrap:nowrap}
  .sout{padding:5px 10px}
  main{padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px))}
  h1{font-size:30px}
  .head{margin-bottom:8px}
  .head>.btns{width:100%}
  .tabs{flex-wrap:wrap;gap:6px;border-bottom:0;overflow:visible;margin:6px 0 14px}
  .tabs button{border:1px solid var(--line);border-radius:999px;padding:8px 12px;margin:0;font-size:15px;background:var(--surface)}
  .tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .nav{padding:4px 2px calc(4px + env(safe-area-inset-bottom,0px))}
  .nav button{font-size:11.5px;padding:6px 0;min-width:0}
  .nav button svg{width:21px;height:21px}
  .btn{min-height:42px}.btn.sm{min-height:36px}
  .panel{padding:14px;border-radius:12px}
  .grid2{gap:0 12px}
  .toolbar{flex-wrap:wrap}.toolbar .search{flex:1 1 100%}
  .toolbar .btn{flex:1}
  dialog{width:100%;max-width:100%;max-height:92dvh;margin:auto auto 0;border-radius:18px 18px 0 0}
  dialog::backdrop{background:rgba(0,0,0,.55)}
  .dlg-f{flex-wrap:wrap;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .dlg-f .btn{flex:1 1 auto}
  .tw{overflow:visible}
  .tw table,.tw tbody,.tw tr,.tw td{display:block;width:100%}
  .tw thead{display:none}
  .tw tr{border-bottom:1px solid var(--line);padding:10px 12px}
  .tw td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right}
  .tw td::before{content:attr(data-label);color:var(--muted);font-size:13px;text-align:left;flex:none}
  .tw td:empty{display:none}
  .facts{grid-template-columns:110px 1fr;gap:8px 12px}
  .hero{min-height:0;padding:18px 16px}
  .tdash{gap:12px}
  .cal-top h2{font-size:18px}
  .cal-e{font-size:0!important;height:6px;padding:0;border:0!important;border-radius:3px;background:var(--gc)!important}
  .cal-e.tent{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--gc)}
  .cal-e.inv{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--gc);opacity:.7}
  .cal-e.outd{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px)!important}
  .cal-d{min-height:58px;gap:2px}
  .cal-more{font-size:9px}
  .cal-agenda{display:block;margin-top:14px}.cal-agenda h3{margin:0 0 8px}
  .orow{grid-template-columns:auto 1fr!important}.orow .r{grid-column:1/-1!important;grid-row:auto!important;align-items:stretch!important}.orow .r .btn{width:100%}
  .tup.grow{flex-wrap:wrap;row-gap:6px}.tup.grow .tup-m{flex:1 1 calc(100% - 60px)}.tup.grow .grow-r{flex:1 1 100%;justify-content:space-between;padding-left:50px}
  .tup.inv{border-style:dashed}.tup.outd{--gc:var(--muted);cursor:default}
  .cal-top .btn{min-height:32px;padding:4px 10px}
  .sheet-h{padding:14px}.sheet-b{padding:4px 12px 20px}
  .srow{grid-template-columns:1fr auto}.srow .spill{grid-column:1/-1;justify-self:start}
  .obnav{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));background:var(--bg);padding:10px 0;margin:10px 0 0;z-index:5}
  .gate-form{padding:22px 18px calc(30px + env(safe-area-inset-bottom,0px))}
  .pboxes{grid-template-columns:1fr}
}
@media (max-width:380px){.nav button{font-size:10.5px}.brand .lg-wm{height:18px}}
/* phone header: always fits, the Crew/Office switch never gets pushed off */
@media (max-width:700px){
  .brand small,.brand .sep{display:none}
  .top-in{gap:6px}
  .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .top .spacer{flex:1 1 0;min-width:0}
  .thm,.bell,.gsw{flex:none}
  .top .seg{flex:none;padding:2px}
  .top .seg button{padding:6px 10px;font-size:14px}
}
@media (max-width:399px){.top .lg-wm{display:none}}
@media (max-width:339px){.top .seg button{padding:6px 8px}}

/* Roadmap rows (js/pages/office/roadmap.js): status dropdown drops under the text on phones. */
@media (max-width:480px){.row.rm{grid-template-columns:1fr}.row.rm .r{justify-content:flex-start;justify-self:start;grid-column:1;grid-row:auto;order:9}}

/* Phones: 4 tabs plus More (render.js, NAV_PHONE). Tabs marked nav-x live in the More sheet; desktop shows them all. */
@media (max-width:899px){.nav .nav-x{display:none}}
@media (min-width:900px){.nav .nav-more{display:none}}
.badge.dot{min-width:8px;width:8px;height:8px;padding:0;top:5px;left:calc(50% + 8px)}
.navmore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.navmore button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:600 14px/1.15 var(--cond);cursor:pointer;position:relative;text-align:center}
.navmore button svg{width:24px;height:24px;color:var(--muted)}
.navmore .badge{top:6px;left:auto;right:6px}