/* The site's pages (foldrender.dev: home, Artifacts, privacy, guides, 404) in
   the desk's look, design/desk/README.md:
     colour  only desk.css's variables (generated from design/desk/tokens.json);
             brand for the primary button and the mark, link for links, sig for
             "look at this", everything else grey. No value is written here.
     type    Archivo with the system's Chinese face; JetBrains Mono for code and
             commands; 400 and 500 only; three levels: main 500, body 400,
             faint 400/13 grey. 15 px, 16 on a phone.
     blocks  no rules and no frames: a block is a sheet a step lighter than the
             page, 8 px apart; state is a 2 px stripe on its left; what floats
             has the one shadow (--lift).
     corners square; the primary button has one 45 degree cut, bottom right.
   It follows the system's light or dark. scripts/site-look-browser.mjs measures
   every page against the tokens and fails on anything else. */

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:400 15px/1.6 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,pre,blockquote{margin:0}
h1,h2,h3,h4,h5,h6,b,strong,th,dt{font-weight:500}
em,i,cite,dfn{font-style:normal}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
img{height:auto}
code,kbd,samp,pre{font-family:var(--mono);font-size:13px;font-variant-ligatures:none}
code{background:var(--bg-2);padding:1px 5px;overflow-wrap:anywhere}
pre{background:var(--term-bg);color:var(--term-text);padding:12px 14px;overflow-x:auto;line-height:1.55;white-space:pre}
pre code{background:none;padding:0;color:inherit;overflow-wrap:normal}
::selection{background:var(--bg-3);color:var(--fg)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.doc .wrap{max-width:840px}
.wrap>.bar{padding-left:0;padding-right:0}
.f{font-size:13px;color:var(--fg-3)}
.m{font-weight:500}

/* the bar: the mark and the name, then a few faint words */
.bar{height:52px;display:flex;align-items:center;gap:24px;padding:0 24px;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:500;text-decoration:none;white-space:nowrap;margin-right:auto}
.mark{display:inline-block;flex:none;width:22px;height:22px}
.mark svg{width:100%;height:100%}
.mk-tile{fill:var(--logo-tile)}.mk-front{fill:var(--logo-front)}.mk-back{fill:var(--logo-back)}
.bar a:not(.brand){color:var(--fg-3);text-decoration:none;white-space:nowrap}
.bar a:not(.brand):hover,.bar a[aria-current]{color:var(--fg)}
.bar .links{display:flex;align-items:center;gap:24px}
.bar .lang-switch-wrap{display:flex;align-items:center;gap:16px;order:1}
.bar .nav-account{order:1}
.bar .nav-account a{color:var(--fg)}
.menu{position:relative;display:none;order:2}
.menu>summary{list-style:none;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;color:var(--fg);font-weight:500;letter-spacing:1px;-webkit-user-select:none;user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"⋯";font-size:20px;line-height:1}
.menu[open]>summary{background:var(--bg-2)}
.menu>div{position:absolute;right:0;top:40px;min-width:200px;background:var(--bg-1);box-shadow:var(--lift);padding:6px 0;display:flex;flex-direction:column}
.menu>div a{padding:10px 18px}
.menu>div a:hover{background:var(--bg-2)}
@media (max-width:799px){
  .bar{gap:12px;padding:0 16px}
  .bar .links{display:none}
  .menu{display:block}
}

/* buttons: the primary is the brand's, with the mark's fold cut off its corner */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:0;background:transparent;color:var(--fg);font:500 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--brand);color:var(--on-brand);padding-right:22px;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--on-brand),inset 0 0 0 4px var(--fg)}
.btn .v{font-weight:400;font-size:13px}
.btn-quiet{background:var(--bg-3)}
.btn-quiet:hover{background:var(--line-2)}
.btn-ghost:hover{background:var(--bg-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
@media (max-width:599px){.btn{min-height:44px}}

/* a page's head */
.hero{padding:56px 0 8px}
.eyebrow,.sec-label,.crumb{font-size:13px;color:var(--fg-3);margin-bottom:12px}
.crumb a{color:var(--fg-3)}
h1{font-size:36px;line-height:1.2;max-width:22ch}
.doc h1{font-size:30px;max-width:none}
h1 em,h2 em{color:var(--fg-2)}
.lede{font-size:17px;line-height:1.55;max-width:62ch;margin-top:16px}
.updated,.meta-line{font-size:13px;color:var(--fg-3);margin-top:12px;max-width:72ch}
@media (max-width:599px){
  .hero{padding-top:32px}
  h1,.doc h1{font-size:28px;line-height:1.25}
  .lede{font-size:16px}
}

/* the command an agent's machine runs */
.term{display:flex;align-items:baseline;gap:10px;background:var(--term-bg);color:var(--term-text);padding:12px 14px;font:400 13px/1.55 var(--mono);overflow-x:auto;margin-top:16px;max-width:100%}
.term .p,.term .label{color:var(--term-dim);flex:none;font-family:var(--sans)}
.term code{background:none;padding:0;color:inherit;white-space:nowrap;overflow-wrap:normal}

/* sections and their blocks */
section{padding-top:64px}
.doc section,.doc article{padding-top:40px}
h2{font-size:24px;line-height:1.3;max-width:30ch}
.doc h2{font-size:20px;max-width:none;margin-bottom:12px}
h3,h4{font-size:15px;line-height:1.4;margin-bottom:6px}
.sec-lede{max-width:62ch;margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:24px}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.sheet,.card{background:var(--bg-1);padding:20px 24px;position:relative;min-width:0}
.sheet p+p,.card p+p{margin-top:8px}
.sheet .go,.card .go{display:inline-block;margin-top:12px}
.no,.n{font-size:13px;color:var(--fg-3);margin-bottom:8px}
.tag,.badge{font-size:13px;color:var(--fg-3)}
.stripe::before,.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig)}
.note{background:var(--bg-1);padding:14px 20px;position:relative;margin-top:16px;max-width:72ch}
.shot{background:var(--bg-1);margin-top:32px;overflow:hidden}
.shot figcaption{font-size:13px;color:var(--fg-3);padding:10px 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{background:var(--bg-1);padding:4px 10px;font-size:13px}
a.chip{color:var(--fg);text-decoration:none;padding:8px 12px}
a.chip:hover{background:var(--bg-2)}
.link-card{display:block;color:var(--fg);text-decoration:none}
.link-card:hover{background:var(--bg-2)}
.link-card p{color:var(--fg-2)}
.sheet .term,.card .term{margin-top:12px}

/* long text */
.doc p,.doc li{max-width:72ch}
.doc p+p,.doc p+ul,.doc ul+p,.doc p+ol,.doc ol+p{margin-top:12px}
ul,ol{padding-left:22px}
li+li{margin-top:6px}
.limits{margin-top:12px}
.steps{list-style:none;counter-reset:step;padding:0;margin-top:20px}
.steps>li{counter-increment:step;background:var(--bg-1);padding:16px 20px 16px 56px;position:relative;max-width:none}
.steps>li+li{margin-top:8px}
.steps>li::before{content:counter(step);position:absolute;left:20px;top:16px;color:var(--fg-3);font-weight:500}
.tablewrap{overflow-x:auto;margin-top:16px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;text-align:left;vertical-align:top}
thead th{color:var(--fg-3);font-weight:400;font-size:13px}
tbody tr:nth-child(odd){background:var(--bg-1)}
.faq dt{margin-top:16px;font-weight:500}
.faq dd{margin-top:4px;max-width:72ch}
.tablewrap table{min-width:640px}

/* questions that open */
.faq details{background:var(--bg-1)}
.faq details+details{margin-top:8px}
details>summary{cursor:pointer}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 20px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--fg-3);font-weight:400;flex:none}
.faq details[open]>summary::after{content:"–"}
.faq details>:not(summary){padding:0 20px 16px;max-width:76ch}
.faq details>:not(summary)+:not(summary){padding-top:0}

/* the Artifacts page: a page becoming a link, the prompt to paste, commands to copy */
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:32px}
.flow>li{background:var(--bg-1);padding:16px 20px;margin:0;display:flex;flex-direction:column;gap:2px}
.flow .t{font-weight:500}
.flow .s{font-size:13px;color:var(--fg-3)}
@media (max-width:599px){.flow{grid-template-columns:1fr}}
.prompt{margin-top:24px;max-width:760px}
.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--term-bg);color:var(--term-dim);padding:8px 8px 0 14px;font-size:13px}
.prompt pre{white-space:pre-wrap;overflow-wrap:anywhere}
.steps.labelled>li{padding-left:20px}
.steps.labelled>li::before{content:none}
.cmd{display:flex;align-items:stretch;margin-top:12px;max-width:100%}
.cmd pre{flex:1;min-width:0}
.cmd-row{display:flex;background:var(--term-bg)}
.example,.plan,.files{margin-top:20px;max-width:72ch}
.copy{flex:none;align-self:stretch;border:0;background:var(--bg-3);color:var(--fg);padding:0 14px;font:500 13px var(--sans);cursor:pointer;min-height:36px}
.copy:hover{background:var(--line-2)}
.copy .done{color:var(--fg)}
.copy .fail{color:var(--danger)}

/* the foot */
footer{padding:64px 0 40px;font-size:13px;color:var(--fg-3)}
footer a{color:var(--fg-3)}
footer a:hover{color:var(--fg)}
footer .brand{margin:0 0 8px;font-size:15px}
footer p+p{margin-top:6px}

/* HarmonyOS has no Google Play: a page that marks it (/share, in its <head>)
   does not show the store's buttons there. Everywhere else they stay. */
html[data-os="harmony"] [data-store="google-play"] { display: none; }