/*
 * Brand + extension surface colors. HSL layout tokens (--border, --background, …) come from globals.css.
 * Do not define --color-primary / --color-accent / --color-secondary here: those names are used by Tailwind @theme
 * in globals.css (nav, buttons, etc.); duplicating them on html.dark overrides semantic colors (e.g. bright amber as bg-accent).
 */
:root {
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --pf-tools-field-border: #d1d5db;
  --pf-tools-field-bg: #ffffff;
  --pf-tools-field-fg: #111827;
  --pf-tools-focus-outline: #737373;
  --pf-tools-btn-primary-bg: #171717;
  --pf-tools-btn-primary-fg: #ffffff;
  --pf-tools-btn-primary-hover-bg: #262626;
  --pf-tools-btn-secondary-bg: #ffffff;
  --pf-tools-btn-secondary-fg: #111827;
  --pf-tools-btn-secondary-border: #d1d5db;
  --pf-tools-btn-secondary-hover-bg: #f9fafb;
  --pf-tools-dl-bg: #ffffff;
  --pf-tools-dt-fg: #4b5563;
  --pf-tools-dd-fg: #111827;
  --pf-tools-nav-fg: #374151;
  --pf-tools-nav-hover-bg: #f3f4f6;
  --pf-tools-nav-active-bg: #171717;
  --pf-tools-nav-active-fg: #ffffff;
  --pf-tools-border: hsl(var(--border, 214 32% 91%));
  --pf-tools-surface: var(--color-surface);
  --pf-tools-panel-bg: var(--color-background);
}

html.dark {
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --pf-tools-nav-fg: #e2e8f0;
  --pf-tools-nav-hover-bg: #334155;
  --pf-tools-nav-active-bg: #f1f5f9;
  --pf-tools-nav-active-fg: #0f172a;
  --pf-tools-field-border: #475569;
  --pf-tools-field-bg: #1e293b;
  --pf-tools-field-fg: #f1f5f9;
  --pf-tools-focus-outline: #94a3b8;
  --pf-tools-btn-primary-bg: #f1f5f9;
  --pf-tools-btn-primary-fg: #0f172a;
  --pf-tools-btn-primary-hover-bg: #e2e8f0;
  --pf-tools-btn-secondary-bg: #1e293b;
  --pf-tools-btn-secondary-fg: #f1f5f9;
  --pf-tools-btn-secondary-border: #475569;
  --pf-tools-btn-secondary-hover-bg: #334155;
  --pf-tools-dl-bg: #1e293b;
  --pf-tools-dt-fg: #94a3b8;
  --pf-tools-dd-fg: #e2e8f0;
  --pf-tools-border: hsl(var(--border));
}

/* Mailoo / markdown HTML: links with target="_blank" inside prose */
.prose a[target='_blank']::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-inline-start: 0.2em;
  vertical-align: -0.05em;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill='%23000' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h2.793L8.146 6.854a.5.5 0 1 0 .708.708L14 2.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill='%23000' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h2.793L8.146 6.854a.5.5 0 1 0 .708.708L14 2.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* -------------------------------------------------------------------------- */
/* Pre-Form tools hub (extensions) — layout & form primitives                 */
/* -------------------------------------------------------------------------- */

.pf-tools {
  width: 100%;
  /* Allow shrinking inside flex layouts (mobile); default min-width:auto prevents full-width use. */
  min-width: 0;
  max-width: 100%;
}

.pf-tools-intro {
  margin-bottom: 1.5rem;
  /* Match .pf-tools-panel horizontal padding so title/copy line up with form content below. */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.pf-tools-intro h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.pf-tools-intro p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 42rem;
}

/* Intro block same width as .pf-tools-panel (default intro keeps readable measure for long copy). */
.pf-tools-intro-full p {
  max-width: none;
}

.pf-tools-layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 640px) {
  .pf-tools-layout {
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  }
}

.pf-tools-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .pf-tools-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    position: sticky;
    top: 1rem;
  }
}

.pf-tools-nav-btn {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pf-tools-nav-fg);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pf-tools-nav-btn:hover {
  background: var(--pf-tools-nav-hover-bg);
}

.pf-tools-nav-btn:focus-visible {
  outline: 2px solid #737373;
  outline-offset: 2px;
}

.pf-tools-nav-btn-active {
  background: var(--pf-tools-nav-active-bg);
  color: var(--pf-tools-nav-active-fg);
}

.pf-tools-nav-btn-active:hover {
  background: var(--pf-tools-btn-primary-hover-bg);
  color: var(--pf-tools-nav-active-fg);
}

.pf-tools-main {
  min-width: 0;
}

.pf-tools-panel {
  border: 1px solid var(--pf-tools-border);
  border-radius: 0.5rem;
  background: var(--pf-tools-panel-bg);
  padding: 1.25rem 1.25rem 1.5rem;
}

.pf-tools-panel h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.35rem;
}

.pf-tools-panel-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  max-width: 40rem;
}

.pf-tools-segment {
  display: inline-flex;
  border-radius: 0.375rem;
  border: 1px solid var(--pf-tools-border);
  overflow: hidden;
  margin-bottom: 1rem;
}

.pf-tools-segment button {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  background: var(--pf-tools-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pf-tools-segment button + button {
  border-left: 1px solid var(--pf-tools-border);
}

.pf-tools-segment button:hover {
  background: var(--pf-tools-nav-hover-bg);
}

.pf-tools-segment button.pf-tools-segment-active {
  background: var(--pf-tools-nav-active-bg);
  color: var(--pf-tools-nav-active-fg);
}

.pf-tools-segment button:focus-visible {
  outline: 2px solid #737373;
  outline-offset: -2px;
  z-index: 1;
}

.pf-tools-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pf-tools-stack-tight {
  gap: 0.75rem;
}

.pf-tools-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.pf-tools-field {
  min-width: 0;
  width: 100%;
}

.pf-tools-field-row > .pf-tools-field {
  flex: 1 1 10rem;
}

.pf-tools-field-narrow {
  flex: 0 1 8rem;
}

.pf-tools-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.pf-tools-input,
.pf-tools-select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--pf-tools-field-border);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  background: var(--pf-tools-field-bg);
  color: var(--pf-tools-field-fg);
}

.pf-tools-input:focus,
.pf-tools-select:focus {
  outline: 2px solid var(--pf-tools-focus-outline);
  outline-offset: 1px;
  border-color: var(--pf-tools-focus-outline);
}

.pf-tools-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pf-tools-btn-primary {
  border-radius: 0.375rem;
  background: var(--pf-tools-btn-primary-bg);
  color: var(--pf-tools-btn-primary-fg);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.pf-tools-btn-primary:hover {
  background: var(--pf-tools-btn-primary-hover-bg);
}

.pf-tools-btn-primary:focus-visible {
  outline: 2px solid var(--pf-tools-focus-outline);
  outline-offset: 2px;
}

.pf-tools-btn-secondary {
  border-radius: 0.375rem;
  border: 1px solid var(--pf-tools-btn-secondary-border);
  background: var(--pf-tools-btn-secondary-bg);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pf-tools-btn-secondary-fg);
  cursor: pointer;
}

.pf-tools-btn-secondary:hover {
  background: var(--pf-tools-btn-secondary-hover-bg);
}

.pf-tools-btn-secondary:focus-visible {
  outline: 2px solid var(--pf-tools-focus-outline);
  outline-offset: 2px;
}

.pf-tools-error {
  font-size: 0.875rem;
  color: #b91c1c;
  margin: 0;
}

.pf-tools-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
  max-width: 40rem;
}

.pf-tools-dl {
  border: 1px solid var(--pf-tools-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--pf-tools-dl-bg);
}

.pf-tools-dl-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pf-tools-border);
}

@media (min-width: 640px) {
  .pf-tools-dl-row {
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: baseline;
  }
}

.pf-tools-dl-row:last-child {
  border-bottom: none;
}

.pf-tools-dt {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pf-tools-dt-fg);
}

.pf-tools-dd {
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--pf-tools-dd-fg);
  word-break: break-all;
}