/*
The Vestibule — A local-first writing environment.
Copyright (C) 2026 Christopher Scott Judson / Vergil’s Coffee Table Press

This program is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the
Free Software Foundation, either version 3 of the License, or (at your option)
any later version.

See LICENSE for details.
*/

:root { --bg:#2c2f31; --fg:#e8e8ea; --muted:#b7b7bf; --accent:#e5d1a1; --panel:#1f2123; --border:#d9d9d9; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#1b1d1f;color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Layout: sidebar + workspace */
.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 12px;
  height: 100vh;
}

/* Sidebar */
.sidebar{
  background:#141516;
  border-right:1px solid #2a2d2f;
  padding:10px 10px 14px;
  overflow:auto;
}
.brand-block{display:flex;gap:10px;align-items:center;margin:6px 0 12px}
.brand-logo{width:84px;height:84px;object-fit:cover;border-radius:8px;border:2px solid var(--accent);background:#fff}
.brand-text h1{margin:0;font-size:20px}
.tagline{margin:2px 0 0;color:#ddd;font-style:italic}
.version{color:#c9c9c9}

.side-buttons{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.side-btn{background:#d8d2c6;color:#1b1b1b;border:2px solid #b8aea0;border-radius:6px;padding:10px;font-weight:600;cursor:pointer}
.side-btn:hover{filter:brightness(0.95)}

.stats-box{background:#222427;border:1px solid #32363a;border-radius:8px;padding:10px;color:#fff;margin-bottom:14px}
.stats-box strong{color:#f2f2f2}
.stats-divider{border:0;border-top:1px solid #3a3f44;margin:8px 0}
.goal-met{color:#ffd28a;font-weight:700}
.goal-progress{color:#d8d2c6}

.side-quote{background:#222427;border:1px solid #32363a;border-radius:8px;padding:10px;color:#eaeaea}
.side-image{width:100%;height:120px;object-fit:cover;border-radius:6px;margin:4px 0 10px}
.side-quote blockquote{margin:0;font-style:italic;color:#ddd}
.shuffle{margin-top:8px;background:#2a2d31;color:#fff;border:1px solid #3a3f44;border-radius:6px;padding:6px 10px;cursor:pointer}
.shuffle:hover{border-color:#6b7280}

/* Workspace (right) */
.workspace{display:flex;flex-direction:column;min-width:0}

/* Welcome */
.welcome{background:#1f2123;border:1px solid #2c2f33;border-radius:10px;padding:12px;margin-bottom:12px}
.welcome .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.muted{color:var(--muted);margin:0}

/* Prep bar */
.prepbar{
  display:grid;
  /* three columns: word goal | time goal | filename */
  grid-template-columns: 140px 160px 1fr;
  grid-template-areas:
    "goal time filename"
    "prompt prompt prompt"
    "buttons buttons buttons";
  gap:10px;align-items:end;background:#1f2123;border:1px solid #2c2f33;border-radius:10px;padding:12px;margin-bottom:12px
}
.field{display:flex;flex-direction:column;gap:6px}
.field:nth-child(1){grid-area:goal}
.field:nth-child(2){grid-area:time}
.field:nth-child(3){grid-area:filename}
.span2{grid-area:prompt}
.buttons{grid-area:buttons;display:flex;gap:10px;justify-content:flex-end}
label{color:var(--muted);font-size:20px}
input[type=number],textarea,input[type=text]{width:100%;background:#0f1113;color:var(--fg);border:1px solid #2b2f34;border-radius:8px;padding:10px}

/* Editor frame with border like screenshot */
.editor-frame{
  background:#2e3236;
  border: 10px solid #131517;     /* thick outer */
  outline: 2px solid #cfcfcf;     /* light inner like screenshot */
  border-radius: 6px;
  padding: 10px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;min-height:0;
}
.top-stats{display:flex;gap:12px;color:#ddd;flex-wrap:wrap;align-items:center}
.progress{height:8px;background:#1a1d20;border-radius:999px;overflow:hidden}
.bar{height:100%;width:0%;background:#9fd3ff;transition:width .2s ease}

#writer {
  width: 100%;
  flex: 1;
  min-height: 300px;
  resize: none;
  background: #2e3236;
  color: #f2f2f2;
  border: 1px solid #444a50;
  border-radius: 6px;
  padding: 14px;
  outline: none;
  
  /* Force font for typing area */
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;   /* visibly larger than body text */
  line-height: 1.6;
}

#writer:focus{border-color:#b7d4ff}
#writer:disabled{opacity:.7;cursor:not-allowed}

.controls{display:flex;gap:10px;flex-wrap:wrap}
button{background:#2a2d31;color:#fff;border:1px solid #3a3f44;border-radius:8px;padding:8px 12px;cursor:pointer}
button:hover{border-color:#6b7280}

.summary-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.summary-modal.hidden {
  display: none;
}

.summary-card {
  background: #d1d5db;
  color: #050505;
  width: min(360px, 90vw);
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.summary-logo {
  width: 72px;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
}

.summary-card h3 {
  margin: 0.25rem 0;
}

.summary-subtitle {
  margin: 0 0 1rem;
  font-style: italic;
}

.summary-stats {
  line-height: 1.35;
  font-weight: 600;
}

.summary-stats .section {
  margin-top: 1rem;
}

#sessionSummaryClose {
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: #0a84ff;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

/* Modal + Toast */
.hidden{display:none !important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10}
.modal-body{background:#16181a;border:1px solid #2c2f33;border-radius:10px;padding:16px;max-width:720px;width:92%}
.modal .p{white-space:pre-wrap;margin:8px 0 6px}
.modal .meta{color:#c9c9c9;font-style:italic;white-space:pre-wrap}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1d1f22;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transition:opacity .2s ease;border:1px solid #2a2f35;z-index:11}
.toast.show{opacity:1}

.summary-note{
  margin-top:1rem;
  font-size:0.95rem;
  color:#333;
  font-style:italic;
}


/* Mode 2 writing experience polish */
.mode-signal{
  margin-left:auto;
  color:#cfc7b7;
  font-style:italic;
  opacity:.85;
}
.mode-signal.active{
  color:#e5d1a1;
}

.status-active{
  color:#e5d1a1;
  font-weight:700;
}
.status-complete{
  color:#b8f3c2;
  font-weight:700;
}

body.writing-mode .welcome,
body.writing-mode .prepbar{
  display:none !important;
}

body.writing-mode .sidebar{
  border-right-color:#6b5f3f;
}

.editor-frame.active-session{
  outline-color:#e5d1a1;
  box-shadow:0 0 0 1px rgba(229,209,161,.18), 0 0 24px rgba(0,0,0,.22);
}

button:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
}

button:disabled:hover{
  border-color:#3a3f44;
}

body.writing-mode #writer{
  font-size:18px !important;
  line-height:1.75;
  padding:18px;
}

body.writing-mode .top-stats{
  border-bottom:1px solid rgba(229,209,161,.18);
  padding-bottom:4px;
}


/* Mode 2B goals + milestones polish */
.goal-met{
  color:#b8f3c2;
  font-weight:800;
  text-shadow:0 0 10px rgba(184,243,194,.2);
}

.goal-halfway{
  color:#e5d1a1;
  font-weight:700;
}

.goal-progress{
  color:#e8e8ea;
}

.stats-box .goal-met,
.stats-box .goal-halfway{
  display:inline-block;
}

.pulse-once{
  animation: vestibule-goal-pulse 900ms ease-out 1;
}

@keyframes vestibule-goal-pulse{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}

body.writing-mode .progress{
  box-shadow:0 0 0 1px rgba(229,209,161,.12);
}

body.writing-mode .bar{
  background:linear-gradient(90deg,#9fd3ff,#e5d1a1);
}


/* Mode 3A reflection polish */
.summary-actions{
  display:flex;
  gap:0.75rem;
  margin-top:1.25rem;
}

.summary-actions button{
  flex:1;
}

.summary-secondary{
  background:#c5c9cf !important;
  color:#1b1b1b !important;
  border:1px solid #9aa1ab !important;
}

.reflection-close{
  margin-top:0.85rem;
  color:#555;
  font-style:italic;
  font-size:0.92rem;
  letter-spacing:.01em;
}

.summary-card{
  animation: vestibule-summary-rise 240ms ease-out;
}

@keyframes vestibule-summary-rise{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Version 1.0 identity polish */

.platform-note{
  display:block;
  color:#c9c9c9;
  font-size:12px;
  line-height:1.25;
  margin-top:3px;
}

.secondary-side-btn{
  background:#222427;
  color:#f2f2f2;
  border-color:#32363a;
}

.about-body p{
  color:#e8e8ea;
  margin:0 0 0.85rem;
}


/* Version 1.0.1 recovery safety layer */
.recovery-body p{
  color:#e8e8ea;
  margin:0 0 0.85rem;
}

.recovery-body .meta{
  background:#222427;
  border:1px solid #32363a;
  border-radius:8px;
  padding:0.75rem;
  color:#e5d1a1;
  font-style:normal;
}


/* Version 1.0.2 pause awareness */
#writer.paused-writing{
  animation: vestibule-pause-pulse 1.2s ease-in-out 2;
  border-color:#e5d1a1;
  box-shadow:0 0 0 2px rgba(229,209,161,.15);
}

@keyframes vestibule-pause-pulse{
  0%,100%{
    box-shadow:0 0 0 2px rgba(229,209,161,.05);
  }
  50%{
    box-shadow:0 0 0 5px rgba(229,209,161,.22);
  }
}


/* Version 1.1 history portability */
.history-import-body p{
  color:#e8e8ea;
  margin:0 0 0.85rem;
}

#historyImportMessage{
  background:#222427;
  border:1px solid #32363a;
  border-radius:8px;
  padding:0.75rem;
  color:#e5d1a1;
}