/* Sable Designs — sable (near-black) and or (gold). Heraldic pairing, on-name,
   and deliberately nothing like the purple SaaS default. */
:root{
  --bg:#0b0b0d; --panel:#141416; --panel-2:#1b1b1f; --line:#26262b;
  --text:#ece9e4; --muted:#8b867e;
  --gold:#d4a24c; --gold-lt:#efd09a; --gold-dk:#a97722;
  --ok:#5ec98a; --warn:#e0a03c; --err:#e0685f;
  --r:10px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.err{color:var(--err);min-height:16px;font-size:12.5px;margin:6px 0 0}
h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
h3{margin:0;font-size:15px;font-weight:600}
h4{margin:20px 0 4px;font-size:14px}

/* brand ---------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  letter-spacing:.01em;white-space:nowrap}
.brand .thin{font-weight:400;color:var(--muted)}
.brand-lg{font-size:20px;font-family:var(--serif);letter-spacing:.02em}
.mark{width:22px;height:22px;display:block;flex:none}
.brand-lg .mark{width:30px;height:30px}

/* overlays ------------------------------------------------------------- */
.overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:50;padding:20px;
  background:radial-gradient(80% 55% at 50% 0%,#17161a 0%,var(--bg) 70%)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:30px;width:100%;max-width:390px;display:flex;flex-direction:column;gap:13px;
  box-shadow:0 24px 60px -20px #000}
.card h3{font-family:var(--serif);font-size:17px;margin-top:4px}

/* controls ------------------------------------------------------------- */
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
label.check{flex-direction:row;align-items:center;gap:9px;text-transform:none;
  letter-spacing:0;font-size:14px;color:var(--text)}
input,textarea{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;width:100%;
  transition:border-color .15s}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;line-height:1.5}
input[type=checkbox]{width:auto;accent-color:var(--gold)}
button{border:0;border-radius:8px;padding:10px 16px;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;transition:filter .15s,background .15s}
button.primary{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#241a08}
button.primary:hover{filter:brightness(1.07)}
button.primary:disabled{opacity:.4;cursor:not-allowed;filter:none}
button.block{width:100%}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.ghost:hover{color:var(--text);border-color:#3a3a41}

/* topbar --------------------------------------------------------------- */
/* The rail runs the full window height, with the brand in it, so the header
   only spans the content area. Previously the topbar cut across the top and
   left the sidebar visibly short. */
#app{display:grid;grid-template-columns:218px 1fr;grid-template-rows:52px 1fr;
  height:100%;transition:grid-template-columns .18s ease}
#app.rail-closed{grid-template-columns:0 1fr}
.sidebar{grid-row:1 / span 2;grid-column:1}
.topbar{grid-row:1;grid-column:2;
  display:flex;align-items:center;gap:16px;padding:0 18px;
  border-bottom:1px solid var(--line);background:var(--panel)}
main{grid-row:2;grid-column:2}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.status{display:flex;align-items:center;gap:8px;font-size:12.5px;
  padding:5px 12px 5px 10px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.state-idle .dot{background:#5a5a62}
.state-generating{border-color:rgba(94,201,138,.4)}
.state-generating .dot{background:var(--ok);animation:pulse 1.3s ease-in-out infinite}
.state-cold_start,.state-queued{border-color:rgba(224,160,60,.4)}
.state-cold_start .dot,.state-queued .dot{background:var(--warn);
  animation:pulse 1.3s ease-in-out infinite}
.state-unreachable .dot,.state-not_configured .dot{background:var(--err)}
@keyframes pulse{50%{opacity:.35}}

/* shell ---------------------------------------------------------------- */
.shell{display:contents}
#app.rail-closed .sidebar{padding-left:0;padding-right:0;border-right:0;
  overflow:hidden}
#app.rail-closed .sidebar > *{display:none}
.rail-btn{display:grid;place-items:center;width:30px;height:30px;flex:none;
  background:none;border:1px solid var(--line);border-radius:7px;
  color:var(--muted);padding:0;cursor:pointer}
.rail-btn:hover{color:var(--text);border-color:#3a3a41}
.rail-btn svg{width:16px;height:16px}
.sidebar{border-right:1px solid var(--line);background:var(--panel);
  padding:0 10px 12px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.rail-brand{height:52px;padding:0 6px;flex:none;
  border-bottom:1px solid var(--line);margin:0 -10px 10px;padding-left:16px}
#queue-info{margin-left:auto;white-space:nowrap}
.sidebar nav{display:flex;flex-direction:column;gap:1px}

/* collapsible groups keep the rail short */
.side-head{width:100%;display:flex;align-items:center;gap:9px;
  background:none;border:0;color:var(--muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;padding:10px;cursor:pointer;
  border-radius:7px}
.side-head:hover{color:var(--text);background:var(--panel-2)}
.side-head .sec-label{flex:1;text-align:left}
.sec-icon{display:flex;width:17px;height:17px;flex:none;opacity:.85}
.sec-icon svg{width:17px;height:17px}
.side-head .chev{width:15px;height:15px;flex:none;transition:transform .18s ease;
  opacity:.85}
.side-head.closed .chev{transform:rotate(-90deg)}
.side-body{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.side-body.closed{display:none}
.row-icon{display:flex;width:15px;height:15px;flex:none;opacity:.6}
.row-icon svg{width:15px;height:15px}
.sidebar a:hover .row-icon,.sidebar a.active .row-icon{opacity:1}
.sidebar a{align-items:center;gap:9px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:8px;
  display:flex;flex-direction:column;gap:2px}
.side-foot .who{padding:0 10px 4px;font-size:11px;
  overflow:hidden;text-overflow:ellipsis}
.acct-row{cursor:pointer}
/* icon, then label hard-left. The tag (if any) is pushed right on its own. */
.sidebar a{color:#c9c5be;text-decoration:none;padding:7px 10px;border-radius:7px;
  font-size:13.5px;cursor:pointer;display:flex;justify-content:flex-start;gap:9px;
  text-align:left}
.sidebar a > span:not(.row-icon):not(.tag){flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar a .tag{margin-left:auto;flex:none}
.sidebar a:hover{background:var(--panel-2);color:var(--text)}
.sidebar a.active{background:linear-gradient(90deg,rgba(212,162,76,.16),transparent);
  color:var(--gold-lt);box-shadow:inset 2px 0 0 var(--gold)}
.sidebar a.soon{color:#5f5c57;cursor:default}
.sidebar a.soon:hover{background:none;color:#5f5c57}
.tag{font-size:10px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:1px 6px;align-self:center}
main{overflow:auto;padding:22px 26px}
.view{max-width:1500px}

/* composer ------------------------------------------------------------- */
.composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:24px}
.composer-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.composer-head h2{margin-right:2px}
.tool-icon{display:flex;width:22px;height:22px;color:var(--gold);flex:none}
.tool-icon svg{width:22px;height:22px}

/* per-tool settings: only what THIS tool exposes, each with a ? */
.tool-settings{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.setting{display:flex;flex-direction:column;gap:5px;min-width:120px}
.setting input{width:100%}
.setting-label{display:flex;align-items:center;gap:5px;font-size:11px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hint{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:9.5px;font-weight:700;
  cursor:help;position:relative;text-transform:none;letter-spacing:0;flex:none}
.hint:hover,.hint:focus{border-color:var(--gold);color:var(--gold);outline:none}
/* Anchored to the hint's LEFT edge and opening rightward. Centring it meant the
   leftmost setting's tip extended past the composer and was clipped by the
   sidebar's stacking context, so half the text was unreadable. */
.hint::after{content:attr(data-tip);position:absolute;bottom:145%;left:-6px;
  width:max(230px,16vw);max-width:320px;background:#08080a;color:var(--text);
  border:1px solid #35353d;border-radius:8px;padding:9px 11px;font-size:12px;
  font-weight:400;line-height:1.45;text-align:left;opacity:0;visibility:hidden;
  transition:opacity .14s;z-index:60;pointer-events:none;
  box-shadow:0 14px 34px -8px #000}
.hint:hover::after,.hint:focus::after{opacity:1;visibility:visible}
.hint-demo{display:inline-grid;place-items:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:10px;
  font-weight:700;vertical-align:middle}
.composer textarea{min-height:88px}
.composer-foot{display:flex;align-items:center;gap:14px;margin-top:12px}
.composer-foot .primary{margin-left:auto;min-width:130px}
.refs{display:flex;gap:8px;flex-wrap:wrap}
.ref{display:flex;align-items:center;gap:8px}
.filebtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  background:var(--panel-2);border:1px dashed var(--line);border-radius:7px;
  padding:7px 13px;font-size:12px;color:var(--muted);cursor:pointer;
  text-transform:uppercase;letter-spacing:.05em}
.filebtn:hover{border-color:var(--gold);color:var(--text)}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.controls{display:flex;flex-direction:column;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* results -------------------------------------------------------------- */
.results-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.results-head button{margin-left:auto}
.tile a{display:block;text-decoration:none}
.badge.soon{color:var(--warn)}
.bar{margin-top:10px;height:5px;border-radius:99px;background:var(--panel-2);
  overflow:hidden;width:100%}
.bar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));
  transition:width .4s ease}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--panel-2)}
.tile .meta{padding:8px 10px;font-size:11.5px;color:var(--muted);
  display:flex;justify-content:space-between;gap:8px;align-items:center}
.tile.pending{display:grid;place-items:center;aspect-ratio:1;text-align:center;padding:14px}
.tile.failed{border-color:rgba(224,104,95,.35)}
.badge{font-size:10.5px;padding:2px 8px;border-radius:99px;background:var(--panel-2);
  text-transform:uppercase;letter-spacing:.06em}
.badge.done{color:var(--ok)}
.badge.failed,.badge.blocked{color:var(--err)}
.badge.running,.badge.queued{color:var(--warn)}

/* lists ---------------------------------------------------------------- */
.card-flat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;display:flex;flex-direction:column;gap:12px;max-width:560px;margin-top:14px}
.item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;margin-top:10px;max-width:760px}
.item .t{font-weight:600;font-size:14px}
.vote{display:flex;align-items:center;gap:14px}
.vote button{background:var(--panel-2);color:var(--gold-lt);padding:7px 13px;
  border:1px solid var(--line)}
.faq p{color:var(--muted);margin:4px 0 0;font-size:13.5px}
.faq h4:first-child{margin-top:0}
.faq h3{margin:26px 0 10px;padding-bottom:7px;font-size:13px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gold);
  border-bottom:1px solid var(--line)}
.faq h3:first-child{margin-top:0}
.faq b{color:var(--text);font-weight:600}
.faq-wrap{max-width:760px}
.faq.card-flat{max-width:none}

/* account */
.acct-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:start}
.acct-grid .card-flat{max-width:none;margin-top:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px}
.stat-v{font-size:19px;font-weight:600;letter-spacing:-.01em}
.stat-l{font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin-top:3px}
.stat-n{font-size:10.5px;color:#6d6a64;margin-top:3px}
.wf-row{display:grid;grid-template-columns:1.6fr .7fr .8fr .7fr;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.wf-row:last-child{border-bottom:0}
.attach{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.acct-grid{grid-template-columns:1fr}}

@media(max-width:1050px){
  .composer-body{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
}