/* Settings: the controls inside its panels.

   They were a <style> block in settings.html, and moved here when the
   backup of every application added to them: design-lint counts the
   lines of style left in pages, and lets the count only fall. The page
   itself is the site's standard shape, out of theme.css. */
.set-head{display:flex;align-items:center;min-width:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row .rl{min-width:0}
.row .rt{font-weight:600;font-size:var(--text-sm)}
.row .rd{font-size:var(--text-xs);color:var(--ink-soft);line-height:1.5;margin-top:2px}
h3.rt{font-size:var(--text-sm);font-weight:600;margin:26px 0 4px}
.panel .rd a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.lead{font-size:var(--text-sm);color:var(--ink-soft);line-height:var(--leading-prose);margin:0 0 6px}
/* colourways */
.ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:6px}
.way{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:var(--radius-md);padding:11px 12px;cursor:pointer;background:transparent;color:var(--ink);font:500 var(--text-sm) var(--font-ui);min-height:44px}
.way:hover{border-color:var(--ink-soft)}
.way.on{border-color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent-strong) inset}
.dot{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.15)}
/* toggle */
/* The toggle is a 44px box for a finger, with the 42 by 24 track drawn
   inside it, so the target is the floor the rest of the site keeps. */
.sw{position:relative;width:44px;height:44px;flex:none;cursor:pointer;background:none;border:0;padding:0;border-radius:var(--radius-md)}
.sw:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px} .sw:not(.on):hover::before{background:var(--rule-strong)}
.sw::before{content:"";position:absolute;left:1px;top:10px;width:42px;height:24px;border-radius:var(--radius-pill);background:var(--rule);transition:background var(--dur-2)}
.sw.on::before{background:var(--accent-strong)}
.sw::after{content:"";position:absolute;top:13px;left:4px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left var(--dur-2)}
.sw.on::after{left:22px}
/* inputs and buttons: the site's .btn, held to the 44px floor */
input.txt{background:var(--paper-inset);border:1px solid var(--rule);border-radius:var(--radius-md);color:var(--ink);font-size:var(--text-sm);padding:10px 12px;font-family:inherit;width:260px;max-width:100%;min-height:44px;box-sizing:border-box}
input.txt:focus{outline:none;border-color:var(--accent-strong)}
.btn{min-height:44px;box-sizing:border-box;text-decoration:none;flex:none}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;flex:none}
/* The highlight crosses from one button to the next rather than
   jumping. A real sliding block would have to know how wide each
   button is, and Light, Dark and System are three different widths,
   so the movement is in the colour instead: the one you left fades
   out as the one you chose fades in, which is the part the eye
   follows. The press is on the button you are touching. */
.seg button{background:transparent;border:0;color:var(--ink-soft);font:500 var(--text-sm) var(--font-ui);padding:9px 15px;cursor:pointer;min-height:44px;transition:background-color var(--dur-3) var(--ease-standard),color var(--dur-3) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
.seg button:active{transform:scale(.95)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button.on{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
/* The box clips what is outside it, so the ring is drawn inside the button. */
.seg button:focus-visible{outline-offset:-3px}
.badge{font:600 var(--text-2xs) var(--font-ui);white-space:nowrap;padding:4px 8px;border-radius:var(--radius-pill);border:1px solid var(--rule);color:var(--ink-soft)}
.badge.soon{color:var(--accent-strong);border-color:var(--accent-border)}
/* A status line is the site's quiet note surface once it has something
   to say; empty, it would be a bare grey bar. */
.note{margin-top:14px}
.note:empty{display:none}
.muted{color:var(--ink-soft)}
.plugctas{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px}
#toolList{display:grid;grid-template-columns:1fr;column-gap:28px}
@media(min-width:760px){ #toolList{grid-template-columns:1fr 1fr} }
#toolList .row .rt{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em;color:var(--accent-strong)}
#toolList .row[hidden]{display:none}
#toolFind{width:220px}
.plugctas .count{font-size:var(--text-xs);color:var(--ink-soft);margin-left:auto}
kbd{font:500 var(--text-2xs) var(--font-mono);border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--radius-sm);padding:1px 6px;background:var(--paper-inset)}
/* Two buttons in one row, and the list a backup shows before it is put back. */
.acts{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.ba-ask{margin-top:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-inset)}
.ba-ask .lead{margin-bottom:10px;color:var(--ink)}
.ba-ask .rd{font-size:var(--text-xs);color:var(--ink-soft);line-height:1.5;margin:10px 0 0}
.ba-ask .acts{margin-top:14px}
.ba-ask table.ba-list,#sealResult table.ba-list{display:table;width:100%;border-collapse:collapse;font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.ba-list th{text-align:left;font-weight:600;color:var(--ink-soft);padding:6px 8px 6px 0;border-bottom:1px solid var(--rule)}
.ba-list td{padding:6px 8px 6px 0;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
.ba-list tr:last-child td{border-bottom:0}
.ba-list .num{text-align:right;white-space:nowrap;padding-right:0}
#baProg{margin-top:14px}
#baMsg ul{margin:6px 0 0;padding-left:18px}
#baMsg li{margin:2px 0}
@media(max-width:560px){ .row{flex-wrap:wrap} #toolList .row, .row:has(> .sw){flex-wrap:nowrap} }
/* On a phone a group of choices takes the row's whole width in equal
   parts, so four of them, or three at a larger text size, still fit
   the screen; a long word wraps inside its own button. */
@media(max-width:560px){ .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%} .seg button{padding:8px 6px;line-height:1.2;overflow-wrap:anywhere} }
/* Links inside a row's small print: padding grows the box a finger meets
   without moving the text around it (vertical padding on an inline box
   does not change the line); 2px aside takes "Contact" from 42px to 46. */
@media(pointer:coarse){ .panel .rd a{padding:15px 2px} }