/* Luxel — 共享基底
   ────────────────────────────────────────────────────────────────────────
   所有页面都先加载本文件，再加载各自的页面样式。
   Token 只在这里定义一份 —— 改色请只改这里。

   字体：IBM Plex 自托管于 /fonts（OFL，见 fonts/LICENSE.txt）。
   Plex Sans 不含汉字，中文自动回落到 PingFang SC 等系统字体；
   IBM Plex Sans SC 体积数 MB，不值得为此打包。

   配色：界面为单色。画布渲染的是饱和作品，chrome 里任何色相都会抢视线，
   所以 --accent 浅色近黑、深色近白，承担全部主操作与激活态。
   主题由 prefers-color-scheme 决定，可被 <html> 上的 [data-theme] 覆盖。
   ──────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-SemiBold.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  /* 日文、韩文页面：汉字 / 谚文先用本语言的系统字体，不借中文字形 */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 圆角只有三级，按「这东西是什么」而不是「它多大」来选：
     pill  可点的东西 —— 按钮、输入、下拉、色标、开关
     card  承载内容的小块 —— 预设卡、菜单项、缩略图
     panel 大面板 —— 画面、浮层、工具栏 */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --r-pill:999px;
  --r-card:14px;
  --r-panel:20px;
}

:root{
  color-scheme:light;
  --bg:#ffffff; --surface:#f9f9f9; --surface-2:#ffffff; --surface-3:#efefef;
  --border:#e5e5e5; --border-control:#c6c6c6;
  --text:#0d0d0d; --text-2:#5c5c5c; --text-3:#6b6b6b;
  --accent:#0d0d0d; --accent-fg:#ffffff;
  --stage:#f2f2f2; --danger:#b42318;
  --dock-inset:12px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --bg:#0f0f0f; --surface:#171717; --surface-2:#212121; --surface-3:#2b2b2b;
    --border:#2f2f2f; --border-control:#4d4d4d;
    --text:#ececec; --text-2:#a4a4a4; --text-3:#949494;
    --accent:#ececec; --accent-fg:#0f0f0f;
    --stage:#0a0a0a; --danger:#f97066;
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0f0f0f; --surface:#171717; --surface-2:#212121; --surface-3:#2b2b2b;
  --border:#2f2f2f; --border-control:#4d4d4d;
  --text:#ececec; --text-2:#a4a4a4; --text-3:#949494;
  --accent:#ececec; --accent-fg:#0f0f0f;
  --stage:#0a0a0a; --danger:#f97066;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:1px solid var(--border-control);background:var(--surface-2);border-radius:var(--r-pill);padding:9px 15px;transition:background .15s,border-color .15s,color .15s}
button:hover{background:var(--surface-3);border-color:var(--text-3)}
button:disabled{opacity:.35;cursor:not-allowed}
/* Solid --text focus ring: 19.4:1 light / 13.6:1 dark, well past the 3:1
   non-text minimum that the hairline control borders themselves do not meet. */
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* 原生 select 在 macOS 上由系统绘制，会无视 border-radius —— 必须关掉
   appearance 才吃得到胶囊圆角，代价是原生箭头消失，得自己补。
   箭头用 mask 而非 background-image：mask 让它取 currentColor，
   深浅两套主题下自动跟随，不必备两份图。 */
select{appearance:none;-webkit-appearance:none;
  background:var(--surface-2);color:var(--text);border:1px solid var(--border-control);
  border-radius:var(--r-pill);padding:7px 30px 7px 14px;max-width:100%}
.select-row,.quality-label{position:relative}
.select-row::after,.quality-label::after{
  content:"";position:absolute;right:13px;top:50%;width:10px;height:10px;margin-top:-5px;
  pointer-events:none;color:var(--text-3);background:currentColor;
  -webkit-mask:var(--chevron) center/10px 10px no-repeat;
          mask:var(--chevron) center/10px 10px no-repeat}

/* 色块铺满胶囊：padding 与 border 会把颜色挤在中间，改用 inset 阴影当描边，
   它画在色块之上、不占盒内空间。原生 swatch 自带内边距与边框，一并清掉。 */
input[type=color]{padding:0;border:0;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--border-control)}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--r-pill)}
input[type=color]::-moz-color-swatch{border:0;border-radius:var(--r-pill)}
label{font-size:12px}
input[type=checkbox]{accent-color:var(--accent)}
.quiet{background:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.eyebrow{font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--text-3)}


:lang(ja){--sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","PingFang SC",sans-serif}
:lang(ko){--sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","PingFang SC",sans-serif}

/* 非中文页面：翻译完成前先不显示，免得中文一闪而过 */
.i18n-wait body{visibility:hidden}

/* 语言切换：一颗胶囊按钮 + 下拉的小菜单 */
.lang-switch{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:transparent;color:var(--text-2);font-size:12.5px;white-space:nowrap;cursor:pointer}
.lang-btn:hover{background:var(--surface-3);color:var(--text)}
.lang-btn svg{width:15px;height:15px;flex:none}
.lang-switch.compact .lang-btn{width:34px;padding:0;justify-content:center;gap:0;font:600 10px/1 var(--mono)}
.lang-switch.compact .lang-btn svg{display:none}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:90;display:flex;flex-direction:column;gap:2px;min-width:132px;padding:5px;
  border-radius:var(--r-card);background:var(--surface-2);box-shadow:0 12px 32px -12px #0006,inset 0 0 0 1px var(--border)}
.lang-menu[hidden]{display:none}
.lang-menu button{border:0;background:transparent;color:var(--text);text-align:left;padding:7px 12px;border-radius:var(--r-pill);font-size:13px;cursor:pointer;white-space:nowrap}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--surface-3);outline:none}
.lang-menu button[aria-checked=true]{background:var(--accent);color:var(--accent-fg)}
.lang-switch.up .lang-menu{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
/* 窄屏的顶栏挤：只留地球图标，语言名在 aria-label 里 */
@media(max-width:1000px){.lang-switch:not(.compact) .lang-btn{width:34px;padding:0;justify-content:center;gap:0}.lang-switch:not(.compact) .lang-btn span{display:none}}