/* ===== Ink & Ivy base styles ===== */
:root {
  --bg: #0D0D0A;
  --card: #161614;
  --text: #F0EDE9;
  --muted: #CFCAC2;
  --accent: #401C26;      /* wine */
  --accent-2: #59230F;    /* reddish-brown */
  --olive: #525947;       /* highlight */
  --sage: #828C72;        /* secondary highlight */
  --ring-draft: var(--accent);
  --ring-edit: var(--sage);
  --border: #2a2a25;
  --shadow: 0 6px 24px rgba(0,0,0,.25);
}

html[data-theme="light"] {
  --bg: #F7F6F4;
  --card: #EEECE9;
  --text: #2A2A2A;
  --muted: #5A5753;
  --accent: #8B7E74;      /* poised taupe */
  --accent-2: #A3B18A;    /* softened green */
  --olive: #9AA090;       /* evergreen fog */
  --sage: #98A6B3;        /* foggy day-ish for contrast */
  --border: #D7D4D1;
  --shadow: 0 6px 24px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 "Times New Roman", Times, Georgia, serif;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }

.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.site-header, .site-footer {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1rem; background: var(--card); border-bottom: 1px solid var(--border);
}
.site-footer { border-top: 1px solid var(--border); border-bottom: none; justify-content: center; }

.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-name { font-weight: 700; letter-spacing: .5px; }

.top-nav { display: flex; gap: 1rem; margin-left: auto; }
.top-nav a { padding: .25rem .5rem; border-radius: 6px; }
.top-nav a.active, .top-nav a:hover { background: var(--border); }

.toolbar { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
.spacer { flex: 1; }

button, .import-label > span {
  padding: .55rem .9rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow);
}
button.primary { background: var(--accent); border-color: transparent; }
button.secondary, .import-label > span { background: var(--olive); border-color: transparent; }
button.ghost { background: transparent; }
button:disabled { opacity: .6; cursor: not-allowed; }
.tiny { font-size: .9rem; opacity: .9; }

.buckets { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 800px) { .buckets { grid-template-columns: 1fr 1fr; } }

.bucket {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: .5rem .75rem;
}
.bucket h2 { margin: .25rem 0 .5rem; font-size: 1.1rem; opacity: .9; }

.grid { display: grid; gap: .6rem; }
.grid.cards { grid-template-columns: 1fr; }
@media (min-width: 700px){ .grid.cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: grid; grid-template-columns: 72px 1fr; gap: .75rem; align-items: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: .6rem .75rem;
}
.card h3 { margin: 0; font-size: 1.05rem; }
.card .meta { font-size: .92rem; color: var(--muted); }
.card .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.progress {
  width: 72px; height: 72px; position: relative;
}
.progress svg { width: 72px; height: 72px; display: block; }
.progress .pct {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: .85rem;
}

.badge { display:inline-block; padding: .15rem .45rem; border:1px solid var(--border); border-radius: 999px; font-size: .85rem; margin-right:.35rem; }

.site-footer .backup { display: flex; gap: .5rem; align-items: center; }
.site-footer .note { opacity: .8; }

dialog::backdrop { background: rgba(0,0,0,.45); }
dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--text); }
.dialog-body { min-width: 330px; padding: 1rem; display: grid; gap: .6rem; }
.dialog-actions { display: flex; justify-content: end; gap: .5rem; }
label { display: grid; gap: .25rem; }
input, select, textarea {
  padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.grid-2 { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 620px){ .grid-2 { grid-template-columns: 1fr 1fr; } }