/* =============================================================
   write.css — the editor owns its own look.

   It deliberately does NOT build on style.css. That stylesheet lays
   out a reading page: a fixed ornament down both margins, a serif
   column, a prose grid. Inside a tool it covers the post list and
   takes the room needed for writing. The preview iframe loads it
   instead, where it is exactly right.

   The colours are the site's, copied rather than imported, so the
   editor feels like the same object. Two themes only: a tool does not
   need four.
   ============================================================= */

:root {
  --paper:  #dce9ca;
  --raised: #cfe0b8;
  --sunk:   #d3e3bf;
  --ink:    #141f0e;
  --muted:  #47573c;
  --faint:  #75895f;
  --rule:   #bcd1a0;
  --accent: #2f6b23;
  --bad:    #a3331f;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino,
           "Noto Serif", Georgia, Cambria, serif;
  --sans:  system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
           "DejaVu Sans Mono", monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131312; --raised: #1b1b19; --sunk: #0e0e0d;
    --ink: #dbd7ce; --muted: #908a80; --faint: #6a655d;
    --rule: #2b2a26; --accent: #d08b6a; --bad: #e0705a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131312; --raised: #1b1b19; --sunk: #0e0e0d;
  --ink: #dbd7ce; --muted: #908a80; --faint: #6a655d;
  --rule: #2b2a26; --accent: #d08b6a; --bad: #e0705a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* The panes, the fields and the empty state are all shown with
   display:grid or :flex, and an author rule beats the browser's
   [hidden] { display: none } -- so hiding them did nothing at all
   until this line. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* the panes scroll; the page does not */
}

/* --- the bar ------------------------------------------------- */

.bar {
  flex: none;
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
}
.bar .name {
  font-family: var(--serif); font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.bar .where {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint);
}
.bar .spacer { margin-left: auto; }

.state {
  font-size: .76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 30ch;
}
.state.busy  { color: var(--accent); }
.state.bad   { color: var(--bad); }
.state.dirty { color: var(--ink); font-weight: 600; }

button, .wide-btn {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 5px;
  padding: .32em .7em;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.primary:hover { opacity: .88; }
button.danger:hover { color: var(--bad); border-color: var(--bad); }
button[disabled] { opacity: .35; cursor: default; }

#hidebtn { font-size: .72rem; letter-spacing: .04em; padding: .3em .55em; }
/* green while it is on the site, struck through while it is not */
#hidebtn { color: var(--accent); border-color: var(--accent); }
#hidebtn.off { color: var(--muted); border-color: var(--rule); text-decoration: line-through; }

.tabs { display: none; gap: .25rem; }
.tabs button { font-size: .8rem; padding: .25em .6em; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- the frame ----------------------------------------------- */

/* Both divisions are draggable, and both remember where you put them.
   --side-w and --split are set on <html> by write.js. */
.wrap {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--side-w, 14rem) 5px minmax(0, 1fr);
}

.gutter {
  cursor: col-resize;
  background: var(--rule);
  border: none;
  position: relative;
  touch-action: none;           /* so a drag does not scroll the page */
}
.gutter::after {               /* a bigger target than it looks */
  content: ""; position: absolute; inset: 0 -4px;
}
.gutter:hover, .gutter:focus-visible { background: var(--accent); outline: none; }

/* Writing only, or reading only: the layout button cycles these. */
body[data-layout="write"] .pane.read,
body[data-layout="write"] #splitgutter { display: none; }
body[data-layout="write"] .panes { grid-template-columns: minmax(0, 1fr); }

body[data-layout="read"] .pane.source,
body[data-layout="read"] #splitgutter { display: none; }
body[data-layout="read"] .panes { grid-template-columns: minmax(0, 1fr); }

body[data-side="off"] .side,
body[data-side="off"] #sidegutter { display: none; }
body[data-side="off"] .wrap { grid-template-columns: minmax(0, 1fr); }

.side {
  border-right: 1px solid var(--rule);
  background: var(--raised);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.side-top {
  position: sticky; top: 0;
  background: var(--raised);
  padding: .6rem .55rem .5rem;
  display: grid; gap: .4rem;
  border-bottom: 1px solid var(--rule);
}
.wide-btn { width: 100%; }

/* New post: a kind to start from, because a poem and an essay do not
   begin the same way. */
.newmenu { position: relative; }
.newmenu > summary {
  list-style: none; cursor: pointer; text-align: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 5px;
  padding: .32em .7em; font-size: .9rem;
}
.newmenu > summary::-webkit-details-marker { display: none; }
.newmenu > summary:hover { border-color: var(--muted); }
.newmenu[open] > summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.newmenu > div {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px);
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 5px;
  padding: .25rem;
  box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}
.newmenu button {
  display: block; width: 100%; text-align: left;
  border: none; background: none; border-radius: 4px;
  padding: .34rem .45rem; font-size: .84rem;
}
.newmenu button:hover { background: var(--raised); }
.newmenu button small { display: block; color: var(--faint); font-size: .68rem; }
.side input[type="search"] {
  width: 100%; font: inherit; font-size: .84rem;
  padding: .3em .5em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 5px;
}

.list { list-style: none; margin: 0; padding: .35rem; flex: 1; }
.list li { margin: 0 0 1px; }
.list button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-radius: 5px;
  padding: .4rem .45rem;
  font-size: .86rem; line-height: 1.25;
}
.list button:hover { background: var(--sunk); }
.list button[aria-current="true"] { background: var(--ink); color: var(--paper); }
.list small {
  display: block; font-size: .68rem; color: var(--faint);
  margin-top: .1rem; font-variant-numeric: tabular-nums;
}
.list button[aria-current="true"] small { color: color-mix(in oklab, var(--paper) 62%, transparent); }
.list .tag-hidden {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
}
.hint { font-size: .68rem; color: var(--faint); margin: 0; padding: .3rem .6rem .6rem; }

/* --- the middle ---------------------------------------------- */

.main { min-width: 0; display: flex; flex-direction: column; }

/* Front matter: shut by default, because the writing is the point.
   The summary line still shows what it holds. */
.fields {
  flex: none;
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
}
.fields > summary {
  cursor: pointer;
  padding: .45rem .85rem;
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .8rem;
}
.fields > summary::marker { color: var(--faint); }
.sum-title { font-family: var(--serif); font-size: .95rem; font-weight: 600; }
.sum-meta { color: var(--faint); font-size: .72rem; }

.fields .grid {
  display: grid; gap: .45rem .7rem;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-areas:
    "title title title"
    "slug  date  kind"
    "tags  tags  tags"
    "summ  summ  summ"
    "acts  acts  acts";
  padding: .2rem .85rem .75rem;
}
.f-title   { grid-area: title; }
.f-slug    { grid-area: slug; }
.f-date    { grid-area: date; }
.f-kind    { grid-area: kind; }
.f-tags    { grid-area: tags; }
.f-summary { grid-area: summ; }
.f-acts    { grid-area: acts; display: flex; align-items: center; gap: .6rem; }
.f-acts .spacer { margin-left: auto; }
.f-acts a { font-size: .78rem; color: var(--accent); }

.fields label { display: block; }
.fields label > span {
  display: block;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); margin-bottom: .12rem;
}
.fields input {
  width: 100%; font: inherit;
  padding: .3em .45em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 5px;
}
.fields input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
#f-title { font-family: var(--serif); font-size: 1rem; }
#f-slug  { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.toggle { display: flex; align-items: center; gap: .35rem; font-size: .8rem; }
.toggle > span { all: unset; }

/* A study has no date and no category: it is a document, not an entry
   in a feed. Its one switch is whether it is public at all. */
body[data-type="study"] .f-date,
body[data-type="study"] .f-kind,
body[data-type="study"] .f-tags { display: none; }
body[data-type="study"] .fields .grid {
  grid-template-areas:
    "title title title"
    "slug  slug  slug"
    "summ  summ  summ"
    "acts  acts  acts";
}

.list li.group {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint);
  padding: .55rem .5rem .15rem;
}

/* the two panes */
.panes {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--split, 1fr) 5px minmax(0, 1fr);
}
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pane.source { border-right: 1px solid var(--rule); }

#src {
  flex: 1; min-height: 0; width: 100%;
  display: block;
  resize: none; border: none; outline: none;
  padding: 1.1rem 1.1rem .6rem;
  font-family: var(--mono); font-size: 14.5px; line-height: 1.7;
  color: var(--ink); background: var(--paper);
  tab-size: 2;
}

/* dropping a picture on the editor */
.pane.source { position: relative; }
.pane.source.dropping::after {
  content: "drop the picture";
  position: absolute; inset: .5rem;
  border: 2px dashed var(--accent); border-radius: 8px;
  display: grid; place-items: center;
  font-size: .9rem; color: var(--accent);
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  pointer-events: none;
}

.pics {
  flex: none; max-height: 48%;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
  background: var(--raised);
}
.pics-bar {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  font-size: .78rem;
  border-bottom: 1px solid var(--rule);
}
.pics-bar .spacer { margin-left: auto; }
.pics-bar button { font-size: .76rem; padding: .22em .55em; }
.pics-grid {
  flex: 1; overflow-y: auto;
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  padding: .5rem .6rem .7rem;
}
.pics-grid figure {
  margin: 0; cursor: pointer; text-align: center;
  border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
  background: var(--paper);
}
.pics-grid figure:hover { border-color: var(--accent); }
.pics-grid img {
  display: block; width: 100%; height: 64px; object-fit: cover;
}
.pics-grid figcaption {
  font-size: .62rem; color: var(--faint);
  padding: .18rem .2rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.pics-empty { color: var(--faint); font-size: .78rem; padding: .6rem; }

.help-list {
  flex: 1; overflow-y: auto;
  padding: .5rem .7rem .7rem;
  font-size: .78rem; line-height: 1.7;
  columns: 2; column-gap: 1.4rem;
}
.help-list div { break-inside: avoid; color: var(--muted); }
.help-list code {
  font-family: var(--mono); color: var(--accent);
  display: inline-block; min-width: 4.5ch;
}
.help-head {
  break-inside: avoid;
  margin-top: .5rem; padding-top: .35rem;
  border-top: 1px solid var(--rule);
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint);
}

/* the characters a phone keyboard makes awkward */
.keys {
  flex: none; display: flex; gap: .25rem; overflow-x: auto;
  padding: .3rem .45rem;
  border-top: 1px solid var(--rule);
  background: var(--raised);
  scrollbar-width: none;
}
.keys::-webkit-scrollbar { display: none; }
.keys button {
  flex: none;
  font-family: var(--mono); font-size: .76rem;
  padding: .3em .55em;
  white-space: nowrap;
}

.foot {
  flex: none; display: flex; align-items: center; gap: .6rem;
  padding: .28rem .7rem;
  border-top: 1px solid var(--rule);
  background: var(--raised);
  font-size: .7rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.foot .spacer { margin-left: auto; }
.problems { color: var(--bad); }

.pane.read { background: var(--paper); }
#preview { flex: 1; width: 100%; height: 100%; border: 0; display: block; }

/* --- narrow screens ------------------------------------------ */

@media (max-width: 62rem) {
  .tabs { display: flex; }
  #layout { display: none; }              /* the tabs do this job here */
  .wrap { grid-template-columns: minmax(0, 1fr); }

  .side, .pane.source, .pane.read, .gutter { display: none; }
  .panes { grid-template-columns: minmax(0, 1fr); }

  body[data-view="list"] .side { display: flex; }
  body[data-view="list"] .main { display: none; }
  body[data-view="edit"] .pane.source { display: flex; }
  body[data-view="read"] .pane.read   { display: flex; }

  .fields .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "slug  slug"
      "date  kind"
      "tags  tags"
      "summ  summ"
      "acts  acts";
  }
  .bar .name { display: none; }           /* the tabs need the room */
  .state { max-width: 14ch; }
}