/* Shared i2Type shell, with i2Speak identity and accessible accent ink. */
/* The i2Suite header follows the i2PDF navigation order on every page. */
.site-header .header-actions>.site-guides-link { display:inline-flex; }
.site-header .header-actions { margin-inline-start:auto; }
.type-collection-band { background:var(--accent-soft); }
.type-collection-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,32%); align-items:center; gap:36px; padding-block:34px; min-height:340px; }
.type-collection-hero h1 { margin:12px 0 16px; font-size:clamp(34px,4vw,48px); font-weight:750; line-height:1.2; letter-spacing:-1px; }
.type-collection-hero p { max-width:620px; margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
.type-collection-art { width:min(100%,280px); justify-self:center; }
.type-collection-art img { display:block; width:100%; height:auto; }
.type-directory-tabs .type-collection-link { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 18px; font-size:15px; font-weight:600; }
.type-directory-tabs .type-collection-link:hover { background:var(--canvas); }
.type-directory-tabs .type-collection-link>span { padding:1px 5px; border-radius:5px; background:var(--accent); color:white; font-size:10px; }
.type-directory-tabs .type-collection-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:1000px) { .site-header .header-inner { padding-inline:24px; gap:16px; } }
@media(max-width:800px) {
    .site-header .header-inner { padding-inline:16px; gap:12px; }
    .site-header .header-actions { gap:6px; }
    .site-header .header-menu-trigger { width:36px; height:36px; min-height:36px; justify-content:center; padding:0; border:1px solid var(--line); border-radius:50%; }
    .site-header .header-menu-trigger>span,.site-header .header-menu-trigger>bdi,.site-header .header-menu-trigger>.small-icon { display:none; }
    .site-header .appearance-picker { margin-inline-start:0; }
    .site-header .appearance-picker>summary { width:36px; height:36px; }
    .site-header .language-trigger { width:36px; height:36px; padding:0; justify-content:center; flex:none; }
    .site-header .language-trigger>span,.site-header .language-trigger>.small-icon { display:none; }
}
@media(max-width:680px) {
    .type-collection-hero { grid-template-columns:minmax(0,1fr); gap:16px; padding-block:28px 24px; text-align:center; }
    .type-collection-hero h1 { font-size:34px; }
    .type-collection-hero p { font-size:14px; }
    .type-collection-art { width:220px; }
    .type-directory-tabs .type-collection-link { font-size:13px; padding:10px 12px; }
    .site-header .header-inner { padding-inline:12px; gap:8px; }
    .site-header .header-actions { gap:4px; }
    .site-header .brand-logo { height:30px; }
}
@media(max-width:360px) { .site-header .brand-logo { height:25px; } .site-header .header-inner { gap:6px; } }

/* Keyboard shortcuts use the same footer treatment as i2Bopomo. */
.footer-keyboard-links { width:100%; justify-content:center; gap:10px; margin-bottom:6px; padding-block:20px; border-block:1px solid var(--line); font-family:var(--font-body); font-size:11px; }
.footer-keyboard-links a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 15px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-weight:500; line-height:1.4; text-decoration:none; }
.footer-keyboard-links a:hover { background:var(--canvas); color:var(--accent-readable,var(--accent)); text-decoration:none; }
.footer-keyboard-links a[aria-current] { background:var(--accent-soft); color:var(--accent-readable,var(--accent)); font-weight:600; text-decoration:none; }
.footer-keyboard-links a:focus-visible { outline-offset:-2px; }
.footer-keyboard-links .footer-more-keyboards { gap:6px; color:var(--accent-readable,var(--accent)); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 24%,var(--line)); }
.footer-keyboard-links .footer-more-keyboards:hover { background:color-mix(in srgb,var(--accent-readable,var(--accent)) 16%,var(--surface)); }
.footer-more-keyboards .icon { width:14px; height:14px; }
:root[dir="rtl"] .footer-more-keyboards .icon { transform:scaleX(-1); }

:root { --accent:#E198C9; --accent-rgb:225,152,201; --accent-soft:#FBF3F8; --accent-hover:#D489BB; --accent-readable:#85456C; --accent-ink:#30242D; }
:root[data-appearance="dark"] { --accent:#E198C9; --accent-rgb:225,152,201; --accent-soft:#322831; --accent-hover:#E8ADD5; --accent-readable:#EDB6D7; --accent-ink:#30242D; }
.primary, .primary:hover { color:var(--accent-ink); }
button .icon, .button .icon, summary .icon { color:currentColor; }
:focus-visible { outline-color:var(--accent-readable); }
.speak-keyboard-page .type-keyboard-hero-copy .eyebrow { color:var(--accent-readable); }
.speak-keyboard-page .type-keyboard-hero-art { display:flex; justify-content:center; }
.speak-keyboard-page .type-keyboard-hero-art svg { width:min(100%,380px); height:auto; }
.site-keyboard-navigation { position:relative; }
.site-keyboard-navigation > summary { list-style:none; }
.site-keyboard-navigation > summary::-webkit-details-marker { display:none; }
.site-keyboard-panel { position:absolute; right:0; top:calc(100% + 12px); z-index:40; width:290px; max-width:calc(100vw - 24px); padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px #20212820; }
.site-keyboard-panel a { display:block; padding:9px 12px; border-radius:7px; font-size:14px; }
.site-keyboard-panel a:hover, .site-keyboard-panel a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-readable); }
.site-keyboard-panel .site-keyboard-more { margin-top:6px; border-top:1px solid var(--line); border-radius:0; }
.speak-assurances { display:flex; flex-wrap:wrap; justify-content:center; gap:18px 32px; margin:0 auto 44px; color:var(--muted); font-size:13px; }
.speak-assurances span { display:flex; align-items:center; gap:8px; }
.speak-assurances .icon { width:18px; height:18px; color:var(--accent-readable); }
@media(max-width:600px) { .speak-assurances { gap:10px 20px; font-size:12px; margin-bottom:34px; } }