/* MNT IT Toolkit: device-based layout (device-layout.js). Uses the app's own colour variables. */
.devsw{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:10px 0}
.devsw-l{font-weight:800;font-size:1rem;margin:0 0 6px}
.devsw-b{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.devsw-b button{flex:1 1 0;min-width:0;margin:0;border-radius:0;min-height:48px;padding:8px 4px;background:var(--btn2);color:var(--btn2t);font-size:.95rem;line-height:1.2;white-space:normal}
.devsw-b button+button{border-left:1px solid var(--line)}
.devsw-b button[aria-checked="true"]{background:var(--gold);color:#0b1a33}
.devsw-n{margin:6px 0 0;font-size:.88rem;color:var(--muted)}
/* card header: badges + What does this do? + open-on row */
summary .dmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;font-size:.85rem;font-weight:600}
.dbadges{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.dbadge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.75rem;font-weight:800;line-height:1.5;border:1px solid var(--line);background:var(--deep);color:var(--text)}
.dbadge.d-phone::before{content:'📱 '}.dbadge.d-windows::before{content:'🪟 '}.dbadge.d-mac::before{content:'🍎 '}
.wibtn{cursor:pointer;display:inline-flex;align-items:center;width:auto;min-height:36px;margin:0;padding:4px 10px;border-radius:99px;background:transparent;border:1px solid var(--accent);color:var(--accent);font-size:.85rem;font-weight:700}
details.sec[open]>summary .wibtn{display:none}
.dopen{margin:-6px 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:10px;background:var(--deep);border:1px dashed var(--gold);font-size:.9rem;font-weight:700}
.dopen[hidden]{display:none}
.dopen-t{flex:1 1 100%}
.dsend{font-weight:600;color:var(--muted);font-size:.85rem}
.dlink{display:inline-flex;align-items:center;min-height:40px;padding:2px 14px;border-radius:99px;background:var(--btn2);color:var(--btn2t);text-decoration:none;font-weight:700;font-size:.88rem}
/* keep the open/close arrow at the top right now that headers have a second row */
details.sec>summary{position:relative;padding-right:26px}details.sec>summary::after{position:absolute;right:0;top:14px;float:none}
/* dimmed: other-device tools stay readable but quieter */
details.sec.ddim{border-style:dashed}
details.sec.ddim>summary>span:not(.dmeta),details.sec.ddim>summary .dbadges{opacity:.6}
details.sec.ddim:not([open])>summary{color:var(--muted)}
/* groups */
#devGroups .dgroup{margin:18px 0 6px}
.dgh{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:8px}
.dgs{margin:2px 0 6px;font-size:.9rem;color:var(--muted)}
.dalso{border:1px dashed var(--line);border-radius:12px;padding:8px 12px;margin:10px 0}
.dalso p{margin:2px 0 6px;font-size:.9rem;color:var(--muted)}
.dchips{display:flex;flex-wrap:wrap;gap:6px}
button.dchip{display:inline-block;width:auto;min-height:40px;margin:0;padding:6px 12px;border-radius:99px;background:var(--btn2);color:var(--btn2t);font-size:.88rem}
/* "What does this do?" panel */
details.whatis .wi-sum{font-size:1rem;margin:0 0 6px}
.wi-ch{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.8rem;font-weight:800;margin-right:4px}
.wi-read{background:#14532d;color:#dcfce7}.wi-app{background:#1e3a8a;color:#dbeafe}.wi-change{background:#854d0e;color:#fef9c3}
/* search hits */
.hit .dbadges{margin-left:6px}.hit .dbadge{font-size:.7rem}
.hit.hdim{opacity:.75;border:1px dashed var(--line)}
.hitnote{font-size:.8rem;font-weight:600;opacity:.85}
@media (min-width:900px){main{max-width:760px}}
.devsw-b button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.devsw-b button>span[aria-hidden]{font-size:1.2rem;line-height:1}
@media (max-width:600px){.dl-l{display:none}}