/* Shared "Riso House" design system (see docs/design.md) used by every app
   page and the homepage launcher. The paper/shadow/typography mechanics are
   fixed; the --heading/--dark/--body and --brand colour families are meant
   to be overridden per app (each app carries its own verified brand accent —
   see docs/design.md's "Per-app colour" section) in a small inline <style>
   loaded after this file. */
:root {
  --container-max: 1200px;

  --surface: #f3eee4;
  --surface-soft: #f8f4eb;
  --surface-card: #fbf6ec;
  --surface-card-strong: #f4ecda;
  --border: #e4e0d9;
  --disabled: #ece5d6;

  --heading: #2c3fa7;
  --dark: #2c3fa7;
  --dark-strong: #1f2d7a;
  --body: #637ec2;
  --body-subtle: #8fa2d0;

  --brand: #f237a1;
  --brand-medium: #f66bb9;
  --brand-soft: #fab5dc;
  --brand-softer: #fde3f0;

  --danger: #e04a3f;
  --danger-bg: #f8ddd9;
  --success: #4a8b3c;
  --success-bg: #e0f2da;

  --radius: 4px;
  --shadow-color: var(--heading);
  --shadow-xs: 2px 2px 0 0 var(--shadow-color);
  --shadow-sm: 3px 3px 0 0 var(--shadow-color);
  --shadow-md: 4px 4px 0 0 var(--shadow-color);
  --shadow-lg: 6px 6px 0 0 var(--shadow-color);

  --font: "Space Grotesk", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  font-family: var(--font);
  color: var(--body);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0;
}

.riso-container {
  width: min(var(--container-max), 100% - 2rem);
  margin-inline: auto;
}

.riso-halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--heading) 1px,
    transparent 1px
  );
  background-size: 8px 8px;
  opacity: 0.12;
}

header.hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--dark);
}

header.hero .riso-container {
  position: relative;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.lede {
  margin-top: 1rem;
  font-size: 1.125rem;
  max-width: 46ch;
}

.riso-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark-strong);
}

.text-link {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brand-soft);
  text-underline-offset: 2px;
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration-color: var(--brand);
}

.steps {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.step-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--dark);
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
  font-weight: 700;
  font-size: 0.9375rem;
}

.steps p {
  margin: 0;
  padding-top: 0.25rem;
}

main {
  padding: 3rem 0 5rem;
}

.riso-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  margin-bottom: 2rem;
}

label {
  display: block;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

.field-help {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--body-subtle);
}

.riso-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--dark-strong);
}

.riso-input:focus {
  outline: none;
  border: 2px solid var(--brand);
  padding: 11px 15px;
}

.riso-input[aria-invalid="true"] {
  border-color: var(--danger);
}

.riso-input:disabled {
  background: var(--disabled);
  color: var(--body-subtle);
}

.error-message {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
}

.riso-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem 1.25rem;
}

.riso-fieldset legend {
  padding: 0 0.375rem;
  font-weight: 600;
  color: var(--heading);
  font-size: 0.9375rem;
}

.riso-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--dark-strong);
  cursor: pointer;
}

.riso-radio + .riso-radio {
  margin-top: 0.5rem;
}

.riso-radio input {
  accent-color: var(--brand);
  width: 1.125rem;
  height: 1.125rem;
}

.reminder-field {
  margin-top: 1.5rem;
}

.reminder-field label {
  display: block;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

.reminder-field .riso-input {
  max-width: 14rem;
}

button {
  font-family: var(--font);
  cursor: pointer;
}

.riso-btn-brand,
.riso-btn-secondary,
.riso-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid var(--dark);
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.riso-btn-brand {
  background: var(--brand);
  color: white;
  box-shadow: var(--shadow-md);
  border-color: var(--dark);
  margin-top: 1.5rem;
}

.riso-btn-secondary {
  background: var(--surface-card);
  color: var(--heading);
  box-shadow: var(--shadow-md);
}

.riso-btn-brand:hover,
.riso-btn-secondary:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
}

.riso-btn-brand:active,
.riso-btn-secondary:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.riso-btn-brand:disabled,
.riso-btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: var(--shadow-md);
}

.result {
  display: none;
}

.result.visible {
  display: block;
}

.result-url {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.875rem;
  color: var(--dark-strong);
  word-break: break-all;
  margin-bottom: 1.5rem;
}

.subscribe-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.copy-feedback {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--success);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.copy-feedback.visible {
  opacity: 1;
}

.fallback-note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--body-subtle);
}

.preview-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.preview-section h3 {
  font-size: 1rem;
}

.preview-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.preview-list li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--dark-strong);
}

.preview-list li:last-child {
  border-bottom: none;
}

.preview-reminder-note {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--brand);
}

footer {
  border-top: 2px solid var(--dark);
  padding: 2rem 0 3rem;
}

footer p {
  font-size: 0.8125rem;
  color: var(--body-subtle);
  margin: 0;
}

/* Homepage launcher — a card per ical generator. Each card sets its own
   --card-accent (that app's brand colour) inline, so new generators only
   need to add a card, not touch this stylesheet. */
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.launcher-card {
  --card-accent: var(--brand);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-left: 6px solid var(--card-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  text-decoration: none;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.launcher-card:hover,
.launcher-card:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
}

.launcher-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.launcher-card-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--card-accent);
}

.launcher-card-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--card-accent);
}

.launcher-card-desc {
  font-size: 0.9375rem;
  color: var(--body);
  margin: 0;
}

.launcher-card-arrow {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--card-accent);
}

.launcher-card.is-placeholder {
  opacity: 0.75;
  cursor: default;
}

@media (max-width: 480px) {
  header.hero {
    padding: 2.5rem 0 2rem;
  }

  .riso-card {
    padding: 1.5rem;
  }

  .subscribe-options {
    flex-direction: column;
    align-items: stretch;
  }
}