/* Shared look for the pages outside the three redesigned app screens.
   .auth-redesign  — one narrow card (signup, login, password reset)
   .page-redesign  — several panels under a header (settings, help, policies)
   Both stay opt-in via a body class, so ?layout=classic keeps working. */
body.auth-redesign,
body.page-redesign {
  font-family: "Yu Gothic UI", Meiryo, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  margin: 0;
}
/* The decorative shapes belong to the playful classic look; the redesign is
   calm and flat, and on a signup page they compete with the one button that
   matters. */
.auth-redesign::before, .auth-redesign::after,
.page-redesign::before, .page-redesign::after { display: none; }
.auth-redesign *, .page-redesign * { box-sizing: border-box; letter-spacing: 0; }

.auth-redesign > main { max-width: 460px; margin: 48px auto; padding: 0 20px; }
.page-redesign > main {
  max-width: 820px;
  margin: 32px auto 64px;
  padding: 0 20px;
  display: grid;
  gap: 20px;
}
.page-redesign > header {
  background: var(--card);
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  min-height: 72px;
  padding: 16px max(20px, calc((100% - 820px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-redesign > header h1 { font-size: 21px; margin: 0; }
.page-redesign > header nav { display: flex; gap: 16px; flex-wrap: wrap; }
.page-redesign > header a { color: var(--muted); font-size: 13px; border: 0; }

.auth-redesign .panel,
.page-redesign .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
  padding: 28px 26px;
  gap: 16px;
  margin: 0;
}
.auth-redesign h1, .page-redesign h1 { font-size: 24px; letter-spacing: -.01em; }
.auth-redesign h2, .page-redesign h2 { font-size: 17px; margin-top: 0; }
.auth-redesign h3, .page-redesign h3 { font-size: 15px; }

.auth-redesign button, .page-redesign button,
.auth-redesign input, .page-redesign input,
.auth-redesign select, .page-redesign select,
.auth-redesign textarea, .page-redesign textarea {
  font: inherit;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
.auth-redesign button, .page-redesign button {
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.auth-redesign button:hover, .page-redesign button:hover {
  box-shadow: none;
  transform: none;
  opacity: .92;
}
.auth-redesign button:focus-visible, .auth-redesign a:focus-visible,
.page-redesign button:focus-visible, .page-redesign a:focus-visible {
  outline: 3px solid #387fa7;
  outline-offset: 3px;
}
.auth-redesign button:not(.secondary):not(#google-auth),
.page-redesign button:not(.secondary) {
  background: #187859;
  color: #fff;
  border-color: #187859;
}
.auth-redesign button.secondary, .page-redesign button.secondary {
  background: var(--card);
  color: var(--ink);
}
/* Google's own guidance keeps this white with the G mark; size is what makes
   it read as the primary action. */
.auth-redesign #google-auth {
  min-height: 56px;
  font-size: 16px;
  box-shadow: none !important;
  border: 1px solid #dadce0 !important;
}

.auth-redesign label, .page-redesign label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.auth-redesign input:not([type="checkbox"]),
.page-redesign input:not([type="checkbox"]),
.page-redesign select,
.page-redesign textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 400;
}
.auth-redesign input:focus, .page-redesign input:focus,
.page-redesign select:focus, .page-redesign textarea:focus {
  outline: 2px solid #258769;
  outline-offset: -1px;
}
.auth-redesign .switch-row, .page-redesign .switch-row {
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
}
.page-redesign label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
}
.page-redesign input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; }

.auth-redesign .daily-note, .page-redesign .daily-note {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.auth-redesign details > summary, .page-redesign details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 10px 0;
}
.auth-redesign details[open] > summary,
.page-redesign details[open] > summary { margin-bottom: 6px; }

.auth-redesign a, .page-redesign a { color: #187859; }
.auth-redesign > main > div:last-of-type a { color: var(--muted); }
.page-redesign table { font-size: 14px; }
.page-redesign th, .page-redesign td { border-color: var(--line); }

@media (max-width: 520px) {
  .auth-redesign > main { margin: 24px auto; padding: 0 16px; }
  .auth-redesign .panel, .page-redesign .panel { padding: 22px 18px; }
  .auth-redesign h1 { font-size: 21px; }
  .page-redesign > main { margin: 20px auto 48px; padding: 0 16px; gap: 16px; }
  .page-redesign > header { padding: 14px 16px; min-height: 62px; }
  .page-redesign > header h1 { font-size: 19px; }
}