/* ================= Organization settings pane — genuinely new bits only =================
   Everything reusable (.stg-sec, .stg-row, .a-card, .a-chip, .btn, .empty-state, .add-row,
   .cfg-status, etc.) is alt-settings-stride.css's existing component library
   (sys_stride-settings-design.md §3/§4), reused unchanged. This file adds only the two-column
   Organization layout, the four count tiles, and the Billing empty state — all scoped to
   `#orgPaneBody`/`#orgBillingView` so nothing leaks onto another pane. */

/* ================= THE LAYOUT THE OWNER SUPPLIED, 2026-09-14 =================
   Measured off the supplied 1378px mockup, divided by 1.4113 (settled by the button: 45px/1.4113
   = 31.9 ≈ `.btn`'s 32px). RATIOS transfer, absolute pixels do not — the mockup's input measured
   slightly taller than this app's controls, so fields below take `var(--a-ctl)` rather than
   restating one of its three density values. What changed from the previous layout: details went
   from a column in a two-col grid to full width with its own field grid; count tiles went 2x2 to
   1x4; mark/owners went from a stacked rail to a row of their own. */

#orgPaneBody .org-pane-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
#orgPaneBody .org-pane-t{
  margin:0;
  /* 27px in the mockup / 1.4113 = 19.1 — rounded to 20px so it reads as a pane heading rather
     than competing with the dialog's own <h3>. The one pane with a heading at all: every other
     pane opens with a `.pane-intro` sentence instead. */
  font-size:20px;
  font-weight:750;
  letter-spacing:-.01em;
  color:var(--stg-text);
  line-height:1.2;
}
#orgPaneBody .org-pane-d{
  margin-top:3px;
  font-size:13px;
  color:var(--stg-dim);
  line-height:1.45;
}

/* ---- Row 2: the two cards, at the supplied proportions ---- */
/* One rhythm, the dialog's own — these cards are grandchildren of `.admin-pane.active` (through
   #orgPaneBody), so its 10px row-gap never reaches them; `.stg-sec`'s margin-bottom used to
   carry it instead. Flex column with the same 10px states it once. */
#orgPaneBody #orgSettingsView{ display:flex; flex-direction:column; gap:10px; }
#orgPaneBody #orgSettingsView > .stg-sec,
#orgPaneBody .org-row-2 > .stg-sec{ margin:0; }

/* OWNER, 2026-09-25: "these tab should split column space 50/50", both rows ringed in his
   screenshot. The mockup's own 475fr/507fr measurement was defensible for one two-column row; a
   second row at 1fr/1fr made the misaligned columns read as a rendering fault. The pane's
   coherence wins — both rows share one split, and a future mockup measuring a different ratio
   for one row should change both or neither. */
#orgPaneBody .org-row-2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:17px;
  align-items:stretch;
}

/* ---- Row 3: User counts | Organization files — same wrapper, different proportions ----
   Both rows are 1fr/1fr (see Row 2 above); what still differs is ALIGNMENT. `align-items:stretch`
   is wrong here — User counts is a fixed grid, Organization files grows per uploaded file, so
   stretching would leave User counts holding dead space. `.org-row-2-fit` keeps the one wrapper
   class and overrides only columns (equal, not measured) and alignment (top, not stretch). */
#orgPaneBody .org-row-2.org-row-2-fit{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}

/* ---- User counts' four tiles, RE-BROKEN BY THIS SAME PAIRING, 2026-09-25 ----
   `.stg-org-tiles`'s `repeat(4,...)` was measured for a FULL-WIDTH card — pairing User counts
   into `.org-row-2-fit` halves its width permanently, and four tiles no longer fit (labels wrap
   to 2-3 lines down to the pane's own 1440px default width). `repeat(2,...)` holds one line for
   all four labels at every width this card can reach. Not a container query — the container is
   always exactly one wrapper with no independent width to query, so a descendant selector says
   the same thing in one line. Gated to `min-width:561px` so the existing ≤560px single-column
   fallback keeps winning below it, with nothing to override. */
@media (min-width:561px){
  #orgPaneBody .org-row-2-fit .stg-org-tiles{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* ---- The details card's own two-column field grid ---- */
#orgPaneBody .org-field-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  /* 41px measured; column gap carries it, row gap is the 95px pitch minus the 48px control. */
  column-gap:29px;
  row-gap:14px;
}
#orgPaneBody .org-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#orgPaneBody .org-field-wide{ margin-top:16px; }
#orgPaneBody .org-field-l{
  font-size:12px;
  font-weight:650;
  color:var(--stg-text);
  line-height:1.3;
}
/* THESE FIELDS ARE `.a-input`/`.a-textarea`, NOT A HAND-BUILT COPY — every other control in this
   dialog already is the primitive (alt-settings.js emits it 17+3 times), and the old hand-built
   copy diverged on exactly the property that carries contrast (three `--stg-*` aliases pointed
   at different canonical values than `.a-input` uses). Height is inherited from `.a-input`'s own
   `height:var(--a-ctl)` rather than restated. What remains below is what genuinely differs. */
#orgPaneBody .org-field .a-input,
#orgPaneBody .org-field .a-textarea{
  /* LAYOUT, NOT APPEARANCE. The primitive sizes to its container; these fill a grid cell. */
  width:100%;
  box-sizing:border-box;
}
#orgPaneBody .org-field .a-textarea{
  /* 102px in the mockup / 1.4113 = 72px — three lines. `.a-textarea` sets height:auto so the
     caller says how tall, and keeps resize:vertical/line-height:1.5 for free. */
  min-height:72px;
}
/* ADDS rather than overrides: `.a-input` declares no placeholder colour. */
#orgPaneBody .org-field .a-input::placeholder,
#orgPaneBody .org-field .a-textarea::placeholder{ color:var(--stg-faint); }
/* No local focus rule — the old one inset the ring on the premise that `.stg-sec`'s
   overflow:hidden would clip an outset ring, which the pane's other 17 `.a-input`s already
   disprove (same overflow:hidden card, not clipped — 3px of ring into 14px of padding never
   reaches it). Both fields take their ring from above: the input from `.a-input:focus-visible`,
   the textarea from alt-focus.css's bare floor. `.a-textarea` missing from alt-components.css's
   own focus-visible list is the real gap, fixed there, not here. */

/* The character count sits inside the textarea's own box, bottom-right, reading as part of the
   control rather than a separate line under it. */
#orgPaneBody .org-ta-wrap{ position:relative; display:flex; }
#orgPaneBody .org-ta-count{
  position:absolute;
  /* Clear of the textarea's own resize grabber, which the mockup also draws. */
  right:14px;
  bottom:6px;
  font-size:11px;
  color:var(--stg-faint);
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* ---- Cancel / Save changes ---- */
#orgPaneBody .org-details-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--stg-line);
}
#orgPaneBody .org-details-actions .cfg-status{ margin-right:auto; }

/* ---- The mark card ---- */
#orgPaneBody .org-mark-row{ display:flex; gap:13px; align-items:flex-start; }
#orgPaneBody .org-mark-preview{
  /* A large preview, not the 30x28 shell slot — this is where an admin judges the image before
     committing it. object-fit:contain keeps the "resized to fit, never stretched" promise. */
  flex:0 0 auto;
  /* 140px in the mockup / 1.4113 = 99px. */
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--stg-line);
  border-radius:var(--stg-r);
  background:var(--stg-surface);
}
/* `display:block`, and it must NOT be `none` — orgRenderMark() shows the mark by REMOVING the
   inline `display:none` rather than setting a visible one, so this stylesheet's value becomes
   the answer. `none` here hid the mark permanently while the caption still said it was showing —
   "visibility is not function" running in the other direction. */
#orgPaneBody .org-mark-preview img{
  max-width:88%;
  max-height:88%;
  object-fit:contain;
  display:block;
}
#orgPaneBody .org-mark-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  font-size:13px;
  color:var(--stg-text);
  line-height:1.45;
}
#orgPaneBody .org-mark-btns{ display:flex; gap:10px; flex-wrap:wrap; }
#orgPaneBody .org-mark-note{ margin-top:12px; }

/* ---- Owners ---- */
#orgPaneBody .org-owner-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 0;
  border-bottom:1px solid var(--stg-line);
}
#orgPaneBody .org-owner-row:last-of-type{ border-bottom:0; }
/* The avatar is `.a-av.lg`, not a hand-built copy — the old copy diverged on contrast:
   `color:#fff` over `var(--accent)` measures 3.677:1 in dark (fails AA); `.a-av` uses
   `--a-blue-fill` (`--accent-fill`), which measures 4.518:1. Passed every light-theme look only
   because `--accent`/`--accent-fill` are the same colour there — check both themes or neither.
   The semantic class survives as a JS/test hook, carrying no styling of its own. */
#orgPaneBody .org-owner-id{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
#orgPaneBody .org-owner-n{
  font-size:13px; font-weight:650; color:var(--stg-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#orgPaneBody .org-owner-e{
  font-size:12px; color:var(--stg-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* A dashed add control, full width under the list — this product's existing convention for
   "add another one of these" rows. */
#orgPaneBody .org-owner-add{
  width:100%;
  margin-top:9px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  /* Accent, not grey — the mockup draws this control's "+" in brand blue, separating "add
     another owner" from a disabled-looking placeholder. `--accent-text`, not `--accent`: this is
     TEXT (the fill colour isn't legible as type — see alt-conversation.css's own note); the
     dashed BORDER correctly stays `--accent`. */
  color:var(--accent-text);
  background:transparent;
  border:1px dashed var(--stg-line-strong);
  border-radius:var(--stg-r);
  cursor:pointer;
}
#orgPaneBody .org-owner-add svg{ width:13px; height:13px; flex:0 0 auto; }
#orgPaneBody .org-owner-add:hover{ background:var(--stg-surface-2); border-color:var(--accent); }
#orgPaneBody .org-owner-add:focus-visible{ outline:2px solid var(--stg-ring); outline-offset:-2px; }

/* ---- Count tiles: ONE row of four ---- */
#orgPaneBody .stg-org-tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
#orgPaneBody .stg-org-tile{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:11px 13px;
  border:1px solid var(--stg-line);
  border-radius:var(--stg-r);
  background:var(--stg-surface);
}
#orgPaneBody .stg-org-tile-n{
  /* 30px in the mockup / 1.4113 = 21px. */
  font-size:21px;
  font-weight:750;
  color:var(--stg-text);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
#orgPaneBody .stg-org-tile-l{ font-size:12px; color:var(--stg-faint); line-height:1.35; }
#orgPaneBody .stg-org-tiles-caption{
  margin-top:11px;
  font-size:12px;
  color:var(--stg-faint);
  line-height:1.5;
}

/* ---- The Billing button, in the details card's header band ---- */
.alt-app #adminModal #orgPaneBody .stg-org-billing-slot > button.btn{
  align-self:center;
  min-width:113px;
  justify-content:center;
}
#orgPaneBody #orgDetailsCard{ position:relative; }
#orgPaneBody .stg-org-billing-slot{
  position:absolute;
  top:1px;
  right:16px;
  height:71px;
  display:flex;
  align-items:center;
  z-index:1;
}
#orgPaneBody #orgDetailsCard > .stg-sec-h{ padding-right:130px; }

/* THE THIRD BUTTON. `.stg-pane-actions` (alt-team.css) is built for two buttons with no wrap;
   this pane adds a third (#orgSwitchBtn). Scoped here rather than in that shared file so only
   this pane's actions row wraps. `flex-wrap` alone did nothing: `flex:0 0 auto` never shrinks,
   so the box grew past its content and overflowed `.org-pane-head` instead of wrapping.
   `max-width:100%` clamps it to the parent's width FIRST, which is what gives wrap something
   narrower to wrap inside of. */
#orgPaneBody .stg-pane-actions{ flex-wrap:wrap; justify-content:flex-end; max-width:100%; }

/* ---- Narrow ---- */
@media (max-width:900px){
  #orgPaneBody .org-row-2{ grid-template-columns:minmax(0,1fr); }
  /* `.org-row-2.org-row-2-fit` outranks the bare `.org-row-2` collapse rule above on
     specificity — restated with both classes so the collapse still wins at this width. */
  #orgPaneBody .org-row-2.org-row-2-fit{ grid-template-columns:minmax(0,1fr); }
  #orgPaneBody .org-field-grid{ grid-template-columns:minmax(0,1fr); }
  #orgPaneBody .stg-org-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  #orgPaneBody .stg-org-tiles{ grid-template-columns:minmax(0,1fr); }
  #orgPaneBody .org-mark-row{ flex-direction:column; }
  #orgPaneBody .stg-org-billing-slot{
    position:static; height:auto; justify-content:flex-end; padding:0 16px 10px;
  }
  #orgPaneBody #orgDetailsCard > .stg-sec-h{ padding-right:16px; }
}

/* ================= Organization billing — the disabled empty state =================
   Scoped to #orgBillingView, this pane's own view swap target (JS/features/org-billing.js). */

#orgBillingView .stg-org-billing-crumb{
  margin-bottom:12px;
}
#orgBillingView .stg-org-billing-crumb .btn span{
  font-size:15px;
  line-height:1;
}

#orgBillingView .stg-org-billing-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  margin-bottom:14px;
}
#orgBillingView .stg-org-billing-head-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
/* "Coming soon" reuses `.a-chip` verbatim (no modifier class) — a neutral chip, never a warning
   or danger colour, because a scaffold that has not shipped yet is not an error state. */

#orgBillingView .stg-org-billing-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:48px 24px;
  border:1px solid var(--stg-line);
  border-radius:var(--stg-r-lg);
  background:var(--stg-surface);
}
#orgBillingView .stg-org-billing-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--stg-surface-2);
  color:var(--stg-dim);
  margin-bottom:4px;
}
#orgBillingView .stg-org-billing-ico svg{ width:28px; height:28px; }
#orgBillingView .stg-org-billing-empty h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--stg-text);
}
#orgBillingView .stg-org-billing-empty p{
  margin:0;
  max-width:440px;
  /* 13px, not 12.5px — a half-pixel size rounds differently per platform/zoom, which is why
     responsive-layout.test.js refuses fractional font sizes across every stylesheet. */
  font-size:13px;
  line-height:1.55;
  color:var(--stg-dim);
}
/* The disabled button — `.btn:disabled` already gives opacity/cursor (components.css); a
   second settings-local treatment would be CLAUDE.md principle 4's duplication. This only adds
   the spacing this layout needs. */
#orgBillingView #orgConfigureBillingBtn{
  margin-top:6px;
}
/* "This feature is currently disabled" — the third place (after the chip and heading) the
   disabled state is stated in words, per sys_design-system.md's colour-is-never-the-only-
   carrier rule. */
#orgBillingView .stg-org-billing-note{
  font-size:11px;
  color:var(--stg-faint);
}

@media (max-width:640px){
  #orgBillingView .stg-org-billing-head{
    flex-direction:column;
  }
}


/* ============================================================================
   Organization files — the store
   Repeats `.org-owner-row`'s geometry deliberately rather than sharing it: the two lists should
   READ as the same kind of thing, but an owner row (avatar + two identity lines) and an asset row
   (filename + size) are not one component — two small blocks of the same five properties is
   cheaper than a selector growing a modifier for every difference. No new tokens: --stg-line,
   --stg-text, --stg-dim and --accent-text are the pane's existing four.
   ============================================================================ */

/* `.org-assets-list` has no rule, and that's a judgement (CLAUDE.md 4d), not an omission — it's
   a bare innerHTML/delegation target; the rows carry the layout, so a default block div needs
   nothing. `.org-owner-list` has no equivalent only because the owners list has no wrapper. */
#orgPaneBody .org-asset-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 0;
  border-bottom:1px solid var(--stg-line);
}
#orgPaneBody .org-asset-row:last-of-type{ border-bottom:0; }

/* The preview slot — same treatment as `.org-mark-preview` above, at row scale: same border,
   radius and surface tokens so a list of small frames reads as one family with the large one.
   30x28 is the slot the mark actually occupies (TEAM_BRAND_W/H) with a frame, which is what
   keeps a transparent PNG legible in light mode. `flex:0 0 auto` keeps it out of the slack —
   `.org-asset-id` beside it truncates instead. */
#orgPaneBody .org-asset-thumb{
  flex:0 0 auto;
  width:38px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--stg-line);
  border-radius:var(--stg-r);
  background:var(--stg-surface);
  color:var(--stg-dim);
}
/* `display:block`, must not be `none` — same trap as the mark preview above. orgAssetThumbsFill()
   reveals the image by REMOVING the inline display:none; `none` here would hide every thumbnail
   while the fill still reported success. */
#orgPaneBody .org-asset-thumb img{
  max-width:88%;
  max-height:88%;
  object-fit:contain;
  display:block;
}
/* The not-an-image glyph — a PDF has no preview, and an empty frame reads as a failed thumbnail
   rather than a file that has none. */
#orgPaneBody .org-asset-thumb svg{ display:block; }

/* The identity column takes the slack; `min-width:0` is what makes the ellipsis work — a flex
   item's default min-width:auto is its content's intrinsic width, the same defect that once
   clipped meta text on task rows and reached the owner's screen. */
#orgPaneBody .org-asset-id{
  display:flex; flex-direction:column; gap:1px;
  min-width:0; flex:1 1 auto;
}
#orgPaneBody .org-asset-n{
  font-size:13px; font-weight:650; color:var(--stg-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#orgPaneBody .org-asset-m{
  font-size:12px; color:var(--stg-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* The row that IS the mark — accent is the SECOND carrier, never the only one: `.org-asset-m`
   already says "· used as the mark" in words, which is why "Use as mark" is absent here rather
   than present and inert. */
#orgPaneBody .org-asset-row.is-mark .org-asset-n{
  color:var(--accent-text);
}

/* Upload control, placed like `.org-owner-add` but without its dashed full-width treatment —
   that convention means "curate a list"; this is a file picker, so it matches the mark card's
   plain `.btn` instead. */
#orgPaneBody .org-assets-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:9px;
}
#orgPaneBody .org-assets-note{ margin-top:12px; }

/* At phone width the row stacks rather than squeezing two buttons and a filename into ~300px —
   640px matches the billing breakpoint at the foot of this file; a second value would be a
   second answer to the same question. */
@media (max-width:640px){
  #orgPaneBody .org-asset-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  /* The thumbnail stays beside the name when the row wraps — calc() removes the frame and gap
     from the line the identity column shares, so `flex:1 1 100%` alone wouldn't. */
  #orgPaneBody .org-asset-id{ flex:1 1 calc(100% - 49px); }
}