/* Service UI components. Values: docs/design/tokens/snapholo.tokens.json.
   Opt in by class; cinematic home and card-stage typography are separate. */
.ui-page{box-sizing:border-box;width:calc(100% - 2 * var(--ui-gutter));max-width:var(--ui-page-max);margin:var(--space-6) auto 0;color:var(--color-text);font-family:var(--font-sans)}
.ui-page *{box-sizing:border-box}
.ui-page-title{font-size:var(--ui-page-size);line-height:var(--ui-page-line);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);margin:0 0 var(--space-6)}
.ui-section{margin-block:var(--ui-section-gap)}
.ui-section-label{font-size:var(--ui-support-size);line-height:var(--ui-support-line);font-weight:var(--weight-medium);color:var(--color-text-muted);margin:0 0 var(--ui-label-gap);padding-inline:var(--ui-group-padding)}
.ui-surface,.ui-menu-group,.ui-faq{background:var(--color-surface);border:0;border-radius:var(--ui-group-radius)}
.ui-menu-group{padding-block:var(--space-2);overflow:hidden}
.ui-menu-row{display:grid;grid-template-columns:var(--ui-icon-slot) minmax(0,1fr) auto;align-items:center;column-gap:var(--ui-icon-gap);min-height:var(--ui-row-compact);padding:var(--ui-row-pad-y) var(--ui-group-padding);color:inherit;text-decoration:none;transition:background-color var(--motion-fast) var(--motion-ease)}
.ui-menu-row--descriptive{min-height:var(--ui-row-descriptive)}
.ui-menu-icon{display:flex;align-items:center;justify-content:center;width:var(--ui-icon-slot);height:var(--ui-icon-slot);flex:none}
.ui-menu-icon>img{width:var(--ui-icon-size);height:var(--ui-icon-size);object-fit:contain}
.ui-row-copy{display:grid;gap:var(--ui-text-gap);min-width:0}
.ui-menu-label{font-size:var(--ui-body-size);line-height:var(--ui-body-line);font-weight:var(--weight-medium);overflow-wrap:anywhere}
.ui-menu-tail{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--ui-support-size);line-height:var(--ui-support-line);text-align:right;max-width:12ch;overflow-wrap:anywhere}
.ui-menu-description,.ui-field-note{display:block;color:var(--color-text-secondary);font-size:var(--ui-support-size);line-height:var(--ui-support-line);font-weight:var(--weight-regular)}
.ui-menu-row .chevron{width:var(--ui-trailing-size);height:var(--ui-trailing-size);flex:none}
.ui-back{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--ui-touch-min);color:var(--color-text-secondary);font-size:var(--ui-support-size);line-height:var(--ui-support-line);text-decoration:none;margin-bottom:var(--space-3)}
.ui-page :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--set-focus);outline-offset:3px}
.ui-form{display:grid;gap:var(--ui-field-gap);padding:var(--ui-group-padding)}
.ui-field{display:grid;gap:var(--space-2)}
.ui-field>label{font-size:var(--ui-support-size);line-height:var(--ui-support-line);font-weight:var(--weight-medium)}
.ui-input{width:100%;min-height:var(--ui-control-height);padding:calc(var(--space-3) - 1px) var(--space-3);border:1px solid var(--color-border);border-radius:var(--ui-control-radius);background:var(--color-surface-sunken);color:var(--color-text);font:inherit;font-size:var(--ui-body-size);line-height:var(--ui-body-line)}
textarea.ui-input{resize:vertical;min-height:calc(var(--ui-control-height) * 3)}
.ui-button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--ui-control-height);padding:var(--space-3) var(--space-5);border:0;border-radius:var(--ui-control-radius);background:var(--color-brand-action-fill);color:var(--color-brand-action-on);font:inherit;font-size:var(--ui-body-size);line-height:var(--ui-body-line);font-weight:var(--weight-semibold);cursor:pointer}
.ui-button--submit{min-height:var(--ui-submit-height)}
.ui-button:disabled{opacity:.6;cursor:wait}
.ui-faq{overflow:hidden;margin-bottom:var(--ui-group-gap)}
.ui-faq details+details{border-top:1px solid var(--color-border)}
.ui-faq summary{cursor:pointer;font-size:var(--ui-body-size);line-height:var(--ui-body-line);font-weight:var(--weight-medium);padding:var(--space-3) var(--ui-group-padding);min-height:var(--ui-row-compact)}
.ui-faq p{font-size:var(--ui-support-size);line-height:var(--ui-support-line);color:var(--color-text-secondary);margin:0;padding:0 var(--ui-group-padding) var(--ui-group-padding)}
@media(hover:hover){.ui-menu-row:hover{background:var(--color-surface-sunken)}}
@media(prefers-reduced-motion:reduce){.ui-menu-row{transition:none}}

/* Controls own interaction states; the passive icon frame never does. */
.ui-button,.ui-button:hover,.ui-button:focus-visible,.ui-button:active{text-decoration:none}
.ui-button:focus-visible{outline:3px solid var(--set-focus);outline-offset:3px}
.ui-button:not(:disabled):active{transform:translateY(1px)}
@media(hover:hover){.ui-button:not(:disabled):hover{background:color-mix(in srgb,var(--color-brand-action-fill) 92%,black)}}

.ui-button--outline{background:transparent;border:1px solid var(--color-border-strong);color:var(--color-text)}
.ui-button.ui-button--outline .sh-ui-icon{filter:none}
@media(hover:hover){.ui-button--outline:not(:disabled):hover{background:var(--color-surface-sunken)}}