* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-interface); line-height: var(--body-line-height); }
main { max-width: var(--content-width); margin: auto; padding: var(--space-large); }
header { margin-bottom: var(--space-large); }
h1, h2 { line-height: var(--heading-line-height); }
h1 { margin-top: 0; }
h2 { font-size: var(--heading-size); }
.eyebrow, .note, footer { color: var(--color-muted); }
section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-large); margin-bottom: var(--space-large); min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-width)), 1fr)); gap: var(--space-large); }
.cards section { margin-bottom: 0; }
.cards + section { margin-top: var(--space-large); }
nav { display: flex; gap: var(--space-small); flex-wrap: wrap; margin-bottom: var(--space-large); }
button { padding: var(--control-padding); margin-right: var(--space-small); background: var(--color-accent); color: var(--color-on-accent); border: var(--control-border) solid var(--color-accent); border-radius: var(--radius); font: inherit; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: wait; }
:focus-visible { outline: var(--focus-width) solid var(--color-accent); outline-offset: var(--focus-width); }
label { display: block; }
input { max-width: 100%; width: var(--input-width); display: block; padding: var(--space-small); margin: var(--space-small) 0 var(--space-medium); font: inherit; }
dl { margin-bottom: 0; }
dt { color: var(--color-muted); margin-top: var(--space-small); }
dd { margin: 0; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: var(--space-small); border-bottom: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
#message { min-height: var(--status-height); }

details { margin-bottom: var(--space-large); }
summary { cursor: pointer; font-weight: bold; padding: var(--space-medium); border: 1px solid var(--color-border); border-radius: var(--radius); }
details[open] > summary { margin-bottom: var(--space-medium); }
#customer-panel { margin-top: var(--space-medium); }

textarea, select { max-width: 100%; display: block; padding: var(--space-small); margin-bottom: var(--space-medium); font: inherit; }
textarea { width: 100%; }
input[type="checkbox"] { display: inline-block; width: auto; margin-right: var(--space-small); }

pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Guided Post to Facebook panel (D10). */
.guide-steps { list-style: none; padding: 0; margin: var(--space-medium) 0; }
.guide-step { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-medium); margin-bottom: var(--space-small); }
.guide-step h3 { margin: var(--space-small) 0; font-size: 1rem; }
.guide-step p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--space-small); }
.guide-badge { display: inline-block; font-size: 0.85rem; font-weight: bold; padding: 0.1rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); }
.guide-done { opacity: 0.75; }
.guide-done .guide-badge { background: var(--color-surface); color: var(--color-accent); border-color: var(--color-accent); }
.guide-now { border: var(--control-border) solid var(--color-accent); }
.guide-now .guide-badge { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.guide-later { color: var(--color-muted); }
.guide-strip { color: var(--color-muted); margin: 0 0 var(--space-medium); }
#guide-confirm { border: var(--control-border) solid var(--color-accent); }