/* Shared control rhythm across reading, accounts, dialogs and the forum. */
:root{--control-font:14px;--control-line:1.4;--control-weight:600;--control-height:44px;--control-gap:12px;--control-padding:20px}
button,input,select,textarea{font-family:inherit}
body[data-layout] :is(.primary-button,.outline-button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);height:auto;padding:11px var(--control-padding);box-sizing:border-box;max-width:100%;font-family:inherit;font-size:var(--control-font);font-weight:var(--control-weight);line-height:var(--control-line);letter-spacing:0;text-align:center;white-space:normal;overflow-wrap:break-word;text-decoration:none;border-radius:999px;vertical-align:middle}
body[data-layout] :is(.text-button,.forum-share-trigger,.forum-join-link,.reader-read-more){font-family:inherit;font-size:var(--control-font);font-weight:var(--control-weight);line-height:var(--control-line);letter-spacing:0}
body[data-layout] :is(.forum-tab,.segmented button,.reading-tabs button){font-family:inherit;font-size:var(--control-font);font-weight:var(--control-weight);line-height:var(--control-line);letter-spacing:0;min-height:40px;box-sizing:border-box}
body[data-layout] :is(.forum-actions,.forum-share-actions,.heading-actions,.about-hero-actions,.directory-primary){display:flex;flex-wrap:wrap;align-items:center;gap:var(--control-gap)}
body[data-layout] :is(.forum-actions,.forum-share-actions,.heading-actions,.about-hero-actions,.directory-primary)>:is(button,a){margin:0}
body[data-layout] .drawer-account{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:24px 12px}
body[data-layout] .drawer-account strong{font-size:15px;font-weight:600;line-height:1.5;margin:0}
body[data-layout] .drawer-account small{font-size:13px;line-height:1.6;margin:-4px 0 4px}
body[data-layout] .drawer-account>:is(button,.primary-button,.outline-button){width:100%;margin:0;min-height:46px;padding:12px 16px;font-size:14px;line-height:1.4;font-weight:600}
body[data-layout] .drawer #drawer-nav>:is(.drawer-utility,.drawer-home){min-height:46px;padding:11px 12px;gap:12px;font-size:14px;font-weight:500;line-height:1.5;margin-block:2px}
body[data-layout] .drawer-bottom{display:flex;flex-direction:column;gap:4px;padding-block:20px}
body[data-layout] .drawer-bottom a{display:flex;align-items:center;min-height:44px;padding:10px 12px;margin:0;font-size:14px;font-weight:500;line-height:1.5}
body[data-layout] .modal>:is(.primary-button,.outline-button)+:is(.primary-button,.outline-button){margin-top:12px}
body[data-layout] .forum-share-trigger{padding:10px 16px;min-height:40px}
@media(max-width:600px){:root{--control-padding:18px}body[data-layout] .forum-redesign .forum-tab{font-size:13px;padding:10px 5px;min-height:44px}body[data-layout] .forum-share-trigger{font-size:13px;padding:9px 13px}body[data-layout] .segmented{gap:8px;flex-wrap:wrap}body[data-layout] .segmented button{padding:10px 12px}}

/* Mobile and installed PWA header: equal circles and a balanced account pill. */
@media(max-width:1100px){
 html body[data-layout] .app-header .header-tools{gap:6px;align-items:center}
 html body[data-layout] .app-header .header-tools :is(.shelf-link,.language-toggle){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:0 0 36px;width:36px;min-width:36px;max-width:36px;height:36px;min-height:36px;padding:0;aspect-ratio:1;border:2px solid var(--line);border-radius:50%;font-size:12px;font-weight:600;line-height:1;letter-spacing:0}
 html body[data-layout] .app-header .shelf-link svg{width:18px;height:18px;flex:none}
 html body[data-layout] .app-header .header-tools .account-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:0 0 auto;width:auto;min-width:86px;height:36px;min-height:36px;padding:0 12px;border:2px solid var(--line);border-radius:12px;font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap}
}
@media(max-width:380px){
 html body[data-layout] .app-header .header-inner{padding-inline:8px;gap:3px}
 html body[data-layout] .app-header .header-tools{gap:4px}
 html body[data-layout] .app-header .brand>span{font-size:15px}
 html body[data-layout] .app-header .header-tools .account-button{min-width:80px;padding-inline:9px}
}
@media(max-width:350px){html body[data-layout] .app-header .brand>span{display:none}}

/* Forum navigation: consistent touch targets for both one- and two-line labels. */
body[data-layout] .forum-redesign .forum-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:8px;padding:16px 0}
body[data-layout] .forum-redesign .forum-tab{display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;min-width:0;min-height:48px;padding:12px 16px;border:1px solid transparent;border-radius:12px;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:0;text-align:center;text-wrap:balance;white-space:normal;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
body[data-layout] .forum-redesign .forum-tab[aria-current="page"]{border-color:var(--text);background:var(--text);color:var(--bg)}
@media(max-width:600px){body[data-layout] .forum-redesign .forum-tabs{gap:6px;padding:14px 0}body[data-layout] .forum-redesign .forum-tab{min-height:56px;padding:9px 5px;font-size:12px;line-height:1.4;border-radius:12px}}
@media(prefers-reduced-motion:reduce){body[data-layout] .forum-redesign .forum-tab{transition:none}}

@media(max-width:360px){body[data-layout] .forum-redesign .forum-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-layout] .forum-redesign .forum-tab{font-size:13px;padding:10px 8px;min-height:48px}}

body[data-layout] .forum-redesign .forum-tabs{position:relative;isolation:isolate}
body[data-layout] .forum-redesign .forum-tab{position:relative;z-index:1;transition:color 240ms ease,border-color 240ms ease}
body[data-layout] .forum-redesign .forum-tab[aria-current="page"]{background:transparent;border-color:transparent}
.forum-tab-indicator{position:absolute;left:0;top:0;z-index:0;pointer-events:none;background:var(--text);border-radius:12px}
.indicator-ready .forum-tab-indicator{transition:transform 320ms cubic-bezier(.22,1,.36,1),width 320ms cubic-bezier(.22,1,.36,1),height 320ms cubic-bezier(.22,1,.36,1)}
body[data-layout] .install-app-button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;min-height:46px;margin:2px 0;border:0;background:transparent;color:inherit;font:inherit;font-size:14px;font-weight:500;line-height:1.5;text-align:left;cursor:pointer;border-radius:9px}
.install-app-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;font-size:22px;border-bottom:1.5px solid currentColor;border-radius:2px}
.install-app-button:hover{background:var(--soft)}.install-app-steps{padding-left:22px;margin:20px 0 0}.install-app-steps li{padding-left:4px;margin:0 0 16px;line-height:1.7}
@media(prefers-reduced-motion:reduce){.indicator-ready .forum-tab-indicator{transition:none}}

/* Account display name and membership actions. */
.account-name-display{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.account-name-value{font-size:20px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
body[data-layout] .account-name-edit{flex-shrink:0;min-height:40px;padding:8px 16px;font-size:14px}
.account-name-form{margin:0}.account-name-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.account-name-form input{width:100%;box-sizing:border-box}
.account-name-form[hidden],.account-name-display[hidden]{display:none}
.account-name-feedback:empty{display:none}.account-name-feedback{margin:14px 0 0;line-height:1.5;color:var(--text)}
.account-signout{margin-top:18px}
.account-membership{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line,#333)}
.account-membership-level{display:flex;align-items:center;gap:12px;line-height:1.5;max-width:100%}.account-membership-label{color:var(--muted)}
.account-membership-badge{flex-shrink:0;font-size:14px;border:1px solid var(--line,#333);border-radius:20px;padding:6px 12px;white-space:nowrap}
body[data-layout] .account-upgrade{margin:0;min-height:44px;min-width:0;padding:11px 18px;white-space:normal}
@media(max-width:600px){.account-membership-level{gap:10px}.account-membership-badge{font-size:13px;padding:6px 10px}body[data-layout] .account-upgrade{font-size:13px;padding:10px 12px}}

/* Five forum destinations remain fully visible on narrow screens. */
/* Keep the forum navigation in one swipeable row on phones and tablets. */
@media(max-width:900px){
 body[data-layout] .forum-redesign .forum-tabs{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:12px 0;-webkit-overflow-scrolling:touch}
 body[data-layout] .forum-redesign .forum-tabs::-webkit-scrollbar{display:none}
 body[data-layout] .forum-redesign .forum-tab{flex:0 0 auto;min-height:44px;padding:12px 18px;font-size:13px;white-space:nowrap;text-wrap:nowrap}
}

/* iOS focuses small text fields by zooming. Keep touch entry at a readable size
   without disabling the user's viewport/pinch zoom. */
@media(max-width:1100px),(pointer:coarse){
 html body[data-layout] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]),textarea,select,[contenteditable=true],[contenteditable=plaintext-only]){font-size:16px!important}
}

/* Site-wide focus appearance: keep resting borders, without added rings. */
html body :is(:focus,:focus-visible),
html body :is(:focus,:focus-visible)::before,
html body :is(:focus,:focus-visible)::after{
 outline:none!important;
 box-shadow:none!important;
}
html body :focus-within,
html body .forum-field:focus-within .forum-file-button{outline:none!important}
html body .modal input:not([type=checkbox]):focus,
html body .modal textarea:focus{border-color:var(--line)!important}

/* Direct annual and monthly subscription choices. */
.membership-period-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
body[data-layout] .membership-period-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;height:47px;min-height:47px;box-sizing:border-box;padding:4px 8px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:background-color .18s ease}
body[data-layout] .membership-period-option.is-annual{background:var(--text);color:var(--bg);border-color:var(--text)}
.membership-period-option span{font-size:12px;font-weight:500;line-height:16px}
.membership-period-option strong{font-size:16px;font-weight:650;line-height:20px;letter-spacing:-.025em}
.membership-period-option:hover{filter:brightness(.94)}
@media(max-width:400px){.membership-period-options{gap:8px}.membership-period-option span{font-size:12px}.membership-period-option strong{font-size:16px}}

/* Pinned forum entry uses the same footprint as the homepage news cards. */
.feed-grid .feed-card.home-forum-card {position:relative;isolation:isolate;overflow:hidden;background:#38232a;color:#fff;}
.home-forum-link {position:absolute;inset:0;display:block;color:#fff!important;text-decoration:none!important;}
.home-forum-video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;}
.home-forum-link::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 35%,rgba(41,20,28,.8) 66%,#38232a 100%);pointer-events:none;}
.home-forum-logo {position:absolute;top:18px;left:16px;width:min(64%,280px);height:auto;z-index:1;filter:drop-shadow(0 1px 4px #0006);pointer-events:none;}
.home-forum-copy {position:absolute;bottom:0;left:0;right:0;z-index:1;padding:16px;}
.home-forum-label {display:block;font-size:11px;font-weight:600;line-height:1.4;color:#fff;opacity:.9;}
.feed-grid .home-forum-copy h3 {color:#fff;margin:8px 0 7px;font-size:17px;line-height:1.24;font-weight:700;letter-spacing:-.2px;}
.home-forum-copy p {margin:0;color:#fff;font-size:14px;line-height:1.4;opacity:.92;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.home-forum-link:hover h3 {text-decoration:underline;text-underline-offset:3px;}

/* Keep homepage discovery tools available without pushing the feed below the fold. */
.home-discovery {margin:8px 0 18px;min-width:0;}
.home-discovery-toggles {display:flex;align-items:center;gap:10px;}
.home-discovery-toggle {display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:42px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.home-discovery-toggle svg {flex:none;transition:transform 200ms ease;}
.home-discovery-toggle[aria-expanded="true"] svg {transform:rotate(180deg);}
.home-discovery-toggle[aria-expanded="true"] {background:var(--soft);}
.home-discovery-panel[hidden] {display:none!important;}
.home-discovery-panel:not([hidden]) {padding-top:12px;animation:home-discovery-open 180ms ease-out;}
#main .home-discovery .discovery-topics {margin:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);}
#main .home-discovery .discovery-toolbar {margin:0;}
@keyframes home-discovery-open {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:650px){
 body[data-view="home"] .app-layout {padding-top:10px;}
 body[data-view="home"] #main>.page-heading {margin:0;padding:0 0 6px;}
 body[data-view="home"] #main>.page-heading h1 {font-size:28px;line-height:1.2;margin:0;letter-spacing:-.6px;}
 .home-discovery {margin:6px 0 12px;}
 .home-discovery-toggles {gap:8px;}
 .home-discovery-toggle {flex:1;min-width:0;min-height:40px;padding:8px 12px;font-size:13px;}
 body[data-view="home"] .feed-grid {gap:12px;}
 body[data-view="home"] .feed-grid>.feed-card:nth-child(-n+2) {height:224px;min-height:224px;}
 body[data-view="home"] .feed-grid>.feed-card:nth-child(-n+2) h3 {font-size:16px;line-height:1.25;-webkit-line-clamp:2;margin:5px 0;}
 body[data-view="home"] .feed-grid>.feed-card:nth-child(-n+2) .feed-card-content {padding:12px;}
 body[data-view="home"] .feed-grid>.feed-card:nth-child(-n+2) .feed-card-content>p {font-size:12px;line-height:1.35;margin-top:5px;}
 .home-forum-logo {top:12px;left:12px;width:min(56%,210px);}
 .home-forum-copy {padding:12px;}
 .home-forum-copy p {font-size:12px;line-height:1.35;-webkit-line-clamp:2;}
 .home-forum-label {font-size:10px;}
}
@media(prefers-reduced-motion:reduce){.home-discovery-toggle svg{transition:none}.home-discovery-panel:not([hidden]){animation:none}}