/* MK Ops Desk — the team's own tool.
   Colours and type follow mkbayarea.com: white ground, near-black text,
   one brick red for anything that acts. Nothing decorative. */

:root{
  --ink:#1F2328;        /* headings, the darkest text on the site */
  --ink-2:#2F3742;      /* body copy */
  --ink-3:#6B7480;      /* labels and asides — still passes contrast on white */
  --paper:#F6F7F9;      /* the page behind the cards */
  --surface:#FFFFFF; --surface-2:#F1F3F6;
  --rule:#DDE1E7; --rule-2:#C2C8D1;
  --accent:#A13A3A;     /* the brand red */
  --accent-ink:#8B1A1A; /* pressed / hover */
  --accent-soft:#FBEFEF;
  --red:#8B1A1A; --red-soft:#FBEAEA;
  --amber:#8A6100; --amber-soft:#FBF1DC;
  --green:#1F6B4A; --green-soft:#E4F1EA;
  --navy:#22405F; --navy-soft:#E8EEF5;
  --shadow:0 1px 2px rgba(31,35,40,.05),0 8px 24px -18px rgba(31,35,40,.30);
}
/* The desk is a white tool, on purpose: the team reads scanned documents and
   photographs in it all day, and those are judged against white. */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--surface); color:var(--ink-2);
  font:400 15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:inherit; margin:0; color:var(--ink); text-wrap:balance;
  letter-spacing:-.015em; font-weight:600}
h1{font-size:26px}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ── sign in ── */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px}
.gate-card{
  width:min(360px,100%); background:var(--surface); border:1px solid var(--rule);
  border-radius:14px; box-shadow:var(--shadow); padding:28px 26px;
  display:flex; flex-direction:column; gap:12px;
}
.gate-brand{font:700 20px/1.2 inherit; letter-spacing:-.02em}
.gate-sub{margin:0 0 4px; color:var(--ink-3); font-size:14px}
.gate-card input{
  font:400 16px inherit; padding:11px 13px; border-radius:9px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink);
}

/* ── shell ── */
.shell{display:grid; grid-template-columns:210px minmax(0,1fr); min-height:100dvh}
.rail{
  background:var(--surface); border-right:1px solid var(--rule);
  padding:22px 14px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; align-self:start; height:100dvh;
}
.brand strong{display:block; font:700 15px/1.2 inherit; letter-spacing:-.01em}
.brand span{font-size:12px; color:var(--ink-3)}
nav{display:flex; flex-direction:column; gap:1px}
nav a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 10px; border-radius:7px; text-decoration:none;
  font-size:14px; color:var(--ink-2);
}
nav a:hover{background:var(--surface-2)}
nav a[aria-current]{background:var(--accent-soft); color:var(--accent); font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent)}
nav .count{font:500 11px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; color:var(--ink-3)}
nav a[aria-current] .count{color:var(--accent)}
.rail-foot{
  margin-top:auto; display:flex; flex-direction:column; gap:5px;
  font-size:12px; color:var(--ink-3); padding-top:14px; border-top:1px solid var(--rule);
}
.linkish{
  background:none; border:0; padding:0; color:var(--ink-3); cursor:pointer;
  font:400 12px inherit; text-align:left; text-decoration:underline;
}
.linkish:hover{color:var(--accent)}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .rail{
    position:static; height:auto; flex-direction:row; align-items:center; gap:14px;
    border-right:0; border-bottom:1px solid var(--rule); overflow-x:auto; padding:12px 14px;
  }
  .brand span{display:none}
  nav{flex-direction:row; gap:2px}
  nav a{white-space:nowrap}
  .rail-foot{margin:0 0 0 auto; border:0; padding:0; flex-direction:row; gap:10px; align-items:center}
}

main{padding:26px 30px 72px; max-width:960px}
@media (max-width:640px){ main{padding:20px 16px 56px} }

.vhead{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-start;
  justify-content:space-between; margin-bottom:22px;
}
h1{font-size:25px; font-weight:700; letter-spacing:-.02em}
.sub{color:var(--ink-3); font-size:14px; margin:5px 0 0}
.back{
  display:inline-block; font:500 12.5px inherit;
  color:var(--ink-3); text-decoration:none; margin-bottom:7px;
}
.back:hover{color:var(--accent)}
.muted{color:var(--ink-3); font-size:13px}
.err{
  margin:0; font-size:13.5px; color:var(--red); background:var(--red-soft);
  border:1px solid color-mix(in srgb,var(--red) 28%,transparent);
  border-radius:8px; padding:9px 11px;
}

/* ── cards ── */
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  box-shadow:var(--shadow);
}
.card.pad{padding:18px}
.stack{display:flex; flex-direction:column; gap:10px}

/* queue rows */
.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:center;
  background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--rule-2);
  border-radius:10px; padding:13px 15px; box-shadow:var(--shadow);
  text-decoration:none; color:inherit;
}
.row:hover{border-color:var(--rule-2); border-left-color:var(--accent)}
.row.s-review{border-left-color:var(--green)}
.row.s-failed,.row.s-returned{border-left-color:var(--red)}
.row.s-approved{border-left-color:var(--navy)}
.row.s-running{border-left-color:var(--amber)}
.row .r-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.row b{font-size:14.5px; font-weight:600}
.row .r-meta{
  grid-column:1/-1; font:400 12px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:4px 12px;
}

.pill{
  font:600 10.5px/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 8px; border-radius:20px; white-space:nowrap; border:1px solid transparent;
}
.pill.queued  {background:var(--surface-2); color:var(--ink-3); border-color:var(--rule)}
.pill.running {background:var(--amber-soft); color:var(--amber)}
.pill.review  {background:var(--green-soft); color:var(--green)}
.pill.approved{background:var(--navy-soft);  color:var(--navy)}
.pill.failed  {background:var(--red-soft);   color:var(--red)}

.empty{
  border:1px dashed var(--rule-2); border-radius:12px; padding:34px 20px;
  text-align:center; color:var(--ink-3); font-size:14px;
}

/* ── form ── */
.form{padding:20px; display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:7px; border:0; padding:0; margin:0; min-width:0}
.lbl{font:600 12.5px inherit; color:var(--ink-2)}
.lbl .opt{font-weight:400; font-style:normal; color:var(--ink-3)}
.form input[type=text], .form input:not([type]), #f-property, .form textarea{
  font:400 15px inherit; padding:10px 12px; border-radius:9px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); width:100%;
}
.form textarea{resize:vertical}
.choices{display:flex; flex-direction:column; gap:7px}
.choices label{
  display:grid; grid-template-columns:auto 1fr; gap:3px 10px; align-items:baseline;
  border:1px solid var(--rule); border-radius:9px; padding:11px 13px; cursor:pointer;
}
.choices label:hover{border-color:var(--rule-2)}
.choices input{margin:0; grid-row:1/3; align-self:center; accent-color:var(--accent)}
.choices b{font-size:14px; font-weight:600}
.choices em{font-style:normal; font-size:12.5px; color:var(--ink-3)}
.choices label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

.drop{
  border:1.5px dashed var(--rule-2); border-radius:11px; padding:22px 16px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; text-align:center; background:var(--surface-2);
}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop-main{font-size:14px; color:var(--ink-2)}
.drop-main u{color:var(--accent)}
.drop-sub{font-size:12.5px; color:var(--ink-3)}
.filelist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.filelist li{
  display:flex; align-items:center; gap:10px; font-size:13.5px;
  padding:7px 10px; border-radius:7px;
}
.filelist li:nth-child(odd){background:var(--surface-2)}
.filelist .sz{margin-left:auto; font:400 11.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; color:var(--ink-3)}
.filelist button{
  background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:15px;
  line-height:1; padding:2px 4px; border-radius:4px;
}
.filelist button:hover{color:var(--red)}

.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  font:600 13px inherit; padding:9px 16px; border-radius:6px; letter-spacing:.01em;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-2);
  cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
.btn[disabled]{opacity:.5; cursor:default}
.btn.wide{width:100%; text-align:center}

/* ── report ── */
.report{
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  box-shadow:var(--shadow); padding:26px 34px; max-width:none;
}
/* Prose keeps a readable measure; tables get the full card width. */
.report p, .report li{max-width:72ch}
@media (max-width:640px){ .report{padding:20px 18px} }
.report h2{
  font-size:16.5px; font-weight:700; margin:26px 0 10px; padding-bottom:7px;
  border-bottom:1px solid var(--rule);
}
.report h2:first-child{margin-top:0}
.report h3{font-size:14.5px; font-weight:600; margin:18px 0 7px}
.report p{margin:0 0 12px}
.report ul,.report ol{margin:0 0 12px; padding-left:22px}
.report li{margin-bottom:5px}
.report strong{font-weight:600}
.report code{
  font:400 12.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; background:var(--surface-2);
  border:1px solid var(--rule); border-radius:4px; padding:1px 5px;
}
.report table{width:100%; border-collapse:collapse; font-size:13.5px; margin:0 0 14px}
.report th{
  text-align:left; font:600 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding:0 10px 7px 0; white-space:nowrap;
}
.report td{padding:8px 10px 8px 0; border-top:1px solid var(--rule); vertical-align:top}
.report hr{border:0; border-top:1px solid var(--rule); margin:22px 0}
.report em{color:var(--ink-3)}
.tblwrap{overflow-x:auto}

.notice{
  display:flex; gap:10px; font-size:13px; line-height:1.5; color:var(--ink-2);
  background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  border-radius:9px; padding:11px 13px; margin-bottom:16px;
}
.notice b{color:var(--amber)}
.soon b{display:block; margin-bottom:5px}
.soon p{margin:0; color:var(--ink-3); font-size:13.5px}
.linkcard{display:flex; flex-direction:column; gap:6px}
.linkcard p{margin:0; color:var(--ink-3); font-size:13.5px}

/* ── posters ── */
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.chip-btn{
  font:600 12px inherit; padding:6px 11px; border-radius:20px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.chip-btn:hover{border-color:var(--accent); color:var(--accent)}
.chip-btn.on{background:var(--accent); border-color:var(--accent); color:#fff}

.tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.tcard{
  border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow); cursor:pointer; padding:0; text-align:left; font:inherit; color:inherit;
  display:flex; flex-direction:column;
}
.tcard:hover{border-color:var(--accent)}
.tcard img{width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--surface-2)}
.tcard .tmeta{padding:9px 11px; display:flex; flex-direction:column; gap:3px}
.tcard b{font-size:12.5px; font-weight:600; line-height:1.35}
.tcard span{font:500 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em}

.chosen{display:flex; gap:14px; align-items:center; padding-bottom:16px;
  border-bottom:1px solid var(--rule)}
.chosen img{border-radius:8px; border:1px solid var(--rule); display:block}
.chosen b{display:block; font-size:14.5px; font-weight:600; margin-bottom:3px}

.pfields{display:flex; flex-direction:column; gap:9px}
.pfield{display:grid; grid-template-columns:96px minmax(0,1fr); gap:11px; align-items:start}
@media (max-width:560px){ .pfield{grid-template-columns:1fr; gap:4px} }
.pfield .role{
  font:600 10.5px/2.6 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.pfield textarea{
  font:400 14px inherit; padding:8px 11px; border-radius:8px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink);
  width:100%; resize:vertical; min-height:38px;
}
.pfield.changed textarea{border-color:var(--accent); background:var(--accent-soft)}
.mono-url{font:400 12px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; align-self:center}
.linkcard b{font-size:14.5px; font-weight:600}
.counts{display:flex; gap:6px; margin-top:9px}
.counts .chip-btn{padding:5px 10px; font-size:11.5px}
.agentbox{display:flex; flex-direction:column; gap:8px}
.agentbox select{
  font:400 14px inherit; padding:9px 11px; border-radius:8px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); width:100%;
}
.agentbox .external{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:7px;
  padding:11px; border:1px solid var(--rule); border-radius:8px; background:var(--surface-2);
}
.agentbox .external input{
  font:400 13.5px inherit; padding:8px 10px; border-radius:7px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); width:100%;
}
.pphoto{display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--rule); border-radius:9px; background:var(--surface-2)}
.pphoto img{width:64px; height:64px; object-fit:cover; border-radius:7px;
  border:1px solid var(--rule); display:block}
.pphoto .pname{font-size:13px; color:var(--ink-2)}
.pphoto .linkish{margin-left:auto}
.langpick{display:flex; gap:8px}
.langpick label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--rule); border-radius:9px; padding:9px 15px;
}
.langpick label:hover{border-color:var(--rule-2)}
.langpick input{margin:0; accent-color:var(--accent)}
.langpick b{font-size:14px; font-weight:600}
.langpick label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.pgroup{display:flex; flex-direction:column; gap:8px}
.paddr{
  display:flex; align-items:baseline; gap:10px; font-size:14px; font-weight:600;
  color:var(--ink-2); margin:6px 0 2px; padding-bottom:7px;
  border-bottom:1px solid var(--rule);
}
.paddr span{margin-left:auto; font:400 11.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; color:var(--ink-3)}
#queue-list{gap:22px}
.kindtabs{display:flex; gap:7px; margin-bottom:18px; flex-wrap:wrap}
.kindtabs .chip-btn{padding:8px 14px; font-size:13px}
.boiler{opacity:.55}
.boiler textarea{background:var(--surface-2)}
.pfield .role.fixed{color:var(--rule-2)}
.pagemark{
  grid-column:1/-1; font:600 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:14px 0 2px;
  padding-bottom:6px; border-bottom:1px solid var(--rule);
}
.shapetag{font-style:normal; font-size:9.5px; color:var(--rule-2); letter-spacing:.05em}

/* ── owner handbook form ── */
.hbform{padding:0}
.hbsec{padding:20px 22px; border-bottom:1px solid var(--rule)}
.hbsec:last-of-type{border-bottom:0}
.hbsec h2{
  font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 14px;
  display:flex; align-items:baseline; gap:9px;
}
.hbsec h2 .zh{font:400 12px inherit; color:var(--ink-3)}

.hbcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.hbf{display:flex; flex-direction:column; gap:5px; min-width:0}
.hbf.wide{grid-column:1/-1}
.hbf span{font:600 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3)}
.hbf input{
  font:400 13.5px inherit; padding:8px 10px; border-radius:7px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); width:100%;
}
.hbf input.empty{border-style:dashed; border-color:var(--rule)}
.hbf input:focus{border-style:solid}

.hbgroup{margin-top:13px}
.hblabel{display:block; font:600 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.hbrows{display:flex; flex-direction:column; gap:6px}
.hbrow{display:flex; gap:6px; align-items:flex-start}
.hbrow textarea{
  font:400 13.5px/1.5 inherit; padding:8px 10px; border-radius:7px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink);
  width:100%; resize:vertical; min-height:36px;
}
.x{
  background:none; border:1px solid transparent; color:var(--ink-3); cursor:pointer;
  font-size:15px; line-height:1; padding:6px 8px; border-radius:6px; flex:none;
}
.x:hover{color:var(--red); border-color:var(--rule)}
.x.corner{position:absolute; top:8px; right:8px; padding:3px 7px}
.addrow{
  margin-top:8px; background:none; border:1px dashed var(--rule-2); color:var(--ink-3);
  cursor:pointer; font:500 12px inherit; padding:7px 12px; border-radius:7px;
}
.addrow:hover{border-color:var(--accent); color:var(--accent); border-style:solid}

.hbrepeat{display:flex; flex-direction:column; gap:11px}
.hbcard{position:relative; border:1px solid var(--rule); border-radius:9px;
  padding:14px 40px 14px 14px; background:var(--surface-2)}

.hbmissing{margin-bottom:20px; border-left:3px solid var(--amber)}
.hbmissing b{display:block; font-size:14px; margin-bottom:9px}
.hbmissing ol{margin:0 0 10px; padding-left:20px; font-size:13.5px; color:var(--ink-2)}
.hbmissing li{margin-bottom:6px}
.hbmissing p{margin:0; font-size:12.5px}
.hbactions{padding:18px 22px; border-top:1px solid var(--rule); background:var(--surface-2)}
.pdfgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.pdfgrid > div{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.pdflabel{font:600 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); width:100%}
#hb-tell{
  font:400 13.5px/1.6 inherit; padding:10px 12px; border-radius:8px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink);
  width:100%; resize:vertical;
}
.gate{margin:0 0 16px; border-left:3px solid var(--amber)}
.gate.returned{border-left-color:var(--red)}
.gate.approved{border-left-color:var(--green)}
.gate b{display:block; font-size:14px}
#gate-reason{font:400 13.5px/1.5 inherit; padding:9px 11px; border-radius:8px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); width:100%; resize:vertical}
.pill.returned{background:var(--red-soft); color:var(--red)}
.row.s-returned{border-left-color:var(--red)}

/* ── flyer photo slots ── */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.slot{
  position:relative; border:1.5px dashed var(--rule-2); border-radius:9px; overflow:hidden;
  aspect-ratio:4/3; background:var(--surface-2); cursor:pointer; text-align:left; padding:0;
  font:inherit; color:inherit;
}
.slot:hover,.slot.active{border-color:var(--accent); border-style:solid}
.slot.filled{border-style:solid; border-color:var(--rule)}
.slot img{width:100%; height:100%; object-fit:cover; display:block}
.slot .slab{
  position:absolute; left:0; right:0; bottom:0; padding:6px 9px;
  font:600 11px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff;
}
.slot:not(.filled) .slab{background:none; color:var(--ink-3); position:static; padding:0;
  display:flex; align-items:center; justify-content:center; height:100%}
.slot .clear{position:absolute; top:6px; right:6px; background:rgba(0,0,0,.55); color:#fff;
  border:0; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:14px; line-height:1}
.tray{margin-top:12px; border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  box-shadow:var(--shadow); padding:12px}
.tray-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.tray-head b{font-size:13.5px}
.tray-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px;
  max-height:340px; overflow:auto}
.tray-grid button{border:1.5px solid var(--rule); border-radius:7px; padding:0; overflow:hidden;
  background:var(--surface-2); cursor:pointer; aspect-ratio:4/3}
.tray-grid button:hover{border-color:var(--accent)}
.tray-grid button.used{opacity:.4}
.tray-grid img{width:100%; height:100%; object-fit:cover; display:block}

/* POI photo button, sitting beside its text block */
.pfield.haspic{position:relative}
.poipic{
  position:absolute; right:10px; bottom:10px;
  font:600 10.5px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:6px; cursor:pointer;
  border:1.5px dashed var(--rule-2); background:var(--surface); color:var(--ink-3);
}
.poipic:hover,.poipic.active{border-style:solid; border-color:var(--accent); color:var(--ink)}
.poipic.filled{border-style:solid; border-color:var(--rule); color:var(--ink); background:var(--surface-2)}
.slot.optional{border-style:dotted}

/* the link is the deliverable, so it gets the top of the page */
.opencard{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.btn.big{font-size:15px; padding:12px 22px}
.opencard .muted{width:100%}
.revise textarea{width:100%}
details.card summary{cursor:pointer; font-weight:600; font-size:13.5px}
details.card[open] summary{margin-bottom:10px}

/* paste-a-listing row */
.linkrow{display:flex; gap:8px}
.linkrow input{flex:1}
.slot.fromlink{border-color:var(--accent)}
.tray-grid button.listing{outline:2px solid var(--accent); outline-offset:-2px}


/* the two links the team opens least sit below a gap */
.navgap{display:block; height:1px; background:var(--rule); margin:10px 12px}

/* an eyebrow above a heading, the way the company site does it */
.eyebrow{display:flex; align-items:center; gap:8px; color:var(--accent);
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent)}

/* choosing the moment a poster announces */
.scenes{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.scene{
  border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  padding:16px 16px 14px; text-align:left; cursor:pointer; font:inherit; color:inherit;
  box-shadow:var(--shadow);
}
.scene:hover{border-color:var(--accent)}
.scene b{display:block; font-size:15px; color:var(--ink); margin-bottom:3px;
  letter-spacing:.01em}
.scene b:only-child{margin-bottom:0}
.scene span{display:block; color:var(--ink-3); font-size:12.5px; line-height:1.45}
.pricepair{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:640px){ .pricepair{grid-template-columns:1fr} }

/* said out loud when the office Mac is not answering */
.healthbar{
  margin:0 0 16px; padding:11px 14px; border-radius:8px; font-size:13.5px;
  background:var(--amber-soft); color:var(--amber); border:1px solid currentColor;
}