/* ============================================================
   TOOL — Meeting time finder  (productivity/meeting.html)
   Shared shell, sliders and buttons live in productivity.css
   ============================================================ */
body[data-section="productivity"]{
  --c-work:  #CBC2DF;
  --c-edge:  #E7E2EF;
  --c-off:   #DFD9CC;
  --c-wkend: repeating-linear-gradient(135deg, #DFD9CC 0 4px, #E9E4D9 4px 8px);
  --row:     46px;
  --lab:     208px;
}


/* ---------- date bar ---------- */
.mt-bar{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.2rem 2rem; flex-wrap:wrap; margin-top:2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.mt-date{ display:flex; align-items:stretch; gap:.35rem; flex-wrap:wrap; }
.mt-step{ width:2.6rem; min-height:3.2rem; border:1px solid var(--line) !important; font-family:var(--f-display) !important; font-size:1.25rem !important; line-height:1; color:var(--ink-soft) !important; transition:background .15s, color .15s, border-color .15s; }
.mt-step:hover{ background:var(--accent-soft) !important; color:var(--accent) !important; border-color:var(--accent) !important; }
.mt-day{ position:relative; display:flex; flex-direction:column; justify-content:center; min-width:12.5rem; padding:.3rem 1rem; border:1px solid var(--ink); background:var(--paper); cursor:pointer; }
.mt-day-main{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; line-height:1.2; }
.mt-day-rel{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.mt-day input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.mt-day input::-webkit-calendar-picker-indicator{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
.mt-today{ padding:0 1rem !important; font-family:var(--f-mono) !important; font-size:.72rem !important; letter-spacing:.1em; text-transform:uppercase; border-bottom:2px solid var(--accent) !important; margin-left:.4rem; }
.mt-today:disabled{ opacity:.35; cursor:default !important; border-bottom-color:transparent !important; }

.mt-base{ display:flex; flex-direction:column; gap:.3rem; }
.mt-base span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.mt-base select{ font-family:var(--f-display); font-size:1rem; font-weight:600; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:.35rem 1.6rem .35rem 0; min-width:11rem; appearance:none; -webkit-appearance:none; border-radius:0;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size:5px 5px; background-repeat:no-repeat; cursor:pointer; }
.mt-base select:focus{ outline:0; border-bottom-color:var(--accent); }

/* ---------- sliders ---------- */
.mt-sliders{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1.6rem; }
.mt-sl{ background:var(--paper); padding:1rem 1.1rem 1.1rem; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.2rem .6rem; cursor:pointer; }
.mt-sl-k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.mt-sl-v{ font-family:var(--f-display); font-weight:600; font-size:1rem; }
.mt-sl input{ grid-column:1 / -1; margin-top:.6rem; }


/* ---------- working hours per city ---------- */
body[data-section="productivity"] .mt-hours-toggle{ text-align:left; align-content:start; padding:1rem 1.1rem 1.1rem; background:var(--paper); transition:background .15s; }
.mt-hours-toggle:hover{ background:var(--paper-2) !important; }
.mt-hours-sum{ grid-column:1; font-size:.82rem; color:var(--ink-soft); margin-top:.55rem; }
.mt-hours-edit{ grid-column:2; justify-self:end; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:.55rem; border-bottom:1px solid currentColor; }
.mt-hours-edit i{ font-style:normal; display:inline-block; transition:transform .15s; }
.mt-hours-toggle[aria-expanded="true"]{ background:var(--paper-2) !important; }
.mt-hours-toggle[aria-expanded="true"] .mt-hours-edit i{ transform:rotate(180deg); }

.mt-hours{ border:1px solid var(--line); border-top:0; background:var(--paper-2); padding:1.1rem 1.2rem 1.2rem; }
.mt-hours-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:.8rem; }
.mt-hours-head p{ margin:0; font-size:.88rem; color:var(--ink-soft); max-width:70ch; }
.mt-hours-reset{ font-family:var(--f-mono) !important; font-size:.68rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) !important; border-bottom:1px solid currentColor !important; white-space:nowrap; }
.mt-hours-reset:disabled{ opacity:.35; cursor:default !important; }
.mt-hours-list{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:981px){
  .mt-hr:last-child:nth-child(odd){ grid-column:1 / -1; grid-template-columns:9.5rem calc(50% - 11.4rem - .5px); }
}
.mt-hr{ background:var(--paper); display:grid; grid-template-columns:9.5rem 1fr; grid-template-rows:auto auto; column-gap:1rem; padding:.7rem .9rem .65rem; align-items:center; }
.mt-hr-city{ grid-row:1 / 3; display:flex; flex-direction:column; gap:.15rem; }
.mt-hr-n{ font-family:var(--f-display); font-weight:600; font-size:.95rem; }
.mt-hr-val{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); }
.mt-hr-val b{ font-weight:500; color:var(--ink); }
.mt-hr.is-custom .mt-hr-n::after{ content:"edited"; font-family:var(--f-mono); font-weight:400; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:.05rem .3rem; margin-left:.45rem; vertical-align:2px; }
.mt-hr-ctl{ min-width:0; }
.mt-hr-base{ font-family:var(--f-mono); font-size:.66rem; color:var(--accent); text-align:right; margin-top:.15rem; }

/* ---------- board ---------- */
.mt-board{ margin-top:1.6rem; }
.mt-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; align-items:center; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2rem; }
.mt-legend i{ display:inline-block; width:.9rem; height:.9rem; vertical-align:-2px; margin-right:.4rem; border:1px solid rgba(0,0,0,.06); }
.mt-legend .k-work{ background:var(--c-work); } .mt-legend .k-edge{ background:var(--c-edge); }
.mt-legend .k-off{ background:var(--c-off); }   .mt-legend .k-wkend{ background:var(--c-wkend); }
.mt-legend-tip{ margin-left:auto; text-transform:none; letter-spacing:.02em; font-size:.7rem; opacity:.8; }

.mt-tl{ display:grid; grid-template-columns:var(--lab) 1fr; column-gap:.6rem; }
.mt-labels{ display:flex; flex-direction:column; gap:3px; }
.mt-lab{ height:var(--row); display:flex; align-items:center; gap:.55rem; cursor:pointer; }
.mt-lab input{ appearance:none; -webkit-appearance:none; width:15px; height:15px; flex:none; border:1.5px solid var(--ink-soft); border-radius:2px; margin:0; display:grid; place-items:center; cursor:pointer; background:var(--paper); }
.mt-lab input:checked{ background:var(--accent); border-color:var(--accent); }
.mt-lab input:checked::after{ content:""; width:7px; height:4px; border:2px solid var(--paper); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }
.mt-lab-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.mt-lab-n{ font-family:var(--f-display); font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-lab-t{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; }
.mt-cc{ font-family:var(--f-mono); font-weight:400; font-size:.6rem; letter-spacing:.1em; color:var(--ink-soft); margin-left:.35rem; vertical-align:1px; }
.mt-clock b{ font-weight:500; color:var(--ink); }
.mt-rel{ display:inline-block; font-size:.62rem; font-weight:500; letter-spacing:.02em; padding:0 .28rem; margin-left:.15rem; background:var(--accent-soft); color:var(--accent); line-height:1.5; }
.mt-rel.behind{ background:var(--c-off); color:var(--ink-soft); }
.mt-rel.is-base{ background:none; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; padding:0; }
.mt-li-now{ font-family:var(--f-mono); font-size:.7rem; color:var(--ink-soft); margin-top:.15rem; white-space:nowrap; }
.mt-li-now::before{ content:"Now "; text-transform:uppercase; letter-spacing:.08em; font-size:.6rem; color:var(--accent); }
.mt-lab.is-base .mt-lab-n::after{ content:none; font-family:var(--f-mono); font-weight:400; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-left:.4rem; vertical-align:2px; }
.mt-lab.is-off .mt-lab-txt{ opacity:.45; }

.mt-tracks-wrap{ position:relative; }
.mt-tracks{ display:flex; flex-direction:column; gap:3px; }
.mt-row{ height:var(--row); display:grid; grid-template-columns:repeat(var(--n),1fr); gap:1px; }
.mt-row.is-off{ opacity:.35; }
.mt-c{ position:relative; display:grid !important; place-items:center; min-width:0; overflow:hidden; font-family:var(--f-mono) !important; font-size:.7rem !important; color:var(--ink-soft) !important; transition:filter .12s; }
.mt-c:hover{ filter:brightness(.94); }
.mt-c.s-work{ background:var(--c-work); color:var(--ink) !important; }
.mt-c.s-edge{ background:var(--c-edge); }
.mt-c.s-off{ background:var(--c-off); }
.mt-c.s-wkend{ background:var(--c-wkend); }
.mt-c.half span{ font-size:.6rem; }
.mt-c.new-day{ box-shadow:inset 2px 0 0 var(--ink); }
.mt-c.new-day span{ font-weight:500; color:var(--ink); text-transform:uppercase; font-size:.6rem; letter-spacing:.04em; }
.mt-row.is-base .mt-c span{ font-weight:500; }

.mt-sel{ position:absolute; top:-6px; bottom:-6px; border:2px solid var(--ink); background:rgba(92,77,125,.1); pointer-events:none; transition:left .08s, width .12s; box-shadow:0 0 0 3px rgba(240,237,230,.6); }
.mt-sel span{ position:absolute; top:-1.45rem; left:-2px; font-family:var(--f-mono); font-size:.68rem; background:var(--ink); color:var(--paper); padding:.1rem .35rem; white-space:nowrap; }
.mt-now{ position:absolute; top:-10px; bottom:-10px; width:0; border-left:1.5px dashed #A8522E; pointer-events:none; }
.mt-now span{ position:absolute; bottom:-1.25rem; left:0; transform:translateX(-50%); font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#A8522E; }

.mt-scrub-lab{ display:flex; align-items:center; gap:.4rem; margin-top:1.3rem; align-self:center; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.mt-scrub-lab span{ flex:1; text-align:center; }
.mt-nudge{ font-family:var(--f-mono) !important; font-size:.7rem !important; letter-spacing:.02em; padding:.35rem .5rem !important; border:1px solid var(--line) !important; color:var(--ink) !important; background:var(--paper) !important; min-width:2.6rem; transition:background .15s, border-color .15s; }
.mt-nudge:hover{ border-color:var(--accent) !important; background:var(--accent-soft) !important; }
.mt-nudge:disabled{ opacity:.3; cursor:default !important; }
.mt-pick-nudge{ display:flex; gap:.35rem; margin-top:.7rem; flex-wrap:wrap; }
.mt-pick-nudge .mt-nudge{ color:var(--paper) !important; background:rgba(255,255,255,.1) !important; border-color:rgba(240,237,230,.4) !important; min-width:0; flex:1 1 auto; }
.mt-pick-nudge .mt-nudge:hover{ background:rgba(255,255,255,.2) !important; border-color:var(--paper) !important; }
.mt-scrub{ margin-top:1.3rem; }

/* ---------- result ---------- */
.mt-result{ display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2rem; }
.mt-pick{ background:var(--accent); color:var(--paper); padding:1.5rem 1.4rem; display:flex; flex-direction:column; }
.mt-pick-k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.mt-pick-time{ font-family:var(--f-display); font-weight:600; font-size:2.3rem; line-height:1.1; margin-top:.5rem; letter-spacing:-.01em; }
.mt-pick-sub{ font-family:var(--f-mono); font-size:.74rem; margin-top:.4rem; opacity:.85; }
.mt-pick-verdict{ margin-top:1rem; font-size:.95rem; line-height:1.45; }
.mt-pick-verdict.good::before{ content:"◆ "; font-size:.75rem; }
.mt-invite{ margin-top:auto; padding-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.mt-title-in{ display:flex; flex-direction:column; gap:.35rem; }
.mt-title-in span, .mt-cal-k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.mt-title-in input{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:var(--paper); background:rgba(255,255,255,.08); border:0; border-bottom:1px solid rgba(240,237,230,.55); padding:.45rem .5rem; outline:0; border-radius:0; width:100%; }
.mt-title-in input::placeholder{ color:rgba(240,237,230,.55); }
.mt-title-in input:focus{ border-bottom-color:var(--paper); background:rgba(255,255,255,.14); }
.mt-cal{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.mt-cal-k{ width:100%; }
.mt-cal button, .mt-cal a{ flex:1 1 auto; text-align:center; font-family:var(--f-mono) !important; font-size:.7rem !important; letter-spacing:.06em; color:var(--accent) !important; background:var(--paper) !important; padding:.42rem .65rem !important; transition:background .15s, color .15s; }
.mt-cal button:hover, .mt-cal a:hover{ background:var(--accent-soft) !important; }
.mt-copy{ align-self:flex-start; font-family:var(--f-mono) !important; font-size:.7rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--paper) !important; border-bottom:1px solid currentColor !important; padding-bottom:.15rem !important; }

.mt-list{ list-style:none; margin:0; padding:0; background:var(--paper); }
.mt-li{ display:grid; grid-template-columns:1.25fr 1fr 1fr 1.15fr .9fr; align-items:center; gap:.8rem; padding:.7rem 1.1rem; border-bottom:1px solid var(--line); }
.mt-li:last-child{ border-bottom:0; }
.mt-li.is-base{ background:var(--paper-2); }
.mt-li.is-off{ opacity:.45; }
.mt-li-city{ display:flex; flex-direction:column; min-width:0; }
.mt-li-n{ font-family:var(--f-display); font-weight:600; font-size:.98rem; }
.mt-li-s{ font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-li-time{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.mt-li-time span{ font-weight:500; color:var(--ink-soft); font-size:.95rem; }
.mt-li-day{ font-size:.88rem; }
.mt-shift{ font-family:var(--f-mono); font-weight:500; font-size:.64rem; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); padding:.1rem .3rem; margin-left:.2rem; white-space:nowrap; }
.mt-li-zone{ font-family:var(--f-mono); font-size:.75rem; display:flex; flex-direction:column; }
.mt-li-zone span{ font-size:.66rem; color:var(--ink-soft); letter-spacing:.04em; }
.mt-li-st{ text-align:right; }
.mt-chip{ display:inline-block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .5rem; white-space:nowrap; }
.mt-chip.s-work{ background:var(--accent); color:var(--paper); }
.mt-chip.s-edge{ background:var(--c-edge); color:var(--accent); box-shadow:inset 0 0 0 1px var(--c-work); }
.mt-chip.s-off{ background:var(--c-off); color:var(--ink-soft); }
.mt-chip.s-wkend{ background:var(--c-wkend); color:var(--ink-soft); }

/* ---------- best + dst ---------- */
.mt-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:2.6rem; }
.mt-h2{ font-family:var(--f-mono); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.mt-best, .mt-dst{ list-style:none; margin:0; padding:0; }
.mt-win{ display:flex !important; flex-direction:column; width:100%; text-align:left; padding:.75rem .9rem !important; border-left:3px solid var(--line) !important; margin-bottom:.4rem; transition:background .15s, border-color .15s; }
.mt-win:hover{ background:var(--paper-2) !important; border-left-color:var(--accent) !important; }
.mt-win.good{ border-left-color:var(--accent) !important; }
.mt-win-t{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.mt-win-t em{ font-style:normal; font-family:var(--f-mono); font-weight:400; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-left:.3rem; }
.mt-win-d{ font-size:.86rem; color:var(--ink-soft); margin-top:.15rem; }
.mt-dst li{ padding:.7rem 0 .8rem; border-bottom:1px dashed var(--line); }
.mt-dst li:last-child{ border-bottom:0; }
.mt-dst li.past{ opacity:.6; }
.mt-dst-d{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.mt-dst-d b{ font-weight:500; background:var(--accent); color:var(--paper); padding:.05rem .35rem; margin-left:.3rem; }
.mt-dst-w{ font-family:var(--f-display); font-weight:600; font-size:1rem; margin-top:.2rem; }
.mt-dst-w span{ font-family:var(--f-mono); font-weight:400; font-size:.72rem; color:var(--ink-soft); }
.mt-dst-fx{ font-size:.86rem; color:var(--ink-soft); margin-top:.25rem; line-height:1.5; }
.mt-empty{ color:var(--ink-soft); font-style:italic; padding:.4rem 0; }

.mt-note{ font-size:.85rem; color:var(--ink-soft); margin:2.4rem 0 0; max-width:70ch; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .mt-sliders{ grid-template-columns:1fr 1fr; }
  .mt-hours-toggle{ grid-column:1 / -1; }
  .mt-hours-list{ grid-template-columns:1fr; }
  .mt-result{ grid-template-columns:1fr; }
  .mt-li{ grid-template-columns:1.2fr 1fr 1fr .9fr; }
  .mt-li-zone{ display:none; }
}
@media (max-width:820px){
  body[data-section="productivity"]{ --lab:160px; --row:40px; }
  .mt-c span{ display:none; }
  .mt-legend-tip{ margin-left:0; width:100%; }
  .mt-cols{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:600px){
  body[data-section="productivity"]{ --lab:118px; --row:48px; }
  .mt-lab .mt-clock{ white-space:normal; line-height:1.25; }
  .mt-lab .mt-mon{ display:none; }
  .mt-lab-t{ font-size:.66rem; }
  .mt-bar{ align-items:stretch; }
  .mt-date{ width:100%; }
  .mt-day{ flex:1; min-width:0; padding:.3rem .7rem; }
  .mt-step{ width:2.3rem; }
  .mt-step[data-days="-7"], .mt-step[data-days="7"]{ display:none; }
  .mt-today{ margin-left:0; padding:0 .6rem !important; }
  .mt-sliders{ grid-template-columns:1fr 1fr; }
  .mt-sl{ padding:.8rem .8rem .9rem; }
  .mt-hours{ padding:.9rem .8rem 1rem; }
  body[data-section="productivity"] .mt-hours-toggle{ padding:.8rem .8rem .9rem; }
  .mt-hr{ grid-template-columns:1fr; row-gap:.3rem; }
  .mt-hr-city{ grid-row:auto; flex-direction:row; justify-content:space-between; align-items:baseline; flex-wrap:wrap; }
  .mt-sl-k{ grid-column:1 / -1; }
  .mt-lab{ gap:.4rem; }
  .mt-lab-n{ font-size:.85rem; }
  .mt-lab.is-base .mt-lab-n::after{ display:none; }
  .mt-lab.is-base .mt-lab-n{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
  .mt-pick-time{ font-size:2rem; }
  .mt-scrub-lab span{ display:none; }
  .mt-scrub-lab .mt-nudge{ min-width:0; flex:1; padding:.45rem .2rem !important; }
  .mt-li{ grid-template-columns:1fr auto; gap:.15rem .8rem; padding:.7rem .9rem; }
  .mt-li-city{ grid-column:1; grid-row:1; }
  .mt-li-time{ grid-column:2; grid-row:1; text-align:right; }
  .mt-li-day{ grid-column:1; grid-row:2; font-size:.8rem; color:var(--ink-soft); }
  .mt-li-st{ grid-column:2; grid-row:2; }
}

/* ---------- choosing cities ---------- */
.mt-bar-r{ display:flex; align-items:flex-end; gap:1rem 1.8rem; flex-wrap:wrap; }
.mt-cities-btn{ display:flex !important; flex-direction:column; gap:.3rem; text-align:left; }
.mt-cities-btn .k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.mt-cities-btn .v{ font-family:var(--f-display); font-size:1rem; font-weight:600; padding:.35rem 0; border-bottom:1px solid var(--line); white-space:nowrap; }
.mt-cities-btn .v em{ font-style:normal; font-family:var(--f-mono); font-weight:400; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-left:.5rem; }
.mt-cities-btn .v i{ font-style:normal; display:inline-block; transition:transform .15s; }
.mt-cities-btn:hover .v{ border-bottom-color:var(--accent); }
.mt-cities-btn[aria-expanded="true"] .v{ border-bottom-color:var(--accent); }
.mt-cities-btn[aria-expanded="true"] .v i{ transform:rotate(180deg); }

.mt-cities{ border:1px solid var(--line); background:var(--paper-2); padding:1rem 1.2rem 1.1rem; margin-top:1.2rem; }
.mt-city-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.mt-city-chip{ display:inline-flex; align-items:center; gap:.1rem; background:var(--paper); border:1px solid var(--line); padding:.3rem .2rem .3rem .65rem; font-family:var(--f-display); font-weight:600; font-size:.9rem; }
.mt-city-chip.is-base{ border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
.mt-city-chip button{ width:1.6rem; height:1.6rem; display:grid !important; place-items:center; font-size:1.05rem !important; line-height:1; color:var(--ink-soft) !important; margin-left:.15rem; }
.mt-city-chip button:hover{ color:var(--paper) !important; background:#A8522E !important; }
.mt-city-chip button:disabled{ opacity:.25; cursor:default !important; background:none !important; color:var(--ink-soft) !important; }

.mt-add{ position:relative; margin-top:.9rem; }
.mt-add input{ width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:.65rem .8rem; outline:0; border-radius:0; -webkit-appearance:none; }
.mt-add input:focus{ border-color:var(--accent); }
.mt-add input:disabled{ opacity:.6; }
.mt-res{ position:absolute; left:0; right:0; top:100%; z-index:20; list-style:none; margin:0; padding:0; background:var(--paper); border:1px solid var(--accent); border-top:0; max-height:22rem; overflow:auto; box-shadow:0 10px 24px rgba(27,27,31,.12); }
.mt-res li[role=option]{ display:grid; grid-template-columns:1fr auto; gap:0 1rem; padding:.55rem .8rem; cursor:pointer; border-top:1px solid var(--paper-2); }
.mt-res li[aria-selected="true"], .mt-res li[role=option]:hover{ background:var(--accent-soft); }
.mt-res-n{ font-family:var(--f-display); font-weight:600; font-size:.95rem; }
.mt-res-c{ grid-column:1; font-size:.8rem; color:var(--ink-soft); }
.mt-res-t{ grid-column:2; grid-row:1 / 3; align-self:center; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; }
.mt-res-none{ padding:.7rem .8rem; font-style:italic; color:var(--ink-soft); font-size:.9rem; }
.mt-cities-foot{ display:flex; justify-content:space-between; align-items:center; gap:.6rem 2rem; flex-wrap:wrap; margin-top:.8rem; font-size:.82rem; color:var(--ink-soft); }

@media (max-width:600px){
  .mt-bar-r{ width:100%; justify-content:space-between; }
  .mt-cities{ padding:.9rem .8rem 1rem; }
}

/* dark mode grid colours (the rest comes from style.css) */
@media (prefers-color-scheme: dark){
  body[data-section="productivity"]{
    --c-work:#4A4166; --c-edge:#2E2940; --c-off:#24242A;
    --c-wkend:repeating-linear-gradient(135deg, #24242A 0 4px, #2B2B32 4px 8px); }
}