/* Evensteer Desk — polish for the Hosting pages (Cloudflare, DNS server, Object storage, VPS services, Uptime, Email hosting, Email security,
   Domains and DNS, Backups). Same Forest Light look and the Desk's own motion tokens (--dur-1 to --dur-4, --ease-out). Scoped to .hx so no other
   page is touched. Layout fixes first, then motion. Motion stops when Motion is Off in Settings or the device asks for reduced motion. */

/* ---------- layout ---------- */
.hx .panel-body > * + *{margin-top:12px}
.hx .panel-body > .opt-row + .opt-row{margin-top:8px}
.hx .opt-row{flex-wrap:wrap;gap:8px 10px;padding:4px 6px;margin-left:-6px;margin-right:-6px;border-radius:10px}
.hx .opt-row > .input{flex:1 1 170px;min-width:0;max-width:none}
.hx .opt-row > .input-sm{flex:1 1 140px}
.hx .opt-row > select.input,.hx .opt-row > select.input-sm{flex:0 1 150px}
.hx .opt-row > input[type=number]{flex:0 1 110px}
.hx .opt-row > input[type=file]{flex:1 1 220px;min-width:0;font-size:13px}
.hx .opt-row > .btn,.hx .opt-row > .icon-btn,.hx .opt-row > .pill{flex:none}
.hx .opt-row > b,.hx .opt-row > div{min-width:0}
.hx .panel-head{align-items:baseline;gap:10px}
.hx .panel-head .small{margin-left:auto;text-align:right}
.hx .field label{display:block;margin-bottom:5px}
.hx .row-actions{align-items:center}
.hx p{text-wrap:pretty}
.hx h3.small{margin:18px 0 6px;font-weight:600}
.hx .ans-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px}
.hx .ans-dl dt{color:var(--ink-dim);font-size:13px}
.hx .ans-dl dd{margin:0;min-width:0;word-break:break-word}

/* tables, the Desk's own crm-table, made for reading and not for clicking rows */
.hx .table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--surface,transparent)}
.hx .table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hx .crm-table{min-width:540px}
.hx .crm-table th,.hx .crm-table td{padding:10px 14px}
.hx .crm-table td{white-space:normal;max-width:none;overflow:visible;text-overflow:clip;word-break:break-word}
.hx .crm-table td:has(> .btn){text-align:right;white-space:nowrap}
.hx .crm-table th:has(+ th:last-child),.hx .crm-table td{vertical-align:middle}
.hx .crm-table tbody tr{cursor:default}
.hx .crm-table tbody tr:last-child td{border-bottom:0}
.hx .crm-table td .btn{margin-left:4px}

/* the beat bar of the uptime page */
.hx .up-bar{display:flex;gap:2px;height:18px;margin-top:10px}
.hx .up-bar i{flex:1;max-width:9px;border-radius:3px;background:#b8c2bc;transform-origin:50% 100%}

/* a button that is working shows it */
.hx .btn:disabled{cursor:progress;opacity:.72}
.hx .btn:disabled::after{content:"";display:inline-block;width:11px;height:11px;margin-left:9px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}

/* hit areas of the small controls */
.hx .icon-btn{min-width:36px;min-height:36px}

/* ---------- the orbit loader, the code boxes' idea as a waiting sign ---------- */
.hx-orbit{display:inline-block;position:relative;width:18px;height:18px;vertical-align:-4px;margin-right:9px}
.hx-orbit i{position:absolute;inset:0}
.hx-orbit i::before{content:"";position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--green,#1b6b4e)}
.hx-orbit i:nth-child(2)::before{opacity:.6}
.hx-orbit i:nth-child(3)::before{opacity:.3}
.hx-wait{display:flex;align-items:center;padding:6px 0;color:var(--ink-dim);font-size:14px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .hx-orbit i{animation:hxOrbit 1.1s cubic-bezier(.62,0,.3,1) infinite}
  html:not([data-motion="off"]) .hx-orbit i:nth-child(2){animation-delay:-.11s}
  html:not([data-motion="off"]) .hx-orbit i:nth-child(3){animation-delay:-.22s}
  html:not([data-motion="off"]) .hx .btn:disabled::after{animation:hxTurn .7s linear infinite}

  /* things answer the pointer */
  html:not([data-motion="off"]) .hx .opt-row{transition:background-color var(--dur-1) var(--ease-out)}
  html:not([data-motion="off"]) .hx .opt-row:hover{background:color-mix(in srgb,var(--green,#1b6b4e) 5%,transparent)}
  html:not([data-motion="off"]) .hx .crm-table tbody tr{transition:background-color var(--dur-1) var(--ease-out)}
  html:not([data-motion="off"]) .hx .input,html:not([data-motion="off"]) .hx select{transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
  html:not([data-motion="off"]) .hx .input:focus,html:not([data-motion="off"]) .hx select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--green,#1b6b4e) 20%,transparent)}
  html:not([data-motion="off"]) .hx .chip{transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
  html:not([data-motion="off"]) .hx .chip:active{transform:scale(.96)}
  html:not([data-motion="off"]) .hx .btn{transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
  html:not([data-motion="off"]) .hx .btn:not(:disabled):hover{transform:translateY(-1px)}
  html:not([data-motion="off"]) .hx .btn:not(:disabled):active{transform:scale(.97)}
  html:not([data-motion="off"]) .hx .pill{animation:hxPop var(--dur-2) var(--ease-out) both}

  /* arriving on a page (the Desk sets .view-enter on a route change), the rows and the beat bars settle in one after another */
  html:not([data-motion="off"]) .view-enter .hx .crm-table tbody tr,
  html:not([data-motion="off"]) .view-enter .hx .opt-row{animation:hxRow var(--dur-3) var(--ease-out) both}
  html:not([data-motion="off"]) .view-enter .hx .crm-table tbody tr:nth-child(2),html:not([data-motion="off"]) .view-enter .hx .opt-row:nth-child(2){animation-delay:35ms}
  html:not([data-motion="off"]) .view-enter .hx .crm-table tbody tr:nth-child(3),html:not([data-motion="off"]) .view-enter .hx .opt-row:nth-child(3){animation-delay:70ms}
  html:not([data-motion="off"]) .view-enter .hx .crm-table tbody tr:nth-child(4),html:not([data-motion="off"]) .view-enter .hx .opt-row:nth-child(4){animation-delay:105ms}
  html:not([data-motion="off"]) .view-enter .hx .crm-table tbody tr:nth-child(5),html:not([data-motion="off"]) .view-enter .hx .opt-row:nth-child(5){animation-delay:140ms}
  html:not([data-motion="off"]) .view-enter .hx .crm-table tbody tr:nth-child(n+6),html:not([data-motion="off"]) .view-enter .hx .opt-row:nth-child(n+6){animation-delay:170ms}
  html:not([data-motion="off"]) .view-enter .hx .up-bar i{animation:hxBar .55s var(--ease-out) both}
  html:not([data-motion="off"]) .view-enter .hx .up-bar i:nth-child(3n){animation-delay:60ms}
  html:not([data-motion="off"]) .view-enter .hx .up-bar i:nth-child(3n+1){animation-delay:120ms}

  /* the share dialog */
  html:not([data-motion="off"]) #sh-modal{animation:hxFade var(--dur-2) var(--ease-out) both}
  html:not([data-motion="off"]) #sh-modal > .panel{animation:hxModal var(--dur-3) var(--ease-out) both}
  html:not([data-motion="off"]) #sh-modal.out{animation:hxFadeOut 160ms ease-in both}
  html:not([data-motion="off"]) #sh-modal.out > .panel{animation:hxModalOut 160ms ease-in both}
}
@keyframes hxOrbit{to{transform:rotate(360deg)}}
@keyframes hxTurn{to{transform:rotate(360deg)}}
@keyframes hxPop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes hxRow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hxBar{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes hxFade{from{opacity:0}to{opacity:1}}
@keyframes hxFadeOut{to{opacity:0}}
@keyframes hxModal{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hxModalOut{to{opacity:0;transform:translateY(6px) scale(.985)}}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .hx .opt-row > .input,.hx .opt-row > .input-sm,.hx .opt-row > select.input,.hx .opt-row > select.input-sm,.hx .opt-row > input[type=number]{flex:1 1 100%}
  .hx .opt-row > .btn{flex:1 1 100%}
  .hx .panel-head{flex-wrap:wrap}
  .hx .panel-head .small{margin-left:0;text-align:left;flex-basis:100%}
  .hx .ans-dl{grid-template-columns:1fr;gap:2px}
  .hx .ans-dl dd{margin-bottom:8px}
  .hx .crm-table th,.hx .crm-table td{padding:9px 10px}
}