/* Components — every one is rendered live on /styleguide. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-4); box-shadow: var(--shadow-1); }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: 600 var(--t-sm)/1 var(--font-ui); padding: 10px 14px; border-radius: var(--r-control); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--indigo-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--indigo) 88%, black); }
.btn-sun { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-danger { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 40%, transparent); }

.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field .hint { font-size: var(--t-xs); color: var(--faint); }
.input, select.input, textarea.input { width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 10px 12px; }
textarea.input { min-height: 140px; resize: vertical; }
.input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.chip-person { --hue: var(--p-ardi); color: var(--hue); border-color: color-mix(in srgb, var(--hue) 35%, transparent);
  background: color-mix(in srgb, var(--hue) 10%, var(--surface)); }
.chip-person::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
.who-person_ria { --hue: var(--p-ria); } .who-person_yuza { --hue: var(--p-yuza); }
.chip-place::before { content: "📍"; } .chip-day::before { content: "🗓"; } .chip-lock::before { content: "🔒"; }
.chip-link { color: var(--indigo); background: var(--indigo-soft); border-color: transparent; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-left: 28px; margin-bottom: var(--s-4); animation: rise var(--dur) var(--ease-out) both; }
.tl-item::before { content: ""; position: absolute; left: 1px; top: 18px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--hue, var(--p-ardi)); }
.tl-time { font-family: var(--font-code); font-size: var(--t-xs); color: var(--faint); }
.tl-title { font-weight: 700; font-size: var(--t-lg); margin: 2px 0 6px; color: var(--ink); }
.tl-body { white-space: pre-wrap; color: var(--ink); }
.thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--line); }

.secret-field { display: flex; gap: var(--s-2); align-items: center; font-family: var(--font-code); }
.secret-mask { letter-spacing: .2em; color: var(--faint); }
.money { font-family: var(--font-code); font-weight: 600; }
.money.neg { color: var(--rose); } .money.pos { color: var(--leaf); }
.map-pin { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-sm); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--canvas);
  padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-pop); animation: rise var(--dur) var(--ease-out) both; }
.alert { padding: var(--s-3); border-radius: var(--r-control); background: var(--rose-soft); color: var(--rose); font-weight: 600; }
.ok { padding: var(--s-3); border-radius: var(--r-control); background: var(--leaf-soft); color: var(--leaf); font-weight: 600; }
.empty { text-align: center; color: var(--faint); padding: var(--s-6) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); }
table.list { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.list th, table.list td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }

.htmx-request .spin, .htmx-request.spin { opacity: .5; pointer-events: none; }
.htmx-added { animation: rise var(--dur) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }