/* ============================================================
   holdfast page patterns
   layer 3 of the design system, v1.4.0
   requires tokens.css, base.css and components.css first

   patterns used by page templates. the locked homepage contains
   no forms or article layouts, so these are new ground, designed
   strictly from existing tokens rather than invented values
   ============================================================ */

/* ------------------------------------------------------------
   compact page hero for inner pages.
   the title here is pure white, not cream. cream is only
   comfortable at the 60px homepage hero scale, smaller titles
   on navy follow the white floor
   ------------------------------------------------------------ */
.page-hero {
  background: var(--bg-navy);
  color: var(--text-white);
  padding: 64px 0 72px;
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--stripe-height);
  background: var(--stripe);
}
.page-hero h1 {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-section-title);
  color: var(--text-white);
  max-width: 760px;
  margin-bottom: 16px;
}
.page-hero p {
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--text-white);
  max-width: 560px;
}
.post-meta {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-size: var(--fs-body-xs);
  color: var(--text-white);
  opacity: 0.85;
}

/* ------------------------------------------------------------
   tool page hero additions
   ------------------------------------------------------------ */
.hero-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
.hero-price {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-price);
  color: var(--text-cream);
  font-variant-numeric: tabular-nums;
}
.hero-price-note {
  font-size: var(--fs-body-sm);
  color: var(--text-white);
  opacity: 0.85;
}

/* ------------------------------------------------------------
   converter and account panels
   ------------------------------------------------------------ */
.converter-panel {
  max-width: 720px;
  background: var(--bg-white);
  border: var(--border-hairline) solid var(--border-kelp);
  border-radius: var(--radius-card-lg);
  padding: 40px 36px;
}
.converter-panel + .converter-panel { margin-top: 24px; }
.panel-title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card-title);
  color: var(--text-navy);
  margin-bottom: 24px;
}

/* form fields */
.field-label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-ink);
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-body);
  color: var(--text-ink);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  margin-bottom: 24px;
}
.field-input::placeholder { color: var(--text-muted); }

/* drop zone */
.dropzone {
  border: 2px dashed var(--border-kelp-strong);
  border-radius: var(--radius-card);
  background: var(--bg-tools-hover);
  padding: 48px 24px;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-bottom: 24px;
  transition: border-color var(--transition);
}
.dropzone:hover { border-color: var(--kelp-mid); }
.dropzone strong {
  display: block;
  font-weight: var(--fw-medium);
  color: var(--text-navy);
  margin-bottom: 6px;
}

/* disabled state for buttons in template shells */
.btn-coral[disabled],
.btn-coral.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fine-print {
  font-size: var(--fs-body-xs);
  color: var(--text-muted);
  margin-top: 16px;
}
.template-note { color: var(--coral); }

/* licence list on the account page */
.licence-list { margin-top: 4px; }
.licence-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: var(--border-hairline) solid var(--border-light);
}
.licence-row:last-child { border-bottom: none; }
.licence-tool {
  font-weight: var(--fw-medium);
  color: var(--text-ink);
}
.key-code {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.licence-quota {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.chip {
  display: inline-block;
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-medium);
  color: var(--kelp-mid);
  background: var(--bg-how);
  padding: 4px 10px;
  border-radius: 999px;  /* pill */
}

/* ------------------------------------------------------------
   faq accordion, native details and summary, no scripts
   ------------------------------------------------------------ */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: var(--border-hairline) solid var(--border-light); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--coral);
  font-size: 20px;
  line-height: 1;
  flex: none;
  transition: transform var(--transition-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 0 22px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 640px;
}

/* ------------------------------------------------------------
   guide cards, the tool card recipe minus icon and price
   ------------------------------------------------------------ */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.guide-card {
  background: var(--bg-white);
  border: var(--border-hairline) solid var(--border-light);
  border-radius: var(--radius-card-lg);
  padding: var(--card-pad);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}
.guide-card:hover,
.guide-card:focus-visible {
  border-color: var(--border-kelp-strong);
  background: var(--bg-tools-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  outline: none;
}
.guide-card-title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card-title);
  color: var(--text-navy);
  margin-bottom: 10px;
}
.guide-card-excerpt {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 22px;
}
.guide-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
  border-top: var(--border-hairline) solid var(--border-faint);
  font-size: var(--fs-body-xs);
  color: var(--text-muted);
}
.guide-card-read {
  color: var(--coral);
  font-weight: var(--fw-medium);
  transition: transform var(--transition);
}
.guide-card:hover .guide-card-read { transform: translateX(3px); }

/* ------------------------------------------------------------
   prose, the writing kit for guide posts and the about page
   ------------------------------------------------------------ */
.prose { max-width: 680px; }
.prose p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: 20px;
}
.prose h2 {
  font-size: var(--fs-stats-title);
  line-height: var(--lh-stats-title);
  letter-spacing: var(--ls-stats-title);
  margin: 44px 0 16px;
}
.prose h3 {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card-title);
  margin: 32px 0 12px;
}
.prose a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose ul,
.prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.prose li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: 8px;
}
.prose blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-card-title);
  line-height: 1.4;
  color: var(--text-navy);
  border-left: var(--title-bar-width) solid var(--kelp-mid);
  padding-left: var(--title-row-indent);
  margin: 28px 0;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-how);
  color: var(--text-navy);
  padding: 2px 6px;
  border-radius: var(--radius-btn);
}
.prose pre {
  background: var(--bg-navy);
  color: var(--text-white);
  padding: 22px 24px;
  border-radius: var(--radius-card);
  overflow-x: auto;
  margin: 0 0 24px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
}
.prose img {
  border-radius: var(--radius-card);
  margin: 28px 0;
}
.prose figcaption {
  font-size: var(--fs-body-xs);
  color: var(--text-muted);
  margin-top: 10px;
}
.callout {
  background: var(--bg-how);
  border-left: var(--title-bar-width) solid var(--kelp-mid);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin: 28px 0;
}
.callout--sand {
  background: var(--bg-promise);
  border-left-color: var(--coral);
}
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   mobile
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .page-hero { padding: 48px 0 56px; }
  .converter-panel { padding: 28px 22px; }
  .dropzone { padding: 36px 18px; }
  .hero-meta { flex-wrap: wrap; gap: 10px 16px; }
  .guide-grid { grid-template-columns: 1fr; }
  .prose pre { padding: 16px 18px; }
}

/* ------------------------------------------------------------
   converter run states, layer 6, v1.7.0
   everything below uses locked tokens only. coral is the
   attention colour on light, matching the template-note
   precedent above
   ------------------------------------------------------------ */
.dropzone { cursor: pointer; }
.dropzone.is-dragover { border-color: var(--kelp-mid); background: var(--bg-how); }
.dropzone:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dropzone.is-busy { pointer-events: none; opacity: 0.6; }

.file-summary {
  font-size: var(--fs-body-sm);
  color: var(--text-ink);
  margin: -12px 0 20px;
}

.progress-track {
  height: 8px;
  background: var(--bg-tools-hover);
  border-radius: var(--radius-btn);
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--kelp-mid);
  border-radius: var(--radius-btn);
  transition: width var(--transition);
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

.run-status {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  min-height: 1.4em;
  margin-bottom: 16px;
}
.run-status.is-error { color: var(--coral); }

.result-panel {
  margin-top: 24px;
  padding-top: 20px;
  border-top: var(--border-hairline) solid var(--border-light);
}
.result-headline {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-navy);
  margin-bottom: 8px;
}
.result-headline--error { color: var(--coral); }
.result-note {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.result-note--error { color: var(--coral); }
.result-file {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin: 0 0 4px 16px;
}