/* トークンは DESIGN.md の front matter と同じ値にする */
:root {
  color-scheme: light dark;
  --paper: #eef1f0;
  --ink: #1f2a44;
  --muted: #5e6678;
  --rule: #c3cccf;
  --stamp: #b3362b;

  --font-ui: system-ui, sans-serif;
  --font-entry: ui-serif, Georgia, "Noto Serif", serif;

  --line: 3rem;
  --gutter: 1rem;
  --section: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161b24;
    --ink: #dce2ea;
    --muted: #98a1b2;
    --rule: #2c3442;
    --stamp: #e0705f;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

main {
  max-width: 36rem;
  margin-inline: auto;
  padding-block: var(--section);
  padding-inline: var(--gutter);
}

h1 {
  margin-block: 0 var(--section);
  font-size: 1rem;
  font-weight: 700;
}

a {
  color: var(--muted);
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

button,
input {
  font: inherit;
  color: inherit;
}

/* todo 画面 */
.capture input {
  width: 100%;
  height: calc(var(--line) * 1.5);
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--ink);
  background: transparent;
  font-family: var(--font-entry);
  font-size: 1.5rem;
  line-height: 1.8;
}

.capture input::placeholder {
  color: var(--muted);
}

.capture input:focus-visible {
  outline: none;
  border-block-end-width: 2px;
}

.entries {
  margin-block: var(--line) var(--section);
  padding: 0;
  list-style: none;
}

.entry {
  display: flex;
  gap: var(--gutter);
  align-items: center;
  min-height: var(--line);
  border-block-end: 1px solid var(--rule);
}

.entry form {
  display: contents;
}

.entry-title {
  font-family: var(--font-entry);
  font-size: 1.25rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

a.entry-title {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

/* 分けた一歩は、完了ボタンを親のタイトルの位置にそろえて下げる */
.entries .entries {
  margin: 0;
  padding-inline-start: calc(1.25rem + var(--gutter));
}

.heading h1 {
  margin: 0;
  font-weight: 400;
}

/* タップ領域は 1 行の高さまで広げ、アイコンの位置は入力欄の先頭にそろえる */
.done {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--line);
  height: var(--line);
  margin-inline: calc((1.25rem - var(--line)) / 2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.done:hover {
  color: var(--ink);
}

.empty {
  margin-block: var(--line) var(--section);
  color: var(--muted);
}

/* アイコン。サイズと線の太さは DESIGN.md の icons と同じ値 */
.lucide {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.75;
  vertical-align: middle;
}

[dir="rtl"] [data-icon="arrow-left"] {
  transform: scaleX(-1);
}

/* 通知設定画面 */
h1 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rules {
  margin-block: 0 var(--line);
  padding: 0;
  list-style: none;
}

.rule {
  border-block-end: 1px solid var(--rule);
}

.rule summary,
.add-rule summary {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-height: var(--line);
  cursor: pointer;
  list-style: none;
}

.rule summary::-webkit-details-marker,
.add-rule summary::-webkit-details-marker {
  display: none;
}

.add-rule summary {
  color: var(--muted);
}

.add-rule summary:hover {
  color: var(--ink);
}

.rule form,
.add-rule form {
  display: grid;
  gap: var(--gutter);
  padding-block-end: var(--gutter);
}

.field {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.field input {
  padding-block: 0.25rem;
  color: var(--ink);
  border: 0;
  border-block-end: 1px solid var(--ink);
  background: transparent;
  font-size: 1rem;
}

.days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--gutter);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.875rem;
}

.days legend {
  margin-block-end: 0.25rem;
  padding: 0;
  color: var(--muted);
}

.days label {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.rule button,
.add-rule button {
  justify-self: start;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding-block: 0.5rem;
  padding-inline: var(--gutter);
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter) calc(var(--gutter) * 1.5);
  margin-block-start: var(--section);
}

.nav a {
  min-height: 2.75rem;
}

/* ログイン画面 */
.auth-form {
  display: grid;
  gap: var(--gutter);
}

.auth-form button {
  justify-self: start;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding-block: 0.5rem;
  padding-inline: var(--gutter);
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

.error {
  margin: 0;
  color: var(--stamp);
}

/* アカウント削除。押し間違えないよう、開いてから確認ボタンを押す */
.danger {
  margin-block-start: var(--section);
}

.danger summary {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.danger summary::-webkit-details-marker {
  display: none;
}

.time-zone {
  margin-block-end: var(--line);
}

.time-zone summary {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.time-zone summary::-webkit-details-marker {
  display: none;
}

.time-zone form {
  display: grid;
  gap: var(--gutter);
  padding-block: var(--gutter);
}

.time-zone select {
  padding-block: 0.25rem;
  border: 0;
  border-block-end: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.time-zone button {
  justify-self: start;
  padding-block: 0.5rem;
  padding-inline: var(--gutter);
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

.pause {
  display: grid;
  gap: var(--gutter);
  margin-block-start: var(--line);
}

.pause p {
  margin: 0;
}

.pause button {
  justify-self: start;
  padding-block: 0.5rem;
  padding-inline: var(--gutter);
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

/* 利用規約・プライバシーポリシー */
.updated,
.agreement {
  color: var(--muted);
  font-size: 0.875rem;
}

.updated {
  margin-block: calc(var(--section) * -1 + 0.5rem) var(--section);
}

.agreement {
  margin-block: var(--line) 0;
}

.agreement + .nav {
  margin-block-start: 0;
}

.legal h2 {
  margin-block: var(--line) 0.5rem;
  font-size: 1rem;
}

.legal p,
.legal ul {
  margin-block: 0 0.75rem;
}

.legal ul {
  padding-inline-start: 1.25rem;
}