/* ECE user guide — shared stylesheet for every guide page (EN + BN).
   Self-contained: no external fonts, no CDN, works from file:// as well as a web server. */

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #1d4ed8;
  --primary-soft: #eff6ff;
  --accent: #0f766e;
  --warn-bg: #fffbeb;
  --warn-border: #fcd34d;
  --tip-bg: #ecfdf5;
  --tip-border: #6ee7b7;
  --code-bg: #f1f5f9;
  --sidebar-w: 290px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --card: #111827;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: #1f2a3c;
    --primary: #60a5fa;
    --primary-soft: #16233c;
    --accent: #5eead4;
    --warn-bg: #2a2413;
    --warn-border: #a16207;
    --tip-bg: #0f2a22;
    --tip-border: #15803d;
    --code-bg: #17202f;
  }
}

* { box-sizing: border-box; }

/* Slim scrollbars everywhere, matching ECE Inventory's own chrome — the default
   Windows bar is wider than the sidebar's padding and dominated the panel. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border) 70%, transparent) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Noto Sans Bengali", "Nirmala UI", system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
}

body.bn { font-size: 16.5px; line-height: 1.85; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.layout { display: flex; align-items: flex-start; max-width: 1400px; margin: 0 auto; }

/* Three bands, like the app's own sidebar: the brand and the language switch stay put
   while only the contents list scrolls. Scrolling the whole panel meant the brand and
   the switch drifted off the top and bottom on a list this long. */
nav.toc {
  position: sticky;
  top: 0;
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 1rem 1rem;
  border-right: 1px solid var(--border);
  background: var(--card);
}
nav.toc > .brand { flex: 0 0 auto; }
nav.toc > ol {
  flex: 1 1 auto;
  /* Without this a flex child refuses to shrink below its content, so the list would
     push the language switch off-screen instead of scrolling inside its band. */
  min-height: 0;
  overflow-y: auto;
  padding-right: .25rem;
}
nav.toc > .langswitch { flex: 0 0 auto; }
/* Brand block — the square ECE mark in a tinted tile beside the title, the same
   shape the app's own sidebar header uses, so the guide reads as part of the
   product rather than a separate document. */
nav.toc .brand {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .55rem; margin-bottom: .5rem;
  border-radius: 8px;
  /* It links to the site's home page, like the app's own sidebar header does. Anchors are
     the brand colour by default, which would repaint the title, so the text colour is
     restored here and the hover is a tinted tile rather than an underline. */
  color: var(--text);
}
nav.toc a.brand:hover { background: var(--primary-soft); text-decoration: none; }
nav.toc .brand .mark {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 2rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
nav.toc .brand .mark img { width: 1.25rem; height: 1.25rem; display: block; }
nav.toc .brand .brandtext {
  min-width: 0; display: block;
  font-weight: 600; font-size: .92rem; line-height: 1.3;
}
nav.toc .brand small {
  display: block; font-weight: 400; color: var(--muted); font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
nav.toc ol { list-style: none; margin: 1rem 0 0; padding: 0; }
nav.toc li { margin: 0; }
nav.toc a {
  display: block;
  padding: .3rem .55rem;
  border-radius: 6px;
  color: var(--text);
  font-size: .89rem;
}
nav.toc a:hover { background: var(--primary-soft); text-decoration: none; }
nav.toc .sub a { padding-left: 1.5rem; color: var(--muted); font-size: .85rem; }
nav.toc .langswitch {
  display: flex; gap: .4rem; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
nav.toc .langswitch a {
  flex: 1; text-align: center; border: 1px solid var(--border);
  border-radius: 6px; font-size: .82rem; padding: .3rem;
}

main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2.25rem 2.5rem 6rem;
}

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  /* The nav sits above the content here rather than beside it, so the three-band split
     has nothing to divide — it goes back to flowing at its natural height, and the page
     scrolls as one. */
  nav.toc {
    position: static; width: 100%; flex: none; height: auto; display: block;
    overflow: visible; padding-bottom: 1.5rem;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  nav.toc > ol { overflow-y: visible; padding-right: 0; }
  main { padding: 1.5rem 1.1rem 4rem; }
}

/* ── Typography ─────────────────────────────────────────────────────── */
h1 { font-size: 1.9rem; margin: 0 0 .4rem; line-height: 1.3; }
h2 {
  font-size: 1.32rem; margin: 2.8rem 0 .9rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--border);
}
h3 { font-size: 1.08rem; margin: 1.9rem 0 .5rem; }
h4 { font-size: .97rem; margin: 1.3rem 0 .35rem; color: var(--accent); }
p { margin: .6rem 0; }
.lead { color: var(--muted); font-size: 1.02rem; }

code, .k {
  background: var(--code-bg); border-radius: 4px; padding: .08em .38em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em;
}
.path { color: var(--accent); font-weight: 600; }

/* ── Cards, tables, callouts ────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.15rem; margin: 1rem 0;
}
/* Only the card's own title sits tight against the top edge. A card long enough to
   need sub-headings inside it (the account-adjustment one) keeps the normal heading
   spacing for those, or they hug the paragraph above and stop reading as headings. */
.card > h3:first-child, .card > h4:first-child { margin-top: .2rem; }

.grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.table-wrap { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; background: var(--card); font-size: .92rem; }
th, td { text-align: left; padding: .55rem .7rem; border: 1px solid var(--border); vertical-align: top; }
th { background: var(--primary-soft); font-weight: 600; }
td.num, th.num { text-align: right; }

.note, .warn, .tip {
  border-radius: 8px; padding: .7rem .95rem; margin: 1rem 0;
  border-left: 4px solid var(--primary); background: var(--primary-soft);
}
.warn { border-left-color: var(--warn-border); background: var(--warn-bg); }
.tip { border-left-color: var(--tip-border); background: var(--tip-bg); }
.note p:first-child, .warn p:first-child, .tip p:first-child { margin-top: 0; }
.note p:last-child, .warn p:last-child, .tip p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.4rem; }
li { margin: .25rem 0; }

.badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--code-bg); color: var(--muted); vertical-align: middle;
}
.badge.admin { border-color: var(--warn-border); background: var(--warn-bg); color: #92400e; }
@media (prefers-color-scheme: dark) { .badge.admin { color: #fbbf24; } }

.steps { counter-reset: s; list-style: none; padding-left: 0; }
.steps > li { counter-increment: s; position: relative; padding-left: 2.2rem; margin: .55rem 0; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: .15rem;
  width: 1.55rem; height: 1.55rem; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.hero {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.4rem 1.6rem; margin-bottom: 1.5rem;
}

footer.docfoot {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .85rem;
}

/* ── One section at a time (guide.js) ───────────────────────────────────
   Only applied once the script has grouped the document and set .paged on
   <body>, so with JavaScript off every section stays visible and the guide
   still reads as one continuous manual. */
body.paged .guide-section { display: none; }
body.paged .guide-section.is-active { display: block; }
/* The opening h2 of a section is now the top of the page, so it no longer
   needs the large separating margin it had mid-document. */
body.paged .guide-section > h2:first-child { margin-top: .3rem; }
body.paged .guide-section .hero + h2 { margin-top: 2rem; }

/* Printing takes the whole manual, whatever section is open on screen. */
body.printing .guide-section { display: block !important; }

nav.toc a.is-current {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
nav.toc a.is-current:hover { background: var(--primary); }
/* The section that owns the current sub-heading, so a reader deep in Settings
   can still see which top-level section they are in. */
nav.toc a.is-in-section { background: var(--primary-soft); font-weight: 600; }
nav.toc .sub a.is-current { color: #fff; }

.sectionnav {
  display: flex; gap: .75rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.sectionnav a {
  flex: 0 1 48%;
  border: 1px solid var(--border); border-radius: 10px;
  padding: .6rem .85rem; background: var(--card);
  font-size: .92rem; font-weight: 600; color: var(--text);
}
.sectionnav a:hover { border-color: var(--primary); text-decoration: none; }
.sectionnav a span {
  display: block; font-size: .74rem; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.sectionnav a.next { text-align: right; margin-left: auto; }

@media (max-width: 560px) {
  .sectionnav { flex-direction: column; }
  .sectionnav a { flex: 1 1 auto; }
  .sectionnav a.next { text-align: left; margin-left: 0; }
}

/* Landing page (index.html) */
.hub { max-width: 940px; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

/* The mark beside the title, same tile the guides carry in their sidebar — just
   sized for a landing page rather than a 290px rail. */
/* Links to the site's home page — see the note on nav.toc .brand for the colour reset. */
.hubbrand { display: flex; align-items: center; gap: .85rem; margin-bottom: .4rem; color: var(--text); }
a.hubbrand:hover { text-decoration: none; }
a.hubbrand:hover h1 { color: var(--primary); }
.hubbrand h1 { margin: 0; }
.hubbrand .mark {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: 0 0 3rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.hubbrand .mark img { width: 1.9rem; height: 1.9rem; display: block; }

@media (max-width: 480px) {
  .hubbrand .mark { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }
  .hubbrand .mark img { width: 1.55rem; height: 1.55rem; }
}
.hub .cardlink {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.15rem 1.3rem; color: var(--text);
}
.hub .cardlink:hover { border-color: var(--primary); text-decoration: none; }
.hub .cardlink strong { display: block; font-size: 1.05rem; }
.hub .cardlink span { color: var(--muted); font-size: .9rem; }

/* ── Search ─────────────────────────────────────────────────────────────
   Injected by guide.js into the sidebar, right under the brand: it is
   navigation, and it answers the same question the contents list does. */
.gsearch { position: relative; flex: 0 0 auto; margin: .25rem 0 .1rem; }
.gsearch-in {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
}
.gsearch-in:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.gsearch-in::placeholder { color: var(--muted); }

/* Fixed, not absolute, and placed by guide.js: the sidebar is `overflow: hidden`
   so that only its contents list scrolls, which would otherwise clip the panel
   at the rail's 290px edge. A fixed box escapes an overflow ancestor; the script
   pins it under the input and follows it on scroll and resize. It is also wider
   than the rail on purpose - one line of snippet is not enough to recognise the
   passage, and there is room to the right of the sidebar. */
.gresults {
  position: fixed;
  z-index: 60;
  max-height: min(60vh, 30rem);
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 14px 34px -12px rgba(15, 23, 42, .35);
}
.gresults .gcount,
.gresults .gempty {
  margin: .15rem .5rem .35rem;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gresults .gempty { text-transform: none; letter-spacing: 0; font-size: .86rem; }

.gresult {
  display: block;
  width: 100%;
  margin: 0;
  padding: .4rem .5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gresult:hover, .gresult.is-sel { background: var(--primary-soft); }
.gresult .gwhere {
  display: block;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
}
.gresult .gwhere .gsep { color: var(--muted); font-weight: 400; }
.gresult .gsnip {
  display: block;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
.gresults mark {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--text);
  border-radius: 3px;
  padding: 0 .1em;
}

/* The passage the reader picked, marked for a moment - the section it lives in
   is long, and dropping them mid-page with no cue means hunting for it again. */
.gflash {
  animation: gflash 1.8s ease-out;
  border-radius: 6px;
}
@keyframes gflash {
  0%, 45% { background: color-mix(in srgb, var(--primary) 20%, transparent); }
  100% { background: transparent; }
}

@media print {
  nav.toc, .sectionnav, .gresults { display: none; }
  .guide-section { display: block !important; }
  main { padding: 0; }
  body { background: #fff; font-size: 11pt; }
  h2 { break-after: avoid; }
  .card, table { break-inside: avoid; }
}