/* Santiago e a "?" de cada sistema (web/js/santiago.js, server/santiago.py; docs/DESIGN.md › Ajuda): the "?" in a window's
   title, the help window (its own dialog over the system's), Primeiros Passos in a popover (above the open windows), the
   chest, Menu › Santiago and Admin › Santiago. Only the client's pieces and colours; the portrait and the arrow are
   Bestiary's (web/css/bestiary/santiago.css, web/assets/ui/santiago/). */

/* ---- the "?" (classic.css paints every title button as the close image: undone here) */
.window-title>button.sg-q{position:relative;flex:0 0 auto;width:30px;min-width:30px;height:24px;min-height:24px;margin:0 2px 0 auto;padding:0;border:1px solid #111;border-image:none;
  font:bold 15px/1 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78;background:#2f2f2f;box-shadow:inset 1px 1px #6a6a6a,inset -1px -1px #000}
.window-title>button.sg-q::before{content:none;display:none}
.window-title>button.sg-q::after{content:'?';position:static;inset:auto}
.window-title>button.sg-q:active{box-shadow:inset 1px 1px #000,inset -1px -1px #6a6a6a}
.window-title:has(>.sg-q)>span{min-width:0;overflow-wrap:anywhere}
.window-title:has(>.sg-q)>button:not(.sg-q){margin-left:0}
/* first visit: the "?" blinks (background: the button's texture hides a box-shadow) and, where it fits, a line beside the title says it */
.window-title>button.sg-q.is-new{animation:sg-q-blink 1s linear infinite}
@keyframes sg-q-blink{0%,49.9%{background:#2f2f2f;color:#e4ca78}50%,100%{background:#c5b47c;color:#1c1c1c}}
.window-title>.sg-first::before{content:attr(data-t)}
.window-title>.sg-first{flex:1 1 0;min-width:0;margin-left:8px;text-align:right;white-space:nowrap;overflow:hidden;color:#e4ca78;font:11px 'Tibia Pixel',Verdana,sans-serif}
.window-title:has(>.sg-first)>span{flex:0 0 auto}
.window-title:has(>.sg-first)>button.sg-q{margin-left:4px}
@media (prefers-reduced-motion:reduce){.window-title>button.sg-q.is-new{animation:none;background:#c5b47c;color:#1c1c1c}}
.ba-outcome .window-title>button.sg-q{margin-left:auto}
i.sg-face{display:inline-block;flex:0 0 16px;width:16px;height:16px;vertical-align:middle}
#app-menu i.sg-face{margin-right:6px}

/* ---- the help window */
dialog.window.sg-help{width:min(440px,calc(100vw - 16px))}
dialog.window.sg-help[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100dvh - 16px)}
dialog.window.sg-help>.window-title .sg-back{flex:0 0 auto;width:28px;min-width:28px;font:bold 15px/1 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78}
dialog.window.sg-help>.window-title .sg-back::before{content:none;display:none}
dialog.window.sg-help>.window-title>span{display:flex;align-items:center;gap:4px;min-width:0}
dialog.window.sg-help .wb{display:grid;gap:8px;align-content:start;grid-auto-rows:max-content;overflow:auto;min-height:0}
.sg-what{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:center}
.sg-what .sg-portrait{width:70px;height:70px}
.sg-what p{margin:0;color:#fff;line-height:16px}
.sg-tabs{margin:0;flex-wrap:nowrap}
.sg-tabs button{flex:1 1 0;min-width:0;min-height:32px;white-space:nowrap;padding-left:4px;padding-right:4px}
.sg-kw{color:#4b98da}
.sg-tabs .sg-short{display:none}
@media (max-width:359px){.sg-tabs .sg-long{display:none}.sg-tabs .sg-short{display:inline}
  .sg-see-row:not(.is-list) button{padding:0 2px}.sg-see-row:not(.is-list) button>img,.sg-see-row:not(.is-list) button>canvas{display:none}}
.sg-steps{margin:0;padding:0 2px;list-style:none;display:grid;gap:6px}
.sg-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;min-height:40px}
.sg-steps .sg-ic{position:relative;display:grid;place-items:center;width:40px;height:40px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.sg-steps .sg-ic img,.sg-steps .sg-ic canvas{image-rendering:pixelated;max-width:36px;max-height:36px}
.sg-steps .sg-ic i{position:absolute;left:-1px;top:-1px;min-width:13px;height:13px;padding:0 2px;background:#c5b47c;color:#1c1c1c;font:bold 10px/13px 'Tibia Pixel',Verdana,sans-serif;font-style:normal;text-align:center}
.sg-t{display:grid;gap:2px;min-width:0}
.sg-t b{color:#e4ca78;font-weight:normal;line-height:14px}
.sg-t small{color:#d8d8d8;line-height:15px;font-size:inherit}
.sg-nums{display:grid;gap:6px}
.sg-nums .pf-panel{margin:0}
.sg-kv{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.sg-kv span{line-height:15px}
.sg-kv b{color:#f4d35e;font-weight:normal;text-align:right;line-height:15px}
.sg-kv b.is-me{color:#5fc85f}
.sg-cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.sg-cmp col.k{width:46%}
.sg-cmp th,.sg-cmp td{padding:4px 6px;text-align:left;font-weight:normal;line-height:15px;vertical-align:top}
.sg-cmp th{color:#a9a9a9}
.sg-cmp td{color:#a9a9a9}
.sg-cmp td:nth-child(2){color:#fff}
.sg-cmp td:nth-child(3){color:#f4d35e}
.sg-cmp tr:nth-child(even) td{background:#323232}
.sg-live{display:flex;align-items:center;gap:6px;margin:0;color:#a9a9a9}
.sg-live i{flex:0 0 7px;width:7px;height:7px;background:#5fc85f;border:1px solid #111}
.sg-tips{margin:0;padding:0 2px;list-style:none;display:grid;gap:8px}
.sg-tips li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;color:#fff;line-height:15px}
.sg-tic{display:grid;place-items:center;width:20px;height:16px}
.sg-see{display:grid;gap:4px}
.sg-see>small{color:#a9a9a9}
.sg-see-row{display:grid;gap:4px}
.sg-see-row button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:36px;padding:0 4px;color:#4b98da}
.sg-see-row button span{min-width:0;line-height:13px}
.sg-see-row.is-list{grid-template-columns:1fr}
.sg-see-row.is-list button{justify-content:flex-start;min-height:32px;padding:0 8px}
.sg-see-row button img,.sg-see-row button canvas{flex:0 0 16px}

/* ---- Primeiros Passos: the layer is a popover (top layer: above the windows), placed on events */
.sg-tut[popover]{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;overflow:visible;color:inherit;pointer-events:none}
.sg-tut .sg-dim{pointer-events:none}
.sg-tut .sg-frame{position:fixed;pointer-events:none;outline:2px solid #e8c547;outline-offset:-2px;animation:sg-blink 1s steps(2) infinite}
.sg-tut .sg-hint{left:8px;right:8px;width:auto}
.sg-tut .sg-hint .window-title{display:flex;align-items:center;gap:6px;padding:0 6px}
.sg-tut .sg-hint .window-title>span{color:#fff}
.sg-tut .sg-hint .window-title small{margin-left:auto;color:#f4d35e}
.sg-tut .sg-say p{line-height:16px}
.sg-prog{padding:0 8px 8px}
.sg-prog i{display:block;height:6px;background:#1c1c1c;border:1px solid #000}
.sg-prog i b{display:block;height:100%;background:#e8c547}
.sg-ft{gap:8px}
.sg-ft button{min-height:32px}
.sg-ft .sg-skip{color:#c0c0c0}
.sg-plan{margin:0;padding:0 8px 8px 8px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;counter-reset:sg}
.sg-plan li{display:flex;gap:6px;color:#d8d8d8;min-width:0;counter-increment:sg;line-height:15px}
.sg-plan li::before{content:counter(sg);flex:0 0 16px;text-align:right;color:#f4d35e}
.sg-tut .sg-tab{position:fixed;display:inline-flex;align-items:center;gap:6px;height:26px;min-height:26px;padding:0 6px;pointer-events:auto;color:#e4ca78;box-shadow:0 2px 6px #000a}
.sg-tut .sg-tab small{color:#f4d35e}
.sg-tut .ba-outcome{pointer-events:auto}
.sg-chest-items{display:flex;justify-content:center;gap:8px;margin:6px 0}
.sg-chest-items>span{display:grid;justify-items:center;align-content:start;gap:2px;width:92px;text-align:center}
.sg-chest-items .ba-slot{display:grid;place-items:center;width:40px;height:40px}
.sg-chest-items b{color:#f4d35e;font-weight:normal}
.sg-chest-items small{color:#c0c0c0;line-height:13px}
.sg-outcome .ba-outcome-actions{display:flex;padding:0 8px 8px}
.sg-outcome .ba-outcome-actions button{flex:1;min-height:36px}

/* ---- Menu › Santiago: the index of every help */
dialog.window.sg-modal .wb{display:grid;gap:8px;align-content:start}
.sg-modal .sg-who{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:center}
.sg-modal .sg-who b{display:block;color:#e4ca78;font:bold 13px 'Tibia Pixel',Verdana,sans-serif}
.sg-modal .sg-who small{color:#d8d8d8;line-height:15px}
.sg-modal .sg-foryou{margin:0}
.sg-modal .sg-foryou>span{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.sg-modal .sg-foryou>span>span{flex:1 1 auto;min-width:0}
.sg-modal .sg-foryou button{flex:0 0 auto;white-space:nowrap;min-height:32px;margin-left:0}
.sg-modal input[type=search]{width:100%;min-height:32px}
.sg-areas{flex-wrap:wrap}
.sg-areas button{flex:1 1 auto;min-height:30px}
.sg-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.sg-list button{display:flex;align-items:center;gap:6px;min-height:36px;padding:2px 6px;text-align:left;justify-content:flex-start}
.sg-list button span{min-width:0;line-height:13px}
.sg-list button img,.sg-list button canvas{flex:0 0 16px}

/* ---- Admin › Santiago */
.sg-adm-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px;align-items:start}
@media (max-width:760px){.sg-adm-grid{grid-template-columns:minmax(0,1fr)}.sg-adm-edit{order:-1}.sg-adm-list{max-height:40dvh;overflow:auto}}
.sg-adm-list{display:grid}
.sg-adm-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 6px;min-height:34px;text-align:left;border:0;border-image:none;background:none;box-shadow:none}
.sg-adm-row:nth-child(even){background:#323232}
.sg-adm-row b{color:#fff;font-weight:normal}.sg-adm-row small{display:block;color:#a9a9a9}
.sg-adm-row.is-sel{outline:2px solid #c5b47c;outline-offset:-2px}
.sg-adm-row em{font-style:normal;color:#e8c547}
.sg-adm-field{display:grid;gap:3px;padding:4px 6px}
.sg-adm-field>small{color:#a9a9a9}
.sg-adm-field>span{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px;align-items:center}
.sg-adm-field input{min-width:0}
.sg-adm-field.is-off input{opacity:.5}
.sg-adm-field.is-custom>small{color:#e8c547}
.sg-adm-h{margin:6px 6px 2px;color:#e4ca78;font:bold 11px 'Tibia Pixel',Verdana,sans-serif}
.sg-adm-vals{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 8px;padding:4px 6px}
.sg-adm-vals button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;text-align:left;min-height:28px}
.sg-adm-vals code{color:#4b98da;font:11px 'Tibia Pixel',Verdana,sans-serif}
.sg-adm-vals b{color:#f4d35e;font-weight:normal}