/* =============================================================================
   glass.css — 全站玻璃质感的设计变量和工具类

   玻璃只用在浮层（侧边栏、标题栏、弹窗、下拉、toast），不用在内容（卡片、输出条目、
   画布节点）。每一层模糊都吃 GPU，输出列表里的条目绝对不能加。

   透明度三档由 html 的 data-glass 决定：clear / 默认 standard / tinted。
   --glass-alpha 的下限是算出来的，不要凭观感调低：玻璃后面是纯黑（浅色主题）或纯白
   （深色主题）时，--glass-text-dim 也要有 4.5:1。tests/browser/_browser_glass.js 会核对。
   ============================================================================= */
:root{
  --glass-tint:255 255 255;
  --glass-alpha:.80;
  --glass-alpha-solid:.92;                  /* 内容滚到下面时，浮层换成这个 */
  --glass-blur:24px;
  --glass-saturate:180%;
  --glass-edge:rgb(0 0 0 / .12);            /* 外圈细描边，把玻璃和背后的内容分开 */
  --glass-highlight:rgb(255 255 255 / .55); /* 顶部内侧高光 */
  --glass-shadow:0 12px 40px rgb(15 23 42 / .10);
  --glass-solid:#f7f8fa;                    /* 退回实色时用 */
  --glass-text:#15181e;
  --glass-text-dim:#39404e;
  /* 页面底色上一层很淡的色彩，玻璃才有东西可透 */
  --page-wash:radial-gradient(900px 640px at 0 0,rgb(15 108 189 / .13),transparent 70%),
              radial-gradient(800px 600px at 100% 100%,rgb(124 92 255 / .08),transparent 70%);

  --radius-modal:24px;
  --radius-card:20px;
  --radius-control:12px;
  --radius-tag:6px;
  --radius-pill:999px;

  --ease-spring:cubic-bezier(.32,.72,0,1);
  --dur-spring:280ms;
  --press-scale:.97;

  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
}
:root[data-glass="clear"]{--glass-alpha:.70}
:root[data-glass="tinted"]{--glass-alpha:.90}

:root[data-theme="dark"]{
  --glass-tint:28 28 32;
  --glass-alpha:.84;
  --glass-alpha-solid:.95;
  --glass-edge:rgb(0 0 0 / .50);
  --glass-highlight:rgb(255 255 255 / .12);
  --glass-shadow:0 16px 48px rgb(0 0 0 / .50);
  --glass-solid:#1c1c20;
  --glass-text:#f0f2f5;
  --glass-text-dim:#c9ced6;
  --page-wash:radial-gradient(900px 640px at 0 0,rgb(76 141 255 / .16),transparent 70%),
              radial-gradient(800px 600px at 100% 100%,rgb(124 92 255 / .10),transparent 70%);
}
:root[data-theme="dark"][data-glass="clear"]{--glass-alpha:.76}
:root[data-theme="dark"][data-glass="tinted"]{--glass-alpha:.93}

/* 工具类：背后可能有内容滚过的浮层用 .glass，已经滚到下面时加 .glass-strong。
   写成 :root .glass 是为了盖过各弹出层自己的 .setw、.pmenu 这类同级规则。
   文字变量在玻璃里换成对比度算过的那组，弹出层里的现有规则不用动。 */
:root .glass,:root .glass-strong{
  --text:var(--glass-text);--text2:var(--glass-text-dim);
  --dim:var(--glass-text-dim);--dim2:var(--glass-text-dim);
  --d-text:var(--glass-text);--d-text2:var(--glass-text-dim);--d-text3:var(--glass-text-dim);
  --dd-text:var(--glass-text);--dd-dim:var(--glass-text-dim);
  border-color:transparent;
  background:rgb(var(--glass-tint) / var(--glass-alpha));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:0 0 0 .5px var(--glass-edge),inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
  color:var(--glass-text);
}
:root .glass-strong{background:rgb(var(--glass-tint) / var(--glass-alpha-solid))}

/* 可点击控件的按压反馈 */
.press{transition:transform var(--dur-spring) var(--ease-spring)}
.press:active{transform:scale(var(--press-scale))}

/* ---- 退回实色 ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root .glass,:root .glass-strong{background:var(--glass-solid)}
}
@media (prefers-reduced-transparency:reduce){
  :root .glass,:root .glass-strong{
    background:var(--glass-solid);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}
@media (prefers-contrast:more){
  :root{--glass-edge:rgb(0 0 0 / .55);--glass-text:#000;--glass-text-dim:#15181e;--glass-alpha:.94;--glass-alpha-solid:.97}
  :root[data-glass]{--glass-alpha:.94}
  :root[data-theme="dark"]{--glass-edge:rgb(255 255 255 / .45);--glass-text:#fff;--glass-text-dim:#f0f2f5;--glass-alpha:.96;--glass-alpha-solid:.98}
  :root[data-theme="dark"][data-glass]{--glass-alpha:.96}
}
@media (prefers-reduced-motion:reduce){
  :root{--ease-spring:linear;--dur-spring:120ms;--press-scale:1}
}

/* 卡片：连续曲率的圆角，浏览器不支持时就是普通圆角；按下时微微缩小 */
@supports (corner-shape:squircle){
  .card,.oitem,.libcard,.libbox,.arkc-picker-card,.arkc-video-card,.arkc-context-card,.hask,.hask-box,.hentry,.hwork{corner-shape:squircle}
}
/* iOS 27 质感：卡片顶部一道内侧高光，投影柔和，能点的卡片悬停时轻轻抬起 */
.card,.libcard,.libbox,.arkc-video-card,.arkc-context-card{
  box-shadow:inset 0 1px 0 var(--glass-highlight),var(--card-shadow,0 8px 24px rgb(15 23 42 / .06))}
.libcard:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--glass-highlight),var(--card-shadow-hi,0 14px 36px rgb(15 23 42 / .1))}
.card,.oitem,.libcard{transition:box-shadow var(--dur-spring) var(--ease-spring),
  border-color .15s,transform var(--dur-spring) var(--ease-spring)}
.oitem:active,.libcard:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .oitem:active,.libcard:active,.libcard:hover{transform:none}
}

/* ---- 确认框：胶囊按钮、弹簧入场，代替浏览器自带的弹窗，见 ark-dialog.js ---- */
.ark-alert-back{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgb(0 0 0 / .28);opacity:0;transition:opacity 180ms ease;font-family:var(--font-ui)}
.ark-alert-back.show{opacity:1}
.ark-alert{box-sizing:border-box;width:min(340px,100%);padding:22px 20px 16px;border-radius:calc(var(--radius-modal) + 6px);
  text-align:center;transform:scale(1.06);transition:transform var(--dur-spring) var(--ease-spring)}
.ark-alert-back.show .ark-alert{transform:none}
.ark-alert h2{margin:0;font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.ark-alert p{max-height:40vh;margin:8px 0 0;overflow:auto;color:var(--glass-text-dim);font-size:13.5px;line-height:1.5;
  white-space:pre-line;overflow-wrap:anywhere}
.ark-alert input{width:100%;height:40px;margin-top:14px;padding:0 14px;box-sizing:border-box;border:0;outline:none;
  border-radius:var(--radius-pill);background:rgb(127 127 127 / .16);color:var(--glass-text);font:inherit;font-size:14px}
.ark-alert input:focus{box-shadow:0 0 0 2px var(--accent)}
.ark-alert-actions{display:flex;gap:10px;margin-top:18px}
.ark-alert-actions button{flex:1;min-width:0;height:44px;padding:0 12px;border:0;border-radius:var(--radius-pill);
  background:rgb(127 127 127 / .16);color:var(--glass-text);font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  transition:transform var(--dur-spring) var(--ease-spring),filter .15s}
.ark-alert-actions button:hover{filter:brightness(.96)}
.ark-alert-actions button:active{transform:scale(var(--press-scale))}
.ark-alert-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ark-alert-actions .primary{background:var(--accent);color:#fff;font-weight:600}
.ark-alert-actions .danger{background:var(--err,#d92d20);color:#fff;font-weight:600}

/* ---- 下拉，见 ark-select.js ---- */
.ark-sel-native{position:absolute!important;width:1px!important;min-width:0!important;height:1px!important;
  padding:0!important;border:0!important;opacity:0;pointer-events:none}
.ark-sel{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;
  min-width:96px;max-width:100%;height:34px;padding:0 12px;border:0;border-radius:var(--radius-control);
  background:rgb(127 127 127 / .14);color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;
  transition:transform var(--dur-spring) var(--ease-spring)}
.ark-sel:active{transform:scale(var(--press-scale))}
.ark-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ark-sel:disabled{opacity:.5;cursor:default}
.ark-sel span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ark-sel::after{content:"";flex:none;width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  opacity:.6;transform:rotate(45deg)}
.ark-sel-menu{position:fixed;z-index:2147482000;box-sizing:border-box;max-width:calc(100vw - 16px);padding:6px;overflow:auto;
  border-radius:var(--radius-card);animation:ark-pop var(--dur-spring) var(--ease-spring)}
.ark-sel-row{padding:8px 12px;border-radius:var(--radius-control);font-size:13.5px;white-space:nowrap;cursor:pointer}
.ark-sel-row.hot,.ark-sel-row:hover{background:rgb(127 127 127 / .16)}
.ark-sel-row.on{color:var(--accent);font-weight:600}
@keyframes ark-pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ark-sel-menu{animation:none}}