/* ============================================================================
   Markdown engine styles — rendered Markdown typography, select pills, the
   select dropdown, and task lists. Shared by the Markdown Viewer tool
   (scoped under .mdv, which defines these tokens itself) and by the My AI
   files history pages (scoped under .mdx, defined below from the site tokens).
   ========================================================================== */

.mdx {
  --panel:      var(--c-card, #fffdf8);
  --ink:        var(--c-ink, #2a2420);
  --ink-dim:    color-mix(in srgb, var(--ink) 68%, var(--panel));
  --ink-faint:  color-mix(in srgb, var(--ink) 45%, var(--panel));
  --paper-2:    color-mix(in srgb, var(--ink) 6%, var(--panel));
  --line:       var(--c-border, #e2d8c4);
  --line-soft:  color-mix(in srgb, var(--line) 55%, var(--panel));
  --accent:     var(--c-primary, #b3492f);
  --accent-2:   color-mix(in srgb, var(--accent) 80%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--panel));
  --font-display: Georgia, "Times New Roman", serif;
  --font-sans:    inherit;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;
  position: relative;
}
.mdx *, .mdx *::before, .mdx *::after { box-sizing: border-box; }
.mdx .mdv-preview { font-family: inherit; }

/* Formatted / Raw switch on history pages */
.mdx-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.mdx-tabs { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.mdx-tab { appearance: none; border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; border-radius: 6px; cursor: pointer; }
.mdx-tab:hover { color: var(--ink); }
.mdx-tab.is-active { background: var(--accent); color: #fff; }
.mdx-status { font-size: .78rem; color: var(--ink-faint); }
.mdx-hint { margin: .5rem 0 0; font-size: .78rem; color: var(--ink-faint); }
.mdx-surface { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.mdx .mdv-preview.mdx-surface { padding: 1.25rem 1.4rem 1.6rem; max-height: 40rem; overflow: auto; }
.mdx [hidden] { display: none !important; }

/* ── Rendered markdown typography ────────────────────────────────────── */
.mdv-preview h1, .mdv-preview h2, .mdv-preview h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.25;
}
.mdv-preview h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
.mdv-preview h2 { font-size: 1.28rem; margin: 1.5rem 0 .6rem; }
.mdv-preview h3 { font-size: 1.08rem; margin: 1.25rem 0 .5rem; }
.mdv-preview p { margin: 0 0 .9rem; font-size: .95rem; }
.mdv-preview strong { color: var(--ink); font-weight: 700; }
.mdv-preview em { color: var(--ink); }
.mdv-preview a { color: var(--accent-2); text-decoration-color: var(--accent-soft); text-underline-offset: 2px; }
.mdv-preview a:hover { color: var(--accent); }
.mdv-preview ul, .mdv-preview ol {
  margin: 0 0 .9rem;
  padding-left: 1.3rem;
  font-size: .95rem;
}
.mdv-preview li { margin-bottom: .3rem; }
.mdv-preview blockquote {
  margin: 0 0 1rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-dim);
  font-style: italic;
}
.mdv-preview code {
  font-family: var(--font-mono);
  font-size: .84em;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: .1em .35em;
}
.mdv-preview pre {
  margin: 0 0 1.1rem;
  background: #2a2420;
  color: #f1e9db;
  border-radius: 8px;
  padding: .9rem 1rem;
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.55;
}
.mdv-preview pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.mdv-preview hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5rem 0;
}
.mdv-preview img { max-width: 100%; border-radius: 8px; }
.mdv-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1rem;
  font-size: .88rem;
}
.mdv-preview th, .mdv-preview td {
  border: 1px solid var(--line);
  padding: .45rem .6rem;
  text-align: left;
}
.mdv-preview th {
  background: var(--paper-2);
  font-weight: 700;
  font-family: var(--font-sans);
}
.mdv-preview .mdv-empty {
  color: var(--ink-faint);
  font-size: .88rem;
  font-style: italic;
}

/* ── Select pills (rendered from [Value]{select}) ────────────────────── */
.mdv-pill {
  --pill-bg: var(--paper-2); --pill-fg: var(--ink-dim);
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .1rem .55rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: baseline;
}
.mdv-pill:hover { border-color: var(--pill-fg); }
.mdv-pill:focus-visible, .mdv-pill[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.mdv-pill__caret {
  flex: none;
  width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
}
.mdv-pill--gray   { --pill-bg: #e9e5df; --pill-fg: #4a443d; }
.mdv-pill--blue   { --pill-bg: #d9e6f7; --pill-fg: #1f4c8f; }
.mdv-pill--teal   { --pill-bg: #d3ebe3; --pill-fg: #1d5c49; }
.mdv-pill--green  { --pill-bg: #dcecd0; --pill-fg: #2e5a1c; }
.mdv-pill--amber  { --pill-bg: #f8e6bd; --pill-fg: #7a5410; }
.mdv-pill--orange { --pill-bg: #f9dcc6; --pill-fg: #8a4513; }
.mdv-pill--red    { --pill-bg: #f6d6d0; --pill-fg: #8f2c1d; }
.mdv-pill--pink   { --pill-bg: #f6d9e6; --pill-fg: #8a2c58; }
.mdv-pill--purple { --pill-bg: #e4dcf3; --pill-fg: #4c2f86; }

/* ── Select dropdown ─────────────────────────────────────────────────── */
.mdv-pop {
  position: fixed;
  z-index: 60;
  width: min(280px, calc(100vw - 16px));
  max-height: min(380px, calc(100vh - 16px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 40px -10px rgba(42,36,32,.35), 0 2px 6px rgba(42,36,32,.08);
  overflow: hidden;
  font-family: var(--font-sans);
}
.mdv-pop__searchrow {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-faint);
}
.mdv-pop__search {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink);
}
.mdv-pop__search::placeholder { color: var(--ink-faint); }
.mdv-pop__title {
  padding: .6rem .8rem; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.mdv-pop__list { overflow-y: auto; padding: .3rem; flex: 1 1 auto; }
.mdv-pop__opt {
  appearance: none; width: 100%;
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: .95rem; text-align: left; cursor: pointer;
}
.mdv-pop__opt:hover, .mdv-pop__opt.is-active { background: var(--paper-2); }
.mdv-pop__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.mdv-pop__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdv-pop__check { flex: none; color: var(--ink-dim); }
.mdv-pop__opt--create { color: var(--ink-dim); }
.mdv-pop__new { font-weight: 600; color: var(--ink); }
.mdv-pop__empty { padding: .8rem; color: var(--ink-faint); font-size: .85rem; }
.mdv-pop__row { display: flex; align-items: center; gap: .4rem; padding: .25rem .3rem; }
.mdv-pop__swatch {
  appearance: none; flex: none; width: 22px; height: 22px; padding: 0;
  border: 2px solid var(--panel); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
}
.mdv-pop__rename {
  flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 16px;
}
.mdv-pop__rename:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.mdv-pop__x {
  appearance: none; flex: none; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-faint); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.mdv-pop__x:hover { background: var(--accent-soft); color: var(--accent-2); }
.mdv-pop__foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-soft); padding: .3rem;
}
.mdv-pop__foot-btn {
  appearance: none; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
}
.mdv-pop__foot-btn:hover { background: var(--paper-2); }
.mdv-pop__foot-btn--muted { color: var(--ink-faint); }

/* ── Task lists, strikethrough ───────────────────────────────────────── */
.mdv-preview li.mdv-task { list-style: none; display: flex; align-items: baseline; gap: .55rem; margin-left: -1.3rem; }
.mdv-preview li.mdv-task input { flex: none; margin: 0; width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; position: relative; top: .15rem; }
.mdv-preview li.mdv-task.is-done > span { color: var(--ink-faint); text-decoration: line-through; }
.mdv-preview del { color: var(--ink-dim); }
.mdv-preview td .mdv-pill, .mdv-preview th .mdv-pill { white-space: nowrap; }