/* ============================================================
   Brewly — Profile feature styles (extends brewly.css)
   New components: toggle, settings rows, stat blocks, brew grid,
   slide-to-confirm, segmented tabs, reaction stats.
   ============================================================ */

/* ---- screen scaffold reuse ---- */
.pscreen {
  font-family:'Patrick Hand', cursive; color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  height:100%; display:flex; flex-direction:column; box-sizing:border-box;
  -webkit-font-smoothing:antialiased; letter-spacing:.2px;
}
.pscreen *::selection { background:var(--accent); color:var(--on-accent); }

/* floating compose button */
.fab {
  position:absolute; right:20px; bottom:46px; z-index:20;
  width:62px; height:62px; border-radius:var(--wob-blob);
  border:3px solid var(--ink); background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--sh-hard); transition:transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color:transparent;
}
.fab:hover { transform:translateY(-2px) rotate(calc(var(--tilt) * -4deg)); box-shadow:var(--sh-hard-lg); }
.fab:active { transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--shadow-ink); }

/* ============================================================
   Hand-drawn toggle switch
   ============================================================ */
.sw {
  --sw-w:60px; --sw-h:34px;
  width:var(--sw-w); height:var(--sw-h); flex:0 0 auto;
  border:2.5px solid var(--ink); background:var(--muted);
  border-radius:255px 18px 235px 18px / 18px 235px 18px 255px;
  position:relative; cursor:pointer; padding:0;
  transition:background .18s ease; box-shadow:var(--sh-soft);
  -webkit-tap-highlight-color:transparent;
}
.sw[aria-checked="true"] { background:var(--accent); }
.sw__knob {
  position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:24px; height:24px; background:var(--surface);
  border:2px solid var(--ink);
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  transition:left .18s cubic-bezier(.4,1.4,.5,1), transform .18s;
}
.sw[aria-checked="true"] .sw__knob { left:calc(var(--sw-w) - 27px); transform:translateY(-50%) rotate(180deg); }

/* ============================================================
   Settings rows (sticky list)
   ============================================================ */
.slist {
  border:2px solid var(--ink); border-radius:var(--wob-md);
  background:var(--surface); box-shadow:var(--sh-soft);
  overflow:hidden;
}
.srow {
  display:flex; align-items:center; gap:13px; width:100%;
  padding:15px 16px; min-height:60px; box-sizing:border-box;
  background:transparent; border:none; cursor:pointer; text-align:left;
  font-family:'Patrick Hand', cursive; font-size:19px; color:var(--ink);
  border-bottom:2px dashed var(--muted);
  transition:background .12s; -webkit-tap-highlight-color:transparent;
}
.srow:last-child { border-bottom:none; }
.srow:hover { background:var(--muted); }
.srow--static { cursor:default; }
.srow--static:hover { background:transparent; }
.srow__ic {
  width:40px; height:40px; flex:0 0 auto; border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  border:2px solid var(--ink); display:flex; align-items:center; justify-content:center;
  background:var(--postit);
}
.srow__txt { flex:1 1 auto; min-width:0; }
.srow__sub { font-size:15px; color:var(--ink-muted); margin-top:1px; }
.srow__detail { color:var(--ink-muted); font-size:17px; }

/* ============================================================
   Stat blocks (Brews / Paps / Stakeout)
   ============================================================ */
.stat {
  flex:1 1 0; min-width:0; padding:11px 6px; text-align:center;
  border:2px solid var(--ink); background:var(--surface);
  border-radius:var(--wob-sm); box-shadow:var(--sh-soft);
  cursor:default;
}
.stat__n { font-family:'Kalam',cursive; font-weight:700; font-size:24px; line-height:1; }
.stat__l { font-size:15px; color:var(--ink-muted); margin-top:4px; }

/* ============================================================
   Segmented tabs
   ============================================================ */
.seg {
  display:flex; gap:8px; padding:0;
}
.seg__btn {
  flex:1 1 0; padding:9px 8px; min-height:44px; cursor:pointer;
  font-family:'Patrick Hand',cursive; font-size:17px; color:var(--ink);
  background:var(--surface); border:2px solid var(--ink);
  border-radius:var(--wob-sm); box-shadow:var(--sh-soft);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .12s; -webkit-tap-highlight-color:transparent;
}
.seg__btn--on { background:var(--accent); color:var(--on-accent); box-shadow:var(--sh-hard); }

/* ============================================================
   Brew grid card
   ============================================================ */
.gcard {
  position:relative; width:100%; box-sizing:border-box;
  border:2px solid var(--ink); border-radius:var(--wob-md);
  box-shadow:var(--sh-soft); padding:13px 13px 11px; cursor:pointer;
  display:flex; flex-direction:column; gap:9px; text-align:left;
  background:var(--surface); color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent; overflow:hidden;
}
.gcard:hover { box-shadow:var(--sh-hard); transform:translateY(-2px); }
.gcard--tea { background:var(--postit); color:var(--postit-ink); }
.gcard__body { font-size:17px; line-height:1.32; }
.gcard__meta {
  display:flex; align-items:center; gap:12px; margin-top:auto;
  font-size:14px; color:inherit; opacity:.72;
}
.gcard__meta .rs { display:inline-flex; align-items:center; gap:4px; }

/* ============================================================
   Reaction stats (post detail bar)
   ============================================================ */
.rbar { display:flex; align-items:center; gap:8px; }
.rpill {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:2px solid var(--ink); background:var(--surface); color:var(--ink);
  border-radius:var(--wob-pill); padding:8px 14px; min-height:46px;
  font-family:'Patrick Hand',cursive; font-size:17px;
  box-shadow:var(--sh-soft); transition:all .12s;
  -webkit-tap-highlight-color:transparent;
}
.rpill:hover { box-shadow:var(--sh-hard); }
.rpill--on { background:var(--accent); color:var(--on-accent); }

/* comment (Take) */
.take { display:flex; gap:11px; padding:14px 0; border-bottom:2px dashed var(--muted); }
.take:last-child { border-bottom:none; }
.take__av { width:42px; height:42px; flex:0 0 auto; border-radius:var(--wob-blob); border:2px solid var(--ink); overflow:hidden; background:var(--muted); }
.take__av img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   Post images (taped polaroid frames)
   ============================================================ */
.pimg {
  position:relative; border:2.5px solid var(--ink); background:var(--surface);
  border-radius:var(--wob-sm); box-shadow:var(--sh-hard); overflow:hidden;
}
.pimg img { display:block; width:100%; height:100%; object-fit:cover; }
.pimg__cap {
  font-family:'Patrick Hand',cursive; font-size:14px; color:var(--ink-muted);
  padding:7px 10px 8px; background:var(--surface); border-top:2px dashed var(--muted);
}
/* grid card image */
.gcard__img {
  width:100%; border:2px solid var(--ink); border-radius:var(--wob-sm);
  overflow:hidden; box-shadow:var(--sh-soft); background:var(--muted);
}
.gcard__img img { display:block; width:100%; height:118px; object-fit:cover; }
/* comment image */
.take__img {
  margin:7px 0 4px; max-width:200px; border:2px solid var(--ink);
  border-radius:var(--wob-sm); overflow:hidden; box-shadow:var(--sh-soft); background:var(--muted);
}
.take__img img { display:block; width:100%; height:120px; object-fit:cover; }

/* ============================================================
   Composer photo affordance
   ============================================================ */
.attach {
  width:46px; height:46px; flex:0 0 auto; border-radius:var(--wob-sm);
  border:2px solid var(--ink); background:var(--surface); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--sh-soft); -webkit-tap-highlight-color:transparent; transition:all .12s;
}
.attach:hover { background:var(--accent); color:var(--on-accent); }
.preview {
  position:relative; border:2.5px solid var(--ink); border-radius:var(--wob-sm);
  overflow:hidden; box-shadow:var(--sh-soft); background:var(--muted);
}
.preview img { display:block; width:100%; max-height:240px; object-fit:cover; }
.preview__x {
  position:absolute; top:8px; right:8px; width:36px; height:36px;
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  border:2px solid var(--ink); background:var(--surface); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--sh-soft);
}
.dropzone {
  width:100%; box-sizing:border-box;
  border:2.5px dashed var(--ink-muted); border-radius:var(--wob-md);
  background:var(--surface); padding:26px 16px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--ink-muted); transition:border-color .12s, background .12s;
  -webkit-tap-highlight-color:transparent;
}
.dropzone:hover { border-color:var(--ink); background:var(--muted); }

/* ============================================================
   Slide-to-confirm (delete)
   ============================================================ */
.s2c {
  position:relative; width:100%; height:62px; box-sizing:border-box;
  border:2.5px solid var(--accent); border-radius:var(--wob-pill);
  background:var(--surface); overflow:hidden; touch-action:pan-y;
  user-select:none; box-shadow:var(--sh-soft);
}
.s2c__fill { position:absolute; inset:0; background:var(--accent); opacity:.16; transform-origin:left; }
.s2c__label {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:8px; font-family:'Patrick Hand',cursive; font-size:18px; color:var(--accent);
  pointer-events:none; padding-left:48px;
}
.s2c__knob {
  position:absolute; top:50%; left:4px; transform:translateY(-50%);
  width:52px; height:52px; border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  background:var(--accent); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:grab;
  box-shadow:var(--sh-soft); touch-action:none;
}
.s2c__knob:active { cursor:grabbing; }
.s2c--done .s2c__knob { cursor:default; }

/* danger zone wrapper */
.danger {
  border:2px dashed var(--accent); border-radius:var(--wob-md);
  padding:16px 15px; background:transparent;
}

/* radio chip (delete reasons) */
.rchip {
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  padding:14px 15px; min-height:56px; cursor:pointer; text-align:left;
  font-family:'Patrick Hand',cursive; font-size:18px; color:var(--ink);
  background:var(--surface); border:2px solid var(--ink);
  border-radius:var(--wob-sm); box-shadow:var(--sh-soft);
  transition:all .12s; -webkit-tap-highlight-color:transparent;
}
.rchip--on { background:var(--accent); color:var(--on-accent); box-shadow:var(--sh-hard); }
.rchip__dot {
  width:24px; height:24px; flex:0 0 auto; border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  border:2.5px solid currentColor; display:flex; align-items:center; justify-content:center;
}

/* textarea wobble */
.tarea {
  width:100%; box-sizing:border-box; min-height:120px; resize:none;
  border:2px solid var(--ink); border-radius:var(--wob-sm);
  background:var(--surface); color:var(--ink); padding:13px 15px;
  font-family:'Patrick Hand',cursive; font-size:18px; outline:none; line-height:1.4;
  transition:border-color .12s, box-shadow .12s;
}
.tarea:focus { border-color:var(--secondary); box-shadow:0 0 0 4px rgb(45 93 161 / .18); }
[data-theme="dark"] .tarea:focus { box-shadow:0 0 0 4px rgb(110 168 230 / .26); }
.tarea::placeholder { color:var(--ink-muted); }