/* Palette: warm Swedish-tan canvas, Lego-brick primary accents, Inter throughout. */
:root {
  --tan-bg: #efe4cf;
  --tan-border: #ddceac;
  --cream: #ffffff;
  --ink: #2b241c;
  --muted: #8a7a5f;

  --lego-red: #d0121b;
  --lego-red-dark: #a80f17;
  --lego-yellow: #ffcd00;
  --lego-yellow-dark: #caa300;
  --lego-blue: #0057a8;
  --lego-blue-dark: #00427e;
  --lego-green: #00843d;
  --lego-green-dark: #056b32;
  --lego-orange: #f47216;
  --lego-orange-dark: #c25a0f;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0; background: var(--tan-bg); color: var(--ink);
}

.nav {
  background: #211b14; padding: 14px 24px; display: flex; gap: 18px; align-items: center;
}
.nav a { color: #cabfa8; text-decoration: none; font-size: 13px; white-space: nowrap; font-weight: 500; }
.nav a.brand { color: #fff; font-weight: 700; margin-right: 8px; font-size: 15px; white-space: nowrap; }
.nav a:hover { color: #fff; }

/* Two visually distinct clusters: the numbered pipeline (left) vs. standalone tools (right,
   set off by a divider) -- same pages/links as before, just grouped so it's obvious at a
   glance which is "the workflow" and which is "something you dip into." */
.nav-group { display: flex; gap: 18px; align-items: center; }
.nav-group-steps a.step { display: flex; align-items: center; gap: 7px; }
.nav a.step.active { color: #fff; font-weight: 700; border-bottom: 3px solid var(--lego-yellow); padding-bottom: 2px; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #3a3020; color: #cabfa8;
  font-size: 11px; font-weight: 700; flex: none;
}
.nav a.step.active .step-num { background: var(--lego-yellow); color: #2b241c; }

.nav-group-tools {
  margin-left: auto; padding-left: 18px; border-left: 1px solid #3a3020;
}
.nav a.tool-link { color: #8a7a5f; font-size: 12px; }
.nav a.tool-link:hover { color: #fff; }

/* First-time-user orientation card on the landing page (Step 1) -- deliberately neutral, no
   Lego-brick outline color, so it doesn't compete with the actual workflow cards below it. */
.intro-card { background: #faf5e8; border-style: dashed; }
.intro-steps { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.intro-steps li { margin-bottom: 4px; }

.reminder-banner {
  background: var(--lego-blue); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 12px; margin-bottom: 20px; text-align: center;
}

.container { max-width: 1500px; margin: 0 auto; padding: 28px 24px 60px; }
.table-scroll { overflow-x: auto; border-radius: 14px; }
.table-scroll table { min-width: 900px; }

h1 { font-size: 23px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 24px 0 10px; font-weight: 700; }
.muted { color: var(--muted); font-size: 13px; }

table { width: 100%; border-collapse: collapse; background: var(--cream); border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #f1ebdd; font-size: 14px; }
th { background: #faf5e8; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
tr:hover td { background: #fbf8ef; }
a { color: var(--lego-blue); }

.card {
  background: var(--cream); border: 1px solid var(--tan-border); border-radius: 16px;
  padding: 22px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(43,36,20,0.06);
}

/* Lego-brick outline colors for cards/boxes -- same thin border width, just recolored.
   Cycle red/blue/yellow/orange/green through a page's boxes in document order. */
.outline-red { border-color: var(--lego-red); }
.outline-blue { border-color: var(--lego-blue); }
.outline-yellow { border-color: var(--lego-yellow); }
.outline-orange { border-color: var(--lego-orange); }
.outline-green { border-color: var(--lego-green); }

.btn {
  display: inline-block; background: var(--lego-blue); color: #fff; border: none; padding: 10px 18px;
  border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: transform .05s ease, opacity .1s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(0.98); }
.btn.secondary { background: var(--cream); color: var(--ink); border: 1.5px solid var(--tan-border); }
.btn.secondary:hover { border-color: var(--lego-blue); color: var(--lego-blue); opacity: 1; }
.research-toggle-btn.active { background: var(--lego-blue); color: #fff; border-color: var(--lego-blue); }
.btn.danger { background: var(--lego-red); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.tag {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .01em;
}
.tier-1 { background: var(--lego-red); color: #fff; }
.tier-2 { background: var(--lego-yellow); color: #4a3b00; }
.tier-3 { background: var(--lego-blue); color: #fff; }
.tier-none { background: #ece2cb; color: var(--muted); }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=url], input[type=date], textarea, select {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--tan-border); border-radius: 10px; font-size: 14px;
  font-family: inherit; background: var(--cream); color: var(--ink);
}
input[type=text]:focus, input[type=url]:focus, input[type=date]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--lego-blue); box-shadow: 0 0 0 3px rgba(0,87,168,0.12);
}
textarea { min-height: 90px; }

/* input[type=date] otherwise renders as a completely unstyled native control (this rule
   didn't cover it before) -- the browser's calendar icon still sits outside any CSS box
   model influence, so this tints it toward the app's own accent color instead of leaving it
   battleship gray, and gives it a real hover target. */
input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer; border-radius: 6px; padding: 3px;
  filter: invert(28%) sepia(54%) saturate(2500%) hue-rotate(190deg) brightness(90%);
}
input[type=date]::-webkit-calendar-picker-indicator:hover { background: #eaf2fa; }

/* Drag-and-drop file upload zone -- click-to-browse still works (the real <input type=file>
   is just visually hidden inside), drag-over gets a clear accent-colored highlight so it
   doesn't feel like a dead target, and a chosen filename replaces the placeholder copy so
   there's always visible confirmation of what's about to upload. */
.dropzone {
  border: 2px dashed var(--tan-border); border-radius: 14px; padding: 26px 16px; text-align: center;
  background: var(--cream); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover { border-color: var(--muted); }
.dropzone.dragover { border-color: var(--lego-blue); background: #f0f7fd; }
.dropzone input[type=file] { display: none; }
.dropzone-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.dropzone-text { font-size: 13px; color: var(--muted); }
.dropzone-text strong { color: var(--lego-blue); font-weight: 600; }
.dropzone-filename { display: none; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.dropzone.has-file .dropzone-filename { display: block; }
.dropzone.has-file { border-style: solid; border-color: var(--lego-green); background: #f4fbf6; }

.row { display: flex; gap: 20px; }
.col { flex: 1; }

.flash { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.flash-success { background: #dff3e6; color: var(--lego-green-dark); }
.flash-error { background: #fbdedf; color: var(--lego-red-dark); }
.flash-info { background: #dcebf9; color: var(--lego-blue-dark); }

.research-flag {
  font-weight: 500; font-size: 12px; color: #a8650f; cursor: help;
}

.checkbox-list {
  max-height: 340px; overflow-y: auto; border: 1.5px solid var(--tan-border); border-radius: 12px;
  padding: 10px; background: var(--cream);
}
.checkbox-list label { display: flex; align-items: center; gap: 8px; font-weight: normal; font-size: 14px; margin: 6px 0; }
.checkbox-list input { width: auto; }

.preview-frame { width: 100%; height: 560px; border: 1.5px solid var(--tan-border); border-radius: 12px; background: var(--cream); }
pre.log {
  background: #211b14; color: #d9f5df; padding: 14px; border-radius: 12px; font-size: 12px;
  max-height: 340px; overflow-y: auto; white-space: pre-wrap;
}
.badge { font-size: 12px; padding: 3px 10px; border-radius: 8px; background: #ece2cb; color: var(--ink); font-weight: 600; }

.contact-card { border: 1.5px solid var(--tan-border); border-radius: 16px; padding: 18px; margin-bottom: 16px; background: var(--cream); }
.contact-card-header {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
  gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #f1ebdd;
}
.contact-card-header .meta { font-size: 14px; }
.contact-card-header .meta .muted { display: block; margin-top: 2px; }
.contact-card-header .stats { text-align: right; font-size: 13px; color: var(--muted); }

.research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.research-box { border: 1.5px solid var(--tan-border); border-radius: 12px; padding: 14px 16px; background: #fbf8ef; }
.research-box.discourse { border-left: 5px solid var(--lego-blue); }
.research-box.trends { border-left: 5px solid var(--lego-green); }
.research-box-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.research-box.discourse .research-box-header { color: var(--lego-blue-dark); }
.research-box.trends .research-box-header { color: var(--lego-green-dark); }
.research-question { margin: 0 0 6px 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.research-why { margin: 0 0 10px 0; font-size: 12px; color: var(--muted); font-style: italic; }
.research-custom-prompt { font-size: 12px; padding: 7px 10px; margin-bottom: 8px; }
.research-box .btn { padding: 7px 12px; font-size: 13px; }