/* Secret Rides — the shared app components the website may reuse (wordmark, buttons, chips). The full file lives with the app. */
.sr-wordmark{display:inline-flex;align-items:center;gap:var(--sr-sp-3);color:inherit;font-weight:var(--sr-fw-semibold);font-size:var(--sr-fs-section);letter-spacing:-0.01em;text-decoration:none;min-height:var(--sr-touch)}
.sr-wordmark:hover{text-decoration:none;color:inherit}
.sr-mark{width:32px;height:32px;border-radius:8px;background:var(--sr-bg-nav);color:var(--sr-accent);display:grid;place-items:center;flex:none}
.sr-mark .sr-icon{width:22px;height:22px}
.sr-mark--lg{width:64px;height:64px;border-radius:16px}
.sr-mark--lg .sr-icon{width:44px;height:44px}
.sr-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sr-sp-2);min-height:var(--sr-touch);padding:0 var(--sr-sp-5);border-radius:var(--sr-r);border:1px solid transparent;font-weight:var(--sr-fw-semibold);font-size:var(--sr-fs-body);line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--sr-duration),color var(--sr-duration),border-color var(--sr-duration)}
.sr-button:hover{text-decoration:none}
.sr-button--primary{background:var(--sr-accent);color:var(--sr-on-accent)}
.sr-button--primary:hover{background:var(--sr-accent-hover);color:var(--sr-on-accent)}
.sr-button--secondary{background:var(--sr-surface-2);color:var(--sr-text);border-color:var(--sr-border-strong)}
.sr-button--secondary:hover{border-color:var(--sr-text-3);color:var(--sr-text)}
.sr-button--ghost{background:transparent;color:var(--sr-text-2)}
.sr-button--ghost:hover{background:var(--sr-surface-2);color:var(--sr-text)}
.sr-button--danger{background:transparent;color:var(--sr-danger);border-color:var(--sr-danger)}
.sr-button--danger:hover{background:var(--sr-danger-soft);color:var(--sr-danger)}
.sr-button--danger-solid{background:var(--sr-danger);color:var(--sr-bg-nav)}
.sr-button--block{width:100%}
.sr-button--sm{min-height:40px;padding:0 var(--sr-sp-4);font-size:var(--sr-fs-small)}
.sr-button:disabled{opacity:0.5;cursor:not-allowed}
.sr-button.is-loading{color:transparent !important;pointer-events:none}
.sr-button.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sr-spin 0.7s linear infinite}
.sr-button--primary.is-loading::after{border-color:var(--sr-on-accent);border-right-color:transparent}
.sr-button--secondary.is-loading::after,.sr-button--ghost.is-loading::after{border-color:var(--sr-text);border-right-color:transparent}
.sr-button--danger.is-loading::after{border-color:var(--sr-danger);border-right-color:transparent}
.sr-chip{display:inline-flex;align-items:center;gap:var(--sr-sp-1);height:24px;padding:0 var(--sr-sp-3);border-radius:var(--sr-r-pill);font-size:var(--sr-fs-xs);font-weight:var(--sr-fw-semibold);white-space:nowrap;line-height:1}
.sr-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sr-chip--pending{background:var(--sr-info-soft);color:var(--sr-info)}
.sr-chip--used{background:var(--sr-success-soft);color:var(--sr-success)}
.sr-chip--expired{background:var(--sr-surface-2);color:var(--sr-text-2)}
.sr-chip--revoked{background:var(--sr-danger-soft);color:var(--sr-danger)}
.sr-chip--soon{background:var(--sr-surface-2);color:var(--sr-text-2)}
.sr-chip--planning{background:var(--sr-info-soft);color:var(--sr-info)}
.sr-chip--ready{background:var(--sr-accent-soft);color:var(--sr-accent)}
.sr-chip--riding{background:var(--sr-success-soft);color:var(--sr-success)}
.sr-chip--done{background:var(--sr-surface-2);color:var(--sr-text-2)}
.sr-chip--notridden{background:transparent;color:var(--sr-text-2);box-shadow:inset 0 0 0 1px var(--sr-border-strong)}
.sr-chip--notridden::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.sr-chip--plain::before{display:none}
.sr-chip--due{background:var(--sr-warning-soft);color:var(--sr-warning)}
.sr-chip--overdue{background:var(--sr-danger);color:var(--sr-bg-nav)}
.sr-chip--fine{background:var(--sr-surface-2);color:var(--sr-text-2)}
.sr-chip--off{background:var(--sr-info-soft);color:var(--sr-info)}
.sr-button--outline{background:transparent;border:1px solid var(--sr-border-strong)}
.sr-wordmark span{white-space:nowrap}
.sr-button,.sr-icon-button,.sr-avatar-button,.sr-menu-item,.sr-toggle,.sr-voice,.sr-fullswitch-opt,.sr-fullswitch-close,.sr-recentre,a.sr-list-item{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sr-button{transition:background var(--sr-duration),border-color var(--sr-duration),color var(--sr-duration),box-shadow var(--sr-duration),scale var(--sr-duration)}
.sr-button:active:not(:disabled):not(.is-loading):not(.is-busy),.sr-button.is-pressed{transition-duration:0s;scale:0.97}
.sr-button--primary:active:not(:disabled):not(.is-busy),.sr-button--primary.is-pressed{background:color-mix(in srgb,var(--sr-accent) 72%,#000);color:var(--sr-on-accent)}
.sr-button--secondary:active:not(:disabled),.sr-button--secondary.is-pressed,.sr-button--outline:active:not(:disabled),.sr-button--outline.is-pressed{background:var(--sr-border-strong);border-color:var(--sr-text);color:var(--sr-text)}
.sr-button--ghost:active:not(:disabled),.sr-button--ghost.is-pressed{background:var(--sr-surface-2);color:var(--sr-text);box-shadow:inset 0 0 0 1px var(--sr-text-3)}
.sr-button--danger:active:not(:disabled),.sr-button--danger.is-pressed{background:var(--sr-danger-soft);color:var(--sr-danger);box-shadow:inset 0 0 0 1px var(--sr-danger)}
.sr-button--danger-solid:active:not(:disabled),.sr-button--danger-solid.is-pressed{background:color-mix(in srgb,var(--sr-danger) 72%,#000)}
.sr-button.is-busy{pointer-events:none;cursor:progress;gap:10px;scale:1}
.sr-button.is-busy::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sr-spin 0.7s linear infinite}
.sr-chip--demo{background:var(--sr-info-soft);color:var(--sr-info)}