/* ==========================================================================
   DealR — product surfaces
   Built interface, not screenshots. The rule throughout: no container unless
   it is doing work. Hierarchy comes from image, type and spacing, so there is
   no universal bordered card repeated down the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Listing card
   The item image is the object. Everything else is set quietly beneath it.
   -------------------------------------------------------------------------- */
.listing{
  display:block;position:relative;
  border-radius:5px;overflow:hidden;
  background:var(--raise-1);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.listing:hover{background:var(--raise-2);border-color:var(--rule-2);transform:translateY(-2px)}
.listing:active{transform:translateY(0)}

.listing-shot{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--void)}
.listing-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.listing:hover .listing-shot img{transform:scale(1.03)}
/* Grades the image down toward the type so the two never fight. */
.listing-shot:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 40%,rgba(10,10,10,.6));
}

.listing-body{padding:13px 14px 14px}
.listing-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.listing-kind{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.listing-where{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.listing h3{
  margin:0;font-size:16px;font-weight:620;letter-spacing:-.018em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.listing-note{
  margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* Terms are a definition list, not a row of badges. */
.listing-terms{display:flex;gap:8px 22px;margin:12px 0 0;flex-wrap:wrap}
.listing-terms div{min-width:0}
.listing-terms dt{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.listing-terms dd{margin:1px 0 0;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listing-terms dd.strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

.listing-foot{
  display:flex;align-items:baseline;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--rule);
  font-size:11.5px;color:var(--ink-3);
}
.listing-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-age{margin-left:auto;color:var(--ink-4);white-space:nowrap}

.mark{border:1px solid var(--rule);
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:17px;height:17px;border-radius:2px;
  background:var(--raise-3);color:var(--ink-2);
  font-size:8.5px;font-weight:700;font-style:normal;letter-spacing:-.02em;
}
.mark.lg{width:28px;height:28px;border-radius:4px;font-size:12px}
.mark.on{background:var(--cyan);color:#0A0A0A}

/* Grid: dense, and it fills the space rather than sitting in a fixed 3-up. */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}

/* --------------------------------------------------------------------------
   Discord surface
   -------------------------------------------------------------------------- */
.discord{display:grid;grid-template-columns:198px minmax(0,1fr);background:var(--ground);border-radius:5px;overflow:hidden}
.dc-rail{padding:14px 9px;background:var(--void);font-size:13px}
.dc-server{
  display:flex;align-items:center;gap:9px;padding:4px 7px 14px;
  font-size:13.5px;font-weight:620;letter-spacing:-.015em;
}
.dc-group{padding:13px 8px 5px;color:var(--ink-4);font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.dc-ch{
  display:flex;align-items:center;gap:7px;padding:6px 8px;margin:1px 0;border-radius:4px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dc-ch i{font-style:normal;color:var(--ink-4)}
.dc-ch.on{background:var(--raise-2);color:var(--ink)}
.dc-ch.on i{color:var(--cyan)}
.dc-ch.lock i{color:var(--ink-4)}

.dc-main{min-width:0;display:flex;flex-direction:column}
.dc-top{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-bottom:1px solid var(--rule);font-size:13.5px;font-weight:600;letter-spacing:-.015em;
}
.dc-top small{color:var(--ink-3);font-weight:400;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-feed{padding:16px;display:grid;gap:18px;align-content:end;min-width:0;overflow:hidden}

.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:11px}
.msg-avatar{
  width:32px;height:32px;border-radius:5px;display:grid;place-items:center;
  background:#4752c4;color:#fff;font-size:12px;font-weight:700;
}
.msg-head{display:flex;align-items:baseline;gap:8px;font-size:13.5px}
.msg-head b{font-weight:620;letter-spacing:-.01em}
.msg-head time{color:var(--ink-4);font-size:11px}
.msg-app{padding:1px 5px;border-radius:2px;background:#4752c4;color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em}
.msg-sub{margin:2px 0 7px;font-size:12.5px;color:var(--ink-3)}
.msg-who{color:#8ea2ff;font-weight:550}
.msg-sub em{font-style:normal;color:var(--ink-4);font-size:11px}
.msg-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dbtn{
  padding:8px 13px;border:0;border-radius:4px;
  background:var(--raise-3);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background var(--t-fast);
}
.dbtn:hover{background:var(--raise-4)}
.dbtn.primary{background:#4752c4;color:#fff}
.dbtn.primary:hover{background:#5f80ff}

/* The listing embed, as the bot posts it. */
.embed{
  position:relative;padding:13px 15px;border-radius:2px;
  background:var(--raise-1);border-left:3px solid var(--cyan);min-width:0;
}
.embed-buying,.embed-trading{border-left-color:var(--ink-4)}
.embed h4,.embed .embed-title{display:block;margin:0;font-size:16px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.embed>p{margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.embed-fields{display:flex;flex-wrap:wrap;gap:10px 26px;margin:13px 0 0}
.embed-fields dt{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--ink-4)}
.embed-fields dd{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.embed-fields dd.ok{color:var(--ink-2)}
.embed-shot{margin-top:12px;border-radius:2px;overflow:hidden;aspect-ratio:16/8;background:var(--void)}
.embed-shot img{width:100%;height:100%;object-fit:cover}
.embed footer{margin-top:10px;font-size:11px;color:var(--ink-4)}

/* --------------------------------------------------------------------------
   App chrome — the signed-in product. Dense, quiet, keyboard-friendly.
   -------------------------------------------------------------------------- */
.app{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}
.app-rail{
  position:sticky;top:0;align-self:start;height:100vh;overflow:auto;
  padding:18px 14px;background:var(--void);border-right:1px solid var(--rule);
}
.app-brand{display:flex;align-items:center;gap:9px;padding:0 6px 18px;font-size:15px;font-weight:700;letter-spacing:-.03em}
.app-brand em{font-style:normal;font-weight:500;color:var(--ink-3)}
.rail-label{padding:16px 8px 7px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.rail-link{
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:4px;
  font-size:13.5px;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.rail-link:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.rail-link.on{background:var(--raise-2);color:var(--ink);font-weight:550}
.rail-link .tag{margin-left:auto;font-size:9.5px;letter-spacing:.06em;color:var(--ink-4)}
.rail-link .tag.pro{color:var(--accent)}

/* Server switcher — first-class, because server context is the whole product. */
.srv{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 9px;margin:2px 0;border:0;border-radius:4px;
  background:transparent;color:var(--ink-2);text-align:left;cursor:pointer;
  transition:background var(--t-fast);
}
.srv:hover{background:rgba(255,255,255,.04)}
.srv.on{background:var(--raise-2);color:var(--ink)}
.srv span{display:grid;gap:1px;min-width:0}
.srv b{font-size:13px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv small{font-size:11px;color:var(--ink-4)}
.srv em{margin-left:auto;font-style:normal;font-size:9.5px;letter-spacing:.06em;color:var(--accent)}
.srv.on .mark{border:1px solid var(--rule);background:var(--cyan);color:#0A0A0A}

.app-main{min-width:0;display:flex;flex-direction:column}
.app-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:14px clamp(18px,3vw,34px);
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
.app-bar h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.025em}
.app-bar .crumb{color:var(--ink-4);font-size:13px}
.app-bar .spacer{margin-left:auto}
.app-body{padding:clamp(20px,3vw,36px) clamp(18px,3vw,34px) 80px;min-width:0}

/* Toolbar: search, filters, sort. Controls sit on the surface, not in a box. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.search{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:9px;
  height:40px;padding:0 13px;border-radius:4px;
  background:var(--raise-1);color:var(--ink-3);font-size:13.5px;
  border:1px solid var(--rule);
}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--ink);font-size:13.5px}
.search input::placeholder{color:var(--ink-4)}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:0;border-radius:4px;background:transparent;color:var(--ink-3);
  font-size:13px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--rule);
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
}
.chip:hover{color:var(--ink);background:rgba(255,255,255,.04);border-color:var(--rule-2)}
.chip.on{background:var(--cyan);color:#0A0A0A;box-shadow:none;font-weight:600}
.chip .n{opacity:.6;font-variant-numeric:tabular-nums}
.result-count{color:var(--ink-4);font-size:12.5px;font-variant-numeric:tabular-nums;margin-left:auto}

/* --------------------------------------------------------------------------
   Tables — the owner console reads as a tool
   -------------------------------------------------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;padding:0 12px 9px;font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
}
.table td{padding:11px 12px;border-top:1px solid var(--rule);vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.022)}
.cell-item{display:flex;align-items:center;gap:11px;min-width:0}
.cell-item img{width:46px;height:28px;object-fit:cover;border-radius:2px;flex:0 0 auto}
.cell-item span{font-weight:550;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table .num{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.cell-act{text-align:right;width:1%}
.tbtn{
  padding:5px 11px;border:0;border-radius:4px;background:transparent;
  color:var(--ink-4);font-size:12px;cursor:pointer;
  border:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast);
}
tr:hover .tbtn{color:var(--ink);border:1px solid var(--rule-2)}
.state{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12.5px}
.state:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-4)}
.state.live:before{background:var(--accent)}
.state.deal:before{background:var(--ink-2)}
.state.done:before{background:var(--success)}

/* Metric strip — hairline-separated, no boxes. */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border-radius:5px;overflow:hidden;margin-bottom:24px}
.metrics>div{background:var(--ground);padding:15px 17px}
.metrics dt{font-size:11.5px;color:var(--ink-4)}
.metrics dd{margin:5px 0 0;font-size:26px;font-weight:680;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.metrics dd.cy{color:var(--cyan)}
.metrics dd small{font-size:12px;font-weight:500;color:var(--ink-4);letter-spacing:0}

.panel{background:var(--raise-1);border-radius:5px;padding:20px 22px}
.panel h2{margin:0 0 4px;font-size:15px;font-weight:620;letter-spacing:-.02em}
.panel p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.55}
.section-title{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.section-title h2{margin:0;font-size:15px;font-weight:620;letter-spacing:-.02em}
.section-title :is(a,button){margin-left:auto;font-size:12.5px;color:var(--ink-3);
  -webkit-appearance:none;appearance:none;border:0;background:none;font-family:inherit;cursor:pointer;padding:0}
.section-title :is(a,button):hover{color:var(--cyan)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .app-rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .discord{grid-template-columns:1fr}
  .dc-rail{display:none}
  .hide-sm{display:none}
}

.rail-legal{display:flex;gap:14px;padding:18px 9px 0;margin-top:14px;border-top:1px solid var(--rule);font-size:12px}
.rail-legal a{color:var(--ink-4)}
.rail-legal a:hover{color:var(--ink-2)}

/* ==========================================================================
   Dashboard controls
   Settings look like settings: a labelled choice with its consequence spelled
   out, not a switch with a word next to it.
   ========================================================================== */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(22px,3vw,40px);margin-bottom:28px}

.choice-set{display:grid;gap:8px}
.pick-row{
  display:flex;align-items:flex-start;gap:13px;
  padding:14px 16px;border-radius:5px;cursor:pointer;
  background:var(--raise-1);border:1px solid var(--rule);
  transition:background var(--t-fast),box-shadow var(--t-fast);
}
.pick-row:hover{background:var(--raise-2)}
.pick-row input{accent-color:var(--accent);width:15px;height:15px;margin:2px 0 0;flex:0 0 auto}
.pick-row:has(input:checked){border:1px solid var(--accent)}
.pick-row span{display:grid;gap:3px;min-width:0}
.pick-row b{font-size:14px;font-weight:600;letter-spacing:-.015em}
.pick-row small{font-size:12.5px;color:var(--ink-3);line-height:1.55}

.save-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.save-row .meta{color:var(--ink-4)}

/* Channels the bot owns */
.chan-list{display:grid;gap:8px}
.chan{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:5px;
  background:var(--raise-1);border:1px solid var(--rule);
}
.chan>i{font-style:normal;font-size:15px;flex:0 0 auto}
.chan div{display:grid;gap:2px;min-width:0}
.chan b{font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.chan small{font-size:12px;color:var(--ink-3);line-height:1.5}
.chan-tag{margin-left:auto;flex:0 0 auto;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.chan-tag.pro{color:var(--accent)}

/* Safety: what cannot be turned off, stated plainly */
.panel.locked{border:1px solid var(--rule-2)}
.guarantees{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.guarantees li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-2)}
.guarantees li:before{content:"\2713";color:var(--success);font-size:12px;margin-top:1px}

.limit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.limit{background:var(--raise-1);border-radius:5px;padding:15px 16px}
.limit dt{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:11px}
.limit small{display:block;margin-top:10px;font-size:11.5px;color:var(--ink-4)}
.seg{display:flex;gap:0;border-radius:4px;overflow:hidden;border:1px solid var(--rule-2)}
.seg button{
  flex:1;padding:8px 4px;border:0;background:transparent;color:var(--ink-3);
  font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast);
}
.seg button+button{border-left:1px solid var(--rule)}
.seg button:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.seg button.on{background:var(--accent);color:#0A0A0A;font-weight:600}

.restrict{max-width:520px}
.restrict .field-row{margin-bottom:12px}
.state.am:before{background:var(--warning)}
.chip.danger{color:var(--danger);border:1px solid rgba(239,68,68,.4)}
.chip.danger:hover{background:rgba(239,68,68,.1);color:var(--danger)}

/* Visual studio */
.pro-banner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:26px;border-radius:5px;
  background:var(--raise-1);border:1px solid var(--accent-wash);
}
.pro-banner div{display:grid;gap:3px;min-width:0;flex:1}
.pro-banner b{font-size:14px;font-weight:620;letter-spacing:-.015em}
.pro-banner small{font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:62ch}
.studio{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,3vw,40px);align-items:start}
.studio-preview{position:sticky;top:96px;min-width:0}
.studio-preview .dc-feed{padding:14px}
.studio-preview .embed-shot{aspect-ratio:16/7}
.swatches{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-size:12.5px;color:var(--ink-2)}
.swatches span{margin-right:4px}
.sw{
  width:26px;height:26px;border:0;border-radius:4px;background:var(--sw);cursor:pointer;
  border:1px solid rgba(255,255,255,.15);
}
.sw.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 2px var(--ground),0 0 0 4px var(--accent)}

/* Plan */
.plan-state{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;
  padding:22px 24px;border-radius:5px;background:var(--raise-1);
}
.plan-state .h2{margin:10px 0 0}
.plan-state .lead{margin-top:10px;font-size:14px}
.plan-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.plan-state-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* Overview mini steps */
.mini-steps{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule);border-radius:5px;overflow:hidden}
.mini-steps li{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;background:var(--ground)}
.mini-steps>li>b{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--raise-3);color:var(--ink-2);font-size:10.5px;font-weight:700;
}
.mini-steps div{display:grid;gap:2px}
.mini-steps div b{font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.mini-steps small{font-size:12px;color:var(--ink-3)}

@media (max-width:1000px){
  .studio{grid-template-columns:1fr}
  .studio-preview{position:static}
}

/* The original nav carried a glyph beside each label. Kept, because it makes
   the seven views scannable at a glance without reading. */
.rail-link .rl{
  font-style:normal;width:16px;flex:0 0 auto;text-align:center;
  color:var(--ink-4);font-size:13px;
}
.rail-link.on .rl{color:var(--accent)}
.rail-back{display:block;padding:6px 9px 10px;font-size:12.5px;color:var(--ink-4)}
.rail-back:hover{color:var(--ink-2)}

/* Market setup at a glance: every prerequisite and its current state. */
.checklist{margin:0;display:grid;gap:0}
.checklist>div{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-top:1px solid var(--rule);
}
.checklist>div:first-child{border-top:0}
.checklist dt{font-size:13px;color:var(--ink-2)}
.checklist dd{margin:0 0 0 auto;font-size:13px;color:var(--ink);text-align:right}
.checklist dd.ok{color:var(--success)}
.checklist dd.off{color:var(--ink-4)}
.checklist code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2)}

/* Dashboard and Profile are separate places, not two lists in one sidebar. */
.area-tabs{display:flex;gap:0;margin:2px 0 16px;border-bottom:1px solid var(--rule)}
.area-tab{
  flex:1;padding:9px 4px;text-align:center;
  font-size:13px;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.area-tab:hover{color:var(--ink)}
.area-tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.rail-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--rule)}

/* What someone without a server sees where the dashboard would be. */
.gate{max-width:52ch;padding:26px 28px;border:1px solid var(--rule);border-radius:5px;background:var(--raise-1)}
.gate h2{margin:0 0 10px}
.gate p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.gate-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* The preview has no channel rail, so the surface must not reserve a column
   for one. Without this the feed is squeezed into the 198px rail track. */
.studio-preview .discord,.hiw-demo .discord{grid-template-columns:minmax(0,1fr)}

/* ==========================================================================
   Visual studio
   ========================================================================== */
.tpl-row{display:flex;gap:0;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.tpl{
  padding:9px 14px;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font:inherit;font-size:13px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.tpl:hover{color:var(--ink)}
.tpl.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

.st-block{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.st-block h2{display:flex;align-items:center;gap:11px;margin:0;font-size:15px;font-weight:620;letter-spacing:-.02em}
.st-block h2 b{
  width:20px;height:20px;display:grid;place-items:center;border-radius:2px;
  background:var(--raise-3);color:var(--ink-2);font-size:11px;font-weight:700;
}
.st-note{margin:8px 0 18px;font-size:13px;color:var(--ink-3)}
.st-hint{margin:7px 0 0;font-size:11.5px;color:var(--ink-4);line-height:1.5}
.st-hint code{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);background:var(--raise-2);padding:1px 5px;border-radius:2px}

.st-field{margin-bottom:16px}
.st-field>label{display:block;margin-bottom:7px;font-size:12.5px;font-weight:550;color:var(--ink-2)}
.st-field input[type=text],.st-field textarea,.opt-edit input[type=text],.st-block textarea{
  width:100%;padding:9px 11px;border-radius:2px;
  border:1px solid var(--rule);background:var(--raise-2);color:var(--ink);
  font:inherit;font-size:13.5px;resize:vertical;
}
.st-field input:focus,.st-field textarea:focus,.st-block textarea:focus{outline:0;border-color:var(--accent)}

.chan-edit{padding:14px 0;border-top:1px solid var(--rule)}
.chan-head{display:flex;align-items:center;gap:10px}
.chan-head b{font-size:13.5px;font-weight:600}
.chan-head .chan-tag{margin-left:auto}
.hash-field{display:flex;align-items:center;margin-top:9px;border:1px solid var(--rule);border-radius:2px;background:var(--raise-2)}
.hash-field span{padding:0 4px 0 11px;color:var(--ink-4);font-size:14px}
.hash-field input{flex:1;min-width:0;border:0;background:none;padding:9px 11px 9px 2px;color:var(--ink);font:inherit;font-size:13.5px}
.hash-field input:focus{outline:0}
.hash-field:focus-within{border-color:var(--accent)}

.swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hex{
  width:96px;padding:7px 9px;border-radius:2px;border:1px solid var(--rule);
  background:var(--raise-2);color:var(--ink);font-family:var(--f-mono);font-size:12.5px;
}
.st-toggles{display:grid;gap:10px;margin-top:6px}
.tg{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer}
.tg input{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto;margin:0}
.opt-edit{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--rule)}
.opt-edit .tg{align-items:flex-start}
.opt-edit i{font-style:normal;font-size:15px}
.opt-edit span{display:grid;gap:2px}
.opt-edit b{font-size:13.5px;font-weight:600;color:var(--ink)}
.opt-edit small{font-size:12px;color:var(--ink-3)}

.st-apply{padding-top:4px}
.st-apply b{font-size:14px;font-weight:620}
.st-apply p{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.st-apply code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2)}

/* Preview: the accent is a live variable so the embed reacts as you type. */
.studio-preview .embed{border-left-color:var(--embed-accent,var(--accent));position:relative}
.embed-banner{
  height:64px;margin:-13px -15px 12px;display:grid;place-items:center;
  background:var(--raise-3);color:var(--ink-4);font-size:11.5px;
}
.embed-banner.empty{border:1px dashed var(--rule-2);background:transparent}
.embed-thumb{
  position:absolute;top:13px;right:15px;
  width:38px;height:38px;border-radius:2px;display:grid;place-items:center;
  background:var(--raise-3);color:var(--ink-2);font-size:14px;font-weight:700;
}
.preview-note{margin-top:14px;max-width:44ch}

/* Listing cards on your own profile -----------------------------------------
   The prototype's card was a link to a listing. Here it is something you own,
   so it grows a row of actions, a finished state, and a place for a proof
   image that failed to load. Nothing else about the card changes. */
.listing-shot.empty,.listing-shot .proof-unavailable{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:var(--ink-3);font-size:12px;letter-spacing:.02em;background:var(--raise-1)}
.listing-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.listing-actions .tbtn{text-decoration:none}
.listing.is-finished{opacity:.62}
.listing.is-finished:hover{opacity:1}
.listing-status{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.listing-status.open{color:var(--success)}
.listing-status.reserved{color:var(--accent)}
.listing-status.paused{color:var(--warning)}
.empty-state{grid-column:1/-1}
/* Compact view lays the same cards out in rows instead of a grid. */
.listing-grid.list{grid-template-columns:minmax(0,1fr);gap:10px}
.listing-grid.list .listing{display:grid;grid-template-columns:180px minmax(0,1fr)}
.listing-grid.list .listing-shot{aspect-ratio:16/9}
.listing-grid.list .listing-note{display:none}
@media(max-width:640px){.listing-grid.list .listing{grid-template-columns:minmax(0,1fr)}}

/* Rail entries switch a panel rather than follow a link, so they are buttons.
   The prototype drew them as anchors, which meant nothing ever reset the
   browser's own button face and they came out light grey on a dark rail. */
button.rail-link,button.rail-back,.rail-account button{
  -webkit-appearance:none;appearance:none;width:100%;
  border:0;background:none;font:inherit;text-align:left;cursor:pointer}

/* Markup dashboard.js builds for itself ---------------------------------------
   The installation health card, the expiry controls and the listing toolbar
   are assembled in the script, in the previous design's vocabulary. Rather
   than rewrite that markup and risk the behaviour attached to it, the classes
   it uses are given the same treatment as their equivalents here. */
.install-health,.designer-card{
  margin-top:18px;padding:16px 18px;border:1px solid var(--rule);
  border-radius:var(--r-panel);background:var(--raise-1)}
.install-health header,.designer-card header{
  display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.install-health h3,.designer-card h3{margin:0;font-size:15px;font-weight:620;letter-spacing:-.02em}
.install-health p,.designer-card p{margin:0;color:var(--ink-3);font-size:13px}
.install-health .eyebrow,.designer-card .eyebrow{
  color:var(--ink-4);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* Any button the script makes without a class still has to look like one. */
.app-body button:not([class]),.install-health button,.listing-toolbar button:not([class]){
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border:1px solid var(--rule);border-radius:var(--r-control);
  background:transparent;color:var(--ink-3);font:inherit;font-size:13px;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.app-body button:not([class]):hover,.install-health button:hover{
  color:var(--ink);background:rgba(255,255,255,.04);border-color:var(--rule-2)}
html[data-theme="light"] .app-body button:not([class]):hover{background:rgba(9,9,11,.04)}

/* Narrow screens ------------------------------------------------------------
   Three things pushed the page wider than the viewport, which is the one
   layout fault a phone shows immediately. */

/* A signed-in name can be any length, and the header had no instruction to
   ever stop growing. */
.nav,.nav-right,.app-bar{min-width:0}
.acct-link{min-width:0;overflow:hidden}
.acct-link b{display:block;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A table of listings is wider than a phone and always will be, so it scrolls
   inside its own frame rather than taking the page with it. */
.table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table thead,.table tbody{display:table;width:100%;min-width:520px}

/* A grid item will not shrink below its own content unless it is told it may,
   so a wide table inside a column widens the column, and the column widens
   the page. This is the one that actually pushed the homepage past the
   viewport. */
.owner-grid>*,.two-col>*,.market-layout>*,.hero-grid>*,.install-body>*,
.plan-cols>*,.app-main,.app-body,.studio>*{min-width:0}

@media(max-width:860px){
  /* Two-column reading layouts read as one column here. */
  .owner-grid,.two-col,.market-layout,.hero-grid,.install-body,.plan-cols{
    grid-template-columns:minmax(0,1fr)}
  .acct-link b{max-width:9ch}
}

/* What a market surface says when it has nothing to show. */
.market-state{
  grid-column:1/-1;display:flex;flex-direction:column;gap:6px;
  padding:34px 22px;border:1px dashed var(--rule-2);border-radius:var(--r-panel);
  background:var(--raise-1);text-align:center}
.market-state b{font-size:15px;font-weight:620;letter-spacing:-.02em;color:var(--ink)}
.market-state span{font-size:13px;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   Profile: account
   The listings half of this page was finished; the account half did not exist,
   which is what made the page feel half-built. Same surfaces and spacing as
   the console so the two read as one product.
   -------------------------------------------------------------------------- */
.profile-panel[hidden]{display:none!important}
.account-head{
  display:flex;align-items:center;gap:16px;
  padding:0 0 22px;margin:0 0 24px;border-bottom:1px solid var(--rule)}
.account-avatar{
  flex:0 0 56px;width:56px;height:56px;border-radius:var(--r-control);overflow:hidden;
  display:grid;place-items:center;background:var(--accent);color:#0A0A0A;
  font-style:normal;font-size:22px;font-weight:700}
.account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account-head>div{flex:1;min-width:0}
.account-head h2{margin:0;font-size:22px;font-weight:650;letter-spacing:-.025em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-handle{margin:3px 0 0;font-size:13px;color:var(--ink-3)}

.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.account-card{
  padding:20px;border:1px solid var(--rule);border-radius:var(--r-panel);background:var(--raise-1)}
.account-card.wide{grid-column:1/-1}
.account-card.danger{margin-top:14px;border-color:var(--rule-2);background:transparent}
.account-card h3{margin:0;font-size:14px;font-weight:640;letter-spacing:-.015em}
.account-note{margin:6px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:60ch}
.account-card.danger .btn{margin-top:14px}

.account-facts{margin:16px 0 0;display:grid;gap:12px}
.account-facts div{display:grid;gap:3px}
.account-facts dt{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.account-facts dd{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-facts dd.with-copy{display:flex;align-items:center;gap:10px;white-space:normal}
.account-facts dd.with-copy span{font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{
  flex:0 0 auto;padding:3px 9px;border-radius:4px;border:1px solid var(--rule-2);
  background:transparent;color:var(--ink-3);font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.copy-btn:hover{color:var(--ink);border-color:var(--ink-4)}
.copy-btn.copied{color:#0A0A0A;background:var(--accent);border-color:var(--accent)}

.account-servers{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.account-servers li{display:flex;align-items:center;gap:11px;
  padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-control);background:var(--raise-2)}
.account-servers li i{
  flex:0 0 30px;width:30px;height:30px;border-radius:4px;display:grid;place-items:center;
  background:var(--raise-3);color:var(--ink-2);font-style:normal;font-size:12px;font-weight:700}
.account-servers li span{display:grid;gap:1px;min-width:0}
.account-servers li b{font-size:13.5px;font-weight:620;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-servers li small{font-size:11.5px;color:var(--ink-4)}
.account-servers li.account-empty{
  display:block;padding:16px;border:1px dashed var(--rule-2);border-radius:var(--r-control);
  color:var(--ink-3);font-size:12.5px;line-height:1.6;background:transparent}
.rail-signout{width:100%;text-align:left}

/* The header account chip that site.js builds ---------------------------------
   Pages that carry their own chip use .acct-link, which is styled. The one
   built for the rest had no rules at all, so it rendered as an initial jammed
   against a name — "JJett" — beside a plain "Sign out". It follows the same
   header conventions as everything else in .nav-right. */
.site-account{display:flex;align-items:center;gap:10px;min-width:0}
.site-account-link{display:inline-flex;align-items:center;gap:8px;min-width:0;
  text-decoration:none;color:var(--ink-2)}
.site-account-link:hover{color:var(--ink)}
.site-account-link>img,.site-account-link>span{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2,rgba(255,255,255,.06));color:var(--ink-2);
  font-size:12px;font-weight:600;object-fit:cover}
.site-account-link b{min-width:0;max-width:14ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:500;font-size:13px}
.site-signout{-webkit-appearance:none;appearance:none;
  height:30px;padding:0 11px;border:1px solid var(--rule);border-radius:var(--r-control);
  background:transparent;color:var(--ink-3);font:inherit;font-size:13px;cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast)}
.site-signout:hover{color:var(--ink);border-color:var(--rule-2)}
@media(max-width:860px){.site-account-link b{max-width:9ch}}