/* TripChow Control Center UI, part 2 of 3: section layout, setting rows and widgets (switch, stepper, slider, segmented, select, date, text, secret), the Feature flags table. */
@media screen{
body.tcv2 .cc .secbar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:12px}
body.tcv2 .cc .fchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.tcv2 .cc .fchips .chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mut);cursor:pointer}
body.tcv2 .cc .fnote{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--mut)}
body.tcv2 .cc .legend{font-size:11.5px;font-weight:600;color:var(--mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body.tcv2 .cc .secgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
body.tcv2 .cc .secgrid.one{grid-template-columns:minmax(0,1fr)}
body.tcv2 .cc .secmain{display:flex;flex-direction:column;gap:14px;min-width:0}
body.tcv2 .cc .secside{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
body.tcv2 .cc .secside .note{margin:0}
body.tcv2 .cc .grp>h5.plain{background:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:11px 18px}
body.tcv2 .cc .grp>h5.plain .r{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none}
body.tcv2 .cc .mcs{display:flex;flex-direction:column}
body.tcv2 .cc .mc{display:flex;align-items:center;gap:12px;padding:11px 16px;color:var(--ink);border-top:1px solid #F1F5F9}
body.tcv2 .cc .mc:first-child{border-top:0}
body.tcv2 .cc .mc:hover{background:#F9FAFB;text-decoration:none}
body.tcv2 .cc .mt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
body.tcv2 .cc .mt b{font-size:13px;font-weight:800}
body.tcv2 .cc .mt small{font-size:11.5px;font-weight:600;color:var(--mut)}
body.tcv2 .cc .mt small.mm{color:var(--adm);font-weight:800}
body.tcv2 .cc .chev{width:15px;height:15px;color:var(--mut2)}
body.tcv2 .cc .notes p{font-size:12px;font-weight:700;line-height:1.5}
body.tcv2 .cc .notes p+p{margin-top:8px}
body.tcv2 .cc .herow{margin-bottom:0}
body.tcv2 .cc .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,auto);gap:10px 22px;align-items:start;padding:14px 18px;border-top:1px solid #F1F5F9;background:#fff;position:relative}
body.tcv2 .cc .grp>.row:first-of-type{border-top:0}
body.tcv2 .cc .row.dirty{background:#FFFBEB;box-shadow:inset 3px 0 0 var(--amber)}
body.tcv2 .cc .row.bad{box-shadow:inset 3px 0 0 var(--red)}
body.tcv2 .cc .row.hl{animation:none;box-shadow:inset 0 0 0 3px var(--focus);background:#EFF6FF}
body.tcv2 .cc .row.lk .rlab label{color:#4B5563}
body.tcv2 .cc .row.hero{border:2px solid var(--adm);border-radius:16px;background:#F0FAF5;padding:16px 18px;grid-template-columns:44px minmax(0,1fr) auto}
body.tcv2 .cc .row.hero.kl{border-color:var(--adm)}
body.tcv2 .cc .hic{width:44px;height:44px;border-radius:12px;background:var(--adm);color:#fff;display:flex;align-items:center;justify-content:center}
body.tcv2 .cc .hic .ic{width:22px;height:22px}
body.tcv2 .cc .rmain{min-width:0}
body.tcv2 .cc .rlab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.tcv2 .cc .rlab label{font-size:14px;font-weight:800;color:var(--ink);cursor:pointer}
body.tcv2 .cc .lkic{display:inline-flex;color:var(--mut2)}
body.tcv2 .cc .lkic .ic{width:13px;height:13px}
body.tcv2 .cc .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block}
body.tcv2 .cc .rhelp{font-size:12.5px;font-weight:500;color:#4B5563;margin-top:2px;line-height:1.5;max-width:640px}
body.tcv2 .cc .rmeta{display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center;margin-top:7px;font-size:11.5px}
body.tcv2 .cc .rmeta .lnk{font-size:11.5px}
body.tcv2 .cc .kc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;font-weight:700;background:#F3F4F6;color:#374151;border-radius:6px;padding:2px 7px;word-break:break-all}
body.tcv2 .cc .chg.lnk{font-weight:700;color:var(--amberfg);background:var(--amberbg);border-radius:999px;padding:2px 9px;text-decoration:none;font-size:10.5px}
body.tcv2 .cc .rctl{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:190px;max-width:380px}
body.tcv2 .cc .rctl .seg,body.tcv2 .cc .rctl .slw,body.tcv2 .cc .rctl .scw,body.tcv2 .cc .rctl .txw,body.tcv2 .cc .rctl .dtw{align-self:stretch}
body.tcv2 .cc .why{display:flex;gap:6px;align-items:flex-start;font-size:11.5px;font-weight:700;color:var(--mut);max-width:260px;text-align:left}
body.tcv2 .cc .why .ic{width:13px;height:13px;margin-top:1px;flex:none}
body.tcv2 .cc .cfl{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--amberfg);background:var(--amberbg);border-radius:10px;padding:8px 10px;margin-top:4px}
body.tcv2 .cc .sw{width:46px;height:26px;border-radius:13px;background:#D1D5DB;position:relative;flex:none;display:block;border:0;padding:0;cursor:pointer;transition:background .12s}
body.tcv2 .cc .sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .12s}
body.tcv2 .cc .sw.on{background:var(--adm)}
body.tcv2 .cc .sw.on:after{left:23px}
body.tcv2 .cc .sw.kill.on{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--red)}
body.tcv2 .cc .sw[disabled]{opacity:.5;cursor:not-allowed}
body.tcv2 .cc .sw.sm{width:38px;height:22px}
body.tcv2 .cc .sw.sm:after{width:16px;height:16px}
body.tcv2 .cc .sw.sm.on:after{left:19px}
body.tcv2 .cc .stp{display:inline-flex;align-items:stretch;border:2px solid var(--ink);border-radius:11px;overflow:hidden;background:#fff;height:36px}
body.tcv2 .cc .stp button{width:32px;border:0;background:#F9FAFB;font-weight:800;font-size:16px;color:var(--ink);cursor:pointer;line-height:1}
body.tcv2 .cc .stp button:hover:not([disabled]){background:var(--mint)}
body.tcv2 .cc .stp button[disabled]{color:var(--mut2);cursor:not-allowed}
body.tcv2 .cc .stp .val{display:flex;align-items:center;border-left:2px solid var(--ink);border-right:2px solid var(--ink);min-width:54px;padding:0 4px}
body.tcv2 .cc .stp .val input{border:0;outline:0;width:70px;text-align:center;font-weight:800;font-size:14px;background:transparent;padding:0;min-width:0}
body.tcv2 .cc .stp .val .pre{font-style:normal;font-weight:800;font-size:14px;padding-left:6px}
body.tcv2 .cc .stp .val:focus-within{background:#F0FDF4}
body.tcv2 .cc .stp .unit{align-self:center;font-style:normal;font-size:11.5px;font-weight:700;color:var(--mut);padding:0 10px 0 8px;border-right:2px solid var(--ink);height:100%;display:flex;align-items:center}
body.tcv2 .cc .stp.chg .val{background:var(--amberbg)}
body.tcv2 .cc .sp{display:flex;gap:8px;font-size:11.5px;color:var(--mut)}
body.tcv2 .cc .sp b{color:var(--adm)}
body.tcv2 .cc .slw{width:100%;min-width:220px}
body.tcv2 .cc .slt{display:flex;align-items:center;gap:8px;justify-content:flex-end}
body.tcv2 .cc .slt output{font-size:14px;font-weight:800;margin-right:auto}
body.tcv2 .cc .slt .num{width:64px;border:2px solid var(--ink);border-radius:9px;padding:4px 6px;text-align:center;font-weight:800;font-size:13px}
body.tcv2 .cc .unit{font-style:normal;font-size:11.5px;font-weight:700;color:var(--mut)}
body.tcv2 .cc .rng{width:100%;margin:6px 0 2px;height:8px;-webkit-appearance:none;appearance:none;border-radius:999px;background:var(--band,#E5E7EB);outline-offset:4px}
body.tcv2 .cc .rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer}
body.tcv2 .cc .rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer}
body.tcv2 .cc .scale{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;color:var(--mut2)}
body.tcv2 .cc .seg{display:inline-flex;border:2px solid var(--ink);border-radius:11px;overflow:hidden;height:36px;max-width:100%;flex-wrap:nowrap}
body.tcv2 .cc .seg button{border:0;background:#fff;padding:0 13px;font-size:12px;font-weight:800;cursor:pointer;color:var(--ink);white-space:nowrap}
body.tcv2 .cc .seg button+button{border-left:2px solid var(--ink)}
body.tcv2 .cc .seg button.on{background:var(--ink);color:#fff}
body.tcv2 .cc .seg button[disabled]{opacity:.5;cursor:not-allowed}
body.tcv2 .cc .sel{border:2px solid var(--ink);border-radius:11px;padding:7px 10px;background:#fff;font-size:13px;font-weight:700;color:var(--ink);height:36px;max-width:100%;min-width:130px}
body.tcv2 .cc .sel:disabled{opacity:.5}
body.tcv2 .cc .dtw{display:flex;gap:8px;align-items:center;justify-content:flex-end}
body.tcv2 .cc .dtw .inp{width:auto}
body.tcv2 .cc .sel{-webkit-appearance:menulist;appearance:menulist;box-shadow:none}
body.tcv2 .cc .txw .ta{height:auto;min-height:76px;resize:vertical;font-weight:600;line-height:1.45;padding:8px 11px}
body.tcv2 .cc .txw .cnt{text-align:right;font-size:10.5px;font-weight:700;color:var(--mut2);margin-top:2px}
body.tcv2 .cc .rctl .inp{max-width:360px}
body.tcv2 .cc .scw{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
body.tcv2 .cc .scw .inp{flex:1;min-width:150px}
body.tcv2 .cc .ftab{overflow:hidden}
body.tcv2 .cc .fhead,body.tcv2 .cc .row.frow{display:grid;grid-template-columns:minmax(150px,1.15fr) minmax(0,1.5fr) 90px 130px 150px 150px 70px;gap:4px 14px;align-items:center}
body.tcv2 .cc .fhead{padding:10px 18px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);background:#fff}
body.tcv2 .cc .row.frow{padding:12px 18px}
body.tcv2 .cc .row.frow .fc{min-width:0;font-size:12.5px;font-weight:600;color:#374151}
body.tcv2 .cc .row.frow .fc1 label{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
body.tcv2 .cc .row.frow .fc1 .kc{margin-top:3px;display:inline-block}
body.tcv2 .cc .row.frow .fc1 .tg.kill{margin:3px 0 0 6px;padding:0 7px;font-size:9.5px}
body.tcv2 .cc .row.frow .fc6{display:flex;justify-content:flex-end}
body.tcv2 .cc .row.frow .fc7{grid-column:1/-1}
body.tcv2 .cc .row.frow .mlab{display:none}
body.tcv2 .cc .fgrp{padding:8px 18px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--line)}
body.tcv2 .cc .fgrp.live{background:#F0FAF5;color:var(--ok)}
body.tcv2 .cc .fgrp.off{background:#F3F4F6;color:var(--mut)}
body.tcv2 .cc .row.frow .why{max-width:none}
body.tcv2 .cc .lasttest{display:flex;align-items:center;gap:7px;padding:8px 18px;font-size:12px;color:var(--mut);border-top:1px solid #F1F5F9;background:#FAFBFC}
body.tcv2 .cc .lasttest svg{width:14px;height:14px;flex:none}
body.tcv2 .cc .lasttest.ok{color:var(--ok)}
body.tcv2 .cc .lasttest.bad{color:var(--red)}
body.tcv2 .cc .lasttest b{font-weight:800}
body.tcv2 .cc .lasttest .lnk{margin-left:auto;font-weight:700;white-space:nowrap}
/* feature-flag rollout: the Rollout column, its panel, the "who is in?" box */
body.tcv2 .cc .row.frow .fcr{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
body.tcv2 .cc .row.frow .fcr .lnk{font-size:12px;font-weight:800}
body.tcv2 .cc .row.frow .fcr .ropb{flex-basis:100%}
body.tcv2 .cc .row.frow .fcp{grid-column:1/-1;display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:12px 22px;margin-top:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#FAFBFC}
body.tcv2 .cc .fcp .rop-a>label,body.tcv2 .cc .fcp .rop-b>label{display:block;margin-bottom:6px;font-size:12.5px;color:var(--ink)}
body.tcv2 .cc .fcp .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
body.tcv2 .cc .fcp .rop-n{margin:8px 0 0;font-size:11.5px;font-weight:600;color:var(--mut);line-height:1.45}
body.tcv2 .cc .fcp .txw .ta{width:100%;min-height:64px}
body.tcv2 .cc .ropv{padding:12px 18px;margin-bottom:12px}
body.tcv2 .cc .ropf{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
body.tcv2 .cc .ropf .inp{width:260px;max-width:100%}
body.tcv2 .cc .ropr{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
}