/* Component styling, one class per part. Values are lifted from the product's own
   Tailwind utilities — h-11 is 44px because that is the touch target both platforms
   ask for, gap-2 is 8px, px-5 is 20px. Nothing is rounded to a nicer number here. */

/* — Button — */
.syr-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:0;border-radius:var(--radius-card);font-family:inherit;font-weight:var(--weight-semibold);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.syr-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.syr-btn:disabled,.syr-btn[aria-disabled='true']{cursor:not-allowed;opacity:0.6}
.syr-btn--primary{background:var(--surface-action);color:var(--text-on-action)}
.syr-btn--primary:hover:not(:disabled){background:var(--surface-action-hover)}
.syr-btn--secondary{background:var(--surface-page);color:var(--text-strong);border:1px solid var(--surface-border)}
.syr-btn--secondary:hover:not(:disabled){background:var(--surface-raised)}
.syr-btn--ghost{background:transparent;color:var(--text-link)}
.syr-btn--ghost:hover:not(:disabled){background:var(--surface-raised)}
.syr-btn--destructive{background:var(--surface-destructive);color:var(--text-on-destructive)}
.syr-btn--destructive:hover:not(:disabled){background:var(--surface-destructive-hover)}
.syr-btn--sm{height:36px;padding:0 var(--space-3);font-size:var(--text-size-sm)}
.syr-btn--md{height:44px;padding:0 20px;font-size:var(--text-size-sm)}
.syr-btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--text-size-base)}

/* — Badge — */
.syr-badge{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-size:var(--text-size-xs);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}
.syr-badge--neutral{background:var(--surface-raised);color:var(--text-muted)}
.syr-badge--positive{background:var(--state-positive-surface);color:var(--state-positive-text)}
.syr-badge--caution{background:var(--state-caution-surface);color:var(--state-caution-text)}
.syr-badge--negative{background:var(--state-negative-surface);color:var(--state-negative-text)}
.syr-badge--informative{background:var(--state-informative-surface);color:var(--state-informative-text)}

/* — Card — */
.syr-card{border-radius:var(--radius-panel);border:1px solid var(--surface-border);background:var(--surface-page);box-shadow:var(--shadow-md)}
.syr-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--surface-border);padding:20px}
.syr-card-header__text{display:flex;flex-direction:column;gap:var(--space-1)}
.syr-card-header__title{font-size:var(--text-size-base);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}
.syr-card-header__desc{color:var(--text-muted);font-size:var(--text-size-sm)}
.syr-card-body{padding:20px}

/* — Fields — */
.syr-field{display:flex;flex-direction:column;gap:var(--space-2)}
.syr-field__label{color:var(--text-strong);font-size:var(--text-size-sm);font-weight:var(--weight-semibold)}
.syr-field__hint{color:var(--text-muted);font-size:var(--text-size-xs)}
.syr-field__error{color:var(--text-negative);font-size:var(--text-size-xs);font-weight:var(--weight-semibold)}
.syr-input,.syr-select,.syr-textarea{font-family:inherit;border-radius:var(--radius-card);border:1px solid var(--surface-border);background:var(--surface-page);color:var(--text-strong);font-size:var(--text-size-sm);width:100%}
.syr-input,.syr-select{height:44px;padding:0 var(--space-3)}
.syr-textarea{padding:var(--space-2) var(--space-3);line-height:var(--leading-body);resize:vertical}
.syr-input::placeholder,.syr-textarea::placeholder{color:var(--text-muted)}
.syr-input:focus-visible,.syr-select:focus-visible,.syr-textarea:focus-visible{outline:2px solid var(--surface-action);outline-offset:2px}
.syr-input[aria-invalid],.syr-select[aria-invalid],.syr-textarea[aria-invalid]{border-color:var(--surface-destructive)}
.syr-input:disabled,.syr-select:disabled,.syr-textarea:disabled{background:var(--surface-raised);cursor:not-allowed;opacity:0.6}
.syr-check{display:flex;flex-direction:column;gap:var(--space-1)}
.syr-check__row{display:flex;align-items:center;gap:var(--space-3)}
.syr-check__box{accent-color:var(--surface-action);width:16px;height:16px;flex-shrink:0}
.syr-check__box:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.syr-check__label{color:var(--text-strong);font-size:var(--text-size-sm)}
.syr-check__hint{color:var(--text-muted);font-size:var(--text-size-xs);padding-inline-start:28px}

/* — Table — */
.syr-table-scroll{overflow-x:auto}
.syr-table{width:100%;text-align:start;font-size:var(--text-size-sm);border-collapse:collapse}
.syr-table thead tr{color:var(--text-muted);border-bottom:1px solid var(--surface-border);font-size:var(--text-size-xs)}
.syr-table th{padding:var(--space-2) var(--space-4) var(--space-2) 0;text-align:start;font-weight:var(--weight-semibold)}
.syr-table td{padding:var(--space-3) var(--space-4) var(--space-3) 0}
.syr-table tbody tr{border-bottom:1px solid var(--surface-border)}
.syr-table tbody tr:last-child{border-bottom:0}
.syr-table td.is-strong{color:var(--text-strong);font-weight:var(--weight-semibold)}

/* — Landing — */
.syr-landing{min-height:100dvh;background:var(--surface-page);color:var(--text-body)}
.syr-hero{margin:0 auto;max-width:768px;padding:80px var(--space-6);text-align:center}
.syr-hero__title{font-size:var(--text-size-3xl);font-weight:var(--weight-bold);text-wrap:balance}
.syr-hero__lede{color:var(--text-muted);line-height:var(--leading-body);margin:var(--space-6) auto 0;max-width:672px;font-size:var(--text-size-lg);text-wrap:pretty}
.syr-hero__actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3)}
.syr-section{margin:0 auto;max-width:1152px;padding:56px var(--space-6)}
.syr-section__head{margin:0 auto;max-width:672px;text-align:center}
.syr-section__title{font-size:var(--text-size-2xl);font-weight:var(--weight-bold)}
.syr-section__desc{color:var(--text-muted);line-height:var(--leading-body);margin-top:var(--space-3);font-size:var(--text-size-base);text-wrap:pretty}
.syr-section__body{margin-top:40px}
.syr-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.syr-product-card{border-radius:var(--radius-panel);border:1px solid var(--surface-border);background:var(--surface-raised);box-shadow:var(--shadow-md);display:flex;flex-direction:column;padding:var(--space-6)}
.syr-product-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.syr-product-card__name{font-size:var(--text-size-lg);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}
.syr-product-card__tagline{color:var(--text-muted);line-height:var(--leading-body);margin-top:var(--space-2);font-size:var(--text-size-sm)}
.syr-product-card__features{color:var(--text-body);margin:var(--space-6) 0 0;padding-inline-start:20px;font-size:var(--text-size-sm);display:flex;flex-direction:column;gap:var(--space-2)}
.syr-product-card__foot{margin-top:auto}
.syr-product-card__price{color:var(--text-strong);margin-top:var(--space-6);font-size:var(--text-size-sm);font-weight:var(--weight-semibold)}

/* — Shell chrome (headers, nav tabs) — */
.syr-frame{background:var(--surface-raised);color:var(--text-body);min-height:100dvh;display:flex;flex-direction:column}
.syr-frame__bar{border-bottom:1px solid var(--surface-border)}
.syr-frame__barinner{margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6)}
.syr-frame__foot{border-top:1px solid var(--surface-border)}
.syr-tabs{border-bottom:1px solid var(--surface-border)}
.syr-tabs__list{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin:0 0 -1px;padding:0;list-style:none}
.syr-tab{display:inline-block;border-bottom:2px solid transparent;padding:var(--space-3) var(--space-1);font-size:var(--text-size-sm);font-weight:var(--weight-semibold);color:var(--text-muted);text-decoration:none;background:none;border-top:0;border-inline:0;font-family:inherit;cursor:pointer}
.syr-tab[aria-current='page']{border-bottom-color:var(--surface-action);color:var(--text-strong)}
.syr-tab:hover{color:var(--text-strong)}

/* — Icon — a CDN Lucide glyph masked in currentColor, so it inherits text colour in both
   themes with no fill to keep in step. See readme.md → Iconography: the SET is a flagged
   substitution, not a Syriana asset. */
.syr-icon{display:inline-block;inline-size:20px;block-size:20px;flex:none;vertical-align:-0.18em;background-color:currentColor;-webkit-mask-image:var(--syr-icon);mask-image:var(--syr-icon);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
[dir='rtl'] .syr-icon--flip{transform:scaleX(-1)}