:root {
  --paper: #f3eadc;
  --paper-2: #e8dcc8;
  --ink: #241c14;
  --muted: #6e6256;
  --sage: #3d6a4f;
  --sage-2: #2c513c;
  --clay: #c45c26;
  --line: #d7cbb6;
  --bought: #8a8076;
  --white: #fffaf3;
  --shadow: 0 10px 30px rgba(36, 28, 20, 0.08);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --tap: 52px;
  --radius: 16px;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: local("Fraunces"), local("Georgia");
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
html { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 10% -10%, #f7f1e6 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(36,28,20,0.015) 3px),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.35;
}
body.hide-cursor, body.hide-cursor * { cursor: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 22px calc(118px + env(safe-area-inset-bottom));
  max-width: 1400px;
  margin: 0 auto;
}

.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 4px 10px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 650;
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.count-pill {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15px;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 18px;
  flex-wrap: wrap;
}
.tab {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  color: var(--muted);
}
.tab.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
body.on-phone .tab-wall { display: none; }
body.on-wall .tab-phone { display: none; }
body.on-wall .tab {
  background: #f7f1e4;
  color: var(--ink);
  border: 1px solid #2a2118;
  font-weight: 650;
  box-shadow: 0 2px 5px rgba(40, 24, 10, 0.28);
}
body.on-wall .tab.on {
  background: var(--ink);
  color: #f7f1e4;
  border-color: var(--ink);
}
body.on-wall .sub { color: #2a2118; }

.kitchen-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 960px) {
  body.mode-kitchen .kitchen-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  }
}
.board-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 8px;
}
.board-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  margin: 0 0 4px;
  letter-spacing: -0.03em;
}
.board-notes { display: grid; gap: 10px; margin: 12px 0 14px; }
.note-card {
  background: var(--paper);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
}
.note-body {
  margin: 0;
  font-size: 18px;
  font-weight: 550;
  white-space: pre-wrap;
  word-break: break-word;
}
body.mode-kitchen .note-body { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; }
.note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.note-del {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #c62828;
  font-size: 36px;
  line-height: 1;
  font-weight: 650;
}
.note-del:active { background: rgba(198, 40, 40, 0.12); }
.board-form {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
}
.board-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  min-height: 44px;
  padding: 0 8px;
}

.view { flex: 1; }

.groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
  align-items: start;
}
@media (min-width: 960px) {
  body.mode-kitchen .groups { grid-template-columns: 1fr 1fr; }
}
.group { margin-bottom: 14px; }
.group-title {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 650;
  margin: 0 0 8px 8px;
}

.row {
  display: grid;
  grid-template-columns: var(--tap) 1fr auto auto;
  align-items: center;
  gap: 8px 10px;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 10px 10px 6px;
  margin-bottom: 8px;
  min-height: 64px;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}
.row.pulse { animation: pulse 0.7s ease; }
@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 4px rgba(61,106,79,0.35); }
}
.check {
  width: 34px;
  height: 34px;
  margin: 8px;
  border-radius: 50%;
  border: 2px solid var(--sage);
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.check svg { display: none; }
.row.buying .check {
  background: var(--sage);
  border-color: var(--sage);
}
.row.buying .check svg { display: block; }
.row.buying .name { color: var(--bought); text-decoration: line-through; }

.name-block { min-width: 0; }
.name {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-note { display: none; }
body.mode-shop .kitchen-note { display: none; }
body.mode-shop .shop-note { display: block; }
.qty {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  padding-right: 4px;
  min-width: 4.8em;
  text-align: right;
  white-space: nowrap;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
}
.icon-btn:hover { background: var(--paper-2); }

body.mode-kitchen .name { font-size: 22px; }
body.mode-kitchen .row { min-height: 64px; padding: 10px; }
body.mode-kitchen .check { width: 40px; height: 40px; }

body.mode-shop .row {
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  min-height: 58px;
  margin-bottom: 6px;
  box-shadow: none;
  border-color: var(--line);
}
body.mode-shop .check { width: 42px; height: 42px; margin: 4px; }
body.mode-shop .name { font-size: 18px; }
body.mode-shop .qty { display: none; }
body.mode-shop #app { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }

.empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}
.empty strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 28px; margin-bottom: 8px; }

.add-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: auto;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 70%, transparent);
  box-sizing: border-box;
}
#add-form, .ask-form {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow);
}
#add-input, #ask-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  min-height: 48px;
  padding: 0 8px;
  font-size: 18px;
}
.btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  min-height: 48px;
}
.btn.solid {
  background: var(--clay);
  color: #fff8f3;
  font-weight: 650;
}
.chip-toggle {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 0;
  border-radius: 14px;
  background: var(--paper-2);
  font-size: 26px;
  line-height: 1;
}
.add-btn { flex: 0 0 auto; }
.staples {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 4px 0;
}
.staples button, .ask-chips button {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
}

.ask-form { margin-bottom: 12px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ask-result {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  min-height: 120px;
}
.ask-result h3 { font-family: var(--serif); font-size: 28px; margin: 0 0 8px; }
.ask-result p { margin: 0 0 12px; font-size: 18px; }
.month-bars { display: grid; gap: 6px; margin-top: 16px; }
.month-row { display: grid; grid-template-columns: 72px 1fr 28px; gap: 8px; align-items: center; font-size: 14px; }
.bar { height: 10px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--sage); }

.pair-card {
  background: var(--white);
  border-radius: 20px;
  padding: 24px;
  max-width: 560px;
  box-shadow: var(--shadow);
}
.pair-card h2 { font-family: var(--serif); margin: 0 0 8px; }
.pair-card img { display: block; margin: 16px auto; background: white; border-radius: 12px; }
.pair-url { word-break: break-all; font-size: 15px; }
.hint { color: var(--muted); font-size: 14px; }

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(36, 28, 20, 0.35);
  display: grid;
  place-items: end center;
  z-index: 20;
}
.sheet-card {
  background: var(--paper);
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}
.sheet-card h2 { font-family: var(--serif); margin: 0 0 12px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 12px;
  padding: 12px;
  min-height: 48px;
}
.sheet-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn.ghost { background: var(--paper-2); }
.btn.danger { background: #8a3b2a; color: white; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  border-radius: 12px;
  z-index: 50;
  max-width: min(520px, 92vw);
}
body.osk-open .toast { bottom: calc(270px + env(safe-area-inset-bottom)); }
#key-gate { margin: 8px 0 18px; }
#key-form { display: flex; gap: 8px; margin-top: 12px; }
#key-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--white); }

.osk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #2a241c;
  color: #f3eadc;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
  user-select: none;
}
body.osk-open .add-bar { bottom: 248px; }
.osk-row { display: flex; justify-content: center; gap: 5px; margin: 4px 0; }
.osk-key {
  flex: 1 1 0;
  max-width: 84px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #3d352b;
  color: inherit;
  font-size: 18px;
  font-weight: 550;
}
.osk-key.wide { max-width: none; flex: 4; }
.osk-key.mod { background: #51483c; max-width: 72px; }
.osk-key.enter { background: var(--clay); max-width: 110px; }

@media (max-width: 700px) {
  #app { padding: 10px 10px calc(118px + env(safe-area-inset-bottom)); }
  .wordmark { font-size: 34px; }
  .name { font-size: 18px; }
  .add-bar { padding-left: 8px; padding-right: 8px; }
  .add-btn { padding-left: 12px; padding-right: 12px; }
}

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--sage);
  border-radius: 50%;
  margin-right: 6px;
}
.err { color: #8a3b2a; }

.who-btn {
  border: 0;
  background: transparent;
  color: var(--clay);
  font: inherit;
  font-weight: 650;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hist-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.hist-head h2 { font-family: var(--serif); margin: 0 0 6px; font-size: 28px; }
.hist-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 650;
  margin: 18px 0 8px;
}
.hist-list { display: grid; gap: 8px; }
.hist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
}
.hist-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hist-row .name { font-size: 20px; font-weight: 650; }
.empty-hist { color: var(--muted); padding: 8px 2px 16px; }

ul.hist { list-style: none; padding: 0; margin: 8px 0 0; }
ul.hist li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

/* Wall: cork board + two pinned sheets. Other chrome unchanged. */
body.on-wall {
  background-color: #c4a06a;
  background-image: url("/img/cork.jpg");
  background-size: 960px;
  background-repeat: repeat;
}
body.on-wall #app { background: transparent; }

body.on-wall .kitchen-list,
body.on-wall .board-panel {
  --rule: 32px;
  position: relative;
  background-color: #fbfaf4;
  background-image:
    radial-gradient(circle at 16px 40px, #c4a06a 5px, transparent 5.6px),
    radial-gradient(circle at 16px 40px, transparent 7px, #d7c4a3 7.5px, #d7c4a3 8.5px, transparent 9px),
    linear-gradient(90deg, #efe6d2 0 30px, transparent 30px),
    linear-gradient(90deg, transparent 46px, #d36b6b 46px, #d36b6b 48px, transparent 48px),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(var(--rule) - 1px),
      #b7cbe4 calc(var(--rule) - 1px),
      #b7cbe4 var(--rule)
    );
  background-size: 32px 128px, 32px 128px, auto, auto, 100% var(--rule);
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat, repeat;
  background-position: 0 8px, 0 8px, 0 0, 0 0, 0 16px;
  border: 1px solid #e0d2b6;
  border-left: 0;
  border-radius: 2px 3px 3px 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 12px 22px rgba(40, 24, 10, 0.32);
  padding: 36px 18px 24px 58px;
}
body.on-wall .kitchen-list {
  transform: rotate(-0.65deg);
  min-height: 260px;
  overflow: visible;
}
body.on-wall .board-panel {
  transform: rotate(1.05deg);
  top: 18px;
  min-height: 260px;
  overflow: visible;
}

/* Pins only on the grocery list and Notices. */
body.on-wall .kitchen-list::before,
body.on-wall .board-panel::before {
  content: "";
  position: absolute;
  top: -38px;
  left: 50%;
  width: 56px;
  height: 80px;
  background: url("/img/pin.png") no-repeat center / contain;
  transform: translateX(-50%) rotate(8deg);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(1px 2px 2px rgba(40, 24, 10, 0.4));
}
body.on-wall .kitchen-list::before { transform: translateX(-50%) rotate(10deg); }
body.on-wall .board-panel::before { transform: translateX(-50%) rotate(-6deg); }

body.on-wall .kitchen-split { overflow: visible; }
body.on-wall #list-view { overflow: visible; }

/* Writing sits on the notebook rules, not on extra cards. */
body.on-wall .kitchen-list .row {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  min-height: 64px;
}
body.on-wall .board-panel .note-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 4px;
}
body.on-wall .board-panel .board-form {
  background: rgba(255, 253, 248, 0.7);
}

body.on-wall #app {
  max-width: none;
  padding: 10px 22px 16px;
}
body.on-wall .add-bar { display: none !important; }
body.on-wall .toast { bottom: 20px; }

body.on-wall .kitchen-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas:
    "list notices"
    "list add";
  gap: 18px 28px;
  align-items: start;
  padding-top: 36px;
}
body.on-wall .kitchen-list { grid-area: list; overflow: visible; }
body.on-wall .kitchen-list-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
body.on-wall .board-panel { grid-area: notices; }
body.on-wall .add-slip { grid-area: add; }
body.on-wall .groups { grid-template-columns: 1fr !important; }

body.on-wall .kitchen-list.list-cols .group-items,
body.on-wall .kitchen-list.list-packed .group-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}

body.on-wall .kitchen-list.list-cols { --rule: 28px; }
body.on-wall .kitchen-list.list-cols .row { min-height: 52px; padding: 4px 6px; }
body.on-wall .kitchen-list.list-cols .name { font-size: 17px; }
body.on-wall .kitchen-list.list-cols .check { width: 34px; height: 34px; margin: 4px; }

body.on-wall .kitchen-list.list-packed { --rule: 24px; }
body.on-wall .kitchen-list.list-packed .row { min-height: 44px; padding: 2px 4px; }
body.on-wall .kitchen-list.list-packed .name { font-size: 15px; }
body.on-wall .kitchen-list.list-packed .check { width: 30px; height: 30px; margin: 2px; }
body.on-wall .kitchen-list.list-packed .icon-btn { width: 36px; height: 36px; }
body.on-wall .kitchen-list.list-packed .kitchen-note { display: none; }

body.on-wall .add-slip {
  position: relative;
  overflow: visible;
  background: #f3dc6a;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0 26px, transparent 26px);
  border-radius: 1px;
  box-shadow: 0 10px 18px rgba(40, 24, 10, 0.3);
  transform: rotate(2.1deg);
  padding: 22px 16px 12px;
}
body.on-wall .add-slip-title {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}
body.on-wall .paper-add input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #b8943a;
  outline: none;
  background: transparent;
  min-height: 44px;
  padding: 4px 2px;
  font-size: 18px;
}
body.on-wall .paper-staples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 8px;
}
body.on-wall .paper-staples button {
  border: 0;
  background: transparent;
  color: #5c3d12;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  min-height: 36px;
  padding: 4px 6px;
}

/* Nothing is written on the cork: every leftover label sits on a torn scrap. */
body.on-wall .pinned-scrap {
  --tear: polygon(
    1.2% 1.4%, 6% 0.2%, 12% 1.6%, 19% 0%, 28% 1.3%, 37% 0.3%, 48% 1.5%,
    59% 0.1%, 69% 1.2%, 81% 0%, 91% 1.4%, 99.2% 0.6%,
    100% 9%, 98.6% 18%, 100% 31%, 98.8% 44%, 100% 58%, 98.5% 71%, 100% 84%, 99% 95%,
    93% 100%, 82% 98.6%, 71% 100%, 59% 98.5%, 47% 100%, 34% 98.7%, 22% 100%, 11% 98.6%, 0.6% 99.5%,
    0% 88%, 1.5% 76%, 0.1% 63%, 1.4% 50%, 0% 37%, 1.6% 24%, 0.2% 12%
  );
  position: relative;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  padding: 32px 26px 22px;
  color: var(--ink);
}
body.on-wall .pinned-scrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #f6eedc;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 22px, transparent 40px);
  clip-path: var(--tear);
  box-shadow: 0 10px 18px rgba(40, 24, 10, 0.3);
}
body.on-wall .pinned-scrap > * {
  position: relative;
  z-index: 1;
}
body.on-wall .top {
  align-items: center;
  gap: 24px;
  margin: 6px 0 14px;
  max-width: 560px;
  transform: rotate(-0.9deg);
}
body.on-wall .count-pill {
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-family: var(--serif);
  font-size: 22px;
}
body.on-wall .tabs {
  width: max-content;
  max-width: 100%;
  gap: 4px;
  margin: 0 0 22px;
  padding: 18px 22px 12px;
  transform: rotate(0.55deg);
}
.cello { display: none; }
body.on-wall .cello {
  display: block;
  position: absolute;
  top: -11px;
  width: 88px;
  height: 28px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 250, 220, 0.55) 42%,
    rgba(255, 255, 255, 0.22) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(170, 150, 90, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(40, 24, 10, 0.12);
}
body.on-wall .cello-a {
  left: 12%;
  transform: rotate(-8deg);
}
body.on-wall .cello-b {
  right: 12%;
  left: auto;
  top: -9px;
  transform: rotate(6deg);
}
body.on-wall .tab {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  border-radius: 0;
  min-height: 44px;
}
body.on-wall .tab.on {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 3px solid var(--ink);
  box-shadow: none;
}
body.on-wall #ask-view,
body.on-wall #history-view {
  max-width: 920px;
  margin-top: 8px;
  transform: rotate(-0.35deg);
}
body.on-wall #history-view { transform: rotate(0.45deg); }
body.on-wall #ask-view .ask-form,
body.on-wall #ask-view .ask-result {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
body.on-wall #ask-view .ask-form {
  border-bottom: 1px solid #c4b498;
  margin-bottom: 14px;
}
body.on-wall #ask-view .ask-chips button {
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
}
body.on-wall #history-view .hint,
body.on-wall #history-view .empty-hist,
body.on-wall .pinned-scrap .hint {
  color: #534636;
}
body.on-wall #history-view .hist-row {
  background: #fffdf6;
  border-radius: 2px;
}
body.on-wall #pair-view .pair-card {
  max-width: 560px;
  border-radius: 0;
  transform: rotate(-0.8deg);
  box-shadow: 0 10px 18px rgba(40, 24, 10, 0.3);
}
body.on-wall .toast {
  background: #f6eedc;
  color: var(--ink);
  border-radius: 2px;
  box-shadow: 0 8px 16px rgba(40, 24, 10, 0.28);
}