/* =====================================================================
   shell.css — chrome that is not the marketing site
   =====================================================================
   Two things live here, both added during the September 2026 rebuild:

   1. The account chip (MEM-01/02/03). Sign-out used to exist in exactly one
      place — the public navbar's account dropdown — so every layout that set
      `bare` shipped without one. This is the shared control all four shells
      now use.

   2. The studio shell (SVC-01). The ten document editors used to render
      inside the marketing layout, with a hero above the editor and the site
      footer below it. They now get their own full-height chrome: a step rail
      on the left, the sheet on the right, the export bar at the top.

   Everything below is written against the tokens already declared in
   app.css (--fs-*, --sp-*, --r-*, and the HSL colour triplets). No literal
   colours, so all six themes repaint correctly — which is the whole point of
   DSG-03.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. account chip */

.acct { position: relative; flex: 0 0 auto; }

.acct-trigger,
.acct-signin {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-4);
  border: 1px solid hsl(var(--border)); border-radius: var(--r-pill);
  background: hsl(var(--card)); color: hsl(var(--foreground));
  font: 500 var(--fs-md)/1 var(--font-body); text-decoration: none;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.acct-trigger:hover,
.acct-signin:hover { border-color: hsl(var(--primary)); background: hsl(var(--muted)); }
.acct-trigger:focus-visible,
.acct-signin:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.acct-mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  color: hsl(var(--primary-foreground));
  font: 700 var(--fs-xs)/1 var(--font-body);
}
.acct-name { max-width: 13ch; }

.acct-menu { min-width: 210px; }
.acct-menu form { margin: 0; }
.acct-menu form .dd-item { width: 100%; text-align: left; }

/* The bare-mode fallback: a signed-in member on a shell that forgot to render
   its own chip still gets one, pinned clear of the content. */
.acct-floating {
  position: fixed; z-index: 60;
  top: max(var(--sp-5), env(safe-area-inset-top));
  right: max(var(--sp-5), env(safe-area-inset-right));
  box-shadow: 0 2px 12px hsl(var(--foreground) / .14);
}
.acct-floating .dd-menu { right: 0; left: auto; }

/* sign-out inside the mobile drawer */
.drawer-signout { margin: 0; }
.drawer-signout .drawer-link {
  width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; color: hsl(var(--destructive));
  display: flex; align-items: center; gap: var(--sp-4);
}

/* ---------------------------------------------------------------- 2. studio shell */

body.studio-body { overflow: hidden; }

.st-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  background: hsl(var(--background));
}
/* 15-Sep-2026: the site navigation now sits above every studio. The shell
   takes what is left of the screen below it. */
body.studio-body.has-sitenav { --sitenav-h: 74px; }
body.studio-body.has-sitenav .nav-spacer { height: var(--sitenav-h); }
body.studio-body.has-sitenav .st-shell { height: calc(100dvh - var(--sitenav-h)); }
body.studio-body.has-sitenav .st-home { display: none; }

/* --- top bar: identity on the left, export on the right --- */
.st-bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  min-height: 52px;
}
.st-back {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: hsl(var(--muted-foreground)); text-decoration: none;
  font: 500 var(--fs-md)/1 var(--font-body); white-space: nowrap;
}

/* The way home. Icon-only so it costs almost no width in a bar that also
   has the title, the export buttons and the account chip; the accessible
   name is still there for anyone not going by the picture. */
.st-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  color: hsl(var(--muted-foreground)); text-decoration: none;
  border: 1px solid hsl(var(--border)); border-radius: 6px;
}
.st-home:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.st-home:focus-visible, .st-back:focus-visible {
  outline: 2px solid hsl(var(--primary)); outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.st-back:hover { color: hsl(var(--foreground)); }
.st-title {
  font: 600 var(--fs-lg)/1.2 var(--font-head);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-kind {
  font: 500 var(--fs-xs)/1 var(--font-body); letter-spacing: .06em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
  padding: var(--sp-2) var(--sp-3); border: 1px solid hsl(var(--border));
  border-radius: var(--r-xs); white-space: nowrap;
}
.st-grow { flex: 1 1 auto; min-width: var(--sp-4); }
.st-actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
@media (max-width: 1100px) {
  .st-bar { flex-wrap: wrap; }
  .st-actions { width: 100%; max-width: 100%; flex-wrap: wrap; gap: var(--sp-2, 6px); }
  .st-actions .btn { min-width: 0; }
}
.st-saved { font: var(--fs-sm)/1 var(--font-body); color: hsl(var(--muted-foreground)); white-space: nowrap; }

/* --- left rail: the steps --- */
.st-rail {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
.st-steps {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); border-bottom: 1px solid hsl(var(--border));
}
.st-step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: hsl(var(--foreground));
  font: 500 var(--fs-base)/1.2 var(--font-body); text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.st-step:hover { background: hsl(var(--muted)); }
.st-step[aria-current="true"] {
  background: hsl(var(--primary) / .08);
  border-color: hsl(var(--primary) / .35);
  color: hsl(var(--primary));
}
.st-step:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.st-step-n {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid currentColor;
  font: 600 var(--fs-sm)/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.st-step[aria-current="true"] .st-step-n {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent;
}
.st-step-t { min-width: 0; }
.st-step-t b { display: block; font-weight: 600; }
.st-step-t small { display: block; font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); font-weight: 400; }
.st-step[aria-current="true"] .st-step-t small { color: hsl(var(--primary) / .75); }
.st-step-ok { color: hsl(var(--primary)); opacity: 0; transition: opacity .15s ease; }
.st-step.is-filled .st-step-ok { opacity: 1; }

/* the scrolling panel body */
.st-panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5); }
.st-panel[hidden] { display: none !important; }
.st-panel-h {
  font: 600 var(--fs-lg)/1.2 var(--font-head);
  margin: 0 0 var(--sp-2);
}
.st-panel-d {
  font: var(--fs-md)/1.5 var(--font-body); color: hsl(var(--muted-foreground));
  margin: 0 0 var(--sp-6); max-width: 42ch;
}

/* --- right: the sheet --- */
.st-stage {
  min-width: 0; min-height: 0; overflow: auto;
  padding: var(--sp-8);
  background:
    repeating-conic-gradient(hsl(var(--muted)) 0% 25%, transparent 0% 50%) 0 0 / 18px 18px,
    hsl(var(--background));
  display: flex; justify-content: center; align-items: flex-start;
}
.st-sheets { display: flex; flex-direction: column; gap: var(--sp-8); }

/* --- template gallery (step 1) --- */
.st-gal {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--sp-4);
}
.st-tpl {
  display: block; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid hsl(var(--border)); border-radius: var(--r-sm);
  background: hsl(var(--card)); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.st-tpl:hover { border-color: hsl(var(--primary) / .5); }
.st-tpl:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.st-tpl[aria-pressed="true"] {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / .25);
}
.st-tpl-prev {
  aspect-ratio: 1 / 1.414; max-width: 100%;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
  display: block; overflow: hidden;
}
.st-tpl-prev svg, .st-tpl-prev img { width: 100%; height: 100%; display: block; }
.st-tpl-n {
  display: block; padding: var(--sp-3) var(--sp-4);
  font: 500 var(--fs-sm)/1.3 var(--font-body); color: hsl(var(--foreground));
}
.st-tpl[aria-pressed="true"] .st-tpl-n { color: hsl(var(--primary)); font-weight: 600; }

/* --- the sample-data notice --- */
.st-sample {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  border: 1px dashed hsl(var(--border)); border-radius: var(--r-sm);
  background: hsl(var(--muted) / .5);
  font: var(--fs-md)/1.5 var(--font-body); color: hsl(var(--muted-foreground));
}
.st-sample b { color: hsl(var(--foreground)); font-weight: 600; }
.st-sample button { flex: 0 0 auto; }

/* --- narrow screens: rail becomes a sheet above the preview --- */
@media (max-width: 900px) {
  .st-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: auto; min-height: 100dvh; }
  body.studio-body { overflow: auto; }
  .st-rail { border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
  .st-panels { max-height: 58vh; }
  .st-stage { padding: var(--sp-5) var(--sp-4); }
  .st-title { font-size: var(--fs-base); }
  .st-kind, .st-saved { display: none; }
}
@media (max-width: 560px) {
  .st-bar { flex-wrap: wrap; row-gap: var(--sp-3); }
  /* 18-Sep-2026 — the toolbar ran off the side of a phone.
     ফোনে টুলবারের বোতামগুলো পর্দার বাইরে চলে যেত, আর পুরো পাতাটা
     পাশে সরত।

     .st-bar was already allowed to wrap, but .st-actions itself is a flex
     row with no flex-wrap, so its buttons (Export PDF, Word, Save, Open…)
     never moved to a second line: they simply kept going, the row measured
     556 px inside a 366 px bar, and the whole document scrolled sideways —
     which on a phone also widens the fixed navbar, so the header looked
     broken too. Every document tool (CV, cover page, cover letter,
     assignment, lab report, thesis, SOP, slide, marksheet, references)
     shares this bar, so all of them had it.

     The row now wraps, each button takes a fair share of the line, and the
     word "Export"/"Download" is dropped on the narrowest screens so the
     icon and the format still fit. */
  .st-actions { width: 100%; flex-wrap: wrap; row-gap: var(--sp-2, 6px); }
  .st-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .st-actions .btn span { overflow: hidden; text-overflow: ellipsis; }
  .st-bar, .st-actions { max-width: 100%; }
}
@media (max-width: 400px) {
  .st-actions .btn { font-size: 12px; padding-left: 10px; padding-right: 10px; }
}

@media print {
  .st-bar, .st-rail, .acct-floating { display: none !important; }
  .st-shell { display: block; height: auto; }
  .st-stage { padding: 0; background: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-trigger, .acct-signin, .st-step, .st-tpl, .st-step-ok { transition: none; }
}

/* ---------------------------------------------------------------- 3. re-homed editor bits */
/* shell.js moves each tool's existing panels into the rail. The accordion
   stays open — the step rail decides what is on screen now — so its summary
   and chevron are redundant and its card chrome would nest a box in a box. */
.st-panels details.sp.st-open {
  border: 0; background: none; padding: 0; margin: 0; box-shadow: none;
}
.st-panels details.sp.st-open > summary { display: none !important; }
.st-panels details.sp.st-open > .sp-body { padding: 0; }
.st-panels .st-panel + .st-panel { margin-top: 0; }

/* the type switcher cv.php puts above the columns rides at the top of the rail */
.st-panels > .typebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: 0 0 var(--sp-5); margin: 0 0 var(--sp-5);
  border-bottom: 1px solid hsl(var(--border));
}
.st-panels > .typebox { margin: 0 0 var(--sp-5); }

/* the sheet's own status strip, once the buttons have left it */
.st-stage .stage-bar {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: 0 auto var(--sp-4); padding: 0;
  font: var(--fs-sm)/1 var(--font-body); color: hsl(var(--muted-foreground));
  background: none; border: 0; justify-content: center; flex-wrap: wrap;
}
.st-stage .studio-stage { display: block; width: 100%; }
.st-stage .stage-wrap { background: none; border: 0; padding: 0; overflow: visible; }

/* a non-editor page that still asked for this layout keeps its own body */
.st-shell.st-plain { display: block; height: auto; }
.st-shell.st-plain .st-rail, .st-shell.st-plain .st-stage { display: none; }

/* the export bar's buttons, now in the top bar */
.st-actions .btn { white-space: nowrap; }
.st-actions label.btn { cursor: pointer; }

/* ---------------------------------------------------------------- 4. member dashboard */
/* MEM-04/05: the dashboard opened on four counters and never mentioned the
   documents a member had actually built. These style the two blocks that
   replaced them: what you hold, and what you have made. */
.dash-h {
  font: 600 var(--fs-lg)/1.2 var(--font-head);
  margin: var(--sp-8) 0 var(--sp-4);
}
.dash-services { display: grid; gap: var(--sp-3); }
.dash-svc {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding: var(--sp-5); border: 1px solid hsl(var(--border));
  border-radius: var(--r-sm); background: hsl(var(--card));
}
.dash-svc.is-on { border-left: 3px solid hsl(var(--primary)); }
.dash-svc-ic {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--r-xs);
  background: hsl(var(--muted)); color: hsl(var(--primary));
}
.dash-svc b { display: block; font-size: var(--fs-base); }
.dash-svc-note {
  display: block; font-size: var(--fs-sm); color: hsl(var(--primary)); font-weight: 500;
  margin-top: var(--sp-1);
}
.dash-svc-d {
  margin: var(--sp-2) 0 0; font-size: var(--fs-md);
  color: hsl(var(--muted-foreground)); max-width: 64ch;
}
.dash-svc .btn { flex: 0 0 auto; align-self: center; }

.dash-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); }
.dash-doc {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid hsl(var(--border));
  border-radius: var(--r-xs); background: hsl(var(--card));
  text-decoration: none; color: inherit; min-width: 0;
}
.dash-doc:hover { border-color: hsl(var(--primary) / .5); }
.dash-doc-ic { color: hsl(var(--muted-foreground)); flex: 0 0 auto; }
.dash-doc b { display: block; font-size: var(--fs-base); font-weight: 600; }
.dash-doc small { display: block; font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); }

@media (max-width: 560px) {
  .dash-svc { flex-wrap: wrap; }
  .dash-svc .btn { width: 100%; justify-content: center; }
}

/* a Bangla line beneath an English one, in payment and map copy */
.bn-line {
  display: block; margin-top: var(--sp-2);
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', sans-serif;
  color: hsl(var(--muted-foreground));
}

/* ---------------------------------------------------------------- 2b. wide rail (15-Sep-2026)
   The CV studio edits a lot more than a cover page: 30 % of the screen,
   never narrower than 380 px, never wider than 760 px, and draggable. The
   steps become a compact grid of tabs so the panel below keeps the height. */
.st-shell.st-wide { grid-template-columns: clamp(380px, var(--rail-w, 30%), 760px) minmax(0, 1fr); }
.st-wide .st-rail { position: relative; }
.st-wide .st-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 10px 12px;
}
.st-wide .st-step {
  grid-template-columns: 20px minmax(0, 1fr) auto; gap: 7px;
  padding: 7px 8px; font-size: 13px; position: relative;
}
.st-wide .st-step-n { width: 20px; height: 20px; font-size: 11px; }
.st-wide .st-step-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-wide .st-step-t small { display: none; }
.st-wide .st-step-ok { display: none; }
.st-wide .st-step.is-filled .st-step-n { box-shadow: 0 0 0 2px hsl(var(--primary) / .25); }
.st-wide .st-panels { padding: 16px 18px 28px; }
.st-wide .st-panel-d { max-width: none; margin-bottom: 14px; }
.st-resize {
  position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; z-index: 5;
  cursor: col-resize; background: transparent;
}
.st-resize::after {
  content: ""; position: absolute; top: 50%; left: 2px; width: 4px; height: 44px; margin-top: -22px;
  border-radius: 4px; background: hsl(var(--border)); transition: background .15s;
}
.st-resize:hover::after, .st-resize:focus-visible::after, .st-dragging .st-resize::after { background: hsl(var(--primary)); }
.st-dragging, .st-dragging * { user-select: none !important; cursor: col-resize !important; }
@media (max-width: 1100px) { .st-wide .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .st-shell.st-wide { grid-template-columns: minmax(0, 1fr); }
  .st-resize { display: none; }
}

/* 15-Sep-2026: one dashboard — the map account block */
.dash-mapstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2, 8px); }
.dash-mapstats > div { border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 10px 12px; background: hsl(var(--muted) / .35); display: flex; flex-direction: column; gap: 2px; }
.dash-mapstats b { font: 800 22px/1.1 var(--font-head); }
.dash-mapstats span { font-size: 12px; color: hsl(var(--muted-foreground)); }