/* Sable Operations — brand styling. Tokens mirror the public site (style.css). */
:root{--ink:#0b0b10;--i2:#12121a;--i3:#1a1a25;--wine:#3a0d1c;--gold:#c9a24b;--gold2:#e4c97f;--ivory:#ece4d0;--mute:#a79f8c;--line:rgba(201,162,75,.22);--line2:rgba(201,162,75,.45);--ok:#7fb48a;--warn:#d6b45a;--bad:#d36b6b;--ease:cubic-bezier(.2,.7,.2,1);color-scheme:dark;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{scrollbar-color:var(--line2) var(--ink)}
body{margin:0;color:var(--ivory);font:400 14px/1.55 Inter,system-ui,sans-serif;background:var(--ink) radial-gradient(ellipse 70% 50% at 100% 0%,rgba(58,13,28,.55),transparent 70%) fixed}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.m{font-family:"IBM Plex Mono",ui-monospace,monospace}
h1,h2,h3{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:400;margin:0}
.sub{color:var(--mute);margin:0}
.lbl{font:11px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}

/* ---- layout ---- */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
aside{background:linear-gradient(180deg,#14141d,#0e0e14);border-right:1px solid var(--line);padding:22px 14px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.brand img{width:44px;height:44px;display:block}
.logo{font:400 21px "Bodoni Moda",Didot,Georgia,serif;letter-spacing:.3em;color:var(--gold);line-height:1}
.logo small{display:block;font:400 8.5px "IBM Plex Mono",monospace;letter-spacing:.3em;color:var(--mute);margin-top:7px}
aside button.nv{all:unset;cursor:pointer;padding:11px 12px;color:var(--mute);font:500 11.5px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;border-left:2px solid transparent;transition:color .25s,background .25s,border-color .25s,padding .3s var(--ease)}
aside button.nv:hover{color:var(--ivory);padding-left:16px}
aside button.nv.on{color:var(--gold2);background:linear-gradient(90deg,rgba(201,162,75,.12),transparent);border-left-color:var(--gold)}
aside button.nv span{background:var(--gold);color:var(--ink);font-size:10px;padding:0 6px;min-width:18px;text-align:center;letter-spacing:0}
aside button.nv span.z{background:transparent;color:var(--mute);border:1px solid var(--line)}
aside .who{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);font:11px/1.6 "IBM Plex Mono",monospace;color:var(--mute)}
aside .who b{color:var(--ivory);font-weight:400;word-break:break-all}
main{padding:30px 36px 80px;min-width:0;max-width:1400px}
main.enter>*{animation:rise .6s var(--ease) both}main.enter>*:nth-child(2){animation-delay:.06s}main.enter>*:nth-child(3){animation-delay:.12s}main.enter>*:nth-child(n+4){animation-delay:.18s}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;position:relative}
.ph::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--gold),var(--line) 40%,transparent)}
.ph::before{content:"";position:absolute;left:0;bottom:-3px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);z-index:1}
h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin-bottom:6px}
h2.sec{font-size:22px;margin:30px 0 12px}

/* ---- surfaces ---- */
.card,.k{position:relative;background:linear-gradient(180deg,var(--i2),#0f0f16);border:1px solid var(--line);padding:16px 18px}
.card::before,.k::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);pointer-events:none}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
.k b{display:block;font:400 38px/1.1 "Bodoni Moda",Didot,serif;color:var(--gold2)}
.k span{display:block;margin-top:4px}
.k::after{content:"";position:absolute;left:18px;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .8s var(--ease)}
.k:hover::after{right:18px}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
table{width:100%;border-collapse:collapse}
th{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--mute);text-align:left;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line2)}
td{padding:10px;border-bottom:1px solid rgba(201,162,75,.1)}tr:hover td{background:rgba(201,162,75,.03)}
.wrap{overflow-x:auto}
.tag{display:inline-block;padding:1px 9px;border:1px solid var(--line);font:11px "IBM Plex Mono",monospace;letter-spacing:.05em;color:var(--gold2)}
.empty{padding:34px 20px;text-align:center;color:var(--mute);border:1px dashed var(--line)}

/* ---- controls ---- */
button.b,select,input,textarea{background:#0f0f16;color:var(--ivory);border:1px solid var(--line);padding:8px 11px;font:12px "IBM Plex Mono",monospace;border-radius:0;transition:border-color .2s,box-shadow .2s,background .25s,color .25s}
select{appearance:none;-webkit-appearance:none;padding-right:30px;background:#0f0f16 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9a24b' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 11px center}
input::placeholder,textarea::placeholder{color:#6f6a5c}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
button.b{cursor:pointer;letter-spacing:.08em;text-transform:uppercase;font-size:11px;padding:9px 16px;border-color:var(--gold);color:var(--gold2);background:transparent}
button.b:hover{background:var(--gold);color:var(--ink)}
button.b:disabled{opacity:.35;cursor:default;background:transparent;color:var(--gold2)}
button.p{background:var(--gold);color:var(--ink)}button.p:hover{background:var(--gold2);border-color:var(--gold2)}
button.g{border-color:var(--line);color:var(--mute)}
button.d{border-color:rgba(211,107,107,.5);color:var(--bad)}button.d:hover{background:var(--bad);color:var(--ink);border-color:var(--bad)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form{display:grid;gap:12px;max-width:640px}.form label{display:grid;gap:5px}.form input,.form select,.form textarea{width:100%;font:13px Inter,sans-serif}
textarea{min-height:120px;resize:vertical}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.bar input{flex:1;min-width:200px}

/* ---- sign-in gate ---- */
.gate{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 30%,var(--wine) 0%,var(--ink) 62%)}
.gate::before{content:"";position:absolute;right:-8%;top:50%;width:min(820px,110vw);aspect-ratio:1;transform:translateY(-50%);background:url(crest.svg) center/contain no-repeat;opacity:.55;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.gate .card{width:min(430px,100%);padding:34px 32px 30px;background:linear-gradient(180deg,rgba(18,18,26,.92),rgba(12,12,18,.94));backdrop-filter:blur(8px);animation:enter 1.1s var(--ease) both}
.gate .brand{flex-direction:column;text-align:center;gap:14px;border:0;padding-bottom:6px}.gate .brand img{width:76px;height:76px}.gate .logo{font-size:26px}
.gate .sub{font-size:13px;margin:6px 0 14px}
.err{color:var(--bad);font:12px "IBM Plex Mono",monospace;min-height:18px}
#toast{position:fixed;right:22px;bottom:22px;background:var(--i3);color:var(--ivory);border:1px solid var(--gold);border-left:4px solid var(--gold);padding:11px 18px;font:12px "IBM Plex Mono",monospace;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease);z-index:50;max-width:min(440px,90vw)}
#toast.on{opacity:1;transform:none}

/* ---- enquiry board ---- */
.board{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.col{background:linear-gradient(180deg,var(--i2),#0f0f16);border:1px solid var(--line);padding:10px;min-height:220px}
.col h3{margin:0 0 10px;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--gold2);text-transform:uppercase;display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--line)}
.lead{background:var(--i3);border:1px solid var(--line);padding:11px;margin-bottom:8px;transition:border-color .3s,transform .3s var(--ease)}.lead:hover{border-color:var(--line2);transform:translateY(-2px)}
.lead b{font:400 16px "Bodoni Moda",Didot,serif}.lead p{margin:4px 0 8px;color:var(--mute);font-size:12px}
.bars td{border:0;padding:6px 10px}.bar-i{height:7px;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .9s var(--ease)}

/* ---- accordion records (clients, operatives) ---- */
.cls{display:grid;gap:10px}
.cl{--tc:var(--line);background:linear-gradient(180deg,var(--i2),#0f0f16);border:1px solid var(--line);border-left:3px solid var(--tc);animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0)*55ms);transition:border-color .3s,box-shadow .3s}
.cl:hover{border-color:var(--line2);border-left-color:var(--tc)}.cl.open{box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,75,.14)}
.cl.t-good{--tc:var(--ok)}.cl.t-warn{--tc:var(--warn)}.cl.t-high{--tc:#d98a4a}.cl.t-bad{--tc:var(--bad)}
.clh{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:48px minmax(140px,1.3fr) auto minmax(140px,1fr) 18px;gap:16px;align-items:center;padding:14px 18px}
.clh:focus-visible{outline:1px solid var(--gold);outline-offset:-3px}
.av{width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--gold) var(--p,0%),rgba(201,162,75,.16) 0);display:grid;place-items:center;transition:transform .4s var(--ease)}
.av b{width:38px;height:38px;border-radius:50%;background:var(--i3);display:grid;place-items:center;font:400 15px "Bodoni Moda",Didot,serif;color:var(--gold2);letter-spacing:.05em}
.cl:hover .av,.cl.open .av{transform:scale(1.07)}
.nm b{display:block;font:400 19px "Bodoni Moda",Didot,Georgia,serif;color:var(--ivory)}.nm small{font:11px "IBM Plex Mono",monospace;color:var(--mute);letter-spacing:.04em}
.pills{display:flex;gap:6px;flex-wrap:wrap}.pl{font:normal 10px "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.pl.good{color:var(--ok);border-color:rgba(127,180,138,.45)}.pl.gold{color:var(--gold2);border-color:rgba(201,162,75,.5)}.pl.warn{color:var(--warn);border-color:rgba(214,180,90,.5)}.pl.high{color:#d98a4a;border-color:rgba(217,138,74,.5)}.pl.dim{opacity:.6}
.pl.bad{color:var(--bad);border-color:rgba(211,107,107,.55);animation:pulse 2.4s infinite}
.ct{font-size:11px;color:var(--mute);line-height:1.5;overflow:hidden;text-overflow:ellipsis}
.chev{width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .4s var(--ease),margin .4s;margin-top:-4px}.cl.open .chev{transform:rotate(225deg);margin-top:4px}
.clb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}.cl.open .clb{grid-template-rows:1fr}
.cli{overflow:hidden;min-height:0;padding:0 18px;opacity:0;transform:translateY(-10px);transition:opacity .35s ease .08s,transform .5s var(--ease),padding .5s}
.cl.open .cli{opacity:1;transform:none;padding:4px 18px 18px;border-top:1px solid var(--line)}
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin:14px 0;border-bottom:1px solid var(--line)}
.tab{all:unset;cursor:pointer;padding:9px 14px;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s,background .2s}
.tab:hover{color:var(--ivory);background:rgba(201,162,75,.05)}.tab.on{color:var(--gold2);border-bottom-color:var(--gold)}
.pane{display:none;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 16px}.pane.on{display:grid}
.pane.on .f{animation:rise .45s var(--ease) both;animation-delay:calc(var(--n,0)*28ms)}
.f{display:grid;gap:4px;align-content:start}.f.w{grid-column:1/-1}.f input,.f select,.f textarea{width:100%;font:13px Inter,sans-serif}.f textarea{min-height:76px}
.chk{display:grid;gap:6px}.chk>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.ck{display:flex;gap:9px;align-items:center;padding:8px 11px;border:1px solid var(--line);background:#0f0f16;cursor:pointer;font-size:13px;transition:border-color .2s}.ck:hover{border-color:var(--line2)}.ck input{width:auto;accent-color:var(--gold);margin:0}
.acts{display:flex;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}.upd{font-size:11px;color:var(--mute);margin-left:auto}

/* ---- email editor ---- */
.ed{display:grid;grid-template-columns:minmax(320px,430px) 1fr;gap:16px;align-items:start}
.blk{border:1px solid var(--line);background:#0f0f16;padding:10px;margin-bottom:8px;animation:rise .35s var(--ease) both}
.blk .bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:6px}
.blk textarea{min-height:64px;width:100%}.blk input{width:100%}
.blk .row button{padding:3px 8px}
.pv{background:#05050a;border:1px solid var(--line);position:sticky;top:12px}
.pv iframe{width:100%;height:78vh;border:0;background:#05050a;display:block}
.pv .pvh{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line)}
.tplg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.tpl{all:unset;box-sizing:border-box;cursor:pointer;padding:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--i2),#0f0f16);transition:border-color .3s,transform .35s var(--ease)}
.tpl:hover,.tpl.on{border-color:var(--gold);transform:translateY(-3px)}.tpl b{display:block;font:400 17px "Bodoni Moda",Didot,serif;margin-bottom:3px}.tpl small{color:var(--mute);font-size:12px}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes enter{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes drift{to{transform:translateY(-54%) scale(1.06) rotate(3deg)}}
@keyframes pulse{50%{box-shadow:0 0 0 3px rgba(211,107,107,.15)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:1020px){.ed{grid-template-columns:1fr}.pv{position:static}.pv iframe{height:60vh}}
@media(max-width:820px){.app{grid-template-columns:1fr}aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:14px}.brand{width:100%;border:0;padding-bottom:6px;margin:0}aside .who{display:none}main{padding:20px 16px 60px}.two,.grid2{grid-template-columns:1fr}.clh{grid-template-columns:44px 1fr 18px}.pills,.ct{grid-column:2/3}.chev{grid-row:1;grid-column:3}}