/* The creator panel kit (Rhun, 16 Sep): Asheron's Call's character creation
   manners in our flat style, then "less claudey, more retro drawn": every piece
   is painted small by tools_ui.py and shown here at 2x with its pixels showing,
   edges wobble like inked lines, the sheet sits on a dithered paper tile, and
   the captions are small-caps serif instead of tracked capitals.
   Shared by the game's fire screen (index.html #creator) and the workshop page
   (creator.html). No image generation anywhere.
   Palette: greys #666054 / #4e483c / #a29c8a / #3c3630 (his start button),
   ink #181212, cream #f0ead8 (his faces), gold #c6a872 (his skin tone). */
.sheet{border:12px solid transparent;border-image:url('../art/ui/panel.png') 6 / 12px repeat;background:url('../art/ui/paper.png') 0 0/64px 64px repeat #2a2622;image-rendering:pixelated;padding:8px 10px 10px;color:#e8d9a8;font:14px/1.5 Georgia,serif}
.sheet .eyebrow{font:13px/1.4 Georgia,serif;font-variant:small-caps;letter-spacing:.06em;color:#c6a872}
.sheet h2{margin:0 0 4px;font-weight:normal;font-size:20px;color:#f0ead8}
.sheet .caption{font:12px/1.5 Georgia,serif;font-style:italic;color:#a29c8a;margin:0 0 10px}
.kit{display:block}
.kit *{box-sizing:border-box}
.kit .plate{margin:0 0 8px}
.kit label{display:block;color:#a29c8a;font:14px/1.4 Georgia,serif;font-variant:small-caps;letter-spacing:.05em;margin:10px 0 3px}
.kit .name-label{margin-top:0}
.kit input[type=text],.kit select{width:100%;font:14px Georgia,serif;color:#f0ead8;padding:6px 10px;border:6px solid transparent;border-image:url('../art/ui/inset.png') 3 fill / 6px repeat;image-rendering:pixelated;background:transparent;border-radius:0}
.kit select option{background:#1e1b18;color:#f0ead8}
/* Stone tabs across the top, the chosen one lit and joined to the page. */
.kit .tabs{display:flex;gap:1px;margin:10px 0 0;padding:0 3px}
.kit .tab{flex:1 1 auto;min-width:0;padding:3px 1px 5px;border:solid transparent;border-width:10px 6px 0;border-image:url('../art/ui/tab.png') 5 fill / 10px 6px 0 repeat;image-rendering:pixelated;background:transparent;color:#a29c8a;font:11px/1.2 Georgia,serif;font-variant:small-caps;letter-spacing:0;white-space:nowrap;overflow:hidden;cursor:pointer;opacity:.72;text-shadow:0 1px 0 #181212}
.kit .tab:hover{opacity:1}
.kit .tab[aria-selected=true]{opacity:1;color:#f0ead8;filter:brightness(1.15);position:relative;top:2px}
.kit .pages{border:6px solid transparent;border-image:url('../art/ui/button.png') 3 fill / 6px repeat;image-rendering:pixelated;padding:10px 12px 14px;min-height:250px;background:transparent}
.kit .page[hidden]{display:none}
/* The path list: AC's profession list, a row per template, the chosen one in gold. */
.kit .list{display:flex;flex-direction:column;gap:2px;padding:4px;border:6px solid transparent;border-image:url('../art/ui/inset.png') 3 fill / 6px repeat;image-rendering:pixelated}
.kit .item{display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:6px 8px;border:1px solid transparent;background:transparent;color:#e8d9a8;font:14px Georgia,serif;cursor:pointer;text-align:left}
.kit .item:hover{background:#2f2b27}
.kit .item[aria-selected=true]{background:#3c3630;border-color:#c6a872;color:#f0ead8}
/* A row that is also a stone button (the generic button rule below paints its tile over the
   background and border): the chosen one is lit and ringed in gold instead. */
.kit .list button.item[aria-selected=true]{color:#fff3cf;filter:brightness(1.3) sepia(.35);outline:2px solid #c6a872;outline-offset:-3px}
.kit .item .item-note{font:12px/1.4 Georgia,serif;font-variant:small-caps;color:#a29c8a;letter-spacing:.04em}
.kit .item[aria-selected=true] .item-note{color:#c6a872}
.kit .item:disabled{opacity:.4;cursor:not-allowed}
.kit .blurb{margin:8px 0 0;padding:6px 10px;border:6px solid transparent;border-image:url('../art/ui/inset.png') 3 fill / 6px repeat;image-rendering:pixelated;font:12px/1.5 Georgia,serif;color:#d8ccaa;min-height:54px}
.kit .build{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px;text-align:center}
.kit .build span{font:700 16px Georgia,serif;color:#f0ead8}
.kit .build small{display:block;font:12px/1.3 Georgia,serif;font-variant:small-caps;letter-spacing:.06em;color:#a29c8a;font-weight:normal}
/* Attribute rows: name, a slider bar with an iron knob, studs at each end, the value. */
.kit .attr{display:grid;grid-template-columns:96px 22px 1fr 22px 30px;align-items:center;gap:6px;margin:0 0 12px}
.kit .attr .name{font:14px Georgia,serif;color:#e8d9a8;white-space:nowrap}
.kit .attr .value{text-align:right;font:700 16px Georgia,serif;color:#f0ead8}
.kit .what{grid-column:1/-1;font:11px/1.4 Georgia,serif;font-style:italic;color:#7d776b;margin:3px 0 0 2px}
.kit .track{position:relative;height:14px;border:6px solid transparent;border-image:url('../art/ui/bar.png') 3 fill / 6px repeat;image-rendering:pixelated;background:transparent;cursor:pointer;touch-action:none;--at:0}
.kit .track .fill{position:absolute;left:0;top:-1px;bottom:-1px;width:calc(var(--at)*100%);background:#c6a872;box-shadow:inset 0 -2px 0 #8c7048}
.kit .track .knob{position:absolute;top:-9px;left:calc(var(--at)*(100% - 12px));width:12px;height:20px;background:url('../art/ui/knob.png') center/12px 20px no-repeat;image-rendering:pixelated;pointer-events:none}
.kit .track:focus-visible{outline:2px solid #c6a872;outline-offset:3px}
.kit button.stud{width:22px;height:22px;padding:0;border:0;background:url('../art/ui/stud_plus.png') center/22px 22px no-repeat transparent;image-rendering:pixelated;cursor:pointer;box-shadow:none}
.kit button.stud.minus{background-image:url('../art/ui/stud_minus.png')}
.kit button.stud:hover{filter:brightness(1.2)}
.kit button.stud:disabled{opacity:.3;cursor:not-allowed}
.kit .points{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding:6px 10px;border:6px solid transparent;border-image:url('../art/ui/inset.png') 3 fill / 6px repeat;image-rendering:pixelated;font:14px Georgia,serif;font-variant:small-caps;letter-spacing:.05em;color:#a29c8a}
.kit .points strong{font:700 20px Georgia,serif;color:#c6a872}
.kit .points strong.spent{color:#a29c8a}
.kit .rule{margin:16px 0 8px;padding:0 0 6px;font:14px Georgia,serif;font-variant:small-caps;letter-spacing:.08em;color:#c6a872;font-weight:normal;background:url('../art/ui/rule.png') left bottom/64px 6px repeat-x;image-rendering:pixelated}
.kit .derived{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px}
.kit .derived span{font:700 15px Georgia,serif;color:#f0ead8}
.kit .derived small{display:block;font:12px/1.3 Georgia,serif;font-variant:small-caps;letter-spacing:.06em;color:#a29c8a;font-weight:normal}
/* Skill rows: name with its gear tier, three stone segments, the bought one lit. */
.kit .skill{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:8px;margin:0 0 12px}
.kit .skill .name{font:14px Georgia,serif;color:#e8d9a8;white-space:nowrap}
.kit .skill .tier{display:block;margin-top:1px;font:11px/1.2 Georgia,serif;font-variant:small-caps;font-style:normal;color:#c6a872}
.kit .skill .tier:empty{display:none}
.kit .segments{display:flex;gap:2px}
.kit .segments button{flex:1 1 0;min-width:0;padding:6px 2px;font:11px/1.2 Georgia,serif;font-variant:small-caps;letter-spacing:.02em}
.kit .skill.soon .name{color:#7d776b}
.kit .skill-rows .rule:first-child{margin-top:0}
.kit .note{margin:8px 0 0;font:11px/1.5 Georgia,serif;font-style:italic;color:#7d776b}
/* Plain buttons: a painted stone tile. */
.kit button:not(.ui-btn){background:transparent;color:#e8d9a8;border:6px solid transparent;border-image:url('../art/ui/button.png') 3 fill / 6px repeat;image-rendering:pixelated;border-radius:0;padding:3px 6px;cursor:pointer;font:12px/1.4 Georgia,serif;text-shadow:0 1px 0 #181212}
.kit button:not(.ui-btn):hover{filter:brightness(1.15)}
.kit button[aria-pressed=true]{color:#fff3cf;filter:brightness(1.25) sepia(.3);text-shadow:0 0 4px #c6a87280}
.kit button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.kit button:focus-visible,.kit input:focus-visible,.kit select:focus-visible{outline:2px solid #c6a872;outline-offset:2px}
.kit .subtle{margin-top:10px}
.kit .row{display:flex;gap:6px;flex-wrap:wrap}
.kit .row.small button{flex:1 1 40%;font-size:11px}
.kit .actions{margin-top:10px}
.kit .primary{color:#f0ead8}
.kit .color-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0;gap:9px}
.kit .color-label{font:12px Georgia,serif}
.kit .swatches{display:flex;gap:6px}
.kit .swatch{width:26px;height:26px;padding:0;border:2px solid #181212!important;border-image:none!important;background:var(--swatch)!important;box-shadow:inset 0 0 0 2px #2a2622}
.kit .swatch[aria-pressed=true]{outline:2px solid #c6a872;outline-offset:1px;filter:none}
.kit .swatch.base{background:linear-gradient(135deg,#c9b994 49%,#493021 50%)!important;font-size:11px;color:#fff;text-shadow:0 1px #000}
.kit #saved-json{margin-top:12px;font:12px Georgia,serif;color:#a29c8a}
.kit #saved-json summary{cursor:pointer}
.kit #look-json{width:100%;min-height:120px;margin-top:9px;padding:9px;background:#1f1c19;color:#e8d9a8;border:1px solid #50483c;font:11px/1.4 monospace;resize:vertical}
/* The Play button: Rhun's drawn button (hud.setButtonFrame paints it), the
   workshop page falls back to a painted tile with the same lettering. */
.kit button.play{display:block;width:100%;margin:0 0 10px;color:#fff3cf;font-weight:800;font-family:Georgia,serif;letter-spacing:.1em;text-shadow:0 2px 2px #000}
.kit button.play:not(.ui-btn){border:6px solid transparent;border-image:url('../art/ui/button.png') 3 fill / 6px repeat;height:56px;line-height:44px;font-size:20px;filter:brightness(1.2)}
#status{font:12px/1.5 Georgia,serif;font-style:italic;color:#a29c8a;margin-top:8px;min-height:18px}