/* ── «Когда?» — нижний лист (лист 26, этап 1.2): чипы · сетка · время · gold ── */

#when-dialog{width:min(420px, calc(100vw - 24px)); max-width:min(420px, calc(100vw - 24px));
  border:none; background:var(--paper2); border-radius:16px 16px 12px 12px; padding:0;
  color:var(--graphite);}
#when-dialog::backdrop{background:rgba(44,42,38,.3);}
/* на телефоне — честный нижний лист во весь вьюпорт-низ */
@media (max-width:480px){
  #when-dialog{width:100vw; max-width:100vw; margin:auto 0 0; border-radius:16px 16px 0 0;}
}
.wh-frame{position:relative; display:flex; flex-direction:column; padding:0 16px;
  max-height:min(640px, calc(100dvh - 24px));}
.wh-frame::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:inherit; filter:url(#squiggle);}
.wh-grab{height:16px; display:flex; align-items:center; justify-content:center; flex:none;}
.wh-grab i{width:48px; height:4px; border-radius:2px; background:var(--pencil-faint);}

.wh-head{display:flex; align-items:center; gap:8px; height:56px; flex:none;
  border-bottom:2px solid var(--graphite);}
.wh-head .ttl{font-family:'Caveat',cursive; font-weight:700; font-size:24px; flex:1;}

.wh-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:8px; padding:8px 2px;}

/* быстрые чипы 32 R8 */
.wh-quick{display:flex; gap:8px; flex-wrap:wrap; flex:none;}
.wh-quick button{position:relative; min-height:32px; padding:0 12px; border-radius:8px;
  background:var(--paper); border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:13px; color:var(--graphite);}
.wh-quick button::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.wh-quick button::after{content:""; position:absolute; inset:-4px;}   /* мишень 40 */

/* навигатор месяца: ‹ › (мишень 40) · Caveat 17 · ghost «сегодня» */
.wh-nav{display:flex; align-items:center; gap:8px; min-height:32px; flex:none;}
.wh-nav .nv{position:relative; width:24px; height:24px; border:none; cursor:pointer;
  background:none; color:var(--graphite); display:flex; align-items:center;
  justify-content:center; border-radius:6px;}
.wh-nav .nv::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:6px; filter:url(#squiggle);}
.wh-nav .nv::after{content:""; position:absolute; inset:-8px;}
.wh-nav .nv svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;}
.wh-nav .ttl{flex:1; text-align:center; font-family:'Caveat',cursive; font-weight:700;
  font-size:17px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#wh-today{position:relative; min-height:32px; padding:0 10px; border-radius:8px;
  background:none; border:none; cursor:pointer; font-family:'Neucha',cursive;
  font-size:12px; color:var(--meta);}
#wh-today::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:8px; filter:url(#squiggle);}
#wh-today::after{content:""; position:absolute; inset:-4px;}

/* шапка дней недели + сетка: колонка 343/7, ряд 44, зазор 4 (04·2) */
.wh-wd{display:grid; grid-template-columns:repeat(7,1fr); flex:none;}
.wh-wd span{text-align:center; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--meta);}
#wh-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; flex:none;
  touch-action:pan-y;}
#wh-grid i{min-height:44px;}
.wh-d{position:relative; min-height:44px; border:none; background:none; cursor:pointer;
  font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite-soft);
  border-radius:10px; display:flex; align-items:center; justify-content:center;}
/* сегодня = маркер-круг 32 · выбор = контур 2.0 · точка 4 = день занят */
.wh-d.today::before{content:""; position:absolute; width:32px; height:32px;
  border-radius:50%; background:var(--marker); z-index:-1;}
.wh-d{z-index:0;}
.wh-d.today{color:var(--graphite);}
.wh-d.sel{color:var(--graphite);}
.wh-d.sel::after{content:""; position:absolute; width:32px; height:32px;
  border-radius:50%; border:2px solid var(--graphite); filter:url(#squiggle);}
.wh-d.busy i, .wh-d.busy::marker{display:none;}
.wh-d.busy{background-image:radial-gradient(circle at 50% calc(50% + 14px),
  var(--ink-blue) 2px, transparent 2.6px);}

/* строка-аккордеон «время» 48 R12: значение справа 12 --meta, шеврон 180°/240 */
.wh-row{position:relative; display:flex; align-items:center; gap:12px; flex:none;
  min-height:48px; border-radius:12px; padding:0 12px 0 16px; background:var(--paper);
  border:none; cursor:pointer; text-align:left; width:100%;
  font-family:'Neucha',cursive; font-size:15px; color:var(--graphite);}
.wh-row::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.wh-row .ic{width:20px; height:20px; flex:none; color:var(--graphite-soft);
  fill:none; stroke:currentColor; stroke-width:2;}
.wh-row .lb{flex:1; min-width:0;}
.wh-row .rv{flex:none; font-size:12px; color:var(--meta);}
.wh-row .ch{width:16px; height:16px; flex:none; color:var(--pencil);
  fill:none; stroke:currentColor; stroke-width:2; transition:transform .24s ease;}
.wh-row[aria-expanded="true"] .ch{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){ .wh-row .ch{transition:none;} }

.wh-time{display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:none;
  padding:0 4px;}
/* тумблер 40×24 R6 — общий стиль с матрицей настроек */
.wh-time .stg-sw{flex:none;}
.wh-time .sw-lb{font-size:13px; color:var(--graphite-soft); flex:none;}
/* чип времени 32: нативный input type=time поверх (системный пикер честнее) */
.wh-tchip{position:relative; min-height:32px; padding:0 12px; border-radius:8px;
  background:var(--paper); display:inline-flex; align-items:center;
  font-family:'Neucha',cursive; font-size:13px; color:var(--graphite); flex:none;}
.wh-tchip::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.wh-tchip input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%;}
.wh-tchip.ghosted{opacity:.45;}
.wh-tchip.flash::before{animation:wh-flash .36s ease;}
@keyframes wh-flash{0%,100%{border-color:var(--graphite);}
  50%{border-color:var(--red); box-shadow:0 0 0 2px rgba(206,74,58,.35);}}
@media (prefers-reduced-motion:reduce){ .wh-tchip.flash::before{animation:none;} }

/* футер: одна золотая на слой */
.wh-foot{flex:none; padding:8px 0 12px;}
#wh-ok{width:100%;}

:root[data-theme="dark"] .wh-quick button,
:root[data-theme="dark"] .wh-row,
:root[data-theme="dark"] .wh-tchip{background:var(--card);}

/* «повторять» (лист 26·2 §4): чипы дней 7×40 R10, серия — не N задач */
.wh-rep{display:flex; flex-direction:column; gap:8px; flex:none; padding:0 4px;}
.wh-days{display:flex; gap:6px; flex-wrap:wrap;}
.wh-days button{position:relative; width:40px; height:40px; border-radius:10px;
  background:var(--paper); border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:13px; color:var(--graphite-soft);}
.wh-days button::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.wh-days button.on{color:var(--graphite); font-weight:700; background:var(--marker);}
.wh-until{display:flex;}
:root[data-theme="dark"] .wh-days button{background:var(--card);}
:root[data-theme="dark"] .wh-days button.on{background:var(--marker);}

/* «напомнить» (26C): подсказка + гашение чипов без времени */
.wh-rem-hint{font-size:11px; color:var(--graphite-soft); padding:0 4px; line-height:1.4;}
#wh-rem-chips button:disabled{opacity:.4; cursor:default;}
#wh-rem-chips button.on{background:var(--marker); font-weight:700;}