/* yarramate-app: the app's own rules on top of the site's stylesheet
   (assets/site.css). Tokens come from the site; nothing here redefines them.
   Light only, system faces only, square corners. */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.app-nav nav a.current { color: var(--ink); }

/* Sign out is a form that posts; its button reads as a header link. */
.app-signout { display: inline; margin: 0; }
.app-signout button {
  font: inherit;
  color: var(--quiet);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.app-signout button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.app-signout button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

.app-main {
  width: 100%;
  padding: 56px var(--gutter-r) 48px var(--gutter-l);
}

.app-sheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.app-sheet h1 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; }
.app-sheet .lede { max-width: 34em; }

.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 4px;
}

.app-footer {
  padding: 20px var(--gutter-r) 28px var(--gutter-l);
  border-top: 1px solid var(--rule);
}
.nowrap { white-space: nowrap; }

/* Forms: bordered fields on white, the site's square buttons. */

.app-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.app-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.app-form input[type="email"],
.app-form input[type="text"] {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  padding: 10px 12px;
}
.app-form input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
button.btn, button.btn-big { cursor: pointer; font-family: inherit; }
button.btn:focus-visible, button.btn-big:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* A one-line notice: the read-only reason, a refusal, a cap. */

.notice {
  border-left: 3px solid var(--ochre);
  background: var(--sheet);
  padding: 10px 14px;
  font-size: 15px;
}

/* Identity (track 2): /signin, /auth/verify, /account. */

.app-form .app-hint { margin-top: -8px; font-size: 14px; color: var(--quiet); }
.app-aside {
  font-family: var(--utility);
  font-size: 13px;
  color: var(--eucalyptus);
  border-left: 3px solid var(--eucalyptus);
  padding: 4px 12px;
}
.notice-done { border-left-color: var(--eucalyptus); }
.app-empty { color: var(--quiet); }

/* "Send another link" waits a minute on the page; the hourly caps are the server's. */
.app-resend { animation: app-resend-wait 60s steps(1, end) both; }
@keyframes app-resend-wait {
  from { opacity: 0.45; pointer-events: none; }
  to { opacity: 1; pointer-events: auto; }
}

/* A button that reads as a link: Sign out on a row, Sign out on /account. */
.btn-link {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--cobalt);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-link:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
button.btn-danger { background: var(--failure); }
button.btn-danger:hover { background: #86332e; }

.account { gap: 0; }
.account h1 { margin-bottom: 8px; }
.account-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.account > h1 + .account-section { border-top: 0; }
.account-section > * { max-width: 100%; }
.account-section h2 { font-size: 26px; line-height: 1.2; }
.account-section .app-form { width: 100%; }
.account-facts { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.account-facts dt { font-size: 15px; font-weight: 600; }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }

.app-rows { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--rule); }
.app-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.app-rows form { margin: 0; }

.account-practice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  border-left: 3px solid var(--ochre);
  background: var(--sheet);
  padding: 14px 16px;
}
.account-practice .app-rows { border-top-color: var(--rule); }

/* Sharing (track 5): /w/<slug>/members and the Owners section on /billing. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.members, .billing { gap: 0; max-width: 820px; }
.members > .eyebrow a { color: inherit; text-decoration: none; }
.members > .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.members > h1 { margin: 6px 0 14px; }
.billing > h1 { margin-bottom: 14px; }
.members > .lede, .members > .notice { margin-bottom: 18px; }

.members-roles { margin: 0 0 8px; display: grid; gap: 8px; font-size: 15px; }
.members-roles div { display: grid; grid-template-columns: 14em 1fr; gap: 4px 16px; }
.members-roles dt { font-weight: 600; }
.members-roles dt span { font-weight: 400; color: var(--quiet); }
.members-roles dd { margin: 0; }

.members-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.members-section > * { max-width: 100%; }
.members-section > .notice, .members-section > .app-form { align-self: stretch; }
.members-section h2 { font-size: 26px; line-height: 1.2; }
.members-invite select { min-height: 46px; }
.billing > h1 + .members-section, .billing > .practice-picker + .members-section { border-top: 0; }

.members-invite { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; max-width: none; width: 100%; }
.members-invite label:first-child { flex: 1 1 18em; }
.members-invite > div { flex: 0 0 auto; }

.app-form select,
.members-actions select {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  padding: 9px 10px;
}
.members-actions select { font-size: 14px; padding: 4px 6px; }
.app-form select:focus-visible,
.members-actions select:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }

.members-who { overflow-wrap: anywhere; min-width: 0; }
.members-pending .members-who { color: var(--quiet); }
.members-pending .members-who strong { color: var(--ink); font-weight: 600; }
.members-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.members-actions form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

.members-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
  border-left: 3px solid var(--failure);
  background: var(--sheet);
  padding: 16px 18px;
}
.members-section .members-confirm { margin-bottom: 0; }
.members-confirm h2, .members-confirm h3 { font-size: 22px; line-height: 1.25; }
.members-confirm-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.members-confirm-buttons form { margin: 0; }

.practice-picker { font-size: 15px; margin-bottom: 8px; }

@media (max-width: 640px) {
  .members-roles div { grid-template-columns: 1fr; }
  .members-invite > div { flex: 1 1 100%; }
}

@media (max-width: 1023px) {
  .app-main { padding: 36px var(--gutter-l) 36px; }
  .app-footer { padding: 18px var(--gutter-l) 24px; }
  .app-footer.site-footer { flex-direction: column; }
}

/* /authorize (track 6) */
.authorize-choices { border: 0; margin: 0; padding: 0; display: grid; gap: 0.9rem; min-width: 0; }
.authorize-choices legend { font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
.authorize-choice { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; align-items: baseline; }
.authorize-choice .app-hint { grid-column: 2; margin: 0; }
.authorize-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.authorize-who { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }

/* /account: agents and personal access tokens (track 6) */
.account-token-value { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.account-token-value input { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.account-confirm form p { margin: 0 0 0.5rem; }

/* ---- /w: your workspaces ---- */

.ws-list { display: flex; flex-direction: column; gap: 44px; max-width: 880px; }
.ws-list > h1 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; }
.ws-group { display: flex; flex-direction: column; gap: 14px; }
.ws-group-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-firm); }
.ws-group-head h2 { font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.ws-invited { font-size: 15px; color: var(--quiet); }
.ws-plan { font-family: var(--utility); font-size: 13px; color: var(--quiet); }
.ws-plan a { font-family: var(--body); font-size: 14.5px; font-weight: 600; }
.ws-plan-note { font-size: 14px; color: var(--quiet); }
.ws-rows { list-style: none; margin: 0; padding: 0; }
.ws-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 28px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.ws-row-name { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ws-row-name .chip { margin-left: 8px; padding: 2px 7px; font-weight: 400; vertical-align: 2px; }
.ws-row-role { font-family: var(--utility); font-size: 12.5px; color: var(--quiet); white-space: nowrap; }
.ws-row > details { grid-column: 1 / -1; }
.ws-open { font-size: 15px; white-space: nowrap; }
.ws-empty { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 8px; }
.ws-empty > p { max-width: 36em; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.ws-actions > details[open] { flex-basis: 100%; }
details.ws-form-door > summary { list-style: none; cursor: pointer; width: max-content; max-width: 100%; }
details.ws-form-door > summary::-webkit-details-marker { display: none; }
details.ws-form-door > summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.ws-row details.ws-form-door > summary { font-size: 15px; padding: 6px 0 0; }
.ws-btn-line { background: transparent; color: var(--eucalyptus); box-shadow: inset 0 0 0 1px var(--eucalyptus); }
.ws-btn-line:hover { background: var(--sheet); }
.ws-form { margin-top: 12px; padding: 18px 20px 20px; background: var(--sheet); border: 1px solid var(--rule); max-width: 560px; }
.ws-form h3 { font-size: 22px; line-height: 1.2; }
.ws-form p { font-size: 15px; }
.ws-form .hint { font-size: 13.5px; font-weight: 400; color: var(--quiet); overflow-wrap: anywhere; }
.ws-form code { font-family: var(--utility); font-size: 0.86em; }
.ws-starts { color: var(--quiet); }
.ws-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ws-form-actions .btn-quiet { font-size: 15px; padding: 0; }
.ws-own { display: flex; flex-direction: column; gap: 16px; }
.ws-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; }
.ws-start p { flex: 1 1 22em; max-width: 36em; font-size: 15px; color: var(--quiet); }

@media (max-width: 599px) {
  .ws-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ws-row-role { grid-column: 1; grid-row: 2; white-space: normal; }
  .ws-open { grid-column: 2; grid-row: 1; }
  .ws-group-head h2 { font-size: 24px; }
}

/* ---- /w/<slug>/history ---- */

.ws-history { display: flex; flex-direction: column; gap: 18px; max-width: 1040px; }
.ws-history h1 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; }
.ws-history .eyebrow a { color: inherit; text-decoration: none; }
.ws-history .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-history-table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin-top: 8px; }
.ws-history-table th {
  text-align: left;
  font-family: var(--utility);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
  padding: 10px 20px 10px 0;
  border-bottom: 1px solid var(--rule-firm);
}
.ws-history-table td { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.ws-history-table time { white-space: nowrap; }
.ws-history-empty { padding: 18px 0; border-top: 1px solid var(--rule-firm); border-bottom: 1px solid var(--rule); max-width: 40em; }
.ws-paging { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ws-history-note { font-size: 14px; color: var(--quiet); max-width: 44em; }

/* Phones: each change is a small two-column card, the column headings as labels. */
@media (max-width: 719px) {
  .ws-history-table, .ws-history-table tbody { display: block; }
  .ws-history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ws-history-table tr { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ws-history-table td { display: contents; }
  .ws-history-table td::before { content: attr(data-label); font-family: var(--utility); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--quiet); padding-top: 3px; }
}

/* ---- /w/<slug>: the header, at most one notice line, the editor in the rest ---- */

body.ws-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  font-size: 15px;
}
/* Rows by name, not by order: the notice line is optional, and the editor's
   frame holds only positioned children, so an auto row would give it no height. */
.ws-head { grid-row: 1; }
.ws-notice { grid-row: 2; }
.ws-frame { grid-row: 3; }
.ws-head {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px 24px;
  padding: 8px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.ws-head .brand { font-size: 21px; }
.ws-title { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: 1 1 auto; }
.ws-name {
  font-size: 19px;
  line-height: 1.25;
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--rule-firm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-connection { font-family: var(--utility); font-size: 11.5px; color: var(--quiet); white-space: nowrap; }
.ws-connection[data-state="connected"] { color: var(--eucalyptus); }
.ws-connection[data-state="lost"], .ws-connection[data-state="refused"] { color: var(--failure); white-space: normal; }
.ws-doors { display: flex; align-items: center; gap: 22px; font-size: 14.5px; flex-shrink: 0; }
.ws-door-link, .ws-door > summary { color: var(--quiet); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ws-door > summary { list-style: none; }
.ws-door > summary::-webkit-details-marker { display: none; }
.ws-door > summary::after { content: ' \25BE'; font-size: 11px; }
.ws-door-link:hover, .ws-door > summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ws-door[open] > summary { color: var(--ink); }
.ws-door-link:focus-visible, .ws-door > summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.ws-panel {
  position: absolute;
  top: 100%;
  right: 24px;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 80px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px 22px;
  background: var(--white);
  border: 1px solid var(--rule-firm);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 15px;
  white-space: normal;
  cursor: auto;
}
.ws-panel-wide { width: min(700px, calc(100vw - 32px)); }
.ws-panel h2 { font-size: 24px; line-height: 1.15; }
.ws-panel code { font-family: var(--utility); font-size: 0.86em; }
.ws-panel-note { font-size: 14px; color: var(--quiet); }
.ws-paste { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--rule-firm); background: var(--sheet); }
.ws-paste code { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-x: auto; }
.ws-paste button {
  flex-shrink: 0;
  font: inherit;
  font-family: var(--utility);
  font-size: 12px;
  color: var(--ink);
  background: var(--white);
  border: 0;
  border-left: 1px solid var(--rule-firm);
  padding: 0 12px;
  cursor: pointer;
}
.ws-paste button:hover { background: var(--paper); }
.ws-paste button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.ws-clients, .ws-exports { list-style: none; margin: 0; padding: 0; }
.ws-clients li, .ws-exports li { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); }
.ws-clients li p, .ws-exports li p { font-size: 14px; color: var(--quiet); }
.ws-clients li p.ws-client { font-size: 15px; color: var(--ink); }
.ws-clients li p.ws-then { font-size: 13px; }
.ws-notice {
  margin: 0;
  padding: 6px 24px 6px 21px;
  font-size: 14px;
  background: var(--sheet);
  border-left: 3px solid var(--ochre);
  border-bottom: 1px solid var(--rule);
}
/* The editor's narrow layout can be wider than a phone (yarramate #537); the page never scrolls sideways
   for it. Clipped here, not on body, and only across: the editor keeps its own vertical scrolling. */
.ws-frame { position: relative; min-height: 0; background: var(--sheet); outline: none; overflow-x: hidden; overflow-x: clip; }
.ws-mount { position: absolute; inset: 0; }
.ws-mount > * { height: 100%; }
.ws-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--utility);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  pointer-events: none;
}
.ws-frame.mounted .ws-loading { display: none; }
.ws-loading.failed { display: grid; color: var(--failure); text-transform: none; letter-spacing: 0; pointer-events: auto; }

@media (max-width: 720px) {
  .ws-head { flex-wrap: wrap; padding: 8px 16px; }
  .ws-head .brand { font-size: 19px; }
  .ws-title { flex: 1 1 0; }
  .ws-name { font-size: 17px; padding-left: 14px; }
  .ws-doors { order: 3; width: 100%; gap: 18px; font-size: 14px; overflow-x: auto; scrollbar-width: none; }
  .ws-doors::-webkit-scrollbar { display: none; }
  .ws-panel, .ws-panel-wide { left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 110px); padding: 16px; }
  .ws-notice { padding: 6px 16px 6px 13px; font-size: 13.5px; }
}
/* An owner's five doors fit a 390px phone without scrolling; narrower screens still scroll them. */
@media (max-width: 420px) {
  .ws-doors { gap: 12px; font-size: 13px; }
}

/* Billing (track 7): /billing. The sections are the members sections; the plan line is a sheet. */

.billing-state {
  align-self: stretch;
  border-left: 3px solid var(--eucalyptus);
  background: var(--sheet);
  padding: 12px 16px;
  font-size: 18px;
  line-height: 1.45;
}
.billing-read-only .billing-state, .billing-attention .billing-state { border-left-color: var(--ochre); }
.billing-plan p:not(.billing-state):not(.notice), .billing-seats p { max-width: 40em; }
.billing-note { font-size: 14px; color: var(--quiet); }
.billing-action { margin: 4px 0 0; }
.billing-practice .app-form { max-width: 32em; }
.billing-practice .app-hint { margin-top: -6px; }

/* Workspace settings (/w/<slug>/settings): the fixed addresses, the delete door and its confirmation. */

.settings-facts { margin: 0; display: grid; gap: 10px; width: 100%; }
.settings-facts div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
.settings-facts dt { font-size: 15px; font-weight: 600; }
.settings-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.settings-facts code { font-size: 14px; }
.settings .app-links { margin-top: 0; }
a.btn.settings-delete-open { background: transparent; color: var(--failure); box-shadow: inset 0 0 0 1px var(--failure); }
a.btn.settings-delete-open:hover { background: var(--sheet); }
.settings-confirm { margin-bottom: 0; }
.settings-confirm > p { max-width: 40em; }
.settings-keep { font-weight: 600; margin-bottom: -6px; }
.settings-confirm .app-form { margin-top: 6px; }
@media (max-width: 640px) {
  .settings-facts div { grid-template-columns: 1fr; }
}