/* The organization list on the sign-in stage (pages/orgs/list.html), over static/css/ds-app.css: the
   title on the night band, each organization a white card rising out of it - its initials beside its
   name, the projects and the date, one filled action and its two public portals as rows. */

.ds-org-band { --app-rings-y: 108%; --org-sheet-edge: 28px; padding-bottom: 140px; }
/* The light page meets the band as the sign-in stage's sheet does: a rounded top edge lit from below
   the rings, under the cards that rise across it. */
.ds-org-band::after { content: ""; position: absolute; inset: auto 0 0; height: var(--org-sheet-edge);
  border-radius: var(--org-sheet-edge) var(--org-sheet-edge) 0 0; background: var(--surface-page);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--brand-glow) 35%, transparent), 0 -18px 44px -14px color-mix(in srgb, var(--brand-glow) 70%, transparent); }
.ds-org-band__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-16) var(--space-24);
  padding-top: var(--space-24); }
.ds-org-band__words { flex: 1 1 520px; min-width: 0; }
.ds-org-band__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
/* Grid or list, as a segmented control on glass with the shown one a white segment. */
.ds-org-views { display: inline-flex; padding: 3px; border-radius: 15px; background: var(--app-glass); box-shadow: var(--app-glass-edge); }
.ds-org-views a { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-tap); padding: 0 14px; border-radius: 12px;
  color: var(--on-brand); font: 500 16px/24px var(--app-font); text-decoration: none; }
.ds-org-views a:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.ds-org-views a[aria-current="page"] { background: var(--surface-card); color: var(--brand); font-weight: 600; }
.ds-org-views svg, .ds-org-band__tools .ds-app-glass svg { width: 18px; height: 18px; }

/* The cards come up out of the band onto the light page. */
.ds-org-page { position: relative; z-index: 1; margin-top: -116px; padding-bottom: var(--space-48); }
.ds-org-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-20); }
.ds-org-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-20); border-radius: 28px;
  background: var(--surface-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-deep) 5%, transparent), 0 2px 4px color-mix(in srgb, var(--brand-deep) 6%, transparent),
    0 24px 48px -24px color-mix(in srgb, var(--brand-deep) 38%, transparent); }
.ds-org-card__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* A super admin's menu sits in the card's corner, out of the name's way: a long name keeps the card's
   width rather than wrapping beside a third column. */
.ds-org-card__head--menu { padding-right: 36px; }
.ds-org-card__head > .ds-org-menu { position: absolute; top: 12px; right: 12px; }
.ds-org-card__disc { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--on-brand);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--accent) 70%, var(--brand-glow)), var(--brand-deep) 80%);
  box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 4px color-mix(in srgb, var(--brand-glow) 55%, transparent);
  font: 700 18px/1 var(--app-display); letter-spacing: -.01em; }
.ds-org-card__name { flex: 1; min-width: 0; margin: 0; font: 700 22px/28px var(--app-display); letter-spacing: -.02em; color: var(--ink);
  text-wrap: pretty; overflow-wrap: anywhere; }
/* The dot sits in the middle of the gap between two facts, on the first line of the second; a fact
   that wraps to its own line takes its dot outside the line's left edge, where the clip hides it. A
   fact longer than the line (a Spanish date on a 320px phone) wraps inside itself, never under the clip. */
.ds-org-card__facts { display: flex; flex-wrap: wrap; gap: 0 var(--space-24); overflow: hidden; margin: var(--space-12) 0 0;
  font: 400 16px/24px var(--app-font); color: var(--ink-muted); }
.ds-org-card__facts > span { position: relative; min-width: 0; }
.ds-org-card__facts > span + span::before { content: ""; position: absolute; top: 10px; left: calc(-1 * var(--space-12) - 2px);
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }
/* The action and the portals sit at the card's foot, so cards side by side keep them level whatever
   the length of each name. */
.ds-org-card__foot { margin-top: auto; padding-top: var(--space-20); }
.ds-app-primary__glyph { width: 18px; height: 18px; }
.ds-org-card__label { margin: 22px 0 var(--space-8); font: 600 16px/24px var(--app-font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); }

/* The super admin's menu of one organization. */
.ds-org-menu { position: relative; flex: none; }
.ds-org-menu__button { display: grid; place-items: center; width: var(--size-tap); height: var(--size-tap); border-radius: 50%; color: var(--ink-muted);
  list-style: none; cursor: pointer; }
.ds-org-menu__button::-webkit-details-marker { display: none; }
.ds-org-menu__button:hover, .ds-org-menu[open] > .ds-org-menu__button { background: var(--surface-page); color: var(--ink); }
.ds-org-menu__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-org-menu__glyph { width: 22px; height: 22px; }
.ds-org-menu__panel { position: absolute; top: calc(100% + var(--space-8)); right: 0; z-index: 20; display: grid; min-width: 220px; padding: 6px;
  border-radius: var(--radius-xl); background: var(--surface-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-deep) 8%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--brand-deep) 45%, transparent); }
.ds-org-menu__panel a, .ds-org-menu__panel button { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--size-tap);
  padding: 0 var(--space-12); border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 16px/24px var(--app-font);
  text-align: left; text-decoration: none; cursor: pointer; }
.ds-org-menu__panel a:hover, .ds-org-menu__panel button:hover { background: var(--surface-page); }
.ds-org-menu__panel svg { width: 18px; height: 18px; color: var(--ink-subtle); }
.ds-org-menu__panel .ds-org-menu__danger, .ds-org-menu__panel .ds-org-menu__danger svg { color: var(--tone-red-ink); }

/* The list view: one row per organization on a white group. */
.ds-org-rows { margin: 0; padding: var(--space-4) 0; list-style: none; border-radius: 28px; background: var(--surface-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-deep) 5%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--brand-deep) 30%, transparent); }
.ds-org-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); padding: var(--space-16) var(--space-20); }
.ds-org-row + .ds-org-row::before { content: ""; position: absolute; top: 0; left: 84px; right: 0; height: 1px; background: var(--border); }
.ds-org-row__text { flex: 1 1 260px; min-width: 0; }
.ds-org-row__name { margin: 0; font: 700 19px/26px var(--app-display); letter-spacing: -.015em; color: var(--ink); overflow-wrap: anywhere; }
.ds-org-row__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-12); margin: 2px 0 0; font: 400 16px/24px var(--app-font); color: var(--ink-muted); }
.ds-org-row .ds-org-card__facts { margin-top: 0; }
.ds-org-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); }
.ds-org-row__open { min-height: var(--size-tap); padding: 0 var(--space-20); font-size: 16px; }
.ds-org-row__portal { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-tap); color: var(--link); font: 500 16px/24px var(--app-font); }
.ds-org-row__portal svg { width: 16px; height: 16px; }

/* No organization to show: one sentence where the cards or the rows would be. */
.ds-org-empty { margin: 0; padding: var(--space-32) var(--space-24); text-align: center; font: 400 17px/26px var(--app-font); color: var(--ink-muted); }
.ds-org-cards > .ds-org-empty { grid-column: 1 / -1; border-radius: 28px; background: var(--surface-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-deep) 5%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--brand-deep) 30%, transparent); }

/* The two notices a redirect can bring here, as a white card over the page. */
.ds-org-dialog { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-16); }
.ds-org-dialog__scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--brand-deep) 55%, transparent); }
.ds-org-dialog__card { position: relative; display: grid; justify-items: center; gap: var(--space-12); width: min(28rem, 100%); padding: var(--space-32) var(--space-24) var(--space-24);
  border-radius: 28px; background: var(--surface-card); text-align: center;
  box-shadow: 0 40px 80px -24px color-mix(in srgb, var(--brand-deep) 60%, transparent); }
.ds-org-dialog__card h2 { margin: 0; font: 700 22px/28px var(--app-display); color: var(--ink); }
.ds-org-dialog__card p { margin: 0; font: 400 16px/24px var(--app-font); color: var(--ink-muted); }
.ds-org-dialog__card .ds-app-primary { width: 100%; margin-top: var(--space-8); }

@media (max-width: 640px) {
  .ds-org-band__tools .ds-app-glass { flex: 1; justify-content: center; }
  /* A phone row: the name stays beside its disc, level with its top, and the actions go under the
     name (disc 48 + gap 16). */
  .ds-org-row { align-items: flex-start; }
  .ds-org-row__text { flex: 1 1 0; }
  .ds-org-row__actions { flex: 1 1 100%; padding-left: 64px; }
}
@media (min-width: 641px) {
  .ds-org-band { --org-sheet-edge: 36px; padding-bottom: 156px; }
  .ds-org-band__inner { padding-top: 40px; }
  .ds-org-page { margin-top: -124px; }
  .ds-org-cards { gap: var(--space-24); }
  .ds-org-cards--2, .ds-org-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-org-card { padding: 28px; }
  .ds-org-card__name { font-size: 24px; line-height: 30px; }
}
@media (min-width: 1101px) {
  .ds-org-cards--1 { grid-template-columns: minmax(0, 600px); justify-content: center; }
  .ds-org-cards--2 { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; }
  .ds-org-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* One or two organizations: the title takes the cards' centred column. */
  .ds-org-fit--1 { max-width: calc(600px + 4rem); }
  .ds-org-fit--2 { max-width: calc(1064px + 4rem); }
}