/* ==========================================================================
   STORYMINT — "Where Stories Are Forged Into Legends"
   Design language: illuminated manuscript + medieval scriptorium + forge.
   Tokens:
     Ink black   #1B1410   Parchment  #F4ECD8   Parchment dark #E8DCC0
     Leather     #5C3A21   Gold leaf  #C9A227   Gold bright    #E0BD4F
     Oxblood     #6B1E23   Ink text   #2B2118   Sepia muted    #8B7355
   Display face: Cormorant Garamond · Body: EB Garamond · Utility: JetBrains Mono
   ========================================================================== */

:root{
  --ink-black:#1B1410;
  --parchment:#F4ECD8;
  --parchment-dark:#E8DCC0;
  --leather:#5C3A21;
  --gold:#C9A227;
  --gold-bright:#E0BD4F;
  --oxblood:#6B1E23;
  --ink-text:#2B2118;
  --sepia:#8B7355;

  --bg:var(--parchment);
  --bg-raised:#FFFFFA;
  --bg-sunken:var(--parchment-dark);
  --text:var(--ink-text);
  --text-muted:var(--sepia);
  --accent:var(--oxblood);
  --accent-2:var(--gold);
  --border:rgba(43,33,24,0.18);
  --rail-bg:var(--ink-black);
  --rail-text:var(--parchment);

  --font-display:'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:'EB Garamond', Georgia, serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;

  --radius:3px;
  --shadow-page:0 1px 0 rgba(43,33,24,.25), 0 18px 40px -20px rgba(20,12,6,.45);
  --transition:200ms ease;
}

[data-theme="dark"]{
  --bg:#13100D;
  --bg-raised:#1E1812;
  --bg-sunken:#0E0B08;
  --text:var(--parchment);
  --text-muted:#B9A98A;
  --border:rgba(244,236,216,0.14);
  --rail-bg:#0B0907;
  --rail-text:var(--parchment);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html[dir="rtl"]{direction:rtl;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  transition:background var(--transition), color var(--transition);
  -webkit-font-smoothing:antialiased;
}

body.focus-mode .rail,
body.focus-mode .topbar{ opacity:.18; filter:saturate(.4); transition:opacity .3s; }
body.focus-mode .rail:hover,
body.focus-mode .topbar:hover{ opacity:1; filter:none; }

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text);
  letter-spacing:.2px;
}
.mono,.word-count,.kbd{ font-family:var(--font-mono); letter-spacing:0; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

button{ font-family:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}

::selection{ background:var(--gold); color:var(--ink-black); }

/* ---------- App shell ---------- */
.app-shell{
  display:grid;
  grid-template-columns:76px 1fr;
  grid-template-rows:64px 1fr;
  min-height:100vh;
}
html[dir="rtl"] .app-shell{ grid-template-columns:1fr 76px; }

/* ---------- Rail (bookshelf of tools) ---------- */
.rail{
  grid-row:1 / -1;
  grid-column:1;
  background:var(--rail-bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 0;
  gap:6px;
  overflow-y:auto;
  border-right:1px solid rgba(201,162,39,.18);
}
html[dir="rtl"] .rail{ grid-column:2; border-right:none; border-left:1px solid rgba(201,162,39,.18); }

.rail-brand{
  width:42px;height:42px;border-radius:50%;
  margin-bottom:10px;
  background:var(--parchment);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--gold);
  flex-shrink:0;
}
.rail-brand img{ width:30px; height:30px; }

.rail-btn{
  width:54px;height:54px;
  border-radius:50%;
  border:1.5px solid rgba(201,162,39,.35);
  background:transparent;
  color:var(--rail-text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  font-size:19px;
  position:relative;
  transition:all var(--transition);
  flex-shrink:0;
}
.rail-btn .rail-label{
  font-family:var(--font-mono);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.75;
}
.rail-btn:hover{ border-color:var(--gold); background:rgba(201,162,39,.08); }
.rail-btn.active{
  background:var(--oxblood);
  border-color:var(--gold-bright);
  color:var(--parchment);
  box-shadow:0 0 0 3px rgba(201,162,39,.25), inset 0 0 12px rgba(0,0,0,.35);
}
.rail-spacer{ flex:1; }

/* ---------- Topbar ---------- */
.topbar{
  grid-row:1; grid-column:2;
  background:var(--bg-raised);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  padding:0 20px;
}
html[dir="rtl"] .topbar{ grid-column:1; }

.topbar .brandline{
  font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:.3px;
  white-space:nowrap;
}
.topbar .brandline span{ color:var(--accent); }
.topbar .tagline{
  font-size:12px; color:var(--text-muted); display:none; border-left:1px solid var(--border); padding-left:12px;
}
@media(min-width:760px){ .topbar .tagline{ display:inline; } }

.topbar-spacer{ flex:1; }

.icon-btn{
  background:transparent; border:1px solid var(--border); color:var(--text);
  border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all var(--transition);
}
.icon-btn:hover{ border-color:var(--gold); background:var(--bg-sunken); }
.icon-btn.is-on{ background:var(--accent); color:var(--parchment); border-color:var(--accent); }

select.lang-select{
  background:var(--bg-raised); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:7px 10px; font-family:var(--font-mono); font-size:12px;
}

/* ---------- Main content ---------- */
.main{
  grid-row:2; grid-column:2;
  overflow-y:auto;
  padding:28px clamp(16px, 4vw, 48px) 80px;
}
html[dir="rtl"] .main{ grid-column:1; }

.view{ display:none; max-width:1080px; margin:0 auto; animation:rise .35s ease; }
.view.active{ display:block; }
@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

.page-head{ margin-bottom:22px; }
.page-head .eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:8px;
}
.page-head .eyebrow::before{ content:"❦"; color:var(--gold); }
.page-head h1{ font-size:clamp(28px,4vw,40px); margin:4px 0 6px; }
.page-head p{ color:var(--text-muted); max-width:620px; margin:0; }

/* manuscript "page" card */
.leaf{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-page);
  padding:22px;
  position:relative;
}
.leaf + .leaf{ margin-top:18px; }
.leaf::before{
  content:""; position:absolute; inset:8px; border:1px solid var(--border); border-radius:2px;
  pointer-events:none; opacity:.5;
}
.leaf-title{
  font-family:var(--font-display); font-weight:600; font-size:20px; margin:0 0 14px;
  display:flex; align-items:center; gap:8px;
}
.leaf-title .num{ color:var(--gold); font-family:var(--font-mono); font-size:13px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:14px; }
.field label{
  display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.7px; color:var(--text-muted); margin-bottom:6px;
}
.row{ display:grid; gap:14px; }
@media(min-width:640px){
  .row.cols-2{ grid-template-columns:1fr 1fr; }
  .row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
}

input[type="text"], input[type="number"], input[type="email"], textarea, select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:15.5px;
  transition:border-color var(--transition);
}
textarea{ resize:vertical; min-height:120px; line-height:1.55; }
input:focus, textarea:focus, select:focus{ border-color:var(--gold); }
input::placeholder, textarea::placeholder{ color:var(--text-muted); opacity:.7; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--border); background:var(--bg); color:var(--text-muted);
  padding:7px 13px; border-radius:999px; font-size:13px; transition:all var(--transition);
}
.chip:hover{ border-color:var(--gold); color:var(--text); }
.chip.selected{ background:var(--accent); border-color:var(--accent); color:var(--parchment); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:var(--radius); border:1px solid var(--accent);
  background:var(--accent); color:var(--parchment);
  padding:11px 20px; font-size:15px; font-family:var(--font-display); font-weight:600;
  letter-spacing:.3px; transition:all var(--transition);
}
.btn:hover{ background:#7d2329; transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(107,30,35,.6); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn.seal{ border-radius:50%; width:46px; height:46px; padding:0; justify-content:center; }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn.ghost:hover{ border-color:var(--gold); background:var(--bg-sunken); }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:var(--ink-black); }
.btn.gold:hover{ background:var(--gold-bright); }
.btn.sm{ padding:7px 13px; font-size:13px; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ---------- Forging / loading state ---------- */
.forge-bar{ height:3px; width:100%; border-radius:2px; overflow:hidden; background:var(--bg-sunken); display:none; margin:14px 0; }
.forge-bar.active{ display:block; }
.forge-bar i{
  display:block; height:100%; width:40%;
  background:linear-gradient(90deg, transparent, var(--gold), var(--oxblood), var(--gold), transparent);
  animation:forge 1.1s linear infinite;
}
@keyframes forge{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(250%); } }
.forge-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); display:none; align-items:center; gap:8px; }
.forge-label.active{ display:flex; }
.forge-label::before{ content:"⚒"; color:var(--gold); animation:flicker 1.4s infinite; }
@keyframes flicker{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ---------- Output panel ---------- */
.output{
  background:var(--bg);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:18px;
  min-height:80px;
  white-space:pre-wrap;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
}
.output:empty::before{ content:attr(data-placeholder); color:var(--text-muted); font-style:italic; }
.output .drop-cap::first-letter{
  font-family:var(--font-display); font-size:3.2em; float:left; line-height:.78; padding:.04em .08em 0 0;
  color:var(--accent);
}

.output-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.word-count{ font-size:12px; color:var(--text-muted); margin-left:auto; align-self:center; }

/* ---------- Chat ---------- */
.chat-window{ display:flex; flex-direction:column; gap:14px; min-height:280px; max-height:55vh; overflow-y:auto; padding-right:4px; }
.bubble{ max-width:84%; padding:13px 16px; border-radius:var(--radius); line-height:1.6; position:relative; }
.bubble.user{ align-self:flex-end; background:var(--accent); color:var(--parchment); border-bottom-right-radius:0; }
html[dir="rtl"] .bubble.user{ border-bottom-right-radius:var(--radius); border-bottom-left-radius:0; }
.bubble.ai{ align-self:flex-start; background:var(--bg); border:1px solid var(--border); border-bottom-left-radius:0; white-space:pre-wrap; }
html[dir="rtl"] .bubble.ai{ border-bottom-left-radius:var(--radius); border-bottom-right-radius:0; }
.bubble .role{ font-family:var(--font-mono); font-size:10px; opacity:.65; display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:1px; }
.chat-input-row{ display:flex; gap:10px; margin-top:14px; align-items:flex-end; }
.chat-input-row textarea{ flex:1; min-height:54px; max-height:160px; }

/* ---------- Prompts library ---------- */
.prompt-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:680px){ .prompt-grid{ grid-template-columns:1fr 1fr; } }
.prompt-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px;
  display:flex; flex-direction:column; gap:10px;
}
.prompt-card .tag{ font-family:var(--font-mono); font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.8px; }
.prompt-card p{ margin:0; font-size:15px; }

/* ---------- Dashboard ---------- */
.project-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:680px){ .project-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .project-grid{ grid-template-columns:1fr 1fr 1fr; } }
.project-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
.project-card .kind{ font-family:var(--font-mono); font-size:10px; color:var(--gold); text-transform:uppercase; letter-spacing:1px;}
.project-card h4{ margin:0; font-size:18px; }
.project-card .snippet{ color:var(--text-muted); font-size:13.5px; flex:1; overflow:hidden; max-height:60px; }
.project-card .meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-muted); }
.empty-state .glyph{ font-size:34px; color:var(--gold); margin-bottom:10px; display:block; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink-black); color:var(--parchment); border:1px solid var(--gold);
  padding:11px 20px; border-radius:999px; font-size:13.5px; font-family:var(--font-mono);
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:999;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Footer (within views) ---------- */
.note{ font-size:13px; color:var(--text-muted); margin-top:10px; }
.divider{ border:none; border-top:1px solid var(--border); margin:24px 0; }

/* ---------- Standalone pages (contact / blog) ---------- */
.standalone{ max-width:760px; margin:0 auto; padding:64px 22px 90px; }
.standalone .back{ font-family:var(--font-mono); font-size:13px; }
.standalone h1{ font-size:clamp(30px,5vw,46px); margin:18px 0 10px; }
.site-footer{
  border-top:1px solid var(--border); margin-top:48px; padding:26px 22px 40px; text-align:center;
  font-size:13px; color:var(--text-muted);
}
.site-footer .brandline{ font-family:var(--font-display); font-size:18px; color:var(--text); }
.site-footer a{ color:var(--text-muted); }

.blog-list{ display:grid; gap:16px; }
.blog-card{ border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--bg-raised); }
.blog-card .tag{ font-family:var(--font-mono); font-size:10px; color:var(--accent); text-transform:uppercase; }
.blog-card h3{ margin:6px 0; font-size:21px; }
.blog-card p{ color:var(--text-muted); margin:0; font-size:14.5px; }
.blog-filter{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 24px; }

/* ---------- Reading mode ---------- */
body.reading-mode .rail, body.reading-mode .topbar-spacer ~ *{ }
body.reading-mode .main{ max-width:760px; margin:0 auto; font-size:19px; }
body.reading-mode .leaf{ box-shadow:none; border:none; background:transparent; }

/* ---------- Scrollbars (light decorative touch) ---------- */
*{ scrollbar-color:var(--accent) transparent; scrollbar-width:thin; }

/* ---------- Responsive ---------- */
@media(max-width:680px){
  .app-shell{ grid-template-columns:60px 1fr; }
  html[dir="rtl"] .app-shell{ grid-template-columns:1fr 60px; }
  .rail-btn{ width:44px; height:44px; font-size:16px; }
  .rail-btn .rail-label{ display:none; }
  .main{ padding:18px 14px 70px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* ---------- Print ---------- */
@media print{
  .rail,.topbar,.btn,.output-toolbar{ display:none !important; }
  .main{ padding:0; }
}