/* gallery: cohort's noticeboard (Avi, 2026-11-09: "exactly the same style"),
   copied with its own class prefix so the two apps never share a class
   (methodology 7). Cork, pins, Polaroids for the cards and sticky notes for
   comments. Light only, every colour set explicitly. */

:root {
  --cork: #c4955f;
  --cork-dark: #a87a46;
  --wood: #5b3c22;
  --wood-dark: #3f2915;
  --paper: #ffffff;
  --ink: #2b2118;
  --ink-soft: #6b5643;
  --note: #ffe97a;
  --note-pink: #ffd0dc;
  --red: #c8102e;
  --blue: #1458b8;
  --green: #2f8a1f;
  --f-display: "Karantina", "Assistant", Arial, sans-serif;
  --f-body: "Assistant", "Rubik", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.gl {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  background-color: var(--cork);
  background-image:
    radial-gradient(rgba(90, 55, 25, .32) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 235, 200, .22) 1px, transparent 1.6px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 4px;
}
a { color: var(--blue); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---- the frame: the menu and the disclaimer stay at the top ---- */
.gl-top { position: sticky; top: 0; z-index: 20; }
.gl-bar {
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: var(--wood); color: #fbefdc; border-bottom: 5px solid var(--wood-dark);
}
.gl-brand { font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: #fff8ec; text-decoration: none; }
.gl-nav { display: flex; gap: 4px 16px; flex-wrap: wrap; order: 3; width: 100%; }
.gl-nav a { color: #f1dfc3; text-decoration: none; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.gl-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--note); }
.gl-account { margin-inline-start: auto; }
.gl-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; min-height: 40px; }
.gl-bar .gl-link { color: #f1dfc3; }
.gl-badge { display: inline-block; min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--red); color: #fff; font-size: .78rem; text-align: center; line-height: 1.5; }
.gl-badge-quiet { background: var(--ink-soft); }
@media (min-width: 760px) {
  .gl-nav { order: 0; width: auto; }
}

.gl-main { max-width: 1180px; margin: 0 auto; padding-inline: 16px; padding-block: 22px 60px; }
.gl-flash p { margin: 0 0 14px; padding: 10px 14px; background: var(--note); box-shadow: 0 3px 6px rgba(0,0,0,.2); display: inline-block; }

/* ---- type ---- */
.gl-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .95; margin: 0; color: #fff8ec; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gl-h1 { font-family: var(--f-display); font-weight: 700; font-size: 2.3rem; line-height: 1; margin: 0 0 10px; text-wrap: balance; }
.gl-h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.8rem; line-height: 1; margin: 0 0 8px; }
.gl-muted { color: var(--ink-soft); }
.gl-small { font-size: .85rem; }
.gl-intro { color: #fff8ec; max-width: 62ch; margin: 0 0 18px; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.gl-intro b { color: #fff; }
.gl-error { color: var(--red); display: block; }
.gl-back { margin: 0 0 12px; }
.gl-back a { color: #fff8ec; font-weight: 600; }
.gl-url { word-break: break-all; color: var(--ink-soft); margin: 8px 0 0; }

/* ---- buttons ---- */
.gl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 3px;
  background: var(--note); color: var(--ink); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}
.gl-btn:hover { filter: brightness(1.04); }
.gl-btn-quiet { background: var(--paper); }
.gl-btn-danger { background: var(--red); color: #fff; }
.gl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }

/* ---- paper and pins ---- */
.gl-paper { position: relative; background: var(--paper); padding: 22px 20px 20px; box-shadow: 0 6px 14px rgba(0, 0, 0, .28); margin-bottom: 18px; }
.gl-pin {
  position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #ff8c8c, var(--red) 70%); box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.gl-card:nth-child(3n+2) .gl-pin { background: radial-gradient(circle at 35% 35%, #8fc3ff, var(--blue) 70%); }
.gl-card:nth-child(3n) .gl-pin { background: radial-gradient(circle at 35% 35%, #b4f0a0, var(--green) 70%); }

.gl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.gl-chips a { background: rgba(255,255,255,.85); color: var(--ink); text-decoration: none; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.gl-chips a[aria-current="true"] { background: var(--note); }

/* ---- the board: Polaroids ---- */
.gl-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 30px 24px; }
.gl-card {
  position: relative; display: grid; gap: 10px; align-content: start; min-width: 0;
  background: var(--paper); padding: 12px 12px 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
  color: var(--ink); text-decoration: none;
}
.gl-card:nth-child(4n+1) { transform: rotate(1.2deg); }
.gl-card:nth-child(4n+2) { transform: rotate(-1deg); }
.gl-card:nth-child(4n+3) { transform: rotate(.6deg); }
.gl-card:nth-child(4n) { transform: rotate(-.5deg); }
@media (prefers-reduced-motion: no-preference) {
  .gl-card { transition: transform .18s ease, box-shadow .18s ease; }
  .gl-card:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
}
.gl-shot { display: block; aspect-ratio: 16 / 10; max-width: 100%; background: #efe7da; overflow: hidden; }
.gl-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gl-shot-empty { display: grid; place-items: center; height: 100%; color: var(--ink-soft); font-size: .9rem; padding: 10px; text-align: center; }
.gl-card-text { display: grid; gap: 2px; min-width: 0; }
.gl-card-title { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.gl-card-by { font-size: .88rem; color: var(--ink-soft); }
.gl-card-acts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gl-act {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; min-width: 40px; padding: 0 8px;
  background: none; border: 0; font: inherit; font-size: .9rem; color: var(--ink-soft); cursor: pointer; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.gl-act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gl-like[aria-pressed="true"] { color: var(--red); }
.gl-like[aria-pressed="true"] svg { fill: var(--red); stroke: var(--red); }
.gl-star[aria-pressed="true"] { color: #b88a00; }
.gl-star[aria-pressed="true"] svg { fill: #f2c200; stroke: #b88a00; }
.gl-visit { margin-inline-start: auto; font-size: .88rem; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.gl-empty { max-width: 640px; }

/* ---- one site ---- */
.gl-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 30px; }
.gl-detail .gl-card { transform: rotate(-.6deg); }
@media (max-width: 760px) { .gl-detail { grid-template-columns: 1fr; } }

/* ---- comments: sticky notes ---- */
.gl-thread { max-width: 760px; display: grid; gap: 14px; }
.gl-thread > .gl-h2 { color: #fff8ec; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.gl-thread > .gl-muted { color: #fff8ec; }
.gl-note { background: var(--note); padding: 12px 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, .22); scroll-margin-top: 150px; }
.gl-note:nth-of-type(even) { background: var(--note-pink); transform: rotate(-.4deg); }
.gl-note:target { outline: 3px solid var(--blue); }
.gl-note.is-deleted { background: rgba(255, 255, 255, .7); }
.gl-note-head { margin-bottom: 4px; }
.gl-note-body { margin: 0; overflow-wrap: anywhere; }
.gl-note-acts { display: flex; gap: 16px; margin-top: 4px; }
.gl-note-acts .gl-link { color: var(--ink-soft); font-size: .9rem; }
.gl-quote { display: block; background: rgba(255, 255, 255, .6); border-inline-start: 3px solid var(--ink-soft); padding: 4px 10px; margin-bottom: 8px; font-size: .88rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.gl-quote b { display: block; font-size: .8rem; color: var(--ink-soft); }
.gl-note-new { background: var(--paper); transform: none !important; }
.gl-replying { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f5efe2; padding: 4px 10px; margin-bottom: 8px; font-size: .9rem; }
.gl-edit-box { display: grid; gap: 8px; }
.gl-thread [hidden], .gl-main [hidden] { display: none !important; }

/* ---- forms ---- */
.gl-form { display: grid; gap: 14px; }
.gl-field { display: grid; gap: 4px; font-weight: 600; }
.gl-field input, .gl-field textarea, .gl-field select {
  font: inherit; font-weight: 400; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid #b9a88f; border-radius: 3px; background: #fffdf8; color: var(--ink);
}
.gl-field input[type="file"] { padding: 8px 0; border: 0; background: none; }
.gl-form-paper { max-width: 680px; }
.gl-door { display: grid; place-items: start center; padding-top: 30px; }
.gl-door-paper { max-width: 620px; width: 100%; }
.gl-upload { position: relative; display: inline-block; }
.gl-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gl-danger { border-top: 4px solid var(--red); }


/* ---- gallery's own parts ---- */
.gl-account { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.gl-account form { margin: 0; }
.gl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gl-on-cork { color: #fff8ec; text-shadow: 0 1px 0 rgba(0,0,0,.3); }

/* the search: a strip of paper across the board */
.gl-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px; background: var(--paper); box-shadow: 0 4px 10px rgba(0,0,0,.25); max-width: 760px; }
.gl-search input, .gl-search select { font: inherit; min-height: 44px; padding: 6px 10px; border: 1px solid #b9a88f; border-radius: 3px; background: #fffdf8; color: var(--ink); min-width: 0; }
.gl-search input { flex: 1 1 220px; }
.gl-search select { flex: 0 1 180px; }

/* the kind on a card */
.gl-card-text .gl-tag { justify-self: start; }
.gl-tag { display: inline-block; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; padding: 1px 7px; }
.gl-tag-page { background: var(--blue); }
.gl-tag-skill { background: var(--green); }
.gl-tag-bkm { background: var(--red); }
.gl-card-by { text-decoration: none; }
.gl-card-by:hover { text-decoration: underline; }

/* one card's page */
.gl-blurb { overflow-wrap: anywhere; }
.gl-topics { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gl-topics a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; background: #f5efe2; color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600; }

/* choices: topics, languages, trainings */
.gl-field fieldset, fieldset.gl-field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.gl-field legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.gl-topic-pick > div, .gl-radios > div { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.gl-topic-pick label, .gl-radios label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; background: #f5efe2; font-weight: 600; cursor: pointer; }
.gl-topic-pick input, .gl-radios input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--blue); }
.gl-trainings > div { display: grid; gap: 6px; }
.gl-trainings label { justify-content: flex-start; min-height: 46px; }
.gl-account .gl-link { display: inline-flex; align-items: center; }
/* People's text is ordered by its own language (dir="auto", methodology 30)
   but aligned with the page, so a card does not zigzag. */
html[dir="rtl"] .gl-main [dir="auto"] { text-align: right; }
html[dir="ltr"] .gl-main [dir="auto"] { text-align: left; }
.gl-trainings label { width: 100%; }
.gl-topic-pick input, .gl-radios input { flex-shrink: 0; }

/* ---- skills ---- */
.gl-skill-face {
  display: grid; align-content: center; gap: 6px; height: 100%; padding: 14px 16px; text-align: start;
  background-color: #f7f3ea; color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(47, 138, 31, .14) 23px 24px);
}
.gl-skill-face b { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; overflow-wrap: anywhere; }
.gl-skill-face code { justify-self: start; font-size: .72rem; background: var(--green); color: #fff; padding: 1px 6px; }
.gl-skill-face span { font-size: .85rem; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gl-downloads { cursor: default; }
.gl-downloads svg { fill: none; }
.gl-careful { background: var(--note); padding: 8px 12px; font-size: .9rem; margin: 10px 0 0; }
.gl-files { max-width: 980px; margin-bottom: 30px; }
.gl-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gl-file-list a { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; padding: 4px 8px; background: #f5efe2; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.gl-file-list a[aria-current="true"] { background: var(--ink); color: #fff; }
.gl-code { margin: 0; max-height: 70vh; overflow: auto; padding: 12px; background: #1f1a14; color: #f5ecd9; font: .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.gl-steps { margin: 6px 0 14px; padding-inline-start: 22px; }
.gl-steps li { margin-bottom: 4px; }
.gl-chat-wrap { max-width: 820px; }
.gl-chat-log { display: grid; gap: 10px; margin: 14px 0; }
.gl-msg { padding: 10px 12px; max-width: 92%; overflow-wrap: anywhere; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.gl-msg-assistant { background: #f5efe2; justify-self: start; }
.gl-msg-person { background: var(--note); justify-self: end; }
.gl-plain { border-top: 1px dashed #d9cbb3; padding-top: 10px; margin-top: 10px; }
.gl-findings { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.gl-findings code { display: block; font-size: .8rem; background: #fff3f3; border-inline-start: 3px solid var(--red); padding: 4px 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.gl-shot:has(.gl-skill-face) { text-decoration: none; }
html[dir] .gl-main .gl-skill-face [dir="auto"] { text-align: left; }
.gl-plain summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.gl-proposal { border: 2px dashed var(--green); padding: 12px 14px; margin: 12px 0; }
.gl-proposal .gl-topics span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; background: #f5efe2; font-size: .88rem; font-weight: 600; }
.gl-chat-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; }
.gl-chat-acts form { margin: 0; }
.gl-reply { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.gl-reply textarea { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid #b9a88f; border-radius: 3px; background: #fffdf8; }
.gl-plain summary span { margin-inline-start: .3em; }

/* ---- Avi's screens ---- */
.gl-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 18px; }
.gl-stat { background: var(--paper); padding: 12px 14px; box-shadow: 0 4px 10px rgba(0,0,0,.25); display: grid; gap: 2px; }
.gl-stat b { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gl-stat span { font-size: .85rem; color: var(--ink-soft); }
.gl-table-wrap { overflow-x: auto; max-width: 100%; }
.gl-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gl-table th, .gl-table td { text-align: start; padding: 8px 6px; border-top: 1px dashed #d9cbb3; vertical-align: top; }
.gl-table th { font-size: .8rem; color: var(--ink-soft); border-top: 0; }
.gl-table td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gl-table .is-closed td, .gl-row-form.is-closed, .gl-strike.is-closed { opacity: .6; }
.gl-table .is-blocked td { background: #fff3f3; }
.gl-rank { margin: 0; padding-inline-start: 22px; display: grid; gap: 4px; }
.gl-list-paper { max-width: 980px; }
.gl-row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px dashed #d9cbb3; }
.gl-row-form input:not([type]), .gl-row-form input[name^="name"] { flex: 1 1 180px; min-width: 0; font: inherit; min-height: 40px; padding: 6px 8px; border: 1px solid #b9a88f; border-radius: 3px; background: #fffdf8; }
.gl-row-acts { display: inline-flex; gap: 4px; margin-inline-start: auto; }
.gl-row-acts .gl-btn { min-height: 40px; padding: 0 12px; }
.gl-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: #f5efe2; cursor: pointer; font-size: .8rem; }
.gl-row-new { border-top: 2px solid var(--ink); margin-top: 6px; }
.gl-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px; }
.gl-strike { border-top: 1px dashed #d9cbb3; padding-top: 6px; }

/* ---- the screen contract (SPR-G.9): readable on the cork, 44px targets ----
   Light text straight on the cork measured 2.55:1. Text that sits on the
   board is printed in dark ink instead (5.9:1); the board itself is unchanged. */
:root { --green: #24701a; }
.gl-title, .gl-intro, .gl-intro b, .gl-back a, .gl-on-cork, .gl-thread > .gl-h2, .gl-thread > .gl-muted {
  color: var(--ink); text-shadow: none;
}
.gl-brand { display: inline-flex; align-items: center; min-height: 44px; }
.gl-nav a, .gl-link, .gl-chips a, .gl-act, .gl-visit, .gl-file-list a, .gl-icon { min-height: 44px; }
.gl-icon { width: 44px; height: 44px; }
.gl-back a { display: inline-flex; align-items: center; min-height: 44px; }
.gl-row-form > a { display: inline-flex; align-items: center; min-height: 44px; }
.gl-upload input { font-size: 16px; }


/* ---- round 2 (Avi, 2026-11-10): search behind a magnifier, course galleries,
   newest on top, a skills banner ---- */
.gl-head-acts { display: flex; align-items: center; gap: 10px; }
.gl-find { position: relative; }
.gl-find-btn {
  list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  background: var(--paper); color: var(--ink); border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}
.gl-find-btn::-webkit-details-marker { display: none; }
.gl-find-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.gl-find[open] .gl-find-btn { background: var(--note); }
.gl-search select { flex: 0 1 160px; }
.gl-clear { align-self: center; color: var(--blue); }
.gl-intro-short { margin-bottom: 12px; }
.gl-title-course { display: block; font-size: .5em; margin-top: 6px; line-height: 1.1; }
.gl-toolbar { align-items: center; }
.gl-chip-gap { width: 1px; align-self: stretch; background: rgba(43, 33, 24, .35); margin: 0 4px; }
.gl-newest { margin-bottom: 26px; }
.gl-newest .gl-board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
#gl-rest-title, #gl-newest-title { margin: 0 0 14px; }
.gl-banner { border-inline-start: 6px solid var(--green); max-width: 860px; padding: 14px 18px; }
.gl-banner p { margin: 0 0 6px; }
.gl-banner-acts a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* the skill guide */
.gl-guide { max-width: 820px; }
.gl-guide h2 { font-family: var(--f-display); font-size: 1.8rem; margin: 22px 0 8px; }
.gl-guide pre { margin: 8px 0 14px; }
.gl-guide ol, .gl-guide ul { padding-inline-start: 22px; }
.gl-guide li { margin-bottom: 6px; }
.gl-guide code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: #f5efe2; padding: 0 4px; }
.gl-guide pre code { background: none; padding: 0; }

/* one row of chips on a phone */
@media (max-width: 480px) {
  .gl-toolbar { gap: 6px; margin-bottom: 16px; }
  .gl-toolbar a { padding: 6px 10px; font-size: .92rem; }
  .gl-chip-gap { margin: 0 2px; }
}

/* ---- materials ---- */
/* small cards in a grid: several in a row on a computer, two on a phone */
.gl-materials { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 18px; }
@media (max-width: 560px) { .gl-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; } }
.gl-material { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 14px 12px 8px; }
.gl-material p { margin: 0; }
.gl-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.gl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-play { position: absolute; inset: 0; display: grid; place-items: center; }
.gl-play svg { width: 38px; height: 38px; padding: 6px 4px 6px 8px; border-radius: 10px; background: rgba(200, 16, 46, .92); fill: #fff; }
.gl-video { width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #000; }
.gl-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.gl-material-title { margin: 0; font-size: 1.02rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.gl-material-title a { color: var(--ink); text-decoration: none; }
.gl-material-title a:hover { text-decoration: underline; color: var(--blue); }
.gl-material-line { font-size: .86rem; line-height: 1.4; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) {
  .gl-material { padding: 12px 8px 6px; }
  .gl-material-title { font-size: .95rem; }
  .gl-material-line { font-size: .8rem; -webkit-line-clamp: 2; }
}

/* the two shelves: tabs like index cards clipped to the board */
.gl-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.gl-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px;
  border: 0; border-radius: 3px 3px 0 0; font: inherit; font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, .55); color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.gl-tab svg { width: 15px; height: 15px; fill: currentColor; }
.gl-tab[aria-selected="true"] { background: var(--paper); box-shadow: 0 4px 0 var(--note), 0 3px 8px rgba(0,0,0,.25); }
.gl-tab[data-tab="mine"][aria-selected="true"] { background: #e3efff; box-shadow: 0 4px 0 var(--blue), 0 3px 8px rgba(0,0,0,.25); }
.gl-tab-count { font-size: .8rem; font-variant-numeric: tabular-nums; background: var(--ink); color: #fff; border-radius: 999px; padding: 0 .55em; line-height: 1.6; }
.gl-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.gl-panel-head .gl-intro { margin: 0; }

.gl-material-tags { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.gl-material .gl-tag { font-size: .7rem; padding: 1px 6px; }
.gl-private { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; color: var(--blue); }
.gl-private svg { width: 11px; height: 11px; fill: currentColor; }
.gl-material.is-mine, .gl-form-paper.is-mine, .gl-empty.is-mine {
  background-color: #eef5ff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(20, 88, 184, .12) 23px 24px);
}

/* the card's foot: order on one side, keep / edit / delete on the other */
.gl-material-foot { display: flex; align-items: center; justify-content: space-between; gap: 2px 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; border-top: 1px dashed #e2d6c2; }
.gl-sort, .gl-acts { display: flex; gap: 2px; }
.gl-acts { margin-inline-start: auto; }
.gl-micon {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--ink-soft); cursor: pointer; text-decoration: none;
}
.gl-micon svg { width: 16px; height: 16px; fill: currentColor; }
@media (pointer: fine) and (min-width: 561px) { .gl-micon { width: 29px; height: 30px; } .gl-sort, .gl-acts { gap: 1px; } }
.gl-micon[href] svg, .gl-delete svg, .gl-keep svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gl-micon:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }
.gl-delete:hover { color: var(--red); }
.gl-keep:disabled { color: var(--green); cursor: default; }
.gl-keep:disabled svg { fill: currentColor; }
.gl-handle { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.gl-handle svg { width: 10px; height: 18px; }
.gl-move svg { width: 12px; height: 12px; }
.gl-material:first-child .gl-move[data-move="up"], .gl-material:last-child .gl-move[data-move="down"] { opacity: .3; }

.gl-material.is-dragging {
  position: fixed; z-index: 50; margin: 0;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .38); transform: rotate(-1.5deg) scale(1.03);
}
.gl-material.is-dragging .gl-handle { cursor: grabbing; }
.gl-placeholder { border: 3px dashed rgba(255, 248, 236, .85); background: rgba(255, 248, 236, .18); min-width: 0; }
body.gl-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }

.gl-toast {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 16px;
  background: var(--wood-dark); color: #fff8ec; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.gl-toast-btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 3px; background: var(--note); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }


/* materials (SPR-G.11), ported from cohort's with its own prefix */
.gl-tag-m-video { background: var(--red); } .gl-tag-m-file { background: var(--blue); } .gl-tag-m-course { background: var(--green); } .gl-tag-m-link { background: var(--wood); }
.gl-panel [hidden] { display: none !important; }
.gl-tab { min-height: 46px; }
.gl-micon { width: 44px; height: 44px; }
@media (pointer: fine) and (min-width: 561px) { .gl-micon { width: 44px; height: 44px; } }
.gl-material-title a { display: flex; align-items: center; min-height: 44px; }

/* "more on babook" (Avi, 2026-11-10): a short list that opens from the menu */
.gl-more { position: relative; }
.gl-more summary { list-style: none; cursor: pointer; color: #f1dfc3; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.gl-more summary::-webkit-details-marker { display: none; }
.gl-more summary::after { content: "\25BE"; font-size: .8em; }
.gl-more[open] summary { color: #fff; }
.gl-more-list {
  position: absolute; z-index: 30; inset-inline-start: 0; top: 100%; min-width: 230px; margin: 4px 0 0; padding: 6px 0;
  list-style: none; background: var(--paper); box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
.gl-more-list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink) !important; text-decoration: none; font-weight: 600; }
.gl-more-list a:hover { background: #f5efe2; }
@media (max-width: 480px) { .gl-more-list { inset-inline-start: auto; inset-inline-end: 0; } }
.gl-more:not([open]) .gl-more-list { display: none; }
@media (max-width: 760px) {
  .gl-more { flex-basis: 100%; }
  .gl-more-list { position: static; min-width: 0; width: 100%; margin: 4px 0 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
}