/* Fire Us Marketing — Mocks design system */
:root{
  --brand:#e8452c;--brand-600:#c9361f;--brand-50:#fff1ee;--accent:#ff7a1a;
  --ink:#16161b;--ink-2:#3d3d47;--mut:#5f6170;--line:#e4e4ea;--line-2:#d3d3dc;--bg:#f5f5f8;--card:#fff;
  --ok:#137a3a;--ok-50:#e3f6ea;--info:#1d4ed8;--info-50:#e3ecff;--warn:#9a5b00;--warn-50:#fff4e0;--danger:#b42318;--danger-50:#fdeceb;
  --r:10px;--r-lg:14px;--tap:44px;--shadow:0 1px 2px rgba(16,16,24,.06),0 1px 3px rgba(16,16,24,.08);--shadow-lg:0 8px 28px rgba(16,16,24,.12);
  --f-xs:12px;--f-sm:13px;--f-md:15px;--f-lg:18px;--f-xl:24px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --focus:0 0 0 3px rgba(232,69,44,.35);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6170' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:var(--f-md)/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:var(--brand-600)}a:hover{color:var(--brand)}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f0f0f4;border-radius:6px;padding:1px 6px}
.ico{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Top bar */
.top{height:56px;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);background:#121217;color:#fff;position:sticky;top:0;z-index:20}
.brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px}
.brand:hover{color:#fff}.flame{color:var(--accent)}.prod{background:var(--brand);border-radius:6px;padding:1px 8px;font-weight:700;font-size:13px}
#topnav{margin-left:auto;display:flex;gap:2px;align-items:center}
#topnav a,#topnav button{color:#d6d6de;background:none;border:0;min-height:40px;padding:0 12px;border-radius:8px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px}
#topnav a:hover,#topnav button:hover{background:#25252d;color:#fff}#topnav a.on{color:#fff;background:#2a2a33}
.gname{color:#b9b9c4;padding:0 6px;font-size:13px}
/* Layout */
.pad{padding:var(--s4)}.wrap{max-width:1120px;margin:0 auto;padding:var(--s5) var(--s4) 64px}
.narrow{max-width:640px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.page-head h1{margin:2px 0 0}.page-head .actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:var(--f-sm);color:var(--mut)}
.crumbs a{color:var(--mut);text-decoration:none;border-radius:6px;padding:2px 4px;margin:-2px -4px}.crumbs a:hover{color:var(--ink);background:#ebebf0}
.crumbs .ico{width:14px;height:14px;color:#a3a3b0}
h1{font-size:var(--f-xl);line-height:1.25;margin:0 0 var(--s3);letter-spacing:-.01em}
h2{font-size:var(--f-lg);line-height:1.3;margin:0 0 4px}h3{font-size:var(--f-md);margin:0 0 4px}
.muted{color:var(--mut)}.meta{font-size:var(--f-xs);color:var(--mut)}.desc{color:var(--mut);margin:0 0 var(--s4);font-size:14px;max-width:70ch}
/* Cards / sections */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--shadow)}
.card.tight{padding:var(--s4)}
.section-title{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.section-title .ico{color:var(--brand)}
.sub{font-size:var(--f-sm);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:var(--s5) 0 var(--s2)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s4) 0}
/* Buttons */
.btn{min-height:var(--tap);min-width:var(--tap);padding:0 16px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:500;white-space:nowrap;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:#f6f6f9;border-color:#c4c4cf;color:var(--ink)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}.btn.pri:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:#ececf1}
.btn.danger{color:var(--danger)}.btn.danger:hover{background:var(--danger-50);border-color:#f3b9b4}
.btn.on{background:#16161b;color:#fff;border-color:#16161b}
.btn.sm{min-height:36px;min-width:36px;padding:0 10px;font-size:14px;border-radius:8px}
.btn.icon{padding:0;width:40px}.btn.sm.icon{width:36px}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* Forms */
label.field{display:block;margin-bottom:var(--s3)}label.field>span{display:block;font-size:var(--f-sm);font-weight:600;margin-bottom:6px;color:var(--ink-2)}
label.field small{display:block;color:var(--mut);font-size:var(--f-xs);margin-top:4px}
input[type=text],input[type=search],input[type=email],input[type=url],input[type=file],select,textarea{min-height:var(--tap);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 12px;background:#fff;width:100%;transition:border-color .12s,box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:#bdbdc9}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
input[readonly]{background:#fafafc;font-family:ui-monospace,Menlo,monospace;font-size:13px}
select{appearance:none;-webkit-appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;cursor:pointer}
select.btn{font-weight:500;padding-right:34px;background-color:#fff}
textarea{min-height:88px;resize:vertical}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand);margin:0;flex:0 0 auto}
.check{display:flex;gap:10px;align-items:center;min-height:var(--tap);cursor:pointer}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}.row>*{flex:0 0 auto}.grow{flex:1 1 200px!important}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}.form-grid .full{grid-column:1/-1}
/* Tables */
.tbl{overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;background:#fafafc}
td,th{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tr:last-child td{border-bottom:0}
/* Pills / badges */
.badge,.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;padding:5px 9px;border-radius:99px;background:#eeeef3;color:#3d3d47;white-space:nowrap}
.badge.open{background:var(--danger-50);color:var(--danger)}.badge.addressed{background:var(--info-50);color:var(--info)}.badge.resolved{background:#ececf1;color:#4a4a55}
.badge.ok{background:var(--ok-50);color:var(--ok)}.badge.warn{background:var(--warn-50);color:var(--warn)}
.badge .ico{width:13px;height:13px}
.metarow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:var(--f-sm);color:var(--mut);margin-top:6px}
.metarow span{display:inline-flex;align-items:center;gap:5px}.metarow .ico{width:15px;height:15px}
/* Clickable cards */
.cards{display:grid;gap:var(--s3)}
a.pcard{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
a.pcard:hover{border-color:#f3b2a6;box-shadow:var(--shadow-lg);color:var(--ink)}
a.pcard:focus-visible{box-shadow:var(--focus);border-color:var(--brand)}
a.pcard .pc-main{flex:1;min-width:0}a.pcard .pc-title{font-weight:650;font-size:16px;overflow:hidden;text-overflow:ellipsis}
a.pcard .chev{color:#a3a3b0;transition:transform .15s,color .15s}a.pcard:hover .chev{color:var(--brand);transform:translateX(3px)}
.pc-avatar{width:40px;height:40px;border-radius:10px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.list a.item{display:flex}
/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--s4);overflow-x:auto}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:0 14px;min-height:var(--tap);color:var(--mut);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}.tabs a.on{color:var(--ink);border-bottom-color:var(--brand)}
/* Empty states */
.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--mut)}
.empty .ico{width:36px;height:36px;color:#b8b8c4;margin-bottom:8px}.empty h3{color:var(--ink);margin-bottom:6px}.empty p{margin:0 auto var(--s3);max-width:44ch}
/* Callouts */
.ro,.callout{background:var(--warn-50);border:1px solid #f1d49a;border-radius:var(--r);padding:10px 12px;margin:8px 0;font-size:14px;color:#5c3b00}
.callout.info{background:#f2f6ff;border-color:#c9d8ff;color:#1e3a8a}.callout.ok{background:var(--ok-50);border-color:#a6e1bc;color:#0d5229}
.ro a,.callout a{font-weight:600}
.secret{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:var(--s3)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#16161b;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:90vw;box-shadow:var(--shadow-lg)}
#toast.show{opacity:1}
/* Auth */
.auth{max-width:440px;margin:8vh auto 0;padding:0 var(--s4)}
.auth .card{padding:var(--s6)}.auth .logo{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:var(--s4)}
.auth .or{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:var(--f-xs);margin:var(--s4) 0}.auth .or::before,.auth .or::after{content:"";flex:1;border-top:1px solid var(--line)}
#gbtn{min-height:44px;display:flex;justify-content:center}
/* Viewer */
.viewer{display:grid;grid-template-columns:1fr 380px;height:calc(100vh - 56px);height:calc(100dvh - 56px)}
.vmain{display:flex;flex-direction:column;min-width:0}
.vhead{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line);min-width:0}
.vhead .title{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vhead .crumbs{min-width:0;flex-wrap:nowrap;overflow:hidden}.vhead .grow{flex:1 1 auto!important;min-width:0}
#ver{width:auto;min-height:36px;font-size:14px}
.toolbar{display:flex;gap:10px;align-items:center;padding:6px 12px;background:#fbfbfd;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tgroup{display:flex;align-items:center;gap:4px}.tgroup+.tgroup{padding-left:10px;border-left:1px solid var(--line)}
.tlabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-right:2px}
.seg{display:inline-flex;background:#ececf1;border-radius:9px;padding:2px;gap:2px}
.seg button{border:0;background:transparent;min-height:32px;min-width:36px;padding:0 10px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:13px;font-weight:500;white-space:nowrap}
.seg button:hover{background:#fff8}.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.toolbar .btn.sm{min-height:36px}
.zoomlbl{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-2)}
.stage{position:relative;flex:1;overflow:hidden;background:#dedee4;background-image:radial-gradient(#c8c8d0 1px,transparent 1px);background-size:18px 18px;touch-action:none}
.canvas{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 10px 40px rgba(0,0,0,.22);background:#fff}
.canvas iframe{display:block;border:0;background:#fff}
.shield{position:absolute;inset:0;z-index:2;cursor:grab}.shield.comment{cursor:crosshair}.shield.off{display:none}
.side{border-left:1px solid var(--line);background:#fff;display:flex;flex-direction:column;min-height:0}
.side .head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;justify-content:space-between}
.side .head b{font-size:15px}.side .head select{width:auto;min-height:36px;font-size:14px}
.side .body{overflow:auto;flex:1;padding:12px 14px;-webkit-overflow-scrolling:touch}
.note{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;cursor:pointer;background:#fff;transition:border-color .12s,box-shadow .12s}
.note:hover{border-color:var(--line-2)}.note.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.note .nhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.note .pin{display:inline-flex;width:24px;height:24px;border-radius:12px 12px 12px 3px;background:var(--brand);color:#fff;font-weight:700;font-size:12px;align-items:center;justify-content:center}
.note .nbody{margin-top:6px;white-space:pre-wrap;word-wrap:break-word}
.note .actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.reply{margin:10px 0 0 6px;padding-left:12px;border-left:2px solid var(--line)}
.mention{color:var(--info);font-weight:600}
.sheet-grip{display:none}
.suggest{border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:4px;box-shadow:var(--shadow)}
.suggest button{display:block;width:100%;text-align:left;min-height:var(--tap);border:0;background:none;padding:0 12px;cursor:pointer}.suggest button:hover{background:#f6f6f9}
.compose{border-top:1px solid var(--line);padding:12px 14px;background:#fffaf8}
.compose .row{margin-top:8px}
/* Map */
.map{position:relative;height:66vh;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;touch-action:none;background-image:radial-gradient(#e4e4ea 1px,transparent 1px);background-size:20px 20px}
.map>svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;width:160px;min-height:58px;padding:10px 12px;border-radius:12px;background:#fff;border:1.5px solid var(--line-2);box-shadow:var(--shadow);font-size:13px;cursor:pointer;user-select:none;touch-action:none}
.node:hover{border-color:var(--brand)}.node b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .dev{font-size:11px;color:var(--mut);display:flex;gap:4px;align-items:center;margin-top:2px}.node .dev .ico{width:13px;height:13px}
.node.approved{border-color:var(--ok)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--f-sm);color:var(--mut);margin-bottom:var(--s3)}.legend span{display:inline-flex;gap:6px;align-items:center}
.diffadd{background:#d7f5e1}.diffdel{background:#fde2e0;text-decoration:line-through}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:calc(100dvh - 170px)}
.compare iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
@media (max-width:760px){
  .wrap{padding:var(--s4) 12px 56px}h1{font-size:21px}.card{padding:var(--s4)}
  .brand .txt{display:none}.top{gap:6px;padding:0 8px}
  #topnav .navlinks a{padding:0 10px}#topnav .navlinks .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hide-sm,.gname{display:none!important}
  .form-grid{grid-template-columns:1fr}
  input,select,textarea{font-size:16px}
  a.pcard{padding:var(--s3) var(--s4);gap:var(--s3)}.pc-avatar{display:none}
  .page-head .actions{width:100%}.page-head .actions .btn{flex:1}
  .viewer{grid-template-columns:1fr;position:relative}
  .vhead{padding:6px 8px;gap:6px}.vhead .crumbs{display:none}
  #ver{max-width:44vw}
  .toolbar{flex-wrap:wrap;gap:6px;padding:6px 8px;overflow:visible}.tgroup+.tgroup{padding-left:0;border-left:0}.tlabel{display:none}
  .toolbar [data-dev=tablet],.toolbar .opt{display:none}
  .seg button{min-height:36px;min-width:40px}
  .side{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:78dvh;border:0;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);transform:translateY(calc(100% - 64px));transition:transform .25s}
  .side.open{transform:none}.side.half{transform:translateY(45%)}.side.dragging{transition:none}
  .side{height:72dvh;max-height:72dvh}
  .sheet-grip{flex-direction:column;gap:4px;padding:8px 0 6px;touch-action:none;-webkit-user-select:none;user-select:none}
  .side .head{touch-action:none}
  .sheet-lab{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink,#222)}
  .sheet-lab i{font-style:normal;background:#e33;color:#fff;border-radius:10px;min-width:20px;height:20px;padding:0 6px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
  .sheet-lab i[hidden]{display:none}
  .sheet-grip{display:flex;justify-content:center;align-items:center;min-height:var(--tap);cursor:pointer}
  .sheet-bar{width:44px;height:5px;border-radius:3px;background:#ccc}
  .vmain{padding-bottom:60px}
  .compare{grid-template-columns:1fr;height:auto}.compare iframe{height:60dvh}
  td,th{padding:8px}
  .auth{margin-top:4vh}.auth .card{padding:var(--s5)}
}

.card.flash{box-shadow:0 0 0 3px var(--focus);transition:box-shadow .6s}
#glcard{scroll-margin-top:72px}

.search{display:flex;gap:8px;margin:0 0 14px}.search input{width:100%}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}

#topnav{flex:1;justify-content:space-between;margin-left:var(--s4)}
.navlinks{display:flex;gap:2px;align-items:center;min-width:0}
.umenu{position:relative;margin-left:auto}
#topnav button.avatar{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:15px;justify-content:center;box-shadow:0 0 0 2px transparent}
#topnav button.avatar:hover,#topnav button.avatar[aria-expanded=true],#topnav button.avatar.on{background:var(--brand);box-shadow:0 0 0 2px #fff}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:#fff;color:var(--ink,#16161d);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;z-index:40}
.menu .mhead{padding:10px 12px 10px;border-bottom:1px solid var(--line-2);margin-bottom:4px;display:flex;flex-direction:column;gap:2px;min-width:0}
.menu .mhead b{font-size:14px}.menu .mhead span{font-size:13px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#topnav .menu a,#topnav .menu button{color:#16161d;width:100%;border-radius:8px;padding:0 12px;min-height:40px;font-size:14px;text-align:left}
#topnav .menu a:hover,#topnav .menu button:hover,#topnav .menu a:focus,#topnav .menu button:focus{background:#f3f3f6;color:#16161d}
#topnav .menu a.on{background:#fdece8;color:#b8321c}

/* avatar badge + menu count */
#topnav button.avatar{position:relative}
.avdot{position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:#facc15;border:2px solid #121217}
.mcount{margin-left:auto;background:var(--brand);color:#fff;border-radius:999px;font-size:12px;font-weight:700;min-width:22px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
span.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;vertical-align:middle}
span.avatar.sm{width:26px;height:26px;font-size:12px}span.avatar.lg{width:52px;height:52px;font-size:22px;margin-right:12px}
/* switch (read-only) */
.switchrow{display:flex;gap:14px;align-items:flex-start}
.switch{flex:none;width:44px;height:26px;border-radius:999px;background:#d4d4dc;position:relative;opacity:.8;cursor:not-allowed}
.switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch[aria-checked=true]{background:var(--brand)}.switch[aria-checked=true] span{left:21px}
/* outbox */
.obx-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.obx-filters .seg button{min-height:36px}.cnt{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.07);font-size:12px;margin-left:2px}
.obx-off{display:flex;gap:8px;align-items:center}
.obx-group{margin-bottom:18px}.obx-client{display:flex;align-items:center;gap:8px;font-size:15px;margin:6px 0 8px}
.obx-item{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:14px;margin-bottom:10px}
.obx-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:#555}.obx-meta>span,.obx-meta>a{display:inline-flex;gap:5px;align-items:center}
.obx-body{white-space:pre-wrap;word-break:break-word;background:#f7f7f9;border-radius:8px;padding:10px 12px;margin:10px 0;font-size:13px;max-height:260px;overflow:auto}
.obx-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn.is-off{opacity:.55;cursor:not-allowed}
.obx-msg .callout{margin-top:8px;display:flex;gap:8px;align-items:center}
@media (max-width:760px){.obx-filters .seg{width:100%;overflow-x:auto}.obx-filters .seg button{flex:1;padding:0 8px}.obx-filters label,.obx-filters select{width:100%}}
/* upload form: combobox, locked slug, dropzone */
.combo{position:relative}.combo-wrap{position:relative}.combo-wrap input{padding-right:40px}
.combo-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;border-radius:8px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center}.combo-clear:hover{background:#f0f0f3}
.combo-list{position:absolute;left:0;right:0;top:calc(100% - 18px);z-index:30;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.14);max-height:280px;overflow:auto}
.combo-list li{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.combo-list li .ot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.combo-list li code{font-size:12px;color:#666}.combo-list li.hi,.combo-list li:hover{background:#f3f3f6}
.combo-list li.create{color:var(--brand);font-weight:600;border-top:1px solid var(--line-2);margin-top:4px}.combo-list li.none{color:#777;cursor:default}
.combo-prev{margin-top:8px;font-size:14px;min-height:20px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vicons{display:inline-flex;gap:3px;align-items:center;color:#555}
.slugwrap{position:relative}.slugwrap input.locked{background:#f4f4f7;color:#555;padding-right:38px;cursor:not-allowed}
.slugwrap .lock{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#777;display:flex}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:120px;padding:18px;border:2px dashed var(--line-2);border-radius:12px;background:#fafafb;cursor:pointer;color:#444;transition:border-color .12s,background .12s}
.drop .ico{width:26px;height:26px;color:var(--brand)}.drop u{color:var(--brand)}
.drop:hover,.drop.over{border-color:var(--brand);background:#fff4f1}.drop small{color:#777}
.dfile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:#fff}
.dfile .fn{font-weight:600;word-break:break-all}
.flabel{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.linkbtn{border:0;background:none;color:var(--brand);text-decoration:underline;cursor:pointer;padding:0;font:inherit}
#upmsg .callout{display:flex;gap:8px;align-items:center;margin:0 0 12px}

/* inline edit */
.h1row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.h1row h1{margin:0}
.pencil{color:#777;opacity:.75}.pencil:hover,.pencil:focus-visible{opacity:1;color:var(--brand)}
.pcwrap{position:relative}.pcwrap>.pencil{position:absolute;right:52px;top:50%;transform:translateY(-50%)}
.pcwrap .inline-edit{background:#fff;border:1px solid var(--brand);border-radius:var(--r-lg);padding:var(--s4) var(--s5);box-shadow:var(--shadow)}
.cellwrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inline-edit{width:100%;max-width:680px}.ie-row{display:flex;gap:8px;align-items:center}.ie-row input{flex:1;min-width:0}
.inline-edit .field{margin-top:10px}.ie-err{color:#b42318;margin-top:6px}
.ckey{display:inline-flex;align-items:center;gap:6px}.ckey .btn.sm{min-height:28px;padding:0 8px}
.clamp{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.ie-row{flex-wrap:wrap}.ie-row input{flex-basis:100%}.pcwrap>.pencil{right:40px;top:16px;transform:none}}

/* collapsible upload bar */
.upbar{padding:0;margin-bottom:var(--s4);overflow:hidden}
.upbar-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:14px 18px;cursor:pointer;font-weight:600;border-radius:var(--r-lg)}
.upbar-btn:hover{background:#fafafa}.upbar-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.upbar-btn svg{color:var(--brand)}.upbar-hint{color:#777;font-weight:400;font-size:13px;margin-left:4px}
.upbar .chev{margin-left:auto;display:inline-flex;transition:transform .2s ease}.upbar .chev svg{color:#555}
.upbar.open .chev{transform:rotate(180deg)}
.upbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}.upbar.anim .upbody{grid-template-rows:1fr}
.upinner{overflow:hidden;padding:0 18px}.upbar.anim .upinner{padding-bottom:18px;border-top:1px solid #eee;padding-top:12px}
@media (max-width:760px){.upbar-hint{display:none}}
@media (prefers-reduced-motion:reduce){.upbody,.upbar .chev{transition:none}}
.upbody[hidden]{display:none}

/* ---- Map v3 ---- */
.map{height:auto;background:none;border:0;overflow:visible;position:static}
.maptb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:8px 10px;border-bottom:0}
.tbg{display:flex;align-items:center;gap:2px;padding-right:8px;border-right:1px solid #eee}.tbg:last-child{border-right:0;margin-left:auto}
.tbb{all:unset;box-sizing:border-box;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border-radius:8px;cursor:pointer;color:#333;font-size:13px}
.tbb:hover:not(:disabled){background:#f2f2f4}.tbb:focus-visible{outline:2px solid var(--brand)}.tbb:disabled{opacity:.35;cursor:default}.tbb svg{width:18px;height:18px}
.zl{font-size:12px;color:#666;min-width:40px;text-align:center}
.swatches .sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;background:var(--c);cursor:pointer;margin:0 2px;padding:0}
.swatches .sw:hover:not(:disabled){transform:scale(1.15)}.swatches .sw:disabled{opacity:.3;cursor:default}.swatches .sw:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.swatches .sw.none{background:#fff;display:inline-flex;align-items:center;justify-content:center}.swatches .sw.none svg{width:12px;height:12px}
.tbg.chk{gap:6px;font-size:13px;cursor:pointer;padding:0 6px}
.mlink{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#eff4ff;border:1px solid var(--line);border-bottom:0;padding:8px 12px;font-size:13px}.mlink[hidden]{display:none}
.mlink input{min-width:180px;flex:1;max-width:280px}.mlink svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.mapvp{position:relative;height:68vh;min-height:420px;overflow:hidden;border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);background-color:#fafafb;background-image:radial-gradient(#d4d4da 1px,transparent 1px);touch-action:none;cursor:grab;user-select:none}
.mapvp:active{cursor:grabbing}.mapvp:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mapcv{position:absolute;left:0;top:0;transform-origin:0 0}
.medges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.edge{pointer-events:auto;cursor:pointer}.edge .hit{fill:none;stroke:transparent;stroke-width:14}
.edge .ln{fill:none;stroke-linejoin:round}.edge.auto .ln{stroke:#9a9aa5;stroke-width:1.5}.edge.man .ln{stroke:#c2410c;stroke-width:2.25}.edge.dashed .ln{stroke-dasharray:7 5}
.edge:hover .ln{stroke-width:3}.edge.on .ln{stroke:#2563eb;stroke-width:3}
.elab rect{fill:#fff;stroke:#e3c3b3}.elab text{font-size:12px;fill:#7c2d12;font-family:inherit}
path.tmp{fill:none;stroke:#2563eb;stroke-width:2;stroke-dasharray:5 4}
.mnode{position:absolute;width:208px;height:96px;box-sizing:border-box;padding:12px 14px 10px 16px;background:#fff;border:1.5px solid #dcdce2;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04);cursor:pointer;display:flex;flex-direction:column;gap:4px;overflow:visible}
.mnode::before{content:"";position:absolute;left:-1.5px;top:-1.5px;bottom:-1.5px;width:6px;border-radius:12px 0 0 12px;background:var(--nc,transparent)}
.mnode.colored{background:color-mix(in srgb,var(--nc) 7%,#fff);border-color:color-mix(in srgb,var(--nc) 45%,#dcdce2)}
.mnode:hover{border-color:var(--brand)}.mnode.sel{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2)}.mnode.drop{box-shadow:0 0 0 4px rgba(37,99,235,.35)}
.mnode:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.mnode.approved .apill{color:var(--ok)}
.mn-top{display:flex;align-items:center;gap:6px}.mn-title{font-weight:600;font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpill{font-size:11px;font-weight:600;background:#f1f1f4;color:#444;border-radius:999px;padding:2px 7px}
.mn-slug code{font-size:12px;color:#777;background:none;padding:0}
.mn-foot{display:flex;align-items:center;gap:6px;margin-top:auto}.vicons{display:inline-flex;gap:3px;color:#666}.vicons svg,.npill svg,.apill svg{width:15px;height:15px}
.npill{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;background:#fff4e5;color:#b45309;border-radius:999px;padding:2px 7px;margin-left:auto}.apill{margin-left:auto}.npill+.apill{margin-left:0}
.hdl{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #2563eb;opacity:0;transition:opacity .12s;cursor:crosshair;z-index:2}
.mnode:hover .hdl,.mnode.sel .hdl{opacity:1}.ht{top:-7px;left:calc(50% - 6px)}.hb{bottom:-7px;left:calc(50% - 6px)}.hl{left:-7px;top:calc(50% - 6px)}.hr{right:-7px;top:calc(50% - 6px)}
@media (hover:none){.hdl{opacity:.85;width:16px;height:16px}.ht,.hb{left:calc(50% - 8px)}.hl,.hr{top:calc(50% - 8px)}}
.marq{position:absolute;border:1px dashed #2563eb;background:rgba(37,99,235,.08);pointer-events:none}
@media (max-width:760px){.mapvp{height:60vh;min-height:360px}.tbg{border-right:0;padding-right:2px}.lhelp{display:none}}
.elab{pointer-events:auto;cursor:pointer}.elab.on rect{stroke:#2563eb;stroke-width:1.5}

/* page cards v3 */
.cards:has(.pgcard){display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s4)}
a.pgcard{position:relative;padding:20px 22px 18px;gap:16px;align-items:flex-start;overflow:hidden}
a.pgcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--nc,transparent)}
.pg-ico{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--nc,#e8541e) 10%,#fff);color:var(--nc,var(--brand-600));display:flex;align-items:center;justify-content:center;flex:0 0 auto}.pg-ico svg{width:22px;height:22px}
.pg-slug code{font-size:12.5px;color:#777;background:none;padding:0}
.pg-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.vchip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:#555;background:#f4f4f6;border-radius:999px;padding:2px 8px 2px 6px}.vchip svg{width:13px;height:13px}
.pg-chips .vicons{display:inline-flex;gap:4px}.pg-chips .npill{margin-left:0}.pg-chips .npill svg{width:13px;height:13px}
a.pgcard .chev{align-self:center}
@media (max-width:760px){.cards:has(.pgcard){grid-template-columns:1fr}a.pgcard{padding:16px}.pg-ico{width:38px;height:38px}}
.mlink select{width:auto;min-width:110px;flex:0 0 auto}.mlink .btn{flex:0 0 auto}.mlink input{width:auto}
#mlink select,#mlink input,#mlink .btn{width:auto!important;flex:0 0 auto;min-height:32px;height:32px}#mlink input{min-width:200px}@media (max-width:760px){.legend .lhelp{display:none!important}}

/* pages header, card/list toggle, reorder */
.pghead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 var(--s3)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;background:#fff;padding:2px}
.seg button{all:unset;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:13px;cursor:pointer;color:#555}.seg button svg{width:16px;height:16px}
.seg button[aria-pressed=true]{background:var(--brand-50);color:var(--brand-600);font-weight:600}.seg button:focus-visible{outline:2px solid var(--brand)}
ol#pgsort{list-style:none;margin:0;padding:0}
.pgitem{position:relative;list-style:none}.pggrid .pgitem>a{height:100%;box-sizing:border-box}
.dh{all:unset;position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:26px;height:34px;border-radius:6px;color:#a3a3b0;cursor:grab;touch-action:none}
.dh svg{width:16px;height:16px;fill:currentColor}.dh:hover,.dh:focus-visible{color:var(--ink);background:#f2f2f4}.dh:focus-visible{outline:2px solid var(--brand)}
.pggrid .dh{top:8px;right:8px}.pggrid a.pgcard{padding-right:40px}
.pgitem.placeholder>a{opacity:.35;border:2px dashed var(--brand)!important;box-shadow:none!important}.pgitem.placeholder .dh{opacity:0}
.pgitem.armed>a{transform:scale(.98);box-shadow:0 0 0 3px rgba(232,84,30,.25)}
.pgitem.ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:.95;filter:drop-shadow(0 12px 24px rgba(0,0,0,.18))}.pgitem.ghost>a{height:100%;box-sizing:border-box}
ol.dragging,ol.dragging *{cursor:grabbing!important;user-select:none}
.pglist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.pglist .pgitem+.pgitem{border-top:1px solid #eee}
.pglist-head,.pgrow{display:grid;grid-template-columns:36px minmax(140px,1.6fr) minmax(110px,1fr) 70px minmax(110px,1fr) 90px 150px 20px;align-items:center;gap:12px}
.pglist-head{padding:0 16px 6px 44px;font-size:12px;color:#777;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.pgrow{position:relative;padding:10px 16px 10px 44px;color:var(--ink);text-decoration:none;min-height:56px;box-sizing:border-box;background:#fff}
.pgrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--nc,transparent)}
.pgrow:hover{background:#fafafa}.pgrow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}.pgrow:hover .chev{color:var(--brand)}
.pglist .dh{left:10px;top:calc(50% - 17px)}
.pr-ico{width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--nc,#e8541e) 10%,#fff);color:var(--nc,var(--brand-600));display:flex;align-items:center;justify-content:center}.pr-ico svg{width:18px;height:18px}
.pr-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pr-slug{font-size:12.5px;color:#777;background:none;overflow:hidden;text-overflow:ellipsis}
.pr-views{display:flex;gap:4px;flex-wrap:wrap}.pr-time{font-size:12.5px}.pr-notes .npill{margin-left:0}.pr-notes svg{width:13px;height:13px}.pgrow .chev{color:#a3a3b0}
@media (max-width:900px){.pglist-head{display:none}.pgrow{grid-template-columns:34px 1fr auto 16px;grid-template-areas:"i t n c" "i s v c";row-gap:2px;padding:10px 12px 10px 40px}
 .pr-ico{grid-area:i}.pr-title{grid-area:t}.pr-slug{grid-area:s}.pr-notes{grid-area:n;justify-self:end}.pr-ver{grid-area:v;justify-self:end}.pr-views,.pr-time{display:none}.pgrow .chev{grid-area:c}.pglist .dh{left:6px}}
@media (max-width:420px){.seg button span{display:none}}
ol.sortable .pgitem{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* ---- Approvals, Pages toolbar, note status (mobile-first) ---- */
.pgtools{display:grid;grid-template-columns:1fr auto;grid-template-areas:"q q" "f f" "s m";gap:8px;margin:0 0 10px}
.pgq{grid-area:q;position:relative;display:block}.pgq .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#888;pointer-events:none}
.pgq input{width:100%;padding-left:34px;min-height:40px}
.pgf{grid-area:f;display:flex;width:100%;box-sizing:border-box}.pgf button{flex:1;justify-content:center;min-height:36px}
.pgtools .seg button span{display:inline}.pgf .cnt{margin-left:4px}
.pgs{grid-area:s;position:relative;display:block;min-width:0}.pgs .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#777;pointer-events:none}
.pgs select{width:100%;padding-left:32px;min-height:40px}.pgm{grid-area:m}
.pghead{flex-wrap:wrap;gap:4px 12px}.pghint{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.pghint .ico{width:14px;height:14px}

@media (max-width:420px){.pgtools .pgm button span{display:none}.pgf button{padding:0 6px;font-size:13px}}
.badge.apc.pend{background:#f1f1f5;color:#5b5b66}.badge.apc{cursor:default}
.pr-notes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

.apgrp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.apb{display:inline-flex;align-items:center;gap:2px}.apbt{border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600}
.apx{border:0;background:transparent;cursor:pointer;width:28px;height:28px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;color:#777}.apx:hover{background:#eee;color:var(--danger)}.apx .ico{width:14px;height:14px}
@media (max-width:760px){.vhead{flex-wrap:wrap}.vhead .apgrp{order:5;flex-basis:100%}}
.badge.nst.unassigned{background:var(--warn-50);color:var(--warn)}.badge.nst.open{background:var(--danger-50);color:var(--danger)}
.note .actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.stlab{flex-basis:100%;margin:2px 0 -2px}
/* Segmented controls: unmistakable active option (solid brand orange, white text, 4.68:1 on #d63a22). Inactive stays neutral. */
.seg button.on,.seg button[aria-pressed=true]{background:#d63a22;color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(150,40,20,.35),inset 0 -1px 0 rgba(0,0,0,.12)}
.seg button.on:hover,.seg button[aria-pressed=true]:hover{background:#c2331c;color:#fff}
.seg button.on .cnt,.seg button[aria-pressed=true] .cnt{background:rgba(255,255,255,.25);color:#fff}
.seg button:not(.on):not([aria-pressed=true]){color:#4a4a55}
.seg button:focus-visible{outline:2px solid #1d1d24;outline-offset:1px}
/* Mode: every mode is labelled (Pan / Comment / Interact) at all widths so Comment is easy to find */
.toolbar .modeseg button span{display:inline}
/* Toolbar wraps instead of clipping its last group when the notes panel is open */
.toolbar{flex-wrap:wrap;row-gap:6px;overflow:visible}
/* Comment-mode hint over the design */
.vhint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;background:#1d1d24;color:#fff;font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.vhint[hidden]{display:none}
/* Guest welcome on the project page */
.gwelcome h2{margin:0 0 4px;font-size:17px}.gwelcome p{margin:0;color:var(--ink-2)}
@media (max-width:760px){
  /* Viewer controls meet the 44px touch minimum */
  .toolbar .seg button,.toolbar .btn.sm,.vhead>.btn.icon{min-height:44px;min-width:44px}
  .toolbar .modeseg{flex:1 1 100%}.toolbar .modeseg button{flex:1;justify-content:center}
  .vhint{font-size:12px;top:8px}
  /* New note on a phone: short composer only, so the tapped spot stays visible above it */
  .side.composing{height:auto;max-height:60dvh;transform:none}
  .side.composing .sheet-grip,.side.composing .head,.side.composing .body,.side.composing .ro{display:none}
  .side.composing .compose{border-top:0;border-radius:18px 18px 0 0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .side.composing textarea{min-height:72px}
}
/* Pages toolbar: one control height (40px), one radius/border/font, evenly inset active pills. */
#pgtools{--tb-h:40px;--tb-r:10px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"q q" "f f" "s m";gap:8px;align-items:center;margin:0 0 8px}
#pgtools .pgq,#pgtools .pgs{height:var(--tb-h);margin:0}
#pgtools .pgq input,#pgtools .pgs select{box-sizing:border-box;height:var(--tb-h);min-height:0;margin:0;padding-top:0;padding-bottom:0;border:1px solid var(--line);border-radius:var(--tb-r);font-size:14px;line-height:normal;background-color:#fff}
#pgtools .pgs select{padding-right:32px}
#pgtools .seg{box-sizing:border-box;height:var(--tb-h);padding:3px;gap:2px;border:1px solid var(--line);border-radius:var(--tb-r);background:#fff;display:flex;align-items:stretch;margin:0}
#pgtools .seg button{box-sizing:border-box;height:100%;min-height:0;min-width:0;padding:0 12px;border-radius:calc(var(--tb-r) - 3px);font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
#pgtools .seg button svg{width:16px;height:16px}
#pgtools .cnt{margin-left:2px;line-height:18px;min-width:18px;height:18px;font-size:12px;text-align:center;box-sizing:border-box}
#pgtools .pgf button{flex:1}
@media (min-width:900px){#pgtools{grid-template-columns:minmax(220px,1fr) auto auto auto;grid-template-areas:"q f s m"}#pgtools .pgf button{flex:none}#pgtools .pgs{width:210px}}
@media (max-width:420px){#pgtools .seg button{padding:0 8px;font-size:13px}#pgtools .pgm button{padding:0 11px}}
.pghead{margin:0 0 12px;padding:0}
/* List rows: compact approval chip (check + who; full text on hover/title), status + notes on one line */
.pgrow .apl{display:none}
.pgrow .pr-notes{flex-wrap:nowrap;white-space:nowrap;min-width:0}
@media (min-width:901px){.pglist-head,.pgrow{grid-template-columns:36px minmax(140px,1.6fr) minmax(110px,1fr) 64px minmax(100px,1fr) 190px 140px 20px}}
@media (max-width:900px){.pgrow .pr-notes{gap:4px}}
/* List view: Views + Updated columns removed. icon | page | slug | version | status · notes | chevron */
@media (min-width:901px){.pglist-head,.pgrow{grid-template-columns:36px minmax(160px,2fr) minmax(120px,1.2fr) 64px 210px 20px}}
.pgrow .pr-ver{white-space:nowrap}
.pgrow .pr-notes{height:26px;align-items:center}
/* Breadcrumbs: one line on phones; long names ellipsize (full name in title) */
@media (max-width:760px){.crumbs{flex-wrap:nowrap;overflow:hidden;min-width:0;max-width:100%}.crumbs a,.crumbs>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;max-width:46vw}.crumbs .ico{flex:none}}
/* Project header: "Upload page" is the only filled button (white on #d63a22 = 4.68:1, bold); Share is outline. */
.btn.upl{background:#d63a22;border-color:#d63a22;color:#fff;font-weight:700}.btn.upl:hover{background:#b8301b;border-color:#b8301b;color:#fff}
.btn.upl:focus-visible{outline:2px solid #1d1d24;outline-offset:2px}
.kebab{position:relative;display:none}.kebab .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px}
.kebab .menu a{display:flex;gap:8px;align-items:center;padding:10px 12px;color:var(--ink);text-decoration:none;border-radius:8px}.kebab .menu a:hover,.kebab .menu a:focus{background:#f3f3f6}
@media (max-width:760px){#share{display:none}.kebab{display:block}.page-head .actions{flex-wrap:nowrap}}
#dropov{position:fixed;inset:0;z-index:90;background:rgba(214,58,34,.10);border:3px dashed #d63a22;display:none;align-items:center;justify-content:center;pointer-events:none}
#dropov.on{display:flex}#dropov div{background:#fff;border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 12px 40px rgba(0,0,0,.18);color:#1d1d24}
#dropov .ico{width:36px;height:36px;color:#d63a22}#dropov b{font-size:18px}#dropov span{color:#666;font-size:13px}
.page-head>div:first-child{min-width:0;max-width:100%}.page-head h1{overflow-wrap:anywhere}