/* WP-04 shared components. Visual values must resolve through semantic tokens. */
body[data-member-design-system="v1"]{font-family:var(--ph-font-body);background:var(--ph-color-canvas);color:var(--ph-color-text)}
body[data-member-design-system="v1"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--ph-focus-width) solid var(--ph-color-focus);outline-offset:var(--ph-focus-offset);box-shadow:var(--ph-shadow-focus)}
.ph-sr-only{position:absolute;width:var(--ph-border-width);height:var(--ph-border-width);padding:var(--ph-space-0);margin:calc(var(--ph-border-width) * -1);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:var(--ph-space-0)}
.ph-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--ph-space-2);min-height:var(--ph-size-touch-min);max-width:100%;padding:var(--ph-space-2) var(--ph-space-4);border:var(--ph-border-width) var(--ph-border-style) transparent;border-radius:var(--ph-radius-pill);background:var(--ph-color-accent);color:var(--ph-color-on-accent);font-weight:var(--ph-font-weight-bold);line-height:var(--ph-line-tight);text-align:center;white-space:normal;transition:background var(--ph-motion-standard) var(--ph-motion-ease),border-color var(--ph-motion-standard) var(--ph-motion-ease),transform var(--ph-motion-fast) var(--ph-motion-ease)}
.ph-action:hover,.ph-action:focus-visible{background:var(--ph-color-accent-emphasis)}
.ph-action:active,.ph-action[aria-pressed="true"]{transform:translateY(var(--ph-border-width));border-color:var(--ph-color-success)}
.ph-action--secondary{border-color:var(--ph-color-border-strong);background:var(--ph-color-surface-raised);color:var(--ph-color-text)}
.ph-action--error,.ph-action--danger{background:var(--ph-color-danger)}
.ph-action--quiet{border-color:transparent;background:transparent;color:var(--ph-color-accent-emphasis)}
.ph-action--icon{width:var(--ph-size-touch-min);padding:var(--ph-space-2);border-radius:var(--ph-radius-pill)}
.ph-action[disabled],.ph-action[aria-disabled="true"],.ph-action[data-component-state="disabled"]{cursor:not-allowed;opacity:var(--ph-opacity-disabled);pointer-events:none}
.ph-action[aria-busy="true"],.ph-mutation-control[data-mutation-state="pending"] .ph-action{cursor:wait}
.ph-link,.ph-link-button{min-height:var(--ph-size-touch-min);display:inline-flex;align-items:center;padding:var(--ph-space-2);border:var(--ph-space-0);background:transparent;color:var(--ph-color-accent-emphasis);font:inherit;font-weight:var(--ph-font-weight-medium);text-decoration:underline;text-decoration-thickness:var(--ph-border-width);text-underline-offset:var(--ph-space-1)}
.ph-link--current{color:var(--ph-color-text);text-decoration-thickness:var(--ph-border-width-strong)}
.ph-badge,.ph-chip{display:inline-flex;align-items:center;gap:var(--ph-space-1);min-height:var(--ph-size-control-sm);padding:var(--ph-space-1) var(--ph-space-3);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-pill);background:var(--ph-color-surface-raised);color:var(--ph-color-text);font-size:var(--ph-font-size-xs);font-weight:var(--ph-font-weight-bold)}
.ph-badge--information{border-color:var(--ph-color-information)}.ph-badge--pending{border-color:var(--ph-color-pending)}.ph-badge--success{border-color:var(--ph-color-success)}.ph-badge--warning{border-color:var(--ph-color-warning)}.ph-badge--error,.ph-badge--danger{border-color:var(--ph-color-danger)}.ph-chip--selected{border-color:var(--ph-color-accent-emphasis);box-shadow:inset 0 0 0 var(--ph-border-width) var(--ph-color-accent-emphasis)}
.ph-form{display:grid;gap:var(--ph-space-5);max-width:var(--ph-size-reading-max)}.ph-form--grid{grid-template-columns:repeat(auto-fit,minmax(var(--ph-layout-grid-min),1fr));max-width:none}.ph-form--inline{display:flex;flex-wrap:wrap;align-items:end;max-width:none}.ph-form-section{display:grid;gap:var(--ph-space-4);min-width:0;margin:0;padding:var(--ph-space-4);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md)}.ph-form-section>legend{padding-inline:var(--ph-space-2);font-weight:var(--ph-font-weight-bold)}.ph-form-section>p{margin:0;color:var(--ph-color-text-muted)}.ph-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ph-space-3);padding-top:var(--ph-space-2);border-top:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border)}
.ph-field{display:grid;gap:var(--ph-space-2);color:var(--ph-color-text);font-weight:var(--ph-font-weight-medium)}
.ph-field input,.ph-field select,.ph-field textarea,.ph-search input{width:100%;min-height:var(--ph-size-control-md);padding:var(--ph-space-2) var(--ph-space-3);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border-strong);border-radius:var(--ph-radius-sm);background:var(--ph-color-canvas-subtle);color:var(--ph-color-text);font:inherit}.ph-field textarea{resize:vertical}
.ph-field :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--ph-color-danger)}.ph-field-message{min-height:var(--ph-font-size-sm);color:var(--ph-color-text-muted);font-size:var(--ph-font-size-xs);letter-spacing:normal}.ph-field-message--error{color:var(--ph-color-danger)}
.ph-password>div,.ph-search>div{display:grid;grid-template-columns:minmax(0,1fr) auto}.ph-password button,.ph-search button{min-width:var(--ph-size-control-md);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border-strong);border-radius:0 var(--ph-radius-sm) var(--ph-radius-sm) 0;background:var(--ph-color-surface-raised);color:var(--ph-color-text)}
.ph-choice,.ph-choice-group{display:flex;align-items:center;gap:var(--ph-space-2);min-height:var(--ph-size-touch-min);color:var(--ph-color-text)}.ph-choice-group{align-items:flex-start;flex-direction:column;padding:var(--ph-space-3);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md)}.ph-choice input{width:var(--ph-size-icon);height:var(--ph-size-icon);accent-color:var(--ph-color-accent)}
.ph-search{display:grid;gap:var(--ph-space-2)}
.ph-alert,.ph-feedback{display:flex;align-items:flex-start;gap:var(--ph-space-3);padding:var(--ph-space-4);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border-strong);border-left-width:var(--ph-border-width-strong);border-radius:var(--ph-radius-md);background:var(--ph-color-surface);color:var(--ph-color-text)}
.ph-alert p,.ph-feedback p{margin:var(--ph-space-1) var(--ph-space-0);color:var(--ph-color-text-muted)}.ph-alert--information,.ph-feedback--tone-information{border-left-color:var(--ph-color-information)}.ph-alert--pending,.ph-feedback--tone-pending{border-left-color:var(--ph-color-pending)}.ph-alert--success,.ph-feedback--success,.ph-feedback--tone-success{border-left-color:var(--ph-color-success)}.ph-alert--warning,.ph-feedback--tone-warning{border-left-color:var(--ph-color-warning)}.ph-alert--error,.ph-feedback--error,.ph-feedback--retry,.ph-feedback--unavailable,.ph-feedback--tone-error{border-left-color:var(--ph-color-danger)}
.ph-feedback--partial-data,.ph-feedback--offline-degraded,.ph-feedback--not-entitled{border-left-color:var(--ph-color-warning)}.ph-feedback-icon{display:grid;place-items:center;flex:0 0 var(--ph-size-icon);height:var(--ph-size-icon);border:var(--ph-border-width) var(--ph-border-style) currentColor;border-radius:var(--ph-radius-pill)}
.ph-spinner{display:inline-block;width:var(--ph-size-icon);height:var(--ph-size-icon);border:var(--ph-border-width-strong) var(--ph-border-style) var(--ph-color-border-strong);border-top-color:var(--ph-color-accent-emphasis);border-radius:var(--ph-radius-pill);animation:ph-spin var(--ph-motion-standard) linear infinite}@keyframes ph-spin{to{transform:rotate(1turn)}}
.ph-spinner[hidden],.ph-link-button[hidden]{display:none!important}
.ph-mutation-control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ph-space-2)}.ph-control-feedback{flex-basis:100%;min-height:var(--ph-font-size-lg);margin:var(--ph-space-0);color:var(--ph-color-text-muted);font-size:var(--ph-font-size-sm)}.ph-mutation-control[data-mutation-state="error"] .ph-control-feedback{color:var(--ph-color-danger)}.ph-mutation-control[data-mutation-state="success"] .ph-control-feedback{color:var(--ph-color-success)}
.ph-data{min-width:0}.ph-data--table{max-width:100%;overflow-x:auto;border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md)}.ph-data--table table{width:100%;border-collapse:collapse;background:var(--ph-color-surface)}.ph-data--table caption{padding:var(--ph-space-3) var(--ph-space-4);color:var(--ph-color-text);font-weight:var(--ph-font-weight-bold);text-align:left}.ph-data--table :where(th,td){padding:var(--ph-space-3) var(--ph-space-4);border-top:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);text-align:left;vertical-align:top}.ph-data--table th{color:var(--ph-color-text-muted);font-size:var(--ph-font-size-xs);letter-spacing:normal}.ph-data--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ph-layout-grid-min),1fr));gap:var(--ph-layout-stack-gap)}.ph-data--grid>[role="listitem"]{min-width:0;padding:var(--ph-space-4);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md);background:var(--ph-color-surface)}
.ph-avatar{display:inline-grid;place-items:center;width:var(--ph-size-avatar);height:var(--ph-size-avatar);overflow:hidden;border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border-strong);border-radius:var(--ph-radius-pill);background:var(--ph-color-accent);color:var(--ph-color-on-accent);font-weight:var(--ph-font-weight-bold)}.ph-avatar img{width:100%;height:100%;object-fit:cover}.ph-thumbnail{display:grid;place-items:center;width:min(100%,var(--ph-size-thumbnail-width));aspect-ratio:16/9;border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md);background:var(--ph-color-canvas-subtle);color:var(--ph-color-text-muted)}
.ph-page-header,.ph-section-header{max-width:var(--ph-size-content-max);margin-inline:auto;padding:var(--ph-space-7) var(--ph-layout-gutter) var(--ph-space-5)}.ph-page-header h1{max-width:var(--ph-size-reading-max);margin:var(--ph-space-2) 0;font:var(--ph-font-weight-medium) var(--ph-font-size-display)/var(--ph-line-tight) var(--ph-font-display)}.ph-section-header{padding-block:var(--ph-space-7) var(--ph-space-4)}.ph-section-header h2{margin:var(--ph-space-1) 0;font:var(--ph-font-weight-medium) var(--ph-font-size-xl)/var(--ph-line-tight) var(--ph-font-display)}.ph-page-header p,.ph-section-header p{max-width:var(--ph-size-reading-max);color:var(--ph-color-text-muted)}.ph-page-header--preview{padding:var(--ph-space-3);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md)}
.ph-tabs{display:grid;gap:var(--ph-space-3)}.ph-tabs [role="tablist"]{display:flex;gap:var(--ph-space-1);border-bottom:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border)}.ph-tabs [role="tab"]{min-height:var(--ph-size-touch-min);padding:var(--ph-space-2) var(--ph-space-3);border:var(--ph-space-0);border-bottom:var(--ph-border-width-strong) var(--ph-border-style) transparent;background:transparent;color:var(--ph-color-text-muted)}.ph-tabs [role="tab"][aria-selected="true"]{border-bottom-color:var(--ph-color-accent-emphasis);color:var(--ph-color-text)}
.ph-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ph-space-3)}
.ph-dialog{z-index:var(--ph-z-modal);width:min(100%,var(--ph-size-reading-max));max-height:100%;padding:var(--ph-space-5);overflow:auto;border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border-strong);border-radius:var(--ph-radius-lg);background:var(--ph-color-surface);color:var(--ph-color-text);box-shadow:var(--ph-shadow-raised)}.ph-dialog::backdrop{background:var(--ph-color-overlay)}.ph-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ph-space-3)}.ph-dialog>header h2{margin:0}.ph-dialog>header button{flex:0 0 var(--ph-size-touch-min);width:var(--ph-size-touch-min);height:var(--ph-size-touch-min);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-pill);background:var(--ph-color-surface-raised);color:var(--ph-color-text)}.ph-dialog-body{display:grid;gap:var(--ph-space-4)}.ph-dialog--drawer{z-index:var(--ph-z-drawer);height:100%;margin:0 0 0 auto;border-radius:var(--ph-radius-lg) 0 0 var(--ph-radius-lg)}
.ph-tooltip-wrap{position:relative;display:inline-flex}.ph-tooltip{position:absolute;z-index:var(--ph-z-toast);left:0;bottom:calc(100% + var(--ph-space-2));width:max-content;max-width:var(--ph-size-thumbnail-width);padding:var(--ph-space-2);border-radius:var(--ph-radius-sm);background:var(--ph-color-text);color:var(--ph-color-canvas);font-size:var(--ph-font-size-xs);opacity:0;pointer-events:none}.ph-tooltip-wrap:hover .ph-tooltip,.ph-tooltip-wrap:focus-within .ph-tooltip{opacity:1}
.ph-toast{position:fixed;z-index:var(--ph-z-toast);right:var(--ph-space-4);bottom:var(--ph-space-4);max-width:var(--ph-size-reading-max);padding:var(--ph-space-3) var(--ph-space-4);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-success);border-radius:var(--ph-radius-md);background:var(--ph-color-surface-raised);color:var(--ph-color-text);box-shadow:var(--ph-shadow-raised)}.ph-toast--catalogue{position:static}
.ph-catalogue{min-height:100vh;background:var(--ph-color-canvas);color:var(--ph-color-text)}.ph-catalogue-callout,.ph-theme-grid,.ph-feedback-grid,.ph-component-grid,.ph-stress-grid{width:min(calc(100% - (var(--ph-layout-gutter) * 2)),var(--ph-size-content-max));margin-inline:auto}.ph-catalogue-callout{display:flex;align-items:center;justify-content:space-between;gap:var(--ph-space-4);padding:var(--ph-space-5);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border-strong);border-radius:var(--ph-radius-lg);background:var(--ph-color-surface)}
.ph-theme-grid,.ph-feedback-grid,.ph-component-grid,.ph-stress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ph-layout-grid-min),1fr));gap:var(--ph-layout-stack-gap)}.ph-theme-preview,.ph-catalogue-card,.ph-stress-grid>article{padding:var(--ph-space-4);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-lg);background:var(--ph-color-surface);color:var(--ph-color-text)}.ph-preview-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ph-space-2)}
.ph-feedback-grid{grid-template-columns:repeat(auto-fit,minmax(var(--ph-layout-grid-min),1fr))}.ph-component-grid{align-items:start}.ph-catalogue-card{display:grid;gap:var(--ph-space-4)}.ph-catalogue-card header code{display:block;overflow-wrap:anywhere;color:var(--ph-color-text-muted);font-size:var(--ph-font-size-xs)}.ph-component-preview{min-height:var(--ph-size-control-md);padding:var(--ph-space-3);border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-md);background:var(--ph-color-canvas-subtle)}
.ph-component-state-matrix{display:grid;gap:var(--ph-space-1);margin:0;padding:0;list-style:none}.ph-component-state-matrix li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:var(--ph-space-2);font-size:var(--ph-font-size-xs)}.ph-component-state-sample{min-height:var(--ph-size-control-sm);display:flex;align-items:center;padding:var(--ph-space-1) var(--ph-space-2);overflow-wrap:anywhere;border:var(--ph-border-width) var(--ph-border-style) var(--ph-color-border);border-radius:var(--ph-radius-sm);background:var(--ph-color-surface-raised)}.ph-component-state-sample[data-demo-state="hover_focus"]{outline:var(--ph-focus-width) solid var(--ph-color-focus);outline-offset:var(--ph-focus-offset)}.ph-component-state-sample[data-demo-state="active_selected"]{border-color:var(--ph-color-accent-emphasis)}.ph-component-state-sample[data-demo-state="disabled"]{opacity:var(--ph-opacity-disabled)}.ph-component-state-sample[data-demo-state="loading"]{border-style:dashed}.ph-component-state-sample[data-demo-state="success"]{border-color:var(--ph-color-success)}.ph-component-state-sample[data-demo-state="error"]{border-color:var(--ph-color-danger)}
.ph-component-contract summary{min-height:var(--ph-size-touch-min);display:flex;align-items:center;cursor:pointer;color:var(--ph-color-accent-emphasis)}.ph-component-contract dl{display:grid;gap:var(--ph-space-3)}.ph-component-contract dl>div{border-left:var(--ph-border-width-strong) var(--ph-border-style) var(--ph-color-border);padding-left:var(--ph-space-3)}.ph-component-contract dt{font-weight:var(--ph-font-weight-bold)}.ph-component-contract dd{margin:var(--ph-space-1) 0;color:var(--ph-color-text-muted)}
.ph-stress-grid{padding-bottom:var(--ph-space-8)}.ph-demo-reduced-motion *{animation-duration:var(--ph-motion-instant)!important;transition-duration:var(--ph-motion-instant)!important}.ph-demo-high-contrast{forced-color-adjust:auto}
@media(max-width:56.25rem){.ph-catalogue-callout{align-items:flex-start;flex-direction:column}.ph-component-state-matrix li{grid-template-columns:1fr}.ph-dialog--drawer{width:100%;height:auto;margin:auto 0 0;border-radius:var(--ph-radius-lg) var(--ph-radius-lg) 0 0}}
@media(max-width:22.5rem){.ph-action,.ph-link,.ph-link-button{width:100%}.ph-pagination{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:reduce){body[data-member-design-system="v1"] *,body[data-member-design-system="v1"] *::before,body[data-member-design-system="v1"] *::after{animation-duration:var(--ph-motion-instant)!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:var(--ph-motion-instant)!important}}
@media(forced-colors:active){body[data-member-design-system="v1"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:Highlight}.ph-action,.ph-badge,.ph-chip,.ph-alert,.ph-feedback,.ph-catalogue-card{border-color:CanvasText}.ph-action{background:Canvas;color:CanvasText}.ph-action[aria-pressed="true"]{outline:var(--ph-border-width-strong) solid Highlight}}