:root{
  --primary:#2c3e50;
  --secondary:#e86a17;
  --accent:#f3b27d;
  --ink:#2b2620;
  --paper:#f4ead6;
  --paper-line:#e3d4b6;
  --smudge:rgba(120,80,30,.18);
  --rag:#b03a2e;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:"Courier New",Courier,monospace;
  color:var(--ink);
  background:#2a2723;
  overflow:hidden;
}

/* metal workbench */
.bench{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #6b6b6d 0%, #4c4c4f 40%, #343437 100%);
}
.bench::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px);
}

/* notebook */
.notebook{
  position:relative;z-index:1;
  height:100%;
  max-width:460px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:calc(10px + var(--safe-top)) 12px calc(84px + var(--safe-bottom)) 12px;
}

.book-head{
  background:linear-gradient(180deg,#23272c,#1a1e23);
  color:#d8cfc0;border-radius:10px 10px 0 0;
  padding:18px 14px 12px;
  position:relative;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.5);
}
.title{margin:0;font-size:22px;letter-spacing:2px;color:var(--accent);text-align:center;}
.subtitle{margin:2px 0 0;font-size:10px;text-align:center;letter-spacing:1px;color:#8b8a88;}
.spiral{display:flex;justify-content:space-between;margin-bottom:8px;}
.spiral span{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c9ccd1,#7c8086 60%,#56595f);box-shadow:inset 0 -2px 2px rgba(0,0,0,.5);}

.pages{
  flex:1;overflow-y:auto;overflow-x:hidden;
  background:var(--paper);
  background-image:
    linear-gradient(var(--paper) 28px, var(--paper-line) 29px, transparent 30px);
  background-size:100% 30px;
  border-left:4px double #b6a47f;
  border-right:4px double #b6a47f;
  box-shadow:inset 0 0 18px rgba(90,60,20,.25);
  padding:14px 14px 40px;
  -webkit-overflow-scrolling:touch;
}
.page{display:none;}
.page.active{display:block;animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* washers */
.washers{display:flex;gap:12px;margin:6px 0 14px;}
.washer{
  flex:1;position:relative;
  background:radial-gradient(circle at 35% 30%, #b7b9bd, #6f7176 55%, #4d4f53 100%);
  border-radius:50%;aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 6px 0 #3a3c40, 0 8px 10px rgba(0,0,0,.4), inset 0 0 6px rgba(255,255,255,.25);
}
.washer-hole{position:absolute;width:32%;height:32%;border-radius:50%;background:radial-gradient(circle at 40% 35%, #383a3e, #56585c 70%, #45474b);box-shadow:inset 0 2px 3px rgba(0,0,0,.6);}
.washer-num{position:relative;font-size:30px;font-weight:700;color:#222;text-shadow:1px 1px 0 rgba(255,255,255,.35);}
.washer label{position:relative;font-size:9px;letter-spacing:1px;color:#1d1f22;text-transform:uppercase;margin-top:2px;text-align:center;}

.quick-add{
  width:100%;padding:14px;margin-bottom:16px;
  font-family:inherit;font-size:14px;font-weight:700;
  color:#fff;background:var(--secondary);
  border:none;border-radius:6px;
  box-shadow:0 4px 0 #b34f0e, inset 0 1px 0 rgba(255,255,255,.35);
  cursor:pointer;
}
.quick-add:active{transform:translateY(2px);box-shadow:0 2px 0 #b34f0e;}

.section-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#6d5c3a;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:4px;margin:0 0 10px;}

/* record cards: torn notebook pages */
.card{
  position:relative;
  background:#fbf3e2;
  border:1px solid #d9c9a8;
  border-radius:4px 12px 12px 4px;
  padding:12px 14px 12px 30px;
  margin-bottom:12px;
  box-shadow:0 2px 4px rgba(60,40,10,.18);
  cursor:pointer;
  overflow:hidden;
}
.card::before{ /* torn left edge */
  content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(120,80,30,.35) 3px 4px);
}
.card::after{ /* punch hole */
  content:"";position:absolute;left:8px;top:12px;width:9px;height:9px;border-radius:50%;
  background:#cbbfa0;border:1px solid #b8a97f;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4);
}
.card .oil{ /* smear */
  content:"";position:absolute;right:-10px;bottom:-8px;width:80px;height:50px;
  background:radial-gradient(ellipse at 40% 45%, rgba(70,50,20,.20), transparent 65%);
  border-radius:50%;transform:rotate(-15deg);
}
.card.dried .oil{background:radial-gradient(ellipse at 40% 45%, rgba(55,35,10,.28), transparent 60%);}
.card .drop{
  position:absolute;top:10px;right:12px;width:16px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  transform:rotate(8deg);
}
.card.fresh .drop{background:radial-gradient(circle at 35% 30%, #ffcf6b, var(--secondary) 70%);box-shadow:0 1px 3px rgba(0,0,0,.35);}
.card.dried .drop{background:#3c2a10;opacity:.85;}
.drop-meta{position:absolute;top:32px;right:10px;font-size:8px;color:#7a6a4a;letter-spacing:.5px;}

.card .c-date{font-size:13px;font-weight:700;color:var(--primary);}
.card .c-mile{font-size:13px;color:#2f57b5;font-family:inherit;font-style:italic;}
.card .c-type{
  display:inline-block;margin-top:4px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:#5a4630;
  border:2px solid #5a4630;border-radius:2px;padding:1px 6px;
  transform:rotate(-2deg);box-shadow:0 1px 0 rgba(0,0,0,.3);
}
.card .c-notes{margin-top:6px;font-size:11px;color:#6d5c3a;font-style:italic;}
.card .del{
  position:absolute;bottom:6px;right:8px;width:22px;height:22px;border-radius:50%;
  background:rgba(163,50,42,.12);color:#a3322a;border:1px solid rgba(163,50,42,.4);
  font-size:13px;line-height:1;cursor:pointer;font-family:inherit;
}
.card .del:active{background:rgba(163,50,42,.25);}
.card.empty{
  cursor:default;text-align:center;color:#7a6a4a;background:#efe3c9;
}
.card.empty .c-type{border:none;transform:none;letter-spacing:normal;text-transform:none;font-weight:normal;}

/* search */
.search-wrap{position:sticky;top:0;z-index:5;background:var(--paper);padding:6px 0 10px;border-bottom:2px solid rgba(0,0,0,.08);}
#log-search{
  width:100%;padding:11px 12px;font-family:inherit;font-size:13px;
  background:#fff;border:2px solid #c9b793;border-radius:6px;color:var(--ink);
}
#log-search:focus{outline:none;border-color:var(--secondary);}

/* fab */
.fab{
  position:sticky;bottom:8px;left:100%;display:block;width:56px;height:56px;border-radius:50%;
  background:var(--secondary);color:#fff;font-size:30px;line-height:1;
  border:none;box-shadow:0 5px 0 #b34f0e, 0 8px 12px rgba(0,0,0,.3);cursor:pointer;
  margin-left:auto;transform:translateX(14px);
}
.fab:active{transform:translateX(14px) translateY(3px);box-shadow:0 2px 0 #b34f0e;}

/* upcoming smudged notes */
.note{
  background:#f6ecda;border:1px dashed #c9b793;border-radius:4px;
  padding:12px;margin-bottom:12px;
  box-shadow:inset 0 0 8px rgba(120,80,30,.12);
}
.note.smudge{transform:rotate(-.4deg);}
.note .n-title{font-size:13px;font-weight:700;color:var(--primary);}
.note .n-due{font-size:12px;color:#2f57b5;margin-top:3px;}
.note .n-status{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7a6a4a;margin-top:3px;}
.note button{
  margin-top:8px;width:100%;padding:9px;font-family:inherit;font-size:12px;font-weight:700;
  color:#fff;background:var(--secondary);border:none;border-radius:4px;cursor:pointer;
  box-shadow:0 3px 0 #b34f0e;
}
.note button:active{transform:translateY(2px);box-shadow:0 1px 0 #b34f0e;}

/* page hint */
.page-hint{font-size:11px;color:#7a6a4a;font-style:italic;margin:0 0 12px;}

/* data plate */
.data-plate{
  background:linear-gradient(180deg,#e8dcc2,#dfd1b2);
  border:2px solid #b6a47f;border-radius:6px;padding:16px;
  box-shadow:inset 0 0 0 2px #cbbfa0, 0 3px 6px rgba(0,0,0,.2);
}
.plate-title{margin:0 0 12px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#5a4630;text-align:center;border-bottom:1px dashed #a9976d;padding-bottom:8px;}
.data-plate label{display:block;font-size:11px;letter-spacing:1px;color:#5a4630;margin-bottom:10px;text-transform:uppercase;}
.data-plate input{
  width:100%;margin-top:4px;padding:10px;font-family:inherit;font-size:14px;
  background:#fbf3e2;border:1px solid #b6a47f;border-radius:4px;color:var(--ink);
}
.data-plate input:focus{outline:none;border-color:var(--secondary);}
.btn-primary,.btn-ghost,.btn-danger{
  font-family:inherit;font-size:13px;font-weight:700;padding:11px 16px;border-radius:4px;cursor:pointer;border:none;
}
.btn-primary{background:var(--secondary);color:#fff;box-shadow:0 3px 0 #b34f0e;width:100%;margin-top:4px;}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #b34f0e;}
.btn-ghost{background:transparent;color:#5a4630;border:1px solid #b6a47f;}
.btn-danger{background:#a3322a;color:#fff;box-shadow:0 3px 0 #6f1f1a;}
.btn-danger:active{transform:translateY(2px);box-shadow:0 1px 0 #6f1f1a;}
.plate-status{font-size:12px;color:#4c7a3a;text-align:center;margin:10px 0 0;}

/* modal */
.modal{
  position:fixed;inset:0;z-index:30;background:rgba(20,18,15,.6);
  display:flex;align-items:flex-end;justify-content:center;
}
.modal[hidden]{display:none;}
.modal-card{
  width:100%;max-width:460px;
  background:var(--paper);border-radius:14px 14px 0 0;
  padding:20px 18px calc(18px + var(--safe-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,.4);
  animation:slideUp .2s ease;
  border-top:4px solid var(--secondary);
}
.modal-card.small{border-top-color:var(--primary);}
@keyframes slideUp{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.modal-card h2{margin:0 0 14px;font-size:16px;letter-spacing:1px;color:var(--primary);}
.modal-card p{font-size:12px;color:#6d5c3a;}
.modal-close{position:absolute;right:18px;margin-top:-2px;font-size:26px;line-height:1;color:#6d5c3a;background:none;border:none;cursor:pointer;}
.modal-card label{display:block;font-size:11px;letter-spacing:1px;color:#5a4630;margin-bottom:10px;text-transform:uppercase;}
.modal-card input,.modal-card textarea{
  width:100%;margin-top:4px;padding:11px;font-family:inherit;font-size:14px;
  background:#fff;border:2px solid #c9b793;border-radius:5px;color:var(--ink);
}
.modal-card textarea{resize:vertical;}
.modal-card input:focus,.modal-card textarea:focus{outline:none;border-color:var(--secondary);}
.req{color:var(--secondary);}
.form-error{color:#a3322a;font-size:12px;margin:0 0 8px;min-height:0;}
.form-actions{display:flex;gap:10px;margin-top:6px;}
.form-actions button{flex:1;}

/* tab bar: wrenches on red rag */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;height:auto;
  max-width:460px;margin:0 auto;
  background:var(--rag);
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 6px, transparent 6px 14px),
    radial-gradient(ellipse at 20% 0%, rgba(220,120,90,.5), transparent 60%),
    radial-gradient(ellipse at 80% 0%, rgba(90,30,20,.4), transparent 60%);
  border-top:2px solid #7c2419;
  padding:6px 6px calc(6px + var(--safe-bottom));
  display:flex;
  box-shadow:0 -4px 10px rgba(0,0,0,.4);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:9px;letter-spacing:.5px;color:#e6c9a8;padding:4px 0;
}
.wrench{position:relative;display:block;width:30px;height:22px;transition:transform .15s;}
/* wrench shape */
.wrench::before{
  content:"";position:absolute;top:9px;left:2px;width:26px;height:5px;border-radius:3px;
  background:linear-gradient(180deg,#b8bcc0,#8a8e93 60%,#6d7176);
  box-shadow:0 1px 1px rgba(0,0,0,.4);
}
.wrench::after{ /* open jaws at one end */
  content:"";position:absolute;top:0;left:2px;width:26px;height:9px;border-radius:5px;
  background:linear-gradient(180deg,#c3c7cb,#999da2 60%,#777b80);
  box-shadow:0 1px 1px rgba(0,0,0,.4);
}
.wrench::before{ /* closed slit default */
  background-image:linear-gradient(#b8bcc0,#b8bcc0 48%,#56595e 48%,#56595e 55%,#b8bcc0 55%);
}
.tab.active .wrench{transform:rotate(-14deg);}
.tab.active .wrench::after{ /* jaws open */
  background:linear-gradient(#c9ccd0,#c9ccd0 30%,#56595e 30%,#56595e 38%,#c9ccd0 38%);
}
.tab.active .wrench::before{
  background-image:linear-gradient(#b8bcc0,#b8bcc0 48%,#3a3d41 48%,#3a3d41 60%,#b8bcc0 60%);
}
.tab.active .wrench::before{ /* glint of amber oil */
  box-shadow:0 1px 1px rgba(0,0,0,.4), 0 0 2px 1px var(--secondary);
}
.tab.active{color:var(--accent);}
.tab.active .wrench span{display:block;position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--secondary);}