/* Everything rendered from markdown — the "page" and "plain" window styles and
   the embeds the directives produce. Split out of clackos.css so the desktop,
   the static mirror and the Markdown Editor's preview pane can all share one
   set of content styles without the editor also inheriting the desktop chrome.
   Colours come from the active theme's variables, as everywhere else. */

/* ---------- "page" window style (rendered from markdown) ---------- */
.page { padding: 34px 38px; max-width: 640px; margin: 0 auto; }
.page h1 {
  font-family: 'Dosis', sans-serif; font-size: clamp(30px, 6vw, 40px); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.05;
  color: var(--heading); margin-bottom: 8px;
}
.page .tagline { font-size: 13px; color: var(--sage); margin-bottom: 24px; }
/* the link back to the page above, sat over the title */
.up-link { font-size: 11.5px; margin-bottom: 10px; }
.up-link a { color: var(--sage); }
.page .rule { height: 1px; background: var(--ink); margin-bottom: 24px; }
.page p { font-size: 13px; line-height: 1.85; margin-bottom: 14px; }
.page .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--leaf-deep); margin: 28px 0 14px;
}
.list {
  list-style: none; counter-reset: item;
  border: 1px solid var(--ink); border-radius: 8px; overflow: hidden;
  background: var(--paper-deep); margin-bottom: 14px;
}
.list li {
  counter-increment: item;
  padding: 14px 16px; display: flex; gap: 14px; border-bottom: 1px solid var(--paper-line);
}
.list li:last-child { border-bottom: none; }
.list li::before {
  content: counter(item, decimal-leading-zero);
  font-size: 12px; color: var(--leaf-deep); padding-top: 2px; flex: none;
}
/* a bulleted list is not numbered: the counter is for ol only */
ul.list li::before { content: "\25AA"; font-size: 14px; }
.list li p { font-size: 12.5px; line-height: 1.75; margin: 0; }
.list b, .page b { font-weight: 600; color: var(--strong-text); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.btn {
  all: unset; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 9px 20px; border-radius: 6px; border: 1px solid var(--ink);
}
.btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.btn.primary { background: var(--ink); color: var(--button-text); }
.btn.primary:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); }
.btn.ghost { background: var(--paper); color: var(--control-text); }
.btn.ghost:hover { background: var(--paper-deep); }
.page footer {
  border-top: 1px solid var(--ink); padding-top: 14px; margin-top: 2px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  font-size: 11.5px; color: var(--sage);
}

/* ---------- "plain" window style (rendered from markdown) ---------- */
/* Same column as .page — every window reads at one measure, whatever style
   the markdown asked for. */
.plain { padding: 34px 38px 48px; max-width: 640px; margin: 0 auto; font-size: 12.5px; line-height: 1.9; }
.plain h1 {
  font-family: 'Dosis', sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 22px; color: var(--heading); margin-bottom: 12px;
}
.plain p { margin-bottom: 14px; }
.plain p:last-child { margin-bottom: 0; }
.k { color: var(--leaf-deep); }
.plain b { font-weight: 600; color: var(--strong-text); }
.build-stamp { font-size: 11px; opacity: 0.6; }

.plain .tagline { font-size: 11.5px; color: var(--sage); margin-bottom: 12px; }
.plain .rule { height: 1px; background: var(--paper-line); margin-bottom: 16px; }
.plain .eyebrow {
  clear: both; padding-top: 24px; margin: 0 0 14px;
  border-bottom: 1px solid var(--paper-line);
  font-family: 'Dosis', sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0.1em; line-height: 1.6; text-transform: uppercase; color: var(--heading);
}

/* images, code and quotes produced from markdown */
/* Pictures sit in the middle of the column rather than flowing with the text —
   most of them are wider than the words around them anyway. */
.page img, .plain img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--ink); border-radius: 6px;
  margin: 14px auto; vertical-align: top;
}
/* an image wrapped in a link: the anchor is what needs centring */
.page a:has(> img), .plain a:has(> img) { display: block; text-align: center; }
/* (the wrapper a picture bigger than the column gets is `.image-zoom`, styled
   with the link rules below — it has to come after them to keep its cursor) */
pre.code {
  background: var(--ink); color: var(--menu-text);
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.7;
  padding: 14px 16px; border-radius: 8px; overflow-x: auto;
  margin-bottom: 14px; user-select: text;
}
.page blockquote, .plain blockquote {
  border-left: 3px solid var(--leaf-deep); padding: 2px 0 2px 14px;
  color: var(--sage); font-style: italic; margin-bottom: 14px;
}

/* responsive video and sanitized raw-HTML blocks from markdown */
.youtube-embed, .video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 18px 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px;
  background: var(--ink);
}
.youtube-embed iframe {
  display: block; width: 100%; height: 100%; border: 0;
  filter: var(--media-filter);
}
.video-embed video { display: block; width: 100%; height: 100%; object-fit: contain; }
.kicanvas-embed {
  width: 100%; margin: 18px 0; overflow: hidden;
  border: 1px solid var(--ink); border-radius: 8px; background: var(--paper-deep);
}
.kicanvas-embed > kicanvas-embed {
  display: block; width: 100%; height: clamp(360px, 65vh, 720px);
  background: var(--paper);
}
.kicanvas-embed figcaption {
  padding: 7px 10px; border-top: 1px solid var(--paper-line);
  color: var(--sage); font-size: 10.5px; line-height: 1.5;
}
/* inline 3D models from @[model]. Borderless and transparent by default so the
   model reads as part of the prose; {border} turns it into a panel like the
   embeds above, and {left}/{right} float it beside the text. */
.model-embed { width: 100%; margin: 8px 0 16px; }
.model-embed-stage { position: relative; width: 100%; }
.model-embed-stage canvas { display: block; width: 100%; height: 100%; }
.model-embed-bordered {
  overflow: hidden; border: 1px solid var(--ink); border-radius: 8px;
  background: var(--paper-deep);
}
.model-embed-bordered .model-embed-stage { border-radius: 8px 8px 0 0; }
.model-embed-left { float: left; margin: 4px 20px 12px 0; }
.model-embed-right { float: right; margin: 4px 0 12px 20px; }
.model-embed figcaption {
  padding: 7px 10px; color: var(--sage); font-size: 10.5px; line-height: 1.5; text-align: center;
}
.model-embed-bordered figcaption { border-top: 1px solid var(--paper-line); text-align: left; }
.model-embed-status {
  position: absolute; inset: auto 0 10px; margin: 0;
  color: var(--sage); font-size: 10.5px; text-align: center;
}
.model-embed-status.error { color: var(--danger); }
.model-embed-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 12px; color: var(--leaf-deep); font-size: 11px; text-align: center;
}
/* Once the embed script has claimed the placeholder the link is redundant —
   unless loading actually failed, when it is the way to get the file. */
.model-embed-stage[data-model-state]:not([data-model-state="error"]) .model-embed-fallback { display: none; }
@media (max-width: 620px) {
  .model-embed-left, .model-embed-right { float: none; width: 100%; margin: 8px 0 16px; }
}
/* A floated model must not run past the section it was written in. Nothing else
   in the prose floats, so this is inert everywhere else. */
.page h1, .plain h1, .page .eyebrow, .plain .eyebrow, .page .rule, .plain .rule { clear: both; }

.html-block { margin-bottom: 14px; }
.html-block img { max-width: 100%; height: auto; }
.page [id], .plain [id] { scroll-margin-top: 12px; }

/* EuroClack / BYOM editorial layouts */
.byom-hero { margin: 20px 0 26px; }
.byom-hero img { display: block; width: 100%; margin: 0; }
.byom-hero figcaption,
.byom-module-portrait figcaption {
  padding: 7px 10px; color: var(--sage); background: var(--paper-deep);
  border: 1px solid var(--paper-line); border-top: 0; border-radius: 0 0 6px 6px;
  font-size: 10.5px; line-height: 1.5;
}
.byom-hero img,
.byom-module-portrait img { border-radius: 6px 6px 0 0; }
.byom-module-portrait {
  float: right; width: min(29%, 230px); margin: 0 0 20px 28px;
}
.byom-module-portrait img { display: block; width: 100%; margin: 0; }
.byom-system-map {
  position: relative; width: min(100%, 780px); aspect-ratio: 1025 / 1344;
  margin: 20px auto 30px; overflow: hidden; border: 1px solid var(--ink);
  border-radius: 8px; background: var(--ink);
}
.byom-system-map > div { position: absolute; }
.byom-system-map img {
  display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover;
}
.byom-system-map a { display: block; width: 100%; height: 100%; }
.byom-system-map a:hover { position: relative; z-index: 2; filter: brightness(1.12) saturate(1.08); }
.byom-system-map a:focus-visible { position: relative; z-index: 3; outline: 3px solid var(--leaf); outline-offset: -3px; }
.byom-system-map .map-row1 { top: 0; left: 0; width: 100%; height: 2.76%; }
.byom-system-map .map-row2 { top: 2.76%; left: 0; width: 4%; height: 97.24%; }
.byom-system-map .map-row3 { top: 2.76%; height: 44.57%; }
.byom-system-map .map-row4 { top: 47.32%; left: 4%; width: 92.29%; height: 4.91%; }
.byom-system-map .map-row5 { top: 52.23%; height: 44.64%; }
.byom-system-map .map-row6 { top: 96.88%; left: 4%; width: 92.29%; height: 3.05%; }
.byom-system-map .map-col1 { left: 4%; width: 13.66%; }
.byom-system-map .map-col2 { left: 17.66%; width: 13.95%; }
.byom-system-map .map-col3 { left: 31.61%; width: 13.85%; }
.byom-system-map .map-col4 { left: 45.46%; width: 13.85%; }
.byom-system-map .map-col5 { left: 59.32%; width: 13.85%; }
.byom-system-map .map-col6 { left: 73.17%; width: 8.88%; }
.byom-system-map .map-col7 { left: 82.05%; width: 14.24%; }
.byom-system-map .map-col8 { left: 96.29%; width: 3.61%; }
.byom-system-map .map-col9 { left: 45.17%; width: 14.15%; }
.byom-system-map .map-col10 { left: 73.17%; width: 13.37%; }
.byom-system-map .map-col11 { left: 86.54%; width: 9.76%; }
@media (max-width: 620px) {
  .plain { padding: 20px 18px 40px; }
  .byom-module-portrait { float: none; width: min(72%, 250px); margin: 0 auto 18px; }
}

/* links produced from markdown */
.page a:not(.btn), .plain a {
  color: var(--leaf-deep); text-decoration: underline; cursor: pointer;
}
.page a:not(.btn):hover, .plain a:hover { color: var(--leaf); }
.page a.app-link, .plain a.app-link, .btn.app-link {
  display: inline-flex; align-items: center; gap: 7px;
}
.app-link .pixel-icon { width: 16px; height: 16px; flex: none; }

/* A picture with more detail in the file than the column can show gets a link
   to the file itself, added by assets/js/image-zoom.js once it has compared the
   two — an image that already fits never gets one, so none of this applies to
   it. The anchor shrinks to the picture so the badge sits on its corner rather
   than the corner of the text column. */
.page a.image-zoom, .plain a.image-zoom {
  position: relative; width: fit-content; max-width: 100%;
  margin: 0 auto; cursor: zoom-in;
}
.page a.image-zoom > img, .plain a.image-zoom > img { margin-left: 0; margin-right: 0; }
.image-zoom::before, .image-zoom::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  pointer-events: none; opacity: 0.6; transition: opacity 0.15s ease;
}
.image-zoom::before { width: 26px; height: 26px; border-radius: 5px; background: var(--ink); }
/* the same "opens in a new window" arrow the rest of the OS uses */
.image-zoom::after {
  width: 16px; height: 16px; margin: 5px; background-color: var(--menu-text);
  -webkit-mask: url('../icons/pixelarticons/open.svg') center / contain no-repeat;
  mask: url('../icons/pixelarticons/open.svg') center / contain no-repeat;
}
.image-zoom:hover::before, .image-zoom:hover::after,
.image-zoom:focus-visible::before, .image-zoom:focus-visible::after { opacity: 1; }
.image-zoom:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }