/* The signed-in app. Sits on top of afterclose-design.css and adds only what the app's screens need.
   No inline styles anywhere, so the strict content policy holds. */

.boot { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; }
.boot .cap { font-size: 15px; }
.mobile-only { display: none; }

/* who is signed in, and the mode */
.mode { padding: 0 10px; }
.mode .chip { white-space: normal; height: auto; min-height: 24px; padding: 3px 10px; }
.topbar .acting { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 6px 0 12px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); font-size: 14px; font-weight: 500; }
.topbar .acting > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .acting .btn { height: 30px; }

/* clients */
.list-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; flex-wrap: wrap; }
.list-head .search { max-width: 420px; }
table.t th.pick, table.t td.pick { width: 52px; }
table.t td .cap { display: block; }
.tile .v.money { font-size: 22px; }
.mcard .pick { padding-top: 2px; }
.mcard .row { gap: 6px; }
.tfoot .btn { margin-left: auto; }

/* client sheet */
.sheet-section h3 { margin-bottom: 10px; }
.policy .row { justify-content: space-between; }
.timeline .tl b { font-weight: 600; }

/* taken rate */
.line-card .card-head { margin-bottom: 8px; }
.goal { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.goal input { width: 72px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); padding: 0 10px; font-size: 15px; }
.forecast { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.forecast span { color: var(--text-2); }
.stat .need { font-size: 12.5px; font-weight: 600; color: var(--warn); }
.stat .need.met { color: var(--ok); }
.field.inline { flex-direction: row; align-items: center; gap: 10px; }
.field.inline input { width: auto; }
.field.inline label { white-space: nowrap; }
.tr-note { margin-top: 14px; }

/* email */
.aud-help { margin: -6px 0 14px; }
.aud-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.aud-block h3 { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills .btn { height: 34px; padding: 0 12px; font-size: 13.5px; font-weight: 500; }
.pills .btn .n { color: var(--text-2); font-weight: 500; }
.pills .btn[aria-pressed="true"] .n { color: inherit; }
.aud-list { display: flex; flex-direction: column; max-height: 420px; overflow: auto; margin: 0 -8px; }
.aud-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; font-size: 14px; min-width: 0; }
.aud-row .grow b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-row .grow span { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-row.out { opacity: .62; }
.aud-ex { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.aud-ex:first-child { border-top: 0; }
#aud-excluded:not(:empty) { margin-bottom: 10px; }
.mail.preview { width: 100%; }
.pv-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border-radius: 12px; text-align: left; border-top: 1px solid var(--line); min-height: 52px; }
.draft-item:first-child { border-top: 0; }
.draft-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.draft-item[aria-current="true"] { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.draft-item b { display: block; font-size: 14.5px; font-weight: 600; }
.draft-item span { display: block; font-size: 12.5px; color: var(--text-2); }

/* email tabs, automated emails and holidays */
.email-tabs { align-self: flex-start; max-width: 100%; }
.auto-head { display: flex; gap: 14px; align-items: center; padding: 18px 24px 12px; }
.auto-head .ic { color: var(--accent-text); }
.auto-head .cap { display: block; margin-top: 2px; }
.auto-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); min-height: 64px; }
.auto-row .n b { display: block; font-size: 15px; font-weight: 600; }
.auto-row .n span { display: block; font-size: 12.5px; color: var(--text-2); }
.auto-row .n .subj { color: var(--text); margin-top: 2px; }
.auto-row .n .auto-note { color: var(--info); margin-top: 2px; }
.auto-row .s { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.tp-facts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hol-head { padding: 18px 24px 6px; flex-wrap: wrap; }
.hol-pic { gap: 10px; }
.hol-h3 { margin-bottom: 12px; }
.hol-cap { margin-top: 10px; }
.hrow .s .link { min-height: 0; }

/* an email as the client gets it: white paper and dark ink, in light and dark mode alike, like a mail app */
.mail-full { width: 100%; flex: none; }   /* never squeezed by the sheet's column: the sheet scrolls instead */
.mail-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mail-line { display: flex; gap: 10px; min-width: 0; }
.mail-line .k { width: 58px; flex: none; color: var(--text-2); }
.mail-line > :last-child { min-width: 0; overflow-wrap: anywhere; }
.mail-body { background: #ffffff; color: #1e2430; padding: 22px 20px; font-size: 15.5px; line-height: 1.65; }
.mail-body p { margin: 0 0 16px; overflow-wrap: anywhere; }
.mail-body ol { margin: 0 0 16px; padding-left: 22px; }
.mail-body li { margin: 0 0 8px; }
.mail-body b { font-weight: 700; }
.mailprev .mail-img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 12px; margin: 0 0 18px; }
.mail-card { background: rgb(238, 247, 240); border: 1px solid rgb(207, 232, 214); border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; }
.mail-sig { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #1e2430; }
.mail-sig a { color: #2456c8; text-decoration: underline; }
.mailprev .mail-photo, .mail-photo { display: block; width: 88px; height: 88px; border-radius: 12px; object-fit: cover; flex: none; }
.mail-sig-lines { min-width: 0; overflow-wrap: anywhere; }
.mail-foot { margin: 22px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b7280; }
.mail-foot + .mail-foot { margin-top: 4px; }

/* the sheet's footer: a note, then this sheet's buttons */
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-actions:empty, .sheet-foot .cap:empty { display: none; }

/* a client's emails */
.ce-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.card-head + .ce-row { border-top: 0; padding-top: 0; }
.ce-row .grow b { display: block; font-size: 14.5px; font-weight: 600; }
.ce-row .grow span { display: block; font-size: 12.5px; color: var(--text-2); }
.ce-row .grow .ce-caution { color: var(--warn); }
#client-emails > .cap { margin-top: 8px; }

/* profile */
.pf-photo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pf-img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); }
.pf-photo-actions { gap: 8px; flex: 1; min-width: 180px; }
.pf-photo-actions .btn { align-self: flex-start; }
.pf-sig { background: #ffffff; border-radius: 14px; padding: 16px; box-shadow: 0 0 0 1px var(--line); }
.pf-sig .mail-sig { margin-top: 0; }
.pf-sig-note { margin-top: 10px; }

/* upload */
.drop { cursor: pointer; }
.drop b { font-size: 16px; }
.drop:hover { border-color: var(--accent); }
.drop.over { border-color: var(--accent); }
.drop.off { opacity: .5; cursor: not-allowed; }
.drop.off:hover { border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.up-file-name { margin: 12px 0; }
.up-file-name:empty { display: none; }
.up-wrong { margin: 0 0 12px; }
.up-wrong .row { margin-top: 8px; }
.up-for-actions { margin-top: 14px; }
.kpis { margin-bottom: 16px; }
.up-bad table.plain td { vertical-align: top; }
.up-actions { margin-top: 16px; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.hist-row:first-child { border-top: 0; }
.hist-row .grow b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.hist-row .grow span { display: block; font-size: 12.5px; color: var(--text-2); }

/* agents */
.ag-table td, .ag-table th { white-space: nowrap; }
.ag-table td:first-child, .ag-table th:first-child { padding-left: 20px; }
.ag-table td:last-child, .ag-table th:last-child { padding-right: 20px; }

@media (max-width: 1023px) {
  .mobile-only { display: grid; }
  .topbar .acting { position: fixed; left: var(--edge); right: var(--edge); top: calc(52px + var(--edge) * 2 + var(--safe-top)); }
  .topbar .acting ~ .top-actions .chip { display: none; }
}
@media (max-width: 767px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-head { padding: 16px 16px 10px; }
  .auto-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 16px; }
  .auto-row .s { grid-row: 2; grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; }
  .auto-row .btn { grid-row: 1 / span 2; grid-column: 2; }
  .hol-head { padding: 16px 16px 6px; }
  .mail-body { padding: 18px 16px; }
  .sheet-actions { flex: 1 1 100%; }
  .sheet-actions .btn { flex: 1; }
  .list-head { padding: 14px 16px 10px; }
  .pills { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}