/* portal-my.css — MY SAVED ITEMS (docs/plans/2026-09-28-my-saved-items-design.md §6): the folder
 * sidebar in the rail, the bulk bar, the row checkboxes and the private note. Everything else (the
 * command bar, views, overlay, rail presentation) is portal-browse.css — the same stylesheet as the
 * public page. Loaded after portal-browse.css + portal-actions.css. REM-ONLY, --pt-* tokens, every
 * interactive element >= 2.75rem in both axes. */

/* ── the sidebar (inside .br-rail-body) ── */
.my-sec { padding: .25rem 0 .5rem; }
.my-sec + .my-sec { border-top: .0625rem solid var(--pt-line); }
.my-sec-h { padding: .45rem .5rem .2rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pt-faint); }
.my-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.my-item { display: flex; align-items: center; gap: .1rem; min-width: 0; border-radius: var(--pt-radius-md); }
.my-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; min-height: var(--pt-touch-min); padding: 0 .55rem;
  border: none; border-radius: var(--pt-radius-md); background: transparent; color: var(--pt-text); font: inherit; font-size: .84rem;
  text-align: left; text-decoration: none; cursor: pointer; }
.my-go > i { width: 1.1rem; text-align: center; color: var(--pt-muted); flex: none; }
.my-go:hover { background: var(--pt-surface-2); }
.my-go:focus-visible, .my-tool:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: -.125rem; }
.my-go[aria-current="true"] { background: var(--pt-accent-bg); color: var(--pt-tint-ink); font-weight: 700; }
.my-go[aria-current="true"] > i { color: var(--pt-tint-ink); }
.my-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-count { flex: none; font-size: .74rem; color: var(--pt-faint); font-variant-numeric: tabular-nums; }
.my-go[aria-current="true"] .my-count { color: var(--pt-tint-ink); }
/* "new": a dot (aria-hidden; the accessible name says "new items" / "3 unread") */
.my-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pt-accent-strong); }
.my-new { color: var(--pt-accent-ink); font-weight: 600; }
.my-new > i { color: var(--pt-accent-ink); }
/* rename / ⋯ (move, delete): 2.75rem icon tools beside a user folder */
.my-tool { flex: none; width: var(--pt-touch-min); height: var(--pt-touch-min); display: inline-flex; align-items: center;
  justify-content: center; border: none; border-radius: var(--pt-radius-md); background: transparent; color: var(--pt-faint);
  font-size: .78rem; cursor: pointer; }
.my-tool:hover { color: var(--pt-text); background: var(--pt-surface-2); }
/* the folder's ⋯ menu (Move up / Move down / Delete): an inline disclosure under the row — the
   TOUCH reorder (drag and Alt+↑/↓ need a mouse or a keyboard); every item is 2.75rem tall */
.my-more[aria-expanded="true"] { color: var(--pt-text); background: var(--pt-surface-2); }
.my-folder.has-menu { flex-wrap: wrap; }
.my-menu { flex: 1 0 100%; display: flex; flex-direction: column; gap: .1rem; padding: .15rem 0 .35rem 1.7rem; }
.my-menu-item { display: flex; align-items: center; gap: .55rem; min-height: var(--pt-touch-min); padding: 0 .6rem;
  border: none; border-radius: var(--pt-radius-md); background: transparent; color: var(--pt-text); font: inherit;
  font-size: .82rem; text-align: left; cursor: pointer; }
.my-menu-item > i { width: 1.1rem; text-align: center; color: var(--pt-muted); flex: none; }
.my-menu-item:hover:not(:disabled) { background: var(--pt-surface-2); }
.my-menu-item:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: -.125rem; }
.my-menu-item:disabled, .my-menu-item:disabled > i { color: var(--pt-faint); cursor: default; }
.my-menu-item.is-danger, .my-menu-item.is-danger > i { color: var(--pt-bad); }
.my-folder[draggable="true"] { cursor: grab; }
.my-folder.is-dragging { opacity: .5; }
.my-folder.drop-target { box-shadow: inset 0 .1875rem 0 var(--pt-accent-strong); }
/* the inline editor (rename / new folder): Enter saves, Esc cancels */
.my-editing { flex-wrap: wrap; gap: .4rem; padding: 0 .4rem 0 .6rem; }
.my-editing > i { color: var(--pt-muted); width: 1.1rem; text-align: center; }
.my-rename { flex: 1; min-width: 0; min-height: var(--pt-touch-min); padding: 0 .6rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-accent-strong); background: var(--pt-surface); color: var(--pt-text); font-size: .84rem; }
.my-rename:focus { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.my-msg { flex: 1 0 100%; padding: 0 .2rem .3rem 1.7rem; font-size: .74rem; color: var(--pt-bad); line-height: 1.3; }
.my-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem .6rem; color: var(--pt-muted);
  font-size: .82rem; }
/* the strip: the same entries as icons with count badges (.br-strip-btn / .br-badge / .has-active) */
.my-strip-btn[aria-current="true"] { background: var(--pt-accent-bg); color: var(--pt-tint-ink); }

/* ── the bulk bar: [hidden] until something is selected; ONE 3rem row, never a second command bar ── */
.my-bulk { flex: none; display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .125rem 1rem;
  background: var(--pt-accent-bg); border-bottom: .0625rem solid var(--pt-accent-line); overflow-x: auto; white-space: nowrap; }
.my-bulk-n { font-weight: 700; font-size: .82rem; color: var(--pt-tint-ink); margin-right: auto; }
.my-bulk .br-btn { flex: none; }
.my-bulk-x { flex: none; }

/* ── row checkboxes: the native input fills a 2.75rem box (the hit area), transparent; the drawn
   box beside it carries the state (a tick, not colour alone) ── */
.my-check { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--pt-touch-min); height: var(--pt-touch-min); cursor: pointer; }
.my-check-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.my-box { width: 1.15rem; height: 1.15rem; border-radius: .3rem; border: .125rem solid var(--pt-line-2); background: var(--pt-surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; line-height: 1; }
.my-check-in:checked + .my-box { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.my-check-in:checked + .my-box::after { content: "✓"; }
.my-check-in:indeterminate + .my-box::after { content: "–"; }
.my-check-in:focus-visible + .my-box { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }
.llead { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.brow > .my-check { align-self: center; }
.lrow.is-picked, .brow.is-picked { background: var(--pt-accent-bg); }
.my-selall { display: flex; align-items: center; gap: .4rem; min-height: var(--pt-touch-min); margin-bottom: .4rem; padding: 0 .6rem;
  font-size: .8rem; color: var(--pt-muted); }

/* ── the private note in the detail overlay ── */
.my-note { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1rem; max-width: 40rem; }
.my-note-h { font-weight: 700; font-size: .82rem; }
.my-note-in { width: 100%; min-height: 4.5rem; padding: .5rem .65rem; border-radius: var(--pt-radius-md); resize: vertical;
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-text); font: inherit; font-size: .85rem; }
.my-note-in:focus { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.my-note-acts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.my-note-msg { font-size: .78rem; color: var(--pt-muted); }

@media (max-width: 47.99rem) {
  .my-rename, .my-note-in { font-size: 1rem; }    /* 14px triggers iOS focus-zoom */
}

/* ---- library API 1.7 (WP2): a source list's refresh countdown ---------------------------- */
.my-before { display: flex; flex-direction: column; gap: .4rem; }
.my-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .4rem; padding: .55rem .75rem;
  border: .0625rem solid var(--pt-line-2); border-radius: var(--pt-radius-md); background: var(--pt-surface-2); font-size: .82rem; }
.my-refresh > i { color: var(--pt-muted); flex: none; }
.my-refresh-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; flex: 1 1 12rem; min-width: 0; }
.my-refresh-h { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-faint); }
.my-refresh-time { font-weight: 700; color: var(--pt-text); }
.my-refresh-count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pt-accent-ink); }