/* Piyo — PiyoLog care records. Flat, monochrome, glanceable on a phone. */

#piyo-root { display: contents; }

.piyo {
  max-width: var(--max-w-wide, 64rem);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--page-gutter) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── header ──────────────────────────────────────────────────────────── */
.piyo-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.piyo-title {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.piyo-subtitle { font-size: var(--text-sm); color: var(--color-ink-3); }
.piyo-status-wrap { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.piyo-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piyo-status[data-status="error"] { color: var(--color-error); border-color: var(--color-error-bd); white-space: normal; }
.piyo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-ink-3);
  transition: opacity var(--dur) var(--ease);
}
.piyo-dot[data-busy="1"] { opacity: 0.35; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.piyo-btn {
  padding: 6px 12px;
  font: 400 var(--text-sm) var(--font-sans);
  color: var(--color-ink-2);
  background: transparent;
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.piyo-btn:hover:not(:disabled) { color: var(--color-ink); border-color: var(--color-ink-4); }
.piyo-btn:disabled { opacity: 0.5; cursor: default; }
.piyo-btn-sm { padding: 2px 10px; font-size: var(--text-xs); border-radius: var(--radius-lg); }
.piyo-btn-primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }
.piyo-btn-primary:hover:not(:disabled) { color: var(--color-accent-fg); opacity: 0.9; }
.piyo-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.piyo-link:hover { color: var(--color-ink); }

/* ── now ─────────────────────────────────────────────────────────────── */
.piyo-now {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.piyo-now-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  min-width: 0;
}
.piyo-now-state { background: var(--color-bg-2); }
.piyo-now-state[data-asleep="1"] .piyo-now-label::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px;
  background: var(--color-ink);
  vertical-align: 1px;
}
.piyo-now-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.piyo-now-value {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.piyo-now-value[data-quiet="1"] { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-4); }
.piyo-now-detail {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── tiles ───────────────────────────────────────────────────────────── */
.piyo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-2);
}
.piyo-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
}
.piyo-tile-label { font-size: var(--text-xs); color: var(--color-ink-3); }
.piyo-tile-value {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piyo-tile-sub { font-size: var(--text-xs); color: var(--color-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── filter chips ────────────────────────────────────────────────────── */
.piyo-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.piyo-chip {
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  background: transparent;
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.piyo-chip:hover { color: var(--color-ink); border-color: var(--color-ink-4); }
.piyo-chip[data-active="1"] { color: var(--color-ink); border-color: var(--color-ink-3); }

/* ── timeline ────────────────────────────────────────────────────────── */
.piyo-timeline { display: flex; flex-direction: column; gap: var(--space-4); }
.piyo-day-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.piyo-day-count { font-weight: 400; color: var(--color-ink-4); letter-spacing: 0; text-transform: none; }
.piyo-rows { list-style: none; margin: 0; padding: 0; }
.piyo-row {
  display: grid;
  grid-template-columns: 4.6rem 9rem minmax(0, 1fr);
  gap: 2px var(--space-3);
  align-items: baseline;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.piyo-row:hover { background: var(--color-bg-2); }
.piyo-row-time { color: var(--color-ink-4); font-variant-numeric: tabular-nums; font-size: var(--text-xs); white-space: nowrap; }
.piyo-row-type { color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piyo-row[data-cat="sleep"] .piyo-row-type { color: var(--color-ink-2); }
.piyo-row-detail { color: var(--color-ink-3); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piyo-row-memo {
  grid-column: 2 / -1;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  white-space: pre-wrap;
  border-left: 2px solid var(--color-border-2);
  padding-left: var(--space-2);
}
@media (max-width: 560px) {
  .piyo-row { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .piyo-row-detail { grid-column: 2; white-space: normal; }
  .piyo-row-memo { grid-column: 2; }
}
.piyo-empty, .piyo-loading { font-size: var(--text-sm); color: var(--color-ink-4); padding: var(--space-6) 0; text-align: center; }

/* ── footer ──────────────────────────────────────────────────────────── */
.piyo-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-4);
  font-variant-numeric: tabular-nums;
}
.piyo-foot a { color: inherit; }
.piyo-foot a:hover { color: var(--color-ink); }

/* ── setup ───────────────────────────────────────────────────────────── */
.piyo-setup {
  max-width: 34rem;
  margin: var(--space-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.piyo-setup-title { font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; }
.piyo-setup-sub { font-size: var(--text-sm); color: var(--color-ink-3); line-height: 1.55; }
.piyo-setup-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: 400 var(--text-sm) var(--font-mono);
  color: var(--color-ink);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.piyo-setup-input:focus { border-color: var(--color-ink-3); }
.piyo-setup-err { font-size: var(--text-xs); color: var(--color-error); }
.piyo-setup-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ── gate (mirrors /code) ────────────────────────────────────────────── */
.piyo-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: oklch(10% 0 0 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-4);
  animation: piyo-fade-in 200ms var(--ease) both;
}
@media (prefers-color-scheme: light) {
  .piyo-gate { background: oklch(96% 0 0 / 0.6); }
}
@keyframes piyo-fade-in { from { opacity: 0; } to { opacity: 1; } }
.piyo-gate-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px oklch(0% 0 0 / 0.35);
}
.piyo-gate-loading { padding: var(--space-6); min-height: 80px; justify-content: center; }
.piyo-gate-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.piyo-gate-title { font-size: var(--text-lg); font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; }
.piyo-gate-sub { font-size: var(--text-sm); color: var(--color-ink-3); text-align: center; margin-bottom: var(--space-2); }
.piyo-gate-input {
  width: 100%;
  background: var(--color-bg-2);
  color: var(--color-ink);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  font: 400 var(--text-sm) var(--font-sans);
  text-align: center;
  letter-spacing: 0.05em;
  transition: border-color var(--dur) var(--ease);
}
.piyo-gate-input:focus { outline: none; border-color: var(--color-ink-3); }
.piyo-gate-input:disabled { opacity: 0.6; }
.piyo-gate-err { width: 100%; font-size: var(--text-xs); color: var(--color-error); text-align: center; padding: 4px 0; }
.piyo-gate-submit {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: 500 var(--text-sm) var(--font-sans);
  color: var(--color-accent-fg);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.piyo-gate-submit:hover:not(:disabled) { opacity: 0.9; }
.piyo-gate-submit:disabled { opacity: 0.5; cursor: default; }
.piyo-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--color-border-2);
  border-top-color: var(--color-ink);
  border-radius: 50%;
  animation: piyo-spin 800ms linear infinite;
}
@keyframes piyo-spin { to { transform: rotate(360deg); } }