/* Component CSS lives next to its view (public/components/<Name>/styles.css)
   and is pulled in here so carddeck.html only needs to load one stylesheet. */
@import "../components/CardItem/styles.css";
@import "../components/BookmarkDetail/styles.css";
@import "../components/DeckList/styles.css";
@import "../components/DeckDetail/styles.css";

:root {
  color-scheme: light;
  --ink: #17202b;
  --muted: #667085;
  --line: #d5dde7;
  --bg: #edf2f7;
  --panel: #ffffff;
  --soft: #f7f9fc;
  --blue: #3464a2;
  --green: #238765;
  --amber: #b7791f;
  --danger: #c0392b;
  --selected: #e8f0fb;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.topbar {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 18px; font-weight: 950; }
.topbar .sub { font-size: 12px; color: var(--muted); font-weight: 700; }
.topbar .back-link {
  margin-left: auto;
  text-decoration: none; color: var(--blue); font-weight: 800; font-size: 13px;
}
.page-banner {
  flex: none; padding: 10px 18px; background: #fff7e6; color: #8a5a00;
  border-bottom: 1px solid #f1d691; font-size: 13px; font-weight: 700;
}
.page-banner[hidden] { display: none; }
/* `.page` must participate in the body flex column and bound its own height,
 * otherwise the inner `.layout flex:1` / `.deck-detail__cards overflow-y:auto`
 * scroll chain collapses and a long card list grows the page past the viewport
 * (clipped by body `overflow:hidden`) with no way to scroll. */
.page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.layout {
  flex: 1; display: grid; grid-template-columns: 268px 1fr; min-height: 0;
}
.layout[data-viewport="narrow-list"] { grid-template-columns: 1fr; }
.layout[data-viewport="narrow-list"] .col-detail { display: none; }
.layout[data-viewport="narrow-detail"] { grid-template-columns: 1fr; }
.layout[data-viewport="narrow-detail"] .col-list { display: none; }
.col-list {
  background: var(--soft); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.col-detail { display: flex; flex-direction: column; min-height: 0; background: var(--bg); position: relative; }
.narrow-back {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  border: 1px solid var(--line); background: var(--panel); padding: 7px 11px;
  border-radius: 9px; font-weight: 800; cursor: pointer;
}
.btn-primary {
  background: var(--blue); color: #fff; border: none; border-radius: 10px;
  padding: 11px 22px; font-weight: 900; font-size: 14px; cursor: pointer;
}
.btn-primary:disabled { background: #c1cad6; cursor: not-allowed; }
.btn-secondary {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 9px; padding: 7px 11px; font-weight: 800; font-size: 12px; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }

.deck-detail__cards .deck-card-group:first-of-type .card-item-swipe:first-of-type .card-item-swipe__fore {
  animation: deck-swipe-nudge 1.4s ease-out 0.45s 2;
}

@keyframes deck-swipe-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-18px); }
  65% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .deck-detail__cards .deck-card-group:first-of-type .card-item-swipe:first-of-type .card-item-swipe__fore {
    animation: none;
  }
}

/* Delete confirm dialog */
.confirm-scrim {
  position: fixed; inset: 0; background: rgba(15, 25, 40, 0.45);
  display: grid; place-items: center; z-index: 10;
}
.confirm-scrim[hidden] { display: none; }
.confirm-modal {
  background: var(--panel); border-radius: 12px; padding: 20px;
  width: min(420px, 90vw); border: 1px solid var(--line);
}
.confirm-modal__title { margin: 0 0 8px; font-size: 16px; font-weight: 900; }
.confirm-modal__text { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.confirm-modal__foot { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
}