/* Scenario planning UI: toolbar above the board and the settings dialog.
   Aurora Bree/Cabin purple–lavender–pink, restrained, generous spacing.
   Reuses the palette variables from styles.css; no new fonts or packages. */

.planning-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 14px;background:linear-gradient(135deg,#f7f0f8,#efe2ec 60%,#f3e4ea);border:1px solid var(--line);border-radius:14px}
.scenario-group{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 300px;min-width:0}
.scenario-button{font:600 13px var(--sans);letter-spacing:.02em;color:var(--purple);background:#fffefb;border:1px solid #baa7cc;border-radius:999px;padding:7px 16px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;min-width:0}
.scenario-button:hover:enabled{background:var(--lavender)}
.scenario-button.is-active,.scenario-button[aria-pressed=true]{background:var(--purple);border-color:var(--purple);color:#fffaf7}
.scenario-button:focus-visible,.settings-gear:focus-visible,.plan-retry:focus-visible{outline:3px solid #a96926;outline-offset:2px}
.scenario-button:disabled,.settings-gear:disabled{opacity:.45;cursor:not-allowed}
.settings-gear{font-size:17px;line-height:1;color:var(--purple);background:#fffefb;border:1px solid #baa7cc;border-radius:50%;width:38px;height:38px;flex:0 0 auto;margin-left:auto;cursor:pointer}
.settings-gear:hover:enabled{background:var(--lavender)}
.planning-toolbar>.plan-status{flex:1 1 100%;min-height:17px;margin:0;padding:0;text-align:right}
.plan-status{font-size:12px;color:var(--muted);margin-left:auto;padding-left:6px}
.plan-status[data-kind=busy]{color:var(--purple)}
.year-action-error{flex-basis:100%;margin:0}
.plan-status[data-kind=error]{color:#9c314b}
.plan-status[data-kind=conflict]{color:#8a6a1f;font-weight:700}
.plan-retry{font:600 12px var(--sans);color:#9c314b;background:#fff2f1;border:1px solid #d9a3ac;border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap}
.planning-toolbar>.plan-retry{margin-left:auto}

.year-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.year-group select{font:600 13px var(--sans);color:var(--purple);background:#fffefb;border:1px solid #baa7cc;border-radius:999px;min-height:36px;padding:6px 12px;cursor:pointer;white-space:nowrap;flex:0 1 auto}
.add-year-button{font:600 12px var(--sans);color:var(--purple);background:#fffefb;border:1px dashed #baa7cc;border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.add-year-button:hover:enabled{background:var(--lavender)}
.add-year-button:disabled{opacity:.45;cursor:not-allowed}
.year-group select:focus-visible,.add-year-button:focus-visible{outline:3px solid #a96926;outline-offset:2px}

.year-edit-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 30px 0}
.year-edit-bar label{font-size:12px;color:var(--purple)}
.year-edit-bar select{font:600 13px var(--sans);color:var(--purple);background:#fffefb;border:1px solid #baa7cc;border-radius:999px;min-height:36px;padding:6px 12px;cursor:pointer}
.year-edit-bar select:focus-visible{outline:3px solid #a96926;outline-offset:2px}
.year-edit-hint{flex-basis:100%;font-size:11px;color:var(--muted);margin:0}

.rule-source{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;background:#f6eef8;border:1px solid #dcc9e6;border-radius:10px;padding:10px 12px;margin:10px 0 2px;font-size:12px;color:var(--ink)}
.rule-source-text{flex:1 1 260px;margin:0;min-width:0}
.rule-source button{font:600 12px var(--sans);color:var(--purple);background:#fffefb;border:1px solid #baa7cc;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.rule-source button:hover:enabled{background:var(--lavender)}
.rule-source .field-error{flex-basis:100%}
.rule-source-note{flex-basis:100%;font-size:11px;color:var(--muted);margin:0}

.rule-continuation{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0}
.rule-continuation>label{font-size:12px;color:var(--purple);min-width:150px}
.rule-continuation>select{border:1px solid #baa7cc;border-radius:8px;padding:8px 10px;background:#fffefb;min-height:38px}
.rule-continuation-detail{display:contents}
.planning-derived{font-size:13px;color:var(--ink);background:#f6eef8;border:1px solid #dcc9e6;border-radius:10px;padding:10px 12px;margin:10px 0 0}
.planning-derived span{display:block;font-size:11px;color:var(--muted);margin-top:4px}

dialog.planning-dialog{width:min(1000px,calc(100vw - 32px));padding:0;overflow:auto}
.planning-head{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:1fr auto 44px;align-items:center;gap:14px;padding:26px 30px 18px;margin:0;background:linear-gradient(120deg,#f0e6f6,#f8edf0);border-bottom:1px solid var(--line)}
.planning-head .eyebrow{margin:0}
.planning-active{font:28px var(--serif);color:var(--purple);margin:4px 0 0}
.planning-tabs{display:flex;gap:8px;padding:16px 30px 0;border-bottom:1px solid var(--line)}
.planning-tabs button{font:600 13px var(--sans);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:8px 2px 10px;cursor:pointer}
.planning-tabs button.is-active{color:var(--purple);border-bottom-color:var(--pink)}
.planning-panel{padding:8px 30px 0}
.planning-panel fieldset{border:0;padding:0;margin:0;min-width:0}
.planning-dialog [hidden]{display:none!important}
.scalar-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.planning-intro{font-size:13px;color:var(--muted);margin:12px 0 16px}
.planning-panel:disabled,.planning-panel fieldset:disabled{opacity:.5}

.dial{display:grid;gap:6px;padding:10px 0;border-top:1px solid #e9dfee}
.dial-label{font-size:12px;color:var(--purple)}
.dial-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(88px,1fr);gap:14px;align-items:center}
.dial-fields input[type=range]{accent-color:var(--purple);width:100%;min-width:0;margin:0;cursor:pointer;height:24px}
.planning-dialog :is(input,select,button,summary):focus-visible{outline:3px solid #b97c41;outline-offset:3px}
.planning-dialog select{max-width:100%;min-width:0}
.dial-fields input[type=number]{min-height:40px;width:100%;min-width:0;font:600 14px var(--sans);font-variant-numeric:tabular-nums;text-align:right;padding:8px 10px;border-radius:10px;background:#fcf9fd}
.field-error{font-size:12px;color:#9c314b;min-height:0;margin:0}
.field-error:empty{display:none}
.month-select{display:flex;align-items:center;gap:10px;padding:6px 0}
.month-select label{font-size:12px;color:var(--purple);min-width:150px}
.month-select select{border:1px solid #baa7cc;border-radius:8px;padding:8px 10px;background:#fffefb;color:var(--ink);min-height:38px}

.rule-card{border:1px solid var(--line);border-radius:14px;background:#fffefb;margin:12px 0}
.rule-card summary{display:grid;grid-template-columns:1fr 20px;gap:5px 12px;padding:13px 18px;cursor:pointer;list-style:none}
.rule-card summary::-webkit-details-marker{display:none}
.rule-card summary::after{content:"＋";color:var(--purple);grid-column:2;grid-row:1/3;align-self:center;text-align:center}
.rule-card[open] > summary::after{content:"−"}
.rule-title{font:19px var(--serif);color:var(--purple)}
.rule-summary-values{grid-column:1;font-size:12px;color:var(--muted)}
.rule-body{padding:4px 18px 16px;border-top:1px solid #e9dfee}
.rule-mode-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0}
.rule-mode-row label{font-size:12px;color:var(--purple)}
.rule-mode-row select{border:1px solid #baa7cc;border-radius:8px;padding:8px 10px;background:#fffefb;min-height:38px}
.monthly-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.dial-compact .dial-label{font-size:11px}
.rule-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:2px 14px;list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid #e9dfee;font-size:11px;color:var(--muted)}
.rule-note{font-size:11px;color:var(--muted);margin:8px 0 0}

.planning-summary{list-style:none;margin:18px 30px 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 18px;font-size:12px;color:var(--muted)}
.planning-summary-total{grid-column:1/-1;font-weight:700;color:var(--purple);margin-top:6px}
.planning-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 30px 26px;padding-top:16px;border-top:1px solid var(--line)}
.planning-note{flex-basis:100%;font-size:11px;color:var(--muted);margin:0}
.import-label{position:relative;overflow:hidden;cursor:pointer}
.import-label input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.planning-conflict{flex-basis:100%;display:flex;align-items:center;gap:14px;background:#fdf6e8;border:1px solid #e0c48a;border-radius:10px;padding:10px 14px}
.planning-conflict p{margin:0;font-size:13px;color:#8a6a1f}
.planning-conflict button{font:600 12px var(--sans);color:#fffaf7;background:var(--purple);border:0;border-radius:999px;padding:7px 14px;cursor:pointer}

@media(max-width:760px){
  dialog.planning-dialog{width:min(430px,calc(100vw - 20px))}
  .planning-head,.planning-tabs,.planning-panel,.planning-summary,.planning-footer,.year-edit-bar{padding-left:16px;padding-right:16px;margin-left:0;margin-right:0}
  .monthly-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scalar-grid{grid-template-columns:1fr}
  .planning-head{grid-template-columns:1fr 44px;gap:4px 10px}
  .planning-head>.plan-status{grid-column:1;grid-row:2;margin:0;padding:0}
  .planning-head>.icon-button{grid-column:2;grid-row:1/3}
  .scenario-button{padding:7px 12px}
  .dial-compact .dial-fields{grid-template-columns:minmax(0,1fr)}
  .planning-conflict{flex-wrap:wrap}
  .dial-fields{grid-template-columns:1.4fr 1fr}
  .month-select{flex-wrap:wrap}
  .month-select label{min-width:100%}
  .planning-active{font-size:24px}
}
@media(max-width:390px){
  dialog.planning-dialog{width:calc(100vw - 12px)}
  .monthly-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .planning-toolbar{gap:8px;padding:8px 10px}
}
@media(max-width:480px){
  .scenario-button{padding:8px 6px;font-size:12px;letter-spacing:0}
}

/* Desktop scroll journey: the app enables scroll-driven month selection only
   when the complete board fits the viewport. Short screens use ordinary
   scrolling. */
@media(min-width:1100px) and (min-height:720px){
  .board-column{padding-top:0}
  .planning-toolbar{padding:8px 12px;gap:6px 10px}
  .scenario-button{padding:7px 10px;font-size:12px}
  .board{width:min(100%,max(450px,calc(100vh - 500px)));margin-inline:auto}
  .month-controls{margin-top:22px;gap:16px}
  .month-controls .icon-button{width:36px;height:36px}
  .month-controls select{min-height:36px}
  .journey-foot{display:none}
  .monthly-panel{max-height:calc(100vh - 130px);overflow:auto;scrollbar-width:thin;padding-right:5px}
}

/* Husportfölj card (docs/homes-growth-controls-2026-10-17.md): dedicated
   home-growth controls. The embedded generic rule card keeps only its editor;
   the outer card owns the totals preview, so its per-month value summary and
   preview list are suppressed here. */
.homes-card{border:1px solid var(--line);border-radius:14px;background:#fffefb;margin:12px 0;padding:13px 18px}
.homes-card .homes-title{margin:0 0 8px;font:22px var(--serif);color:var(--purple)}
.homes-mode-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.homes-mode-row label{font-size:12px;color:var(--muted)}
.homes-mode-row select{flex:1 1 260px;min-height:38px;border:1px solid #baa7cc;border-radius:8px;padding:8px 10px;background:#fffefb;color:var(--ink)}
.homes-constant{margin:10px 0 0}
.homes-card .rule-card{border:none;margin:0;padding:0}
.homes-card .rule-card>summary{padding:6px 0}
.homes-card .rule-card>summary .rule-summary-values{display:none}
.homes-card .rule-preview{display:none}
.rule-more{border:1px solid #e9dfee;border-radius:10px;margin:12px 0 2px;padding:0 12px;background:#fbf7fd}
.rule-more summary{cursor:pointer;list-style:none;padding:10px 0;font-size:12px;color:var(--muted)}
.rule-more summary::-webkit-details-marker{display:none}
.rule-more summary::after{content:"＋";color:var(--purple);margin-left:6px}
.rule-more[open] summary::after{content:"−"}
.rule-more .dial,.rule-more .rule-continuation,.rule-more .rule-target-date{margin:6px 0 10px}
.rule-booking-context{margin:10px 0 2px;padding:10px 12px;border-radius:9px;background:#f3edf7;color:var(--purple);font-size:12px;line-height:1.6}
.homes-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 14px;list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid #e9dfee;font-size:12px;color:var(--muted)}
.homes-summary{font-size:12px;color:var(--ink);margin:10px 0 0}

/* Immutable named forecasts extend the existing plan toolbar. */
.forecast-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 100%;min-width:0;border-top:1px solid var(--line);padding-top:8px}
.forecast-toolbar button,.forecast-dialog button{font:600 12px var(--sans);color:var(--purple);background:#fffefb;border:1px solid #baa7cc;border-radius:999px;padding:7px 12px;cursor:pointer}
.forecast-toolbar button:first-child{background:var(--purple);border-color:var(--purple);color:#fffaf7}
.forecast-toolbar button:disabled,.forecast-dialog button:disabled{opacity:.45;cursor:not-allowed}
.forecast-toolbar button:focus-visible,.forecast-dialog :is(button,input,summary):focus-visible{outline:3px solid #a96926;outline-offset:3px}
.forecast-status{flex:1 1 100%;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.forecast-status:empty,.forecast-message:empty{display:none}
.forecast-status[data-kind=error],.forecast-message[data-kind=error]{color:#9c314b}
.forecast-status[data-kind=busy],.forecast-message[data-kind=busy]{color:var(--purple)}
dialog.forecast-dialog{width:min(620px,calc(100vw - 32px));padding:24px;max-height:85vh;overflow:auto}
.forecast-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.forecast-head h2{font:28px var(--serif);color:var(--purple);margin:0}
.forecast-message{font-size:13px;margin:0 0 14px}
.forecast-form{display:grid;gap:12px}
.forecast-form label{font-size:13px;color:var(--purple)}
.forecast-form input{width:100%;min-width:0;min-height:42px;border:1px solid #baa7cc;border-radius:10px;padding:8px 12px;font:16px var(--sans);background:#fffefb}
.forecast-form button{justify-self:start}
.forecast-hint{font-size:12px;color:var(--muted);margin:0}
.forecast-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.forecast-row>div{min-width:0;overflow-wrap:anywhere}
.forecast-row strong{display:block;font-size:14px;color:var(--purple)}
.forecast-row time{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.forecast-row button{flex-shrink:0}
.forecast-recovery{margin-top:20px;font-size:12px;color:var(--muted)}
.forecast-recovery summary{cursor:pointer;padding:8px 0}
@media(max-width:480px){dialog.forecast-dialog{padding:18px}.forecast-head h2{font-size:24px}.forecast-toolbar button{padding:7px 10px}}