/* MicroBin on paste.s-noi.com in Signal & Noise (v1.4): Snow ground, Charcoal text, Inter, square corners,
   hairline frames, Blue the only accent (the one action, links, the dot). Same structure as the LS sheet
   for paste.syrota.xyz (apps/caddy/conf/brand/paste/paste.css), in the S&N voice: sentence case, Inter
   Light headings, the Blue dot as full stop.
   Replaces MicroBin's water.css entirely (MICROBIN_CUSTOM_CSS), so it styles the bare elements too.
   Served by Caddy as /brand/paste/paste.css from conf/brand-sn/; fonts from /brand/fonts/. Logo and favicon:
   Caddy serves brand-sn/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, like s-noi.com. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }

:root {
  color-scheme: light;
  --bg: #F2F6FA;      /* snow */
  --surface: #FFFFFF; /* fields */
  --block: #E1E8F0;   /* ice: hover grounds, inline code */
  --fg: #1D2229;      /* charcoal */
  --muted: #5A6470;   /* slate, 5.5:1 */
  --line: #5A6470;    /* frames: slate for 3:1 on snow */
  --hair: #C9D3DE;    /* haze: hairlines that carry no meaning */
  --accent: #3934ED;  /* blue */
  --accent-hover: #2A25C9;
  --on-accent: #FFFFFF;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 160ms;
  --font-text: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* S&N has no mono on screen; pastes need one */
  --label: 500 0.8125rem/1.2 var(--font-text);
}

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

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/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: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 { font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; margin: 2em 0 0.6em; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3, h4 { font-size: 1.125rem; font-weight: 500; letter-spacing: 0; }
p, li { max-width: 65ch; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 2rem 0; }
b, strong { font-weight: 600; }

a { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; }

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

/* Header: logo, "Paste" with the Blue dot as full stop, nav links; one hairline ------------- */

#nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 0 0 40px !important;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--hair);
}
/* MicroBin renders the title as a bare text node after the logo link, inside the <b> */
#nav > b {
  --logo-h: 22px;
  margin: 0 auto 0 0 !important;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  color: var(--fg);
  font: 300 1.375rem/1 var(--font-text);
  letter-spacing: -0.02em;
}
#nav > b::after { content: ""; width: 0.2em; height: 0.2em; margin-left: -12px; margin-bottom: 0.08em; border-radius: 50%; background: var(--accent); }
#nav > b a { display: block; line-height: 0; padding-right: 14px; border-right: 1px solid var(--hair); }
#nav img { width: auto !important; height: var(--logo-h); margin: 0 !important; display: block; }
@media (max-width: 480px) { #nav > b { --logo-h: 18px; font-size: 1.1875rem; } }
#nav > a {
  margin: 0 !important;
  font: var(--label);
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 2px;
}
#nav > a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

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

label { font: var(--label); display: inline-block; margin-bottom: 8px; }

input, select, textarea, button {
  font: inherit;
  color: var(--fg);
  border-radius: 0;
  box-sizing: border-box;
}
input[type="text"], input[type="password"], input:not([type]), select, textarea {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 1rem;
  height: auto !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
select {
  appearance: none;
  height: 48px !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='%231D2229' stroke-width='1.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: 600; color: var(--muted); }
option { color: var(--fg); font-weight: 400; }
textarea { font-family: var(--font-mono) !important; font-size: 0.875rem; line-height: 1.6; resize: vertical; display: block; }

/* Buttons: Blue fill for the one action, a Charcoal hairline frame for the rest */
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(--fg) !important;
  border: 1px solid var(--fg) !important;
  border-radius: 0 !important;
  padding: 0.7em 1.1em !important;
  font: 500 0.875rem/1 var(--font-text) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-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(--block) !important;
}
button:disabled, input:disabled { opacity: 0.4; cursor: default; }

/* The one action */
#submit-button, #decrypt-button, #auth-form input[type="submit"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  font: 600 0.9375rem/1.2 var(--font-text) !important;
  padding: 1em 1.5em !important;
}
#submit-button:hover, #decrypt-button:hover, #auth-form input[type="submit"]:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !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: 48px !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: 1px dashed var(--line) !important;
  border-radius: 0 !important;
  padding: 0.9em 1rem !important;
  font: 500 0.875rem/1.2 var(--font-text) !important;
}
#attach-file-button { text-decoration: none; color: var(--fg); }
#attach-file-button-label:hover { background: var(--block); }
#submit-button { width: 100% !important; height: 100%; }

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

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

/* Syntax highlighting in Charcoal and Slate only: Blue stays the one accent */
.hljs, .hljs * { color: var(--fg) !important; }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--muted) !important; font-style: italic; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet { color: var(--muted) !important; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-section, .hljs-title { font-weight: 600; }

/* Password prompt on protected pastes */
#decryption, #auth-form {
  border: 1px solid var(--line);
  background: var(--surface) !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: 1px solid var(--line); }
img, video { max-width: 100%; }

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

/* Action row above a paste: plain links, 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);
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 2px;
}
body > div[style*="float"] > a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body > div[style*="float"] > a i { font: 400 0.875rem/1 var(--font-mono); font-style: normal; }
body > div[style*="float"] > button { margin: 0 !important; }
#view-selector { height: auto !important; padding: 0.6em 2.2em 0.6em 0.9em !important; font: 500 0.875rem/1 var(--font-text) !important; background-color: var(--surface) !important; color: var(--fg) !important; }
#view-selector:hover { background-color: var(--surface) !important; color: var(--fg) !important; }

/* Password prompts: a framed box, plain-text question, field and the one action side by side */
#auth-form label, #decryption label {
  display: block;
  font: 400 1rem/1.5 var(--font-text);
  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: 600; }
#password-field, input.small-button[type="password"] {
  flex: 1 1 200px;
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  padding: 10px 12px !important;
  font: 400 1rem/1.4 var(--font-text) !important;
  margin: 0 !important;
  cursor: text;
}
#password-field:hover, input.small-button[type="password"]:hover { background: var(--surface) !important; color: var(--fg) !important; }
#auth-form button, #decryption button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  font: 600 0.9375rem/1.2 var(--font-text) !important;
  padding: 0 1.5em !important;
}
#auth-form button:hover, #decryption button:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }

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

body.gate main { max-width: 440px; }
body.gate h1 { font-size: 2.5rem; line-height: 0.98; margin: 0 0 16px; }
body.gate h1::after, body.guide h1::after { content: ""; display: inline-block; width: 0.15em; height: 0.15em; margin-left: 0.05em; border-radius: 50%; background: var(--accent); }
body.gate main > p { color: var(--muted); margin: 0 0 32px; }
body.gate form { display: flex; flex-direction: column; }
body.gate form input { width: 100%; height: 48px !important; margin-bottom: 20px; }
body.gate form button {
  margin-top: 8px;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  font: 600 0.9375rem/1.2 var(--font-text) !important;
  padding: 1em 1.5em !important;
  align-self: flex-start;
}
body.gate form button:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.gate-error { margin: -4px 0 16px; padding-left: 14px; border-left: 2px solid #B8302A; color: #B8302A; font-weight: 500; }

/* 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: 2px solid var(--accent);
  font-weight: 500;
  line-height: 1.4;
}

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

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