/* Decks (#/decks and #/decks/:id): the searchable deck table, and the deck
   editor with the card being written under the lamp, the card list, the
   paste-many box and a quiet place to delete the deck. The lamp stage, paper
   card parts and deck table rules live in desk.css, scoped to .v-decks too. */

/* ---------- list ---------- */

/* the same left edge as the Desk, with the table kept to a readable width */
.v-decks-list { display: grid; gap: 24px; align-content: start; }
.v-decks-list > * { width: 100%; max-width: 900px; }
/* with decks: the table takes eight of the Desk's twelve columns, and Noggin's lit corner
   the other four; on phones the corner follows the list */
.v-decks-list.has-corner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 32px; align-items: start; }
.v-decks-list.has-corner > * { max-width: none; }
.v-decks-list .list-main { display: grid; gap: 24px; align-content: start; min-width: 0; }
.v-decks-list .list-head { min-height: 52px; }
.v-decks-list .list-lede { margin-top: -8px; }
.v-decks-list .list-tools { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.v-decks-list .list-search { flex: 0 1 380px; }
.v-decks-list .list-search > label { font: 600 14px/1.2 var(--text); color: var(--chalk); }
.v-decks-list .list-count { padding-bottom: 12px; font: 500 14px/1.3 var(--text); color: var(--chalk-faint); }
.v-decks .search-box { position: relative; display: block; }
.v-decks .search-box .px-search { position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--chalk-faint); pointer-events: none; }
.v-decks .search-box .input { padding-left: 40px; padding-right: 44px; }
.v-decks .search-box .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.v-decks .search-clear {
  position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px;
  display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--chalk-dim);
}
.v-decks .search-clear:hover { color: var(--chalk); }
.v-decks .search-clear:focus-visible { outline-offset: -3px; }
.v-decks .search-clear .px-close { width: 14px; height: 14px; }

/* sortable headers */
.v-decks .deck-table thead th button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font: inherit; color: inherit; white-space: nowrap; }
.v-decks .deck-table thead th button:hover { color: var(--chalk); }
.v-decks .deck-table thead th[aria-sort] { color: var(--chalk); }
.v-decks .deck-table thead th button .px-icon { color: var(--amber); }

/* the lit corner: Noggin's due line over a small lamp and Noggin on a desk band, in the
   lamp's stepped pool (positions come from mountCorner in decks.js) */
.v-decks-list .list-corner { display: grid; gap: 14px; align-content: start; min-width: 0; padding-top: 76px; }
.v-decks-list .corner-line { max-width: 30ch; font-size: 18px; }
.v-decks-list .corner-stage { --lc: 8px; --nc: 6px; height: var(--corner-h, 260px); overflow: clip; }
.v-decks-list .corner-stage .desk-band { position: absolute; left: 0; right: 0; bottom: 0; }
.v-decks-list .corner-lamp, .v-decks-list .corner-noggin { position: absolute; bottom: calc(4 * var(--a)); }
.v-decks-list .corner-lamp { left: var(--x0, 0px); width: calc(var(--w, 20) * var(--lc)); height: calc(var(--h, 17) * var(--lc)); }
.v-decks-list .corner-noggin { left: calc(var(--x0, 0px) + 9 * var(--lc)); width: calc(var(--w, 22) * var(--nc)); height: calc(var(--h, 24) * var(--nc)); }
.v-decks-list .corner-lamp svg { display: block; width: 100%; height: 100%; }

.v-decks-list .list-none { display: grid; justify-items: start; gap: 14px; padding: 24px; background: var(--ink); clip-path: var(--cut); --c: 6px; }
.v-decks-list .list-none p { font: 500 16px/1.45 var(--text); color: var(--chalk-dim); }
.v-decks-list .list-none b { color: var(--chalk); }
.v-decks-list .list-none .btn:focus-visible { outline-offset: 2px; }

/* ---------- Backup: save everything in this browser to a file, or bring a file back ---------- */
.v-decks-list .list-safe { display: grid; gap: 24px; min-width: 0; }
.v-decks-list .backup, .v-decks-list .sync { display: grid; gap: 16px; padding: 22px 24px 24px; background: var(--ink); clip-path: var(--cut); --c: 6px; }
.v-decks-list .backup-text { display: grid; gap: 8px; }
.v-decks-list .backup-text p { max-width: 60ch; font: 400 16px/1.5 var(--text); color: var(--chalk-dim); }
.v-decks-list .backup-text p.is-error { font-weight: 600; color: var(--error); }
.v-decks-list .sy-body { display: grid; gap: 16px; }
.v-decks-list .sy-form { display: grid; gap: 8px; max-width: 540px; }
.v-decks-list .sy-key[aria-invalid="true"] { border-color: var(--error); }
.v-decks-list .sy-label { font: 600 14px/1.2 var(--text); color: var(--chalk); }
.v-decks-list .sy-row { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.v-decks-list .sy-key { flex: 1 1 220px; width: auto; text-transform: uppercase; letter-spacing: 0.06em; }
.v-decks-list .sy-hint { font: 400 14px/1.4 var(--text); color: var(--chalk-dim); }
.v-decks-list .backup-actions, .v-decks-list .bk-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.v-decks-list .backup-confirm { display: grid; gap: 12px; padding: 16px 18px 18px; background: var(--wall); clip-path: var(--cut); --c: 4px; }
.v-decks-list .bk-summary { font: 600 16px/1.45 var(--text); color: var(--chalk); font-variant-numeric: tabular-nums; }
.v-decks-list .bk-note { max-width: 62ch; font: 400 15px/1.45 var(--text); color: var(--chalk-dim); }
.v-decks-list .backup-msg { font: 600 15px/1.4 var(--text); color: var(--teal-light); }
.v-decks-list .backup-msg:empty { display: none; }
.v-decks-list .backup-msg.is-error { color: var(--error); }
.v-decks-list .backup-msg:focus-visible { outline-offset: 4px; }

/* ---------- editor: header ---------- */

.v-decks .back-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  font: 600 15px/1 var(--text); color: var(--chalk-dim); text-decoration: none;
}
.v-decks .back-link:hover { color: var(--chalk); text-decoration: underline; }
.v-editor .ed-head { display: grid; gap: 14px; margin-top: 14px; }
.v-editor .ed-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
/* The deck name is the user's own text and often carries numbers ("Biology 101"), so it reads in
   Figtree like the study view's deck title; Pixelify's 2 and 5 misread. */
.v-editor .ed-name { overflow-wrap: anywhere; min-width: 0; font-family: var(--text); font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.v-editor .ed-rename { display: grid; gap: 8px; max-width: 760px; }
.v-editor .ed-rename > label { font: 600 14px/1.2 var(--text); color: var(--chalk); }
.v-editor .ed-rename-row { display: flex; flex-wrap: wrap; gap: 10px; }
.v-editor .ed-rename .input { flex: 1 1 320px; min-height: 52px; font: 700 24px/1.2 var(--text); letter-spacing: -0.01em; }
.v-editor .ed-rename .btn { min-height: 52px; }
.v-editor .ed-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font: 500 15px/1.4 var(--text); color: var(--chalk-dim); }
.v-editor .ed-stats b { font-weight: 700; color: var(--chalk); }
.v-editor .ed-mastered { display: inline-flex; align-items: center; gap: 8px; }
.v-editor .ed-mastered .mastery i { width: 6px; }

.v-editor .ed-study { display: flex; align-items: flex-start; gap: 10px 16px; margin-top: 24px; flex-wrap: wrap; }
.v-editor .ed-study-label { padding-top: 15px; color: var(--chalk-dim); }
.v-editor .ed-modes { flex: 1 1 520px; }
.v-editor .ed-modes .modes { margin-top: 0; }
@media (min-width: 600px) {
  .v-editor .ed-modes .modes { display: flex; flex-wrap: wrap; }
  .v-editor .ed-modes .modes .btn { padding-left: 18px; padding-right: 18px; }
}
.v-editor .ed-modes .modes-why { color: var(--chalk-faint); }

.v-editor .ed-grid { margin-top: 40px; align-items: start; }
.v-editor .ed-write { display: grid; gap: 24px; align-content: start; }
/* on a tall desktop the card being written stays in view while the list scrolls;
   it lets go once the paste box is open, so nothing in it can end up out of reach */
@media (min-width: 900px) and (min-height: 760px) {
  .v-editor .ed-write { position: sticky; top: calc(var(--bar-h) + 24px); }
  .v-editor .ed-write:has(.bulk[open]) { position: static; }
}

/* ---------- editor: the card under the lamp ---------- */

.v-editor .add-card { display: grid; gap: 14px; }
.v-editor .add-card .card-title { font-size: 22px; }
.v-editor .add-card .field > label { color: var(--on-chalk); }
/* --fit is set from script only where field-sizing isn't supported */
.v-editor .add-card .textarea { min-height: 48px; height: var(--fit, auto); resize: none; field-sizing: content; }
.v-editor .add-card textarea[data-add-def] { min-height: 72px; }
.v-editor .add-card [aria-invalid="true"] { border-color: var(--error-on-chalk); }
.v-editor .add-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.v-editor .add-hint { flex: 1 1 180px; font: 500 14px/1.4 var(--text); color: var(--on-chalk-soft); overflow-wrap: anywhere; }
.v-editor .add-hint.is-done { font-weight: 700; color: var(--on-chalk); }

/* paste many */
.v-editor .bulk { background: var(--ink); clip-path: var(--cut); --c: 6px; }
.v-editor .bulk > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
  list-style: none; cursor: pointer; font: 700 16px/1.2 var(--text); color: var(--chalk);
}
.v-editor .bulk > summary::-webkit-details-marker { display: none; }
.v-editor .bulk > summary:hover { background: var(--shadow); }
.v-editor .bulk > summary:focus-visible { outline-offset: -3px; }
.v-editor .bulk > summary .px-down { color: var(--chalk-dim); }
.v-editor .bulk[open] > summary .px-down { transform: rotate(180deg); }
.v-editor .bulk-body { display: grid; gap: 14px; padding: 4px 20px 20px; }
.v-editor .bulk-body .field > label { font: 600 14px/1.2 var(--text); color: var(--chalk); }
.v-editor .bulk-hint { font: 500 14px/1.45 var(--text); color: var(--chalk-dim); }
.v-editor .bulk-body .textarea { min-height: 148px; }
.v-editor .bulk-body .textarea[aria-invalid="true"] { border-color: var(--error); }
.v-editor .bulk-msg { font: 600 14px/1.45 var(--text); color: var(--teal-light); }
.v-editor .bulk-msg:empty { display: none; }
.v-editor .bulk-msg.is-bad { color: var(--error); }

/* ---------- editor: the card list ---------- */

.v-editor .ed-cards-head { margin-bottom: 14px; }
/* At 30px Pixelify's pixel lands on whole screen pixels, so the C stays open at 1x;
   at 22-28px it can close up and "Cards" reads "Oards" (as the Wardrobe's section heads) */
.v-editor .ed-cards-head .h-section { font-size: 30px; }
.v-editor .ed-cards-head .label { color: var(--chalk-faint); }
.v-editor .card-cols { display: none; }
.v-editor .card-list { margin: 0; padding: 0; list-style: none; background: var(--ink); clip-path: var(--cut); --c: 6px; }
.v-editor .card-row {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 8px 10px;
  padding: 14px 14px 16px; border-bottom: 2px solid var(--shadow);
}
.v-editor .card-row:last-child { border-bottom: 0; }
.v-editor .card-n { grid-row: 1; padding-top: 12px; font: 600 14px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--chalk-faint); }
.v-editor .card-term, .v-editor .card-def { grid-column: 2; }
.v-editor .card-row .field { gap: 5px; }
.v-editor .card-row .field > label { font: 600 13px/1.2 var(--text); color: var(--chalk-faint); }
/* phones: the term's label line also carries Remove, so a card stays two fields tall */
.v-editor .card-term > label { display: flex; align-items: flex-end; min-height: 34px; padding-right: 150px; }
.v-editor .card-row .textarea { min-height: 44px; height: var(--fit, auto); resize: none; field-sizing: content; font-size: 15px; border-color: var(--wood); }
.v-editor .card-row .textarea:hover { border-color: var(--wood-mid); }
.v-editor .card-term .textarea { font-weight: 700; color: var(--chalk); }
.v-editor .card-def .textarea { color: var(--chalk-dim); }
.v-editor .card-row .textarea[aria-invalid="true"] { border-color: var(--error); }
.v-editor .card-act { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.v-editor .card-saved { font: 600 13px/1 var(--text); color: var(--teal-light); }
.v-editor .card-err { grid-column: 2 / -1; }
.v-editor .card-confirm { grid-column: 2 / -1; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.v-editor .card-q { margin-right: auto; font: 700 15px/1.3 var(--text); color: var(--chalk); }
.v-editor .card-row.is-confirm { background: var(--shadow); }
.v-editor .cards-empty { padding: 24px; background: var(--ink); clip-path: var(--cut); --c: 6px; }
.v-editor .cards-empty p { font: 500 16px/1.5 var(--text); color: var(--chalk-dim); max-width: 46ch; }
.v-editor .cards-empty b { color: var(--chalk); }

@media (min-width: 900px) {
  .v-editor .card-cols {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.35fr) 92px; gap: 12px; padding: 0 16px 8px;
    font: 600 13px/1.2 var(--text); color: var(--chalk-faint);
  }
  .v-editor .card-cols[hidden] { display: none; }
  .v-editor .card-row { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.35fr) 92px; gap: 8px 12px; padding: 12px 16px; }
  .v-editor .card-n { grid-row: auto; padding-top: 15px; }
  .v-editor .card-term { grid-column: 2; }
  .v-editor .card-def { grid-column: 3; }
  .v-editor .card-term > label { min-height: 0; padding-right: 0; }
  .v-editor .card-act { position: static; grid-column: 4; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
  .v-editor .card-saved { order: 2; }
  /* the column headings above name the fields; each field keeps its own label for screen readers */
  .v-editor .card-row .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v-editor .card-err, .v-editor .card-confirm { grid-column: 2 / -1; }
}

/* ---------- editor: delete, quietly ---------- */

.v-editor .danger { display: grid; justify-items: start; gap: 12px; max-width: 64ch; margin-top: 64px; padding-top: 24px; border-top: 2px solid var(--wood); }
.v-editor .danger-h { font: 700 16px/1.2 var(--text); color: var(--chalk); }
.v-editor .danger-text { font: 500 15px/1.45 var(--text); color: var(--chalk-faint); }
.v-editor .danger-q { width: 100%; font: 700 15px/1.4 var(--text); color: var(--error); }

/* ---------- missing deck ---------- */

.v-editor .missing { display: grid; justify-items: start; gap: 16px; margin-top: 24px; }
.v-editor .missing-desk { margin-top: 48px; max-width: 760px; }
.v-editor .missing-desk .stage-noggin { --nc: 5px; padding-left: calc(4 * var(--a)); }
.v-editor .missing-desk .noggin-line { padding-bottom: calc(2 * var(--a)); }

@media (max-width: 899px) {
  .v-decks-list.has-corner { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .v-decks-list .list-corner { padding-top: 0; }
  .v-decks-list .corner-line { font-size: 17px; }
  .v-decks-list .corner-stage { --lc: 6px; --nc: 5px; }
  .v-editor .ed-study-label { padding-top: 0; width: 100%; }
  .v-editor .ed-grid { margin-top: 28px; }
}