/* Well fluid on Analyze — the card and its panel. Every colour is a theme token. */

/* The card reads as a control: a hover lift, a visible "Change", the fluid named. */
.hw-kr.fz-card{cursor:pointer;position:relative}
/* Its own layout inside the cockpit strip: glyph | label / value / name. */
html body .hw-cockpit .cpk-cards .hw-kr.fz-card{display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;
  grid-template-areas:"g l" "g v" "g s";grid-template-rows:auto auto auto!important;column-gap:7px!important;row-gap:1px!important;align-content:center}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card>.hw-kr-glyph{grid-area:g;align-self:center}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card>i{grid-area:l;padding-right:18px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card>.fz-mw{grid-area:v}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card>.fz-sub{grid-area:s}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card>.hw-instr-x{position:absolute;top:4px;right:4px}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card .fz-change{display:none}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card:hover .fz-change,html body .hw-cockpit .cpk-cards .hw-kr.fz-card:focus-visible .fz-change{display:inline}
html body .hw-cockpit .cpk-cards .hw-kr.fz-card:hover .fz-name{display:none}
.hw-kr.fz-card:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.hw-kr.fz-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hw-kr.fz-card>i{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.hw-kr.fz-card .fz-mw{font-variant-numeric:tabular-nums}
.hw-kr.fz-card .fz-mw small{font-family:inherit;font-size:9px;color:var(--muted);margin-left:3px}
.hw-kr.fz-card .fz-sub{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:9.5px;line-height:1.2}
.hw-kr.fz-card .fz-name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.hw-kr.fz-card .fz-change{flex:none;font-weight:600;letter-spacing:.02em;color:var(--blue)}
.hw-kr.fz-card .fz-sub .fz-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.hw-kr.fz-card.try{border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
.fz-cls{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.06em;padding:1px 5px;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--ink) 18%,var(--line));color:var(--ink)}
.fz-cls.none{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.fz-tag{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.05em;padding:1px 6px;border-radius:999px}
.fz-tag.try{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent)}
.fz-tag.col{color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent)}

/* The panel is wider than the other instrument panels: it holds a comparison table. */
.hw-fly.fz-wide{width:430px;display:flex;flex-direction:column}
.hw-fly.fz-wide>.hw-fly-b{overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
.hw-fly.fz-wide.sheet{width:100%}
.fz-sec{border-top:1px solid var(--line);padding-top:12px}
.fz-sec:first-child{border-top:0;padding-top:0}
.fz-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fz-chips{display:flex;flex-wrap:wrap;gap:6px}
.fz-chip{display:grid;gap:1px;text-align:left;padding:7px 10px;border-radius:10px;min-width:0;max-width:100%;
  border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--card));color:var(--ink);cursor:pointer}
.fz-chip b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-chip span{font-size:10px;color:var(--muted)}
.fz-chip i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}
.fz-chip.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--card))}
.fz-chip:hover{border-color:color-mix(in srgb,var(--blue) 50%,var(--line))}
.fz-empty{font-size:11px;color:var(--muted)}
.fz-add,.fz-int select{min-height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:11px;padding:0 8px;max-width:100%}
.fz-link{border:0;background:none;color:var(--blue);font:inherit;font-size:11px;font-weight:600;padding:6px 2px;cursor:pointer}
.fz-link:hover{text-decoration:underline}
.fz-new{display:grid;gap:8px;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}
.fz-new label{display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.fz-new input,.fz-new select,.fz-slot input,.fz-int input{min-height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:12px;padding:0 8px;min-width:0}
.fz-new i,.fz-slot i,.fz-int i{font-style:normal;font-size:10px;color:var(--muted)}
.fz-mwin input{font-size:18px!important;font-variant-numeric:tabular-nums}
.fz-choice{display:grid;gap:6px;margin-top:4px}
.fz-choice .hw-ff-seg{text-align:left;justify-content:flex-start}
.fz-try{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-radius:9px;
  font-size:11px;background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line))}
.fz-warn{margin:4px 0 0;font-size:11px;color:var(--red)}
.fz-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fz-slot{display:flex;align-items:center;gap:4px}
.fz-slot input{width:100%}
.fz-tablewrap{overflow-x:auto;margin-top:4px}
.fz-table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
.fz-table th{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.fz-table td{padding:6px 5px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);white-space:nowrap;vertical-align:top}
.fz-table td small{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.fz-table tr.cur td{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.fz-ok{color:var(--green)}
.fz-bad{color:var(--red)}
.fz-na{color:var(--muted);font-style:italic}
.fz-int{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 28px;gap:6px;align-items:center}
.fz-int label{display:flex;align-items:center;gap:4px;min-width:0}
.fz-int input{width:100%}
.fz-x{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:14px}
.fz-x:hover{color:var(--red);border-color:var(--red)}
.fz-fill{margin:2px 0 0;font-size:11px;color:var(--muted)}
.fz-fill b{color:var(--ink)}
.fz-more>summary{cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.fz-more[open]>summary{margin-bottom:6px}

@media (max-width:640px){
  .fz-int{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px}
  .fz-int select{grid-column:1/-1}
  .fz-x{width:36px;height:36px}
  .fz-new label{grid-template-columns:1fr auto}
  .fz-new label>input,.fz-new label>select{grid-column:1/-1}
  .fz-add,.fz-int select,.fz-new input,.fz-new select,.fz-slot input,.fz-int input{min-height:40px}
}

/* One row of instruments on desktop: columns follow the cards actually shown. */
@media (min-width:1001px){
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-input-groups.fz-n2{grid-template-columns:minmax(0,2fr) minmax(0,2fr)!important}
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-input-groups.fz-n3{grid-template-columns:minmax(0,2fr) minmax(0,3fr)!important}
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-input-groups.fz-n4{grid-template-columns:minmax(0,2fr) minmax(0,4fr)!important}
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-igrp.circulation .cpk-cards.fz-n2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-igrp.circulation .cpk-cards.fz-n3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-igrp.circulation .cpk-cards.fz-n4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html body .hydro-app.charts-mode .hw-cpk .cpk-in-col .cpk-igrp.circulation .cpk-cards>.hw-kr{grid-column:auto!important}
}

.fz-switchrow{justify-content:space-between;font-size:12px;color:var(--ink)}
.fz-switch{position:relative;width:38px;height:22px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 10%,var(--card));cursor:pointer;flex:none;padding:0}
.fz-switch i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .15s ease}
.fz-switch.on{background:var(--blue);border-color:var(--blue)}
.fz-switch.on i{transform:translateX(16px);background:var(--card)}
.fz-switch:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* In the scrolling control sheet (tablet and phone) the fluid card takes a full row, like the pump cards. */
@media (max-width:1000px){
  html body .hw-cpk .cpk-igrp.circulation .cpk-cards>.hw-kr.fz-card{grid-column:1/-1!important;min-height:64px}
  html body .hw-cockpit .cpk-cards .hw-kr.fz-card .fz-change{display:inline}
  html body .hw-cockpit .cpk-cards .hw-kr.fz-card:hover .fz-name{display:inline}
  html body .hw-cockpit .cpk-cards .hw-kr.fz-card .fz-mw{font-size:20px}
}
/* Touch rules enlarge every button to 40 px; a switch keeps its track shape and gets its hit area from padding. */
html body #hwFly .fz-switch{width:44px!important;height:26px!important;min-width:44px!important;min-height:26px!important;padding:0!important;border-radius:999px!important;margin:9px 0}
html body #hwFly .fz-switch i{width:20px;height:20px;top:2px;left:2px}
html body #hwFly .fz-switch.on i{transform:translateX(18px)}

.fz-colnote{margin:0 0 8px;padding:7px 10px;border-radius:9px;font-size:11px;line-height:1.45;color:var(--ink);
  background:color-mix(in srgb,var(--blue) 9%,transparent);border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line))}
.fz-colnote b{font-weight:600;margin-right:4px}