/* Island Car Log — Professional UI system
   Visual-only consistency layer. Keeps existing Guernsey palette, page imagery and app logic. */

:root{
  --icl-blue:#1677d2;
  --icl-blue-deep:#0f5fb0;
  --icl-green:#479d68;
  --icl-navy:#071a2d;
  --icl-ink:#111827;
  --icl-muted:#64748b;
  --icl-line:rgba(148,163,184,.34);
  --icl-surface:rgba(255,255,255,.86);
  --icl-surface-soft:rgba(248,250,252,.82);
  --icl-radius-sm:12px;
  --icl-radius:16px;
  --icl-radius-lg:24px;
  --icl-shadow-sm:0 6px 18px rgba(7,26,45,.08);
  --icl-shadow:0 18px 48px rgba(7,26,45,.13);
  --icl-focus:0 0 0 4px rgba(22,119,210,.16);
  --icl-ease:cubic-bezier(.2,.8,.2,1);
}

html{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  scroll-padding-top:88px;
}
body{
  line-height:1.55;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
img{max-width:100%}

h1,h2,h3,h4{
  text-wrap:balance;
  letter-spacing:-.025em;
}
p{ text-wrap:pretty; }

/* Navigation */
.nav, header{
  min-height:72px;
  padding-left:clamp(16px,4vw,52px)!important;
  padding-right:clamp(16px,4vw,52px)!important;
}
.navlinks{
  align-items:center;
  gap:clamp(18px,2.4vw,32px)!important;
}
.navlinks a,
header .back,
.nav .back{
  border-radius:10px;
  transition:color .18s ease,background .18s ease,opacity .18s ease;
}
.navlinks a:hover{color:var(--icl-blue)}
.navlinks a:focus-visible,
header .back:focus-visible,
.nav .back:focus-visible{
  outline:2px solid rgba(22,119,210,.65);
  outline-offset:4px;
}

/* Cards and surfaces: same geometry and depth throughout, without replacing page artwork. */
.card,
.form,
.garage-access-panel,
.garage-point,
.account-bar,
.docs-card,
.dashboard-stat,
.car-stat,
.modal-inner,
.modal-content,
.panel,
.glass-panel{
  border-radius:var(--icl-radius-lg)!important;
}
.card,
.form,
.garage-access-panel,
.garage-point,
.modal-inner,
.modal-content,
.panel,
.glass-panel{
  box-shadow:var(--icl-shadow)!important;
}
.card,
.form,
.garage-access-panel,
.garage-point{
  transition:transform .22s var(--icl-ease),box-shadow .22s var(--icl-ease),border-color .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .features .card:hover,
  .garage-point:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 54px rgba(7,26,45,.16)!important;
  }
}

/* Controls */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  min-width:0;
  max-width:100%;
  min-height:48px;
  border-radius:var(--icl-radius-sm)!important;
  border:1px solid rgba(148,163,184,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 3px 10px rgba(7,26,45,.05)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
textarea{min-height:112px;resize:vertical}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:rgba(22,119,210,.78)!important;
  box-shadow:var(--icl-focus),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
input::placeholder,textarea::placeholder{color:#8190a2;opacity:1}
label{
  font-weight:700!important;
  letter-spacing:.005em;
}

/* Action hierarchy */
button:not(.check-engine-light),
a.primary,
a.secondary,
a.cta,
.btn,
.button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px!important;
  font-weight:800!important;
  line-height:1.15;
  transition:transform .18s var(--icl-ease),box-shadow .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease!important;
}
a.primary,a.cta,
button:not(.secondary):not(.danger):not(.delete):not(.check-engine-light):not(.service-edit){
  box-shadow:0 9px 22px rgba(22,119,210,.22),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
a.secondary,.secondary{
  box-shadow:var(--icl-shadow-sm)!important;
}
button:not(.check-engine-light):focus-visible,
a.primary:focus-visible,
a.secondary:focus-visible,
a.cta:focus-visible,
.btn:focus-visible,
.button:focus-visible{
  outline:2px solid rgba(255,255,255,.92)!important;
  outline-offset:3px!important;
  box-shadow:var(--icl-focus),0 10px 24px rgba(7,26,45,.16)!important;
}
@media (hover:hover) and (pointer:fine){
  button:not(.check-engine-light):not(:disabled):hover,
  a.primary:hover,a.secondary:hover,a.cta:hover,.btn:hover,.button:hover{
    transform:translateY(-1px);
  }
}
button:not(.check-engine-light):not(:disabled):active,
a.primary:active,a.secondary:active,a.cta:active,.btn:active,.button:active{
  transform:translateY(0) scale(.985);
}
button:disabled{cursor:not-allowed!important;opacity:.58!important}

/* Keep compact in-card vehicle controls compact. */
.car-card .car-actions button,
.car-card .service-edit{
  min-height:40px!important;
  border-radius:12px!important;
}
.car-card .check-engine-light{
  border-radius:14px!important;
}

/* Content hierarchy */
.section{padding-top:clamp(56px,7vw,84px)!important;padding-bottom:clamp(56px,7vw,84px)!important}
.section-inner{width:min(1180px,100%);margin-inline:auto}
.kicker,.eyebrow{
  font-size:12px!important;
  letter-spacing:.11em!important;
  font-weight:900!important;
}
.note,.muted,.help-text,.form-note,.small,.description,.subtitle{
  line-height:1.55;
}

/* Modals / sheets */
.modal{
  padding:clamp(12px,3vw,28px)!important;
  overscroll-behavior:contain;
}
.modal-inner,.modal-content{
  width:min(100%,980px);
  max-height:min(90dvh,900px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.62)!important;
}
.modal-inner > h2:first-child,
.modal-content > h2:first-child{
  margin-top:0;
}
.modal .grid > *,
.modal [class*="grid"] > *,
.grid > *{
  min-width:0;
}

/* Status messages */
.status,.success,.error{
  border-radius:12px!important;
}
.status{
  border:1px solid rgba(71,157,104,.18);
}
.status.error{
  border-color:rgba(185,44,44,.16);
}

/* Profile / Garage coherence */
#app .profile-card,
#app .garage-card{
  border-radius:26px!important;
  box-shadow:0 22px 56px rgba(0,12,30,.20)!important;
}
#app .account-bar,
#app .dashboard-stat,
#app .car-stat,
#app .docs-card{
  border-radius:15px!important;
}
#app .profile-card h3,
#app .garage-card h2{
  border-radius:11px!important;
}
.cars{gap:18px!important}
.car-card{
  border-radius:22px!important;
  box-shadow:0 18px 42px rgba(0,0,0,.26)!important;
}
.car-card .dashboard-card{border-radius:17px!important}

/* Footer */
.footer{
  padding-top:34px!important;
  padding-bottom:34px!important;
}
.footer-links{
  align-items:center;
  gap:12px 20px!important;
}
.footer-links a{
  border-radius:10px;
  padding:8px 2px;
}

/* Responsive rhythm */
@media(max-width:850px){
  main{padding-left:16px!important;padding-right:16px!important}
  .nav,header{min-height:68px}
  .section{padding-left:18px!important;padding-right:18px!important}
}
@media(max-width:700px){
  .card,.form,.garage-access-panel,.modal-inner,.modal-content{
    border-radius:20px!important;
  }
  .card,.form{padding:20px!important}
  .grid{gap:14px!important}
  .hero-buttons{gap:10px!important}
  .hero-buttons > a{
    min-height:48px;
  }
  .modal{padding:10px!important}
  .modal-inner,.modal-content{
    width:100%!important;
    max-width:100%!important;
    max-height:92dvh;
  }
  .modal .grid,
  .modal [class*="grid"]{
    min-width:0;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}
@media(max-width:520px){
  .nav,header{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .footer{padding-left:18px!important;padding-right:18px!important}
  .footer-inner{gap:18px!important}
  .card,.form{padding:18px!important}
}

/* Motion accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =======================================================================
   Professional product pass — 2026-10-03
   Page-scoped refinements layered over the existing Island Car Log theme.
   ======================================================================= */

:root{
  --icl-page-width:1180px;
  --icl-copy-width:720px;
  --icl-control-radius:13px;
  --icl-card-radius:22px;
  --icl-section-gap:clamp(52px,7vw,88px);
}

/* Public-site navigation/footer alignment */
body.page-home .nav,
body.page-about .nav,
body.page-support .nav{
  min-height:74px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
}
body.page-home .nav > *,
body.page-about .nav > *,
body.page-support .nav > *{
  flex-shrink:0;
}
body.page-home .navlinks a{
  position:relative;
  padding:9px 2px;
  font-size:15px;
}
body.page-home .navlinks a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:var(--icl-blue);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s var(--icl-ease);
}
@media (hover:hover) and (pointer:fine){
  body.page-home .navlinks a:hover::after{transform:scaleX(1)}
}
body.page-home .footer-inner,
body.page-about .footer-inner,
body.page-support .footer-inner{
  width:min(var(--icl-page-width),100%);
}

/* Homepage — clearer product-led hero */
body.page-home .hero{
  padding-top:clamp(54px,7vw,88px)!important;
  padding-bottom:clamp(64px,8vw,100px)!important;
}
body.page-home .hero-inner{
  width:min(var(--icl-page-width),100%);
  grid-template-columns:minmax(0,1.03fr) minmax(320px,.97fr)!important;
  gap:clamp(36px,6vw,76px)!important;
}
body.page-home .hero h1{
  max-width:720px;
}
body.page-home .hero h2{
  color:#1f3146;
  letter-spacing:-.03em;
}
body.page-home .hero p{
  max-width:690px;
}
body.page-home .hero-buttons{
  align-items:center;
}
body.page-home .hero-buttons .primary,
body.page-home .hero-buttons .secondary{
  min-height:50px;
  padding-inline:22px!important;
  border-radius:13px!important;
}
body.page-home .local{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:11px;
  border:1px solid rgba(22,119,210,.14);
  background:rgba(255,255,255,.68);
  box-shadow:0 5px 18px rgba(7,26,45,.06);
  font-size:14px;
}
body.page-home .hero-product{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}
body.page-home .hero-product-glow{
  position:absolute;
  width:min(440px,88%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(22,119,210,.18),rgba(71,157,104,.08) 44%,transparent 70%);
  filter:blur(4px);
  pointer-events:none;
}
body.page-home .hero-device-card{
  position:relative;
  width:min(400px,92%);
  padding:14px 14px 18px;
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(240,247,252,.64));
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 30px 74px rgba(7,26,45,.18),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}
body.page-home .hero-device-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:3px 4px 11px;
  color:#5b6b7e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
}
body.page-home .hero-device-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--icl-green);
  box-shadow:0 0 0 4px rgba(71,157,104,.12);
}
body.page-home .hero-device-card img{
  display:block;
  width:100%;
  max-height:510px;
  object-fit:contain;
  object-position:center top;
  border-radius:22px;
}
body.page-home .hero-device-caption{
  padding:13px 8px 1px;
}
body.page-home .hero-device-caption strong,
body.page-home .hero-device-caption span{
  display:block;
}
body.page-home .hero-device-caption strong{
  color:#14253a;
  font-size:15px;
  margin-bottom:3px;
}
body.page-home .hero-device-caption span{
  color:#64748b;
  font-size:12px;
}

/* Homepage feature cards: professional line icons, consistent rhythm */
body.page-home #features .section-inner > h3{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
body.page-home .features{
  align-items:stretch;
}
body.page-home .feature-card{
  display:flex;
  flex-direction:column;
  min-height:250px;
  padding:26px!important;
  border-radius:20px!important;
}
body.page-home .feature-card h4{
  font-size:19px;
  line-height:1.2;
  margin-bottom:10px;
}
body.page-home .feature-card p{
  margin-top:auto;
  padding-top:4px;
}
body.page-home .feature-icon{
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  margin-bottom:22px!important;
  border-radius:14px!important;
  color:var(--icl-blue);
  background:linear-gradient(145deg,#eff7ff,#e4f1fb)!important;
  border:1px solid rgba(22,119,210,.12);
  box-shadow:0 8px 20px rgba(22,119,210,.08);
}
body.page-home .feature-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.page-home .garage-point{
  min-height:158px;
}
body.page-home .garage-access-panel{
  border-radius:22px!important;
}
body.page-home .garage-access-badge{
  letter-spacing:.08em!important;
}
body.page-home .beta-grid{
  width:min(var(--icl-page-width),100%);
}
body.page-home .beta .form{
  border-radius:22px!important;
}
body.page-home .beta .form input{
  margin-bottom:10px;
}

/* About + Support — turn content pages into clean customer-service pages */
body.page-about .main,
body.page-support .main{
  width:min(960px,calc(100% - 32px))!important;
  max-width:960px!important;
  margin-inline:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
body.page-about .main > .eyebrow,
body.page-support .main > .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(22,119,210,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff!important;
}
body.page-about .main > h1,
body.page-support .main > h1{
  max-width:760px;
  margin-bottom:18px!important;
  line-height:1.02!important;
}
body.page-about .intro,
body.page-support .intro{
  max-width:var(--icl-copy-width)!important;
  font-size:17px!important;
  line-height:1.7!important;
  margin-bottom:34px!important;
}
body.page-about .grid,
body.page-support .grid{
  gap:16px!important;
  margin-top:26px!important;
}
body.page-about .main .card,
body.page-support .main .card{
  padding:24px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 16px 38px rgba(7,26,45,.13)!important;
}
body.page-about .main .card h2,
body.page-support .main .card h2{
  color:#14253a!important;
  font-size:20px!important;
  line-height:1.2!important;
  margin-bottom:9px!important;
  text-shadow:none!important;
}
body.page-about .main .card p,
body.page-about .main .card li,
body.page-support .main .card p,
body.page-support .main .card li{
  color:#526174!important;
  line-height:1.65!important;
  text-shadow:none!important;
}
body.page-support .contact{
  margin-top:18px!important;
}
body.page-support .email{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:8px;
  padding:10px 14px!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--icl-blue),var(--icl-blue-deep))!important;
  border:1px solid rgba(22,119,210,.22)!important;
  box-shadow:0 8px 20px rgba(22,119,210,.18)!important;
}

/* Logged-in app — tighten hierarchy without changing feature-specific layouts */
body.page-profile main{
  width:min(1120px,100%);
  max-width:1120px!important;
}
body.page-profile .hero{
  margin-bottom:22px!important;
}
body.page-profile .hero h1{
  letter-spacing:-.035em;
}
body.page-profile #app > .account-bar{
  padding:14px 16px!important;
  border-radius:16px!important;
}
body.page-profile #app > .garage-card,
body.page-profile #app > .profile-card{
  padding:24px!important;
}
body.page-profile #app .garage-card > h2,
body.page-profile #app .profile-card > h2{
  letter-spacing:-.02em!important;
}
body.page-profile .car-card{
  padding:10px!important;
}
body.page-profile .car-card .dashboard-image{
  border-radius:14px!important;
}
body.page-profile .car-card .docs-card,
body.page-profile .car-card .service-box{
  border-radius:14px!important;
}
body.page-profile .modal-head{
  gap:16px;
  align-items:flex-start!important;
}
body.page-profile .modal-head h2{
  line-height:1.15!important;
}
body.page-profile .modal .close{
  flex:0 0 auto;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border-radius:13px!important;
}
body.page-profile .status{
  font-weight:650;
}
body.page-profile .dashboard-summary{
  gap:12px!important;
}

/* Password reset page — same product language as the main app */
body.page-password{
  padding:24px;
}
body.page-password > .card{
  width:min(460px,100%)!important;
  padding:30px!important;
  border-radius:24px!important;
}
body.page-password > .card .logo{
  margin:0 auto 20px!important;
}
body.page-password > .card h1{
  font-size:30px;
  line-height:1.08;
  margin-bottom:10px;
}
body.page-password > .card p{
  line-height:1.6;
  margin-bottom:20px;
}
body.page-password > .card label{
  margin-top:14px!important;
}
body.page-password > .card button{
  min-height:50px;
  border-radius:13px!important;
}

/* More restrained component geometry site-wide */
body.page-home button,
body.page-home a.primary,
body.page-home a.secondary,
body.page-home a.cta,
body.page-about button,
body.page-support button,
body.page-password button{
  border-radius:13px!important;
}
body.page-profile button:not(.check-engine-light){
  border-radius:12px!important;
}

/* Responsive polish */
@media(max-width:900px){
  body.page-home .hero-inner{
    grid-template-columns:1fr!important;
  }
  body.page-home .hero-product{
    margin-top:10px;
  }
  body.page-home .hero-device-card{
    width:min(390px,86%);
  }
}
@media(max-width:700px){
  body.page-home .hero{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.page-home .hero h1{
    font-size:clamp(42px,13vw,58px)!important;
  }
  body.page-home .hero h2{
    font-size:24px!important;
  }
  body.page-home .hero p{
    font-size:17px!important;
  }
  body.page-home .hero-device-card{
    width:min(350px,94%);
    padding:11px 11px 15px;
    border-radius:24px;
  }
  body.page-home .feature-card{
    min-height:0;
    padding:22px!important;
  }
  body.page-about .main,
  body.page-support .main{
    width:min(100% - 28px,960px)!important;
  }
  body.page-about .main .card,
  body.page-support .main .card{
    padding:20px!important;
  }
  body.page-profile main{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.page-profile #app > .garage-card,
  body.page-profile #app > .profile-card{
    padding:18px!important;
  }
}
@media(max-width:520px){
  body.page-home .hero-buttons{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body.page-home .hero-buttons > a{
    width:100%!important;
  }
  body.page-home .local{
    width:100%;
    justify-content:flex-start;
  }
  body.page-home .hero-device-card{
    width:100%;
  }
  body.page-password{
    padding:14px;
  }
  body.page-password > .card{
    padding:22px!important;
    border-radius:20px!important;
  }
}