:root {
  --bg: #f4f5f7; --card: #fff; --soft: #eef1f5; --text: #1b1f24; --muted: #5b6573; --line: #d9dee5;
  --primary: #1a56db; --on-primary: #fff; --danger: #c81e1e; --on-danger: #fff;
  --green: #137a3a; --on-green: #fff; --amber: #a15c00; --red: #c81e1e;
}
/* Dark colours apply when the device is dark (unless the person chose Light), or when the person chose Dark.
   The Theme button in the top bar sets data-theme on <html>; with no choice, the device decides. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b; --card: #1d2228; --soft: #181c21; --text: #e8ecf1; --muted: #9aa5b3; --line: #343c46;
    --primary: #6ea0ff; --on-primary: #0b1220; --danger: #ff7a7a; --on-danger: #2a0707;
    --green: #4cd37f; --on-green: #06210f; --amber: #f0b24d; --red: #ff7a7a; color-scheme: dark; }
}
:root[data-theme="dark"] {
  --bg: #14171b; --card: #1d2228; --soft: #181c21; --text: #e8ecf1; --muted: #9aa5b3; --line: #343c46;
  --primary: #6ea0ff; --on-primary: #0b1220; --danger: #ff7a7a; --on-danger: #2a0707;
  --green: #4cd37f; --on-green: #06210f; --amber: #f0b24d; --red: #ff7a7a; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--primary); }
h1 { font-size: 1.5rem; margin: 8px 0 16px; } h2 { font-size: 1.2rem; margin-top: 0; }

/* ----- page frame ----- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }  /* one width for every page (was 980px, with 1400px on Accounts only) */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
main { max-width: 1400px; margin: 0 auto; padding: 16px; }
.top { background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 0; }
.top .brand { font-size: 1.1rem; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top .inline { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; margin-left: 12px; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.top nav a:hover { background: var(--soft); color: var(--text); }
.top nav a[aria-current="page"] { color: var(--primary); background: var(--soft); }
/* The Menu button is hidden until a narrow screen. theme.js adds has-js before the page is drawn. */
.hamburger { display: none; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
             border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.hamburger:hover, .hamburger[aria-expanded="true"] { background: var(--soft); }
.hamburger-bars, .hamburger-bars::before, .hamburger-bars::after {
  display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; position: relative; }
.hamburger-bars::before, .hamburger-bars::after { content: ""; position: absolute; left: 0; }
.hamburger-bars::before { top: -6px; } .hamburger-bars::after { top: 6px; }
.hamburger[aria-expanded="true"] .hamburger-bars { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger-bars::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bars::after { top: 0; transform: rotate(-45deg); }
.who { color: var(--muted); }

/* red bar for a real alert */
.alertbar { padding: 10px 0; background: #b91c1c; color: #fff; font-weight: 600; border-bottom: 1px solid #7f1d1d; }
.alertbar .when { font-weight: 400; opacity: .85; font-size: .9rem; margin-left: 6px; }
.alertbar .bar { flex-wrap: nowrap; align-items: flex-start; }
.alertbar .bar > span { flex: 1 1 0; min-width: 0; }
.alertbar form { margin: 0; flex: none; } .alertbar .btn { background: #fff; color: #b91c1c; }

/* The kill switch is the main control: it sits in the middle at the top. Dry-run is a small grey note while live, and
   an amber banner under the kill switch while it is on (nothing is sent then, so it must not be missed). */
.strip { padding: 10px 0; background: var(--bg); }
.strip .wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.item { width: 100%; max-width: 640px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: .95rem; }
.item .msg { flex: 1; }
.item.bad { background: #b91c1c; border-color: #b91c1c; color: #fff; font-size: 1.05rem; }
.item.dry { background: #92400e; border-color: #92400e; color: #fff; }
.item.bad .btn, .item.dry .btn { background: #fff; color: #7f1d1d; border-color: #fff; }
.live-note { margin: 0; font-size: .85rem; color: var(--muted); }
.live-note a { color: var(--muted); }
/* the Stop all copying button: the whole box is the button */
.item.stopper { padding: 0; background: none; border: 0; }
.btn.stop { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px;
            font-size: 1.15rem; letter-spacing: .03em; background: var(--danger); color: var(--on-danger);
            border-radius: 10px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.btn.stop:hover { filter: brightness(1.1); }
.stop-icon { width: 1.6em; height: 1.6em; flex: none; }
.stop-icon polygon { fill: currentColor; } .stop-icon rect { fill: var(--danger); }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .5em; background: var(--muted); }
.dot.ok { background: var(--green); } .dot.warn { background: var(--amber); }

/* ----- cards, forms, buttons ----- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.card.narrow { max-width: 480px; margin: 24px auto; }
.card.medium { max-width: 700px; margin: 0 0 16px; }
label { display: block; font-weight: 600; margin: 14px 0 4px; }
input, select, textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, summary:focus-visible,
.top nav a:focus-visible, .hamburger:focus-visible
  { outline: 2px solid var(--primary); outline-offset: 2px; }
input[type=checkbox] { width: auto; margin-right: 8px; }
label.check { display: flex; align-items: center; font-weight: 600; }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent;
       background: var(--primary); color: var(--on-primary); text-decoration: none; cursor: pointer; }
.btn.big { width: 100%; padding: 16px; margin-top: 18px; text-align: center; font-size: 1.1rem; }
.btn.small { padding: 7px 12px; font-size: .95rem; }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.btn.danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn[disabled], .htmx-request.btn { opacity: .6; cursor: progress; }
.hint { color: var(--muted); font-size: .9rem; margin: 4px 0 0; }
.field-error { color: var(--red); font-weight: 600; margin: 4px 0 0; }
.alert { padding: 12px 14px; border-radius: 8px; border: 1px solid; font-weight: 600; }
.alert.good { color: var(--green); border-color: var(--green); } .alert.bad { color: var(--red); border-color: var(--red); }
.pill { font-size: .8rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.pill.off { color: var(--amber); border-color: var(--amber); }
.status { font-weight: 700; } .status.green { color: var(--green); } .status.amber { color: var(--amber); } .status.red { color: var(--red); }
.status::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: currentColor; margin-right: .45em; }

/* two columns on a wide screen, one on a phone */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fields .full { grid-column: 1 / -1; }
.fields h2 { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* the Add an account box, closed until it is needed */
details.addform { padding: 0; }
details.addform > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 1.1rem; }
details.addform[open] > summary { border-bottom: 1px solid var(--line); }
details.addform > .inner { padding: 4px 16px 16px; }

/* ----- one compact card per account, in a grid: as many 300px columns as fit, one on a phone ----- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 16px; }
.acct { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.35; }  /* everything but the name and the role label is small */
.acct .btn.small { font-size: 13px; padding: 6px 10px; }
.acct.is-online { border-left: 5px solid var(--green); }   /* logged in */
.acct.is-offline { border-left: 5px solid var(--red); }  /* not logged in, or a login problem */
.acct-top, .acct-mid, .acct-low { display: flex; justify-content: space-between; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.acct-mid { margin-top: 2px; color: var(--muted); }
.acct-low { margin-top: 8px; flex-wrap: nowrap; }
.acct-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.acct-title h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.acct .pill.master, .acct .pill.follower { font-size: .85rem; }  /* the dry-run note keeps the small size */
.pill.master { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pill.follower { text-transform: uppercase; letter-spacing: .04em; }
.chip { padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--soft); color: var(--text); white-space: nowrap; }
.acct-state { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }  /* the time sits under the status, so the buttons keep the row */
.acct-state .hint { margin: 0; font-size: 12px; }
.acct-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.acct-note { margin: 8px 0 0; }
.hint.bad-text { color: var(--red); }

/* Green and red are kept for the state of an account (logged in, logged out), so neither button uses them.
   Log in is the solid blue button. Log out is a plain outline. */
.btn.login { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.logout { background: transparent; border-color: var(--line); color: var(--text); }

/* on / off switch for copying */
/* The track is pinned to the right edge and the label grows to its left, so the switch never moves when the label changes.
   The page order stays track then label (row-reverse only flips how it is drawn). margin-left:auto keeps it on the right if the row wraps. */
.toggle { white-space: nowrap; display: inline-flex; flex-direction: row-reverse; margin-left: auto; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; padding: 0; cursor: pointer; }
.toggle.on { color: var(--green); }
.toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle[disabled] { opacity: .6; cursor: not-allowed; }  /* locked: kill switch on, or a few seconds after a failed login */
.toggle.htmx-request[disabled] { cursor: progress; }     /* waiting for Kotak */
.toggle .track { position: relative; width: 3.6rem; height: 2rem; border-radius: 99px; background: var(--line); transition: background .15s; }
.toggle.on .track { background: var(--green); }
.toggle .knob { position: absolute; top: .2rem; left: .2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--card); transition: left .15s; }
.toggle.on .knob { left: 1.8rem; }

/* the gear pop-up opens without any script (live.js only closes it when you click elsewhere) */
details.gear { position: relative; }
details.gear > summary { list-style: none; cursor: pointer; }
details.gear > summary::-webkit-details-marker { display: none; }
details.gear[open] > summary { background: var(--soft); }
.pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 20em; max-width: calc(100vw - 32px); padding: 10px 12px;
       background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.pop label { margin: 0 0 4px; font-size: .9rem; }
.setting { margin: 0 0 12px; }
.setting-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setting-row input { width: 6em; padding: 6px 8px; }
.pop .hint { margin: 4px 0 0; font-size: .82rem; }
.pop .field-error { font-size: .9rem; }
.pop-item { padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line); }
.pop-end { display: flex; gap: 8px; }

/* "Saved" shows for a moment and goes by itself. A green page message does the same, after longer. */
.saved { color: var(--green); font-weight: 700; animation: fade-away .4s 2.5s forwards; }
.alert.fade { max-height: 8em; overflow: hidden; animation: fade-away .5s 8s forwards; }
@keyframes fade-away { to { opacity: 0; visibility: hidden; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; } }

/* a button that waits for the server says so */
.busy { display: none; }
.htmx-request .busy { display: inline; }
.htmx-request .idle { display: none; }

@media (max-width: 720px) {
  .fields { grid-template-columns: 1fr; }
  .top nav { margin-left: 0; order: 3; width: 100%; }
  /* Phone: the page links hide behind the Menu button. A wide screen still shows them in a row.
     With no script, the links stay on the page, so the menu is never unreachable. */
  .has-js .hamburger { display: inline-flex; order: 2; margin-left: auto; }
  .has-js .top nav { display: none; flex: 1 1 100%; flex-direction: column; align-items: stretch;
                     margin: 4px 0 0; padding: 4px; background: var(--soft); border-radius: 10px; }
  .has-js .top nav.is-open { display: flex; }
  .has-js .top nav.is-open a[aria-current="page"] { background: var(--card); }
  .has-js .top-actions { order: 4; flex: 1 1 100%; }
  .alertbar .bar { flex-wrap: wrap; }
  .alertbar .bar > span { flex-basis: 100%; }
  /* big enough for a thumb: at least 44px tall (E8-S5) */
  .btn, .btn.small, .acct .btn.small { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.big { display: flex; }
  .toggle { min-height: 44px; }
  .top nav a { display: inline-flex; align-items: center; min-height: 44px; }
  details.gear > summary { min-width: 44px; }
  .setting-row input { min-height: 44px; }
}

[hidden] { display: none !important; }
#connlost { background: #7f1d1d; }
#sound-btn { margin-right: 6px; }

/* live feed */
.feed-item { padding: 0; }
.feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 12px 16px; }
.feed-head > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-note { margin: 0; padding: 0 16px 10px; }
.feed-copies { list-style: none; margin: 0; padding: 0; background: var(--soft); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.feed-copies li { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 10px 16px; }
.feed-copies li + li { border-top: 1px solid var(--line); }
.feed-name { font-weight: 700; min-width: 6em; }

/* ----- signed-in devices (E3-S2) ----- */
.device { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.device:first-child { border-top: 0; }
.device form { margin: 0; }
.device .hint { margin: 0; }
.device .tag { font-size: .8rem; font-weight: 600; color: var(--green); border: 1px solid var(--green); border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.device .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- history (E8-S4) ----- */
.history { padding: 4px 16px; }
.hrow { padding: 12px 0; border-top: 1px solid var(--line); }
.hrow:first-child { border-top: 0; }
.hhead { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hwhen { color: var(--muted); font-size: .9rem; }
.hinstr { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.hint.block { display: block; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; }