/* what.tools: text only, dense, in the manner of classic del.icio.us (SPEC.md §13). */
:root {
  --bg: #fff; --fg: #222; --dim: #888; --line: #e6e6e6; --soft: #f5f5f3; --link: #1a3fb5; --meta: #5a74ad; --kind: #999;
  --up: #2c8a3c; --warn: #b42318; --chip: #f1f1ee; --focus: #f2b600;
  --h0: #ececec; --h1: #e3f1e1; --h2: #c9e6c4; --h3: #a6d59e; --h4: #7cc073; --h5: #4f9f45; --h5fg: #fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151515; --fg: #ddd; --dim: #8d8d88; --line: #2a2a28; --soft: #1d1d1c; --link: #8fb0ff; --meta: #8aa0cf; --kind: #8a8a84;
    --up: #63c774; --warn: #ff8a7a; --chip: #252523;
    --h0: #2a2a28; --h1: #1b2a1c; --h2: #213b24; --h3: #2a4f2e; --h4: #346639; --h5: #3f7f46; --h5fg: #fff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.4 Arial, "Helvetica Neue", Helvetica, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
h1 { font-size: 18px; margin: 0; font-weight: bold; }
h2 { font-size: 12px; margin: 14px 0 4px; font-weight: bold; color: var(--fg); }
h3 { font-size: 11px; margin: 12px 0 3px; font-weight: bold; color: var(--dim); text-transform: lowercase; }
p { margin: 3px 0; }
.dim, .when { color: var(--dim); }
.when { font-size: 11px; white-space: nowrap; }
.small { font-size: 12px; }
code, .copy { font: 12px ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }

/* frame: content starts at the left edge; a narrow sidebar on the right */
header.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 6px 12px 5px; border-bottom: 1px solid var(--line); }
.logo { font: bold 17px Arial, sans-serif; color: var(--fg); letter-spacing: -.02em; }
.logo span { color: var(--link); }
header nav { display: flex; gap: 12px; align-items: baseline; }
header nav a { color: var(--fg); }
header nav a.on { font-weight: bold; }
header nav.me { margin-left: auto; color: var(--dim); gap: 4px; }
header form, footer form { display: inline; margin: 0; }
.page { display: flex; align-items: flex-start; gap: 32px; padding: 8px 12px 18px; }
main { flex: 1 1 auto; min-width: 0; }
aside { flex: 0 0 230px; min-width: 0; font-size: 12px; }
aside h3:first-child { margin-top: 4px; }
footer.site { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; line-height: 1.6; }
footer.site:first-child { margin-top: 4px; padding-top: 0; border: 0; }
footer.site a { color: var(--dim); }
.flash { margin: 0; padding: 4px 12px; background: var(--h1); border-bottom: 1px solid var(--line); }
.error { color: var(--warn); }
.bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 6px; }
h1.sub { font-size: 12px; font-weight: normal; color: var(--dim); margin: 0 0 4px; }
.tabs a { color: var(--dim); margin-right: 6px; }
.tabs a.on { color: var(--fg); }
nav.tabs.admin { margin-bottom: 6px; font-size: 13px; }

/* a tool as listed, like a del.icio.us post */
ul.items, ul.uses, ul.notes, ul.acts, ul.history, ul.cards, ul.cloud, ul.tags, ul.mini, ul.matches { list-style: none; margin: 0; padding: 0; }
.item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.count { flex: 0 0 auto; min-width: 38px; margin-top: 1px; padding: 1px 4px; border-radius: 2px; background: var(--h0); color: var(--fg); font-size: 11px; text-align: center; }
.count:hover { text-decoration: none; }
.post { min-width: 0; flex: 1; }
.title { font-size: 14px; }
.kind { color: var(--kind); font-size: 11px; }
a.kind:hover { color: var(--link); }
.meta { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta a { color: var(--meta); }
.up { color: var(--up); }
.h1 { background: var(--h1); } .h2 { background: var(--h2); } .h3 { background: var(--h3); } .h4 { background: var(--h4); }
.h5 { background: var(--h5); color: var(--h5fg); }
.pad { padding: 0 3px; border-radius: 2px; }
.more { display: inline-block; padding: 4px 0; color: var(--dim); }
.auto { display: inline-block; width: 1px; height: 1px; }

/* sidebars */
ul.tags li, ul.mini li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
ul.tags .n, ul.mini .n { color: var(--dim); font-size: 11px; padding: 0 3px; border-radius: 2px; }
.names a { white-space: nowrap; }

/* tool page */
.head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 2px 0 4px; }
.head form { margin: 0; }
.using { color: var(--up); font-size: 12px; }
.summary { font-size: 14px; margin: 4px 0; }
.facts { margin: 4px 0; }
p.facts.dim { font-size: 12px; }
ul.notes li { padding: 5px 0; }
ul.notes .meta { white-space: normal; }

/* user page: groups flow in columns on wide screens */
.groups { columns: 360px 3; column-gap: 28px; }
.groups h2 { break-after: avoid; }
.groups h2:first-child { margin-top: 4px; }
ul.uses li { padding: 2px 0; break-inside: avoid; }
ul.uses .note, .child { font-size: 12px; color: var(--dim); padding-left: 12px; }
.var { color: var(--fg); font-size: 12px; opacity: .75; }
ul.history li { padding: 2px 0; }
a.past { color: var(--dim); }
footer.own { padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 11px; color: var(--dim); }
footer.own a, footer.own button.link { color: var(--dim); }
footer.own a:hover, footer.own button.link:hover { color: var(--link); }
.onboard h2 { margin-top: 0; font-size: 14px; }

/* activity */
h2.day { font-size: 11px; color: var(--dim); margin: 12px 0 2px; }
ul.acts li { padding: 2px 0; }
ul.acts.small li { font-size: 12px; }
.u { font-weight: bold; }

/* kinds, filters, cards */
ul.cloud { display: flex; flex-wrap: wrap; gap: 3px 14px; line-height: 1.6; }
ul.cloud li { white-space: nowrap; }
ul.cloud .n { color: var(--dim); font-size: 11px; }
input.filter { width: 160px; }
nav.filters { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 6px; }
nav.filters details { position: relative; }
nav.filters summary { cursor: pointer; list-style: none; padding: 0 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--chip); font-size: 12px; line-height: 20px; }
nav.filters summary::-webkit-details-marker { display: none; }
nav.filters summary::after { content: " ▾"; color: var(--dim); }
nav.filters details.active summary { border-color: var(--link); }
nav.filters ul { position: absolute; z-index: 5; top: 100%; left: 0; min-width: 200px; max-height: 360px; overflow: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
nav.filters li { padding: 1px 8px; white-space: nowrap; display: flex; justify-content: space-between; gap: 10px; }
nav.filters li a.on { font-weight: bold; }
nav.filters li.all { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 3px; }
.clear { font-size: 12px; }
ul.cards li { padding: 4px 0; }

/* forms */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--bg); border: 1px solid #ccc; border-radius: 2px; padding: 2px 5px; min-height: 24px; }
textarea { width: 100%; }
.btn { display: inline-block; padding: 1px 10px; min-height: 22px; border: 1px solid #ccc; border-radius: 2px; background: var(--chip); color: var(--fg); cursor: pointer; line-height: 18px; font-size: 12px; }
.btn:hover { text-decoration: none; border-color: var(--dim); }
.btn.primary { background: var(--link); border-color: var(--link); color: #fff; }
.btn.danger { color: var(--warn); }
button.link { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; font-size: inherit; }
.row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0; }
.row label { display: flex; gap: 4px; align-items: center; color: var(--dim); }
.row label.grow { flex: 1 1 220px; }
.row label.grow input { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 520px; }
.stack label { display: flex; flex-direction: column; gap: 2px; width: 100%; color: var(--dim); }
.stack label input { width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 10px; margin: 6px 0; }
.grid label { display: flex; flex-direction: column; gap: 2px; color: var(--dim); font-size: 12px; }
fieldset { border: 1px solid var(--line); padding: 4px 8px; }
legend { color: var(--dim); }
.narrow { max-width: 560px; }
.box { border: 1px solid var(--line); background: var(--soft); padding: 6px 8px; margin: 6px 0; }
.choices { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.choices form { display: inline; margin: 0; }
.chip { display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); color: var(--fg); cursor: pointer; font-size: 12px; line-height: 20px; }
.chip.on { border-color: var(--link); }
.chip.ghost { background: none; color: var(--dim); }
label.chip input { margin: 0 2px 0 0; vertical-align: -1px; }
.replace { margin: 4px 0; }
.replace .chip { margin-left: 4px; }
.addbox { display: flex; gap: 6px; margin: 6px 0; max-width: 560px; }
.addbox input { flex: 1; }
ul.matches { max-width: 560px; }
ul.matches li form { margin: 0; }
button.pick { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 3px 4px; cursor: pointer; }
button.pick:hover, button.pick:focus { background: var(--soft); }
p.new { margin: 6px 0; }
.added h1 { font-size: 15px; }
.doc { line-height: 1.5; font-size: 14px; }
.doc h1 { font-size: 20px; margin-bottom: 8px; }
.doc h2 { font-size: 14px; margin-top: 16px; }

/* admin tables only */
table { border-collapse: collapse; }
table.list { width: 100%; }
table.list th { text-align: left; font-weight: normal; color: var(--dim); font-size: 11px; padding: 2px 6px; border-bottom: 1px solid var(--line); }
table.list td { padding: 2px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kv th { text-align: left; font-weight: normal; color: var(--dim); padding: 2px 10px 2px 0; white-space: nowrap; }
table.kv td { padding: 2px 14px 2px 0; }
td.n, th.n { text-align: right; white-space: nowrap; }

@media (max-width: 760px) {
  .page { flex-direction: column; align-items: stretch; gap: 8px; }
  aside { flex-basis: auto; width: 100%; }
  header nav.me { margin-left: 0; }
  .auto { display: none; }
}