/* ============================================================
   Student Insight — VS-Style Shell CSS (vs-shell-plan-v2.md Task 3)
   Replaces the scrapped css/shell.css. Fixed-position left/right
   panels (Toolbox / Solution-Explorer proportions), resizable by
   dragging a divider, collapsible to a thin strip — NOT true
   drag-to-anywhere docking (confirmed out of scope, see
   vs-shell-plan-v2.md §2). Structure only in this task: panels ship
   empty, real content is Tasks 4/5/6.

   RTL: grid tracks are placed in the inline direction, so under
   [dir="rtl"] on #app-shell-body (set in reapplyI18nStrings(), see
   js/render-dashboard.js) the panel-start/core/panel-end columns
   mirror automatically — no separate RTL override block needed for
   the grid itself. inset-inline-start/end (not left/right) are used
   throughout so the divider and collapse-toggle positions mirror too.
   This covers the shell chrome only; a full-page RTL content audit is
   Task 8's regression pass, not this task's.
============================================================ */

:root{
  --panel-start-width:240px;
  --panel-end-width:240px;
  --panel-min-width:160px;
  --panel-max-width:420px;
  --panel-collapsed-width:28px;
  --shell-divider-width:6px;
  --footer-h:40px;
  /* v5.0-modernization: dedicated motion tokens for sheet-scale surfaces
     (the mobile top-strip/bottom-sheet panels) — a full-panel slide is a
     materially larger, more visible movement than a button/card hover, so
     it earns its own duration/easing pair instead of overloading
     --dur-slow. ease-out-quint: fast start, long gentle settle — reads as
     a deliberate slide, not a snap. */
  --dur-sheet:.42s;
  --ease-sheet:cubic-bezier(.22,1,.36,1);
}

#app-shell-body{
  display:grid;
  grid-template-columns:
    var(--panel-start-width) var(--shell-divider-width)
    minmax(0,1fr)
    var(--shell-divider-width) var(--panel-end-width);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb"
    "start divstart core divend end";
  margin-top:var(--content-top);
  height:calc(100vh - var(--content-top));
  transition:grid-template-columns .15s ease;
}
#app-shell-body.shell-no-anim{transition:none}

#shell-breadcrumb{
  grid-area:breadcrumb;
}
#shell-breadcrumb:empty{display:none}

/* ---- side panels ---- */
.shell-panel{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:var(--c-surface);
  border-inline-start:1px solid var(--c-border);
  border-inline-end:1px solid var(--c-border);
  display:flex;
  flex-direction:column;
}
#shell-panel-start{grid-area:start}
#shell-panel-end{grid-area:end}

.shell-panel-toggle{
  flex:0 0 auto;
  width:100%;
  height:28px;
  border:none;
  border-block-end:1px solid var(--c-border);
  background:var(--c-surface2);
  color:var(--c-text2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:8px;
  gap:6px;
  transition:var(--transition);
}
.shell-panel-title{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--c-text2);
}
.shell-panel-toggle:hover{background:var(--c-border);color:var(--c-text)}
/* end-panel chevron points the opposite way visually via icon paths already
   authored per-side in index.html — collapsed state below only spins them
   180deg so the same two icons still mean "expand" once collapsed. */
.shell-panel[data-collapsed="true"] .shell-panel-toggle svg{transform:rotate(180deg)}
.shell-panel[data-collapsed="true"] .shell-panel-title{display:none}
.shell-panel[data-collapsed="true"] .shell-panel-content{display:none}
.shell-panel[data-collapsed="true"]{overflow:visible}

.shell-panel-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:12px;
}
.shell-panel-content:empty{padding:0}

/* ---- Task 4: left-panel key/value rows (VS Properties-panel style) ---- */
.shell-kv-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-block:6px;
  border-block-end:1px solid var(--c-border);
  font-size:12px;
}
.shell-kv-row:last-child{border-block-end:none}
.shell-kv-label{color:var(--c-text2);font-size:11px}
.shell-kv-value{color:var(--c-text);font-weight:600;word-break:break-word}
.shell-empty-state{color:var(--c-text2);font-size:12px;text-align:center;padding:20px 8px}
.shell-empty-state::before{
  content:"";
  display:block;
  width:26px;height:26px;
  margin:0 auto 8px;
  background-color:var(--c-text3);
  opacity:.55;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}

/* ---- ui-prompt-template.md item 3: Home rail pitch bullets ---- */
/* ---- Home rail pitch rows: icon-chip rows, not a bullet list ---- */
.pitch-rows{
  display:flex;
  flex-direction:column;
  min-height:100%;
  justify-content:space-between;
  gap:2px;
}
.pitch-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-radius:var(--r-sm);
  transition:background-color .12s,color .12s,transform .12s;
}
.pitch-row:hover{background-color:var(--c-primary-soft);color:var(--c-primary);transform:translateX(2px)}
.pitch-icon{
  flex:0 0 auto;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--c-primary-soft);
  color:var(--c-primary);
}
.pitch-row:hover .pitch-icon{background:var(--c-primary);color:#fff}
.pitch-icon svg{width:14px;height:14px}
.pitch-text{font-size:12px;line-height:1.4;color:inherit}

/* ---- item 6: "File details" collapsible (native <details>) ---- */
.shell-details{border:none}
.shell-details summary{
  list-style:none;
  padding-block-end:6px;
  border-block-end:1px solid var(--c-border);
  margin-block-end:6px;
}
.shell-details summary::-webkit-details-marker{display:none}
.shell-details summary::before{
  content:"▸";
  display:inline-block;
  margin-inline-end:5px;
  transition:transform .15s;
}
.shell-details[open] summary::before{transform:rotate(90deg)}
.shell-action-btn{display:block;width:100%;margin-block-end:8px;text-align:center}
.shell-action-btn-sticky{
  position:sticky;
  bottom:0;
  margin-block-end:0;
  box-shadow:0 -6px 8px -6px rgba(0,0,0,.18);
}

/* ---- Task 6: Smart Query v2 rail (chips + answer thread) ---- */
.shell-chip-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:10px}

/* ---- item 7/§6: .bucket-row/.bucket-list are reused inside the rail
   (Dashboard controls list, Compare-mode export list) — that CSS (core.css)
   was sized for the wide full-screen card grid it was originally built
   for (16px bold labels, 64px rows, 16px padding, 14px icon gap). Scoped
   override so it actually fits a 240-420px rail instead of overflowing/
   wrapping awkwardly. */
.shell-panel-content .bucket-list{gap:2px;margin-top:0}
.shell-panel-content .bucket-row{
  padding:8px;
  min-height:auto;
  gap:8px;
  border-radius:var(--r-sm);
}
.shell-panel-content .bucket-icon svg{width:1em;height:1em}
.shell-panel-content .bucket-label{font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.shell-panel-content .bucket-desc{font-size:11px;overflow-wrap:anywhere}
.shell-panel-content .bucket-badge{font-size:10.5px;padding:2px 7px}
.shell-panel-content .bucket-row-active{background:var(--c-primary-soft,var(--c-surface2));border-color:var(--c-primary)}
.shell-chip{
  font-size:11.5px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--c-border);
  background:var(--c-surface2);
  color:var(--c-text);
  cursor:pointer;
}
.shell-chip:hover{border-color:var(--c-primary);color:var(--c-primary)}
.shell-answer-card{
  background:var(--c-surface2);
  border-radius:var(--r-sm);
  padding:8px;
  margin-block-end:6px;
  border-block-end:none;
}
.shell-answer-card .shell-kv-value{font-weight:400;line-height:1.45}

/* ---- resize dividers ---- */
.shell-divider{
  cursor:col-resize;
  background:transparent;
  position:relative;
}
#shell-divider-start{grid-area:divstart}
#shell-divider-end{grid-area:divend}
.shell-divider::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:calc(50% - 1px);
  width:2px;
  background:var(--c-border);
}
.shell-divider:hover::after,
.shell-divider.shell-divider-active::after{
  background:var(--c-primary);
}
.shell-panel[data-collapsed="true"] + .shell-divider,
.shell-divider:has(+ .shell-panel[data-collapsed="true"]){
  cursor:default;
  pointer-events:none;
}

/* ---- core (center, scrollable independent of the panels) ---- */
#app-shell-body #main{
  grid-area:core;
  min-width:0;
  height:100%;
  margin-top:0;
  max-width:none;
  margin-left:0;
  margin-right:0;
  overflow-y:auto;
}

/* ---- whole-app viewport fit (correction, not part of original Task 3) ----
   Only #main should scroll. Previously #app-shell-body's fixed height
   only accounted for the header (--content-top), so #footer (a normal-
   flow sibling after #app-shell-body) pushed the page taller than the
   viewport and required a page-level scroll just to reach it. Header/
   stepper stay exactly as before (position:fixed, untouched); footer now
   gets a reserved height budget too, so header+shell+footer sum to
   exactly 100dvh and the page itself never scrolls — all scrolling
   happens inside #main. Scoped to the same >768px range as the grid
   itself; the mobile fallback below already uses natural page scroll. */
@media(min-width:769px){
  html{height:100%}
  body{height:100dvh;min-height:0;overflow:hidden}
  #app-shell-body{
    height:calc(100dvh - var(--content-top) - var(--footer-h));
  }
  #footer{
    flex:0 0 var(--footer-h);
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* ---- mobile fallback (Task 8) ----
   shell-redesign-plan.md Phase 4's pattern (info strip + bottom sheet),
   built on top of vs-shell.js's existing collapse mechanism instead of
   new JS: "collapsed" on mobile means "shown as a slim strip/pill",
   "expanded" means "shown as a full overlay sheet" — same
   data-collapsed attribute and vsShellToggle() Task 3 already wired,
   just restyled for this breakpoint. No duplicate markup, no new event
   handlers.
   #main gets no explicit width caps at this breakpoint — it fills the
   the space below the fixed header, above the fixed bottom strip. */
@media(max-width:768px){
  #app-shell-body{
    display:block;
    height:auto;
    min-height:calc(100vh - var(--content-top));
    margin-top:var(--content-top);
    padding-block-end:36px; /* room for the collapsed bottom strip */
  }
  #app-shell-body #main{
    height:auto;
    overflow-y:visible;
  }
  .shell-divider{display:none} /* no resizing on touch */

  .shell-panel{
    position:fixed;
    inset-inline:0;
    z-index:400;
    border-inline:none;
    box-shadow:0 0 12px rgba(0,0,0,.18);
    transition:height var(--dur-sheet) var(--ease-sheet);
  }
  /* start (left) panel -> top info strip, expands downward from under
     the header/breadcrumb */
  #shell-panel-start{
    top:var(--content-top);
    border-block-end:1px solid var(--c-border);
  }
  #shell-panel-start[data-collapsed="true"]{height:36px}
  #shell-panel-start[data-collapsed="false"]{
    height:var(--shell-sheet-h, min(70vh, calc(100vh - var(--content-top))));
  }
  /* end (right) panel -> bottom sheet, expands upward from the
     bottom edge */
  #shell-panel-end{
    bottom:0;
    top:auto;
    border-block-start:1px solid var(--c-border);
  }
  #shell-panel-end[data-collapsed="true"]{height:36px}
  #shell-panel-end[data-collapsed="false"]{
    height:var(--shell-sheet-h, min(70vh, calc(100vh - var(--content-top))));
  }
  /* content used to pop via instant display:none/block, completely out
     of step with the height slide above — that mismatch (content
     snapping while the sheet was still visibly mid-motion) was the main
     source of the "banging the wall" feel. Cross-fading it instead, with
     a delay on each side, keeps it invisible until the sheet has mostly
     finished opening, and hidden again just before it finishes closing —
     so the content never appears to slam in or get chopped off. */
  .shell-panel-content{
    transition:opacity calc(var(--dur-sheet) * .55) var(--ease-sheet),
               visibility 0s linear var(--dur-sheet);
  }
  .shell-panel[data-collapsed="true"] .shell-panel-content{
    opacity:0;
    visibility:hidden;
  }
  .shell-panel[data-collapsed="false"] .shell-panel-content{
    opacity:1;
    visibility:visible;
    transition-delay:calc(var(--dur-sheet) * .45),0s;
  }

  /* toggle bar becomes the full-width strip/pill itself on mobile,
     not a slim 28px edge button */
  .shell-panel-toggle{
    height:36px;
    font-size:11px;
    background:var(--c-primary-soft);
    color:var(--c-primary);
    position:relative;
  }
  .shell-panel-toggle:hover{background:var(--c-primary-soft);color:var(--c-primary)}
  .shell-panel-toggle .shell-panel-title{color:var(--c-primary)}
  /* small centered drawer-handle bar, standard mobile affordance for
     "this strip is a pull-open sheet" — purely decorative, sits above
     the label/chevron via ::before */
  .shell-panel-toggle::before{
    content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
    width:32px;height:3px;border-radius:99px;background:var(--c-primary);opacity:.45;
  }
  #shell-panel-start .shell-panel-toggle{border-block-end:2px solid var(--c-primary)}
  #shell-panel-end .shell-panel-toggle{border-block-start:2px solid var(--c-primary);border-block-end:none}
  /* base chevrons were authored for a left/right side-column layout;
     on mobile the panels are a top strip / bottom sheet instead, so
     point them down (expand) / up (collapse) for the top strip and the
     mirror for the bottom sheet, overriding the desktop 180deg-flip rule
     via the higher-specificity #id selector below. */
  #shell-panel-start .shell-panel-toggle svg{transform:rotate(-90deg)}
  #shell-panel-start[data-collapsed="false"] .shell-panel-toggle svg{transform:rotate(90deg)}
  #shell-panel-end .shell-panel-toggle svg{transform:rotate(90deg)}
  #shell-panel-end[data-collapsed="false"] .shell-panel-toggle svg{transform:rotate(-90deg)}
  .shell-panel[data-collapsed="true"] .shell-panel-title{display:inline} /* room for it here, unlike the 28px desktop column */
  /* .shell-panel-content visibility is now handled by the synced
     opacity/visibility cross-fade defined earlier in this block (see
     "content used to pop via instant display:none/block" comment above)
     — no display:none/block toggle here anymore, that was the second
     half of the "banging the wall" bug. */

  /* first-visit discoverability hint (screenshot follow-up, 2026-07-30) —
     gated entirely by body.shell-first-visit, added/removed by
     initMobileFirstVisitHint()/dismissShellHint() in js/vs-shell.js.
     Purely additive: a looping pulse on the existing drawer-handle pill,
     plus a short inline caption next to the title. Never shown again
     after the first tap (localStorage-remembered), so this whole block
     is inert for returning visitors and for desktop at any time. */
  .shell-panel-toggle-hint{
    display:none;
    font-size:10px;
    font-weight:600;
    font-style:italic;
    color:var(--c-primary);
    opacity:.85;
    margin-inline-start:4px;
  }
  .shell-first-visit .shell-panel[data-collapsed="true"] .shell-panel-toggle-hint{
    display:inline;
  }
  .shell-first-visit .shell-panel-toggle::before{
    animation:shellHintHandlePulse 1.8s ease-in-out infinite;
  }
  @keyframes shellHintHandlePulse{
    0%,100%{opacity:.45;width:32px}
    50%{opacity:1;width:52px}
  }
}