/* ==========================================================================
   Supplier workspace ("studio"): dashboard, company profile studio, services,
   products, credentials, Premium, analytics and notification preferences.
   Swiss Editorial primitives only: hairlines, a 12-column split (main 1–8,
   aside 10–12), numbers as type, underline fields, one ink button per view.
   Everything is prefixed .studio-* so it never collides with other pages.
   ========================================================================== */

/* ---------- Frame -------------------------------------------------------- */
.studio { display: grid; gap: var(--s-8); }
.studio > * { min-width: 0; }

/* Page head: kicker · 40px title · grey lead, actions on the right */
.studio-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-7); }
.studio-head__text { max-width: 44rem; }
.studio-head__kicker { display: block; margin-block-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.studio-head__kicker a:hover { color: var(--ink); }
.studio-head h1 { margin: 0; }
.studio-head__lead { margin-block-start: var(--s-3); color: var(--grey-text); max-width: 40em; }
.studio-head .btn-row { flex: none; }

/* Main (cols 1–8) + aside (cols 10–12) */
.studio-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-8); align-items: start; }
.studio-split > * { min-width: 0; }
.studio-main { grid-column: 1 / span 8; display: grid; gap: var(--s-8); }
.studio-main > * { min-width: 0; }
.studio-aside { grid-column: 10 / -1; display: grid; gap: var(--s-7); }
.studio-aside--sticky { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
@media (max-width: 63.99rem) {
  .studio-main, .studio-aside { grid-column: 1 / -1; }
  .studio-aside--sticky { position: static; }
}

/* ---------- Sections ----------------------------------------------------- */
.studio-section { border-top: 1px solid var(--rule); padding-block-start: var(--s-4); }
.studio-section--ink { border-top-color: var(--ink); }
.studio-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-5); }
.studio-section__title { font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.studio-section__meta { font-size: var(--t-s); color: var(--grey-text); }
.studio-section__meta a { color: var(--ink); }
.studio-section__meta a:hover { color: var(--grey-text); }
.studio-section__lead { margin-block: calc(var(--s-3) * -1) var(--s-5); max-width: 40em; font-size: var(--t-s); color: var(--grey-text); }
.studio-label { display: block; margin-block-end: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }

/* ---------- Numbers as type --------------------------------------------- */
.studio-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); }
.studio-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.studio-kpi { display: flex; flex-direction: column; gap: 4px; padding-block-start: var(--s-3); border-top: 1px solid var(--rule); color: var(--ink); }
.studio-kpi__value { font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.studio-kpi__label { font-size: var(--t-s); color: var(--ink); }
.studio-kpi__note { font-size: var(--t-s); color: var(--grey-text); }
a.studio-kpi { transition: color 200ms var(--ease); }
a.studio-kpi:hover .studio-kpi__value, a.studio-kpi:hover .studio-kpi__label { color: var(--grey-text); }
@media (max-width: 63.99rem) { .studio-kpis, .studio-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Completeness meter: hairline track, ink fill */
.studio-meter { display: flex; align-items: center; gap: var(--s-4); }
.studio-meter__track { flex: 1; height: 4px; background: var(--rule); }
.studio-meter__fill { height: 100%; background: var(--ink); }
.studio-meter__value { font-variant-numeric: tabular-nums; }

/* Profile strength block (companies/_strength) */
.studio-strength { display: grid; gap: var(--s-4); padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.studio-strength__title { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.studio-strength__next { font-size: var(--t-s); color: var(--grey-text); }
.studio-strength__next strong { color: var(--ink); font-weight: 500; }
.studio-steps { border-top: 1px solid var(--rule); }
.studio-steps li { border-bottom: 1px solid var(--rule); }
.studio-steps a { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: var(--s-2); align-items: baseline; min-height: 44px; padding-block: 11px; font-size: var(--t-s); transition: color 200ms var(--ease); }
.studio-steps a:hover { color: var(--grey-text); }
.studio-steps span { color: var(--grey-text); font-variant-numeric: tabular-nums; }

/* ---------- Content rows (services, products) ---------------------------- */
.studio-items { border-top: 1px solid var(--rule); }
.studio-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) 7rem auto; column-gap: var(--s-5); row-gap: var(--s-2); align-items: start; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.studio-item--wide { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 12rem) 7rem auto; }
.studio-item__thumb { width: 112px; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--field); object-fit: cover; }
.studio-item__thumb--empty { display: grid; place-items: center; font-size: 12px; color: var(--grey-text); text-align: center; }
.studio-item__kicker { display: block; margin-block-end: 4px; font-size: var(--t-s); color: var(--grey-text); }
.studio-item__title { font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.studio-item__title a:hover { color: var(--grey-text); }
.studio-item__body { margin-block-start: 6px; max-width: 40em; font-size: var(--t-s); color: var(--grey-text); }
.studio-item__cell { padding-top: 0.2em; font-size: var(--t-s); }
.studio-item__cell small { display: block; color: var(--grey-text); }
.studio-item__actions { display: flex; align-items: center; gap: var(--s-5); padding-top: 0.2em; }
@media (max-width: 47.99rem) {
  .studio-item, .studio-item--wide { grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--s-4); }
  .studio-item__thumb { width: 80px; grid-row: span 3; }
  .studio-item__cell, .studio-item__actions { grid-column: 2; padding-top: 0; }
}

/* Text actions: Edit · Delete. button_to renders a form, so reset it. */
.studio-act { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-s); line-height: var(--lh-body); letter-spacing: inherit; cursor: pointer; }
.studio-act:hover { color: var(--grey-text); }
.studio-act--danger { color: var(--danger); }
.studio-act--danger:hover { color: var(--ink); }
form.button_to { display: inline; }
.studio-actions-cell { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-4); }

/* Numbered guidance list (aside) */
.studio-tips { counter-reset: tip; border-top: 1px solid var(--rule); }
.studio-tips li { display: grid; grid-template-columns: 2rem 1fr; padding-block: 12px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.studio-tips li::before { counter-increment: tip; content: counter(tip, decimal-leading-zero); color: var(--grey-text); font-variant-numeric: tabular-nums; }

/* ---------- Forms: intro column + fields --------------------------------- */
.studio-form { display: grid; }
.studio-fieldset { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); padding-block: var(--s-5) var(--s-7); border-top: 1px solid var(--rule); }
.studio-fieldset__intro { grid-column: 1 / span 4; }
.studio-fieldset__intro h2 { font-size: var(--t-m); line-height: 1.3; letter-spacing: var(--track-head); }
.studio-fieldset__intro p { margin-block-start: var(--s-2); max-width: 26em; font-size: var(--t-s); color: var(--grey-text); }
.studio-fieldset__fields { grid-column: 5 / -1; display: grid; gap: var(--s-5) var(--s-6); }
.studio-fieldset--in-main .studio-fieldset__intro { grid-column: 1 / span 4; }
.studio-fieldset--in-main .studio-fieldset__fields { grid-column: 5 / -1; }
@media (min-width: 48rem) {
  .studio-fieldset__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-fieldset__fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-fieldset__fields .field--full { grid-column: 1 / -1; }
}
@media (max-width: 63.99rem) {
  .studio-fieldset__intro, .studio-fieldset__fields { grid-column: 1 / -1; }
}
.studio-file { display: grid; gap: var(--s-3); }
.studio-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-4) var(--col-gap); }
.studio-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--field); }
.studio-thumb--contain img { object-fit: contain; padding: 8%; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.studio-thumb .studio-act { margin: 0; min-height: 36px; }
.studio-files { border-top: 1px solid var(--rule); }
.studio-files li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 52px; padding-block: 8px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.studio-files li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-files small { color: var(--grey-text); }

/* Switch rows (visibility, notifications): text left, control right */
.studio-switches { border-top: 1px solid var(--rule); }
.studio-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 64px; padding-block: 12px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.studio-switch__text { display: grid; gap: 2px; color: var(--ink); }
.studio-switch__text small { color: var(--grey-text); }
.studio-switch input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; }

/* Category checklist */
.studio-checks { display: grid; gap: var(--s-6); max-height: 28rem; overflow-y: auto; padding-block: var(--s-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.studio-checks__group > p { margin-block-end: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }
.studio-checks__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: var(--col-gap); }
.studio-checks__list label { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--t-s); color: var(--ink); cursor: pointer; }

/* Port picker (port_select_controller renders its own rows and tags) */
.studio-ports [data-port-select-target="portList"] { max-height: 16rem; overflow-y: auto; margin-block-start: var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.studio-ports [data-port-select-target="portList"] label { min-height: 36px; border-radius: 0; }
.studio-ports [data-port-select-target="countryDropdown"] { position: relative; z-index: 10; max-height: 12rem; overflow-y: auto; background: var(--paper); border-top: 1px solid var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / 0.1); }
.studio-ports [data-port-select-target="countryDropdown"] button { min-height: 40px; border-bottom: 1px solid var(--rule); }
.studio-ports [data-port-select-target="selectedTags"] { margin-block-end: var(--s-3); }
.studio-ports [data-port-select-target="selectedTags"] span.rounded-full { border-radius: var(--radius); background: var(--field); color: var(--ink); }

/* Form actions; the sticky variant sits on paper with an ink rule */
.studio-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); border-top: 1px solid var(--ink); }
.studio-actions__note { font-size: var(--t-s); color: var(--grey-text); }
.studio-actions--sticky { position: sticky; bottom: 0; z-index: 20; background: var(--scrim); }

/* Notices (listing under review / removed): flash look, no dismiss */
.studio-notice { display: grid; gap: var(--s-2); padding-block: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.studio-notice--alert { border-top-color: var(--danger); }
.studio-notice__title { font-weight: 500; }
.studio-notice--alert .studio-notice__title { color: var(--danger); }
.studio-notice p { max-width: 44em; font-size: var(--t-s); color: var(--grey-text); }
.studio-notice p strong { color: var(--ink); }
.studio-notice .btn-row { margin-block-start: var(--s-2); }

/* Profile preview (companies/show) */
.studio-preview__cover { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius); background: var(--field); }
.studio-preview__id { display: flex; align-items: flex-end; gap: var(--s-5); margin-block-start: var(--s-5); }
.studio-preview__name { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.studio-preview__tagline { margin-block-start: 4px; color: var(--grey-text); }
.studio-preview__place { margin-block-start: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }

/* ---------- Analytics ----------------------------------------------------- */
.studio-periods { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.studio-bars { display: flex; align-items: flex-end; gap: 2px; height: 14rem; border-bottom: 1px solid var(--ink); }
.studio-bars span { flex: 1 1 0; min-width: 2px; background: var(--grey); transition: background-color 200ms var(--ease); }
.studio-bars span:hover { background: var(--ink); }
.studio-bars__axis { display: flex; justify-content: space-between; margin-block-start: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }
.studio-share { border-top: 1px solid var(--rule); }
.studio-share li { display: grid; gap: 8px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.studio-share__row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-s); }
.studio-share__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-share__row strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.studio-share__bar { height: 2px; background: var(--rule); }
.studio-share__bar span { display: block; height: 100%; background: var(--ink); }
.studio-footnote { margin-block-start: var(--s-4); font-size: var(--t-s); color: var(--grey-text); max-width: 40em; }

/* ---------- Premium benefits ---------------------------------------------- */
.studio-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--rule); }
.studio-benefit { display: grid; grid-template-columns: 2.5rem 1fr; gap: 4px 0; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.studio-benefit__num { grid-row: span 2; color: var(--grey-text); font-size: var(--t-s); font-variant-numeric: tabular-nums; padding-top: 0.25em; }
.studio-benefit h2 { font-size: var(--t-m); line-height: 1.3; letter-spacing: var(--track-head); }
.studio-benefit p { max-width: 30em; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 47.99rem) { .studio-benefits { grid-template-columns: 1fr; } }

/* Tables inside the studio: text actions on the right, grey secondary line */
.studio .data-table td { vertical-align: top; }
.studio .data-table .studio-cell-main { font-size: var(--t-body); }
.studio .data-table small { display: block; color: var(--grey-text); font-size: var(--t-s); }
.studio .data-table th:last-child, .studio .data-table td:last-child { text-align: end; padding-inline-end: 0; }

/* ---------- Containment fixes -------------------------------------------- */
/* Grid children default to min-width:auto; the scrolling tab row and wide
   tables must not stretch the form or page past the viewport. */
.studio-form, .studio-form > *, .studio-form [data-controller="tabs"] { min-width: 0; }
.studio .table-wrap { position: relative; }
/* The first fieldset under the tab bar doesn't need its own rule. */
.studio .tabs + [data-tabs-target="panel"] > .studio-fieldset:first-child,
.studio [data-tabs-target="panel"] > .studio-fieldset:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 47.99rem) {
  .studio-head .btn-row { flex: 1 1 100%; }
  .studio-head .btn-row .btn { flex: 1 1 auto; }
}
/* Two equal sections side by side, with a real gutter between them */
.studio-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-7); align-items: start; }
@media (max-width: 63.99rem) { .studio-pair { grid-template-columns: 1fr; } }
/* A list that opens a fieldset shares the fieldset's rule instead of drawing a second one. */
.studio-fieldset__fields > .studio-switches:first-child { border-top: 0; margin-block-start: -12px; }
/* On phones, tables keep readable columns and scroll inside .table-wrap. */
@media (max-width: 47.99rem) { .studio .data-table { min-width: 38rem; } }

/* ==========================================================================
   Familiar app layer (layout-1440 pass): a workspace tab row, KPI tiles and
   bordered side panels, so the studio reads like a normal SaaS dashboard
   while keeping the two inks, hairlines and 6px radius.
   ========================================================================== */

/* Workspace sub-navigation sits tight under the site header */
.studio-nav { margin-block: calc(var(--s-6) * -1) calc(var(--s-4) * -1); }
.studio-nav .tabs__list { gap: var(--s-5); }
.studio-nav .tabs__tab { min-height: 48px; }

/* KPI tiles: hairline-bordered panels with the number as the headline */
.studio-kpi { padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); gap: 6px; }
.studio-kpi__value { order: 2; }
.studio-kpi__label { order: 1; color: var(--grey-text); }
.studio-kpi__note { order: 3; }
a.studio-kpi:hover { border-color: var(--ink); }
a.studio-kpi:hover .studio-kpi__value, a.studio-kpi:hover .studio-kpi__label { color: inherit; }

/* Side panels: strength, tips and other aside blocks get a soft frame */
.studio-aside > .studio-strength,
.studio-aside > .studio-section { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); }
.studio-aside > .studio-strength { border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--field) 45%, var(--paper)); }
.studio-strength__title { font-size: var(--t-m); line-height: 1.3; }
.studio-aside .studio-tips, .studio-aside .studio-steps { border-top: 0; }
.studio-aside .studio-tips li:last-child, .studio-aside .studio-steps li:last-child { border-bottom: 0; }

/* Main sections: title row with a hairline under it, like a card header */
.studio-main > .studio-section, .studio-section--ink { border-top: 0; padding-block-start: 0; }
.studio-main > .studio-section > .studio-section__head { padding-block-end: var(--s-3); border-bottom: 1px solid var(--ink); margin-block-end: 0; }

@media (max-width: 47.99rem) {
  .studio-nav { margin-block: calc(var(--s-5) * -1) 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .studio-kpi { padding: var(--s-3) var(--s-4) var(--s-4); }
}

/* A framed side panel; a strength block inside it drops its own frame */
.studio-panel { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); background: color-mix(in srgb, var(--field) 45%, var(--paper)); }
.studio-panel > .studio-strength { padding: 0; border: 0; background: none; }
/* Content directly under a section's title row gets breathing room (tables stay flush) */
.studio-main > .studio-section > .studio-section__head + :not(.table-wrap, .studio-items) { margin-block-start: var(--s-5); }
/* Narrow asides (1024px) must not be widened by a nowrap button */
.studio-panel { min-width: 0; }
.studio-panel .btn { white-space: normal; text-align: center; }