/* ===== Bisque — Potter's Bench theme ===== */
:root{
  --accent:#2c5f6e;
  --primary:#cb6d51;
  --primary-dark:#b0573f;
  --secondary:#e8d5b5;
  --clay:#e9d7bd;
  --clay-light:#f4e6cd;
  --clay-deep:#b99b76;
  --ink:#3a2d22;
  --ink-soft:#6b5944;
  --wood:#a97e52;
  --wood-dark:#8a6440;
  --shadow:0 8px 18px rgba(60,40,20,.18);
  --radius:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:ui-rounded,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#7a5c3a;
  color:var(--ink);
  overscroll-behavior:none;
  line-height:1.4;
}
/* wood workbench base */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 90px),
    linear-gradient(180deg,#8a6440,#6f4f31 60%,#5f4228);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.06),transparent 60%);
}

#app{display:flex;flex-direction:column;min-height:100dvh;max-width:520px;margin:0 auto}

/* apron canvas */
#content{
  flex:1;
  position:relative;
  background:
    radial-gradient(circle at 18% 8%, rgba(203,109,81,.16), transparent 32%),
    radial-gradient(circle at 84% 20%, rgba(232,213,181,.22), transparent 30%),
    radial-gradient(circle at 40% 96%, rgba(44,95,110,.12), transparent 34%),
    linear-gradient(180deg,var(--clay-light),var(--clay) 55%,var(--clay-deep));
  background-color:var(--clay-light);
  padding:12px 14px calc(96px + env(safe-area-inset-bottom));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), var(--shadow);
}
/* loose threads along apron edge */
#content::before{
  content:"";position:absolute;left:6px;right:6px;top:6px;height:10px;
  background:repeating-linear-gradient(90deg,var(--clay-deep) 0 3px, transparent 3px 14px);
  opacity:.5;border-radius:4px;
}

.apron-tag{display:flex;align-items:baseline;gap:8px;padding:14px 16px 4px}
.apron-pocket{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;font-size:26px;letter-spacing:1px;
  color:var(--clay-light);
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.apron-sub{font-size:12px;color:var(--clay);opacity:.75;letter-spacing:.5px}

/* ===== Dashboard ===== */
.studio h2,.list-screen h2{margin:4px 0 12px;font-size:15px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.slab{background:var(--clay-light);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.4)}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.counter{
  position:relative;background:#d9bf9c;border-radius:12px;padding:14px 6px 26px;text-align:center;
  box-shadow:inset 0 2px 6px rgba(90,60,20,.28),0 4px 8px rgba(60,30,10,.15);
}
.counter .digit{
  font-family:Georgia,serif;font-weight:700;font-size:40px;line-height:1;
  color:#5a4330;text-shadow:0 2px 0 rgba(255,255,255,.25),0 3px 4px rgba(60,30,10,.3);
}
.counter .wood-tag{
  position:absolute;left:6px;right:6px;bottom:6px;
  background:linear-gradient(180deg,var(--wood),var(--wood-dark));
  color:#f3e6d0;font-size:10px;font-weight:700;letter-spacing:.5px;
  padding:3px 2px;border-radius:5px;text-transform:uppercase;
  box-shadow:0 2px 3px rgba(0,0,0,.2);
}

.start-btn{
  width:100%;margin-top:14px;padding:16px;
  background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  color:#fff8ee;font-size:17px;font-weight:700;letter-spacing:.5px;
  border:none;border-radius:14px;cursor:pointer;
  box-shadow:0 6px 12px rgba(120,60,30,.3),inset 0 1px 0 rgba(255,255,255,.35);
}
.start-btn:active{transform:translateY(2px);box-shadow:0 3px 6px rgba(120,60,30,.3)}

.recent-title{margin:20px 0 10px;font-size:14px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:1px}
.recent{display:flex;flex-direction:column;gap:10px}

/* ===== Clay tablet cards ===== */
.piece-card{
  position:relative;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--clay-light),var(--clay));
  border-radius:12px;padding:12px 12px 12px 18px;
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.45);
  overflow:hidden;cursor:pointer;
}
.piece-card::before{
  content:"";position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(90,60,20,.14),transparent 70%);
}
/* thumbprint indentation in corner */
.piece-card .thumb{
  position:absolute;top:6px;right:6px;width:14px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(60,40,20,.12), rgba(60,40,20,.20) 60%, transparent 70%);
  box-shadow:inset 0 0 4px rgba(60,40,20,.25);
}
.piece-body{flex:1;min-width:0}
.piece-name{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px}
.piece-clay{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.piece-notes{font-size:11.5px;color:var(--ink-soft);opacity:.7;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* status cone icon */
.cone{flex:0 0 auto;width:20px;height:22px;position:relative}
.cone::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);}
.cone::after{content:"";position:absolute;left:50%;bottom:0;width:24px;height:5px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.18);filter:blur(1px)}
.cone.wet::before{background:#b9b9b9}
.cone.wet::after{background:#9a9a9a}
.cone.bisque::before{background:#e08a3c}
.cone.bisque::after{background:#c5712a}
.cone.glaze::before{background:#4aa8d8;box-shadow:0 0 6px rgba(74,168,216,.6)}
.cone.glaze::after{background:#318cb8}

/* ===== List screen ===== */
.search-wrap{position:relative;margin:6px 0 14px}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5}
.search{
  width:100%;padding:12px 12px 12px 40px;border:2px solid var(--clay-deep);border-radius:12px;
  background:var(--clay-light);font-size:15px;color:var(--ink);outline:none;
  box-shadow:inset 0 2px 5px rgba(90,60,20,.12);
}
.search:focus{border-color:var(--primary)}

.list-empty{text-align:center;color:var(--ink-soft);padding:34px 10px;font-size:14px}
.list-empty .big{font-size:40px;display:block;margin-bottom:8px;opacity:.5}

/* ===== Form ===== */
.form{padding-bottom:8px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft);margin-bottom:6px}
.field label .req{color:var(--primary)}
.field input,.field select,.field textarea{
  width:100%;padding:13px;border:2px solid var(--clay-deep);border-radius:12px;
  background:var(--clay-light);font-size:15px;color:var(--ink);font-family:inherit;outline:none;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.stage-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stage-pill{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;
  border:2px solid var(--clay-deep);border-radius:12px;background:var(--clay-light);cursor:pointer;
  font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;
}
.stage-pill .cone{width:16px;height:18px}
.stage-pill.active{border-color:var(--primary);background:rgba(203,109,81,.12);color:var(--primary-dark)}
.err{color:#a94442;font-size:12px;margin-top:5px;min-height:16px}
.actions{display:flex;gap:10px;margin-top:6px}
.btn{
  flex:1;padding:15px;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;
}
.btn-save{background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff8ee;box-shadow:0 5px 10px rgba(120,60,30,.28)}
.btn-danger{background:#d8bfa0;color:#7a2f1f;border:2px solid #c39a78}
.btn:active{transform:translateY(1px)}

.back-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.back-btn{background:none;border:none;color:var(--ink-soft);font-size:14px;font-weight:600;cursor:pointer;padding:6px 4px}
.form-title{font-size:18px;font-weight:700;color:var(--ink)}

/* ===== Bottom tab bar (clay ledge) ===== */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:520px;
  display:flex;justify-content:space-around;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#d8bd99,#c3a077);
  box-shadow:0 -4px 16px rgba(60,30,10,.35),inset 0 2px 0 rgba(255,255,255,.35);
  z-index:50;
}
.tabbar::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;pointer-events:none;
  background:radial-gradient(ellipse at 20% 0%,rgba(60,40,20,.22) 0 3px,transparent 4px) repeat-x 0 0/44px 8px,
             radial-gradient(ellipse at 80% 0%,rgba(120,70,30,.25) 0 2px,transparent 3px) repeat-x 0 0/60px 8px;
  opacity:.6;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;padding:2px 4px 6px;color:var(--ink-soft);
}
.tab .tool{width:34px;height:34px;display:block;transition:transform .18s ease,filter .18s ease}
.tab-label{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.tab.active .tool{transform:translateY(-7px)}
.tab.active .tool g,.tab.active .tool rect,.tab.active .tool circle,.tab.active .tool path,.tab.active .tool use{filter:none}
.tab.active{color:var(--primary-dark)}
/* clay smudge on active handle + drop shadow */
.tab.active .tool{filter:drop-shadow(0 5px 4px rgba(60,30,10,.35)) drop-shadow(0 0 0 0 transparent)}
.tab.active::after{
  content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:22px;height:6px;border-radius:50%;background:rgba(60,30,10,.22);filter:blur(1px);
}

@media (min-width:521px){
  #content{padding-left:20px;padding-right:20px}
}