/* Muslin — cutting mat craft tracker */
:root{
  --mat:#1e4e3b;
  --mat-dark:#173d2e;
  --paper:#f7f7f2;
  --ink:#2b2b28;
  --muted:#6f6a5e;
  --coral:#e07a5f;
  --teal:#3d8b86;
  --brad:#c9ccd1;
  --danger:#c0392b;
  --shadow:0 6px 16px rgba(0,0,0,.28);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--mat);
  color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.app{position:relative;height:100dvh;overflow:hidden;background:var(--mat)}

/* ---- cutting mat grid background ---- */
.mat{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(0,0,0,.12), transparent 55%),
    var(--mat);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px,100% 100%,100% 100%,100% 100%;
  pointer-events:none;
}

.screen{
  position:relative;z-index:1;
  height:100%;
  overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 96px);
  -webkit-overflow-scrolling:touch;
}
.view{display:block}
.view.hidden{display:none}

/* ---- mat header ---- */
.view-title-wrap{text-align:center;margin-bottom:18px}
.mat-title{
  margin:0;font-size:26px;letter-spacing:4px;color:#fdf7e8;
  font-weight:700;text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.mat-subtitle{margin:4px 0 0;color:rgba(247,247,242,.75);font-size:13px;font-style:italic;letter-spacing:1px}

/* ---- section labels ---- */
.section-label{
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(247,247,242,.85);
  margin:20px 0 10px;text-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* ---- circular paper counters with silver brad ---- */
.dashboard-counters{display:flex;gap:16px;justify-content:center;margin:6px 0 4px}
.paper-tag{
  position:relative;width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #ffffff, #f0efe6 70%);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(0,0,0,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:none;color:var(--ink);text-align:center;
}
.paper-tag .brad{
  position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #f5f7fa, var(--brad) 46%, #8f939a 78%);
  box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.8);
  z-index:1;
}
.paper-tag .brad::after{content:"";position:absolute;inset:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e9edf1, #a7abb2);
}
.count-num{font-size:40px;font-weight:800;line-height:1;color:var(--mat);z-index:0;margin-bottom:2px}
.count-label{font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;z-index:0}

/* ---- project cards: tissue paper ---- */
.card-list{display:flex;flex-direction:column;gap:14px}
.card{
  position:relative;
  background:var(--paper);
  border-radius:6px;
  padding:16px 16px 14px 22px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s ease;
}
.card:active{transform:scale(.99)}
/* subtle rotation per card via inline data rotation handled in JS */
.card:nth-child(3n+1){transform:rotate(-.6deg)}
.card:nth-child(3n+2){transform:rotate(.5deg)}
.card:nth-child(3n+3){transform:rotate(-.4deg)}

.card.pink{background:linear-gradient(135deg,#fde7ec,#f7cdd8)}
.card.blue{background:linear-gradient(135deg,#e4f0fb,#c9dff3)}
.card.yellow{background:linear-gradient(135deg,#fdf6e0,#f4e8b8)}

.card h3{margin:0 0 8px;font-size:18px;font-weight:500;color:var(--ink)}
.cursive,.card h3,.card .title-line{
  font-family:"Segoe Script","Brush Script MT","Comic Sans MS","Caveat",cursive;
}
.card .title-line{font-size:18px;font-weight:500;color:var(--ink);margin-bottom:8px}

.card .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{
  display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;
  letter-spacing:.4px;border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65);color:#444;
}
.badge.finished{background:#dcefe6;color:var(--mat-dark)}
.badge.inprogress{background:#fbe3d8;color:#8a3b20}
.badge.planning{background:#e9e7f5;color:#4b3d7d}

/* glass-head pin (coral or teal) */
.card .pin{
  position:absolute;top:6px;left:10px;
}
.card .pin::before{
  content:"";position:absolute;left:-7px;top:-7px;width:22px;height:22px;border-radius:50%;
  box-shadow:inset -3px -3px 6px rgba(0,0,0,.25), inset 2px 2px 4px rgba(255,255,255,.7), 0 3px 5px rgba(0,0,0,.35);
}
.card .pin::after{
  content:"";position:absolute;left:-2px;top:12px;width:2px;height:14px;background:linear-gradient(#c9ccd1,#9a9ea5);
  transform:rotate(15deg);border-radius:2px;
}
.card.pin-coral .pin::before{background:radial-gradient(circle at 32% 28%, #ff9f83, var(--coral) 60%, #b14f36)}
.card.pin-teal .pin::before{background:radial-gradient(circle at 32% 28%, #66c1bb, var(--teal) 60%, #1f5f5b)}
.card .pinhole{position:absolute;top:14px;left:18px;width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,.16);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}

.card .time{font-size:11px;color:var(--muted);margin-top:8px}
.card .notes-preview{font-size:12px;color:#5a5548;margin:8px 0 0;font-style:italic}

/* ---- empty state ---- */
.empty-state{text-align:center;padding:36px 12px;color:rgba(247,247,242,.85)}
.empty-state p{font-size:14px;line-height:1.5;margin:14px 0 0}
.pattern-piece.ghost{
  display:inline-block;width:120px;height:70px;border-radius:8px;transform:rotate(-6deg);
  border:2px dashed rgba(247,247,242,.5);position:relative;
}
.pattern-piece.ghost::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(247,247,242,.7) 0 8px,transparent 8px 14px)}

/* ---- search bar ---- */
.searchbar{position:sticky;top:0;z-index:5;padding-bottom:8px;margin-bottom:14px}
.searchbar input{
  width:100%;padding:12px 14px;border:none;border-radius:8px;
  background:rgba(247,247,242,.14);color:#fff;font-size:15px;
  outline:none;border:1px solid rgba(255,255,255,.18);
}
.searchbar input::placeholder{color:rgba(247,247,242,.55)}
.searchbar input:focus{border-color:var(--coral);background:rgba(247,247,242,.2)}

/* ---- form card ---- */
.form-card{
  background:var(--paper);border-radius:10px;padding:20px;box-shadow:var(--shadow);
  transform:rotate(.2deg);
}
.form-card label{display:block;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.form-card input,.form-card select,.form-card textarea{
  width:100%;padding:11px 12px;border:1px solid rgba(0,0,0,.15);border-radius:6px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);
}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(61,139,134,.18);
}
.field-error{color:var(--danger);font-size:12px;margin:4px 0 0;display:none}
.field-error.show{display:block}

.form-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.btn{
  flex:1;min-width:120px;padding:13px 14px;border:none;border-radius:8px;
  font-size:15px;font-weight:600;cursor:pointer;color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.btn-primary{background:var(--teal)}
.btn-coral{background:var(--coral)}
.btn-danger{background:var(--danger)}
.btn-ghost{background:#e5e3d8;color:#555}

.detail-notes{font-size:15px;line-height:1.5;margin:8px 0 0;color:#3d3a30}
.detail-time{font-size:12px;color:var(--muted);margin:10px 0 0}
.detail-actions{margin-top:22px}

/* ---- fabric FAB (thimble add) ---- */
.fab{
  position:fixed;z-index:20;
  bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  right:18px;
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 32% 28%, #f8fafc, #c7ccd3 55%, #9aa0a8);
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
}
.fab .thimble{
  width:44px;height:48px;border-radius:10px 10px 14px 14px;color:#7d828a;
  font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 28% 22%, #ffffff, #d5d9de 70%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.9);
}
.fab:active{transform:scale(.94)}

/* ---- fabric swatch tab bar ---- */
.tabbar{
  position:fixed;z-index:15;left:0;right:0;
  bottom:0;
  display:flex;background:#2a2a26;
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);
  box-shadow:0 -4px 14px rgba(0,0,0,.35);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:none;color:#b8b4a6;cursor:pointer;padding:4px 2px;position:relative;
}
.tab.active{color:var(--coral)}
.tab.active::before{
  content:"";position:absolute;top:-9px;left:12%;right:12%;height:5px;border-radius:3px;
  background:repeating-linear-gradient(45deg,var(--coral) 0 4px,transparent 4px 7px);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.tab-icon{
  width:38px;height:34px;border-radius:6px;color:#2a2a26;
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.tab-label{font-size:10px;letter-spacing:.3px;text-transform:uppercase}

/* fabric textures */
.fabric.linen{
  background-color:#cbb89a;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px),
                   repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px);
}
.fabric.denim{
  background-color:#4a6a8a;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 2px,transparent 2px 4px),
                   repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);
  color:#e8eef6;
}
.fabric.knit{
  background-color:#8fb8a8;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.25) 0 2px,transparent 2px 5px);
  color:#21443a;
}
.fabric.canvas{
  background-color:#c69c7c;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 2px,transparent 2px 5px),
                   repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,transparent 2px 6px);
  color:#5a3a24;
}
.tab.active .tab-icon{box-shadow:0 0 0 2px var(--coral)}

.hidden{display:none !important}