/* ==========================================================================
   DIGISCHOOL: the module catalogue page.

   Loaded on /modules/ only, after lp.css (which carries the heads, buttons,
   the three-device composition and the tabs' rise). Everything here is
   prefixed .md-. Named catalogue.css, not modules.css: that name belongs to
   the signed-in application's sheet, and the marketing shell resolves a page
   sheet by name, so the two must never collide.

   Three levels run through the page, each with one colour, used the same way
   in the role panels, the strip and the key:
     work  the accent      creates, edits or approves
     see   the info tone   reads only
     off   the border      not reachable
   ========================================================================== */

.md {
  --md-work: var(--ec-accent);
  --md-see: var(--ec-info);
  --md-off: var(--ec-border);
}

[data-theme='dark'] .md { --md-see: var(--ec-primary-300); }

/* The five verbs every grant is made of, as pills drifting over the
   screens. Drawings only. */
.md-verb {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 14px 8px 10px;
  font-size: clamp(0.75rem, 0.6rem + 0.35vw, 0.9375rem);
  font-weight: 700;
  color: var(--ec-text);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
  box-shadow: 0 16px 30px -16px rgb(6 32 46 / 45%);
}

.md-verb svg { color: var(--ec-accent); }

.md-verb--0 { top: 4%; left: 4%; }
.md-verb--1 { top: 40%; right: -1%; }
.md-verb--2 { bottom: 4%; left: 42%; }
.md-verb--2 svg { color: var(--ec-success); }

@media (prefers-reduced-motion: no-preference) {
  .md-verb { animation: lp-drift 7s ease-in-out infinite alternate; }
  .md-verb--1 { animation-duration: 8s; animation-delay: -3s; }
  .md-verb--2 { animation-duration: 6.5s; animation-delay: -1.5s; }
}

/* --- The roles -------------------------------------------------------------- */

.md-roles {
  padding-block: clamp(4rem, 9vw, 6.5rem);
  background: var(--ec-surface);
}

.md-explorer {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block-start: var(--ec-space-8);
}

@media (min-width: 1100px) {
  .md-explorer { grid-template-columns: minmax(250px, 0.3fr) minmax(0, 1fr); align-items: start; }
  .md-picker { position: sticky; top: var(--ec-space-6); }
}

/* The picker: three labelled groups of role buttons. On a narrow screen
   each group is a row that wraps. */
.md-picker { display: grid; gap: var(--ec-space-5); }

.md-picker__group { display: flex; flex-wrap: wrap; gap: var(--ec-space-2); }

@media (min-width: 1100px) {
  .md-picker__group { flex-direction: column; flex-wrap: nowrap; }
}

.md-picker__label {
  flex-basis: 100%;
  margin-block-end: 2px;
  font-size: var(--ec-label-sm);
  font-weight: 700;
  color: var(--ec-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-pick {
  display: inline-flex;
  gap: var(--ec-space-3);
  align-items: center;
  min-height: 48px;
  padding: 6px 14px 6px 6px;
  font: inherit;
  font-weight: 600;
  color: var(--ec-text);
  text-align: start;
  cursor: pointer;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--lp-ease);
}

.md-pick:hover { border-color: var(--ec-accent); transform: translateX(2px); }
.md-pick:active { transform: scale(0.98); }
.md-pick:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }

.md-pick__ico {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: 10px;
}

.md-pick__name { flex: 1; }

.md-pick[aria-selected='true'] {
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  border-color: var(--ec-accent);
}

.md-pick[aria-selected='true'] .md-pick__ico { color: var(--ec-accent); background: var(--ec-paper-0); }

/* The panels. Tabbed, only the chosen one shows; without the script they
   all show, stacked. */
.md-panels { display: grid; gap: var(--ec-space-6); min-width: 0; }

.md-explorer.is-tabbed .md-panel:not(.is-on) { display: none; }

.md-panel {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: clamp(20px, 2.5vw, 28px);
}

@media (prefers-reduced-motion: no-preference) {
  .md-explorer.is-tabbed .md-panel.is-on { animation: md-in 0.5s var(--lp-ease) both; }
}

@keyframes md-in { from { opacity: 0; translate: 0 12px; } }

.md-panel__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ec-space-4);
  align-items: start;
}

@media (min-width: 700px) {
  .md-panel__head { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.md-panel__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  border-radius: 16px;
}

.md-panel__ico svg { width: 26px; height: 26px; }

.md-panel__title {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ec-text);
}

.md-panel__body { max-width: 60ch; margin: 6px 0 0; line-height: 1.55; color: var(--ec-text-muted); }

.md-portal {
  grid-column: 2;
  justify-self: start;
  padding: 6px 12px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: var(--ec-radius-full);
}

@media (min-width: 700px) {
  .md-portal { grid-column: auto; }
}

/* The three counts, each in its level's colour. */
.md-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ec-space-3);
  margin: var(--ec-space-6) 0 var(--ec-space-4);
}

.md-tally__item {
  padding: var(--ec-space-3) var(--ec-space-4);
  background: var(--ec-surface);
  border-inline-start: 4px solid var(--md-lvl);
  border-radius: 12px;
}

.md-tally__item--work { --md-lvl: var(--md-work); }
.md-tally__item--see  { --md-lvl: var(--md-see); }
.md-tally__item--off  { --md-lvl: var(--md-off); }

.md-tally dt { font-size: var(--ec-text-sm); color: var(--ec-text-muted); }

.md-tally dd {
  margin: 2px 0 0;
  font-family: var(--ec-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ec-text);
}

/* The role's shape: one cell per module, catalogue order. The cells fill in
   left to right when the panel opens. */
.md-strip {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: clamp(1px, 0.3vw, 3px);
  height: 14px;
  margin-block-end: var(--ec-space-6);
}

.md-strip__cell { background: var(--md-off); border-radius: 3px; }
.md-strip__cell--work { background: var(--md-work); }
.md-strip__cell--see  { background: var(--md-see); }

@media (prefers-reduced-motion: no-preference) {
  .md-explorer.is-tabbed .md-panel.is-on .md-strip__cell {
    animation: md-cell 0.4s var(--lp-ease) calc(var(--i) * 18ms) both;
  }
}

@keyframes md-cell { from { opacity: 0; transform: scaleY(0.2); } }

/* Every module, by area. */
.md-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr));
  gap: var(--ec-space-5);
}

.md-area__title {
  display: flex;
  gap: var(--ec-space-2);
  align-items: center;
  margin: 0 0 var(--ec-space-3);
  font-size: var(--ec-text-sm);
  font-weight: 700;
  color: var(--ec-text);
}

.md-area__title svg { color: var(--ec-text-muted); }

.md-mods { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.md-mod {
  display: flex;
  gap: var(--ec-space-2);
  align-items: center;
  padding: 5px 10px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: 10px;
}

.md-mod svg { flex-shrink: 0; }

.md-mod--work { color: var(--md-work); background: var(--ec-accent-soft); border-color: color-mix(in srgb, var(--md-work) 30%, transparent); }
.md-mod--see  { color: var(--ec-text); background: var(--ec-surface); border-color: var(--ec-border); }
.md-mod--see svg { color: var(--md-see); }
.md-mod--off  { color: var(--ec-text-subtle); font-weight: 500; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ec-text-subtle) 50%, transparent); }

/* The key under the explorer and the table. */
.md-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-2) var(--ec-space-6);
  margin: var(--ec-space-6) 0 0;
  padding: 0;
  font-size: var(--ec-text-sm);
  color: var(--ec-text-muted);
  list-style: none;
}

.md-legend li { display: inline-flex; gap: var(--ec-space-2); align-items: center; }
.md-legend .md-mod { text-decoration: none; }
.md-legend b { color: var(--ec-text); }

/* --- The map ------------------------------------------------------------------ */

.md-map { padding-block: clamp(4rem, 9vw, 6.5rem); }

.md-note {
  display: flex;
  gap: var(--ec-space-3);
  max-width: 72ch;
  margin: var(--ec-space-6) 0 var(--ec-space-8);
  padding: var(--ec-space-4);
  font-size: var(--ec-text-sm);
  line-height: 1.55;
  color: var(--ec-text-muted);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 16px;
}

.md-note svg { flex-shrink: 0; margin-block-start: 1px; color: var(--ec-accent); }

/* Columns rather than a grid: the trees are very different heights, and a
   grid row is as tall as its tallest tree. */
.md-trees {
  columns: 3 300px;
  column-gap: var(--ec-space-8);
}

.md-trees .md-tree { margin-block-end: var(--ec-space-8); break-inside: avoid; }

/* A classic indented tree: each child hangs off a vertical rule from its
   parent, with an elbow into its own node. */
.md-tree,
.md-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-tree ul { margin-inline-start: 18px; padding-inline-start: 18px; border-inline-start: 2px solid var(--ec-border); }

.md-tree li { position: relative; padding-block: 6px; }

.md-tree ul > li::before {
  position: absolute;
  top: 50%;
  inset-inline-start: -18px;
  width: 14px;
  height: 2px;
  content: '';
  background: var(--ec-border);
}

.md-tree ul > li:has(> ul)::before { top: 25px; }

.md-node {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--ec-space-4);
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-text);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
}

.md-tree > li > .md-node {
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  border-color: var(--ec-accent);
}


@media print {
  .md-picker { display: none; }
  .md-explorer.is-tabbed .md-panel:not(.is-on) { display: block; }
}