/* Tool 06 on /tools/: compressor efficiency. Builds on tools.css and field-calcs.css. */
.ce-card { margin-top: 28px; }
@supports (grid-template-rows: subgrid) { .ce-card { display: flex; grid-row: auto; } }
.ce-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-fields .field[hidden] { display: none; }
.ce-opt { font-size: 14px; font-weight: 300; color: var(--grey-500); margin-left: 6px; }
.ce-note { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--ink-2); max-width: 80ch; margin: 0; }
.ce-msg { font-family: var(--font-mono); font-size: 13px; color: #b3541e; margin: 0; }
.ce-msg--ok { color: var(--navy-600); }
.ce-msg:empty { display: none; }
.ce-warnline { font-size: 15px; color: #b3541e; margin: 0; }
.ce-baseline { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0; }
.ce-baseline strong { font-weight: 500; color: var(--navy-700); }
#ceBaseInfo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#ceBaseInfo:empty { display: none; }
.ce-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ce-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ce-btn-sm { font-family: inherit; font-size: 14px; padding: 10px 18px; cursor: pointer; border-radius: 0; }
button.btn--primary.ce-btn-sm { border: 0; }
.ce-btn-sm[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ce-file { display: inline-flex; align-self: flex-start; position: relative; cursor: pointer; }
.ce-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ce-file:focus-within .btn { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.ce-save { display: flex; flex-direction: column; gap: 14px; border-top: 0.5px solid rgba(0, 69, 112, 0.4); padding-top: 18px; }

/* tables */
.ce-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ce-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-500); font-weight: 500; text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(0, 69, 112, 0.45); white-space: nowrap; }
.ce-table th .ce-thu { text-transform: none; letter-spacing: 0; color: var(--blue-500); }
.ce-table td { padding: 8px 12px 8px 0; border-bottom: 0.5px solid rgba(0, 69, 112, 0.3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--navy-700); white-space: nowrap; }
.ce-table td:first-child, .ce-table td:nth-child(2) { color: var(--ink-2); }
.ce-table--in td { padding: 4px 6px 4px 0; }
.ce-in { width: 96px; height: 40px; border: 1px solid rgba(0, 69, 112, 0.45); background: var(--paper); padding: 0 8px; font: 500 15px var(--font-mono); color: var(--ink); -moz-appearance: textfield; }
.ce-in::-webkit-outer-spin-button, .ce-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ce-in--label { width: 124px; font-family: var(--font-sans); }
.ce-in:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(0, 149, 198, 0.2); }
.ce-x { width: 34px; height: 34px; border: 1px solid rgba(0, 69, 112, 0.35); background: var(--white); color: var(--navy-600); font-size: 18px; cursor: pointer; }
.ce-x:hover { background: var(--navy-600); color: var(--white); }
.ce-table td.ce-ok { color: #1f7a4d; }
.ce-table td.ce-watch { color: #b3741e; }
.ce-table td.ce-dirty { color: #b3341e; font-weight: 600; }
.ce-guide { display: flex; flex-direction: column; gap: 12px; border-top: 0.5px solid rgba(0, 69, 112, 0.4); padding-top: 16px; }
.ce-guide[hidden] { display: none; }
.ce-guide__lead { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 90ch; }
.ce-guide__lead strong { font-weight: 500; color: var(--navy-700); }
.ce-table th.ce-th-hi { color: var(--blue-500); }
.ce-table td.ce-td-hi { color: var(--navy-700); font-weight: 600; background: rgba(0, 149, 198, 0.08); padding-left: 8px; }

/* ---------- blueprint panel: the compressor drawn in light ink on navy, live values ---------- */
.ce-bp { margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(250px, 1fr); color: #e6edf5;
  background-color: var(--navy-900);
  background-image: linear-gradient(rgba(107, 173, 223, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 173, 223, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(107, 173, 223, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 173, 223, 0.035) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; border: 1px solid rgba(166, 200, 224, 0.25); position: relative; }
.ce-bp::before, .ce-bp::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--blue-300); border-style: solid; opacity: .7; pointer-events: none; }
.ce-bp::before { left: 8px; top: 8px; border-width: 1.5px 0 0 1.5px; }
.ce-bp::after { right: 8px; bottom: 8px; border-width: 0 1.5px 1.5px 0; }
.ce-bp__draw { padding: clamp(10px, 2vw, 24px); min-width: 0; }
.ce-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ce-bp__res { padding: clamp(20px, 2.4vw, 32px); border-left: 1px solid rgba(166, 200, 224, 0.2); display: flex; flex-direction: column; gap: 6px; background: rgba(4, 16, 31, 0.35); }
.ce-bp__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-300); }
.ce-bp__show { font: 500 12px var(--font-mono); color: #e6edf5; background: rgba(4, 16, 31, 0.6); border: 1px solid rgba(166, 200, 224, 0.35); padding: 4px 6px; }
.ce-bp__label { margin-top: 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-200); }
.ce-bp__big { font-family: var(--font-mono); font-size: clamp(52px, 5.4vw, 72px); font-weight: 500; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ce-bp__big small { font-size: 0.4em; color: var(--blue-300); margin-left: 6px; letter-spacing: 0; }
.ce-bp__delta { margin-top: 8px; font-size: 14px; color: var(--blue-200); display: inline-flex; align-self: flex-start; padding: 5px 10px; border: 1px solid rgba(166, 200, 224, 0.3); }
.ce-bp__delta.is-ok { color: #7fe0ae; border-color: rgba(127, 224, 174, 0.5); }
.ce-bp__delta.is-watch { color: #f3c06b; border-color: rgba(243, 192, 107, 0.6); }
.ce-bp__delta.is-dirty { color: #ff9a7a; border-color: rgba(255, 154, 122, 0.7); background: rgba(255, 120, 90, 0.08); }
.ce-bp__health { font-size: 13px; font-weight: 300; color: var(--blue-200); min-height: 1em; }
.ce-bp__kv { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; border-top: 1px solid rgba(166, 200, 224, 0.2); padding-top: 14px; }
.ce-bp__kv dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-200); align-self: center; }
.ce-bp__kv dd { margin: 0; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.ce-bp__secs:empty { display: none; }
.ce-bp__secs { margin-top: 10px; border-top: 1px solid rgba(166, 200, 224, 0.2); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ce-bp__sec { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; font-size: 15px; color: var(--blue-200); }
.ce-bp__secv { color: #fff; }
.ce-bp__secd.is-ok { color: #7fe0ae; } .ce-bp__secd.is-watch { color: #f3c06b; } .ce-bp__secd.is-dirty { color: #ff9a7a; }
.ce-bp__legend { display: none; }

/* drawing */
.bp-cl { stroke: rgba(166, 200, 224, 0.5); stroke-width: 1; stroke-dasharray: 18 5 3 5; fill: none; }
.bp-case { fill: rgba(107, 173, 223, 0.12); stroke: var(--blue-200); stroke-width: 1.4; }
.bp-hub { fill: rgba(107, 173, 223, 0.06); stroke: rgba(166, 200, 224, 0.6); stroke-width: 1.1; }
.bp-bell { fill: none; stroke: var(--blue-200); stroke-width: 1.4; }
.bp-comb { fill: rgba(255, 255, 255, 0.03); stroke: #e6edf5; stroke-width: 1.2; stroke-dasharray: 5 4; }
.bp-tstub { stroke: rgba(166, 200, 224, 0.55); stroke-width: 3; fill: none; }
.bp-blade { stroke: #e6edf5; stroke-linecap: round; fill: none; transition: stroke .4s ease; }
.bp-blade.st { stroke: var(--blue-300); }
.bp-sec-g.is-watch .bp-blade.r { stroke: #f3c06b; }
.bp-sec-g.is-dirty .bp-blade.r { stroke: #ff9a7a; }
.bp-sec-g.is-ok .bp-blade.r { stroke: #e6f8ee; }
.bp-flow path { fill: none; stroke: var(--blue-500); stroke-width: 1.4; stroke-dasharray: 4 14; opacity: .75; }
.bp-sec { font: 500 12px var(--font-mono); letter-spacing: 0.18em; fill: var(--blue-300); }
.bp-dtag { font: 500 13px var(--font-mono); fill: var(--blue-200); }
.bp-dtag.is-ok { fill: #7fe0ae; } .bp-dtag.is-watch { fill: #f3c06b; } .bp-dtag.is-dirty { fill: #ff9a7a; }
.bp-stn { stroke: var(--blue-300); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.bp-lead { stroke: rgba(166, 200, 224, 0.6); stroke-width: 1; fill: none; }
.bp-ring { fill: var(--navy-900); stroke: var(--blue-300); stroke-width: 1.4; }
.bp-ringtx { font: 500 12px var(--font-mono); fill: var(--blue-300); }
.bp-box { fill: rgba(4, 16, 31, 0.88); stroke: rgba(166, 200, 224, 0.5); stroke-width: 1; }
.bp-row, .bp-spd { font-family: var(--font-mono); }
.bp-k { font-size: 13px; fill: var(--blue-200); letter-spacing: 0.08em; }
.bp-v { font-size: 16px; font-weight: 500; fill: #fff; }
.bp-flash { animation: bpFlash .6s ease; }
@keyframes bpFlash { 0% { fill: var(--blue-300); color: var(--blue-300); } 100% { } }

/* drawing animation: lines draw in, blades appear front to back, then values and the airflow */
.ce-bp .bp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.ce-bp .bp-blade, .ce-bp .bp-co, .ce-bp .bp-flow, .ce-bp .bp-sec, .ce-bp .bp-dtag { opacity: 0; }
.ce-bp.is-drawn .bp-draw { animation: bpDraw 1.3s ease forwards; }
.ce-bp.is-drawn .bp-blade { animation: bpIn .35s ease forwards; animation-delay: calc(0.5s + var(--i) * 12ms); }
.ce-bp.is-drawn .bp-sec, .ce-bp.is-drawn .bp-dtag { animation: bpIn .5s ease 1.2s forwards; }
.ce-bp.is-drawn .bp-co { animation: bpIn .5s ease forwards; animation-delay: calc(1.3s + var(--j, 3) * 0.15s); }
.ce-bp.is-drawn .bp-flow { animation: bpIn .8s ease 1.6s forwards; }
.ce-bp.is-drawn .bp-flow path { animation: bpFlow 0.9s linear infinite; }
@keyframes bpDraw { 70% { stroke-dashoffset: 0; fill-opacity: 0; } 99% { stroke-dasharray: 1; } 100% { stroke-dashoffset: 0; stroke-dasharray: none; fill-opacity: 1; } }
@keyframes bpIn { to { opacity: 1; } }
@keyframes bpFlow { to { stroke-dashoffset: -18; } }
.ce-bp .bp-comb.bp-draw { stroke-dasharray: 1; }
.ce-bp.is-drawn .bp-comb.bp-draw { animation: bpDrawDash 1.3s ease forwards; }
@keyframes bpDrawDash { 70% { stroke-dashoffset: 0; fill-opacity: 0; } 99% { stroke-dasharray: 1; } 100% { stroke-dashoffset: 0; stroke-dasharray: 5 4; fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ce-bp .bp-draw, .ce-bp.is-drawn .bp-draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .ce-bp .bp-comb.bp-draw { stroke-dasharray: 5 4; }
  .ce-bp .bp-blade, .ce-bp .bp-co, .ce-bp .bp-flow, .ce-bp .bp-sec, .ce-bp .bp-dtag { opacity: 1; animation: none !important; }
  .ce-bp .bp-flow path { animation: none !important; }
  .bp-flash { animation: none; }
}

@media (max-width: 1100px) {
  .ce-bp { grid-template-columns: 1fr; }
  .ce-bp__res { border-left: 0; border-top: 1px solid rgba(166, 200, 224, 0.2); }
}
@media (max-width: 900px) { .ce-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* the callout boxes are too small to read on a phone: the values move to a legend under the drawing */
  .ce-bp .bp-co, .ce-bp .bp-dtag { display: none; }
  .ce-bp__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
  .ce-bp__legend span { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(166, 200, 224, 0.15); padding-bottom: 4px; }
  .ce-bp__legend b { font-weight: 500; color: var(--blue-200); }
  .ce-bp__legend i { font-style: normal; color: #fff; }
}
@media (max-width: 520px) { .ce-fields { grid-template-columns: 1fr; } }

/* save as baseline or check; history of loaded files */
.ce-fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ce-fields--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ce-fields--4 { grid-template-columns: 1fr; } }
.ce-link { font: 500 13px var(--font-sans); color: var(--blue-500); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ce-link:hover { color: var(--navy-700); }
.ce-table tr.ce-row-base td { background: rgba(0, 69, 112, 0.05); }
.ce-table tr.ce-row-old td { opacity: .55; }
.ce-table tr.ce-row-now td { font-style: italic; }
.ce-hist { width: 100%; max-width: 900px; height: auto; display: block; }
.ce-z.z-ok { fill: rgba(31, 122, 77, 0.07); } .ce-z.z-watch { fill: rgba(224, 150, 40, 0.13); } .ce-z.z-dirty { fill: rgba(179, 52, 30, 0.09); }
.ce-hg { stroke: rgba(0, 69, 112, 0.12); } .ce-h0 { stroke: var(--navy-600); stroke-dasharray: 4 3; }
.ce-ht { font: 12px var(--font-mono); fill: var(--grey-500); }
.ce-hl { fill: none; stroke: var(--navy-600); stroke-width: 1.6; }
.ce-hp { stroke: var(--white); stroke-width: 2; fill: var(--navy-600); }
.ce-hp.is-ok { fill: #1f7a4d; } .ce-hp.is-watch { fill: #d08a26; } .ce-hp.is-dirty { fill: #b3341e; }
.ce-hp.is-now { fill: var(--white); stroke: var(--blue-500); stroke-width: 2.5; }