/* Strategia: choosing a strategy, its settings and the weekly dashboard. */
.strategy-status { min-height: 0; margin: 4px 0 0; }
.strategy-status:empty { display: none; }
.strategy-panel { margin-top: 14px; }
.strategy-intro { margin-bottom: 18px; }
.strategy-intro h2 { margin: 0; }
.strategy-intro p { max-width: 680px; margin-top: 4px; font-size: 14px; }
.strategy-intro .eyebrow { margin: 0; }
.strategy-intro .button-text { margin-top: 6px; padding-left: 0; }
.strategy-empty { margin: 0; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; font-size: 14px; color: var(--muted); }
.strategy-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink); font-size: 14px; }
.strategy-list li + li { margin-top: 4px; }
.strategy-list .is-warning { color: var(--amber); font-weight: 600; }
.strategy-badge { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--green-soft); color: var(--green); }
.strategy-card { min-width: 0; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.strategy-card h3 { margin: 0; font-size: 16px; }

/* Kinds of posts */
.strategy-mix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.strategy-kind { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.6; white-space: nowrap; background: var(--soft); color: var(--muted); }
.strategy-kind strong { font-weight: 700; }
.strategy-kind.is-poradnik { background: #e8f0f8; color: #1f4a73; }
.strategy-kind.is-oferta { background: var(--green-soft); color: var(--green); }
.strategy-kind.is-ciekawostka { background: #f2eefa; color: #59408a; }
.strategy-kind.is-lokalnie { background: #e6f3f2; color: #22605a; }
.strategy-kind.is-pytanie { background: var(--amber-soft); color: var(--amber); }

/* 1. Choosing */
.strategy-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.strategy-preset { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.strategy-preset.is-current { border: 2px solid var(--navy); padding: 19px; }
.strategy-preset-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.strategy-preset h3 { margin: 0; font-size: 18px; }
.strategy-preset p { margin: 0; font-size: 14px; }
.strategy-preset .eyebrow { margin-top: 10px; font-size: 11px; }
.strategy-tagline { color: var(--navy); font-weight: 600; }
.strategy-labelled { color: var(--muted); }
.strategy-labelled strong { color: var(--ink); font-weight: 600; }
.strategy-examples { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.strategy-preset > button { margin-top: auto; align-self: flex-start; }
.strategy-preset > .strategy-examples { margin-bottom: 14px; }
.strategy-how { list-style: none; counter-reset: how; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; }
.strategy-how li { counter-increment: how; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--soft); font-size: 14px; }
.strategy-how li::before { content: "0" counter(how); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.strategy-how span { color: var(--muted); }

/* 2. Settings */
.strategy-setup-form { max-width: 760px; }
.strategy-setup-form > h3 + .small-note { margin: 2px 0 10px; }
.strategy-steppers { display: flex; flex-direction: column; }
.strategy-stepper { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--soft); }
.strategy-stepper:first-child { border-top: 0; }
.strategy-stepper > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.strategy-stepper-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.strategy-stepper-controls output { min-width: 22px; text-align: center; font-weight: 700; font-size: 16px; color: var(--navy); }
.strategy-stepper-controls .button-square { width: 38px; height: 38px; min-height: 38px; padding: 0; font-size: 18px; line-height: 1; }
.strategy-sum { margin: 10px 0 0; font-weight: 600; color: var(--navy); }
.strategy-sum.is-error { color: var(--red); }
.strategy-setup-form .platform-picker { margin-top: 18px; }
.strategy-setup-form textarea { min-height: 72px; }
.strategy-consent { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--soft); }
.strategy-consent h3 { font-size: 14px; }
.strategy-setup-form .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* 3. Dashboard */
.strategy-dashboard { display: flex; flex-direction: column; gap: 16px; }
.strategy-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px 28px; padding: 20px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--navy); }
.strategy-hero.is-paused { box-shadow: inset 4px 0 0 var(--line-strong); }
.strategy-hero-copy { min-width: 0; overflow-wrap: anywhere; }
.strategy-hero-copy .eyebrow { margin: 0; }
.strategy-hero-copy h2 { margin: 2px 0 0; font-size: 22px; }
.strategy-hero-copy > p { margin: 6px 0 0; font-size: 14px; }
.strategy-hero-copy .strategy-mix { margin-top: 10px; }
.strategy-hero-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.strategy-agent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--soft); }
.strategy-agent > div { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.strategy-agent strong { color: var(--navy); }
.strategy-agent-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--line-strong); }
.strategy-agent-dot.is-on { background: var(--green); }
.strategy-agent-dot.is-busy { background: #2f6aa3; animation: strategy-pulse 1.2s ease-in-out infinite; }
@keyframes strategy-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .strategy-agent-dot.is-busy { animation: none; } }
.strategy-hero-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.strategy-note { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 16px; border: 1px solid #e3d3b8;
  border-radius: var(--radius); background: var(--amber-soft); color: var(--amber); font-size: 14px; }
.strategy-note p { margin: 0; flex: 1 1 320px; }
.strategy-note .is-error { color: var(--red); }

.strategy-section { padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.strategy-section > h2, .strategy-week-head h2 { margin: 0; font-size: 17px; }
.strategy-section > h2 { margin-bottom: 10px; }
.strategy-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.strategy-todo { display: flex; flex-direction: column; }
.strategy-todo-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--soft); }
.strategy-todo-row:first-child { border-top: 0; padding-top: 0; }
.strategy-todo-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.strategy-todo-row > button { flex: none; }

.strategy-week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 18px; margin-bottom: 10px; }
.strategy-progress { display: flex; align-items: center; gap: 10px; }
.strategy-bar { display: block; width: 140px; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.strategy-bar span { display: block; height: 100%; background: var(--green); }
.strategy-week-plan { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.strategy-week-plan p { margin: 0; }
.strategy-slots { display: flex; flex-direction: column; }
.strategy-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--soft); }
.strategy-slot:first-child { border-top: 0; }
.strategy-slot-day { display: flex; flex-direction: column; line-height: 1.3; }
.strategy-slot-day strong { color: var(--navy); text-transform: capitalize; }
.strategy-slot-day span { color: var(--muted); font-size: 13px; }
.strategy-slot-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.strategy-slot-topic { color: var(--ink); }
.strategy-slot-angle { color: var(--muted); font-size: 14px; }
.strategy-slot.is-skipped .strategy-slot-copy, .strategy-slot.is-missed .strategy-slot-copy, .strategy-slot.is-preview .strategy-slot-copy { opacity: .7; }
.strategy-slot-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; max-width: 360px; }
.strategy-slot-actions button { min-height: 36px; padding: 6px 12px; }
/* The reason for another topic gets the whole row width, so the topic is not squeezed. */
.strategy-slot.is-rejecting .strategy-slot-actions { grid-column: 2 / -1; justify-content: flex-start; max-width: none; }
.strategy-area { color: var(--muted); font-size: 12px; font-weight: 600; }
.strategy-slot-actions input { width: auto; flex: 1 1 200px; min-height: 36px; padding: 6px 10px; }
.strategy-state { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.strategy-state.is-quiet { background: var(--soft); color: var(--muted); }
.strategy-state.is-busy { background: #e8f0f8; color: #1f4a73; }
.strategy-state.is-busy::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: strategy-pulse 1.2s ease-in-out infinite; }
.strategy-state.is-you { background: var(--amber-soft); color: var(--amber); }
.strategy-state.is-done { background: var(--green-soft); color: var(--green); }
.strategy-next-up .strategy-list { margin-top: 0; }

@media (max-width: 900px) {
  .strategy-hero { grid-template-columns: 1fr; }
  .strategy-how { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .strategy-section, .strategy-hero { padding: 16px; }
  .strategy-slot { grid-template-columns: 52px minmax(0, 1fr); }
  .strategy-slot-actions, .strategy-slot.is-rejecting .strategy-slot-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .strategy-slot-actions:empty { display: none; }
  .strategy-todo-row { flex-direction: column; align-items: stretch; }
  .strategy-todo-row > button { align-self: flex-start; }
  .strategy-preset > button, .strategy-setup-form .inline-actions .button-primary { width: 100%; }
  .strategy-bar { width: 96px; }
}