:root{
  --accent:#2fbf63; --ink:#111; --muted:#666; --line:#e6e6e6;
  --ring:rgba(47,191,99,.35); --bg:#fff; --bg-soft:#fafafa;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#eee; --muted:#aaa; --line:#2b2b2b; --bg:#121212; --bg-soft:#1a1a1a; }
}
.manual-topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.1) blur(6px);
}
.manual-topbar .breadcrumbs{
  margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; min-width:0;
  color:var(--muted);
}
.manual-topbar .breadcrumbs li+li::before{ content:"›"; margin:0 6px; color:var(--muted); }
.manual-topbar .breadcrumbs a{ color:var(--ink); text-decoration:none; }
.manual-topbar .breadcrumbs a:hover{ text-decoration:underline; }
.manual-topbar .breadcrumbs [aria-current="page"]{ color:var(--ink); font-weight:600; }
.manual-topbar .pager{ margin-left:auto; display:flex; gap:8px; }
.manual-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  text-decoration:none; color:var(--ink); background:var(--bg);
}
.manual-btn:hover{ border-color:#ccc; }
.manual-btn:focus{ outline:2px solid var(--ring); outline-offset:2px; }
/* Wider content on desktop */
.manual-body {
  width: 100%;         /* Fill full width of viewport */
  max-width: none;     /* Remove width cap */
  margin: 0;           /* No centering margins */
  padding: 24px 16px;  /* Some breathing room around content */
  box-sizing: border-box; /* Include padding in width calculation */
}


.callout{ margin:16px 0; padding:12px 14px; border-left:3px solid var(--accent); background:var(--bg-soft); }
@media (max-width:720px){
  .manual-topbar{ align-items:flex-start; }
  .manual-topbar .pager{ width:100%; justify-content:space-between; }
}
@media print{ .manual-topbar{ display:none; } .manual-body{ max-width:none; } }

/* Lightbox overlay for images */
#image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#image-lightbox img {
  max-width: 95%;
  max-height: 95%;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
}
#image-lightbox:target {
  display: flex;
}

ul ul {
  margin-left: 20px;   /* Indent nested lists */
  list-style-type: circle; /* Optional: different bullet */
}

  table.symbol-table {
	  border-collapse: collapse;
	  text-align: center;
	  margin: 1em auto;         /* Centers table */
	  max-width: 800px;         /* Prevents it from being too wide */
	  width: auto;              /* Shrinks to fit content */
  }
  .symbol-table th, .symbol-table td {
	  border: 1px solid #000;
	  padding: 4px 8px;
	  white-space: nowrap;      /* Stops cells wrapping, keeps width small */
  }
  .symbol-table th {
    background-color: #f4f4f4;
  }

/* This does figure numbering */
/* This does figure numbering and styling */

/* Counters */
.manual-body { counter-reset: fig; }
.manual-body figure { counter-increment: fig; }
.manual-body figure > figcaption::before {
  content: "Figure " counter(fig) ": ";
  font-weight: 600;
}

/* “Paper-like” look */
.paper-figure {
  display: block;
  margin: 1.5em auto;
  text-align: center;
  max-width: 90%;           /* or set to your text column width */
}

.paper-figure img {
  width: 100%;
  height: auto;
}

.paper-figure figcaption {
  margin-top: 0.5em;
  text-align: center;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  font-size:20px;
}


/* ============================================================
   OghmaNano Manual – CSS (full)
   - Single-column, fixed-width cards
   - Entire card clickable (anchor wrapper)
   - Left aligned
   - Dark-mode aware
   ============================================================ */

/* ---------- Color system ---------- */
:root {
  --mn-bg: #ffffff;
  --mn-fg: #121212;
  --mn-muted: #5f6b76;

  --mn-border: #e5e7eb;
  --mn-border-hover: #cfd4da;

  --mn-card-bg: #ffffff;
  --mn-card-shadow: rgba(0,0,0,0.06);
  --mn-card-shadow-hover: rgba(0,0,0,0.14);

  --mn-link: #6b2bd3;
  --mn-link-hover: #5517c2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mn-bg: #0f1113;
    --mn-fg: #f2f4f6;
    --mn-muted: #aab4be;

    --mn-border: #262a2f;
    --mn-border-hover: #353b42;

    --mn-card-bg: #14171a;
    --mn-card-shadow: rgba(0,0,0,0.35);
    --mn-card-shadow-hover: rgba(0,0,0,0.55);

    --mn-link: #b497ff;
    --mn-link-hover: #d6c7ff;
  }
}

/* ---------- Manual body container ---------- */
.manual-body {
  background: var(--mn-bg);
  color: var(--mn-fg);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0 12px 40px 12px;
}

.manual-body h1 {
  font-size: 2.2rem;
  line-height: 1.25;
  margin: 32px 0 18px 0;
  font-weight: 750;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.2em;
}
.manual-body h2 {
  font-size: 1.65rem;
  line-height: 1.3;
  margin: 28px 0 16px 0;
  font-weight: 650;
}
.manual-body h3 {
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 22px 0 12px 0;
  font-weight: 600;
}


.manual-body a {
  color: var(--mn-link);
}
.manual-body a:hover {
  color: var(--mn-link-hover);
}

/* ---------- Index: card list ---------- */
.manual-body .toc-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 12px 0 28px 0;
}

/* ---------- Card as full clickable link ---------- */
.manual-body .chapter-card {
  display: block; /* anchor behaves like block */
  width: clamp(280px, 92vw, 1000px);
  background: var(--mn-card-bg);
  color: var(--mn-fg);
  border: 1px solid var(--mn-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px var(--mn-card-shadow);
  text-decoration: none;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}

.manual-body .chapter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--mn-card-shadow-hover);
  border-color: var(--mn-border-hover);
}

.manual-body .chapter-card:visited {
  color: var(--mn-fg);
}

/* ---------- Title row ---------- */
.manual-body .chapter-title {
  font-weight: 750;
  font-size: 1.8rem;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* ---------- Blurb ---------- */
.manual-body .chapter-blurb {
  margin: 0;
  font-size: 1.7rem;       /* bigger than before */
  line-height: 1.55;
  color: #000000;      /* same as normal text (black in light mode) */
  font-weight: 400;         /* optional: make it regular weight */
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 360px) {
  .manual-body { font-size: 17px; }
  .manual-body .chapter-title { font-size: 1.18rem; }
  .manual-body .chapter-blurb { font-size: 1.02rem; }
}

/*Tip box*/
.tip {
  border: 1px solid #ccc;
  background-color: #f9f9ff;
  padding: 0.8em 1em;
  border-left: 4px solid #4a90e2;
  border-radius: 6px;
  margin: 1em 0;

  display: block;       /* expand full width in its container */
  max-width: 55%;       /* never exceed 60% of the parent width */
  word-wrap: break-word; /* ensure long text wraps properly */
}

/*Side bar*/
.sidebar-box {
  float: right;
  width: 35%;
  margin: 0 0 1em 1.5em;   /* top 0, right 0, bottom 1em, left 1.5em */
  padding: 1em;
  background: #f9f9ff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9em;
}


.sidebar-box ul {
  margin: 0.5em 0;
  padding-left: 1.2em;
}

.sidebar-box nav ul {
  list-style: none;
  padding-left: 0;
}

.sidebar-box nav li {
  margin: 0.3em 0;
}