/* ============================================================================
   Skin B pieces for the "managed" pages: seller profile, seller dashboard,
   store dashboard, news dashboard, league dashboard. Built on
   css/layout-b.css; every rule is either an mgb- class (only in Skin B
   markup) or scoped under html[data-skin="b"], so classic view is untouched.
   ========================================================================= */

/* photo-first listing card, the same look as the marketplace grid */
.mgb-title{font-size:14px;font-weight:600;line-height:1.3;color:var(--c-text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;}
.mgb-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--c-text-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* a small status tag at the end of a row */
/* managed pages draw the row-end tag a little smaller than the shared .b-tag--lg */
html[data-skin="b"] .b-tag--lg{min-height:26px;padding:0 10px;font-weight:700;letter-spacing:.8px;}

/* a row whose text wraps (reviews, post snippets) */
.mgb-wrap{align-items:flex-start;}
.mgb-wrap .b-main .b-sub{white-space:normal;}
.mgb-text{font-size:13.5px;line-height:1.5;color:var(--c-text-secondary);margin-top:6px;white-space:normal;overflow-wrap:anywhere;}
.mgb-stars{color:var(--c-yellow);font-size:12px;letter-spacing:1px;}

/* row actions: a pill and a small ghost pill side by side */
.mgb-acts{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.mgb-acts .b-act{min-height:34px;padding:0 12px;font-size:11px;}

/* star input for rating a seller */
/* the seller rating stars are a touch bigger than the shared .b-stars */
html[data-skin="b"] .b-stars{gap:4px;}
html[data-skin="b"] .b-stars button{font-size:32px;min-width:44px;min-height:44px;}
.mgb-field{width:100%;min-height:84px;padding:12px 16px;background:var(--c-surface-3);border:1px solid var(--c-border);border-radius:18px;color:var(--c-text-primary);font:16px/1.5 var(--font-body);resize:vertical;outline:none;box-sizing:border-box;margin-bottom:12px;}
.mgb-field:focus{border-color:var(--c-yellow);}

/* a second pill beside the first in the yellow block */
.mgb-pills{align-items:center;} /* on top of the shared .b-pills */

/* identity row extras */
.mgb-kind{display:inline-flex;align-items:center;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--c-surface-3);color:var(--c-text-secondary);font:700 10px var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;}
.b-me h1 svg{vertical-align:middle;margin-left:6px;}

/* --------------------------------------------------------------------------
   Classic edit forms (store + news dashboards) shown under the Skin B layout.
   Every input keeps its id, so the page's save code is unchanged.
   ------------------------------------------------------------------------ */
html[data-skin="b"] .nd-shell{max-width:560px;padding:0 16px calc(env(safe-area-inset-bottom) + 110px);}
html[data-skin="b"] .nd-shell > .nd-hero,
html[data-skin="b"] .nd-shell > .nd-stats,
html[data-skin="b"] .nd-shell > .nd-section:not(.nd-edit){display:none!important;}
html[data-skin="b"] .nd-edit{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:28px;padding:20px;}
/* the Skin B layout already heads this card with a b-sec label */
html[data-skin="b"] .nd-edit .nd-section-title{display:none;}
html[data-skin="b"] .nd-edit label{font-family:var(--font-mono)!important;font-size:11px!important;color:var(--c-text-muted)!important;}
html[data-skin="b"] .nd-edit input[type=text],
html[data-skin="b"] .nd-edit input[type=number],
html[data-skin="b"] .nd-edit select,
html[data-skin="b"] .nd-edit textarea{min-height:48px;padding:12px 16px!important;border-radius:18px!important;font-size:16px!important;background:var(--c-surface-3)!important;border:1px solid var(--c-border)!important;color:var(--c-text-primary)!important;box-sizing:border-box;}
html[data-skin="b"] .nd-edit input:focus,
html[data-skin="b"] .nd-edit select:focus,
html[data-skin="b"] .nd-edit textarea:focus{border-color:var(--c-yellow)!important;outline:none;}
html[data-skin="b"] .nd-edit .nd-av{border-radius:50%;}
html[data-skin="b"] .nd-edit #use-my-location{min-height:48px;border-radius:999px!important;background:var(--c-surface-3)!important;color:var(--c-text-primary)!important;border:1px solid var(--c-border)!important;}
html[data-skin="b"] .nd-edit button[type=submit]{width:100%;min-height:56px;border-radius:28px!important;background:var(--sk-yellow-fill,var(--c-yellow))!important;color:var(--sk-on-yellow,#111214)!important;font-size:15px!important;letter-spacing:1.4px!important;}
html[data-skin="b"] .nd-edit button[type=submit] + span{display:block;text-align:center;margin-top:8px;}
html[data-skin="b"] .nd-edit form > div:last-child{flex-direction:column;align-items:stretch!important;}

/* --------------------------------------------------------------------------
   League dashboard (manager tools): restyled in place, its module owns #root.
   ------------------------------------------------------------------------ */
html[data-skin="b"] .ld-shell{max-width:560px;padding:var(--sp-4) 16px calc(env(safe-area-inset-bottom) + 110px);}
html[data-skin="b"] .ld-hero{background:none;border:0;padding:4px 4px 0;margin-bottom:18px;}
html[data-skin="b"] .ld-hero#ql-wizard,
html[data-skin="b"] .ld-hero#cf-full{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:28px;padding:20px;}
html[data-skin="b"] .ld-name{font-size:30px;letter-spacing:.3px;margin-bottom:10px;}
html[data-skin="b"] .ld-chip{min-height:30px;padding:0 12px;border-radius:999px;background:var(--c-surface-3);border:1px solid var(--c-border);color:var(--c-text-secondary);font-size:10.5px;}
html[data-skin="b"] .ld-chip.y{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent;color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .ld-stats{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:28px;padding:16px 8px;gap:0;}
html[data-skin="b"] .ld-stat{background:none;border:0;padding:0;}
html[data-skin="b"] .ld-stat-num{font-size:24px;color:var(--c-text-primary);}
html[data-skin="b"] .ld-stat-lbl{font-size:10px;}
/* sticky under the nav: it needs the page colour behind it, not glass */
html[data-skin="b"] .ld-tabs{background:var(--sk-bg,var(--c-black));border:0;padding:8px 0;gap:8px;border-radius:0;}
html[data-skin="b"] .ld-tab{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface-3);color:var(--c-text-secondary);font:600 13px var(--font-body);letter-spacing:0;text-transform:none;}
html[data-skin="b"] .ld-tab.on{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent;color:var(--sk-on-yellow,#111214);font-weight:700;}
html[data-skin="b"] .blk,
html[data-skin="b"] .ov-card{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:28px;padding:20px;}
html[data-skin="b"] .blk-title,
html[data-skin="b"] .ov-card-lbl{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.6px;color:var(--c-text-muted);}
html[data-skin="b"] .row{background:none;border:0;border-bottom:1px solid var(--c-border);border-radius:0;padding:14px 4px;margin:0;min-height:60px;}
html[data-skin="b"] .row:last-child{border-bottom:0;}
html[data-skin="b"] .row-mark{width:42px;height:42px;}
html[data-skin="b"] .row-title{font-size:14.5px;font-weight:600;}
html[data-skin="b"] .btn-sm{min-height:40px;padding:0 16px;border-radius:999px;font-size:11.5px;}
html[data-skin="b"] .btn-y{background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .btn-g{background:var(--c-surface-3);border:1px solid var(--c-border);color:var(--c-text-primary);}
html[data-skin="b"] .btn-r{border-color:transparent;background:var(--sk-red-soft,#FBDEDF);color:var(--sk-red-ink,#7C1D21);}
html[data-skin="b"] .add-form{background:var(--c-surface-3);border:0;border-radius:22px;padding:16px;}
html[data-skin="b"] .form-row input,
html[data-skin="b"] .form-row select,
html[data-skin="b"] .form-row textarea{min-height:48px;padding:12px 16px;border-radius:18px;font-size:16px;background:var(--c-surface-3);border:1px solid var(--c-border);}
html[data-skin="b"] .add-form .form-row input,
html[data-skin="b"] .add-form .form-row select,
html[data-skin="b"] .add-form .form-row textarea{background:var(--c-surface-2);}
html[data-skin="b"] .form-row input:focus,
html[data-skin="b"] .form-row select:focus,
html[data-skin="b"] .form-row textarea:focus{border-color:var(--c-yellow);}
html[data-skin="b"] .form-row input[type=file]{min-height:0;padding:10px 12px;}
html[data-skin="b"] .form-row input[type=checkbox],
html[data-skin="b"] .form-row input[type=radio]{min-height:0;padding:0;}
html[data-skin="b"] .pill.claimed{background:var(--sk-green-soft,#D8F7E6);color:var(--sk-green-ink,#0A5233);}
html[data-skin="b"] .pill.unclaimed{background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .ld-modal-card{border-radius:28px;padding:22px;}
@media (max-width:520px){html[data-skin="b"] .ld-modal-card{border-radius:28px 28px 0 0;}}
html[data-skin="b"] .ld-modal-title{font-size:20px;}