/* THOR ONE household screen: product UI. Cobalt is the action color here and nowhere else. */
.hh{--c:#2E5BFF;--ink:#1C232B;--mid:#4A5562;--dim:#66717E;--line:#E3E7EB;--soft:#F6F8FA;
  margin:44px 0 0;background:#fff;color:var(--ink);border:1px solid #D5DBE1;border-radius:6px;
  font:400 14px/1.45 var(--sans);overflow:hidden;overflow-x:clip;box-shadow:0 18px 50px rgba(28,35,43,.10)}
.hh *{box-sizing:border-box}
.hh{font-variant-numeric:normal}
.hh .r,.hh .amt,.hh .sum b,.hh-total b{font-variant-numeric:tabular-nums}
.hh-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--soft);
  border-bottom:1px solid var(--line);font-size:12px;color:var(--dim)}
.hh-bar b{color:var(--ink);font-weight:600;letter-spacing:.02em}
.hh-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.hh-main,.hh-side{min-width:0}
.hh-main{padding:22px 22px 18px;border-right:1px solid var(--line)}
.hh-side{padding:22px;background:#FBFCFD;display:flex;flex-direction:column;gap:16px}
.hh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.hh-kick{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 4px}
.hh-name{font:600 19px/1.2 var(--sans);margin:0;display:flex;align-items:center;gap:8px;color:var(--ink)}
.hh-star{width:16px;height:16px;flex:0 0 16px;background:url(/brand/18-THOR-the-star-dark.svg) center/contain no-repeat}
.hh-total{text-align:right;font-size:12px;color:var(--dim)}
.hh-total b{display:block;font-size:18px;color:var(--ink);font-weight:600}
.hh table{width:100%;border-collapse:collapse}
.hh th{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-align:left;padding:0 8px 8px;border-bottom:1px solid var(--line)}
.hh td{padding:10px 8px;border-bottom:1px solid #EEF1F3;vertical-align:top}
.hh td small{display:block;font-size:12px;color:var(--dim)}
.hh .r{text-align:right}
.hh tr.used td{background:#F3F6FF}
.hh tfoot td{border-bottom:0;padding-top:12px;font-size:12px;color:var(--dim)}
.hh .tag{display:inline-block;font-size:12px;line-height:1.3;padding:2px 8px;border-radius:3px;border:1px solid}
.hh .tag.ok{color:#1F5135;background:#EEF7F1;border-color:#C7E3D1}
.hh .tag.warn{color:#6B4A0E;background:#FBF5E8;border-color:#EBD9B0}
.hh .tag.hold{color:#4A5562;background:#F1F3F5;border-color:#D9DEE3}
.hh .tag.go{color:#1E3FB8;background:#EEF2FF;border-color:#C9D4FF}
.hh .ask{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px}
.hh .ask p{margin:0}
.hh .ask .who{font-size:12px;color:var(--dim);margin-bottom:4px}
.hh .state{display:inline-block;align-self:flex-start;font-size:12px;font-weight:600;padding:4px 10px;border-radius:3px;
  background:#EEF2FF;color:#1E3FB8}
.hh .state.approved{background:#EEF7F1;color:#1F5135}
.hh .state:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hh ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hh ol li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.hh ol li b{font-weight:600}
.hh ol li small{display:block;font-size:12px;color:var(--dim)}
.hh ol li .amt{flex:0 0 auto;text-align:right;white-space:nowrap}
.hh .sum{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hh .sum div{background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px 12px}
.hh .sum span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hh .sum b{font-size:17px;font-weight:600}
.hh .sum small{display:block;font-size:12px;color:var(--dim)}
.hh .checks{margin:0;padding:0;list-style:none;font-size:13px;color:var(--mid)}
.hh .checks li{position:relative;padding:3px 0 3px 20px}
.hh .checks li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:4px;border-left:1.5px solid #1F5135;border-bottom:1.5px solid #1F5135;transform:rotate(-45deg)}
.hh .left{font-size:13px;color:var(--mid);margin:0}
.hh .audit{font-size:12.5px;color:var(--mid);margin:0;padding:10px 12px;background:#F3F6FF;border-radius:4px}
.hh .acts{display:flex;gap:10px;flex-wrap:wrap}
.hh button{font:600 14px/1 var(--sans);padding:11px 18px;border-radius:4px;cursor:pointer}
.hh .go-btn{background:var(--c);color:#fff;border:1px solid var(--c)}
.hh .go-btn:hover{background:#2049E0}
.hh .plain-btn{background:#fff;color:var(--ink);border:1px solid #66717E}
.hh button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hh-note{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:#4A5562;max-width:820px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:900px){
  .hh-body{grid-template-columns:minmax(0,1fr)}
  .hh-side{order:-1;border-bottom:1px solid var(--line)}
  .hh-main{border-right:0}
}
.hh .cust{display:none}
@media(max-width:600px){
  .hh-main,.hh-side{padding:16px 14px}
  .hh th:nth-child(2),.hh td:nth-child(2){display:none}
  .hh td,.hh th{padding-left:4px;padding-right:4px}
  .hh-head{flex-wrap:wrap}.hh-total{text-align:left}
  .hh .tag{white-space:normal}
  .hh .cust{display:block}.hh .cust .sep{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .hh tr.used td{transition:background .4s}
}