/* Tatsu's Images, in WOS Tools' look (tatsuyaki.com). The tokens below are WOSEncyclopedia's src/styles/tokens.css,
   copied as they are; after them, the parts of its tools.css and site.css this site uses, and its own pages. */

:root {
  /* Surfaces and ink */
  --bg: #121215; /* the cards (and the bars and sidebar around them): every board surface inherits this */
  --text: #f1ecdf; /* warm white (≈16:1 on --bg) */
  --muted: #b3ae9f; /* secondary copy (≈8.4:1 on --bg) */
  --rule: #36363d; /* 1px grid hairlines (decorative) */
  --rule-soft: #27272c; /* lighter dividers inside lists */
  --control-border: #6e6e77; /* edges of buttons and of what opens over the page (≈3.7:1 on --bg, 3.0:1 on --overlay) */
  --field: #1e1e22; /* the fill of every field and select: grey, lifted off the card */
  --menu: var(--field); /* the list a select or a search opens: the field's own grey, so the open field and its list are one */
  --menu-field: #161619; /* the field inside its open menu, darker than the menu and with no edge, so it sinks into it */
  --menu-hover: color-mix(in srgb, var(--ice) 12%, transparent); /* the row under the pointer or the keyboard in a menu or a list: an ice-grey tint */
  --row-selected: color-mix(in srgb, var(--ice) 18%, transparent); /* the chosen row of a list (a looked-up player): ice, a step over the hover */
  --field-border: #4e4e56; /* edges of fields and selects (≈2.3:1 on --bg): quieter than a button's, the fill marks them too */
  --sunken: #0a0a0c; /* inset wells: image wells, summary strips, an opened row's details */
  --raised: #202024; /* hovered or highlighted rows and buttons */
  --thumb: #2e2e35; /* a select on hover */
  --segment: color-mix(in srgb, var(--ice) 18%, var(--field)); /* the chosen part of a segmented control: tinted ice (selected), its label ice */
  --canvas: #060607; /* the tools' page behind their cards (each part of a tool is a card on --bg) */
  --card-head: #1c1c20; /* a card's header strip and a table's heading row, between --bg and --raised */
  --band: #222227; /* every other group of rows in a long grouped table (Transfer groups), against --bg */
  --overlay: #26262b; /* what opens over the page: the player card, chart tooltips */
  --dialog: #17171a; /* a dialog's panel: dark, just over the cards, so its fields (--field) lift off it as off a card */
  --shadow-overlay: 0 14px 36px rgb(0 0 0 / 0.6); /* with --overlay, so it floats above the cards */
  --scroll-thumb: #5e5e66;
  --skeleton: color-mix(in srgb, var(--text) 9%, transparent); /* loading skeletons: a lifted grey that reads on every surface, never the accent */

  /* Accent */
  --ice: #a6d8ff; /* the one accent: labels, marks, selected, Legion 1 */
  --on-accent: #141417; /* text on accent-filled blocks */

  /* Status */
  --danger: #ffad99; /* errors, blockers, removals, destructive actions */
  --warn: #ffd17c; /* warnings, ending shields, gathering spots */
  --ok: #9fe0b0; /* success, additions, in sync */

  /* Data series */
  --legion2: #c9b3ff; /* Legion 2 in the SME tools (Legion 1 is --ice) */
  --state-a: var(--ice); /* the first state when Leaderboards compares two */
  --state-b: #ff9b52; /* the second: orange against blue, far apart in hue and for colour-blind readers too */
  --frost: #8ec5f5; /* Frost Sphere owners on the SvS map */
  --zone: #e45b65; /* the castle zone on the maps */
  --invader: #e45b65; /* Map search: players whose home state is not the state searched (the castle zone's red) */
  --castle: #dcb56c; /* the castle when its picture is missing */
  --gold: #e8c25c; /* leaderboard places 1-3, as the game marks them (with --on-accent text) */
  --silver: #c9ced6;
  --bronze: #cf9466;

  /* Type scale */
  --fs-label: 12px; /* uppercase structural labels, section and table headings */
  --fs-meta: 12px; /* secondary metadata: IDs, timestamps, hints */
  --fs-data: 14px; /* working data: tables, lists, controls */
  --fs-figure: 16px; /* the one number a row is about (a leaderboard value) */
  --fs-body: 14px; /* sentences */
  --fs-touch: 16px; /* inputs on phones: smaller text makes iOS zoom in on focus */
  --tracking-label: 0.14em; /* letter-spacing of uppercase labels */

  /* Corners: four steps. Cards and the page's own surfaces are square (0); circles (dots, medals) are 50%. */
  --radius-control: 4px; /* anything clicked or typed in, and what sits in a card: fields, buttons, rows, tags, small cards */
  --radius-panel: 8px; /* what wraps controls: a menu, a segmented control's track */
  --radius-inset: calc(var(--radius-panel) - 3px); /* a part inside a track, its 3 px padding in: the gap round it stays even */
  --radius-pill: 999px; /* status chips */

  /* Controls */
  --control-h: 44px; /* buttons and fields; every control on phones */
  --control-h-sm: 32px; /* compact controls on desktop: tabs, row actions */
  --focus: 2px solid #a1a1aa; /* keyboard focus ring, everywhere: a neutral light grey (≈7:1 on --bg, 6.5:1 on --field), not the accent */
}

/* ---- Fonts (tools.css): IBM Plex Sans for words, Plex Mono for links and IDs, "WOS Title" (TeX Gyre Adventor Bold,
   cut down; LPPL) for the name and page titles ---- */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/plex-sans-400.woff2') format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600 700;font-display:swap;src:url('/assets/plex-sans-600.woff2') format('woff2')}
@font-face{font-family:"WOS Title";font-style:normal;font-weight:700;font-display:swap;src:url('/assets/adventor-bold.woff2') format('woff2')}

/* ---- Base (tools.css) ---- */
:root{color-scheme:dark;--gutter:clamp(16px,3vw,48px);--panel-pad:24px;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-family:"IBM Plex Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:14px;background:var(--canvas);color:var(--text)}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--bg)}
html{scrollbar-gutter:stable}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--canvas);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}a:hover{color:var(--ice)}
::selection{background:var(--ice);color:var(--bg)}
.skip-link{position:absolute;left:var(--gutter);top:-100px;padding:12px 16px;background:var(--text);color:var(--bg);z-index:100;font-weight:700}.skip-link:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
main[tabindex="-1"]:focus{outline:none}
h1{margin:0;font-family:"WOS Title",var(--mono);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
h2{margin:0;font-size:var(--fs-figure);font-weight:600}
.muted{font-size:var(--fs-meta);line-height:1.7;color:var(--muted)}
@media(max-width:720px){:root{--panel-pad:16px}h1{font-size:22px}}

/* ---- Controls (tools.css): square fields on --field, the primary button warm white turning ice on hover ---- */
input,textarea,button,.btn{width:100%;min-height:var(--control-h);padding:10px 12px;font:inherit;font-size:var(--fs-data);color:var(--text);background:var(--bg);border:1px solid var(--control-border);border-radius:0}
input,textarea{min-width:0;max-width:100%;background:var(--field);border-color:var(--field-border)}
textarea{display:block;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
input:focus,textarea:focus,button:focus-visible,a:focus-visible,label:focus-within{outline:var(--focus);outline-offset:2px}
button,.btn{cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;width:auto;font-weight:400;text-decoration:none;white-space:nowrap}
button:hover:not(:disabled),.btn:hover{color:var(--text);background:var(--raised);border-color:var(--muted)}
button:disabled{opacity:.45;cursor:default}
button[type=submit]{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:700}
button[type=submit]:hover:not(:disabled){background:var(--ice);border-color:var(--ice);color:var(--on-accent)}
.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,var(--bg))}
.btn-danger:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:var(--on-accent)}
.btn-sm{width:auto;min-height:var(--control-h-sm);padding:4px 12px;border-radius:var(--radius-control);white-space:nowrap}
label{display:block;margin-bottom:8px;font-size:var(--fs-meta);color:var(--muted)}
.optional{opacity:.8}
progress{width:100%;height:5px;margin:0;accent-color:var(--ice)}
.alert{margin:0;padding:10px 12px;font-size:var(--fs-data);color:var(--danger);border:1px solid var(--danger);border-left-width:3px}
.alert.is-ok{color:var(--ok);border-color:var(--ok)}
@media(max-width:720px){input,textarea{font-size:var(--fs-touch)}.btn-sm{min-height:var(--control-h)}}

/* ---- The top bar (tools.css, site.css): the logo and the name at the gutter, the account at the right ---- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:52px;padding:0 var(--gutter);background:var(--bg);border-bottom:1px solid var(--rule)}
.topbar-brand{display:flex;align-items:center;gap:10px;flex:none;min-width:0;color:var(--text);text-decoration:none}
.topbar-brand:hover .brand-name{color:var(--ice)}@media(hover:none){.topbar-brand:hover .brand-name{color:var(--text)}}
.topbar-logo{flex:none;width:28px;height:28px;border-radius:var(--radius-control)}
.brand-name{position:relative;top:.13em;overflow:hidden;font-family:"WOS Title",var(--mono);font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.bar-account{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.bar-user{overflow:hidden;font-size:13px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.bar-account .bar-signout{width:auto;min-height:36px;padding:0 14px;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--control-border);border-radius:var(--radius-control)}
.bar-account .bar-signout:hover:not(:disabled){color:var(--text);background:var(--raised);border-color:var(--muted)}
@media(max-width:959px){.topbar{padding:0 14px}}
@media(max-width:420px){.bar-user{display:none}}

/* ---- The page (site.css): the title on the page, cards on --canvas 12 px apart inside the gutter ---- */
.site-main{display:grid;gap:12px;align-content:start;width:100%;max-width:1280px;margin:var(--gutter) auto 12px;padding:0 var(--gutter)}
.site-main.narrow{max-width:calc(480px + 2 * var(--gutter));margin-top:clamp(16px,8vh,72px)}
.site-main.wide{max-width:1600px}
@media(max-width:720px){.site-main{margin-top:12px}}
.pageheading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px}
.card{min-width:0;margin:0;background:var(--bg);border:1px solid var(--rule)}
.card-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:14px var(--panel-pad);background:var(--card-head);border-bottom:1px solid var(--rule)}
.card-text{margin:0;padding:20px var(--panel-pad);font-size:var(--fs-body)}
.empty{margin:0;padding:16px var(--panel-pad) 20px;font-size:var(--fs-data);color:var(--muted)}
.site-foot{margin:auto var(--gutter) 0;padding:12px 0 var(--gutter);font-size:var(--fs-meta);color:var(--muted);text-align:center}
.site-foot p{margin:0}
.icon{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}  /* Tabler Icons' stroke */

/* ---- Sign in (WOS Tools' login.astro) ---- */
.login-form{display:grid;gap:18px;padding:20px var(--panel-pad) var(--panel-pad)}
.login-hint{margin:0}
.login-form .login-show{display:flex;align-items:center;gap:10px;margin:-4px 0 0;cursor:pointer}
.login-form .login-show input{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--ice)}
.login-form .login-show:focus-within{outline:none}

/* ---- Upload ---- */
.upload-form{display:grid;gap:18px;padding:20px var(--panel-pad) var(--panel-pad)}
.drop{position:relative;display:grid;place-items:center;min-height:180px;margin:0;padding:20px;font-size:var(--fs-data);color:var(--muted);text-align:center;background:var(--sunken);border:1px dashed var(--control-border);border-radius:var(--radius-control);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.is-over{color:var(--text);border-color:var(--ice);background:color-mix(in srgb,var(--ice) 6%,var(--sunken))}
.drop-empty{display:grid;justify-items:center;gap:10px}
.drop-empty .icon{width:28px;height:28px;color:var(--ice)}
.drop-link{color:var(--ice);text-decoration:underline;text-underline-offset:4px}
.drop-preview{display:block;max-width:100%;max-height:320px;object-fit:contain}
.drop-name{display:block;margin-top:10px;font-family:var(--mono);font-size:var(--fs-meta);color:var(--muted);word-break:break-all}
.drop.has-file{gap:0;align-content:center}

/* ---- Just uploaded: the links to share ---- */
.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--rule))}
.done .card-bar h2{color:var(--ok)}
.done-body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:20px var(--panel-pad) var(--panel-pad)}
.done-thumb{display:block;aspect-ratio:1;background:var(--sunken);border:1px solid var(--rule-soft);border-radius:var(--radius-control);overflow:hidden}
.done-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.done-links{display:grid;gap:14px;align-content:start}
.copy-row{display:flex;gap:8px}
.copy-row input{flex:1;font-family:var(--mono);font-size:13px}
.copy-row .btn-sm{min-height:var(--control-h);padding:0 16px}
@media(max-width:600px){.done-body{grid-template-columns:1fr}.done-thumb{width:120px}}

/* ---- Uploads: tiles with the thumbnail, the note, the dates and the actions ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0;padding:var(--panel-pad);list-style:none}
.tile{display:flex;flex-direction:column;min-width:0;background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius-control);overflow:hidden;transition:border-color .15s,opacity .2s}
.tile:hover{border-color:var(--control-border)}
.tile.is-removing{opacity:.4;pointer-events:none}
.tile-thumb{display:block;aspect-ratio:4/3;background:var(--sunken);border-bottom:1px solid var(--rule-soft)}
.tile-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.tile-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:12px 14px 14px}
.tile-note{display:-webkit-box;margin:0;overflow:hidden;font-size:var(--fs-data);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tile-note.is-empty{color:var(--muted);font-style:italic}
.tile-meta{margin:0;font-size:var(--fs-meta);line-height:1.6;color:var(--muted)}
.tile-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.pager{display:flex;justify-content:center;gap:8px;padding:0 var(--panel-pad) var(--panel-pad)}

/* ---- An image's page ---- */
.view-well{display:grid;place-items:center;padding:clamp(12px,2vw,24px);background:var(--sunken);border-bottom:1px solid var(--rule)}
.view-well a{display:block;line-height:0}
.view-well img{display:block;max-width:100%;max-height:min(78vh,1200px);width:auto;height:auto;object-fit:contain}
.view-caption{display:grid;gap:10px;padding:18px var(--panel-pad) var(--panel-pad)}
.view-note{margin:0;font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.view-meta{margin:0;font-size:var(--fs-meta);color:var(--muted)}
.view-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* A short confirmation over the page ("Link copied"). */
.toast{position:fixed;left:50%;bottom:24px;z-index:50;padding:10px 16px;font-size:var(--fs-data);color:var(--text);background:var(--overlay);border:1px solid var(--control-border);border-radius:var(--radius-control);box-shadow:var(--shadow-overlay);transform:translateX(-50%)}
@media(prefers-reduced-motion:no-preference){.toast{animation:toast-in .15s ease-out}@keyframes toast-in{from{opacity:0;transform:translate(-50%,6px)}}}