* { box-sizing: border-box; }
html, body { min-block-size: 100%; margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font); font-size: 1rem; line-height: var(--line);
  letter-spacing: var(--track); touch-action: manipulation;
}
button, input, select { font: inherit; letter-spacing: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
a { color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .2em; }
h1, h2, p { margin-block: 0; }
h1 { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; }
:focus-visible { outline: 3px solid var(--overrun); outline-offset: 4px; }
.shell {
  max-inline-size: 72rem; margin-inline: auto;
  padding-block: calc(var(--space-lg) + var(--safe-t)) max(var(--space-lg), var(--safe-b));
  padding-inline: max(var(--space-md), var(--safe-s)) max(var(--space-md), var(--safe-e));
}
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-block-end: var(--space-xl); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--text); font-size: 1.4rem; font-weight: 750; }
.brand-mark { color: var(--accent); font-size: 2.75rem; line-height: 1; }
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-lg); }
.login { max-inline-size: 28rem; margin-inline: auto; margin-block: max(6vh, var(--space-lg)); }
.login h1 { font-size: 2rem; margin-block: var(--space-md) var(--space-lg); }
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
label { display: flex; flex-direction: column; gap: var(--space-xs); font-weight: 600; }
input, select {
  min-block-size: 48px; inline-size: 100%; min-inline-size: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  color: var(--text); padding-block: var(--space-sm); padding-inline: var(--space-md);
}
input[type="checkbox"] { inline-size: 1.25rem; min-block-size: 1.25rem; accent-color: var(--accent); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-block-size: 48px; padding-block: var(--space-sm); padding-inline: var(--space-md);
  border: 1px solid transparent; border-radius: 12px; background: var(--accent);
  color: var(--on-accent); font-weight: 650; text-decoration: none;
}
.button--quiet { background: var(--surface); border-color: var(--border); color: var(--text); }
.button--subtle { background: transparent; border-color: transparent; color: var(--text-dim); }
.notice { border-inline-start: 3px solid var(--overrun); padding: var(--space-sm); background: var(--surface-2); color: var(--text); }
.muted { color: var(--text-dim); }
.loading { inline-size: 3rem; block-size: 3rem; margin-inline: auto; margin-block: 25vh; border-radius: 50%; border: .5rem solid var(--border); border-block-start-color: var(--accent); }
[hidden] { display: none !important; }
@media (max-width: 560px) { .site-header { margin-block-end: var(--space-lg); } .panel { padding: var(--space-md); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


.home-heading { justify-content: space-between; align-items: flex-end; margin-block: var(--space-sm); }
.home-heading label { min-inline-size: min(100%, 16rem); }
.routine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-md); }
.routine-card { border-block-start: 5px solid var(--accent); }
.routine-card__emoji { font-size: 3rem; line-height: 1.2; }
.editor { max-inline-size: 52rem; }
.editor-step { margin: 0; min-inline-size: 0; }
.editor-step legend { padding-inline: var(--space-xs); font-weight: 650; color: var(--text-dim); }
.editor-step__main { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(7rem, .35fr); align-items: end; gap: var(--space-sm); }
.editor-step__main > label:last-child:nth-child(2) { grid-column: 2 / -1; }
.emoji-trigger { min-inline-size: 64px; min-block-size: 64px; font-size: 2rem; padding: var(--space-xs); }
.step-tools { justify-content: flex-end; margin-block-start: var(--space-xs); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); }
.color-choice { border: 3px solid transparent; border-radius: 50%; inline-size: 48px; block-size: 48px; background: var(--swatch); color: var(--on-accent); font-size: 1.25rem; }
.color-choice[aria-pressed="false"] span { visibility: hidden; }
.color-choice[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.editor-actions { padding-block: var(--space-md); }
dialog { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); max-inline-size: min(94vw, 38rem); }
dialog::backdrop { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--space-xs); max-block-size: 50dvh; overflow-y: auto; }
.emoji-choice { font-size: 2rem; min-block-size: 56px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
@media (max-width: 560px) {
  .editor-step__main { grid-template-columns: auto minmax(0, 1fr); }
  .editor-step__main > label:nth-child(3) { grid-column: 2; }
  .editor-actions .button { flex: 1; }
}