/* Clinic Growth OS: Offer Studio. Scoped to .os; uses tokens from style.css. Own clone of the
   button/card/toggle/chip/empty patterns, same values as every other module (see packages.css). */
.os{color:var(--ink);font-variant-numeric:tabular-nums;max-width:100%;min-width:0}
.os h2{font:400 var(--h2)/1.25 Georgia,serif;margin:4px 0 6px}
.os h3{font-size:var(--h3);line-height:1.3;margin:0 0 8px}
.os h4{font-size:var(--h4);margin:16px 0 6px}
.os h2:focus,.os h3:focus{outline:none}
.os-muted,.os-hint{color:var(--text-secondary);font-size:13px;margin:4px 0}
.os-empty{color:var(--text-secondary);font-style:italic}
.os-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Compact, one-row header (was a stacked title/save/actions block that alone could eat close to half of a
   900px viewport): title, offer switcher, save status and actions all share one flex row and wrap only at
   narrow widths, so the three panes below get almost all of the vertical space instead. */
.os-head{margin:8px 0 14px}
.os-head-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.os-head-title{flex:1 1 220px;min-width:160px}
.os .os-title-input{font:400 var(--h2)/1.25 Georgia,serif;border:1px solid transparent;background:transparent;padding:2px 6px;border-radius:6px;min-height:0;width:100%}
.os .os-title-input:hover,.os .os-title-input:focus{border-color:var(--line);background:#fff}
.os-save{flex:0 0 auto}
.os-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}

/* The offer switcher: shown once, in the header, never inside a pane. Its dropdown panel is positioned
   off the document flow, so going from 0 to 1+ offers (the first autosave) changes only the summary's
   text, never the header's height, and no pane below is ever pushed down. */
.os-switcher{position:relative;flex:0 0 auto}
.os-switcher>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--ox);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap;min-height:var(--control-height);display:inline-flex;align-items:center}
.os-switcher>summary::-webkit-details-marker{display:none}
.os-switcher-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;min-width:240px;max-height:320px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.os-suggested{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--brass);margin-left:4px}
.os .os-btn,.os .os-toggle{min-height:var(--control-height);padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;margin:0}
.os .os-primary{background:var(--ox);border-color:var(--ox);color:#fff;font-weight:600}
.os .os-danger{background:#fff;border-color:var(--ox);color:var(--ox);font-weight:600}
.os .os-link{border:0;background:none;color:var(--ox);text-decoration:underline;padding:0 6px;min-height:var(--control-height);font-weight:600}
.os .os-btn:disabled{opacity:.5;cursor:not-allowed}
.os .os-toggle[aria-pressed="true"]{background:var(--ox);border-color:var(--ox);color:#fff;font-weight:600}
.os-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:#fff7e6;border:1px solid #e0c28a;border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:12px;color:var(--ink)}
.os-field{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;min-width:0}
.os-field label,.os-lbl{font-weight:600;font-size:14px}
.os input:not([type=range]),.os select,.os textarea{min-height:var(--control-height);border:1px solid #cfc5bd;border-radius:9px;padding:8px 10px;font:inherit;font-size:15px;background:#fff;color:var(--ink);max-width:100%;width:100%}
.os input[type=range]{width:100%;min-height:var(--control-height);accent-color:var(--ox)}
.os-save{font-size:13px;color:var(--text-secondary);margin:2px 0}
.os-save[data-state="dirty"],.os-save[data-state="error"]{color:var(--ox);font-weight:600}
.os-chiprow{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:10px 0 14px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.os-chiprow .os-toggle{flex:0 0 auto;white-space:nowrap}
.os-chip{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;letter-spacing:.3px;border:1px solid var(--line)}
.os-chip[data-p="protect"]{background:#f4e9ec;color:var(--ox);border-color:var(--ox)}
.os-chip[data-p="flex"]{background:#eef3ee;color:var(--good);border-color:var(--good)}
button.os-toggle.os-chip{padding:1px 8px;min-height:0;font-size:11px}

/* Three-pane layout, desktop 900px and wider. Each pane pins to the viewport and scrolls internally, so a
   long right-hand pane (the deal math) never leaves the left and center panes stranded above a blank
   canvas: all three stay usable without scrolling the page itself. */
.os-layout{display:grid;grid-template-columns:320px minmax(0,1fr) 360px;gap:20px;align-items:start}
.os-pane{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space);min-width:0}
.os-pane>summary{list-style:none;cursor:default;font-size:var(--h3);font-weight:700;line-height:1.3;margin:0 0 8px}
.os-pane>summary::-webkit-details-marker{display:none}
.os-panebody{min-width:0}
@media (min-width:900px){
  .os-pane{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}
}

.os-offerlist{list-style:none;padding:0;margin:0;display:grid;gap:2px}

.os-catlist{list-style:none;padding:0;margin:6px 0 14px;display:grid;gap:6px}
.os-catrow{min-width:0}
.os-catbtn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);min-height:var(--control-height);padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}
.os-catbtn:hover{border-color:var(--ox)}
.os-catbtn:disabled{opacity:.5;cursor:not-allowed}
.os-catname{overflow-wrap:anywhere}
.os-catmeta{display:flex;align-items:center;gap:8px;white-space:nowrap}
.os-lev{font-size:12px;color:var(--brass);font-weight:700;cursor:help;border-bottom:1px dotted var(--brass)}
.os-lev-legend{margin-top:-4px}
.os-catprice{font-weight:600}
.os-catrow-edit{background:#fff7e6;border:1px solid #e0c28a;border-radius:var(--radius-sm);padding:10px 12px}
.os-inline2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}

.os-lines{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
/* Tightened (was ~110px tall, only ~3 lines fit at 1440x900): smaller padding/gaps and a shorter control
   height scoped to bundle lines only (the global --control-height stays untouched everywhere else), so 5
   lines fit in the visible center pane without scrolling. */
.os-line{border:1px solid var(--line);border-left:4px solid var(--ox);border-radius:var(--radius-sm);padding:6px 8px;display:grid;grid-template-columns:1fr;gap:4px}
.os-line[data-gift="true"]{border-left-color:var(--brass);background:#fffaf0}
.os-minilbl{display:block;font-size:10px;color:var(--text-secondary);font-weight:600;margin-bottom:1px}
.os-line input,.os-line .os-btn{min-height:30px}
.os-stepper{display:flex;gap:3px}
.os-stepper .os-btn{width:30px;padding:0;font-size:15px}
.os-stepper input{text-align:center;min-width:0}
.os-line-hint{margin:0;font-size:11px}
/* Two rows, not one: row 1 is name + policy chip + remove; row 2 is qty, list $, cost $, gift toggle.
   The center pane runs as narrow as ~400px between the two fixed-width side panes, so a single row of
   five columns has nowhere near enough room without overflowing or crushing the name to nothing. This
   layout holds at 900px and stays correct all the way to 1920px, because it never depends on the row
   fitting in one line to begin with. */
.os-line-row1{display:flex;align-items:center;gap:6px;min-width:0}
.os-line-name{flex:1 1 auto;min-width:0}
.os-line-name input{min-width:0}
.os .os-line-remove{flex:0 0 auto;min-width:28px;width:28px;padding:0;font-size:16px;line-height:1;text-decoration:none;text-align:center}
.os-line-row2{display:flex;flex-wrap:wrap;align-items:end;gap:6px}
.os-line-qty{flex:0 0 auto}
.os-line-num{flex:0 1 84px;min-width:64px}
.os .os-line-gift{flex:0 0 auto;white-space:nowrap;font-size:13px}
.os-quickstarts{list-style:none;padding:0;margin:10px 0;display:grid;gap:10px}
.os-quickstarts li{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px}
.os-qs-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.os-quickstarts .os-tileval{font-size:16px}
.os-quickstarts .os-btn{margin-top:6px}

.os-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0}
.os-tile{background:var(--cream);border-radius:var(--radius-sm);padding:10px 12px;min-width:0}
.os-tilelbl{display:block;font-size:12px;color:var(--text-secondary)}
.os-tileval{display:block;font-size:20px;font-weight:700;overflow-wrap:anywhere}
.os-tilesub{display:block;font-size:12px;font-weight:400;color:var(--text-secondary);margin-top:1px}
.os-profit{font-size:14px;margin:6px 0 10px}
.os-guard{font-weight:600;margin:6px 0}
.os-guard[data-s="ok"]{color:var(--good)}
.os-guard[data-s="warn"]{color:var(--brass)}
.os-guard[data-s="block"]{color:var(--ox)}
.os-checks{list-style:none;padding:0;margin:4px 0 12px;display:grid;gap:4px}
.os-checks li{border-left:3px solid var(--brass);padding-left:6px;font-size:13px}
.os-checks li[data-level="block"]{border-left-color:var(--ox)}

.os-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0}
.os-pv{background:var(--cream);border-radius:var(--radius-sm);padding:12px}
.os-pv-name{font-family:Georgia,serif;font-size:18px;font-weight:400;margin:0 0 6px}
.os-pv-price{font-size:24px;font-weight:700;margin:0 0 8px}
.os-pv-strike{font-size:15px;font-weight:400;color:var(--text-secondary);margin-left:6px}
.os-pv-save{display:inline-block;background:var(--good);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;margin-left:6px}
.os-pv-list{margin:0;padding-left:18px;font-size:14px}
.os-pv-gift{color:var(--brass);font-weight:600}
.os-pv-scarcity{font-weight:600;margin:10px 0 0;font-size:13px}
.os-scroll{max-width:100%;margin:8px 0;position:relative;overflow-x:auto}
.os-table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
.os-table th,.os-table td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.os-table td{text-align:right}

.os-give{list-style:none;padding:0;margin:6px 0 14px;display:grid;gap:8px}
.os-give li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:6px}
.os-gbb{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0 14px}
.os-gbbcard{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;min-width:0}
.os-gbbcard[data-chosen="true"]{border-color:var(--ox);background:#f8eef0}
.os-gbbcard-muted{border-style:dashed;color:var(--text-secondary)}
.os-gbbcard-muted h4{color:var(--text-secondary)}
.os-badge{display:inline-block;background:var(--ox);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px}
.os-mini{margin:4px 0;padding-left:16px;font-size:13px}

.os-upsell{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.os-upsell>summary{cursor:pointer;font-weight:700;font-size:var(--h4);list-style:none}
.os-upsell>summary::-webkit-details-marker{display:none}
.os-upsell>summary::before{content:"\25b8 ";display:inline-block}
.os-upsell[open]>summary::before{content:"\25be "}
.os-upresult{background:var(--cream);border-radius:var(--radius-sm);padding:10px;margin:8px 0}
.os-upresult[data-healthy="true"]{border-left:4px solid var(--good)}
.os-upresult[data-healthy="false"]{border-left:4px solid var(--brass)}
.os-upresult p{font-size:15px;margin:4px 0}
.os-upresult strong{font-size:17px}

.os-sheetbar-wrap{display:none}

@media (max-width:899px){
  .os-pane{position:static;max-height:none;overflow:visible}
  /* A real one-at-a-time accordion: only the pane the clinic chose keeps its body in the DOM's visible
     flow. data-mobile-open is JS-driven (offer-studio.js), not the browser's own <details> open state,
     which the desktop rule above already needs permanently true. */
  .os-pane[data-mobile-open="false"] .os-panebody{display:none}
  .os-layout{grid-template-columns:minmax(0,1fr);padding-bottom:88px}
  .os-split{grid-template-columns:1fr}
  .os-pane>summary{cursor:pointer;padding:2px 0}
  .os-pane>summary::before{content:"\25b8 ";display:inline-block}
  .os-pane[data-mobile-open="true"]>summary::before{content:"\25be "}
  .os-head-row{align-items:stretch}
  .os-head-title{flex:1 1 100%}
  .os-sheetbar-wrap{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
  /* The bar used to be a single "Save $N" button, which reads as a Save action even though tapping it
     only opens the price/margin panel. It is now two controls: the tap target (still opens the panel,
     copy changed to "They save") and a real Save button beside it. */
  .os-sheetbar-row{display:flex;gap:1px;align-items:stretch;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
  .os .os-sheetbar{display:block;flex:1 1 auto;min-height:52px;border:0;background:var(--ox);color:#fff;font:inherit;font-weight:600;font-size:13px;border-radius:12px 0 0 0;padding:8px 16px;text-align:left}
  .os .os-sheetbar:only-child{border-radius:12px 12px 0 0}
  .os .os-sheetbar-save{flex:0 0 auto;min-width:84px;min-height:52px;border:0;background:var(--brass);color:#fff;font:inherit;font-weight:700;font-size:13px;border-radius:0 12px 0 0;padding:8px 16px}
}