/* The web desk's own layout. Colours, type, spacing and every component come from the Shopify
   app's tokens.css and components.css; this file only places them on a standalone page. */

.dk-body{margin:0;background:var(--wb-page);color:var(--wb-ink);font:var(--wb-fw-body) var(--wb-fs-body)/var(--wb-lh-body) var(--wb-font);min-height:100vh;display:flex;flex-direction:column}
.dk-body :focus-visible{outline:none;box-shadow:0 0 0 2px var(--wb-surf),0 0 0 4px var(--wb-focus);border-radius:var(--wb-r-sm)}

.dk-demo{background:var(--wb-warn-bg);border-bottom:1px solid var(--wb-warn-line);color:var(--wb-ink);font-size:var(--wb-fs-help);text-align:center;padding:6px var(--wb-s4)}

.dk-top{background:var(--wb-surf);border-bottom:1px solid var(--wb-line);display:flex;align-items:center;gap:var(--wb-s6);padding:10px var(--wb-s6);flex-wrap:wrap}
.dk-top__brand{display:flex;align-items:center;gap:var(--wb-s2);flex:none;color:var(--wb-ink);text-decoration:none;font-weight:600;font-size:15px}
.dk-top__brand img{display:block;height:28px;width:auto}
.dk-nav{display:flex;gap:var(--wb-s1);flex:1;flex-wrap:wrap}
.dk-nav a{color:var(--wb-ink2);text-decoration:none;font-weight:500;padding:6px 10px;border-radius:var(--wb-r-sm)}
.dk-nav a:hover{background:var(--wb-surf2);color:var(--wb-ink)}
.dk-nav a[aria-current="page"]{color:var(--wb-brand-ink);background:var(--wb-brand-soft);font-weight:600}
.dk-top__user{display:flex;align-items:center;gap:var(--wb-s3);margin:0 0 0 auto}
.dk-top__email{color:var(--wb-ink2);font-size:var(--wb-fs-help);overflow-wrap:anywhere}

/* components.css colours every link in a page; a button that happens to be a link keeps the button's ink. */
.wb-page a.wb-btn:not(.-primary):not(.-ghost):not(.-destructive){color:var(--wb-ink)}
.wb-page a.wb-btn.-primary{color:var(--wb-btn-primary-fg)}
.dk-main{width:100%;max-width:1040px;margin:0 auto;flex:1}
.dk-narrow{width:100%;max-width:420px;margin:var(--wb-s8) auto 0;display:flex;flex-direction:column;gap:var(--wb-s4)}
.dk-stack{display:flex;flex-direction:column;gap:var(--wb-s3);margin:0}
.dk-stack>.wb-card{margin:0}
.dk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--wb-s4)}
.dk-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wb-s3)}
.dk-half{max-width:360px}
.dk-row-form{flex-direction:row;align-items:flex-end;gap:var(--wb-s3);margin:0}
.dk-row-form .wb-field{flex:1;max-width:360px}
.dk-inline{display:flex;gap:var(--wb-s2);align-items:center;margin:0}
.dk-inline .wb-select{max-width:220px}
.dk-box{display:flex;gap:var(--wb-s6);flex-wrap:wrap}
.dk-fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--wb-s1);min-width:0}
.dk-fieldset legend{padding:0;margin-bottom:var(--wb-s1)}
.dk-check{display:flex;gap:var(--wb-s2);align-items:center;padding:3px 0}
.dk-google{display:flex;justify-content:center;width:100%}
.dk-or{display:flex;align-items:center;gap:var(--wb-s3);color:var(--wb-ink3);font-size:var(--wb-fs-help)}
.dk-or::before,.dk-or::after{content:"";flex:1;border-top:1px solid var(--wb-line)}

/* Sign-in controls are taller than the app's dense 32px: this is the one screen used on a phone at the door. */
.dk-input-lg{height:44px;font-size:15px}
.dk-btn-lg{height:44px;font-size:14px}
.dk-code{letter-spacing:.3em;font-variant-numeric:tabular-nums;text-align:center;font-size:20px}
.dk-demo-card{border-style:dashed;background:var(--wb-warn-bg);border-color:var(--wb-warn-line);box-shadow:none}
.dk-demo-code{font-size:16px;letter-spacing:.15em}

.dk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--wb-s3);margin:0}
.dk-facts dt{font-size:var(--wb-fs-help);color:var(--wb-ink2)}
.dk-facts dd{margin:0;overflow-wrap:anywhere}

.dk-table{width:100%;border-collapse:collapse;font-size:var(--wb-fs-table);line-height:var(--wb-lh-table);font-variant-numeric:tabular-nums}
.dk-table th{text-align:left;font:var(--wb-fw-chip) var(--wb-fs-chip)/1.3 var(--wb-font);color:var(--wb-ink2);letter-spacing:.02em;text-transform:uppercase;background:var(--wb-surf2);padding:8px var(--wb-s4);border-bottom:1px solid var(--wb-line)}
.dk-table td{padding:10px var(--wb-s4);border-bottom:1px solid var(--wb-line);vertical-align:middle}
.dk-table tbody tr:last-child td{border-bottom:0}
.dk-table .dk-r{text-align:right}
.dk-caption{text-align:left;font-weight:600;padding:0 0 var(--wb-s2)}
.dk-plus{color:var(--wb-good)}
.dk-statements{margin-top:var(--wb-s4)}
.dk-topup{margin-top:var(--wb-s4)}
.dk-topup__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--wb-s3)}
.dk-statements__title{font-size:inherit;font-weight:600;margin:0 0 var(--wb-s1)}
.dk-statements__list{list-style:none;margin:var(--wb-s2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--wb-s2) var(--wb-s4)}
.wb-card:not(.-flush)>.dk-table{border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);border-collapse:separate;border-spacing:0;overflow:hidden}

.dk-rates{display:flex;flex-direction:column;gap:var(--wb-s2)}
.dk-rate{display:flex;align-items:center;gap:var(--wb-s3);padding:var(--wb-s3) var(--wb-s4);border:1px solid var(--wb-line-strong);border-radius:var(--wb-r-ctl);background:var(--wb-surf);cursor:pointer}
.dk-rate:hover{background:var(--wb-surf2)}
.dk-rate:has(input:checked){border-color:var(--wb-brand);background:var(--wb-brand-soft)}
.dk-rate input{accent-color:var(--wb-brand);width:16px;height:16px;flex:none;margin:0}
.dk-rate__name{display:flex;flex-direction:column;flex:1;min-width:0}
.dk-rate__price{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}

.dk-ops-brand{gap:var(--wb-s4)}
.dk-ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wb-s4)}
.dk-ops-block{border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);padding:var(--wb-s3);display:flex;flex-direction:column;gap:var(--wb-s2);min-width:0}
.dk-ops-block h4{margin:0;font:600 var(--wb-fs-body)/1.3 var(--wb-font)}
.dk-ops-form{display:flex;flex-wrap:wrap;gap:var(--wb-s2);align-items:flex-end;margin:0}
.dk-ops-form .wb-field{flex:1 1 120px}
.dk-ops-form .wb-field.-wide{flex:2 1 220px}
.dk-ops-form .wb-field.-narrow{flex:0 1 96px}
.dk-list{margin:0;padding-left:var(--wb-s5);display:flex;flex-direction:column;gap:2px}
.dk-tabs{display:flex;gap:var(--wb-s1);flex-wrap:wrap}
.dk-tabs a{padding:6px 12px;border-radius:var(--wb-r-pill);color:var(--wb-ink2);text-decoration:none;font-weight:500;border:1px solid var(--wb-line)}
.dk-tabs a:hover{background:var(--wb-surf2);color:var(--wb-ink);text-decoration:none}
.dk-tabs a[aria-current="page"]{background:var(--wb-brand-soft);border-color:var(--wb-brand);color:var(--wb-brand-ink);font-weight:600}
.dk-lines{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,2fr);gap:var(--wb-s2)}
.dk-file{padding:6px 0}
.dk-code-field{max-width:180px}
.dk-key{font-family:var(--wb-mono);font-size:16px;letter-spacing:.08em;background:var(--wb-surf2);border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);padding:var(--wb-s3);overflow-wrap:anywhere;user-select:all}
.dk-qr{display:block;margin:var(--wb-s2) 0;border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);background:#fff}
.dk-codes{list-style:none;margin:var(--wb-s3) 0;padding:var(--wb-s3);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--wb-s2);font-family:var(--wb-mono);font-size:16px;letter-spacing:.06em;background:var(--wb-surf2);border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl)}
.dk-steps{margin:0;padding-left:var(--wb-s5);display:flex;flex-direction:column;gap:var(--wb-s3)}
.dk-trail{margin:0;padding-left:var(--wb-s5);color:var(--wb-ink2);display:flex;flex-direction:column;gap:2px}
.dk-sample-label{align-items:flex-start;border-style:dashed}

@media (max-width:720px){
  .dk-top{padding:10px var(--wb-s3);gap:var(--wb-s3)}
  .dk-nav{order:3;flex-basis:100%}
  .dk-grid2,.dk-ops-grid{grid-template-columns:1fr}
  .dk-row-form{flex-direction:column;align-items:stretch}
  .dk-row-form .wb-field{max-width:none}
  .dk-table{display:block;overflow-x:auto}
  .dk-table td,.dk-table th{white-space:nowrap}
  .dk-narrow{margin-top:var(--wb-s4)}
}
.dk-address{font-style:normal;line-height:1.6}