/* Readable type, generated service artwork and the shared directory / taxi screens. */
.reference-design{--muted:#63736a}
.reference-design .ico{width:23px;height:23px;stroke-width:1.8}
.reference-design .eyebrow,.reference-design .modal-eyebrow{font-size:11px;letter-spacing:.8px}
.reference-design .micro{display:block;font-size:13px!important;line-height:1.6}
.reference-design .source-note,.reference-design .form-hint{font-size:14px;line-height:1.7}
.reference-design .muted{font-size:14px}
.reference-design .task-name{font-size:16px}
.reference-design .task-detail{font-size:14px}
.reference-design .task-badge{font-size:13px}
.reference-design .plan-note,.reference-design .date-pill,.reference-design .stat-footer{font-size:14px}
.reference-design .vehicle-info p{font-size:14px}
.reference-design .vehicle-caption{font-size:12px}
.reference-design .vehicle-data small{font-size:13px}
.reference-design .expense-lines>div{font-size:14px}
.reference-design .btn,.reference-design .text-link{font-size:14px}
.reference-design label,.reference-design legend{font-size:14px}
.reference-design .subtitle,.reference-design .page-head .subtitle{font-size:16px;max-width:650px}
.reference-design .page-head{gap:20px}
.reference-design .page-head .car-switch{width:100%;max-width:420px}
.reference-design .page-head .car-switch select{width:100%;max-width:none;font-size:16px}
.reference-design .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0}
.reference-design .metric-grid .card{padding:24px;min-height:180px}
.reference-design .metric-grid .card>p{margin:0 0 18px;font-size:16px;line-height:1.5;color:var(--muted)}
.reference-design .metric-grid strong{display:block;font-size:36px;line-height:1.2;letter-spacing:-1px}
.reference-design .metric-grid strong small{display:block;margin:8px 0 16px;font-size:17px;font-weight:400;letter-spacing:0}
.reference-design .metric-grid .micro{font-size:13px!important}
.reference-design .expense-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto auto;align-items:end;gap:14px;margin:24px 0}
.reference-design .expense-toolbar label{margin:0;font-size:14px}
.reference-design .expense-toolbar input,.reference-design .expense-toolbar select{width:100%;margin:6px 0 0;font-size:16px;min-height:48px}
.reference-design .expense-toolbar .btn{min-height:48px;font-size:15px;white-space:nowrap}
.reference-design .cost-row b{font-size:16px}
.reference-design .cost-row small{font-size:14px}
.reference-design .cost-row .amount{font-size:17px}
.reference-design .category-row{font-size:15px;line-height:1.6}
.reference-design .section-head .text-link{font-size:14px}
.generated-icon{display:block;flex:0 0 auto;width:96px;height:96px;background-image:url('assets/icons/automotive-sprite.png');background-size:400% 200%;background-repeat:no-repeat;border:0;border-radius:0}
.generated-icon.icon-0{background-position:0 0}
.generated-icon.icon-1{background-position:33.333333% 0}
.generated-icon.icon-2{background-position:66.666667% 0}
.generated-icon.icon-3{background-position:100% 0}
.generated-icon.icon-4{background-position:0 100%}
.generated-icon.icon-5{background-position:33.333333% 100%}
.generated-icon.icon-6{background-position:66.666667% 100%}
.generated-icon.icon-6{clip-path:inset(0 6% 0 0)}
.generated-icon.icon-7{background-position:100% 100%}
.reference-design .specialty-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}
.reference-design .specialty-grid>button{padding:10px 6px;gap:12px;border-radius:18px}
.reference-design .specialty-grid>button:active{background:var(--field)}
.reference-design .specialty-grid b{font-size:16px;line-height:1.4}
.reference-design .specialty-grid small{font-size:14px;line-height:1.5;color:var(--muted)}
.reference-design .specialist-top{align-items:center;gap:14px}
.reference-design .profile-icon{width:66px;height:66px}
.reference-design .specialist-top h3{font-size:21px}
.reference-design .specialist-top .muted{margin:0;font-size:14px}
.reference-design .specialist-card .chips{margin:20px 0}
.reference-design .chips span{font-size:13px;padding:7px 11px}
.reference-design .specialist-card .card-detail{display:flex;align-items:flex-start;gap:10px;margin:14px 0;font-size:15px;line-height:1.6}
.reference-design .card-detail>.ico{width:20px;height:20px;flex:none;margin-top:2px;color:var(--muted)}
.reference-design .brand-line{font-size:15px;line-height:1.6;margin:18px 0}
.reference-design .specialist-filter-grid label{font-size:14px}
.reference-design .filter-chips button{font-size:14px;padding:10px 15px;min-height:44px}
.reference-design .search-wrap input[type=search],.reference-design .search-wrap input[type=search]:focus{font-size:16px;min-height:48px}
.reference-design .directory-footer{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:22px}
.directory-footer .text-link{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.directory-footer .text-link .ico{width:17px;height:17px}
.reference-design .result-count{font-size:15px;color:var(--muted);margin:0 0 18px}
.result-count b{color:var(--ink)}
.reference-design .loading-state{min-height:160px;display:grid;place-items:center;color:var(--muted);font-size:16px}
.reference-design .network-error{display:flex;align-items:flex-start;gap:15px;border-radius:20px;padding:24px;background:#fff1e9;color:#855331;margin:20px 0}
.network-error p{margin:8px 0 0}
.reference-design .community-empty{text-align:center;padding:38px 24px}
.community-empty>.generated-icon{width:120px;height:120px;margin:0 auto 20px}
.reference-design .community-empty h3{font-size:23px;margin:14px 0}
.reference-design .community-empty p{max-width:470px;font-size:16px;line-height:1.7;color:var(--muted);margin:0 auto 24px}
.community-empty>.btn{max-width:100%}
.reference-design .profile-heading{display:flex;align-items:center;gap:20px;margin:14px 0 24px}
.reference-design .profile-heading h2{margin:0;padding:0 25px 0 0}
.reference-design .week-schedule>div{font-size:15px;padding:12px 5px}
.reference-design .detail-box{font-size:16px;border:1px solid var(--line);border-radius:18px;background:var(--field);padding:20px}
.reference-design dialog p{font-size:15px;line-height:1.7}
.reference-design .consent-check{display:flex;align-items:flex-start;gap:10px;margin-top:24px;font-size:14px;font-weight:400;line-height:1.6}
.reference-design .consent-check input{margin-top:4px}
.account-panel{margin-top:24px}
.reference-design .account-panel h2{margin:12px 0}
.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.intercity-home{display:flex;align-items:center;gap:22px;width:100%;text-align:left}
.intercity-home>.generated-icon{width:110px;height:110px}
.intercity-home>span:not(.generated-icon){display:flex;flex:1;flex-direction:column;gap:7px;min-width:0}
.intercity-home small{font-size:11px;letter-spacing:1px;color:var(--green);font-weight:700}
.intercity-home b{font-size:23px;line-height:1.3}
.intercity-home>span>span{font-size:15px;color:var(--muted)}
.taxi-filters{margin-bottom:24px}
.route-filter-row{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:end;gap:14px}
.route-filter-row label{margin:0}
.reference-design .swap-route{height:48px;width:46px;min-width:46px;margin-bottom:0}
.taxi-filter-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;margin-top:20px}
.taxi-filter-grid label{margin:0}
.taxi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:22px}
.trip-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.trip-time{display:block;font-size:30px;font-weight:700;line-height:1.2}
.trip-time small{display:block;font-size:14px;line-height:1.6;color:var(--muted);font-weight:400;margin-top:8px}
.trip-price{font-size:24px;font-weight:700;line-height:1.25;text-align:right;white-space:nowrap}
.trip-price small{display:block;margin-top:6px;font-size:13px;color:var(--muted);font-weight:400}
.route-stops{position:relative;margin:28px 0 24px}
.route-stops>div{display:flex;align-items:center;gap:14px;min-height:42px;font-size:21px;line-height:1.4}
.route-stops i{display:block;width:12px;height:12px;flex:none;border-radius:50%;border:3px solid var(--green);background:var(--surface)}
.route-stops>span{display:block;height:12px;margin-left:5px;border-left:2px dashed #bacdc0}
.trip-card-facts{display:flex;flex-wrap:wrap;gap:12px 20px;margin-bottom:18px}
.trip-card-facts>span{display:flex;align-items:center;gap:7px;font-size:15px}
.trip-card-facts .ico{width:20px;height:20px;color:var(--muted)}
.reference-design .trip-timetable{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.trip-timetable .ico{width:19px;height:19px;margin-top:2px}
.own-label{display:inline-block;background:#e2f8eb;color:#16834a;border-radius:10px;font-size:13px;padding:5px 10px;margin-bottom:16px}
.reference-design .taxi-card .service-bottom{margin-top:24px}
.trip-illustration{width:150px;height:150px;margin:0 auto 24px}
.reference-design .weekday-options{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.reference-design .weekday-options label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:64px;margin:0;padding:8px 0;border-radius:10px;background:var(--field);font-size:14px}
.reference-design .weekday-options label:has(input:checked){background:#e0f5e9;color:#187342}
.reference-design #nav button[data-page=taxi] .ico{color:inherit}
@media(max-width:1050px){.reference-design .expense-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.taxi-grid{grid-template-columns:1fr}.reference-design .metric-grid .card{padding:20px}}
@media(max-width:700px){
  .reference-design #nav button[data-page=plan]{display:none}
  .reference-design #nav button[data-page=taxi]{display:flex;order:3}
  .reference-design #nav .nav-label-compact{font-size:11px;letter-spacing:0}
  .reference-design #nav{gap:0}
  .reference-design #nav button{padding:5px 0}
  .reference-design #nav button[data-page=services] .nav-icon{width:39px;height:39px}
  .reference-design #nav .ico{width:24px;height:24px;stroke-width:1.8}
  .reference-design .page-head h1{font-size:29px}
  .reference-design .page-head .subtitle{font-size:15px;line-height:1.6}
  .reference-design .page-head>.btn{font-size:15px;min-height:48px}
  .reference-design .page-head .car-switch{width:100%;max-width:none}
  .reference-design .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
  .reference-design .metric-grid>.card:first-child{grid-column:1/-1;min-height:160px}
  .reference-design .metric-grid .card{padding:22px 18px;min-height:190px;border-radius:23px}
  .reference-design .metric-grid .card>p{font-size:15px;line-height:1.5;min-height:44px;margin-bottom:14px}
  .reference-design .metric-grid>.card:first-child>p{min-height:0}
  .reference-design .metric-grid strong{font-size:31px}
  .reference-design .metric-grid>.card:first-child strong{font-size:39px}
  .reference-design .metric-grid strong small{font-size:15px;line-height:1.4;margin:8px 0 14px}
  .reference-design .metric-grid .micro{font-size:13px!important}
  .reference-design .expense-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .reference-design .expense-toolbar .btn{font-size:15px;min-height:48px}
  .reference-design .expense-toolbar input,.reference-design .expense-toolbar select{font-size:15px;padding:11px 10px}
  .reference-design .cost-row{flex-wrap:wrap}
  .reference-design .cost-row b{font-size:15px}
  .reference-design .cost-row small{font-size:13px;line-height:1.6}
  .reference-design .cost-row .amount{font-size:16px}
  .reference-design .specialty-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .reference-design .specialty-grid>button{gap:10px;padding:8px 0}
  .reference-design .specialty-grid b{font-size:16px}
  .reference-design .specialty-grid small{font-size:14px;line-height:1.5}
  .reference-design .generated-icon{width:90px;height:90px}
  .reference-design .specialty-section .section-head{align-items:center;gap:14px}
  .reference-design .section-head .text-link{font-size:13px;max-width:115px}
  .reference-design .specialist-filters{padding:20px}
  .reference-design .filter-chips{gap:8px}
  .reference-design .filter-chips button{font-size:14px;padding:9px 13px;min-height:43px}
  .reference-design .specialist-filter-grid{grid-template-columns:1fr;gap:18px}
  .reference-design .specialist-filter-grid label{font-size:14px}
  .reference-design .specialist-filter-grid input,.reference-design .specialist-filter-grid select{font-size:16px}
  .reference-design .search-wrap input[type=search],.reference-design .search-wrap input[type=search]:focus{font-size:16px}
  .reference-design .directory-footer{gap:12px 18px}
  .reference-design .directory-footer .text-link{font-size:14px}
  .reference-design .community-empty{padding:32px 22px}
  .reference-design .community-empty .generated-icon{width:110px;height:110px}
  .reference-design .community-empty h3{font-size:23px}
  .reference-design .community-empty p{font-size:16px}
  .reference-design .profile-icon{width:60px;height:60px}
  .reference-design .specialist-top h3{font-size:20px}
  .reference-design .specialist-top .muted{font-size:14px}
  .reference-design .specialist-top{gap:11px}
  .reference-design .specialist-card .favorite{width:38px;height:38px;min-width:38px}
  .reference-design .specialist-card .card-detail{font-size:15px}
  .reference-design .brand-line{font-size:15px}
  .reference-design .source-note,.reference-design .form-hint{font-size:14px;line-height:1.7}
  .reference-design .service-bottom .btn{font-size:14px}
  .reference-design .account-actions{display:grid;grid-template-columns:1fr}
  .reference-design .intercity-home{gap:15px;padding:22px 18px}
  .reference-design .intercity-home>.generated-icon{width:85px;height:85px}
  .reference-design .intercity-home b{font-size:20px}
  .reference-design .intercity-home small{font-size:10px;letter-spacing:.5px}
  .reference-design .intercity-home>span>span{font-size:14px}
  .intercity-home>.ico{display:none}
  .route-filter-row{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:9px}
  .reference-design .route-filter-row label{font-size:14px}
  .reference-design .route-filter-row input{font-size:15px;padding:12px 9px}
  .reference-design .swap-route{width:42px;min-width:42px;height:48px;padding:8px}
  .taxi-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .taxi-filter-grid>label:first-child{grid-column:1/-1}
  .reference-design .taxi-filter-grid label{font-size:14px}
  .taxi-grid{gap:18px}
  .reference-design .taxi-card{padding:24px 22px}
  .trip-time{font-size:31px}
  .trip-price{font-size:25px}
  .trip-time small{font-size:14px}
  .route-stops>div{font-size:22px}
  .reference-design .trip-illustration{width:150px;height:150px}
  .reference-design .weekday-options{gap:5px}
  .reference-design .weekday-options label{font-size:13px}
  .reference-design .consent-check{font-size:14px;line-height:1.6}
  .reference-design .form-grid label{font-size:14px}
  .reference-design .check-options label{font-size:14px}
  .reference-design .form-buttons .btn{font-size:15px}
  .reference-design .profile-heading{gap:12px}
  .reference-design .profile-heading>.generated-icon{width:70px;height:70px}
  .reference-design .profile-heading h2{font-size:23px}
}
@media(max-width:360px){
  .reference-design #nav .nav-label-compact{font-size:10px}
  .route-filter-row{grid-template-columns:1fr 42px;align-items:end}
  .route-filter-row>label:last-child{grid-column:1/-1}
  .reference-design .specialty-grid b{font-size:15px}
  .reference-design .specialty-grid small{font-size:13px}
  .reference-design .metric-grid{grid-template-columns:1fr}
  .reference-design .metric-grid>.card{min-height:155px}
}
.reference-design.dark .own-label,.reference-design.dark .weekday-options label:has(input:checked){background:#284e37;color:#a5e7bf}
.reference-design.dark .network-error{background:#49352b;color:#f2c7a4}