/* Commitment creation, ordering and disclosure. Scoped to Status controls. */
.commitments-heading,.wizard-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.commitments-heading h2{margin:0}
.commitments-heading{margin-bottom:18px}
#newCommitmentBtn,.commitment-wizard button,.commit-move-menu button{min-height:44px;touch-action:manipulation}
#newCommitmentBtn,.wizard-actions button,.wizard-heading button,.commit-move-menu button{border:1px solid var(--line2);background:var(--panel2);color:var(--text);border-radius:8px;padding:10px 14px;font:inherit;font-size:12px;cursor:pointer}
#newCommitmentBtn,.wizard-actions .wizard-primary{border-color:var(--rank);background:var(--rank-soft)}
.commitment-wizard{margin-top:20px;padding:20px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);scroll-margin-top:130px}
.wizard-heading h3{margin:0;font-size:17px;font-weight:600}
#commitmentStepLabel{color:var(--muted);font-size:12px;margin:18px 0}
.commitment-step h4{font-size:16px;margin:0 0 12px}
.wizard-hint{font-size:12px;line-height:1.7;color:var(--muted)}
.commitment-wizard .adder{margin-top:8px}
.commitment-wizard .adder input{min-width:0;font-size:16px}
.commitment-wizard .field-label{display:block;margin-top:18px}
.field-optional{text-transform:none;letter-spacing:0}
.commitment-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.commitment-types button{padding:14px;text-align:left;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}
.commitment-types button b{font-size:13px;display:block}
#commitmentGeass b{display:flex;align-items:center;gap:10px}
#commitmentGeassIcon{display:inline-flex;width:28px;height:16px;flex:none}
#commitmentGeassIcon svg{width:100%;height:100%;filter:drop-shadow(0 0 3px rgba(220,38,38,.35))}
.commitment-types button span{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:6px}
.commitment-types button.on{border-color:var(--rank);background:var(--rank-soft)}
.wizard-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}
.wizard-actions button{max-width:100%;white-space:normal}
.wizard-actions .geass-btn{margin-left:auto;color:var(--loss);border-color:var(--loss)}
.wizard-actions .geass-btn.armed{background:#dc2626;color:#fff;border-color:#dc2626;font-weight:600}
.wizard-actions button:disabled{opacity:.35;cursor:default}
.commitment-disclosure-heading{margin:20px 0 0}
.commitment-disclosure{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.commitment-disclosure>span{color:inherit}
.commitment-disclosure>span>span{color:var(--rank)}
.commitment-disclosure .panel-arrow{font:14px sans-serif;color:var(--muted)}
.habit-streaks-section{padding:12px 18px}
.habit-streaks-section .commitment-disclosure-heading{margin:0}
.habit-streaks-section #streakList:not([hidden]){margin-top:8px}
#commitmentWizard[hidden],.commitment-wizard [hidden],#commitMoveMenu[hidden],#commitmentMechanics[hidden],#streakList[hidden]{display:none!important}
.commit-drag-handle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:0;background:transparent;color:var(--muted);cursor:grab;touch-action:none;border-radius:8px}
.commit-drag-handle>span{width:14px;height:18px;background:radial-gradient(circle,currentColor 1.4px,transparent 1.8px) 0 0/7px 6px}
.commit-drag-handle:focus-visible{background:var(--rank-soft);color:var(--text)}
@media(hover:hover) and (pointer:fine){.commit-drag-handle:hover{background:var(--rank-soft);color:var(--text)}}
#commitList .task .commit-drag-handle{grid-row:1;grid-column:-2/-1;justify-self:end;align-self:start}
#commitList .task .del{grid-row:2}
#commitList .task .geass-row{grid-column:3/-1;min-width:0}
@media(min-width:521px){#commitList .task .sched{grid-column:3/-2}}
@media(max-width:520px){
  #commitList .task .commit-drag-handle{grid-row:2;grid-column:1/3;justify-self:start;align-self:center}
}
#commitList .task .geass-pill{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.commit-moving{opacity:.22;outline:1px dashed var(--muted);outline-offset:-1px}
.commit-drop-before{box-shadow:0 -3px 0 var(--rank)!important}
.commit-drop-after{box-shadow:0 3px 0 var(--rank)!important}
.commit-drag-card{position:fixed!important;top:0;left:0;z-index:110;pointer-events:none;box-sizing:border-box;margin:0!important;opacity:.58;box-shadow:0 10px 28px #0005,0 2px 8px #0003;outline:1px solid var(--rank);will-change:transform;transition:none!important;animation:none!important}
.commit-drag-card *{transition:none!important;animation:none!important}
.commit-drag-card .commit-drag-handle{background:var(--rank-soft);color:var(--text)}
.commit-dragging,.commit-dragging *{cursor:grabbing!important;user-select:none!important}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.commit-drag-card{opacity:1}}
.commit-move-menu{position:fixed;z-index:110;width:190px;max-width:calc(100vw - 16px);padding:10px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);box-shadow:0 10px 35px #0009}
.commit-move-menu span{display:block;font-size:12px;overflow-wrap:anywhere;margin:4px 4px 10px}
.commit-move-menu button{display:block;width:100%;margin-top:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:400px){.commitment-wizard{padding:14px}.commitment-types{grid-template-columns:1fr}.commitment-wizard .daypick{gap:6px}}
/* B4: "0 · Optional" sits on its own row above 1x-7x in both times-per-week pickers */
#freqpick:has(.freq-zero),#editSchedPick:has(.freq-zero){flex-wrap:wrap}
#freqpick .freq-zero,#editSchedPick .freq-zero{flex:1 0 100%;letter-spacing:.02em}
.freq-zero-note{flex:1 0 100%;margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}