/* ---------- grapher ---------- */
#grapher{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.32,.72,0,1)}
#grapher.on{opacity:1;pointer-events:auto}
#grapher::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--viewer-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#grapherBar{position:relative;z-index:2;flex:0 0 auto;margin:22px 22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 20px;border-radius:18px;
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:.5px solid var(--panel-line);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top),inset 0 -1px 0 var(--glass-bot)}
#grapherMeta{display:flex;align-items:center;gap:20px}
#grapherKind{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600}
#grapherTabs{display:flex;gap:4px;padding:3px;border-radius:11px;background:var(--chip)}
.gtab{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;
  color:var(--tx-3);cursor:pointer;transition:background .25s,color .25s}
.gtab:hover{color:var(--tx-2)}
.gtab.on{background:var(--accent);color:#fff}
#grapherNav{display:flex;align-items:center;gap:6px}

#grapherBody{position:relative;z-index:1;flex:1 1 auto;margin:14px 22px 22px;
  display:flex;gap:14px;min-height:0}
#grapherSide{width:280px;flex:0 0 auto;overflow-y:auto;border-radius:20px;
  padding:22px 20px;background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:.5px solid var(--panel-line);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top),inset 0 -1px 0 var(--glass-bot)}
#grapherSide::-webkit-scrollbar{width:5px}
#grapherSide::-webkit-scrollbar-thumb{background:var(--chip-line);border-radius:4px}
.gpane{display:none;flex-direction:column}
.gpane.on{display:flex}
.gsec{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;margin:20px 0 10px}
.gsec:first-child{margin-top:0}
/* appearance:none drops the OS's own arrow (a grey box on Windows that never
   matched anything around it) for a chevron drawn to match the rest of the
   app's thin-stroke icons; currentColor ties it to .gselect's own `color`, so
   it re-tints with the theme for free rather than needing a light/dark copy. */
.gselect{width:100%;padding:9px 34px 9px 12px;border-radius:10px;
  border:.5px solid var(--chip-line);
  background-color:var(--chip);color:var(--tx);font-family:'Source Sans 3',sans-serif;
  font-size:13.5px;cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='currentColor' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.gselect:focus{box-shadow:0 0 0 1.5px var(--accent)}
/* The list that drops open is native chrome, painted by the OS rather than the
   page, so it never sees the panel's own CSS -- Chrome and Firefox do respect
   background/color set directly on <option>, which is the actual fix; Safari's
   popup ignores both and stays system-styled regardless, a platform limit
   rather than something more CSS can reach. */
.gselect option{background:var(--ctrl-solid);color:var(--ctrl-solid-tx)}

#fnList{display:flex;flex-direction:column;gap:8px}
.fnrow{display:flex;align-items:center;gap:8px}
.fnrow .fnswatch{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fnrow input[type=text]{flex:1;min-width:0;padding:9px 11px;border-radius:10px;
  border:.5px solid var(--chip-line);background:var(--chip);color:var(--tx);
  font-family:'Source Sans 3',monospace;font-size:13.5px;outline:none}
.fnrow input[type=text]:focus{box-shadow:0 0 0 1.5px var(--accent)}
.fnrow input[type=text].err{box-shadow:0 0 0 1.5px var(--rival)}
.fnrow .fndel{width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--tx-3);font-size:12px;transition:background .2s,color .2s}
.fnrow .fndel:hover{background:var(--hover);color:var(--rival)}

.gfield-row{display:flex;gap:8px;margin-bottom:8px}
.gfield-row label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:10.5px;
  color:var(--tx-3);letter-spacing:.04em}
.gfield-row input[type=number]{padding:7px 9px;border-radius:8px;border:.5px solid var(--chip-line);
  background:var(--chip);color:var(--tx);font-family:'Source Sans 3',sans-serif;
  font-size:13px;outline:none;width:100%}
.gfield-single{display:flex;flex-direction:column;gap:6px;font-size:10.5px;
  color:var(--tx-3);letter-spacing:.04em;margin-bottom:10px}
.gfield-single input[type=text]{padding:9px 11px;border-radius:10px;border:.5px solid var(--chip-line);
  background:var(--chip);color:var(--tx);font-family:'Source Sans 3',monospace;
  font-size:13.5px;outline:none}
.gcheck{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx-2);
  margin-top:10px;cursor:pointer}

#dataTable{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.drow{display:flex;gap:6px;align-items:center}
.drow input{flex:1;min-width:0;padding:6px 8px;border-radius:7px;border:.5px solid var(--chip-line);
  background:var(--chip);color:var(--tx);font-family:'Source Sans 3',sans-serif;
  font-size:12.5px;outline:none}
.drow input:focus{box-shadow:0 0 0 1.5px var(--accent)}
.drow.head input{font-weight:600;color:var(--tx-2)}
.gtablebtns{display:flex;gap:8px;margin-top:12px}
.gtablebtns .btn{flex:1;text-align:center}

#grapherMain{flex:1 1 auto;position:relative;border-radius:20px;overflow:hidden;
  background:var(--doc-page-bg)}
#gCanvas{width:100%;height:100%;display:block}
#g3dHost{position:absolute;inset:0;display:none}
#g3dHost canvas{width:100%!important;height:100%!important}
#gErr{position:absolute;left:18px;bottom:16px;font-size:12.5px;color:var(--rival);
  background:rgba(255,255,255,.9);padding:8px 13px;border-radius:9px;display:none;
  max-width:calc(100% - 36px)}
#gErr.on{display:block}