/* Help (billine.io/help), on top of site.css. Linked only from help pages, which also
   declare color-scheme "light dark": help follows the device's appearance, the rest of
   the site stays light. Dark is Billine's night with paper-coloured text, the same
   values the app uses, so a page read at night looks like the app beside it.

   Layout: chapters | the page in a ~65-character column | "On this page" on a Mac;
   one column on a phone, with the chapters folded into "Contents". */
:root{
  --help-mark:#DCEAEC;       /* recognised words in a capture example */
  --help-chip:#EDF1F0;
  --help-note:#EDF1F0;
  --help-note-tip:#E3EEDD;
  --help-note-tip-ink:#3F6B3A;
  --help-note-pro:#DCEAEC;
  --help-note-warn:#F6E3DC;
  --help-kbd:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0D1211;
    --surface:#141B1A;
    --sunken:#111817;
    --ink:#E4EBE9;
    --soft:#A6B2B0;
    --meta:#8A9796;
    --rule:#23302E;
    --verdigris:#74C6CE;      /* links and accents read as lume on night */
    --signal:#E08464;
    --help-mark:#143436;
    --help-chip:#1A2422;
    --help-note:#141B1A;
    --help-note-tip:#152214;
    --help-note-tip-ink:#9CC08A;
    --help-note-pro:#102B2E;
    --help-note-warn:#2E1A13;
    --help-kbd:#1A2422;
  }
  .btn-ink{background:var(--ink);color:var(--night)}
}

.help-body{padding-block:clamp(40px,6vw,80px) clamp(64px,8vw,112px)}
.page-title .eyebrow a{color:inherit;text-decoration:none}
.page-title .eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}

/* Search: a plain GET form */
.help-search{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);max-width:560px}
.help-search:focus-within{border-color:var(--verdigris)}
.help-search svg{width:18px;height:18px;flex:none;color:var(--meta)}
.help-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:8px 0;outline:none}
.help-search input::placeholder{color:var(--meta)}
.help-search input::-webkit-search-cancel-button{display:none}
.help-search button{flex:none;border:0;border-radius:999px;padding:9px 16px;background:var(--ink);color:var(--paper);font:inherit;font-size:14px;font-weight:600;cursor:pointer}

/* Home and search results */
.help-home{display:grid;gap:clamp(36px,5vw,56px)}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.help-card{display:grid;gap:14px;align-content:start;padding:24px;border:1px solid var(--rule);border-radius:20px;background:var(--surface)}
.help-card-head{display:grid;gap:6px}
.help-card h2{font-size:20px;letter-spacing:-.015em}
.help-card h2 a{text-decoration:none}
.help-card h2 a:hover{color:var(--verdigris)}
.help-card p{color:var(--soft);font-size:15px}
.help-card ol{margin:0;padding:0;list-style:none;display:grid;gap:2px;border-top:1px solid var(--rule);padding-top:10px}
.help-card ol a{display:block;padding:5px 0;color:var(--verdigris);text-decoration:none;font-size:15.5px}
.help-card ol a:hover{text-decoration:underline;text-underline-offset:3px}
.help-empty{color:var(--soft);max-width:40em}

.help-list{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--rule)}
.help-list a{display:grid;gap:4px;padding:18px 4px;border-bottom:1px solid var(--rule);text-decoration:none}
.help-list a:hover strong{color:var(--verdigris)}
.help-list strong{font-size:18px;font-weight:600;letter-spacing:-.01em}
.help-list-summary{color:var(--soft);font-size:15.5px}

.help-kind{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.help-kind-guide{color:var(--verdigris)}

.help-stuck{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px 24px;border-radius:20px;background:var(--sunken)}
.help-stuck div{display:grid;gap:4px}
.help-stuck h2{font-size:19px}
.help-stuck p{color:var(--soft);font-size:15px}

/* A chapter or page: three columns where there's room */
.help-layout{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.help-layout.has-toc{grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,200px)}
.help-side{position:sticky;top:24px;display:grid;gap:24px;max-height:calc(100vh - 48px);overflow:auto;padding-bottom:12px}
.help-side .help-search{padding:4px 4px 4px 12px}
.help-side .help-search input{font-size:15px;padding:6px 0}
.help-side .help-search button{display:none}
.help-main{min-width:0;display:grid;gap:32px;align-content:start}
.help-contents{display:none}

.help-chapters{display:grid;gap:18px}
.help-chapter{display:grid;gap:6px}
.help-chapter-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);text-decoration:none}
.help-chapter-title:hover,.help-chapter-title[aria-current]{color:var(--ink)}
.help-chapter ol{margin:0;padding:0;list-style:none;display:grid;border-left:1px solid var(--rule)}
.help-chapter ol a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;color:var(--soft);text-decoration:none}
.help-chapter ol a:hover{color:var(--ink)}
.help-chapter ol a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--verdigris)}

.help-toc{position:sticky;top:24px;display:grid;gap:12px}
.help-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.help-toc a{display:block;padding:4px 0;font-size:14px;color:var(--soft);text-decoration:none}
.help-toc a:hover{color:var(--ink)}

@media (max-width:1180px){
  .help-layout.has-toc{grid-template-columns:minmax(0,230px) minmax(0,1fr)}
  .help-toc{display:none}
}
@media (max-width:860px){
  .help-layout,.help-layout.has-toc{grid-template-columns:minmax(0,1fr);gap:28px}
  .help-side{display:none}
  .help-contents{display:block;border:1px solid var(--rule);border-radius:16px;background:var(--surface)}
  .help-contents summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .help-contents summary::-webkit-details-marker{display:none}
  .help-contents summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--meta);border-bottom:2px solid var(--meta);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  .help-contents[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .help-contents .help-chapters{padding:4px 18px 18px}
}

/* The page */
.help-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.help-badge{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--rule);color:var(--soft)}
.help-badge-pro{border-color:transparent;background:var(--help-note-pro);color:var(--verdigris)}
/* A page with a how-to video: the badge links to the player; in lists, a quiet mark. */
.help-badge-video{display:inline-flex;align-items:center;gap:6px;color:var(--verdigris);border-color:var(--verdigris);text-decoration:none}
.help-badge-video:hover{background:var(--verdigris);color:var(--paper)}
.help-badge-video time{font-variant-numeric:tabular-nums}
.help-video-icon{flex:none;width:7px;height:9px}
.help-video-mark{display:inline-flex;align-items:center;gap:5px;margin-left:10px;vertical-align:.12em;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--verdigris);font-variant-numeric:tabular-nums;white-space:nowrap}
.help-related .help-video-mark{display:inline-flex;color:var(--verdigris);font-size:11px}
.help-video{scroll-margin-top:24px}

.help-prose{display:grid;gap:18px;max-width:40em;font-size:17px;line-height:1.65}
.help-prose > *{margin:0}
.help-prose h2{font-size:clamp(23px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15;margin-top:30px}
.help-prose h3{font-size:18px;margin-top:8px}
.help-prose p,.help-prose li{color:var(--soft)}
.help-prose strong{color:var(--ink);font-weight:600}
.help-prose a{color:var(--verdigris);text-underline-offset:3px}
.help-prose ul,.help-prose ol{padding-left:1.3em;display:grid;gap:8px}
.help-prose li::marker{color:var(--meta)}
/* Numbered steps: the number in a circle, the step beside it */
.help-prose ol{list-style:none;padding:0;counter-reset:step;gap:14px}
/* The number sits outside the text, so bold words, code and links inside a step flow as
   one line of text (a grid here made each of them a column of its own). */
.help-prose ol > li{counter-increment:step;position:relative;padding-left:40px;min-height:28px}
.help-prose ol > li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunken);color:var(--ink);font-family:var(--mono);font-size:13px;font-weight:600}
.help-prose code{font-family:var(--mono);font-size:.84em;background:var(--help-chip);border:1px solid var(--rule);padding:1px 6px;border-radius:6px;color:var(--ink);white-space:nowrap}
.help-prose kbd{font-family:var(--mono);font-size:.82em;min-width:1.9em;display:inline-block;text-align:center;padding:1px 6px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;background:var(--help-kbd);color:var(--ink)}

.help-prose .table-wrap{overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.help-prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.help-prose th,.help-prose td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
.help-prose th{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);border-bottom-color:var(--ink)}
.help-prose td{color:var(--soft)}
.help-prose td code{white-space:nowrap}
.help-prose td:first-child{white-space:nowrap;color:var(--ink)}
/* On a phone a three-column table becomes one block per row: the syntax, then the rest. */
@media (max-width:600px){
  .help-prose .table-wrap{overflow:visible;margin:0;padding:0}
  .help-prose table,.help-prose tbody,.help-prose tr,.help-prose td{display:block}
  .help-prose thead{display:none}
  .help-prose tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .help-prose td{border:0;padding:3px 0}
  .help-prose td:first-child{white-space:normal}
  .help-prose td:last-child{font-size:14.5px}
}

/* Notes: tip, good to know, Billine Pro, careful */
.help-prose .markdown-alert{display:grid;gap:6px;padding:16px 20px;border-radius:16px;background:var(--help-note)}
.help-prose .markdown-alert p{color:var(--ink);font-size:16px}
.help-prose .markdown-alert-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)!important}
.help-prose .markdown-alert-tip{background:var(--help-note-tip)}
.help-prose .markdown-alert-tip .markdown-alert-title{color:var(--help-note-tip-ink)!important}
.help-prose .markdown-alert-important{background:var(--help-note-pro)}
.help-prose .markdown-alert-important .markdown-alert-title{color:var(--verdigris)!important}
.help-prose .markdown-alert-warning,.help-prose .markdown-alert-caution{background:var(--help-note-warn)}
.help-prose .markdown-alert-warning .markdown-alert-title,.help-prose .markdown-alert-caution .markdown-alert-title{color:var(--signal)!important}

/* Capture examples, drawn like the app's capture field */
.capture{display:grid;gap:0;border:1px solid var(--rule);border-radius:18px;background:var(--surface);overflow:hidden}
.capture-line{padding:16px 18px;border-bottom:1px solid var(--rule);overflow-x:auto}
.capture-line code{background:none;border:0;padding:0;font-size:15px;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.capture-line mark{background:var(--help-mark);color:var(--ink);border-radius:5px;padding:1px 3px;margin:0 -1px}
.capture figcaption{display:grid;gap:10px;padding:14px 18px 16px;background:var(--sunken)}
.capture-title{font-size:15.5px;color:var(--ink)!important}
.capture-title span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);margin-right:6px}
.chips{list-style:none;margin:0;padding:0!important;display:flex!important;flex-wrap:wrap;gap:6px!important}
.chip{font-family:var(--mono);font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);color:var(--ink)!important;display:inline-flex;align-items:center;gap:6px}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--meta)}
.chip-project::before{background:#125F66}
.chip-label::before{background:#6A5ACD}
.chip-do::before,.chip-time::before{background:#3F6B3A}
.chip-deadline::before{background:#B04A2F}
.chip-estimate::before{background:#8A6D1F}
.chip-repeat::before{background:#4A6FA5}
.chip-remind::before{background:#A0527A}
.chip-commit::before{background:#74C6CE}
@media (prefers-color-scheme:dark){
  .chip-project::before{background:#74C6CE}
  .chip-label::before{background:#A99BF0}
  .chip-do::before,.chip-time::before{background:#9CC08A}
  .chip-deadline::before{background:#E08464}
  .chip-estimate::before{background:#D9B45A}
  .chip-repeat::before{background:#8FB3E8}
  .chip-remind::before{background:#E09BC0}
}

/* After the page */
.help-related{display:grid;gap:12px;padding-top:24px;border-top:1px solid var(--rule);max-width:40em}
.help-related h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.help-related ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.help-related a{color:var(--verdigris);font-weight:600;text-underline-offset:3px}
.help-related span{display:block;color:var(--soft);font-size:15px}
.help-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:40em}
.help-pager a{display:grid;gap:2px;padding:14px 18px;border:1px solid var(--rule);border-radius:16px;text-decoration:none;font-weight:600;background:var(--surface)}
.help-pager a:hover{border-color:var(--verdigris)}
.help-pager span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.help-next{grid-column:2;text-align:right}
.help-checked{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--meta)}

/* Screenshots: real captures in the site's frames; the dark capture in dark mode */
.help-shot{display:grid;gap:10px;justify-items:center;margin:6px 0 !important}
.help-shot img{display:block;width:100%;height:auto}
.help-shot-iphone .iphone{--w:min(280px,78%)}
.help-shot-plain picture{max-width:min(360px,100%)}
.help-window{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--rule),0 30px 60px -24px rgba(11,16,15,.35)}
.help-shot figcaption{font-size:14px;color:var(--meta);text-align:center;max-width:32em}
.help-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:20px;align-items:start}
.help-shots .help-shot-iphone .iphone{--w:min(250px,100%)}
.help-prose .keys{white-space:nowrap}

/* Device tabs: `::: iphone` / `::: ipad mac` blocks (Help::Markdown). The <head> script
   sets data-on (the tab showing) and data-device (the reader's device) on <html> before the
   first frame, so the right tab is there from the start. The box fits the panel showing
   (sizing it to the tallest left a hole under the short one); help-devices.js keeps the
   clicked tab still on screen when the height changes. Without script, the blocks read
   one after another under their labels. */
.device-tablist{display:none}
.device-panels{display:grid;gap:28px}
.device-panel{display:grid;gap:18px;align-content:start;min-width:0}
.device-panel > *{margin:0}
.device-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta) !important}

html[data-on] .device-label{display:none}
html[data-on] .device-tablist{display:flex;flex-wrap:wrap;gap:2px;padding-inline:14px;margin-bottom:-1px;position:relative;z-index:1}
html[data-on] .device-panels{gap:0;padding:clamp(18px,3vw,26px);border:1px solid var(--rule);border-radius:18px;background:var(--surface)}
html[data-on] .device-panel{display:none}
html[data-on="iphone"] .device-panel[data-platforms~="iphone"],
html[data-on="ipad"] .device-panel[data-platforms~="ipad"],
html[data-on="mac"] .device-panel[data-platforms~="mac"]{display:grid;animation:device-in .14s ease}
@keyframes device-in{from{opacity:0}}

.device-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px 10px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;background:transparent;color:var(--meta);font:inherit;font-size:14px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.device-tab:hover{color:var(--ink)}
.device-tab:focus-visible{outline:2px solid var(--verdigris);outline-offset:-3px}
html[data-on="iphone"] .device-tab[data-platforms~="iphone"],
html[data-on="ipad"] .device-tab[data-platforms~="ipad"],
html[data-on="mac"] .device-tab[data-platforms~="mac"]{color:var(--ink);background:var(--surface);border-color:var(--rule);cursor:default}

/* A quiet dot on the tab for the reader's own device; VoiceOver reads "This device". */
.device-here{display:none;width:6px;height:6px;border-radius:50%;background:var(--verdigris)}
html[data-device="iphone"] .device-tab[data-platforms~="iphone"] .device-here,
html[data-device="ipad"] .device-tab[data-platforms~="ipad"] .device-here,
html[data-device="mac"] .device-tab[data-platforms~="mac"] .device-here{display:inline-block}

@media (prefers-reduced-motion:reduce){
  html[data-on] .device-panel{animation:none !important}
}

/* How-to videos (Help::Markdown.video): 16:9 before anything loads, the transcript under it. */
.help-video{display:grid;gap:10px;margin:6px 0 !important}
.help-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#0b100f;box-shadow:0 0 0 1px var(--rule),0 30px 60px -24px rgba(11,16,15,.35)}
.help-transcript summary{cursor:pointer;font-size:14px;color:var(--meta)}
.help-transcript p{font-size:15.5px;color:var(--soft);margin:8px 0 0}