/* ══════════════════════════════════════════════════════════
   TuftLab — Design System De School — Base CSS partagé
   ══════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── VARIABLES ── */
:root{
  --bg:#f4f1eb;
  --ink:#111110;
  --dim:#888480;
  --rule:#bbb8b0;
  --green:#1a5c2a;
  --red:#cc2200;
  --amber:#a85c20;
  --blue:#1a4fff;
  --border:1px solid var(--ink);
  --sans:'Archivo Narrow','Arial Narrow',sans-serif;
  --mono:'DM Mono',monospace;
  --serif-it:'Playfair Display',Georgia,serif;
  /* compat aliases */
  --cream:var(--bg);
  --cream2:#ece9e2;
  --cream3:#dedad2;
  --text:var(--ink);
  --muted:var(--dim);
  --muted2:var(--rule);
  --accent:var(--ink);
  --line:rgba(17,17,16,.1);
  --line2:rgba(17,17,16,.15);
  --orange:var(--amber);
}

/* ── BASE ── */
html,body{min-height:100%;background:var(--bg);}
body{font-family:var(--sans);color:var(--ink);font-size:11px;}

/* ── TOPBAR ── */
.topbar{
  z-index:200;
  display:grid;grid-template-columns:80px 1fr auto;
  border-bottom:var(--border);height:40px;background:var(--bg);
}
.tb-logo-cell{
  border-right:var(--border);
  display:flex;align-items:center;justify-content:center;
  padding:6px;flex-shrink:0;
}
.tb-logo{
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  line-height:1.2;text-align:center;cursor:pointer;
}
.tb-nav-cell{
  display:flex;align-items:center;padding:0 8px;
  border-right:var(--border);overflow:hidden;gap:0;
}
.tnav{
  font-family:var(--sans);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
  padding:0 14px;height:100%;display:flex;align-items:center;
  cursor:pointer;background:none;border:none;white-space:nowrap;
  transition:background .1s;
}
.tnav:hover{background:rgba(17,17,16,.05);}
.tnav.active{background:var(--ink);color:var(--bg);}
.tnav .beta-tag{
  font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;
  background:var(--red);color:var(--bg);
  padding:1px 4px;line-height:1;vertical-align:middle;margin-left:5px;
}
.tb-right-cell{
  display:flex;align-items:center;padding:0 12px;
  gap:8px;flex-wrap:nowrap;overflow:hidden;
}
.tnav-out{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
  background:none;border:none;cursor:pointer;transition:color .1s;
}
.tnav-out:hover{color:var(--ink);}

/* ── SOUS-NAV ── */
.subnav{
  z-index:199;
  height:32px;background:var(--cream2);border-bottom:var(--border);
  display:flex;align-items:center;padding:0 8px;gap:0;
}
.snav{
  font-family:var(--sans);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);text-decoration:none;
  padding:0 14px;height:100%;display:flex;align-items:center;
  cursor:pointer;background:none;border:none;white-space:nowrap;
  transition:color .1s;
}
.snav:hover{color:var(--ink);}
.snav.active{color:var(--ink);border-bottom:2px solid var(--ink);}

/* ── NOTIFICATION BADGES ── */
.notif-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:15px;height:15px;padding:0 4px;
  background:var(--red);color:white;
  font-family:var(--mono);font-size:8px;font-weight:700;
  letter-spacing:0;border-radius:2px;margin-left:5px;
  vertical-align:middle;line-height:15px;
}
.nav-badge{
  display:none;margin-left:4px;
  min-width:14px;height:14px;border-radius:7px;
  background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:7px;font-weight:500;
  line-height:14px;text-align:center;padding:0 3px;
}

/* ── PAGE LAYOUT ── */
.layout{display:flex;min-height:100vh;}
.main{margin-top:40px;flex:1;padding:32px 48px 80px;}
.main--subnav{margin-top:72px;}
.page-header{
  display:flex;align-items:center;
  justify-content:space-between;margin-bottom:28px;
}
.page-title{
  font-family:var(--sans);font-size:22px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;
}

/* ── BUTTONS ── */
.new-btn{
  display:flex;align-items:center;gap:8px;
  padding:0 16px;height:28px;
  background:var(--ink);color:var(--bg);border:none;
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:opacity .1s;
}
.new-btn:hover{opacity:.8;}
.new-btn.ghost{background:var(--cream2);color:var(--ink);border:var(--border);}
.new-btn.ghost:hover{background:var(--cream3);opacity:1;}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:20px;right:20px;
  background:var(--ink);color:var(--bg);
  padding:6px 14px;
  font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;
  z-index:999;transform:translateY(40px);opacity:0;
  transition:.2s;pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.ok,.toast.green{background:var(--green);}
.toast.err{background:var(--red);}
.toast.autosave{background:var(--dim);font-size:8px;padding:4px 10px;letter-spacing:.08em;}

/* ── MODAL / OVERLAY ── */
.overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(244,241,235,.92);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
}
.overlay.open{display:flex;}
.modal-box{
  background:var(--bg);border:var(--border);
  padding:24px;width:380px;max-width:95vw;position:relative;
}
.modal-title{
  font-family:var(--sans);font-size:1.1rem;font-weight:700;
  text-transform:uppercase;margin-bottom:16px;
}
.modal-x{
  position:absolute;top:10px;right:12px;
  background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.modal-x:hover{color:var(--ink);}

/* ── TABLES ── */
.qt{width:100%;border-collapse:collapse;}
.qt th{
  font-family:var(--mono);font-size:8.5px;font-weight:400;
  text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  padding:7px 12px;text-align:left;border-bottom:var(--border);
}
.qt td{
  padding:11px 12px;border-bottom:1px solid var(--rule);
  font-size:11px;vertical-align:middle;
}
.qt tr:hover td{background:var(--cream2);cursor:pointer;}
.qt tr.no-hover:hover td{background:transparent;cursor:default;}
.qt tr:last-child td{border-bottom:none;}

/* ── CATEGORY SECTIONS ── */
.cat-section{margin-bottom:40px;}
.cat-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;padding-bottom:10px;border-bottom:var(--border);
}
.cat-title{
  font-family:var(--sans);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.cat-count{
  font-family:var(--mono);font-size:9px;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;
}
.cat-hint{font-family:var(--mono);font-size:9px;color:var(--dim);margin-left:auto;}

/* ── MENTION / INFO BOX ── */
.mention{
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--dim);background:var(--cream2);border:var(--border);
  padding:8px 14px;margin-bottom:16px;line-height:1.7;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--rule);}

/* ══════════════════════════════════════════════════════════
   SENSORY FEEDBACK SYSTEM
   ══════════════════════════════════════════════════════════ */

/* ── Flash backgrounds ── */
@keyframes flashGreen { 0%{background:rgba(93,228,199,.15)} 100%{background:transparent} }
@keyframes flashRed   { 0%{background:rgba(255,107,107,.12)} 100%{background:transparent} }
@keyframes flashWhite { 0%{background:rgba(255,255,255,.6)}  100%{background:transparent} }
.flash-save    { animation: flashGreen .4s ease-out; }
.flash-delete  { animation: flashRed .35s ease-out; }
.flash-analyze { animation: flashWhite .25s ease-out; }

/* ── Value change pulse ── */
@keyframes valPulse { 0%{transform:scale(1.03);opacity:.6} 100%{transform:scale(1);opacity:1} }
.val-changed { animation: valPulse .25s ease-out; }

/* ── Micro-shake (delete, error) ── */
@keyframes microShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.shake { animation: microShake .15s ease-in-out; }

/* ── Button depth (opt-in via .btn-depth) ── */
.btn-depth {
  transition: transform .1s, box-shadow .1s, background .15s;
}
.btn-depth:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.btn-depth:active {
  transform: translateY(1px);
  box-shadow: none;
  transition-duration: .05s;
}

/* ── Input focus glow (opt-in via .input-glow) ── */
.input-glow {
  transition: border-color .15s, box-shadow .15s;
}
.input-glow:focus {
  border-color: var(--ink);
  box-shadow: inset 0 1px 4px rgba(17,17,16,.06);
  outline: none;
}

/* ── Toast spring entrance (opt-in: add .toast-spring to toast div) ── */
@keyframes toastIn {
  0%   { opacity:0; transform:translateY(16px); }
  60%  { opacity:1; transform:translateY(-4px); }
  100% { opacity:1; transform:translateY(0); }
}
.toast.toast-spring.show {
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ── Swatch pulse on recalc ── */
@keyframes swatchPulse { 0%{transform:scale(1.15)} 100%{transform:scale(1)} }
.swatch-pulse { animation: swatchPulse .3s ease-out; }

/* ── Sparkline stagger build ── */
@keyframes barGrow { 0%{height:0} 100%{height:var(--h)} }
.spark-bar {
  animation: barGrow .3s ease-out backwards;
  animation-delay: var(--d);
}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  .topbar{grid-template-columns:60px 1fr auto;}
  .tb-logo-cell{padding:4px;}
  .tb-logo{font-size:8px;}
  .tnav{padding:0 8px;font-size:9px;}
  .tnav .beta-tag{display:none;}
  .subnav{padding:0 4px;}
  .snav{padding:0 8px;font-size:9px;}
  .main,.main--subnav{padding:24px 16px 60px;}
}