/* ============================================================
   Bookhall — pencil on paper.
   Shared by the public site and the admin panel.
   ============================================================ */
:root{
  --paper:      #f4f3ef;
  --paper-deep: #e9e6dd;
  --graphite:   #3a3a38;
  --pencil:     #78766f;
  --crayon:     #f5c24b;
  --redpencil:  #c4574b;
  --leaf:       #8fa980;
  --pastel-green:      #bfe6c4;
  --pastel-green-line: #6f9f78;
  --pastel-green-hover:#a9dab1;
  --pastel-red:        #f4c2bc;
  --pastel-red-line:   #c97e76;

  --wobble-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobble-2: 15px 225px 15px 255px / 225px 15px 255px 15px;
  --wobble-3: 125px 10px 20px 185px / 15px 195px 15px 25px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  background:var(--paper-deep);
  color:var(--graphite);
  font-family:"Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  display:flex;
  justify-content:center;
}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.02) 0 1px, transparent 1px);
  background-size:37px 41px, 53px 47px;
}

/* ---------- page shapes ---------- */
.sheet{
  position:relative; z-index:1;
  width:100%; max-width:440px; min-height:100vh;
  background:var(--paper);
  padding:22px 20px 90px;
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 18px 50px rgba(0,0,0,.10);
}
@media (min-width:520px){
  .sheet{ min-height:auto; margin:28px 0 40px; border:2.5px solid var(--graphite); border-radius:42px; }
}

.desk{
  position:relative; z-index:1;
  width:100%; max-width:940px; min-height:100vh;
  background:var(--paper);
  padding:26px 26px 90px;
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 18px 50px rgba(0,0,0,.10);
}

/* ---------- handwriting ---------- */
h1,h2,h3,.hand{
  font-family:"Patrick Hand", "Bradley Hand", "Comic Sans MS", cursive;
  font-weight:400; letter-spacing:.4px; line-height:1.15;
}
h1{ font-size:2.05rem; margin:.2em 0 .3em; }
h2{ font-size:1.6rem;  margin:1.6em 0 .5em; }
h3{ font-size:1.15rem; margin:0 0 .15em; }
.center{ text-align:center; }
.muted{ color:var(--pencil); }
.small{ font-size:.9rem; }

.blank{ display:inline-block; min-width:2ch; border-bottom:2.5px solid var(--graphite); padding:0 .15em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:"Patrick Hand", cursive;
  font-size:1.15rem; line-height:1.2; text-align:center; text-decoration:none;
  color:var(--graphite); background:var(--paper);
  border:2.5px solid var(--graphite); border-radius:var(--wobble-1);
  padding:11px 20px; cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{ background:var(--crayon); transform:rotate(-.8deg); }
.btn:active{ transform:translateY(2px) rotate(.5deg); }
.btn--alt{ border-radius:var(--wobble-2); }
.btn--big{ display:block; width:100%; font-size:1.45rem; padding:16px 20px; }
.btn--wide{ display:block; width:100%; }
.btn--small{ font-size:1rem; padding:6px 14px; }
.btn--danger{ border-color:var(--redpencil); color:var(--redpencil); }
.btn--danger:hover{ background:var(--redpencil); color:var(--paper); }
.btn--go{ background:var(--crayon); }
.btn[disabled]{
  color:var(--pencil); border-color:var(--pencil); border-style:dashed;
  background:transparent; cursor:default;
}
.btn[disabled]:hover{ background:transparent; transform:none; }

.btn--available{ background:var(--pastel-green); border-color:var(--pastel-green-line); }
.btn--available:hover{ background:var(--pastel-green-hover); }
.btn--reserved{
  color:var(--graphite); background:var(--pastel-red); border-color:var(--pastel-red-line);
  cursor:default;
}
.btn--reserved:hover{ background:var(--pastel-red); transform:none; }

:focus-visible{ outline:3px solid var(--redpencil); outline-offset:3px; }

.back{
  font-family:"Patrick Hand", cursive; font-size:1.9rem; line-height:1;
  color:var(--graphite); background:none; border:0; padding:0 8px 4px 0; cursor:pointer;
}

/* ---------- covers ---------- */
.cover{
  position:relative; width:100%; aspect-ratio:3/4;
  border:2.5px solid var(--graphite); border-radius:var(--wobble-2);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:10px; background:var(--paper);
  transition:transform .15s ease;
}
.cover img{ width:100%; height:100%; object-fit:cover; }
.cover__title{ font-family:"Patrick Hand", cursive; font-size:1rem; opacity:.85; }
.cover--c0{ background:#f7e3b8; }
.cover--c1{ background:#dfe9e2; }
.cover--c2{ background:#f0dcd8; }
.cover--c3{ background:#dde3ed; }
.cover--c4{ background:#eae2ee; }
.cover--c5{ background:#e6e5dc; }

.stamp{
  position:absolute; left:-22%; right:-22%; top:38%;
  transform:rotate(-32deg);
  border-top:2px dashed var(--redpencil); border-bottom:2px dashed var(--redpencil);
  background:rgba(244,243,239,.82); color:var(--redpencil);
  font-family:"Patrick Hand", cursive; font-size:1.25rem; text-align:center; padding:3px 0;
}

/* ---------- podium ---------- */
.podium{ display:grid; grid-template-columns:1fr 1.18fr 1fr; gap:9px; align-items:end; }
.podium__slot{ display:flex; flex-direction:column; }
.podium__rank{ font-family:"Patrick Hand", cursive; font-size:1.4rem; text-align:center; margin-bottom:3px; }
.podium .cover{ aspect-ratio:auto; }
.podium__slot--1 .cover{ height:186px; }
.podium__slot--2 .cover{ height:152px; }
.podium__slot--3 .cover{ height:132px; }
.podium__title{
  font-family:"Patrick Hand", cursive; font-size:.95rem; text-align:center;
  margin:7px 0 5px; min-height:2.2em;
}
.podium .btn{ font-size:.95rem; padding:6px 8px; }

/* ---------- book grid ---------- */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; align-items:stretch; }
.card{ display:flex; flex-direction:column; }
.card__title{ font-family:"Patrick Hand", cursive; font-size:1.02rem; margin:8px 0 6px; min-height:2.3em; }
.card .btn{ font-size:1rem; padding:7px 10px; margin-top:auto; }
.card__link{ text-decoration:none; color:inherit; display:block; }
.card__link:hover .cover{ transform:rotate(-1.2deg); }

/* ---------- star rating ---------- */
.stars{ display:flex; gap:2px; margin:0 0 10px; }
.podium__title + .stars{ justify-content:center; margin:-2px 0 8px; }
.star{ width:16px; height:16px; }
.star path{ fill:none; stroke:var(--pencil); stroke-width:1.6; }
.star--on path{ fill:var(--crayon); stroke:#b8860b; }

/* ---------- tags ---------- */
.tag-filter{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:14px 0 20px; }
.tag-filter__label{ font-family:"Patrick Hand", cursive; font-size:.95rem; color:var(--pencil); }
.tag-chip{
  font-family:"Patrick Hand", cursive; font-size:.95rem;
  border:2px solid var(--pencil); color:var(--pencil); background:transparent;
  border-radius:var(--wobble-2); padding:5px 14px; cursor:pointer;
}
.tag-chip:hover{ border-color:var(--graphite); color:var(--graphite); }
.tag-chip.is-on{ border-color:var(--graphite); color:var(--graphite); background:var(--crayon); }
.tag-chip--clear{ border-style:dashed; }
.tag-chip--static{
  display:inline-block; cursor:default; margin:0 6px 8px 0;
  font-size:.9rem; padding:3px 12px;
}
.tag-list{ margin:0 0 4px; }

/* ---------- explore header (cloud + spinning sun) ---------- */
.explore-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  margin-bottom:6px;
}
.explore-header h1{ flex:1; margin:10px 0 0; }
.explore-header .sun,
.explore-header .cloud{ width:96px; height:96px; flex:0 0 auto; margin:0; display:block; }
.explore-header .cloud:hover{ animation:cloud-bounce .6s ease infinite; }
@keyframes cloud-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* ---------- intro ---------- */
.intro p{ margin:0 0 .85em; }
.intro p:first-child{ font-family:"Patrick Hand", cursive; font-size:1.25rem; }
.photo-slot{
  width:100%; aspect-ratio:4/3;
  border:2.5px solid var(--graphite); border-radius:var(--wobble-1);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--paper); margin:18px 0 22px;
}
.photo-slot img{ width:100%; height:100%; object-fit:cover; }

/* ---------- forms ---------- */
.field{ margin:0 0 22px; }
.field label{ font-family:"Patrick Hand", cursive; font-size:1.25rem; display:block; margin-bottom:2px; }
.field input, .field textarea, .field select{
  width:100%; font-family:"Nunito", sans-serif; font-size:1.05rem; color:var(--graphite);
  background:transparent; border:0; border-bottom:2.5px solid var(--graphite);
  padding:6px 2px; border-radius:0;
}
.field textarea{
  border:2.5px solid var(--graphite); border-radius:var(--wobble-2);
  padding:10px 12px; min-height:110px; resize:vertical; line-height:1.5;
}
.field select{ border:2.5px solid var(--graphite); border-radius:var(--wobble-1); padding:9px 10px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--pencil); opacity:.6; }
.field .err{ display:none; color:var(--redpencil); font-size:.9rem; margin-top:4px; }
.field.is-bad .err{ display:block; }
.field.is-bad input, .field.is-bad textarea{ border-color:var(--redpencil); }
.field.is-bad input{ border-bottom-color:var(--redpencil); }

/* ---------- thank you ---------- */
.thanks{ text-align:center; padding-top:12px; }
.thanks h1{ font-size:3.2rem; line-height:1; }
.thanks h1 span{ display:block; margin-left:2.2rem; }
.sun{ width:150px; height:150px; margin:26px auto 18px; display:block; }
.sun__rays{ transform-origin:50% 50%; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.thanks__note{
  font-family:"Patrick Hand", cursive; font-size:1.3rem;
  border-top:2px solid var(--graphite); padding-top:10px; display:inline-block;
}

/* ---------- admin ---------- */
.topbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  justify-content:space-between; margin-bottom:6px;
}
.topbar h1{ margin:0; }
.tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px; }
.tab{
  font-family:"Patrick Hand", cursive; font-size:1.1rem;
  background:none; border:2.5px solid transparent; border-radius:var(--wobble-1);
  padding:8px 16px; cursor:pointer; color:var(--pencil);
}
.tab:hover{ color:var(--graphite); }
.tab[aria-selected="true"]{ border-color:var(--graphite); color:var(--graphite); background:var(--crayon); }
.tab .count{
  font-size:.85rem; border:2px solid currentColor; border-radius:999px;
  padding:0 7px; margin-left:6px;
}

.panel{ border:2.5px solid var(--graphite); border-radius:var(--wobble-3); padding:18px 20px; margin-bottom:18px; }
.panel--soft{ border-style:dashed; border-color:var(--pencil); }
.panel h2{ margin-top:0; }

.row{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.row > .grow{ flex:1 1 240px; min-width:0; }

.shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:18px 16px; }
.shelf .cover{ aspect-ratio:3/4; }
.shelf__title{ font-family:"Patrick Hand", cursive; font-size:1.02rem; margin:8px 0 2px; }
.shelf__meta{ font-size:.86rem; color:var(--pencil); margin:0 0 8px; }
.shelf__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.stars-plain{ color:var(--crayon); text-shadow:0 0 0 1px #b8860b; letter-spacing:1px; margin:2px 0; }

/* ---------- admin: star picker ---------- */
.star-picker{ display:flex; gap:4px; }
.star-pick{
  font-size:1.7rem; line-height:1; background:none; border:0; cursor:pointer;
  color:var(--pencil); padding:2px;
}
.star-pick.is-on{ color:var(--crayon); text-shadow:0 0 0 1px #b8860b; }
.star-pick:hover{ color:#e0ac2e; }

/* ---------- admin: tags ---------- */
.tag-manager{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.tag-manager .tag-chip{
  cursor:default; display:inline-flex; align-items:center; gap:6px;
  font-family:"Patrick Hand", cursive; font-size:.95rem;
  border:2px solid var(--pencil); color:var(--pencil);
  border-radius:var(--wobble-2); padding:4px 6px 4px 14px;
}
.tag-chip__x{
  border:0; background:none; color:inherit; cursor:pointer; font-size:1.1rem; line-height:1; padding:0 4px;
}
.tag-chip__x:hover{ color:var(--redpencil); }
.tag-picker{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.tag-check{ display:flex; align-items:center; gap:6px; font-family:"Nunito", sans-serif; font-size:.95rem; cursor:pointer; }

.resv{ border:2.5px solid var(--graphite); border-radius:var(--wobble-3); padding:14px 18px; margin-bottom:14px; }
.resv h3{ margin-bottom:8px; }
.resv dl{ margin:0 0 12px; font-size:.98rem; display:grid; grid-template-columns:7em 1fr; gap:2px 8px; }
.resv dt{ color:var(--pencil); }
.resv dd{ margin:0; }
.resv--done{ border-style:dashed; border-color:var(--pencil); }
.resv--done h3{ color:var(--pencil); }

.tag{
  font-family:"Patrick Hand", cursive; font-size:.95rem;
  border:2px solid var(--pencil); color:var(--pencil);
  border-radius:var(--wobble-2); padding:1px 9px; margin-left:8px; white-space:nowrap;
}
.tag--waiting{ border-color:var(--redpencil); color:var(--redpencil); }
.tag--out{ border-color:var(--crayon); color:#a07c14; }
.tag--home{ border-color:var(--leaf); color:#5d7350; }

.drop{
  border:2.5px dashed var(--pencil); border-radius:var(--wobble-1);
  padding:16px; text-align:center; cursor:pointer; background:transparent;
  width:100%; font-family:"Nunito", sans-serif; font-size:.95rem; color:var(--pencil);
}
.drop:hover{ border-color:var(--graphite); color:var(--graphite); }
.preview{ width:130px; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:50; background:var(--graphite); color:var(--paper);
  font-family:"Patrick Hand", cursive; font-size:1.1rem;
  padding:10px 22px; border-radius:var(--wobble-1);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.toast.is-on{ opacity:1; }

.divider{ border:0; border-top:2.5px solid var(--graphite); border-radius:var(--wobble-1); margin:30px 0 6px; }
.foot{ margin-top:40px; text-align:center; }
.stack > * + *{ margin-top:14px; }
.empty{ color:var(--pencil); font-family:"Patrick Hand", cursive; font-size:1.2rem; padding:20px 0; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}