@font-face {
  font-family: Vazirmatn;
  src: url("/vendor/vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --canvas: #f4efe5;
  --paper: #fffdf7;
  --ink: #1e302e;
  --muted: #525e54;
  --line: #dedacc;
  --dark: #1c3434;
  --accent: #315952;
  --verified: #a6d6a4;
  --review: #e8bcff;
  --blocked: #ff9679;
  --radius: 25px;
  --tblr-body-font-family: Vazirmatn, sans-serif;
  --tblr-body-color: var(--ink);
  --tblr-body-bg: var(--canvas);
  --tblr-border-color: var(--line);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Vazirmatn, sans-serif; }
[hidden] { display: none !important; }
a { color: inherit; }
button, select, input, textarea { font: inherit; }
button { cursor: pointer; }
:is(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.mood :focus-visible, .pulse :focus-visible { outline-color: #ffe6bb; }
button { transition: background-color .18s, color .18s, border-color .18s; }
h1, h2, p { margin: 0; }
h1, h2, h3 { color: inherit; }
h1 { font-size: clamp(33px, 4.6vw, 65px); line-height: 1.14; letter-spacing: -.065em; font-weight: 920; }
h2 { font-size: clamp(21px, 2vw, 27px); line-height: 1.3; letter-spacing: -.037em; font-weight: 880; }
.wrap { width: min(1140px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 5; inset: 12px 12px auto auto; padding: 10px; background: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.mast-content { min-height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.identity { justify-self: start; display: inline-flex; gap: 9px; align-items: center; text-decoration: none; font-size: 20px; font-weight: 880; white-space: nowrap; }
.identity:hover { color: var(--ink); }
.mark { width: 36px; height: 36px; position: relative; display: block; border-radius: 12px; background: #213938; }
.mark::before { content: ""; position: absolute; inset: 10px 6px auto auto; width: 20px; aspect-ratio: 1; background: #f3d596; mask: url("/vendor/fantasy/moon.svg") center / contain no-repeat; transform: rotate(-6deg); }
.mark::after { content: ""; position: absolute; top: 8px; left: 8px; width: 7px; aspect-ratio: 1; background: #f9e4b0; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.top-nav, .analysis-tabs { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; font-weight: 660; }
.top-nav a, .analysis-tabs a { padding: 9px 14px; border-radius: 10px; text-decoration: none; white-space: nowrap; transition: background-color .18s, color .18s; }
.top-nav a:is(:hover, [aria-current]), .analysis-tabs a:is(:hover, [aria-current]) { background: #e6eee5; color: #24473e; }
.session-tools { grid-column: -2 / -1; justify-self: end; display: flex; align-items: center; gap: 7px; }
.session-label { color: var(--muted); font-size: 12px; font-weight: 710; white-space: nowrap; }
.workspace-bar { display: flex; align-items: center; padding-block: 18px 14px; }
.analysis-tabs { width: fit-content; max-width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 4px; border-radius: 14px; }

.app-status { margin-block: 48px; color: var(--muted); }
.login { width: min(100%, 440px); margin: 75px auto; padding: 30px; background: var(--paper); }
.login h1 { margin-bottom: 17px; font-size: 36px; }
.login form, .login label { display: grid; gap: 10px; }
.form-message { min-height: 1.2em; margin: 7px 0; color: #a1283e; }
.week-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.week-label { flex: none; font-size: 12px; font-weight: 660; color: var(--muted); }
.calendar-mark { flex: none; width: 15px; height: 14px; position: relative; border: 1.5px solid var(--accent); border-radius: 3px; }
.calendar-mark::before { content: ""; position: absolute; inset: 3px 0 auto; border-top: 1.5px solid var(--accent); }
.calendar-mark::after { content: ""; position: absolute; width: 7px; height: 3px; inset: -3px 2.5px auto; border-inline: 1.5px solid var(--accent); }
.form-select, .form-control { border-radius: 8px; background-color: var(--paper); border-color: #cfd5c8; color: var(--ink); }
.form-select { padding-block: 9px; }
.week-control .form-select { min-width: 0; width: auto; padding-block: 5px; font-size: 13px; font-weight: 760; min-height: 34px; box-shadow: none; }

.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.mood {
  --sky: #172d35;
  --bloom: #4d6364;
  --horizon: #254744;
  position: relative;
  isolation: isolate;
  min-height: 490px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  color: #fff6df;
  background: var(--sky);
  border: 1px solid #263f3d;
  border-radius: 29px;
  box-shadow: 0 13px 28px #203b301a;
  transition: background-color .45s;
}
.mood-scenery { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 29% 39%, var(--bloom), transparent 52%); }
.mood-scenery::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 11% 22%, #ffefbb 0 .8px, transparent 1.8px), radial-gradient(circle at 38% 10%, #fff0c4 0 .8px, transparent 2px), radial-gradient(circle at 48% 31%, #fce4a5 0 .7px, transparent 1.7px), radial-gradient(circle at 8% 65%, #d4e8df 0 .8px, transparent 1.8px), radial-gradient(circle at 57% 19%, #edd29c 0 .8px, transparent 2px), radial-gradient(circle at 76% 17%, #f7e6af 0 .6px, transparent 1.6px), radial-gradient(circle at 16% 83%, #dce5d0 0 .9px, transparent 1.9px), radial-gradient(circle at 53% 65%, #eed7a1 0 .7px, transparent 1.9px);
  opacity: .88;
}
.mood-scenery::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 51%;
  background: radial-gradient(ellipse 47% 49% at 7% 111%, #122829 99%, transparent 100%), radial-gradient(ellipse 49% 58% at 80% 118%, #142d2c 99%, transparent 100%), radial-gradient(ellipse 38% 60% at 31% 128%, #244440 99%, transparent 100%), radial-gradient(ellipse 45% 50% at 97% 105%, var(--horizon) 99%, transparent 100%);
  opacity: .8;
}
.mood-scenery i { position: absolute; width: 18px; aspect-ratio: 1; background: #efdbab; clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%); }
.mood-scenery i:nth-child(1) { left: 11%; top: 34%; }
.mood-scenery i:nth-child(2) { left: 49%; top: 18%; width: 12px; opacity: .65; }
.mood-scenery i:nth-child(3) { left: 44%; top: 71%; width: 11px; opacity: .7; }
.mood[data-mood="0"] { --sky: #1c2440; --bloom: #42466c; --horizon: #363c59; }
.mood[data-mood="1"] { --sky: #1c2940; --bloom: #4c546e; --horizon: #354861; }
.mood[data-mood="2"] { --sky: #1c303e; --bloom: #4e6274; --horizon: #314f61; }
.mood[data-mood="4"] { --sky: #253c35; --bloom: #687957; --horizon: #536142; }
.mood[data-mood="5"] { --sky: #3c4531; --bloom: #8b774d; --horizon: #77734c; }
.mood-info { position: relative; z-index: 2; padding: 42px clamp(28px, 5.4vw, 82px) 42px 0; min-width: 0; }
.mood h1 { font-size: clamp(31px, 4.3vw, 61px); letter-spacing: -.045em; font-weight: 870; }
.score {
  --score-size: clamp(59px, 8.7vw, 116px);
  display: block;
  margin-block: 16px 0;
  font-size: var(--score-size);
  line-height: 1.06;
  letter-spacing: -.07em;
  font-weight: 930;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.score-long { font-size: calc(var(--score-size) * .74); }
.score-unset { font-size: clamp(58px, 7vw, 98px); line-height: .93; letter-spacing: .05em; }
.mood-info p { margin-top: 6px; line-height: 1.7; color: #e7e3c7; font-size: 14px; }
.mood-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; margin-top: 26px; }
.open-analysis { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 15px; border-radius: 12px; background: #f2d89f; color: #233630; font-size: 13px; text-decoration: none; font-weight: 850; }
.open-analysis:hover { color: #152620; background: #ffe7b1; }
.mood-controls { margin-top: 12px; padding: 11px 13px; width: min(100%, 250px); border: 1px solid #eee1b740; border-radius: 10px; background: #132825b3; }
.scale-labels { display: flex; justify-content: space-between; gap: 7px; margin-top: 3px; color: #e7e3c7; font-size: 10px; }
.preview-button {
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  padding: 7px 8px;
  color: #fff6df;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.preview-button:hover, .preview-button[aria-expanded="true"] { background: #fff1d41c; }
#demo-controls { margin-top: 8px; }
#demo-controls label { display: flex; justify-content: space-between; font-size: 12px; }
#demo-controls input { display: block; width: 100%; margin-top: 5px; accent-color: #ffdd9f; }
.portrait-space { position: relative; display: grid; place-items: center; min-height: 445px; }
.portrait-disc { position: absolute; width: min(75%, 374px); aspect-ratio: 1; border: 1px solid #ffe8ad80; border-radius: 50%; }
.portrait-disc::before, .portrait-disc::after, .portrait-disc span { content: ""; position: absolute; border-radius: 50%; }
.portrait-disc::before { inset: -12px; border: 1px dashed #f3d59e60; transform: rotate(-23deg); }
.portrait-disc::after { inset: -31px; border: 1px solid #edd2a835; }
.portrait-disc span { z-index: 1; width: 11px; height: 11px; background: #ffe8bc; border: 2px solid var(--sky); box-shadow: 0 0 0 1px #ffe8bc, 0 0 14px #fff1ae80; }
.portrait-disc span:first-child { top: 8%; inset-inline-start: 18%; }
.portrait-disc span:last-child { bottom: 12%; inset-inline-end: 12%; width: 7px; height: 7px; }
.portrait { position: relative; width: min(69%, 335px); aspect-ratio: 1; border: 5px solid #e9cc8e; border-radius: 50%; overflow: hidden; isolation: isolate; background: #f7edca; box-shadow: 0 0 65px #f9da8b21, 0 16px 38px #10201b84; }
.portrait-frame { position: absolute; inset: 0; display: block; background: url("/portrait-atlas.png") no-repeat; background-size: 300% 200%; transition: opacity .18s; }
.portrait-note {
  position: absolute;
  bottom: 26px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 7px 17px;
  border: 1px solid #edcf93;
  border-radius: 18px;
  background: #f3d8a0;
  color: #233630;
  font-size: 13px;
  font-weight: 910;
  white-space: nowrap;
  box-shadow: 0 5px 14px #13272371;
}

.home-team { margin-block: 28px 42px; }
.home-team-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.home-team-heading h2 { font-size: 19px; font-weight: 850; }
.home-team-heading a { color: #33544b; text-decoration: none; font-size: 13px; }
.home-team-heading a:hover { text-decoration: underline; }
.team-at-a-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.team-shortcut { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-align: start; }
.team-shortcut:hover { background: #edf1e7; border-color: #bccbb9; }
.team-initial { display: grid; place-items: center; flex: none; width: 36px; aspect-ratio: 1; border-radius: 12px; background: #ebd9ab; color: #544024; font-size: 18px; font-weight: 830; }
.team-shortcut[data-member="shokoufeh"] .team-initial { background: #e0dcea; color: #493961; }
.team-shortcut[data-member="hassan"] .team-initial { background: #d7e6ca; color: #37543e; }
.team-shortcut[data-member="honey"] .team-initial { background: #ead7cc; color: #603f37; }
.team-shortcut-label { display: grid; gap: 2px; }
.team-shortcut-label strong { font-size: 14px; line-height: 1.2; }
.team-shortcut-label small { color: var(--muted); font-size: 11px; }

.pulse { min-width: 0; padding: 23px 22px 17px; background: var(--dark); color: #fff2e8; border: 0; }
.pulse-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.pulse-heading p { margin-top: 3px; color: #d3bdcd; font-size: 12px; }
.metric-switch {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  background: #1d171f;
  border: 1px solid #625063;
  border-radius: 8px;
}
.metric-switch button { padding: 3px 7px; color: #e0cddd; background: transparent; border: 0; border-radius: 5px; font-size: 11px; font-weight: 800; }
.metric-switch button:is(:hover, [aria-pressed="true"]) { color: #2b1f2e; background: #efd6e9; }
.trend {
  --chart-height: 147px;
  --date-height: 26px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  height: calc(var(--chart-height) + var(--date-height));
  margin-block: 24px 12px;
}
.trend-axis { height: var(--chart-height); display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-6px); font-size: 10px; color: #d3bdcd; line-height: 12px; }
.trend-columns { position: relative; display: flex; gap: 4px; padding-inline: 3px; min-width: 0; }
.trend-columns::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--date-height);
  border-bottom: 1px solid #675467;
  background: repeating-linear-gradient(to bottom, #675467 0 1px, transparent 1px 25%);
  pointer-events: none;
}
.trend-week { position: relative; flex: 1; min-width: 0; display: grid; grid-template-rows: var(--chart-height) var(--date-height); align-items: end; justify-items: center; }
.column {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  width: min(53px, 65%);
  height: var(--value);
  min-height: 3px;
  border-radius: 7px 7px 2px 2px;
  background: #e8bcff;
}
.column .segment { background: var(--segment); }
.column .segment:nth-last-child(2) { border-radius: 7px 7px 0 0; }
.verified { --segment: var(--verified); }
.review { --segment: var(--review); }
.blocked { --segment: var(--blocked); }
.column.missing { width: min(53px, 49%); border-top: 2px dashed #ac93a9; background: transparent; }
.column output { position: absolute; inset-inline-start: 50%; bottom: calc(100% + 1px); transform: translateX(50%); line-height: 1.2; font-size: 12px; color: #ffefe4; white-space: nowrap; }
.trend-week.selected .column output { font-weight: 900; }
.trend-date { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d7bed2; font-size: 10px; }
.trend-week.selected .trend-date { color: #fff1e5; font-weight: 850; }
.pulse-footer { margin-top: auto; }
.status-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.status-total { border-top: 2px solid var(--segment); padding: 5px 7px; border-radius: 4px; background: #392d3a; }
.status-total strong { display: block; line-height: 1.15; font-size: 19px; font-weight: 880; }
.status-total span { color: #ead8e5; font-size: 10px; white-space: nowrap; }
.coverage { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; margin-top: 8px; border-top: 1px solid #665063; color: #dfcddd; font-size: 11px; }
.coverage strong { color: #fff1e4; }

.section { margin-block: 18px 44px; scroll-margin-top: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 15px; }
.section-heading p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.strong { padding: 9px 13px; border: 1px solid transparent; border-radius: 8px; background: #315952; color: #fff8ee; font-size: 13px; font-weight: 850; white-space: nowrap; }
.strong:hover { background: #20463e; }
.strong span { margin-inline-start: 5px; }
.text-button { background: transparent; border: 0; color: var(--ink); padding: 5px 0; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.text-button:disabled { color: #756b71; cursor: default; }
.member-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.member-card {
  --member-color: #f1c3bc;
  --member-ink: #652938;
  min-width: 0;
  padding: 14px 15px 10px;
  border-radius: 12px;
  background: var(--paper);
  border-top: 3px solid var(--member-color);
}
.member-card[data-member="shokoufeh"] { --member-color: #e3c7ed; --member-ink: #502e5e; }
.member-card[data-member="hassan"] { --member-color: #c8dfc4; --member-ink: #305537; }
.member-card[data-member="honey"] { --member-color: #f1d599; --member-ink: #644822; }
.member-top { display: flex; align-items: center; gap: 9px; }
.initial { flex: none; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 8px; background: var(--member-color); color: var(--member-ink); font-size: 20px; font-weight: 920; }
.member-top h3 { margin: 0; font-size: 17px; font-weight: 880; line-height: 1.2; }
.member-top p { color: var(--muted); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.member-activity { display: flex; align-items: baseline; gap: 5px; margin-block: 10px 6px; }
.member-activity strong { font-size: 28px; line-height: 1; font-weight: 900; }
.member-activity > span { color: var(--muted); font-size: 11px; }
.member-segments { display: flex; gap: 3px; flex-wrap: wrap; align-self: center; justify-content: end; margin-inline-start: auto; max-width: 56%; }
.member-segments i { width: 7px; height: 17px; background: var(--segment); border-radius: 2px; border: 1px solid #52284c23; }
.member-score, .member-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 11px; color: var(--muted); }
.member-score { padding: 4px 7px; border-radius: 5px; background: #f1efe3; }
.member-score strong { color: #495247; }
.member-score.is-scored strong { color: #2d5b4d; font-size: 14px; }
.member-coverage { display: block; color: var(--muted); font-size: 9px; }
.member-reason { color: var(--muted); overflow-wrap: anywhere; font-size: 12px; margin-top: 6px; }
.member-footer { margin-top: auto; padding-top: 7px; }
.member-link { border: 0; padding: 3px 1px; color: #8b2d44; background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: 11px; font-weight: 780; white-space: nowrap; }
.member-link:hover { color: #542238; }

.evidence-section { margin-bottom: 48px; }
.filters { display: flex; gap: 7px; }
.filters select { min-width: 132px; font-size: 12px; }
.evidence { border-radius: 13px; background: var(--paper); overflow: hidden; }
.event + .event { border-top: 1px solid var(--line); }
.event summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 67px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; padding: 10px 13px; transition: background-color .18s; }
.event summary:focus-visible { outline-offset: -3px; }
.event summary::-webkit-details-marker { display: none; }
.event summary:hover { background: #f4f2e6; }
.event-date { padding-block: 5px; border-radius: 6px; background: #eee9d9; text-align: center; font-size: 10px; font-weight: 790; color: #554e32; }
.event summary small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.event summary strong { font-size: 14px; font-weight: 820; }
.event summary::after { content: "+"; font: 19px sans-serif; text-align: center; color: #784358; }
.event[open] summary::after { content: "−"; }
.event-content { padding: 2px 92px 13px 13px; color: #564852; font-size: 13px; line-height: 1.9; }
.event-content a { color: #8e2b43; text-decoration: underline; text-underline-offset: 3px; font-weight: 790; }
.status-chip { padding: 3px 6px; border-radius: 5px; white-space: nowrap; font-size: 10px; font-weight: 760; }
.status-chip.verified { background: #e0eedc; color: #2d5531; }
.status-chip.review { background: #f1e0f6; color: #643e70; }
.status-chip.blocked { background: #fae1d8; color: #81382d; }
.empty { padding: 21px; color: var(--muted); font-size: 13px; }
dialog { width: min(440px, calc(100% - 26px)); border: 1px solid #b5959c; border-radius: 15px; background: var(--paper); color: var(--ink); padding: 22px; }
dialog::backdrop { background: #271b2ac9; }
dialog form { display: grid; gap: 7px; }
dialog p { color: var(--muted); font-size: 13px; }
dialog label { font-size: 13px; }
.close-button { position: absolute; top: 12px; inset-inline-end: 12px; background: transparent; border: 0; font-size: 23px; color: var(--ink); }
.dialog-actions { display: flex; align-items: center; gap: 16px; }

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 42px); }
  .mood { min-height: 415px; }
  .portrait-space { min-height: 390px; }
  .pulse { padding-inline: 16px; }
  .portrait-disc::after { inset: -16px; }
}

@media (max-width: 700px) {
  .wrap { width: calc(100% - 28px); }
  .mast-content { min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding-block: 8px 4px; }
  .identity { font-size: 17px; gap: 7px; }
  .mark { width: 32px; height: 32px; border-radius: 9px; }
  .mark::before { width: 16px; }
  .mark::after { width: 6px; left: 7px; }
  .session-tools { grid-column: 2; grid-row: 1; }
  .top-nav { grid-column: 1 / -1; justify-content: space-between; margin-top: 4px; }
  .top-nav a { flex: 1; text-align: center; }
  .top-nav a, .analysis-tabs a { padding-inline: clamp(8px, 2.5vw, 14px); }
  .workspace-bar { padding-block: 12px 10px; }
  .week-control .form-select { font-size: 12px; }
  h1 { font-size: clamp(24px, 6.8vw, 44px); }
  .mood { min-height: 0; grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .mood-scenery { background: radial-gradient(ellipse at 50% 25%, var(--bloom), transparent 50%); }
  .mood-scenery i:nth-child(1) { left: 13%; top: 27%; }
  .mood-scenery i:nth-child(2) { left: 81%; top: 16%; }
  .mood-scenery i:nth-child(3) { left: 84%; top: 48%; }
  .mood-info { padding: 6px 14px 24px; text-align: center; }
  .mood-info p { font-size: 12px; }
  .mood h1 { font-size: 29px; }
  .score { --score-size: clamp(63px, 17vw, 80px); margin-top: 7px; }
  .mood-actions { justify-content: center; margin-top: 17px; }
  .mood-controls { margin-inline: auto; text-align: start; }
  .portrait-space { grid-row: 1; min-height: clamp(230px, 71vw, 305px); }
  .portrait { width: clamp(154px, 53vw, 225px); border-width: 3px; }
  .portrait-disc { width: clamp(183px, 61vw, 260px); }
  .portrait-disc::before { inset: -6px; }
  .portrait-disc::after { inset: -13px; }
  .portrait-note { bottom: 12px; font-size: 12px; padding: 4px 12px; }
  .home-team { margin-block: 18px 33px; }
  .team-at-a-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-shortcut { min-height: 60px; gap: 7px; padding-inline: 8px; }
  .team-initial { width: 30px; border-radius: 9px; font-size: 15px; }
  .pulse { padding: 16px; }
  .trend { --chart-height: 125px; margin-block: 16px 10px; }
  .section { margin-top: 13px; }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .member-card { padding: 10px 8px 7px; }
  .initial { width: 31px; height: 31px; font-size: 16px; }
  .member-top { gap: 6px; }
  .member-top p { font-size: 10px; }
  .member-footer { flex-wrap: wrap; }
  .evidence-section .section-heading { flex-wrap: wrap; gap: 7px; }
  .filters { width: 100%; }
  .filters select { flex: 1; min-width: 0; }
  .event summary { grid-template-columns: minmax(0, 1fr) auto 13px; gap: 5px; padding: 9px; }
  .event-date { grid-column: 1 / -1; justify-self: start; padding: 3px 6px; }
  .event summary strong { font-size: 12px; }
  .event-content { padding: 0 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.impact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
.impact-chart, .impact-details { min-width: 0; padding: 19px; border-radius: 15px; background: var(--paper); }
.impact-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 15px; color: var(--muted); font-size: 12px; }
.impact-legend span { display: inline-flex; align-items: center; gap: 6px; }
.impact-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--impact-color); }
.impact-state-confirmed { --impact-color: #537b58; --impact-tint: #e0eedc; --impact-ink: #2d5531; }
.impact-state-progress { --impact-color: #9260a3; --impact-tint: #f1e0f6; --impact-ink: #643e70; }
.impact-state-gap { --impact-color: #b4554a; --impact-tint: #fae1d8; --impact-ink: #81382d; }
.impact-bars { display: grid; gap: 5px; margin-top: 13px; }
.impact-row { display: grid; gap: 7px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: transparent; text-align: start; }
.impact-row:hover, .impact-row[aria-pressed="true"] { border-color: #dec5ca; background: #f7ebe8; }
.impact-row-label { display: flex; justify-content: space-between; gap: 6px; align-items: center; min-height: 20px; font-size: 13px; }
.impact-row-total { min-width: 19px; color: var(--muted); text-align: center; font-weight: 790; }
.impact-track { display: flex; height: 10px; overflow: hidden; border-radius: 3px; background: #eadfda; }
.impact-segment { height: 100%; background: var(--impact-color); }
.impact-segment + .impact-segment { border-inline-start: 1px solid var(--paper); }
.impact-scale-label { margin: 12px 10px 0; font-size: 11px; color: var(--muted); }
.impact-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.impact-detail-heading h3 { margin: 0; font-size: 16px; font-weight: 860; }
.impact-detail-heading > span { flex: none; color: var(--muted); font-size: 11px; }
.impact-list { max-height: 305px; overflow-y: auto; scrollbar-gutter: stable; }
.impact-item { padding: 10px 0; }
.impact-item + .impact-item { border-top: 1px solid var(--line); }
.impact-item-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; font-size: 11px; color: var(--muted); }
.impact-chip { border-radius: 4px; padding: 2px 6px; background: var(--impact-tint); color: var(--impact-ink); font-weight: 730; }
.impact-item h4 { margin: 4px 0; color: var(--ink); font-size: 13px; font-weight: 820; line-height: 1.6; }
.impact-item p { color: var(--muted); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.impact-item a { display: inline-block; margin-top: 3px; color: #8e2b43; font-size: 11px; font-weight: 780; text-decoration: underline; text-underline-offset: 3px; }
.mood-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.mood-modes button { padding: 4px 9px; border: 1px solid #fff4e85c; border-radius: 20px; background: #36172b37; color: #fff4e8; font-size: 11px; line-height: 1.5; }
.mood-modes button:is(:hover, [aria-pressed="true"]) { background: #fff4e8; color: #652337; }
.help-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.field-help {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid #bac5b6;
  border-radius: 50%;
  background: #e9eee3;
  color: #3b5144;
  font: 800 12px/1 Vazirmatn, sans-serif;
}
.field-help::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.field-help:is(:hover, :focus-visible, [aria-describedby]) { background: #f8e4b4; border-color: #cdaa63; color: #473318; }
.mood .field-help, .pulse .field-help { background: #fff4d125; border-color: #f4dfb27a; color: #fff0d5; }
.mood .field-help:is(:hover, :focus-visible, [aria-describedby]), .pulse .field-help:is(:hover, :focus-visible, [aria-describedby]) { background: #f8e4b4; color: #473318; }
.workspace-bar { gap: 8px; }
.mood-heading { gap: 12px; }
.demo-heading label { flex: 1; }
.proposal-mean > .help-heading { display: inline-flex; }
.login .help-heading { margin-bottom: 14px; }
.login .help-heading h1 { margin-bottom: 0; }
.field-tip {
  position: fixed;
  inset: auto;
  z-index: 20;
  width: max-content;
  max-width: min(310px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 14px;
  overflow: visible;
  border: 1px solid #e1ca94;
  border-radius: 17px 14px 18px 18px;
  background: #fffae8;
  box-shadow: 0 6px 18px #2b38232e;
  color: #313d30;
  font-size: 12px;
  line-height: 1.78;
  text-align: start;
  overflow-wrap: anywhere;
}
.field-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-tail);
  top: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-top: 1px solid #e1ca94;
  border-left: 1px solid #e1ca94;
}
.field-tip[data-above="true"]::after { top: auto; bottom: -6px; transform: translateX(-50%) rotate(225deg); }
.team-shortcut-tile { min-width: 0; position: relative; }
.team-shortcut-tile > .field-help { position: absolute; inset-block-start: 50%; inset-inline-end: 10px; transform: translateY(-50%); }
.team-shortcut { width: 100%; padding-inline-end: 34px; }
.member-avatar { position: relative; isolation: isolate; overflow: hidden; }
.member-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-initial { width: 46px; }
.initial { width: 48px; height: 48px; border-radius: 12px; }
[data-member="hassan"] .member-avatar img { transform-origin: 42% 31%; transform: scale(4.5); }
[data-member="saleh"] .member-avatar img { transform-origin: 44% 26%; transform: scale(1.24); }
[data-member="shokoufeh"] .member-avatar img { transform-origin: 50% 48%; transform: scale(1.42); }
[data-member="honey"] .member-avatar img { transform-origin: 71% 18%; transform: scale(1.55); }
#mood-title { scroll-margin-top: 16px; }
.proposal-draft { align-self: center; flex: none; border: 1px solid #d5beba; border-radius: 30px; padding: 5px 11px; background: #fbefe8; color: #6d3445; font-size: 11px; font-weight: 720; }
.proposal-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.23fr); gap: clamp(14px, 3vw, 32px); align-items: center; padding: 19px clamp(15px, 2.4vw, 27px); background: #e7e9d9; border-color: #daddc8; border-radius: 16px; }
.proposal-summary h3 { margin: 0 0 5px; font-size: clamp(16px, 2vw, 21px); font-weight: 870; }
.proposal-summary p { margin: 0; color: #604653; font-size: 12px; line-height: 1.75; }
.proposal-scenarios { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.proposal-scenario { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 9px 5px; border: 1px solid #d5bdcb; border-radius: 9px; background: #fff8f2; color: #5d344a; text-align: center; text-decoration: none; font-size: 11px; line-height: 1.55; }
.proposal-scenario:hover { background: #fff; border-color: #946680; color: #542039; }
.proposal-scenario strong { font-size: clamp(22px, 2.8vw, 34px); line-height: 1.35; font-weight: 930; }
.proposal-scenario-mood { font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.proposal-scenario-effect { color: #684752; font-size: 11px; font-weight: 770; text-align: center; }
.proposal-mean { margin-top: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: #fbf2eb; }
.proposal-mean h3 { display: inline; margin: 0; font-size: 13px; font-weight: 850; }
.proposal-mean p { display: inline; margin-inline-start: 9px; color: var(--muted); font-size: 11px; }
.proposal-factors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.proposal-factor { min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 7px; padding: 5px 7px; border: 1px solid #e4d5d0; border-radius: 6px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 11px; }
.proposal-factor:hover { border-color: #8d6477; color: var(--ink); }
.proposal-factor bdi { font-weight: 820; }
.proposal-factor[data-direction="down"] bdi { color: #963539; }
.proposal-factor[data-direction="up"] bdi { color: #276748; }
.proposal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; margin-top: 13px; }
.proposal-card { display: block; min-width: 0; padding: clamp(11px, 2vw, 20px); background: var(--paper); border-radius: 16px; }
.proposal-card-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 0 7px 13px; border-bottom: 1px solid var(--line); }
.proposal-card-head h3 { margin: 0 0 2px; font-size: 21px; font-weight: 900; }
.proposal-card-head p { margin: 0; color: var(--muted); font-size: 11px; }
.proposal-score { display: inline-flex; gap: 5px; align-items: baseline; flex: none; color: #702a46; font-size: 31px; font-weight: 930; line-height: 1.3; }
.proposal-score small { font-size: 11px; font-weight: 650; }
.proposal-key { display: grid; grid-template-columns: 1fr auto 1fr; margin: 9px 8px 5px; direction: ltr; color: var(--muted); font-size: 10px; }
.proposal-key span:last-child { text-align: right; }
.proposal-row { --proposal-sign: #665c60; margin-bottom: 2px; border: 1px solid transparent; border-radius: 8px; }
.proposal-row[data-direction="down"] { --proposal-sign: #aa363a; }
.proposal-row[data-direction="up"] { --proposal-sign: #327450; }
.proposal-row[data-direction="unscored"] { --proposal-sign: #6a624d; }
.proposal-row[data-direction="unscored"] .proposal-track { display: none; }
.proposal-row[data-direction="unscored"] .proposal-change { font-size: 10px; white-space: nowrap; }
.proposal-card-head .proposal-partial { color: #715f35; font-weight: 750; }
.proposal-row:is(:hover, [open]) { background: #f9eee8; border-color: #e8d8d1; }
.proposal-row.proposal-priority { background: #f7e6e2; border-color: #e7c9c7; }
.proposal-row-handle { display: grid; gap: 5px; padding: 8px; color: var(--ink); list-style: none; cursor: pointer; }
.proposal-row-handle::-webkit-details-marker { display: none; }
.proposal-row-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proposal-indicator { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 12px; }
.proposal-indicator strong::before { content: '＋'; margin-inline-end: 4px; color: #845169; font-size: 10px; }
.proposal-row[open] .proposal-indicator strong::before { content: '−'; }
.proposal-indicator small { white-space: nowrap; color: var(--muted); font-size: 10px; }
.proposal-change { color: var(--proposal-sign); font-size: 15px; font-weight: 880; }
.proposal-track { position: relative; display: block; direction: ltr; height: 8px; border-radius: 2px; background: #eadfd9; }
.proposal-track::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px solid #8e727c; }
.proposal-fill { position: absolute; height: 100%; left: 50%; border-radius: 2px; background: var(--proposal-sign); }
.proposal-row[data-direction="down"] .proposal-fill { right: 50%; left: auto; }
.proposal-reason { padding: 0 8px 8px; color: #5d464e; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.proposal-reason p { margin: 0; }
.proposal-reason .proposal-raw { margin-bottom: 3px; color: #6c364b; font-size: 11px; font-weight: 780; }
.proposal-reason a { color: #812641; font-weight: 730; text-underline-offset: 3px; }
.proposal-footnote { margin: 10px 1px 0; color: var(--muted); font-size: 11px; }
.dashboard-credit { margin-block: 16px 20px; text-align: end; color: var(--muted); font-size: 10px; }
.dashboard-credit a { text-underline-offset: 3px; }
.vector-glyph { display: inline-block; flex: none; aspect-ratio: 1; background: var(--glyph-color, currentColor); mask: var(--glyph) center / contain no-repeat; }
.night-crystal { position: absolute; left: 9.1%; top: 16.5%; width: clamp(47px, 7vw, 89px); opacity: .9; transform: rotate(-14deg); filter: drop-shadow(0 7px 17px #bfc9df42); }
.indicator-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.indicator-icon { --glyph-color: #715737; width: 20px; height: 20px; flex: none; transition: transform .25s ease; }
.impact-row:is(:hover, :focus-visible) .indicator-icon { transform: rotate(-12deg) scale(1.14); }
.indicator-example { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 14px; margin-block: 13px; padding: 12px 14px; border-radius: 14px; background: radial-gradient(ellipse at 88% 40%, #36534b, #203a35 75%); color: #fff4da; font-size: 12px; line-height: 1.72; }
.indicator-medallion { position: relative; display: grid; place-items: center; width: 66px; aspect-ratio: 1; border: 1px solid #cbad7078; border-radius: 50%; background: radial-gradient(circle at 34% 37%, #697454, #1c302b 73%); }
.indicator-medallion::before { content: ""; position: absolute; inset: 4px; border: 1px dashed #f1d69385; border-radius: 50%; }
.indicator-medallion::after { content: ""; position: absolute; inset-block-start: 5px; inset-inline-end: 5px; width: 11px; aspect-ratio: 1; background: #f3d594; clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%); }
.indicator-sticker { --glyph-color: linear-gradient(133deg, #fff6cb 18%, #e9c887 63%, #bd9054); display: block; width: 39px; height: 39px; transform: rotate(-7deg); }
.indicator-sample { margin-top: 5px; color: #e4ead3; }
.indicator-sample strong { margin-inline-end: 3px; color: #f5d89c; }
.tip-illustration { --glyph-color: #8c6941; width: 26px; height: 26px; float: inline-start; margin-inline-end: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .night-crystal { animation: crystal-arrives .65s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes crystal-arrives {
    from { opacity: 0; transform: translateY(12px) rotate(-4deg) scale(.92); }
    to { opacity: .9; transform: rotate(-14deg); }
  }
  .indicator-sticker { animation: indicator-hello .32s ease-out both; }
  @keyframes indicator-hello {
    from { transform: translateY(5px) rotate(9deg) scale(.85); }
    70% { transform: translateY(-1px) rotate(-10deg) scale(1.05); }
    to { transform: rotate(-7deg); }
  }
}
.activity-button-icon, .score-icon { width: 17px; height: 17px; vertical-align: middle; }
.activity-button-icon { margin-inline-end: 5px; }
.event-task-score { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 8px; color: #315952; font-size: 11px; font-weight: 750; }
.member-task-average { margin-top: 7px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.member-task-average strong { margin-inline-start: auto; color: #35594b; white-space: nowrap; }
.member-task-average .field-help { width: 16px; height: 16px; font-size: 10px; }
@media (max-width: 700px) {
  .impact-heading { flex-wrap: wrap; }
  .impact-grid { grid-template-columns: minmax(0, 1fr); }
  .impact-chart, .impact-details { padding: 13px; }
  .impact-list { max-height: 280px; }
  #proposals .section-heading { align-items: start; flex-wrap: wrap; gap: 6px; }
  .proposal-summary, .proposal-grid { grid-template-columns: minmax(0, 1fr); }
  .proposal-scenarios { gap: 5px; }
  .proposal-scenario-effect { max-width: 54px; }
  .proposal-mean p { display: block; margin: 4px 0 0; }
  .proposal-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mood-modes button { padding-inline: 6px; font-size: 10px; }
  .mood-heading { justify-content: center; }
  .team-shortcut { padding-inline-end: 28px; }
  .team-shortcut-tile > .field-help { inset-inline-end: 6px; }
  .team-initial { width: 36px; }
  .initial { width: 37px; height: 37px; }
  #evidence .filters { flex-wrap: wrap; }
  .event-task-score { margin-block-start: 3px; }
  .indicator-example { grid-template-columns: 47px minmax(0, 1fr); gap: 10px; }
  .indicator-medallion { width: 45px; }
  .indicator-sticker { width: 27px; height: 27px; }
  .night-crystal { left: 8%; top: 12%; width: 43px; }
}