/* Quartermaster mobile + readability shell
   Linked separately so Map Board edits to index.html do not wipe this. */
:root{
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --tap:44px;
}

.brand .stale-fold{display:none; margin-top:4px; font-size:11px; color:var(--dim)}
.brand .stale-fold > summary{
  cursor:pointer; list-style:none; color:var(--faint);
  font:600 10px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em;
}
.brand .stale-fold > summary::-webkit-details-marker{display:none}
.brand .stale-fold[open] > summary{color:var(--dim); margin-bottom:4px}

.touch-hint{display:none}
#lg-summary{display:none}
.sheet{display:none}
.fob-col-left{display:flex; flex-direction:column; gap:0}

#v-kits .kit-fold > summary{
  font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--dim);
  padding:11px 14px; background:var(--panel2); cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-bottom:1px solid transparent;
}
#v-kits .kit-fold > summary::-webkit-details-marker{display:none}
#v-kits .kit-fold > summary::after{content:'+'; font-size:14px; color:var(--faint)}
#v-kits .kit-fold[open] > summary::after{content:'\2212'}
#v-kits .kit-fold[open] > summary{border-bottom-color:var(--line)}

details.read-more{margin:16px 0 0}
details.read-more > summary{
  cursor:pointer; list-style:none; padding:8px 0;
  font:600 14px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
}
details.read-more > summary::-webkit-details-marker{display:none}
@media (min-width:861px){
  details.read-more > summary{display:none}
  details.read-more .read-more-body{display:block !important}
}

/* Tablet: keep jump + scroll tabs; do not hide map panel without sheet yet */
@media (max-width:1100px) and (min-width:861px){
  .maplayout{grid-template-columns:56px minmax(0,1fr)}
  .mappanel{display:none}
}

@media (max-width:860px){
  .bar{
    position:sticky; top:0; z-index:40;
    padding:calc(8px + var(--safe-t)) 12px 8px;
    gap:8px;
  }
  .brand{gap:8px; width:100%; margin-right:0}
  .brand .mark{width:32px; height:32px}
  .brand h1{font-size:17px}
  .brand > div > p:not(.stale):not(.stale-fold){display:none}
  .brand .backlink{font-size:11px}
  .brand .stale{display:none}
  .brand .stale-fold{display:block}
  .util-nav{
    display:flex !important; width:100%; order:5; margin:4px 0 0; gap:6px;
  }
  .util-nav a{flex:1 1 0; justify-content:center; min-height:var(--tap); font-size:12px}
  .tabs-wrap{flex:1 1 100%; margin:0}
  .tabs-scroll, #tabs{display:none !important}
  .tabjump{
    display:flex !important; flex-direction:column; align-items:stretch; gap:4px;
    font:600 10px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; color:var(--faint);
  }
  .tabjump select{
    width:100%; min-height:var(--tap); font-size:16px; font-family:"IBM Plex Sans",sans-serif;
    text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink);
    background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r); padding:8px 10px;
  }
  .stamp{display:none !important}

  .viewtabs{flex-wrap:wrap}
  .viewtabs .alwaysctl,.viewtabs .footctl{flex:1 1 100%; max-width:100%}
  .grid-kits,.grid-fob,.grid-brief,.grid-log,.grid-sim,.grid-plan{
    grid-template-columns:minmax(0,1fr) !important; gap:14px
  }
  .grid-kits > *,.grid-fob > *,.grid-brief > *,.grid-log > *,.grid-sim > *,.grid-plan > *{min-width:0}
  .palette,#doclist{max-width:100%}
  .palette button{max-width:100%}

  /* Map: stage first, rail as icon row, panel lives in #map-sheet */
  .maplayout{
    display:flex !important; flex-direction:column; height:auto; min-height:70vh;
    padding-bottom:calc(56px + var(--safe-b));
  }
  .maplayout .mapstage{order:1; height:70vh; min-height:280px; position:relative}
  .maplayout .rail{
    order:2; flex-direction:row; overflow-x:auto; width:auto;
    border-right:0; border-top:1px solid var(--line); padding:8px; gap:6px;
    -webkit-overflow-scrolling:touch;
  }
  .maplayout .rail button{width:var(--tap); height:var(--tap); flex:0 0 auto; min-height:var(--tap)}
  .maplayout .mappanel{display:none} /* content moved into sheet */
  #board{position:absolute; inset:0; height:auto !important}
  .rothud{max-width:calc(100% - 24px); left:12px; right:auto}
  .mapoverlay .hudtip{max-width:calc(100% - 24px); font-size:11px}
  .layer-sum{left:8px; right:8px; max-width:none}
  .layer-sum .ls-chip{font-size:9px; padding:3px 6px}
  .death-toolbar{gap:6px}
  .death-mode-row button{flex:1 1 0; min-height:var(--tap); justify-content:center}
  .death-causes label{min-height:36px; padding:6px 8px}
  .mappanel .panel-sticky{position:static; box-shadow:none}
  #v-map.on{padding-bottom:calc(52px + var(--safe-b))}

  #plot,#fpv{height:52vh; min-height:280px}
  #aboard{max-width:100%}

  .scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .scrollx table.bom{min-width:640px}
  table.bom:not(.scrollx table){min-width:0; width:100%}
  table.bom td,table.bom th{word-break:break-word}

  .viewtabs button,.rail button,.fob-tools .btn,.btn.sm{min-height:var(--tap)}
  .fob-tools{gap:8px}
  .fob-tools .btn{flex:1 1 calc(50% - 8px); padding:8px 10px; font-size:12px}
  .viewtabs button{flex:1 1 auto; padding:10px 12px; font-size:12px}
  input[type=number],select{font-size:16px}
  .wrap,.card .body{padding-left:14px; padding-right:14px}
  .wrap{padding:12px}
  h2{font-size:20px}

  .ab-bar{flex-direction:column; align-items:stretch}
  .ab-ctl{justify-content:stretch}
  .ab-ctl .btn.sm{flex:1 1 calc(50% - 6px); min-height:40px}

  /* Bottom sheets */
  .sheet{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
    flex-direction:column; pointer-events:none;
  }
  .sheet > *{pointer-events:auto}
  body[data-wq-view="fob"] #fob-sheet,
  body[data-wq-view="map"] #map-sheet,
  #fob-sheet.wq-open,
  #map-sheet.wq-open{display:flex !important}
  .sheet-panel{
    background:var(--panel); border:1px solid var(--line); border-bottom:0;
    border-radius:12px 12px 0 0; box-shadow:var(--shadow);
    padding:0 0 calc(10px + var(--safe-b));
    max-height:min(68vh, 560px); display:flex; flex-direction:column;
  }
  .sheet.collapsed .sheet-body,
  .sheet.collapsed .sheet-subtabs{display:none}
  .sheet-toggle{
    display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
    appearance:none; border:0; background:transparent; color:var(--dim);
    padding:8px 12px 10px; cursor:pointer; min-height:40px;
    font:600 12px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em;
  }
  .sheet-toggle::before{
    content:""; width:36px; height:4px; border-radius:2px; background:var(--line2);
  }
  .sheet-subtabs{display:flex; gap:4px; padding:0 12px 8px; flex-wrap:wrap}
  .sheet-subtabs button{
    flex:1 1 0; min-height:var(--tap); border:1px solid var(--line); background:var(--panel2);
    color:var(--dim); border-radius:var(--r); cursor:pointer;
    font:600 12px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em;
  }
  .sheet-subtabs button.on{background:var(--brass); color:var(--brass-ink); border-color:var(--brass)}
  .sheet-body{
    overflow:auto; -webkit-overflow-scrolling:touch; padding:0 12px 12px; min-height:0; flex:1 1 auto;
  }

  /* FOB phone layout */
  #v-fob.on{padding-bottom:calc(56px + var(--safe-b))}
  #v-fob .grid-fob{display:flex !important; flex-direction:column; gap:10px}
  #v-fob .fob-col-left,
  #v-fob .grid-fob > .fob-col-costs{display:none}
  #v-fob .fob-col-stage{order:1; display:flex; flex-direction:column; gap:8px}
  #v-fob #basesheet{
    position:sticky; top:calc(72px + var(--safe-t)); z-index:8; margin-bottom:0 !important;
  }
  #v-fob #basesheet .mf-head{padding:10px 12px}
  #v-fob #basesheet .mf-meta{gap:6px 10px}
  #v-fob #basesheet .mf-meta > div{font-size:10px}
  #v-fob #basesheet .mf-meta b{font-size:14px}
  #v-fob .fob-stage-plot{
    position:sticky; top:calc(148px + var(--safe-t)); z-index:7;
    background:var(--bg); padding-bottom:4px;
  }
  #v-fob .fob-col-stage .fob-desk-tools{display:none}
  #fob-sheet-body .fob-desk-tools{display:block; margin:10px 0}
  #fob-sheet-body .fob-col-pieces,
  #fob-sheet-body .fob-build-block,
  #fob-sheet-body .fob-col-costs{display:block}
  #v-fob .kb-hint{display:none}
  #v-fob .touch-hint{display:block !important}
  #v-fob #fobtip{display:none !important}
  #v-fob .plot{border-radius:var(--r); overflow:hidden}
  .walkpad button{min-height:var(--tap); min-width:44px}
  .dpad{grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,48px)}

  /* Kits: manifest first, pickers fold */
  #v-kits .grid-kits{display:flex !important; flex-direction:column}
  #v-kits .grid-kits > :nth-child(2){order:-1}
  .quickslots .qs{min-height:var(--tap); flex:1 1 88px}
  .vestgrid i{min-height:36px}

  /* Arty cards */
  #aout-rows.arty-cards{display:flex; flex-direction:column; gap:8px}
  #aout-rows.arty-cards tr{
    display:grid; grid-template-columns:1fr 1fr; gap:4px 10px;
    border:1px solid var(--line); border-radius:var(--r); padding:10px 12px;
    background:var(--panel2); margin:0;
  }
  #aout-rows.arty-cards td{border:0 !important; padding:0 !important; word-break:break-word}
  #aout-rows.arty-cards td:first-child{grid-column:1 / -1; font-weight:600; color:var(--brass)}
  .scrollx:has(#aout-rows.arty-cards) table.bom{min-width:0}
  .scrollx:has(#aout-rows.arty-cards) thead{display:none}

  #lg-summary{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px;
  }
  #lg-summary > div{
    border:1px solid var(--line); background:var(--panel2); border-radius:var(--r); padding:10px 12px;
  }
  #lg-summary .k{
    font:600 10px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; color:var(--faint);
  }
  #lg-summary .v{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--brass); margin-top:2px}

  html, body{overflow-x:clip}
  .view, .wrap, .grid-brief, .grid-kits, .grid-fob, .maplayout{max-width:100%}
  details.read-more{
    border:1px solid var(--line); border-radius:var(--r); background:var(--panel); margin:14px 0;
  }
  details.read-more > summary{
    padding:12px 14px;
    font:600 13px "Saira Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
  }
  details.read-more > summary::after{content:' +'; float:right; color:var(--faint)}
  details.read-more[open] > summary::after{content:' \2212'}
  details.read-more .read-more-body{padding:0 14px 14px}
  .mb-hero .lede{font-size:14px}
}

@media (max-width:520px){
  #plot,#fpv{height:48vh; min-height:260px}
}