/* MicroBin on paste.syrota.xyz in Lari Syrota – LS (v1.11.1): paper and ink, Onest, square corners, ink structure.
   Replaces MicroBin's water.css entirely (MICROBIN_CUSTOM_CSS), so it styles the bare elements too.
   Served by Caddy as /brand/paste/paste.css; fonts from /brand/fonts/. Logo and favicon: Caddy serves
   brand/paste/logo.svg and favicon.ico in place of MicroBin's /static/logo.png and /static/favicon.ico.
   MicroBin's templates carry inline styles, hence the !important where they must be overridden.
   Light only: LS is light first, and the dark theme is for single moments, not tools. */

@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F2F2EE;
  --ink: #000000;
  --gray: #5E5E59;
  --border-width: 3px;
  --rule-width: 6px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 160ms;
  --font-text: "Onest", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --label: 600 0.8125rem/1.2 var(--font-text);
}

/* Page ------------------------------------------------------------------ */

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-text) !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 0 20px 72px !important;
  -webkit-font-smoothing: antialiased;
}
body > br:first-child { display: none; }
::selection { background: #EEFF00; color: var(--ink); }

h1, h2, h3, h4 { font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: 0; margin: 2em 0 0.6em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3, h4 { font-size: 1.125rem; }
p, li { max-width: 65ch; }
hr { border: 0; border-top: var(--rule-width) solid var(--ink); margin: 2rem 0; }
b, strong { font-weight: 700; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--duration-fast) var(--ease); }
a:hover { text-decoration-thickness: 5px; }
a:active { color: var(--gray); }
:focus-visible { outline: var(--border-width) solid var(--ink); outline-offset: 3px; }
/* Fields already have an ink frame; a second ring around it reads as a double box (Lari) */
input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus, select:focus, textarea:focus { outline: none; }

/* No "?" help links next to the labels and prompts (Lari): the Guide link in the header is enough */
sup:has(a[href*="/guide"]) { display: none; }

/* Header: wordmark between its bars, nav in labels, one ink rule ---------- */

#nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 0 0 40px !important;
  padding: 32px 0 20px;
  border-bottom: var(--rule-width) solid var(--ink);
}
/* Wordmark, then "PASTE" in a black box the height of the wordmark, top and bottom flush with its bars.
   MicroBin renders the title as a bare text node after the logo link, so the box is painted as the
   <b>'s background from the end of the logo on: 30px logo = 139px wide, plus a 10px gap. */
#nav > b {
  --logo-h: 30px;
  --box-from: calc(var(--logo-h) * 4.628 + 10px);
  margin: 0 auto 0 0 !important;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--logo-h);
  padding-right: 11px;
  background: linear-gradient(90deg, transparent var(--box-from), var(--ink) var(--box-from));
  color: var(--paper);
  font: 700 0.8125rem/1 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#nav > b a { display: block; line-height: 0; margin-right: calc(10px + 12px); }
#nav img { width: auto !important; height: var(--logo-h); margin: 0 !important; }
@media (max-width: 480px) { #nav > b { --logo-h: 26px; } }
#nav > a {
  margin: 0 !important;
  font: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  box-shadow: inset 0 0 0 transparent;
  transition: box-shadow var(--duration-fast) var(--ease);
}
#nav > a:hover { box-shadow: inset 0 -4px 0 currentColor; }

/* Form controls -------------------------------------------------------- */

label { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; margin-bottom: 8px; }

input, select, textarea, button {
  font: inherit;
  color: var(--ink);
  border-radius: 0;
  box-sizing: border-box;
}
input[type="text"], input[type="password"], input:not([type]), select, textarea {
  background: var(--paper) !important;
  border: var(--border-width) solid var(--ink);
  padding: 10px 12px;
  font-size: 1rem;
  height: auto !important;
}
input::placeholder, textarea::placeholder { color: var(--gray); opacity: 1; }
select {
  appearance: none;
  height: 52px !important;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}
optgroup { font-style: normal; font-weight: 700; color: var(--gray); }
option { color: var(--ink); font-weight: 400; }
textarea { font-family: var(--font-mono) !important; font-size: 0.9375rem; line-height: 1.6; resize: vertical; display: block; }

/* Buttons: ink fill for the main action, ink frame for the rest; hover swaps */
button, input[type="submit"], input[type="button"], .small-button, .copy-button, .download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 0;
  background: transparent !important;
  color: var(--ink) !important;
  border: var(--border-width) solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 0.75em 1.1em 0.7em !important;
  font: 700 0.75rem/1 var(--font-text) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .small-button:hover, .copy-button:hover, .download-button:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
button:active, input[type="submit"]:active, .small-button:active { transform: translateY(2px); }
button:disabled, input:disabled { opacity: 0.4; cursor: default; transform: none; }

/* The main action */
#submit-button, #decrypt-button, #auth-form input[type="submit"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-size: 0.875rem !important;
  padding: 1.1em 1.5em 1em !important;
}
#submit-button:hover, #decrypt-button:hover, #auth-form input[type="submit"]:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* Create page ------------------------------------------------------------ */

#pasta-form > br:first-child { display: none; }
/* Four fields: expiration, burn after, privacy (longer option names from gate), password */
#settings {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: none !important;
  grid-gap: 20px !important;
  margin-bottom: 28px !important;
}
#settings input[type="password"] { width: 100% !important; height: 52px !important; }
#settings > div:has(#privacy) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  #settings { grid-template-columns: 1fr 1fr 1.45fr 1fr !important; }
  #settings > div:has(#privacy) { grid-column: auto; }
}
#content-input { min-height: 280px !important; margin-bottom: 24px !important; }

#buttons { align-items: stretch; }
#buttons br { display: none; }
#attach-file-button-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100%;
  box-sizing: border-box;
  border: var(--border-width) dashed var(--ink) !important;
  border-radius: 0 !important;
  padding: 0.9em 1rem !important;
  font: 700 0.75rem/1.2 var(--font-text) !important;
  letter-spacing: 0.12em;
}
#attach-file-button { text-decoration: none; }
#attach-file-button-label:hover { background: var(--ink); color: var(--paper); }
#submit-button { width: 100% !important; height: 100%; }

/* Paste view ------------------------------------------------------------- */

.code-container, pre {
  background: transparent !important;
}
pre {
  border: var(--border-width) solid var(--ink);
  padding: 16px 18px;
  margin: 0;
  overflow-x: auto;
}
code, pre, kbd, samp { font-family: var(--font-mono) !important; font-size: 0.9375rem; line-height: 1.6; }
pre code, .hljs { background: transparent !important; padding: 0 !important; color: var(--ink); }
code-line::before { border-right: 2px solid var(--ink) !important; color: var(--gray) !important; margin-right: 0.9rem !important; width: 2.2rem !important; padding-right: 0.5rem; }
p > code, li > code { background: #E4E4DE; padding: 0.1em 0.35em; font-size: 0.875em; }

/* Syntax highlighting in ink and gray only: the marker colours are never UI colour */
.hljs, .hljs * { color: var(--ink) !important; }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--gray) !important; font-style: italic; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet { color: var(--gray) !important; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-section, .hljs-title { font-weight: 500; }

/* Password prompt on protected pastes */
#decryption, #auth-form {
  border: var(--border-width) solid var(--ink);
  background: transparent !important;
  border-radius: 0 !important;
  padding: 24px !important;
  margin: 8px 0 32px !important;
  width: auto !important;
  max-width: 480px;
}
#decryption p, #auth-form p { margin-top: 0; }

/* Images and file embeds */
#embed { background: transparent !important; border-radius: 0 !important; border: var(--border-width) solid var(--ink); }
img, video { max-width: 100%; }

/* Tables (list, admin) */
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; border-bottom: var(--border-width) solid var(--ink); padding: 8px 10px; }
td { border-bottom: 1px solid var(--ink); padding: 8px 10px; vertical-align: top; }
tbody tr:nth-child(even) { background: transparent; }

/* Action row above a paste: links in labels, the paste ID in mono */
body > div[style*="float"] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px !important; }
body > div[style*="float"] > a {
  margin: 0 !important;
  font: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  transition: box-shadow var(--duration-fast) var(--ease);
}
body > div[style*="float"] > a:hover { box-shadow: inset 0 -4px 0 currentColor; }
body > div[style*="float"] > a i { font: 500 0.875rem/1 var(--font-mono); letter-spacing: 0; text-transform: none; font-style: normal; }
body > div[style*="float"] > button { margin: 0 !important; }
#view-selector { height: auto !important; padding: 0.6em 2.2em 0.55em 0.9em !important; font: 700 0.75rem/1 var(--font-text) !important; letter-spacing: 0.12em; text-transform: uppercase; background-color: transparent !important; color: var(--ink) !important; }
#view-selector:hover { background-color: transparent !important; color: var(--ink) !important; }

/* Password prompts: a framed box, plain-text question, field and main action side by side */
#auth-form label, #decryption label {
  display: block;
  font: 500 1.0625rem/1.4 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 16px !important;
}
#auth-form, #decryption { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
#auth-form > label, #decryption > label { flex: 1 0 100%; }
#auth-form > br, #auth-form sup, #decryption sup { display: none; }
#auth-form > b { flex: 1 0 100%; font-weight: 700; }
#password-field, input.small-button[type="password"] {
  flex: 1 1 200px;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: var(--border-width) solid var(--ink) !important;
  padding: 10px 12px !important;
  font: 400 1rem/1.4 var(--font-text) !important;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 !important;
  cursor: text;
}
#password-field:hover, input.small-button[type="password"]:hover { background: var(--paper) !important; color: var(--ink) !important; }
#auth-form button, #decryption button {
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-size: 0.875rem !important;
  padding: 0 1.5em !important;
}
#auth-form button:hover, #decryption button:hover { background: var(--paper) !important; color: var(--ink) !important; }

/* Login page (apps/microbin/gate) ------------------------------------------- */

body.gate main { max-width: 440px; }
body.gate h1 { font-size: 2.5rem; line-height: 0.94; margin: 0 0 16px; }
body.gate main > p { color: var(--gray); margin: 0 0 32px; }
body.gate form { display: flex; flex-direction: column; }
body.gate form input { width: 100%; height: 52px !important; margin-bottom: 20px; }
body.gate form button {
  margin-top: 8px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-size: 0.875rem !important;
  padding: 1.1em 1.5em 1em !important;
  align-self: flex-start;
}
body.gate form button:hover { background: var(--paper) !important; color: var(--ink) !important; }
.gate-error { margin: -4px 0 16px; padding-left: 14px; border-left: var(--rule-width) solid var(--ink); font-weight: 600; }

/* Public, unlisted or read-only with First Read would burn on Lari's own view right after saving
   (MicroBin shows the paste to its creator). CSS can't change the value, so it blocks Save and says why. */
#pasta-form:has(#privacy option:is([value="public"], [value="unlisted"], [value="readonly"]):checked):has(#burn_after option[value="1"]:checked) #submit-button {
  pointer-events: none;
  opacity: 0.35;
}
#pasta-form:has(#privacy option:is([value="public"], [value="unlisted"], [value="readonly"]):checked):has(#burn_after option[value="1"]:checked) #buttons::before {
  content: "Without a password, First Read burns on your own view right after saving. Set Burn After to No Limit or 10th Read.";
  grid-column: 1 / -1;
  padding-left: 14px;
  border-left: var(--rule-width) solid var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

/* Guide: section anchors are <a id> without href; they are not links */
a:not([href]) { text-decoration: none; }

/* Own guide page (brand/paste/guide.html, served by Caddy at /guide) */
body.guide main { max-width: 65ch; }
body.guide h1 { font-size: 2.5rem; line-height: 0.94; margin: 0 0 8px; }
body.guide section { padding-top: 8px; }
body.guide h2 { font-size: 1.25rem; margin: 40px 0 12px; }
body.guide p { margin: 0 0 12px; }
body.guide dl { margin: 0; }
body.guide dt { font-weight: 700; margin-top: 16px; }
body.guide dd { margin: 4px 0 0; }