/* ==========================================================================
   Bindi Lesson Desk component library (design system v0.2)
   Loaded after bindi-theme.css. Every selector is namespaced .desk-* so it
   cannot collide with existing classes; nothing here restyles an existing
   selector. Tokens only (--bindi-*). No gradients.

   MARKUP CONTRACT
   ---------------------------------------------------------------------------
   .desk-panel            Surface card. <section class="desk-panel">.
                          Modifiers: .desk-panel--flush (no padding, for tables),
                          .desk-panel--sunken (sunken background).
   .desk-panel-header     Flex row inside a panel: title left, actions right.
                          <div class="desk-panel-header"><h2>Title</h2><a class="btn">Action</a></div>
                          Optional .desk-panel-body for padded content under a flush panel.
   .desk-eyebrow          Small uppercase label. <p class="desk-eyebrow">This week</p>
   .desk-chip             Status pill with dot/ring AND text (never colour alone).
                          <span class="desk-chip desk-chip--ready">Ready</span>
                          Variants: --ready --planning --draft --failed --taught --notstarted
                          (--notstarted shows a hollow ring). --plain hides the dot.
   .desk-subject          Subject marker plus label.
                          Mark:  <span class="desk-subject desk-subject--science"><span class="desk-subject-mark" aria-hidden="true"></span>Science</span>
                          Rule:  add .desk-subject--rule to any block; it gets a 3px left rule
                                 in the subject colour: <div class="desk-subject desk-subject--rule desk-subject--maths">
                          Subjects: science english maths hass arts hpe tech (alias technologies); none = neutral.
                          Also honours data-subject="science" etc.
   .desk-meter            Progress bar. <div class="desk-meter" role="progressbar" aria-valuenow="60"
                          aria-valuemin="0" aria-valuemax="100" aria-label="Ready to teach"><span style="width:60%"></span></div>
                          Add .desk-meter--full when complete (turns green).
   .desk-table-wrap       Scroll/sticky container for a table (optional max-height via
                          style or .desk-table-wrap--tall).
   .desk-table            Dense table, sticky header inside .desk-table-wrap. Below 600px each row
                          becomes a stacked record: give each <td data-label="Status"> a label.
                          Use <td class="desk-table-primary"> for the title cell,
                          .desk-num for tabular right-aligned numbers.
   .desk-segmented        Native radio group styled as segmented control.
                          <div class="desk-segmented" role="radiogroup" aria-label="View">
                            <label><input type="radio" name="v" checked><span>Week</span></label> ... </div>
   .desk-stepper          Four-stage underline stepper (ol or div). Children .desk-step (a, button or li)
                          with aria-current="step" on the active one. .desk-step--complete marks done.
                          <ol class="desk-stepper"><li><a class="desk-step" aria-current="step" href="#">
                            <span class="desk-step-num">1</span><span class="desk-step-text"><b>Plan</b><small>Intention</small></span></a></li>...
                          Below 600px: 2x2 grid.
   .desk-intention        Turquoise rule box for the learning intention.
                          <div class="desk-intention"><p class="desk-eyebrow">Learning intention</p><p>...</p></div>
   .desk-list             Plain divided list. <ul class="desk-list"><li>...</li></ul>
                          Add .desk-list--card for a bordered rounded surface.
   .desk-empty            Empty state. <div class="desk-empty"><h3>Title</h3><p>Help text</p><a class="btn">Action</a></div>
   .desk-btn              Not provided: existing .btn covers every variant needed.
   Utilities: .desk-stack (vertical rhythm), .desk-muted, .desk-num (tabular numerals).
   ========================================================================== */

/* ---------- Utilities ---------- */
.desk-num { font-variant-numeric: tabular-nums; }
.desk-muted { color: var(--bindi-color-text-muted); }
.desk-stack { display: grid; gap: var(--bindi-space-4); }

/* ---------- Eyebrow ---------- */
.desk-eyebrow {
  margin: 0;
  font-size: var(--bindi-font-size-2xs);
  font-weight: var(--bindi-font-weight-bold);
  letter-spacing: var(--bindi-font-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--bindi-color-text-muted);
  line-height: var(--bindi-font-line-height-ui);
}

/* ---------- Panel ---------- */
.desk-panel {
  background: var(--bindi-color-bg-surface);
  border: 1px solid var(--bindi-color-border-subtle);
  border-radius: var(--bindi-radius-lg);
  box-shadow: var(--bindi-shadow-panel);
  padding: var(--bindi-space-5);
  min-width: 0;
}
.desk-panel--flush { padding: 0; }
.desk-panel--sunken { background: var(--bindi-color-bg-sunken); box-shadow: none; }
.desk-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bindi-space-2) var(--bindi-space-3);
  margin-bottom: var(--bindi-space-3);
}
.desk-panel--flush > .desk-panel-header {
  margin: 0;
  padding: var(--bindi-space-4) var(--bindi-space-5);
  border-bottom: 1px solid var(--bindi-color-border-subtle);
}
.desk-panel-header > :is(h1, h2, h3, h4) {
  margin: 0;
  font-size: var(--bindi-font-size-md);
  font-weight: var(--bindi-font-weight-bold);
  color: var(--bindi-color-text-strong);
  line-height: var(--bindi-font-line-height-snug);
}
.desk-panel-body { padding: var(--bindi-space-5); }

/* ---------- Status chip (dot or ring plus text) ---------- */
.desk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--bindi-radius-pill);
  font-size: var(--bindi-font-size-xs);
  font-weight: var(--bindi-font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  background: var(--bindi-color-bg-sunken);
  color: var(--bindi-color-text-default);
}
.desk-chip::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.desk-chip--plain::before { display: none; }
.desk-chip--ready { background: var(--bindi-color-status-success-bg); color: var(--bindi-color-status-success-text); }
.desk-chip--planning { background: var(--bindi-color-status-info-bg); color: var(--bindi-color-status-info-text); }
.desk-chip--draft { background: var(--bindi-color-status-warning-bg); color: var(--bindi-color-status-warning-text); }
.desk-chip--failed { background: var(--bindi-color-status-danger-bg); color: var(--bindi-color-status-danger-text); }
.desk-chip--taught { background: var(--bindi-color-bg-sunken); color: var(--bindi-color-text-muted); }
.desk-chip--notstarted {
  background: transparent;
  color: var(--bindi-color-text-muted);
  box-shadow: inset 0 0 0 1px var(--bindi-color-border-default);
}
.desk-chip--notstarted::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- Subject marks and rules ---------- */
.desk-subject {
  --desk-subject: var(--bindi-color-border-default);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.desk-subject--science, .desk-subject[data-subject="science"] { --desk-subject: var(--bindi-color-brand-turquoise); }
.desk-subject--english, .desk-subject[data-subject="english"] { --desk-subject: var(--bindi-color-brand-pink); }
.desk-subject--maths, .desk-subject[data-subject="maths"] { --desk-subject: var(--bindi-color-brand-yellow); }
.desk-subject--hass, .desk-subject[data-subject="hass"] { --desk-subject: var(--bindi-color-brand-coral); }
.desk-subject--arts, .desk-subject[data-subject="arts"] { --desk-subject: var(--bindi-color-brand-purple); }
.desk-subject--hpe, .desk-subject[data-subject="hpe"] { --desk-subject: var(--bindi-color-brand-cyan); }
.desk-subject--tech, .desk-subject--technologies,
.desk-subject[data-subject="tech"], .desk-subject[data-subject="technologies"] { --desk-subject: var(--bindi-color-brand-blue); }
.desk-subject-mark {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--desk-subject);
  /* faint edge so the yellow mark stays visible on white */
  box-shadow: 0 0 0 1px rgba(26, 32, 44, 0.12);
}
.desk-subject--rule {
  display: block;
  border-left: 3px solid var(--desk-subject);
  padding-left: var(--bindi-space-3);
}

/* ---------- Meter ---------- */
.desk-meter {
  height: 6px;
  border-radius: var(--bindi-radius-pill);
  background: var(--bindi-color-bg-sunken);
  overflow: hidden;
}
.desk-meter > span {
  display: block;
  height: 100%;
  width: 0;
  max-width: 100%;
  border-radius: inherit;
  background: var(--bindi-color-action-primary-bg);
  transition: width var(--bindi-motion-duration-slow) var(--bindi-motion-easing-out);
}
.desk-meter--full > span { background: var(--bindi-color-status-success-text); }

/* ---------- Dense table ---------- */
.desk-table-wrap {
  background: var(--bindi-color-bg-surface);
  border: 1px solid var(--bindi-color-border-subtle);
  border-radius: var(--bindi-radius-lg);
  overflow-x: auto;
  max-width: 100%;
}
.desk-table-wrap--tall { max-height: 70vh; overflow-y: auto; }
.desk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--bindi-font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--bindi-color-text-default);
}
.desk-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bindi-color-bg-surface);
  text-align: left;
  font-size: var(--bindi-font-size-2xs);
  font-weight: var(--bindi-font-weight-bold);
  letter-spacing: var(--bindi-font-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--bindi-color-text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--bindi-color-border-default);
  white-space: nowrap;
}
.desk-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bindi-color-border-subtle);
  vertical-align: middle;
}
.desk-table tbody tr:last-child td { border-bottom: 0; }
.desk-table tbody tr:hover td { background: var(--bindi-color-bg-canvas); }
.desk-table .desk-table-primary { color: var(--bindi-color-text-strong); font-weight: var(--bindi-font-weight-semibold); }
.desk-table .desk-num { text-align: right; }

@media (max-width: 599.98px) {
  .desk-table-wrap { overflow-x: visible; border: 0; background: transparent; }
  .desk-table, .desk-table tbody, .desk-table tr, .desk-table td { display: block; width: 100%; }
  .desk-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .desk-table tbody tr {
    background: var(--bindi-color-bg-surface);
    border: 1px solid var(--bindi-color-border-subtle);
    border-radius: var(--bindi-radius-lg);
    padding: var(--bindi-space-2) var(--bindi-space-3);
    margin-bottom: var(--bindi-space-3);
  }
  .desk-table td,
  .desk-table .desk-num {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bindi-space-3);
    padding: 6px 0;
    border-bottom: 0;
    text-align: right;
    min-width: 0;
  }
  .desk-table td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--bindi-font-size-2xs);
    font-weight: var(--bindi-font-weight-bold);
    letter-spacing: var(--bindi-font-letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--bindi-color-text-muted);
    text-align: left;
  }
  .desk-table td.desk-table-primary { display: block; text-align: left; padding-bottom: 8px; }
  .desk-table tbody tr:hover td { background: transparent; }
}

/* ---------- Segmented control (native radios) ---------- */
.desk-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--bindi-color-bg-sunken);
  border-radius: var(--bindi-radius-control);
  max-width: 100%;
}
.desk-segmented > label { position: relative; margin: 0; }
.desk-segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.desk-segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--bindi-radius-md);
  font-size: var(--bindi-font-size-sm);
  font-weight: var(--bindi-font-weight-semibold);
  color: var(--bindi-color-text-default);
  white-space: nowrap;
}
.desk-segmented input:checked + span {
  background: var(--bindi-color-bg-surface);
  color: var(--bindi-color-text-strong);
  box-shadow: var(--bindi-shadow-panel), 0 0 0 1px var(--bindi-color-border-subtle);
}
.desk-segmented input:focus-visible + span {
  outline: var(--bindi-size-focus-ring-width) solid var(--bindi-color-border-focus);
  outline-offset: 1px;
}
@media (max-width: 599.98px) {
  .desk-segmented span { min-height: 44px; }
}

/* ---------- Stepper (4 stages, underline) ---------- */
.desk-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: var(--bindi-space-6) 0;
  padding: 0;
  border-bottom: 1px solid var(--bindi-color-border-default);
}
.desk-stepper > li { margin: 0; min-width: 0; }
.desk-step {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 10px 4px 12px;
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--bindi-color-text-muted);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.desk-step:hover { color: var(--bindi-color-text-strong); text-decoration: none; }
.desk-step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--bindi-font-size-xs);
  font-weight: var(--bindi-font-weight-bold);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.desk-step-text { min-width: 0; }
.desk-step-text b {
  display: block;
  font-size: var(--bindi-font-size-sm);
  font-weight: var(--bindi-font-weight-semibold);
  color: inherit;
}
.desk-step-text small {
  display: block;
  font-size: var(--bindi-font-size-xs);
  color: var(--bindi-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desk-step[aria-current] { color: var(--bindi-color-text-strong); border-bottom-color: var(--bindi-color-action-primary-bg); }
.desk-step[aria-current] .desk-step-num { background: var(--bindi-color-action-primary-bg); color: var(--bindi-color-action-primary-text); box-shadow: none; }
.desk-step--complete .desk-step-num { background: var(--bindi-color-status-success-bg); color: var(--bindi-color-status-success-text); box-shadow: none; }
@media (max-width: 599.98px) {
  .desk-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bindi-space-1); border-bottom: 0; }
}

/* ---------- Learning intention ---------- */
.desk-intention {
  border-left: 3px solid var(--bindi-color-brand-turquoise);
  background: var(--bindi-color-turquoise-50);
  border-radius: 0 var(--bindi-radius-md) var(--bindi-radius-md) 0;
  padding: var(--bindi-space-3) var(--bindi-space-4);
  color: var(--bindi-color-text-strong);
  font-size: var(--bindi-font-size-md);
  line-height: var(--bindi-font-line-height-normal);
}
.desk-intention > .desk-eyebrow { color: var(--bindi-color-turquoise-700); margin-bottom: 4px; }
.desk-intention > :last-child { margin-bottom: 0; }

/* ---------- List ---------- */
.desk-list { list-style: none; margin: 0; padding: 0; }
.desk-list > li {
  padding: var(--bindi-space-3) 0;
  border-top: 1px solid var(--bindi-color-border-subtle);
  min-width: 0;
}
.desk-list > li:first-child { border-top: 0; }
.desk-list--card {
  background: var(--bindi-color-bg-surface);
  border: 1px solid var(--bindi-color-border-subtle);
  border-radius: var(--bindi-radius-lg);
}
.desk-list--card > li { padding: var(--bindi-space-3) var(--bindi-space-4); }

/* ---------- Empty state ---------- */
.desk-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--bindi-space-2);
  padding: var(--bindi-space-10) var(--bindi-space-5);
  color: var(--bindi-color-text-default);
}
.desk-empty img { width: 52px; height: auto; }
.desk-empty h2, .desk-empty h3 {
  margin: 0;
  font-size: var(--bindi-font-size-md);
  font-weight: var(--bindi-font-weight-bold);
  color: var(--bindi-color-text-strong);
}
.desk-empty p { margin: 0; max-width: 44ch; font-size: var(--bindi-font-size-sm); color: var(--bindi-color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .desk-meter > span { transition: none; }
}