/* Leather panel and stitch, shared by the app sidebar and the landing site. Colors come from tokens.css. */
.leatherpanel {
  position: relative; isolation: isolate; background: var(--leather) url("../assets/header-800.jpg") left bottom / 800px auto no-repeat;
  border-radius: 0 0 64px 64px / 0 0 22px 22px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);
}

/* Stitch: two 64px by 22px corner pieces and a straight run between them, all drawn in the thread color through masks. */
.flapstitch { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.flapstitch i { position: absolute; background: var(--thread); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.flapstitch .stl, .flapstitch .str { bottom: 0; width: 64px; height: 22px; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.flapstitch .stl { left: 0; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22' %3E%3Cpath d='M8 0 A56 14 0 0 0 64 14' fill='none' stroke='black' stroke-width='1.7' stroke-dasharray='9 5.5 8 5 10.5 5.5 9 6.5 8.5 5 10 5.5' stroke-dashoffset='86.95'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22' %3E%3Cpath d='M8 0 A56 14 0 0 0 64 14' fill='none' stroke='black' stroke-width='1.7' stroke-dasharray='9 5.5 8 5 10.5 5.5 9 6.5 8.5 5 10 5.5' stroke-dashoffset='86.95'/%3E%3C/svg%3E"); }
.flapstitch .str { right: 0; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22' %3E%3Cpath d='M56 0 A56 14 0 0 1 0 14' fill='none' stroke='black' stroke-width='1.7' stroke-dasharray='9 5.5 8 5 10.5 5.5 9 6.5 8.5 5 10 5.5' stroke-dashoffset='22.45'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22' %3E%3Cpath d='M56 0 A56 14 0 0 1 0 14' fill='none' stroke='black' stroke-width='1.7' stroke-dasharray='9 5.5 8 5 10.5 5.5 9 6.5 8.5 5 10 5.5' stroke-dashoffset='22.45'/%3E%3C/svg%3E"); }
.flapstitch .stm {
  left: 64px; right: 64px; bottom: 6px; height: 4px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='4' viewBox='0 0 88 4' preserveAspectRatio='none'%3E%3Cline x1='0' y1='2' x2='88' y2='2' stroke='black' stroke-width='1.7' stroke-dasharray='9 5.5 8 5 10.5 5.5 9 6.5 8.5 5 10 5.5'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='4' viewBox='0 0 88 4' preserveAspectRatio='none'%3E%3Cline x1='0' y1='2' x2='88' y2='2' stroke='black' stroke-width='1.7' stroke-dasharray='9 5.5 8 5 10.5 5.5 9 6.5 8.5 5 10 5.5'/%3E%3C/svg%3E");
  mask-repeat: round no-repeat; -webkit-mask-repeat: round no-repeat; mask-size: auto 4px; -webkit-mask-size: auto 4px;
}

/* Posting: a parchment card nailed to the quest board. The pin casts a small soft shadow below it. */
.posting {
  position: relative;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><defs><filter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'><feGaussianBlur stdDeviation='2.5'/></filter><mask id='m'><rect x='-20' y='-20' width='120' height='120' fill='%23fff'/><path d='M100 0Q46.46 46.46 0 100Q20 59 18 18Q59 20 100 0Z' fill='%23000'/></mask></defs><path d='M100 0Q46.46 46.46 0 100Q20 59 18 18Q59 20 100 0Z' fill='%23000' opacity='.22' filter='url(%23b)' mask='url(%23m)'/></svg>") right bottom / var(--bbox) var(--bbox) no-repeat,
    var(--card);
  background-origin: border-box;
  border: 1px solid transparent; /* the visible edge is drawn by the container's filter below, so it follows the curled corner */
  border-radius: 0;
  --bend: 62px;
  --flap-line: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M0 100Q20 59 18 18Q59 20 100 0' fill='none' stroke='%23CEB782' stroke-width='3' stroke-linejoin='round'/></svg>");
  --bbox: 74px; /* the bend plus the rounding where the crease meets the card edges */
  -webkit-mask:
    linear-gradient(black, black) left top / 100% calc(100% - var(--bbox) + 1px) no-repeat,
    linear-gradient(black, black) left bottom / calc(100% - var(--bbox) + 1px) var(--bbox) no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M-20 -20H100V-18Q100 0 87.27 12.73Q46.46 46.46 12.73 87.27Q0 100 -18 100H-20Z'/></svg>") right bottom / var(--bbox) var(--bbox) no-repeat;
  mask:
    linear-gradient(black, black) left top / 100% calc(100% - var(--bbox) + 1px) no-repeat,
    linear-gradient(black, black) left bottom / calc(100% - var(--bbox) + 1px) var(--bbox) no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M-20 -20H100V-18Q100 0 87.27 12.73Q46.46 46.46 12.73 87.27Q0 100 -18 100H-20Z'/></svg>") right bottom / var(--bbox) var(--bbox) no-repeat;
}
/* The grid casts the shadow, since a mask on the note itself would clip it. */
.grid:has(> .posting), .list.pinboard:has(> .posting) { align-items: start; filter: drop-shadow(1px 0 0 var(--pin-edge)) drop-shadow(-1px 0 0 var(--pin-edge)) drop-shadow(0 1px 0 var(--pin-edge)) drop-shadow(0 -1px 0 var(--pin-edge)) drop-shadow(0 2px 1.5px rgba(0, 0, 0, .22)) drop-shadow(0 8px 12px rgba(0, 0, 0, .18)); }
/* The fold's outline matches the card border (baked into the image, so each theme restates it). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .posting { --flap-line: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M0 100Q20 59 18 18Q59 20 100 0' fill='none' stroke='%2371613A' stroke-width='3' stroke-linejoin='round'/></svg>"); } }
:root[data-theme="dark"] .posting { --flap-line: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M0 100Q20 59 18 18Q59 20 100 0' fill='none' stroke='%2371613A' stroke-width='3' stroke-linejoin='round'/></svg>"); }
.posting { padding: var(--space-26) var(--space-20) var(--space-20); }
/* The curled-back flap sits above the note's content. */
.posting::after {
  content: ""; position: absolute; z-index: 2; right: -1px; bottom: -1px; width: var(--bbox); height: var(--bbox);
  background: var(--flap-line) center / 100% 100% no-repeat,
    linear-gradient(to bottom right, color-mix(in srgb, var(--card) 94%, black) 33%, color-mix(in srgb, var(--card) 82%, black) 57%);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M100 0Q46.46 46.46 0 100Q20 59 18 18Q59 20 100 0Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 120 120'><path d='M100 0Q46.46 46.46 0 100Q20 59 18 18Q59 20 100 0Z'/></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
}
.posting::before {
  content: ""; position: absolute; top: var(--space-9); left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--clasp-brass) 60%, white), var(--clasp-brass) 55%, var(--clasp-brass-edge));
  box-shadow: var(--shadow-pin); z-index: 1;
}

/* Narrow screens: the top bar becomes the leather panel, with the same stitched curved edge as the sidebar header. */
.topbar .flapstitch { display: none; }
@media (max-width: 899px) {
  .app .topbar { isolation: isolate; padding: var(--space-10) var(--space-16) var(--space-30); background: var(--leather) url("../assets/header-800.jpg") left bottom / 800px auto no-repeat; border-bottom: 0; border-radius: 0 0 64px 64px / 0 0 22px 22px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35); }
  .app .topbar .flapstitch { display: block; }
  .app .topbar > .tbleft, .app .topbar > .topact { position: relative; top: 4px; z-index: 3; }
  .app .topbar #viewTitle { position: relative; top: 2px; color: var(--clasp-brass); text-shadow: 0 1px 0 var(--engrave); }
  .app .topbar #newBtn { --btn: var(--btn-tan); --on-btn: var(--on-btn-tan); }
  .app .topbar .mlogo { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
}