/* User-created paper sits above page chrome without making the board itself clickable. */
@font-face { font-family:'KramKing Patrick Hand'; src:url('./assets/fonts/PatrickHand-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'KramKing Dancing Script'; src:url('./assets/fonts/DancingScript.ttf') format('truetype'); font-weight:400 700; font-style:normal; font-display:swap; }
.sticky-board { position:absolute; top:0; left:0; width:100%; height:0; z-index:80; pointer-events:none; }
.sticky-board[hidden], .sticky-board [hidden], .sticky-board-overlay [hidden] { display:none !important; }
.sticky-board-layer { position:static; }
.board-note { pointer-events:auto; }
.board-note, .board-note-colors button { --sticky-top:#fff0a7; --sticky-bottom:#f1da79; --sticky-ink:#4d452e; }
:is(.board-note,.board-note-colors button)[data-color="rose"] { --sticky-top:#fad1c4; --sticky-bottom:#edafa1; --sticky-ink:#63453f; }
:is(.board-note,.board-note-colors button)[data-color="lilac"] { --sticky-top:#e7def6; --sticky-bottom:#cdbce2; --sticky-ink:#50445f; }
:is(.board-note,.board-note-colors button)[data-color="sky"] { --sticky-top:#d8edf5; --sticky-bottom:#b1d3e2; --sticky-ink:#354f5d; }
:is(.board-note,.board-note-colors button)[data-color="sage"] { --sticky-top:#e2ebc5; --sticky-bottom:#c5d69e; --sticky-ink:#435337; }
.board-note { width:260px; height:260px; max-width:calc(100vw - 24px); color:var(--sticky-ink); margin:0; border:0; padding:0; isolation:isolate; font-family:var(--font-body,system-ui,sans-serif); }
.board-note::before, .board-note::after { content:""; position:absolute; z-index:-1; pointer-events:none; bottom:8px; width:48%; height:38%; opacity:min(.6,calc(var(--ui-shadow-strength,1.5) * .28)); background:#332514; filter:blur(6px); }
.board-note::before { left:5px; transform:rotate(-4deg); transform-origin:right bottom; }
.board-note::after { right:5px; bottom:5px; transform:rotate(5deg); transform-origin:left bottom; }
.board-note-paper { position:relative; display:flex; flex-direction:column; height:100%; box-sizing:border-box; border:0; border-radius:1px 2px 38% 3% / 1px 2px 4% 1%; background-image:url('/assets/paper-grain.svg'),linear-gradient(171deg,#ffffff25,transparent 26%,#9473380b 78%,#ffffff68 99%),linear-gradient(130deg,var(--sticky-top),var(--sticky-bottom)); box-shadow:inset 0 1px 0 #ffffff80,inset 1px 0 0 #ffffff30,inset -1px 0 0 #795d2e18,inset 0 -1px 0 #795d2e3b,0 1px 2px #36270d1f; }
.board-note-paper::before { content:""; position:absolute; pointer-events:none; top:0; left:0; right:0; height:21%; background:linear-gradient(180deg,#6d512614,transparent); }
.board-note-paper::after { content:""; position:absolute; pointer-events:none; right:0; bottom:0; width:55%; height:28px; border-radius:0 0 90% 0 / 0 0 30% 0; background:radial-gradient(ellipse at 80% 110%,#ffffff78,#ffffff0a 65%,transparent 72%); }
.board-note-strip { position:relative; display:flex; gap:0; align-items:center; flex-shrink:0; min-height:36px; padding:0 8px; background:none; border:0; }
.board-note-strip > button:not(.board-note-grab) { flex:0 0 21px; width:21px; min-width:21px; height:28px; padding:2px; margin:0; }
.board-note-text-format { font:bold 14px Georgia,serif; cursor:pointer; opacity:.55; }
.board-note-strip > .board-note-grab { min-width:36px; padding:4px 2px; border-radius:0; }
.board-note-from { display:flex; align-items:center; gap:3px; min-width:0; width:100%; font:11px/1.3 var(--font-body,system-ui,sans-serif); }
.board-note-from b { flex-shrink:0; }
.board-note-from > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-note-send { display:grid; place-items:center; cursor:pointer; opacity:.55; }
.sticky-send-form { display:grid; gap:12px; }
.board-note-strip button { color:inherit; background:transparent; border:0; border-radius:50%; box-shadow:none; margin:0; }
.board-note-grab { align-self:stretch; flex:1; min-width:0; padding:4px 8px; display:flex; align-items:center; min-height:36px; text-align:left; cursor:grab; touch-action:none; user-select:none; }
.board-note-grab > .board-note-grip { width:22px; height:8px; opacity:0; background:radial-gradient(circle,var(--sticky-ink) 1px,transparent 1.5px) 0 0 / 6px 5px; }
.board-note-link-edit, .board-note-trash { width:28px; height:28px; display:grid; place-items:center; cursor:pointer; opacity:.42; }
.board-note:hover .board-note-strip button, .board-note:focus-within .board-note-strip button { opacity:1; }
.board-note:hover .board-note-grab > .board-note-grip, .board-note:focus-within .board-note-grab > .board-note-grip { opacity:.45; }
.board-note-strip button:hover { background:#fff3; }
.board-note-content { position:relative; flex:1; min-height:0; padding:6px 23px 30px; overflow:auto; overscroll-behavior:auto; scrollbar-width:thin; scrollbar-color:#85714166 transparent; }
.board-note h2 { margin:0 0 12px; font-size:19px; font-weight:700; color:inherit; line-height:1.35; letter-spacing:-.02em; overflow-wrap:anywhere; }
.board-note p { font-size:15px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; color:inherit; }
.board-note-link { color:inherit; display:flex; align-items:center; gap:8px; margin-top:17px; padding:0; border:0; text-decoration:none; font-size:13px; font-weight:650; min-height:34px; }
.board-note-link span { min-width:0; flex:1; overflow-wrap:anywhere; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--sticky-ink) 35%,transparent); text-underline-offset:3px; }
.board-note-link svg { flex-shrink:0; }
.board-note-link:hover span { text-decoration-color:currentColor; }
.board-note button:focus-visible, .board-note-link:focus-visible { outline:2px solid var(--sticky-ink); outline-offset:1px; }
.board-note.is-dragging, .board-note.is-dragging .board-note-grab { cursor:grabbing; }
.board-note.is-dragging::before,.board-note.is-dragging::after { opacity:.58; }
.board-note-resize { position:absolute; bottom:1px; right:1px; width:29px; height:29px; padding:0; border:0; border-radius:0; background:transparent; color:inherit; box-shadow:none; cursor:nwse-resize; touch-action:none; z-index:1; }
.board-note-resize span { position:absolute; right:6px; bottom:8px; width:11px; height:11px; opacity:.38; background:linear-gradient(135deg,transparent 42%,currentColor 43% 49%,transparent 50% 67%,currentColor 68% 74%,transparent 75%); }
.board-note-resize:hover span, .board-note-resize:focus-visible span { opacity:.8; }
.sticky-board-overlay { z-index:9000 !important; }
@media (pointer:coarse) { .board-note-strip { min-height:44px; } .board-note-grab { min-height:44px; } .board-note-link-edit,.board-note-trash { width:36px; height:44px; opacity:.7; } .board-note-resize { width:44px; height:44px; } }


@media (prefers-reduced-motion:reduce) { .board-note-paper { transition:none; } .board-note.is-dragging .board-note-paper { transform:none; } }
@media (forced-colors:active) { .board-note-paper { border:2px solid CanvasText; } .board-note::before,.board-note::after { display:none; } }
@media print { .sticky-board,.sticky-board-overlay { display:none !important; } }

/* A real desk accessory below the dashboard: wood mitres, recessed cork, and ample space. */
.page-bulletin { margin-top:64px; padding-top:12px; }
.page-bulletin-heading { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; margin-bottom:24px; }
.page-bulletin-heading h2 { margin:0 0 6px; font-size:25px; letter-spacing:-.03em; color:var(--paper-ink); }
.page-bulletin-heading p { margin:0; font-size:14px; color:var(--paper-muted); }
.page-bulletin-heading .button { white-space:nowrap; }
.page-bulletin-frame { position:relative; padding:20px; border-radius:5px; background:repeating-linear-gradient(2deg,#5d32181c 0 1px,transparent 1px 4px),linear-gradient(120deg,#c99b65,#a97543 27%,#dab381 50%,#986436 78%,#bf905b); box-shadow:inset 1px 2px 1px #f4d9a9, inset -1px -2px 2px #59371ea6,0 2px 3px #38271755,0 18px 30px -14px #35281580; }
.page-bulletin-frame::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:5px; background:linear-gradient(135deg,transparent calc(50% - .5px),#744e2c50 50%,transparent calc(50% + 1px)) top left / 20px 20px,linear-gradient(45deg,transparent calc(50% - .5px),#744e2c50 50%,transparent calc(50% + 1px)) top right / 20px 20px,linear-gradient(45deg,transparent calc(50% - .5px),#744e2c50 50%,transparent calc(50% + 1px)) bottom left / 20px 20px,linear-gradient(135deg,transparent calc(50% - .5px),#744e2c50 50%,transparent calc(50% + 1px)) bottom right / 20px 20px; background-repeat:no-repeat; }
.page-bulletin-cork { min-height:720px; position:relative; background-color:#bd905e; background-image:url('/assets/cork-grain.svg'),radial-gradient(ellipse at 35% 25%,#e2bd8338,transparent 70%),linear-gradient(130deg,#bb8f5b,#cca372 52%,#bb8d5c); box-shadow:inset 0 3px 8px #472c1d80,inset 2px 0 5px #5c371b55,0 1px 0 #f8d6a27a; border:1px solid #795330; border-radius:1px; }
.page-bulletin-resize { position:absolute; right:0; bottom:0; width:32px; height:32px; padding:6px; border:0; border-radius:5px; color:#51351e; background:transparent; cursor:ns-resize; touch-action:none; user-select:none; z-index:1; }
.page-bulletin-resize svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.page-bulletin-resize:hover, .page-bulletin-resize:focus-visible { background:#fff3cc50; outline:2px solid #6b472b; outline-offset:2px; }
.trash-note-preview { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0 0; color:var(--muted); }
@media(max-width:600px) { .page-bulletin-frame { padding:13px; } .page-bulletin-heading h2 { font-size:23px; } }
@media(forced-colors:active) { .page-bulletin-cork { background:Canvas; border:2px solid CanvasText; } .page-bulletin-frame { background:Canvas; border:2px solid CanvasText; } }

/* Inline controls retain the paper face; only an actively edited field gets an underline. */
.board-note-strip { z-index:2; }
.board-note-strip :is(.board-note-color,.board-note-link-edit,.board-note-trash) { flex:0 0 28px; width:28px; height:30px; display:grid; place-items:center; padding:4px; cursor:pointer; opacity:.65; }
.sticky-color-dot { display:block; width:15px; height:15px; border-radius:50%; border:1px solid #76614099; background:linear-gradient(var(--sticky-top),var(--sticky-bottom)); box-shadow:inset 0 1px 2px #ffffffb0,0 1px 1px #513c1920; }
.board-note-colors { position:absolute; top:34px; right:8px; padding:6px; display:flex; gap:3px; background:var(--paper-sheet,#fffaf0); border:1px solid #76614066; border-radius:20px; box-shadow:0 4px 12px #33251440; }
.board-note-colors button { display:grid; place-items:center; width:25px; height:25px; padding:3px; cursor:pointer; }
.board-note-colors button[aria-pressed="true"] { outline:2px solid var(--sticky-ink); outline-offset:-1px; }
.board-note-content .board-note-body { display:block; width:100%; min-width:0; max-width:100%; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; color:inherit; font-family:inherit; resize:none; overflow:hidden; cursor:text; white-space:pre-wrap; overflow-wrap:anywhere; }
.board-note-content .board-note-body { font-size:15px; font-weight:400; line-height:1.6; }
.board-note-content textarea::placeholder { color:var(--sticky-ink); opacity:.5; }
.board-note-content textarea:focus-visible { outline:1px dashed color-mix(in srgb,var(--sticky-ink) 55%,transparent); outline-offset:3px; }
.board-note-content textarea.is-editing { box-shadow:0 1px 0 color-mix(in srgb,var(--sticky-ink) 35%,transparent); }
.board-note-format { display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin:0 10px 5px; padding:4px; flex-shrink:0; border:1px solid #70633d44; border-radius:5px; background:#fffdf4d9; color:var(--sticky-ink); }
.board-note-format :is(select,input,button) { min-height:25px; height:25px; padding:2px 4px; margin:0; border:1px solid transparent; border-radius:3px; background:transparent; color:inherit; font:12px/1.2 system-ui,sans-serif; box-shadow:none; }
.board-note-format select { flex:1; min-width:65px; width:80px; }
.board-note-format input { width:42px; }
.board-note-format button { width:24px; padding:2px; cursor:pointer; }
.board-note-format button[aria-pressed="true"] { background:#bca55d40; border-color:#70633d77; }
.board-note-format :is(select,input,button):focus-visible { outline:2px solid var(--sticky-ink); outline-offset:1px; }
#app > .page-bulletin { max-width:1100px; margin-left:auto; margin-right:auto; padding:12px 24px 40px; }
.page-bulletin { padding-bottom:32px; }
#app-content > .page-bulletin { margin-left:24px; margin-right:24px; }
@media(max-width:600px) { #app-content > .page-bulletin { margin-left:12px; margin-right:12px; } }
@media(pointer:coarse) { .board-note-strip :is(.board-note-color,.board-note-link-edit,.board-note-trash) { flex-basis:32px; width:32px; height:40px; } .board-note-colors { top:42px; } }
@media print { .page-bulletin { display:none !important; } }

.board-note-content { scrollbar-gutter:stable; }
.board-note-media,.board-note-link-host { display:flow-root; }
.board-note-format .board-note-dynamic { display:flex; align-items:center; gap:6px; flex-basis:100%; font:12px/1.4 system-ui,sans-serif; cursor:pointer; padding-bottom:3px; }
.board-note-format .board-note-dynamic input { appearance:auto; width:14px; height:14px; min-height:14px; padding:0; accent-color:var(--sticky-ink); }
.board-note-format input:disabled { opacity:.45; cursor:not-allowed; background:#70633d12; }
.sticky-attachment-menu { display:grid; gap:10px; }
.sticky-attachment-menu > button { display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:14px 16px; width:100%; }
.sticky-attachment-panel { display:grid; gap:12px; }
.sticky-attachment-back { justify-self:start; display:inline-flex; align-items:center; gap:5px; }
.sticky-attachment-panel .field { margin:0; }
.sticky-attachment-panel [role=alert] { color:var(--danger,#b83232); margin:0; }
.sticky-attachment-existing { display:grid; gap:8px; }
.sticky-attachment-existing:empty { display:none; }
.sticky-attachment-panel .library-share-tree { max-height:min(48vh,420px); }
.sticky-attachment-panel .library-share-status:empty { display:none; }

/* Compact viewing never changes the saved desktop placement. */
.sticky-board[data-layout="stack"] .board-note-grab { cursor:default; touch-action:pan-y; opacity:1; }
.sticky-board[data-layout="stack"] .board-note-grip { visibility:hidden; }