@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

:root{
  /* paper notebook palette with aged tones */
  --paper: #fff7e6;           /* slightly yellowed */
  --paper-edge: #e6d4b8;      /* darker aged edge */
  --ink: #1b1b1b;
  --rule: #d6dbe3; /* faint ruled lines dulled */
  --margin: #e6b9b9; /* left margin red line, faded */
  --muted: #6b6b6b;
  --shadow: 0 24px 44px rgba(6,6,6,0.16);
  --torn-shadow: 0 10px 24px rgba(0,0,0,0.16);
  --burn: rgba(60,30,10,0.18);
  --stain: rgba(120,70,30,0.08);
  --crease: rgba(0,0,0,0.06);
  --radius:8px;
  /* Use Special Elite everywhere and boost base size for a bold, typed look */
  font-family: "Special Elite", "Courier New", Courier, monospace;
  color:var(--ink);
  font-size:20px;
}

/* reset */
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: linear-gradient(180deg,#efe8dc,#e7ded0);
}

/* heavier paper texture overlay and faint foxing (age spots) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(0,0,0,0.02) 1px, transparent 3px),
    radial-gradient(circle at 82% 78%, rgba(0,0,0,0.02) 1px, transparent 3px),
    radial-gradient(circle at 60% 28%, rgba(120,70,30,0.02) 6px, transparent 8px);
  background-size:18px 18px, 26px 26px, 180px 120px;
  opacity:0.12;
  mix-blend-mode:multiply;
}

/* notebook sheet: aged paper with subtle stains and frayed edges */
#app{
  position:fixed;
  top:28px;
  left:28px;
  right:28px;
  bottom:28px;
  background: linear-gradient(180deg,var(--paper), #fff6ec 60%, #fff2e0);
  border-radius:6px;
  padding:28px 40px 32px 64px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:2;
  transform: rotate(-0.8deg);
  border:1px solid var(--paper-edge);
  background-image:
    radial-gradient(1200px 200px at 20% 10%, rgba(200,160,80,0.03), transparent 10%),
    linear-gradient(180deg,var(--paper), #fff6ec 60%, #fff2e0);
  /* subtle vignette to suggest darkened edges */
  box-shadow: inset 0 0 120px rgba(0,0,0,0.03), var(--shadow);
}

/* darker, more ragged torn top edge with tiny burn flecks */
#app::before{
  content:"";
  position:absolute;
  left:-2%;
  right:-2%;
  top:-36px;
  height:56px;
  background:
    radial-gradient(circle at 4% 48%, transparent 12px, var(--paper-edge) 13px),
    radial-gradient(circle at 12% 62%, transparent 10px, var(--paper-edge) 11px),
    radial-gradient(circle at 22% 44%, transparent 14px, var(--paper-edge) 15px),
    radial-gradient(circle at 34% 66%, transparent 12px, var(--paper-edge) 13px),
    radial-gradient(circle at 44% 48%, transparent 10px, var(--paper-edge) 11px),
    radial-gradient(circle at 54% 58%, transparent 12px, var(--paper-edge) 13px),
    radial-gradient(circle at 64% 42%, transparent 10px, var(--paper-edge) 11px),
    radial-gradient(circle at 74% 68%, transparent 14px, var(--paper-edge) 15px),
    radial-gradient(circle at 84% 46%, transparent 12px, var(--paper-edge) 13px),
    linear-gradient(180deg, rgba(0,0,0,0.02), var(--paper-edge));
  box-shadow: var(--torn-shadow), 0 -6px 18px rgba(80,20,0,0.04);
  pointer-events:none;
  z-index:6;
  mix-blend-mode:multiply;
  border-bottom:1px solid rgba(0,0,0,0.04);
  transform: translateY(-10px) rotate(-1.2deg);
  filter: saturate(0.95) brightness(0.98);
}

/* left hole punches with tiny fray and crease lines */
#app::after{
  content:"";
  position:absolute;
  left:8px;
  top:64px;
  width:54px;
  bottom:64px;
  background:
    radial-gradient(circle at 50% 16%, rgba(0,0,0,0.08) 10px, transparent 11px),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.06) 10px, transparent 11px),
    radial-gradient(circle at 50% 84%, rgba(0,0,0,0.08) 10px, transparent 11px);
  opacity:1;
  pointer-events:none;
  z-index:4;
  mix-blend-mode:multiply;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.02);
}

/* faint horizontal crease and fold marks across the sheet */
#app .age-marks{
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:3;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0) 0 49.2%, rgba(0,0,0,0.02) 49.2%, rgba(255,255,255,0) 49.4%),
    linear-gradient(90deg, rgba(0,0,0,0.01) 0 0.3%, rgba(255,255,255,0) 0.4%);
  background-size: 100% 38px, 100% 100%;
  opacity:0.22;
  mix-blend-mode:multiply;
}

/* coffee/tea stain overlay (subtle, randomized) */
#app .stains{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  background-image:
    radial-gradient(120px 80px at 18% 30%, rgba(120,70,30,0.12), transparent 40%),
    radial-gradient(90px 60px at 72% 70%, rgba(100,60,30,0.08), transparent 45%),
    radial-gradient(70px 48px at 50% 48%, rgba(140,90,40,0.06), transparent 42%);
  opacity:1;
  mix-blend-mode:multiply;
}

/* small burn flecks and edge darkening */
#app .burns{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
  background-image:
    radial-gradient(24px 18px at 6% 6%, var(--burn), transparent 60%),
    radial-gradient(18px 12px at 92% 12%, rgba(80,40,10,0.12), transparent 60%),
    radial-gradient(36px 26px at 86% 88%, rgba(70,30,10,0.08), transparent 60%);
  mix-blend-mode:multiply;
  opacity:0.9;
}

/* ruled lines across the sheet using background, slightly faded and irregular */
#app .ruled {
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 38px, rgba(0,0,0,0.028) 38px, rgba(0,0,0,0) 39px),
    linear-gradient(90deg, var(--margin) 0.12rem, transparent 0.12rem);
  background-size: 100% 38px, 100% 100%;
  opacity:0.14;
  pointer-events:none;
  z-index:2;
  filter: contrast(0.98) saturate(0.9);
}

/* header styling tuned to notebook header */
#header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:6px 8px 6px;
  z-index:8;
  position:relative;
}
.titleWrap{
  display:flex;
  align-items:center;
  gap:12px;
}
#header h1{
  margin:0;
  font-weight:700;
  /* much larger title in Special Elite to feel like a bold stamped heading */
  font-size:120px;
  color:var(--ink);
  line-height:0.98;
  letter-spacing:0.6px;
  font-family: "Special Elite", "Palatino Linotype", "Book Antiqua", serif;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}



/* neon banner placed at the top of the page */
#neonBanner{
  font-family: "Special Elite", "Palatino Linotype", "Book Antiqua", serif;
  color: #000000;
  text-align:center;
  font-size:48px;
  font-weight:700;
  padding:12px 18px;
  margin:0 0 12px 0;
  /* dark "black neon" glow */
  text-shadow:
    0 0 6px rgba(0,0,0,0.65),
    0 0 18px rgba(0,0,0,0.45),
    0 6px 28px rgba(0,0,0,0.28);
  background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  z-index:12;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
  transform: translateY(-6px) rotate(-0.6deg);
}

/* lead paragraph like a sticky, aged note */
.lead{
  margin:8px 0 0 0;
  color:var(--muted);
  font-weight:700;
  background: linear-gradient(180deg,#fff7e8,#fff3df);
  padding:8px 12px;
  border-radius:8px;
  border:1px dashed rgba(0,0,0,0.04);
  font-size:14px;
  z-index:8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* controls: toned down to match paper style */
#controls{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
  z-index:8;
}
#controls button{
  background: linear-gradient(180deg,#fffaf6,#fff3ea);
  color:var(--ink);
  font-weight:700;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  display:inline-flex;
  gap:12px;
  align-items:center;
  min-height:52px;
  font-family: "Special Elite", serif;
  font-size:18px;
}
#controls button:hover{ transform: translateY(-3px); box-shadow: 0 12px 22px rgba(0,0,0,0.09); }
#controls svg{ width:20px;height:20px; }

/* form area: panels flow with comfortable spacing; make panels look like pasted notes */
#capsuleForm{
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
  padding:12px 6px 18px;
  margin-top:14px;
  position:relative;
  z-index:8;
}

/* card: lighten, add paper tear corners and tape with dirt smudges */
.card{
  background: transparent;
  border-radius:6px;
  padding:12px 12px 14px;
  position:relative;
  border-left:3px solid rgba(0,0,0,0.04);
  transition: transform .12s ease;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,250,240,0.6));
  box-shadow: 0 8px 18px rgba(10,10,10,0.04);
  overflow:visible;
}
.card::before{
  content:"";
  position:absolute;
  left:12px;
  top:-8px;
  width:28px;
  height:8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(240,235,230,0.9));
  transform: rotate(-6deg);
  border-radius:2px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
  opacity:0.9;
}
/* subtle smudge on many cards to suggest long handling */
.card::after{
  content:"";
  position:absolute;
  right:8px;
  bottom:8px;
  width:60px;
  height:40px;
  background: radial-gradient(40px 24px at 16% 40%, rgba(80,40,20,0.04), transparent 60%);
  opacity:0.9;
  pointer-events:none;
}

/* prompt label like typed uppercase on notebook */
.prompt{
  font-family: "Courier New", Courier, monospace;
  font-size:14px;
  color:var(--ink);
  margin-left:4px;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* input bubble simplified to seem handwritten area */
.inputBubble{
  position:relative;
  background:transparent;
  border-radius:6px;
  padding:6px;
  margin-top:8px;
  font-size:16px;
  min-height:48px;
}

/* inputs & textareas look like ink on paper with slight ink bleed */
input[type="text"], textarea, input[list], input[type="date"]{
  width:100%;
  border:0;
  background:transparent;
  padding:14px 16px;
  /* larger, more readable typed-style text everywhere */
  font-size:32px;
  outline:none;
  resize:none;
  font-family: "Special Elite", "Georgia", "Times New Roman", serif;
  color:var(--ink);
  border-bottom:1px dashed rgba(0,0,0,0.06);
  text-shadow: 0.2px 0.2px rgba(0,0,0,0.02);
}

/* textarea comfortable height, a bit more airy */
textarea{
  min-height:160px;
  line-height:1.6;
  padding:10px;
  border-radius:6px;
  background-image:
    radial-gradient(800px 60px at 10% 95%, rgba(160,100,40,0.02), transparent 10%);
  font-size:28px;
  font-family: "Special Elite", Georgia, serif;
}

/* Make the date input inside the lead more prominent — widen and emphasize it */
.lead{
  display:flex;
  align-items:center;
  gap:12px;
}
.lead input[type="date"]{
  font-size:40px;
  padding:6px 12px;
  font-weight:700;
  color:var(--ink);
  background:transparent;
  border-bottom:2px solid rgba(0,0,0,0.06);
  margin-left:8px;
  min-width:360px; /* wider calendar/date box */
  width:auto;
  box-sizing:border-box;
}

/* select and datalist styled lightly */
.suggestions, select {
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
  font-family: serif;
  font-size:18px;
}

/* concern menu: subtle paper chips */
.concernMenu{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.concernOption{
  background: linear-gradient(180deg,#fffdf8,#fff6ee);
  border:1px solid rgba(0,0,0,0.04);
  padding:8px 10px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 10px rgba(0,0,0,0.04);
  transition: transform .12s ease;
}
.concernOption:hover{ transform: translateY(-4px); box-shadow: 0 10px 18px rgba(0,0,0,0.06); }

/* speech script area: framed like a folded paper card */
#speechCard textarea[readonly]{
  background: transparent;
  border:1px dashed rgba(0,0,0,0.06);
  padding:12px;
  min-height:140px;
  font-family: "Georgia", serif;
  font-size:15px;
  border-radius:6px;
}

/* footer saved indicator: small stamped label */
#footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:8px;
  z-index:8;
}
#savedIndicator{
  background: rgba(0,0,0,0.03);
  border:1px solid rgba(0,0,0,0.04);
  padding:6px 10px;
  border-radius:6px;
  font-weight:700;
  font-family: monospace;
  color:var(--muted);
}

/* ruled overlay element must be present inside #app for lines */
#app > .ruled { z-index:2; }

/* small responsive tweaks */
@media (max-width:640px){
  #header h1{ font-size:64px }
  #app{ padding:16px 18px 18px 44px }
  .card{ padding:10px }
  #controls button{ padding:8px 10px; font-size:14px; min-height:40px }
  .sticker{ width:72px; height:32px; font-size:12px }
  /* responsive adjustments: keep date and lead large but fit mobile */
  .lead{ font-size:18px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
  .lead input[type="date"]{ font-size:32px; padding:6px 8px; margin-left:8px; min-width:220px; width:auto; }
}