/* QueryTend design tokens — single source for the public site and the app.
   Type scale: 12 / 14 / 16 / 18 / 24 / 32 / 40. Weights: 400 / 500 / 700. Radii: 6 / 10 / 14 / pill. */
:root{
  /* type */
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","PingFang SC","Microsoft YaHei",Meiryo,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:24px;--fs-2xl:32px;--fs-3xl:40px;
  --lh-tight:1.4;--lh-ui:1.6;--lh-body:1.85;
  --w-regular:400;--w-medium:500;--w-bold:700;
  /* color */
  --ink:#1f2a3d;--ink-2:#45526a;--muted:#5f6b80;--line:#e3e8f0;--line-2:#d3dae6;
  --paper:#fff;--tint:#f5f7fb;--tint-blue:#eef2fd;
  --blue:#365dd6;--blue-600:#2b4fbf;--blue-100:#dfe7fb;
  --green:#1f7a5c;--green-50:#e9f6f0;--amber:#94600f;--amber-50:#fbf3e3;--red:#b0473f;--red-50:#fcecea;
  --series-1:#7d97e3;--series-2:#e5b46d;--decline:#d9776d;
  /* shape and space */
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:72px;--s-9:96px;
  /* dark surfaces (code blocks, closing band) */
  --code-bg:#111a2b;--code-bar:#192233;--code-line:#2a3550;--code-line-2:#33405c;--code-text:#dfe6f5;--code-muted:#9fb0cf;--code-ok:#bfe6d4;--on-dark:#c8d1e3;--chip:#eef1f6;
  /* semantic type roles: same role = same size on site and app */
  --t-display:var(--fs-3xl);--t-page:var(--fs-xl);--t-section:var(--fs-xl);--t-card:var(--fs-lg);--t-title-sm:var(--fs-md);--t-label:var(--fs-sm);--t-caption:var(--fs-xs);
  --shadow:0 1px 2px #1f2a3d0d,0 8px 28px #1f2a3d14;
  --focus:0 0 0 2px #fff,0 0 0 4px var(--blue);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--w-regular) var(--fs-md)/var(--lh-body) var(--font);color:var(--ink);letter-spacing:.01em}
/* font shorthands reset font-feature-settings, so apply palt to every element in Japanese */
:lang(ja),:lang(ja) *{font-feature-settings:"palt" 1!important}
:lang(zh-CN){--font:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif}
[hidden]{display:none!important}
.nw{white-space:nowrap}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-weight:var(--w-bold);line-height:var(--lh-tight);text-wrap:balance;word-break:auto-phrase}
p,li,dd,td{word-break:auto-phrase;text-wrap:pretty}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;background:#fff;padding:8px;z-index:20}.skip:focus{top:6px}
/* shared components */
.icon,.ico-s{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-s{width:16px;height:16px;vertical-align:-3px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:10px 22px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;color:var(--ink);font:var(--w-bold) var(--fs-sm)/var(--lh-tight) var(--font);cursor:pointer;white-space:nowrap;text-decoration:none}
.button:hover{border-color:var(--blue);text-decoration:none}
.button.primary{background:var(--blue);border-color:var(--blue);color:#fff}.button.primary:hover{background:var(--blue-600)}
.button.small{min-height:36px;padding:6px 16px;font-size:var(--fs-sm)}
.button:disabled,.button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.button .icon,.button .ico-s{width:16px;height:16px}
.text-button{border:0;background:none;padding:0;color:var(--blue);font:var(--w-medium) var(--fs-sm)/var(--lh-tight) var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-1)}
.tag,.badge{display:inline-flex;align-items:center;gap:var(--s-1);font:var(--w-medium) var(--fs-xs)/var(--lh-ui) var(--font);border-radius:var(--r-sm);padding:2px 8px;background:var(--chip);color:var(--ink-2);white-space:nowrap}
.tag.blue,.badge.blue{background:var(--blue-100);color:var(--blue)}.tag.green,.badge.green{background:var(--green-50);color:var(--green)}.tag.amber,.badge.amber{background:var(--amber-50);color:var(--amber)}.tag.red,.badge.red{background:var(--red-50);color:var(--red)}
.diff{display:inline-block;min-width:34px;text-align:center;border-radius:var(--r-sm);padding:0 6px;font:var(--w-bold) var(--fs-xs)/var(--lh-ui) var(--font)}.diff.easy{background:var(--green-50);color:var(--green)}.diff.mid{background:var(--amber-50);color:var(--amber)}.diff.hard{background:var(--red-50);color:var(--red)}.diff.none,.diff:empty{color:var(--muted)}
.trend.up,.tr.up{color:var(--green)}.trend.down,.tr.down{color:var(--red)}
.notice{display:flex;gap:var(--s-4);align-items:center;background:var(--amber-50);border-radius:var(--r-md);padding:var(--s-4);color:var(--amber);font-size:var(--fs-sm);margin:var(--s-4) 0 var(--s-5)}.notice p{margin-top:2px}.notice .button{margin-left:auto;flex:none}
.notice.blue{background:var(--tint-blue);color:var(--blue-600)}.notice.green{background:var(--green-50);color:var(--green)}
table{border-collapse:collapse;width:100%;background:#fff;font-size:var(--fs-sm)}
th{font:var(--w-medium) var(--fs-xs)/var(--lh-ui) var(--font);color:var(--muted);background:var(--tint);text-align:left;padding:var(--s-3) var(--s-4);white-space:nowrap}
td{padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);vertical-align:top;line-height:var(--lh-ui)}
td small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
.table,.table-wrap{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:#fff}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;font-size:var(--fs-sm)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;color:#fff;background:var(--ink);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:var(--lh-ui);z-index:40;box-shadow:var(--shadow)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
b,strong{font-weight:var(--w-bold)}
/* caption-size text uses the UI line height on both surfaces */
small,.small,.hint,.result-note,.inline-source,.mk-label,.section-label,.crumbs,.quota,.check-site p,.report-head p,.finding summary p,.finding-line p,.key-row p,.limitations,.design-footer,figcaption,td small{line-height:var(--lh-ui)}
/* interaction details shared by site and app */
.button,.text-button,a,.feature,.tag,.lang a,.lang-switch button,.sub-tabs a,input,select,textarea{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
.button:active:not(:disabled){transform:translateY(1px)}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:var(--ink-2)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
input[aria-invalid=true]{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-50)!important}
.field-error{font-size:var(--fs-sm);color:var(--red);margin-top:var(--s-2)}

.button.loading{pointer-events:none;opacity:.75}.button.loading::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html{scroll-behavior:smooth}[id]{scroll-margin-top:80px}
::selection{background:var(--blue-100)}
