/* The Classroom Board: the surface, its backgrounds, widget windows, the
   top bar and the dock. */

.page-board .site-footer { margin-top: 24px; }
.board-shell {
  position: relative; height: calc(100vh - var(--header-h)); min-height: 560px; overflow: hidden;
  background: var(--bg-deep);
}
/* The widgets live between the top bar and the dock; presenting, they get
   the whole screen (positions are percentages, so the layout just scales). */
.board { position: absolute; inset: 64px 14px 96px; }
body.is-present .board { inset: 0; }

/* ---- Backgrounds ---- */
.bg-sky { background: radial-gradient(900px 500px at 15% 10%, #ffffff 0, transparent 60%), linear-gradient(160deg, #cfe3fb, #e8f2ff 45%, #d6efe9); }
.bg-chalk {
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(255, 255, 255, .07), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2d5a45, #1f4334 60%, #183629);
}
.bg-cork {
  background-color: #c4915a;
  background-image:
    radial-gradient(rgba(96, 52, 12, .28) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 238, 205, .22) 1px, transparent 1.6px),
    radial-gradient(rgba(120, 70, 20, .18) 2px, transparent 2.8px);
  background-size: 9px 9px, 13px 13px, 23px 23px;
  background-position: 0 0, 4px 6px, 11px 3px;
}
.bg-paper {
  background-color: #fbfcfe;
  background-image: linear-gradient(#dfe8f4 1px, transparent 1px), linear-gradient(90deg, #dfe8f4 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-night { background: radial-gradient(1200px 600px at 70% 0%, #21426d, #0c1726 70%); }
.bg-sunset { background: linear-gradient(160deg, #ffd8a8, #ffb3b3 50%, #c6b8ff); }
.bg-mint { background: linear-gradient(160deg, #dcf5e3, #b5e3c6); }
.bg-lavender { background: linear-gradient(160deg, #ebe4ff, #f6ebff); }
.bg-plain { background: var(--bg-deep); }
.bg-image { background-size: cover; background-position: center; }

/* ---- Empty state ---- */
.board-empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: min(620px, calc(100% - 40px)); padding: 30px 32px; border-radius: var(--radius-lg); text-align: center;
  background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.board-empty .tile-icon { --cat: var(--c-time); width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 12px; }
.board-empty h1 { font-size: 1.6rem; }
.board-empty p { color: var(--ink-soft); }
.board-empty-tpls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* ---- Widgets ---- */
.widget {
  position: absolute; display: flex; flex-direction: column; min-width: 0;
  border-radius: 16px; overflow: hidden; background: var(--stage-bg); color: var(--stage-ink);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 2px 6px rgba(10, 20, 35, .12), 0 16px 38px rgba(10, 20, 35, .18);
  transition: box-shadow .15s;
  animation: w-in .22s ease-out;
}
@keyframes w-in { from { opacity: 0; transform: scale(.96); } }
.widget.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 65%, transparent), 0 18px 44px rgba(10, 20, 35, .26); }
.widget.is-dragging, .widget.is-resizing { transition: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 65%, transparent), 0 30px 60px rgba(10, 20, 35, .32); }
.widget.is-dragging .w-body, .widget.is-resizing .w-body { pointer-events: none; }
.widget.is-max { left: 1% !important; top: 1.2% !important; width: 98% !important; height: 97.6% !important; z-index: 900 !important; }

.w-bar {
  flex: none; display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 5px 0 11px;
  background: color-mix(in srgb, var(--cat) 11%, var(--card)); color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--cat) 18%, var(--line));
  cursor: grab; user-select: none; touch-action: none;
}
.is-dragging .w-bar { cursor: grabbing; }
.is-max .w-bar { cursor: default; }
.w-icon { color: var(--cat); display: grid; place-items: center; }
.w-title { font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.w-grow { flex: 1; }
.w-btn {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-soft); text-decoration: none;
}
.w-btn:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.widget .w-body.stage { flex: 1 1 auto; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.w-settings { position: absolute; top: 38px; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); color: var(--ink); overflow: auto; padding: 0 14px 18px; }
.w-settings-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; background: var(--card); border-bottom: 1px solid var(--line-soft); }
.w-resize {
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; z-index: 41; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 52%, color-mix(in srgb, var(--ink) 35%, transparent) 52% 58%, transparent 58% 68%, color-mix(in srgb, var(--ink) 35%, transparent) 68% 74%, transparent 74%);
  opacity: .55; transition: opacity .15s;
}
.widget:hover .w-resize { opacity: 1; }
.is-max .w-resize { display: none; }

/* ---- Top bar ---- */
.board-topbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; max-width: calc(100% - 24px);
  background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--line);
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
  transition: opacity .3s, transform .3s;
}
.tb-select { width: auto; min-width: 150px; max-width: 220px; min-height: 34px; padding: 4px 8px; font-weight: 600; font-size: .9rem; }
.tb-icon { width: 34px; padding: 0; }
.tb-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.tb-menu { position: relative; }
.tb-menu > summary { list-style: none; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5;
  width: 290px; padding: 8px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.tb-item {
  display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); text-align: left;
}
.tb-item:hover { background: var(--card-alt); }
.tb-item b { display: block; font-size: .92rem; }
.tb-item small { display: block; color: var(--muted); font-size: .8rem; }
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 4px 8px; }
.bg-tile { height: 52px; border-radius: 10px; border: 2px solid var(--line); cursor: pointer; }
.bg-tile.is-on { border-color: var(--c-time); box-shadow: 0 0 0 3px var(--ring); }

/* ---- Dock ---- */
.board-dock {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: flex-end; padding: 7px 8px; border-radius: 20px; max-width: calc(100% - 24px); overflow-x: auto;
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(12px);
  transition: opacity .3s, transform .3s;
}
.dock-group { display: flex; gap: 4px; padding: 0 7px; }
.dock-group + .dock-group { border-left: 1px solid var(--line); }
.dock-btn {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 54px; padding: 4px 0 2px; border: 0; border-radius: 12px; background: transparent; color: var(--ink);
}
.dock-btn .icon {
  width: 40px; height: 40px; padding: 9px; border-radius: 11px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cat) 75%, white), var(--cat) 55%, color-mix(in srgb, var(--cat) 80%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px color-mix(in srgb, var(--cat) 35%, transparent);
  transition: transform .15s;
}
.dock-btn:hover .icon { transform: translateY(-4px) scale(1.06); }
.dock-btn:active .icon { transform: translateY(0) scale(.96); }
.dock-label { font-size: .66rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; max-width: 54px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Present ---- */
body.is-present { overflow: hidden; }
body.is-present .board-shell { position: fixed; inset: 0; z-index: 1500; height: auto; }
body.is-present.is-idle .board-topbar { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
body.is-present.is-idle .board-dock { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
body.is-present.is-idle, body.is-present.is-idle .board-shell { cursor: none; }
body.is-present.is-idle .w-resize { opacity: 0; }

@media (max-width: 760px) {
  .board-topbar { top: 6px; flex-wrap: wrap; justify-content: center; }
  .tb-select { min-width: 110px; }
}