/* Styles for the brand Settings section (settings-brand.js). Every var() carries a fallback, and
   every class is prefixed sb- or st- so nothing here restyles another view. */

.sb .sb-back{margin:0 0 var(--s2,.5rem);padding:0 var(--s1,.25rem);min-height:2.75rem;text-align:left;display:inline-flex;align-items:center;box-shadow:none}
.sb .sb-meta{margin:var(--s2,.5rem) 0 0}
.sb .sb-msg{margin:var(--s3,.75rem) 0 0;color:var(--ok,#3e8e86)}
.sb-list .sb-row:first-child{border-top:0}

/* The guide itself: a readable column, not the raw file. */
.sb-doc{margin-top:var(--s3,.75rem);font-size:1rem;line-height:1.6;color:var(--fg,#111);overflow-wrap:anywhere;max-width:50rem}
/* Each ## heading of a guide folds: the summary is the heading, the first section starts open. */
.sb-sec{border-top:1px solid var(--line,#ddd)}
.sb-sec>summary{min-height:2.75rem;font-family:inherit;font-size:var(--fs-h4,1.05rem);font-weight:600;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--fg,#111)}
.sb-sec>summary:focus-visible{outline:2px solid var(--focus,var(--accent,#333));outline-offset:2px;border-radius:4px}
.sb-sec-body{padding:var(--s1,.25rem) 0 var(--s3,.75rem)}
.sb-sec-body>:first-child{margin-top:0}
.sb-doc h3{font-size:var(--fs-h4,1.05rem);line-height:1.3;margin:var(--s5,1.5rem) 0 var(--s2,.5rem)}
.sb-doc h4{font-size:var(--fs-sm,.9rem);line-height:1.3;margin:var(--s4,1rem) 0 var(--s1,.25rem);color:var(--fg-dim,#444)}
.sb-doc p{margin:0 0 var(--s3,.75rem)}
.sb-doc ul,.sb-doc ol{margin:0 0 var(--s3,.75rem);padding-left:1.25rem}
.sb-doc li{margin:0 0 var(--s1,.25rem)}
.sb-doc blockquote{margin:0 0 var(--s3,.75rem);padding:var(--s1,.25rem) var(--s3,.75rem);
  border-left:3px solid var(--accent,#333);color:var(--fg-dim,#444);background:var(--surface-2,#f7f7f7);border-radius:0 var(--r-sm,8px) var(--r-sm,8px) 0}
.sb-doc code{font-size:.9em;background:var(--surface-2,#f7f7f7);padding:0 .25rem;border-radius:4px}
.sb-doc a{color:var(--accent-ink,var(--accent,#333))}
.sb-lines{list-style:none;padding:var(--s2,.5rem) var(--s3,.75rem)!important;margin:0 0 var(--s3,.75rem)!important;
  background:var(--surface-2,#f7f7f7);border:1px solid var(--line,#ddd);border-radius:var(--r-sm,8px);font-size:var(--fs-sm,.875rem)}
.sb-lines li{padding:.2rem 0;border-bottom:1px dashed var(--line,#ddd)}
.sb-lines li:last-child{border-bottom:0}
.sb-tablewrap{overflow-x:auto;margin:0 0 var(--s3,.75rem)}
/* A table keeps its natural column widths and scrolls inside its own box; words never break mid-word. */
.sb-table{border-collapse:collapse;font-size:var(--fs-sm,.875rem);width:max-content;min-width:100%}
.sb-table th,.sb-table td{border:1px solid var(--line,#ddd);padding:.35rem .5rem;text-align:left;vertical-align:top;
  min-width:6rem;overflow-wrap:normal;word-break:normal;hyphens:none}
.sb-table th{background:var(--surface-2,#f7f7f7);font-weight:600}

/* Asking for a change. */
.sb-ask,.sb-edit,.sb-review,.sb-working{margin-top:var(--s3,.75rem);display:flex;flex-direction:column;gap:var(--s2,.5rem)}
.sb textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:1rem;line-height:1.5;
  padding:.6rem .75rem;border:1px solid var(--line-strong,#bbb);border-radius:var(--r-sm,8px);
  background:var(--surface,#fff);color:var(--fg,#111);resize:vertical}
.sb textarea:focus-visible{outline:2px solid var(--focus,var(--accent,#333));outline-offset:1px}
.sb-edit textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;min-height:20rem}
.sb-chips{display:flex;flex-wrap:wrap;gap:var(--s1,.25rem)}
.sb-chip{min-height:2.75rem;padding:.3rem .75rem;border-radius:var(--r-pill,99px);font-size:var(--fs-sm,.8125rem);
  background:var(--surface-2,#f7f7f7)}
.sb .st-quiet{background:none;border:0;color:var(--fg-dim,#555);text-decoration:underline;padding:0 var(--s2,.5rem);min-height:2.75rem}
.sb-actions{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:var(--s3,.75rem)}
.sb-actions button{min-height:2.75rem}

.sb-flags{border:1.5px solid var(--warn,#a9482b);border-radius:var(--r-sm,8px);padding:var(--s2,.5rem) var(--s3,.75rem);
  font-size:var(--fs-sm,.875rem)}
.sb-flags p{margin:var(--s1,.25rem) 0}
.sb-ack{display:flex;align-items:center;gap:var(--s2,.5rem);font-weight:600;min-height:2.75rem}
.sb-ack input{width:1.25rem;height:1.25rem;margin:0}

/* The diff: what it was, and what it is now. */
.sb-diff{border-top:1px solid var(--line,#ddd);padding-top:var(--s2,.5rem)}
.sb-change{border-left:3px solid var(--line-strong,#bbb);padding:var(--s1,.25rem) 0 var(--s1,.25rem) var(--s3,.75rem);
  margin:0 0 var(--s3,.75rem);display:flex;flex-direction:column;gap:var(--s2,.5rem)}
.sb-was,.sb-now{font-size:var(--fs-sm,.9rem);line-height:1.5;border-radius:var(--r-sm,8px);padding:var(--s2,.5rem) var(--s3,.75rem)}
.sb-was{background:var(--diff-del,#fbeae6);color:var(--fg-dim,#555);text-decoration:line-through;text-decoration-color:var(--warn,#a9482b)}
.sb-now{background:var(--diff-add,#e8f4f1);color:var(--fg,#111)}
.sb-was p,.sb-now p{margin:0 0 var(--s1,.25rem)}
.sb-tag{display:block;font-size:var(--fs-meta,.72rem);font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps,.08em);
  color:var(--fg-dim,#555);text-decoration:none}

/* Drafts rewrite offer and its progress. */
.sb-rewrite{margin-top:var(--s4,1rem);padding-top:var(--s3,.75rem);border-top:1px solid var(--line,#ddd)}
.sb-rewrite p{margin:0 0 var(--s2,.5rem)}
.sb-rewrite .st-actions{margin-top:0}
.sb-rewrite p:empty{display:none}

@media (max-width:480px){
  .sb-actions button{flex:1 1 100%}
  .sb-actions .st-quiet{flex:1 1 100%;padding:.5rem 0}
}
@media (prefers-reduced-motion:reduce){ .sb *{scroll-behavior:auto} }