/* The documentation site: the same tokens as the app (copied from static/index.html), so
   both look alike in light and dark. Keep them in sync when the app's colors change. */
:root {
  --bg: #f6f5f2; --panel: #ffffff; --panel-2: #f0eee9; --line: #e2dfd8;
  --text: #1d1c1a; --muted: #6e6a62; --faint: #9b968c;
  --accent: #d97757; --accent-soft: #fbe9df; --on-accent: #1d1c1a;  /* the logo's orange, as the app's buttons */
  /* profile palette, assigned in config order; "shared" has its own color */
  --p0: #047857; --p0-soft: #ddf3ea; --p1: #1d4ed8; --p1-soft: #e3ebfd; --p2: #be185d; --p2-soft: #fbe2ee;
  --p3: #0f766e; --p3-soft: #d5f2ee; --p4: #4338ca; --p4-soft: #e5e6fb; --p5: #854d0e; --p5-soft: #fbf0d4;
  --shared: #6d28d9; --shared-soft: #ede5fb;
  --ok: #15803d; --warn: #a84d08; --warn-soft: #fdf1dc; --err: #b91c1c; --err-soft: #fbe3e3;
  --logo: #d97757; --logo-back: #e9a98c; --logo-eye: #1d1c1a;
  --radius: 10px; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161513; --panel: #1f1e1b; --panel-2: #282723; --line: #353330;
    --text: #ecebe7; --muted: #a29e95; --faint: #75716a;
    --accent: #d97757; --accent-soft: #3a2418; --on-accent: #1d1c1a;
    --p0: #5fd3a6; --p0-soft: #15332a; --p1: #8fb0ff; --p1-soft: #1c2742; --p2: #f9a8d4; --p2-soft: #3d1a2c;
    --p3: #5eead4; --p3-soft: #123430; --p4: #a5b4fc; --p4-soft: #1f2147; --p5: #fcd34d; --p5-soft: #362a0c;
    --shared: #c4a5ff; --shared-soft: #2a2140;
    --ok: #4ade80; --warn: #fbbf24; --warn-soft: #3a2c10; --err: #f87171; --err-soft: #3d1a1a;
    --logo-back: #8a4a33;
    color-scheme: dark; --edge: rgba(0, 0, 0, .75);
  }
}
:root[data-theme="dark"] {
  --bg: #161513; --panel: #1f1e1b; --panel-2: #282723; --line: #353330;
  --text: #ecebe7; --muted: #a29e95; --faint: #75716a;
  --accent: #d97757; --accent-soft: #3a2418; --on-accent: #1d1c1a;
  --p0: #5fd3a6; --p0-soft: #15332a; --p1: #8fb0ff; --p1-soft: #1c2742; --p2: #f9a8d4; --p2-soft: #3d1a2c;
  --p3: #5eead4; --p3-soft: #123430; --p4: #a5b4fc; --p4-soft: #1f2147; --p5: #fcd34d; --p5-soft: #362a0c;
  --shared: #c4a5ff; --shared-soft: #2a2140;
  --ok: #4ade80; --warn: #fbbf24; --warn-soft: #3a2c10; --err: #f87171; --err-soft: #3d1a1a;
  --logo-back: #8a4a33;
  color-scheme: dark; --edge: rgba(0, 0, 0, .75);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
/* links to a section (On this page, anchors) glide there, unless the system asks for less motion */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header, as in the app */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.logo { width: 42px; height: 28px; flex: none; }
.lg-front { fill: var(--logo); } .lg-back { fill: var(--logo-back); } .lg-eye { fill: var(--logo-eye); }
/* each mascot is whole; a border of the background's color as wide as the gap between them (1 pixel, square
   corners) hides the part of the one behind, so it never looks cut when they move (same as the app) */
.lg-e rect { fill: none; stroke: var(--logo-edge, var(--bg)); stroke-width: 14; }
/* The mascots move in whole pixels (7 units of the 126×84 drawing): a hop each and a blink when the
   page opens; each time the pointer reaches the title, the next of five gestures (g-blink, g-look,
   g-antenna, g-peek, g-jump). Same as the app (src/cc_profiles/static/index.html). */
.logo { overflow: visible; }
@keyframes lg-hop { 30% { transform: translateY(-7px); } 70% { transform: translateY(0); } }
@keyframes lg-blink { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lg-blink2 { 0% { opacity: 0; } 15% { opacity: 1; } 35% { opacity: 0; } 50% { opacity: 1; } }
@keyframes lg-look-r { 0% { transform: translateX(7px); } 75% { transform: none; } }
@keyframes lg-look-l { 0% { transform: translateX(-7px); } 75% { transform: none; } }
@keyframes lg-wiggle { 0% { transform: translateX(-7px); } 20% { transform: translateX(7px); } 40% { transform: translateX(-7px); } 60% { transform: translateX(7px); } 80% { transform: none; } }
@keyframes lg-peek { 0% { transform: translateX(-7px); } 15% { transform: translateX(-14px); } 30% { transform: translate(-14px, 7px); }
  55% { transform: translate(-14px, -7px); } 75% { transform: translateX(-7px); } 90% { transform: none; } }
@keyframes lg-jump { 0% { transform: translateY(-7px); } 25% { transform: none; } 45% { transform: translateY(-7px); } 70% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .logo.play .m-front { animation: lg-hop .5s steps(1); }
  .logo.play .m-back { animation: lg-hop .5s steps(1) .2s; }
  .logo.play .lg-eye { animation: lg-blink .15s steps(1) .8s; }
  .logo.g-blink .lg-eye { animation: lg-blink2 .9s steps(1); }
  .logo.g-look .m-front .lg-eye { animation: lg-look-r 1.4s steps(1); }
  .logo.g-look .m-back .lg-eye { animation: lg-look-l 1.4s steps(1); }
  .logo.g-antenna .lg-ant { animation: lg-wiggle .9s steps(1); }
  .logo.g-peek .m-back { animation: lg-peek 1.4s steps(1); }
  .logo.g-jump .m-front, .logo.g-jump .m-back { animation: lg-jump .8s steps(1); }
}
.sub { color: var(--muted); }
.grow { flex: 1; }
.toplink { color: var(--muted); font-weight: 550; font-size: 14px; }
.toplink:hover { color: var(--text); text-decoration: none; }
.install { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 14px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; white-space: nowrap; }
.install:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 80%, white); }  /* #e19279, as the app */
.install svg { width: 15px; height: 15px; }
.iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line);
  background: var(--panel); border-radius: 50%; cursor: pointer; color: var(--muted); }
.iconbtn:hover { color: var(--text); }
.iconbtn svg { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* search box in the header: a combobox over search.json */
.search { position: relative; flex: 0 1 280px; min-width: 0; }
.search input { width: 100%; height: 34px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.search input::-webkit-search-cancel-button { display: none; }
.skey { position: absolute; right: 8px; top: 7px; font-size: 11.5px; line-height: 16px; color: var(--muted); pointer-events: none; }
.search input:focus ~ .skey, .search input:not(:placeholder-shown) ~ .skey { display: none; }
.sresults { position: absolute; right: 0; top: calc(100% + 6px); width: min(460px, calc(100vw - 32px)); max-height: min(70vh, 560px);
  overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.sresults li a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 7px; color: var(--text); }
.sresults li a:hover, .sresults li[aria-selected="true"] a { background: var(--panel-2); text-decoration: none; }
.sresults li[aria-selected="true"] a { box-shadow: inset 2px 0 0 var(--accent); }
.sresults .st { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.sresults .ss { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: auto; white-space: nowrap; }
.sresults .sx { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sresults mark { background: var(--accent-soft); color: var(--text); border-radius: 3px; padding: 0 1px; }
.sresults .snone { padding: 10px; color: var(--muted); font-size: 13.5px; }

/* sidebar like the app's tab groups */
/* full width, aligned with the header: sidebar, page, On this page */
/* the sidebar is as wide as its longest label (about 200px) plus its scrollbar: no empty band before the text */
.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 230px; gap: 36px; padding: 24px 28px 24px; }
.side { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow: auto; }
/* thin scrollbars, in the theme's colors */
.side, .toc, .doc pre, .doc table { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* the sidebar and On this page show theirs only while the pointer is over them, fading in and out.
   Chrome and Firefox animate scrollbar-color through a registered property; Safari, which only has
   ::-webkit-scrollbar, gets the thumb from the element's border-color, which can be transitioned. */
@property --sb-thumb { syntax: "<color>"; inherits: true; initial-value: transparent; }
.side, .toc { --sb-thumb: transparent; scrollbar-color: var(--sb-thumb) transparent; border-color: transparent;
  transition: --sb-thumb .3s ease, border-color .3s ease; }
.side:hover, .toc:hover, .side:focus-within, .toc:focus-within { --sb-thumb: var(--line); border-color: var(--line); }
.side::-webkit-scrollbar, .toc::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb { border-right: 8px solid; border-color: inherit; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .side, .toc { transition: none !important; } }
.crumbs, .side-head, .scrim { display: none; }
/* the group of the page, above its title */
.eyebrow { margin: 4px 0 6px; color: var(--accent); font-size: 13.5px; font-weight: 600; }
.doc .eyebrow + h1 { margin-top: 0; }
.ngroup { display: grid; gap: 0; margin-bottom: 18px; }
.ngroup:last-child { margin-bottom: 0; }
.nlabel svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.nlabel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); padding: 0 0 8px; }
/* links like On this page: a thin line on the left, the current page in orange with its own bar */
.side a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.4;
  background: linear-gradient(var(--line), var(--line)) 0 0 / 1px 100% no-repeat border-box; }
.side a:hover { color: var(--text); text-decoration: none; }
.side a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 550; }

/* the page */
.doc { min-width: 0; }
/* On this page, on the right */
.toc { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow: auto; font-size: 13.5px; }
.toc[hidden] { display: none; }
.toc-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); margin: 6px 0 10px; }
.toc-title svg { width: 15px; height: 15px; color: var(--muted); }
.toc nav { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.35; }
.toc a.sub { padding-left: 24px; font-size: 13px; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 550; }
@media (max-width: 1199px) { .layout { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; } .toc { display: none; } }
.doc h1 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.2; margin: 6px 0 18px; }
.doc h2 { font-size: 21px; letter-spacing: -0.01em; margin: 38px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 17px; margin: 28px 0 8px; }
.doc h4 { font-size: 15px; margin: 22px 0 6px; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc li { margin: 3px 0; }
.doc li > ul, .doc li > ol { margin: 4px 0; }
.doc img { max-width: 100%; height: auto; border-radius: var(--radius); }
.doc picture { display: block; margin: 4px 0 18px; }
.doc picture img { display: block; border: 1px solid var(--line); }
/* the # link of a section title: shown on hover or focus, always a little on touch screens */
.doc .anchor { margin-left: 8px; color: var(--faint); font-weight: 500; text-decoration: none; opacity: 0; transition: opacity .15s; }
.doc h2:hover .anchor, .doc h3:hover .anchor, .doc .anchor:focus-visible { opacity: 1; }
.doc .anchor:hover { color: var(--accent); }
@media (hover: none) { .doc .anchor { opacity: .6; } }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.doc blockquote { margin: 0 0 14px; padding: 10px 14px; background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--text); }
.doc blockquote p:last-child { margin-bottom: 0; }
code, kbd, pre { font-family: var(--mono); font-size: 13px; }
.doc :not(pre) > code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--panel-2); }
.doc pre, .doc .highlight { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.doc pre { padding: 12px 14px; overflow-x: auto; line-height: 1.5; margin: 0 0 16px; }
/* the Copy button of code blocks: on hover or focus, always on touch screens */
.doc .has-copy { position: relative; }
.doc .has-copy > pre { padding-right: 14px; }
/* the copy icon never covers a line: the code reserves its width, and its own background hides the text that scrolls under it */
.doc .has-copy > pre > code { display: inline-block; min-width: 100%; padding-right: 40px; box-sizing: border-box; }
.doc .copy { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  color: var(--muted); background: var(--panel); box-shadow: -8px 0 8px var(--panel), 7px 0 0 var(--panel); border: 0; border-radius: 6px; cursor: pointer; }
.doc .copy svg { width: 16px; height: 16px; }
.doc .copy:hover { color: var(--text); background: var(--panel-2); }
.doc .copy.done { color: var(--ok); }
.doc .highlight pre { border: 0; margin: 0; background: none; }
.doc .highlight { margin: 0 0 16px; }
.doc table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto; }
.doc th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--panel-2); }
.doc th, .doc td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
/* screenshots open full size on click */
.doc .zoom-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); }
.doc .zoom-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
dialog.zoom { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; cursor: zoom-out; }
dialog.zoom::backdrop { background: rgba(0, 0, 0, .78); }
dialog.zoom img { display: block; max-width: 96vw; max-height: 92vh; border-radius: 8px; }
.zoom-close { position: fixed; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; cursor: pointer; }
.feedback { margin: 32px 0 0; color: var(--muted); font-size: 13.5px; }
.feedback + .foot { margin-top: 16px; }
/* Previous and next page, at the end of every page */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pager + .feedback { margin-top: 20px; }
.pager a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-weight: 600; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager a span { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.pager .prev span::before { content: "‹ "; }
.pager .next { grid-column: 2; text-align: right; }
.pager .next span::after { content: " ›"; }
.pager + .foot { margin-top: 24px; }
.foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* code colors (Rouge), muted to match the app */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp { color: var(--faint); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kc, .highlight .nt { color: var(--accent); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb { color: var(--ok); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .kt { color: var(--p1); }
.highlight .nb, .highlight .nf, .highlight .na, .highlight .nv { color: var(--p4); }
.highlight .o, .highlight .p { color: var(--muted); }

/* tablets and narrow windows: one column, the sidebar becomes a Menu to open */
@media (max-width: 860px) {
  .top { padding: 12px 16px; }
  .top .sub, .toplink, .grow, .skey { display: none; }
  .install { padding: 6px 10px; }
  .search { flex: 1 1 auto; }
  .sresults { position: fixed; left: 16px; right: 16px; top: 62px; width: auto; }
  .layout { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px 20px; }
  /* breadcrumb bar under the header: the menu button and where you are */
  .crumbs { display: flex; align-items: center; gap: 10px; position: sticky; top: 59px; z-index: 9; padding: 8px 16px;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .crumbs ol { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 14px; }
  .crumbs li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumbs .crumb-group { color: var(--muted); flex: none; }
  .crumbs .crumb-group::after { content: "›"; margin-left: 6px; color: var(--faint); }
  .crumbs li[aria-current] { color: var(--text); font-weight: 600; }
  .menu-btn, .menu-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
    color: var(--text); background: none; border: 0; border-radius: 8px; cursor: pointer; }
  .menu-btn:hover, .menu-close:hover { background: var(--panel-2); }
  .menu-btn svg, .menu-close svg { width: 20px; height: 20px; }
  /* the sidebar becomes a drawer from the left; stretch, or the desktop align-self: start sizes it to its links and it cannot scroll */
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(320px, 86vw); max-height: none; align-self: stretch; padding: 0 20px 24px;
    background: var(--bg); border-right: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .menu-open .side { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }  /* visible at once, so focus can move in */
  .side-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
    margin: 0 -20px 14px; padding: 12px 12px 12px 20px; background: var(--bg); border-bottom: 1px solid var(--line); font-weight: 700; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); }
  .scrim[hidden] { display: none; }
  .menu-open, .menu-open body { overflow: hidden; }
  .doc h1 { font-size: 26px; }
  .doc h2 { font-size: 20px; margin-top: 30px; }
  /* tables: smaller text and tighter cells; a table still wider than the screen scrolls on its own */
  .doc table { font-size: 13.5px; }
  .doc th, .doc td { padding: 7px 10px; }
  .doc td code, .doc th code { overflow-wrap: break-word; }
  /* a shadow on the side that has more to scroll to: covered by the table's own background once you reach the end */
  .doc table { background:
      linear-gradient(to right, var(--panel) 30%, transparent) left / 40px 100% no-repeat local,
      linear-gradient(to left, var(--panel) 30%, transparent) right / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--edge, rgba(0, 0, 0, .28)), transparent) left / 22px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--edge, rgba(0, 0, 0, .28)), transparent) right / 22px 100% no-repeat scroll,
      var(--panel); }
}
/* phones */
@media (max-width: 560px) {
  .install { display: none; }  /* the search needs the room; Getting started is in the menu */
  .layout { padding: 12px 14px 20px; }
  .doc h1 { font-size: 24px; }
  .doc pre { font-size: 12.5px; }
  .doc th, .doc td { padding: 6px 8px; }
}