/* ---- Google Calendar two-way sync panel (js/gcalsync.js) ----
   Sits inside the Calendar sync dialog (.cal-sync-body) or Settings; reuses
   .settings-btn / .settings-input / .cal-sync-label / .cal-sync-sub and only
   adds layout. Theme tokens only, so it follows light and dark. */
.gcal-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.gcal-panel[hidden] { display: none; }
.gcal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gcal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gcal-state { font-size: 13px; color: var(--text-light); }
.gcal-form { display: flex; flex-direction: column; gap: 10px; }
.gcal-field { display: flex; flex-direction: column; gap: 4px; }
.gcal-field-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.gcal-field .settings-input { max-width: 100%; }
.gcal-hint { font-size: 12px; color: var(--text-faint); line-height: 1.45; }
.gcal-imports { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.gcal-import, .gcal-enable {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.gcal-import span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gcal-status { font-size: 12.5px; color: var(--text-light); line-height: 1.5; }
.gcal-status-err { color: var(--danger); }
.gcal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gcal-disconnect { color: var(--danger); }
.gcal-msg { font-size: 12.5px; color: var(--text-light); }
.gcal-msg[hidden] { display: none; }

@media (max-width: 620px) {
  .gcal-row { flex-direction: column; align-items: flex-start; }
  .gcal-actions .settings-btn { flex: 1 1 auto; }
}