/* GraphLab — liquid glass theme
   Glass = thin tinted layer + backdrop blur + edge refraction (js/glass.js, Chromium)
   + specular rim (::after) + soft contact shadow. */

:root{
  color-scheme:light;
  --bg:#ebe7df;
  --tx:#15181c; --mu:#5a6068; --ac:#0f7f74; --ac-tx:#fff;
  --fill:rgba(255,255,255,.26);          /* cards */
  --fill-btn:rgba(255,255,255,.34);      /* controls */
  --fill-hover:rgba(255,255,255,.5);
  --rim-a:rgba(255,255,255,.95); --rim-b:rgba(255,255,255,.12);
  --inner:rgba(255,255,255,.55); --inner-dk:rgba(0,0,0,.06);
  --drop:rgba(20,24,30,.14); --drop-near:rgba(20,24,30,.10);
  --nd:rgba(255,255,255,.55); --halo:#f4f2ee; --sel:rgba(15,127,116,.16);
  --line:rgba(20,24,30,.10);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#101215;
  --tx:#eef0f3; --mu:#9aa1ab; --ac:#2bb3a3; --ac-tx:#06201d;
  --fill:rgba(22,25,30,.2); --fill-btn:rgba(255,255,255,.08); --fill-hover:rgba(255,255,255,.16);
  --rim-a:rgba(255,255,255,.42); --rim-b:rgba(255,255,255,.04);
  --inner:rgba(255,255,255,.14); --inner-dk:rgba(0,0,0,.3);
  --drop:rgba(0,0,0,.5); --drop-near:rgba(0,0,0,.35);
  --nd:rgba(255,255,255,.1); --halo:#16191d; --sel:rgba(43,179,163,.2);
  --line:rgba(255,255,255,.1);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101215;
  --tx:#eef0f3; --mu:#9aa1ab; --ac:#2bb3a3; --ac-tx:#06201d;
  --fill:rgba(22,25,30,.2); --fill-btn:rgba(255,255,255,.08); --fill-hover:rgba(255,255,255,.16);
  --rim-a:rgba(255,255,255,.42); --rim-b:rgba(255,255,255,.04);
  --inner:rgba(255,255,255,.14); --inner-dk:rgba(0,0,0,.3);
  --drop:rgba(0,0,0,.5); --drop-near:rgba(0,0,0,.35);
  --nd:rgba(255,255,255,.1); --halo:#16191d; --sel:rgba(43,179,163,.2);
  --line:rgba(255,255,255,.1);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0 auto;max-width:1000px;
  padding:max(14px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));
  color:var(--tx);background:transparent;
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* fixed wallpaper (works on iOS, unlike background-attachment:fixed) */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg)}

h1{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 4px 14px;font-size:28px;font-weight:700;letter-spacing:-.6px;
}

/* ---------- glass primitives ---------- */
.card,button,select,input,#tabs{
  position:relative;
  -webkit-backdrop-filter:blur(var(--blur,6px)) saturate(1.8);
          backdrop-filter:blur(var(--blur,6px)) saturate(1.8);
}
/* specular rim: bright top-left & bottom-right edge, fades along the sides */
.card::after,button::after,#tabs::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--rim-a) 0%,var(--rim-b) 28%,transparent 50%,var(--rim-b) 72%,var(--rim-a) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---------- cards ---------- */
.card{
  --blur:14px;
  background:var(--fill);
  border:0;border-radius:28px;padding:14px;margin:12px 0;
  box-shadow:
    inset 0 1px 0 var(--inner), inset 0 -1px 0 var(--inner-dk),
    inset 0 0 24px rgba(255,255,255,.06),
    0 1px 2px var(--drop-near), 0 12px 40px -8px var(--drop);
}
.card > b:first-child,.card-h > b{display:block;margin:0 2px 6px;font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--mu);text-transform:uppercase}

/* ---------- controls ---------- */
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;align-items:center}
button,select,input{
  --blur:4px;
  font:inherit;font-size:14px;font-weight:500;color:var(--tx);
  padding:9px 16px;border:0;border-radius:999px;
  background:var(--fill-btn);
  box-shadow:
    inset 0 1px 0 var(--inner), inset 0 -1px 0 var(--inner-dk),
    0 1px 1px var(--drop-near), 0 4px 14px -4px var(--drop);
}
select,input{border-radius:14px}
input{width:104px}input::placeholder{color:var(--mu)}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
button:hover{background:var(--fill-hover)}
button:active{transform:scale(.94)}
button:disabled{opacity:.45;cursor:default;transform:none}
button:disabled:hover{background:var(--fill-btn)}

/* tinted glass for the active / primary state */
button.on{
  color:var(--ac-tx);font-weight:600;
  background:color-mix(in srgb,var(--ac) 82%,transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12),
    0 1px 1px var(--drop-near), 0 6px 18px -6px color-mix(in srgb,var(--ac) 70%,transparent);
}
button.on:hover{background:var(--ac)}

/* ---------- tab bar: one glass capsule, active segment is a lighter lens ---------- */
#tabs{
  --blur:10px;
  display:inline-flex;gap:2px;padding:4px;margin:0 0 6px;border-radius:999px;
  background:var(--fill);
  box-shadow:inset 0 1px 0 var(--inner),inset 0 -1px 0 var(--inner-dk),0 1px 2px var(--drop-near),0 10px 30px -10px var(--drop);
}
#tabs button{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--mu)}
#tabs button::after{display:none}
#tabs button:hover{color:var(--tx);background:transparent}
#tabs button.on{
  color:var(--tx);background:var(--fill-hover);
  box-shadow:inset 0 1px 0 var(--inner),0 2px 8px -2px var(--drop);
}
#tabs button.on::after{display:block}

#theme{font-size:13px;padding:7px 14px}

/* ---------- content ---------- */
svg{width:100%;height:auto;display:block;touch-action:none}
#gs,#ds,#ts,#ss{aspect-ratio:16/9}
svg.i{display:inline-block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;touch-action:auto}
#pR{padding-inline:11px}  /* drawing panels */
.hint{color:var(--mu);font-size:14px;margin:6px 4px}
.big{font-size:18px;font-weight:600;text-align:center;margin:6px;letter-spacing:.5px;font-variant-numeric:tabular-nums}
table{border-collapse:separate;border-spacing:0;margin:8px auto;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
td,th{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 11px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
th{background:var(--nd);font-weight:600}
.sc{overflow-x:auto}
.hl{background:#2e9e5b;color:#fff;font-weight:700}
.one{background:var(--sel)}
.sec{display:none}.sec.show{display:block}

/* colour legend under each drawing panel */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 6px 2px;font-size:13px;color:var(--mu)}
.legend[hidden]{display:none}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.sw.edge{width:18px;height:4px;border-radius:2px}
.sw.ring{background:none;border:2.5px solid var(--c);width:13px;height:13px}
.sw.open{background:none;border:2.5px solid var(--c);width:13px;height:13px}
.sw.dring{background:none;border:2px dashed var(--c);width:13px;height:13px}
.sw.multi{background:conic-gradient(#0d9488 0 25%,#d97706 0 50%,#9333ea 0 75%,#db2777 0)}
.sw.num{width:auto;height:auto;border-radius:0;background:none;font-weight:800;font-size:13px;line-height:1;color:#dc2626;font-style:normal}

@media (prefers-reduced-transparency:reduce){
  .card,#tabs{background:color-mix(in srgb,var(--bg) 92%,transparent)}
}
@media (max-width:520px){
  h1{font-size:24px}
  /* tabs: one line that swipes sideways (the .row class would otherwise wrap them) */
  #tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #tabs::-webkit-scrollbar{display:none}
  #tabs button{white-space:nowrap;flex:0 0 auto;padding:8px 10px;font-size:13px}
  /* drawing tools: slightly tighter so all of them (incl. undo / redo) fit on one line */
  #modes,#dmodes{gap:6px}
  #modes button,#dmodes button{padding:8px 12px}
  #modes button.ico,#dmodes button.ico{padding:8px 9px;min-width:36px}
}
/* phones (portrait): the drawing stays pinned at the top while you scroll the controls and step-by-step results */
@media (max-width:999px) and (min-height:600px){
  .sec.show>.main{position:sticky;top:0;z-index:4;background:var(--bg);padding-top:max(4px,env(safe-area-inset-top));margin:0 -14px;padding-inline:14px;padding-bottom:2px;box-shadow:0 8px 12px -10px var(--drop)}
}

/* ---------- computer / smart panel: drawing on the left, sidebar with tools + output on the right ---------- */
@media (min-width:1000px){
  body{max-width:none;padding-inline:20px;padding-top:max(10px,env(safe-area-inset-top))}   /* use the full screen width */
  .sec.show{display:grid;grid-template-columns:clamp(290px,21vw,390px) minmax(0,1fr);gap:16px;align-items:start}
  .sec.show>.side{grid-column:1;grid-row:1}   /* control panel on the left */
  .sec.show>.main{grid-column:2;grid-row:1}
  .main>.row:first-child{margin-top:0}
  /* drawing column fills the screen height under the header; the drawing takes all free space */
  body{padding-bottom:8px}
  .sec.show .main{display:flex;flex-direction:column;height:calc(100vh - var(--top-h,70px) - 8px);min-height:420px}
  .main>.row:first-child{margin:0 0 6px}
  .main>.card:has(>svg){flex:1 1 0;min-height:0;margin:0}
  .main>.card>svg{width:100%;height:100%;aspect-ratio:auto}
  .main>.legend{margin:6px 6px 0}
  .main>.hint{margin:2px 6px 0}
  .side{
    position:sticky;top:12px;max-height:calc(100vh - var(--top-h,70px) - 8px);overflow-y:auto;overscroll-behavior:contain;
    padding:0 16px 28px;margin:0 -16px -28px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .side>:first-child{margin-top:0}
  .side #alg{flex:1 1 100%}
  .side .row input[style*="width:100%"]{flex:1 1 0;min-width:0}
}

/* inline edge-weight editor (sits on the edge's label) */
.wed{position:absolute;z-index:5;transform:translate(-50%,-50%);width:92px;padding:6px 10px;text-align:center;
  font-weight:700;color:#b45309;border-radius:12px;background:var(--halo);
  box-shadow:0 0 0 2px var(--ac),0 6px 18px -4px var(--drop)}
.wed[hidden]{display:none}

/* dropdown lists: the glass select is see-through, so give the opened list a solid themed background
   (otherwise dark mode shows light text on a white list) */
select option,select optgroup{background-color:var(--halo);color:var(--tx)}
select option:checked{background-color:var(--ac);color:var(--ac-tx)}

/* vertex naming menu */
.badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--nd);color:var(--mu)}
button.on .badge{background:rgba(255,255,255,.25);color:inherit}
.menu{position:fixed;z-index:50;min-width:220px;padding:6px;border-radius:18px;display:flex;flex-direction:column;gap:2px;
  background:color-mix(in srgb,var(--halo) 82%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--inner),0 0 0 1px var(--line),0 16px 40px -10px var(--drop)}
.menu[hidden]{display:none}
.menu-h{font-size:12px;font-weight:600;color:var(--mu);padding:6px 10px 4px;text-transform:uppercase;letter-spacing:.2px}
.menu button{justify-content:flex-start;background:transparent;box-shadow:none;border-radius:12px;padding:9px 12px;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.menu button::after{display:none}
.menu button:hover{background:var(--nd)}
.menu button.sel{color:var(--ac);font-weight:600}
.menu button.sel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);margin-right:2px}
.menu button:not(.sel)::before{content:"";width:6px;margin-right:2px}
.ned{color:var(--tx)}

/* card heading with a control on the right */
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.card-h > b{margin:0 2px}
.card-h select{padding:7px 12px;font-size:13px}

/* one-line header: title · tabs · theme */
.top{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:2px 0 8px}
.top h1{margin:0 4px}
.top #tabs{margin:0}
#theme{margin-left:auto}
@media (max-width:999px){ .top #tabs{order:3;flex-basis:100%} }   /* tabs drop to their own line on small screens */

/* drawing panels: less empty frame, more drawing */
.card:has(>svg){padding:6px}

/* header right-hand buttons */
.top-r{display:flex;gap:8px;margin-left:auto;align-items:center}
.top-r #theme{margin-left:0}
.top-r button{font-size:13px;padding:7px 14px}


/* icon-only tool buttons (name shows as a tooltip) */
button.ico{padding:9px 12px;min-width:40px;gap:4px}
button.ico svg.i{width:18px;height:18px}

/* header icon buttons */
.top-r button.ico{padding:8px 10px;min-width:38px}
.top-r button.ico svg.i{width:18px;height:18px}


/* on-screen keyboard (edge weights + custom vertex / node names) */
.kpad{position:fixed;z-index:60;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:20px;
  touch-action:none;-webkit-user-select:none;user-select:none;
  background:color-mix(in srgb,var(--halo) 84%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--inner),0 0 0 1px var(--line),0 18px 44px -12px var(--drop)}
.kpad[hidden]{display:none}
.kpad .kr{display:flex;gap:6px;justify-content:center}
.kpad button{width:46px;height:48px;padding:0;font-size:18px;font-weight:600;border-radius:12px;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--fill-btn)}
.kpad button::after{display:none}
.kpad button:active{transform:scale(.92);background:var(--fill-hover)}
.kpad button.fn{font-size:14px;color:var(--mu)}
.kpad button.on{color:var(--ac)}
.kpad button.ok{background:var(--ac);color:var(--ac-tx);font-size:16px;width:80px}
.kpad button.sp{flex:1}
.kpad button.off{opacity:.3;pointer-events:none}
.kpad .kr:last-child button.fn:first-child{width:80px}
@media (max-width:560px){
  .kpad{left:4px!important;right:4px;padding:6px;gap:4px}
  .kpad .kr{gap:3px}
  .kpad button{flex:1;width:auto;min-width:0;height:44px;font-size:16px}
  .kpad button.sp{flex:3}
}

/* list of possible node bases */
.bases{margin:6px 0 4px;padding-left:28px;font-weight:600;font-variant-numeric:tabular-nums}
.bases li{padding:3px 6px;border-radius:8px}
.bases li.one{background:var(--sel)}

/* tables in the narrow control panel */
.side table td,.side table th{font-size:13px;padding:5px 7px}

/* counting sort counters */
table.counts{margin:8px 0}
table.counts th,table.counts td{padding:4px 7px;min-width:28px}

/* sort: all passes table */
table.passes{width:100%}
table.passes td{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
table.passes tr[data-f]{cursor:pointer}
table.passes tr[data-f]:hover td{background:var(--nd)}
table.passes .fin{color:#16a34a}

/* SEO / about text below the tool */
.about{max-width:860px;margin:28px auto 12px;padding:0 4px;color:var(--tx);line-height:1.6;font-size:15px}
.about h2{font-size:22px;margin:0 0 8px}
.about h3{font-size:17px;margin:22px 0 6px}
.about p,.about li{color:var(--mu)}
.about strong{color:var(--tx);font-weight:600}
.about ul{padding-left:20px;margin:6px 0}
.about summary{cursor:pointer;font-size:13px;color:var(--mu);text-align:center;list-style:none}
.about summary::-webkit-details-marker{display:none}
.about[open] summary{margin-bottom:12px}

/* worked calculations (mathematical form of each step) */
.calc{margin:8px 2px;padding:10px 12px;border-radius:12px;background:var(--nd);text-align:left;font-size:14px;line-height:1.7;font-variant-numeric:tabular-nums;overflow-x:auto}
.calc>div{white-space:normal}
.calc b{color:var(--ac)}
.calc .ok{color:#16a34a;font-weight:600}
.calc .no{color:var(--mu)}
.calc sub,table.dj sub{font-size:.72em;color:var(--mu)}
table.dj td.upd{font-weight:800}
table.dj td.hl sub{color:inherit;opacity:.85}