* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: #222; background: #f6f7f9; }
a { color: #0b5cad; }

#topbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .6rem 1.2rem; background: #1f2d3d; color: #fff; }
#topbar a:not(.button) { color: #fff; text-decoration: none; }
#brand { font-weight: 600; font-size: 1.15rem; }
#search { flex: 1 1 24rem; display: flex; gap: .5rem; }
#search .tagbox { flex: 1; }
#topbar nav { display: flex; gap: 1rem; align-items: center; }
#devbanner { background: #ffe9a8; color: #5c4400; text-align: center; font-size: .85rem; padding: .2rem; }

main { max-width: 60rem; margin: 1.5rem auto; padding: 1.5rem; background: #fff; border-radius: 6px; }
h1 { margin-top: 0; }
.muted { color: #777; }
.error { background: #fde8e8; color: #8a1c1c; padding: .5rem .8rem; border-radius: 4px; }

.results { list-style: none; padding: 0; }
.results li { padding: .35rem 0; border-bottom: 1px solid #eee; }
.stars { display: inline-block; min-width: 5.5em; color: #d99a00; letter-spacing: .1em; font-family: monospace; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag, .chip { background: #e3eefa; color: #0b3d75; border-radius: 1em; padding: .05rem .7rem; font-size: .9rem; text-decoration: none; }
.actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.actions form { margin: 0; }
.titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.titlebar h1 { margin: 0; overflow-wrap: anywhere; }
.titlebar .actions { margin-top: .35rem; }
.content { overflow-wrap: anywhere; }
.updated { margin: 2rem 0 0; padding-top: .5rem; border-top: 1px solid #eee; color: #777; font-size: .85rem; }
.content table { border-collapse: collapse; }
.content td, .content th { border: 1px solid #ccc; padding: .3rem .6rem; }
.content pre { background: #f2f2f2; padding: .6rem; overflow: auto; }
.content blockquote { border-left: 4px solid #ccc; margin-left: 0; padding-left: 1rem; color: #555; }

label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
input[type=text], input[type=password] { width: 100%; padding: .45rem .6rem; font: inherit; border: 1px solid #bbb; border-radius: 4px; }
.narrow { max-width: 22rem; }

button, .button { display: inline-block; padding: .4rem 1rem; font: inherit; color: #fff; background: #0b5cad; border: 0; border-radius: 4px; cursor: pointer; text-decoration: none; }
button.danger { background: #b3261e; }
.button.secondary { background: #6b7785; }

.tagbox { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .25rem .4rem; background: #fff; border: 1px solid #bbb; border-radius: 4px; cursor: text; }
.tagbox .tagfield { flex: 1; min-width: 8rem; width: auto; border: 0; padding: .2rem; outline: none; color: #222; }
.chip { display: inline-flex; align-items: center; gap: .3rem; }
.chip-remove { padding: 0 .2rem; background: none; color: #0b3d75; font-size: 1.1rem; line-height: 1; }

.ck-editor__editable { min-height: 18rem; }
textarea {
	width: stretch;
	width: -moz-available;
}