/*
 * CoOptimal Gaming portal readability authority
 * v6.86 RC19
 *
 * Functional interface text has a defined floor and controls/cards are allowed
 * to grow when content needs more space. Decorative HUD-only marks may remain
 * smaller where they do not carry member/admin information.
 */
:root{
  --cog-text-micro:12px;
  --cog-text-small:13px;
  --cog-text-base:15px;
  --cog-text-control:13px;
  --cog-text-card-title:20px;
  --cog-text-section:24px;
  --cog-line-tight:1.2;
  --cog-line-normal:1.45;
  --cog-control-min-h:36px;
}

/* Member portal — functional copy and controls. */
.app .main{font-size:var(--cog-text-base);line-height:var(--cog-line-normal)}
.app .main .eyebrow,
.app .main .overview .label,
.app .main .serverMeta span,
.app .main .server-filter-label,
.app .main .detail-chip small,
.app .main .whitelistUsageHead,
.app .main .whitelistPoolLine,
.app .main .toolbar-note,
.app .main .notification-item-time,
.app .main .notification-foot{font-size:var(--cog-text-micro);line-height:var(--cog-line-tight)}
.app .main .serverRegion,
.app .main .tier p,
.app .main .account-service small,
.app .main .account-service .green,
.app .main .statusPill,
.app .main .metric,
.app .main .metric b,
.app .main .detail-head p,
.app .main .modalBody,
.app .main .notification-item-message,
.app .main .titlebar p{font-size:var(--cog-text-small);line-height:1.4}
.app .main .row,
.app .main .detail-row,
.app .main .serverMeta b{font-size:14px;line-height:1.28}
.app .main .serverMeta b{overflow-wrap:anywhere;word-break:normal}
.app .main .btn,
.app .main .tab{font-size:var(--cog-text-control);line-height:1.15;min-height:var(--cog-control-min-h);height:auto;padding-top:7px;padding-bottom:7px}
.app .main .online{font-size:var(--cog-text-micro);line-height:1.1;padding:4px 7px}
.app .main .serverName{font-size:22px;line-height:1.05;overflow-wrap:anywhere}
.app .main .whitelistUsage{padding-top:8px;margin-top:8px}
.app .main .whitelistUsageHead{gap:10px}
.app .main .whitelistPoolRows{gap:6px;margin-top:7px}
.app .main .whitelistPoolLine{gap:10px;min-height:17px}
.app .main .whitelistPoolLine b{font-size:var(--cog-text-small)}
.app .main .whitelistUsage small{font-size:var(--cog-text-micro);line-height:1.25}
.app .main .serverActions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.app .main .serverActions .queue-btn{min-width:0}


/* Functional-text floor across the member portal. These selectors intentionally
   outrank legacy component rules that used 8-11px type to fit fixed geometry. */
.app .main small,
.app .main .mini-label,
.app .main .detail-card-head>span:last-child,
.app .main .dynamic-plan-empty,
.app .main .server-head-right,
.app .main .server-filter-tabs .tab small,
.app .main .server-game-filter-tabs .tab small,
.app .main .support-empty,
.app .main .support-ticket label,
.app .main .support-ticket-foot,
.app .main .diag-grid span,
.app .main .support-ticket-main small,
.app .main .support-ticket-date,
.app .main .support-ticket-status,
.app .main .support-message-head,
.app .main .support-message-body,
.app .main .subscription-billing-note,
.app .main .subscription-billing-note b,
.app .main .subscription-flow p,
.app .main .discord-alert-intro,
.app .main .discord-alert-member-copy small,
.app .main .discord-alert-member-note,
.app .main .identity-heading .green,
.app .main .identity-note,
.app .main .concept-footer,
.app .main .concept-footer a,
.app .main .concept-footer .legal,
.app .main .concept-footer .legal-sep{font-size:var(--cog-text-micro);line-height:1.4}
.app .main .support-ticket select,
.app .main .support-ticket input,
.app .main .support-ticket textarea,
.app .main .support-reply{font-size:var(--cog-text-small);line-height:1.35;min-height:var(--cog-control-min-h);height:auto}
.app .main .support-ticket textarea,
.app .main .support-reply{min-height:108px}
.app .main .plan-compare-table th,
.app .main .plan-compare-table td,
.app .main .plan-compare-table th:first-child,
.app .main .plan-compare-table td:first-child,
.app .main .plan-compare-table .compare-value{font-size:var(--cog-text-micro);line-height:1.3}
#dashboard .overview-subscription>.btn,
#dashboard .dashboard-accounts .compact-account .btn{font-size:var(--cog-text-control);min-height:34px;height:auto}
#dashboard .overview-subscription .mini-label,
#dashboard .overview-subscription small,
#dashboard .overview-subscription .overview-sub-meta,
#dashboard .overview-subscription .overview-sub-meta span,
#dashboard .overview-subscription .overview-sub-meta b,
#dashboard .dashboard-accounts .compact-account small,
#dashboard .dashboard-accounts .compact-account .green,
#dashboard .dashboard-accounts .compact-account .gold{font-size:var(--cog-text-micro);line-height:1.3}

/* Dashboard cards: never compress readable text into the old pre-whitelist geometry. */
.app .dashboard-server-network{height:auto;min-height:0}
.app .dashboard-server-network .server{height:auto;min-height:330px}
.app .dashboard-server-network .serverBody{padding:10px 11px 11px}
.app .dashboard-server-network .serverMeta{gap:8px}
.app .dashboard-server-network .serverMeta span{font-size:var(--cog-text-micro)}
.app .dashboard-server-network .serverMeta b{font-size:14px}
.app .dashboard-server-network .serverRegion{font-size:var(--cog-text-micro);line-height:1.2}
.app .dashboard-server-network .whitelistUsage{margin-top:8px;padding-top:7px}
.app .dashboard-server-network .whitelistUsageHead{font-size:var(--cog-text-micro)}
.app .dashboard-server-network .whitelistPoolRows{gap:4px}
.app .dashboard-server-network .whitelistPoolLine{font-size:var(--cog-text-micro)}
.app .dashboard-server-network .whitelistPoolLine b{font-size:var(--cog-text-micro)}
.app .dashboard-server-network .btn{font-size:var(--cog-text-control);min-height:34px;margin-top:10px}
.app .dashboard-server-network .serverMeta.lowerMeta{margin-top:12px}

/* Detail server cards grow with actions/pool rows rather than clipping them. */
.app .detail-server-grid .server{height:auto;min-height:360px}
.app .detail-server-grid .serverBody{padding:12px 14px 14px}
.app .detail-server-grid .serverRegion{font-size:var(--cog-text-small)}
.app .detail-server-grid .serverName{font-size:24px}

/* Member dashboard summary cards also grow when larger text wraps. */
.app .dashboard-overview,
.app .dashboard-accounts,
.app .dashboard-member-details,
.app .dashboard-benefits,
.app .dashboard-subscription{height:auto}
.app .dashboard-overview{min-height:310px}
.app .dashboard-accounts,
.app .dashboard-member-details{min-height:170px}
.app .dashboard-benefits,
.app .dashboard-subscription{min-height:160px}
.app .account-grid{height:auto;min-height:112px}
.app .dashboard-benefits .row{height:auto;min-height:27px;padding:5px 0}
.app .dashboard-subscription .row{height:auto;min-height:32px;padding:6px 0}

/* Admin portal — data density without 8–10px operational text. */
.admin-document{font-size:var(--cog-text-base);line-height:var(--cog-line-normal)}
.admin-document .admin-section-intro,
.admin-document .admin-hint,
.admin-document .admin-metric-note,
.admin-document .admin-system-summary small,
.admin-document .admin-system-list .row small,
.admin-document .admin-job-detail,
.admin-document .admin-job-sub div,
.admin-document .billing-test-detail,
.admin-document .notification-preview,
.admin-document .admin-inbox-item-message,
.admin-document .admin-inbox-foot,
.admin-document .admin-support-activity-item .meta,
.admin-document .admin-support-activity-item .event,
.admin-document .admin-support-discord-state,
.admin-document .revenue-mode-banner small,
.admin-document .revenue-mini .sub,
.admin-document .revenue-plan-row span,
.admin-document .revenue-transaction small{font-size:var(--cog-text-micro);line-height:1.45}
.admin-document .admin-field label,
.admin-document .admin-metric-label,
.admin-document .admin-status,
.admin-document .admin-pagination,
.admin-document .admin-editor-title,
.admin-document .admin-audit-summary,
.admin-document .admin-audit-detail,
.admin-document .discord-alert-admin-head small,
.admin-document .admin-support-ownership small,
.admin-document .billing-test-summary{font-size:var(--cog-text-micro);line-height:1.3}
.admin-document .admin-table{font-size:var(--cog-text-small);line-height:1.35}
.admin-document .admin-table th{font-size:var(--cog-text-micro);line-height:1.25}
.admin-document .admin-table td{padding:10px 9px}
.admin-document .admin-field input,
.admin-document .admin-field select,
.admin-document .admin-field textarea,
.admin-document .admin-table input,
.admin-document .admin-table select{font-size:var(--cog-text-small);line-height:1.25;min-height:var(--cog-control-min-h);height:auto;padding-top:7px;padding-bottom:7px}
.admin-document .admin-btn{font-size:var(--cog-text-micro);line-height:1.15;min-height:34px;height:auto;padding:7px 11px}
.admin-document .admin-table td.actions .admin-btn{min-height:32px;height:auto;padding:6px 9px}
.admin-document .admin-card-title{height:auto;min-height:36px;font-size:15px;line-height:1.2;padding:6px 0}
.admin-document .admin-metric-value{font-size:29px}
.admin-document .audit-event{font-size:var(--cog-text-micro);line-height:1.35;grid-template-columns:minmax(120px,auto) minmax(110px,auto) minmax(0,1fr)}
.admin-document .queue-row{font-size:var(--cog-text-small);min-height:44px}
.admin-document .admin-cap-item b{font-size:var(--cog-text-small)}
.admin-document .admin-cap-item small,
.admin-document .admin-role-note{font-size:var(--cog-text-micro);line-height:1.45}
.admin-document .admin-support-ownership b{font-size:var(--cog-text-small)}
.admin-document .admin-inbox-item-time{font-size:var(--cog-text-micro)}
.admin-document .revenue-mini .label{font-size:var(--cog-text-micro)}
.admin-document .revenue-chart-label{font-size:var(--cog-text-small)}
.admin-document .revenue-transaction .amount,
.admin-document .revenue-chart-value{font-size:var(--cog-text-small)}


/* Admin cards: readable operational data must outrank legacy 8-11px component rules. */
.admin-document .admin-card .row,
.admin-document .admin-card .row span{font-size:var(--cog-text-small);line-height:1.35}
.admin-document .admin-card small,
.admin-document .admin-card-title > span:last-child,
.admin-document .admin-card-title > .admin-status:last-child,
.admin-document .asset-note,
.admin-document .admin-asset-none,
.admin-document .admin-asset-preview span,
.admin-document .admin-footer,
.admin-document .admin-side-foot,
.admin-document .admin-brand small{font-size:var(--cog-text-micro);line-height:1.4}
.admin-document .admin-card-title > .admin-status:last-child{font-size:var(--cog-text-micro)}
.admin-document .admin-asset-preview{min-height:72px;height:auto}

/* Public sign-in/legal surfaces use the same readability floor. */
.login .sub{font-size:var(--cog-text-small)}
.login .copy{font-size:var(--cog-text-base)}
.login .status,
.login .meta,
.login .legal-links{font-size:var(--cog-text-micro);line-height:1.5}
.shell .brand span,
.shell .nav a,
.shell .eyebrow,
.shell .date,
.shell .data-table,
.shell .footer,
.shell .tag{font-size:var(--cog-text-micro)}
.shell .notice,
.shell p,
.shell ul{font-size:14px}

@media (max-width:1200px){
  .app .dashboard-server-network .server{min-height:350px}
}

@media (max-width:900px){
  .admin-document .admin-table{font-size:12.5px}
  .admin-document .admin-table th{font-size:12px}
}

@media (max-width:720px){
  :root{--cog-text-base:15px;--cog-text-small:13px;--cog-text-micro:12px;--cog-text-control:13px}
  .app #dashboard .rankMark{grid-column:auto;grid-row:auto}
  .app .sidebar .nav button .nav-label{font-size:0;line-height:1.1;letter-spacing:0;white-space:nowrap}
  .app .sidebar .nav button .nav-label:after{content:attr(data-mobile);font:500 12px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.15px}
  .app .wordmark small{font-size:12px;letter-spacing:2px}
  .app .detail-head p{display:block;font-size:13px;line-height:1.4}
  .app .dashboard-server-network .server,
  .app .detail-server-grid .server{min-height:0;height:auto}
  .app .serverActions{grid-template-columns:1fr}
  .app .serverActions .btn{width:100%}
  .admin-document .admin-side .admin-nav button:before{font-size:12px}
  .admin-document .admin-return{font-size:12px}
  .shell .hero,.shell .content{padding-left:18px;padding-right:18px}
}

/* Long dynamic content must reflow inside the component rather than cross its boundary. */
.app .dashboard-overview .big{white-space:normal;overflow-wrap:anywhere;line-height:1.05}
.app .dashboard-server-network .serverImg{height:150px}
.app .dashboard-server-network .serverIdentity{position:absolute;top:auto;bottom:10px;left:11px;right:38px;z-index:3}
.app .dashboard-server-network .serverName{font-size:20px;line-height:1.02;margin:0}
.app .dashboard-server-network .online{font-size:12px}

@media (min-width:1101px) and (max-width:1599px){
  .app .dashboard-server-network .serverGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1600px){
  .app .dashboard-server-network .serverGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
#dashboard .dashboard-accounts .compact-account .account-title-line span{font-size:var(--cog-text-micro);line-height:1.2}

/* Compact/medium desktop dashboard authority.
   The dashboard shell gained wrapper rows after the old 12/24-column rules were
   written. Keep those wrapper rows full-width, and do not force the three-part
   member overview beside Benefits until the content column is wide enough to
   preserve readable type. 1440px is the first validated side-by-side layout. */
@media (min-width:721px) and (max-width:1439px){
  #dashboard>.dashboard-layout{display:block}
  #dashboard .dashboard-top-row{grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch}
  #dashboard .dashboard-top-row>.dashboard-overview,
  #dashboard .dashboard-top-row>.dashboard-benefits-panel{width:100%;grid-column:auto}
}
@media (min-width:1101px) and (max-width:1439px){
  #dashboard .dashboard-overview{height:auto;min-height:310px}
  #dashboard .dashboard-overview .overview{height:auto;min-height:250px}
  #dashboard .dashboard-benefits-panel{height:auto;min-height:180px}
}

/* At the compact-rail breakpoint Subscription becomes a single-column layout.
   Reset both legacy explicit grid-column placements at the same breakpoint so
   the Alerts card cannot create an implicit second column and squeeze Billing. */
@media (min-width:721px) and (max-width:1100px){
  .app .subscription-flow,
  .app .subscription-alerts{grid-column:1}
}

/* RC19: Admin Servers is a vertical workflow, not a split directory/editor layout. */
.admin-document #admin-servers .admin-server-layout{grid-template-columns:repeat(12,minmax(0,1fr))}
.admin-document #admin-servers .admin-server-directory,
.admin-document #admin-servers .admin-server-editor{grid-column:1/-1}
.admin-document #admin-servers .admin-server-editor[hidden]{display:none!important}
.admin-document #admin-servers .admin-server-editor{scroll-margin-top:112px}
.admin-document #admin-servers .admin-server-table-wrap{width:100%;overflow-x:auto;overflow-y:hidden}
.admin-document #admin-servers .admin-server-table-wrap .admin-table{width:100%;min-width:1050px;table-layout:auto}
.admin-document #admin-servers .admin-server-table-wrap .admin-table th,
.admin-document #admin-servers .admin-server-table-wrap .admin-table td{white-space:normal;overflow-wrap:anywhere}
.admin-document #admin-servers .admin-editor-heading-actions{align-items:center;margin:0}
.admin-document #admin-servers .admin-server-form-grid{align-items:start}
@media (min-width:1201px){
  .admin-document #admin-servers .admin-server-form-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media (max-width:720px){
  .admin-document #admin-servers .admin-server-table-wrap .admin-table{min-width:980px}
  .admin-document #admin-servers .admin-editor-heading-actions{gap:6px}
  .admin-document #admin-servers .admin-server-editor{scroll-margin-top:132px}
  .admin-document #admin-servers .admin-server-form-grid > [style*="grid-column:span 2"]{grid-column:1/-1!important}
}

/* RC19: footer belongs to the member shell and therefore follows every member page. */
.app .main > .portal-shell-footer{width:100%;flex:0 0 auto}