/* Tidemark — style */

:root {
  --ink: #2b2118;
  --ink-faint: #2b211866;
  --margin-ink: #5a4632;
  --charcoal: #3a3a3e;
  --paper: #efe6d4;
  --papyrus: #e6d7b4;
  --vellum: #f0e8d2;
  --clay: #c29976;
  --clay-deep: #a97f5c;
  --stone: #b9b6ab;
  --bronze: #8e9c7f;
  --room: #0b0e12;
  --tide: #7fb2a8;
  --amber: #c9a35c;
  --guess: #a8842f;
  --likely: #7d6a3a;
  --certain: #3f3a2c;
  --hud-fg: #cfc8b8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--room); }
body { font-family: var(--serif); color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* candlelight vignette over the room */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(120% 95% at 50% 42%, transparent 58%, #05070a70 100%);
}

/* ------------------------------------------------------------------ HUD */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; color: var(--hud-fg); }
#hud > * { pointer-events: auto; }
.hud-title {
  position: absolute; top: 22px; left: 28px;
  font-size: 15px; letter-spacing: 0.42em; color: #b9b2a2;
}
.hud-sub { display: block; font-size: 10.5px; letter-spacing: 0.12em; font-style: italic; color: #7d7768; margin-top: 5px; }
.hud-progress { position: absolute; top: 26px; right: 28px; font-size: 11px; letter-spacing: 0.14em; color: #7d7768; font-variant: small-caps; }
.hud-buttons { position: absolute; bottom: 24px; right: 28px; display: flex; gap: 10px; }
.hud-btn {
  background: #ffffff0a; color: var(--hud-fg); border: 1px solid #cfc8b826;
  padding: 8px 18px; font-size: 12.5px; letter-spacing: 0.14em; font-variant: small-caps;
  border-radius: 2px; transition: background .25s, border-color .25s;
}
.hud-btn:hover { background: #ffffff17; border-color: #cfc8b855; }
.hud-btn-publish { border-color: #c9a35c44; color: #d8bd8a; }
.hud-btn-publish:hover { border-color: #c9a35c88; }
.hud-btn-icon { padding: 8px 12px; }
.hud-btn-icon.muted { opacity: 0.35; }
.hud-foot { position: absolute; bottom: 26px; left: 28px; font-size: 10.5px; color: #57534a; }
#btn-reset { cursor: pointer; border-bottom: 1px dotted #57534a; }
#btn-reset:hover { color: #8d8779; }

#tooltip {
  position: fixed; z-index: 30; pointer-events: none;
  background: #14171cee; color: #d6cfbf; border: 1px solid #cfc8b822;
  padding: 8px 12px; font-size: 12.5px; max-width: 260px; border-radius: 2px;
}
#tooltip .tt-found { display: block; font-size: 10.5px; font-style: italic; color: #8d8779; margin-top: 3px; }

#toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  z-index: 40; background: #14171cee; color: #cfc8b8; border: 1px solid #cfc8b822;
  padding: 10px 20px; font-size: 13px; font-style: italic; border-radius: 2px;
  transition: opacity .6s; opacity: 0;
}
#toast.show { opacity: 1; }

/* ------------------------------------------------------------- overlay */

#overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
#overlay-scrim { position: absolute; inset: 0; background: #05070add; }
#overlay-content { position: relative; max-height: 92vh; overflow-y: auto; padding: 4vh 20px; scrollbar-width: thin; }

/* the document card */
.doc {
  width: min(760px, 92vw); margin: 0 auto; position: relative;
  padding: 42px 52px 34px; border-radius: 2px;
  box-shadow: 0 30px 80px #000000cc, 0 4px 18px #00000088;
  transform: rotate(var(--tilt, 0deg));
}
.doc, .pub, .mono { animation: docIn 0.5s cubic-bezier(0.22, 0.7, 0.3, 1); }
@keyframes docIn {
  from { opacity: 0; transform: translateY(18px) rotate(var(--tilt, 0deg)); }
}
#overlay-scrim { animation: scrimIn 0.45s ease-out; }
@keyframes scrimIn { from { opacity: 0; } }

/* letters keep their folds */
.doc.s-letter::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, transparent calc(34% - 2px), #00000012 34%, transparent calc(34% + 3px)),
    linear-gradient(180deg, transparent calc(67% - 2px), #0000000e 67%, transparent calc(67% + 3px));
}
@media (prefers-reduced-motion: reduce) {
  .doc, .pub, .mono, #overlay-scrim { animation: none; }
}
.doc-close {
  position: sticky; top: 0; float: right; margin: -28px -34px 0 0;
  background: none; border: none; font-size: 26px; line-height: 1;
  color: inherit; opacity: 0.45; z-index: 5;
}
.doc-close:hover { opacity: 0.9; }
.doc-kicker { font-size: 10.5px; letter-spacing: 0.22em; font-variant: small-caps; opacity: 0.55; margin-bottom: 4px; }
.doc-title { font-size: 21px; font-weight: normal; letter-spacing: 0.04em; margin-bottom: 2px; }
.doc-found { font-size: 12px; font-style: italic; opacity: 0.6; margin-bottom: 26px; }
.doc-curator {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid currentColor;
  font-size: 13px; font-style: italic; line-height: 1.65; opacity: 0.72;
}
.doc-curator::before { content: "Curator's note — "; font-variant: small-caps; font-style: normal; letter-spacing: 0.08em; }

/* materials */
.doc.m-paper { background: linear-gradient(174deg, #f2ead9, #e7dcc4); color: #3a3226; }
.doc.m-papyrus {
  background:
    repeating-linear-gradient(90deg, #00000006 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, #0000000a 0 1px, transparent 1px 9px),
    linear-gradient(172deg, #eadfbe, #dcc99e);
  color: var(--ink);
}
.doc.m-vellum { background: radial-gradient(120% 100% at 50% 0%, #f4edd8, #e3d7b6 88%); color: #33291c; }
.doc.m-clay {
  background:
    radial-gradient(80% 60% at 30% 20%, #d4ad8a22, transparent),
    radial-gradient(90% 70% at 70% 85%, #7c542f33, transparent),
    linear-gradient(168deg, #c79d78, #a97c55);
  color: #33200f;
  border-radius: 8px;
}
.doc.m-stone {
  background:
    radial-gradient(100% 80% at 60% 10%, #cdcabf33, transparent),
    linear-gradient(170deg, #b6b3a8, #8f8c81);
  color: #2e2c26;
  clip-path: polygon(1.5% 0.8%, 98% 0%, 100% 96.5%, 96% 100%, 2% 99%, 0% 3.5%);
}
.doc.m-bronze {
  background:
    radial-gradient(90% 70% at 40% 20%, #a8b89a44, transparent),
    linear-gradient(170deg, #7e8f72, #5d6e57);
  color: #1e2419;
}

/* --------------------------------------------------------- glyph lines */

.doc-lines { display: flex; flex-direction: column; gap: 10px; }
.line { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 8px; position: relative; }
.line.gap { height: 10px; }
.line.rule { border-top: 1.5px solid currentColor; padding-top: 12px; margin-top: 3px; }
.line.small .tok svg.glyph { width: 26px; height: 26px; }
.line.small { opacity: 0.85; justify-content: flex-end; }
.line-main { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 8px; flex: 1 1 auto; min-width: 0; }
.line.struck .line-main { position: relative; opacity: 0.75; flex: 0 1 auto; }
.line.struck .line-main::after {
  content: ""; position: absolute; left: -6px; right: -10px; top: 46%;
  border-top: 3.5px solid currentColor; opacity: 0.8; transform: rotate(-1.6deg);
}
.line-margin {
  flex: 0 0 auto; margin-left: auto; padding-left: 18px; padding-top: 6px;
  display: flex; align-items: flex-start;
  color: var(--margin-ink); transform: rotate(-2.2deg); transform-origin: left top;
}
.line-margin .tok svg.glyph { width: 24px; height: 24px; }
.line-margin .tok .gloss { font-size: 9px; }

.tok {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 3px 2px 2px; margin: 0 1px; border-radius: 3px;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  min-width: 34px;
}
.tok svg.glyph { width: 40px; height: 40px; display: block; color: inherit; }
.tok.narrow { min-width: 18px; }
.tok.narrow svg.glyph { width: 24px; height: 40px; }
.tok:hover { background: #00000014; }
.tok.kin { background: #7fb2a833; box-shadow: 0 0 0 1px #7fb2a855; }
.tok.selected { background: #7fb2a84d; box-shadow: 0 0 0 1.5px #55887e; }
.tok.flash { animation: tokflash 1.6s ease-out; }
@keyframes tokflash {
  0%, 55% { background: #c9a35c66; box-shadow: 0 0 0 2px #c9a35c; }
  100% { background: transparent; }
}

.tok .gloss {
  font-size: 10.5px; line-height: 1.15; margin-top: 2px; max-width: 74px;
  text-align: center; overflow-wrap: break-word; font-style: italic; color: var(--guess);
  min-height: 12px;
}
.tok .gloss:empty::before { content: "·"; color: currentColor; opacity: 0.22; font-style: normal; }
.tok .gloss.c1 { color: var(--likely); font-style: normal; }
.tok .gloss.c2 { color: inherit; font-style: normal; opacity: 0.82; }

.lacuna {
  display: inline-block; height: 40px; align-self: center; margin: 0 4px;
  border-radius: 6px; opacity: 0.5;
  background: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 7px);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 40%, transparent 78%);
}

.doc-art { display: block; width: min(56%, 300px); margin: 6px auto 2px; color: inherit; opacity: 0.85; }
.doc-art-child { width: min(88%, 430px); color: var(--charcoal); }

/* english docs (curator letters) */
.doc-english p { font-size: 15.5px; line-height: 1.75; margin-bottom: 16px; }
.doc-english p.salute { font-variant: small-caps; letter-spacing: 0.06em; }
.doc-english p.sig { text-align: right; font-style: italic; }

/* --------------------------------------------------------- side panels */

aside {
  position: fixed; top: 0; bottom: 0; z-index: 25;
  background: #12151aee; color: #d6cfbf; backdrop-filter: blur(6px);
  border-color: #cfc8b81f; box-shadow: 0 0 60px #000000aa;
  display: flex; flex-direction: column;
}
aside header {
  padding: 18px 22px 14px; font-size: 12.5px; letter-spacing: 0.2em; font-variant: small-caps;
  color: #a49d8d; border-bottom: 1px solid #cfc8b81a; display: flex; align-items: center;
  flex: 0 0 auto;
}
aside .closer { margin-left: auto; background: none; border: none; color: #a49d8d; font-size: 20px; opacity: 0.6; }
aside .closer:hover { opacity: 1; }

#lexicon-drawer { left: 0; width: 340px; border-right: 1px solid #cfc8b81f; }
#lexicon-search {
  margin: 12px 18px 4px; padding: 8px 12px; background: #ffffff0d; border: 1px solid #cfc8b822;
  color: #e4ddcc; font-family: inherit; font-size: 13px; border-radius: 2px;
}
#lexicon-search::placeholder { color: #6d675b; }
#lexicon-list { overflow-y: auto; padding: 10px 14px 24px; scrollbar-width: thin; }
.lex-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-radius: 3px; padding: 7px 8px; text-align: left;
  color: #d6cfbf;
}
.lex-card:hover { background: #ffffff0c; }
.lex-card.selected { background: #7fb2a822; }
.lex-card svg.glyph { width: 34px; height: 34px; flex: 0 0 auto; color: #cfc8b8; }
.lex-card .lex-gloss { font-size: 13.5px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lex-card .lex-gloss.empty { color: #5c574d; font-style: italic; }
.lex-card .lex-gloss.g0 { color: var(--amber); font-style: italic; }
.lex-card .lex-gloss.g1 { color: #bfae7e; }
.lex-card .lex-gloss.g2 { color: #e4ddcc; }
.lex-card .lex-count { font-size: 10.5px; color: #6d675b; flex: 0 0 auto; }

#glyph-panel { right: 0; width: 380px; border-left: 1px solid #cfc8b81f; }
.gp-body { overflow-y: auto; padding: 18px 22px 30px; scrollbar-width: thin; flex: 1 1 auto; }
.gp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.gp-head svg.glyph { width: 64px; height: 64px; color: #e8e1d0; background: #ffffff08; border-radius: 4px; padding: 6px; }
.gp-meta { font-size: 12px; color: #8d8779; line-height: 1.55; }
.gp-label { font-size: 10.5px; letter-spacing: 0.18em; font-variant: small-caps; color: #8d8779; margin: 18px 0 6px; }
#gp-gloss {
  width: 100%; padding: 10px 12px; background: #ffffff0d; border: 1px solid #cfc8b82e;
  color: #efe8d6; font-family: inherit; font-size: 16px; font-style: italic; border-radius: 2px;
}
#gp-gloss:focus { outline: none; border-color: #7fb2a877; }
.gp-conf { display: flex; gap: 6px; }
.gp-conf button {
  flex: 1; padding: 7px 0; background: #ffffff08; border: 1px solid #cfc8b822; color: #a49d8d;
  font-size: 11px; letter-spacing: 0.1em; font-variant: small-caps; border-radius: 2px;
}
.gp-conf button.active { background: #7fb2a826; border-color: #7fb2a866; color: #cfe0da; }
#gp-note {
  width: 100%; min-height: 64px; resize: vertical; padding: 9px 12px;
  background: #ffffff0d; border: 1px solid #cfc8b822; color: #d6cfbf;
  font-family: inherit; font-size: 13px; line-height: 1.5; border-radius: 2px;
}
#gp-note:focus { outline: none; border-color: #7fb2a855; }

.gp-occ { margin-top: 6px; }
.gp-occ-doc { font-size: 12px; color: #a49d8d; font-variant: small-caps; letter-spacing: 0.08em; margin: 12px 0 4px; }
.gp-occ-line {
  display: flex; align-items: flex-start; width: 100%; overflow: hidden;
  background: none; border: none; border-radius: 3px; padding: 5px 6px; margin-bottom: 2px;
}
.gp-occ-line:hover { background: #ffffff0c; }
.gp-occ-line .tok { cursor: inherit; min-width: 24px; padding: 1px; pointer-events: none; }
.gp-occ-line .tok svg.glyph { width: 22px; height: 22px; color: #b9b2a2; }
.gp-occ-line .tok .gloss { font-size: 8.5px; max-width: 52px; min-height: 10px; }
.gp-occ-line .tok.hit svg.glyph { color: #7fb2a8; }
.gp-occ-line .tok.hit { background: #7fb2a81f; border-radius: 3px; }
.gp-occ-line .ell { color: #57534a; align-self: center; font-size: 11px; padding: 0 2px; }

#notebook-drawer { left: 0; top: auto; height: 42vh; width: 420px; border-top: 1px solid #cfc8b81f; border-right: 1px solid #cfc8b81f; }
#notebook-text {
  flex: 1; margin: 14px 18px 18px; padding: 12px 14px; resize: none;
  background: #ffffff0a; border: 1px solid #cfc8b81f; color: #ded7c5;
  font-family: inherit; font-size: 14px; line-height: 1.65; border-radius: 2px;
}
#notebook-text:focus { outline: none; border-color: #7fb2a844; }

/* -------------------------------------------------------- title screen */

#title-screen {
  position: fixed; inset: 0; z-index: 60; background: radial-gradient(120% 130% at 50% 10%, #10141b, #05070a 75%);
  display: flex; align-items: center; justify-content: center; color: #cfc8b8;
  transition: opacity 1.4s; text-align: center;
}
#title-screen.fading { opacity: 0; pointer-events: none; }
.title-glyph { width: 74px; height: 74px; margin: 0 auto 30px; opacity: 0.7; }
.title-glyph svg { width: 100%; height: 100%; color: var(--tide); }
#title-screen h1 { font-size: 34px; font-weight: normal; letter-spacing: 0.55em; margin-left: 0.55em; }
.title-sub { font-style: italic; color: #8d8779; margin-top: 14px; font-size: 15px; }
.title-note { color: #57534a; margin-top: 44px; font-size: 12.5px; letter-spacing: 0.06em; }
#btn-begin {
  margin-top: 26px; padding: 12px 34px; background: none; border: 1px solid #7fb2a855;
  color: #a8c8c0; font-size: 13px; letter-spacing: 0.22em; font-variant: small-caps; border-radius: 2px;
  transition: background .3s, border-color .3s;
}
#btn-begin:hover { background: #7fb2a814; border-color: #7fb2a899; }
.title-continue { margin-top: 16px; font-size: 11.5px; color: #57534a; font-style: italic; }

/* ------------------------------------------------------------- publish */

.pub { width: min(720px, 92vw); background: linear-gradient(174deg, #f2ead9, #e5dac2); color: #3a3226;
  padding: 48px 56px 40px; box-shadow: 0 30px 80px #000000cc; border-radius: 2px; }
.pub h2 { font-size: 20px; font-weight: normal; letter-spacing: 0.16em; font-variant: small-caps; margin-bottom: 6px; }
.pub .pub-intro { font-size: 13.5px; font-style: italic; opacity: 0.7; line-height: 1.6; margin-bottom: 26px; }
.pub-field { margin-bottom: 26px; }
.pub-field label { display: block; font-size: 11px; letter-spacing: 0.18em; font-variant: small-caps; opacity: 0.65; margin-bottom: 7px; }
.pub-field input[type=text], .pub-field textarea {
  width: 100%; padding: 10px 13px; background: #ffffff66; border: 1px solid #3a322633;
  font-family: inherit; font-size: 15px; color: #2f2417; border-radius: 2px;
}
.pub-field textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.pub-field input:focus, .pub-field textarea:focus { outline: none; border-color: #3a322677; }
.pub-passage {
  background: #00000008; border: 1px solid #3a32261f; border-radius: 3px;
  padding: 12px 14px 8px; margin-bottom: 10px; overflow-x: auto;
}
.pub-passage .line { flex-wrap: nowrap; }
.pub-passage .tok { cursor: default; min-width: 28px; }
.pub-passage .tok svg.glyph { width: 30px; height: 30px; }
.pub-passage .tok .gloss { font-size: 9.5px; }
.pub-src { font-size: 10.5px; font-style: italic; opacity: 0.55; margin-bottom: 14px; }
.pub-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 34px; }
.pub-actions button {
  padding: 11px 26px; border-radius: 2px; font-size: 12.5px; letter-spacing: 0.16em; font-variant: small-caps;
  border: 1px solid #3a322644; background: none; color: #3a3226;
}
.pub-actions button:hover { background: #3a32260d; }
.pub-actions .primary { background: #3a3226; color: #efe6d4; border-color: #3a3226; }
.pub-actions .primary:hover { background: #4a4232; }
.pub-warn { font-size: 12px; font-style: italic; opacity: 0.6; align-self: center; margin-right: auto; }

/* the monograph */
.mono { width: min(740px, 94vw); background: #f6f1e4; color: #33291c; padding: 64px 68px 56px;
  box-shadow: 0 30px 80px #000000cc; }
.mono-kicker { text-align: center; font-size: 11px; letter-spacing: 0.3em; opacity: 0.55; margin-bottom: 22px; }
.mono h1 { text-align: center; font-size: 27px; font-weight: normal; line-height: 1.35; margin-bottom: 10px; }
.mono-byline { text-align: center; font-style: italic; font-size: 13.5px; opacity: 0.65; margin-bottom: 44px; }
.mono h3 { font-size: 13px; letter-spacing: 0.22em; font-variant: small-caps; font-weight: normal;
  margin: 38px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #33291c33; }
.mono p { font-size: 14.5px; line-height: 1.8; margin-bottom: 13px; }
.mono p.mono-user { white-space: pre-wrap; }
.mono .pub-passage { background: #00000005; }
.mono-lex { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 3px 14px; }
.mono-lex-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.mono-lex-item svg.glyph { width: 22px; height: 22px; flex: 0 0 auto; opacity: 0.8; }
.mono-lex-item em { opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono-close-line { margin-top: 46px; padding-top: 18px; border-top: 1px solid #33291c33;
  font-style: italic; font-size: 13.5px; opacity: 0.75; line-height: 1.7; }
.mono-actions { text-align: center; margin-top: 40px; }
.mono-actions button {
  padding: 12px 30px; background: none; border: 1px solid #33291c55; color: #33291c;
  font-size: 12px; letter-spacing: 0.2em; font-variant: small-caps; border-radius: 2px;
}
.mono-actions button:hover { background: #33291c0d; }

#ending-caption {
  position: fixed; left: 0; right: 0; bottom: 12vh; z-index: 15; text-align: center;
  color: #b9b2a2cc; font-style: italic; font-size: 15.5px; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 3s; pointer-events: none;
}
#ending-caption.show { opacity: 1; }

/* ------------------------------------------------------------ helpers */

@media (max-width: 900px) {
  #lexicon-drawer { width: min(86vw, 340px); }
  #glyph-panel { width: min(86vw, 380px); }
  .doc { padding: 32px 26px 26px; }
}
::selection { background: #7fb2a855; }