/* Shared presentation layer. Domain behavior and existing deep links are unchanged. */
:root {
  --bg: #fff;
  --panel: #fff;
  --panel-muted: #f7f8f9;
  --surface-subtle: #f7f8f9;
  --surface-accent: #fff5ef;
  --line: #e6e8eb;
  --line-strong: #cbd0d6;
  --text: #20272b;
  --muted: #626b73;
  --shadow: none;
  --radius-panel: 8px;
  --radius-card: 8px;
  --radius-soft: 6px;
  --radius-control: 6px;
  --radius-pill: 6px;
  --control-height: 40px;
  --control-height-large: var(--control-height);
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --card-inset: 16px;
  --type-page: clamp(30px, 3vw, 38px);
  --type-section: clamp(26px, 2.4vw, 31px);
  --type-group: clamp(19px, 1.8vw, 22px);
  --type-item: 17px;
}
body { font-size: 14px; line-height: 1.55; }
.app-root { width: min(100%, 1240px); padding: 20px 24px 64px; }
.app-root :is(h1,h2,h3,h4) { font-family: Sora,sans-serif; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; overflow-wrap: anywhere; }
.app-root h1, .app-root .hero.compact h1 { max-width: none; font-size: var(--type-page); }
.app-root h2 { font-size: var(--type-section); }
.app-root h3 { font-size: var(--type-group); }
.app-root h4 { font-size: 16px; }
.app-root .eyebrow { font-family: inherit; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .04em; margin-bottom: 4px; color: var(--muted); }
.app-root :is(.hero-copy,.section-copy,.task-copy,.detail-line,.empty-copy) { font-size: 13px; line-height: 1.6; }
.app-root .hero, .app-root > .section-surface, .app-root > .surface, .app-root > .tab-shell { border: 0; border-radius: 0; box-shadow: none; }
.app-root .hero, .app-root .hero.compact { padding: 16px 0; margin-bottom: 8px; }
.app-root .app-unified-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.app-root .app-unified-header-simple { grid-template-columns: minmax(0,1fr) auto; }
.app-root .app-wordmark { appearance: none; padding: 0; border: 0; background: transparent; color: var(--text); font: 700 23px/1.2 Sora,sans-serif; letter-spacing: -.05em; cursor: pointer; }
.app-root .app-wordmark span { color: var(--accent); }
.app-root .header-action-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.app-root .header-status { flex: 1 1 210px; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.app-root .header-action-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.app-root .header-action-buttons button { white-space: nowrap; }
.app-root .page-intro { padding: 24px 0 12px; border-bottom: 1px solid var(--line); }
.app-root .page-intro .hero-copy { max-width: 72ch; margin: 10px 0 0; }
.app-root .bike-context-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.app-root .section-surface { padding: 20px 0; }
.app-root .section-surface > .eyebrow { margin-bottom: 4px; }
.app-root .section-surface .section-surface { padding: 16px; }
.app-root .section-copy { margin-top: 8px; max-width: 72ch; }
.app-root :is(.surface-muted,.inventory-form,.inventory-mini-form,.setup-card,.component-card,.admin-user-card,.quest-card,.achievement-card,.summary-pill,.stat-card,.bike-build-legend-card,.bike-build-section-card,.bike-build-summary-card,.bike-build-scheme-card,.prep-panel) {
  padding: 16px; border-radius: 8px; box-shadow: none; background: var(--panel-muted); border-color: var(--line);
}
.app-root :is(.surface-muted,.summary-grid,.list-stack,.component-shelf,.record-list) { margin-top: 16px; }
.app-root :is(.action-row,.chip-row,.source-row,.topbar,.identity-cluster,.task-row,.bike-head,.gear-page-topbar,.compact-row-main,.compact-row-meta,.mechanic-card-head,.mechanic-chat-actions,.bike-build-legend-head,.bike-build-section-head,.record-item) {
  justify-content: flex-start; gap: 8px 12px; align-items: center;
}
.app-root :is(.action-row,.chip-row) { margin-top: 12px; }
.app-root :is(.solid-button,.ghost-button,.resource-link,.small-button) {
  min-height: var(--control-height); padding: 8px 14px; border-radius: var(--radius-control); font-size: 13px; font-weight: 600; box-shadow: none; line-height: 1.4;
}
.app-root :is(.solid-button,.ghost-button,.icon-button,.resource-link,.compact-row,.summary-button,.mechanic-chat-trigger):hover { transform: none; box-shadow: none; }
.app-root .ghost-button { border-color: var(--line-strong); }
.app-root .text-button { appearance: none; border: 0; padding: 6px 0; min-height: 32px; background: transparent; font: inherit; font-size: 12px; color: #b63e0c; text-align: left; cursor: pointer; }
.app-root .icon-button { border-radius: 6px; }
.app-root label, .app-root fieldset { gap: 6px; min-width: 0; }
.app-root label > span, .app-root fieldset > legend { font-size: 12px; }
.app-root :is(input,select,textarea) { border-radius: 6px; padding: 8px 12px; font-size: 14px; line-height: 1.5; }
.app-root textarea { min-height: 88px; }
.app-root input:is([type=checkbox],[type=radio]) { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: 0 0 18px; }
.app-root :is(.source-chip,.stat-chip,.status-pill) { min-height: 22px; height: auto; padding: 2px 6px; font-size: 12px; line-height: 1.4; background: transparent; border: 0; border-radius: 4px; white-space: normal; }
.app-root :is(.source-row,.compact-row-meta) > .source-chip { padding-inline: 0; }
.app-root .status-pill { align-self: center; font-weight: 500; gap: 5px; }
.app-root .status-pill::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.app-root .status-pill.due, .app-root .status-pill.inspect-now, .app-root .reminder-overdue { color: #a23824; }
.app-root .status-pill.soon { color: #86631d; }
.app-root .status-pill.ok, .app-root .status-pill.fresh { color: #397365; }
.app-root .status-pill.needs-baseline { color: #626b73; }
.app-root .source-chip-brand { padding: 0; }
.app-root .vendor-mark-shell { padding: 4px 6px; border-radius: 4px; }
.app-root .vendor-mark { max-width: 90px; max-height: 22px; }
.app-root .dashboard-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; border-bottom: 1px solid var(--line); padding: 8px 0 16px; }
.app-root .dashboard-header .topbar { gap: 16px; }
.app-root .hero.dashboard-header h1 { font-size: 26px; }
.app-root .dashboard-header .hero-status-line { font-size: 11px; margin-top: 2px; }
.app-root .dashboard-hero-actions { margin: 0; justify-content: flex-start; gap: 8px; }
.app-root .primary-action-cluster { gap: 8px; }
.app-root .header-identity-group { gap: 8px; }
.app-root .header-identity-group, .app-root .gear-page-topbar-right { width: auto; justify-content: flex-start; }
.app-root > .mechanic-chat-trigger { position: fixed; z-index: 35; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 56px; height: 56px; min-height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 6px 20px #20272b29; }
.app-root > .mechanic-chat-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #20272b33; }
.app-root > .mechanic-chat-trigger .mechanic-chat-trigger-icon { width: 36px; height: 36px; background: transparent; font-size: 23px; }
.app-root > .mechanic-chat-trigger .mechanic-chat-trigger-copy { display: none; }
.app-root > .mechanic-chat-trigger .mechanic-chat-trigger-count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px; background: var(--text); color: #fff; font-size: 11px; border-radius: 10px; }
.app-root .identity-button { padding: 4px; gap: 8px; border: 0; background: transparent; border-radius: 6px; box-shadow: none; }
.app-root :is(.identity-button,.avatar-button) .avatar { width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex: 0 0 32px; aspect-ratio: 1; border: 0; border-radius: 50%; object-fit: cover; }
.app-root .identity-name { font-size: 13px; }
.app-root .identity-status { font-size: 11px; }
.app-root .avatar-button { border: 0; padding: 4px; min-width: 40px; min-height: 40px; }
.app-root .tab-shell { padding: 0; margin: 0 0 16px; overflow: visible; }
.app-root .tab-strip, .app-root .workshop-subtabs { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 0; border-bottom: 1px solid var(--line); overflow: visible; }
.app-root .tab-button { display: inline-flex; flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 10px 0; gap: 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); box-shadow: none; font: 500 13px/1.4 Sora,sans-serif; }
.app-root .tab-button :is(span,strong) { font: inherit; color: inherit; background: transparent; padding: 0; }
.app-root .tab-button.active { background: transparent; color: var(--text); border-bottom-color: var(--accent); }
.app-root .workshop-subtabs { margin-top: 8px; }
.app-root .workshop-subtabs .tab-button span { font-size: 11px; color: var(--muted); }
.app-root :is(.reminder-head-meta,.service-logs-controls) { flex: 0 1 auto; justify-content: flex-start; }
.app-root #reminders > .bike-head { align-items: center; gap: 8px 20px; }
.app-root .reminder-head-meta { align-items: center; flex-wrap: nowrap; }
.app-root .reminder-filter-control { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: 8px; }
.app-root .reminder-filter-control span { flex: 0 0 auto; white-space: nowrap; }
.app-root .reminder-filter-control select { width: clamp(180px,22vw,260px); max-width: 100%; }
.app-root .section-count { display: inline-block; margin: 0; font-size: 12px; font-weight: 400; }
.app-root #reminders > .bike-head > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.reminder-bike-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; margin-top: 20px; }
.reminder-bike-group { min-width: 0; padding: var(--card-inset); border-radius: 8px; background: var(--panel-muted); }
.reminder-bike-heading { display: grid; gap: 4px; padding-bottom: 8px; }
.app-root .reminder-bike-heading h3 { font-size: var(--type-group); }
.reminder-bike-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.reminder-workshop-group { grid-column: 1 / -1; background: transparent; padding-inline: 0; }
.app-root .compact-reminder-card { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.app-root .compact-reminder-card:last-child { border-bottom: 0; }
.app-root .compact-reminder-card:hover { background: #eef1f3; }
.app-root .bike-retail-shell .gear-page-area-reminders .compact-reminder-card { padding: 12px 14px; }
.app-root .bike-retail-shell .gear-page-area-reminders .compact-reminder-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reminder-title-line, .reminder-summary-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.app-root .reminder-title-line h3 { font-size: var(--type-item); line-height: 1.3; }
.reminder-summary-line { margin-top: 4px; color: var(--muted); font-size: 12px; }
.app-root .pre-ride-alert { display: block; padding: var(--card-inset); margin-top: 16px; background: var(--panel-muted); border: 0; }
.app-root .pre-ride-alert-icon { display: none; }
.app-root .pre-ride-alert h3 { font-size: var(--type-group); }
.app-root .pre-ride-controls { gap: 8px; margin-top: 10px; justify-content: flex-start; }
.app-root .pre-ride-evidence { font-size: 11px; }
.app-root :is(.list-stack,.task-stack,.guide-list-grid,.bike-list-grid,.inventory-list-grid) { gap: 0 20px; }
.app-root .compact-row { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; gap: 6px; }
.app-root .compact-row:hover { background: var(--panel-muted); }
.app-root .compact-row-head { gap: 12px; }
.app-root .compact-row-thumb { width: 48px; height: 48px; flex-basis: 48px; border: 0; border-radius: 6px; }
.app-root .compact-row-icon { width: 24px; height: 24px; }
.app-root .compact-row-copy { margin: 3px 0 0; font-size: 12px; }
.app-root .compact-row h3 { font-size: var(--type-item); }
.app-root .compact-row-meta { font-size: 12px; gap: 4px 12px; }
.app-root .empty-inventory-state { padding: 20px 0; }
.app-root .empty-inventory-state h3 { font-size: var(--type-group); }
.app-root .empty-inventory-state .empty-copy { margin: 8px 0 0; }
.app-root .guide-group { margin-top: 24px; }
.app-root :is(.summary-grid,.stat-grid,.quest-grid,.achievement-row,.inventory-grid,.setup-grid,.component-grid,.bike-build-legend-grid) { gap: 16px; }
.app-root :is(.summary-pill,.stat-card) { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 8px 16px; }
.app-root .summary-pill strong, .app-root .stat-card strong { font-family: inherit; font-size: 23px; }
.app-root .section-head-copy { gap: 10px; }
.app-root .section-icon-badge { width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 0; background: transparent; }
.app-root .section-icon-badge svg { width: 24px; height: 24px; }
.app-root :is(.gear-page-shell,.bike-retail-grid,.bike-build-layout) { gap: 24px; }
.app-root .bike-retail-grid { display: block; }
.app-root .bike-build-layout { grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 16px; }
.app-root .bike-build-scheme-card { grid-template-columns: 208px minmax(0,1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "visual heading" "visual description" "visual source"; gap: 6px 16px; padding: var(--card-inset); }
.app-root .bike-build-scheme-head { grid-area: heading; }
.app-root .bike-build-scheme-card .bike-build-scheme-copy:not([data-scheme-source-label]) { grid-area: description; }
.app-root .bike-build-scheme-card [data-scheme-source-label] { grid-area: source; align-self: start; font-size: 11px; }
.app-root .bike-build-scheme-frame { grid-area: visual; min-height: 0; height: 208px; padding: 8px; border-radius: 6px; background: #fff; }
.app-root .bike-build-scheme-canvas { width: min(100%,190px); }
.app-root .bike-build-summary-card { gap: 12px; padding: var(--card-inset); }
.app-root .bike-build-summary-card .bike-component-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.app-root .bike-build-legend-card { padding: var(--card-inset); }
.app-root .bike-component-group { min-width: 0; padding: 18px 0; border-top: 1px solid var(--line); scroll-margin-top: 88px; transition: background 160ms ease; }
.app-root .bike-component-group.is-targeted { background: #fff2eb; }
.app-root .bike-component-group-head { display: flex; align-items: center; gap: 12px; }
.app-root .bike-component-group-head > div { min-width: 0; }
.app-root .bike-component-group-head .eyebrow { margin: 0 0 2px; font-size: 10px; }
.app-root .bike-component-group-head h4 { margin: 0; font-size: var(--type-group); line-height: 1.2; }
.app-root .bike-component-count { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.app-root .bike-component-rows { display: grid; gap: 0; margin: 10px 0 0 36px; }
.app-root .bike-component-rows > div { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0,1fr); gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.app-root .bike-component-rows dt { color: var(--muted); font-size: 12px; }
.app-root .bike-component-rows dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.app-root .bike-component-empty { margin: 8px 0 0 36px; color: var(--muted); font-size: 12px; }
.app-root .bike-editor-body { gap: 16px; }
.app-root .bike-editor-section { border-top: 1px solid var(--line); padding-top: 8px; }
.app-root .bike-editor-section > summary { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; min-height: 48px; padding: 8px 0; cursor: pointer; font-size: 15px; }
.app-root .bike-editor-section > summary strong { font-size: var(--type-item); }
.app-root .bike-editor-section > summary span { color: var(--muted); font-size: 12px; }
.app-root .bike-editor-section > :not(summary) { margin-top: 12px; }
.app-root .bike-build-layout + .component-shelf > :is(.empty-spec-card,.bike-build-wheelset-grid) { margin-top: 16px; }
.app-root .bike-build-layout + .component-shelf .setup-type-card { padding: var(--card-inset); border-radius: 8px; border-color: var(--line); background: var(--panel-muted); }
.app-root .bike-build-layout + .component-shelf :is(.empty-spec-card,.bike-spec-card) { gap: 12px; }
.app-root .bike-retail-copy { gap: 8px; }
.app-root .bike-retail-copy .chip-row { margin-top: 4px; }
.app-root .bike-retail-copy .hero-copy { margin-top: 0; }
.app-root .bike-hero-brand { font-family: inherit; font-size: 13px; line-height: 1.5; }
.app-root .gear-page-hero-media .gear-hero-visual { min-height: clamp(220px,35vw,420px); border-radius: 8px; border: 0; }
.app-root .gear-hero-photo-button :is(.gear-hero-badge,.gear-hero-plate) { display: none; }
.app-root .bike-retail-proof-strip { margin: 0; gap: 6px 16px; justify-content: flex-start; }
.app-root .bike-retail-highlight-surface { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.app-root .bike-retail-highlight-card { padding: 8px 16px; border: 0; border-left: 1px solid var(--line); background: transparent; border-radius: 0; }
.app-root .bike-retail-highlight-card strong { font: 600 20px/1.4 Sora,sans-serif; }
.app-root .bike-retail-highlight-card :is(span,small) { font-size: 12px; }
.app-root .bike-retail-highlight-grid { gap: 16px; }
.bike-setup-facts { display: grid; gap: 0; margin: 0; }
.bike-setup-facts > div { display: grid; grid-template-columns: minmax(90px,.75fr) minmax(0,1.25fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.bike-setup-facts dt { color: var(--muted); }
.bike-setup-facts dd { margin: 0; font-weight: 500; }
.setup-answer-help { margin-top: 6px; font-size: 12px; font-weight: 400; }
.setup-answer-help summary, .bike-history-disclosure > summary { cursor: pointer; min-height: 36px; padding-block: 6px; }
.bike-history-disclosure { border-top: 1px solid var(--line); padding-top: 8px; }
.app-root :is(.gear-page-main-column,.gear-page-side-column) { gap: 20px; }
.app-root :is(.gear-page-shell .surface,.gear-page-shell .bike-section) { padding: 16px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.app-root .bike-retail-buybox { padding: 0; border: 0; box-shadow: none; background: transparent; }
.app-root .bike-retail-title, .app-root .gear-page-hero h1 { font-size: clamp(28px,4vw,44px); }
.app-root .bike-hero-brand { font-size: 13px; }
.app-root .bike-build-legend-row, .app-root .bike-build-field-pill { display: grid; grid-template-columns: minmax(90px,.75fr) minmax(0,1.25fr); gap: 12px; padding: 8px 0; background: transparent; border-radius: 0; }
.app-root :is(.bike-build-legend-row,.bike-build-field-pill) :is(span,strong) { text-align: left; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.app-root .bike-build-legend-head { margin-bottom: 8px; }
.app-root .bike-build-legend-index { width: 24px; height: 24px; min-width: 24px; border-radius: 4px; font-size: 12px; }
.app-root .modal-card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.app-root .modal-card > .bike-head { padding-right: 48px; margin-bottom: 16px; }
.app-root .modal-card > .bike-head .icon-button { right: 12px; top: 12px; }
.app-root .activity-sensor-modal-card > .activity-sensor-modal-head { top: -24px; margin: -24px -24px 0; padding: 16px 68px 16px 24px; }
.app-root .activity-sensor-modal-head .icon-button { position: absolute; right: 12px; top: 12px; }
.app-root .modal-card h2 { font-size: clamp(24px, 2.2vw, 28px); }
.app-root .modal-card .inventory-form { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 16px; margin-top: 16px; }
.app-root .build-share-modal { width: min(100%,560px); }
.app-root .build-share-modal .bike-head { padding-right: 48px; margin-bottom: 16px; }
.app-root .build-share-modal .build-share-form { display: grid; gap: 12px; }
.app-root .build-share-modal .build-share-form .solid-button { justify-self: start; }
.app-root .build-share-link-panel { display: grid; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-root .build-share-link-panel .action-row { margin-top: 0; }
.app-root .build-share-error { color: #a23824; }
.app-root .mode-switch { display: inline-flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 12px 0 0; border: 0; border-radius: 0; background: transparent; }
.app-root .mode-chip { min-height: var(--control-height); padding: 8px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font: 500 13px/1.5 Sora,sans-serif; color: var(--muted); }
.app-root .mode-chip.active { background: transparent; color: var(--text); border-bottom-color: var(--accent); }
.app-root .calendar-grid { gap: 6px; }
.app-root .calendar-day { padding: 10px; border-radius: 6px; gap: 8px; }
.app-root .calendar-day-head { justify-content: flex-start; gap: 8px; }
.app-root .calendar-day-head strong { font-family: inherit; font-size: 14px; }
.app-root .calendar-day-head span { font-size: 11px; }
.app-root .calendar-entry { padding: 8px; border: 0; border-radius: 4px; }
.app-root .service-logs-month-stats, .app-root .service-logs-overview-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; }
.app-root .service-logs-month-stats > span, .app-root .service-logs-mini-chip { min-height: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; line-height: 1.5; font-weight: 400; }
.app-root .calendar-agenda-day { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.app-root .calendar-agenda-date { border-radius: 4px; }
.app-root .calendar-agenda-date strong { font-family: inherit; font-size: 20px; }
.app-root .calendar-agenda-day-head, .app-root .calendar-mobile-agenda-head { justify-content: flex-start; gap: 12px; }
.app-root .calendar-mobile-agenda .calendar-entry { border-radius: 4px; }
.app-root .task-card-detail { background: transparent; border: 0; padding: 0; }
.app-root .task-card-detail .task-row { align-items: baseline; }
.app-root .task-card-detail .task-timing-heading { margin: 6px 0 0; font-size: clamp(25px,3vw,32px); line-height: 1.15; }
.app-root .task-card-detail .task-copy { margin-top: 8px; }
.app-root .task-card-detail .task-meta-row { margin: 14px 0 0; }
.app-root .task-card-detail .reminder-interval { margin: 12px 0 0; }
.app-root .task-card-detail .reminder-interval strong { margin-right: 8px; color: var(--text); }
.app-root .task-card-detail .reminder-importance { margin: 8px 0 0; color: var(--text); }
.app-root .task-card-detail .reminder-explanation { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.app-root .task-card-detail .reminder-explanation summary { width: fit-content; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.app-root .task-card-detail .reminder-explanation .detail-line { margin: 8px 0 0; }
.app-root .task-card-detail .meter { height: 4px; margin-top: 12px; }
.app-root .mechanic-chat-card { border-radius: 12px; box-shadow: 0 6px 28px #18212d14; }
.app-root .guide-filter-panel, .app-root .mechanic-directory-controls { padding: 12px; background: var(--panel-muted); border: 0; border-radius: 6px; gap: 12px; }
.app-root .mechanic-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; box-shadow: none; }
.app-root .mechanic-card-photo { border-radius: 6px; }
.app-root .mechanics-directory .mechanic-directory-controls { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.app-root .mechanics-directory .mechanic-card { border: 1px solid var(--line); border-radius: 8px; padding: 0; }
.app-root .mechanics-directory .mechanic-card-content { pointer-events: auto; }
.app-root .mechanic-map { border-radius: 8px; }
.app-root .admin-mechanic-directory-row { border-radius: 6px; padding: 12px; gap: 12px; }
.app-root .admin-mechanic-directory-filters { padding: 12px; gap: 12px; border-radius: 6px; }
.app-root .admin-stack .surface { border: 0; padding: 16px 0; box-shadow: none; }
.app-root .admin-card { background: var(--panel-muted); border: 0; }
.app-root .admin-card .inventory-content { padding: 16px; }
.app-root .admin-card .inventory-mini-form { padding: 0; background: transparent; border: 0; }
.app-root .admin-card .inventory-mini-form label:not(.check-row) { padding: 0; border: 0; background: transparent; }
.app-root .record-item { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.app-root :is(button,a,[role=button],input,select,textarea):focus-visible { outline: 3px solid #fc4c0270; outline-offset: 3px; }

/* Public application and workshop-owner workspace use the same control scale. */
.mechanics-public-page { background: #fff; font-size: 14px; }
.mechanics-public-page :is(h1,h2,h3) { font-family: Sora,sans-serif; line-height: 1.3; letter-spacing: -.025em; }
.mechanics-apply-section { padding: 32px 0 48px; }
.mechanics-apply-section h1 { font-size: 30px; margin: 0 0 12px; }
.mechanics-apply-section h2 { font-size: 22px; }
.mechanics-apply-grid { gap: 24px; grid-template-columns: minmax(220px,.7fr) minmax(0,1.5fr); }
.mechanics-public-page :is(.mechanics-application-form,.mechanics-booking-manager,.mechanics-dashboard-connect,.mechanics-booking-request,.mechanics-review-request,.mechanics-exact-location,.mechanics-messenger-fieldset,.mechanics-current-photos,.mechanics-feedback) { padding: 16px; border-radius: 8px; box-shadow: none; border-color: var(--line); background: #f7f8f9; }
.mechanics-public-page :is(.mechanics-primary-button,.mechanics-secondary-button,.mechanics-primary-link) { min-height: var(--control-height); padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.mechanics-public-page :is(.mechanics-form-grid,.mechanics-booking-request-list,.mechanics-review-request-list) { gap: 16px; }
.mechanics-public-page :is(.mechanics-booking-manager-head,.mechanics-booking-request-head,.mechanics-review-request-head,.mechanics-exact-location-head,.mechanics-city-selection) { justify-content: flex-start; gap: 12px; }
.mechanics-public-page :is(input,select,textarea) { border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 12px; font: inherit; }
.mechanics-public-page input:not([type=checkbox]):not([type=radio]):not([type=file]), .mechanics-public-page select:not([multiple]) { height: var(--control-height); min-height: var(--control-height); }
.mechanics-public-page input:is([type=checkbox],[type=radio]) { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: 0 0 18px; }
.mechanics-public-page .mechanics-messenger-options label { border: 0; padding: 6px 0; background: transparent; border-radius: 0; }
.mechanics-public-page .mechanics-booking-manager { margin-top: 24px; }
.mechanics-public-page .mechanics-account-link { border-radius: 6px; border: 0; }
@media(max-width:1000px) {
  .app-root .app-unified-header { grid-template-columns: minmax(0,1fr) auto; }
  .app-root .app-wordmark { grid-column: 1; grid-row: 1; justify-self: start; }
  .app-root .header-identity-group { grid-column: 2; grid-row: 1; }
  .app-root .header-action-bar { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
}
@media(max-width:900px) {
  .app-root { padding: 12px 16px 48px; }
  .app-root .dashboard-header { gap: 12px; }
  .app-root .dashboard-header .topbar { width: 100%; }
  .mechanics-apply-grid { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
  :root { --control-height: 44px; --type-page: 30px; --type-section: 25px; --type-group: 19px; --type-item: 17px; }
  .app-root .app-unified-header { min-height: 56px; }
  .app-root .app-wordmark { font-size: 21px; }
  .app-root .header-action-bar { align-items: stretch; flex-direction: column; }
  .app-root .header-status { flex: none; }
  .app-root .header-action-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-root .header-action-buttons button { width: 100%; white-space: normal; }
  .app-root .header-action-buttons button:nth-child(3) { grid-column: 1 / -1; }
  .app-root > .mechanic-chat-trigger { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .app-root .bike-build-scheme-card { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; grid-template-areas: "heading" "description" "visual" "source"; }
  .app-root .bike-build-scheme-frame { width: 100%; }
  .app-root .reminder-bike-grid { grid-template-columns: 1fr; gap: 16px; }
  .app-root .reminder-head-meta { max-width: 100%; }
  .app-root .reminder-filter-control select { width: min(230px,calc(100vw - 126px)); }
  .app-root .reminder-bike-group { padding: var(--card-inset); }
  .app-root .reminder-workshop-group { padding-inline: 0; }
  .app-root .reminder-bike-heading h3 { font-size: var(--type-group); }
  .app-root .tab-strip { gap: 0 14px; }
  .app-root .tab-button { font-size: 12px; }
  .app-root :is(input,select,textarea) { font-size: 16px; }
  .app-root .section-surface { padding: 16px 0; }
  .app-root .modal-card { padding: 16px; }
  .app-root .activity-sensor-modal-card > .activity-sensor-modal-head { top: -16px; margin: -16px -16px 0; padding: 12px 68px 12px 16px; }
  .app-root .modal-card h2 { font-size: 24px; }
  .app-root .text-button { min-height: 44px; }
  .app-root .identity-copy { max-width: 115px; }
  .app-root .identity-name { overflow-wrap: anywhere; }
  .app-root .dashboard-header .topbar { gap: 12px; }
  .app-root .mechanic-chat-trigger-copy { display: none; }
  .app-root .mechanic-chat-trigger { min-width: 44px; }
  .app-root .primary-action-cluster :is(.solid-button,.ghost-button) { flex: 0 1 auto; width: auto; }
  .app-root .bike-component-rows > div { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .app-root .bike-build-legend-grid { grid-template-columns: 1fr; }
  .mechanics-public-page :is(input,select,textarea) { font-size: 16px; }
  .mechanics-apply-section { padding: 24px 0; }
  .mechanics-apply-section h1 { font-size: 26px; }
}

.app-root .mechanics-directory .mechanic-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  justify-content: stretch;
  gap: 12px;
}

.app-root .mechanics-directory .mechanic-card-head > :first-child {
  min-width: 0;
}

.app-root .mechanics-directory .mechanic-rating {
  display: grid;
  justify-items: end;
  align-self: start;
  margin: 0;
  text-align: right;
}