/* ItemAtlas3D manuals — shared stylesheet
   Palette mirrors the app's default "Cool slate" theme (AppThemes.cs, CLAUDE.md §283). Self-contained, no external fonts. */

:root {
  --primary-blue: #475569;
  --primary-blue-mid: #64748B;
  --primary-blue-light: #EEF2F6;
  --primary-teal: #0F6E56;
  --primary-teal-light: #E1F5EE;
  --warning-amber: #BA7517;
  --warning-amber-light: #FAEEDA;
  --danger-red: #E24B4A;
  --danger-red-light: #FBE6E6;
  --coral-dark: #993C1D;
  --dark-text: #1E293B;
  --muted-text: #64748B;
  --border-color: #E2E8F0;
  --surface-bg: #F8FAFC;
  --white: #FFFFFF;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(30, 41, 59, 0.08), 0 6px 18px rgba(30, 41, 59, 0.06);
  --chip-bg: #E2E8F0;
  --chip-stroke: #CBD5E1;
  --chip-text: #334155;
  --chip-selected-bg: #475569;
  --maxw: 900px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--dark-text);
  background: var(--surface-bg);
  line-height: 1.65;
  font-size: 16px;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary-blue);
  color: var(--white);
  box-shadow: var(--shadow);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar .brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.topbar .brand .cube { font-size: 1.3rem; }
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: block;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
/* Logo inside the hero header */
.hero-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.hero-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
@media (max-width: 480px) {
  .hero-logo { width: 60px; height: 60px; border-radius: 14px; }
  .hero-head { gap: 14px; }
}
.topbar nav {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.topbar nav a {
  color: var(--white);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0.9;
}
.topbar nav a:hover { background: rgba(255,255,255,0.15); opacity: 1; }
.topbar nav a.active { background: rgba(255,255,255,0.22); opacity: 1; }

/* ---------- Doc search (injected into the sticky topbar) ---------- */
.docsearch {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 12px;
  position: relative;
}
.docsearch-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px 9px 38px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--dark-text);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") 12px center no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  outline: none;
}
.docsearch-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.45); }
.search-results {
  position: absolute;
  left: 24px; right: 24px;
  top: calc(100% - 4px);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(30,41,59,0.22);
  max-height: 64vh;
  overflow-y: auto;
  z-index: 60;
  display: none;
}
.search-results.open { display: block; }
.search-results .sr-empty { padding: 16px; color: var(--muted-text); font-size: 0.9rem; }
.sr-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  border-bottom: 1px solid var(--border-color); color: var(--dark-text);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover, .sr-item.active { background: var(--primary-blue-light); }
.sr-crumb { font-size: 0.72rem; color: var(--muted-text); text-transform: uppercase; letter-spacing: 0.4px; }
.sr-title { font-weight: 600; font-size: 0.95rem; color: var(--primary-blue); margin: 1px 0; }
.sr-snip { font-size: 0.82rem; color: var(--muted-text); line-height: 1.4; }
.sr-item mark, .sr-title mark { background: #FDE68A; color: inherit; padding: 0 1px; border-radius: 2px; }

/* headings clear the sticky topbar when jumped to */
h2, h3, h4 { scroll-margin-top: 150px; }
@keyframes searchFlash { 0% { background: #FDE68A; } 100% { background: transparent; } }
.search-flash { animation: searchFlash 2s ease-out; border-radius: 6px; }

/* ---------- Image lightbox ---------- */
figure img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.92);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img {
  width: auto; height: auto;          /* ignore the intrinsic attributes here too */
  max-width: 96vw; max-height: 86vh;
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  cursor: zoom-out; object-fit: contain;
}
.lightbox-cap { color: #e2e8f0; font-size: 0.9rem; margin-top: 14px; max-width: 80ch; text-align: center; }
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 96px;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-mid) 100%);
  color: var(--white);
  border-radius: 16px;
  padding: 26px 30px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.hero h1 { margin: 0 0 8px; font-size: 1.7rem; }
.hero p { margin: 0; font-size: 1rem; opacity: 0.95; max-width: none; }
.hero .tag {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  margin-bottom: 14px;
  letter-spacing: 0.4px;
}

/* ---------- Manual cards (landing) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(30,41,59,0.12); }
/* §661: the home page's card icons were OS EMOJI while the app has used Fluent GLYPHS since
   §291 — so the site showed a colourful rocket and a blue box where the app shows neither, and
   they changed shape per platform into the bargain. Same font, same colour as an inline .g. */
.card .ico { font-family: "FluentIcons"; font-size: 2rem; line-height: 1; margin-bottom: 10px;
             color: var(--primary-blue-mid); }
.card h3 { margin: 0 0 8px; color: var(--primary-blue); }
.card p { margin: 0 0 14px; color: var(--muted-text); font-size: 0.95rem; flex: 1; }
.card .go { color: var(--primary-blue); font-weight: 600; font-size: 0.9rem; }

/* ---------- In-app icons ----------
   The app's own subset icon font (Fluent System Icons, MIT), copied verbatim from
   src/ItemAtlas.MAUI/Resources/Fonts/. Codepoints come from Helpers/AppIcons.cs, so a glyph here is
   literally the one on the button being described. ⚠ If the app regenerates the subset, copy the
   .ttf across again — the codepoints are stable but the glyph set is not. */
@font-face {
  font-family: "FluentIcons";
  src: url("assets/fonts/FluentIcons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.g {
  font-family: "FluentIcons";
  font-style: normal;
  font-weight: normal;
  font-size: 1.05em;
  line-height: 1;
  /* ⚠ inline, NOT inline-block: an inline-block creates a line-break opportunity beside adjacent
     text even with no space between them, so in a narrow table column the icon was left stranded
     on the line above its own label. Inline can only break at a space, of which there is none. */
  display: inline;
  vertical-align: -0.09em;
  margin-right: 0.3em;
  color: var(--primary-blue-mid);
}
strong .g, th .g { color: inherit; }
.g + .g { margin-left: -0.1em; }

/* ---------- Buttons ---------- */
.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 22px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,41,59,0.14); }
.btn .bi { font-size: 1.15rem; line-height: 1; }
.btn-primary { background: var(--primary-blue); color: var(--white); }
.btn-primary:hover { background: var(--primary-blue-mid); }
.btn-danger  { background: var(--danger-red); color: var(--white); }
.btn-danger:hover { background: #c93f3e; }
.btn-quiet {
  background: var(--white);
  color: var(--primary-blue);
  border-color: var(--border-color);
}
.btn-quiet:hover { background: var(--primary-blue-light); }
.btn-note {
  margin: -10px 0 0;
  font-size: 0.9rem;
  color: var(--muted-text);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.25; color: var(--dark-text); }
h2 {
  font-size: 1.5rem;
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
}
h2::before {
  content: "";
  display: inline-block;
  width: 6px; height: 1.1em;
  background: var(--primary-blue);
  border-radius: 3px;
  margin-right: 12px;
  vertical-align: -0.15em;
}
h3 { font-size: 1.18rem; margin: 32px 0 10px; color: var(--primary-blue); }
h4 { font-size: 1rem; margin: 22px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--primary-blue); }
ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin: 5px 0; }
code {
  background: var(--primary-blue-light);
  color: var(--coral-dark);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
}
pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px 18px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  box-shadow: var(--shadow);
}
pre code { background: none; color: inherit; padding: 0; }

/* ---------- Table of contents ---------- */
.toc {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-blue);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 32px;
}
.toc h4 { margin: 0 0 10px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.6px; color: var(--muted-text); }
.toc ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 20px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- Callouts ---------- */
.note, .tip, .warn {
  border-radius: var(--radius);
  padding: 14px 18px 14px 46px;
  margin: 18px 0;
  position: relative;
  font-size: 0.95rem;
}
.note { background: var(--primary-blue-light); border: 1px solid #DBE2EA; }
.tip  { background: var(--primary-teal-light); border: 1px solid #c4eadd; }
.warn { background: var(--warning-amber-light); border: 1px solid #f0dcb4; }
.note::before, .tip::before, .warn::before {
  position: absolute; left: 16px; top: 13px; font-size: 1.15rem;
}
.note::before { content: "ℹ️"; }
.tip::before  { content: "💡"; }
.warn::before { content: "⚠️"; }
.note strong, .tip strong, .warn strong { display: block; margin-bottom: 2px; }

/* ---------- Steps ---------- */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: 4px 0 4px 44px;
  margin: 10px 0;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 30px; height: 30px;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.92rem;
}
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-color); }
th { background: var(--primary-blue); color: var(--white); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: var(--surface-bg); }

/* ---------- Figures / screenshot slots ---------- */
figure { margin: 24px 0; }
figure img, figure svg, .shot {
  width: 100%;
  max-width: 100%;
  /* ⚠ Load-bearing. The images carry intrinsic width/height attributes so the browser can reserve
     the right space before a lazily-loaded one arrives. Without height:auto the HTML height
     attribute becomes the USED height while width is stretched to 100%, and every figure renders
     squashed. The attributes and this line are a pair — never add one without the other. */
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  background: var(--white);
  display: block;
}
/* Anything narrower than the column — a tight crop, or a portrait dialog captured on its own.
   Show it at its natural size, centred, rather than upscaled and blurred to fill the width.
   Still shrinks on a narrow screen. */
figure img.crop { width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }

/* A tall portrait capture — a dialog shot on its own. At natural size these run past 1200px and
   swamp the section they illustrate, so cap the HEIGHT and let the width follow. The detail is
   one click away in the lightbox, which is what the caption points at. */
figure img.tall { width: auto; max-width: 100%; max-height: 600px; margin-left: auto; margin-right: auto; }
figcaption { margin-top: 8px; color: var(--muted-text); font-size: 0.85rem; text-align: center; }
.phone-row { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.phone-row img { width: 100%; max-width: 280px; height: auto; border-radius: 18px; }
.shot-placeholder {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 12px, #eef2f7 12px, #eef2f7 24px);
  color: var(--muted-text);
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius);
  text-align: center; padding: 20px;
}
.shot-placeholder .cam { font-size: 2rem; margin-bottom: 6px; }
.shot-placeholder .fn { font-family: monospace; font-size: 0.82rem; color: var(--primary-blue); margin-top: 4px; }

/* ---------- Key / badge chips ---------- */
.kbd {
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 7px;
  font-family: monospace;
  font-size: 0.85em;
  color: var(--dark-text);
}
.chip {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}
.chip.blue  { background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-stroke); }
.chip.teal  { background: var(--primary-teal-light); color: var(--primary-teal); }
.chip.amber { background: var(--warning-amber-light); color: var(--warning-amber); }
.chip.red   { background: var(--danger-red-light); color: var(--danger-red); }

/* ---------- Feature grid ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin: 20px 0; }
.fcard { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.fcard .fi { font-family: "FluentIcons"; font-size: 1.6rem; line-height: 1; margin-bottom: 8px;
             color: var(--primary-blue-mid); }   /* §661 — see .card .ico */
.fcard h4 { margin: 0 0 6px; color: var(--primary-blue); }
.fcard p { margin: 0; font-size: 0.9rem; color: var(--muted-text); }

/* ---------- Videos ---------- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; margin: 20px 0; }
.vcard { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.vcard.wide { grid-column: 1 / -1; }
.vcard .vbody { padding: 14px 18px 18px; }
.vcard h4 { margin: 0 0 6px; color: var(--primary-blue); }
.vcard p { margin: 0; font-size: 0.9rem; color: var(--muted-text); }
.vframe { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #0F172A; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vplay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; color: var(--white); font: inherit; text-align: center; padding: 16px;
  background: linear-gradient(135deg, #1E293B 0%, #475569 60%, #64748B 100%);
  overflow: hidden;
}
/* The video's own first frame, held locally so the page asks YouTube for nothing
   until the visitor presses play. Dimmed so the button and caption stay legible. */
.vplay .vposter {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.62); transition: filter .15s ease, transform .15s ease;
}
.vplay:hover .vposter, .vplay:focus-visible .vposter { filter: brightness(0.72); transform: scale(1.02); }
.vplay > span { position: relative; }
.vplay:hover .vplay-btn, .vplay:focus-visible .vplay-btn { transform: scale(1.06); background: rgba(255,255,255,0.28); }
.vplay-btn {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; transition: transform .15s ease, background .15s ease;
}
.vplay-label { font-weight: 600; }
.vplay-note { font-size: 0.8rem; opacity: 0.8; max-width: 34ch; }
.vsoon { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--chip-text); background: var(--chip-bg); border: 1px solid var(--chip-stroke); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
@media (max-width: 480px) { .vplay-btn { width: 52px; height: 52px; font-size: 1.2rem; } }

/* ---------- Back to top / footer ---------- */
.crumbs { font-size: 0.85rem; color: var(--muted-text); margin-bottom: 8px; }
.crumbs a { text-decoration: none; }
footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px 48px;
  border-top: 1px solid var(--border-color);
  color: var(--muted-text);
  font-size: 0.85rem;
  text-align: center;
}
footer a { color: var(--primary-blue); text-decoration: none; }
.docver {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-blue-light);
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

hr.sep { border: none; border-top: 1px solid var(--border-color); margin: 40px 0; }

/* ---------- Hierarchy diagram ---------- */
.hier { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.hier .lvl { display: flex; align-items: center; gap: 10px; }
.hier .box {
  padding: 8px 16px; border-radius: 8px; font-weight: 600; color: var(--white); font-size: 0.9rem;
}
.hier .b-building { background: var(--coral-dark); }
.hier .b-floor    { background: var(--warning-amber); }
.hier .b-room     { background: var(--primary-blue); }
.hier .b-storage  { background: var(--primary-teal); }
.hier .arrow { color: var(--muted-text); font-size: 1.2rem; }
.hier .desc { color: var(--muted-text); font-size: 0.88rem; }

@media (max-width: 640px) {
  .toc ol { columns: 1; }
  .hero { padding: 20px 18px; }
  .hero h1 { font-size: 1.35rem; }
  .wrap { padding: 20px 16px 72px; }
}

@media print {
  .topbar, footer .noprint { display: none; }
  body { background: white; }
  .card, table, pre, figure img { box-shadow: none; }
}