/* Home compare table (patterns/home-compare.php). Loaded only on pages with a block of class "hm-compare".
   A core Table: the second column is Digotech; italic text in a column head is its subtitle, italic text after a
   criterion is its tooltip; assets/js/sections/hm-compare.js turns the legend's words in the cells into marks. */
.hm-compare{
  --hm-compare-min:720px;
  --hm-compare-min-s:640px;
  --hm-compare-mark:20px;
  --hm-compare-mark-s:14px;
  --hm-compare-ico:12px;
  --hm-compare-ico-s:9px;
  --hm-compare-tipi:14px;
  --hm-compare-tip-w:240px;
  --hm-compare-tip-wait:300ms;
  --hm-compare-trk-w:40px;
  --hm-compare-trk-h:24px;
  --hm-compare-knob:18px;
  --hm-compare-knob-in:2px;
  --hm-compare-knob-shadow:0 1px 3px var(--shadow);
  --hm-compare-ring:2px;
  --hm-compare-half-w:1.5px;
  --hm-compare-step:110ms;
  --hm-compare-spin:650ms;
  --hm-compare-hide:160ms;
  --hm-compare-pop:460ms;
  --hm-compare-pop-at:620ms;
  --hm-compare-hairline:1px;
  --hm-compare-dg-ring:0 0 0 var(--s-1) var(--accent-tint);
  --hm-compare-col-edge:var(--hm-compare-hairline) 0 0 var(--rule);
  --hm-compare-z-col:1;
  --hm-compare-z-head:2;
  --hm-compare-z-corner:3;
  --hm-compare-z-tip:5;
  --hm-compare-i:0;
}

/* bar: switch on the left, legend on the right */
.hm-compare .hm-compare__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);margin:0 0 var(--s-4)}
.hm-compare .hm-compare__bar > *,.hm-compare .hm-compare__legend > *{margin:0}
.hm-compare__diff{display:flex;font-size:var(--t-s)}
.hm-compare__diff:not(.is-ready){visibility:hidden}
.hm-compare__switch{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer;user-select:none}
.hm-compare__switch input{position:absolute;width:var(--hm-compare-hairline);height:var(--hm-compare-hairline);opacity:0}
.hm-compare__trk{position:relative;flex:none;width:var(--hm-compare-trk-w);height:var(--hm-compare-trk-h);border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--paper-3);transition:background-color var(--dur-m) var(--ease-out),border-color var(--dur-m) var(--ease-out)}
.hm-compare__trk::after{content:"";position:absolute;top:var(--hm-compare-knob-in);left:var(--hm-compare-knob-in);width:var(--hm-compare-knob);height:var(--hm-compare-knob);border-radius:50%;background:var(--card);box-shadow:var(--hm-compare-knob-shadow);transition:transform var(--dur-m) var(--ease-out)}
.hm-compare__switch input:checked + .hm-compare__trk{border-color:var(--accent-fill);background:var(--accent-fill)}
.hm-compare__switch input:checked + .hm-compare__trk::after{transform:translateX(calc(var(--hm-compare-trk-w) - var(--hm-compare-trk-h)))}
.hm-compare__switch input:focus-visible + .hm-compare__trk{outline:var(--hm-compare-ring) solid var(--accent);outline-offset:var(--hm-compare-ring)}

.hm-compare__legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--t-xs);color:var(--ink-2)}
.hm-compare__legend > p{position:relative;display:inline-flex;align-items:center;gap:var(--s-2)}
.hm-compare__legend > p::before{content:"";flex:none;box-sizing:border-box;width:var(--hm-compare-mark-s);height:var(--hm-compare-mark-s);border-radius:50%}
.hm-compare__legend > p::after{content:"";position:absolute;top:50%;left:calc((var(--hm-compare-mark-s) - var(--hm-compare-ico-s)) / 2);width:var(--hm-compare-ico-s);height:var(--hm-compare-ico-s);transform:translateY(-50%);-webkit-mask:var(--hm-compare-ic) center / contain no-repeat;mask:var(--hm-compare-ic) center / contain no-repeat}
.hm-compare__legend > .is-y::before{background:var(--accent-fill)}
.hm-compare__legend > .is-y::after{background:var(--on-accent);--hm-compare-ic:url(../../../icons/check.svg?ver=4227966a)}
.hm-compare__legend > .is-p::before{border:var(--hm-compare-half-w) solid var(--accent-fill);background:conic-gradient(var(--accent-fill) 0 180deg, transparent 0)}
.hm-compare__legend > .is-p::after{content:none}
.hm-compare__legend > .is-n::before{border:1px solid var(--rule)}
.hm-compare__legend > .is-n::after{background:var(--ink-3);--hm-compare-ic:url(../../../icons/x.svg?ver=d520cde6)}

/* table rules carry .hm-compare in front so they win over the core table stylesheet (same specificity otherwise);
   the caption is for screen readers only, as in the design */
/* table frame: no clipping on wide screens so the column heads stay under the header bar while the table scrolls by.
   position:relative makes the frame the containing block of every absolute child (screen-reader labels, caption,
   tooltips); without it their containing block sits outside the phone scroll frame and they widen the page. */
.hm-compare .hm-compare__table{position:relative;margin:0;overflow:visible;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper)}
/* line-height normal = the design's row height (its tables get the browser's normal line height) */
.hm-compare .hm-compare__table table{width:100%;min-width:var(--hm-compare-min);border-collapse:separate;border-spacing:0;font-size:var(--t-s);line-height:normal}
.hm-compare .hm-compare__table thead{border:0}
.hm-compare .hm-compare__table figcaption{position:absolute;width:var(--hm-compare-hairline);height:var(--hm-compare-hairline);margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hm-compare .hm-compare__table th,.hm-compare .hm-compare__table td{padding:var(--s-4) var(--s-5);border:0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle;transition:background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.hm-compare__table thead th{position:sticky;top:calc(var(--admin-h) + var(--nav-h) + var(--s-4));z-index:var(--hm-compare-z-head);background:var(--paper-2);font:600 var(--t-m)/1.2 var(--font-display);color:var(--ink)}
.hm-compare__table thead th:first-child{font-size:0}
.hm-compare__table thead th:first-child{border-top-left-radius:var(--r-card)}
.hm-compare__table thead th:last-child{border-top-right-radius:var(--r-card)}
.hm-compare__table thead em{display:block;margin-top:var(--s-1);font:400 var(--t-xs)/1.3 var(--font-body);font-style:normal;color:var(--ink-2)}
.hm-compare__table tbody tr > :first-child{position:relative;width:30%;font-weight:600}
.hm-compare__table tbody tr{transition:background-color var(--dur) var(--ease-press)}
.hm-compare__table tbody tr:hover{background:var(--paper-2)}
.hm-compare__table tbody tr:hover > :first-child{color:var(--accent)}
.hm-compare__table tbody tr:last-child > *{border-bottom:0}
.hm-compare__table tbody tr:last-child > :first-child{border-bottom-left-radius:var(--r-card)}
.hm-compare__table tbody tr:last-child > :last-child{border-bottom-right-radius:var(--r-card)}

/* Digotech column */
.hm-compare__table tr > :nth-child(2){background:var(--accent-tint)}
.hm-compare__table thead th:nth-child(2){background:var(--accent-fill);color:var(--on-accent)}
.hm-compare__table thead th:nth-child(2) em{color:var(--on-accent)} /* full colour: 4.5:1 on the accent */
.hm-compare__table .is-fact > :nth-child(2){font-weight:700;color:var(--accent)}

/* the column under the pointer */
.hm-compare__table tbody .is-col{background:var(--paper-2)}
.hm-compare__table thead .is-col:not(:nth-child(2)){background:var(--paper-3)}
.hm-compare__table tbody .is-col:nth-child(2){background:color-mix(in oklch, var(--accent-fill) 24%, var(--paper))}

/* "only differences": rows where every option reads the same */
.hm-compare__table table.is-diff .is-same{display:none}

/* criterion tooltip (the italic text) with an info icon after the criterion */
.hm-compare__table tbody tr > :first-child:has(em)::after{content:"";display:inline-block;width:var(--hm-compare-tipi);height:var(--hm-compare-tipi);margin-left:var(--s-1);vertical-align:middle;background:var(--ink-3);-webkit-mask:url(../../../icons/info.svg?ver=35c2b7ff) center / contain no-repeat;mask:url(../../../icons/info.svg?ver=35c2b7ff) center / contain no-repeat}
.hm-compare__table tbody tr > :first-child:has(em){cursor:help}
.hm-compare__table tbody em{position:absolute;top:calc(100% - var(--s-2));left:var(--s-5);z-index:var(--hm-compare-z-tip);width:max-content;max-width:var(--hm-compare-tip-w);padding:var(--s-2);border-radius:var(--r);background:var(--ink);color:var(--paper);font:400 var(--t-xs)/1.45 var(--font-body);font-style:normal;text-align:left;white-space:normal;opacity:0;pointer-events:none;transform:translateY(calc(var(--s-1) * -1));
  transition:opacity var(--dur) var(--ease-press) var(--hm-compare-tip-wait),transform var(--dur) var(--ease-press) var(--hm-compare-tip-wait)}
.hm-compare__table tbody tr > :first-child:is(:hover,:focus-visible) em{opacity:1;transform:none}
.hm-compare__table tbody tr:nth-last-child(-n+2) em{top:auto;bottom:calc(100% - var(--s-2));transform:translateY(var(--s-1))}

/* marks (built by hm-compare.js) */
/* a flex box in the cell: the row is as tall as the mark, with no baseline gap under it */
.hm-compare__st{display:flex;align-items:center;gap:var(--s-2)}
.hm-compare__st i{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--hm-compare-mark);height:var(--hm-compare-mark);font-style:normal}
.hm-compare__st b{position:absolute;inset:0;display:grid;place-items:center;box-sizing:border-box;border-radius:50%}
.hm-compare__st b::after{content:"";width:var(--hm-compare-ico);height:var(--hm-compare-ico);background:currentColor;-webkit-mask:var(--hm-compare-ic) center / contain no-repeat;mask:var(--hm-compare-ic) center / contain no-repeat}
.hm-compare__st.is-y b{background:var(--accent-fill);color:var(--on-accent);--hm-compare-ic:url(../../../icons/check.svg?ver=4227966a)}
.hm-compare__st.is-n{color:var(--ink-3)}
.hm-compare__st.is-n b{border:1px solid var(--rule);color:var(--ink-3);--hm-compare-ic:url(../../../icons/x.svg?ver=d520cde6)}
.hm-compare__st.is-p b{border:var(--hm-compare-half-w) solid var(--accent-fill);background:conic-gradient(var(--accent-fill) 0 180deg, transparent 0)}
.hm-compare__st.is-p b::after{content:none}
.hm-compare__table tbody tr > :nth-child(2) .hm-compare__st.is-y b{box-shadow:var(--hm-compare-dg-ring)}
.hm-compare__sr{position:absolute;width:var(--hm-compare-hairline);height:var(--hm-compare-hairline);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marks appear row by row when the table comes into view: a spinner, then the mark pops */
.hm-compare__table .is-pre .hm-compare__st i::before{content:"";position:absolute;inset:0;box-sizing:border-box;border:var(--hm-compare-ring) solid var(--rule);border-top-color:var(--accent-fill);border-radius:50%}
.hm-compare__table .is-pre:not(.is-seen) .hm-compare__st b{transform:scale(0)}
.hm-compare__table .is-seen .hm-compare__st i::before{animation:hm-compare-spin var(--hm-compare-spin) linear both,hm-compare-hide var(--hm-compare-hide) var(--ease-out) forwards;animation-delay:calc(var(--hm-compare-i) * var(--hm-compare-step)),calc(var(--hm-compare-i) * var(--hm-compare-step) + var(--hm-compare-spin))}
.hm-compare__table .is-seen .hm-compare__st b{animation:hm-compare-pop var(--hm-compare-pop) var(--ease-out) backwards;animation-delay:calc(var(--hm-compare-i) * var(--hm-compare-step) + var(--hm-compare-pop-at))}
@keyframes hm-compare-spin{to{transform:rotate(360deg)}}
@keyframes hm-compare-hide{to{opacity:0;transform:scale(1.3)}}
@keyframes hm-compare-pop{from{transform:scale(0)}60%{transform:scale(1.18)}}


/* phone: the table scrolls sideways in its frame, the criteria column stays */
@media (max-width: 767px){
  .hm-compare .hm-compare__table{overflow-x:auto;overflow-y:hidden}
  .hm-compare .hm-compare__table table{min-width:var(--hm-compare-min-s)}
  .hm-compare__table thead th{top:0}
  .hm-compare__table tbody tr > :first-child,.hm-compare__table thead th:first-child{position:sticky;left:0;z-index:var(--hm-compare-z-col);background:var(--paper);box-shadow:var(--hm-compare-col-edge)}
  .hm-compare__table thead th:first-child{z-index:var(--hm-compare-z-corner);background:var(--paper-2)}
  .hm-compare .hm-compare__table.is-fade-r{-webkit-mask-image:linear-gradient(to right, currentColor calc(100% - var(--s-7)), transparent);mask-image:linear-gradient(to right, currentColor calc(100% - var(--s-7)), transparent)}
}

@media (prefers-reduced-motion: reduce){
  .hm-compare .hm-compare__table th,.hm-compare .hm-compare__table td,.hm-compare__table tbody tr,.hm-compare__table tbody em,.hm-compare__trk,.hm-compare__trk::after{transition:none}
  .hm-compare__table .is-seen .hm-compare__st i::before,.hm-compare__table .is-seen .hm-compare__st b{animation:none}
}

/* editor: the switch label, the tooltips and the hidden head cell stay visible and editable */
.editor-styles-wrapper .hm-compare__diff:not(.is-ready){visibility:visible}
.editor-styles-wrapper .hm-compare__table thead th{position:static}
.editor-styles-wrapper .hm-compare__table thead th:first-child{font-size:var(--t-xs)}
.editor-styles-wrapper .hm-compare__table tbody em{position:static;display:block;width:auto;max-width:none;margin-top:var(--s-1);padding:0;background:none;color:var(--ink-3);font-weight:400;opacity:1;transform:none}
.editor-styles-wrapper .hm-compare__table tbody tr > :first-child:has(em)::after{content:none}
.editor-styles-wrapper .hm-compare .hm-compare__table figcaption{position:static;width:auto;height:auto;margin-top:var(--s-2);clip:auto;white-space:normal;font-size:var(--t-xs);color:var(--ink-3)}