:root{
  --red:#c20d12;--red2:#e21b22;--black:#08090b;--ink:#17191d;
  --silver:#d9dde2;--light:#f4f6f8;--white:#fff;--blue:#10273c;
  /* Supplier accent, sampled from The Japanese Car Company logo artwork. */
  --teal:#055364;--teal2:#0a7186;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--light);color:var(--ink)}
/* Brand watermark fixed behind page content (light surfaces) */
body::before{
  content:"";position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(80vw,880px);aspect-ratio:1170/1125;
  background:url('assets/watermark-dark.png') center/contain no-repeat;
  opacity:.045;pointer-events:none;z-index:-1
}
a{text-decoration:none;color:inherit}
.topbar{background:#050607;color:#fff;text-align:center;padding:8px 4%;font-size:12px;letter-spacing:.5px}
nav{
  display:flex;justify-content:space-between;align-items:center;background:#08090b;
  padding:10px 5%;border-bottom:3px solid var(--red);position:sticky;top:0;z-index:99;
  box-shadow:0 4px 16px #00000040
}
.brand{display:flex;align-items:center;gap:14px;font-weight:900;font-size:20px;color:#fff}
.brand-logo{height:58px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1;letter-spacing:.5px}
.brand-text b{color:var(--red2)}
.brand-text small{font-size:10px;font-weight:700;color:#9aa1a9;letter-spacing:3px}
.links{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:18px;font-weight:700;font-size:14px;color:#fff}
.links a:not(.btn):hover{color:var(--red2)}
/* The way in for a signed-out visitor, so it reads as a control and not as one
   more page link lost in the row. */
.nav-auth{border:1px solid var(--red2);border-radius:8px;padding:8px 14px;white-space:nowrap;
  letter-spacing:1px;font-size:12.5px;color:#fff}
.nav-auth:hover{background:var(--red2);color:#fff}
.nav-toggle{
  display:none;background:transparent;border:1px solid #3a3d42;color:#fff;font-size:20px;
  line-height:1;padding:9px 13px;border-radius:8px;cursor:pointer
}
.btn{display:inline-block;background:var(--red);color:#fff!important;border:0;padding:12px 18px;border-radius:8px;font-weight:800;cursor:pointer}
.btn.alt{background:#111}
.hero{
  min-height:590px;padding:7% 6%;display:flex;align-items:center;color:#fff;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 78% 35%,rgba(194,13,18,.28),transparent 24%),
    linear-gradient(100deg,#050607,#101215);
}
.hero::after{
  content:"";position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(52vw,620px);aspect-ratio:1170/1125;
  background:url('assets/watermark-light.png') center/contain no-repeat;
  opacity:.14;pointer-events:none
}
.hero-inner{max-width:780px;position:relative;z-index:1}
.kicker{color:#ff4248;font-weight:900;letter-spacing:2px;font-size:14px}
.hero h1{font-size:64px;line-height:1.02;margin:12px 0 18px}
.hero h1 em{font-style:normal;color:#ff2a30}
/* Home hero headline sits on two rows — the two things a visitor does, then the
   promise underneath — so "WE IMPORT IT." always holds its own single row. The
   viewport-relative caps below keep both rows unbroken on narrow screens. */
.hero h1.stacked span,.hero h1.stacked em{display:block;white-space:nowrap}
.hero p{font-size:21px;line-height:1.55;color:#e6e7e8;max-width:680px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d7d9dc}
.stat{background:#fff;padding:24px;text-align:center}.stat b{display:block;font-size:26px;color:var(--red)}.stat small{color:#666}
section{padding:58px 6%}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:end;margin-bottom:25px}
/* The buttons on the right of a section heading — "+ CREATE NEW ORDER" and the
   like. They wrap under the heading on a phone rather than squeezing it. */
.head-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
h2{font-size:36px;margin:0}.lead{color:#62666d;line-height:1.6;max-width:820px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 8px 28px #00000010;border:1px solid #e7e8ea}
.vehicle-card{padding:0;overflow:hidden}
.vehicle-img{
  height:220px;background:linear-gradient(135deg,#0b0d10,#30343a);display:grid;place-items:center;
  color:#fff;font-size:62px;position:relative;overflow:hidden
}
.vehicle-img::after{
  content:"";position:absolute;inset:12%;
  background:url('assets/watermark-light.png') center/contain no-repeat;
  opacity:.16;pointer-events:none
}
.vehicle-body{padding:18px}
.badge{display:inline-block;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.4px}
.badge.available{background:#daf3df;color:#167330}.badge.incoming{background:#dfeaf9;color:#1d5d9f}.badge.special{background:#fff0d5;color:#8b5a00}.badge.sold{background:#f7d6d9;color:#982730}
.price{font-weight:900;color:var(--red);font-size:23px}
.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0;color:#595e65;font-size:13px}
.panel{background:#fff;border-radius:14px;padding:26px;box-shadow:0 8px 28px #0000000f;position:relative;overflow:hidden}
/* Watermarked document surface — used for forms, invoices and detail panels */
.panel::before{
  content:"";position:absolute;right:-40px;bottom:-40px;width:300px;aspect-ratio:1170/1125;
  background:url('assets/watermark-dark.png') center/contain no-repeat;
  opacity:.055;pointer-events:none
}
.panel>*{position:relative}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .wide{grid-column:1/-1}
label{font-size:13px;font-weight:800}
input,select,textarea{
 width:100%;padding:12px 13px;margin-top:6px;border:1px solid #cfd3d8;border-radius:8px;font:inherit;background:#fff
}
textarea{min-height:120px;resize:vertical}
.table-wrap{overflow:auto;background:#fff;border-radius:14px;box-shadow:0 8px 28px #00000010}
table{border-collapse:collapse;width:100%;min-width:900px}
th{background:#111;color:#fff;padding:12px;text-align:left;font-size:12px}
td{padding:12px;border-bottom:1px solid #eceeef;font-size:13px}
th:nth-child(1){border-left:4px solid var(--red)}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filterbar input,.filterbar select{width:auto;min-width:170px;margin:0}
.paypal-box{background:#ffc439;color:#102c5c;font-weight:900;padding:15px;text-align:center;border-radius:8px}
.notice{background:#fff6db;border-left:4px solid #e4a000;padding:12px 14px;border-radius:6px;font-size:13px}
.doc-list a{display:block;padding:14px 0;border-bottom:1px solid #e7e7e7;color:#9e0000;font-weight:800}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{background:#fff;border-radius:12px;padding:18px;text-align:center;border-top:4px solid var(--red)}
.step strong{display:block;margin:8px 0}
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:#fff;border-radius:12px;padding:18px;border-left:5px solid var(--red);box-shadow:0 6px 20px #0000000c}
.kpi b{display:block;font-size:27px;margin-top:6px}
.footer{background:#08090b;color:#d8d8d8;padding:42px 6%;line-height:1.8;position:relative;overflow:hidden}
.footer strong{color:#fff}
.footer::before{
  content:"";position:absolute;right:4%;top:50%;transform:translateY(-50%);
  width:min(38vw,340px);aspect-ratio:1170/1125;
  background:url('assets/watermark-light.png') center/contain no-repeat;
  opacity:.12;pointer-events:none
}
/* Three columns: company details, then the email directory split into the two
   groups customers actually pick between — sales/enquiries and billing. */
.footer-inner{position:relative;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:34px;align-items:start}
.footer-logo{height:92px;width:auto;display:block;margin-bottom:14px}
.footer h4{margin:0 0 10px;font-size:13px;letter-spacing:2px;color:#fff;text-transform:uppercase}
.email-list{display:grid;gap:7px;font-size:14px}
.email-list a{color:#e6e7e8;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.email-list a:hover{color:#fff}
.email-list a span{color:#8d949c;font-size:11px;font-weight:800;letter-spacing:1px;min-width:96px;text-transform:uppercase}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Group heading above each block of the contact-page email directory. */
.directory-group{margin:30px 0 14px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:800}
.contact-card{background:#fff;border-radius:14px;padding:22px;border:1px solid #e7e8ea;border-top:4px solid var(--red);box-shadow:0 8px 28px #00000010}
.contact-card h3{margin:0 0 6px;font-size:18px}
.contact-card p{margin:0 0 12px;color:#62666d;font-size:14px;line-height:1.55}
.contact-card a{font-weight:800;color:var(--red);word-break:break-word}
/* Permanent links to the published legal documents. Sits above the copyright
   line in the footer of every page. */
.footer-legal{position:relative;display:flex;flex-wrap:wrap;gap:10px 26px;margin:26px 0 0;
  padding-top:18px;border-top:1px solid #1e2126;font-size:13px;font-weight:800;letter-spacing:.4px}
.footer-legal a{color:#e6e7e8;text-transform:uppercase}
.footer-legal a:hover{color:#fff}
.footer-legal a[aria-current=page]{color:var(--red2)}
.footer-legal+.small{margin-top:14px}
.footer .small{position:relative;margin-top:26px}
.whatsapp{position:fixed;right:22px;bottom:22px;background:#25D366;color:#fff;padding:14px 18px;border-radius:999px;font-weight:900;box-shadow:0 8px 30px #0003;z-index:88}

/* Public Japan-to-Kingston RoRo schedule. */
.schedule-hero{background:linear-gradient(115deg,#050607 0%,#121820 68%,#621015 100%);color:#fff;padding:64px 6% 52px}
.schedule-hero h1{font-size:clamp(40px,6vw,68px);line-height:1;margin:10px 0 18px;max-width:900px}
.schedule-hero p{color:#d9dde2;max-width:760px;font-size:18px;line-height:1.6}
.schedule-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.schedule-toolbar input,.schedule-toolbar select{width:auto;min-width:190px;margin:0}
.schedule-summary{margin-left:auto;color:#62666d;font-size:13px;font-weight:800}
.schedule-list{display:grid;gap:16px}
.sailing-card{background:#fff;border:1px solid #e1e4e8;border-left:5px solid var(--red);border-radius:13px;padding:20px;box-shadow:0 7px 24px #0000000d}
.sailing-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.sailing-top h3{margin:0 0 5px;font-size:23px}.sailing-top p{margin:0;color:#62666d}
.sailing-status{display:inline-block;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#e7eaf0;color:#32363d;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.sailing-status.booking_open{background:#d9f3df;color:#146c2d}.sailing-status.delayed{background:#fff0cf;color:#8b5a00}.sailing-status.cancelled{background:#f7d6d9;color:#982730}.sailing-status.arrived{background:#dfeaf9;color:#1d5d9f}
.sailing-route{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:14px;margin:18px 0;padding:15px;background:#f6f7f9;border-radius:10px}
.sailing-route span{display:block;color:#747981;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.sailing-route b{display:block;margin-top:4px}
.sailing-notes{margin:8px 0;color:#555b63;line-height:1.5}.schedule-source{color:#9e0000;font-weight:800;font-size:13px}
@media(max-width:760px){.sailing-top{display:block}.sailing-status{margin-top:12px}.sailing-route{grid-template-columns:1fr 1fr}.schedule-summary{width:100%;margin-left:0}}
/* Social profile buttons. Neutral at rest so the footer stays calm, then each
   button takes its own platform colours on hover. Add .light on white panels. */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.social a{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  font-size:13px;font-weight:800;letter-spacing:.4px;line-height:1;white-space:nowrap;
  background:#101216;border:1px solid #2b2f35;color:#e6e7e8;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease
}
.social svg{width:17px;height:17px;flex:none;fill:currentColor}
.social a:hover{transform:translateY(-1px)}
.social a:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.social .ig:hover{background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);border-color:transparent;color:#fff}
.social .tt:hover{background:#fff;border-color:#fff;color:#08090b}
.social.light a{background:#fff;border-color:#e0e2e5;color:#17191d}
.social.light a:hover{color:#fff}
.social.light .tt:hover{background:#08090b;border-color:#08090b;color:#fff}
.small{font-size:12px;color:#72767c}
/* The menu carries ten items, which stops fitting on one line well before the
   phone breakpoint — and what fell off the end was Sign In. Collapse to the
   hamburger while there is still room for it. Raised from 1100px when Japan
   Sourcing was added: at 1100 the row wrapped instead of collapsing. */
@media(max-width:1250px){
 nav{flex-wrap:wrap;gap:12px}
 .nav-toggle{display:block}
 .links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:6px}
 .links.open{display:flex}
 .links a{padding:13px 2px;border-bottom:1px solid #1d2024}
 .links a.btn{text-align:center;margin-top:12px;border-bottom:0}
 .links a.nav-auth{border:0;border-bottom:1px solid #1d2024;border-radius:0}
 /* Three footer columns stop fitting before the tablet breakpoint: drop the
    company block onto its own row and keep the two email groups side by side. */
 .footer-inner{grid-template-columns:1fr 1fr}
 .footer-inner>:first-child{grid-column:1/-1}
}
@media(max-width:900px){
 .brand-logo{height:48px}.brand{font-size:17px}
 .grid,.dashboard,.timeline,.statbar{grid-template-columns:1fr 1fr}
 .hero h1{font-size:46px}.hero h1.stacked{font-size:min(46px,7.1vw)}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}
 .hero::after{opacity:.09}
 .footer-inner{grid-template-columns:1fr}
 .contact-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .grid,.dashboard,.timeline,.statbar,.contact-grid{grid-template-columns:1fr}.hero{padding:80px 7%}.hero h1{font-size:38px}.hero h1.stacked{font-size:min(38px,7.3vw)}
 .email-list a span{min-width:100%}
}

/* ==========================================================================
   Application surfaces — inventory, vehicle detail, accounts, tracking,
   invoices and the operations dashboard. Everything below is rendered by
   app.js / account.js / admin.js from the /api responses.
   ========================================================================== */

/* Stock status vocabulary. The class is the raw status value from the API so a
   new status added server-side shows as a plain badge rather than breaking. */
.badge.coming_soon{background:#e6e0f7;color:#4a2c8f}
.badge.special_order{background:#fff0d5;color:#8b5a00}
.badge.reserved{background:#ffe2d4;color:#9a4212}

/* Notices, alerts and loading states */
.loading{color:#72767c;font-size:14px;padding:18px 0}
.alert{padding:13px 15px;border-radius:8px;font-size:14px;font-weight:600;margin:14px 0;border-left:4px solid}
.alert.ok{background:#e8f7ec;border-color:#1c8a3c;color:#12662c}
.alert.error{background:#fdecee;border-color:var(--red);color:#8d1116}
.alert.info{background:#eef4fd;border-color:#2b62c4;color:#1b4a9c}

/* Vehicle cards */
.vehicle-img.has-photo{background:#0b0d10}
.vehicle-img img{width:100%;height:100%;object-fit:cover;display:block}
.vehicle-img.has-photo::after{opacity:0}
.vehicle-card h3{margin:12px 0 4px;font-size:19px;line-height:1.25}
.vehicle-card h3 a:hover{color:var(--red)}
.price.por{font-size:19px;color:#3d4249}
.dep{margin:6px 0 0}.dep b{color:var(--ink)}
/* View and share sit side by side: one opens the vehicle, one hands it on. */
.card-actions{margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card-actions .btn{width:100%;text-align:center;padding:11px 9px;font-size:13px}
.card-actions:has(.btn:only-child){grid-template-columns:1fr}

/* Inventory filters and pagination */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;background:#fff;padding:18px;border-radius:14px;
  box-shadow:0 8px 28px #00000010;margin-bottom:18px}
.filter-bar label{display:block}
.filter-bar input,.filter-bar select{width:auto;min-width:158px}
.filter-bar .btn{padding:12px 16px}
.pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.page-btn{background:#fff;border:1px solid #cfd3d8;border-radius:8px;padding:10px 15px;font-weight:800;cursor:pointer}
.page-btn.current{background:var(--red);border-color:var(--red);color:#fff}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}

/* Vehicle detail */
.crumbs{display:flex;gap:8px;font-size:13px;font-weight:700;color:#72767c;margin-bottom:16px}
.crumbs a:hover{color:var(--red)}
.detail-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}
.detail-title{font-size:31px;margin:10px 0 6px;line-height:1.15}
.gallery{background:#0b0d10;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px #00000018}
.gallery-main{aspect-ratio:4/3;background:#0b0d10}
.gallery-main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-main.empty{display:grid;place-items:center;color:#fff;font-size:64px;gap:10px;text-align:center;padding:24px}
.gallery-main.empty .small{color:#9aa1a9;font-size:12px}
.gallery-main.empty a{color:#ff5a5f;font-weight:800}
.gallery-thumbs{display:flex;gap:6px;padding:6px;overflow-x:auto;background:#111}
.thumb{flex:0 0 92px;height:70px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;
  background:#000;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.current{border-color:var(--red2)}
.panel-title{margin:0 0 16px;font-size:20px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#eceeef;border-radius:10px;overflow:hidden}
.spec{background:#fff;padding:11px 13px;display:flex;justify-content:space-between;gap:12px;font-size:13px}
.spec span{color:#72767c}.spec b{text-align:right}
.spec.wide{grid-column:1/-1}
.prose{line-height:1.7;color:#3d4249}
.features{margin:10px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:13px}
.features li{padding-left:20px;position:relative}
.features li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}
.rules-title{margin:18px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.4px}
.rules{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:13px;line-height:1.6}
.rules li{padding-left:22px;position:relative}
.rules li::before{content:"✓";position:absolute;left:0;top:0;color:#1f7a3d;font-weight:900}
.rules li.no::before{content:"✕";color:var(--red)}
.rules.plain li::before{content:"•";color:#72767c;font-size:16px;line-height:1.35}
.stack{display:grid;gap:10px;margin-top:18px}
.stack .btn{text-align:center}
.btn.wa{background:#25D366;color:#062d15!important}
.related{margin-top:40px}
.related h2{margin-bottom:20px}

/* Deposit / landed-cost boxes. Every figure here comes from the server. */
.quote-box{background:#f7f8fa;border:1px solid #e3e6ea;border-radius:12px;padding:16px;margin:16px 0}
.quote-box h3{margin:0 0 12px;font-size:16px;letter-spacing:.5px}
.quote-line{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px;
  border-bottom:1px dashed #dfe3e8}
.quote-line span{color:#62666d}
.quote-line.total{border-bottom:2px solid #c9ced4;font-weight:800}
.quote-line.total b,.quote-line.deposit b{font-size:17px}
.quote-line.deposit b{color:var(--red)}
.quote-line.due b{color:var(--red)}
.quote-box .small{margin:12px 0 0}

/* Records — orders, invoices, shipments and enquiries in list form */
.records{display:grid;gap:16px}
.record{background:#fff;border-radius:14px;padding:20px;box-shadow:0 8px 28px #00000010;border:1px solid #e7e8ea;
  border-left:5px solid var(--red)}
.record-head{display:flex;justify-content:space-between;gap:14px;align-items:start;margin-bottom:8px}
.record-head .small{display:block;color:#72767c;font-weight:600}
.record-title{margin:4px 0 10px;font-size:17px;font-weight:800}
.record-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:#62666d;margin:10px 0}
.record-meta a{color:var(--red);font-weight:700}
.record-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:12px;font-size:13px;font-weight:800}
.record-links a{color:var(--red)}
/* Vehicle replaced — shown on an order whose car was changed for another */
.record-replaced{margin:12px 0;padding:12px 14px;border-radius:8px;background:#eef4fd;
  border-left:4px solid #2b62c4;font-size:13px}
.record-replaced>b{display:block;font-size:13px;color:#1b4a9c;margin-bottom:4px}
.record-replaced p{margin:0 0 6px}
.record-replaced p:last-child{margin-bottom:0}
.record-replaced p b{color:#1b1c1f}
.record-replaced .small{display:block;color:#4a5566;font-weight:600}
.record-replaced del{color:#72767c;text-decoration-thickness:1px}
.record-replaced ul{margin:6px 0 0;padding-left:18px;color:#4a5566}
.record-replaced li{margin:0 0 3px}
.record-replaced li:last-child{margin-bottom:0}

/* Agreements & forms — the paperwork attached to one order */
.record-forms{margin-top:14px;padding-top:12px;border-top:1px solid #ebecee}
.record-sub{margin:0 0 8px;font-size:13px}
.record-sub .small{display:block;color:#72767c;font-weight:600;margin-top:3px}
.record-line{display:flex;justify-content:space-between;gap:14px;align-items:start;padding:11px 0;
  border-bottom:1px solid #f0f1f3;font-size:13px}
.record-line:last-child{border-bottom:0;padding-bottom:0}
.record-line .small{display:block;color:#72767c;font-weight:600;margin-top:3px}
.record-line .small a{color:var(--red);font-weight:800}
.record-line-side{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:end;flex:0 0 auto}
.record details{margin-top:12px;font-size:13px}
.record summary{cursor:pointer;font-weight:800;padding:7px 0;color:#3d4249}
.record details .form-grid{margin-top:12px}

/* Shipping progress and milestones */
.progress{height:9px;background:#e6e9ec;border-radius:999px;overflow:hidden;margin:12px 0}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red2));border-radius:999px}
.milestones{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0;margin:16px 0 20px}
.milestones li{font-size:11px;font-weight:800;text-align:center;padding:9px 4px;border-radius:8px;
  background:#eceeef;color:#8b9199;border-top:3px solid #d4d8dd}
.milestones li.reached{background:#fff;color:var(--ink);border-top-color:var(--red)}
.milestones li.current{background:var(--red);color:#fff;border-top-color:#7d0407}
.track-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:8px}
.events{display:grid;gap:2px;margin-top:12px;border-left:2px solid #e6e9ec;padding-left:16px}
.event{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid #f0f1f3;font-size:13px}
.event-when{color:#72767c;font-weight:800}
.event p{margin:4px 0 0}

/* Tabs — account area and dashboard */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 20px;border-bottom:2px solid #e0e3e7;padding-bottom:2px}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:11px 15px;font:inherit;
  font-weight:800;font-size:14px;color:#62666d;cursor:pointer;margin-bottom:-4px}
.tabs button:hover{color:var(--ink)}
.tabs button.current{color:var(--red);border-bottom-color:var(--red)}

/* Tables */
td.num,th.num{text-align:right;white-space:nowrap}
.table-wrap+.panel{margin-top:22px}
tbody tr:hover{background:#fbfbfc}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn.small-btn{padding:7px 11px;font-size:12px;border-radius:6px}

/* The searchable "Vehicle from Stock" field. The results are an ordinary table
   so a stock number, chassis number and status read the same here as they do on
   the stock list itself, and the whole thing is capped in height because it sits
   inside a panel that also has to be usable. */
.stock-picker{margin:14px 0}
.stock-picker [data-stock-results]{max-height:340px;overflow:auto}
.stock-picker [data-stock-results] table{font-size:13px}

/* Forms */
.checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.check input{width:auto;margin:0}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:14px;padding-top:14px;
  border-top:1px solid #eceeef}
.inline-form label{display:block}
.inline-form input,.inline-form select{width:auto;min-width:150px}
.inline-form .grow{flex:1 1 240px}
.inline-form .grow input{width:100%}
/* Opt-in account creation inside a checkout form */
.checkout-signup{background:#f7f8fa;border:1px solid #e4e7ea;border-left:4px solid var(--red);
  border-radius:8px;padding:14px 16px}
.checkout-signup .check{font-size:14px}
.checkout-signup [data-signup-password]{margin-top:12px}
.checkout-signup [data-signup-password] label{display:block}
.checkout-signup .small{margin:8px 0 0}
/* Terms & Privacy acceptance. Unchecked on load and `required`, so the customer
   has to tick it themselves; the wording comes from PX.consentField in app.js. */
.consent-box{background:#fff;border:1px solid #e4e7ea;border-left:4px solid var(--red);
  border-radius:8px;padding:14px 16px}
.consent-box .check{align-items:flex-start;font-size:14px;line-height:1.55}
.consent-box .check input{margin-top:3px;flex:0 0 auto}
.consent-box .check span{font-weight:700}
.consent-box a{color:var(--red);font-weight:800;text-decoration:underline}
.consent-box .small{margin:8px 0 0}

/* Spam protection on the public forms; the markup comes from PX.protectForm in
   app.js. The honeypot is taken off-screen rather than hidden with `display:none`
   or `hidden`, because a form-filling script skips fields it can see are hidden
   and completes the ones it cannot — which is the entire point of the field. It
   is out of the tab order and hidden from assistive technology, so nobody
   filling the form in ever meets it. */
.no-fill{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Holds the Turnstile widget, and the message shown when it has not been
   completed. Permanent: it is inserted directly above the Submit button when
   the form is armed and is never removed or hidden, so a validation error can
   appear without the challenge disappearing with it. It collapses to nothing on
   the forms — and the sites — where the challenge is not configured. */
.guard-box{display:flex;flex-direction:column;gap:10px}
.guard-box .alert{margin:0}
/* The Turnstile widget's own box, and the note beneath it. Both are permanent
   children of .guard-box: a validation error is written into the note, never
   over the widget, which is what stopped the challenge from surviving one.
   An empty child is taken out of the layout so the flex gap does not leave a
   hole on a form with no message, or no widget at all — except while the
   widget is still loading, where the height is held so the Submit button does
   not jump once the challenge appears. min-height rather than height so a
   managed challenge that expands into an interactive one is not clipped. */
.guard-box>*:empty{display:none}
.guard-widget{min-height:65px}
.guard-widget[data-guard-pending]:empty{display:block;min-height:65px}
.guard-widget iframe{max-width:100%}


/* Dashboard layout */
.admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.stat-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.stat-list li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;
  border-bottom:1px solid #f0f1f3}
.stat-list b{font-size:18px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:18px}
.photo-item{margin:0;background:#f7f8fa;border:1px solid #e3e6ea;border-radius:10px;overflow:hidden}
.photo-item img{width:100%;height:110px;object-fit:cover;display:block}
.photo-item figcaption{display:flex;gap:6px;padding:8px;flex-wrap:wrap}

/* Invoice sheet — screen and print */
.invoice-sheet{max-width:860px;margin:0 auto}
.invoice-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:3px solid var(--red);padding-bottom:18px;font-size:13px;line-height:1.7}
.invoice-logo{height:74px;width:auto;display:block;margin-bottom:10px}
.invoice-meta{text-align:right;min-width:230px}
.invoice-meta h2{font-size:26px;letter-spacing:3px;margin:0 0 10px;color:var(--red)}
.invoice-meta div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.invoice-meta span{color:#72767c}
.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:22px 0;font-size:13px;line-height:1.7}
.invoice-parties h4{margin:0 0 6px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#72767c}
table.invoice-table{min-width:0;margin-bottom:18px}
.invoice-table th{background:#111}
.invoice-table tr.total td{font-weight:800;border-top:2px solid #c9ced4}
.invoice-table tr.deposit td,.invoice-table tr.due td{font-weight:800;color:var(--red)}
.invoice-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
/* Payment instructions, issued with the invoice rather than published. Kept
   inside a box so it reads as one set of instructions when printed. */
.invoice-pay{margin-top:24px;padding:18px 20px;border:1px solid #e3e6ea;border-left:4px solid var(--red);
  border-radius:10px;background:#f9fafb;page-break-inside:avoid}
.invoice-pay h4{margin:18px 0 8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#72767c}
.invoice-pay h4:first-child{margin-top:0}
.invoice-pay .spec-grid{margin:0 0 6px}
.invoice-pay ul.rules{margin:0 0 6px}
.invoice-pay p.small{margin:8px 0 0}
/* Legal pages (/privacy-policy, /terms-and-conditions) */
.legal-meta{margin-bottom:22px}
.legal-layout{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
.legal-toc{position:sticky;top:22px}
.legal-toc ol{margin:0;padding-left:22px;display:grid;gap:7px;font-size:13px;line-height:1.45}
.legal-toc a{color:#3d4249;font-weight:700}
.legal-toc a:hover{color:var(--red)}
.legal-toc .small{margin:16px 0 0;padding-top:14px;border-top:1px solid #eceeef}
.legal-doc h3{margin:30px 0 10px;font-size:18px;scroll-margin-top:90px}
.legal-doc h3:first-child{margin-top:0}
.legal-doc p{margin:0 0 12px}
.legal-doc ul{margin:0 0 14px;padding-left:22px;display:grid;gap:6px}
.legal-doc address{font-style:normal;background:#f7f8fa;border-left:4px solid var(--red);
  border-radius:8px;padding:14px 16px;margin:0 0 14px}
.legal-doc address a{color:var(--red);font-weight:800}
.legal-doc .legal-end{margin-top:28px;padding-top:16px;border-top:1px solid #eceeef;font-size:14px;color:#62666d}
.legal-doc .legal-end a{color:var(--red)}

@media print{
  .topbar,nav,.footer,.whatsapp,.no-print,.tabs{display:none!important}
  body{background:#fff}
  body::before{opacity:.05}
  section{padding:0}
  .panel{box-shadow:none;border:0;padding:0}
  .invoice-sheet{max-width:none}
}

@media(max-width:900px){
  .detail-grid,.admin-cols,.invoice-parties,.spec-grid,.features{grid-template-columns:1fr}
  .legal-layout{grid-template-columns:1fr}
  .legal-toc{position:static}
  .milestones{grid-template-columns:repeat(4,1fr)}
  .event{grid-template-columns:1fr}
  .event-when{font-size:12px}
  .invoice-meta{text-align:left}
}
@media(max-width:600px){
  .milestones{grid-template-columns:repeat(2,1fr)}
  .filter-bar input,.filter-bar select{min-width:0;width:100%}
  .filter-bar label{width:100%}
  .record-head{flex-direction:column}
}

/* ==========================================================================
   Japan Sourcing & Partners (japan-sourcing.html)

   The page carries a second brand next to ours, so it gets one accent of its
   own — the teal sampled from the supplier's artwork — used only where the
   supplier relationship is what is being shown. Petrolex red stays the colour
   of everything the customer does.
   ========================================================================== */
.jp-hero{
  background:
    radial-gradient(circle at 84% 26%,rgba(10,113,134,.42),transparent 30%),
    radial-gradient(circle at 12% 88%,rgba(194,13,18,.24),transparent 34%),
    linear-gradient(100deg,#050607,#0f1418);
}
.jp-hero .kicker span{margin-right:6px}

/* Supplied co-branded partnership card. The artwork already carries both marks,
   the lockup and the commitments, so it is framed as a single piece rather than
   rebuilt from parts — the white bleed in the file becomes the frame's mat. */
.partnership-card{
  margin:0 auto 30px;max-width:920px;background:#fff;border:1px solid #e0e3e7;border-radius:16px;
  overflow:hidden;box-shadow:0 10px 32px #00000014
}
.partnership-card img{width:100%;height:auto;display:block}
.partner-caption{
  text-align:center;color:#62666d;font-size:14px;
  padding:14px 18px 16px;border-top:1px solid #eceef1
}
.partner-teaser .partnership-card{margin:0;max-width:none}

/* Verified supplier profile */
.supplier-card{
  display:grid;grid-template-columns:290px 1fr;gap:28px;background:#fff;border:1px solid #e7e8ea;
  border-top:4px solid var(--teal);border-radius:16px;padding:26px;box-shadow:0 8px 28px #00000010
}
/* The supplier's own company card, shown as the artefact it is: framed, on
   white, with no cropping or recolouring of someone else's brand. */
.supplier-card-art{
  margin:0;background:#fff;border:1px solid #e0e3e7;border-radius:12px;overflow:hidden;
  box-shadow:0 6px 20px #0000000f
}
.supplier-card-art img{width:100%;height:auto;display:block}
.supplier-card .stack{margin-top:14px}
.supplier-card .stack .btn{display:block}
.supplier-name{margin:12px 0 0;font-size:26px}
.supplier-where{margin:4px 0 0;font-size:14px;font-weight:800;color:var(--teal);letter-spacing:.3px}
.verified{
  display:inline-flex;align-items:center;gap:7px;background:#e6f2f5;color:#054452;
  font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;
  padding:6px 12px;border-radius:999px
}
.supplier-quote{
  margin:14px 0 16px;padding:4px 0 4px 15px;border-left:4px solid var(--teal);
  font-size:18px;font-weight:700;font-style:italic;color:var(--ink)
}
.supplier-facts{margin-top:18px}
.supplier-facts .spec b{text-align:left;line-height:1.5}
.supplier-facts a{color:var(--teal);font-weight:800}
.btn.teal{background:var(--teal)}
.btn.teal:hover{background:var(--teal2)}

/* Eight-step sourcing flow. .timeline is fixed at five columns and is used for
   the five-step summary on the home page, so the longer flow gets its own grid. */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow-step{
  position:relative;background:#fff;border:1px solid #e7e8ea;border-top:4px solid var(--red);
  border-radius:14px;padding:18px;box-shadow:0 8px 28px #0000000d
}
.flow-step.jp{border-top-color:var(--teal)}
.flow-num{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--red);color:#fff;font-weight:900;font-size:15px
}
.flow-step.jp .flow-num{background:var(--teal)}
.flow-mark{position:absolute;top:16px;right:16px;font-size:20px;line-height:1}
.flow-step b{display:block;margin:12px 0 6px;font-size:15px;line-height:1.3}
.flow-step p{margin:0;font-size:13px;line-height:1.6;color:#5a5f66}

/* Body types and frequently requested models */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 22px;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #dfe3e7;
  border-radius:999px;padding:10px 16px;font-size:14px;font-weight:800;box-shadow:0 4px 14px #0000000a
}
.model-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))
}
.model-grid li{
  background:#f7f8fa;border:1px solid #e6e9ec;border-radius:10px;padding:11px 13px;
  font-size:14px;font-weight:700
}

/* Why source through Petrolex, and the claims panel under it */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.reason{
  background:#fff;border-radius:12px;border-left:5px solid var(--red);padding:16px 18px;
  box-shadow:0 6px 20px #0000000c
}
.reason b{display:block;margin-bottom:6px;font-size:15px}
.reason p{margin:0;font-size:13px;line-height:1.6;color:#5a5f66}
.promise-panel{margin-top:22px}

/* The nav is sticky, so anchored jumps into the page (the hero CTA, the two
   buttons in the call-to-action band) have to clear it. */
#special-order,#japanOrderForm{scroll-margin-top:90px}

/* Special-order call to action */
.cta-band{
  position:relative;overflow:hidden;border-radius:18px;padding:34px;
  background:
    radial-gradient(circle at 88% 20%,rgba(10,113,134,.34),transparent 32%),
    linear-gradient(100deg,#0b0d10,#15181c);
  color:#fff
}
.cta-band h2{color:#fff;margin:10px 0 12px}
.cta-band p{margin:0;max-width:660px;color:#d5d8dc;line-height:1.6}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cta-actions .btn span{margin-right:7px}

/* Portal stages a sourced vehicle passes through once it becomes an order */
.chain{list-style:none;counter-reset:chain;margin:16px 0 0;padding:0;display:grid;gap:8px}
.chain li{
  counter-increment:chain;display:flex;align-items:center;gap:12px;
  background:#f7f8fa;border:1px solid #e6e9ec;border-radius:10px;padding:10px 13px;
  font-size:13px;font-weight:700
}
.chain li::before{
  content:counter(chain);flex:0 0 24px;height:24px;border-radius:7px;background:var(--ink);
  color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center
}

/* Home-page teaser for the partnership */
.partner-teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}

@media(max-width:1100px){
  .flow,.reasons{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .supplier-card,.partner-teaser{grid-template-columns:1fr}
  .supplier-card-art{max-width:420px}
}
@media(max-width:600px){
  .flow,.reasons{grid-template-columns:1fr}
  .cta-band{padding:24px}
  .cta-actions .btn{width:100%;text-align:center}
}

/* ------------------------------------------------------------------ hero, short
   Interior pages carry the same hero treatment as the home page, but a visitor
   who has already chosen a page does not need half a screen of it. */
.hero.short{min-height:0;padding:60px 6% 66px}
.hero.short h1{font-size:46px}
.hero.short p{font-size:18px}

/* --------------------------------------------------------------- action row
   The six jobs, sitting between the hero and the statbar so they read as part of
   the same dark header block rather than as a section of the page. */
.action-row{background:#0b0d10;border-bottom:3px solid var(--red);padding:26px 5% 30px}
.action-row-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1500px;margin:0 auto}
.action-row-inner a{
  display:flex;flex-direction:column;gap:5px;background:#14171b;border:1px solid #24282e;
  border-left:4px solid var(--red);border-radius:12px;padding:16px 18px;color:#fff
}
.action-row-inner a:hover{background:#1b1f25;border-left-color:var(--red2)}
.action-row-inner b{font-size:15px;letter-spacing:1px}
.action-row-inner small{font-size:12.5px;color:#a7adb5;line-height:1.5}
.action-row-login{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;max-width:1500px;
  margin:16px auto 0;padding-top:16px;border-top:1px solid #24282e
}
.action-row-login .small{color:#a7adb5;margin:0}

/* -------------------------------------------------------- 15-stage journey
   Used by the public tracker and by the order cards in the portal, so it has to
   survive being dropped both onto the page background and inside a record. */
.journey{background:#fff;border:1px solid #e7e8ea;border-radius:14px;padding:22px;
  box-shadow:0 8px 28px #0000000f;margin:18px 0}
.journey-head{display:flex;justify-content:space-between;align-items:start;gap:18px}
.journey-head h3{margin:4px 0 6px;font-size:20px}
.journey-head p{margin:0;font-size:13.5px;line-height:1.6;color:#5a5f66;max-width:62ch}
.journey-head .small{color:#72767c;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.journey-pct{
  flex:0 0 auto;font-size:26px;font-weight:900;color:var(--red);background:#fdf2f2;
  border-radius:12px;padding:12px 16px;line-height:1
}
.journey-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.journey-phase{background:#f7f8fa;border:1px solid #e6e9ec;border-top:3px solid #d4d8dd;
  border-radius:12px;padding:14px}
.journey-phase h4{
  margin:0 0 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:#8b9199
}
.journey-phase.part{border-top-color:#f0a3a6}
.journey-phase.done{border-top-color:#1f7a3d;background:#f4faf6}
.journey-phase.done h4{color:#1f7a3d}
.journey-phase.current{border-top-color:var(--red);background:#fff;box-shadow:0 6px 20px #0000000f}
.journey-phase.current h4{color:var(--red)}
.journey-phase ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.journey-phase li{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;
  border-radius:8px;background:#fff;border:1px solid #eceeef;font-size:12.5px;color:#8b9199
}
/* A stage with nothing under it yet still shows its name — what is still to come
   is most of the value of a timeline that runs for three months. */
.journey-phase li b{font-weight:700}
.journey-phase li span{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#a7adb5}
.journey-phase li.reached{color:var(--ink);border-color:#dfe3e7}
.journey-phase li.reached b::before{content:"✓ ";color:#1f7a3d;font-weight:900}
.journey-phase li.current{background:var(--red);border-color:#7d0407;color:#fff}
.journey-phase li.current b{font-weight:900}
.journey-phase li.current span{color:#ffd7d8}
.journey-history{margin-top:16px;border-top:1px solid #eceeef;padding-top:6px}
.journey-history summary{cursor:pointer;font-weight:800;font-size:13px;color:#3d4249;padding:8px 0}
.journey-history summary:hover{color:var(--red)}
/* Inside a portal order card the journey is a component of the card, not a card
   of its own, so it drops the lift and the border. */
.record .journey{box-shadow:none;border:0;background:#f9fafb;padding:16px;border-radius:12px}
.record .journey-head h3{font-size:17px}
.record .journey-pct{font-size:21px;padding:10px 13px}

/* The shipping block below the journey needs a name, otherwise the second
   progress bar looks like a repeat of the first. */
.track-section{
  margin:26px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#8b9199;
  border-top:1px solid #e6e9ec;padding-top:16px
}

/* ------------------------------------------------------------ payment workflow
   Select invoice → confirm amount → choose method → pay → we verify → receipt →
   balance updated. Drawn as steps because the customer's part of it stops at
   step four, and it helps to see that. */
.payflow{
  list-style:none;counter-reset:payflow;margin:0 0 22px;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr))
}
.payflow li{
  counter-increment:payflow;position:relative;background:#fff;border:1px solid #e7e8ea;
  border-top:3px solid var(--red);border-radius:12px;padding:14px 16px 14px 15px;
  box-shadow:0 6px 20px #0000000c
}
.payflow li::before{
  content:counter(payflow);display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:900;margin-bottom:9px
}
.payflow b{display:block;font-size:14px;margin-bottom:4px;line-height:1.3}
.payflow span{display:block;font-size:12.5px;line-height:1.55;color:#5a5f66}

/* --------------------------------------------------------- FAQ / import guide
   Ten headings, each a stack of questions. Accordions keep the page navigable —
   the contents list on the left is useless if every answer is open at once. */
.faq-doc details{
  border:1px solid #e6e9ec;border-radius:12px;background:#fff;margin:0 0 10px;padding:0 16px
}
.faq-doc details[open]{border-color:#dfe3e7;box-shadow:0 6px 20px #0000000c}
.faq-doc summary{
  cursor:pointer;font-weight:800;font-size:14.5px;line-height:1.45;padding:14px 0;
  display:flex;gap:10px;align-items:baseline
}
.faq-doc summary::marker{color:var(--red)}
.faq-doc summary:hover{color:var(--red)}
.faq-doc details>p,.faq-doc details>ul,.faq-doc details>ol{
  font-size:14px;line-height:1.7;color:#3d4249
}
.faq-doc details>*:last-child{margin-bottom:14px}
.faq-doc details a{color:var(--red);font-weight:700}

/* ------------------------------------------------- reviews and delivered cars
   Published with the customer's permission, which is why the card carries a name
   and a parish and not much else — nothing here is pulled from their order. */
.reviews{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.review{
  background:#fff;border:1px solid #e7e8ea;border-radius:14px;padding:20px;
  box-shadow:0 8px 28px #00000010
}
.review.featured{border-left:5px solid var(--red)}
.review-head{display:flex;justify-content:space-between;gap:12px;align-items:start}
.review-head b{font-size:15px}
.review-head .small{color:#72767c}
.review h3{margin:12px 0 8px;font-size:16.5px}
.review .prose{margin:0;font-size:14px}
.review .photo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-top:14px}
.review .photo-item img{height:92px}
.stars{color:#e8a400;letter-spacing:2px;font-size:14px}
.review-reply{
  margin-top:14px;background:#f7f8fa;border-left:4px solid var(--ink);border-radius:0 10px 10px 0;
  padding:12px 14px
}
.review-reply b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#62666d}
.review-reply p{margin:5px 0 0;font-size:13.5px;line-height:1.6}

@media(max-width:1100px){
  .journey-phases{grid-template-columns:repeat(2,1fr)}
  .action-row-inner{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .journey-head{flex-direction:column}
  .journey-pct{align-self:start}
  .hero.short h1{font-size:36px}
}
@media(max-width:600px){
  .action-row{padding:22px 5%}
  .action-row-inner,.journey-phases{grid-template-columns:1fr}
  .action-row-login .btn{width:100%;text-align:center}
  .journey{padding:16px}
  .journey-phase li{flex-wrap:wrap;gap:2px}
  .reviews{grid-template-columns:1fr}
  .review-head{flex-direction:column;gap:4px}
}

/* Portal additions: a vehicle card carries its photograph, and the documents
   table is grouped under the same section names the Documents page uses. */
.record-photo{width:100%;max-height:200px;object-fit:cover;border-radius:10px;margin-bottom:14px;display:block}
tr.group-row td{background:#f4f6f8;font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#62666d}

/* Dashboard additions: the import-tracker panel on an order, the filter beside a
   section heading, and the area chips on the staff-access table. */
.inline-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;white-space:nowrap}
.inline-label select{width:auto;min-width:170px}
.chip-inline{
  display:inline-block;background:#f1f3f5;border:1px solid #e3e6ea;border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:700;color:#3d4249;margin:2px 0
}

/* ------------------------------------------------------------------ staff menu
   The dashboard menu is grouped rather than one long row: eleven areas in a
   single line wraps into an unreadable block, and the groups match how the
   office is actually divided. A group with every link hidden is hidden by
   admin.js, so a role never sees a heading over nothing.

   The menu is never permanently open. A bar above it carries the section being
   worked on and the control that opens or closes the menu, so whichever width
   you are at, the work starts near the top of the screen instead of below
   eleven links. Below 1024px — phones and tablets — the menu is an overlay
   panel off the right edge over a backdrop, and admin.js dismisses it on a
   selection, a tap outside, the Close button or Escape. At desktop widths it is
   an ordinary inline block and the bar's control collapses it, which is
   remembered. */
.staff-nav-wrap{margin:22px 0}
.staff-nav-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.staff-nav-current{font-size:11px;font-weight:900;letter-spacing:1.1px;color:#62666d;text-transform:uppercase}
.staff-nav-toggle{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #d7dbe0;
  border-radius:10px;padding:10px 15px;font:inherit;font-weight:800;font-size:13px;letter-spacing:.4px;
  color:var(--ink);cursor:pointer;box-shadow:0 4px 14px #0000000d}
.staff-nav-toggle:hover{border-color:#9aa0a7}
.staff-nav-burger{font-size:16px;line-height:1}
.staff-nav-burger[hidden]{display:none}
/* Off at desktop widths: nothing is overlaid, so there is nothing to dismiss. */
.staff-nav-backdrop,.staff-nav-head{display:none}
.staff-nav{display:grid;gap:10px;background:#fff;border:1px solid #e7e8ea;border-radius:14px;
  padding:16px 18px;box-shadow:0 8px 28px #00000010}
/* `hidden` is how admin.js closes the menu, and it has to beat the grid above. */
.staff-nav[hidden]{display:none}
.staff-nav-group{display:grid;grid-template-columns:118px 1fr;gap:10px 16px;align-items:center}
.staff-nav-group+.staff-nav-group{border-top:1px solid #f0f1f3;padding-top:10px}
.staff-nav-label{font-size:10.5px;font-weight:900;letter-spacing:1.1px;color:#9aa0a7;text-transform:uppercase}
.staff-nav-row{display:flex;flex-wrap:wrap;gap:6px}
.staff-nav-row button{background:#f6f7f9;border:1px solid #e3e6ea;border-radius:8px;padding:9px 14px;font:inherit;
  font-weight:800;font-size:13.5px;color:#3d4249;cursor:pointer}
.staff-nav-row button:hover{background:#fff;border-color:#c9ced4;color:var(--ink)}
.staff-nav-row button.current{background:var(--red);border-color:#7d0407;color:#fff}
.staff-nav-toggle:focus-visible,.staff-nav-close:focus-visible,.staff-nav-row button:focus-visible{
  outline:2px solid var(--red);outline-offset:2px}

@media(max-width:1024px){
  .staff-nav-backdrop{display:block;position:fixed;inset:0;background:#08090bad;z-index:90}
  .staff-nav-backdrop[hidden]{display:none}
  /* The panel, not the page, scrolls while it is open — admin.js puts
     .staff-nav-open on the body for the rest of that. */
  .staff-nav{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(330px,87vw);
    align-content:start;overflow-y:auto;overscroll-behavior:contain;
    border:0;border-radius:0;padding:14px 16px 28px;box-shadow:-18px 0 44px #00000033}
  .staff-nav-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
    border-bottom:1px solid #eceef1;padding-bottom:12px}
  .staff-nav-title{font-size:13px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
  .staff-nav-close{background:#f6f7f9;border:1px solid #d7dbe0;border-radius:8px;padding:8px 14px;font:inherit;
    font-weight:800;font-size:12.5px;color:#3d4249;cursor:pointer}
  .staff-nav-close:hover{background:#fff;border-color:#9aa0a7;color:var(--ink)}
  /* One column in a 330px panel: a wrapped row of chips is hard to hit and
     harder to read down. */
  .staff-nav-group{grid-template-columns:1fr;gap:6px}
  .staff-nav-row{flex-direction:column;flex-wrap:nowrap}
  .staff-nav-row button{width:100%;text-align:left;padding:11px 13px;font-size:13px}
  body.staff-nav-open{overflow:hidden}
  @media(prefers-reduced-motion:no-preference){
    .staff-nav-backdrop:not([hidden]){animation:staffNavFade .16s ease-out}
    .staff-nav:not([hidden]){animation:staffNavSlide .2s ease-out}
  }
}
@keyframes staffNavFade{from{opacity:0}to{opacity:1}}
@keyframes staffNavSlide{from{transform:translateX(100%)}to{transform:none}}

/* ------------------------------------------------------------- orders module
   A results list beside one open record. The desk works one file at a time, so
   the record gets the room and the list stays narrow enough to scan. */
.order-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.order-results{position:sticky;top:16px}
.order-hits{display:grid;gap:8px;max-height:70vh;overflow-y:auto;padding-right:4px}
.order-hit{display:grid;gap:3px;text-align:left;background:#fff;border:1px solid #e7e8ea;border-left:4px solid #dfe3e7;
  border-radius:10px;padding:11px 13px;font:inherit;cursor:pointer}
.order-hit:hover{border-color:#c9ced4}
.order-hit.current{border-left-color:var(--red);box-shadow:0 6px 18px #00000012}
.order-hit-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.order-hit-name{font-size:13px;font-weight:700;color:#3d4249}
.order-hit .small{color:#72767c}
/* A tick beside each result, so clearing a run of fake orders is one pass down
   the list rather than one file at a time. The tick sits outside the button so
   selecting an order and opening it stay two separate gestures. */
.order-hit-row{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:start}
.order-hit-pick{display:flex;align-items:center;padding-top:13px}
.order-hit-pick input{width:auto;margin:0}
.order-hit.is-spam{border-left-color:#c0392b;background:#fffafa}
.order-hit.is-archived{border-left-color:#b9bdc2;background:#fafbfc}
.record-open{background:#fff;border:1px solid #e7e8ea;border-left:5px solid var(--red);border-radius:14px;
  padding:22px;box-shadow:0 8px 28px #00000010}
.record-open>.panel{margin-top:18px;box-shadow:none;border:1px solid #eceeef}
.record-open .journey{box-shadow:none;border:0;background:#f9fafb;padding:16px;border-radius:12px}
.record-open h4{margin:20px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.8px;color:#8b9199}
/* Where the order stands, in the four terms staff and customers both use. */
.record-state{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0 4px}
.record-state>div{display:grid;gap:2px;background:#f7f8fa;border:1px solid #eceeef;border-radius:10px;padding:11px 13px}
.record-state b{font-size:14.5px}
.record-state .small{color:#8b9199}
/* Required forms — one card per agreement inside the order record. Bordered
   rather than shadowed, because these sit inside a panel that already has a
   shadow and a stack of shadows reads as clutter. */
.form-card{border:1px solid #eceeef;border-left:3px solid var(--red);border-radius:12px;padding:15px 17px;
  margin-bottom:14px;background:#fcfcfd}
.form-card:last-of-type{margin-bottom:4px}
.form-card .record-head{margin-bottom:6px}
.form-card .record-meta{margin:8px 0 10px}
.form-card .row-actions{margin-bottom:4px}
.form-send,.form-upload{margin-top:14px;padding-top:12px;border-top:1px solid #eceeef}
.form-send .small a{word-break:break-all}
.form-versions{margin-top:12px;font-size:13px}
.form-versions summary{cursor:pointer;font-weight:800;padding:6px 0;color:#3d4249}
.order-editor textarea{width:100%;min-height:62px;resize:vertical}
table.audit td{vertical-align:top}
td.nowrap,th.nowrap{white-space:nowrap}

/* The payment-reminder preview in the dashboard. Monospaced and full width
   because it is the message itself, line breaks and all, rather than a summary
   of it — a member of staff reads this and then presses send. */
.reminder-preview{width:100%;min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.55;background:#f7f8fa;color:#33373d}
tbody tr.current{background:#fff6f6}
@media(max-width:900px){
  .order-layout{grid-template-columns:1fr}
  .order-results{position:static}
  .order-hits{max-height:none}
}

/* The confirmation box — see PX.confirm in app.js. A real <dialog> rather than
   window.confirm, because a press that immediately publishes something to a
   customer needs buttons that say what they do. Deliberately narrow: it holds
   one question and two answers, and anything longer belongs on the screen
   behind it. */
.confirm-box{border:0;border-radius:14px;padding:0;max-width:520px;width:calc(100% - 32px);
  box-shadow:0 24px 60px #00000040;color:var(--ink)}
.confirm-box::backdrop{background:#08090bcc}
.confirm-inner{padding:24px 26px 20px;border-top:5px solid var(--red);border-radius:14px;background:#fff}
.confirm-inner h3{margin:0 0 10px;font-size:19px}
.confirm-question{margin:0 0 10px;font-size:15px;line-height:1.55;font-weight:700}
.confirm-inner .small{margin:0 0 10px;color:#5d636b}
.confirm-warning{background:#fff6db;border-left:4px solid #e4a000;padding:10px 12px;border-radius:6px;
  font-size:13px;margin:0 0 12px}
/* Cancel first in the source, so it is what Tab and the initial focus land on,
   and last on screen next to the thumb on a phone. */
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.confirm-actions .btn{padding:11px 18px}
@media(max-width:520px){
  .confirm-actions{flex-direction:column-reverse}
  .confirm-actions .btn{width:100%;text-align:center}
}

/* Share Vehicle. The button is deliberately quieter than the red call to
   action beside it — sharing a listing is a favour to a friend, not the step
   the page is asking for. */
.btn.share-btn{background:var(--blue);display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn.share-btn:hover{background:#1b405f}
.share-icon{font-size:14px;line-height:1}
/* The fallback sheet, for desktop browsers with no share sheet of their own. */
.share-sheet .share-url{margin:0;padding:11px 13px;background:var(--light);border:1px solid #dfe2e6;
  border-radius:8px;font-size:13px;word-break:break-all;color:#3d4249;user-select:all}
.share-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.share-actions .btn{flex:1 1 130px;text-align:center;padding:11px 14px}
.share-note{margin:12px 0 0!important}
@media(max-width:520px){
  .share-actions .btn{flex:1 1 100%}
}

/* /vehicle reached without a usable reference. It always offers a way on. */
.vehicle-missing{max-width:720px}
.vehicle-missing .stack{max-width:340px}
.vehicle-missing code{background:var(--light);border:1px solid #dfe2e6;border-radius:5px;padding:1px 5px;
  font-size:12.5px}

/* A voided shipment on the Shipments tab. Greyed rather than hidden: the
   reference and its history are the point of voiding instead of deleting, so
   they stay readable, and the left border says at a glance that this one is a
   closed record. */
.record.voided{border-left:5px solid #8b9199;background:#fafbfc}
.record.voided .record-title,.record.voided .record-meta{color:#6b7178}
.badge.voided{background:#5d636b;color:#fff}
.void-record{background:#f4f6f8;border-left:4px solid #8b9199;border-radius:6px;padding:11px 13px;
  font-size:13px;margin:10px 0}
.void-record b{color:var(--ink)}