/* --- Dayo design tokens -------------------------------------------------- */
:root {
  /* color */
  --bg: #faf9f7;
  --ink: #1c1c1e;
  --muted: #a8a49c;
  --accent: #1c1c1e;
  --hairline: rgba(0, 0, 0, 0.07);
  --scrim: rgba(0, 0, 0, 0.28);
  --raised: #ffffff;
  /* shape */
  --radius: 12px;
  --radius-lg: 16px;
  /* elevation */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1b1a;
    --ink: #ececea;
    --muted: #6f6c66;
    --accent: #ececea;
    --hairline: rgba(255, 255, 255, 0.09);
    --scrim: rgba(0, 0, 0, 0.5);
    --raised: #262524;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

section { min-height: 100%; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: #c0392b; font-size: 14px; margin-top: 12px; }

/* --- onboarding --- */
#view-onboard {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#view-onboard[hidden] { display: none; }

.onboard-card {
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.logo {
  width: 56px;
  height: 56px;
  color: var(--ink);
  margin-bottom: 12px;
}
.onboard-card h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tagline {
  font-size: 17px;
  color: var(--muted);
}
.onboard-card p { margin: 8px 0 24px; }
.onboard-card form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

input[type="text"] {
  font: inherit;
  font-size: 17px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: center;
  outline: none;
}
input[type="text"]:focus { border-color: var(--muted); }

button[type="submit"] {
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

.me-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  padding: 11px;
  margin-bottom: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.me-signin:active { background: var(--hairline); }

.linklike {
  font: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* --- sheet --- */
#view-sheet {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
#view-sheet[hidden] { display: none; }

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 24px 8px;
  font-size: 14px;
}
.header-right { display: flex; align-items: center; gap: 4px; }

#sheet-date { font-size: 15px; font-weight: 500; color: var(--ink); }

/* 44px hit area, 26px visual circle */
.avatar {
  width: 44px;
  height: 44px;
  margin: -9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.avatar::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
}

.hint {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.sheet-wrap {
  flex: 1;
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow-y: auto;
}

#sheet {
  min-height: 100%;
  padding: 16px 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
  outline: none;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  caret-color: var(--ink);
  word-break: break-word;
}

#sheet-placeholder {
  position: absolute;
  top: 16px;
  left: 24px;
  pointer-events: none;
  font-size: 17px;
  line-height: 1.65;
}

/* --- rich elements --- */
.ed-p { margin: 0 0 2px; }
.ed-h1, .ed-h2, .ed-h3 {
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 18px 0 6px;
}
.ed-h1 { font-size: 26px; }
.ed-h2 { font-size: 21px; }
.ed-h3 { font-size: 18px; }

.ed-quote {
  margin: 8px 0;
  padding-left: 14px;
  border-left: 2px solid var(--muted);
  color: var(--muted);
}

.ed-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ed-bold { font-weight: 650; }
.ed-italic { font-style: italic; }
.ed-underline { text-decoration: underline; }
.ed-strike { text-decoration: line-through; }
.ed-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  background: var(--hairline);
  border-radius: 5px;
  padding: 1px 5px;
}

.ed-ul, .ed-ol { margin: 4px 0; padding-left: 26px; }
.ed-li { margin: 2px 0; }
.ed-li-nested { list-style: none; }

/* check list */
.ed-checklist { padding-left: 4px; }
.ed-li-unchecked, .ed-li-checked {
  list-style: none;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.ed-li-unchecked::before, .ed-li-checked::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--muted);
}
.ed-li-checked { color: var(--muted); text-decoration: line-through; }
.ed-li-checked::before {
  background: var(--ink);
  border-color: var(--ink);
}
.ed-li-checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 5px;
  height: 8px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- profile --- */
#view-profile[hidden] { display: none; }

.profile-card {
  max-width: 360px;
  margin: 8vh auto 0;
  padding: 0 24px;
  text-align: center;
}
.profile-card h2 { font-size: 22px; font-weight: 600; }
.profile-card p { margin: 10px 0 24px; font-size: 15px; }

.code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 26px;
  letter-spacing: 0.12em;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
}
.code:active { background: var(--hairline); }

#copy-feedback { min-height: 18px; margin-bottom: 16px; }

#profile-qr {
  border-radius: 20px;
  padding: 14px;
  background: #fff;
}

/* --- sheet dialog (design-system primitive) --- */
.sd-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms var(--ease);
  z-index: 100;
}
.sd-scrim.sd-open { opacity: 1; }

.sd-card {
  width: min(360px, calc(100vw - 48px));
  background: var(--raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  transform: translateY(8px) scale(0.98);
  transition: transform 150ms var(--ease);
}
.sd-scrim.sd-open .sd-card { transform: none; }

.sd-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}
.sd-form { display: flex; flex-direction: column; gap: 12px; }
.sd-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sd-input {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  outline: none;
}
.sd-input:focus { border-color: var(--muted); }
.sd-submit {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 11px;
  margin-top: 4px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

@media (max-width: 600px) {
  .sd-scrim { align-items: flex-end; }
  .sd-card {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateY(24px);
  }
}

/* --- slash menu --- */
.slash-menu {
  position: fixed;
  min-width: 220px;
  max-height: 272px;
  overflow-y: auto;
  background: var(--raised);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 90;
}
.slash-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.slash-item.active, .slash-item:hover { background: var(--hairline); }
.slash-hint {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- link mini-bar --- */
.link-minibar {
  position: fixed;
  display: flex;
  gap: 2px;
  background: var(--raised);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 3px;
  z-index: 90;
}
.link-minibar button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.link-minibar button:hover { background: var(--hairline); }