/* AuCRA INSIGHT, companies and sharing (docs/plans/companies-and-sharing.md,
   D4, D5, D14, D15): the top bar's Share button and its dialog, the read
   only line, the Dashboard's owner and
   access cells, and the Accounts page. Linked last of the pages family by
   ui/styles.py. */

/* ---- ui/share_button.py ---- */
.aucra-share-slot {
  display: inline-flex;
}
.q-btn.aucra-share-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--chrome-line);
  border-radius: 8px;
  color: var(--chrome-ink);
  font-size: 13px;
  font-weight: var(--weight-bold);
}
.q-btn.aucra-share-btn:hover {
  background: var(--chrome-wash);
}
.q-btn.aucra-share-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.aucra-share-btn .q-focus-helper {
  display: none;
}
.aucra-share-btn .q-icon {
  font-size: 18px;
}
.aucra-share-btn .q-btn__content {
  gap: 6px;
}
/* Off answers no hover: --rail-text reads 14.5:1 on --chrome (slate 6.33:1). */
.q-btn.aucra-share-btn.aucra-share-off {
  color: var(--rail-text);
  background: none;
  cursor: default;
}
.aucra-share-locked .q-icon:last-child {
  font-size: 14px;
  opacity: 0.8;
}

/* ---- ui/share_dialog.py, share_dialog_rows.py ---- */
.aucra-share-dialog {
  width: 640px;
  max-width: calc(100vw - 32px);
}
.aucra-share-title {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.aucra-share-body {
  padding: 14px 18px;
}
.aucra-share-caption {
  font-size: 16px;
}
.aucra-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  width: 100%;
}
.aucra-share-person {
  flex-direction: column;
  align-items: stretch;
}
.aucra-share-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.aucra-share-who {
  flex: 1 1 12rem;
  min-width: 0;
}
.aucra-share-name {
  font-size: 13.5px;
  font-weight: var(--weight-bold);
}
.aucra-share-company-name,
.aucra-share-ai-line,
.aucra-share-owner-line {
  font-size: 12px;
  color: var(--muted);
}
.aucra-share-company {
  font-size: 13.5px;
  font-weight: var(--weight-bold);
}
.aucra-share-owner,
.aucra-share-viewer {
  font-size: 13px;
  color: var(--muted);
}
.aucra-share-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.aucra-share-level {
  width: 9rem;
}
.aucra-share-ai {
  padding-left: 2px;
}
.aucra-share-ai-line {
  padding-left: 30px;
}
/* The email, the Level select, its (i) and Share on one line. */
.aucra-share-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem auto auto;
  gap: 8px;
  align-items: center;
}
/* The choice of this person or everyone at their company, and its line,
   each take the add row's whole width (#90). */
.aucra-share-add > .aucra-share-reach,
.aucra-share-add > .aucra-share-reach-line {
  grid-column: 1 / -1;
}
.aucra-share-reach {
  justify-self: start;
}
.aucra-share-reach-line {
  font-size: 12px;
  color: var(--muted);
}
/* Make someone else the owner: the select and its button (CSH-04). */
.aucra-share-owner-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.aucra-share-owner-line {
  margin-top: -6px;
}
@media (max-width: 599px) {
  .aucra-share-owner-pick {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The email and Share take the line; the Level keeps its (i) beside it. */
  .aucra-share-add {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .aucra-share-add > .aucra-share-email,
  .aucra-share-add > .q-btn {
    grid-column: 1 / -1;
  }
  .aucra-share-add > .aucra-share-level {
    width: auto;
  }
}
.aucra-share-said,
.aucra-warn-line {
  border-left: 3px solid var(--warn);
  background: var(--warn-wash);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
}
/* A change that went through is said in the positive style; the warning one
   stays for a refusal (fix pass C 5). */
.aucra-share-said.aucra-share-said-done {
  border-left-color: var(--pass);
  background: var(--pass-wash);
}
.aucra-share-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

/* ---- kit/locked.py's notice, and the Accounts page drawn locked ---- */
.aucra-locked-notice {
  width: 440px;
  max-width: calc(100vw - 32px);
}
.aucra-locked-icon {
  color: var(--muted);
  font-size: 18px;
}
.aucra-locked-ask {
  padding-left: 26px;
}
.aucra-locked-ask.aucra-locked-alone {
  padding-left: 0;
}

/* ---- ui/read_only_line.py ---- */
.aucra-read-only-ask {
  color: var(--muted);
  font-size: 13.5px;
}

/* ---- ui/pages/clauses/presence.py (#71) ---- */
/* The lock banner is a status region from the first draw. Empty, it is out
   of the flow but stays in the accessibility tree, so its first words are
   read out. Filled, it is a warn band with Take over beside the words. */
.aucra-lock-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13.5px;
  color: var(--text);
}
.aucra-lock-banner:not(.aucra-lock-banner-on) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.aucra-lock-banner-on {
  width: 100%;
  padding: 10px 14px;
  background: var(--warn-wash);
  border-left: 3px solid var(--warn);
  border-radius: var(--soft-radius-inner);
}
.aucra-lock-banner:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-lock-words {
  flex: 1 1 260px;
  min-width: 0;
}
.aucra-presence {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ---- ui/pages/home.py, home_tools.py, home_rows.py, home_remove.py ---- */
.aucra-create-line {
  padding: 0 16px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
/* The Dashboard's two boxes (`home_tools.py`), the name of a new workspace
   and the search: drawn shut, each slides open under the buttons when its
   button asks, as a rail group unfolds (`.aucra-fold-body`). A shut box is
   unseen and out of the tab order. */
.aucra-reveal {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-quick) var(--ease-out),
    visibility 0s var(--motion-base);
}
.aucra-reveal-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-quick) var(--ease-out) calc(var(--motion-base) - var(--motion-quick));
}
.aucra-reveal-body {
  min-height: 0;
  overflow: hidden;
}
.aucra-reveal-row {
  flex-wrap: nowrap;
  /* Room for the box's focus ring under the body's clip. */
  padding: 2px 16px 16px;
}
@media (prefers-reduced-motion: reduce) {
  .aucra-reveal,
  .aucra-reveal-open {
    transition: none;
  }
}
/* Each register is a table: a head row, then one row per workspace on the
   same tracks, so every kind of word keeps a column of its own. The name
   with the id under it, the owner with the reader's access under it, the
   bar over its counts, the document count, when it was last modified (on
   two lines when it needs them), the chevron. A
   register where no row names an owner gives that track to the access
   alone. The (i), Share and Remove each keep a track after the link, so a
   row without Share holds the same columns. Laid out by the region's width,
   never the window's (docs/handoff/rules.md): under 860px a row is a card
   (content.css and the second block below). The fixed tracks and their
   gaps take 496px, so at 860px a name beside an owner keeps about 137px,
   on two lines. */
.aucra-ws-table {
  --ws-columns: minmax(0, 1fr) 64px 240px 80px 92px 14px;
}
.aucra-ws-table-owned {
  --ws-columns: minmax(0, 3fr) minmax(0, 2fr) 240px 80px 92px 14px;
}
.aucra-ws-heads {
  display: none;
}
/* The line above the first row is the head band's, or the head row's. */
.aucra-ws-heads + .aucra-row {
  border-top: 0;
}
/* A removed workspace (#92): the register row's inset, and on a phone the
   date and Restore wrap under the name rather than squeeze it. */
.aucra-bin-row {
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 18px;
}
.aucra-bin-name {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-bin-row .aucra-count {
  white-space: nowrap;
}
/* Two lines of name before the cut, in the table and on the card, so two
   long names that start alike still read apart; the tooltip has the rest.
   The table gives the owner its two lines too. */
.aucra-dashboard-row .aucra-row-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.aucra-dashboard-row .aucra-row-owner {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-dashboard-row .aucra-row-access {
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.aucra-dashboard-row .aucra-row-owner:empty {
  display: none;
}
.aucra-dashboard-row .aucra-row-modified {
  font-size: 0.78rem;
  color: var(--muted);
}
@container aucra-workspace (width >= 860px) {
  .aucra-ws-heads,
  .aucra-dashboard-row > a.aucra-row-link {
    display: grid;
    grid-template-columns: var(--ws-columns);
    column-gap: 14px;
    align-items: center;
  }
  /* The right inset is the link's 8px and the three tracks after it, so the
     heads and the cells share their edges. */
  .aucra-ws-heads {
    padding: 8px 116px 8px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--muted);
  }
  .aucra-dashboard-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px 34px 44px;
  }
  .aucra-dashboard-row > a.aucra-row-link {
    grid-column: 1;
    row-gap: 3px;
    padding: 10px 8px 10px 18px;
  }
  .aucra-dashboard-row > .aucra-row-info {
    grid-column: 2;
    justify-self: center;
  }
  .aucra-dashboard-row > .aucra-row-share-slot {
    grid-column: 3;
  }
  .aucra-dashboard-row > .aucra-row-delete,
  .aucra-dashboard-row > .aucra-row-delete-slot {
    grid-column: 4;
  }
  .aucra-dashboard-row .aucra-row-name {
    grid-area: 1 / 1;
  }
  .aucra-dashboard-row .aucra-row-owner {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  /* Under the name the id is a line of words, not a chip. */
  .aucra-dashboard-row .aucra-id {
    grid-area: 2 / 1;
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
  }
  .aucra-dashboard-row .aucra-row-who {
    grid-area: 1 / 2 / 3 / 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .aucra-dashboard-row .aucra-bar-row {
    grid-area: 1 / 3 / 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
  }
  /* The bar's track runs down the column here, so its basis is its height. */
  .aucra-dashboard-row .aucra-bar {
    flex: 0 0 6px;
    width: 100%;
  }
  .aucra-dashboard-row .aucra-row-documents {
    grid-area: 1 / 4 / 3 / 5;
  }
  .aucra-dashboard-row .aucra-row-modified {
    grid-area: 1 / 5 / 3 / 6;
  }
  .aucra-dashboard-row .aucra-row-go {
    grid-area: 1 / 6 / 3 / 7;
  }
}
/* On the card (content.css, a region under 860px) the owner and the access
   share the third line, the access at the right on one line, and the counts
   give way before the last modified. */
@container aucra-workspace (width < 860px) {
  .aucra-dashboard-row .aucra-row-who {
    display: contents;
  }
  /* The bar over its counts, as in the table, and the owner on as many
     lines as it needs: a phone reads both whole (2026-10-11; the counts
     were cut after "1 Self-as"). The date moves down beside the documents. */
  .aucra-dashboard-row .aucra-bar-row {
    grid-area: 2 / 1 / auto / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .aucra-dashboard-row .aucra-bar {
    flex: 0 0 6px;
    width: 100%;
  }
  .aucra-dashboard-row .aucra-bar-text {
    white-space: normal;
  }
  .aucra-dashboard-row .aucra-row-owner {
    grid-area: 3 / 1 / auto / 3;
    white-space: normal;
  }
  .aucra-dashboard-row .aucra-row-access {
    grid-area: 3 / 3;
    justify-self: end;
  }
  .aucra-dashboard-row .aucra-row-documents {
    grid-area: 4 / 1 / auto / 3;
  }
  .aucra-dashboard-row .aucra-row-modified {
    grid-area: 4 / 3;
    justify-self: end;
    white-space: nowrap;
  }
  .aucra-dashboard-row .aucra-row-documents:empty {
    display: none;
  }
}
.aucra-row-delete-slot {
  display: inline-flex;
}
.aucra-row-delete-locked .q-icon {
  font-size: 18px;
  color: var(--muted);
}
/* A row's (i) (#251), a 28px target before Share. */
.aucra-row-info.aucra-info {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}
/* A row's Share (fix pass C 6), beside Remove and drawn as quietly. */
.aucra-row-share-slot {
  display: inline-flex;
}
.aucra-row-share.q-btn {
  flex: 0 0 auto;
  color: var(--muted);
}
.aucra-row-share.q-btn:hover {
  color: var(--text);
}
.q-btn.aucra-row-share:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.aucra-row-share .q-focus-helper {
  display: none;
}

/* ---- ui/pages/account_head.py (accounts area plan AA1, Q7, AA16) ---- */
.aucra-acct-head {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  gap: 8px;
  min-width: 0;
}
.aucra-acct-head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.aucra-acct-head-row > .aucra-title {
  flex: 1 1 auto;
  min-width: 0;
}
.aucra-acct-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.aucra-acct-head-actions:empty {
  display: none;
}
a.aucra-acct-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-bottom: -4px;
  font-size: 13.5px;
  color: var(--gold-deep);
  text-decoration: none;
}
a.aucra-acct-back:hover {
  text-decoration: underline;
}
a.aucra-acct-back .q-icon {
  font-size: 16px;
}

/* ---- ui/kit/pill.py (accounts area plan AA16): one pill for every state ---- */
.aucra-acct-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  background: var(--panel);
}
.aucra-acct-pill-good {
  color: var(--pass);
  background: var(--pass-wash);
  border-color: color-mix(in srgb, var(--pass) 35%, transparent);
}
.aucra-acct-pill-warn {
  color: var(--warn);
  background: var(--warn-wash);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.aucra-acct-pill-muted {
  color: var(--muted);
  background: var(--mist);
}
.aucra-acct-pill-gold {
  color: var(--gold-deep);
  background: var(--gold-wash);
  border-color: color-mix(in srgb, var(--gold-deep) 30%, transparent);
}