/* Reading list: list and editor on top of the shared tokens (core/ui-components.css). */
[hidden] { display: none !important; }
.rl { gap: var(--s-5); }
.rl > * { min-width: 0; }
.rl__side, .rl__editor { padding: var(--s-5); border-top: 3px solid var(--accent); }
.rl__editor { display: none; }
.rl.is-editing .rl__side { display: none; }
.rl.is-editing .rl__editor { display: block; }
@media (min-width: 1100px) {
  .rl { grid-template-columns: minmax(20rem, 24rem) 1fr; }
  .rl__side { display: block !important; position: sticky; top: var(--s-5); max-height: calc(100vh - 2 * var(--s-5)); overflow: auto; }
  .rl__editor { display: block !important; min-height: 32rem; }
  .rl-back { display: none; }
}

.rl-top { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.rl-search { flex: 1; min-width: 0; }
.rl-top .ow-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); white-space: nowrap; }
.rl-top .ow-btn:hover { filter: brightness(1.12); }
.rl-top .ow-btn .ow-icon { vertical-align: -0.2em; }

.rl-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.rl-chips:empty { display: none; }
.rl-chip, .rl-segbtn {
  padding: .3em .75em; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-small); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rl-chip:hover, .rl-segbtn:hover { border-color: var(--accent); color: var(--accent); }
.rl-chip[aria-pressed="true"], .rl-segbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rl-chip:focus-visible, .rl-segbtn:focus-visible, .rl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-segbtn { display: inline-flex; align-items: center; gap: .4em; }
.rl-stats { margin: 0 0 var(--s-3); color: var(--text-muted); font-size: var(--fs-small); }

/* Entry cards */
.rl-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.rl-card {
  display: grid; gap: .35rem; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rl-card:hover { border-color: var(--accent); }
.rl-card[aria-current="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); }
.rl-card__head { display: flex; align-items: center; gap: var(--s-2); }
.rl-card__head .ow-icon { flex: none; color: var(--accent); }
.rl-card__title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-card__foot { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--text-muted); font-size: .8rem; }
.rl-card__foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-card__stars { flex: none; color: var(--accent); letter-spacing: 0; display: inline-flex; gap: 1px; }
.rl-card[data-status="done"] .rl-card__title { color: var(--text-muted); }
.rl-badge {
  flex: none; padding: .05em .55em; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; color: var(--text-muted);
}
.rl-badge[data-status="doing"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.rl-badge[data-status="done"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rl-empty { margin: var(--s-5) 0; text-align: center; }

/* Progress */
.rl-meter { height: .5rem; margin-top: var(--s-2); border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.rl-meter > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }
.rl-card .rl-meter { height: .3rem; margin: 0; }

/* Editor */
.rl-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.rl-bar__tools { display: flex; gap: var(--s-2); margin-left: auto; }
.rl-tool { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; }
.rl-tool:hover { border-color: var(--accent); color: var(--accent); }
#delete.is-armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.rl-title {
  width: 100%; padding: .3em 0; margin-bottom: var(--s-3); border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; border-radius: 0;
}
.rl-title:focus-visible { outline: none; border-bottom-color: var(--accent); }
.rl-seg { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); }
.rl-field { display: grid; gap: .3rem; margin-bottom: var(--s-3); min-width: 0; }
.rl-field > span:first-child { color: var(--text-muted); font-size: var(--fs-small); }
.rl-linkrow { display: flex; gap: var(--s-2); align-items: center; }
.rl-linkrow .ow-input { flex: 1; min-width: 0; }
.rl-stars { display: flex; gap: .15rem; }
.rl-star {
  display: inline-flex; padding: .2rem; border: 0; border-radius: 6px; background: transparent; color: var(--border-strong, var(--text-muted)); cursor: pointer;
}
.rl-star[aria-pressed="true"] { color: var(--accent); }
.rl-star[aria-pressed="true"] svg { fill: currentColor; }
.rl-star:hover { color: var(--accent); }
.rl-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rl-progress { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.rl-num { width: 6rem; }
.rl-note { resize: vertical; min-height: 8rem; }
.rl-editor .ow-usage, #meta { margin: var(--s-2) 0 0; }