/* The look is the applets frame's: its palette, its type, its bar and its panels (the shell's sheets,
   built in ahead of this one). What is here is the console's own: the words its views name the
   frame's colours by, the few colours the frame has no word for, and the views. The frame is dark
   until the system or a pressed button says light, so the console's own colours follow it. */
:root {
  --fg: var(--ink); --quiet: var(--dim); --panel: var(--raised);
  --link: var(--tint); --cursor: var(--tint); --staged: var(--tint); --ok: var(--good);
  --bad-bg: #3a1f1c; --tag: #2b2824; --sel: #26364d; --add-bg: #1c3324; --del-bg: #3a1f1c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bad-bg: #fbe9e7; --tag: #e6e1d6; --sel: #dfe9f7; --add-bg: #e3f2e6; --del-bg: #fbe4e1;
  }
}
:root[data-theme="light"] {
  --bad-bg: #fbe9e7; --tag: #e6e1d6; --sel: #dfe9f7; --add-bg: #e3f2e6; --del-bg: #fbe4e1;
}
a { color: var(--link); }
code { font-family: ui-monospace, monospace; }
nav[aria-label="views"] { display: flex; gap: 4px; }
.tools { display: flex; gap: 6px; align-items: center; }
.tab { padding: 4px 12px; border-radius: 6px; text-decoration: none; color: var(--fg); }
.tab.on { background: var(--panel); border: 1px solid var(--line); }
main { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }
main.fill { overflow: hidden; display: flex; flex-direction: column; }
.quiet { color: var(--quiet); }
.fail, .bad { color: var(--bad); }
.panel-body ul, ul.plain { list-style: none; margin: 0; padding: 0; }
.panel-body li { padding: 3px 8px; border-radius: 6px; display: flex; gap: 6px; align-items: baseline; }
.panel-body li.on { background: var(--panel); }
.panel-body a { flex: 1; color: var(--fg); text-decoration: none; }
.n { color: var(--quiet); font-size: 12px; }
.n.bad { color: var(--bad); }
section { flex: 1; min-width: 0; }
.filter { width: min(420px, 100%); padding: 6px 8px; margin: 4px 0 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
thead th { position: sticky; top: 0; background: var(--panel); font-size: 12px; text-transform: none; white-space: nowrap; }
td { min-width: 120px; max-width: 420px; }
td.id { min-width: 160px; font-family: ui-monospace, monospace; font-size: 13px; }
td.file { color: var(--quiet); font-size: 12px; white-space: nowrap; }
td.bad, tr.bad td { background: var(--bad-bg); }
.text { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
table.detail .text { display: block; -webkit-line-clamp: unset; }
.list { margin: 0; padding-left: 16px; }
.refs { display: flex; flex-wrap: wrap; gap: 4px 8px; }
a.ref { font-family: ui-monospace, monospace; font-size: 12px; }
a.ref.dangling { color: var(--bad); text-decoration: line-through; }
.why { margin: 4px 0 0; padding-left: 14px; color: var(--bad); font-size: 12px; }
table.detail th { width: 160px; font-weight: 600; white-space: nowrap; }
.mode { margin: 0; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--quiet); }
.editor button, .changes button, .connect button, section button { font: inherit; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.changes button:disabled { opacity: 0.5; cursor: default; }
button.small { padding: 0 8px; font-size: 12px; }
td.staged, tr.staged td, tr.staged th { box-shadow: inset 3px 0 0 var(--link); }
.edit { margin-top: 4px; }
.editor { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.editbox { width: min(560px, 100%); font: inherit; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.newrow { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; background: var(--panel); }
.newrow .field { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.filter.wide { width: min(720px, 100%); }
.changes ol { padding-left: 20px; }
.done { border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; background: var(--panel); }
.connect { max-width: 680px; }
.connect label { display: inline-block; margin: 4px 0; }

/* Keyboard focus is always visible. */
:focus-visible { outline: 2px solid var(--cursor); outline-offset: 1px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.mode.past { border-left: 3px solid var(--staged); }
.subtabs { display: flex; gap: 4px; margin: 0 0 10px; }
.subtab { padding: 3px 10px; border-radius: 6px; text-decoration: none; color: var(--fg); border: 1px solid transparent; }
.subtab.on { background: var(--panel); border-color: var(--line); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.toolbar h2 { margin: 0 8px 0 0; font-size: 17px; }
.toolbar .filter { margin: 0; width: min(260px, 100%); }
.toolbar .count, .statusbar .note { color: var(--quiet); font-size: 12px; }
.check { font-size: 13px; color: var(--quiet); display: inline-flex; gap: 4px; align-items: center; }
.badn { color: var(--bad); }

/* The grid. */
.gridwrap { flex: 1; min-height: 0; display: flex; gap: 12px; }
.gridcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gridsheet { flex: 1; min-height: 120px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; position: relative; background: var(--bg); font-size: 13px; }
.gridsheet:focus-visible { outline: 2px solid var(--cursor); outline-offset: 0; }
.gridsheet .content { position: relative; }
.gridsheet .row { position: absolute; left: 0; display: flex; height: 24px; }
.gridsheet .headrow { top: 0; z-index: 3; position: sticky; height: 24px; }
.gridsheet .filterrow { position: sticky; z-index: 3; height: 24px; }
.gridsheet .cell { height: 24px; line-height: 23px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); position: relative; user-select: none; }
.gridsheet .cell.mono { font-size: 12px; }
.gridsheet .cell .t { pointer-events: none; }
.gridsheet .cell.frozen { position: sticky; z-index: 2; box-shadow: 1px 0 0 var(--line); }
.gridsheet .cell.rownum { position: sticky; left: 0; z-index: 2; text-align: right; color: var(--quiet); background: var(--panel); font-size: 11px; padding: 0 4px; }
.gridsheet .cell.rownum.cur, .gridsheet .cell.head.cur { color: var(--fg); font-weight: 600; background: var(--sel); }
.gridsheet .cell.head { background: var(--panel); font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: default; }
.gridsheet .cell.head .label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.gridsheet .cell.head .sort { all: unset; cursor: pointer; font-size: 10px; color: var(--quiet); padding: 0 3px; border-radius: 3px; }
.gridsheet .cell.head .sort:hover { background: var(--line); color: var(--fg); }
.gridsheet .cell.head .grip { position: absolute; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; }
.gridsheet .cell.head .grip:hover { background: var(--cursor); }
.gridsheet .cell.filter { padding: 0; background: var(--panel); }
.gridsheet .colfilter { width: 100%; height: 100%; border: 0; padding: 0 6px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; }
.gridsheet .cell.sel { background: var(--sel); }
.gridsheet .cell.bad { background: var(--bad-bg); color: var(--bad); }
.gridsheet .cell.sel.bad { background: var(--sel); color: var(--bad); }
.gridsheet .cell.staged { box-shadow: inset 3px 0 0 var(--staged); }
.gridsheet .cell.cursor { outline: 2px solid var(--cursor); outline-offset: -2px; z-index: 1; overflow: visible; }
.gridsheet .cell.cursor.frozen { z-index: 2; }
.gridsheet .empty { position: absolute; left: 16px; color: var(--quiet); margin: 0; }
.editor { position: relative; }
.gridsheet .editor { position: absolute; left: -2px; top: -2px; z-index: 6; min-width: calc(100% + 4px); }
.gridsheet .editbox { width: 100%; min-width: 220px; margin: 0; font: inherit; font-size: 13px; padding: 2px 6px; background: var(--bg); color: var(--fg); border: 2px solid var(--cursor); border-radius: 0; resize: vertical; white-space: pre; line-height: 18px; }
.gridsheet .editor textarea.editbox[rows="1"] { height: 28px; resize: none; overflow: hidden; }
.editerr { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); padding: 2px 6px; font-size: 12px; white-space: normal; max-width: 420px; line-height: 1.3; }
.statusbar { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 3px 4px; font-size: 12px; color: var(--quiet); min-height: 24px; }
.statusbar .addr { color: var(--fg); }
.rowpanel { flex: 0 0 min(420px, 40%); overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: var(--panel); }
.panelhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rowpanel table.detail th { width: 110px; white-space: normal; }

/* Lists with a keyboard cursor. */
.keylist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; max-height: none; }
.keylist:focus-visible { outline-offset: 0; }
.keylist .item { display: flex; gap: 10px; align-items: baseline; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.keylist .item:last-child { border-bottom: 0; }
.keylist .item.active { background: var(--sel); box-shadow: inset 3px 0 0 var(--cursor); }
.keylist .main { flex: 1; min-width: 0; }
.keylist .main a { color: var(--fg); text-decoration: none; font-weight: 500; }
.keylist .main a:hover { text-decoration: underline; }
.keylist .badge { flex: 0 0 auto; min-width: 56px; font-size: 11px; color: var(--quiet); }
.keylist .meta { flex: 0 0 auto; font-size: 12px; color: var(--quiet); }
.keylist .snippet { font-size: 12px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keylist .item.bad .main a, .keylist .item.bad .badge { color: var(--bad); }
.keylist .item.ok .badge { color: var(--ok); }
mark { background: var(--sel); color: var(--fg); border-bottom: 2px solid var(--cursor); }
.cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.card { display: flex; flex-direction: column; min-width: 130px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--fg); background: var(--panel); }
.card .big { font-size: 22px; font-weight: 600; }
.cratelist { max-height: 40vh; overflow: auto; }
.panel-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--quiet); margin: 12px 8px 4px; }
.panel-body .filter { width: 100%; }
.crumbs { margin: 0 0 8px; }

/* Documents. */
article.doc { max-width: 880px; }
article.doc pre.code, pre.raw { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; overflow: auto; font-size: 12px; white-space: pre; }
pre.raw { white-space: pre-wrap; }
.tablewrap { overflow: auto; margin: 8px 0; }
table.doc { width: auto; font-size: 13px; }
table.doc td, table.doc th { max-width: 520px; }
.deadlink { border-bottom: 1px dotted var(--quiet); }
.tests li.bad { color: var(--bad); }
td.num { text-align: right; }

/* The structure graph. */
.graphscroll { overflow: auto; border: 1px solid var(--line); border-radius: 6px; max-height: 70vh; background: var(--bg); }
.graph .node rect { fill: var(--panel); stroke: var(--quiet); stroke-width: 1; }
.graph .node text { fill: var(--fg); font-size: 11px; font-family: ui-monospace, monospace; pointer-events: none; }
.graph .node.planned rect { stroke-dasharray: 4 3; }
.graph .node.dim { opacity: .3; }
.graph .node.focus rect { stroke: var(--cursor); stroke-width: 2; fill: var(--sel); }
.graph a:hover .node rect { stroke: var(--cursor); }
.graph .edge { fill: none; stroke: var(--quiet); stroke-width: 1; opacity: .5; }
.graph .edge.dim { opacity: .08; }
.graph .edge.hot { stroke: var(--cursor); opacity: 1; stroke-width: 1.5; }

/* Diffs. */
.filediff { border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; }
.filediff summary { padding: 4px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; background: var(--panel); }
.filediff .counts { color: var(--quiet); font-size: 12px; }
.filediff > p { margin: 4px 10px; }
.diff { overflow: auto; font-family: ui-monospace, monospace; font-size: 12px; }
.dl { display: flex; white-space: pre; min-width: max-content; }
.dl .sign { flex: 0 0 18px; text-align: center; color: var(--quiet); user-select: none; }
.dl.add { background: var(--add-bg); }
.dl.del { background: var(--del-bg); }
.dl.hunk { color: var(--quiet); background: var(--panel); }

/* Overlays. */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; z-index: 50; }
.dialog { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.3); width: min(640px, 94vw); max-height: 70vh; overflow: auto; padding: 10px 12px; }
.dialog.help { width: min(900px, 94vw); max-height: 80vh; }
.dialog .filter { width: 100%; margin: 0 0 6px; }
.palette ul { list-style: none; margin: 0; padding: 0; }
.palette li { display: flex; gap: 10px; padding: 4px 8px; border-radius: 4px; cursor: pointer; align-items: baseline; }
.palette li.chosen { background: var(--sel); }
.palette .group { flex: 0 0 70px; font-size: 11px; color: var(--quiet); }
.palette .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .hint { font-size: 11px; color: var(--quiet); }
.help .sections { columns: 2 320px; column-gap: 24px; }
.help section { break-inside: avoid; }
.help h3 { margin: 8px 0 2px; font-size: 13px; }
.help td.keys { white-space: nowrap; color: var(--quiet); padding-right: 12px; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .gridwrap { flex-direction: column; }
  .rowpanel { flex-basis: 40%; }
}
main.fill > .regbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Chat. */
main.fill > .chat { flex: 1; min-height: 0; }
.chat { display: grid; grid-template-columns: 240px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.chat[data-thread="true"] { grid-template-columns: 240px minmax(0, 1fr) minmax(280px, 380px); }
.chat aside { position: static; flex: none; min-height: 0; min-width: 0; }
.chat .chside { overflow-y: auto; padding: 8px; border-right: 1px solid var(--line); background: var(--panel); }
.chat .chtitle { margin: 4px 8px 8px; font-size: 17px; }
.chat .chside h3 { margin: 12px 8px 4px; }
.chat .chside ul { list-style: none; margin: 0; padding: 0; }
.chat .chside li { display: block; padding: 0; }
.chat .member a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; min-height: 32px; text-decoration: none; color: var(--fg); }
.chat .member.on a { background: var(--sel); font-weight: 600; }
.chat .member.done a { color: var(--quiet); }
.chat .mname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat .mstate { color: var(--quiet); font-size: 12px; }
.chat .hash { width: 9px; text-align: center; color: var(--quiet); }
.chat .badge { background: var(--cursor); color: var(--bg); border-radius: 10px; padding: 0 7px; font-size: 11px; min-width: 18px; text-align: center; }
.chat .badge.hot { background: var(--bad); color: #fff; }
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--quiet); }
.dot[data-state="working"] { background: var(--ok); }
.dot[data-state="waiting"], .dot[data-state="questions"] { background: var(--bad); }
.dot[data-state="paused"] { background: var(--staged); }
.dot[data-state="done"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--quiet); }
.chat .newdm { display: flex; gap: 6px; margin: 12px 0 4px; }
.chat .newdm input { flex: 1; min-width: 0; }
.chat .signed { margin: 12px 8px 0; font-size: 12px; }
.chat input[type="text"], .chat input[type="search"], .chat textarea { font: inherit; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
.chmain, .chthread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chthread { border-left: 1px solid var(--line); }
.chhead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.chhead h2 { margin: 0; font-size: 16px; white-space: nowrap; }
.chhead .says { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chhead .grow, .composebar .grow { flex: 1; }
.chhead .findbox { width: min(220px, 40%); }
.chhead .toggle { font-size: 13px; color: var(--quiet); white-space: nowrap; }
.chat .back { display: none; text-decoration: none; }
.chat .scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; padding: 8px 12px; }
.chat .empty { margin: 24px 0; text-align: center; }
.group { display: flex; gap: 10px; margin: 12px 0 2px; }
.avatar { flex: 0 0 36px; height: 36px; border-radius: 6px; background: var(--tag); display: grid; place-items: center; font-weight: 600; }
.group.mine .avatar { background: var(--sel); }
.gbody { flex: 1; min-width: 0; }
.ghead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mt { color: var(--quiet); font-size: 12px; }
.m { position: relative; padding: 1px 0; min-width: 0; }
.m > .mt { position: absolute; left: -46px; top: 3px; width: 40px; text-align: right; visibility: hidden; }
.m:hover > .mt { visibility: visible; }
.m:focus-visible { outline-offset: 2px; }
.mbody .line { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.45em; }
.mention { background: var(--sel); color: var(--link); border-radius: 4px; padding: 0 3px; }
.mention.mine { font-weight: 600; box-shadow: inset 0 0 0 1px var(--cursor); }
.replies { display: none; font-size: 12px; text-decoration: none; }
.replies.some, .m:hover .replies, .m:focus-within .replies { display: inline-block; }
.sline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 8px 46px; padding: 4px 8px; border-left: 3px solid var(--line); background: var(--panel); border-radius: 4px; font-size: 13px; }
.sline .sbody { flex-basis: 100%; color: var(--quiet); }
.sline .sbody .line { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.day, .unreadline { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--quiet); font-size: 12px; }
.day::before, .day::after, .unreadline::before, .unreadline::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.unreadline { color: var(--bad); }
.unreadline::before { display: none; }
.unreadline::after { border-color: var(--bad); }
.attachment { margin: 4px 0; max-width: 100%; }
.attachment img { max-width: min(100%, 420px); max-height: 320px; border-radius: 6px; border: 1px solid var(--line); }
.attachment pre { margin: 0; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; max-width: 100%; overflow-x: auto; font-size: 12px; white-space: pre; }
.attnamed, .attachment figcaption { margin: 0; color: var(--quiet); font-size: 12px; }
.attachment figure { margin: 0; }
.composer { position: relative; padding: 8px 12px; border-top: 1px solid var(--line); }
.composer .box { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.composer .compose { display: block; width: 100%; border: 0; border-radius: 8px 8px 0 0; outline: 0; resize: none; max-height: 30vh; }
.composer .box:focus-within { border-color: var(--cursor); }
.composebar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.composebar .hintkeys { color: var(--quiet); font-size: 12px; }
.composebar button.send { background: var(--cursor); color: var(--bg); border-color: var(--cursor); }
.composebar button:disabled { opacity: .5; }
.filepick { display: none; }
.picked { list-style: none; margin: 0; padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.picked li { display: flex; align-items: center; gap: 6px; }
.composer .composernote, .composer .composerfail { margin: 4px 2px 0; font-size: 12px; }
.mentionlist { position: absolute; bottom: calc(100% - 6px); left: 12px; z-index: 10; list-style: none; margin: 0; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100% - 24px); }
.mentionlist li { padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.mentionlist li.chosen { background: var(--sel); }
.chips { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; }
.chat .readonly { margin: 0; padding: 12px; border-top: 1px solid var(--line); }

/* Row cards and the bottom sheet, which the phone form of a namespace uses. */
.cardwrap { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cardtools { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 6px; }
.cardtools .filter { flex: 1 1 100%; width: 100%; margin: 0; }
.sortnote { font-size: 12px; }
.cardlist { flex: 1; min-height: 120px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); position: relative; -webkit-overflow-scrolling: touch; }
.cardcontent { position: relative; width: 100%; }
.rcard { position: absolute; left: 6px; right: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; overflow: hidden; cursor: pointer; margin-top: 4px; }
.rcard.bad { border-color: var(--bad); }
.rcard .cid { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard .cmark { position: absolute; right: 8px; top: 6px; color: var(--bad); font-size: 11px; }
.rcard .cline { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sheetwrap { position: fixed; inset: 0; z-index: 40; }
.sheetwrap .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(0, 0, 0, .4); border-radius: 0; }
.bsheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; max-height: 85dvh; overflow-y: auto; overflow-x: hidden; background: var(--bg); color: var(--fg); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.3); }
.bsheet .sheethead { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: -8px; background: var(--bg); padding: 4px 0; z-index: 1; }
.bsheet table.detail th { width: 96px; white-space: normal; }
.bsheet table { table-layout: fixed; }
.bsheet td { min-width: 0; max-width: none; overflow-wrap: anywhere; }

/* The phone form: up to 820 CSS pixels, the frame's own limit for a drawer in place of a docked column, controls are touch targets,
   and nothing makes the page wider than the screen. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  body { height: var(--vvh, 100dvh); }
  .mode:not(.past) { padding: 2px 8px; font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main { padding: 8px; overflow-x: hidden; }
  main.fill > .chat { margin: -8px -8px 0; }
  .mode { padding: 6px 8px; }

  button, .tab, .subtab, select, input[type="text"], input[type="search"], input:not([type]), textarea { min-height: 44px; font-size: 16px; }
  button, .tab, .subtab { min-width: 44px; }
  button.small, .composebar button, .chip { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .check, .toggle, .sortpick { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  .check input, .toggle input { width: 22px; height: 22px; }
  .subtabs, .toolbar { flex-wrap: wrap; }
  .toolbar .filter, .filter, .filter.wide { width: 100%; font-size: 16px; min-height: 44px; }
  .keylist .item { min-height: 44px; flex-wrap: wrap; align-items: center; }
  .keylist .main { flex: 1 1 60%; }
  .keylist .main a, .crumbs a, td a, .refs a, .card, .panel-body a, .tab { display: inline-flex; align-items: center; min-height: 44px; }
  .keylist .snippet { white-space: normal; }
  .cards { gap: 6px; }
  .card { flex: 1 1 40%; min-width: 0; }
  .tablewrap, .graphscroll, .diff, article.doc pre.code, pre.raw { max-width: 100%; overflow-x: auto; }
  article.doc { max-width: 100%; overflow-wrap: anywhere; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  .filediff { max-width: 100%; }
  .rowpanel { flex-basis: auto; }


  .overlay { padding-top: 4vh; }
  .dialog, .dialog.help { width: calc(100vw - 16px); max-height: 88vh; overflow-x: hidden; }
  .help .sections { columns: 1; }
  .palette li { min-height: 44px; align-items: center; }
  .palette .group { flex-basis: 56px; }
  .dialog .filter { font-size: 16px; }

  .connect { max-width: 100%; }
  .connect input { width: 100%; font-size: 16px; min-height: 44px; }
  .connect label { display: block; }

  .chat { display: block; border: 0; border-radius: 0; height: 100%; }
  .chat > * { height: 100%; }
  .chat[data-screen="list"] > .chmain, .chat[data-screen="list"] > .chthread,
  .chat[data-screen="conv"] > .chside, .chat[data-screen="conv"] > .chthread,
  .chat[data-screen="thread"] > .chside, .chat[data-screen="thread"] > .chmain { display: none; }
  .chat .chside { border-right: 0; }
  .chat .member a { min-height: 48px; }
  .chat .newdm button { min-width: 64px; }
  .chat .back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 30px; line-height: 1; margin-left: -8px; }
  .chat .chthread .close { display: none; }
  .chat .chhead { padding: 4px 8px; gap: 6px; flex-wrap: wrap; }
  .chat .chhead .findbox { width: 100%; order: 9; }
  .chat .chhead .says { display: none; }
  .chat .scroll { padding: 6px 8px; }
  .group { gap: 8px; }
  .avatar { flex-basis: 32px; height: 32px; }
  .m > .mt { display: none; }
  .replies { min-height: 44px; align-items: center; }
  .replies.some, .m:focus-within .replies { display: inline-flex; }
  .m:hover .replies:not(.some) { display: none; }
  .m:focus-within .replies:not(.some) { display: inline-flex; }
  .sline { margin-left: 0; }
  .composer { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  body.typing .composer { padding-bottom: 6px; }
  .composebar .grow { flex: 1; }
  .mentionlist li { min-height: 44px; display: flex; align-items: center; }
  .picked button { min-height: 44px; }
  .attachment img { max-width: 100%; }
  .bsheet { max-height: 85vh; max-height: 85dvh; }
}
.t.gone { display: none; }

@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  p > a:only-child, .crumbs a, .keylist .main a, .panel-body a, td a, .refs a, .subtab, .card { min-width: 44px; }
  .subtab, .card { justify-content: center; }
  p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  .chat input[type="text"], .chat input[type="search"], .chat textarea { font-size: 16px; }
  .replies { min-width: 44px; justify-content: center; }
  .chat .attachment summary { padding: 0 4px; }
}

/* A phone on its side: the screen is short, so what stands above the view is the header alone, the
   conversation head is one row and the composer is one row, which leaves the messages their height. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse), (orientation: landscape) and (max-height: 500px) and (max-width: 820px) {
  .mode:not(.past) { display: none; }
  .chat .chhead { flex-wrap: nowrap; }
  .chat .chhead .findbox { order: 0; width: auto; flex: 1 1 120px; min-width: 0; }
  .composer .box { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .composer .picked { flex: 1 1 100%; }
  .composer .compose { flex: 1; min-width: 0; border-radius: 8px 0 0 8px; }
  .composer .composebar { flex: none; }
  .composer .chips { display: none; }
}