/* Pinch — Denim Apron Workshop theme */

:root{
  --primary:#4b6a8b;
  --secondary:#f1e3c3;
  --accent:#d94f4c;
  --ink:#2c3038;
  --paper:#fbf6ec;
  --denim-light:#b9c8d8;
  --denim:#6d86a0;
  --denim-dark:#4b6a8b;
  --thread:#d9c49a;
  --thread-hi:#e8f4ff;
  --bean:#6b4423;
  --shadow:0 2px 6px rgba(43,58,80,.18);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;margin:0;}
body{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--ink);
  background-color:var(--denim-light);
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px),
    radial-gradient(rgba(20,35,55,.10) 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--denim-light), var(--denim) 55%, var(--denim-dark));
  background-size:12px 12px, 14px 14px, 100% 4px, 100% 100%;
  background-attachment:fixed;
}

.app{
  max-width:520px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---- top hem ---- */
.top-hem{
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  text-align:center;
  position:relative;
  background:linear-gradient(180deg, var(--denim-dark), var(--denim));
  border-bottom:2px solid rgba(0,0,0,.15);
  box-shadow:var(--shadow);
  z-index:5;
}
.hem-title{
  display:block;
  font-size:26px;
  letter-spacing:2px;
  color:var(--thread-hi);
  font-family:"Brush Script MT","Segoe Script",cursive;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.hem-tag{
  display:block;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(232,244,255,.75);
  margin-top:2px;
}

/* ---- content ---- */
.content{
  flex:1 1 auto;
  padding:14px 12px calc(88px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  position:relative;
  z-index:1;
}

.screen-title{
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:26px;
  color:var(--thread-hi);
  margin:0 0 12px;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.screen-sub{
  color:rgba(232,244,255,.8);
  font-size:12px;
  margin:-6px 0 14px;
}

/* ---- Dashboard: clothespins + chalkboard slivers ---- */
.pins-row{
  display:flex;
  justify-content:space-around;
  align-items:flex-start;
  margin:6px 0 4px;
  position:relative;
}
.pin{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
}
.pin-clip{
  width:34px;
  height:52px;
  background:linear-gradient(180deg,#c98e52,#9a6a3a 55%,#7d5430);
  border-radius:6px;
  box-shadow:var(--shadow);
  position:relative;
}
.pin-clip::before{
  content:"";
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  width:22px;height:22px;
  background:radial-gradient(circle at 45% 35%,#e8c88f,#a06a2f);
  border-radius:50%;
  border:2px solid #5b3d22;
}
.chalkboard{
  margin-top:-6px;
  width:120px;
  min-height:64px;
  background:linear-gradient(160deg,#4a514f,#2e3332 60%,#1f2323);
  border-radius:4px;
  padding:10px 6px;
  text-align:center;
  color:#f3efe0;
  box-shadow:inset 0 0 8px rgba(0,0,0,.7), var(--shadow);
  border:1px solid #111;
  position:relative;
  transform:rotate(var(--tilt,-1deg));
}
.chalkboard::after{
  content:"";
  position:absolute;top:4px;left:6px;right:6px;
  height:4px;background:rgba(255,255,255,.05);
  border-radius:50%;
}
.chalk-num{
  font-size:30px;
  font-family:"Comic Sans MS","Chalkboard SE",cursive;
  color:#fff;
  line-height:1;
}
.chalk-lab{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(243,239,224,.85);
  margin-top:4px;
}
.pin[data-count="week"] .chalkboard{--tilt:1.5deg;}
.pin[data-count="total"] .chalkboard{--tilt:-1.5deg;}

/* ---- big start button ---- */
.big-start{
  margin:22px auto 10px;
  display:block;
  width:78%;
  padding:16px;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:24px;
  color:#fff;
  background:linear-gradient(180deg,var(--accent),#b93a37);
  border:none;
  border-radius:14px;
  box-shadow:0 6px 0 #8f2d2a, var(--shadow);
  cursor:pointer;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  transform:rotate(-.5deg);
}
.big-start:active{transform:translateY(4px) rotate(-.5deg);box-shadow:0 2px 0 #8f2d2a;}

/* ---- Logbook search ---- */
.search-wrap{
  position:relative;
  margin-bottom:14px;
}
.search-wrap input{
  width:100%;
  padding:11px 12px;
  border:2px solid rgba(255,255,255,.4);
  border-radius:10px;
  background:rgba(255,255,255,.92);
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
}
.search-wrap::after{
  content:"\1F50D";
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:14px;
}

/* ---- recipe cards ---- */
.card{
  position:relative;
  background:var(--paper);
  padding:14px 14px 12px;
  margin:0 0 16px;
  border-radius:10px;
  box-shadow:var(--shadow);
  transform:rotate(var(--rot,0deg)) translateY(var(--hang,0));
  transition:transform .12s ease;
}
.card:nth-child(odd){--rot:-.6deg;--hang:1px;}
.card:nth-child(even){--rot:.5deg;--hang:2px;}
.card:active{transform:rotate(0deg) scale(.99);}
.card::before{ /* slight ragged edge feel */
  content:"";
  position:absolute;inset:0;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(120,90,40,.12);
  pointer-events:none;
}
.card-title{
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:19px;
  font-weight:700;
  color:#2b2b2b;
  margin:0 34px 2px 0;
}
.card-notes{
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:13px;
  color:#5a554a;
  margin:4px 0 8px;
  font-style:italic;
  line-height:1.35;
}
.beans{
  display:flex;
  gap:3px;
  margin-top:2px;
}
.bean{
  width:13px;height:13px;
  background:radial-gradient(circle at 40% 35%,#8a5a2e,#5b3d22);
  border-radius:60% 60% 55% 55%;
  transform:rotate(15deg);
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.25);
}
.bean.filled::after{
  content:"";
  display:block;width:5px;height:3px;margin:4px auto 0;
  background:rgba(255,255,255,.35);
  border-radius:50%;
}
.bean.blank{
  background:transparent;
  border:1.5px dashed #b4a98d;
  box-shadow:none;
}
.coffee-ring{
  position:absolute;
  right:10px;bottom:6px;
  width:26px;height:26px;
  border:2px solid rgba(120,90,50,.25);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(120,90,50,.10), 0 0 0 5px rgba(120,90,50,.06);
  opacity:.5;
  pointer-events:none;
}
.heart-felt{
  position:absolute;
  top:-7px;right:-4px;
  width:22px;height:20px;
  background:var(--accent);
  transform:rotate(18deg) skew(-6deg);
  border-radius:50% 50% 40% 40%;
  box-shadow:var(--shadow);
  pointer-events:none;
}
.heart-felt::before,.heart-felt::after{
  content:"";
  position:absolute;width:22px;height:22px;background:var(--accent);border-radius:50%;
  top:0;
}
.heart-felt::before{left:-10px;}
.heart-felt::after{right:-10px;}
.heart-felt .stitch-h{
  position:absolute;left:4px;right:4px;top:6px;
  border-top:1px dashed #f3d5d4;
}
.heart-felt .stitch-v{
  position:absolute;left:6px;right:6px;top:4px;
  border-top:1px dashed #f3d5d4;
  transform:rotate(-45deg);
}

/* ---- empty states (theme-specific) ---- */
.empty{
  text-align:center;
  color:rgba(232,244,255,.9);
  padding:30px 0;
}
.empty .empty-art{
  font-size:52px;
  margin-bottom:8px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.empty p{
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:15px;
  margin:6px auto;
  max-width:240px;
  line-height:1.4;
}

/* ---- form ---- */
.form-card{
  background:var(--paper);
  border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow);
  transform:rotate(-.3deg);
}
.field{margin-bottom:14px;}
.field label{
  display:block;
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-weight:700;
  font-size:14px;
  color:#4a4236;
  margin-bottom:5px;
}
.field input[type="text"],.field textarea{
  width:100%;
  border:1.5px solid #c9b98f;
  border-radius:8px;
  padding:10px;
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:15px;
  color:var(--ink);
  background:#fffdf6;
}
.field textarea{min-height:70px;resize:vertical;}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(75,106,139,.25);
}
.error-msg{
  display:none;
  color:var(--accent);
  font-size:12px;
  margin-top:4px;
  font-family:inherit;
}
.field.invalid input,.field.invalid textarea{border-color:var(--accent);}
.field.invalid .error-msg{display:block;}

/* bean selector */
.bean-select{
  display:flex;
  gap:10px;
  margin-top:4px;
}
.bean-opt{
  font-size:24px;
  cursor:pointer;
  filter:grayscale(1) opacity(.4);
  transition:filter .1s;
  background:none;border:none;padding:2px;
}
.bean-opt.on{filter:none;}
.bean-note{font-size:11px;color:#8a7f68;margin-top:4px;}

/* heart toggle */
.heart-toggle{
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  user-select:none;
  font-family:"Segoe Print","Bradley Hand",cursive;
  color:#5a4b3a;
}
.heart-toggle .heart-slot{
  width:30px;height:28px;
  border:2px solid #c9b98f;
  border-radius:50% 50% 45% 45%;
  position:relative;
  background:transparent;
  transition:background .1s,border-color .1s;
}
.heart-toggle .heart-slot::before,.heart-toggle .heart-slot::after{
  content:"";
  position:absolute;width:14px;height:14px;
  background:var(--accent);
  border-radius:50%;
  top:0;
  opacity:0;
  transition:opacity .1s;
}
.heart-toggle .heart-slot::before{left:0;}
.heart-toggle .heart-slot::after{right:0;}
.heart-toggle.fav .heart-slot{background:var(--accent);border-color:var(--accent);}
.heart-toggle.fav .heart-slot::before,.heart-toggle.fav .heart-slot::after{opacity:1;}

/* buttons */
.btn-row{display:flex;gap:10px;margin-top:18px;}
.btn{
  flex:1;
  padding:13px;
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-weight:700;
  font-size:16px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.2);
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:active{box-shadow:0 1px 0 rgba(0,0,0,.2);transform:translateY(3px);}
.btn-danger{
  background:linear-gradient(180deg,var(--accent),#b93a37);
  color:#fff;
  flex:0 0 84px;
}
.btn-danger:active{box-shadow:0 1px 0 rgba(0,0,0,.2);transform:translateY(3px);}
.editing-badge{
  display:inline-block;
  font-size:11px;
  color:#fff;
  background:var(--primary);
  padding:2px 8px;
  border-radius:10px;
  margin-left:6px;
  vertical-align:middle;
  font-family:inherit;
}

/* ---- bottom tab bar ---- */
.tabbar{
  position:fixed;
  left:0;right:0;bottom:0;
  margin:0 auto;
  max-width:520px;
  z-index:20;
  display:flex;
  justify-content:space-between;
  gap:6px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,var(--denim-dark),var(--denim));
  border-top:2px solid rgba(0,0,0,.2);
  box-shadow:0 -2px 8px rgba(0,0,0,.25);
}
.tab{
  flex:1;
  background:none;border:none;padding:0;cursor:pointer;
  position:relative;
  text-align:center;
}
.tab-patch{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;
  background:repeating-linear-gradient(45deg,rgba(75,106,139,.35) 0 3px,rgba(75,106,139,.2) 3px 6px);
  border:1px solid rgba(30,45,65,.5);
  border-radius:8px 8px 3px 3px;
  color:#9fb2c5;
  font-size:11px;
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25);
  transform:translateY(0);
  transition:transform .12s ease, background .12s, color .12s, box-shadow .12s;
}
.tab-stitch{position:relative;}
.tab.active .tab-patch{
  transform:translateY(-6px);
  background:var(--secondary);
  color:var(--primary);
  box-shadow:0 5px 0 rgba(0,0,0,.2), var(--shadow);
  border-color:#fff;
}
.tab.active .tab-stitch::after{
  content:"";
  position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  width:14px;height:14px;
  background:radial-gradient(circle at 45% 35%,#ffe0a0,#c98e1f);
  border-radius:50%;
  border:2px solid #8f6a14;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}