/* ========================================================================================================
   The School directory (directory.html, shared/js/directory.js), in the Classlings look: option B, a side list
   (the teacher, 14 October 2026). The page's shape, the side list, the panel, the question boxes and the small
   parts (people, roles, notices) are in shared/css/classlings-page.css; this is what is only the directory's:
   the rows of Staff, Pupils and Classes, and School's settings.
   Rows are Settings' rows: a name and a line, with the control at the end. Colour always comes with a word.
   ======================================================================================================== */

/* ------------------------------------------------------------------ Staff */
.dr-waiting { margin: 2px 0 12px; padding: 10px 14px 4px; background: var(--gold-tint); border: 2px solid var(--gold-deep); border-radius: var(--r-m); }
.dr-waiting h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dr-waiting h3 svg { width: 24px; height: 24px; }
.dr-wrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 64px; padding: 4px 0; border-top: 2px solid rgba(201, 138, 18, 0.25); }
.dr-wrow:first-child { border-top: 0; }
.dr-wrow .who { flex: 1 1 260px; }
.dr-wrow .seen { flex: none; }
.dr-wrow .pg-acts { flex: none; flex-wrap: wrap; }

.dr-rows { display: grid; }
.dr-rows > li { border-top: 2px solid var(--wash-2); }
.dr-rows > li:first-child { border-top: 0; }
.dr-row { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(120px, 1fr) 190px 150px; align-items: center; gap: 14px; min-height: 72px; padding: 8px 0; }
.dr-rows.is-plain .dr-row { grid-template-columns: minmax(240px, 1.5fr) minmax(120px, 1fr) 190px; }
.dr-mid { display: grid; justify-items: start; min-width: 0; }
.dr-role { min-width: 0; }
.dr-role .cla-field { min-height: 48px; }
.dr-role .role { justify-self: start; }
.dr-group { margin: 20px 0 2px; }
.dr-row.is-invited .who-name { color: var(--ink-2); }

/* ------------------------------------------------------------------ Pupils: grouped by class, a few to a row */
.dr-filter { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 20px 0 28px; }
.dr-filter .pick { max-width: 100%; }
.dr-filter .pick > button { min-height: 44px; padding: 0 12px; }
.dr-notice { margin-bottom: 4px; }
.dr-class { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 8px; }
.dr-class b { font: 700 24px / 1.2 var(--display); }
.dr-class .pg-count { margin-left: auto; }
.dr-pupils { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.dr-pupil { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 12px 6px 8px; background: var(--page); border: 2px solid var(--wash-2); border-radius: var(--r-m); }
.dr-pupil .who-text { flex: 1 1 auto; }
.dr-pupil .who-name { font-size: 18px; }
.dr-pupil .who-mail { font-size: 15px; }
.tag.is-double { background: var(--gold-tint); border-color: var(--gold-deep); }

/* ------------------------------------------------------------------ Classes */
.dr-year { margin: 16px 0 4px; font: 700 22px / 1.2 var(--display); }
.pg-scroll > .dr-year:first-child { margin-top: 4px; }
/* Every class's row keeps room for the widest button (Share with school, 216 px) whether it has one or not, so
   the owners line up down the list (the teacher, 15 October: the row with Stop sharing jutted out). */
.dr-crow { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr) minmax(216px, auto); align-items: center; gap: 16px; min-height: 68px; padding: 6px 0; }
.dr-cname { display: grid; min-width: 0; }
.dr-cname b { font: 600 20px / 1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-cname span { font: 400 16px / 1.3 var(--body); color: var(--ink-2); }
.dr-cowner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dr-cowner .who-pic { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.dr-cowner .who-name { font-size: 17px; }

/* ------------------------------------------------------------------ School: Settings' rows */
.dr-set { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 84px; padding: 14px 0; border-top: 2px solid var(--wash-2); }
.pg-scroll > .dr-set:first-child { border-top: 0; padding-top: 4px; }
.dr-set.is-domains { align-items: start; }
.dr-set-words { display: grid; gap: 2px; min-width: 0; }
.dr-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.dr-set.is-domains .dr-ctl { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.dr-set.is-you .dr-ctl { flex-wrap: wrap; justify-content: flex-end; }
.dr-set.is-privacy .dr-ctl { flex-wrap: wrap; }
.dr-set.is-privacy .cla-btn { text-decoration: none; }
.dr-you-note { flex: 1 1 100%; text-align: right; }
.dr-name { font: 600 22px / 1.25 var(--display); text-align: right; overflow-wrap: anywhere; }
.dr-domains { display: grid; gap: 6px; }
.dr-domains li { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 8px 4px 16px; background: var(--wash); border-radius: var(--r-m); }
.dr-domains b { flex: 1 1 auto; min-width: 0; font: 600 20px / 1.2 var(--display); overflow: hidden; text-overflow: ellipsis; }
.dr-domains .cla-btn.is-small { margin-bottom: var(--ctl-small-lift); flex: none; }
.dr-add { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dr-add .cla-field { flex: 1 1 auto; }
.dr-add .cla-btn { flex: none; margin-bottom: var(--ctl-small-lift); }
.dr-set.is-domains .ask-hint { margin-top: -4px; }

/* ------------------------------------------------------------------ before there is a school */
.dr-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.dr-start.is-one { grid-template-columns: minmax(0, 640px); }
.dr-card { display: grid; gap: 8px; padding: 16px 18px 18px; background: var(--wash); border-radius: var(--r-m); }
.dr-card .dr-add { flex-wrap: wrap; margin-top: 6px; }
.dr-card .dr-add .cla-field { flex: 1 1 220px; }
.dr-schools { display: grid; gap: 8px; margin-top: 4px; }
.dr-schools li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 6px 8px 6px 14px; background: var(--page); border-radius: var(--r-m); }
.dr-schools .cla-btn { flex: none; margin-bottom: var(--ctl-small-lift); }
.dr-try { margin-top: 12px; }

/* ------------------------------------------------------------------ a smaller window */
@media (max-width: 1250px) {
    .dr-row { grid-template-columns: minmax(220px, 1.4fr) minmax(100px, 1fr) 176px 136px; }
    .dr-rows.is-plain .dr-row { grid-template-columns: minmax(220px, 1.4fr) minmax(100px, 1fr) 176px; }
}

@media (max-width: 899px) {
    /* The panel's rows stack: who, then what they are and what can be done. */
    .dr-row, .dr-rows.is-plain .dr-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; min-height: 0; padding: 10px 0; }
    .dr-row .who { grid-column: 1 / -1; }
    .dr-mid { grid-column: 1 / -1; grid-row: 2; }
    .dr-mid:empty { display: none; }
    .dr-role { grid-column: 1; grid-row: 3; }
    .dr-role:empty { display: none; }
    .dr-row .pg-acts { grid-column: 2; grid-row: 3; }
    .dr-row.is-invited .pg-acts { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
    .dr-filter { padding: 10px 14px 0 16px; }
    .dr-pupils { grid-template-columns: minmax(0, 1fr); }
    .dr-class b { font-size: 22px; }
    .dr-crow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; }
    .dr-cowner { grid-column: 1 / -1; grid-row: 2; }
    .dr-crow .pg-acts { grid-column: 2; grid-row: 1; }
    .dr-set { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
    .dr-ctl { justify-content: flex-start; }
    .dr-name { text-align: left; }
    .dr-start { grid-template-columns: minmax(0, 1fr); }
    .dr-add { flex-wrap: wrap; }
    .dr-domains li { flex-wrap: wrap; padding: 8px 8px 4px 16px; }
    .dr-domains b { flex: 1 1 100%; }
    .dr-domains .cla-btn.is-small { margin-bottom: var(--ctl-small-lift); }
    .dr-add .cla-field { flex: 1 1 200px; }
    .dr-wrow .pg-acts { flex: 1 1 100%; justify-content: flex-start; }
}