/* ============================================================
   data2md — Converter (/app)
   Reuses tokens from landing.css. Loaded after it.
   ============================================================ */

/* Ensure [hidden] always wins over display:flex/grid set elsewhere */
[hidden]{display:none !important}

/* Clip the card's ambient halo on small viewports */
.l-main{overflow-x:clip}

/* ── Layout shell (viewport-fit empty state) ───────────────── */
.app-shell{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:1.5rem;
  padding:2rem 0 2.25rem;
  /* Fills the rest of the viewport (header is ~71px) so the empty state never scrolls */
  min-height:calc(100vh - 72px);
  min-height:calc(100dvh - 72px);
}
.app-stack-item{width:100%}
.app-stack-item[hidden]{display:none}
.app-upload{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

/* ── Card ─────────────────────────────────────────────────── */
.app-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:2rem 2rem 1.75rem;
  box-shadow:var(--shadow-lg);
  width:100%;
  max-width:640px;
  position:relative;
}
.app-card::before{
  content:'';
  position:absolute;
  inset:auto -36px -36px auto;
  width:160px;height:160px;
  background:radial-gradient(circle, var(--accent-tint), transparent 65%);
  pointer-events:none;
  border-radius:50%;
  z-index:-1;
}
.app-eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:.5rem;
}
.app-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.7rem;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.15;
  margin-bottom:1.5rem;
}
.app-title em{font-style:italic;color:var(--accent);font-weight:400}

/* ── Drop zone ────────────────────────────────────────────── */
.drop-zone{
  position:relative;
  border:2px dashed var(--line-2);
  border-radius:var(--r);
  padding:2.5rem 2rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s;
  background:#fdfaf3;
  outline:none;
  margin-bottom:1.25rem;
}
.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.drag-over{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.drop-zone.drag-over{transform:scale(1.005)}
.dz-icon{
  color:var(--muted);
  display:flex;
  justify-content:center;
  margin-bottom:.875rem;
  transition:color .2s;
}
.dz-icon--ok{color:var(--accent)}
.drop-zone:hover .dz-icon,
.drop-zone.drag-over .dz-icon{color:var(--accent)}
.dz-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.2rem;
  color:var(--ink);
  margin-bottom:.3rem;
  letter-spacing:-.01em;
}
.dz-sub{
  color:var(--muted);
  font-size:.88rem;
}
.dz-hint{
  margin-top:.65rem;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dz-size{
  display:inline-flex;
  align-items:center;
  margin-top:.4rem;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--accent);
  background:var(--accent-soft);
  padding:.2rem .55rem;
  border-radius:999px;
  letter-spacing:.04em;
}
.browse-link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  background:none;
  border:none;
  font:inherit;
  padding:0;
}
.browse-link:hover{color:var(--accent-h)}

/* ── Format row ───────────────────────────────────────────── */
.format-row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
}
.format-label{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  white-space:nowrap;
}
.format-pills{display:flex;gap:.45rem;flex-wrap:wrap}
.pill{
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--muted);
  padding:.4rem .9rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  font-family:var(--mono);
  line-height:1;
  letter-spacing:.04em;
}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill--active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.25rem;
  border-radius:999px;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .15s;
  font-family:inherit;
  white-space:nowrap;
  line-height:1;
  text-decoration:none;
}
.btn--primary{
  background:var(--ink);
  color:var(--paper);
  box-shadow:var(--shadow);
}
.btn--primary:hover:not(:disabled){
  background:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}
.btn--primary:disabled{
  opacity:.45;
  cursor:not-allowed;
  background:var(--muted);
  box-shadow:none;
}
.btn--ghost{
  background:transparent;
  border-color:var(--line-2);
  color:var(--ink);
}
.btn--ghost:hover{
  border-color:var(--ink);
  background:var(--card);
}
.btn--block{width:100%}
.btn-arrow{transition:transform .2s}
.btn--primary:hover:not(:disabled) .btn-arrow{transform:translateX(3px)}

/* ── Helper line below card ───────────────────────────────── */
.app-helper{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:center;
}
.app-helper svg{color:var(--accent)}
.app-helper-sep{
  width:3px;height:3px;border-radius:50%;background:var(--line-2);
  display:inline-block;
}

/* ── Errors ───────────────────────────────────────────────── */
.alert{
  border-radius:var(--r);
  padding:1rem 1.25rem;
  max-width:640px;
  margin:0 auto;
}
.alert-error{
  background:rgba(220,38,38,.05);
  border:1px solid rgba(220,38,38,.22);
  color:#b91c1c;
}
.alert ul{list-style:none;padding:0}
.alert li{font-size:.88rem;line-height:1.5}
.alert li+li{margin-top:.25rem}

/* ── Result ───────────────────────────────────────────────── */
.result-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  max-width:880px;
  margin:0 auto;
}
.result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--line);
  gap:1rem;
  flex-wrap:wrap;
  background:var(--card);
}
.result-meta{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  background:var(--accent-soft);
  color:var(--accent-h);
  border:1px solid rgba(234,88,12,.25);
  padding:.25rem .7rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:700;
  font-family:var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.badge--ok::before{content:'✓\00a0'}
.result-hash{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.result-hash code{color:var(--ink);font-family:var(--mono);font-size:.78rem}
.result-hash-label{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.result-actions{display:flex;gap:.55rem;flex-wrap:wrap}

/* Preview pane */
.preview-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1.5rem;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.preview-bar-label{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}
.preview-bar-info{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
  letter-spacing:.04em;
}
.preview-body{
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.75;
  padding:1.5rem;
  background:var(--code-bg);
  color:var(--code-ink);
  overflow:auto;
  max-height:480px;
  white-space:pre-wrap;
  word-break:break-word;
}
.preview-truncated{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  padding:.75rem 1.5rem;
  background:var(--accent-soft);
  border-top:1px solid var(--line);
  font-size:.8rem;
  color:var(--accent-h);
  line-height:1.5;
}
.preview-truncated svg{flex-shrink:0;margin-top:.15rem;color:var(--accent)}
.result-footer{padding:1.1rem 1.5rem;border-top:1px solid var(--line);background:var(--card)}

/* ── Loading overlay ──────────────────────────────────────── */
.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(248,245,238,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
}
.loading-overlay[hidden]{display:none}
.loading-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:2.5rem 2rem 2rem;
  text-align:center;
  width:min(440px,calc(100vw - 2.5rem));
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.loading-card::before{
  content:'';
  position:absolute;
  inset:auto -40px -40px -40px;
  height:60px;
  background:radial-gradient(ellipse, var(--accent-tint), transparent 70%);
  pointer-events:none;
}
.loading-spinner{
  width:52px;
  height:52px;
  border:3px solid var(--line);
  border-top-color:var(--accent);
  border-right-color:#f59e0b;
  border-radius:50%;
  margin:0 auto 1.5rem;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:.5rem;
  line-height:1.3;
}
.loading-title strong{
  color:var(--accent);
  font-style:italic;
  font-weight:500;
  word-break:break-all;
}
.loading-size{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--accent);
  background:var(--accent-soft);
  padding:.18rem .55rem;
  border-radius:999px;
  margin-left:.4rem;
  vertical-align:middle;
  letter-spacing:.04em;
}
.loading-size:empty{display:none}
.loading-status{
  font-family:var(--mono);
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:1.25rem;
  min-height:1.3em;
  letter-spacing:.04em;
}
.loading-bar{
  height:5px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:1.5rem;
}
.loading-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),#f59e0b);
  border-radius:999px;
  width:0%;
  transition:width .5s ease;
}
.loading-tips{
  padding:.85rem 1rem;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  min-height:3.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loading-tip{
  font-size:.78rem;
  color:var(--ink-2);
  line-height:1.55;
  transition:opacity .35s ease;
}
.loading-tip::before{content:'💡 \00a0'}

/* ── Utility ──────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:680px){
  .app-shell{padding:1.5rem 0 2rem;min-height:calc(100vh - 64px)}
  .app-card{padding:1.5rem 1.25rem}
  .app-title{font-size:1.4rem}
  .drop-zone{padding:2rem 1.25rem}
  .result-header{flex-direction:column;align-items:flex-start}
  .result-actions{width:100%}
  .result-actions .btn{flex:1;justify-content:center}
  .preview-body{max-height:360px;padding:1rem}
  .loading-card{padding:2rem 1.25rem 1.5rem}
}
@media(max-height:720px){
  .app-shell{padding:1rem 0 1.5rem;min-height:auto}
}