/* ── styles.css ───────────────────────────────────────────────────────────────
   Complete stylesheet for Rynctl. Organised in the same order as the page
   renders: design tokens → reset → layout → header → cards → form controls →
   SSH toggle → option grids → tooltips → theme toggle → output → buttons →
   breakdown table → animations → examples → footer → responsive.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens (dark mode defaults) ─────────────────────────────────────*/
:root {
  --bg:          #09090f;
  --surface:     #111118;
  --surface2:    #18181f;
  --border:      #2a2a38;
  --border2:     #3a3a50;
  --text:        #e8e8f0;
  --muted:       #7070a0;
  --accent:      #7c6dfa;
  --accent2:     #a78bfa;
  --accent-glow: rgba(124,109,250,0.25);
  --green:       #34d399;
  --red:         #f87171;
  --amber:       #fbbf24;
  --pre-bg:      #0a0a12;
  --pre-empty:   #3a3a58;
  --mono:        'Space Mono', monospace;
  --display:     'Syne', sans-serif;
}

/* ── Light mode token overrides ─────────────────────────────────────────────*/
:root.light {
  --bg:          #f4f4f8;
  --surface:     #ffffff;
  --surface2:    #f0f0f6;
  --border:      #d8d8e8;
  --border2:     #b8b8d0;
  --text:        #0f0f1a;
  --muted:       #6060a0;
  --accent:      #5b4fe0;
  --accent2:     #7c6dfa;
  --accent-glow: rgba(91,79,224,0.2);
  --green:       #0d7a54;
  --red:         #c0392b;
  --amber:       #b07d00;
  --pre-bg:      #1a1a2e;
  --pre-empty:   #8888aa;
}

:root.light body::before {
  background-image:
    linear-gradient(rgba(91,79,224,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,79,224,0.05) 1px, transparent 1px);
}

:root.light body::after {
  background: radial-gradient(circle, rgba(91,79,224,0.08) 0%, transparent 70%);
}

:root.light input::placeholder          { color: #a0a0c0; }
:root.light select option               { background: var(--surface2); color: var(--text); }
:root.light .field-label span           { color: #9090b8; }

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

/* ── Base body ───────────────────────────────────────────────────────────────*/
body {
  font-family: var(--display);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background grid pattern */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,109,250,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,109,250,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Top-right accent glow orb */
body::after {
  content: '';
  position: fixed;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124,109,250,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Page wrapper ────────────────────────────────────────────────────────────*/
.wrap {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1rem;
}

/* ── Header ──────────────────────────────────────────────────────────────────*/
header {
  margin-bottom: 3rem;
  animation: fadeUp 0.6s ease both;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}

.logo-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
}

header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Gradient accent on the "rsync" word inside the h1 */
header h1 span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mono tagline below the headline */
header p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--mono);
}

/* SEO-crawlable descriptive paragraph — styled as supporting copy so it
   visually recedes behind the headline but is fully present in the HTML. */
.header-desc {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 0.85rem;
  max-width: 560px;
  opacity: 0.85;
}

/* ── Cards ───────────────────────────────────────────────────────────────────*/
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  animation: fadeUp 0.6s ease both;
  transition: border-color 0.2s;
}

.card:hover { border-color: var(--border2); }

/* Staggered entrance animation for each card */
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.10s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.20s; }

/* Section heading inside each card, with a trailing horizontal rule */
.card-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Form layout helpers ─────────────────────────────────────────────────────*/
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.grid-1 { display: grid; grid-template-columns: 1fr;     gap: 0.85rem; }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.field-label span {
  font-weight: 400;
  color: #4a4a6a;
}

/* ── Text inputs and selects ─────────────────────────────────────────────────*/
input[type="text"],
select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

input::placeholder { color: #3a3a58; }

/* Custom chevron arrow for the select element */
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237070a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

select option { background: var(--surface2); }

/* ── SSH toggle ──────────────────────────────────────────────────────────────*/
.ssh-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}

.toggle-pill {
  width: 36px;
  height: 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}

.toggle-pill::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

input.toggle-input { display: none; }

input.toggle-input:checked + .ssh-toggle .toggle-pill {
  background: var(--accent);
  border-color: var(--accent);
}

input.toggle-input:checked + .ssh-toggle .toggle-pill::after {
  transform: translateX(16px);
  background: #fff;
}

.ssh-label-text { font-size: 0.82rem; font-weight: 600; color: var(--muted); }

.ssh-fields         { display: none; }
.ssh-fields.visible { display: grid; }

/* ── Options grid (Flags and Extra Options cards) ────────────────────────────*/
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  align-items: stretch; /* all cells in a row share the same height */
}

/* The <label> is a flex container so the .opt-card inside it can fill
   the full cell height with flex: 1, making every card in a row equal. */
.opt-label {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.opt-label input { position: absolute; opacity: 0; width: 0; height: 0; }

.opt-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: var(--surface2);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;        /* fills the full <label> height */
  min-height: 90px;
}

.opt-label:hover .opt-card { border-color: var(--border2); }

.opt-label input:checked + .opt-card {
  border-color: var(--accent);
  background: rgba(124,109,250,0.08);
  box-shadow: 0 0 12px rgba(124,109,250,0.1);
}

.opt-flag {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent2);
  font-weight: 700;
}

.opt-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.opt-desc {
  font-size: 0.69rem;
  color: var(--muted);
  line-height: 1.45;
  flex: 1; /* pushes the desc to fill remaining card height */
}

/* ── Compact variant for Extra Options cards ─────────────────────────────────*/
/* Identical padding and gap to .opt-card so both grids look the same size. */
.opt-card--compact {
  padding: 0.75rem 0.85rem;
  gap: 0.3rem;
  min-height: 90px;
}

/* Row holding the flag name and the info icon side-by-side */
.opt-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

/* ── Tooltip (hover info for Extra Options cards) ────────────────────────────*/
.opt-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  flex-shrink: 0;
  cursor: help;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.opt-tip:hover { opacity: 1; }
.opt-tip svg   { display: block; }

.opt-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: -4px;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 100;
  pointer-events: none;
  white-space: normal;
}

/* Small downward-pointing arrow at the bottom-right of the tooltip */
.opt-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border-right: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  transform: rotate(45deg);
}

.opt-tip:hover .opt-tooltip,
.opt-tip:focus-within .opt-tooltip { display: block; }

/* ── Fixed theme toggle button ───────────────────────────────────────────────*/
/* ── Fixed top-right container — holds shortcuts/back + theme buttons ── */
.top-bar {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Individual buttons inside the top-bar — shared visual style.
   The <a> variant (.top-bar-link) uses the same look as the <button>. */
.theme-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  text-decoration: none; /* for <a> variants */
  white-space: nowrap;
}

.theme-btn:hover              { border-color: var(--accent); color: var(--accent2); }
.theme-btn .icon-dark         { display: flex; align-items: center; }
.theme-btn .icon-light        { display: none;  }
:root.light .theme-btn .icon-dark  { display: none;  }
:root.light .theme-btn .icon-light { display: flex; align-items: center; }

/* ── Generated command output block ──────────────────────────────────────────*/
.output-wrap { position: relative; }

pre#cmd {
  font-family: var(--mono);
  font-size: 0.83rem;
  background: var(--pre-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 4rem 1.25rem 1.25rem;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.7;
  min-height: 64px;
  color: var(--green);
  transition: border-color 0.2s;
}

pre#cmd.empty { color: var(--pre-empty); }
pre#cmd.error { color: var(--red); }

/* Syntax-highlight token colours */
.token-cmd   { color: var(--accent2); font-weight: 700; }
.token-flag  { color: #60cfff; }
.token-path  { color: var(--green); }
.token-extra { color: var(--amber); }

/* Copy button overlaid in the top-right corner of the output block */
.copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.copy-btn:hover  { border-color: var(--accent); color: var(--accent2); background: rgba(124,109,250,0.08); }
.copy-btn.copied { border-color: var(--green);  color: var(--green); }

/* ── Action buttons row ──────────────────────────────────────────────────────*/
.actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 0.6rem 1.25rem;
  color: #fff;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 0 20px var(--accent-glow);
  letter-spacing: 0.02em;
}

.btn-primary:hover  { opacity: 0.88; box-shadow: 0 0 30px var(--accent-glow); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover { border-color: var(--border2); color: var(--text); }

/* ── Explain Flags breakdown table ───────────────────────────────────────────*/
#breakdown { margin-top: 1rem; display: none; }

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.breakdown-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.breakdown-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

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

.bd-flag  { color: #60cfff; }
.bd-path  { color: var(--green); }
.bd-extra { color: var(--amber); }
.bd-desc  { color: var(--muted); }

/* ── Entrance animation ──────────────────────────────────────────────────────*/
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Examples section ────────────────────────────────────────────────────────*/
.examples-section  { margin-top: 3rem; }
.examples-header   { margin-bottom: 1.5rem; }

.examples-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.examples-header p {
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.example-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color 0.2s, transform 0.15s;
  cursor: default;
}

.example-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}

/* Tag pill at the top of each example card */
.example-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  width: fit-content;
}

.tag-local  { background: rgba(52,211,153,0.12);  color: var(--green);   }
.tag-remote { background: rgba(124,109,250,0.15); color: var(--accent2); }
.tag-safe   { background: rgba(251,191,36,0.12);  color: var(--amber);   }
.tag-backup { background: rgba(248,113,113,0.12); color: var(--red);     }

.example-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.example-desc {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Syntax-highlighted command block inside each example card */
.example-cmd {
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--pre-bg);
  color: #60cfff;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  white-space: normal;   /* prevents indentation from template literals rendering literally */
  word-break: break-all;
  line-height: 1.6;
  position: relative;
  border: 1px solid var(--border);
  cursor: pointer;
}

.example-cmd .ex-cmd  { color: var(--accent2); font-weight: 700; }
.example-cmd .ex-flag { color: #60cfff; }
.example-cmd .ex-path { color: var(--green); }

/* Copy icon button overlaid in the top-right of each example command block */
.example-copy {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}

.example-cmd:hover .example-copy { opacity: 1; }
.example-copy:hover  { color: var(--accent2); }
.example-copy.copied { color: var(--green); opacity: 1; }

/* ── Footer ──────────────────────────────────────────────────────────────────*/
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

.footer-brand {
  color: var(--accent2);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-sep  { color: var(--border2); font-size: 0.8rem; }
.footer-copy { color: var(--muted); opacity: 0.7; }

/* ── Responsive breakpoints ──────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .grid-2          { grid-template-columns: 1fr; }
  .options-grid    { grid-template-columns: 1fr 1fr; }
  .examples-grid   { grid-template-columns: 1fr; }
  header h1        { font-size: 1.8rem; }
}

@media (max-width: 420px) {
  .options-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES: Toast · History Card · Share Button · Shortcuts link
   All styles here match the existing card/button design language exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toast notification ──────────────────────────────────────────────────────
   Slides up from the bottom-centre of the viewport. Three colour variants. */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 999;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--success {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid var(--green);
  color: var(--green);
}
.toast--error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid var(--red);
  color: var(--red);
}
.toast--info {
  background: rgba(124, 109, 250, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent2);
  white-space: normal;
  max-width: 480px;
  line-height: 1.55;
}

/* ── Share and History buttons in the actions row ────────────────────────────
   These are plain .btn-ghost variants — same padding, radius, font as the
   existing ghost buttons. The only additions are the badge on History and
   a slightly different hover tint on Share (accent instead of border2).    */
.btn-share-inline {
  /* identical to .btn-ghost — just a semantic alias so JS can target it */
}
.btn-share-inline:hover {
  border-color: var(--accent) !important;
  color: var(--accent2) !important;
}

.btn-history-inline {
  /* identical to .btn-ghost — position:relative lets the badge be anchored */
  position: relative;
}

/* Count badge on the History button. Hidden by default; JS shows it when
   history has entries by setting display to 'inline-flex'.               */
.history-badge {
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  background: var(--accent);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ── Inline history card ─────────────────────────────────────────────────────
   Sits directly below the Generated Command card inside .wrap. It uses the
   same .card surface/border/radius as every other card on the page.
   The header row mimics .card-title but also holds action buttons on the
   right, so it's a flex row instead of the ::after rule used by .card-title. */
.history-card {
  /* Inherits all .card styles — background, border, border-radius, padding,
     margin-bottom, animation, transition. Nothing extra needed here.       */
  padding: 1.25rem 1.5rem;
}

/* Header row: "COMMAND HISTORY ────────" on the left, buttons on the right */
.history-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

/* Left side: reuses .card-title styling but as a flex child, not block */
.history-card-header .card-title {
  margin-bottom: 0;   /* override the default 1rem bottom margin */
  flex: 1;            /* grows to push action buttons to the right */
}

/* Right side: Clear All + close X */
.history-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* "Clear all" button — looks like a small ghost button matching the design */
.history-clear-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.28rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  letter-spacing: 0.03em;
}
.history-clear-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Close × button — icon-only, same muted colour scheme */
.history-close-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.28rem 0.35rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.history-close-btn:hover {
  border-color: var(--border2);
  color: var(--text);
}

/* Scrollable list container — max-height keeps it from growing too tall */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
}
.history-list::-webkit-scrollbar       { width: 4px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* Empty state — centred icon + text, matches the muted mono style */
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
  gap: 0.2rem;
}

/* Individual history entry — matches the .opt-card surface style */
.history-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.15s;
}
.history-item:hover { border-color: var(--border2); }

/* Top row: timestamp on the left, Restore + Delete on the right */
.history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  gap: 0.5rem;
}

/* Relative timestamp ("3m ago") */
.history-time {
  font-family: var(--mono);
  font-size: 0.67rem;
  color: var(--muted);
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Restore and Delete micro-buttons inside each history entry */
.history-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.history-restore:hover { border-color: var(--accent);  color: var(--accent2); }
.history-del:hover     { border-color: var(--red);     color: var(--red); }

/* Command preview — monospace green, truncated to 3 lines to save space */
.history-cmd {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--green);
  line-height: 1.55;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Keyboard shortcuts footer link ─────────────────────────────────────────*/
.shortcuts-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.shortcuts-link:hover { color: var(--accent2); }

/* Small key-cap badge used in the shortcuts footer link */
.kbd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  padding: 0 0.32rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW RSYNC WORKS — explainer section
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────────────────
   Sits below the Example Commands section, above the footer. Uses the same
   max-width/margin pattern as every other section in .wrap.               */
.explainer-section {
  margin-top: 3rem;
  scroll-margin-top: 2rem; /* so #how-rsync-works anchor lands with breathing room */
}

/* Section heading row — matches .examples-header pattern exactly */
.explainer-header {
  margin-bottom: 1.75rem;
}
.explainer-header h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.explainer-header p {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── 2-column card grid ───────────────────────────────────────────────────────
   Collapses to a single column below 640 px. Each card is self-contained
   so the grid can break at any point without awkward orphans.            */
.explainer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .explainer-grid { grid-template-columns: 1fr; }
}

/* ── Individual explainer card ───────────────────────────────────────────────
   Mirrors .card surface/border/radius but with its own internal layout
   so it doesn't inherit any margin or animation from the main .card rule. */
.explainer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.explainer-card:hover {
  border-color: var(--border2);
}

/* Icon badge — accent-coloured circle containing a small SVG */
.explainer-card-icon {
  width: 34px;
  height: 34px;
  background: rgba(124, 109, 250, 0.12);
  border: 1px solid rgba(124, 109, 250, 0.25);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent2);
  flex-shrink: 0;
}

/* Card heading */
.explainer-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

/* Card body text — slightly muted, comfortable reading line length */
.explainer-card p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

/* Inline code spans inside the explainer paragraphs */
.explainer-card code {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent2);
  background: rgba(124, 109, 250, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ── Man page callout bar ─────────────────────────────────────────────────────
   A single-line bar at the bottom of the section that links to the man page.
   Styled as a quiet bordered strip rather than a prominent button so it
   doesn't compete visually with the Generate / Copy actions above.       */
.explainer-manpage {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);
}

.manpage-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent2);
  text-decoration: none;
  font-weight: 700;
  margin-left: auto;     /* pushes the link to the right end of the bar */
  transition: color 0.15s;
  white-space: nowrap;
}
.manpage-link:hover { color: var(--accent); }

/* ── Copy-error state on example-copy buttons ────────────────────────────────
   Mirrors the existing .copied state but in the error (red) palette.    */
.example-copy.copy-error {
  color: var(--red) !important;
  border-color: var(--red) !important;
  background: rgba(248, 113, 113, 0.1) !important;
}