/* Wisemanyork Hub.
   Neutral and quiet on purpose: this is a reference tool, not a brochure.
   House rules: rules are border-top, never a left accent bar, and nothing
   carries a box-shadow. */

:root {
  --ink: #1c1f24;
  --muted: #5c6470;
  --faint: #8b94a1;
  --line: #dfe3e8;
  --line-strong: #c3cad3;
  --bg: #ffffff;
  --panel: #f7f8fa;
  --accent: #33556f;
  --accent-ink: #ffffff;
  --danger: #a4343a;
  --ok: #2f6b4f;
  --warn: #8a6212;
  /* Washes for the two ends of a comparison. Named here rather than mixed at
     the point of use so they can differ between the themes, which a single
     translucent tint over two different backgrounds cannot. */
  --ok-wash: #eef6f1;
  --danger-wash: #fbeef0;
  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e8ec;
    --muted: #9aa3b0;
    --faint: #6f7885;
    --line: #2c323b;
    --line-strong: #3c444f;
    --bg: #14171c;
    --panel: #1b1f26;
    --accent: #7fa8c9;
    --accent-ink: #10151b;
    --danger: #e2848a;
    --ok: #7fc3a1;
    --warn: #d7b46a;
    --ok-wash: #1a2a22;
    --danger-wash: #2c1d20;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6rem; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .9rem; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- */
/* sign in                                                           */
/* ---------------------------------------------------------------- */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.gate-card {
  width: 100%;
  max-width: 22rem;
  border-top: 2px solid var(--line-strong);
  padding-top: 1.5rem;
}

.gate h1 { font-size: 1.25rem; margin-bottom: 1.25rem; }

.gate label {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin: .9rem 0 .3rem;
}

.gate label.check {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  color: var(--muted);
}

.gate input[type=text],
.gate input:not([type=checkbox]) {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
}

.gate input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.gate button[type=submit] {
  width: 100%;
  margin-top: 1.1rem;
  padding: .6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.gate button[disabled] { opacity: .6; cursor: default; }

.small { font-size: .82rem; color: var(--muted); margin-top: .9rem; }

.msg { font-size: .84rem; margin: .8rem 0 0; color: var(--danger); }
.msg.ok { color: var(--ok); }

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

.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}

.brand { font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.search { flex: 1; max-width: 30rem; }
.search input {
  width: 100%;
  padding: .4rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.topnav { display: flex; gap: 1rem; align-items: center; font-size: .88rem; margin-left: auto; }

.linkish {
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}
.linkish:hover { text-decoration: underline; }

.layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}

@media (max-width: 800px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  aside { order: 2; }
}

/* A phone.

   The nav was the only thing here that did not fit. At 375px it ran to 451px
   and, because nothing clipped it, it dragged the whole document sideways on
   every single page: you could not scroll a note without the page drifting.
   Everything else already worked, which is why this is a handful of rules and
   not a rewrite.

   The bar becomes two rows, search underneath, and the links scroll
   horizontally within their own strip rather than pushing the page wide.
   -webkit-overflow-scrolling and the hidden scrollbar are so it reads as a
   strip you swipe, not as a broken layout. */
@media (max-width: 34rem) {
  .topbar {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .6rem .9rem;
  }

  .brand { font-size: 1rem; }

  /* Search takes the whole second row: on a phone it is the fastest way to
     anything, and it is useless squeezed beside six links. */
  .search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
  }

  .topnav {
    margin-left: auto;
    gap: .85rem;
    font-size: .82rem;
    /* The fix. The strip scrolls; the page does not. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav > * { flex: none; white-space: nowrap; }

  /* Touch targets. A 27px link is a miss as often as a hit. */
  .topnav a, .topnav .linkish { padding: .35rem 0; }

  .layout { padding: 1rem .9rem 4rem; }

  /* The calendar row is a lot of small parts on one line. Let it wrap rather
     than shrink each piece to nothing. */
  .cal-row { flex-wrap: wrap; row-gap: .15rem; }
  .cal-when { font-weight: 600; }

  .page-head { flex-wrap: wrap; gap: .5rem; }
  .btn-row { flex-wrap: wrap; }
}

/* Nothing anywhere may push the document sideways. This is a backstop rather
   than a fix: the nav above is the real one, but a single wide table or a long
   unbroken URL in a note should scroll inside itself, never take the page with
   it. */
html, body { overflow-x: hidden; }
.prose { overflow-wrap: break-word; }

aside h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--faint);
  margin: 1.5rem 0 .5rem;
}
aside h3:first-child { margin-top: 0; }

aside ul { list-style: none; margin: 0; padding: 0; }
aside li a {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem 0;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
aside li:first-child a { border-top: 0; }
aside li a.on { color: var(--accent); font-weight: 600; }
aside .count { color: var(--faint); font-size: .8rem; }

/* ---------------------------------------------------------------- */
/* lists and cards                                                   */
/* ---------------------------------------------------------------- */

.page-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: .9rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-head .grow { flex: 1; min-width: 12rem; }
.page-head p { margin: 0; color: var(--muted); font-size: .88rem; }

.item-list { list-style: none; margin: 0; padding: 0; }
.item-list li { border-top: 1px solid var(--line); }
.item-list li:last-child { border-bottom: 1px solid var(--line); }
.item-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .7rem .25rem;
  color: var(--ink);
}
.item-row:hover { background: var(--panel); text-decoration: none; }
.item-row .title { flex: 1; min-width: 0; }
.item-row .title strong { font-weight: 600; }
.item-row .excerpt {
  display: block;
  color: var(--muted);
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .05rem .35rem;
  color: var(--muted);
  white-space: nowrap;
}
.chip.public { border-color: var(--warn); color: var(--warn); }
.chip.unlisted { border-color: var(--accent); color: var(--accent); }
.chip.kind { border-color: var(--line); }

.when { color: var(--faint); font-size: .78rem; white-space: nowrap; }

.panel {
  border-top: 2px solid var(--line);
  background: var(--panel);
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
}
.panel h3 { margin-bottom: .5rem; }
.panel.plain { background: none; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }

/* ---------------------------------------------------------------- */
/* buttons and forms in the app                                      */
/* ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: .38rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-size: .88rem;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { color: var(--accent-ink); opacity: .9; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
}
.field textarea { min-height: 24rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .88rem; line-height: 1.6; resize: vertical; }
.field.inline { display: flex; gap: .6rem; align-items: center; }
.field.inline label { margin: 0; }

/* ---------------------------------------------------------------- */
/* writing a note                                                    */
/* ---------------------------------------------------------------- */

.editor { display: flex; flex-direction: column; margin-bottom: .9rem; }

.editor-bar {
  display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
  padding-bottom: .5rem;
}
.editor-bar-gap { flex: 1 1 auto; }
.editor-bar .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* On a phone ten buttons wrap to four rows and eat a fifth of the screen
   before a word has been written. A strip that scrolls inside itself keeps the
   writing surface tall, which is the same answer the top nav already uses. */
@media (max-width: 40rem) {
  .editor-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .editor-bar .btn { flex: 0 0 auto; }
  .editor-bar-gap { flex: 0 0 .5rem; }
}

.editor-draft {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  border-top: 2px solid var(--warn);
  background: var(--panel);
  padding: .6rem .7rem;
  margin-bottom: .5rem;
  font-size: .85rem;
}
.editor-draft span { flex: 1 1 14rem; }

/* One column until there is genuinely room for two. Half of a phone screen is
   not a writing surface, and half of it again is not a preview. */
.editor-panes { display: grid; grid-template-columns: 1fr; gap: .6rem; min-height: 0; }
.editor-panes > textarea {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  min-height: 24rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .88rem;
  line-height: 1.6;
  resize: vertical;
}
.editor-preview {
  display: none;
  overflow-y: auto;
  min-height: 24rem;
  max-height: 60vh;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  max-width: none;
}
.editor-preview > :first-child { margin-top: 0; }

@media (min-width: 60rem) {
  .editor.split .editor-panes { grid-template-columns: 1fr 1fr; }
  .editor.split .editor-preview { display: block; }
  .editor.split .editor-panes > textarea { resize: none; }
}

/* Narrower than that, the same button swaps the panes instead of splitting
   them. Half a phone screen is not a writing surface, but "show me how this
   reads" is worth as much on a phone as anywhere, so it becomes a look rather
   than a second column. The editor always opens on the text: see editNote. */
@media (max-width: 59.999rem) {
  .editor.split .editor-preview { display: block; }
  .editor.split .editor-panes > textarea { display: none; }
}

/* Full screen is the whole viewport, so the panes have to stop being as tall
   as their content and start being as tall as what is left after the bar. */
.editor.full {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  padding: .8rem;
  margin: 0;
}
.editor.full .editor-panes { flex: 1 1 auto; min-height: 0; }
.editor.full .editor-panes > textarea,
.editor.full .editor-preview { min-height: 0; max-height: none; height: 100%; }

/* Both elements, not just body. The page scrollbar hangs off html, and leaving
   it there reserves its width beside a "full screen" editor that then stops
   fifteen pixels short of the edge. */
html.editor-full, html.editor-full body { overflow: hidden; }

.editor-hint { font-size: .8rem; margin-left: auto; }

/* The matched words in a search result. A wash and a weight rather than the
   browser's default yellow, which is the only loud colour anywhere in here. */
mark {
  background: var(--ok-wash);
  color: inherit;
  font-weight: 600;
  padding: 0 .1em;
}

/* ---------------------------------------------------------------- */
/* comparing two versions                                            */
/* ---------------------------------------------------------------- */

.diff {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .82rem;
  line-height: 1.55;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-top: .6rem;
}
.diff-line { display: flex; gap: .5rem; padding: 0 .5rem; white-space: pre; }
/* The marker is its own element, so a line that genuinely starts with "-" is
   not read as one that was deleted. */
.diff-mark { flex: 0 0 1ch; color: var(--faint); user-select: none; }
.diff-text { flex: 1 1 auto; }
.diff-line.add { background: var(--ok-wash); }
.diff-line.remove { background: var(--danger-wash); }
.diff-line.add .diff-mark { color: var(--ok); }
.diff-line.remove .diff-mark { color: var(--danger); }
.diff-gap {
  padding: .2rem .5rem;
  color: var(--muted);
  background: var(--panel);
  font-size: .76rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- */
/* rendered notes                                                    */
/* ---------------------------------------------------------------- */

.prose { max-width: 44rem; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.8rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose ul.tasks { list-style: none; padding-left: 0; }
.prose ul.tasks .box {
  display: inline-block; width: 1.05em; height: 1.05em;
  border: 1px solid var(--line-strong); margin-right: .5rem;
  text-align: center; line-height: 1em; font-size: .85em; vertical-align: -2px;
}
.prose code { background: var(--panel); padding: .1em .35em; font-size: .9em; }
.prose pre { background: var(--panel); padding: 1rem; overflow-x: auto; border-top: 2px solid var(--line); }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-top: 1px solid var(--line); padding-top: .7rem; color: var(--muted); margin-left: 0; }

/* An anchor beside every heading. Hidden until the heading is hovered or the
   link itself is focused, so a note reads as prose and still hands you an
   address when you want one. Always visible to a keyboard. */
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { position: relative; }
.prose .anchor {
  margin-left: .4rem;
  color: var(--faint);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s;
}
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose h4:hover .anchor,
.prose h5:hover .anchor, .prose h6:hover .anchor,
.prose .anchor:focus { opacity: 1; }
@media (hover: none) { .prose .anchor { opacity: .45; } }

/* The contents list of a long note. */
.contents { border-top: 2px solid var(--line-strong); padding-top: .7rem; margin: 0 0 1.6rem; }
.contents > p { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 .4rem; }
.contents ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.contents li { padding: .12rem 0; }
.contents li.level-3 { padding-left: 1rem; }
.contents li.level-4 { padding-left: 2rem; }
.contents li.level-5, .contents li.level-6 { padding-left: 3rem; }

/* Callouts. Border-top like every other rule in this file, never a left bar. */
.callout {
  border-top: 2px solid var(--line-strong);
  background: var(--panel);
  padding: .7rem .85rem;
  margin: 0 0 1rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin: 0 0 .35rem;
  color: var(--muted);
}
.callout-note { border-top-color: var(--accent); }
.callout-note .callout-label { color: var(--accent); }
.callout-tip { border-top-color: var(--ok); background: var(--ok-wash); }
.callout-tip .callout-label { color: var(--ok); }
.callout-warning, .callout-caution { border-top-color: var(--danger); background: var(--danger-wash); }
.callout-warning .callout-label, .callout-caution .callout-label { color: var(--danger); }
.callout-important { border-top-color: var(--warn); }
.callout-important .callout-label { color: var(--warn); }

/* A section folded away until it is asked for. */
.prose details.fold { border-top: 1px solid var(--line); padding: .5rem 0; margin-bottom: 1rem; }
.prose details.fold > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
.prose details.fold > div { padding-top: .6rem; }
.prose details.fold > div > :last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose img { max-width: 100%; height: auto; }

.table-wrap { overflow-x: auto; margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { border-top: 2px solid var(--line); font-weight: 600; }

/* ---------------------------------------------------------------- */
/* files, bundles, shares                                            */
/* ---------------------------------------------------------------- */

.files { list-style: none; margin: 0; padding: 0; }
.files li {
  border-top: 1px solid var(--line);
  padding: .55rem 0;
  display: flex;
  gap: .75rem;
  align-items: baseline;
}
.files li:first-child { border-top: 0; }
.files .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.files .size { color: var(--faint); font-size: .8rem; white-space: nowrap; }

.bundle-frame {
  width: 100%;
  height: 40rem;
  border: 1px solid var(--line-strong);
  background: #fff;
}

/* Full screen without leaving the hub: the panel covers the window and the
   frame takes everything left after the button row. */
.bundle-panel-note { display: block; }

#bundle-panel.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 40;
  margin: 0;
  padding: .6rem .8rem .8rem;
  background: var(--bg);
  border-top: 0;
  display: flex;
  flex-direction: column;
}

#bundle-panel.fullscreen .bundle-frame {
  flex: 1;
  height: auto;
  min-height: 0;
  border: 0;
}

#bundle-panel.fullscreen p { display: none; }

body.has-fullscreen { overflow: hidden; }

.share-url {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .6rem;
}
.share-url input {
  flex: 1;
  padding: .4rem .55rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .82rem;
}

.dropzone {
  border: 1px dashed var(--line-strong);
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  cursor: pointer;
}
.dropzone.over { border-color: var(--accent); color: var(--accent); }

.codes {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .95rem;
  columns: 2;
  margin: .75rem 0;
  padding: 0;
  list-style: none;
}
.codes li { padding: .15rem 0; }

.secret {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: .08em;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: .6rem .7rem;
  margin: .5rem 0 1rem;
}

/* ---------------------------------------------------------------- */
/* the vault                                                         */
/* ---------------------------------------------------------------- */

.lockmark {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 .3rem;
  vertical-align: 2px;
}

.vault-line {
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 .5rem;
  padding-top: .3rem;
  border-top: 1px solid var(--line);
}
.vault-line.open { color: var(--ok); }

/* ---------------------------------------------------------------- */
/* the table editor                                                  */
/* ---------------------------------------------------------------- */

table.grid { font-size: .88rem; }
table.grid th { padding: .3rem .35rem; white-space: nowrap; }
table.grid td { padding: .15rem .35rem; }
table.grid input {
  width: 100%;
  min-width: 8rem;
  padding: .3rem .4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
}
table.grid input:hover { border-color: var(--line); }
table.grid input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
table.grid th input { font-weight: 600; }
table.grid th .linkish,
table.grid td .linkish { font-size: .72rem; color: var(--faint); }
table.grid th .linkish:hover,
table.grid td .linkish:hover { color: var(--danger); }

.warn-note { color: var(--warn); font-size: .85rem; }
.ok-note { color: var(--ok); font-size: .85rem; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; font-size: .9rem; }

.log { font-size: .82rem; width: 100%; }
.log td { font-family: ui-monospace, Consolas, monospace; }

/* ---------------------------------------------------------------- */
/* toast                                                             */
/* ---------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: .55rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  z-index: 50;
  max-width: 90vw;
}
.toast.bad { background: var(--danger); color: #fff; }

@media print {
  .topbar, aside, .btn-row, .toast { display: none; }
  .layout { display: block; padding: 0; }
}

/* ---------------------------------------------------------------- */
/* the calendar                                                      */
/* ---------------------------------------------------------------- */

.cal-month {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--faint);
  margin: 1.6rem 0 .3rem;
}
.cal-month:first-of-type { margin-top: .4rem; }

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

.cal-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem .25rem;
  border-top: 1px solid var(--line);
  font-size: .92rem;
}
.cal-list li:last-child { border-bottom: 1px solid var(--line); }

.cal-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-sep { color: var(--faint); }
.cal-space { color: var(--muted); }
.cal-item { font-weight: 600; }
.cal-label { color: var(--muted); }
.cal-away { margin-left: auto; color: var(--faint); font-size: .8rem; white-space: nowrap; }

.cal-row.past .cal-when,
.cal-row.past .cal-item { color: var(--muted); }
.cal-row.past .cal-away { color: var(--danger); }
.cal-row.today { background: var(--panel); }
.cal-row.today .cal-away { color: var(--ok); font-weight: 600; }

/* A small marker rather than a coloured row: the colour is a label, not a
   status, and a full row of colour makes the list harder to read. */
.dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  align-self: center;
  background: var(--faint);
}
.dot.slate  { background: #64748b; }
.dot.blue   { background: #3b7ea1; }
.dot.green  { background: #2f6b4f; }
.dot.amber  { background: #b8860b; }
.dot.red    { background: #a4343a; }
.dot.purple { background: #6b4c8a; }

#dates-area input[type=date],
#dates-area select {
  padding: .35rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
  font-size: .88rem;
}
#dates-area input[type=text],
#dates-area input:not([type]) {
  padding: .35rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
  font-size: .88rem;
}

/* Recurrence, and dates that have been dealt with.
   House rules hold: rules are border-top, never a left accent bar, and nothing
   carries a box-shadow. */

.chip-note {
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .05rem .35rem;
  white-space: nowrap;
}

/* Struck through rather than hidden: the point of marking something dealt with
   is to stop it nagging, not to lose the record that it happened. */
.done-date .name,
.done-date .cal-when,
.done-date .cal-item,
.done-date .cal-label { text-decoration: line-through; }
.done-date { opacity: .6; }
.done-date .cal-away { color: var(--muted); }

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--muted);
}

.inline-check input[type="number"] {
  padding: .25rem .4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
  font-size: .82rem;
}

/* The front page list reuses .cal-row, so it needs the same last-child rule the
   calendar page has. */
.cal-list + .muted a { color: var(--accent); }

/* An application's panel, at #/apps/<key>. The rows are the item list's rows
   with a second line for the buttons, because a row here is something you act
   on rather than somewhere you go. House rules as everywhere: separation is a
   border-top and space, never a left bar and never a shadow. */
.panel-list li { padding: .15rem 0 .5rem; }
.panel-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem .25rem .1rem;
}
.panel-row .title { flex: 1; min-width: 0; }
.panel-row .title strong { font-weight: 600; }
.panel-row .excerpt { display: block; color: var(--muted); font-size: .84rem; }
.panel-actions { padding: .25rem .25rem 0; }
.panel-actions .btn { font-size: .78rem; padding: .2rem .5rem; }
.panel-form { padding: .6rem .25rem .2rem; max-width: 26rem; }
.panel-form .field { margin-bottom: .6rem; }

/* The three states an application may ask for. Anything else it sends is not
   a state, and lib/console.js drops it before it reaches a class name. */
.chip.state-ok { border-color: var(--ok); color: var(--ok); }
.chip.state-warn { border-color: var(--warn); color: var(--warn); }
.chip.state-off { border-color: var(--line); color: var(--faint); }

/* A panel action in flight. Every button is disabled until the refreshed panel
   replaces them, so the screen cannot show a stale number beside a live button
   that would repeat a thing that is not idempotent. */
#app-panel .btn.working { border-color: var(--accent); color: var(--accent); }