/*
 * Agilic User Wiki — custom theme layered on top of docsify's Vue theme.
 * Matches agilicsoftware.com's palette: dark header, gold accent, Inter font.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --theme-color: #ca8a04; /* primary-600 — accessible gold on white backgrounds */
  --agilic-accent-900: #111827;
  --agilic-accent-800: #1f2937;
  --agilic-accent-700: #374151;
  --agilic-primary-400: #facc15;
  --agilic-primary-500: #eab308;

  /* Surface and text tokens, taken from agilicsoftware.com's content sections:
   * tinted section grounds, white cards at 8px radius, muted body text against
   * near-black headings. */
  --agilic-surface: #f9fafb;   /* tinted section ground */
  --agilic-card: #ffffff;
  --agilic-border: #e5e7eb;
  --agilic-border-soft: #f3f4f6;
  --agilic-text: #374151;      /* body copy — softer than heading black */
  --agilic-text-muted: #6b7280;
  --agilic-highlight: #fefce8; /* pale gold panel */
  --agilic-highlight-border: #fef08a;
  --agilic-radius: 8px;
  --agilic-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

body,
.markdown-section,
.sidebar {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Sidebar: dark, matching the site header */
.sidebar {
  background-color: var(--agilic-accent-900);
  color: #d1d5db;
  border-right: none;
}

/* Move the toggle to the top-left; docsify's vue theme pins it bottom-left.
 * Only the position is changed — width, and the body.close collapsed state,
 * are left to vue.css. */
.sidebar-toggle {
  background-color: transparent;
  top: 0;
  bottom: auto;
  /* vue.css makes this 284px wide, which would cover the whole first row
   * of the sidebar and swallow clicks on the back-link beneath it. */
  width: auto;
}

.sidebar-toggle span {
  background-color: var(--agilic-primary-400);
}

/* Collapsed: the sidebar slides away and the toggle sits over white content,
 * where gold bars alone wash out. Give them a dark pill to sit on. */
body.close .sidebar-toggle {
  background-color: var(--agilic-accent-900);
  width: auto;
  padding: 12px 14px;
  border-radius: 0 0 6px 0;
}

body.close .sidebar-toggle span {
  background-color: var(--agilic-primary-400);
}

.sidebar > h1 {
  padding: 0 20px;
  margin: 20px 0 1.25rem;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.sidebar > h1 a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
}

.sidebar > h1 img {
  height: 28px;
}

.sidebar ul li a {
  color: #e5e7eb;
  font-size: 15px;
}

.sidebar ul li a:hover {
  color: var(--agilic-primary-400);
  text-decoration: none;
}

.sidebar ul li.active > a {
  color: var(--agilic-primary-400);
  border-right-color: var(--agilic-primary-400);
  font-weight: 600;
}

.sidebar li > p {
  color: #9ca3af;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* Search box */
.search {
  border-top: 1px solid var(--agilic-accent-700) !important;
  padding: 16px 20px !important;
  margin-bottom: 0 !important;
}

.search input {
  background-color: var(--agilic-accent-800) !important;
  border: 1px solid var(--agilic-accent-700) !important;
  color: #fff !important;
}

.search input::placeholder {
  color: #9ca3af;
}

/* The clear button is a filled circle with two stroked paths forming the X.
 * Colouring only `fill` recolours the disc but leaves the X invisible against
 * it, so set the circle and the strokes separately. */
/* The plugin renders the 26x24 icon at scale(.5), leaving 1px-wide X strokes
 * inside a ~6px disc — they disappear and it reads as a plain dot. Scale it
 * back up and thicken the strokes. */
.search .clear-button svg {
  transform: scale(.8);
}

.search .clear-button svg circle {
  fill: var(--agilic-accent-700);
}

.search .clear-button svg path {
  stroke: #f3f4f6;
  stroke-width: 3;
  stroke-linecap: round;
}

.search .matching-post {
  border-bottom-color: var(--agilic-accent-700) !important;
}

.search a {
  color: #d1d5db !important;
}

.search h2 {
  color: #fff !important;
}

.search p {
  color: #9ca3af !important;
}

.search .search-keyword {
  color: var(--agilic-primary-400) !important;
}

/* ---------------------------------------------------------------------------
 * Reading pane
 *
 * agilicsoftware.com builds its content sections out of a small vocabulary:
 * a tinted #f9fafb ground, white cards at 8px radius with a soft shadow,
 * near-black headings over muted #374151 body copy, and gold used sparingly
 * as an accent rather than a fill. The wiki content area used none of it and
 * read as undifferentiated black-on-white, so the same vocabulary is applied
 * here — adapted for reference reading rather than marketing layout.
 * ------------------------------------------------------------------------- */

/* Tinted ground, with the article itself on a white card. */
.content,
body .content {
  background-color: var(--agilic-surface);
}

.markdown-section {
  background-color: var(--agilic-card);
  border: 1px solid var(--agilic-border);
  border-radius: var(--agilic-radius);
  box-shadow: var(--agilic-shadow);
  padding: 40px 48px 56px;
  margin: 32px auto 48px;
  color: var(--agilic-text);
}

.markdown-section p,
.markdown-section li {
  color: var(--agilic-text);
  line-height: 1.7;
}

.markdown-section a {
  color: var(--theme-color);
  font-weight: 600;
  text-decoration: none;
}

.markdown-section a:hover {
  color: #a16207; /* primary-700 */
  text-decoration: underline;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section strong {
  color: #111827; /* gray-900 */
  font-weight: 700;
}

/* Docsify wraps heading text in <a class="anchor"><span>, which otherwise
   overrides the heading color above with its own #34495e default. */
.markdown-section h1 .anchor span,
.markdown-section h2 .anchor span,
.markdown-section h3 .anchor span,
.markdown-section h4 .anchor span {
  color: #111827;
}

/* Heading scale.
 *
 * Most pages use `#` for every section heading — 164 h1s against 12 h2s
 * across the wiki — so the first h1 is the page title and every later one is
 * really a section break. Styling them identically is what made pages read as
 * a flat wall of text, so the *first* h1 is treated as the title and
 * subsequent ones get the section-rule treatment h2 would otherwise carry.
 * (Fixing the underlying markdown is the better long-term answer; this makes
 * the existing content legible either way.) */
.markdown-section h1 {
  font-size: 2.125rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}

/* Any h1 after the first acts as a section heading. */
.markdown-section h1 ~ h1 {
  font-size: 1.5rem;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--agilic-primary-400);
}

/* The italic "date - section" line each page opens with. */
.markdown-section h1 + p em,
.markdown-section h1 + p > em:only-child {
  color: var(--agilic-text-muted);
  font-style: italic;
}

.markdown-section h2 {
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--agilic-primary-400);
}

.markdown-section h3 {
  font-size: 1.1875rem;
  line-height: 1.4;
  margin: 2.25rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--agilic-primary-400);
}

.markdown-section h4 {
  font-size: 1rem;
  line-height: 1.45;
  margin: 1.75rem 0 0.5rem;
  color: var(--agilic-accent-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
}

/* Tables carry a lot of this wiki — 300+ rows of feature and terminology
 * reference — so they get the card treatment rather than bare rules. */
.markdown-section table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--agilic-border);
  border-radius: var(--agilic-radius);
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}

.markdown-section table thead {
  background-color: var(--agilic-surface);
}

.markdown-section table th {
  color: var(--agilic-accent-900);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--agilic-border);
  border-right: 1px solid var(--agilic-border-soft);
}

.markdown-section table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--agilic-border-soft);
  border-right: 1px solid var(--agilic-border-soft);
  vertical-align: top;
}

.markdown-section table th:last-child,
.markdown-section table td:last-child {
  border-right: none;
}

.markdown-section table tr:last-child td {
  border-bottom: none;
}

/* Zebra striping keeps a wide reference row readable across its full width. */
.markdown-section table tbody tr:nth-child(even) {
  background-color: #fcfcfd;
}

.markdown-section table tbody tr:hover {
  background-color: var(--agilic-highlight);
}

/* A wide table must scroll inside its own box rather than push the page. */
.markdown-section .table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.markdown-section .table-wrap > table {
  margin: 0;
}

/* Blockquotes read as the brand's pale-gold panel. None exist in the content
 * yet, but the style is here so the first one looks intentional. */
.markdown-section blockquote {
  background-color: var(--agilic-highlight);
  border: 1px solid var(--agilic-highlight-border);
  border-left: 4px solid var(--agilic-primary-500);
  border-radius: var(--agilic-radius);
  padding: 16px 20px;
  margin: 1.5rem 0;
  color: #713f12; /* primary-900 — readable on the pale gold */
}

.markdown-section blockquote p {
  color: inherit;
  margin: 0;
}

.markdown-section code {
  color: #a16207; /* primary-700 */
  background-color: var(--agilic-surface);
  border: 1px solid var(--agilic-border-soft);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.875em;
}

.markdown-section pre {
  background-color: var(--agilic-surface);
  border: 1px solid var(--agilic-border);
  border-radius: var(--agilic-radius);
}

.markdown-section pre > code {
  border: none;
  background: none;
}

.markdown-section hr {
  border: none;
  border-top: 1px solid var(--agilic-border);
  margin: 2.5rem 0;
}

.markdown-section ul,
.markdown-section ol {
  padding-left: 1.5rem;
}

.markdown-section li + li {
  margin-top: 0.35rem;
}

/* Screenshots sit on the tinted ground so a white-background UI capture has a
 * visible edge instead of bleeding into the card. They are the main content of
 * most pages, so let them use the full column width. */
.markdown-section img.agilic-zoomable {
  background-color: var(--agilic-surface);
  padding: 6px;
  /* `max-width` rather than `width`: a small icon should stay its own size
   * rather than being upscaled into blur. */
  max-width: 100%;
  height: auto;
  margin: 1.25rem 0;
}

/* The italic "date - section" line under each page title. */
.markdown-section h1 + p {
  margin-top: 0;
  margin-bottom: 1.75rem;
  color: var(--agilic-text-muted);
}

/* "Back to Agilic" link, injected into the sidebar via a docsify plugin.
 *
 * It used to sit at the very top, which put an exit link above the wiki's own
 * title and forced a 44px left inset to clear the sidebar toggle. It reads
 * better as a footer: pinned to the bottom of the sidebar, out of the way of
 * the nav but always reachable. The plugin still inserts it first in the DOM,
 * so `order` moves it visually without changing the markup. */
.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar .search {
  order: 1;
  flex: 0 0 auto;
}

/* Spacing for this lives with the other `.sidebar > h1` rules above. */
.sidebar > h1 {
  order: 0;
  flex: 0 0 auto;
}

.sidebar .sidebar-nav {
  order: 2;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-top: 8px;
}

.agilic-back-link {
  order: 3;
  flex: 0 0 auto;
  padding: 14px 20px;
  font-size: 13px;
  border-top: 1px solid var(--agilic-accent-700);
  background-color: var(--agilic-accent-900);
}

.agilic-back-link a {
  /* gray-300 rather than gray-400: on the near-black sidebar this clears the
   * 4.5:1 contrast floor, which #9ca3af did not. */
  color: #d1d5db;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  /* A comfortable target without making the row taller than it needs to be. */
  padding: 4px 0;
}

.agilic-back-link a:hover,
.agilic-back-link a:focus-visible {
  color: var(--agilic-primary-400);
  outline: none;
}

/* The arrow slides back on hover — a small nudge that reads as "leaving". */
.agilic-back-link a::before {
  content: '←';
  display: inline-block;
  transition: transform 0.15s ease;
}

.agilic-back-link a:hover::before {
  transform: translateX(-3px);
}

/* Phone reading width.
 *
 * The vue theme caps the content at `max-width: 80%`, which reads well on a
 * desktop monitor but on a phone spends a fifth of the viewport on empty
 * gutters before its own 15px padding is added — 54px a side on a 390px
 * screen, leaving ~38 characters per line. Below the theme's own 768px
 * breakpoint, trade the percentage cap for a fixed edge margin. */
@media screen and (max-width: 600px) {
  .markdown-section {
    max-width: none;
    padding: 24px 18px 40px;
    /* The card's frame costs horizontal room that a phone cannot spare, so on
     * small screens the article goes back to sitting directly on the page. */
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .content,
  body .content {
    background-color: var(--agilic-card);
  }

  .markdown-section h1 {
    font-size: 1.75rem;
  }

  .markdown-section h2 {
    font-size: 1.3125rem;
    margin-top: 2.25rem;
  }

  .markdown-section h3 {
    font-size: 1.0625rem;
  }

  /* Reference tables are too wide for a phone; let them scroll in place. */
  .markdown-section table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Tablets and narrow windows still want a reading-width cap, but a character
 * count is a better one than a percentage of the viewport. */
@media screen and (min-width: 601px) and (max-width: 768px) {
  .markdown-section {
    max-width: 42rem;
    padding: 32px 28px 44px;
    margin: 20px auto 32px;
  }
}

/* ---------------------------------------------------------------------------
 * Screenshot lightbox
 *
 * Wiki pages are mostly UI screenshots, scaled down to the content column and
 * often unreadable at that size. Every content image becomes clickable and
 * opens full-size in an overlay. The behaviour is wired up in index.html; this
 * is the styling only.
 * ------------------------------------------------------------------------- */

/* Affordance: the cursor and a hover lift are what tell people it's clickable. */
.markdown-section img.agilic-zoomable {
  cursor: zoom-in;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.markdown-section img.agilic-zoomable:hover {
  border-color: var(--agilic-primary-400);
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.12);
}

/* Keyboard users get the same affordance as mouse users. */
.markdown-section img.agilic-zoomable:focus-visible {
  outline: 3px solid var(--agilic-primary-500);
  outline-offset: 2px;
}

.agilic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100; /* docsify's sidebar toggle sits at 30 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: rgba(17, 24, 39, 0.92);
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* An explicit `display` above outranks the browser's built-in [hidden]
 * rule, so the closed overlay would stay laid out and keep swallowing every
 * click on the page. Hide it explicitly. */
.agilic-lightbox[hidden] {
  display: none;
}

.agilic-lightbox.is-open {
  opacity: 1;
}

.agilic-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

/* Zoomed: the image grows past the viewport and the viewer pans by dragging
 * or scrolling.
 *
 * `scale()` is a paint-only transform — it does not enlarge the element's
 * layout box, so the overlay would have nothing to scroll and the enlarged
 * image would simply overflow its own bounds. Widening the box with
 * width/height keeps scrolling honest, and centring via `margin: auto` keeps
 * the image centred when it is still smaller than the viewport. */
/* Zoomed: the image grows past the viewport and the viewer pans by dragging
 * or scrolling.
 *
 * `justify-content: center` must NOT be used here. Flex centring positions an
 * overflowing item by pushing its start edge to a negative offset, which a
 * scroll container cannot reach — the left (and top) of the image would be
 * permanently cropped. `flex-start` plus `margin: auto` centres the image
 * while it is smaller than the viewport, and overflows it symmetrically —
 * and reachably — once it is larger. */
.agilic-lightbox.is-zoomed {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  align-items: flex-start;
  /* Padding on a scroll container is included in the scrollable area, so it
   * keeps a little breathing room around the fully-panned image. */
  padding: 0;
}

.agilic-lightbox.is-zoomed img {
  max-width: none;
  max-height: none;
  margin: auto;
  transform: none; /* size drives the zoom instead, so scrolling works */
  cursor: grab;
}

.agilic-lightbox.is-zoomed img.is-panning {
  cursor: grabbing;
}

/* Zoom controls, bottom centre. Fixed so they stay put while a zoomed image
 * scrolls beneath them. */
.agilic-lightbox-controls {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background-color: rgba(31, 41, 55, 0.95);
  border: 1px solid var(--agilic-accent-700);
  border-radius: 8px;
  z-index: 2;
}

.agilic-lightbox-controls button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1;
  color: #e5e7eb;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.agilic-lightbox-controls button:hover:not(:disabled),
.agilic-lightbox-controls button:focus-visible {
  background-color: var(--agilic-accent-700);
  color: var(--agilic-primary-400);
  outline: none;
}

.agilic-lightbox-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}

.agilic-lightbox-zoom-level {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

/* Fixed, not absolute: while zoomed the overlay scrolls, and an absolutely
 * positioned close button would scroll away with the image. */
.agilic-lightbox-close {
  position: fixed;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 32px;
  line-height: 1;
  color: #d1d5db;
  background-color: rgba(31, 41, 55, 0.9);
  border: none;
  cursor: pointer;
  border-radius: 4px;
  z-index: 3; /* above the zoomed image */
}

.agilic-lightbox-close:hover,
.agilic-lightbox-close:focus-visible {
  color: var(--agilic-primary-400);
  outline: none;
}

/* The caption echoes the image's alt text, so a screenshot keeps its label
 * when it's pulled out of the surrounding prose. */
.agilic-lightbox-caption {
  position: fixed;
  bottom: 64px; /* clears the zoom controls */
  left: 0;
  right: 0;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  padding: 0 40px;
  pointer-events: none;
}

/* Phones: the padding above wastes most of a small screen. */
@media screen and (max-width: 768px) {
  .agilic-lightbox {
    padding: 16px;
  }

  .agilic-lightbox-close {
    top: 8px;
    right: 8px;
  }

  /* Most screenshots here are wide desktop UI. Fitting one into a portrait
   * phone shrinks it to roughly its inline size, which defeats the point of
   * opening it. Show it at a readable height instead and let the viewer pan
   * sideways. Once zoomed, the zoom rules take over. */
  .agilic-lightbox:not(.is-zoomed) {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  .agilic-lightbox:not(.is-zoomed) img {
    max-width: none;
    max-height: none;
    height: 60vh;
    width: auto;
  }
}

/* Respect a reduced-motion preference: show state changes, skip the fade. */
@media (prefers-reduced-motion: reduce) {
  .markdown-section img.agilic-zoomable,
  .agilic-lightbox {
    transition: none;
  }
}