/* The one stylesheet of every screen, in the manner of Apple's own pages, as
   Hotori's back ends are (decision 0002). Each part below stays short; the
   parts a later feature brings are listed in the decision. */

/* Colors: each in its light and its dark version, and the device picks. */
:root {
  color-scheme: light dark;
  --page: light-dark(#f5f5f7, #000);
  --card: light-dark(#fff, #1c1c1e);
  --text: light-dark(#1d1d1f, #f5f5f7);
  --muted: light-dark(#6e6e73, #a1a1a6);
  --faint: light-dark(#86868b, #8e8e93);
  --line: light-dark(#e5e5ea, #38383a);
  --field: light-dark(#fff, #2c2c2e);
  --field-line: light-dark(#d2d2d7, #48484a);
  --hover: light-dark(#f5f5f7, #2c2c2e);
  /* The theme color: the two ends of the app icon's gradient (decision 0002). */
  --accent: light-dark(#c43f00, #ffaa2b);
  --accent-hover: light-dark(#a83600, #ffbd5c);
  /* The deep end behind white text in both modes: the light end would not be readable. */
  --accent-fill: #c43f00;
  --accent-fill-hover: #a83600;
  --on-accent: #fff;
  --focus: light-dark(rgb(196 63 0 / 0.3), rgb(255 170 43 / 0.4));
  --tint: light-dark(#fff6dc, #3a2000);
  --good: light-dark(#e9f6ec, #12301b);
  --good-text: light-dark(#1d7a35, #6fd08c);
  --bad: light-dark(#fdeceb, #3a1614);
  --bad-text: light-dark(#c9302c, #ff6961);
  --header: light-dark(rgb(251 251 253 / 0.8), rgb(22 22 23 / 0.8));
  --shadow-color: light-dark(rgb(0 0 0 / 0.05), transparent);
  --shadow: 0 1px 2px var(--shadow-color), 0 4px 16px var(--shadow-color);
  --radius: 14px;
}

/* The frame: a frosted bar on top, the page below it. */
body {
  -webkit-font-smoothing: antialiased;
  background: var(--page);
  color: var(--text);
  font: 15px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
}

header {
  align-items: center;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: var(--header);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding: 0.6rem max(1.5rem, calc((100% - 72rem) / 2));
  position: sticky;
  top: 0;
  z-index: 10;
}

header .brand {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 600;
  gap: 0.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

main {
  margin: 0 auto;
  max-width: 72rem;
  padding: 0.5rem 1.5rem 5rem;
}

main:focus {
  outline: none;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* The link that skips past the bar, shown only when reached with the keyboard. */
.skip-link {
  background: var(--accent-fill);
  border-radius: 0 0 10px 10px;
  color: var(--on-accent);
  inset-inline-start: 1rem;
  padding: 0.5rem 1rem;
  position: absolute;
  top: -3rem;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Titles: a large one for the screen, with a quiet line under it. */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0.75rem 0 1.5rem;
}

h1:has(+ .note) {
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.note {
  color: var(--muted);
  font-size: 0.8125rem;
}

h1 + .note {
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
  max-width: 48rem;
}

/* Cards: white on the soft gray, with a shadow that only just shows. */
.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
}

.panel p {
  margin: 0 0 1rem;
}

/* The main button: a blue pill, with a fingertip's room on touch screens. */
.button {
  align-items: center;
  background: var(--accent-fill);
  border-radius: 980px;
  color: var(--on-accent);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  transition: background 0.15s;
}

.button:hover {
  background: var(--accent-fill-hover);
  text-decoration: none;
}

@media (pointer: coarse) {
  .button {
    min-height: 2.75rem;
  }
}