/* Try svc.nz — same chassis as the landing page (styles.css), tool-specific layout only. */

.try-shell {
  max-width: 860px;
}

.try-home {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 320ms ease;
}
.try-home:hover { color: var(--accent); }
.try-home .dot { color: var(--accent); }

.try-wordmark {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--ink);
  text-transform: uppercase;
}

main { display: flex; flex-direction: column; gap: 48px; }

.try-panel {
  padding: clamp(20px, 3vw, 32px);
  border: 2px solid var(--ink);
  background: var(--bg-elev);
  box-shadow: var(--shadow-px);
}
.try-panel .section-head { margin-bottom: 20px; }

.try-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.try-group {
  margin: 0;
  padding: 16px 16px 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 0;
}
.try-group-content {
  border-color: var(--accent-2);
  border-width: 2px;
}

.try-group legend {
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.try-note {
  margin: 4px 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.try-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.try-grid label {
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.try-grid input,
.try-grid textarea,
.try-grid select {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 12px;
  transition: border-color 200ms ease, box-shadow 100ms steps(2);
}
.try-grid select { appearance: auto; }
.try-grid input::placeholder,
.try-grid textarea::placeholder { color: var(--muted); }
.try-grid input:focus-visible,
.try-grid textarea:focus-visible,
.try-grid select:focus-visible,
.try-actions button:focus-visible {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: var(--shadow-px-sm);
}

.try-grid .wide { grid-column: 1 / -1; }

.try-grid .drop-zone {
  border-style: dashed;
}
.try-grid .drop-zone input { border: 1px dashed var(--ink-soft); background: transparent; padding: 8px; }

.try-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
}

.status-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-soft);
}

.status-line[data-state="working"] .status-dot {
  background: var(--accent-2);
  animation: status-pulse 900ms ease-in-out infinite;
}
.status-line[data-state="working"] { color: var(--accent-2); border-color: var(--accent-2); }

.status-line[data-state="done"] .status-dot { background: var(--accent-3); }
.status-line[data-state="done"] { color: var(--accent-3); border-color: var(--accent-3); }

.status-line[data-state="error"] .status-dot { background: var(--crit); }
.status-line[data-state="error"] { color: var(--crit); border-color: var(--crit); }

@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .status-line[data-state="working"] .status-dot { animation: none; }
}
.output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.output-panel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.try-panel > .output-panel:first-of-type,
.output-grid .output-panel { margin-top: 0; }

.output-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.theme-operator .output-label { color: var(--accent); }

.output-panel pre {
  margin: 0;
  overflow: auto;
  max-height: 260px;
  background: var(--term-bg);
  color: var(--term-text);
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 14px 16px;
}
.output-panel pre:empty { display: none; }

.handoff {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#capQr {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-px-sm);
  width: 164px;
  height: 164px;
}

@media (max-width: 640px) {
  .try-grid,
  .output-grid,
  .handoff {
    grid-template-columns: 1fr;
  }
}

/* Recipes: the two worked-example cards (single-flight refresh, handoff
   code) need a runnable snippet, unlike the plain one-line entries. Kept
   self-contained (no CSS custom properties) because /recipes/ does not link
   styles.css, only this file plus styles-reset.css. Wraps instead of
   scrolling: the owner has objected to horizontal-scrolling terminals. */
.recipe-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.recipe-steps li { margin: 2px 0; }
.recipe-code {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: #f2f3f5;
  color: #14161a;
  border: 1px solid #c7cad0;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.recipe-out {
  margin: 6px 0 0;
  padding: 10px 16px;
  background: #eef6ee;
  color: #10381a;
  border: 1px solid #bfe0c4;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}