/* NO_VERDICT: unexecuted rotation-dialog styling draft. */
.rotation-dialog {
  box-sizing: border-box;
  width: min(600px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  color: #fff;
  background: linear-gradient(145deg, #17131f, #0b0b10 70%);
  border: 1px solid #8550ad;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #d55a9228, 0 1px 0 #66d8e34d inset, 0 20px 64px #000b;
  font: 400 14px/1.55 system-ui, sans-serif;
  color-scheme: dark;
  overflow-wrap: anywhere;
}
.rotation-dialog::backdrop { background: #000b; }
.rotation-dialog *, .rotation-dialog *::before, .rotation-dialog *::after { box-sizing: border-box; }
.rotation-dialog .rotation-top { display: flex; align-items: flex-start; gap: 12px; }
.rotation-dialog h2 { flex: 1; min-width: 0; margin: 0; font-size: 21px; line-height: 1.35; }
.rotation-dialog h3 { margin: 20px 0 10px; font-size: 16px; }
.rotation-dialog p { margin: 12px 0; }
.rotation-dialog button, .rotation-dialog select {
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  color: #fff;
  background: #24202e;
  border: 1px solid #665278;
  border-radius: 10px;
  font: inherit;
}
.rotation-dialog button { cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.rotation-dialog button:hover { background: #352a44; }
.rotation-dialog button:disabled { opacity: .5; cursor: not-allowed; }
.rotation-dialog button:focus-visible, .rotation-dialog select:focus-visible, .rotation-dialog input:focus-visible { outline: 2px solid #85e9f4; outline-offset: 3px; }
.rotation-dialog .rotation-close { flex: 0 0 44px; width: 44px; padding: 4px; font-size: 25px; line-height: 1; }
.rotation-dialog > label { display: block; margin: 16px 0 6px; font-weight: 600; }
.rotation-dialog select { display: block; width: 100%; }
.rotation-dialog fieldset { min-width: 0; margin: 18px 0 0; padding: 12px; border: 1px solid #51405f; border-radius: 10px; }
.rotation-dialog legend { max-width: 100%; padding: 0 6px; white-space: normal; }
.rotation-dialog .rotation-option { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 6px 0; padding: 10px; border: 1px solid #554163; border-radius: 10px; background: #201a29; cursor: pointer; }
.rotation-dialog .rotation-option:has(input:checked) { background: #6935a0; border-color: #bc89ed; box-shadow: inset 0 2px 0 #dbb4ff55, inset 0 -3px 0 #2b103e88, 0 2px 5px #0008; }
.rotation-dialog .rotation-option input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #cba0ff; }
.rotation-dialog .rotation-option span { min-width: 0; }
.rotation-dialog .rotation-list { list-style: none; margin: 0; padding: 0; }
.rotation-dialog .rotation-list li { display: grid; grid-template-columns: 102px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #584264; }
.rotation-dialog .rotation-list time { font-variant-numeric: tabular-nums; }
.rotation-dialog .rotation-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rotation-dialog .rotation-controls button { flex: 1 1 100px; }
.rotation-dialog .rotation-primary { background: #6935a0; border-color: #bc89ed; box-shadow: inset 0 2px 0 #dbb4ff55, inset 0 -3px 0 #2b103e88, 0 2px 5px #0008; }
.rotation-dialog .rotation-primary:hover { background: #7b42b5; }
.rotation-dialog .rotation-storage-error { padding: 10px; border: 1px solid #e48bad; border-radius: 10px; background: #361927; color: #ffd8e6; }
.rotation-dialog [hidden] { display: none; }
@media (max-width: 380px) {
  .rotation-dialog { padding: 14px; }
  .rotation-dialog h2 { font-size: 19px; }
  .rotation-dialog fieldset { padding: 8px; }
  .rotation-dialog .rotation-list li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* Rotation adds a third toolbar action; preserve a readable clock on narrow screens. */
#calendar-panel .cal-toolbar .cal-actions{flex-wrap:wrap;max-width:46%}
#calendar-panel .cal-toolbar #cal-rotation{white-space:normal;max-width:100%}
@media(max-width:1100px){
 #calendar-panel .cal-toolbar .cal-actions{max-width:100%;grid-column:1 / -1;grid-row:3;justify-self:stretch;justify-content:center;width:100%}
 #calendar-panel .cal-toolbar #cal-clock{grid-column:1 / -1;grid-row:2;min-width:0;width:100%;text-align:center}
}