.out { margin-left: auto; padding: 6px 11px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font-weight: 800; font-size: 13px; }   /* (1.12.1: the size of the buttons beside it) */
.box { border: 3px solid var(--paper); padding: 18px 20px; box-shadow: 8px 8px 0 var(--hot); margin: 22px 0; }
.box h1, .box h2 { margin: 0 0 12px; }
.box h2 small { color: var(--mute); font-size: 14px; font-weight: 400; }
.gate { display: grid; place-items: center; padding: 6vh 0; }
.gate .box { width: min(100%, 440px); }
.gate label, .settings label { display: block; margin: 12px 0 4px; color: var(--mute); font-size: 13px; }
.gate input, .settings input:not([type=checkbox]):not([type=radio]), .settings select, .settings textarea {
	width: 100%; padding: 9px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; }
.gate button, .settings button[type=submit], #more, .pages button { margin-top: 14px; padding: 8px 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; box-shadow: 3px 3px 0 var(--hot); }
.pages button { margin: 0 6px 0 0; padding: 4px 8px; font-size: 12.5px; box-shadow: 2px 2px 0 var(--hot); }
.pages button.danger { background: var(--ink); color: var(--bad); border-color: var(--bad); box-shadow: none; }
.muted { color: var(--mute); font-size: 13px; }
.link { background: none; border: 0; padding: 0; color: var(--hot); text-decoration: underline; font: inherit; cursor: pointer; }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 22px; }
.num { border: 2px solid var(--line); padding: 12px 14px; }
.num b { display: block; font-size: 26px; color: var(--paper); }
.num span { color: var(--mute); font-size: 12.5px; }
.num.good b { color: var(--hot); }
.num.bad b { color: var(--bad); }
.settings fieldset { min-width: 0; border: 2px dashed var(--line); margin: 16px 0; padding: 10px 14px 14px; }
.settings legend { padding: 0 6px; color: var(--paper); font-weight: 800; }
.switch { display: flex !important; gap: 10px; align-items: center; color: var(--paper) !important; font-size: 15px !important; }
.pick { display: flex !important; gap: 10px; align-items: flex-start; color: var(--paper) !important; font-size: 15px !important; }
.pick small { display: block; color: var(--mute); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.saved { margin-left: 12px; color: var(--hot); }
.tw { overflow-x: auto; }
table.pages { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pages th, .pages td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pages th { color: var(--mute); font-weight: 400; }
.pages .id { color: var(--hot); font-weight: 800; letter-spacing: .08em; }
.pages tr.down td { opacity: .55; }
.reports { padding-left: 20px; }
.reports li { margin: 0 0 12px; }
.reports .why { white-space: pre-wrap; }
.reports li.muted { list-style: none; margin-left: -20px; }
.banner { border-color: var(--bad); }
.banner.good { border-color: var(--hot); }
.updated { margin: 8px 0 0; text-align: right; font-size: 12px; }
.pages td.acts { white-space: nowrap; }
.pages td.acts a { margin-right: 6px; }
.out:hover { border-color: var(--hot); color: var(--hot); }
code { color: var(--hot); }
@media (max-width: 560px) {
	.box { padding: 14px; box-shadow: 5px 5px 0 var(--hot); }
	.pages td.acts { white-space: normal; }
	.pages td.acts button { margin-top: 6px; }
}
.pages .from { display: block; margin-top: 8px; color: var(--mute); font-size: 12px; overflow-wrap: anywhere; }
.reports button { margin-top: 8px; padding: 4px 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; font-size: 12.5px; box-shadow: 2px 2px 0 var(--hot); }
.reports button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hot); }
.pickhead { margin: 4px 0 6px; color: var(--paper); font-weight: 800; }
.engines .pick { margin: 6px 0 !important; }
.here span { display: inline; }
.pages .from.named { color: var(--hot); }
.pages button.copyto { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.pages tr.copyrow td { background: #141412; border-bottom: 2px solid var(--hot); }
.copyform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 0; }
.copyform label { flex-basis: 100%; color: var(--paper); font-weight: 800; }
.copyform .addrline { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.copyform input { width: 14em; max-width: 60vw; padding: 7px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; letter-spacing: .04em; }
.copyform button { margin: 0 !important; }
.copyform .saved { margin-left: 4px; color: var(--paper); }

/* Visitors, online now and activity (2026-10-15) */
.lamp { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; background: var(--mute); border: 2px solid var(--ink); }
.lamp[data-level=great] { background: #5cff6a; box-shadow: 0 0 0 1.5px #5cff6a, 0 0 8px #5cff6a; }
.lamp[data-level=good] { background: #ffe14d; box-shadow: 0 0 0 1.5px #ffe14d, 0 0 8px #ffe14d; }
.lamp[data-level=slow] { background: #ff9f2e; box-shadow: 0 0 0 1.5px #ff9f2e, 0 0 8px #ff9f2e; }
.lamp[data-level=bad] { background: #ff4b3e; box-shadow: 0 0 0 1.5px #ff4b3e, 0 0 8px #ff4b3e; }
.lamp[data-level=off] { background: #0b0b0b; box-shadow: 0 0 0 1.5px var(--mute); }
.live { color: #5cff6a; font-weight: 800; }
.online, .visitors, .activity { list-style: none; margin: 0; padding: 0; }
.online li.on { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.online li.on.away { opacity: .7; }
.online .oping { font-weight: 800; white-space: nowrap; }
.online .oping .muted { font-weight: 400; display: block; margin-top: 2px; }
.online .owhere, .online .adev { grid-column: 2; }
.vtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 12px; }
.vtools .switch { margin: 0; font-size: 13.5px !important; }
.vtools input[type=search] { flex: 1 1 240px; padding: 7px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; }
.visitor { padding: 14px 0; border-bottom: 1px solid var(--line); }
.visitor.robot { opacity: .65; }
.whohead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vname { color: var(--hot); font-size: 17px; }
.vname.none { color: var(--mute); font-weight: 400; font-style: italic; font-size: 15px; }
.vip { margin-top: 4px; }
.vip .addr { color: var(--paper); font-weight: 800; letter-spacing: .02em; }
.look a { font-size: 12.5px; margin-right: 8px; }
.vplace { color: var(--paper); margin-top: 2px; }
.vdev, .vdid { color: var(--mute); font-size: 13px; margin-top: 2px; }
button.small, .admin .small { margin: 0 0 0 4px; padding: 2px 8px; font-size: 12px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font-weight: 800; box-shadow: 2px 2px 0 var(--hot); }
button.small:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hot); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.chiplabel { color: var(--mute); font-size: 12px; min-width: 6.5em; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 8px; border: 2px solid var(--line); background: var(--ink); color: var(--paper); font: inherit; font-size: 12.5px; text-decoration: none; letter-spacing: .04em; }
.chip.made { border-color: var(--hot); color: var(--hot); font-weight: 800; }
.chip.made .ct { color: var(--paper); font-weight: 400; letter-spacing: 0; max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.copy { border-style: dashed; }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--paper); }
.nameform { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.nameform input { flex: 1 1 220px; max-width: 26em; padding: 6px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--hot); font: inherit; }
.nameform button { padding: 5px 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; box-shadow: 2px 2px 0 var(--hot); }
.filter { margin: 0 0 10px; padding: 8px 12px; border: 2px solid var(--hot); color: var(--paper); }
.activity .act { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.activity time { color: var(--mute); grid-row: span 3; white-space: nowrap; }
.activity .robot { opacity: .6; }
button.who { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--paper); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline dotted var(--mute); text-underline-offset: 3px; }
button.who.named { color: var(--hot); }
button.who:hover { text-decoration-color: currentColor; }
.aplace { color: var(--mute); }
.awhat { color: var(--paper); overflow-wrap: anywhere; }
.awhat .pid { font-weight: 800; letter-spacing: .06em; }
.awhat .pid.gone { color: var(--mute); }
.awhat .said { color: #d8d4ca; font-style: italic; }
.awhat .ptl, .awhat .times, .awhat .ref { color: var(--mute); margin-left: 8px; }
.adev { color: var(--mute); font-size: 12px; }
.act-new .awhat, .act-copy .awhat { color: var(--hot); }
.act-signin_bad .awhat, .act-password_bad .awhat, .act-report .awhat { color: var(--bad); }
.more { margin-top: 12px; padding: 7px 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; box-shadow: 3px 3px 0 var(--hot); }
.pages .by .who { font-size: 12px; }
@media (max-width: 560px) {
	.activity .act { grid-template-columns: 1fr; }
	.activity time { grid-row: auto; }
	.online li.on { grid-template-columns: 1fr; }
	.online .owhere, .online .adev { grid-column: 1; }
}

/* y00r HQ (2026-10-15): here/away, notifications, a bar of sections, the inbox, people, a person's card, keys */
.herebox { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 5px 10px; border: 2px solid #5cff6a; color: #5cff6a; font-weight: 800; font-size: 13px; cursor: pointer; }
.herebox.away { border-color: var(--line); color: var(--mute); }
.herebox input { accent-color: #5cff6a; }
.bell { padding: 6px 11px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font-weight: 800; font-size: 13px; }
.bell.on { border-color: var(--hot); color: var(--hot); }
.herebox + .bell, .bell + .out { margin-left: 0; }
.hqnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; gap: 4px; overflow-x: auto; margin: 0 -4px; padding: 8px 4px; background: var(--ink); border-bottom: 2px solid var(--line); scrollbar-width: none; }
.hqnav a { flex: none; padding: 5px 10px; color: var(--paper); text-decoration: none; font-weight: 800; font-size: 13px; border: 2px solid transparent; }
.hqnav a:hover { border-color: var(--line); }
.navn { margin-left: 6px; padding: 0 6px; background: var(--bad); color: #fff; border-radius: 9px; font-size: 11px; }
#nav-people.navn { background: var(--hot); color: var(--ink); }
.admin .box { scroll-margin-top: 60px; }
.chip2 { display: inline-block; padding: 1px 7px; border: 2px solid var(--line); color: var(--mute); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.chip2.stg-hot { border-color: var(--bad); color: var(--bad); }
.chip2.stg-warm { border-color: #ff9f2e; color: #ff9f2e; }
.chip2.stg-curious { border-color: #ffe14d; color: #ffe14d; }
.chip2.stg-customer { border-color: #5cff6a; color: #5cff6a; }
.chip2.opened, .chip2.you { border-color: var(--hot); color: var(--hot); }
.chip2.unread { border-color: var(--bad); color: var(--paper); background: var(--bad); }
.pname { margin: 0; padding: 0; background: none; border: 0; color: var(--hot); font: inherit; font-weight: 800; cursor: pointer; text-align: left; text-decoration: underline dotted var(--mute); text-underline-offset: 3px; }
.pname.big { font-size: 16.5px; }
.dk { color: var(--mute); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* The inbox: conversations on the left, the open one on the right (one at a time on a phone) */
.inbox { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr); gap: 16px; min-height: 420px; }
.threads { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; border-right: 2px solid var(--line); padding-right: 10px; }
.threads li.th { padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.threads li.th:hover, .threads li.th:focus-visible { background: #141412; }
.threads li.th.on { background: #1b1c14; box-shadow: inset 4px 0 0 var(--hot); }
.threads li.th.closed { opacity: .55; }
.th-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.th-name { font-weight: 800; color: var(--paper); }
.th.unread .th-name { color: var(--hot); }
.th-when { margin-left: auto; color: var(--mute); font-size: 11.5px; }
.count { padding: 0 6px; background: var(--bad); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 800; }
.th-last { margin-top: 3px; color: #d8d4ca; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-where { color: var(--mute); font-size: 11.5px; }
.waits { color: #ff9f2e; font-weight: 800; }
.aiwork { color: var(--hot); }
.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread-none { align-self: center; justify-self: center; }
.th-head { display: flex; align-items: flex-start; gap: 10px; }
.th-head .back { display: none; }
.th-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.th-sub { flex-basis: 100%; color: var(--mute); font-size: 12px; }
.th-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; font-size: 13px; color: var(--mute); }
.th-tools select { margin-left: 6px; padding: 4px 6px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; font-size: 12.5px; }
.th-log { list-style: none; margin: 0; padding: 10px 4px; flex: 1; min-height: 220px; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.th-log .tm { max-width: 86%; padding: 8px 11px; border: 2px solid var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.th-log .tm-who { display: block; margin-bottom: 3px; color: var(--mute); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.th-log .tm-visitor { align-self: flex-start; border-color: var(--paper); box-shadow: 3px 3px 0 var(--line); }
.th-log .tm-human { align-self: flex-end; border-color: #5cff6a; }
.th-log .tm-human .tm-who { color: #5cff6a; }
.th-log .tm-ai { align-self: flex-end; border-color: var(--hot); }
.th-log .tm-ai .tm-who { color: var(--hot); }
.th-log .tm-note { align-self: center; border: 0; color: var(--mute); font-size: 12.5px; }
.tm-at { display: block; margin-top: 4px; color: var(--mute); font-size: 11px; }
.th-typing { margin: 6px 0 0; color: var(--mute); font-size: 12.5px; }
.th-say { display: flex; gap: 8px; margin-top: 10px; }
.th-say textarea { flex: 1; min-width: 0; min-height: 50px; padding: 8px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; resize: vertical; }
.th-say button { padding: 6px 14px; background: #5cff6a; color: var(--ink); border: 2px solid #5cff6a; font-weight: 800; }
.th-dossier { margin-top: 12px; padding: 10px 12px; border: 2px dashed var(--line); font-size: 13px; }
.th-dossier p { margin: 4px 0; }
.dlabel { display: block; margin-bottom: 4px; color: var(--hot); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) {
	.inbox { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.threads { border-right: 0; padding-right: 0; max-height: none; }
	.inbox.reading .threads, .inbox.reading .thread-none { display: none; }
	.inbox:not(.reading) .thread { display: none; }
	.th-head .back { display: inline-block; }
	.th-log { max-height: 55svh; }
	.thread-none { display: none; }
}

/* People, leads and who's who */
.leadbox { margin: 0 0 14px; border: 2px solid var(--hot); padding: 10px 12px; }
.leadbox summary { cursor: pointer; font-weight: 800; color: var(--hot); }
.leadform { margin-top: 6px; }
.clues h3 { margin: 6px 0 8px; font-size: 15px; }
.clues-list, .people, .keys { list-style: none; margin: 0 0 12px; padding: 0; }
.clue { padding: 10px 12px; margin-bottom: 8px; border: 2px dashed var(--hot); }
.pct { padding: 1px 6px; background: var(--hot); color: var(--ink); font-weight: 800; font-size: 12.5px; }
.pct.small { font-size: 11px; background: var(--line); color: var(--paper); }
.why { margin: 6px 0; padding-left: 18px; color: #d8d4ca; font-size: 13px; }
.why li { margin: 3px 0; }
.clue .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.person { padding: 12px 0; border-bottom: 1px solid var(--line); }
.person.lead { box-shadow: inset 4px 0 0 var(--hot); padding-left: 12px; }
.person.me { opacity: .75; }
.psum { margin: 6px 0 0; color: #d8d4ca; font-size: 13px; }
.pnext { margin: 4px 0 0; font-size: 13px; }

/* A person's card */
.pcard { width: min(760px, calc(100% - 24px)); max-height: calc(100svh - 32px); padding: 0; background: var(--ink); color: var(--paper); border: 3px solid var(--paper); box-shadow: 12px 12px 0 var(--hot); overflow-y: auto; }
.pcard::backdrop { background: rgba(0, 0, 0, .72); }
.pcard > * { padding-left: 20px; padding-right: 20px; }
.pc-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 10px; background: var(--ink); border-bottom: 2px solid var(--line); }
.pc-head h2 { flex: 1; margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.pcard > p.muted { margin: 8px 0 0; }
.pc-sec { padding-top: 6px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.pc-sec h3 { margin: 12px 0 6px; font-size: 15px; }
.pc-sec .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.pitch { margin: 8px 0; padding: 10px 12px; border: 2px solid var(--line); }
.ptext { margin: 4px 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--paper); font-size: 14px; }
.dossier label { display: block; margin: 8px 0 3px; color: var(--mute); font-size: 12.5px; }
.dossier textarea, .pc-sec textarea { width: 100%; padding: 7px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--line); font: inherit; font-size: 13.5px; resize: vertical; }
.dossier textarea:focus { border-color: var(--paper); }
ul.plain { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
ul.plain > li { padding: 5px 0; border-bottom: 1px solid #1d1c19; }
.pcard .small.danger, .keys .small.danger { color: var(--bad); border-color: var(--bad); box-shadow: none; }
.pcard .row:last-child { padding-bottom: 16px; }
@media (max-width: 560px) {
	.pcard { width: 100%; max-height: 100svh; height: 100svh; margin: 0; border: 0; box-shadow: none; }
	.pcard > * { padding-left: 14px; padding-right: 14px; }
}

/* Keys for apps */
.keyform { display: flex; flex-wrap: wrap; gap: 8px; }
.keyform input { flex: 1 1 220px; padding: 7px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; }
.keyform button { padding: 7px 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; box-shadow: 3px 3px 0 var(--hot); }
.newkey { margin-top: 10px; padding: 10px 12px; border: 2px solid var(--hot); overflow-wrap: anywhere; }
.keys li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.online .hiform { grid-column: 1 / -1; }
.hqline { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.hqline input { width: 16em; max-width: 60vw; }

/* y00r Business: the businesses in y00r's HQ, a business's site and domain in its own HQ */
.bizes { list-style: none; margin: 0; padding: 0; }
.biz { padding: 14px 0; border-bottom: 1px solid var(--line); }
.biz.paused { opacity: .6; }
.aiform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 8px 0 4px; }
.aiform label { display: flex; flex-direction: column; gap: 3px; color: var(--mute); font-size: 12px; }
.aiform select, .aiform input { padding: 5px 7px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; font-size: 13px; }
.aiform input { width: 9em; }
.bizdom { margin: 6px 0; font-size: 13px; }
.biz .keyform { margin-top: 6px; }
.domains { list-style: none; margin: 10px 0 0; padding: 0; }
.domains li.domain { padding: 8px 0; border-bottom: 1px solid var(--line); }
.domains li.how { margin-top: 8px; padding: 10px 12px; border: 2px solid var(--hot); }
table.dns { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
table.dns th, table.dns td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
table.dns th { color: var(--mute); font-weight: 400; }
.mysite { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 16px; }
.mysite-chat { display: flex; flex-direction: column; min-width: 0; }
.mysite-log { max-height: 420px; min-height: 200px; }
.mysite-log .tm-human { align-self: flex-end; }
.mysite-log .tm-ai { align-self: flex-start; }
.mysite-frame { min-height: 520px; }
.mysite-frame iframe { min-height: 520px; }
@media (max-width: 860px) { .mysite { grid-template-columns: minmax(0, 1fr); } .mysite-frame, .mysite-frame iframe { min-height: 60svh; } }

/* Knowledge (DeepMax, 2026-10-15): the notes, the library, trying it */
.kgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 22px; align-items: start; }
.kmain h3, .kside h3 { margin: 18px 0 8px; font-size: 16px; }
.kmain h3:first-child, .kside h3:first-child { margin-top: 4px; }
.kmain h3 small, .kside h3 small { color: var(--mute); font-size: 12.5px; font-weight: 400; }
.knotes textarea, .kform textarea, .kedit textarea { width: 100%; padding: 9px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; resize: vertical; }
.knotes .row button, .kedit button[type=submit] { margin-top: 8px; padding: 6px 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; box-shadow: 3px 3px 0 var(--hot); }
.dmline { margin: 8px 0 14px; color: var(--paper); font-size: 13.5px; line-height: 1.55; }
.chip2.dm-on { border-color: var(--hot); color: var(--ink); background: var(--hot); }
.chip2.dm-off { border-color: var(--line); color: var(--mute); }
.ktabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.ktabs button { padding: 5px 10px; background: var(--ink); color: var(--mute); border: 2px solid var(--line); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.ktabs button[aria-selected=true] { color: var(--ink); background: var(--paper); border-color: var(--paper); box-shadow: 2px 2px 0 var(--hot); }
.kform { margin: 0 0 6px; padding: 2px 12px 12px; border: 2px dashed var(--line); }
.kform input[type=file] { padding: 8px; border: 2px dashed var(--paper); background: var(--ink); color: var(--paper); width: 100%; }
#k-find { width: 100%; margin: 12px 0 2px; padding: 7px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; }
.klist { list-style: none; margin: 8px 0 0; padding: 0; }
.kitem { padding: 11px 0 12px; border-bottom: 1px solid var(--line); }
.kitem.off { opacity: .5; }
.kitem.pinned .ktitle::before { content: "\2605  "; color: var(--hot); }
.khead { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.ktitle { color: var(--paper); font-size: 15px; overflow-wrap: anywhere; }
.chip2.kk-qa { border-color: #5cff6a; color: #5cff6a; }
.chip2.kk-web { border-color: #ffe14d; color: #ffe14d; }
.chip2.kk-file { border-color: #ff9f2e; color: #ff9f2e; }
.ktools { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0 4px; }
.ktools .switch { font-size: 13px !important; gap: 6px; }
.ktools a { color: var(--hot); font-size: 13px; }
.kprev { margin: 4px 0 0; color: var(--mute); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
.kedit { margin-top: 6px; }
.kedit label { margin: 8px 0 3px; }
.kempty { padding: 12px 0; }
.kside { border-left: 2px solid var(--line); padding-left: 18px; }
.ktries { max-height: 520px; min-height: 0; border: 0; padding: 4px 0; }
.ktries .tm { max-width: 100%; }
.ktries .tm-human { align-self: flex-start; }
.ksite pre { max-height: 340px; overflow: auto; white-space: pre-wrap; color: var(--mute); font-size: 12.5px; border: 2px solid var(--line); padding: 10px; }
.ksite summary { cursor: pointer; color: var(--paper); font-weight: 800; margin-top: 14px; }
.tm-read { margin-top: 6px; font-size: 12px; white-space: normal; }
.tm-read summary { cursor: pointer; color: var(--mute); font-weight: 800; }
.tm-read ol { margin: 4px 0 0; padding-left: 18px; color: var(--paper); }
.tm-read li { margin: 2px 0; }
.rl { display: inline-block; min-width: 4.8em; color: var(--hot); font-weight: 800; }
.rl-answers { color: #5cff6a; }
.rl-website { color: #ffe14d; }
.rl-notes { color: var(--paper); }
.th-log .teach { display: block; margin: 6px 0 0 auto; }
@media (max-width: 860px) {
	.kgrid { grid-template-columns: minmax(0, 1fr); }
	.kside { border-left: 0; padding-left: 0; border-top: 2px solid var(--line); padding-top: 8px; }
}

/* DeepMax, as y00r's owner runs it */
.dmlayers { list-style: none; margin: 10px 0 4px; padding: 10px 12px; border: 2px solid var(--line); columns: 2 320px; column-gap: 26px; }
.dmlayers li { break-inside: avoid; margin: 3px 0; font-size: 13px; }
.dmlayers .dml { display: inline-block; min-width: 2.2em; color: var(--hot); }
.dmw { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; align-items: end; }
.dmw input[type=number] { max-width: 7em; }
.dmstats { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.dmstats th, .dmstats td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.dmstats th { color: var(--mute); font-weight: 400; }
.dmbox .keyform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dmbox .keyform input { flex: 1 1 260px; padding: 7px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; }

/* Chat focus (2026-10-15): only the chats; and the chats on the whole screen */
.focus-btn { padding: 6px 11px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font-weight: 800; font-size: 13px; cursor: pointer; }
.focus-btn[aria-pressed=true] { border-color: var(--hot); color: var(--ink); background: var(--hot); }
body.focus .hqnav, body.focus #admin > :not(#talk-box):not(#online-box) { display: none !important; }
body.focus #talk-box { margin-top: 12px; }
body.focus .inbox { min-height: calc(100svh - 230px); }
body.focus .threads { max-height: calc(100svh - 230px); }
body.focus .th-log { max-height: none; min-height: 0; }
body.focus .thread { max-height: calc(100svh - 200px); }
.immerse-exit { display: none; }
body.immersive header.top, body.immersive #online-box, body.immersive #banner { display: none !important; }
body.immersive #talk-box { position: fixed; inset: 0; z-index: 40; margin: 0; padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)); border: 0; box-shadow: none; background: var(--ink); overflow: hidden; display: flex; flex-direction: column; }
body.immersive #talk-box > h2 { margin-top: 0; padding-right: 170px; }
body.immersive .inbox { flex: 1; min-height: 0; }
body.immersive .threads { max-height: none; height: 100%; }
body.immersive .thread { max-height: none; height: 100%; }
body.immersive .immerse-exit { display: block; position: fixed; top: max(12px, env(safe-area-inset-top)); right: 16px; z-index: 41; padding: 6px 11px; background: var(--ink); color: var(--paper); border: 2px solid var(--hot); font-weight: 800; font-size: 13px; cursor: pointer; }

/* Payments (2026-10-15) */
.paybox .pick small { display: block; }
.hooks p { margin: 6px 0; overflow-wrap: anywhere; }
.plansed { width: 100%; border-collapse: collapse; font-size: 13px; }
.plansed th, .plansed td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plansed th { color: var(--mute); font-weight: 400; }
.plansed input:not([type=checkbox]), .plansed select { width: 100%; min-width: 5em; padding: 5px 7px; background: var(--ink); color: var(--paper); border: 2px solid var(--line); font: inherit; }
.plansed .p-what { min-width: 16em; }
.plansed .p-price { max-width: 7em; }
.paybox .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.paylist { list-style: none; margin: 8px 0 0; padding: 0; }
.paylist li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.locs { margin: 6px 0; padding-left: 18px; font-size: 13px; }
#paylink-form { align-items: end; }

/* Emails (2026-10-15) */
.mailprev { border: 3px solid var(--paper); box-shadow: 6px 6px 0 var(--hot); height: 560px; background: #e9e5dc; }
.mailprev iframe { width: 100%; height: 100%; border: 0; display: block; }
.mailbox .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mailbox textarea { width: 100%; padding: 9px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; resize: vertical; }

/* The Android app's door (y00r.com/app) when HQ has moved and this phone is not signed in; and HQ's Apps section. */
.door .bad { margin: 10px 0 0; color: var(--bad); font-weight: 800; }
.door .hqline input { flex: 1; min-width: 0; width: auto; }
.apps .app { margin: 0 0 14px; }
.apps .app h3 { margin: 0 0 4px; font-size: 15px; }
.apps .get { display: inline-block; margin: 6px 0; padding: 8px 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); font-weight: 800; box-shadow: 3px 3px 0 var(--hot); text-decoration: none; }
.apps ol { margin: 6px 0 0; padding-left: 1.7em; color: var(--mute); font-size: 13px; }
/* A copy's other pages (Pages...): how each one stands */
.buildlist { flex-basis: 100%; margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.buildlist li { color: var(--paper); overflow-wrap: anywhere; }
.buildlist li small { color: #bdb8a8; }
.buildlist li.b-done small { color: #9be29b; }
.buildlist li.b-failed small, .buildlist li.b-skipped small { color: #ffb3a1; }
/* A row's form or panel stays in view while the table scrolls sideways on a phone */
@media (max-width: 700px) {
	.pages tr.copyrow td > .copyform { position: sticky; left: 0; max-width: calc(100vw - 72px); }
}

/* The funnel (2026-10-16): the funnel drawn, every prospect by stage, what waits for your thumbs, the Closer's settings */
#nav-funnel.navn { background: var(--hot); color: var(--ink); }
.fwarn { padding: 8px 12px; border: 2px dashed #ff9f2e; }
.fflow { margin: 6px 0 16px; padding: 12px 14px 10px; border: 2px solid var(--line); }
.fsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fstep { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) 9.5em; align-items: center; gap: 10px; padding: 1px 0; cursor: default; }
.fstep:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
.fname { color: var(--paper); font-weight: 800; font-size: 13px; }
.flane { display: flex; justify-content: center; align-items: center; height: 24px; min-width: 0; }
.fbar { position: relative; height: 22px; background: var(--hot); border-radius: 4px; transition: width .45s ease-out; }
.fval { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ink); font-weight: 800; font-size: 13px; white-space: nowrap; }
.fstep.fv-out .fval { left: 100%; transform: translate(8px, -50%); color: var(--paper); }
.fstep.zero .fbar { width: 0 !important; }
.fstep.zero .fval { left: 50%; transform: translate(-50%, -50%); color: var(--mute); }
.fstep:hover .fbar, .fstep:focus-visible .fbar { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper); }
.fkeep { color: var(--mute); font-size: 12px; text-align: right; white-space: nowrap; }
.fkeep b { color: var(--paper); }
.flost { margin: 10px 0 0; color: var(--mute); font-size: 12.5px; }
.flost-n { color: var(--bad); font-weight: 800; }
.ftable { margin-top: 8px; font-size: 12.5px; }
.ftable summary { cursor: pointer; color: var(--mute); font-weight: 800; }
.ftip { position: fixed; z-index: 60; max-width: 260px; margin: 0; padding: 7px 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
	box-shadow: 3px 3px 0 var(--hot); font-size: 12.5px; pointer-events: none; }
.ftip b { font-size: 15px; }
.fadd .ktabs { margin-top: 10px; }
.fshape { margin: 10px 0 2px; overflow-wrap: anywhere; }
.fskip { margin: 8px 0; }
.fsendbox { margin: 0 0 16px; padding: 10px 12px 12px; border: 2px solid var(--hot); }
.fsendbox h3 { margin: 0 0 4px; font-size: 15px; }
.fsendbox h3 small { color: var(--mute); font-size: 12.5px; font-weight: 400; }
.fsend { list-style: none; margin: 6px 0 0; padding: 0; }
.fsitem { padding: 10px 0; border-top: 1px solid var(--line); }
.fsitem .row, .fc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fsitem .row .small, .fc-acts .small, .pc-funnel .row .small { margin: 0; }
a.small { display: inline-block; text-decoration: none; }
.chip2.fkind { border-color: var(--paper); color: var(--paper); }
.chip2.fkind.first { border-color: var(--hot); color: var(--hot); }
.chip2.closer { border-color: var(--hot); color: var(--ink); background: var(--hot); }
.chip2.fscore { min-width: 2.4em; text-align: center; border-color: var(--line); color: var(--paper); }
.chip2.fscore.warm { border-color: var(--hot); color: var(--hot); }
.chip2.fscore.hot { border-color: var(--hot); color: var(--ink); background: var(--hot); }
.chip2.fst-new { border-color: var(--line); color: var(--mute); }
.chip2.fst-sent { border-color: var(--paper); color: var(--paper); }
.chip2.fst-opened { border-color: #ffe14d; color: #ffe14d; }
.chip2.fst-engaged { border-color: #ff9f2e; color: #ff9f2e; }
.chip2.fst-offer { border-color: var(--hot); color: var(--hot); }
.chip2.fst-won { border-color: #5cff6a; color: var(--ink); background: #5cff6a; }
.chip2.fst-lost { border-color: var(--bad); color: var(--bad); }
.ftools { margin-top: 4px; }
.fcamp select { padding: 7px 9px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; max-width: 100%; }
.fcsv { font-weight: 800; font-size: 13px; white-space: nowrap; }
.fboard-wrap { overflow-x: auto; margin: 6px 0 4px; padding-bottom: 6px; }
.fboard { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; align-items: start; }
.fcol { min-width: 0; padding-top: 6px; border-top: 4px solid var(--line); }
.fcol h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; }
.fcol-n { color: var(--mute); font-size: 12px; font-weight: 400; }
.fcol-what { margin: 1px 0 8px; color: var(--mute); font-size: 11.5px; line-height: 1.35; }
.fcol-sent { border-top-color: var(--paper); }
.fcol-opened { border-top-color: #ffe14d; }
.fcol-engaged { border-top-color: #ff9f2e; }
.fcol-offer { border-top-color: var(--hot); }
.fcol-won { border-top-color: #5cff6a; }
.fcol-lost { border-top-color: var(--bad); }
.fcol.empty { opacity: .6; }
.fcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fcard { padding: 8px 9px 9px; border: 2px solid var(--line); background: #11110f; font-size: 12.5px; overflow-wrap: anywhere; }
.fcard.fhere { border-color: #5cff6a; box-shadow: 3px 3px 0 #5cff6a; }
.fc-head { display: flex; align-items: flex-start; gap: 6px; }
.fc-head .pname { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.fc-head .lamp { margin-top: 4px; }
.fc-site { margin: 3px 0 0; color: var(--mute); }
.fc-last { margin: 4px 0 0; color: #d8d4ca; }
.fc-next { margin: 3px 0 0; color: var(--mute); }
.fc-acts { margin-top: 7px; }
.small.fauto { border-color: var(--line); color: var(--mute); }
.small.fauto.on { border-color: #5cff6a; color: #5cff6a; }
.fempty { grid-column: 1 / -1; }
.fboard:has(> .fempty:only-child) { grid-template-columns: minmax(0, 1fr); }   /* nobody yet: the words in the width there is, not seven columns' */
.fsetbox { margin: 14px 0 0; padding: 10px 12px; border: 2px dashed var(--line); }
.fsetbox summary { cursor: pointer; font-weight: 800; color: var(--paper); }
.fset { margin-top: 4px; }
.fset textarea { width: 100%; }
/* A prospect's card: its funnel part */
.pc-funnel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-funnel .row a { overflow-wrap: anywhere; }
.fnext { margin: 6px 0; font-size: 13px; }
.fgoal { margin: 8px 0 4px; padding: 2px 12px 10px; border: 2px dashed var(--line); }
.fgoal label { margin: 8px 0 3px; }
.fcheckup { margin: 10px 0 4px; padding: 10px 12px; border: 2px solid var(--line); }
.fck-head { margin: 0 0 6px; font-size: 13.5px; }
.fck-score { display: inline-block; min-width: 2.2em; padding: 0 6px; background: var(--hot); color: var(--ink); font-weight: 800; text-align: center; }
.fck-score.old { background: var(--line); color: var(--paper); }
.fcheck { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.fcheck li { display: grid; grid-template-columns: 2.4em 2.4em minmax(0, 1fr); gap: 4px 8px; padding: 5px 0; border-bottom: 1px solid #1d1c19; }
.fcheck li.fck-cols { padding: 0 0 2px; font-size: 11px; }
.fmark { font-weight: 800; text-align: center; }
.fmark.y { color: #5cff6a; }
.fmark.n { color: var(--bad); }
.fmark.u { color: var(--mute); }
.fck-words { color: #d8d4ca; overflow-wrap: anywhere; }
.fck-words b { color: var(--paper); }
.fstodo.done, .fstodo.skipped { opacity: .6; }
.ftime li { font-size: 13px; color: #d8d4ca; }
.fby { display: inline-block; min-width: 3.6em; margin-right: 4px; font-weight: 800; font-size: 11.5px; letter-spacing: .04em; color: var(--mute); }
.by-them .fby { color: #ffe14d; }
.by-ai .fby { color: var(--hot); }
.by-owner .fby { color: #5cff6a; }
.tm-did { display: block; margin-top: 6px; white-space: normal; }
.tm-did-line { display: block; padding: 3px 8px; border-left: 3px solid var(--hot); color: var(--paper); font-size: 12px; }
@media (max-width: 760px) {
	.fboard { grid-template-columns: minmax(0, 1fr) !important; }
	.fcol.empty { display: none; }
}
@media (max-width: 560px) {
	.fstep { grid-template-columns: 4.8em minmax(0, 1fr) 3.2em; gap: 6px; }
	.fkeep-of { display: none; }
	.fname { font-size: 12px; }
}

/* Things to tap in the funnel, big enough for a thumb on a phone */
@media (max-width: 700px) {
	.fcard .fname, .fcard button, .fcard a, .fcsv, #funnel-box .small { min-height: 34px; display: inline-flex; align-items: center; }
	.fcsv { padding: 4px 8px; }
	#plan-box button { min-height: 40px; }   /* the plan's stop, keep and "never mind" too */
}
.plan-sure { flex-wrap: wrap; gap: 8px; }
.plan-sure > span { flex: 1 1 100%; color: var(--paper); }

/* The Scout (1.3.0): it finds local businesses by itself */
.scoutbox { border-style: dashed; }
.scoutbox summary { overflow-wrap: anywhere; }
.scsum { color: var(--mute); font-weight: 400; }

/* The countdown (1.7.0): the ticking clock on a page's bar; a live sample of it, its campaigns */
.cdbox { border-style: dashed; }
.cdsample { display: inline-flex; align-items: center; height: 26px; margin: 4px 0 2px; background: #0b0b0b; border: 2px solid #0b0b0b;
	box-shadow: 3px 3px 0 #c8ff2e; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; }
.cdsample .cds-l { padding: 0 7px 0 8px; color: #8f8b82; font-size: 12px; font-weight: 600; }
.cdsample .cds-t { padding-right: 8px; color: #c8ff2e; font-size: 16px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cdsample .cds-go { align-self: stretch; display: flex; align-items: center; padding: 0 9px; background: #c8ff2e; color: #0b0b0b;
	border-left: 2px solid #0b0b0b; font-size: 12px; font-weight: 800; }
.cdform { margin-top: 8px; }
.cdcamps { display: grid; gap: 8px; margin: 8px 0; }
.cdcamp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cdcamp input, .cdcamp select { width: auto; padding: 6px 8px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font: inherit; }
.cdcamp .cdc-name { flex: 1 1 140px; min-width: 0; }
.cdcamp .cdc-hours { width: 6.5em; }
.cdcamp .cdc-label { flex: 1 1 160px; min-width: 0; }
.cdcamp button { margin: 0; padding: 4px 8px; font-size: 12.5px; }
.scform { margin-top: 8px; }
.sckinds { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); }
.sckind-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sckind-list .switch { margin: 0; }
.scfinds { display: grid; gap: 8px; margin: 8px 0; }
.scfind { padding: 8px 10px; border: 2px solid var(--line); overflow-wrap: anywhere; }
.scfind.st-made { border-color: var(--hot); }
.scfind.st-skipped { opacity: .75; }
.scfind .whohead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scname { font-size: 15px; }
.scwhy { margin: 2px 0 0; font-size: 12.5px; }
.scfind .row { margin-top: 6px; flex-wrap: wrap; }
.scattr { font-size: 12px; }

/* Invoices (1.7.0): the money out, overdue and paid; the builder; each invoice with what it can do next. */
.invsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.invform h3.invsub { margin: 14px 0 4px; font-size: 13px; color: var(--mute); font-weight: 400; }
.invlines .i-desc { min-width: 18em; }
.invlines .i-qty { max-width: 5em; }
.invlines .i-price { max-width: 8em; }
.invlines .i-amt { white-space: nowrap; font-weight: 800; }
.invpre { flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.invpre .small { margin: 0; }
.invnow { margin-left: auto; font-size: 14px; color: var(--mute); }
.invnow b { margin-left: 6px; font-size: 20px; color: var(--hot); }
.invrec { align-self: end; }
.invlist .inv { padding: 11px 0; }
/* 2.0, HQ's operations: which invoices (kept in the address), what they come to, the put-away ones dimmed */
.invfilter { flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 10px; }
.invfilter label { display: grid; gap: 3px; font-size: 12px; min-width: 0; }
.invfilter label.grow { flex: 1 1 160px; }
.invfilter select, .invfilter input { max-width: 100%; }
.invshown { margin: 8px 0 0; font-size: 13px; }
.inv-away { opacity: .62; }
.inv-away:hover, .inv-away:focus-within { opacity: 1; }
.inv-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.inv-client { color: var(--paper); }
.inv-money { margin-left: auto; font-size: 16px; }
.inv-overdue .inv-money { color: var(--bad); }
.inv-paid .inv-money { color: var(--hot); }
.inv-void .inv-top b, .inv-void .inv-client { text-decoration: line-through; color: var(--mute); }
.inv-bits, .inv-last { margin: 3px 0 0; font-size: 12.5px; }
.inv-last { color: var(--paper); }
.inv-look { margin: 4px 0 0; padding: 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--hot); display: inline-block; }
.inv-acts { flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.inv-acts .small, .inv-acts a.small { margin: 0; }
.inv-acts a.btnlink { padding: 2px 8px; font-size: 12px; font-weight: 800; background: var(--hot); color: var(--ink); border: 2px solid var(--hot); box-shadow: 2px 2px 0 var(--paper); }
.inv-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inv-mini select, .inv-mini input { padding: 3px 6px; background: var(--ink); color: var(--paper); border: 2px solid var(--line); font: inherit; font-size: 12.5px; }
.fc-inv { margin: 4px 0 0; font-size: 12px; }
.linkish { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--hot); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
@media (max-width: 700px) {
	.invnow { margin-left: 0; width: 100%; }
	.inv-money { margin-left: 0; }
}

/* 1.8.0, the team: what a member may not use is not on the screen; the Team box, each one's corner. */
[data-nocap] { display: none !important; }
.whome { color: var(--mute); font-size: 12px; white-space: nowrap; }
.meask { border-color: var(--hot); }
.members { list-style: none; margin: 0 0 14px; padding: 0; }
.members .member { padding: 10px 0; border-bottom: 1px solid var(--line); }
.members .member.gone { opacity: .55; }
.members .mhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.members .muted { margin: 4px 0 6px; }
.members .sure { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.medit { margin-top: 10px; padding: 10px 12px; border: 2px solid var(--line); }
.perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; margin: 8px 0; grid-column: 1 / -1; }
.permarea { margin: 0; padding: 8px 10px; border: 1px solid var(--line); }
.permarea legend { color: var(--hot); font-weight: 800; font-size: 12.5px; padding: 0 4px; }
.perm { display: flex; gap: 6px; align-items: baseline; font-size: 13px; margin: 3px 0; cursor: pointer; }
.gate .fine { margin: -4px 0 10px; font-size: 11.5px; }
/* The AI's quick switch (1.10.2): the preset it is now, lit. */
.aiswitch { align-items: center; gap: 8px; flex-wrap: wrap; }
.aiswitch > b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.aiswitch [aria-pressed=true] { background: var(--hot); color: var(--ink); border-color: var(--hot); }

/* ------------------------------------------------------------ HQ's shell (1.12.0)
   The owner, 2026-10-17: "backend ux/ui sucks, it's messy, no idea where anything is". One top bar, a sidebar of views
   in the order of the sale (a tab bar and a More sheet on a phone), and one view on the screen at a time: its header (what
   it is, one line, its main action) and its boxes. Only HQ: a business's HQ (my.html) has no .hq-shell. */
body.hq-shell { padding: 0; }
body.hq-shell .top { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; gap: 10px; background: var(--ink);
	padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
body.hq-shell .top .mark { font-size: 26px; }
body.hq-shell .top .tag { flex: 0 0 auto; color: var(--hot); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.hqside-btn { flex: none; width: 36px; height: 34px; padding: 0; background: var(--ink); color: var(--paper); border: 2px solid var(--line); font-size: 17px; line-height: 1; }
.hqside-btn:hover { border-color: var(--paper); }
.hqfind { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.hqfind-btn { display: inline-flex; align-items: center; gap: 12px; width: min(100%, 420px); padding: 6px 10px; background: #151513; color: var(--mute);
	border: 2px solid var(--line); font-size: 13px; text-align: left; }
.hqfind-btn span { flex: 1; }
.hqfind-btn kbd { padding: 0 6px; border: 1px solid var(--line); font: inherit; font-size: 11px; color: var(--mute); }
.hqfind-btn:hover { border-color: var(--paper); color: var(--paper); }
body.hq-shell .herebox { margin-left: 0; flex: none; }
.hqacct { position: relative; flex: none; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 10px; background: var(--ink); color: var(--paper);
	border: 2px solid var(--paper); font-weight: 800; font-size: 13px; }
.acct-btn .whome { overflow: hidden; text-overflow: ellipsis; color: var(--paper); font-size: 13px; }
.acct-btn .whome:not([hidden]) + .acct-you { display: none; }
.acct-btn::after { content: "\25BE"; font-size: 11px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; display: grid; gap: 6px; min-width: 230px; padding: 10px;
	background: var(--ink); border: 3px solid var(--paper); box-shadow: 6px 6px 0 var(--hot); }
.acct-menu > a, .acct-menu > button { display: block; width: 100%; margin: 0; padding: 7px 10px; text-align: left; text-decoration: none; font-weight: 800; font-size: 13px;
	background: var(--ink); color: var(--paper); border: 2px solid var(--line); }
.acct-menu > a:hover, .acct-menu > button:hover { border-color: var(--paper); }
.acct-menu > .out { margin-left: 0; color: var(--bad); border-color: var(--line); }

.hqwrap { display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.hqmain { flex: 1; min-width: 0; padding: 0 max(20px, env(safe-area-inset-right)) 48px 24px; }
body.hq-shell .hqnav { position: sticky; top: 56px; z-index: 20; flex: 0 0 210px; flex-direction: column; gap: 1px; height: calc(100svh - 56px);
	margin: 0; padding: 14px 10px 28px max(10px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; border-bottom: 0;
	border-right: 2px solid var(--line); scrollbar-width: thin; }
body.hq-shell .hqnav[hidden] { display: none !important; }
body.hq-shell .hqnav a { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13.5px; line-height: 1.35; border: 2px solid transparent; }
body.hq-shell .hqnav a.on { background: var(--hot); color: var(--ink); border-color: var(--hot); }
body.hq-shell .hqnav a.on .navn { background: var(--ink); color: var(--hot); }
body.hq-shell .hqnav .navn { margin-left: auto; }
body.hq-shell .hqnav .navn + .navn { margin-left: 4px; }
.hqg { margin: 12px 0 2px; padding: 0 10px; color: var(--mute); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hq-folded .hqnav { display: none !important; }

/* One view at a time: its boxes in its own order, everything else out of sight. */
body.hq-shell #admin { display: flex; flex-direction: column; }
body.hq-shell #admin > [data-out] { display: none !important; }
body.hq-shell #admin > * { margin-top: 0; margin-bottom: 22px; }
body.hq-shell #admin > .vhead { order: 0; }
.vhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin: 20px 0 18px !important;
	padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.vhead h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; }
.vhead p { margin: 4px 0 0; }
.vh-btn { padding: 8px 14px; background: var(--hot); color: var(--ink); border: 2px solid var(--hot); font-weight: 800; box-shadow: 3px 3px 0 var(--paper); }
.vh-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--paper); }
body.hq-shell details.box > summary { cursor: pointer; font-size: 19px; font-weight: 800; }
body.hq-shell details.box[open] > summary { margin-bottom: 10px; }
body.hq-shell #admin .box { scroll-margin-top: 70px; }
[data-retired] { display: none !important; }
body.hq-shell .numbers, body.hq-shell #updated { display: none !important; }

/* The phone: a tab bar (Today, Inbox, Pipeline, Money, More), the sidebar as a More sheet. */
.hqtabs { display: none; }
@media (max-width: 760px) {
	body.hq-shell .top { gap: 8px; }
	body.hq-shell .top .tag { display: none; }
	.hqfind-btn { width: auto; padding: 6px 8px; }
	.hqfind-btn kbd, .hqfind-btn span { display: none; }
	.hqfind-btn::before { content: "Find"; font-weight: 800; color: var(--paper); }
	.hqfind { justify-content: flex-end; }
	.acct-btn { max-width: 120px; }
	body.hq-shell .herebox #here-word { display: none; }
	.hqmain { padding: 0 max(14px, env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
	body.hq-shell .hqnav { position: fixed; inset: 0 0 calc(62px + env(safe-area-inset-bottom)) 0; top: 0; z-index: 45; height: auto; width: 100%;
		padding: max(16px, env(safe-area-inset-top)) 18px 24px; background: var(--ink); border-right: 0; display: none !important; }
	body.hq-shell.hq-more .hqnav:not([hidden]) { display: grid !important; grid-template-columns: 1fr 1fr; align-content: start; gap: 2px 10px; overflow-y: auto; }
	body.hq-shell .hqnav a { padding: 9px 10px; font-size: 15px; border: 2px solid var(--line); }
	body.hq-shell .hqnav .hqg { grid-column: 1 / -1; margin: 10px 0 2px; padding: 0; }
	body.hq-folded .hqnav { display: none !important; }
	body.hq-folded.hq-more .hqnav:not([hidden]) { display: grid !important; }
	.hqtabs:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: flex; background: var(--ink); border-top: 2px solid var(--line);
		padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); }
	.hqtabs > a, .hqtabs > button { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 2px;
		background: none; border: 0; border-top: 3px solid transparent; color: var(--paper); text-decoration: none; font-size: 13px; }
	.hqtabs > a.on { border-top-color: var(--hot); color: var(--hot); }
	body.hq-more .hqtabs > #hq-more { border-top-color: var(--hot); color: var(--hot); }
	.hqtabs .navn { position: absolute; top: 6px; right: 12%; margin: 0; }
	.vhead h1 { font-size: 24px; }
	.vhead { margin-top: 14px !important; }
	body.focus .hqtabs, body.immersive .hqtabs { display: none !important; }
}
body.focus .hqnav, body.focus #vhead { display: none !important; }

/* A box for the few (DeepMax): folded to its title and first line until opened. */
body.hq-shell .box.folded > :not(h2):not(.fold-line) { display: none !important; }
.fold-btn { margin-left: 10px; vertical-align: middle; }
body.hq-shell.focus #admin > #talk-box { margin-top: 14px; }
/* Before the first view is drawn (signing in), no box shows: never a flash of all of HQ. */
body.hq-shell:not([data-view]) #admin > * { display: none !important; }

/* ------------------------------------------------------------ HQ's second pass (1.12.1)
   "+ New", one page per person, the pipeline by stage, projects, quotes, connections, every automation in one list,
   the long help folded behind "How this works". */
.hqnew { position: relative; flex: none; }
.new-btn { padding: 6px 12px; background: var(--hot); color: var(--ink); border: 2px solid var(--hot); font-weight: 800; font-size: 13px; white-space: nowrap; }
.new-btn:hover { border-color: var(--paper); }
.new-menu { right: auto; left: 0; min-width: 200px; }
.new-menu > button[data-nocap] { display: none; }
.pipe-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.pipe-tab { min-height: 36px; }
.pipe-tab[aria-selected=true] { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.pipe-tab.none { opacity: .55; }
.pipe-list, .proj-list, .q-list, .conn-list, .auto-list { list-style: none; margin: 0; padding: 0; }
.pipe-card, .proj-card, .q-card, .conn-row, .auto-row { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.pipe-card .pname, .proj-card .pname, .q-card .pname { font-size: 15px; }
.pipe-bits { margin: 4px 0 8px; overflow-wrap: anywhere; }
.proj-card.held { opacity: .7; }
.empty { padding: 14px 0; }
.conn-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; }
.conn-row > p { grid-column: 2 / 3; margin: 0; }
.conn-row > button { grid-row: 1 / span 2; grid-column: 3; }
.auto-row .switch { font-size: 15px; }
.auto-row > p { margin: 2px 0 0 28px; }
.auto-row:not(.on) .switch b { color: var(--mute); }
.auto-mail { margin-top: 16px; }
.recbox { border-color: var(--hot); }
.rec-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rec-name { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.rec-sub { margin: 6px 0 0; overflow-wrap: anywhere; }
.rec-move { margin: 8px 0 0; }
.rec-next { align-items: center; gap: 10px; margin: 14px 0 6px; }
.rec-next .dk { color: var(--mute); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rec-sec { margin-top: 22px; padding-top: 14px; border-top: 2px solid var(--line); }
.rec-sec > h3, .rec-h { margin: 0 0 10px; }
.rec-thread { gap: 8px; margin: 6px 0; }
.rec-log { margin: 6px 0 14px; padding: 10px 12px; border: 2px solid var(--line); max-height: 420px; overflow-y: auto; }
.rec-card .pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-card .pc-head h2 { margin: 0; font-size: 18px; }
details.howto { margin: -2px 0 12px; }
details.howto > summary { display: inline-block; cursor: pointer; color: var(--mute); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
details.howto > p { margin: 6px 0 0; }
@media (max-width: 760px) {
	.new-btn { padding: 6px 9px; font-size: 0; }
	.new-btn::before { content: "+"; font-size: 18px; line-height: 1; }
	.new-menu { position: fixed; left: 12px; right: 12px; top: calc(56px + env(safe-area-inset-top)); min-width: 0; }
	.new-menu > button { min-height: 44px; }
	body.hq-shell .top .mark { font-size: 22px; }
	.hqside-btn { display: none; }
	.acct-btn { max-width: 92px; }
	body.hq-shell .pipe-tab, body.hq-shell #admin button, body.hq-shell #admin .switch { min-height: 44px; }
	body.hq-shell #admin .switch { display: flex; align-items: center; }
	.conn-row { grid-template-columns: 1fr; }
	.conn-row > p, .conn-row > button { grid-column: 1; grid-row: auto; justify-self: start; }
	.rec-name { font-size: 21px; }
	.rec-next > * { flex: 1 1 100%; }
	body.hq-shell #admin table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 380px) {
	body.hq-shell .top { gap: 6px; padding-left: 10px; padding-right: 10px; }
	.acct-btn { max-width: 70px; }
	body.hq-shell .herebox { padding: 4px 6px; }
}
details.dossier-fold { margin: 12px 0; padding: 8px 10px; border: 2px dashed var(--line); }
details.dossier-fold > summary { cursor: pointer; font-weight: 800; overflow-wrap: anywhere; }
details.dossier-fold[open] > summary { margin-bottom: 8px; }
/* On a person's page, HQ's own card and client panel sit in its flow (not a dialog over HQ). */
#rec-body > #pcard { position: static; display: none; width: auto; max-width: none; max-height: none; height: auto; margin: 22px 0 0; padding: 14px 0 0;
	color: inherit; background: none; border: 0; border-top: 2px solid var(--line); box-shadow: none; overflow: visible; }
#rec-body > #pcard[open] { display: block; }
#rec-body > #pcard > * { padding-left: 0; padding-right: 0; }
#rec-body > #cl-detail { margin: 0 0 6px; }
.rec-client-h { margin-top: 22px; }

/* A business's HQ (my.y00r.com) on a phone: its section menu wraps (every section in sight, none off to the right). */
@media (max-width: 760px) {
	body:not(.hq-shell) .hqnav { flex-wrap: wrap; overflow-x: visible; gap: 4px 2px; }
	body:not(.hq-shell) .hqnav a { padding: 7px 9px; border-color: var(--line); }
}
/* 2.0: a person's own price, on their page */
.rec-special { margin: 10px 0 0; }
.rec-special summary { cursor: pointer; font-weight: 700; }
.rec-special form { gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; }
.rec-special input { width: 7em; }