/* Desk (#/desk): the Continue card in the lamp's stepped pool, Noggin at the
   light's edge, and the side column of decks, the reset, the streak and the goal.
   The lamp stage and the deck table are shared with the Decks views, so their
   rules are scoped to both .v-desk and .v-decks. */

:is(.v-desk, .v-decks) {
  --pip-off: #DCD5C8;      /* an unlit pip on paper (DESIGN.md, desk card pips) */
  --flag-row: #2A2148;     /* the lit table row, as app.css tr.is-flag */
  --desk-shadow: #262046;  /* the strip under a card resting on the desk (DESIGN.md), as study.css */
}

/* ---------- pixel icons ---------- */

:is(.v-desk, .v-decks) .px-icon { display: block; flex: none; }
:is(.v-desk, .v-decks) .btn .px-plus { width: 10px; height: 10px; }
:is(.v-desk, .v-decks) .px-next, :is(.v-desk, .v-decks) .px-back { width: 14px; height: 10px; }
:is(.v-desk, .v-decks) .px-down { width: 14px; height: 8px; }
:is(.v-desk, .v-decks) .px-sortDown, :is(.v-desk, .v-decks) .px-sortUp { width: 10px; height: 6px; }

/* ---------- the lamp stage: lamp, the card in its pool, Noggin on the desk ---------- */

:is(.v-desk, .v-decks) .stage-box { container: stage / inline-size; }
:is(.v-desk, .v-decks) .stage {
  --lc: 6px;   /* the lamp's own pixel */
  --nc: 4px;   /* Noggin's pixel */
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding-top: calc(6 * var(--lc));
  overflow: clip; /* the pool is drawn in whole cells and can run a few pixels past the edge */
}
:is(.v-desk, .v-decks) .stage-lamp {
  position: absolute; left: 0; top: 0; bottom: calc(4 * var(--a));
  display: flex; align-items: flex-end; pointer-events: none;
}
:is(.v-desk, .v-decks) .lamp-sprite { display: block; width: calc(var(--w, 20) * var(--lc)); height: calc(var(--h, 17) * var(--lc)); }
:is(.v-desk, .v-decks) .lamp-sprite svg { width: 100%; height: 100%; }
:is(.v-desk, .v-decks) .stage-card { position: relative; z-index: 1; padding: 20px 18px 22px; }
/* the card's ink under-lip, one art pixel deep and inset a pixel each side (study.css .st-shadow) */
:is(.v-desk, .v-decks) .stage-lip { position: relative; z-index: 1; display: block; height: var(--a); margin: 0 var(--a); background: var(--desk-shadow); }
:is(.v-desk, .v-decks) .stage-front { position: relative; margin-top: calc(4 * var(--a)); }
/* the teal mug stands on the desk surface at the far edge of the pool */
:is(.v-desk, .v-decks) .stage-mug {
  position: absolute; z-index: 1; right: calc(4 * var(--lc)); bottom: calc(4 * var(--a));
  width: calc(var(--w, 7) * var(--nc)); height: calc(var(--h, 5) * var(--nc));
}
:is(.v-desk, .v-decks) .stage-mug svg { display: block; width: 100%; height: 100%; }
:is(.v-desk, .v-decks) .stage-noggin {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
  padding-left: calc(10 * var(--lc)); margin-bottom: calc(-2 * var(--a));
}
:is(.v-desk, .v-decks) .stage-noggin .noggin { width: calc(var(--w, 22) * var(--nc)); height: calc(var(--h, 20) * var(--nc)); align-self: flex-end; }
:is(.v-desk, .v-decks) .stage-noggin .noggin-line { font-size: 16px; padding-bottom: calc(2 * var(--a)); }

@container stage (min-width: 480px) {
  :is(.v-desk, .v-decks) .stage {
    --lc: 12px; --nc: 6px;
    grid-template-columns: calc(9.5 * var(--lc)) minmax(0, 1fr);
    padding-top: calc(8 * var(--lc));
  }
  :is(.v-desk, .v-decks) .stage-card { grid-column: 2; padding: 28px 32px 30px; }
  :is(.v-desk, .v-decks) .stage-lip { grid-column: 2; }
  :is(.v-desk, .v-decks) .stage-front { grid-column: 1 / -1; margin-top: calc(5 * var(--a)); }
  :is(.v-desk, .v-decks) .stage-noggin { padding-left: calc(10.5 * var(--lc)); gap: 22px; }
  :is(.v-desk, .v-decks) .stage-noggin .noggin-line { font-size: 20px; max-width: 30ch; }
}

/* ---------- paper card parts (Continue, the first-deck card, Add a card) ---------- */

:is(.v-desk, .v-decks) .card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
:is(.v-desk, .v-decks) .card-title {
  font: 700 24px/1.1 var(--text); letter-spacing: -0.01em; color: var(--on-chalk); overflow-wrap: anywhere;
}
:is(.v-desk, .v-decks) .card-head .tag { padding: 5px 8px 6px; font-size: 14px; clip-path: var(--cut); --c: 3px; }
:is(.v-desk, .v-decks) .card-meta { margin-top: 8px; font: 500 15px/1.45 var(--text); color: var(--on-chalk-soft); }
:is(.v-desk, .v-decks) .paper a:not(.btn) { color: var(--on-chalk); font-weight: 600; }
:is(.v-desk, .v-decks) .paper a:not(.btn):hover { color: var(--on-chalk-soft); }

:is(.v-desk, .v-decks) .card-mastery { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 10px; margin-top: 22px; }
:is(.v-desk, .v-decks) .card-mastery .label { font-size: 15px; }
:is(.v-desk, .v-decks) .card-pct { font: 800 24px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--on-chalk); }
:is(.v-desk, .v-decks) .card-bar { grid-column: 1 / -1; }
:is(.v-desk, .v-decks) .card-bar .mastery { display: flex; gap: 4px; }
:is(.v-desk, .v-decks) .card-bar .mastery i { flex: 1; height: 12px; background: var(--pip-off); }
:is(.v-desk, .v-decks) .card-bar .mastery i.on { background: linear-gradient(to top, var(--teal-dark) 0 3px, var(--teal) 3px); }

:is(.v-desk, .v-decks) .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
:is(.v-desk, .v-decks) .modes .btn { padding-left: 12px; padding-right: 12px; }
:is(.v-desk, .v-decks) .modes-why { margin-top: 12px; font: 500 14px/1.45 var(--text); color: var(--on-chalk-soft); }
/* focus on paper: the amber lip colour reads on chalk, and the plate steps up like a hover */
:is(.v-desk, .v-decks) .paper :focus-visible { outline-color: var(--amber-dark); }
:is(.v-desk, .v-decks) .paper .btn-ink:focus-visible { --plate: var(--wood); }
:is(.v-desk, .v-decks) .paper .btn-amber:focus-visible { --plate: var(--amber-hi); }

@container stage (min-width: 480px) {
  :is(.v-desk, .v-decks) .card-title { font-size: 30px; }
  :is(.v-desk, .v-decks) .card-meta { font-size: 16px; }
  :is(.v-desk, .v-decks) .card-mastery { margin-top: 26px; }
  :is(.v-desk, .v-decks) .card-pct { font-size: 26px; }
  :is(.v-desk, .v-decks) .modes { display: flex; flex-wrap: wrap; margin-top: 26px; }
  :is(.v-desk, .v-decks) .modes .btn { padding-left: 16px; padding-right: 16px; }
}

/* ---------- the deck table ---------- */

:is(.v-desk, .v-decks) .table-panel { padding: 4px 0; container-type: inline-size; }
:is(.v-desk, .v-decks) .deck-table th, :is(.v-desk, .v-decks) .deck-table td { padding: 13px 8px; }
:is(.v-desk, .v-decks) .deck-table tr > :first-child { padding-left: 16px; }
:is(.v-desk, .v-decks) .deck-table tr > :last-child { padding-right: 16px; }
:is(.v-desk, .v-decks) .deck-table thead th { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; }
:is(.v-desk, .v-decks) .deck-table tbody th {
  font: 700 15px/1.3 var(--text); color: var(--chalk); text-align: left;
  border-bottom: 2px solid var(--shadow);
}
:is(.v-desk, .v-decks) .deck-table tbody tr:last-child th { border-bottom: 0; }
:is(.v-desk, .v-decks) .deck-table tr.is-flag th { background: var(--flag-row); }
/* the name column takes whatever the nowrap number columns leave, so names wrap
   between words and only a word too long for the whole column breaks */
:is(.v-desk, .v-decks) .deck-table :is(.t-head-name, .t-name) { width: 100%; }
:is(.v-desk, .v-decks) .deck-table .t-name a { overflow-wrap: anywhere; }
:is(.v-desk, .v-decks) .deck-table .t-meta { display: none; }
:is(.v-desk, .v-decks) .deck-table .t-zero { color: var(--chalk-faint); }
:is(.v-desk, .v-decks) .deck-table td.t-mastery { white-space: nowrap; }
:is(.v-desk, .v-decks) .deck-table .t-bar { display: inline-block; margin-right: 8px; }
:is(.v-desk, .v-decks) .deck-table .mastery i { width: 6px; }
:is(.v-desk, .v-decks) .deck-table .t-last { white-space: nowrap; }
:is(.v-desk, .v-decks) .deck-table .tag-amber { font-size: 13px; padding: 4px 7px 5px; clip-path: var(--cut); --c: 3px; }

/* the Desk's side column: tighter cells and a slimmer bar so deck names keep their room */
@container (max-width: 560px) {
  :is(.v-desk, .v-decks) .deck-table th, :is(.v-desk, .v-decks) .deck-table td { padding-left: 6px; padding-right: 6px; }
  :is(.v-desk, .v-decks) .deck-table .mastery i { width: 5px; }
  :is(.v-desk, .v-decks) .deck-table .t-bar { margin-right: 6px; }
}

/* a narrow table (phones, and the Desk's side column below about 1360px wide) keeps
   the name, due and mastered; the rest folds under the name */
@container (max-width: 500px) {
  :is(.v-desk, .v-decks) .deck-table .t-cards, :is(.v-desk, .v-decks) .deck-table .t-last { display: none; }
  :is(.v-desk, .v-decks) .deck-table .t-meta { display: block; margin-top: 4px; font: 500 13px/1.35 var(--text); color: var(--chalk-faint); }
  :is(.v-desk, .v-decks) .deck-table .t-bar { display: none; }
  /* Mastered is now the last column you see, so it takes the row's edge padding */
  :is(.v-desk, .v-decks) .deck-table .t-mastery { padding-right: 16px; }
}

/* ---------- Desk layout ---------- */

.v-desk .desk-main { display: grid; gap: 28px; align-content: start; }
.v-desk .desk-hello { display: grid; gap: 12px; }
.v-desk .desk-side { display: grid; gap: 24px; align-content: start; }
.v-desk .side-head { margin-bottom: 14px; min-height: 44px; }
.v-desk .desk-more { margin-top: 12px; }

/* the one-minute reset: one link, the night window as its picture */
.v-desk .reset {
  position: relative; isolation: isolate; --c: 6px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 12px 20px 12px 12px; color: var(--chalk-dim); text-decoration: none;
}
.v-desk .reset::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: var(--cut); }
.v-desk .reset:hover::before { background: var(--shadow); }
.v-desk .reset-win { display: block; width: 104px; height: 76px; }
.v-desk .reset-win svg { width: 100%; height: 100%; }
.v-desk .reset-text { display: grid; gap: 4px; }
.v-desk .reset-title { font: 700 17px/1.25 var(--text); color: var(--chalk); }
.v-desk .reset-line { font: 500 15px/1.4 var(--text); color: var(--chalk-dim); }
.v-desk .reset-go { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--text); color: var(--teal-light); }
.v-desk .reset:hover .reset-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* streak and goal notices, in Noggin's voice */
.v-desk .desk-notes { display: grid; gap: 12px; }
.v-desk .desk-notes:empty { display: none; }
.v-desk .desk-notes b { white-space: nowrap; }
.v-desk .px-flame { width: 18px; height: 22px; flex: none; }
.v-desk .px-flame .f-out { fill: var(--teal); }
.v-desk .px-flame .f-in { fill: var(--teal-light); }
.v-desk .notice-mark { display: block; width: 24px; height: 24px; flex: none; }
.v-desk .notice-mark svg { width: 100%; height: 100%; }

/* the daily goal */
.v-desk .goal-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.v-desk .goal-ctl label { font: 600 15px/1.2 var(--text); color: var(--chalk); }
.v-desk .goal-done { font: 500 14px/1.3 var(--text); color: var(--chalk-faint); }
:is(.v-desk, .v-decks) .select-wrap { position: relative; display: inline-block; }
:is(.v-desk, .v-decks) .select-wrap .select { width: auto; min-width: 132px; padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; }
:is(.v-desk, .v-decks) .select-wrap .px-down { position: absolute; right: 14px; top: 50%; margin-top: -4px; color: var(--chalk-dim); pointer-events: none; }
:is(.v-desk, .v-decks) .select option { background: var(--ink); color: var(--chalk); }

@media (max-width: 899px) {
  .v-desk .side-head .h-section { font-size: 24px; }
}
@media (max-width: 420px) {
  .v-desk .reset { grid-template-columns: auto minmax(0, 1fr); padding-right: 14px; }
  .v-desk .reset-go { grid-column: 2; }
}