/* ===== Buttoned — surface.css ===== */
:root{
  --primary:#5d4a37;
  --accent:#b5838d;
  --secondary:#e8d5c4;
  --ink:#3a2c1f;
  --muted:#8a7a66;
  --rose:#b5838d;
  --terra:#c96f4a;
  --cream:#e8d5c4;
  --walnut:#5d4a37;
  --paper:#fbf3e6;
  --line:#dcc9b1;
  --shadow:0 10px 24px rgba(60,40,20,.35);
  --radius:14px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(150,110,70,.25), transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(150,110,70,.18), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.03) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.03) 5px 6px),
    #7a5a3a;
  background-size:auto,auto,auto,auto,auto;
}
.app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;}

/* ===== Views ===== */
.views{flex:1;padding:var(--sat) 0 0;overflow-y:auto;}
.view{display:none;padding:16px 14px calc(96px + var(--sab) + 16px);}
.view.active{display:block;animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ===== Notepad ===== */
.notepad{
  position:relative;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(180deg,#d8bfa2,#c2a584) border-box;
  border:1px solid transparent;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 16px 20px;
}
.notepad::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:22px;
  background:repeating-linear-gradient(0deg, transparent 0 10px, var(--line) 10px 11px, transparent 11px 12px);
  border-bottom:1px dashed var(--line);
  opacity:.7;pointer-events:none;
}
.minihead{
  margin:18px 0 10px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}

/* ===== Spool counters ===== */
.spools{display:flex;justify-content:space-around;gap:8px;padding-top:14px;}
.spool{width:70px;display:flex;flex-direction:column;align-items:center;}
.spool-thread{
  width:52px;height:14px;border-radius:7px 7px 2px 2px;position:relative;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 2px, transparent 2px 5px);
}
.spool[data-accent="rose"] .spool-thread{background-color:var(--rose);}
.spool[data-accent="terra"] .spool-thread{background-color:var(--terra);}
.spool[data-accent="cream"] .spool-thread{background-color:#caa37e;}
.spool-body{
  width:52px;height:46px;margin-top:2px;border-radius:4px;
  background:linear-gradient(90deg,#a8805a,#d9b28c 45%,#b0865e);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.28), 0 6px 10px rgba(50,30,10,.35);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.spool-body::before,.spool-body::after{
  content:"";position:absolute;left:0;right:0;height:7px;background:#6f4f2f;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.3);
}
.spool-body::before{top:-1px;border-radius:3px 3px 0 0;}
.spool-body::after{bottom:-1px;border-radius:0 0 3px 3px;}
.spool-num{
  font-weight:800;font-size:1.35rem;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  position:relative;z-index:1;
}
.spool-labels{display:flex;justify-content:space-around;margin:10px 0 4px;font-size:.72rem;color:var(--muted);text-align:center;font-weight:600;}
.spool-labels span{width:70px;}

/* ===== Quick action ===== */
.action{
  display:block;width:100%;margin:6px 0 2px;padding:13px;border:none;border-radius:10px;
  background:linear-gradient(180deg,#c97a5c,#b3603f);
  color:#fff;font-weight:700;font-size:1rem;box-shadow:0 4px 0 rgba(120,60,35,.5), 0 6px 12px rgba(0,0,0,.18);
  cursor:pointer;transition:transform .08s;
}
.action:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,60,35,.5);}

/* ===== Garment tag ===== */
.taglist{display:flex;flex-direction:column;gap:14px;}
.tag{position:relative;background:#d7b58b;border-radius:10px;padding:4px 4px 0;box-shadow:0 6px 12px rgba(80,50,20,.28);}
.tag-string{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:2px;height:20px;background:#d8c8aa;
}
.tag-string::before{content:"";position:absolute;bottom:-5px;left:-3px;width:8px;height:9px;border-radius:50%;background:#f2ecd9;box-shadow:0 2px 3px rgba(0,0,0,.3);}
.tag-card{background:linear-gradient(180deg,#efdfc3,#e3cdab);border-radius:8px;padding:10px 12px;border:1px solid #c8a87f;position:relative;}
.tag-pin{position:absolute;top:6px;right:6px;width:14px;height:16px;background:#8d6b3f;border-radius:2px;opacity:.9;}
.tag-pin::after{content:"";position:absolute;top:5px;left:2px;width:10px;height:2px;background:#5d4a37;}
.tag-name{font-size:1rem;font-weight:700;color:#33251a;font-family:"Marker Felt","Segoe Print",cursive;padding-right:26px;line-height:1.2;}
.tag-name:empty::before{content:"Untitled";color:#b09a78;}
.tag-date{font-family:Georgia,"Times New Roman",serif;font-size:.8rem;letter-spacing:.14em;color:#7a5c38;margin-top:4px;text-transform:uppercase;}
.tag-items{font-size:.82rem;color:#6f5a3f;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tag-actions{display:flex;gap:6px;margin-top:8px;}
.btn{
  flex:1;padding:8px;border:none;border-radius:7px;font-weight:600;font-size:.82rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:filter .12s;
}
.btn:active{filter:brightness(.92);}
.btn.edit{background:#e2ccae;color:#5a4426;box-shadow:inset 0 0 0 1px #c8a87f;}
.btn.del{background:#f0d0c4;color:#8f3d2a;box-shadow:inset 0 0 0 1px #ddb3a2;}
.btn.fav{border:1px solid #c8a87f;background:rgba(255,255,255,.35);color:#6f5a3f;}
.btn.fav.active{background:var(--rose);color:#fff;border-color:var(--rose);}
.heart{display:inline-block;font-style:normal;}

/* fabric heart patch */
.patch{
  position:absolute;top:-6px;left:10px;width:20px;height:18px;color:var(--rose);
  transform:rotate(-8deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.patch svg{width:100%;height:100%;display:block;}

/* ===== Search ===== */
.searchbar{
  position:relative;display:flex;align-items:center;margin-top:14px;
  background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  box-shadow:0 2px 0 rgba(120,80,40,.1);
}
.search-ico{position:relative;width:34px;height:20px;}
.search-ico::before{
  content:"";position:absolute;left:10px;top:3px;width:10px;height:10px;border:2px solid var(--muted);border-radius:50%;
}
.search-ico::after{
  content:"";position:absolute;left:19px;top:13px;width:6px;height:2px;background:var(--muted);transform:rotate(45deg);
}
.searchbar input{
  flex:1;border:none;outline:none;padding:11px 10px 11px 0;font-size:1rem;background:transparent;color:var(--ink);
}

/* ===== Empty state ===== */
.empty{color:var(--muted);font-size:.9rem;text-align:center;padding:24px 10px;line-height:1.5;}
.empty em{font-style:normal;color:var(--terra);font-weight:700;}

/* ===== Form ===== */
.form-pad{padding-top:22px;}
.field{display:block;margin-bottom:14px;}
.field>span{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.03em;}
.field .opt{font-weight:400;color:#b6a384;}
.field input,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:1rem;
  background:#fff;color:var(--ink);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.05);
}
.field textarea{resize:vertical;font-family:inherit;}
.field input:focus,.field textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(181,131,141,.18);}
.field .error{color:#b3402c;font-size:.78rem;margin-top:5px;display:block;}
.field.invalid input,.field.invalid textarea{border-color:#c96f4a;}

/* toggle */
.toggle{display:flex;align-items:center;gap:10px;margin:6px 0 16px;cursor:pointer;}
.toggle input{position:absolute;opacity:0;pointer-events:none;}
.toggle-track{
  width:48px;height:27px;border-radius:14px;background:#d8c3a8;position:relative;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.15);transition:background .2s;
}
.toggle-knob{
  position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 3px rgba(0,0,0,.25);transition:transform .2s;
}
.toggle input:checked + .toggle-track{background:var(--rose);}
.toggle input:checked + .toggle-track .toggle-knob{transform:translateX(21px);}
.toggle-label{font-size:.92rem;font-weight:600;color:var(--ink);}
.toggle input:focus-visible + .toggle-track{box-shadow:0 0 0 3px rgba(181,131,141,.3);}

.form-actions{display:flex;gap:10px;margin-top:4px;}
.btn.solid{
  flex:1;padding:13px;border-radius:10px;border:none;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;
  background:linear-gradient(180deg,#c97a5c,#b3603f);box-shadow:0 4px 0 rgba(120,60,35,.5);
}
.btn.solid:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,60,35,.5);}
.btn.ghost{
  flex:1;padding:13px;border-radius:10px;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-weight:600;font-size:1rem;cursor:pointer;
}

/* ===== Bottom tab bar: chalk-box tray ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  max-width:520px;margin:0 auto;
  padding:6px 8px calc(6px + var(--sab));
  background:linear-gradient(180deg,#6f5437,#5a412a);
  border-top:1px solid #7c613f;
  box-shadow:0 -6px 16px rgba(30,20,5,.45);
  display:flex;justify-content:space-between;gap:4px;
}
.tabbar::before{
  content:"";position:absolute;top:6px;left:8px;right:8px;height:1px;
  background:rgba(255,255,255,.12);
}
.tab{
  flex:1;background:none;border:none;color:#d9c4a2;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 2px 3px;font-size:.62rem;font-weight:700;letter-spacing:.02em;position:relative;
  transition:color .2s;
}
.tab-ico{width:44px;height:44px;display:block;border-radius:5px;position:relative;}
/* chalk stick */
.tab-ico::before{
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:34px;height:34px;border-radius:5px 5px 4px 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(0,0,0,.12));
  box-shadow:inset -2px 0 3px rgba(0,0,0,.2), inset 2px 0 3px rgba(255,255,255,.4);
}
.tab-ico::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:34px;height:5px;border-radius:2px 2px 4px 4px;}

/* chalk colors */
.tab[data-chalk="rose"] .tab-ico::after{background:var(--rose);}
.tab[data-chalk="terra"] .tab-ico::after{background:var(--terra);}
.tab[data-chalk="cream"] .tab-ico::after{background:var(--cream);}
.tab[data-chalk="walnut"] .tab-ico::after{background:#6f4f2f;}

/* active: worn down, smudged, shorter */
.tab.active{color:#fff;}
.tab.active .tab-ico::before{height:26px;width:30px;bottom:4px;filter:brightness(.92);}
.tab.active .tab-ico::after{height:6px;transform:translateX(-50%) rotate(-6deg);filter:brightness(.85) drop-shadow(0 2px 2px rgba(0,0,0,.4));}
.tab.active .tab-ico{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));}

@media (max-width:340px){
  .tab{font-size:.56rem;}
  .tab-ico{width:38px;height:38px;}
  .tab-ico::before{width:30px;height:30px;}
  .tab-ico::after{width:30px;}
}