/* ---------------------------------------------------------------------------------------------- button sets
 *
 * Twenty ways the app's buttons can look, switchable while the app is running.
 *
 * `public/jobboerse/index.html` defines one button — the shape, the height, the type, the focus ring, the
 * disabled state, the icon rules. None of that is repeated here and none of it is up for selection: a button is
 * 40 px tall and says what it does whichever set is on. What a set changes is the treatment — the surface, the
 * edge, and what the three states look like.
 *
 * Every rule is under `html[data-jb-btn="<id>"]`, so switching is one attribute on the root element and the whole
 * app changes at once. No set is loaded conditionally, nothing is rebuilt, and nothing about the words changes:
 * labels come from the dictionary and are the same in English, German and Thai whichever set is chosen.
 *
 * `base` is the set the app shipped with and needs no rules here — it is what index.html already does.
 *
 * Rules and how to choose: .claude/skills/jb-buttons
 */

/* ------------------------------------------------------------------ shared, for every set except base
 * The base set's own treatment has to come off before another can go on, or the two fight. */
html[data-jb-btn]:not([data-jb-btn="base"]) .btn{box-shadow:none}
html[data-jb-btn]:not([data-jb-btn="base"]) .btn:hover,
html[data-jb-btn]:not([data-jb-btn="base"]) .btn:active{transform:none;box-shadow:none}
html[data-jb-btn]:not([data-jb-btn="base"]) .btn:disabled,
html[data-jb-btn]:not([data-jb-btn="base"]) .btn:disabled:hover{box-shadow:none;transform:none}

/* 01 flat — colour is the only thing that changes */
html[data-jb-btn="flat"] .btn-coral:hover{background:#d6482f}
html[data-jb-btn="flat"] .btn-coral:active{background:#bd3f28}
html[data-jb-btn="flat"] .btn-primary:hover{background:#2a2825}
html[data-jb-btn="flat"] .btn-primary:active{background:#3a3733}
html[data-jb-btn="flat"] .btn-ghost:hover{background:var(--bg-sink);border-color:var(--line-2)}
html[data-jb-btn="flat"] .btn-ghost:active{background:var(--line)}

/* 02 underline — no box; the label sits on a rule that turns coral */
html[data-jb-btn="underline"] .btn{background:transparent;color:var(--ink);border:0;border-radius:0;
  padding:0 2px;height:34px;box-shadow:inset 0 -2px 0 0 var(--line-2)}
html[data-jb-btn="underline"] .btn-coral,html[data-jb-btn="underline"] .btn-primary{color:var(--ink)}
html[data-jb-btn="underline"] .btn:hover{background:transparent;box-shadow:inset 0 -2px 0 0 var(--coral)}
html[data-jb-btn="underline"] .btn:active{box-shadow:inset 0 -4px 0 0 var(--coral-ink)}
html[data-jb-btn="underline"] .btn-block{justify-content:flex-start}

/* 03 inset press — nothing rises; pressing sinks it */
html[data-jb-btn="inset"] .btn:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
html[data-jb-btn="inset"] .btn:active{box-shadow:inset 0 3px 7px rgba(0,0,0,.34)}
html[data-jb-btn="inset"] .btn-coral:active{background:#bd3f28}
html[data-jb-btn="inset"] .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--coral-soft-2)}
html[data-jb-btn="inset"] .btn-ghost:active{background:var(--bg-sink);box-shadow:inset 0 3px 7px rgba(20,18,16,.12)}

/* 04 brackets — two coral brackets close around the label */
html[data-jb-btn="brackets"] .btn{background:transparent;color:var(--ink);border:0;border-radius:2px}
html[data-jb-btn="brackets"] .btn:before,html[data-jb-btn="brackets"] .btn:after{
  content:"";position:absolute;top:2px;bottom:2px;width:9px;border:2px solid transparent;
  transition:border-color .14s ease}
html[data-jb-btn="brackets"] .btn:before{left:0;border-right:0;border-radius:3px 0 0 3px}
html[data-jb-btn="brackets"] .btn:after{right:0;border-left:0;border-radius:0 3px 3px 0}
html[data-jb-btn="brackets"] .btn:hover:before,html[data-jb-btn="brackets"] .btn:hover:after{border-color:var(--coral)}
html[data-jb-btn="brackets"] .btn:active:before,html[data-jb-btn="brackets"] .btn:active:after{border-color:var(--ink)}
html[data-jb-btn="brackets"] .btn-coral,html[data-jb-btn="brackets"] .btn-primary{font-weight:750}

/* 05 slab — a hard offset shadow the button presses onto */
html[data-jb-btn="slab"] .btn{border:1.5px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 0 var(--ink)}
html[data-jb-btn="slab"] .btn:hover{box-shadow:4px 4px 0 0 var(--ink);transform:translate(-1px,-1px)}
html[data-jb-btn="slab"] .btn:active{box-shadow:0 0 0 0 var(--ink);transform:translate(3px,3px)}
html[data-jb-btn="slab"] .btn:disabled{box-shadow:2px 2px 0 0 var(--line-2);border-color:var(--line-2)}

/* 06 pill — round, solid, presses by shrinking */
html[data-jb-btn="pill"] .btn{border-radius:999px;padding:0 20px}
html[data-jb-btn="pill"] .btn-sm{padding:0 15px}
html[data-jb-btn="pill"] .btn-lg{padding:0 26px}
html[data-jb-btn="pill"] .btn-icon{padding:0}
html[data-jb-btn="pill"] .btn-coral:hover{background:#d6482f}
html[data-jb-btn="pill"] .btn-primary:hover{background:#2a2825}
html[data-jb-btn="pill"] .btn-ghost:hover{background:var(--bg-sink)}
html[data-jb-btn="pill"] .btn:active{transform:scale(.97)}

/* 07 fill up — an outline that floods from the bottom edge */
html[data-jb-btn="fillup"] .btn{background:transparent;overflow:hidden;border-width:1.5px}
html[data-jb-btn="fillup"] .btn-coral{color:var(--coral);border-color:var(--coral)}
html[data-jb-btn="fillup"] .btn-primary{color:var(--ink);border-color:var(--ink)}
html[data-jb-btn="fillup"] .btn-ghost{color:var(--ink);border-color:var(--line-2)}
html[data-jb-btn="fillup"] .btn:before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;
  transition:height .18s cubic-bezier(.2,.8,.2,1);z-index:0}
html[data-jb-btn="fillup"] .btn-coral:before{background:var(--coral)}
html[data-jb-btn="fillup"] .btn-primary:before{background:var(--ink)}
html[data-jb-btn="fillup"] .btn-ghost:before{background:var(--bg-sink)}
html[data-jb-btn="fillup"] .btn > *{position:relative;z-index:1}
html[data-jb-btn="fillup"] .btn:hover:before{height:100%}
html[data-jb-btn="fillup"] .btn-coral:hover,html[data-jb-btn="fillup"] .btn-primary:hover{color:#fff}
html[data-jb-btn="fillup"] .btn-coral:active{background:var(--coral-ink);border-color:var(--coral-ink);color:#fff}
html[data-jb-btn="fillup"] .btn-primary:active{background:var(--ink);color:#fff}

/* 08 split — the icon gets its own cell */
html[data-jb-btn="split"] .btn{padding-left:0;overflow:hidden;gap:0}
html[data-jb-btn="split"] .btn > svg:first-child{box-sizing:content-box;width:16px;height:16px;
  padding:0 12px;align-self:stretch;margin-right:13px;background:rgba(0,0,0,.16)}
html[data-jb-btn="split"] .btn-ghost > svg:first-child{background:var(--coral);color:#fff}
html[data-jb-btn="split"] .btn:hover > svg:first-child{background:rgba(0,0,0,.26)}
html[data-jb-btn="split"] .btn-ghost:hover > svg:first-child{background:var(--coral-ink)}
html[data-jb-btn="split"] .btn-icon > svg:first-child{padding:0;margin:0;background:none}
html[data-jb-btn="split"] .btn-coral:active{background:#bd3f28}

/* 09 notch — one corner cut, deepening on press */
html[data-jb-btn="notch"] .btn{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
html[data-jb-btn="notch"] .btn-coral:hover{background:#d6482f}
html[data-jb-btn="notch"] .btn-primary:hover{background:#2a2825}
html[data-jb-btn="notch"] .btn-ghost:hover{background:var(--bg-sink)}
html[data-jb-btn="notch"] .btn:active{clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%)}
html[data-jb-btn="notch"] .btn-icon{clip-path:none}

/* 10 double keyline — a second hairline inside the first */
html[data-jb-btn="keyline"] .btn{background:var(--panel);color:var(--ink);border:1px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--coral-soft-2)}
html[data-jb-btn="keyline"] .btn-coral{border-color:var(--coral-ink);color:var(--coral-ink)}
html[data-jb-btn="keyline"] .btn:hover{background:var(--panel);box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--coral)}
html[data-jb-btn="keyline"] .btn:active{background:var(--coral-soft);
  box-shadow:inset 0 0 0 3px var(--coral-soft),inset 0 0 0 4px var(--coral-ink)}

/* 11 rule — the words on a rule, nothing else */
html[data-jb-btn="rule"] .btn{background:transparent;color:var(--ink);border:0;border-radius:0;
  height:30px;padding:0;font-weight:700}
html[data-jb-btn="rule"] .btn:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--line-2);transition:background .14s ease,height .12s ease}
html[data-jb-btn="rule"] .btn:hover{background:transparent}
html[data-jb-btn="rule"] .btn:hover:after{background:var(--coral);height:3px}
html[data-jb-btn="rule"] .btn:active{color:var(--coral-ink)}
html[data-jb-btn="rule"] .btn:active:after{background:var(--coral-ink);height:3px}
html[data-jb-btn="rule"] .btn-block{justify-content:flex-start}
html[data-jb-btn="rule"] .btn-icon{width:30px;height:30px}
html[data-jb-btn="rule"] .btn-icon:after{display:none}

/* 12 tab — flat on top, hanging from what is above it */
html[data-jb-btn="tab"] .btn{border-radius:0 0 11px 11px;align-items:flex-end;padding-bottom:9px}
html[data-jb-btn="tab"] .btn:hover{height:44px}
html[data-jb-btn="tab"] .btn-sm:hover{height:37px}
html[data-jb-btn="tab"] .btn-lg:hover{height:52px}
html[data-jb-btn="tab"] .btn:active{height:37px}
html[data-jb-btn="tab"] .btn-coral:hover{background:#d6482f}
html[data-jb-btn="tab"] .btn-primary:hover{background:#2a2825}
html[data-jb-btn="tab"] .btn-icon{align-items:center;padding-bottom:0}

/* 13 stamp — set off true, inks solid when pressed */
html[data-jb-btn="stamp"] .btn{background:transparent;border:2px solid var(--coral-ink);color:var(--coral-ink);
  border-radius:5px;font-weight:800;letter-spacing:.01em;transform:rotate(-1.5deg)}
html[data-jb-btn="stamp"] .btn-primary{border-color:var(--ink);color:var(--ink)}
html[data-jb-btn="stamp"] .btn-ghost{border-color:var(--ink-3);color:var(--ink)}
html[data-jb-btn="stamp"] .btn:hover{background:transparent;transform:rotate(-1.5deg) scale(1.03)}
html[data-jb-btn="stamp"] .btn:active{background:var(--coral-ink);color:#fff;transform:rotate(-1.5deg) scale(.99)}
html[data-jb-btn="stamp"] .btn-primary:active{background:var(--ink)}
html[data-jb-btn="stamp"] .btn-ghost:active{background:var(--ink);border-color:var(--ink)}
/* Two buttons side by side both leaning the same way looks like a mistake; the second leans back. */
html[data-jb-btn="stamp"] .btn + .btn{transform:rotate(1.2deg)}
html[data-jb-btn="stamp"] .btn + .btn:hover{transform:rotate(1.2deg) scale(1.03)}
html[data-jb-btn="stamp"] .btn + .btn:active{transform:rotate(1.2deg) scale(.99)}

/* 14 soft — no border, tinted fill, calm */
html[data-jb-btn="soft"] .btn{border:0;border-radius:14px;font-weight:700}
html[data-jb-btn="soft"] .btn-coral{background:var(--coral-soft);color:var(--coral-ink)}
html[data-jb-btn="soft"] .btn-primary{background:var(--bg-sink);color:var(--ink)}
html[data-jb-btn="soft"] .btn-ghost{background:var(--bg-sink);color:var(--ink)}
html[data-jb-btn="soft"] .btn-coral:hover{background:var(--coral-soft-2)}
html[data-jb-btn="soft"] .btn-primary:hover,html[data-jb-btn="soft"] .btn-ghost:hover{background:var(--line)}
html[data-jb-btn="soft"] .btn-coral:active{background:#f3cfc2}
html[data-jb-btn="soft"] .btn-primary:active,html[data-jb-btn="soft"] .btn-ghost:active{background:var(--line-2)}

/* 15 sharp — square, hairline, inverts */
html[data-jb-btn="sharp"] .btn{border-radius:0;background:transparent;color:var(--ink);
  border:1px solid var(--ink);font-weight:600}
html[data-jb-btn="sharp"] .btn-ghost{border-color:var(--ink-3)}
html[data-jb-btn="sharp"] .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
html[data-jb-btn="sharp"] .btn:active{background:var(--coral);border-color:var(--coral);color:#fff}

/* 16 travelling dot — a coral dot that stretches into a dash */
html[data-jb-btn="dot"] .btn{border-radius:999px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line-2);padding-left:14px}
html[data-jb-btn="dot"] .btn:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);
  flex:none;transition:width .16s cubic-bezier(.2,.8,.2,1),border-radius .16s ease}
html[data-jb-btn="dot"] .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
html[data-jb-btn="dot"] .btn:hover{background:var(--panel);border-color:var(--ink)}
html[data-jb-btn="dot"] .btn-primary:hover{background:#2a2825}
html[data-jb-btn="dot"] .btn:hover:before{width:18px;border-radius:99px}
html[data-jb-btn="dot"] .btn:active{background:var(--bg-sink)}
html[data-jb-btn="dot"] .btn:active:before{width:22px}
html[data-jb-btn="dot"] .btn-icon:before{display:none}

/* 17 coral edge — ink with the mark's bar along the bottom */
html[data-jb-btn="edge"] .btn{overflow:hidden}
html[data-jb-btn="edge"] .btn:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--coral),rgba(232,84,63,0));transition:height .12s ease,background .14s ease}
html[data-jb-btn="edge"] .btn-coral:after{background:linear-gradient(90deg,var(--coral-ink),rgba(198,61,42,0))}
html[data-jb-btn="edge"] .btn:hover:after{background:var(--coral)}
html[data-jb-btn="edge"] .btn-coral:hover:after{background:var(--coral-ink)}
html[data-jb-btn="edge"] .btn:active:after{height:4px}
html[data-jb-btn="edge"] .btn-primary:hover{background:#2a2825}
html[data-jb-btn="edge"] .btn-coral:hover{background:#d6482f}
html[data-jb-btn="edge"] .btn-ghost:hover{background:var(--panel);border-color:var(--ink-3)}

/* 18 lift — the conventional soft shadow raise */
html[data-jb-btn="lift"] .btn{box-shadow:0 1px 2px rgba(20,18,16,.10)}
html[data-jb-btn="lift"] .btn:hover{transform:translateY(-2px)}
html[data-jb-btn="lift"] .btn-coral:hover{box-shadow:0 8px 18px -6px rgba(232,84,63,.5)}
html[data-jb-btn="lift"] .btn-primary:hover{box-shadow:0 8px 18px -6px rgba(20,18,16,.45)}
html[data-jb-btn="lift"] .btn-ghost:hover{box-shadow:0 8px 18px -8px rgba(20,18,16,.25)}
html[data-jb-btn="lift"] .btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(20,18,16,.16)}

/* 19 side bar — the resume section marker, on a button */
html[data-jb-btn="sidebar"] .btn{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-left:4px solid var(--coral);border-radius:0 9px 9px 0;justify-content:flex-start;padding-left:14px;
  transition:border-left-width .12s ease,padding-left .12s ease,background .14s ease}
html[data-jb-btn="sidebar"] .btn-primary,html[data-jb-btn="sidebar"] .btn-coral{background:var(--ink);color:#fff;
  border-color:#2a2825;border-left-color:var(--coral)}
html[data-jb-btn="sidebar"] .btn:hover{border-left-width:8px;padding-left:10px}
html[data-jb-btn="sidebar"] .btn-ghost:hover{background:var(--bg-soft)}
html[data-jb-btn="sidebar"] .btn:active{background:var(--bg-sink)}
html[data-jb-btn="sidebar"] .btn-primary:active,html[data-jb-btn="sidebar"] .btn-coral:active{background:#2a2825}
html[data-jb-btn="sidebar"] .btn-icon{justify-content:center;padding-left:0;border-radius:0 9px 9px 0}

/* 20 the mark — the JB square with its coral bar, as the icon cell */
html[data-jb-btn="mark"] .btn{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);
  padding-left:5px;gap:10px}
html[data-jb-btn="mark"] .btn > svg:first-child{box-sizing:content-box;width:16px;height:16px;padding:7px;
  border-radius:7px;background:var(--ink);color:#fff;position:relative}
/* The bar cannot be a pseudo-element on an svg, so it is a ring drawn under the icon's own box. */
html[data-jb-btn="mark"] .btn > svg:first-child{box-shadow:inset 0 -4px 0 0 var(--coral)}
html[data-jb-btn="mark"] .btn:hover{background:var(--panel);border-color:var(--ink)}
html[data-jb-btn="mark"] .btn:hover > svg:first-child{box-shadow:inset 0 -7px 0 0 var(--coral)}
html[data-jb-btn="mark"] .btn:active{background:var(--bg-sink)}
html[data-jb-btn="mark"] .btn-coral,html[data-jb-btn="mark"] .btn-primary{padding-left:5px}
html[data-jb-btn="mark"] .btn-icon{padding-left:0}
html[data-jb-btn="mark"] .btn-icon > svg:first-child{padding:0;background:none;color:inherit;box-shadow:none}

/* Motion off means motion off, whichever set is on. The colours and edges still change. */
@media (prefers-reduced-motion:reduce){
  html[data-jb-btn] .btn,html[data-jb-btn] .btn:before,html[data-jb-btn] .btn:after{transition:none}
  html[data-jb-btn] .btn:hover,html[data-jb-btn] .btn:active{transform:none}
  html[data-jb-btn="stamp"] .btn{transform:rotate(-1.5deg)}
  html[data-jb-btn="stamp"] .btn + .btn{transform:rotate(1.2deg)}
  html[data-jb-btn="tab"] .btn:hover,html[data-jb-btn="tab"] .btn:active{height:40px}
}