/* Red String skin: the detective's desk. Loaded after base/theme/pages/game on every page. */

@font-face { font-family: "Courier Prime"; src: url("/fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/Caveat-VF.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root, :root[data-theme] {
  color-scheme: light;
  --rs-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --rs-display-weight: 700;
  --rs-font-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --rs-font-doc: "Newsreader", "Iowan Old Style", Georgia, serif;
  --rs-font-ui: "Courier Prime", "Courier New", monospace;
  --rs-font-type: "Courier Prime", "Courier New", monospace;
  --rs-font-hand: "Caveat", "Bradley Hand", cursive;

  --rs-accent: #b3261e;
  --rs-accent-ink: #fff;
  --rs-ink: #1f1b16;
  --rs-ink-2: #4a4238;
  --rs-ink-3: #564d40;
  --rs-pen: #1d2c55;
  --rs-ok: #2f6b34;

  --art-paper: url("/art/still-life/paper.webp");
  --art-typesheet: url("/art/still-life/typesheet.webp");
  --art-scrap: url("/art/still-life/scrap.webp");
  --art-index: url("/art/still-life/indexcard.webp");
  --art-legal: url("/art/still-life/legalpad.webp");
  --art-manila: url("/art/still-life/manila.webp");
  --art-wall: url("/art/still-life/wall.webp");
  --art-map: url("/art/still-life/mappaper.webp");
  --art-grain: url("/art/still-life/grain-light.webp");
  --art-print: url("/art/still-life/print.webp");
  --art-tape: url("/art/still-life/tape.webp");
  --art-clip: url("/art/still-life/clip.webp");
  --art-pin: url("/art/still-life/pin.webp");
  --art-dymo-red: url("/art/still-life/dymored.webp");
  --art-dymo-black: url("/art/still-life/dymoblack.webp");

  --rs-ink-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2.5 9.5c1.6 1.2 2.6 2.6 3.6 4.4C8.4 8.6 11.6 4.6 17 1.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --rs-ink-tick-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2.5 9.5c1.6 1.2 2.6 2.6 3.6 4.4C8.4 8.6 11.6 4.6 17 1.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --rs-lift: 0 1px 1px rgb(0 0 0 / .28), 0 10px 22px -10px rgb(30 18 8 / .55);
  --rs-lift-2: 0 2px 3px rgb(0 0 0 / .3), 0 22px 40px -16px rgb(20 12 4 / .7);
}

html, body { background: #6f7b72 var(--art-wall); background-size: 720px; }
body { color: var(--rs-ink); font-family: var(--rs-font-text); }
::selection { background: rgb(250 226 90 / .75); color: inherit; }
:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 3px; border-radius: 2px; }

* { scrollbar-width: thin; scrollbar-color: rgb(58 52 44 / .55) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(58 52 44 / .5); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* paper surfaces */
.rs-paper { background: #efe9dd var(--art-paper); background-size: 640px; box-shadow: var(--rs-lift); color: var(--rs-ink); }
.rs-sheet { border-style: solid; border-width: 16px; border-image: var(--art-typesheet) 30 fill / 16px stretch; box-shadow: none; filter: drop-shadow(0 10px 14px rgb(30 18 8 / .35)); color: var(--rs-ink); }
.rs-scrap { border-style: solid; border-width: 14px; border-image: var(--art-scrap) 40 fill / 14px stretch; color: var(--rs-ink); }
.rs-index { background: #fbfaf6 var(--art-index) center / 100% 100%; box-shadow: var(--rs-lift); color: var(--rs-ink); }
.rs-manila { background: #d9b981 var(--art-manila); background-size: 640px; box-shadow: var(--rs-lift); color: #2c2416; }
.rs-taped { position: relative; }
.rs-taped::before { content: ""; position: absolute; left: calc(50% - 56px); top: -16px; width: 112px; height: 32px; background: var(--art-tape) center / contain no-repeat; transform: rotate(-3deg); pointer-events: none; z-index: 2; }
.rs-clipped { position: relative; }
.rs-clipped::before { content: ""; position: absolute; right: 18px; top: -30px; width: 24px; height: 70px; background: var(--art-clip) center / contain no-repeat; transform: rotate(10deg); pointer-events: none; z-index: 2; }
.rs-pinned { position: relative; }
.rs-pinned::before { content: ""; position: absolute; left: calc(50% - 12px); top: -12px; width: 24px; height: 28px; background: var(--art-pin) center / contain no-repeat; pointer-events: none; z-index: 2; }

/* ink marks drawn in pen instead of glyphs the three fonts lack (arrows, ticks) */
.rs-ink { display: inline-block; width: 1.05em; height: .8em; vertical-align: -.02em; overflow: visible; }
.rs-ink--tick { width: 1.1em; height: .9em; vertical-align: -.1em; }

.g-modal__x { font: 400 26px/1 var(--rs-font-type); color: var(--rs-ink-2); text-decoration: none; }
.g-modal__x:hover { color: var(--rs-accent); }

/* type roles */
.rs-typed, .rs-kicker { font-family: var(--rs-font-type); }
.rs-kicker { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-ink-3); }
.rs-hand { font-family: var(--rs-font-hand); color: var(--rs-pen); font-size: 1.35em; line-height: 1.15; }
.rs-read { font-family: var(--rs-font-text); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* buttons: label tape (default black, primary red), stamp, typed link */
.rs-btn, .rs-btn--primary {
  --_bg: transparent; --_bg-hover: transparent;
  position: relative; min-height: 40px; padding: 0 20px; border: 0; border-radius: 2px;
  background: #1c1b1a var(--art-dymo-black) center / 100% 100% no-repeat;
  color: #f2efe8; font: 700 14px/1 var(--rs-font-type); letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(0 0 0 / .7), 0 -1px 0 rgb(255 255 255 / .18);
  box-shadow: 0 1px 1px rgb(0 0 0 / .35), 0 6px 10px -6px rgb(0 0 0 / .6);
  transition: transform var(--rs-dur-1, 120ms) ease, box-shadow var(--rs-dur-1, 120ms) ease;
}
.rs-btn--primary { background: #a51f18 var(--art-dymo-red) center / 100% 100% no-repeat; color: #fff; }
.rs-btn:hover { background: #1c1b1a var(--art-dymo-black) center / 100% 100% no-repeat; transform: translateY(-1px); box-shadow: 0 2px 2px rgb(0 0 0 / .35), 0 10px 14px -8px rgb(0 0 0 / .6); }
.rs-btn--primary:hover { background: #a51f18 var(--art-dymo-red) center / 100% 100% no-repeat; }
.rs-btn:disabled:hover, .rs-btn[aria-disabled="true"]:hover { background: #1c1b1a var(--art-dymo-black) center / 100% 100% no-repeat; transform: none; box-shadow: 0 1px 1px rgb(0 0 0 / .35), 0 6px 10px -6px rgb(0 0 0 / .6); }
.rs-btn--primary:disabled:hover, .rs-btn--primary[aria-disabled="true"]:hover { background: #a51f18 var(--art-dymo-red) center / 100% 100% no-repeat; }
.rs-btn:active { transform: translateY(1px); box-shadow: 0 1px 1px rgb(0 0 0 / .35); }
.rs-btn--ghost, .rs-icon-btn {
  background: transparent !important; box-shadow: none; text-shadow: none; color: var(--rs-ink);
  font: 700 14px/1 var(--rs-font-type); letter-spacing: .06em; text-transform: none;
  text-decoration: underline; text-decoration-color: rgb(31 27 22 / .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.rs-btn--ghost:hover, .rs-icon-btn:hover { transform: none; box-shadow: none; text-decoration-color: var(--rs-accent); color: var(--rs-ink); }
.rs-icon-btn { text-decoration: none; min-width: 36px; min-height: 36px; border-radius: 3px; }
.rs-icon-btn:hover { background: rgb(31 27 22 / .07) !important; }
.rs-btn--stamp {
  background: transparent !important; color: var(--rs-accent); text-shadow: none; box-shadow: none;
  border: 2.5px solid currentColor; border-radius: 3px; padding: 0 16px; transform: rotate(-1.5deg);
  font: 700 15px/1 var(--rs-font-type); letter-spacing: .14em; mix-blend-mode: multiply;
}
.rs-btn--stamp:hover { background: rgb(179 38 30 / .07) !important; transform: rotate(-1.5deg) translateY(-1px); box-shadow: none; }
.rs-btn--stamp.is-done, .rs-btn--stamp[aria-pressed="true"] { color: var(--rs-ok); }
.rs-btn--sm { min-height: 36px; padding: 0 12px; font-size: 12px; }
.rs-btn:disabled, .rs-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* tabs: folder tabs */
.rs-tabs { gap: 3px; background: none; border-bottom: 2px solid rgb(31 27 22 / .45); padding: 0 6px; }
.rs-tab {
  min-height: 38px; border: 0; border-radius: 8px 8px 0 0; margin-bottom: -2px;
  background: #cdb07b var(--art-manila); background-size: 400px; color: #4a3a1e;
  font: 700 12px/1 var(--rs-font-type); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 -3px 5px -3px rgb(0 0 0 / .3);
}
.rs-tab:hover { color: var(--rs-ink); filter: brightness(1.05); }
.rs-tab[aria-selected="true"], .rs-tab[aria-checked="true"], .rs-tab[aria-current="true"], .rs-tab[aria-current="page"], .rs-tab.is-active {
  background: #efe9dd var(--art-paper); background-size: 400px; color: var(--rs-ink); box-shadow: inset 0 3px 0 var(--rs-accent);
}

/* inputs: a typed line on paper; selects: an index card */
.rs-input {
  border: 0; border-bottom: 1.5px solid rgb(31 27 22 / .6); border-radius: 0; background: transparent;
  font: 16px/1.3 var(--rs-font-type); color: var(--rs-ink); padding: 8px 2px 6px; box-shadow: none;
}
.rs-input:hover { border-bottom-color: var(--rs-ink); }
.rs-input:focus, .rs-input:focus-visible { outline: none; border-bottom: 2px solid var(--rs-accent); background: rgb(250 226 90 / .12); box-shadow: none; }
textarea.rs-input { border: 1.5px dashed rgb(31 27 22 / .35); background: rgb(255 255 255 / .25); padding: 8px; }
.rs-select { border: 0; border-radius: 0; background: #fbfaf6 var(--art-index) center / 100% 100%; font: 16px var(--rs-font-type); box-shadow: var(--rs-lift); color: var(--rs-ink); }
.rs-listbox { border: 0; border-radius: 0; background: #fbfaf6 var(--art-index) top / 100% auto; box-shadow: var(--rs-lift-2); }
.rs-option { font: 15px var(--rs-font-text); border-radius: 0; }
.rs-option[aria-selected="true"], .rs-option:hover { background: rgb(250 226 90 / .45); }

/* panels, cards, tags */
.rs-panel, .rs-card { background: #efe9dd var(--art-paper); background-size: 640px; border: 0; border-radius: 2px; box-shadow: var(--rs-lift); color: var(--rs-ink); }
.rs-tag, .rs-badge {
  background: #1c1b1a var(--art-dymo-black) center / 100% 100%; color: #f2efe8; border: 0; border-radius: 1px;
  font: 700 11px/1 var(--rs-font-type); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px;
  text-shadow: 0 1px 0 rgb(0 0 0 / .7);
}
.rs-kbd { font: 700 12px var(--rs-font-type); background: #efe9dd var(--art-paper); border: 1px solid rgb(31 27 22 / .45); border-bottom-width: 2px; border-radius: 3px; }
.rs-avatar { background: #2d2823; color: #f1ead9; font: 700 11px var(--rs-font-type); box-shadow: 0 0 0 2px #efe9dd, 0 2px 3px rgb(0 0 0 / .4); }

/* modal: a sheet laid straight on the desk, no dimming */
.rs-modal__backdrop { background: none; backdrop-filter: none; }
.rs-modal {
  border: 0; border-radius: 0; background: #efe9dd var(--art-paper); background-size: 640px;
  box-shadow: var(--rs-lift-2); color: var(--rs-ink);
}

/* toast: a clipped note */
.rs-toast {
  position: relative; border: 0; border-radius: 0; background: #f6f1e4 var(--art-paper); background-size: 500px;
  box-shadow: var(--rs-lift-2); color: var(--rs-ink); font-family: var(--rs-font-text);
}
.rs-toast::before { content: ""; position: absolute; right: 14px; top: -26px; width: 20px; height: 58px; background: var(--art-clip) center / contain no-repeat; transform: rotate(8deg); pointer-events: none; }

/* photo frame: a print; pending plate stays quiet */
.rs-photo { background: var(--art-print) center / 100% 100%; border: 0; border-radius: 0; padding: 10px; box-shadow: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3)) drop-shadow(0 8px 10px rgb(30 18 8 / .38)); }

/* reading documents */
.rs-doc { font-family: var(--rs-font-doc); color: var(--rs-ink); }
.rs-doc p, .rs-doc li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.rs-doc h2 { font: 700 13px/1.2 var(--rs-font-type); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1.5px solid var(--rs-ink); padding-bottom: 3px; }
.rs-doc table { font-family: var(--rs-font-type); font-size: 13px; }
.rs-doc th { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .rs-btn, .rs-btn--primary { transition: none; }
}