/* neverlogoff/hub.css — /me/hub.
   Logical properties only (RTL-ready). 360–430 px: one column, section tabs. ≥ 1100 px: two columns of panels.
   Touch targets ≥ 44 px. Nothing here may cause horizontal scroll: long URLs wrap (overflow-wrap:anywhere). */
.hb-main { inline-size: min(1600px, 100%); margin-inline: auto; padding-inline: 0.75rem; padding-block-end: 3rem; box-sizing: border-box; }
.hb-main * { box-sizing: border-box; min-inline-size: 0; }
[hidden] { display: none !important; }
.top .mark { display: inline-flex; align-items: center; min-block-size: 44px; }
.skip { min-block-size: 44px; }
.hb-hero h1 { margin-block: 0.75rem 0.25rem; }
.hb-status { min-block-size: 1.5em; color: #3d4757; }
.hb-address { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; overflow-wrap: anywhere; }
.hb-address a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; color: #2d649f; }
.hb-sub { font-weight: 500 !important; }
.fine { color: #5b6475; font-size: 0.9rem; }
.mono { font-family: ui-monospace, "Geist Mono", Consolas, monospace; font-size: 0.85rem; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; cursor: pointer; min-block-size: 44px; min-inline-size: 44px; border-radius: 10px; border: 1px solid #1d2433; background: #1d2433; color: #fff; padding-block: 0.4rem; padding-inline: 0.9rem; }
button.ghost { background: transparent; color: #1d2433; border-color: #cfd5de; }
button.small { font-size: 0.9rem; }
button.icon { padding-inline: 0; inline-size: 44px; }
button.danger { color: #a02323; }
button:disabled { opacity: 0.45; cursor: default; }
input, select, textarea { font: inherit; min-block-size: 44px; padding-block: 0.35rem; padding-inline: 0.6rem; border: 1px solid #cfd5de; border-radius: 10px; background: #fff; max-inline-size: 100%; }
textarea { inline-size: 100%; resize: vertical; }
input[type="color"] { inline-size: 64px; padding: 0.2rem; }
.hb-field { display: grid; gap: 0.25rem; margin-block: 0.4rem; flex: 1 1 12rem; }
.hb-field input:not([type="checkbox"]):not([type="color"]), .hb-field select { inline-size: 100%; }
.hb-check { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 44px; }
.hb-check input { inline-size: 22px; block-size: 22px; min-block-size: 0; }
.hb-row { display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: end; }

.hb-tabs { display: flex; gap: 0.4rem; margin-block: 0.5rem; position: sticky; inset-block-start: 0; z-index: 3; background: var(--bg, #fafafa); padding-block: 0.25rem; }
.hb-tabs button { flex: 1; background: #fff; color: #1d2433; border-color: #cfd5de; padding-inline: 0.4rem; }
.hb-tabs button[aria-pressed="true"] { background: #1d2433; color: #fff; }
.hb-grid { display: grid; gap: 1rem; }
.hb-panel { background: #fff; border: 1px solid #e3e6eb; border-radius: 14px; padding: 1rem; }
.hb-panel h2 { margin-block: 0 0.5rem; font-size: 1.15rem; }
.hb-panel:not(.on) { display: none; }
@media (min-width: 1100px) {
  .hb-tabs { display: none; }
  .hb-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .hb-panel:not(.on) { display: block; }
}

.hb-box { border: 1px solid #e3e6eb; border-radius: 12px; padding: 0.25rem 0.75rem; margin-block: 0.75rem; }
.hb-box > summary { min-block-size: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }

.hb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hb-link { border: 1px solid #e3e6eb; border-radius: 12px; padding: 0.5rem; display: grid; gap: 0.35rem; }
.hb-link.featured { border-color: #3573b8; border-width: 2px; }
.hb-link .top-row { display: flex; align-items: center; gap: 0.5rem; }
.hb-link .ttl { font-weight: 600; flex: 1; overflow-wrap: anywhere; }
.hb-link .url { font-size: 0.85rem; color: #5b6475; overflow-wrap: anywhere; }
.hb-link .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #eef2f7; color: #3d4757; }
.tag.warn { background: #fff4d6; color: #6b4a00; }
.hb-link .acts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hb-link .shortline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.85rem; overflow-wrap: anywhere; }
.hb-link .ico { color: #3573b8; flex: none; }
.hb-implist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-size: 0.9rem; overflow-wrap: anywhere; }

.hb-stats { display: grid; gap: 0.75rem; }
.hb-stat { border: 1px solid #e3e6eb; border-radius: 12px; padding: 0.6rem; }
.hb-stat h3 { margin: 0 0 0.25rem; font-size: 1rem; overflow-wrap: anywhere; }
.hb-bars { display: flex; align-items: flex-end; gap: 2px; block-size: 64px; margin-block: 0.4rem; }
.hb-bars span { flex: 1; background: #3573b8; border-radius: 2px 2px 0 0; min-block-size: 1px; }
.hb-bars span.lt { background: repeating-linear-gradient(45deg, #b8c6d8 0 3px, #e6ecf3 3px 6px); }
.hb-bars span.zero { background: #e3e6eb; }
.hb-stat table { inline-size: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hb-stat td, .hb-stat th { text-align: start; padding-block: 0.15rem; border-block-end: 1px solid #f0f2f5; }
.hb-stat details summary { min-block-size: 44px; display: flex; align-items: center; cursor: pointer; }

.hb-accts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hb-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; border: 1px solid #e3e6eb; border-radius: 12px; padding: 0.5rem; }
.hb-acct .who { flex: 1 1 10rem; overflow-wrap: anywhere; }
.hb-acct .who b { display: block; }
.hb-acct .who a { display: inline-flex; align-items: center; min-block-size: 44px; color: #2d649f; }
.badge { font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.badge.ok { background: #1f6f3d; color: #fff; }
.badge.no { border: 1px solid #cfd5de; color: #4a5361; }
.hb-code { font-family: ui-monospace, Consolas, monospace; background: #eef2f7; padding: 0.5rem; border-radius: 8px; overflow-wrap: anywhere; }

.hb-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0.5rem; margin-block: 0.5rem; }
.hb-theme { display: grid; gap: 0.35rem; text-align: start; padding: 0.6rem; border-radius: 12px; border: 2px solid #cfd5de; min-block-size: 88px; }
.hb-theme[aria-checked="true"] { border-color: #1d2433; outline: 2px solid #1d2433; outline-offset: 1px; }
.hb-theme .sw { display: flex; gap: 0.25rem; }
.hb-theme .sw i { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }

.hb-dialog { border: 1px solid #cfd5de; border-radius: 14px; max-inline-size: min(32rem, 92vw); }
.hb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }