/* Client Portal (WI-000840-006).

   Everything here uses the semantic tokens from tokens.css, so light/dark comes
   for free and there is no second colour set to keep in sync. The one place the
   brand teal is used flat is the rail, which is the portal's only chrome — the
   customer should know whose system they are in at a glance. */

/* ---- frame ------------------------------------------------------------- */

.pt {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.pt__main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 24px 28px 48px;
}

/* ---- left rail --------------------------------------------------------- */

.pt-rail {
  width: 248px;
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
  background: var(--brand);
  color: var(--on-brand);
  transition: width 0.15s ease, flex-basis 0.15s ease;
}

.pt-rail--collapsed {
  width: 64px;
  flex-basis: 64px;
}

.pt-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pt-rail__logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
  flex: 0 0 auto;
}

.pt-rail__mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 700;
  flex: 0 0 auto;
}

.pt-rail__client {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.pt-rail__toggle {
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.pt-rail__toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

.pt-rail__nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 16px;
}

.pt-rail__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 8px 4px;
}

.pt-rail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.88;
}
.pt-rail__item:hover {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}
.pt-rail__item.is-active {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
  font-weight: 600;
}
.pt-rail__item .ti {
  font-size: 17px;
  flex: 0 0 auto;
}

.pt-rail--collapsed .pt-rail__item {
  justify-content: center;
}

.pt-rail__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right-aligned count. Deliberately quiet — it is an orientation aid, not an
   alarm; the numbers here are routinely in the dozens. */
.pt-rail__count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.pt-rail__me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.pt-rail__me:hover {
  background: rgba(255, 255, 255, 0.1);
}
.pt-rail--collapsed .pt-rail__me {
  justify-content: center;
}

.pt-rail__meName {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- profile drawer ---------------------------------------------------- */

.pt-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.pt-drawer__x {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.pt-drawer__x:hover {
  background: var(--surface-2);
  color: var(--text);
}

.pt-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Destructive, but not shouting: a white button with a red edge, so signing out
   reads as deliberate rather than as the primary thing to do here. */
.pt-signout {
  background: var(--surface);
  border: 1px solid var(--danger, #dc2626);
  color: var(--danger, #dc2626);
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pt-signout:hover {
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--surface));
}

.pt-profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pt-profile__avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 0 4px;
}
.pt-profile__avatar .avatar {
  border-radius: 50%;
}
.pt-profile__avatarHint {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

/* Email is read-only, and it has to LOOK read-only. Rendered with the same
   affordances as the editable field above it, a user reasonably tries to type
   in it and gets silence — worse than an obviously inert field. */
.pt-profile__ro {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

.pt-profile__error {
  color: var(--danger, #dc2626);
  font-size: 13px;
}

/* ---- placeholder + blocked states -------------------------------------- */

.pt-pending {
  max-width: 720px;
}
.pt-pending__title {
  font-size: 22px;
  margin: 0 0 6px;
}

.pt-blocked {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.pt-blocked__card {
  max-width: 420px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
}
.pt-blocked__card h1 {
  font-size: 20px;
  margin: 0 0 8px;
}
.pt-blocked__card p {
  margin: 0 0 18px;
}

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 720px) {
  .pt-rail {
    width: 64px;
    flex-basis: 64px;
  }
  .pt-rail__client,
  .pt-rail__label,
  .pt-rail__count,
  .pt-rail__meName {
    display: none;
  }
  .pt__main {
    padding: 16px;
  }
}

/* ---- All Tasks and its siblings (WI-000840-007) ------------------------- */

.pt-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.pt-head__title {
  font-size: 22px;
  margin: 0;
}
.pt-head__count {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 2px 9px;
}

.pt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pt-chip:hover { background: var(--surface-2); }
.pt-chip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.pt-chip--danger { color: var(--danger, #dc2626); border-color: color-mix(in srgb, var(--danger, #dc2626) 40%, transparent); }
.pt-chip--danger.is-on { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff; }
.pt-chip__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.pt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pt-toolbar__search { flex: 1; min-width: 180px; max-width: 380px; }
.pt-toolbar__sys { max-width: 220px; }
.pt-toolbar__spacer { flex: 1; }

.pt-cols { position: relative; }
.pt-cols__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pt-cols__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.pt-cols__item:hover { background: var(--surface-2); }

/* The table is a CSS grid rather than a <table> so the column set can change
   with the Columns picker without the widths fighting each other. Each row
   declares the same template, driven by which columns are visible. */
.pt-table { overflow-x: auto; }
.pt-tr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  min-width: 720px;
}
.pt-tr:last-child { border-bottom: 0; }
.pt-tr--head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface-2);
}
.pt-tr--row { cursor: pointer; }
.pt-tr--row:hover { background: var(--surface-2); }
.pt-tr--empty {
  display: block;
  padding: 28px 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Fixed-basis columns with ONE flexible column (the title), so hiding a column
   widens the title rather than redistributing every width and reflowing the
   whole table into something unrecognisable. */
.pt-th, .pt-td { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-col--id      { flex: 0 0 78px; }
.pt-col--sys     { flex: 0 0 96px; }
.pt-col--cmp     { flex: 0 0 130px; }
.pt-col--title   { flex: 1 1 auto; white-space: normal; }
.pt-col--status  { flex: 0 0 130px; }
.pt-col--prio    { flex: 0 0 110px; }
.pt-col--created { flex: 0 0 92px; }

.pt-sort {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: inherit;
  letter-spacing: inherit;
}
.pt-sort:hover { color: var(--text); }

.pt-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-muted); }
.pt-title { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.pt-emg { color: var(--danger, #dc2626); }
.pt-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pt-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pt-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 4px;
}

.pt-error {
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 40%, transparent);
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
  color: var(--danger, #dc2626);
  border-radius: 10px;
  padding: 12px 14px;
}

/* ---- Task Detail slide-out (WI-000840-008) ------------------------------ */

.pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: flex-end;
}

/* Leaves a strip of the page behind visible, so it reads as a layer over your
   list rather than as a new destination you navigated to. */
.pt-detail {
  width: calc(100% - 200px);
  max-width: 1200px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 18px 24px 40px;
  animation: pt-slide-in 0.16s ease-out;
}
@keyframes pt-slide-in {
  from { transform: translateX(24px); opacity: 0.6; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-detail { animation: none; }
}

.pt-detail__loading { padding: 40px; color: var(--text-muted); }

.pt-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pt-detail__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-detail__actions { display: flex; align-items: center; gap: 8px; }

.pt-pill--danger {
  background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent);
  color: var(--danger, #dc2626);
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 38%, transparent);
}

.pt-detail__title { font-size: 24px; margin: 14px 0 4px; }
.pt-detail__meta { margin-bottom: 18px; }

.pt-detail__body { display: flex; gap: 28px; align-items: flex-start; }
.pt-detail__main { flex: 1 1 auto; min-width: 0; }
.pt-detail__side { flex: 0 0 320px; display: flex; flex-direction: column; gap: 16px; }

.pt-sec { margin-bottom: 26px; }
.pt-sec__h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.pt-prose { font-size: 14px; line-height: 1.6; }

.pt-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* ---- composer ---- */

.pt-composer {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface);
  margin-bottom: 16px;
}
.pt-composer__kinds { display: flex; gap: 6px; margin-bottom: 8px; }
.pt-composer__text { width: 100%; resize: vertical; }
.pt-composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.pt-composer__reply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
}
.pt-composer__reply button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; }

/* ---- activity ---- */

.pt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.pt-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  cursor: pointer;
}
.pt-tab.is-on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.pt-tab__n { opacity: 0.7; font-size: 11px; }

.pt-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-feed__empty { color: var(--text-muted); padding: 18px 0; }
.pt-feed__item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
}
/* A question is the one feed item that asks something of the reader, so it is
   the one that gets a colour. */
.pt-feed__item--question { border-left: 3px solid #F59E0B; }
.pt-feed__item--change { background: transparent; border-style: dashed; }
.pt-feed__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pt-feed__body { font-size: 14px; white-space: pre-wrap; }
.pt-feed__acts { display: flex; gap: 12px; margin-top: 8px; }

.pt-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--surface-2);
  color: var(--text-muted);
}
.pt-badge--open { background: color-mix(in srgb, #F59E0B 18%, transparent); color: #B45309; }

.pt-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.pt-link:hover { text-decoration: underline; }

/* ---- sidebar ---- */

.pt-side__block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface);
}
.pt-side__h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.pt-side__row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-top: 8px; }
.pt-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.pt-related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-related__card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pt-related__card:hover { border-color: var(--accent); }

@media (max-width: 1000px) {
  .pt-detail { width: 100%; padding: 14px 16px 32px; }
  .pt-detail__body { flex-direction: column; }
  .pt-detail__side { flex: 1 1 auto; width: 100%; }
}

/* ---- Questions inbox (WI-000840-009) ------------------------------------ */

.pt-qlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-qcard {
  border: 1px solid var(--border);
  border-left: 3px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface);
}
.pt-qcard__task {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.pt-qcard__body { display: flex; gap: 10px; align-items: flex-start; }
.pt-qcard__icon { color: #F59E0B; font-size: 18px; flex: 0 0 auto; margin-top: 2px; }
/* Never clamped: a question you can only half-read is a question you have to
   open a task to answer. */
.pt-qcard__text { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.pt-qcard__meta { margin-top: 8px; }
.pt-qcard__acts { display: flex; gap: 8px; margin-top: 10px; }

/* ---- Dashboard (WI-000840-010) ------------------------------------------ */

.pt-dash__hello { margin-bottom: 18px; }
.pt-dash__hello h1 { font-size: 24px; margin: 0 0 4px; }
.pt-dash__hello p { margin: 0; }

.pt-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pt-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid #3B82F6;
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  font-size: 14px;
}
.pt-banner .ti-rocket { color: #3B82F6; font-size: 18px; }
.pt-banner__body { flex: 1; min-width: 0; }
.pt-banner__x {
  background: none; border: 0; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: 6px; line-height: 1;
}
.pt-banner__x:hover { background: var(--surface-2); color: var(--text); }

.pt-quads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.pt-quad {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}
.pt-quad__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pt-quad__head h2 { font-size: 14px; margin: 0; }
.pt-quad__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pt-quad__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 9px 4px;
  font: inherit;
  cursor: pointer;
}
.pt-quad__list li:first-child .pt-quad__row { border-top: 0; }
.pt-quad__row:hover { background: var(--surface-2); }
.pt-quad__title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-quad__meta { grid-column: 1; }
.pt-quad__row .pt-pill { grid-row: 1 / span 2; align-self: center; }
.pt-quad__empty {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px; padding: 14px 4px; margin: 0;
}

/* ---- Priorities (WI-000840-011) ----------------------------------------- */

.pt-prios__lede { margin: 0 0 14px; max-width: 60ch; }
.pt-prios__list { margin-bottom: 28px; }
.pt-prios__h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 10px; }

.pt-prio { display: flex; align-items: center; gap: 12px; }
.pt-prio > .pt-pill { flex: 0 0 auto; }
.pt-prio > .pt-ellipsis { flex: 1; min-width: 0; }
.pt-prio__acts { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---- People (WI-000840-028) ---------------------------------------------
   Same row geometry as .pt-prio next door — a leading fixed-width marker (the
   avatar here, the colour pill there), a flexible middle that ellipsises, and
   the actions pinned right — because they are the same kind of list and should
   not read as two different tables. */

.pt-people__lede { margin: 0 0 14px; max-width: 68ch; }
.pt-people__list { margin-bottom: 28px; }
.pt-people__h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 0 0 10px;
}

.pt-person { display: flex; align-items: center; gap: 12px; }
.pt-person__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-person__name { font-weight: 600; }
.pt-person__role { flex: 0 0 auto; white-space: nowrap; }
.pt-person__acts { display: flex; gap: 6px; flex: 0 0 auto; }
/* Removed access still shows — a row that vanished would read as "we lost
   them" rather than "you removed them" — but it reads as past tense. */
.pt-person.is-revoked { opacity: 0.55; }

.pt-pill--pending {
  background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent);
  color: var(--warning, #f59e0b);
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 38%, transparent);
  flex: 0 0 auto;
}

.pt-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.pt-swatch.is-on { border-color: var(--text); }

/* ---- Releases (WI-000840-014) ------------------------------------------- */

.pt-rlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-rel { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.pt-rel__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 11px 13px; font: inherit; cursor: pointer; text-align: left;
}
.pt-rel__head:hover { background: var(--surface-2); }
.pt-rel__ver { font-size: 14px; }
.pt-rel__body { padding: 0 13px 13px 34px; border-top: 1px solid var(--border); }
.pt-rel__tasks { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pt-rel__task {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; padding: 6px 4px; font: inherit; font-size: 13px; cursor: pointer;
  border-radius: 6px;
}
.pt-rel__task:hover { background: var(--surface-2); }
.pt-rel__task .pt-ellipsis { flex: 1; min-width: 0; }

/* ---- Your Tags (WI-000840-012) ------------------------------------------ */

.pt-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pt-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 4px 2px 9px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pt-tag button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 3px; opacity: 0.7;
}
.pt-tag button:hover { opacity: 1; }
.pt-tag--add {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 10px;
  font-weight: 500;
}
.pt-tag--add:hover { border-color: var(--accent); color: var(--accent); }
.pt-tag__input { width: 140px; font-size: 12px; padding: 3px 8px; }

/* ---- Portal Invoices (WI-000840-018) ------------------------------------
   The line table reuses .inv-lines from settings.css (the staff Invoices tab),
   so a client and a teammate read the same figures in the same shape. */
.pt-invoices .inv-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.pt-invoices .inv-lines th,
.pt-invoices .inv-lines td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pt-invoices .inv-lines th { text-align: left; color: var(--text-muted); font-weight: 500; }
.pt-invoices .inv-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-invoices .inv-lines tfoot td { border-bottom: none; font-weight: 600; }
.pt-invoices .inv-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pt-invoices .inv-notes { white-space: pre-wrap; margin: 10px 0 0; }

/* ---- Portal Billable Time (WI-000840-016) -------------------------------
   Hours only, by design — there is no rate or amount column here, and adding
   one would disclose the rate by division against the hours beside it. */
.pt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 14px; }
.pt-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pt-card__label { font-size: 12px; color: var(--text-muted); }
.pt-card__value { font-size: 20px; font-variant-numeric: tabular-nums; }

.pt-time__scoped { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); font-size: 13px; }

.pt-timetable { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-timetable th, .pt-timetable td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.pt-timetable th { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.pt-timetable .num { text-align: right; white-space: nowrap; }
.pt-timetable .mid { text-align: center; white-space: nowrap; }
.pt-timetable .mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: nowrap; }
.pt-timetable tfoot td { border-bottom: none; font-weight: 600; }
.pt-linkish { background: none; border: none; padding: 0; font: inherit; color: var(--accent); text-align: left; cursor: pointer; }
.pt-linkish:hover { text-decoration: underline; }

/* The toolbar wraps rather than crushing six controls onto one line. */
.pt-time .pt-toolbar { flex-wrap: wrap; gap: 8px; }
.pt-time .pt-toolbar .input { max-width: 190px; }

@media (max-width: 640px) {
  .pt-cards { grid-template-columns: 1fr; }
  .pt-timetable th:nth-child(3), .pt-timetable td:nth-child(3) { display: none; }
}

/* ---- Estimates (WI-000840-015) -----------------------------------------
   Hours only — approving commits spend, so the number the client weighs
   before clicking is hours, never a price they cannot verify. */
.pt-est { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.pt-est--awaiting_approval { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 38%, transparent); }
.pt-est--approved { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border: 1px solid color-mix(in srgb, var(--success) 34%, transparent); }
.pt-est--declined { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 34%, transparent); }

.pt-est__ask { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.pt-est__row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pt-est__bulk { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.pt-estimates .pt-cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---- Invitation landing (WI-000840-025) ---------------------------------
   Rendered on the signed-out /onboarding card, so it borrows .signin/.onboard
   for the frame and only adds the client mark. Sits on the light card rather
   than the teal rail, hence the border instead of the rail's white overlay. */
.pt-invite__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-invite__logo { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; }
.pt-invite__mark {
  width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand); font-weight: 700; flex: 0 0 auto;
}