/* — Carbon-inspired tokens, lightweight (no @carbon/react) — */
:root{
  /* Theme: white (landing) + writing tokens */
  --bg: #ffffff;
  --bg-subtle: #f4f4f4; /* $background-01 / layer-01 */
  --bg-cream: #f9f6f0; /* original warm, maps to $layer-01 warm */
  --text-primary: #161616; /* $text-01 */
  --text-secondary: #525252; /* $text-02 */
  --text-helper: #6f6f6f; /* $text-05 */
  --border-subtle: #e0e0e0; /* $ui-03 */
  --border-strong: #8d8d8d;
  --interactive: #0f62fe; /* $interactive-01 */
  --interactive-hover: #0353e9;
  --interactive-active: #002d9c;
  --focus: #0f62fe;
  --support-error: #da1e28; /* $support-01 */
  --support-error-bg: #fff1f1; /* $support-error hover bg */
  --support-success: #24a148;
  --layer-warning: #fff8e1; /* warm warning */
  --overlay: rgba(22,22,22,.5);
  --radius: 4px;
  --radius-lg: 8px;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --container: 640px;
  --editor-max: 672px; /* 60-70ch ideal */
  --duration-fast: 110ms;
  --duration-moderate: 200ms;
  --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --easing-exit: cubic-bezier(0.4, 0.14, 1, 1);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
button,textarea{font: inherit}
button{cursor:pointer}
a{color:var(--interactive)}
a:hover{color:var(--interactive-hover)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* Utilities */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.is-hidden{display:none !important}
.is-hidden[aria-hidden="false"]{display:block !important}

/* Pages */
.page{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.page--writing{
  background: var(--bg);
  position:relative;
  overflow:hidden;
}
.page--writing.is-hidden{display:none}
#landing.is-hidden{display:none}

/* Landing wrap — Carbon 2x grid equivalent, centered 640px */
.wrap{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display:flex;
  flex-direction:column;
  gap: var(--space-8);
  min-height:100dvh;
}
.brand{
  display:flex; align-items:center; gap:var(--space-2);
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color: var(--text-secondary); font-weight:500;
}
.dot{
  width:8px; height:8px; border-radius:999px; background: var(--text-primary);
  display:inline-block; flex-shrink:0;
}
.dot--live{
  background: var(--support-success);
  box-shadow: 0 0 0 4px rgba(36,161,72,.15);
}
.hero{
  display:flex; flex-direction:column; gap: var(--space-4);
  padding-top: clamp(24px, 6vh, 48px);
}
.headline{
  margin:0;
  font-size: clamp(36px, 6vw, 52px);
  line-height:1.05;
  letter-spacing: -0.02em;
  font-weight:600;
}
.support{
  margin:0;
  font-size: clamp(18px, 3vw, 22px);
  line-height:1.35;
  color: var(--text-secondary);
  font-weight:400;
}
.body-copy{
  margin:0;
  max-width: 42ch;
  font-size:16px;
  line-height:1.6;
  color: var(--text-primary);
}
.cta{
  display:flex; flex-direction:column; gap: var(--space-3);
  margin-top: var(--space-3);
}
.helper{
  margin:0;
  font-size:13px;
  color: var(--text-helper);
  letter-spacing:.01em;
}

/* Carbon Button — primary, ghost, secondary */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:0; /* Carbon uses square with 0 radius for primary, we use 4px for warmth */
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  transition: background var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}
.btn--primary{
  background: var(--interactive);
  color:#fff;
  border-color: var(--interactive);
  border-radius: var(--radius);
}
.btn--primary:hover{background: var(--interactive-hover); border-color:var(--interactive-hover)}
.btn--primary:active{background: var(--interactive-active); border-color:var(--interactive-active)}
.btn--secondary{
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
  border-radius: var(--radius);
}
.btn--secondary:hover{background: var(--bg-subtle)}
.btn--ghost{
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  border-radius: var(--radius);
}
.btn--ghost:hover{background: var(--bg-subtle); color:var(--text-primary)}
.btn--lg{
  min-height:48px; /* Carbon lg */
  padding:0 20px;
  font-size:16px;
}
.btn--sm{
  min-height:32px;
  padding:0 12px;
  font-size:14px;
}
.btn:focus-visible{outline-offset:2px}

/* How it works — progressive disclosure */
.how{
  margin-top: var(--space-4);
  border-top:1px solid var(--border-subtle);
  padding-top: var(--space-4);
}
.how summary{
  list-style:none;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color: var(--text-secondary);
  display:inline-flex; align-items:center; gap:6px;
}
.how summary::-webkit-details-marker{display:none}
.how summary::after{
  content:"›";
  display:inline-block;
  transform: rotate(90deg);
  transition: transform var(--duration-fast) var(--easing-standard);
  color: var(--text-helper);
}
.how[open] summary::after{transform: rotate(-90deg)}
.how__content{
  margin-top: var(--space-3);
  font-size:14px;
  color: var(--text-secondary);
  line-height:1.6;
}
.how__content ol{
  margin:0; padding-left:20px;
  display:flex; flex-direction:column; gap:6px;
}
.how__content strong{color:var(--text-primary); font-weight:600}
.how__note{margin: var(--space-3) 0 0; font-size:13px; color:var(--text-helper)}

.foot{
  margin-top:auto;
  padding-top: var(--space-6);
  font-size:13px;
  color: var(--text-helper);
  border-top:1px solid transparent;
}

/* Writing bar */
.writing-bar{
  position:sticky; top:0; z-index:5;
  background: var(--bg);
  border-bottom:1px solid var(--border-subtle);
}
.writing-bar__inner{
  max-width: var(--editor-max);
  margin:0 auto;
  padding: 10px var(--space-4);
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-4);
  min-height:48px;
}
.writing-bar__left, .writing-bar__right{
  display:flex; align-items:center; gap:12px;
  min-width:0;
}
.timer{
  font-family: var(--font-mono);
  font-size:14px; font-weight:500;
  letter-spacing:.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.wordcount{
  font-size:13px; color: var(--text-secondary);
  white-space:nowrap;
}
.sep{color: var(--border-subtle)}
.warning-text{
  font-size:13px; font-weight:500;
  color: var(--support-error);
  white-space:nowrap;
}
.warning-text.is-hidden{display:none}
.progress{
  height:2px; background: var(--bg-subtle);
}
.progress__fill{
  height:100%; width:0%;
  background: var(--interactive);
  transition: width var(--duration-moderate) var(--easing-standard), background var(--duration-moderate) var(--easing-standard);
}

/* Editor */
.editor-wrap{
  flex:1;
  display:flex; flex-direction:column;
  max-width: var(--editor-max);
  width:100%;
  margin:0 auto;
  padding: clamp(20px, 4vh, 32px) var(--space-4) var(--space-6);
  gap:12px;
  position:relative; z-index:2;
}
.editor{
  width:100%;
  flex:1;
  min-height: 52vh;
  border:1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  font-family: var(--font-mono);
  font-size:16px;
  line-height:1.7;
  color: var(--text-primary);
  background: var(--bg);
  resize:none;
  outline:none;
  transition: border-color var(--duration-fast) var(--easing-standard),
              background var(--duration-moderate) var(--easing-standard),
              box-shadow var(--duration-moderate) var(--easing-standard);
}
.editor::placeholder{color: var(--text-helper)}
.editor:focus{
  border-color: var(--border-subtle);
  box-shadow: 0 0 0 1px var(--border-subtle);
}
.editor-hint{
  margin:0;
  font-size:13px; color: var(--text-helper);
  text-align:center;
}

/* Writing warning state — driven by .is-warning / .is-danger */
.page--writing.is-warning{
  background: var(--layer-warning);
}
.page--writing.is-warning .editor{
  background: #fffef5;
  border-color: #f1c21b;
}
.page--writing.is-warning .progress__fill{background: #f1c21b}
.page--writing.is-danger{
  background: var(--support-error-bg);
}
.page--writing.is-danger .editor{
  background: #fff1f1;
  border-color: var(--support-error);
  box-shadow: 0 0 0 1px var(--support-error);
}
.page--writing.is-danger .progress__fill{background: var(--support-error)}
.page--writing.is-danger .timer{color: var(--support-error)}
.vignette{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition: opacity var(--duration-moderate) var(--easing-standard);
  background: radial-gradient(1200px 600px at 50% 0%, rgba(218,30,40,0) 60%, rgba(218,30,40,.06) 100%);
  z-index:1;
}
.page--writing.is-warning .vignette{opacity:1; background: radial-gradient(1200px 600px at 50% 0%, rgba(241,194,27,.0) 60%, rgba(241,194,27,.12) 100%)}
.page--writing.is-danger .vignette{opacity:1; background: radial-gradient(1200px 600px at 50% 0%, rgba(218,30,40,.0) 60%, rgba(218,30,40,.10) 100%)}

/* Dialogs — native <dialog> styled like Carbon Modal */
.dialog{
  border:1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding:0;
  max-width: 560px;
  width: calc(100% - 32px);
  background: var(--bg);
  color: var(--text-primary);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.dialog::backdrop{background: var(--overlay)}
.dialog[open]{
  display:flex; flex-direction:column;
  animation: dialogIn var(--duration-moderate) var(--easing-standard);
}
@keyframes dialogIn{
  from{opacity:0; transform: translateY(8px) scale(.98)}
  to{opacity:1; transform: translateY(0) scale(1)}
}
.dialog__head{
  padding: var(--space-5) var(--space-5) 0;
}
.dialog__title{
  margin:0;
  font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-.01em;
}
.dialog__desc{
  margin:6px 0 0;
  font-size:14px; color: var(--text-secondary); line-height:1.6;
}
.dialog__body{
  padding: var(--space-4) var(--space-5);
  font-size:14px; color: var(--text-secondary); line-height:1.6;
}
.dialog__foot{
  display:flex; justify-content:flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top:1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
.dialog--danger .dialog__title{color: var(--support-error)}
.stats{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size:13px; color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.preview{
  width:100%;
  border:1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding:12px;
  font-family: var(--font-mono);
  font-size:13px; line-height:1.6;
  color: var(--text-primary);
  background: var(--bg-subtle);
  resize:vertical;
}
.copy-feedback{
  margin:0;
  padding: 0 var(--space-5) var(--space-4);
  font-size:13px; color: var(--support-success); font-weight:500;
  text-align:right;
}
.copy-feedback.is-hidden{display:none}

/* Responsive */
@media (max-width: 600px){
  .wrap{padding: var(--space-4) var(--space-4) var(--space-5)}
  .headline{font-size:32px}
  .support{font-size:18px}
  .writing-bar__inner{padding: 10px 12px}
  .editor{padding:16px 14px; font-size:15px; min-height: 48vh}
  .dialog{width: calc(100% - 16px)}
  .dialog__head, .dialog__body, .dialog__foot{padding-left: var(--space-4); padding-right: var(--space-4)}
  .dialog__foot{flex-wrap:wrap}
  .dialog__foot .btn{flex:1 1 auto}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}

/* Focus */
.editor:focus-visible{outline:none; box-shadow: 0 0 0 2px var(--focus) inset}