/* ds-collections.css — the Skolon design-system look for exactly two views:
     1. "Mina samlingar"  (#coll-page: the grid of all of a teacher's collections), and
     2. the board overview of one collection (#ov-modal: the cards of its boards).
   Nothing else in the app is touched. Scoped to body:not([data-look="classic"]) so the classic look stays exactly as it was
   (css/cozy.css rule); cosy and play both get it. Loaded after panels.css / widgets-more.css, so it wins the cascade.

   The rules it follows (design system): cards and modals are radius-xl with a 1px border and no shadow; the only shadow is
   shadow-floating, on the modal container; icons are the font colour (never teal, except a semantic one); weight 400 with 600
   only for a headline in a card; tags are 2rem high with radius-sm and never clickable; chips are the clickable ones; buttons are
   pills, header and card actions are ghost icon buttons (2.5rem); the modal overlay is black at 14% with no blur; motion is short
   and quiet — no lift, no bounce. */

body:not([data-look="classic"]) {
  --ds-hover-01: #f9f9f9;
  --ds-focus: #36495D;
  --ds-shadow-floating: 0 .1875rem .375rem rgba(0, 0, 0, .12);
}

/* ── Overlay + container (both views) ─────────────────────────────────── */
body:not([data-look="classic"]) .coll-page,
body:not([data-look="classic"]) .ov-backdrop {
  background: rgba(0, 0, 0, .14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not([data-look="classic"]) .coll-page-inner,
body:not([data-look="classic"]) .ov-panel {
  background: var(--el);
  border-radius: var(--r-xl);
  box-shadow: var(--ds-shadow-floating);
  padding: 2.25rem;
}
body:not([data-look="classic"]) .coll-page-inner { max-width: 72rem; }
body:not([data-look="classic"]) .ov-panel { max-width: 68rem; }

/* ── Header of "Mina samlingar" ───────────────────────────────────────── */
body:not([data-look="classic"]) .coll-page-head { padding: 0 0 1.5rem; border-bottom: 0; align-items: center; }
body:not([data-look="classic"]) .coll-page-title-ic { display: none; }
body:not([data-look="classic"]) .coll-page-title { font-size: 1.125rem; font-weight: 400; line-height: 1.5rem; }
body:not([data-look="classic"]) .coll-page-sub { font-size: .875rem; margin-top: .125rem; }
body:not([data-look="classic"]) .coll-page-close,
body:not([data-look="classic"]) .ov-close-btn {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); background: transparent; color: var(--font);
  transition: background-color .12s;
}
body:not([data-look="classic"]) .coll-page-close:hover,
body:not([data-look="classic"]) .ov-close-btn:hover { background: var(--main-sub); }
body:not([data-look="classic"]) .coll-page-close .material-icons-outlined,
body:not([data-look="classic"]) .ov-close-btn .material-icons-outlined { font-size: 1.25rem; }

/* ── Collection cards ─────────────────────────────────────────────────── */
body:not([data-look="classic"]) .coll-page-grid { padding: 0; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
body:not([data-look="classic"]) .coll-card {
  background: var(--el); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: none;
  transition: background-color .12s;
}
body:not([data-look="classic"]) .coll-card:hover { transform: none; box-shadow: none; border-color: var(--border); background: var(--ds-hover-01); }
body:not([data-look="classic"]) .coll-card.is-active,
body:not([data-look="classic"]) .coll-card.is-active:hover { border-color: var(--main); box-shadow: inset 0 0 0 .0625rem var(--main); background: var(--el); }
body:not([data-look="classic"]) .coll-card-open { padding: 1.5rem 1.5rem 1rem; gap: .75rem; }
body:not([data-look="classic"]) .coll-card-open:focus-visible { outline: .125rem solid var(--ds-focus); outline-offset: -.25rem; border-radius: var(--r-xl); }
body:not([data-look="classic"]) .coll-card-top { min-height: 2rem; }
body:not([data-look="classic"]) .coll-card-folder { color: var(--font); }
body:not([data-look="classic"]) .coll-card-name { font-size: 1rem; font-weight: 600; line-height: 1.5rem; }

/* tags: not clickable, 2rem, radius-sm, sentence case, font colour */
body:not([data-look="classic"]) .coll-card-current,
body:not([data-look="classic"]) .coll-card-shared,
body:not([data-look="classic"]) .coll-card-ext,
body:not([data-look="classic"]) .coll-card-count,
body:not([data-look="classic"]) .coll-card-chip {
  display: inline-flex; align-items: center; gap: .375rem; height: 2rem; padding: 0 .75rem;
  border: 0; border-radius: var(--r-sm); font-size: .875rem; font-weight: 400; line-height: 1.25rem;
  letter-spacing: 0; text-transform: none; color: var(--font); white-space: nowrap;
}
body:not([data-look="classic"]) .coll-card-current { background: var(--main-sub); }
body:not([data-look="classic"]) .coll-card-shared  { background: var(--warn-sub); }
body:not([data-look="classic"]) .coll-card-ext     { background: var(--hover); }
body:not([data-look="classic"]) .coll-card-count   { background: var(--hover); }
body:not([data-look="classic"]) .coll-card-chip    { background: var(--main-sub); }
body:not([data-look="classic"]) .coll-card-chip-empty { background: var(--hover); color: var(--font); }
body:not([data-look="classic"]) .coll-card-count .material-icons-outlined,
body:not([data-look="classic"]) .coll-card-chip .material-icons-outlined,
body:not([data-look="classic"]) .coll-card-ext .material-icons-outlined { font-size: 1rem !important; color: var(--font); }
body:not([data-look="classic"]) .coll-card-meta { gap: .5rem; }

/* board names on a card: these ARE clickable (jump to the board), so they are chips, not tags */
body:not([data-look="classic"]) .coll-card-boards { gap: .5rem; margin-top: 0; }
body:not([data-look="classic"]) .coll-board-chip {
  display: inline-flex; align-items: center; height: 2rem; padding: 0 .75rem; max-width: 10rem;
  background: var(--el); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 400; color: var(--font);
}
body:not([data-look="classic"]) .coll-board-chip-link:hover { background: var(--hover); border-color: transparent; color: var(--font); }
body:not([data-look="classic"]) .coll-board-chip-link:focus-visible { background: var(--hover); border-color: transparent; outline: .125rem solid var(--ds-focus); outline-offset: .125rem; }
body:not([data-look="classic"]) .coll-board-chip-more { background: var(--main-sub); border-color: transparent; color: var(--font); }

/* colleagues */
body:not([data-look="classic"]) .coll-card-people { margin-top: 0; min-height: 2rem; }
body:not([data-look="classic"]) .coll-avatar { width: 2rem; height: 2rem; font-size: .75rem; font-weight: 600; margin-right: -.5rem; }
body:not([data-look="classic"]) .coll-card-people-label { font-size: .875rem; margin-left: 1rem; color: var(--font-sub); }
body:not([data-look="classic"]) .coll-card-people-empty { font-size: .875rem; gap: .5rem; color: var(--font-sub); }
body:not([data-look="classic"]) .coll-card-people-empty .material-icons-outlined { font-size: 1.25rem !important; color: var(--font); }
body:not([data-look="classic"]) .coll-card-ext-note { font-size: .75rem; line-height: 1.25rem; gap: .5rem; }
body:not([data-look="classic"]) .coll-card-ext-note .material-icons-outlined { font-size: 1rem !important; color: var(--font); }

/* actions: ghost icon buttons, 2.5rem, the icon is the font colour */
body:not([data-look="classic"]) .coll-card-actions { padding: .5rem .75rem; gap: .25rem; border-top: 1px solid var(--divider); }
body:not([data-look="classic"]) .coll-card-btn,
body:not([data-look="classic"]) .coll-card-btn-students {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); color: var(--font); transition: background-color .12s;
}
body:not([data-look="classic"]) .coll-card-btn:hover { background: var(--main-sub); color: var(--font); }
body:not([data-look="classic"]) .coll-card-btn:focus-visible { background: var(--main-sub); outline: .125rem solid var(--ds-focus); outline-offset: .125rem; }
body:not([data-look="classic"]) .coll-card-btn .material-icons-outlined { font-size: 1.25rem; }
body:not([data-look="classic"]) .coll-card-btn-del:hover { background: var(--danger-sub); color: var(--font); }

/* new collection: an outlined card, not a dashed one */
body:not([data-look="classic"]) .coll-card-new {
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--el); color: var(--font);
  font-size: .875rem; font-weight: 400; gap: .5rem; transition: background-color .12s;
}
body:not([data-look="classic"]) .coll-card-new:hover { background: var(--ds-hover-01); border-color: var(--border); color: var(--font); }
body:not([data-look="classic"]) .coll-card-new .material-icons-outlined { font-size: 1.5rem; color: var(--font); }

/* ── Board overview of one collection ─────────────────────────────────── */
body:not([data-look="classic"]) .ov-panel-head { padding: 0; gap: .5rem; }
body:not([data-look="classic"]) .ov-pkg-wrap .material-icons-outlined { color: var(--font) !important; }
body:not([data-look="classic"]) .ov-pkg-name { font-size: 1.125rem; font-weight: 400; line-height: 1.5rem; border-radius: var(--r-sm); }
body:not([data-look="classic"]) .ov-pkg-name:focus { box-shadow: 0 0 0 .125rem var(--ds-focus); background: var(--hover); }
body:not([data-look="classic"]) .ov-my-colls-btn,
body:not([data-look="classic"]) .ov-share-btn {
  height: 2.5rem; padding: 0 1rem 0 .625rem; gap: .375rem; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--font); font-size: .875rem; font-weight: 400; transition: background-color .12s;
}
body:not([data-look="classic"]) .ov-my-colls-btn:hover,
body:not([data-look="classic"]) .ov-share-btn:hover { background: var(--main-sub); color: var(--font); }
body:not([data-look="classic"]) .ov-my-colls-btn:focus-visible,
body:not([data-look="classic"]) .ov-share-btn:focus-visible { background: var(--main-sub); outline: .125rem solid var(--ds-focus); outline-offset: .125rem; }
body:not([data-look="classic"]) .ov-my-colls-btn .material-icons-outlined,
body:not([data-look="classic"]) .ov-share-btn .material-icons-outlined { font-size: 1.25rem !important; color: var(--font); }
body:not([data-look="classic"]) .ov-meta { font-size: .875rem; padding: .25rem 0 1.5rem; border-bottom: 0; }
body:not([data-look="classic"]) .ov-grid { gap: 1.5rem; padding: 0; }

body:not([data-look="classic"]) .ov-card {
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: none; background: var(--el);
  transition: background-color .12s;
}
body:not([data-look="classic"]) .ov-card:hover { box-shadow: none; border-color: var(--border); background: var(--ds-hover-01); }
body:not([data-look="classic"]) .ov-card-active,
body:not([data-look="classic"]) .ov-card-active:hover { border-color: var(--main); box-shadow: inset 0 0 0 .0625rem var(--main); background: var(--el); }
body:not([data-look="classic"]) .ov-thumb { height: 6rem; }
body:not([data-look="classic"]) .ov-card-body { padding: 1rem 1.25rem .5rem; gap: .25rem; }
body:not([data-look="classic"]) .ov-card-name { font-size: .875rem; font-weight: 600; line-height: 1.25rem; border-radius: var(--r-sm); padding: 0 .25rem; margin-left: -.25rem; }
body:not([data-look="classic"]) .ov-card-meta { font-size: .75rem; line-height: 1.25rem; gap: .5rem; }
body:not([data-look="classic"]) .ov-badge-shared {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border-radius: var(--r-sm);
  background: var(--main-sub); color: var(--font); font-size: .75rem; font-weight: 400; text-transform: none; letter-spacing: 0;
}
body:not([data-look="classic"]) .ov-card-actions { padding: .5rem .75rem; gap: .25rem; border-top: 1px solid var(--divider); }
body:not([data-look="classic"]) .ov-btn { width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); color: var(--font); transition: background-color .12s; }
body:not([data-look="classic"]) .ov-btn:hover { background: var(--main-sub); color: var(--font); }
body:not([data-look="classic"]) .ov-btn:focus-visible { background: var(--main-sub); outline: .125rem solid var(--ds-focus); outline-offset: .125rem; }
body:not([data-look="classic"]) .ov-btn-share:hover { background: var(--main-sub); color: var(--font); }
body:not([data-look="classic"]) .ov-btn-del:hover { background: var(--danger-sub); color: var(--font); }
body:not([data-look="classic"]) .ov-btn .material-icons-outlined { font-size: 1.25rem; }
body:not([data-look="classic"]) .ov-add-card { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--el); transition: background-color .12s; }
body:not([data-look="classic"]) .ov-add-card:hover { background: var(--ds-hover-01); border-color: var(--border); }
body:not([data-look="classic"]) .ov-add-card .material-icons-outlined { color: var(--font) !important; opacity: 1 !important; font-size: 1.5rem !important; }
body:not([data-look="classic"]) .ov-add-card span:last-child { font-size: .875rem !important; color: var(--font) !important; }
body:not([data-look="classic"]) .ov-add-card:hover span { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  body:not([data-look="classic"]) .coll-page-inner { animation: none; }
}

/* ── Playful look only: the board overview shows a real miniature of each board ── */
.ov-mini-map { display: none; }
body[data-look="play"] .ov-thumb { height: 8.5rem; position: relative; }
body[data-look="play"] .ov-mini-map { display: block; position: absolute; inset: .5rem; aspect-ratio: auto; }
body[data-look="play"] .ov-mini-w { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 .0625rem rgba(0,60,80,.18); border-radius: .25rem; backdrop-filter: blur(1px); }
body[data-look="play"] .ov-mini-w .material-icons-outlined { font-size: .875rem; }
body[data-look="play"] .ov-thumb:has(.ov-mini-map) .ov-thumb-icons { display: none; }
body[data-look="play"] .ov-thumb-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ov-clone-host { display: none; }
body[data-look="play"] .ov-clone-host { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body[data-look="play"] .ov-clone-host:not(:empty) ~ .ov-mini-map, body[data-look="play"] .ov-thumb:has(.ov-clone) .ov-mini-map { display: none; }
body[data-look="play"] .ov-clone { position: absolute; inset: auto; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
body[data-look="play"] .ov-clone * { animation: none !important; transition: none !important; }
body[data-look="play"] .ov-clone-ph { width: 100%; height: 100%; min-height: 3rem; background: rgba(0,0,0,.08); }

/* ── Compact: more collections and boards in view at once (cosy and play) ── */
body:not([data-look="classic"]) .coll-page-inner { max-width: 84rem; padding: 1.75rem; }
body:not([data-look="classic"]) .ov-panel { max-width: 76rem; padding: 1.75rem; }
body:not([data-look="classic"]) .coll-page-head { padding-bottom: 1rem; }
body:not([data-look="classic"]) .coll-page-grid { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
body:not([data-look="classic"]) .coll-card-open { padding: 1rem 1rem .5rem; gap: .5rem; }
body:not([data-look="classic"]) .coll-card-name { font-size: .9375rem; line-height: 1.375rem; }
body:not([data-look="classic"]) .coll-card-actions { padding: .25rem .5rem; }
body:not([data-look="classic"]) .coll-card-btn,
body:not([data-look="classic"]) .coll-card-btn-students { width: 2.25rem; height: 2.25rem; }
body:not([data-look="classic"]) .coll-card-new { min-height: 8rem; }
body:not([data-look="classic"]) .ov-meta { padding-bottom: 1rem; }
body:not([data-look="classic"]) .ov-grid { gap: 1rem; grid-template-columns: repeat(5, 1fr); }
body:not([data-look="classic"]) .ov-card-body { padding: .75rem 1rem .5rem; }
body:not([data-look="classic"]) .ov-thumb { height: 5rem; }
body[data-look="play"] .ov-thumb { height: 7rem; }
@media (max-width: 70rem) { body:not([data-look="classic"]) .ov-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 52rem) { body:not([data-look="classic"]) .ov-grid { grid-template-columns: repeat(2, 1fr); } }
body:not([data-look="classic"]) .coll-card-actions { flex-wrap: nowrap; gap: .125rem; padding: .25rem .5rem; }
body:not([data-look="classic"]) .coll-card-btn,
body:not([data-look="classic"]) .coll-card-btn-students { width: 2rem; height: 2rem; flex: 0 0 auto; }
body:not([data-look="classic"]) .coll-card-btn .material-icons-outlined { font-size: 1.125rem; }
body:not([data-look="classic"]) .coll-card-open { gap: .4rem; }
body:not([data-look="classic"]) .coll-card-count, body:not([data-look="classic"]) .coll-card-chip, body:not([data-look="classic"]) .coll-board-chip { height: 1.75rem; font-size: .8125rem; padding: 0 .625rem; }

/* ── Mina samlingar, round 3: Skolon rhythm — 4 per row, clear heading, no folder icon, bigger actions ── */
body:not([data-look="classic"]) .coll-page-title { font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--font); }
body:not([data-look="classic"]) .coll-page-sub { font-size: .9375rem; line-height: 1.5rem; margin-top: .125rem; color: var(--font-sub); }
body:not([data-look="classic"]) .coll-page-head { padding-bottom: 1.25rem; }
body:not([data-look="classic"]) .coll-page-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 70rem) { body:not([data-look="classic"]) .coll-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 52rem) { body:not([data-look="classic"]) .coll-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { body:not([data-look="classic"]) .coll-page-grid { grid-template-columns: 1fr; } }

/* the card: name and status share the first line, the folder icon is gone */
body:not([data-look="classic"]) .coll-card-folder { display: none; }
body:not([data-look="classic"]) .coll-card-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: .5rem; row-gap: .5rem; padding: 1.125rem 1.125rem .75rem; text-align: left; }
body:not([data-look="classic"]) .coll-card-name { grid-column: 1; grid-row: 1; font-size: 1.0625rem; font-weight: 600; line-height: 1.5rem; min-height: 2rem; display: flex; align-items: center; overflow-wrap: anywhere; }
body:not([data-look="classic"]) .coll-card-top { grid-column: 2; grid-row: 1; min-height: 0; }
body:not([data-look="classic"]) .coll-card-meta,
body:not([data-look="classic"]) .coll-card-boards,
body:not([data-look="classic"]) .coll-card-people,
body:not([data-look="classic"]) .coll-card-ext-note { grid-column: 1 / -1; }
body:not([data-look="classic"]) .coll-card-meta { gap: .375rem; }

/* boards: one row — the first three and "+N" */
body:not([data-look="classic"]) .coll-card-boards { display: flex; flex-wrap: nowrap; gap: .375rem; overflow: hidden; }
body:not([data-look="classic"]) .coll-card-boards .coll-board-chip-link:nth-child(n+4),
body:not([data-look="classic"]) .coll-card-boards .coll-board-chip-more { display: none; }
body:not([data-look="classic"]) .coll-card-boards .coll-board-chip-link { min-width: 0; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
body:not([data-look="classic"]) .coll-card-boards:not([data-extra="0"])::after { content: "+" attr(data-extra); display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem; border-radius: var(--r-sm); background: var(--main-sub); color: var(--font); font-size: .8125rem; flex: 0 0 auto; }

/* actions: clearly visible icons, 2.25rem targets, the icon in full ink */
body:not([data-look="classic"]) .coll-card-actions { padding: .375rem .5rem .5rem; gap: 0; justify-content: space-between; border-top: 1px solid var(--border); }
body:not([data-look="classic"]) .coll-card-btn,
body:not([data-look="classic"]) .coll-card-btn-students { width: 2.25rem; height: 2.25rem; color: var(--font); }
body:not([data-look="classic"]) .coll-card-btn .material-icons-outlined { font-size: 1.5rem; color: var(--font); }
body:not([data-look="classic"]) .coll-card-btn:hover { background: var(--main-sub); }
body:not([data-look="classic"]) .coll-card-btn-del:hover .material-icons-outlined { color: #d6322a; }
body:not([data-look="classic"]) .coll-card-new { min-height: 7rem; font-size: 1rem; font-weight: 600; }
body:not([data-look="classic"]) .coll-card-new .material-icons-outlined { font-size: 2rem; color: var(--main); }
body:not([data-look="classic"]) .coll-card-open { align-content: start; }
body:not([data-look="classic"]) .coll-card-name { overflow-wrap: break-word; }
body:not([data-look="classic"]) .coll-card-top { max-width: 8.75rem; min-width: 0; }
body:not([data-look="classic"]) .coll-card-top > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not([data-look="classic"]) .coll-card-boards .coll-board-chip-link:nth-child(n+3) { display: none; }
body:not([data-look="classic"]) .coll-card-boards .coll-board-chip-link { max-width: 9rem; }
body:not([data-look="classic"]) .coll-card-top { max-width: 10.75rem; }
body:not([data-look="classic"]) .coll-card-actions { justify-content: flex-start; gap: .125rem; }
body:not([data-look="classic"]) .coll-card-top { max-width: 7.75rem; }
body:not([data-look="classic"]) .coll-card-name { overflow-wrap: normal; word-break: normal; }