/* ============================================================================
   controls.css: interactive controls
   ----------------------------------------------------------------------------
   Buttons (solid, ghost, icon), the two text-input styles (underline and boxed),
   and the hand-drawn checkbox with its struck-through "done" text. The checkbox
   tick animation (popcheck) lives in animations.css.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------
   .btn is the solid button (colour via --bc, defaulting to terracotta); the
   .btn-* classes just swap that colour. .iconbtn is a bare clickable icon that
   wiggles red on hover. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;user-select:none;
  font-family:var(--f-hand);font-weight:700;font-size:19px;line-height:1;color:var(--paper);
  background:var(--grain),var(--bc,var(--terra));padding:9px 18px 11px;
  border-radius:14px 4px 13px 5px/5px 13px 4px 14px;
  box-shadow:2px 3px 0 rgba(51,38,26,.3);transition:transform .1s, box-shadow .1s;
}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0);}   /* press-down effect */
.btn-berry{--bc:var(--berry);} .btn-clay{--bc:var(--clay);} .btn-moss{--bc:var(--moss);} .btn-rust{--bc:#a1462f;}
.iconbtn{cursor:pointer;color:#b3947a;line-height:1;padding:0 4px;transition:transform .15s,color .15s;}
@media(hover:hover){.iconbtn:hover{color:var(--redpen);transform:rotate(-8deg) scale(1.2);}}

/* ---- Inputs: writing on paper -------------------------------------------
   .inp is a bare field with a dashed underline that turns solid terracotta on
   focus; .inp-box is the same idea inside a bordered card. */
.inp{
  background:transparent;border:none;border-bottom:2px dashed var(--line);border-radius:0;
  font-size:15px;color:var(--ink);padding:8px 4px;outline:none;min-width:0;
}
.inp:focus{border-bottom-color:var(--terra);border-bottom-style:solid;}
.inp-box{
  background:var(--grain),#fffdf4;border:1.5px solid var(--line);border-radius:4px 9px 5px 10px/9px 5px 10px 4px;
  font-size:15px;color:var(--ink);padding:9px 12px;outline:none;min-width:0;
}
.inp-box:focus{border-color:var(--terra);}

/* ---- Hand-drawn checkboxes ----------------------------------------------
   .scrib is the box (square, or rounded with .scrib-round); .scrib .mark is the
   red hand-drawn tick that pops in (see @keyframes popcheck in animations.css).
   .strike greys out and crosses through the label of a completed item. */
.scrib{
  flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:25px;height:25px;background:#fffdf4;
  border:2px solid var(--ink);border-radius:6px 3px 7px 4px/4px 7px 3px 6px;position:relative;
  /* Opaque (not a translucent rgba): a see-through fill lets Safari's black GPU
     backing store show through the box while the sticky note lifts on hover,
     making the checkbox flash black. An opaque fill removes that path entirely. */
}
.scrib-round{border-radius:50% 46% 52% 48%/47% 52% 46% 53%;}
.scrib .mark{
  font-family:var(--f-hand);font-weight:700;font-size:30px;line-height:.5;color:var(--redpen);
  transform:rotate(-6deg) translateY(-3px);animation:popcheck .3s cubic-bezier(.5,1.8,.6,1) both;pointer-events:none;
}
.strike{color:#a58e77 !important;text-decoration:line-through;text-decoration-color:var(--redpen);text-decoration-thickness:2px;}