/* modes.css — Present mode, touch / iPad UI. */
/* ── Present mode ── */
.present-exit{position:absolute;top:.875rem;right:.875rem;width:2rem;height:2rem;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.55);cursor:pointer;z-index:10;display:grid;place-items:center;opacity:.5;transition:opacity .2s,background .2s}
.present-exit:hover{opacity:1;background:rgba(255,255,255,.22)}
.present-exit.hidden{display:none}
.present-exit .material-icons-outlined{font-size:1.125rem}
body.present-mode .header,.present-mode .kk-lessons,.present-mode .kk-toolbar,.present-mode .add-menu,.present-mode .kk-settings{display:none!important}
body.present-mode #tavlan-chat-panel,body.present-mode #tavlan-hand-panel{display:none!important}
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.handraise"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.chat"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.comprehension"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.classcheck"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.groupmaker"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.picker"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.attention"]),
body.present-mode .widget:has(.widget-eyebrow[data-i18n="widget.brainbreak"]){display:none!important}
#view-planning:fullscreen .kk-toolbar,#view-planning:fullscreen .add-menu,#view-planning:fullscreen .kk-settings{display:none!important}
#view-planning:fullscreen #tavlan-chat-panel,#view-planning:fullscreen #tavlan-hand-panel{display:none!important}
#view-planning:-webkit-full-screen .kk-toolbar,#view-planning:-webkit-full-screen .add-menu,#view-planning:-webkit-full-screen .kk-settings{display:none!important}
#view-planning:-webkit-full-screen #tavlan-chat-panel,#view-planning:-webkit-full-screen #tavlan-hand-panel{display:none!important}
body.present-mode #view-planning{background:#000}
body.present-mode #kk-stage{overflow:visible}
.present-mode .widget .widget-head{display:none!important}
.present-mode .widget .widget-body{padding-top:.75rem!important}
.present-mode .widget-close,.present-mode .widget-grip{visibility:hidden}
/* ── Touch / iPad UI ─────────────────────────────────────────────────── */
.widget-touch-bar{display:none;position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);z-index:50;flex-direction:row;gap:.375rem;background:rgba(30,30,30,.82);backdrop-filter:blur(6px);border-radius:2rem;padding:.35rem .6rem;pointer-events:auto}
.wtb-move,.wtb-delete{display:flex;align-items:center;gap:.3rem;background:transparent;border:none;color:#fff;font-size:.75rem;font-weight:600;padding:.45rem .75rem;border-radius:1.5rem;cursor:pointer;min-height:2.75rem;min-width:2.75rem;white-space:nowrap;font-family:inherit;touch-action:none}
.wtb-move:active{background:rgba(255,255,255,.15)}
.wtb-delete:active{background:rgba(229,57,53,.35);color:#ffcdd2}
.wtb-lbl{font-size:.75rem}
/* Superseded by long-press-to-drag (drag.js) + the corner trash/close button
   below — move and delete both live elsewhere now, so this bar is retired. */
.touch-ui .widget-touch-bar{display:none!important}
/* Grips: larger and always-visible on touch */
.touch-ui .widget-grip{opacity:.5!important;transition:none}
.touch-ui .widget-grip[data-dir="se"],.touch-ui .widget-grip[data-dir="sw"],.touch-ui .widget-grip[data-dir="ne"],.touch-ui .widget-grip[data-dir="nw"]{width:2.75rem;height:2.75rem}
.touch-ui .widget-grip[data-dir="se"]::after,.touch-ui .widget-grip[data-dir="sw"]::after,.touch-ui .widget-grip[data-dir="ne"]::after,.touch-ui .widget-grip[data-dir="nw"]::after{width:1.1rem;height:1.1rem;border-width:3px}
.touch-ui .widget-grip[data-dir="e"],.touch-ui .widget-grip[data-dir="w"]{width:1.75rem;height:5rem}
.touch-ui .widget-grip[data-dir="n"],.touch-ui .widget-grip[data-dir="s"]{height:1.75rem;width:5rem}
/* Selected widget: bigger, fully opaque, higher-contrast resize handles */
.touch-ui .widget.wgt-selected .widget-grip{opacity:1!important;background-color:rgba(57,176,187,.16)}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="se"],.touch-ui .widget.wgt-selected .widget-grip[data-dir="sw"],.touch-ui .widget.wgt-selected .widget-grip[data-dir="ne"],.touch-ui .widget.wgt-selected .widget-grip[data-dir="nw"]{width:4.25rem!important;height:4.25rem!important;background-color:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 .1875rem .625rem rgba(20,30,35,.28);display:flex;align-items:center;justify-content:center}
/* Straddle the corner like the other 3 buttons, not inset inside it */
.touch-ui .widget.wgt-selected .widget-grip[data-dir="se"]{bottom:-1.2rem!important;right:-1.2rem!important}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="sw"]{bottom:-1.2rem!important;left:-1.2rem!important}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="ne"]{top:-1.2rem!important;right:-1.2rem!important}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="nw"]{top:-1.2rem!important;left:-1.2rem!important}
/* Clean icon-button look instead of the plain L-bracket corner mark.
   "open_in_full" is a symmetric maximize icon (arrows at BOTH ends) — no
   rotation of it ever reads as "pointing one way", which is why rotating it
   didn't fix the "wrong direction" complaint. Single-direction compass
   arrows (already in the Material Icons Outlined set) point unambiguously
   instead, one specific icon per corner, no rotation hacks needed. */
.touch-ui .widget.wgt-selected .widget-grip[data-dir="se"]::after,.touch-ui .widget.wgt-selected .widget-grip[data-dir="ne"]::after,.touch-ui .widget.wgt-selected .widget-grip[data-dir="sw"]::after,.touch-ui .widget.wgt-selected .widget-grip[data-dir="nw"]::after{
  font-family:'Material Icons Outlined';position:static;width:auto;height:auto;border:none;
  font-size:2.5rem;line-height:1;color:var(--main);-webkit-text-stroke:1px var(--main)
}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="se"]::after{content:'south_east'}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="ne"]::after{content:'north_east'}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="sw"]::after{content:'south_west'}
.touch-ui .widget.wgt-selected .widget-grip[data-dir="nw"]::after{content:'north_west'}
/* Edge-only resize handles (width- or height-only) — pre-existing, unrelated
   to this redesign. Hidden on touch since the corner grip already covers
   resizing and edge handles just add visual clutter/confusion. */
.touch-ui .widget.wgt-selected .widget-grip[data-dir="e"],
.touch-ui .widget.wgt-selected .widget-grip[data-dir="w"],
.touch-ui .widget.wgt-selected .widget-grip[data-dir="n"],
.touch-ui .widget.wgt-selected .widget-grip[data-dir="s"]{display:none!important}
/* Only one resize handle (bottom-right) on touch — dragging any corner does
   the same proportional resize, so having all 4 was redundant clutter, on
   top of also being the thing that collided with the action-button row. */
.touch-ui .widget.wgt-selected .widget-grip[data-dir="nw"],
.touch-ui .widget.wgt-selected .widget-grip[data-dir="ne"],
.touch-ui .widget.wgt-selected .widget-grip[data-dir="sw"]{display:none!important}
/* Bigger close / opacity / settings-gear buttons and icons in touch mode —
   still used as-is (inline in the header) for text/media/postit/tabs/imagerow
   widgets, whose header IS their formatting toolbar and stays visible always. */
/* Bigger everywhere now, not just touch — a Mac/PC mouse user got this same
   28px-button/14px-icon sizing as before, unaffected by all the touch-ui
   work above, until asked to make it consistent across input types too. */
.widget-close-btn,.widget-op-btn,.widget-edit-toggle{width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center}
.widget-close-btn .material-icons-outlined,.widget-op-btn .material-icons-outlined,.widget-edit-toggle .material-icons-outlined{font-size:1.5rem!important}
.touch-ui .widget-close-btn,.touch-ui .widget-op-btn,.touch-ui .widget-edit-toggle{width:3.5rem;height:3.5rem}
.touch-ui .widget-close-btn .material-icons-outlined,.touch-ui .widget-op-btn .material-icons-outlined,.touch-ui .widget-edit-toggle .material-icons-outlined{font-size:2rem!important}

/* ── Competitor-style selection UI (test) ──────────────────────────────
   Simple widgets (no inline toolbar) hide their header entirely until
   selected — move now happens via long-press anywhere on the widget
   (drag.js), so the header isn't needed just to sit there taking space. */
.touch-ui .widget{outline:2px solid transparent;outline-offset:2px;transition:outline-color .12s,transform .12s,box-shadow .12s}
.touch-ui .widget.wgt-selected{outline-color:var(--main)}
/* Long-press-to-drag (drag.js) visual feedback — without a visible header,
   users had no cue that a press had registered or that dragging was live. */
.touch-ui .widget.long-press-pending{transform:scale(.97)}
.touch-ui .widget.drag{transform:scale(1.03);box-shadow:0 .75rem 2rem rgba(20,30,35,.28);cursor:grabbing}
/* .widget has overflow:hidden inline (clips body content to the rounded
   corners) — override it while selected so the corner buttons (and, for
   every widget type, the resize-corner handles) can straddle the border like
   the competitor's, instead of being clipped. Content that relies on being
   clipped (long text, oversized images) may briefly spill past the rounded
   corners while a widget is selected — accepted trade-off for this test. */
.touch-ui .widget.wgt-selected{overflow:visible!important}
.touch-ui .widget:not(.wgt-selected) .widget-head:not(:has(.txt-ctrl)){display:none}
/* Action buttons live at their own true corners again — settings/edit-toggle
   top-left, delete top-right, the "…" menu bottom-left. Safe now that only
   the bottom-right resize grip still renders on touch (nw/ne/sw grips are
   display:none above), so these three corners are free. */
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)){
  position:static!important;background:none;border:none;box-shadow:none;padding:.3rem .5rem;min-height:0;
  display:flex!important;align-items:center;justify-content:space-between
}
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-op-btn,
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-close-btn{
  position:absolute!important;margin:0;background-color:rgba(255,255,255,.92)!important;
  border-radius:50%;box-shadow:0 .1875rem .625rem rgba(20,30,35,.28);z-index:20;
  width:4.25rem!important;height:4.25rem!important;
  display:flex!important;align-items:center!important;justify-content:center!important
}
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-op-btn{
  top:-1.2rem!important;left:-1.2rem!important;right:auto!important;bottom:auto!important
}
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-close-btn{
  top:-1.2rem!important;right:-1.2rem!important;left:auto!important;bottom:auto!important;color:#dc2626;
  /* Overrides the older ".touch-ui .widget-close-btn{opacity:.5}" rule below,
     written back when a separate touch-toolbar delete button was the
     primary way to delete on touch. This corner button is now that primary
     action, so it needs to be just as opaque as its "…" and settings
     siblings, not faded to half-strength. */
  opacity:1!important
}
/* Bottom-left "move" — the real, already-wired-up .wtb-move button (see
   drag.js makeDrag(): _attachDragHandle(widget, touchBtn) already gives it
   full working drag behaviour), not a decorative icon. The earlier attempt
   drew a fake move icon via a CSS ::after with pointer-events:none, which
   looked right but did nothing when touched/dragged on iPad — this is why
   it "didn't work well". .widget-touch-bar is already position:absolute
   directly on .widget (not nested in .widget-head), sidestepping the
   containing-block confusion that made earlier bottom-anchored attempts
   land in the wrong corner. Shown for every widget, always in this same
   slot — widgets with a real settings/edit-toggle button (weather, noise)
   no longer get a giant corner circle for it; it just stays inline in the
   (visible-when-selected) header bar instead, since there's no 5th corner
   to give it. */
.touch-ui .widget.wgt-selected .widget-touch-bar{
  display:flex!important;position:absolute!important;
  bottom:-1.2rem!important;left:-1.2rem!important;top:auto!important;right:auto!important;transform:none!important;
  width:4.25rem;height:4.25rem;border-radius:50%;padding:0;gap:0;
  background-color:rgba(255,255,255,.92)!important;box-shadow:0 .1875rem .625rem rgba(20,30,35,.28);
  align-items:center;justify-content:center;z-index:20
}
.touch-ui .widget.wgt-selected .widget-touch-bar .wtb-delete,
.touch-ui .widget.wgt-selected .widget-touch-bar .wtb-lbl{display:none!important}
.touch-ui .widget.wgt-selected .widget-touch-bar .wtb-move{
  min-width:0;min-height:0;width:100%;height:100%;padding:0;color:var(--main)
}
.touch-ui .widget.wgt-selected .widget-touch-bar .wtb-move .material-icons-outlined{font-size:2rem!important}
/* Top-center — a 5th slot along the top edge, clear of both the op-btn/
   close-btn corners (pinned at the true -1.2rem corners) and the settings
   button's own natural width, for the couple of widget types (weather,
   noise) that have a real settings/edit-toggle action and would otherwise
   fight close-btn for the top-right corner within the header's own flex
   flow. */
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-edit-toggle{
  position:absolute!important;top:-1.2rem!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translateX(-50%);margin:0;background-color:rgba(255,255,255,.92)!important;
  border-radius:50%;box-shadow:0 .1875rem .625rem rgba(20,30,35,.28);z-index:20;
  width:4.25rem!important;height:4.25rem!important;
  display:flex!important;align-items:center!important;justify-content:center!important
}
/* The gear icon is set inline per-widget-type with a tiny font-size (.875rem)
   — the earlier !important rule already bumps that up; add stroke weight so
   the thin outline glyph reads as boldly as the competitor's icon set. */
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-edit-toggle .material-icons-outlined{
  font-size:2.1rem!important;-webkit-text-stroke:.5px currentColor
}
/* Match the competitor's icon set: "…" instead of the water-drop, a trash
   can instead of the X. Base icon hidden via font-size:0; the swapped icon is
   drawn via ::after, absolutely centered over the whole button (rather than
   flowing inline from the now-zero-size parent glyph, which rendered it
   off-center — the earlier bug) and given a solid, saturated color so it
   doesn't wash out against the near-white circle background. */
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-op-btn .material-icons-outlined,
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-close-btn .material-icons-outlined{
  font-size:0!important;position:relative;width:100%;height:100%
}
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-op-btn .material-icons-outlined::after,
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-close-btn .material-icons-outlined::after{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1
}
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-op-btn .material-icons-outlined::after{content:'more_horiz';font-size:2.1rem;-webkit-text-stroke:.6px var(--main);color:var(--main)}
.touch-ui .widget.wgt-selected .widget-head:not(:has(.txt-ctrl)) .widget-close-btn .material-icons-outlined::after{content:'delete_outline';font-size:1.85rem;-webkit-text-stroke:1.4px #dc2626;color:#dc2626}
/* Taller widget-head drag area on touch */
.touch-ui .widget-head{min-height:3rem;padding:.5rem .75rem}
/* Hide header close button on touch (use touch toolbar delete instead) */
.touch-ui .widget-close-btn{opacity:.5}
/* Canvas tabs & toolbar: larger tap targets */
.touch-ui .kk-lesson{min-height:2.75rem;padding:.5rem .875rem}
.touch-ui .kk-toolbar button,.touch-ui .nm-btn{min-height:2.75rem;min-width:2.75rem}
/* Hover-revealed controls have no hover on touch — make them reachable.
   Widget headers/close buttons that normally appear on :hover are shown when the
   widget is tap-selected; per-tile action buttons are shown permanently. */
.touch-ui .widget.widget-no-head.wgt-selected .widget-head{opacity:1;pointer-events:auto}
.touch-ui .kk-canvas.bare-mode .widget.wgt-selected .widget-head .widget-close,
.touch-ui .widget.widget-bare.wgt-selected .widget-head .widget-close{opacity:1;pointer-events:auto}
.touch-ui .res-tile-btns{opacity:1;pointer-events:auto}
.touch-ui .kk-lesson .lesson-close{opacity:.55}
/* Bigger tappable action buttons on resource tiles */
.touch-ui .res-tile-btn{min-width:2.25rem;min-height:2.25rem}
/* Timer/stopwatch control buttons: guarantee a 44px tap target on touch */
.touch-ui .t2btn{min-width:2.75rem;min-height:2.75rem}
/* Larger slider thumbs on touch (opacity + noise sensitivity) */
.touch-ui input[type=range].opacity-slider{height:.6rem}
.touch-ui input[type=range].opacity-slider::-webkit-slider-thumb{width:1.65rem;height:1.65rem}
.touch-ui input[type=range].opacity-slider::-moz-range-thumb{width:1.65rem;height:1.65rem}
/* Noise sensitivity is a native (accent-color) slider; iOS already gives a large
   thumb, so just enlarge the grabbable track height instead of fighting the thumb */
.touch-ui .nm-threshold-slider{height:1.1rem}
/* Embed drag-shield: iframe widgets (YouTube/Slides/web) eat all pointer events,
   so on touch a transparent shield over the iframe lets the widget be tap-selected
   and dragged. It lifts once the widget is selected, making the embed interactive. */
.embed-shield{position:absolute;inset:0;z-index:5;background:transparent;touch-action:none;display:none}
.touch-ui .widget:not(.wgt-selected) .embed-shield{display:block}
/* ── Touch target sizes: mirror .touch-ui rules as a CSS media query so
   automated audits (which don't run JS) also see adequate tap target sizes ── */
@media (any-pointer: coarse) {
  .widget-close{width:2.75rem;height:2.75rem}
  .widget-close-btn,.widget-op-btn{width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center}
  .snw-refresh{min-height:2.75rem;min-width:2.75rem;padding:.5rem .75rem}
  .traffic-sz-btn{min-height:2.75rem;min-width:2.75rem;padding:.5rem .6rem}
  .traffic-edit-btn{min-height:2.75rem;min-width:2.75rem;padding:.625rem}
  .traffic-label-inp{min-height:2.75rem}
  .kk-toolbar button,.nm-btn{min-height:2.75rem;min-width:2.75rem}
  .t2btn{min-width:2.75rem;min-height:2.75rem}
  .res-tile-btn{min-width:2.25rem;min-height:2.25rem}
}
.present-mode .nm-bottom-row,.present-mode .widget-edit-toggle{display:none!important}
.layout-locked .widget-grip{display:none!important}
.layout-locked .widget{cursor:default}