/* Customer management prototype; deliberately scoped to the new screens. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }




.clients-view .page-head p { font-size: 13px; }
.clients-view .button, .client-drawer .button, .client-dialog .button { font-size: 12px; }
.clients-demo { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 18px; margin-bottom: 14px; border-left: 3px solid var(--red); background: #f0e7e2; }
.clients-demo b { font-size: 12px; margin-right: 14px; }
.clients-demo span { font-size: 12px; color: var(--muted); }
.clients-demo .text-action { flex-shrink: 0; font-size: 11px; }
.clients-view .slim-metrics span { font-size: 11px; }
.clients-view .slim-metrics article { padding: 14px 22px; }
.clients-view .slim-metrics b { font-size: 32px; }
.clients-toolbar { padding: 20px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; border-bottom: 1px solid var(--line); }
.clients-toolbar .segmented { flex-wrap: wrap; }
.clients-toolbar .segmented button { font-size: 11px; min-height: 38px; }
.clients-search-row { display: flex; flex: 1; justify-content: flex-end; gap: 10px; }
.clients-search-row .table-search { min-width: 180px; height: 38px; }
.clients-search-row input, .clients-search-row select { font-size: 12px; }
.clients-search-row select { padding: 0 28px 0 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); max-width: 170px; }
.clients-table-wrap { overflow-x: auto; }
.clients-table { width: 100%; border-collapse: collapse; text-align: left; }
.clients-table th { padding: 14px 20px; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.clients-table td { padding: 20px; border-top: 1px solid var(--line-soft); font-size: 12px; }
.clients-table tr:hover td { background: rgba(255,255,255,.025); }
.client-name { display: flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; text-align: left; min-width: 180px; }
.client-avatar { display: grid; place-items: center; width: 38px; height: 38px; background: var(--blush); color: var(--rose); font: italic 14px var(--serif); flex-shrink: 0; }
.client-name b { display: block; font-size: 13px; font-weight: 600; }
.client-name small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
.client-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 100px; }
.client-product-tag { padding: 5px 8px; font-size: 11px; background: var(--blush); color: var(--rose); }
.client-product-tag.is-paused { background: #ffffff08; color: var(--t3); }
.client-subtext { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 5px; }
.clients-view .status, .client-drawer .status { min-height: 26px; font-size: 9px; text-transform: none; letter-spacing: .01em; }
.client-row-open { border: 1px solid var(--line); background: rgba(255,255,255,.03); width: 32px; height: 32px; color: var(--rose); }
.clients-empty { text-align: center; padding: 50px 20px; }
.clients-empty h2 { font: 28px var(--serif); }
.clients-empty p { color: var(--muted); font-size: 13px; }
.clients-table-footer { display: flex; justify-content: space-between; padding: 17px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.client-drawer, .client-dialog { padding: 0; border: 0; color: var(--t1); background: var(--paper); box-shadow: 0 20px 80px #0003; }
.client-drawer::backdrop, .client-dialog::backdrop { background: rgba(28, 20, 20, .48); }
.client-drawer { position: fixed; margin: 0 0 0 auto; inset: 0; width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.client-dialog { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.client-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.client-dialog-head h2 { font: 500 30px/1.2 var(--serif); margin: 6px 0 0; overflow-wrap: anywhere; }
.client-dialog-head .close-button { flex-shrink: 0; }
.client-drawer .client-dialog-head { position: sticky; top: 0; z-index: 1; background: var(--paper); }
.client-profile-body { padding: 24px 28px; }
.client-profile-summary { display: flex; align-items: center; gap: 14px; }
.client-profile-summary .client-avatar { width: 52px; height: 52px; font-size: 19px; }
.client-profile-summary>div { flex: 1; min-width: 0; }
.client-profile-summary b { font-size: 14px; overflow-wrap: anywhere; }
.client-profile-summary small { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.client-callout { background: rgba(221,170,177,.06); border-left: 2px solid var(--rose); padding: 13px 15px; font-size: 12px; line-height: 1.6; margin: 18px 0; }
.client-callout--warning { background: rgba(142,0,18,.14); border-color: var(--rose); }
.client-callout p { margin: 4px 0 0; }
.client-section { margin-top: 28px; }
.client-section>header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.client-section h3 { margin: 0; font: 500 24px var(--serif); }
.client-section>p, .client-help { font-size: 12px; line-height: 1.6; color: var(--muted); }
.client-invite { padding: 18px; border: 1px solid var(--line); }
.client-invite>b { font-size: 13px; }
.client-invite p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 8px 0 14px; }
.client-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.client-inline-actions .text-action { font-size: 11px; padding: 10px 0; }
.client-entitlement { padding: 18px; margin-top: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.client-entitlement>header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.client-entitlement h4 { font: 500 23px var(--serif); margin: 4px 0; }
.client-entitlement p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 8px 0 14px; }
.client-entitlement .button { min-height: 36px; padding: 0 12px; font-size: 11px; }
.client-entitlement .eyebrow { font-size: 8px; }
.client-muted { color: var(--muted); }
.client-danger { color: var(--rose); border-color: #ddaab14d; }
.client-drawer-footer { padding: 18px 28px 24px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); }
.client-drawer-footer>span { max-width: 240px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.client-timeline { list-style: none; padding: 0; margin: 0; }
.client-timeline li { position: relative; margin-left: 5px; padding: 0 0 19px 18px; border-left: 1px solid var(--line); }
.client-timeline li::before { content: ''; position: absolute; left: -4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.client-timeline b { font-size: 12px; font-weight: 500; }
.client-timeline small { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; line-height: 1.6; }
.client-form { padding: 24px 28px; }
.client-form-grid { display: grid; gap: 18px; }
.client-field { display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
.client-field input, .client-field select, .client-field textarea { width: 100%; border: 1px solid var(--edge); min-height: 44px; padding: 10px 12px; background: rgba(255,255,255,.03); font-size: 13px; font-weight: 400; }
.client-field textarea { min-height: 78px; resize: vertical; }
.client-field small { font-size: 11px; color: var(--muted); font-weight: 400; line-height: 1.5; }
.client-form fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.client-form legend { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.client-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.5; }
.client-checks .client-check { border: 1px solid var(--line); padding: 14px; background: rgba(255,255,255,.03); }
.client-check input { accent-color: var(--rose); width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; }
.client-check small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.client-form-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.client-error { padding: 12px; background: rgba(142,0,18,.2); color: var(--rose); font-size: 12px; line-height: 1.6; margin: 0; }
.client-duplicate { border: 1px solid #e1c49e50; background: #e1c49e09; padding: 14px; font-size: 12px; line-height: 1.6; }
.client-duplicate button { display: block; margin-top: 9px; }
.client-mail-meta { display: grid; gap: 7px; font-size: 12px; line-height: 1.6; padding-bottom: 18px; overflow-wrap: anywhere; }
.client-mail { padding: 26px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.client-mail-brand { font: 18px/1.3 var(--serif); color: var(--rose); letter-spacing: .08em; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.client-mail h3 { font: 28px var(--serif); }
.client-mail p { font-size: 13px; line-height: 1.7; }
.client-mail-cta { display: inline-block; background: var(--red); color: white; padding: 13px 17px; margin: 10px 0; font-size: 12px; }
.client-mail small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
.client-mail-history { display: grid; gap: 8px; padding: 0; list-style: none; }
.client-mail-history button { width: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--line); padding: 12px; text-align: left; color: var(--rose); font-size: 12px; line-height: 1.5; }
.client-drawer :focus-visible, .client-dialog :focus-visible, .clients-view :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.client-drawer button:disabled, .client-dialog button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
body:has(.client-drawer[open], .client-dialog[open]) { overflow: hidden; }
@media(max-width:1180px) { .clients-table td, .clients-table th { padding: 17px 14px; } }
@media(max-width:650px) {
  .clients-demo { align-items: flex-start; }
  .clients-demo b, .clients-demo span { display: block; margin: 0 0 6px; }
  .clients-view .slim-metrics { grid-template-columns: 1fr 1fr; }
  .clients-toolbar { padding: 12px; }
  .clients-search-row { width: 100%; justify-content: stretch; }
  .clients-search-row .table-search { width: 100%; min-width: 0; flex: 1; }
  .clients-search-row select { max-width: 135px; }
  .clients-table { min-width: 680px; }
  .client-dialog-head, .client-form, .client-profile-body { padding: 20px; }
  .client-dialog-head h2 { font-size: 27px; }
  .client-profile-summary { flex-wrap: wrap; }
  .client-profile-summary .status { margin-left: 66px; }
  .client-drawer-footer { padding: 18px 20px; flex-wrap: wrap; }
  .client-entitlement>header { flex-wrap: wrap; }
  .client-mail { padding: 20px; }
  .client-form-footer .button { flex: 1; }
}

/* V6 component shapes and accessible targets. */
.clients-toolbar { padding:18px 20px; gap:12px; }
.clients-search-row { flex:0 1 auto; }
.clients-search-row .table-search { width:195px; min-height:44px; }
.clients-search-row select { min-height:44px; border-radius:999px; }
.clients-toolbar .segmented button { min-height:44px; }
.client-avatar { border-radius:50%; border:1px solid #ddaab12e; color:var(--rose); }
.client-product-tag { border-radius:999px; padding:4px 9px; border:1px solid #ddaab125; }
.client-row-open { width:44px; height:44px; border-radius:50%; background:transparent; }
.client-name { min-height:44px; }
.clients-table th { font-size:9px; letter-spacing:.06em; padding:14px 20px; }
.clients-table td { padding:18px 20px; }
.clients-table-footer { font-size:10px; flex-wrap:wrap; gap:8px; }
.client-drawer { border-left:1px solid var(--edge); box-shadow:-20px 0 80px #0008; }
.client-dialog { border:1px solid var(--edge); border-radius:var(--r2); box-shadow:0 20px 80px #0009; }
.client-drawer::backdrop,.client-dialog::backdrop { background:#080408a6; backdrop-filter:blur(5px); }
.client-callout,.client-invite,.client-entitlement,.client-mail,.client-duplicate { border-radius:var(--r1); }
.client-field input,.client-field select,.client-field textarea { border-radius:12px; }
.client-checks .client-check { border-radius:var(--r1); }
.client-check input { accent-color:var(--rose); width:18px; height:18px; }
.client-entitlement .button { min-height:44px; }
.client-mail-history button { border-radius:12px; color:var(--t2); }
.client-mail-cta { border-radius:999px; background:linear-gradient(135deg,#a3001a,#6a000f); }
.client-mail h3 { margin:22px 0 14px; }
.client-mail p { margin:12px 0; }
.client-dialog-head { background:var(--paper); }
.clients-empty p { margin:8px 0 18px; }
.client-timeline li::before { background:var(--rose); }
.client-danger { color:var(--error); }
@media(max-width:1250px) { .clients-search-row { flex:1; justify-content:flex-start; }.clients-search-row .table-search { flex:1; }.clients-table td,.clients-table th { padding-left:14px; padding-right:14px; }.clients-table { min-width:690px; } }
@media(max-width:720px) { .clients-toolbar { padding:12px; }.clients-view .slim-metrics article { padding:16px; }.clients-view .page-head p { font-size:12px; }.clients-search-row { flex-basis:100%; }.client-dialog-head h2 { font-size:27px; } }