/**
 * styles.css
 * ------------------------------------------------------------
 * All visual styling for Rockstick, grouped by page section so
 * it lines up with the sections in index.html and content.js.
 * ------------------------------------------------------------
 */

:root{
  --paper: #FAF9F5;
  --paper-2: #F1EFE8;
  --card: #FFFFFF;
  --placeholder: #B5B2A8;
  --ink: #1B1B1D;
  --ink-soft: #55534C;
  --rule: #D8D4C8;
  --pencil-blue: #2E4B8F;
  --pencil-blue-soft: #E7ECF8;
  --pencil-red: #B3432B;
  --pencil-red-soft: #F7E9E4;
  --gold: #A9822F;
  --accent: #2E4B8F;
  --accent-soft: #E7ECF8;
}

/* ================= DARK MODE ================= */
[data-theme="dark"]{
  --paper: #17181A;
  --paper-2: #1F2123;
  --card: #232527;
  --placeholder: #5C5D5E;
  --ink: #ECEBE6;
  --ink-soft: #9B9A93;
  --rule: #38393C;
  --pencil-blue: #8FB2ED;
  --pencil-blue-soft: #223047;
  --pencil-red: #E08165;
  --pencil-red-soft: #3A241E;
  --gold: #D2AE63;
  --accent: #8FB2ED;
  --accent-soft: #223047;
}

/* ================= OCEAN THEME (blue, cyan, orange) ================= */
[data-theme="ocean"]{
  --paper: #0B1929;
  --paper-2: #102A42;
  --card: #143352;
  --placeholder: #5A8BA8;
  --ink: #E8F4FC;
  --ink-soft: #8ECAE6;
  --rule: #1E4D6B;
  --pencil-blue: #48CAE4;
  --pencil-blue-soft: #1A3A52;
  --pencil-red: #FB8500;
  --pencil-red-soft: #3D2810;
  --gold: #FFB703;
  --accent: #48CAE4;
  --accent-soft: #1A3A52;
}

/* ================= SOLAR THEME (black, white, yellow — easy on eyes) ================= */
[data-theme="solar"]{
  --paper: #1A1A1A;
  --paper-2: #242424;
  --card: #2A2A2A;
  --placeholder: #888880;
  --ink: #F5F5DC;
  --ink-soft: #C4C4A8;
  --rule: #404040;
  --pencil-blue: #FFD54F;
  --pencil-blue-soft: #3D3520;
  --pencil-red: #FFAB40;
  --pencil-red-soft: #3D2A15;
  --gold: #FFEB3B;
  --accent: #FFD54F;
  --accent-soft: #3D3520;
}

[data-theme="forest"]{
  --paper: #1A2E1A;
  --paper-2: #243824;
  --card: #2A422A;
  --placeholder: #6B8F6B;
  --ink: #E8F5E8;
  --ink-soft: #A8C4A8;
  --rule: #3D5C3D;
  --pencil-blue: #81C784;
  --pencil-blue-soft: #1E3A1E;
  --pencil-red: #FF8A65;
  --pencil-red-soft: #3A241E;
  --gold: #A5D6A7;
  --accent: #81C784;
  --accent-soft: #1E3A1E;
}

[data-theme="rose"]{
  --paper: #2A1A1F;
  --paper-2: #352428;
  --card: #402A32;
  --placeholder: #9A7A82;
  --ink: #FFF0F3;
  --ink-soft: #D4A8B0;
  --rule: #5C3D45;
  --pencil-blue: #FF8A80;
  --pencil-blue-soft: #3A2028;
  --pencil-red: #FF7043;
  --pencil-red-soft: #3A2418;
  --gold: #FFAB91;
  --accent: #FF8A80;
  --accent-soft: #3A2028;
}

[data-theme="midnight"]{
  --paper: #12101F;
  --paper-2: #1A1729;
  --card: #221E35;
  --placeholder: #7A7590;
  --ink: #EDE9FE;
  --ink-soft: #A89FC4;
  --rule: #3D3655;
  --pencil-blue: #A78BFA;
  --pencil-blue-soft: #2A2040;
  --pencil-red: #F472B6;
  --pencil-red-soft: #3A2030;
  --gold: #C4B5FD;
  --accent: #A78BFA;
  --accent-soft: #2A2040;
}

[data-theme="sepia"]{
  --paper: #2C2419;
  --paper-2: #3A3024;
  --card: #453828;
  --placeholder: #9A8870;
  --ink: #F5EDE0;
  --ink-soft: #C4B098;
  --rule: #5C4D38;
  --pencil-blue: #D4A574;
  --pencil-blue-soft: #3A3020;
  --pencil-red: #E09868;
  --pencil-red-soft: #3A2818;
  --gold: #E8C49A;
  --accent: #D4A574;
  --accent-soft: #3A3020;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s ease, color .15s ease;
}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:32px 28px 60px;
}

/* ================= LAYOUT: PC FULL SCREEN ================= */
[data-layout="desktop"] body{
  min-height:100vh;
  min-height:100dvh;
}
[data-layout="desktop"] .wrap{
  max-width:100%;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  padding:24px 32px 40px;
  display:flex;
  flex-direction:column;
}
[data-layout="desktop"] main{
  flex:1;
  grid-template-columns:1.5fr 1fr;
  min-height:0;
}
[data-layout="desktop"] .manuscript-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
[data-layout="desktop"] .manuscript-panel textarea{
  flex:1;
  min-height:calc(100vh - 420px);
  min-height:calc(100dvh - 420px);
  resize:none;
}
[data-layout="desktop"] .main-left{
  min-height:0;
}

/* ================= LAYOUT: MOBILE FIT ================= */
[data-layout="mobile"] body{
  overflow-x:hidden;
}
[data-layout="mobile"] .wrap{
  max-width:100%;
  width:100%;
  padding:12px 14px 24px;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}
[data-layout="mobile"] header{
  flex-direction:column;
  align-items:flex-start;
  padding-bottom:12px;
  margin-bottom:4px;
}
[data-layout="mobile"] h1{
  font-size:clamp(26px, 7vw, 34px);
}
[data-layout="mobile"] .tagline{
  display:block;
  text-align:left;
  max-width:100%;
  font-size:14px;
}
[data-layout="mobile"] .controls-strip{
  flex-wrap:wrap;
  gap:8px;
  padding:8px 0;
}
[data-layout="mobile"] .controls-group{
  flex:1 1 calc(50% - 4px);
  min-width:120px;
}
[data-layout="mobile"] .control-select{
  width:100%;
  font-size:12px;
}
[data-layout="mobile"] .gauge-row{
  grid-template-columns:repeat(2, 1fr);
}
[data-layout="mobile"] main{
  grid-template-columns:1fr;
  gap:16px;
  margin-top:20px;
}
[data-layout="mobile"] .manuscript-panel textarea{
  min-height:220px;
  font-size:16px;
  padding:14px;
  -webkit-text-size-adjust:100%;
}
[data-layout="mobile"] .side{
  gap:16px;
}
[data-layout="mobile"] .panel-head{
  padding:10px 12px;
}
[data-layout="mobile"] .field-row{
  padding:12px;
}
[data-layout="mobile"] .tray{
  grid-template-columns:repeat(4, 1fr);
}
[data-layout="mobile"] .ad-slot-wrap{
  margin:12px 0;
}
[data-layout="mobile"] footer{
  flex-direction:column;
  font-size:10px;
}

/* ================= HEADER ================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid var(--ink);
  padding-bottom:18px;
  margin-bottom:8px;
  gap:24px;
  flex-wrap:wrap;
}
.brand{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.brand b{color:var(--ink);}
h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(34px, 5vw, 52px);
  line-height:1.02;
  margin:10px 0 0;
  letter-spacing:-0.01em;
}
h1 em{ font-style:italic; color:var(--accent); }
.tagline{
  font-family:'Source Serif 4', serif;
  font-size:16px;
  color:var(--ink-soft);
  max-width:320px;
  text-align:right;
  padding-bottom:6px;
}

/* ============= CONTROLS STRIP (theme, layout, font) ============= */
.controls-strip{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px 16px;
  padding:10px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}
.controls-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.control-label{
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.control-select{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  padding:6px 10px;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  outline:none;
  min-width:140px;
}
.control-select:focus{ border-color:var(--accent); }
.controls-strip .visitor-count-group{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  padding-bottom:4px;
}
.controls-strip .count{
  color:var(--accent);
  font-weight:600;
}

/* Legacy theme toggle (kept for reference, unused) */
.theme-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--ink-soft);
  color:var(--ink-soft);
  padding:5px 10px;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.theme-toggle:hover{ border-color:var(--ink); color:var(--ink); }

/* ============= VISITOR COUNTER STRIP ============= */
.visitor-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}
.visitor-strip .visitor-count-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.visitor-strip .count{
  color:var(--accent);
  font-weight:600;
}

/* ================= AD SLOTS ================= */
.ad-slot-wrap{
  margin:18px 0;
  border:1px dashed var(--rule);
  background:var(--paper-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ad-slot-wrap iframe{ display:block; border:none; width:100%; }
.ad-slot--header{ min-height:90px; }
.ad-slot--footer{ min-height:90px; }
.ad-slot--sidebar{ min-height:250px; }

/* ================= GAUGE STRIP (signature element) ================= */
.gauge{
  margin-top:22px;
  border:1px solid var(--ink);
  background:var(--paper-2);
  overflow:hidden;
}
.gauge-row{ display:grid; grid-template-columns:repeat(6, 1fr); }
@media (max-width:900px){
  .gauge-row{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:700px){
  .gauge-row{ grid-template-columns:repeat(2, 1fr); }
  .gauge-cell:nth-child(2n){ border-right:none; }
}
.gauge-cell{
  padding:16px 16px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid transparent;
  position:relative;
}
.gauge-cell:last-child{border-right:none;}
.gauge-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.gauge-num{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:32px;
  line-height:1.1;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.gauge-idx{ font-family:'IBM Plex Mono', monospace; }

/* ================= MAIN GRID ================= */
main{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:28px;
  margin-top:34px;
}
@media (max-width:800px){
  main{grid-template-columns:1fr;}
  .tagline{display:none;}
}

.panel{ border:1px solid var(--rule); background:var(--card); }
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
}
.panel-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.panel-title b{color:var(--ink);}

/* ---- Manuscript panel (main textarea) ---- */
.theme-toggle:hover{ border-color:var(--ink); color:var(--ink); }

/* ---- Manuscript textarea + font variants ---- */
textarea{
  width:100%;
  min-height:360px;
  border:none;
  outline:none;
  resize:vertical;
  padding:20px;
  font-family:'Source Serif 4', serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
}
textarea::placeholder{color:var(--placeholder);}

[data-font="source-serif"] textarea{ font-family:'Source Serif 4', serif; }
[data-font="inter"] textarea{ font-family:'Inter', sans-serif; }
[data-font="lora"] textarea{ font-family:'Lora', serif; }
[data-font="merriweather"] textarea{ font-family:'Merriweather', serif; }
[data-font="open-sans"] textarea{ font-family:'Open Sans', sans-serif; }
[data-font="fraunces"] textarea{ font-family:'Fraunces', serif; }
[data-font="ibm-plex-mono"] textarea{ font-family:'IBM Plex Mono', monospace; font-size:15px; }
[data-font="roboto-mono"] textarea{ font-family:'Roboto Mono', monospace; font-size:15px; }
[data-font="playfair"] textarea{ font-family:'Playfair Display', serif; }
[data-font="pt-serif"] textarea{ font-family:'PT Serif', serif; }
[data-font="nunito"] textarea{ font-family:'Nunito', sans-serif; }
[data-font="raleway"] textarea{ font-family:'Raleway', sans-serif; }
[data-font="courier"] textarea{ font-family:'Courier Prime', monospace; font-size:15px; }
[data-font="jetbrains"] textarea{ font-family:'JetBrains Mono', monospace; font-size:15px; }
[data-font="crimson"] textarea{ font-family:'Crimson Pro', serif; }
[data-font="libre"] textarea{ font-family:'Libre Baskerville', serif; }
[data-font="georgia"] textarea{ font-family:Georgia, 'Times New Roman', serif; }
[data-font="times"] textarea{ font-family:'Times New Roman', Times, serif; }

.clear-btn:hover{ border-color:var(--pencil-red); color:var(--pencil-red); }
.print-btn:hover{ border-color:var(--accent); color:var(--accent); }

.panel-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---- Random text generator panel ---- */
.generator-fields{ display:flex; flex-direction:column; gap:12px; }
.generator-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:480px){
  .generator-grid{ grid-template-columns:1fr; }
}
.generator-field label{
  display:block;
  margin-bottom:6px;
}
.generator-field input[type="number"]{
  width:100%;
  max-width:none;
}
.gen-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
  line-height:1.4;
}
.gen-check input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }
.generate-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--accent);
  color:var(--paper);
  border:none;
  padding:10px 16px;
  cursor:pointer;
  transition:opacity .15s ease;
  align-self:flex-start;
}
[data-theme="light"] .generate-btn{ color:#fff; }
[data-theme="solar"] .generate-btn{ color:#1A1A1A; }
.generate-btn:hover{ opacity:0.88; }

.sample-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--ink-soft);
  color:var(--ink-soft);
  padding:5px 10px;
  cursor:pointer;
  transition:all .15s ease;
}
.sample-btn:hover{border-color:var(--ink); color:var(--ink);}

/* ---- Side column (find + filter panels) ---- */
.main-left{ display:flex; flex-direction:column; gap:20px; }
.side{display:flex; flex-direction:column; gap:20px;}

.field-row{padding:16px;}
.field-row + .field-row{border-top:1px solid var(--rule);}
label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
input[type="text"], input[type="number"]{
  width:100%;
  border:1px solid var(--rule);
  background:var(--paper);
  padding:9px 10px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  color:var(--ink);
  outline:none;
}
input[type="text"]:focus, input[type="number"]:focus{border-color:var(--accent);}

/* ---- Find-a-word panel ---- */
.range-inline{display:flex; align-items:center; gap:8px;}
.range-inline input{width:70px;}
.range-inline span{color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; font-size:12px;}

.find-result{
  margin-top:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--ink-soft);
}
.find-result b{
  color:var(--accent);
  font-size:20px;
  font-family:'Fraunces', serif;
  font-weight:500;
}
.helper-text{
  margin-top:6px;
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  line-height:1.4;
  color:var(--ink-soft);
}
.match-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.match-chip{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  padding:3px 8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ink);
}
.match-chip mark{ padding:0; }
.match-chip .chip-count{ color:var(--ink-soft); font-size:10px; }
mark{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:2px;
  padding:0 1px;
}

/* ---- Word limit panel ---- */
.limit-panel .panel-head{ gap:12px; }
.limit-enable{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
}
.limit-enable input{ cursor:pointer; accent-color:var(--accent); }
.limit-row input[type="number"]{ max-width:120px; }
.limit-bar-track{
  margin-top:12px;
  height:6px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  overflow:hidden;
}
.limit-bar-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .15s ease, background-color .15s ease;
}
.limit-bar-fill.over{ background:var(--pencil-red); }
#limitStatus{ border-top:none; padding:8px 0 0; }


/* ---- Letter tray (filter panel) ---- */
.tray{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.type-cell{
  background:var(--card);
  padding:8px 6px;
  text-align:center;
  transition:opacity .15s ease, background .15s ease;
}
.type-cell.dim{opacity:0.22;}
.type-cell .letter{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:16px;
  display:block;
}
.type-cell .count{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--ink-soft);
  display:block;
  margin-top:2px;
}
.type-cell.active{background:var(--accent-soft);}
.type-cell.active .letter{color:var(--accent);}
.type-cell.active .count{color:var(--accent);}

.foot-note{
  padding:12px 16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  border-top:1px solid var(--rule);
}

/* ================= FOOTER ================= */
footer{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

/* ================= SEO CONTENT SECTION ================= */
.seo-section{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--rule);
  max-width:720px;
}
.seo-section h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(24px, 4vw, 32px);
  margin:0 0 16px;
  color:var(--ink);
}
.seo-section h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:20px;
  margin:28px 0 12px;
  color:var(--ink);
}
.seo-section p{
  font-family:'Source Serif 4', serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.seo-list{
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
  padding-left:20px;
  margin:0 0 8px;
}
.seo-list li{ margin-bottom:6px; }
.faq-list{ margin-top:12px; }
.faq-item{
  border:1px solid var(--rule);
  background:var(--card);
  margin-bottom:8px;
  padding:0;
}
.faq-item summary{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  padding:12px 16px;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item p{
  font-family:'Inter', sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  padding:0 16px 14px;
  margin:0;
}

@media print{
  .controls-strip, .ad-slot-wrap, .seo-section, footer, .side, .generator-panel, .limit-panel, header .tagline{ display:none !important; }
  .wrap{ max-width:100%; padding:0; }
  main{ grid-template-columns:1fr; }
}