/* ===================================================================== central sizes (owner, 25 Oct 2026)
   One set of heights and spaces for the whole site, so the same kind of thing is the same size everywhere.
   Loaded last; the values follow DESIGN-SPEC (buttons 44 / 36, fields 44, card gap 20 / 14 on phones). */
:root{
 --h-ctl:44px;    /* a field, a select, a standard button */
 --h-ctl-lg:48px; /* the sign-in page, and the main button of a phone sheet */
 --h-ctl-sm:36px; /* a small button in a card or a row, a filter chip, a small icon button */
 --h-bar:40px;    /* the top bar's controls and the usual icon buttons */
 --h-row:56px;    /* a list row with one line: settings, switches, a choice in a list */
 --h-row-2:76px;  /* a row with a title and a line under it */
 --h-fact:44px;   /* a fact row: label · value */
 --h-chip:24px;   /* a status chip */
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
}

/* ---- buttons */
.topbar .fx-live,#logout,.topbar :is(.w-bell,.w-gear,#theme-toggle){min-height:var(--h-bar);height:var(--h-bar)}
#accounts-refresh,.page-heading .w-icon-btn{width:var(--h-bar);height:var(--h-bar);min-height:var(--h-bar)}
/* account cards: small action buttons on a computer; on a phone they stay full-width at the standard height for a thumb */
@media (min-width:801px){:is(#hub-rows,#accounts-list) .w-acct-actions>button,:is(#hub-rows,#accounts-list) .w-acct-sub button{min-height:var(--h-ctl-sm);height:var(--h-ctl-sm)}}
:is(.ops-account,.sec-card,.line-card,.team-card,.member-card,.ea-release,.warn-card) :is(button.primary,button.secondary,button.danger,a.secondary):not(.sec-card form>button){min-height:var(--h-ctl-sm)}
.sec-card form>button{min-height:var(--h-ctl)}
button.w-eye,.eaa-tool{width:var(--h-ctl-sm);height:var(--h-ctl-sm);min-height:var(--h-ctl-sm)}
.fx-backtest-link,.w-chip,#page-backtest .w-bt-sys>button{min-height:var(--h-ctl-sm)}
#catalog-use,.w-more-action{min-height:var(--h-ctl)}
.w-ea-cta .primary,#ea-cta-go{min-height:var(--h-ctl-lg)}
.fxc-choice-btn{min-height:var(--h-row-2)}

/* ---- fields */
#help-search{min-height:var(--h-ctl)}
select.w-frame{min-height:var(--h-ctl-sm);height:var(--h-ctl-sm)}

/* ---- status chips: one height, the text in the middle */
:is(.pill,.tag,.w-state,.w-acct-state,.w-type,.slot-pill,.care-tag,.w-ea-risk,.w-ea-state,.member-tags span){display:inline-flex;align-items:center;min-height:var(--h-chip);padding-top:0;padding-bottom:0;line-height:1.2}

/* ---- rows */
.health-row{min-height:var(--h-fact);align-items:center;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.help-status .health-row{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.w-acct-row,.w-acct-info .w-acct-row{min-height:var(--h-fact)}
#page-settings .w-row,#page-settings .w-row-d>summary{min-height:var(--h-row);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.ntf-prefs fieldset>label.switch{min-height:var(--h-row);padding-top:var(--sp-2);padding-bottom:var(--sp-2);align-items:center}
:is(.w-ea-setup,.w-catalog-risk) .w-mode,.fxn-account,#alerts-fields>.w-chan{min-height:var(--h-row-2)}

/* the minimum-level choice is a row of the list like the switch under it: its name on the left, the select on the right */
.ntf-prefs fieldset>label:not(.switch):has(>select){display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--h-row);margin:var(--sp-3) 0 0;padding:7px var(--sp-2) 7px 18px;border:1px solid var(--line);border-bottom:0;border-radius:var(--r-inner) var(--r-inner) 0 0;background:var(--surface);font:500 14px/1.3 var(--font-head);color:var(--head)}
.ntf-prefs fieldset>label:not(.switch):has(>select)>select{flex:0 1 300px;width:auto;min-width:0;margin:0;min-height:var(--h-bar);height:var(--h-bar)}
.ntf-prefs fieldset>label:not(.switch):has(>select)+label.switch{margin-top:0;border-top:1px solid var(--line);border-radius:0 0 var(--r-inner) var(--r-inner)}

/* ---- the sign-out card on the settings page: its rows fill it; a hidden first row leaves no line on the next */
#page-settings>.w-list:nth-child(4 of .w-list)>:not([hidden]){flex:1}
.w-list>[hidden]:first-child+*{border-top:0}

/* ---- places where an older, weightier rule set its own height */
#members-list .member-card>button{min-height:var(--h-ctl-sm)}
.content .ops-alert>:is(button,.secondary){min-height:var(--h-ctl-sm)}
#page-backtest :is(.w-bt-systems button,#backtest-tabs>button){height:var(--h-ctl-sm)}
.w-icon-btn{width:var(--h-bar);height:var(--h-bar)}
#members-list .member-tags .tag,.w-acct2 .w-acct-state{min-height:var(--h-chip)}
#alerts-fields>.w-chan{padding-top:12px;padding-bottom:12px}
.eaa-eye,#alerts-email-test,#deals-export,.eaa-tab,#deals-prev,#deals-next{min-height:var(--h-ctl-sm);height:var(--h-ctl-sm)}

/* ---- one line between rows, never two, and none at a box's edge (lines.py) */
.health-row{border-bottom:0}
.help-status .health-row:first-child{border-top:0}
.w-event+.w-event{border-top:0}
.fxn-headrow+.fxn-empty{border-top:0}
.help-status .health-row{border-bottom:0}
@media (max-width:800px){#accounts-list .w-acct2 .w-acct-facts>span:nth-child(-n+2){border-top:0}}
.care-edit{min-height:var(--h-ctl-sm)}
/* the home-page tab's switches stand side by side: one height, the name at the top, the switch at the bottom */
.welcome-form>label.switch{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--sp-2)}

/* ---- phones: the "removed accounts" link sits under the account card in its own space, never pulled up onto the
   card's buttons (they wrap to two rows when there is no account yet) */
@media (max-width:800px){#hub-archived{margin:0;align-self:center}.w-acct-block{padding-bottom:var(--sp-5,20px)}}
/* account rows on a tablet: the name leaves room for the demo / real chip beside it, as on a computer */
@media (min-width:801px){#hub-rows .w-acct-head h3{padding-right:84px}}
/* phones: the account card's two buttons one under the other, both the card's width */
@media (max-width:800px){.w-acct-block .w-block-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}.w-acct-block .w-block-actions>button{width:100%;margin:0}}

/* ---- phones and tablets (mobile pass, 25 Oct 2026) */
.w-acct2 .w-acct-sub>button{min-height:var(--h-ctl-sm)}
.w-filters,.care-filters{row-gap:var(--sp-3)}
@media (max-width:800px){
 /* the rows of one list keep one height on a phone, though a long name wraps to two lines */
 .ntf-prefs fieldset>label.switch,.ntf-prefs fieldset>label:not(.switch):has(>select){min-height:66px}
 #alerts-fields>.w-chan{min-height:86px}
 .fxn-account{min-height:94px}
}
@media (max-width:800px){.ntf-prefs fieldset>label:not(.switch):has(>select){white-space:nowrap}.ntf-prefs fieldset>label:not(.switch):has(>select)>select{flex:1 1 auto;max-width:62%}}

/* ---- brand marks, one place: LINE's own mark and a group chat, for every link that goes to LINE (owner, 25 Oct 2026) */
:root{--mark-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314zM19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629z'/%3E%3C/svg%3E");--mark-group:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 2.5h10a3 3 0 0 1 3 3v5.5a3 3 0 0 1-3 3H8.2L4.6 16.6a.5.5 0 0 1-.85-.36V14A3 3 0 0 1 .5 11V5.5a3 3 0 0 1 3-3z'/%3E%3Cpath d='M18 7.6h2.5a3 3 0 0 1 3 3V16a3 3 0 0 1-3 3v2.2a.5.5 0 0 1-.85.36L16.2 19H11a3 3 0 0 1-2.6-1.5h5.1a4.5 4.5 0 0 0 4.5-4.5z'/%3E%3C/svg%3E")}
.help-line .help-ic:before{width:26px;height:26px;-webkit-mask-image:var(--mark-line);mask-image:var(--mark-line)}
.help-group .help-ic:before{-webkit-mask-image:var(--mark-group);mask-image:var(--mark-group)}
.w-more-mark.z,.w-more-mark.line,:root[data-theme="dark"] .w-more-mark.z{position:relative;background:var(--line-green);color:#fff}
.w-more-mark.z:before,.w-more-mark.line:before{content:'';position:absolute;inset:6px;padding:0;border-radius:0;background:#fff;-webkit-mask:var(--mark-line) center/contain no-repeat;mask:var(--mark-line) center/contain no-repeat}
/* the More page's tiles show no arrow, even the one with a count after it */
.w-more-tile:not(.w-more-link)>.wi:not(:first-child){display:none}
/* Home's one-line account rows keep a 6px grid gap for their own three rows; the notices under them (slot, the reason a
   start was refused, a new MT5 password) and the line that says why stand 12px apart, as on every other card (27 Oct 2026) */
@media (min-width:1181px){
 #hub-rows .w-acct2>:is(.w-acct-why,.slot-note,.setup-notice,.license-check-panel,.portfolio-notice,.portfolio-password){margin-top:var(--sp-1)}
}

/* ---- the EA and settings dialog (owner, 28 Oct 2026: "จัดเรียงใหม่"): each part of the form 20px under the one above,
   the part inside it 16px, a title 10px over what it names, a note and its button 12px apart (the dialog is the shared
   #hub-status-dialog sheet, whose own rule puts its buttons 8px down) */
.w-pick>.hint+.w-pick-title{margin-top:var(--sp-4)}
.w-pick>:is(.w-sizing,.w-brakes){margin-top:var(--sp-5)}
.w-pick .w-sizing>.w-pick-title:not(:first-child),.w-pick .w-sizing .w-opts>legend{margin-top:var(--sp-4)}
.w-pick .w-brakes>.w-pick-title{margin-bottom:2px}
#hub-status-dialog.w-pick>button.full{margin-top:var(--sp-3)}
.w-pick>.w-guardian{margin-top:var(--sp-5);padding-top:var(--sp-4)}
.w-pick .w-guardian>.hint{margin:var(--sp-2) 2px}
.w-pick .w-guardian>.w-warn{margin:var(--sp-2) 0 0}
#hub-status-dialog.w-pick .w-guardian>button.full{margin-top:var(--sp-3)}
/* an EA with its own sizing door: the door's name reads as the field under the part's title */
.w-pick .w-own-size>.w-pick-title{margin:0 0 var(--sp-2);font:500 13.5px/1.3 var(--font-body);color:var(--w-text2)}
/* the two lot choices of a sizing door, one under the other on a phone: 12px apart, not 30 */
.w-pick .w-modes{row-gap:0}
/* the team page's "ต้องใช้ 2FA" switch (owner, 28 Oct 2026): the toggle beside its words, then its note, then the button */
label.switch.team-2fa{justify-content:flex-end;margin-top:var(--sp-2);padding:var(--sp-2) 0}
.team-2fa+.hint{margin:0}
.team-2fa+.hint+button{margin-top:var(--sp-4)}
