/* Viewer chrome. The document itself is styled by document.css, which is generated from
   `rk css` so the rendered page matches `rk render` output exactly. */

:root {
  --ui-bg: #f6f7f9;
  --ui-panel: #ffffff;
  --ui-ink: #1c1c1e;
  --ui-muted: #6b6b70;
  --ui-line: #e0e0e4;
  --ui-accent: #2c5aa0;
  --ui-accent-ink: #ffffff;
  --ui-warn: #8a6100;
  --ui-warn-bg: #fff6dd;
  --ui-error: #b3261e;
  --ui-error-bg: #fdeceb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ui-bg: #16161a;
    --ui-panel: #1f1f24;
    --ui-ink: #e9e9ec;
    --ui-muted: #9a9aa2;
    --ui-line: #34343b;
    --ui-accent: #7aa7e6;
    --ui-accent-ink: #10131a;
    --ui-warn: #e5c07b;
    --ui-warn-bg: #33290f;
    --ui-error: #f2938c;
    --ui-error-bg: #3a1a18;
  }
}

* { box-sizing: border-box; }

/* `hidden` must win over the `display` values set on IDs and classes below - an id
   selector with `display: flex` otherwise beats the user-agent [hidden] rule, which is why
   the drop overlay and document toolbar leaked onto the landing page. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font: 15px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.muted { color: var(--ui-muted); }
.small { font-size: 0.85em; }
.centre { text-align: center; }

/* ------------------------------------------------------------------ top bar */

#bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.75rem;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-line);
}

#bar .brand { font-size: 1rem; margin-right: 0.3rem; }
#bar .brand strong { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
#bar .spacer { flex: 1 1 auto; }
#bar .bar-actions { display: flex; align-items: center; gap: 0.15rem; }
#bar .bar-links { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
#bar a { color: var(--ui-muted); text-decoration: none; }
#bar a:hover { color: var(--ui-accent); text-decoration: underline; }

#bar .sep, #format-bar .sep {
  flex: 0 0 auto;
  width: 1px;
  height: 17px;
  margin: 0 0.2rem;
  background: var(--ui-line);
}

#doc-name {
  font-size: 0.83rem;
  color: var(--ui-muted);
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#doc-name.dirty { color: var(--ui-ink); }

.modes {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--ui-line);
  border-radius: 5px;
  overflow: hidden;
}

.modes button {
  padding: 0.2rem 0.7rem;
  border: 0;
  border-right: 1px solid var(--ui-line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.modes button:last-child { border-right: 0; }
.modes button:hover { background: rgba(128, 128, 128, 0.15); }
.modes button.active { background: var(--ui-accent); color: var(--ui-accent-ink); }

button.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button.tool:hover { background: rgba(128, 128, 128, 0.18); }
button.tool.active { background: var(--ui-accent); color: var(--ui-accent-ink); }

#format-bar {
  position: sticky;
  top: 0;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 0.25rem 0.75rem;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-line);
  overflow-x: auto;
  scrollbar-width: thin;
}

#format-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

#format-bar button:hover { background: rgba(128, 128, 128, 0.18); }
#format-bar .glyph { line-height: 1; font-size: 1.05em; }
#format-bar .glyph-bold .glyph { font-weight: 700; }
#format-bar .glyph-italic .glyph { font-style: italic; font-family: Georgia, serif; }
#format-bar .glyph-strike .glyph { text-decoration: line-through; }
#format-bar .glyph-code .glyph { font-family: ui-monospace, monospace; font-size: 0.8em; }

button {
  font: inherit;
  cursor: pointer;
}

button.ghost, .small-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ui-line);
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 0.87rem;
  text-decoration: none;
  white-space: nowrap;
}

button.ghost:hover, .small-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
button.ghost.active { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------- landing */

#intro { flex: 1 1 auto; }

.hero {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 1rem;
  text-align: center;
}

.hero h1 { font-size: 1.9rem; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
.hero h1 code, .hero code { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.hero .lede { margin: 0 auto 1.8rem; color: var(--ui-muted); max-width: 30rem; }

.start-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.start-actions button {
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.start-actions .primary {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
}

.start-actions .secondary {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  color: inherit;
}

.start-actions .secondary:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

#drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.4rem 1.5rem;
  border: 2px dashed var(--ui-line);
  border-radius: 10px;
  background: var(--ui-panel);
  color: var(--ui-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

#drop:hover, #drop:focus-visible { border-color: var(--ui-accent); color: var(--ui-accent); outline: none; }
#drop p { margin: 0; }

#install-notice,
#draft-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ui-warn);
  border-radius: 7px;
  background: var(--ui-warn-bg);
  color: var(--ui-warn);
  font-size: 0.85rem;
}

#install-notice .link,
#draft-notice .link { color: inherit; }

/* The install hint is informational, not a warning. */
#install-notice {
  border-color: var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-muted);
}

#url-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem;
}

#url-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-panel);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
}

#url-form input:focus { outline: 2px solid var(--ui-accent); outline-offset: -1px; }

#url-form button {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--ui-accent);
  border-radius: 6px;
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  font-size: 0.9rem;
}

.privacy {
  margin: 1.6rem auto 0;
  padding: 0.7rem 0.9rem;
  max-width: 30rem;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  background: var(--ui-panel);
  color: var(--ui-muted);
  font-size: 0.83rem;
}

.explain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  max-width: 58rem;
  margin: 2.5rem auto;
  padding: 0 1.25rem 2rem;
}

.explain h2 { font-size: 0.95rem; margin: 0 0 0.35rem; }
.explain p { margin: 0; color: var(--ui-muted); font-size: 0.88rem; }
.explain code { font-size: 0.85em; background: var(--ui-panel); padding: 0.1em 0.3em; border-radius: 3px; }

/* ------------------------------------------------------------------ workspace */

/* While editing, the page is a fixed-height column. This matters more than it looks: the
   panes below use `height: 100%`, which resolves against a *definite* parent height. On the
   landing page body is `min-height: 100vh` so it can grow and scroll - indefinite - and a
   percentage height there collapses to auto, leaving the source pane shrink-wrapped around
   the textarea's intrinsic two rows. */
body.editing {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* The footer is page furniture; an editor should give the space to the document. */
body.editing #foot { display: none; }



/* The editing surface. Structurally this mirrors the VS Code webview (same ids, same
   data-layout / data-width switches) but it is styled from this site's palette rather than
   VS Code's theme variables, so the two are deliberately not sharing a stylesheet. */

#workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

#live-pane, #source-pane, #preview-pane {
  min-width: 0;
  height: 100%;
  align-self: stretch;
  overflow: auto;
}

#live-pane { flex: 1 1 100%; }
#source-pane { flex: 1 1 50%; display: flex; }
#preview-pane { flex: 1 1 50%; }

#divider { flex: 0 0 1px; background: var(--ui-line); }

#workspace[data-layout="live"] #source-pane,
#workspace[data-layout="live"] #preview-pane,
#workspace[data-layout="live"] #divider { display: none; }

#workspace[data-layout="source"] #live-pane,
#workspace[data-layout="source"] #preview-pane,
#workspace[data-layout="source"] #divider { display: none; }

#workspace[data-layout="split"] #live-pane { display: none; }

#workspace[data-layout="preview"] #live-pane,
#workspace[data-layout="preview"] #source-pane,
#workspace[data-layout="preview"] #divider { display: none; }

/* Editing wants width, reading wants a measure. `full` drops the paper-card look that
   document.css gives .rkf-page; `page` puts it back. */
body[data-width="full"] #live,
body[data-width="full"] #preview {
  max-width: none;
  margin: 0;
  padding: 1.75rem clamp(1rem, 6%, 5.5rem) 6rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-width="page"] #live-pane,
body[data-width="page"] #preview-pane { background: var(--rkf-desk, var(--ui-bg)); }

body[data-width="page"] #live,
body[data-width="page"] #preview {
  max-width: 46rem;
  margin: 1.5rem auto;
  padding: 2.5rem 3rem 4rem;
}

@media (max-width: 45rem) {
  body[data-width="page"] #live,
  body[data-width="page"] #preview { margin: 0; padding: 1.25rem 1.25rem 3rem; }
}

/* The rendered document is set a little smaller than a standalone page: side by side with
   13px monospace source, 16px body text reads as a size mismatch. document.css puts its
   typographic sizes in em, so this scales headings and captions with it. */
/* Set on the container, not as a variable: document.css applies its body size to the
   `body` element, and a custom property set here could not reach upward to it. The
   headings and captions in document.css are in em, so they scale with this. */
#live, #preview { font-size: 14px; }

#live { min-height: 60vh; outline: none; }
#live:empty::before {
  content: "Start writing. Paste or drop an image to embed it in this file.";
  color: var(--ui-muted);
}
#live table { table-layout: auto; }
#live td:empty::after, #live th:empty::after { content: "\200b"; }
#live img:hover { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
#live input[type="checkbox"] { cursor: pointer; }

#preview-pane .rkf-meta { padding-top: 1rem; }

/* The source editor's metrics live in highlight.css, shared with the extension so the
   highlighted layer and the textarea cannot drift apart. Only the palette is set here. */
#source-pane {
  --rkf-src-font: ui-monospace, "SF Mono", Consolas, monospace;
  --rkf-src-size: 0.84rem;
  --rkf-src-line: 1.65;
  --rkf-src-pad: 1.25rem clamp(1rem, 4%, 3rem);
  --rkf-src-caret: var(--ui-ink);
  --rkf-src-selection: rgba(110, 165, 255, 0.3);
  background: var(--ui-bg);
}

/* ------------------------------------------------------------------- details */

#details {
  position: fixed;
  padding-top: 2.2rem;
  top: 0;
  right: 0;
  z-index: 30;
  width: min(24rem, 100vw);
  height: 100vh;
  overflow-y: auto;
  padding: 1rem 1.1rem 3rem;
  background: var(--ui-panel);
  border-left: 1px solid var(--ui-line);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

#details h2 {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-muted);
}

#details h2:first-child { margin-top: 0.3rem; }

#details .close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-size: 1.1rem;
  line-height: 1;
}

#details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  margin: 0;
  font-size: 0.84rem;
}

#details dt { color: var(--ui-muted); white-space: nowrap; }
#details dd { margin: 0; word-break: break-word; }

.asset {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--ui-line);
}

.asset img {
  width: 42px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--ui-bg);
  flex: 0 0 auto;
}

.asset-meta { flex: 1 1 auto; min-width: 0; }

.asset-name {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-detail { font-size: 0.74rem; color: var(--ui-muted); }

.problem {
  padding: 0.3rem 0;
  font-size: 0.8rem;
  border-top: 1px solid var(--ui-line);
  word-break: break-word;
}

.problem.error { color: var(--ui-error); }
.problem.warning { color: var(--ui-warn); }
.problem.info { color: var(--ui-muted); }

/* -------------------------------------------------------------- status / drop */

#status {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(40rem, calc(100vw - 2rem));
  padding: 0.6rem 1rem;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-panel);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  font-size: 0.86rem;
}

#status.warn { border-color: var(--ui-warn); background: var(--ui-warn-bg); color: var(--ui-warn); }
#status.error { border-color: var(--ui-error); background: var(--ui-error-bg); color: var(--ui-error); }
#status.error button.link { color: inherit; }

#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 26, 0.55);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 1.3rem;
  pointer-events: none;
}

#drop-overlay span {
  padding: 1.5rem 2.5rem;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}

/* -------------------------------------------------------------------- footer */

#foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-muted);
  font-size: 0.8rem;
}

#foot a { color: var(--ui-muted); }

@media (max-width: 40rem) {
  #bar { flex-wrap: wrap; }
  #bar .bar-links { display: none; }
  #bar .bar-actions { margin-left: auto; }
  .hero { padding-top: 2rem; }
  #details { width: 100vw; }
}

@media print {
  #bar, #format-bar, #foot, #status, #details, #drop-overlay, #intro { display: none !important; }
  body { background: #fff; }
  #source-pane, #live-pane, #divider, #doc-meta { display: none !important; }
  .rkf-page { box-shadow: none; border: 0; margin: 0; padding: 0; max-width: none; }
}