/* per-page polish: workspace-settings
   Scoped exclusively to structures in workspace-settings.html.
   Highest-priority items: mobile stacking for Folders&Policies table,
   invite row, member table; consistent badge neutralisation.
*/

/* CANON sec 10  -  section h2 = 22 / 640 / -.02em. Override the proto's 17px
   inline `.sct .sh h2 { font-size:17px }` to canon. */
.lay .sct .sh h2 {
  font-size: 22px !important;
  font-weight: 640 !important;
  letter-spacing: -.02em !important;
}

/* CANON sec 12.1  -  content-TOC active = paper bg + shadow-sm (same as sec 12 rail). */
.lay .toc a.on {
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 560;
}
.lay .toc a.on svg {
  opacity: 1;
  color: var(--accent);
}
.lay .toc a.dgr {
  color: var(--negative) !important;
}
.lay .toc a.dgr:hover {
  background: color-mix(in srgb, var(--negative) 8%, transparent) !important;
}

/* Workspace identity card in sidebar -- */
.tcx {
  background: var(--surface-3) !important;
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tcx .n {
  font-weight: 620;
  letter-spacing: -.01em;
}
.tcx .h {
  color: var(--ink-mute);
}

/* -- Form field focus: override inline .fr input:focus { border-color:var(--ink) } -- */
.fr input:focus,
.fr select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}
.fr input,
.fr select {
  border: 1px solid var(--line-strong) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-radius: var(--r-md) !important;
}

/* -- Members table: role badges: neutralise green owner badge -- */
/* .rl.ow is already steel via the .badge.green catch-all in space-ds.css,
   but tighten it here with explicit values */
.mt .rl {
  border-color: var(--line-strong);
  color: var(--ink-soft);
  background: transparent;
}
.mt .rl.ow {
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}

/* -- Folders & policies: badge neutralisation -- */
/* The 'review req.' badge uses .badge-accent ,  keep as steel (already handled by DS).
   The 'blocked' badge uses inline negative color ,  keep as-is (it's semantic danger).
   The 'restricted' badge uses inline steel styles ,  keep as-is. */

/* 2A: the proto ships BROKEN placeholder data in the Folders & policies
   MEMBERS column -- the 5th <td> literally contains only ", " for
   Marketing/Engineering/Ops and a bare "4" for Internal (no avatar /
   name list is being clipped; the orphan IS the proto content). Proto
   DOM is frozen, so the only clean fix is to remove the broken column
   entirely on ALL viewports: hide the 5th <th>/<td> and zero its
   <colgroup><col> so the remaining 4 columns (Folder / Access /
   Public release / Default visibility) reflow to fill the table with
   NO orphan comma or number, desktop AND mobile. Scoped to
   .sct#folders so no other table is touched. (The earlier mobile-only
   ::before approach left the desktop orphan; this supersedes it.) */
.sct#folders .mt colgroup col:nth-child(5) {
  width: 0 !important;
}
.sct#folders .mt thead th:nth-child(5),
.sct#folders .mt tbody td:nth-child(5) {
  display: none !important;
}

/* Ensure folder badges have consistent weight */
.mt .badge,
.mt [class*="badge"] {
  font-size: 10.5px;
  font-weight: 560;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* -- Invite row -- */
.inv input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

/* -- Pending invites eyebrow: CANON sec 10 (10.5/500/.12em). -- */
.pend .pl {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.pr .em {
  color: var(--ink);
}

/* -- Danger zone: same as settings.css -- */
.sct.dz {
  border-color: color-mix(in srgb, var(--negative) 28%, var(--line)) !important;
}
.sct.dz .sh h2 {
  color: var(--negative) !important;
}
/* R7  -  `.db` bespoke retired; mapped to CANON sec 5 ghost (40h / r-md). */
.da .db {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  background: var(--paper) !important;
  color: var(--negative) !important;
  border: 1px solid color-mix(in srgb, var(--negative) 28%, transparent) !important;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.da .db:hover {
  background: color-mix(in srgb, var(--negative) 7%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--negative) 44%, transparent) !important;
}

/* -- Mobile: dense tables stack into card-like rows -- */
@media (max-width: 768px) {
  /* Form rows: single-column */
  .fr {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .fr .fl {
    font-size: 12px;
  }

  /* Invite row: vertical stack */
  .inv {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .inv input,
  .inv select,
  .inv .btn {
    width: 100% !important;
  }

  /* Pending invite rows: wrap */
  .pr {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  /* Danger zone actions: stack */
  .da {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .da .db {
    align-self: flex-start;
  }

  /* GAP-D: Members table mobile card. The shared E4 reflow turned each
     member row into a tall card where the avatar, name/email, role
     badge and a lone `...` action placeholder each landed on their own
     full-width space-between row -- oversized, with a big gap between
     avatar and name and an orphan `...` reading as unfinished. Rebuild
     it as one tidy card: avatar + name/email on the left, role badge
     on the right, the joined-date column and the non-functional `...`
     action cell hidden (the row menu is a static proto placeholder; on
     mobile it only added empty height). Scoped to #members so the
     Folders table (its own authored card below) is untouched.
     NOTE: !important is required throughout because the shared E4
     block in space-ds.css sets table/tr/td{display:block!important}
     at <=760; without !important this authored treatment loses.
     The .mt/thead/tbody display is normalized explicitly (mirroring
     the proven Folders block below) so the layout is deterministic
     across the E4 (<=760) and this page's (<=768) breakpoints. */
  #members .mt {
    display: block !important;
  }
  #members .mt thead {
    display: none !important;
  }
  #members .mt tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #members .mt tbody tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  #members .mt tbody td:nth-child(1) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    padding: 0 !important;
    text-align: left !important;
  }
  #members .mt .who { gap: 11px !important; }
  #members .mt .who > div { min-width: 0; }
  #members .mt .nm,
  #members .mt .em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  #members .mt tbody td:nth-child(2) {
    flex: 0 0 auto !important;
    display: block !important;
    padding: 0 !important;
    text-align: right !important;
  }
  #members .mt thead th:nth-child(3),
  #members .mt tbody td:nth-child(3),
  #members .mt thead th:nth-child(4),
  #members .mt tbody td:nth-child(4) {
    display: none !important;
  }

  /* Folders & policies: convert table to stacked 2-col cards. All
     structural display props are !important so this authored mobile
     layout wins over the shared E4 generic table->block reflow
     (E4 uses !important; without it here the bespoke card is lost). */
  .sct#folders .mt {
    display: block !important;
  }
  .sct#folders .mt thead {
    display: none !important;
  }
  .sct#folders .mt tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .sct#folders .mt tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
    padding: 12px 14px !important;
    background: var(--surface-3) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
  }
  .sct#folders .mt tr td {
    display: block !important;
    text-align: left !important;
  }
  .sct#folders .mt tr td {
    padding: 0 !important;
    border-bottom: none !important;
    font-size: 12px;
  }
  .sct#folders .mt tr td:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink);
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    margin-bottom: 2px;
  }
  /* GAP-D: the reflowed Folders & policies cards were raw -- the
     badges (inherit / allowed / public ...) appeared with no column
     context, and the 5th "Members" cell holds a `, ` placeholder in
     the proto for most folders, which rendered as a stray orphan
     comma. Proto DOM is frozen (no data-label attrs exist), so the
     column meaning is restored with static ::before micro-labels on
     the badge cells (column order is fixed: 2=Access, 3=Public
     release, 4=Default visibility) and the placeholder Members cell
     (5th) is hidden on mobile -- it is the least important column and
     is mostly the empty `, ` placeholder, mirroring how the Members
     table hides its own least-important column at this width. */
  .sct#folders .mt tr td:nth-child(2)::before { content: "Access"; }
  .sct#folders .mt tr td:nth-child(3)::before { content: "Public release"; }
  .sct#folders .mt tr td:nth-child(4)::before { content: "Default visibility"; }
  .sct#folders .mt tr td:nth-child(2)::before,
  .sct#folders .mt tr td:nth-child(3)::before,
  .sct#folders .mt tr td:nth-child(4)::before {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-mute);
  }
  .sct#folders .mt tr td:nth-child(5) {
    display: none !important;
  }
}