.sellerSuccessPanel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #bce9e7;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5fffe, #f7f9ff);
}
.sellerSuccessHead {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sellerSuccessHead h4 {
  margin: 0 0 5px;
  color: #082d63;
  font-size: 19px;
}
.sellerSuccessHead p {
  margin: 0;
  color: #617188;
}
.sellerSuccessGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sellerSuccessCard {
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 13px;
  padding: 15px;
}
.sellerSuccessCard h5 {
  font-size: 16px;
  color: #082d63;
  margin: 0 0 5px;
}
.sellerSuccessCard p {
  font-size: 12px;
  color: #65768b;
  line-height: 1.45;
  margin: 0 0 12px;
}
.sellerSuccessCard select,
.sellerSuccessCard input,
.sellerSuccessCard textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 9px;
}
.sellerSuccessActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sellerSuccessExisting {
  margin-top: 14px;
  border-top: 1px solid #dce8ee;
  padding-top: 12px;
}
.sellerSuccessRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8ef;
  border-radius: 11px;
  padding: 12px;
  margin-top: 8px;
}
.sellerSuccessRow small {
  display: block;
  color: #6c7b8e;
  margin-top: 3px;
}
.sellerSuccessPill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #087d7d;
  background: #e6fbf9;
  border-radius: 999px;
  padding: 4px 8px;
  margin-left: 6px;
}
/* A showing Deedlio created from a forwarded feedback email. Deliberately a different colour from
   the teal "Showing Ready" pill beside it: the point is that this one was NOT scheduled by Mike, so
   it should not read as the same kind of label. Agent side only - no portal module reads
   portal_experience.source, and the portal RPC whitelist drops it. */
.sellerSuccessPill.fromEmailPill {
  color: #765c19;
  background: #fff8e6;
  border: 1px solid #f0d99c;
  padding: 3px 7px;
  text-transform: none;
  letter-spacing: 0.2px;
}
/* The showing agent, agent side only. Amber like the emailed-feedback tag, because both say "this
   is for you, not for the seller". The caption states it outright rather than relying on colour. */
.showingAgentBox {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #f0d99c;
  border-left: 4px solid #e3b341;
  border-radius: 9px;
  background: #fff8e6;
}
.showingAgentBox > small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #765c19;
  margin-bottom: 4px;
}
.showingAgentPerson { display: grid; gap: 2px; margin-top: 6px; }
.showingAgentPerson:first-of-type { margin-top: 0; }
.showingAgentPerson b { font-size: 13.5px; color: #102a4c; }
.showingAgentPerson span { font-size: 13px; color: #5b6b7d; }
.showingAgentRole { font-size: 11px !important; font-weight: 800; letter-spacing: .04em; color: #8a97a6 !important; }
.showingAgentLinks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.showingAgentLinks a { font-size: 13px; color: #087c79; text-decoration: none; font-weight: 700; }
.showingAgentLinks a:hover { text-decoration: underline; }
/* Published feedback. Same classes everywhere it appears - the seller's portal, the agent preview
   and the agent's own modal preview - so one rule set styles all three and they cannot drift.
   Collapsed by default via <details>; the summary is the tap target, sized for a thumb. */
.sellerShowingFeedback { margin-top: 10px; border-top: 1px solid var(--line, #e3eaf2); padding-top: 8px; }
.sellerFeedbackToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;              /* a thumb-sized tap target, not a 13px line of text */
  padding: 2px 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #102a4c;
  cursor: pointer;
  list-style: none;              /* the default marker is replaced by our own caret */
}
.sellerFeedbackToggle::-webkit-details-marker { display: none; }
.sellerFeedbackToggle::marker { content: ''; }
.sellerFeedbackToggle::before {
  content: '';
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-right: 2px solid #087c79;
  border-bottom: 2px solid #087c79;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.sellerShowingFeedback[open] > .sellerFeedbackToggle::before { transform: rotate(45deg); }
.sellerFeedbackCount { font-weight: 700; color: #5b6b7d; }
.sellerFeedbackBody { margin-top: 4px; }
.sellerFeedbackPair { display: grid; gap: 1px; margin-bottom: 7px; }
.sellerFeedbackPair:last-child { margin-bottom: 0; }
.sellerFeedbackQ { font-size: 12.5px; font-weight: 750; color: #42536a; }
.sellerFeedbackA { font-size: 13.5px; line-height: 1.5; color: #102a4c; }
/* Who gets the showing request. Rows, not a dense list: each is a tap target on a phone. */
.sendShowingWho { display: grid; gap: 8px; }
.sendShowingWho label {
  display: flex; align-items: flex-start; gap: 9px;
  min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--line, #e3eaf2); border-radius: 10px; background: #fff; cursor: pointer;
}
.sendShowingWho input { margin-top: 3px; width: auto; flex: 0 0 auto; }
.sendShowingWho span { display: grid; gap: 1px; min-width: 0; }
.sendShowingWho b { font-size: 14px; color: #102a4c; }
.sendShowingWho small { font-size: 12.5px; color: #5b6b7d; }
/* A to-do, not a state: the times in the row are already the new ones and the seller has not been
   told. It clears when Mike presses Send. */
.approvalStatus.timesChangedBadge { margin-left: 6px; }
.sellerSuccessModal {
  position: fixed;
  inset: 0;
  background: #07172c99;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 18px;
}
.sellerSuccessDialog {
  width: min(620px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 24px 70px #07172c55;
}
.sellerSuccessDialog header {
  padding: 20px 22px;
  border-bottom: 1px solid #e2e8ef;
}
.sellerSuccessDialog header h2 {
  margin: 0;
  color: #082d63;
}
.sellerSuccessDialog main {
  padding: 20px 22px;
}
.sellerSuccessDialog footer {
  padding: 16px 22px;
  border-top: 1px solid #e2e8ef;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.sellerSuccessDialog .field {
  margin-bottom: 12px;
}
.sellerSuccessDialog label {
  font-size: 12px;
  font-weight: 800;
  color: #33445a;
  display: block;
  margin-bottom: 5px;
}
.sellerSuccessDialog input,
.sellerSuccessDialog select,
.sellerSuccessDialog textarea {
  width: 100%;
  box-sizing: border-box;
}
.sellerSuccessDialog textarea {
  min-height: 90px;
}
@media (max-width: 760px) {
  .sellerSuccessGrid {
    grid-template-columns: 1fr;
  }
  .sellerSuccessRow,
  .sellerSuccessHead {
    align-items: stretch;
    flex-direction: column;
  }
}
.approvalChoice {
  display: grid;
  gap: 8px;
  margin: 6px 0 14px;
}
.approvalChoice label {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #dfe7ef;
  border-radius: 10px;
  padding: 11px;
  font-weight: 700 !important;
}
.approvalChoice input {
  width: auto !important;
  margin: 2px 0 0 !important;
}
.approvalChoice small {
  display: block;
  color: #6b7a8d;
  font-weight: 400;
  margin-top: 2px;
}
.approvalStatus {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.45px;
}
.approvalStatus.pending {
  background: #fff3cd;
  color: #7b5600;
}
.approvalStatus.approved {
  background: #def7ec;
  color: #087b4b;
}
.approvalStatus.info {
  background: #e8f1ff;
  color: #225ea8;
}
/* Declined is an answer, not a warning and not a success: its own colour so it cannot be read as
   either at a glance. */
.approvalStatus.declined {
  background: #fdeceb;
  color: #9a2f27;
}
/* ---- Seller showings in the client portal ---------------------------------------------------
   Her own showings, with their status. Shares .approvalStatus with the agent side on purpose, so
   Approved / Declined / attention read the same colour in her portal as on Mike's dashboard. */
.sellerShowings .sellerShowingGroup {
  margin-top: 14px;
}
.sellerShowings .sellerShowingGroup h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* gap as well as space-between: with one child the heading and its count were touching, and
     space-between does nothing for a single flex line that has no free space. */
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #667085;
  margin: 0 0 8px;
}
/* The count is its own badge, not a bare number beside the words. Unstyled it read
   "Upcoming showings1". */
.sellerShowings .sellerShowingGroup h3 .sellerShowingGroupCount {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.sellerShowingCount {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #0b8f92;
}
.sellerShowingCard {
  border: 1px solid #d9dee8;
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 9px;
  background: #fff;
}
/* Anything not already approved reads as still open, the same orange accent the dashboard card
   uses, so "needs attention" looks identical on both sides of the glass. */
.sellerShowingCard[data-attention="1"] {
  border-left: 4px solid #e8873a;
  background: #fffaf6;
}
.sellerShowingTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
/* The status badge must never touch the time. It read "11:00 AM-11:30 AM ETAPPROVED" because the
   <strong> and the <span> are both inline, so with no layout they simply abut. The margin is here
   as well as the flex gap so that losing the flex context cannot put them back together. */
.sellerShowingTop .approvalStatus {
  flex: 0 0 auto;
  margin-left: 8px;
  white-space: nowrap;
}
.sellerShowingTop .sellerShowingWhen {
  flex: 1 1 auto;
  min-width: 0;
}
.sellerShowingWhen {
  font-size: 16px;
  line-height: 1.25;
  color: #082d63;
}
.sellerShowingActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 11px;
}

/* Needs Mike to do something: a new time offered, a call asked for, or a status this build does
   not recognise. Deliberately NOT .pending - pending is the passive amber of "nobody has answered
   yet", and an answer that needs acting on must not wear the same colour as silence. Orange reads
   as action next to the red of declined and the green of approved. */
.approvalStatus.attention {
  background: #ffece0;
  color: #9c4221;
}
/* The whole dashboard card, not just its badge, when it needs attention. */
.showingApprovalRow[data-attention="1"] {
  border-left: 4px solid #e8873a;
  background: #fffaf6;
}

/* Record seller's answer. Sits inside the expanded showing row, ahead of the other actions. */
.recordAnswer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #d8e3ea;
  border-radius: 10px;
  background: #f8fafc;
}
.recordAnswer > small,
.recordAnswer .recordAnswerHow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5c6d80;
}
.recordAnswer select {
  width: auto;
  min-width: 120px;
  padding: 7px 9px;
  border: 1px solid #ccd8e3;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}
.recordAnswerNote {
  font-size: 11px;
  font-style: normal;
  color: #68788b;
}
@media (max-width: 700px) {
  .recordAnswer {
    align-items: stretch;
    flex-direction: column;
  }
  .recordAnswer select,
  .recordAnswer button {
    width: 100%;
  }
}
.emailPreview {
  border: 1px solid #dce5ee;
  border-radius: 13px;
  overflow: hidden;
}
.emailPreviewHead {
  background: #082d63;
  color: #fff;
  padding: 17px 20px;
  border-bottom: 4px solid #10b7b4;
}
.emailPreviewHead b {
  font-size: 20px;
}
.emailPreviewMeta {
  padding: 12px 18px;
  background: #f5f8fb;
  border-bottom: 1px solid #dce5ee;
  font-size: 12px;
  line-height: 1.55;
}
.emailPreviewBody {
  padding: 21px;
  font-size: 14px;
  line-height: 1.6;
}
.emailPreviewTask {
  background: #f1fbfa;
  border-left: 4px solid #10b7b4;
  border-radius: 8px;
  padding: 13px;
  margin: 13px 0;
}
.emailPreviewList {
  max-height: 190px;
  overflow: auto;
  padding-left: 20px;
}
.emailPreviewList li {
  margin: 4px 0;
}

.sellerExperience {
  border: 1px solid #cde9e7;
  background: linear-gradient(145deg, #fff, #f2fbfb);
  position: relative;
  overflow: hidden;
}
.sellerExperience:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #10b7b4;
}
.sellerExperience h2 {
  color: #082d63;
}
.experienceIntro {
  color: #617188;
  line-height: 1.5;
  margin: 3px 0 15px;
}
.experienceProgress {
  height: 8px;
  background: #e2e8ef;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 15px;
}
.experienceProgress span {
  display: block;
  height: 100%;
  background: #10b7b4;
}
.experienceItem {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid #e8edf2;
}
.experienceItem:first-child {
  border-top: 0;
}
.experienceItem input {
  width: 20px;
  height: 20px;
  accent-color: #10b7b4;
  flex: 0 0 auto;
}
.experienceItem b {
  display: block;
  color: #17233a;
}
.experienceItem small {
  display: block;
  color: #68798d;
  line-height: 1.4;
  margin-top: 2px;
}
.showingHero {
  background: #082d63;
  color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0 13px;
}
.showingHero b {
  font-size: 20px;
}
.showingHero small {
  display: block;
  color: #a9dedd;
  margin-top: 4px;
}
.feedbackBox {
  background: #fff7df;
  border: 1px solid #f0d68b;
  border-radius: 10px;
  padding: 12px;
  margin-top: 13px;
  color: #4d4020;
}
.showingApprovalBox {
  border: 1px solid #d8e3ed;
  border-radius: 11px;
  padding: 14px;
  margin: 12px 0;
  background: #fff;
}
.showingApprovalActions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.showingApprovalActions button {
  border: 0;
  border-radius: 8px;
  padding: 11px 15px;
  font-weight: 800;
  cursor: pointer;
}
.approveShowing {
  background: #10b7b4;
  color: #fff;
}
.contactAgentShowing {
  background: #edf2f7;
  color: #24364d;
}
.declineShowing {
  background: #fff;
  color: #9b1c1c;
  box-shadow: inset 0 0 0 1px #f0c4c4;
}
.sellerSuccessCenter {
  border: 1px solid #a9dfdc;
  background: linear-gradient(145deg, #effcfb, #f3f7ff);
  padding: 0;
  overflow: hidden;
}
.sellerSuccessCenterHead {
  background: #082d63;
  color: #fff;
  padding: 20px 22px;
  border-bottom: 4px solid #10b7b4;
}
.sellerSuccessCenterHead h2 {
  margin: 3px 0 4px;
  color: #fff;
}
.sellerSuccessCenterHead p {
  margin: 0;
  color: #bfdddd;
}
.sellerSuccessCenterBody {
  padding: 15px;
}
.sellerSuccessCenter .sellerExperience {
  margin: 0 0 13px;
  box-shadow: none;
}
.sellerSuccessCenter .sellerExperience:last-child {
  margin-bottom: 0;
}
.showingApprovalAlerts {
  margin: 14px 0;
  background: #fff;
  border: 1px solid #c9e8e5;
  border-radius: 15px;
  overflow: hidden;
}
.showingApprovalHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #edfafa;
  padding: 14px 17px;
}
.showingApprovalHead h3 {
  margin: 0;
  color: #082d63;
}
.showingApprovalHead small {
  color: #607287;
}
.showingApprovalHead > span {
  font-size: 10px;
  font-weight: 900;
  background: #10b7b4;
  color: #fff;
  border-radius: 999px;
  padding: 5px 9px;
}
.showingApprovalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  border-top: 1px solid #e5ebf0;
}
.showingApprovalRow b {
  display: block;
  margin-top: 5px;
}
.showingApprovalRow small {
  display: block;
  color: #66778a;
  margin-top: 3px;
}
.portalNavigation {
  position: sticky;
  top: 8px;
  z-index: 40;
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  background: #fff;
}
.portalNavigation button {
  border: 0;
  background: #edf2f7;
  color: #3d4c61;
  border-radius: 9px;
  padding: 10px 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.portalNavigation button.active {
  background: #10b7b4;
  color: #fff;
}
.portalNavigation button.needsAction {
  border: 1px solid #e6a83a;
  background: #fff6dc;
  color: #7a4b00;
}
.portalNavigation button.needsAction.active {
  background: #d88900;
  color: #fff;
}
.portalNavigation button span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 999px;
  background: #082d63;
  color: #fff;
  font-size: 10px;
}
.portalViewSection,
[data-portal-view] {
  display: none;
}
.portalViewSection.portalViewActive,
[data-portal-view].portalViewActive {
  display: block;
}
.portalViewSection {
  scroll-margin-top: 75px;
  padding: 0;
  overflow: hidden;
}
.sellerGuideAccordion,
.showingAccordion {
  border: 1px solid #dbe5ec;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 10px;
}
.sellerGuideAccordion.complete,
.showingAccordion.complete {
  background: #f5f8f9;
}
.sellerAccordionHead,
.showingAccordionHead {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px;
  cursor: pointer;
  color: #17233a;
}
.sellerAccordionHead > span {
  flex: 1;
}
.sellerAccordionHead small,
.sellerAccordionHead em {
  display: block;
}
.sellerAccordionHead small {
  font-size: 9px;
  letter-spacing: 1px;
  color: #0d9694;
  font-weight: 900;
}
.sellerAccordionHead b {
  display: block;
  font-size: 17px;
  color: #082d63;
  margin: 2px 0;
}
.sellerAccordionHead em {
  font-size: 12px;
  color: #68788b;
  font-style: normal;
}
.sellerAccordionHead strong,
.showingAccordionHead > strong {
  font-size: 10px;
  color: #0d9694;
}
.sellerAccordionBody,
.showingAccordionBody {
  display: none;
  border-top: 1px solid #e5ebf0;
  padding: 15px;
}
.sellerGuideAccordion.open .sellerAccordionBody,
.showingAccordion.open .showingAccordionBody {
  display: block;
}
.showingDateTile {
  width: 52px;
  flex: 0 0 52px;
  text-align: center;
  background: #eaf8f7;
  border-radius: 9px;
  padding: 7px;
}
.showingDateTile b {
  display: block;
  font-size: 20px;
  color: #082d63;
}
.showingDateTile small {
  text-transform: uppercase;
  color: #0d9694;
  font-weight: 900;
}
.showingAccordionTitle {
  flex: 1;
  min-width: 0;
}
.showingAccordionTitle b {
  display: block;
  color: #082d63;
  font-size: 19px;
  line-height: 1.2;
}
.showingAccordionTitle small {
  display: block;
  color: #6c7b8d;
  margin-top: 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portalShowingStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
  background: #eff8fa;
}
.portalShowingStats div {
  text-align: center;
  background: #fff;
  border: 1px solid #dce8ed;
  border-radius: 10px;
  padding: 10px;
}
.portalShowingStats b {
  display: block;
  font-size: 22px;
  color: #082d63;
}
.portalShowingStats small {
  color: #66778c;
}
.guideCount {
  text-align: right;
  font-size: 11px;
  color: #69798c;
  margin: -10px 0 9px;
}
.portalActionCenter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #edba54;
  border-left: 5px solid #d88900;
  background: linear-gradient(135deg, #fff8e7, #fff);
  padding: 16px 18px;
}
.portalActionCenter small {
  color: #a45f00;
  font-weight: 900;
  letter-spacing: 1px;
}
.portalActionCenter h2 {
  margin: 4px 0 0;
  color: #5f3b00;
  font-size: 18px;
}
.portalActionItems {
  display: grid;
  gap: 7px;
  min-width: min(360px, 100%);
}
.portalActionItems button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #edd29b;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
  color: #17233a;
  text-align: left;
  cursor: pointer;
}
.portalActionItems span {
  color: #0c8f8d;
  font-weight: 800;
  white-space: nowrap;
}
.portalFormNeedsAction {
  border-left: 4px solid #d88900;
  background: #fffaf0;
  padding-left: 10px;
}
@media (max-width: 650px) {
  .portalActionCenter {
    align-items: stretch;
    flex-direction: column;
  }
  .portalShowingStats {
    grid-template-columns: repeat(2, 1fr);
  }
  .showingAccordionHead {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .showingAccordionTitle {
    min-width: 150px;
  }
  .showingAccordionHead .approvalStatus {
    order: 3;
    margin-left: 64px;
  }
  .portalNavigation {
    top: 0;
  }
}

/* Build 95.2: compact account-owner portal workspace. */
.agentPortalNavigation {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  margin: -2px 0 14px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #d9e5eb;
  border-radius: 12px;
  background: #fff;
}
.agentPortalNavigation button {
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: #edf2f7;
  color: #34445a;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.agentPortalNavigation button.active {
  background: #0fb7b4;
  color: #fff;
}
.agentShowingStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.agentShowingStats button {
  border: 1px solid #dbe6ec;
  border-radius: 10px;
  padding: 9px;
  background: #fff;
  color: #5c6d80;
  cursor: pointer;
}
.agentShowingStats button.active {
  border-color: #10b7b4;
  background: #eaf9f8;
}
.agentShowingStats b,
.agentShowingStats small {
  display: block;
}
.agentShowingStats b {
  color: #082d63;
  font-size: 20px;
}
.showingCompactRow {
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.showingCompactRow .sellerSuccessActions {
  display: none;
}
.showingCompactRow.expanded .sellerSuccessActions {
  display: flex;
}
.showingCompactRow.focusShowing {
  border-color: #10b7b4;
  box-shadow: 0 0 0 3px rgba(16, 183, 180, 0.14);
}
.agentShowingWhen,
.showingDashboardWhen {
  display: block;
  margin: 7px 0 3px;
  color: #082d63;
  font-size: 17px;
  line-height: 1.2;
}
.showingDashboardWhen {
  font-size: 18px;
}
.showingDashboardActions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.showingFeedbackDialog {
  width: min(760px, 96vw);
}
.showingFeedbackDialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.feedbackEyebrow {
  color: #0b9794;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.showingFeedbackDialog textarea {
  min-height: 210px;
  padding: 14px;
  resize: vertical;
  border: 1px solid #cbd8e3;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
}
.feedbackVisibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.feedbackVisibility label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #d8e3ea;
  border-radius: 11px;
  background: #f8fafc;
  cursor: pointer;
}
.feedbackVisibility b,
.feedbackVisibility small {
  display: block;
}
/* The radio, and only the radio. .sellerSuccessDialog input/select/textarea sets width:100% for
   the dialog's text fields, which also caught these radios: each one took the whole card and
   squeezed the title and help text to nothing, so the left card looked empty and the labels wrapped
   one letter per line beside it. The .approvalChoice block above already escapes the same rule the
   same way - this is the one that was missed. flex:0 0 auto stops the radio stretching, and
   min-width:0 lets the text column shrink inside its grid cell instead of overflowing it. */
.feedbackVisibility input[type="radio"] {
  width: auto !important;
  margin: 2px 0 0 !important;
  flex: 0 0 auto;
}
.feedbackVisibility label > span {
  flex: 1 1 auto;
  min-width: 0;
}
.feedbackVisibility small {
  margin-top: 4px;
  color: #68788b;
  line-height: 1.35;
}
.feedbackPreview {
  margin-top: 16px;
  padding: 15px;
  border-left: 4px solid #10b7b4;
  border-radius: 8px;
  background: #eefaf9;
  color: #24364d;
  line-height: 1.55;
}
.feedbackPreview small {
  display: block;
  margin-bottom: 6px;
  color: #0b8f8d;
  font-weight: 900;
  letter-spacing: 1px;
}
@media (max-width: 700px) {
  .agentShowingStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feedbackVisibility {
    grid-template-columns: 1fr;
  }
  .showingDashboardActions {
    width: 100%;
    justify-content: stretch;
  }
  .showingDashboardActions button {
    flex: 1;
  }
}
/* Email preview: the Deedlio mark and ™ in the header, and the agent's contact block at the foot,
   so the preview shows what the seller actually receives. */
.emailPreviewHead {
  display: block;
}
.emailPreviewLogo {
  display: block;
  border: 0;
  width: 170px;
  max-width: 60%;
  height: auto;
}
.emailPreviewHead sup {
  font-size: 10px;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
}
.emailPreviewSignature {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #e2e8ef;
  font-size: 13px;
  line-height: 1.5;
  color: #33445a;
}
.emailPreviewSignature b {
  display: block;
  color: #082d63;
}
/* Times the seller offered instead, and anything she wrote, shown on the showing row. */
.proposedTimes {
  margin-top: 8px;
  padding: 9px 11px;
  border-left: 3px solid #10b7b4;
  border-radius: 7px;
  background: #f1fbfa;
  font-size: 12px;
  color: #31445b;
}
.proposedTimes b {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0b8f8d;
}
.proposedTimes span {
  display: inline-block;
  margin: 5px 7px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c8e8e6;
  font-weight: 700;
}
.proposedTimes em {
  display: block;
  margin-top: 7px;
  font-style: italic;
  color: #5a6b80;
}