/* ============================================================
   fleet.css: styles for /fleet/ only. Loaded after pages.css
   through the layout's pageCss option.

   Everything here reuses the site palette tokens and the existing
   component classes (.cell, .card-grid, .field, .form-grid, .chip
   sizing from .kicker, .compare table rhythm). Nothing in this
   file is used by another page.

   The one piece of real work is the full table: from 900px up it is
   a table, and below that every row becomes a definition style list
   so a phone never scrolls the page sideways.
   ============================================================ */

/* ---------- screen reader only ---------- */
.fleet-sr{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ---------- the ownership line, first under the H1 ---------- */
.page-fleet .page-head .lede{max-width:58ch;}
.page-fleet .ownership-line{
  display:block;
  border-left:2px solid var(--sky);
  padding-left:16px;
  color:var(--ink);
  font-size:1.02rem;
  line-height:1.6;
}

/* ---------- filter row ---------- */
.fleet-filter{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 24px 18px;
  margin-bottom:36px;
}
.fleet-filter .eyebrow{display:block;margin-bottom:16px;}
.fleet-filter-grid{gap:0 20px;}
.fleet-filter .field{margin-bottom:16px;}
/* Every control clears 44px in both dimensions, on a phone too. */
.fleet-filter .field input,
.fleet-filter .field select{min-height:44px;}
.fleet-filter .field input:focus-visible,
.fleet-filter .field select:focus-visible,
.fleet-reset:focus-visible{outline:2px solid var(--sky-deep);outline-offset:2px;}
.fleet-filter-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 18px;
  border-top:1px solid var(--line-cool);
  padding-top:14px;
}
.fleet-count{
  margin:0;color:var(--ink);font-size:0.88rem;font-weight:600;
}
.fleet-count .fleet-count-sub{color:var(--dim);font-weight:400;}
.fleet-reset{
  min-height:44px;padding:0 4px;font-size:0.88rem;
}
.fleet-reset[hidden]{display:none;}

/* ---------- groups ---------- */
.fleet-group{padding:0;margin-bottom:44px;}
.fleet-group:last-child{margin-bottom:0;}
.fleet-group[hidden]{display:none;}
.fleet-group-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin:0 0 16px;
}
.fleet-group-count{
  font-family:'Inter',sans-serif;font-weight:600;font-size:0.78rem;
  color:var(--sky-deep);
}

/* ---------- the grid ---------- */
.fleet-grid{grid-template-columns:1fr;}
@media(min-width:552px){ .fleet-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){ .fleet-grid{grid-template-columns:repeat(3,1fr);} }
.fleet-card{padding:26px 24px 28px;}
/* a.cell-link sets display:block, so hidden needs saying out loud. */
.fleet-card[hidden]{display:none;}
.fleet-shot{margin-bottom:16px;}
.fleet-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.fleet-card .chip{
  display:inline-block;
  font-family:'Inter',sans-serif;font-weight:600;font-size:0.72rem;letter-spacing:0.01em;
  padding:4px 10px;border-radius:3px;
}
.fleet-card .chip-cat{background:var(--tint);color:var(--sky-deep);}
.fleet-card .chip-rel{background:var(--sand);color:var(--ink);}
.fleet-card-h{
  font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.22rem;line-height:1.3;
  color:var(--ink);margin:0 0 14px;
}
.fleet-facts{display:grid;gap:8px;margin:0 0 14px;}
.fleet-fact{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:2px 12px;}
.fleet-fact dt{
  font-family:'Inter',sans-serif;font-weight:600;font-size:0.76rem;color:var(--sky-deep);
}
.fleet-fact dd{color:var(--dim);font-size:0.9rem;margin:0;}
.fleet-access{color:var(--dim);font-size:0.88rem;}
@media(max-width:420px){
  .fleet-fact{grid-template-columns:1fr;}
}

/* ---------- the full table ---------- */
.fleet-table-wrap{
  border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden;
}
.fleet-table{width:100%;border-collapse:collapse;font-size:0.9rem;}
.fleet-table th,
.fleet-table td{
  padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:top;text-align:left;color:var(--dim);
}
.fleet-table thead th{
  background:var(--tint);color:var(--sky-deep);
  font-family:'Inter',sans-serif;font-weight:600;font-size:0.78rem;letter-spacing:0.01em;
}
.fleet-table tbody th[scope="row"]{
  color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.02rem;
}
.fleet-table tbody th[scope="row"] a{text-decoration:none;color:var(--ink);}
.fleet-table tbody th[scope="row"] a:hover{color:var(--sky-deep);text-decoration:underline;}
.fleet-table tbody tr:last-child th,
.fleet-table tbody tr:last-child td{border-bottom:none;}
.fleet-table tbody tr:hover{background:var(--tint);}
.fleet-row[hidden]{display:none;}
.fleet-empty[hidden]{display:none;}
.fleet-empty{margin-top:16px;}

/* Under 900px the table stops being a table. Each row becomes a
   definition style list: the type name is the heading, every other
   cell prints its own label from data-label. Nothing scrolls
   sideways at 390 or at 360. */
@media(max-width:899px){
  .fleet-table-wrap{border:none;border-radius:0;background:none;overflow:visible;}
  .fleet-table,
  .fleet-table tbody,
  .fleet-table tr,
  .fleet-table th,
  .fleet-table td{display:block;width:auto;}
  .fleet-table thead{
    position:absolute;width:1px;height:1px;margin:-1px;
    clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
  }
  .fleet-table tbody tr{
    background:var(--card);
    border:1px solid var(--line);border-radius:6px;
    padding:18px 20px;margin-bottom:12px;
  }
  .fleet-table tbody tr:hover{background:var(--card);}
  .fleet-table tbody tr:last-child{margin-bottom:0;}
  .fleet-table tbody th[scope="row"],
  .fleet-table tbody td{border-bottom:none;padding:0;}
  .fleet-table tbody th[scope="row"]{
    font-size:1.1rem;margin-bottom:10px;
    padding-bottom:10px;border-bottom:1px solid var(--line-cool);
  }
  .fleet-table tbody th[scope="row"] a{color:var(--sky-deep);}
  .fleet-table tbody td{
    display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);
    gap:2px 14px;padding:6px 0;
  }
  .fleet-table tbody td::before{
    content:attr(data-label);
    font-family:'Inter',sans-serif;font-weight:600;font-size:0.76rem;color:var(--sky-deep);
  }
  .fleet-table tr[hidden]{display:none;}
}
/* On a phone the label sits above its value, so a long range line
   keeps the full column width. */
@media(max-width:559px){
  .fleet-table tbody td{grid-template-columns:1fr;gap:2px;}
}

/* ---------- also in the book ---------- */
.fleet-also{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;max-width:820px;}
.fleet-also-row{background:var(--card);padding:16px 20px;display:grid;grid-template-columns:1fr;gap:4px;}
.fleet-also dt{font-family:'Inter',sans-serif;font-weight:600;font-size:0.82rem;color:var(--sky-deep);}
.fleet-also dd{margin:0;color:var(--dim);font-size:0.92rem;}
@media(min-width:700px){
  .fleet-also-row{grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:4px 24px;align-items:baseline;}
}

/* ---------- phone rhythm, in step with pages.css ---------- */
@media(max-width:640px){
  .fleet-filter{padding:22px 18px 14px;}
  .fleet-card{padding:24px 20px 26px;}
  .fleet-group{margin-bottom:34px;}
  .fleet-reset{width:100%;text-align:left;}
}

/* Shortlist prompt and direct access to the comparison. */
.fleet-compare-dialog{margin:auto;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);box-shadow:0 18px 70px #10283d33;}
.fleet-compare-dialog::backdrop{background:rgba(16,40,61,.55);}
.fleet-compare-dialog h2{font:500 clamp(24px,4vw,30px)/1.2 'Fraunces',Georgia,serif;margin:10px 0 14px;}
.fleet-compare-dialog p{color:var(--dim);margin:0 0 16px;}
.fleet-compare-dialog ul{padding-left:20px;margin:0 0 24px;}
.fleet-compare-dialog li{margin:8px 0;}
.fleet-dialog-actions{display:flex;gap:12px;flex-wrap:wrap;}
.fleet-dialog-actions .btn{min-height:44px;}
.fleet-shortlist-bar{position:fixed;z-index:45;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(560px,calc(100% - 32px));padding:12px 16px;border:1px solid var(--line-cool);border-radius:6px;background:var(--card);box-shadow:0 8px 30px #10283d26;}
.fleet-shortlist-bar[hidden]{display:none;}
.fleet-shortlist-bar span{font-size:14px;font-weight:500;}
.page-fleet .comparison-panel{scroll-margin-top:150px;}
.page-fleet .comparison-panel h2:focus{outline:2px solid var(--sky-deep);outline-offset:6px;}
@media(max-width:480px){.fleet-compare-dialog{padding:24px 20px;}.fleet-dialog-actions{flex-direction:column;}.fleet-dialog-actions .btn{width:100%;}.fleet-shortlist-bar{gap:12px;padding:10px 12px;}.fleet-shortlist-bar span{font-size:12px;}.fleet-shortlist-bar .btn{font-size:13px;padding:12px;}.page-fleet .comparison-panel{scroll-margin-top:125px;}}