/* viewerly.io. Sizes, colours and spacing follow docs/design/web/README.md; the palette itself
   lives in tokens.css, which this file assumes is loaded first. */

* { box-sizing: border-box }

html { background: var(--bg0) }

body {
  margin: 0;
  background: var(--bg0);
  color: var(--fg);
  font-family: var(--font-body);
  font: 15px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none }
a:hover { text-decoration: underline }

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.02em }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The page is 1280 wide with a 48 px gutter, narrowing to 16 px on a phone. */
.page { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px) }

/* MARK: nav */

.top {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.top .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 17px/1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--fg);
}
.top .brand:hover { text-decoration: none }
.top nav { display: flex; align-items: center; gap: 22px; margin-left: auto }
.top nav a { font-size: 14px; color: var(--fg2) }
.top nav a:hover { color: var(--fg); text-decoration: none }
.top nav a[aria-current] { color: var(--fg) }

/* The mark, drawn rather than loaded: four rows reading as the session list. */
.mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: var(--bg1);
  border: 1px solid var(--line);
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.mark .row { display: flex; align-items: center; gap: 2px }
.mark .row.child { padding-left: 4px }
.mark .dot { width: 3px; height: 3px; border-radius: 1px; flex: none }
.mark .bar { flex: 1; height: 3px; border-radius: 2px }
.mark .ink-acc { background: var(--acc) }
.mark .ink-90 { background: color-mix(in srgb, var(--fg) 90%, transparent) }
.mark .ink-50 { background: color-mix(in srgb, var(--fg) 50%, transparent) }
.mark .ink-30 { background: color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 2px }

/* MARK: buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: var(--acc-solid);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.button:hover { text-decoration: none; filter: brightness(1.08) }
.button .hint { font-weight: 500; opacity: .75 }
.button.big { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 8px }
.button.wide { width: 100%; height: 42px; font-size: 15px; border-radius: 8px }
.button.secondary { background: var(--btn); color: var(--fg) }
.button.danger { background: transparent; color: var(--s-err); border: 1px solid var(--line2) }
.button.small { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 6px }
.button[disabled] { opacity: .55; cursor: default }

.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--acc);
  cursor: pointer;
}
.link.danger { color: var(--s-err) }
.inline { display: inline }

/* MARK: shared bits */

.muted { color: var(--fg2) }
.meta { color: var(--fg3); font-size: 13px }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--acc);
  text-transform: uppercase;
}
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg3);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--btn);
  color: var(--fg2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip.accent { background: var(--acc-bg); color: var(--acc) }
.chip.done { background: color-mix(in srgb, var(--s-done) 18%, transparent); color: var(--s-done) }
.chip.err { background: color-mix(in srgb, var(--s-err) 18%, transparent); color: var(--s-err) }

.card {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600 }

.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid var(--line2);
}
.flash.error { background: color-mix(in srgb, var(--s-err) 14%, transparent); color: var(--fg) }
.flash.notice { background: var(--acc-bg); color: var(--fg) }

/* A framed slot where a screenshot will go. It says what it is rather than pretending. */
.shot {
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: var(--bg1);
  aspect-ratio: 1080 / 520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--fg3);
  font-size: 13px;
}
.shot.narrow { aspect-ratio: 560 / 320 }

/* MARK: forms */

label.field { display: block; margin-bottom: 14px }
label.field > span { display: block; font-size: 13px; color: var(--fg2); margin-bottom: 6px }
label.field .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }

input[type=email],
input[type=password],
input[type=text],
textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--line2);
  background: var(--field);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical }
input::placeholder { color: var(--fg3) }

.consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--fg2) }
.consent input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--acc-solid) }

/* MARK: hero and landing */

.hero { padding: 96px 0 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center }
.hero h1 {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  max-width: 820px;
  text-wrap: balance;
}
.hero .subhead { margin: 0; font-size: 19px; color: var(--fg2); max-width: 640px; text-wrap: pretty }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center }
.hero .fine { font-size: 13px; color: var(--fg3) }
.hero .shot { width: 100%; margin-top: 16px }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 80px 0 }
.features h3 { margin: 12px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.01em }
.features p { margin: 0; color: var(--fg2) }
.features .dot { width: 8px; height: 8px; border-radius: 50%; display: block }

.remote { display: grid; grid-template-columns: 1fr 560px; gap: 48px; align-items: center; padding: 0 0 80px }
.remote h2 { margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: -.025em }
.remote p { margin: 0 0 16px; font-size: 17px; color: var(--fg2) }

/* MARK: changelog */

.changelog { display: grid; grid-template-columns: 320px 1fr; gap: 48px; padding: 0 0 80px }
.changelog h2 { margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: -.025em }
.changelog .aside p { margin: 0 0 16px; color: var(--fg2); font-size: 15px }

.release { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line) }
.release:first-child { border-top: 0; padding-top: 0 }
.release .version { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.release .version .number { font: 600 16px var(--font-mono) }
.release .group + .group { margin-top: 16px }
.release .group ul { margin: 6px 0 0; padding-left: 18px; color: var(--fg2) }
.release .group li + li { margin-top: 4px }
.release .group .label.new { color: var(--s-done) }
.release .group .label.improved { color: var(--s-work) }
.release .group .label.fixed { color: var(--s-perm) }
.release .group .label.security { color: var(--s-err) }

/* MARK: pricing */

.pricing { padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center }
.pricing h1 { margin: 0; font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; letter-spacing: -.03em; text-wrap: balance }
.pricing .subhead { margin: 0; font-size: 17px; color: var(--fg2) }

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--btn);
  margin: 8px 0 16px;
}
.segmented button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.segmented button[aria-selected="true"] { background: var(--bg1); color: var(--fg); box-shadow: 0 1px 3px rgb(0 0 0 / .25) }
.segmented .save { color: var(--s-done); font-weight: 600 }

.plans { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; text-align: left }
.plan { position: relative; width: 380px; max-width: 100%; padding: 32px; border-radius: 12px; background: var(--bg1); border: 1px solid var(--line) }
.plan.premium { border-color: var(--acc) }
.plan .tab {
  position: absolute;
  top: -11px;
  left: 32px;
  height: 22px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--acc-solid);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
}
.plan h2 { margin: 0; font-size: 22px; font-weight: 600 }
.plan .for { margin: 4px 0 20px; color: var(--fg2); font-size: 14px }
.plan .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px }
.plan .price .amount { font: 700 36px var(--font-display); letter-spacing: -.03em }
.plan .price .per { color: var(--fg2); font-size: 15px }
.plan .alt { color: var(--fg3); font-size: 13px; min-height: 20px }
.plan ul { list-style: none; margin: 20px 0 24px; padding: 0 }
.plan li { display: flex; gap: 10px; padding: 7px 0; font-size: 15px; color: var(--fg2) }
.plan li .tick { color: var(--s-done); flex: none }
.plan li strong { color: var(--fg); font-weight: 600 }
.fineprint { max-width: 640px; color: var(--fg3); font-size: 13px; text-wrap: pretty }

/* MARK: auth */

.auth { display: flex; justify-content: center; padding: 64px 0 }
.auth .card { width: 400px; max-width: 100%; padding: 32px }
.auth h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -.02em }
.auth .lede { margin: 0 0 20px; color: var(--fg2); font-size: 14px }
.auth .after { margin: 16px 0 0; font-size: 13px; color: var(--fg2); text-align: center }
.auth .note { margin: 14px 0 0; font-size: 13px; color: var(--fg3) }
.auth .done { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: var(--acc-bg); font-size: 14px }

/* A password strength meter: three pixels of feedback, no scolding. */
.strength { height: 3px; border-radius: 2px; background: var(--btn); margin-top: 8px; overflow: hidden }
.strength i { display: block; height: 100%; width: 0; background: var(--s-err); transition: width .2s, background .2s }
.strength[data-level="2"] i { width: 50%; background: var(--s-input) }
.strength[data-level="3"] i { width: 100%; background: var(--s-done) }
.strength[data-level="1"] i { width: 25% }

/* MARK: account */

.account { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: 48px 0 }
.account .side { display: flex; flex-direction: column; gap: 2px; align-self: start }
.account .side a { padding: 7px 10px; border-radius: 7px; color: var(--fg2); font-size: 14px }
.account .side a:hover { background: var(--sel); color: var(--fg); text-decoration: none }
.account .side a[aria-current] { background: var(--sel); color: var(--fg) }
.account .side .danger { margin-top: 16px; color: var(--s-err) }
.account .content { max-width: 760px; display: flex; flex-direction: column; gap: 24px }

.identity { display: flex; align-items: center; gap: 16px }
.avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--acc-bg);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 22px var(--font-display);
}
.avatar.small { width: 32px; height: 32px; font-size: 14px }
.identity .who { display: flex; flex-direction: column; gap: 2px }
.identity .name { font: 600 24px var(--font-display); letter-spacing: -.02em }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 }
.stat { background: var(--bg2); border-radius: 8px; padding: 14px }
.stat .value { font: 600 24px var(--font-display); font-variant-numeric: tabular-nums }
.stat .value small { font-size: 15px; color: var(--fg3); font-weight: 500 }

.rows { display: flex; flex-direction: column }
.rows .row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line) }
.rows .row:first-child { border-top: 0 }
.rows .row .grow { flex: 1; min-width: 0 }
.rows .row .name { font-size: 15px }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fg3); flex: none }
.dot.on, .dot.done { background: var(--s-done) }
.dot.idle { background: var(--fg3) }
.dot.working { background: var(--s-work); animation: pulse 1.4s ease-in-out infinite }
.dot.waitingForPermission { background: var(--s-perm) }
.dot.waitingForInput { background: var(--s-input) }
.dot.error { background: var(--s-err) }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .dot.working { animation: none } }

/* MARK: footer */

footer.site {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--fg3);
}
footer.site .spacer { flex: 1 }
footer.site a { color: var(--fg3) }
footer.site a:hover { color: var(--fg2) }

/* MARK: the web dashboard and pairing, restyled onto the tokens */

.sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px }
.session { background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; padding: 16px }
.session h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600 }
.session .meta { color: var(--fg3); font-size: 12px }
.session.wide { grid-column: 1 / -1 }
.session pre {
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font: 12px/1.5 var(--font-mono);
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--fg2);
  margin: 10px 0;
}
.permission { border: 1px solid var(--s-perm); background: color-mix(in srgb, var(--s-perm) 12%, transparent); border-radius: 8px; padding: 12px; margin: 10px 0 }
.permission code { display: block; margin: 6px 0; font-family: var(--font-mono); font-size: 12px; word-break: break-all }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.prompt input { flex: 1 }
.status-line { color: var(--fg2); font-size: 13px; margin-bottom: 16px }
.group h2 { font-size: 16px; margin: 24px 0 10px; color: var(--fg2) }
.pairbox { font: 28px var(--font-mono); letter-spacing: .2em; background: var(--bg1); border: 1px solid var(--line); padding: 12px 16px; border-radius: 8px; display: inline-block }
.sas { font: 22px var(--font-mono); letter-spacing: .15em }
.term-wrap { margin: 10px 0 }
.term-bar { justify-content: space-between; margin-bottom: 6px }
.term-note { font-size: 12px; color: var(--fg3) }
.term-host { background: var(--bg0); border: 1px solid var(--line); border-radius: 8px; padding: 6px; overflow: auto }
.term-host .xterm { padding: 2px }
code.block { display: block; word-break: break-all; background: var(--bg0); border: 1px solid var(--line); padding: 10px; border-radius: 8px; font: 12px var(--font-mono) }
table { width: 100%; border-collapse: collapse }
td { padding: 10px 6px; border-top: 1px solid var(--line) }
.narrow { max-width: 440px; margin: 48px auto }
.tag { border: 1px solid var(--line2); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin-right: 8px }

/* MARK: narrow screens */

@media (max-width: 960px) {
  .features { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 }
  .remote, .changelog { grid-template-columns: 1fr; gap: 24px }
  .account { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 }
  .account .side { flex-direction: row; flex-wrap: wrap }
  .hero { padding-top: 56px }
  .release { grid-template-columns: 1fr; gap: 8px }
  .release .version { flex-direction: row; align-items: center; gap: 10px }
}

@media (max-width: 620px) {
  .top { gap: 12px }
  .top nav { gap: 14px }
  .top nav .hide-small { display: none }
  .stats { grid-template-columns: 1fr }
}

/* MARK: feedback board */

.board { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding: 48px 0 }
.board-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.board-head h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -.03em }

.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto }
.pills a {
  height: 28px;
  padding: 0 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--fg2);
  background: var(--btn);
}
.pills a:hover { color: var(--fg); text-decoration: none }
.pills a[aria-current] { background: var(--acc-bg); color: var(--acc) }

.board-list { border: 1px solid var(--line); border-radius: 12px; background: var(--bg1); overflow: hidden }
.idea-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line) }
.idea-row:first-child { border-top: 0 }
.idea-row .grow { min-width: 0 }
.idea-row .title { display: block; font-size: 16px; font-weight: 600; color: var(--fg) }
.idea-row .one-line {
  margin: 4px 0 0;
  color: var(--fg2);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idea-row .meta { margin: 6px 0 0 }
.idea-row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right }

.vote {
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: transparent;
  color: var(--fg2);
  font: inherit;
  cursor: pointer;
}
.vote:hover { border-color: var(--acc) }
.vote.voted { background: var(--acc-bg); border-color: transparent; color: var(--acc) }
.vote .caret { font-size: 10px; line-height: 1 }
.vote .count { font: 600 15px var(--font-display); font-variant-numeric: tabular-nums }
.vote.big { width: 64px; height: 64px }

.board-side { display: flex; flex-direction: column; gap: 16px; align-self: start }
.board-side .similar { margin: -6px 0 14px; font-size: 13px; color: var(--fg2) }
ul.plain { list-style: none; margin: 8px 0 0; padding: 0; color: var(--fg2); font-size: 14px }
ul.plain li { padding: 4px 0 }

.idea-page { max-width: 760px; padding: 48px 0; display: flex; flex-direction: column; gap: 20px }
.idea-head { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start }
.idea-head h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.025em; text-wrap: balance }
.idea-body { margin: 0 0 0 84px; color: var(--fg2); white-space: pre-wrap }
.status-form { display: flex; flex-direction: column; gap: 8px }
.comments-head { margin: 8px 0 0; font-size: 20px; font-weight: 600 }
.comments { display: flex; flex-direction: column; gap: 16px }
.comment { display: flex; gap: 12px }
.comment.reply { margin-left: 40px }
.comment p { margin: 2px 0 0; color: var(--fg2); white-space: pre-wrap }
.comment-form { display: flex; gap: 12px; align-items: flex-start }
.comment-form .grow { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start }

@media (max-width: 960px) {
  .board { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 }
  .idea-row { grid-template-columns: 56px 1fr; }
  .idea-row .right { grid-column: 2; flex-direction: row; align-items: center; gap: 12px }
  .idea-body { margin-left: 0 }
}

/* MARK: staff pages */

.admin { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 48px 0 }
.admin-side { display: flex; flex-direction: column; gap: 2px; align-self: start }
.admin-side a { padding: 7px 10px; border-radius: 7px; color: var(--fg2); font-size: 14px }
.admin-side a:hover { background: var(--sel); color: var(--fg); text-decoration: none }
.admin-side a[aria-current] { background: var(--sel); color: var(--fg) }
.admin-body { display: flex; flex-direction: column; gap: 20px; min-width: 0 }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.kpi .value { font: 600 28px var(--font-display); font-variant-numeric: tabular-nums; margin: 6px 0 2px }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }

.user-row { display: grid; grid-template-columns: 1fr 92px 70px 100px; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line) }
.user-row:first-child { border-top: 0 }
.user-row.head { background: var(--bg2) }
.user-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

@media (max-width: 960px) {
  .admin { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 }
  .admin-side { flex-direction: row; flex-wrap: wrap }
  .kpis, .admin-cols { grid-template-columns: 1fr 1fr }
  .user-row { grid-template-columns: 1fr auto; row-gap: 4px }
}
@media (max-width: 620px) {
  .kpis, .admin-cols { grid-template-columns: 1fr }
}

/* MARK: blog */

.blog-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 64px 0 24px }
.blog-head h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.03em }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 80px }
.post-card { display: flex; flex-direction: column; gap: 8px; color: var(--fg) }
.post-card:hover { text-decoration: none }
.post-card:hover .post-title { color: var(--acc) }
.post-image {
  display: block;
  height: 160px;
  border-radius: 10px;
  border: 1px solid var(--line);
  /* A quiet placeholder until posts carry their own art. */
  background: linear-gradient(140deg, var(--bg2), var(--bg1));
}
.post-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance }
.post-excerpt { color: var(--fg2); font-size: 14px }

.post { max-width: 680px; margin: 0 auto; padding: 48px 0 80px; display: flex; flex-direction: column; gap: 16px }
.post h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -.03em; text-wrap: balance }
.post .deck { margin: 0; font-size: 19px; color: var(--fg2); text-wrap: pretty }
.post .byline { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }

.prose { font-size: 17px; line-height: 1.65 }
.prose h2 { margin: 32px 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.02em }
.prose h3 { margin: 24px 0 8px; font-size: 20px; font-weight: 600 }
.prose p { margin: 0 0 16px; color: var(--fg2); text-wrap: pretty }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--fg2) }
.prose li + li { margin-top: 6px }
.prose a { text-decoration: underline }
.prose code { font: 15px var(--font-mono); background: var(--btn); padding: 1px 5px; border-radius: 4px }
.prose pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg1);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; font-size: 14px; line-height: 1.5 }
.prose blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--line2); color: var(--fg2) }
.prose img { max-width: 100%; border-radius: 10px }

.next-post { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; color: var(--fg) }
.next-post:hover { text-decoration: none }

@media (max-width: 960px) {
  .post-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr }
}

/* MARK: web dashboard */

.console {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  height: calc(100vh - 160px);
  min-height: 520px;
  margin: 24px 0 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg1);
  overflow: hidden;
}
.console-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 8px }
.console-detail { display: flex; flex-direction: column; min-width: 0; overflow: hidden }

.mac-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; color: var(--fg2) }
.mac-line .grow { flex: 1; min-width: 0 }

.session-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.session-row:hover { background: var(--sel) }
.session-row.selected { background: var(--sel) }
.session-row .dot { margin-top: 5px }
.session-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column }
.session-row .name,
.console-head .name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.session-row .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.console-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  flex: none;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.console-head .name { font-size: 16px; font-weight: 600 }
.console-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* The permission bar sits under the header, never inside the terminal. */
.permission-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--s-perm) 12%, transparent);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.permission-bar code {
  font: 13px var(--font-mono);
  color: var(--fg2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.permission-bar .grow { flex: 1; min-width: 0 }

.console-detail .transcript {
  flex: 1;
  margin: 0;
  padding: 12px 16px;
  overflow: auto;
  font: 13px/20px var(--font-mono);
  color: var(--fg2);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg0);
}
.transcript-note { flex: none; padding: 8px 16px; border-top: 1px solid var(--line) }
.console-detail .term-wrap { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; background: var(--bg0) }
.console-prompt { flex: none; padding: 12px 16px; border-top: 1px solid var(--line) }
.console-prompt input { flex: 1 }
.console-detail .status-line { flex: none; padding: 0 16px 12px; margin: 0 }

.pairing-panel { max-width: 560px; margin: 48px auto; display: flex; flex-direction: column; gap: 12px }

@media (max-width: 820px) {
  .console { grid-template-columns: 1fr; height: auto }
  .console-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px }
  .console-detail .transcript { max-height: 50vh }
}