/* =============================================================================
   ShiftHawk — /how-to-connect page styles
   The all-in-one "get your calendar link" guide. Prefix: .ht-
   Tokens from styles.css; dark mode flips via the var() cascade.
   Deep links (#qgenda, #google, …) land on .ht-guide cards; :target gets a
   highlight pulse so the visitor sees exactly which guide they were sent to.
   ========================================================================== */

/* anchored sections clear the sticky header on arrival */
.ht-guide, #platforms, #guides { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ------------------------------------------------ work/life explainer cards */
.ht-cals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 720px) { .ht-cals { grid-template-columns: 1fr; } }
.ht-cal-card { text-align: left; }
.ht-cal-card .ph { color: var(--primary); }
.ht-cal-card h3 { display: flex; align-items: center; gap: var(--s-2); }

/* ------------------------------------------------------------- master table */
.ht-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ht-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .95rem; }
.ht-table th {
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--border-strong);
  background: var(--surface-2);
  white-space: nowrap;
}
.ht-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.ht-table tr:last-child td { border-bottom: none; }
.ht-table tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.ht-table .ht-plat a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-1);
  border-bottom: 1.5px dashed var(--primary-tint);
}
.ht-table .ht-plat a:hover { color: var(--primary-deep); border-bottom-style: solid; }
.ht-table .ht-ind { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.ht-table .ht-goto { text-align: right; white-space: nowrap; }

/* work / life tags (shared by the table and the guide cards) */
.ht-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
  border: 1px solid;
}
.ht-tag-work { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary-tint); }
.ht-tag-life { background: #FDF2F8; color: #BE185D; border-color: #FBCFE8; }
html[data-theme="dark"] .ht-tag-life { background: rgba(236,72,153,.16); color: #F9A8D4; border-color: rgba(236,72,153,.4); }

/* the "How-to →" pill reused from the popups */
.ht-goto a {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border: 1px solid var(--primary-tint);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  transition: background .15s ease, transform .15s ease;
}
.ht-goto a:hover { background: var(--primary-tint); color: var(--text-1); transform: translateY(-1px); }

/* ------------------------------------------------------------- jump chips */
.ht-jump {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: center;
  margin: var(--s-5) 0 var(--s-7);
}
.ht-jump a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  min-height: 38px;
  transition: transform .15s ease, border-color .2s ease, color .2s ease;
}
.ht-jump a:hover { transform: translateY(-1px); border-color: var(--primary); color: var(--text-1); }

/* ------------------------------------------------------------- guide cards */
.ht-guides { display: grid; gap: var(--s-5); max-width: 860px; margin: 0 auto; }
.ht-guide {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ht-guide-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.ht-guide-head h3 { margin: 0; font-size: 1.35rem; }
.ht-meta {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-3);
  margin: 0 0 var(--s-4);
}
.ht-steps { margin: 0 0 var(--s-4); padding-left: 0; list-style: none; counter-reset: htstep; display: grid; gap: var(--s-3); }
.ht-steps li {
  counter-increment: htstep;
  /* NOT grid/flex: mixed inline children (<strong>, <a>, text) must stay in
     one flowing line box — grid would split each into its own item. The step
     number is absolutely positioned in the padding instead. */
  position: relative;
  padding-left: 44px;
  min-height: 30px;
  color: var(--text-2);
  font-size: .98rem; line-height: 1.55;
}
.ht-steps li::before {
  content: counter(htstep);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-weight: 700; font-size: .85rem;
  background: var(--primary-soft); color: var(--primary-deep);
  border: 1px solid var(--primary-tint);
}
.ht-then {
  /* NOT flex: mixed inline children (<a>, <strong>, text) must stay in one
     flowing line box — flex would split each into its own item mid-sentence.
     The icon is absolutely positioned in the left padding instead. */
  position: relative;
  display: block;
  margin: 0;
  font-size: .95rem;
  color: var(--text-1);
  font-weight: 600;
  background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  border-radius: var(--r-2);
  padding: 10px 14px 10px 44px;
}
.ht-then .ph { position: absolute; left: 14px; top: 11px; color: var(--success); font-size: 1.25rem; }

/* deep-link highlight: the card the visitor was sent to lights up */
@keyframes ht-target-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}
.ht-guide:target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), var(--shadow-md);
}
@media (prefers-reduced-motion: no-preference) {
  .ht-guide:target { animation: ht-target-pulse 1.2s ease-out 2; }
}

/* touch devices: pills grow to a comfortable 44dp tap target */
@media (pointer: coarse) {
  .ht-goto a { min-height: 44px; padding: 10px 14px; }
  .ht-jump a { min-height: 44px; }
}

/* small print hedge under the guides */
.ht-hedge {
  max-width: 860px;
  margin: var(--s-6) auto 0;
  font-size: .88rem;
  color: var(--text-3);
  text-align: center;
}