/* v4.1.13. The guides ("How to use Restoo", "Advanced techniques"), as docs-render.js draws them.

   v4.1.17. EVERY rule here is under .guide, the root mount() draws: the dashboard loads this file
   for its Learn sub-pages, and nothing here may touch its own styles (the public page's button
   reset in page.css already caused one bug). The public page's tokens, body and header are
   docs-page.css. The tokens used here are the app's own names, so the dashboard's theme applies. */
.guide{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px}
/* Inside the dashboard: below no header of its own (the dashboard's scrolls with .main above
   600 px, and is its top bar, 56 px under the safe area, on a phone), and its drawer above the
   dashboard's bars. */
.guide.guide-embedded{--docs-head:0px}
.guide.guide-embedded .docs-also{margin-top:0}
@media (max-width:600px){
  .guide.guide-embedded{--docs-head:calc(56px + env(safe-area-inset-top, 0px))}
}
@media (max-width:900px){
  .guide.guide-embedded .docs-scrim{z-index:29}
  .guide.guide-embedded .docs-index{z-index:30}
}
/* Behind the index while it is open as a drawer (a phone): a tap on it closes the index. */
.guide .docs-scrim{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.42)}
@media (min-width:901px){
  .guide .docs-scrim{display:none}
}
.guide .docs-search{flex:0 1 320px;min-width:0;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--input,var(--raised));color:var(--ink);font:inherit;font-size:var(--t-13)}
.guide .docs-menu{display:none}
/* v4.1.17. Contents (on a phone), the search and, inside the dashboard, the tutorial: one row
   above the sections. */
.guide .docs-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:24px 0 0}
.guide .docs-index{position:sticky;top:calc(var(--docs-head,64px) + 16px);align-self:start;max-height:calc(100vh - var(--docs-head,64px) - 32px);overflow:auto}
.guide .docs-index-title{margin:0 0 8px;font-size:var(--t-12);font-weight:600;color:var(--ink-3)}
.guide .docs-index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.guide .docs-index a{display:block;padding:4px 8px;border-radius:var(--r-input);color:var(--ink-2);font-size:var(--t-13)}
.guide .docs-index a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.guide .docs-main{min-width:0}
.guide .docs-main h1{margin:0;font-family:var(--display);font-size:var(--t-32);letter-spacing:-.025em;line-height:1.15}
.guide .docs-lede{margin:8px 0 0;color:var(--ink-2);font-size:var(--t-16)}
.guide .docs-none{margin:32px 0 0;color:var(--ink-2)}
/* v4.1.16. The link to the other guide, under the lede. */
.guide .docs-also{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;font-size:var(--t-14);font-weight:600}
.guide .docs-also a{color:var(--blue-text)}
/* (review 5) Below the header, at whatever height it has wrapped to (--docs-head, docs.js). */
.guide .docs-section{margin-top:64px;scroll-margin-top:calc(var(--docs-head,64px) + 16px)}
.guide .docs-section h2{margin:0 0 16px;font-family:var(--display);font-size:var(--t-24);letter-spacing:-.02em;line-height:1.2}
.guide .docs-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px;align-items:start}
.guide .docs-body p,.guide .docs-body li{max-width:64ch}
.guide .docs-intro{margin:0;color:var(--ink)}
.guide .docs-points{margin:16px 0 0;padding:0;list-style:none;counter-reset:pt;display:flex;flex-direction:column;gap:12px}
/* (v4.1.16) Direct children only: a point's own short list (.docs-sub) is not numbered. */
.guide .docs-points > li{position:relative;padding-left:32px;counter-increment:pt}
.guide .docs-points > li::before{content:counter(pt);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--blue);color:var(--on-blue);font-size:var(--t-12);font-weight:600}
.guide .docs-sub{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.guide .docs-problems{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.guide .docs-more{margin:16px 0 0;color:var(--ink-2)}
.guide mark{background:var(--blue-wash);color:var(--ink);border-radius:4px;padding:0 2px}
/* ===================================================================== the screens
   Inert pictures of the app, drawn with its own stylesheets (controls.css: .btn, .chip, .seg;
   library-ui.css: .lib-grid, .lib-tile; styles-ui.css: .st-card). What only the dashboard's own
   page styles is drawn here, lightly, with the same tokens. */
.guide .docs-frame{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line-card);border-radius:var(--r-card);
  background:var(--surface);pointer-events:none;user-select:none;min-width:0;overflow:hidden}
.guide .mk-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--raised);border:1px solid var(--line-card);
  border-radius:var(--r-tile);min-width:0}
.guide .mk-head,.guide .mk-row,.guide .mk-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.guide .mk-head b{font-family:var(--display);font-size:var(--t-14)}
.guide .mk-head em{font-style:normal;color:var(--ink-3);font-size:var(--t-12)}
.guide .mk-title{font-family:var(--display);font-size:var(--t-16)}
.guide .mk-sub{margin:0;color:var(--ink-2);font-size:var(--t-12)}
.guide .mk-n{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--blue);
  color:var(--on-blue);font-size:var(--t-11);font-weight:600}
.guide .mk-bar{height:4px;border-radius:var(--r-pill);background:var(--well);overflow:hidden}
.guide .mk-bar span{display:block;width:50%;height:100%;background:var(--good)}
.guide .mk-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-13);color:var(--ink-3)}
.guide .mk-steps li{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.guide .mk-steps li::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--line-2)}
.guide .mk-steps li.done{color:var(--ink)}
.guide .mk-steps li.done::before{background:var(--good)}
.guide .mk-steps li.current{color:var(--ink);font-weight:600}
.guide .mk-steps li.current::before{background:var(--blue)}
.guide .mk-steps li > .btn,.guide .mk-steps li > .mk-pair{margin-left:auto}
.guide .mk-pair{display:inline-flex;align-items:center;gap:8px}
.guide .mk-numbered{margin:0;padding-left:20px;font-size:var(--t-12);color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.guide .mk-link{color:var(--blue-text);font-size:var(--t-12)}
.guide .mk-label{font-size:var(--t-12);font-weight:600;color:var(--ink-2)}
.guide .mk-input{height:32px;border:1px solid var(--line-2);border-radius:var(--r-input);background:var(--input,var(--raised))}
.guide .mk-balance{gap:4px}
.guide .mk-amount{font-family:var(--display);font-weight:600;font-size:var(--t-20);font-variant-numeric:tabular-nums}
.guide .mk-nav{display:flex;align-items:center;gap:8px}
.guide .mk-pill{padding:4px 12px;border-radius:var(--r-pill);background:var(--blue-wash);color:var(--blue-text);font-size:var(--t-12);font-weight:600}
.guide .mk-gpus{display:flex;flex-direction:column;gap:4px}
.guide .mk-gpu{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line-card);border-radius:var(--r-input);font-size:var(--t-12)}
.guide .mk-gpu.on{border-color:var(--blue)}
.guide .mk-gpu .mono{margin-left:auto}
.guide .mk-note{color:var(--ink-3)}
.guide .mk-radio{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2)}
.guide .mk-gpu.on .mk-radio{border-color:var(--blue);background:var(--blue)}
.guide .mk-switch{width:28px;height:16px;border-radius:var(--r-pill);background:var(--line-2)}
.guide .mk-switch.on{background:var(--blue)}
.guide .mk-text{padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-input);background:var(--input,var(--raised));
  color:var(--ink-3);font-size:var(--t-12);min-height:64px}
.guide .mk-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border:1px dashed var(--line-2);
  border-radius:var(--r-input);font-size:var(--t-12);color:var(--ink-2);text-align:center}
.guide .mk-drop b{color:var(--ink)}
.guide .mk-lib,.guide .mk-lib-row{display:flex;align-items:flex-start;gap:8px;min-width:0}
.guide .docs-frame .lib-grid{--lib-tile-min:88px;--lib-gap:8px;flex:1;min-width:0}
.guide .docs-frame .lib-tile-meta{padding:8px}
.guide .mk-addons{display:flex;align-items:flex-start;gap:8px}
.guide .mk-addon{width:160px;flex:none}
.guide .mk-pic{display:block;background:linear-gradient(160deg,var(--well),var(--sunken,var(--well)))}
.guide .mk-addon-foot{display:flex;flex-direction:column;gap:2px;padding:8px 12px;font-size:var(--t-12);color:var(--ink-3)}
.guide .mk-list{margin:0;padding-left:20px;font-size:var(--t-12);color:var(--ink-2)}
/* v4.1.16. The Studio's Video page, for "Advanced techniques" (docs-adv-mock.js). */
/* A box someone typed in. In a row it takes the room left; in a column, only its own height. */
.guide .mk-field{min-width:0;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-input);
  background:var(--input,var(--raised));color:var(--ink);font-size:var(--t-12);overflow-wrap:anywhere}
.guide .mk-row > .mk-field,.guide .mk-row > .mk-text{flex:1 1 140px}
.guide .docs-frame .chip.mk-on{background:var(--blue-wash);color:var(--blue-text)}
.guide .mk-dline{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line-card);border-radius:var(--r-input)}
.guide .mk-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.guide .mk-slots > .mk-pair{min-width:0}
.guide .mk-slot{position:relative;flex:1;min-width:0;min-height:72px;border-radius:var(--r-input);
  background:linear-gradient(160deg,var(--well),var(--sunken,var(--well)))}
.guide .mk-slot-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;
  background:none;border:1px dashed var(--line-2)}
.guide .mk-slot-tag{position:absolute;left:6px;top:6px;padding:1px 6px;border-radius:var(--r-pill);background:var(--raised);
  color:var(--ink);font-size:var(--t-11);font-weight:600}
.guide .mk-slot-badge{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:var(--r-pill);background:var(--raised);
  color:var(--ink-2);font-size:var(--t-11)}
.guide .mk-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1;min-width:0}
.guide .mk-ref{display:flex;flex-direction:column;gap:6px;min-width:0}
.guide .mk-ref-pic{position:relative;height:64px;border-radius:var(--r-input)}
.guide .mk-speaks{display:flex;align-items:center;gap:6px;font-size:var(--t-12);color:var(--ink-2)}
.guide .mk-radio.on{border-color:var(--blue);background:var(--blue)}
.guide .mk-sets{display:flex;flex-wrap:wrap;gap:12px}
.guide .mk-set{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.guide .mk-set > .mk-n{align-self:flex-start}
.guide .mk-pill2{display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--t-12);color:var(--ink)}
.guide .mk-strength .mono{margin-left:auto;font-size:var(--t-12)}
.guide .mk-slider{height:4px;border-radius:var(--r-pill);background:var(--well)}
.guide .mk-slider span{display:block;width:33%;height:100%;border-radius:inherit;background:var(--blue)}
.guide .mk-marks{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-11);color:var(--ink-3)}
.guide .mk-marks > span{display:flex;flex-direction:column;align-items:center}
.guide .mk-trig{font-size:var(--t-12);color:var(--ink-2)}
.guide .mk-dots{width:32px;justify-content:center}
.guide .mk-dots::before{content:"\22EE";font-weight:700}
.guide .mk-menu{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:240px;padding:6px;border:1px solid var(--line-card);
  border-radius:var(--r-input);background:var(--raised);box-shadow:var(--shadow);font-size:var(--t-12)}
.guide .mk-menu > span{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;border-radius:8px}
.guide .mk-menu hr{width:100%;margin:2px 0;border:0;border-top:1px solid var(--line-card)}
.guide .mk-menu-row{justify-content:flex-end}
/* ===================================================================== narrow */
@media (max-width:1100px){
  .guide .docs-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .guide{grid-template-columns:minmax(0,1fr);gap:0}
  .guide .docs-menu{display:inline-flex}
  /* v4.1.17. Where the index is a drawer, Contents and the search stay in reach: the row is
     sticky under the header, and a section reached from the index stops below the row. */
  .guide .docs-tools{position:sticky;top:var(--docs-head,64px);z-index:4;margin-top:16px;padding:8px 0;background:var(--bg)}
  .guide .docs-section{scroll-margin-top:calc(var(--docs-head,64px) + 72px)}
  .guide .docs-index{position:fixed;top:0;left:0;bottom:0;z-index:10;width:min(300px,85vw);max-height:none;padding:24px 16px;
    background:var(--raised);border-right:1px solid var(--line-card);transform:translateX(-100%);visibility:hidden;
    transition:transform var(--dur-enter) var(--ease),visibility 0s linear var(--dur-enter)}
  .guide .docs-index.open{transform:none;visibility:visible;transition:transform var(--dur-enter) var(--ease)}
}
@media (max-width:600px){
  .guide .docs-search{flex:1 1 140px}
  .guide .docs-main h1{font-size:var(--t-24)}
  .guide .docs-section{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
  .guide .docs-index,.guide .docs-index.open{transition:none}
}