/*
 * Interface vignettes (inc/vignettes.php). Ported from Claude Design "Vignette" (turn 3) inline styles.
 * Cards are white on any surface; .cw-v--on adds the blue live dot. Size them with the parent's width.
 */
.cw-v { width: 100%; box-sizing: border-box; background: #fff; border-radius: 16px; border: 1px solid rgba(5,7,13,.07); box-shadow: 0 1px 2px rgba(5,7,13,.06), 0 30px 60px -22px rgba(5,7,13,.38); font: 400 13px/1.4 var(--cw-sans, Switzer, sans-serif); color: #05070D; overflow: hidden; text-align: left; letter-spacing: 0; }
.cw-v * { box-sizing: border-box; }
.cw-v b { font-weight: 600; }
.cw-v small { display: block; color: #8A8C93; font-size: 11.5px; }
.cw-v-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #EEECE7; }
.cw-v-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #C9C7C0; transition: background-color .4s, box-shadow .4s; }
.cw-v--on .cw-v-dot { background: #2F7FD4; box-shadow: 0 0 0 3px rgba(47,127,212,.2); }
.cw-v-head b { font-size: 12.5px; white-space: nowrap; }
.cw-v-head span { color: #8A8C93; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-v-head em { margin-left: auto; font: 500 9.5px/1 var(--cw-sans, Switzer, sans-serif); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #8A8C93; border: 1px solid #E6E4DE; border-radius: 999px; padding: 4px 7px; flex: none; }

/* shared bits */
.cw-v-who { display: flex; align-items: center; gap: 10px; }
.cw-v-who > div { min-width: 0; } .cw-v-who > div b { display: block; font-size: 13.5px; }
.cw-v-av { width: 34px; height: 34px; border-radius: 50%; background: #EDEBE5; display: grid; place-items: center; font: 600 12px var(--cw-sans, Switzer, sans-serif); color: #3A3D45; flex: none; }
.cw-v-av--ink { background: #05070D; }
.cw-v-pill { margin-left: auto; background: #E8F1FB; color: #1F5FA8; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.cw-v-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cw-v-bar { display: block; height: 6px; border-radius: 6px; background: #F0EEE9; overflow: hidden; }
.cw-v-bar i { display: block; height: 100%; border-radius: 6px; background: #C9CED8; }
.cw-v-bar--b i { background: #2F7FD4; } .cw-v-bar--g i { background: #9AA3B2; } .cw-v-bar--k i { background: #05070D; }

/* enquiry */
.cw-v-enq { padding: 14px 16px 16px; display: grid; gap: 12px; }
.cw-v-topic { font: 500 15px/1.3 var(--cw-display, 'General Sans', sans-serif); letter-spacing: -.01em; }
.cw-v-enq p { margin: 4px 0 0; color: #4A4D55; font-size: 12.5px; line-height: 1.45; }
.cw-v-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw-v-kv > div { background: #F6F5F2; border-radius: 10px; padding: 8px 10px; } .cw-v-kv b { font-size: 12.5px; }

/* crm */
.cw-v { container-type: inline-size; }
.cw-v-crm { padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: #FAFAF8; align-items: start; }
.cw-v-crm > div { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 6px; border-radius: 11px; background: #F2F1EC; }
.cw-v-colh { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; color: #6B6E76; font-weight: 600; padding: 2px 4px 4px; }
.cw-v-colh span:last-child { min-width: 18px; padding: 2px 6px; border-radius: 999px; background: #fff; color: #3A3D45; text-align: center; font-size: 10.5px; line-height: 1.2; }
.cw-v-deal { background: #fff; border-radius: 8px; padding: 8px 9px; border: 1px solid #E8E6E0; min-width: 0; }
.cw-v-deal b { display: block; font-size: 11.5px; line-height: 1.3; } .cw-v-deal small { font-size: 11px; color: #6B6E76; margin-top: 3px; }
.cw-v-deal i { display: block; margin-top: 6px; font-size: 10.5px; color: #2F7FD4; font-weight: 600; font-style: normal; }
.cw-v-deal--hl { border-color: #2F7FD4; box-shadow: inset 0 0 0 1px #2F7FD4; }
/* Narrow cards show two lanes, so nothing is squeezed */
@container (max-width: 340px) { .cw-v-crm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cw-v-crm > div:nth-child(3) { display: none; } }

/* follow-up */
.cw-v-list { padding: 4px 14px 8px; }
.cw-v-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F0EEE9; }
.cw-v-step:last-child { border-bottom: 0; }
.cw-v-step > div { min-width: 0; flex: 1; } .cw-v-step b { display: block; font-size: 12.5px; line-height: 1.35; }
.cw-v-check { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #fff; border: 1.5px solid #D5D3CC; }
.cw-v-step--done .cw-v-check { background: #2F7FD4; border-color: #2F7FD4; }
.cw-v-ch { font-size: 10.5px; font-weight: 600; color: #6B6E76; background: #F3F2EE; border-radius: 6px; padding: 3px 7px; flex: none; }

/* call */
.cw-v-call { padding: 14px; display: grid; gap: 10px; }
.cw-v-call .cw-v-who b { font-size: 13px; }
.cw-v-wave { margin-left: auto; display: flex; gap: 2px; align-items: center; height: 22px; flex: none; }
.cw-v-wave span { width: 2px; border-radius: 2px; background: #2F7FD4; }
.cw-v--on .cw-v-wave span { animation: cw-v-wave 1.1s ease-in-out infinite alternate; }
.cw-v-wave span:nth-child(odd) { animation-delay: .25s; } .cw-v-wave span:nth-child(3n) { animation-delay: .5s; }
@keyframes cw-v-wave { to { transform: scaleY(.45); } }
.cw-v-bub { background: #F3F2EE; border-radius: 12px 12px 12px 4px; padding: 8px 10px; font-size: 12px; line-height: 1.42; max-width: 88%; }
.cw-v-bub--us { justify-self: end; background: #E8F1FB; color: #0E2F55; border-radius: 12px 12px 4px 12px; }
.cw-v-booked { display: flex; align-items: center; gap: 8px; border-top: 1px solid #EEECE7; padding-top: 10px; font-size: 12px; }

/* invoice */
.cw-v-inv { padding: 16px; display: grid; gap: 12px; }
.cw-v-inv .cw-v-row b { font-size: 13px; }
.cw-v-paid { background: #2F7FD4; color: #fff; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 999px; display: flex; gap: 5px; align-items: center; }
.cw-v-item { font-size: 12.5px; color: #4A4D55; padding: 10px 0; border-block: 1px solid #EEECE7; }
.cw-v-row--base { align-items: baseline; } .cw-v-row--base small { font-size: 12px; }
.cw-v-amt { font: 500 28px/1 var(--cw-display, 'General Sans', sans-serif); letter-spacing: -.02em; }

/* website */
.cw-v-web { background: #F6F5F2; padding: 10px; }
.cw-v-browser { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #ECEAE4; }
.cw-v-chrome { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #EFEDE8; }
.cw-v-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #DCDAD4; }
.cw-v-chrome span { margin-left: 8px; flex: 1; background: #F4F3EF; border-radius: 6px; font-size: 11px; color: #6B6E76; padding: 4px 8px; }
.cw-v-site { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.cw-v-site > div > small { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.cw-v-h { font: 500 20px/1.1 var(--cw-display, 'General Sans', sans-serif); letter-spacing: -.02em; margin-top: 6px; }
.cw-v-site p { font-size: 11.5px; color: #6B6E76; margin: 6px 0 0; }
.cw-v-btns { display: flex; gap: 10px; margin-top: 12px; align-items: center; font-size: 11px; }
.cw-v-btns span { background: #2F7FD4; color: #fff; font-weight: 600; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.cw-v-form { background: #F6F5F2; border-radius: 10px; padding: 10px; display: grid; gap: 6px; font-size: 11px; }
.cw-v-form > div { background: #fff; border: 1px solid #E8E6E0; border-radius: 6px; padding: 5px 8px; } .cw-v-form small { display: inline; font-size: 11px; }
.cw-v-form .cw-v-focus { border-color: #2F7FD4; }
.cw-v-form > span { background: #05070D; color: #fff; border-radius: 6px; padding: 6px 8px; font-weight: 600; text-align: center; }

/* software */
.cw-v-jobs { padding: 10px 12px 8px; }
.cw-v-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.cw-v-tabs span { font-size: 11px; font-weight: 600; background: #F3F2EE; color: #4A4D55; border-radius: 999px; padding: 4px 9px; }
.cw-v-tabs span.cw-on { background: #05070D; color: #fff; }
.cw-v-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid #F0EEE9; }
.cw-v-job small { font-size: 11px; font-weight: 600; }
.cw-v-job b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-v-job .cw-v-bar { height: 4px; margin-top: 6px; background: #EFEDE8; }
.cw-v-st { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cw-v-st--b { background: #E8F1FB; color: #1F5FA8; } .cw-v-st--g { background: #F3F2EE; color: #4A4D55; } .cw-v-st--k { background: #05070D; color: #fff; }

/* automation */
.cw-v-auto { padding: 14px 14px 4px; }
.cw-v-auto > .cw-v-row { align-items: center; margin-bottom: 14px; } .cw-v-auto > .cw-v-row b { font-size: 13px; }
.cw-v-toggle { width: 30px; height: 18px; border-radius: 999px; background: #2F7FD4; position: relative; flex: none; }
.cw-v-toggle i { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.cw-v-rule { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 12px; }
.cw-v-rule::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: #E4E2DC; }
.cw-v-rule:last-child::before { display: none; }
.cw-v-rule > span { width: 22px; height: 22px; border-radius: 7px; background: #F3F2EE; color: #4A4D55; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.cw-v-rule--first > span { background: #2F7FD4; color: #fff; }
.cw-v-rule small { font-size: 11px; } .cw-v-rule b { display: block; font-size: 12.5px; line-height: 1.35; }

/* marketing */
.cw-v-mkt { padding: 14px; display: grid; gap: 11px; }
.cw-v-big { display: flex; align-items: baseline; gap: 8px; } .cw-v-big b { font: 500 30px/1 var(--cw-display, 'General Sans', sans-serif); letter-spacing: -.02em; } .cw-v-big small { display: inline; font-size: 12px; }
.cw-v-src { display: grid; gap: 4px; } .cw-v-src > div { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; }

/* hosting */
.cw-v-host { padding: 14px; display: grid; gap: 10px; }
.cw-v-sys { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cw-v-sys i { width: 7px; height: 7px; border-radius: 50%; background: #2F7FD4; flex: none; }
.cw-v-sys span { margin-left: auto; color: #6B6E76; font-size: 12px; }
.cw-v-up { margin-top: 4px; } .cw-v-up > div:first-child { display: flex; justify-content: space-between; font-size: 11px; color: #8A8C93; margin-bottom: 5px; }
.cw-v-days { display: flex; gap: 2px; } .cw-v-days i { flex: 1; height: 18px; border-radius: 2px; background: #2F7FD4; } .cw-v-days i.cw-dip { background: #B9D3F0; }
.cw-v-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #6B6E76; border-top: 1px solid #EEECE7; padding-top: 10px; }

/* product screens (cw-products) */
.cw-v-prows { padding: 4px 16px 10px; }
.cw-v-prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F0EEE9; font-size: 13px; }
.cw-v-prow:last-child { border-bottom: 0; }
.cw-v-prow .cw-v-pill { margin-left: 0; }
.cw-v-prow--meter { display: grid; gap: 8px; }

/* Guides covers (cw_guide_cover) */
.cw-cover { position: relative; aspect-ratio: 16 / 11; border-radius: var(--cw-r-m, 20px); overflow: hidden; isolation: isolate; }
.cw-cover--night { background: radial-gradient(80% 70% at 75% 10%, rgba(47,127,212,.4), transparent 70%), #05070D; }
.cw-cover--light { background: linear-gradient(160deg, #E6ECF5, #EFEEE9 65%); }
/* The card sits inside the cover with even side and top padding. A tall card runs off the bottom edge only, like a screen peeking up. */
.cw-cover-v { position: absolute; left: 9%; right: 9%; top: 11%; zoom: .86; transition: transform 1.2s var(--cw-ease, ease); }
.cw-post:hover .cw-cover-v { transform: translateY(-6px); }
.cw-cover--wide { aspect-ratio: 21 / 8; margin-bottom: clamp(40px, 5vw, 72px); }
.cw-cover--wide .cw-cover-v { left: auto; right: 8%; width: min(420px, 46%); top: 16%; }