/* =========================================================================
   asserted-nl, a portfolio shaped like the toolchain
   Shell: JetBrains-style IDE (dark). Each tab hosts a tool in its own skin.
   ========================================================================= */
/* The two typefaces, served from this site rather than Google, so a visit
   sends nobody's address anywhere else. Both are variable fonts under the
   SIL Open Font License (fonts/OFL-*.txt); one file per subset covers every weight. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/inter-tight-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
*{box-sizing:border-box;}
:root{
  /* Tells the browser which palette to paint native parts with: scrollbars,
     the resize grip on a textarea, form controls. Without it they stay light
     on a dark page, which reads as a white seam on anything resizable. */
  color-scheme:dark;
  /* IDE chrome */
  --bg:#1E1F22; --panel:#2B2D30; --panel2:#333539; --hover:#393B40;
  --border:#393B40; --border2:#4E5157;
  --text:#DFE1E5; --dim:#9DA0A8; --dim2:#9096A0;
  /* Measured: white on #3574F0 was 4.28:1 and #548AF7 link text 4.18:1.
     Darker solid blue for filled buttons, brighter blue for text on dark. */
  --blue:#2B63DE; --blue2:#6E9BFF;
  /* syntax */
  --kw:#CF8E6D; --str:#6AAB73; --com:#8E939B; --num:#2AACB8;
  --attr:#B3AE60; --fn:#56A8F5; --type:#C77DBB;
  /* validated data palette, passes all six checks on light AND dark */
  --d1:#E8402A; --d2:#0F9B87; --d3:#C97A00; --d4:#3366E0; --d5:#B5399B;
  /* Ink: the same hues at text weight. The palette above is for marks, which
     need 3:1 against their surface; text needs 4.5:1, and the tool panels are
     fixed light skins, so one value serves both themes. */
  --ink-teal:#07685A; --ink-red:#B52D1A; --ink-amber:#7A4A00; --ink-blue:#2B57C4;
  /* The same three states as text on the chrome, which is dark here and
     light under [data-theme]. Marks use the data palette, ink is for text
     on the fixed light panels, and these are for text on the chrome. */
  --ok-text:#3FC7AE; --warn-text:#E3B341; --bad-text:#FF7A63;
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif;
  --railw:0px; --sidew:236px; --dockh:248px;
}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:.8438rem;
  -webkit-font-smoothing:antialiased;overflow:hidden;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
/* Never inherit the UA's default visited colour anywhere in the shell. */
a:visited{color:inherit;}
:focus-visible{outline:2px solid var(--blue2);outline-offset:1px;}
.mono{font-family:var(--mono);}
.ph{color:#E3B341;border-bottom:1px dashed rgba(227,179,65,.45);}

.ide{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;}

/* ───────────── title bar ───────────── */
.titlebar{display:flex;align-items:center;gap:10px;height:40px;flex:none;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--border);}
.pmark{width:18px;height:18px;}
.proj{font-weight:600;font-size:.8125rem;}
.branchpill{display:inline-flex;align-items:center;gap:5px;font-size:.7188rem;color:var(--dim);
  background:var(--panel2);border-radius:5px;padding:3px 9px;}
.tb-spacer{flex:1 1 auto;}
.runcfg{display:flex;align-items:center;gap:4px;}
.tb-icon{background:none;border:0;color:var(--dim);cursor:pointer;width:28px;height:26px;border-radius:5px;
  font-size:.75rem;transition:background .15s var(--ease),color .15s var(--ease);}
.tb-icon:hover{background:var(--hover);color:var(--text);}
.tb-icon.run{color:#5FB65F;}
/* Hire me: a compact button in the title bar. On a touch screen an invisible margin around it keeps
   it easy to tap without making it look any bigger. */
.hire-btn{background:var(--blue);color:#fff;text-decoration:none;font-size:.7813rem;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;height:24px;padding:0 13px;border-radius:5px;box-sizing:border-box;
  position:relative;white-space:nowrap;transition:background .15s var(--ease);}
/* "Hire me" has no descenders, so centring the line box left the letters a
   pixel high; the label (a flex item, so a block) is trimmed to its capitals */
.hire-btn > span{text-box:trim-both cap alphabetic;}
@supports not (text-box:trim-both cap alphabetic){ .hire-btn{padding-top:2px;} }
@media (pointer: coarse){ .hire-btn::before{content:"";position:absolute;inset:-12px -6px;} }
.hire-btn:hover{background:var(--blue2);}

/* ───────────── body ───────────── */
.body{flex:1 1 auto;display:flex;min-height:0;}

.rail{width:34px;flex:none;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:2px;}
.rail-btn{writing-mode:vertical-rl;background:none;border:0;color:var(--dim);cursor:pointer;
  padding:9px 6px;border-radius:5px;font-size:.7188rem;transition:background .15s var(--ease),color .15s var(--ease);}
.rail-btn:hover{background:var(--hover);color:var(--text);}
.rail-btn.active{background:var(--panel2);color:var(--text);}
.rail-sp{flex:1 1 auto;}

.sidebar{width:var(--sidew);flex:none;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.sidebar.collapsed{width:0;border-right:0;}
.side-h{display:flex;align-items:center;height:30px;padding:0 6px 0 12px;font-size:.7188rem;
  color:var(--dim);letter-spacing:.04em;flex:none;}
.side-x{margin-left:auto;flex:none;background:none;border:0;color:var(--dim);cursor:pointer;width:24px;height:24px;
  border-radius:4px;}
.side-x:hover{background:var(--hover);color:var(--text);}
.side-sw{display:none;}
.side-tab{background:none;border:0;border-radius:6px;color:var(--dim);cursor:pointer;font:inherit;font-size:.875rem;
  letter-spacing:0;min-height:36px;padding:0 12px;}
.side-tab:hover{background:var(--hover);color:var(--text);}
.side-tab.active{background:var(--panel2);color:var(--text);}
.tree{flex:1 1 auto;overflow-y:auto;padding:2px 0 10px;}
.tnode{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 0;cursor:pointer;font-size:.8125rem;
  color:var(--text);border:0;background:none;width:100%;text-align:left;line-height:1.45;
  transition:background .12s var(--ease);}
.tnode:hover{background:var(--hover);}
.tnode.sel{background:#2E436E;}
/* The tag rides a deep navy once selected, so --dim2 is not bright enough. */
.tnode.sel .tagx{color:#BCC2CC;}
.tnode .ic{width:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;}
.ic svg{display:block;}
.tnode .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tnode .tagx{margin-left:auto;font-size:.5938rem;color:var(--dim2);font-family:var(--mono);flex:none;}
.tfolder{display:flex;align-items:center;gap:6px;padding:4px 10px;color:var(--dim);font-size:.7813rem;
  font-weight:500;}
.side-foot{flex:none;border-top:1px solid var(--border);padding:10px 12px;}
.avatar-row{display:flex;align-items:center;gap:9px;}
.avatar-row img{width:32px;height:32px;border-radius:50%;border:1px solid var(--border2);}
.avatar-row b{display:block;font-size:.7813rem;}
.avatar-row span{display:block;font-size:.6563rem;color:var(--dim);}

/* ───────────── centre / editor ───────────── */
.centre{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);}
.tabbar{display:flex;flex:none;background:var(--panel);border-bottom:1px solid var(--border);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.tabbar::-webkit-scrollbar{height:4px;}
.tabbar::-webkit-scrollbar-thumb{background:var(--border2);}
.etab{display:inline-flex;align-items:center;gap:7px;padding:0 14px;height:34px;flex:none;
  background:none;border:0;border-right:1px solid var(--border);color:var(--dim);cursor:pointer;
  font-size:.7813rem;white-space:nowrap;position:relative;
  transition:background .14s var(--ease),color .14s var(--ease);}
.etab:hover{background:var(--hover);color:var(--text);}
.etab.active{background:var(--bg);color:var(--text);}
.etab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);}
.etab .ic{display:inline-flex;align-items:center;justify-content:center;flex:none;}
/* The tools are not files, so the bar says so: a rule, then a slightly
   quieter group, rather than eight things that all look like documents. */
.breadcrumbs{flex:none;height:26px;display:flex;align-items:center;gap:6px;padding:0 14px;
  font-size:.7188rem;color:var(--dim2);border-bottom:1px solid var(--border);
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
.breadcrumbs b{color:var(--dim);font-weight:400;}
.editor{flex:1 1 auto;overflow:auto;position:relative;}
/* the plain README in index.html: only ever seen without JavaScript */
.static{max-width:68ch;padding:28px var(--page-x,20px) 40px;color:var(--text);font-size:.9375rem;line-height:1.7;}
.static h1{font-size:2rem;line-height:1.1;letter-spacing:-.03em;margin:0 0 6px;}
.static h2{font-size:1.125rem;margin:28px 0 8px;}
.static .role{color:var(--dim);margin:0 0 16px;font-family:var(--mono);font-size:.8125rem;}
.static ul,.static ol{padding-left:22px;margin:0 0 12px;}
.static a{color:var(--blue2);}
.static .foot{color:var(--dim);font-size:.8125rem;margin-top:32px;}
.pane{display:none;min-height:100%;}
.pane.active{display:block;}

/* ───────────── generic bits reused by tool skins ───────────── */
.app{min-height:100%;}
.app-light{background:#F7F8FA;color:#1F2328;font-family:var(--sans);}
.browserbar{display:flex;align-items:center;gap:9px;padding:7px 12px;background:var(--panel2);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;}
.browserbar .dots{display:flex;gap:5px;}
.browserbar .dots i{width:9px;height:9px;border-radius:50%;background:var(--border2);display:block;}
.browserbar .url{flex:1 1 auto;background:var(--bg);border:1px solid var(--border);border-radius:5px;
  padding:4px 10px;font-family:var(--mono);font-size:.6875rem;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.browserbar .tagr{font-size:.6563rem;color:var(--dim2);font-family:var(--mono);flex:none;}

/* ───────────── 1. README editor ───────────── */
.mdsplit{display:grid;grid-template-columns:1fr;min-height:100%;}
@media (min-width:1080px){.mdsplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.code{font-family:var(--mono);font-size:.8125rem;line-height:1.75;padding:14px 0 40px;overflow:auto;
  border-right:1px solid var(--border);}
/* The source column is shorter than the rendered column, so pin it instead of
   leaving a tall empty gutter once the preview scrolls past it. */
@media (min-width:1080px){
  .code{position:sticky;top:0;align-self:start;max-height:calc(100vh - 160px);}
}
.code .ln{display:flex;}
.code .ln:hover{background:#26282C;}
.code .n{width:46px;flex:none;text-align:right;padding-right:14px;color:#818691;user-select:none;}
.code .c{white-space:pre-wrap;padding-right:18px;}
.h1{color:var(--attr);font-weight:700;} .kw{color:var(--kw);} .str{color:var(--str);}
.com{color:var(--com);font-style:italic;} .num{color:var(--num);} .fn{color:var(--fn);} .ty{color:var(--type);}
.mdprev{padding:26px 30px 60px;overflow-y:auto;}
.mdprev h1{font-size:clamp(1.75rem,3.6vw,2.625rem);margin:0 0 4px;font-weight:700;letter-spacing:-.03em;line-height:1.08;}
/* LinkedIn’s own blue, and the lighter one it uses on dark surfaces, beside the name */
/* sized to the cap height and sat on the baseline, so its foot lines up with the foot of the z */
.md-li{display:inline-block;vertical-align:baseline;margin-left:10px;color:#70B5F9;line-height:0;text-decoration:none;}
.md-li svg{display:block;width:.52em;height:.52em;}
/* README links carry a bottom border; the logo is not a text link and has none */
.mdprev a.md-li,.mdprev a.md-li:visited,.mdprev a.md-li:hover{border-bottom:0;color:#70B5F9;}
:root[data-theme="light"] .mdprev a.md-li,:root[data-theme="light"] .mdprev a.md-li:visited,:root[data-theme="light"] .mdprev a.md-li:hover{color:#0A66C2;}
.md-li:hover{opacity:.85;}
/* the icon is drawn small beside the name; the area that takes a tap is at least 24px, 44px on touch */
.md-li{position:relative;}
.md-li::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);}
@media (pointer: coarse){ .md-li::before{width:44px;height:44px;} }
:root[data-theme="light"] .md-li{color:#0A66C2;}
.mdprev .role{font-family:var(--mono);font-size:.7813rem;color:var(--blue2);margin:0 0 18px;}
.mdprev p{line-height:1.7;color:#C9CCD2;margin:0 0 14px;max-width:62ch;font-size:.875rem;}
.mdprev h2{font-size:.9375rem;margin:26px 0 10px;font-weight:600;color:var(--text);
  border-bottom:1px solid var(--border);padding-bottom:6px;}
.mdprev ul{margin:0 0 14px;padding-left:18px;color:#C9CCD2;line-height:1.8;font-size:.875rem;}
.mdprev code{font-family:var(--mono);font-size:.7813rem;background:var(--panel2);padding:1px 6px;border-radius:4px;}
/* Without an explicit :visited these go to the browser's default dark maroon,
   which is unreadable on this panel once the link has been clicked once. */
.mdprev a,.mdprev a:visited{color:var(--blue2);text-decoration:none;
  border-bottom:1px solid rgba(84,138,247,.4);}
.mdprev a:hover{color:var(--text);border-bottom-color:var(--text);}
.mdprev a code{color:inherit;background:rgba(84,138,247,.14);}
.mdprev a:hover code{background:rgba(255,255,255,.16);}
/* the README area a window proves, after its link */
.mdprev .md-area{margin-left:8px;font-family:var(--mono);font-size:.6875rem;color:var(--dim);white-space:nowrap;}
.mdprev .md-extra{color:var(--dim);}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;}
.badges span{font-family:var(--mono);font-size:.6563rem;background:var(--panel2);border:1px solid var(--border);
  border-radius:4px;padding:3px 8px;color:var(--dim);}
.mdcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.mdcta a{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:6px;
  text-decoration:none;font-size:.8125rem;font-weight:600;transition:filter .18s var(--ease);}
.mdcta a:hover{filter:brightness(1.15);}
.mdcta .prim{background:var(--blue);color:#fff;}
.mdcta .sec{background:var(--panel2);color:var(--text);border:1px solid var(--border2);}
.portrait-card{float:right;width:132px;margin:0 0 16px 22px;border:1px solid var(--border);
  border-radius:10px;overflow:hidden;background:var(--panel);}
/* height:auto, or the height attribute (130) held while the card narrowed to
   96px on phones, and the square portrait was squeezed to 94 by 130 */
.portrait-card img{display:block;width:100%;height:auto;}
.portrait-card .cap{font-family:var(--mono);font-size:.5938rem;color:var(--dim2);padding:6px 8px;text-align:center;}

/* ───────────── 2. CI pipeline (dark, IDE-native) ───────────── */
.ci{padding:16px 18px 40px;}
.ci-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.ci-h h1{margin:0;font-size:clamp(1rem,1.3vw,1.1875rem);font-weight:600;}
.chipx{display:inline-flex;align-items:center;gap:6px;font-size:.7188rem;border-radius:8px;padding:3px 11px;
  font-family:var(--mono);}
.chipx.ok{background:rgba(15,155,135,.16);color:var(--ok-text);}
.chipx.bad{background:rgba(232,64,42,.16);color:var(--bad-text);}
.chipx.mut{background:var(--panel2);color:var(--dim);}
.stages{display:flex;gap:0;overflow-x:auto;padding-bottom:6px;}
.stagecol{flex:1 1 0;min-width:168px;padding-right:20px;position:relative;}
.stagecol:last-child{padding-right:0;}
.stagecol::after{content:"";position:absolute;right:8px;top:36px;bottom:6px;width:1px;background:var(--border);}
.stagecol:last-child::after{display:none;}
.stagecol h2{margin:0 0 11px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim2);}
.jobb{display:flex;align-items:center;gap:8px;width:100%;background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:6px 11px;margin-bottom:7px;cursor:pointer;font-size:.7813rem;color:var(--text);
  text-align:left;transition:border-color .15s var(--ease),background .15s var(--ease);}
.jobb:hover{border-color:var(--blue);background:var(--panel2);}
.jobb[aria-pressed="true"]{border-color:var(--blue);background:#2A3550;}
.jobb .sd{width:14px;height:14px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:.5625rem;color:#0F1113;font-weight:700;}
.jobb .sd.p{background:#3FC7AE;} .jobb .sd.f{background:#FF6B52;}
.jobb .nm{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.joblog{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.joblog-h{display:flex;align-items:center;gap:10px;padding:8px 13px;background:var(--panel);
  border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.7188rem;flex-wrap:wrap;}
.joblog-b{background:#131417;color:#DFE1E5;font-family:var(--mono);font-size:.7813rem;line-height:1.85;padding:13px 16px;
  min-height:190px;max-height:280px;overflow-y:auto;white-space:pre-wrap;}
.joblog-b .g{color:#3FC7AE;} .joblog-b .y{color:#E3B341;} .joblog-b .r{color:#FF7A63;}
.joblog-b .d{color:#9096A0;} .joblog-b .w{color:#DFE1E5;font-weight:500;}

/* ───────────── 3. Cucumber report ───────────── */
/* the summary spans the window, as the Playwright report's does, with the
   counts as square cards; the features below keep their cards */
.cuke{background:#F1F3F1;color:#1C2320;min-height:100%;}
.cuke-sum{background:#fff;border-bottom:1px solid #DCE3DF;}
.cuke-body{padding:18px;}
.cuke-top{display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:16px 18px;}
.cuke-top h1{margin:0;font-size:clamp(1rem,1.4vw,1.25rem);font-weight:700;}
.cuke-top .sub{font-family:var(--mono);font-size:.6875rem;color:#5E6B66;margin-top:4px;}
.cuke-stats{flex:1 1 100%;display:flex;gap:10px;flex-wrap:wrap;}
.cuke-stats > *{border:1px solid #DCE3DF;border-radius:7px;padding:10px 16px;min-width:104px;box-sizing:border-box;}
.cuke-stats button{font:inherit;color:inherit;text-align:left;background:transparent;cursor:pointer;}
.cuke-stats button:hover{border-color:#9DB0A8;}
.cuke-stats button[aria-pressed="true"]{border-color:#0A6E5E;box-shadow:inset 0 0 0 1px #0A6E5E;background:#EEF6F3;}
.cuke-none{margin:0;padding:18px;border:1px dashed #DCE3DF;border-radius:8px;color:#5E6B66;font-size:.8125rem;}
.cuke-stats b{display:block;font-size:1.375rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;}
.cuke-stats span{font-size:.7188rem;color:#5E6B66;display:block;margin-top:5px;}
.cuke-bar{height:9px;background:#DCE3DF;display:flex;}
.cuke-bar i{height:100%;display:block;transform-origin:left;}
.cuke-feat{background:#fff;border:1px solid #DCE3DF;border-radius:8px;margin-bottom:11px;overflow:hidden;}
.cuke-fh{padding:13px 16px;border-bottom:1px solid #DCE3DF;background:#FAFBFA;}
.cuke-fh .kw{font-family:var(--mono);font-size:.7188rem;color:var(--ink-teal);font-weight:700;}
.cuke-fh h2{display:inline;margin:0;font-size:.9688rem;font-weight:700;}
.cuke-fh p{margin:7px 0 0;font-size:.8125rem;color:#5E6B66;line-height:1.55;max-width:70ch;}
.cuke-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.cuke-tags span{font-family:var(--mono);font-size:.75rem;color:var(--ink-blue);background:#EBF0FD;
  border-radius:4px;padding:3px 8px;}
.cscen{border-bottom:1px solid #DCE3DF;}
.cscen:last-child{border-bottom:0;}
.cscen-h{width:100%;display:flex;align-items:center;gap:11px;padding:11px 16px;background:none;border:0;
  cursor:pointer;text-align:left;font-size:.8438rem;color:#1C2320;transition:background .15s var(--ease);}
.cscen-h:hover{background:#F5F8F7;}
.cdot{width:8px;height:8px;border-radius:50%;flex:none;background:#DCE3DF;}
.cdot.p{background:#0F9B87;} .cdot.w{background:#C97A00;} .cdot.f{background:#C9301C;}
.cscen-h .kx{font-family:var(--mono);font-size:.6875rem;color:#5E6B66;flex:none;}
.cscen-h .nx{flex:1 1 auto;font-weight:600;}
.cscen-h .dx{font-family:var(--mono);font-size:.6563rem;color:#5E6B66;flex:none;}
.cscen-h .cv{transition:transform .2s var(--ease);flex:none;color:#5E6B66;}
.cscen[data-open="true"] .cv{transform:rotate(90deg);}
.csteps{display:none;padding:2px 16px 14px 36px;}
.cscen[data-open="true"] .csteps{display:block;}
.cstep{display:flex;align-items:baseline;gap:9px;padding:6px 9px;border-radius:5px;background:#E4F4F0;
  font-family:var(--mono);font-size:.75rem;line-height:1.55;margin-bottom:3px;}
.cstep.w{background:#FBF0DD;}
.cstep.f{background:#FCE9E6;}
.cstep.run{background:#EEF1F0;}
.cstep .k{font-weight:700;color:var(--ink-teal);flex:none;width:48px;}
.cstep.w .k{color:#7A4A00;} .cstep.f .k{color:#9F2A1C;} .cstep.run .k{color:#5E6B66;}
.cstep .t{flex:1 1 auto;} .cstep .d{color:#5E6B66;font-size:.625rem;flex:none;}
/* a step that points elsewhere: where the clients table was, now in Experience */
.cuke .cgo{display:inline-block;margin:5px 0 9px 57px;font-family:var(--mono);font-size:.75rem;font-weight:600;}
.cdoc{margin:5px 0 9px 57px;padding:10px 12px;background:#F5F7F6;border:1px solid #DCE3DF;
  font-family:var(--mono);font-size:.7188rem;line-height:1.7;color:#5E6B66;white-space:pre-wrap;border-radius:5px;}
.cuke-btn{font-family:var(--mono);font-size:.6875rem;border:1px solid var(--ink-teal);background:var(--ink-teal);color:#fff;
  border-radius:5px;padding:7px 13px;cursor:pointer;min-height:34px;}
.cuke-btn.gh{background:#fff;color:var(--ink-teal);}
.cuke-btn:hover{filter:brightness(1.08);}

/* ───────────── 4. Swagger ───────────── */
.swg{background:#fafafa;color:#3b4151;padding:18px;min-height:100%;font-family:var(--sans);}
.swg h1{margin:0 0 4px;font-size:clamp(1.3125rem,2.2vw,1.75rem);font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.swg .verx{background:#5C6373;color:#fff;font-family:var(--mono);font-size:.7188rem;border-radius:4px;padding:2px 8px;}
.swg .oas{border:2px solid #3b4151;border-radius:4px;font-family:var(--mono);font-size:.625rem;padding:1px 5px;}
.swg .lead{font-size:.875rem;line-height:1.6;margin:10px 0 16px;max-width:82ch;}
.swg .tagh{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid rgba(59,65,81,.2);
  padding-bottom:7px;margin:24px 0 8px;flex-wrap:wrap;}
.swg .tagh h2{margin:0;font-size:1.1875rem;font-weight:600;}
.swg .tagh span{font-size:.8125rem;color:#5A6577;}
.opx{border-radius:4px;margin:8px 0;border:1px solid;overflow:hidden;}
.opx.get{border-color:#61affe;background:rgba(97,175,254,.1);}
.opx.post{border-color:#49cc90;background:rgba(73,204,144,.1);}
.opx.del{border-color:#f93e3e;background:rgba(249,62,62,.1);}
.opx-s{width:100%;display:flex;align-items:center;gap:11px;padding:6px 9px;background:none;border:0;
  cursor:pointer;text-align:left;color:#3b4151;}
.mthd{font-size:.8125rem;font-weight:700;color:#fff;border-radius:3px;min-width:74px;text-align:center;
  padding:6px 0;flex:none;}
.get .mthd{background:#1E6FD9;} .post .mthd{background:#1A7A50;} .del .mthd{background:#B52D1A;}
.pathx{font-family:var(--mono);font-size:.875rem;font-weight:600;flex:none;}
.opdx{font-size:.7813rem;color:#5A6577;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.opx-b{display:none;background:#fff;border-top:1px solid rgba(59,65,81,.2);padding:15px 17px 18px;}
.opx[data-open="true"] .opx-b{display:block;}
.opx-b h3{margin:14px 0 8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid #d9dde3;padding-bottom:6px;}
.opx-b h5:first-child{margin-top:0;}
.opx-b p{font-size:.8438rem;line-height:1.55;margin:0 0 6px;}
.swbtn{border:1px solid #3b4151;background:#fff;color:#3b4151;border-radius:4px;padding:0 18px;
  min-height:36px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:background .18s var(--ease);}
.swbtn:hover{background:#f0f1f3;}
.swbtn.exe{background:#2E6FBF;border-color:#2E6FBF;color:#fff;flex:1 1 auto;}
.swbtn.exe:hover{background:#255C9F;}
pre.swcode{background:#41444e;color:#fff;font-family:var(--mono);font-size:.75rem;line-height:1.6;
  padding:12px 14px;border-radius:4px;overflow-x:auto;margin:8px 0 0;white-space:pre;}
pre.swcode.curl{background:#333;}
pre.swcode.sw-long{max-height:420px;overflow:auto;}
.swmeta{display:flex;gap:14px;font-family:var(--mono);font-size:.75rem;margin:10px 0 2px;flex-wrap:wrap;}
.sw200{color:#07685A;font-weight:700;}
.sw-bad{color:#B42318;font-weight:700;}
.sw-form{display:grid;gap:12px;margin-top:4px;}
.sw-param{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;align-items:start;}
.sw-pn{padding-top:7px;font-family:var(--mono);font-size:.7813rem;line-height:1.35;}
.sw-pn b{font-weight:600;}
.sw-req{color:#B42318;}
.sw-pt{display:block;font-size:.6875rem;color:#5A6577;margin-top:2px;}
.sw-in{font:inherit;font-size:.8438rem;color:#3b4151;background:#fff;border:1px solid #8A93A3;border-radius:4px;
  padding:7px 10px;width:100%;box-sizing:border-box;}
textarea.sw-in{resize:vertical;min-height:96px;line-height:1.5;}
.sw-in:focus{outline:2px solid #2E6FBF;outline-offset:0;border-color:#2E6FBF;}
.sw-param.bad .sw-in{border-color:#B42318;background:#FEF3F2;}
.sw-perr{grid-column:2;font-size:.75rem;color:#B42318;}
.sw-perr:empty{display:none;}
.sw-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
@media (max-width:620px){ .sw-param{grid-template-columns:1fr;} .sw-perr{grid-column:1;} }

/* ───────────── Elastic / Kibana, on the site's own counts ───────────── */
.kb{--kb-axis:#535966;--kb-grid:#E3E8F2;background:#F7F8FC;color:#343741;min-height:100%;font-family:var(--sans);
  display:flex;flex-direction:column;}
.kb-head{display:flex;align-items:center;gap:14px;height:48px;padding:0 var(--page-x);background:#FFFFFF;
  border-bottom:1px solid #D3DAE6;flex:none;min-width:0;}
.kb-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9375rem;color:#1A1C21;flex:none;}
.kb-crumbs{display:flex;gap:7px;font-size:.8125rem;color:#535966;min-width:0;overflow:hidden;white-space:nowrap;}
.kb-crumbs b{color:#1A1C21;font-weight:600;}
.kb-tabs{display:flex;gap:4px;padding:0 var(--page-x);background:#FFFFFF;border-bottom:1px solid #D3DAE6;flex:none;}
.kb-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0 12px;min-height:42px;
  font:inherit;font-size:.875rem;font-weight:500;color:#343741;cursor:pointer;}
.kb-tabs button:hover{color:#1A1C21;}
/* selection is colour and underline only, as in Kibana: a change of weight made the label jump */
.kb-tabs button[aria-selected="true"]{color:#0B5CAD;border-bottom-color:#0B64DD;}
.kb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px var(--page-x) 8px;}
.kb-bar h1{margin:0;font-size:1.25rem;font-weight:700;color:#1A1C21;flex:1 1 auto;min-width:0;}
.kb-range{display:inline-flex;border:1px solid #C9D0DC;border-radius:6px;overflow:hidden;background:#FFFFFF;}
.kb-range button{background:#FFFFFF;border:0;border-right:1px solid #C9D0DC;padding:0 12px;min-height:34px;
  font:inherit;font-size:.8125rem;font-weight:500;color:#343741;cursor:pointer;white-space:nowrap;}
.kb-range button:last-child{border-right:0;}
.kb-range button:hover{background:#F1F4FA;}
.kb-range button[aria-pressed="true"]{background:#E1ECFB;color:#0B5CAD;}
.kb-btn{background:#0B64DD;color:#FFFFFF;border:0;border-radius:6px;min-height:34px;padding:0 16px;font:inherit;
  font-size:.8125rem;font-weight:600;cursor:pointer;}
.kb-btn:hover{background:#0B5CAD;}
.kb-btn:disabled{opacity:.6;cursor:default;}
/* wide enough for "Updated 00:00:00", so "Loading…" does not pull the bar sideways */
.kb-upd{font-size:.75rem;color:#535966;min-width:9.6em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.kb-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;padding:8px var(--page-x) 16px;
  transition:opacity .2s var(--ease);}
/* EUI's indeterminate progress line: always 2px tall so nothing shifts, only drawn while loading */
.kb-progress{height:2px;margin:0 var(--page-x);overflow:hidden;position:relative;}
.kb[data-state="loading"] .kb-progress::after{content:"";position:absolute;inset:0;background:#0B64DD;
  transform-origin:left;animation:kb-load 1s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes kb-load{0%{transform:translateX(-100%) scaleX(.3)}60%{transform:translateX(30%) scaleX(.6)}100%{transform:translateX(100%) scaleX(.3)}}
.kb[data-state="loading"] .kb-body{opacity:.55;}
@media (prefers-reduced-motion:reduce){ .kb[data-state="loading"] .kb-progress::after{animation:none;transform:none;} }
.kb-panel{grid-column:span 12;background:#FFFFFF;border:1px solid #D3DAE6;border-radius:6px;padding:12px 14px;min-width:0;}
.kb-panel.s2{grid-column:span 2;} .kb-panel.s3{grid-column:span 3;} .kb-panel.s4{grid-column:span 4;} .kb-panel.s6{grid-column:span 6;}
.kb-ph{margin:0 0 10px;font-size:.8125rem;font-weight:600;color:#1A1C21;}
.kb-metric b{display:block;font-size:1.75rem;font-weight:700;line-height:1.1;color:#1A1C21;font-variant-numeric:tabular-nums;}
.kb-metric span{display:block;font-size:.7813rem;color:#535966;margin-top:5px;}
.kb-aud b{overflow-wrap:anywhere;}
.kb-aud span{color:#1A1C21;font-weight:600;}
.kb-aud small{display:block;font-size:.75rem;color:#535966;margin-top:3px;line-height:1.4;}
.kb-chart{min-height:230px;}
.kb-chart .u-legend{font-size:.75rem;color:#343741;}
/* the drag-to-zoom selection; uPlot’s own is 7% black, which vanishes on a dark panel */
.kb-chart .u-select{background:rgba(11,100,221,.16);box-shadow:inset 1px 0 0 #0B64DD,inset -1px 0 0 #0B64DD;}
.kb-hint{margin:6px 0 0;font-size:.7188rem;color:#535966;}
.kb-bars{display:grid;gap:8px;}
.kb-brow{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:.8125rem;}
.kb-brow .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-brow .tr{height:10px;background:#EEF1F7;border-radius:3px;overflow:hidden;}
.kb-brow .tr i{display:block;height:100%;background:#6092C0;transform-origin:left;}
.kb-brow em{font-style:normal;font-variant-numeric:tabular-nums;color:#1A1C21;}
.kb-scroll{overflow-x:auto;}
.kb-table{width:100%;border-collapse:collapse;font-size:.8125rem;}
.kb-table th{text-align:left;font-weight:600;color:#535966;border-bottom:1px solid #D3DAE6;padding:6px 8px;white-space:nowrap;}
.kb-table td{border-bottom:1px solid #EEF1F7;padding:7px 8px;color:#343741;}
.kb-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.kb-table td.mono{font-family:var(--mono);font-size:.75rem;white-space:nowrap;}
.kb-sub{font-size:.75rem;color:#535966;margin:6px 0 0;}
.kb-empty{color:#535966;font-size:.8125rem;margin:4px 0;}
.kb-callout{background:#FBEAE8;border-color:#D4574B;}
.kb-callout b{color:#8F2419;font-size:.875rem;}
.kb-callout p{color:#5E1A12;font-size:.8125rem;margin:6px 0 0;line-height:1.55;}
.kb-vh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8125rem;font-weight:600;color:#1A1C21;}
.kb-vital > b{display:block;font-size:1.625rem;font-weight:700;margin-top:8px;color:#1A1C21;font-variant-numeric:tabular-nums;}
.kb-rate{font-size:.7188rem;font-weight:600;border-radius:4px;padding:2px 7px;white-space:nowrap;}
.kb-rate.good{background:#DDF3EC;color:#0A5E4D;} .kb-rate.ni{background:#FBF1D2;color:#6B4E00;} .kb-rate.poor{background:#FBE3E0;color:#8F2419;}
.kb-stack{display:flex;height:8px;border-radius:3px;overflow:hidden;margin:10px 0 7px;background:#EEF1F7;}
.kb-stack i,.kb-hist i{display:block;}
.kb-stack i{height:100%;}
.kb-stack .g,.kb-hist .g{background:#54B399;} .kb-stack .n,.kb-hist .n{background:#D6BF57;} .kb-stack .p,.kb-hist .p{background:#E7664C;}
.kb-legend{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:.75rem;color:#535966;}
.kb-hist{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:6px;border-bottom:1px solid #D3DAE6;}
.kb-hist div{flex:1 1 0;height:100%;display:flex;align-items:flex-end;}
.kb-hist i{width:100%;min-height:1px;border-radius:2px 2px 0 0;}
.kb-hist-x{display:flex;justify-content:space-between;font-size:.7188rem;color:#535966;margin-top:5px;}
/* a data source note, as quiet as the chart hint: dim, no link colour until hovered */
.kb-src{margin:8px 0 0;font-size:.6875rem;line-height:1.4;color:#535966;}
.kb-src a{color:inherit;text-decoration:none;}
.kb-src a:hover{color:#0B5CAD;text-decoration:underline;}
@media (max-width:1100px){ .kb-panel.s2{grid-column:span 4;} .kb-panel.s3,.kb-panel.s4{grid-column:span 6;} }
@media (max-width:760px){
  .kb-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .kb-panel.s2{grid-column:span 1;} .kb-panel.s4,.kb-panel.s6,.kb-panel{grid-column:span 2;}
  .kb-panel.kb-metric{grid-column:span 1;}
  .kb-crumbs span,.kb-crumbs b{flex:none;} .kb-crumbs > :nth-child(-n+2){display:none;}
  .kb-bar h1{flex-basis:100%;font-size:1.125rem;}
  .kb-range{flex:1 1 auto;} .kb-range button{flex:1 1 0;padding:0 6px;min-height:40px;}
  .kb-btn{min-height:40px;}
  .kb-tabs button{min-height:44px;}
  .kb-metric b{font-size:1.5rem;}
}

/* ───────────── 5. Playwright report ───────────── */
.pw{background:#fff;color:#24292f;min-height:100%;font-family:var(--sans);}
.pw-h{padding:18px 20px 0;}
.pw-h h1{margin:0 0 12px;font-size:clamp(1.0625rem,1.6vw,1.375rem);font-weight:600;}
.pw-cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.pw-card{border:1px solid #d0d7de;border-radius:7px;padding:10px 16px;min-width:104px;}
.pw-card b{display:block;font-size:1.375rem;font-weight:600;line-height:1;}
.pw-card span{font-size:.7188rem;color:#57606a;display:block;margin-top:5px;}
/* Ink, not the data palette: a two-digit count is measured by contrast.spec,
   and #0F9B87 on white is 3.47:1. A single digit was skipped, which is how
   this hid until the suite passed ten specs. */
button.pw-card{font:inherit;color:inherit;text-align:left;background:transparent;cursor:pointer;}
button.pw-card:hover{border-color:#8C959F;}
button.pw-card[aria-pressed="true"]{border-color:#24292f;box-shadow:inset 0 0 0 1px #24292f;background:#F6F8FA;}
.pw-card.ok b{color:var(--ink-teal);} .pw-card.bad b{color:var(--ink-red);} .pw-card.warnc b{color:var(--ink-amber);}
.pw-filters{display:flex;gap:2px;border-bottom:1px solid #d0d7de;padding:0 20px;flex-wrap:wrap;}
.pw-filters button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px;
  font-size:.8438rem;color:#57606a;cursor:pointer;min-height:40px;}
.pw-filters button:hover{color:#24292f;}
.pw-filters button[aria-pressed="true"]{color:#24292f;border-bottom-color:#E8402A;text-shadow:.4px 0 0 currentColor;}
.pw-list{padding:6px 20px 30px;}
.pw-spec{border-bottom:1px solid #eaeef2;}
.pw-row{width:100%;display:flex;align-items:center;gap:11px;padding:10px 4px;background:none;border:0;
  cursor:pointer;text-align:left;font-size:.8438rem;color:#24292f;}
.pw-row:hover{background:#f6f8fa;}
.pw-ico{width:16px;height:16px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.625rem;color:#fff;font-weight:700;}
.pw-ico.p{background:#0F9B87;} .pw-ico.f{background:#E8402A;} .pw-ico.k{background:#C97A00;}
.pw-row .file{font-family:var(--mono);font-size:.7188rem;color:#57606a;flex:none;}
.pw-row .ttl{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pw-row .proj{font-size:.6563rem;background:#eaeef2;border-radius:10px;padding:2px 9px;color:#57606a;flex:none;}
.pw-row .dur{font-family:var(--mono);font-size:.7188rem;color:#57606a;flex:none;width:58px;text-align:right;}
.pw-steps{display:none;padding:2px 0 14px 44px;}
.pw-spec[data-open="true"] .pw-steps{display:block;}
.pw-step{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:.75rem;
  padding:3px 0;color:#24292f;}
.pw-step .sdur{margin-left:auto;color:#57606a;font-size:.6563rem;}
.pw-step .tick{color:#0F9B87;}
.pw-attach{margin:8px 0 0 0;display:flex;gap:8px;flex-wrap:wrap;}
.pw-attach span{font-size:.6563rem;border:1px solid #d0d7de;border-radius:4px;padding:3px 8px;color:#57606a;
  font-family:var(--mono);}


/* ───────────── 7. Jira board ───────────── */
.jira{background:#F7F8F9;color:#172B4D;min-height:100%;padding:0;font-family:var(--sans);display:grid;position:relative;
  grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr;transition:grid-template-columns .2s var(--ease);}
.jira.collapsed{grid-template-columns:16px minmax(0,1fr);}
.jira-main{min-width:0;padding:16px;}
.jira-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.jira-h h1{margin:0;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:600;}
.jira-h .sp{font-size:.7813rem;color:#5E6C84;}
.jira-h .days{margin-left:auto;background:#fff;border:1px solid #DFE1E6;border-radius:4px;
  padding:5px 11px;font-size:.75rem;color:#5E6C84;}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
@media (min-width:980px){.cols{grid-template-columns:repeat(4,minmax(0,1fr));}}
.col{background:#F1F2F4;border-radius:5px;padding:9px;min-height:180px;}
.col h2{margin:0 0 9px;font-size:.7188rem;font-weight:600;letter-spacing:.04em;color:#5E6C84;
  text-transform:uppercase;display:flex;gap:7px;align-items:center;}
.col h2 em{font-style:normal;background:#DFE1E6;border-radius:9px;padding:0 7px;font-size:.6563rem;}
.jcard{background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(9,30,66,.2);padding:10px 11px;
  margin-bottom:8px;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease);}
.jcard:hover{background:#F4F5F7;transform:translateY(-1px);}
.jcard p{margin:0 0 9px;font-size:.8438rem;line-height:1.45;}
.jcard p .jlogo{display:inline-block;width:16px;height:16px;border-radius:3px;vertical-align:-3px;margin-right:7px;box-shadow:0 0 0 1px #DFE1E6;}
.jlabels{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px;}
.jtop{display:flex;align-items:flex-start;gap:8px;}
.jtop .jira-loz{flex:none;margin-left:auto;}
.jlabels span{font-size:.625rem;border-radius:3px;padding:2px 7px;font-weight:600;letter-spacing:.02em;}
.jfoot{display:flex;align-items:center;gap:8px;}
.jkey{font-family:var(--mono);font-size:.6875rem;color:#5E6C84;}
.jtype{width:14px;height:14px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.5625rem;color:#fff;font-weight:700;flex:none;}
.jpts{margin-left:auto;background:#DFE1E6;border-radius:9px;font-size:.6563rem;padding:1px 8px;color:#42526E;font-weight:600;}
.javatar{width:22px;height:22px;border-radius:50%;background:var(--ink-teal);color:#fff;font-size:.5938rem;
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;}

/* ───────────── 8. Docker Desktop ───────────── */
.dock-app{background:#fff;color:#17191E;min-height:100%;font-family:var(--sans);}
/* two lines on every tab: the title, then what it holds; the search sits beside both */
.dk-h{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:3px;align-items:center;
  padding:14px 18px;border-bottom:1px solid #E3E5E8;}
.dk-h h1{margin:0;grid-column:1;grid-row:1;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:600;}
.dk-h .cnt{grid-column:1;grid-row:2;font-size:.7813rem;color:#677285;}
.dk-h .dk-search{grid-column:2;grid-row:1 / span 2;}
@media (max-width:640px){
  .dk-h .dk-search{grid-column:1 / -1;grid-row:3;margin:10px 0 0;width:100%;box-sizing:border-box;}
}
.dk-search{margin-left:auto;background:#F4F5F7;border:1px solid #E3E5E8;border-radius:6px;padding:6px 12px;
  font-size:.7813rem;color:#8993A4;min-width:180px;}
.dk-tabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid #E3E5E8;flex-wrap:wrap;}
.dk-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;font-size:.8438rem;
  color:#677285;cursor:pointer;min-height:40px;}
/* the picked tab looks heavier through a hairline shadow, not a bolder weight:
   bold text is wider, and every tab after it moved sideways on each click */
.dk-tabs button[aria-pressed="true"]{color:#086DD7;border-bottom-color:#086DD7;text-shadow:.4px 0 0 currentColor;}
table.dk{width:100%;border-collapse:collapse;font-size:.8125rem;}
table.dk th{text-align:left;font-size:.6875rem;color:#677285;font-weight:600;padding:9px 14px;
  border-bottom:1px solid #E3E5E8;letter-spacing:.03em;}
table.dk td{padding:11px 14px;border-bottom:1px solid #F0F1F3;vertical-align:middle;}
table.dk tr:hover td{background:#F8F9FB;}
.dk-name{display:flex;align-items:center;gap:9px;}
.dk-name b{font-weight:600;font-size:.8438rem;}
.dk-name .img{font-family:var(--mono);font-size:.6563rem;color:#677285;display:block;}
.dk-note{font-size:.7188rem;color:#677285;margin-top:3px;}
table.dk td:nth-child(3){color:#677285;}
.dk-state{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;}
.dk-state i{width:7px;height:7px;border-radius:50%;background:#0F9B87;display:block;}
.dk-state.warn i{background:#C97A00;}
.dk-bar{width:78px;height:6px;background:#EDEFF2;border-radius:3px;overflow:hidden;display:inline-block;
  vertical-align:middle;margin-right:8px;}
.dk-bar i{display:block;height:100%;border-radius:3px;transform-origin:left;transform:scaleX(0);
  transition:transform 1s var(--ease);}
.dk-port{font-family:var(--mono);font-size:.6875rem;color:#086DD7;display:inline-flex;align-items:center;gap:4px;min-height:24px;}
.dk-act{display:flex;gap:5px;}
.dk-act button{background:none;border:0;cursor:pointer;color:#677285;font-size:.75rem;width:26px;height:26px;
  border-radius:5px;}
.dk-act button:hover{background:#EDEFF2;color:#17191E;}
.dk-act button[aria-pressed="true"]{background:#E3EDFB;color:#0A58C2;}
.dk-compose{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px var(--page-x) 10px;
  border-bottom:1px solid #E1E3E8;font-size:.7813rem;color:#677285;}
.dk-compose b{font-size:.875rem;color:#17191E;font-weight:600;}
.dk-compose .img{font-family:var(--mono);font-size:.6875rem;}
.dk-tag{display:inline-block;margin-left:8px;font-size:.6563rem;font-weight:600;color:#5B4A00;background:#FFF1BF;
  border-radius:4px;padding:1px 6px;vertical-align:middle;}
.dk-logs{margin:14px var(--page-x) 0;border:1px solid #E1E3E8;border-radius:8px;overflow:hidden;}
.dk-logs-h{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:#F4F5F7;border-bottom:1px solid #E1E3E8;font-size:.7813rem;color:#677285;}
.dk-logs-h b{color:#17191E;font-size:.8125rem;}
.dk-logs-x{margin-left:auto;background:none;border:0;border-radius:5px;width:28px;height:28px;cursor:pointer;color:#677285;}
.dk-logs-x:hover{background:#E6E8EC;color:#17191E;}
.dk-log{margin:0;padding:12px 14px;background:#17191E;color:#D7DBE2;font-family:var(--mono);font-size:.7188rem;line-height:1.6;
  max-height:320px;overflow:auto;white-space:pre;}


/* ───────────── moved out of inline styles, so the dark theme can reach them ───────────── */
.cuke-foot{padding:10px 18px;border-top:1px solid #DCE3DF;font-family:var(--mono);font-size:.6875rem;color:#5E6B66;}
.pw-lede{margin:8px 0 14px;color:#57606a;font-size:.8438rem;line-height:1.6;max-width:82ch;}
.pw-prog{height:4px;background:#eaeef2;border-radius:2px;overflow:hidden;margin:0 0 14px;opacity:0;transition:opacity .2s;}
.pw-none{color:#57606a;padding:18px 4px;}
/* Jira’s top bar: the product, its menus, Create and search */
.jira-top{grid-column:1 / -1;display:flex;align-items:center;gap:6px;min-height:56px;padding:0 12px;background:#FFFFFF;
  border-bottom:1px solid #DFE1E6;box-sizing:border-box;}
.jira-logo{display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 4px;color:#0C66E4;}
.jira-logo b{font-size:1.0625rem;font-weight:700;color:#172B4D;letter-spacing:-.01em;}
.jira-tnav{display:flex;align-items:center;gap:2px;min-width:0;}
.jira-tbtn{height:28px;padding:0 10px;border:0;border-radius:3px;background:transparent;color:#44546F;font:inherit;
  font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;}
.jira-tbtn:hover{background:#091E420F;color:#172B4D;}
.jira-tbtn[aria-expanded="true"]{background:#E9F2FF;color:#0C66E4;}
/* the same height as the menu buttons beside it, as in Jira’s own bar */
.jira-tcreate{height:28px;padding:0 10px;margin-left:6px;border:0;border-radius:3px;background:#0C66E4;color:#FFFFFF;
  font:inherit;font-size:.875rem;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;}
.jira-tcreate:hover{background:#0055CC;}
.jira-tsearch{margin-left:auto;width:240px;}
.jira-menu{position:absolute;z-index:30;min-width:230px;background:#FFFFFF;border-radius:4px;padding:6px 0;
  box-shadow:0 8px 12px rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31);}
.jira-mhead{margin:6px 16px 4px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#626F86;}
.jira-mitem{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 16px;font:inherit;
  font-size:.875rem;color:#172B4D;cursor:pointer;}
.jira-mitem small{display:block;font-size:.75rem;color:#626F86;}
.jira-mitem:hover,.jira-mitem:focus-visible{background:#091E420F;}
.jira-mitem.on{background:#E9F2FF;color:#0C66E4;}
/* collapse: Jira’s round chevron on the sidebar’s edge */
.jira-fold{position:absolute;top:72px;left:208px;z-index:3;width:24px;height:24px;padding:0;border-radius:50%;
  background:#FFFFFF;border:1px solid #DFE1E6;box-shadow:0 1px 2px rgba(9,30,66,.25);color:#44546F;font:inherit;
  font-size:1.0625rem;line-height:1.25rem;cursor:pointer;transition:transform .2s var(--ease);}
.jira-fold:hover{background:#0C66E4;border-color:#0C66E4;color:#FFFFFF;}
.jira.collapsed .jira-fold{transform:translateX(-204px);}
.jira.collapsed .jira-side{overflow:hidden;padding-left:0;padding-right:0;}
.jira.collapsed .jira-side > *{visibility:hidden;}
.jira-side{grid-row:2;min-width:0;}
.jira-main{grid-row:2;}
.jira-sfoot{margin-top:auto;padding-top:12px;border-top:1px solid #DFE1E6;}
.jira-tm{margin:8px 10px 0;font-size:.75rem;}
/* project settings: Jira’s Details page, read only */
.jira-set{max-width:680px;}
.jira-field{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #DFE1E6;}
.jira-field .jira-cl{margin:0;}
.jira-fv{font-size:.875rem;color:#172B4D;}
.jira-lead{display:inline-flex;align-items:center;gap:8px;}
.jira-types{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.jira-types > span{display:inline-flex;align-items:center;gap:6px;}
.jira-set > .jira-dim{margin-top:14px;}
/* the project sidebar, as in Jira: the project, then its pages */
.jira-side{background:#FFFFFF;border-right:1px solid #DFE1E6;padding:16px 10px 12px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;align-self:start;min-height:calc(100vh - 160px);box-sizing:border-box;}
.jira-sproj{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;}
.jira-sproj b{display:block;font-size:.875rem;font-weight:600;color:#172B4D;}
.jira-sproj small{display:block;font-size:.75rem;color:#626F86;}
.jira-sproj .jira-pico{width:28px;height:28px;flex:none;}
.jira-sgrp{margin:12px 8px 4px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#626F86;}
.jira-snav{display:block;width:100%;text-align:left;border:0;border-radius:3px;background:transparent;color:#44546F;
  font:inherit;font-size:.875rem;padding:8px 10px;cursor:pointer;position:relative;}
.jira-snav:hover{background:#091E420F;color:#172B4D;}
.jira-snav[aria-current="page"]{background:#E9F2FF;color:#0C66E4;font-weight:600;}
.jira-snav[aria-current="page"]::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:#0C66E4;}
.jira-crumb{margin:0 0 6px;font-size:.8125rem;color:#44546F;}
/* backlog: the sprint as rows */
.jira-sec{background:#F1F2F4;border-radius:4px;padding:8px;margin-bottom:14px;}
.jira-sech{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 4px 8px;font-size:.875rem;}
.jira-dim{color:#626F86;font-size:.8125rem;}
.jira-pts{margin-left:auto;display:flex;gap:4px;}
.jira-ptc{min-width:22px;text-align:center;border-radius:9px;padding:1px 7px;font-size:.75rem;font-weight:600;}
.jira-ptc.todo{background:#DFE1E6;color:#44546F;} .jira-ptc.prog{background:#CCE0FF;color:#0055CC;} .jira-ptc.done{background:#BAF3DB;color:#216E4E;}
.jira-rows{list-style:none;margin:0;padding:0;background:#FFFFFF;border:1px solid #DFE1E6;border-radius:3px;}
.jira-row{display:grid;grid-template-columns:16px auto minmax(0,1fr) auto auto 34px 24px;align-items:center;gap:10px;
  padding:7px 10px;border-top:1px solid #DFE1E6;font-size:.875rem;}
.jira-row:first-child{border-top:0;}
.jira-row:hover{background:#F7F8F9;}
.jira-row.mine{box-shadow:inset 0 0 0 2px #0C66E4;}
.jira-row .jlabels{margin:0;flex-wrap:nowrap;}
.jira-row .jpts{margin:0;text-align:center;}
.jira-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jira-loz{font-size:.6875rem;font-weight:700;text-transform:uppercase;border-radius:3px;padding:1px 5px;white-space:nowrap;}
.jira-loz.todo{background:#DFE1E6;color:#44546F;} .jira-loz.prog{background:#CCE0FF;color:#0055CC;}
.jira-loz.rev{background:#DFD8FD;color:#5E4DB2;} .jira-loz.done{background:#BAF3DB;color:#216E4E;}
.jira-empty{background:#FFFFFF;border:1px dashed #B3B9C4;border-radius:3px;padding:12px 14px;}
.jira-empty p{margin:0 0 6px;font-size:.875rem;color:#44546F;}
.jira-add{border:0;border-radius:3px;background:transparent;color:#44546F;font:inherit;font-size:.875rem;font-weight:500;padding:6px 8px;margin-left:-8px;cursor:pointer;}
.jira-add:hover{background:#091E420F;color:#172B4D;}
/* the sprint report, counted from the board */
.jira-rep > .jira-dim{margin:0 0 12px;}
.jira-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.jira-tile{background:#FFFFFF;border:1px solid #DFE1E6;border-radius:4px;padding:12px 14px;}
.jira-tile b{display:block;font-size:1.375rem;font-weight:600;color:#172B4D;font-variant-numeric:tabular-nums;}
.jira-tile span{display:block;margin-top:2px;font-size:.75rem;color:#44546F;}
.jira-split{background:#FFFFFF;border:1px solid #DFE1E6;border-radius:4px;padding:12px 14px;margin-bottom:16px;}
.jira-splitbar{display:flex;height:14px;border-radius:3px;overflow:hidden;background:#DFE1E6;}
.jira-splitbar i,.jira-legend i{display:block;}
.jira-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:.7813rem;color:#44546F;}
.jira-legend span{display:inline-flex;align-items:center;gap:6px;}
.jira-legend i{width:10px;height:10px;border-radius:2px;}
.jira-splitbar .todo,.jira-legend .todo{background:#8590A2;} .jira-splitbar .prog,.jira-legend .prog{background:#1D7AFC;}
.jira-splitbar .rev,.jira-legend .rev{background:#8270DB;} .jira-splitbar .done,.jira-legend .done{background:#22A06B;}
.jira-tnote{margin:0 4px 8px;}
.jira-tscroll{overflow-x:auto;}
.jira-table{width:100%;border-collapse:collapse;background:#FFFFFF;border:1px solid #DFE1E6;font-size:.875rem;}
.jira-table th{text-align:left;font-size:.75rem;font-weight:600;color:#44546F;padding:7px 10px;border-bottom:2px solid #DFE1E6;white-space:nowrap;}
.jira-table td{padding:7px 10px;border-top:1px solid #DFE1E6;vertical-align:middle;}
.jira-table .num{text-align:right;font-variant-numeric:tabular-nums;color:#172B4D;}
.jira-table td.jkey{white-space:nowrap;}
@media (max-width:760px){
  .jira,.jira.collapsed{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;}
  .jira-main{grid-row:3;}
  .jira-side{position:static;min-height:0;}
  .jira-fold,.jira-tm,.jira-tnav .jira-tbtn[data-menu="projects"],.jira-tnav .jira-tbtn[data-menu="dashboards"]{display:none;}
  .jira-sfoot{margin:0;padding:0;border:0;}
  .jira-top{flex-wrap:wrap;padding:8px var(--page-x);gap:6px;}
  .jira-tsearch{width:100%;order:3;margin-left:0;}
  .jira-field{grid-template-columns:minmax(0,1fr);gap:4px;}
  .jira-side{flex-direction:row;align-items:center;gap:4px;padding:8px var(--page-x);border-right:0;border-bottom:1px solid #DFE1E6;overflow-x:auto;}
  .jira-sproj{padding:0 8px 0 0;} .jira-sproj small,.jira-sgrp{display:none;}
  .jira-snav{width:auto;white-space:nowrap;}
  .jira-snav[aria-current="page"]::before{left:8px;right:8px;top:auto;bottom:0;width:auto;height:3px;border-radius:2px 2px 0 0;}
  .jira-row{grid-template-columns:16px auto minmax(0,1fr) auto;} .jira-row .jlabels,.jira-row .jpts,.jira-row .javatar{display:none;}
  .jira-sum{white-space:normal;}
}
@media (pointer: coarse){ .jira-snav,.jira-add,.jira-new{min-height:44px;} }
/* the board toolbar: search, assignees, quick filters, all of them live */
.jira-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 14px;}
.jira-bar[hidden]{display:none;}
.jira-search{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;width:190px;box-sizing:border-box;
  background:#FFFFFF;border:1px solid #8590A2;border-radius:3px;color:#626F86;}
.jira-search:focus-within{border-color:#0C66E4;box-shadow:inset 0 0 0 1px #0C66E4;}
.jira-search input{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:.875rem;color:#172B4D;}
.jira-search input::placeholder{color:#626F86;opacity:1;}
.jira-people{display:flex;align-items:center;padding-left:4px;}
.jira-av{width:32px;height:32px;margin-left:-4px;border-radius:50%;border:2px solid #F7F8F9;background:#07685A;color:#FFFFFF;
  font:inherit;font-size:.6875rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.jira-av.you{background:#0C66E4;}
.jira-av:hover{transform:translateY(-2px);}
.jira-av[aria-pressed="true"]{box-shadow:0 0 0 2px #0C66E4;position:relative;z-index:1;}
.jira-quick{display:flex;gap:4px;flex-wrap:wrap;}
.jira-qf{height:32px;padding:0 10px;border:0;border-radius:3px;background:#091E420F;color:#44546F;
  font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;}
.jira-qf:hover{background:#091E4224;}
.jira-qf[aria-pressed="true"]{background:#E9F2FF;color:#0C66E4;box-shadow:inset 0 0 0 1px #0C66E4;}
.jira-clear{border:0;background:transparent;color:#0C66E4;font:inherit;font-size:.875rem;cursor:pointer;padding:0 4px;height:32px;}
.jira-clear:hover{text-decoration:underline;}
.jira-shown{font-size:.7813rem;color:#44546F;}
.jira-none{margin:6px 2px;font-size:.7813rem;color:#626F86;}
@media (max-width:560px){ .jira-search{width:100%;} }
@media (pointer: coarse){ .jira-search,.jira-qf,.jira-clear{height:44px;} .jira-av{width:44px;height:44px;} }
.jcard.mine{box-shadow:0 0 0 2px #0C66E4,0 1px 2px rgba(9,30,66,.2);}
.javatar.you{background:#0C66E4;}
/* Hire me: Jira’s Create issue dialog, in Atlassian’s light look; the dark one is generated */
.jira-create{background:#FFFFFF;color:#172B4D;border-radius:8px;width:min(620px,100%);max-height:90vh;max-height:calc(100dvh - 40px);display:flex;
  flex-direction:column;box-shadow:0 8px 12px rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31);font-family:var(--sans);
  animation:modalin .22s var(--ease);}
.jira-ch{display:flex;align-items:center;gap:10px;padding:20px 24px 8px;flex:none;}
.jira-ch h2{margin:0;font-size:1.25rem;font-weight:600;color:#172B4D;}
.jira-cx{margin-left:auto;width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:#44546F;
  cursor:pointer;font-size:.9375rem;}
.jira-cx:hover{background:#091E420F;}
.jira-cb{overflow:auto;padding:4px 24px 0;display:flex;flex-direction:column;min-height:0;}
.jira-req{margin:0 0 14px;font-size:.75rem;color:#44546F;}
.jira-star{color:#AE2E24;}
.jira-cf{margin-bottom:14px;min-width:0;}
.jira-cl{display:block;font-size:.75rem;font-weight:600;color:#44546F;margin-bottom:5px;}
.jira-ci{display:block;width:100%;box-sizing:border-box;min-height:36px;padding:7px 9px;font:inherit;font-size:.875rem;
  color:#172B4D;background:#FFFFFF;border:1px solid #8590A2;border-radius:3px;}
.jira-ci::placeholder{color:#626F86;opacity:1;}
textarea.jira-ci{resize:vertical;min-height:110px;line-height:1.5;}
select.jira-ci{cursor:pointer;}
.jira-ci:hover{background:#F7F8F9;}
.jira-ci:focus{outline:none;border-color:#0C66E4;box-shadow:inset 0 0 0 1px #0C66E4;background:#FFFFFF;}
.jira-cf.bad .jira-ci{border-color:#C9372C;box-shadow:inset 0 0 0 1px #C9372C;}
.jira-ce{margin:5px 0 0;font-size:.75rem;color:#AE2E24;}
.jira-ce:empty{display:none;}
.jira-ch2{margin:5px 0 0;font-size:.75rem;color:#44546F;}
/* an opened issue: the Create dialog's frame, Jira's issue layout inside */
.jira-issue{width:min(760px,100%);}
.jira-icrumb{display:flex;align-items:center;gap:8px;font-size:.875rem;color:#44546F;min-width:0;}
.jira-issue .jira-ib{padding-bottom:24px;}
.jira-it{margin:4px 0 10px;font-size:1.375rem;font-weight:600;line-height:1.3;color:#172B4D;}
.jira-istatus{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;font-size:.75rem;}
.jira-istatus .jira-loz{font-size:.75rem;padding:3px 8px;}
.jira-icols{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:start;}
.jira-idesc{margin:6px 0 0;font-size:.875rem;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;}
/* a client epic: what I did there, under the description */
.jira-iside{margin:0;padding:12px 14px;border:1px solid #DFE1E6;border-radius:3px;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:10px 14px;font-size:.8125rem;align-items:center;}
.jira-iside dt{color:#44546F;font-weight:600;font-size:.75rem;}
.jira-iside dd{margin:0;min-width:0;}
.jira-row{cursor:pointer;}
@media (max-width:640px){ .jira-icols{grid-template-columns:1fr;gap:18px;} .jira-it{font-size:1.1875rem;} }
.jira-proj{display:flex;align-items:center;gap:8px;min-height:36px;font-size:.875rem;color:#172B4D;}
.jira-pico{width:22px;height:22px;border-radius:4px;background:#C8452A;color:#FFFFFF;font-size:.75rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;}
.jira-hr{border:0;border-top:1px solid #DFE1E6;margin:4px 0 16px;}
.jira-sub{margin:0 0 10px;font-size:.875rem;font-weight:600;color:#172B4D;}
.jira-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}
.jira-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.jira-cfoot{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FFFFFF;
  margin:4px -24px 0;padding:14px 24px 18px;border-top:1px solid #DFE1E6;}
.jira-alt{margin:0;font-size:.7813rem;color:#44546F;}
.jira-alt a{color:#0C66E4;}
.jira-status{flex:1 1 100%;order:-1;margin:0;font-size:.7813rem;color:#44546F;}
.jira-status:empty{display:none;}
.jira-status.bad{color:#AE2E24;}
.jira-cbtns{margin-left:auto;display:flex;gap:6px;}
.jira-cbtn{min-height:32px;padding:0 12px;border-radius:3px;border:0;font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;}
.jira-cbtn.sub{background:transparent;color:#44546F;}
.jira-cbtn.sub:hover{background:#091E420F;}
.jira-cbtn.prim{background:#0C66E4;color:#FFFFFF;}
.jira-cbtn.prim:hover{background:#0055CC;}
.jira-cbtn:disabled{opacity:.7;cursor:default;}
@media (max-width:560px){ .jira-two{grid-template-columns:minmax(0,1fr);} .jira-ch{padding:16px 16px 6px;}
  .jira-cb{padding:4px 16px 0;} .jira-cfoot{margin:4px -16px 0;padding:12px 16px 14px;} .jira-alt{flex:1 1 100%;} }
@media (pointer: coarse){ .jira-ci{min-height:44px;} .jira-cbtn{min-height:44px;} .jira-cx{width:44px;height:44px;} }
.jlabels span{background:var(--lb);color:var(--lf);}

/* ───────────── bottom dock ───────────── */
/* never shorter than its tab strip, or the tabs spill over the status bar */
.dock{flex:none;height:var(--dockh);min-height:31px;display:flex;flex-direction:column;background:var(--panel);
  border-top:1px solid var(--border);position:relative;}
.dock.min{height:31px;}
.dock.dragging{transition:none;user-select:none;}
/* grab handle sits on the dock's top edge */
.dock-resize{position:absolute;top:-3px;left:0;right:var(--sbw,0px);height:7px;cursor:ns-resize;z-index:12;
  background:transparent;border:0;padding:0;}
.dock-resize::after{content:"";position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:44px;height:3px;border-radius:2px;background:var(--border2);opacity:0;
  transition:opacity .18s var(--ease);}
.dock-resize:focus-visible::after,.dock.dragging .dock-resize::after{opacity:1;}
.dock.dragging .dock-resize{background:rgba(53,116,240,.22);}
/* hover only where there is a real hover: a phone keeps :hover on the last
   thing touched, and the strip stayed blue until the next tap elsewhere */
@media (hover:hover){
  .dock:not(.min) .dock-resize:hover::after{opacity:1;}
  .dock:not(.min) .dock-resize:hover{background:rgba(53,116,240,.22);}
}
.dock-resize:focus-visible{outline:2px solid var(--blue2);outline-offset:0;}
/* collapsed, the strip does not resize (on touch a tap opens it) */
.dock.min .dock-resize{cursor:default;}
.dock-body{transition:opacity .16s var(--ease);}
.dock.min .dock-body{display:none;opacity:0;}
.dock-tabs{display:flex;align-items:center;height:30px;flex:none;overflow-y:hidden;border-bottom:1px solid var(--border);
  padding:0 6px;gap:2px;overflow-x:auto;}
.dock-tablist{display:flex;align-items:center;gap:2px;flex:none;}
.dock-tab{background:none;border:0;color:var(--dim);font-size:.75rem;padding:5px 12px;border-radius:5px;
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  transition:background .14s var(--ease),color .14s var(--ease);}
.dock-tab:hover{background:var(--hover);color:var(--text);}
.dock-tab.active{background:var(--panel2);color:var(--text);}
.pillc{font-family:var(--mono);font-size:.5938rem;border-radius:4px;padding:1px 6px;}
.pillc.ok{background:rgba(15,155,135,.2);color:var(--ok-text);}
.pillc.warn{background:rgba(201,122,0,.22);color:#E3B341;}
.dock-sp{flex:1 1 auto;}
/* Hide / Show: a labelled button rather than a bare chevron, so it reads as a
   control. Collapsed, it fills in blue, since it is then the way back. */
.dock-x{display:inline-flex;align-items:center;gap:5px;flex:none;height:24px;padding:0 10px 0 7px;margin-left:6px;
  background:var(--panel2);border:1px solid var(--border2);border-radius:5px;color:var(--text);
  font:inherit;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .14s var(--ease),border-color .14s var(--ease);}
.dock-x:hover{background:var(--hover);border-color:var(--dim2);}
.dock-x svg{display:block;flex:none;transition:transform .16s var(--ease);}
.dock.min .dock-x{background:var(--blue);border-color:var(--blue);color:#FFFFFF;}
.dock.min .dock-x:hover{background:var(--blue);filter:brightness(1.12);}
.dock.min .dock-x svg{transform:rotate(180deg);}
.dock-body{flex:1 1 auto;min-height:0;position:relative;}
.dock-panel{display:none;position:absolute;inset:0;overflow:auto;}
.dock-panel.active{display:block;}

/* .term must be the scroll container itself. While the overflow lived on
   .dock-panel, every termEl.scrollTop assignment was silently a no-op and
   new output scrolled out of sight. */
.term{font-family:var(--mono);font-size:.7813rem;line-height:1.65;padding:10px 14px 16px;
  height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:#131417;color:#DFE1E5;cursor:text;}
.dock-panel[data-panel="terminal"]{overflow:hidden;}
.term .prompt{color:#3FC7AE;}
.term .prompt b{color:#3FC7AE;font-weight:500;}
.term .prompt em{color:#56A8F5;font-style:normal;}
.term-line{display:flex;gap:8px;flex-wrap:wrap;}
/* the terminal is dark in both themes, so its text is fixed light rather than
   following --text, which turned near-black in light mode and vanished */
.term-in{color:#DFE1E5;white-space:pre-wrap;word-break:break-word;}
/* The row's gap belongs after the prompt, not between the text and the
   cursor: a terminal cursor sits in the very next character cell. */
.term-line .caret{margin-left:-8px;}
.caret{display:inline-block;width:7px;height:15px;background:#3FC7AE;animation:blink 1.05s steps(1,end) infinite;
  vertical-align:-3px;}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.term .out{white-space:pre-wrap;color:#C9CCD2;margin:2px 0 10px;}
.term .out .g{color:#3FC7AE;} .term .out .y{color:#E3B341;} .term .out .b{color:#56A8F5;}
.term .out .r{color:#FF7A63;} .term .out .d{color:#9096A0;} .term .out .w{color:#fff;font-weight:600;}
.term .echo{display:flex;gap:8px;flex-wrap:wrap;}
.term a{color:#56A8F5;}

.runout{font-family:var(--mono);font-size:.7813rem;line-height:1.7;padding:10px 14px;background:#131417;
  min-height:100%;white-space:pre-wrap;}
.runout .g{color:#3FC7AE;} .runout .d{color:#6F737A;} .runout .y{color:#E3B341;} .runout .r{color:#FF7A63;}
.problems{padding:12px 14px;font-size:.8125rem;}
.problems .pitem{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);}
.problems .pitem:last-child{border-bottom:0;}
.problems .pic{flex:none;font-size:.8125rem;}
.problems b{font-weight:600;}
.problems p{margin:3px 0 0;color:var(--dim);font-size:.7813rem;line-height:1.6;}

/* ───────────── status bar ───────────── */
.statusbar{flex:none;height:26px;display:flex;align-items:center;gap:16px;padding:0 12px;
  background:var(--panel);border-top:1px solid var(--border);font-size:.7188rem;color:var(--dim);
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin;}
.sb-item{flex:none;}
.sb-item.ok{color:var(--ok-text);}
.sb-item.bad{color:#FF8A75;}
:root[data-theme="light"] .sb-item.bad{color:#B42318;}
.sb-item.link{min-height:24px;display:inline-flex;align-items:center;color:var(--blue2);text-decoration:none;}
.sb-item.link:hover{text-decoration:underline;}
button.sb-item{background:none;border:0;padding:0;font:inherit;cursor:pointer;}
.sb-sp{flex:1 1 auto;}

/* ───────────── responsive ───────────── */
@media (max-width:980px){
  .rail{display:none;}
  /* the panel covers the whole IDE window from its top edge, and its header
     is exactly as tall as the tab row, so the two lines meet */
  .sidebar{position:absolute;z-index:40;top:0;bottom:0;box-shadow:8px 0 26px rgba(0,0,0,.4);}
  .sidebar .side-h{height:45px;border-bottom:1px solid var(--border);}
  .sidebar .side-h > span{display:none;}
  .side-sw{display:flex;gap:4px;margin-left:-6px;}
  .branchpill,.tb-icon{display:none;}
  :root{--dockh:210px;}
}
@media (max-width:620px){
  .proj{font-size:.75rem;}
  .hire-btn{padding:0 10px;font-size:.7188rem;}
  .statusbar{gap:11px;}
  :root{--dockh:190px;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;}
}

/* =========================================================================
   Light theme. Only the chrome flips: the embedded tool panels (Swagger,
   Playwright, Jira, Docker, Cucumber, Gatling) are light in both themes,
   because that is how those tools actually look.
   ========================================================================= */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --panel:#F3F4F6; --panel2:#E8EAED; --hover:#E2E5E9;
  --border:#D7DAE0; --border2:#BFC4CC;
  --text:#1F2328; --dim:#5B6472; --dim2:#646B76;
  --blue:#2A62D8; --blue2:#1F5AD0;
  --ok-text:var(--ink-teal); --warn-text:var(--ink-amber); --bad-text:var(--ink-red);
  --kw:#A6432A; --str:#1F7A3D; --com:#6A6F78; --num:#0A6E86;
  --attr:#8A6D00; --fn:#1F5AD0; --type:#8A3F86;
}
:root[data-theme="light"] .code .ln:hover{background:#F6F7F9;}
:root[data-theme="light"] .term,
:root[data-theme="light"] .runout,
:root[data-theme="light"] .joblog-b{background:#1B1D21;}
:root[data-theme="light"] .mdprev p,
:root[data-theme="light"] .mdprev ul{color:#3C4350;}
:root[data-theme="light"] .jobb{background:#FFFFFF;}
:root[data-theme="light"] .jobb[aria-pressed="true"]{background:#DCE8FB;}
/* The chip tints wash out against a light ground, so the label darkens. */
:root[data-theme="light"] .etab.active{background:#FFFFFF;}

/* ---------- Commit view in the sidebar ---------- */
.commit-wrap{padding:8px 10px 14px;}
.commit-msg{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;
  color:var(--text);font-family:inherit;font-size:.7813rem;padding:8px 9px;resize:vertical;min-height:56px;}
.commit-msg:focus{outline:none;border-color:var(--blue);}
.commit-btn{width:100%;margin-top:7px;background:var(--blue);color:#fff;border:0;border-radius:5px;
  padding:7px 10px;font-size:.7813rem;font-weight:600;cursor:pointer;min-height:34px;}
.commit-btn:hover{filter:brightness(1.12);}
.commit-btn:disabled{opacity:.45;cursor:default;filter:none;}
.chgroup{font-size:.6875rem;color:var(--dim);letter-spacing:.04em;padding:10px 4px 5px;}
.chfile{display:flex;align-items:center;gap:8px;padding:4px 4px;font-size:.7813rem;border-radius:4px;
  cursor:pointer;}
.chfile:hover{background:var(--hover);}
.chfile .st{width:13px;flex:none;text-align:center;font-family:var(--mono);font-size:.6875rem;font-weight:700;}
.chfile .st.m{color:var(--warn-text);} .chfile .st.a{color:var(--ok-text);} .chfile .st.d{color:var(--bad-text);}
.chfile .nm{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chfile .plus{color:var(--ok-text);font-family:var(--mono);font-size:.6563rem;}
.chfile .minus{color:var(--bad-text);font-family:var(--mono);font-size:.6563rem;}

/* ---------- settings dialog ---------- */
.side-foot .avatar-row{width:100%;background:none;border:0;padding:0;cursor:pointer;
  border-radius:6px;transition:background .15s var(--ease);text-align:left;}
.side-foot .avatar-row:hover{background:var(--hover);}
.side-foot .avatar-row .cog{margin-left:auto;color:var(--dim2);font-size:.8125rem;flex:none;}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:flex;
  align-items:center;justify-content:center;padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom));animation:fadein .15s var(--ease);}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border:1px solid var(--border2);border-radius:10px;width:min(560px,100%);
  max-height:88vh;max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:modalin .22s var(--ease);}
@keyframes modalin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* the way out mirrors the way in, at three quarters of the time; dismiss() removes it after */
.modal-back.dlg-out{animation:fadeout .15s var(--ease) forwards;pointer-events:none;}
.modal-back.dlg-out > *{animation:modalout .15s var(--ease) forwards;}
@keyframes fadeout{to{opacity:0}}
@keyframes modalout{to{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);}
.modal-h h2{margin:0;font-size:.9375rem;font-weight:600;}
.modal-x{margin-left:auto;background:none;border:0;color:var(--dim);cursor:pointer;font-size:.9375rem;
  width:28px;height:28px;border-radius:5px;}
.modal-x:hover{background:var(--hover);color:var(--text);}
.modal-b{padding:6px 18px 18px;}
.set-row{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);}
.set-row:last-child{border-bottom:0;}
.set-row .lab{width:132px;flex:none;padding-top:5px;}
.set-row .lab b{display:block;font-size:.8125rem;font-weight:600;}
.set-row .lab span{display:block;font-size:.6875rem;color:var(--dim);margin-top:3px;line-height:1.5;}
.seg{display:inline-flex;border:1px solid var(--border2);border-radius:6px;overflow:hidden;}
.seg button{background:var(--bg);border:0;border-right:1px solid var(--border2);color:var(--dim);
  font-family:inherit;font-size:.7813rem;padding:8px 15px;cursor:pointer;min-height:36px;
  transition:background .15s var(--ease),color .15s var(--ease);}
.seg button:last-child{border-right:0;}
.seg button:hover{background:var(--hover);color:var(--text);}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff;}
.set-note{font-size:.7188rem;color:var(--dim);line-height:1.65;margin:8px 0 0;max-width:62ch;}
.modal-f{padding:12px 18px;border-top:1px solid var(--border);font-size:.7188rem;color:var(--dim);
  display:flex;gap:14px;flex-wrap:wrap;}
/* the message from Eyüp, in the style of a Slack notification */
.sl-toast{position:fixed;right:18px;bottom:40px;z-index:150;width:min(340px,calc(100vw - 24px));display:flex;
  align-items:flex-start;background:var(--panel2);border:1px solid var(--border2);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);animation:sl-in .45s var(--ease) both;}
.sl-toast.out{animation:sl-out .22s var(--ease) forwards;}
@keyframes sl-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sl-out{to{opacity:0;transform:translateY(12px)}}
.sl-open{flex:1 1 auto;min-width:0;display:block;text-align:left;background:none;border:0;padding:12px 6px 12px 14px;
  font:inherit;color:var(--text);cursor:pointer;border-radius:12px;}
.sl-top{display:flex;align-items:center;gap:6px;font-size:.7188rem;color:var(--dim);margin-bottom:8px;}
.sl-now{margin-left:auto;}
.sl-row{display:flex;align-items:center;gap:10px;}
.sl-av{border-radius:8px;flex:none;object-fit:cover;background:var(--bg);aspect-ratio:1;max-width:none;}
.sl-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.8125rem;}
.sl-who b{font-weight:700;}
.sl-who span{color:var(--dim);}
.sl-badge{flex:none;min-width:20px;height:20px;border-radius:10px;background:#E01E5A;color:#fff;font-size:.7188rem;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;animation:sl-pop .5s .35s var(--ease) both;}
@keyframes sl-pop{from{transform:scale(0)}to{transform:scale(1)}}
.sl-x{flex:none;background:none;border:0;color:var(--dim);cursor:pointer;width:28px;height:28px;border-radius:6px;margin:8px 8px 0 0;}
.sl-x:hover{background:var(--hover);color:var(--text);}
.sl-dm{position:fixed;right:18px;bottom:40px;z-index:151;width:min(380px,calc(100vw - 24px));background:var(--panel);
  border:1px solid var(--border2);border-radius:12px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.5);
  animation:sl-in .35s var(--ease) both;}
.sl-dm.out{animation:sl-out .2s var(--ease) forwards;}
.sl-dm-h{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 14px;background:#3F0E40;color:#fff;}
.sl-dm-h .sl-x{color:#E9DDEA;margin:0;}
.sl-dm-h .sl-x:hover{background:rgba(255,255,255,.14);color:#fff;}
.sl-dm-n{flex:1 1 auto;display:flex;align-items:baseline;gap:8px;font-size:.875rem;}
.sl-live{font-size:.7188rem;color:#D6C7D7;display:inline-flex;align-items:center;gap:5px;}
.sl-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#2BAC76;}
.sl-dm-b{padding:10px 16px 14px;max-height:min(42vh,340px);overflow-y:auto;}
.sl-day{text-align:center;font-size:.7188rem;font-weight:600;color:var(--dim);margin:2px 0 10px;}
.sl-intro{padding:4px 0 6px;}
.sl-intro .sl-av{border-radius:10px;}
.sl-intro p{margin:8px 0 0;font-size:.875rem;display:flex;align-items:center;gap:8px;}
.sl-intro p b{font-size:1rem;font-weight:700;}
.sl-intro .sl-live{color:var(--dim);}
.sl-intro .sl-sub{display:block;margin-top:4px;font-size:.8125rem;line-height:1.5;color:var(--dim);}
.sl-intro + .sl-day{margin-top:12px;}
.sl-msg{display:flex;gap:10px;align-items:flex-start;}
.sl-meta{display:flex;align-items:baseline;gap:8px;font-size:.8438rem;}
.sl-meta b{font-weight:700;}
.sl-meta span{font-size:.7188rem;color:var(--dim);}
.sl-text{margin:3px 0 0;font-size:.875rem;line-height:1.55;color:var(--text);animation:sl-fade .3s var(--ease) both;}
@keyframes sl-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* the reply box: message on top, who it is from underneath, as one field */
.sl-dm-f{padding:0 16px 14px;}
.sl-comp{border:1px solid var(--border2);border-radius:8px;background:var(--bg);overflow:hidden;}
.sl-comp:focus-within{border-color:var(--blue2);}
.sl-in{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:.875rem;color:var(--text);background:transparent;
  border:0;border-radius:0;padding:9px 11px;}
.sl-in::placeholder{color:var(--dim);opacity:1;}
.sl-in:focus{outline:none;background:var(--panel2);}
.sl-ta{resize:none;min-height:46px;max-height:140px;line-height:1.5;}
.sl-who-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);border-top:1px solid var(--border);}
.sl-who-in .sl-in{font-size:.8125rem;padding:8px 11px;}
.sl-who-in .sl-in + .sl-in{border-left:1px solid var(--border);}
.sl-in.bad{background:rgba(232,64,42,.12);box-shadow:inset 0 0 0 1px var(--bad-text);}
.sl-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.sl-send-row{display:flex;align-items:center;gap:10px;margin-top:10px;}
.sl-note{flex:1 1 auto;min-width:0;margin:0;font-size:.75rem;line-height:1.45;color:var(--dim);}
.sl-note.bad{color:var(--bad-text);}
.sl-send{flex:none;}
.sl-send:disabled{opacity:.7;cursor:default;}
.sl-mine{margin-top:14px;}
.sl-mine .sl-text{white-space:pre-wrap;overflow-wrap:anywhere;}
.sl-av-you{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;
  font-size:.9375rem;color:#FFFFFF;background:#1264A3;}
@media (max-width:420px){ .sl-who-in{grid-template-columns:minmax(0,1fr);} .sl-who-in .sl-in + .sl-in{border-left:0;border-top:1px solid var(--border);} }
.sl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:6px;
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;text-decoration:none;color:var(--text);
  background:transparent;border:1px solid var(--border2);}
.sl-btn:hover{background:var(--hover);}
.sl-btn.prim{background:#007A5A;border-color:#007A5A;color:#fff;}
.sl-btn.prim:hover{background:#006A4E;}
@media (max-width:760px){ .sl-toast,.sl-dm{right:12px;left:12px;width:auto;bottom:34px;} }
@media (prefers-reduced-motion:reduce){ .sl-toast,.sl-dm,.sl-badge,.sl-text{animation:none;} }

/* the privacy statement */
.pv .modal-b{padding:6px 18px 18px;}
.pv-lead{font-size:.8438rem;line-height:1.6;color:var(--text);margin:12px 0 4px;font-weight:500;}
.pv h3{margin:16px 0 5px;font-size:.8125rem;font-weight:600;color:var(--text);}
.pv .modal-b p:not(.pv-lead){margin:0;font-size:.8125rem;line-height:1.65;color:var(--dim);}
/* the question POST /contact asks before it sends anything */
.cf-dialog .modal-b{padding:14px 18px 16px;}
.cf-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.8125rem;margin:0 0 12px;}
.cf-rows dt{color:var(--dim);}
.cf-rows dd{margin:0;overflow-wrap:anywhere;}
.cf-body{font-family:var(--mono);font-size:.75rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 12px;max-height:220px;overflow:auto;margin:0;}
.cf-note{font-size:.75rem;color:var(--dim);margin:10px 0 0;line-height:1.55;}
.cf-btns{margin-left:auto;display:flex;gap:8px;}
.cf-btns button{font:inherit;font-size:.8125rem;font-weight:600;min-height:36px;padding:0 16px;border-radius:6px;cursor:pointer;}
.cf-cancel{background:transparent;color:var(--text);border:1px solid var(--border2);}
.cf-cancel:hover{background:var(--hover);}
.cf-send{background:var(--blue);color:#fff;border:1px solid var(--blue);}
.cf-send:hover{filter:brightness(1.1);}

/* Light-theme contrast corrections, measured rather than guessed:
   the dark-navy tree selection scored 1.61:1 against dark text, and the
   line numbers 1.97:1 against white. Both now clear 4.5:1. */
:root[data-theme="light"] .tnode.sel{background:#CFE0FB;color:#14213D;}
:root[data-theme="light"] .tnode.sel .tagx{color:#42527A;}
:root[data-theme="light"] .code .n{color:#646B76;}

/* Flipping the theme changes dozens of colours at once. Any property with a
   transition then tries to interpolate, which both looks like a smear and can
   leave a stale computed value behind. Kill transitions for one frame. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after{
  transition:none !important;
}

/* =========================================================================
   MOBILE
   The rail is hidden below 980px, which left no way to reopen the project
   panel once it was collapsed. A hamburger left of the editor tabs owns that job,
   and tables that only make sense wide become cards or scroll on purpose.
   ========================================================================= */
.burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;
  width:34px;height:30px;border-radius:5px;font-size:.9375rem;line-height:1;flex:none;}
.burger:hover{background:var(--hover);}
/* the burger stays put while the file tabs beside it scroll sideways */
.tabrow{display:flex;flex:none;min-width:0;background:var(--panel);border-bottom:1px solid var(--border);}
.tabrow .tabbar{flex:1 1 auto;min-width:0;border-bottom:0;}
.tabrow .burger{align-self:stretch;height:auto;width:40px;border-radius:0;border-right:1px solid var(--border);}
.side-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),visibility 0s .22s;}
.side-backdrop.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s var(--ease),visibility 0s;}
@media (prefers-reduced-motion:reduce){ .sidebar,.sidebar.collapsed,.side-backdrop,.side-backdrop.on{transition:none;} }

@media (max-width:980px){
  .burger{display:inline-flex;align-items:center;justify-content:center;}
  /* slides in from the left rather than appearing; shut, it is out of view
     and out of the tab order */
  .sidebar{width:min(78vw,300px);transform:none;visibility:visible;
    transition:transform .24s var(--ease),box-shadow .24s var(--ease),visibility 0s;}
  .sidebar.collapsed{width:min(78vw,300px);transform:translateX(-100%);visibility:hidden;box-shadow:none;
    border-right:1px solid var(--border);transition:transform .2s var(--ease),box-shadow .2s var(--ease),visibility 0s .2s;}
  /* the source half of the README is a nice-to-have; the rendered half is the content */
  .mdsplit .code{display:none;}
  .mdprev{padding:20px 18px 48px;}
  .portrait-card{width:96px;margin-left:16px;}
  /* boards and pipelines scroll sideways on purpose, the way the real tools do */
  .cols{display:flex;overflow-x:auto;gap:9px;scroll-snap-type:x mandatory;padding-bottom:6px;}
  .cols .col{flex:0 0 min(78vw,290px);scroll-snap-align:start;}
  .swg table.p{display:block;overflow-x:auto;}
}

/* Docker and the register tables become cards rather than 7-column crushes */
@media (max-width:760px){
  table.dk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  table.dk tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;
    border-bottom:1px solid #F0F1F3;}
  table.dk td{border:0;padding:0;}
  table.dk td:nth-child(1){grid-column:1/-1;}
  table.dk td:nth-child(2){grid-column:1;}
  table.dk td:nth-child(3){grid-column:2;text-align:right;color:#677285;}
  table.dk td:nth-child(4){grid-column:1/-1;}
  table.dk td:nth-child(5){grid-column:1;}
  table.dk td:nth-child(6){grid-column:2;text-align:right;}
  table.dk td:nth-child(7){grid-column:1/-1;padding-top:6px;}
  /* the shorter tabs: status and a grey figure on one line, the last value under it */
  table.dk-short td:nth-child(4){grid-column:1;}
  table.dk .dk-act{justify-content:flex-start;gap:10px;}
  table.dk .dk-act button{width:40px;height:40px;border:1px solid #E3E5E8;border-radius:6px;}
  .pw-row{flex-wrap:wrap;row-gap:3px;}
  .pw-row .file{order:3;}
  .pw-row .ttl{flex:1 1 100%;order:2;white-space:normal;}
  .pw-row .proj{order:4;}
  .pw-row .dur{order:5;margin-left:auto;}
  .pw-cards{gap:7px;}
  .pw-card{flex:1 1 calc(33% - 7px);min-width:0;padding:9px 11px;}
  .opx-s{flex-wrap:wrap;row-gap:4px;}
  .pathx{font-size:.7813rem;}
  .cuke-stats{gap:14px;}
  .jira-h .days{margin-left:0;}
}

@media (max-width:620px){
  .titlebar{gap:7px;padding:0 9px;}
  .proj{font-size:.75rem;}
  .etab{padding:0 11px;font-size:.75rem;}
  .breadcrumbs{display:none;}
  .statusbar{gap:10px;font-size:.6563rem;}
  .statusbar .sb-item:nth-child(2),
  .statusbar .sb-item:nth-child(3){display:none;}
  .ci{padding:12px 12px 32px;}
  /* .jira pads its own parts; padding the whole page pushed its app bar in */
  .swg,.cuke-body{padding:12px;}
  .mdprev h1{font-size:clamp(1.625rem,8vw,2.375rem);}
  .modal{border-radius:10px;}
  .set-row{flex-direction:column;gap:8px;}
  .set-row .lab{width:auto;padding-top:0;}
}

/* Touch devices: nothing important smaller than a fingertip. */
@media (pointer: coarse){
  .etab{height:44px;}
  .dock-tab{min-height:38px;}
  .chfile{padding:9px 4px;}
  .tnode{padding-top:9px;padding-bottom:9px;}
  .dock-resize{height:16px;top:-8px;}
  .dock-resize::after{top:6px;width:56px;opacity:.6;}
  .side-x,.modal-x{width:38px;height:38px;}
  .dock-x{height:38px;padding:0 14px 0 11px;}
  .filters button,.pw-filters button,.dk-tabs button{min-height:44px;}
  .jobb{padding:9px 12px;}
}

/* Mobile corrections found by looking at it at 390px rather than assuming. */
@media (max-width:620px){
  :root{--dockh:170px;}
  /* the status bar had six items fighting for 390px; keep the two that matter */
  .statusbar .sb-item:not(#sbFile):not(.link):not(.sb-sp){display:none;}
  .statusbar .sb-sp{display:block;}
}

/* =========================================================================
   Cucumber report on small screens. The six summary figures were a wrapping
   right-aligned flex row, which at 390px collapsed into a ragged single
   column. They are a 3×2 grid instead, and the step rows stop fighting for
   horizontal space.
   ========================================================================= */
@media (max-width:720px){
  .cuke-top{padding:14px;gap:12px;}
  .cuke-top h1{line-height:1.3;}
  .cuke-top .sub{font-size:.6563rem;}
  .cuke-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px 8px;border-top:1px solid #DCE3DF;padding-top:12px;}
  .cuke-stats > *{min-width:0;padding:9px 11px;}
  .cuke-stats b{font-size:1.1875rem;}

  /* run info + buttons stack instead of crushing together */
  .cuke-sum > .cuke-top:last-child{flex-direction:column;align-items:stretch;gap:10px;}
  .cuke-sum > .cuke-top:last-child > span{margin-left:0 !important;display:flex;gap:8px;}
  .cuke-btn{flex:1 1 0;min-height:40px;}

  /* scenario rows: let the title wrap, drop the keyword column */
  .cscen-h{gap:9px;padding:11px 12px;}
  .cscen-h .kx{display:none;}
  .cscen-h .nx{white-space:normal;line-height:1.35;}
  .cscen-h .dx{flex:none;font-size:.625rem;}

  /* steps: indent less, let long Gherkin wrap, keep the timing on the right */
  .csteps{padding:2px 12px 14px 16px;}
  .cstep{flex-wrap:wrap;padding:7px 9px;}
  .cstep .k{width:auto;min-width:44px;}
  .cstep .t{flex:1 1 60%;}
  .cstep .d{margin-left:auto;}
  .cdoc{margin-left:16px;font-size:.6875rem;}
  .cuke .cgo{margin-left:16px;}
  .cuke-fh{padding:13px 12px;}
  .cuke-fh h2{font-size:.9375rem;}
}

/* =========================================================================
   Stop the container list shifting while it ticks. Live figures change width
   as they count (7% → 63%, 59s → 1m 00s); with an auto-sized grid column that
   reflows the row and nudges the whole page. Tabular digits plus reserved
   widths mean the numbers change without the layout moving.
   ========================================================================= */
table.dk{font-variant-numeric:tabular-nums;}
table.dk td:nth-child(3){min-width:64px;white-space:nowrap;}
table.dk td:nth-child(5){white-space:nowrap;}
table.dk td:nth-child(6){min-width:66px;white-space:nowrap;}

@media (max-width:760px){
  /* fixed second column so a wider number can never re-wrap the card */
  table.dk tr{grid-template-columns:minmax(0,1fr) 116px;}
  table.dk td:nth-child(3),
  table.dk td:nth-child(6){min-width:0;}
  .dk-bar{width:56px;}
}

/* =========================================================================
   Defaults, so nothing can fall back to a UA colour again.
   Two bugs came from exactly that: links with no matching rule rendered in
   the browser's #0000EE (unreadable on the dark chrome), and the avatar,
   once it became a <button>, stopped inheriting colour and took the UA's
   black buttontext on a dark panel.
   ========================================================================= */
a{color:var(--blue2);}
button{color:inherit;}
.side-foot .avatar-row{color:var(--text);}
.side-foot .avatar-row b{color:var(--text);}
.side-foot .avatar-row span:not(.cog){color:var(--dim);}

/* The embedded reports are light in both themes, so their links need a dark
   blue rather than the chrome's light one. */
.cuke a, .swg a, .pw a, .jira a, .dock-app a{color:#1F5AD0;}
.cuke a:visited, .swg a:visited, .pw a:visited,
.jira a:visited, .dock-app a:visited{color:#1F5AD0;}

/* =========================================================================
   Terminal resize on touch.
   Two problems: without touch-action the browser claims the gesture for
   scrolling, so the drag fought the page; and the grip only appeared on
   hover, which does not exist on a phone, so there was nothing to aim at.
   ========================================================================= */
.dock-resize{touch-action:none;}
@media (pointer: coarse){
  .dock-resize{height:24px;top:-12px;}
  .dock-resize::after{opacity:.55;width:64px;height:4px;top:10px;}
  .dock-resize:active::after{opacity:1;background:var(--blue);}
}

/* =========================================================================
   Terminal input.
   A div with tabindex cannot summon an on screen keyboard, so on a phone the
   terminal was unusable. A real input sits invisibly over the prompt line and
   owns the typing; the visible line just mirrors its value. It covers the
   prompt line only: stretched over the whole terminal, its box sat at the top
   of the scrolled content, and every keystroke scrolled the view up to it.
   A tap elsewhere focuses it from the click handler instead.
   ========================================================================= */
.term{position:relative;}
.term-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;
  background:transparent;color:transparent;caret-color:transparent;
  font-size:1rem; /* anything smaller makes iOS zoom the page on focus */
  z-index:2;}
.term-input:focus{outline:none;}
.term:has(.term-input:focus){box-shadow:inset 0 0 0 2px var(--blue2);}
.term-line{position:relative;z-index:1;}

/* the drag highlight is driven by a class, not :active, which sticks on touch */
.dock-resize:active::after{opacity:1;}
.dock.dragging .dock-resize::after{opacity:1;background:var(--blue);}

/* the search box is a real input now */
input.dk-search{font-family:inherit;color:#17191E;}
input.dk-search::placeholder{color:#8993A4;}
input.dk-search:focus{outline:none;border-color:#086DD7;box-shadow:0 0 0 2px rgba(8,109,215,.18);}
/* empty-state line when a filter matches nothing */
.dk-empty{padding:26px 18px;color:#677285;font-size:.8125rem;}
.dd-say{margin:0;padding:18px var(--page-x);color:#677285;font-size:.8125rem;line-height:1.6;}
/* Docker Desktop’s frame: top bar, sidebar, the page, the engine status bar */
.dd{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto 1fr auto;}
.dd-top{grid-column:1 / -1;display:flex;align-items:center;gap:16px;height:52px;padding:0 16px;background:#FFFFFF;
  border-bottom:1px solid #E1E2E6;box-sizing:border-box;}
.dd-brand{display:inline-flex;align-items:center;gap:6px;color:#1D63ED;flex:none;}
.dd-brand b{color:#17191E;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;}
.dd-brand span{color:#17191E;font-size:1.0625rem;font-weight:400;}
.dd-search{flex:0 1 420px;margin:0 auto;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  background:#F4F4F6;border:1px solid #E1E2E6;border-radius:6px;color:#677285;box-sizing:border-box;}
.dd-search:focus-within{border-color:#1D63ED;box-shadow:0 0 0 2px rgba(29,99,237,.18);}
/* the box shrinks to the space left; a search input’s built-in width pushed the bar past a small phone */
.dd-search{min-width:0;}
.dd-search input.dk-search{flex:1 1 auto;width:0;min-width:0;margin:0;padding:0;border:0;background:transparent;font:inherit;font-size:.875rem;
  color:#17191E;box-shadow:none;}
.dd-search input.dk-search:focus{border:0;box-shadow:none;}
.dd-side{grid-row:2;background:#F9FAFB;border-right:1px solid #E1E2E6;padding:12px 8px;display:flex;flex-direction:column;gap:2px;}
.dd-nav{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:6px;background:transparent;color:#505968;
  font:inherit;font-size:.875rem;padding:8px 10px;cursor:pointer;text-align:left;}
.dd-nav:hover{background:#EDEEF1;color:#17191E;}
.dd-nav[aria-current="page"]{background:#E5F2FC;color:#0766CC;font-weight:600;}
.dd-nav svg{flex:none;}
.dd-main{grid-row:2;min-width:0;}
.dd .dk-h{border-bottom:0;}
.dd-tools{display:flex;align-items:center;gap:12px;padding:2px var(--page-x) 16px;border-bottom:1px solid #E1E2E6;}
.dd-toggle{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:.8125rem;color:#17191E;cursor:pointer;}
.dd-toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.dd-sw{position:relative;width:30px;height:16px;border-radius:8px;background:#B4B9C3;flex:none;transition:background .15s var(--ease);}
.dd-sw::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#FFFFFF;
  transition:transform .15s var(--ease);}
.dd-toggle input:checked + .dd-sw{background:#1D63ED;}
.dd-toggle input:checked + .dd-sw::after{transform:translateX(14px);}
.dd-toggle input:focus-visible + .dd-sw{outline:2px solid #1D63ED;outline-offset:2px;}
table.dk tr.dd-group td{background:#F9FAFB;padding-top:8px;padding-bottom:8px;font-size:.8125rem;}
table.dk tr.dd-group:hover td{background:#F4F4F6;}
.dd-fold{width:24px;height:24px;margin-right:4px;border:0;border-radius:4px;background:transparent;color:#505968;cursor:pointer;font-size:.75rem;vertical-align:middle;}
.dd-fold:hover{background:#EDEEF1;}
.dd-gname{display:inline-flex;align-items:center;gap:6px;margin-right:10px;color:#1D63ED;vertical-align:middle;}
.dd-gname b{color:#17191E;font-size:.875rem;}
tr.dd-group .img{font-family:var(--mono);font-size:.6875rem;color:#677285;margin-right:10px;}
tr.dd-group .dk-note{display:inline;}
table.dk tr.dd-child td:first-child{padding-left:calc(var(--page-x) + 28px);}
.dd-cube{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;flex:none;}
.dd-cube.on{background:#E3F5F1;color:#0A7A69;} .dd-cube.mid{background:#FFF4DE;color:#9A5D00;} .dd-cube.off{background:#F0F1F3;color:#677285;}
.dd-img{font-family:var(--mono);font-size:.7188rem;color:#086DD7;overflow-wrap:anywhere;}
a.dk-port{display:inline-flex;align-items:center;gap:4px;text-decoration:none;}
a.dk-port:hover{text-decoration:underline;}
.dk-port.plain{color:#17191E;}
.dd-dim{color:#677285;white-space:nowrap;}
.dd table.dk th{white-space:nowrap;}
.dd-ib svg{display:block;margin:auto;}
.dd-ib:disabled{opacity:.35;cursor:default;}
.dd-status{grid-column:1 / -1;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;min-height:30px;padding:4px 16px;
  background:#F4F4F6;border-top:1px solid #E1E2E6;font-size:.75rem;color:#505968;font-variant-numeric:tabular-nums;box-sizing:border-box;}
.dd-engine{display:inline-flex;align-items:center;gap:6px;color:#17191E;font-weight:600;}
.dd-engine i{width:8px;height:8px;border-radius:50%;background:#0F9B87;}
/* Tablets: the side navigation becomes a row from 980px down, as the IDE's project panel does.
   Beside it the containers table had 200px too few, and its right-hand columns were cut off. */
@media (max-width:980px){
  .dd{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;}
  .dd-side{grid-row:2;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #E1E2E6;padding:6px var(--page-x);}
  .dd-nav{width:auto;white-space:nowrap;}
  .dd-main{grid-row:3;}
}
/* Status, where a role connects and its logs button get a set width, so
   filtering the rows cannot re-share it; name and image take what is left. */
@media (min-width:761px){
  table.dk-c th:nth-child(3){width:7.5rem;}
  table.dk-c th:nth-child(4){width:9rem;}
  table.dk-c th:nth-child(5){width:5rem;}
}
/* and just above the phone layout the full row was still 10px short, at 768 among others */
@media (min-width:761px) and (max-width:980px){
  table.dk-c th,table.dk-c td{padding-left:12px;padding-right:12px;}
}
@media (max-width:760px){
  .dd-top{padding:0 var(--page-x);gap:10px;} .dd-brand span{display:none;} .dd-search{flex:1 1 auto;}
  table.dk-c tr.dd-group{display:block;padding:8px var(--page-x);}
  table.dk-c tr.dd-group td{display:block;background:none;padding:0;}
  table.dk tr.dd-child td:first-child{padding-left:0;}
  table.dk-c tr.dd-child td:nth-child(1){grid-column:1 / -1;}
  table.dk-c tr.dd-child td:nth-child(2){grid-column:1 / -1;grid-row:3;}
  table.dk-c tr.dd-child td:nth-child(3){grid-column:1;grid-row:2;text-align:left;}
  table.dk-c tr.dd-child td:nth-child(4){grid-column:2;grid-row:2;text-align:right;}
  table.dk-c tr.dd-child td:nth-child(5){grid-column:1 / -1;grid-row:4;}
}

/* a tool window announces itself instead of borrowing a file tab */
/* The rail is written vertical-rl, where a block box stacks along the
   horizontal axis: 'display:block' therefore put the icon beside the label
   rather than above it. Inline puts it at the start of the inline axis, which
   here runs top to bottom, and the logical margin opens the gap underneath. */

/* ---------- the test runner's heads-up display ----------
   The suite drives other tabs, so the report itself is usually off screen
   while it runs. This floats over whatever is being worked on and names the
   assertion in flight, the way a headed run does. */
.pwhud{position:fixed;right:18px;top:78px;z-index:80;width:min(350px,calc(100vw - 36px));
  background:var(--panel2);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 18px 46px rgba(0,0,0,.42);padding:11px 13px 13px;font-size:.75rem;color:var(--text);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);}
.pwhud.on{opacity:1;transform:none;pointer-events:auto;}
.pwhud-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6875rem;color:var(--dim);}
.pwhud-h b{color:var(--text);font-weight:600;}
.pwhud-h .sp{flex:1 1 auto;}
.pwhud-h button{background:none;border:0;color:var(--dim);cursor:pointer;
  width:24px;height:24px;border-radius:5px;line-height:1;font-size:.6875rem;}
.pwhud-h button:hover{background:var(--hover);color:var(--text);}
/* the same red as the report's Run button, since it is that button's undo */
.pwhud-h .pwhud-stop{width:auto;padding:0 10px;background:#C9301C;border:0;font-family:var(--sans);
  font-weight:600;color:#FFFFFF;white-space:nowrap;}
.pwhud-h .pwhud-stop:hover{background:#B02815;color:#FFFFFF;}
.pwhud-h .pwhud-stop:disabled{opacity:.6;cursor:default;background:#C9301C;}
.pwhud-h .pwhud-stop[hidden]{display:none;}
.pwhud-t{margin:8px 0 7px;line-height:1.45;}
.pwhud-s{display:flex;gap:8px;align-items:flex-start;color:var(--dim);line-height:1.45;min-height:36px;}
.pwhud-s .tick{flex:none;width:13px;text-align:center;font-weight:700;}
.pwhud-s .tick.ok{color:#3FC77E;}
.pwhud-s .tick.bad{color:#FF6B5A;}
.pwhud-s .tick.run{color:var(--blue2);}
.pwhud-bar{display:block;height:3px;background:var(--border);border-radius:2px;margin-top:10px;overflow:hidden;}
.pwhud-bar i{display:block;height:100%;width:100%;background:#E8402A;transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease);}
@media (max-width:700px){
  /* A phone cannot spare 110px of panel for a status card, so the run display
     drops to the file it is in and the assertion it is on. */
  .pwhud{top:60px;left:8px;right:8px;width:auto;padding:8px 10px 10px;border-radius:8px;}
  .pwhud-t{display:none;}
  .pwhud-s{min-height:0;}
  .pwhud-bar{margin-top:8px;}
}
@media (prefers-reduced-motion:reduce){
  .pwhud{transition:none;}
  .pwhud-bar i{transition:none;}
}

/* While the dock's edge is being dragged, the pointer is over the editor as
   often as not. Without this the drag selects whatever text it passes over. */
html.resizing{cursor:ns-resize;}
html.resizing *{user-select:none !important;}

/* ═════════════ Scratch: the working utilities ═════════════
   This panel is his own tool rather than a homage to somebody else's, so
   unlike Swagger or Jira it follows the site theme instead of pinning
   itself to a light skin. */
.tools{padding:22px 24px 36px;min-height:100%;color:var(--text);box-sizing:border-box;
  background:#222222;}  /* the flat grey of the other tool windows */
:root[data-theme="light"] .tools{background:#F7F8F9;}
.tl-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.tl-h h2{margin:0;font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.015em;}
/* the privacy line as a badge: it is the first thing a careful visitor checks.
   Squared off like the cards: as a pill it wrapped to two lines on a phone and
   the round ends no longer fitted what they held. */
.tl-safe{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.75rem;color:var(--dim);line-height:1.5;
  padding:6px 12px 6px 10px;border-radius:8px;background:rgba(63,199,174,.09);border:1px solid rgba(63,199,174,.28);}
.tl-safe::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-text);flex:none;
  box-shadow:0 0 0 3px rgba(63,199,174,.18);}
.tl-safe b{color:var(--ok-text);font-weight:600;}
:root[data-theme="light"] .tl-safe{background:rgba(10,110,134,.07);border-color:rgba(10,110,134,.25);}
:root[data-theme="light"] .tl-safe::before{box-shadow:0 0 0 3px rgba(10,110,134,.14);}

/* the tools as a grouped menu on the left, the open tool on the right; the
   menu stays in view while a long tool scrolls */
.tl-shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px;align-items:start;}
.tl-tabs{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;padding:8px;box-sizing:border-box;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;}
:root[data-theme="light"] .tl-tabs{background:#FFFFFF;box-shadow:0 1px 2px rgba(20,30,50,.05);}
.tl-group{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:14px 10px 6px;}
.tl-group:first-child{padding-top:6px;}
.tl-tabs button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;
  color:var(--dim);font-family:var(--sans);font-size:.8125rem;font-weight:500;padding:0 10px;min-height:36px;
  cursor:pointer;white-space:nowrap;transition:color .14s var(--ease),background .14s var(--ease),box-shadow .14s var(--ease);}
.tl-tabs button svg{flex:none;opacity:.85;}
.tl-tabs button:hover{color:var(--text);background:var(--hover);}
.tl-tabs button[aria-selected="true"]{color:var(--text);background:var(--panel2);
  box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px var(--border2);}
.tl-tabs button[aria-selected="true"] svg{color:var(--blue2);opacity:1;}
:root[data-theme="light"] .tl-tabs button[aria-selected="true"]{background:var(--panel);box-shadow:inset 0 0 0 1px var(--border);}
.tl-toolhead{margin:2px 0 16px;}
.tl-toolname{margin:0 0 4px;font-size:1.125rem;font-weight:650;letter-spacing:-.01em;color:var(--text);}
.tl-lede{margin:0;font-size:.8125rem;color:var(--dim);line-height:1.6;max-width:86ch;}

/* Input and result are two cards of equal height: a title, the editor as an
   inset well, and a footer pinned to the bottom (actions on the left card,
   the status on the right), so the two footers always sit on one line.
   arrange() in ide-tools.js builds the footers. The editor in each card
   grows to take up the height, so the card has no empty block in it. */
.tl-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;}
.tl-pane,.tl-rx-top,.tl-top{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.6);}
:root[data-theme="light"] .tl-pane,:root[data-theme="light"] .tl-rx-top,
:root[data-theme="light"] .tl-top{
  background:#FFFFFF;box-shadow:0 1px 2px rgba(20,30,50,.05),0 10px 30px -20px rgba(20,30,50,.25);}
.tl-pane{display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:border-color .14s var(--ease);}
.tl-pane:focus-within{border-color:var(--blue);}
.tl-label{font-size:.75rem;font-weight:600;color:var(--dim);}
.tl-pane > .tl-label{display:block;padding:14px 16px 10px;font-size:.8125rem;color:var(--text);}
.tl-pane > .tl-area,.tl-pane > .tl-out{flex:1 1 auto;margin:0 12px;width:auto;min-height:140px;}
/* a result is as long as the answer, so a few lines do not float in a box */
.tl-pane > .tl-out{max-height:60vh;min-height:120px;}
.tl-pane > .tl-input,.tl-pane > .jwt-wrap,.tl-pane > .jwt-legend,.tl-pane > .tl-presets,
.tl-pane > .tl-hl,.tl-pane > .jwt-sec{margin-left:12px;margin-right:12px;width:auto;}
.tl-pane > .tl-presets,.tl-pane > .jwt-legend{margin-top:12px;}
.tl-pane > .tl-hl{margin-bottom:10px;}
.tl-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;min-height:62px;
  padding:14px 16px;box-sizing:border-box;}

/* the editors: an inset well inside the card */
.tl-area,.tl-input,.tl-out{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;
  font-family:var(--mono);font-size:.7813rem;line-height:1.65;box-sizing:border-box;}
:root[data-theme="light"] .tl-area,:root[data-theme="light"] .tl-input,:root[data-theme="light"] .tl-out{background:#F7F8FA;}
.tl-area,.tl-input{width:100%;padding:12px 14px;resize:vertical;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);}
.tl-input{resize:none;}
.tl-area:focus,.tl-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,99,222,.22);}
.tl-out{margin:0;padding:12px 14px;white-space:pre-wrap;word-break:break-word;min-height:120px;max-height:52vh;overflow:auto;}
.tl-out:focus-visible{outline:2px solid var(--blue2);outline-offset:1px;}

.tl-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--text);
  border:1px solid var(--border2);border-radius:8px;padding:0 14px;min-height:34px;font-family:var(--sans);
  font-size:.8125rem;font-weight:500;cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease);}
.tl-btn:hover{background:var(--hover);border-color:var(--blue);}
.tl-btn:active{transform:translateY(1px);}
:root[data-theme="light"] .tl-btn:not(.prim){background:#FFFFFF;}
:root[data-theme="light"] .tl-btn:not(.prim):hover{background:var(--panel);}
.tl-btn.prim{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 12px -4px rgba(43,99,222,.6);}
.tl-btn.prim:hover{background:var(--blue2);border-color:var(--blue2);color:var(--bg);}

/* the status as a badge with a dot: green, amber or red at a glance */
.tl-status,.tl-verdict{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.7813rem;font-weight:500;
  color:var(--dim);line-height:1.45;max-width:60ch;padding:5px 12px 5px 10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--border);}
.tl-status:empty,.tl-verdict:empty{display:none;}
.tl-status::before,.tl-verdict::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;opacity:.9;}
.tl-status.ok,.tl-verdict.ok{color:var(--ok-text);background:rgba(63,199,174,.1);border-color:rgba(63,199,174,.28);}
.tl-status.bad,.tl-verdict.bad{color:var(--bad-text);background:rgba(255,122,99,.1);border-color:rgba(255,122,99,.3);}
.tl-status.warn,.tl-verdict.warn{color:var(--warn-text);background:rgba(227,179,65,.1);border-color:rgba(227,179,65,.3);}
:root[data-theme="light"] .tl-status.ok,:root[data-theme="light"] .tl-verdict.ok{color:var(--ink-teal);background:rgba(10,110,134,.07);}
:root[data-theme="light"] .tl-status.bad,:root[data-theme="light"] .tl-verdict.bad{color:var(--ink-red);background:rgba(200,40,40,.06);}
:root[data-theme="light"] .tl-status.warn,:root[data-theme="light"] .tl-verdict.warn{color:var(--ink-amber);background:rgba(150,100,0,.07);}

.tl-note{font-size:.75rem;line-height:1.7;color:var(--dim);max-width:88ch;margin:14px 0 0;}
.tl-note b{color:var(--text);}

.tl-presets{display:flex;gap:6px;flex-wrap:wrap;}
.tl-presets .tl-btn{font-size:.75rem;padding:0 12px;min-height:30px;}

.tl-claims{margin-top:10px;}
.tl-table{width:100%;border-collapse:collapse;font-size:.7813rem;}
.tl-table th{text-align:left;font-weight:600;color:var(--dim);padding:6px 10px 6px 0;
  white-space:nowrap;vertical-align:top;font-size:.75rem;}
.tl-table td{padding:6px 10px 6px 0;font-family:var(--mono);word-break:break-all;vertical-align:top;}
.tl-table tr + tr th,.tl-table tr + tr td{border-top:1px solid var(--border);}
.tl-table td.ok{color:var(--ok-text);font-family:var(--sans);}
.tl-table td.bad{color:var(--bad-text);font-family:var(--sans);}
:root[data-theme="light"] .tl-table td.ok{color:var(--ink-teal);}
:root[data-theme="light"] .tl-table td.bad{color:var(--ink-red);}

/* JSON & XML: where it broke, marked under the text in the box. The layer
   renders the same text invisibly in the same metrics, so its backgrounds
   land under the right characters; both reserve the scrollbar gutter. */
:root{--fx-line:rgba(255,122,99,.13);--fx-at:rgba(255,122,99,.45);--fx-bar:#FF7A63;}
:root[data-theme="light"]{--fx-line:rgba(207,34,46,.08);--fx-at:rgba(207,34,46,.28);--fx-bar:#CF222E;}
.tl-pane > .fx-ed{position:relative;display:flex;flex-direction:column;flex:1 1 auto;margin:0 12px;}
.fx-ed > .fx-in{position:relative;z-index:1;flex:1 1 auto;min-height:140px;background:transparent;scrollbar-gutter:stable;}
:root[data-theme="light"] .fx-ed > .fx-in{background:transparent;}
.fx-hl{position:absolute;inset:0;z-index:0;margin:0;padding:12px 14px;box-sizing:border-box;overflow:hidden;
  border:1px solid transparent;border-radius:10px;background:var(--bg);color:transparent;pointer-events:none;
  font-family:var(--mono);font-size:.7813rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:break-word;
  word-break:normal;scrollbar-gutter:stable;}
:root[data-theme="light"] .fx-hl{background:#F7F8FA;}
.fx-line{display:block;margin:0 -14px;padding:0 14px;background:var(--fx-line);}
.fx-at{background:var(--fx-at);border-radius:2px;box-shadow:0 0 0 1px var(--fx-bar);}
.fx-at.end{display:inline-block;width:2px;height:1.2em;vertical-align:text-bottom;background:var(--fx-bar);box-shadow:none;}
/* the result box when there is no result: the message and the lines around it */
.tl-out.fx-err{color:var(--dim);}
.fx-err .fx-msg{color:var(--bad-text);font-family:var(--sans);font-weight:600;}
.fx-err .fx-bad{color:var(--text);background:var(--fx-line);}
.fx-err .fx-caret{color:var(--fx-bar);font-weight:700;}
:root[data-theme="light"] .fx-err .fx-msg{color:var(--ink-red);}

/* cron: the expression taken apart, one field to a row */
/* compact: one line a field, the allowed values beside the name, and room
   under the table before the Copy button */
.tl-pane > .cr-fields{margin:18px 12px 14px;padding:4px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;}
:root[data-theme="light"] .tl-pane > .cr-fields{background:#F7F8FA;}
.cr-fields:empty{display:none;}
.cr-fields .tl-table th,.cr-fields .tl-table td{padding-top:4px;padding-bottom:4px;line-height:1.45;vertical-align:baseline;}
.cr-fields .tl-table th{padding-right:18px;width:1%;white-space:nowrap;}
.cr-fields td.cr-val{width:1%;padding-right:18px;}
.cr-allowed{font-weight:400;font-family:var(--mono);font-size:.6875rem;color:var(--dim);opacity:.85;margin-left:8px;}
.cr-fields td.cr-val{color:var(--blue2);white-space:nowrap;}
.cr-fields td.cr-mean{font-family:var(--sans);color:var(--text);word-break:normal;}
:root[data-theme="light"] .cr-fields td.cr-val{color:var(--blue);}

/* regex: pattern and flags as one search bar above the two cards */
.tl-rx-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding:10px 12px;}
.tl-rx-top .tl-label{padding-left:4px;}
.tl-rx-top .tl-input{flex:1 1 320px;width:auto;font-size:.875rem;padding:11px 14px;}
.tl-rx-top .tl-input.flags{flex:0 0 76px;text-align:center;}

/* option rows above the cards (keys & case, compare): a label, then one
   segmented track holding the options, the pressed one raised like the tool
   switcher. Toggles (.multi) also carry a small checkbox so it is clear each
   one switches on its own. */
.tl-top{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;padding:14px 16px;}
.tl-seg{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;}
.tl-seg > .tl-label{flex:0 0 auto;min-width:70px;}
.tl-segc{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:12px;}
:root[data-theme="light"] .tl-segc{background:var(--panel);}
.tl-segb{display:inline-flex;align-items:center;background:none;border:0;border-radius:8px;color:var(--dim);
  font-family:var(--sans);font-size:.8125rem;font-weight:500;padding:0 14px;min-height:34px;cursor:pointer;white-space:nowrap;
  transition:color .14s var(--ease),background .14s var(--ease),box-shadow .14s var(--ease);}
.tl-segb:hover{color:var(--text);background:var(--hover);}
.tl-segb[aria-pressed="true"]{color:var(--text);background:var(--panel2);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px var(--border2);}
:root[data-theme="light"] .tl-segb[aria-pressed="true"]{background:#FFFFFF;box-shadow:0 1px 3px rgba(20,30,50,.12),inset 0 0 0 1px var(--border);}
.tl-seg.multi .tl-segb::before{content:"";width:9px;height:9px;margin-right:8px;border-radius:3px;border:1.5px solid currentColor;flex:none;}
.tl-seg.multi .tl-segb[aria-pressed="true"]::before{background:var(--blue2);border-color:var(--blue2);}

/* compare: each side is a transparent textarea over a layer that paints the
   differences, as the JWT box does. Every metric that affects wrapping is on
   the shared rule, and both reserve the scrollbar gutter, or the paint would
   drift off the text it belongs to. */
:root{--df-a:rgba(255,122,99,.16);--df-b:rgba(63,199,174,.16);--df-c:rgba(227,179,65,.13);--df-cw:rgba(227,179,65,.28);}
:root[data-theme="light"]{--df-a:rgba(207,34,46,.10);--df-b:rgba(26,127,55,.11);--df-c:rgba(180,120,0,.10);--df-cw:rgba(180,120,0,.30);}
.tl-top.row{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;}
.df-nav{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.df-nav .tl-btn{min-width:36px;padding:0 10px;}
.df-nav .tl-btn:disabled{opacity:.45;cursor:default;}
.df-legend{display:inline-flex;gap:12px;flex-wrap:wrap;font-size:.75rem;color:var(--dim);margin-right:6px;}
.df-key{display:inline-flex;align-items:center;gap:6px;}
.df-key::before{content:"";width:10px;height:10px;border-radius:3px;}
.df-key.a::before{background:var(--df-a);box-shadow:inset 0 0 0 1px rgba(255,122,99,.5);}
.df-key.b::before{background:var(--df-b);box-shadow:inset 0 0 0 1px rgba(63,199,174,.5);}
.df-key.c::before{background:var(--df-cw);}
/* The textarea is in the flow and sets the height, so its own grip makes it
   longer; the paint layer is pinned over it and follows. buildDiff() keeps
   the two sides one length, so their lines stay level. */
.tl-pane > .df-ed{position:relative;flex:none;margin:0 12px;}
.df-hl,.df-in{margin:0;width:100%;box-sizing:border-box;
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  font-family:var(--mono);font-size:.7813rem;line-height:1.65;letter-spacing:normal;tab-size:4;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;overflow:auto;scrollbar-gutter:stable;}
.df-hl{position:absolute;inset:0;height:100%;background:var(--bg);color:var(--text);pointer-events:none;z-index:0;overflow:hidden;}
:root[data-theme="light"] .df-hl{background:#F7F8FA;}
.df-in{position:relative;display:block;height:360px;min-height:160px;
  background:transparent;color:transparent;caret-color:var(--text);resize:vertical;z-index:1;}
.df-in::placeholder{color:var(--dim);}
.df-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,99,222,.22);}
/* a line's tint runs edge to edge: the negative margin undoes the padding */
.dl{display:block;margin:0 -14px;padding:0 14px;}
.df-ed.a .dl.only{background:var(--df-a);}
.df-ed.b .dl.only{background:var(--df-b);}
.dl.chg{background:var(--df-c);}
.dl .df-w{background:var(--df-cw);border-radius:3px;}
/* the difference the arrows are on: outlined where it has lines, and a line
   marking the spot on the side that has none */
.dl.cur{box-shadow:inset 0 0 0 1.5px var(--blue2);}
.dl.gap{box-shadow:inset 0 2px 0 var(--blue2);}
.dl.gap-end{box-shadow:inset 0 -2px 0 var(--blue2);}
.df-pos{font-size:.75rem;color:var(--dim);font-variant-numeric:tabular-nums;min-width:8ch;text-align:right;}
@media (max-width:860px){ .df-in{height:240px;} .tl-top.row{flex-direction:column;align-items:flex-start;} }

/* regex: the test text again, every match marked, groups underlined */
:root{--rx1:rgba(110,155,255,.24);--rx1b:#6E9BFF;--rx2:rgba(63,199,174,.22);--rx2b:#3FC7AE;}
:root[data-theme="light"]{--rx1:rgba(31,90,208,.13);--rx1b:#1F5AD0;--rx2:rgba(10,110,134,.13);--rx2b:#0A6E86;}
.tl-hl{padding:12px 14px;border-radius:10px;background:var(--bg);border:1px solid var(--border);font-family:var(--mono);
  font-size:.7813rem;line-height:1.9;color:var(--dim);white-space:pre-wrap;word-break:break-word;max-height:30vh;overflow:auto;}
:root[data-theme="light"] .tl-hl{background:#F7F8FA;}
.tl-hl:empty{display:none;}
.rx-m{background:var(--rx1);color:var(--text);border-radius:4px;padding:1px 2px;box-shadow:inset 0 -2px 0 var(--rx1b);}
.rx-m.alt{background:var(--rx2);box-shadow:inset 0 -2px 0 var(--rx2b);}
.rx-m.empty{display:inline-block;width:2px;height:1.2em;padding:0;vertical-align:text-bottom;background:var(--rx1b);}
.rx-g{font-weight:700;text-decoration:underline dotted;text-underline-offset:3px;}

@media (max-width:860px){
  .tl-split{grid-template-columns:1fr;}
  .tl-out{max-height:none;}
  .tl-shell{grid-template-columns:1fr;gap:14px;}
  .tl-tabs{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;}
  .tl-group{display:none;}
  .tl-tabs button{width:auto;min-height:44px;}
  .tools{padding:14px 12px 28px;}
}

/* Scratch on a phone, found by looking at every tool at 390px. */
@media (max-width:860px){
  /* The menu scrolled sideways and showed two of the seven tools, with
     nothing to say there were more. Wrapped, all seven are in view. */
  .tl-tabs{flex-wrap:wrap;overflow:visible;gap:4px;}
  .tl-tabs button{flex:1 1 auto;justify-content:center;}
  /* desktop heights left short samples floating in empty boxes */
  .tl-pane > .tl-area{min-height:180px;}
  .tl-pane > .tl-out{min-height:140px;}
  /* compare: the legend on one row, the count and the arrows under it,
     instead of the down arrow wrapping onto a line of its own */
  .df-nav{display:flex;width:100%;}
  .df-legend{flex:1 1 100%;margin:0 0 2px;}
  .df-pos{margin-right:auto;text-align:left;min-width:0;}
}
@media (pointer: coarse){
  /* The fields keep the output's size, so what goes in and what comes out
     read as one text. iOS would zoom into a field under 16px on tap; ide.js
     turns that off there instead (pinch zoom stays). */
  .tl-rx-top .tl-input{font-size:.7813rem;}
  /* finger-sized: 44px, as the rest of the page does on touch */
  .tl-btn,.tl-segb,.tl-presets .tl-btn{min-height:44px;}
  .tl-presets .tl-btn{font-size:.8125rem;}
  .df-nav .tl-btn{min-width:44px;}
}

/* Phones: the tool menu and every set of modes (encodings, key styles, write
   as, compare options) as an even two-column grid. Wrapped by label length
   they made ragged rows of different widths; equal cells line up, and an odd
   last one takes the full row so the grid stays symmetrical. Declared after
   the touch block so these heights win. */
@media (max-width:620px){
  .tl-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;}
  .tl-tabs button{justify-content:flex-start;gap:8px;min-height:40px;padding:0 10px;font-size:.7813rem;min-width:0;}
  .tl-tabs button:last-of-type:nth-of-type(odd){grid-column:1 / -1;}
  /* The modes as chips: each one bordered so it reads as tappable, the
     picked one filled. They grow to fill their row, so every row is flush
     at both edges without the tall dark box the grid needed. */
  .tl-seg{flex-direction:column;align-items:stretch;gap:8px;width:100%;box-sizing:border-box;}
  .tl-segc{display:flex;flex-wrap:wrap;gap:6px;padding:0;background:none;border:0;border-radius:0;}
  /* an invisible last item that soaks up the spare room on the final row only,
     so a lone chip there (Hex, JSON) keeps its size instead of spanning the card */
  .tl-segc::after{content:"";flex:20 1 0;min-width:0;}
  :root[data-theme="light"] .tl-segc{background:none;}
  .tl-segb{flex:1 1 auto;justify-content:center;min-height:34px;padding:0 12px;font-size:.7813rem;
    border:1px solid var(--border2);background:var(--panel2);color:var(--text);}
  :root[data-theme="light"] .tl-segb{background:#FFFFFF;border-color:var(--border);}
  .tl-segb[aria-pressed="true"],:root[data-theme="light"] .tl-segb[aria-pressed="true"]{
    background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none;}
  .tl-seg.multi .tl-segb[aria-pressed="true"]::before{background:#fff;border-color:#fff;}
}
/* the narrowest phones: two long tool names wrap rather than spill */
@media (max-width:359px){ .tl-tabs button{white-space:normal;line-height:1.25;padding:5px 9px;} }
/* compare on a phone: the two Ignore chips share the row evenly, and the
   arrows sit either side of the count as one pager, instead of two lone
   squares pushed to the right edge under the legend */
@media (max-width:620px){
  .tl-opts .tl-segc::after{display:none;}
  .tl-opts .tl-segb{flex:1 1 0;}
  .df-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;}
  .df-legend{grid-column:1 / -1;margin:0;}
  .df-pos{grid-row:2;grid-column:2;margin:0;text-align:center;}
  .df-nav .tl-btn{min-width:0;padding:0;}
}

/* ═════════════ corner notifications ═════════════
   The IDE balloon: something finished in the background and you were probably
   looking elsewhere. Sits above the dock, clear of the run display top right. */
.toasts{position:fixed;right:16px;bottom:38px;z-index:90;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end;pointer-events:none;max-width:min(420px,calc(100vw - 32px));}
.toast{pointer-events:auto;background:var(--panel2);border:1px solid var(--border2);
  border-left:1px solid var(--border2);border-radius:9px;padding:11px 13px 12px;
  box-shadow:0 14px 40px rgba(0,0,0,.42);font-size:.7813rem;color:var(--text);width:100%;
  opacity:0;transform:translateY(10px);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.toast.on{opacity:1;transform:none;}
.toast-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.toast-h b{font-weight:600;}
.toast-h .sp{flex:1 1 auto;}
.toast-tick{width:17px;height:17px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.625rem;font-weight:700;background:var(--d2);color:#fff;}
.toast.bad .toast-tick{background:var(--d1);}
.toast-x{background:none;border:0;color:var(--dim);cursor:pointer;width:24px;height:24px;
  border-radius:5px;font-size:.6875rem;line-height:1;flex:none;}
.toast-x:hover{background:var(--hover);color:var(--text);}
.toast-l{line-height:1.55;color:var(--dim);word-break:break-word;}
.toast-l.mono{font-family:var(--mono);font-size:.7188rem;color:var(--text);}
.toast-l.mono.dim{color:var(--dim);}
.toast-l.dim{color:var(--dim);}
@media (max-width:640px){
  .toasts{left:10px;right:10px;bottom:34px;max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .toast{transition:none;}
}

/* the commit view, once there is nothing left to commit */
.chclean{padding:14px 12px 10px;display:flex;flex-direction:column;gap:5px;}
.chclean b{font-size:.7813rem;color:var(--d2);font-weight:600;}
.chclean span{font-size:.7188rem;color:var(--dim);line-height:1.6;}
:root[data-theme="light"] .chclean b{color:var(--ink-teal);}
.chmsg{padding:7px 12px 9px;display:flex;flex-direction:column;gap:3px;}
.chmsg b{font-size:.7813rem;font-weight:600;line-height:1.4;}
.chmsg span{font-family:var(--mono);font-size:.6563rem;color:var(--dim);}
.chfile.done .nm{color:var(--dim);}


/* ───────── JWT, in the three colours jwt.io taught everyone ─────────
   The encoded box is a transparent textarea over a pre that mirrors it,
   because a textarea cannot colour its own contents. Every metric that
   affects wrapping has to match on both, or the colours drift off the text.
   The textarea is in the flow and can be pulled longer; the pre follows it.
   It also grows to fill its card down to the buttons, level with the decoded
   side, as jwt.io's encoded box does, instead of leaving a void under it. */
.jwt-wrap{position:relative;}
.tl-pane > .jwt-wrap{flex:1 1 auto;display:flex;flex-direction:column;}
.tl-pane > .jwt-wrap > .jwt-in{flex:1 1 auto;}
/* the key to check it with, under the token: the two share the card's height */
.tl-pane > .jwt-ver{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;margin:15px 12px 0;}
.tl-pane > .jwt-legend{margin-top:11px;margin-left:16px;}  /* under the token, in line with its title */
.jwt-ver .tl-label{color:var(--text);font-size:.8125rem;padding-left:4px;}  /* in line with "Encoded" */
.jwt-secret{flex:1 1 auto;min-height:72px;resize:vertical;padding:10px 14px;}
.tl-verdict{align-self:flex-start;margin-left:4px;}
.jwt-hl,.jwt-in{margin:0;width:100%;
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;box-sizing:border-box;
  font-family:var(--mono);font-size:.7813rem;line-height:1.7;
  white-space:pre-wrap;word-break:break-all;overflow:auto;}
.jwt-hl{position:absolute;inset:0;height:100%;background:var(--bg);color:var(--dim);pointer-events:none;z-index:0;}
:root[data-theme="light"] .jwt-hl{background:#F7F8FA;}
.jwt-in{position:relative;display:block;height:150px;min-height:100px;
  background:transparent;color:transparent;caret-color:var(--text);resize:vertical;z-index:1;}
/* the light well colour on .tl-area outranks the rule above and hid the token */
:root[data-theme="light"] .jwt-in{background:transparent;}
.jwt-in::placeholder{color:var(--dim);}
.jwt-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,99,222,.22);}
.jwt-p0{color:#E8578F;}
.jwt-p1{color:#B476F0;}
.jwt-p2{color:#2FA8D6;}
.jwt-dot{color:var(--dim);}
:root[data-theme="light"] .jwt-p0{color:#C4185C;}
:root[data-theme="light"] .jwt-p1{color:#7B3FB8;}
:root[data-theme="light"] .jwt-p2{color:#136C8C;}

.jwt-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;}
.jwt-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
  font-size:.75rem;font-weight:500;color:var(--dim);}
.jwt-key i{width:9px;height:9px;border-radius:2px;display:block;}
.jwt-key.p0 i{background:#E8578F;} .jwt-key.p1 i{background:#B476F0;} .jwt-key.p2 i{background:#2FA8D6;}
:root[data-theme="light"] .jwt-key.p0 i{background:#C4185C;}
:root[data-theme="light"] .jwt-key.p1 i{background:#7B3FB8;}
:root[data-theme="light"] .jwt-key.p2 i{background:#136C8C;}

.jwt-sec{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;}
.jwt-sec-h{font-family:var(--sans);font-size:.7188rem;font-weight:600;letter-spacing:.04em;padding:8px 14px;
  /* the coloured labels measured 3.6:1 on --panel2 in dark; --bg clears 4.5 */
  background:var(--bg);color:var(--dim);border-bottom:1px solid var(--border2);}
.jwt-sec-b{margin:0;padding:12px 14px;font-family:var(--mono);font-size:.7813rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;background:var(--bg);min-height:26px;max-height:30vh;overflow:auto;}
.jwt-sec.p0 .jwt-sec-b{color:#E8578F;} .jwt-sec.p0 .jwt-sec-h{color:#E8578F;}
.jwt-sec.p1 .jwt-sec-b{color:#B476F0;} .jwt-sec.p1 .jwt-sec-h{color:#B476F0;}
.jwt-sec.p2 .jwt-sec-b{color:#2FA8D6;} .jwt-sec.p2 .jwt-sec-h{color:#2FA8D6;}
:root[data-theme="light"] .jwt-sec.p0 .jwt-sec-b,:root[data-theme="light"] .jwt-sec.p0 .jwt-sec-h{color:#C4185C;}
:root[data-theme="light"] .jwt-sec.p1 .jwt-sec-b,:root[data-theme="light"] .jwt-sec.p1 .jwt-sec-h{color:#7B3FB8;}
:root[data-theme="light"] .jwt-sec.p2 .jwt-sec-b,:root[data-theme="light"] .jwt-sec.p2 .jwt-sec-h{color:#136C8C;}
/* the claims read on from the JSON above them, in the same box, under a divider */
.jwt-sec .tl-claims{margin-top:0;padding:4px 14px 10px;background:var(--bg);border-top:1px solid var(--border2);}
.jwt-sec .tl-claims:empty{display:none;}

/* Scratch's latest parts on a phone. Declared after their own rules, which
   come late in the file, or these would lose to them. */
@media (max-width:860px){
  /* the regex sample wraps to more lines on a phone; all of it in view */
  .tl-pane > .rx-text{min-height:250px;}
}
@media (max-width:620px){
  /* the allowed values under the field name, so the meaning keeps one line */
  .cr-allowed{display:block;margin:1px 0 0;}
  .cr-fields .tl-table th,.cr-fields td.cr-val{padding-right:12px;}
  .tl-pane > .cr-fields{padding:4px 12px;}
}

/* ═════════════ another program's window ═════════════
   Jira, Docker, Scratch and SonarQube are not files in this project, they are
   other applications. Framing them as windows says that faster than any
   label could, and all four share one browser frame so they read as a set.
   The chrome is a picture, so it is aria-hidden and
   nothing in it is focusable. */
/* [hidden] loses to display:flex, so it has to be said explicitly. */
.breadcrumbs[hidden]{display:none;}
.appwin{display:flex;flex-direction:column;min-height:100%;background:var(--panel);}

.appwin-url{display:flex;align-items:center;gap:10px;flex:none;height:38px;padding:0 12px;
  background:var(--bg);border-bottom:1px solid var(--border);}
.appwin-nav{color:var(--dim);font-size:.875rem;line-height:1;background:none;border:0;border-radius:5px;
  width:28px;height:28px;flex:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;}
.appwin-nav:hover:not(:disabled){background:var(--hover);color:var(--text);}
.appwin-nav:disabled{opacity:.38;cursor:default;}
/* reload: the icon turns, a bar runs through the address, the page dims */
.appwin-pill{position:relative;}
.appwin-glyph{display:inline-block;line-height:1;}
.appwin-nav svg.appwin-glyph{display:block;transform-origin:50% 50%;}
/* one turn for the whole reload, easing in and out, the way a browser settles */
.appwin.loading .appwin-nav[data-nav="reload"] .appwin-glyph{animation:appwin-spin .65s cubic-bezier(.45,0,.25,1) 1;}
.appwin.loading .appwin-pill::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--blue);transform-origin:left;animation:appwin-load .65s var(--ease) forwards;}
.appwin.loading .appwin-body{opacity:.35;transition:opacity .2s var(--ease);}
@keyframes appwin-spin{to{transform:rotate(360deg)}}
@keyframes appwin-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .appwin.loading .appwin-nav[data-nav="reload"] .appwin-glyph,.appwin.loading .appwin-pill::after{animation:none;} }
.appwin-pill{flex:1 1 auto;display:flex;align-items:center;gap:8px;height:24px;padding:0 11px;
  border-radius:8px;background:var(--panel2);font-family:var(--mono);font-size:.7188rem;
  color:var(--dim);overflow:hidden;}
.appwin-pill .lock{color:var(--d2);font-size:.5rem;}
:root[data-theme="light"] .appwin-pill .lock{color:var(--ink-teal);}
.appwin-pill .u{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* browser tabs above the address: Quality holds its tests and its code analysis */
.qtabs{display:flex;align-items:flex-end;gap:2px;flex:none;height:36px;padding:0 10px;background:var(--panel);}
.qtab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border:0;border-radius:8px 8px 0 0;
  background:none;color:var(--dim);font-family:inherit;font-size:.7813rem;white-space:nowrap;cursor:pointer;}
.qtab .ic{display:inline-flex;}
.qtab:hover{background:var(--hover);color:var(--text);}
.qtab.active{background:var(--bg);color:var(--text);}
.qpanes{display:flex;flex-direction:column;}
.qpanes > .pane.active{display:flex;flex-direction:column;flex:1 0 auto;}
.qpanes > .pane > *{flex:1 0 auto;}
.appwin-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
/* a window whose file is still on its way (see loadPart in ide.js) */
.part-wait{padding:var(--page-y) var(--page-x);color:var(--dim);font-size:.8125rem;}
.part-wait p{margin:0 0 12px;color:var(--text);}
/* grow to fill the window, but never shrink below the content: shrunk to the
   window's height, a light page painted one screen of background and the
   rest of it scrolled up over the dark desktop */
.appwin-body > *{flex:1 0 auto;min-height:0;}

@media (max-width:640px){
  .appwin-url{padding:0 9px;gap:7px;}
  .appwin-nav[data-nav="forward"]{display:none;}
  .qtab{padding:0 10px;}
  .mdprev .md-area{display:block;margin-left:0;}
  /* room under the last block, so it does not sit against the bottom edge */
  .jira,.dock-app,.sq,.tools{padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));}
}


/* ═════════════ the desktop ═════════════
   The title bar stopped belonging to the editor and started belonging to the
   machine: it lists what is running. The IDE is one window among them, which
   is why its branch and run configuration moved down into a toolbar of its
   own. Windows are display:none rather than moved off screen, so nothing
   inactive is measured, focusable or read out. */
.desktop{flex:1 1 auto;min-height:0;position:relative;display:flex;}
.win{display:none;flex:1 1 auto;min-width:0;min-height:0;flex-direction:column;}
.win.active{display:flex;}
.win[data-win="ide"]{background:var(--bg);}
.win:not([data-win="ide"]) > .pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.win:not([data-win="ide"]) > .pane > .appwin{flex:1 1 auto;min-height:0;}
.win:not([data-win="ide"]) .appwin-body{overflow:auto;}

.osapps{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;}
.osapps::-webkit-scrollbar{display:none;}
.osapp{display:inline-flex;align-items:center;gap:7px;flex:none;height:26px;padding:0 10px;
  background:none;border:0;border-radius:6px;color:var(--dim);cursor:pointer;
  font-family:inherit;font-size:.7813rem;white-space:nowrap;
  transition:background .14s var(--ease),color .14s var(--ease);}
.osapp .ic{display:inline-flex;align-items:center;flex:none;}
/* Jira's mark is solid and fills its whole box, so at the same 15px it read
   bigger than the wrench, the whale and the puzzle piece around it */
.osapp[data-app="jira"] .ic svg{width:12px;height:12px;}
.osapp:hover{background:var(--hover);color:var(--text);}
/* the active window: a soft fill in the site’s blue on the button’s rounded square, no outline,
   with nothing under the button and nothing that changes its size */
.osapp.active{background:rgba(110,155,255,.16);color:var(--text);}
:root[data-theme="light"] .osapp.active{background:rgba(42,98,216,.10);}
.osapp.active .nm{text-shadow:.4px 0 0 currentColor;}
/* Tools is an extra, not evidence: a gap and a rule set it apart */
.osapp.extra{margin-left:13px;}
.osapp.extra::before{content:"";position:absolute;left:-8px;top:5px;bottom:5px;width:1px;background:var(--border);}

/* IntelliJ's own toolbar, now that the bar above it is the machine's */
.ide-bar{display:flex;align-items:center;gap:10px;flex:none;height:34px;padding:0 10px 0 12px;
  background:var(--panel);border-bottom:1px solid var(--border);}
.ide-bar .runcfg{margin-left:auto;}

@media (max-width:760px){
  .osapp .nm{display:none;}
  .osapp{padding:0 8px;}
  .osapp.active .nm{display:inline;}
  .ide-bar{height:32px;padding:0 8px;}
}

/* ───────── real window controls ─────────
   The chrome used to be a drawing. These do what the symbols say: minimise
   leaves the program running and returns to the editor, maximise floats the
   window above the desktop instead of filling it, close quits it. */

/* restored down: the window floats and the desktop shows behind it */

@media (max-width:640px){ }

/* a running program keeps a mark in the switcher even when it is behind */
.osapp{position:relative;}
@media (prefers-reduced-motion:reduce){ }

/* ═════════════ SonarQube ═════════════
   Pinned light like the other vendor tools, because that is how SonarQube
   looks. Rating letters and the gate badge sit on colours dark enough for
   white text at AA. */
.sq{background:#F4F5F7;color:#1A1D24;min-height:100%;font-family:var(--sans);}
.sq-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;background:#fff;border-bottom:1px solid #E1E4EA;}
.sq-crumb{display:flex;align-items:center;gap:9px;font-size:.875rem;}
.sq-crumb h1{margin:0;}
.sq-branch{font-family:var(--mono);font-size:.7188rem;color:#4A5160;background:#EEF0F4;border-radius:5px;padding:2px 8px;}
/* SonarQube’s global bar, above the project’s own */
.sq-g{display:flex;align-items:center;gap:22px;height:48px;padding:0 var(--page-x);background:#FFFFFF;border-bottom:1px solid #E1E4EA;box-sizing:border-box;}
.sq-logo{display:inline-flex;align-items:center;gap:7px;color:#126ED3;flex:none;}
.sq-logo b{font-size:1rem;font-weight:700;color:#1A1D24;letter-spacing:-.01em;}
.sq-gnav{display:flex;align-items:stretch;gap:4px;height:100%;min-width:0;overflow-x:auto;}
.sq-gnav button{border:0;border-bottom:3px solid transparent;background:none;padding:0 8px;font:inherit;font-size:.875rem;font-weight:500;
  color:#3E4357;cursor:pointer;white-space:nowrap;}
.sq-gnav button:hover{color:#126ED3;}
.sq-gnav button[aria-current="page"]{color:#126ED3;border-bottom-color:#126ED3;}
.sq-pico{width:22px;height:22px;border-radius:4px;background:#C8452A;color:#FFFFFF;font-size:.75rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex:none;}
.sq-sep{color:#9AA1AE;}
.sq-bico{margin-right:5px;}
.sq-top[hidden],.sq-tabs[hidden]{display:none;}
.sq-ph{margin:0 0 14px;}
.sq-ph h2{margin:0 0 4px;font-size:1.125rem;font-weight:600;color:#1A1D24;}
.sq-ph p{margin:0;}
.sq-empty{text-align:center;padding:30px 18px;}
.sq-empty p{margin:6px 0 0;}
.sq-status.sm{font-size:.7188rem;padding:2px 8px;}
.sq-files.sq-plain{border:0;margin-top:10px;}
.sq-vring{display:flex;align-items:center;gap:12px;}
.sq-donut{flex:none;}
.sq-donut .track{stroke:#E1E4EA;} .sq-donut .ok{stroke:#0A6E3F;} .sq-donut .bad{stroke:#B52D1A;}
@media (max-width:760px){ .sq-g{gap:12px;} .sq-logo b{display:none;} }
.sq-when{margin-left:auto;font-size:.75rem;color:#5A6170;}
.sq-btn{background:#fff;color:#1A1D24;border:1px solid #C9CED8;border-radius:6px;padding:0 12px;min-height:30px;
  font-family:inherit;font-size:.7813rem;font-weight:600;cursor:pointer;}
.sq-btn:hover{border-color:#126ED3;}
.sq-btn:disabled{opacity:.55;cursor:default;}
.sq-btn.prim{background:#0F5BB5;border-color:#0F5BB5;color:#fff;margin-top:12px;min-height:34px;}
.sq-tabs{display:flex;gap:2px;padding:0 20px;background:#fff;border-bottom:1px solid #E1E4EA;flex-wrap:wrap;}
.sq-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0 12px;min-height:40px;
  font-family:inherit;font-size:.8438rem;color:#4A5160;cursor:pointer;}
.sq-tabs button[aria-pressed="true"]{color:#0F5BB5;border-bottom-color:#126ED3;text-shadow:.4px 0 0 currentColor;}
.sq-body{padding:18px 20px 30px;display:flex;flex-direction:column;gap:14px;max-width:1180px;}
.sq-card{background:#fff;border:1px solid #E1E4EA;border-radius:8px;padding:16px 18px;}
.sq-card h2{margin:0 0 6px;font-size:.9375rem;font-weight:700;}
.sq-dim{margin:4px 0 0;font-size:.7813rem;line-height:1.6;color:#4E5563;}
.sq-gate-h{display:flex;align-items:center;gap:12px;}
.sq-gate-h h2{margin:0;}
.sq-status{font-size:.7813rem;font-weight:700;color:#fff;border-radius:5px;padding:4px 12px;}
.sq-status.passed{background:#0A6E3F;} .sq-status.failed{background:#B52D1A;} .sq-status.waiting{background:#7A4A00;}
.sq-conds{margin-top:12px;border-collapse:collapse;font-size:.8125rem;width:100%;max-width:720px;}
.sq-conds td{padding:7px 12px 7px 0;border-top:1px solid #EEF0F3;}
.sq-conds .sq-dim{margin:0;}
.sq-cmark{width:18px;font-weight:700;}
.sq-conds tr.ok .sq-cmark{color:#0A6E3F;} .sq-conds tr.bad .sq-cmark{color:#B52D1A;} .sq-conds tr.wait .sq-cmark{color:#7A4A00;}
.sq-cval{font-family:var(--mono);font-size:.7813rem;text-align:right;white-space:nowrap;}
.sq-conds tr.bad .sq-cval{color:#B52D1A;font-weight:700;}
.sq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.sq-m{display:flex;flex-direction:column;gap:2px;}
.sq-m-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sq-m h3{margin:0;font-size:.8125rem;font-weight:600;color:#4A5160;}
.sq-big{font-size:1.75rem;font-weight:700;line-height:1.15;margin-top:6px;}
.sq-rate{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:.8125rem;font-weight:700;}
.sq-rate.rA{background:#0A6E3F;} .sq-rate.rB{background:#4F6A00;} .sq-rate.rC{background:#7A4A00;}
.sq-rate.rD{background:#9A3B12;} .sq-rate.rE{background:#B52D1A;}
.sq-link{align-self:flex-start;margin-top:8px;background:none;border:0;padding:0;min-height:24px;font:inherit;font-size:.7813rem;
  color:#0F5BB5;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.sq-props{margin:12px 0 0;padding:12px 14px;background:#F7F8FA;border:1px solid #E1E4EA;border-radius:6px;
  font-family:var(--mono);font-size:.75rem;line-height:1.7;color:#1A1D24;white-space:pre-wrap;word-break:break-word;}
.sq-filter{display:flex;gap:6px;flex-wrap:wrap;}
.sq-filter button{background:#fff;border:1px solid #C9CED8;border-radius:6px;padding:0 12px;min-height:30px;
  font-family:inherit;font-size:.7813rem;color:#4A5160;cursor:pointer;}
.sq-filter button[aria-pressed="true"]{border-color:#126ED3;color:#0F5BB5;text-shadow:.4px 0 0 currentColor;}
.sq-issues{display:flex;flex-direction:column;background:#fff;border:1px solid #E1E4EA;border-radius:8px;overflow:hidden;}
.sq-issues > .sq-dim{padding:14px 16px;margin:0;}
.sq-issue + .sq-issue{border-top:1px solid #EEF0F3;}
.sq-issue-h{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;background:none;border:0;
  padding:12px 16px;font-family:inherit;color:inherit;cursor:pointer;}
.sq-issue-h:hover{background:#F7F9FC;}
.sq-msg{font-size:.8438rem;font-weight:600;line-height:1.45;}
.sq-meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.75rem;color:#4E5563;}
.sq-type{font-weight:600;}
.sq-type.bug{color:#B52D1A;}
.sq-type.smell{color:#7A4A00;}
.sq-rule{font-family:var(--mono);font-size:.7188rem;}
.sq-code{margin:0 16px 14px;border:1px solid #E1E4EA;border-radius:6px;overflow:auto;font-family:var(--mono);font-size:.75rem;}
.sq-ln{display:flex;gap:12px;white-space:pre;padding:1px 10px 1px 0;}
.sq-ln .n{flex:none;width:44px;text-align:right;color:#5A6170;}
.sq-ln.hit{background:#FDECEA;}
.sq-files{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E1E4EA;border-radius:8px;font-size:.8125rem;}
.sq-files th{text-align:left;font-size:.7188rem;font-weight:600;color:#4A5160;padding:9px 12px;border-bottom:1px solid #E1E4EA;}
.sq-files td{padding:10px 12px;border-bottom:1px solid #EEF0F3;}
.sq-files td.num{font-family:var(--mono);font-size:.7813rem;}
.sq-err{color:#B52D1A;}
@media (max-width:760px){
  .sq-top,.sq-tabs{padding-left:12px;padding-right:12px;}
  .sq-when{margin-left:0;flex:1 1 100%;}
  .sq-body{padding:12px;}
  .sq-files{display:block;overflow-x:auto;}
  .sq-tabs button,.sq-filter button,.sq-btn{min-height:40px;}
}

/* ═════════════ phones, the whole site ═════════════
   Found by auditing every page at 390px and 360px: fields under 16px (iOS
   zooms into them on tap), controls under 44px, and text cut off. Kept last
   so these win over the rules they correct. */
@media (max-width:980px){
  /* everything in IntelliJ's toolbar is hidden at this width already, so it
     was an empty 32px strip on every editor page */
  .ide-bar{display:none;}
}
@media (max-width:620px){
  /* it broke into "Hire / me" when the active app showed its name */
  .hire-btn{white-space:nowrap;}
}
@media (max-width:480px){
  /* with Hire me on one line, the active app's name pushed the last app out
     of the bar. The highlight still
     says which app is open, and the name stays for screen readers. */
  .osapp.active .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  /* icon only: a square button, so the active fill is a snug rounded square round the icon */
  .osapps .osapp{width:28px;height:28px;padding:0;justify-content:center;border-radius:7px;box-sizing:border-box;}
  /* smaller than a fingertip, so the tap area reaches past the drawn square, up and down */
  .osapps .osapp::before{content:"";position:absolute;inset:-6px 0;}
  .osapps .osapp .ic svg{width:18px;height:18px;}
  .osapps .osapp .ic img{width:20px;height:auto;}
  .osapps .osapp[data-app="jira"] .ic svg{width:14px;height:14px;}
}
/* on a phone the names are hidden, so the icons carry the switcher: a size up */
@media (max-width:760px){
  .osapp .ic svg{width:20px;height:20px;}
  .osapp .ic img{width:24px;height:auto;}
  .osapp[data-app="jira"] .ic svg{width:16px;height:16px;}
}
@media (max-width:380px){ .osapp{padding:0 6px;} .hire-btn{padding-left:8px;padding-right:8px;} }
@media (max-width:359px){ .osapp{padding:0 5px;} .titlebar{gap:4px;} .hire-btn{padding-left:7px;padding-right:7px;} }
@media (max-width:620px){
  /* the pipeline cut every job name to six letters: now one stage fills the
     width and you swipe to the next, as the Tasks board does */
  .stages{scroll-snap-type:x mandatory;gap:12px;}
  .stagecol{flex:0 0 min(84vw,320px);min-width:0;padding-right:0;scroll-snap-align:start;}
  .stagecol::after{display:none;}
}
@media (pointer: coarse){
  .dk-search{font-size:1rem;min-height:44px;}
  /* iOS zooms the page into any field under 16px when it is tapped. These were
     13.5 to 14px: Hire me, Swagger's POST /contact, the Slack reply and the two
     search boxes (Services' lost to .dd-search's own size above) */
  .jira-ci,.sw-in,.sl-in,.sl-who-in .sl-in,.jira-search input,.dd-search input.dk-search{font-size:1rem;}
  .burger{width:40px;height:40px;}
  .osapp{height:36px;}
  .jobb{min-height:44px;}
  .sq-btn.prim{min-height:44px;}
  .side-foot .avatar-row{min-height:44px;}
  /* a plain link, so its tap area was only its 24px of text */

}
/* Phones held sideways (and any window under 500px tall): the terminal took
   210 of 390px and the README showed half a name. It can still be dragged
   taller; this is only where it starts. */
@media (max-height:500px){
  :root{--dockh:120px;}
  .breadcrumbs{display:none;}
}
/* engagement.yml from 621 to 1365px: five stages side by side left each job
   name six to nine letters ("map-th…", "readabl…"), on laptops too. The
   name wraps at its hyphens instead, so all five stages stay in view with
   every name whole. */
@media (min-width:621px) and (max-width:1365px){
  .jobb{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;row-gap:2px;border-radius:8px;padding:7px 11px;}
  .jobb .nm{white-space:normal;overflow-wrap:anywhere;line-height:1.3;}
}

/* ═════════════ the tool skins in the dark theme ═════════════
   Jira, Docker Desktop, SonarQube, Swagger UI, the Playwright report and the
   Cucumber report all ship a dark mode, so these follow the site's theme
   instead of staying light. Generated from the light rules above: surfaces
   and borders become one neutral grey family, so the tools read as a set,
   text goes light, and coloured text is lifted until it clears 4.5:1.
   Regenerate with node scripts/gen-dark.js rather than editing by hand. */
:root:not([data-theme="light"]) .cuke{background:#262626;color:#DDE2E0;}
:root:not([data-theme="light"]) .cuke-sum{background:#1F1F1F;border-bottom:1px solid #484848;}
:root:not([data-theme="light"]) .cuke-top .sub{color:#B1BBB7;}
:root:not([data-theme="light"]) .cuke-stats > *{border:1px solid #484848;border-radius:7px;}
:root:not([data-theme="light"]) .cuke-stats button{color:inherit;background:transparent;}
:root:not([data-theme="light"]) .cuke-stats button:hover{border-color:#9DB0A8;}
:root:not([data-theme="light"]) .cuke-stats button[aria-pressed="true"]{border-color:#0A6E5E;box-shadow:inset 0 0 0 1px #0A6E5E;background:#262626;}
:root:not([data-theme="light"]) .cuke-none{border:1px dashed #484848;border-radius:8px;color:#B1BBB7;}
:root:not([data-theme="light"]) .cuke-stats span{color:#B1BBB7;}
:root:not([data-theme="light"]) .cuke-bar{background:#303030;}
:root:not([data-theme="light"]) .cuke-feat{background:#1F1F1F;border:1px solid #484848;border-radius:8px;}
:root:not([data-theme="light"]) .cuke-fh{border-bottom:1px solid #484848;background:#212121;}
:root:not([data-theme="light"]) .cuke-fh p{color:#B1BBB7;}
:root:not([data-theme="light"]) .cuke-tags span{background:#252525;border-radius:4px;}
:root:not([data-theme="light"]) .cscen{border-bottom:1px solid #484848;}
:root:not([data-theme="light"]) .cscen:last-child{border-bottom:0;}
:root:not([data-theme="light"]) .cscen-h{background:none;border:0;color:#DDE2E0;}
:root:not([data-theme="light"]) .cscen-h:hover{background:#232323;}
:root:not([data-theme="light"]) .cdot{border-radius:50%;background:#303030;}
:root:not([data-theme="light"]) .cdot.p{background:#0F9B87;}
:root:not([data-theme="light"]) .cdot.w{background:#C97A00;}
:root:not([data-theme="light"]) .cdot.f{background:#C9301C;}
:root:not([data-theme="light"]) .cscen-h .kx{color:#B1BBB7;}
:root:not([data-theme="light"]) .cscen-h .dx{color:#B1BBB7;}
:root:not([data-theme="light"]) .cscen-h .cv{color:#B1BBB7;}
:root:not([data-theme="light"]) .cstep{border-radius:5px;background:#21312D;}
:root:not([data-theme="light"]) .cstep.w{background:#342C1E;}
:root:not([data-theme="light"]) .cstep.f{background:#262626;}
:root:not([data-theme="light"]) .cstep.run{background:#272727;}
:root:not([data-theme="light"]) .cstep.w .k{color:#F3D6A9;}
:root:not([data-theme="light"]) .cstep.f .k{color:#EA948A;}
:root:not([data-theme="light"]) .cstep.run .k{color:#B1BBB7;}
:root:not([data-theme="light"]) .cstep .d{color:#B1BBB7;}
:root:not([data-theme="light"]) .cdoc{background:#242424;border:1px solid #484848;color:#B1BBB7;border-radius:5px;}
:root:not([data-theme="light"]) .cuke-btn{color:#fff;border-radius:5px;}
:root:not([data-theme="light"]) .cuke-btn.gh{background:#1F1F1F;}
:root:not([data-theme="light"]) .swg{background:#212121;color:#C4C6CD;}
:root:not([data-theme="light"]) .swg .verx{background:#5C6373;color:#fff;border-radius:4px;}
:root:not([data-theme="light"]) .swg .oas{border:2px solid #3b4151;border-radius:4px;}
:root:not([data-theme="light"]) .swg .tagh{border-bottom:1px solid rgba(255,255,255,0.22);}
:root:not([data-theme="light"]) .swg .tagh span{color:#AEB2BA;}
:root:not([data-theme="light"]) .opx{border-radius:4px;border:1px solid;}
:root:not([data-theme="light"]) .opx.get{border-color:#61affe;background:rgba(97,175,254,.1);}
:root:not([data-theme="light"]) .opx.post{border-color:#49cc90;background:rgba(73,204,144,.1);}
:root:not([data-theme="light"]) .opx.del{border-color:#f93e3e;background:rgba(249,62,62,.1);}
:root:not([data-theme="light"]) .opx-s{background:none;border:0;color:#C4C6CD;}
:root:not([data-theme="light"]) .mthd{color:#fff;border-radius:3px;}
:root:not([data-theme="light"]) .get .mthd{background:#1E6FD9;}
:root:not([data-theme="light"]) .post .mthd{background:#1A7A50;}
:root:not([data-theme="light"]) .del .mthd{background:#B52D1A;}
:root:not([data-theme="light"]) .opdx{color:#AEB2BA;}
:root:not([data-theme="light"]) .opx-b{background:#1F1F1F;border-top:1px solid rgba(255,255,255,0.22);}
:root:not([data-theme="light"]) .opx-b h3{border-bottom:1px solid #494949;}
:root:not([data-theme="light"]) .swbtn{border:1px solid #3b4151;background:#1F1F1F;color:#C4C6CD;border-radius:4px;}
:root:not([data-theme="light"]) .swbtn:hover{background:#262626;}
:root:not([data-theme="light"]) .swbtn.exe{background:#2E6FBF;border-color:#2E6FBF;color:#fff;}
:root:not([data-theme="light"]) .swbtn.exe:hover{background:#255C9F;}
:root:not([data-theme="light"]) pre.swcode{background:#41444e;color:#fff;border-radius:4px;}
:root:not([data-theme="light"]) pre.swcode.curl{background:#333;}
:root:not([data-theme="light"]) .sw200{color:#AEF3EA;}
:root:not([data-theme="light"]) .sw-bad{color:#ED857E;}
:root:not([data-theme="light"]) .sw-req{color:#ED857E;}
:root:not([data-theme="light"]) .sw-pt{color:#AEB2BA;}
:root:not([data-theme="light"]) .sw-in{color:#C4C6CD;background:#1F1F1F;border:1px solid #8A93A3;border-radius:4px;}
:root:not([data-theme="light"]) .sw-in:focus{outline:2px solid #2E6FBF;outline-offset:0;border-color:#2E6FBF;}
:root:not([data-theme="light"]) .sw-param.bad .sw-in{border-color:#B42318;background:#222222;}
:root:not([data-theme="light"]) .sw-perr{color:#ED857E;}
:root:not([data-theme="light"]) .kb{background:#222222;color:#CBCDD3;}
:root:not([data-theme="light"]) .kb-head{background:#1F1F1F;border-bottom:1px solid #494949;}
:root:not([data-theme="light"]) .kb-logo{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-crumbs{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-crumbs b{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-tabs{background:#1F1F1F;border-bottom:1px solid #494949;}
:root:not([data-theme="light"]) .kb-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:#CBCDD3;}
:root:not([data-theme="light"]) .kb-tabs button:hover{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-tabs button[aria-selected="true"]{color:#88BBEE;border-bottom-color:#0B64DD;}
:root:not([data-theme="light"]) .kb-bar h1{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-range{border:1px solid #4E4E4E;border-radius:6px;background:#1F1F1F;}
:root:not([data-theme="light"]) .kb-range button{background:#1F1F1F;border:0;border-right:1px solid #4E4E4E;color:#CBCDD3;}
:root:not([data-theme="light"]) .kb-range button:last-child{border-right:0;}
:root:not([data-theme="light"]) .kb-range button:hover{background:#242424;}
:root:not([data-theme="light"]) .kb-range button[aria-pressed="true"]{background:#1D2633;color:#88BBEE;}
:root:not([data-theme="light"]) .kb-btn{background:#0B64DD;color:#FFFFFF;border:0;border-radius:6px;}
:root:not([data-theme="light"]) .kb-btn:hover{background:#0B5CAD;}
:root:not([data-theme="light"]) .kb-upd{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb[data-state="loading"] .kb-progress::after{background:#0B64DD;}
:root:not([data-theme="light"]) .kb-panel{background:#1F1F1F;border:1px solid #494949;border-radius:6px;}
:root:not([data-theme="light"]) .kb-ph{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-metric b{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-metric span{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-aud span{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-aud small{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-chart .u-legend{color:#CBCDD3;}
:root:not([data-theme="light"]) .kb-chart .u-select{background:rgba(11,100,221,.16);box-shadow:inset 1px 0 0 #0B64DD,inset -1px 0 0 #0B64DD;}
:root:not([data-theme="light"]) .kb-hint{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-brow .tr{background:#252525;border-radius:3px;}
:root:not([data-theme="light"]) .kb-brow .tr i{background:#6092C0;}
:root:not([data-theme="light"]) .kb-brow em{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-table{border-collapse:collapse;}
:root:not([data-theme="light"]) .kb-table th{color:#B5B9C0;border-bottom:1px solid #494949;}
:root:not([data-theme="light"]) .kb-table td{border-bottom:1px solid #3E3E3E;color:#CBCDD3;}
:root:not([data-theme="light"]) .kb-sub{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-empty{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-callout{background:#262626;border-color:#D4574B;}
:root:not([data-theme="light"]) .kb-callout b{color:#EC9C93;}
:root:not([data-theme="light"]) .kb-callout p{color:#F0B8B1;}
:root:not([data-theme="light"]) .kb-vh{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-vital > b{color:#DEE0E3;}
:root:not([data-theme="light"]) .kb-rate{border-radius:4px;}
:root:not([data-theme="light"]) .kb-rate.good{background:#22352F;color:#B2F4E7;}
:root:not([data-theme="light"]) .kb-rate.ni{background:#383220;color:#F4E2B1;}
:root:not([data-theme="light"]) .kb-rate.poor{background:#33201D;color:#EC9C93;}
:root:not([data-theme="light"]) .kb-stack{border-radius:3px;background:#252525;}
:root:not([data-theme="light"]) .kb-stack .g,:root:not([data-theme="light"]) .kb-hist .g{background:#54B399;}
:root:not([data-theme="light"]) .kb-stack .n,:root:not([data-theme="light"]) .kb-hist .n{background:#D6BF57;}
:root:not([data-theme="light"]) .kb-stack .p,:root:not([data-theme="light"]) .kb-hist .p{background:#E7664C;}
:root:not([data-theme="light"]) .kb-legend{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-hist{border-bottom:1px solid #494949;}
:root:not([data-theme="light"]) .kb-hist i{border-radius:2px 2px 0 0;}
:root:not([data-theme="light"]) .kb-hist-x{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-src{color:#B5B9C0;}
:root:not([data-theme="light"]) .kb-src a{color:inherit;}
:root:not([data-theme="light"]) .kb-src a:hover{color:#88BBEE;}
:root:not([data-theme="light"]) .pw{background:#1F1F1F;color:#D6D9DC;}
:root:not([data-theme="light"]) .pw-card{border:1px solid #4C4C4C;border-radius:7px;}
:root:not([data-theme="light"]) .pw-card span{color:#B3B8BE;}
:root:not([data-theme="light"]) button.pw-card{color:inherit;background:transparent;}
:root:not([data-theme="light"]) button.pw-card:hover{border-color:#8C959F;}
:root:not([data-theme="light"]) button.pw-card[aria-pressed="true"]{border-color:#24292f;box-shadow:inset 0 0 0 1px #24292f;background:#222222;}
:root:not([data-theme="light"]) .pw-filters{border-bottom:1px solid #4C4C4C;}
:root:not([data-theme="light"]) .pw-filters button{background:none;border:0;border-bottom:2px solid transparent;color:#B3B8BE;}
:root:not([data-theme="light"]) .pw-filters button:hover{color:#D6D9DC;}
:root:not([data-theme="light"]) .pw-filters button[aria-pressed="true"]{color:#D6D9DC;border-bottom-color:#E8402A;}
:root:not([data-theme="light"]) .pw-spec{border-bottom:1px solid #414141;}
:root:not([data-theme="light"]) .pw-row{background:none;border:0;color:#D6D9DC;}
:root:not([data-theme="light"]) .pw-row:hover{background:#222222;}
:root:not([data-theme="light"]) .pw-ico{border-radius:50%;color:#fff;}
:root:not([data-theme="light"]) .pw-ico.p{background:#0F9B87;}
:root:not([data-theme="light"]) .pw-ico.f{background:#E8402A;}
:root:not([data-theme="light"]) .pw-ico.k{background:#C97A00;}
:root:not([data-theme="light"]) .pw-row .file{color:#B3B8BE;}
:root:not([data-theme="light"]) .pw-row .proj{background:#282828;border-radius:10px;color:#B3B8BE;}
:root:not([data-theme="light"]) .pw-row .dur{color:#B3B8BE;}
:root:not([data-theme="light"]) .pw-step{color:#D6D9DC;}
:root:not([data-theme="light"]) .pw-step .sdur{color:#B3B8BE;}
:root:not([data-theme="light"]) .pw-step .tick{color:#8FEFE1;}
:root:not([data-theme="light"]) .pw-attach span{border:1px solid #4C4C4C;border-radius:4px;color:#B3B8BE;}
:root:not([data-theme="light"]) .jira{background:#222222;color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-h .sp{color:#A8ADB5;}
:root:not([data-theme="light"]) .jira-h .days{background:#1F1F1F;border:1px solid #464646;border-radius:4px;color:#A8ADB5;}
:root:not([data-theme="light"]) .col{background:#252525;border-radius:5px;}
:root:not([data-theme="light"]) .col h2{color:#A8ADB5;}
:root:not([data-theme="light"]) .col h2 em{background:#2E2E2E;border-radius:9px;}
:root:not([data-theme="light"]) .jcard{background:#1F1F1F;border-radius:4px;box-shadow:0 1px 2px rgba(9,30,66,.2);}
:root:not([data-theme="light"]) .jcard:hover{background:#242424;}
:root:not([data-theme="light"]) .jcard p .jlogo{border-radius:3px;box-shadow:0 0 0 1px #464646;}
:root:not([data-theme="light"]) .jlabels span{border-radius:3px;}
:root:not([data-theme="light"]) .jkey{color:#A8ADB5;}
:root:not([data-theme="light"]) .jtype{border-radius:3px;color:#fff;}
:root:not([data-theme="light"]) .jpts{background:#2E2E2E;border-radius:9px;color:#B8BCC3;}
:root:not([data-theme="light"]) .javatar{border-radius:50%;color:#fff;}
:root:not([data-theme="light"]) .dock-app{background:#1F1F1F;color:#E0E1E5;}
:root:not([data-theme="light"]) .dk-h{border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) .dk-h .cnt{color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-search{background:#242424;border:1px solid #454545;border-radius:6px;color:#949AA4;}
:root:not([data-theme="light"]) .dk-tabs{border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) .dk-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-tabs button[aria-pressed="true"]{color:#74AEEB;border-bottom-color:#086DD7;}
:root:not([data-theme="light"]) table.dk{border-collapse:collapse;}
:root:not([data-theme="light"]) table.dk th{color:#A5AAB2;border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) table.dk td{border-bottom:1px solid #3F3F3F;}
:root:not([data-theme="light"]) table.dk tr:hover td{background:#222222;}
:root:not([data-theme="light"]) .dk-name .img{color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-note{color:#A5AAB2;}
:root:not([data-theme="light"]) table.dk td:nth-child(3){color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-state i{border-radius:50%;background:#0F9B87;}
:root:not([data-theme="light"]) .dk-state.warn i{background:#C97A00;}
:root:not([data-theme="light"]) .dk-bar{background:#272727;border-radius:3px;}
:root:not([data-theme="light"]) .dk-bar i{border-radius:3px;}
:root:not([data-theme="light"]) .dk-port{color:#74AEEB;}
:root:not([data-theme="light"]) .dk-act button{background:none;border:0;color:#A5AAB2;border-radius:5px;}
:root:not([data-theme="light"]) .dk-act button:hover{background:#272727;color:#E0E1E5;}
:root:not([data-theme="light"]) .dk-act button[aria-pressed="true"]{background:#1D2632;color:#7EADED;}
:root:not([data-theme="light"]) .dk-compose{border-bottom:1px solid #454545;color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-compose b{color:#E0E1E5;}
:root:not([data-theme="light"]) .dk-tag{color:#F5EAB9;background:#3D3823;border-radius:4px;}
:root:not([data-theme="light"]) .dk-logs{border:1px solid #454545;border-radius:8px;}
:root:not([data-theme="light"]) .dk-logs-h{background:#242424;border-bottom:1px solid #454545;color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-logs-h b{color:#E0E1E5;}
:root:not([data-theme="light"]) .dk-logs-x{background:none;border:0;border-radius:5px;color:#A5AAB2;}
:root:not([data-theme="light"]) .dk-logs-x:hover{background:#2B2B2B;color:#E0E1E5;}
:root:not([data-theme="light"]) .dk-log{background:#17191E;color:#DADCDF;}
:root:not([data-theme="light"]) .cuke-foot{border-top:1px solid #484848;color:#B1BBB7;}
:root:not([data-theme="light"]) .pw-lede{color:#B3B8BE;}
:root:not([data-theme="light"]) .pw-prog{background:#282828;border-radius:2px;}
:root:not([data-theme="light"]) .pw-none{color:#B3B8BE;}
:root:not([data-theme="light"]) .jira-top{background:#1F1F1F;border-bottom:1px solid #464646;}
:root:not([data-theme="light"]) .jira-logo{color:#6BA0EA;}
:root:not([data-theme="light"]) .jira-logo b{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-tbtn{border:0;border-radius:3px;background:transparent;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-tbtn:hover{background:#091E420F;color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-tbtn[aria-expanded="true"]{background:#252525;color:#6BA0EA;}
:root:not([data-theme="light"]) .jira-tcreate{border:0;border-radius:3px;background:#0C66E4;color:#FFFFFF;}
:root:not([data-theme="light"]) .jira-tcreate:hover{background:#0055CC;}
:root:not([data-theme="light"]) .jira-menu{background:#1F1F1F;border-radius:4px;box-shadow:0 8px 12px rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31);}
:root:not([data-theme="light"]) .jira-mhead{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-mitem{border:0;background:transparent;color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-mitem small{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-mitem:hover,:root:not([data-theme="light"]) .jira-mitem:focus-visible{background:#091E420F;}
:root:not([data-theme="light"]) .jira-mitem.on{background:#252525;color:#6BA0EA;}
:root:not([data-theme="light"]) .jira-fold{border-radius:50%;background:#1F1F1F;border:1px solid #464646;box-shadow:0 1px 2px rgba(9,30,66,.25);color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-fold:hover{background:#0C66E4;border-color:#0C66E4;color:#FFFFFF;}
:root:not([data-theme="light"]) .jira-sfoot{border-top:1px solid #464646;}
:root:not([data-theme="light"]) .jira-field{border-bottom:1px solid #464646;}
:root:not([data-theme="light"]) .jira-fv{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-side{background:#1F1F1F;border-right:1px solid #464646;}
:root:not([data-theme="light"]) .jira-sproj b{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-sproj small{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-sgrp{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-snav{border:0;border-radius:3px;background:transparent;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-snav:hover{background:#091E420F;color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-snav[aria-current="page"]{background:#252525;color:#6BA0EA;}
:root:not([data-theme="light"]) .jira-snav[aria-current="page"]::before{border-radius:0 2px 2px 0;background:#0C66E4;}
:root:not([data-theme="light"]) .jira-crumb{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-sec{background:#252525;border-radius:4px;}
:root:not([data-theme="light"]) .jira-dim{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-ptc{border-radius:9px;}
:root:not([data-theme="light"]) .jira-ptc.todo{background:#2E2E2E;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-ptc.prog{background:#212A39;color:#7EACED;}
:root:not([data-theme="light"]) .jira-ptc.done{background:#274337;color:#C3CCC8;}
:root:not([data-theme="light"]) .jira-rows{background:#1F1F1F;border:1px solid #464646;border-radius:3px;}
:root:not([data-theme="light"]) .jira-row{border-top:1px solid #464646;}
:root:not([data-theme="light"]) .jira-row:first-child{border-top:0;}
:root:not([data-theme="light"]) .jira-row:hover{background:#222222;}
:root:not([data-theme="light"]) .jira-row.mine{box-shadow:inset 0 0 0 2px #0C66E4;}
:root:not([data-theme="light"]) .jira-loz{border-radius:3px;}
:root:not([data-theme="light"]) .jira-loz.todo{background:#2E2E2E;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-loz.prog{background:#212A39;color:#7EACED;}
:root:not([data-theme="light"]) .jira-loz.rev{background:#231F35;color:#9E94D1;}
:root:not([data-theme="light"]) .jira-loz.done{background:#274337;color:#C3CCC8;}
:root:not([data-theme="light"]) .jira-empty{background:#1F1F1F;border:1px dashed #5A5A5A;border-radius:3px;}
:root:not([data-theme="light"]) .jira-empty p{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-add{border:0;border-radius:3px;background:transparent;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-add:hover{background:#091E420F;color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-tile{background:#1F1F1F;border:1px solid #464646;border-radius:4px;}
:root:not([data-theme="light"]) .jira-tile b{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-tile span{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-split{background:#1F1F1F;border:1px solid #464646;border-radius:4px;}
:root:not([data-theme="light"]) .jira-splitbar{border-radius:3px;background:#2E2E2E;}
:root:not([data-theme="light"]) .jira-legend{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-legend i{border-radius:2px;}
:root:not([data-theme="light"]) .jira-splitbar .todo,:root:not([data-theme="light"]) .jira-legend .todo{background:#8590A2;}
:root:not([data-theme="light"]) .jira-splitbar .prog,:root:not([data-theme="light"]) .jira-legend .prog{background:#1D7AFC;}
:root:not([data-theme="light"]) .jira-splitbar .rev,:root:not([data-theme="light"]) .jira-legend .rev{background:#8270DB;}
:root:not([data-theme="light"]) .jira-splitbar .done,:root:not([data-theme="light"]) .jira-legend .done{background:#22A06B;}
:root:not([data-theme="light"]) .jira-table{border-collapse:collapse;background:#1F1F1F;border:1px solid #464646;}
:root:not([data-theme="light"]) .jira-table th{color:#B7BBC2;border-bottom:2px solid #464646;}
:root:not([data-theme="light"]) .jira-table td{border-top:1px solid #464646;}
:root:not([data-theme="light"]) .jira-table .num{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-search{background:#1F1F1F;border:1px solid #8590A2;border-radius:3px;color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-search:focus-within{border-color:#0C66E4;box-shadow:inset 0 0 0 1px #0C66E4;}
:root:not([data-theme="light"]) .jira-search input{border:0;outline:none;background:transparent;color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-search input::placeholder{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-av{border-radius:50%;border:2px solid #3C3C3C;background:#07685A;color:#FFFFFF;}
:root:not([data-theme="light"]) .jira-av.you{background:#0C66E4;}
:root:not([data-theme="light"]) .jira-av[aria-pressed="true"]{box-shadow:0 0 0 2px #0C66E4;}
:root:not([data-theme="light"]) .jira-qf{border:0;border-radius:3px;background:#091E420F;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-qf:hover{background:#091E4224;}
:root:not([data-theme="light"]) .jira-qf[aria-pressed="true"]{background:#252525;color:#6BA0EA;box-shadow:inset 0 0 0 1px #0C66E4;}
:root:not([data-theme="light"]) .jira-clear{border:0;background:transparent;color:#6BA0EA;}
:root:not([data-theme="light"]) .jira-shown{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-none{color:#A6ABB3;}
:root:not([data-theme="light"]) .jcard.mine{box-shadow:0 0 0 2px #0C66E4,0 1px 2px rgba(9,30,66,.2);}
:root:not([data-theme="light"]) .javatar.you{background:#0C66E4;}
:root:not([data-theme="light"]) .jira-create{background:#1F1F1F;color:#D1D3D8;border-radius:8px;box-shadow:0 8px 12px rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31);}
:root:not([data-theme="light"]) .jira-ch h2{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-cx{border:0;border-radius:4px;background:transparent;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-cx:hover{background:#091E420F;}
:root:not([data-theme="light"]) .jira-req{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-star{color:#E58981;}
:root:not([data-theme="light"]) .jira-cl{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-ci{color:#D1D3D8;background:#1F1F1F;border:1px solid #8590A2;border-radius:3px;}
:root:not([data-theme="light"]) .jira-ci::placeholder{color:#A6ABB3;}
:root:not([data-theme="light"]) .jira-ci:hover{background:#222222;}
:root:not([data-theme="light"]) .jira-ci:focus{outline:none;border-color:#0C66E4;box-shadow:inset 0 0 0 1px #0C66E4;background:#1F1F1F;}
:root:not([data-theme="light"]) .jira-cf.bad .jira-ci{border-color:#C9372C;box-shadow:inset 0 0 0 1px #C9372C;}
:root:not([data-theme="light"]) .jira-ce{color:#E58981;}
:root:not([data-theme="light"]) .jira-ch2{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-icrumb{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-it{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-iside{border:1px solid #464646;border-radius:3px;}
:root:not([data-theme="light"]) .jira-iside dt{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-proj{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-pico{border-radius:4px;background:#C8452A;color:#FFFFFF;}
:root:not([data-theme="light"]) .jira-hr{border:0;border-top:1px solid #464646;}
:root:not([data-theme="light"]) .jira-sub{color:#D1D3D8;}
:root:not([data-theme="light"]) .jira-cfoot{background:#1F1F1F;border-top:1px solid #464646;}
:root:not([data-theme="light"]) .jira-alt{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-alt a{color:#6BA0EA;}
:root:not([data-theme="light"]) .jira-status{color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-status.bad{color:#E58981;}
:root:not([data-theme="light"]) .jira-cbtn{border-radius:3px;border:0;}
:root:not([data-theme="light"]) .jira-cbtn.sub{background:transparent;color:#B7BBC2;}
:root:not([data-theme="light"]) .jira-cbtn.sub:hover{background:#091E420F;}
:root:not([data-theme="light"]) .jira-cbtn.prim{background:#0C66E4;color:#FFFFFF;}
:root:not([data-theme="light"]) .jira-cbtn.prim:hover{background:#0055CC;}
:root:not([data-theme="light"]) .cuke a,:root:not([data-theme="light"]) .swg a,:root:not([data-theme="light"]) .pw a,:root:not([data-theme="light"]) .jira a,:root:not([data-theme="light"]) .dock-app a{color:#6C96E9;}
:root:not([data-theme="light"]) .cuke a:visited,:root:not([data-theme="light"]) .swg a:visited,:root:not([data-theme="light"]) .pw a:visited,:root:not([data-theme="light"]) .jira a:visited,:root:not([data-theme="light"]) .dock-app a:visited{color:#6C96E9;}
:root:not([data-theme="light"]) input.dk-search{color:#E0E1E5;}
:root:not([data-theme="light"]) input.dk-search::placeholder{color:#949AA4;}
:root:not([data-theme="light"]) input.dk-search:focus{outline:none;border-color:#086DD7;box-shadow:0 0 0 2px rgba(8,109,215,.18);}
:root:not([data-theme="light"]) .dk-empty{color:#A5AAB2;}
:root:not([data-theme="light"]) .dd-say{color:#A5AAB2;}
:root:not([data-theme="light"]) .dd-top{background:#1F1F1F;border-bottom:1px solid #464646;}
:root:not([data-theme="light"]) .dd-brand{color:#719AEB;}
:root:not([data-theme="light"]) .dd-brand b{color:#E0E1E5;}
:root:not([data-theme="light"]) .dd-brand span{color:#E0E1E5;}
:root:not([data-theme="light"]) .dd-search{background:#242424;border:1px solid #464646;border-radius:6px;color:#A5AAB2;}
:root:not([data-theme="light"]) .dd-search:focus-within{border-color:#1D63ED;box-shadow:0 0 0 2px rgba(29,99,237,.18);}
:root:not([data-theme="light"]) .dd-search input.dk-search{border:0;background:transparent;color:#E0E1E5;box-shadow:none;}
:root:not([data-theme="light"]) .dd-search input.dk-search:focus{border:0;box-shadow:none;}
:root:not([data-theme="light"]) .dd-side{background:#212121;border-right:1px solid #464646;}
:root:not([data-theme="light"]) .dd-nav{border:0;border-radius:6px;background:transparent;color:#B6BAC0;}
:root:not([data-theme="light"]) .dd-nav:hover{background:#272727;color:#E0E1E5;}
:root:not([data-theme="light"]) .dd-nav[aria-current="page"]{background:#272727;color:#7AB1EC;}
:root:not([data-theme="light"]) .dd .dk-h{border-bottom:0;}
:root:not([data-theme="light"]) .dd-tools{border-bottom:1px solid #464646;}
:root:not([data-theme="light"]) .dd-toggle{color:#E0E1E5;}
:root:not([data-theme="light"]) .dd-sw{border-radius:8px;background:#B4B9C3;}
:root:not([data-theme="light"]) .dd-sw::after{border-radius:50%;background:#1F1F1F;}
:root:not([data-theme="light"]) .dd-toggle input:checked + .dd-sw{background:#1D63ED;}
:root:not([data-theme="light"]) .dd-toggle input:focus-visible + .dd-sw{outline:2px solid #1D63ED;outline-offset:2px;}
:root:not([data-theme="light"]) table.dk tr.dd-group td{background:#212121;}
:root:not([data-theme="light"]) table.dk tr.dd-group:hover td{background:#242424;}
:root:not([data-theme="light"]) .dd-fold{border:0;border-radius:4px;background:transparent;color:#B6BAC0;}
:root:not([data-theme="light"]) .dd-fold:hover{background:#272727;}
:root:not([data-theme="light"]) .dd-gname{color:#719AEB;}
:root:not([data-theme="light"]) .dd-gname b{color:#E0E1E5;}
:root:not([data-theme="light"]) tr.dd-group .img{color:#A5AAB2;}
:root:not([data-theme="light"]) .dd-cube{border-radius:6px;}
:root:not([data-theme="light"]) .dd-cube.on{background:#20322E;color:#A3F2E6;}
:root:not([data-theme="light"]) .dd-cube.mid{background:#322B1D;color:#F0CD98;}
:root:not([data-theme="light"]) .dd-cube.off{background:#262626;color:#A5AAB2;}
:root:not([data-theme="light"]) .dd-img{color:#74AEEB;}
:root:not([data-theme="light"]) .dk-port.plain{color:#E0E1E5;}
:root:not([data-theme="light"]) .dd-dim{color:#A5AAB2;}
:root:not([data-theme="light"]) .dd-status{background:#242424;border-top:1px solid #464646;color:#B6BAC0;}
:root:not([data-theme="light"]) .dd-engine{color:#E0E1E5;}
:root:not([data-theme="light"]) .dd-engine i{border-radius:50%;background:#0F9B87;}
:root:not([data-theme="light"]) .sq{background:#242424;color:#DDDFE2;}
:root:not([data-theme="light"]) .sq-top{background:#1F1F1F;border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) .sq-branch{color:#BABDC4;background:#262626;border-radius:5px;}
:root:not([data-theme="light"]) .sq-g{background:#1F1F1F;border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) .sq-logo{color:#70ABEB;}
:root:not([data-theme="light"]) .sq-logo b{color:#DDDFE2;}
:root:not([data-theme="light"]) .sq-gnav button{border:0;border-bottom:3px solid transparent;background:none;color:#C1C3CA;}
:root:not([data-theme="light"]) .sq-gnav button:hover{color:#70ABEB;}
:root:not([data-theme="light"]) .sq-gnav button[aria-current="page"]{color:#70ABEB;border-bottom-color:#126ED3;}
:root:not([data-theme="light"]) .sq-pico{border-radius:4px;background:#C8452A;color:#FFFFFF;}
:root:not([data-theme="light"]) .sq-sep{color:#9DA2AB;}
:root:not([data-theme="light"]) .sq-ph h2{color:#DDDFE2;}
:root:not([data-theme="light"]) .sq-files.sq-plain{border:0;}
:root:not([data-theme="light"]) .sq-donut .track{stroke:#E3E5E8;}
:root:not([data-theme="light"]) .sq-donut .ok{stroke:#AAF3D0;}
:root:not([data-theme="light"]) .sq-donut .bad{stroke:#EC8A7C;}
:root:not([data-theme="light"]) .sq-when{color:#B0B4BC;}
:root:not([data-theme="light"]) .sq-btn{background:#1F1F1F;color:#DDDFE2;border:1px solid #4F4F4F;border-radius:6px;}
:root:not([data-theme="light"]) .sq-btn:hover{border-color:#126ED3;}
:root:not([data-theme="light"]) .sq-btn.prim{background:#0F5BB5;border-color:#0F5BB5;color:#fff;}
:root:not([data-theme="light"]) .sq-tabs{background:#1F1F1F;border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) .sq-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:#BABDC4;}
:root:not([data-theme="light"]) .sq-tabs button[aria-pressed="true"]{color:#82B3ED;border-bottom-color:#126ED3;}
:root:not([data-theme="light"]) .sq-card{background:#1F1F1F;border:1px solid #454545;border-radius:8px;}
:root:not([data-theme="light"]) .sq-dim{color:#B8BBC2;}
:root:not([data-theme="light"]) .sq-status{color:#fff;border-radius:5px;}
:root:not([data-theme="light"]) .sq-status.passed{background:#0A6E3F;}
:root:not([data-theme="light"]) .sq-status.failed{background:#B52D1A;}
:root:not([data-theme="light"]) .sq-status.waiting{background:#7A4A00;}
:root:not([data-theme="light"]) .sq-conds{border-collapse:collapse;}
:root:not([data-theme="light"]) .sq-conds td{border-top:1px solid #3F3F3F;}
:root:not([data-theme="light"]) .sq-conds tr.ok .sq-cmark{color:#AAF3D0;}
:root:not([data-theme="light"]) .sq-conds tr.bad .sq-cmark{color:#EC8A7C;}
:root:not([data-theme="light"]) .sq-conds tr.wait .sq-cmark{color:#F3D6A9;}
:root:not([data-theme="light"]) .sq-conds tr.bad .sq-cval{color:#EC8A7C;}
:root:not([data-theme="light"]) .sq-m h3{color:#BABDC4;}
:root:not([data-theme="light"]) .sq-rate{border-radius:50%;color:#fff;}
:root:not([data-theme="light"]) .sq-rate.rA{background:#0A6E3F;}
:root:not([data-theme="light"]) .sq-rate.rB{background:#4F6A00;}
:root:not([data-theme="light"]) .sq-rate.rC{background:#7A4A00;}
:root:not([data-theme="light"]) .sq-rate.rD{background:#9A3B12;}
:root:not([data-theme="light"]) .sq-rate.rE{background:#B52D1A;}
:root:not([data-theme="light"]) .sq-link{background:none;border:0;color:#82B3ED;}
:root:not([data-theme="light"]) .sq-props{background:#222222;border:1px solid #454545;border-radius:6px;color:#DDDFE2;}
:root:not([data-theme="light"]) .sq-filter button{background:#1F1F1F;border:1px solid #4F4F4F;border-radius:6px;color:#BABDC4;}
:root:not([data-theme="light"]) .sq-filter button[aria-pressed="true"]{border-color:#126ED3;color:#82B3ED;}
:root:not([data-theme="light"]) .sq-issues{background:#1F1F1F;border:1px solid #454545;border-radius:8px;}
:root:not([data-theme="light"]) .sq-issue + .sq-issue{border-top:1px solid #3F3F3F;}
:root:not([data-theme="light"]) .sq-issue-h{background:none;border:0;color:inherit;}
:root:not([data-theme="light"]) .sq-issue-h:hover{background:#222222;}
:root:not([data-theme="light"]) .sq-meta{color:#B8BBC2;}
:root:not([data-theme="light"]) .sq-type.bug{color:#EC8A7C;}
:root:not([data-theme="light"]) .sq-type.smell{color:#F3D6A9;}
:root:not([data-theme="light"]) .sq-code{border:1px solid #454545;border-radius:6px;}
:root:not([data-theme="light"]) .sq-ln .n{color:#B0B4BC;}
:root:not([data-theme="light"]) .sq-ln.hit{background:#252525;}
:root:not([data-theme="light"]) .sq-files{border-collapse:collapse;background:#1F1F1F;border:1px solid #454545;border-radius:8px;}
:root:not([data-theme="light"]) .sq-files th{color:#BABDC4;border-bottom:1px solid #454545;}
:root:not([data-theme="light"]) .sq-files td{border-bottom:1px solid #3F3F3F;}
:root:not([data-theme="light"]) .sq-err{color:#EC8A7C;}
@media (max-width:760px){
  :root:not([data-theme="light"]) .jira-sfoot{border:0;}
  :root:not([data-theme="light"]) .jira-side{border-right:0;border-bottom:1px solid #464646;}
  :root:not([data-theme="light"]) .jira-snav[aria-current="page"]::before{border-radius:2px 2px 0 0;}
  :root:not([data-theme="light"]) table.dk tr{border-bottom:1px solid #3F3F3F;}
  :root:not([data-theme="light"]) table.dk td{border:0;}
  :root:not([data-theme="light"]) table.dk td:nth-child(3){color:#A5AAB2;}
  :root:not([data-theme="light"]) table.dk .dk-act button{border:1px solid #454545;border-radius:6px;}
  :root:not([data-theme="light"]) table.dk-c tr.dd-group td{background:none;}
}
@media (max-width:720px){
  :root:not([data-theme="light"]) .cuke-stats{border-top:1px solid #484848;}
}
@media (max-width:980px){
  :root:not([data-theme="light"]) .dd-side{border-right:0;border-bottom:1px solid #464646;}
}
:root:not([data-theme="light"]) .jlabels span{background:color-mix(in srgb, var(--lf) 30%, #262626);color:color-mix(in srgb, var(--lf) 35%, #FFFFFF);}
/* Hand-written, not derived: the skins colour their passed / pending / failed
   figures with the --ink-* tokens, which are inks for a light page. In the
   dark they take the lighter set; the two places that use teal as a fill
   under white text keep the dark teal. */
:root:not([data-theme="light"]) :is(.cuke,.swg,.pw,.jira,.dock-app,.sq){
  --ink-teal:#3FC7AE; --ink-red:#FF8A75; --ink-amber:#E3B341; --ink-blue:#8DB0FF;}
:root:not([data-theme="light"]) .cuke-btn:not(.gh),:root:not([data-theme="light"]) .javatar{background:#07685A;border-color:#07685A;}
/* a pressed filter card outlined in light, and a failed step that stays red */
:root:not([data-theme="light"]) button.pw-card[aria-pressed="true"]{border-color:#D6D9DC;box-shadow:inset 0 0 0 1px #D6D9DC;}
:root:not([data-theme="light"]) .cstep.f{background:#3A2320;}
/* the Elastic charts draw on a canvas, so their axis and grid colours are variables */
:root:not([data-theme="light"]) .kb{--kb-axis:#B5B9C0;--kb-grid:#3A3A3A;}
:root:not([data-theme="light"]) .sq-donut .track{stroke:#3A3A3A;}
:root:not([data-theme="light"]) .sq-donut .ok{stroke:#3FC7AE;}
:root:not([data-theme="light"]) .kb-chart .u-select{background:rgba(110,155,255,.2);box-shadow:inset 1px 0 0 #6E9BFF,inset -1px 0 0 #6E9BFF;}
/* Atlassian's hover tint is translucent navy, which vanishes on a dark surface */
:root:not([data-theme="light"]) .jira-cx:hover,:root:not([data-theme="light"]) .jira-cbtn.sub:hover{background:rgba(255,255,255,.09);}
:root:not([data-theme="light"]) .jira-qf{background:rgba(255,255,255,.08);}
:root:not([data-theme="light"]) .jira-qf:hover{background:rgba(255,255,255,.14);}
:root:not([data-theme="light"]) .jira-qf[aria-pressed="true"]{background:#1C2B41;}
:root:not([data-theme="light"]) .jira-snav:hover,:root:not([data-theme="light"]) .jira-add:hover{background:rgba(255,255,255,.08);}
:root:not([data-theme="light"]) .jira-snav[aria-current="page"]{background:#1C2B41;}
:root:not([data-theme="light"]) .jira-row:hover{background:#262626;}
:root:not([data-theme="light"]) .jira-tbtn:hover,:root:not([data-theme="light"]) .jira-mitem:hover,:root:not([data-theme="light"]) .jira-mitem:focus-visible{background:rgba(255,255,255,.08);}
:root:not([data-theme="light"]) .jira-tbtn[aria-expanded="true"],:root:not([data-theme="light"]) .jira-mitem.on{background:#1C2B41;}
:root:not([data-theme="light"]) .jira-logo{color:#579DFF;}

/* ═════════════ one page grid for every window ═════════════
   Each page used to set its own inset and title size (12 to 24px in, titles
   from 15 to 28px), so switching tabs made the page jump. Every page now
   starts its content at the same place and titles at the same size. The
   README keeps its own split layout. */
:root{--page-x:20px;--page-y:18px;--page-title:1.25rem;}
@media (max-width:760px){ :root{--page-x:14px;--page-y:14px;--page-title:1.125rem;} }

.ci{padding:var(--page-y) var(--page-x) 40px;}
.swg{padding:var(--page-y) var(--page-x);}
.jira-main{padding-top:var(--page-y);padding-left:var(--page-x);padding-right:var(--page-x);}
.tools{padding-top:var(--page-y);padding-left:var(--page-x);padding-right:var(--page-x);}
.pw-h{padding:var(--page-y) var(--page-x) 0;}
.pw-filters{padding:0 var(--page-x);}
.pw-list{padding:6px var(--page-x) 30px;}
.cuke-top{padding:14px var(--page-x);}
.cuke-sum > .cuke-top:first-child{padding-top:var(--page-y);}
.cuke-body{padding:18px var(--page-x);}
.dk-h{padding:var(--page-y) var(--page-x) 14px;}
.dk-tabs{padding:0 var(--page-x);}
table.dk th:first-child,table.dk td:first-child{padding-left:var(--page-x);}
table.dk th:last-child,table.dk td:last-child{padding-right:var(--page-x);}
.sq-top{padding:var(--page-y) var(--page-x) 12px;}
.sq-tabs{padding:0 var(--page-x);}
.sq-body{padding:18px var(--page-x) 30px;}
@media (max-width:760px){
  .mdprev{padding-left:var(--page-x);padding-right:var(--page-x);padding-top:var(--page-y);}
  table.dk tr{padding:12px var(--page-x);}
  table.dk td:first-child,table.dk td:last-child{padding-left:0;padding-right:0;}
}

.ci-h h1,.cuke-top h1,.swg h1,.pw-h h1,.jira-h h1,.tl-h h2,.dk-h h1,.sq-crumb h1{
  font-size:var(--page-title);font-weight:700;letter-spacing:-.01em;line-height:1.25;}
/* the title is the first line of every page, so a taller button or badge
   beside it hangs down from the same top edge instead of pushing it lower */
.pw-titlerow{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.pw-h h1{margin:0 0 12px;}
.tl-h,.jira-h,.sq-top{align-items:flex-start;}
/* phones and tablets: the address bar is exactly as tall as the IDE tab row,
   so content starts at the same height in every window */
@media (max-width:980px){ .appwin-url{height:45px;box-sizing:border-box;} }
/* Until the page has painted once, the project panel and its backdrop take
   their state without animating: on a phone the panel is shut at load, and
   watching it slide away on every refresh was motion for nothing. */
:root:not(.ready) .sidebar,:root:not(.ready) .sidebar.collapsed,
:root:not(.ready) .side-backdrop,:root:not(.ready) .side-backdrop.on{transition:none;}
/* see the booting class in index.html */
:root.booting .desktop,:root.booting .sidebar{visibility:hidden;}

/* ═════════════ one app bar for every tool window ═════════════
   Jira, Docker Desktop, SonarQube, Kibana and Scratch each draw their own bar,
   but at one height, one inset and one logo size, so switching between them
   moves nothing. The scroll gutter is kept too: a short page without a
   scrollbar was 15px wider than a long one, and everything shifted with it. */
.jira-top,.dd-top,.sq-g,.kb-head,.tl-app{height:56px;min-height:56px;padding:0 var(--page-x);box-sizing:border-box;flex-wrap:nowrap;}
.jira-logo,.dd-brand,.sq-logo,.kb-logo,.tl-logo{display:inline-flex;align-items:center;gap:8px;padding:0;margin:0;flex:none;}
.jira-logo svg,.dd-brand svg,.sq-logo svg,.kb-logo svg,.tl-logo svg{width:20px;height:20px;flex:none;}
.jira-logo b,.dd-brand b,.dd-brand span,.sq-logo b,.kb-logo span,.tl-logo b{font-size:1rem;line-height:1;}
.jira-logo b,.dd-brand b,.sq-logo b,.kb-logo span,.tl-logo b{font-weight:700;}
.appwin-body{scrollbar-gutter:stable;}
/* Tools’ bar: the site’s own colours, the wrench in its window colour, and the promise beside it */
.tl-app{display:flex;align-items:center;gap:16px;margin:0 calc(-1 * var(--page-x)) var(--page-y);background:#FFFFFF;border-bottom:1px solid #E1E4EA;}
/* the same surface as the other tool windows’ bars in the dark theme */
:root:not([data-theme="light"]) .tl-app{background:#1F1F1F;border-bottom-color:#464646;}
.tl-app .tl-safe{margin:0;min-width:0;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;}
.tl-safe-more{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.tl-logo{color:#C97A00;}
.tl-logo b{color:var(--text);}
.tools{padding-top:0;}
@media (max-width:760px){
  .jira-top{flex-wrap:nowrap;padding:0 var(--page-x);}
  .jira-tsearch{display:none;}
  .sq-logo b{display:inline;}
  .tl-safe-more{display:none;}
}

/* Phones: the navigation rows of Services, Jira and SonarQube fit the screen instead of scrolling
   sideways, which let the whole page be swiped with nothing there to see */
@media (max-width:760px){
  .dd-side{overflow-x:visible;justify-content:space-between;gap:2px;}
  .dd-nav{flex:1 1 auto;justify-content:center;padding:8px 6px;font-size:.8438rem;}
  .dd-nav svg{display:none;}
  .jira-side{overflow-x:visible;gap:2px;}
  .jira-sproj{display:none;}
  .jira-snav{padding:8px 7px;font-size:.8438rem;}
  .jira-sfoot{margin-left:auto;}
  .sq-gnav{overflow-x:visible;gap:0;}
  .sq-gnav button{padding:0 6px;font-size:.8438rem;}
}

/* Phones: wide tables become a stack of rows, one block per row, each value labelled with its
   column (labelCells() in ide.js copies the headings onto the cells). Nothing scrolls sideways. */
@media (max-width:600px){
  .sq-files,.jira-table,.kb-services .kb-table{display:block;width:100%;border-collapse:separate;}
  .sq-files thead,.jira-table thead,.kb-services .kb-table thead{display:none;}
  .sq-files tbody,.jira-table tbody,.kb-services .kb-table tbody{display:block;}
  .sq-files tr,.jira-table tr,.kb-services .kb-table tr{display:block;padding:10px 12px;border-bottom:1px solid rgba(128,128,128,.22);}
  .sq-files tr:last-child,.jira-table tr:last-child,.kb-services .kb-table tr:last-child{border-bottom:0;}
  .sq-files td,.jira-table td,.kb-services .kb-table td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:2px 0;border:0;text-align:right;min-width:0;}
  .sq-files td::before,.jira-table td::before,.kb-services .kb-table td::before{content:attr(data-label);text-align:left;
    opacity:.68;font-weight:400;font-family:var(--sans);font-size:.75rem;flex:none;}
  /* the first cell names the row: full width, on its own line, no label */
  .sq-files td:first-child,.jira-table td:first-child,.kb-services .kb-table td:first-child{display:block;text-align:left;
    font-weight:600;padding-bottom:4px;overflow-wrap:anywhere;}
  .sq-files td:first-child::before,.jira-table td:first-child::before,.kb-services .kb-table td:first-child::before{content:none;}
  .jira-tscroll,.kb-services{overflow-x:visible;}
  /* container logs wrap instead of running off the side */
  .dk-log{white-space:pre-wrap;overflow-wrap:anywhere;}
}
/* the smallest phones: the terminal’s tab row fits without scrolling */
@media (max-width:360px){ .dock-tab{padding:5px 8px;gap:5px;} .dock-x{padding:0 10px 0 7px;} }
@media (max-width:600px){
  /* an issue’s code lines wrap rather than run off the side */
  .sq-code .c{white-space:pre-wrap;overflow-wrap:anywhere;}
}
@media (max-width:380px){
  /* SonarQube’s own menu needs the room on a narrow phone; its logo stays where every logo is */
  .sq-logo b{display:none;}
  .jira-snav{padding:8px 5px;font-size:.8125rem;}
}
@media (max-width:600px){
  /* the table’s own cell dividers stay off inside a stacked row; :not(#_) outranks the dark skin’s rules */
  :root:not(#_) .sq-files td,:root:not(#_) .jira-table td,:root:not(#_) .kb-services .kb-table td{border:0;}
  .sq-files td::before,.jira-table td::before,.kb-services .kb-table td::before{color:var(--dim);opacity:1;}
}