/* Written by Richard Christopher, Copyright 2026 Mindfull */
/*
 * THE SHARING FORM (`canvas/features/shared-work/sharing.js`), wherever it opens: in an item of Feed's
 * Logger, in the item panel, under Resources › Controls › Access. The Shared work page it came from is
 * gone, and so are that page's rules: every rule here is the form's.
 *
 * ONE REGION ON THE SURFACE IT OPENS IN. Nothing is boxed: a hairline parts the form from what is above
 * it, and its parts are parted by space. Who has access is rows of one height on shared columns. The
 * fields sit in one group, side by side while there is room. One action is filled at a time, and that
 * fill is the kit's own (`is-primary`); the others are quiet. A field is drawn as a form field is drawn
 * in Feed. Tokens only (global.css); `--feed-target` and `--feed-radius` are the shared parts' two
 * sizes, so every control is a 44px target. Nothing here moves, so there is no motion to reduce.
 */
.unified-shared-sharing {
  display: grid; gap: var(--space-4); min-width: 0; max-width: 72ch;
  padding-block-start: var(--space-4); border-block-start: 1px solid var(--border);
  color: var(--text); font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-normal);
}
/* Hidden means not there, whatever a rule below gave the part to lay out with. */
.unified-shared-sharing[hidden], .unified-shared-sharing [hidden] { display: none; }
/* Each part has the form's width, wherever the form opens: a host that lines its own children up at the start does not narrow them. */
.unified-shared-sharing > * { justify-self: stretch; }
.unified-shared-heading { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }

/* Who has access: rows of one height on the list's own tracks: a name, what is said of it, the row's one control. */
.unified-shared-grants {
  display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content; column-gap: var(--space-4);
  min-width: 0; margin: 0; padding: 0; list-style: none;
}
.unified-shared-grant { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; min-width: 0; min-height: var(--feed-target); }
.unified-shared-name { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.unified-shared-said { color: var(--text-dim); font-size: var(--text-base); overflow-wrap: anywhere; }

/* The fields: each control under its caption. */
.unified-shared-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24ch), 1fr)); gap: var(--space-3) var(--space-4); min-width: 0; }
.unified-shared-field { display: grid; gap: var(--space-1); min-width: 0; }
.unified-shared-caption { color: var(--text-dim); font-size: var(--text-base); }
.unified-shared-sharing .unified-shared-control {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--feed-target); padding-inline: var(--space-3);
  color: var(--text); font: inherit; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--feed-radius);
}
.unified-shared-sharing .unified-shared-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The step in hand, and what the row of a grant offers: one filled action, the rest quiet words. */
.unified-shared-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.unified-shared-sharing .cloudcanvas-ui-button { min-height: var(--feed-target); padding-inline: var(--space-4); }
.unified-shared-sharing :is(.unified-shared-quiet, .unified-shared-remove) { color: var(--text-dim); background: transparent; border-color: transparent; }
.unified-shared-sharing :is(.unified-shared-quiet, .unified-shared-remove):hover:not(:disabled) { color: var(--text); background: var(--accent-wash); }

/* What a change would do, read before it is confirmed: set off by a rule at its start, not a frame. It takes the focus when a removal is reviewed.
   The review in it is the shared part (`ui/access-review.js`), drawn by `parts.css`. */
.unified-shared-preview { display: grid; gap: var(--space-2); min-width: 0; padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--accent); }
.unified-shared-preview:empty { display: none; }
.unified-shared-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* What went wrong, in the words of every notice here. */
.unified-shared-notice { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-base); background: var(--warn-wash); border-radius: var(--feed-radius); overflow-wrap: anywhere; }
/* What was done, said politely: a notice that is no warning, in the tint of what is chosen. */
.unified-shared-status { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-base); background: var(--accent-wash); border-radius: var(--feed-radius); overflow-wrap: anywhere; }
/* The region's disclosure keeps the edge of the form: the shared part is inset for a list. */
.unified-shared-sharing > .feed-details { padding-inline: 0; padding-block-end: 0; }

@media (max-width: 760px) {
  /* A name has the line; what is said of it and its control share the next. */
  .unified-shared-grants { grid-template-columns: minmax(0, 1fr) max-content; }
  .unified-shared-name { grid-column: 1 / -1; padding-block-start: var(--space-2); }
}