/* ============================================================
   GENERATED FILE - DO NOT EDIT
   Built from assets/css/brutal/{tokens,base,tool}.css
   Run `npm run build` after changing a layer.
   ============================================================ */


/* ============================================================
   TOKENS
   Every value the rest of the system reads. Change a brand colour
   or a border width here and it lands everywhere at once.

   Brand: teal #2ee6c5 + lime #b8ff3c on charcoal #0d0f12.
   Type:  Bricolage Grotesque (display) + Manrope (body).

   Theme is driven by `data-theme` on <html>, set before first paint
   by assets/js/theme.mjs.

   @author Ismael Sallami Moreno
   ============================================================ */

/* Light is the default. `:root` carries it so a page renders correctly even
   before the theme script runs, or with scripting off entirely. */
:root,
[data-theme="light"] {
  --bg: #eef2ef;
  --bg-grid: rgba(13, 15, 18, 0.05);
  --surface: #ffffff;
  --surface-2: #f4f7f5;
  --ink: #0d0f12;
  --muted: #5a635f;
  --accent: #0f9e86; /* darkened teal, readable on paper */
  --accent-2: #4fb31f; /* darkened lime */
  --accent-ink: #ffffff;
  --shadow-col: #0d0f12; /* hard dark shadow keeps the brutalist contrast */
  --tag-ink: var(--ink);
  --tag-border: var(--ink);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0d0f12;
  --bg-grid: rgba(244, 247, 245, 0.035);
  --surface: #16181c;
  --surface-2: #1b1e23;
  --ink: #f4f7f5;
  --muted: #868d89;
  --accent: #2ee6c5;
  --accent-2: #b8ff3c;
  --accent-ink: #07120f;
  --shadow-col: #b8ff3c; /* neon lime offset on charcoal */
  --tag-ink: var(--accent);
  --tag-border: var(--accent);
  color-scheme: dark;
}

:root {
  /* Structure. Hard rules and offset shadows carry the whole style. */
  --line: 2px;
  --line-hair: 1px;
  --shadow: 6px;
  --shadow-lift: 10px;
  --grid-size: 32px;

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;

  /* Spacing. Used for rhythm between blocks, not inside components. */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap: 24px;
  --gap-lg: 48px;
  --gap-xl: 80px;

  /* Widths */
  --measure: 1080px;
  --measure-text: 62ch;

  /* Motion. One easing curve across the site. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.15s;
  --base: 0.2s;
  --slow: 0.5s;
}

/* ============================================================
   BASE
   Reset, page background, type scale and accessibility defaults.

   @author Ismael Sallami Moreno
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  /* Technical grid. The only background texture in the system. */
  background-image:
    linear-gradient(var(--bg-grid) var(--line-hair), transparent var(--line-hair)),
    linear-gradient(90deg, var(--bg-grid) var(--line-hair), transparent var(--line-hair));
  background-size: var(--grid-size) var(--grid-size);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Type scale ---------- */

/* Huge page heading. Half the identity of the style lives here. */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 11vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  word-break: break-word;
}

/* Outlined half of a heading. Pairs with solid ink text. */
.ttl-stroke {
  color: transparent;
  -webkit-text-stroke: var(--line) var(--ink);
}

/* Small ordinal riding above a heading, for example "04 //". */
.ttl-index {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  vertical-align: super;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

/* Section label above a heading. */
.kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.lead {
  max-width: var(--measure-text);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
}

a {
  color: inherit;
}

/* ---------- Accessibility ---------- */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link. Visible only once focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 12px 18px;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   TOOL LAYER
   Shared chrome for the standalone browser apps (md2html, pdf2md,
   diffchecker and gittomd). The first two were generated from the same
   template, so they use the same class names and can share one
   stylesheet; diffchecker and gittomd reuse that chrome and add
   their own sections at the end of this file.

   Selectors are kept exactly as the apps' JavaScript expects them:
   `light` on <body>, `dragover` on the drop zone, `active` on chips
   and file rows. Only the look changes.

   Bundled into assets/css/tool.css together with tokens and base.

   @author Ismael Sallami Moreno
   ============================================================ */

/* These apps predate the site's `data-theme` switch: their JavaScript toggles
   a `light` class on <body>, and its absence means dark. Light already comes
   from the tokens, so only the dark case needs stating here. Their JavaScript
   needs no change. */
body:not(.light) {
  --bg: #0d0f12;
  --bg-grid: rgba(244, 247, 245, 0.035);
  --surface: #16181c;
  --surface-2: #1b1e23;
  --ink: #f4f7f5;
  --muted: #868d89;
  --accent: #2ee6c5;
  --accent-2: #b8ff3c;
  --accent-ink: #07120f;
  --shadow-col: #b8ff3c;
  --tag-ink: var(--accent);
  --tag-border: var(--accent);
  color-scheme: dark;
}

:root {
  --danger: #ff5d6c;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

/* The apps hide panels with the `hidden` attribute, but several of them are
   laid out with flex or grid, which beats the attribute's `display: none`.
   Restoring it here fixes the empty state showing behind the preview. */
[hidden] {
  display: none !important;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--line) solid transparent;
  transition:
    color var(--fast) ease,
    border-color var(--fast) ease;
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* The site draws its grid on <body>; these apps expect a separate layer. */
.bg-grid {
  display: none;
}

/* ===================== HEADER ===================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: var(--line) solid var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 16px 22px;
  border-right: var(--line) solid var(--ink);
  border-bottom: none;
}
.brand:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom: none;
}

.brand-mark {
  font-family: var(--font-mono);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 4px 8px;
  font-size: 0.8rem;
}

.header-links {
  display: flex;
  align-items: stretch;
}

.header-links a {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-left: var(--line) solid var(--ink);
  border-bottom: none;
}
.header-links a:hover {
  background: var(--ink);
  color: var(--bg);
  border-bottom: none;
}

/* ===================== BUTTONS ===================== */

.ghost-btn {
  background: transparent;
  border: none;
  border-left: var(--line) solid var(--ink);
  color: var(--ink);
  padding: 0 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--base) ease,
    color var(--base) ease;
}
.ghost-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}
.ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Inside panels the button needs its own frame, not just a divider. */
.ghost-btn.small {
  border: var(--line) solid var(--ink);
  padding: 6px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.primary-btn,
.secondary-btn {
  flex: 1;
  padding: 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: var(--line) solid var(--ink);
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    background var(--base) ease;
}

.primary-btn {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.primary-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

.secondary-btn {
  background: transparent;
  color: var(--ink);
}
.secondary-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
}

.primary-btn:disabled,
.secondary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===================== HERO ===================== */

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 76px) clamp(16px, 5vw, 48px) clamp(20px, 3vw, 34px);
}

.hero-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 6px 12px;
  margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 4.6rem);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

/* The template used gradient text here. Solid accent and an outline read
   better and match the rest of the site. */
.grad {
  color: var(--accent);
}
.grad2 {
  color: transparent;
  -webkit-text-stroke: var(--line) var(--ink);
}

.hero-sub {
  max-width: var(--measure-text);
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.hero-sub code {
  color: var(--accent);
}

/* ===================== APP GRID ===================== */

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.panel {
  background: var(--surface);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-col);
}

.controls {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* ===================== DROP ZONE ===================== */

.dropzone {
  border: var(--line) dashed var(--ink);
  padding: 30px 18px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-2);
  transition:
    background var(--base) ease,
    border-color var(--base) ease;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}
/* Solid border and inverted colours: unmistakable while dragging. */
.dropzone.dragover {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.dz-icon {
  font-size: 2rem;
}
.dz-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin: 10px 0 4px;
}
.dz-or {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 10px;
}
.dropzone.dragover .dz-or,
.dropzone.dragover .dz-formats {
  color: var(--accent-ink);
}
.dz-or .link {
  color: var(--accent);
  text-decoration: underline;
}
.dz-formats {
  color: var(--muted);
  font-size: 0.76rem;
  margin: 4px 0 0;
}

.file-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.fname {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  word-break: break-all;
}

.badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* ===================== OPTION GROUPS ===================== */

.group {
  border: var(--line) solid var(--ink);
  background: var(--surface-2);
}

.group > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
}
.group > summary::-webkit-details-marker {
  display: none;
}
.group > summary:hover {
  background: var(--accent);
  color: var(--accent-ink);
}
.group[open] > summary {
  border-bottom: var(--line) solid var(--ink);
}

.group-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin: -2px 0 4px;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
}
.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.switch code {
  color: var(--accent);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input {
  background: var(--bg);
  border: var(--line) solid var(--ink);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}

/* ===================== THEME CHIPS (md2html) ===================== */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.theme-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: var(--line) solid var(--ink);
  padding: 9px 10px;
  cursor: pointer;
  background: var(--bg);
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  text-align: left;
  transition:
    background var(--fast) ease,
    color var(--fast) ease;
}
.theme-chip:hover {
  background: var(--surface-2);
}
.theme-chip.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.theme-chip span {
  color: inherit;
}

.swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: var(--line) solid var(--ink);
}

/* ===================== ACTIONS AND FEEDBACK ===================== */

.actions {
  display: flex;
  gap: 10px;
}

.toast {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
  border: var(--line) solid var(--ink);
  padding: 12px 14px;
  background: var(--surface-2);
}
.note strong {
  color: var(--ink);
}

/* ===================== FILE QUEUE (pdf2md) ===================== */

.queue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gap-sm);
  padding-top: 12px;
  border-top: var(--line) solid var(--ink);
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  text-align: left;
}

.fitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: var(--line) solid var(--ink);
  background: var(--bg);
  cursor: pointer;
  transition:
    background var(--fast) ease,
    color var(--fast) ease;
}
.fitem:hover {
  background: var(--surface-2);
}
.fitem.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.fitem.active .fi-status {
  color: var(--accent-ink);
}
.fitem.err {
  border-color: var(--danger);
}
.fitem.err .fi-status {
  color: var(--danger);
}

.fi-ico {
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.fi-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fi-name {
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fi-status {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fi-del {
  flex: 0 0 auto;
}

/* Square spinner: a round one would be the only circle on the page. */
.spin {
  width: 12px;
  height: 12px;
  border: var(--line) solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-top-color: var(--accent);
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===================== PREVIEW ===================== */

.preview {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  overflow: hidden;
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: var(--line) solid var(--ink);
  background: var(--surface-2);
}

.dots {
  display: flex;
  gap: 6px;
}
.dots i {
  width: 10px;
  height: 10px;
  background: var(--ink);
}
.dots i:nth-child(1) {
  background: var(--accent);
}
.dots i:nth-child(2) {
  background: var(--accent-2);
}

.preview-title {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.preview-bar .ghost-btn {
  margin-left: auto;
}

#preview-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
  min-height: 540px;
}

.preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  padding: 40px 24px;
  gap: 6px;
}
.pe-icon {
  font-size: 2.6rem;
}
.pe-sub {
  font-size: 0.84rem;
}

/* ===================== HOW TO ===================== */

.howto {
  max-width: 1080px;
  margin: clamp(48px, 8vw, 88px) auto 0;
  padding: 0 clamp(16px, 5vw, 48px);
}

.howto h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--gap);
  padding-bottom: var(--gap-sm);
  border-bottom: var(--line) solid var(--ink);
}

.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}

.card {
  background: var(--surface);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-col);
  padding: 20px;
}
.card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
}
.card pre {
  background: var(--bg);
  border: var(--line) solid var(--ink);
  padding: 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.card pre code {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
}
.card p,
.card ul {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}
.card ul {
  padding-left: 18px;
}
.card code {
  color: var(--accent);
}

/* ===================== FOOTER ===================== */

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  padding: var(--gap-lg) 20px;
  border-top: var(--line) solid var(--ink);
  margin-top: clamp(48px, 8vw, 88px);
  background: var(--surface);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }
  .preview,
  #preview-frame {
    min-height: 460px;
  }
}

@media (max-width: 560px) {
  .brand {
    font-size: 0.78rem;
    padding: 14px 16px;
  }
  .header-links a {
    padding: 0 14px;
    font-size: 0.7rem;
  }
  .ghost-btn {
    padding: 0 16px;
  }
  .theme-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   DIFFCHECKER
   Everything below belongs to /diffchecker/ only. It reuses the
   chrome above (header, hero, buttons, drop zone, footer) and adds
   the two things that tool needs and the others do not: a pair of
   editors and the diff grid with its merge controls.

   The grid is one row template repeated, not two scrolling panes.
   That is what keeps both sides aligned line by line without a
   scroll sync, which is where these tools usually break.
   ============================================================ */

:root {
  /* Added and removed keep the site's own accents: lime for what comes
     in, the danger red for what goes out. No GitHub green anywhere. */
  --diff-add-bg: rgba(79, 179, 31, 0.16);
  --diff-add-ink: #2f7a0f;
  --diff-add-mark: rgba(79, 179, 31, 0.42);
  --diff-del-bg: rgba(255, 93, 108, 0.15);
  --diff-del-ink: #c22436;
  --diff-del-mark: rgba(255, 93, 108, 0.42);
  --diff-rule: rgba(0, 0, 0, 0.14);
  /* Solo el valor de partida: el script mide la cabecera de verdad y lo
     reescribe, porque su altura depende de la tipografia y del ancho. */
  --header-h: 62px;
}

body:not(.light) {
  --diff-add-bg: rgba(184, 255, 60, 0.14);
  --diff-add-ink: #b8ff3c;
  --diff-add-mark: rgba(184, 255, 60, 0.34);
  --diff-del-bg: rgba(255, 93, 108, 0.18);
  --diff-del-ink: #ff8d97;
  --diff-del-mark: rgba(255, 93, 108, 0.42);
  --diff-rule: rgba(244, 247, 245, 0.16);
}

/* ---------- Shell ---------- */

.diff-app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 40px);
}

/* ---------- Toolbar ---------- */

.diff-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-col);
  margin-bottom: var(--gap-sm);
}

.diff-bar .spacer {
  flex: 1 1 auto;
}

/* Forces the rest of the toolbar onto a second line: the view switch and the
   merge controls on top, the options and the housekeeping below. */
.bar-break {
  flex-basis: 100%;
  height: 0;
}

.diff-bar .switch {
  font-size: 0.78rem;
  white-space: nowrap;
}
.diff-bar .switch input {
  width: 15px;
  height: 15px;
}

/* Segmented view switch. One frame, dividers between the options. */
.segmented {
  display: flex;
  border: var(--line) solid var(--ink);
}

.seg-btn {
  background: transparent;
  border: none;
  border-left: var(--line) solid var(--ink);
  color: var(--ink);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition:
    background var(--base) ease,
    color var(--base) ease;
}
.seg-btn:first-child {
  border-left: none;
}
.seg-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}
.seg-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
.seg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Change counter ---------- */

.dstat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dstat b {
  font-family: var(--font-mono);
  font-weight: 700;
}
.dstat .is-add {
  color: var(--diff-add-ink);
}
.dstat .is-del {
  color: var(--diff-del-ink);
}
.dstat .is-same {
  color: var(--muted);
}

/* ---------- Editors ---------- */

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-col);
}

.editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: var(--line) solid var(--ink);
  background: var(--surface-2);
}

.editor-head h2 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.editor-head .fname {
  color: var(--muted);
  font-size: 0.74rem;
  margin-left: auto;
}

.editor textarea {
  flex: 1;
  min-height: 320px;
  resize: vertical;
  border: none;
  border-bottom: var(--line) solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  padding: 14px;
  tab-size: 4;
}
.editor textarea:focus {
  outline: none;
  background: var(--surface-2);
}
.editor textarea::placeholder {
  color: var(--muted);
}

/* Inside an editor the drop zone is a strip under the text, so it drops the
   dashed frame and keeps only the rule that separates it. */
.editor .dropzone {
  border: none;
  padding: 12px 14px;
}
.editor .dropzone .dz-or {
  margin: 0 0 4px;
}

/* ---------- Diff grid ---------- */

.diff-grid {
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-col);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
}

.drow {
  display: grid;
  grid-template-columns:
    3.2rem 1.1rem minmax(0, 1fr)
    7.2rem
    3.2rem 1.1rem minmax(0, 1fr);
  border-bottom: var(--line-hair) solid var(--diff-rule);
}
.drow:last-child {
  border-bottom: none;
}

/* Unified keeps both line numbers and moves the merge controls to the end,
   since there is no middle any more. */
.diff-grid.unified .drow {
  grid-template-columns: 3.2rem 3.2rem 1.1rem minmax(0, 1fr) 7.2rem;
}

.dnum {
  padding: 2px 8px 2px 0;
  text-align: right;
  color: var(--muted);
  font-size: 0.74rem;
  user-select: none;
  border-right: var(--line-hair) solid var(--diff-rule);
}

.dsign {
  text-align: center;
  user-select: none;
  font-weight: 700;
}

.dtext {
  padding: 2px 10px;
  /* Long lines wrap instead of scrolling: there is no horizontal scroll
     anywhere in this view, so the two sides can never drift apart. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dtext:empty::after {
  content: "";
}

/* Tinting goes on the cells, not the row: in a change block the left
   side is what leaves and the right side is what arrives. */
.drow.change .side-l:not(.dpad),
.drow.remove .side-l:not(.dpad) {
  background: var(--diff-del-bg);
}
.drow.change .side-r:not(.dpad),
.drow.add .side-r:not(.dpad) {
  background: var(--diff-add-bg);
}
.drow.remove .side-l.dsign,
.drow.change .side-l.dsign {
  color: var(--diff-del-ink);
}
.drow.add .side-r.dsign,
.drow.change .side-r.dsign {
  color: var(--diff-add-ink);
}

/* Padding cell: that side has no line at all here, so it must read as
   absent and never pick up the tint of the block it sits in. */
.drow .dpad {
  background: var(--surface-2);
}

mark.wdel,
mark.wadd {
  color: inherit;
  padding: 0 1px;
}
mark.wdel {
  background: var(--diff-del-mark);
}
mark.wadd {
  background: var(--diff-add-mark);
}

/* Equal for the comparison, different in the file: only happens with the
   ignore options on. Flagged so the download is never a surprise. */
.drow.soft .dtext {
  border-bottom: var(--line-hair) dotted var(--muted);
}

/* The block the keyboard navigation is standing on. */
.drow.current .dnum {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Merge controls ---------- */

.dmerge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border-left: var(--line-hair) solid var(--diff-rule);
  border-right: var(--line-hair) solid var(--diff-rule);
}

.hunk-btn {
  background: var(--surface-2);
  border: var(--line-hair) solid var(--ink);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 3px 4px;
  min-width: 1.6rem;
  cursor: pointer;
  transition:
    background var(--fast) ease,
    color var(--fast) ease;
}
/* Dos triangulos necesitan mas sitio que uno o quedan pegados. */
.hunk-btn[data-choice="both"] {
  min-width: 2.3rem;
}
.hunk-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
}
.hunk-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* The side that lost the choice stays readable but clearly out. */
.drow[data-choice="right"] .side-l,
.drow[data-choice="left"] .side-r {
  opacity: 0.34;
}

/* ---------- Folded runs ---------- */

.dfold {
  display: block;
  width: 100%;
  background: var(--surface-2);
  border: none;
  border-bottom: var(--line-hair) solid var(--diff-rule);
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  text-align: center;
  cursor: pointer;
}
.dfold:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Result ---------- */

.result-pane {
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-col);
  background: var(--surface);
}

.result-pane pre {
  margin: 0;
  padding: 16px;
  max-height: 70vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Empty state ---------- */

.diff-empty {
  border: var(--line) dashed var(--ink);
  padding: clamp(40px, 8vw, 80px) 20px;
  text-align: center;
  color: var(--muted);
}

.diff-empty strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .editor-grid {
    grid-template-columns: 1fr;
  }
  /* Wrapped onto several lines, the toolbar would eat most of a phone
     screen if it stayed stuck to the top. */
  .diff-bar {
    position: static;
  }
  .diff-grid {
    font-size: 0.78rem;
  }
  /* Side by side needs width it does not have here. The script forces the
     unified view below this breakpoint and disables the switch; these are
     its columns, tightened. */
  .diff-grid.unified .drow {
    grid-template-columns: 2.6rem 2.6rem 0.9rem minmax(0, 1fr) 6.4rem;
  }
}

@media (max-width: 560px) {
  .diff-bar {
    gap: 8px;
  }
  .seg-btn {
    padding: 7px 10px;
    font-size: 0.7rem;
  }
  .diff-grid.unified .drow {
    grid-template-columns: 2.4rem 2.4rem 0.9rem minmax(0, 1fr) 5.6rem;
  }
}

/* ===================== GITTOMD ===================== */

/* gittomd reuses the md2html layout: options on the left, result on the
   right. What it adds is the file list, the progress bar and a plain text
   preview of the generated Markdown. */

.gtm-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.gtm-select {
  background: var(--bg);
  border: var(--line) solid var(--ink);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 0;
}
.gtm-select:focus,
.gtm-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}

.gtm-private {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-color: var(--accent);
}
.gtm-private p {
  margin: 0;
}

.note.gtm-error {
  border-color: var(--danger);
  color: var(--ink);
}

.gtm-files {
  display: flex;
  flex-direction: column;
}
.gtm-files-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: var(--line) solid var(--ink);
  font-size: 0.82rem;
}
.gtm-files-head .spacer {
  flex: 1;
}

.gtm-filter {
  margin: 10px 12px 0;
  background: var(--bg);
  border: var(--line) solid var(--ink);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  border-radius: 0;
}

.gtm-file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 12px;
  max-height: 320px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.gtm-file-list li + li {
  border-top: var(--line-hair) solid var(--bg-grid);
}
.gtm-file-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.gtm-file-list input {
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.gtm-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gtm-size {
  color: var(--muted);
  flex: 0 0 auto;
}

.gtm-skipped {
  margin: 10px 12px 12px;
}

.gtm-progress {
  height: 10px;
  border: var(--line) solid var(--ink);
  background: var(--surface-2);
}
.gtm-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--fast) linear;
}

.gtm-output {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}
.gtm-stats {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.gtm-pre {
  margin: 0;
  background: var(--bg);
  border: var(--line) solid var(--ink);
  padding: 14px;
  max-height: 70vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}