/* Poppins is served with the tool rather than fetched from a font CDN, so the
   type is identical whether or not the embedding page can reach one. */
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Regular.ttf') format('truetype');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --navy:#0A1543;--green:#2f9e6f;--grey:#aab2c2;--line:#e6e9f0;--soft:#f6f7fa;
  --ets:#c00000;--bg:#fff;
  --ink:#15151a;--ink-soft:#3d3d47;--ink-muted:#6b6b75;
  --sel-row:#f0f1f3;--paper-warm:#f4f5f8;
  /* Row rules and block borders: fine faint. */
  --rule2:rgba(10,21,67,.12);
  --rule2-soft:rgba(10,21,67,.06);
  /* Structural seams: the header rule. Deliberately a separate token, because
     a row rule should be almost invisible and this one has to carry. */
  --rule-band:rgba(10,21,67,.38);
  /* The air above every subsection body, so a subsection is not lopsided:
     content sits as far below its own label as the section above sits above
     the next one.  20 (body pad) + 30 (acc margin) + 7 (next head) = 57
     against 7 (this head) + 50 (this token) = 57. */
  --sub-top:50px;
  --ship-row:31px;
  --ship-rows:calc(18 * var(--ship-row) + 34px)
}
*{box-sizing:border-box}
body{font-family:'Poppins',sans-serif;color:var(--navy);background:var(--bg);margin:0;font-size:14px;line-height:1.55}
h3{font-weight:600;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
a{color:var(--green);text-decoration:none}
.hidden{display:none!important}.muted{color:var(--grey)}
table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:6px 9px;border-bottom:1px solid var(--rule2-soft)}
th:first-child,td:first-child{text-align:left}
/* Header cells are muted and closed by a fine rule; the 1.5px navy bar read
   as a frame the language does not use. No vertical rules anywhere. */
thead th{font-weight:600;font-size:12.5px;color:var(--ink-muted);padding-bottom:8px;border-bottom:1px solid var(--rule2)}
tr.tot td{font-weight:600;border-top:1px solid var(--navy)}
input[type=text],input[type=number],select{width:100%;font-family:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.xscroll{overflow-x:auto}
input:focus,select:focus{outline:1px solid var(--navy);border-color:var(--navy)}
.btn{background:var(--navy);color:#fff;border:0;padding:12px 22px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}
.btn:hover{background:#16224f}.btn[disabled]{background:var(--soft);color:var(--grey);cursor:not-allowed}
.btn2{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn2:hover{background:var(--soft)}
.btn2[disabled]{background:var(--soft);color:var(--grey);border:1px solid var(--line);cursor:not-allowed}
.engband{width:100%;border:1px solid #dfe3ea;border-radius:0;background:#fff;padding:4px 10px;height:30px;margin:5px 0 10px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--navy)}
.engband:focus{outline:0;border-color:var(--navy)}
#landing{padding-top:0}
.land-top{display:grid;gap:20px;align-items:center;margin:19px 0 0}
.shipart{height:150px;display:flex;align-items:center;justify-content:center}.shipart svg{width:100%;height:100%}
input[type=checkbox].ck{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid #c8ccd4;background:#fff;border-radius:0;cursor:pointer;position:relative;margin:0}
input[type=checkbox].ck:checked{background:var(--navy);border-color:var(--navy)}
input[type=checkbox].ck:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Every field is the same control, wherever it sits: a square bordered box,
   right-aligned. Half of them were borderless with a dotted underline, which
   read as struck through and gave nothing to click. */
td input[type=number],td input[type=text],td select{border:1px solid #c8ccd4;border-radius:0;padding:5px 7px;font-size:12px;text-align:right}
td select{text-align:left}
td input:focus,td select:focus{outline:1px solid var(--navy);border-color:var(--navy)}

/* The indexation slider sits in its cell with the percentage beside it. */
td.pidx{min-width:150px}
td.pidx .rng{display:inline-flex;align-items:center;gap:8px;width:100%}
td.pidx input[type=range]{width:100%;accent-color:var(--navy)}
td.pidx .rng-val{min-width:38px;text-align:right}

/* The photo box, from the sandbox: a 16/9 frame on the warm paper, the image
   contained inside it, and the tag as white letters straight on the picture
   with no plate behind them. A fixed-height strip cropped or floated it. */
.vphoto-wrap{position:relative;aspect-ratio:16/9;background:var(--paper-warm);display:flex;align-items:center;justify-content:center;overflow:hidden}

/* The opening view: the vessel takes three quarters, its profile the last
   quarter, matching the sandbox's .grid2.viz. An even split left the photo
   small and the column beside it half empty. */
#panel0 > .vband > .grid2{grid-template-columns:minmax(0,1fr) 360px}
/* The photo fills its cell, edge to edge, with the tag over it. Contained on
   a grey field it sat letterboxed in the middle. */
#panel0 > .vband .sig{position:relative;min-height:300px}
#panel0 > .vband .sig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#panel0 > .vband .sig::before{content:"REFERENCE SHIP";position:absolute;left:14px;top:12px;z-index:2;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.12em}

/* Ship properties runs as two columns of rows, as in the Decarbonizer: the
   ship's own particulars on the left, its machinery on the right. A single
   column left the section a very long ladder. */
.props{gap:32px}
.props>*{min-width:0}
/* With no visual to sit beside, the section fills the width and the two
   columns of rows are the grid. */

/* The bar at the foot of a section: bordered, full width, split in two when
   the section offers an action. The section then ends on a definite edge
   instead of trailing off into the next one. */
.sec-foot{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);margin-top:26px}
/* Two cells when the section offers an action, one when it does not. Asked
   of the bar itself rather than set by a modifier class, which had to live
   inside a template expression and read as an orphan rule. */
.sec-foot:has(.sec-act){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sec-foot:has(.sec-act)>*:first-child{border-right:1px solid var(--rule2)}
.sec-act,.sec-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:38px;padding:8px 14px;background:#fff;border:0;font-family:inherit;font-size:12.5px;font-weight:500;font-style:normal;color:var(--navy);cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.sec-foot:hover{border-color:var(--navy)}
.sec-act:hover,.sec-more:hover{background:#fafbfc}
.sec-more .anchor{display:inline-flex;align-items:center;line-height:0}
.sec-more .anchor::after{content:"";display:inline-block;position:relative;width:13px;height:13px;margin-left:9px;vertical-align:-2px;background:currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='4.4'%20r='2.4'/><path%20d='M12%206.8V21.5'/><path%20d='M7.2%2010.2h9.6'/><path%20d='M3.6%2014.6a8.4%208.4%200%200%200%2016.8%200'/><path%20d='M3.6%2014.6h3'/><path%20d='M20.4%2014.6h-3'/></svg>") center / 13px 13px no-repeat;
  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='4.4'%20r='2.4'/><path%20d='M12%206.8V21.5'/><path%20d='M7.2%2010.2h9.6'/><path%20d='M3.6%2014.6a8.4%208.4%200%200%200%2016.8%200'/><path%20d='M3.6%2014.6h3'/><path%20d='M20.4%2014.6h-3'/></svg>") center / 13px 13px no-repeat;
  transition:transform .28s cubic-bezier(.34,1.4,.5,1),opacity .2s ease}
.sec-more.is-open .anchor::after{transform:rotate(180deg)}
.sec-foot+.note{border-top:0;margin-top:14px;padding-top:0}

/* ===== fold controls =====
   A rule with a control sitting on it. The rule is deliberately quiet, it
   marks a seam rather than framing anything, and the control is a small
   circle centred on it. Glyph only, no label. */
.foldrule{position:relative;height:0;border-top:1px solid var(--rule-band);margin:31px 0}
.foldbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;padding:0;border:1px solid var(--rule-band);border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .14s}
.foldbtn:hover{border-color:var(--navy)}
.foldbtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* The glyph is drawn, not typed, so the two strokes are identical and the
   minus is the plus with its upright removed. */
.foldglyph{position:relative;display:block;width:9px;height:9px}
.foldglyph::before,.foldglyph::after{content:'';position:absolute;background:var(--navy)}
.foldglyph::before{left:0;right:0;top:4px;height:1px}
.foldglyph::after{top:0;bottom:0;left:4px;width:1px}
.foldbtn.is-minus .foldglyph::after{display:none}

/* Sliding closed rather than disappearing, so the eye can follow what moved.
   Height is animated rather than display toggled: the blocks keep their
   columns while opening, so nothing jumps sideways. */
.blk8{overflow:hidden;max-height:640px;opacity:1;transition:max-height .28s ease,opacity .2s ease,padding-bottom .28s ease}
.blk8.fold-0{max-height:0;opacity:0}
.tabpanel>.acc{overflow:hidden;max-height:4000px;transition:max-height .28s ease,opacity .2s ease,margin .28s ease}
.tabpanel.subs-folded>.acc{max-height:0;opacity:0;margin-top:0;margin-bottom:0}
@media(prefers-reduced-motion:reduce){.blk8,.tabpanel>.acc{transition:none}}

/* ===== header =====
   White, brand left, closed by a hairline in the seam tone. The rule is drawn
   by ::after inset to the content column, not as a border on the header: a
   border spans the whole box and sits proud of the column at each end. */
.dz-header{position:relative;background:#fff;padding:19px 0;margin-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.dz-header::after{content:'';position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--rule-band)}
.dz-brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dz-right{display:flex;align-items:center;gap:10px}
.dz-btn2{background:transparent;color:var(--navy);border:1px solid var(--rule2);padding:8px 14px;border-radius:0;font-family:inherit;font-size:.82rem;font-weight:500;cursor:pointer}
.dz-btn2:hover{border-color:var(--navy);background:rgba(10,21,67,.04)}
.dz-save{background:var(--navy);color:#fff;border:0;padding:9px 16px;border-radius:0;font-family:'Poppins',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;white-space:nowrap}
.dz-save:hover{background:#16224f}
/* The menu hangs off the button, right-aligned so it cannot run off the page
   edge, and above everything below it. */
.dz-dd{position:relative}
.dz-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--rule2);border-radius:0;box-shadow:0 8px 24px rgba(10,21,67,.12);min-width:200px;z-index:20;overflow:hidden}
.dz-menu a{display:block;padding:10px 14px;font-size:.85rem;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--rule2-soft);white-space:nowrap}
.dz-menu a:last-child{border-bottom:0}
.dz-menu a:hover{background:var(--paper-warm);color:var(--navy)}
.dz-mark{font-weight:600;font-size:1.05rem;color:var(--navy);letter-spacing:.2px}
.dz-product{font-size:.82rem;color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase}
.dz-product strong{font-weight:600;color:var(--navy)}

/* Four equal columns: the drawing takes 1-2, the category and search take 3,
   the buttons take 4. The two stacks are a quarter each and line up with the
   table beneath. */
.land-top{grid-template-columns:repeat(4,minmax(0,1fr))}
.land-top .shipart{grid-column:1 / span 2}
.land-pick,.land-act{display:flex;flex-direction:column;justify-content:center;gap:14px}
/* The buttons sit on the same rows as the select and the search, so they take
   the inputs' padding rather than the .btn default of 12px 22px. */
.land-act .btn{padding:7px 8px;line-height:1.55}
.land-seam{border-top:1px solid var(--line);margin:26px 0 18px}

/* Eighteen rows, then it scrolls. The header stays put so the columns can
   still be read at the bottom of the list. */
.shipscroll{position:relative;max-height:var(--ship-rows);overflow:auto}
.shiptable{width:100%}
.shiptable thead th{position:sticky;top:0;z-index:3;background:#fff;color:#000;text-align:center;border-bottom:1px solid var(--line)}
.shiptable th,.shiptable td{font-size:11.5px;padding:5px 10px;height:var(--ship-row);box-sizing:border-box;white-space:nowrap;color:#000}
.shiptable td{text-align:left}
.shiptable td.num{text-align:center}
.shiptable td.l-name{font-weight:500}
/* The radio column stays in view when the table is scrolled sideways: the
   mark is what the row is for. */
.shiptable th.l-ck,.shiptable td.l-ck{position:sticky;left:0;z-index:2;width:30px;background:#fff}
.shiptable thead th.l-ck{z-index:4}
.shiptable tbody tr.sel td.l-ck{background:var(--sel-row)}
.shiptable th.w-s,.shiptable td.w-s{max-width:96px}
.shiptable th.w-m,.shiptable td.w-m{max-width:132px}
.shiptable th.w-l,.shiptable td.w-l{max-width:190px;overflow:hidden;text-overflow:ellipsis}
.shiptable tbody tr{cursor:pointer}
.shiptable tbody tr:hover{background:var(--soft)}
.shiptable tbody tr.sel{background:var(--sel-row)}

/* The rule that closes the list, and the note under it. */
.land-foot-rule{border-top:1px solid var(--line);margin:34px 0 0}
#tool{padding-top:0}
/* The answer, above the tabs: label over value, one block each, closed by a
   seam so the group reads as a band rather than trailing into the tabs. */
.blk8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:19px 0 0;padding-bottom:0;border-bottom:0}
.blk{border:1px solid var(--rule2);background:#fff;padding:12px 13px 11px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between}
.blk-lab{font-size:10.5px;color:var(--ink-muted);font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:6px}
.blk-lab-t{display:block;white-space:nowrap}
.blk-val{font-size:20px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
/* White with a fine border, navy when active. The filled navy blocks with a
   numbered circle above each were the loudest thing on the page; the
   Decarbonizer's tabs are plain labels that darken when chosen. */
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:19px 0 26px}
.tab{background:#fff;border:1px solid var(--rule2);color:#000;text-align:center;padding:14px 8px;font-size:.88rem;font-weight:500;cursor:pointer}
.tab:hover{border-color:var(--navy)}
.tab.active{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
.intro{margin-bottom:26px}
/* De-boxed: a section is a bare label with its toggle pills, and its content
   flows on the page. No frame, no panel fill, no rule under the head bar.
   Spacing does the separating. */
.acc{border:0;margin-bottom:30px}
/* A CLOSED section is one line of a list, so consecutive closed ones press
   together; the 30px above stays for open ones. */
.acc.closed{margin-bottom:8px}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:7px 0;cursor:pointer}
.acc-head h3{font-weight:500;font-size:1.05rem;color:var(--navy)}
.acc-toggle{display:flex;gap:6px}
/* One of the deliberate exceptions to the square-corner rule. */
.acc-toggle button{width:42px;height:26px;border:1px solid var(--rule2);background:#fff;cursor:pointer;color:var(--ink-muted);font-size:10px;font-family:inherit;border-radius:999px;padding:0}
.acc-toggle button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.acc-body{border-top:0;padding:var(--sub-top) 0 20px}.acc.closed .acc-body{display:none}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
@media(max-width:880px){.grid2,.land-top{grid-template-columns:1fr}.tabs{grid-template-columns:1fr 1fr}.blk8{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A row is a grid, not a flex pair pushed to opposite edges: the label column
   and the field column are the same width in every row, so labels and fields
   line up down the page however wide the column they sit in. No rule between
   rows: the uniform height and the shared label column carry the alignment,
   and the lines only add noise. */
/* Label, field, marker: the sandbox's three columns. The 16px marker column
   is there whether or not a row has a tooltip, so fields line up down the
   page either way. */
.kv{display:grid;grid-template-columns:minmax(0,1fr) 150px 16px;align-items:center;gap:10px;min-height:34px;padding:6px 0;font-size:12.5px}

/* The unit is drawn INSIDE the field, absolutely placed at its right edge,
   and steps aside on focus. Beside the field it widened the row and wrapped. */
.inp-unit{position:relative;display:inline-block;width:100%}
.inp-unit input{width:100%;padding-right:62px!important;box-sizing:border-box}
.kv .inp-unit input{padding-right:62px!important}
.inp-unit .u{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:500;font-style:normal;color:var(--ink-muted);pointer-events:none}
.inp-unit input:focus+.u{opacity:0}

/* The tooltip marker: round, one of the deliberate exceptions to the
   square-corner rule. */
.ii{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--rule2);background:transparent;font-family:Georgia,serif;font-style:italic;font-size:10px;color:var(--ink-muted);cursor:help;line-height:1}
.kv .k{font-size:12px;color:var(--ink-soft)}.kv .v{font-weight:500;text-align:right}
.kv input[type=number],.kv input[type=text]{width:100%;text-align:right;border:1px solid #c8ccd4;border-radius:0;padding:6px 8px;font-size:12.5px}
.kv select{width:100%;text-align:right;border:1px solid #c8ccd4;border-radius:0;padding:6px 8px;font-size:12.5px}
.kv input:focus,.kv select:focus{outline:1px solid var(--navy);border-color:var(--navy)}
.chartbox{position:relative;height:260px}.chartbox.sm{height:210px}
p,.note{font-style:italic;text-align:justify}
.note{font-size:11px;color:var(--ink-muted);margin-top:14px;border-top:1px solid var(--line);padding-top:9px;white-space:pre-line}
.band{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.pie-wrap{display:flex;flex-direction:column;align-items:center}.daylist{width:100%;margin-top:6px}
.placeholder{background:var(--soft);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:12px;min-height:200px;text-align:center;padding:20px}
.slider-row{display:grid;grid-template-columns:90px 95px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:12px;font-size:12.5px}
.slider-row label{color:#41506f}.slider-row input[type=range]{width:100%;accent-color:var(--navy)}.slider-row input[type=number]{text-align:right}
.subtxt{font-size:12.5px;color:#41506f;white-space:pre-line}
hr{border:0;border-top:1px solid var(--line)}
/* A selector that belongs to the chart below it sits at the left, above it,
   not pushed to the right edge of the column. */
.selrow{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:14px;font-size:12.5px}.selrow select{width:auto;min-width:170px}
/* A selector that belongs to the chart below it sits at the LEFT, above it,
   and takes the column width. Declared after .selrow, or the shared rule wins
   at equal specificity and pushes it back to the right edge. */
/* Customize sits above the engine field it governs, right-aligned over it. */
.selrow-top{justify-content:flex-end;gap:12px;margin-bottom:6px}
.selrow-top select{min-width:170px}
.selrow-l{justify-content:flex-start;margin-bottom:10px}
.selrow-l select{width:100%;min-width:0}
.ck{width:16px;height:16px;accent-color:var(--navy)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;margin-top:10px;color:#41506f;justify-content:center}
.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{width:11px;height:11px;display:inline-block;border-radius:2px}
/* Ship & Voyage band layout (deck structure: visual left, inputs right, About italic, dividers) */
.vband{margin:0}
.vband .grid2{align-items:start;gap:32px}
.vband .sig,.vband .core{min-width:0}
.vband .core .band{margin-top:2px}
/* Sections separate themselves now; a rule between them was a second
   separator doing the same job and left a wide empty band. */
.divider{display:none}

.vphoto{width:100%;height:100%;object-fit:contain;display:block}
/* Emission savings and the fuel table used to be two sections, so the gap
   between them was the gap between sections. Joined into one, they ran
   together. The block takes the same air a subsection opens with, so the two
   halves still read as two things inside one section. */
.fuelblock{margin-top:var(--sub-top)}

/* The row above the fuel table: a label and its control, three pairs across
   one line, wrapping to fewer pairs rather than squeezing them. The labels
   read as labels, not as headings, so they take the row weight. */
.fuelbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:14px;font-size:12.5px}
.fuelbar .fp-l{color:#41506f}
.fuelbar .fp-f{flex:1 1 150px;min-width:130px;max-width:230px}
.fuelbar select,.fuelbar input[type=number]{width:100%;border:1px solid #c8ccd4;border-radius:0;padding:6px 8px;font-size:12.5px}
/* The figure reads from the left here, not the right as it does in a table
   row: the unit sits inside the field, and a long one (gCO2eq / MJ) met a
   right-aligned number in the middle of the box. */
.fuelbar input[type=number]{text-align:left}
.fuelbar .inp-unit input{padding-right:96px!important}
.fuelbar .fp-f[data-wide="1"]{flex-basis:250px;max-width:300px}
/* The fuel table carries one column per property the selected regulation
   reads, so the column count changes with it; the cells size themselves
   rather than to a fixed width that only suited the widest set. The fields
   were carrying an inline borderless dotted style, which sat on top of the
   house rule above and was the one place the tool still drew a field that
   way. They are ordinary bordered boxes now, only narrower. */
.fueltab{font-size:11.5px;min-width:640px}
.fueltab input[type=number]{width:100%;min-width:52px;padding:4px 6px;font-size:11px}
/* Technical drawings (Technical Specs): the drawing takes the column's width
   and keeps its own height, so nothing is cropped from a line drawing. */
.tfig img{width:100%;height:auto;display:block}