/* gruvbox ground, orange accent, blue-teal links, grey notes — win2k controls */
:root {
  --bg:        #1d2021;
  --panel:     #282828;
  --hover:     #32302f;
  --rule:      #3c3836;

  --orange:    #fe8019;  /* theme accent: mark, title, button text on hover */
  --day:       #d65d0e;  /* day headers, unfilled */
  --link:      #7fbbb3;
  --link-hot:  #a9dcd4;
  --text:      #a89984;  /* notes, thoughts, comments */
  --host:      #665c54;

  --icon:      #504945;
  --icon-hot:  #d65d0e;
  --danger:    #fb4934;
  --moss:      #a7c080;  /* entry separator */

  /* beveled edges: light top-left, dark bottom-right (and inverted) */
  --light:     #7c6f64;
  --dark:      #141617;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.25rem 0.75rem 4rem;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
}

.wrap {
  max-width: 42rem;
  margin: 0 auto;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hot); text-decoration: underline; }
a:visited { color: #6a9a94; }

.mark {
  image-rendering: pixelated;
  vertical-align: -2px;
  margin-right: .4rem;
}

/* ------------------------------------------------------------- header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .4rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
}
.top h1 {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 0;
}

/* Pixel-art title, same grid discipline as the mast. */
.pixtitle {
  fill: var(--orange);
  height: 14px;
  width: auto;
}

.top nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .72rem;
}
.top nav a, .top nav .link {
  color: var(--host);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
}
.top nav a:hover, .top nav .link:hover { color: var(--orange); }
.top nav form { display: inline; }

button.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------- win2k form controls */

textarea, input[type=text], input[type=password] {
  width: 100%;
  padding: .25rem .35rem;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  border: 2px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark); /* sunken */
  border-radius: 0;
  resize: vertical;
}
textarea {
  display: block;
  min-height: 50px;
  max-height: 40vh;
  field-sizing: content;   /* grows with content; wire.js covers browsers without it */
  overflow-y: auto;
}
textarea::placeholder, input::placeholder { color: var(--host); }

/* No focus ring on text fields — the caret is the signal, and it is orange. */
textarea, input[type=text], input[type=password] { caret-color: var(--orange); }
textarea:focus, input:focus { outline: none; }

/* Engraved label: text sits in the page colour, lighting up orange on hover. */
button[type=submit] {
  padding: .25rem .9rem;
  background: var(--rule);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light); /* raised */
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
button[type=submit]:hover { color: var(--orange); }
button[type=submit]:active {
  border-color: var(--dark) var(--light) var(--light) var(--dark); /* pressed in */
  padding: .3rem .85rem .2rem .95rem;
}

/* ------------------------------------------------------------ compose */

.compose {
  margin-bottom: 1rem;
  padding: .5rem;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
}
.compose .row {
  display: flex;
  gap: .4rem;
  margin-top: .4rem;
}
.compose input { flex: 1; }

/* -------------------------------------------------- day header, no fill */

.day {
  margin: 1.15rem 0 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1;
}
.day span {
  display: inline-block;
  padding: 0 0 .3rem;
  color: var(--day);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ entries */

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Two columns: content left, icons right. Grid rather than flex-wrap so the
   icon column can never be pushed onto its own line by a long title. */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .5rem;
  padding: .5rem .35rem .45rem;
  border-bottom: 1px dotted var(--moss);
}
.entry:hover { background: var(--hover); }

.main { grid-column: 1; min-width: 0; }

.t {
  color: var(--link);
  font-size: 14px;
}
.thought { color: var(--text); }        /* must follow .t to win */

.host {
  color: var(--host);
  font-size: .76rem;
  white-space: nowrap;
}

/* A link and its host share one line; the link truncates so the host and the
   icon column always stay visible. */
.line {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  min-width: 0;
}
.line .t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line .host { flex: 0 0 auto; }

/* Thoughts are not links and keep their line breaks — never truncated. */
.thought-line { display: block; }
.thought-line .t {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: visible;
}

.cmt {
  display: flex;
  gap: .35rem;
  margin: .1rem 0 .02rem;
  color: var(--text);
  font-size: .78rem;
  line-height: 1.35;
  white-space: pre-wrap;
}
/* Box-drawing corner, monospace so the glyph is present and metrically stable.
   As a fixed flex item, wrapped lines indent under the text, not the glyph. */
.cmt::before {
  content: "\2514";
  flex: 0 0 auto;
  color: var(--host);
  font-family: Menlo, Consolas, monospace;
}

/* ------------------------------- per-row icons: anchors, never reflowed */

.acts {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-top: .15rem;
}
.ico {
  display: inline-block;
  padding: .1rem;
  line-height: 0;
}
.ico:hover { text-decoration: none; }

.ic { fill: var(--icon); }
.entry:hover .ic { fill: var(--icon-hot); }
.ico:hover .ic, .ico:focus-visible .ic { fill: var(--link-hot); }
.ico.del:hover .ic, .ico.del:focus-visible .ic { fill: var(--danger); }

/* --------------------------------- comment editor: full-width, inline */

.cmt-edit { display: none; }
.cmt-edit:target {
  display: flex;
  grid-column: 1 / -1;  /* own row, spanning both columns; icons above stay put */
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
}
.cmt-edit input[type=text] { flex: 1; font-size: .8rem; }

button.iconbtn {
  padding: .15rem;
  background: none;
  border: 0;
  line-height: 0;
  cursor: pointer;
}
button.iconbtn:hover .ic, button.iconbtn:focus-visible .ic { fill: var(--link-hot); }
button.iconbtn:active { padding: .15rem; }

/* ------------------------------------------------ delete confirm modal */

.modal { display: none; }
.modal:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}
.modal-box {
  position: relative;
  width: 100%;
  max-width: 21rem;
  padding: .75rem;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
}
.modal-q {
  margin: 0 0 .4rem;
  color: var(--text);
  font-weight: 700;
}
.modal-what {
  margin: 0 0 .75rem;
  padding-left: .6rem;
  border-left: 2px solid var(--rule);
  color: var(--host);
  font-size: .78rem;
  line-height: 1.35;
  max-height: 4.2em;
  overflow: hidden;
}
.modal-acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}
.modal-cancel {
  color: var(--host);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.modal-cancel:hover { color: var(--text); text-decoration: none; }
button.danger { color: var(--danger); }
button.danger:hover { color: var(--danger); background: #46312f; }

.empty { color: var(--host); }

/* -------------------------------------------------------------- login */

.login {
  max-width: 15rem;
  margin-top: 18vh;
  padding: .75rem;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
}
.login h1 {
  display: flex;
  align-items: center;
  margin: 0 0 .6rem;
  line-height: 0;
}
.login input { margin-bottom: .4rem; }
.login button { width: 100%; }
.err { margin: 0 0 .4rem; color: var(--danger); font-size: .75rem; }