/* ===========================================================================
   SKETCHBOOK

   The look comes from your own drawings: thick marker lines that never quite
   close straight, handwriting for anything that is a title, and your cats
   and doodle people living in the gaps. Boxes are drawn in marker with
   slightly uneven corners; buttons are stickers that press down.

   Loaded after app.css and layered over it.
   =========================================================================== */

:root {
  --wob:    20px 26px 18px 28px / 26px 18px 28px 20px;
  --wob-sm: 12px 15px 11px 16px / 15px 11px 16px 12px;
  --pen-w:  2px;
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 18 2, 34 9, 50 5 S 84 2, 98 6' stroke='black' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body { background-image: var(--grain); background-attachment: fixed; }
.gate { background-image: var(--grain), radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface-2) 90%, var(--tuna)) 0%, var(--ground) 62%); }

/* ------------------------------------------------------------ marker boxes */

.card, .place-card, .sources, .nowbar, .rail, .panel-aside, .film,
.view-chat.is-on, .us-map, .dlg, .gate-card, .stage {
  border: var(--pen-w) solid var(--pen);
  border-radius: var(--wob);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--pen) 16%, transparent);
  background-image: none;
}
.card, .place-card, .sources, .nowbar, .panel-aside, .dlg, .gate-card { background-color: var(--surface); }
.film { border-radius: var(--wob-sm); }
.film:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 color-mix(in srgb, var(--pen) 18%, transparent); border-color: var(--pen); }
.film.is-now { border-color: var(--rabbit); box-shadow: 4px 5px 0 color-mix(in srgb, var(--rabbit) 40%, transparent); }
.place-card::before { display: none; }
.place-card.who-rabbit { border-color: color-mix(in srgb, var(--rabbit) 70%, var(--pen)); }
.place-card.who-tuna { border-color: color-mix(in srgb, var(--tuna) 70%, var(--pen)); }
.stage { background: #0e1219; }

/* --------------------------------------------------------- sticker buttons */

.btn {
  border: var(--pen-w) solid var(--pen);
  border-radius: var(--wob-sm);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--pen) 28%, transparent);
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 color-mix(in srgb, var(--pen) 34%, transparent); border-color: var(--pen); }
.btn:active:not(:disabled) { transform: translate(1px, 2px); box-shadow: 0 0 0 transparent; }
.btn-sm { font-size: 1rem; }
.btn-ghost { border-color: transparent; box-shadow: none; }
.btn-ghost:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pen) 50%, transparent); background: transparent; }
.btn-moon, .btn-moon:hover:not(:disabled) { background: var(--rabbit); border-color: var(--pen); color: var(--on-accent); }
.btn-tide, .btn-tide:hover:not(:disabled) { background: var(--tuna); border-color: var(--pen); color: var(--on-accent); }

.text-input, .composer-input {
  border: var(--pen-w) solid color-mix(in srgb, var(--pen) 45%, transparent);
  border-radius: var(--wob-sm);
  background: var(--surface-2);
}
.text-input:focus, .composer-input:focus { border-color: var(--rabbit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rabbit) 20%, transparent); }
.seg { border: var(--pen-w) solid color-mix(in srgb, var(--pen) 30%, transparent); border-radius: var(--wob-sm); }
.seg button { font-family: var(--display); font-size: 1rem; }
.seg button.is-on { background: var(--rabbit); color: var(--on-accent); box-shadow: none; }
.pop .seg button.is-on { background: #f2ad6b; color: #1a140d; }

/* -------------------------------------------------------------- handwriting */

.card-head, .chat-head h2, .rail-head h2, .pc-where h3, .now-title, .dlg h2, .brand-word,
.film-title, .mn-name, .note-label, .st-count b, .cd-unit b, .place-clock, .pc-clock,
.tab, .src-tab, .dock-btn, .launch-title, .launch-btn span, .us-between-km, .rb-summary,
.cd-empty, .cd-done, .chat-empty p, .art-empty p, .map-label-text b, .map-km, .sub-head, .pop-sec h4 {
  font-family: var(--display);
  font-variation-settings: normal;
  font-style: normal;
}
.card-head { font-size: 1.55rem; font-weight: 700; line-height: 1.05; }
.chat-head h2, .rail-head h2 { font-size: 1.4rem; font-weight: 700; }
.pc-where h3 { font-size: 1.6rem; font-weight: 700; }
.now-title { font-size: 1.6rem; font-weight: 700; }
.dlg h2 { font-size: 1.8rem; font-weight: 700; }
.brand-word { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.08em; }
.film-title { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.mn-name { font-size: 1.6rem; font-weight: 700; }
.note-label { font-size: 1.2rem; font-weight: 700; }
.place-clock { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; }
.pc-clock { font-size: clamp(3rem, 7vw, 4rem); font-weight: 700; }
.cd-unit b { font-size: clamp(2.8rem, 6.5vw, 4rem); font-weight: 700; }
.st-count b { font-size: 3.2rem; font-weight: 700; }
.launch-title { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; color: #f2ad6b; }
.launch-btn span { font-size: 1.1rem; }
.rb-summary { font-size: 1.25rem; font-weight: 700; }
.us-between-km { font-size: 1.4rem; font-weight: 700; }
.sub-head { font-size: 1.1rem; letter-spacing: 0.02em; text-transform: none; font-weight: 700; }
.pop-sec h4 { font-size: 1.05rem; letter-spacing: 0.02em; text-transform: none; }
.map-label-text b { font-size: 1rem; }
.map-km { font-size: 1rem; font-weight: 700; }

.tab { font-size: 1.25rem; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0.35rem 1rem 0.55rem; }
.tab.is-on { background: transparent; border-color: transparent; box-shadow: none; }
.tab.is-on::after,
.src-tab.is-on::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 7px;
  background: var(--rabbit);
  -webkit-mask: var(--scribble) center / 100% 100% no-repeat;
  mask: var(--scribble) center / 100% 100% no-repeat;
}
.src-tab { font-size: 1.1rem; font-weight: 700; position: relative; }
.src-tab.is-on { background: transparent; box-shadow: none; }

.bubble { border-radius: 16px 18px 17px 6px / 18px 15px 19px 6px; border-width: 1.5px; }
.msg.is-mine .bubble { border-radius: 18px 16px 6px 17px / 15px 18px 6px 19px; }

/* ------------------------------------------- your drawings, as themed ink */

.art {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}
.art-cat-happy { --art: url(/art/cat-happy.png); aspect-ratio: 360 / 317; }
.art-cat-smile { --art: url(/art/cat-smile.png); aspect-ratio: 360 / 252; }
.art-cat-grump { --art: url(/art/cat-grump.png); aspect-ratio: 360 / 259; }
.art-basket    { --art: url(/art/kid-basket.png); aspect-ratio: 233 / 320; }
.art-hood      { --art: url(/art/kid-hood.png);   aspect-ratio: 181 / 268; }
.art-scarf     { --art: url(/art/kid-scarf.png);  aspect-ratio: 176 / 320; }

.brand-cat { height: 30px; width: auto; display: block; transform: rotate(-4deg); }
.launch-cat { width: 104px; color: #f2ad6b; margin-bottom: 0.1rem; }
.chat-empty .art { width: 150px; color: var(--muted); }
.art-empty { display: grid; justify-items: center; gap: 0.5rem; text-align: center; font-style: normal; padding: 0.6rem 0; }
.art-empty .art { width: 96px; color: var(--muted); }
.art-empty p { margin: 0; font-size: 1.15rem; color: var(--muted); max-width: 32ch; }

.chat-typing::before {
  content: '';
  display: inline-block;
  width: 1.9em;
  height: 1.3em;
  margin-right: 0.35rem;
  vertical-align: -0.35em;
  background: var(--tuna);
  -webkit-mask: url(/art/cat-smile.png) center / contain no-repeat;
  mask: url(/art/cat-smile.png) center / contain no-repeat;
  animation: bob 0.9s ease-in-out infinite;
}

.cd { position: relative; }
.cd-hug {
  position: absolute;
  right: 16px;
  bottom: 12px;
  height: 150px;
  transform: rotate(4deg);
  pointer-events: none;
}
.cd > :not(.cd-hug):not(.card-row) { max-width: calc(100% - 96px); }

/* ----------------------------------------------------------- ratings, in cats */

.who-rabbit { --who: var(--rabbit); }
.who-tuna { --who: var(--tuna); }
.rcats { display: inline-flex; gap: 2px; vertical-align: middle; }
.rcat { position: relative; display: inline-block; width: 1.35em; aspect-ratio: 360 / 317; }
.rcats-sm .rcat { width: 1.15em; }
.rcat::before, .rcat > i {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: url(/art/cat-happy.png) center / contain no-repeat;
  mask: url(/art/cat-happy.png) center / contain no-repeat;
}
.rcat::before { background: color-mix(in srgb, var(--faint) 40%, transparent); }
.rcat > i { background: var(--who, var(--rabbit)); clip-path: inset(0 calc(100% - var(--f, 0%)) 0 0); }
.rcat-lg { width: 3.1rem; cursor: pointer; }
.rpick { display: inline-flex; gap: 6px; padding: 4px; border-radius: var(--wob-sm); outline-offset: 4px; }
.rpick-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.rpick-read { font-family: var(--display); font-size: 1.25rem; color: var(--muted); text-align: center; min-height: 1.4em; }
.rlike { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; transition: transform 0.15s, color 0.15s; }
.rlike:hover { transform: scale(1.12); color: var(--heart); }
.rlike.is-on { color: var(--heart); }
.rheart { color: var(--heart); display: inline-grid; }
.rsum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; margin-top: 0.35rem; font-size: 0.82rem; }
.rsum-one { display: inline-flex; align-items: center; gap: 0.35rem; }
.rsum-one b { font-weight: 700; color: var(--muted); }
.rsum-hidden, .rtheirs-hidden { color: var(--faint); font-style: italic; }
.rtheirs { padding: 0.75rem 0.95rem; border: 2px dashed color-mix(in srgb, var(--pen) 35%, transparent); border-radius: var(--wob-sm); }
.rtheirs p { margin: 0; }
.rtheirs-head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.rtheirs-review { margin-top: 0.35rem !important; font-family: var(--display); font-size: 1.2rem; }
.rate-ico {
  display: inline-block;
  width: 1.3em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: url(/art/cat-happy.png) center / contain no-repeat;
  mask: url(/art/cat-happy.png) center / contain no-repeat;
}
.dlg-rate form { justify-items: stretch; text-align: center; }
.dlg-rate h2 { font-size: 2rem; }
.dlg-rate .dlg-actions { justify-content: center; flex-wrap: wrap; }
.dlg-rate textarea { text-align: left; }
.rate-art {
  justify-self: center;
  width: 118px;
  aspect-ratio: 360 / 252;
  margin: -0.4rem 0;
  background: var(--rabbit);
  -webkit-mask: url(/art/cat-smile.png) center / contain no-repeat;
  mask: url(/art/cat-smile.png) center / contain no-repeat;
}
.kind-seg { flex: none; }
.kind-tag {
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 2px;
}
.add-row { flex-wrap: wrap; }
.add-row .text-input { flex: 1 1 200px; }
.diary-stats { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--muted); }
.wl-item { border-radius: var(--wob-sm); border-width: 1.5px; }

/* ------------------------------------------------------------ reconnecting */

.status-retry { border: 0; background: none; padding: 0 0 0 0.25rem; color: var(--rabbit); font-weight: 800; cursor: pointer; }
.status-retry:disabled { opacity: 0.5; cursor: wait; }
.need-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.pop-retry { margin-top: 0.9rem; }
.locate-btn { justify-self: start; }

/* ---------------------------------------------------------------- smaller */

@media (max-width: 980px) {
  .gate-hug { display: none; }
}
@media (max-width: 760px) {
  .stage, .view-chat.is-on, .us-map { border-radius: 0; border-inline: 0; box-shadow: none; }
  .cd-hug { height: 96px; right: 8px; bottom: 8px; opacity: 0.9; }
  .cd > :not(.cd-hug):not(.card-row) { max-width: calc(100% - 64px); }
  .gate-smug { width: 124px; top: -66px; }
  .gate { padding-top: 4.5rem; }
  .tab.is-on::after { display: none; }
  .dock-btn { font-size: 0.95rem; }
  .rcat-lg { width: 2.5rem; }
}