/* ─────────────────────────────────────────────────────────────
   Hello Radio — save + boards styles
   One job: the bookmark button, the save popover, and the Boards
   page. Background tints and shadows only (no decorative borders);
   tokens drive both themes. Loads after components.css / forms.css.
   ───────────────────────────────────────────────────────────── */

/* ── Bookmark save button (on the card status row) ── */
.savebtn {
  margin-left: auto; /* group with the ellipsis menu on the right */
  border: none; background: transparent; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.savebtn svg { display: block; }
.savebtn svg path { fill: none; stroke: currentColor; stroke-width: 1.1; }
.savebtn:hover { background: var(--control-bg); color: var(--text); }
.savebtn:active { transform: scale(0.9); }
.savebtn.on { color: var(--accent); }
.savebtn.on svg path { fill: currentColor; stroke: currentColor; }

/* ── Save popover (reuses .toolpop's shadow language) ── */
.save-anchor { position: relative; display: inline-flex; }
.save-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 150;
  width: 288px; padding: 12px;
  background: var(--surface); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.1);
  opacity: 0; transform: translateY(-4px) scale(0.98);
  pointer-events: none; transform-origin: top left;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.save-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.save-pop.flip { left: auto; right: 0; transform-origin: top right; }

.save-sec {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary);
  margin: 6px 8px 4px;
}
.save-sec:first-child { margin-top: 0; }

.save-boards { max-height: 190px; overflow-y: auto; scrollbar-width: thin; }

.save-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px;
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: var(--text-lg); color: var(--text);
  transition: background var(--dur-fast) var(--ease-out);
}
.save-row:hover { background: var(--control-bg); }
.save-row-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-row-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; color: var(--text-secondary); flex-shrink: 0; }
.save-row.on .save-row-ic { color: var(--accent); }

/* round check, filled + ticked when the board holds this ad */
.save-check {
  width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  background: var(--control-bg); color: var(--prim-white);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out);
}
.save-check.on { background: var(--accent); }
.save-check svg { display: block; }

.save-create { color: var(--text-secondary); }

.save-newboard { margin: 4px 0; }

.save-note-wrap { margin-top: 8px; }
.save-note {
  min-height: 62px; resize: vertical; line-height: 1.4;
  border: none; background: var(--control-bg);
}
.save-note:focus { background: var(--surface); }

/* the popover's text controls drop the form border for a flat tint,
   keeping the focus ring from forms.css */
.save-pop .input, .save-pop .textarea { border: none; background: var(--control-bg); }
.save-pop .input:focus, .save-pop .textarea:focus { background: var(--surface); }

/* ── Boards page ── */
.bv-head { background: var(--surface); padding: 24px 32px 0; box-shadow: 0 1px 0 var(--divider); }
.bv-title { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; letter-spacing: -0.3px; }

.bv-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-bottom: 16px; }
.bv-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: none; border-radius: var(--radius-full);
  background: var(--control-bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--text-md); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.bv-tab:hover { background: var(--control-bg-hover); }
.bv-tab:active { transform: scale(0.97); }
.bv-tab.active { background: var(--accent); color: var(--prim-white); }
.bv-tab-nm { font-weight: 600; }
.bv-tab-ct { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.bv-tab.active .bv-tab-ct { color: rgba(255, 255, 255, 0.8); }
.bv-tab-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin: -2px -4px -2px 0;
  color: inherit; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bv-tab:hover .bv-tab-x { opacity: 0.6; }
.bv-tab-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }
.bv-tab.active .bv-tab-x:hover { background: rgba(255, 255, 255, 0.22); }

.bv-newbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: none; border-radius: var(--radius-full);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-body); font-size: var(--text-md); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bv-newbtn:hover { background: var(--control-bg); color: var(--text); }
.bv-newboard { width: 160px; }

.bv-grid { padding-top: 20px; }
.bv-cell { display: flex; flex-direction: column; }

.bv-note-wrap { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px 0; }
.board-note {
  min-height: 56px; resize: vertical; line-height: 1.4;
  border: none; background: var(--control-bg);
}
.board-note:focus { background: var(--surface); }
.bv-remove {
  align-self: flex-start; padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary);
}
.bv-remove:hover { color: var(--text); }

.bv-empty {
  padding: 80px 32px; text-align: center;
  color: var(--text-secondary); font-size: var(--text-lg);
}