/* Telar Alpha — shared tokens */
:root{
  /* Night mode palette from WEB_VISUAL_SPECS.md */
  --ink-bg: #1a1614;
  --ink-bg-2: #1f1a17;
  --ink-0: #faf7f2;
  --ink-1: #c9c2b8;
  --ink-2: #8a8278;
  --ink-3: #554f47;
  --ink-3-soft: rgba(232, 223, 208, 0.08);
  --accent-terracota: #c25a3c;
  --accent-teal: #4a8a90;
  --accent-gold: #b79b5a;

  --serif: Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --read-width: 700px;
  --frame-width: 860px;

  --rhythm: 1.7;
}

html,body{margin:0;padding:0;background:var(--ink-bg);color:var(--ink-0);font-family:var(--serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*{box-sizing:border-box}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
input,textarea{font-family:inherit;color:inherit;background:transparent;border:0;outline:0;}
::selection{background:rgba(74,138,144,0.35);color:var(--ink-0)}
::placeholder{color:var(--ink-2);opacity:1}

/* Scrollbar — quiet */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:10px;border:3px solid var(--ink-bg)}

/* Shared utilities */
.read-col{max-width:var(--read-width);margin:0 auto;padding:0 24px}
.frame-col{max-width:var(--frame-width);margin:0 auto;padding:0 24px}
.narration{font-family:var(--serif);font-size:1.125rem;line-height:1.7;color:var(--ink-0)}
.narration p{margin:0 0 1.4em}
.ui{font-family:var(--sans);font-size:1rem}
.meta{font-family:var(--mono);font-size:0.85rem;color:var(--ink-2);letter-spacing:0.02em}

/* Corner ticks */
.ticks{position:absolute;inset:0;pointer-events:none}
.ticks::before,.ticks::after,.ticks > span::before,.ticks > span::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--ink-3);
}
.ticks::before{top:0;left:0;border-right:0;border-bottom:0}
.ticks::after{top:0;right:0;border-left:0;border-bottom:0}
.ticks > span{display:block;width:100%;height:100%;position:absolute;inset:0}
.ticks > span::before{bottom:0;left:0;border-right:0;border-top:0}
.ticks > span::after{bottom:0;right:0;border-left:0;border-top:0}

/* Buttons */
.btn{font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:0.01em;padding:12px 22px;color:var(--ink-0);background:transparent;border:1px solid var(--ink-3);transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:var(--accent-terracota);color:var(--ink-bg);border-color:var(--accent-terracota)}
.btn[disabled],.btn.is-disabled{color:var(--ink-2);cursor:not-allowed;background:transparent;border-color:var(--ink-3)}
.btn[disabled]:hover,.btn.is-disabled:hover{background:transparent;color:var(--ink-2);border-color:var(--ink-3)}

/* Text inputs */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--sans);font-size:0.95rem;color:var(--ink-1)}
.field textarea,.field input[type="text"],.field input[type="password"]{
  font-family:var(--sans);font-size:1rem;color:var(--ink-0);
  border:1px solid var(--ink-3);background:var(--ink-bg);padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
  line-height:1.5;
}
.field textarea{min-height:120px;resize:vertical;font-family:var(--sans)}
.field textarea:focus,.field input:focus{border-color:var(--accent-teal);box-shadow:0 0 0 1px var(--accent-teal)}
.field .hint{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-1);line-height:1.5}
.field .error{font-family:var(--serif);font-style:italic;font-size:0.95rem;color:var(--ink-1);margin-top:2px}

/* Shake for bad password */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-5px)}
  40%,80%{transform:translateX(5px)}
}
.shake{animation:shake 160ms ease-in-out 2}

/* Fade transition for screen changes */
.fade-enter{opacity:0;transform:translateY(4px);animation:fadeIn .3s ease forwards}
@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}

/* Language toggle + option nav (host chrome) */
.host-chrome{position:fixed;top:16px;right:16px;display:flex;gap:6px;align-items:center;z-index:50;font-family:var(--mono);font-size:0.75rem;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase}
.host-chrome .group{display:flex;gap:2px;border:1px solid var(--ink-3-soft);padding:4px}
.host-chrome button{padding:4px 8px;color:var(--ink-2);letter-spacing:inherit}
.host-chrome button.active{color:var(--ink-0);background:rgba(232,223,208,0.05)}
.host-chrome button:hover{color:var(--ink-0)}
.host-chrome .label{margin-right:4px;opacity:.6}

/* Debug screen picker */
.screen-nav{position:fixed;bottom:14px;left:14px;z-index:50;font-family:var(--mono);font-size:0.72rem;color:var(--ink-2);letter-spacing:0.08em;display:flex;flex-wrap:wrap;gap:4px;max-width:560px}
.screen-nav .label{color:var(--ink-3);margin-right:4px;text-transform:uppercase}
.screen-nav button{padding:3px 7px;border:1px solid var(--ink-3-soft);color:var(--ink-2);text-transform:uppercase}
.screen-nav button.active{color:var(--ink-0);border-color:var(--ink-3);background:rgba(232,223,208,0.04)}
.screen-nav button:hover{color:var(--ink-0)}

@media(max-width:720px){
  .host-chrome{top:auto;bottom:14px;right:14px}
  .screen-nav{display:none}
}

/* Shared logo sizing helpers */
.telar-glyph-lg{width:120px;height:96px}
.telar-wordmark-sm{width:120px;height:auto;display:block}
.lintel-wordmark-sm{height:28px;width:auto;opacity:0.7}