@import url('https://fonts.bunny.net/css?family=atkinson-hyperlegible:400|caveat:500|comfortaa:400|fira-mono:400|ibm-plex-mono:400|kalam:400|lora:400|merriweather:400|noto-sans:400|noto-sans-mono:400|noto-serif:400|open-sans:400|patrick-hand:400|pt-sans:400|pt-serif:400|roboto:400|roboto-mono:400|roboto-slab:400|source-sans-3:400|special-elite:400|ubuntu:400');

.sticky-page { min-height: 100vh; overflow: hidden; }
.sticky-shell { position: fixed; inset: 0; width: 100%; height: 100dvh; margin: 0; padding: 0; }
.sticky-page-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sticky-top-actions { display: flex; align-items: center; gap: 4px; }
.sticky-help-slot { flex:0 0 40px; width:40px; height:40px; }
.sticky-top-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 6px; background: rgba(18,19,19,.68); color: #f4f4f1; font: inherit; font-size: 22px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.2); backdrop-filter: blur(5px); cursor: pointer; }
.sticky-top-button:hover, .sticky-top-button:focus-visible { border-color: var(--accent, #f2a900); color: var(--accent, #f2a900); outline: none; }
.sticky-top-button:disabled { opacity:.6; cursor:default; }
.note-sort-button { border:2px solid transparent; }
.note-sort-button.has-active-filter { border-color:#7cfc00; box-shadow:0 0 10px rgba(124,252,0,.24); color:#b7ff79; }
.sticky-page .site-help-trigger { border: 1px solid rgba(255,255,255,.24) !important; border-radius: 6px !important; background: rgba(18,19,19,.68) !important; box-shadow: 0 4px 14px rgba(0,0,0,.2) !important; color: #f4f4f1 !important; backdrop-filter: blur(5px); }
.sticky-page .site-help-trigger.site-help-trigger--wide-offset { right: max(288px, calc(272px + env(safe-area-inset-right))) !important; }
.icon-text-button, .primary-action, .secondary-action, .pay-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid #555; border-radius: 6px; padding: 9px 14px; color: #f6f5ef; background: #202223; font: inherit; cursor: pointer; }
.primary-action, .pay-button { border-color: var(--accent, #f2a900); background: var(--accent, #f2a900); color: #111; font-weight: 700; }
.sticky-board { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background:transparent; cursor: grab; touch-action: none; }
.sticky-board.is-panning { cursor: grabbing; }
/* Every geohash board uses one stable coordinate space; zoom only changes its presentation. */
.sticky-canvas { position: absolute; top: 0; left: 0; width: 2048px; height: 2048px; transform-origin: 0 0; background-color:#b98b63; background-image:url('/img/cork-board.png'); background-repeat:repeat; background-size:600px 600px; will-change: transform; backface-visibility:hidden; transform-style:preserve-3d; }
/* A wooden rail around the cork, sitting outside the board so no note is ever
   covered by it. It lives inside the transformed canvas, so it pans and zooms
   with the board; --cork-frame is set from BOARD_FRAME_WIDTH in stickyNotes.mjs, so
   the rail and the fitting maths cannot drift apart. */
/* The band just outside the rail: without it the board's cork tiling runs on past
   the frame and the rail reads as a line drawn on a cork wall rather than as the
   board's own edge. Fades into the page, so a zoomed-out view is still the board. */
.cork-frame { position: absolute; inset: calc(var(--cork-frame, 26px) * -1); pointer-events: none; box-shadow:0 5px 20px rgba(12,6,1,.5); }
.cork-frame::after { content: ''; position: absolute; inset: var(--cork-frame, 26px); box-shadow: inset 0 0 8px rgba(28,14,4,.5), inset 0 0 2px rgba(255,232,190,.18); }
.cork-frame__rail { position: absolute; background-color:#80532f; border:1px solid rgba(54,30,13,.42); box-shadow:0 2px 7px rgba(18,9,2,.42), inset 0 1px rgba(255,239,209,.18), inset 0 -2px rgba(48,25,10,.25); }
.cork-frame__rail--top, .cork-frame__rail--bottom { left: 0; right: 0; height: var(--cork-frame, 26px); background-image:radial-gradient(ellipse at 18% 48%, transparent 0 4px, rgba(70,39,18,.35) 5px 6px, transparent 7px),radial-gradient(ellipse at 72% 55%, transparent 0 2px, rgba(65,35,15,.28) 3px 4px, transparent 5px),repeating-linear-gradient(2deg, rgba(52,28,12,.16) 0 1px, transparent 1px 5px, rgba(244,211,159,.08) 5px 6px, transparent 6px 12px),linear-gradient(180deg,#b07c48 0%,#966239 38%,#754725 72%,#593418 100%); background-size:260px 100%,190px 100%,120px 100%,100% 100%; }
.cork-frame__rail--left, .cork-frame__rail--right { top: 0; bottom: 0; width: var(--cork-frame, 26px); background-image:radial-gradient(ellipse at 48% 22%, transparent 0 4px, rgba(70,39,18,.35) 5px 6px, transparent 7px),radial-gradient(ellipse at 52% 68%, transparent 0 2px, rgba(65,35,15,.28) 3px 4px, transparent 5px),repeating-linear-gradient(88deg, rgba(52,28,12,.16) 0 1px, transparent 1px 5px, rgba(244,211,159,.08) 5px 6px, transparent 6px 12px),linear-gradient(90deg,#b07c48 0%,#966239 38%,#754725 72%,#593418 100%); background-size:100% 260px,100% 190px,100% 120px,100% 100%; }
.cork-frame__rail--top { top: 0; }
.cork-frame__rail--bottom { bottom: 0; }
.cork-frame__rail--left { left: 0; }
.cork-frame__rail--right { right: 0; }
.board-status { position: absolute; inset: 50% auto auto 50%; z-index: 5; translate: -50% -50%; padding: 8px 12px; color: rgba(255,255,255,.72); background: rgba(32, 20, 12, .5); border-radius: 4px; pointer-events: none; }
.login-confirmation { position: absolute; inset: 50% auto auto 50%; z-index: 30; translate: -50% -50%; max-width: min(88vw, 420px); padding: 12px 16px; color: #fff; background: rgba(22, 18, 14, .9); border: 1px solid rgba(242, 169, 0, .55); border-radius: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); text-align: center; pointer-events: none; }
.sticky-note { --note: #f7dc63; --note-font-size: 17px; --note-letter-spacing: 0; position: absolute; width: 220px; aspect-ratio: 1; padding: 22px 18px 18px; overflow: hidden; color: #26231e; background: var(--note); box-shadow: 2px 5px 12px rgba(31, 16, 5, .3); font-family: 'Special Elite', 'Noto Sans', 'Courier New', monospace; font-size: var(--note-font-size); line-height: 1.42; letter-spacing: var(--note-letter-spacing); white-space: pre-wrap; overflow-wrap: anywhere; transform: translate(-50%, -50%) rotate(var(--rotation, 0deg)); }
.sticky-note:not(.draft-note):not(.sticky-note--placing) { overflow: visible; }
.sticky-note--dense { --note-letter-spacing: -.025em; padding: 1.42em 1em; }
.sticky-note::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: url('/img/grain.png'); pointer-events: none; }
.sticky-note--pink { --note: #f3a7c4; }.sticky-note--blue { --note: #91d2eb; }.sticky-note--green { --note: #acd986; }.sticky-note--orange { --note: #f4b266; }
.sticky-note--font-typewriter, .font-preview--typewriter, .note-font-select--typewriter { font-family:'Special Elite','Noto Sans',monospace; }.sticky-note--font-handwritten, .font-preview--handwritten, .note-font-select--handwritten { font-family:'Caveat','Noto Sans',cursive; }.sticky-note--font-patrick-hand, .font-preview--patrick-hand, .note-font-select--patrick-hand { font-family:'Patrick Hand','Noto Sans',cursive; }.sticky-note--font-kalam, .font-preview--kalam, .note-font-select--kalam { font-family:'Kalam','Noto Sans',cursive; }.sticky-note--font-comfortaa, .font-preview--comfortaa, .note-font-select--comfortaa { font-family:'Comfortaa','Noto Sans',sans-serif; }.sticky-note--font-noto-sans, .font-preview--noto-sans, .note-font-select--noto-sans { font-family:'Noto Sans',sans-serif; }.sticky-note--font-noto-serif, .font-preview--noto-serif, .note-font-select--noto-serif { font-family:'Noto Serif',serif; }.sticky-note--font-noto-mono, .font-preview--noto-mono, .note-font-select--noto-mono { font-family:'Noto Sans Mono',monospace; }.sticky-note--font-roboto, .font-preview--roboto, .note-font-select--roboto { font-family:'Roboto','Noto Sans',sans-serif; }.sticky-note--font-mono, .font-preview--mono, .note-font-select--mono { font-family:'Roboto Mono','Noto Sans Mono',monospace; }.sticky-note--font-roboto-slab, .font-preview--roboto-slab, .note-font-select--roboto-slab { font-family:'Roboto Slab','Noto Serif',serif; }.sticky-note--font-open-sans, .font-preview--open-sans, .note-font-select--open-sans { font-family:'Open Sans','Noto Sans',sans-serif; }.sticky-note--font-source-sans, .font-preview--source-sans, .note-font-select--source-sans { font-family:'Source Sans 3','Noto Sans',sans-serif; }.sticky-note--font-ubuntu, .font-preview--ubuntu, .note-font-select--ubuntu { font-family:'Ubuntu','Noto Sans',sans-serif; }.sticky-note--font-pt-sans, .font-preview--pt-sans, .note-font-select--pt-sans { font-family:'PT Sans','Noto Sans',sans-serif; }.sticky-note--font-pt-serif, .font-preview--pt-serif, .note-font-select--pt-serif { font-family:'PT Serif','Noto Serif',serif; }.sticky-note--font-fira-mono, .font-preview--fira-mono, .note-font-select--fira-mono { font-family:'Fira Mono','Noto Sans Mono',monospace; }.sticky-note--font-ibm-plex-mono, .font-preview--ibm-plex-mono, .note-font-select--ibm-plex-mono { font-family:'IBM Plex Mono','Noto Sans Mono',monospace; }.sticky-note--font-merriweather, .font-preview--merriweather, .note-font-select--merriweather { font-family:'Merriweather','Noto Serif',serif; }.sticky-note--font-atkinson, .font-preview--atkinson, .note-font-select--atkinson { font-family:'Atkinson Hyperlegible','Noto Sans',sans-serif; }.sticky-note--font-serif, .font-preview--serif, .note-font-select--serif { font-family:'Lora','Noto Serif',serif; }
.sticky-note__text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; text-align: center; }
.sticky-note__pin { position: absolute; top: -36px; left: var(--pin-left, 50%); z-index: 3; width: 40px; height: 40px; translate: -50% 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; cursor: pointer; }
.sticky-note__pin-art { position: absolute; top: 0; left: -4px; width: 48px; max-width: none; height: auto; pointer-events: none; }
.sticky-note__author { position: absolute; right: 10px; bottom: 7px; z-index: 2; max-width: 76%; overflow: hidden; color: rgba(38,35,30,.62); font-family: var(--site-font, monospace); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.sticky-note--placing { z-index: 500; width: 240px; cursor: grab; outline: 2px dashed rgba(255,255,255,.8); box-shadow: 5px 12px 24px rgba(0,0,0,.42); user-select: none; touch-action: none; }
.sticky-note--placing:active { cursor: grabbing; }
.sticky-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #4b4d4d; border-radius: 8px; background: #17191a; color: #f3f3f1; box-shadow: 0 24px 75px rgba(0,0,0,.64); }
.sticky-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.dialog-inner { position: relative; padding: 26px; overflow: auto; }
.dialog-inner h2 { margin: 0 42px 8px 0; color: var(--accent, #f2a900); letter-spacing: 0; }
.dialog-inner > p { color: #bfc1bf; line-height: 1.55; }
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: #aaa; font-size: 22px; cursor: pointer; }
.board-chooser { display: grid; gap: 10px; }.board-chooser label { color: #d7d8d5; font-size: .82rem; }.board-chooser input, .board-chooser select { width: 100%; min-width: 0; height: 44px; border: 1px solid #555; border-radius: 5px; padding: 0 12px; background: #0f1011; color: #f4f4f1; font: inherit; }.board-chooser input { text-transform: lowercase; }.board-chooser input:focus, .board-chooser select:focus { border-color: var(--accent, #f2a900); outline: none; box-shadow: 0 0 0 2px rgba(242,169,0,.15); }.geohash-field { display:grid; grid-template-columns:1fr 44px; }.geohash-field input { border-radius:5px 0 0 5px; }.geohash-field button { display:grid; place-items:center; border:1px solid #555; border-left:0; border-radius:0 5px 5px 0; background:#242627; color:var(--accent,#f2a900); font-size:20px; cursor:pointer; }.geohash-field button:hover, .geohash-field button:focus-visible { background:#303233; outline:none; }.board-chooser__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }.board-chooser__actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.board-depth-heading { position:relative; display:flex; align-items:center; gap:7px; width:max-content; max-width:100%; }
.board-depth-help { position:relative; }
.board-depth-help summary { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--accent,#f2a900); font-size:18px; cursor:pointer; list-style:none; }
.board-depth-help summary::-webkit-details-marker { display:none; }
.board-depth-help summary:focus-visible { outline:2px solid var(--accent,#f2a900); outline-offset:2px; }
.board-depth-help p { position:absolute; z-index:20; top:27px; left:-118px; width:min(300px,calc(100vw - 68px)); margin:0; padding:11px 12px; border:1px solid #555; border-radius:6px; background:#242627; box-shadow:0 12px 28px rgba(0,0,0,.45); color:#d5d7d5; font-size:.78rem; line-height:1.45; }
.board-depth-help p strong,.board-depth-help p code { color:var(--accent,#f2a900); }
.board-chooser .board-memory-toggle { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; min-height:42px; cursor:pointer; }.board-memory-toggle input { position:absolute; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }.board-memory-toggle__track { position:relative; width:42px; height:24px; border:1px solid #5c5f60; border-radius:12px; background:#242627; transition:background .16s ease,border-color .16s ease; }.board-memory-toggle__track::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#a9abaa; transition:translate .16s ease,background .16s ease; }.board-memory-toggle input:checked + .board-memory-toggle__track { border-color:var(--accent,#f2a900); background:rgba(242,169,0,.2); }.board-memory-toggle input:checked + .board-memory-toggle__track::after { translate:18px 0; background:var(--accent,#f2a900); }.board-memory-toggle input:focus-visible + .board-memory-toggle__track { outline:2px solid var(--accent,#f2a900); outline-offset:2px; }
.note-sort-inner { display:grid; gap:16px; }
.note-view-options { display:grid; gap:6px; margin:0; border:0; padding:0; }
.note-view-options legend { margin-bottom:7px; color:#aeb0ae; font-size:.78rem; text-transform:uppercase; }
.note-view-options label { display:flex; align-items:center; gap:10px; min-height:40px; border:1px solid #444748; border-radius:6px; padding:8px 11px; background:#202223; color:#f2f2ef; cursor:pointer; }
.note-view-options label:has(input:checked) { border-color:var(--accent,#f2a900); background:rgba(242,169,0,.12); }
.note-view-options label:has(input:disabled) { display:none; }
.note-view-options input { width:17px; height:17px; margin:0; accent-color:var(--accent,#f2a900); }
.note-filter-toggle { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; min-height:54px; border-top:1px solid #3f4242; padding-top:14px; cursor:pointer; }
.note-filter-toggle[hidden] { display:none; }
.note-filter-toggle > span:first-child { display:grid; gap:3px; }
.note-filter-toggle strong { color:#f2f2ef; font-size:.88rem; }
.note-filter-toggle small { color:#9ea19f; font-size:.74rem; line-height:1.35; }
.note-filter-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.note-filter-toggle__track { position:relative; width:42px; height:24px; border:1px solid #5c5f60; border-radius:12px; background:#242627; }
.note-filter-toggle__track::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#a9abaa; transition:translate .16s ease,background .16s ease; }
.note-filter-toggle input:checked + .note-filter-toggle__track { border-color:var(--accent,#f2a900); background:rgba(242,169,0,.2); }
.note-filter-toggle input:checked + .note-filter-toggle__track::after { translate:18px 0; background:var(--accent,#f2a900); }
.note-filter-toggle input:focus-visible + .note-filter-toggle__track { outline:2px solid var(--accent,#f2a900); outline-offset:2px; }
.geohash-map-dialog { width:min(1200px,calc(100vw - 20px)); height:calc(100dvh - 20px); max-width:none; max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid #4b4d4d; border-radius:8px; background:#17191a; color:#f3f3f1; box-shadow:0 24px 75px rgba(0,0,0,.7); }.geohash-map-dialog::backdrop { background:rgba(0,0,0,.8); backdrop-filter:blur(4px); }.geohash-map-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }.geohash-map-header { position:relative; display:flex; align-items:center; min-height:70px; padding:13px 62px 12px 18px; border-bottom:1px solid #404242; }.geohash-map-header h2 { margin:0; color:var(--accent,#f2a900); font-size:1.15rem; }.geohash-map-header p { margin:3px 0 0; color:#bfc1bf; font-size:.78rem; }.geohash-map { min-height:0; background:#ddd; }.geohash-map-selection { display:flex; align-items:center; gap:18px; min-height:64px; padding:10px 14px; border-top:1px solid #404242; background:#17191a; color:#c9cbc9; font-size:.82rem; }.geohash-map-selection code, .geohash-map-selection strong { color:var(--accent,#f2a900); }.geohash-map-selection .primary-action { margin-left:auto; }.geohash-map-dialog .maplibregl-ctrl-attrib { background:rgba(255,255,255,.88); color:#222; }.geohash-map-dialog .maplibregl-ctrl-attrib a { color:#222; }
.area-scales { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:18px 0 4px; }
.area-scale { display:grid; gap:3px; min-height:64px; border:1px solid #505354; border-radius:6px; padding:10px 12px; background:#202223; color:#f6f5ef; font:inherit; text-align:left; cursor:pointer; }
.area-scale:hover, .area-scale:focus-visible { border-color:var(--accent,#f2a900); background:#242627; outline:none; }
.area-scale strong { color:var(--accent,#f2a900); font-size:.95rem; }
.area-scale span { color:#bfc1bf; font-size:.78rem; }
.area-scale:disabled { opacity:.55; cursor:progress; }
.area-scale:focus-visible, .area-lock:focus-within { outline:none; }
.area-lock { margin:14px 0 0; }
.saved-places { border-top:1px solid var(--line,#2a2f38); background:var(--panel,#12161c); }
.saved-places > summary { display:flex; gap:8px; align-items:center; padding:10px 16px; cursor:pointer; font-weight:600; }
.saved-places__list { display:grid; gap:6px; margin:0; padding:0 16px 10px; list-style:none; max-height:32vh; overflow:auto; }
.saved-places__list li { display:flex; gap:8px; align-items:center; }
.saved-places__open { flex:1; display:flex; gap:10px; align-items:baseline; justify-content:space-between;
  padding:8px 10px; border:1px solid var(--line,#2a2f38); border-radius:8px; background:transparent;
  color:inherit; text-align:left; cursor:pointer; }
.saved-places__open:hover { border-color:var(--accent,#f7931a); }
.saved-places__name { font-weight:600; }
.saved-places__open code { opacity:.75; font-size:.85em; }
.saved-places__remove { padding:8px 10px; border:1px solid var(--line,#2a2f38); border-radius:8px;
  background:transparent; color:inherit; cursor:pointer; }
.saved-places__remove:hover { border-color:#e0554b; color:#e0554b; }
.saved-places__empty { opacity:.7; font-size:.9em; }
.saved-places__save { display:flex; gap:8px; align-items:flex-end; padding:0 16px 10px; }
.saved-places__save label { flex:1; display:grid; gap:4px; }
.saved-places__save input { padding:8px 10px; border:1px solid var(--line,#2a2f38); border-radius:8px;
  background:transparent; color:inherit; }
.saved-places > .inline-status { padding:0 16px 12px; }
.map-clear-action { min-height:36px; padding:6px 12px; border:1px solid #505354; border-radius:5px; background:transparent; color:#c9cbc9; font:inherit; font-size:.82rem; cursor:pointer; }.map-clear-action:hover { border-color:#8a8c8a; color:#fff; }
.geohash-map-selection__status { min-height:0; margin:0; text-align:left; }
.login-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0; }
.login-methods button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1px solid #505354; border-radius: 6px; background: #242627; color: #f1f1ee; font: inherit; cursor: pointer; }
.login-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 10px 0; }
.login-field input { min-width: 0; height: 42px; border: 1px solid #505354; border-radius: 5px; padding: 0 10px; background: #101112; color: #f2f2ef; font: inherit; }
.login-field button { height: 42px; border: 1px solid var(--accent, #f2a900); border-radius: 5px; background: transparent; color: var(--accent, #f2a900); cursor: pointer; }
.login-note { margin: 8px 0 0; color: #bbb; font-size: .84rem; line-height: 1.45; }
.private-key-login { margin-top: 18px; color: #bbb; }.private-key-login summary { color: #ddd; cursor: pointer; }.private-key-login p { font-size: .84rem; }
.private-key-login .private-key-warning { color: #ff7b75; line-height: 1.48; }
.private-key-warning strong { color: #ff9a94; }
.anonymous-login-block { margin-top: 18px; }
.anonymous-login { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; border:1px solid var(--accent,#f2a900); border-radius:6px; background:#242627; color:var(--accent,#f2a900); font:inherit; cursor:pointer; }
.login-status-divider { height:1px; margin:18px 0 0; border:0; background:#414445; }
.inline-status { min-height: 1.4em; margin-top: 12px; color: #c6c8c6; font-size: .88rem; text-align: center; }
.inline-status.is-error { color: #ff7b75; }
.account-card { display: grid; gap: 10px; }.account-card code { overflow: hidden; color: #aaa; text-overflow: ellipsis; }.account-card .secondary-action { margin-top: 10px; }
.account-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }.account-identity img { width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid #555; border-radius: 50%; object-fit: cover; background: #101112; }.account-identity > div { display: grid; min-width: 0; gap: 3px; }.account-identity strong, .account-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-identity span { color: var(--accent, #f2a900); font-size: .82rem; }.anonymous-expiry { color: #d2d4d2; font-size: .86rem; }.anonymous-expiry strong { color: var(--accent, #f2a900); font-variant-numeric: tabular-nums; }
.composer-dialog { width: min(440px, calc(100vw - 20px)); }.composer-inner { display: grid; justify-items: center; }
.draft-note { position: relative; width: min(280px, calc(100vw - 82px)); margin: 16px auto 12px; padding: 22px; transform: none; }
.sticky-editor { position: absolute; top: 50%; left: 22px; right: 22px; z-index: 1; min-height: 1.42em; max-height: calc(100% - 44px); overflow: hidden; outline: none; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; transform: translateY(-50%); }
.draft-note.sticky-note--dense .sticky-editor { left: 1em; right: 1em; max-height: calc(100% - 2.84em); }
.sticky-editor:empty::before { content: attr(data-placeholder); color: rgba(38,35,30,.42); }
.color-swatches { display: flex; gap: 12px; margin: 4px 0 8px; }.swatch { width: 30px; height: 30px; border: 2px solid transparent; border-radius: 50%; background: #f7dc63; cursor: pointer; }.swatch--pink { background:#f3a7c4 }.swatch--blue { background:#91d2eb }.swatch--green { background:#acd986 }.swatch--orange { background:#f4b266 }.swatch.is-selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent, #f2a900); }
.composer-count { min-height: 22px; color: #aeb0ae; font-size: .8rem; }.composer-count #noteCapacity { transition: color .16s ease, text-shadow .16s ease; }.composer-count #noteCapacity.is-almost-full { color: var(--accent, #f2a900); }.composer-count #noteCapacity.is-full { color: #ff625b; font-weight: 700; text-shadow: 0 0 10px rgba(255,98,91,.25); }.pay-button { width: min(280px, 100%); margin-top: 8px; }
.payment-dialog { width:min(360px,calc(100vw - 24px)); }.sticky-payment { display:grid; justify-items:center; gap:10px; padding:24px; background:#101112; }.sticky-payment [hidden] { display:none; }.sticky-payment strong { padding-right:38px; color:var(--accent,#f2a900); font-size:1.05rem; }.sticky-payment img { width:min(230px,70vw); aspect-ratio:1; border:8px solid #fff; background:#fff; image-rendering:pixelated; }.sticky-payment code { display:block; width:100%; overflow:hidden; color:#aeb0ae; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.sticky-payment .secondary-action { min-height:36px; padding:6px 10px; }.sticky-payment p { margin:0; color:#aeb0ae; font-size:.78rem; }
.rail-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; }.rail-tabs[hidden] { display:none; }.rail-tab { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; border:1px solid #505354; border-radius:5px; background:#101112; color:#d5d6d3; font:inherit; font-size:.86rem; cursor:pointer; }.rail-tab:hover { border-color:#8a8c8a; }.rail-tab.is-active { border-color:var(--accent,#f2a900); color:#fff; box-shadow:inset 0 0 0 1px var(--accent,#f2a900); }
.font-choice { display:grid; gap:6px; width:min(320px,100%); margin:7px 0; color:#c5c7c5; font-size:.78rem; }.note-font-select { width:100%; min-height:42px; border:1px solid #505354; border-radius:5px; padding:7px 36px 7px 10px; background:#101112; color:#f2f2ef; font-size:1rem; cursor:pointer; }.note-font-select:hover, .note-font-select:focus-visible { border-color:var(--accent,#f2a900); outline:none; box-shadow:0 0 0 2px rgba(242,169,0,.15); }.note-font-select option { background:#101112; color:#f2f2ef; font-size:1rem; }
.hashtag-field { display:grid; gap:6px; width:min(320px,100%); color:#c5c7c5; font-size:.78rem; }.hashtag-field span { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.hashtag-field small { color:#858987; font-size:.68rem; }.hashtag-field input { width:100%; min-height:42px; border:1px solid #505354; border-radius:5px; padding:7px 10px; background:#101112; color:#f2f2ef; font:inherit; font-size:.88rem; }.hashtag-field input:focus { border-color:var(--accent,#f2a900); outline:none; box-shadow:0 0 0 2px rgba(242,169,0,.15); }.hashtag-field input.is-invalid { border-color:#ff625b; box-shadow:0 0 0 2px rgba(255,98,91,.13); }.hashtag-status { width:min(320px,100%); min-height:1.1em; margin-top:-2px; color:#969a97; font-size:.72rem; line-height:1.35; }.hashtag-status.is-error { color:#ff8079; }
.liveliness { display:flex; flex-direction:column; gap:5px; width:min(320px,100%); }.liveliness__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:#c5c7c5; font-size:.8rem; }.liveliness__head output { color:var(--accent,#f2a900); font-weight:700; }.liveliness__slider { width:100%; accent-color:var(--accent,#f2a900); }.liveliness__ticks { display:flex; justify-content:space-between; color:#8d8f8d; font-size:.7rem; letter-spacing:.03em; }.liveliness__ticks .is-selected { color:var(--accent,#f2a900); font-weight:700; }.liveliness__hint { margin:0; color:#8d8f8d; font-size:.74rem; line-height:1.35; }.note-menu [hidden] { display:none; }
.note-scope-toggle { display:flex; align-items:center; gap:9px; width:min(320px,100%); color:#c5c7c5; font-size:.8rem; cursor:pointer; }.note-scope-toggle input { width:18px; height:18px; accent-color:var(--accent,#f2a900); }
.board-controls { position: fixed; left: 50%; bottom: calc(54px + env(safe-area-inset-bottom)); z-index: 2100; display: flex; align-items: center; gap: 4px; translate: -50% 0; padding: 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: rgba(18,19,19,.68); box-shadow: 0 4px 14px rgba(0,0,0,.2); backdrop-filter: blur(7px); }.board-controls button { display:grid; place-items:center; width:38px; height:38px; border:0; background:transparent; color:#f4f4f1; font-size:20px; cursor:pointer; }.board-controls button:hover, .board-controls button:focus-visible { color:var(--accent,#f2a900); outline:none; }
.note-menu { position: fixed; z-index: 2400; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; width: min(330px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding: 18px; border: 1px solid #555; border-radius: 7px; background: rgba(23,25,26,.97); color: #eee; box-shadow: 0 18px 44px rgba(0,0,0,.55); overscroll-behavior:contain; }.note-menu[hidden] { display:none; }.note-menu > span { color:#989b99; font-size:.72rem; text-transform:uppercase; }.note-menu code, .note-menu time { overflow:hidden; color:#ddd; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.note-menu code { grid-column:1 / -1; }.note-menu__expiration { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; }.note-menu__expiration[hidden] { display:none; }.note-expiry-countdown { color:var(--accent,#f2a900); font-size:.72rem; white-space:nowrap; }.note-menu .secondary-action { grid-column:1 / -1; min-height:36px; padding:6px 10px; }.note-menu__close { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:32px; height:32px; border:0; background:transparent; color:#aaa; cursor:pointer; }.note-menu .inline-status { grid-column:1 / -1; }
.note-event-json { grid-column:1 / -1; min-width:0; border-top:1px solid #3d4040; padding-top:8px; }.note-event-json summary { color:#bfc1bf; font-size:.78rem; cursor:pointer; user-select:none; }.note-event-json[open] summary { color:var(--accent,#f2a900); }.note-event-json pre { max-height:38dvh; margin:9px 0 0; overflow:auto; border:1px solid #3d4040; border-radius:5px; padding:10px; background:#0d0e0f; white-space:pre; overscroll-behavior:contain; }.note-event-json pre code { color:#d9dbd8; font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace !important; font-size:.7rem; line-height:1.5; text-overflow:clip; white-space:pre; }
.placement-controls { position: fixed; left: 50%; bottom: calc(108px + env(safe-area-inset-bottom)); z-index: 2250; display: flex; align-items: center; gap: 7px; translate: -50% 0; padding: 7px; border: 1px solid #4c4e4d; border-radius: 7px; background: rgba(20,21,21,.94); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.placement-controls[hidden] { display: none; }
.discard-bin { position: fixed; left: 50%; bottom: calc(172px + env(safe-area-inset-bottom)); z-index: 2260; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px dashed #ce4c46; border-radius: 999px; background: rgba(43,20,19,.94); color: #ff8079; font: inherit; font-size: .82rem; cursor: pointer; translate: -50% 0; box-shadow: 0 10px 26px rgba(0,0,0,.42); transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease; }
.discard-bin[hidden] { display: none; }
.discard-bin.is-armed { border-style: solid; border-color: #ff5c53; background: #7a201b; color: #fff; transform: scale(1.07); }
.discard-bin > i { font-size: 20px; }
.discard-dialog .discard-inner { display: grid; gap: 12px; padding: 26px 22px 22px; }
.discard-dialog h2 { margin: 0; font-size: 1.05rem; }
.discard-dialog p { margin: 0; color: #cfd2d0; font-size: .86rem; line-height: 1.5; }
.discard-dialog .discard-warning { color: #ff9d97; }
.discard-dialog .discard-warning[hidden] { display: none; }
.discard-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.discard-confirm { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid #ff5c53; border-radius: 6px; background: #b3362f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sticky-note--doomed { opacity: .6; filter: grayscale(.4); outline: 2px solid #ff5c53; }
@media (max-width: 680px) {
  .icon-text-button, .primary-action { min-height: 38px; padding: 7px 10px; font-size: .78rem; }
  .sticky-note { width: 190px; font-size: 15px; padding: 18px 12px 15px; }
  .sticky-note--placing { width: 210px; font-size: 16px; }
  .login-methods { grid-template-columns: 1fr; }.login-field { grid-template-columns: 1fr auto; }.login-field > span { grid-column: 1 / -1; }
  .dialog-inner { padding: 22px 18px; }
  .placement-controls > span { display:none; }.placement-controls { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .board-controls { bottom:calc(48px + env(safe-area-inset-bottom)); }.board-controls button { width:34px; height:34px; }
  .geohash-map-dialog { width:calc(100vw - 8px); height:calc(100dvh - 8px); }.geohash-map-header { min-height:62px; padding-left:12px; }.geohash-map-selection { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; min-height:82px; padding:8px 10px; }.geohash-map-selection .primary-action { grid-column:1 / -1; width:100%; min-height:36px; margin:0; }
  .geohash-map-selection__status { grid-column:1 / -1; }.map-clear-action { grid-column:1 / -1; }
}

@media (max-width: 480px) {
  .sticky-top-actions { gap:0; }
  .sticky-top-button { width:32px; height:40px; font-size:19px; }
  .sticky-page .site-help-trigger.site-help-trigger--wide-offset { right:max(216px,calc(200px + env(safe-area-inset-right))) !important; }
}

/* Subscription state and the plan picker inside the composer */
.subscription-state {
  margin: .5rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
  opacity: .85;
}

.plan-picker {
  display: flex;
  gap: .5rem;
  margin-top: .55rem;
}
.plan-picker[hidden] { display: none; }

.plan-button {
  flex: 1;
  padding: .5rem .6rem;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .55);
  color: inherit;
  font: inherit;
  font-size: .82rem;
  line-height: 1.25;
  cursor: pointer;
}

.plan-button b { font-weight: 700; }
.plan-button small { display: block; font-size: .72rem; opacity: .75; }

.plan-button.is-active,
.plan-button[aria-pressed="true"] {
  border-color: #f7931a;
  background: rgba(247, 147, 26, .14);
  box-shadow: inset 0 0 0 1px #f7931a;
}

@media (prefers-color-scheme: dark) {
  .plan-button { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }
}

/* Mentions: the chip in the composer, the picker under the note, and the way a
   tagged person is drawn on a note. */
.sticky-editor__mention { padding: 0 .18em; border-radius: 3px; background: rgba(38,35,30,.12); color: #1f4d2b; font-weight: 700; white-space: nowrap; }
.sticky-note__mention { padding: 0 .16em; border-radius: 3px; background: rgba(38,35,30,.1); color: #1f4d2b; font-weight: 700; white-space: nowrap; }
.mention-menu { margin: 6px 0 2px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(18,19,19,.94); box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.mention-menu__list { max-height: 190px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; }
.mention-menu__option { display: flex; align-items: baseline; gap: 8px; padding: 7px 9px; border-radius: 4px; color: #f4f4f1; cursor: pointer; }
.mention-menu__option[aria-selected="true"], .mention-menu__option:hover { background: rgba(242,169,0,.18); }
.mention-menu__name { font-weight: 700; }
.mention-menu__npub { color: rgba(255,255,255,.55); font-family: var(--site-font, monospace); font-size: .72rem; }
.mention-menu__status { padding: 6px 9px; color: rgba(255,255,255,.66); font-size: .78rem; }
.mention-menu__status:empty { display: none; }

/* The person button only means something to a signed-in, named writer. */
.sticky-top-button[aria-pressed="true"] { border-color: var(--accent, #f2a900); color: var(--accent, #f2a900); background: rgba(242,169,0,.16); }
.sticky-top-button:disabled { opacity: .45; cursor: not-allowed; }
.sticky-top-button:disabled:hover { border-color: rgba(255,255,255,.24); color: #f4f4f1; }
.sticky-note.sticky-note--filtered-out:not(.sticky-note--filter-revealed) { opacity:.16; filter:grayscale(.65); cursor:progress; user-select:none; }
.sticky-note.sticky-note--filtered-out:not(.sticky-note--filter-revealed)::before,
.sticky-note.sticky-note--filtered-out:not(.sticky-note--filter-revealed) .sticky-note__text,
.sticky-note.sticky-note--filtered-out:not(.sticky-note--filter-revealed) .sticky-note__author { opacity:0; }
.sticky-note.sticky-note--filtered-out:not(.sticky-note--filter-revealed) .sticky-note__pin { display:none; }
.sticky-note--filter-revealed { z-index:490; opacity:1; filter:none; outline:2px solid #7cfc00; box-shadow:0 0 18px rgba(124,252,0,.3),2px 5px 12px rgba(31,16,5,.3); }
.sticky-note__reveal-countdown { position:absolute; top:8px; right:9px; z-index:4; min-width:34px; border:1px solid rgba(38,35,30,.3); border-radius:12px; padding:2px 7px; background:rgba(255,255,255,.72); color:#20231d; font-family:var(--site-font,monospace); font-size:.68rem; font-weight:700; line-height:1.4; text-align:center; }