@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #000000;
  --dim: #9a9a9a;
  --wash: #f0f0f0;
  --tile: #000000;
  --tile-ink: #ffffff;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: 14px;
  --gap: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #000; --ink: #fff; --dim: #777; --wash: #161616; --tile: #fff; --tile-ink: #000; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #000; --ink: #fff; --dim: #777; --wash: #161616; --tile: #fff; --tile-ink: #000; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }

.mono { font: 400 13px/1.08 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dim { color: var(--dim); }
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.dot::before { content: "●"; margin-right: .8em; font-size: 12px; }
a.dot:hover, button.dot:hover, .nav button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Header */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 14px var(--pad) 12px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--paper);
}
.brand { white-space: nowrap; }
.settings-btn { white-space: nowrap; }
.settings-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.right { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.nav { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.nav button { white-space: nowrap; }
.nav button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 2px; }

/* Subscriptions */
.subs { padding: 0 var(--pad) 80px; max-width: 1100px; }
.subs[hidden], .board[hidden], .addbar[hidden] { display: none; }
.subsum { margin: 10px 0 34px; }
.subsum .big { font: 400 clamp(48px, 9vw, 120px)/.9 var(--sans); letter-spacing: -.035em; }
.subsum .big small { font-size: 13px; letter-spacing: .08em; }
.subsum .mono { margin-top: 12px; }
.subsum button.u { color: inherit; }
.subform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px; margin-bottom: 44px; }
.subform label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.subform label > span { color: var(--dim); }
.subform .wide { grid-column: span 2; }
.subform input, .subform select {
  width: 100%; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 7px 0; outline: none; font: 400 16px/1.2 var(--sans); letter-spacing: 0; text-transform: none; min-height: 34px;
}
.subform select option { color: #000; }
.subform input::placeholder { color: var(--dim); }
.subacts { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; grid-column: 1 / -1; padding-top: 6px; }
.sublist { border-top: 1px solid var(--ink); }
.subrow {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 6px 18px; align-items: baseline; width: 100%;
  text-align: left; padding: 14px 0; border-bottom: 1px solid var(--ink); text-transform: none; letter-spacing: 0;
}
.subrow .n { font: 400 22px/1.1 var(--sans); letter-spacing: -.01em; }
.subrow:hover .n, .subrow.on .n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.subrow.off { color: var(--dim); }
@media (max-width: 760px) {
  .subform { grid-template-columns: 1fr 1fr; }
  .subform .wide { grid-column: 1 / -1; }
  .subrow { grid-template-columns: 1fr auto; }
  .subrow .n { grid-column: 1 / -1; }
}

/* Search */
.search { padding: 24px var(--pad) 28px; display: flex; flex-direction: column; gap: 14px; }
.search[hidden], .inv[hidden] { display: none; }
.invsearch input {
  width: min(720px, 100%); background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 8px 0; outline: none; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.invsearch.big input { font: 400 clamp(32px, 6vw, 72px)/1 var(--sans); letter-spacing: -.03em; text-transform: none; padding: 4px 0 10px; }
.invsearch input::placeholder { color: var(--dim); opacity: 1; }
.invsearch input::-webkit-search-cancel-button { filter: grayscale(1); }
.sechead { padding: 18px 0 10px; }
.board .sechead { padding: 0 0 18px; }

/* Inventory */
.inv { padding: 0 var(--pad) 80px; max-width: 1100px; display: flex; flex-direction: column; gap: 22px; }
.invhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px; padding-top: 10px; }
.invhead .catname { margin: 0; font: 400 clamp(40px, 7vw, 96px)/.9 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }
.acts.row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.acts button:disabled { opacity: .4; cursor: default; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.chips button[aria-pressed="true"], .chips button:hover { text-decoration: underline; text-underline-offset: 2px; }
.chips sup { font-size: 9px; margin-left: 3px; color: var(--dim); }
.invlist { border-top: 1px solid var(--ink); }
.invlist:empty { border: 0; }
.invlist > p { padding: 16px 0; margin: 0; }
.invrow {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%;
  text-align: left; padding: 10px 0; border-bottom: 1px solid var(--ink); text-transform: none; letter-spacing: 0;
}
.invrow img, .invrow .ph { width: 56px; height: 56px; object-fit: cover; background: var(--wash); }
.invrow .n { font: 400 20px/1.1 var(--sans); letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.invrow .n small { display: block; margin-top: 6px; font-size: 11px; }
.invrow .q { text-align: right; white-space: nowrap; }
.invrow .q small { display: block; margin-top: 6px; font-size: 11px; white-space: normal; max-width: 22ch; margin-left: auto; }
.invrow:hover .n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.more { padding: 14px 0; }
.invdetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gallery img, .gallery .ph { width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; background: var(--wash); }
.invdetail.nophoto { grid-template-columns: minmax(0, 640px); }
.gallery .small { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gallery .small img { width: 64px; height: 64px; object-fit: cover; cursor: pointer; }
.counter { display: flex; align-items: center; gap: 18px; margin: 18px 0; }
.counter button { width: 44px; height: 44px; border: 1px solid var(--ink); font: 400 22px/1 var(--sans); letter-spacing: 0; }
.counter button:hover { background: var(--ink); color: var(--paper); }
.counter output { font: 400 44px/1 var(--sans); letter-spacing: -.02em; }
.facts { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 8px 14px; margin: 0 0 18px; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.tags button { color: var(--dim); }
.tags button:hover { color: var(--ink); text-decoration: underline; }
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.strip figure { position: relative; margin: 0; }
.strip img { width: 96px; height: 96px; object-fit: cover; }
.strip figure button { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; background: var(--paper); color: var(--ink); }
.invcard { border: 1px solid var(--ink); padding: 14px; margin: 18px 0; }
.invcard .head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.invcard.saved { border-color: var(--dim); }
.invcard.saved .head span:first-child::before { content: "● "; }
.subform .full { grid-column: 1 / -1; }
.subform textarea {
  width: 100%; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 7px 0; outline: none; font: 400 16px/1.35 var(--sans); letter-spacing: 0; text-transform: none; resize: vertical; field-sizing: content; min-height: 34px;
}
.specbox { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.specs { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.spec { display: grid; grid-template-columns: 1fr 1.4fr 24px; gap: 12px; align-items: end; }
.spec input {
  background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--dim); border-radius: 0; padding: 5px 0; outline: none;
  font: 400 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; min-width: 0;
}
.setup-text .subform { margin: 18px 0; }
.remark { border-left: 1px solid var(--ink); padding-left: 12px; }
.summary { font: 400 20px/1.25 var(--sans); }
.checklist { border-top: 1px solid var(--ink); }
.checkline { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
.checkline p { margin: 4px 0 0; font-size: 14px; }
.checkline .links { display: flex; gap: 12px; margin-top: 6px; }
.checkline.st-fehlt .st { color: #d00; }
.checkline.st-teilweise .st, .checkline.st-alternative .st { color: var(--dim); }
.blink { animation: blink 1.2s steps(2, start) infinite; }
.catedit { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.catrow { display: grid; grid-template-columns: 1fr 36px 24px; gap: 12px; align-items: end; }
.catrow input {
  background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 6px 0; outline: none;
  font: 400 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; min-width: 0;
}
.setup-text input:not([type]), .setup-text input[type="password"] { min-width: 0; }
@media (max-width: 760px) {
  .invdetail { grid-template-columns: 1fr; }
  .gallery img { max-height: 60dvh; }
  .invrow { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .invrow img, .invrow .ph { width: 44px; height: 44px; }
  .invrow .n { font-size: 17px; }
  .invrow .q small { max-width: 14ch; }
  .checkline { grid-template-columns: 1fr; gap: 4px; }
}

/* Categories */
.nav .sep { padding: 0 2px; }
.nav button.dim:hover { color: var(--ink); }
body.dragging-card .nav .cat { outline: 1px dashed var(--dim); outline-offset: 3px; }
.nav .cat.drop-on { background: var(--ink); color: var(--paper); outline-color: var(--ink); }
.catbar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px; padding: 0 var(--pad) 34px; }
.catbar[hidden] { display: none; }
.catbar .catname { margin: 0 12px 0 0; font: 400 clamp(40px, 7vw, 96px)/.9 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }
.catbar .hint { flex-basis: 100%; }
.catpick { display: flex; align-items: center; gap: 12px; }
.catpick select {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none;
  background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 6px 18px 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: right 6px center, right 1px center; background-size: 5px 5px; background-repeat: no-repeat;
}
.catpick select option { color: #000; }

.lead { display: grid; grid-template-columns: 1fr 1fr; padding: 72px var(--pad) 28px; }
.lead p { grid-column: 2; margin: 0; max-width: 46ch; }

/* Board */
.board { display: grid; gap: 0 var(--gap); padding: 0 var(--pad) 80px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
/* Add bar: one plain field for links */
.addbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding: 48px var(--pad) 48px; }
.addbar input {
  flex: 0 1 520px; min-width: 0;
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 8px 0; outline: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.addbar input::placeholder { color: var(--dim); opacity: 1; }
.addbar button[type="submit"]:hover { text-decoration: underline; text-underline-offset: 2px; }
.addbar .count { margin-left: auto; }

.cap { margin-top: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sub { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }

/* Cards */
.card { cursor: zoom-in; }
.media { position: relative; background: var(--wash); overflow: hidden; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media .kind {
  position: absolute; right: 8px; top: 8px;
  background: var(--paper); color: var(--ink); padding: 3px 5px; font-size: 10px;
}
.media button.kind { cursor: pointer; padding: 5px 7px; }
.media button.kind:hover { background: var(--ink); color: var(--paper); }
.media.playing > .kind, .media.playing > .hover-player { display: none; }
/* The platform's player, right on the tile */
.inline-player { position: absolute; inset: 0; overflow: hidden; background: #000; cursor: auto; }
.inline-player iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; }
.inline-player .stop { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--paper); color: var(--ink); font-size: 14px; letter-spacing: 0; }
.hover-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.textcard {
  background: var(--tile); color: var(--tile-ink);
  padding: 12px 12px 16px;
  min-height: 160px;
  display: flex; flex-direction: column; gap: 22px;
}
.textcard .mono { font-size: 10px; }
.textcard p {
  margin: 0; font: 400 19px/1.18 var(--sans); letter-spacing: -.01em;
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden;
}
.textcard p.big { font-size: 28px; line-height: .95; text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: break-word; word-break: normal; }
/* Notes and to-dos: an outlined sheet, so they read apart from saved posts */
.notecard {
  border: 1px solid var(--ink); padding: 12px 12px 18px; min-height: 120px;
  display: flex; flex-direction: column; gap: 18px;
}
.notecard .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; }
.notecard p { margin: 0; font: 400 19px/1.18 var(--sans); letter-spacing: -.01em; white-space: pre-line; overflow-wrap: anywhere; }
.notecard.overdue .head span { color: #d00; }
.notecard.done { border-color: var(--dim); }
.notecard.done p { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.tick { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; flex: none; }
.tick:hover { background: color-mix(in srgb, currentColor 25%, transparent); }
.tick[aria-pressed="true"] { background: currentColor; }
.stage .notecard { width: min(560px, 100%); min-height: 240px; }
.stage .notecard p { font-size: 26px; }
.panel textarea.notetext, .setup-text textarea.notetext {
  width: 100%; min-height: 140px; resize: vertical; field-sizing: content;
  background: transparent; color: inherit; border: 1px solid var(--ink); border-radius: 0; padding: 10px; outline: none;
  font: 400 16px/1.4 var(--sans);
}
.panel .due { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel .due input {
  background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 6px 0; font: inherit; letter-spacing: inherit; min-height: 30px;
}
.panel .due button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* iPhone setup page */
.detail-body.setup { display: block; overflow-y: auto; }
.setup-text { max-width: 640px; padding-bottom: 60px; }
.setup-text h2 { font: 400 26px/1.05 var(--sans); letter-spacing: -.015em; margin: 34px 0 12px; }
.setup-text h2:first-child { margin-top: 10px; }
.setup-text p, .setup-text li { font-size: 15px; line-height: 1.45; }
.setup-text ol { padding-left: 1.3em; display: grid; gap: 10px; }
.setup-text .val { font: 400 12px/1.4 var(--mono); background: var(--wash); padding: 2px 5px; overflow-wrap: anywhere; }
.setup-text li .dot { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-left: 4px; }
.setup-text .acts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 22px; margin: 14px 0; }

.card:hover .media img, .card:hover .media video { opacity: .92; }

.pending .media { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.pending .media span { animation: blink 1.2s steps(2, start) infinite; }
.pending .bar-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ink); transition: width .2s; }
@keyframes blink { to { visibility: hidden; } }

.empty { grid-column: 1 / -1; padding: 40px 0; }

/* Drop overlay */
.drop {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: grid; place-items: center;
  background: var(--paper); opacity: 0; transition: opacity .12s;
}
.drop.on { opacity: .94; }
.drop div { font: 400 clamp(48px, 12vw, 180px)/.85 var(--sans); letter-spacing: -.03em; text-transform: uppercase; text-align: center; }
.drop small { display: block; margin-top: 24px; }

/* Toast */
.toast {
  position: fixed; left: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--ink); color: var(--paper); padding: 10px 12px; max-width: calc(100vw - 28px);
  transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .2s, visibility .2s;
}
.toast.on { transform: none; visibility: visible; }

/* Detail */
.detail {
  position: fixed; inset: 0; z-index: 40;
  background: var(--paper);
  display: grid; grid-template-rows: auto 1fr;
  overscroll-behavior: contain;
}
.detail[hidden] { display: none; }
.detail .bar { position: static; }
.detail .bar .right { justify-content: flex-end; gap: 22px; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); padding: 10px var(--pad) var(--pad); min-height: 0; }
.stage { min-height: 0; display: grid; place-items: center; overflow: hidden; }
.stage img, .stage video { max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); width: auto; height: auto; object-fit: contain; }
.stage iframe { border: 0; background: var(--wash); max-width: 100%; max-height: calc(100dvh - 90px); }
.stage .textcard { width: min(560px, 100%); min-height: 0; }
.stage .textcard p { -webkit-line-clamp: unset; font-size: 26px; }
.panel { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; }
.panel dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; margin: 0; }
.panel dt { color: var(--dim); }
.panel dd { margin: 0; overflow-wrap: anywhere; }
.panel .title {
  font: 400 26px/1.05 var(--sans); letter-spacing: -.015em;
  border: 0; padding: 0; background: none; color: inherit; width: 100%; resize: none; outline: none;
  field-sizing: content;
}
.panel .text { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.panel textarea.note {
  width: 100%; min-height: 90px; resize: vertical;
  background: transparent; color: inherit;
  border: 1px solid var(--ink); border-radius: 0; padding: 10px; outline: none;
  font: 400 14px/1.4 var(--sans);
}
.panel .acts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Login: the name runs across the whole screen like a news ticker, the sign-in sits on top. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.login { overflow: hidden; }
.ticker { --rows: 6; position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; user-select: none; pointer-events: none; }
.ticker-row { flex: none; height: calc(100dvh / var(--rows)); font: 400 calc(100dvh / var(--rows) / .78)/.78 var(--sans); letter-spacing: -.035em; text-transform: uppercase; }
.ticker-track { display: inline-flex; white-space: pre; will-change: transform; animation: ticker 150s linear infinite; }
.ticker-row:nth-child(3n+2) .ticker-track { animation-duration: 190s; animation-delay: -61s; }
.ticker-row:nth-child(3n) .ticker-track { animation-duration: 120s; animation-delay: -23s; }
.ticker-row:nth-child(n+7) { content-visibility: auto; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-aspect-ratio: 4/5) { .ticker { --rows: 9; } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.login-main { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: var(--pad); }
.login-card { width: min(400px, 100%); background: var(--paper); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.login-card p { margin: 0; line-height: 1.3; }
.gbtn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px 0 7px; background: var(--ink); color: var(--paper); cursor: pointer; }
.gbtn-logo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; }
.gbtn-label { flex: 1; }
.gbtn-arrow { font-size: 18px; letter-spacing: 0; transition: transform .2s; }
.gbtn:hover .gbtn-arrow, .gbtn:focus-within .gbtn-arrow { transform: translateX(5px); }
.gbtn:focus-within { outline: 1px solid var(--ink); outline-offset: 3px; }
/* Google's 40px icon button, stretched over the whole button and made invisible. */
.gbtn-real { position: absolute; inset: 0; opacity: .001; }
.gbtn-real > * { transform-origin: 0 0; transform: scale(11, 1.5); }
.err { color: #d00; }

@media (max-width: 760px) {
  :root { --pad: 12px; --gap: 10px; }
  .bar { grid-template-columns: 1fr auto; row-gap: 12px; }
  .right { display: contents; }
  .settings-btn { grid-column: 2; grid-row: 1; }
  .nav { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .nav::-webkit-scrollbar { display: none; }
  .lead { grid-template-columns: 1fr; padding: 28px var(--pad) 28px; }
  .lead p { grid-column: 1; }
  .col { gap: 24px; }
  .addbar { padding-top: 24px; padding-bottom: 28px; gap: 16px 18px; }
  .addbar input { flex: 1 1 auto; width: calc(100% - 70px); font-size: 16px; }
  .cap { font-size: 11px; margin-top: 8px; }
  .sub { margin-top: 8px; }
  .sub .mono, .sub.mono { font-size: 11px; }
  .textcard p { font-size: 15px; }
  .textcard p.big { font-size: 24px; }
  .detail .bar { grid-template-columns: auto 1fr; }
  .detail .bar .right { display: flex; grid-column: 2; }
  .detail-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .stage img, .stage video { max-height: 70dvh; }
  .panel { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .pending .media span { animation: none; }
  .toast, .drop { transition: none; }
}