/* davecooper.name -- hand-written, no build step.
   Light and dark follow the OS.  The Park Hye Jin book's three
   switches are data attributes on <html>, stamped by the head script
   (source/page.lisp); the rules under "switches" do the showing.

   This sheet is the site's STRUCTURE.  The colours are a skin's:
   every colour here is one of the tokens --bg --bg-card --ink
   --ink-soft --accent --accent-soft --rule --pill --pill-on
   --pill-on-ink --gloss --warn, set by the sheet of the skin on
   <html data-skin> (css/skins/<id>.css, linked after this one;
   source/skins.lisp says what a skin is).  css/skins/plain.css holds
   the colours this sheet used to carry. */

/* The reader controls (gwl's reader-controls-mixin, prefix dc): the
   switch and the pill read these three, from the skin's tokens.
   html[data-size] scaling comes with the mixin's own css. */
:root {
  --dc-controls-ink: var(--accent);
  --dc-controls-rule: var(--rule);
  --dc-controls-surface: color-mix(in oklab, var(--bg-card) 88%, transparent);
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Source Serif 4", "Noto Serif", serif;
  line-height: 1.5;
}
a { color: var(--accent-soft); }
a:hover { color: var(--accent); }
h1, h2, h3 { color: var(--accent); line-height: 1.2; }
h1 { font-size: 1.9rem; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }

.dc-header, .dc-main, .dc-footer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.dc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* room on the right for the fixed switch and pill (130px of chrome) */
  padding-right: 140px;
  border-bottom: 1px solid var(--rule);
}
.dc-brand { font-weight: 700; text-decoration: none; color: var(--accent); }
.dc-nav a { text-decoration: none; margin-left: 1rem; }
.dc-main { padding-top: 1.5rem; padding-bottom: 3rem; }
.dc-footer {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  padding-bottom: 2rem;
  color: var(--ink-soft);
  font-size: .85rem;
}
/* the visitor counter (source/counter.lisp): hidden until the script
   has the number, then six odometer digits */
.dc-counter { display: none; margin: .75rem 0 0; }
.dc-counter.dc-counted { display: block; }
.dc-counter-label { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; margin-right: .35rem; }
.dc-count { display: inline-flex; gap: 2px; vertical-align: middle; }
.dc-digit {
  display: inline-block;
  min-width: 1.05em;
  padding: .1em .15em;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-size: .9rem;
  font-weight: 700;
  color: var(--pill-on-ink);
  background: var(--pill-on);
  border-radius: .2rem;
}
/* the skin picker (source/skins.lisp) */
.dc-skins { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; }
.dc-skins-label { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; margin-right: .2rem; }
.dc-skin-btn {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .8rem;
  border-radius: 999px;
  padding: .1rem .7rem;
  cursor: pointer;
}
.dc-skin-btn[aria-pressed="true"] { background: var(--pill-on); border-color: var(--pill-on); color: var(--pill-on-ink); }
/* the home page's comments (source/comments.lisp) */
.dc-comments { margin: 1rem 0; }
.dc-comments-none { color: var(--ink-soft); font-style: italic; }
.dc-comment {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: .75rem;
  padding: .6rem 1rem;
  margin: .6rem 0;
}
.dc-comment-head { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.dc-comment-name { font-weight: 700; color: var(--accent); margin-right: .6rem; }
.dc-comment-text { margin: .3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-comment-reply { margin: .6rem 0 .1rem .4rem; padding-left: .8rem; border-left: 3px solid var(--accent-soft); }
.dc-comments-section { margin-top: 3rem; padding-top: .5rem; border-top: 1px solid var(--rule); }
.dc-comment-form { margin-top: 1.25rem; }
.dc-comment-form label { display: block; font-size: .9rem; margin: .6rem 0; }
.dc-comment-form input[type="text"], .dc-comment-form textarea {
  display: block;
  width: 100%;
  margin-top: .2rem;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: .4rem;
  padding: .5rem .6rem;
  font: inherit;
  font-size: 1rem;
}
.dc-comment-form input[type="text"] { max-width: 20rem; }
.dc-comment-post {
  border: 0;
  background: var(--pill-on);
  color: var(--pill-on-ink);
  font: inherit;
  font-size: .95rem;
  border-radius: 999px;
  padding: .4rem 1.1rem;
  cursor: pointer;
}
.dc-comment-msg { min-height: 1.5em; font-size: .9rem; color: var(--warn); }
.dc-comment-msg[data-outcome="ok"], .dc-comment-msg[data-outcome="pending"] { color: var(--accent-soft); }
/* the decoration layer: a skin's to dress, hidden otherwise */
.dc-decor { display: none; }
.dc-lead { color: var(--ink-soft); }
.dc-sections { list-style: none; padding: 0; }
.dc-sections li { margin: .75rem 0; }
.dc-section-blurb { display: block; color: var(--ink-soft); font-size: .9rem; }
.dc-note { color: var(--ink-soft); font-size: .9rem; }
.dc-intro { font-size: 1.1rem; }
h1.dc-title { margin-bottom: 0; }
.dc-subtitle { margin: .1rem 0 1.25rem; color: var(--ink-soft); font-size: 1.05rem; letter-spacing: .01em; }
/* the subtitle is the door to the other register (dnd.lisp): a link
   that stays faint until it is pointed at */
.dc-subtitle a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.dc-subtitle a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.dc-elsewhere { color: var(--ink-soft); font-size: .95rem; }
.dc-group {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 1.25rem 0 0;
}
.dc-sections a[lang="sa"] { font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", serif; }
.dc-name { color: var(--ink-soft); }
.dc-repo { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95em; }

/* ---- the other register: Devakīnandana das (dnd.lisp) ----
   The same tokens, a different voice: centered, airier, the
   Devanāgarī leading. */
.dnd [lang="sa"] { font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", serif; }
.dnd-head { text-align: center; margin: .5rem 0 2rem; }
.dnd-deva { font-size: 2.3rem; line-height: 1.3; color: var(--accent); margin: 0; }
.dnd-title { font-size: 1.5rem; font-weight: 400; letter-spacing: .03em; margin: .25rem 0 0; }
.dnd-gloss { color: var(--ink-soft); font-style: italic; margin: .35rem 0 0; }
body.dnd .dc-main h2 {
  text-align: center;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2.5rem;
}
body.dnd .dc-main > p, body.dnd .dc-main > ul { max-width: 36rem; margin-left: auto; margin-right: auto; }
/* the FAQ: each question a native details/summary, folded until asked */
.dnd-faq { max-width: 36rem; margin: .75rem auto; }
.dnd-faq summary { cursor: pointer; font-weight: 600; }
.dnd-faq summary:hover { color: var(--accent); }
.dnd-faq p { margin: .6rem 0 0; }
.dnd-mantra {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: .75rem;
  padding: 1.1rem 1rem;
  margin: 2.5rem auto 0;
  max-width: 36rem;
}
.dnd-mantra p { margin: 0; }
.dnd-mantra [lang="sa"] { font-size: 1.35rem; line-height: 1.6; color: var(--accent); }
.dnd-mantra .dnd-iast { color: var(--ink-soft); font-style: italic; font-size: .95rem; line-height: 1.5; }
.dnd-mantra [lang="sa"] + .dnd-iast { margin-top: .6rem; }
/* the longer brand: on a phone the nav takes its own line under it,
   clear of the fixed controls on the right */
@media (max-width: 560px) {
  body.dnd .dc-header { flex-wrap: wrap; }
  body.dnd .dc-nav { width: 100%; margin-top: .4rem; }
  body.dnd .dc-nav a:first-child { margin-left: 0; }
  body.dnd .dc-nav a { white-space: nowrap; }
}

/* ---- the résumé (resume.lisp) ---- */
.cv h1 { margin-bottom: .25rem; }
.cv h2 {
  border-bottom: 1px solid var(--rule);
  padding-bottom: .2rem;
}
.cv h3 { font-size: 1.05rem; margin: 1.25rem 0 0; }
.cv-contact, .cv-when { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.cv-summary { margin-top: 1rem; }
.cv-entry ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.cv-entry li, .cv-pubs li { margin: .3rem 0; }
.cv-pubs { padding-left: 1.2rem; }
.cv-pub-title { font-weight: 700; }
.cv-skills { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.cv-skills dt { font-weight: 700; }
.cv-skills dd { margin: 0; }
@media (max-width: 560px) {
  .cv-skills { grid-template-columns: 1fr; }
  .cv-skills dd { margin-bottom: .4rem; }
}
@media print {
  html { font-size: 90%; }
  body { background: #fff; color: #000; }
  .dc-header, .dc-footer, .dc-decor, .dc-comments-section, .dc-theme-toggle, .dc-size-toggle { display: none !important; }
  body::before, body::after, .dc-main::before, .dc-main::after { display: none !important; }
  .dc-main { max-width: none; padding: 0; }
  .cv a { color: inherit; text-decoration: none; }
  .cv-entry, .cv-pubs li { break-inside: avoid; }
}
.dc-stamp {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .1rem .7rem;
  margin-bottom: .75rem;
  text-decoration: none;
}

/* ---- the book's index ---- */
.phj-release { margin-top: 1.5rem; }
.phj-release h2 { margin-bottom: .25rem; }
.phj-release .phj-year { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.phj-songs { list-style: none; padding: 0; margin: 0; }
.phj-songs li a {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: .75rem;
  padding: .6rem 1rem;
  margin: .4rem 0;
  text-decoration: none;
  color: var(--ink);
}
.phj-songs li a:hover { border-color: var(--accent-soft); }
.phj-songs .phj-title { font-weight: 700; color: var(--accent); }
.phj-songs .phj-first { display: block; font-size: .85rem; color: var(--ink-soft); }
.phj-songs .phj-first[lang="ko"] { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif; }

/* ---- a song ---- */
.phj-meta { color: var(--ink-soft); font-size: .9rem; margin-top: 0; }
.phj-switches { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.phj-group {
  display: inline-flex;
  background: var(--pill);
  border-radius: 999px;
  padding: .15rem;
}
.phj-btn {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  border-radius: 999px;
  padding: .25rem .75rem;
  cursor: pointer;
}
.phj-btn[aria-pressed="true"] { background: var(--pill-on); color: var(--pill-on-ink); }
.phj-btn[lang="ko"] { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif; }

.blk { margin: 1.5rem 0; }
.blk-label {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
}
.line { margin: .55rem 0; }
.line > span { display: block; }
.l-ko {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--accent);
}
.l-rr { font-size: 1rem; color: var(--ink-soft); }
html[data-phj-script="rr"] .l-rr { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.l-x { font-size: 1.05rem; }
.l-en { font-style: italic; }
.l-gloss { font-size: .85rem; color: var(--gloss); line-height: 1.6; }
.l-gloss .g-w {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif;
  font-weight: 700;
}
.l-gloss .g-sep { opacity: .5; padding: 0 .25rem; }
.l-count {
  display: inline-block !important;
  font-size: .75rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0 .45rem;
  margin-top: .15rem;
}
.l-unsure {
  display: inline-block !important;
  font-size: .7rem;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 999px;
  padding: 0 .45rem;
  margin: .15rem 0 0 .35rem;
}
.blk-en {
  margin: .75rem 0 0;
  padding: .5rem .9rem;
  border-left: 3px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
}
.blk-en p { margin: .25rem 0; }
.phj-credit {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .85rem;
}
.phj-neighbours {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  margin-top: 2rem;
  font-size: .9rem;
}
.phj-neighbours .next { text-align: right; }

/* ---- click to hear (the say switch; page.lisp) ---- */
.phj-novoice { display: none; align-self: center; font-size: .8rem; color: var(--warn); }
html[data-phj-voice="no"] .phj-novoice { display: inline; }
html[data-phj-say="syl"] .l-ko .s,
html[data-phj-say="word"] .l-ko .w,
html[data-phj-say="line"] .l-ko { cursor: pointer; }
html[data-phj-say="syl"] .l-ko .s:hover,
html[data-phj-say="word"] .l-ko .w:hover,
html[data-phj-say="line"] .l-ko:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.l-ko .speaking, .l-ko.speaking { background: var(--pill); border-radius: .25rem; }

/* ---- switches ---- */
html[data-phj-script="ko"] .l-rr { display: none; }
html[data-phj-script="rr"] .l-ko { display: none; }
html:not([data-phj-tr="line"]) .l-en { display: none; }
html:not([data-phj-tr="end"]) .blk-en { display: none; }
html:not([data-phj-gloss="on"]) .l-gloss { display: none; }
html[data-phj-view="date"] .phj-by-album { display: none; }
html:not([data-phj-view="date"]) .phj-by-date { display: none; }

/* ---- the index's states: transcribed, draft, to come ---- */
.phj-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: 0 .5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .15em;
  color: var(--ink-soft);
}
.phj-badge-curated { background: var(--pill-on); border-color: var(--pill-on); color: var(--pill-on-ink); }
.phj-draft .phj-badge { border-color: var(--gloss); color: var(--gloss); }
.phj-songs .phj-todo .phj-title { font-weight: 400; color: var(--ink-soft); }
.phj-songs .phj-todo a { background: transparent; border-style: dashed; }
.phj-songs .phj-when { display: block; font-size: .8rem; color: var(--ink-soft); }
.phj-by-date { margin-top: 1rem; }

/* ---- the wiki (wiki.lisp) ---- */
.wiki-status {
  border: 1px dashed var(--rule);
  border-radius: .5rem;
  padding: .5rem .75rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
.wiki { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: .5rem; }
.wiki-msg {
  display: none;
  border-left: 3px solid var(--warn);
  background: var(--bg-card);
  padding: .5rem .75rem;
}
.wiki-msg.wiki-ok { border-left-color: var(--accent-soft); }
.wiki-msg:target { display: block; }
.wiki details { margin: 1rem 0; }
.wiki summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.wiki-live { font-size: .9rem; color: var(--ink-soft); }
.wiki-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .75rem;
  font-size: .85rem;
  margin: .75rem 0 1rem;
}
.wiki-help dt { white-space: nowrap; }
.wiki-help dd { margin: 0; color: var(--ink-soft); }
.wiki code, .wiki pre, .wiki textarea {
  font-family: ui-monospace, "SF Mono", Menlo, "Noto Sans Mono CJK KR", "D2Coding", monospace;
}
.wiki label { display: block; font-size: .9rem; }
.wiki textarea, .wiki input[type="text"] {
  width: 100%;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: .4rem;
  padding: .5rem .6rem;
  font-size: 1rem;
}
.wiki textarea { line-height: 1.5; margin-top: .25rem; }
.wiki-row { display: grid; grid-template-columns: 1fr 2fr; gap: .75rem; margin: .75rem 0; }
.wiki-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wiki .phj-btn { background: var(--pill); }
.wiki .wiki-save { background: var(--pill-on); color: var(--pill-on-ink); padding: .4rem 1.1rem; font-size: .95rem; }
.wiki-revs { padding-left: 1.5rem; }
.wiki-revs li { margin: .6rem 0; }
.wiki-revs details { margin: .25rem 0; }
.wiki-revs summary { font-weight: 400; font-size: .85rem; }
.wiki-revs pre {
  white-space: pre-wrap;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: .4rem;
  padding: .5rem .75rem;
  font-size: .85rem;
}
.wiki-rev-head { font-size: .9rem; }

@media (max-width: 560px) {
  .wiki-row { grid-template-columns: 1fr; }
  .wiki-help { grid-template-columns: 1fr; }
  .wiki-help dd { margin-bottom: .4rem; }
}

@media (min-width: 640px) {
  .l-ko { font-size: 1.35rem; }
  html[data-phj-script="rr"] .l-rr { font-size: 1.25rem; }
}