/* Mail Merge Maker (information-technology/mail-merge.php). The page chrome is the one-screen layout in /css/resource.css.
   On a laptop or desktop: the data source, the letter and the preview side by side, each scrolling inside its panel; on
   a narrower laptop the data source spans the top; on smaller screens they stack. Theme tokens only. */
.rp-main{gap:10px}
.mm-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"data tpl prev";gap:12px}
.mm-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px}
.mm-data{grid-area:data}.mm-tpl{grid-area:tpl;overflow:auto}.mm-prev{grid-area:prev}
.mm-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.mm-row>.btn:last-child{margin-left:auto}
.mm-small{margin:0;font-size:12.5px;color:var(--muted)}
.mm-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}

/* the data source */
.mm-tablewrap{overflow:auto;border:1px solid var(--line-strong);border-radius:5px;flex:none}
table.mm-table{border-collapse:separate;border-spacing:0;margin:0;font-size:12.5px;min-width:780px}
table.mm-table th{position:sticky;top:0;background:var(--accent-tint);color:var(--accent-deep);font:700 11px/1.2 var(--font-mono);text-transform:none;letter-spacing:0;padding:6px 6px;white-space:nowrap;border-bottom:1px solid var(--line-strong)}
table.mm-table td{padding:0;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
table.mm-table td input[type=text]{width:100%;min-width:0;border:0;background:transparent;color:var(--ink);font:12.5px/1.2 var(--font-body);padding:6px 6px}
table.mm-table td input[type=text]:focus{outline:2px solid var(--focus);outline-offset:-2px;background:var(--paper)}
table.mm-table td input[readonly]{font-family:var(--font-mono);color:var(--muted)}
td.mm-inc{text-align:center;white-space:nowrap;padding:0 6px !important;border-left:0 !important}
td.mm-inc input{width:16px;height:16px;vertical-align:middle;accent-color:var(--accent)}
.mm-n{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:700 10.5px/1 var(--font-mono);vertical-align:middle}
tr.mm-out td{background:var(--panel-2)}
tr.mm-out td input[type=text]{color:var(--muted)}
.mm-filter{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.mm-rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:5px}
.mm-join{display:flex}
.mm-filter select,.mm-filter input{font:13px/1.2 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:5px 6px;min-width:0}
.mm-filter input:disabled{opacity:.45}
.mm-sortrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-soft)}
.mm-sortrow label{display:flex;gap:6px;align-items:center}

/* the letter */
.mm-chips{display:flex;flex-wrap:wrap;gap:4px}
.mm-chip{font:600 12px/1 var(--font-mono);padding:6px 8px;border-radius:999px;border:1px solid var(--accent);background:var(--accent-tint);color:var(--accent-deep);cursor:pointer}
.mm-chip:hover{background:var(--accent);color:var(--on-accent)}
.mm-chip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.mm-ifbtn{align-self:flex-start}
.mm-ifbox{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.mm-ifrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:5px;align-items:center;font:700 12px var(--font-mono);color:var(--accent-deep)}
.mm-iflab{display:flex;flex-direction:column;gap:2px;font:600 11.5px/1.2 var(--font-display);color:var(--muted)}
.mm-ifbox select,.mm-ifbox input{font:13px/1.2 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:5px 6px;min-width:0}
.mm-ifbox .btn{align-self:flex-start}
.mm-text{flex:1;min-height:180px;resize:none;font:13.5px/1.6 var(--font-mono);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:6px;padding:10px 12px}
.mm-text:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}

/* the preview */
.mm-nav{display:flex;align-items:center;gap:6px;font:600 12.5px var(--font-mono);color:var(--ink-soft)}
.mm-all{display:inline-flex;gap:5px;align-items:center;font:600 12.5px var(--font-display);color:var(--accent-deep);margin-left:auto;cursor:pointer}
.mm-all input{accent-color:var(--accent)}
.mm-letter{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.mm-lhead{margin:0;font:600 11px/1.2 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mm-paper{white-space:pre-wrap;font:14px/1.6 var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:4px;padding:16px 18px;box-shadow:var(--shadow);overflow-wrap:anywhere}
.mm-err{color:var(--bad);font-weight:700;background:var(--bad-tint)}
.mm-none{padding:10px}

/* the challenge */
.mm-task{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mm-pips{display:flex;flex-wrap:wrap;gap:4px}
.mm-pip{min-width:26px;height:26px;padding:0 4px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);font:600 11.5px/1 var(--font-mono);cursor:pointer}
.mm-pip:hover{border-color:var(--accent)}
.mm-pip.now{outline:2px solid var(--accent);outline-offset:1px}
.mm-pip.first{background:var(--ok);border-color:var(--ok);color:#fff}
.mm-pip.done{background:var(--ok-tint);border-color:var(--ok);color:var(--ink)}
.mm-pip.shown{background:var(--hint-tint);border-color:var(--hint);color:var(--ink)}
.mm-pip.tried{border-color:var(--bad)}
.mm-pip.mm-rev{font-family:var(--font-display);padding:0 8px}
.mm-pip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.mm-taskq{margin:0;font:600 15px/1.45 var(--font-display);color:var(--ink);text-wrap:pretty}
.mm-btns{display:flex;gap:8px;flex-wrap:wrap}
.mm-bad{margin:0;padding:9px 12px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0;font-size:14px;line-height:1.5;color:var(--ink)}
.cq-working p{margin:0;font-size:14px;color:var(--ink-soft)}
.cq-working.shown{border-left-color:var(--hint)}
.cq-working.shown h4{color:var(--hint)}
.mm-sum{margin:0;font-size:14px}
.mm-review{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mm-review li{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--panel-2)}
.mm-rq{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--ink-soft);font:13px/1.45 var(--font-body)}
.mm-st{font:700 10.5px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border-radius:3px;margin-right:4px}
.mm-st.first{background:var(--ok);color:#fff}.mm-st.later{background:var(--ok-tint);color:var(--ok)}.mm-st.shown{background:var(--hint-tint);color:var(--hint)}.mm-st.todo{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.mm-rm{margin:5px 0 0;font-size:12.5px;color:var(--ink-soft)}

@media (min-width:901px) and (max-width:1300px){
  .mm-work{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"data data" "tpl prev"}
  .mm-data .mm-scroll{flex-direction:row;align-items:flex-start}
  .mm-data .mm-tablewrap{flex:1 1 auto;min-width:0;max-height:100%}
  .mm-data .mm-filter{flex:0 0 290px;border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:10px}
  .mm-rule{grid-template-columns:1fr 1fr}
  .mm-rule input{grid-column:1/-1}
  .mm-text{min-height:90px}
}
@media (min-width:901px) and (max-height:700px){
  .mm-work>.panel{padding:8px 12px 10px;gap:6px}
  .mm-paper{padding:10px 12px;font-size:13px}
}
@media (max-width:900px){
  .mm-work{display:flex;flex-direction:column}
  .mm-scroll{overflow:visible}
  .mm-prev{order:-1}
  .mm-pip{min-width:40px;height:40px;font-size:13px}
  .mm-chip{min-height:40px;padding:8px 12px}
  .btn{min-height:40px}
  .seg-toggle button{min-height:40px}
  .rp-controls{width:100%}
  .mm-filter select,.mm-filter input,.mm-ifbox select,.mm-ifbox input{min-height:40px;font-size:16px}
  table.mm-table td input[type=text]{min-height:40px;font-size:15px}
  td.mm-inc input{width:22px;height:22px}
  .mm-text{min-height:300px;font-size:15px}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .mm-work>.panel{padding:10px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;padding:8px 6px;min-width:0}
  .mm-rule{grid-template-columns:1fr}
}