/* ── TabSwitcher small screen ────────────────────────────── */
@media (max-width: 360px) {
  .tab-grid { grid-template-columns: 1fr; }
  .tab-card { min-height: 58px; }
}

/* ── Responsive dashboard ────────────────────────────────── */
@media (max-width: 1120px) {
  body { overflow: auto; }
  .shell { height: auto; min-height: 100vh; }
  .dashboard { grid-template-columns: 1fr 1fr; }
  .media-panel:not([data-dashboard-size="full"]) { grid-column: 1 / -1; grid-row: span 1; }
}

@media (max-width: 720px) {
  .shell { padding: 12px; }
  .topbar { grid-template-columns: 1fr; justify-items: start; }
  .clock { text-align: left; }
  .status-strip { justify-self: start; }
  .dashboard { grid-template-columns: 1fr; }
  .dashboard-widget,
  .dashboard-widget[data-dashboard-size="wide"],
  .dashboard-widget[data-dashboard-size="large"],
  .dashboard-widget[data-dashboard-size="full"] { grid-column: span 1; }
  .dashboard-widget[data-dashboard-size="tall"],
  .dashboard-widget[data-dashboard-size="large"],
  .dashboard-widget[data-dashboard-size="full"] { grid-row: span 1; }
  .media-panel { grid-template-columns: 1fr; }
  .media-art { max-width: 160px; }
  .event-form-row { flex-direction: column; align-items: stretch; }
  .system-grid { grid-template-columns: 1fr; }
}

/* ── Portrait (e.g. Xeneon Edge mounted vertically 720×2560) ──
   Tiles stack with natural height; tall/large tiles stop spanning
   two rows so the Bento reflows cleanly into a single tall column. */
@media (orientation: portrait) {
  .dashboard { grid-template-rows: none; grid-auto-rows: auto; }
  .dashboard-widget[data-dashboard-size="tall"],
  .dashboard-widget[data-dashboard-size="large"],
  .dashboard-widget[data-dashboard-size="full"] { grid-row: auto; }
}

@media (max-height: 720px) and (min-width: 700px) {
  .shell { padding: 12px 14px; gap: 10px; }
  .topbar { gap: 10px; min-height: 34px; }
  .clock { gap: 3px; }
  .clock-h,
  .clock-m { font-size: 38px; }
  .clock-sep { font-size: 31px; margin-bottom: 1px; }
  .clock-meta { gap: 5px; }
  .clock-date { font-size: 11px; }
  .dashboard { gap: 10px; }
  .media-panel { padding: 14px; gap: 14px; }
  .mic-panel { padding: 12px 14px; row-gap: 8px; column-gap: 14px; }
  .side-panel { padding: 14px; gap: 8px; }
  .system-block { gap: 8px; }
  .system-tabs { gap: 8px; padding: 0 2px 2px; }
  .system-tabs-left { padding: 3px; gap: 3px; }
  .sys-tab { font-size: 12px; padding: 6px 13px; }
  .sys-uptime { padding: 5px 9px; font-size: 11.5px; }
  .system-grid,
  .audio-block { gap: 7px 6px; }
  .stat-box { min-height: 92px; padding: 9px 10px 8px; gap: 3px; }
  .stat-value,
  .bw-value { font-size: 18px; }
  .volume-wrap { gap: 7px; padding: 8px 10px; }
  .device-row { min-height: 50px; padding: 9px 11px; }
}

@media (max-height: 560px) and (min-width: 700px) {
  .shell { padding: 10px 14px; gap: 10px; }
  .topbar { min-height: 30px; }
  .clock-time { font-size: 24.5px; }
  .dashboard {
    gap: 10px;
    grid-template-rows: minmax(0, 1fr) 148px;
  }
  /* Short screens (incl. the Xeneon Edge itself) skip the ambient drop shadow
     but keep the hairline top light — it's a single inset line, costs nothing,
     and carries the card finish on the device the dashboard is built for.
     The drop now lives on the tile WRAPPER (see DashboardGrid.css), so this
     clears the token instead of rewriting .panel's shadow. A tile that asks for
     a shadow of its own still gets one: applyTileStyle() writes --panel-drop
     inline on the wrapper, which wins over this. */
  .panel { box-shadow: inset 0 1px 0 var(--panel-topline); }
  .grid-stack-item { --panel-drop: none; }
  .media-panel { padding: 16px 12px; }
  .mic-panel { padding: 18px 20px; gap: 8px; }
  .status-label { min-height: 22px; padding: 0 12px; font-size: 11px; }
  .mic-context { font-size: 12.5px; }
  .btn-wrap { width: 96px; height: 96px; margin: 0; }
  .mic-btn { width: 68px; height: 68px; }
  .mic-btn svg { width: 26px; height: 26px; }
  .mic-vol { max-width: 250px; padding: 9px 12px; gap: 6px; border-radius: 12px; }
  .mic-vol-head { font-size: 10.5px; }
  .side-panel { padding: 14px; gap: 8px; }
  .media-art { max-width: 132px; }
  .media-title { font-size: 23.5px; }
  .media-content { gap: 10px; }
  .ring { inset: 2px; }
  .ring2 { inset: -7px; }
  .stat-box { min-height: 98px; padding: 10px 12px; gap: 4px; }
  .stat-value { font-size: 20px; margin-top: 3px; }
  .volume-wrap { padding: 10px; }
  .device-row { min-height: 50px; padding: 9px 11px; }
}

/* ── Single-panel embed modes (?panel=mic|notes|media|system|audio) ── */
body[data-panel] { overflow: hidden; }
body[data-panel] .shell {
  height: 100vh;
  min-height: 0;
  padding: 8px;
  gap: 6px;
}
body[data-panel] .topbar {
  grid-template-columns: 1fr auto;
  min-height: 0;
  padding: 2px 8px;
  background: rgba(15,17,21,0.55);
}
body[data-panel] .topbar .brand,
body[data-panel] .topbar .clock { display: none; }
body[data-panel] .topbar .quickbar { display: flex; }
body[data-panel] .topbar .qbtn-lock,

body[data-panel] .topbar .qbtn-custom,
body[data-panel] .topbar .qbtn-separator { display: none; }
body[data-panel] .topbar .top-actions { justify-self: end; }
body[data-panel] .lang-toggle { padding: 2px; }
body[data-panel] .lang-seg { padding: 4px 10px; font-size: 11px; }
body[data-panel] .dashboard {
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 0;
}
body[data-panel] .dashboard-widget {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}
body[data-panel] .panel { height: 100%; overflow: hidden; }

body[data-panel="media"] .media-panel { padding: 8px; }
body[data-panel="media"] .calendar-view { gap: 6px; }
body[data-panel="media"] .calendar-top { gap: 8px; }
body[data-panel="media"] .calendar-kicker { font-size: 10px; }
body[data-panel="media"] .calendar-title { font-size: 20px; }
body[data-panel="media"] .upcoming-block { max-height: 56px; }

body[data-panel="media"] .mic-panel,
body[data-panel="media"] .notes-panel,
body[data-panel="media"] .side-panel,
body[data-panel="media"] .audio-panel,
body[data-panel="media"] .agenda-panel { display: none; }

body[data-panel="mic"] .media-panel,
body[data-panel="mic"] .side-panel,
body[data-panel="mic"] .notes-panel,
body[data-panel="mic"] .audio-panel,
body[data-panel="mic"] .agenda-panel { display: none; }

body[data-panel="mic"] .shell {
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(16px, 3vw, 36px);
  gap: 0;
}

body[data-panel="mic"] .dashboard,
body[data-panel="mic"] .mic-panel {
  height: 100%;
  min-height: 0;
}

body[data-panel="mic"] .topbar {
  position: fixed;
  top: clamp(8px, 1.8vw, 20px);
  right: clamp(10px, 2.2vw, 28px);
  z-index: 5;
  padding: 0;
  background: transparent;
}

/* Mic panel layout managed by @container micpanel in MicPanel.css */

body[data-panel="notes"] .media-panel,
body[data-panel="notes"] .side-panel,
body[data-panel="notes"] .mic-panel,
body[data-panel="notes"] .audio-panel,
body[data-panel="notes"] .agenda-panel { display: none; }

body[data-panel="system"] .media-panel,
body[data-panel="system"] .mic-panel,
body[data-panel="system"] .notes-panel,
body[data-panel="system"] .audio-panel,
body[data-panel="system"] .agenda-panel { display: none; }

body[data-panel="audio"] .media-panel,
body[data-panel="audio"] .mic-panel,
body[data-panel="audio"] .notes-panel,
body[data-panel="audio"] .side-panel,
body[data-panel="audio"] .agenda-panel { display: none; }

body[data-panel="agenda"] .media-panel,
body[data-panel="agenda"] .mic-panel,
body[data-panel="agenda"] .notes-panel,
body[data-panel="agenda"] .side-panel,
body[data-panel="agenda"] .audio-panel { display: none; }

/* ── Calendar / mini-player compact ─────────────────────── */
@media (max-width: 640px), (max-height: 620px) {
  .calendar-view { gap: 6px; }
  .calendar-kicker { display: none; }
  .calendar-title { font-size: 20px; }
  .calendar-mini-player { padding: 6px 7px; border-radius: 10px; gap: 8px; }
  .mini-now { gap: 7px; }
  .mini-cover { width: 32px; height: 32px; border-radius: 8px; }
  .mini-sub { font-size: 11px; }
  .mini-title { font-size: 12.5px; }
  .mini-action { width: 25px; height: 25px; }
  .calendar-card { padding: 7px; gap: 4px; border-radius: 12px; }
  .calendar-nav { gap: 6px; }
  .calendar-month { font-size: 14.5px; }
  .calendar-nav-actions { gap: 4px; }
  .calendar-arrow { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 8px; font-size: 11px; }
  .calendar-weekdays, .calendar-days { gap: 3px; }
  .calendar-weekdays span { font-size: 9px; }
  .day-cell { font-size: 12.5px; border-radius: 6px; }
  .upcoming-block { padding: 6px 7px; gap: 4px; border-radius: 10px; }
  .upcoming-list { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 4px; }
  .upcoming-item { gap: 5px; padding: 4px 6px; border-radius: 7px; }
  .upcoming-name { font-size: 11px; }
  .upcoming-when { font-size: 10px; }
}

@media (max-height: 460px) {
  body[data-panel="media"] .shell { padding: 3px; gap: 3px; }
  body[data-panel="media"] .topbar { padding: 0 4px; }
  body[data-panel="media"] .lang-toggle { padding: 1px; }
  body[data-panel="media"] .lang-seg { padding: 3px 8px; font-size: 10px; }
  body[data-panel="media"] .media-panel { padding: 5px; }
  body[data-panel="media"] .calendar-view { grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; }
  body[data-panel="media"] .calendar-top { grid-row: 1; }
  body[data-panel="media"] .calendar-card { grid-row: 2; }
  body[data-panel="media"] .upcoming-block { grid-row: 3; }
  body[data-panel="media"] .calendar-top { min-height: 22px; }
  body[data-panel="media"] .calendar-title { font-size: 15.5px; }
  body[data-panel="media"] .calendar-mini-btn { height: 22px; padding: 0 7px; font-size: 10px; }
  body[data-panel="media"] .calendar-mini-player.show { padding: 3px 5px; border-radius: 8px; }
  body[data-panel="media"] .calendar-mini-player .mini-cover { width: 24px; height: 24px; border-radius: 6px; }
  body[data-panel="media"] .calendar-mini-player .mini-title { font-size: 10px; }
  body[data-panel="media"] .calendar-mini-player .mini-sub { font-size: 10px; }
  body[data-panel="media"] .calendar-mini-player .mini-actions { gap: 3px; }
  body[data-panel="media"] .calendar-mini-player .mini-action { width: 20px; height: 20px; background: rgba(255,255,255,0.06); }
  body[data-panel="media"] .calendar-card { padding: 4px; gap: 2px; }
  body[data-panel="media"] .calendar-nav { gap: 4px; }
  body[data-panel="media"] .calendar-month { font-size: 12.5px; }
  body[data-panel="media"] .calendar-arrow { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; font-size: 10px; }
  body[data-panel="media"] .calendar-arrow svg { width: 12px; height: 12px; }
  body[data-panel="media"] .calendar-weekdays,
  body[data-panel="media"] .calendar-days { gap: 2px; }
  body[data-panel="media"] .calendar-weekdays span { font-size: 8px; letter-spacing: 0; }
  body[data-panel="media"] .day-cell { font-size: 10px; border-radius: 4px; }
  body[data-panel="media"] .day-cell.has-events::after { width: 3px; height: 3px; bottom: 2px; }
  body[data-panel="media"] .upcoming-block { height: 22px; max-height: 22px; padding: 3px 4px; gap: 0; border-radius: 7px; }
  body[data-panel="media"] .upcoming-title { display: none; }
  body[data-panel="media"] .upcoming-list { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 3px; }
  body[data-panel="media"] .upcoming-item { padding: 2px 4px; gap: 4px; }
  body[data-panel="media"] .upcoming-name { font-size: 10px; }
  body[data-panel="media"] .upcoming-when { font-size: 9px; }
  body[data-panel="media"] .upcoming-list .event-empty { padding: 2px 4px; border-radius: 6px; font-size: 10px; }
}

/* Hide day-modal / notifications in panels that don't own the calendar */
body[data-panel="mic"] #day-modal,
body[data-panel="mic"] .xtoast-stack,
body[data-panel="notes"] #day-modal,
body[data-panel="notes"] .xtoast-stack,
body[data-panel="system"] #day-modal,
body[data-panel="system"] .xtoast-stack,
body[data-panel="audio"] #day-modal,
body[data-panel="audio"] .xtoast-stack { display: none !important; }