/* Styles for js/views/library.js */

/* Search */
.search-box { display: flex; align-items: center; gap: 10px; padding: 4px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.search-box input { border: 0; background: none; padding: 9px 0; border-radius: 0; outline: none; }
.search-box:focus-within { outline: 3px solid var(--water); outline-offset: 2px; }
input.lib-search { background: var(--card); }

/* Notice card (guidance disclaimer) */
.notice-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; border: 0; box-shadow: none; background: color-mix(in srgb, var(--water) 10%, transparent); font-size: .94rem; }
.notice-card > .ico { font-size: 1.3rem; width: 24px; text-align: center; }
.notice-label { color: var(--water); margin-bottom: 2px; }

/* Headings */
.colored-header { font-size: 1.15rem; }
.title-forest { color: var(--forest); }
.heading { color: var(--forest); font-size: 1.2rem; }
.row-flex.top { align-items: flex-start; }
.rust { color: var(--rust); }
.faq-answer { font-size: .94rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* Tinted lists (bullets and numbered steps take the area color) */
.tinted .bullets li::marker, .tinted .steps li::marker { color: var(--tint); }

/* "Track this" card */
.track-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; color: var(--ink); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.track-card:hover { text-decoration: none; }

/* Plant stats and timing */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: .8rem; font-weight: 700; color: var(--tint); }
.timing-row { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: .94rem; }
@media (max-width: 360px) { .timing-row { grid-template-columns: 1fr; gap: 0; } }

/* Care plan timeline */
.timeline { display: flex; flex-direction: column; }
.tl-stage { display: flex; gap: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 14px; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); flex: none; margin-top: 3px; }
.tl-line { width: 2px; flex: 1; background: var(--line); }
.tl-body { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; min-width: 0; }

/* Weeds */
.month-strip { display: flex; flex-direction: column; gap: 8px; }
.ms-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.ms-col { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: center; }
.ms-letter { font-size: .7rem; font-weight: 600; color: var(--ink-soft); }
.ms-bar { display: block; height: 10px; border-radius: 3px; background: var(--line); }
.ms-bar.active { background: var(--rust); }
.ms-bar.prevent { background: var(--gold); }
.ms-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .72rem; }
.ms-rust { color: var(--rust); }
.ms-gold { color: var(--gold-deep); }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
select.month-select { font-weight: 600; max-width: 200px; }

/* Pool care */
.pool-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .pool-choices { grid-template-columns: 1fr; } }
.pool-choice {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 64px; padding: 12px; cursor: pointer;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--pool) 30%, transparent);
  background: color-mix(in srgb, var(--pool) 12%, transparent); color: var(--ink);
}
.pool-choice .caption { color: var(--ink-soft); display: block; }
.pool-choice .card-title { display: block; }
.pool-choice.on { background: linear-gradient(135deg, #08707C, #48D3C6); border-color: transparent; color: #fff; }
.pool-choice.on .card-title, .pool-choice.on .caption { color: #fff; }
.pool-radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pool); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.pool-choice.on .pool-radio { background: #fff; border-color: #fff; color: #08707C; }
.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 4px; background: var(--pool); transition: width .25s; }
.pool-card { padding: 4px; }
.pool-card .check { padding: 10px; align-items: flex-start; }
.pool-card .check input { accent-color: var(--pool); }
.pool-card .check > .ico { margin-left: auto; opacity: .8; }
.avoid-row { cursor: default; }