/* The menu kit (owner 16/10: "todos os assets de menu deveriam ser consistentes e correntes com tudo, e criados no GPT").
   Every menu piece is art Astra drew in the room's own style (arcade-art/room-v2/kit_ui.py -> printer/art/kit/): keycaps from
   the rainbow keyboard for every key, the pinned paper of the cork board for every panel, the white label box of the SPOTS
   LEFT sheet for small tags, a pinned paper strip for the hint bars. CSS only lays the pieces out (9-slices) and writes the
   text. Loaded last by the room and the desk; body.kit turns it on (room.js / terminal.js), ?kit=0 shows the old skin. */
body.kit {
  --k-dark: url(../printer/art/kit/key-dark.png) 8 19 24 19 fill / 4px 9.5px 12px 9.5px stretch;
  --k-cream: url(../printer/art/kit/key-cream.png) 8 19 24 19 fill / 4px 9.5px 12px 9.5px stretch;
  --k-lime: url(../printer/art/kit/key-lime.png) 8 19 24 19 fill / 4px 9.5px 12px 9.5px stretch;
  --k-label: url(../printer/art/kit/label.png) 15 18 15 18 fill / 7.5px 9px 7.5px 9px stretch;
  --k-strip: url(../printer/art/kit/strip.png) 20 56 14 50 fill / 10px 28px 7px 25px round;
  --k-paper: url(../printer/art/paper.png) 84 75 31 77 fill / 42px 37.5px 15.5px 38.5px stretch;
  --ink: #17181d; --ink-2: #4d473f; --ink-3: #6b6458; --ink-acc: #0a6872; --key-ink: #f3efe6; --glow: rgba(255, 73, 207, 0.6);
}

/* ---- every panel loses the glass, the hairline and the rainbow edge: it becomes paper, a strip, a label or nothing ---- */
body.hudskin.kit .hud-panel { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.hudskin.kit .hud-panel::before { display: none !important; }

/* ---- the keys: keycaps from the room's keyboard. Dark = any key, cream = the way back / secondary, lime = the main action ---- */
body.hudskin.kit .hud-btn-d, body.hudskin.kit .hud-btn-p, body.hudskin.kit .door-btn, body.hudskin.kit .hud-key, body.hudskin.kit .product-share,
body.hudskin.kit .bubble a {
  border-style: solid !important; border-width: 4px 9.5px 12px 9.5px !important; border-image: var(--k-dark) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; clip-path: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--key-ink) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); image-rendering: pixelated; text-decoration: none;
  min-height: 44px; padding: 2px 10px 1px !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter 0.12s, transform 0.08s;
}
body.hudskin.kit :is(.door-btn.follow, .hud-key, .term-back, .social-back, .product-share, .bubble a, .lights[aria-pressed="true"], .hud-btn[aria-pressed="true"]) {
  border-image: var(--k-cream) !important; color: var(--ink) !important; text-shadow: none;
}
body.hudskin.kit :is(.product-btn, #share-x) { border-image: var(--k-lime) !important; color: #0f2207 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); font-weight: 700 !important; }
body.hudskin.kit :is(.hud-btn-d, .hud-btn-p, .door-btn, .hud-key, .product-share, .bubble a):is(:hover, :focus-visible) { filter: brightness(1.14) !important; outline: none; background: none !important; }
body.hudskin.kit :is(.hud-btn-d, .hud-btn-p, .door-btn, .hud-key, .product-share, .bubble a):focus-visible { outline: 2px dashed #ffe900 !important; outline-offset: 2px; }
body.hudskin.kit :is(.hud-btn-d, .hud-btn-p, .door-btn, .hud-key, .product-share, .bubble a):active { transform: translateY(2px); filter: brightness(0.94) !important; }

/* ---- the engagement keys: no rainbow ring around a keycap; a glow that steps through the rainbow (no violet) + the RGB jolt ---- */
body.hudskin.kit .hype-rim { display: none !important; }
body.hudskin.kit .hype:not(.hype-quiet) { box-shadow: 0 0 14px 2px var(--glow), 0 0 26px 4px var(--glow) !important; }
body.hudskin.kit .hype:not(.hype-quiet), body.hudskin.kit .product-btn.hype, body.hudskin.kit .share-main.hype { animation: kit-glow 2.8s infinite, hype-jolt 6s steps(1) infinite !important; }
body.hudskin.kit .hype-shine { inset: 0; }
@keyframes kit-glow {
  0% { --glow: rgba(255, 69, 58, 0.5); } 14% { --glow: rgba(255, 159, 10, 0.5); } 28% { --glow: rgba(255, 233, 0, 0.45); } 42% { --glow: rgba(100, 255, 0, 0.45); }
  57% { --glow: rgba(0, 234, 219, 0.5); } 71% { --glow: rgba(0, 140, 255, 0.5); } 85% { --glow: rgba(255, 73, 207, 0.5); } 100% { --glow: rgba(255, 69, 58, 0.5); }
}

/* ---- paper: the door, the ticket block, the bubbles, the socials menu (the cork board's pinned sheet) ---- */
body.hudskin.kit :is(.door-card, .product, .bubble, .socials-menu) {
  border-style: solid !important; border-width: 42px 37.5px 15.5px 38.5px !important; border-image: var(--k-paper) !important; border-radius: 0 !important;
  --hud-ink: #17181d; --hud-muted: #4d473f; --hud-faint: #6b6458; --hud-accent: #0a6872; color: #17181d;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.5)) !important; image-rendering: auto;
}
body.hudskin.kit :is(.door-card, .product)::before { display: none !important; }
/* the door */
body.hudskin.kit .door-card { padding: 0 10px 8px !important; }
body.hudskin.kit .door-x { filter: none !important; width: 30px; height: 30px; }
body.hudskin.kit #door-title { color: #17181d; margin-top: 2px !important; }
body.hudskin.kit .door p, body.hudskin.kit .door .door-spots-note { color: #4d473f; }
body.hudskin.kit .door-lead b { color: #0a6872 !important; }
body.hudskin.kit .door-rules { color: #0a6872 !important; }
body.hudskin.kit .door .door-note { color: #6b6458; }
body.hudskin.kit .door-row { gap: 6px; }
body.hudskin.kit .door-btn { width: 100%; min-height: 46px; font-size: 15px !important; }
/* the spots: white label boxes, like the SPOTS LEFT sheet */
body.hudskin.kit :is(.door-spot, .product-spot) { border-style: solid; border-width: 7.5px 9px; border-image: var(--k-label); background: none !important; box-shadow: none !important; padding: 0 2px !important; }
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k) { display: inline-flex; align-items: center; gap: 4px; color: #17181d !important; }
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k)::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--c); box-shadow: 0 0 0 1.5px #17181d; }
body.hudskin.kit :is(.door-spot b, .product-spot b) { color: #17181d !important; text-shadow: none !important; }
body.hudskin.kit :is(.door-spot .ds-of, .product-spot .ps-of) { color: #5d574e !important; }
body.hudskin.kit .door-spot .ds-bar { background: rgba(23, 24, 29, 0.14); }
body.hudskin.kit .door-spot .ds-bar i { box-shadow: none; outline: 1px solid rgba(23, 24, 29, 0.55); }
body.hudskin.kit .door-spot[data-k="free"] { --c: #f2c400; } body.hudskin.kit .product-spot[data-k="free"] { --c: #f2c400; }

/* the ticket block */
body.hudskin.kit .product { padding: 0 10px 8px !important; width: 340px; }
body.hudskin.kit .product-title { color: #17181d !important; }
body.hudskin.kit .product-title::before { color: #1f7a12 !important; text-shadow: none !important; }
body.hudskin.kit .product-sub, body.hudskin.kit .product-count { color: #4d473f !important; border-top-color: rgba(23, 24, 29, 0.14) !important; }
body.hudskin.kit .product-steps li { color: #17181d; }
body.hudskin.kit .product-steps li b { color: #8a5d00; text-shadow: none; }
body.hudskin.kit .product-steps li::before { box-shadow: 0 0 0 1.5px #17181d, inset -2px -2px 0 rgba(0, 0, 0, 0.25); }
body.hudskin.kit .product-rules { color: #0a6872 !important; }
body.hudskin.kit .product-btn { width: 100%; min-height: 48px; font-size: 16px !important; }
body.hudskin.kit .product-member { border-top-color: rgba(23, 24, 29, 0.14) !important; }
body.hudskin.kit .product-link { color: #4d473f !important; }
body.hudskin.kit .product-shares { gap: 6px; }
body.hudskin.kit .product-share::before { background: currentColor; }
body.hudskin.kit .product-invite { box-shadow: 0 0 0 1.5px #17181d !important; }
body.hudskin.kit .product-more { color: #0a6872 !important; }

/* the bubbles: paper, no tail; the link is a cream key */
body.hudskin.kit .bubble { padding: 0 8px 6px !important; }
body.hudskin.kit .bubble::after { display: none !important; }
body.hudskin.kit .bubble b { color: #6b6458 !important; }
body.hudskin.kit .bubble a { margin-top: 8px; font-size: 14px !important; }

/* the socials menu: paper with a column of keys */
body.hudskin.kit .socials-menu { padding: 0 6px 6px !important; gap: 4px !important; }
body.hudskin.kit .socials-menu button { justify-content: flex-start; width: 100%; }

/* the dock: no bar, a row of keycaps */
body.hudskin.kit.ui4 .dock { background: none !important; padding: 0 !important; gap: 6px !important; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)) !important; }
body.hudskin.kit.ui4 .dock > * { padding: 2px 12px 1px 6px !important; min-height: 50px; color: var(--key-ink) !important; }
body.hudskin.kit.ui4 .dock > [aria-expanded="true"] { border-image: var(--k-cream) !important; color: #17181d !important; text-shadow: none; }

/* Lights / Sound: two keys, no bar behind them */
body.hudskin.kit .hud-right { gap: 6px !important; padding: 0 !important; }
body.hudskin.kit .hud-btn { min-width: 46px; }

/* the label box: the cursor label in the room and the toasts */
body.hudskin.kit[data-lights] .hint, body.hudskin.kit .toast {
  border-style: solid !important; border-width: 7.5px 9px !important; border-image: var(--k-label) !important; background: none !important; box-shadow: none !important;
  color: #17181d !important; padding: 0 4px !important; font-weight: 600 !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)) !important; }
body.hudskin.kit[data-lights] .hint .social-chip { color: #17181d; }
/* the desk's hint bar: the pinned strip */
body.hudskin.kit:not([data-lights]) .hint {
  border-style: solid !important; border-width: 10px 28px 7px 25px !important; border-image: var(--k-strip) !important; background: none !important; box-shadow: none !important;
  color: #17181d !important; padding: 2px 4px 0 !important; font-weight: 600 !important; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)) !important; }

/* the desk: the TV bar is a strip with keys; the ticket's rows have no bar behind them */
body.hudskin.kit .tv-controls { border-style: solid !important; border-width: 10px 28px 7px 25px !important; border-image: var(--k-strip) !important; padding: 2px 2px 0 !important; gap: 6px !important; }
body.hudskin.kit .tv-controls .tv-now { color: #17181d !important; text-shadow: none !important; }
body.hudskin.kit .lb-row.hud-panel { gap: 6px !important; padding: 0 !important; }
body.hudskin.kit .lb-row .btn { min-width: 140px; }
body.hudskin.kit .tv-to-desk .hud-key { min-height: 48px; padding: 2px 16px 1px !important; }

/* the arrows that say the room and the desk go on: dark keys at the edges (phones only, audit.css shows them) */
@media (max-width: 760px) {
  body.hudskin.kit .pan-cue { border-style: solid; border-width: 4px 9.5px 12px 9.5px; border-image: var(--k-dark); border-radius: 0 !important; background: none;
    width: auto; min-width: 44px; height: auto; min-height: 46px; margin-top: -23px; padding: 2px 7px 1px; display: inline-flex; align-items: center; gap: 5px;
    color: #8ffcff; font: 400 24px/1 VT323, monospace; text-shadow: 0 0 8px rgba(0, 234, 219, 0.9); image-rendering: pixelated; }
  body.hudskin.kit .pan-cue.l { left: 2px; } body.hudskin.kit .pan-cue.r { right: 2px; }
  body.hudskin.kit .pan-cue .t { font: 600 13px/1 var(--hud-font); color: #f3efe6; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); }
  body.hudskin.kit .pan-cue:active { transform: translateY(2px); }
}

/* ---- the paper pop-ups (printer/paper.css): their keys are the same keycaps (the Ticket pop-ups, .wl-tk, use the Ticket kit's) ---- */
body.kit .wl-paper:not(.wl-tk) :is(.wl-key, .wl-share, .wl-copy, .wl-done) {
  border-style: solid !important; border-width: 4px 9.5px 12px 9.5px !important; border-image: var(--k-dark) !important; background: none !important; box-shadow: none !important;
  color: #f3efe6 !important; min-height: 46px; image-rendering: pixelated; }
body.kit .wl-paper:not(.wl-tk) :is(.wl-key, .wl-share) { border-image: var(--k-lime) !important; color: #0f2207 !important; }
body.kit .wl-paper:not(.wl-tk) .wl-copy { border-image: var(--k-cream) !important; color: #17181d !important; }
body.kit .wl-paper:not(.wl-tk) :is(.wl-key, .wl-share, .wl-copy, .wl-done):active { transform: translateY(2px); }
body.kit .wl-paper:not(.wl-tk) .wl-share svg { fill: currentColor; }

/* ---- phones: the slim ticket bar is the pinned strip; opened, it is the sheet ---- */
@media (max-width: 760px) {
  body.hudskin.kit .product { width: auto; left: 6px !important; right: 6px !important; }
  body.hudskin.kit .product:not(.open) { border-width: 10px 28px 7px 25px !important; border-image: var(--k-strip) !important; padding: 2px 0 0 !important; }
  body.hudskin.kit .product.open { padding: 0 6px 6px !important; }
  body.hudskin.kit .product-btn { width: auto; min-height: 46px; padding: 2px 14px 1px !important; }
  body.hudskin.kit.ui4 .dock { left: 4px !important; right: 4px !important; gap: 3px !important; }
  body.hudskin.kit.ui4 .dock > * { flex-direction: column; gap: 1px; padding: 1px 1px 0 !important; min-height: 58px; }
  body.hudskin.kit .door-card { width: calc(100vw - 16px); }
  body.hudskin.kit .hud-btn .label { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.hudskin.kit .hype:not(.hype-quiet), body.hudskin.kit .product-btn.hype, body.hudskin.kit .share-main.hype { animation: none !important; } }

/* ---- fixes after the first look (16/10) ---- */
/* the keys above set display: anything hidden stays hidden (the [hidden] attribute, the desk's own back key inside the room) */
body.hudskin.kit [hidden] { display: none !important; }
body.hudskin.kit.embedded .hud .back, body.hudskin.kit.watching .hud .back { display: none !important; }
/* the spots tiles: the label fits on one line */
body.hudskin.kit :is(.door-spot, .product-spot) { border-width: 7.5px 6px; border-image-width: 7.5px 6px; padding: 0 1px !important; }
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k) { font-size: 8px !important; letter-spacing: 0.02em !important; white-space: nowrap; gap: 3px; }
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k)::before { width: 6px; height: 6px; }
body.hudskin.kit :is(.door-spot .ds-of, .product-spot .ps-of) { white-space: nowrap; }
/* the desk's edge keys sit at the keyboard, not over the screen */
@media (max-width: 760px) { body.hudskin.kit:not([data-lights]) .pan-cue { top: 66%; } }
/* phones: the opened ticket sheet reads top to bottom, the main key full width under the spots */
@media (max-width: 760px) {
  body.hudskin.kit .product.open { display: block !important; }
  body.hudskin.kit .product.open .product-btn { display: flex; width: 100%; margin-top: 8px !important; }
}

/* ---- the spots tiles, readable (owner 16/10: "ajusta esse texto"): VT323 for the small lines, so FCFS reads FCFS (the pixel
   faces drew its C like an O), bigger labels and "of ..." lines ---- */
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k) { font: 400 16px/1 VT323, ui-monospace, monospace !important; letter-spacing: 0.04em !important; gap: 5px; }
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k)::before { width: 8px; height: 8px; }
body.hudskin.kit :is(.door-spot .ds-of, .product-spot .ps-of) { font: 400 15px/1.05 VT323, ui-monospace, monospace !important; letter-spacing: 0.02em; }
body.hudskin.kit .door-spot { gap: 3px !important; padding: 2px 3px 3px !important; }
body.hudskin.kit .product-spot { gap: 2px !important; padding: 1px 2px 2px !important; }
body.hudskin.kit .product-spot .ps-k { font-size: 14px !important; }
body.hudskin.kit .product-spot .ps-of { font-size: 14px !important; }
body.hudskin.kit .product-spot b { font-size: 19px !important; }

/* ---- the spot titles stand out (owner 16/10: "deixe mais em destaque os títulos das vagas"): a coloured tag in Press Start 2P,
   the arcade face (its C reads C; Pixelify's bold C read like an O) ---- */
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k) {
  display: block !important; justify-self: stretch; margin: -1px -1px 4px !important; padding: 4px 4px 3px !important; text-align: left;
  font: 400 10px/1 "Press Start 2P", "Silkscreen", monospace !important; letter-spacing: 0 !important; color: #101722 !important;
  background: var(--c); box-shadow: 0 0 0 2px #101722; white-space: nowrap; }
body.hudskin.kit :is(.door-spot .ds-k, .product-spot .ps-k)::before { display: none !important; }
body.hudskin.kit .product-spot .ps-k { font-size: 8px !important; padding: 3px 3px 2px !important; }
body.hudskin.kit :is(.door-spot, .product-spot)[data-k="free"] { --c: #ffd400; }
body.hudskin.kit :is(.door-spot, .product-spot)[data-k="gtd"] { --c: #00d9cc; }
body.hudskin.kit :is(.door-spot, .product-spot)[data-k="fcfs"] { --c: #64e000; }