/* Uteer apps on Salla: the few layout pieces a merchant page needs on top of kit.css (Daleel Chat's panel.css, copied as it is).
   Tokens only: no colour value may be written here (test/ui.test.js checks). Sizes follow the kit: 8 / 12 / 16 / 24 px, 8 and 12 px radius. */
.num{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}
.muted{color:rgb(var(--slate-11))}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.fields label{display:grid;gap:4px}
.field-hint{font-size:12px;line-height:16px;font-weight:420;color:rgb(var(--slate-11))}
form.inline{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
td .btn.sm{margin-block:-4px}
/* position:relative: a visually hidden label (.vh, position:absolute) inside a wide table must be clipped with the table, or it
   widens the whole page on a phone */
.tablewrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:560px}
.price-old{text-decoration:line-through;color:rgb(var(--slate-10))}
.price-new{font-weight:500;color:rgb(var(--slate-12))}
fieldset.card{min-width:0;border:0}
fieldset.card h2,fieldset.card h3{margin-top:0}
.chips label{position:relative;display:inline-flex;width:auto;gap:0;font-weight:420}
.card h2:first-child{margin-top:0}
.card.variant{background:rgb(var(--solid-1))}
.stack-gap{display:grid;gap:16px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.switch-row p{margin:0}
@media (max-width:560px){
  main.simple{padding:16px 12px}
  .fields{grid-template-columns:1fr}
}

/* —— public pages of an app (what it is, privacy, terms, support): core/ui/page.js publicPage(). Tokens only, like the rest.
   The app's own accent comes from the tokens too: data-accent="gold" uses the amber ramp. —— */
body.site{background:rgb(var(--background-color));height:auto;min-height:100%}
.site-wrap{width:100%;max-width:960px;margin:0 auto;padding:0 24px}
.site-head{border-bottom:1px solid rgb(var(--border-weak));background:rgb(var(--solid-2))}
.site-head .site-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:wrap}
.site-brand{display:inline-flex;align-items:center;gap:12px;color:rgb(var(--slate-12));font-size:20px;line-height:28px;font-weight:600;text-decoration:none}
.site-brand:hover{text-decoration:none}
.site-brand img{display:block;width:40px;height:40px;border-radius:10px}
.site-nav{display:flex;flex-wrap:wrap;gap:4px}
.site-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;color:rgb(var(--slate-11));text-decoration:none}
.site-nav a:hover{background:rgba(var(--alpha-2));color:rgb(var(--slate-12));text-decoration:none}
.site-nav a[aria-current=page]{background:rgba(var(--alpha-2));color:rgb(var(--slate-12));font-weight:500}
.site-main{padding-top:48px;padding-bottom:64px}
.site-main h1{font-size:36px;line-height:48px;font-weight:600;margin:0 0 16px}
.site-main h2{font-size:22px;line-height:32px;font-weight:600;margin:48px 0 16px}
.site-main h3{font-size:16px;line-height:24px;font-weight:600;margin:0 0 8px}
.site-main p,.site-main li{font-size:16px;line-height:1.85}
.site-lede{max-width:680px;font-size:18px;line-height:1.9;color:rgb(var(--slate-11))}
.site-eyebrow{display:inline-flex;align-items:center;min-height:28px;margin:0 0 16px;padding:0 10px;border-radius:999px;background:rgb(var(--slate-3));color:rgb(var(--slate-11));font-size:13px;line-height:20px;font-weight:500}
.site[data-accent=gold] .site-eyebrow{background:rgb(var(--amber-3));color:rgb(var(--amber-11))}
.site-hero{padding:16px 0 8px}
.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.site-grid>li,.site-grid>div{margin:0;padding:20px 24px;border-radius:12px;background:rgb(var(--solid-2));outline:1px solid rgba(var(--border-container));outline-offset:-1px;box-shadow:var(--daleel-card-shadow)}
.site-grid p{margin:0;font-size:15px;line-height:1.8}
.site-steps{counter-reset:step;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.site-steps li{counter-increment:step;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;margin:0}
.site-steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgb(var(--slate-3));color:rgb(var(--slate-12));font-weight:600;font-variant-numeric:tabular-nums}
.site[data-accent=gold] .site-steps li::before{background:rgb(var(--amber-3));color:rgb(var(--amber-11))}
.site-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}
.site-price b{font-size:32px;line-height:40px;font-weight:600;font-variant-numeric:tabular-nums;color:rgb(var(--slate-12))}
.site-doc{max-width:760px}
.site-doc h2{font-size:20px;line-height:28px;margin:40px 0 12px}
.site-doc ul{padding-inline-start:24px}
.site-foot{border-top:1px solid rgb(var(--border-weak));padding:24px 0 40px;color:rgb(var(--slate-10));font-size:14px;line-height:1.8}
.site-foot a{color:rgb(var(--slate-11))}
.site-foot p{margin:0 0 4px;font-size:14px;color:inherit}
@media (max-width:560px){
  .site-wrap{padding:0 16px}
  .site-main{padding-top:32px;padding-bottom:48px}
  .site-main h1{font-size:28px;line-height:40px}
  .site-lede{font-size:16px}
}