/* Class Hub: every class as a card with a live floor plan. Loads after groups.css.
   Tokens come from studio.css (--raised, --ink, --muted, --line, --ui-accent, radii, shadows) so light and dark both work.
   Motion is opt-in: cards rise in only when the person has not asked for reduced motion. */
.hub-trigger { display: inline-flex; align-items: center; gap: 7px; }
.hub-trigger .toolbar-symbol { width: 17px; height: 17px; background: currentColor; }
.app-nav .hub-trigger { margin-left: auto; min-height: 32px; height: 32px; padding: 0 var(--s3); font-size: var(--t-body); font-weight: 600; }
.app-nav .hub-trigger + #toggleTools { margin-left: 0; }

dialog.hub { padding: 0; width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); overflow: hidden; border-radius: var(--r-xl); }
dialog.hub[open] { display: flex; flex-direction: column; }
.hub-sheet { display: flex; flex-direction: column; min-height: 0; padding: var(--s6) var(--s6) var(--s4); gap: var(--s4); overflow: auto; }
.hub-top { display: flex; align-items: flex-start; gap: var(--s4); }
.hub-titles { flex: 1; min-width: 0; }
.hub-titles h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.hub-titles p { margin: 2px 0 0; color: var(--muted); font-size: var(--t-body); }
.hub-find { flex: 0 1 240px; display: block; }
.hub-find[hidden] { display: none; }
.hub-find input { width: 100%; }
.hub .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hub-close { flex: none; }

.hub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); }
.hub-card { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), translate var(--dur) var(--ease); }
.hub-card:hover { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--class-tint, var(--ui-accent)) 45%, var(--line)); translate: 0 -2px; }
.hub-card[data-active=true] { border-color: var(--class-tint, var(--ui-accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--class-tint, var(--ui-accent)) 35%, transparent), var(--shadow-2); }
.hub-main { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-md); min-height: 0; height: auto; }
.hub-main:hover:not(:disabled) { background: transparent; border: 0; }
.hub-main:focus-visible, .hub-actions button:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.hub-plan { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--hub-bg, var(--sunken)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.hub-thumb { display: block; width: 100%; height: 100%; }
.hub-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 var(--s1); }
.hub-chips .hub-chip { margin: 0; }
.hub-now { padding: 2px 10px; border-radius: var(--r-pill); background: var(--class-tint, var(--ui-accent)); color: var(--class-ink, #fff); font-size: var(--t-cap); font-weight: 700; letter-spacing: .01em; }
.hub-head-row { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s1); min-width: 0; }
.hub-card .class-icon-tile { --icon-tint: var(--class-tint, var(--ui-accent)); }
.hub-card .subject-symbol { background: currentColor; }
.hub-initial { font-weight: 800; font-size: 17px; }
.hub-info { display: flex; flex-direction: column; min-width: 0; }
.hub-info strong { font-size: var(--t-title); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-info small { color: var(--muted); font-size: var(--t-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-chip { align-self: flex-start; margin: 0 var(--s1); padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--t-cap); font-weight: 600; background: var(--sunken); color: var(--muted); }
.hub-chip[data-tone=ok] { background: color-mix(in srgb, var(--ok) 14%, var(--raised)); color: var(--ok); }
.hub-chip[data-tone=warn] { background: var(--warn-bg); color: var(--warn-ink); }
.hub-actions { display: flex; gap: var(--s2); padding: 0 var(--s1) var(--s1); }
.hub-actions button { flex: 1; min-width: 0; height: 34px; min-height: 34px; padding: 0 6px; gap: 5px; font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.hub-actions .toolbar-symbol { width: 16px; height: 16px; flex: none; background: currentColor; }
.hub-new { align-items: stretch; justify-content: stretch; border-style: dashed; background: transparent; box-shadow: none; min-height: 190px; }
.hub-new .hub-main { flex: 1; align-items: center; justify-content: center; text-align: center; gap: var(--s2); padding: var(--s4); color: var(--muted); }
.hub-new:hover .hub-main { color: var(--ink); }
.hub-new strong { font-size: var(--t-title); color: var(--ink); }
.hub-new small { font-size: var(--t-cap); max-width: 22ch; }
.hub-plus { position: relative; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--ui-accent) 12%, var(--raised)); }
.hub-plus::before, .hub-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.5px; border-radius: 2px; background: var(--ui-accent); translate: -50% -50%; }
.hub-plus::after { rotate: 90deg; }
.hub-empty { grid-column: 1 / -1; padding: var(--s6); text-align: center; color: var(--muted); }
.hub-foot { margin: 0; color: var(--muted); font-size: var(--t-cap); }

@media (prefers-reduced-motion: no-preference) {
  dialog.hub[open] .hub-card { animation: hub-in .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
  @keyframes hub-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .hub-card { transition: none; } .hub-card:hover { translate: none; } }
@media (max-width: 640px) {
  .hub-sheet { padding: var(--s4); }
  .hub-top { flex-wrap: wrap; }
  .hub-find { order: 3; flex-basis: 100%; }
  .hub-grid { grid-template-columns: 1fr; }
}
@media print { dialog.hub, .hub-trigger { display: none !important; } }

/* Classes that hold the same students: offer to combine them into rooms */
.hub-merge { display: grid; gap: var(--s3); }
.hub-merge[hidden] { display: none; }
.hub-merge-card { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); row-gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--ui-accent) 40%, var(--line)); background: color-mix(in srgb, var(--ui-accent) 8%, var(--raised)); }
.hub-merge-card p { margin: 0; }
.hub-merge-title { flex: 1 1 280px; font-size: var(--t-body); min-width: 0; }
.hub-merge-lead, .hub-merge-list { flex: 1 0 100%; }
.hub-merge-lead { margin-top: var(--s1) !important; color: var(--muted); font-size: var(--t-body); max-width: 70ch; }
.hub-merge-list { margin: 0; padding-left: 1.2em; font-size: var(--t-body); display: grid; gap: var(--s1); }
.hub-merge-lead { margin: 0 !important; }
.hub-merge-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hub-merge-actions button { min-height: 32px; height: 32px; padding: 0 var(--s4); font-size: var(--t-body); font-weight: 600; }
.hub-merge-actions button.primary { background: var(--ui-accent); color: var(--accent-ink, #fff); border-color: var(--ui-accent); }
.hub-merge-actions button:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }