/* The self-drawing sheet. Light theme on the off-white pages, dark on the teal panel. */
.g-sheet { width: 100%; height: auto; overflow: visible; }
.g-light { --g-stroke: var(--teal-2); --g-faint: var(--sage); --g-text: var(--muted); --g-value: var(--ink); --g-accent: var(--teal); }
.g-dark  { --g-stroke: #C9D6D4; --g-faint: #5E8481; --g-text: var(--on-teal-muted); --g-value: #fff; --g-accent: var(--sand); }

.g-line { fill: none; stroke: var(--g-stroke); stroke-width: 1.2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); }
circle.g-line, g .g-line { stroke-dasharray: none; stroke-dashoffset: 0; }
.g-line.is-drawn { stroke-dashoffset: 0; }
.g-grid { stroke: var(--g-faint); stroke-width: .8; stroke-dasharray: 1; }
.g-grid.is-drawn { stroke-dasharray: 1; }
.g-beam { stroke-width: 2.4; stroke: var(--g-accent); }
.g-dim, .g-leader { stroke-width: .9; }

.g-fill { fill: var(--g-accent); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4);
  transition: opacity .4s var(--ease), transform .5s var(--ease); }
.g-fill.is-drawn { opacity: 1; transform: none; }
.g-fade { opacity: 0; transition: opacity .6s var(--ease); }
.g-fade.is-drawn { opacity: 1; }

.g-text { font: 500 10.5px var(--head); fill: var(--g-text); letter-spacing: .04em; }
.g-vertical { writing-mode: vertical-rl; }
.g-bubble { font: 600 10px var(--head); fill: var(--g-value); text-anchor: middle; }
.g-label { font: 600 7.5px var(--head); fill: var(--g-text); letter-spacing: .14em; }
.g-value { font: 500 11.5px var(--head); fill: var(--g-text); transition: fill .3s; }
.g-value.is-filled { fill: var(--g-value); }

.g-stamp { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.6) rotate(-14deg);
  transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.g-stamp.is-drawn { opacity: 1; transform: scale(1) rotate(-14deg); }
.g-stamp circle { fill: none; stroke: var(--g-accent); stroke-width: 1.6; }
.g-stamp text { font: 700 13px var(--head); fill: var(--g-accent); text-anchor: middle; letter-spacing: .14em; }
.g-stamp .g-stamp-small { font-size: 7px; letter-spacing: .3em; }

/* Shared: bars that grow from their left end */
.g-bar { fill: var(--g-faint); transform-box: fill-box; transform-origin: left center; transform: scaleX(0);
  transition: transform .7s var(--ease); }
.g-bar.is-drawn { transform: none; }

/* Workspace (free agent): a window with the file tree and the instruction file */
.g-win { fill: rgba(9, 24, 23, .45); stroke: #5E8481; stroke-width: 1; }
.g-dot { fill: #5E8481; }
.g-win-title { font: 600 11.5px var(--head); fill: var(--g-text); text-anchor: middle; }
.g-tree { font: 500 11.5px var(--head); fill: var(--g-text); }
.g-glyph { fill: var(--g-accent); }
.g-glyph-file { fill: none; stroke: var(--g-stroke); stroke-width: 1; }
.g-tab { fill: rgba(255, 255, 255, .08); }
.g-tab-text { font: 600 11px var(--head); fill: var(--g-value); }
.g-code { font: 500 11.5px "Cascadia Mono", Consolas, "Courier New", monospace; fill: var(--g-text); }
.g-code-h { fill: var(--g-value); font-weight: 600; }
.g-kind-workspace [data-field] { fill: var(--g-faint); transition: fill .3s; }
.g-kind-workspace [data-field].is-filled { fill: var(--g-accent); }
.g-kind-workspace .g-tab-text[data-field], .g-kind-workspace .g-tree[data-field] { fill: var(--g-value); }

/* Report (audit): white pages on the panel, the cover in front */
.g-paper { fill: #FBFAF6; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
.g-paper-2 { fill: #F1EEE6; }
.g-paper-3 { fill: #E8E4D9; }
.g-page-back { transform-box: fill-box; transform-origin: left bottom; transform: translateX(-30px) rotate(0deg);
  transition: opacity .6s var(--ease), transform .8s var(--ease); }
.g-page-back.is-drawn { transform: rotate(3deg); }
.g-page-back-2.is-drawn { transform: rotate(6deg); }
.g-pop { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.g-pop.is-drawn { transform: scale(1.04) translateY(-4px); }
.g-p-brand { font: 700 9px var(--head); fill: var(--ink); letter-spacing: .18em; }
.g-p-kicker { font: 600 7px var(--head); fill: var(--teal-2); letter-spacing: .14em; }
.g-p-title { font: 700 17px var(--head); fill: #B4BAB7; letter-spacing: -.01em; transition: fill .3s; }
.g-p-sub { font: 500 10px var(--head); fill: #B4BAB7; transition: fill .3s; }
.g-p-title.is-filled { fill: var(--ink); }
.g-p-sub.is-filled { fill: var(--muted); }
.g-tile { fill: #fff; stroke: var(--line); }
.g-tile-top { fill: var(--teal); }
.g-p-big { font: 700 17px var(--head); fill: #B4BAB7; transition: fill .3s; }
text.g-p-big:not([data-field]), .g-p-big.is-filled { fill: var(--teal); }
.g-p-big-sm { font-size: 13px; }
.g-p-small { font: 500 6.5px var(--head); fill: var(--muted); }
.g-p-ring { fill: none; stroke: var(--line); stroke-width: 5; }
.g-p-arc { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .32 1;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.g-p-score { font: 700 14px var(--head); fill: var(--red); text-anchor: middle; }
.g-bar-teal { fill: var(--teal); opacity: .75; }
.g-bar-ink { fill: #D5D1C7; }
.g-pill-red { fill: var(--red-bg); stroke: var(--red); stroke-width: .6; }
.g-pill-amber { fill: var(--amber-bg); stroke: var(--amber); stroke-width: .6; }
.g-pill-green { fill: var(--green-bg); stroke: var(--teal-2); stroke-width: .6; }
.g-p-avatar { fill: var(--teal); }
.g-p-sign { font: 600 8.5px var(--head); fill: var(--ink); }
.g-p-num { font: 700 16px var(--head); fill: var(--teal); }