/* Header account control: mirrors .bosian-language-toggle (theme multilingual.css). */
.bsm-account-menu {display:flex;align-items:center}
.bsm-account-switcher {position:relative}
.bsm-account-toggle {
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:0;border-radius:10px;
    background:transparent;color:#dce2ed;cursor:pointer;
}
.bsm-account-toggle:hover,
.bsm-account-toggle[aria-expanded="true"] {background:#293241;color:#fff}
.bsm-account-toggle:focus-visible {outline:2px solid #b4bef5;outline-offset:2px}
.bsm-avatar {
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:50%;
    background:#414973;color:#fff;font:600 15px/1 system-ui,sans-serif;
}
.bsm-account-panel {
    display:none;position:absolute;top:100%;right:0;z-index:200;
    min-width:180px;padding:8px;border:1px solid #454d60;border-radius:12px;
    background:#242834;box-shadow:0 12px 32px #0006;
}
.bsm-account-switcher[data-open="true"] .bsm-account-panel,
.bsm-account-switcher:not([data-enhanced]):focus-within .bsm-account-panel {display:block}
.bsm-account-panel ul {display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.bsm-account-panel li {display:block;margin:0;padding:0;width:100%}
.bsm-account-panel a,
.bsm-account-name {
    display:block;padding:12px 14px !important;border-radius:8px;
    text-decoration:none;font-size:16px;line-height:1.4;color:#f4f6fc !important;white-space:nowrap;
}
.bsm-account-panel a:hover,
.bsm-account-panel a:focus-visible {background:#414d66;color:#fff !important}
.bsm-account-name {color:#a9d6f5 !important;background:#303849;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.bsm-mobile-name {display:block;padding:0.6em 0;color:#a7a9b4}

/* Dialog */
.bsm-dialog {
    box-sizing:border-box;width:min(420px, calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;
    margin:auto;padding:32px 28px 24px;border:1px solid #34363f;border-radius:16px;
    background:#1c1d23;color:#f5f5f7;box-shadow:0 24px 64px #000a;
}
.bsm-dialog::backdrop {background:rgba(5, 6, 9, .72)}
.bsm-dialog [hidden] {display:none !important}
.bsm-close {
    position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;color:#a7a9b4;cursor:pointer;
}
.bsm-close:hover {background:#293241;color:#fff}
.bsm-close:focus-visible {outline:2px solid #b4bef5;outline-offset:2px}
.bsm-title {margin:0 32px 12px 0;font-size:22px;line-height:1.35;color:#f5f5f7}
.bsm-dialog h3 {margin:0 0 8px;font-size:17px;color:#f5f5f7}
.bsm-intro {margin:0 0 20px;font-size:16px;line-height:1.7;color:#d1d2da}
.bsm-google {display:flex;justify-content:center;min-height:44px;margin:0 0 20px}
/* The page declares color-scheme: dark; without this the GIS iframe paints an opaque white box. */
.bsm-google iframe {color-scheme:light}
.bsm-muted {color:#a7a9b4;font-size:15px;line-height:44px}
.bsm-fine {margin:0;font-size:14px;line-height:1.7;color:#a7a9b4}
.bsm-fine a {color:#b4bef5}
.bsm-nickname-form label {display:block;margin:0 0 8px;font-size:15px;color:#d1d2da}
.bsm-row {display:flex;gap:8px}
.bsm-row input {
    flex:1;min-width:0;box-sizing:border-box;height:44px;padding:0 12px;
    border:1px solid #34363f;border-radius:10px;background:#141519;color:#f5f5f7;font-size:16px;
}
.bsm-row input:focus {outline:2px solid #b4bef5;outline-offset:1px;border-color:transparent}
.bsm-button {
    flex:none;height:44px;padding:0 18px;border:0;border-radius:10px;
    background:#b4bef5;color:#0c0d10;font-size:16px;font-weight:600;cursor:pointer;
}
.bsm-button:hover {background:#d6dcff}
.bsm-button:disabled {opacity:.5;cursor:not-allowed}
.bsm-button:focus-visible {outline:2px solid #fff;outline-offset:2px}
.bsm-danger {margin:28px 0 0;padding:20px 0 0;border-top:1px solid #34363f}
.bsm-danger p {margin:0 0 12px;font-size:15px;line-height:1.7;color:#a7a9b4}
.bsm-check {display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;font-size:15px;line-height:1.5;color:#d1d2da}
.bsm-check input {margin-top:3px}
.bsm-button--danger {background:#d92332;color:#fff}
.bsm-button--danger:hover {background:#f0404e}
.bsm-message {margin:16px 0 0;font-size:15px;line-height:1.6;color:#ff8f99}
.bsm-message:empty {display:none}
/* In-place sign-in status (replaces the Google button while signing in) */
.bsm-status {
    display:flex;align-items:center;justify-content:center;gap:12px;
    min-height:44px;margin:0 0 20px;padding:10px 16px;border-radius:12px;
    background:#252a3d;color:#c9d1ff;font-size:19px;font-weight:700;line-height:1.4;text-align:center;
}
.bsm-status[hidden] {display:none}
.bsm-status[data-state="done"] {background:#1d3328;color:#a6f0bf}
.bsm-spinner {
    flex:none;width:20px;height:20px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;
    animation:bsm-spin .8s linear infinite;
}
.bsm-status[data-state="done"] .bsm-spinner {display:none}
@keyframes bsm-spin {to {transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce) {.bsm-spinner {animation-duration:2.4s}}
/* Comment area: logged-out call to action and the signed-in line */
.bsm-comment-login {
    margin:8px 0 0;padding:24px;border:1px solid #34363f;border-radius:12px;background:#1c1d23;text-align:center;
}
.bsm-comment-login p {margin:0 0 16px;font-size:17px;line-height:1.7;color:#d1d2da}
.bsm-comment-login-button {height:auto;min-height:48px;max-width:100%;padding:11px 24px;line-height:1.4}
.bsm-logged-in-as {font-size:15px;color:#a7a9b4}
.bsm-logged-in-as strong {color:#f5f5f7}
.bsm-logged-in-as a {color:#b4bef5}
/* The dark theme forces every <button> to the input colours with !important; filled actions opt out (same pattern as design-system.css). */
html[data-sumaji-theme="dark"] .bsm-button {background-color:#b4bef5 !important;color:#0c0d10 !important;border-color:transparent !important}
html[data-sumaji-theme="dark"] .bsm-button:hover {background-color:#d6dcff !important}
html[data-sumaji-theme="dark"] .bsm-button--danger {background-color:#d92332 !important;color:#fff !important}
html[data-sumaji-theme="dark"] .bsm-button--danger:hover {background-color:#f0404e !important}
/* Article action row (like, save) under the byline */
.bsm-actions {display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
html[data-sumaji-theme="dark"] .bsm-action {
    display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;
    border:1px solid #34363f !important;border-radius:999px;background-color:transparent !important;
    color:#d1d2da !important;font-size:15px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s;
}
html[data-sumaji-theme="dark"] .bsm-action:hover {border-color:#555966 !important;color:#fff !important}
html[data-sumaji-theme="dark"] .bsm-action[aria-pressed="true"] {border-color:#b4bef5 !important;color:#d6dcff !important}
.bsm-action:focus-visible {outline:2px solid #b4bef5;outline-offset:2px}
.bsm-action svg {flex:none}
.bsm-action[aria-pressed="true"] .bsm-fill,
#bosian-like-jump[aria-pressed="true"] .bsm-fill {fill:currentColor}
.bsm-action-count {font-variant-numeric:tabular-nums;color:#a7a9b4}
.bsm-action[aria-pressed="true"] .bsm-action-count {color:inherit}
.bsm-action-count[hidden] {display:none}
@media (prefers-reduced-motion: reduce) {.bsm-action {transition:none}}

/* Short failure notice for like/save */
.bsm-toast {
    position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom, 0px));z-index:300;transform:translate(-50%, 12px);
    max-width:calc(100% - 32px);padding:10px 16px;border-radius:10px;background:#242834;border:1px solid #454d60;
    color:#f5f5f7;font-size:15px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.bsm-toast[data-show="true"] {opacity:1;transform:translate(-50%, 0)}
.bsm-bookmarks-login {max-width:560px;margin:8px auto 64px}