
/* V7 M15 — PC structural closure. Mobile M13 remains isolated below 768px. */
@media (min-width:768px){
  :root{--pc-header:64px;--pc-footer:64px;--step-w:164px;--detail-w:312px}
  html,body,#app{width:100%;height:100%;min-height:0;overflow:hidden}
  body{background-attachment:fixed}
  .app-shell{width:100%;height:100dvh;min-height:0;overflow:hidden}
  .topbar{height:var(--pc-header)}
  .workspace{inset:var(--pc-header) 0 var(--pc-footer);height:auto;min-height:0;overflow:hidden;grid-template-columns:var(--step-w) minmax(0,1fr) var(--detail-w)}
  .step-rail{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .decision-pane{min-width:0;min-height:0;padding:20px 20px 16px;overflow:hidden}
  .decision-view{min-height:0;gap:12px}
  .view-heading{min-height:76px;padding-bottom:12px;align-items:end}
  .view-heading h1{font-size:clamp(25px,1.65vw,30px)}
  .decision-content{min-height:0;overflow:hidden;padding-right:0}
  .decision-stage{min-height:0;height:100%;gap:14px}
  .decision-stage.with-inspector{grid-template-columns:minmax(0,1.55fr) minmax(328px,.86fr)}
  .decision-primary,.decision-primary>.decision-view{min-width:0;min-height:0;overflow:hidden}
  .decision-inspector{min-width:0;min-height:0;height:100%;grid-template-rows:44px minmax(0,1fr);border-radius:10px}
  .decision-inspector-head{min-height:44px;padding:0 14px}
  .decision-inspector-body{min-height:0;padding:16px 16px 0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .decision-inspector-body:has(.spell-actions){padding-bottom:0}
  .decision-inspector-body .spell-detail-title{margin-bottom:14px}
  .decision-inspector-body .spell-description{font-size:14px;line-height:1.62}
  .decision-inspector-body .computed-effect{margin:12px 0;padding:10px}
  .decision-inspector-body .detail-list{margin-top:10px}
  .decision-inspector-body .detail-row{padding:8px 0}
  .decision-inspector-body .spell-actions{position:sticky;z-index:5;bottom:0;display:flex;flex-wrap:wrap;gap:8px;margin:16px -16px 0;padding:12px 16px;background:linear-gradient(180deg,rgba(13,11,8,.92),rgba(13,11,8,.995) 35%);border-top:1px solid var(--line);box-shadow:0 -12px 24px rgba(0,0,0,.24)}
  .decision-inspector-body .spell-actions button{min-width:128px;flex:1 1 auto}
  .detail-pane{min-width:0;min-height:0;height:100%;overflow:hidden}
  .effect-pane-layout{min-height:0;height:100%;grid-template-rows:auto minmax(0,1fr) auto}
  .effect-pane-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .full-build-content{max-height:46dvh}
  .actionbar{height:var(--pc-footer);grid-template-columns:var(--step-w) minmax(0,1fr) var(--detail-w)}
  .actionbar-center{min-width:0}
  .desktop-result-trigger{display:none}

  /* Spell workspace: one vertical rhythm, only list and detail body scroll. */
  .spell-decision-content{min-height:0;height:100%;overflow:hidden}
  .spell-layout{height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:0;overflow:hidden}
  .spell-toolbar{display:grid;grid-template-columns:minmax(210px,.72fr) minmax(360px,1.28fr);gap:14px;align-items:end;padding:0 0 9px}
  .spell-counts{min-height:32px;padding:0 0 6px}
  .prepared-strip{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 18px;align-items:center;gap:10px;min-height:56px;max-height:56px;padding:7px 0;border-bottom:1px solid var(--line);overflow:hidden}
  .prepared-strip::after{content:"›";display:grid;place-items:center;color:var(--gold);font-size:18px;opacity:.76;pointer-events:none}
  .prepared-strip.empty{grid-template-columns:auto minmax(0,1fr)}
  .prepared-strip.empty::after{display:none}
  .prepared-icon-row{width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:1px 2px;scrollbar-width:none;overscroll-behavior-x:contain}
  .prepared-icon-row::-webkit-scrollbar{display:none}
  .prepared-icon{width:40px;height:40px;flex-basis:40px}
  .spell-list{min-width:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(122px,auto);align-content:start;gap:1px 12px;border-top:0}
  .spell-item{min-width:0;min-height:122px;height:auto;padding:11px 10px;grid-template-columns:50px minmax(0,1fr);gap:11px;align-items:start;overflow:hidden}
  .spell-list-image{width:46px;height:46px}
  .spell-copy{display:grid;grid-template-rows:auto auto minmax(2.75em,1fr) 24px;gap:3px;min-width:0;min-height:100%;overflow:hidden}
  .spell-title-line{min-height:22px}
  .spell-copy strong{font-size:15px;line-height:1.35}
  .spell-meta{font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spell-copy p{margin:0;font-size:12px;line-height:1.38;-webkit-line-clamp:2}
  .spell-card-footer{min-height:24px;align-items:center}
  .spell-quick-effect{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .spell-item.selected,.spell-item.focused{outline:0}
}

/* Wide desktop: all three product columns remain visible. */
@media (min-width:1600px){
  :root{--step-w:164px;--detail-w:306px}
  .decision-stage.with-inspector{grid-template-columns:minmax(0,1.62fr) minmax(350px,.82fr)}
}

/* Standard desktop: prioritize decision space; result opens on demand. */
@media (min-width:1280px) and (max-width:1599px){
  :root{--step-w:158px;--detail-w:0px}
  .workspace{grid-template-columns:var(--step-w) minmax(0,1fr)}
  .detail-pane{display:none}
  .actionbar{grid-template-columns:var(--step-w) minmax(0,1fr)}
  .actionbar-right{display:none}
  .desktop-result-trigger{display:inline-flex}
  .decision-stage.with-inspector{grid-template-columns:minmax(0,1.45fr) minmax(330px,.82fr)}
}

/* Compact desktop/tablet landscape: keep flow + decision; stack inspector. */
@media (min-width:768px) and (max-width:1279px){
  :root{--step-w:150px;--detail-w:0px}
  .workspace{grid-template-columns:var(--step-w) minmax(0,1fr)}
  .detail-pane{display:none}
  .actionbar{grid-template-columns:var(--step-w) minmax(0,1fr)}
  .actionbar-right{display:none}
  .desktop-result-trigger{display:inline-flex}
  .decision-pane{padding:16px 16px 12px}
  .decision-stage.with-inspector{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(210px,34%);gap:10px}
  .decision-inspector{box-shadow:inset 0 3px rgba(223,189,114,.10)}
  .spell-toolbar{grid-template-columns:1fr;gap:7px}
  .spell-list{grid-template-columns:1fr;grid-auto-rows:minmax(112px,auto)}
  .spell-item{min-height:112px}
}

/* V7 M15 — PC uses vertical/wrapping interactions only. */
@media (min-width:768px){
  /* Horizontal tab rows become wrapped grids. */
  .node-stage-tabs,
  .node-stage-tabs.compact-stages{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
    gap:8px;
    max-height:138px;
    margin-bottom:14px;
    padding:0 4px 4px 0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
  }
  .node-stage,
  .compact-stages .node-stage{
    width:auto;
    min-width:0;
    max-width:none;
    flex:none;
  }

  /* Route and target-level tracks wrap instead of scrolling sideways. */
  .route-track{
    grid-template-columns:repeat(12,minmax(0,1fr));
    overflow:visible;
    padding-bottom:0;
  }
  .level-track{
    grid-template-columns:repeat(12,minmax(0,1fr));
    overflow:visible;
    justify-content:stretch;
  }

  /* Filters never require shift-wheel or drag. */
  .filter-tabs{
    flex-wrap:wrap;
    overflow:visible;
  }

  /* Prepared spells use wrapping icons with optional vertical wheel scrolling. */
  .prepared-strip{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    min-height:56px;
    max-height:112px;
    padding:8px 0;
    overflow:hidden;
  }
  .prepared-strip::after{display:none}
  .prepared-icon-row{
    display:grid;
    grid-template-columns:repeat(auto-fill,40px);
    align-content:start;
    justify-content:start;
    gap:7px;
    width:100%;
    min-width:0;
    max-height:88px;
    padding:0 4px 2px 0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
  }
  .prepared-icon-row::-webkit-scrollbar{display:block;width:7px}

  /* Current build abilities are a wrapping grid, never a horizontal carousel. */
  .compact-feature-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    max-height:150px;
    padding:0 4px 2px 0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
  }
  .compact-feature-chip{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .compact-combat{overflow:visible}

  /* Tablet/compact PC library navigation wraps into rows. */
  .library-nav{
    overflow-x:hidden;
  }
}

@media (min-width:768px) and (max-width:1279px){
  .route-track,
  .level-track{grid-template-columns:repeat(6,minmax(0,1fr))}
  .node-stage-tabs,
  .node-stage-tabs.compact-stages{grid-template-columns:repeat(2,minmax(0,1fr));max-height:154px}
  .compact-feature-row{grid-template-columns:1fr;max-height:160px}
  .library-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:5px}
}
