/*
 * Shared component states and variants (charte §10, §17, §25).  Consumes tokens.css only.
 * Loaded after interface.css/ui-scale.css so states apply to every screen.  Each interactive state has a
 * class twin (.is-hover, .is-active, .is-focus) used by the living library (?page=app&screen=design-system)
 * to display the state permanently: the library and the product share the same rule.
 */

/* ---- Buttons: hover, pressed, disabled, loading, danger, dark premium ---- */
.platform .pbtn{transition:filter var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.platform .pbtn:not(.outline):not(.soft):not(.glass):hover,.platform .pbtn.is-hover:not(.outline):not(.soft):not(.glass){filter:brightness(1.08);box-shadow:var(--shadow-card-hover)}
.platform .pbtn:is(.outline,.soft):hover,.platform .pbtn:is(.outline,.soft).is-hover{background:var(--color-brand-tint)}
.platform .pbtn:active,.platform .pbtn.is-active{transform:translateY(1px);filter:brightness(.96)}
.platform .is-focus{outline:3px solid var(--color-focus)!important;outline-offset:2px!important;box-shadow:var(--shadow-focus-halo)!important}
.platform .pbtn:is(:disabled,[aria-disabled=true]),.platform .pbtn:is(:disabled,[aria-disabled=true]):hover{opacity:.5;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.platform .pbtn[aria-busy=true]{position:relative;color:transparent!important;pointer-events:none}
.platform .pbtn[aria-busy=true]::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:var(--radius-round);border:2px solid currentColor;border-color:var(--color-white) var(--color-white) transparent transparent;animation:pspin .8s linear infinite}
.platform .pbtn.outline[aria-busy=true]::after,.platform .pbtn.soft[aria-busy=true]::after{border-color:var(--color-brand) var(--color-brand) transparent transparent}
.platform .pbtn.danger{background:var(--color-danger-text);border-color:var(--color-danger-text);color:var(--color-white)}
.platform .pbtn.outline.danger{background:transparent;color:var(--color-danger-text);border-color:var(--color-danger-text)}
.platform .pbtn.outline.danger:hover,.platform .pbtn.outline.danger.is-hover{background:var(--color-danger-bg)}
.platform .pbtn.dark{background:var(--gradient-premium-dark);border-color:var(--color-navy-850);color:var(--color-white)}
.platform .pbtn.success{background:var(--color-success-text);border-color:var(--color-success-text);color:var(--color-white)}
.platform .picon-button{display:inline-grid;place-items:center;width:var(--target-min);height:var(--target-min);padding:0;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-white);color:var(--color-ink)}
.platform .picon-button:hover,.platform .picon-button.is-hover{background:var(--color-brand-soft);color:var(--color-brand)}
@keyframes pspin{to{transform:rotate(360deg)}}

/* ---- Field states ---- */
.platform .pfield :is(input,select,textarea)[aria-invalid=true]{border-color:var(--color-danger-text)!important}
.platform .pfield .pfield-error{color:var(--color-danger-text);font-weight:var(--font-weight-semibold)}
.platform .pfield :is(input,select,textarea):disabled{background:var(--color-surface);color:var(--color-muted);cursor:not-allowed}
.platform .prequired-legend{font-size:var(--font-size-xs);color:var(--color-text-muted-aa)}

/* ---- Alerts (inline feedback; toasts are never the only proof of a payment) ---- */
.platform .palert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--color-line);border-inline-start-width:4px;border-radius:var(--radius-md);background:var(--color-white);color:var(--color-ink);margin-bottom:var(--space-4)}
.platform .palert>svg{flex:0 0 auto;margin-top:2px}
.platform .palert strong{display:block;margin-bottom:var(--space-1)}
.platform .palert p{margin:0;color:inherit}
.platform .palert.info{border-color:var(--color-info-border);border-inline-start-color:var(--color-info-500);background:var(--color-info-bg);color:var(--color-info-text)}
.platform .palert.success{border-color:var(--color-success-border);border-inline-start-color:var(--color-success-500);background:var(--color-success-bg);color:var(--color-success-text)}
.platform .palert.warning{border-color:var(--color-warning-border);border-inline-start-color:var(--color-warning-500);background:var(--color-warning-bg);color:var(--color-warning-text)}
.platform .palert.danger{border-color:var(--color-danger-border);border-inline-start-color:var(--color-danger-500);background:var(--color-danger-bg);color:var(--color-danger-text)}

/* ---- Accordion ---- */
.platform .paccordion{border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-white);overflow:hidden}
.platform .paccordion>details+details{border-top:1px solid var(--color-line)}
.platform .paccordion summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:var(--target-min);padding:var(--space-3) var(--space-4);cursor:pointer;font-weight:var(--font-weight-semibold);list-style:none}
.platform .paccordion summary::-webkit-details-marker{display:none}
.platform .paccordion summary::after{content:'+';font-size:var(--font-size-xl);color:var(--color-brand)}
.platform .paccordion details[open]>summary::after{content:'−'}
.platform .paccordion details>:not(summary){padding:0 var(--space-4) var(--space-4)}

/* ---- System states: loading skeleton, error, success (charte §25) ---- */
.platform .pskeleton{display:grid;gap:var(--space-3)}
.platform .pskeleton>span{display:block;height:14px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--color-line-soft) 0,var(--color-brand-soft) 50%,var(--color-line-soft) 100%);background-size:200% 100%;animation:pshimmer 1.4s ease-in-out infinite}
.platform .pskeleton>span.media{height:120px;border-radius:var(--radius-md)}
.platform .pskeleton>span.title{height:20px;width:70%}
.platform .pskeleton>span.short{width:40%}
.platform .pskeleton-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-5)}
.platform .pskeleton-cards>.pskeleton{padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-white)}
@keyframes pshimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.platform .perror-state{text-align:center;padding:var(--space-10) var(--space-5);border:1px dashed var(--color-danger-border);border-radius:var(--radius-md);background:var(--color-white)}
.platform .perror-state h2{color:var(--color-danger-text)}
.platform .perror-state .pbtn{margin-top:var(--space-4)}
.platform .empty-state .empty-icon{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:var(--space-3);border-radius:var(--radius-round);background:var(--color-brand-soft);color:var(--color-brand)}

/* ---- Pricing (charte §19): period, limits, renewal, plan state ---- */
.platform .pricing-full .pplan .pplan-period{display:block;margin-top:var(--space-1);font-size:var(--font-size-xs);color:var(--color-text-muted-aa)}
.platform .pricing-full .pplan .pplan-limits{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.platform .pricing-full .pplan .pplan-limits li{color:var(--color-text-muted-aa)}
.platform .pricing-full .pplan .pplan-badge{display:inline-block;margin-bottom:var(--space-2);padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand-deep);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.06em}
.platform .pricing-full .pplan .pplan-state{display:inline-flex;align-items:center;min-height:42px;font-weight:var(--font-weight-semibold);color:var(--color-success-text)}
.platform .pricing-rules{margin-top:var(--space-3);color:var(--color-text-muted-aa);font-size:var(--font-size-sm)}

@media (prefers-reduced-motion:reduce){
 .platform .pbtn{transition:none}
 .platform .pskeleton>span{animation:none}
 .platform .pbtn[aria-busy=true]::after{animation-duration:2.4s}
}
.platform .pricing-full .pplan:is(.pro,.max)>p,.platform .pricing-full .pplan:is(.pro,.max) :is(.pplan-period,.pplan-limits li){color:var(--color-on-dark)}
.platform .pricing-full .pplan:is(.pro,.max) .pplan-limits{border-top-color:#ffffff40}
.platform .pricing-full .pplan:is(.pro,.max) .pplan-state{color:var(--color-white)}
.platform .perror-state h1{font-size:var(--font-size-3xl);color:var(--color-ink)}
.platform .perror-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}
.platform .perror-actions .pbtn{margin-top:0}
/* Scroll containers are positioned so visually-hidden (.sr-only) cells stay clipped inside them on mobile. */
.platform :is(.table-scroll,.ptable-wrap,.ds-table-wrap,.ds-matrix-wrap,.ds-sample){position:relative}