/* guides.html: page-only styles (prefix dg-). */

/* Hub: four groups of guide cards */
.dg-group + .dg-group{margin-top:clamp(2rem, 1.5rem + 2vw, 3rem)}
.dg-group__title{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;font-size:1.125rem;letter-spacing:-.01em}
.dg-group__num{display:inline-grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.8125rem;font-weight:800;letter-spacing:0;color:var(--blue-ink);background:var(--surface-3)}
.dg-cards{--grid-gap:.875rem}
.dg-card{gap:.5rem;padding:1.25rem 1.25rem 1.1rem;border-radius:var(--r-lg)}
.dg-card > .icon-tile{margin-bottom:.35rem}
.dg-card__body{display:grid;gap:.3rem}
.dg-card h4{font-size:1.0625rem;line-height:1.3}
.dg-card .dg-card__body p{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.dg-card__where{margin-top:auto;padding-top:.35rem;font-size:.75rem !important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width: 639.98px) {
  .dg-card {display:grid;grid-template-columns:auto minmax(0, 1fr);gap:.15rem .9rem;align-items:start;padding:1rem 1.1rem}
  .dg-card > .icon-tile {grid-row:1 / span 2;margin:0}
  .dg-card__where {grid-column:2;padding-top:.25rem}
}

/* Guides: sticky contents on desktop, one white panel per guide */
.dg-section{padding-top:clamp(3rem, 2rem + 3vw, 5rem)}
.dg-layout{display:grid;gap:2rem}
.dg-toc{display:none}
@media (min-width: 1024px) {
  .dg-layout {grid-template-columns:210px minmax(0, 1fr);gap:clamp(2.5rem, 1rem + 3vw, 4.5rem);align-items:start}
  .dg-toc {display:block;position:sticky;top:calc(var(--header-h) + 1.5rem);max-height:calc(100vh - var(--header-h) - 3rem);overflow-y:auto;padding:0 .5rem 1rem 0;scrollbar-width:thin}
}
.dg-toc__title{margin-bottom:.25rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dg-toc__group{margin:1.1rem 0 .35rem;font-size:.8125rem;font-weight:700;color:var(--ink)}
.dg-toc ol{list-style:none;padding:0;border-left:1.5px solid var(--border)}
.dg-toc a{display:block;margin-left:-1.5px;padding:.3rem .75rem;border-left:1.5px solid transparent;font-size:.875rem;line-height:1.35;color:var(--ink-2);text-decoration:none;transition:color .15s, border-color .15s}
.dg-toc a:hover{color:var(--ink);border-left-color:var(--border-strong)}
/* The guide you jumped to is marked in the contents */
.dg-layout:has(#trial-start:target) .dg-toc a[href="#trial-start"],
.dg-layout:has(#store-setup:target) .dg-toc a[href="#store-setup"],
.dg-layout:has(#staff:target) .dg-toc a[href="#staff"],
.dg-layout:has(#pair-till:target) .dg-toc a[href="#pair-till"],
.dg-layout:has(#add-products:target) .dg-toc a[href="#add-products"],
.dg-layout:has(#import-csv:target) .dg-toc a[href="#import-csv"],
.dg-layout:has(#labels:target) .dg-toc a[href="#labels"],
.dg-layout:has(#stock-in:target) .dg-toc a[href="#stock-in"],
.dg-layout:has(#first-sale:target) .dg-toc a[href="#first-sale"],
.dg-layout:has(#hold:target) .dg-toc a[href="#hold"],
.dg-layout:has(#returns:target) .dg-toc a[href="#returns"],
.dg-layout:has(#day-close:target) .dg-toc a[href="#day-close"],
.dg-layout:has(#ask-ai:target) .dg-toc a[href="#ask-ai"],
.dg-layout:has(#customise:target) .dg-toc a[href="#customise"],
.dg-layout:has(#tills:target) .dg-toc a[href="#tills"],
.dg-layout:has(#offline:target) .dg-toc a[href="#offline"]{font-weight:700;color:var(--blue-ink);border-left-color:var(--blue)}

.dg-guides{min-width:0;max-width:880px}
.dg-divider{display:flex;align-items:center;gap:.65rem;margin:clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1.25rem;font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dg-divider:first-child{margin-top:0}
.dg-divider::after{content:"";flex:1;height:1px;background:var(--border-strong)}
.dg-divider .dg-group__num{background:#fff;box-shadow:var(--shadow-xs)}

.dg-guide{padding:clamp(1.5rem, .9rem + 2.6vw, 3rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-xs)}
.dg-guide + .dg-guide{margin-top:clamp(1rem, .75rem + 1vw, 1.5rem)}
.dg-guide:target{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.dg-guide__head{display:grid;gap:.75rem;justify-items:start;margin-bottom:clamp(1.75rem, 1.5rem + 1vw, 2.5rem);grid-template-columns:minmax(0, 1fr)}
.dg-guide__meta{display:flex;flex-wrap:wrap;gap:.4rem}
.dg-guide h2{font-size:clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);letter-spacing:-.03em}
.dg-guide__intro{max-width:40em;font-size:1.125rem;line-height:1.55;color:var(--ink-2)}
.dg-guide__intro kbd{font-size:.75em}

.dg-steps{gap:1.6rem}
.dg-steps .step p{max-width:62ch}
.dg-steps .step strong{font-weight:650}
.dg-steps .shot{margin-top:1.25rem}
.dg-steps .shot--narrow{margin-inline:0}
.dg-guide .shot > figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;text-align:left}
.dg-shot--card{max-width:420px}
.dg-shot--card-wide{max-width:500px}
.dg-shot--bar{max-width:560px}
.dg-receipt{max-width:320px}
/* Phones: slimmer panels and steps; screenshots use the full panel width */
@media (max-width: 639.98px) {
  .dg-guide {padding:1.5rem 1rem 1rem;border-radius:var(--r-xl)}
  .dg-steps .step {padding-left:3rem}
  .dg-steps .step::before {width:2.25rem;height:2.25rem;font-size:.9375rem}
  .dg-steps .step:not(:last-child)::after {left:calc(1.125rem - .75px);top:2.75rem}
  .dg-steps .step h3 {padding-top:.25rem}
  .dg-steps .shot {position:relative;z-index:1;margin-left:-3rem}
  .dg-steps .shot > figcaption {padding-left:3rem}
  /* the hold strip is too wide to read on a phone: zoom in on the Hold panel */
  .frame__body.dg-crop--hold {--z:3.7736;--x:2.717;--y:1.6627;--ar:2.1744}
  .dg-tips {padding:1.1rem 1.1rem 1.1rem 1.25rem}
}

/* "Good to know" */
.dg-tips{margin-top:clamp(1.75rem, 1.5rem + 1vw, 2.5rem);padding:1.25rem 1.5rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.dg-tips--ai{border-color:transparent;background:linear-gradient(#F7FAFF, #F4FBFB) padding-box, var(--ai-gradient) border-box}
.dg-tips__title{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;font-size:.9375rem;font-weight:700;color:var(--ink)}
.dg-tips__title .icon{color:var(--blue-ink)}
.dg-tips--ai .dg-tips__title .icon{color:var(--blue)}
.dg-tips ul{display:grid;gap:.5rem;padding-left:1.1rem;font-size:.9375rem;line-height:1.55}
.dg-tips li::marker{color:var(--muted)}

.dg-back{margin-top:1.5rem;font-size:.875rem}
.dg-back a{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;font-weight:600;text-decoration:none}
.dg-back .icon{width:1rem;height:1rem;transform:rotate(-90deg)}

/* Example CSV */
.dg-csv{margin:clamp(1.75rem, 1.5rem + 1vw, 2.5rem) 0 0;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.dg-csv__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);background:var(--surface-2);border-bottom:1px solid var(--border)}
.dg-csv__scroll{overflow-x:auto;background:linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) 0 0 / 2.5rem 100% no-repeat local, linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) 100% 0 / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(11,31,68,.14), transparent) 0 0 / .9rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(11,31,68,.14), transparent) 100% 0 / .9rem 100% no-repeat scroll}
.dg-csv__scroll:focus-visible{outline-offset:-3px}
.dg-csv table{width:100%;font-family:var(--mono);font-size:.8125rem;white-space:nowrap}
.dg-csv th, .dg-csv td{padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.dg-csv th{font-weight:700;color:var(--ink)}
.dg-csv td{color:var(--ink-2)}
.dg-csv tbody tr:last-child td{border-bottom:0}
.dg-csv__blank{font-style:italic;color:var(--ink-2) !important}
.dg-csv figcaption{padding:.75rem 1rem;font-size:.875rem;line-height:1.5;color:var(--text-muted);background:var(--surface-2);border-top:1px solid var(--border)}

/* Help band: the email link on navy */
.cta-band .dg-help-mail{color:#fff;font-weight:600;text-decoration-color:rgba(255,255,255,.45)}
.cta-band .dg-help-mail:hover{text-decoration-color:#fff}

/* Screenshot crops: zoom into part of a screenshot without new image files.
   --z zoom, --x / --y offsets (fractions of the box width), --ar the box's aspect ratio. */
.frame__body.dg-crop{aspect-ratio:var(--ar)}
.frame__body.dg-crop picture{display:block}
.frame__body.dg-crop img{width:calc(var(--z) * 100%);max-width:none;margin-left:calc(var(--x) * -100%);margin-top:calc(var(--y) * -100%)}
.dg-crop--setup{--z:2.17391;--x:.58696;--y:.13587;--ar:.92}
.dg-crop--tlogin{--z:2.17391;--x:.58696;--y:.36685;--ar:1.6}
.dg-crop--alogin{--z:2.5;--x:.75;--y:.46875;--ar:1.52381}
.dg-crop--tills{--z:1.16279;--x:.023256;--y:.174579;--ar:5.6061}
.dg-crop--hold{--z:1.10497;--x:.093923;--y:.459254;--ar:4.4554}
.dg-crop--bar{--z:2.94118;--x:0;--y:0;--ar:9.4154}
.dg-crop--stockin{--z:1;--x:0;--y:0;--ar:2.6384}
.dg-crop--lowstock{--z:1;--x:0;--y:0;--ar:2.7444}
.dg-crop--offline{--z:1;--x:0;--y:0;--ar:1.77778} /* cuts the old provisional sale number from the bottom row */