dialog#planner {
  position: fixed; inset: 0; margin: auto; width: min(960px, calc(100vw - 36px));
  max-width: none; max-height: min(860px, calc(100dvh - 48px));
  background: var(--panel); color: var(--ink); border: 0; padding: 0;
  font: inherit; user-select: text; overflow: auto; overscroll-behavior: contain;
}
#planner::backdrop { background: rgba(7,6,15,.65); backdrop-filter: blur(3px); }
#planner .planner-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: var(--panel-2); border-bottom: 3px solid var(--frame); }
#planner h2 { font-size: clamp(23px, 4vw, 34px); color: #71cde2; }
#planner h3 { font-size: 24px; margin: 0 0 8px; }
#planner p { line-height: 1.6; }
#planner .planner-body { padding: 26px; display: grid; gap: 22px; }
#planner .planner-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
#planner .muted { color: var(--dust); font-size: 15px; }
#planner button, #planner .btn { display: inline-block; background: var(--panel-2); border: 2px solid var(--dust); color: var(--ink); padding: 9px 13px; font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
#planner button:hover, #planner button:focus-visible { border-color: #71cde2; }
#planner button.primary { background: #007ea7; border-color: #71cde2; }
#planner button:disabled { opacity: .6; cursor: wait; }
#planner button[aria-pressed=true] { background: #3d653d; border-color: var(--ok); }
#planner button[data-answer=no][aria-pressed=true] { background: #713841; border-color: var(--down); }
#planner button[data-answer=maybe][aria-pressed=true] { background: #705c31; border-color: var(--slow); }
#planner .poll { padding: 22px; background: #100e25; border: 2px solid var(--panel-2); }
#planner .poll-description { white-space: pre-wrap; margin: 12px 0; font-size: 16px; }
#planner .span { display: grid; grid-template-columns: minmax(200px,1fr) auto; gap: 12px; padding: 18px 0; border-top: 2px solid var(--panel-2); align-items: start; }
#planner .span strong { display: block; font-size: 17px; line-height: 1.6; }
#planner .span.chosen { border-color: var(--ok); }
#planner .span small { display: block; margin-top: 4px; }
#planner .votes { display: flex; gap: 7px; flex-wrap: wrap; justify-content: end; }
#planner details { grid-column: 1 / -1; font-size: 14px; line-height: 1.8; color: var(--dust); }
#planner summary { cursor: pointer; }
#planner .manage { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
#planner form { display: grid; gap: 18px; }
#planner label { display: grid; gap: 8px; font-size: 15px; }
#planner input, #planner textarea, #planner select { width: 100%; min-width: 0; background: var(--space); border: 2px solid var(--dust); color: var(--ink); font: inherit; padding: 11px; font-size: 16px; }
#planner textarea { min-height: 80px; resize: vertical; }
#planner .date-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
#planner .date-row button { height: 46px; }
#planner fieldset { border: 0; display: grid; gap: 15px; padding: 0; min-width: 0; }
#planner legend { margin-bottom: 12px; color: #71cde2; }
#planner .message { padding: 12px 16px; border-left: 4px solid var(--slow); background: var(--panel-2); font-size: 15px; line-height: 1.6; }
#planner .message:empty { display: none; }
#planner .empty { padding: 35px 12px; text-align: center; }
#planner .delete-confirm { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media(max-width: 640px) {
  #planner .planner-body, #planner .planner-head { padding: 18px; }
  #planner .poll { padding: 14px; }
  #planner .span { grid-template-columns: 1fr; }
  #planner .votes { justify-content: start; }
  #planner .date-row { grid-template-columns: 1fr 1fr; }
  #planner .date-row button { grid-column: 1/-1; height: auto; justify-self: end; }
}