/* The notes rail (js/notes.js), styled like the notes rail on Wes's question-ideas site. */
.rail{--pine:#1D3018;--olive:#4C6234;--v-ok:#2E5B2A;--v-mid:#AD7420;--v-no:#A3271C;--mono:'NB International Pro Mono',ui-monospace,Consolas,monospace}
.rail [hidden]{display:none!important}
.nr-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;background:#FFFAF5;border:1px solid #E5D2B8}
.nr-eye{margin:0 0 4px;font:400 11px/1.2 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:#7D9366}
.nr-title{margin:0;font:400 20px/1.2 'SN Gangster',Georgia,serif;color:var(--olive);letter-spacing:-.2px}
.nr-steps{display:flex;flex-wrap:wrap;gap:5px}
.nr-step{position:relative;min-width:30px;height:30px;padding:0 8px;border:1px solid #E2D4C1;border-radius:15px;background:#fff;color:#4B5544;cursor:pointer;font:400 12px/1 var(--mono);transition:background .15s,border-color .15s,color .15s}
.nr-step:hover{border-color:#B9A58C;color:var(--olive)}
.nr-step.on{background:var(--pine);border-color:var(--pine);color:#F8EEE2;cursor:default}
.nr-step.has::after{content:"";position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#AD7420;border:2px solid #FFFAF5}
.nr-step:focus-visible{outline:2px solid #A18372;outline-offset:2px}
.nr-vbox{display:flex;flex-direction:column;gap:9px}
.vbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vb{--c:var(--v-ok);display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border-radius:11px;border:1px solid #E5D8C6;background:#fff;font:500 12.5px/1.15 'NB International Pro',Helvetica,Arial,sans-serif;color:#4B5544;cursor:pointer;transition:transform .15s,background-color .2s,border-color .2s,color .2s}
.vb.needs-work{--c:var(--v-mid)}
.vb.scratched{--c:var(--v-no)}
.vb .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;color:var(--c)}
.vb .ic svg{width:15px;height:15px;display:block}
.vb:hover{border-color:var(--c);transform:translateY(-1px)}
.vb:active{transform:translateY(1px)}
.vb:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.vb.on{background:var(--c);border-color:var(--c);color:#FFFAF5}
.vb.on .ic{background:rgba(255,250,245,.18);border-color:rgba(255,250,245,.6);color:#FFFAF5}
.vpick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-radius:11px;background:#F3EADF;font-size:13.5px;color:#4B5544}
.vpick span{margin-right:auto}
.vpick button{border:0;border-radius:30px;background:var(--pine);color:#F8EEE2;padding:8px 12px 7px;font:400 11px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.vpick button.alt{background:none;border:1px solid #D9C9B4;color:var(--olive)}
.vothers{display:flex;flex-wrap:wrap;gap:6px}
.vothers:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px 4px;border-radius:30px;font:400 12px/1 'NB International Pro',Helvetica,Arial,sans-serif;background:#F3EADF;color:#8B7E70}
.chip .ic,.chip svg{width:12px;height:12px;display:block}
.chip.approved{background:#E4ECDA;color:var(--v-ok)}
.chip.needs-work{background:#F5E6C9;color:#8A5A14}
.chip.scratched{background:#F3DCD6;color:#8A2A1E}
.nr-notes{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow:auto;padding-top:12px;border-top:1px solid #F0E6D8}
.nr-none{margin:0;font-size:13.5px;color:#8A8F87}
.note{border-left:2px solid #E5D2B8;padding-left:10px}
.note.new{animation:nrin .35s ease-out both}
@keyframes nrin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.note .nh{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center;font-size:13px}
.note .nh b{font-weight:500;min-width:0;overflow-wrap:anywhere}
.note .nh .nt{margin-left:auto;font:400 10px/1 var(--mono);color:#A99E92;white-space:nowrap}
.note .nh .priv svg{width:11px;height:11px;display:block;color:#9A7B3E}
.note p{margin:2px 0 0;font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.note.private{border-left-color:#C9A45C}
.note.claude{border-left-color:var(--olive);background:#F4F1E6;border-radius:0 6px 6px 0;padding:6px 8px 6px 10px}
.nimgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nimg{display:block;width:64px;height:64px;padding:0;border:0;border-radius:8px;overflow:hidden;background:#F3EADF;cursor:zoom-in}
.nimg img{display:block;width:100%;height:100%;object-fit:cover}
.nimg.err{cursor:default}
.nimg.err img{visibility:hidden}
.nimg:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.nr-compose{display:flex;flex-direction:column;gap:8px}
.f-body,.f-name{box-sizing:border-box;border:1px solid #E2D4C1;border-radius:9px;background:#fff;font:400 14px/1.4 'NB International Pro',Helvetica,Arial,sans-serif;color:#162412;outline:none;transition:border-color .2s}
.f-body:focus,.f-name:focus{border-color:#B9C6A8}
.f-body{width:100%;min-height:44px;max-height:200px;padding:11px 12px;resize:none;field-sizing:content}
.f-body:focus,.f-body.open{min-height:80px}
.f-row{display:flex;align-items:center;gap:8px;min-height:34px}
.f-name{flex:1;min-width:0;height:34px;padding:0 10px}
.f-as{border:0;background:none;padding:0;font:400 12.5px/1 'NB International Pro',Helvetica,Arial,sans-serif;color:#8B7E70;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.f-as:hover{color:var(--olive)}
.f-priv{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:#9A7B3E}
.f-priv svg{width:12px;height:12px;display:block}
.f-att{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #E2D4C1;background:#fff;color:#8B7E70;cursor:pointer;display:grid;place-items:center;padding:0}
.f-att svg{width:17px;height:17px;display:block}
.f-att:hover{color:var(--olive);border-color:#C9BBA6}
.f-att:focus-visible,.f-post:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.f-post{flex:none;border:0;border-radius:40px;background:var(--pine);color:#F8EEE2;padding:10px 18px 9px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .15s}
.f-post:not([disabled]):hover{transform:translateY(-1px)}
.f-post[disabled]{opacity:.35;cursor:default}
.f-err{margin:0;font-size:12px;color:#7A2E1D}
.f-err:empty{display:none}
.f-imgs{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.f-img{position:relative;width:52px;height:52px;border-radius:8px;background:#F3EADF center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(22,36,18,.08)}
.f-img .x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:2px solid #FFFAF5;background:#4B5544;color:#FFFAF5;display:grid;place-items:center;padding:0;cursor:pointer}
.f-img .x svg{width:10px;height:10px;display:block}
.nr-card.posting .f-img .x{visibility:hidden}
.nr-card.drop .f-body{border-color:var(--olive);border-style:dashed;background:#F8F3EA}
dialog.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#F8EEE2}
dialog.lb::backdrop{background:rgba(17,26,15,.94)}
.lb-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:60px 16px 40px;cursor:zoom-out}
.lb-img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;background:#F3EADF;cursor:default}
.lb-img:not([src]){visibility:hidden}
.lb-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(248,238,226,.14);color:#F8EEE2;display:grid;place-items:center;padding:0;cursor:pointer}
.lb-x svg{width:18px;height:18px;display:block}
@media (prefers-reduced-motion:reduce){.note.new{animation:none}.vb,.f-post{transition:none}}