/* engawa — the whole stylesheet.
 *
 * No build step and no framework: the app used ~200 utility classes, which did
 * not justify shipping a compiler to every visitor (Tailwind's play CDN builds
 * CSS in the browser and is documented as development-only).
 *
 * Everything is driven by the variables below. Components live in
 * resources/views/components/ and own their classes, so a screen is mostly
 * <x-card>, <x-field>, <x-confirm> — and changing how a card looks is one edit
 * here rather than eleven in the templates.
 */

:root {
  /* Palette. Warm greys and one accent — engawa is a veranda, not a dashboard. */
  --ink: #292524;
  --ink-strong: #1c1917;
  --muted: #78716c;
  --faint: #a8a29e;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --surface: #ffffff;
  --ground: #fafaf9;
  --ground-sunk: #f5f5f4;

  --accent: #b45309;
  --accent-strong: #92400e;
  --accent-soft: #fffbeb;
  --accent-line: #fcd34d;

  --danger: #dc2626;
  --danger-ink: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-line: #fca5a5;
  --ok: #047857;

  /* Rhythm. One scale, used everywhere. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --radius: 0.5rem;
  --radius-lg: 0.75rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;

  --measure: 48rem;   /* documents */
  --page: 64rem;      /* app screens */
  --wide: 80rem;      /* marketing */

  --font: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ---- reset-ish ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.4; color: var(--ink-strong); }
/* 600 rather than the browser's bold: emphasis inside prose should read as a
   change of weight, not a different voice. */
strong, b { font-weight: 600; color: var(--ink-strong); }
p, ul, ol, dl { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

[x-cloak] { display: none !important; }

/* ---- layout ------------------------------------------------------------- */

.wrap        { max-width: var(--page);    margin-inline: auto; padding-inline: var(--sp-6); }
.wrap--doc   { max-width: var(--measure); }
.wrap--wide  { max-width: var(--wide); }
.wrap--narrow{ max-width: 26rem; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-8); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; align-items: baseline; }
.push { margin-left: auto; }

.grid { display: grid; gap: var(--sp-3); }
@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.section { padding-block: var(--sp-16); }
.section--sunk { background: var(--ground); border-block: 1px solid var(--line); }

/* ---- type --------------------------------------------------------------- */

.page-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.hero-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
@media (min-width: 40rem) { .hero-title { font-size: var(--text-3xl); } }

.section-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.card-title { font-size: var(--text-base); font-weight: 600; color: var(--ink-strong); }

.lede  { color: var(--muted); }
.note  { font-size: var(--text-sm); color: var(--muted); }
.hint  { font-size: var(--text-xs); color: var(--muted); }
.faint { color: var(--faint); }
.strong { font-weight: 500; color: var(--ink-strong); }
.mono { font-family: var(--mono); font-size: var(--text-xs); }
.error { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--danger-ink); }

.link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--accent); }
.link--quiet { color: var(--muted); text-decoration: none; }
.link--quiet:hover { color: var(--ink-strong); text-decoration: underline; }

.list { padding-left: var(--sp-6); }
.list > * + * { margin-top: var(--sp-1); }
.list--ordered { list-style: decimal; }
.list--bullet { list-style: disc; }

/* ---- card / panel ------------------------------------------------------- */

.card {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card--lg { padding: var(--sp-8); border-radius: var(--radius-lg); }
.card--dashed { border-style: dashed; text-align: center; color: var(--muted); }

.tile { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tile dt { font-size: var(--text-xs); color: var(--muted); }
.tile dd { margin: var(--sp-1) 0 0; font-weight: 500; }

.alert { padding: var(--sp-3) var(--sp-4); border: 1px solid; border-radius: var(--radius); font-size: var(--text-sm); }
.alert--notice { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }

.badge {
  display: inline-block;
  padding: 0.1rem var(--sp-2);
  border-radius: 0.25rem;
  background: var(--ground-sunk);
  font-size: var(--text-xs);
  color: var(--ink);
}
.badge--notice { background: var(--accent-soft); color: var(--accent-strong); }

/* ---- status ------------------------------------------------------------- */

/* The headline of the status screen: a dot, a verdict, a sentence. The dot
   carries the whole "is it up" signal, so it never appears without the words
   beside it — colour alone is not a message everyone can read. */
.status { display: flex; align-items: flex-start; gap: var(--sp-3); }
.status-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--faint);
}
.status-dot--ok { background: var(--ok); }
.status-dot--warn { background: var(--accent); }
.status-dot--danger { background: var(--danger); }
.status-label { font-size: var(--text-lg); font-weight: 600; color: var(--ink-strong); }

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-strong); }
.btn--quiet { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--quiet:hover { background: var(--surface); border-color: var(--accent); color: var(--accent-strong); }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: var(--danger-ink); }
.btn--link { padding: 0; background: none; border: 0; color: var(--muted); text-decoration: underline; }
.btn--link:hover { background: none; color: var(--ink-strong); }
.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* ---- forms -------------------------------------------------------------- */

.field + .field { margin-top: var(--sp-4); }
.field > label { display: block; font-size: var(--text-sm); font-weight: 500; }
.input, .select {
  display: block;
  width: 100%;
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
}
.input:focus, .select:focus { outline: none; border-color: var(--accent); }
.input::placeholder { color: var(--faint); }
.input + .input { margin-top: var(--sp-2); }

.check { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--muted); }
.check input { accent-color: var(--accent); }

/* ---- table -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}
.table td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--ground-sunk); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .empty { padding-block: var(--sp-6); text-align: center; color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---- chrome ------------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--line); }
.masthead nav { display: flex; align-items: center; gap: var(--sp-6); padding-block: var(--sp-4); font-size: var(--text-sm); }
.brand { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--accent-strong); text-decoration: none; }

.footer { margin-top: var(--sp-16); border-top: 1px solid var(--line); background: var(--ground); }
.footer .wrap { padding-block: var(--sp-8); font-size: var(--text-sm); color: var(--muted); }

.app-footer { margin-top: var(--sp-16); padding-bottom: var(--sp-8); }
.app-footer .row { padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--faint); gap: var(--sp-4); }

/* ---- marketing odds and ends -------------------------------------------- */

.eyebrow { font-size: var(--text-sm); font-weight: 500; color: var(--accent-strong); }
.price { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-strong); }
.price--lg { font-size: var(--text-3xl); }

.ascii { min-width: 36rem; margin: 0; font-family: var(--mono); font-size: var(--text-xs); line-height: 1.6; text-align: center; color: var(--muted); }
.ascii-frame { overflow-x: auto; padding: var(--sp-8); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.assurance { padding-left: var(--sp-4); border-left: 2px solid var(--accent-line); }
.assurance dt { font-weight: 500; color: var(--ink-strong); }
.assurance dd { margin: var(--sp-1) 0 0; font-size: var(--text-sm); color: var(--muted); }

.faq { border-block: 1px solid var(--line); }
.faq details { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 500; color: var(--ink-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "›"; display: inline-block; width: 1.25rem; color: var(--accent); }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq p { margin-top: var(--sp-2); padding-left: 1.25rem; font-size: var(--text-sm); color: var(--muted); }

.steps { display: grid; gap: var(--sp-8); counter-reset: step; list-style: none; padding: 0; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps > li::before { counter-increment: step; content: counter(step); display: block; font-size: var(--text-sm); font-weight: 500; color: var(--accent-strong); }

.checklist { list-style: none; padding: 0; }
.checklist > li { display: flex; gap: var(--sp-2); }
.checklist > li::before { content: "✓"; color: var(--accent); }

/* ---- documents (legal / guides) ----------------------------------------- */

.doc { padding-block: var(--sp-12); }
.doc h2 { margin-top: var(--sp-8); font-size: var(--text-base); font-weight: 600; }
.doc section > *:first-child { margin-top: 0; }
.doc > * + * { margin-top: var(--sp-6); }
.doc .list { margin-top: var(--sp-2); }
.doc code { padding: 0.1em 0.3em; background: var(--ground-sunk); border-radius: 0.25rem; font-family: var(--mono); font-size: 0.85em; }

.deflist { border-block: 1px solid var(--line); }
.deflist > div { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-size: var(--text-sm); font-weight: 500; color: var(--ink-strong); }
.deflist dd { margin: 0; }
@media (min-width: 40rem) {
  .deflist > div { grid-template-columns: 1fr 2fr; }
}

/* ---- utility (a deliberately tiny set) ---------------------------------- */

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-top: 0; margin-bottom: var(--sp-2); }
.mb-4 { margin-top: 0; margin-bottom: var(--sp-4); }
.hidden { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }

/* Onboarding checklist ---------------------------------------------------- */
.todo { list-style: none; padding: 0; }
.todo > li { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.todo > li:last-child { border-bottom: 0; }
.todo .mark { flex: none; width: 1.25rem; color: var(--faint); }
.todo .step-label { font-weight: 500; color: var(--ink-strong); }
.todo > li.done .mark { color: var(--accent); }
.todo > li.done .step-label { color: var(--muted); }