/* Edit mode on the landing prototype: click a frame, button or divider and restyle that one. */
.ed-on .framed, .ed-on .btn-gold, .ed-on .btn-line, .ed-on .head .rule { cursor: pointer; }
/* No outlines on the page: they get in the way of judging the frame. The panel names what is selected. */

/* A restyled frame draws its own svg; hide the default corners and border. */
.framed > .ed-fr { position: absolute; pointer-events: none; z-index: 6; overflow: visible; }
.framed[data-ef] > .c { display: none; }
.framed[data-ef] { border-color: transparent !important; }
.camp.framed[data-ef], .dm.framed[data-ef] { overflow: clip !important; overflow-clip-margin: 70px; }

/* Buttons */
.btn .ed-rule { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.btn[data-eb="B2"] { color: #1b130b; }
.btn[data-eb="B2"]::before { inset: 0; z-index: -1; background: linear-gradient(180deg, #efe3c9, #dccaa4);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.btn[data-eb="B2"]::after { display: none; }
.btn[data-eb="B2"] .pt { background: #efe3c9; border: 1px solid #7a5a2c; }
.btn[data-eb="B1"] { color: var(--ink); }
.btn[data-eb="B1"]::before { inset: 0; z-index: -1; background: linear-gradient(180deg, #e2b862, #c79a45);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.btn[data-eb="B1"]::after { display: none; }
.btn[data-eb="B1"] .pt { background: #e2b862; border: 1px solid #6e4f1f; }
.btn[data-eb="B3"] { color: var(--title); }
.btn[data-eb="B3"]::before { inset: 0; z-index: -2; background: var(--orn);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.btn[data-eb="B3"]::after { display: block; inset: 1px; z-index: -1; background: rgba(12,11,9,.9);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.btn[data-eb="B3"] .pt { background: var(--bg); border: 1px solid var(--orn-hi); }
.btn[data-eb="B4"], .btn[data-eb="B5"] { --cc: radial-gradient(circle at 0 0, #0000 8px, #000 8.5px) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 8px, #000 8.5px) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 8px, #000 8.5px) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 8px, #000 8.5px) 100% 100% / 51% 51% no-repeat; }
.btn[data-eb="B4"] .pt, .btn[data-eb="B5"] .pt { display: none; }
.btn[data-eb="B4"] .ed-rule, .btn[data-eb="B5"] .ed-rule { display: block; }
.btn[data-eb="B4"] { color: #24180c; }
.btn[data-eb="B4"]::before { inset: 0; z-index: -1; clip-path: none; background: radial-gradient(120% 160% at 50% 25%, #f3e8cf 0%, #e2cfa7 60%, #c7aa77 100%); -webkit-mask: var(--cc); mask: var(--cc); }
.btn[data-eb="B4"]::after { display: block; inset: 0; z-index: -1; clip-path: none; background: var(--ed-fibre) 0 0 / 300px; opacity: .3; mix-blend-mode: multiply; -webkit-mask: var(--cc); mask: var(--cc); }
.btn[data-eb="B5"] { color: var(--title); }
.btn[data-eb="B5"]::before { inset: 0; z-index: -1; clip-path: none; background: radial-gradient(130% 120% at 50% 0%, #241e17, #0e0c0a); -webkit-mask: var(--cc); mask: var(--cc); }
.btn[data-eb="B5"]::after { display: none; }

/* The edit panel */
#ed { position: fixed; z-index: 10000; right: 16px; bottom: 16px; width: 340px; font: 12.5px/1.3 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #cfc6b4; background: rgba(16,14,12,.96); border: 1px solid rgba(224,197,151,.35); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#ed .top { display: flex; gap: 6px; align-items: center; padding: 8px; }
#ed .top b { flex: 1; color: #f1e2bd; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
#ed button { white-space: nowrap; background: #1d1a16; border: 1px solid #4a3e2e; color: #f1e2bd; font: inherit; padding: 4px 8px; cursor: pointer; }
#ed button:hover { border-color: #e0c597; }
#ed button.on { background: #e0c597; color: #1a120b; border-color: #e0c597; font-weight: 600; }
#ed .body { border-top: 1px solid #2c261f; padding: 10px 8px 8px; max-height: 60vh; overflow: auto; }
#ed .body:empty { display: none; }
#ed .hint { color: #8f877a; }
#ed .what { color: #e0c597; margin-bottom: 8px; }
#ed .row { display: grid; grid-template-columns: 70px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
#ed .row > span { color: #a99f8c; }
#ed select { width: 100%; background: #1d1a16; border: 1px solid #3a3229; color: #f1e2bd; font: inherit; padding: 4px; }
#ed input[type=range] { width: 100%; accent-color: #e0c597; }
#ed .br { border: 1px solid #2c261f; background: #16130f; padding: 7px 7px 1px; margin-bottom: 7px; }
#ed .br .hd { display: flex; justify-content: space-between; margin-bottom: 6px; color: #e0c597; }
#ed .br .hd button { padding: 0 6px; }
#ed .note { color: #e0c597; margin-top: 6px; min-height: 14px; }