/* Stop iPhones / some Androids from enlarging text when the phone is turned to landscape */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  :root{
    --ink:#142B3D;
    --ink-soft:#3E5468;
    --teal:#1F4B4D;
    --teal-light:#e7f0ef;
    --amber:#E8A33D;
    --amber-deep:#C97F1E;
    --paper:#F1F3EE;
    --card:#FFFFFF;
    --line:#DCE1DA;
    --good:#2F8F5B;
    --good-bg:#E7F5EC;
    --warn:#C1432F;
    --warn-bg:#FBEAE6;
    --radius:14px;
    /* Thought into Form tone TF-T01 Mint */
    --mint050:#F1F9F5;
    --mint100:#D9F0E5;
    --mint300:#A8D9C2;
    --mint800:#245A44;
    --mint-ink:#1B4434;      /* text on Mint 300 */
    --amber-light:#F5C26B;   /* TF-C12: labels on Mint 800 */
    --mist:#D5DEE6;          /* TF-C11: secondary text on Navy */
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:#fff;
    color:var(--ink);
    font-family:'Public Sans', -apple-system, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    color:var(--ink);
    margin:0;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px 64px;}
  @media screen and (max-width:600px){ .wrap{padding:0 16px 48px;} }

  /* ---------- Header (Thought into Form layout) ----------
     Navy band. Phones: logo on top, the name under it, left-aligned. From 600px: logo on the left, name on the
     right. Under the name: the edition in Mint 300, then "Prepared for" (label in Mist, name in amber, tap to edit).
     A Mint 300 strip runs under the band. */
  .hero{
    background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left));
  }
  .hero-logo{height:36px;width:auto;display:block;}
  .hero-name{min-width:0;}
  .hero h1{font-family:'Fraunces',serif;font-weight:700;line-height:1.05;font-size:clamp(24px, 1.4vw + 19px, 34px);color:#fff;}
  .hero-edition{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--mint300);margin-top:6px;}
  .hero-prep{font-size:13px;color:var(--mist);margin-top:8px;}
  .hero-prep .code{
    font-weight:700;color:var(--amber);letter-spacing:.04em;
    cursor:text;outline:none;border-bottom:1px dashed rgba(232,163,61,.55);padding:1px 2px;min-width:40px;display:inline-block;
  }
  .hero-prep .code:hover, .hero-prep .code:focus{border-bottom-color:var(--amber);background:rgba(255,255,255,.06);}
  @media screen and (min-width:600px){
    .hero{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;
      padding:calc(clamp(18px, 2.4vw, 28px) + env(safe-area-inset-top)) max(24px, calc((100% - 1180px) / 2 + 24px)) clamp(18px, 2.4vw, 28px);}
    .hero-logo{height:clamp(44px, 4.6vw, 60px);}
    .hero-name{text-align:right;}
  }
  .hero-strip{height:6px;background:var(--mint300);}

  /* ---------- Layout grid ---------- */
  .grid{
    display:grid;grid-template-columns:1.55fr 1fr;gap:28px;
    margin-top:32px;
  }
  /* Without this, a grid item's automatic minimum width is based on the
     min-content size of its contents (e.g. the wide items table below),
     which can force the whole grid — and the page — wider than the
     viewport even though the table has its own horizontal scroller. */
  .grid > div{min-width:0;}
  @media screen and (max-width:900px){.grid{grid-template-columns:1fr;}}

  .card{
    background:var(--mint100);border:1px solid var(--mint300);border-radius:var(--radius);
    padding:26px 28px;margin-bottom:24px;
  }
  @media screen and (max-width:600px){ .card{padding:18px 16px;border-radius:12px;} }
  .card h2{
    font-size:20px;font-weight:600;margin-bottom:4px;
  }
  .card .card-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:20px;}

  .section-label{
    display:flex;align-items:center;gap:10px;margin-bottom:20px;
  }
  .section-label .num{
    width:26px;height:26px;border-radius:50%;background:var(--mint800);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
    font-family:'Public Sans',sans-serif;
  }

  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
  @media screen and (max-width:520px){.field-row{grid-template-columns:1fr;}}

  label.field-label{
    display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px;
  }
  label.field-label .hint{font-weight:400;color:var(--ink-soft);}

  input[type=number], input[type=text], select{
    width:100%;padding:10px 12px;border:1.5px solid var(--mint300);border-radius:9px;
    font-family:'Public Sans',sans-serif;font-size:14.5px;color:var(--ink);background:#fff;
    transition:border-color .15s;
  }
  input[type=number]:focus, input[type=text]:focus, select:focus{
    outline:none;border-color:var(--teal);
  }

  .chip-group{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    border:1.5px solid var(--mint300);background:#fff;color:var(--ink-soft);
    padding:8px 16px;border-radius:100px;font-size:13.5px;font-weight:600;cursor:pointer;
    user-select:none;transition:all .15s;
  }
  .chip.active{background:var(--teal);border-color:var(--teal);color:#fff;}
  .chip:hover:not(.active){border-color:var(--teal);color:var(--teal);}

  .toggle-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 16px;background:#fff;border:1px solid var(--mint300);border-radius:10px;
  }
  .toggle-row .toggle-copy{font-size:13.5px;color:var(--ink);font-weight:600;}
  .toggle-row .toggle-copy .hint{display:block;font-weight:400;color:var(--ink-soft);font-size:12.5px;margin-top:2px;}

  .switch{position:relative;width:46px;height:26px;flex-shrink:0;}
  .switch input{opacity:0;width:0;height:0;}
  .slider{
    position:absolute;cursor:pointer;inset:0;background:#C7CFCB;border-radius:100px;transition:.2s;
  }
  .slider::before{
    content:'';position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;
    box-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .switch input:checked + .slider{background:var(--amber-deep);}
  .switch input:checked + .slider::before{transform:translateX(20px);}

  .pack-style-row{display:flex;align-items:center;gap:12px;}
  .pack-style-end{font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}
  /* On very narrow screens the two nowrap end-labels plus the slider don't
     all fit on one line — stack the labels above the slider instead of
     letting them force the page to scroll horizontally. */
  @media screen and (max-width:420px){
    .pack-style-row{flex-wrap:wrap;row-gap:8px;}
    .pack-style-row input[type=range]{order:3;flex-basis:100%;}
    .pack-style-end{white-space:normal;}
  }
  input[type=range]{
    flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:100px;
    background:linear-gradient(to right, var(--teal) 0%, var(--teal) 33%, #C7CFCB 33%, #C7CFCB 66%, var(--amber) 66%, var(--amber) 100%);
    outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
    border:3px solid var(--teal);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);
  }
  input[type=range]::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal);cursor:pointer;
  }

  .manual-banner{
    display:none;align-items:center;gap:10px;background:var(--amber);color:var(--ink);
    font-size:13px;font-weight:700;padding:10px 16px;border-radius:9px;margin-bottom:18px;flex-wrap:wrap;
  }
  .manual-banner.show{display:flex;}
  .group-btn{
    background:#fff;border-color:var(--ink);color:var(--ink);white-space:nowrap;padding:7px 14px;font-size:12.5px;
    flex-shrink:0;
  }
  .group-btn.active{background:var(--ink);color:#fff;}

  /* ---------- Summary stub (boarding-pass style) ---------- */
  .stub{
    background:var(--mint100);border:1px solid var(--mint300);color:var(--ink);border-radius:var(--radius);padding:0;position:sticky;top:20px;
    max-height:calc(100vh - 40px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--mint300) transparent;
  }
  /* Once the grid collapses to one column (see @media screen and (max-width:900px)
     above), the stub is no longer a side panel — it sits full-width below
     the form, so sticking it to the viewport top and capping its height
     would just clip it. Let it behave like a normal block there. */
  @media screen and (max-width:900px){
    .stub{position:static;top:auto;max-height:none;overflow-y:visible;margin-top:28px;}
  }
  .stub::-webkit-scrollbar{width:6px;}
  .stub::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:100px;}
  .stub-head{padding:16px 20px 4px;}
  .stub-head .eyebrow{color:var(--mint800);font-size:12px;font-weight:700;letter-spacing:.05em;}
  .stub-head h3{color:var(--ink);font-size:19px;margin-top:2px;}
  .stub-perf{border-top:2px dashed rgba(255,255,255,0.2);margin:0 24px;}
  .pdf-btn{
    width:100%;background:var(--amber-deep);color:#fff;border:none;border-radius:9px;
    padding:9px 0;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:10px;
    transition:background .15s;
  }
  .pdf-btn:hover{background:#a86416;}

  /* ---------- Printable report (hidden on screen, shown only when printing) ---------- */
  .print-only{display:none;}
  @media print{
    #appRoot{display:none !important;}
    .print-only{display:block !important;}
    @page{margin:0;}   /* paper size & orientation come from the print settings */
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;}
    /* The on-screen body uses a pale grey-green (--paper) background, which
       would otherwise print as a faint tinted cast across the whole page
       (most visible in the gaps around the section headers). The report
       should print on a clean white page instead. */
    body{background:#fff;}
  }
  /* Navy "hero" panels — trip details and summary each get their own panel
     on the same dark background as the on-screen hero, so they read as
     distinct sections rather than one merged block. */
  /* ---- Running header & footer (repeat on every printed page, like a Word
     document). Each
     band is a single image (navy + logo drawn together on a canvas), and
     images always print in full colour — unlike CSS backgrounds, which
     browsers can strip or lighten when "Background graphics" is off. */
  table.pr-page{width:100%;border-collapse:collapse;}
  table.pr-page > thead > tr > td, table.pr-page > tfoot > tr > td, table.pr-page > tbody > tr > td{padding:0;}
  .pr-band{position:relative;width:100%;line-height:0;background:#142B3D;}
  /* Navy strip (an image, so it always prints in full colour) stretched to the page width,
     with the logo on top at a fixed size — works on any paper size or orientation */
  .pr-band > img.pr-band-img{display:block;width:100%;object-fit:fill;}
  .pr-band-top > img.pr-band-img{height:30mm;}
  .pr-band-bottom > img.pr-band-img{height:20mm;}
  .pr-band-logo{position:absolute;top:50%;width:auto;}
  .pr-band-top .pr-band-logo{left:16mm;top:15mm;height:14mm;transform:translateY(-50%);}
  .pr-band-bottom .pr-band-logo{left:50%;height:14mm;transform:translate(-50%,-50%);}
  .pr-band-text{position:absolute;top:0;right:0;height:30mm;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:0 16mm;line-height:1.25;text-align:right;}
  .pr-band-title{font-family:'Fraunces',serif;font-size:26px;font-weight:700;color:#fff;line-height:1.05;}
  .pr-band-kind{font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--mint300);margin-top:5px;}
  .pr-band-meta{font-size:11px;color:var(--mist);margin-top:5px;}
  .pr-band-meta b{color:var(--amber);}
  .pr-band-top > img.pr-band-strip{display:block;width:100%;height:2mm;object-fit:fill;}
  .pr-foot-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:10mm;padding:0 16mm;line-height:1.5;font-size:8px;color:#B9C6D1;}
  .pr-foot-text > span:last-child{text-align:right;}
  /* Legal notes — last page only, two tidy columns */
  .pr-disclaimer{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10mm;font-size:8.5px;line-height:1.55;color:var(--ink-soft);break-inside:avoid;page-break-inside:avoid;}
  .pr-disclaimer b{display:block;color:var(--ink);font-size:8px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;}
  /* The bands are fixed to the top/bottom edge of every printed page; the
     empty thead/tfoot spacers (repeated on each page) reserve room for them
     so the content never runs underneath. */
  /* nudged 1mm past the right edge so the navy always reaches it, whatever the paper size */
  .pr-band-top{position:fixed;top:0;left:0;right:-1mm;min-height:32mm;background:#fff;}
  /* nudged 1mm past the bottom edge to avoid a hairline white gap from rounding */
  .pr-band-bottom{position:fixed;bottom:-1mm;left:0;right:-1mm;min-height:20mm;}
  .pr-head-space{height:38mm;}   /* 30mm band + 2mm strip + 6mm gap */
  .pr-foot-space{height:26mm;}   /* 20mm band + 6mm gap */
  .pr-content{padding:0 16mm !important;}
  /* Report sections (Thought into Form report rules): a Mint 800 bar for each heading; trip details in white
     boxes on a Mint 100 panel; the key figures in Mint 800 boxes with Amber Light labels; the packing list with
     Navy column headings on white, shaded Mint 050 from the first row. */
  .pr-section-title{font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--mint800);margin:12px 0 7px;padding:5px 10px;text-transform:uppercase;border-radius:6px;break-after:avoid;page-break-after:avoid;}
  .pr-block{break-inside:avoid;page-break-inside:avoid;}
  .pr-block:first-child .pr-section-title{margin-top:0;}
  .pr-panel{background:var(--mint100);border:1px solid var(--mint300);border-radius:9px;padding:9px;}
  .pr-trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
  .pr-trip-box.span2{grid-column:span 2;}
  .pr-trip-box{background:#fff;border:1px solid var(--mint300);border-radius:7px;padding:6px 10px;}
  .pr-trip-box b{display:block;color:var(--mint800);font-weight:700;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}
  .pr-trip-box span{color:var(--ink);font-size:12px;font-weight:500;}
  .pr-split{display:grid;grid-template-columns:repeat(7,auto);justify-content:start;column-gap:6px;align-items:baseline;}
  .pr-split b{margin-bottom:2px;}
  .pr-split .dot{text-align:center;}
  .pr-split span{padding-top:2px;}
  .pr-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:7px;}
  .pr-key{background:var(--mint800);border-radius:8px;padding:8px 10px;text-align:center;}
  .pr-key .lbl{display:block;font-size:9.5px;color:var(--amber-light);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
  .pr-key .val{font-family:'Fraunces',serif;font-size:18px;font-weight:700;color:#fff;display:block;margin-top:2px;}
  .pr-bag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
  .pr-summary-box{background:#fff;border:1px solid var(--mint300);border-radius:7px;padding:6px 10px;text-align:center;}
  .pr-summary-box .lbl{display:block;font-size:9.5px;color:var(--mint800);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
  .pr-summary-box .val{font-family:'Fraunces',serif;font-size:13px;font-weight:700;color:var(--ink);display:block;margin-top:2px;line-height:1.35;}
  .pr-bag-off .val{font-family:inherit !important;font-size:12px !important;font-weight:600 !important;color:var(--ink-soft) !important;}
  .pr-fit{margin-top:7px;padding:7px 10px;border-radius:7px;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--mint300);}
  .pr-fit.ok{color:var(--good);}
  .pr-fit.warn{color:var(--warn);}
  .pr-notes{margin-top:5px;display:flex;flex-direction:column;gap:4px;}
  .pr-notes div{background:#fff;border:1px solid var(--mint300);border-radius:7px;padding:5px 10px;font-size:10.5px;color:var(--ink);}
  .pr-fine{margin-top:6px;font-size:9.5px;color:var(--ink-soft);}
  table.pr-table{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:0;}
  table.pr-table th{background:#fff;color:var(--ink);text-align:left;padding:4px 10px 5px;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--line);}
  table.pr-table td{padding:3.5px 10px;border-bottom:1px solid var(--line);}
  table.pr-table tr.pr-odd td{background:var(--mint050);}
  table.pr-table tr.pr-group td{background:var(--mint100) !important;color:var(--mint800);font-weight:700;font-size:10.5px;padding:5px 10px;border-top:1.5px solid var(--mint800);break-after:avoid;page-break-after:avoid;}
  .pr-checkbox{display:inline-block;width:13px;height:13px;border:1.5px solid var(--mint800);border-radius:3px;background:#fff;}
  .stub-body{padding:8px 20px 18px;}
  .stub-subhead{
    font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--amber-light);
    margin:6px 0 0;padding-top:0;
  }
  .stub-metric{
    display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;
    border-bottom:1px solid rgba(255,255,255,0.14);
  }
  .stub-metric:last-of-type{border-bottom:none;}
  .stub-metric.no-border{border-bottom:none;}
  .stub-metric .lbl{font-size:13px;color:rgba(255,255,255,.8);}
  .stub-metric .val{font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:#fff;}
  .stub-metric .val.small{font-size:13.5px;font-weight:500;}
  .stub-subnote{
    font-size:11.5px;color:var(--ink-soft);padding:7px 12px 9px;border-top:1px dotted var(--mint300);
  }

  .fit-msg{
    margin-top:8px;padding:8px 11px;border-radius:9px;font-size:11.5px;font-weight:600;line-height:1.3;
  }
  .fit-msg.ok{background:var(--good-bg);color:var(--good);}
  .fit-msg.warn{background:var(--warn-bg);color:var(--warn);}

  .progress-track{height:7px;background:var(--mint100);border-radius:100px;overflow:hidden;margin-top:6px;}
  .progress-fill{height:100%;background:var(--amber);border-radius:100px;transition:width .25s;}

  /* ---------- Item table ---------- */
  .table-wrap{overflow:hidden;border:1px solid var(--mint300);border-radius:12px;background:#fff;}
  /* The list scrolls inside its own box so the column headings stay pinned
     at the top of it (and the search bar stays just above). */
  .table-scroll{overflow:auto;max-height:min(75vh, 900px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  table.items tbody tr.group-row td{background:var(--mint100) !important;color:var(--mint800);font-size:13px;font-weight:700;padding:9px 12px;border-top:2px solid var(--mint800);}
  table.items tbody tr.group-row td span{font-weight:500;color:var(--ink-soft);}
  table.items tbody tr.list-divider td{background:var(--mint050) !important;color:var(--ink-soft);font-size:12px;font-weight:700;padding:10px 12px;border-top:2px solid var(--line);}
  .fit-fine{font-size:11.5px;line-height:1.45;color:var(--ink-soft);margin-top:10px;}
  /* Search bar sitting inside the table frame, above the column headings */
  .table-search{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--mint300);}
  .table-search input[type=search]{
    flex:1;min-width:0;border:1.5px solid var(--mint300);border-radius:9px;padding:8px 12px;font:inherit;font-size:13.5px;
    background:#fff;color:var(--ink);outline:none;
  }
  .table-search input[type=search]:focus{border-color:var(--teal);}
  .ts-field{position:relative;flex:1;min-width:0;display:flex;}
  .ts-field input[type=search]{padding-right:38px !important;}
  /* our own clear button (phones like iPhone don't show one); hide the browser's so there aren't two */
  .ts-field input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;}
  .ts-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;border-radius:50%;
    background:var(--line);color:var(--ink);font-size:18px;line-height:28px;padding:0;cursor:pointer;}
  .ts-clear:hover{background:#C9D0C8;}
  .table-search .ts-count{font-size:12px;color:var(--ink-soft);white-space:nowrap;}
  /* Packed checklist column (shown only when Manual entry is off) */
  th.packed-head{text-align:center;}
  input.pack-check{width:18px;height:18px;cursor:pointer;accent-color:var(--mint800);vertical-align:middle;}
  table.items tbody tr.is-packed td{background:var(--mint100) !important;}
  table.items tbody tr.is-packed td:nth-child(2){color:var(--ink-soft);}
  /* Units switch (Trip details header) */
  .units-toggle{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-soft);}
  .units-toggle .on{color:var(--teal);}
  @media screen and (max-width:600px){ .section-label{flex-wrap:wrap;} .units-toggle{margin-left:36px;} }
  .switch.small-switch{width:40px;height:23px;}
  .switch.small-switch .slider::before{width:17px;height:17px;}
  .switch.small-switch input:checked + .slider::before{transform:translateX(17px);}
  /* Bags (Luggage card) */
  /* In the recommended (non-manual) view every row is included, so the Include? column is hidden */
  table.items.recommended th:nth-child(3), table.items.recommended td:nth-child(3){display:none;}
  .buffer-panel{display:flex;align-items:center;gap:18px;padding:14px 16px;border-radius:10px;background:#fff;border:1px solid var(--mint300);border-left:5px solid var(--amber-deep);}
  .buffer-title{font-weight:700;font-size:14.5px;color:var(--ink);}
  .buffer-desc{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin-top:3px;}
  .buffer-input{display:flex;align-items:center;gap:6px;flex:none;}
  .buffer-input input{width:76px;font-size:18px;font-weight:700;text-align:center;border:2px solid var(--amber-deep);}
  .buffer-input span{font-size:18px;font-weight:700;color:var(--amber-deep);}
  @media screen and (max-width:600px){ .buffer-panel{flex-direction:column;align-items:flex-start;} }
  .bag-rows{display:flex;flex-direction:column;gap:10px;}
  .bag-row{display:grid;grid-template-columns:1.5fr auto 1fr 1fr;gap:12px 16px;align-items:end;padding:12px 14px;border:1px solid var(--mint300);border-radius:10px;background:#fff;}
  .bag-row.off .bag-field{opacity:.45;}
  .bag-name{font-weight:700;font-size:14px;align-self:center;}
  .bag-name small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);margin-top:2px;}
  .bag-switch{align-self:center;}
  .bag-field label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;}
  @media screen and (max-width:600px){ .bag-row{grid-template-columns:1fr 1fr;} .bag-switch{justify-self:end;} }
  /* Item cell extras */
  /* which bag an item goes in: white, Mint 300 border, the bag's icon in Mint 800 */
  .bag-pill{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:10.5px;font-weight:700;padding:1px 7px 1px 6px;border-radius:100px;background:#fff;border:1px solid var(--mint300);color:var(--ink);}
  .bag-pill .ic{color:var(--mint800);font-size:9.5px;}
  .item-note{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.35;}
  select.bag-edit{margin-top:6px;font-size:12px;padding:5px 8px;min-width:180px;}
  /* Summary: per-bag breakdown */
  .lbl-sub{font-size:11px;opacity:.75;}
  .bag-line{padding:8px 12px;border-bottom:1px dotted var(--mint300);}
  .bag-line:last-child{border-bottom:none;}
  .bag-line .bag-top{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink);}
  .bag-line .bag-top .ic{color:var(--mint800);margin-right:3px;}
  .bag-line .bag-figs{font-size:12px;color:var(--ink-soft);margin-top:2px;}
  .bag-line.over .bag-top span:last-child{color:var(--warn);font-weight:700;}
  .fit-notes{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
  .fit-notes div{font-size:12px;line-height:1.45;color:var(--ink);background:var(--mint050);border:1px solid var(--mint100);border-radius:8px;padding:7px 10px;}
  .trips-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
  .trips-row select, .trips-row input{flex:1;min-width:180px;}
  .trips-row .btn{white-space:nowrap;}
  .trips-row .btn:disabled{opacity:.45;cursor:not-allowed;}
  #tripMsg{color:var(--teal);font-weight:600;margin-top:4px;}
  .trip-limits{margin-top:10px;padding-top:10px;border-top:1px dashed var(--mint300);font-size:12px;line-height:1.5;color:var(--ink-soft);}
  .trip-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--mint300);border-radius:9px;padding:9px 12px;margin-bottom:12px;font-size:13px;color:var(--ink);}
  .trip-status .dot{width:9px;height:9px;border-radius:50%;background:#2F8F5B;flex-shrink:0;}
  .trip-status.dirty .dot{background:var(--amber-deep);}
  .trip-status .state{color:var(--ink-soft);}
  .trip-status.dirty .state{color:var(--amber-deep);font-weight:700;}
  .reset-link{display:block;margin:-2px auto 8px;background:none;border:none;color:var(--ink-soft);font-size:12px;cursor:pointer;text-decoration:underline;padding:4px;}
  .reset-link:hover{color:var(--ink);}
  .pr-checkbox.ticked{background:var(--mint800);position:relative;}
  .pr-checkbox.ticked::after{content:'';position:absolute;left:3.5px;top:0.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);}
  table.items tbody tr.no-results td{text-align:center;color:var(--ink-soft);padding:18px 12px;font-style:italic;}
  /* On laptop/desktop the left column has plenty of room, so let the table
     stretch to fill it with no forced minimum — no horizontal scrollbar.
     Below the same 900px breakpoint the rest of the layout collapses at
     (tablet/mobile), seven columns genuinely need more room than the
     screen has, so a minimum width is restored there and .table-wrap's
     overflow-x:auto lets it scroll horizontally instead of squeezing. */
  table.items{width:100%;border-collapse:collapse;font-size:13.5px;}
  @media screen and (max-width:900px){
    table.items{min-width:640px;}
    /* Category and Item stay put on the left; scrolling sideways brings Qty, Unit,
       Volume, Weight and Packed up alongside them */
    table.items thead th:nth-child(1),
    table.items tbody tr:not(.group-row):not(.list-divider):not(.edit-hint-row):not(.no-results) > td:nth-child(1){
      position:sticky;left:0;width:86px;min-width:86px;max-width:86px;padding-left:6px;padding-right:4px;}
    table.items thead th:nth-child(2),
    table.items tbody tr:not(.group-row):not(.list-divider):not(.edit-hint-row):not(.no-results) > td:nth-child(2){
      position:sticky;left:86px;width:124px;min-width:124px;max-width:124px;padding-left:8px;padding-right:6px;box-shadow:3px 0 4px -3px rgba(20,43,61,.25);}
    table.items thead th:nth-child(1), table.items thead th:nth-child(2){z-index:5;}
    table.items tbody tr > td:nth-child(1), table.items tbody tr > td:nth-child(2){background:#fff;z-index:2;}
    table.items tbody tr:nth-child(odd) > td:nth-child(1), table.items tbody tr:nth-child(odd) > td:nth-child(2){background:var(--mint050);}
    table.items .cat-pill{font-size:9.5px;padding:2px 6px;}
    /* edit boxes inside the frozen columns shrink to fit them */
    table.items tbody td:nth-child(1) select, table.items tbody td:nth-child(2) select{width:100%;min-width:0;max-width:100%;}
    table.items thead th{padding-left:8px;padding-right:8px;}
  }
  /* Two-column layout on smaller laptops / landscape tablets leaves the table
     narrower, so tighten the cell padding a little to avoid a sideways scroll. */
  @media screen and (min-width:901px) and (max-width:1180px){ table.items thead th, table.items tbody td{padding-left:7px;padding-right:7px;} }
  table.items thead th{
    background:var(--mint300);color:var(--ink);text-align:left;padding:11px 12px;font-weight:700;font-size:12.5px;
    letter-spacing:.01em;position:sticky;top:0;z-index:3;
  }
  /* Column name with its unit centred underneath, e.g. Volume / (L) */
  .th-stack{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25;}
  table.items tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
  table.items tbody tr:last-child td{border-bottom:none;}
  table.items tbody tr:nth-child(odd){background:var(--mint050);}
  table.items tbody tr.excluded td{color:#AEB8BF;}
  table.items tbody tr.excluded td > *{opacity:.45;}
  /* A row open for editing: full strength, amber outline and tint, so it's
     obvious you're in the editor (even for items not yet on the list). */
  table.items tbody tr.editing td > *{opacity:1 !important;}
  table.items tbody tr.editing td{background:#FFF4DE !important;border-top:2px solid var(--amber-deep);border-bottom:none;color:var(--ink);}
  table.items tbody tr.edit-hint-row td{background:#FFF4DE !important;border-top:1px dashed rgba(193,118,31,.45);border-bottom:2px solid var(--amber-deep);border-left:4px solid var(--amber-deep);
    padding:7px 14px 9px;font-size:12.5px;font-weight:700;color:var(--amber-deep);}
  table.items tbody tr.edit-hint-row b{text-decoration:underline;}
  table.items tbody tr.editing td:first-child{border-left:4px solid var(--amber-deep);}
  /* Include? box on an item that isn't on the list yet — draws the eye to it */
  select.row-edit.needs-include{border:2px solid var(--amber-deep);background:#FFE7B8;font-weight:700;box-shadow:0 0 0 3px rgba(193,118,31,.18);}
  .edit-hint b{text-decoration:underline;}
  td .edit-hint{max-width:170px;}
  .estimate-note{margin-top:4px;font-style:italic;}
  .edit-hint{display:block;margin-top:5px;font-size:11px;font-weight:700;color:var(--amber-deep);line-height:1.35;}
  @keyframes flashRow{
    0%{background:var(--amber);}
  }
  table.items tbody tr.flash td{animation:flashRow 1.4s ease-out;}
  /* Newly added items stay highlighted (and pinned to the top of the list)
     until Manual entry is switched off. */
  table.items tbody tr.just-added td{background:#FCE9C7 !important;}
  .cat-pill{
    font-size:11px;font-weight:700;color:var(--mint800);background:var(--mint100);border:1px solid var(--mint300);
    padding:2px 8px;border-radius:100px;white-space:nowrap;
  }
  table.items select{padding:5px 8px;font-size:12.5px;border-radius:7px;}
  table.items input[type=number]{padding:5px 8px;font-size:12.5px;width:64px;border-radius:7px;}
  /* when a row is opened for editing, make sure every field is wide enough
     to show its full value/options — never clipped or ellipsised */
  select.row-edit[data-field="category"]{min-width:150px;}
  select.row-edit[data-field="unit"]{min-width:90px;}
  select.row-edit[data-field="override"]{min-width:100px;}
  input.row-edit[data-field="qty"]{width:58px;min-width:58px;}
  input.row-edit[data-field="vol"], input.row-edit[data-field="wt"]{width:76px;min-width:76px;}
  select.row-edit, input.row-edit{max-width:none;}
  .qty-readonly{font-weight:600;}
  table.items tbody td:last-child{padding:0;}
  .action-cell{display:flex;align-items:stretch;height:100%;min-height:38px;}
  .del-btn{
    border:none;background:none;color:var(--warn);font-size:16px;cursor:pointer;line-height:1;padding:9px 10px;
    flex:0 0 auto;
  }
  .del-btn:hover{opacity:.7;}
  .corr-pencil{
    border:none;background:none;color:var(--teal);font-size:13px;cursor:pointer;line-height:1;padding:9px 12px;
    opacity:.5;transition:opacity .15s;flex:1;display:flex;align-items:center;justify-content:center;
  }
  tr:hover .corr-pencil{opacity:.85;}
  .corr-pencil:hover{opacity:1 !important;color:var(--teal);}
  .corr-done-btn{
    border:none;background:var(--good);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;padding:8px 10px;
    flex:1;display:flex;align-items:center;justify-content:center;border-radius:0;
    line-height:1;
  }
  .corr-done-btn:hover{background:#256e46;}
  input.row-edit{border-color:var(--amber-deep);}
  select.row-edit{border-color:var(--amber-deep);}
  .add-item-row{
    display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:16px;
    background:#fff;border:1.5px dashed var(--mint300);border-radius:10px;padding:14px 16px;
  }
  .add-item-row .af{flex:1;min-width:110px;}
  .add-item-row .af.cat-field{min-width:172px;}
  .add-item-row label{font-size:11.5px;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:4px;}
  .btn{
    border:none;border-radius:9px;padding:10px 18px;font-weight:700;font-size:13.5px;cursor:pointer;
    background:var(--teal);color:#fff;transition:background .15s;
  }
  .btn:hover{background:#173a3c;}
  .btn.amber{background:var(--amber-deep);}
  .btn.amber:hover{background:#a86416;}
  .btn.ghost{background:#fff;color:var(--teal);border:1.5px solid var(--teal);}

  .helper-text{font-size:12.5px;color:var(--ink-soft);margin-top:10px;}

  footer{text-align:center;color:var(--ink-soft);font-size:12.5px;padding:30px 0 0;}
  .watermark-band{
    background:var(--ink);margin-top:22px;padding:26px 24px calc(30px + env(safe-area-inset-bottom));
  }
  .watermark-band img{display:block;margin:0 auto;width:380px;max-width:100%;height:auto;}
  sup.tm{font-size:.42em;vertical-align:super;line-height:0;margin-left:1px;font-weight:600;}

/* ---------- Sign in ---------- */
.signin-overlay{position:fixed;inset:0;z-index:1000;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;}
.signin-overlay[hidden], .signout-row[hidden]{display:none !important;}
.signin-card{background:#fff;border-radius:14px;padding:30px 28px;width:100%;max-width:420px;border-top:6px solid var(--mint300);}
.signin-logo{display:block;height:44px;margin:0 auto 18px;background:var(--ink);padding:8px 14px;border-radius:10px;}
.signin-card h1{font-family:'Fraunces',Georgia,serif;font-size:26px;margin:0;color:var(--ink);text-align:center;}
.si-edition{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--mint800);text-align:center;margin:4px 0 14px;}
.signin-card h1 sup{font-size:.45em;}
.signin-card p{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;text-align:center;line-height:1.5;}
.signin-card label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 5px;}
.signin-card input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:11px 12px;border:1.5px solid var(--mint300);border-radius:9px;margin:0 0 14px;}
.signin-card input:focus{outline:none;border-color:var(--teal);}
.signin-card button{width:100%;font:inherit;font-weight:700;font-size:15px;padding:12px;border:none;border-radius:9px;background:var(--amber-deep);color:#fff;cursor:pointer;}
.signin-card button:disabled{opacity:.6;cursor:default;}
.si-error{color:var(--warn) !important;font-weight:600;min-height:1.2em;margin:12px 0 0 !important;}
.signout-row{text-align:center;font-size:12px;color:var(--ink-soft);margin:0 0 24px;}
.signout-row button{background:none;border:none;padding:0;font:inherit;color:var(--teal);text-decoration:underline;cursor:pointer;}
@media print{ .signin-overlay, .signout-row{display:none !important;} }

/* ---------- Home-screen card and support link ---------- */
.install-strip[hidden], .install-card[hidden], .support-line[hidden]{display:none !important;}
@media screen and (min-width:601px){ .install-card{padding:20px 26px;} }
.install-title{font-size:17px !important;}
.install-how{font-size:13px;color:var(--ink);margin-bottom:10px;}
.install-btns{display:flex;align-items:center;gap:14px;}
.link-btn{background:none;border:none;padding:4px 0;font:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;}
.link-btn:hover{color:var(--ink);}
.support-line{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center;}
.support-line a, .support-line button{color:var(--teal);font-weight:700;}
.support-line button{background:none;border:none;padding:0;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;}
.signin-card .support-line{margin:12px 0 0 !important;font-size:12.5px !important;}
.signin-card .support-line button{width:auto;padding:0;background:none;color:var(--teal);font-size:12.5px;}

/* ---------- Icons (Font Awesome, built into index.html) ---------- */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor;overflow:visible;flex-shrink:0;}
.card h2 .ic{color:var(--mint800);font-size:.85em;margin-right:4px;}
.chip .ic{color:var(--mint800);margin-right:3px;}
.chip.active .ic{color:#fff;}
.pack-style-end .ic, .bag-name .ic, .buffer-title .ic{color:var(--mint800);margin-right:3px;}
.buffer-title .ic{color:var(--amber-deep);}
.trip-limits .ic{color:var(--mint800);margin-right:2px;}
.group-btn .ic{margin-right:3px;}
.manual-banner .ic{margin-right:4px;}
.pdf-btn .ic{margin-right:5px;}
table.items tr.group-row .ic, table.pr-table tr.pr-group .ic{margin-right:4px;}
.pr-summary-box .lbl .ic{margin-right:2px;}

/* ---------- Summary panel (Thought into Form rules) ----------
   A light Mint card. The key figures sit in tiles: Volume and Weight in Mint 800 with Amber Light labels,
   Items and Packed in white. "By bag" and "Fit check" are white panels under a Mint 300 header. */
.stub-body{padding:10px 16px 16px;}
.stub-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px;}
.stub-tile{background:#fff;border:1px solid var(--mint300);border-radius:10px;padding:8px 6px 9px;text-align:center;}
.stub-tile .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mint800);}
.stub-tile .val{display:block;font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--ink);line-height:1.2;margin-top:2px;}
.stub-tile .sub{display:block;font-size:11px;color:var(--ink-soft);margin-top:1px;}
.stub-tile.key{background:var(--mint800);border-color:var(--mint800);}
.stub-tile.key .lbl{color:var(--amber-light);}
.stub-tile.key .val{color:#fff;}
.stub-tile.key .sub{color:rgba(255,255,255,.82);}
.stub-panel{background:#fff;border:1px solid var(--mint300);border-radius:10px;overflow:hidden;margin-bottom:10px;}
.stub-panel:last-child{margin-bottom:0;}
.stub-panel-head{background:var(--mint300);color:var(--mint-ink);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;}
.stub-panel-body{padding:10px 12px 12px;}
.stub-panel .fit-msg{margin-top:0;}
.stub-subnote:empty{display:none;}

/* ---------- Home-screen strip (above the footer) ---------- */
.install-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--mint050);border:1px solid var(--mint300);border-radius:12px;padding:12px 16px;margin-top:8px;}
.install-ic{width:36px;height:36px;border-radius:9px;background:var(--ink);color:var(--mint300);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.install-copy{flex:1;min-width:220px;font-size:12.5px;color:var(--ink-soft);line-height:1.45;}
.install-copy > b{display:block;color:var(--ink);font-size:13.5px;}
.install-copy span b{color:var(--ink);}
.install-strip .install-btns{display:flex;align-items:center;gap:14px;}
.install-strip .btn{padding:8px 14px;font-size:12.5px;}