.view-head .eyebrow { color: var(--coral-deep); font-weight: 700; letter-spacing: 2px; }
#view-title, .panel-title, .stat .big, .mc-date .d, .meetcard-when { font-family: var(--display); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.stat { background: var(--paper); border: 1px solid var(--line); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat .big { font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -1px; color: var(--ink); }
.stat .lab { font-size: 12.5px; color: var(--muted); margin-top: 8px; font-weight: 500; }
.stat.accent .big { color: var(--coral); }
.stat.warn .big { color: var(--amber); }
.stat .corner { position: absolute; right: -12px; top: -12px; width: 60px; height: 60px; border-radius: 50%; opacity: .07; }
.card.pad { padding: 18px 20px; }
.panel-title { font-weight: 700; font-size: 17px; margin: 0 0 2px; display: flex; align-items: center; gap: 9px; }
.panel-note { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.empty-mini { color: var(--muted); font-size: 13.5px; padding: 8px 0; margin: 0; }
.badge-over { background: var(--coral); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.dash-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
.tline { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.tline:first-of-type { border-top: 0; }
.tline:hover { background: var(--cream); }
.tdate { flex: 0 0 96px; font-weight: 700; font-size: 13px; padding-top: 2px; }
.tdate.over { color: var(--coral-deep); }
.tbody { flex: 1; min-width: 0; }
.tbody .tt { font-size: 14px; font-weight: 600; color: var(--ink); }
.tbody .tm { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill-soft { background: var(--cream-deep); color: var(--muted); padding: 1px 9px; border-radius: 999px; font-size: 11.5px; }
.over-tag { color: var(--coral-deep); font-weight: 700; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; display: inline-block; }
.pj-line { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.pj-line:first-of-type { border-top: 0; }
.pj-line:hover { background: var(--cream); }
.pj-line .pn { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-num { color: var(--muted); margin-right: 6px; }
.pj-line .po { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.meetcard { display: flex; align-items: center; gap: 16px; cursor: pointer; margin-top: 12px; }
.meetcard:hover { border-color: var(--sage); }
.meetslot { margin-top: 12px; }
.meetslot-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.meetslot-none { font-size: 13px; color: var(--muted); margin-top: 6px; }
.meetcard-body { flex: 1; min-width: 0; }
.meetcard-when { font-weight: 700; font-size: 16px; margin-top: 2px; }
.meetcard-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.mc-date { flex: 0 0 auto; text-align: center; background: var(--green); color: #fff; border-radius: 11px; padding: 9px 13px; line-height: 1; }
.mc-date.future { background: var(--amber); }
.mc-date .d { font-weight: 800; font-size: 22px; }
.mc-date .my { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; color: rgba(255, 255, 255, .85); }
.tk { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.tk:last-child { border-bottom: 0; }
.tk:hover { background: var(--cream); }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.tk-meta { font-size: 12px; color: var(--muted); margin-top: 5px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.tk-dl { flex: 0 0 auto; font-size: 13px; font-weight: 700; text-align: right; }
.tk-dl small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tk-dl.over { color: var(--coral-deep); }
@media (max-width: 900px) {
.dash-grid { grid-template-columns: 1fr; }
.stat-row { gap: 9px; }
.stat .big { font-size: 28px; }
}
.login-method-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3px;
margin-bottom: 11px;
padding: 3px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 12px;
background: #eff1eb;
}
.login-method-tabs button {
min-width: 0;
min-height: 35px;
padding: 7px 9px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 10.5px;
font-weight: 800;
cursor: pointer;
}
.login-method-tabs button.is-active {
background: var(--paper);
color: var(--green-deep);
box-shadow: 0 3px 10px rgba(43, 66, 58, .1);
}
.login-method-tabs button:focus-visible {
outline: 3px solid var(--ui-focus);
outline-offset: 1px;
}
.login-email-form[data-login-panel="password"] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 5px;
}
.login-email-form[data-login-panel][hidden] {
display: none !important;
}
.login-password-form > input {
width: 100%;
min-width: 0;
min-height: 43px;
margin-bottom: 2px;
padding: 8px 12px;
border: 1px solid #d8d4ca;
border-radius: 12px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 16px;
box-sizing: border-box;
}
.login-password-form > input:focus-visible {
outline: 0;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(224, 122, 95, .14);
}
.login-password-form > .btn {
width: 100%;
min-height: 43px;
margin: 3px 0 0;
}
.login-method-link {
justify-self: center;
margin: 0;
padding: 4px 7px 1px;
border: 0;
background: transparent;
color: var(--green);
font: inherit;
font-size: 10px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.login-panel-hint {
margin: 7px 1px 0;
color: var(--muted);
font-size: 9.5px;
line-height: 1.45;
}
.login-private-device {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: start;
gap: 8px;
min-width: 0;
margin: 0;
padding: 9px 10px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 11px;
background: #f7f3eb;
cursor: pointer;
}
.login-private-device input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--green);
}
.login-private-device.is-required {
cursor: default;
}
.login-private-device.is-required input:disabled {
opacity: 1;
}
.login-private-device span {
display: grid;
gap: 1px;
min-width: 0;
}
.login-private-device b {
color: var(--ink);
font-size: 10px;
}
.login-private-device small {
color: var(--muted);
font-size: 9px;
line-height: 1.3;
}
.login-security-row {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
align-items: stretch;
gap: 9px;
margin-top: 10px;
}
.login-legal-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 9px;
color: #879089;
font-size: 8.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.settings-security-card {
display: grid;
gap: 13px;
padding-bottom: 15px;
overflow: hidden;
}
.settings-security-head {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.settings-security-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 13px;
background: rgba(47, 85, 69, .1);
color: var(--green);
}
.settings-security-icon svg {
width: 21px;
height: 21px;
}
.settings-security-head b {
display: block;
color: var(--ink);
font-size: 14px;
}
.settings-security-head small {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.settings-auth-methods {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.settings-auth-method {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 27px;
padding: 5px 9px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--cream);
color: var(--muted);
font-size: 10.5px;
font-weight: 800;
}
.settings-auth-method::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #adb7b0;
}
.settings-auth-method.is-active {
border-color: rgba(47, 107, 72, .24);
background: rgba(47, 107, 72, .08);
color: var(--ok);
}
.settings-auth-method.is-active::before {
background: var(--ok);
}
.settings-security-note {
margin: 0;
padding: 10px 12px;
border-radius: 11px;
background: rgba(169, 184, 164, .13);
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}
.settings-security-note.is-warning {
background: rgba(224, 122, 95, .1);
color: #844534;
}
.settings-security-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.settings-security-actions .small-btn {
min-height: 38px;
}
#modal-root .modal:has(.password-security-modal) {
width: min(520px, calc(100vw - 30px));
max-width: 520px;
}
.password-security-modal {
display: grid;
gap: 16px;
}
#modal-root .modal:has(.password-onboarding-modal) {
width: min(540px, calc(100vw - 30px));
max-width: 540px;
}
.password-onboarding-modal {
display: grid;
gap: 15px;
}
.password-onboarding-hero {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 17px;
background: linear-gradient(135deg, rgba(224, 235, 225, .7), rgba(255, 248, 237, .78));
}
.password-onboarding-hero > span {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--green);
color: #fff;
}
.password-onboarding-hero svg {
width: 25px;
height: 25px;
}
.password-onboarding-hero small,
.password-onboarding-hero b {
display: block;
}
.password-onboarding-hero small {
margin-bottom: 4px;
color: var(--coral-deep);
font-size: 10px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.password-onboarding-hero b {
color: var(--ink);
font-family: var(--font-display);
font-size: 18px;
line-height: 1.2;
}
.password-onboarding-modal > p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.password-onboarding-modal > p strong {
color: var(--ink);
overflow-wrap: anywhere;
}
.password-onboarding-modal ul {
display: grid;
gap: 7px;
margin: 0;
padding: 12px 14px 12px 32px;
border-radius: 14px;
background: rgba(169, 184, 164, .12);
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
}
.password-security-intro {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 13px;
padding: 14px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 15px;
background: rgba(201, 211, 196, .22);
}
.password-security-intro > span {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--green);
color: #fff;
}
.password-security-intro svg {
width: 23px;
height: 23px;
}
.password-security-intro b {
display: block;
color: var(--ink);
font-size: 14px;
}
.password-security-intro small {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.password-security-form {
display: grid;
gap: 7px;
}
.password-security-form label {
margin-top: 4px;
color: var(--ink);
font-size: 12px;
font-weight: 800;
}
.password-security-form input {
width: 100%;
min-width: 0;
min-height: 46px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 16px;
box-sizing: border-box;
}
.password-security-form input:focus-visible {
outline: 0;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(224, 122, 95, .14);
}
.password-security-help {
margin: 3px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.5;
}
.password-security-status {
min-height: 18px;
margin: 1px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}
.password-security-status.is-error {
color: var(--bad);
}
.password-recovery-card {
padding: 15px;
border: 1px solid rgba(224, 122, 95, .2);
border-radius: 14px;
background: rgba(224, 122, 95, .07);
}
.password-recovery-card p {
margin: 0 0 12px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.55;
}
@media (max-width: 760px) {
.login-access-panel {
justify-content: flex-start;
}
.settings-security-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.settings-security-actions .small-btn {
width: 100%;
justify-content: center;
}
#modal-root .modal:has(.password-security-modal) {
width: 100%;
max-width: none;
max-height: calc(100dvh - env(safe-area-inset-top, 0px));
border-radius: 22px 22px 0 0;
}
}
.meeting-note-document {
display: flex;
flex-direction: column;
gap: 1px;
padding: 10px 10px 11px;
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 14px;
background: rgba(255, 255, 255, .72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}
.meeting-note-block.meeting-quick-note-row {
position: relative;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: start;
gap: 0 5px;
padding: 1px 0;
border-radius: 9px;
}
.meeting-note-block:hover,
.meeting-note-block:focus-within {
background: rgba(247, 243, 234, .52);
}
.meeting-note-block-menu {
grid-column: 1;
grid-row: 1;
align-self: start;
}
.meeting-note-block-menu > summary {
width: 30px;
height: 32px;
border-color: transparent;
background: transparent;
color: rgba(47, 85, 69, .48);
font-family: var(--body);
font-size: 12px;
letter-spacing: 0;
opacity: .72;
}
.meeting-note-block:hover .meeting-note-block-menu > summary,
.meeting-note-block:focus-within .meeting-note-block-menu > summary,
.meeting-note-block-menu[open] > summary {
border-color: rgba(47, 85, 69, .15);
background: #fff;
color: var(--green-deep);
opacity: 1;
}
.meeting-note-block-menu .meeting-note-row-menu-panel {
right: auto;
left: 0;
}
.meeting-note-block-types {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(47, 85, 69, .1);
}
.meeting-note-row-menu-panel .meeting-note-block-types button {
padding: 7px 5px;
text-align: center;
white-space: nowrap;
}
.meeting-note-row-menu-panel .meeting-note-block-types button.is-active {
background: rgba(47, 85, 69, .1);
color: var(--green-deep);
}
.meeting-note-block > .meeting-rich-editor.is-bullet {
grid-column: 2;
grid-row: 1;
min-height: 34px;
padding: 6px 5px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--ink);
font-size: 13.5px;
line-height: 1.55;
box-shadow: none;
}
.meeting-note-block > .meeting-rich-editor.is-bullet:hover {
border-color: rgba(47, 85, 69, .08);
}
.meeting-note-block > .meeting-rich-editor.is-bullet:focus {
border-color: rgba(224, 122, 95, .28);
background: rgba(255, 255, 255, .82);
outline: none;
box-shadow: 0 0 0 3px rgba(224, 122, 95, .06);
}
.meeting-note-block.is-heading {
margin-top: 7px;
}
.meeting-note-block.is-heading:first-child {
margin-top: 0;
}
.meeting-note-block.is-heading > .meeting-rich-editor.is-bullet {
min-height: 40px;
padding-top: 5px;
padding-bottom: 5px;
font-family: var(--display);
font-size: 18px;
font-weight: 800;
line-height: 1.35;
}
.meeting-note-block.is-bullet > .meeting-rich-editor.is-bullet {
padding-left: 5px;
}
.meeting-note-block > .meeting-note-linked-results,
.meeting-note-block > .meeting-note-outcome-menu,
.meeting-note-block > .meeting-note-inline-host {
grid-column: 2;
}
.meeting-note-block > .meeting-note-outcome-menu {
transition: opacity .16s ease;
}
.meeting-note-block:not(:hover):not(:focus-within) > .meeting-note-outcome-menu:not([open]) {
height: 0;
margin: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.meeting-note-document-reading {
display: grid;
gap: 8px;
}
.meeting-note-document-reading h4 {
margin: 12px 0 0;
color: var(--ink);
font-family: var(--display);
font-size: 16px;
line-height: 1.35;
}
.meeting-note-document-reading h4:first-child {
margin-top: 0;
}
.meeting-note-document-reading p {
margin: 0;
color: var(--ink);
font-size: 14px;
line-height: 1.62;
overflow-wrap: anywhere;
}
.meeting-note-add-actions .meeting-add-note-block {
border-color: rgba(47, 85, 69, .13);
background: rgba(255, 255, 255, .6);
color: var(--green-deep);
}
.meeting-quick-capture kbd {
display: inline-grid;
min-width: 17px;
min-height: 17px;
place-items: center;
padding: 0 3px;
border: 1px solid rgba(47, 85, 69, .16);
border-radius: 5px;
background: rgba(255, 255, 255, .72);
color: var(--green-deep);
font: inherit;
font-size: 8.5px;
font-weight: 800;
box-shadow: 0 1px 0 rgba(47, 85, 69, .1);
}
.meeting-selection-divider {
width: 1px;
height: 23px;
margin: 0 2px;
background: rgba(255, 255, 255, .22);
}
.meeting-selection-outcome-menu {
position: relative;
display: none;
}
.meeting-selection-toolbar.can-link-outcome .meeting-selection-outcome-menu {
display: block;
}
.meeting-selection-outcome-menu > summary {
position: relative;
z-index: 1;
display: grid;
min-height: 34px;
place-items: center;
padding: 6px 9px;
border-radius: 7px;
color: #fff;
font-size: 11px;
font-weight: 800;
list-style: none;
cursor: pointer;
}
.meeting-selection-outcome-menu > summary::-webkit-details-marker {
display: none;
}
.meeting-selection-outcome-menu > summary:hover,
.meeting-selection-outcome-menu > summary:focus-visible,
.meeting-selection-outcome-menu[open] > summary {
background: rgba(255, 255, 255, .15);
outline: none;
}
.meeting-selection-outcome-menu > div {
position: absolute;
top: calc(100% + 7px);
right: 0;
z-index: 3;
display: grid;
min-width: 165px;
gap: 2px;
padding: 5px;
border: 1px solid rgba(47, 85, 69, .15);
border-radius: 10px;
background: #fffdf9;
box-shadow: 0 12px 28px rgba(32, 52, 44, .24);
}
.meeting-selection-outcome-menu > div button {
justify-content: flex-start;
min-height: 35px;
color: var(--ink);
}
.meeting-selection-outcome-menu > div button:hover,
.meeting-selection-outcome-menu > div button:focus-visible {
background: rgba(47, 85, 69, .08);
}
.meeting-selection-outcome-menu > div button > span {
width: 20px;
color: var(--green-deep);
text-align: center;
}
@media (max-width: 760px) {
.meeting-note-document {
padding: 8px 6px 9px;
}
.meeting-note-block.meeting-quick-note-row {
grid-template-columns: 38px minmax(0, 1fr);
gap: 0 2px;
}
.meeting-note-block-menu > summary {
width: 38px;
height: 40px;
}
.meeting-note-block > .meeting-rich-editor.is-bullet {
min-height: 40px;
padding: 8px 4px;
font-size: 15px;
}
.meeting-note-block.is-heading > .meeting-rich-editor.is-bullet {
font-size: 19px;
}
.meeting-note-add-actions .btn-add-row {
min-width: 0;
padding-inline: 5px;
font-size: 9px;
}
.meeting-selection-outcome-menu > div {
top: auto;
right: 0;
bottom: calc(100% + 7px);
}
}
.meeting-spolek-fields {
margin: 4px 0 18px;
}
.meeting-spolek-picker {
min-width: 0;
margin: 0;
padding: 18px;
border: 1px solid rgba(42, 76, 61, .16);
border-radius: 18px;
background: #f7f5ee;
}
.meeting-spolek-picker legend {
padding: 0 7px;
color: var(--green-deep);
font-family: var(--display);
font-size: 19px;
font-weight: 800;
}
.meeting-spolek-picker > p {
max-width: 680px;
margin: 0 0 14px;
color: #607066;
font-size: 12.5px;
line-height: 1.5;
}
.meeting-spolek-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.meeting-spolek-option {
position: relative;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 20px;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 86px;
padding: 13px;
border: 1px solid rgba(42, 76, 61, .14);
border-radius: 14px;
background: rgba(255, 255, 255, .82);
color: var(--ink);
cursor: pointer;
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.meeting-spolek-option:hover {
border-color: rgba(42, 76, 61, .32);
background: #fff;
transform: translateY(-1px);
}
.meeting-spolek-option:has(input:checked) {
border-color: #356b54;
background: #edf4ef;
box-shadow: 0 0 0 3px rgba(53, 107, 84, .09);
}
.meeting-spolek-option input {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
pointer-events: none;
}
.meeting-spolek-option:focus-within {
outline: 3px solid rgba(224, 122, 95, .22);
outline-offset: 2px;
}
.meeting-spolek-option-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #e7eee9;
color: #315c49;
font-family: var(--display);
font-size: 23px;
font-weight: 800;
}
.meeting-spolek-icon-svg {
display: block;
width: 24px;
height: 24px;
margin: 0;
}
.meeting-spolek-seal .meeting-spolek-icon-svg {
width: 29px;
height: 29px;
}
.meeting-spolek-option b,
.meeting-spolek-option small {
display: block;
}
.meeting-spolek-option b {
margin-bottom: 4px;
font-size: 13px;
line-height: 1.25;
}
.meeting-spolek-option small {
color: #6d786f;
font-size: 10.5px;
line-height: 1.35;
}
.meeting-spolek-option > i {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #397058;
color: #fff;
font-size: 11px;
font-style: normal;
opacity: 0;
transform: scale(.7);
transition: opacity .16s ease, transform .16s ease;
}
.meeting-spolek-option:has(input:checked) > i {
opacity: 1;
transform: scale(1);
}
.meeting-per-rollam-setup {
margin-top: 12px;
border: 1px solid rgba(47, 81, 66, .17);
border-radius: 17px;
background: #fff;
overflow: hidden;
}
.meeting-per-rollam-toggle {
position: relative;
display: grid;
grid-template-columns: 22px 42px minmax(0, 1fr);
align-items: center;
gap: 11px;
padding: 15px 17px;
cursor: pointer;
}
.meeting-per-rollam-toggle input {
width: 19px;
height: 19px;
accent-color: #385746;
}
.meeting-per-rollam-toggle > span[aria-hidden] {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--spolek-soft);
color: #385746;
font-size: 23px;
font-weight: 800;
}
.meeting-per-rollam-toggle b,
.meeting-per-rollam-toggle small {
display: block;
}
.meeting-per-rollam-toggle b {
margin-bottom: 3px;
color: #243e34;
font-size: 13.5px;
}
.meeting-per-rollam-toggle small {
color: var(--muted);
font-size: 10.5px;
line-height: 1.4;
}
.meeting-per-rollam-setup:has(input[name="perRollamEnabled"]:checked) {
border-color: #4f966f;
box-shadow: 0 0 0 3px rgba(63, 118, 93, .08);
}
.meeting-per-rollam-fields {
padding: 17px;
border-top: 1px solid rgba(47, 81, 66, .12);
background: var(--paper);
}
.meeting-per-rollam-deadline {
display: grid;
grid-template-columns: minmax(130px, .55fr) minmax(220px, 1fr);
align-items: center;
gap: 4px 14px;
margin-bottom: 15px;
}
.meeting-per-rollam-deadline label {
color: #243e34;
font-weight: 800;
}
.meeting-per-rollam-deadline input {
min-width: 0;
}
.meeting-per-rollam-deadline small {
grid-column: 2;
color: var(--muted);
font-size: 10.5px;
}
.meeting-per-rollam-fields .field > span {
display: block;
margin-bottom: 6px;
color: #243e34;
font-weight: 800;
}
.meeting-per-rollam-resolutions-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 4px 0 11px;
}
.meeting-per-rollam-resolutions-head h4,
.meeting-per-rollam-resolutions-head p {
margin: 0;
}
.meeting-per-rollam-resolutions-head h4 {
margin-top: 2px;
color: #243e34;
font: 800 20px/1.2 var(--display);
}
.meeting-per-rollam-resolutions-head p {
margin-top: 3px;
color: var(--muted);
font-size: 10.5px;
}
.meeting-per-rollam-resolutions-head button {
min-height: 36px;
padding: 8px 12px;
border: 1px solid rgba(43, 82, 64, .18);
border-radius: 11px;
background: #fff;
color: #385746;
font-size: 11px;
font-weight: 850;
cursor: pointer;
}
.meeting-per-rollam-resolutions {
display: grid;
gap: 10px;
}
.meeting-per-rollam-resolution {
padding: 16px;
border: 1px solid rgba(42, 76, 61, .14);
border-radius: 15px;
background: #fff;
box-shadow: 0 5px 18px rgba(31, 60, 47, .035);
}
.meeting-per-rollam-resolution > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
color: #385746;
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.meeting-per-rollam-resolution > header b {
font: inherit;
}
.meeting-per-rollam-remove {
padding: 4px 0;
border: 0;
background: transparent;
color: var(--coral-deep);
font-size: 10px;
font-weight: 800;
cursor: pointer;
}
.meeting-per-rollam-resolution:only-child .meeting-per-rollam-remove {
display: none;
}
.meeting-per-rollam-resolution .field {
margin: 0;
}
.meeting-per-rollam-resolution .field + .field {
margin-top: 12px;
}
.meeting-per-rollam-description > span small {
display: inline;
margin-left: 5px;
color: var(--muted);
font-size: 9.5px;
font-weight: 650;
}
.meeting-per-rollam-security,
.per-rollam-integrity {
display: flex;
align-items: center;
gap: 11px;
margin-top: 13px;
padding: 12px 14px;
border-radius: 13px;
background: #243e34;
color: #fff;
}
.meeting-per-rollam-security > span,
.per-rollam-integrity > span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
background: rgba(255, 255, 255, .13);
font-weight: 900;
}
.meeting-per-rollam-security p,
.meeting-per-rollam-security b,
.meeting-per-rollam-security small,
.per-rollam-integrity p,
.per-rollam-integrity b,
.per-rollam-integrity small {
display: block;
margin: 0;
}
.meeting-per-rollam-security small,
.per-rollam-integrity small {
margin-top: 2px;
color: rgba(255, 255, 255, .74);
font-size: 10.5px;
line-height: 1.4;
}
.meeting-spolek-agenda-note {
display: flex;
align-items: center;
gap: 11px;
margin-top: 10px;
padding: 12px 15px;
border-radius: 13px;
background: #294f40;
color: #fff;
}
.meeting-spolek-agenda-note > span {
font-family: var(--display);
font-size: 24px;
line-height: 1;
}
.meeting-spolek-agenda-note p,
.meeting-spolek-agenda-note b,
.meeting-spolek-agenda-note small {
display: block;
margin: 0;
}
.meeting-spolek-agenda-note b {
margin-bottom: 2px;
font-size: 12px;
}
.meeting-spolek-agenda-note small {
color: rgba(255, 255, 255, .74);
font-size: 10.5px;
line-height: 1.4;
}
.meeting-detail-spolek {
--spolek-accent: #d08b4f;
--spolek-soft: #f6eee3;
}
.meeting-detail-spolek.meeting-spolek-vybor {
--spolek-accent: #d66f58;
--spolek-soft: #f8eae6;
}
.meeting-detail-spolek.meeting-spolek-komise {
--spolek-accent: #6887a1;
--spolek-soft: #eaf0f4;
}
.meeting-detail-spolek .meeting-hero-panel {
position: relative;
overflow: hidden;
min-height: 150px;
padding: 30px 34px;
border: 0;
border-radius: 24px;
background: #244a3b;
color: #fff;
box-shadow: 0 18px 42px rgba(31, 62, 49, .15);
}
.meeting-detail-spolek .meeting-hero-panel::after {
content: "§";
position: absolute;
right: 30px;
bottom: -42px;
color: rgba(255, 255, 255, .075);
font-family: var(--display);
font-size: 184px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.meeting-detail-spolek .meeting-hero-panel .eyebrow {
color: #f3c79e;
}
.meeting-detail-spolek .meeting-hero-panel .pd-title,
.meeting-detail-spolek .meeting-hero-panel .meeting-phase-intro,
.meeting-detail-spolek .meeting-hero-panel .meeting-quickfacts span,
.meeting-detail-spolek .meeting-hero-panel .meeting-quickfacts b {
position: relative;
z-index: 1;
color: #fff;
}
.meeting-detail-spolek .meeting-hero-panel .meeting-phase-intro,
.meeting-detail-spolek .meeting-hero-panel .meeting-quickfacts span {
color: rgba(255, 255, 255, .72);
}
.meeting-spolek-identity {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
align-items: center;
gap: 15px;
margin: 0 0 22px;
padding: 17px 19px;
border: 1px solid color-mix(in srgb, var(--spolek-accent) 34%, transparent);
border-radius: 18px;
background: var(--spolek-soft);
}
.meeting-spolek-seal {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid color-mix(in srgb, var(--spolek-accent) 55%, transparent);
border-radius: 50%;
background: #fff;
color: color-mix(in srgb, var(--spolek-accent) 78%, #243e34);
font-family: var(--display);
font-size: 29px;
font-weight: 800;
}
.meeting-spolek-identity h3,
.meeting-spolek-identity p {
margin: 0;
}
.meeting-spolek-identity h3 {
margin: 2px 0 4px;
color: #243e34;
font-family: var(--display);
font-size: 20px;
}
.meeting-spolek-identity p {
color: #657068;
font-size: 12px;
}
.meeting-spolek-audience {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 11px;
border: 1px solid rgba(43, 75, 61, .13);
border-radius: 999px;
background: rgba(255, 255, 255, .76);
color: #385746;
font-size: 10.5px;
font-weight: 800;
white-space: nowrap;
}
.meeting-spolek-audience i {
color: #4f966f;
font-size: 8px;
font-style: normal;
}
.meeting-detail-spolek .meeting-primary-section-head {
margin-top: 6px;
padding: 15px 17px;
border-left: 4px solid var(--spolek-accent);
border-radius: 0 14px 14px 0;
background: color-mix(in srgb, var(--spolek-soft) 78%, #fff);
}
.meeting-detail-spolek .meeting-step-index {
background: var(--spolek-accent);
color: #fff;
}
.meeting-detail-spolek .meeting-resolution-section {
overflow: hidden;
border-color: color-mix(in srgb, var(--spolek-accent) 32%, transparent);
background: #fffdf9;
}
.meeting-resolution-title {
display: flex;
align-items: flex-start;
gap: 13px;
margin: -4px -4px 18px;
padding: 2px 2px 16px;
border-bottom: 1px solid rgba(48, 73, 61, .11);
}
.meeting-resolution-title > span {
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 12px;
background: var(--spolek-soft);
color: color-mix(in srgb, var(--spolek-accent) 74%, #243e34);
font-family: var(--display);
font-size: 24px;
font-weight: 800;
}
.meeting-resolution-title h3,
.meeting-resolution-title p {
margin: 0;
}
.meeting-resolution-title h3 {
margin: 2px 0 4px;
}
.meeting-resolution-title p {
color: #69766e;
font-size: 11.5px;
line-height: 1.45;
}
.meeting-detail-spolek .resolution-builder {
border-color: color-mix(in srgb, var(--spolek-accent) 36%, transparent);
background: var(--spolek-soft);
}
.resolution-quorum-note {
margin: 10px 0 0;
color: #5f6d64;
font-size: 10.5px;
line-height: 1.45;
}
.meeting-detail-spolek .resolution-card {
border-left: 4px solid var(--spolek-accent);
box-shadow: 0 8px 22px rgba(35, 66, 52, .07);
}
.meeting-per-rollam-detail {
min-width: 0;
--rollam-green: #243e34;
--rollam-green-light: var(--spolek-soft);
--rollam-gold: var(--spolek-accent);
}
.meeting-phase-vote {
grid-column: 1 / -1;
border-color: rgba(49, 101, 76, .22);
background: var(--paper);
}
.meeting-phase-vote .meetings-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.meeting-work-card.is-per-rollam {
border-left: 4px solid #4f966f;
}
.meeting-work-card.is-per-rollam .meeting-card-cue {
color: #385746;
}
.per-rollam-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 22px;
overflow: hidden;
margin-bottom: 15px;
padding: 29px 32px;
border-radius: var(--radius-lg);
background: #243e34;
color: #fff;
box-shadow: var(--shadow);
}
.per-rollam-hero > div:not(.per-rollam-hero-mark),
.per-rollam-status {
position: relative;
z-index: 1;
}
.per-rollam-hero-mark {
position: absolute;
right: 24px;
bottom: -61px;
color: rgba(255, 255, 255, .065);
font-family: var(--display);
font-size: 150px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.per-rollam-hero .eyebrow {
color: var(--spolek-accent);
}
.per-rollam-hero h2,
.per-rollam-hero p {
margin: 0;
}
.per-rollam-hero h2 {
margin: 5px 0 8px;
color: #fff;
font-family: var(--display);
font-size: clamp(23px, 2.3vw, 30px);
font-weight: 800;
line-height: 1.08;
}
.per-rollam-hero p {
max-width: 690px;
color: rgba(255, 255, 255, .72);
font-size: 12.5px;
line-height: 1.55;
}
.per-rollam-status {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 13px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: 10.5px;
font-weight: 900;
white-space: nowrap;
}
.per-rollam-status.is-open::before {
content: "";
width: 7px;
height: 7px;
margin-right: 7px;
border-radius: 50%;
background: #81d5a5;
box-shadow: 0 0 0 5px rgba(129, 213, 165, .12);
}
.per-rollam-status.is-waiting {
border-color: rgba(245, 195, 113, .45);
color: color-mix(in srgb, var(--spolek-accent) 55%, #fff);
}
.per-rollam-status.is-closed {
background: rgba(255, 255, 255, .17);
}
.per-rollam-hero-side {
display: grid;
min-width: 238px;
justify-items: end;
gap: 10px;
}
.per-rollam-countdown {
width: 100%;
box-sizing: border-box;
padding: 13px 15px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 15px;
background: rgba(255, 255, 255, .09);
backdrop-filter: blur(8px);
}
.per-rollam-countdown span,
.per-rollam-countdown b,
.per-rollam-countdown small {
display: block;
}
.per-rollam-countdown span {
color: rgba(255, 255, 255, .62);
font-size: 8.5px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.per-rollam-countdown b {
margin-top: 4px;
color: #fff;
font-size: 19px;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.per-rollam-countdown small {
margin-top: 5px;
color: rgba(255, 255, 255, .62);
font-size: 9px;
line-height: 1.35;
}
.per-rollam-countdown.is-soon {
border-color: rgba(245, 195, 113, .48);
background: rgba(164, 112, 45, .18);
}
.per-rollam-countdown.is-critical,
.per-rollam-countdown.is-expired {
border-color: rgba(255, 164, 152, .48);
background: rgba(151, 62, 53, .2);
}
.per-rollam-countdown.is-soon b {
color: color-mix(in srgb, var(--spolek-accent) 60%, #fff);
}
.per-rollam-countdown.is-critical b,
.per-rollam-countdown.is-expired b {
color: #ffd0c9;
}
.per-rollam-layout {
display: grid;
grid-template-columns: minmax(0, 1.62fr) minmax(270px, .66fr);
gap: 18px;
align-items: start;
}
.per-rollam-layout > main,
.per-rollam-layout > aside {
display: grid;
min-width: 0;
gap: 14px;
}
.per-rollam-proposal,
.per-rollam-facts,
.per-rollam-tally,
.per-rollam-result {
min-width: 0;
padding: 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--shadow);
}
.per-rollam-proposal {
border-top: 4px solid var(--spolek-accent);
}
.per-rollam-proposal blockquote {
margin: 8px 0 0;
color: #243e34;
font-family: var(--display);
font-size: clamp(19px, 2.1vw, 25px);
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.per-rollam-ballot {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.per-rollam-choice {
min-width: 0;
min-height: 84px;
padding: 14px 13px;
border: 1px solid rgba(41, 77, 61, .17);
border-radius: 16px;
background: #fff;
color: #243e34;
text-align: left;
cursor: pointer;
box-shadow: 0 6px 20px rgba(31, 60, 47, .045);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.per-rollam-resolution-list {
display: grid;
gap: 14px;
}
.per-rollam-resolution-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--shadow);
}
.per-rollam-resolution-card > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 19px;
border-bottom: 1px solid rgba(39, 73, 58, .09);
background: var(--paper);
}
.per-rollam-resolution-number {
color: #385746;
font-size: 10px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.per-rollam-resolution-state {
padding: 5px 9px;
border-radius: 999px;
font-size: 9px;
font-weight: 900;
}
.per-rollam-resolution-state.is-open {
background: var(--spolek-soft);
color: #385746;
}
.per-rollam-resolution-state.is-approved {
background: var(--spolek-soft);
color: #2f6a4b;
}
.per-rollam-resolution-state.is-rejected {
background: #f6e9e6;
color: var(--coral-deep);
}
.per-rollam-resolution-copy {
padding: 22px 22px 17px;
}
.per-rollam-resolution-copy blockquote,
.per-rollam-resolution-copy p {
margin: 0;
overflow-wrap: anywhere;
}
.per-rollam-resolution-copy blockquote {
color: #243e34;
font-family: var(--display);
font-size: clamp(18px, 2vw, 23px);
font-weight: 600;
line-height: 1.4;
}
.per-rollam-resolution-copy p {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(39, 73, 58, .1);
color: var(--muted);
font-size: 11.5px;
line-height: 1.55;
white-space: pre-line;
}
.per-rollam-resolution-tally {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
align-items: center;
gap: 7px;
padding: 11px 22px;
border-top: 1px solid rgba(39, 73, 58, .08);
background: var(--paper);
}
.per-rollam-resolution-tally > span {
color: var(--muted);
font-size: 8.5px;
font-weight: 850;
white-space: nowrap;
}
.per-rollam-resolution-tally > span b {
margin-right: 2px;
color: #243e34;
font-size: 13px;
}
.per-rollam-resolution-tally > small {
color: var(--muted);
font-size: 9.5px;
text-align: right;
}
.per-rollam-resolution-card .per-rollam-ballot {
padding: 14px 22px 22px;
border-top: 1px solid rgba(39, 73, 58, .08);
}
.per-rollam-resolution-voted {
display: flex;
align-items: center;
gap: 10px;
margin: 0 22px 20px;
padding: 12px 14px;
border-radius: 13px;
background: var(--spolek-soft);
color: #385746;
}
.per-rollam-resolution-voted > span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 50%;
background: #4f966f;
color: #fff;
font-weight: 900;
}
.per-rollam-resolution-voted b,
.per-rollam-resolution-voted small {
display: block;
}
.per-rollam-resolution-voted small {
margin-top: 2px;
color: var(--muted);
font-size: 10px;
}
.per-rollam-progress {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: var(--spolek-soft);
}
.per-rollam-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: #4f966f;
}
.per-rollam-viewer-state .meeting-spolek-icon-svg {
width: 21px;
height: 21px;
}
.per-rollam-choice:hover {
transform: translateY(-2px);
border-color: #4f966f;
box-shadow: 0 11px 25px rgba(31, 60, 47, .1);
}
.per-rollam-choice b,
.per-rollam-choice small {
display: block;
}
.per-rollam-choice b {
margin-bottom: 7px;
font-size: 16px;
letter-spacing: .045em;
}
.per-rollam-choice small {
color: var(--muted);
font-size: 10.5px;
line-height: 1.4;
}
.per-rollam-choice.is-pro {
border-top: 4px solid #4f966f;
}
.per-rollam-choice.is-proti {
border-top: 4px solid var(--coral-deep);
}
.per-rollam-choice.is-zdrzel {
border-top: 4px solid #8d8171;
}
.per-rollam-choice:disabled {
cursor: wait;
opacity: .55;
transform: none;
}
.per-rollam-viewer-state {
display: flex;
align-items: center;
gap: 13px;
padding: 16px 18px;
border: 1px solid rgba(49, 91, 72, .16);
border-radius: 16px;
background: var(--rollam-green-light);
}
.per-rollam-viewer-state > span {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: #4f966f;
color: #fff;
font-size: 18px;
font-weight: 900;
}
.per-rollam-viewer-state b,
.per-rollam-viewer-state small {
display: block;
}
.per-rollam-viewer-state small {
margin-top: 3px;
color: var(--muted);
font-size: 10.5px;
line-height: 1.45;
}
.per-rollam-viewer-state.is-observer,
.per-rollam-viewer-state.is-waiting {
background: var(--cream);
}
.per-rollam-viewer-state.is-observer > span,
.per-rollam-viewer-state.is-waiting > span {
background: var(--spolek-accent);
}
.per-rollam-viewer-state.is-rejected {
background: #f8ecea;
}
.per-rollam-viewer-state.is-rejected > span {
background: var(--coral-deep);
}
.per-rollam-facts {
display: grid;
gap: 14px;
}
.per-rollam-facts > div {
padding-bottom: 13px;
border-bottom: 1px solid rgba(39, 73, 58, .1);
}
.per-rollam-facts > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.per-rollam-facts span,
.per-rollam-facts b,
.per-rollam-facts small {
display: block;
}
.per-rollam-facts span {
margin-bottom: 4px;
color: var(--muted);
font-size: 9.5px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.per-rollam-facts b {
color: #243e34;
font-size: 15px;
}
.per-rollam-facts small {
margin-top: 3px;
color: var(--muted);
font-size: 10px;
}
.per-rollam-tally > div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.per-rollam-tally > div:first-child span {
color: var(--muted);
font-size: 11px;
font-weight: 800;
}
.per-rollam-tally > div:first-child b {
color: #243e34;
font-size: 21px;
}
.per-rollam-tally-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.per-rollam-tally-grid span {
padding: 9px 5px;
border-radius: 10px;
background: var(--paper);
color: var(--muted);
font-size: 8.5px;
font-weight: 800;
text-align: center;
}
.per-rollam-tally-grid b {
display: block;
margin-bottom: 2px;
color: #243e34;
font-size: 17px;
}
.per-rollam-tally > small {
display: block;
margin-top: 11px;
color: var(--muted);
font-size: 10.5px;
line-height: 1.4;
}
.per-rollam-integrity {
margin-top: 0;
}
.per-rollam-result {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.per-rollam-result h3,
.per-rollam-result p {
margin: 0;
}
.per-rollam-result h3 {
margin-top: 3px;
color: #243e34;
}
.per-rollam-result p {
color: var(--muted);
font-size: 11px;
}
.per-rollam-result.is-approved {
border-left: 5px solid #4f966f;
background: var(--paper);
}
.per-rollam-result.is-rejected {
border-left: 5px solid var(--coral-deep);
background: #fbf1ef;
}
@media (max-width: 760px) {
.meeting-spolek-picker {
padding: 15px;
border-radius: 16px;
}
.meeting-spolek-options {
grid-template-columns: 1fr;
}
.meeting-spolek-option {
min-height: 74px;
}
.meeting-per-rollam-toggle {
grid-template-columns: 21px 36px minmax(0, 1fr);
padding: 13px;
}
.meeting-per-rollam-toggle > span[aria-hidden] {
width: 34px;
height: 34px;
}
.meeting-per-rollam-fields {
padding: 14px;
}
.meeting-per-rollam-deadline {
grid-template-columns: 1fr;
}
.meeting-per-rollam-deadline small {
grid-column: auto;
}
.meeting-per-rollam-resolutions-head {
align-items: stretch;
flex-direction: column;
}
.meeting-per-rollam-resolutions-head button {
align-self: flex-start;
}
.meeting-per-rollam-resolution {
padding: 14px;
}
.meeting-detail-spolek .meeting-hero-panel {
min-height: 0;
padding: 22px 19px;
border-radius: 19px;
}
.meeting-detail-spolek .meeting-hero-panel::after {
right: 4px;
bottom: -27px;
font-size: 120px;
}
.meeting-spolek-identity {
grid-template-columns: 46px minmax(0, 1fr);
padding: 14px;
}
.meeting-spolek-seal {
width: 44px;
height: 44px;
font-size: 24px;
}
.meeting-spolek-audience {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
box-sizing: border-box;
white-space: normal;
text-align: center;
}
.meeting-detail-spolek .meeting-primary-section-head {
padding: 13px;
}
.per-rollam-hero {
grid-template-columns: 1fr;
align-items: start;
padding: 24px 20px;
border-radius: 20px;
}
.per-rollam-hero-mark {
right: -2px;
bottom: -33px;
font-size: 140px;
}
.per-rollam-status {
justify-self: start;
white-space: normal;
}
.per-rollam-hero-side {
width: 100%;
min-width: 0;
justify-items: start;
}
.per-rollam-countdown {
max-width: 420px;
}
.per-rollam-layout {
grid-template-columns: 1fr;
}
.meeting-phase-vote .meetings-list {
grid-template-columns: 1fr;
}
.per-rollam-ballot {
grid-template-columns: 1fr;
}
.per-rollam-choice {
min-height: 78px;
}
.per-rollam-resolution-card > header,
.per-rollam-resolution-copy,
.per-rollam-resolution-card .per-rollam-ballot {
padding-right: 16px;
padding-left: 16px;
}
.per-rollam-resolution-tally {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-right: 16px;
padding-left: 16px;
}
.per-rollam-resolution-tally > small {
grid-column: 1 / -1;
text-align: left;
}
.per-rollam-resolution-voted {
margin-right: 16px;
margin-left: 16px;
}
.per-rollam-proposal,
.per-rollam-facts,
.per-rollam-tally,
.per-rollam-result {
padding: 17px;
border-radius: 16px;
}
.per-rollam-result {
align-items: flex-start;
flex-direction: column;
}
}
.meeting-note-editor-shell {
overflow: visible;
border: 1px solid rgba(47, 85, 69, .15);
border-radius: 13px;
background: #fff;
box-shadow: 0 4px 14px rgba(34, 48, 42, .04);
}
.meeting-note-editor-toolbar {
position: relative;
z-index: 4;
display: flex;
align-items: center;
gap: 3px;
min-height: 43px;
padding: 5px 7px;
border-bottom: 1px solid rgba(47, 85, 69, .1);
border-radius: 13px 13px 0 0;
background: rgba(247, 243, 234, .64);
box-sizing: border-box;
}
.meeting-note-editor-style {
display: flex;
align-items: center;
gap: 2px;
}
.meeting-note-editor-toolbar button,
.meeting-note-editor-more > summary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 32px;
padding: 5px 8px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 9.5px;
font-weight: 800;
list-style: none;
cursor: pointer;
box-sizing: border-box;
}
.meeting-note-editor-toolbar button:hover,
.meeting-note-editor-toolbar button:focus-visible,
.meeting-note-editor-more > summary:hover,
.meeting-note-editor-more > summary:focus-visible,
.meeting-note-editor-more[open] > summary {
border-color: rgba(47, 85, 69, .13);
background: rgba(255, 255, 255, .78);
color: var(--ink);
outline: none;
}
.meeting-note-editor-toolbar button.is-active {
border-color: rgba(47, 85, 69, .16);
background: #fff;
color: var(--green-deep);
box-shadow: 0 1px 2px rgba(34, 48, 42, .05);
}
.meeting-note-editor-toolbar button > span {
color: var(--green-deep);
font-family: var(--body);
font-size: 11px;
}
.meeting-note-editor-format {
min-width: 32px;
padding-inline: 6px !important;
}
.meeting-note-editor-format strong,
.meeting-note-editor-format em {
color: var(--ink);
font-family: var(--body);
font-size: 14px;
}
.meeting-note-editor-divider {
width: 1px;
height: 22px;
margin: 0 3px;
background: rgba(47, 85, 69, .13);
}
.meeting-note-editor-spacer {
min-width: 4px;
flex: 1;
}
.meeting-note-editor-more {
position: relative;
}
.meeting-note-editor-more > summary {
width: 34px;
padding: 0;
letter-spacing: 1px;
}
.meeting-note-editor-more > summary::-webkit-details-marker {
display: none;
}
.meeting-note-editor-more .meeting-note-row-menu-panel {
top: calc(100% + 6px);
right: 0;
left: auto;
}
.meeting-note-editor-shell .meeting-note-document {
display: flex;
flex-direction: column;
gap: 0;
min-height: 148px;
padding: 16px 20px 20px;
border: 0;
border-radius: 0 0 13px 13px;
background: transparent;
box-shadow: none;
}
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row {
position: relative;
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.meeting-note-editor-shell .meeting-note-block:hover,
.meeting-note-editor-shell .meeting-note-block:focus-within {
background: transparent;
}
.meeting-note-editor-shell .meeting-note-block::before {
grid-column: 1;
grid-row: 1;
align-self: start;
min-height: 30px;
padding-top: 4px;
color: var(--coral-deep);
font-size: 14px;
font-weight: 900;
line-height: 1.65;
text-align: left;
}
.meeting-note-editor-shell .meeting-note-block.is-bullet::before {
content: "•";
}
.meeting-note-editor-shell .meeting-note-block > .meeting-rich-editor.is-bullet,
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row > .meeting-rich-editor.is-bullet {
grid-column: 1 / -1;
grid-row: 1;
min-height: 30px;
padding: 3px 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink);
font-size: 14px;
line-height: 1.65;
box-shadow: none;
}
.meeting-note-editor-shell .meeting-note-block.is-bullet > .meeting-rich-editor.is-bullet {
grid-column: 2;
}
.meeting-note-editor-shell .meeting-note-block > .meeting-rich-editor.is-bullet:hover,
.meeting-note-editor-shell .meeting-note-block > .meeting-rich-editor.is-bullet:focus,
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row > .meeting-rich-editor.is-bullet:focus {
border: 0;
background: transparent;
outline: none;
box-shadow: none;
}
.meeting-note-editor-shell .meeting-note-block.is-heading {
margin: 13px 0 3px;
}
.meeting-note-editor-shell .meeting-note-block.is-heading:first-child {
margin-top: 0;
}
.meeting-note-editor-shell .meeting-note-block.is-heading > .meeting-rich-editor.is-bullet,
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row.is-heading > .meeting-rich-editor.is-bullet {
min-height: 36px;
padding: 2px 0;
font-family: var(--display);
font-size: 18px;
font-weight: 800;
line-height: 1.42;
}
.meeting-note-editor-shell .meeting-note-block > .meeting-note-linked-results,
.meeting-note-editor-shell .meeting-note-block > .meeting-note-inline-host {
grid-column: 1 / -1;
margin: 5px 0 8px;
}
.meeting-note-editor-shell .meeting-note-block > .meeting-note-linked-results[hidden],
.meeting-note-editor-shell .meeting-note-block > .meeting-note-inline-host:empty {
margin: 0;
}
@media (max-width: 760px) {
.meeting-note-editor-toolbar {
gap: 1px;
padding: 5px;
}
.meeting-note-editor-toolbar button {
min-height: 38px;
padding-inline: 6px;
font-size: 9px;
}
.meeting-note-editor-style {
min-width: 0;
}
.meeting-note-editor-divider {
margin-inline: 1px;
}
.meeting-note-editor-more > summary {
width: 40px;
min-height: 40px;
}
.meeting-note-editor-more .meeting-note-row-menu-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
bottom: auto;
left: auto;
z-index: 2300;
width: min(280px, calc(100vw - 44px));
max-height: 60dvh;
overflow-y: auto;
}
.meeting-note-editor-shell .meeting-note-document {
min-height: 160px;
padding: 15px 15px 19px;
}
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row {
grid-template-columns: 19px minmax(0, 1fr);
}
.meeting-note-editor-shell .meeting-note-block > .meeting-rich-editor.is-bullet,
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row > .meeting-rich-editor.is-bullet {
min-height: 34px;
padding: 4px 0;
font-size: 15px;
line-height: 1.65;
}
.meeting-note-editor-shell .meeting-note-block.is-heading > .meeting-rich-editor.is-bullet,
.meeting-note-editor-shell .meeting-note-block.meeting-quick-note-row.is-heading > .meeting-rich-editor.is-bullet {
font-size: 19px;
}
}
.board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.col { flex: 0 0 264px; width: 264px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; font-weight: 700; font-size: 13.5px; }
.col-head .cc { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--cream-deep); padding: 1px 9px; border-radius: 20px; font-weight: 600; }
.col-empty { color: var(--muted); font-size: 12.5px; padding: 2px 4px 4px; margin: 0; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(34, 48, 42, .04); cursor: pointer; transition: box-shadow .12s, transform .08s, border-color .12s; }
.pcard:last-child { margin-bottom: 0; }
.pcard:hover { box-shadow: var(--shadow); border-color: var(--sage); }
.pcard:active { transform: scale(.995); }
.pc-tag { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.pc-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pc-name { font-family: var(--display); font-weight: 700; font-size: 15.5px; line-height: 1.2; margin-bottom: 7px; }
.pc-name-row .pc-name { margin-bottom: 0; flex: 1; min-width: 0; }
.ava.pc-icon { width: 28px; height: 28px; flex: 0 0 28px; background: var(--coral-deep); color: #fff; }
.pc-num { color: var(--muted); margin-right: 4px; }
.ava.pd-icon {
width: 92px;
height: 92px;
flex: 0 0 92px;
background: var(--coral-deep);
color: #fff;
margin-right: 18px;
border-radius: 24px;
box-shadow: 0 8px 20px rgba(47, 85, 69, .16);
}
.head-row.has-icon { align-items: center; }
.icon-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick-btn {
border: 2px solid transparent;
background: transparent;
padding: 2px;
border-radius: 50%;
cursor: pointer;
line-height: 0;
transition: border-color .12s, transform .1s;
}
.icon-pick-btn:hover { transform: scale(1.06); }
.icon-pick-btn .ava { background: var(--sage-soft); color: var(--green-deep); }
.icon-pick-btn.selected { border-color: var(--coral); }
.icon-pick-btn.selected .ava { background: var(--coral-deep); color: #fff; }
.pc-next { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.pc-owner { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava { width: 21px; height: 21px; border-radius: 50%; background: var(--sage); color: var(--green-deep); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 21px; text-transform: uppercase; }
.person-photo-ava { position: relative; overflow: hidden; background: var(--sage-soft); }
.person-photo-ava::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(51, 86, 69, .11);
mix-blend-mode: multiply;
}
.person-photo-ava img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.94) contrast(.98); }
.person-photo-ava .person-photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: -1; }
.avatar-edit-box { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); }
.avatar-edit-preview { width: 76px; height: 76px; flex: 0 0 76px; font-size: 24px; background: var(--sage-soft); color: var(--green-deep); }
.avatar-edit-copy { min-width: 0; }
.avatar-edit-copy p { margin: 4px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.avatar-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.avatar-edit-actions input[type="file"] { max-width: 100%; font-size: 13px; }
.avatar-edit-status { grid-column: 1 / -1; min-height: 18px; font-size: 12px; color: var(--muted); }
.avatar-edit-status.ok { color: var(--green-deep); font-weight: 700; }
.avatar-edit-status.bad { color: var(--coral-deep); font-weight: 700; }
.avatar-crop-box {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255,255,255,.55);
}
.avatar-crop-box[hidden] { display: none; }
.avatar-crop-preview {
width: 220px;
height: 220px;
max-width: 100%;
border-radius: 50%;
background: var(--cream-deep);
border: 1px solid var(--line);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
cursor: grab;
touch-action: none;
user-select: none;
}
.avatar-crop-preview.is-dragging { cursor: grabbing; }
.avatar-crop-controls {
display: grid;
gap: 10px;
min-width: 0;
}
.avatar-crop-help {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
.avatar-crop-controls label {
display: grid;
gap: 5px;
font-size: 12px;
font-weight: 800;
color: var(--green-deep);
}
.avatar-crop-controls input[type="range"] {
width: 100%;
accent-color: var(--coral);
}
.settings-save-btn:disabled,
.settings-save-btn.is-saved {
opacity: .62;
box-shadow: none;
cursor: default;
}
.settings-save-btn.is-saved {
background: var(--sage-soft);
color: var(--green-deep);
border-color: rgba(49, 88, 70, .16);
}
@media (max-width: 640px) {
.avatar-edit-box { grid-template-columns: 1fr; }
.avatar-crop-box { grid-template-columns: 1fr; justify-items: center; }
.avatar-crop-controls { width: 100%; }
.fchat-compose-hero { margin: 6px 10px 12px; }
}
.pc-tasks { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.project-detail { max-width: 1080px; }
.pd-backbar { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-back { display: inline-flex; align-items: center; width: auto; min-height: 0; padding: 7px 13px; font-size: 13px; font-weight: 600; border-color: transparent; background: var(--cream-deep); color: var(--green-deep); }
.pd-back:hover { background: var(--cream); }
.pd-hero { margin-bottom: 22px; }
.pd-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pd-status { color: #fff; font-size: 12px; padding: 4px 10px; }
.pd-title { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0 0 12px; }
.pd-title .pd-num { color: var(--muted); margin-right: 8px; font-weight: 700; }
.pd-owner-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-owner-row .pc-owner { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.pd-ava { background: var(--sage-soft); color: var(--ink); }
.pd-drive { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; text-decoration: none; border: 1px solid var(--line); color: var(--green-deep); background: var(--paper); border-radius: 10px; }
.pd-drive:hover { border-color: var(--sage); }
.pd-desc { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 14px 0 0; max-width: 72ch; }
.pd-grid { margin-top: 4px; align-items: start; }
.pd-side > .card.pad { margin-bottom: 16px; }
.pd-side > .card.pad:last-child { margin-bottom: 0; }
.pd-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.chk { width: 21px; height: 21px; flex: 0 0 21px; border: 2px solid var(--sage-deep); border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; margin-top: 2px; font-size: 13px; font-weight: 800; color: #fff; }
.chk.done { background: var(--go); border-color: var(--go); }
.chk-on { cursor: pointer; }
.chk-on:hover { border-color: var(--green); }
.pd-archive { background: var(--paper); }
.archived-box { margin-top: 18px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 2px 14px; }
.archived-box summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); padding: 9px 0; }
.archived-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; }
.archived-row .pn { flex: 1; font-size: 14px; }
.help-layout { display: flex; flex-direction: column; gap: 18px; }
.help-hero h2 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(30px, 4vw, 46px); color: var(--ink); line-height: 1; }
.help-hero p { max-width: 860px; margin: 0; color: var(--muted); line-height: 1.65; }
.help-start-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.help-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.help-quick-grid span { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--paper); color: var(--ink); font-size: 13px; line-height: 1.4; }
.help-quick-grid b { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; margin-right: 6px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 12px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.help-grid-compact .card { min-height: 0; }
.help-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.help-section-grid article { border-top: 1px solid var(--line); padding-top: 12px; }
.help-section-grid h3 { margin: 0 0 5px; font-size: 16px; color: var(--ink); }
.help-section-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.help-wide { margin-top: 20px; }
.help-lead { font-size: 14px; color: var(--muted); margin: 0 0 12px; line-height: 1.6; }
.help-lead-ink { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.7; }
.help-list, .help-steps { font-size: 14px; padding-left: 18px; color: var(--ink); margin: 0; line-height: 1.65; }
.help-list li, .help-steps li { margin-bottom: 5px; }
.help-c-coral { color: var(--coral); margin-bottom: 8px; }
.help-c-green { color: var(--green); margin-bottom: 8px; }
.help-c-amber { color: var(--amber); margin-bottom: 8px; }
.help-c-sage { color: var(--sage-deep); margin-bottom: 8px; }
.help-rhythm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.help-rhythm div { border-left: 4px solid var(--coral); padding: 8px 12px; background: var(--paper); border-radius: 6px; }
.help-rhythm b { display: block; margin-bottom: 3px; color: var(--ink); }
.help-rhythm span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.help-shell { display: grid; grid-template-columns: minmax(212px, .3fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.help-search { position: relative; margin-top: 18px; max-width: 620px; }
.help-search input { width: 100%; padding: 13px 92px 13px 44px; border-radius: 999px; border: 1px solid rgba(47, 85, 69, .18); background: #fff; font-size: 15px; color: var(--ink); font-family: inherit; }
.help-search input::placeholder { color: var(--muted); }
.help-search input:focus { outline: none; border-color: rgba(226, 117, 89, .5); box-shadow: 0 0 0 3px rgba(226, 117, 89, .12); }
.help-search-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; display: inline-flex; }
.help-search-ic svg { width: 100%; height: 100%; }
.help-search-clear { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: 0; background: var(--cream-deep); color: var(--muted); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.help-search-clear:hover { color: var(--ink); }
.help-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.help-quick button { border: 1px solid rgba(47, 85, 69, .16); background: rgba(255, 255, 255, .72); color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 650; cursor: pointer; font-family: inherit; transition: border-color .14s ease, background .14s ease; }
.help-quick button:hover { border-color: rgba(226, 117, 89, .4); background: #fff; }
.help-nav4 { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 16px; }
.help-nav4-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px 4px; }
.help-nav4-items { display: flex; flex-direction: column; gap: 5px; }
.help-nav4-item { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-family: inherit; transition: background .14s ease, border-color .14s ease; }
.help-nav4-item:hover { background: rgba(255, 255, 255, .8); border-color: rgba(47, 85, 69, .12); }
.help-nav4-item.active { background: rgba(231, 119, 91, .10); border-color: rgba(226, 117, 89, .30); }
.help-nav4-ic { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(47, 85, 69, .08); color: var(--green-deep); }
.help-nav4-ic svg { width: 16px; height: 16px; }
.help-nav4-item.active .help-nav4-ic { background: var(--coral); color: #fff; }
.help-nav4-copy { min-width: 0; }
.help-nav4-copy b { display: block; font-size: 13.5px; line-height: 1.2; }
.help-nav4-copy small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
.help-results-head { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.help-result { appearance: none; display: block; width: 100%; text-align: left; border: 1px solid rgba(47, 85, 69, .13); background: rgba(255, 255, 255, .72); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer; font-family: inherit; }
.help-result:hover { border-color: rgba(226, 117, 89, .4); }
.help-result-page { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--coral-deep); background: rgba(226, 117, 89, .1); border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; }
.help-result b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }
.help-result small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.help-result mark { background: rgba(226, 159, 59, .35); color: inherit; border-radius: 3px; padding: 0 1px; }
.help-empty { padding: 22px; border: 1px dashed rgba(47, 85, 69, .2); border-radius: 12px; color: var(--muted); font-size: 13.5px; line-height: 1.6; background: rgba(255, 255, 255, .5); }
.help-flash { animation: helpFlash 1.6s ease; }
@keyframes helpFlash { 0% { background: rgba(226, 117, 89, .2); box-shadow: 0 0 0 3px rgba(226, 117, 89, .28); } 100% { background: transparent; box-shadow: none; } }
.sr-group { margin-bottom: 6px; }
.sr-group-label { display: block; padding: 10px 14px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.sr-item.is-stale { opacity: .62; }
.sr-item mark { background: rgba(226, 159, 59, .34); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-intro { padding: 18px 16px 20px; }
.search-intro-lead { margin: 0 0 13px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.search-intro-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.search-chip { border: 1px solid rgba(47, 85, 69, .16); background: rgba(255, 255, 255, .8); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 650; cursor: pointer; font-family: inherit; }
.search-chip:hover { border-color: rgba(226, 117, 89, .42); }
.search-empty { padding: 20px 16px; }
.search-empty b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 6px; }
.search-empty p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sr-loose-note { padding: 11px 15px 3px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.help-page { display: none; }
.help-page.active { display: block; }
.help-section { scroll-margin-top: 22px; }
.help-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.help-section-head h2 { margin: 0; font-family: var(--display); color: var(--ink); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; }
.help-section-head .eyebrow { margin-bottom: 6px; }
.help-steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.help-step-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid rgba(47, 85, 69, .13); border-radius: 8px; background: rgba(255,255,255,.68); }
.help-step-num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(226, 117, 89, .12); color: var(--coral-deep); font-weight: 800; font-size: 12px; }
.help-step-card b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }
.help-step-card p { margin: 0 0 9px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.help-device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.help-device-card { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: rgba(255,255,255,.7); }
.help-device-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.help-device-title span { color: var(--coral); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.help-device-title b { color: var(--ink); font-size: 18px; }
.help-note { margin-top: 14px; padding: 13px 14px; border-left: 4px solid var(--amber); border-radius: 8px; background: rgba(226, 159, 59, .1); color: var(--ink); font-size: 13px; line-height: 1.55; }
.help-two-col, .help-notification-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.help-notification-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-two-col article, .help-notification-rules article { padding: 14px; border: 1px solid rgba(47, 85, 69, .12); border-radius: 8px; background: rgba(255,255,255,.64); }
.help-two-col h3, .help-notification-rules h3, .help-feature-grid h3 { margin: 0 0 6px; color: var(--ink); font-size: 16px; }
.help-two-col p, .help-notification-rules p, .help-feature-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.help-feature-grid article { padding: 13px 0 0; }
@media (max-width: 760px) {
.help-quick-grid, .help-rhythm { grid-template-columns: 1fr; }
.help-grid { grid-template-columns: 1fr; }
.help-shell { display: block; }
.help-nav4 { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 8px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.help-nav4::-webkit-scrollbar { display: none; }
.help-nav4-group, .help-nav4-items { display: contents; }
.help-nav4-label { display: none; }
.help-nav4-item { width: auto; flex: 0 0 auto; padding: 7px 12px 7px 8px; border: 1px solid rgba(47, 85, 69, .14); background: rgba(255, 255, 255, .75); border-radius: 999px; }
.help-nav4-ic { flex-basis: 22px; width: 22px; height: 22px; border-radius: 50%; }
.help-nav4-ic svg { width: 13px; height: 13px; }
.help-nav4-copy b { font-size: 12.5px; }
.help-nav4-copy small { display: none; }
.help-search input { padding-right: 84px; font-size: 16px; }
.help-quick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.help-quick::-webkit-scrollbar { display: none; }
.help-quick button { flex: 0 0 auto; }
.help-steps-grid, .help-device-grid, .help-two-col, .help-notification-rules { grid-template-columns: 1fr; }
.help-section-head { align-items: stretch; flex-direction: column; }
.help-section-head .small-btn { align-self: flex-start; }
}
.tk-det { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk.is-done .tk-title { text-decoration: line-through; color: var(--muted); }
.tline.pd-static { cursor: default; }
.tline.pd-static:hover { background: transparent; }
.tdate.pd-future { color: var(--coral-deep); }
.tt.pd-past { color: var(--muted); }
.pd-team-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.pd-team-row:first-child { border-top: 0; }
.pd-team-meta { min-width: 0; }
.pd-team-meta b { display: block; font-size: 13.5px; font-weight: 600; }
.pd-team-meta span { font-size: 12px; color: var(--muted); }
.pd-zapis { padding: 11px 0; border-top: 1px solid var(--line); }
.pd-zapis:first-child { border-top: 0; }
.pd-zapis-head { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
.pd-zapis-head span { margin-left: auto; color: var(--muted); }
.pd-zapis-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.pd-comments .pd-subhead { font-size: 13px; font-weight: 700; margin: 16px 0 6px; color: var(--green-deep); }
.pd-comment { padding: 10px 0; border-top: 1px solid var(--line); }
.pd-comment:first-of-type { border-top: 0; }
.pd-comment-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pd-comment-head b { font-weight: 700; }
.pd-comment-head span { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.pd-comment-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; margin-top: 2px; }
.pd-comments .comment-form { margin-top: 14px; }
.gantt-container { margin-top: 6px; }
.gantt-row { height: 30px; }
.gantt-label { flex: 0 0 150px; width: 150px; font-size: 12px; padding-right: 10px; }
.gantt-track { height: 18px; background: var(--cream-deep); min-width: 220px; }
.gantt-bar { top: 0; }
.gantt-axis { height: auto; margin-bottom: 6px; }
.gantt-axis-track { height: auto; }
.gantt-month { box-sizing: border-box; }
.task-filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--cream-deep); border-radius: 10px; padding: 3px; }
.seg-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg-btn.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(34, 48, 42, .1); }
.flt { border: 1px solid var(--line); background: var(--paper); border-radius: 9px; padding: 7px 11px; font-size: 13px; font-weight: 500; color: var(--ink); }
.task-list { padding: 4px 0; background: var(--paper); border-radius: 8px; }
.task-list .tk { padding: 13px 16px; }
.tk-meta .ava { width: 18px; height: 18px; font-size: 9px; flex: 0 0 18px; }
.tk-det-1 { -webkit-line-clamp: 1; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 16px; }
.person-card {
border: 1px solid var(--look-line, rgba(56, 85, 74, .13));
border-radius: 16px;
padding: 17px 18px;
display: flex;
flex-direction: column;
min-height: 208px;
cursor: pointer;
transition: transform .16s var(--motion-ease, ease), border-color .16s ease, box-shadow .16s ease;
box-sizing: border-box;
}
.person-card:hover {
transform: translateY(-2px);
}
.person-card-top { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.person-card-head { flex: 1; min-width: 0; }
.person-card-ava {
width: 46px;
height: 46px;
font-size: 15.5px;
flex: 0 0 46px;
margin-top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background: var(--sage-soft);
color: var(--ink);
}
.person-card-name {
font-family: var(--display);
font-weight: 700;
font-size: 15.5px;
letter-spacing: -.008em;
color: var(--ink);
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.person-card-me { font-size: 10px; color: var(--coral); font-weight: 700; margin-left: 3px; vertical-align: middle; }
.person-card-pronouns {
font-size: 10.5px;
color: var(--muted);
font-weight: 700;
letter-spacing: .25px;
margin-top: 2px;
}
.person-card-focus {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.person-card-middle { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.person-card-tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 0;
}
.person-card-tags .pill {
font-size: 10px;
padding: 3px 9px;
color: #fff;
border-radius: 999px;
font-weight: 700;
letter-spacing: .2px;
}
.person-card-bottom {
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid var(--look-line-soft, rgba(56, 85, 74, .08));
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 8px;
font-size: 12px;
}
.person-card-contact { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.person-card-owned {
flex: 0 0 auto;
font-size: 11px;
font-weight: 700;
color: var(--sage-deep);
background: rgba(169, 184, 164, .16);
padding: 3px 9px;
border-radius: 999px;
}
.pcc-email {
color: var(--ink);
text-decoration: none;
font-weight: 600;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color .12s;
}
.pcc-email:hover {
color: var(--green-deep);
}
.pcc-phone {
color: var(--muted);
text-decoration: none;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
transition: color .12s;
}
.pcc-phone:hover {
color: var(--green-deep);
}
.people-access-banner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
padding: 15px 18px;
border: 1px solid rgba(226, 159, 59, .34);
border-radius: var(--look-radius, 20px);
background:
radial-gradient(360px 220px at 100% 0%, rgba(226, 159, 59, .1), transparent 62%),
rgba(255, 253, 248, .94);
box-shadow: var(--look-shadow, 0 14px 34px rgba(43, 66, 58, .065));
}
.people-access-icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: rgba(226, 159, 59, .16);
color: var(--amber);
}
.people-access-icon svg { width: 21px; height: 21px; }
.people-access-copy { flex: 1; min-width: 180px; }
.people-access-copy b { display: block; color: var(--ink); font-weight: 700; }
.people-access-copy span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.people-access-btn { width: auto; min-height: 0; height: auto; margin: 0; font-size: 12.5px; padding: 9px 17px; }
.person-detail .card.pad { margin-bottom: 16px; }
.person-detail .card.pad:last-of-type { margin-bottom: 0; }
.profile-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.profile-actions .btn { width: auto; min-height: 0; padding: 8px 13px; font-size: 13px; }
.profile-edit-btn { box-shadow: 0 7px 18px rgba(226, 119, 91, .18); }
.person-hero {
display: flex;
gap: 20px;
align-items: center;
margin: 6px 0 22px;
padding: 20px 22px;
border: 1px solid var(--look-line, rgba(56, 85, 74, .13));
border-radius: var(--look-radius-hero, 22px);
background:
radial-gradient(460px 320px at 106% -20%, rgba(169, 184, 164, .12), transparent 60%),
radial-gradient(360px 300px at -6% 120%, rgba(224, 122, 95, .06), transparent 62%),
rgba(255, 253, 248, .95);
box-shadow: var(--look-shadow, 0 14px 34px rgba(43, 66, 58, .065));
}
.person-hero-ava { width: 82px; height: 82px; font-size: 27px; flex: 0 0 82px; border-radius: 24px; background: var(--sage-soft); color: var(--ink); box-shadow: 0 8px 20px rgba(47, 85, 69, .12); }
.person-hero-main { flex: 1; min-width: 0; }
.profile-eyebrow { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: 3px; margin-bottom: 6px; text-transform: uppercase; }
.person-hero-main .pd-title { display: inline; font-size: 30px; line-height: 1.06; margin: 0 8px 4px 0; }
.person-pronouns { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 10px; border-radius: 999px; background: var(--cream-deep); font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; vertical-align: middle; }
.person-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.person-focus { font-size: 17px; color: var(--ink); margin: 10px 0 0; }
.profile-grid { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr); gap: 18px; align-items: start; }
.profile-card {
border-radius: var(--look-radius, 20px);
border-color: var(--look-line, rgba(56, 85, 74, .13));
background:
radial-gradient(420px 300px at 108% -12%, rgba(169, 184, 164, .07), transparent 60%),
rgba(255, 253, 248, .94);
box-shadow: var(--look-shadow, 0 14px 34px rgba(43, 66, 58, .065));
}
.profile-card .panel-title { padding-bottom: 11px; border-bottom: 1px solid var(--look-line-soft, rgba(56, 85, 74, .08)); margin-bottom: 9px; }
.profile-facts > div,
.person-contact > div { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.profile-facts > div:first-child,
.person-contact > div:first-child { border-top: 0; }
.profile-facts > div span,
.person-contact > div span { flex: 0 0 90px; color: var(--muted); }
.profile-facts b,
.person-contact b { color: var(--ink); font-weight: 650; }
.profile-facts p { margin: 0; color: var(--ink); line-height: 1.5; }
.profile-wide { display: block !important; }
.profile-wide span { display: block; margin-bottom: 5px; }
.profile-meeting-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.profile-meeting-row:first-of-type { border-top: 0; }
.profile-meeting-row:hover { background: var(--cream); }
.profile-meeting-row span { color: var(--muted); font-size: 12px; }
.profile-meeting-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 14px; }
.profile-meeting-row em { color: var(--muted); font-size: 12px; font-style: normal; }
.profile-edit-note { margin-top: 0; }
@media (max-width: 860px) {
.profile-grid { grid-template-columns: 1fr; }
.person-hero { align-items: flex-start; }
.person-hero-main .pd-title { display: block; font-size: 25px; margin-bottom: 7px; }
.profile-meeting-row { grid-template-columns: 78px minmax(0, 1fr); }
.profile-meeting-row em { grid-column: 2; }
}
@media (max-width: 560px) {
.person-hero { gap: 13px; }
.person-hero-ava { width: 58px; height: 58px; flex-basis: 58px; font-size: 19px; }
.profile-actions { width: 100%; }
.profile-actions .btn { flex: 1 1 auto; }
}
.meetings-list { display: flex; flex-direction: column; gap: 14px; }
.meetings-list .meetcard { margin-top: 0; align-items: flex-start; }
.meetcard-kind { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; color: var(--coral-deep); }
.meetcard-summary { font-size: 13.5px; color: var(--ink); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meeting-detail .card.pad { margin-bottom: 16px; }
.meeting-detail .pd-owner-row { font-size: 14px; color: var(--muted); }
.meeting-detail .pd-owner-row b { color: var(--ink); }
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.meeting-detail-gas { max-width: 1160px; padding-bottom: 42px; }
.meeting-detail-gas .pd-hero { margin-bottom: 24px; }
.meeting-detail-gas .eyebrow { margin-bottom: 9px; }
.meeting-detail-gas .pd-title { font-size: 31px; margin-bottom: 10px; }
.meeting-topbar { align-items: center; margin-bottom: 20px; }
.meeting-actions, .meeting-admin-actions, .meeting-section-actions, .meeting-save-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meeting-actions .btn, .meeting-admin-actions .btn, .meeting-section-actions .btn, .meeting-save-row .btn { margin-top: 0 !important; }
.meeting-actions { margin-left: auto; }
.meeting-admin-actions { justify-content: flex-end; }
.meeting-action-btn, .meeting-copy-btn { min-height: 0; width: auto; padding: 9px 14px; font-size: 13px; border-radius: 10px; }
.meeting-copy-btn { background: var(--green); color: #fff; border-color: var(--green); }
.meeting-copy-btn:hover { background: var(--green-deep); }
.meeting-head-row { align-items: flex-start; margin-bottom: 24px; }
.meeting-head-main { min-width: 0; max-width: 760px; }
.meeting-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); font-size: 15px; }
.meeting-meta-line strong { color: var(--coral-deep); }
.meeting-meta-line b { color: var(--ink); }
.meeting-link { color: var(--green-deep); background: var(--cream-deep); border-radius: 999px; padding: 4px 10px; text-decoration: none; font-size: 12px; font-weight: 700; }
.meeting-link:hover { background: var(--cream); }
.meeting-calendar-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--cream-deep); color: var(--muted); font-size: 12px; font-weight: 800; }
.meeting-calendar-badge.on { background: var(--sage-soft); color: var(--green-deep); }
.meeting-write-form { margin: 0; }
.meeting-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 20px; align-items: start; }
.meeting-main, .meeting-side, .meeting-agenda-list { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.meeting-card { background: rgba(255,255,255,.72); border: 1px solid rgba(47, 85, 69, .16); border-radius: 8px; box-shadow: 0 10px 26px rgba(47, 85, 69, .06); padding: 18px 20px; min-width: 0; }
.meeting-card h3, .meeting-section-head h3 { font-family: var(--display); font-size: 17px; line-height: 1.15; margin: 0 0 12px; color: var(--ink); }
.meeting-card p { color: var(--muted); font-size: 12.5px; margin: -4px 0 14px; line-height: 1.45; }
.meeting-rests-card h3 { color: var(--coral-deep); }
.meeting-prep-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(47, 85, 69, .15); border-radius: 12px; background: var(--line); box-shadow: 0 7px 22px rgba(47, 85, 69, .05); }
.meeting-prep-strip > div { min-width: 0; padding: 11px 14px; background: rgba(255,255,255,.82); }
.meeting-prep-strip span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meeting-prep-strip b { display: block; margin-top: 2px; color: var(--green-deep); font-family: var(--display); font-size: 20px; }
.meeting-prep-strip .is-warning b { color: var(--coral-deep); }
.meeting-task-window-note { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 10px; margin-top: -3px; padding: 11px 13px; border: 1px solid rgba(47,85,69,.14); border-radius: 11px; background: rgba(255,255,255,.58); }
.meeting-task-window-note > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-deep); color: var(--sage-deep); }
.meeting-task-window-note > span svg { width: 16px; height: 16px; }
.meeting-task-window-note b, .meeting-task-window-note small, .meeting-task-window-note em { display: block; }
.meeting-task-window-note b { color: var(--ink); font-size: 11.5px; }
.meeting-task-window-note small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.meeting-task-window-note em { margin-top: 4px; color: var(--coral-deep); font-size: 9.5px; font-style: normal; }
.meeting-task-window-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.meeting-task-window-stats b { padding: 3px 7px; border-radius: 999px; background: rgba(47,85,69,.07); color: var(--muted); font-size: 9.5px; font-weight: 700; }
.meeting-task-window-note.is-frozen { background: rgba(237,244,236,.7); }
.meeting-task-window-note.is-frozen > span { background: rgba(75,135,94,.13); color: var(--go); }
.meeting-task-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.meeting-task-row:first-of-type { border-top: 0; }
.meeting-task-row:hover { background: var(--cream); }
.meeting-task-check { display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid var(--sage-deep); border-radius: 7px; background: #fff; margin-top: 1px; }
.meeting-task-check svg { width: 70%; height: 70%; }
.meeting-task-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.meeting-task-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.meeting-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.meeting-section-head h3 { margin: 0; }
.meeting-agenda-select, .meeting-status-select, .meeting-note-card input, .meeting-search-input {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
font-family: inherit;
font-size: 14px;
padding: 9px 12px;
}
.meeting-agenda-select { min-width: 230px; }
.mini-action { border: 1px solid var(--line); background: rgba(255,255,255,.66); color: var(--green-deep); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 800; cursor: pointer; }
.mini-action:hover { border-color: var(--sage); background: var(--cream); }
.meeting-agenda-card { --agenda-color: var(--amber); position: relative; background: rgba(255,255,255,.68); border: 1px solid rgba(47, 85, 69, .16); border-left: 4px solid var(--agenda-color); border-radius: 8px; box-shadow: 0 10px 26px rgba(47, 85, 69, .06); padding: 18px 20px; }
.meeting-agenda-head { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: center; gap: 10px; margin-bottom: 4px; }
.meeting-agenda-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.meeting-agenda-card-actions .mini-action { padding: 7px 9px; white-space: nowrap; }
.meeting-project-title { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 800; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-project-title:hover { color: var(--green-deep); }
.meeting-status-select { width: 100%; padding-top: 7px; padding-bottom: 7px; font-size: 13px; font-weight: 700; }
.meeting-status-select:disabled { opacity: 1; color: var(--ink); }
.meeting-agenda-owner { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.meeting-agenda-task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.meeting-agenda-task-head b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--cream-deep); color: var(--green-deep); font-size: 12px; }
.meeting-agenda-tasks { margin: 5px 0 16px; border-bottom: 1px solid var(--line); }
.meeting-task-row-compact { width: 100%; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; padding: 9px 3px; border: 0; border-top: 1px solid rgba(47, 85, 69, .09); background: transparent; color: inherit; font: inherit; text-align: left; }
.meeting-task-row-compact:first-child { border-top: 0; }
.meeting-task-row-compact .meeting-task-check { width: 17px; height: 17px; border-width: 1.5px; border-radius: 5px; }
.meeting-task-row-compact .meeting-task-title { display: block; font-size: 13.5px; }
.meeting-task-row-compact .meeting-task-meta { display: block; font-size: 11.5px; }
.meeting-task-row-compact.is-done { opacity: .78; }
.meeting-task-row-compact.is-done .meeting-task-check { border-color: var(--go); background: var(--go); color: #fff; }
.meeting-task-state { display: inline-flex; align-items: center; padding: 2px 5px; border-radius: 999px; font-size: 9.5px; font-weight: 800; }
.meeting-task-state.active { background: rgba(224,122,95,.1); color: var(--coral-deep); }
.meeting-task-state.carry { background: rgba(201,151,54,.13); color: #80631d; }
.meeting-task-state.done { background: rgba(75,135,94,.1); color: var(--go); }
.meeting-more-tasks { width: 100%; padding: 8px 3px 10px; border: 0; border-top: 1px solid rgba(47, 85, 69, .09); background: transparent; color: var(--green-deep); font: inherit; font-size: 12px; font-weight: 750; text-align: left; cursor: pointer; }
.meeting-more-tasks:hover { color: var(--coral-deep); }
.meeting-agenda-task-empty { margin: 7px 0 16px; padding: 10px 12px; border-radius: 8px; background: rgba(209, 224, 207, .34); color: var(--green-deep); font-size: 12px; }
.meeting-agenda-empty { border-left-color: var(--line); }
.meeting-note-label { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 800; margin-bottom: 6px; }
.meeting-note-area, .meeting-note-card textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
font-family: inherit;
font-size: 15px;
line-height: 1.45;
padding: 11px 13px;
resize: vertical;
box-sizing: border-box;
}
.meeting-note-area:focus, .meeting-note-card textarea:focus, .meeting-note-card input:focus, .meeting-search-input:focus { outline: none; border-color: var(--coral); background: #fff; }
.meeting-note-area[readonly] { color: var(--muted); cursor: pointer; }
.meeting-note-bullets { display: flex; flex-direction: column; gap: 6px; }
.note-bullet-row { display: flex; align-items: flex-start; gap: 8px; }
.note-bullet-dot { flex: 0 0 auto; color: var(--coral); font-size: 15px; line-height: 1.6; }
.meeting-note-bullet {
flex: 1;
min-width: 0;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--cream);
color: var(--ink);
font-family: inherit;
font-size: 14.5px;
line-height: 1.45;
padding: 7px 10px;
resize: none;
overflow: hidden;
box-sizing: border-box;
}
.meeting-note-bullet:focus { outline: none; border-color: var(--coral); background: #fff; }
.meeting-note-bullet[readonly] { color: var(--muted); }
.note-bullet-remove {
flex: 0 0 auto;
width: 26px;
height: 26px;
border: none;
background: transparent;
color: var(--muted);
font-size: 16px;
line-height: 1;
border-radius: 50%;
cursor: pointer;
}
.note-bullet-remove:hover { background: var(--cream-deep); color: var(--ink); }
.meeting-note-items { display: flex; flex-direction: column; gap: 10px; }
.meeting-note-item {
display: flex;
flex-direction: column;
gap: 5px;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--cream);
}
.note-item-head { display: flex; align-items: center; gap: 8px; }
.meeting-note-heading {
flex: 1;
min-width: 0;
border: none;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
padding: 3px 2px 6px;
box-sizing: border-box;
}
.meeting-note-heading:focus { outline: none; border-color: var(--coral); }
.meeting-note-content {
width: 100%;
border: none;
background: transparent;
color: var(--ink);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
padding: 2px;
resize: none;
overflow: hidden;
box-sizing: border-box;
}
.meeting-note-content:focus { outline: none; }
.meeting-note-content[readonly] { color: var(--muted); }
.meeting-rich-source { display: none !important; }
.meeting-rich-editor {
min-width: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
caret-color: var(--ink);
}
.meeting-rich-editor:empty::before {
content: attr(data-placeholder);
color: var(--muted);
opacity: .72;
pointer-events: none;
}
.meeting-rich-editor.is-bullet {
flex: 1;
min-height: 37px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--cream);
color: var(--ink);
font-family: inherit;
font-size: 14.5px;
line-height: 1.45;
box-sizing: border-box;
}
.meeting-rich-editor.is-bullet:focus { outline: none; border-color: var(--coral); background: #fff; }
.meeting-rich-editor.is-content {
width: 100%;
min-height: 42px;
padding: 2px;
border: none;
background: transparent;
color: var(--ink);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
box-sizing: border-box;
}
.meeting-rich-editor.is-content:focus { outline: none; }
.meeting-rich-editor strong { font-weight: 850; }
.meeting-rich-editor em { color: var(--green-deep); }
.meeting-note-card input { width: 100%; box-sizing: border-box; }
.meeting-save-row { padding-bottom: 6px; }
.meeting-save-row .btn { width: auto; padding: 10px 18px; }
.meeting-writing-tip {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 0 12px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.4;
}
.meeting-writing-tip > span { color: var(--green-deep); font-family: var(--body); font-size: 13px; font-weight: 800; }
.meeting-writing-tip > b { color: var(--green-deep); }
.meeting-selection-toolbar {
position: fixed;
z-index: 4100;
display: flex;
align-items: center;
gap: 3px;
padding: 4px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 10px;
background: var(--green-deep);
color: #fff;
box-shadow: 0 10px 26px rgba(32,52,44,.28);
}
.meeting-selection-toolbar[hidden] { display: none !important; }
.meeting-selection-toolbar::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 9px;
height: 9px;
background: var(--green-deep);
transform: translateX(-50%) rotate(45deg);
}
.meeting-selection-toolbar button {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
min-height: 34px;
padding: 6px 9px;
border: 0;
border-radius: 7px;
background: transparent;
color: #fff;
font: inherit;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.meeting-selection-toolbar button:hover,
.meeting-selection-toolbar button:focus-visible { background: rgba(255,255,255,.15); outline: none; }
.meeting-selection-toolbar button > strong,
.meeting-selection-toolbar button > em { font-family: var(--body); font-size: 16px; }
.meeting-note-reading,
.meeting-rich-lines { display: flex; flex-direction: column; gap: 7px; }
.meeting-rich-line { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.meeting-rich-bullet { flex: 0 0 auto; color: var(--coral); font-weight: 900; line-height: 1.6; }
.meeting-rich-line-main { min-width: 0; flex: 1; }
.meeting-rich-text { color: var(--ink); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.meeting-rich-text strong { color: var(--ink); font-weight: 850; }
.meeting-rich-text em { color: var(--green-deep); }
.meeting-rich-link { color: var(--green-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.meeting-person-mention {
display: inline;
margin: 0;
padding: 1px 5px;
border: 0;
border-radius: 6px;
background: rgba(47, 85, 69, .10);
color: var(--green-deep);
font: inherit;
font-weight: 800;
line-height: inherit;
cursor: pointer;
}
.meeting-person-mention:hover,
.meeting-person-mention:focus-visible { background: rgba(224, 122, 95, .16); color: var(--coral-deep); outline: none; }
.meeting-rich-paragraph { color: var(--ink); font-size: 14px; line-height: 1.65; }
.meeting-note-items-reading { gap: 13px; }
.meeting-note-item-reading { display: block; border: 0; border-left: 3px solid rgba(224, 122, 95, .35); border-radius: 0; background: transparent; padding: 2px 0 2px 12px; }
.meeting-note-item-reading h4,
.project-meeting-note-item h4 { margin: 0 0 6px; color: var(--ink); font-family: var(--display); font-size: 15px; }
.project-meeting-note { padding: 8px 0 2px 22px; color: var(--ink); }
.project-meeting-note-item + .project-meeting-note-item { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.meeting-attendance-card { position: relative; }
.meeting-search-input { width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.meeting-att-current, .meet-attendance { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.meet-att { gap: 7px; background: var(--cream-deep); border-radius: 999px; padding: 5px 10px 5px 6px; font-size: 12.5px; color: var(--green-deep); font-weight: 700; }
.meeting-attendees-edit { max-height: 260px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.44); }
.meeting-attendees-edit .check-list { display: grid; gap: 4px; }
.meeting-attendees-edit .check-row { padding: 6px 4px; border-radius: 8px; }
.meeting-attendees-edit .check-row:hover { background: var(--cream); }
.meeting-attendees-edit input { accent-color: var(--coral); }
.meeting-doc-card { margin-top: 18px; }
.meeting-detail-gas .meeting-card {
background: var(--paper);
border: 1px solid rgba(47, 85, 69, .16);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(47, 85, 69, .06);
padding: 20px 22px;
margin-bottom: 16px;
}
.meeting-detail-gas .meeting-main > .meeting-card:last-child,
.meeting-detail-gas .meeting-side > .meeting-card:last-child {
margin-bottom: 0;
}
.meeting-detail-gas .meeting-card h3,
.meeting-detail-gas .meeting-section-head h3 {
font-size: 18px;
}
.meeting-detail-gas .meeting-agenda-card {
background: var(--paper);
border: 1px solid rgba(47, 85, 69, .16);
border-left: 4px solid var(--agenda-color);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(47, 85, 69, .06);
padding: 18px 20px;
margin-bottom: 14px;
}
.meeting-detail-gas .meeting-agenda-card:last-child {
margin-bottom: 0;
}
.meeting-detail-gas .meeting-attendance-card {
position: relative;
}
.meeting-detail-gas .meeting-attendees-edit {
border: 0;
border-left: 1px solid var(--line);
border-radius: 0;
background: transparent;
padding: 4px 0 4px 12px;
}
.meeting-detail-gas .meeting-search-input,
.meeting-detail-gas .meeting-agenda-select,
.meeting-detail-gas .meeting-status-select,
.meeting-detail-gas .meeting-note-card input,
.meeting-detail-gas .meeting-note-area,
.meeting-detail-gas .meeting-note-card textarea {
border-radius: 8px;
}
.meeting-detail-gas .meeting-doc-card {
border-top: 1px solid var(--line);
margin-top: 24px;
padding-top: 18px;
}
@media (max-width: 980px) {
.meeting-layout { grid-template-columns: 1fr; }
.meeting-attendance-card { position: static; }
.meeting-actions { margin-left: 0; }
.meeting-admin-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.meeting-detail-gas .pd-title { font-size: 25px; }
.meeting-prep-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meeting-agenda-head { grid-template-columns: minmax(0, 1fr); }
.meeting-agenda-card-actions { justify-content: flex-start; }
.meeting-agenda-select { min-width: 0; width: 100%; }
.meeting-section-actions { width: 100%; }
.meeting-section-actions > * { flex: 1 1 100%; }
.meeting-actions, .meeting-admin-actions { width: 100%; }
.meeting-action-btn, .meeting-copy-btn { flex: 1 1 auto; }
}
.meet-attendance { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.meet-att { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.meet-att .ava { width: 22px; height: 22px; font-size: 9px; flex: 0 0 22px; }
.log-card { display: none; }
body.is-admin .log-card { display: block; }
.wl-bars { margin-bottom: 24px; background: rgba(255,255,255,.58); border-radius: 8px; box-shadow: none; }
.wl-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.wl-row:first-child { border-top: 0; }
.wl-name { flex: 0 0 180px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.wl-ava { width: 26px; height: 26px; font-size: 10px; flex: 0 0 26px; background: var(--sage-soft); color: var(--ink); }
.wl-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-bar-wrap { flex: 1; background: var(--cream); border-radius: 6px; height: 12px; overflow: hidden; }
.wl-bar { height: 100%; border-radius: 6px; transition: width .3s; }
.wl-count { flex: 0 0 auto; font-size: 12.5px; text-align: right; min-width: 130px; color: var(--muted); }
.wl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.wl-card { background: rgba(255,255,255,.64); border-radius: 8px; box-shadow: none; }
.wl-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.wl-card-head:hover .wl-card-name { color: var(--green); }
.wl-card-ava { width: 36px; height: 36px; font-size: 13px; flex: 0 0 36px; background: var(--sage-soft); color: var(--ink); }
.wl-card-name { font-weight: 700; font-size: 14px; }
.wl-card-sub { font-size: 11.5px; color: var(--muted); }
.wl-task { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); cursor: pointer; }
.wl-task-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-task-dl { font-size: 11px; white-space: nowrap; color: var(--muted); }
.wl-task.over .wl-task-title, .wl-task.over .wl-task-dl { color: var(--coral-deep); }
.floating-chat-fab {
position: fixed;
right: 24px;
bottom: 24px;
width: 58px;
height: 58px;
border: 0;
border-radius: 50%;
background: var(--coral);
color: #fff;
box-shadow: 0 12px 28px rgba(226, 119, 91, .36);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 80;
transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.floating-chat-fab[hidden],
.floating-chat-panel[hidden] {
display: none !important;
}
.foot-btn .nb-count {
margin-left: auto;
background: rgba(255,255,255,.16);
color: #fff;
border-radius: 999px;
padding: 1px 7px;
font-size: 11px;
font-weight: 800;
}
.floating-chat-fab:hover { background: var(--coral-deep); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(226, 119, 91, .42); }
.floating-chat-fab svg { width: 27px; height: 27px; }
.floating-chat-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 21px;
height: 21px;
padding: 0 5px;
border-radius: 999px;
background: #d94a3a;
color: #fff;
border: 2px solid var(--cream);
font-size: 11px;
font-weight: 800;
line-height: 19px;
}
.fchat-compose-toggle {
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(49, 88, 70, .18);
background: rgba(255,255,255,.72);
color: var(--green-deep);
font-weight: 900;
}
.fchat-compose-hero {
width: calc(100% - 20px);
margin: 4px 10px 10px;
padding: 12px 13px;
border: 1px solid rgba(224, 122, 95, .32);
border-radius: 14px;
background: linear-gradient(135deg, rgba(224,122,95,.18), rgba(246,241,231,.86));
color: var(--green-deep);
display: grid;
gap: 3px;
text-align: left;
cursor: pointer;
box-shadow: 0 8px 18px rgba(49,88,70,.08);
}
.fchat-compose-hero b {
font-family: var(--display);
font-size: 15px;
}
.fchat-compose-hero span {
color: var(--muted);
font-size: 12.5px;
}
.fchat-compose-hero:hover {
border-color: rgba(224, 122, 95, .58);
background: rgba(224,122,95,.2);
}
.floating-chat-panel {
position: fixed;
right: 24px;
bottom: 18px;
width: 424px;
max-width: calc(100vw - 32px);
height: 620px;
max-height: calc(100vh - 36px);
background: var(--paper);
border: 1px solid rgba(47, 85, 69, .2);
border-radius: 18px;
box-shadow: 0 22px 64px rgba(23, 39, 32, .28);
z-index: 81;
overflow: hidden;
display: flex;
flex-direction: column;
}
.fchat-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 15px;
background: var(--green);
color: #fff;
}
.fchat-head.thread { padding-left: 10px; }
.fchat-head div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fchat-head b { font-family: var(--display); font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-head span { font-size: 11px; color: var(--sage-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-head-btn {
width: 31px;
height: 31px;
border: 0;
border-radius: 9px;
background: rgba(255,255,255,.16);
color: #fff;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.fchat-head-btn:hover { background: rgba(255,255,255,.28); }
.fchat-hub-link { flex: 0 0 auto; min-height: 29px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font: 700 10px/1 var(--font-sans); cursor: pointer; }
.fchat-hub-link:hover { background: rgba(255,255,255,.22); }
.fchat-search { flex: 0 0 auto; padding: 8px 10px; background: var(--paper); border-bottom: 1px solid var(--line); }
.fchat-search input,
.fchat-compose input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
font: inherit;
font-size: 13.5px;
padding: 9px 11px;
}
.fchat-search input:focus,
.fchat-compose input:focus { outline: none; border-color: var(--coral); background: #fff; }
.fchat-tabs {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
overflow-x: auto;
background: var(--paper);
}
.fchat-tabs button {
border: 1px solid var(--line);
background: var(--cream);
border-radius: 999px;
padding: 5px 10px;
font-size: 11.5px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.fchat-tabs button.on { background: var(--green); color: #fff; border-color: var(--green); }
.fchat-tabs span { margin-left: 4px; }
.fchat-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px;
background: var(--cream);
}
.fchat-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 7px 5px;
color: var(--muted);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.fchat-section-head button {
border: 1px solid var(--line);
background: var(--paper);
color: var(--green-deep);
border-radius: 999px;
padding: 4px 8px;
font-size: 11px;
font-weight: 800;
cursor: pointer;
text-transform: none;
letter-spacing: 0;
}
.fchat-row,
.fchat-person-row {
width: 100%;
border: 0;
background: transparent;
border-radius: 12px;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
padding: 9px 9px;
cursor: pointer;
color: var(--ink);
}
.fchat-row:hover,
.fchat-person-row:hover { background: var(--cream-deep); }
.fchat-row.unread { background: rgba(226, 119, 91, .08); }
.fchat-ava {
background: var(--sage-soft);
color: var(--green-deep);
font-size: 12px;
}
.fchat-ava.project { border-radius: 12px; font-size: 11px; }
.fchat-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fchat-row-main > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fchat-row-main b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-row-main em { flex: 0 0 auto; color: var(--muted); font-size: 10.5px; font-style: normal; }
.fchat-row-main small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-row.unread .fchat-row-main b,
.fchat-row.unread .fchat-row-main small { color: var(--ink); font-weight: 800; }
.fchat-row i {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-style: normal;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.fchat-compose {
background: var(--cream-deep);
border: 1px solid var(--line);
border-radius: 12px;
padding: 9px;
margin: 3px 0 6px;
}
.fchat-compose-results { margin-top: 6px; }
.fchat-person-row .ava { width: 30px; height: 30px; flex: 0 0 30px; font-size: 10px; background: var(--sage-soft); color: var(--green-deep); }
.fchat-person-row span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fchat-person-row b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-person-row small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-thread {
flex: 1;
min-height: 0;
overflow-y: auto;
background: var(--cream);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.fchat-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 10px; line-height: 1.45; }
.fchat-empty b { display: block; color: var(--green-deep); margin-bottom: 3px; }
.thread-empty { margin: auto 0; }
.fchat-msg { max-width: 88%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.fchat-msg.me { align-self: flex-end; align-items: flex-end; }
.fchat-msg.grouped { margin-top: 2px; }
.fchat-author { color: var(--green-deep); font-size: 11px; font-weight: 800; padding-left: 36px; }
.fchat-msgline { display: flex; align-items: flex-end; gap: 8px; }
.fchat-msg-ava { width: 28px; height: 28px; flex: 0 0 28px; font-size: 10px; background: var(--sage-soft); color: var(--green-deep); }
.fchat-msg-ava.ghost { background: transparent; }
.fchat-bubble-wrap { position: relative; display: flex; flex-direction: column; max-width: 100%; min-width: 0; }
.fchat-bubble {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
border-bottom-left-radius: 5px;
padding: 8px 12px;
color: var(--ink);
font-size: 13.5px;
line-height: 1.42;
word-break: break-word;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.fchat-msg.me .fchat-bubble { background: var(--coral); border-color: var(--coral); border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.fchat-msg.grouped.other .fchat-bubble { border-top-left-radius: 7px; }
.fchat-msg.grouped.me .fchat-bubble { border-top-right-radius: 7px; }
.fchat-bubble.pinned { border-color: var(--amber) !important; box-shadow: 0 0 0 1px rgba(224, 160, 60, .24); }
.fchat-bubble.emoji-only {
border: 0 !important;
box-shadow: none !important;
padding: 2px 4px;
}
.fchat-bubble.emoji-only .fchat-text {
font-size: 34px;
line-height: 1.08;
}
.fchat-egg {
display: block;
width: 168px;
max-width: 100%;
border-radius: 12px;
object-fit: contain;
}
.fchat-egg-vk {
border: 2px solid #55ff8f;
filter: saturate(1.35) brightness(1.06);
animation: fchatVkMatrix 1.05s ease-in-out infinite;
}
@keyframes fchatVkMatrix {
0%, 100% { box-shadow: 0 0 8px rgba(85,255,143,.7), 0 0 18px rgba(85,255,143,.32); border-color: #3ddc72; }
50% { box-shadow: 0 0 18px rgba(85,255,143,.95), 0 0 42px rgba(85,255,143,.7); border-color: #b8ffd0; filter: saturate(1.8) brightness(1.16); }
}
.fchat-egg-spin {
border: none;
box-shadow: none;
background: transparent;
border-radius: 50%;
width: 96px;
height: 96px;
object-fit: cover;
filter: none;
animation: fchatEggSpin 2.4s linear infinite;
}
@keyframes fchatEggSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.fchat-egg-plain,
.fchat-egg-piwo {
border: 1px solid rgba(56, 85, 74, .27);
background: rgba(255, 255, 255, .72);
box-shadow: none;
filter: none;
animation: none;
}
.fchat-egg-piwo {
border-color: rgba(177, 120, 41, .48);
background: rgba(255, 252, 242, .82);
}
.fchat-egg-cutout {
width: 196px;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
animation: none;
}
.fchat-pin { display: block; color: var(--amber); text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 900; margin-bottom: 4px; }
.fchat-reply-snip { border-left: 3px solid rgba(47,85,69,.35); padding: 3px 7px; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.fchat-msg.me .fchat-reply-snip { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.55); }
.fchat-actions {
position: absolute;
top: 5px;
display: none;
gap: 1px;
background: rgba(250, 246, 236, .96);
box-shadow: 0 3px 10px rgba(0,0,0,.12);
border-radius: 999px;
padding: 1px 3px;
z-index: 6;
}
.fchat-msg.me .fchat-actions { left: 6px; right: auto; }
.fchat-msg.other .fchat-actions { right: 6px; left: auto; }
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-actions:hover { display: flex; }
.fchat-emoji-pop {
position: absolute;
z-index: 20;
display: flex;
gap: 1px;
padding: 4px 7px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.fchat-emoji-pop[hidden] { display: none; }
.fchat-emoji-pop button {
border: 0;
background: transparent;
font-size: 19px;
line-height: 1;
padding: 3px 4px;
border-radius: 50%;
cursor: pointer;
transition: transform .1s ease;
}
.fchat-emoji-pop button:hover { transform: scale(1.3); background: var(--cream); }
.fchat-actions button {
width: 24px;
height: 24px;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 12px;
}
.fchat-actions button:hover { background: var(--cream); color: var(--ink); }
.fchat-reacts { margin-top: 3px; }
.fchat-reacts button {
border: 1px solid var(--line);
background: var(--paper);
padding: 1px 6px;
font-size: 11px;
}
.fchat-reacts button.mine { background: var(--sage-soft); border-color: var(--sage-deep); }
.fchat-daysep { display: flex; align-items: center; gap: 10px; margin: 14px 2px 8px; }
.fchat-daysep::before, .fchat-daysep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fchat-daysep span { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.fchat-pinned-bar { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; background: rgba(224, 160, 60, .09); border-bottom: 1px solid var(--line); max-height: 92px; overflow-y: auto; }
.fchat-pinned-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; cursor: pointer; background: transparent; border: 0; text-align: left; width: 100%; }
.fchat-pinned-item:hover { background: rgba(224, 160, 60, .16); }
.fchat-pinned-ic { font-size: 11px; flex: 0 0 auto; }
.fchat-pinned-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-pinned-txt b { color: var(--green-deep); }
.fchat-pinned-unpin { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.fchat-pinned-unpin:hover { background: var(--cream); color: var(--ink); }
.fchat-flash .fchat-bubble { animation: fchatFlash 1.2s ease; }
@keyframes fchatFlash { 0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.04); } 30% { box-shadow: 0 0 0 3px var(--sage); } }
.floating-chat-dock {
position: fixed;
right: 96px;
bottom: 18px;
z-index: 80;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
gap: 12px;
pointer-events: none;
}
.floating-chat-dock.hub-open { right: 464px; }
.floating-chat-dock > * { pointer-events: auto; }
.floating-chat-dock[hidden] { display: none; }
.fcw {
width: 328px;
height: 460px;
max-height: calc(100vh - 36px);
background: var(--paper);
border: 1px solid rgba(47, 85, 69, .2);
border-radius: 16px 16px 12px 12px;
box-shadow: 0 22px 64px rgba(23, 39, 32, .26);
display: flex;
flex-direction: column;
overflow: hidden;
animation: fcwPop .16s ease;
}
@keyframes fcwPop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fcw.min { width: 252px; height: auto; flex-direction: row; align-items: stretch; border-radius: 12px; overflow: visible; background: var(--green); }
.fcw.min.has-unseen {
animation: fcwUnreadPulse 1.2s ease-in-out infinite;
}
@keyframes fcwUnreadPulse {
0%, 100% { box-shadow: 0 16px 42px rgba(23, 39, 32, .26), 0 0 0 0 rgba(226,119,91,.45); }
50% { box-shadow: 0 16px 42px rgba(23, 39, 32, .28), 0 0 0 8px rgba(226,119,91,0); }
}
.fcw-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 8px 9px 12px;
background: var(--green);
color: #fff;
cursor: pointer;
}
.fcw-head-ava { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; background: rgba(255,255,255,.18); color: #fff; }
.fcw-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fcw-head-info b { font-family: var(--display); font-size: 14.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcw-head-info span { font-size: 10.5px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-presence-line {
display: inline-flex !important;
align-items: center;
gap: 5px;
min-width: 0;
}
.chat-presence-line > i {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: rgba(255,255,255,.34);
box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.chat-presence-line.is-online > i {
background: #79d49a;
box-shadow: 0 0 0 2px rgba(121,212,154,.2);
}
.chat-detail-head .chat-presence-line {
color: var(--muted);
letter-spacing: .06em;
text-transform: uppercase;
}
.chat-detail-head .chat-presence-line > i {
background: rgba(47,85,69,.24);
box-shadow: 0 0 0 2px rgba(47,85,69,.06);
}
.chat-detail-head .chat-presence-line.is-online > i {
background: #43a66c;
box-shadow: 0 0 0 2px rgba(67,166,108,.13);
}
.fcw-head-btn {
flex: 0 0 auto; width: 26px; height: 26px;
border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.85);
cursor: pointer; font-size: 17px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.fcw-head-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.fcw .fchat-thread { flex: 1 1 auto; min-height: 0; }
.fcw-pinned-host { flex: 0 0 auto; }
.fcw.min .fcw-min-bar {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: 9px;
padding: 9px 38px 9px 10px; border: 0; cursor: pointer;
background: var(--green); color: #fff;
border-radius: 12px; text-align: left;
}
.fcw.min .fcw-min-bar:hover { background: var(--green-deep); }
.fcw-min-title { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcw-min-badge { flex: 0 0 auto; background: var(--coral); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; }
.fcw.min .fcw-min-close {
position: absolute;
right: 7px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: 0;
cursor: pointer;
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.82);
border-radius: 50%;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.fcw.min .fcw-min-close:hover { background: var(--coral); color: #fff; }
.fcw.min.has-unseen .fcw-min-bar { background: var(--green-deep); }
@media (max-width: 560px) {
.floating-chat-dock, .floating-chat-dock.hub-open {
right: 8px; left: 8px; bottom: 8px;
flex-direction: column-reverse; align-items: stretch; gap: 8px;
}
.fcw { width: auto; height: min(74vh, 560px); }
.fcw.min { width: auto; }
}
.fchat-time { color: var(--muted); font-size: 10px; padding-left: 36px; }
.fchat-msg.me .fchat-time { padding-left: 0; padding-right: 4px; }
.fchat-replybar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid var(--line);
background: var(--cream-deep);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.fchat-replybar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchat-replybar button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
.fchat-foot {
position: relative;
flex: 0 0 auto;
display: flex;
gap: 8px;
align-items: flex-end;
padding: 10px;
border-top: 1px solid var(--line);
background: var(--paper);
}
.fcw-emoji-btn {
flex: 0 0 auto;
width: 40px;
height: 40px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.fcw-emoji-btn:hover { background: var(--cream-deep); color: var(--coral); }
.fcw-cpose {
position: absolute;
left: 10px;
right: 10px;
bottom: 62px;
z-index: 12;
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 3px;
padding: 8px;
max-height: 156px;
overflow-y: auto;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 13px;
box-shadow: 0 -8px 26px rgba(0,0,0,.16);
}
.fcw-cpose[hidden] { display: none; }
.fcw-cpose button {
border: 0;
border-radius: 9px;
background: transparent;
cursor: pointer;
font-size: 21px;
line-height: 1;
padding: 5px 2px;
}
.fcw-cpose button:hover { background: var(--cream-deep); transform: scale(1.14); }
.fchat-foot textarea {
flex: 1;
min-width: 0;
resize: none;
min-height: 40px;
max-height: 120px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--cream);
color: var(--ink);
font: inherit;
font-size: 14px;
line-height: 1.4;
padding: 10px 12px;
}
.fchat-foot textarea:focus { outline: none; border-color: var(--coral); background: #fff; }
.fchat-foot button[type="submit"] {
flex: 0 0 auto;
min-width: 42px;
height: 40px;
border: 0;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 13px;
}
.fchat-foot button[type="submit"]:hover { background: var(--coral-deep); }
.fchat-foot button[type="submit"] svg { width: 18px; height: 18px; }
.fchat-text .chat-link { color: var(--green-deep); text-decoration: underline; }
.fchat-msg.me .fchat-text .chat-link { color: #fff; }
.fchat-text .chat-mention-tag { background: rgba(47,85,69,.12); color: var(--green-deep); font-weight: 800; border-radius: 5px; padding: 0 3px; }
.fchat-msg.me .fchat-text .chat-mention-tag { color: #fff; background: rgba(255,255,255,.24); }
.fchat-msg.mentions-me { box-shadow: inset 3px 0 0 var(--coral); border-radius: 6px; }
.chat-mention-pop {
position: fixed;
z-index: 4000;
background: var(--card, #fff);
border: 1px solid var(--line, rgba(0,0,0,.12));
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,.20);
padding: 4px;
max-height: 220px;
overflow-y: auto;
}
.chat-mention-opt {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 9px;
border: none;
background: transparent;
border-radius: 7px;
cursor: pointer;
font-size: 13px;
text-align: left;
color: var(--ink, #222);
}
.chat-mention-opt:hover { background: var(--cream-deep, rgba(0,0,0,.06)); }
.mention-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.mention-option-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-option-copy small { color: var(--muted); font-size: 10.5px; }
.chat-mention-ava {
flex: 0 0 22px; width: 22px; height: 22px; font-size: 10px;
background: var(--coral); color: #fff;
display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
@media (max-width: 700px) {
.meeting-writing-tip { align-items: flex-start; }
.meeting-selection-toolbar button { min-width: 44px; min-height: 44px; }
.project-meeting-note { padding-left: 0; }
.floating-chat-fab { right: 16px; bottom: 18px; }
.floating-chat-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(78vh, 640px); max-width: none; }
.fchat-search input,
.fchat-compose input,
.fchat-foot textarea { font-size: 16px; }
.fchat-actions { display: flex; position: static; transform: none; margin-bottom: 4px; align-self: flex-start; opacity: .78; }
.fchat-msg.me .fchat-actions { margin-left: auto; }
}
.project-pulse { display: grid; grid-template-columns: minmax(250px, 1.15fr) minmax(0, 2fr); gap: 12px; margin: 16px 0 18px; }
.project-next-step, .project-pulse-links { border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); box-shadow: 0 5px 18px rgba(50,47,39,.05); }
.project-next-step { display: flex; flex-direction: column; justify-content: center; padding: 17px 19px; background: linear-gradient(125deg, color-mix(in srgb, var(--sage) 18%, #fff), color-mix(in srgb, var(--amber) 9%, #fff)); }
.project-next-step span, .project-pulse-links button span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.project-next-step b { margin-top: 5px; font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.project-pulse-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.project-pulse-links button { min-width: 0; padding: 14px 15px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.project-pulse-links button:last-child { border-right: 0; }
.project-pulse-links button:hover { background: var(--cream); }
.project-pulse-links button b, .project-pulse-links button small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.project-pulse-links button b { font-size: 13px; white-space: nowrap; }
.project-pulse-links button small { color: var(--muted); font-size: 11px; }
.project-pulse-links .bad { color: var(--coral-deep); }
.project-dependencies { display: grid; gap: 15px; }
.dependency-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.dependency-toolbar b { font-family: var(--font-display); font-size: 18px; }
.dependency-toolbar p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.dependency-progress { height: 5px; overflow: hidden; border-radius: 999px; background: var(--cream-deep); }
.dependency-progress i { display: block; height: 100%; border-radius: inherit; background: var(--sage-deep); }
.dependency-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dependency-group { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.72); }
.dependency-group > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dependency-group > header h3 { margin: 0; font-family: var(--font-display); font-size: 18px; }
.dependency-group > header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.dependency-group > header > b, .dependency-done summary > b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 99px; background: var(--cream-deep); font-size: 12px; }
.dependency-list { display: grid; gap: 9px; }
.dependency-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.dependency-task.status-active { border-left: 4px solid var(--sage-deep); }
.dependency-task.status-waiting, .dependency-task.status-blocked { border-left: 4px solid var(--amber-deep); }
.dependency-task.status-done { opacity: .76; }
.dependency-task-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 9px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.dependency-state { align-self: center; padding: 3px 7px; border-radius: 99px; background: var(--cream-deep); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dependency-title { align-self: center; overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.dependency-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.dependency-avatar { width: 22px; height: 22px; flex: 0 0 22px; font-size: 8px; }
.dependency-reason { grid-column: 1 / -1; padding: 7px 9px; border-radius: 9px; background: var(--cream); color: var(--muted); font-size: 11px; line-height: 1.35; }
.dependency-edit { align-self: center; white-space: nowrap; }
.dependency-done { border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.5); }
.dependency-done > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; cursor: pointer; font-weight: 700; }
.dependency-done > .dependency-group { margin: 0 10px 10px; }
.meeting-att-current .meet-att:is(button) { font: inherit; color: inherit; cursor: pointer; }
.meeting-att-current .meet-att:is(button):hover { border-color: color-mix(in srgb, var(--sage-deep) 40%, var(--line)); background: var(--cream); }
.meeting-att-avatar, .person-picker-ava { width: 25px; height: 25px; flex: 0 0 25px; font-size: 9px; }
.person-autocomplete-suggestion { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
.project-pulse { grid-template-columns: 1fr; }
.project-pulse-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-pulse-links button:nth-child(2) { border-right: 0; }
.project-pulse-links button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
.project-pulse { margin-top: 12px; }
.project-next-step { padding: 14px 15px; }
.project-next-step b { font-size: 18px; }
.project-pulse-links button { padding: 12px; }
.dependency-toolbar { align-items: stretch; flex-direction: column; padding: 14px; }
.dependency-toolbar .btn { width: 100%; justify-content: center; }
.dependency-columns { grid-template-columns: 1fr; }
.dependency-task { grid-template-columns: minmax(0, 1fr); }
.dependency-edit { width: 100%; justify-content: center; }
}
.chat-detail-card {
display: flex;
flex-direction: column;
height: calc(100vh - 120px);
min-height: 480px;
background: var(--card-bg, #fff);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 1px solid var(--line);
overflow: hidden;
}
.chat-detail-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
background: var(--cream);
}
.chat-detail-head .chat-title-info { align-items: flex-start; text-align: left; }
.chat-title-info {
display: flex;
flex-direction: column;
}
.chat-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.chat-sub-title {
margin: 2px 0 0 0;
font-size: 12px;
}
.chat-messages-thread {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg, #faf9f6);
}
.chat-msg-row {
display: flex;
flex-direction: column;
max-width: 75%;
position: relative;
}
.chat-msg-row.me {
align-self: flex-end;
align-items: flex-end;
}
.chat-msg-row.other {
align-self: flex-start;
align-items: flex-start;
}
.chat-msg-row.grouped {
margin-top: -4px;
}
.chat-msg-author-name {
font-size: 11px;
color: var(--muted);
margin-bottom: 3px;
margin-left: 36px;
font-weight: 500;
}
.chat-msg-body-wrap {
display: flex;
align-items: flex-end;
gap: 8px;
width: 100%;
}
.chat-msg-row.me .chat-msg-body-wrap {
flex-direction: row-reverse;
}
.chat-msg-row.other.grouped .chat-msg-body-wrap {
padding-left: 36px;
}
.chat-msg-ava {
width: 28px;
height: 28px;
font-size: 10px;
background: var(--sage-soft);
color: var(--ink);
flex-shrink: 0;
margin-bottom: 2px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.chat-msg-bubble-container {
position: relative;
display: flex;
flex-direction: column;
}
.chat-msg-bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 13.5px;
line-height: 1.45;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
word-break: break-word;
}
.chat-msg-row.me .chat-msg-bubble {
background: var(--green-deep, #1b5e20);
color: #ffffff;
border-bottom-right-radius: 4px;
}
.chat-msg-bubble.emoji-only {
border: 0 !important;
box-shadow: none !important;
padding: 0 2px !important;
}
.chat-msg-bubble.emoji-only .chat-msg-text {
font-size: 38px;
line-height: 1.15;
}
.chat-msg-row.me .chat-msg-bubble.emoji-only .chat-msg-text { color: var(--ink, #333); }
.chat-msg-row.other .chat-msg-bubble {
background: var(--card-bg, #ffffff);
color: var(--ink, #333);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.chat-msg-acts {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
gap: 2px;
z-index: 10;
background: rgba(250, 246, 236, .98);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: 0 3px 10px rgba(0,0,0,.12);
padding: 1px 3px;
white-space: nowrap;
}
.chat-msg-row.me .chat-msg-acts { right: 100%; padding-right: 8px; left: auto; }
.chat-msg-row.other .chat-msg-acts { left: 100%; padding-left: 8px; right: auto; }
.chat-msg-row:hover .chat-msg-acts,
.chat-msg-bubble-container:hover .chat-msg-acts,
.chat-msg-acts:hover { display: flex; }
.chat-act-btn {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
font-size: 14px;
border-radius: 50%;
color: var(--muted);
transition: background 0.1s, color 0.1s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-act-btn:hover {
background: var(--cream);
color: var(--ink);
}
.chat-msg-menu {
position: absolute;
z-index: 100;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 6px 20px rgba(34, 48, 42, 0.16);
padding: 4px;
display: flex;
flex-direction: column;
gap: 1px;
align-items: stretch;
top: 34px;
margin-top: 0;
white-space: nowrap;
min-width: 148px;
max-width: min(230px, calc(100vw - 32px));
}
.chat-msg-row.me .chat-msg-menu,
.fchat-msg.me .chat-msg-menu {
right: 0;
left: auto;
}
.chat-msg-row.other .chat-msg-menu,
.fchat-msg.other .chat-msg-menu {
left: 0;
right: auto;
}
.chat-menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 8px;
background: none;
border: none;
border-radius: 8px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
padding: 7px 10px;
text-align: left;
transition: background 0.1s, color 0.1s;
}
.chat-menu-item:hover {
color: var(--ink);
background: var(--cream-deep, rgba(0,0,0,.06));
}
.chat-menu-item.danger {
color: var(--bad);
}
.chat-menu-item.danger:hover {
color: #900;
}
.chat-menu-item.spec {
font-weight: 500;
color: var(--green-deep);
border-top: 1px solid var(--line);
}
.fchat-thread .chat-msg-menu {
padding: 4px;
gap: 1px;
}
.fchat-thread .chat-msg-menu .chat-menu-item {
font-size: 12px;
padding: 7px 10px;
}
.chat-menu-item-icon {
margin-right: 2px;
font-size: 14px;
color: var(--muted);
vertical-align: middle;
line-height: 1;
}
.chat-menu-item:hover .chat-menu-item-icon {
color: var(--ink);
}
.chat-menu-item.danger .chat-menu-item-icon {
color: var(--bad);
}
.chat-msg-time {
font-size: 10px;
color: var(--muted);
align-self: center;
white-space: nowrap;
}
.chat-msg-bubble.pinned {
border: 2px solid var(--amber) !important;
}
.chat-pin-tag {
display: block;
font-size: 9.5px;
color: var(--amber-deep, #b58100);
font-weight: bold;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chat-decision-tag {
display: block;
font-size: 9.5px;
color: var(--green-deep, #1b5e20);
font-weight: bold;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chat-deleted-text {
font-style: italic;
color: var(--muted);
}
.chat-msg-reacts {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
align-self: flex-start;
}
.chat-msg-row.me .chat-msg-reacts {
align-self: flex-end;
}
.chat-react-badge {
background: var(--card-bg, #ffffff);
border: 1px solid var(--line);
border-radius: 12px;
padding: 2px 6px;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: all 0.2s;
}
.chat-react-badge:hover {
background: var(--bg);
border-color: var(--muted);
}
.chat-react-badge.active {
background: var(--sage-soft);
border-color: var(--green);
}
.chat-react-badge .count {
font-weight: bold;
color: var(--ink);
}
.chat-reply-preview {
background: rgba(0, 0, 0, 0.04);
border-left: 3px solid rgba(0, 0, 0, 0.2);
padding: 4px 8px;
margin-bottom: 6px;
border-radius: 4px;
font-size: 12px;
color: inherit;
opacity: 0.85;
}
.chat-msg-row.me .chat-reply-preview {
background: rgba(255, 255, 255, 0.15);
border-left-color: rgba(255, 255, 255, 0.5);
}
.chat-forward-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
opacity: 0.72;
margin-bottom: 4px;
}
.chat-forward-tag svg { width: 12px; height: 12px; }
.chat-group-ava { background: var(--sage-soft, #cbd8c4); color: var(--green-deep, #2f4f34); }
.chat-group-people {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius: 10px;
padding: 6px;
}
.chat-group-pick {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 8px;
cursor: pointer;
}
.chat-group-pick:hover { background: rgba(0, 0, 0, 0.04); }
.chat-group-pick input { margin: 0; }
.chat-forward-preview {
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
padding: 8px 10px;
margin: 0 0 12px;
font-size: 13px;
opacity: 0.85;
}
.chat-footer-input {
border-top: 1px solid var(--line);
padding: 14px 20px;
background: var(--cream);
display: flex;
flex-direction: column;
gap: 8px;
}
.chat-comment-form {
display: flex;
gap: 12px;
align-items: flex-end;
width: 100%;
}
.chat-comment-form textarea {
flex: 1;
border: 1px solid var(--line);
border-radius: 20px;
padding: 10px 16px;
font-family: inherit;
font-size: 13.5px;
resize: none;
min-height: 40px;
max-height: 150px;
line-height: 1.4;
outline: none;
background: #ffffff;
transition: border-color 0.2s;
}
.chat-comment-form textarea:focus {
border-color: var(--green);
}
.chat-compose-emoji-btn {
flex: 0 0 auto;
width: 42px;
height: 42px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
cursor: pointer;
font-size: 18px;
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .1s, color .1s;
}
.chat-compose-emoji-btn:hover { background: var(--cream); color: var(--ink); }
.chat-compose-emoji-pop {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 6px;
margin-bottom: 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.14);
max-width: 300px;
}
.chat-compose-emoji-pop .emoji-btn {
border: 0;
background: transparent;
font-size: 20px;
line-height: 1;
padding: 5px;
border-radius: 8px;
cursor: pointer;
transition: transform .1s, background .1s;
}
.chat-compose-emoji-pop .emoji-btn:hover { transform: scale(1.25); background: var(--cream); }
.chat-submit-btn {
background: var(--green-deep, #1b5e20);
color: #ffffff;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
}
.chat-submit-btn:hover {
background: var(--green);
}
.chat-reply-context {
background: var(--card-bg);
border: 1px solid var(--line);
border-left: 4px solid var(--green);
padding: 8px 12px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.chat-reply-cancel-btn {
background: none;
border: none;
font-size: 16px;
color: var(--muted);
cursor: pointer;
}
.chat-emoji-popover {
position: absolute;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 4px 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
display: flex;
gap: 4px;
z-index: 1000;
}
.emoji-btn {
background: none;
border: none;
font-size: 18px;
padding: 4px;
cursor: pointer;
border-radius: 50%;
transition: transform 0.15s;
}
.emoji-btn:hover {
transform: scale(1.25);
background: var(--bg);
}
.chat-unread-dot {
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--coral-deep, #d32f2f);
border-radius: 50%;
margin-left: 6px;
}
.project-chat-container {
display: flex;
flex-direction: column;
background: var(--card-bg, #ffffff);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
margin-top: 16px;
}
.project-chat-thread {
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px;
background: var(--bg, #faf9f6);
}
.project-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; margin-bottom: 10px; }
.focus-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); min-width: 0; }
.focus-label { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 800; margin-bottom: 3px; }
.focus-value { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; white-space: pre-wrap; }
.focus-value.muted { color: var(--muted); font-weight: 600; }
.project-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 12px; border-bottom: 1px solid var(--line); overflow: hidden; }
.project-tab { min-width: 0; border: 1px solid var(--line); border-bottom: 0; background: var(--cream-deep); color: var(--muted); border-radius: 12px 12px 0 0; padding: 7px 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: .12s; margin-right: -1px; text-align: center; }
.project-tab:hover { background: rgba(255, 255, 255, .72); color: var(--green-deep); }
.project-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 -2px 8px rgba(34, 48, 42, .06); position: relative; z-index: 1; }
.project-section { margin-top: 0; background: rgba(255, 255, 255, .52); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.project-section > .project-main-grid { margin-top: 0; }
.project-main-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 12px; margin-top: 12px; align-items: start; }
.project-primary, .project-secondary { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.project-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-two-col > .card, .project-primary > .card, .project-secondary > .card { min-width: 0; }
.fold-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .58); margin-top: 16px; overflow: hidden; }
.fold-card[open] { background: var(--paper); box-shadow: var(--shadow); }
.fold-card summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; }
.fold-card summary::-webkit-details-marker { display: none; }
.fold-card summary b { font-family: var(--display); font-size: 17px; }
.gantt-container { overflow-x: auto; background: var(--paper); padding-bottom: 4px; }
.gantt-row { display: flex; align-items: center; margin-bottom: 8px; position: relative; height: 26px; }
.gantt-row:last-child { margin-bottom: 0; }
.gantt-label { width: 200px; flex: 0 0 200px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; color: var(--ink); }
.gantt-track { flex: 1; background: var(--cream); border-radius: 6px; position: relative; height: 100%; overflow: hidden; }
.gantt-bar { position: absolute; height: 100%; border-radius: 6px; min-width: 4px; transition: .2s; }
.gantt-axis-track { background: transparent; display: flex; border-radius: 0; border-bottom: 1px solid var(--sage-soft); padding-bottom: 4px; }
.gantt-month { font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--muted); letter-spacing: 1px; border-left: 1px solid var(--line); padding-left: 6px; }
.cmt { padding: 12px 0; }
.cmt .ava { flex: 0 0 24px; width: 24px; height: 24px; font-size: 10px; background: var(--sage-soft); color: var(--ink); }
.reply-box { margin-top: 4px; }
.reply-input { width: 100%; }
@media (max-width: 900px) {
.project-focus, .project-main-grid, .project-two-col { grid-template-columns: minmax(0, 1fr); }
.project-tabs { margin-left: -2px; margin-right: -2px; }
.project-tab { font-size: 12px; padding: 10px 7px; }
.project-section { padding: 14px; margin-left: -2px; margin-right: -2px; }
}
#modal-root{position:fixed;inset:0;z-index:140;display:none}
#modal-root.open{display:block}
.view-loading-shell {
display: grid;
gap: 18px;
min-height: 260px;
padding: clamp(22px, 4vw, 42px);
box-sizing: border-box;
border: 1px solid rgba(54, 82, 68, .12);
border-radius: 22px;
background: rgba(255, 253, 248, .9);
color: var(--ink);
}
.view-loading-copy {
display: flex;
align-items: center;
gap: 13px;
}
.view-loading-copy > div { display: grid; gap: 4px; }
.view-loading-copy b { font-family: var(--display); font-size: clamp(20px, 3vw, 28px); }
.view-loading-copy small { max-width: 620px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.view-loading-mark {
width: 34px;
height: 34px;
flex: 0 0 34px;
box-sizing: border-box;
border: 3px solid rgba(47, 85, 69, .14);
border-top-color: var(--sage-deep);
border-radius: 50%;
}
.view-loading-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.view-loading-grid i {
display: block;
min-height: 72px;
border-radius: 16px;
background: linear-gradient(100deg, rgba(222, 226, 216, .52) 20%, rgba(246, 244, 237, .92) 42%, rgba(222, 226, 216, .52) 64%);
background-size: 220% 100%;
}
.view-loading-shell.is-finance .view-loading-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (prefers-reduced-motion: no-preference) {
.view-loading-mark { animation: view-loading-spin .9s linear infinite; }
.view-loading-grid i { animation: view-loading-sheen 1.8s ease-in-out infinite; }
}
@keyframes view-loading-spin { to { transform: rotate(360deg); } }
@keyframes view-loading-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (max-width: 680px) {
.view-loading-shell { min-height: 230px; padding: 20px; border-radius: 18px; }
.view-loading-shell.is-finance .view-loading-grid,
.view-loading-grid { grid-template-columns: 1fr 1fr; }
.view-loading-grid i { min-height: 58px; }
}
.overlay{position:absolute;inset:0;background:rgba(34,48,42,.45);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto}
.modal{background:var(--paper);border-radius:18px;width:100%;max-width:560px;box-shadow:0 24px 70px rgba(0,0,0,.3);animation:pop .16s ease-out;margin:auto}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-head h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0}
.x{border:0;background:var(--cream-deep);width:32px;height:32px;border-radius:9px;font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.x:hover{background:#e7ddca;color:var(--ink)}
.modal-body{padding:22px 24px}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center}
.modal-foot .left{margin-right:auto}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field .hint{font-weight:400;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);background:var(--cream);transition:border .12s,background .12s;font-family:inherit;font-size:15px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--coral);background:#fff}
.field textarea{resize:vertical;min-height:64px;line-height:1.45}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.col-add{width:100%;background:transparent;border:1px dashed var(--sage-deep);border-radius:10px;padding:9px;font-size:13px;font-weight:600;opacity:.8;margin-top:10px;cursor:pointer;}
.col-add:hover{opacity:1;background:rgba(255,255,255,.5)}
.view-projects .collection-head { display: none !important; }
.view-projects > .card { background: transparent; border: 0; box-shadow: none; padding: 0; }
#search-root { position: absolute; z-index: 4; top: calc(100% + 8px); right: 0; width: min(680px, calc(100vw - 28px)); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.985); transform-origin: top right; transition: transform .16s ease, opacity .14s ease, visibility 0s linear .16s; }
#search-root.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
.search-box { width: 100%; overflow: hidden; background: rgba(255,253,249,.9); border: 1px solid rgba(47,85,69,.15); border-radius: 15px; box-shadow: 0 18px 44px rgba(34,48,42,.18); backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); }
.search-inp-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.search-inp-wrap svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
#search-inp { flex: 1; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; font-family: inherit; }
.search-close { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 21px/1 var(--font-sans); cursor: pointer; }
.search-close:hover { background: var(--cream-deep); color: var(--ink); }
.search-results { max-height: 380px; overflow-y: auto; padding: 8px; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; transition: background .1s; }
.sr-item:hover, .sr-item.focused { background: rgba(248,242,229,.82); }
.sri-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sri-ico svg { width: 15px; height: 15px; }
.sri-main { flex: 1; min-width: 0; }
.sri-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sri-sub { font-size: 12px; color: var(--muted); }
.search-empty { text-align: center; padding: 32px 20px; color: var(--muted); font-size: 13.5px; }
.search-hint { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.kbd { background: var(--cream-deep); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; font-size: 10.5px; font-weight: 600; }
.mycard { margin-bottom: 24px; border-left: 4px solid var(--coral); }
.chk-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chk-inline label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 10px; background: var(--cream-deep); border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: .12s; }
.chk-inline label:hover { border-color: var(--sage); }
.chk-inline input { margin: 0; cursor: pointer; width: 15px; height: 15px; accent-color: var(--coral); }
.btn-rm-row {
width: 38px;
height: 38px;
background: var(--cream-deep);
border: 1px solid var(--line);
border-radius: 9px;
color: var(--coral);
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .12s, border-color .12s;
padding: 0;
box-sizing: border-box;
}
.btn-rm-row:hover {
background: var(--line);
border-color: var(--sage);
}
.btn-add-row {
width: auto !important;
min-height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
background: var(--cream) !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
color: var(--green-deep) !important;
cursor: pointer;
margin-top: 6px;
transition: all .12s;
}
.btn-add-row:hover {
background: var(--cream-deep) !important;
border-color: var(--green) !important;
}
.field select, select.f-team-n {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322302a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
padding-right: 32px !important;
cursor: pointer;
}
.autocomplete-attendance-container {
position: relative !important;
}
.autocomplete-suggestions {
position: absolute !important;
z-index: 2000 !important;
background: var(--paper, #ffffff) !important;
border: 1px solid var(--line, #ccc) !important;
border-radius: 10px !important;
width: 100% !important;
max-height: 220px !important;
overflow-y: auto !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
margin-top: 4px !important;
box-sizing: border-box !important;
}
.autocomplete-suggestion {
padding: 10px 14px !important;
cursor: pointer !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
font-size: 13.5px !important;
color: var(--ink, #111) !important;
font-weight: 500 !important;
transition: background 0.15s ease !important;
background: var(--paper, #ffffff) !important;
}
.autocomplete-suggestion:last-of-type {
border-bottom: none !important;
}
.autocomplete-suggestion:hover {
background: var(--cream, #f4f7f4) !important;
color: var(--green-deep, #1b3d2b) !important;
}
#auth-loading-page[hidden],
#login-page[hidden],
#app-shell[hidden] {
display: none !important;
}
.auth-loading-page {
position: fixed;
z-index: 10000;
inset: 0;
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: 24px;
background:
radial-gradient(760px 420px at 50% 105%, rgba(169, 184, 164, .18), transparent 64%),
var(--cream, #f6f1e7);
box-sizing: border-box;
}
.auth-loading-card {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 24px;
align-items: center;
gap: 15px;
width: min(390px, 100%);
padding: 20px 22px;
border: 1px solid rgba(56, 85, 74, .14);
border-radius: 20px;
background: rgba(255, 253, 248, .92);
box-shadow: 0 18px 50px rgba(74, 58, 40, .11);
box-sizing: border-box;
}
.auth-loading-card svg {
width: 58px;
height: 58px;
}
.auth-loading-card b,
.auth-loading-card span {
display: block;
}
.auth-loading-card b {
color: var(--green-deep, #2b423a);
font-family: var(--display, sans-serif);
font-size: 24px;
line-height: 1.05;
}
.auth-loading-card span {
margin-top: 5px;
color: var(--muted, #66736c);
font-size: 12px;
line-height: 1.35;
}
.auth-loading-card i {
width: 19px;
height: 19px;
border: 2px solid rgba(56, 85, 74, .18);
border-top-color: var(--coral, #e07a5f);
border-radius: 50%;
animation: auth-loading-spin .8s linear infinite;
}
.auth-recovery-help[hidden] { display: none !important; }
.auth-recovery-help { grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid rgba(56, 85, 74, .12); }
.auth-recovery-help p { margin: 0; color: var(--muted, #66736c); font-size: 13px; line-height: 1.45; }
.auth-recovery-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.auth-recovery-actions button {
min-height: 44px;
padding: 9px 11px;
border: 1px solid rgba(56, 85, 74, .18);
border-radius: 11px;
background: var(--paper, #fffdf8);
color: var(--green-deep, #2b423a);
font: 700 12px/1.25 var(--body, sans-serif);
cursor: pointer;
}
.auth-recovery-actions button:first-child { border-color: transparent; background: var(--green, #2f5b49); color: #fff; }
.auth-recovery-actions button:focus-visible { outline: 3px solid rgba(224, 122, 95, .28); outline-offset: 2px; }
@media (max-width: 360px) { .auth-recovery-actions { grid-template-columns: 1fr; } }
@keyframes auth-loading-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.auth-loading-card i { animation-duration: 1.8s; }
}
.login-page {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100dvh;
overflow: auto;
padding: clamp(16px, 2.8vw, 32px);
background:
radial-gradient(900px 440px at 92% -110px, rgba(224, 122, 95, .055), transparent 64%),
radial-gradient(800px 500px at -100px 105%, rgba(169, 184, 164, .12), transparent 62%),
var(--cream, #f6f1e7);
box-sizing: border-box;
}
.login-card {
display: grid;
grid-template-columns: minmax(236px, 260px) minmax(430px, 1fr);
max-width: 960px;
width: 100%;
min-height: min(650px, calc(100dvh - 40px));
overflow: hidden;
padding: 0;
text-align: left;
background: var(--cream, #f6f1e7);
border: 1px solid rgba(56,85,74,.15);
border-radius: 24px;
box-shadow:
0 24px 70px rgba(74,58,40,.13),
0 2px 8px rgba(74,58,40,.06);
box-sizing: border-box;
}
.login-brand-panel {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
padding: 24px 22px 22px;
color: #eef2ec;
background: linear-gradient(180deg, var(--green, #38554a) 0%, var(--green-deep, #2b423a) 100%);
}
.login-brand-panel::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -188px;
bottom: -164px;
border: 1px solid rgba(255,255,255,.075);
border-radius: 50%;
box-shadow:
0 0 0 35px rgba(255,255,255,.022),
0 0 0 76px rgba(255,255,255,.014);
pointer-events: none;
}
.login-brand-mast {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 11px;
}
.login-brand-wordmark {
display: block;
min-width: 0;
}
.login-brand-wordmark b {
display: block;
color: #fff;
font-family: var(--display);
font-size: 16px;
font-weight: 800;
letter-spacing: .2px;
line-height: 1.05;
}
.login-brand-wordmark small {
display: block;
margin-top: 3px;
color: var(--sage-soft, #c9d3c4);
font-size: 10px;
font-weight: 600;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.login-title {
font-family: var(--display);
font-size: clamp(30px, 3.2vw, 35px);
font-weight: 800;
color: #fff;
margin: 7px 0 12px;
line-height: 1.02;
letter-spacing: -.035em;
}
.login-eyebrow {
margin: 0;
color: var(--sage, #a9b8a4);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .15em;
line-height: 1.55;
}
.login-brand-copy {
position: relative;
z-index: 1;
align-self: center;
padding: 28px 1px;
}
.login-lead {
max-width: 205px;
margin: 0;
color: var(--sage-soft, #c9d3c4);
font-size: 12.5px;
line-height: 1.55;
}
.login-brand-foot {
position: relative;
z-index: 1;
display: grid;
gap: 14px;
}
.login-trust-note {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: flex-start;
gap: 11px;
margin: 0;
padding: 12px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
background: rgba(255,255,255,.06);
color: var(--sage-soft, #c9d3c4);
font-size: 9.5px;
line-height: 1.45;
}
.login-trust-note svg {
width: 18px;
height: 18px;
padding: 6px;
border-radius: 9px;
background: rgba(255,255,255,.1);
color: #f0ae9b;
box-sizing: content-box;
}
.login-trust-note span {
min-width: 0;
}
.login-trust-note b {
display: block;
margin-bottom: 2px;
color: #fff;
font-size: 10px;
}
.login-brand-org {
margin: 0;
color: var(--sage, #a9b8a4);
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.login-logo-container {
display: grid;
place-items: center;
flex: 0 0 auto;
margin: 0;
}
.login-logo {
display: block;
width: 64px;
height: 64px;
}
.login-access-panel {
display: grid;
place-items: center;
min-width: 0;
padding: 24px clamp(26px, 3.8vw, 42px);
background:
radial-gradient(600px 320px at 108% -80px, rgba(224,122,95,.045), transparent 68%),
var(--cream, #f6f1e7);
}
.login-access-inner {
width: 100%;
max-width: 480px;
padding: 25px 27px 22px;
border: 1px solid var(--line, #e7e0d1);
border-radius: var(--radius-lg, 20px);
background: var(--paper, #fffdf9);
box-shadow: var(--shadow);
box-sizing: border-box;
}
.login-access-head {
margin-bottom: 15px;
}
.login-access-head .eyebrow {
color: var(--coral-deep, #c9684f);
font-size: 9.5px;
letter-spacing: .16em;
}
.login-access-head h2 {
margin: 5px 0 5px;
color: var(--ink, #22302a);
font-family: var(--display);
font-size: 30px;
line-height: 1.1;
letter-spacing: -.025em;
}
.login-access-head p {
margin: 0;
color: var(--muted, #5f6f66);
font-size: 12.5px;
line-height: 1.45;
}
.login-provider-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
width: 100%;
min-height: 46px;
padding: 9px 16px;
border: 1px solid #d8d5cc;
border-radius: 13px;
background: #fff;
color: var(--ink, #22302a);
box-shadow: 0 2px 6px rgba(43,66,58,.045);
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.login-provider-btn svg {
width: 21px;
height: 21px;
flex: 0 0 21px;
}
.login-provider-btn:hover:not(:disabled) {
border-color: #9aaa93;
background: #fff;
transform: translateY(-1px);
box-shadow: 0 7px 18px rgba(43,66,58,.09);
}
.login-provider-btn:disabled,
.login-email-form button:disabled {
cursor: wait;
opacity: .66;
}
.login-provider-btn.is-busy [data-google-login-label] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.login-provider-btn.is-busy [data-google-login-label]::after {
content: "";
width: 12px;
height: 12px;
flex: 0 0 12px;
border: 2px solid rgba(47, 91, 73, .18);
border-top-color: var(--green-deep, #2f5b49);
border-radius: 50%;
animation: spin .75s linear infinite;
}
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0 12px;
color: #7a857e;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.login-divider::before,
.login-divider::after {
content: "";
height: 1px;
flex: 1 1 auto;
background: var(--line, #e7e0d1);
}
.login-email-form label {
display: block;
margin: 0;
color: var(--ink, #22302a);
font-size: 11px;
font-weight: 800;
}
.login-email-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
.login-email-row input {
width: 100%;
min-width: 0;
min-height: 43px;
padding: 8px 12px;
border: 1px solid #d8d4ca;
border-radius: 12px;
background: #fff;
color: var(--ink, #22302a);
font: inherit;
font-size: 16px;
}
.login-email-row input:focus-visible {
outline: 0;
border-color: var(--coral, #e07a5f);
box-shadow: 0 0 0 3px rgba(224,122,95,.14);
}
.login-email-row .btn {
min-height: 43px;
margin: 0;
padding-inline: 16px;
white-space: nowrap;
}
.login-email-status {
min-height: 0;
margin-top: 0;
padding: 0;
border-radius: 11px;
color: var(--muted, #5f6f66);
font-size: 12px;
line-height: 1.5;
}
.login-email-status:not(:empty) {
min-height: 38px;
margin-top: 9px;
padding: 9px 11px;
border: 1px solid rgba(56,85,74,.16);
background: rgba(169,184,164,.13);
}
.login-email-status.is-error:not(:empty) {
border-color: rgba(184,69,48,.28);
background: rgba(184,69,48,.07);
color: var(--bad, #b84530);
}
.login-email-status.is-success:not(:empty) {
border-color: rgba(47,107,72,.24);
background: rgba(47,107,72,.07);
color: var(--ok, #2f6b48);
}
.login-privacy-note {
display: grid;
grid-template-columns: 17px minmax(0, 1fr);
align-content: center;
gap: 7px;
min-width: 0;
margin: 0;
color: #6e7b74;
font-size: 9.5px;
line-height: 1.42;
}
.login-privacy-note svg {
width: 16px;
height: 16px;
color: #72847a;
}
.login-data-link {
display: inline-flex;
margin: 0;
color: var(--green, #2f5545);
font-size: 9.5px;
font-weight: 800;
text-underline-offset: 3px;
}
.login-data-link:hover {
color: var(--coral-deep, #b84530);
}
.login-flow-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 14px;
padding: 9px 14px;
border-radius: 11px;
background: var(--coral, #e07a5f);
color: #fff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
@media (min-width: 761px) and (max-height: 760px) {
.login-page {
padding: 16px;
}
.login-brand-panel {
padding: 21px 20px 19px;
}
.login-brand-copy {
padding: 18px 1px;
}
.login-access-panel {
padding: 14px 26px;
}
.login-access-inner {
padding: 18px 23px 16px;
}
.login-access-head {
margin-bottom: 10px;
}
.login-access-head h2 {
margin-block: 3px 4px;
font-size: 28px;
}
.login-access-head p {
font-size: 11.5px;
line-height: 1.35;
}
.login-provider-btn {
min-height: 43px;
}
.login-divider {
margin: 9px 0 8px;
}
.login-method-tabs {
margin-bottom: 8px;
}
.login-email-form[data-login-panel="password"] {
gap: 3px;
}
.login-password-form > input,
.login-password-form > .btn {
min-height: 40px;
}
.login-method-link {
padding-top: 2px;
}
.login-security-row {
gap: 7px;
margin-top: 7px;
}
.login-private-device {
padding: 7px 9px;
}
.login-request-access {
margin-top: 7px;
padding-block: 8px;
}
.login-legal-row {
margin-top: 6px;
}
}
/* Onboarding zaměřený na zapojení (2026-08-01, onboarding2).
Jedna adaptivní cesta nahrazuje souběžný checklist a nováčkovské karty. */
#overview-view .dash-engagement {
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
margin: 0 0 22px;
padding: 24px;
border: 1px solid rgba(47, 85, 69, .18);
border-radius: 24px;
background:
radial-gradient(circle at 92% 8%, rgba(224, 122, 95, .14), transparent 31%),
linear-gradient(135deg, rgba(255, 253, 247, .98), rgba(237, 244, 239, .94));
box-shadow: 0 18px 44px rgba(27, 48, 39, .1);
}
#overview-view .dash-engagement::before {
content: "";
position: absolute;
z-index: -1;
right: -74px;
bottom: -104px;
width: 230px;
height: 230px;
border: 1px solid rgba(224, 122, 95, .15);
border-radius: 50%;
box-shadow: 0 0 0 28px rgba(224, 122, 95, .035);
pointer-events: none;
}
#overview-view .dash-engagement::after { display: none; }
.dash-journey-top {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.dash-journey-top h3 {
margin: 3px 0 0;
color: var(--ink);
font-family: var(--display);
font-size: clamp(23px, 2.4vw, 31px);
line-height: 1.08;
}
.dash-journey-top p {
max-width: 660px;
margin: 7px 0 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.55;
}
.dash-journey-later,
.dash-journey-skip,
.dash-journey-profile button {
border: 0;
background: transparent;
color: var(--green-deep);
font: inherit;
font-size: 12px;
font-weight: 750;
cursor: pointer;
}
.dash-journey-later {
flex: 0 0 auto;
padding: 8px 10px;
border-radius: 999px;
color: var(--muted);
}
.dash-journey-later:hover,
.dash-journey-later:focus-visible {
background: rgba(47, 85, 69, .07);
color: var(--ink);
outline: none;
}
.dash-journey-progress {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 22px 0 14px;
}
.dash-journey-milestone {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 10px;
border: 1px solid rgba(47, 85, 69, .1);
border-radius: 14px;
background: rgba(255, 255, 255, .5);
color: var(--muted);
}
.dash-journey-milestone i {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 10px;
background: rgba(47, 85, 69, .07);
color: var(--muted);
font-size: 11px;
font-style: normal;
font-weight: 850;
}
.dash-journey-milestone b {
min-width: 0;
font-size: 11.5px;
line-height: 1.25;
}
.dash-journey-milestone.is-active {
border-color: rgba(224, 122, 95, .34);
background: rgba(255, 248, 241, .84);
color: var(--ink);
box-shadow: 0 7px 18px rgba(224, 122, 95, .08);
}
.dash-journey-milestone.is-active i {
background: var(--coral);
color: #fff;
}
.dash-journey-milestone.is-done {
border-color: rgba(67, 126, 91, .2);
background: rgba(237, 244, 239, .76);
color: var(--green-deep);
}
.dash-journey-milestone.is-done i {
background: rgba(67, 126, 91, .14);
color: var(--green-deep);
}
.dash-journey-action {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-width: 0;
padding: 18px;
border: 1px solid rgba(224, 122, 95, .24);
border-radius: 19px;
background: rgba(255, 253, 249, .9);
box-shadow: 0 12px 28px rgba(27, 48, 39, .07);
}
.dash-journey-action-icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 18px;
background: linear-gradient(145deg, var(--coral), #eb947a);
color: #fff;
box-shadow: 0 10px 20px rgba(224, 122, 95, .2);
}
.dash-journey-action-icon svg { width: 27px; height: 27px; }
.dash-journey-action-copy { min-width: 0; }
.dash-journey-action-copy > small {
display: block;
margin-bottom: 3px;
color: var(--coral-deep);
font-size: 9.5px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.dash-journey-action h4 {
margin: 0;
color: var(--ink);
font-family: var(--display);
font-size: 19px;
line-height: 1.2;
}
.dash-journey-action p {
max-width: 680px;
margin: 5px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.dash-journey-actions {
display: grid;
justify-items: end;
gap: 7px;
min-width: 190px;
}
.dash-journey-actions .btn {
width: auto;
min-width: 190px;
min-height: 44px;
margin: 0;
justify-content: center;
white-space: normal;
}
.dash-journey-skip {
padding: 4px 7px;
color: var(--muted);
font-size: 10.5px;
}
.dash-journey-skip:hover,
.dash-journey-skip:focus-visible,
.dash-journey-profile button:hover,
.dash-journey-profile button:focus-visible {
color: var(--coral-deep);
text-decoration: underline;
outline: none;
}
.dash-journey-profile {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 11px;
color: var(--muted);
font-size: 10.5px;
}
.dash-journey-profile button { padding: 3px; font-size: 10.5px; }
#overview-view .dash-engagement.is-complete {
border-color: rgba(67, 126, 91, .25);
background:
radial-gradient(circle at 92% 8%, rgba(224, 122, 95, .11), transparent 31%),
linear-gradient(135deg, rgba(241, 247, 243, .98), rgba(255, 252, 245, .96));
}
#overview-view .dash-engagement.is-complete .dash-journey-action {
border-color: rgba(67, 126, 91, .24);
}
#overview-view .dash-engagement.is-complete .dash-journey-action-icon {
background: linear-gradient(145deg, #437e5b, var(--green-deep));
box-shadow: 0 10px 20px rgba(47, 85, 69, .18);
}
@media (max-width: 760px) {
#overview-view .dash-engagement {
margin-bottom: 16px;
padding: 17px;
border-radius: 20px;
}
.dash-journey-top { gap: 8px; }
.dash-journey-top h3 { font-size: 24px; }
.dash-journey-top p { font-size: 12.5px; }
.dash-journey-later { margin: -3px -5px 0 0; }
.dash-journey-progress {
gap: 5px;
margin: 17px 0 11px;
}
.dash-journey-milestone {
grid-template-columns: 24px minmax(0, 1fr);
gap: 5px;
padding: 7px 6px;
border-radius: 11px;
}
.dash-journey-milestone i {
width: 24px;
height: 24px;
border-radius: 8px;
font-size: 9.5px;
}
.dash-journey-milestone b { font-size: 9.5px; }
.dash-journey-action {
grid-template-columns: 46px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px;
border-radius: 16px;
}
.dash-journey-action-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.dash-journey-action-icon svg { width: 22px; height: 22px; }
.dash-journey-action h4 { font-size: 17px; }
.dash-journey-action p { font-size: 12px; }
.dash-journey-actions {
grid-column: 1 / -1;
justify-items: stretch;
width: 100%;
min-width: 0;
}
.dash-journey-actions .btn {
width: 100%;
min-width: 0;
}
.dash-journey-profile {
justify-content: flex-start;
flex-wrap: wrap;
}
}
@media (max-width: 420px) {
.dash-journey-milestone {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 7px 4px;
text-align: center;
}
.dash-journey-milestone b {
display: block;
font-size: 8.5px;
line-height: 1.18;
}
.dash-journey-milestone i { flex: 0 0 auto; }
}
@media (max-width: 760px) {
.login-page {
align-items: flex-start;
padding: 10px;
}
.login-card {
grid-template-columns: 1fr;
max-width: 520px;
min-height: auto;
padding: 0 !important;
border-radius: 22px;
}
.login-brand-panel {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
gap: 13px 18px;
padding: 18px 20px 16px;
}
.login-brand-mast {
grid-column: 1 / -1;
grid-row: 1;
}
.login-logo {
width: 54px;
height: 54px;
}
.login-brand-wordmark b {
font-size: 15px;
}
.login-brand-wordmark small {
font-size: 9px;
}
.login-eyebrow {
display: none;
}
.login-brand-copy {
grid-column: 1;
grid-row: 2;
align-self: center;
padding: 0;
transform: none;
}
.login-brand-org {
display: none;
}
.login-title {
margin: 0;
font-size: 23px !important;
line-height: 1.03;
}
.login-lead {
display: none;
}
.login-brand-foot {
grid-column: 2;
grid-row: 2;
display: block;
max-width: 210px;
}
.login-trust-note {
grid-template-columns: 25px minmax(0, 1fr);
gap: 8px;
padding: 8px 9px;
font-size: 8.5px;
}
.login-trust-note svg {
width: 15px;
height: 15px;
padding: 5px;
border-radius: 8px;
}
.login-trust-note b {
margin-bottom: 1px;
font-size: 9px;
}
.login-access-panel {
padding: 12px;
}
.login-access-inner {
padding: 22px 21px 19px;
border-radius: 18px;
}
.login-access-head h2 {
font-size: 27px;
}
.login-security-row {
grid-template-columns: 1fr;
gap: 7px;
}
.login-privacy-note {
padding: 0 3px;
}
.login-legal-row {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
}
@media (max-width: 460px) {
.login-page {
padding: 0;
}
.login-card {
width: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
}
.login-brand-panel {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: max(14px, env(safe-area-inset-top)) 18px 14px;
}
.login-brand-foot {
grid-column: 1;
grid-row: 3;
max-width: none;
}
.login-trust-note {
grid-template-columns: 24px minmax(0, 1fr);
}
.login-trust-note b {
display: inline;
margin: 0 4px 0 0;
}
.login-access-panel {
padding: 10px;
}
.login-access-inner {
padding: 21px 18px 18px;
}
}
.meeting-decision-recall {
padding: 0 !important;
border-color: rgba(49, 88, 70, .2) !important;
background: linear-gradient(145deg, rgba(243,247,239,.96), rgba(255,253,248,.98)) !important;
overflow: hidden;
}
.meeting-decision-recall-head {
display: grid;
grid-template-columns: 48px minmax(0,1fr) auto;
gap: 14px;
align-items: center;
padding: 17px 18px 15px;
}
.meeting-decision-recall-icon,
.dash-memory-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
background: var(--sage);
color: var(--green);
}
.meeting-decision-recall-icon svg { width: 24px; height: 24px; }
.meeting-decision-recall-head h3 { margin: 3px 0 4px; font-size: 20px; }
.meeting-decision-recall-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.meeting-decision-recall-head > b {
display: grid;
place-items: center;
min-width: 30px;
height: 30px;
border-radius: 999px;
background: rgba(49,88,70,.09);
color: var(--green);
font-size: 12px;
}
.meeting-decision-recall-list { border-top: 1px solid rgba(49,88,70,.12); }
.meeting-decision-recall-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 14px;
align-items: center;
padding: 11px 14px 11px 18px;
border-bottom: 1px solid rgba(49,88,70,.11);
transition: background .15s ease;
}
.meeting-decision-recall-row.is-revisit { background: rgba(235,181,80,.1); }
.meeting-decision-recall-row.is-keep { background: rgba(207,220,201,.18); }
.meeting-decision-recall-copy {
display: grid;
min-width: 0;
padding: 3px 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
font: inherit;
cursor: pointer;
}
.meeting-decision-recall-copy span { color: var(--coral-deep); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.meeting-decision-recall-copy b { margin-top: 3px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.meeting-decision-recall-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.meeting-decision-recall-actions { display: flex; align-items: center; gap: 5px; }
.meeting-decision-recall-actions > button {
min-height: 36px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 11px;
background: rgba(255,255,255,.82);
color: var(--muted);
font: 750 10.5px/1.1 var(--font-sans);
white-space: nowrap;
cursor: pointer;
}
.meeting-decision-recall-actions > button:hover { border-color: rgba(49,88,70,.35); color: var(--green); }
.meeting-decision-recall-actions > button.is-keep[aria-pressed="true"] { border-color: rgba(49,88,70,.3); background: var(--green); color: #fff; }
.meeting-decision-recall-actions > button.is-revisit[aria-pressed="true"] { border-color: rgba(171,121,32,.35); background: #f5e8c9; color: #805d22; }
.meeting-decision-recall-actions > button.is-done { color: var(--green); }
.meeting-decision-recall-actions > button.is-locked { opacity: .62; }
.meeting-decision-recall-actions > em { display: none; font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }
.meeting-decision-recall footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 14px 12px 18px;
color: var(--muted);
font-size: 10px;
}
.project-agreements-preview {
margin: 12px 0 16px;
padding: 16px;
border: 1px solid rgba(49,88,70,.16);
border-radius: 19px;
background: linear-gradient(145deg, rgba(243,247,239,.8), rgba(255,253,248,.9));
}
.project-agreements-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.project-agreements-preview h3 { margin: 3px 0 2px; font-size: 18px; }
.project-agreements-preview p { margin: 0; color: var(--muted); font-size: 11px; }
.project-agreements-preview-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.project-agreements-preview .decision-card { min-width: 0; background: rgba(255,255,255,.78); }
.project-agreements-preview .decision-card-meta { display: none; }
.dash-memory-strip {
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto 34px;
gap: 12px;
align-items: center;
padding: 12px 14px;
border: 1px solid rgba(49,88,70,.14);
border-radius: 17px;
background: linear-gradient(100deg, rgba(243,247,239,.88), rgba(255,252,246,.86));
}
.dash-memory-icon { width: 44px; height: 44px; border-radius: 14px; }
.dash-memory-icon svg { width: 21px; height: 21px; }
.dash-memory-strip > div { min-width: 0; }
.dash-memory-strip > div > small { display: block; color: var(--coral-deep); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dash-memory-strip > div > b { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; }
.dash-memory-strip > div > b button {
display: inline;
padding: 0;
border: 0;
border-bottom: 1px solid rgba(49,88,70,.28);
background: transparent;
color: var(--green);
font: inherit;
cursor: pointer;
}
.dash-memory-due { display: grid; gap: 2px; color: var(--muted); font-size: 9px; text-align: right; white-space: nowrap; }
.dash-memory-due b { color: var(--ink); font-size: 12px; }
.dash-memory-open { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 11px; background: rgba(49,88,70,.08); color: var(--green); font: 24px/1 var(--font-sans); cursor: pointer; }
@media (max-width: 900px) {
.project-agreements-preview-list { grid-template-columns: minmax(0,1fr); }
.project-agreements-preview .decision-card-meta { display: flex; }
.meeting-decision-recall-row { grid-template-columns: minmax(0,1fr); gap: 8px; }
.meeting-decision-recall-actions { justify-content: stretch; }
.meeting-decision-recall-actions > button { flex: 1 1 0; min-height: 44px; }
.meeting-decision-recall-actions > em { margin-right: auto; }
}
@media (max-width: 620px) {
.meeting-decision-recall-head { grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; padding: 14px 13px 12px; }
.meeting-decision-recall-icon { width: 42px; height: 42px; border-radius: 13px; }
.meeting-decision-recall-head h3 { font-size: 18px; }
.meeting-decision-recall-head p { font-size: 10.5px; }
.meeting-decision-recall-row { padding: 11px 12px; }
.meeting-decision-recall-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 5px; }
.meeting-decision-recall-actions > em { grid-column: 1/-1; display: block; margin: 0 0 1px; }
.meeting-decision-recall-actions > button { min-width: 0; height: 52px; min-height: 52px; max-height: 52px; padding: 6px 4px; white-space: normal; }
.meeting-decision-recall footer { align-items: stretch; flex-direction: column; padding: 10px 12px 12px; }
.meeting-decision-recall footer .small-btn { width: 100%; min-height: 44px; }
.project-agreements-preview { padding: 13px; }
.project-agreements-preview > header { align-items: flex-start; flex-direction: column; gap: 10px; }
.project-agreements-preview > header .small-btn { width: 100%; min-height: 44px; }
.dash-memory-strip { grid-template-columns: 40px minmax(0,1fr) 32px; gap: 10px; padding: 11px 12px; }
.dash-memory-icon { width: 40px; height: 40px; }
.dash-memory-due { grid-column: 2/4; justify-self: start; text-align: left; }
.dash-memory-open { grid-column: 3; grid-row: 1; }
}
@media (max-width: 420px) {
.login-email-row {
grid-template-columns: 1fr;
}
.login-email-row .btn {
width: 100%;
}
.login-divider {
white-space: normal;
text-align: center;
}
}
#modal-root .modal.usage-analytics-modal {
width: min(960px, calc(100vw - 36px));
max-width: 960px;
max-height: min(900px, calc(100dvh - 36px));
}
.usage-analytics-modal > .modal-body {
padding: 20px 22px 24px;
background: var(--cream-deep);
}
.usage-analytics-loading {
display: grid;
place-items: center;
gap: 12px;
min-height: 280px;
color: var(--muted);
font-weight: 750;
}
.usage-analytics-dashboard {
display: grid;
gap: 16px;
}
.usage-analytics-intro {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 18px 20px;
border: 1px solid rgba(47, 85, 69, .15);
border-left: 4px solid var(--coral);
border-radius: 18px;
background: var(--paper);
}
.usage-analytics-intro h4 {
margin: 2px 0 0;
font-family: var(--display);
font-size: 25px;
line-height: 1.1;
}
.usage-analytics-intro p {
margin: 5px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.usage-analytics-admin-badge {
flex: 0 0 auto;
padding: 7px 10px;
border-radius: 999px;
background: var(--green-deep);
color: #fff;
font-size: 10px;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.usage-analytics-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.usage-analytics-summary article {
display: grid;
align-content: start;
min-width: 0;
min-height: 116px;
padding: 15px 16px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 16px;
background: var(--paper);
}
.usage-analytics-summary article:first-child {
border-color: rgba(224, 122, 95, .28);
background: rgba(224, 122, 95, .08);
}
.usage-analytics-summary small {
color: var(--muted);
font-size: 10px;
font-weight: 800;
}
.usage-analytics-summary b {
margin-top: 6px;
color: var(--green-deep);
font-family: var(--display);
font-size: 29px;
line-height: 1;
}
.usage-analytics-summary span {
align-self: end;
margin-top: 10px;
color: var(--muted);
font-size: 10px;
line-height: 1.35;
}
.usage-analytics-methodology {
padding: 18px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 18px;
background: var(--paper);
}
.usage-member-connections {
padding: 18px;
border: 1px solid rgba(47, 85, 69, .16);
border-radius: 18px;
background: var(--paper);
}
.usage-member-connections > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.usage-member-connections > header > div:first-child > span {
color: var(--coral-deep);
font-size: 9px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.usage-member-connections h5 {
margin: 3px 0 0;
font-family: var(--display);
font-size: 21px;
}
.usage-member-connections > header p {
max-width: 610px;
margin: 5px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}
.usage-member-counts {
display: flex;
flex: 0 0 auto;
gap: 7px;
}
.usage-member-counts > b {
display: grid;
min-width: 76px;
padding: 9px 11px;
border-radius: 13px;
background: rgba(67, 126, 91, .1);
color: var(--green-deep);
font-family: var(--display);
font-size: 20px;
line-height: 1;
text-align: center;
}
.usage-member-counts > b.is-pending {
background: rgba(224, 122, 95, .12);
color: var(--coral-deep);
}
.usage-member-counts > b.is-engaged {
background: var(--green-deep);
color: #fff;
}
.usage-member-counts small {
margin-top: 4px;
font-family: var(--sans);
font-size: 8px;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.usage-member-groups {
display: grid;
gap: 9px;
}
.usage-member-group {
overflow: hidden;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 14px;
background: var(--cream);
}
.usage-member-group.is-pending {
border-color: rgba(224, 122, 95, .22);
background: rgba(224, 122, 95, .055);
}
.usage-member-group > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
color: var(--green-deep);
font-size: 12px;
font-weight: 850;
list-style: none;
}
.usage-member-group > summary::-webkit-details-marker { display: none; }
.usage-member-group > summary::before {
content: "›";
flex: 0 0 auto;
transform: rotate(0deg);
transition: transform .16s ease;
}
.usage-member-group[open] > summary::before { transform: rotate(90deg); }
.usage-member-group > summary > span { margin-right: auto; }
.usage-member-group > summary > b {
min-width: 27px;
padding: 4px 7px;
border-radius: 999px;
background: rgba(47, 85, 69, .09);
font-size: 10px;
text-align: center;
}
.usage-member-group.is-pending > summary { color: var(--coral-deep); }
.usage-member-group.is-pending > summary > b { background: rgba(224, 122, 95, .14); }
.usage-member-rows {
display: grid;
gap: 1px;
padding: 0 7px 7px;
}
.usage-member-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 10px;
border-top: 1px solid rgba(47, 85, 69, .09);
background: rgba(255, 255, 255, .58);
}
.usage-member-row:first-child { border-top: 0; border-radius: 11px 11px 0 0; }
.usage-member-row:last-child { border-radius: 0 0 11px 11px; }
.usage-member-row:only-child { border-radius: 11px; }
.usage-member-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: var(--green-deep);
color: #fff;
font-size: 10px;
font-weight: 850;
}
.usage-member-row.is-pending .usage-member-avatar { background: var(--coral); }
.usage-member-identity,
.usage-member-state {
display: grid;
min-width: 0;
}
.usage-member-identity b {
overflow: hidden;
color: var(--ink);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.usage-member-identity span,
.usage-member-state span {
overflow: hidden;
margin-top: 2px;
color: var(--muted);
font-size: 9.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.usage-member-state {
justify-items: end;
text-align: right;
}
.usage-member-state b {
display: flex;
align-items: center;
gap: 6px;
color: var(--green-deep);
font-size: 10.5px;
}
.usage-member-state b i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #43805d;
}
.usage-member-row.is-pending .usage-member-state b { color: var(--coral-deep); }
.usage-member-row.is-pending .usage-member-state b i { background: var(--coral); }
.usage-member-row.is-first-step .usage-member-state b { color: #8a641e; }
.usage-member-row.is-first-step .usage-member-state b i { background: #d5a342; }
.usage-member-row.is-exploring .usage-member-state b { color: var(--muted); }
.usage-member-row.is-exploring .usage-member-state b i { background: var(--sage); }
.usage-member-row.is-engaged .usage-member-avatar { background: #437e5b; }
.usage-member-all-connected {
margin: 0 7px 7px;
padding: 12px;
border-radius: 11px;
background: rgba(67, 126, 91, .08);
color: var(--green-deep);
font-size: 11px;
line-height: 1.45;
}
.usage-member-note {
margin: 11px 0 0;
color: var(--muted);
font-size: 10px;
line-height: 1.5;
}
.usage-member-note b { color: var(--green-deep); }
.usage-analytics-methodology > header {
margin-bottom: 14px;
}
.usage-analytics-methodology > header > span {
color: var(--coral-deep);
font-size: 9px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.usage-analytics-methodology h5 {
margin: 3px 0 0;
font-family: var(--display);
font-size: 20px;
}
.usage-analytics-methodology > header p {
max-width: 680px;
margin: 5px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}
.usage-analytics-method-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 9px;
}
.usage-analytics-method-grid article {
display: grid;
align-content: start;
min-width: 0;
padding: 13px;
border-radius: 14px;
background: var(--cream);
}
.usage-analytics-method-grid article:nth-child(2),
.usage-analytics-method-grid article:nth-child(5) {
background: rgba(201, 211, 196, .32);
}
.usage-analytics-method-grid b {
color: var(--green-deep);
font-size: 12px;
}
.usage-analytics-method-grid p {
margin: 5px 0 9px;
color: var(--ink);
font-size: 10.5px;
line-height: 1.45;
}
.usage-analytics-method-grid small {
align-self: end;
color: var(--muted);
font-size: 9.5px;
line-height: 1.4;
}
.usage-analytics-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.usage-analytics-grid > section {
min-width: 0;
padding: 16px 17px 18px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 17px;
background: var(--paper);
}
.usage-analytics-grid > section > header {
margin-bottom: 13px;
}
.usage-analytics-grid > section > header span {
color: var(--coral-deep);
font-size: 9px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.usage-analytics-grid h5 {
margin: 3px 0 0;
font-family: var(--display);
font-size: 18px;
}
.usage-analytics-bars {
display: grid;
gap: 11px;
}
.usage-analytics-bars + .usage-analytics-bars {
margin-top: 17px;
padding-top: 17px;
border-top: 1px solid rgba(47, 85, 69, .1);
}
.usage-analytics-bar-row {
min-width: 0;
}
.usage-analytics-bar-copy {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-width: 0;
margin-bottom: 5px;
}
.usage-analytics-bar-copy span {
overflow: hidden;
color: var(--ink);
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.usage-analytics-bar-copy b {
flex: 0 0 auto;
color: var(--green-deep);
font-size: 11px;
}
.usage-analytics-bar-track {
display: block;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: rgba(47, 85, 69, .09);
}
.usage-analytics-bar-track i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--coral);
}
.usage-analytics-grid > section:nth-child(3) .usage-analytics-bar-track i,
.usage-analytics-grid > section:nth-child(4) .usage-analytics-bar-track i {
background: var(--green);
}
.usage-analytics-empty {
margin: 0;
padding: 12px;
border-radius: 12px;
background: var(--cream);
color: var(--muted);
font-size: 11px;
line-height: 1.5;
}
.usage-analytics-empty + .usage-analytics-empty {
margin-top: 10px;
}
.usage-analytics-privacy {
padding: 15px 17px;
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 15px;
background: rgba(201, 211, 196, .32);
}
.usage-analytics-privacy b {
color: var(--green-deep);
font-size: 12.5px;
}
.usage-analytics-privacy p {
margin: 4px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.55;
}
.usage-analytics-empty-state {
display: grid;
justify-items: center;
gap: 8px;
min-height: 320px;
padding: 34px 24px;
text-align: center;
}
.usage-analytics-empty-state > span {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 18px;
background: var(--green-deep);
color: #fff;
}
.usage-analytics-empty-state > span svg {
width: 28px;
height: 28px;
}
.usage-analytics-empty-state h4 {
margin: 5px 0 0;
font-family: var(--display);
font-size: 24px;
}
.usage-analytics-empty-state > p {
max-width: 560px;
margin: 0 0 8px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.55;
}
.usage-analytics-empty-state .usage-analytics-privacy {
max-width: 650px;
text-align: left;
}
@media (max-width: 760px) {
#modal-root .modal.usage-analytics-modal {
width: 100%;
max-width: none;
max-height: calc(100dvh - env(safe-area-inset-top, 0px));
}
.usage-analytics-modal > .modal-body {
padding: 12px 13px 18px;
}
.usage-analytics-intro {
align-items: flex-start;
padding: 15px;
}
.usage-analytics-intro h4 {
font-size: 21px;
}
.usage-analytics-admin-badge {
padding: 6px 8px;
font-size: 8px;
}
.usage-analytics-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.usage-analytics-methodology {
padding: 15px;
}
.usage-member-connections {
padding: 15px;
}
.usage-member-connections > header {
display: grid;
gap: 11px;
}
.usage-member-counts {
width: 100%;
}
.usage-member-counts > b {
flex: 1 1 0;
}
.usage-member-row {
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
}
.usage-member-avatar {
width: 34px;
height: 34px;
}
.usage-member-state {
grid-column: 2;
justify-items: start;
text-align: left;
}
.usage-member-state span { white-space: normal; }
.usage-analytics-method-grid {
grid-template-columns: minmax(0, 1fr);
}
.usage-analytics-method-grid article {
padding: 12px 13px;
}
.usage-analytics-summary article {
min-height: 106px;
padding: 13px;
}
.usage-analytics-summary b {
font-size: 25px;
}
.usage-analytics-grid {
grid-template-columns: minmax(0, 1fr);
}
.usage-analytics-grid > section {
padding: 15px;
}
.usage-analytics-bar-copy span {
font-size: 11px;
}
.usage-analytics-modal > .modal-foot .btn {
flex: 1 1 0;
min-width: 0;
}
}
.modal,
.modal * {
box-sizing: border-box;
}
.modal .field input,
.modal .field textarea,
.modal .field select {
max-width: 100%;
}
.modal .form-grid,
.write-form .form-grid,
.modal .frow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.main .btn,
.modal .btn {
width: auto;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 15px;
line-height: 1.15;
}
.sidebar .btn,
.login-btn {
width: 100%;
}
.main .btn + .btn,
.modal .btn + .btn,
.meeting-actions .btn + .btn,
.meeting-admin-actions .btn + .btn,
.profile-actions .btn + .btn,
.project-actions .btn + .btn {
margin-top: 0;
}
.small-btn,
.mini-action,
.flt,
.meet-chip,
.seg-btn {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.15;
}
.small-btn,
.mini-action {
padding: 8px 12px;
font-size: 13px;
}
.head-row > .btn,
.collection-hero > .btn,
.pd-backbar > .btn,
.profile-actions .btn,
.meeting-actions .btn,
.meeting-admin-actions .btn,
.meeting-section-actions .btn,
.meeting-save-row .btn {
flex: 0 0 auto;
}
.write-form > .btn {
justify-self: start;
}
.modal .write-form > .btn {
justify-self: end;
}
.write-form > .modal-foot {
margin: 18px -24px -22px !important;
padding: 16px 24px !important;
border-top: 1px solid var(--line) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.write-form > .modal-foot .btn {
min-width: 118px;
}
.task-filters {
align-items: center;
justify-content: space-between;
gap: 12px;
}
.task-filters .seg {
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.task-filters .seg::-webkit-scrollbar {
display: none;
}
.task-filters .flt {
flex: 0 0 auto;
max-width: 260px;
}
.task-list {
overflow: hidden;
}
.task-list .tk {
align-items: flex-start;
}
.task-list .tk.is-waiting {
background: color-mix(in srgb, var(--sage-soft) 36%, var(--paper));
}
.task-list .tk.is-waiting .chk {
border-style: dashed;
opacity: .7;
}
.task-list .tk-title {
line-height: 1.35;
}
.task-waiting-pill {
color: var(--green-deep);
background: var(--sage-soft);
}
.task-follow-pill {
color: var(--coral-deep);
background: color-mix(in srgb, var(--coral) 12%, var(--cream));
}
.task-help-pill {
color: var(--coral-deep);
background: rgba(224, 122, 95, .12);
}
.task-circle-pill {
color: var(--green-deep);
background: color-mix(in srgb, var(--green-deep) 10%, var(--cream));
font-weight: 700;
}
.task-dependency-box {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 12px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--cream);
}
.task-waiting-box {
padding: 12px;
border: 1px solid var(--ui-line-soft);
border-radius: 10px;
background: rgba(255, 253, 248, .72);
}
.task-help-box {
padding: 12px;
border: 1px solid rgba(224, 122, 95, .22);
border-radius: 10px;
background: rgba(224, 122, 95, .055);
}
.task-waiting-head,
.task-help-head {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
cursor: pointer;
color: var(--green-deep);
}
.task-help-head { color: var(--coral-deep); }
.task-waiting-head input,
.task-help-head input {
margin-top: 3px;
flex: 0 0 auto;
}
.task-waiting-head b,
.task-help-head b {
display: block;
font-size: 14px;
}
.task-waiting-head small,
.task-help-head small {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.task-waiting-details {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.task-help-details {
display: none;
margin-top: 12px;
}
.task-waiting-box:has(input[name="waitingEnabled"]:checked) .task-waiting-details {
display: grid;
}
.task-help-box:has(input[name="helpNeeded"]:checked) .task-help-details {
display: block;
}
.task-waiting-details .field-wide {
grid-column: 1 / -1;
}
.task-chain-section p {
margin: 5px 0;
color: var(--muted);
}
.task-chain-section p b {
color: var(--green-deep);
}
.task-waiting-section p {
margin: 6px 0 0;
color: var(--ink);
line-height: 1.5;
}
.task-waiting-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.task-waiting-meta span {
display: inline-flex;
align-items: center;
padding: 5px 9px;
border-radius: 999px;
background: var(--sage-soft);
color: var(--green-deep);
font-size: 12px;
font-weight: 700;
}
.task-waiting-inline-form {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--ui-line-soft);
}
.task-waiting-inline-form .task-waiting-box {
margin-top: 10px;
}
.task-follow-list {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 10px;
}
.task-follow-list button {
appearance: none;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper);
color: var(--ink);
text-align: left;
padding: 8px 10px;
font-weight: 700;
cursor: pointer;
}
.task-follow-list button:hover {
border-color: var(--sage-deep);
background: var(--sage-soft);
}
.task-activation-list {
display: grid;
gap: 8px;
}
.task-activation-row {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper);
}
.task-activation-row b,
.task-activation-row small {
display: block;
}
.task-activation-row small {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}
.person-picker {
margin-bottom: 15px;
}
.person-picker-search {
position: relative;
}
.people-picker-chips {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 9px;
width: 100%;
}
.person-picker-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 36px;
width: 100%;
padding: 6px 10px 6px 8px;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 10px;
background: var(--cream-deep);
color: var(--green-deep);
font-size: 13px;
font-weight: 750;
}
.person-picker-chip-main {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
}
.person-picker-ava {
width: 24px;
height: 24px;
flex: 0 0 24px;
background: var(--green);
color: #fff;
font-size: 10px;
}
.person-picker-chip-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*! Modal redesign 20260806-modals4 — jeden čitelný rám, bezpečný fokus a mobilní sheet */
#modal-root.open > .overlay {
background:
radial-gradient(720px 420px at 50% 18%, rgba(255, 253, 248, .13), transparent 72%),
rgba(28, 48, 40, .68);
backdrop-filter: blur(8px) saturate(.82);
-webkit-backdrop-filter: blur(8px) saturate(.82);
}
#modal-root .modal[data-modal-system="2"] {
--modal-accent: var(--amber);
--modal-accent-soft: rgba(217, 154, 68, .13);
outline: none;
border: 1px solid rgba(56, 85, 74, .16);
border-radius: 24px;
background: var(--paper);
box-shadow:
0 2px 3px rgba(26, 43, 36, .08),
0 28px 80px rgba(23, 42, 34, .28);
}
#modal-root .modal[data-modal-surface="form"] {
--modal-accent: var(--coral);
--modal-accent-soft: rgba(224, 122, 95, .13);
width: min(680px, calc(100vw - 36px));
max-width: 680px;
}
#modal-root .modal[data-modal-surface="picker"] {
--modal-accent: var(--green-soft);
--modal-accent-soft: rgba(70, 104, 91, .12);
width: min(720px, calc(100vw - 36px));
max-width: 720px;
}
#modal-root .modal[data-modal-surface="detail"] {
width: min(620px, calc(100vw - 36px));
max-width: 620px;
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]):not(.chat-image-viewer-modal) > .modal-head {
position: relative;
min-height: 72px;
gap: 13px;
padding: 16px 18px 16px 22px;
border-bottom: 1px solid rgba(56, 85, 74, .1);
background:
linear-gradient(90deg, var(--modal-accent-soft), transparent 38%),
rgba(255, 253, 249, .97);
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]):not(.chat-image-viewer-modal) > .modal-head::before {
content: "";
flex: 0 0 auto;
width: 4px;
height: 34px;
border-radius: 999px;
background: var(--modal-accent);
box-shadow: 0 0 0 6px var(--modal-accent-soft);
}
#modal-root .modal[data-modal-system="2"].is-titleless > .modal-head::before {
display: none;
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-head h3 {
min-width: 0;
flex: 1 1 auto;
font-size: clamp(20px, 2vw, 23px);
line-height: 1.18;
letter-spacing: -.025em;
}
#modal-root .modal[data-modal-system="2"] > .modal-head .x {
display: grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 13px;
background: rgba(246, 241, 231, .82);
color: var(--green);
transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
#modal-root .modal[data-modal-system="2"] > .modal-head .x svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2.3;
stroke-linecap: round;
}
#modal-root .modal[data-modal-system="2"] > .modal-head .x:hover {
border-color: rgba(224, 122, 95, .24);
background: rgba(224, 122, 95, .1);
color: var(--coral-deep);
}
#modal-root .modal[data-modal-system="2"] > .modal-head .x:active {
transform: scale(.94);
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-body {
padding: 24px 26px;
background:
linear-gradient(180deg, rgba(246, 241, 231, .18), transparent 84px),
var(--paper);
}
#modal-root .modal[data-modal-surface="form"] > .modal-body > form,
#modal-root .modal[data-modal-surface="form"] > .modal-body .chat-mini-form,
#modal-root .modal[data-modal-surface="form"] > .modal-body .trust-key-form {
display: grid;
gap: 17px;
}
#modal-root .modal[data-modal-surface="form"] .field {
min-width: 0;
margin: 0;
}
#modal-root .modal[data-modal-surface="form"] .field > label,
#modal-root .modal[data-modal-surface="form"] .field > span,
#modal-root .modal[data-modal-surface="form"] label.field > span {
display: block;
margin-bottom: 7px;
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
letter-spacing: .015em;
}
#modal-root .modal[data-modal-surface="form"] input:not([type="checkbox"]):not([type="radio"]),
#modal-root .modal[data-modal-surface="form"] select,
#modal-root .modal[data-modal-surface="form"] textarea,
#modal-root .modal[data-modal-surface="picker"] input[type="search"] {
width: 100%;
min-width: 0;
min-height: 48px;
border: 1px solid rgba(56, 85, 74, .16);
border-radius: 13px;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(43, 66, 58, .04);
}
#modal-root .modal[data-modal-surface="form"] textarea {
min-height: 108px;
resize: vertical;
}
#modal-root .modal[data-modal-surface="form"] input:not([type="checkbox"]):not([type="radio"]):focus-visible,
#modal-root .modal[data-modal-surface="form"] select:focus-visible,
#modal-root .modal[data-modal-surface="form"] textarea:focus-visible,
#modal-root .modal[data-modal-surface="picker"] input[type="search"]:focus-visible {
border-color: var(--modal-accent);
outline: none;
box-shadow: 0 0 0 4px var(--modal-accent-soft);
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-foot,
#modal-root .modal[data-modal-surface="form"] > .modal-body > form > .modal-foot {
gap: 10px;
padding: 15px 26px !important;
border-top: 1px solid rgba(56, 85, 74, .1) !important;
background: rgba(246, 241, 231, .74);
box-shadow: 0 -8px 24px rgba(43, 66, 58, .035);
}
#modal-root .modal[data-modal-surface="form"] > .modal-body > form > .modal-foot {
position: sticky;
bottom: -24px;
z-index: 5;
margin: 5px -26px -24px !important;
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) .modal-foot .btn {
min-width: 112px;
min-height: 44px;
border-radius: 13px;
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) .modal-foot .btn-primary {
min-width: 138px;
box-shadow: 0 7px 18px rgba(201, 104, 79, .18);
}
.confirm-modal-host .confirm-modal-overlay { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(28,48,40,.72); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.confirm-modal-host .confirm-modal { position: relative; width: min(470px,calc(100vw - 36px)); max-width: 470px; margin: 0; overflow: hidden; border: 1px solid rgba(56,85,74,.16); border-radius: 24px; background: var(--paper); box-shadow: 0 30px 90px rgba(23,42,34,.34); }
.confirm-modal-mark { position: absolute; top: 24px; left: 24px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(217,154,68,.14); color: #9b6724; }
.confirm-modal.is-danger .confirm-modal-mark { background: rgba(184,69,48,.11); color: var(--bad); }
.confirm-modal-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.confirm-modal-host .confirm-modal .modal-head { min-height: 0; padding: 25px 26px 7px 88px; border: 0; background: transparent; }
.confirm-modal-host .confirm-modal .modal-head h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.confirm-modal-host .confirm-modal .modal-body { padding: 0 26px 24px 88px; }
.confirm-modal-host .confirm-modal .modal-foot { padding: 15px 26px !important; border-top: 1px solid rgba(56,85,74,.1); background: rgba(246,241,231,.72); }
@media (max-width: 760px) {
#modal-root .modal[data-modal-system="2"] { width: 100%; max-width: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 26px 26px 0 0; }
#modal-root .modal[data-modal-system="2"] > .modal-head { position: relative; z-index: 3; }
#modal-root .modal[data-modal-system="2"][data-modal-surface="workspace"]::before { display: none; }
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]):not(.chat-image-viewer-modal) > .modal-head { min-height: 64px; padding: 11px 14px 12px 17px; }
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-head::before { height: 29px; }
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-head h3 { font-size: 20px; }
#modal-root .modal[data-modal-system="2"] > .modal-head .x { flex-basis: 42px; width: 42px; height: 42px; }
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-body { padding: 18px 16px; }
#modal-root .modal[data-modal-surface="form"] > .modal-body > form > .modal-foot { bottom: -18px; margin: 4px -14px -18px !important; }
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) > .modal-foot,
#modal-root .modal[data-modal-surface="form"] > .modal-body > form > .modal-foot {
padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px)) !important;
}
#modal-root .modal[data-modal-system="2"]:not([data-modal-surface="workspace"]) .modal-foot .btn { flex: 1 1 0; min-width: 0; min-height: 48px; }
.confirm-modal-host .confirm-modal-overlay { align-items: flex-end; padding: 0; }
.confirm-modal-host .confirm-modal { width: 100%; max-width: none; border-radius: 26px 26px 0 0; }
.confirm-modal-mark { top: 22px; left: 18px; width: 44px; height: 44px; }
.confirm-modal-host .confirm-modal .modal-head { padding: 23px 18px 7px 76px !important; }
.confirm-modal-host .confirm-modal .modal-body { padding: 0 18px 22px 76px !important; }
.confirm-modal-host .confirm-modal .modal-foot { padding: 13px 16px calc(13px + env(safe-area-inset-bottom,0px)) !important; }
.confirm-modal-host .confirm-modal .modal-foot .btn { flex: 1 1 0; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
#modal-root .modal[data-modal-system="2"], .confirm-modal-host .confirm-modal { animation: none !important; }
}
.person-picker-chip .remove-chip-btn {
width: 26px;
height: 26px;
flex: 0 0 26px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.person-picker-chip .remove-chip-btn:hover {
background: rgba(224, 122, 95, .14);
color: var(--coral-deep);
}
.autocomplete-suggestions {
left: 0 !important;
right: 0 !important;
}
.person-card {
min-height: 210px;
height: auto;
}
.person-card-bottom {
margin-top: auto !important;
}
.person-card-top,
.person-card-bottom,
.profile-actions,
.project-actions,
.meeting-actions,
.meeting-admin-actions,
.meeting-section-actions {
min-width: 0;
}
.profile-actions {
justify-content: flex-end;
}
.person-contact a {
min-width: 0;
color: var(--green-deep);
overflow-wrap: anywhere;
}
.profile-facts > div,
.person-contact > div {
align-items: baseline;
}
.meeting-topbar,
.pd-backbar {
row-gap: 10px;
}
.meeting-save-row {
margin-top: 16px;
}
.meeting-att-current {
align-items: flex-start;
}
.meeting-att-current .meet-att {
max-width: 100%;
}
.meeting-att-current .meet-att span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comment-form {
align-items: start;
}
.comment-form .btn,
.comment-form .small-btn {
width: auto;
}
.project-actions {
align-items: center;
}
.project-actions .btn,
.project-actions .pd-back {
min-height: 40px;
}
.wl-row {
min-width: 0;
}
.wl-bar-wrap {
min-width: 120px;
}
.task-detail-modal {
max-width: 780px;
}
.task-detail-modal .modal-body {
padding-top: 18px;
}
.task-modal-detail {
display: grid;
gap: 16px;
}
.task-modal-hero {
display: grid;
gap: 9px;
padding-bottom: 2px;
}
.task-modal-hero h2 {
margin: 0;
color: var(--ink);
font-family: var(--display);
font-size: 28px;
line-height: 1.08;
}
.task-modal-hero p {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.task-modal-description {
min-width: 0;
}
.task-modal-description > span {
display: none;
}
.task-modal-description > p {
margin: 0;
}
.task-detail-inline-link {
display: inline;
padding: 0;
border: 0;
background: transparent;
color: var(--green-deep);
font-size: inherit;
font-weight: 750;
line-height: inherit;
text-decoration: underline;
text-decoration-color: rgba(47, 85, 69, .38);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.task-detail-inline-link:hover {
background: transparent;
color: var(--coral-deep);
text-decoration-color: currentColor;
}
.task-doc-list li {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.task-doc-copy {
display: grid;
min-width: 0;
gap: 2px;
color: inherit;
}
.task-doc-copy b {
color: var(--ink);
font-size: 12.5px;
}
.task-doc-copy small {
overflow: hidden;
color: var(--muted);
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-doc-open {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--green-deep);
font-size: 11.5px;
font-weight: 800;
text-decoration: none;
}
.task-doc-open:hover {
color: var(--coral-deep);
text-decoration: underline;
}
.task-modal-status {
justify-self: start;
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .08em;
}
.task-modal-status.open {
background: rgba(224, 122, 95, .14);
color: var(--coral-deep);
}
.task-modal-status.done {
background: rgba(84, 146, 108, .16);
color: var(--green-deep);
}
.task-modal-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.task-modal-meta > div {
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(255, 255, 255, .55);
}
.task-modal-meta span {
display: block;
margin-bottom: 3px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.task-modal-meta b {
display: block;
min-width: 0;
overflow: hidden;
color: var(--ink);
font-size: 13px;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-modal-grid {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 14px;
}
.task-modal-section {
min-width: 0;
padding: 15px;
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 12px;
background: rgba(255, 255, 255, .62);
}
.task-modal-section h3 {
margin: 0 0 10px;
color: var(--ink);
font-family: var(--display);
font-size: 17px;
line-height: 1.15;
}
.task-modal-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.task-modal-section-head h3 {
margin: 0;
}
.task-solution-form,
.task-mini-form {
gap: 10px;
}
.task-solution-form .field,
.task-mini-form .field {
margin-bottom: 0;
}
.task-solution-form textarea {
min-height: 150px;
background: var(--cream);
}
.task-solution-read {
padding: 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
line-height: 1.55;
white-space: pre-wrap;
}
.task-modal-actions {
display: flex;
justify-content: flex-end;
}
.task-modal-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.task-modal-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
gap: 7px;
padding: 5px 9px 5px 5px;
border-radius: 999px;
background: var(--cream-deep);
color: var(--green-deep);
font-size: 12.5px;
font-weight: 750;
}
.task-modal-chip .ava {
width: 22px;
height: 22px;
flex: 0 0 22px;
font-size: 9px;
}
.task-modal-muted {
margin: 0;
}
@media (max-width: 860px) {
.main .btn,
.modal .btn {
min-height: 40px;
}
.modal .form-grid,
.write-form .form-grid,
.modal .frow {
grid-template-columns: minmax(0, 1fr);
}
.head-row,
.head-row.has-icon {
align-items: flex-start;
}
.ava.pd-icon {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 18px;
margin-right: 12px;
}
.head-row > .btn,
.collection-hero > .btn {
width: 100%;
}
.task-filters .seg,
.task-filters .flt {
width: 100%;
max-width: none;
}
.task-filters .seg {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.task-filters .seg-btn {
padding-left: 8px;
padding-right: 8px;
white-space: nowrap;
}
.people-grid {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.task-list .tk {
gap: 10px;
padding: 12px 13px;
}
.meeting-actions,
.meeting-admin-actions,
.meeting-section-actions,
.meeting-save-row,
.profile-actions,
.project-actions {
width: 100%;
}
.meeting-actions .btn,
.meeting-admin-actions .btn,
.meeting-section-actions > *,
.meeting-save-row .btn,
.profile-actions .btn,
.project-actions .btn,
.project-actions .pd-back {
flex: 1 1 150px;
}
.write-form > .modal-foot .btn {
flex: 1 1 150px;
}
.wl-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 12px;
}
.wl-name {
flex: none;
min-width: 0;
}
.wl-bar-wrap {
grid-column: 1 / -1;
min-width: 0;
}
.wl-count {
min-width: 0;
text-align: right;
}
.task-detail-modal {
max-width: min(720px, calc(100vw - 24px));
}
.task-modal-meta,
.task-modal-grid {
grid-template-columns: minmax(0, 1fr);
}
.task-dependency-box {
grid-template-columns: minmax(0, 1fr);
}
}
.meeting-agenda-add-feedback {
flex: 1 0 100%;
min-height: 15px;
color: var(--muted);
font-size: 10px;
font-weight: 750;
line-height: 1.35;
text-align: right;
}
.meeting-agenda-add-feedback:empty { display: none; }
.meeting-agenda-add-feedback.is-saving { color: var(--sage-deep); }
.meeting-agenda-add-feedback.is-error { color: var(--coral-deep); }
.app-update-notice {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 10010;
display: flex;
align-items: center;
gap: 14px;
width: min(390px, calc(100vw - 36px));
padding: 12px 13px 12px 16px;
box-sizing: border-box;
border: 1px solid rgba(47,85,69,.2);
border-radius: 16px;
background: rgba(255,253,248,.98);
box-shadow: 0 18px 50px rgba(34,48,42,.24);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.app-update-notice[hidden] { display: none; }
.app-update-notice > div { flex: 1 1 auto; min-width: 0; }
.app-update-notice b,
.app-update-notice span { display: block; }
.app-update-notice b { color: var(--green-deep); font-size: 13px; }
.app-update-notice span { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.app-update-notice .btn {
flex: 0 0 auto;
width: auto;
max-width: 170px;
margin: 0;
min-height: 40px;
padding: 9px 13px;
white-space: nowrap;
}
@media (max-width: 760px) {
.meeting-agenda-add-feedback { text-align: left; }
.app-update-notice {
right: 10px;
bottom: calc(72px + env(safe-area-inset-bottom,0px));
left: 10px;
width: auto;
gap: 10px;
padding: 11px 11px 11px 13px;
}
.app-update-notice .btn { width: auto; min-height: 44px; }
}
@media (max-width: 430px) {
.app-update-notice { align-items: stretch; flex-direction: column; }
.app-update-notice .btn { width: 100%; }
}
.usability-filter-panel {
display: grid;
gap: 13px;
padding: 14px;
margin-bottom: 18px;
border: 1px solid color-mix(in srgb, var(--line) 82%, var(--green) 18%);
border-radius: 18px;
background: color-mix(in srgb, var(--paper) 94%, var(--sage) 6%);
}
.usability-filter-grid {
display: grid;
grid-template-columns: minmax(210px, 1.45fr) repeat(3, minmax(145px, 1fr));
gap: 10px;
}
.usability-filter-grid label {
display: grid;
gap: 5px;
min-width: 0;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.usability-filter-grid input,
.usability-filter-grid select {
width: 100%;
min-width: 0;
height: 44px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper);
color: var(--ink);
padding: 0 12px;
font: inherit;
font-size: 14px;
font-weight: 500;
}
.usability-filter-grid input:focus,
.usability-filter-grid select:focus {
border-color: color-mix(in srgb, var(--green) 55%, var(--line));
outline: 3px solid color-mix(in srgb, var(--sage) 58%, transparent);
}
.filter-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 32px;
color: var(--muted);
font-size: 13px;
}
.filter-result-row b {
color: var(--ink);
font-size: 15px;
}
.task-route-context {
display: flex;
align-items: center;
gap: 9px;
margin-top: 7px;
color: var(--muted);
font-size: 12px;
}
.task-route-context b { color: var(--ink); }
.task-route-context button {
padding: 0;
border: 0;
background: transparent;
color: var(--green);
font: inherit;
font-weight: 800;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.meet-kind-row {
display: flex;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
}
.people-local-filters .usability-filter-grid {
grid-template-columns: minmax(240px, 2fr) minmax(190px, 1fr);
}
.task-owner-native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.task-owner-picker {
position: relative;
}
.task-owner-picker-menu {
border: 1px solid var(--line);
border-radius: 14px;
background: var(--paper);
box-shadow: 0 7px 18px rgba(32, 54, 42, .05);
}
.task-owner-picker-menu > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 58px;
padding: 10px 12px;
cursor: pointer;
list-style: none;
}
.task-owner-picker-menu > summary::-webkit-details-marker { display: none; }
.task-owner-picker-selected {
display: grid;
gap: 2px;
min-width: 0;
}
.task-owner-picker-selected small {
color: var(--muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.task-owner-picker-selected b,
.task-owner-picker-selected em {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-owner-picker-selected b { color: var(--ink); font-size: 14px; }
.task-owner-picker-selected em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; }
.task-owner-picker-change { color: var(--green); font-size: 12px; font-weight: 800; }
.task-owner-picker-panel {
padding: 0 10px 10px;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.task-owner-picker-search {
display: grid;
gap: 5px;
padding: 10px 2px 8px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
}
.task-owner-picker-search input {
width: 100%;
height: 42px;
border: 1px solid var(--line);
border-radius: 11px;
padding: 0 11px;
background: var(--paper);
}
.task-owner-picker-results {
max-height: 310px;
overflow-y: auto;
overscroll-behavior: contain;
}
.task-owner-picker-group h4 {
margin: 10px 5px 5px;
color: var(--muted);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
}
.task-owner-picker-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 8px 9px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.task-owner-picker-option:hover,
.task-owner-picker-option:focus-visible { background: color-mix(in srgb, var(--sage) 64%, transparent); }
.task-owner-picker-option.is-selected { background: color-mix(in srgb, var(--sage) 82%, var(--paper)); }
.task-owner-picker-option span { display: grid; gap: 2px; min-width: 0; }
.task-owner-picker-option b { font-size: 13px; }
.task-owner-picker-option small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.task-owner-picker-option i { color: var(--green); font-style: normal; opacity: 0; }
.task-owner-picker-option.is-selected i { opacity: 1; }
.task-owner-picker-empty { padding: 16px 8px; color: var(--muted); text-align: center; font-size: 13px; }
.task-owner-picker-error { margin: 6px 2px 0; font-size: 12px; }
.completion-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 18px;
}
.completion-actions .completion-continue { margin-top: 0; }
.completion-undo { min-width: 145px; }
.completion-undo span { opacity: .68; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
.usability-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.usability-filter-panel { padding: 11px; border-radius: 15px; }
.usability-filter-grid,
.people-local-filters .usability-filter-grid { grid-template-columns: minmax(0, 1fr); }
.filter-result-row { align-items: flex-start; }
.filter-result-row .small-btn { flex: 0 0 auto; }
.task-status-seg { width: max-content; min-width: 100%; }
.task-owner-picker-results { max-height: min(42dvh, 300px); }
.task-owner-picker-selected em { white-space: normal; }
.completion-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
.completion-actions .btn { width: 100%; margin: 0; }
}
.mycard .tk,
.mycard .tk[data-open-task] {
border-radius: 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(47, 85, 69, .10) !important;
box-shadow: none !important;
background: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.mycard .tk:hover,
.mycard .tk[data-open-task]:hover {
border-radius: 0 !important;
background: rgba(246, 241, 231, .56) !important;
}
.mycard .tk:last-child,
.mycard .tk[data-open-task]:last-child {
border-bottom: 0 !important;
}
.task-modal-section-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.small-btn.danger,
.meeting-menu-item.danger {
color: var(--coral-deep);
}
.small-btn.danger:hover,
.meeting-menu-item.danger:hover {
background: rgba(224, 122, 95, .10);
color: var(--coral-deep);
}
.danger-settings-section {
border-color: rgba(224, 122, 95, .22) !important;
}
@media (max-width: 760px) {
.board {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
overflow-x: visible !important;
gap: 12px !important;
padding-bottom: 0 !important;
}
.col {
width: auto !important;
flex: initial !important;
min-width: 0 !important;
}
.col-empty {
min-height: 0 !important;
}
.task-modal-section-actions {
width: 100%;
justify-content: flex-start;
}
}
.group-filter,
.pc-tag {
display: none !important;
}
.help-onboarding .help-hero {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,241,231,.66));
}
.help-start-grid span {
min-height: 74px;
}
.help-checklist-card {
border-left: 4px solid var(--coral);
}
.help-checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.help-checklist article {
display: grid;
gap: 7px;
align-content: start;
padding: 14px;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 10px;
background: rgba(255,255,255,.62);
}
.help-checklist b {
color: var(--ink);
font-size: 15px;
}
.help-checklist span {
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}
.help-checklist .small-btn {
justify-self: start;
margin-top: 3px;
}
#modal-root .modal.welcome-modal {
width: min(390px, calc(100vw - 32px));
max-width: 390px;
position: relative;
}
.welcome-modal .modal-head {
position: absolute;
top: 10px;
right: 10px;
padding: 0;
border: 0;
background: none;
z-index: 3;
}
.welcome-modal .modal-head h3 {
display: none;
}
.welcome-modal .modal-body {
padding: 28px 24px 6px;
}
.welcome-onboarding {
display: grid;
gap: 8px;
justify-items: center;
text-align: center;
}
.welcome-mark {
width: 72px;
height: 72px;
border-radius: 24px;
background: var(--coral);
display: grid;
place-items: center;
box-shadow: 0 16px 28px rgba(224, 122, 95, .22);
margin-bottom: 4px;
}
.welcome-mark img {
width: 58px;
height: 58px;
object-fit: contain;
}
.welcome-onboarding h3 {
margin: 0;
font-family: var(--display);
font-size: clamp(26px, 4vw, 33px);
line-height: 1.05;
color: var(--ink);
}
.welcome-lead {
margin: 0;
max-width: 36ch;
color: var(--muted);
line-height: 1.6;
font-size: 14.5px;
}
.welcome-steps {
width: 100%;
display: grid;
gap: 8px;
margin-top: 10px;
text-align: left;
}
.welcome-step {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--cream);
}
.welcome-step-ico {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 11px;
background: rgba(224, 122, 95, .13);
color: var(--coral);
display: grid;
place-items: center;
}
.welcome-step-ico svg {
width: 18px;
height: 18px;
}
.welcome-step-text {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
min-width: 0;
}
.welcome-step-text b {
display: block;
color: var(--ink);
font-size: 14px;
margin-bottom: 1px;
}
.welcome-modal .modal-foot,
.welcome-modal .modal-foot .btn {
width: 100%;
}
.welcome-modal .modal-foot {
flex-direction: column;
gap: 8px;
border-top: 0;
padding-top: 8px;
}
.welcome-modal .modal-foot .btn {
justify-content: center;
}
.welcome-later {
color: var(--muted);
border-color: transparent;
background: transparent;
min-height: 34px;
font-size: 13px;
}
@media (max-width: 760px) {
.help-checklist,
.welcome-onboarding-grid {
grid-template-columns: 1fr;
}
.welcome-mark {
width: 64px;
height: 64px;
border-radius: 20px;
}
.welcome-mark img {
width: 52px;
height: 52px;
}
}
@media (max-width: 560px) {
.modal {
border-radius: 16px;
}
.overlay {
padding: 18px 10px;
}
.modal-head,
.modal-body,
.modal-foot,
.write-form > .modal-foot {
padding-left: 16px !important;
padding-right: 16px !important;
}
.write-form > .modal-foot {
margin-left: -16px !important;
margin-right: -16px !important;
}
.write-form > .modal-foot .btn,
.modal-foot .btn {
flex: 1 1 100%;
width: 100%;
}
.task-modal-hero h2 {
font-size: 23px;
}
.task-modal-section {
padding: 13px;
}
.task-modal-section-head {
align-items: stretch;
flex-direction: column;
}
.task-modal-section-head .btn,
.task-modal-actions .btn {
width: 100%;
}
.people-grid {
grid-template-columns: minmax(0, 1fr);
}
.meeting-agenda-head {
grid-template-columns: minmax(0, 1fr) !important;
}
.meeting-section-actions > *,
.meeting-agenda-select,
.meeting-status-select {
width: 100%;
}
.comment-form {
display: grid !important;
}
.comment-form .btn,
.comment-form .small-btn {
width: 100%;
justify-self: stretch;
}
.person-picker-chip {
align-items: flex-start;
}
.profile-facts > div,
.person-contact > div {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
}
.profile-facts > div span,
.person-contact > div span {
flex: none;
}
}
.resolution-builder {
display: grid;
gap: 12px;
padding: 14px;
margin-bottom: 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream-deep);
}
.resolution-builder-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
color: var(--green-deep);
font-weight: 900;
}
.resolution-builder-head small {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.resolution-votes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: 10px;
align-items: end;
}
.resolution-votes label {
display: grid;
gap: 5px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.resolution-votes input {
width: 100%;
box-sizing: border-box;
}
.resolution-list {
display: grid;
gap: 10px;
}
.resolution-card {
padding: 14px 16px;
border: 1px solid var(--line);
border-left: 5px solid var(--sage-deep);
border-radius: 10px;
background: var(--paper);
}
.resolution-card.approved {
border-left-color: var(--go);
}
.resolution-card.rejected {
border-left-color: var(--coral);
}
.resolution-card-head,
.resolution-vote-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.resolution-number {
color: var(--green-deep);
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.resolution-state {
padding: 4px 10px;
border-radius: 999px;
background: var(--cream-deep);
color: var(--green-deep);
font-size: 12px;
font-weight: 900;
}
.resolution-card.rejected .resolution-state {
color: var(--coral-deep);
}
.resolution-text {
margin: 10px 0 12px;
color: var(--ink);
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.resolution-vote-row {
justify-content: flex-start;
padding-top: 10px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.resolution-vote-row span {
display: inline-flex;
gap: 5px;
align-items: baseline;
}
.resolution-vote-row b {
color: var(--ink);
font-size: 17px;
}
@media (max-width: 760px) {
.resolution-votes {
grid-template-columns: 1fr;
}
}
.resolution-context {
margin: -2px 0 12px;
padding: 10px 12px;
border-radius: 8px;
background: var(--cream-deep);
color: var(--muted);
font-size: 14px;
line-height: 1.45;
}
.modal .write-form,
.modal .form-grid,
.modal .frow,
.modal .field,
.modal .dyn-row,
.modal .modal-body {
min-width: 0;
max-width: 100%;
}
.modal input,
.modal textarea,
.modal select,
.modal button {
max-width: 100%;
box-sizing: border-box;
}
.modal textarea {
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.modal .form-grid,
.modal .frow,
.write-form .form-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.modal input,
.modal textarea,
.modal select {
width: 100% !important;
min-width: 0 !important;
}
}
.notification-foot-btn {
position: relative;
}
#notifications-root { position: absolute; z-index: 4; top: calc(100% + 8px); right: 0; width: min(440px, calc(100vw - 28px)); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.985); transform-origin: top right; transition: transform .16s ease, opacity .14s ease, visibility 0s linear .16s; }
#notifications-root.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
.workspace-popover { overflow: hidden; border: 1px solid rgba(47,85,69,.15); border-radius: 15px; background: rgba(255,253,249,.9); box-shadow: 0 18px 44px rgba(34,48,42,.18); backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); }
.workspace-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px 11px 15px; border-bottom: 1px solid rgba(47,85,69,.1); }
.workspace-popover-head > div { min-width: 0; }
.workspace-popover-head b, .workspace-popover-head span { display: block; }
.workspace-popover-head b { font-family: var(--display); font-size: 15px; }
.workspace-popover-head span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.workspace-popover-head > button { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 19px/1 var(--font-sans); cursor: pointer; }
.workspace-popover-head > button:hover { background: rgba(248,242,229,.82); color: var(--ink); }
.workspace-popover-body { max-height: min(62vh, 540px); overflow-y: auto; padding: 10px; }
.notification-group-label {
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.notification-list {
display: grid;
gap: 8px;
}
.notification-item {
width: 100%;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255,255,255,.62);
color: var(--ink);
text-align: left;
cursor: pointer;
}
.notification-item:hover {
border-color: var(--coral);
background: rgba(255,255,255,.9);
}
.notification-item.unread {
background: rgba(248,242,229,.82);
border-color: rgba(230, 115, 91, .35);
}
.notification-ico {
width: 36px;
height: 36px;
border-radius: 11px;
background: var(--cream);
border: 1px solid var(--line);
color: var(--muted);
display: grid;
place-items: center;
}
.notification-ico svg {
width: 17px;
height: 17px;
}
.notification-item.unread .notification-ico {
background: rgba(224, 122, 95, .14);
border-color: rgba(224, 122, 95, .25);
color: var(--coral);
}
.notification-main {
min-width: 0;
display: grid;
gap: 2px;
}
.notification-main b {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13.5px;
}
.notification-main small {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notification-main small,
.notification-item time {
color: var(--muted);
font-size: 12px;
}
.notification-item time {
align-self: start;
margin-top: 2px;
white-space: nowrap;
}
.notification-history {
margin-top: 14px;
}
.notification-history summary {
cursor: pointer;
color: var(--muted);
font-size: 12.5px;
font-weight: 700;
padding: 4px 2px 10px;
user-select: none;
}
.notification-history summary:hover {
color: var(--ink);
}
.notification-history .notification-item {
opacity: .85;
}
.notification-empty {
display: grid;
justify-items: center;
gap: 4px;
text-align: center;
padding: 26px 10px;
color: var(--muted);
}
.notification-empty svg {
width: 26px;
height: 26px;
opacity: .5;
margin-bottom: 4px;
}
.notification-empty b {
color: var(--ink);
}
.notification-empty span {
font-size: 12.5px;
}
.notification-empty.compact {
padding: 12px 10px 16px;
}
@media (max-width: 560px) {
.notification-item {
grid-template-columns: 32px minmax(0, 1fr) auto;
}
.notification-ico {
width: 32px;
height: 32px;
}
}
.settings-section {
display: block;
}
.settings-section-title {
font-weight: 700;
font-size: 14px;
margin-bottom: 4px;
}
.settings-row {
gap: 12px;
justify-content: space-between;
padding: 10px 0;
border-top: 1px solid var(--line, rgba(0,0,0,.08));
}
.settings-row:first-of-type {
border-top: none;
}
.settings-row-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
}
.settings-row-text small {
color: var(--muted, #777);
white-space: normal;
}
.modal .settings-toggle,
.settings-toggle {
flex: 0 0 auto;
width: 20px !important;
min-width: 20px !important;
height: 20px;
accent-color: var(--coral);
}
.settings-status {
min-height: 18px;
margin-top: 12px;
font-size: 13px;
}
.settings-status.ok {
color: var(--good, #2e7d32);
}
.settings-status.bad {
color: var(--bad, #c62828);
}
.messenger-page {
display: grid;
grid-template-columns: minmax(300px, 380px) 1fr;
height: calc(100vh - 60px);
max-height: calc(100vh - 60px);
margin: -8px -4px 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
}
.messenger-sidebar-panel {
min-width: 0;
border-right: 1px solid var(--line);
background: #fff;
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto;
}
.messenger-page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 18px 12px;
}
.messenger-page-head h1 {
margin: 2px 0 0;
font-family: var(--display);
font-size: 26px;
line-height: 1.05;
color: var(--ink);
}
.messenger-unread-total {
min-width: 28px;
height: 28px;
padding: 0 8px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--coral);
color: #fff;
font-size: 12px;
font-weight: 900;
}
.messenger-compose {
margin: 0 14px 12px;
padding: 10px;
background: var(--cream);
border-radius: 10px;
}
.messenger-compose label {
display: block;
margin: 0 0 6px;
color: var(--green-deep);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
}
.messenger-compose-row {
display: flex;
align-items: center;
gap: 8px;
}
.messenger-compose select {
flex: 1;
min-width: 0;
height: 38px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--ink);
padding: 0 10px;
font: inherit;
font-size: 13px;
}
.messenger-compose-btn {
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
font-size: 22px;
font-weight: 800;
line-height: 1;
cursor: pointer;
}
.messenger-compose-btn:hover { background: var(--coral-deep); }
.messenger-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 4px 8px 12px;
}
.messenger-row {
width: 100%;
min-height: 68px;
display: flex;
align-items: center;
gap: 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ink);
text-align: left;
padding: 8px 10px;
cursor: pointer;
}
.messenger-row:hover { background: var(--cream); }
.messenger-row.unread { background: rgba(226, 119, 91, .08); }
.messenger-row-ava {
flex: 0 0 42px;
background: var(--sage-soft);
color: var(--green-deep);
font-size: 13px;
}
.messenger-row-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.messenger-row-main > span {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.messenger-row-main b {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.messenger-row-main em {
flex: 0 0 auto;
color: var(--muted);
font-size: 10.5px;
font-style: normal;
}
.messenger-row-main small {
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12.5px;
}
.messenger-row.unread .messenger-row-main b,
.messenger-row.unread .messenger-row-main small { color: var(--ink); font-weight: 800; }
.messenger-row i {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--coral);
color: #fff;
font-style: normal;
font-size: 10px;
font-weight: 900;
}
.messenger-empty-list {
color: var(--muted);
font-size: 13px;
text-align: center;
padding: 28px 16px;
}
.messenger-empty-pane {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px;
background: linear-gradient(180deg, rgba(250,246,236,.55), rgba(255,255,255,.92));
text-align: center;
}
.messenger-empty-icon {
width: 68px;
height: 68px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--coral);
color: #fff;
box-shadow: 0 14px 30px rgba(226, 119, 91, .24);
}
.messenger-empty-icon svg { width: 30px; height: 30px; }
.messenger-empty-pane h2 { margin: 0; font-family: var(--display); font-size: 24px; color: var(--ink); }
.messenger-empty-pane p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.5; }
.chat-detail-panel { padding-top: 0; }
.chat-messenger-detail {
height: min(780px, calc(100vh - 120px));
min-height: 560px;
border-radius: 10px;
box-shadow: 0 12px 34px rgba(34, 48, 42, .08);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-messenger-detail .chat-detail-head {
flex: 0 0 auto;
min-height: 74px;
padding: 12px 18px;
background: #fff;
}
.chat-head-ava {
width: 42px;
height: 42px;
flex: 0 0 42px;
background: var(--sage-soft);
color: var(--green-deep);
}
.chat-messenger-detail .pd-back {
height: 38px;
padding: 0 14px;
border-radius: 10px;
}
.chat-messenger-detail .chat-messages-thread {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 22px 28px;
background: #fbfaf6;
gap: 4px;
}
.chat-messenger-detail .chat-msg-row {
width: fit-content;
max-width: min(72%, 640px);
}
.chat-messenger-detail .chat-msg-body-wrap {
width: auto;
max-width: 100%;
align-items: flex-end;
}
.chat-messenger-detail .chat-msg-bubble-container { max-width: 100%; min-width: 0; }
.chat-messenger-detail .chat-msg-bubble { max-width: 100%; }
.chat-messenger-detail .chat-msg-time {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 10.5px;
white-space: nowrap;
}
.chat-messenger-detail .chat-msg-row.me .chat-msg-time { text-align: right; }
.chat-messenger-detail .chat-footer-input { flex: 0 0 auto; background: #fff; padding: 14px 18px; }
.chat-messenger-detail .chat-comment-form textarea { min-height: 42px; border-radius: 999px; }
.chat-messenger-detail .chat-submit-btn { height: 42px; border-radius: 999px; padding: 0 22px; }
@media (max-width: 900px) {
.messenger-page { grid-template-columns: 1fr; height: auto !important; min-height: auto; }
.messenger-sidebar-panel { border-right: 0; }
.messenger-empty-pane { display: none; }
.chat-messenger-detail { height: calc(100vh - 120px); min-height: 520px; }
.chat-messenger-detail .chat-messages-thread { padding: 16px 12px; }
.chat-messenger-detail .chat-msg-row { max-width: 86%; }
.chat-messenger-detail .chat-detail-head { padding: 10px 12px; gap: 10px; }
}
.messenger-row-ava.project-ava {
background: var(--coral-deep) !important;
color: #fff !important;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.messenger-row.project .messenger-row-ava {
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.messenger-page {
box-shadow: 0 4px 12px rgba(34, 48, 42, 0.03) !important;
}
.messenger-empty-pane.active-chat {
display: flex;
flex-direction: column;
padding: 0 !important;
background: #fff;
align-items: stretch !important;
justify-content: stretch !important;
text-align: left !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
.messenger-empty-pane.active-chat .chat-messenger-detail {
height: 100% !important;
min-height: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
display: flex;
flex-direction: column;
overflow: hidden !important;
}
.messenger-empty-pane.active-chat .chat-messages-thread {
flex: 1 !important;
overflow-y: auto !important;
min-height: 0 !important;
}
.messenger-empty-pane.active-chat .pd-back {
display: none !important;
}
.messenger-pane-loading,
.messenger-pane-error {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--muted);
font-size: 14px;
padding: 24px;
}
.chat-date-separator {
display: flex;
align-items: center;
justify-content: center;
margin: 16px 0;
position: relative;
width: 100%;
}
.chat-date-separator::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: var(--line, #e2ded5);
z-index: 1;
}
.chat-date-separator span {
position: relative;
z-index: 2;
background: #faf9f6;
padding: 4px 12px;
font-size: 11px;
font-weight: 600;
color: var(--muted, #8a8880);
border-radius: 99px;
border: 1px solid var(--line, #e2ded5);
}
.chat-msg-ava {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
border-radius: 50%;
}
.push-settings-section { margin-top: 18px; }
.push-settings-row { align-items: center; gap: 12px; }
.push-settings-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.push-settings-actions .small-btn { min-height: 34px; }
@media (max-width: 620px) {
.push-settings-row { align-items: flex-start; }
.push-settings-actions { width: 100%; justify-content: stretch; }
.push-settings-actions .small-btn { flex: 1; }
}
.project-full-section {
margin-top: 16px;
}
.drive-card .pd-drive { min-height: 34px; }
.drive-card {
overflow: hidden;
}
.drive-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
.drive-card-head .panel-note,
.project-docs-head .panel-note {
margin: 4px 0 0;
}
.drive-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0;
justify-content: flex-end;
flex: 0 0 auto;
}
.drive-files-region {
border-top: 1px solid var(--line);
padding-top: 12px;
margin-top: 14px;
}
.drive-file-list,
.project-doc-list {
display: grid;
gap: 8px;
}
.drive-file-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
gap: 14px;
align-items: center;
padding: 11px 0;
border-top: 1px solid rgba(214, 207, 190, .72);
}
.drive-file-row:first-child { border-top: 0; }
.drive-file-main {
display: flex;
gap: 10px;
min-width: 0;
align-items: center;
}
.drive-file-icon {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--cream-deep);
color: var(--green-deep);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.drive-file-icon svg {
width: 19px;
height: 19px;
}
.drive-file-text {
min-width: 0;
display: grid;
gap: 2px;
}
.drive-file-text a {
color: var(--ink);
font-weight: 750;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drive-file-text a:hover { color: var(--coral-deep); }
.drive-file-text span {
color: var(--muted);
font-size: 12px;
}
.drive-file-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.drive-file-actions .small-btn {
min-height: 32px;
}
.drive-pinned-state {
background: var(--sage-soft);
color: var(--green-deep);
border-color: transparent;
cursor: default;
}
.project-docs-inline {
border-top: 1px solid var(--line);
margin-top: 14px;
padding-top: 12px;
}
.project-docs-head {
margin-bottom: 10px;
}
.project-doc-list {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.project-doc-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 9px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
text-decoration: none;
}
.project-doc-row span {
width: 20px;
height: 20px;
color: var(--green-deep);
flex: 0 0 auto;
}
.project-doc-row b {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
@media (max-width: 720px) {
.drive-file-row { grid-template-columns: 1fr; align-items: stretch; }
.drive-file-actions { justify-content: stretch; }
.drive-file-actions .small-btn { flex: 1 1 45%; text-align: center; justify-content: center; }
}
.project-detail {
max-width: 1180px;
}
.project-backbar {
margin-bottom: 14px;
}
.project-hero-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: start;
padding: 22px;
border: 1px solid var(--line);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,247,238,.72));
box-shadow: 0 12px 30px rgba(34,48,42,.07);
}
.project-hero-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 16px;
min-width: 0;
align-items: start;
}
.project-hero-avatar {
width: 74px !important;
height: 74px !important;
flex: 0 0 74px !important;
border-radius: 20px !important;
background: var(--coral-deep) !important;
color: #fff !important;
box-shadow: 0 9px 22px rgba(225, 116, 88, .22);
font-size: 19px !important;
}
.project-hero-avatar svg {
width: 62% !important;
height: 62% !important;
}
.project-hero-copy {
min-width: 0;
}
.project-hero-pills,
.project-hero-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.project-hero-pills {
margin-bottom: 8px;
}
.project-hero-title {
font-family: var(--display);
font-size: clamp(28px, 4vw, 44px);
line-height: 1.02;
margin: 0;
color: var(--ink);
letter-spacing: 0;
}
.project-hero-title span {
color: var(--muted);
font-weight: 700;
}
.project-hero-desc {
margin: 10px 0 14px;
max-width: 78ch;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
white-space: pre-wrap;
}
.project-hero-actions {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 150px;
}
.project-hero-actions .btn {
justify-content: center;
min-height: 38px;
white-space: nowrap;
}
.project-hero-actions .btn svg {
width: 16px;
height: 16px;
}
.project-hero-actions .badge {
background: rgba(255,255,255,.25);
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
}
.project-hero-actions .muted-action {
color: var(--muted);
}
.project-glance {
display: grid;
grid-template-columns: 1.35fr 1fr .85fr .85fr;
margin: 14px 0;
}
.project-glance .focus-tile {
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 6px 18px rgba(34,48,42,.045);
}
.project-glance .focus-label {
margin-bottom: 5px;
}
.project-glance .focus-value {
font-size: 14px;
line-height: 1.35;
}
.focus-sub {
margin-top: 3px;
font-size: 12px;
color: var(--muted);
}
.focus-sub.bad {
color: var(--coral-deep);
font-weight: 700;
}
.project-tabs.project-tabs-refined {
display: flex;
margin: 16px 0 0;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(239, 232, 216, .64);
}
.project-tabs-refined .project-tab {
flex: 1 1 0;
min-width: max-content;
border-radius: 10px;
padding: 10px 13px;
color: var(--green-deep);
font-weight: 750;
}
.project-tabs-refined .project-tab.active {
color: var(--ink);
box-shadow: 0 4px 12px rgba(34,48,42,.08);
}
.modal.schedule-modal { max-width: 860px; }
.schedule-edit-form { min-width: 0; }
.schedule-editor-intro {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
align-items: center;
margin-bottom: 15px;
padding: 14px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 14px;
background: linear-gradient(135deg, rgba(235,240,232,.78), rgba(255,255,255,.66));
}
.schedule-editor-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--paper); color: var(--coral-deep); font-size: 23px; box-shadow: 0 5px 14px rgba(34,48,42,.07); }
.schedule-editor-intro > div > span { color: var(--green-deep); font-size: 10px; font-weight: 850; letter-spacing: .7px; text-transform: uppercase; }
.schedule-editor-intro h4 { margin: 2px 0; font-family: var(--display); font-size: 19px; }
.schedule-editor-intro p { margin: 0; color: var(--muted); font-size: 12px; }
.schedule-editor-guide { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 2px 9px; }
.schedule-editor-guide b { font-size: 13px; }
.schedule-editor-guide span { color: var(--muted); font-size: 11.5px; text-align: right; }
.schedule-edit-row { margin: 0 0 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.64); transition: border-color .15s ease, box-shadow .15s ease; }
.schedule-edit-row[open] { border-color: rgba(47,85,69,.28); box-shadow: 0 8px 24px rgba(34,48,42,.07); }
.schedule-edit-summary { min-width: 0; display: grid; grid-template-columns: 94px minmax(0, 1fr) minmax(120px, auto) 18px; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.schedule-edit-summary::-webkit-details-marker { display: none; }
.schedule-summary-time { color: var(--coral-deep); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.schedule-summary-copy { min-width: 0; display: grid; gap: 2px; }
.schedule-summary-copy b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-summary-copy small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-summary-lead { overflow: hidden; color: var(--green-deep); font-size: 11px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.schedule-summary-chevron { color: var(--muted); font-size: 18px; transform: rotate(0); transition: transform .15s ease; }
.schedule-edit-row[open] .schedule-summary-chevron { transform: rotate(180deg); }
.schedule-edit-body { padding: 15px 15px 13px; border-top: 1px solid var(--line); background: var(--cream-deep); }
.schedule-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.schedule-edit-grid-time { grid-template-columns: 1.5fr 1fr 1fr; }
.schedule-edit-body > label,
.schedule-edit-grid > label,
.schedule-responsibility-grid > label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; color: var(--ink); font-size: 12px; font-weight: 700; }
.schedule-edit-row input,
.schedule-edit-row select,
.schedule-edit-row textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.schedule-edit-row textarea { min-height: 62px; resize: vertical; }
.schedule-responsibility-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); gap: 12px; align-items: center; }
.schedule-responsibility-grid > p { margin: 0 0 10px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.schedule-participant-field { min-width: 0; margin: 1px 0 12px; padding: 12px; border: 1px solid rgba(47,85,69,.14); border-radius: 11px; background: rgba(255,255,255,.42); }
.schedule-participant-field legend { padding: 0 5px; font-size: 12px; font-weight: 800; }
.schedule-participant-field > p { margin: -1px 0 9px; color: var(--muted); font-size: 11px; }
.schedule-picker-label { margin-bottom: 6px; color: var(--green-deep); font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.schedule-person-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.schedule-person-choice { position: relative; min-width: 0; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 19px; gap: 8px !important; align-items: center; margin: 0 !important; padding: 7px 8px; border: 1px solid rgba(47,85,69,.13); border-radius: 10px; background: var(--paper); cursor: pointer; }
.schedule-person-choice:hover { border-color: var(--sage-deep); }
.schedule-person-choice input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.schedule-choice-avatar { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; font-size: 10px !important; }
.schedule-person-choice > span { min-width: 0; display: grid; gap: 1px; }
.schedule-person-choice b { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-person-choice small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-person-choice > i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 11px; font-style: normal; }
.schedule-person-choice:has(input:checked) { border-color: rgba(47,85,69,.38); background: var(--sage-soft); }
.schedule-person-choice:has(input:checked) > i { border-color: var(--green-deep); background: var(--green-deep); color: #fff; }
.schedule-more-people { margin-top: 9px; }
.schedule-more-people > summary { color: var(--green-deep); font-size: 11px; font-weight: 750; cursor: pointer; }
.schedule-more-people[open] > summary { margin-bottom: 8px; }
.schedule-more-people .schedule-person-choices { max-height: 220px; overflow-y: auto; padding-right: 3px; }
.schedule-row-actions { display: flex; justify-content: flex-end; padding-top: 3px; }
.schedule-remove { color: var(--coral-deep) !important; font-size: 11px !important; }
.schedule-add-row { width: 100% !important; margin-top: 4px; justify-content: center !important; border-style: dashed !important; }
.modal.event-plan-modal, .modal.event-template-modal { max-width: 860px; }
.event-plan-form { display: grid; gap: 12px; }
.event-plan-form .project-modal-section { margin: 0; }
.event-plan-form label { display: grid; gap: 5px; color: var(--ink); font-size: 11.5px; font-weight: 750; }
.event-plan-form input, .event-plan-form select, .event-plan-form textarea { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.event-plan-form textarea { min-height: 84px; resize: vertical; }
.event-plan-phase { max-width: 360px; }
.event-plan-row { display: grid; grid-template-columns: 1fr 1.25fr auto; gap: 8px; align-items: end; margin-bottom: 7px; padding: 9px; border: 1px solid rgba(47,85,69,.11); border-radius: 11px; background: rgba(255,255,255,.5); }
.event-plan-row .small-btn { margin-bottom: 1px; }
.event-contact-edit { margin-bottom: 7px; overflow: hidden; border: 1px solid rgba(47,85,69,.12); border-radius: 11px; background: rgba(255,255,255,.52); }
.event-contact-edit > summary { display: flex; justify-content: space-between; gap: 10px; padding: 10px 11px; cursor: pointer; }
.event-contact-edit > summary b { font-size: 12px; }
.event-contact-edit > summary span { color: var(--muted); font-size: 10.5px; }
.event-contact-edit > div { padding: 11px; border-top: 1px solid rgba(47,85,69,.1); }
.event-plan-add { width: 100%; justify-content: center; border-style: dashed !important; }
.event-plan-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(235,240,232,.58); }
.event-plan-steps button { min-width: 0; min-height: 42px; display: flex; gap: 7px; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.event-plan-steps span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.65); font-size: 9px; font-weight: 850; }
.event-plan-steps b { font-size: 10.5px; }
.event-plan-steps button.active { background: var(--paper); color: var(--green-deep); box-shadow: 0 4px 12px rgba(34,48,42,.07); }
.event-plan-steps button.active span { background: var(--coral); color: #fff; }
.event-plan-panel { display: grid; gap: 12px; }
.event-plan-panel[hidden] { display: none !important; }
.event-workstream-grid { display: grid; gap: 6px; }
.event-workstream-edit { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(150px, .8fr) minmax(190px, 1.2fr); gap: 8px; align-items: end; padding: 8px 9px; border: 1px solid rgba(47,85,69,.1); border-radius: 10px; background: rgba(255,255,255,.48); }
.event-workstream-edit > b { align-self: center; font-size: 11.5px; }
.event-workstream-edit label { font-size: 9.5px; }
.event-workstream-edit select { padding: 8px 9px; font-size: 12px; }
.event-plan-foot { justify-content: space-between; }
.event-plan-foot > div { display: flex; gap: 7px; }
.event-plan-foot [hidden] { display: none !important; }
@media (max-width: 720px) {
.schedule-edit-form { min-width: 0; }
.schedule-editor-guide { align-items: flex-start; flex-direction: column; gap: 3px; }
.schedule-editor-guide span { text-align: left; }
.schedule-edit-summary { grid-template-columns: 76px minmax(0, 1fr) 16px; gap: 8px; padding: 11px; }
.schedule-summary-lead { grid-column: 2; text-align: left; }
.schedule-summary-chevron { grid-column: 3; grid-row: 1 / span 2; }
.schedule-edit-grid,
.schedule-edit-grid-time { grid-template-columns: 1fr; gap: 0; }
.schedule-responsibility-grid { grid-template-columns: 1fr; gap: 0; }
.schedule-person-choices { grid-template-columns: 1fr; }
.event-plan-row { grid-template-columns: 1fr; }
.event-plan-row .small-btn { min-height: 44px; }
.event-contact-edit > summary { min-height: 44px; box-sizing: border-box; align-items: center; }
.event-plan-steps button { min-height: 44px; }
.event-plan-steps span { display: none; }
.event-workstream-edit { grid-template-columns: 1fr; gap: 4px; }
.event-workstream-edit > b { padding: 2px 1px; }
.event-plan-foot { align-items: stretch; flex-direction: column-reverse; }
.event-plan-foot > div { display: flex; width: 100%; }
.event-plan-foot > div > button { flex: 1 1 0; justify-content: center; }
}
@media print {
body.event-print-mode .sidebar,
body.event-print-mode .view-head,
body.event-print-mode .project-detail-hero,
body.event-print-mode .project-tabs,
body.event-print-mode .project-section-head,
body.event-print-mode .event-lead-actions,
body.event-print-mode .event-program-controls,
body.event-print-mode .event-daytabs,
body.event-print-mode .event-block-head button,
body.event-print-mode .emoment-live,
body.event-print-mode .event-before,
body.event-print-mode .event-onhand,
body.event-print-mode .chat-fab { display: none !important; }
body.event-print-mode .app-shell,
body.event-print-mode .main,
body.event-print-mode .collection-view,
body.event-print-mode .collection-panel { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
body.event-print-mode .emoment { break-inside: avoid; box-shadow: none; }
}
.project-section {
margin-top: 14px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.project-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin: 0 0 12px;
}
.project-section-head h2 {
margin: 0;
font-family: var(--display);
font-size: 24px;
line-height: 1.1;
color: var(--ink);
}
.project-section-head p {
margin: 5px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.45;
}
.project-main-grid {
gap: 14px;
}
.project-resource-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
gap: 14px;
align-items: start;
}
.project-resource-main,
.project-resource-side,
.project-chat-section {
min-width: 0;
}
.project-resource-side {
display: grid;
gap: 14px;
}
.project-primary,
.project-secondary {
gap: 14px;
}
.project-primary > .card,
.project-secondary > .card,
.project-resource-main > .card,
.project-resource-side > .card,
.project-two-col > .card,
.drive-card {
border-radius: 14px;
box-shadow: 0 6px 18px rgba(34,48,42,.045);
}
.drive-card {
padding: 18px !important;
}
.project-chat-section {
margin-top: 14px;
}
.finance-page {
max-width: 1180px;
}
.finance-hero-card .project-hero-actions {
min-width: 180px;
}
.finance-glance .focus-tile {
min-height: 86px;
}
.bad-value {
color: var(--coral-deep);
}
.finance-progress {
height: 7px;
margin-top: 9px;
background: var(--cream-deep);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.finance-progress > div {
height: 100%;
border-radius: 999px;
transition: width .25s ease, background .25s ease;
}
.finance-editions {
margin-bottom: 14px;
background: var(--cream-deep);
border: 1px solid var(--line);
}
.finance-seed-card {
margin-bottom: 14px;
background: var(--cream-deep);
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.finance-mode-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 14px 0;
}
.finance-mode-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"num title"
"num note";
column-gap: 12px;
row-gap: 2px;
align-items: center;
min-width: 0;
padding: 15px 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255,255,255,.64);
color: var(--ink);
text-align: left;
cursor: pointer;
box-shadow: 0 6px 18px rgba(34,48,42,.045);
}
.finance-mode-card span {
grid-area: num;
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 12px;
background: var(--cream-deep);
color: var(--green-deep);
font-weight: 850;
}
.finance-mode-card b {
grid-area: title;
min-width: 0;
font-size: 16px;
line-height: 1.18;
}
.finance-mode-card small {
grid-area: note;
min-width: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.finance-mode-card.active {
border-color: rgba(225,116,88,.34);
background: var(--paper);
box-shadow: 0 12px 30px rgba(34,48,42,.075);
}
.finance-mode-card.active span {
background: var(--coral);
color: #fff;
}
.finance-active-card {
margin-top: 0;
}
.finance-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.finance-work-card {
border-radius: 16px;
border: 1px solid var(--line);
box-shadow: 0 10px 28px rgba(34,48,42,.06);
padding: 0 !important;
}
.finance-plan-card {
border-top: 4px solid var(--sage-deep);
}
.finance-actual-card {
border-top: 4px solid var(--coral);
}
.finance-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 18px 18px 14px;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,247,238,.72));
border-bottom: 1px solid var(--line);
}
.finance-card-head .btn {
flex: 0 0 auto;
}
.finance-card-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 7px;
color: var(--coral-deep);
font-size: 11px;
font-weight: 850;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.finance-card-kicker span {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
background: var(--coral);
color: #fff;
letter-spacing: 0;
font-size: 12px;
box-shadow: 0 6px 14px rgba(225,116,88,.22);
}
.finance-plan-card .finance-card-kicker {
color: var(--green-deep);
}
.finance-plan-card .finance-card-kicker span {
background: var(--green-deep);
box-shadow: 0 6px 14px rgba(47,91,73,.18);
}
.finance-card-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 14px 18px;
background: rgba(239,232,216,.34);
border-bottom: 1px solid var(--line);
}
.finance-card-summary > div {
min-width: 0;
padding: 10px 11px;
border: 1px solid rgba(214,207,190,.78);
border-radius: 12px;
background: rgba(255,255,255,.7);
}
.finance-card-summary span {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .55px;
text-transform: uppercase;
}
.finance-card-summary b {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--ink);
font-size: 16px;
}
.finance-card-body {
padding: 2px 18px 18px;
}
.finance-group {
border: 1px solid rgba(214, 207, 190, .72);
border-radius: 13px;
padding: 10px 12px 12px;
margin-top: 14px;
background: rgba(255,255,255,.55);
}
.finance-empty-line {
font-size: 12.5px;
color: var(--muted);
padding: 6px 0;
}
.kf-item {
border-top: 1px solid var(--line);
padding: 4px 0 6px;
}
.kf-item:first-of-type {
border-top: 0;
}
.kf-item .kf-row {
border-top: 0;
}
.kf-meta {
margin: -2px 40px 6px 10px;
font-size: 12px;
line-height: 1.45;
}
.kf-meta a {
color: var(--green-deep);
font-weight: 750;
text-decoration: none;
}
.kf-meta a:hover {
color: var(--coral-deep);
}
.kf-priority {
color: var(--coral-deep);
}
.kf-paid {
color: var(--go);
}
.finance-paid-btn {
border-color: rgba(84, 143, 104, .32);
background: rgba(84, 143, 104, .12);
color: var(--green-deep);
}
.finance-paid-btn:hover {
border-color: rgba(224, 122, 95, .42);
background: rgba(224, 122, 95, .14);
color: var(--coral-deep);
}
.finance-expense-item {
padding: 8px 0;
}
.finance-expense-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 12px;
padding: 10px 0;
}
.finance-expense-main {
min-width: 0;
}
.finance-expense-main > b {
display: block;
color: var(--ink);
font-size: 15px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
}
.finance-expense-main .kf-meta {
margin: 4px 0 0;
}
.finance-expense-amount {
color: var(--coral-deep);
font-weight: 850;
white-space: nowrap;
font-size: 15px;
}
.finance-expense-actions {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
.finance-expense-actions .small-btn {
min-height: 32px;
}
.kf-sub {
display: flex;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.finance-expense-note {
display: grid;
gap: 4px;
padding: 12px 14px;
margin-bottom: 14px;
border: 1px solid rgba(225, 116, 88, .25);
border-radius: 12px;
background: rgba(225, 116, 88, .08);
color: var(--ink);
}
.finance-expense-note span {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.finance-expense-form input,
.finance-expense-form select {
max-width: 100%;
}
.finance-expense-options {
display: grid;
gap: 10px;
margin: 12px 0 16px;
}
.finance-option-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--ui-line);
border-radius: 12px;
background: rgba(255, 253, 248, .88);
line-height: 1.35;
}
.finance-option-check input {
width: 18px !important;
min-width: 18px !important;
max-width: 18px;
height: 18px;
margin: 2px 0 0;
flex: 0 0 18px;
}
.finance-option-check span {
display: grid;
gap: 2px;
min-width: 0;
}
.finance-option-check b {
font-size: 14px;
color: var(--ink);
}
.finance-option-check small {
font-size: 12.5px;
color: var(--muted);
line-height: 1.35;
}
.finance-priority-check {
margin-top: 10px;
}
.finance-expense-status {
min-height: 20px;
margin-top: 10px;
font-size: 13px;
}
.inline-modal-foot {
margin: 16px -24px -22px;
padding: 16px 24px;
border-top: 1px solid var(--line);
display: flex;
justify-content: flex-end;
gap: 10px;
}
@media (max-width: 980px) {
.project-hero-card {
grid-template-columns: 1fr;
}
.project-hero-actions {
flex-direction: row;
flex-wrap: wrap;
}
.project-hero-actions .btn {
flex: 1 1 auto;
}
.project-glance {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-resource-grid {
grid-template-columns: 1fr;
}
.drive-card-head {
flex-direction: column;
}
.drive-actions {
width: 100%;
justify-content: flex-start;
}
.finance-split {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.project-hero-card {
padding: 16px;
border-radius: 16px;
}
.project-hero-main {
grid-template-columns: 1fr;
gap: 12px;
}
.project-hero-avatar {
width: 60px !important;
height: 60px !important;
flex-basis: 60px !important;
}
.project-hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.project-hero-actions .btn-primary {
grid-column: 1 / -1;
}
.project-glance {
grid-template-columns: 1fr;
}
.project-tabs-refined .project-tab {
flex: 0 0 auto;
}
.project-section-head {
align-items: flex-start;
}
.drive-actions > * {
flex: 1 1 100%;
justify-content: center;
}
.finance-card-head {
display: grid;
}
.finance-card-head .btn,
.finance-seed-card .btn {
width: 100%;
justify-content: center;
}
.finance-mode-cards {
grid-template-columns: 1fr;
}
.kf-sub {
justify-content: flex-start;
}
.finance-card-summary {
grid-template-columns: 1fr;
padding: 12px 14px;
}
.finance-card-body {
padding: 0 14px 14px;
}
.kf-meta {
margin-right: 0;
}
.finance-expense-row {
grid-template-columns: 1fr;
gap: 8px;
}
.finance-expense-actions {
justify-content: stretch;
}
.finance-expense-actions .small-btn {
flex: 1;
justify-content: center;
}
.inline-modal-foot {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
display: grid;
}
.inline-modal-foot .btn {
width: 100%;
justify-content: center;
}
}
:root {
--ui-surface: rgba(255, 255, 255, .74);
--ui-surface-solid: #fffdf8;
--ui-line: rgba(47, 85, 69, .14);
--ui-line-soft: rgba(47, 85, 69, .09);
--ui-shadow-soft: 0 8px 22px rgba(34, 48, 42, .045);
--ui-shadow-hover: 0 12px 28px rgba(34, 48, 42, .075);
--ui-focus: rgba(224, 122, 95, .22);
}
.main {
background:
linear-gradient(180deg, rgba(246,241,231,.96), rgba(246,241,231,.88) 260px, rgba(246,241,231,.94)),
var(--cream);
}
.view-head,
.collection-hero,
.head-row,
.pd-hero,
.project-backbar {
max-width: 1180px;
}
.view-head .eyebrow,
.collection-hero .eyebrow,
.pd-hero .eyebrow,
.messenger-page-head .eyebrow {
color: var(--coral-deep);
font-size: 11px;
font-weight: 850;
letter-spacing: .16em;
text-transform: uppercase;
}
#view-title,
.view-title,
.pd-title,
.project-hero-title,
.finance-hero-card .project-hero-title,
.person-hero-main .pd-title,
.meeting-detail-gas .pd-title {
letter-spacing: 0;
text-wrap: balance;
}
.view-sub,
.panel-note,
.project-section-head p,
.finance-card-head p,
.pd-desc {
max-width: 76ch;
color: color-mix(in srgb, var(--muted) 88%, var(--ink));
line-height: 1.55;
}
.card,
.card.pad,
.detail-card,
.meeting-card,
.meeting-agenda-card,
.task-modal-section,
.profile-card,
.person-card,
.pcard,
.project-section,
.project-hero-card,
.drive-card,
.finance-work-card,
.finance-mode-card,
.finance-seed-card,
.messenger-page,
.chat-messenger-detail,
.fold-card {
border-color: var(--ui-line);
box-shadow: var(--ui-shadow-soft);
}
.card,
.card.pad,
.meeting-card,
.task-modal-section,
.profile-card,
.person-card,
.pcard,
.drive-card,
.finance-work-card,
.finance-mode-card,
.finance-seed-card,
.project-section,
.fold-card,
.messenger-page {
background: var(--ui-surface);
backdrop-filter: saturate(1.03);
}
.card.pad,
.meeting-card,
.task-modal-section,
.drive-card,
.finance-work-card,
.finance-seed-card {
padding: 16px;
}
.person-card,
.pcard,
.meeting-agenda-card,
.project-doc-row,
.drive-file-row,
.finance-expense-item {
transition: border-color .14s ease, box-shadow .14s ease, background .14s ease, transform .1s ease;
}
.person-card:hover,
.pcard:hover,
.meeting-agenda-card:hover,
.project-doc-row:hover,
.drive-file-row:hover,
.finance-expense-item:hover,
.messenger-row:hover,
.fchat-row:hover {
border-color: rgba(47, 85, 69, .24);
box-shadow: var(--ui-shadow-hover);
}
.panel-title,
.project-section-head h2,
.finance-card-head h3,
.task-modal-section h3,
.meeting-card h3,
.meeting-section-head h3 {
font-size: 16px;
line-height: 1.2;
letter-spacing: 0;
}
.panel-title,
.project-section-head,
.finance-card-head,
.meeting-section-head,
.drive-card-head,
.project-docs-head {
padding-bottom: 9px;
border-bottom: 1px solid var(--ui-line-soft);
}
.project-section-head,
.finance-card-head,
.drive-card-head,
.project-docs-head {
margin-bottom: 12px;
}
.stat-row,
.dash-grid,
.project-main-grid,
.project-resource-grid,
.finance-split,
.profile-grid,
.meeting-layout,
.people-grid,
.wl-cards {
gap: 14px;
}
.stat {
padding: 14px 16px;
border-color: var(--ui-line);
box-shadow: var(--ui-shadow-soft);
}
.stat .big {
font-size: clamp(28px, 3.2vw, 36px);
letter-spacing: 0;
}
.stat .lab {
margin-top: 6px;
font-size: 12px;
}
.mycard {
border-left-width: 3px;
}
.tk,
.tline,
.pj-line,
.meeting-task-row,
.profile-meeting-row,
.wl-task {
border-color: var(--ui-line-soft);
}
.tk:hover,
.tline:hover,
.pj-line:hover,
.meeting-task-row:hover,
.profile-meeting-row:hover,
.wl-task:hover {
background: rgba(246, 241, 231, .7);
}
.tk-title,
.meeting-task-title,
.wl-task-title,
.tbody .tt {
font-weight: 720;
line-height: 1.32;
}
.tk-meta,
.meeting-task-meta,
.profile-meeting-row span,
.finance-expense-main .kf-meta,
.pc-next {
color: var(--muted);
line-height: 1.35;
}
.pill-soft,
.tag,
.pd-status,
.meeting-calendar-badge,
.project-hero-pills .tag,
.finance-card-kicker {
border-radius: 999px;
font-weight: 760;
letter-spacing: 0;
}
.seg {
padding: 4px;
border: 1px solid var(--ui-line-soft);
background: rgba(239, 232, 217, .72);
}
.seg-btn {
min-height: 34px;
padding: 7px 12px;
font-weight: 720;
}
.seg-btn.on {
box-shadow: 0 1px 5px rgba(34, 48, 42, .08);
}
.main .btn,
.modal .btn,
.small-btn,
.mini-action,
.chat-submit-btn,
.messenger-compose-btn,
.finance-mode-card,
.project-tab,
.group-btn,
.nav-btn {
transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.main .btn:hover,
.modal .btn:hover,
.small-btn:hover,
.mini-action:hover {
transform: translateY(-1px);
}
.main .btn:active,
.modal .btn:active,
.small-btn:active,
.mini-action:active {
transform: translateY(0);
}
.field {
margin-bottom: 12px;
}
.field label,
.meeting-note-label,
.messenger-compose label {
font-size: 11.5px;
font-weight: 850;
color: var(--green-deep);
letter-spacing: .04em;
text-transform: uppercase;
}
.field input,
.field textarea,
.field select,
.meeting-agenda-select,
.meeting-status-select,
.meeting-note-card input,
.meeting-search-input,
.meeting-note-area,
.meeting-note-card textarea,
.finance-expense-form input,
.finance-expense-form select,
.messenger-compose select,
.fcw-input,
.chat-comment-form textarea {
border-color: var(--ui-line);
background: rgba(255, 253, 248, .9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.meeting-agenda-select:focus,
.meeting-status-select:focus,
.meeting-note-card input:focus,
.meeting-search-input:focus,
.meeting-note-area:focus,
.meeting-note-card textarea:focus,
.finance-expense-form input:focus,
.finance-expense-form select:focus,
.messenger-compose select:focus,
.fcw-input:focus,
.chat-comment-form textarea:focus {
border-color: var(--coral);
box-shadow: 0 0 0 3px var(--ui-focus);
background: #fff;
}
.write-form,
.task-solution-form,
.task-mini-form {
gap: 10px;
}
.modal {
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 16px;
background: var(--ui-surface-solid);
}
.modal-head {
padding: 17px 20px;
background: rgba(246, 241, 231, .52);
}
.modal-head h3 {
font-size: 18px;
}
.modal-body {
padding: 18px 20px;
}
.modal-foot,
.write-form > .modal-foot,
.inline-modal-foot {
padding-top: 14px !important;
padding-bottom: 14px !important;
background: rgba(246, 241, 231, .42);
}
.task-dependency-box,
.avatar-edit-box,
.person-picker-chip,
.meeting-attendees-edit,
.task-modal-meta > div,
.task-solution-read,
.finance-card-summary,
.finance-expense-note,
.project-glance .focus-tile,
.focus-tile {
border-color: var(--ui-line-soft);
background: rgba(246, 241, 231, .5);
}
.task-dependency-box {
padding: 10px;
}
.task-list {
border: 1px solid var(--ui-line);
background: var(--ui-surface);
}
.task-list .tk {
padding: 12px 14px;
}
.task-list .tk.is-waiting {
background: rgba(201, 211, 196, .22);
}
.people-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.person-card {
min-height: 184px;
padding: 14px;
}
.person-card-name,
.project-hero-title,
.finance-mode-card b,
.project-doc-row b,
.drive-file-main b {
line-height: 1.2;
}
.person-card-tags,
.project-hero-pills,
.project-hero-meta,
.meeting-meta-line,
.finance-expense-actions,
.drive-actions {
gap: 6px;
}
.project-hero-card {
border-radius: 14px;
padding: 18px;
}
.project-hero-title {
font-size: clamp(24px, 3vw, 34px);
}
.project-glance {
gap: 10px;
}
.project-tabs.project-tabs-refined {
gap: 6px;
padding: 5px;
border: 1px solid var(--ui-line);
border-radius: 12px;
background: rgba(239, 232, 217, .55);
overflow-x: auto;
}
.project-tabs-refined .project-tab {
border: 0;
border-radius: 9px;
background: transparent;
min-height: 38px;
}
.project-tabs-refined .project-tab.active {
background: var(--paper);
box-shadow: 0 1px 6px rgba(34, 48, 42, .08);
}
.project-section {
border-radius: 14px;
border-top: 1px solid var(--ui-line);
padding: 16px;
}
.project-section-head {
align-items: flex-start;
}
.drive-file-row,
.project-doc-row,
.finance-expense-item {
border-radius: 10px;
}
.finance-mode-cards {
gap: 10px;
}
.finance-mode-card {
border-radius: 12px;
min-height: 92px;
}
.finance-mode-card.active {
box-shadow: 0 8px 20px rgba(224, 122, 95, .12);
}
.finance-card-summary {
gap: 8px;
}
.meeting-detail-gas .meeting-card,
.meeting-detail-gas .meeting-agenda-card {
box-shadow: var(--ui-shadow-soft);
}
@media (min-width: 981px) {
.meeting-layout {
grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
}
}
.meeting-agenda-card {
padding: 16px;
}
.meeting-note-item {
border-color: var(--ui-line-soft);
background: rgba(255,255,255,.7);
}
.meeting-attendance-card {
top: auto;
}
.meeting-detail-gas .meeting-side .meeting-attendance-card {
padding: 4px 2px 14px;
border: 0;
border-bottom: 1px solid var(--ui-line-soft);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.meeting-attendance-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.meeting-attendance-head > span {
color: var(--muted);
font-size: 10px;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
}
.meeting-attendance-head > small,
.meeting-attendance-card > p {
color: var(--muted);
font-size: 10.5px;
font-weight: 500;
}
.meeting-attendance-card > p {
margin: -2px 0 10px;
line-height: 1.45;
}
.meeting-attendance-card .meeting-att-current {
gap: 4px 10px;
margin-bottom: 0;
}
.meeting-attendance-card .meeting-att-current .meet-att {
gap: 5px;
padding: 2px 4px 2px 0;
border: 0;
background: transparent;
box-shadow: none;
color: var(--muted);
font-size: 11.5px;
font-weight: 550;
}
.meeting-attendance-card .meeting-att-current .meet-att:is(button):hover {
border-color: transparent;
background: transparent;
color: var(--ink);
}
.meeting-attendance-card .meeting-att-avatar {
width: 20px;
height: 20px;
flex-basis: 20px;
opacity: .88;
}
.messenger-page {
margin-top: 0;
border-radius: 14px;
}
.messenger-compose {
background: rgba(246, 241, 231, .76);
}
.messenger-row {
min-height: 64px;
}
.chat-messenger-detail .chat-messages-thread,
.project-chat-thread,
.fchat-thread {
background: rgba(251, 250, 246, .86);
}
.chat-msg-bubble,
.fchat-bubble {
box-shadow: 0 1px 3px rgba(34, 48, 42, .06);
}
.fcw,
.floating-chat-panel {
box-shadow: 0 14px 38px rgba(34, 48, 42, .16);
}
@media (max-width: 1020px) {
.stat-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.project-glance {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.card.pad,
.meeting-card,
.task-modal-section,
.drive-card,
.finance-work-card,
.finance-seed-card,
.project-section {
padding: 14px;
}
.task-filters .seg {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.task-filters .seg-btn {
white-space: normal;
}
.people-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.meeting-layout,
.profile-grid {
gap: 12px;
}
}
@media (max-width: 560px) {
.stat-row,
.project-glance,
.finance-card-summary {
grid-template-columns: 1fr;
}
.dash-grid,
.project-main-grid,
.project-resource-grid,
.finance-split,
.profile-grid,
.meeting-layout,
.people-grid,
.wl-cards {
gap: 10px;
}
.collection-hero,
.head-row,
.project-hero-card,
.card.pad,
.meeting-card,
.task-modal-section,
.drive-card,
.finance-work-card,
.finance-seed-card {
border-radius: 12px;
}
#view-title,
.view-title {
font-size: clamp(28px, 11vw, 38px);
}
.view-sub {
font-size: 14px;
}
.modal-head,
.modal-body,
.modal-foot,
.write-form > .modal-foot {
padding-left: 14px !important;
padding-right: 14px !important;
}
.field input,
.field textarea,
.field select {
font-size: 16px;
}
.task-filters .seg {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.person-card {
min-height: 0;
}
.project-tabs.project-tabs-refined {
margin-left: 0;
margin-right: 0;
}
.project-section {
margin-left: 0;
margin-right: 0;
}
}
.meeting-detail-toolbar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px;
margin-bottom: 16px;
}
.meeting-toolbar-status {
display: flex;
justify-content: flex-end;
min-width: 0;
}
.meeting-hero-panel {
display: block;
padding: 18px 0 4px;
margin-bottom: 20px;
border-bottom: 1px solid var(--ui-line-soft);
}
.meeting-hero-panel .meeting-head-main {
max-width: none;
}
.meeting-hero-panel .pd-title {
max-width: 980px;
margin-bottom: 12px;
font-size: clamp(28px, 4.4vw, 42px);
}
.meeting-quickfacts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
gap: 0;
align-items: stretch;
max-width: 1000px;
border: 1px solid var(--ui-line-soft);
border-radius: 14px;
background: rgba(255, 253, 248, .68);
overflow: hidden;
}
.meeting-quickfacts > div,
.meeting-quickfacts > a {
min-width: 0;
padding: 11px 14px;
border-left: 1px solid var(--ui-line-soft);
}
.meeting-quickfacts > :first-child {
border-left: 0;
}
.meeting-quickfacts span {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .05em;
line-height: 1.1;
text-transform: uppercase;
}
.meeting-quickfacts b {
display: block;
min-width: 0;
overflow: hidden;
color: var(--ink);
font-size: 13.5px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.meeting-quick-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
border-radius: 0;
background: rgba(239, 232, 217, .55);
color: var(--green-deep);
}
.meeting-action-menu {
position: relative;
z-index: 30;
}
.meeting-action-menu summary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 8px 13px;
border: 1px solid var(--ui-line);
border-radius: 999px;
background: var(--paper);
color: var(--green-deep);
box-shadow: var(--ui-shadow-soft);
cursor: pointer;
font-size: 13px;
font-weight: 850;
list-style: none;
user-select: none;
}
.meeting-action-menu summary::-webkit-details-marker {
display: none;
}
.meeting-action-menu[open] summary {
border-color: rgba(224, 122, 95, .44);
box-shadow: 0 0 0 3px rgba(224, 122, 95, .12), var(--ui-shadow-soft);
}
.meeting-action-menu-panel {
position: absolute;
top: calc(100% + 8px);
width: min(260px, calc(100vw - 36px));
padding: 7px;
border: 1px solid var(--ui-line);
border-radius: 14px;
background: var(--ui-surface-solid);
box-shadow: 0 18px 42px rgba(34, 48, 42, .18);
}
.meeting-menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 39px;
padding: 9px 11px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--ink);
cursor: pointer;
font: inherit;
font-size: 13.5px;
font-weight: 740;
line-height: 1.25;
text-align: left;
text-decoration: none;
}
.meeting-menu-item:hover {
background: rgba(246, 241, 231, .86);
color: var(--green-deep);
}
.meeting-menu-item.primary {
margin-bottom: 3px;
background: var(--coral);
color: #fff;
}
.meeting-menu-item.primary:hover {
background: var(--coral-deep);
color: #fff;
}
.meeting-menu-item.muted {
color: var(--muted);
}
.meeting-menu-item[aria-disabled="true"] {
cursor: default;
opacity: .56;
}
.meeting-menu-item[aria-disabled="true"]:hover {
background: transparent;
color: var(--ink);
}
.meeting-admin-actions {
display: none;
}
@media (max-width: 900px) {
.meeting-quickfacts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.meeting-quickfacts > div,
.meeting-quickfacts > a {
border-top: 1px solid var(--ui-line-soft);
}
.meeting-quickfacts > :nth-child(-n+2) {
border-top: 0;
}
.meeting-quickfacts > :nth-child(odd) {
border-left: 0;
}
}
@media (max-width: 640px) {
.meeting-detail-toolbar {
grid-template-columns: 1fr auto;
align-items: start;
}
.meeting-detail-toolbar .pd-back {
justify-self: start;
}
.meeting-toolbar-status {
grid-column: 1 / -1;
grid-row: 2;
justify-content: flex-start;
}
.meeting-action-menu {
grid-column: 2;
grid-row: 1;
}
.meeting-action-menu summary {
width: 40px;
padding: 8px;
}
.meeting-action-menu summary span:first-child {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.meeting-hero-panel {
padding-top: 8px;
margin-bottom: 16px;
}
.meeting-hero-panel .pd-title {
font-size: 28px;
}
.meeting-quickfacts {
grid-template-columns: 1fr;
}
.meeting-quickfacts > div,
.meeting-quickfacts > a {
border-left: 0;
}
.meeting-quickfacts > :first-child {
border-top: 0;
}
}
.settings-modal-layout {
gap: 14px;
}
.settings-modal-hero {
padding: 16px 18px;
border: 1px solid var(--ui-line-soft);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(224, 122, 95, .12), rgba(201, 211, 196, .12)),
rgba(255, 253, 248, .92);
}
.settings-modal-hero .eyebrow {
margin: 0 0 8px;
}
.settings-modal-hero h3 {
margin: 0 0 8px;
font-family: var(--display);
font-size: 28px;
line-height: 1.05;
color: var(--ink);
}
.settings-card-section {
padding: 14px 16px;
background: rgba(255, 253, 248, .82);
}
.settings-card-section .settings-section-title {
margin-bottom: 6px;
font-size: 15px;
color: var(--ink);
}
.settings-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0 0 12px;
}
.settings-info-pill {
padding: 10px 12px;
border: 1px solid var(--ui-line-soft);
border-radius: 12px;
background: rgba(246, 241, 231, .58);
}
.settings-info-pill span {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.settings-info-pill b {
display: block;
color: var(--ink);
font-size: 13px;
line-height: 1.25;
}
.settings-info-pill.ok {
background: rgba(201, 211, 196, .42);
}
.settings-info-pill.accent {
background: rgba(224, 122, 95, .14);
}
.settings-row-action {
align-items: center;
}
.settings-select-row {
align-items: center;
}
.settings-select {
width: min(220px, 100%);
min-height: 38px;
border: 1px solid var(--ui-line);
font-weight: 800;
padding: 8px 34px 8px 11px;
}
.settings-select:focus {
outline: 2px solid rgba(224, 122, 95, .24);
border-color: var(--coral);
}
.push-settings-section {
margin-top: 0;
}
.push-settings-intro { margin: 0 0 12px; line-height: 1.5; }
.push-device-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 14px; border: 1px solid var(--ui-line-soft); border-radius: 14px; background: color-mix(in srgb, var(--paper) 82%, var(--sage-pale)); }
.push-device-indicator { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(108, 126, 113, .1); }
.push-device-indicator span { width: 11px; height: 11px; border-radius: 50%; background: #9a9f99; box-shadow: 0 0 0 5px rgba(108, 126, 113, .09); }
.push-device-card.on .push-device-indicator { background: var(--sage-pale); }
.push-device-card.on .push-device-indicator span { background: var(--green); box-shadow: 0 0 0 5px rgba(47, 91, 73, .1); }
.push-device-card.repair .push-device-indicator { background: #fbf0dc; }
.push-device-card.repair .push-device-indicator span { background: #c68a32; box-shadow: 0 0 0 5px rgba(198, 138, 50, .1); }
.push-device-card.blocked .push-device-indicator { background: #f5ece7; }
.push-device-card.blocked .push-device-indicator span { background: var(--coral); box-shadow: 0 0 0 5px rgba(224, 122, 95, .1); }
.push-device-copy { min-width: 0; }
.push-device-copy b, .push-device-copy small { display: block; overflow-wrap: anywhere; }
.push-device-copy b { font-size: 14px; }
.push-device-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.push-device-action { display: flex; justify-content: flex-end; }
.push-device-action .small-btn { min-height: 36px; white-space: nowrap; }
.push-device-card.busy { opacity: .72; }
.push-device-card.busy .push-device-indicator span { animation: pushDevicePulse .9s ease-in-out infinite; }
@keyframes pushDevicePulse {
0%, 100% { transform: scale(.78); opacity: .55; }
50% { transform: scale(1); opacity: 1; }
}
@media (max-width: 620px) {
.push-device-card { grid-template-columns: 38px minmax(0, 1fr); align-items: start; padding: 13px; }
.push-device-indicator { width: 38px; height: 38px; }
.push-device-action { grid-column: 1 / -1; }
.push-device-action .small-btn { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.push-device-card.busy .push-device-indicator span { animation: none; }
}
.settings-push-categories {
padding: 4px 14px;
border: 1px solid var(--ui-line-soft);
border-radius: 12px;
background: color-mix(in srgb, var(--sage-pale) 46%, var(--paper));
}
body.compact-mode .main {
padding-top: 22px;
gap: 10px;
}
body.compact-mode .card,
body.compact-mode .project-hero-card,
body.compact-mode .project-work-card,
body.compact-mode .finance-work-card {
padding-top: 12px;
padding-bottom: 12px;
}
body.compact-mode .collection-panel,
body.compact-mode .project-detail,
body.compact-mode .finance-page {
gap: 12px;
}
body.compact-mode .people-grid,
body.compact-mode .project-board,
body.compact-mode .meetings-list {
gap: 12px;
}
body.compact-mode .view-head,
body.compact-mode .collection-hero,
body.compact-mode .project-hero-card,
body.compact-mode .finance-hero-card {
margin-bottom: 12px;
}
body.compact-mode .card.pad,
body.compact-mode .settings-card-section,
body.compact-mode .project-work-card,
body.compact-mode .finance-work-card {
padding: 12px 14px;
}
body.compact-mode .pcard,
body.compact-mode .person-card,
body.compact-mode .meeting-card,
body.compact-mode .task-card,
body.compact-mode .kf-item {
padding: 10px 12px;
}
body.compact-mode .dash-grid,
body.compact-mode .project-main-grid,
body.compact-mode .project-two-col,
body.compact-mode .finance-card-summary {
gap: 12px;
}
body.compact-mode .tk,
body.compact-mode .tline,
body.compact-mode .pj-line {
padding-top: 8px;
padding-bottom: 8px;
}
body.compact-mode .view-sub,
body.compact-mode .panel-note {
margin-bottom: 8px;
}
@media (max-width: 760px) {
.settings-modal-hero {
padding: 14px;
}
.settings-modal-hero h3 {
font-size: 24px;
}
.settings-card-section {
padding: 12px 14px;
}
.settings-info-grid {
grid-template-columns: 1fr;
}
.settings-row-action {
align-items: flex-start;
}
.settings-select-row {
align-items: flex-start;
}
.settings-row-btn {
width: auto !important;
min-width: 0;
}
}
.finance-work-inbox {
display: grid;
gap: 9px;
}
.finance-work-inbox > details {
overflow: hidden;
border: 1px solid rgba(47, 85, 69, .11);
border-radius: 15px;
background: rgba(255, 253, 248, .72);
}
.finance-work-inbox > details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 15px;
color: var(--ink);
font-family: var(--display);
font-size: 14px;
font-weight: 750;
cursor: pointer;
list-style: none;
}
.finance-work-inbox > details > summary::-webkit-details-marker { display: none; }
.finance-work-inbox > details > summary::after { content: "⌄"; color: var(--muted); font-size: 15px; transition: transform .18s ease; }
.finance-work-inbox > details[open] > summary::after { transform: rotate(180deg); }
.finance-work-inbox > details > summary small {
order: 2;
min-width: 25px;
padding: 3px 8px;
border-radius: 999px;
color: #315747;
background: rgba(72, 117, 94, .1);
font: 700 11px/1.4 var(--sans);
text-align: center;
}
.finance-work-inbox-list { border-top: 1px solid rgba(47, 85, 69, .09); }
.finance-work-inbox-row {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 15px;
border-top: 1px solid rgba(47, 85, 69, .07);
}
.finance-work-inbox-row:first-child { border-top: 0; }
.finance-work-inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(224, 116, 85, .11); }
.finance-work-inbox-row.is-done .finance-work-inbox-dot { background: #5c9074; box-shadow: 0 0 0 4px rgba(92, 144, 116, .11); }
.finance-work-inbox-row > div { display: grid; gap: 2px; min-width: 0; }
.finance-work-inbox-row > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.finance-work-inbox-row b { color: var(--ink); font-size: 13px; }
.finance-work-inbox-row small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.finance-work-inbox-row em { color: #52715f; font-size: 10.5px; font-style: normal; font-weight: 700; }
.finance-work-claim {
border: 0;
padding: 7px 9px;
color: #456453;
background: transparent;
font: 750 10.5px/1.2 var(--sans);
cursor: pointer;
}
.finance-work-claim:hover { color: var(--coral-dark); }
.finance-work-inbox-empty { padding: 13px 15px 15px; border-top: 1px solid rgba(47, 85, 69, .07); color: var(--muted); font-size: 11.5px; }
.finance-add-strip {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 15px;
}
.finance-add-strip > div { display: grid; gap: 3px; }
.finance-add-strip h2 { margin: 0; }
.finance-add-strip p { margin: 0; color: var(--muted); font-size: 12px; }
.finance-add-modal .modal-body { padding-top: 16px; }
.finance-add-modal-intro { display: grid; gap: 3px; margin-bottom: 13px; }
.finance-add-modal-intro b { font-family: var(--display); font-size: 15px; }
.finance-add-modal-intro span { color: var(--muted); font-size: 12px; }
.finance-add-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.finance-add-choices button,
.finance-add-projects button {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 4px 10px;
min-width: 0;
padding: 13px;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 14px;
color: var(--ink);
background: rgba(255, 253, 248, .82);
text-align: left;
cursor: pointer;
}
.finance-add-choices button:hover,
.finance-add-projects button:hover { border-color: rgba(218, 111, 82, .42); background: #fffaf4; transform: translateY(-1px); }
.finance-add-choices button > span { grid-row: 1 / span 2; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #456a57; background: #edf4ed; }
.finance-add-choices button svg { width: 17px; height: 17px; }
.finance-add-choices button b { font-size: 13px; }
.finance-add-choices button small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.finance-add-choices button em { grid-column: 3; grid-row: 1 / span 2; color: var(--coral-dark); font-size: 10.5px; font-style: normal; font-weight: 750; }
.finance-add-projects { display: grid; gap: 7px; max-height: min(54vh, 480px); overflow: auto; }
.finance-add-projects button { grid-template-columns: 90px minmax(0, 1fr); }
.finance-add-projects button small { color: var(--muted); font-weight: 700; }
.finance-document-state {
display: grid !important;
gap: 1px !important;
margin-top: 8px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(72, 117, 94, .075);
}
.finance-document-state b { font: 750 11px/1.35 var(--sans) !important; }
.finance-document-state span { overflow: visible !important; font-size: 10.5px !important; line-height: 1.4 !important; text-overflow: clip !important; white-space: normal !important; }
.finance-document-state.is-problem { color: #8d4d3c; background: #fbedE8; }
.finance-document-state.is-done { color: #355f4c; background: #eaf4ec; }
.finance-document-state.is-waiting,
.finance-document-state.is-attention { color: #7a5b22; background: #f8f0dc; }
.finance-document-history { margin-top: 7px; }
.finance-document-history > summary,
.finance-document-technical > summary { width: max-content; color: #52715f; font-size: 10.5px; font-weight: 750; cursor: pointer; }
.finance-document-timeline { display: grid; gap: 0; margin: 9px 0 7px 3px; }
.finance-document-timeline > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; position: relative; padding: 0 0 10px; }
.finance-document-timeline > div:not(:last-child)::after { content: ""; position: absolute; top: 8px; bottom: -2px; left: 3px; width: 1px; background: rgba(67, 104, 85, .22); }
.finance-document-timeline i { z-index: 1; width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #5c9074; }
.finance-document-timeline span { display: grid; overflow: visible !important; gap: 1px; text-overflow: clip !important; white-space: normal !important; }
.finance-document-timeline b { font: 700 10.5px/1.3 var(--sans) !important; }
.finance-document-timeline small { overflow: visible !important; font-size: 10px !important; white-space: normal !important; }
.finance-document-technical { margin-top: 7px; }
.finance-document-technical small { display: block; margin-top: 5px; overflow-wrap: anywhere; white-space: normal !important; }
.finance-close-copy { gap: 5px !important; }
.finance-close-checklist {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.finance-close-checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 5px; align-items: start; padding: 7px; border-radius: 9px; background: rgba(60, 101, 80, .065); }
.finance-close-checklist li > i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #5c9074; font: 800 10px/1 var(--sans); font-style: normal; }
.finance-close-checklist li > span { display: grid; gap: 1px; overflow: visible; }
.finance-close-checklist li b { font: 700 9.5px/1.25 var(--sans); }
.finance-close-checklist li small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.finance-close-checklist li.is-blocked { background: rgba(224, 116, 85, .08); }
.finance-close-checklist li.is-blocked > i { background: var(--coral); }
.finance-close-rewards { justify-self: start; margin-top: 2px; }
.is-finance-work-focus {
animation: finance-work-focus 2.4s ease;
}
@keyframes finance-work-focus {
0%, 35% { box-shadow: 0 0 0 4px rgba(224, 116, 85, .2); border-color: rgba(224, 116, 85, .55); }
100% { box-shadow: none; }
}
@media (max-width: 900px) {
.finance-close-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.finance-work-inbox-row { grid-template-columns: 9px minmax(0, 1fr); gap: 10px; padding-inline: 12px; }
.finance-work-inbox-row > div:last-child { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.finance-add-strip { grid-template-columns: auto minmax(0, 1fr); }
.finance-add-strip > .btn { grid-column: 1 / -1; width: 100%; }
.finance-add-choices { grid-template-columns: 1fr; }
.finance-add-choices button { grid-template-columns: 34px minmax(0, 1fr) auto; }
.finance-close-checklist { grid-template-columns: 1fr; }
.finance-document-state { margin-right: 0; }
}
.external-access-banner {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 16px;
align-items: start;
margin: 0 0 20px;
padding: 20px 22px;
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 22px;
background:
radial-gradient(circle at 96% 8%, rgba(222, 232, 218, .8), transparent 34%),
rgba(255, 253, 248, .9);
box-shadow: 0 10px 32px rgba(36, 67, 55, .055);
}
.external-access-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 17px;
color: var(--green-deep);
background: rgba(222, 232, 218, .9);
}
.external-access-icon svg {
width: 23px;
height: 23px;
}
.external-access-banner > div > span {
display: block;
margin: 1px 0 4px;
color: var(--green-deep);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .11em;
}
.external-access-banner h2 {
margin: 0;
color: var(--ink);
font-family: var(--display);
font-size: clamp(19px, 2vw, 25px);
line-height: 1.18;
}
.external-access-banner p {
max-width: 760px;
margin: 7px 0 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.55;
}
.external-project-scope {
display: flex;
gap: 12px;
align-items: center;
margin: 0 0 14px;
padding: 13px 15px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 16px;
color: var(--green-deep);
background: rgba(235, 241, 232, .72);
}
.external-project-scope > span {
display: grid;
place-items: center;
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 10px;
color: #fff;
background: var(--green-deep);
font-weight: 850;
}
.external-project-scope div {
min-width: 0;
}
.external-project-scope b,
.external-project-scope small {
display: block;
}
.external-project-scope b {
color: var(--ink);
font-size: 13.5px;
}
.external-project-scope small {
margin-top: 2px;
color: var(--muted);
line-height: 1.4;
}
.person-external-pill {
color: var(--green-deep) !important;
border: 1px solid rgba(47, 85, 69, .15);
background: rgba(222, 232, 218, .78) !important;
}
body.is-external-access [data-new-proj],
body.is-external-access [data-new-project],
body.is-external-access [data-new-edition],
body.is-external-access [data-new-task],
body.is-external-access [data-new-task-for],
body.is-external-access [data-new-project-role-task],
body.is-external-access [data-new-meeting],
body.is-external-access [data-edit-proj],
body.is-external-access [data-edit-meeting],
body.is-external-access [data-meeting-write],
body.is-external-access [data-generate-meeting-pdf],
body.is-external-access [data-sync-meeting-calendar],
body.is-external-access [data-reopen-meeting-minutes],
body.is-external-access [data-proj-finance],
body.is-external-access [data-document-magic-open],
body.is-external-access [data-quick-add-idea],
body.is-external-access [data-open-decision-registry],
body.is-external-access [data-open-role-directory],
body.is-external-access [data-open-obligation-book],
body.is-external-access [data-open-assurance-hub],
body.is-external-access [data-group-chat-open],
body.is-external-access [data-direct-chat-create-form] {
display: none !important;
}
body.is-external-access .project-detail .project-hero-card,
body.is-external-access .project-detail .project-section,
body.is-external-access .project-detail .project-pulse,
body.is-external-access .project-tabs-refined {
border-color: rgba(47, 85, 69, .11);
box-shadow: 0 8px 26px rgba(36, 67, 55, .045);
}
@media (max-width: 620px) {
.external-access-banner {
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
padding: 16px;
border-radius: 18px;
}
.external-access-icon {
width: 38px;
height: 38px;
border-radius: 13px;
}
.external-access-icon svg {
width: 19px;
height: 19px;
}
.external-project-scope {
align-items: flex-start;
padding: 12px;
}
}
.chat-msg-bubble.image,
.fchat-bubble.image,
.chat-msg-row.me .chat-msg-bubble.image,
.fchat-msg.me .fchat-bubble.image {
width: min(390px, 100%);
max-width: 100%;
padding: 5px !important;
overflow: hidden;
background: rgba(255,253,248,.98) !important;
color: var(--ink) !important;
border-color: rgba(47,85,69,.16) !important;
}
.fchat-bubble.image,
.floating-chat-dock .fchat-bubble.image { width: min(330px, calc(100vw - 76px)); }
.chat-msg-bubble.image .chat-msg-text,
.chat-msg-row.me .chat-msg-bubble.image .chat-msg-text,
.fchat-bubble.image .fchat-text { color: var(--ink) !important; }
.chat-image-card { width: 100%; margin: 0; }
.chat-image-open {
position: relative;
display: grid;
place-items: center;
width: 100%;
min-height: 170px;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 13px;
background: #e8ece6;
color: var(--green-deep);
cursor: zoom-in;
}
.chat-image-open:focus-visible { outline: 3px solid rgba(218,105,82,.32); outline-offset: 2px; }
.chat-image-open img {
display: block;
width: 100%;
height: auto;
max-height: 430px;
object-fit: contain;
background: #eef0eb;
}
.chat-image-open img[hidden] { display: none; }
.chat-image-placeholder {
display: grid;
place-items: center;
gap: 8px;
min-height: 170px;
padding: 18px;
text-align: center;
}
.chat-image-placeholder svg { width: 30px; height: 30px; opacity: .72; }
.chat-image-placeholder small { color: var(--muted); font: 700 11px/1.35 var(--font-sans); }
.chat-image-open.is-ready .chat-image-placeholder { display: none; }
.chat-image-open.is-error .chat-image-placeholder { color: var(--coral, #c45f4b); }
.chat-image-card figcaption {
padding: 8px 9px 5px;
color: var(--ink);
font: 500 14px/1.45 var(--font-sans);
overflow-wrap: anywhere;
}
.chat-msg-bubble.image .chat-msg-time,
.fchat-bubble.image .fchat-msg-time { color: var(--muted) !important; padding: 1px 5px 0; }
.chat-image-preparing {
display: grid;
justify-items: center;
gap: 8px;
min-height: 190px;
padding: 42px 18px;
text-align: center;
}
.chat-image-preparing small { color: var(--muted); }
.chat-image-spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(47,85,69,.15);
border-top-color: var(--green-deep);
border-radius: 50%;
animation: chatImageSpin .8s linear infinite;
}
@keyframes chatImageSpin { to { transform: rotate(360deg); } }
.chat-image-send-form { display: grid; gap: 14px; min-width: 0; max-width: 100%; }
.chat-image-send-form label { display: grid; gap: 6px; font-weight: 750; color: var(--green-deep); }
.chat-image-send-form textarea { width: 100%; resize: vertical; min-height: 72px; }
.chat-image-draft-preview {
display: grid;
place-items: center;
min-height: 220px;
max-height: 48vh;
overflow: hidden;
border-radius: 16px;
background: #eef0eb;
min-width: 0;
max-width: 100%;
}
.chat-image-draft-preview img { display: block; max-width: 100%; max-height: 48vh; object-fit: contain; }
.chat-image-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-width: 0;
max-width: 100%;
}
.chat-image-summary span {
display: grid;
gap: 3px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(247,244,235,.72);
min-width: 0;
}
.chat-image-summary small,
.chat-image-privacy { color: var(--muted); }
.chat-image-privacy { margin: 0; font-size: 12px; line-height: 1.5; }
.chat-image-send-error { margin: 0; color: #9e3426; font-weight: 700; }
.chat-image-viewer { display: grid; justify-items: center; gap: 12px; }
.chat-image-viewer img {
display: block;
max-height: 72vh;
object-fit: contain;
border-radius: 14px;
background: #eef0eb;
}
.chat-image-viewer p { width: 100%; margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
.chat-msg-bubble.image { width: min(340px, calc(100vw - 66px)); }
.fchat-bubble.image,
.floating-chat-dock .fchat-bubble.image { width: min(330px, calc(100vw - 62px)); }
.chat-image-open,
.chat-image-placeholder { min-height: 150px; }
.chat-image-draft-preview { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
.chat-image-spinner { animation: none; }
}
.view-finance > .card {
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.view-finance .collection-head { display: none; }
.view-finance .collection-panel { padding: 0; background: transparent; }
.view-finance .collection-panel[aria-busy="true"] { opacity: .68; pointer-events: none; }
.finance-workspace {
display: grid;
gap: 16px;
min-width: 0;
color: var(--ink);
}
.section-hero,
.finance-section,
.finance-member-note {
min-width: 0;
border: 1px solid rgba(54, 82, 68, .13);
border-radius: 20px;
background: rgba(255, 253, 248, .96);
box-shadow: 0 10px 30px rgba(43, 66, 58, .055);
}
.section-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
overflow: hidden;
padding: clamp(21px, 2.7vw, 30px);
color: #f9f8f1;
background: linear-gradient(135deg, #294b3d 0%, #365f4d 100%);
border-color: rgba(37, 75, 59, .35);
}
.section-hero::after {
content: "";
position: absolute;
width: 210px;
height: 210px;
right: -105px;
bottom: -125px;
border: 30px solid rgba(255, 255, 255, .04);
border-radius: 50%;
pointer-events: none;
}
.finance-help-button {
position: absolute;
z-index: 2;
right: 24px;
bottom: 22px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 50%;
color: rgba(255, 255, 255, .86);
background: rgba(20, 52, 39, .22);
font: 800 16px/1 var(--sans);
cursor: pointer;
backdrop-filter: blur(8px);
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.finance-help-button:hover {
border-color: rgba(255, 255, 255, .42);
background: rgba(255, 255, 255, .13);
transform: translateY(-1px);
}
.finance-help-button:focus-visible {
outline: 3px solid rgba(255, 255, 255, .28);
outline-offset: 3px;
}
.section-hero-copy {
display: flex;
align-items: flex-start;
gap: 16px;
min-width: 0;
}
.finance-home-icon,
.section-hero-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex: 0 0 46px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 13px;
color: #fff;
background: rgba(255, 255, 255, .1);
}
.finance-home-icon svg,
.section-hero-icon svg { width: 23px; height: 23px; }
.section-hero-copy > div { min-width: 0; }
.section-hero-copy h1 { margin: 3px 0 7px; color: #fff; font-family: var(--display); font-size: clamp(25px, 3vw, 36px); line-height: 1.08; letter-spacing: -.03em; }
.section-hero-copy p { max-width: 660px; margin: 0; color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.55; }
.finance-section-kicker,
.section-hero-kicker {
display: block;
color: var(--coral-deep);
font-size: 10.5px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.section-hero .finance-section-kicker,
.section-hero .section-hero-kicker { color: #d7e6dc; }
.section-hero-actions { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 9px; }
.section-hero-actions .btn { min-height: 44px; white-space: nowrap; }
.section-hero-actions .btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.08); }
.section-hero-actions .btn-primary { border-color: #f2eadf; color: #294b3d; background: #f2eadf; }
.finance-balance-block {
position: relative;
z-index: 1;
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: fit-content;
max-width: 100%;
padding: 15px 18px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 14px;
background: rgba(19, 49, 37, .22);
backdrop-filter: blur(8px);
}
.finance-balance-grid {
position: relative;
z-index: 1;
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
gap: 10px;
min-width: 0;
}
.finance-balance-grid .finance-balance-block {
grid-column: auto;
width: auto;
}
.finance-balance-block > span { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.finance-balance-block > b { color: #fff; font-family: var(--display); font-size: clamp(29px, 3.9vw, 42px); line-height: 1.06; letter-spacing: -.035em; }
.finance-balance-block > small { color: rgba(255,255,255,.69); font-size: 11.5px; overflow-wrap: anywhere; }
@media (max-width: 680px) {
.finance-balance-grid { grid-template-columns: 1fr; width: 100%; }
}
.finance-help-modal {
width: min(700px, calc(100vw - 36px));
border: 1px solid rgba(54, 82, 68, .11);
}
.finance-help-modal .modal-head {
padding: 21px 24px 13px;
border-bottom: 0;
}
.finance-help-modal .modal-head h3 {
color: var(--green-deep);
font-family: var(--display);
font-size: 24px;
letter-spacing: -.025em;
}
.finance-help-modal .modal-body {
display: grid;
gap: 20px;
padding: 5px 24px 24px;
}
.finance-help-modal .modal-foot {
justify-content: flex-end;
padding: 13px 24px 18px;
border-top-color: rgba(54, 82, 68, .09);
}
.finance-help-intro {
display: block;
padding: 0 0 16px;
border-bottom: 1px solid rgba(54, 82, 68, .1);
}
.finance-help-intro > span {
display: none;
}
.finance-help-intro b {
display: block;
margin-bottom: 6px;
color: var(--ink);
font-family: var(--display);
font-size: 17px;
letter-spacing: -.015em;
}
.finance-help-intro p,
.finance-help-flow p,
.finance-help-sections p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.finance-help-flow {
display: grid;
grid-template-columns: 1fr;
gap: 0;
counter-reset: finance-help-step;
}
.finance-help-flow > div {
position: relative;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
column-gap: 13px;
min-width: 0;
padding: 0 0 18px;
}
.finance-help-flow > div:last-child {
padding-bottom: 0;
}
.finance-help-flow > div:not(:last-child)::after {
content: "";
position: absolute;
top: 29px;
bottom: 4px;
left: 14px;
width: 1px;
background: rgba(49, 87, 70, .16);
}
.finance-help-flow span {
display: grid;
place-items: center;
grid-row: 1 / 3;
width: 29px;
height: 29px;
margin: 0;
border: 1px solid rgba(49, 87, 70, .15);
border-radius: 10px;
color: #315746;
background: #edf3ef;
font-size: 11px;
font-weight: 900;
}
.finance-help-flow b {
display: block;
align-self: end;
margin: 1px 0 3px;
color: var(--ink);
font-size: 13px;
}
.finance-help-flow p { max-width: 575px; font-size: 11.5px; line-height: 1.5; }
.finance-help-sections {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.finance-help-sections section {
padding: 16px;
border: 0;
border-radius: 14px;
background: #f6f5f0;
}
.finance-help-sections section > b {
display: block;
margin-bottom: 9px;
color: var(--ink);
font-family: var(--display);
font-size: 14px;
}
.finance-help-sections p + p { margin-top: 8px; }
.finance-help-sections ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.finance-help-sections li::marker { color: #8fa394; }
.finance-help-sections strong { color: var(--ink); }
.finance-help-role {
margin: 0;
padding: 12px 14px;
border-left: 3px solid #9eb4a6;
border-radius: 3px 11px 11px 3px;
color: #315746;
background: rgba(237, 244, 239, .72);
font-size: 11.5px;
font-weight: 650;
line-height: 1.45;
}
.finance-alert {
padding: 12px 15px;
border: 1px solid rgba(166, 116, 31, .23);
border-radius: 13px;
color: #75551f;
background: #fff6df;
font-size: 13px;
line-height: 1.45;
}
.finance-workspace-tabs {
position: sticky;
z-index: 5;
top: 8px;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
padding: 6px;
overflow-x: auto;
border: 1px solid rgba(54,82,68,.12);
border-radius: 15px;
background: rgba(255,253,248,.94);
box-shadow: 0 9px 24px rgba(43,66,58,.07);
backdrop-filter: blur(12px);
scrollbar-width: none;
}
.finance-workspace-tabs::-webkit-scrollbar { display: none; }
.finance-workspace-tabs button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
flex: 1 0 auto;
padding: 9px 14px;
border: 0;
border-radius: 10px;
color: var(--muted);
background: transparent;
font: inherit;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.finance-workspace-tabs button:hover { color: var(--green-deep); background: rgba(239,242,229,.6); }
.finance-workspace-tabs button.is-active { color: #fff; background: var(--green-deep); box-shadow: 0 5px 13px rgba(42,77,62,.16); }
.finance-workspace-tabs small {
display: grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
color: var(--green-deep);
background: var(--sage-soft);
font-size: 9.5px;
}
.finance-workspace-tabs button.is-active small { color: var(--green-deep); background: #f4f1e8; }
.finance-tab-view { display: grid; gap: 16px; min-width: 0; }
.finance-overview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.finance-overview-summary .finance-metric { padding: 15px 16px; background: rgba(255,253,248,.96); box-shadow: 0 8px 22px rgba(43,66,58,.04); }
.finance-overview-summary .finance-metric > b { font-size: clamp(18px, 2vw, 23px); }
.finance-overview-lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.finance-overview-lower > * { min-width: 0; }
.finance-overview-lower .finance-section-head { align-items: center; }
.finance-overview-lower .finance-section-head .btn { min-height: 38px; padding-inline: 12px; white-space: nowrap; }
.finance-attention-list { display: grid; gap: 8px; }
.finance-attention-row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-width: 0;
padding: 12px 13px;
border: 1px solid rgba(54,82,68,.1);
border-radius: 13px;
background: #fbfaf6;
}
.finance-attention-count {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
color: #7f591c;
background: #fff0c9;
font-family: var(--display);
font-size: 17px;
font-weight: 800;
}
.finance-attention-row > div { display: grid; gap: 2px; min-width: 0; }
.finance-attention-row > div b { font-size: 13px; }
.finance-attention-row > div small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.finance-attention-row .btn { min-height: 38px; padding-inline: 12px; }
.finance-attention-row.is-returned .finance-attention-count { color: #8c4f3f; background: #f9e5df; }
.finance-attention-row.is-bank .finance-attention-count { color: #355e4c; background: #e7f3eb; }
.finance-policy-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(54,82,68,.09); }
.finance-policy-note summary { width: fit-content; color: var(--muted); font-size: 10.5px; font-weight: 800; cursor: pointer; }
.finance-policy-note p { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.finance-overview-documents { display: grid; min-width: 0; }
.finance-overview-documents > div {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
min-width: 0;
padding: 9px 2px;
border-top: 1px solid rgba(54,82,68,.09);
}
.finance-overview-documents > div:first-child { border-top: 0; }
.finance-overview-documents p { display: grid; gap: 2px; min-width: 0; margin: 0; }
.finance-overview-documents p b,
.finance-overview-documents p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-overview-documents p b { font-size: 12.5px; }
.finance-overview-documents p small { color: var(--muted); font-size: 10.5px; }
.finance-overview-documents .btn { min-height: 36px; padding-inline: 11px; }
.finance-overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(285px, .8fr); gap: 18px; min-width: 0; }
.finance-section { padding: clamp(18px, 2.4vw, 26px); }
.finance-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: 18px; }
.finance-section-head > div { min-width: 0; }
.finance-section-head h2 { margin: 3px 0 4px; font-family: var(--display); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.15; letter-spacing: -.025em; }
.finance-section-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.finance-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 10px;
border-radius: 999px;
color: var(--muted);
background: var(--cream);
font-size: 10.5px;
font-style: normal;
font-weight: 850;
white-space: nowrap;
}
.finance-badge.is-live { color: #286047; background: #e7f3eb; }
.finance-badge.is-live::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #4f9a70; }
.finance-badge.is-stale { color: #836128; background: #fff1cf; }
.finance-badge.is-private { color: #6b514a; background: #f8eae5; }
.finance-badge.is-priority { color: #805619; background: #fff0c9; }
.finance-badge.is-failed { color: #8b4c3c; background: #f9e5df; }
.finance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-width: 0; margin-bottom: 18px; }
.finance-metrics.is-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.finance-metric { min-width: 0; padding: 13px 14px; border: 1px solid rgba(54,82,68,.09); border-radius: 12px; background: #f8f6f0; }
.finance-metric > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10.5px; font-weight: 800; }
.finance-metric > b { display: block; overflow-wrap: anywhere; font-family: var(--display); font-size: clamp(15px, 1.7vw, 20px); line-height: 1.15; }
.finance-metric > small { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.finance-metric.is-income { border-color: rgba(53, 122, 81, .12); background: #eff7f1; }
.finance-metric.is-income > b { color: #2e704c; }
.finance-metric.is-expense { border-color: rgba(194, 91, 65, .12); background: #fbefeb; }
.finance-metric.is-expense > b { color: #aa523f; }
.finance-metric.is-attention { border-color: rgba(190, 132, 42, .16); background: #fff5dd; }
.finance-transaction-list { display: grid; gap: 2px; min-width: 0; }
.finance-transaction { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 13px; align-items: center; min-width: 0; padding: 11px 4px; border-top: 1px solid rgba(54,82,68,.09); }
.finance-transaction:first-child { border-top: 0; }
.finance-transaction-date,
.finance-transaction-copy { display: flex; flex-direction: column; min-width: 0; }
.finance-transaction-date > span { color: var(--ink); font-size: 12px; font-weight: 750; }
.finance-transaction-date > small,
.finance-transaction-copy > small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-transaction-copy > b { overflow: hidden; font-size: 12.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.finance-transaction > strong { font-family: var(--display); font-size: 13.5px; white-space: nowrap; }
.finance-transaction > strong.is-income { color: #2e704c; }
.finance-transaction > strong.is-expense { color: #aa523f; }
.finance-organization-panel dl { display: grid; gap: 0; margin: 0 0 14px; }
.finance-organization-panel dl > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid rgba(54,82,68,.09); }
.finance-organization-panel dt { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.finance-organization-panel dd { margin: 0; font-size: 12.5px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.finance-organization-panel > a { color: var(--green-deep); font-size: 12px; font-weight: 800; }
.finance-security-note { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 14px; border-radius: 14px; color: #365447; background: #edf4ef; }
.finance-security-note b { font-size: 12.5px; }
.finance-security-note span { color: #577064; font-size: 11.5px; line-height: 1.5; }
.finance-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; min-width: 0; }
.finance-project-card {
display: flex;
flex-direction: column;
gap: 11px;
min-width: 0;
min-height: 166px;
padding: 16px;
border: 1px solid rgba(54,82,68,.12);
border-radius: 17px;
color: inherit;
background: #fbfaf6;
text-align: left;
cursor: pointer;
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.finance-project-card:hover { border-color: rgba(54,82,68,.3); box-shadow: 0 10px 25px rgba(43,66,58,.08); transform: translateY(-1px); }
.finance-project-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.finance-project-title > span { color: var(--coral-deep); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.finance-project-title > b { overflow: hidden; font-family: var(--display); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.finance-project-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.finance-project-values small { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 10.5px; }
.finance-project-values b { color: var(--ink); font-size: 11.5px; }
.finance-project-progress { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #e7e3d9; }
.finance-project-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4a7963, #df8065); }
.finance-project-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--muted); font-size: 10.5px; }
.finance-project-foot em { color: #8a5e1f; font-style: normal; font-weight: 800; text-align: right; }
.finance-project-foot em.is-clear { color: #47745e; }
.finance-project-table {
overflow: hidden;
border: 1px solid rgba(54,82,68,.12);
border-radius: 15px;
background: #fff;
}
.finance-project-table-head,
.finance-project-table-row {
display: grid;
grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(110px, .75fr)) minmax(130px, .85fr);
gap: 10px;
align-items: center;
min-width: 0;
}
.finance-project-table-head {
min-height: 42px;
padding: 0 14px;
color: var(--muted);
background: #f3f1ea;
font-size: 9.5px;
font-weight: 850;
letter-spacing: .035em;
text-transform: uppercase;
}
.finance-project-table-row {
width: 100%;
min-height: 66px;
padding: 10px 14px;
border: 0;
border-top: 1px solid rgba(54,82,68,.09);
color: var(--ink);
background: #fff;
font: inherit;
font-size: 11.5px;
text-align: left;
cursor: pointer;
}
.finance-project-table-row:hover { background: #fbfaf6; }
.finance-project-table-row > span { min-width: 0; overflow-wrap: anywhere; }
.finance-project-table-name { display: grid; gap: 2px; }
.finance-project-table-name small { overflow: hidden; color: var(--coral-deep); font-size: 9.5px; font-weight: 850; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.finance-project-table-name b { overflow: hidden; font-family: var(--display); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-project-table-row .is-expense { color: #aa523f; font-weight: 800; }
.finance-project-table-row em { display: inline-flex; width: fit-content; max-width: 100%; padding: 5px 8px; border-radius: 999px; font-size: 9.5px; font-style: normal; font-weight: 800; }
.finance-project-table-row em.is-clear { color: #2e704c; background: #e7f3eb; }
.finance-project-table-row em.is-attention { color: #805619; background: #fff0c9; }
.finance-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 110px; padding: 20px; border: 1px dashed rgba(54,82,68,.17); border-radius: 15px; color: var(--muted); background: rgba(247,244,236,.55); text-align: center; }
.finance-empty b { color: var(--ink); font-size: 13px; }
.finance-empty span { font-size: 11.5px; }
.finance-empty.is-success { border-color: rgba(55,128,83,.19); background: #f0f7f2; }
.finance-queue { display: grid; gap: 10px; }
.finance-queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; min-width: 0; padding: 16px; border: 1px solid rgba(54,82,68,.12); border-radius: 16px; background: #fbfaf6; }
.finance-queue-row.is-priority { border-color: rgba(190,132,42,.28); background: #fffbef; }
.finance-queue-main { min-width: 0; }
.finance-queue-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 10.5px; font-weight: 750; }
.finance-queue-kicker time { margin-left: auto; }
.finance-queue-main h3 { margin: 7px 0 3px; font-family: var(--display); font-size: 16px; }
.finance-queue-main p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.finance-queue-private { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 11px; padding: 9px 11px; border-radius: 10px; background: #f0ece4; }
.finance-queue-private span { color: var(--muted); font-size: 10.5px; font-weight: 750; }
.finance-queue-private b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.finance-queue-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; min-width: 158px; }
.finance-queue-actions > strong { margin-bottom: 3px; font-family: var(--display); font-size: 19px; text-align: right; }
.finance-queue-actions .btn { min-height: 40px; justify-content: center; white-space: nowrap; }
.finance-missing-receipt { color: #9a5443; font-size: 10.5px; text-align: right; }
.finance-workflow-list { display: grid; gap: 10px; }
.finance-workflow-row { display: grid; grid-template-columns: minmax(210px, .85fr) minmax(340px, 1.15fr) auto; gap: 16px; align-items: center; min-width: 0; padding: 15px 16px; border: 1px solid rgba(54,82,68,.12); border-radius: 15px; background: #fbfaf6; }
.finance-workflow-row.is-approval { grid-template-columns: minmax(0, 1fr) auto auto; border-color: rgba(190,132,42,.22); background: #fffbef; }
.finance-workflow-copy { min-width: 0; }
.finance-workflow-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.finance-workflow-copy small { color: var(--muted); font-size: 10.5px; }
.finance-workflow-copy h3 { margin: 7px 0 3px; overflow-wrap: anywhere; font-family: var(--display); font-size: 15px; }
.finance-workflow-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.finance-workflow-row > strong { font-family: var(--display); font-size: 18px; white-space: nowrap; }
.finance-bank-choice { min-width: 0; }
.finance-bank-candidates { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.finance-bank-candidates > legend { margin: 0 0 5px; padding: 0; color: var(--muted); font-size: 9.5px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.finance-bank-candidate {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 9px;
align-items: start;
min-width: 0;
padding: 10px 11px;
border: 1px solid rgba(54,82,68,.12);
border-radius: 12px;
background: rgba(255,255,255,.82);
color: var(--ink);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.finance-bank-candidate:hover { border-color: rgba(54,82,68,.28); background: #fff; transform: translateY(-1px); }
.finance-bank-candidate:has(input:focus-visible) { outline: 3px solid rgba(224,122,95,.18); outline-offset: 2px; }
.finance-bank-candidate.is-selected { border-color: rgba(47,107,72,.5); background: #f3f8f4; box-shadow: 0 0 0 3px rgba(47,107,72,.08); }
.finance-bank-candidate.is-low { border-color: rgba(184,69,48,.2); background: #fffaf8; }
.finance-bank-candidate.is-low.is-selected,
.finance-bank-candidate.is-medium.is-selected { border-color: rgba(190,132,42,.58); background: #fffaed; box-shadow: 0 0 0 3px rgba(190,132,42,.1); }
.finance-bank-candidate > input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--green-deep); }
.finance-bank-candidate > input:disabled { cursor: not-allowed; opacity: .55; }
.finance-bank-candidate:has(input:disabled) { cursor: not-allowed; opacity: .72; transform: none; }
.finance-bank-candidate-body { display: grid; gap: 3px; min-width: 0; }
.finance-bank-candidate-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.finance-bank-candidate-head b { font-family: var(--display); font-size: 14px; }
.finance-bank-candidate-head time { color: var(--muted); font-size: 9.5px; font-weight: 750; }
.finance-bank-candidate-head em { margin-left: auto; padding: 3px 6px; border-radius: 999px; color: #35664e; background: #e8f3eb; font-size: 8.5px; font-style: normal; font-weight: 850; white-space: nowrap; }
.finance-bank-candidate.is-medium .finance-bank-candidate-head em { color: #75531d; background: #fff0ce; }
.finance-bank-candidate.is-low .finance-bank-candidate-head em { color: #8f4637; background: #fbeae5; }
.finance-bank-candidate-body > strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-candidate-message { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 9.5px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.finance-bank-candidate-body > small { color: #496755; font-size: 9px; line-height: 1.4; }
.finance-bank-candidate.is-low .finance-bank-candidate-body > small { color: #8f4637; }
.finance-bank-candidate-more { min-width: 0; }
.finance-bank-candidate-more > summary { width: fit-content; padding: 4px 2px; color: var(--green-deep); font-size: 9.5px; font-weight: 800; cursor: pointer; }
.finance-bank-candidate-more[open] { display: grid; gap: 7px; }
.finance-bank-selection-status { display: block; margin-top: 7px; color: var(--muted); font-size: 9.5px; font-weight: 700; line-height: 1.4; }
.finance-bank-selection-status.is-warning { padding: 7px 9px; border-radius: 9px; color: #79551d; background: #fff0ce; }
.finance-workflow-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 148px; }
.finance-workflow-actions .btn { min-height: 40px; justify-content: center; white-space: nowrap; }
.finance-workflow-actions .btn:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.finance-bank-group-panel { display: grid; gap: 9px; margin-bottom: 14px; }
.finance-bank-group-suggestions { display: grid; gap: 9px; }
.finance-bank-group-suggestion {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 13px;
align-items: center;
padding: 15px 16px;
border: 1px solid rgba(47,107,72,.2);
border-radius: 16px;
background: #f2f7f2;
box-shadow: 0 8px 24px rgba(47,85,69,.045);
}
.finance-bank-group-suggestion-icon,
.finance-bank-group-intro > span {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 13px;
color: var(--green-deep);
background: #e2efe5;
}
.finance-bank-group-suggestion-icon svg,
.finance-bank-group-intro > span svg { width: 22px; height: 22px; }
.finance-bank-group-suggestion > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.finance-bank-group-suggestion h3 { margin: 0; font-family: var(--display); font-size: 19px; }
.finance-bank-group-suggestion p { margin: 0; color: #456251; font-size: 11px; font-weight: 750; }
.finance-bank-group-suggestion small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-group-suggestion .btn { min-height: 42px; white-space: nowrap; }
.finance-bank-group-manual {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 13px;
border: 1px dashed rgba(54,82,68,.17);
border-radius: 14px;
background: rgba(247,244,236,.48);
}
.finance-bank-group-manual > div { display: grid; gap: 2px; min-width: 0; }
.finance-bank-group-manual b { font-size: 11.5px; }
.finance-bank-group-manual span { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.finance-bank-candidate.is-group-reserved { border-color: rgba(47,107,72,.18); background: #f2f7f2; opacity: 1; }
.finance-bank-candidate.is-group-reserved .finance-bank-candidate-head em { color: #35664e; background: #dfeee3; }
.finance-bank-candidate.is-group-reserved .finance-bank-candidate-body > small { color: #496755; }
#modal-root .modal.finance-bank-group-modal {
width: min(920px, calc(100vw - 32px));
max-width: 920px;
max-height: min(92dvh, 920px);
}
.finance-bank-group-modal .modal-body { padding: 18px 20px 22px; }
.finance-bank-group-modal .modal-foot {
position: sticky;
z-index: 2;
bottom: 0;
gap: 8px;
border-top: 1px solid rgba(54,82,68,.1);
background: rgba(255,253,248,.97);
backdrop-filter: blur(8px);
}
.finance-bank-group-modal .modal-foot .btn:first-child { margin-left: auto; }
.finance-bank-group-modal form { display: grid; gap: 14px; min-width: 0; }
.finance-bank-group-intro {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 13px 14px;
border-radius: 15px;
background: #f1f6f1;
}
.finance-bank-group-intro > div { display: grid; gap: 3px; }
.finance-bank-group-intro b { font-family: var(--display); font-size: 14px; }
.finance-bank-group-intro p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.finance-bank-group-step {
display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: 10px;
min-width: 0;
padding: 13px;
border: 1px solid rgba(54,82,68,.11);
border-radius: 15px;
background: #fff;
}
.finance-bank-group-step > header { display: flex; align-items: center; gap: 9px; }
.finance-bank-group-step > header > span {
display: grid;
place-items: center;
flex: 0 0 27px;
width: 27px;
height: 27px;
border-radius: 50%;
color: #fff;
background: var(--green-deep);
font-size: 11px;
font-weight: 900;
}
.finance-bank-group-step > header > div { display: grid; gap: 1px; }
.finance-bank-group-step > header b { font-size: 12px; }
.finance-bank-group-step > header small { color: var(--muted); font-size: 9.5px; }
.finance-bank-group-transactions,
.finance-bank-group-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
min-width: 0;
max-height: 230px;
overflow: auto;
padding: 2px;
overscroll-behavior: contain;
}
.finance-bank-group-transaction,
.finance-bank-group-item {
display: grid;
gap: 4px;
min-width: 0;
padding: 10px 11px;
border: 1px solid rgba(54,82,68,.12);
border-radius: 12px;
color: var(--ink);
background: #fbfaf6;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.finance-bank-group-transaction { grid-template-columns: 19px minmax(0, 1fr); }
.finance-bank-group-transaction > input { grid-row: 1 / 4; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--green-deep); }
.finance-bank-group-transaction > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.finance-bank-group-transaction > span b { font-family: var(--display); font-size: 13px; }
.finance-bank-group-transaction time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.finance-bank-group-transaction > strong,
.finance-bank-group-transaction > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-group-transaction > strong { font-size: 10px; }
.finance-bank-group-transaction > small { color: var(--muted); font-size: 9px; }
.finance-bank-group-item { grid-template-columns: 19px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.finance-bank-group-item > input { width: 17px; height: 17px; margin: 0; accent-color: var(--green-deep); }
.finance-bank-group-item > span { display: grid; gap: 2px; min-width: 0; }
.finance-bank-group-item > span b { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-group-item > span small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-group-item > strong { font-family: var(--display); font-size: 11px; white-space: nowrap; }
.finance-bank-group-transaction:hover,
.finance-bank-group-item:hover { border-color: rgba(54,82,68,.28); background: #fff; }
.finance-bank-group-transaction.is-selected,
.finance-bank-group-item.is-selected { border-color: rgba(47,107,72,.5); background: #f1f7f2; box-shadow: 0 0 0 3px rgba(47,107,72,.07); }
.finance-bank-group-transaction:has(input:focus-visible),
.finance-bank-group-item:has(input:focus-visible) { outline: 3px solid rgba(224,122,95,.18); outline-offset: 1px; }
.finance-bank-group-item.is-unavailable { cursor: not-allowed; opacity: .43; }
.finance-bank-group-review { min-height: 88px; border-radius: 12px; background: #f7f5ef; }
.finance-bank-group-review-empty { display: grid; gap: 3px; place-content: center; min-height: 88px; padding: 14px; color: var(--muted); text-align: center; }
.finance-bank-group-review-empty b { color: var(--ink); font-size: 11px; }
.finance-bank-group-review-empty span { font-size: 10px; line-height: 1.45; }
.finance-bank-group-review.is-ready {
display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: 8px;
min-height: 0;
padding: 11px;
color: #315f47;
background: #edf6ef;
}
.finance-bank-group-review-head { display: flex; flex-wrap: wrap; gap: 8px; }
.finance-bank-group-review-head > div { display: grid; flex: 1 1 150px; gap: 2px; padding: 8px 9px; border-radius: 9px; background: rgba(255,255,255,.68); }
.finance-bank-group-review-head span { color: #557363; font-size: 8.5px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.finance-bank-group-review-head b { font-family: var(--display); font-size: 12px; }
.finance-bank-group-allocation { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(47,107,72,.1); border-radius: 9px; }
.finance-bank-group-allocation > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; background: rgba(255,255,255,.68); }
.finance-bank-group-allocation span { display: grid; gap: 1px; min-width: 0; }
.finance-bank-group-allocation b { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-group-allocation small { overflow: hidden; color: #668071; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-bank-group-allocation strong { font-family: var(--display); font-size: 10.5px; white-space: nowrap; }
.finance-bank-group-review > p { margin: 0 2px; color: #557363; font-size: 9px; line-height: 1.4; }
.finance-bank-group-reason { display: grid; gap: 5px; color: var(--ink); font-size: 10.5px; font-weight: 800; }
.finance-bank-group-reason textarea { min-height: 72px; resize: vertical; }
.finance-bank-group-reason small { color: var(--muted); font-size: 9px; font-weight: 500; }
.finance-bank-group-check {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 12px;
border: 1px solid rgba(54,82,68,.12);
border-radius: 12px;
background: #fbfaf6;
font-size: 10.5px;
line-height: 1.45;
cursor: pointer;
}
.finance-bank-group-check input {
flex: 0 0 17px;
width: 17px !important;
min-width: 17px !important;
height: 17px;
margin: 0;
padding: 0;
accent-color: var(--green-deep);
}
.finance-bank-group-readiness {
min-height: 18px;
margin-top: -6px;
padding-inline: 2px;
color: #8a624f;
font-size: 9.5px;
font-weight: 700;
line-height: 1.45;
}
.finance-bank-group-readiness.is-ready { color: #35664e; }
.finance-bank-group-modal [data-finance-bank-group-submit][data-ready="0"] {
box-shadow: none;
filter: saturate(.72);
}
.finance-bank-group-modal [data-finance-bank-group-submit][aria-busy="true"] {
cursor: wait;
}
.finance-bank-group-check span {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.finance-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.finance-document-card { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 3px 11px; align-items: center; min-width: 0; min-height: 94px; padding: 14px; border: 1px solid rgba(54,82,68,.12); border-radius: 13px; color: inherit; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.finance-document-card:hover { border-color: rgba(54,82,68,.28); background: #fbfaf6; }
.finance-document-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; color: var(--green-deep); background: #eef3ef; }
.finance-document-card svg { width: 21px; height: 21px; }
.finance-document-card > b { overflow: hidden; font-family: var(--display); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.finance-document-card mark { display: inline-flex; margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: #6f5523; background: #fff0ce; font: 750 9px/1.2 var(--sans); vertical-align: 2px; }
.finance-document-card > small { overflow: hidden; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.finance-document-card > em { grid-column: 3; grid-row: 1 / 3; color: var(--green-deep); font-size: 11px; font-style: normal; font-weight: 850; }
.finance-document-card.is-historical { border-style: dashed; background: #faf9f4; }
.finance-document-card.is-historical > span { color: #6c5d3b; background: #f1ecdf; }
.finance-identity-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; margin-top: 13px; padding: 13px 15px; border-radius: 14px; background: #edf4ef; }
.finance-identity-strip > span { grid-row: 1 / 3; color: #587266; font-size: 10.5px; font-weight: 850; text-transform: uppercase; }
.finance-identity-strip > b { font-size: 12.5px; }
.finance-identity-strip > small { color: #587266; font-size: 10.5px; overflow-wrap: anywhere; }
.finance-legal-note { margin: 12px 2px 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.finance-document-list { display: grid; gap: 4px; }
.finance-document-toolbar {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(150px, auto) auto;
gap: 9px;
align-items: end;
margin-bottom: 14px;
padding: 12px;
border: 1px solid rgba(54,82,68,.1);
border-radius: 13px;
background: #f8f6f0;
}
.finance-document-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.finance-document-toolbar input,
.finance-document-toolbar select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 11.5px; }
.finance-document-toolbar > span { align-self: center; color: var(--muted); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.finance-document-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-width: 0; padding: 11px 5px; border-top: 1px solid rgba(54,82,68,.09); }
.finance-document-row:first-child { border-top: 0; }
.finance-document-file { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--green-deep); background: #edf4ef; }
.finance-document-file svg { width: 18px; height: 18px; }
.finance-document-row > div { display: flex; flex-direction: column; min-width: 0; }
.finance-document-row > div b { font-family: var(--display); font-size: 13.5px; }
.finance-document-row > div span,
.finance-document-row > div small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-document-row .btn { min-height: 38px; }
.finance-document-row > .finance-document-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 7px; }
.finance-document-actions .btn { padding-inline: 12px; }
.finance-document-menu { position: relative; }
.finance-document-menu > summary { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--green-deep); background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.finance-document-menu > summary::-webkit-details-marker { display: none; }
.finance-document-menu[open] > summary { border-color: rgba(224,122,95,.42); box-shadow: 0 0 0 3px rgba(224,122,95,.1); }
.finance-document-menu > div { position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; display: grid; gap: 5px; min-width: 170px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; box-shadow: 0 15px 35px rgba(34,48,42,.17); }
.finance-document-menu > div .btn { width: 100%; justify-content: flex-start; }
.finance-document-row > div > .finance-document-workflow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; overflow: visible; white-space: normal; }
.finance-document-workflow em { padding: 3px 7px; border-radius: 999px; color: #3f6f58; background: #e9f3ec; font-size: 9.5px; font-style: normal; font-weight: 800; }
.finance-document-workflow em.is-waiting { color: #805f25; background: #fff0ce; }
.finance-document-workflow em.is-matched { color: #2e704c; background: #e4f3e9; }
.finance-lifecycle { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; }
.finance-lifecycle li { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; color: #858c87; font-size: 8.5px; font-weight: 750; text-align: center; }
.finance-lifecycle li::before { content: ""; position: absolute; z-index: 0; top: 5px; right: 50%; left: -50%; height: 1px; background: #d9ddd9; }
.finance-lifecycle li:first-child::before { display: none; }
.finance-lifecycle i { position: relative; z-index: 1; width: 11px; height: 11px; border: 2px solid #c8cec9; border-radius: 50%; background: #fff; }
.finance-lifecycle .is-done { color: #35664e; }
.finance-lifecycle .is-done::before { background: #75a189; }
.finance-lifecycle .is-done i { border-color: #3f7b5d; background: #3f7b5d; }
.finance-lifecycle .is-active { color: #7a5a20; }
.finance-lifecycle .is-active i { border-color: #b8842f; box-shadow: 0 0 0 3px #fff0ce; }
.finance-lifecycle .is-problem { color: #9a493d; }
.finance-lifecycle .is-problem i { border-color: #b85c4d; background: #fff0ed; }
.finance-review-note { grid-column: 2 / -1; margin: 4px 0 0; padding: 8px 10px; border-left: 3px solid #b85c4d; border-radius: 6px; color: #633b34; background: #fff5f2; font-size: 11px; line-height: 1.45; }
.finance-review-actions { display: grid; gap: 6px; }
.finance-match-reasons { color: #496755 !important; }
.finance-revision-banner { margin-top: 2px; padding: 11px 13px; border-left: 4px solid #b85c4d; border-radius: 8px; background: #fff5f2; }
.finance-revision-banner b { font-family: var(--display); }
.finance-revision-banner p { margin: 3px 0 0; color: #70483f; font-size: 12px; line-height: 1.45; }
.finance-form-status.is-saved { color: #35664e; }
.finance-history-search { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(240px, 1.35fr) auto; gap: 10px; align-items: end; }
.finance-history-search > .btn { align-self: end; justify-self: start; width: auto; min-height: 42px; height: 42px; padding: 0 14px; border-radius: 10px; white-space: nowrap; box-shadow: none; }
.finance-history-search label small { color: var(--muted); font-size: 9.5px; font-weight: 600; line-height: 1.4; }
.finance-history-invoice { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 8px 12px; border: 1px solid rgba(54,82,68,.12); border-radius: 10px; background: #f5f8f5; }
.finance-history-invoice > span { color: #5b7166; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.finance-history-invoice > b { font-family: var(--display); font-size: 17px; }
.finance-history-invoice > small { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.finance-history-results { display: grid; gap: 10px; min-height: 68px; padding: 12px; border: 1px solid rgba(54,82,68,.13); border-radius: 11px; background: #f7f7f3; }
.finance-history-results > small,
.finance-history-file > small { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.finance-history-loading { align-self: center; color: #557065; font-size: 11.5px; }
.finance-history-empty { display: grid; gap: 4px; align-content: center; color: #715c31; }
.finance-history-empty b { font-family: var(--display); font-size: 13px; }
.finance-history-empty span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.finance-history-empty.is-error { color: #8f4637; }
.finance-history-results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.finance-history-results-head > div { display: grid; gap: 2px; }
.finance-history-results-head b { font-family: var(--display); font-size: 13px; }
.finance-history-results-head span,
.finance-history-results-head > small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.finance-history-results-head > small { white-space: nowrap; }
.finance-history-candidates { display: grid; gap: 7px; }
.finance-history-candidate { position: relative; display: grid !important; gap: 5px !important; padding: 11px 12px 11px 39px; border: 1px solid rgba(54,82,68,.13); border-radius: 11px; color: var(--ink) !important; background: #fff; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.finance-history-candidate:hover { border-color: rgba(54,82,68,.3); }
.finance-history-candidate.is-selected { border-color: #557b68; background: #f2f7f3; box-shadow: 0 0 0 3px rgba(85,123,104,.09); }
.finance-document-form .finance-history-candidate > input[type="radio"] { position: absolute; top: 16px; left: 13px; width: 17px; min-width: 17px; max-width: 17px; height: 17px; min-height: 17px; max-height: 17px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; accent-color: var(--green-deep); }
.finance-history-candidate-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.finance-history-candidate-main > span { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.finance-history-candidate-main b { font-family: var(--display); font-size: 13px; }
.finance-history-candidate-main em { padding: 3px 6px; border-radius: 999px; color: #5c7166; background: #edf2ee; font-size: 8.5px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.finance-history-candidate-main em.is-best { color: #765821; background: #fff0ce; }
.finance-history-candidate-main strong { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.finance-history-candidate-copy { overflow: hidden; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.finance-history-candidate-message { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: start; padding: 7px 8px; border-radius: 7px; color: #425b4f; background: #f4f6f3; font-size: 9.5px; line-height: 1.4; }
.finance-history-candidate-message b { color: #6a786f; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.finance-history-candidate-message span { overflow-wrap: anywhere; }
.finance-history-candidate > small { color: #557065; font-size: 9.5px; font-weight: 650; line-height: 1.4; }
.finance-history-rate-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border-left: 3px solid #557b68; border-radius: 5px 10px 10px 5px; color: #42604f; background: #eaf2ec; }
.finance-history-rate-note[hidden] { display: none !important; }
.finance-history-rate-note b { font-family: var(--display); font-size: 12px; }
.finance-history-rate-note span { font-size: 10px; line-height: 1.4; text-align: right; }
.finance-history-file { background: #faf9f5; }
.finance-history-file input[type="file"] { padding: 7px; }
.finance-history-assurance { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 12px 13px; border-left: 3px solid #5c806e; border-radius: 5px 11px 11px 5px; background: #edf4ef; }
.finance-history-assurance b { width: 100%; font-family: var(--display); font-size: 13px; }
.finance-history-assurance span { padding: 4px 8px; border-radius: 999px; color: #456454; background: #fff; font-size: 10px; font-weight: 800; }
.finance-close-list { display: grid; gap: 8px; }
.finance-close-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 13px; border: 1px solid rgba(54,82,68,.11); border-radius: 12px; background: #fbfaf6; }
.finance-close-row > div { display: grid; gap: 3px; min-width: 0; }
.finance-close-row b { font-family: var(--display); font-size: 14px; }
.finance-close-row span { color: var(--muted); font-size: 10.5px; overflow-wrap: anywhere; }
.finance-close-state { display: grid; justify-items: end; gap: 4px; max-width: 280px; }
.finance-close-state small { color: var(--muted); font-size: 10px; line-height: 1.35; text-align: right; overflow-wrap: anywhere; }
.finance-close-reopen { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.finance-close-reopen summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 800; }
.finance-close-reopen p { color: var(--muted); font-size: 11px; }
.finance-close-reopen .btn { margin: 4px 5px 0 0; }
.finance-reason-host .overlay { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(34,48,42,.5); backdrop-filter: blur(2px); }
.finance-reason-modal { width: min(480px, 100%); }
.finance-reason-modal .modal-body { display: grid; gap: 12px; }
.finance-reason-modal .modal-body p { margin: 0; color: var(--muted); line-height: 1.5; }
.finance-reason-modal label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.finance-reason-modal textarea { min-height: 110px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; font: inherit; }
.finance-impact-host .overlay { position: fixed; inset: 0; z-index: 212; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(30,45,38,.58); backdrop-filter: blur(4px); }
.finance-impact-modal { width: min(760px, 100%); max-height: min(88vh, 820px); overflow: hidden; border-radius: 22px; }
.finance-impact-modal .modal-head { padding: 19px 22px 15px; border-bottom: 1px solid rgba(54,82,68,.1); background: linear-gradient(135deg, rgba(237,244,238,.96), rgba(255,252,246,.98)); }
.finance-impact-modal .modal-head h3 { margin: 3px 0 0; font-family: var(--display); font-size: 23px; }
.finance-impact-modal .modal-body { display: grid; gap: 15px; padding: 18px 22px; overflow-y: auto; background: #fffdf8; }
.finance-impact-count { display: flex; align-items: baseline; gap: 10px; padding: 13px 15px; border: 1px solid rgba(54,82,68,.12); border-radius: 15px; background: rgba(230,239,232,.72); }
.finance-impact-count b { color: var(--green-deep); font-family: var(--display); font-size: 27px; line-height: 1; }
.finance-impact-count span { color: #52675c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.finance-impact-section,
.finance-impact-columns > section { display: grid; gap: 8px; }
.finance-impact-section h4,
.finance-impact-columns h4 { margin: 0; color: var(--green-deep); font-family: var(--display); font-size: 15px; }
.finance-impact-targets { max-height: 190px; overflow-y: auto; margin: 0; padding: 0; border: 1px solid rgba(54,82,68,.11); border-radius: 14px; background: rgba(255,255,255,.84); list-style: none; }
.finance-impact-targets li { display: grid; gap: 2px; padding: 9px 12px; border-bottom: 1px solid rgba(54,82,68,.08); }
.finance-impact-targets li:last-child { border-bottom: 0; }
.finance-impact-targets span { color: var(--ink); font-size: 12.5px; font-weight: 800; overflow-wrap: anywhere; }
.finance-impact-targets small { color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.finance-impact-more { margin: 0; color: var(--muted); font-size: 11px; }
.finance-impact-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.finance-impact-columns > section { align-content: start; padding: 13px 14px; border: 1px solid rgba(54,82,68,.1); border-radius: 14px; background: #faf8f2; }
.finance-impact-columns > section:first-child { background: rgba(252,238,232,.58); }
.finance-impact-columns ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #55655d; font-size: 11.5px; line-height: 1.45; }
.finance-impact-reason { display: grid; gap: 6px; color: var(--green-deep); font-size: 12px; font-weight: 800; }
.finance-impact-reason textarea { min-height: 88px; padding: 10px 11px; border: 1px solid rgba(54,82,68,.22); border-radius: 12px; resize: vertical; background: #fff; color: var(--ink); font: inherit; font-weight: 500; }
.finance-impact-reason textarea:focus { outline: 3px solid rgba(217,121,92,.14); border-color: var(--coral); }
.finance-impact-reason small { color: var(--muted); font-size: 10.5px; font-weight: 500; }
.finance-impact-check { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 12px; background: rgba(54,82,68,.055); color: #526359; font-size: 11.5px; font-weight: 700; line-height: 1.45; }
.finance-impact-check input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--green-deep); }
.finance-impact-modal .modal-foot { padding: 13px 22px 16px; border-top: 1px solid rgba(54,82,68,.1); background: #fffdf8; }
.project-grant-fields [hidden] { display: none !important; }
.finance-delete-btn { border-color: rgba(154,84,67,.2); color: #875547; background: #fff; }
.finance-delete-btn:hover { border-color: rgba(154,84,67,.38); background: #fbf1ee; }
.finance-member-note { display: flex; align-items: flex-start; gap: 14px; padding: 18px 21px; background: #f5f2ea; }
.finance-member-note > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; color: var(--green-deep); background: #e3ece6; }
.finance-member-note svg { width: 20px; height: 20px; }
.finance-member-note b { font-family: var(--display); font-size: 15px; }
.finance-member-note p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#modal-root .modal.finance-document-modal { width: min(800px, calc(100vw - 30px)); max-width: 800px; max-height: min(92vh, 920px); }
.finance-document-modal .modal-body { padding: 0; }
.finance-document-form { display: grid; gap: 14px; padding: 0 20px; }
.finance-modal-head { position: sticky; z-index: 3; top: 0; display: grid; gap: 12px; margin: 0 -20px; padding: 16px 20px 13px; border-bottom: 1px solid rgba(54,82,68,.1); background: rgba(255,253,248,.97); backdrop-filter: blur(9px); }
.finance-modal-intro { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid rgba(54,82,68,.12); border-radius: 12px; color: var(--ink); background: #f6f5f0; }
.finance-modal-intro > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; color: var(--green-deep); background: #e7eee9; }
.finance-modal-intro svg { width: 18px; height: 18px; }
.finance-modal-intro b { font-family: var(--display); font-size: 14px; }
.finance-modal-intro p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.finance-stepper { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.finance-stepper.has-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.finance-stepper li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border-radius: 9px; color: #7a827d; font-size: 10.5px; font-weight: 800; }
.finance-stepper li span { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid rgba(54,82,68,.16); border-radius: 50%; background: #fff; font-size: 10px; }
.finance-stepper li.is-active { color: var(--green-deep); background: #eaf1ec; }
.finance-stepper li.is-active span { border-color: var(--green-deep); color: #fff; background: var(--green-deep); }
.finance-stepper li.is-done { color: #557065; }
.finance-stepper li.is-done span { color: var(--green-deep); background: #dfeae3; }
.finance-document-step { display: grid; gap: 13px; padding: 3px 0 5px; }
.finance-document-step[hidden] { display: none !important; }
.finance-document-step > h3 { margin: 2px 0 -9px; color: var(--ink); font-family: var(--display); font-size: 19px; }
.finance-step-lead { margin: 0 0 2px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.finance-locked-party { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-left: 3px solid rgba(54,82,68,.28); border-radius: 4px 10px 10px 4px; background: #f3f7f4; }
.finance-locked-party > span { color: #5a7568; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.finance-locked-party > b { font-size: 12.5px; }
.finance-locked-party > small { color: #5a7568; font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
.finance-form-fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 1px solid rgba(54,82,68,.12); border-radius: 12px; background: #fff; }
.finance-form-fieldset legend { padding: 0 7px; color: var(--green-deep); font-family: var(--display); font-size: 13px; font-weight: 850; }
.finance-project-link { border-color: rgba(54,82,68,.2); background: #f4f8f5; }
.finance-project-link > p { margin: -3px 0 0; color: #577064; font-size: 10.5px; line-height: 1.5; }
.finance-saved-profile { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid rgba(54,82,68,.17); border-radius: 10px; background: #fbfcfa; }
.finance-saved-profile > div { min-width: 0; }
.finance-saved-profile span { display: block; color: #5a7568; font-size: 9.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.finance-saved-profile p { margin: 3px 0 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.finance-saved-profile .btn { flex: 0 0 auto; min-height: 36px; }
.finance-party-chooser { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.85fr) auto; align-items: end; gap: 11px; padding: 13px; border: 1px solid rgba(54,82,68,.16); border-radius: 12px; background: #f5f8f5; }
.finance-party-chooser > div:first-child { align-self: center; }
.finance-party-chooser b { font-family: var(--display); font-size: 13px; }
.finance-party-chooser p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.finance-party-chooser .btn { min-height: 42px; white-space: nowrap; }
.finance-party-note { grid-column: 1 / -1; min-height: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.finance-party-note:not(:empty) { padding: 9px 10px; border-radius: 9px; background: #fff; }
.finance-party-note.is-shared { color: #35664c; background: #e7f2e9; }
.finance-party-note.is-manual { color: #715c31; background: #fff3d7; }
.finance-party-note.is-error { color: #8f4637; background: #fbeae5; }
.profile-document-share { margin-top: 8px; padding: 12px; border: 1px solid rgba(54,82,68,.14); border-radius: 11px; background: #f4f7f4; }
.finance-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; min-width: 0; }
.finance-form-grid .span-2 { grid-column: 1 / -1; }
.finance-document-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: 10.5px; font-weight: 800; }
.finance-document-form input,
.finance-document-form select,
.finance-document-form textarea { width: 100%; min-width: 0; min-height: 42px; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 13px; font-weight: 500; }
.finance-document-form textarea { min-height: 78px; resize: vertical; line-height: 1.45; }
.finance-document-form input:focus,
.finance-document-form select:focus,
.finance-document-form textarea:focus { outline: 3px solid rgba(223,121,94,.13); border-color: var(--coral); }
.finance-form-wide { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.finance-form-more { min-width: 0; border: 1px solid rgba(54,82,68,.11); border-radius: 10px; background: #f8f7f2; }
.finance-form-more > summary { min-height: 40px; box-sizing: border-box; padding: 11px 13px; color: #4f685d; font-size: 11px; font-weight: 850; cursor: pointer; }
.finance-form-more[open] > summary { border-bottom: 1px solid rgba(54,82,68,.1); }
.finance-form-more-body { display: grid; gap: 12px; padding: 13px; }
.finance-signing-fields { display: grid; gap: 8px; padding-top: 3px; }
.finance-signing-fields > span { color: var(--green-deep); font-size: 10.5px; font-weight: 850; }
.finance-print-note { margin: -3px 2px 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.finance-field-hint { color: var(--muted); font-size: 9.5px; font-weight: 500; line-height: 1.35; }
.finance-invoice-number { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 14px; padding: 11px 13px; border: 1px solid rgba(54,82,68,.15); border-radius: 10px; background: #f4f8f5; }
.finance-invoice-number span { color: #5a7568; font-size: 9.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.finance-invoice-number b { grid-row: span 2; color: var(--green-deep); font-family: var(--display); font-size: 18px; letter-spacing: .03em; }
.finance-invoice-number small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.finance-preview-step { min-height: 520px; }
.finance-pdf-preview { overflow: hidden; min-height: 500px; border: 1px solid rgba(54,82,68,.16); border-radius: 12px; background: #edf0ed; }
.finance-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-bottom: 1px solid rgba(54,82,68,.13); background: #fff; }
.finance-preview-toolbar > div { display: flex; align-items: baseline; gap: 8px; }
.finance-preview-toolbar span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.finance-preview-toolbar b { font-family: var(--display); font-size: 14px; }
.finance-preview-toolbar .btn { min-height: 34px; padding: 7px 11px; font-size: 10.5px; }
.finance-pdf-frame { display: block; width: 100%; height: min(61vh, 650px); border: 0; background: #e8eae8; }
.finance-preview-loading,
.finance-preview-error { display: flex; min-height: 500px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 24px; box-sizing: border-box; color: var(--muted); text-align: center; }
.finance-preview-error { color: #8f4637; background: #fbeae5; }
.finance-preview-error span { max-width: 500px; font-size: 11px; line-height: 1.5; }
.finance-check-row { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; color: var(--ink) !important; line-height: 1.45; }
.finance-check-row input { width: 18px; min-height: 18px; flex: 0 0 18px; margin: 1px 0 0; }
.finance-adult-confirm { padding: 12px 13px; border: 1px solid rgba(54,82,68,.15); border-radius: 11px; background: #f6f7f3; }
.finance-invoice-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(88px, .6fr) minmax(80px, .55fr) minmax(125px, .85fr) 40px; gap: 8px; align-items: end; min-width: 0; padding: 10px 0; border-top: 1px solid rgba(54,82,68,.09); }
.finance-invoice-row:first-child { padding-top: 0; border-top: 0; }
.finance-row-remove { display: grid; place-items: center; width: 40px; height: 42px; border: 1px solid rgba(54,82,68,.14); border-radius: 10px; color: #6c625b; background: #f5f3ef; font-size: 21px; cursor: pointer; }
.finance-items-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; }
.finance-items-foot > div { display: flex; flex-direction: column; align-items: flex-end; }
.finance-items-foot > div span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.finance-items-foot > div b { font-family: var(--display); font-size: 20px; }
.finance-form-status { min-height: 20px; padding: 0 2px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.finance-form-status.is-pending { color: #566f63; }
.finance-form-status.is-error { padding: 10px 12px; border-radius: 10px; color: #8f4637; background: #fbeae5; }
.finance-modal-foot { position: sticky; z-index: 4; bottom: 0; display: flex; align-items: center; gap: 8px; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--line); background: rgba(255,253,248,.97); backdrop-filter: blur(8px); }
.finance-modal-foot > span { flex: 1 1 auto; }
.finance-modal-foot [hidden] { display: none !important; }
.finance-modal-foot .btn { min-height: 44px; }
.finance-project-card:focus-visible,
.finance-document-card:focus-visible,
.finance-row-remove:focus-visible { outline: 3px solid rgba(223,121,94,.28); outline-offset: 2px; }
@media (max-width: 1240px) {
.section-hero { grid-template-columns: 1fr; gap: 17px; }
.section-hero-actions { flex-wrap: wrap; }
.finance-balance-block { grid-column: auto; width: 100%; box-sizing: border-box; }
}
@media (max-width: 1050px) {
.finance-overview-grid { grid-template-columns: 1fr; }
.finance-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-overview-lower { grid-template-columns: 1fr; }
.finance-metrics.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-project-grid,
.finance-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-workflow-row { grid-template-columns: minmax(0,1fr) minmax(240px,.8fr); }
.finance-workflow-row > .finance-workflow-actions { grid-column: 2; }
.finance-document-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .6fr)); }
.finance-document-toolbar > span { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.section-hero { grid-template-columns: 1fr; gap: 17px; border-radius: 20px; }
.finance-help-button { top: 17px; right: 17px; bottom: auto; }
.section-hero-copy { padding-right: 38px; }
.section-hero-actions { flex-wrap: wrap; }
.section-hero-actions .btn { flex: 1 1 150px; }
.finance-balance-block { grid-column: auto; width: 100%; box-sizing: border-box; }
.finance-workspace-tabs { top: 4px; margin-inline: -2px; border-radius: 13px; }
.finance-workspace-tabs button { flex: 0 0 auto; padding-inline: 13px; }
.finance-project-grid,
.finance-document-grid { grid-template-columns: 1fr; }
.finance-metrics.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-queue-row { grid-template-columns: 1fr; }
.finance-workflow-row,
.finance-workflow-row.is-approval { grid-template-columns: 1fr; }
.finance-workflow-row > .finance-workflow-actions { grid-column: auto; flex-direction: row; flex-wrap: wrap; }
.finance-workflow-actions > * { flex: 1 1 150px; }
.finance-queue-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; }
.finance-queue-actions > strong { grid-column: 1 / -1; text-align: left; }
.finance-missing-receipt { align-self: center; text-align: left; }
.finance-invoice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px 0; }
.finance-invoice-row .finance-item-description { grid-column: 1 / -1; }
.finance-row-remove { grid-column: 2; justify-self: end; }
.finance-party-chooser { grid-template-columns: 1fr; align-items: stretch; }
.finance-party-note { grid-column: auto; }
.finance-history-search { grid-template-columns: 1fr; align-items: stretch; }
.finance-history-search > .btn { justify-self: start; }
.finance-document-toolbar { grid-template-columns: 1fr 1fr; }
.finance-document-search { grid-column: 1 / -1; }
.finance-project-table { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.finance-project-table-head { display: none; }
.finance-project-table-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 14px;
min-height: 0;
margin-bottom: 9px;
padding: 14px;
border: 1px solid rgba(54,82,68,.12);
border-radius: 14px;
}
.finance-project-table-name { grid-column: 1 / -1; padding-bottom: 5px; border-bottom: 1px solid rgba(54,82,68,.08); }
.finance-project-table-row > span:not(.finance-project-table-name)::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
color: var(--muted);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}
.finance-help-sections { grid-template-columns: 1fr; }
.finance-bank-group-suggestion { grid-template-columns: 38px minmax(0, 1fr); padding: 13px; }
.finance-bank-group-suggestion-icon { width: 38px; height: 38px; }
.finance-bank-group-suggestion .btn { grid-column: 1 / -1; width: 100%; }
.finance-bank-group-manual { align-items: stretch; flex-direction: column; }
.finance-bank-group-manual .btn { width: 100%; }
.finance-bank-group-modal { width: min(100%, calc(100vw - 18px)); max-height: calc(100dvh - 18px); }
.finance-bank-group-modal .modal-body { padding: 14px; }
.finance-bank-group-transactions,
.finance-bank-group-items { grid-template-columns: 1fr; max-height: 260px; }
.finance-bank-group-modal .modal-foot { display: grid; grid-template-columns: 1fr 1fr; padding-inline: 14px; }
.finance-bank-group-modal .modal-foot .btn:first-child { margin-left: 0; }
}
@media (max-width: 520px) {
.view-finance > .card { margin-inline: -4px; }
.section-hero,
.finance-section,
.finance-member-note { border-radius: 18px; }
.section-hero-copy { gap: 11px; }
.finance-help-modal {
width: 100%;
max-height: calc(100dvh - 18px - env(safe-area-inset-top, 0px)) !important;
}
.finance-bank-group-intro { grid-template-columns: 36px minmax(0, 1fr); padding: 11px; }
.finance-bank-group-intro > span { width: 36px; height: 36px; border-radius: 11px; }
.finance-bank-group-step { padding: 11px; }
.finance-bank-group-modal .modal-foot { grid-template-columns: 1fr; }
.finance-help-modal .modal-head { padding-inline: 18px; }
.finance-help-modal .modal-body { gap: 18px; padding: 3px 18px 20px; }
.finance-help-modal .modal-foot { padding-inline: 18px; }
.finance-help-flow > div { column-gap: 10px; padding-bottom: 17px; }
.finance-help-sections section { padding: 14px; }
.finance-home-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
.section-hero-copy h1 { font-size: 26px; }
.finance-section { padding: 17px 14px; }
.finance-section-head { flex-direction: column; gap: 9px; }
.finance-metrics,
.finance-metrics.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-overview-summary { grid-template-columns: 1fr 1fr; }
.finance-attention-row { grid-template-columns: 38px minmax(0, 1fr); }
.finance-attention-row .btn { grid-column: 2; justify-self: start; }
.finance-transaction { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.finance-transaction-date { grid-column: 1 / -1; flex-direction: row; gap: 7px; }
.finance-transaction-copy > b { white-space: normal; }
.finance-project-values { grid-template-columns: 1fr; }
.finance-project-foot { flex-direction: column; }
.finance-project-foot em { text-align: left; }
.finance-queue-actions { grid-template-columns: 1fr; }
.finance-queue-actions > strong { grid-column: auto; }
.finance-document-card { grid-template-columns: 40px minmax(0,1fr); }
.finance-document-card > em { grid-column: 2; grid-row: auto; }
.finance-identity-strip { grid-template-columns: 1fr; }
.finance-identity-strip > span { grid-row: auto; }
.finance-document-row { grid-template-columns: 36px minmax(0,1fr); }
.finance-document-row > .btn,
.finance-document-row > .finance-document-actions,
.finance-document-row > .finance-badge { grid-column: 2; justify-self: start; }
.finance-document-row > .finance-document-actions { flex-wrap: wrap; justify-content: flex-start; }
.finance-document-toolbar { grid-template-columns: 1fr; }
.finance-document-search { grid-column: auto; }
.finance-document-menu > div { right: auto; left: 0; }
.finance-review-note { grid-column: 2; }
.finance-close-row { grid-template-columns: 1fr; }
.finance-close-state { justify-items: start; max-width: none; }
.finance-close-state small { text-align: left; }
#modal-root .modal.finance-document-modal { width: 100%; max-height: 94vh; }
.finance-document-form { padding: 0 13px; }
.finance-modal-head { margin-inline: -13px; padding: 13px; }
.finance-modal-intro { display: none; }
.finance-stepper li { justify-content: center; padding-inline: 5px; font-size: 9.5px; }
.finance-stepper.has-four li { gap: 4px; padding-inline: 3px; font-size: 8.5px; }
.finance-stepper li span { width: 20px; height: 20px; flex-basis: 20px; }
.finance-form-grid { grid-template-columns: 1fr; }
.finance-form-grid .span-2 { grid-column: auto; }
.finance-invoice-row { grid-template-columns: 1fr 1fr; }
.finance-invoice-number { grid-template-columns: 1fr; }
.finance-invoice-number b { grid-row: auto; }
.finance-pdf-frame { height: 58vh; }
.finance-modal-foot { margin-inline: -13px; padding-inline: 13px; }
.finance-history-results-head,
.finance-history-rate-note { align-items: flex-start; flex-direction: column; }
.finance-history-rate-note span { text-align: left; }
.finance-history-candidate-copy { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.finance-project-card,
.finance-document-card { transition: none; }
.finance-project-card:hover,
.finance-document-card:hover { transform: none; }
}
.project-chat-shortcut {
border-color: rgba(56, 85, 74, .22) !important;
background: rgba(169, 184, 164, .13) !important;
color: var(--green) !important;
}
.project-chat-shortcut svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
}
.project-chat-shortcut:hover {
border-color: rgba(56, 85, 74, .38) !important;
background: rgba(169, 184, 164, .23) !important;
}
.project-hero-actions .btn { min-height: 44px; }
.project-memory-board {
overflow: hidden;
border: 1px solid var(--look-line);
border-radius: var(--look-radius);
background:
radial-gradient(520px 260px at 102% -20%, rgba(169, 184, 164, .12), transparent 64%),
rgba(255, 253, 248, .88);
box-shadow: var(--look-shadow);
}
.project-memory-board > .meeting-card {
margin: 0 !important;
padding: 20px 22px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.project-memory-board > .meeting-card + .meeting-card {
border-top: 1px solid var(--look-line-soft) !important;
}
.project-memory-board .linked-decisions-head {
align-items: center;
gap: 20px;
}
.project-memory-board .linked-decisions-head h3 {
margin: 4px 0 3px;
font-family: var(--display);
font-size: 19px;
letter-spacing: -.01em;
}
.project-memory-board .linked-decisions-head p {
max-width: 610px;
font-size: 12.5px;
line-height: 1.45;
}
.project-memory-board .linked-decisions-actions {
flex: 0 0 auto;
}
.project-memory-board .linked-decisions-list {
gap: 9px;
margin-top: 15px;
}
.project-memory-board .decision-card,
.project-memory-board .obligation-card,
.project-memory-board .assurance-card {
border-color: var(--look-line-soft);
border-radius: 14px;
background: rgba(255, 255, 255, .76);
box-shadow: none;
}
.project-records-notes-grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: 14px;
align-items: stretch;
margin-top: 14px;
}
.project-records-notes-grid > .card {
min-width: 0;
padding: 20px !important;
border-radius: var(--look-radius) !important;
border-color: var(--look-line) !important;
background: rgba(255, 253, 248, .82);
box-shadow: var(--look-shadow) !important;
}
.project-records-notes-grid .panel-title {
font-family: var(--display);
font-size: 18px;
letter-spacing: -.01em;
}
.project-records-notes-grid .panel-note {
margin: 4px 0 14px;
line-height: 1.45;
}
.project-meeting-notes-list {
overflow: hidden;
border: 1px solid var(--look-line-soft);
border-radius: 14px;
background: rgba(255, 255, 255, .64);
}
.project-meeting-notes-list > .empty-mini {
margin: 0;
padding: 18px;
}
.project-meeting-note-row {
padding: 12px 13px;
}
.project-meeting-note-row + .project-meeting-note-row {
border-top: 1px solid var(--look-line-soft);
}
.project-meeting-note-toggle {
display: flex;
align-items: center;
gap: 9px;
min-height: 26px;
color: var(--ink);
font-size: 12px;
cursor: pointer;
}
.project-meeting-note-toggle > span {
margin-left: auto !important;
color: var(--muted);
}
.project-memory-comments-card {
display: flex;
flex-direction: column;
}
.project-memory-comment-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
align-items: end;
margin-top: auto;
padding-top: 14px;
}
.project-memory-comment-form textarea {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 46px;
max-height: 150px;
padding: 11px 12px;
resize: vertical;
border: 1px solid var(--look-line);
border-radius: 12px;
background: rgba(255, 255, 255, .9);
color: var(--ink);
font: inherit;
font-size: 14px;
}
.project-memory-comment-form textarea:focus {
outline: 0;
border-color: rgba(224, 122, 95, .52);
box-shadow: 0 0 0 3px var(--ui-focus);
}
.project-memory-comment-form .btn {
min-height: 46px;
}
@media (max-width: 860px) {
.project-records-notes-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
.project-hero-actions > .btn:nth-child(4):last-child { grid-column: 1 / -1; }
.project-memory-board > .meeting-card { padding: 17px 15px !important; }
.project-memory-board .linked-decisions-head { align-items: stretch; gap: 12px; }
.project-memory-board .linked-decisions-actions { width: 100%; }
.project-records-notes-grid > .card { padding: 17px 15px !important; }
.project-memory-comment-form { grid-template-columns: minmax(0, 1fr); }
.project-memory-comment-form .btn { width: 100%; }
.project-meeting-note-toggle { flex-wrap: wrap; }
.project-meeting-note-toggle > span { width: 100%; margin: 2px 0 0 23px !important; }
}
.modal.project-modal-shell {
display: flex;
flex-direction: column;
width: min(820px, calc(100vw - 28px));
max-width: 820px;
max-height: calc(100dvh - 32px);
overflow: hidden;
border-color: var(--look-line);
border-radius: 20px;
box-shadow: 0 28px 80px rgba(35, 52, 45, .24);
}
.project-modal-shell .modal-head {
flex: 0 0 auto;
min-height: 68px;
padding: 16px 20px;
border-bottom-color: var(--look-line-soft);
background:
radial-gradient(260px 160px at 96% -40%, rgba(224, 122, 95, .09), transparent 68%),
rgba(250, 247, 240, .82);
}
.project-modal-shell .modal-head h3 {
font-family: var(--display);
font-size: 19px;
letter-spacing: -.012em;
}
.project-modal-shell .modal-head .x {
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(238, 232, 219, .9);
}
.project-modal-shell .modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 18px 20px 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(520px 300px at 104% -10%, rgba(169, 184, 164, .08), transparent 66%),
var(--paper);
}
.project-modal-form {
display: grid;
gap: 14px;
min-width: 0;
margin: 0;
}
.project-modal-intro {
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
align-items: center;
gap: 13px;
padding: 14px 15px;
border: 1px solid var(--look-line);
border-radius: 16px;
background:
radial-gradient(280px 180px at 100% -40%, rgba(224, 122, 95, .08), transparent 68%),
rgba(255, 255, 255, .68);
box-shadow: 0 5px 16px rgba(43, 66, 58, .04);
}
.project-modal-mark,
.project-modal-mark.ava {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 15px;
color: var(--coral-deep);
background: rgba(224, 122, 95, .1);
box-shadow: inset 0 0 0 1px rgba(224, 122, 95, .08);
font-size: 17px;
font-weight: 850;
}
.project-modal-mark svg { width: 23px; height: 23px; }
.project-modal-intro > div { min-width: 0; }
.project-modal-intro > div > span { color: var(--coral-deep); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.project-modal-intro h4 { margin: 3px 0 2px; font-family: var(--display); font-size: 18px; line-height: 1.2; letter-spacing: -.012em; }
.project-modal-intro p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.project-modal-section {
min-width: 0;
padding: 0 15px 15px;
border: 1px solid var(--look-line);
border-radius: 16px;
background: rgba(255, 255, 255, .6);
box-shadow: 0 4px 14px rgba(43, 66, 58, .035);
}
.project-modal-section > header {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin: 0 -15px 15px;
padding: 12px 15px;
border-bottom: 1px solid var(--look-line-soft);
background: rgba(246, 241, 231, .38);
border-radius: 16px 16px 0 0;
}
.project-modal-section > header > span {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: var(--green);
background: var(--sage-soft);
font-size: 9.5px;
font-weight: 850;
letter-spacing: .03em;
}
.project-modal-section > header h4 { margin: 0 0 2px; font-size: 14px; line-height: 1.25; }
.project-modal-section > header p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.project-modal-section-body { min-width: 0; }
.project-modal-section-body > .field:last-child,
.project-modal-section-body > .frow:last-child > .field { margin-bottom: 0; }
.project-modal-form .field { margin-bottom: 13px; }
.project-modal-form .field label { margin-bottom: 6px; color: var(--green); font-size: 10.5px; font-weight: 820; letter-spacing: .025em; text-transform: uppercase; }
.project-modal-form .field .hint { font-size: 9.5px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.project-modal-form .field input,
.project-modal-form .field select,
.project-modal-form .field textarea {
min-height: 44px;
padding: 10px 12px;
border-color: var(--look-line);
border-radius: 12px;
background: rgba(255, 255, 255, .82);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
font-size: 14px;
}
.project-modal-form .field textarea { min-height: 76px; }
.project-modal-form .field input:focus,
.project-modal-form .field select:focus,
.project-modal-form .field textarea:focus { border-color: rgba(224, 122, 95, .55); background: #fff; box-shadow: 0 0 0 3px var(--ui-focus); }
.project-modal-name-row { grid-template-columns: 132px minmax(0, 1fr); }
.project-modal-subgroup { margin-bottom: 13px; padding: 12px 12px 0; border: 1px solid var(--look-line-soft); border-radius: 13px; background: rgba(246, 241, 231, .3); }
.project-modal-subhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.project-modal-subhead b { color: var(--green); font-size: 11px; }
.project-modal-subhead span { color: var(--muted); font-size: 10px; }
.project-modal-textareas textarea { min-height: 86px; }
.project-modal-icon-field .icon-picker-grid {
flex-wrap: nowrap;
gap: 7px;
padding: 9px;
overflow-x: auto;
border: 1px solid var(--look-line-soft);
border-radius: 13px;
background: rgba(246, 241, 231, .34);
scrollbar-width: thin;
}
.project-modal-icon-field .icon-pick-btn {
flex: 0 0 auto;
width: 42px;
height: 42px;
padding: 3px;
border-radius: 12px;
}
.project-modal-icon-field .icon-pick-btn .ava { width: 34px !important; height: 34px !important; border-radius: 10px; }
.project-modal-icon-field .icon-pick-btn.selected { border-color: rgba(224, 122, 95, .55); background: rgba(224, 122, 95, .08); }
.project-modal-form .btn-add-row {
min-height: 40px;
border-color: rgba(56, 85, 74, .24);
border-radius: 12px;
background: rgba(239, 242, 229, .45);
color: var(--green);
font-weight: 750;
}
.project-modal-danger { margin: 0 2px; }
.project-modal-danger summary { width: fit-content; color: var(--muted); cursor: pointer; font-size: 10.5px; font-weight: 700; }
.project-modal-danger > div { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 9px; }
.project-modal-danger .danger { border-color: rgba(180, 76, 58, .22); color: var(--coral-deep); }
.project-modal-foot,
.write-form > .project-modal-foot,
.inline-modal-foot.project-modal-foot {
position: sticky;
bottom: 0;
z-index: 5;
justify-content: flex-end;
gap: 9px;
margin: 2px -20px 0 !important;
padding: 13px 20px calc(13px + env(safe-area-inset-bottom)) !important;
border-top: 1px solid var(--look-line) !important;
background: rgba(255, 253, 248, .96) !important;
box-shadow: 0 -10px 24px rgba(43, 66, 58, .06);
backdrop-filter: blur(12px);
}
.project-modal-foot .btn { min-width: 150px; min-height: 44px; border-radius: 999px; }
.project-edition-carry {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 9px;
}
.project-edition-carry > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 11px 12px; border: 1px solid var(--look-line); border-radius: 14px; background: rgba(239, 242, 229, .38); }
.project-edition-carry > div:last-child { background: rgba(246, 241, 231, .5); }
.project-edition-carry span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--green); background: rgba(255, 255, 255, .78); font-weight: 850; }
.project-edition-carry p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.project-edition-carry b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 11.5px; }
.finance-expense-modal .project-modal-mark { color: var(--green); background: var(--sage-soft); }
.finance-expense-modal .project-modal-section:nth-of-type(2) > header > span { color: #8c6a2b; background: rgba(213, 168, 82, .15); }
.finance-receipt-field input[type="file"] { padding: 7px; cursor: pointer; }
.finance-expense-modal .finance-expense-options { grid-template-columns: 1fr 1fr; gap: 8px; margin: 3px 0 13px; }
.finance-expense-modal .finance-option-check { min-height: 68px; padding: 10px 11px; border-color: var(--look-line); border-radius: 13px; background: rgba(246, 241, 231, .38); }
.finance-expense-policy { display: flex; align-items: center; gap: 8px; margin: -2px 2px 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.finance-expense-policy span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; color: var(--green); background: var(--sage-soft); font-weight: 850; }
@media (max-width: 760px) {
.modal.project-modal-shell { width: 100%; max-height: calc(100dvh - 18px); border-radius: 20px 20px 0 0; }
.project-modal-shell .modal-head { min-height: 62px; padding: 12px 14px; }
.project-modal-shell .modal-body { padding: 14px 14px 0 !important; }
.project-modal-intro { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; }
.project-modal-mark,
.project-modal-mark.ava { width: 44px; height: 44px; border-radius: 13px; }
.project-modal-intro h4 { font-size: 16px; }
.project-modal-section { padding: 0 12px 12px; }
.project-modal-section > header { margin: 0 -12px 12px; padding: 11px 12px; }
.project-modal-name-row { grid-template-columns: 106px minmax(0, 1fr); }
.project-modal-foot,
.write-form > .project-modal-foot,
.inline-modal-foot.project-modal-foot { margin-left: -14px !important; margin-right: -14px !important; padding-left: 14px !important; padding-right: 14px !important; }
.project-modal-foot .btn { flex: 1 1 0; min-width: 0; }
.project-edition-carry { grid-template-columns: 1fr; }
.finance-expense-modal .finance-expense-options { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.project-modal-section > header p { display: none; }
.project-modal-name-row,
.project-modal-form .frow,
.project-modal-form .form-grid { grid-template-columns: 1fr; }
.project-modal-subhead { display: grid; gap: 2px; }
.project-modal-foot .btn { min-height: 46px; }
}
#modal-root.open .overlay {
align-items: center;
padding: 18px;
overscroll-behavior: contain;
}
#modal-root .modal {
display: flex;
flex-direction: column;
max-height: min(860px, calc(100dvh - 36px));
overflow: hidden;
}
#modal-root .modal-body {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#modal-root .task-detail-modal {
max-width: min(780px, calc(100vw - 24px));
}
.task-modal-loading,
.task-modal-soft-warn {
padding: 14px 16px;
border-radius: 12px;
background: rgba(246, 241, 231, .72);
color: var(--muted);
font-weight: 750;
}
.task-modal-soft-warn {
margin-bottom: 12px;
color: var(--green-deep);
border: 1px solid rgba(47, 85, 69, .14);
}
.task-list .tk,
.project-work-card .tk,
.card .tk[data-open-task] {
min-height: 58px;
align-items: center;
border-radius: 10px;
border-bottom-color: rgba(47, 85, 69, .09);
touch-action: manipulation;
}
.task-list .tk:active,
.project-work-card .tk:active,
.card .tk[data-open-task]:active {
background: rgba(224, 122, 95, .08);
transform: scale(.998);
}
.task-list .chk,
.project-work-card .chk,
.card .tk[data-open-task] .chk {
flex: 0 0 28px;
width: 28px;
height: 28px;
}
.task-list .tk-main,
.project-work-card .tk-main,
.card .tk[data-open-task] .tk-main {
min-width: 0;
padding: 4px 0;
}
.fchat-compose-hero {
display: none !important;
}
.fchat-compose-toggle {
min-height: 30px;
padding: 5px 11px;
font-size: 12.5px;
}
.fchat-actions {
position: static;
display: flex;
align-self: flex-start;
order: 0;
margin: 0 0 4px;
padding: 2px 4px;
gap: 2px;
transform: translateY(3px);
transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.fchat-msg.me .fchat-actions {
align-self: flex-end;
margin-left: auto;
}
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-actions:hover {
opacity: 1;
transform: none;
}
.fchat-actions button {
width: 28px;
height: 28px;
font-size: 13px;
}
.fchat-thread .chat-msg-menu {
top: 36px;
z-index: 25;
}
@media (max-width: 760px) {
#modal-root.open .overlay {
align-items: flex-end;
padding: 0;
padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
}
#modal-root .modal {
width: 100%;
max-width: none;
max-height: 100%;
margin: 0;
border-radius: 20px 20px 0 0;
animation: sheetUp .24s cubic-bezier(.22, .9, .34, 1);
}
#modal-root .modal::before {
content: "";
flex: 0 0 auto;
align-self: center;
width: 42px;
height: 4px;
border-radius: 999px;
background: var(--line);
margin: 9px 0 -5px;
}
#modal-root .task-detail-modal {
max-width: none;
width: 100%;
}
#modal-root .modal-head {
flex: 0 0 auto;
padding-top: 13px !important;
padding-bottom: 13px !important;
}
#modal-root .modal-head .x {
width: 40px;
height: 40px;
border-radius: 12px;
font-size: 20px;
}
#modal-root .modal-body {
flex: 1 1 auto;
min-height: 0;
}
#modal-root .modal-foot,
#modal-root .write-form > .modal-foot {
flex: 0 0 auto;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
.task-modal-detail {
gap: 12px;
}
.task-modal-meta {
gap: 7px;
}
.task-modal-meta > div {
padding: 9px 10px;
}
.task-modal-section {
padding: 12px;
}
.task-list .tk,
.project-work-card .tk,
.card .tk[data-open-task] {
min-height: 64px;
padding: 12px !important;
}
.task-list .tk-dl {
font-size: 12px;
}
.floating-chat-panel {
height: min(82dvh, 660px);
}
.fchat-section-head {
min-height: 34px;
}
.fchat-compose-toggle {
min-height: 32px;
padding: 5px 10px;
}
.fchat-actions {
opacity: 1;
pointer-events: auto;
transform: none;
margin-bottom: 5px;
}
.fchat-actions button {
width: 32px;
height: 32px;
font-size: 14px;
}
.fchat-msg {
max-width: 94%;
}
.fchat-bubble-wrap {
max-width: min(100%, 300px);
}
.fchat-thread .chat-msg-menu {
top: 40px;
}
}
.fchat-bubble-line {
display: flex;
align-items: center;
gap: 7px;
max-width: 100%;
}
.fchat-msg.me .fchat-bubble-line { justify-content: flex-end; }
.fchat-msg.other .fchat-bubble-line { justify-content: flex-start; }
.fchat-actions {
gap: 7px !important;
padding: 0 !important;
}
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-actions:hover {
opacity: .86;
pointer-events: auto;
}
.fchat-actions button {
width: 24px !important;
height: 24px !important;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(47, 85, 69, .68);
box-shadow: none !important;
font-size: 18px !important;
line-height: 1;
}
.fchat-actions button:hover,
.fchat-actions button:focus-visible {
color: var(--orange);
background: transparent !important;
transform: scale(1.08);
}
.fchat-actions button[data-fchat-more-menu] {
font-size: 22px !important;
letter-spacing: 1px;
}
.fchat-thread .chat-msg-menu { top: 30px; }
.task-join-btn { white-space: nowrap; }
@media (max-width: 760px) {
.fchat-bubble-wrap { max-width: min(100%, 340px); }
.task-modal-section-head .task-join-btn {
justify-content: center;
}
}
.task-dependency-box {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 12px 14px;
}
.task-dependency-box .field {
min-width: 0;
margin: 0;
}
.task-dependency-box input,
.task-dependency-box select {
width: 100%;
}
.task-modal-section-head {
min-width: 0;
}
.task-modal-section-head .task-join-btn {
max-width: 100%;
min-width: 0;
flex: 0 1 auto;
white-space: normal;
text-align: center;
}
@media (max-width: 760px) {
.task-dependency-box {
grid-template-columns: minmax(0, 1fr);
}
.task-modal-section-head {
align-items: stretch;
}
.task-modal-section-head .task-join-btn {
width: 100%;
}
}
@keyframes sheetUp {
from { transform: translateY(38px); opacity: .55; }
to { transform: none; opacity: 1; }
}
html.modal-open,
body.modal-open {
overflow: hidden;
}
#modal-root .modal-body {
overscroll-behavior: contain;
}
@media (max-width: 760px) {
.field input,
.field textarea,
.field select,
.modal input,
.modal textarea,
.modal select,
.meeting-agenda-select,
.meeting-status-select,
.meeting-note-card input,
.meeting-note-card textarea,
.meeting-search-input,
.meeting-note-area,
.finance-expense-form input,
.finance-expense-form select,
.messenger-compose select,
.fcw-input,
.chat-comment-form textarea,
.project-search input,
.chat-search-field input,
.chat-search-panel select {
font-size: 16px !important;
}
}
@media (hover: none) {
.fchat-bubble-wrap.actions-open .fchat-actions {
opacity: .92;
pointer-events: auto;
transform: none;
}
.fchat-actions button {
width: 30px !important;
height: 30px !important;
}
.chat-msg-row.acts-open .chat-msg-acts {
display: flex;
}
.fchat-bubble,
.chat-msg-bubble {
-webkit-tap-highlight-color: transparent;
}
.fchat-head-btn,
.fcw-head-btn {
min-width: 40px;
min-height: 40px;
font-size: 22px;
}
}
.chat-act-btn svg,
.fchat-actions button svg {
width: 16px;
height: 16px;
display: block;
}
.fcw-emoji-btn svg,
.chat-compose-emoji-btn svg {
width: 18px;
height: 18px;
display: block;
}
.chat-menu-item-icon svg {
width: 14px;
height: 14px;
display: block;
}
.fchat-actions button,
.chat-act-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.main {
background: none;
}
@media (min-width: 861px) {
.stat-row {
gap: 16px;
margin-bottom: 28px;
}
.stat {
padding: 20px 22px;
}
.stat .lab {
margin-top: 9px;
}
.dash-grid {
gap: 24px;
}
.card.pad {
padding: 22px 24px;
}
.panel-note {
margin-bottom: 16px;
}
.tline {
padding: 13px 0;
}
}
.stat {
border-radius: var(--radius);
}
.stat .corner {
width: 74px;
height: 74px;
right: -16px;
top: -16px;
opacity: .09;
}
.dash-spark {
display: flex;
align-items: center;
gap: 9px;
margin: -6px 0 20px;
color: var(--coral-deep);
font-family: var(--display);
font-size: 15px;
font-weight: 650;
font-style: italic;
letter-spacing: .01em;
}
.dash-spark svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
opacity: .85;
}
.item-card-click,
.person-card,
.stat,
.card[data-open-task],
.wl-card {
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.item-card-click:hover,
.person-card:hover {
transform: translateY(-2px);
box-shadow: var(--ui-shadow-hover);
}
.nav-btn {
border-radius: 12px;
transition: background .14s ease, color .14s ease;
}
.nav-btn:hover:not(.active) {
background: rgba(255, 255, 255, .09);
color: #fff;
}
.main::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.fchat-thread::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.fchat-thread::-webkit-scrollbar-thumb {
background: rgba(134, 151, 127, .4);
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.fchat-thread::-webkit-scrollbar-track {
background: transparent;
}
.view-head {
margin-bottom: 26px;
}
#view-sub,
.view-sub {
line-height: 1.6;
}
.hrcal-strip {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
margin-bottom: 22px;
cursor: pointer;
background: var(--paper);
border: 1px solid var(--line);
border-left: 5px solid var(--coral);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hrcal-strip:hover {
transform: translateY(-2px);
box-shadow: var(--ui-shadow-hover);
border-color: rgba(224, 122, 95, 0.3);
}
.hrcal-strip-ico {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 13px;
background: rgba(224, 122, 95, .1);
color: var(--coral-deep);
display: grid;
place-items: center;
}
.hrcal-strip-ico svg {
width: 20px;
height: 20px;
}
.hrcal-strip-text {
min-width: 0;
flex: 1;
}
.hrcal-strip-label {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 4px;
}
.hrcal-strip-title {
display: block;
color: var(--ink);
font-family: var(--display);
font-size: 15.5px;
font-weight: 700;
line-height: 1.4;
}
.hrcal-strip-more {
flex: 0 0 auto;
width: auto;
min-height: 34px;
padding: 0 14px;
white-space: nowrap;
}
@media (max-width: 860px) {
.hrcal-strip {
padding: 14px 16px;
gap: 12px;
}
.hrcal-strip-ico {
flex: 0 0 36px;
width: 36px;
height: 36px;
}
.hrcal-strip-title {
font-size: 14px;
}
.hrcal-strip-more {
display: none !important;
}
}
.hrcal-modal {
max-width: 560px;
}
.hrcal-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.hrcal-nav b {
font-family: var(--display);
font-size: 19px;
text-transform: capitalize;
}
.hrcal-nav-btn {
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--cream);
color: var(--ink);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: background .12s ease, border-color .12s ease;
}
.hrcal-nav-btn:hover {
background: #fff;
border-color: var(--coral);
}
.hrcal-list {
display: grid;
gap: 6px;
}
.hrcal-day {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper);
overflow: hidden;
}
.hrcal-day.today {
border-color: rgba(224, 122, 95, .45);
background: var(--cream-deep);
}
.hrcal-day summary {
display: flex;
align-items: baseline;
gap: 10px;
padding: 10px 13px;
cursor: pointer;
user-select: none;
list-style: none;
}
.hrcal-day summary::-webkit-details-marker {
display: none;
}
.hrcal-day[open] summary {
border-bottom: 1px solid var(--ui-line-soft);
}
.hrcal-date {
flex: 0 0 52px;
font-weight: 800;
font-size: 13px;
color: var(--coral-deep);
white-space: nowrap;
}
.hrcal-date em {
display: block;
font-style: normal;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--coral);
}
.hrcal-title {
min-width: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.4;
}
.hrcal-body {
padding: 11px 13px 13px 75px;
font-size: 13px;
color: var(--muted);
line-height: 1.6;
white-space: pre-line;
overflow-wrap: anywhere;
}
@media (max-width: 560px) {
.hrcal-body { padding-left: 13px; }
}
.hrcal-grid-view {
margin-top: 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 16px;
box-shadow: inset 0 1px 3px rgba(74, 58, 40, 0.02);
}
.hrcal-grid-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 12px;
}
.hrcal-grid-header span {
font-size: 11px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
}
.hrcal-grid-cells {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px 6px;
}
.hrcal-grid-cell {
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: none;
cursor: pointer;
outline: none;
transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
padding: 0;
}
.hrcal-grid-cell.empty {
visibility: hidden;
pointer-events: none;
}
.hrcal-grid-cell:hover:not(.active):not([disabled]) {
background: var(--cream);
color: var(--coral-deep);
}
.hrcal-grid-cell.today {
border: 2px solid var(--coral);
color: var(--coral-deep);
font-weight: 800;
}
.hrcal-grid-cell.active {
background: var(--coral);
color: #fff !important;
font-weight: 800;
box-shadow: 0 3px 8px rgba(224, 122, 95, 0.35);
transform: scale(1.05);
}
.hrcal-grid-cell[disabled] {
opacity: 0.25;
cursor: default;
}
.hrcal-selected-detail {
margin-top: 20px;
padding: 16px 20px;
background: var(--cream);
border-radius: var(--radius);
border-left: 4px solid var(--coral);
box-shadow: var(--shadow);
animation: hrCalFadeIn .22s ease-out;
}
@keyframes hrCalFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.hrcal-selected-date {
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.hrcal-selected-date .today-badge {
background: var(--coral);
color: #fff;
font-size: 9px;
padding: 1px 6px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 800;
}
.hrcal-selected-title {
font-family: var(--display);
font-size: 16.5px;
font-weight: 700;
color: var(--ink);
margin: 0 0 10px;
line-height: 1.35;
}
.hrcal-selected-body {
font-size: 13.5px;
line-height: 1.55;
color: var(--muted);
}
.hrcal-entry-summary {
color: var(--ink);
font-weight: 600;
line-height: 1.6;
}
.hrcal-entry-description {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--ui-line-soft);
color: var(--muted);
line-height: 1.7;
white-space: pre-line;
}
.hrcal-sources {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ui-line-soft);
}
.hrcal-sources > span {
display: block;
margin-bottom: 7px;
color: var(--ink-soft);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.hrcal-sources ol {
display: grid;
gap: 5px;
margin: 0;
padding-left: 20px;
}
.hrcal-sources li {
padding-left: 2px;
color: var(--muted);
font-size: 12px;
}
.hrcal-sources a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--coral-deep);
font-weight: 650;
overflow-wrap: anywhere;
text-decoration: none;
}
.hrcal-sources a:hover {
text-decoration: underline;
}
.hrcal-sources svg {
flex: 0 0 12px;
width: 12px;
height: 12px;
}
.hrcal-selected-body a {
color: var(--coral-deep);
font-weight: 600;
text-decoration: none;
}
.hrcal-selected-body a:hover {
text-decoration: underline;
}
.hrcal-hint {
margin: 14px 2px 0;
font-size: 12.5px;
color: var(--muted);
font-style: italic;
}
.hrcal-seeds {
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid var(--ui-line-soft);
white-space: normal;
}
.hrcal-seeds-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.hrcal-seeds-head span,
.hrcal-seeds-head b { display: block; }
.hrcal-seeds-head span {
color: var(--coral-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.hrcal-seeds-head b { margin-top: 2px; color: var(--ink); font-size: 12.5px; }
.hrcal-seeds > p { margin: 9px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.hrcal-linked-seeds { display: grid; gap: 6px; margin-top: 10px; }
.hrcal-linked-seed {
display: grid;
grid-template-columns: 22px minmax(0,1fr);
align-items: center;
gap: 7px;
width: 100%;
padding: 8px 10px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 11px;
background: rgba(237,244,236,.65);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.hrcal-linked-seed:hover { border-color: rgba(47,85,69,.3); background: rgba(237,244,236,.95); }
.hrcal-linked-seed span { color: var(--sage-deep); font-weight: 800; }
.hrcal-linked-seed b { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.hr-calendar-origin svg,
.idea-calendar-origin svg { width: 19px; height: 19px; }
.idea-calendar-origin { margin: 12px 0; }
.hr-interest-picker {
min-width: 0;
margin: 18px 0;
padding: 17px;
border: 1px solid rgba(47,85,69,.16);
border-radius: 16px;
background: rgba(237,244,236,.48);
}
.hr-interest-picker legend {
padding: 0 6px;
color: var(--ink);
font-family: var(--display);
font-size: 15px;
font-weight: 750;
}
.hr-interest-help { margin: 0 0 14px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.hr-interest-search {
display: grid;
grid-template-columns: 20px minmax(0,1fr);
align-items: center;
gap: 9px;
min-height: 44px;
margin-bottom: 13px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
color: var(--muted);
}
.hr-interest-search:focus-within { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(47,85,69,.09); }
.hr-interest-search svg { width: 18px; height: 18px; }
.hr-interest-search input { width: 100%; min-width: 0; min-height: 42px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.hr-interest-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.hr-interest-group {
min-width: 0;
padding: 11px;
border: 1px solid rgba(47,85,69,.1);
border-radius: 13px;
background: rgba(255,255,255,.72);
}
.hr-interest-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hr-interest-group[open] { grid-column: 1 / -1; border-color: rgba(47,85,69,.2); background: #fff; box-shadow: 0 7px 20px rgba(47,85,69,.06); }
.hr-interest-group summary {
display: grid;
grid-template-columns: minmax(0,1fr) auto 12px;
align-items: center;
gap: 8px;
list-style: none;
cursor: pointer;
}
.hr-interest-group summary::-webkit-details-marker { display: none; }
.hr-interest-group summary span { color: var(--sage-deep); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hr-interest-group summary em { color: var(--muted); font-size: 9.5px; font-style: normal; font-weight: 700; }
.hr-interest-group summary i { width: 7px; height: 7px; border-right: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: rotate(45deg); transition: transform .12s ease; }
.hr-interest-group[open] summary i { transform: rotate(225deg); }
.hr-interest-group[open] summary { margin-bottom: 9px; }
.hr-interest-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.hr-interest-options label { position: relative; min-width: 0; cursor: pointer; }
.hr-interest-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hr-interest-options span {
display: grid;
grid-template-columns: 19px minmax(0,1fr);
align-items: center;
gap: 8px;
min-height: 44px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--paper);
color: var(--ink-soft);
font-size: 10.5px;
font-weight: 650;
line-height: 1.25;
transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.hr-interest-options span::before { content: ""; display: block; width: 17px; height: 17px; border: 1.5px solid rgba(47,85,69,.3); border-radius: 5px; background: #fff; box-sizing: border-box; }
.hr-interest-options label:hover span { border-color: rgba(47,85,69,.32); }
.hr-interest-options input:checked + span {
border-color: rgba(47,85,69,.38);
background: rgba(237,244,236,.95);
color: var(--sage-deep);
box-shadow: 0 3px 9px rgba(47,85,69,.14);
}
.hr-interest-options input:checked + span::before { border-color: var(--sage-deep); background: var(--sage-deep); box-shadow: inset 0 0 0 4px #fff; }
.hr-interest-options input:focus-visible + span { outline: 3px solid rgba(224,122,95,.24); outline-offset: 2px; }
.hr-interest-count { margin: 12px 2px 0; color: var(--sage-deep); font-size: 10.5px; font-weight: 750; text-align: right; }
.hr-interest-empty { margin: 14px 0 0; padding: 14px; border-radius: 12px; background: var(--cream); color: var(--muted); font-size: 12px; text-align: center; }
.profile-interests > p { margin: 0 0 11px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.hr-interest-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-interest-chip {
padding: 6px 9px;
border: 1px solid rgba(47,85,69,.15);
border-radius: 999px;
background: rgba(237,244,236,.78);
color: var(--sage-deep);
font-size: 10.5px;
font-weight: 700;
line-height: 1.25;
}
@media (max-width: 560px) {
.hrcal-seeds-head { align-items: flex-start; }
.hrcal-seeds-head .small-btn { min-height: 44px; flex: 0 0 auto; }
.hr-interest-picker { padding: 13px; }
.hr-interest-groups { grid-template-columns: 1fr; }
.hr-interest-group:last-child:nth-child(odd) { grid-column: auto; }
.hr-interest-group[open] { grid-column: auto; }
.hr-interest-options { grid-template-columns: 1fr; }
.hr-interest-options span { padding: 8px 10px; font-size: 11px; }
}
.profile-wizard-modal { width: min(760px, calc(100vw - 28px)); max-width: 760px; }
.profile-wizard-form { margin: -4px 0 0; }
.profile-wizard-nav {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 7px;
margin: 0 0 20px;
padding: 0;
list-style: none;
}
.profile-wizard-nav button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 7px 9px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255,255,255,.66);
color: var(--muted);
font: inherit;
text-align: left;
cursor: pointer;
}
.profile-wizard-nav button:hover { border-color: rgba(47,85,69,.28); color: var(--ink); }
.profile-wizard-nav button.is-active { border-color: rgba(224,122,95,.42); background: rgba(224,122,95,.09); color: var(--ink); }
.profile-wizard-nav button span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream-deep); color: var(--sage-deep); font-size: 10px; font-weight: 850; }
.profile-wizard-nav button.is-active span { background: var(--coral); color: #fff; }
.profile-wizard-nav button b { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.profile-wizard-step[hidden] { display: none; }
.profile-wizard-intro { margin: 0 0 17px; padding: 0 2px 14px; border-bottom: 1px solid var(--line); }
.profile-wizard-intro small { color: var(--coral-deep); font-size: 9.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.profile-wizard-intro h3 { margin: 4px 0 3px; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.profile-wizard-intro p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.profile-wizard-fields > .hr-interest-picker { margin: 0; }
.profile-document-private { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid rgba(54,82,68,.28); border-radius: 4px 10px 10px 4px; background: #f3f7f4; }
.profile-document-private span { color: #4d6a5c; font-size: 9.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.profile-document-private p { margin: 4px 0 0; color: #5d7066; font-size: 11px; line-height: 1.5; }
.profile-wizard-foot { align-items: center; justify-content: space-between; margin: 20px -24px -22px; padding: 16px 24px; border-top: 1px solid var(--line); }
.profile-wizard-foot > div { display: flex; gap: 8px; }
.profile-wizard-foot [hidden] { display: none !important; }
@media (max-width: 620px) {
.profile-wizard-nav { gap: 5px; margin-bottom: 16px; }
.profile-wizard-nav button { justify-content: center; min-height: 46px; padding: 7px 5px; }
.profile-wizard-nav button b { display: none; }
.profile-wizard-nav button span { width: 27px; height: 27px; flex-basis: 27px; font-size: 11px; }
.profile-wizard-intro h3 { font-size: 20px; }
.profile-wizard-foot { position: sticky; bottom: -22px; z-index: 3; margin-left: -16px; margin-right: -16px; padding: 13px 16px calc(13px + env(safe-area-inset-bottom)); background: rgba(255,250,243,.97); backdrop-filter: blur(10px); }
.profile-wizard-foot .btn { min-height: 44px; }
.profile-wizard-foot > div { flex: 1; justify-content: flex-end; }
.finance-saved-profile { align-items: stretch; flex-direction: column; }
.finance-saved-profile .btn { width: 100%; }
}
@media (max-width: 400px) {
.hrcal-grid-view {
padding: 10px;
}
.hrcal-grid-cells {
gap: 6px 4px;
}
.hrcal-grid-cell {
font-size: 12px;
}
}
.stat-row .stat {
display: flex;
flex-direction: column;
justify-content: center;
}
.hrcal-stat {
font: inherit;
text-align: left;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
justify-content: flex-start;
}
.hrcal-stat:hover {
transform: translateY(-2px);
box-shadow: var(--ui-shadow-hover);
border-color: rgba(224, 122, 95, .4);
}
.hrcal-stat-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--coral-deep);
margin-bottom: 7px;
}
.hrcal-stat-kicker svg {
width: 13px;
height: 13px;
flex: 0 0 13px;
}
.hrcal-stat .big {
font-size: 30px;
color: var(--coral);
}
.hrcal-stat-title {
color: var(--ink) !important;
font-weight: 650;
font-size: 13px !important;
line-height: 1.45;
margin-top: 7px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hrcal-stat-more {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 9px;
font-size: 11.5px;
font-weight: 800;
color: var(--coral-deep);
transition: gap .14s ease;
}
.hrcal-stat-more svg {
width: 12px;
height: 12px;
}
.hrcal-stat:hover .hrcal-stat-more {
gap: 7px;
}
.settings-modal-hero h3 {
margin: 2px 0 6px;
}
.settings-card-section {
background: var(--paper);
border: 1px solid var(--ui-line-soft);
border-radius: 14px;
padding: 16px 18px;
box-shadow: var(--ui-shadow-soft);
}
.settings-card-section .settings-section-title {
font-size: 11px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--coral-deep);
margin: 0 0 4px;
}
.settings-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 2px;
border-top: 1px solid var(--ui-line-soft);
border-radius: 0;
cursor: pointer;
}
.settings-row:first-of-type,
.settings-section-title + .settings-row,
.settings-info-grid + .settings-row {
border-top: 0;
}
.settings-row-text {
flex: 1;
min-width: 0;
}
.settings-row-text b {
display: block;
margin-bottom: 1px;
}
.settings-row-text small {
display: block;
}
.modal .settings-toggle,
.settings-toggle {
appearance: none;
-webkit-appearance: none;
flex: 0 0 42px;
width: 42px;
height: 24px;
margin: 0;
border-radius: 999px;
background: var(--cream-deep);
border: 1px solid var(--line);
position: relative;
cursor: pointer;
transition: background .16s ease, border-color .16s ease;
}
.settings-toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(34, 48, 42, .25);
transition: transform .16s ease;
}
.settings-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ui-focus);
}
.settings-select {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
font: inherit;
font-size: 13.5px;
padding: 8px 10px;
max-width: 46%;
}
.meeting-note-bullet[readonly],
.meeting-note-content[readonly] {
border-color: transparent;
background: transparent;
color: var(--ink);
padding-left: 0;
padding-right: 0;
box-shadow: none;
}
.meeting-note-heading[readonly] {
border-color: transparent;
background: transparent;
color: var(--ink);
font-family: var(--display);
font-weight: 750;
font-size: 15px;
padding-left: 0;
box-shadow: none;
}
.meeting-note-item:has(.meeting-note-content[readonly]) {
border: 0;
border-left: 3px solid rgba(224, 122, 95, .35);
border-radius: 0;
background: transparent;
padding: 2px 0 2px 12px;
box-shadow: none;
}
.note-bullet-row:has(.meeting-note-bullet[readonly]) {
gap: 9px;
}
.note-bullet-row:has(.meeting-note-bullet[readonly]) .note-bullet-dot {
font-size: 13px;
line-height: 1.5;
padding-top: 2px;
}
.meeting-note-bullet[readonly] {
padding-top: 1px;
padding-bottom: 1px;
font-size: 14px;
line-height: 1.55;
}
.meeting-note-content[readonly] {
padding-top: 0;
font-size: 14px;
line-height: 1.6;
}
.fchat-thread,
.chat-messages-thread {
background: linear-gradient(180deg, rgba(246, 241, 231, .55), rgba(255, 253, 249, .92));
}
.fchat-bubble {
position: relative;
border: 1px solid var(--ui-line-soft);
background: #fff;
border-radius: 18px 18px 18px 6px;
box-shadow: 0 1px 2px rgba(74, 58, 40, .05);
padding: 8px 12px 7px;
}
.fchat-msg.me .fchat-bubble {
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 130%);
border-color: transparent;
color: #fff;
border-radius: 18px 18px 6px 18px;
}
.fchat-msg.other.grouped .fchat-bubble { border-radius: 6px 18px 18px 6px; }
.fchat-msg.me.grouped .fchat-bubble { border-radius: 18px 6px 6px 18px; }
.fchat-bubble.emoji-only {
background: transparent !important;
border-color: transparent !important;
box-shadow: none;
}
.fchat-msg-time {
float: right;
margin: 8px 0 0 10px;
font-size: 10px;
line-height: 1;
color: var(--muted);
opacity: .8;
user-select: none;
}
.fchat-msg.me .fchat-msg-time { color: rgba(255, 255, 255, .8); }
.fchat-bubble.emoji-only .fchat-msg-time { color: var(--muted); }
.fchat-reacts {
margin: 4px 0 0;
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0 4px;
}
.fchat-msg.me .fchat-reacts { justify-content: flex-end; }
.fchat-reacts button {
display: inline-flex;
align-items: center;
gap: 3px;
background: #fff;
border: 1px solid var(--ui-line-soft);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(74, 58, 40, .1);
font-size: 11.5px;
line-height: 1.2;
padding: 3px 8px;
cursor: pointer;
white-space: nowrap;
}
.fchat-reacts button.mine {
border-color: var(--coral);
background: rgba(224, 122, 95, .12);
color: var(--coral-deep);
font-weight: 700;
}
.fchat-thread-meta {
padding: 2px 12px 4px;
}
.fchat-typing {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
color: var(--muted);
background: #fff;
border: 1px solid var(--ui-line-soft);
border-radius: 999px;
padding: 4px 11px 4px 8px;
margin: 2px 0;
animation: fchatFadeUp .18s ease-out;
}
.fchat-typing-dots {
display: inline-flex;
gap: 3px;
}
.fchat-typing-dots i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--sage-deep);
animation: fchatTypingBlink 1.2s infinite ease-in-out;
}
.fchat-typing-dots i:nth-child(2) { animation-delay: .18s; }
.fchat-typing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes fchatTypingBlink {
0%, 60%, 100% { opacity: .35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes fchatFadeUp {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.fchat-readmark {
text-align: right;
font-size: 10.5px;
color: var(--muted);
opacity: .8;
padding: 1px 2px 0;
}
.fchat-readmark.seen { color: var(--coral-deep); opacity: 1; }
.chat-page-thread-meta {
flex: 0 0 auto;
min-height: 18px;
padding: 2px 16px 3px;
background: var(--paper);
}
.chat-page-thread-meta .fchat-readmark {
padding: 0;
line-height: 16px;
}
.fcw-foot,
.chat-comment-form {
align-items: flex-end;
gap: 8px;
background: var(--paper);
border-top: 1px solid var(--ui-line-soft);
padding: 9px 10px;
}
.fcw-input,
.chat-comment-form textarea {
border-radius: 19px !important;
background: var(--cream) !important;
border: 1px solid var(--ui-line-soft) !important;
padding: 9px 14px !important;
}
.fcw-input:focus,
.chat-comment-form textarea:focus {
background: #fff !important;
border-color: var(--coral) !important;
}
.fcw-send,
.chat-submit-btn {
flex: 0 0 38px;
width: 38px;
height: 38px;
padding: 0 !important;
border: 0;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 130%) !important;
color: #fff !important;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(224, 122, 95, .35);
transition: transform .12s ease, box-shadow .12s ease;
font-size: 0;
}
.fcw-send:hover,
.chat-submit-btn:hover {
transform: scale(1.07);
box-shadow: 0 6px 16px rgba(224, 122, 95, .45);
}
.fcw-send:active,
.chat-submit-btn:active { transform: scale(.96); }
.fcw-send svg,
.chat-submit-btn svg {
width: 17px;
height: 17px;
margin: 1px 1px 0 0;
}
.fcw-emoji-btn,
.chat-compose-emoji-btn {
flex: 0 0 34px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--sage-deep);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.fcw-emoji-btn:hover,
.chat-compose-emoji-btn:hover {
background: var(--cream-deep);
color: var(--coral-deep);
}
.fchat-daysep,
.chat-date-separator {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 4px 10px;
}
.fchat-daysep::before,
.fchat-daysep::after,
.chat-date-separator::before,
.chat-date-separator::after {
content: "";
flex: 1;
height: 1px;
background: var(--ui-line-soft);
}
.fchat-daysep span,
.chat-date-separator span {
background: var(--cream-deep);
border: 0;
border-radius: 999px;
color: var(--muted);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
padding: 3px 11px;
white-space: nowrap;
}
.fcw { position: relative; }
.chat-jump-btn {
position: absolute;
right: 12px;
bottom: 96px;
z-index: 12;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--ui-line-soft);
background: var(--paper);
color: var(--coral-deep);
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 6px 16px rgba(74, 58, 40, .18);
animation: fchatFadeUp .16s ease-out;
}
.chat-jump-btn svg { width: 16px; height: 16px; }
.chat-jump-btn:hover { background: var(--cream); }
.heart-pop::after {
content: "❤️";
position: absolute;
right: 8px;
top: -6px;
font-size: 18px;
animation: heartPop .6s ease-out forwards;
pointer-events: none;
}
@keyframes heartPop {
0% { opacity: 0; transform: scale(.4) translateY(4px); }
35% { opacity: 1; transform: scale(1.25) translateY(-4px); }
100% { opacity: 0; transform: scale(1) translateY(-14px); }
}
.chat-msg-bubble { position: relative; }
.fchat-row {
padding: 9px 10px;
border-radius: 14px;
gap: 11px;
transition: background .12s ease;
}
.fchat-row:hover { background: var(--cream); }
.fchat-ava {
width: 40px;
height: 40px;
flex: 0 0 40px;
font-size: 14px;
}
.fchat-row-main > span > b { font-size: 13.5px; }
.fchat-row-main > span > em { font-size: 10.5px; }
.fchat-row-main small { font-size: 12.5px; }
.fchat-row.unread .fchat-row-main small {
color: var(--ink);
font-weight: 650;
}
.fchat-row > i {
min-width: 19px;
height: 19px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-size: 10.5px;
font-weight: 800;
font-style: normal;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
box-shadow: 0 2px 6px rgba(224, 122, 95, .35);
}
.chat-msg-bubble {
border: 1px solid var(--ui-line-soft);
background: #fff;
border-radius: 18px 18px 18px 6px;
box-shadow: 0 1px 2px rgba(74, 58, 40, .05);
}
.chat-msg-row.me .chat-msg-bubble {
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 130%);
border-color: transparent;
color: #fff;
border-radius: 18px 18px 6px 18px;
}
.chat-msg-row.other.grouped .chat-msg-bubble { border-radius: 6px 18px 18px 6px; }
.chat-msg-row.me.grouped .chat-msg-bubble { border-radius: 18px 6px 6px 18px; }
.chat-msg-bubble.emoji-only {
background: transparent !important;
border-color: transparent !important;
box-shadow: none;
}
.chat-msg-row.me .chat-msg-bubble .chat-msg-text { color: #fff; }
.chat-msg-row.me .chat-msg-bubble.emoji-only .chat-msg-text { color: var(--ink); }
.chat-react-badge {
background: #fff;
border: 1px solid var(--ui-line-soft);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(74, 58, 40, .12);
}
.chat-react-badge.active {
border-color: var(--coral);
background: rgba(224, 122, 95, .1);
}
.chat-msg-time,
.chat-messenger-detail .chat-msg-time {
float: right;
display: inline;
align-self: auto;
margin: 8px 0 0 10px;
font-size: 10px;
line-height: 1;
color: var(--muted);
opacity: .8;
user-select: none;
}
.chat-msg-row.me .chat-msg-time { color: rgba(255, 255, 255, .8); }
.chat-msg-bubble.emoji-only .chat-msg-time { color: var(--muted); }
.voice-msg {
display: flex;
align-items: center;
gap: 7px;
width: min(184px, 58vw);
min-width: 156px;
max-width: 100%;
padding: 3px 1px;
overflow: hidden;
}
.voice-play-btn {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--coral);
color: #fff;
box-shadow: 0 2px 6px rgba(74, 58, 40, .18);
transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.voice-play-btn:hover { transform: translateY(-1px); }
.voice-play-btn svg { width: 17px; height: 17px; }
.voice-wave {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 2px;
height: 30px;
cursor: pointer;
touch-action: none;
padding: 0 1px;
overflow: hidden;
opacity: .96;
}
.voice-wave span {
flex: 1 1 0;
min-width: 0;
border-radius: 2px;
background: rgba(74, 58, 40, .26);
transition: background .15s;
}
.voice-wave span.played { background: var(--coral); }
.voice-time {
font-size: 10.5px;
color: var(--muted);
min-width: 34px;
text-align: right;
user-select: none;
font-variant-numeric: tabular-nums;
}
.voice-speed {
border: 1px solid var(--ui-line-soft);
background: rgba(255, 255, 255, .75);
color: var(--ink);
font-size: 10px;
font-weight: 700;
border-radius: 999px;
padding: 4px 7px;
cursor: pointer;
line-height: 1;
white-space: nowrap;
flex: 0 0 auto;
}
.voice-msg.is-loading .voice-play-btn {
opacity: .72;
cursor: wait;
}
.voice-msg.is-loading .voice-wave span {
animation: voiceWaveLoading 1.15s infinite ease-in-out;
}
.voice-msg.is-error .voice-play-btn {
background: var(--bad, #c0392b);
}
.voice-msg.is-error .voice-wave span {
background: rgba(192, 57, 43, .22);
}
.voice-msg.is-error .voice-time {
color: var(--bad, #c0392b);
font-weight: 700;
}
@keyframes voiceWaveLoading {
0%, 100% { opacity: .35; }
50% { opacity: .9; }
}
.fchat-msg.me .voice-play-btn,
.chat-msg-row.me .voice-play-btn { background: #fff; color: var(--coral-deep); }
.fchat-msg.me .voice-wave span,
.chat-msg-row.me .voice-wave span { background: rgba(255, 255, 255, .42); }
.fchat-msg.me .voice-wave span.played,
.chat-msg-row.me .voice-wave span.played { background: #fff; }
.fchat-msg.me .voice-time,
.chat-msg-row.me .voice-time { color: rgba(255, 255, 255, .85); }
.fchat-msg.me .voice-speed,
.chat-msg-row.me .voice-speed { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); color: #fff; }
.fchat-msg.me .voice-msg.is-error .voice-play-btn,
.chat-msg-row.me .voice-msg.is-error .voice-play-btn { background: #fff; color: var(--bad, #c0392b); }
.fchat-msg.me .voice-msg.is-error .voice-time,
.chat-msg-row.me .voice-msg.is-error .voice-time { color: #fff; }
.voice-mic-btn svg { width: 18px; height: 18px; }
.voice-rec-ui {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 4px 2px;
min-height: 42px;
}
form.voice-recording > :not(.voice-rec-ui) { display: none !important; }
.voice-rec-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bad, #c0392b);
animation: voiceRecPulse 1.1s infinite ease-in-out;
flex: 0 0 10px;
}
@keyframes voiceRecPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.75); }
}
.voice-rec-timer {
font-size: 12px;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.voice-rec-live {
flex: 1;
display: flex;
align-items: center;
gap: 2px;
height: 26px;
overflow: hidden;
}
.voice-rec-live span {
flex: 1;
min-width: 2px;
border-radius: 2px;
background: var(--coral);
opacity: .75;
}
.voice-rec-btn {
border: 0;
background: var(--cream);
color: var(--ink);
width: 34px;
height: 34px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
}
.voice-rec-btn svg { width: 16px; height: 16px; }
.voice-rec-btn.danger { color: var(--bad, #c0392b); }
.voice-rec-btn.primary { background: var(--coral); color: #fff; }
.voice-rec-hint { font-size: 11px; color: var(--muted); white-space: nowrap; }
.voice-rec-error { font-size: 11px; color: var(--bad, #c0392b); }
@media (max-width: 720px) {
.voice-msg {
width: min(236px, 70vw);
min-width: 172px;
gap: 7px;
}
.voice-play-btn {
width: 34px;
height: 34px;
flex-basis: 34px;
}
.voice-speed {
padding: 4px 6px;
}
.voice-rec-ui {
gap: 7px;
}
.voice-rec-hint {
display: none;
}
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner-small {
border-top-color: transparent !important;
}
.chk.chk-disabled,
.tk .chk:not(.chk-on):not(.done) {
opacity: .38;
cursor: default;
box-shadow: none;
}
.fchat-msg { max-width: 94%; }
.fchat-bubble-wrap { max-width: min(100%, 480px) !important; }
.fchat-bubble-line { position: static; }
.fchat-actions {
position: static !important;
display: inline-flex !important;
align-items: center;
align-self: center;
gap: 2px !important;
margin: 0 !important;
padding: 0 2px !important;
max-width: none !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 0;
pointer-events: none;
transform: none !important;
transition: opacity .13s ease;
}
.fchat-msg.other .fchat-actions { right: auto !important; left: auto !important; }
.fchat-msg.me .fchat-actions { right: auto !important; left: auto !important; }
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-bubble-wrap.actions-open .fchat-actions {
opacity: .82;
pointer-events: auto;
}
.fchat-actions button {
width: 22px !important;
height: 22px !important;
padding: 0 !important;
background: transparent !important;
border: 0;
border-radius: 50%;
color: rgba(47, 85, 69, .62);
}
.fchat-actions button:hover { color: var(--coral-deep); }
.fchat-actions button svg { width: 14px !important; height: 14px !important; }
.fchat-actions button[data-fchat-more-menu] { font-size: 15px !important; }
.fcw { width: 384px !important; }
@media (max-width: 760px) {
.fchat-bubble-wrap { max-width: min(100%, 82vw) !important; }
.fchat-actions button { width: 28px !important; height: 28px !important; }
.fchat-actions button svg { width: 16px !important; height: 16px !important; }
}
.fchat-bubble-line { display: flex !important; align-items: center !important; }
.fchat-actions { align-self: center !important; }
.chat-emoji-popover {
border-radius: 999px !important;
padding: 4px 7px !important;
gap: 1px !important;
border: 1px solid var(--line) !important;
background: var(--paper) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}
.chat-emoji-popover .emoji-btn {
font-size: 19px;
line-height: 1;
padding: 3px 5px;
border-radius: 50%;
transition: transform .12s ease, background .12s ease;
}
.chat-emoji-popover .emoji-btn:hover {
transform: scale(1.18);
background: var(--cream);
}
.chat-msg-acts {
gap: 2px !important;
padding: 0 2px !important;
border-radius: 0 !important;
transition: opacity .13s ease;
z-index: 12;
}
.chat-msg-row.me .chat-msg-acts {
right: 100% !important;
padding-right: 4px !important;
}
.chat-msg-row.other .chat-msg-acts {
left: 100% !important;
padding-left: 4px !important;
}
.chat-msg-row:hover .chat-msg-acts,
.chat-msg-row:focus-within .chat-msg-acts,
.chat-msg-row.acts-open .chat-msg-acts,
.chat-msg-bubble-container:hover .chat-msg-acts,
.chat-msg-acts:hover {
opacity: .82;
pointer-events: auto;
}
.chat-act-btn {
width: 22px !important;
height: 22px !important;
padding: 0 !important;
border: 0 !important;
color: rgba(47, 85, 69, .62) !important;
}
.chat-act-btn:hover,
.chat-act-btn:focus-visible {
background: transparent !important;
color: var(--coral-deep) !important;
}
.chat-act-btn svg {
width: 14px !important;
height: 14px !important;
}
.chat-msg-menu .chat-menu-item[data-chat-create-task],
.chat-msg-menu .chat-menu-item[data-chat-add-note],
.chat-msg-menu .chat-menu-item[data-fchat-create-task],
.chat-msg-menu .chat-menu-item[data-fchat-add-note] {
font-weight: 650;
}
@media (hover: none) {
.chat-msg-row.acts-open .chat-msg-acts {
opacity: .94;
pointer-events: auto;
}
.chat-act-btn {
width: 28px !important;
height: 28px !important;
}
.chat-act-btn svg {
width: 16px !important;
height: 16px !important;
}
}
.meeting-magic-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.meeting-magic-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px 20px;
border-color: rgba(224, 122, 95, .3) !important;
background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(250, 239, 224, .72)) !important;
box-shadow: 0 8px 22px rgba(109, 66, 48, .06) !important;
}
.meeting-magic-copy h3 { margin: 2px 0 5px !important; font-size: 16px !important; }
.meeting-magic-copy p { margin: 0; max-width: 560px; font-size: 12px; }
.meeting-magic-kicker { color: var(--coral-deep); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.meeting-ai-summary-status { display: none; grid-column: 1 / -1; margin: -3px 0 0; padding-top: 9px; border-top: 1px solid rgba(224, 122, 95, .2); color: var(--muted); font-size: 12px; }
.meeting-magic-actions .meeting-ai-summary-btn {
width: auto;
min-height: 30px;
border-radius: 8px;
padding: 4px 10px;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(224, 122, 95, 0.08);
color: var(--coral-deep);
border-color: transparent;
}
.meeting-magic-actions .meeting-ai-summary-btn.btn-primary { background: var(--coral); border-color: var(--coral); color: #fff; }
.meeting-magic-actions .meeting-ai-summary-btn.btn-primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.meeting-magic-actions .meeting-ai-summary-btn svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
}
.meeting-magic-compact { margin: 0 0 16px; border: 1px solid rgba(224,122,95,.18); border-radius: 13px; background: rgba(250,239,224,.34); overflow: hidden; }
.meeting-magic-compact > summary { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 46px; padding: 7px 11px; cursor: pointer; box-sizing: border-box; }
.meeting-magic-compact > summary > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(224,122,95,.12); color: var(--coral-deep); }
.meeting-magic-compact > summary > div { display: grid; min-width: 0; gap: 1px; }
.meeting-magic-compact > summary b { color: var(--ink); font-size: 13px; }
.meeting-magic-compact > summary small { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-magic-compact > summary i { color: var(--coral-deep); font-size: 10px; font-style: normal; font-weight: 800; }
.meeting-magic-compact[open] > summary { border-bottom: 1px solid rgba(224,122,95,.16); }
.meeting-magic-compact[open] > summary i { font-size: 0; }
.meeting-magic-compact[open] > summary i::after { content: "Sbalit"; font-size: 10px; }
.meeting-magic-compact-body { padding: 10px 11px 11px; }
.meeting-magic-compact-body > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.magic-task-intro {
margin: 0 0 10px;
font-size: 12.5px;
}
.magic-task-list {
display: grid;
gap: 6px;
}
.magic-task-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 11px;
border: 1px solid var(--line);
border-radius: 9px;
background: rgba(250, 246, 236, 0.38);
}
.magic-task-card h3 {
margin: 0 0 3px;
font-family: inherit;
font-size: 14px;
line-height: 1.3;
}
.magic-task-card p {
margin: 0 0 5px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.magic-task-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin-top: 4px;
}
.magic-task-meta span {
color: var(--green-deep);
font-size: 11px;
font-weight: 750;
}
.magic-task-source { margin-top: 5px; color: var(--muted); font-size: 11px; }
.magic-task-source summary { cursor: pointer; font-weight: 700; }
.magic-task-source p {
margin: 5px 0 0;
padding: 6px 8px;
border-left: 2px solid var(--sage);
color: var(--muted);
background: rgba(255, 255, 255, 0.58);
border-radius: 0 6px 6px 0;
}
.magic-task-card .btn { min-height: 30px; padding: 5px 9px; font-size: 11.5px; white-space: nowrap; }
.magic-task-project { color: var(--coral-deep) !important; }
.magic-task-modal-shell { max-width: 520px; }
.magic-task-modal-shell .modal-head { padding: 15px 18px; }
.magic-task-modal-shell .modal-body { padding: 14px 18px 16px; }
.magic-task-modal-shell .modal-foot { padding: 10px 18px; }
.magic-task-empty {
padding: 16px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
}
.magic-task-empty h3 {
margin: 0 0 6px;
}
@media (max-width: 720px) {
.meeting-magic-card { grid-template-columns: 1fr; }
.meeting-magic-actions { width: 100%; }
.meeting-magic-actions .meeting-ai-summary-btn { flex: 1 1 auto; justify-content: center; }
.meeting-magic-compact > summary { min-height: 52px; }
.meeting-magic-compact-body .meeting-ai-summary-btn { min-height: 44px; }
.magic-task-card {
grid-template-columns: 1fr;
}
.magic-task-card .btn {
width: 100%;
}
}
.chat-msg-acts {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 3px !important;
}
.chat-act-btn {
width: 24px !important;
height: 24px !important;
color: rgba(47, 85, 69, .6) !important;
background: transparent !important;
}
.chat-act-btn svg { width: 15px !important; height: 15px !important; }
.chat-act-btn:hover {
background: transparent !important;
color: var(--coral-deep) !important;
transform: scale(1.12);
}
.fcw { width: 344px !important; }
.floating-chat-dock .fchat-msg { max-width: 97%; }
.floating-chat-dock .fchat-msg.other { padding-right: 62px; }
.floating-chat-dock .fchat-msg.me { padding-left: 62px; }
.floating-chat-dock .fchat-bubble-wrap { max-width: 100% !important; }
.floating-chat-dock .fchat-bubble-line { position: static; gap: 0 !important; }
.floating-chat-dock .fchat-actions {
position: absolute !important;
top: 50%;
transform: translateY(-50%) !important;
display: inline-flex !important;
gap: 2px !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
overflow: visible !important;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease !important;
}
.floating-chat-dock .fchat-msg.other .fchat-actions { left: 100% !important; right: auto !important; margin-left: 5px !important; }
.floating-chat-dock .fchat-msg.me .fchat-actions { right: 100% !important; left: auto !important; margin-right: 5px !important; }
.floating-chat-dock .fchat-bubble-wrap:hover .fchat-actions,
.floating-chat-dock .fchat-bubble-wrap:focus-within .fchat-actions,
.floating-chat-dock .fchat-bubble-wrap.actions-open .fchat-actions {
opacity: .84;
pointer-events: auto;
}
.floating-chat-dock .fchat-actions button { width: 18px !important; height: 18px !important; }
.floating-chat-dock .fchat-actions button svg { width: 14px !important; height: 14px !important; }
.floating-chat-dock .fchat-actions button[data-fchat-more-menu] { font-size: 15px !important; }
@media (max-width: 760px) {
.fcw { width: auto !important; }
.floating-chat-dock .fchat-msg.other { padding-right: 76px; }
.floating-chat-dock .fchat-msg.me { padding-left: 76px; }
.floating-chat-dock .fchat-actions button { width: 24px !important; height: 24px !important; }
.floating-chat-dock .fchat-actions button svg { width: 16px !important; height: 16px !important; }
}
.task-form-v2 { display: flex; flex-direction: column; gap: 14px; }
.task-form-v2 .tf-hero input {
font-size: 16.5px;
font-weight: 600;
padding: 13px 14px;
border-radius: 12px;
}
.tf-hint {
margin: 6px 2px 0;
font-size: 11.5px;
color: var(--muted);
}
.tf-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px 14px;
align-items: start;
}
.prio-pills { display: flex; gap: 6px; }
.prio-pill {
position: relative;
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--ui-line-soft);
background: #fff;
border-radius: 999px;
padding: 10px 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.prio-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.prio-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; opacity: .55; }
.prio-pill.p-low .prio-dot { background: var(--sage-deep); }
.prio-pill.p-mid .prio-dot { background: var(--amber); }
.prio-pill.p-high .prio-dot { background: var(--coral); }
.prio-pill:has(input:checked) { font-weight: 800; }
.prio-pill:has(input:checked) .prio-dot { opacity: 1; }
.prio-pill.p-low:has(input:checked) { border-color: var(--sage-deep); background: var(--sage-soft); }
.prio-pill.p-mid:has(input:checked) { border-color: var(--amber); background: rgba(224, 172, 63, .14); }
.prio-pill.p-high:has(input:checked) { border-color: var(--coral); background: rgba(224, 122, 95, .13); }
.prio-pill:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(47, 85, 69, .18); }
.tf-more {
border: 1px dashed var(--ui-line-soft);
border-radius: 12px;
background: rgba(246, 241, 231, .5);
}
.tf-more summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
font-weight: 700;
font-size: 13px;
color: var(--green-deep);
border-radius: 12px;
}
.tf-more summary::-webkit-details-marker { display: none; }
.tf-more summary:hover { background: rgba(246, 241, 231, .9); }
.tf-more summary .hint { font-weight: 500; margin-left: 2px; }
.tf-more-arrow {
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
flex: 0 0 5px;
transition: transform .15s ease;
}
.tf-more[open] .tf-more-arrow { transform: rotate(90deg); }
.tf-more[open] summary { border-radius: 12px 12px 0 0; }
.tf-more-body {
padding: 4px 13px 13px;
display: flex;
flex-direction: column;
gap: 12px;
}
.task-form-section {
border: 1px solid var(--ui-line-soft);
border-radius: 12px;
background: rgba(255, 253, 248, .72);
padding: 12px;
}
.task-form-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(224, 216, 199, .58);
}
.task-form-section-head b {
color: var(--ink);
font-size: 13.5px;
}
.task-form-section-head span {
color: var(--muted);
font-size: 11.5px;
text-align: right;
}
@media (max-width: 560px) {
.tf-grid { grid-template-columns: 1fr; }
.prio-pill { padding: 11px 6px; }
.tf-more summary .hint { display: none; }
.task-form-section-head { display: block; }
.task-form-section-head span { display: block; text-align: left; margin-top: 2px; }
.task-waiting-details { grid-template-columns: 1fr; }
}
.dash-top {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
gap: 22px;
align-items: stretch;
margin-bottom: 18px;
}
.dash-today,
.dash-side > * {
border: 1px solid var(--ui-line);
background: rgba(255, 253, 248, .82);
box-shadow: var(--shadow-soft);
}
.dash-today {
border-radius: 10px;
padding: 26px;
position: relative;
overflow: hidden;
}
.dash-today::after,
.dash-day-event::after,
.dash-meeting-list::after,
.dash-section > .card::after {
content: "";
position: absolute;
right: -34px;
top: -42px;
width: 112px;
height: 112px;
border-radius: 50%;
background: rgba(231, 119, 91, .055);
pointer-events: none;
}
.dash-today > * {
position: relative;
z-index: 1;
}
.dash-section > .card:nth-child(even)::after,
.dash-meeting-list::after {
background: rgba(128, 150, 123, .08);
}
.dash-today-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
padding-bottom: 17px;
border-bottom: 1px solid var(--ui-line-soft);
}
.dash-kicker,
.dash-side-kicker,
.dash-day-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--coral);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.dash-today h2 {
margin: 5px 0 0;
font-family: var(--display);
font-size: clamp(28px, 3.3vw, 38px);
line-height: 1;
color: var(--ink);
}
.dash-today-line {
max-width: 760px;
margin: 18px 0 0;
color: var(--muted);
font-size: 15.5px;
line-height: 1.45;
}
.dash-status-strip {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 18px;
}
.dash-status-pill {
appearance: none;
border: 1px solid var(--ui-line);
border-radius: 9px;
background: var(--paper);
color: var(--ink);
min-width: 94px;
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.dash-status-pill b {
display: block;
font-family: var(--display);
font-size: 22px;
line-height: 1;
color: var(--green-deep);
}
.dash-status-pill.warn b { color: var(--amber); }
.dash-status-pill span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.2; }
.dash-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 0;
}
.dash-quick-actions .btn {
flex: 0 0 auto;
padding-left: 18px;
padding-right: 18px;
}
.dash-now-inline {
padding-top: 2px;
}
.dash-side {
display: grid;
gap: 14px;
align-content: start;
}
.dash-day-event,
.dash-next-meeting,
.dash-meeting-row {
display: block;
width: 100%;
border-radius: 10px;
padding: 16px;
text-align: left;
cursor: pointer;
}
.dash-day-event {
min-height: 196px;
border-color: var(--ui-line);
background: rgba(255, 253, 248, .86);
position: relative;
overflow: hidden;
}
.dash-day-event::after {
background: rgba(231, 119, 91, .075);
}
.dash-day-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
z-index: 1;
}
.dash-day-date {
flex: 0 0 auto;
border: 1px solid var(--ui-line);
background: rgba(255, 255, 255, .62);
color: var(--green-deep);
border-radius: 999px;
padding: 5px 9px;
font-size: 12px;
font-weight: 800;
}
.dash-day-title {
display: block;
margin-top: 16px;
font-family: var(--display);
font-size: 21px;
line-height: 1.1;
color: var(--ink);
position: relative;
z-index: 1;
}
.dash-day-text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 9px;
color: var(--muted);
line-height: 1.45;
font-size: 14px;
position: relative;
z-index: 1;
}
.dash-day-link,
.dash-next-meeting em {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
color: var(--green-deep);
font-weight: 800;
font-size: 13px;
font-style: normal;
position: relative;
z-index: 1;
}
.dash-day-link svg { width: 16px; height: 16px; }
.dash-day-kicker svg {
width: 54px;
height: 54px;
flex: 0 0 54px;
stroke-width: 1.8;
}
.dash-next-meeting {
border-left: 5px solid var(--amber);
}
.dash-meeting-list {
display: grid;
gap: 0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.dash-meeting-row {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 13px;
border: 0;
border-bottom: 1px solid var(--ui-line-soft);
background: transparent;
box-shadow: none;
position: relative;
z-index: 1;
}
.dash-meeting-row:last-child { border-bottom: 0; }
.dash-meeting-row.empty {
cursor: default;
opacity: .72;
}
.dash-meeting-date {
width: 48px;
height: 52px;
border-radius: 9px;
display: grid;
place-items: center;
align-content: center;
background: rgba(225, 155, 53, .10);
color: var(--amber);
text-transform: uppercase;
border: 1px solid rgba(225, 155, 53, .18);
}
.dash-meeting-date strong {
display: block;
font-family: var(--display);
font-size: 20px;
line-height: 1;
color: var(--amber);
}
.dash-meeting-date span {
display: block;
margin-top: 2px;
color: var(--amber);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .08em;
}
.dash-meeting-date.muted {
background: rgba(128, 150, 123, .11);
border-color: rgba(128, 150, 123, .16);
color: var(--muted);
font-weight: 800;
}
.dash-meeting-body { min-width: 0; }
.dash-meeting-row b {
display: block;
margin-top: 6px;
color: var(--ink);
font-size: 15.5px;
line-height: 1.2;
}
.dash-meeting-body > span:not(.dash-side-kicker) {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.dash-meeting-body > .dash-meeting-hint {
display: inline-flex;
width: fit-content;
max-width: 100%;
margin-top: 8px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(128, 150, 123, .12);
color: var(--green-deep);
font-size: 11.5px;
font-weight: 700;
}
.dash-next-meeting b {
display: block;
margin-top: 9px;
color: var(--ink);
font-size: 19px;
}
.dash-next-meeting span:not(.dash-side-kicker) {
display: block;
margin-top: 5px;
color: var(--muted);
line-height: 1.35;
}
.dash-next-meeting.empty { cursor: default; opacity: .78; }
.dash-section { margin-top: 22px; }
.dash-card-action {
margin-top: 12px;
}
.dash-onboarding {
border: 1px solid rgba(128, 150, 123, .22);
background: rgba(255, 253, 248, .86);
border-radius: 10px;
box-shadow: var(--shadow-soft);
padding: 20px;
position: relative;
overflow: hidden;
}
.dash-onboarding::after {
content: "";
position: absolute;
right: -34px;
top: -48px;
width: 118px;
height: 118px;
border-radius: 50%;
background: rgba(128, 150, 123, .08);
pointer-events: none;
}
.dash-onboarding > * {
position: relative;
z-index: 1;
}
.dash-onboarding-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.dash-onboarding h3 {
margin: 5px 0 0;
font-family: var(--display);
font-size: 22px;
line-height: 1.12;
color: var(--ink);
}
.dash-onboarding > p {
margin: 12px 0 0;
color: var(--muted);
max-width: 860px;
line-height: 1.5;
font-size: 14px;
}
.dash-onboarding-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.dash-onboarding-step {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid var(--ui-line-soft);
border-radius: 10px;
background: #fff;
}
.dash-onboarding-step.done {
background: rgba(128, 150, 123, .08);
border-color: rgba(128, 150, 123, .18);
}
.dash-onboarding-mark {
width: 26px;
height: 26px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(231, 119, 91, .10);
color: var(--coral-deep);
font-weight: 900;
}
.dash-onboarding-step.done .dash-onboarding-mark {
background: rgba(128, 150, 123, .16);
color: var(--green-deep);
}
.dash-onboarding-copy {
min-width: 0;
}
.dash-onboarding-copy b {
display: block;
color: var(--ink);
font-size: 13.5px;
}
.dash-onboarding-copy small {
display: block;
margin-top: 2px;
color: var(--muted);
line-height: 1.35;
font-size: 12px;
}
.dash-onboarding-done {
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.dash-onboarding-help {
appearance: none;
border: 0;
background: transparent;
padding: 0;
font-weight: 850;
cursor: pointer;
}
.dash-newbie {
border: 1px solid rgba(47, 85, 69, .12);
background: rgba(255, 253, 248, .74);
border-radius: 10px;
box-shadow: var(--shadow-soft);
padding: 28px;
position: relative;
overflow: hidden;
}
.dash-newbie::after {
content: "";
position: absolute;
right: -40px;
top: -50px;
width: 124px;
height: 124px;
border-radius: 50%;
background: rgba(231, 119, 91, .055);
pointer-events: none;
}
.dash-newbie > * {
position: relative;
z-index: 1;
}
.dash-newbie-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
}
.dash-newbie h3 {
margin: 5px 0 0;
font-family: var(--display);
color: var(--ink);
font-size: 24px;
line-height: 1.1;
}
.dash-newbie-lead {
max-width: 880px;
margin: 14px 0 0;
color: var(--muted);
font-size: 14.5px;
line-height: 1.65;
}
.dash-newbie-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 22px;
}
.dash-newbie-card {
border: 1px solid rgba(47, 85, 69, .10);
border-radius: 10px;
background: rgba(255, 255, 255, .64);
padding: 20px;
min-width: 0;
}
.dash-newbie-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(231, 119, 91, .11);
color: var(--coral-deep);
font-size: 12px;
font-weight: 900;
}
.dash-newbie-card h4 {
margin: 14px 0 8px;
color: var(--ink);
font-size: 17px;
line-height: 1.15;
}
.dash-newbie-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.62;
}
.dash-newbie-actions,
.dash-newbie-footer {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 18px;
}
.dash-newbie-actions .small-btn,
.dash-newbie-footer .btn {
width: auto;
}
.dash-newbie-tasklist {
margin-top: 14px;
}
.dash-newbie-tasklist .now-item {
padding: 12px 0;
background: transparent;
border-left: 0;
border-right: 0;
border-radius: 0;
margin-top: 0;
}
.dash-newbie-mini-meetings {
margin-top: 14px;
border: 1px solid rgba(47, 85, 69, .10);
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, .52);
}
.dash-newbie-mini-meetings .dash-meeting-row {
grid-template-columns: 46px minmax(0, 1fr);
gap: 10px;
padding: 13px;
}
.dash-newbie-mini-meetings .dash-meeting-date {
width: 42px;
height: 44px;
}
.dash-newbie-mini-meetings .dash-meeting-row b {
font-size: 14px;
}
.dash-newbie-footer {
padding-top: 20px;
margin-top: 18px;
border-top: 1px solid var(--ui-line-soft);
}
.pj-signal {
display: inline-flex;
align-items: center;
margin-left: 7px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(128, 150, 123, .12);
color: var(--green-deep);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.pj-signal.over {
background: rgba(231, 119, 91, .12);
color: var(--coral-deep);
}
.dash-section > .card {
position: relative;
overflow: hidden;
}
.dash-section > .card > * {
position: relative;
z-index: 1;
}
.now-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border: 1px solid var(--ui-line-soft);
border-radius: 12px;
margin-top: 8px;
cursor: pointer;
background: #fff;
transition: border-color .13s ease, transform .13s ease, box-shadow .13s ease;
}
.now-item:hover {
border-color: var(--coral);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(74, 58, 40, .08);
}
.now-main { flex: 1; min-width: 0; }
.now-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.now-why { font-size: 12px; color: var(--muted); margin-top: 2px; }
.now-why.over { color: var(--coral-deep); font-weight: 600; }
.now-open {
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
color: var(--coral-deep);
white-space: nowrap;
}
.now-focus {
display: flex;
align-items: center;
gap: 16px;
margin-top: 12px;
padding: 17px 18px;
border-radius: 16px;
border: 1px solid rgba(224, 122, 95, .28);
background:
radial-gradient(130% 150% at 0% 0%, rgba(224, 122, 95, .15), transparent 56%),
linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 253, 248, .9));
box-shadow: 0 10px 26px rgba(224, 122, 95, .13), 0 1px 2px rgba(43, 66, 58, .04);
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.now-focus::after {
content: "";
position: absolute;
right: -30px;
top: -36px;
width: 108px;
height: 108px;
border-radius: 50%;
border: 1px solid rgba(224, 122, 95, .16);
box-shadow: 0 0 0 16px rgba(224, 122, 95, .05);
pointer-events: none;
}
.now-focus:hover {
transform: translateY(-1px);
border-color: rgba(224, 122, 95, .5);
box-shadow: 0 16px 34px rgba(224, 122, 95, .18), 0 1px 2px rgba(43, 66, 58, .05);
}
.now-focus.over { border-color: rgba(224, 122, 95, .42); }
.now-focus-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.now-focus-title {
font-family: var(--display);
font-size: 18px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--ink);
}
.now-focus-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.now-chip {
display: inline-flex;
align-items: center;
font-size: 11.5px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
background: rgba(56, 85, 74, .06);
color: var(--muted);
white-space: nowrap;
}
.now-chip-reason { background: rgba(56, 85, 74, .07); color: var(--green-deep); }
.now-chip-proj { background: rgba(169, 184, 164, .22); color: var(--green-deep); }
.now-chip-when {
background: rgba(255, 255, 255, .82);
border: 1px solid var(--look-line, rgba(56, 85, 74, .13));
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.now-chip-when.over {
background: rgba(224, 122, 95, .12);
border-color: rgba(224, 122, 95, .34);
color: var(--coral-deep);
font-weight: 700;
}
.now-focus-open {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 15px;
border-radius: 11px;
background: var(--coral);
color: #fff;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(224, 122, 95, .3);
position: relative;
z-index: 1;
transition: background .13s ease;
}
.now-focus-open svg { width: 15px; height: 15px; }
.now-focus:hover .now-focus-open { background: var(--coral-deep); }
.now-rest { margin-top: 12px; }
.now-rest-head {
margin: 0 2px 4px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.now-rest-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
margin: 0 -6px;
border-radius: 10px;
cursor: pointer;
transition: background .12s ease;
}
.now-rest-item:hover { background: rgba(169, 184, 164, .13); }
.now-rest-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-deep); }
.now-rest-dot.over { background: var(--coral); }
.now-rest-title {
flex: 1;
min-width: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.now-rest-proj { font-weight: 500; color: var(--muted); }
.now-rest-when {
flex: 0 0 auto;
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.now-rest-when.over { color: var(--coral-deep); font-weight: 700; }
@media (max-width: 560px) {
.now-focus { gap: 12px; padding: 15px; }
.now-focus-title { font-size: 16.5px; }
.now-focus-open { padding: 8px 12px; font-size: 12.5px; }
}
.wait-item,
.care-item {
padding: 10px 2px;
border-bottom: 1px dashed var(--ui-line-soft);
}
.wait-item { cursor: pointer; }
.wait-item:last-child, .care-item:last-child { border-bottom: 0; }
.wait-title, .care-title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.wait-why, .care-why { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.wait-why b { color: var(--green-deep); }
.care-item { display: flex; align-items: center; gap: 10px; }
.care-item.explicit-help {
padding: 11px 10px;
margin: 0 -8px;
border-radius: 10px;
background: rgba(224, 122, 95, .055);
border-bottom-color: transparent;
}
.care-main { flex: 1; min-width: 0; cursor: pointer; }
.care-btn { flex: 0 0 auto; white-space: nowrap; }
.care-mine-hint {
margin: 10px 2px 0;
font-size: 12px;
color: var(--muted);
font-style: italic;
}
@media (max-width: 760px) {
.dash-top { grid-template-columns: 1fr; gap: 14px; }
.dash-today { padding: 19px; }
.dash-today-head { display: block; }
.dash-today h2 { font-size: 30px; }
.dash-today-line { font-size: 14.5px; }
.dash-status-strip { justify-content: flex-start; margin-top: 14px; }
.dash-status-pill { flex: 1 1 92px; }
.dash-quick-actions .btn { flex: 1 1 auto; }
.dash-day-kicker svg {
width: 48px;
height: 48px;
flex-basis: 48px;
}
.dash-onboarding { padding: 16px; }
.dash-onboarding-head { display: block; }
.dash-onboarding-head .small-btn { margin-top: 12px; }
.dash-onboarding-grid { grid-template-columns: 1fr; }
.dash-onboarding-step {
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
}
.dash-onboarding-step .small-btn,
.dash-onboarding-done {
grid-column: 2;
justify-self: start;
margin-top: 6px;
}
.dash-newbie {
padding: 16px;
}
.dash-newbie-head {
display: block;
}
.dash-newbie-head .small-btn {
margin-top: 12px;
}
.dash-newbie h3 {
font-size: 22px;
}
.dash-newbie-grid {
grid-template-columns: 1fr;
}
.dash-newbie-card {
padding: 14px;
}
.dash-newbie-footer .btn,
.dash-newbie-actions .small-btn {
flex: 1 1 auto;
justify-content: center;
}
.dash-day-event { min-height: 0; }
.dash-side { display: flex; flex-direction: column; }
.dash-meeting-list { order: -1; }
.dash-meeting-row {
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
padding: 14px;
}
.dash-meeting-date {
width: 44px;
height: 48px;
}
.dash-meeting-date strong { font-size: 19px; }
.care-item { flex-wrap: wrap; }
.care-btn { margin-left: 0; }
}
.app-footer {
margin: 34px 2px 8px;
text-align: center;
font-size: 11.5px;
color: var(--muted);
opacity: .62;
letter-spacing: .01em;
}
.app-footer:empty { display: none; }
:root {
--radius: 18px;
--radius-lg: 24px;
}
.btn,
.small-btn,
.flt {
border-radius: 999px;
}
.btn-primary { box-shadow: 0 6px 18px rgba(224, 122, 95, .22); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(224, 122, 95, .28); }
.seg { border-radius: 999px; }
.seg-btn { border-radius: 999px; transition: background .15s ease, color .15s ease; }
.nav-btn { border-radius: 999px; transition: background .15s ease, color .15s ease; }
.btn:focus-visible,
.small-btn:focus-visible,
.nav-btn:focus-visible,
.seg-btn:focus-visible {
outline: 2px solid rgba(224, 122, 95, .55);
outline-offset: 2px;
}
.empty-state {
align-content: center;
gap: 10px;
border-color: rgba(134, 151, 127, .32);
background: rgba(246, 241, 231, .55);
}
.empty-state::before {
content: "";
width: 30px;
height: 30px;
opacity: .55;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2386977f" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21v-8"/><path d="M12 13C12 9.5 9.4 7 5.5 7c0 3.6 2.5 6 6.5 6z"/><path d="M12 11c0-3.2 2.4-5.5 6-5.5 0 3.3-2.3 5.5-6 5.5z"/></svg>') center / contain no-repeat;
}
.tline:hover { border-radius: 12px; }
.modal { border-radius: var(--radius-lg); box-shadow: 0 24px 70px rgba(46, 36, 26, .28); }
#toast { border-radius: 999px; box-shadow: 0 10px 30px rgba(46, 36, 26, .24); }
html { scrollbar-color: rgba(134, 151, 127, .55) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(134, 151, 127, .4);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(134, 151, 127, .6); }
.task-list {
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.card.task-list .tk,
.card.task-list .tk:last-child {
background: #fff;
border: 1px solid var(--ui-line-soft);
border-radius: 16px;
box-shadow: var(--ui-shadow-soft);
transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.card.task-list .tk:hover {
background: #fff;
border-color: var(--sage);
box-shadow: var(--ui-shadow-hover);
transform: translateY(-1px);
}
.card.task-list .tk.is-waiting {
background: linear-gradient(0deg, rgba(201, 211, 196, .16), rgba(201, 211, 196, .16)), #fff;
}
.card.task-list .tk.is-done { opacity: .72; }
.card.task-list .tk.is-done:hover { opacity: 1; }
.task-list .tk-dl {
background: var(--cream);
border: 1px solid var(--ui-line-soft);
border-radius: 12px;
padding: 7px 11px;
min-width: 76px;
text-align: center;
}
.task-list .tk-dl.over {
background: rgba(224, 122, 95, .10);
border-color: rgba(224, 122, 95, .28);
}
.meetings-list { gap: 10px; }
.meetings-list .meetcard {
border: 1px solid var(--ui-line-soft);
border-radius: 16px;
box-shadow: var(--ui-shadow-soft);
transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
align-items: center;
}
.meetings-list .meetcard:hover {
border-color: var(--sage);
box-shadow: var(--ui-shadow-hover);
transform: translateY(-1px);
}
.meetings-list .meetcard::after {
content: "›";
margin-left: auto;
padding-right: 2px;
font-size: 22px;
font-weight: 700;
color: var(--coral);
opacity: 0;
transform: translateX(-4px);
transition: opacity .14s ease, transform .14s ease;
}
.meetings-list .meetcard:hover::after { opacity: 1; transform: none; }
.mc-date {
width: 54px;
height: 58px;
padding: 0;
display: grid;
place-items: center;
align-content: center;
background: rgba(47, 85, 69, .08);
color: var(--green);
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 14px;
}
.mc-date .my { color: inherit; opacity: .8; }
.mc-date.future {
background: rgba(217, 154, 68, .12);
color: var(--amber);
border-color: rgba(217, 154, 68, .25);
}
.dash-onboarding-help {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 18px;
margin-top: 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: var(--green-deep);
font-size: 13.5px;
font-weight: 700;
}
.dash-onboarding-help:hover { background: var(--cream-deep); border-color: var(--sage); }
.idea-plant { margin-bottom: 18px; }
.idea-prompt {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
text-align: left;
margin: 0 0 10px;
padding: 9px 14px;
border: 1px dashed rgba(224, 122, 95, .38);
border-radius: 14px;
background: rgba(224, 122, 95, .07);
color: var(--ink);
font: inherit;
cursor: pointer;
transition: background .14s ease, border-color .14s ease;
}
.idea-prompt:hover { background: rgba(224, 122, 95, .12); border-color: rgba(224, 122, 95, .55); }
.idea-prompt-ico { flex: 0 0 auto; display: inline-flex; color: var(--coral-deep); }
.idea-prompt-ico svg { width: 17px; height: 17px; }
.idea-prompt-txt { font-size: 13.5px; line-height: 1.35; }
.idea-prompt-txt b { color: var(--coral-deep); font-weight: 700; }
.idea-plant-row { display: flex; gap: 10px; flex-wrap: wrap; }
.idea-plant-row input[type="text"] {
flex: 1 1 320px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid var(--ui-line);
border-radius: 999px;
background: rgba(255, 253, 248, .9);
font: inherit;
color: var(--ink);
}
.idea-plant-row input[type="text"]:focus {
outline: none;
border-color: var(--coral);
box-shadow: 0 0 0 3px var(--ui-focus);
background: #fff;
}
.idea-plant-btn { width: auto; flex: 0 0 auto; padding: 0 22px; }
.idea-plant-quiet {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 9px;
font-size: 12.5px;
color: var(--muted);
cursor: pointer;
}
.idea-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
}
.idea-card {
background: #fff;
border: 1px solid var(--ui-line-soft);
border-radius: 16px;
box-shadow: var(--ui-shadow-soft);
padding: 14px 15px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, opacity .3s ease;
}
.idea-card:hover {
border-color: var(--sage);
box-shadow: var(--ui-shadow-hover);
transform: translateY(-1px);
opacity: 1 !important;
}
.idea-card.stage-kompost { background: rgba(239, 232, 217, .55); }
.idea-card.stage-preneseno { background: rgba(201, 211, 196, .18); }
.idea-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.idea-card-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.idea-card-det {
margin: 0;
font-size: 12.5px;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.idea-card-transplant { font-size: 12px; color: var(--green-deep); font-weight: 600; }
.idea-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding-top: 4px;
}
.idea-card-meta { font-size: 11.5px; color: var(--muted); }
.idea-card-counts { display: inline-flex; gap: 9px; align-items: center; }
.idea-count { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--green-deep); }
.idea-count svg { width: 14px; height: 14px; }
.idea-count-notes { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.idea-wilt-hint { font-size: 11px; color: var(--coral-deep); font-weight: 600; }
.idea-stage-tag {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.idea-stage-tag.stage-seminko { background: var(--cream-deep); color: var(--muted); }
.idea-stage-tag.stage-klici { background: rgba(169, 184, 164, .3); color: var(--green-deep); }
.idea-stage-tag.stage-roste { background: rgba(94, 154, 111, .16); color: var(--ok); }
.idea-stage-tag.stage-preneseno { background: rgba(217, 154, 68, .15); color: var(--amber); }
.idea-stage-tag.stage-kompost { background: rgba(155, 166, 158, .18); color: var(--grey); }
.idea-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.idea-detail-det { margin: 0 0 12px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.idea-transplant-info { margin: 0 0 12px; font-size: 13px; color: var(--green-deep); }
.idea-react-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.idea-react-btn {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 38px;
padding: 7px 15px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: var(--green-deep);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .14s ease, border-color .14s ease;
}
.idea-react-btn svg { width: 15px; height: 15px; }
.idea-react-btn:hover { background: var(--cream); }
.idea-react-btn.on { background: rgba(224, 122, 95, .12); border-color: rgba(224, 122, 95, .4); color: var(--coral-deep); }
.idea-notes-head {
font-size: 11px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--coral-deep);
margin-bottom: 8px;
}
.idea-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.idea-note {
border-left: 3px solid var(--sage);
background: rgba(246, 241, 231, .5);
border-radius: 0 12px 12px 0;
padding: 8px 12px;
}
.idea-note.kind-otazka { border-left-color: var(--amber); }
.idea-note.kind-uskali { border-left-color: var(--coral); }
.idea-note.kind-odjinud { border-left-color: var(--green-soft); }
.idea-note.kind-navazuje { border-left-color: var(--grey); }
.idea-note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.idea-note-kind { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--green-deep); }
.idea-note-meta { font-size: 11px; color: var(--muted); }
.idea-note-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.idea-note-form { margin-bottom: 14px; }
.idea-note-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.idea-kind-pill { position: relative; cursor: pointer; }
.idea-kind-pill input { position: absolute; opacity: 0; pointer-events: none; }
.idea-kind-pill span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 4px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
font-size: 12px;
font-weight: 700;
color: var(--muted);
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.idea-kind-pill:hover span { background: var(--cream); }
.idea-kind-pill input:checked + span { background: var(--coral); border-color: var(--coral); color: #fff; }
.idea-note-input-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.idea-note-input-row textarea {
flex: 1 1 240px;
padding: 9px 13px;
border: 1px solid var(--ui-line);
border-radius: 14px;
background: rgba(255, 253, 248, .9);
font: inherit;
font-size: 13.5px;
resize: vertical;
}
.idea-note-input-row .btn { width: auto; flex: 0 0 auto; padding: 0 18px; min-height: 38px; }
.idea-detail-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
border-top: 1px solid var(--ui-line-soft);
padding-top: 12px;
}
.idea-count-meeting { color: var(--coral-deep); }
.idea-count-meeting svg { width: 13px; height: 13px; }
.idea-community-care {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 2px 0 16px;
padding: 12px 14px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 14px;
background: rgba(237,244,236,.58);
}
.idea-community-care.is-empty { justify-content: flex-start; }
.idea-community-care > div > b,
.idea-community-care > div > span { display: block; }
.idea-community-care > div > b { color: var(--green-deep); font-size: 12.5px; }
.idea-community-care > div > span { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.idea-community-care-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: rgba(169,184,164,.24); color: var(--sage-deep); }
.idea-community-care-icon svg { width: 17px; height: 17px; }
.idea-community-avatars { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; padding-left: 8px; }
.idea-community-avatars button { width: 30px; height: 30px; margin-left: -8px; padding: 0; border: 2px solid var(--paper); border-radius: 50%; background: var(--sage-soft); cursor: pointer; transition: transform .16s var(--motion-ease); }
.idea-community-avatars button:first-child { margin-left: 0; }
.idea-community-avatars button:hover { z-index: 2; transform: translateY(-2px); }
.idea-community-avatar { width: 100%; height: 100%; }
.idea-community-avatars > span { display: grid; place-items: center; min-width: 28px; height: 28px; margin-left: -5px; padding: 0 5px; border: 2px solid var(--paper); border-radius: 999px; background: var(--cream-deep); color: var(--muted); font-size: 10px; font-weight: 800; }
.idea-grow-disclosure { margin-top: 14px; border: 1px solid rgba(47,85,69,.14); border-radius: 16px; background: rgba(255,253,248,.62); overflow: hidden; }
.idea-grow-disclosure > summary { display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 58px; padding: 9px 13px; color: var(--ink); cursor: pointer; list-style: none; }
.idea-grow-disclosure > summary::-webkit-details-marker { display: none; }
.idea-grow-disclosure > summary:hover { background: rgba(237,244,236,.5); }
.idea-grow-disclosure > summary b,
.idea-grow-disclosure > summary small { display: block; }
.idea-grow-disclosure > summary b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.idea-grow-disclosure > summary small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.idea-grow-summary-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(169,184,164,.2); color: var(--sage-deep); }
.idea-grow-summary-icon svg { width: 17px; height: 17px; }
.idea-grow-disclosure > summary > i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: rgba(47,85,69,.07); transition: transform .2s var(--motion-ease), background .2s ease; }
.idea-grow-disclosure > summary > i::before,
.idea-grow-disclosure > summary > i::after { content: ""; position: absolute; top: 8px; width: 6px; height: 1.5px; border-radius: 2px; background: var(--sage-deep); }
.idea-grow-disclosure > summary > i::before { left: 4px; transform: rotate(40deg); }
.idea-grow-disclosure > summary > i::after { right: 4px; transform: rotate(-40deg); }
.idea-grow-disclosure[open] > summary > i { transform: rotate(180deg); background: rgba(224,122,95,.1); }
.idea-grow-panel { margin: 0 10px 10px; padding: 16px; border: 1px solid rgba(224,122,95,.17); border-radius: 14px; background: linear-gradient(135deg, rgba(255,249,244,.95), rgba(246,241,231,.62)); }
.idea-grow-head h3 { margin: 3px 0 4px; font: 700 18px/1.25 var(--font-display); color: var(--ink); }
.idea-grow-head p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.idea-grow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.idea-grow-path {
display: grid;
grid-template-columns: 34px minmax(0,1fr) auto;
align-items: center;
gap: 9px;
min-width: 0;
padding: 11px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 13px;
background: rgba(255,255,255,.75);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform .16s var(--motion-ease), border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.idea-grow-path:hover { border-color: rgba(47,85,69,.27); background: #fff; box-shadow: 0 8px 20px rgba(47,85,69,.07); transform: translateY(-1px); }
.idea-grow-path.is-informational { cursor: default; opacity: .78; }
.idea-grow-path.is-informational:hover { border-color: rgba(47,85,69,.14); background: rgba(255,255,255,.75); box-shadow: none; transform: none; }
.idea-grow-path.on { border-color: rgba(75,135,94,.34); background: rgba(237,244,236,.9); }
.idea-grow-path-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(169,184,164,.2); color: var(--sage-deep); }
.idea-grow-path.meeting .idea-grow-path-icon { background: rgba(224,122,95,.11); color: var(--coral-deep); }
.idea-grow-path-icon svg { width: 17px; height: 17px; }
.idea-grow-path b,
.idea-grow-path small { display: block; }
.idea-grow-path b { font-size: 12px; line-height: 1.25; }
.idea-grow-path small { margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.idea-grow-path > i { color: var(--sage-deep); font-size: 15px; font-style: normal; font-weight: 800; }
.idea-project-picker > p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.idea-project-choice-list { display: flex; flex-direction: column; gap: 7px; max-height: min(52vh,420px); margin-bottom: 12px; overflow-y: auto; }
.idea-project-choice { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.74); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.idea-project-choice:hover { border-color: rgba(47,85,69,.28); background: #fff; }
.idea-project-choice-avatar { width: 38px; height: 38px; }
.idea-project-choice b,
.idea-project-choice small { display: block; }
.idea-project-choice b { font-size: 12.5px; }
.idea-project-choice small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.idea-project-choice > i { color: var(--sage-deep); font-style: normal; font-weight: 800; }
.idea-form-origin,
.work-origin-link {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
box-sizing: border-box;
margin: 0 0 14px;
padding: 11px 13px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 14px;
background: rgba(237,244,236,.68);
color: var(--ink);
}
.idea-form-origin svg { width: 19px; height: 19px; color: var(--sage-deep); }
.idea-form-origin b,
.idea-form-origin span,
.work-origin-link small,
.work-origin-link b { display: block; }
.idea-form-origin b { font-size: 12px; }
.idea-form-origin span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.work-origin-link { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; margin-top: 12px; font: inherit; text-align: left; cursor: pointer; }
.work-origin-link:hover { border-color: rgba(47,85,69,.28); background: rgba(237,244,236,.95); }
.work-origin-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(169,184,164,.23); color: var(--sage-deep); }
.work-origin-icon svg { width: 18px; height: 18px; }
.work-origin-link small { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.work-origin-link b { margin-top: 2px; font-size: 12px; }
.work-origin-link > i { color: var(--sage-deep); font-size: 10.5px; font-style: normal; font-weight: 800; }
.project-origin-link { max-width: 620px; margin: 12px 0 16px; }
.dash-seed-card {
background: #fff;
border: 1px solid var(--ui-line-soft);
border-radius: 16px;
box-shadow: var(--ui-shadow-soft);
padding: 14px 15px;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 9px;
}
.dash-seed-card .dash-side-kicker { display: inline-flex; align-items: center; gap: 6px; }
.dash-seed-card .dash-side-kicker svg { width: 14px; height: 14px; color: var(--sage-deep); }
.dash-seed-idea {
display: block;
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 0;
cursor: pointer;
}
.dash-seed-idea b { display: block; font-size: 14px; line-height: 1.4; color: var(--ink); }
.dash-seed-idea span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.dash-seed-idea:hover b { color: var(--coral-deep); }
.dash-seed-empty { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.dash-seed-all { align-self: flex-start; }
@media (max-width: 700px) {
.idea-grid { grid-template-columns: 1fr; }
.idea-plant-btn { flex: 1 1 auto; }
.idea-grow-grid { grid-template-columns: 1fr; }
.idea-community-care { align-items: flex-start; flex-direction: column; }
.idea-community-avatars { padding-left: 0; }
.work-origin-link { grid-template-columns: 34px minmax(0,1fr); }
.work-origin-link > i { grid-column: 2; }
}
.task-flow-board {
min-width: 0;
}
.task-flow-toolbar,
.task-flow-link-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.task-flow-toolbar {
margin-bottom: 16px;
}
.task-flow-toolbar > div {
min-width: 0;
}
.task-flow-toolbar b {
display: block;
font-size: 15px;
color: var(--ink);
}
.task-flow-toolbar p,
.task-flow-link-banner span {
margin: 4px 0 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--muted);
}
.task-flow-toolbar .btn svg {
width: 16px;
height: 16px;
}
.task-flow-toolbar .btn,
.task-flow-empty .btn {
width: auto;
flex: 0 0 auto;
}
.task-flow-link-banner {
margin: 0 0 14px;
padding: 12px 14px;
border-left: 3px solid var(--coral);
background: rgba(224, 122, 95, .07);
}
.task-flow-link-banner > div:last-child {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.task-flow-link-banner b,
.task-flow-link-banner span {
display: block;
}
.task-flow-tracks {
display: grid;
gap: 14px;
}
.task-flow-track {
min-width: 0;
padding: 14px;
border: 1px solid var(--ui-line-soft);
border-radius: 8px;
background: rgba(255, 255, 255, .42);
}
.task-flow-track-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
padding-bottom: 11px;
border-bottom: 1px solid var(--line);
}
.task-flow-track-head > div:first-child { min-width: 0; }
.task-flow-track-head > div:first-child > span {
display: block;
margin-bottom: 3px;
color: var(--coral-deep);
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
}
.task-flow-track-head h3 {
margin: 0;
font-size: 15px;
line-height: 1.35;
letter-spacing: 0;
}
.task-flow-progress {
display: flex;
align-items: baseline;
gap: 5px;
flex: 0 0 auto;
color: var(--muted);
}
.task-flow-progress-bar {
width: 74px;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: var(--sage-soft);
}
.task-flow-progress-bar i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--go);
}
.task-flow-progress b { color: var(--sage-deep); font-size: 13px; }
.task-flow-progress span { font-size: 10.5px; }
.task-flow-track-canvas {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(238px, 1fr);
gap: 12px;
align-items: start;
overflow-x: auto;
padding: 2px 2px 12px;
scroll-snap-type: x proximity;
}
.task-flow-column {
min-width: 0;
}
.task-flow-column:not(:first-child)::before {
content: "→";
position: absolute;
top: 62px;
left: -11px;
z-index: 2;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--cream);
color: var(--coral-deep);
font-size: 11px;
font-weight: 800;
}
.task-flow-column > header {
display: flex;
align-items: center;
gap: 9px;
min-height: 47px;
padding: 0 4px 10px;
border-bottom: 1px solid var(--line);
}
.task-flow-column > header > span {
color: var(--coral-deep);
font-size: 11px;
font-weight: 800;
}
.task-flow-column > header b,
.task-flow-column > header small {
display: block;
}
.task-flow-column > header b {
font-size: 13.5px;
color: var(--ink);
}
.task-flow-column > header small {
margin-top: 2px;
font-size: 10.5px;
color: var(--muted);
}
.task-flow-column-cards {
display: grid;
gap: 8px;
padding-top: 9px;
}
.task-flow-card {
position: relative;
min-width: 0;
padding: 11px 11px 10px;
border-left: 3px solid var(--sage-deep);
border-radius: 8px;
background: rgba(255, 255, 255, .86);
box-shadow: 0 3px 10px rgba(34, 48, 42, .045);
transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, opacity .14s ease;
}
.task-flow-card[draggable="true"] {
cursor: grab;
}
.task-flow-card[draggable="true"]:active {
cursor: grabbing;
}
.task-flow-card.status-blocked,
.task-flow-card.status-waiting {
border-left-color: var(--amber);
}
.task-flow-card.status-done {
border-left-color: var(--go);
background: rgba(244, 246, 241, .78);
}
.task-flow-card.is-link-source {
border-color: var(--coral);
box-shadow: 0 0 0 2px rgba(224, 122, 95, .13);
}
.task-flow-card.is-link-target {
border-style: dashed;
}
.task-flow-card.is-dragging {
opacity: .45;
}
.task-flow-card.is-drag-over {
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(224, 122, 95, .16);
transform: translateY(-2px);
}
.task-flow-card-top,
.task-flow-meta,
.task-flow-actions {
display: flex;
align-items: center;
}
.task-flow-card-top {
justify-content: space-between;
gap: 8px;
}
.task-flow-state {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--sage-deep);
}
.status-blocked .task-flow-state,
.status-waiting .task-flow-state {
color: #9a6819;
}
.status-done .task-flow-state {
color: var(--go);
}
.task-flow-grip {
color: var(--muted);
font-size: 17px;
line-height: 1;
}
.task-flow-card h3 {
margin: 8px 0 7px;
font-size: 13.5px;
line-height: 1.35;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.task-flow-meta {
flex-wrap: wrap;
gap: 4px 9px;
font-size: 11px;
color: var(--muted);
}
.task-flow-parent,
.task-flow-children {
margin: 7px 0 0;
font-size: 10.5px;
line-height: 1.35;
}
.task-flow-parent {
display: flex;
align-items: flex-start;
gap: 5px;
color: var(--sage-deep);
}
.task-flow-parent > span:first-child { color: var(--coral-deep); font-weight: 800; }
.task-flow-parent b { color: inherit; font-weight: 700; }
.task-flow-children {
padding: 6px 8px;
border-radius: 6px;
background: rgba(224, 122, 95, .07);
font-weight: 700;
}
.task-flow-children > span { margin-right: 3px; }
.task-flow-actions {
gap: 6px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--ui-line-soft);
}
.task-flow-icon-btn,
.task-flow-link-btn {
border: 0;
background: transparent;
color: var(--sage-deep);
cursor: pointer;
}
.task-flow-icon-btn {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 6px;
}
.task-flow-icon-btn svg {
width: 17px;
height: 17px;
}
.task-flow-icon-btn:hover,
.task-flow-link-btn:hover {
background: var(--sage-soft);
}
.task-flow-icon-btn.danger {
margin-left: auto;
color: var(--coral-deep);
font-size: 20px;
}
.task-flow-link-btn {
min-height: 28px;
padding: 4px 8px;
border-radius: 6px;
font: inherit;
font-size: 11px;
font-weight: 700;
}
.task-flow-link-btn.active {
background: var(--coral);
color: #fff;
}
.task-flow-target-action {
width: 100%;
margin-top: 9px;
padding: 8px 9px;
border: 1px solid rgba(224, 122, 95, .45);
border-radius: 6px;
background: rgba(224, 122, 95, .08);
color: var(--coral-deep);
font: inherit;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.task-flow-root-drop {
margin-top: 2px;
padding: 11px 14px;
border: 1px dashed var(--line);
border-radius: 8px;
color: var(--muted);
font-size: 11.5px;
text-align: center;
}
.task-flow-root-drop.is-drag-over {
border-color: var(--coral);
background: rgba(224, 122, 95, .07);
color: var(--coral-deep);
}
.task-flow-empty {
padding: 34px 20px;
border: 1px dashed var(--line);
border-radius: 8px;
text-align: center;
}
.task-flow-empty p {
max-width: 520px;
margin: 7px auto 15px;
color: var(--muted);
font-size: 13px;
}
.task-flow-empty .btn svg {
width: 16px;
height: 16px;
}
.task-stuck-actions {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.task-stuck-actions > b {
display: block;
margin-bottom: 8px;
color: var(--ink);
font-size: 12px;
}
.task-stuck-actions > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.task-stuck-actions .small-btn {
min-height: 34px;
}
@media (max-width: 760px) {
.task-flow-toolbar,
.task-flow-link-banner {
align-items: stretch;
flex-direction: column;
gap: 10px;
}
.task-flow-toolbar .btn {
width: 100%;
justify-content: center;
}
.task-flow-link-banner > div:last-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
.task-flow-track {
padding: 12px;
}
.task-flow-track-head {
align-items: flex-start;
}
.task-flow-progress {
display: grid;
grid-template-columns: auto auto;
justify-items: end;
}
.task-flow-progress-bar {
grid-column: 1 / -1;
width: 62px;
}
.task-flow-track-canvas {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
overflow: visible;
padding-bottom: 4px;
scroll-snap-type: none;
}
.task-flow-column {
width: 100%;
}
.task-flow-column:not(:first-child)::before {
content: "↓";
top: -15px;
left: 4px;
}
.task-flow-column > header {
position: relative;
min-height: 42px;
padding-bottom: 8px;
}
.task-flow-actions {
min-height: 34px;
}
.task-flow-icon-btn,
.task-flow-link-btn {
min-height: 34px;
}
.task-flow-icon-btn {
width: 34px;
}
.task-flow-root-drop {
display: none;
}
.task-stuck-actions > div {
display: grid;
grid-template-columns: 1fr;
}
.task-stuck-actions .small-btn {
width: 100%;
justify-content: flex-start;
text-align: left;
}
}
.task-flow-board {
--flow-surface: rgba(249, 247, 240, .78);
--flow-card: rgba(255, 255, 255, .94);
overflow: hidden;
border: 1px solid var(--ui-line-soft);
border-radius: 8px;
background: var(--flow-surface);
}
.task-flow-toolbar {
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
padding: 12px 16px;
border-bottom: 1px solid var(--ui-line-soft);
background: rgba(255, 255, 255, .72);
color: var(--muted);
font-size: 11.5px;
}
.task-flow-toolbar .task-flow-progress { margin-right: 2px; }
.task-flow-toolbar .task-flow-progress b,
.task-flow-ready b { display: inline; }
.task-flow-ready { margin-right: auto; }
.task-flow-ready b { color: var(--sage-deep); font-size: inherit; }
.task-flow-toolbar .btn { min-height: 38px; }
.task-flow-canvas {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(270px, 1fr);
align-items: start;
gap: 26px;
overflow-x: auto;
padding: 0 8px 14px;
scroll-snap-type: x proximity;
}
.task-flow-connectors {
position: absolute;
inset: 0 auto auto 0;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.task-flow-connector {
fill: none;
stroke: #d77358;
stroke-width: 1.8;
stroke-linecap: round;
opacity: .62;
vector-effect: non-scaling-stroke;
}
.task-flow-connector.is-done {
stroke: #72a47d;
opacity: .55;
}
.task-flow-column {
position: relative;
z-index: 1;
min-height: 250px;
padding: 14px 8px 8px;
scroll-snap-align: start;
}
.task-flow-mobile-arrow { display: none; }
.task-flow-column + .task-flow-column { border-left: 0; }
.task-flow-column:not(:first-child)::before { display: none; }
.task-flow-column > header {
min-height: 50px;
margin: 0 4px 10px;
padding: 0 2px 10px;
}
.task-flow-column > header > span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border: 1px solid rgba(224, 122, 95, .26);
border-radius: 50%;
background: rgba(224, 122, 95, .08);
}
.task-flow-column > header > div { min-width: 0; }
.task-flow-column > header b { font-size: 13px; }
.task-flow-column > header small { font-size: 10px; }
.task-flow-column > header em {
margin-left: auto;
color: var(--muted);
font-size: 10.5px;
font-style: normal;
}
.task-flow-column-cards { padding: 0 4px; }
.task-flow-card-slot { position: relative; min-width: 0; }
.task-flow-card {
padding: 12px;
border: 1px solid var(--ui-line-soft);
border-left: 2px solid var(--sage-deep);
background: var(--flow-card);
box-shadow: 0 2px 8px rgba(34, 48, 42, .04);
}
.task-flow-card:hover {
border-color: rgba(53, 92, 78, .24);
box-shadow: 0 7px 18px rgba(34, 48, 42, .07);
transform: translateY(-1px);
}
.task-flow-card h3 {
margin: 7px 0 6px;
font-size: 14px;
}
.task-flow-grip {
cursor: grab;
opacity: .72;
}
.task-flow-prereqs {
margin-top: 9px;
padding-top: 8px;
border-top: 1px solid var(--ui-line-soft);
}
.task-flow-prereq-label {
display: block;
margin-bottom: 5px;
color: var(--muted);
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
}
.task-flow-prereqs > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.task-flow-prereq-chip {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
max-width: 100%;
min-height: 25px;
padding: 3px 7px;
border: 1px solid var(--ui-line-soft);
border-radius: 999px;
background: var(--cream);
color: var(--sage-deep);
font: inherit;
font-size: 10px;
line-height: 1.25;
}
button.task-flow-prereq-chip { cursor: pointer; }
.task-flow-prereq-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-flow-prereq-chip b { color: var(--muted); font-size: 13px; line-height: 1; }
.task-flow-prereq-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--amber); }
.task-flow-prereq-dot.done { background: var(--go); }
.task-flow-children {
padding: 6px 0 0;
background: transparent;
color: var(--coral-deep);
font-size: 10px;
}
.task-flow-actions {
justify-content: flex-end;
gap: 2px;
margin-top: 8px;
padding-top: 5px;
}
.task-flow-drop-before {
position: relative;
height: 0;
margin: 0;
overflow: hidden;
border: 0 dashed transparent;
border-radius: 6px;
color: transparent;
font-size: 10px;
font-weight: 800;
text-align: center;
transition: height .14s ease, margin .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
}
.task-flow-board.is-arranging .task-flow-drop-before {
height: 25px;
margin: 0 0 5px;
border-width: 1px;
border-color: rgba(224, 122, 95, .34);
color: var(--coral-deep);
}
.task-flow-drop-before span { line-height: 23px; }
.task-flow-drop-before.is-drag-over,
.task-flow-card.is-drag-over,
.task-flow-root-drop.is-drag-over {
border-color: var(--coral);
background: rgba(224, 122, 95, .11);
box-shadow: 0 0 0 2px rgba(224, 122, 95, .12);
}
.task-flow-root-drop {
display: none;
margin: 0 12px 12px;
background: rgba(255, 255, 255, .5);
}
.task-flow-board.is-arranging .task-flow-root-drop { display: block; }
.task-flow-picker { display: grid; gap: 12px; }
.task-flow-picker-intro {
padding: 12px 14px;
border-left: 3px solid var(--coral);
background: rgba(224, 122, 95, .06);
}
.task-flow-picker-intro > span {
display: block;
color: var(--coral-deep);
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
}
.task-flow-picker-intro b { display: block; margin-top: 3px; color: var(--ink); }
.task-flow-picker-intro p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }
.task-flow-picker-list {
display: grid;
max-height: min(48vh, 430px);
overflow-y: auto;
border-top: 1px solid var(--ui-line-soft);
}
.task-flow-picker-row {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 9px;
align-items: center;
min-height: 51px;
padding: 8px 4px;
border-bottom: 1px solid var(--ui-line-soft);
cursor: pointer;
}
.task-flow-picker-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--coral); }
.task-flow-picker-row b,
.task-flow-picker-row small { display: block; }
.task-flow-picker-row b { color: var(--ink); font-size: 12.5px; }
.task-flow-picker-row small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.task-flow-picker-row.is-disabled { opacity: .52; cursor: not-allowed; }
.task-chain-prereqs {
display: grid;
gap: 6px;
}
.task-chain-prereqs > b { color: var(--muted); font-size: 11px; }
.task-chain-prereqs > span {
display: block;
padding: 7px 9px;
border-left: 2px solid var(--sage-deep);
border-radius: 0 6px 6px 0;
background: rgba(235, 240, 232, .54);
color: var(--ink);
font-size: 12px;
}
@media (max-width: 760px) {
.task-flow-board { overflow: visible; background: transparent; border: 0; }
.task-flow-toolbar { flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--ui-line-soft); border-radius: 7px; background: rgba(255, 255, 255, .6); }
.task-flow-toolbar .btn { width: auto; margin-left: auto; }
.task-flow-ready { margin-right: 0; text-align: right; }
.task-flow-canvas {
display: grid;
grid-auto-flow: row;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
overflow: visible;
padding: 0;
}
.task-flow-column {
min-height: 0;
padding: 10px;
border: 1px solid var(--ui-line-soft);
border-radius: 8px;
background: rgba(255, 255, 255, .46);
}
.task-flow-column + .task-flow-column { border-left: 1px solid var(--ui-line-soft); }
.task-flow-column > header { margin: 0 0 8px; }
.task-flow-column-cards { padding: 0; }
.task-flow-connectors { display: none; }
.task-flow-mobile-arrow {
display: flex;
align-items: center;
gap: 7px;
min-height: 30px;
margin: -2px 3px 5px;
color: var(--coral-deep);
}
.task-flow-mobile-arrow span {
display: grid;
place-items: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
border: 1px solid rgba(224, 122, 95, .28);
border-radius: 50%;
background: rgba(224, 122, 95, .08);
font-size: 14px;
font-weight: 800;
}
.task-flow-mobile-arrow small {
min-width: 0;
overflow: hidden;
color: var(--muted);
font-size: 10px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-flow-card { padding: 12px; }
.task-flow-grip { display: none; }
.task-flow-actions { justify-content: flex-end; }
.task-flow-icon-btn { width: 36px; height: 36px; }
.task-flow-drop-before,
.task-flow-board.is-arranging .task-flow-drop-before,
.task-flow-root-drop,
.task-flow-board.is-arranging .task-flow-root-drop { display: none; }
}
.chk.done svg { animation: chkPop .34s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes chkPop {
0% { transform: scale(.3); opacity: 0; }
60% { transform: scale(1.18); }
100% { transform: scale(1); opacity: 1; }
}
.idea-react-btn { transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease; }
.idea-react-btn:active { transform: scale(.94); }
.idea-react-btn.on svg { animation: dropBounce .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dropBounce {
0%, 100% { transform: translateY(0) scale(1); }
35% { transform: translateY(-3px) scale(1.14); }
70% { transform: translateY(1px) scale(1); }
}
.nav-btn .nb-ico { transition: transform .16s ease, opacity .16s ease; }
.nav-btn:hover .nb-ico { transform: translateX(2px); opacity: 1; }
.nav-btn.active .nb-ico { opacity: 1; }
.brand svg { transition: transform .28s cubic-bezier(.34, 1.4, .6, 1); }
.brand:hover svg { transform: rotate(-6deg) scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
.empty-state::before {
transform-origin: bottom center;
animation: sproutGrow .5s ease-out both, sproutSway 5.5s ease-in-out .5s infinite;
}
@keyframes sproutGrow {
from { transform: scale(.4) translateY(6px); opacity: 0; }
to { transform: none; opacity: .55; }
}
@keyframes sproutSway {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
.dash-spark svg {
transform-origin: center;
animation: sparkTwinkle 3.6s ease-in-out infinite;
}
@keyframes sparkTwinkle {
0%, 100% { opacity: .85; transform: scale(1) rotate(0); }
50% { opacity: 1; transform: scale(1.14) rotate(9deg); }
}
.dash-seed-card .dash-side-kicker svg {
transform-origin: bottom center;
animation: sproutSway 6.5s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.chk.done svg,
.idea-react-btn.on svg { animation: none; }
}
.idea-card-top { flex-wrap: nowrap; align-items: flex-start; }
.idea-plant-wrap {
margin-left: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: flex-end;
line-height: 0;
align-self: flex-start;
}
.idea-plant { display: block; color: var(--green-soft); }
.idea-plant .ip-soil { fill: none; stroke: var(--sage); stroke-width: 1.5; stroke-linecap: round; opacity: .5; }
.idea-plant .ip-water { fill: none; stroke: var(--sage-deep); stroke-width: 1.3; stroke-linecap: round; opacity: .58; }
.idea-plant .ip-stem { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.idea-plant .ip-trunk { fill: none; stroke: color-mix(in srgb, var(--amber) 44%, var(--green-deep)); stroke-width: 3.2; stroke-linecap: round; }
.idea-plant .ip-canopy { fill: currentColor; stroke: none; }
.idea-plant .ip-canopy-light { opacity: .72; }
.idea-plant .ip-apple-blossom circle { fill: var(--paper); stroke: var(--coral); stroke-width: .7; }
.idea-plant .ip-apples circle { fill: var(--coral); stroke: var(--coral-deep); stroke-width: .45; }
.idea-plant .ip-apple-stem { fill: none; stroke: var(--green-deep); stroke-width: .75; stroke-linecap: round; }
.idea-plant .ip-carrot { fill: var(--coral); stroke: var(--coral-deep); stroke-width: .55; stroke-linejoin: round; }
.idea-plant .ip-carrot-line { fill: none; stroke: rgba(255,253,248,.82); stroke-width: .7; stroke-linecap: round; }
.idea-plant .ip-water-pad { fill: var(--sage-deep); stroke: var(--green-deep); stroke-width: .45; stroke-linejoin: round; }
.idea-plant .ip-water-pad-back { fill: var(--sage); opacity: .78; }
.idea-plant .ip-water-vein { fill: none; stroke: var(--sage-soft); stroke-width: .55; stroke-linecap: round; opacity: .78; }
.idea-plant .ip-water-bud { fill: var(--coral); stroke: var(--coral-deep); stroke-width: .55; }
.idea-plant .ip-water-flower path { fill: var(--paper); stroke: var(--coral); stroke-width: .55; stroke-linejoin: round; }
.idea-plant .ip-water-flower .ip-petal-back { fill: color-mix(in srgb, var(--coral) 24%, var(--paper)); }
.idea-plant .ip-water-flower .ip-petal-front { fill: color-mix(in srgb, var(--coral) 10%, var(--paper)); }
.idea-plant .ip-water-flower .ip-core { fill: var(--amber); stroke: var(--coral-deep); stroke-width: .4; }
.idea-plant .ip-bell-bud,
.idea-plant .ip-bell { fill: var(--coral); stroke: var(--coral-deep); stroke-width: .45; stroke-linejoin: round; }
.idea-plant .ip-bell-clapper { fill: none; stroke: var(--coral-deep); stroke-width: .65; stroke-linecap: round; }
.idea-plant .ip-bell-core { fill: var(--amber); stroke: var(--coral-deep); stroke-width: .35; }
.idea-plant .ip-lettuce-outer { fill: var(--sage-soft); stroke: var(--sage-deep); stroke-width: .45; stroke-linejoin: round; }
.idea-plant .ip-lettuce-head { fill: var(--sage-deep); stroke: var(--green-deep); stroke-width: .45; stroke-linejoin: round; }
.idea-plant .ip-lettuce-curl { fill: var(--sage); stroke: var(--green-deep); stroke-width: .5; }
.idea-plant .ip-lettuce-vein { fill: none; stroke: var(--paper); stroke-width: .65; stroke-linecap: round; opacity: .74; }
.idea-plant .ip-dandelion-leaf { fill: var(--green-soft); stroke: var(--green-deep); stroke-width: .35; stroke-linejoin: round; }
.idea-plant .ip-dandelion-bud { fill: var(--amber); stroke: var(--coral-deep); stroke-width: .45; }
.idea-plant .ip-dandelion-bloom circle { fill: var(--amber); }
.idea-plant .ip-dandelion-bloom .ip-core { fill: var(--coral-deep); }
.idea-plant .ip-hemp-blade { fill: currentColor; stroke: none; }
.idea-plant .ip-hemp-vein { fill: var(--sage-soft); stroke: none; opacity: .72; }
.idea-plant .ip-hemp-branch { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.idea-plant .ip-strawberry-leaf,
.idea-plant .ip-strawberry-crown { fill: currentColor; stroke: none; }
.idea-plant .ip-strawberry-fruit { fill: var(--coral); stroke: none; }
.idea-plant .ip-strawberry-seeds circle { fill: color-mix(in srgb, var(--amber) 72%, var(--paper)); }
.idea-plant .ip-strawberry-flower .ip-petal { fill: color-mix(in srgb, var(--coral) 12%, var(--paper)); stroke: none; }
.idea-plant .ip-strawberry-flower .ip-core { fill: var(--amber); }
.idea-plant .ip-corn-leaf,
.idea-plant .ip-corn-husk { fill: currentColor; stroke: none; }
.idea-plant .ip-corn-cob { fill: var(--amber); stroke: none; }
.idea-plant .ip-corn-kernels { fill: none; stroke: rgba(255,253,248,.72); stroke-width: .5; stroke-linecap: round; }
.idea-plant .ip-corn-tassel { fill: none; stroke: var(--amber); stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; }
.idea-plant .ip-spine { fill: none; stroke: var(--sage-deep); stroke-width: 1; stroke-linecap: round; opacity: .7; }
.idea-plant .ip-rose { fill: none; stroke: var(--paper); stroke-width: 1.3; stroke-linecap: round; }
.idea-plant .ip-gourd { fill: var(--amber); }
.idea-plant .ip-rib { fill: none; stroke: var(--coral-deep); stroke-width: 1; stroke-linecap: round; opacity: .5; }
.idea-plant .ip-leaf { fill: currentColor; stroke: none; }
.idea-plant .ip-bud { fill: var(--coral); opacity: .85; }
.idea-plant .ip-bloom circle,
.idea-plant .ip-bloom path,
.idea-plant .ip-bloom ellipse { fill: var(--coral); }
.idea-plant .ip-bloom .ip-core { fill: var(--amber); }
.idea-plant .ip-bloom .ip-core-dark { fill: var(--green-deep); }
.idea-card.stage-kvete { background: linear-gradient(0deg, rgba(224, 122, 95, .06), rgba(224, 122, 95, .06)), #fff; }
.idea-stage-tag.stage-kvete { background: rgba(224, 122, 95, .15); color: var(--coral-deep); }
.idea-growth {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
margin: 0 0 14px;
border: 1px solid var(--ui-line-soft);
border-radius: 14px;
background: rgba(246, 241, 231, .5);
}
.idea-growth.bloomed { background: rgba(224, 122, 95, .08); border-color: rgba(224, 122, 95, .25); }
.idea-growth-plant { flex: 0 0 82px; min-width: 82px; display: inline-flex; align-items: flex-end; justify-content: center; line-height: 0; }
.idea-growth-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idea-growth-text b { font-size: 14px; color: var(--ink); }
.idea-growth-text span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.idea-growth-meter {
margin-top: 4px;
height: 6px;
width: 100%;
max-width: 240px;
border-radius: 999px;
background: rgba(134, 151, 127, .18);
overflow: hidden;
}
.idea-growth-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--sage-deep), var(--go));
transition: width .45s cubic-bezier(.34, 1.2, .64, 1);
}
.idea-growth.bloomed .idea-growth-fill { background: linear-gradient(90deg, var(--coral), var(--amber)); }
@media (prefers-reduced-motion: no-preference) {
.idea-growth-plant .idea-plant-body {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: ideaPlantBreeze 5.8s ease-in-out infinite;
will-change: transform;
}
.idea-growth.bloomed .idea-growth-plant .idea-plant-body {
animation-duration: 5.1s;
}
.idea-plant .ip-bloom {
transform-box: fill-box;
transform-origin: center;
animation: bloomOpen .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes bloomOpen {
0% { transform: scale(.2) rotate(-30deg); opacity: 0; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes ideaPlantBreeze {
0%, 100% { transform: rotate(0deg) translateX(0); }
18% { transform: rotate(-1.1deg) translateX(-.3px); }
42% { transform: rotate(.7deg) translateX(.2px); }
67% { transform: rotate(1.35deg) translateX(.4px); }
84% { transform: rotate(-.45deg) translateX(-.1px); }
}
}
@media (max-width: 520px) {
.idea-growth { align-items: flex-start; gap: 10px; padding: 12px; }
.idea-growth-plant { flex-basis: 72px; min-width: 72px; }
.idea-growth-plant .idea-plant { width: 70px; height: auto; }
.idea-grow-panel { margin-left: 7px; margin-right: 7px; padding: 12px; }
}
@media (max-width: 760px) {
.dash-today::after,
.dash-day-event::after,
.dash-meeting-list::after,
.dash-section > .card::after { display: none; }
.dash-today { padding: 18px 16px; }
.dash-today h2 { font-size: 26px; }
.dash-status-strip { gap: 7px; margin-top: 12px; flex-wrap: nowrap; }
.dash-status-pill { flex: 1 1 0; min-width: 0; padding: 8px 9px; }
.dash-status-pill b { font-size: 18px; }
.dash-status-pill span { font-size: 10.5px; }
.dash-top { margin-bottom: 14px; }
.dash-section { margin-top: 14px; }
.dash-side { gap: 12px; }
.dash-day-event { padding: 14px 15px; }
.dash-now-inline { margin-top: 4px; }
}
.profile-appreciate-btn {
color: var(--green-deep);
border-color: rgba(47, 85, 69, .24);
background: rgba(255, 255, 255, .58);
}
.profile-appreciate-btn svg,
.appreciation-modal .modal-foot .btn svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
}
.profile-appreciate-btn:hover {
border-color: var(--sage-deep);
background: var(--sage-soft);
}
.profile-appreciate-btn,
.profile-poke-btn,
.appreciation-modal .modal-foot .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.profile-poke-btn {
min-height: 44px !important;
color: #8f4c38;
border-color: rgba(185, 91, 66, .25);
background: rgba(255, 244, 239, .78);
}
.profile-poke-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.profile-poke-btn:hover,
.profile-poke-btn:focus-visible { border-color: var(--coral); background: #fff0e9; }
.profile-poke-btn.is-sent { color: var(--green-deep); border-color: rgba(47, 85, 69, .2); background: var(--sage-soft); }
.profile-poke-btn:disabled { opacity: .78; cursor: default; }
.profile-actions > .btn,
.profile-actions > .profile-admin-menu > summary { min-height: 44px; }
.appreciation-modal { max-width: 620px; }
.appreciation-form { display: grid; gap: 17px; }
.appreciation-intro {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 13px;
align-items: start;
}
.appreciation-mark {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--green-deep);
background: var(--sage-soft);
border: 1px solid rgba(47, 85, 69, .14);
}
.appreciation-mark svg { width: 24px; height: 24px; }
.appreciation-eyebrow {
display: block;
color: var(--coral-deep);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.appreciation-intro p {
margin: 6px 0 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.55;
}
.appreciation-recipient {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: rgba(246, 241, 231, .58);
border: 1px solid var(--line);
border-radius: 8px;
}
.appreciation-avatar {
width: 42px;
height: 42px;
flex: 0 0 42px;
font-size: 14px;
}
.appreciation-recipient > div { min-width: 0; display: grid; gap: 2px; }
.appreciation-recipient small,
.appreciation-recipient span { color: var(--muted); font-size: 11.5px; }
.appreciation-recipient b {
color: var(--ink);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.appreciation-recipient span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.appreciation-prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.appreciation-prompts button {
border: 1px solid rgba(47, 85, 69, .18);
border-radius: 999px;
padding: 7px 10px;
color: var(--green-deep);
background: var(--paper);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.appreciation-prompts button:hover,
.appreciation-prompts button:focus-visible {
background: var(--sage-soft);
border-color: var(--sage-deep);
outline: none;
}
.appreciation-field { display: grid; gap: 6px; position: relative; }
.appreciation-field > span { color: var(--ink); font-size: 12px; font-weight: 750; }
.appreciation-field textarea {
width: 100%;
min-height: 118px;
resize: vertical;
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px 28px;
background: var(--cream);
color: var(--ink);
font: inherit;
font-size: 14px;
line-height: 1.55;
}
.appreciation-field textarea:focus {
outline: 2px solid rgba(224, 122, 95, .2);
border-color: var(--coral);
background: var(--paper);
}
.appreciation-field > small {
position: absolute;
right: 10px;
bottom: 8px;
color: var(--muted);
font-size: 10px;
}
.appreciation-private {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.appreciation-private svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--sage-deep); }
.appreciation-status { min-height: 18px; margin: -5px 0 0; font-size: 12px; }
.appreciation-status:empty { display: none; }
.appreciation-status.is-pending { color: var(--muted); }
.appreciation-status.is-error { color: var(--coral-deep); font-weight: 650; }
.appreciation-sent {
min-height: 290px;
padding: 18px 12px 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.appreciation-sent-plant {
width: 116px;
height: 116px;
color: var(--green-deep);
margin-bottom: 16px;
}
.appreciation-sent-plant svg { width: 100%; height: 100%; stroke-width: 2.2; }
.appreciation-sent h4 {
margin: 8px 0 6px;
color: var(--ink);
font-family: var(--display);
font-size: 24px;
}
.appreciation-sent p { margin: 0; color: var(--muted); line-height: 1.55; }
.notification-item.is-appreciation {
border-color: rgba(47, 85, 69, .22);
background: rgba(235, 240, 232, .5);
}
.notification-item.is-appreciation.unread { background: var(--sage-soft); }
.notification-item.is-appreciation .notification-ico {
color: var(--green-deep);
background: rgba(255, 255, 255, .65);
border-color: rgba(47, 85, 69, .16);
}
.notification-item.is-poke {
border-color: rgba(185, 91, 66, .2);
background: rgba(255, 244, 239, .58);
}
.notification-item.is-poke.unread { background: #fff0e9; }
.notification-item.is-poke .notification-main b {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
}
.notification-item.is-poke .notification-ico {
color: #9c4c36;
background: rgba(255, 255, 255, .7);
border-color: rgba(185, 91, 66, .17);
}
@media (max-width: 560px) {
.notification-item.is-poke { grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
.notification-item.is-poke time { grid-column: 2; margin-top: 1px; }
}
.task-appreciation-panel {
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid var(--line);
display: grid;
gap: 11px;
}
.task-appreciation-copy {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.task-appreciation-copy > svg {
width: 19px;
height: 19px;
flex: 0 0 19px;
color: var(--sage-deep);
}
.task-appreciation-copy > div { min-width: 0; display: grid; gap: 2px; }
.task-appreciation-copy b { color: var(--ink); font-size: 12.5px; }
.task-appreciation-copy span { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.task-appreciation-people {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.task-appreciation-people > button {
min-width: 0;
min-height: 48px;
padding: 7px 9px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 24px;
align-items: center;
gap: 8px;
border: 1px solid rgba(47, 85, 69, .16);
border-radius: 8px;
background: var(--paper);
color: var(--green-deep);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.task-appreciation-people > button:hover,
.task-appreciation-people > button:focus-visible {
border-color: var(--sage-deep);
background: var(--sage-soft);
outline: none;
}
.task-appreciation-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
font-size: 10px;
}
.task-appreciation-person-copy { min-width: 0; display: grid; gap: 1px; }
.task-appreciation-person-copy b {
overflow: hidden;
color: var(--ink);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-appreciation-person-copy small { color: var(--muted); font-size: 10px; }
.task-appreciation-action {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(235, 240, 232, .75);
}
.task-appreciation-action svg { width: 14px; height: 14px; }
.completion-moment-host {
position: fixed;
inset: 0;
z-index: 210;
display: grid;
place-items: center;
padding: 18px;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
html.completion-open,
body.completion-open { overflow: hidden; }
.completion-moment-host.is-visible { opacity: 1; pointer-events: auto; }
.completion-moment-host.is-leaving { opacity: 0; pointer-events: none; }
.completion-moment-backdrop {
position: absolute;
inset: 0;
background: rgba(34, 48, 42, .4);
backdrop-filter: blur(2px);
}
.completion-moment {
position: relative;
z-index: 1;
width: min(610px, calc(100vw - 36px));
max-height: calc(100dvh - 36px);
overflow-y: auto;
padding: 28px 30px 24px;
border: 1px solid rgba(47, 85, 69, .16);
border-top: 4px solid var(--coral);
border-radius: 18px;
background: var(--paper);
box-shadow: 0 26px 80px rgba(34, 48, 42, .28);
text-align: center;
transform: translateY(12px) scale(.985);
transition: transform .22s ease;
}
.completion-moment-host.is-visible .completion-moment { transform: translateY(0) scale(1); }
.completion-close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: var(--cream-deep);
color: var(--muted);
font: inherit;
font-size: 21px;
cursor: pointer;
}
.completion-close:hover { color: var(--ink); background: var(--cream); }
.completion-plant {
width: 116px;
height: 92px;
margin: -3px auto 4px;
color: var(--green-deep);
}
.completion-plant svg { width: 100%; height: 100%; stroke-width: 2.4; }
.completion-check { color: var(--coral-deep); stroke-width: 3.2; }
.completion-eyebrow {
display: block;
color: var(--coral-deep);
font-size: 11px;
font-weight: 850;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.completion-moment > h3 {
max-width: 470px;
margin: 7px auto 8px;
color: var(--ink);
font-family: var(--display);
font-size: 26px;
line-height: 1.15;
overflow-wrap: anywhere;
}
.completion-release {
max-width: 460px;
margin: 0 auto 18px;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.completion-next {
max-width: 470px;
margin: 14px auto 18px;
padding: 12px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
gap: 3px;
}
.completion-next span { color: var(--coral-deep); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.completion-next b { color: var(--ink); font-size: 14px; }
.completion-next small { color: var(--muted); font-size: 12px; }
.completion-community {
margin-top: 18px;
padding-top: 17px;
border-top: 1px solid var(--line);
text-align: left;
}
.completion-community > div:first-child > span { color: var(--ink); font-weight: 750; font-size: 14px; }
.completion-community > div:first-child > p { margin: 3px 0 12px; color: var(--muted); font-size: 12px; }
.completion-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.completion-people > button {
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 18px;
gap: 9px;
align-items: center;
padding: 9px 10px;
border: 1px solid rgba(47, 85, 69, .17);
border-radius: 8px;
background: rgba(235, 240, 232, .42);
color: var(--green-deep);
text-align: left;
cursor: pointer;
}
.completion-people > button:hover,
.completion-people > button:focus-visible { border-color: var(--sage-deep); background: var(--sage-soft); outline: none; }
.completion-person-avatar { width: 38px; height: 38px; flex: 0 0 38px; font-size: 12px; }
.completion-people > button > span { min-width: 0; display: grid; gap: 1px; }
.completion-people small { color: var(--muted); font-size: 10px; }
.completion-people b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12.5px; }
.completion-people > button > svg { width: 18px; height: 18px; }
.completion-self-note { margin: 17px 0 0; color: var(--muted); font-size: 12.5px; font-style: italic; }
.completion-continue { margin-top: 18px; width: auto; min-width: 190px; }
@media (prefers-reduced-motion: no-preference) {
.completion-moment-host.is-visible .completion-leaf.left { animation: communityLeafLeft .55s .06s both cubic-bezier(.22, 1, .36, 1); transform-origin: 60px 64px; }
.completion-moment-host.is-visible .completion-leaf.right { animation: communityLeafRight .55s .16s both cubic-bezier(.22, 1, .36, 1); transform-origin: 60px 55px; }
.completion-moment-host.is-visible .completion-check { animation: communityCheck .45s .28s both ease-out; }
.appreciation-sent-plant { animation: communityRise .5s both cubic-bezier(.22, 1, .36, 1); }
@keyframes communityLeafLeft { from { opacity: 0; transform: scale(.25) rotate(12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes communityLeafRight { from { opacity: 0; transform: scale(.25) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes communityCheck { from { opacity: 0; stroke-dasharray: 30; stroke-dashoffset: 30; } to { opacity: 1; stroke-dasharray: 30; stroke-dashoffset: 0; } }
@keyframes communityRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 620px) {
.appreciation-intro { grid-template-columns: 40px minmax(0, 1fr); }
.appreciation-mark { width: 40px; height: 40px; }
.appreciation-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appreciation-prompts button { min-width: 0; text-align: left; }
.completion-moment-host { place-items: end center; padding: 0; }
.completion-moment {
width: 100%;
max-height: min(88dvh, 760px);
padding: 22px 16px max(18px, env(safe-area-inset-bottom));
border-left: 0;
border-right: 0;
border-bottom: 0;
border-radius: 18px 18px 0 0;
transform: translateY(24px);
}
.completion-plant { width: 96px; height: 76px; }
.completion-moment > h3 { font-size: 22px; padding: 0 18px; }
.completion-people { grid-template-columns: minmax(0, 1fr); }
.completion-community { margin-top: 14px; padding-top: 14px; }
.completion-continue { width: 100%; }
.task-appreciation-people { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.completion-moment-host,
.completion-moment,
.appreciation-sent-plant { transition: none; animation: none; }
}
.mobile-more-tab,
.mobile-more-root { display: none; }
.meet-chip b,
.seg-btn b {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
margin-left: 6px;
padding: 0 6px;
border-radius: 999px;
background: rgba(47, 85, 69, .08);
color: inherit;
font-size: 10.5px;
line-height: 1;
}
.meet-chip.on b,
.seg-btn.on b { background: rgba(255, 255, 255, .22); }
@media (max-width: 860px) {
html.mobile-more-open,
body.mobile-more-open { overflow: hidden; }
.sidebar {
min-height: calc(54px + env(safe-area-inset-top, 0px));
padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 6px;
background: rgba(39, 78, 62, .96);
}
.brand { width: auto; min-width: 0; }
.brand svg { width: 38px; height: 38px; flex-basis: 38px; }
.brand b { font-size: 15px; }
#mobile-session > button:not([data-open-own-profile]) { display: none; }
.btn-mobile-logout { min-width: 40px; min-height: 40px; padding: 5px; }
.nav-list {
justify-content: stretch;
gap: 3px;
padding: 5px 7px calc(7px + env(safe-area-inset-bottom, 0px));
overflow: visible;
background: rgba(39, 78, 62, .98);
backdrop-filter: blur(18px) saturate(1.15);
}
.nav-list .nav-secondary-mobile { display: none; }
.nav-list .mobile-more-tab { display: flex; }
.nav-list .mobile-welcome-bar-only { display: none; }
.nav-btn {
min-width: 0;
min-height: 49px;
padding: 5px 2px 4px;
border-radius: 10px;
font-size: 10px;
gap: 3px;
}
.nav-btn .nb-ico { width: 22px; height: 22px; flex-basis: 22px; }
.nav-btn.active { background: rgba(231, 119, 91, .96); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.main {
margin-top: calc(50px + env(safe-area-inset-top, 0px));
padding: 16px 14px calc(82px + env(safe-area-inset-bottom, 0px));
}
.main,
.main > *,
.app-view,
.collection-panel,
.collection-panel > *,
.collection-hero { min-width: 0; max-width: 100%; }
.floating-chat-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
.floating-chat-panel { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
.mobile-more-root {
position: fixed;
inset: 0;
z-index: 120;
display: block;
visibility: hidden;
pointer-events: none;
}
.mobile-more-root.open { visibility: visible; pointer-events: auto; }
.mobile-more-backdrop {
position: absolute;
inset: 0;
width: 100%;
border: 0;
background: rgba(25, 42, 35, .44);
opacity: 0;
transition: opacity .18s ease;
}
.mobile-more-root.open .mobile-more-backdrop { opacity: 1; }
.mobile-more-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: min(82dvh, 680px);
overflow-y: auto;
padding: 17px 14px max(16px, env(safe-area-inset-bottom, 0px));
border-radius: 22px 22px 0 0;
background: var(--paper);
box-shadow: 0 -20px 60px rgba(18, 34, 28, .28);
transform: translateY(102%);
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.mobile-more-root.open .mobile-more-sheet { transform: translateY(0); }
.mobile-more-sheet::before {
content: "";
display: block;
width: 42px;
height: 4px;
margin: -6px auto 12px;
border-radius: 999px;
background: var(--line);
}
.mobile-more-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.mobile-more-head span { color: var(--coral-deep); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.mobile-more-head h2 { margin: 2px 0 0; font-family: var(--display); font-size: 22px; color: var(--ink); }
.mobile-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mobile-more-grid > button {
position: relative;
min-width: 0;
min-height: 76px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 11px;
border: 1px solid var(--ui-line-soft);
border-radius: 13px;
background: rgba(255,255,255,.72);
color: var(--ink);
text-align: left;
}
.mobile-more-grid > button.active { border-color: rgba(231,119,91,.42); background: rgba(231,119,91,.08); }
.mobile-more-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--cream-deep); color: var(--green-deep); }
.mobile-more-icon svg { width: 20px; height: 20px; }
.mobile-more-grid b { display: block; font-size: 13.5px; }
.mobile-more-grid small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.mobile-more-grid i:not([hidden]) { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; }
.mobile-more-foot { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mobile-more-foot button { flex: 1; min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--cream); color: var(--green-deep); font-weight: 750; }
.collection-hero { margin-bottom: 13px !important; }
.collection-hero > div { min-width: 0; }
.collection-hero .view-title { margin-top: 3px; font-size: clamp(28px, 9vw, 36px); }
.collection-hero .view-sub { margin-top: 6px; font-size: 13px; line-height: 1.45; }
.collection-hero > .btn { min-height: 44px; }
.collection-filter-bar {
position: sticky;
top: calc(50px + env(safe-area-inset-top, 0px));
z-index: 18;
margin: 0 -14px 13px;
padding: 8px 14px;
background: rgba(246, 241, 231, .94);
border-top: 1px solid rgba(255,255,255,.5);
border-bottom: 1px solid rgba(47,85,69,.08);
backdrop-filter: blur(12px) saturate(1.05);
width: auto;
max-width: none;
min-width: 0;
}
.meet-filter-chips {
display: flex;
flex-wrap: nowrap;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.meet-filter-chips::-webkit-scrollbar,
.task-filters .seg::-webkit-scrollbar { display: none; }
.meet-chip,
.task-filters .seg-btn {
flex: 0 0 auto;
min-height: 38px;
padding: 7px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255,255,255,.8);
color: var(--green-deep);
box-shadow: none;
white-space: nowrap !important;
scroll-snap-align: start;
font-size: 12px;
font-weight: 750;
}
.meet-chip.on,
.task-filters .seg-btn.on { border-color: var(--coral); background: var(--coral); color: #fff; }
.task-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
.task-filters .seg {
display: flex !important;
width: 100%;
max-width: none;
gap: 7px;
padding: 0;
overflow-x: auto;
background: transparent;
border-radius: 0;
scrollbar-width: none;
}
.task-filters .flt { width: 100%; min-height: 40px; max-width: none; background: var(--paper); }
.board { display: grid; gap: 11px; overflow: visible; padding: 0; }
.board .col { width: auto; max-width: none; flex: none; padding: 10px; border-radius: 13px; }
.board .col-head { padding: 2px 3px 9px; }
.board .pcard { margin-bottom: 8px; padding: 12px; }
.board .col-add { min-height: 40px; }
.task-list { border: 0; border-radius: 13px; background: transparent; overflow: visible; }
.task-list .tk {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 8px 10px;
margin-bottom: 8px;
padding: 13px;
border: 1px solid var(--ui-line-soft);
border-radius: 13px;
background: rgba(255,255,255,.8);
}
.task-list .tk:last-child { margin-bottom: 0; border-bottom: 1px solid var(--ui-line-soft); }
.task-list .tk-main { grid-column: 2; }
.task-list .tk-title { white-space: normal; font-size: 14.5px; line-height: 1.35; }
.task-list .tk-dl {
grid-column: 2;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 999px;
background: var(--cream-deep);
font-size: 11.5px;
text-align: left;
}
.task-list .tk-dl small { display: inline; font-size: 9.5px; }
.meetings-list { gap: 9px; }
.meetings-list .meetcard {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 11px;
padding: 12px;
border-radius: 13px;
background: rgba(255,255,255,.8);
}
.meetings-list .mc-date { width: 54px; box-sizing: border-box; padding: 8px 5px; border-radius: 10px; }
.meetcard-when { font-size: 15px; }
.meetcard-sub { font-size: 11.5px; line-height: 1.45; }
.people-grid { gap: 9px; }
.person-card { height: auto; min-height: 0; padding: 15px 16px; border-radius: 16px; }
.wl-cards { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.archived-row { align-items: stretch; flex-wrap: wrap; }
.archived-row .pn { flex: 1 1 100%; }
.archived-row .small-btn { flex: 1 1 auto; }
.stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
.stat { min-height: 92px; padding: 12px !important; }
.stat .big { font-size: 26px !important; }
.hrcal-stat { grid-column: 1 / -1; }
.dash-today { border-radius: 14px; }
.dash-status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-status-pill { min-width: 0; padding: 8px; }
.dash-status-pill b { font-size: 20px; }
.dash-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dash-quick-actions .btn { width: 100%; min-width: 0; padding: 9px; }
.project-tabs,
.project-tabs.project-tabs-refined {
display: flex;
flex-wrap: nowrap;
gap: 5px;
margin-left: -14px;
margin-right: -14px;
padding: 0 14px 5px;
overflow-x: auto;
scrollbar-width: none;
}
.project-tabs::-webkit-scrollbar { display: none; }
.project-tabs .project-tab { flex: 0 0 auto; min-width: max-content; padding: 10px 12px; }
.meeting-detail-gas .meeting-card,
.meeting-detail-gas .meeting-agenda-card { padding: 14px; border-radius: 13px; }
.meeting-agenda-head { gap: 8px; }
.meeting-project-title { white-space: normal; line-height: 1.25; }
.meeting-save-row { position: sticky; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 12; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,253,248,.94); backdrop-filter: blur(10px); }
.messenger-page { border-radius: 13px; }
.chat-detail-card { height: calc(100dvh - 142px); min-height: 420px; }
}
@media (max-width: 560px) {
#modal-root .overlay {
align-items: flex-end;
padding: 0;
overflow: hidden;
}
#modal-root .modal {
width: 100%;
max-width: none;
max-height: calc(100dvh - env(safe-area-inset-top, 0px));
display: flex;
flex-direction: column;
margin: 0;
border-radius: 20px 20px 0 0;
animation: mobileSheetIn .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes mobileSheetIn { from { transform: translateY(28px); opacity: .65; } to { transform: translateY(0); opacity: 1; } }
#modal-root .modal::before {
content: "";
flex: 0 0 auto;
width: 42px;
height: 4px;
margin: 8px auto 0;
border-radius: 999px;
background: var(--line);
}
#modal-root .modal-head { flex: 0 0 auto; padding-top: 10px !important; padding-bottom: 12px; }
#modal-root .modal-head h3 { font-size: 18px; }
#modal-root .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-top: 14px;
padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
#modal-root .modal > .modal-foot { flex: 0 0 auto; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; background: var(--paper); }
.task-form-modal-shell .modal-body { overflow-x: hidden; }
.task-form-v2,
.task-form-v2 > *,
.tf-more,
.tf-more-body,
.task-form-section,
.task-dependency-box,
.task-waiting-box,
.task-help-box { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.task-form-v2 { gap: 11px; }
.tf-more { overflow: hidden; border-style: solid; }
.tf-more summary {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 8px;
width: 100%;
min-height: 46px;
padding: 12px;
box-sizing: border-box;
text-align: left;
}
.tf-more-body { padding: 5px 8px 8px; gap: 8px; }
.task-form-section { padding: 10px; border-radius: 10px; }
.task-form-section-head { margin-bottom: 8px; }
.task-form-section-head span { overflow-wrap: anywhere; }
.task-waiting-head,
.task-help-head { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
.task-waiting-head input,
.task-help-head input { width: 18px !important; height: 18px; }
.prio-pills { gap: 4px; }
.prio-pill { min-width: 0; padding: 10px 3px; font-size: 11.5px; }
.task-form-v2 > .modal-foot {
position: sticky;
bottom: calc(-1 * max(16px, env(safe-area-inset-bottom, 0px)));
z-index: 4;
display: grid !important;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
margin-top: 4px !important;
padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
background: rgba(255,253,248,.96);
backdrop-filter: blur(10px);
}
.task-form-v2 > .modal-foot .btn { width: 100%; min-width: 0; }
.search-box {
top: auto;
bottom: auto;
width: 100%;
max-height: min(82dvh, 680px);
border-radius: 15px;
transform: none;
}
.search-results { max-height: calc(82dvh - 72px); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.idea-plant-row { display: grid; grid-template-columns: minmax(0, 1fr); }
.idea-plant-btn { width: 100%; }
.mobile-more-grid { grid-template-columns: minmax(0, 1fr); }
.mobile-more-grid > button { min-height: 64px; }
}
@media (max-width: 350px) {
.main { padding-left: 10px; padding-right: 10px; }
.collection-filter-bar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
.nav-btn { font-size: 9px; }
.nav-btn .nb-ico { width: 20px; height: 20px; flex-basis: 20px; }
.dash-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.person-nickname { font-size: .8em; font-weight: 500; color: var(--muted); }
.profile-name-preferences { margin: 2px 0 15px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--cream) 72%, #fff); }
.profile-name-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.profile-name-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); }
.profile-name-toggle span, .profile-name-toggle small { display: block; }
.profile-name-toggle small { margin-top: 2px; color: var(--muted); font-weight: 400; }
.profile-name-preferences [data-person-name-fields] { margin-top: 14px; }
.profile-name-preferences [data-person-name-fields][hidden] { display: none; }
.login-email-manager {
margin: 18px 0;
padding: 17px;
border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
border-radius: 16px;
background: color-mix(in srgb, var(--cream) 76%, #fff);
}
.login-email-manager-head {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.login-email-manager-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: color-mix(in srgb, var(--green) 12%, #fff);
color: var(--green);
}
.login-email-manager-icon svg {
width: 21px;
height: 21px;
}
.login-email-title-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.login-email-title-line h3 {
margin: 0;
color: var(--green-deep);
font-family: var(--display);
font-size: 17px;
}
.login-email-title-line > span {
padding: 3px 7px;
border-radius: 999px;
background: rgba(56,85,74,.08);
color: var(--green);
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.login-email-manager-head p,
.login-email-state-note {
margin: 4px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.login-email-primary,
.login-email-current {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255,255,255,.7);
}
.login-email-primary span,
.login-email-current div > span {
display: block;
color: var(--muted);
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.login-email-primary b,
.login-email-current div > b {
display: block;
overflow-wrap: anywhere;
color: var(--ink);
font-size: 13px;
}
.login-email-state {
flex: 0 0 auto;
max-width: 48%;
padding: 5px 8px;
border-radius: 999px;
background: rgba(95,111,102,.09);
color: var(--muted);
font-size: 10px;
font-weight: 800;
line-height: 1.25;
text-align: center;
}
.login-email-state.is-pending { background: rgba(217,154,68,.13); color: #8d5a12; }
.login-email-state.is-verified { background: rgba(224,122,95,.12); color: var(--coral-deep); }
.login-email-state.is-active { background: rgba(47,107,72,.1); color: var(--ok); }
.login-email-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 11px;
}
.login-email-request {
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.login-email-request > label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 800;
}
.login-email-request > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.login-email-request input {
width: 100%;
min-width: 0;
min-height: 44px;
font-size: 16px;
}
.login-email-request small {
display: block;
margin-top: 7px;
color: var(--muted);
font-size: 10.5px;
line-height: 1.5;
}
.login-email-manager-error {
min-height: 0;
margin: 0;
color: var(--bad);
font-size: 11px;
line-height: 1.45;
}
.login-email-manager-error:not(:empty) { margin-top: 10px; }
.login-email-manager-error.is-success { color: var(--ok); }
.login-email-manager-loading {
display: flex;
align-items: center;
min-height: 52px;
color: var(--muted);
font-size: 12px;
}
.login-email-manager-loading.is-error { color: var(--bad); }
@media (max-width: 560px) {
.login-email-manager { padding: 14px; }
.login-email-primary,
.login-email-current { align-items: flex-start; flex-direction: column; }
.login-email-state { max-width: 100%; text-align: left; }
.login-email-request > div { grid-template-columns: 1fr; }
.login-email-request .small-btn { width: 100%; }
.login-email-actions .small-btn { flex: 1 1 150px; }
}
.session-card-content { overflow: visible; }
.login-request-access {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin: 10px 0 0;
padding: 10px 11px 10px 13px;
border: 1px solid rgba(224,122,95,.17);
border-radius: 13px;
background: rgba(224,122,95,.055);
color: var(--muted);
}
.login-request-access > span {
display: grid;
gap: 1px;
min-width: 0;
}
.login-request-access b {
color: var(--ink);
font-size: 10.5px;
}
.login-request-access small {
color: #758079;
font-size: 9px;
line-height: 1.35;
}
.login-request-access button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 32px;
padding: 6px 9px;
border: 1px solid rgba(184,69,48,.2);
border-radius: 9px;
background: #fffaf5;
color: var(--coral-deep);
font: 800 9.5px/1.3 var(--font-sans);
white-space: nowrap;
cursor: pointer;
}
.login-request-access button svg {
width: 13px;
height: 13px;
}
.login-request-access button:hover,
.login-request-access button:focus-visible {
border-color: var(--coral);
background: #fff;
box-shadow: 0 4px 12px rgba(184,69,48,.09);
outline: 0;
}
@media (max-width: 430px) {
.login-request-access {
grid-template-columns: 1fr;
gap: 8px;
}
.login-request-access button {
width: 100%;
}
}
#modal-root .access-request-modal {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
width: min(720px, calc(100vw - 32px));
max-width: 720px;
max-height: min(820px, calc(100dvh - 32px));
overflow: hidden;
}
.access-request-modal > .modal-head {
padding: 18px 22px;
background: color-mix(in srgb, var(--paper) 92%, var(--cream));
}
.access-request-modal > .modal-body {
min-height: 0;
padding: 16px 18px 18px;
overflow-y: auto;
overscroll-behavior: contain;
background: color-mix(in srgb, var(--cream) 34%, var(--paper));
}
.access-request-modal > .modal-foot {
padding: 13px 18px;
background: color-mix(in srgb, var(--paper) 94%, var(--cream));
}
.access-request-form {
display: grid;
gap: 12px;
}
.access-request-form label,
.access-review-target {
position: relative;
display: grid;
gap: 6px;
color: var(--ink);
font-size: 11.5px;
font-weight: 750;
}
.access-request-form label > span,
.access-review-target > span {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.access-request-form label small {
color: var(--muted);
font-size: 10px;
font-weight: 500;
}
.access-request-form input,
.access-request-form select,
.access-request-form textarea,
.access-review-target select {
width: 100%;
min-width: 0;
min-height: 44px;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--green) 15%, var(--line));
border-radius: 11px;
outline: none;
background: rgba(255,255,255,.88);
color: var(--ink);
font: 520 15px/1.4 var(--font-sans);
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.access-request-form textarea {
min-height: 88px;
resize: vertical;
}
.access-request-form input:focus,
.access-request-form select:focus,
.access-request-form textarea:focus,
.access-review-target select:focus {
border-color: color-mix(in srgb, var(--green) 54%, var(--line));
background: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent);
}
.access-request-intro {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 9px 13px;
align-items: center;
padding: 15px 16px 13px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 17px;
background:
radial-gradient(circle at 98% -24%, rgba(224,122,95,.12), transparent 38%),
color-mix(in srgb, var(--cream) 66%, #fff);
}
.access-request-intro-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: color-mix(in srgb, var(--green) 11%, #fff);
color: var(--green);
}
.access-request-intro-icon svg {
width: 22px;
height: 22px;
}
.access-request-intro-copy,
.access-request-intro-copy > span,
.access-request-intro b,
.access-request-intro p {
display: block;
margin: 0;
}
.access-request-intro-copy {
min-width: 0;
}
.access-request-intro-copy > span {
margin-bottom: 2px;
color: var(--coral-deep);
font-size: 8.5px;
font-weight: 850;
letter-spacing: .12em;
}
.access-request-intro b {
font-family: var(--font-display);
font-size: 16px;
line-height: 1.2;
}
.access-request-intro p {
margin-top: 4px;
max-width: 560px;
color: var(--muted);
font-size: 10.5px;
font-weight: 500;
line-height: 1.45;
}
.access-request-steps {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
margin: 3px 0 0;
padding: 0;
list-style: none;
}
.access-request-steps li {
display: grid;
grid-template-columns: 25px minmax(0, 1fr);
align-items: center;
gap: 7px;
min-width: 0;
padding: 7px 8px;
border: 1px solid rgba(47,85,69,.09);
border-radius: 11px;
background: rgba(255,255,255,.58);
}
.access-request-steps li > span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(47,85,69,.08);
color: var(--green);
font-size: 9.5px;
font-weight: 850;
}
.access-request-steps li.is-current {
border-color: rgba(224,122,95,.18);
background: rgba(255,255,255,.84);
}
.access-request-steps li.is-current > span {
background: var(--coral);
color: #fff;
}
.access-request-steps b,
.access-request-steps small {
display: block;
min-width: 0;
}
.access-request-steps b {
font-size: 10px;
line-height: 1.2;
}
.access-request-steps small {
margin-top: 1px;
overflow: hidden;
color: var(--muted);
font-size: 8.5px;
font-weight: 500;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.access-request-section {
display: grid;
gap: 10px;
padding: 13px 14px 14px;
border: 1px solid rgba(47,85,69,.11);
border-radius: 15px;
background: rgba(255,255,255,.72);
}
.access-request-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.access-request-section-head b,
.access-request-section-head small {
display: block;
}
.access-request-section-head b {
color: var(--green-deep);
font: 800 13px/1.25 var(--font-display);
}
.access-request-section-head small {
margin-top: 1px;
color: var(--muted);
font-size: 9.5px;
font-weight: 500;
}
.access-request-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.access-request-grid > label {
display: grid;
gap: 6px;
min-width: 0;
color: var(--ink);
font-size: 11.5px;
font-weight: 750;
}
.access-request-counter {
position: absolute;
right: 8px;
bottom: 6px;
padding: 2px 5px;
border-radius: 6px;
background: rgba(255,255,255,.82);
}
.access-request-honeypot {
position: fixed !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.access-request-assurance {
display: grid;
gap: 9px;
padding: 11px 12px;
border: 1px solid rgba(47,85,69,.1);
border-radius: 14px;
background: rgba(47,85,69,.035);
}
.access-request-boundary {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: start;
gap: 8px;
padding: 0 0 9px;
border-bottom: 1px solid rgba(47,85,69,.09);
}
.access-request-boundary-icon {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(224,122,95,.12);
color: var(--coral-deep);
font: 850 10px/1 var(--font-sans);
}
.access-request-boundary b {
display: block;
color: var(--ink);
font-size: 10.5px;
}
.access-request-boundary div > span {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 9.5px;
line-height: 1.4;
}
.access-request-consent,
.access-review-confirm {
display: grid !important;
grid-template-columns: 19px minmax(0, 1fr);
align-items: center;
gap: 9px !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1.4;
cursor: pointer;
}
.access-request-consent input,
.access-review-confirm input {
width: 18px !important;
min-height: 18px !important;
height: 18px;
margin: 1px 0 0;
padding: 0 !important;
accent-color: var(--coral);
}
.access-request-consent a {
color: var(--green);
font-weight: 800;
}
.access-request-status {
min-height: 0;
margin: 0;
color: var(--muted);
font-size: 11px;
font-weight: 600;
line-height: 1.45;
}
.access-request-status:not(:empty) {
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 9px 11px;
border: 1px solid rgba(47,85,69,.08);
border-radius: 11px;
background: rgba(47,85,69,.07);
}
.access-request-status:not(:empty)::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
}
.access-request-status.is-loading:not(:empty)::before {
border: 2px solid rgba(47,85,69,.2);
border-top-color: var(--green);
background: transparent;
animation: access-request-spin .75s linear infinite;
}
.access-request-status.is-error:not(:empty) {
border-color: rgba(184,69,48,.12);
background: rgba(184,69,48,.08);
color: var(--bad);
}
.access-request-status.is-error:not(:empty)::before {
background: var(--bad);
}
@keyframes access-request-spin {
to { transform: rotate(360deg); }
}
.access-request-finished {
display: grid;
justify-items: center;
padding: 18px 12px 10px;
text-align: center;
}
.access-request-finished > span {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(47,107,72,.1);
color: var(--ok);
}
.access-request-finished svg {
width: 27px;
height: 27px;
}
.access-request-finished h4 {
margin: 14px 0 6px;
color: var(--green-deep);
font: 800 22px/1.2 var(--font-display);
}
.access-request-finished p {
max-width: 470px;
margin: 0;
color: var(--ink);
font-size: 13px;
line-height: 1.6;
}
.access-request-finished small {
max-width: 440px;
margin-top: 12px;
color: var(--muted);
font-size: 10.5px;
line-height: 1.5;
}
.access-review-queue {
margin: 0 0 20px;
padding: 16px;
border: 1px solid color-mix(in srgb, var(--coral) 22%, var(--line));
border-radius: 18px;
background:
radial-gradient(circle at 100% 0, rgba(224,122,95,.08), transparent 34%),
rgba(255,253,249,.72);
box-shadow: 0 10px 28px rgba(58,73,63,.055);
}
.access-review-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.access-review-head h2 {
margin: 3px 0 2px;
color: var(--green-deep);
font: 800 18px/1.2 var(--font-display);
}
.access-review-head p {
margin: 0;
color: var(--muted);
font-size: 10.5px;
line-height: 1.45;
}
.access-review-count {
display: grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--coral);
color: #fff;
font: 800 12px/1 var(--font-sans);
}
.access-review-list {
display: grid;
gap: 7px;
}
.access-review-card {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
width: 100%;
padding: 10px 11px;
border: 1px solid rgba(47,85,69,.12);
border-radius: 12px;
background: rgba(255,255,255,.76);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.access-review-card:hover,
.access-review-card:focus-visible {
border-color: rgba(224,122,95,.34);
background: #fff;
outline: none;
transform: translateY(-1px);
}
.access-review-avatar,
.access-review-identity-avatar {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--green) 13%, #fff);
color: var(--green-deep);
font-size: 11px;
font-weight: 800;
}
.access-review-main,
.access-review-main b,
.access-review-main small {
display: block;
min-width: 0;
}
.access-review-main b {
overflow: hidden;
font-size: 12.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.access-review-main small {
margin-top: 2px;
overflow: hidden;
color: var(--muted);
font-size: 9.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.access-review-cue {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--coral-deep);
font-size: 10px;
font-weight: 800;
}
.access-review-cue svg {
width: 14px;
height: 14px;
}
#modal-root .access-review-modal {
width: min(660px, calc(100vw - 28px));
max-width: 660px;
}
.access-review-form {
display: grid;
gap: 14px;
}
.access-review-identity {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 15px;
background: color-mix(in srgb, var(--cream) 68%, #fff);
}
.access-review-identity-avatar {
width: 48px;
height: 48px;
font-size: 13px;
}
.access-review-identity div > span,
.access-review-note > span {
display: block;
color: var(--muted);
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.access-review-identity h4 {
margin: 2px 0 1px;
color: var(--green-deep);
font: 800 17px/1.2 var(--font-display);
}
.access-review-identity a {
color: var(--muted);
font-size: 10.5px;
overflow-wrap: anywhere;
}
.access-review-verified {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 8px;
border-radius: 999px;
background: rgba(47,107,72,.1);
color: var(--ok);
font-size: 9.5px;
font-weight: 800;
white-space: nowrap;
}
.access-review-verified svg {
width: 13px;
height: 13px;
}
.access-review-meta {
display: flex;
gap: 7px;
flex-wrap: wrap;
}
.access-review-meta span {
padding: 5px 8px;
border-radius: 999px;
background: rgba(47,85,69,.07);
color: var(--muted);
font-size: 9.5px;
font-weight: 700;
}
.access-review-note {
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255,255,255,.62);
}
.access-review-note p {
margin: 5px 0 0;
color: var(--ink);
font-size: 11.5px;
line-height: 1.55;
}
.access-review-note.is-empty p {
color: var(--muted);
font-style: italic;
}
.access-review-target small {
color: var(--muted);
font-size: 10px;
font-weight: 500;
line-height: 1.45;
}
.access-review-security {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 10px;
padding: 12px;
border: 1px solid rgba(224,122,95,.18);
border-radius: 12px;
background: rgba(224,122,95,.06);
}
.access-review-security > svg {
width: 24px;
height: 24px;
color: var(--coral-deep);
}
.access-review-security p,
.access-review-security b,
.access-review-security span {
display: block;
margin: 0;
}
.access-review-security b {
color: var(--coral-deep);
font-size: 10.5px;
}
.access-review-security span {
margin-top: 2px;
color: var(--muted);
font-size: 9.8px;
line-height: 1.48;
}
#modal-root .bulk-access-review-modal {
width: min(760px, calc(100vw - 28px));
max-width: 760px;
}
.bulk-access-review-form {
gap: 12px;
}
.bulk-access-intro {
border-color: rgba(47,85,69,.17);
background: rgba(47,85,69,.055);
}
.bulk-access-intro > svg {
color: var(--green-deep);
}
.bulk-access-intro b {
color: var(--green-deep);
}
.bulk-access-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.bulk-access-summary > div {
display: grid;
gap: 2px;
padding: 10px 12px;
border: 1px solid rgba(47,85,69,.1);
border-radius: 12px;
background: rgba(255,255,255,.66);
}
.bulk-access-summary span {
color: var(--muted);
font-size: 9px;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.bulk-access-summary b {
color: var(--green-deep);
font: 800 17px/1.2 var(--font-display);
}
.bulk-access-list {
display: grid;
max-height: min(360px, 42vh);
overflow-y: auto;
border: 1px solid rgba(47,85,69,.13);
border-radius: 14px;
background: rgba(255,255,255,.5);
scrollbar-gutter: stable;
}
.bulk-access-person {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) minmax(190px, auto);
gap: 11px;
align-items: center;
min-width: 0;
padding: 10px 12px;
border-top: 1px solid rgba(47,85,69,.09);
}
.bulk-access-person:first-child {
border-top: 0;
}
.bulk-access-person-main {
display: grid;
min-width: 0;
}
.bulk-access-person-main b {
overflow: hidden;
color: var(--ink);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.bulk-access-person-main a {
margin-top: 2px;
overflow: hidden;
color: var(--muted);
font-size: 9.5px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.bulk-access-person-state {
display: flex;
justify-content: flex-end;
gap: 5px;
flex-wrap: wrap;
}
.bulk-access-person-state span,
.bulk-access-person-state strong {
padding: 4px 7px;
border-radius: 999px;
background: rgba(47,85,69,.07);
color: var(--muted);
font-size: 8.5px;
font-weight: 800;
white-space: nowrap;
}
.bulk-access-person-state strong {
background: rgba(47,107,72,.11);
color: var(--ok);
}
.bulk-access-conflicts {
display: grid;
gap: 2px;
padding: 10px 12px;
border-left: 3px solid var(--amber);
border-radius: 4px 11px 11px 4px;
background: rgba(226,159,59,.09);
}
.bulk-access-conflicts b {
color: #79551d;
font-size: 10.5px;
}
.bulk-access-conflicts span {
color: var(--muted);
font-size: 9.5px;
line-height: 1.45;
}
.bulk-access-confirm {
padding: 11px 12px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 12px;
background: rgba(47,85,69,.045);
}
#modal-root [data-bulk-access-confirm-button]:disabled {
cursor: not-allowed;
opacity: .48;
box-shadow: none;
}
.access-review-reject {
color: var(--bad);
}
@media (max-width: 560px) {
.login-request-access {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
#modal-root .access-request-modal,
#modal-root .access-review-modal,
#modal-root .bulk-access-review-modal {
width: 100%;
max-width: none;
}
#modal-root .access-request-modal {
max-height: calc(100dvh - env(safe-area-inset-top, 0px));
border-radius: 21px 21px 0 0;
}
.access-request-modal > .modal-head {
padding-top: 15px !important;
padding-bottom: 14px;
}
.access-request-modal > .modal-body {
padding-top: 12px !important;
padding-bottom: 14px;
}
.access-request-modal > .modal-foot {
display: grid;
grid-template-columns: minmax(88px, .62fr) minmax(0, 1.38fr);
gap: 8px;
padding-top: 11px;
padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
}
.access-request-modal > .modal-foot .btn {
flex: none;
width: 100%;
min-width: 0;
padding-inline: 10px;
}
.access-request-grid {
grid-template-columns: 1fr;
}
.access-request-intro {
grid-template-columns: 38px minmax(0, 1fr);
padding: 12px;
}
.access-request-intro-icon {
width: 38px;
height: 38px;
}
.access-request-intro b {
font-size: 14.5px;
}
.access-request-intro p {
font-size: 10px;
}
.access-request-steps {
gap: 5px;
}
.access-request-steps li {
grid-template-columns: 21px minmax(0, 1fr);
gap: 5px;
padding: 6px;
}
.access-request-steps li > span {
width: 21px;
height: 21px;
}
.access-request-steps b {
font-size: 9px;
}
.access-request-steps small {
display: none;
}
.access-request-section {
padding: 12px;
}
.access-request-section-head small {
font-size: 9px;
}
.access-request-form textarea {
min-height: 82px;
}
.access-review-queue {
margin-bottom: 16px;
padding: 13px;
border-radius: 16px;
}
.access-review-card {
grid-template-columns: 36px minmax(0, 1fr) 18px;
gap: 9px;
}
.access-review-avatar {
width: 36px;
height: 36px;
}
.access-review-cue {
width: 18px;
overflow: hidden;
color: var(--coral-deep);
font-size: 0;
}
.access-review-cue svg {
width: 18px;
height: 18px;
}
.access-review-identity {
grid-template-columns: 44px minmax(0, 1fr);
}
.access-review-identity-avatar {
width: 44px;
height: 44px;
}
.access-review-verified {
grid-column: 1 / -1;
justify-self: start;
}
.bulk-access-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
.bulk-access-summary > div {
padding: 8px;
}
.bulk-access-summary span {
font-size: 7.5px;
}
.bulk-access-person {
grid-template-columns: 36px minmax(0, 1fr);
gap: 8px;
padding: 10px;
}
.bulk-access-person-state {
grid-column: 2;
justify-content: flex-start;
}
.bulk-access-person-state span:first-child {
display: none;
}
#modal-root .access-review-modal > .modal-foot {
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
#modal-root .access-review-modal > .modal-foot .btn {
width: 100%;
min-width: 0;
padding-left: 9px;
padding-right: 9px;
}
}
.workspace-tool-zone { position: relative; z-index: 42; width: 100%; max-width: 1180px; margin: 0 0 16px; }
.workspace-tools { display: flex; justify-content: flex-end; align-items: center; gap: 9px; width: 100%; margin: 0; }
.workspace-search-wrap, .workspace-notifications-wrap, .workspace-add-menu { position: relative; }
.workspace-search { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.74); color: var(--muted); font: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(50,47,39,.035); }
.workspace-search:hover, .workspace-search.on { border-color: color-mix(in srgb, var(--sage-deep) 35%, var(--line)); background: #fff; color: var(--ink); }
.workspace-search svg { width: 18px; height: 18px; flex: 0 0 18px; }
.workspace-search > span { font-size: 12px; font-weight: 700; }
.workspace-search kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); color: var(--muted); font: 700 10px/1.2 var(--font-sans); }
.workspace-notifications { position: relative; display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--muted); cursor: pointer; }
.workspace-notifications:hover, .workspace-notifications.on { border-color: var(--line); background: rgba(255,255,255,.74); color: var(--ink); }
.workspace-notifications > svg { width: 18px; height: 18px; }
.workspace-notifications .nb-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--paper); border-radius: 999px; background: var(--coral); color: #fff; font-size: 9px; line-height: 14px; text-align: center; }
.workspace-add-menu > summary { list-style: none; min-height: 42px; cursor: pointer; }
.workspace-add-menu > summary::-webkit-details-marker { display: none; }
.workspace-add-menu[open] > summary { box-shadow: 0 0 0 3px rgba(224,122,95,.16); }
.workspace-add-panel { position: absolute; z-index: 4; top: calc(100% + 8px); right: 0; display: grid; width: min(310px, calc(100vw - 28px)); padding: 7px; border: 1px solid rgba(47,85,69,.15); border-radius: 15px; background: rgba(255,253,249,.9); box-shadow: 0 18px 44px rgba(34,48,42,.18); backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); }
.workspace-add-menu[open] .workspace-add-panel { animation: workspacePopoverIn .16s ease-out; }
@keyframes workspacePopoverIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.workspace-add-panel button { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 11px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.workspace-add-panel button:hover { background: rgba(248,242,229,.82); }
.workspace-add-panel button b { font-size: 13px; }
.workspace-add-panel button small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.workspace-add-panel button[hidden] { display: none; }
.empty-state.empty-state-action > div { display: grid; justify-items: center; gap: 7px; max-width: 500px; margin: auto; }
.empty-state.empty-state-action b { color: var(--ink); font-size: 15px; }
.empty-state.empty-state-action span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.empty-state.empty-state-action .small-btn { margin-top: 4px; }
@media (max-width: 760px) {
.workspace-tool-zone { margin-bottom: 13px; }
.workspace-tools { align-items: stretch; }
.workspace-search-wrap { flex: 1 1 auto; }
.workspace-search { justify-content: flex-start; min-height: 44px; }
.workspace-search > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-search kbd { display: none; }
.workspace-notifications { flex-basis: 44px; width: 44px; height: 44px; }
.workspace-add-menu > summary { min-height: 44px; padding-left: 14px; padding-right: 14px; }
.workspace-add-panel { top: calc(100% + 8px); right: 0; bottom: auto; width: calc(100vw - 28px); padding: 9px; border-radius: 16px; }
#search-root { right: auto; left: 0; transform-origin: top left; }
#notifications-root { right: -87px; }
.workspace-add-panel button { min-height: 56px; padding: 10px 12px; }
.search-inp-wrap { padding: 13px 14px; }
#search-inp { min-width: 0; font-size: 15px; }
.search-results { max-height: 44vh; }
.search-hint { display: none; }
}
.work-scope-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.68); }
.work-scope-bar > div:first-child b, .work-scope-bar > div:first-child span { display: block; }
.work-scope-bar > div:first-child b { font-family: var(--font-display); font-size: 15px; }
.work-scope-bar > div:first-child span { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.scope-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border-radius: 11px; background: var(--cream-deep); }
.scope-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 12px/1 var(--font-sans); cursor: pointer; }
.scope-btn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 99px; background: rgba(47,85,69,.08); font-size: 9px; }
.scope-btn.on { background: #fff; color: var(--ink); box-shadow: 0 2px 7px rgba(48,52,43,.09); }
.board.board-mine { justify-content: flex-start; }
.dash-side-label { padding: 14px 16px 5px; }
.dash-side-label b, .dash-side-label span { display: block; }
.dash-side-label b { font-family: var(--font-display); font-size: 16px; }
.dash-side-label span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.dash-meeting-list-primary { margin-top: 2px; }
.dash-organization { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.48); }
.dash-organization > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; cursor: pointer; list-style: none; }
.dash-organization > summary::-webkit-details-marker { display: none; }
.dash-organization > summary > div > span, .dash-organization > summary > div > b, .dash-organization > summary > div > small { display: block; }
.dash-organization > summary > div > b { margin-top: 2px; font-family: var(--font-display); font-size: 18px; }
.dash-organization > summary > div > small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.dash-organization-arrow { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--cream-deep); color: var(--muted); transition: transform .18s ease; }
.dash-organization[open] .dash-organization-arrow { transform: rotate(180deg); }
.dash-organization-body { display: grid; gap: 16px; padding: 0 16px 16px; border-top: 1px solid var(--line); }
.dash-organization-inspiration { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; }
.dash-organization-inspiration > * { margin: 0 !important; min-width: 0; }
@media (max-width: 760px) {
.work-scope-bar { align-items: stretch; flex-direction: column; gap: 10px; padding: 11px; }
.scope-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.scope-btn { justify-content: center; min-height: 38px; }
.dash-side-label { padding: 12px 13px 3px; }
.dash-personal-row { gap: 11px; }
.dash-organization > summary { padding: 14px; }
.dash-organization-body { padding: 0 11px 11px; }
.dash-organization-inspiration { grid-template-columns: 1fr; gap: 11px; padding-top: 11px; }
}
.project-view-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; }
.project-search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; max-width: 430px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); color: var(--muted); }
.project-search svg { flex: 0 0 17px; width: 17px; height: 17px; }
.project-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 12px/1.3 var(--font-sans); }
.project-layout-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border-radius: 10px; background: var(--cream-deep); }
.project-layout-switch button { min-height: 32px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 700 11px/1 var(--font-sans); cursor: pointer; }
.project-layout-switch button.on { color: var(--ink); box-shadow: 0 2px 7px rgba(48,52,43,.08); }
.project-list-view { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.68); }
.project-list-row { display: grid; grid-template-columns: 38px minmax(220px,1.5fr) minmax(110px,.7fr) minmax(105px,.7fr) 75px 22px; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.project-list-row:last-child { border-bottom: 0; }
.project-list-row:hover { background: rgba(255,255,255,.8); }
.project-list-icon { width: 34px; height: 34px; }
.project-list-main, .project-list-main b, .project-list-main small { display: block; min-width: 0; }
.project-list-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.project-list-main small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.project-list-owner, .project-list-status, .project-list-tasks { color: var(--muted); font-size: 10.5px; }
.project-list-status { display: inline-flex; align-items: center; gap: 6px; }
.project-list-status i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; }
.project-list-arrow { color: var(--sage-deep); font-weight: 800; }
.load-more-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 15px 0 2px; color: var(--muted); font-size: 11px; }
.load-more-row.is-complete { opacity: .75; }
.meeting-workflow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
.meeting-phase-column { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.48); }
.meeting-phase-head { display: grid; grid-template-columns: 28px minmax(0,1fr) 24px; align-items: center; gap: 9px; padding: 2px 2px 11px; }
.meeting-phase-head > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-deep); color: var(--sage-deep); font: 800 11px/1 var(--font-sans); }
.meeting-phase-head b, .meeting-phase-head small { display: block; }
.meeting-phase-head b { font-family: var(--font-display); font-size: 14px; }
.meeting-phase-head small { margin-top: 1px; color: var(--muted); font-size: 9.5px; line-height: 1.3; }
.meeting-phase-head > i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: rgba(47,85,69,.08); color: var(--muted); font: 700 9px/1 var(--font-sans); }
.meeting-phase-write .meeting-phase-head > span { background: rgba(224,122,95,.14); color: var(--coral-deep); }
.meeting-phase-empty { padding: 20px 9px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); font-size: 10.5px; text-align: center; }
.meeting-workflow .meetings-list { gap: 8px; }
.meeting-workflow .meetcard { gap: 10px; padding: 11px; }
.meeting-workflow .mc-date { flex: 0 0 48px; width: 48px; padding: 7px 4px; }
.meeting-workflow .meetcard-kind { font-size: 9px; }
.meeting-workflow .meetcard-when { font-size: 13px; }
.meeting-workflow .meetcard-sub { font-size: 9.5px; line-height: 1.4; }
.meeting-workflow .meetcard::after { display: none; }
.meeting-work-card { width: 100%; color: var(--ink); font: inherit; text-align: left; cursor: pointer; appearance: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.meeting-work-card:hover, .meeting-work-card:focus-visible { border-color: rgba(47,85,69,.3); background: rgba(255,255,255,.94); box-shadow: 0 10px 25px rgba(47,85,69,.09); transform: translateY(-1px); outline: none; }
.meeting-card-cue { display: block; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; color: var(--sage-deep); font: 800 10.5px/1.3 var(--font-sans); transition: opacity .16s ease, max-height .16s ease, margin-top .16s ease; }
.meeting-work-card:hover .meeting-card-cue, .meeting-work-card:focus-visible .meeting-card-cue { max-height: 20px; margin-top: 8px; opacity: 1; }
.meeting-closed-section { margin-top: 16px; padding: 13px; border: 1px solid rgba(47,85,69,.14); border-radius: 16px; background: rgba(255,255,255,.4); }
.meeting-closed-head { display: grid; grid-template-columns: 31px minmax(0,1fr) 25px; align-items: center; gap: 10px; padding: 1px 2px 12px; }
.meeting-closed-head > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(75,135,94,.12); color: var(--go); }
.meeting-closed-head svg { width: 15px; height: 15px; }
.meeting-closed-head b, .meeting-closed-head small { display: block; }
.meeting-closed-head b { font-family: var(--font-display); font-size: 15px; }
.meeting-closed-head small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.meeting-closed-head > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(47,85,69,.08); color: var(--muted); font: 700 9px/1 var(--font-sans); }
.meeting-closed-list { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.66); }
.meeting-closed-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.meeting-closed-row:last-child { border-bottom: 0; }
.meeting-closed-row:hover, .meeting-closed-row:focus-visible { background: rgba(255,255,255,.92); outline: none; }
.meeting-closed-check { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(75,135,94,.1); color: var(--go); }
.meeting-closed-check svg { width: 13px; height: 13px; }
.meeting-closed-main, .meeting-closed-main b, .meeting-closed-main small { display: block; min-width: 0; }
.meeting-closed-main b { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-closed-main small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.meeting-closed-cue { color: var(--sage-deep); font-size: 10px; font-weight: 800; opacity: .68; }
.meeting-phase-stepper { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 0 14px; }
.meeting-phase-step { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.45); color: var(--muted); }
.meeting-phase-step > span { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background: var(--cream-deep); font-size: 10px; font-weight: 800; }
.meeting-phase-step b, .meeting-phase-step small { display: block; }
.meeting-phase-step b { font-size: 11px; }
.meeting-phase-step small { margin-top: 1px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-phase-step.is-current { border-color: rgba(224,122,95,.36); background: rgba(255,249,244,.92); color: var(--ink); }
.meeting-phase-step.is-current > span { background: var(--coral); color: #fff; }
.meeting-phase-step.is-done > span { background: var(--sage-deep); color: #fff; }
.meeting-phase-primary { margin-left: auto; min-height: 36px; padding: 8px 12px; font-size: 11px; }
.meeting-agenda-auto-note { display: flex; align-items: flex-start; gap: 9px; margin-top: -2px; padding: 10px 12px; border: 1px solid rgba(47,85,69,.14); border-radius: 11px; background: rgba(237,244,236,.64); }
.meeting-agenda-auto-note b { flex: 0 0 auto; color: var(--sage-deep); font-size: 10.5px; }
.meeting-agenda-auto-note span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.meeting-section-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.meeting-agenda-fill { color: var(--sage-deep); }
.meeting-agenda-remove { color: var(--muted); }
.meeting-ideas-section { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid rgba(47,85,69,.14); border-radius: 16px; background: rgba(255,253,248,.58); }
.meeting-ideas-head { align-items: flex-end; margin: 0; }
.meeting-ideas-head h3 { margin: 3px 0 3px; }
.meeting-ideas-head p { max-width: 690px; margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.meeting-ideas-note { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(237,244,236,.68); color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.meeting-ideas-note svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--sage-deep); }
.meeting-idea-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.meeting-idea-card { position: relative; min-width: 0; border: 1px solid rgba(47,85,69,.14); border-radius: 13px; background: rgba(255,255,255,.76); overflow: hidden; }
.meeting-idea-card.stage-preneseno { background: rgba(237,244,236,.7); }
.meeting-idea-main { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 11px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.meeting-idea-main:hover { background: rgba(255,255,255,.82); }
.meeting-idea-plant { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(237,244,236,.82); color: var(--sage-deep); }
.meeting-idea-main > span:nth-child(2) { min-width: 0; }
.meeting-idea-main b,
.meeting-idea-main small,
.meeting-idea-outcome { display: block; }
.meeting-idea-main b { margin-top: 4px; overflow: hidden; font-size: 11.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.meeting-idea-main small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.meeting-idea-main > i { color: var(--sage-deep); font-size: 9.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.meeting-idea-outcome { margin-top: 4px; color: var(--go); font-size: 9px; font-weight: 800; }
.meeting-idea-remove { position: absolute; top: 7px; right: 7px; padding: 4px 6px; background: rgba(255,253,248,.92); color: var(--muted); font-size: 8px; opacity: 0; transition: opacity .14s ease; }
.meeting-idea-card:hover .meeting-idea-remove,
.meeting-idea-remove:focus-visible { opacity: 1; }
.meeting-idea-card:has(.meeting-idea-remove) .meeting-idea-main { padding-right: 66px; }
.meeting-ideas-empty { grid-column: 1/-1; padding: 15px; border: 1px dashed rgba(47,85,69,.17); border-radius: 12px; text-align: center; }
.meeting-ideas-empty b,
.meeting-ideas-empty span { display: block; }
.meeting-ideas-empty b { font-size: 11.5px; }
.meeting-ideas-empty span { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.meeting-preparation-fields { padding: 16px; }
.meeting-preparation-fields-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.meeting-preparation-fields-head h3 { margin: 3px 0 0; }
.meeting-preparation-fields-head > small { max-width: 230px; color: var(--muted); font-size: 10px; line-height: 1.4; text-align: right; }
.meeting-closure-card { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,auto) auto; align-items: center; gap: 16px; border-color: rgba(47,85,69,.18); background: rgba(255,255,255,.75); }
.meeting-closure-copy h3, .meeting-closure-card.is-closed h3 { margin: 3px 0 4px; }
.meeting-closure-copy p, .meeting-closure-card.is-closed p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.meeting-close-checks { display: flex; flex-wrap: wrap; gap: 5px; }
.meeting-close-checks span { padding: 5px 7px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.meeting-close-checks .ok { background: rgba(75,135,94,.1); color: var(--go); }
.meeting-close-checks .warn { background: rgba(224,122,95,.11); color: var(--coral-deep); }
.meeting-closure-card.is-closed { grid-template-columns: 38px minmax(0,1fr); background: rgba(237,244,236,.72); }
.meeting-closure-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(75,135,94,.13); color: var(--go); }
.meeting-closure-icon svg { width: 18px; height: 18px; }
.workspace-tool-zone { margin-bottom: 8px; }
.workspace-tools { gap: 3px; }
.workspace-search { min-height: 34px; padding: 5px 8px; border-color: transparent; border-radius: 9px; background: transparent; box-shadow: none; }
.workspace-search:hover, .workspace-search.on { border-color: transparent; background: rgba(255,255,255,.6); }
.workspace-search svg { width: 15px; height: 15px; flex-basis: 15px; }
.workspace-search > span { font-size: 10.5px; font-weight: 650; }
.workspace-search kbd { padding: 2px 5px; border-color: rgba(47,85,69,.1); background: rgba(255,255,255,.36); font-size: 8.5px; }
.workspace-notifications { flex-basis: 34px; width: 34px; height: 34px; border-radius: 9px; }
.workspace-notifications > svg { width: 15px; height: 15px; }
.workspace-add-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: 700 10.5px/1 var(--font-sans); cursor: pointer; }
.workspace-add-trigger:hover, .workspace-add-menu[open] > .workspace-add-trigger { background: rgba(255,255,255,.64); color: var(--ink); }
.workspace-add-menu[open] > summary { box-shadow: none; }
@media (max-width: 900px) {
.meeting-workflow { grid-template-columns: 1fr; }
.meeting-phase-column { padding: 10px; }
.meeting-closure-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.project-view-controls { gap: 8px; }
.project-search { flex-basis: auto; width: 100%; max-width: none; box-sizing: border-box; }
.project-layout-switch { grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
.project-list-row { grid-template-columns: 34px minmax(0,1fr) 18px; gap: 9px; padding: 11px; }
.project-list-owner, .project-list-status, .project-list-tasks { display: none; }
.load-more-row { align-items: stretch; flex-direction: column; text-align: center; }
.meeting-phase-stepper { display: flex; overflow-x: auto; padding-bottom: 3px; }
.meeting-phase-step { flex: 0 0 min(235px,76vw); }
.meeting-card-cue { max-height: 20px; margin-top: 7px; opacity: .72; }
.meeting-closed-section { padding: 10px; }
.meeting-closed-head small { line-height: 1.35; }
.meeting-closed-row { grid-template-columns: 27px minmax(0,1fr) 17px; padding: 10px; }
.meeting-closed-cue { overflow: hidden; width: 17px; color: transparent; }
.meeting-closed-cue span { color: var(--sage-deep); }
.meeting-preparation-fields-head { align-items: flex-start; flex-direction: column; }
.meeting-preparation-fields-head > small { max-width: none; text-align: left; }
.meeting-section-actions { align-items: stretch; flex-direction: column; width: 100%; }
.meeting-section-actions > * { flex: 0 0 auto; width: 100%; min-height: 38px; }
.meeting-idea-list { grid-template-columns: 1fr; }
.meeting-idea-remove { opacity: 1; }
.meeting-idea-main { grid-template-columns: 42px minmax(0,1fr); }
.meeting-idea-main > i { grid-column: 2; }
.meeting-agenda-auto-note { flex-direction: column; gap: 3px; }
.meeting-detail-toolbar { gap: 6px; }
.meeting-phase-primary { order: 4; flex: 1 1 100%; margin-left: 0; }
.workspace-tool-zone { margin-bottom: 5px; }
.workspace-search { min-height: 36px; }
.workspace-notifications { flex-basis: 36px; width: 36px; height: 36px; }
.workspace-add-menu > summary { min-height: 36px; padding-left: 9px; padding-right: 9px; }
}
.people-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.people-capacity-link { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.62); color: var(--green-deep); font: 700 11px/1 var(--font-sans); cursor: pointer; }
.people-capacity-link:hover { border-color: rgba(47,85,69,.28); background: #fff; }
.people-capacity-link svg { width: 16px; height: 16px; }
@media (max-width: 620px) {
.people-head-actions { width: 100%; justify-content: flex-start; }
.people-head-actions > * { flex: 1 1 auto; justify-content: center; }
}
.dash-agenda-panel { overflow: hidden; border-radius: 12px; position: relative; }
.dash-agenda-panel .dash-day-event { min-height: 0; padding: 16px 17px 15px; border: 0; border-bottom: 1px solid var(--ui-line-soft); border-radius: 0; background: rgba(248,242,229,.58); box-shadow: none; }
.dash-agenda-panel .dash-day-title { margin-top: 11px; font-size: 18px; }
.dash-agenda-panel .dash-day-text { margin-top: 6px; -webkit-line-clamp: 2; font-size: 11.5px; line-height: 1.42; }
.dash-agenda-panel .dash-day-link { margin-top: 10px; font-size: 10.5px; }
.dash-agenda-panel .dash-day-date { padding: 4px 8px; font-size: 10.5px; }
.dash-meetings-head { display: flex; align-items: flex-start; gap: 7px; padding: 14px 16px 7px; }
.dash-meetings-head > div > b, .dash-meetings-head > div > span { display: block; }
.dash-meetings-head b { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.dash-meetings-head > div > span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.dash-agenda-panel .dash-meeting-list { border-radius: 0; background: transparent; box-shadow: none; }
.dash-panel-title { display: flex; align-items: center; gap: 7px; }
.dash-panel-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; overflow: hidden; color: var(--sage-deep); }
.dash-panel-icon svg { display: block; flex: 0 0 15px; width: 15px; height: 15px; }
.dash-meetings-head > .dash-panel-icon { margin-top: 1px; }
.dash-panel-title .badge-over { margin-left: 2px; }
.dash-kicker svg { width: 15px; height: 15px; }
.dash-organization-inspiration-single { grid-template-columns: minmax(0,1fr); }
.dash-organization-inspiration-single .dash-seed-card { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
.dash-agenda-panel .dash-day-event { padding: 14px; }
.dash-agenda-panel .dash-day-title { font-size: 17px; }
.dash-meetings-head { padding: 13px 13px 5px; }
.dash-panel-icon { flex-basis: 16px; width: 16px; height: 16px; }
}
.meeting-detail-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
}
.meeting-detail-toolbar.is-editing {
position: sticky;
top: 8px;
z-index: 38;
margin: 0 0 14px;
padding: 7px 8px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 14px;
background: rgba(255,253,249,.9);
box-shadow: 0 12px 30px rgba(34,48,42,.11);
backdrop-filter: blur(16px) saturate(115%);
-webkit-backdrop-filter: blur(16px) saturate(115%);
}
.meeting-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
.meeting-toolbar-save { min-height: 38px; padding: 8px 14px; white-space: nowrap; }
.meeting-action-menu { flex: 0 0 auto; }
.meeting-action-menu-panel { z-index: 2; right: 0; left: auto; }
.meeting-hero-panel.is-editing { padding-top: 10px; margin-bottom: 15px; }
.meeting-hero-panel.is-editing .pd-title { margin-bottom: 5px; font-size: clamp(27px,4vw,38px); }
.meeting-phase-intro { max-width: 720px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.meeting-phase-stepper { position: relative; gap: 6px; }
.meeting-phase-step { border-color: rgba(47,85,69,.11); background: rgba(255,255,255,.38); }
.meeting-phase-step.is-current { border-color: rgba(224,122,95,.28); box-shadow: inset 0 -2px 0 rgba(224,122,95,.34); }
.meeting-preparation-fields { border-radius: 14px; box-shadow: none; }
.meeting-save-row {
position: sticky;
bottom: 14px;
z-index: 24;
justify-content: flex-end;
min-height: 56px;
padding: 9px 10px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 14px;
background: rgba(255,253,249,.92);
box-shadow: 0 14px 34px rgba(34,48,42,.13);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.meeting-save-row > span { margin-right: auto; color: var(--muted); font-size: 10px; line-height: 1.35; }
.meeting-quickfacts { grid-template-columns: repeat(4,minmax(0,1fr)); }
.meeting-format-editor { display: grid; gap: 10px; margin: 10px 0 14px; }
.meeting-format-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.meeting-online-config { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(280px,1.2fr); align-items: stretch; gap: 8px 10px; padding: 12px; border: 1px solid rgba(47,85,69,.13); border-radius: 12px; background: rgba(237,244,236,.48); }
.meeting-online-label { grid-column: 1 / -1; color: var(--green-deep); font-size: 11.5px; font-weight: 850; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.meeting-online-config .field { margin: 0; }
.meeting-format-editor [hidden] { display: none !important; }
.meeting-meet-hint { display: flex; align-items: center; gap: 10px; min-height: 43px; height: 100%; padding: 8px 10px; box-sizing: border-box; border-radius: 10px; background: rgba(255,255,255,.68); color: var(--green-deep); }
.meeting-meet-hint-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgba(47,85,69,.09); }
.meeting-meet-hint-icon svg { width: 16px; height: 16px; }
.meeting-meet-hint b, .meeting-meet-hint small { display: block; }
.meeting-meet-hint b { font-size: 10.5px; }
.meeting-meet-hint small { margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.meeting-call-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; margin: 0 0 16px; padding: 13px 14px; border: 1px solid rgba(47,85,69,.16); border-radius: 14px; background: linear-gradient(135deg,rgba(237,244,236,.78),rgba(255,253,249,.86)); box-shadow: 0 9px 24px rgba(34,48,42,.06); }
.meeting-call-card.is-ready { border-color: rgba(47,85,69,.24); }
.meeting-call-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sage-deep); color: #fff; }
.meeting-call-icon svg { width: 21px; height: 21px; }
.meeting-call-copy { min-width: 0; }
.meeting-call-copy h3 { margin: 2px 0 3px; font-size: 15px; }
.meeting-call-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.meeting-call-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.meeting-call-actions .btn { min-height: 36px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.meeting-join-call { box-shadow: 0 7px 18px rgba(224,122,95,.2); }
.meeting-calendar-badge.is-dirty { background: rgba(247,184,76,.16); color: #8a611d; }
.meeting-runway { display: grid; gap: 12px; padding: 15px; border: 1px solid rgba(47,85,69,.14); border-radius: 17px; background: linear-gradient(135deg,rgba(255,253,249,.92),rgba(237,244,236,.58)); box-shadow: 0 10px 28px rgba(34,48,42,.07); }
.meeting-runway-intro { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); align-items: baseline; gap: 3px 11px; }
.meeting-runway-intro .eyebrow { grid-row: 1 / 3; align-self: center; }
.meeting-runway-intro b { color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.meeting-runway-intro small { color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.meeting-runway-steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.meeting-runway-step { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) 10px; align-items: center; gap: 7px; min-width: 0; min-height: 58px; padding: 9px 8px; border: 1px solid rgba(47,85,69,.12); border-radius: 12px; background: rgba(255,255,255,.72); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .14s ease,background .14s ease,transform .14s ease,box-shadow .14s ease; }
.meeting-runway-step:hover,.meeting-runway-step:focus-visible { border-color: rgba(47,85,69,.28); background: #fff; box-shadow: 0 7px 18px rgba(34,48,42,.08); transform: translateY(-1px); outline: none; }
.meeting-runway-number,.meeting-step-index { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: rgba(224,122,95,.13); color: var(--coral-deep); font-size: 10px; font-weight: 850; }
.meeting-runway-step.is-complete .meeting-runway-number { background: rgba(75,135,94,.13); color: var(--go); }
.meeting-runway-step.is-current {
border-color: rgba(224,122,95,.42);
background: #fff;
box-shadow: 0 0 0 3px rgba(224,122,95,.08),0 7px 18px rgba(34,48,42,.06);
}
.meeting-runway-step.is-current .meeting-runway-number { background: var(--coral); color: #fff; }
.meeting-runway-step.is-current.is-complete .meeting-runway-number { background: var(--go); color: #fff; }
.meeting-runway-copy,.meeting-runway-copy b,.meeting-runway-copy small { display: block; min-width: 0; }
.meeting-runway-copy b { font-size: 10.5px; }
.meeting-runway-copy small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-runway-arrow { color: var(--sage-deep); font-size: 16px; line-height: 1; }
#meeting-write-attendance,#meeting-write-agenda,#meeting-write-summary,#meeting-write-finish,#meeting-write-add-link { scroll-margin-top: 92px; }
.meeting-attendance-start { background: linear-gradient(135deg,rgba(255,253,249,.96),rgba(237,244,236,.54)); }
.meeting-step-section-head { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: 10px; margin-bottom: 13px; }
.meeting-step-section-head h3 { margin: 2px 0 2px; }
.meeting-step-section-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.meeting-step-section-head > small { align-self: center; padding: 5px 8px; border-radius: 999px; background: rgba(47,85,69,.07); color: var(--green-deep); font-size: 9.5px; font-weight: 750; white-space: nowrap; }
.meeting-numbered-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meeting-numbered-title > div { min-width: 0; }
.meeting-numbered-title .eyebrow { display: block; margin-bottom: 2px; }
.meeting-numbered-title h3 { margin: 0; }
.meeting-card-numbered-title { align-items: flex-start; margin-bottom: 12px; }
.meeting-card-numbered-title p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.meeting-finish-card { background: linear-gradient(135deg,rgba(255,253,249,.95),rgba(247,239,222,.5)); }
.meeting-next-date-label { margin: 0 0 6px; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.meeting-closure-copy-numbered { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 10px; }
.meeting-primary-section-head { padding-top: 4px; }
.meeting-detail-gas details.meeting-agenda-disclosure { padding: 0; overflow: hidden; }
.meeting-agenda-summary { display: grid; grid-template-columns: minmax(0,1fr) auto 24px; align-items: center; gap: 12px; min-height: 66px; padding: 13px 15px; cursor: pointer; list-style: none; }
.meeting-agenda-summary::-webkit-details-marker,.meeting-context-disclosure > summary::-webkit-details-marker,.meeting-ideas-disclosure > summary::-webkit-details-marker,.meeting-doc-disclosure > summary::-webkit-details-marker { display: none; }
.meeting-agenda-summary-main,.meeting-agenda-summary-main b,.meeting-agenda-summary-main small { display: block; min-width: 0; }
.meeting-agenda-summary-main b { overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-agenda-summary-main small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.meeting-agenda-summary-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.meeting-agenda-summary-meta span { padding: 4px 7px; border-radius: 999px; background: rgba(47,85,69,.07); color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.meeting-agenda-summary-meta .has-note { background: rgba(75,135,94,.12); color: var(--go); }
.meeting-agenda-summary > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cream-deep); color: var(--green-deep); font-size: 16px; font-style: normal; transition: transform .16s ease; }
.meeting-agenda-disclosure[open] .meeting-agenda-summary { border-bottom: 1px solid var(--line); background: rgba(237,244,236,.3); }
.meeting-agenda-disclosure[open] .meeting-agenda-summary > i { transform: rotate(180deg); }
.meeting-agenda-body { padding: 14px 16px 16px; }
.meeting-agenda-body .meeting-agenda-head { grid-template-columns: minmax(150px,1fr) 130px auto; }
.meeting-detail-gas .meeting-control-btn,.meeting-detail-gas .btn-add-row { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 35px; padding: 7px 10px; border: 1px solid rgba(47,85,69,.15); border-radius: 10px; background: rgba(255,255,255,.72); color: var(--green-deep); font-family: var(--font-sans); font-size: 10.5px; font-weight: 780; line-height: 1.1; text-decoration: none; cursor: pointer; box-shadow: none; }
.meeting-detail-gas .meeting-control-btn:hover,.meeting-detail-gas .meeting-control-btn:focus-visible,.meeting-detail-gas .btn-add-row:hover,.meeting-detail-gas .btn-add-row:focus-visible { border-color: rgba(47,85,69,.3); background: #fff; color: var(--ink); outline: none; text-decoration: none; }
.meeting-detail-gas .meeting-control-btn > span { font-size: 13px; line-height: 1; }
.meeting-project-title.meeting-open-project-link { align-self: center; justify-self: start; width: auto; min-width: 0; overflow: visible; color: var(--green-deep); font-family: var(--font-sans); font-size: 10.5px; text-overflow: clip; white-space: nowrap; }
.meeting-agenda-card-actions .meeting-control-btn { padding: 7px 10px; }
.meeting-decision-hint .meeting-control-btn { min-height: 35px; padding: 7px 10px; border: 1px solid rgba(47,85,69,.15); background: rgba(255,255,255,.72); color: var(--green-deep); font-size: 10.5px; }
.meeting-decision-hint .meeting-control-btn:hover { background: #fff; color: var(--ink); text-decoration: none; }
.meeting-context-disclosure { display: block; padding: 0; overflow: hidden; }
.meeting-context-disclosure > summary { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.meeting-context-disclosure > summary > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-deep); color: var(--sage-deep); }
.meeting-context-disclosure > summary > span svg { width: 16px; height: 16px; }
.meeting-context-disclosure > summary b { font-size: 11px; }
.meeting-context-disclosure > summary i,.meeting-ideas-disclosure > summary i,.meeting-doc-disclosure > summary i { color: var(--green-deep); font-size: 9.5px; font-style: normal; font-weight: 800; }
.meeting-context-detail { padding: 0 14px 12px 54px; }
.meeting-context-detail small,.meeting-context-detail em { display: block; }
.meeting-context-detail small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.meeting-context-detail em { margin-top: 4px; color: var(--coral-deep); font-size: 9.5px; font-style: normal; }
.meeting-ideas-disclosure { display: block; padding: 0; overflow: hidden; }
.meeting-ideas-disclosure > summary,.meeting-doc-disclosure > summary { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; }
.meeting-ideas-disclosure > summary > span,.meeting-doc-disclosure > summary > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--cream-deep); color: var(--sage-deep); }
.meeting-ideas-disclosure > summary svg { width: 19px; height: 19px; }
.meeting-ideas-disclosure > summary b,.meeting-ideas-disclosure > summary small,.meeting-doc-disclosure > summary b,.meeting-doc-disclosure > summary small { display: block; }
.meeting-ideas-disclosure > summary b,.meeting-doc-disclosure > summary b { color: var(--ink); font-size: 11.5px; }
.meeting-ideas-disclosure > summary small,.meeting-doc-disclosure > summary small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.meeting-ideas-body { display: flex; flex-direction: column; gap: 10px; padding: 0 13px 13px; border-top: 1px solid var(--line); }
.meeting-ideas-body .meeting-ideas-head { margin-top: 12px; }
.meeting-doc-disclosure { margin-top: 18px; }
.meeting-detail-gas .meeting-doc-disclosure { padding: 0; }
.meeting-doc-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.meeting-doc-disclosure > form { padding: 16px 18px 18px; }
.meeting-links-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.meeting-links-head h3 { margin: 0; }
.meeting-links-head .mini-action { padding: 6px 8px; font-size: 10px; }
.meeting-push-prompt {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0,1fr) auto;
align-items: center;
gap: 12px;
margin: 0 0 16px;
padding: 13px 46px 13px 14px;
border: 1px solid rgba(47,85,69,.18);
border-radius: 17px;
background: linear-gradient(135deg,rgba(237,244,239,.94),rgba(255,250,240,.96));
box-shadow: 0 8px 22px rgba(27,48,39,.07);
}
.meeting-push-prompt-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(47,85,69,.1); color: var(--sage-deep); }
.meeting-push-prompt-icon svg { width: 21px; height: 21px; }
.meeting-push-prompt-copy { min-width: 0; }
.meeting-push-prompt-copy b,.meeting-push-prompt-copy small { display: block; }
.meeting-push-prompt-copy b { color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.meeting-push-prompt-copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-push-prompt .btn { width: auto; min-width: 154px; min-height: 40px; margin: 0; padding: 8px 13px; }
.meeting-push-prompt-close { position: absolute; top: 7px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.meeting-push-prompt-close:hover,.meeting-push-prompt-close:focus-visible { background: rgba(47,85,69,.08); color: var(--ink); outline: none; }
.dash-password-nudge {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
margin: 0 0 16px;
padding: 14px;
border: 1px solid rgba(47, 85, 69, .17);
border-radius: 17px;
background: linear-gradient(135deg, rgba(237, 244, 239, .94), rgba(255, 250, 240, .96));
box-shadow: 0 8px 22px rgba(27, 48, 39, .07);
}
.dash-password-nudge-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(47, 85, 69, .1);
color: var(--sage-deep);
}
.dash-password-nudge-icon svg {
width: 22px;
height: 22px;
}
.dash-password-nudge-copy {
min-width: 0;
}
.dash-password-nudge-copy b,
.dash-password-nudge-copy small {
display: block;
}
.dash-password-nudge-copy b {
color: var(--ink);
font-family: var(--font-display);
font-size: 15px;
}
.dash-password-nudge-copy small {
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
}
.dash-password-nudge .btn {
width: auto;
min-width: 138px;
min-height: 40px;
margin: 0;
padding: 8px 13px;
}
.meeting-reminder {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 110;
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto;
align-items: center;
gap: 12px;
width: min(620px,calc(100vw - 36px));
padding: 13px 46px 13px 14px;
border: 1px solid rgba(47,85,69,.2);
border-radius: 18px;
box-sizing: border-box;
background: rgba(255,253,249,.94);
box-shadow: 0 22px 54px rgba(27,48,39,.22),0 3px 10px rgba(27,48,39,.08);
backdrop-filter: blur(20px) saturate(120%);
-webkit-backdrop-filter: blur(20px) saturate(120%);
opacity: 0;
transform: translate(-50%,14px) scale(.985);
transition: opacity .18s ease,transform .2s ease;
}
.meeting-reminder.is-visible { opacity: 1; transform: translate(-50%,0) scale(1); }
.meeting-reminder-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(47,85,69,.1); color: var(--sage-deep); }
.meeting-reminder-icon svg { width: 22px; height: 22px; }
.meeting-reminder-copy { min-width: 0; }
.meeting-reminder-copy > * { display: block; }
.meeting-reminder-kicker { margin-bottom: 2px; color: var(--coral-deep); font-size: 9.5px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.meeting-reminder-copy strong { overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.meeting-reminder-copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-reminder-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.meeting-reminder-actions .meeting-reminder-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 132px; min-width: 132px; height: 40px; min-height: 40px; margin: 0; padding: 8px 10px; box-sizing: border-box; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; }
.meeting-reminder-actions .meeting-reminder-action:hover,.meeting-reminder-actions .meeting-reminder-action:focus-visible { text-decoration: none; }
.meeting-reminder-action svg { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; }
.meeting-reminder-action span { line-height: 1; }
.meeting-reminder-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.meeting-reminder-close:hover,.meeting-reminder-close:focus-visible { background: rgba(47,85,69,.08); color: var(--ink); outline: none; }
.meeting-reminder-close svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
.meeting-push-prompt { grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 12px 40px 12px 12px; }
.meeting-push-prompt-icon { width: 38px; height: 38px; border-radius: 11px; }
.meeting-push-prompt .btn { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; }
.dash-password-nudge { grid-template-columns: 40px minmax(0,1fr); gap: 10px; padding: 12px; }
.dash-password-nudge-icon { width: 40px; height: 40px; border-radius: 12px; }
.dash-password-nudge .btn { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; }
.meeting-detail-toolbar, .meeting-detail-toolbar.is-editing { align-items: center; gap: 6px; }
.meeting-detail-toolbar.is-editing { top: 5px; padding: 6px; }
.meeting-toolbar-actions { gap: 5px; }
.meeting-toolbar-status { display: none; }
.meeting-toolbar-save { min-height: 36px; padding: 7px 10px; font-size: 10.5px; }
.meeting-action-menu { grid-column: auto; grid-row: auto; }
.meeting-action-menu summary { width: 38px; min-height: 36px; padding: 7px; }
.meeting-action-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; width: calc(100vw - 28px); max-height: calc(100dvh - 140px); overflow-y: auto; }
.meeting-phase-stepper { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-bottom: 10px; overflow: visible; padding-bottom: 0; }
.meeting-phase-step { min-width: 0; padding: 7px 6px; gap: 5px; }
.meeting-phase-step > span { flex-basis: 22px; width: 22px; height: 22px; }
.meeting-phase-step small { display: none; }
.meeting-phase-step b { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-hero-panel.is-editing { padding-top: 5px; }
.meeting-phase-intro { font-size: 11px; }
.meeting-save-row { bottom: calc(68px + env(safe-area-inset-bottom,0px)); padding: 7px; }
.meeting-save-row > span { display: none; }
.meeting-save-row .btn { flex: 1 1 auto; }
body:has(.meeting-write-form[data-meeting-phase="write"]) .floating-chat-fab { display: none !important; }
.meeting-format-grid, .meeting-online-config { grid-template-columns: 1fr; }
.meeting-online-config { align-items: stretch; padding: 10px; }
.meeting-call-card { grid-template-columns: 36px minmax(0,1fr); gap: 10px; padding: 11px; }
.meeting-call-icon { width: 36px; height: 36px; border-radius: 10px; }
.meeting-call-icon svg { width: 18px; height: 18px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-call-copy p { display: none; }
.meeting-call-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
.meeting-call-actions .meeting-join-call { grid-column: 1 / -1; }
.meeting-call-actions .btn { width: 100%; justify-content: center; }
.meeting-runway { gap: 10px; padding: 12px; }
.meeting-runway-intro { display: block; }
.meeting-runway-intro .eyebrow,.meeting-runway-intro b,.meeting-runway-intro small { display: block; }
.meeting-runway-intro b { margin-top: 3px; }
.meeting-runway-intro small { margin-top: 2px; }
.meeting-runway-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.meeting-runway-step { grid-template-columns: 28px minmax(0,1fr); min-height: 58px; padding: 9px; }
.meeting-runway-arrow { display: none; }
#meeting-write-attendance,#meeting-write-agenda,#meeting-write-summary,#meeting-write-finish,#meeting-write-add-link { scroll-margin-top: 70px; }
.meeting-step-section-head { grid-template-columns: 32px minmax(0,1fr); }
.meeting-step-section-head > small { grid-column: 2; justify-self: start; margin-top: -5px; }
.meeting-numbered-title { align-items: flex-start; }
.meeting-detail-gas .meeting-control-btn,.meeting-detail-gas .btn-add-row { min-height: 40px; }
.meeting-agenda-summary { grid-template-columns: minmax(0,1fr) 24px; gap: 8px; padding: 12px; }
.meeting-agenda-summary-meta { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
.meeting-agenda-summary > i { grid-column: 2; grid-row: 1; }
.meeting-agenda-body { padding: 12px; }
.meeting-agenda-body .meeting-agenda-head { grid-template-columns: 1fr; }
.meeting-context-disclosure > summary { grid-template-columns: 32px minmax(0,1fr); }
.meeting-context-disclosure > summary > i { display: none; }
.meeting-context-disclosure .meeting-task-window-stats { margin-top: 5px; }
.meeting-context-detail { padding-left: 54px; }
.meeting-ideas-disclosure > summary,.meeting-doc-disclosure > summary { grid-template-columns: 34px minmax(0,1fr); }
.meeting-ideas-disclosure > summary > i,.meeting-doc-disclosure > summary > i { display: none; }
.meeting-doc-disclosure > form { padding: 14px; }
.meeting-reminder { bottom: calc(82px + env(safe-area-inset-bottom,0px)); grid-template-columns: 38px minmax(0,1fr); gap: 9px; width: calc(100vw - 24px); padding: 12px 40px 12px 12px; border-radius: 16px; }
.meeting-reminder-icon { width: 38px; height: 38px; border-radius: 11px; }
.meeting-reminder-icon svg { width: 19px; height: 19px; }
.meeting-reminder-copy strong { font-size: 15px; }
.meeting-reminder-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
.meeting-reminder-actions .meeting-reminder-action { justify-content: center; width: 100%; min-width: 0; }
.meeting-reminder-actions .btn:only-child { grid-column: 1 / -1; }
}
.project-next-work { display: grid; gap: 14px; }
.project-next-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.project-next-head .panel-note { margin: 4px 0 0; }
.project-next-head .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 132px; margin: 0; padding: 8px 14px; }
.project-next-head .btn svg { width: 16px; height: 16px; }
.project-next-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.project-next-actions .document-magic-open { min-width: 0; color: var(--green-deep); background: rgba(239, 242, 229, .7); border-color: rgba(132, 151, 125, .32); }
.project-next-actions .document-magic-open:hover { background: var(--sage-soft); border-color: rgba(132, 151, 125, .5); }
.project-next-summary { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 2px; }
.project-next-summary span { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 9px; border-radius: 999px; background: var(--cream-deep); color: var(--muted); font-size: 10.5px; }
.project-next-summary b { color: var(--ink); font-size: 12px; }
.project-next-section { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--ui-line-soft); border-radius: 16px; background: rgba(255,255,255,.5); }
.project-next-section.is-attention { border-color: rgba(209,142,45,.25); background: rgba(247,184,76,.055); }
.project-next-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-next-section > header span { color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 750; }
.project-next-section > header p { margin: 2px 0 0; color: var(--muted); font-size: 10.5px; }
.project-next-section > header > b { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 999px; background: var(--cream-deep); color: var(--ink); font-size: 11px; }
.project-next-list { display: grid; gap: 7px; }
.project-next-task { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) 14px; align-items: center; gap: 10px; min-width: 0; padding: 10px 10px 10px 11px; border: 1px solid var(--ui-line-soft); border-left: 3px solid var(--sage-deep); border-radius: 13px; background: rgba(255,255,255,.94); transition: border-color .14s ease,box-shadow .14s ease,transform .14s ease; }
.project-next-task:hover { border-color: rgba(47,85,69,.25); box-shadow: 0 8px 20px rgba(34,48,42,.07); transform: translateY(-1px); }
.project-next-task.state-attention { border-left-color: var(--amber-deep); }
.project-next-task.state-later { border-left-color: rgba(99,123,108,.42); background: rgba(248,248,244,.92); }
.project-next-task.state-done { border-left-color: var(--go); opacity: .72; }
.project-next-task.has-date-conflict { border-right-color: rgba(224,122,95,.34); }
.project-next-check { width: 30px; height: 30px; min-width: 30px; margin: 0; padding: 0; }
.project-next-check svg { width: 14px; height: 14px; }
.project-next-main { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.project-next-title { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); font-size: 13px; font-weight: 750; line-height: 1.3; }
.project-next-title i { flex: 0 0 auto; padding: 2px 5px; border-radius: 999px; background: rgba(224,122,95,.1); color: var(--coral-deep); font-size: 8px; font-style: normal; letter-spacing: .03em; text-transform: uppercase; }
.project-next-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 10.5px; }
.project-next-avatar { width: 20px; height: 20px; flex: 0 0 20px; font-size: 7.5px; }
.project-next-date::before { content: "·"; margin-right: 5px; }
.project-next-date.is-overdue { color: var(--coral-deep); font-weight: 750; }
.project-next-reason { color: var(--green-deep); font-size: 10.5px; line-height: 1.35; }
.state-attention .project-next-reason { color: #88611e; }
.state-later .project-next-reason,.state-done .project-next-reason { color: var(--muted); }
.project-next-warning { color: var(--coral-deep); font-size: 9.5px; font-weight: 700; }
.project-next-chevron { color: var(--coral-deep); font-size: 21px; line-height: 1; opacity: 0; transform: translateX(-3px); transition: opacity .14s ease,transform .14s ease; }
.project-next-task:hover .project-next-chevron { opacity: 1; transform: translateX(0); }
.project-next-collapsible { overflow: hidden; border: 1px solid var(--ui-line-soft); border-radius: 15px; background: rgba(255,255,255,.46); }
.project-next-collapsible > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; list-style: none; cursor: pointer; }
.project-next-collapsible > summary::-webkit-details-marker { display: none; }
.project-next-collapsible > summary span { display: grid; gap: 2px; }
.project-next-collapsible > summary b { color: var(--ink); font-family: var(--font-display); font-size: 14px; }
.project-next-collapsible > summary small { color: var(--muted); font-size: 10px; }
.project-next-collapsible > summary em { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 999px; background: var(--cream-deep); color: var(--ink); font-size: 11px; font-style: normal; font-weight: 750; }
.project-next-collapsible[open] > summary { border-bottom: 1px solid var(--ui-line-soft); }
.project-next-collapsible > .project-next-list { padding: 9px; }
.task-order-section .task-modal-section-head { align-items: flex-start; }
.task-order-section .task-modal-section-head h3 { margin: 0; }
.task-order-section .task-modal-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }
.task-order-section .task-modal-section-head .small-btn { flex: 0 0 auto; }
.task-order-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.task-order-side { min-width: 0; padding: 11px; border: 1px solid var(--ui-line-soft); border-radius: 12px; background: rgba(249,248,243,.65); }
.task-order-side > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.task-order-empty { color: var(--green-deep); font-size: 11.5px; }
.task-order-links { display: grid; gap: 5px; }
.task-order-links button { width: 100%; padding: 6px 8px; overflow: hidden; border: 0; border-left: 2px solid var(--sage-deep); border-radius: 0 8px 8px 0; background: rgba(235,240,232,.7); color: var(--ink); font: inherit; font-size: 11px; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.task-order-links button:hover { background: rgba(225,236,224,.95); }
.task-order-warning { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; background: rgba(224,122,95,.08); color: var(--coral-deep); font-size: 10.5px; line-height: 1.4; }
#modal-root .overlay.task-order-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
#modal-root .modal.task-order-modal-shell { width: min(520px,100%); max-width: 520px; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 24px 0 0 24px; animation: taskOrderIn .2s cubic-bezier(.22,1,.36,1); }
@keyframes taskOrderIn { from { opacity: .7; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.task-order-modal-shell .modal-body { flex: 1 1 auto; min-height: 0; padding-top: 12px; }
.task-order-modal-shell > .modal-foot { gap: 8px; }
.task-order-modal-shell > .modal-foot .btn { margin: 0; }
.task-order-modal-shell > .modal-foot .btn-primary { flex: 1.2; }
.task-order-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 12px; background: rgba(255,253,249,.94); }
.task-order-search svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--muted); }
.task-order-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.task-flow-picker-list { border: 1px solid var(--ui-line-soft); border-radius: 12px; }
.task-flow-picker-row { padding: 8px 10px; }
.task-flow-picker-row:first-child { border-radius: 12px 12px 0 0; }
.task-flow-picker-row:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
.task-flow-picker-row.is-selected { background: rgba(235,240,232,.72); }
.task-flow-picker-row.has-date-conflict:not(.is-disabled) small { color: var(--coral-deep); }
.task-flow-picker-row[data-task-order-row][hidden] { display: none !important; }
.task-order-preview { padding: 10px 12px; border-radius: 11px; background: var(--sage-soft); color: var(--green-deep); font-size: 11px; line-height: 1.45; }
@media (max-width: 760px) {
.project-next-head { align-items: stretch; flex-direction: column; }
.project-next-head .btn { width: 100%; }
.project-next-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.project-next-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.project-next-summary span { justify-content: center; padding: 5px 4px; text-align: center; }
.project-next-section { padding: 11px; }
.project-next-task { grid-template-columns: 34px minmax(0,1fr); min-height: 64px; padding: 10px; }
.project-next-check { width: 34px; height: 34px; min-width: 34px; }
.project-next-chevron { display: none; }
.project-next-title { align-items: flex-start; flex-direction: column; gap: 4px; }
.task-order-grid { grid-template-columns: 1fr; }
.task-order-section .task-modal-section-head { align-items: stretch; flex-direction: column; }
.task-order-section .task-modal-section-head .small-btn { width: 100%; }
#modal-root .overlay.task-order-overlay { align-items: flex-end; }
#modal-root .modal.task-order-modal-shell { width: 100%; max-width: none; height: min(88dvh,760px); max-height: calc(100dvh - env(safe-area-inset-top,0px)); border-radius: 22px 22px 0 0; animation: mobileSheetIn .2s cubic-bezier(.22,1,.36,1); }
}
.messenger-page {
grid-template-columns: minmax(310px, 370px) minmax(0, 1fr);
min-height: min(760px, calc(100vh - 150px));
background: rgba(255, 253, 248, .82);
border: 1px solid rgba(47, 85, 69, .14);
border-radius: 24px;
box-shadow: 0 18px 52px rgba(36, 67, 55, .08);
overflow: hidden;
}
.messenger-sidebar-panel { background: linear-gradient(180deg, rgba(248,244,234,.96), rgba(255,253,248,.98)); }
.messenger-page-head { padding: 24px 22px 16px; align-items: flex-start; }
.messenger-page-head h1 { font-size: clamp(29px, 3vw, 38px); line-height: 1; letter-spacing: -.03em; }
.messenger-page-head p { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; }
.messenger-head-actions { display: flex; align-items: center; gap: 8px; }
.messenger-head-actions button,
.chat-head-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px;
background: rgba(255,255,255,.72); font: 750 11.5px/1 var(--font-sans); cursor: pointer;
}
.messenger-head-actions button:hover,
.chat-head-tools button:hover { background: var(--cream); border-color: rgba(47,85,69,.28); }
.messenger-head-actions svg,
.chat-head-tools svg { width: 16px; height: 16px; }
.messenger-compose { margin: 0 16px 12px; padding: 13px; background: rgba(255,255,255,.66); border: 1px solid var(--line); border-radius: 16px; }
.messenger-list { padding: 3px 10px 16px; gap: 4px; }
.messenger-section-label {
padding: 12px 12px 5px;
color: var(--muted);
font: 800 10px/1.2 var(--font-sans);
letter-spacing: .08em;
text-transform: uppercase;
}
.messenger-row { padding: 11px 12px; border: 1px solid transparent; border-radius: 15px; }
.messenger-row:hover { background: rgba(255,255,255,.9); border-color: var(--line); transform: translateX(2px); }
.messenger-row.unread { background: rgba(226,119,91,.09); border-color: rgba(226,119,91,.12); }
.messenger-row-ava { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(47,85,69,.08); }
.messenger-empty-pane { background: radial-gradient(circle at 82% 15%, rgba(226,119,91,.07), transparent 32%), rgba(255,253,248,.7); }
.messenger-empty-icon { border-radius: 18px; background: var(--sage-soft); color: var(--green-deep); }
.chat-messenger-detail { background: linear-gradient(180deg, rgba(247,244,235,.58), rgba(255,255,255,.88)); }
.chat-messenger-detail .chat-detail-head,
.project-chat-container > div:first-child { background: rgba(255,253,248,.92) !important; backdrop-filter: blur(14px); }
.chat-detail-head { min-height: 70px; gap: 12px; }
.chat-detail-head .pd-back { min-width: auto; padding-inline: 10px; }
.chat-title { letter-spacing: -.015em; }
.chat-head-tools { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.chat-search-panel {
flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 16px;
background: rgba(239,242,234,.92); border-bottom: 1px solid var(--line);
}
.chat-search-panel[hidden], .chat-composer-tools[hidden] { display: none !important; }
.chat-search-field { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; }
.chat-search-field svg { width: 16px; height: 16px; color: var(--sage-deep); flex: 0 0 auto; }
.chat-search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 13px/1.3 var(--font-sans); }
.chat-search-panel select { height: 36px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); padding: 0 30px 0 10px; font: 650 12px var(--font-sans); }
.chat-search-panel > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.chat-messages-thread,
.fchat-thread { scrollbar-gutter: stable; }
.chat-messenger-detail .chat-messages-thread { padding: 20px clamp(14px, 3vw, 34px) 26px; }
.chat-msg-row { max-width: min(78%, 660px); margin-top: 9px; }
.chat-msg-row.grouped { margin-top: 3px; }
.chat-msg-bubble,
.fchat-bubble {
border: 1px solid rgba(47,85,69,.13); box-shadow: 0 4px 14px rgba(36,67,55,.055);
line-height: 1.45;
}
.chat-msg-row.other .chat-msg-bubble,
.fchat-msg.other .fchat-bubble { background: rgba(255,255,255,.96); color: var(--ink); }
.chat-msg-row.me .chat-msg-bubble,
.fchat-msg.me .fchat-bubble {
background: #e9785b; border-color: #e9785b; color: #fff;
box-shadow: 0 5px 16px rgba(190,91,66,.16);
}
.chat-msg-bubble.structured,
.fchat-bubble.structured { padding: 7px !important; width: min(390px, 100%); max-width: 100%; background: rgba(255,253,248,.98) !important; color: var(--ink) !important; border-color: rgba(47,85,69,.16) !important; }
.chat-msg-bubble.structured .chat-msg-time,
.fchat-bubble.structured .fchat-msg-time { color: var(--muted) !important; padding: 2px 5px 0; }
.chat-msg-acts { padding-block: 3px; gap: 3px; }
.chat-act-btn { width: 30px; height: 30px; border-radius: 9px; }
.chat-act-btn svg { width: 15px; height: 15px; }
.chat-act-convert { color: var(--coral-deep) !important; background: rgba(226,119,91,.08) !important; }
.chat-msg-menu { width: min(278px, calc(100vw - 28px)); padding: 7px; border-radius: 15px; box-shadow: 0 16px 38px rgba(36,67,55,.17); }
.chat-menu-label { display: block; padding: 8px 9px 4px; color: var(--muted); font-size: 9.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.chat-menu-item { min-height: 36px; padding: 8px 9px; gap: 9px; font-size: 12.5px; }
.chat-menu-item-icon { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
.chat-menu-item-icon svg { width: 16px; height: 16px; }
.chat-load-older { align-self: center; display: block; margin: 2px auto 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--green-deep); padding: 7px 13px; font: 750 11px var(--font-sans); cursor: pointer; }
.chat-load-older:hover { background: var(--cream); }
.chat-load-older.compact { margin: 0 auto 10px; }
.chat-footer-input { position: relative; background: rgba(255,253,248,.94) !important; backdrop-filter: blur(14px); }
.chat-comment-form,
.fcw-foot { gap: 7px; border: 1px solid rgba(47,85,69,.14); border-radius: 18px; background: #fff; padding: 6px 7px; box-shadow: 0 8px 24px rgba(36,67,55,.07); }
.chat-comment-form textarea,
.fcw-input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-inline: 7px !important; min-width: 0; }
.chat-compose-tool-btn,
.chat-compose-emoji-btn,
.fcw-emoji-btn { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; }
.chat-compose-tool-btn { border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--cream); color: var(--green-deep); cursor: pointer; }
.chat-compose-tool-btn svg { width: 18px; height: 18px; }
.chat-submit-btn,
.fcw-send { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 13px !important; }
.chat-composer-tools { display: flex; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(247,244,235,.97); box-shadow: 0 10px 28px rgba(36,67,55,.1); }
.chat-composer-tools button { display: inline-flex; gap: 7px; min-height: 34px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.8); font: 750 11.5px var(--font-sans); cursor: pointer; }
.chat-composer-tools button:hover { border-color: var(--line); background: #fff; }
.chat-composer-tools svg { width: 16px; height: 16px; }
.chat-card-kicker { display: flex; align-items: center; gap: 6px; color: var(--coral-deep); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chat-card-kicker svg { width: 16px; height: 16px; }
.chat-poll-card { display: flex; flex-direction: column; gap: 9px; padding: 8px; text-align: left; }
.chat-poll-question { font: 750 15px/1.3 var(--display); color: var(--ink); }
.chat-poll-options { display: flex; flex-direction: column; gap: 6px; }
.chat-poll-option { position: relative; isolation: isolate; overflow: hidden; min-height: 38px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.chat-poll-option:hover { border-color: var(--sage-deep); }
.chat-poll-option.selected { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.chat-poll-fill { position: absolute; z-index: -1; inset: 0 auto 0 0; background: rgba(142,164,134,.17); transition: width .25s ease; }
.chat-poll-option.selected .chat-poll-fill { background: rgba(226,119,91,.13); }
.chat-poll-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; }
.chat-poll-count { color: var(--muted); font-size: 11px; font-weight: 800; }
.chat-poll-card > small { color: var(--muted); font-size: 10.5px; }
.chat-object-card { width: 100%; min-width: min(300px, 70vw); display: flex; align-items: center; gap: 11px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); padding: 9px; text-align: left; cursor: pointer; }
.chat-object-card:hover { background: var(--cream); }
.chat-object-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--sage-soft); color: var(--green-deep); }
.chat-object-icon svg { width: 20px; height: 20px; }
.chat-object-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.chat-object-copy small { color: var(--coral-deep); font-size: 9.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chat-object-copy b { color: var(--ink); font-size: 13.5px; white-space: normal; }
.chat-object-copy em { color: var(--muted); font-size: 10.5px; font-style: normal; }
.chat-object-open { flex: 0 0 auto; color: var(--green-deep); font-size: 11px; font-weight: 750; }
.fcw-searchbar { display: flex; align-items: center; gap: 6px; padding: 7px 8px; background: var(--cream); border-bottom: 1px solid var(--line); }
.fcw-searchbar > div { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; }
.fcw-searchbar svg { width: 14px; height: 14px; color: var(--muted); }
.fcw-searchbar input { min-width: 0; width: 100%; border: 0; outline: 0; font-size: 12px; }
.fcw-searchbar select { min-width: 74px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 11px; }
.fcw-head-btn svg { width: 16px; height: 16px; }
.fchat-head > .fchat-head-btn svg { width: 17px; height: 17px; }
.fchat-bubble-wrap { max-width: min(100%, 360px); }
.fchat-bubble.structured { width: min(330px, calc(100vw - 76px)); }
.fchat-actions { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(36,67,55,.1); }
.chat-mini-form { display: flex; flex-direction: column; gap: 14px; }
.chat-modal-intro { margin: 0; color: var(--muted); line-height: 1.5; }
.chat-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.chat-preset-grid button { display: flex; flex-direction: column; gap: 3px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--cream); color: var(--ink); text-align: left; cursor: pointer; }
.chat-preset-grid button:hover { border-color: var(--coral); }
.chat-preset-grid span { color: var(--muted); font-size: 11px; }
.chat-poll-editor { display: grid; gap: 9px; }
.chat-add-option { align-self: flex-start; border: 0; background: transparent; color: var(--coral-deep); font-weight: 800; cursor: pointer; }
.chat-object-picker { display: flex; flex-direction: column; gap: 12px; }
[data-object-picker-results] { display: grid; gap: 5px; max-height: min(520px, 60vh); overflow-y: auto; }
.chat-object-pick { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.chat-object-pick:hover { background: var(--cream); border-color: var(--line); }
.chat-object-pick > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chat-object-pick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-object-pick small { color: var(--muted); }
.chat-object-pick em { color: var(--coral-deep); font-size: 11px; font-style: normal; font-weight: 800; }
.chat-saves-list, .chat-scheduled-list { display: grid; gap: 9px; }
.chat-save-card, .chat-scheduled-card { border: 1px solid var(--line); border-radius: 15px; background: #fff; overflow: hidden; }
.chat-save-head { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.chat-save-main { width: 100%; display: flex; flex-direction: column; gap: 3px; border: 0; background: transparent; color: var(--ink); padding: 9px 12px 11px; text-align: left; cursor: pointer; }
.chat-save-main:hover { background: var(--cream); }
.chat-save-main p { margin: 2px 0; color: var(--ink); line-height: 1.45; }
.chat-save-main small { color: var(--muted); }
.chat-save-actions { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--cream); }
.chat-save-actions button, .chat-scheduled-card button { border: 0; background: transparent; color: var(--green-deep); font-weight: 750; cursor: pointer; }
.chat-save-actions .danger { color: var(--coral-deep); }
.chat-save-reminder { min-width: 0; flex: 1; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.chat-save-reminder svg { width: 13px; height: 13px; }
.chat-scheduled-card { display: flex; align-items: center; gap: 10px; padding: 12px; }
.chat-scheduled-card > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.chat-scheduled-card b { overflow-wrap: anywhere; }
.chat-scheduled-card span { color: var(--muted); font-size: 11px; }
.chat-scheduled-card.failed { border-color: rgba(209, 105, 84, .35); background: rgba(232, 121, 97, .07); }
.chat-scheduled-card.failed span, .chat-scheduled-card.failed button { color: var(--coral-deep); }
@media (max-width: 860px) {
.messenger-page { display: block; min-height: calc(100dvh - 116px); border-radius: 20px; }
.messenger-page:has(> #messenger-detail-pane.active-chat) { height: calc(100dvh - 104px) !important; min-height: 500px; }
.messenger-page:has(> #messenger-detail-pane.active-chat) > .messenger-sidebar-panel { display: none; }
.messenger-page > #messenger-detail-pane.active-chat { height: 100% !important; }
.messenger-empty-pane.active-chat .pd-back { display: inline-flex !important; }
.messenger-page-head { padding: 20px 16px 13px; }
.messenger-page-head p { max-width: 210px; }
.messenger-compose { margin-inline: 10px; }
.messenger-list { padding-inline: 7px; }
.messenger-row { padding: 10px; }
.chat-messenger-detail { height: calc(100dvh - 104px); min-height: 500px; }
.chat-messenger-detail .chat-detail-head { min-height: 61px; padding: 8px 10px; }
.chat-head-tools button { width: 36px; padding: 0; }
.chat-head-tools button span { display: none; }
.chat-search-panel { flex-wrap: wrap; padding: 8px 10px; }
.chat-search-field { flex: 1 1 calc(100% - 110px); }
.chat-search-panel select { flex: 1 1 100%; min-width: 0; }
.chat-search-panel > span { width: 100%; }
.chat-messenger-detail .chat-messages-thread { padding: 13px 9px 20px; }
.chat-msg-row { max-width: 91%; }
.chat-msg-acts { position: static !important; display: flex !important; opacity: .78; padding: 0 0 4px !important; transform: none !important; }
.chat-msg-row.me .chat-msg-acts { justify-content: flex-end; }
.chat-msg-bubble.structured { width: min(340px, calc(100vw - 66px)); }
.chat-object-card { min-width: 0; }
.chat-object-open { display: none; }
.chat-footer-input { padding: 8px !important; }
.chat-comment-form, .fcw-foot { gap: 3px; padding: 5px; }
.chat-compose-tool-btn, .chat-compose-emoji-btn, .fcw-emoji-btn { flex-basis: 34px; width: 34px; height: 34px; }
.chat-comment-form .chat-compose-emoji-btn:not(.voice-mic-btn), .fcw-foot [data-fcw-emoji-toggle] { display: none; }
.chat-submit-btn, .fcw-send { flex-basis: 38px !important; width: 38px !important; height: 38px !important; }
.chat-composer-tools { margin: 0 0 6px; overflow-x: auto; flex-wrap: nowrap; padding: 6px; }
.chat-composer-tools button { flex: 0 0 auto; }
.fchat-bubble-wrap { max-width: min(100%, calc(100vw - 55px)); }
.fchat-actions { box-shadow: none; }
.fchat-bubble.structured { width: min(330px, calc(100vw - 62px)); }
.fcw-searchbar { flex-wrap: wrap; }
.fcw-searchbar select { flex: 0 0 90px; }
.chat-preset-grid { grid-template-columns: 1fr; }
}
.chat-msg-acts,
.fchat-actions {
gap: 2px !important;
padding: 3px !important;
border: 1px solid rgba(47,85,69,.12) !important;
border-radius: 10px !important;
background: rgba(255,253,248,.96) !important;
box-shadow: 0 5px 16px rgba(36,67,55,.09) !important;
transform: translateY(2px) scale(.97) !important;
}
.chat-msg-row:hover .chat-msg-acts,
.chat-msg-row:focus-within .chat-msg-acts,
.chat-msg-row.acts-open .chat-msg-acts,
.chat-msg-bubble-container:hover .chat-msg-acts,
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-bubble-wrap.actions-open .fchat-actions {
transform: none !important;
}
.chat-act-btn,
.fchat-actions button {
width: 24px !important;
height: 24px !important;
}
.chat-act-convert,
.fchat-act-convert { color: var(--coral-deep) !important; }
.chat-act-more,
.fchat-act-more { color: var(--green-deep) !important; }
.chat-convert-menu {
width: min(245px, calc(100vw - 28px));
border-top: 3px solid var(--coral);
}
.chat-save-reminder.quiet { color: var(--muted); }
.chat-save-reminder.active { color: var(--green-deep); font-weight: 750; }
.chat-save-reminder.done { color: var(--sage-deep); }
.chat-save-actions { flex-wrap: wrap; }
.chat-legacy-structured-error { display: flex; flex-direction: column; gap: 3px; max-width: 290px; color: var(--coral-deep); }
.chat-legacy-structured-error b { font-size: 12.5px; }
.chat-legacy-structured-error small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
@media (max-width: 860px) {
.chat-msg-acts,
.fchat-actions {
opacity: .86 !important;
pointer-events: auto !important;
transform: none !important;
}
.chat-msg-acts .chat-act-btn:not(.chat-act-more),
.fchat-actions button:not(.fchat-act-more) {
display: none !important;
}
.chat-msg-acts .chat-act-btn,
.fchat-actions button {
width: 30px !important;
height: 30px !important;
}
.chat-save-actions { align-items: flex-start; }
.chat-save-reminder { flex-basis: 100%; }
}
.fchat-bubble-line,
.fchat-bubble-wrap,
.fchat-bubble,
.fchat-text,
.chat-object-card,
.chat-object-copy { min-width: 0; }
.fchat-bubble.structured {
width: min(330px, calc(100% - 2px)) !important;
max-width: 100% !important;
box-sizing: border-box;
overflow: hidden;
}
.fchat-bubble.structured .chat-object-card {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 8px;
}
.fchat-bubble.structured .chat-object-copy b {
overflow-wrap: anywhere;
word-break: normal;
}
.fchat-bubble.structured .chat-object-open { display: none; }
.chat-messenger-detail .chat-msg-row.structured-row {
width: min(520px, 76%);
max-width: 76%;
}
.chat-messenger-detail .chat-msg-row.poll-row { width: min(470px, 76%); }
.chat-messenger-detail .chat-msg-row.object-row { width: min(600px, 76%); }
.chat-messenger-detail .chat-msg-row.structured-row .chat-msg-body-wrap,
.chat-messenger-detail .chat-msg-row.structured-row .chat-msg-bubble-container,
.chat-messenger-detail .chat-msg-row.structured-row .chat-msg-bubble {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.project-chat-container .chat-msg-row.structured-row {
width: min(520px, 86%);
max-width: 86%;
}
.project-chat-container .chat-msg-row.structured-row .chat-msg-bubble {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.chat-card-kicker { flex-wrap: wrap; }
.chat-card-kicker em {
padding: 3px 6px;
border-radius: 999px;
background: var(--cream);
color: var(--muted);
font-size: 8.5px;
font-style: normal;
font-weight: 800;
letter-spacing: .04em;
text-transform: none;
}
.chat-poll-option-wrap { display: grid; gap: 5px; }
.chat-poll-voters {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
padding: 0 6px 2px;
}
.chat-poll-voter-stack {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.chat-poll-voter-stack > span { display: inline-flex; margin-left: -5px; }
.chat-poll-voter-stack > span:first-child { margin-left: 0; }
.chat-poll-voter-ava {
width: 21px !important;
height: 21px !important;
min-width: 21px !important;
flex: 0 0 21px !important;
border: 2px solid var(--paper);
font-size: 7px !important;
box-shadow: none !important;
}
.chat-poll-voter-stack i {
min-width: 21px;
height: 21px;
margin-left: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--paper);
border-radius: 50%;
background: var(--sage-soft);
color: var(--green-deep);
font-size: 7.5px;
font-style: normal;
font-weight: 850;
}
.chat-poll-voter-names {
min-width: 0;
overflow: hidden;
color: var(--muted);
font-size: 9.5px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-poll-settings { display: grid; gap: 8px; padding-top: 4px; }
.chat-poll-setting {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--cream);
cursor: pointer;
}
.chat-poll-setting input {
width: 18px !important;
height: 18px;
margin: 1px 0 0;
flex: 0 0 18px;
accent-color: var(--coral);
}
.chat-poll-setting span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-poll-setting b { color: var(--ink); font-size: 12.5px; }
.chat-poll-setting small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
@media (max-width: 860px) {
.chat-messenger-detail .chat-msg-row.structured-row,
.chat-messenger-detail .chat-msg-row.poll-row,
.chat-messenger-detail .chat-msg-row.object-row,
.project-chat-container .chat-msg-row.structured-row {
width: calc(100% - 22px);
max-width: calc(100% - 22px);
}
.fchat-bubble.structured { width: min(330px, calc(100vw - 70px)) !important; }
.chat-poll-voter-names { white-space: normal; }
}
.messenger-page,
.project-chat-container,
.floating-chat-dock,
.floating-chat-panel,
.fcw {
--chat-control-bg: rgba(255,255,255,.72);
--chat-control-hover: rgba(239,242,234,.9);
--chat-control-border: rgba(47,85,69,.16);
--chat-control-radius: 11px;
}
.messenger-head-actions button,
.chat-head-tools button {
min-height: 36px;
padding: 0 11px;
border: 1px solid var(--chat-control-border);
border-radius: var(--chat-control-radius);
background: var(--chat-control-bg);
box-shadow: none;
color: var(--green-deep);
font-size: 11.5px;
font-weight: 750;
}
.messenger-head-actions button:hover,
.chat-head-tools button:hover,
.messenger-head-actions button:focus-visible,
.chat-head-tools button:focus-visible {
border-color: rgba(47,85,69,.28);
background: var(--chat-control-hover);
color: var(--ink);
}
.messenger-compose {
padding: 12px;
border-radius: 15px;
background: rgba(255,255,255,.62);
}
.messenger-compose-row { align-items: stretch; }
.messenger-compose select {
height: 40px;
border-radius: 10px;
}
.messenger-compose-btn {
width: auto;
min-width: 88px;
height: 40px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--coral);
border-radius: 11px;
background: var(--coral);
color: #fff;
font-size: 11.5px;
font-weight: 850;
}
.messenger-compose-btn svg { width: 16px; height: 16px; }
.messenger-compose-btn:hover,
.messenger-compose-btn:focus-visible {
border-color: var(--coral-deep);
background: var(--coral-deep);
}
.fchat-head-btn,
.fcw-head-btn {
width: 32px;
height: 32px;
padding: 0;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 9px;
background: rgba(255,255,255,.12);
color: #fff;
box-shadow: none;
}
.fchat-head-btn svg,
.fcw-head-btn svg {
width: 16px;
height: 16px;
}
.fchat-head-btn:hover,
.fcw-head-btn:hover,
.fchat-head-btn:focus-visible,
.fcw-head-btn:focus-visible {
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.24);
}
.fchat-hub-link {
min-height: 32px;
padding: 0 9px;
border-radius: 9px;
}
.fchat-tabs {
gap: 2px;
margin: 8px 10px 4px;
padding: 3px;
border: 1px solid var(--chat-control-border);
border-radius: 11px;
background: rgba(239,242,234,.72);
overflow: visible;
}
.fchat-tabs button {
flex: 1;
min-width: 0;
padding: 6px 7px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
}
.fchat-tabs button:hover,
.fchat-tabs button:focus-visible {
background: rgba(255,255,255,.66);
color: var(--ink);
}
#modal-root .modal[data-modal-surface="picker"] .chat-object-picker,
#modal-root .modal[data-modal-surface="picker"] .chat-forward-picker { gap: 14px; }
#modal-root .modal[data-modal-surface="picker"] .chat-search-field {
position: sticky;
top: -24px;
z-index: 4;
display: flex;
align-items: center;
gap: 9px;
padding: 10px;
border: 1px solid rgba(56,85,74,.13);
border-radius: 16px;
background: rgba(255,253,249,.96);
box-shadow: 0 8px 24px rgba(43,66,58,.07);
backdrop-filter: blur(9px);
}
#modal-root .modal[data-modal-surface="picker"] .chat-search-field svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--green-soft); }
#modal-root .modal[data-modal-surface="picker"] .chat-search-field input { min-height: 44px; padding: 9px 11px; border: 0; background: transparent; box-shadow: none; }
#modal-root .modal[data-modal-surface="picker"] [data-object-picker-results],
#modal-root .modal[data-modal-surface="picker"] [data-forward-results] { gap: 8px; max-height: min(520px,57dvh); padding: 1px 3px 2px; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick {
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto;
gap: 12px;
min-height: 66px;
padding: 10px 12px;
border: 1px solid rgba(56,85,74,.11);
border-radius: 16px;
background: rgba(255,255,255,.82);
box-shadow: 0 2px 8px rgba(43,66,58,.035);
transition: transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick:hover,
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick:focus-visible { border-color: rgba(70,104,91,.28); background: #fff; box-shadow: 0 8px 22px rgba(43,66,58,.08); transform: translateY(-1px); outline: none; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(169,184,164,.32); }
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick b { font-size: 14px; line-height: 1.3; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick small { margin-top: 2px; font-size: 11px; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick em { padding: 6px 9px; border-radius: 999px; background: rgba(224,122,95,.1); }
#modal-root .modal[data-modal-surface="picker"] .chat-forward-picker .chat-object-pick { grid-template-columns: minmax(0,1fr) auto; }
#modal-root .modal[data-modal-surface="picker"] .chat-forward-picker .chat-object-pick > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#modal-root .modal[data-modal-surface="picker"] .chat-forward-preview { margin: 0; padding: 13px 15px; border-left: 4px solid var(--sage-deep); border-radius: 4px 14px 14px 4px; background: rgba(169,184,164,.15); color: var(--green-deep); line-height: 1.5; }
#modal-root .modal[data-modal-surface="form"] .chat-modal-intro { padding: 13px 15px; border: 1px solid rgba(70,104,91,.13); border-radius: 14px; background: rgba(169,184,164,.13); color: var(--green-deep); }
#modal-root .modal[data-modal-surface="form"] .chat-preset-grid button { min-height: 74px; padding: 14px 15px; border-color: rgba(56,85,74,.13); border-radius: 15px; background: rgba(246,241,231,.66); }
#modal-root .modal[data-modal-surface="form"] .chat-preset-grid button:hover,
#modal-root .modal[data-modal-surface="form"] .chat-preset-grid button:focus-visible { border-color: rgba(224,122,95,.38); background: rgba(224,122,95,.08); outline: none; }
#modal-root .modal[data-modal-surface="form"] .chat-poll-editor { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#modal-root .modal[data-modal-surface="form"] .chat-add-option { justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 11px; border: 1px dashed rgba(201,104,79,.32); border-radius: 12px; background: rgba(224,122,95,.06); }
#modal-root .modal[data-modal-surface="form"] .chat-poll-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
#modal-root .modal[data-modal-surface="form"] .chat-poll-setting { min-height: 76px; margin: 0; padding: 12px; border: 1px solid rgba(56,85,74,.11); border-radius: 15px; background: rgba(246,241,231,.62); }
#modal-root .modal[data-modal-surface="form"] .chat-group-people { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#modal-root .modal[data-modal-surface="detail"] .chat-saves-list,
#modal-root .modal[data-modal-surface="detail"] .chat-scheduled-list { gap: 11px; }
#modal-root .modal[data-modal-surface="detail"] .chat-save-card,
#modal-root .modal[data-modal-surface="detail"] .chat-scheduled-card { border-color: rgba(56,85,74,.12); border-radius: 17px; box-shadow: 0 4px 14px rgba(43,66,58,.045); }
@media (max-width: 760px) {
#modal-root .modal[data-modal-surface="picker"] .chat-search-field { top: -18px; margin: -2px -1px 0; }
#modal-root .modal[data-modal-surface="picker"] [data-object-picker-results],
#modal-root .modal[data-modal-surface="picker"] [data-forward-results] { max-height: none; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick { grid-template-columns: 42px minmax(0,1fr) auto; min-height: 64px; padding: 9px 10px; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-icon { width: 42px; height: 42px; }
#modal-root .modal[data-modal-surface="picker"] .chat-object-pick em { grid-column: auto; justify-self: end; margin-top: 0; padding: 4px 7px; }
#modal-root .modal[data-modal-surface="form"] .chat-poll-editor,
#modal-root .modal[data-modal-surface="form"] .chat-poll-settings,
#modal-root .modal[data-modal-surface="form"] .chat-group-people { grid-template-columns: 1fr; }
}
.fchat-tabs button.on {
border: 0;
background: #fff;
color: var(--green-deep);
box-shadow: 0 2px 7px rgba(36,67,55,.08);
}
.fchat-section-head button.fchat-compose-toggle {
min-height: 30px;
padding: 0 9px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--chat-control-border);
border-radius: 9px;
background: #fff;
color: var(--green-deep);
}
.fchat-section-head button.fchat-compose-toggle svg {
width: 13px;
height: 13px;
}
.fchat-section-head button.fchat-compose-toggle:hover,
.fchat-section-head button.fchat-compose-toggle:focus-visible,
.fchat-section-head button.fchat-compose-toggle.is-open {
border-color: rgba(47,85,69,.28);
background: var(--chat-control-hover);
}
.chat-compose-tool-btn,
.chat-compose-emoji-btn,
.fcw-emoji-btn {
border: 1px solid transparent !important;
border-radius: var(--chat-control-radius) !important;
background: transparent !important;
color: var(--muted) !important;
box-shadow: none !important;
}
.chat-compose-tool-btn:hover,
.chat-compose-emoji-btn:hover,
.fcw-emoji-btn:hover,
.chat-compose-tool-btn:focus-visible,
.chat-compose-emoji-btn:focus-visible,
.fcw-emoji-btn:focus-visible,
.chat-compose-tool-btn.is-open,
.fcw-emoji-btn.is-open {
border-color: var(--chat-control-border) !important;
background: var(--chat-control-hover) !important;
color: var(--green-deep) !important;
}
.chat-compose-tool-btn svg,
.fcw-emoji-btn[data-chat-tools-toggle] svg {
transition: transform .16s ease;
}
.chat-compose-tool-btn.is-open svg,
.fcw-emoji-btn[data-chat-tools-toggle].is-open svg {
transform: rotate(45deg);
}
.chat-submit-btn,
.fcw-send {
border: 1px solid var(--coral) !important;
background: var(--coral) !important;
color: #fff !important;
box-shadow: 0 5px 14px rgba(224,122,95,.2) !important;
}
.chat-submit-btn:hover,
.fcw-send:hover,
.chat-submit-btn:focus-visible,
.fcw-send:focus-visible {
border-color: var(--coral-deep) !important;
background: var(--coral-deep) !important;
box-shadow: 0 7px 17px rgba(224,122,95,.26) !important;
}
.chat-composer-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 6px;
margin: 0 0 8px;
padding: 9px;
border: 1px solid var(--chat-control-border);
border-radius: 16px;
background: rgba(255,253,248,.98);
box-shadow: 0 12px 30px rgba(36,67,55,.11);
}
.chat-composer-tools-head {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 1px 3px 5px;
}
.chat-composer-tools-head b {
color: var(--ink);
font-size: 11.5px;
}
.chat-composer-tools-head > span {
color: var(--muted);
font-size: 9.5px;
text-align: right;
}
.chat-composer-tools button {
min-height: 52px;
padding: 8px 9px;
display: grid;
grid-template-columns: 30px minmax(0,1fr);
align-items: center;
gap: 9px;
border: 1px solid transparent;
border-radius: 12px;
background: rgba(239,242,234,.58);
color: var(--green-deep);
text-align: left;
}
.chat-composer-tools button:hover,
.chat-composer-tools button:focus-visible {
border-color: var(--chat-control-border);
background: #fff;
box-shadow: 0 4px 12px rgba(36,67,55,.06);
}
.chat-composer-tools button > svg {
width: 30px;
height: 30px;
padding: 7px;
box-sizing: border-box;
border-radius: 9px;
background: var(--sage-soft);
color: var(--green-deep);
}
.chat-composer-tools button > span {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.chat-composer-tools button b {
overflow: hidden;
color: var(--ink);
font-size: 11.5px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-composer-tools button small {
color: var(--muted);
font-size: 9.5px;
font-weight: 550;
line-height: 1.25;
}
.chat-composer-tools button.chat-tool-manage {
background: rgba(247,244,235,.72);
}
.chat-composer-tools button.chat-tool-manage > svg {
background: var(--cream-deep);
color: var(--muted);
}
.chat-msg-acts,
.fchat-actions {
gap: 1px !important;
padding: 2px !important;
border-color: rgba(47,85,69,.14) !important;
border-radius: 9px !important;
background: rgba(255,255,255,.97) !important;
box-shadow: 0 5px 14px rgba(36,67,55,.09) !important;
}
.chat-act-btn,
.fchat-actions button {
border-radius: 7px !important;
color: var(--muted) !important;
}
.chat-act-btn:hover,
.chat-act-btn:focus-visible,
.fchat-actions button:hover,
.fchat-actions button:focus-visible {
background: var(--chat-control-hover) !important;
color: var(--green-deep) !important;
}
.chat-act-convert,
.fchat-act-convert,
.chat-act-more,
.fchat-act-more {
background: transparent !important;
color: var(--muted) !important;
}
.chat-msg-menu {
padding: 6px;
border-radius: 14px;
}
.chat-menu-label {
padding: 8px 8px 4px;
font-size: 9px;
}
.chat-menu-item {
min-height: 38px;
border-radius: 9px;
}
.chat-menu-item:hover,
.chat-menu-item:focus-visible {
background: var(--chat-control-hover);
}
.chat-menu-item.danger {
color: var(--coral-deep);
}
.chat-menu-item.danger:hover,
.chat-menu-item.danger:focus-visible {
background: rgba(226,119,91,.1);
}
.chat-convert-menu {
border-top: 1px solid var(--chat-control-border);
}
.chat-add-option {
width: 100%;
min-height: 38px;
padding: 8px 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px dashed rgba(47,85,69,.24);
border-radius: 11px;
background: rgba(239,242,234,.42);
color: var(--green-deep);
text-align: center;
}
.chat-add-option svg {
width: 15px;
height: 15px;
}
.chat-add-option:hover,
.chat-add-option:focus-visible {
border-color: var(--sage-deep);
background: var(--sage-soft);
}
.chat-save-actions button,
.chat-scheduled-card button {
min-height: 30px;
padding: 5px 9px;
border: 1px solid var(--chat-control-border);
border-radius: 9px;
background: rgba(255,255,255,.72);
color: var(--green-deep);
font-size: 10.5px;
}
.chat-save-actions button:hover,
.chat-save-actions button:focus-visible,
.chat-scheduled-card button:hover,
.chat-scheduled-card button:focus-visible {
background: #fff;
border-color: rgba(47,85,69,.3);
}
.chat-save-actions button.danger,
.chat-scheduled-card.failed button {
border-color: rgba(226,119,91,.22);
background: rgba(226,119,91,.06);
color: var(--coral-deep);
}
.chat-reply-cancel-btn svg,
.fchat-replybar button svg,
.fchat-pinned-unpin svg {
width: 14px;
height: 14px;
}
@media (max-width: 860px) {
.messenger-compose-btn {
min-width: 42px;
width: 42px;
padding: 0;
}
.messenger-compose-btn span { display: none; }
.chat-composer-tools {
grid-template-columns: 1fr;
max-height: min(330px, 46dvh);
overflow-y: auto;
overflow-x: hidden;
}
.chat-composer-tools-head {
position: sticky;
top: -9px;
z-index: 1;
padding: 8px 3px 6px;
background: rgba(255,253,248,.98);
}
.chat-composer-tools-head > span { display: none; }
.chat-composer-tools button { flex: none; width: 100%; }
}
[data-fcw] .chat-composer-tools {
grid-template-columns: 1fr;
max-height: 250px;
}
@media (min-width: 861px) {
.chat-msg-acts {
top: -14px !important;
right: 8px !important;
left: auto !important;
display: inline-flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(3px) !important;
transition: opacity .12s ease, transform .12s ease !important;
}
.chat-msg-row:hover .chat-msg-acts,
.chat-msg-row:focus-within .chat-msg-acts,
.chat-msg-row.acts-open .chat-msg-acts,
.chat-msg-acts:hover {
opacity: 1;
pointer-events: auto;
transform: none !important;
}
.fchat-bubble-line { position: relative; }
.fchat-actions,
.floating-chat-dock .fchat-actions {
position: absolute !important;
top: -15px !important;
right: 7px !important;
left: auto !important;
margin: 0 !important;
display: inline-flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(3px) !important;
transition: opacity .12s ease, transform .12s ease !important;
}
.fchat-msg.other .fchat-actions,
.floating-chat-dock .fchat-msg.other .fchat-actions {
right: auto !important;
left: 7px !important;
margin: 0 !important;
}
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-bubble-wrap.actions-open .fchat-actions,
.fchat-actions:hover {
opacity: 1;
pointer-events: auto;
transform: none !important;
}
}
.chat-act-btn,
.fchat-actions button,
.floating-chat-dock .fchat-actions button {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
}
.chat-act-btn svg,
.fchat-actions button svg,
.floating-chat-dock .fchat-actions button svg {
width: 16px !important;
height: 16px !important;
}
.chat-act-react,
.fchat-act-react {
color: var(--green-deep) !important;
}
.chat-act-react:hover,
.chat-act-react:focus-visible,
.fchat-act-react:hover,
.fchat-act-react:focus-visible {
background: var(--sage-soft) !important;
color: var(--green-deep) !important;
}
[data-fcw] .chat-composer-tools {
grid-template-columns: repeat(2, minmax(0,1fr));
max-height: min(310px, 48dvh);
overflow-y: auto;
}
[data-fcw] .chat-composer-tools button {
min-height: 58px;
width: 100%;
grid-template-columns: 28px minmax(0,1fr);
padding: 8px;
}
[data-fcw] .chat-composer-tools button > svg {
width: 28px;
height: 28px;
padding: 6px;
}
[data-fcw] .chat-composer-tools button b {
white-space: normal;
}
[data-fcw] .chat-composer-tools button small {
display: none;
}
@media (max-width: 860px) {
.chat-msg-acts .chat-act-btn:not(.chat-act-more):not(.chat-act-react),
.fchat-actions button:not(.fchat-act-more):not(.fchat-act-react) {
display: none !important;
}
.chat-msg-row.acts-open .chat-msg-acts .chat-act-btn,
.fchat-bubble-wrap.actions-open .fchat-actions button {
display: inline-flex !important;
}
[data-fcw] .chat-composer-tools {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (min-width: 861px) {
.chat-msg-row.me .chat-msg-acts {
top: -14px !important;
right: 8px !important;
}
.chat-msg-row.other .chat-msg-acts {
top: -14px !important;
left: 8px !important;
}
.floating-chat-dock .fchat-msg.me .fchat-actions,
.fchat-msg.me .fchat-actions {
top: -15px !important;
right: 7px !important;
left: auto !important;
margin: 0 !important;
}
.floating-chat-dock .fchat-msg.other .fchat-actions,
.fchat-msg.other .fchat-actions {
top: -15px !important;
right: auto !important;
left: 7px !important;
margin: 0 !important;
}
.chat-msg-row.structured-row .chat-msg-acts {
top: auto !important;
bottom: -14px !important;
}
.fchat-bubble-wrap:has(.fchat-bubble.structured) .fchat-actions,
.floating-chat-dock .fchat-bubble-wrap:has(.fchat-bubble.structured) .fchat-actions {
top: auto !important;
bottom: -15px !important;
}
}
.fcw > .chat-composer-tools,
#floating-chat-panel[data-fcw] > .chat-composer-tools {
flex: 0 0 auto;
grid-template-columns: repeat(2, minmax(0,1fr));
max-height: none;
overflow: visible;
}
.fcw > .chat-composer-tools .chat-composer-tools-head,
#floating-chat-panel[data-fcw] > .chat-composer-tools .chat-composer-tools-head {
position: static;
}
.fcw > .fcw-thread,
#floating-chat-panel[data-fcw] > .fcw-thread {
min-height: 72px;
}
@media (max-width: 860px) {
#floating-chat-panel[data-fcw] > .chat-composer-tools {
max-height: none;
overflow: visible;
}
}
@media (min-width: 861px) {
.chat-msg-row.me .chat-msg-acts {
top: 50% !important;
right: calc(100% - 2px) !important;
bottom: auto !important;
left: auto !important;
transform: translateY(-50%) !important;
}
.chat-msg-row.other .chat-msg-acts {
top: 50% !important;
right: auto !important;
bottom: auto !important;
left: calc(100% - 2px) !important;
transform: translateY(-50%) !important;
}
.chat-msg-row:hover .chat-msg-acts,
.chat-msg-row:focus-within .chat-msg-acts,
.chat-msg-row.acts-open .chat-msg-acts,
.chat-msg-acts:hover {
transform: translateY(-50%) !important;
}
}
.fchat-bubble-line,
.floating-chat-dock .fchat-bubble-line {
position: static;
display: flex;
}
.fchat-bubble,
.floating-chat-dock .fchat-bubble {
flex: 0 1 auto;
width: auto !important;
max-width: calc(100% - 83px) !important;
}
.fchat-actions,
.floating-chat-dock .fchat-actions,
.fchat-msg.me .fchat-actions,
.fchat-msg.other .fchat-actions,
.floating-chat-dock .fchat-msg.me .fchat-actions,
.floating-chat-dock .fchat-msg.other .fchat-actions,
.fchat-bubble-wrap:has(.fchat-bubble.structured) .fchat-actions,
.floating-chat-dock .fchat-bubble-wrap:has(.fchat-bubble.structured) .fchat-actions {
flex: 0 0 auto;
}
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-bubble-wrap.actions-open .fchat-actions,
.fchat-actions:hover {
opacity: 1;
pointer-events: auto;
}
.fchat-actions button,
.floating-chat-dock .fchat-actions button {
width: 19px !important;
height: 24px !important;
min-width: 19px !important;
}
.fchat-thread-meta {
position: relative;
z-index: 3;
flex: 0 0 auto;
box-sizing: border-box;
min-height: 0;
padding: 0 12px;
background: var(--paper);
}
.fchat-thread-meta:not(:empty) {
min-height: 25px;
padding-top: 3px;
padding-bottom: 5px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid rgba(47,85,69,.08);
}
.fchat-thread-meta .fchat-readmark {
flex: 0 0 auto;
padding: 0;
line-height: 16px;
}
.fchat-thread-meta .fchat-typing {
margin: 0 auto 0 0;
}
.fcw-foot {
position: relative;
z-index: 2;
}
@media (max-width: 860px) {
.fchat-bubble,
.floating-chat-dock .fchat-bubble {
max-width: calc(100% - 48px) !important;
}
.fchat-bubble-wrap.actions-open .fchat-bubble {
max-width: calc(100% - 83px) !important;
}
}
.chat-messenger-detail,
.project-chat-container,
.chat-messages-thread,
.fchat-thread,
.fcw-thread,
.fchat-msg,
.fchat-msgline,
.fchat-bubble-wrap,
.fchat-bubble-line {
min-width: 0;
box-sizing: border-box;
}
.chat-messages-thread,
.fchat-thread,
.fcw-thread {
overflow-x: hidden !important;
}
.chat-msg-row {
min-width: 0;
max-width: min(74%, 620px);
}
.chat-msg-bubble-container {
min-width: 0;
max-width: 100%;
}
.chat-msg-bubble {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: normal;
}
.chat-msg-acts {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
display: inline-flex !important;
align-items: center;
gap: 1px !important;
padding: 2px !important;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) !important;
}
.chat-msg-row.me .chat-msg-acts {
right: calc(100% - 2px) !important;
left: auto !important;
}
.chat-msg-row.other .chat-msg-acts {
right: auto !important;
left: calc(100% - 2px) !important;
}
.chat-msg-row:hover .chat-msg-acts,
.chat-msg-row:focus-within .chat-msg-acts,
.chat-msg-row.acts-open .chat-msg-acts,
.chat-msg-acts:hover {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(-50%) !important;
}
.chat-msg-acts .chat-act-btn {
width: 26px !important;
height: 28px !important;
min-width: 26px !important;
}
.chat-msg-acts .chat-act-btn svg {
width: 15px !important;
height: 15px !important;
}
.fchat-msgline {
width: 100%;
max-width: 100%;
}
.floating-chat-dock .fchat-msg.other { padding-right: 0; }
.floating-chat-dock .fchat-msg.me { padding-left: 0; }
.fchat-bubble-wrap,
.floating-chat-dock .fchat-bubble-wrap {
flex: 0 1 340px;
width: min(340px, 100%);
max-width: 100% !important;
overflow: visible;
}
.fchat-bubble-line,
.floating-chat-dock .fchat-bubble-line {
position: static !important;
width: 100%;
max-width: 100%;
display: grid !important;
align-items: center;
gap: 3px !important;
}
.fchat-msg.me .fchat-bubble-line {
grid-template-columns: auto minmax(0,1fr);
}
.fchat-msg.other .fchat-bubble-line {
grid-template-columns: minmax(0,1fr) auto;
}
.fchat-bubble,
.floating-chat-dock .fchat-bubble {
flex: none;
min-width: 0;
width: fit-content !important;
max-width: 100% !important;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: normal !important;
}
.fchat-bubble.structured,
.floating-chat-dock .fchat-bubble.structured {
width: 100% !important;
}
.fchat-msg.me .fchat-bubble {
justify-self: end;
}
.fchat-msg.other .fchat-bubble {
justify-self: start;
}
.fchat-text,
.fchat-text a {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
}
.fchat-msg-time {
white-space: nowrap;
}
.fchat-actions,
.floating-chat-dock .fchat-actions,
.fchat-msg.me .fchat-actions,
.fchat-msg.other .fchat-actions,
.floating-chat-dock .fchat-msg.me .fchat-actions,
.floating-chat-dock .fchat-msg.other .fchat-actions,
.fchat-bubble-wrap:has(.fchat-bubble.structured) .fchat-actions,
.floating-chat-dock .fchat-bubble-wrap:has(.fchat-bubble.structured) .fchat-actions {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: inline-flex !important;
align-items: center;
align-self: center;
gap: 1px !important;
margin: 0 !important;
padding: 2px !important;
opacity: 0;
pointer-events: none;
transform: none !important;
}
.fchat-bubble-wrap:hover .fchat-actions,
.fchat-bubble-wrap:focus-within .fchat-actions,
.fchat-bubble-wrap.actions-open .fchat-actions,
.fchat-actions:hover {
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
.fchat-actions button,
.floating-chat-dock .fchat-actions button {
width: 20px !important;
height: 26px !important;
min-width: 20px !important;
padding: 0 !important;
}
.fchat-actions button svg,
.floating-chat-dock .fchat-actions button svg {
width: 14px !important;
height: 14px !important;
}
.fchat-thread .chat-msg-menu,
.chat-messages-thread .chat-msg-menu,
.fchat-emoji-pop,
.chat-emoji-popover {
max-width: calc(100% - 12px);
box-sizing: border-box;
}
@media (max-width: 860px) {
.chat-msg-row {
max-width: calc(100% - 112px) !important;
}
.chat-msg-acts {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
display: inline-flex !important;
opacity: .9 !important;
pointer-events: auto !important;
transform: translateY(-50%) !important;
}
.chat-msg-row.me .chat-msg-acts {
right: calc(100% - 2px) !important;
left: auto !important;
}
.chat-msg-row.other .chat-msg-acts {
right: auto !important;
left: calc(100% - 2px) !important;
}
.chat-msg-row.acts-open .chat-msg-acts .chat-act-btn {
display: inline-flex !important;
}
.fchat-bubble-wrap,
.floating-chat-dock .fchat-bubble-wrap {
flex-basis: 100%;
width: 100%;
}
.fchat-actions {
opacity: .9 !important;
pointer-events: auto !important;
}
.fchat-bubble-wrap.actions-open .fchat-actions button {
display: inline-flex !important;
}
}
.chat-msg-acts,
.fchat-actions,
.floating-chat-dock .fchat-actions {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.chat-msg-acts .chat-act-btn,
.fchat-actions button,
.floating-chat-dock .fchat-actions button {
border: 1px solid rgba(47,85,69,.14) !important;
background: rgba(255,255,255,.96) !important;
box-shadow: 0 2px 7px rgba(36,67,55,.08) !important;
}
.chat-msg-acts .chat-act-btn:hover,
.chat-msg-acts .chat-act-btn:focus-visible,
.fchat-actions button:hover,
.fchat-actions button:focus-visible {
border-color: rgba(47,85,69,.28) !important;
background: var(--sage-soft) !important;
}
.chat-msg-reacts,
.fchat-reacts {
max-width: 100%;
box-sizing: border-box;
}
.chat-msg-menu {
width: min(270px, calc(100vw - 28px));
max-width: min(270px, calc(100vw - 28px)) !important;
max-height: min(420px, calc(100dvh - 28px));
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.chat-emoji-popover,
.fchat-emoji-pop {
max-width: min(340px, calc(100% - 16px));
overflow-x: auto;
overscroll-behavior-x: contain;
box-sizing: border-box;
}
.chat-link-preview {
width: 100%;
max-width: 100%;
margin-top: 8px;
padding: 9px 10px;
display: flex;
align-items: center;
gap: 9px;
box-sizing: border-box;
border: 1px solid rgba(47,85,69,.14);
border-radius: 12px;
background: rgba(255,255,255,.92);
color: var(--ink) !important;
text-decoration: none !important;
box-shadow: 0 3px 10px rgba(36,67,55,.06);
}
.chat-link-preview:hover,
.chat-link-preview:focus-visible {
border-color: rgba(47,85,69,.28);
background: #fff;
}
.chat-link-preview-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--sage-soft);
color: var(--green-deep);
}
.chat-link-preview-icon svg {
width: 18px;
height: 18px;
}
.chat-link-preview-copy {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.chat-link-preview-copy small {
color: var(--coral-deep);
font-size: 8.5px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.chat-link-preview-copy b,
.chat-link-preview-copy em {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-link-preview-copy b {
color: var(--ink);
font-size: 12.5px;
}
.chat-link-preview-copy em {
color: var(--muted);
font-size: 10px;
font-style: normal;
}
.chat-link-preview-open {
flex: 0 0 auto;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 860px) {
.chat-msg-menu {
max-height: min(56dvh, 390px);
}
.chat-link-preview {
padding: 8px;
}
.chat-link-preview-icon {
width: 30px;
height: 30px;
flex-basis: 30px;
}
}
.chat-msg-acts .chat-act-btn,
.fchat-actions button,
.floating-chat-dock .fchat-actions button {
border-color: transparent !important;
background: rgba(255,255,255,.58) !important;
color: rgba(47,85,69,.72) !important;
box-shadow: none !important;
}
.chat-msg-acts .chat-act-btn:hover,
.chat-msg-acts .chat-act-btn:focus-visible,
.fchat-actions button:hover,
.fchat-actions button:focus-visible,
.floating-chat-dock .fchat-actions button:hover,
.floating-chat-dock .fchat-actions button:focus-visible {
border-color: rgba(47,85,69,.12) !important;
background: rgba(235,240,232,.94) !important;
color: var(--green-deep) !important;
box-shadow: none !important;
}
.workspace-notifications.notification-bell-ring > svg {
transform-origin: 50% 12%;
animation: notificationBellRing .72s ease-in-out;
}
@keyframes notificationBellRing {
0%, 100% { transform: rotate(0); }
18% { transform: rotate(-9deg); }
36% { transform: rotate(7deg); }
54% { transform: rotate(-5deg); }
72% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
.workspace-notifications.notification-bell-ring > svg {
animation: none;
}
}
:root {
--motion-quick: 120ms;
--motion-base: 200ms;
--motion-slow: 320ms;
--motion-ease: cubic-bezier(.22, 1, .36, 1);
--motion-ease-gentle: cubic-bezier(.2, .72, .32, 1);
}
.pcard,
.person-card,
.idea-card,
.help-result,
.meetings-list .meetcard,
.card.task-list .tk,
.project-next-task,
.project-doc-row,
.notification-item,
.dash-meeting-row:not(.empty) {
transition:
transform var(--motion-base) var(--motion-ease),
box-shadow var(--motion-base) ease,
border-color var(--motion-base) ease,
background-color var(--motion-base) ease;
}
.person-card-ava,
.meetings-list .mc-date,
.idea-card .idea-plant,
.dash-meeting-row .dash-meeting-date,
.notification-item .notification-ico,
.workspace-search > svg,
.workspace-add-trigger > span,
.login-logo {
transition:
transform var(--motion-base) var(--motion-ease),
color var(--motion-base) ease,
background-color var(--motion-base) ease;
}
.workspace-add-trigger > span {
display: inline-block;
}
.main .btn,
.modal .btn,
.small-btn,
.mini-action,
.scope-btn,
.seg-btn,
.project-tab,
.workspace-search,
.workspace-notifications,
.workspace-add-trigger,
.workspace-add-panel button,
.meeting-menu-item,
.sr-item,
.mobile-more-grid > button {
transition:
transform var(--motion-quick) var(--motion-ease),
background-color var(--motion-base) ease,
border-color var(--motion-base) ease,
color var(--motion-base) ease,
box-shadow var(--motion-base) ease;
}
.main input:not([type="checkbox"]):not([type="radio"]),
.main textarea,
.main select,
#modal-root input:not([type="checkbox"]):not([type="radio"]),
#modal-root textarea,
#modal-root select {
transition:
border-color var(--motion-base) ease,
background-color var(--motion-base) ease,
box-shadow var(--motion-base) ease;
}
.main input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.main textarea:focus-visible,
.main select:focus-visible,
#modal-root input:not([type="checkbox"]):not([type="radio"]):focus-visible,
#modal-root textarea:focus-visible,
#modal-root select:focus-visible {
box-shadow: 0 0 0 3px rgba(224,122,95,.12);
}
.main .btn:active:not(:disabled),
.modal .btn:active:not(:disabled),
.small-btn:active:not(:disabled),
.mini-action:active:not(:disabled),
.scope-btn:active:not(:disabled),
.seg-btn:active:not(:disabled),
.project-tab:active:not(:disabled),
.workspace-search:active,
.workspace-notifications:active,
.workspace-add-trigger:active {
transform: translateY(1px) scale(.985);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.pcard:hover,
.person-card:hover,
.idea-card:hover,
.help-result:hover,
.meetings-list .meetcard:hover,
.card.task-list .tk:hover,
.project-next-task:hover {
transform: translateY(-2px);
}
.project-doc-row:hover,
.notification-item:hover,
.dash-meeting-row:not(.empty):hover,
.workspace-add-panel button:hover,
.meeting-menu-item:hover,
.sr-item:hover {
transform: translateX(2px);
}
.person-card:hover .person-card-ava {
transform: rotate(-2deg) scale(1.035);
}
.meetings-list .meetcard:hover .mc-date,
.dash-meeting-row:not(.empty):hover .dash-meeting-date {
transform: translateY(-1px) rotate(-1.5deg);
}
.idea-card:hover .idea-plant {
transform: rotate(1.5deg) translateY(-1px);
}
.notification-item:hover .notification-ico {
transform: rotate(-3deg) scale(1.04);
}
.workspace-search:hover > svg {
transform: rotate(-5deg) scale(1.06);
}
.login-card:hover .login-logo {
transform: rotate(-2deg) scale(1.025);
}
}
.workspace-add-menu[open] .workspace-add-trigger > span {
transform: rotate(12deg);
}
@media (prefers-reduced-motion: no-preference) {
#overview-view > *,
#collection-panel > * {
animation: korenkaContentSettle .3s var(--motion-ease) both;
}
#overview-view > :nth-child(2),
#collection-panel > :nth-child(2) { animation-delay: 35ms; }
#overview-view > :nth-child(3),
#collection-panel > :nth-child(3) { animation-delay: 65ms; }
#overview-view > :nth-child(4),
#collection-panel > :nth-child(4) { animation-delay: 90ms; }
.login-card {
animation: korenkaWelcomeIn .46s var(--motion-ease) both;
}
.nav-btn.active .nb-ico {
animation: korenkaNavSettle .3s var(--motion-ease);
}
.seg-btn.on,
.scope-btn.on {
animation: korenkaPillSettle .22s var(--motion-ease);
}
.meeting-action-menu[open] .meeting-action-menu-panel,
.workspace-add-menu[open] .workspace-add-panel {
animation: korenkaPopoverSettle .2s var(--motion-ease) both;
}
.sync.saving .sync-dot {
animation: korenkaSavingPulse 1.25s ease-in-out infinite;
}
#toast.show {
animation: korenkaToastSettle .28s var(--motion-ease) both;
}
}
@keyframes korenkaContentSettle {
from { opacity: 0; transform: translateY(6px) scale(.998); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes korenkaWelcomeIn {
from { opacity: 0; transform: translateY(12px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes korenkaNavSettle {
0% { transform: translateX(-2px) scale(.94); }
65% { transform: translateX(1px) scale(1.04); }
100% { transform: translateX(0) scale(1); }
}
@keyframes korenkaPillSettle {
from { transform: scale(.965); }
to { transform: scale(1); }
}
@keyframes korenkaPopoverSettle {
from { opacity: 0; transform: translateY(-5px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes korenkaSavingPulse {
0%, 100% { opacity: .55; transform: scale(.82); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes korenkaToastSettle {
0% { opacity: 0; transform: translateX(-50%) translateY(7px) scale(.985); }
68% { opacity: 1; transform: translateX(-50%) translateY(-1px) scale(1.008); }
100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.x,
.pd-back svg,
.project-backbar svg,
.meeting-detail-toolbar svg {
transition: transform var(--motion-base) var(--motion-ease);
}
.task-modal-loading {
display: flex;
align-items: center;
gap: 10px;
}
.task-modal-loading::before {
content: "";
width: 10px;
height: 14px;
flex: 0 0 10px;
border-radius: 80% 20% 75% 25%;
background: var(--sage-deep);
transform: rotate(-34deg);
transform-origin: 80% 90%;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.x:hover {
transform: rotate(4deg) scale(1.04);
}
.pd-back:hover svg,
.project-backbar a:hover svg,
.project-backbar button:hover svg {
transform: translateX(-2px);
}
}
@media (prefers-reduced-motion: no-preference) {
.task-modal-loading::before {
animation: korenkaLoadingLeaf 1.15s ease-in-out infinite;
}
}
.document-magic-modal { width: min(680px, calc(100vw - 28px)); max-width: 680px; }
.document-magic-review-modal { width: min(920px, calc(100vw - 28px)); max-width: 920px; }
.document-magic-upload,
.document-magic-review { min-width: 0; }
.document-magic-intro { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid rgba(132, 151, 125, .24); border-radius: 16px; background: linear-gradient(135deg, rgba(239,242,229,.72), rgba(255,253,248,.82)); }
.document-magic-intro b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }
.document-magic-intro p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.document-magic-symbol { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 17px; color: var(--coral-deep); background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(86, 70, 50, .07); }
.document-magic-symbol svg { width: 27px; height: 27px; }
.document-magic-source-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.document-magic-source-tabs button { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 10px; align-items: center; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--green-deep); background: rgba(255,255,255,.6); cursor: pointer; text-align: left; font: inherit; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.document-magic-source-tabs button:hover:not(:disabled) { border-color: rgba(224,122,95,.5); transform: translateY(-1px); }
.document-magic-source-tabs button.is-active { border-color: rgba(224,122,95,.48); background: rgba(255,248,244,.9); box-shadow: 0 5px 15px rgba(112,73,57,.05); }
.document-magic-source-tabs button:disabled { opacity: .55; cursor: not-allowed; }
.document-magic-source-tabs button > span { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sage-soft); }
.document-magic-source-tabs button.is-active > span { color: var(--coral-deep); background: rgba(224,122,95,.1); }
.document-magic-source-tabs svg { width: 16px; height: 16px; }
.document-magic-source-tabs b,
.document-magic-source-tabs small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-magic-source-tabs b { align-self: end; font-size: 12.5px; }
.document-magic-source-tabs small { align-self: start; color: var(--muted); font-size: 10px; }
.document-magic-source-panel[hidden] { display: none !important; }
.document-magic-drop { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 13px; align-items: center; margin-top: 14px; padding: 17px; border: 1.5px dashed rgba(78, 104, 88, .35); border-radius: 16px; background: rgba(255,255,255,.58); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.document-magic-drop:hover { border-color: var(--coral); background: rgba(255,255,255,.9); transform: translateY(-1px); }
.document-magic-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.document-magic-drop-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; color: var(--green-deep); background: var(--sage-soft); }
.document-magic-drop-icon svg { width: 21px; height: 21px; }
.document-magic-drop b,
.document-magic-drop small { display: block; overflow-wrap: anywhere; }
.document-magic-drop b { margin-bottom: 3px; font-size: 14px; }
.document-magic-drop small { color: var(--muted); font-size: 11.5px; }
.document-magic-save-drive { display: grid; grid-template-columns: 18px 30px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(132,151,125,.24); border-radius: 13px; background: rgba(239,242,229,.38); cursor: pointer; }
.document-magic-save-drive input { width: 17px; height: 17px; margin: 0; accent-color: var(--coral); }
.document-magic-save-drive > span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--green-deep); background: rgba(255,255,255,.72); }
.document-magic-save-drive svg { width: 15px; height: 15px; }
.document-magic-save-drive b,
.document-magic-save-drive small { display: block; }
.document-magic-save-drive b { color: var(--ink); font-size: 11.5px; }
.document-magic-save-drive small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.document-magic-drive-unavailable { margin: 10px 1px 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.document-magic-drive-list { display: grid; gap: 7px; max-height: 300px; margin-top: 12px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; }
.document-magic-drive-loading { margin: 12px 0; color: var(--green-deep); font-size: 11.5px; font-weight: 700; }
.document-magic-drive-loading::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; border: 2px solid rgba(91,116,94,.2); border-top-color: var(--green-deep); border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }
.document-magic-drive-file { display: grid; grid-template-columns: 20px 36px minmax(0,1fr) 30px; gap: 9px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.66); cursor: pointer; }
.document-magic-drive-file:has(input:checked) { border-color: rgba(224,122,95,.5); background: rgba(255,248,244,.88); }
.document-magic-drive-file > input { width: 17px; height: 17px; margin: 0; accent-color: var(--coral); }
.document-magic-drive-file-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--green-deep); background: var(--sage-soft); }
.document-magic-drive-file-icon svg { width: 18px; height: 18px; }
.document-magic-drive-file-main { min-width: 0; }
.document-magic-drive-file-main b,
.document-magic-drive-file-main small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-magic-drive-file-main b { color: var(--ink); font-size: 11.8px; }
.document-magic-drive-file-main small { margin-top: 3px; color: var(--muted); font-size: 9.8px; }
.document-magic-drive-file > a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--green-deep); text-decoration: none; }
.document-magic-drive-file > a:hover { background: var(--sage-soft); }
.document-magic-drive-file > a svg { width: 16px; height: 16px; }
.document-magic-drive-empty { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; padding: 13px; border: 1px dashed var(--line); border-radius: 14px; background: rgba(255,255,255,.46); }
.document-magic-drive-empty > span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--green-deep); background: var(--sage-soft); }
.document-magic-drive-empty > span svg { width: 18px; height: 18px; }
.document-magic-drive-empty b { font-size: 11.8px; }
.document-magic-drive-empty p { margin: 2px 0 0; color: var(--muted); font-size: 10.2px; line-height: 1.4; }
.document-magic-drive-empty.is-error { border-color: rgba(224,122,95,.35); }
.document-magic-trust { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; color: var(--muted); }
.document-magic-trust > span { display: flex; align-items: center; justify-content: center; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; color: var(--green-deep); background: var(--sage-soft); }
.document-magic-trust svg { width: 12px; height: 12px; }
.document-magic-trust p { margin: 1px 0 0; font-size: 11.5px; line-height: 1.45; }
.document-magic-status { min-height: 20px; margin: 12px 0 0; color: var(--green-deep); font-size: 12px; font-weight: 700; }
.document-magic-status.is-error { color: var(--coral-deep); }
.document-magic-status.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 2px solid rgba(91,116,94,.22); border-top-color: var(--green-deep); border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }
.document-magic-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 10px; }
.document-magic-form-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; margin: 0; }
.document-magic-form-actions .btn svg { width: 16px; height: 16px; }
.document-magic-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.document-magic-result-head > div { min-width: 0; }
.document-magic-result-head span { color: var(--coral-deep); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.document-magic-result-head h3 { margin: 4px 0; font-family: var(--display); font-size: 20px; overflow-wrap: anywhere; }
.document-magic-result-head p { margin: 0; color: var(--muted); font-size: 12px; }
.document-magic-duplicate-note { margin: 8px 0; padding: 8px 10px; border-radius: 10px; color: var(--green-deep); background: var(--sage-soft); font-size: 11.5px; }
.document-magic-toolbar { position: sticky; top: -1px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0 -2px 10px; padding: 9px 2px; background: linear-gradient(var(--paper) 80%, rgba(255,253,248,0)); }
.document-magic-toolbar > span { margin-right: auto; color: var(--green-deep); font-size: 11.5px; font-weight: 800; }
.document-magic-list { display: grid; gap: 10px; }
.document-magic-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.62); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.document-magic-card.is-selected { border-color: rgba(224, 122, 95, .5); background: rgba(255,250,245,.94); box-shadow: 0 8px 20px rgba(112, 73, 57, .06); }
.document-magic-card.is-created { opacity: .58; border-color: rgba(132,151,125,.4); background: var(--sage-soft); }
.document-magic-select { display: flex; flex-direction: column; gap: 5px; align-self: stretch; min-height: 74px; border-right: 1px solid rgba(224,216,199,.74); }
.document-magic-select input { position: absolute; opacity: 0; pointer-events: none; }
.document-magic-select > span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; color: transparent; background: var(--paper); }
.document-magic-select > span svg { width: 14px; height: 14px; }
.document-magic-select input:checked + span { color: #fff; border-color: var(--coral); background: var(--coral); }
.document-magic-select em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 750; }
.document-magic-card-main { min-width: 0; }
.document-magic-card-head { display: flex; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.document-magic-kind,
.document-magic-needs-review { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.document-magic-kind { color: var(--coral-deep); background: rgba(224,122,95,.1); }
.kind-question .document-magic-kind { color: #8c6a2b; background: rgba(213,168,82,.15); }
.kind-note .document-magic-kind { color: var(--green-deep); background: var(--sage-soft); }
.document-magic-needs-review { color: var(--muted); background: var(--cream-deep); }
.document-magic-title-field,
.document-magic-details-field,
.document-magic-fields label { display: block; min-width: 0; }
.document-magic-title-field > span,
.document-magic-details-field > span,
.document-magic-fields label > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.document-magic-title-field input { font-size: 14.5px; font-weight: 700; }
.document-magic-details-field { margin-top: 8px; }
.document-magic-details-field textarea { min-height: 66px; resize: vertical; line-height: 1.45; }
.document-magic-card input,
.document-magic-card textarea,
.document-magic-card select { width: 100%; min-width: 0; max-width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: rgba(255,255,255,.76); font-family: inherit; font-size: 12px; }
.document-magic-card input:focus,
.document-magic-card textarea:focus,
.document-magic-card select:focus { outline: 2px solid rgba(224,122,95,.16); border-color: var(--coral); }
.document-magic-review-note { margin: 7px 0 0; color: var(--coral-deep); font-size: 11px; line-height: 1.4; }
.document-magic-fields { display: grid; grid-template-columns: .8fr 1fr 1.5fr; gap: 8px; margin-top: 9px; }
.document-magic-people,
.document-magic-source { margin-top: 8px; border-top: 1px solid rgba(224,216,199,.7); }
.document-magic-people summary,
.document-magic-source summary { padding-top: 8px; color: var(--green-deep); cursor: pointer; font-size: 11px; font-weight: 750; }
.document-magic-people summary b { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 999px; background: var(--sage-soft); font-size: 9px; }
.document-magic-people > div { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.document-magic-person-check { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.74); cursor: pointer; }
.document-magic-person-check input { position: static; width: 14px; height: 14px; margin: 0; accent-color: var(--coral); }
.document-magic-person-check span { color: var(--ink); font-size: 10.5px; }
.document-magic-people > small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.document-magic-source blockquote { margin: 7px 0 0; padding: 8px 10px; border-left: 2px solid var(--sage); border-radius: 0 9px 9px 0; color: var(--muted); background: rgba(239,242,229,.48); font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; }
.document-magic-form-actions.is-sticky { position: sticky; bottom: -1px; z-index: 4; margin: 12px -2px -2px; padding: 10px 2px 2px; background: linear-gradient(rgba(255,253,248,0), var(--paper) 28%); }
.document-magic-empty { padding: 20px 8px; text-align: center; }
.document-magic-empty > span { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; color: var(--coral-deep); background: var(--sage-soft); }
.document-magic-empty > span svg { width: 28px; height: 28px; }
.document-magic-empty h3 { margin: 0 0 6px; font-family: var(--display); }
.document-magic-empty p { max-width: 470px; margin: 0 auto 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
.document-magic-modal,
.document-magic-review-modal { width: calc(100vw - 18px); }
.document-magic-card { grid-template-columns: 1fr; gap: 8px; padding: 11px; }
.document-magic-select { flex-direction: row; justify-content: flex-start; min-height: 0; padding-bottom: 8px; border-right: 0; border-bottom: 1px solid rgba(224,216,199,.74); }
.document-magic-fields label:last-child { grid-column: 1 / -1; }
.document-magic-toolbar { flex-wrap: wrap; }
.document-magic-toolbar > span { flex: 1 1 100%; }
.document-magic-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
.document-magic-form-actions .btn { width: 100%; }
}
@media (max-width: 460px) {
.project-next-actions { grid-template-columns: 1fr; }
.document-magic-intro { grid-template-columns: 44px minmax(0,1fr); padding: 12px; }
.document-magic-symbol { width: 44px; height: 44px; border-radius: 14px; }
.document-magic-source-tabs { grid-template-columns: 1fr; }
.document-magic-drive-list { max-height: 260px; }
.document-magic-result-head { flex-direction: column; }
.document-magic-fields { grid-template-columns: 1fr; }
.document-magic-fields label:last-child { grid-column: auto; }
.document-magic-toolbar .small-btn { flex: 1 1 44%; }
.document-magic-form-actions { grid-template-columns: 1fr; }
}
.document-magic-review-modal { max-width: 940px; }
.document-magic-review-modal .modal-body { padding: 18px 22px 0; background: var(--paper); }
.document-magic-result-head { margin: 0 0 14px; padding: 2px 2px 0; }
.document-magic-result-head > div > span { display: inline-block; }
.document-magic-result-head h3 { margin: 4px 0 3px; font-size: 25px; line-height: 1.16; }
.document-magic-result-head p { font-size: 12.5px; line-height: 1.45; }
.document-magic-file-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.document-magic-file-pill,
.document-magic-page-pill,
.document-magic-drive-pill { display: inline-flex; align-items: center; min-width: 0; height: 27px; border-radius: 999px; color: var(--green-deep); background: var(--sage-soft); font-size: 10.5px; font-weight: 750; }
.document-magic-file-pill { gap: 6px; max-width: min(540px, 72vw); padding: 0 10px; }
.document-magic-file-pill svg { flex: 0 0 13px; width: 13px; height: 13px; }
.document-magic-file-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-magic-page-pill { padding: 0 9px; color: var(--muted); background: var(--cream-deep); }
.document-magic-drive-pill { gap: 6px; padding: 0 10px; text-decoration: none; background: rgba(224,122,95,.09); }
.document-magic-drive-pill:hover { background: rgba(224,122,95,.15); }
.document-magic-drive-pill svg { width: 13px; height: 13px; }
.document-magic-drive-warning { margin: 0 0 12px; padding: 9px 11px; border-left: 2px solid var(--amber); border-radius: 0 10px 10px 0; color: #8c6a2b; background: rgba(213,168,82,.09); font-size: 11px; line-height: 1.45; }
.document-magic-toolbar { top: -18px; z-index: 5; margin: 8px -22px 18px; padding: 11px 22px; border-top: 1px solid rgba(224,216,199,.6); border-bottom: 1px solid rgba(224,216,199,.75); background: rgba(255,253,248,.98); box-shadow: 0 8px 16px rgba(80,63,45,.045); }
.document-magic-toolbar > div { display: flex; gap: 7px; align-items: center; }
.document-magic-toolbar > span { font-size: 12px; }
.document-magic-toolbar .small-btn { min-height: 33px; padding: 6px 11px; background: transparent; }
.document-magic-group { display: grid; gap: 10px; margin-bottom: 22px; }
.document-magic-group > header { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 0 2px 9px; border-bottom: 1px solid var(--line); }
.document-magic-group-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; color: var(--coral-deep); background: rgba(224,122,95,.1); }
.document-magic-group-icon svg { width: 17px; height: 17px; }
.document-magic-group > header h3 { margin: 0 0 2px; font-family: inherit; color: var(--ink); font-size: 14.5px; }
.document-magic-group > header p { margin: 0; color: var(--muted); font-size: 10.8px; line-height: 1.4; }
.document-magic-group > header > b { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; padding: 0 7px; border-radius: 999px; color: var(--green-deep); background: var(--cream-deep); font-size: 11px; }
.document-magic-group.group-questions .document-magic-group-icon { color: #8c6a2b; background: rgba(213,168,82,.14); }
.document-magic-group.group-notes .document-magic-group-icon { color: var(--green-deep); background: var(--sage-soft); }
.document-magic-card { display: block; padding: 14px 15px; border-color: rgba(224,216,199,.92); border-radius: 16px; background: rgba(255,255,255,.66); box-shadow: 0 5px 16px rgba(80,63,45,.035); }
.document-magic-card.is-selected { border-color: rgba(224,122,95,.42); background: rgba(255,250,246,.88); box-shadow: 0 7px 18px rgba(112,73,57,.055); }
.document-magic-card.kind-question { border-color: rgba(213,168,82,.32); background: rgba(255,252,244,.74); }
.document-magic-card.kind-question.is-selected { border-color: rgba(213,168,82,.58); }
.document-magic-card-head { justify-content: space-between; align-items: center; margin-bottom: 9px; }
.document-magic-card-head > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.document-magic-select { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; align-self: auto; gap: 6px; min-height: 32px; padding: 4px 9px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.76); cursor: pointer; }
.document-magic-select > span { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; }
.document-magic-select em { color: var(--green-deep); font-size: 10.5px; white-space: nowrap; }
.document-magic-select:has(input:checked) { border-color: rgba(224,122,95,.45); background: rgba(224,122,95,.08); }
.document-magic-card input,
.document-magic-card textarea,
.document-magic-card select { border-color: rgba(224,216,199,.9); border-radius: 11px; background: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.document-magic-title-field input { padding: 10px 11px; font-size: 14px; }
.document-magic-details-field textarea { min-height: 72px; padding: 10px 11px; }
.document-magic-fields { grid-template-columns: .76fr 1fr 1.45fr; gap: 9px; }
.document-magic-date-field { min-width: 0; }
.document-magic-date-field .document-magic-date-empty { display: none; align-items: center; justify-content: space-between; gap: 7px; width: 100%; min-height: 37px; padding: 8px 10px; border: 1px dashed rgba(132,151,125,.42); border-radius: 11px; color: var(--muted); background: rgba(239,242,229,.38); cursor: pointer; font: inherit; }
.document-magic-date-field.is-empty .document-magic-date-empty { display: flex; }
.document-magic-date-field .document-magic-date-empty b { font-size: 11.5px; font-weight: 700; }
.document-magic-date-field .document-magic-date-empty em { color: var(--green-deep); font-size: 10px; font-style: normal; font-weight: 800; }
.document-magic-date-field.has-date .document-magic-date-empty { display: none; }
.document-magic-field-evidence { display: block; margin-top: 5px; color: var(--muted); font-size: 9.4px; line-height: 1.35; }
.document-magic-field-evidence.is-detected { color: var(--green-deep); }
.document-magic-field-evidence.is-review { color: #8c6a2b; }
.document-magic-fields label.is-missing select { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(224,122,95,.12); }
.document-magic-review-note { padding: 8px 10px; border-left: 2px solid var(--amber); border-radius: 0 9px 9px 0; background: rgba(213,168,82,.09); color: #8c6a2b; }
.document-magic-people,
.document-magic-source { border-color: rgba(224,216,199,.72); }
.document-magic-note-card { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; padding: 12px 14px; border: 1px solid rgba(132,151,125,.22); border-radius: 14px; background: rgba(239,242,229,.36); }
.document-magic-note-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; color: var(--green-deep); background: rgba(255,255,255,.68); }
.document-magic-note-icon svg { width: 17px; height: 17px; }
.document-magic-note-card > div { min-width: 0; }
.document-magic-note-card > div > span { color: var(--green-deep); font-size: 8.8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.document-magic-note-card h4 { margin: 3px 0 4px; color: var(--ink); font-size: 13px; line-height: 1.3; }
.document-magic-note-card p { margin: 0; color: var(--muted); font-size: 11.3px; line-height: 1.48; white-space: pre-wrap; }
.document-magic-note-card .document-magic-source { margin-top: 7px; }
.document-magic-note-card .document-magic-source summary { font-size: 10px; }
.document-magic-note-card .document-magic-source blockquote { font-size: 10px; }
.document-magic-form-actions.is-sticky { bottom: 0; margin: 10px -22px 0; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,253,248,.98); box-shadow: 0 -10px 22px rgba(80,63,45,.06); }
@media (max-width: 760px) {
.document-magic-review-modal .modal-body { padding: 14px 14px 0; }
.document-magic-toolbar { top: -14px; margin: 8px -14px 16px; padding: 10px 14px; }
.document-magic-toolbar > div { width: 100%; }
.document-magic-toolbar .small-btn { flex: 1 1 0; }
.document-magic-group > header { grid-template-columns: 32px minmax(0,1fr) auto; }
.document-magic-group-icon { width: 32px; height: 32px; }
.document-magic-card { padding: 12px; }
.document-magic-card-head { align-items: flex-start; }
.document-magic-select { min-height: 30px; }
.document-magic-fields { grid-template-columns: 1fr 1fr; }
.document-magic-fields > label:last-child { grid-column: 1 / -1; }
.document-magic-note-card { grid-template-columns: 32px minmax(0,1fr); padding: 11px; }
.document-magic-note-icon { width: 32px; height: 32px; }
.document-magic-form-actions.is-sticky { margin: 10px -14px 0; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 480px) {
.document-magic-result-head h3 { font-size: 21px; }
.document-magic-file-pill { max-width: 100%; }
.document-magic-card-head { gap: 8px; }
.document-magic-select { width: 100%; justify-content: flex-start; }
.document-magic-fields { grid-template-columns: 1fr; }
.document-magic-fields > label:last-child { grid-column: auto; }
.document-magic-group > header p { display: none; }
}
@keyframes korenkaLoadingLeaf {
0%, 100% { opacity: .55; transform: rotate(-38deg) scale(.88); }
50% { opacity: 1; transform: rotate(-28deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
#overview-view > *,
#collection-panel > *,
.login-card,
.nav-btn.active .nb-ico,
.seg-btn.on,
.scope-btn.on,
.meeting-action-menu[open] .meeting-action-menu-panel,
.workspace-add-menu[open] .workspace-add-panel,
.sync.saving .sync-dot,
#toast.show,
.task-modal-loading::before {
animation: none !important;
}
.pcard,
.person-card,
.idea-card,
.help-result,
.meetings-list .meetcard,
.card.task-list .tk,
.project-next-task,
.project-doc-row,
.notification-item,
.dash-meeting-row:not(.empty),
.person-card-ava,
.meetings-list .mc-date,
.idea-card .idea-plant,
.dash-meeting-row .dash-meeting-date,
.notification-item .notification-ico,
.workspace-search > svg,
.workspace-add-trigger > span,
.login-logo,
.x,
.pd-back svg,
.project-backbar svg,
.meeting-detail-toolbar svg,
.main .btn,
.modal .btn,
.small-btn,
.mini-action,
.scope-btn,
.seg-btn,
.project-tab,
.workspace-search,
.workspace-notifications,
.workspace-add-trigger,
.workspace-add-panel button,
.meeting-menu-item,
.sr-item,
.mobile-more-grid > button,
.main input,
.main textarea,
.main select,
#modal-root input,
#modal-root textarea,
#modal-root select {
transition: none !important;
}
.main .btn:active,
.modal .btn:active,
.small-btn:active,
.mini-action:active,
.scope-btn:active,
.seg-btn:active,
.project-tab:active,
.workspace-search:active,
.workspace-notifications:active,
.workspace-add-trigger:active,
.workspace-add-menu[open] .workspace-add-trigger > span {
transform: none !important;
}
}
.view-trust .collection-head{display:none}
.view-trust .collection-panel{padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.trust-page{max-width:1180px;margin:0 auto;padding:4px 0 40px;color:var(--ink)}
.trust-hero{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:22px;padding:28px 32px;border:1px solid rgba(75,105,86,.18);border-radius:28px;background:linear-gradient(135deg,#fffdf8 0%,#f3f6ed 100%);overflow:hidden}
.trust-hero:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-72px;top:-118px;background:rgba(229,121,94,.09)}
.trust-hero-icon{display:grid;place-items:center;width:86px;height:86px;border-radius:28px;background:var(--green);color:#fff;box-shadow:0 14px 28px rgba(49,88,70,.16)}
.trust-hero-icon svg{width:44px;height:44px}
.trust-hero .eyebrow,.trust-form-intro span,.trust-recipient-eyebrow{margin:0 0 7px;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.trust-hero h1{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.04em}
.trust-hero p:last-child{max-width:790px;margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.65}
.trust-crisis{margin-top:22px;padding:20px 22px;border:1px solid rgba(75,105,86,.15);border-radius:22px;background:linear-gradient(135deg,rgba(255,253,248,.86),rgba(243,246,237,.76));box-shadow:0 9px 22px rgba(49,70,59,.04)}
.trust-crisis-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:18px}.trust-crisis-head .eyebrow{margin:0 0 6px;color:var(--coral)}.trust-crisis-head h2{max-width:650px;margin:0;font-size:23px;line-height:1.18;letter-spacing:-.02em}.trust-crisis-head>p{max-width:360px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.trust-crisis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.trust-crisis-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:15px;border:1px solid rgba(75,105,86,.15);border-radius:17px;background:rgba(255,255,255,.72)}.trust-crisis-card.urgent{border-color:rgba(229,121,94,.3);background:#fff7f2}.trust-crisis-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--green-soft);color:#fff}.trust-crisis-card.urgent .trust-crisis-icon{background:#fde9df;color:var(--coral)}.trust-crisis-icon svg{width:21px;height:21px}.trust-crisis-card small{display:block;margin:1px 0 4px;color:var(--coral);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.trust-crisis-card h3{margin:0;font-size:15px;line-height:1.25}.trust-crisis-card p{margin:6px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}.trust-crisis-actions{display:flex;flex-wrap:wrap;gap:6px}.trust-crisis-actions a{display:inline-flex;align-items:center;min-height:30px;padding:5px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--green);font-size:10px;font-weight:850;text-decoration:none}.trust-crisis-actions a:hover{border-color:var(--green);background:var(--green-soft);color:#fff}.trust-crisis-foot{margin:12px 2px 0;color:var(--muted);font-size:10px;line-height:1.45}
.trust-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.72fr);gap:22px;align-items:start}
.trust-form-card,.trust-recipient-card,.trust-transparency,.trust-tech{border:1px solid rgba(75,105,86,.18);background:var(--paper);box-shadow:0 14px 32px rgba(49,70,59,.07)}
.trust-form-card{border-radius:26px;padding:28px 30px}
.trust-form-intro{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.trust-form-intro h2{margin:0;font-size:29px;letter-spacing:-.025em}
.trust-form-intro p{margin:8px 0 0;color:var(--muted);line-height:1.55}
.trust-form{display:grid;gap:22px}
.trust-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.trust-fieldset{margin:0;padding:0;border:0}
.trust-fieldset legend,.trust-form .field>label{display:block;margin-bottom:9px;color:var(--ink);font-size:14px;font-weight:800}
.trust-form .field>label span{color:var(--muted);font-weight:500}
.trust-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trust-mode{position:relative;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;min-height:92px;padding:15px;border:1px solid var(--line);border-radius:17px;background:#fffdf9;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.trust-mode:hover{transform:translateY(-1px);border-color:var(--sage-deep)}
.trust-mode:has(input:checked){border-color:var(--green);background:#f0f5ed;box-shadow:0 0 0 2px rgba(49,88,70,.08)}
.trust-mode input{position:absolute;opacity:0;pointer-events:none}
.trust-mode-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--green-soft);color:#fff}
.trust-mode-mark svg{width:23px;height:23px}
.trust-mode b,.trust-mode small{display:block}
.trust-mode b{font-size:15px;margin-bottom:4px}
.trust-mode small{color:var(--muted);font-size:12px;line-height:1.4}
.trust-identity-note{margin:10px 2px 0;color:var(--muted);font-size:12px;line-height:1.45}
.trust-form input[type="text"],.trust-form select,.trust-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:#fff;padding:13px 14px;color:var(--ink);font:inherit;line-height:1.5;transition:border-color .18s ease,box-shadow .18s ease}
.trust-form textarea{min-height:210px;resize:vertical}
.trust-form input:focus,.trust-form select:focus,.trust-form textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(49,88,70,.11)}
.trust-form .field>small,.trust-field-meta small{display:block;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.45}
.trust-field-meta{display:flex;justify-content:space-between;gap:12px;align-items:start}
.trust-field-meta span{flex:0 0 auto;margin-top:7px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.trust-check{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:#fbf8f1;cursor:pointer}
.trust-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green)}
.trust-check b,.trust-check small{display:block}
.trust-check b{font-size:14px;margin-bottom:3px}
.trust-check small{color:var(--muted);font-size:12px;line-height:1.45}
.trust-consent{background:#f1f5ee;border-color:rgba(49,88,70,.2)}
.trust-submit-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-top:4px}
.trust-submit-copy b,.trust-submit-copy small{display:block}
.trust-submit-copy b{font-size:13px}.trust-submit-copy small{margin-top:3px;color:var(--muted);font-size:11px}
.trust-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding-inline:20px;white-space:nowrap}
.trust-submit svg{width:20px;height:20px}
.trust-status{min-height:20px;margin:0;font-size:13px;font-weight:700}
.trust-status.pending{color:var(--sage-deep)}.trust-status.bad{color:var(--coral)}
.trust-aside{display:grid;gap:16px;position:sticky;top:24px}
.trust-recipient-card,.trust-transparency{border-radius:22px;padding:22px}
.trust-recipient-person{display:flex;gap:13px;align-items:center;margin-top:12px}
.trust-person-avatar{width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:18px!important}
.trust-person-fallback{display:grid;place-items:center;background:var(--green-soft);color:#fff;font-weight:800}
.trust-recipient-person h2{margin:0;font-size:20px}.trust-recipient-person p{margin:3px 0 0;color:var(--muted);font-size:13px}
.trust-recipient-email{display:flex;gap:9px;align-items:center;margin:16px 0 12px;padding:10px 12px;border-radius:12px;background:#f4efe5;color:var(--green);font-size:12px;font-weight:800;overflow-wrap:anywhere}
.trust-recipient-email svg{width:18px;height:18px;flex:0 0 18px}
.trust-recipient-card>p:last-child{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.trust-transparency .eyebrow{margin:0 0 14px;color:var(--coral)}
.trust-transparency ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.trust-transparency li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.trust-transparency li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--green-soft);color:#fff;font-size:12px;font-weight:900}
.trust-transparency li p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.trust-tech{border-radius:18px;padding:0;overflow:hidden}
.trust-tech summary{padding:15px 18px;cursor:pointer;font-size:13px;font-weight:800}
.trust-tech p{margin:0;padding:0 18px 17px;color:var(--muted);font-size:12px;line-height:1.55}
.trust-success{text-align:center;padding:42px 12px 28px}
.trust-success-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:24px;background:var(--green-soft);color:#fff}
.trust-success-icon svg{width:36px;height:36px}
.trust-success h2{margin:5px 0 10px;font-size:28px}.trust-success>p:not(.eyebrow){max-width:560px;margin:0 auto 24px;color:var(--muted);line-height:1.6}
.trust-form-intro{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.trust-form-intro>div:first-child{min-width:0}
.trust-lock-badge{flex:0 0 auto;display:grid;grid-template-columns:26px auto;column-gap:8px;align-items:center;padding:10px 12px;border-radius:15px;background:var(--green-soft);color:#fff}
.trust-lock-badge svg{grid-row:1/3;width:24px;height:24px}.trust-lock-badge small,.trust-lock-badge b{display:block}.trust-lock-badge small{font-size:9px;letter-spacing:.08em;text-transform:uppercase}.trust-lock-badge b{font-size:11px;font-variant-numeric:tabular-nums}
.trust-encrypted-pill{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 11px;border-radius:12px;background:#edf4ea;color:var(--green);font-size:11px;font-weight:850}
.trust-encrypted-pill.waiting{background:#f7efe0;color:#8d6828}.trust-encrypted-pill svg{width:17px;height:17px;flex:0 0 17px}
.trust-key-loading,.trust-key-gate{display:grid;place-items:center;align-content:center;min-height:520px;text-align:center}
.trust-key-loading-mark,.trust-key-gate-icon{display:grid;place-items:center;width:78px;height:78px;margin-bottom:18px;border-radius:25px;background:var(--green-soft);color:#fff}
.trust-key-loading-mark{animation:trustKeyBreathe 1.8s ease-in-out infinite}.trust-key-loading-mark svg,.trust-key-gate-icon svg{width:38px;height:38px}
.trust-key-loading h2,.trust-key-gate h2{max-width:560px;margin:0;font-size:27px}.trust-key-loading p,.trust-key-gate>p:not(.eyebrow){max-width:590px;margin:10px 0 22px;color:var(--muted);line-height:1.6}.trust-key-gate .eyebrow{margin:0 0 8px;color:var(--coral)}
.trust-key-gate .btn,.trust-key-tools .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.trust-key-gate .btn svg,.trust-key-tools .btn svg{width:19px;height:19px}
.trust-key-tools{border:1px solid rgba(49,88,70,.2);border-radius:22px;padding:20px;background:linear-gradient(145deg,#f7faf4,#fffdf8);box-shadow:0 14px 32px rgba(49,70,59,.07)}
.trust-key-tools.waiting{border-color:rgba(229,121,94,.25);background:linear-gradient(145deg,#fff7f1,#fffdf8)}
.trust-key-tools .eyebrow{margin:0 0 6px;color:var(--coral)}.trust-key-tools h2{margin:0 0 8px;font-size:20px}.trust-key-tools>p:not(.eyebrow){margin:0 0 15px;color:var(--muted);font-size:12px;line-height:1.5}
.trust-key-state{display:flex;gap:10px;align-items:center;margin:14px 0;padding:11px;border-radius:14px;background:#edf4ea}.trust-key-state.missing{background:#fbefe6}.trust-key-state>span{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:#fff;color:var(--green)}.trust-key-state svg{width:20px;height:20px}.trust-key-state b,.trust-key-state small{display:block}.trust-key-state b{font-size:12px}.trust-key-state small{margin-top:2px;color:var(--muted);font-size:10px}
.trust-key-actions{display:grid;gap:8px}.trust-key-actions .btn{width:100%;min-height:43px;padding:9px 11px;font-size:12px;white-space:normal}.trust-key-tools details{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.trust-key-tools summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:800}.trust-key-tools details p{margin:9px 0;color:var(--muted);font-size:11px;line-height:1.5}
.trust-key-modal{max-width:600px}.trust-reader-modal{max-width:720px}.trust-key-form{display:grid;gap:17px}.trust-key-form .field label{display:block;margin-bottom:7px;font-size:13px;font-weight:800}.trust-key-form input[type="password"],.trust-key-form input[type="file"]{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;font:inherit}.trust-key-form .field small{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.45}
.trust-key-explain{display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;padding:15px;border-radius:16px;background:#edf4ea}.trust-key-explain>svg{width:28px;height:28px;margin:auto;color:var(--green)}.trust-key-explain b{font-size:14px}.trust-key-explain p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.trust-key-warning{padding:14px 16px;border:1px solid rgba(229,121,94,.35);border-radius:15px;background:#fff1e9}.trust-key-warning b{color:var(--coral)}.trust-key-warning p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.trust-reader{display:grid;gap:17px}.trust-reader-identity{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:15px;border-radius:17px;background:#edf4ea}.trust-reader-identity.named{background:#f7efe4}.trust-reader-identity>span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;color:var(--green)}.trust-reader-identity svg{width:24px;height:24px}.trust-reader-identity small,.trust-reader-identity b,.trust-reader-identity p{display:block}.trust-reader-identity small{color:var(--coral);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.trust-reader-identity b{margin-top:2px;font-size:16px}.trust-reader-identity p{margin:2px 0 0;color:var(--muted);font-size:11px}
.trust-reader-meta{display:grid;grid-template-columns:1.4fr .8fr;gap:10px}.trust-reader-meta>div,.trust-reader-contact{padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}.trust-reader small{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.trust-reader-meta b{font-size:13px}.trust-reader-message{max-height:42vh;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fffdf8;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.65}.trust-reader-contact{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.trust-reader-foot{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#edf4ea;color:var(--green)}.trust-reader-foot svg{width:20px;height:20px;flex:0 0 20px}.trust-reader-foot p{margin:0;font-size:11px;line-height:1.5}
@keyframes trustKeyBreathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}
@media (max-width:900px){
.trust-crisis-head{display:block}.trust-crisis-head>p{max-width:none;margin-top:9px}.trust-crisis-grid{grid-template-columns:1fr}.trust-layout{grid-template-columns:1fr}.trust-aside{position:static;grid-template-columns:1fr 1fr}.trust-tech{grid-column:1/-1}
}
@media (max-width:640px){
.trust-page{padding:0 0 96px}.trust-hero{grid-template-columns:58px 1fr;gap:15px;padding:20px 18px;border-radius:22px}.trust-hero-icon{width:58px;height:58px;border-radius:19px}.trust-hero-icon svg{width:30px;height:30px}.trust-hero h1{font-size:34px}.trust-hero p:last-child{grid-column:1/-1;font-size:14px;margin-top:2px}.trust-crisis{padding:18px 15px;border-radius:21px}.trust-crisis-head h2{font-size:20px}.trust-crisis-card{grid-template-columns:38px minmax(0,1fr);padding:13px}.trust-crisis-icon{width:38px;height:38px}.trust-form-card{padding:21px 17px;border-radius:22px}.trust-form-intro{display:block}.trust-form-intro h2{font-size:24px}.trust-lock-badge{margin-top:14px;width:max-content}.trust-mode-grid{grid-template-columns:1fr}.trust-mode{min-height:82px}.trust-submit-row{align-items:stretch;flex-direction:column}.trust-submit{width:100%;white-space:normal}.trust-submit-copy{text-align:center}.trust-aside{grid-template-columns:1fr}.trust-tech{grid-column:auto}.trust-field-meta{display:block}.trust-field-meta span{display:block;text-align:right}.trust-form textarea{min-height:240px}.trust-key-loading,.trust-key-gate{min-height:420px}.trust-reader-meta{grid-template-columns:1fr}.trust-reader-message{max-height:45vh}.trust-key-modal .modal-foot,.trust-reader-modal .modal-foot{flex-direction:column}.trust-key-modal .modal-foot .btn,.trust-reader-modal .modal-foot .btn{width:100%;margin:0}
}
@media (prefers-reduced-motion:reduce){.trust-mode{transition:none}.trust-mode:hover{transform:none}.trust-key-loading-mark{animation:none}}
.help-trust-note p{margin:7px 0 11px;line-height:1.55}.help-safety-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 22px}.help-safety-grid article{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fffdf8}.help-safety-grid b{display:block}.help-safety-grid p{min-height:48px;margin:6px 0 11px;color:var(--muted);font-size:12px;line-height:1.45}.help-safety-grid a{display:inline-block;margin:0 6px 4px 0;color:var(--green);font-size:12px;font-weight:850}.help-safety-grid article:first-child{border-color:rgba(229,121,94,.28);background:#fff8f3}
@media (max-width:720px){.help-safety-grid{grid-template-columns:1fr}.help-safety-grid p{min-height:0}}
.decision-registry-launcher{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:20px 22px;margin:0 0 18px;border:1px solid rgba(64,91,78,.16);border-radius:22px;background:linear-gradient(135deg,rgba(207,220,201,.35),rgba(255,252,247,.96));box-shadow:0 12px 30px rgba(46,70,59,.06)}
.decision-registry-launcher-icon,.decision-form-icon,.decision-detail-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--sage);color:var(--green)}
.decision-registry-launcher-icon svg,.decision-form-icon svg,.decision-detail-icon svg{width:28px;height:28px}
.decision-registry-launcher h2{margin:3px 0 4px;font-size:23px}.decision-registry-launcher p{margin:0;color:var(--muted);font-size:14px}
.decision-registry-stats{display:flex;gap:8px}.decision-registry-stats span{min-width:86px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.68);color:var(--muted);font-size:12px}.decision-registry-stats b{display:block;color:var(--ink);font-size:19px}.decision-registry-stats .is-warning b{color:var(--coral-deep)}
.decision-registry-actions{display:flex;gap:8px;align-items:center}.decision-registry-actions .btn{white-space:nowrap}
#modal-root .modal.decision-registry-modal{width:min(1040px,calc(100vw - 36px));max-width:1040px;max-height:min(900px,calc(100dvh - 36px))}
.decision-registry-modal .modal-body{padding:0;background:var(--cream)}.decision-registry-loading{padding:70px;text-align:center;color:var(--muted)}
.decision-registry{min-height:520px}.decision-registry-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 28px 22px;background:linear-gradient(120deg,var(--paper),rgba(207,220,201,.35));border-bottom:1px solid var(--line)}
.decision-registry-hero h2{font-size:30px;margin:4px 0 5px}.decision-registry-hero p{max-width:650px;margin:0;color:var(--muted);line-height:1.45}
.decision-registry-filters{display:flex;gap:8px;padding:15px 28px 5px;overflow-x:auto}.decision-registry-filters button{display:inline-flex;gap:8px;align-items:center;min-height:38px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--green);font:inherit;font-weight:750;cursor:pointer}.decision-registry-filters button.on{background:var(--green);border-color:var(--green);color:#fff}.decision-registry-filters b{font-size:11px;min-width:20px;padding:2px 6px;border-radius:999px;background:rgba(127,145,134,.14)}
.decision-registry-list{display:grid;gap:10px;padding:18px 28px 28px}.decision-registry-empty{margin:18px;padding:34px;border:1px dashed var(--line);border-radius:18px;text-align:center;color:var(--muted);background:rgba(255,255,255,.55)}
.decision-card{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.decision-card:hover{transform:translateY(-1px);border-color:rgba(64,91,78,.34);box-shadow:0 10px 25px rgba(46,70,59,.07)}.decision-card.is-focused{animation:decisionFocus 1.4s ease}.decision-card.status-waiting{border-left:4px solid var(--amber)}.decision-card.status-done{opacity:.78}
@keyframes decisionFocus{0%,100%{box-shadow:none}35%{box-shadow:0 0 0 5px rgba(224,122,95,.18)}}
.decision-card-main{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:13px;align-items:center;width:100%;padding:16px 17px;border:0;background:transparent;text-align:left;color:inherit;font:inherit;cursor:pointer}.decision-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sage);color:var(--green)}.decision-card-icon svg{width:22px;height:22px}.decision-card-copy{min-width:0;display:grid;gap:5px}.decision-card-copy>b{font-size:17px;line-height:1.25}.decision-card-top,.decision-card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.decision-card-top small{color:var(--muted);font-weight:750}.decision-status{display:inline-flex;width:max-content;padding:3px 8px;border-radius:999px;background:var(--sage);color:var(--green);font-size:11px;font-style:normal;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.decision-card-meta{font-size:12px;color:var(--muted)}.decision-card-meta span+span:before{content:"·";margin-right:8px}.decision-due.overdue{color:var(--coral-deep);font-weight:800}.decision-card-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);line-height:1.45;font-size:14px}.decision-card-links{font-size:12px;color:var(--sage-deep);font-weight:750}.decision-card-cue{font-size:25px;color:var(--muted)}
.decision-card.is-compact{border-radius:14px}.decision-card.is-compact .decision-card-main{grid-template-columns:36px minmax(0,1fr) 16px;padding:12px}.decision-card.is-compact .decision-card-icon{width:36px;height:36px;border-radius:11px}.decision-card.is-compact .decision-card-icon svg{width:18px;height:18px}.decision-card.is-compact .decision-card-copy>b{font-size:14px}
.linked-decisions-card{padding:18px!important}.linked-decisions-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.linked-decisions-head h3{margin:3px 0 4px}.linked-decisions-head p{margin:0;color:var(--muted);font-size:13px}.linked-decisions-list{display:grid;gap:8px;margin-top:14px}.decision-legacy-note{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:14px;padding:11px 13px;border-radius:13px;background:rgba(235,181,80,.12);border:1px solid rgba(190,143,48,.2)}.decision-legacy-note div{display:grid;gap:2px}.decision-legacy-note span{font-size:12px;color:var(--muted)}
#modal-root .modal.decision-form-modal,#modal-root .modal.decision-detail-modal{width:min(880px,calc(100vw - 36px));max-width:880px;max-height:min(930px,calc(100dvh - 30px))}.decision-form-modal .modal-body,.decision-detail-modal .modal-body{padding:0;background:var(--paper)}
.decision-form{padding:24px 26px 28px}.decision-form-intro{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:22px}.decision-form-intro h2{margin:3px 0 4px;font-size:27px}.decision-form-intro p{margin:0;color:var(--muted)}.decision-form .field{margin:0 0 15px}.decision-form .field label{display:block;margin-bottom:6px;color:var(--green);font-size:12px;font-weight:820}.decision-form .field label span{font-weight:600;color:var(--muted)}.decision-form input,.decision-form textarea,.decision-form select{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--ink);font:inherit}.decision-form textarea{resize:vertical;line-height:1.48}.decision-title-field input{font-size:18px;font-weight:760}.decision-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.decision-form-grid.three{grid-template-columns:.8fr 1.25fr .8fr}
.decision-form-more{margin:8px 0 14px;border:1px solid var(--line);border-radius:16px;background:rgba(246,241,231,.48);overflow:hidden}.decision-form-more summary{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;color:var(--green);font-weight:800}.decision-form-more summary small{color:var(--muted);font-weight:600}.decision-form-more[open] summary{border-bottom:1px solid var(--line)}.decision-link-group{padding:14px 16px 0}.decision-link-group h3{margin:0 0 8px;font-size:14px}.decision-form-more>.decision-form-grid{padding:14px 16px 0}.decision-form-more>.decision-form-grid:last-child{padding-bottom:2px}.decision-form-help{padding:13px 16px 0;margin:0;color:var(--muted);font-size:13px}.decision-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-bottom:12px}.decision-form-more>.decision-check-grid{padding:12px 16px 16px}.decision-check{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:13px;cursor:pointer}.decision-check:has(input:checked){border-color:rgba(64,91,78,.45);background:rgba(207,220,201,.28)}.decision-check input{width:16px;height:16px;flex:0 0 16px;margin:1px 0 0;accent-color:var(--coral)}.decision-check span{min-width:0;overflow:hidden;text-overflow:ellipsis}.decision-form-actions{position:sticky;bottom:-28px;display:flex;justify-content:flex-end;gap:9px;margin:20px -26px -28px;padding:14px 26px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:rgba(255,252,247,.96);backdrop-filter:blur(9px);z-index:3}
.decision-detail{padding:26px}.decision-detail-head{display:grid;grid-template-columns:58px minmax(0,1fr);gap:17px;align-items:center}.decision-detail-head h2{margin:6px 0 5px;font-size:29px}.decision-detail-head p{margin:0;color:var(--muted)}.decision-detail-text{margin:22px 0;padding:18px;border-radius:17px;background:var(--cream);border:1px solid var(--line);white-space:pre-wrap;line-height:1.58}.decision-detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 16px}.decision-detail-facts div{padding:11px 12px;border:1px solid var(--line);border-radius:13px}.decision-detail-facts span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.decision-detail-facts b{display:block;margin-top:3px}.decision-status-note{display:grid;gap:3px;padding:12px 14px;margin-bottom:16px;border-radius:13px;background:rgba(235,181,80,.12)}.decision-status-note span{color:var(--muted);font-size:13px}.decision-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.decision-detail-grid section{padding:15px;border:1px solid var(--line);border-radius:16px}.decision-detail-grid h3{margin:0 0 10px;font-size:15px}.decision-link-row{display:grid;grid-template-columns:24px minmax(0,1fr) 14px;gap:8px;align-items:center;width:100%;padding:9px 7px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--green);text-align:left;text-decoration:none;font:inherit;cursor:pointer}.decision-link-row span svg{width:17px;height:17px}.decision-link-row b{min-width:0;font-size:13px}.decision-link-row i{font-style:normal}.decision-detail-grid .small-btn{margin-top:12px}.decision-detail-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
@media(max-width:850px){.decision-registry-launcher{grid-template-columns:50px minmax(0,1fr)}.decision-registry-launcher-icon{width:50px;height:50px}.decision-registry-stats,.decision-registry-actions{grid-column:1/-1}.decision-registry-actions{justify-content:flex-end}.decision-form-grid.three{grid-template-columns:1fr 1fr}.decision-form-grid.three .field:nth-child(2){grid-column:1/-1;grid-row:2}.decision-detail-grid{grid-template-columns:1fr}}
@media(max-width:620px){.decision-registry-launcher{padding:17px 15px;gap:12px;border-radius:19px}.decision-registry-launcher h2{font-size:20px}.decision-registry-stats{display:grid;grid-template-columns:1fr 1fr}.decision-registry-stats span{min-width:0}.decision-registry-actions{display:grid;grid-template-columns:1fr 1fr}.decision-registry-actions .btn{width:100%;padding-left:8px;padding-right:8px}.decision-registry-hero{display:grid;padding:20px 17px}.decision-registry-hero h2{font-size:25px}.decision-registry-hero .btn{width:100%}.decision-registry-filters{padding:12px 15px 3px}.decision-registry-list{padding:14px 15px 20px}.decision-card-main{grid-template-columns:38px minmax(0,1fr) 13px;padding:13px 11px;gap:10px}.decision-card-icon{width:38px;height:38px}.decision-card-copy>b{font-size:15px}.decision-card-meta span+span:before{display:none}.decision-card-meta{display:grid;gap:2px}.linked-decisions-head,.decision-legacy-note{display:grid}.linked-decisions-head .small-btn,.decision-legacy-note .mini-action{width:100%}.decision-form,.decision-detail{padding:18px 15px 22px}.decision-form-intro,.decision-detail-head{grid-template-columns:46px minmax(0,1fr);gap:12px}.decision-form-icon,.decision-detail-icon{width:46px;height:46px;border-radius:14px}.decision-form-intro h2,.decision-detail-head h2{font-size:23px}.decision-form-grid,.decision-form-grid.three{grid-template-columns:1fr}.decision-form-grid.three .field:nth-child(2){grid-column:auto;grid-row:auto}.decision-check-grid{grid-template-columns:1fr}.decision-form-more summary{display:grid}.decision-form-actions{bottom:-22px;margin:18px -15px -22px;padding:12px 15px calc(12px + env(safe-area-inset-bottom,0px))}.decision-form-actions .btn{flex:1;min-width:0}.decision-detail-facts{grid-template-columns:1fr}.decision-detail-actions{display:grid;grid-template-columns:1fr 1fr}.decision-detail-actions .btn{width:100%;min-width:0}#modal-root .modal.decision-registry-modal,#modal-root .modal.decision-form-modal,#modal-root .modal.decision-detail-modal{width:100%;max-width:none;height:min(92dvh,900px);max-height:calc(100dvh - env(safe-area-inset-top,0px));margin:0;border-radius:22px 22px 0 0}}
.obligation-book-launcher{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:20px 22px;margin:0 0 18px;border:1px solid rgba(190,143,48,.2);border-radius:22px;background:linear-gradient(135deg,rgba(235,181,80,.13),rgba(255,252,247,.97));box-shadow:0 12px 30px rgba(46,70,59,.05)}
.obligation-book-launcher-icon,.obligation-form-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(235,181,80,.2);color:#8d6725}.obligation-book-launcher-icon svg,.obligation-form-icon svg{width:28px;height:28px}
.obligation-book-launcher h2{margin:3px 0 4px;font-size:23px}.obligation-book-launcher p{margin:0;color:var(--muted);font-size:14px}.obligation-book-stats{display:flex;gap:8px}.obligation-book-stats span{min-width:86px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.72);color:var(--muted);font-size:12px}.obligation-book-stats b{display:block;color:var(--ink);font-size:19px}.obligation-book-stats .is-warning b{color:var(--coral-deep)}.obligation-book-actions{display:flex;gap:8px;align-items:center}.obligation-book-actions .btn{white-space:nowrap}
#modal-root .modal.obligation-book-modal{width:min(1060px,calc(100vw - 36px));max-width:1060px;max-height:min(920px,calc(100dvh - 36px))}.obligation-book-modal .modal-body{padding:0;background:var(--cream)}.obligation-book-loading{padding:70px;text-align:center;color:var(--muted)}.obligation-book{min-height:540px}.obligation-book-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 28px 22px;background:linear-gradient(120deg,var(--paper),rgba(235,181,80,.14));border-bottom:1px solid var(--line)}.obligation-book-hero h2{margin:4px 0 5px;font-size:30px}.obligation-book-hero p{max-width:680px;margin:0;color:var(--muted);line-height:1.45}
.obligation-legal-note{display:flex;gap:9px;align-items:baseline;margin:14px 28px 0;padding:10px 13px;border-radius:12px;background:rgba(207,220,201,.25);color:var(--muted);font-size:12px}.obligation-legal-note b{color:var(--green);white-space:nowrap}.obligation-book-filters{display:flex;gap:8px;padding:14px 28px 6px;overflow-x:auto}.obligation-book-filters button{display:inline-flex;gap:8px;align-items:center;min-height:38px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--green);font:inherit;font-weight:750;cursor:pointer}.obligation-book-filters button.on{background:var(--green);border-color:var(--green);color:#fff}.obligation-book-filters b{min-width:20px;padding:2px 6px;border-radius:999px;background:rgba(127,145,134,.14);font-size:11px}
.obligation-book-list{display:grid;gap:10px;padding:18px 28px 28px}.obligation-book-empty{margin:18px 28px;padding:34px;border:1px dashed var(--line);border-radius:18px;text-align:center;color:var(--muted);background:rgba(255,255,255,.55)}.obligation-calendar-group{padding:18px 28px 0}.obligation-calendar-group:last-child{padding-bottom:28px}.obligation-calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.obligation-calendar-head h3{margin:0 0 2px;font-size:18px}.obligation-calendar-head p{margin:0;color:var(--muted);font-size:12px}.obligation-calendar-head>b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:rgba(127,145,134,.12);color:var(--green)}.group-overdue .obligation-calendar-head h3,.group-overdue .obligation-calendar-head>b{color:var(--coral-deep)}.obligation-calendar-list{display:grid;gap:9px}
.obligation-card{min-width:0;border:1px solid var(--line);border-radius:17px;background:var(--paper);box-shadow:0 8px 22px rgba(46,70,59,.04);overflow:hidden}.obligation-card.is-overdue{border-color:rgba(224,108,79,.42)}.obligation-card-main{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:13px;align-items:center;width:100%;padding:14px 16px;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}.obligation-card-main:hover{background:rgba(235,181,80,.055)}.obligation-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(235,181,80,.16);color:#8d6725}.obligation-card-icon svg{width:22px;height:22px}.obligation-card-copy{display:grid;gap:4px;min-width:0}.obligation-card-copy>b{overflow-wrap:anywhere;font-size:16px}.obligation-card-top{display:flex;align-items:center;gap:7px}.obligation-card-top em,.obligation-card-top small{font-style:normal;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.obligation-card-top em{color:var(--sage-deep)}.obligation-card-top small{padding:3px 6px;border-radius:999px;background:rgba(127,145,134,.11);color:var(--muted)}.obligation-card-top .risk-high,.obligation-card-top .risk-critical{background:rgba(224,108,79,.1);color:var(--coral-deep)}.obligation-card-meta{display:flex;flex-wrap:wrap;gap:4px 13px;color:var(--muted);font-size:12px}.obligation-card-meta .bad{color:var(--coral-deep);font-weight:800}.obligation-card-summary{margin-top:2px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.obligation-card-cue{color:var(--muted);font-size:24px}.obligation-card.is-compact .obligation-card-summary{display:none}.linked-obligations-card{margin-top:14px;padding:18px!important;border-color:rgba(190,143,48,.22)!important;background:linear-gradient(145deg,var(--paper),rgba(235,181,80,.07))!important}
#modal-root .modal.obligation-form-modal,#modal-root .modal.obligation-detail-modal{width:min(900px,calc(100vw - 36px));max-width:900px;max-height:min(940px,calc(100dvh - 30px))}.obligation-form-modal .modal-body,.obligation-detail-modal .modal-body{padding:0;background:var(--paper)}.obligation-template-picker{display:grid;grid-template-columns:auto minmax(220px,1fr);gap:4px 12px;align-items:center;margin:0 0 18px;padding:13px 15px;border:1px solid rgba(190,143,48,.22);border-radius:15px;background:rgba(235,181,80,.08)}.obligation-template-picker label{font-size:13px;font-weight:820;color:var(--green)}.obligation-template-picker select{grid-row:1/3;grid-column:2}.obligation-template-picker small{color:var(--muted);font-size:11px}.obligation-form-section{margin:10px 0 15px;padding:16px 16px 1px;border:1px solid var(--line);border-radius:17px;background:rgba(246,241,231,.3)}.obligation-form-section-head{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 14px}.obligation-form-section-head>span{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:rgba(235,181,80,.2);color:#8d6725;font-weight:900}.obligation-form-section-head h3{margin:1px 0 2px;font-size:16px}.obligation-form-section-head p{margin:0;color:var(--muted);font-size:12px}
.obligation-detail-deadline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;margin:16px 0;padding:15px 17px;border:1px solid rgba(190,143,48,.22);border-radius:16px;background:rgba(235,181,80,.09)}.obligation-detail-deadline span{grid-row:1/3;color:var(--muted);font-size:11px;font-weight:820;text-transform:uppercase;letter-spacing:.08em}.obligation-detail-deadline b{font-size:20px}.obligation-detail-deadline small{color:var(--muted)}.obligation-detail-deadline.is-overdue{border-color:rgba(224,108,79,.38);background:rgba(224,108,79,.08)}.obligation-detail-deadline.is-overdue b{color:var(--coral-deep)}.obligation-detail-facts>div{display:grid}.obligation-detail-facts small{margin-top:3px;color:var(--muted);font-size:11px}.obligation-detail-facts .risk-high,.obligation-detail-facts .risk-critical{color:var(--coral-deep)}.obligation-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.obligation-detail-grid>section{min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.65)}.obligation-detail-grid h3{margin:0 0 9px}.obligation-detail-grid p{margin:0 0 11px;color:var(--muted);line-height:1.48}.obligation-last-proof{display:grid;gap:2px;margin:10px 0;padding:10px 11px;border-radius:12px;background:rgba(207,220,201,.24)}.obligation-last-proof span{color:var(--muted);font-size:11px}.obligation-detail-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;flex-wrap:wrap}.btn.btn-soft{border:1px solid rgba(190,143,48,.28);background:rgba(235,181,80,.14);color:var(--green)}
#modal-root .modal.obligation-cycle-modal{width:min(720px,calc(100vw - 36px));max-width:720px;max-height:min(850px,calc(100dvh - 30px))}.obligation-cycle-modal .modal-body{padding:0;background:var(--paper)}.obligation-cycle-form{padding:24px 26px 28px}.obligation-cycle-form .field{margin:0 0 14px}.obligation-cycle-form label{display:block;margin-bottom:6px;color:var(--green);font-size:12px;font-weight:820}.obligation-cycle-form input,.obligation-cycle-form select{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit}.obligation-cycle-intro{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:18px}.obligation-cycle-intro>span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(235,181,80,.18);color:#8d6725}.obligation-cycle-intro svg{width:26px;height:26px}.obligation-cycle-intro h2{margin:3px 0 3px}.obligation-cycle-intro p{margin:0;color:var(--muted)}.obligation-cycle-current{display:grid;gap:3px;margin-bottom:15px;padding:13px 15px;border-radius:14px;background:var(--cream)}.obligation-cycle-current span,.obligation-cycle-current small{color:var(--muted);font-size:11px}.obligation-cycle-next{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:4px 0 18px;padding:14px 15px;border:1px solid rgba(190,143,48,.24);border-radius:15px;background:rgba(235,181,80,.09)}.obligation-cycle-next div{display:grid;gap:2px}.obligation-cycle-next span{color:var(--muted);font-size:11px}.obligation-cycle-next input{max-width:180px}.obligation-cycle-next.is-final{display:grid}.completion-obligation-action{display:grid;grid-template-columns:38px minmax(0,1fr);gap:1px 10px;align-items:center;width:100%;margin:12px 0 0;padding:10px 12px;border:1px solid rgba(190,143,48,.24);border-radius:14px;background:rgba(235,181,80,.09);color:var(--green);text-align:left;font:inherit;cursor:pointer}.completion-obligation-action>span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(235,181,80,.18);color:#8d6725}.completion-obligation-action svg{width:20px;height:20px}.completion-obligation-action small{color:var(--muted)}
@media(max-width:850px){.obligation-book-launcher{grid-template-columns:50px minmax(0,1fr)}.obligation-book-launcher-icon{width:50px;height:50px}.obligation-book-stats,.obligation-book-actions{grid-column:1/-1}.obligation-book-actions{justify-content:flex-end}.obligation-detail-grid{grid-template-columns:1fr}}
@media(max-width:620px){.obligation-book-launcher{padding:17px 15px;gap:12px;border-radius:19px}.obligation-book-launcher h2{font-size:20px}.obligation-book-stats{display:grid;grid-template-columns:1fr 1fr}.obligation-book-stats span{min-width:0}.obligation-book-actions{display:grid;grid-template-columns:1fr 1fr}.obligation-book-actions .btn{width:100%;min-width:0;padding-left:8px;padding-right:8px}.obligation-book-hero{display:grid;padding:20px 17px}.obligation-book-hero h2{font-size:25px}.obligation-book-hero .btn{width:100%}.obligation-legal-note{display:grid;margin:12px 15px 0}.obligation-legal-note b{white-space:normal}.obligation-book-filters{padding:12px 15px 3px}.obligation-calendar-group{padding:15px 15px 0}.obligation-book-list{padding:14px 15px 20px}.obligation-card-main{grid-template-columns:38px minmax(0,1fr) 13px;padding:13px 11px;gap:10px}.obligation-card-icon{width:38px;height:38px}.obligation-card-top{align-items:flex-start;flex-wrap:wrap}.obligation-card-meta{display:grid;gap:2px}.obligation-card-summary{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.obligation-template-picker{grid-template-columns:1fr}.obligation-template-picker select{grid-row:auto;grid-column:auto}.obligation-form-section{padding:14px 12px 1px}.obligation-detail-deadline{grid-template-columns:1fr}.obligation-detail-deadline span{grid-row:auto}.obligation-detail-actions{display:grid;grid-template-columns:1fr 1fr}.obligation-detail-actions .btn{width:100%;min-width:0}.obligation-cycle-form{padding:18px 15px 22px}.obligation-cycle-intro{grid-template-columns:44px minmax(0,1fr)}.obligation-cycle-intro>span{width:44px;height:44px}.obligation-cycle-next{display:grid}.obligation-cycle-next input{max-width:none}#modal-root .modal.obligation-book-modal,#modal-root .modal.obligation-form-modal,#modal-root .modal.obligation-detail-modal,#modal-root .modal.obligation-cycle-modal{width:100%;max-width:none;height:min(92dvh,900px);max-height:calc(100dvh - env(safe-area-inset-top,0px));margin:0;border-radius:22px 22px 0 0}}
.modal.assurance-hub-modal,
.modal.assurance-form-modal,
.modal.assurance-detail-modal {
width: min(1120px, calc(100vw - 44px));
max-width: 1120px;
}
.assurance-hub-modal .modal-body,
.assurance-form-modal .modal-body,
.assurance-detail-modal .modal-body,
.assurance-review-modal .modal-body,
.assurance-chooser-modal .modal-body { padding: 0; overflow-x: hidden; }
.assurance-hub { padding: 24px 26px 34px; min-width: 0; }
.assurance-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
padding: 8px 2px 24px; border-bottom: 1px solid var(--line);
}
.assurance-hero > div { min-width: 0; max-width: 700px; }
.assurance-hero h2 { margin: 4px 0 8px; color: var(--ink); font-size: clamp(26px, 3vw, 40px); line-height: 1.05; }
.assurance-hero p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.assurance-hero .btn { flex: 0 0 auto; }
.assurance-principles {
display: grid; grid-template-columns: repeat(3, minmax(0, auto)) minmax(260px, 1fr);
align-items: center; gap: 10px; margin: 18px 0;
padding: 13px 15px; border: 1px solid rgba(93, 122, 105, .18); border-radius: 16px;
background: rgba(236, 241, 234, .62);
}
.assurance-principles > span { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; color: var(--muted); font-size: 12px; }
.assurance-principles > span b { color: var(--green); font-size: 20px; }
.assurance-principles p { margin: 0; padding-left: 12px; border-left: 1px solid rgba(93, 122, 105, .18); color: var(--muted); font-size: 12px; line-height: 1.45; }
.assurance-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.assurance-type-tile { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.78); overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.assurance-type-tile:hover { transform: translateY(-2px); border-color: rgba(231, 119, 87, .32); box-shadow: 0 10px 24px rgba(56, 85, 74, .08); }
.assurance-type-tile > button:first-child { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; padding: 15px 14px 14px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.assurance-type-icon, .assurance-card-icon, .assurance-form-icon {
display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
border-radius: 13px; background: var(--green-soft); color: var(--green);
}
.assurance-type-icon svg, .assurance-card-icon svg, .assurance-form-icon svg { width: 23px; height: 23px; }
.type-privacy .assurance-type-icon, .assurance-form-icon.type-privacy { background: #e8f0eb; color: #476b5b; }
.type-security .assurance-type-icon, .assurance-form-icon.type-security { background: #edece4; color: #5d6d63; }
.type-risk .assurance-type-icon, .assurance-form-icon.type-risk { background: #fff0e9; color: var(--coral); }
.type-handover .assurance-type-icon, .assurance-form-icon.type-handover { background: #f5eddf; color: #9b7037; }
.type-mandate .assurance-type-icon, .assurance-form-icon.type-mandate { background: #edf0e5; color: #65764d; }
.assurance-type-tile span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; margin-top: 12px; }
.assurance-type-tile em { color: var(--coral); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.assurance-type-tile b { margin-top: 3px; color: var(--ink); font-size: 16px; line-height: 1.2; }
.assurance-type-tile small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.assurance-type-tile i { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 12px; font-style: normal; }
.assurance-type-tile i strong { color: var(--green); font-size: 20px; }
.assurance-type-tile i u { color: var(--muted); font-size: 9px; text-decoration: none; }
.assurance-tile-add { position: absolute; top: 11px; right: 11px; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--green); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.assurance-tile-add:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.assurance-filter-row { display: flex; gap: 7px; min-width: 0; padding: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.assurance-filter-row::-webkit-scrollbar { display: none; }
.assurance-filter-row button { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.assurance-filter-row button b { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; }
.assurance-filter-row button.on { background: var(--green); border-color: var(--green); color: #fff; }
.assurance-filter-row button.on b { background: rgba(255,255,255,.18); color: #fff; }
.assurance-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; min-width: 0; }
.assurance-card { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.84); overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.assurance-card:hover { border-color: rgba(56, 85, 74, .32); box-shadow: 0 10px 22px rgba(56, 85, 74, .07); transform: translateY(-1px); }
.assurance-card.is-overdue { border-color: rgba(231, 119, 87, .42); }
.assurance-card-main { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; padding: 15px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.assurance-card-icon { width: 38px; height: 38px; border-radius: 12px; }
.assurance-card-icon svg { width: 20px; height: 20px; }
.assurance-card-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.assurance-card-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.assurance-card-kicker em { color: var(--coral); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.assurance-card-kicker small { padding: 3px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 750; }
.assurance-card-copy > b { color: var(--ink); font-size: 15px; line-height: 1.28; overflow-wrap: anywhere; }
.assurance-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.assurance-card-meta span + span { position: relative; }
.assurance-card-summary { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.assurance-card-cue { flex: 0 0 auto; align-self: center; color: var(--muted); font-size: 22px; }
.assurance-card.is-compact .assurance-card-main { padding: 12px; }
.assurance-card.is-compact .assurance-card-summary { display: none; }
.assurance-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; padding: 42px 20px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.assurance-empty b { color: var(--ink); font-size: 18px; }
.assurance-empty span { margin-top: 4px; font-size: 13px; }
.assurance-loading { padding: 54px; color: var(--muted); text-align: center; }
.assurance-type-chooser { padding: 26px; }
.assurance-choice-intro { max-width: 650px; }
.assurance-choice-intro h2 { margin: 5px 0 8px; color: var(--ink); font-size: 30px; }
.assurance-choice-intro p { margin: 0; color: var(--muted); line-height: 1.5; }
.assurance-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.assurance-choice-grid button { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.78); color: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.assurance-choice-grid button:hover { transform: translateY(-1px); border-color: rgba(231,119,87,.42); }
.assurance-choice-grid button span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--green-soft); color: var(--green); }
.assurance-choice-grid button span svg { width: 22px; height: 22px; }
.assurance-choice-grid button b { min-width: 0; color: var(--ink); font-size: 15px; }
.assurance-choice-grid button small { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.assurance-template-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: -6px 0 20px; padding: 12px 13px; border: 1px solid rgba(93,122,105,.16); border-radius: 14px; background: rgba(236,241,234,.5); }
.assurance-template-shortcuts > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.assurance-template-shortcuts button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--green); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.assurance-template-shortcuts button:hover { border-color: var(--coral); color: var(--coral); }
.assurance-form { padding: 24px 26px 32px; min-width: 0; }
.assurance-form-intro { margin-bottom: 22px; }
.assurance-form-icon { width: 50px; height: 50px; border-radius: 16px; }
.assurance-form-icon svg { width: 27px; height: 27px; }
.assurance-form textarea[name="sourceLabel"] { min-height: 70px; }
.assurance-detail { padding: 25px 26px 32px; min-width: 0; }
.assurance-detail-source { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; padding: 14px 16px; border: 1px solid rgba(93,122,105,.18); border-radius: 15px; background: rgba(236,241,234,.52); }
.assurance-detail-source span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.assurance-detail-source b { color: var(--ink); font-size: 13px; line-height: 1.5; }
.assurance-detail-facts small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }
.assurance-review-form { padding: 25px 26px 30px; min-width: 0; }
.linked-assurance-card { margin-top: 16px; }
.linked-assurance-card .linked-decisions-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
@media (max-width: 900px) {
.assurance-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assurance-type-tile:last-child { grid-column: auto; }
.assurance-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.assurance-principles p { grid-column: 1 / -1; padding: 9px 0 0; border-left: 0; border-top: 1px solid rgba(93,122,105,.18); }
}
@media (max-width: 620px) {
.modal.assurance-hub-modal,
.modal.assurance-form-modal,
.modal.assurance-detail-modal,
.modal.assurance-review-modal,
.modal.assurance-chooser-modal { width: 100%; max-width: 100%; }
.assurance-hub { padding: 18px 15px 28px; }
.assurance-hero { align-items: stretch; flex-direction: column; gap: 15px; padding-bottom: 18px; }
.assurance-hero h2 { font-size: 29px; }
.assurance-hero .btn { width: 100%; }
.assurance-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 10px; }
.assurance-principles > span { flex-direction: column; align-items: center; gap: 0; min-width: 0; white-space: normal; text-align: center; }
.assurance-principles > span b { font-size: 18px; }
.assurance-principles > span { font-size: 9px; }
.assurance-principles p { font-size: 10px; }
.assurance-type-grid, .assurance-list, .assurance-choice-grid, .linked-assurance-card .linked-decisions-list { grid-template-columns: minmax(0, 1fr); }
.assurance-type-tile:last-child { grid-column: auto; }
.assurance-type-tile > button:first-child { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; padding: 13px; }
.assurance-type-tile span:nth-child(2) { margin: 0; }
.assurance-type-tile small { margin-top: 4px; }
.assurance-type-tile i { grid-column: 2; padding-top: 5px; }
.assurance-tile-add { top: 10px; right: 10px; }
.assurance-card-main { padding: 13px 12px; }
.assurance-type-chooser, .assurance-form, .assurance-detail, .assurance-review-form { padding: 20px 15px 28px; }
.assurance-choice-intro h2 { font-size: 26px; }
.assurance-choice-grid button { grid-template-columns: 38px minmax(0,1fr); padding: 13px; }
.assurance-choice-grid button span { width: 38px; height: 38px; }
.assurance-detail-facts { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
.assurance-type-tile, .assurance-card, .assurance-choice-grid button { transition: none; }
}
.decision-registry-hero-actions,
.linked-decisions-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
}
.decision-form-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: -7px 0 18px;
padding: 10px 13px;
border: 1px solid rgba(93,122,105,.18);
border-radius: 13px;
background: rgba(236,241,234,.52);
}
.decision-form-context span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.decision-form-context b { min-width: 0; color: var(--green); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.decision-core-fields,
.role-core-fields { display: grid; gap: 0; padding: 17px 17px 2px; margin-bottom: 17px; border: 1px solid rgba(64,91,78,.17); border-radius: 17px; background: rgba(236,241,234,.34); }
.decision-more-content { padding: 15px 16px 3px; }
.decision-more-content > .decision-link-group { padding: 5px 0 0; }
.decision-more-content > .decision-form-grid { padding: 0; }
.decision-field-note { margin: 7px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
#modal-root .modal.decision-followup-modal { width: min(760px, calc(100vw - 36px)); max-width: 760px; }
.decision-followup-modal .modal-body { padding: 0; background: var(--paper); }
.decision-followup,
.decision-task-picker { padding: 27px 28px 30px; }
.decision-followup { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 15px 17px; }
.decision-followup-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--sage); color: var(--green); }
.decision-followup-icon svg { width: 28px; height: 28px; }
.decision-followup-copy h2,
.decision-task-picker h2 { margin: 4px 0 5px; font-size: 27px; }
.decision-followup-copy p,
.decision-task-picker > p { margin: 0; color: var(--muted); line-height: 1.5; }
.decision-followup-summary { grid-column: 1/-1; display: grid; gap: 3px; padding: 13px 15px; border-radius: 14px; background: var(--cream); }
.decision-followup-summary span { color: var(--muted); font-size: 12px; }
.decision-followup-options { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.decision-followup-options button { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 2px 9px; align-items: center; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.decision-followup-options button:hover { border-color: rgba(64,91,78,.4); background: rgba(236,241,234,.36); }
.decision-followup-options button > span { grid-row: 1/3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--green-soft); color: var(--green); }
.decision-followup-options svg { width: 18px; height: 18px; }
.decision-followup-options b { min-width: 0; font-size: 13px; line-height: 1.25; }
.decision-followup-options small { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.decision-task-picker { display: grid; gap: 14px; }
.decision-task-picker .field { margin: 2px 0 0; }
.decision-task-picker-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 13px; }
.decision-history { margin-top: 17px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.64); }
.decision-history h3 { margin: 3px 0 12px; }
.decision-history ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.decision-history li { display: grid; grid-template-columns: 11px minmax(0,1fr); gap: 9px; align-items: start; }
.decision-history-dot { width: 9px; height: 9px; margin-top: 4px; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px rgba(224,122,95,.35); }
.decision-history li div { display: grid; gap: 2px; }
.decision-history small { color: var(--muted); font-size: 11px; }
.decision-detail-action-group { display: flex; justify-content: flex-end; gap: 9px; }
.meeting-ai-result { display: grid; gap: 8px; }
.meeting-ai-result p { margin: 0; line-height: 1.45; }
.meeting-ai-result h4 { margin: 5px 0 0; color: var(--green); font-size: 13px; }
.meeting-ai-result-note { color: var(--green); font-weight: 750; }
.meeting-ai-decision-list { display: grid; gap: 6px; margin-top: 2px; }
.meeting-ai-decision-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 11px; border: 1px solid rgba(224,122,95,.25); border-radius: 11px; background: rgba(255,255,255,.72); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.meeting-ai-decision-suggestion:hover { border-color: var(--coral); background: #fff; }
.meeting-ai-decision-suggestion b { min-width: 0; font-size: 12px; line-height: 1.4; }
.meeting-ai-decision-suggestion span { flex: 0 0 auto; color: var(--coral-deep); font-size: 11px; font-weight: 800; white-space: nowrap; }
.meeting-ai-no-decision { padding: 9px 11px; border-radius: 10px; background: rgba(236,241,234,.6); color: var(--muted); }
.meeting-head-actions { display: flex; align-items: center; gap: 8px; }
.meetings-hero { margin-bottom: 18px; }
.meeting-decision-hint {
display: grid;
grid-template-columns: 32px minmax(0,1fr) auto;
gap: 10px;
align-items: center;
margin: -2px 0 16px;
padding: 8px 10px;
border-top: 1px solid rgba(47,85,69,.12);
border-bottom: 1px solid rgba(47,85,69,.12);
color: var(--muted);
}
.meeting-decision-hint-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--green-deep); }
.meeting-decision-hint-icon svg { width: 19px; height: 19px; }
.meeting-decision-hint p { margin: 0; font-size: 12px; line-height: 1.4; }
.meeting-decision-hint p b { color: var(--ink); }
.meeting-decision-hint button { padding: 6px 2px; border: 0; background: transparent; color: var(--coral-deep); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.meeting-decision-hint button:hover { text-decoration: underline; text-underline-offset: 3px; }
.linked-decisions-card.is-meeting-compact { padding-top: 14px; padding-bottom: 14px; box-shadow: none; }
.linked-decisions-card.is-meeting-compact .linked-decisions-head { align-items: center; }
.linked-decisions-card.is-meeting-compact .linked-decisions-head p { margin-top: 3px; }
.linked-decisions-card.is-meeting-compact .linked-decisions-list:empty { display: none; }
.decision-quick-responsibility { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.decision-quick-responsibility > details { border: 1px solid var(--line); border-radius: 12px; background: rgba(246,241,231,.42); overflow: hidden; }
.decision-quick-responsibility > details > summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; color: var(--muted); font-size: 11px; cursor: pointer; }
.decision-quick-responsibility > details > summary b { min-width: 0; color: var(--green-deep); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decision-quick-responsibility > details > summary small { color: var(--coral-deep); font-weight: 800; }
.decision-quick-responsibility > details > .field { margin: 0; padding: 0 12px 12px; border-top: 1px solid var(--line); }
.decision-quick-responsibility > details > .field label { padding-top: 11px; }
.decision-form.is-quick-meeting .decision-form-more { margin-top: 12px; }
.modal.role-directory-modal,
.modal.role-form-modal,
.modal.role-detail-modal { width: min(980px, calc(100vw - 44px)); max-width: 980px; }
.role-directory-modal .modal-body,
.role-form-modal .modal-body,
.role-detail-modal .modal-body { padding: 0; overflow-x: hidden; background: var(--paper); }
.role-directory { min-height: 500px; padding: 25px 27px 32px; }
.role-directory-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 4px 1px 22px; border-bottom: 1px solid var(--line); }
.role-directory-hero > div { min-width: 0; max-width: 690px; }
.role-directory-hero h2 { margin: 4px 0 7px; font-size: clamp(28px,3.3vw,40px); line-height: 1.08; }
.role-directory-hero p { margin: 0; color: var(--muted); line-height: 1.5; }
.role-directory-note { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; align-items: center; margin: 16px 0; padding: 11px 13px; border-radius: 14px; background: rgba(236,241,234,.58); }
.role-directory-note > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--green); }
.role-directory-note svg { width: 20px; height: 20px; }
.role-directory-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.role-directory-note b { color: var(--ink); }
.role-directory-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.role-card { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: #fff; overflow: hidden; }
.role-card.is-past { opacity: .72; }
.role-card > button { display: grid; grid-template-columns: 42px minmax(0,1fr) 15px; gap: 12px; align-items: center; width: 100%; min-width: 0; padding: 14px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.role-card > button:hover { background: rgba(236,241,234,.34); }
.role-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #edf0e5; color: #65764d; }
.role-card-icon svg { width: 22px; height: 22px; }
.role-card-copy { display: grid; min-width: 0; gap: 3px; }
.role-card-copy > span { display: flex; align-items: center; gap: 8px; }
.role-card-copy em { padding: 2px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.role-card-copy em.role-work-count { background: var(--coral-soft); color: var(--coral-deep); }
.role-card-copy small { color: var(--muted); font-size: 10px; }
.role-card-copy > b { min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.role-card-copy > strong { color: var(--green); font-size: 12px; }
.role-card-copy p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.role-card > button > i { color: var(--muted); font-size: 22px; font-style: normal; }
.role-directory-past { margin-top: 17px; border-top: 1px solid var(--line); }
.role-directory-past summary { display: flex; align-items: center; gap: 8px; padding: 15px 2px; color: var(--muted); font-weight: 750; cursor: pointer; }
.role-directory-past summary b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; }
.role-form { padding: 25px 27px 30px; }
.role-form .decision-form-more { margin-top: 4px; }
.role-detail { padding: 26px 27px 31px; }
.role-holder { display: grid; gap: 3px; margin: 20px 0 12px; padding: 14px 16px; border-radius: 15px; background: rgba(236,241,234,.58); }
.role-holder span,
.role-scope > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.role-holder b { color: var(--green); font-size: 19px; }
.role-holder small { color: var(--muted); }
.role-definition-preview { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid rgba(64,91,78,.16); border-radius: 15px; background: #fff; }
.role-definition-preview > div { display: grid; gap: 5px; }
.role-definition-preview span { color: var(--green-deep); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.role-definition-preview p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.52; }
.role-definition-preview small { padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.48; }
.role-definition-preview small b { color: var(--green-deep); }
.role-core-fields > [data-role-definition-preview] .role-definition-preview { margin: -4px 0 16px; background: rgba(255,255,255,.74); }
.role-scope { margin-bottom: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.role-scope p { margin: 7px 0 0; white-space: pre-wrap; line-height: 1.58; }
.role-scope-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.role-scope-grid .role-scope { margin: 0; background: rgba(255,255,255,.66); }
.role-access-separation { display: grid; grid-template-columns: minmax(140px,.42fr) minmax(0,1fr); gap: 12px; align-items: center; margin: 12px 0 15px; padding: 12px 14px; border-left: 4px solid var(--amber); border-radius: 11px; background: rgba(211,154,68,.08); }
.role-access-separation b { color: var(--green-deep); font-size: 12px; }
.role-access-separation span { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.role-work-inbox { margin: 16px 0; padding: 17px; border: 1px solid rgba(64,91,78,.2); border-radius: 18px; background: #fff; }
.role-work-inbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 13px; }
.role-work-inbox-head > div { min-width: 0; }
.role-work-inbox-head h3 { margin: 3px 0 4px; color: var(--green-deep); font-size: 19px; }
.role-work-inbox-head p { margin: 0; max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.role-work-inbox-head .btn { flex: 0 0 auto; }
.role-work-summary { display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 7px; align-items: baseline; padding: 11px 13px; border-radius: 13px; background: var(--sage-soft); }
.role-work-summary b { color: var(--green-deep); font-size: 24px; line-height: 1; }
.role-work-summary span { color: var(--green-deep); font-weight: 800; }
.role-work-summary small { justify-self: end; color: var(--muted); font-size: 10.5px; }
.role-work-list { display: grid; margin-top: 9px; }
.role-work-row { display: grid; grid-template-columns: 27px minmax(0,1fr) auto 14px; gap: 9px; align-items: center; min-height: 43px; padding: 7px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.role-work-row:first-child { border-top: 0; }
.role-work-row:hover { color: var(--green-deep); }
.role-work-row > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--coral-soft); color: var(--coral-deep); font-weight: 900; }
.role-work-row > b { min-width: 0; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.role-work-row > small { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.role-work-row > i { color: var(--muted); font-size: 18px; font-style: normal; }
.role-work-row.is-done { opacity: .58; }
.role-work-row.is-done > span { background: var(--green-soft); color: var(--green); }
.role-work-more { display: block; padding-top: 9px; color: var(--muted); text-align: center; }
.project-role-work { min-height: 420px; }
.project-role-work-count { background: var(--coral-soft) !important; color: var(--coral-deep) !important; }
.task-role-owner-mark { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; background: var(--coral-soft); color: var(--coral-deep); font-size: 9px; font-weight: 900; }
.project-role-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; margin-top: 2px; }
.project-role-meta b { color: var(--green-deep); font-size: 11.5px; }
.project-role-meta span { padding: 2px 6px; border-radius: 999px; background: var(--amber-soft); color: var(--ink); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.project-role-meta small { color: var(--muted); font-size: 10px; }
.project-role-open { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 9px; background: var(--sage-soft); color: var(--green-deep); font: inherit; font-size: 19px; cursor: pointer; }
.profile-role-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.profile-role-row:first-of-type { border-top: 0; }
.profile-role-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--sage-soft); color: var(--green-deep); }
.profile-role-mark svg { width: 20px; height: 20px; }
.profile-role-row > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.profile-role-row b { font-size: 13px; }
.profile-role-row small { color: var(--muted); font-size: 10.5px; }
.profile-role-row i { color: var(--muted); font-size: 20px; font-style: normal; }
@media (max-width: 700px) {
.decision-registry-hero-actions,
.linked-decisions-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.decision-registry-hero-actions .btn,
.linked-decisions-actions .small-btn { width: 100%; min-width: 0; }
.decision-followup-options { grid-template-columns: 1fr; }
.decision-form-context { align-items: flex-start; flex-direction: column; gap: 3px; }
.decision-form-context b { text-align: left; }
.meeting-ai-decision-suggestion { align-items: flex-start; flex-direction: column; gap: 5px; }
.meeting-ai-decision-suggestion span { white-space: normal; }
.meeting-head-actions { display: grid; grid-template-columns: auto auto; width: 100%; }
.meeting-head-actions .btn { min-width: 0; min-height: 44px; }
.meeting-decision-hint { grid-template-columns: 32px minmax(0,1fr); }
.meeting-decision-hint button { grid-column: 2; justify-self: start; min-height: 44px; margin-top: -7px; }
.linked-decisions-card.is-meeting-compact .linked-decisions-actions { display: flex; width: auto; }
.linked-decisions-card.is-meeting-compact .linked-decisions-actions .small-btn { width: auto; min-height: 44px; }
.decision-quick-responsibility > details > summary { min-height: 44px; box-sizing: border-box; }
.decision-detail-actions { grid-template-columns: 1fr; }
.decision-detail-action-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.decision-detail-action-group .btn { width: 100%; min-width: 0; }
.role-directory { padding: 19px 15px 27px; }
.role-directory-hero { align-items: stretch; flex-direction: column; gap: 15px; }
.role-directory-hero .btn { width: 100%; }
.role-directory-list { grid-template-columns: 1fr; }
.role-form,
.role-detail { padding: 19px 15px 25px; }
.role-scope-grid { grid-template-columns: 1fr; }
.role-access-separation { grid-template-columns: 1fr; gap: 4px; }
.role-work-inbox { padding: 14px 12px; }
.role-work-inbox-head { flex-direction: column; gap: 12px; }
.role-work-inbox-head .btn { width: 100%; }
.role-work-summary { grid-template-columns: auto minmax(0,1fr); }
.role-work-summary small { grid-column: 1 / -1; justify-self: start; }
.role-work-row { grid-template-columns: 27px minmax(0,1fr) 14px; }
.role-work-row > small { display: none; }
.decision-followup,
.decision-task-picker { padding: 20px 15px 25px; }
.decision-followup { grid-template-columns: 46px minmax(0,1fr); }
.decision-followup-icon { width: 46px; height: 46px; border-radius: 14px; }
.decision-followup-copy h2,
.decision-task-picker h2 { font-size: 23px; }
.modal.role-directory-modal,
.modal.role-form-modal,
.modal.role-detail-modal,
#modal-root .modal.decision-followup-modal { width: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.role-card,
.meeting-ai-decision-suggestion { transition: none; }
}
.meeting-write-form[data-meeting-phase="write"] .meeting-layout { grid-template-columns: minmax(0,1fr); }
.meeting-write-form[data-meeting-phase="write"] .meeting-side:empty { display: none; }
.meeting-write-form[data-meeting-phase="write"] .meeting-main { gap: 14px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-save-row {
position: static;
min-height: 0;
margin-top: 5px;
padding: 12px 0 0;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.meeting-detail-gas:has(.meeting-write-form[data-meeting-phase="write"]) .meeting-hero-panel.is-editing {
margin-bottom: 12px;
padding-top: 4px;
}
.meeting-detail-gas:has(.meeting-write-form[data-meeting-phase="write"]) .meeting-hero-panel.is-editing .pd-title {
margin-bottom: 3px;
font-size: clamp(25px,3.2vw,34px);
}
.meeting-attendance-start {
overflow: visible;
border-color: rgba(47,85,69,.2) !important;
background: linear-gradient(135deg,#fffdf9 0%,rgba(237,244,236,.72) 100%) !important;
box-shadow: 0 12px 32px rgba(34,48,42,.08) !important;
}
.meeting-attendance-start .field { margin: 0; }
.meeting-attendance-start .field > label { display: none; }
.meeting-attendance-start .person-picker-search input { min-height: 44px; background: rgba(255,255,255,.82); }
.meeting-attendance-quick { display: grid; gap: 7px; margin: -1px 0 12px; }
.meeting-attendance-quick > span { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.meeting-attendance-quick > div { display: flex; flex-wrap: wrap; gap: 7px; }
.meeting-attendance-quick button {
display: grid;
gap: 1px;
min-width: 142px;
min-height: 43px;
padding: 7px 10px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 11px;
background: rgba(255,255,255,.72);
color: var(--green-deep);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .14s ease,background .14s ease,transform .14s ease;
}
.meeting-attendance-quick button:hover,.meeting-attendance-quick button:focus-visible { border-color: rgba(47,85,69,.32); background: #fff; outline: none; transform: translateY(-1px); }
.meeting-attendance-quick button b { font-size: 10.5px; }
.meeting-attendance-quick button small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway { gap: 9px; padding: 11px 12px; box-shadow: none; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-intro { grid-template-columns: auto minmax(0,1fr); }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-intro b { font-size: 13px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-intro small { display: none; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-step { min-height: 48px; }
.meeting-write-context {
overflow: visible;
border: 1px solid rgba(47,85,69,.14);
border-radius: 14px;
background: rgba(255,255,255,.55);
}
.meeting-write-context > summary {
display: grid;
grid-template-columns: minmax(0,1fr) auto auto;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 8px 13px;
list-style: none;
cursor: pointer;
}
.meeting-write-context > summary::-webkit-details-marker { display: none; }
.meeting-write-context > summary span:first-child b,.meeting-write-context > summary span:first-child small { display: block; }
.meeting-write-context > summary b { color: var(--ink); font-size: 11px; }
.meeting-write-context > summary small,.meeting-write-context > summary span:nth-child(2) { color: var(--muted); font-size: 9.5px; }
.meeting-write-context > summary i { color: var(--green-deep); font-size: 9.5px; font-style: normal; font-weight: 800; }
.meeting-write-context[open] > summary { border-bottom: 1px solid var(--line); }
.meeting-write-context[open] > summary i { font-size: 0; }
.meeting-write-context[open] > summary i::after { content: "Sbalit"; font-size: 9.5px; }
.meeting-write-context-body { display: grid; gap: 12px; padding: 13px; }
.meeting-write-context-body > * { margin: 0 !important; }
.meeting-write-context-body .meeting-card { box-shadow: none; }
.meeting-agenda-workspace { display: grid; grid-template-columns: minmax(176px,210px) minmax(0,1fr); align-items: start; gap: 14px; }
.meeting-agenda-focus-bar {
grid-column: 1 / -1;
display: none;
grid-template-columns: 30px minmax(0,1fr) auto;
align-items: center;
gap: 9px;
min-height: 48px;
padding: 7px 8px 7px 10px;
border: 1px solid rgba(47,85,69,.15);
border-radius: 12px;
background: rgba(237,244,236,.72);
color: var(--green-deep);
}
.meeting-write-form.is-agenda-focus .meeting-agenda-focus-bar { display: grid; }
.meeting-agenda-focus-bar > span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--green-deep);
color: #fff;
font-size: 14px;
font-weight: 900;
}
.meeting-agenda-focus-bar b,.meeting-agenda-focus-bar small { display: block; }
.meeting-agenda-focus-bar b { color: var(--ink); font-size: 10px; }
.meeting-agenda-focus-bar small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.meeting-agenda-focus-bar button {
min-height: 34px;
padding: 6px 9px;
border: 1px solid rgba(47,85,69,.18);
border-radius: 9px;
background: rgba(255,255,255,.82);
color: var(--green-deep);
font: inherit;
font-size: 8.5px;
font-weight: 850;
cursor: pointer;
}
.meeting-agenda-focus-bar button:hover,.meeting-agenda-focus-bar button:focus-visible { border-color: rgba(47,85,69,.36); background: #fff; outline: none; }
.meeting-write-form.is-agenda-focus #meeting-write-attendance,
.meeting-write-form.is-agenda-focus .meeting-decision-recall,
.meeting-write-form.is-agenda-focus .meeting-write-context,
.meeting-write-form.is-agenda-focus #meeting-write-summary,
.meeting-write-form.is-agenda-focus #meeting-write-finish { display: none; }
.meeting-agenda-focus-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid rgba(47,85,69,.13); border-radius: 14px; background: rgba(255,253,249,.78); }
.meeting-agenda-tab {
display: grid;
grid-template-columns: 25px minmax(0,1fr) 14px;
align-items: center;
gap: 7px;
min-height: 43px;
padding: 6px 7px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--muted);
font: inherit;
text-align: left;
cursor: pointer;
}
.meeting-agenda-tab > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: rgba(47,85,69,.07); color: var(--green-deep); font-size: 9.5px; font-weight: 850; }
.meeting-agenda-tab b { min-width: 0; overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-agenda-tab i { color: var(--go); font-size: 10px; font-style: normal; }
.meeting-agenda-tab:hover,.meeting-agenda-tab:focus-visible { background: rgba(237,244,236,.58); color: var(--ink); outline: none; }
.meeting-agenda-tab.is-active { border-color: rgba(47,85,69,.2); background: #fff; color: var(--ink); box-shadow: 0 5px 14px rgba(34,48,42,.06); }
.meeting-agenda-tab.is-active > span { background: rgba(224,122,95,.14); color: var(--coral-deep); }
.meeting-agenda-focus-list { min-width: 0; }
.meeting-agenda-focus-card[hidden] { display: none !important; }
.meeting-detail-gas .meeting-agenda-focus-card {
overflow: visible;
scroll-margin-top: 84px;
margin: 0;
padding: 0;
border: 1px solid rgba(47,85,69,.18);
border-top: 4px solid var(--agenda-color);
border-left-width: 1px;
border-radius: 15px;
background: #fffdf9;
}
.meeting-agenda-focus-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 16px 17px 13px; border-bottom: 1px solid var(--line); }
.meeting-agenda-focus-head h3 { margin: 2px 0 3px; font-size: 19px; }
.meeting-agenda-focus-head p { margin: 0; color: var(--muted); font-size: 10px; }
.meeting-project-actions-menu,.meeting-note-row-menu { position: relative; }
.meeting-project-actions-menu > summary,.meeting-note-row-menu > summary {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(47,85,69,.15);
border-radius: 10px;
background: rgba(255,255,255,.8);
color: var(--green-deep);
font-size: 12px;
font-weight: 850;
letter-spacing: 1px;
list-style: none;
cursor: pointer;
box-sizing: border-box;
}
.meeting-project-actions-menu > summary::-webkit-details-marker,.meeting-note-row-menu > summary::-webkit-details-marker { display: none; }
.meeting-project-actions-menu[open] > summary,.meeting-note-row-menu[open] > summary { border-color: rgba(47,85,69,.32); background: var(--cream); }
.meeting-project-actions-menu > div,.meeting-note-row-menu-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 34;
display: grid;
gap: 4px;
width: 225px;
padding: 7px;
border: 1px solid rgba(47,85,69,.17);
border-radius: 12px;
background: #fffdf9;
box-shadow: 0 16px 36px rgba(34,48,42,.16);
}
.meeting-project-actions-menu button,.meeting-note-row-menu-panel button { width: 100%; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 10.5px; font-weight: 700; text-align: left; cursor: pointer; }
.meeting-project-actions-menu button:hover,.meeting-note-row-menu-panel button:hover { background: rgba(237,244,236,.68); }
.meeting-project-actions-menu label,.meeting-note-row-menu-panel label { display: grid; gap: 5px; padding: 7px 9px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.meeting-project-actions-menu select,.meeting-note-row-menu-panel select { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink); font: inherit; font-size: 10.5px; text-transform: none; }
.meeting-note-row-menu-panel button.danger { color: var(--coral-deep); }
.meeting-agenda-focus-notes { padding: 16px 17px 12px; }
.meeting-quick-capture { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.meeting-quick-capture b,.meeting-quick-capture small { display: block; }
.meeting-quick-capture b { color: var(--ink); font-size: 12px; }
.meeting-quick-capture small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.meeting-quick-note-section.meeting-note-item {
gap: 6px;
margin-top: 5px;
padding: 8px 9px 9px;
border: 1px solid rgba(47,85,69,.1);
border-radius: 12px;
background: rgba(255,255,255,.42);
}
.meeting-quick-note-section.meeting-note-item + .meeting-quick-note-section { margin-top: 10px; }
.meeting-quick-note-section:has(.meeting-note-heading:not(:placeholder-shown)) {
border-color: rgba(47,85,69,.17);
border-left: 3px solid rgba(47,85,69,.55);
background: rgba(237,244,236,.3);
}
.meeting-quick-note-heading {
display: grid;
grid-template-columns: 25px minmax(0,1fr) 30px;
align-items: center;
gap: 7px;
min-height: 32px;
}
.meeting-quick-note-heading > span {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 8px;
background: rgba(47,85,69,.08);
color: var(--green-deep);
font-family: var(--display);
font-size: 12px;
font-weight: 850;
}
.meeting-quick-note-heading input {
min-width: 0;
min-height: 32px;
padding: 4px 2px;
border: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
background: transparent;
color: var(--ink);
font-size: 12px;
font-weight: 800;
}
.meeting-quick-note-heading input::placeholder { color: rgba(76,91,84,.62); font-weight: 650; }
.meeting-quick-note-heading input:hover { border-bottom-color: rgba(47,85,69,.15); }
.meeting-quick-note-heading input:focus { border-bottom-color: var(--coral); outline: none; }
.meeting-quick-note-heading > button {
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: rgba(76,91,84,.62);
font: inherit;
font-size: 17px;
cursor: pointer;
}
.meeting-quick-note-heading > button:hover,
.meeting-quick-note-heading > button:focus-visible { background: rgba(224,122,95,.09); color: var(--coral-deep); outline: none; }
.meeting-quick-note-lines { gap: 5px; }
.meeting-quick-note-row { display: grid; grid-template-columns: 12px minmax(0,1fr) 34px; align-items: start; gap: 7px; }
.meeting-quick-note-row .note-bullet-dot { padding-top: 7px; color: var(--coral-deep); }
.meeting-quick-note-row .meeting-rich-editor.is-bullet { min-height: 38px; border-color: rgba(47,85,69,.14); background: rgba(247,243,234,.68); }
.meeting-quick-note-row .meeting-rich-editor.is-bullet:focus { border-color: rgba(224,122,95,.52); background: #fff; box-shadow: 0 0 0 3px rgba(224,122,95,.08); }
.meeting-note-outcome-menu {
grid-column: 2 / -1;
position: relative;
width: max-content;
max-width: 100%;
margin: 0 0 2px;
}
.meeting-note-outcome-menu > summary {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 30px;
padding: 4px 8px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 999px;
background: rgba(255,255,255,.78);
color: var(--muted);
font: inherit;
font-size: 9px;
font-weight: 800;
list-style: none;
cursor: pointer;
}
.meeting-note-outcome-menu > summary::-webkit-details-marker { display: none; }
.meeting-note-outcome-menu > summary:hover,
.meeting-note-outcome-menu > summary:focus-visible,
.meeting-note-outcome-menu[open] > summary {
border-color: rgba(47,85,69,.3);
background: #fff;
color: var(--green-deep);
outline: none;
}
.meeting-note-outcome-menu > div {
position: absolute;
top: calc(100% + 5px);
left: 0;
z-index: 35;
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 5px;
width: min(490px,calc(100vw - 64px));
padding: 7px;
border: 1px solid rgba(47,85,69,.17);
border-radius: 12px;
background: #fffdf9;
box-shadow: 0 16px 36px rgba(34,48,42,.16);
}
.meeting-note-outcome-menu button {
display: grid;
grid-template-columns: 27px minmax(0,1fr);
grid-template-rows: auto auto;
gap: 1px 7px;
min-height: 52px;
padding: 7px;
border: 1px solid transparent;
border-radius: 9px;
background: rgba(247,243,234,.66);
color: var(--green-deep);
font: inherit;
text-align: left;
cursor: pointer;
}
.meeting-note-outcome-menu button:hover,
.meeting-note-outcome-menu button:focus-visible { border-color: rgba(47,85,69,.22); background: #fff; outline: none; }
.meeting-note-outcome-menu button > span {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: rgba(47,85,69,.09);
font-weight: 900;
}
.meeting-note-outcome-menu button b { align-self: end; color: var(--ink); font-size: 9px; }
.meeting-note-outcome-menu button small { color: var(--muted); font-size: 7.5px; line-height: 1.25; }
.meeting-note-outcome-menu button.is-linked {
border-color: rgba(73,133,101,.18);
background: rgba(73,133,101,.1);
color: var(--green-deep);
}
.meeting-note-linked-results {
grid-column: 2 / -1;
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 5px;
margin: 1px 0 3px;
}
.meeting-note-linked-results[hidden] { display: none !important; }
.meeting-note-result {
display: grid;
grid-template-columns: 26px minmax(0,1fr) auto;
align-items: center;
gap: 7px;
min-width: 0;
min-height: 40px;
padding: 6px 7px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 10px;
background: rgba(237,244,236,.54);
color: var(--green-deep);
font: inherit;
text-align: left;
cursor: pointer;
}
.meeting-note-result.is-task { border-color: rgba(224,122,95,.17); background: rgba(224,122,95,.07); color: var(--coral-deep); }
.meeting-note-result.is-open { border-color: rgba(198,138,54,.18); background: rgba(198,138,54,.08); color: #815719; }
.meeting-note-result:hover,.meeting-note-result:focus-visible { border-color: currentColor; background: #fff; outline: none; }
.meeting-note-result-icon {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--green-deep);
color: #fff;
font-size: 10px;
font-weight: 900;
}
.meeting-note-result.is-task .meeting-note-result-icon { background: var(--coral-deep); }
.meeting-note-result.is-open .meeting-note-result-icon { background: #9a6a25; }
.meeting-note-result > span:nth-child(2),.meeting-note-result b,.meeting-note-result small { display: block; min-width: 0; }
.meeting-note-result b { color: var(--ink); font-size: 8.5px; }
.meeting-note-result small { overflow: hidden; margin-top: 1px; color: var(--muted); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-note-result i { font-size: 7.5px; font-style: normal; font-weight: 850; white-space: nowrap; }
.meeting-note-inline-host { grid-column: 2 / -1; min-width: 0; }
.meeting-note-inline-panel {
overflow: hidden;
border: 1px solid rgba(47,85,69,.18);
border-radius: 12px;
background: #fffdf9;
box-shadow: 0 10px 24px rgba(34,48,42,.08);
}
.meeting-note-inline-panel > header {
display: grid;
grid-template-columns: 27px minmax(0,1fr) 27px;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-bottom: 1px solid rgba(47,85,69,.09);
background: rgba(237,244,236,.42);
}
.meeting-note-inline-panel > header > span {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 9px;
background: rgba(73,133,101,.11);
color: var(--green-deep);
font-size: 12px;
font-weight: 900;
}
.meeting-note-inline-panel.is-task > header > span { background: rgba(224,122,95,.12); color: var(--coral-deep); }
.meeting-note-inline-panel > header b,
.meeting-note-inline-panel > header small { display: block; }
.meeting-note-inline-panel > header b { color: var(--ink); font-size: 10px; }
.meeting-note-inline-panel > header small { overflow: hidden; margin-top: 1px; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-note-inline-panel > header > button {
width: 27px;
height: 27px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 18px;
cursor: pointer;
}
.meeting-note-inline-fields {
display: grid;
grid-template-columns: minmax(0,1.3fr) minmax(150px,.8fr) auto;
align-items: end;
gap: 8px;
padding: 10px;
}
.meeting-note-inline-fields > label:not(.meeting-note-inline-done) { display: grid; gap: 4px; }
.meeting-note-inline-fields > label > span { color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.meeting-note-inline-fields > label > span i { font-size: 7.5px; font-style: normal; font-weight: 650; text-transform: none; }
.meeting-note-inline-fields select,
.meeting-note-inline-fields input[type="date"] {
width: 100%;
min-height: 38px;
padding: 7px 8px;
border: 1px solid rgba(47,85,69,.16);
border-radius: 9px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 10px;
box-sizing: border-box;
}
.meeting-note-inline-done {
display: flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 0 8px;
border: 1px solid rgba(47,85,69,.13);
border-radius: 9px;
background: rgba(247,243,234,.6);
cursor: pointer;
}
.meeting-note-inline-done > span { color: var(--ink) !important; font-size: 8.5px !important; text-transform: none !important; white-space: nowrap; }
.meeting-note-inline-panel > footer { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 10px; }
.meeting-note-inline-panel > footer .btn { width: auto; min-height: 35px; margin: 0; padding: 6px 10px; font-size: 9px; }
.meeting-note-linked {
display: flex;
align-items: center;
gap: 7px;
min-height: 35px;
padding: 6px 8px;
border-radius: 10px;
background: rgba(73,133,101,.09);
color: var(--green-deep);
font-size: 9px;
}
.meeting-note-linked > span { font-weight: 900; }
.meeting-note-linked b { min-width: 0; flex: 1; }
.meeting-note-linked button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 8.5px; font-weight: 850; cursor: pointer; }
.meeting-note-linked.is-open { background: rgba(198,138,54,.1); color: #815719; }
.meeting-note-add-actions {
display: flex;
align-items: center;
gap: 6px;
margin: 9px 0 0;
}
.meeting-note-add-actions .btn-add-row { min-height: 34px; margin: 0; }
.meeting-add-note-section {
border-color: rgba(47,85,69,.16);
background: rgba(237,244,236,.52);
color: var(--green-deep);
}
.meeting-add-note-section > span { font-family: var(--body); font-weight: 850; }
.meeting-capture-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 11px 0 0 19px;
padding-top: 9px;
border-top: 1px solid rgba(47,85,69,.09);
}
.meeting-capture-actions > span b,.meeting-capture-actions > span small { display: block; }
.meeting-capture-actions > span b { color: var(--ink); font-size: 9px; }
.meeting-capture-actions > span small { margin-top: 2px; color: var(--muted); font-size: 7.5px; }
.meeting-capture-actions > div { display: flex; align-items: center; gap: 6px; }
.meeting-discussed-toggle {
display: grid;
grid-template-columns: 28px minmax(0,1fr);
gap: 0 8px;
width: calc(100% - 19px);
min-height: 42px;
margin: 9px 0 0 19px;
padding: 7px 9px;
border: 1px dashed rgba(47,85,69,.2);
border-radius: 10px;
background: rgba(255,255,255,.58);
color: var(--muted);
font: inherit;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.meeting-discussed-toggle > span {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 1px solid rgba(47,85,69,.18);
border-radius: 9px;
background: #fff;
color: transparent;
font-weight: 900;
}
.meeting-discussed-toggle b { color: var(--ink); font-size: 9.5px; }
.meeting-discussed-toggle small { margin-top: 2px; font-size: 8px; line-height: 1.35; }
.meeting-discussed-toggle:hover,
.meeting-discussed-toggle:focus-visible { border-style: solid; border-color: rgba(47,85,69,.35); outline: none; }
.meeting-discussed-toggle.is-on { border-style: solid; border-color: rgba(73,133,101,.22); background: rgba(73,133,101,.08); color: var(--green-deep); }
.meeting-discussed-toggle.is-on > span { border-color: rgba(73,133,101,.2); background: var(--green-deep); color: #fff; }
.meeting-agenda-tab.is-resolved i { display: inline; color: var(--green-deep); }
.meeting-quick-note-row.is-resume-target .meeting-rich-editor,
.meeting-agenda-focus-card.is-resume-target {
box-shadow: 0 0 0 3px rgba(224,122,95,.14);
}
.meeting-agenda-task-disclosure { margin: 0 17px; border-top: 1px solid var(--line); }
.meeting-agenda-task-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 45px; color: var(--muted); font-size: 10.5px; font-weight: 800; list-style: none; cursor: pointer; }
.meeting-agenda-task-disclosure > summary::-webkit-details-marker { display: none; }
.meeting-agenda-task-disclosure > summary b { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px; background: rgba(47,85,69,.08); color: var(--green-deep); font-size: 10px; }
.meeting-agenda-task-disclosure > div { padding-bottom: 10px; }
.meeting-agenda-pager { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 17px 15px; border-top: 1px solid var(--line); background: rgba(237,244,236,.26); border-radius: 0 0 14px 14px; }
.meeting-agenda-pager .btn { width: auto; margin: 0; }
@media (max-width: 760px) {
.meeting-detail-gas:has(.meeting-write-form[data-meeting-phase="write"]) .meeting-phase-intro { display: none; }
.meeting-detail-gas:has(.meeting-write-form[data-meeting-phase="write"]) .meeting-hero-panel.is-editing .pd-title { font-size: 24px; }
.meeting-detail-gas .meeting-attendance-start { padding: 15px; }
.meeting-attendance-quick > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.meeting-attendance-quick button { min-width: 0; min-height: 46px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway { padding: 10px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-intro { display: flex; align-items: baseline; gap: 8px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-intro .eyebrow { margin: 0; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; overflow: visible; padding: 0; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-step { min-height: 56px; grid-template-columns: minmax(0,1fr); justify-items: center; align-content: center; gap: 3px; padding: 6px 3px; text-align: center; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-number { width: 25px; height: 25px; flex-basis: 25px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-copy b { font-size: 9px; line-height: 1.1; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-copy small { display: none; }
.meeting-step-section-head { grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; }
.meeting-step-section-head > small { grid-column: auto; align-self: start; justify-self: end; margin-top: 1px; }
.meeting-attendance-quick [data-attendance-add-guest] { grid-column: 1 / -1; }
.meeting-write-context > summary { grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.meeting-write-context > summary span:nth-child(2) { display: none; }
.meeting-write-context-body { padding: 10px; }
.meeting-agenda-workspace { grid-template-columns: minmax(0,1fr); gap: 8px; }
.meeting-agenda-focus-bar { grid-template-columns: 30px minmax(0,1fr); padding: 8px; }
.meeting-agenda-focus-bar button { grid-column: 1 / -1; width: 100%; min-height: 40px; }
.meeting-agenda-focus-nav { position: static; flex-direction: row; gap: 5px; overflow-x: auto; padding: 4px; scroll-padding-inline: 4px; scroll-snap-type: x proximity; scrollbar-width: none; }
.meeting-agenda-focus-nav::-webkit-scrollbar { display: none; }
.meeting-agenda-tab { flex: 0 0 auto; grid-template-columns: 25px auto 12px; min-width: 118px; max-width: 210px; min-height: 42px; }
.meeting-agenda-tab { scroll-snap-align: start; }
.meeting-agenda-tab b { max-width: 145px; }
.meeting-agenda-focus-head { padding: 14px 13px 11px; }
.meeting-agenda-focus-head h3 { font-size: 17px; }
.meeting-agenda-focus-head p { line-height: 1.35; }
.meeting-agenda-focus-notes { padding: 13px 12px 10px; }
.meeting-quick-note-section.meeting-note-item { padding: 7px 6px 8px; }
.meeting-quick-note-row { grid-template-columns: 10px minmax(0,1fr) 44px; gap: 5px; }
.meeting-note-outcome-menu > summary { min-height: 36px; padding-inline: 10px; }
.meeting-note-outcome-menu > div {
position: fixed;
top: auto;
right: 12px;
bottom: calc(76px + env(safe-area-inset-bottom,0px));
left: 12px;
width: auto;
grid-template-columns: 1fr;
padding: 9px;
}
.meeting-note-outcome-menu button { min-height: 54px; }
.meeting-note-linked-results { grid-template-columns: 1fr; }
.meeting-note-result { min-height: 44px; }
.meeting-note-inline-fields { grid-template-columns: 1fr; }
.meeting-note-inline-panel > footer { display: grid; grid-template-columns: 1fr 1fr; }
.meeting-note-inline-panel > footer .btn { width: 100%; min-height: 44px; }
.meeting-discussed-toggle { width: calc(100% - 15px); margin-left: 15px; }
.meeting-note-row-menu > summary,.meeting-project-actions-menu > summary { width: 44px; height: 44px; }
.meeting-note-row-menu-panel { position: fixed; top: auto; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom,0px)); left: 12px; width: auto; max-height: 60dvh; overflow-y: auto; padding: 9px; }
.meeting-note-row-menu-panel button { min-height: 42px; }
.meeting-note-add-actions { display: grid; grid-template-columns: 1fr 1fr; }
.meeting-note-add-actions .btn-add-row { width: 100%; min-height: 42px; justify-content: center; }
.meeting-capture-actions { margin-left: 15px; }
.meeting-capture-actions { align-items: stretch; flex-direction: column; }
.meeting-capture-actions > div { display: grid; grid-template-columns: 1fr; }
.meeting-capture-actions > div .meeting-control-btn { width: 100%; min-height: 42px; }
.meeting-agenda-task-disclosure { margin: 0 12px; }
.meeting-agenda-pager { padding: 11px 12px 13px; }
.meeting-agenda-pager .btn,.meeting-agenda-pager .meeting-control-btn,.meeting-primary-section-head .meeting-control-btn { min-height: 44px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-save-row { display: grid; grid-template-columns: 1fr; gap: 7px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-save-row .btn { width: 100%; }
}
.meeting-draft-status {
display: grid;
grid-template-columns: 9px minmax(0,auto);
align-items: center;
gap: 8px;
min-width: 118px;
padding: 5px 9px;
border: 1px solid rgba(47,85,69,.12);
border-radius: 11px;
background: rgba(255,253,249,.72);
}
.meeting-draft-status > span {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--go);
box-shadow: 0 0 0 4px rgba(73,133,101,.1);
}
.meeting-draft-status b,
.meeting-draft-status small { display: block; white-space: nowrap; }
.meeting-draft-status b { color: var(--green-deep); font-size: 10px; line-height: 1.15; }
.meeting-draft-status small { margin-top: 1px; color: var(--muted); font-size: 8.5px; line-height: 1.15; }
.meeting-draft-status.is-saving > span {
background: var(--coral);
box-shadow: 0 0 0 4px rgba(224,122,95,.11);
animation: meeting-draft-pulse 1s ease-in-out infinite;
}
.meeting-draft-status.is-offline > span {
background: #c68a36;
box-shadow: 0 0 0 4px rgba(198,138,54,.12);
}
.meeting-draft-status.is-restored > span {
background: #6f78b9;
box-shadow: 0 0 0 4px rgba(111,120,185,.12);
}
@keyframes meeting-draft-pulse { 50% { opacity: .42; transform: scale(.82); } }
.meeting-conclusions-card {
overflow: hidden;
padding: 0;
border-color: rgba(47,85,69,.16);
background: linear-gradient(145deg,#fffdf9 0%,rgba(237,244,236,.52) 100%);
}
.meeting-conclusions-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 19px 20px 15px;
border-bottom: 1px solid rgba(47,85,69,.1);
}
.meeting-conclusions-head .meeting-card-numbered-title { margin: 0; }
.meeting-conclusions-head p { max-width: 580px; margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.meeting-conclusion-ai {
flex: 0 0 auto;
min-height: 35px;
padding: 7px 11px;
border: 1px solid rgba(111,120,185,.2);
border-radius: 10px;
background: rgba(255,255,255,.76);
color: #515990;
font: inherit;
font-size: 10px;
font-weight: 800;
cursor: pointer;
}
.meeting-conclusion-ai:hover,
.meeting-conclusion-ai:focus-visible { border-color: rgba(111,120,185,.4); background: #fff; outline: none; }
.meeting-conclusion-ai span { margin-right: 3px; color: #767fc3; }
.meeting-conclusions-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 10px;
padding: 13px;
}
.meeting-conclusion-block {
display: flex;
min-width: 0;
min-height: 190px;
flex-direction: column;
padding: 13px;
border: 1px solid rgba(47,85,69,.12);
border-radius: 13px;
background: rgba(255,255,255,.82);
box-shadow: 0 5px 15px rgba(34,48,42,.035);
}
.meeting-conclusion-block > header {
display: grid;
grid-template-columns: 31px minmax(0,1fr) auto;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(47,85,69,.08);
}
.meeting-conclusion-block > header b,
.meeting-conclusion-block > header small { display: block; }
.meeting-conclusion-block > header b { color: var(--ink); font-size: 11px; }
.meeting-conclusion-block > header small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.meeting-conclusion-block > header strong {
display: grid;
place-items: center;
min-width: 23px;
height: 23px;
padding: 0 6px;
border-radius: 999px;
background: rgba(47,85,69,.07);
color: var(--green-deep);
font-size: 9px;
}
.meeting-conclusion-icon {
display: grid;
place-items: center;
width: 31px;
height: 31px;
border-radius: 10px;
font-size: 14px;
font-weight: 900;
}
.meeting-conclusion-icon.is-decision { background: rgba(73,133,101,.12); color: var(--green-deep); }
.meeting-conclusion-icon.is-task { background: rgba(224,122,95,.13); color: var(--coral-deep); }
.meeting-conclusion-icon.is-open { background: rgba(198,138,54,.13); color: #98671f; }
.meeting-conclusion-block > div { display: grid; gap: 5px; padding: 9px 0 6px; }
.meeting-conclusion-row {
display: grid;
grid-template-columns: 22px minmax(0,1fr);
gap: 1px 6px;
width: 100%;
padding: 7px;
border: 0;
border-radius: 9px;
background: rgba(247,243,234,.58);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.meeting-conclusion-row:hover,
.meeting-conclusion-row:focus-visible { background: rgba(237,244,236,.9); outline: none; }
.meeting-conclusion-row > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 10px; font-weight: 900; }
.meeting-conclusion-row > span.is-decision { background: rgba(73,133,101,.11); color: var(--green-deep); }
.meeting-conclusion-row > span.is-task { background: rgba(224,122,95,.12); color: var(--coral-deep); }
.meeting-conclusion-row b { overflow: hidden; font-size: 9.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.meeting-conclusion-row small { color: var(--muted); font-size: 8px; }
.meeting-conclusion-block .empty-mini { margin: auto 0; padding: 9px 3px; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }
.meeting-conclusion-add {
width: 100%;
min-height: 32px;
margin-top: auto;
padding: 6px 8px;
border: 1px dashed rgba(47,85,69,.21);
border-radius: 9px;
background: transparent;
color: var(--green-deep);
font: inherit;
font-size: 9px;
font-weight: 800;
cursor: pointer;
}
.meeting-conclusion-add:hover,
.meeting-conclusion-add:focus-visible { border-style: solid; background: rgba(237,244,236,.58); outline: none; }
.meeting-conclusion-block.is-open .summary-bullet-editor { margin-top: 0; }
.meeting-conclusions-card .meeting-ai-summary-status { padding: 0 20px 14px; }
.meeting-polish-preview {
overflow: hidden;
border: 1px solid rgba(111,120,185,.19);
border-radius: 13px;
background: rgba(255,255,255,.82);
box-shadow: 0 8px 22px rgba(34,48,42,.05);
}
.meeting-polish-preview > header { padding: 13px 14px 10px; border-bottom: 1px solid rgba(111,120,185,.1); }
.meeting-polish-preview > header h4 { margin: 2px 0 3px; color: var(--ink); font-size: 13px; }
.meeting-polish-preview > header p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.meeting-polish-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 8px; padding: 10px; }
.meeting-polish-grid > article { min-width: 0; padding: 11px; border: 1px solid rgba(47,85,69,.1); border-radius: 11px; }
.meeting-polish-grid > article > b { display: block; margin-bottom: 7px; color: var(--ink); font-size: 9.5px; }
.meeting-polish-before { background: rgba(247,243,234,.54); }
.meeting-polish-before p {
display: -webkit-box;
overflow: hidden;
margin: 0 0 7px;
color: var(--muted);
font-size: 8.5px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
}
.meeting-polish-grid small { display: block; color: var(--muted); font-size: 7.8px; line-height: 1.4; }
.meeting-polish-options { display: grid; gap: 5px; margin-bottom: 8px; }
.meeting-polish-options label {
display: grid;
grid-template-columns: 17px minmax(0,1fr);
align-items: start;
gap: 7px;
padding: 7px;
border: 1px solid rgba(73,133,101,.12);
border-radius: 9px;
background: rgba(237,244,236,.48);
color: var(--ink);
font-size: 8.8px;
line-height: 1.4;
cursor: pointer;
}
.meeting-polish-options input { margin: 1px 0 0; accent-color: var(--green-deep); }
.meeting-polish-empty { margin: 0 0 8px; color: var(--muted); font-size: 8.8px; line-height: 1.45; }
.meeting-polish-preview > footer { display: flex; justify-content: flex-end; gap: 7px; padding: 0 10px 10px; }
.meeting-polish-preview > footer .btn { width: auto; min-height: 37px; margin: 0; padding: 7px 11px; font-size: 9px; }
.meeting-review-card {
padding: 20px;
border: 1px solid rgba(47,85,69,.2);
background: linear-gradient(135deg,#fffdf9,rgba(247,239,222,.48));
box-shadow: 0 11px 28px rgba(34,48,42,.06);
}
.meeting-review-card .meeting-card-numbered-title { margin-bottom: 16px; }
.meeting-review-card .meeting-card-numbered-title p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.meeting-review-preview {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 8px;
margin: 0 0 11px;
}
.meeting-review-preview > div {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: end;
gap: 2px 6px;
min-height: 66px;
padding: 10px;
border: 1px solid rgba(47,85,69,.1);
border-radius: 11px;
background: rgba(255,255,255,.72);
}
.meeting-review-preview span { grid-column: 1 / -1; color: var(--muted); font-size: 8.5px; font-weight: 750; }
.meeting-review-preview b { color: var(--ink); font-size: 21px; line-height: 1; }
.meeting-review-preview small { color: var(--muted); font-size: 8px; }
.meeting-review-preview > p { grid-column: 1 / -1; margin: 1px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(237,244,236,.48); color: var(--muted); font-size: 9px; line-height: 1.45; }
.meeting-review-preview > p b { color: var(--ink); font-size: inherit; }
.meeting-review-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.meeting-review-checks span,
.meeting-review-checks button { padding: 6px 8px; border-radius: 999px; font: inherit; font-size: 8.5px; font-weight: 800; }
.meeting-review-checks .ok { background: rgba(73,133,101,.11); color: var(--green-deep); }
.meeting-review-checks .warn { border: 0; background: rgba(198,138,54,.13); color: #815719; }
.meeting-review-checks button.warn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.meeting-review-checks button.warn:hover,
.meeting-review-checks button.warn:focus-visible { background: rgba(198,138,54,.22); outline: 2px solid rgba(198,138,54,.18); }
.meeting-review-checks button.warn span { padding: 0; font-size: inherit; }
.meeting-next-date-disclosure { margin: 0 0 13px; border: 1px solid rgba(47,85,69,.11); border-radius: 11px; background: rgba(255,255,255,.55); }
.meeting-next-date-disclosure > summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; min-height: 42px; padding: 8px 11px; color: var(--ink); font-size: 9.5px; font-weight: 800; list-style: none; cursor: pointer; }
.meeting-next-date-disclosure > summary::-webkit-details-marker { display: none; }
.meeting-next-date-disclosure > summary b { color: var(--muted); font-size: 9px; }
.meeting-next-date-disclosure > summary i { color: var(--green-deep); font-size: 8.5px; font-style: normal; }
.meeting-next-date-disclosure > div { padding: 0 11px 11px; }
.meeting-next-date-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8.5px; font-weight: 800; }
.meeting-close-primary { display: block; width: min(100%,320px); min-height: 45px; margin: 0 auto; }
.meeting-draft-leave-host .overlay,
.settings-leave-host .overlay {
position: fixed;
z-index: 10020;
}
.meeting-draft-leave-modal { width: min(92vw,440px); }
.meeting-draft-leave-modal .modal-body p { margin: 0; color: var(--muted); line-height: 1.55; }
.meeting-draft-leave-actions { display: grid; gap: 7px; padding: 0 20px 20px; }
.meeting-draft-leave-actions .btn { width: 100%; margin: 0; }
.meeting-draft-discard { padding: 7px; border: 0; background: transparent; color: var(--coral-deep); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
@media (max-width: 940px) {
.meeting-conclusions-grid { grid-template-columns: 1fr 1fr; }
.meeting-conclusion-block.is-open { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 760px) {
.meeting-draft-status { min-width: 0; padding: 7px; }
.meeting-draft-status small { display: none; }
.meeting-draft-status b { font-size: 9px; }
.meeting-conclusions-head { display: grid; padding: 16px 14px 13px; }
.meeting-conclusion-ai { width: 100%; min-height: 44px; }
.meeting-conclusions-grid { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
.meeting-conclusion-block,
.meeting-conclusion-block.is-open { grid-column: auto; min-height: 0; padding: 12px; }
.meeting-conclusion-add { min-height: 44px; }
.meeting-conclusions-card .meeting-ai-summary-status { padding: 0 9px 11px; }
.meeting-polish-grid { grid-template-columns: 1fr; }
.meeting-polish-preview > footer { display: grid; grid-template-columns: 1fr; }
.meeting-polish-preview > footer .btn { width: 100%; min-height: 44px; }
.meeting-review-card { padding: 16px 13px; }
.meeting-review-preview { grid-template-columns: 1fr 1fr; gap: 6px; }
.meeting-review-preview > div { min-height: 59px; }
.meeting-close-primary { width: 100%; min-height: 48px; }
.meeting-draft-leave-actions { padding: 0 15px calc(16px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width: 360px) {
.meeting-step-section-head { grid-template-columns: 28px minmax(0,1fr); }
.meeting-step-section-head > small { grid-column: 2; justify-self: start; margin-top: -3px; }
.meeting-write-form[data-meeting-phase="write"] .meeting-runway-copy b { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
.meeting-draft-status.is-saving > span { animation: none; }
}
@media (max-width: 760px) {
.brand,
.workspace-search,
.workspace-notifications,
.workspace-add-menu > summary,
.workspace-add-trigger,
.search-close,
.workspace-popover-head > button,
.mobile-more-head .x,
.modal-head .x,
.mobile-more-foot button,
.small-btn,
.scope-btn,
.seg-btn,
.meet-chip,
.idea-prompt,
.people-capacity-link,
.project-layout-switch button,
.meeting-action-menu summary,
.meeting-menu-item,
.meeting-section-actions > *,
button.btn,
a.btn {
min-height: 44px;
}
.workspace-notifications,
.search-close,
.workspace-popover-head > button,
.mobile-more-head .x,
.modal-head .x {
flex-basis: 44px;
width: 44px;
height: 44px;
}
.workspace-tools { gap: 4px; }
.workspace-search-wrap { flex: 1 1 0; min-width: 0; }
.workspace-search { width: 100%; min-width: 0; }
.workspace-add-menu { flex: 0 0 auto; }
.workspace-add-menu > summary { padding-left: 10px; padding-right: 10px; }
.search-inp-wrap { gap: 9px; padding: 9px 10px 9px 13px; }
#search-inp { min-height: 40px; }
.project-search,
.task-filters .flt,
.settings-select,
.chat-load-older {
min-height: 44px;
}
.settings-select-row {
align-items: stretch;
flex-direction: column;
gap: 10px;
}
.settings-select-row .settings-row-text,
.settings-select-row .settings-select {
width: 100%;
max-width: none;
}
.pcc-email,
.pcc-phone,
.trust-crisis-actions a {
display: inline-flex;
align-items: center;
min-height: 44px;
box-sizing: border-box;
}
.trust-crisis-actions a { padding: 8px 11px; }
.meeting-detail-toolbar .btn { min-height: 44px !important; }
body:has(.meeting-detail-gas) .floating-chat-fab { display: none !important; }
}
@media (max-width: 640px) {
.meeting-quickfacts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.meeting-quickfacts > div,
.meeting-quickfacts > a {
border-top: 1px solid var(--ui-line-soft);
}
.meeting-quickfacts > :nth-child(-n+2) { border-top: 0; }
.meeting-quickfacts > :nth-child(odd) { border-left: 0; }
.meeting-quickfacts > :nth-child(even) { border-left: 1px solid var(--ui-line-soft); }
.meeting-quickfacts b {
overflow: visible;
text-overflow: clip;
white-space: normal;
}
}
:root {
--look-line: rgba(56, 85, 74, .13);
--look-line-soft: rgba(56, 85, 74, .08);
--look-shadow: 0 1px 2px rgba(43, 66, 58, .035), 0 14px 34px rgba(43, 66, 58, .065);
--look-shadow-hi: 0 2px 5px rgba(43, 66, 58, .05), 0 20px 46px rgba(43, 66, 58, .10);
--look-radius: 20px;
--look-radius-hero: 22px;
}
@media (min-width: 861px) {
.sidebar {
padding: 24px 14px 18px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
linear-gradient(157deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 22%, transparent 42%),
radial-gradient(circle 122px at 112% 87%, rgba(255,255,255,0) 116px, rgba(255,255,255,.055) 117px, rgba(255,255,255,.055) 118.5px, rgba(255,255,255,0) 120px),
radial-gradient(circle 158px at 112% 87%, rgba(255,255,255,0) 150px, rgba(255,255,255,.032) 151px, rgba(255,255,255,.032) 152.5px, rgba(255,255,255,0) 154px),
radial-gradient(260px 210px at 4% -4%, rgba(224, 122, 95, .13), transparent 64%),
radial-gradient(420px 340px at 118% 104%, rgba(169, 184, 164, .17), transparent 64%),
linear-gradient(168deg, var(--green) 0%, var(--green-deep) 74%, #27392f 100%);
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
box-shadow:
inset -1px 0 0 rgba(255, 255, 255, .07),
6px 0 30px rgba(34, 48, 42, .10);
}
.brand {
padding: 0 4px 14px;
margin-bottom: 2px;
border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.brand svg {
filter: drop-shadow(0 8px 18px rgba(20, 36, 29, .34));
transition: transform var(--motion-base, 200ms) var(--motion-ease, ease);
}
.brand:hover svg { transform: translateY(-1px) scale(1.02); }
.brand b {
font-size: 17px;
letter-spacing: -.012em;
}
.brand small {
margin-top: 4px;
color: rgba(201, 211, 196, .82);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .15em;
}
.nav-eyebrow {
margin: 20px 10px 8px;
color: rgba(201, 211, 196, .6);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .17em;
}
.nav-list {
align-content: start;
grid-auto-rows: max-content;
gap: 4px;
}
.nav-btn {
min-height: 34px;
gap: 9px;
margin: 0;
padding: 7px 10px;
border-radius: 9px;
color: rgba(233, 240, 232, .84);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.nav-btn .nb-ico {
width: 17px;
height: 17px;
flex-basis: 17px;
opacity: .72;
transition: opacity var(--motion-quick, 120ms) ease;
}
.nav-btn:hover:not(.active):not(:disabled) {
background: rgba(255, 255, 255, .075);
color: #fff;
}
.nav-btn:hover:not(.active):not(:disabled) .nb-ico { opacity: 1; }
.nav-btn.active {
background: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 130%);
color: #fff;
font-weight: 700;
box-shadow:
0 2px 8px rgba(190, 90, 64, .18),
inset 0 1px 0 rgba(255, 255, 255, .18);
}
.nav-btn.active .nb-ico {
color: #fff;
opacity: 1;
}
.nav-btn .nb-count {
padding: 1px 6px;
background: rgba(255, 255, 255, .11);
font-size: 10px;
font-weight: 700;
letter-spacing: .01em;
}
.nav-btn.active .nb-count {
background: rgba(0, 0, 0, .14);
color: #fff;
}
.group-filter {
margin-top: 18px;
padding-top: 12px;
border-top-color: rgba(255, 255, 255, .1);
}
.group-btn {
border-color: rgba(255, 255, 255, .16);
color: rgba(223, 231, 223, .8);
font-weight: 800;
}
.group-btn:hover:not(.active) {
background: rgba(255, 255, 255, .09);
color: #fff;
}
.sidebar-foot {
padding-top: 16px;
border-top-color: rgba(255, 255, 255, .1);
}
.sidebar .nav-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sidebar .sidebar-foot {
flex: 0 0 auto;
margin-top: 0;
}
.foot-btn {
min-height: 34px;
padding: 7px 13px;
border-radius: 999px;
color: rgba(214, 223, 212, .82);
font-size: 12.5px;
font-weight: 600;
transition: background var(--motion-quick, 120ms) ease, color var(--motion-quick, 120ms) ease;
}
.foot-btn:hover {
background: rgba(255, 255, 255, .1);
color: #fff;
}
.foot-btn .nb-ico { opacity: .72; }
.foot-btn:hover .nb-ico { opacity: 1; }
.session-card {
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: rgba(255, 255, 255, .07);
transition:
background var(--motion-quick, 120ms) ease,
border-color var(--motion-quick, 120ms) ease,
transform var(--motion-quick, 120ms) ease;
}
.session-card:hover {
border-color: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .13);
transform: translateY(-1px);
}
.session-card span {
color: rgba(201, 211, 196, .78);
letter-spacing: .09em;
}
.sidebar .btn-ghost {
border-color: rgba(255, 255, 255, .22);
color: rgba(226, 234, 226, .92);
font-weight: 700;
}
.sidebar .btn-ghost:hover {
border-color: rgba(255, 255, 255, .34);
background: rgba(255, 255, 255, .12);
}
}
@media (min-width: 861px) {
.view-head h1,
.view-head h1.view-title {
letter-spacing: -.022em;
}
.workspace-search {
border-color: var(--look-line);
box-shadow: 0 3px 12px rgba(43, 66, 58, .045);
transition:
border-color var(--motion-quick, 120ms) ease,
box-shadow var(--motion-quick, 120ms) ease,
background var(--motion-quick, 120ms) ease;
}
.workspace-search:hover {
border-color: rgba(56, 85, 74, .24);
background: rgba(255, 255, 255, .92);
box-shadow: 0 6px 18px rgba(43, 66, 58, .08);
}
.workspace-notifications:hover {
border-color: var(--look-line);
background: rgba(255, 255, 255, .7);
}
}
.dash-today,
.dash-side > * {
border-color: var(--look-line);
box-shadow: var(--look-shadow);
}
.dash-today {
border-radius: var(--look-radius-hero);
background:
radial-gradient(560px 320px at 100% -6%, rgba(224, 122, 95, .075), transparent 62%),
radial-gradient(460px 380px at -10% 108%, rgba(169, 184, 164, .13), transparent 64%),
rgba(255, 253, 248, .94);
box-shadow: var(--look-shadow-hi);
}
.dash-today::after {
right: -76px;
top: -84px;
width: 220px;
height: 220px;
border: 1px solid rgba(56, 85, 74, .07);
background: transparent;
box-shadow:
0 0 0 28px rgba(224, 122, 95, .032),
0 0 0 60px rgba(169, 184, 164, .045);
}
.dash-today-head { border-bottom-color: var(--look-line-soft); }
.dash-today h2 { letter-spacing: -.02em; }
@media (min-width: 861px) and (max-width: 1060px) {
.dash-top {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.dash-grid,
.dash-onboarding-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 861px) {
.dash-today-head { flex-wrap: wrap; }
.dash-status-strip {
flex: 1 1 100%;
justify-content: flex-start;
margin-top: 14px;
}
}
@media (min-width: 1061px) {
.dash-status-strip { flex-wrap: nowrap; }
}
.dash-status-pill {
min-width: 98px;
padding: 10px 12px;
border-color: var(--look-line);
border-radius: 14px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 2px 7px rgba(43, 66, 58, .045);
transition:
transform var(--motion-quick, 120ms) ease,
box-shadow var(--motion-quick, 120ms) ease,
border-color var(--motion-quick, 120ms) ease;
}
.dash-status-pill:hover {
border-color: rgba(56, 85, 74, .22);
box-shadow: 0 8px 20px rgba(43, 66, 58, .1);
transform: translateY(-1px);
}
.dash-status-pill.warn {
border-color: rgba(217, 154, 68, .26);
background:
linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(217, 154, 68, .07));
}
.dash-quick-actions .btn { width: auto; padding-inline: 22px; }
.dash-quick-actions .btn-ghost {
border-color: var(--look-line);
background: rgba(255, 255, 255, .82);
}
.dash-quick-actions .btn-ghost:hover {
border-color: var(--sage-deep);
background: #fff;
box-shadow: 0 6px 16px rgba(43, 66, 58, .08);
}
.dash-agenda-panel { border-radius: var(--look-radius); }
.dash-agenda-panel .dash-day-event {
background:
radial-gradient(320px 200px at 100% 0%, rgba(224, 122, 95, .085), transparent 66%),
rgba(248, 242, 229, .6);
transition: background var(--motion-base, 200ms) ease;
}
.dash-agenda-panel .dash-day-event:hover {
background:
radial-gradient(320px 200px at 100% 0%, rgba(224, 122, 95, .12), transparent 66%),
rgba(250, 245, 234, .82);
}
.dash-meeting-row {
border-radius: 14px;
transition:
background var(--motion-quick, 120ms) ease,
transform var(--motion-quick, 120ms) ease;
}
button.dash-meeting-row:hover {
background: rgba(169, 184, 164, .12);
transform: translateY(-1px);
}
.dash-section > .card,
.dash-organization-body .card,
.dash-onboarding,
.dash-memory-strip,
.dash-organization,
.dash-newbie,
.dash-newbie-card {
border-radius: var(--look-radius);
border-color: var(--look-line);
box-shadow: var(--look-shadow);
}
.dash-section > .card,
.dash-organization-body .card {
background:
radial-gradient(420px 300px at 108% -10%, rgba(169, 184, 164, .09), transparent 62%),
var(--ui-surface);
}
.dash-seed-card {
border-radius: var(--look-radius);
border-color: var(--look-line);
background:
radial-gradient(420px 260px at 100% 0%, rgba(224, 122, 95, .085), transparent 64%),
rgba(255, 253, 248, .92);
box-shadow: var(--look-shadow);
}
.dash-seed-idea {
border-radius: 14px;
transition:
background var(--motion-quick, 120ms) ease,
transform var(--motion-quick, 120ms) ease;
}
.dash-seed-idea:hover {
background: rgba(169, 184, 164, .13);
transform: translateY(-1px);
}
.dash-onboarding {
padding: 22px;
background:
radial-gradient(520px 300px at 102% -12%, rgba(169, 184, 164, .13), transparent 62%),
rgba(255, 253, 248, .9);
}
.dash-onboarding-step {
border-color: var(--look-line-soft);
border-radius: 14px;
transition:
border-color var(--motion-quick, 120ms) ease,
box-shadow var(--motion-quick, 120ms) ease;
}
.dash-onboarding-step:not(.done):hover {
border-color: rgba(56, 85, 74, .2);
box-shadow: 0 6px 16px rgba(43, 66, 58, .06);
}
.dash-memory-strip {
border-color: rgba(56, 85, 74, .15);
background:
linear-gradient(100deg, rgba(240, 245, 236, .92), rgba(255, 252, 246, .9));
}
.dash-memory-open {
border-radius: 12px;
transition:
background var(--motion-quick, 120ms) ease,
transform var(--motion-quick, 120ms) ease;
}
.dash-memory-open:hover {
background: rgba(49, 88, 70, .14);
transform: translateY(-1px);
}
.now-item {
border-radius: 14px;
border-color: var(--look-line-soft);
background: rgba(255, 255, 255, .96);
}
.now-item:hover {
border-color: rgba(224, 122, 95, .5);
box-shadow: 0 6px 18px rgba(43, 66, 58, .09);
}
.wait-item,
.care-item {
padding-inline: 10px;
margin-inline: -8px;
border-radius: 12px;
transition: background var(--motion-quick, 120ms) ease;
}
.wait-item:hover,
.care-item:hover { background: rgba(169, 184, 164, .12); }
.tline,
.pj-line {
padding-inline: 10px;
margin-inline: -8px;
border-radius: 12px;
transition: background var(--motion-quick, 120ms) ease;
}
.tline:hover,
.pj-line:hover { background: rgba(169, 184, 164, .13); }
@media (min-width: 861px) {
.dash-top {
gap: 20px;
margin-bottom: 20px;
}
.dash-section { margin-top: 20px; }
.dash-today { padding: 28px; }
}
.dash-agenda-panel .dash-meeting-list {
gap: 8px;
padding: 2px 14px 16px;
}
.dash-agenda-panel .dash-meeting-row {
padding: 13px 14px;
border: 1px solid var(--look-line-soft);
border-radius: 16px;
background: rgba(255, 255, 255, .7);
}
.dash-agenda-panel button.dash-meeting-row:hover {
border-color: rgba(56, 85, 74, .2);
background: #fff;
box-shadow: 0 6px 18px rgba(43, 66, 58, .07);
}
.dash-agenda-panel .dash-meeting-row.empty {
opacity: 1;
border-style: dashed;
border-color: rgba(56, 85, 74, .17);
background: rgba(246, 241, 231, .4);
}
.dash-agenda-panel .dash-meeting-row.empty .dash-meeting-date.muted {
border-style: dashed;
border-color: rgba(56, 85, 74, .2);
background: transparent;
color: rgba(95, 111, 102, .68);
}
.dash-agenda-panel .dash-meeting-row.empty b {
color: var(--muted);
font-size: 14px;
}
.dash-agenda-panel .dash-side-kicker {
font-size: 9.5px;
letter-spacing: .12em;
opacity: .82;
}
.dash-agenda-panel .dash-meetings-head { padding: 15px 16px 9px; }
@media (min-width: 861px) {
.workspace-tool-zone { margin-bottom: 14px; }
.workspace-tools {
width: fit-content;
margin-left: auto;
gap: 2px;
padding: 4px;
border: 1px solid var(--look-line);
border-radius: 18px;
background: rgba(255, 253, 248, .74);
box-shadow:
0 2px 6px rgba(43, 66, 58, .035),
0 14px 32px rgba(43, 66, 58, .05);
backdrop-filter: blur(16px) saturate(115%);
-webkit-backdrop-filter: blur(16px) saturate(115%);
}
.workspace-search {
min-width: 236px;
min-height: 38px;
padding: 6px 12px;
border-color: transparent;
border-radius: 14px;
background: transparent;
box-shadow: none;
}
.workspace-search svg { width: 16px; height: 16px; flex-basis: 16px; }
.workspace-search > span {
flex: 1 1 auto;
font-size: 12px;
font-weight: 650;
text-align: left;
}
.workspace-search kbd {
flex: 0 0 auto;
padding: 3px 6px;
border-color: rgba(47, 85, 69, .12);
background: rgba(246, 241, 231, .8);
font-size: 9.5px;
}
.workspace-search:hover,
.workspace-search.on {
border-color: transparent;
background: rgba(255, 255, 255, .94);
color: var(--ink);
}
.workspace-search:hover svg { color: var(--coral-deep); }
.workspace-tools > .workspace-notifications-wrap { margin-left: 7px; }
.workspace-tools > .workspace-notifications-wrap::before {
content: "";
position: absolute;
left: -5px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--look-line-soft);
}
.workspace-notifications {
flex-basis: 38px;
width: 38px;
height: 38px;
border-radius: 14px;
}
.workspace-notifications > svg { width: 17px; height: 17px; }
.workspace-notifications:hover,
.workspace-notifications.on {
border-color: transparent;
background: rgba(255, 255, 255, .94);
color: var(--ink);
}
.workspace-notifications .nb-count { border-color: rgba(255, 253, 248, .96); }
.workspace-add-menu > summary { min-height: 38px; }
.workspace-add-trigger {
min-height: 38px;
padding: 6px 14px;
border-radius: 14px;
color: var(--green-deep);
font-size: 12px;
font-weight: 750;
}
.workspace-add-trigger > span { font-size: 14px; }
.workspace-add-trigger:hover,
.workspace-add-menu[open] > .workspace-add-trigger {
background: rgba(224, 122, 95, .12);
}
.workspace-search:focus-visible,
.workspace-notifications:focus-visible,
.workspace-add-menu > summary:focus-visible {
outline: 2px solid rgba(224, 122, 95, .55);
outline-offset: 1px;
}
}
:root {
--font-display: var(--display);
}
.dash-panel-title .dash-panel-icon,
.dash-meetings-head > .dash-panel-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin-top: 0;
border-radius: 10px;
background: rgba(169, 184, 164, .22);
color: var(--green);
}
.dash-panel-title .dash-panel-icon svg,
.dash-meetings-head > .dash-panel-icon svg {
flex: 0 0 15px;
width: 15px;
height: 15px;
}
.dash-panel-title { gap: 10px; }
.dash-now-inline .dash-panel-icon {
background: rgba(224, 122, 95, .13);
color: var(--coral-deep);
}
@media (max-width: 760px) {
.dash-panel-title .dash-panel-icon,
.dash-meetings-head > .dash-panel-icon {
flex-basis: 24px;
width: 24px;
height: 24px;
border-radius: 9px;
}
}
.now-open {
padding: 5px 11px;
border-radius: 999px;
background: rgba(224, 122, 95, .1);
font-size: 11.5px;
}
.now-item:hover .now-open { background: rgba(224, 122, 95, .17); }
.dash-memory-open {
font-family: var(--body);
font-size: 21px;
font-weight: 400;
line-height: 1;
}
.dash-spark {
width: fit-content;
max-width: 100%;
margin: 2px 0 20px;
padding: 9px 15px 9px 12px;
border: 1px solid rgba(224, 122, 95, .15);
border-radius: 999px;
background: rgba(224, 122, 95, .055);
font-size: 14px;
}
@media (max-width: 760px) {
.dash-spark { padding: 8px 13px 8px 11px; font-size: 13px; }
}
@media (min-width: 861px) {
.workspace-tools {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .8),
0 2px 6px rgba(43, 66, 58, .035),
0 14px 32px rgba(43, 66, 58, .05);
}
.workspace-search {
background: rgba(255, 255, 255, .5);
box-shadow: inset 0 0 0 1px rgba(56, 85, 74, .055);
}
.workspace-search:hover,
.workspace-search.on {
background: #fff;
box-shadow: inset 0 0 0 1px rgba(56, 85, 74, .12);
}
.workspace-add-trigger {
background: rgba(56, 85, 74, .06);
color: var(--green-deep);
}
.workspace-add-trigger:hover,
.workspace-add-menu[open] > .workspace-add-trigger {
background: rgba(224, 122, 95, .17);
color: var(--coral-deep);
}
}
.nav-btn .nb-ico,
.foot-btn .nb-ico,
.dash-panel-icon,
.dash-memory-icon,
.dash-status-pill b,
.now-open,
.dash-day-link svg,
.dash-seed-card .dash-side-kicker svg,
.brand svg {
transition:
transform var(--motion-base) var(--motion-ease),
opacity var(--motion-quick) ease,
background-color var(--motion-base) ease,
color var(--motion-base) ease;
}
.now-item,
.wait-item,
.care-item,
.tline,
.pj-line,
.dash-status-pill,
.dash-seed-idea,
.session-card,
.foot-btn,
.dash-memory-open {
transition:
transform var(--motion-quick) var(--motion-ease),
background-color var(--motion-base) ease,
border-color var(--motion-base) ease,
box-shadow var(--motion-base) ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.nav-btn:hover:not(:disabled) .nb-ico,
.foot-btn:hover .nb-ico {
transform: rotate(-5deg) scale(1.08);
}
.brand:hover svg { transform: translateY(-1px) rotate(-2deg) scale(1.025); }
.dash-section > .card:hover .dash-panel-icon,
.dash-today:hover .dash-now-inline .dash-panel-icon,
.dash-organization-body .card:hover .dash-panel-icon {
transform: rotate(-4deg) scale(1.07);
}
.dash-memory-strip:hover .dash-memory-icon { transform: rotate(-3deg) scale(1.05); }
.dash-status-pill:hover b { transform: scale(1.06); }
.now-item:hover .now-open { transform: translateX(2px); }
.dash-day-event:hover .dash-day-link svg { transform: translateX(3px); }
.dash-seed-card:hover .dash-side-kicker svg { transform: rotate(4deg) scale(1.08); }
.wait-item:hover,
.care-item:hover,
.tline:hover,
.pj-line:hover {
transform: translateX(2px);
}
.dash-seed-idea:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: no-preference) {
#overview-view > :nth-child(5),
#collection-panel > :nth-child(5) { animation-delay: 115ms; }
#overview-view > :nth-child(6),
#collection-panel > :nth-child(6) { animation-delay: 140ms; }
#overview-view > :nth-child(n + 7),
#collection-panel > :nth-child(n + 7) { animation-delay: 165ms; }
.dash-status-pill b { animation: korenkaStatSettle .42s var(--motion-ease) backwards; }
.dash-status-pill:nth-child(2) b { animation-delay: 60ms; }
.dash-status-pill:nth-child(3) b { animation-delay: 120ms; }
}
@keyframes korenkaStatSettle {
0% { opacity: 0; transform: translateY(4px) scale(.9); }
70% { opacity: 1; transform: translateY(0) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
:root {
--font-sans: var(--body);
}
.work-scope-bar {
border-radius: var(--look-radius);
border-color: var(--look-line);
background:
radial-gradient(420px 260px at 104% -20%, rgba(169, 184, 164, .12), transparent 62%),
rgba(255, 253, 248, .82);
box-shadow: var(--look-shadow);
}
.scope-btn {
border-radius: 999px;
transition:
background-color var(--motion-base) ease,
color var(--motion-base) ease,
box-shadow var(--motion-base) ease;
}
.scope-btn.on {
background: rgba(255, 255, 255, .95);
box-shadow: 0 2px 7px rgba(43, 66, 58, .07);
}
.project-search {
border-radius: 14px;
border-color: var(--look-line);
background: rgba(255, 255, 255, .72);
box-shadow: inset 0 0 0 1px rgba(56, 85, 74, .04);
transition: border-color var(--motion-base) ease, background-color var(--motion-base) ease;
}
.project-search:focus-within {
border-color: rgba(224, 122, 95, .5);
background: #fff;
box-shadow: 0 0 0 3px var(--ui-focus);
}
.project-layout-switch {
border-radius: 14px;
border-color: var(--look-line);
background: rgba(255, 253, 248, .78);
}
.project-layout-switch button { border-radius: 11px; }
.project-layout-switch button.on {
background: #fff;
box-shadow: 0 2px 7px rgba(43, 66, 58, .08);
}
.board .col {
border-radius: var(--look-radius);
border-color: var(--look-line);
background:
radial-gradient(320px 220px at 108% -12%, rgba(169, 184, 164, .1), transparent 64%),
rgba(250, 247, 240, .72);
}
.board .col-head {
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid var(--look-line-soft);
font-size: 12.5px;
letter-spacing: .01em;
}
.board .col-head .cc {
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(56, 85, 74, .09);
color: var(--green);
font-size: 11px;
font-weight: 800;
line-height: 22px;
text-align: center;
}
.pcard,
.person-card {
border-radius: 16px;
border-color: var(--look-line);
background: rgba(255, 253, 248, .94);
box-shadow: 0 1px 2px rgba(43, 66, 58, .03), 0 8px 20px rgba(43, 66, 58, .05);
}
.person-card {
background:
radial-gradient(360px 240px at 108% -12%, rgba(169, 184, 164, .10), transparent 60%),
rgba(255, 253, 248, .94);
}
.pcard:hover,
.person-card:hover {
border-color: rgba(56, 85, 74, .24);
box-shadow: var(--look-shadow-hi);
}
.pcard .pc-name { letter-spacing: -.008em; }
.pcard .pc-num {
color: var(--sage-deep);
font-weight: 800;
}
.pcard .pc-foot { border-top-color: var(--look-line-soft); }
.pcard .pc-tasks {
padding: 3px 9px;
border-radius: 999px;
background: rgba(56, 85, 74, .07);
color: var(--green);
font-size: 11px;
font-weight: 750;
}
.col-add {
border-radius: 14px;
border-style: dashed;
border-color: rgba(56, 85, 74, .22);
color: var(--green);
font-weight: 700;
transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease;
}
.col-add:hover {
border-color: rgba(224, 122, 95, .45);
background: rgba(224, 122, 95, .07);
color: var(--coral-deep);
}
.project-list-row {
border-radius: 16px;
border-color: var(--look-line);
}
.project-list-row:hover {
border-color: rgba(56, 85, 74, .24);
box-shadow: var(--look-shadow);
}
.project-list-arrow {
transition: transform var(--motion-base) var(--motion-ease);
}
.project-hero-card {
position: relative;
overflow: hidden;
border-radius: var(--look-radius-hero);
border-color: var(--look-line);
background:
radial-gradient(560px 320px at 100% -6%, rgba(224, 122, 95, .075), transparent 62%),
radial-gradient(460px 380px at -10% 108%, rgba(169, 184, 164, .13), transparent 64%),
rgba(255, 253, 248, .94);
box-shadow: var(--look-shadow-hi);
}
.project-hero-card::after {
content: "";
position: absolute;
right: -76px;
top: -84px;
width: 220px;
height: 220px;
border: 1px solid rgba(56, 85, 74, .07);
border-radius: 50%;
box-shadow:
0 0 0 28px rgba(224, 122, 95, .032),
0 0 0 60px rgba(169, 184, 164, .045);
pointer-events: none;
}
.project-hero-card > * { position: relative; z-index: 1; }
.project-hero-title { letter-spacing: -.022em; }
.project-hero-avatar {
border-radius: 18px;
box-shadow: 0 8px 20px rgba(43, 66, 58, .12);
}
.project-hero-actions .btn { border-radius: 999px; }
.project-hero-actions .btn-ghost {
border-color: var(--look-line);
background: rgba(255, 255, 255, .8);
}
.project-hero-actions .btn-ghost:hover {
border-color: var(--sage-deep);
background: #fff;
box-shadow: 0 6px 16px rgba(43, 66, 58, .08);
}
.project-pulse {
border-radius: var(--look-radius);
border-color: var(--look-line);
background:
radial-gradient(420px 280px at 102% -14%, rgba(169, 184, 164, .1), transparent 62%),
rgba(255, 253, 248, .86);
box-shadow: var(--look-shadow);
overflow: hidden;
}
.project-next-step b { letter-spacing: -.01em; }
.project-pulse-links > button {
transition:
background-color var(--motion-base) ease,
transform var(--motion-quick) var(--motion-ease);
}
.project-pulse-links > button:hover { background: rgba(169, 184, 164, .12); }
.project-pulse-links > button b { font-variant-numeric: tabular-nums; }
.project-tabs {
border-radius: 999px;
border-color: var(--look-line);
background: rgba(250, 247, 240, .8);
}
.project-tab { border-radius: 999px; }
.project-tab.active {
background: #fff;
box-shadow: 0 2px 8px rgba(43, 66, 58, .09);
}
.project-section {
border-radius: var(--look-radius);
border-color: var(--look-line);
}
.project-detail .card,
.project-detail .card.pad,
.project-section .card,
.project-section .card.pad {
border-radius: var(--look-radius);
border-color: var(--look-line);
box-shadow: var(--look-shadow);
}
.work-origin-link,
.project-origin-link {
border-radius: 16px;
border-color: var(--look-line);
transition:
border-color var(--motion-base) ease,
background-color var(--motion-base) ease,
transform var(--motion-quick) var(--motion-ease);
}
.work-origin-link:hover { border-color: rgba(224, 122, 95, .4); }
.project-next-task {
border-radius: 14px;
border-color: var(--look-line-soft);
}
.project-next-task:hover { border-color: rgba(56, 85, 74, .22); }
.project-next-chevron { transition: transform var(--motion-base) var(--motion-ease); }
.project-agreements-preview {
border-radius: var(--look-radius);
border-color: var(--look-line);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.project-list-row:hover .project-list-arrow { transform: translateX(3px); }
.project-next-task:hover .project-next-chevron { transform: translateX(2px); }
.project-pulse-links > button:hover { transform: translateY(-1px); }
.work-origin-link:hover { transform: translateY(-1px); }
}
.finance-page .focus-value,
.finance-card-summary b,
.finance-expense-amount,
.kf-gsum,
.finance-edition-btn small,
.project-pulse-links b {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.finance-glance .focus-tile {
border-radius: 16px;
border-color: var(--look-line);
background:
radial-gradient(240px 160px at 108% -30%, rgba(169, 184, 164, .12), transparent 66%),
rgba(255, 253, 248, .9);
box-shadow: var(--look-shadow);
transition: box-shadow var(--motion-base) ease, transform var(--motion-quick) var(--motion-ease);
}
.finance-glance .focus-label {
color: var(--muted);
font-size: 10px;
font-weight: 850;
letter-spacing: .09em;
}
.finance-glance .focus-value {
font-family: var(--display);
font-size: 22px;
letter-spacing: -.015em;
}
.finance-glance .finance-progress {
height: 8px;
margin-top: auto;
border-color: transparent;
background: rgba(56, 85, 74, .1);
}
.finance-editions {
border-radius: var(--look-radius);
border-color: var(--look-line);
background:
radial-gradient(420px 240px at 104% -20%, rgba(169, 184, 164, .12), transparent 62%),
rgba(255, 253, 248, .78);
box-shadow: var(--look-shadow);
}
.finance-edition-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 9px;
}
.finance-edition-btn {
display: grid;
gap: 3px;
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--look-line);
border-radius: 14px;
background: rgba(255, 255, 255, .74);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition:
border-color var(--motion-base) ease,
background-color var(--motion-base) ease,
box-shadow var(--motion-base) ease,
transform var(--motion-quick) var(--motion-ease);
}
.finance-edition-btn b { font-size: 14px; font-weight: 800; }
.finance-edition-btn small {
color: var(--muted);
font-size: 11.5px;
line-height: 1.35;
}
.finance-edition-btn:hover {
border-color: rgba(56, 85, 74, .26);
background: #fff;
box-shadow: var(--look-shadow);
}
.finance-edition-btn.is-current {
border-color: rgba(224, 122, 95, .45);
background:
linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(224, 122, 95, .09));
box-shadow: 0 6px 18px rgba(200, 92, 66, .12);
}
.finance-edition-btn.is-current b { color: var(--coral-deep); }
.finance-mode-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.finance-mode-card {
border-radius: 16px;
border-color: var(--look-line);
box-shadow: var(--look-shadow);
transition:
border-color var(--motion-base) ease,
background-color var(--motion-base) ease,
box-shadow var(--motion-base) ease,
transform var(--motion-quick) var(--motion-ease);
}
.finance-mode-card:hover:not(.active) {
border-color: rgba(56, 85, 74, .24);
background: rgba(255, 255, 255, .86);
}
.finance-mode-card.active {
border-color: rgba(224, 122, 95, .42);
background:
radial-gradient(320px 180px at 100% -40%, rgba(224, 122, 95, .1), transparent 66%),
var(--paper);
box-shadow: 0 10px 26px rgba(200, 92, 66, .11);
}
.finance-mode-card span { border-radius: 13px; }
.finance-mode-card.active span { box-shadow: 0 5px 14px rgba(200, 92, 66, .28); }
.finance-work-card {
border-radius: var(--look-radius);
border-color: var(--look-line);
box-shadow: var(--look-shadow-hi);
overflow: hidden;
}
.finance-card-kicker span { border-radius: 999px; }
.finance-card-summary {
gap: 10px;
border-bottom-color: var(--look-line-soft);
background: rgba(246, 241, 231, .42);
}
.finance-card-summary > div {
padding: 11px 13px;
border-color: var(--look-line);
border-radius: 14px;
background: rgba(255, 255, 255, .86);
}
.finance-card-summary b {
font-family: var(--display);
font-size: 19px;
letter-spacing: -.012em;
}
.finance-group {
border-radius: 16px;
border-color: var(--look-line);
background: rgba(255, 255, 255, .62);
padding: 12px 14px 14px;
}
.finance-group.is-income { background: rgba(169, 184, 164, .09); }
.kf-ghead {
gap: 9px;
margin: 2px 0 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--look-line-soft);
color: var(--green);
font-size: 10.5px;
letter-spacing: .1em;
font-weight: 850;
}
.kf-gdot {
display: inline-block;
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.kf-gsum {
margin-left: auto;
color: var(--ink);
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
.finance-group-add {
width: auto;
min-height: 36px;
margin-top: 12px;
padding: 7px 14px;
font-size: 12.5px;
}
.finance-page .kf-item,
.finance-work-card .kf-item {
padding: 2px 0;
border-top: 0;
}
.finance-page .kf-row,
.finance-work-card .kf-row {
gap: 10px;
padding: 3px 0;
border-top: 0;
border-radius: 12px;
transition: background-color var(--motion-quick) ease;
}
.finance-page .kf-item + .kf-item .kf-row,
.finance-work-card .kf-item + .kf-item .kf-row {
border-top: 1px solid var(--look-line-soft);
}
.finance-page .kf-label,
.finance-work-card .kf-label {
padding: 9px 11px;
border-color: transparent;
border-radius: 11px;
background: rgba(255, 255, 255, .55);
font-size: 13.5px;
transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease;
}
.finance-page .kf-label:hover,
.finance-work-card .kf-label:hover {
border-color: var(--look-line);
background: #fff;
}
.finance-page .kf-label:focus,
.finance-work-card .kf-label:focus {
border-color: rgba(224, 122, 95, .5);
background: #fff;
box-shadow: 0 0 0 3px var(--ui-focus);
}
.finance-page .kf-amt,
.finance-work-card .kf-amt {
flex-basis: 158px;
gap: 7px;
}
.finance-page .kf-amt input,
.finance-work-card .kf-amt input {
padding: 9px 11px;
border-color: var(--look-line);
border-radius: 11px;
background: rgba(255, 255, 255, .9);
font-size: 13.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.finance-page .kf-amt input:focus,
.finance-work-card .kf-amt input:focus {
border-color: rgba(224, 122, 95, .55);
box-shadow: 0 0 0 3px var(--ui-focus);
}
.finance-page .kf-kc,
.finance-work-card .kf-kc {
color: var(--muted);
font-size: 11.5px;
font-weight: 750;
}
.finance-page .kf-rm,
.finance-work-card .kf-rm {
border-radius: 10px;
opacity: .5;
transition: opacity var(--motion-base) ease, background-color var(--motion-base) ease;
}
.finance-page .kf-row:hover .kf-rm,
.finance-work-card .kf-row:hover .kf-rm { opacity: 1; }
.finance-page .kf-rm:hover,
.finance-work-card .kf-rm:hover { background: rgba(224, 122, 95, .13); }
.finance-expense-item {
padding: 0;
border-top: 0;
}
.finance-expense-row {
align-items: center;
padding: 10px 12px;
border-radius: 13px;
background: rgba(255, 255, 255, .74);
transition: background-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.finance-expense-item + .finance-expense-item { margin-top: 7px; }
.finance-expense-row:hover {
background: #fff;
box-shadow: 0 4px 14px rgba(43, 66, 58, .06);
}
.finance-expense-main b { font-size: 13.5px; }
.finance-expense-amount {
font-family: var(--display);
font-size: 16px;
font-weight: 800;
letter-spacing: -.01em;
}
.kf-meta {
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
}
.kf-paid,
.kf-priority,
.kf-approval-wait,
.kf-approval-ok,
.kf-bank-wait,
.kf-bank-ok {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
}
.kf-paid { background: rgba(47, 107, 72, .13); color: var(--ok); }
.kf-priority { background: rgba(217, 154, 68, .18); color: #8d6725; }
.kf-approval-wait,
.kf-bank-wait { background: rgba(217, 154, 68, .15); color: #805f25; }
.kf-approval-ok,
.kf-bank-ok { background: rgba(47, 107, 72, .12); color: var(--ok); }
.finance-expense-actions .small-btn { border-radius: 999px; }
.finance-paid-btn {
border-color: rgba(47, 107, 72, .32);
background: rgba(47, 107, 72, .1);
color: var(--ok);
font-weight: 800;
}
.finance-paid-btn:hover {
border-color: var(--ok);
background: rgba(47, 107, 72, .18);
}
.finance-expense-delete-btn {
border-color: rgba(154, 84, 67, .26);
color: #875547;
background: rgba(255, 255, 255, .76);
}
.finance-expense-delete-btn:hover {
border-color: rgba(154, 84, 67, .44);
background: rgba(224, 122, 95, .11);
}
.finance-seed-card {
border-radius: var(--look-radius);
border-color: var(--look-line);
background:
radial-gradient(420px 240px at 100% 0%, rgba(224, 122, 95, .1), transparent 64%),
rgba(255, 253, 248, .9);
box-shadow: var(--look-shadow);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.finance-glance .focus-tile:hover { transform: translateY(-1px); }
.finance-edition-btn:hover { transform: translateY(-1px); }
.finance-mode-card:hover:not(.active) { transform: translateY(-1px); }
}
@media (max-width: 980px) {
.finance-mode-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.finance-mode-cards { grid-template-columns: 1fr; }
.finance-page .kf-amt,
.finance-work-card .kf-amt { flex-basis: 0; }
.finance-group { padding: 11px 11px 12px; }
.finance-expense-row { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.brand:hover svg,
.session-card:hover,
.dash-status-pill:hover,
button.dash-meeting-row:hover,
.dash-seed-idea:hover,
.dash-memory-open:hover {
transform: none;
}
}
.fchat-thread-meta,
.fchat-thread-meta:not(:empty) {
box-sizing: border-box;
flex: 0 0 25px;
width: 100%;
min-height: 25px;
height: 25px;
padding: 3px 12px 4px;
overflow: hidden;
border-top: 1px solid transparent;
}
.fchat-thread-meta:not(:empty) { border-top-color: rgba(47,85,69,.08); }
.fchat-thread-meta:empty { visibility: hidden; }
.fcw-thread { overflow-anchor: none; }
.chat-image-open {
aspect-ratio: var(--chat-image-ratio, 4 / 3);
min-height: 0;
max-height: 430px;
border-radius: 11px;
background: #edf0eb;
}
.chat-image-placeholder {
width: 100%;
min-height: 0;
height: 100%;
padding: 14px;
}
.chat-image-placeholder svg { width: 24px; height: 24px; }
#modal-root .modal.chat-image-compose-modal {
width: min(620px, calc(100vw - 28px));
max-width: 620px;
border-radius: 18px;
}
.chat-image-compose-modal .modal-head {
min-height: 52px;
padding: 10px 14px;
background: var(--paper);
}
.chat-image-compose-modal .modal-head h3 { font-size: 17px; }
.chat-image-modal .modal-head .x {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
font: 400 28px/1 var(--font-sans);
}
.chat-image-compose-modal .modal-body { padding: 10px 14px 12px; }
.chat-image-send-form { gap: 10px; }
.chat-image-draft-preview {
min-height: 0;
max-height: min(48dvh, 500px);
border-radius: 12px;
background: #edf0eb;
}
.chat-image-draft-preview img { max-height: min(48dvh, 500px); }
.chat-image-caption { gap: 5px; }
.chat-image-caption > span {
display: flex;
align-items: baseline;
gap: 6px;
color: var(--ink);
font-size: 12px;
}
.chat-image-caption > span small { color: var(--muted); font-weight: 500; }
.chat-image-send-form .chat-image-caption textarea {
min-height: 54px;
max-height: 112px;
resize: vertical;
padding: 10px 11px;
border-radius: 11px;
background: #fff;
}
.chat-image-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 11px;
color: var(--muted);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.chat-image-meta span + span::before { content: "·"; margin-right: 11px; }
.chat-image-privacy {
font-size: 10.5px;
line-height: 1.35;
}
.chat-image-compose-modal .modal-foot {
gap: 8px;
padding: 10px 14px !important;
background: var(--paper);
}
.chat-image-compose-modal .modal-foot .btn {
width: auto;
min-width: 92px;
min-height: 40px;
margin: 0;
border-radius: 11px;
}
.chat-image-preparing {
min-height: 150px;
gap: 7px;
padding: 34px 16px;
}
.chat-image-spinner {
width: 24px;
height: 24px;
border-width: 2px;
}
#modal-root .overlay.chat-image-viewer-modal-overlay {
align-items: center;
padding: 18px;
background: rgba(15,29,24,.9);
backdrop-filter: blur(8px);
}
#modal-root .modal.chat-image-viewer-modal {
width: min(1100px, calc(100vw - 36px));
max-width: 1100px;
height: min(900px, calc(100dvh - 36px));
max-height: calc(100dvh - 36px);
border: 0;
border-radius: 18px;
background: #172720;
color: #fff;
box-shadow: none;
}
.chat-image-viewer-modal .modal-head {
min-height: 52px;
padding: 9px 13px;
border: 0;
background: transparent;
}
.chat-image-viewer-modal .modal-head h3 {
color: rgba(255,255,255,.88);
font: 700 13px/1.2 var(--font-sans);
}
.chat-image-viewer-modal .modal-head .x { color: #fff; background: rgba(255,255,255,.1); }
.chat-image-viewer-modal .modal-body {
display: grid;
place-items: center;
min-height: 0;
padding: 0 14px;
overflow: hidden;
}
.chat-image-viewer-modal .chat-image-preparing { color: rgba(255,255,255,.88); }
.chat-image-viewer-modal .chat-image-spinner {
border-color: rgba(255,255,255,.18);
border-top-color: #fff;
}
.chat-image-viewer {
width: 100%;
height: 100%;
min-height: 0;
grid-template-rows: minmax(0,1fr) auto;
align-items: center;
gap: 9px;
}
.chat-image-viewer img {
max-width: 100%;
max-height: 100%;
min-height: 0;
border-radius: 8px;
background: transparent;
}
.chat-image-viewer p {
max-height: 72px;
overflow-y: auto;
padding: 0 2px;
color: rgba(255,255,255,.78);
font-size: 12px;
}
.chat-image-viewer p a { color: #fff; }
.chat-image-viewer-modal .modal-foot {
min-height: 48px;
justify-content: center;
padding: 8px 14px 10px !important;
border: 0;
background: transparent;
}
.chat-image-viewer-loading-foot { width: 1px; height: 1px; }
.chat-image-download {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
padding: 6px 11px;
border-radius: 10px;
color: rgba(255,255,255,.78);
text-decoration: none;
font-size: 12px;
font-weight: 700;
}
.chat-image-download:hover,
.chat-image-download:focus-visible { background: rgba(255,255,255,.09); color: #fff; }
.chat-image-download svg { width: 16px; height: 16px; }
.organization-main-chat-logo {
overflow: hidden;
padding: 0 !important;
border-radius: 50% !important;
background: #df7b63 !important;
color: transparent !important;
}
.organization-main-chat-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 760px) {
.chat-mention-pop[hidden] { display: none !important; }
.chat-mention-pop {
display: flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
height: 54px;
min-height: 54px;
max-height: 54px;
padding: 4px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(24,43,35,.16);
}
.chat-mention-pop::-webkit-scrollbar { display: none; }
.chat-mention-opt {
flex: 0 0 auto;
width: auto;
min-width: 148px;
max-width: 210px;
height: 44px;
padding: 5px 9px;
border-radius: 10px;
background: rgba(246,241,231,.62);
}
.chat-mention-opt + .chat-mention-opt { border-left: 0; }
.mention-option-copy small { display: none; }
#modal-root .overlay.chat-image-compose-modal-overlay { padding-top: max(10px, env(safe-area-inset-top,0px)); }
#modal-root .modal.chat-image-compose-modal {
width: 100%;
max-width: none;
max-height: calc(100dvh - max(10px, env(safe-area-inset-top,0px)));
border-radius: 18px 18px 0 0;
}
.chat-image-compose-modal .modal-body { padding: 8px 11px 10px; }
.chat-image-draft-preview,
.chat-image-draft-preview img { max-height: 42dvh; }
.chat-image-compose-modal .modal-foot {
padding: 9px 11px max(9px, env(safe-area-inset-bottom,0px)) !important;
}
.chat-image-compose-modal .modal-foot .btn { flex: 1 1 0; min-width: 0; }
.chat-image-meta { gap: 3px 8px; }
.chat-image-meta span + span::before { margin-right: 8px; }
#modal-root .overlay.chat-image-viewer-modal-overlay { padding: 0; }
#modal-root .modal.chat-image-viewer-modal {
width: 100%;
max-width: none;
height: 100dvh;
max-height: 100dvh;
margin: 0;
border-radius: 0;
}
#modal-root .modal.chat-image-viewer-modal::before { display: none; }
.chat-image-viewer-modal .modal-head {
padding: max(8px, env(safe-area-inset-top,0px)) 10px 7px !important;
}
.chat-image-viewer-modal .modal-head .x { width: 40px; height: 40px; }
.chat-image-viewer-modal .modal-body { padding: 0 8px; }
.chat-image-viewer-modal .modal-foot {
padding-bottom: max(8px, env(safe-area-inset-bottom,0px)) !important;
background: transparent !important;
}
html.is-standalone-app #modal-root .modal.chat-image-viewer-modal .modal-head {
min-height: 92px;
padding-top: max(52px, calc(env(safe-area-inset-top,0px) + 8px)) !important;
}
}
.event-hub { display: grid; gap: 16px; }
.event-lead {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 18px 24px;
position: relative;
overflow: hidden;
padding: 22px 24px;
border: 1px solid var(--look-line);
border-radius: var(--look-radius-hero, 22px);
background:
radial-gradient(520px 300px at 100% -10%, rgba(169, 184, 164, .13), transparent 62%),
rgba(255, 253, 248, .92);
box-shadow: var(--look-shadow-hi);
}
.event-lead.is-today {
background:
radial-gradient(520px 320px at 100% -12%, rgba(224, 122, 95, .12), transparent 62%),
rgba(255, 253, 248, .95);
border-color: rgba(224, 122, 95, .28);
}
.event-lead-copy { min-width: 0; flex: 1 1 340px; }
.event-lead-kicker {
color: var(--coral-deep);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.event-lead-copy h3 {
margin: 6px 0 4px;
font-family: var(--display);
font-size: clamp(22px, 2.2vw, 29px);
line-height: 1.05;
letter-spacing: -.02em;
color: var(--ink);
}
.event-lead-when { margin: 0; color: var(--green-deep); font-size: 13.5px; font-weight: 700; }
.event-lead-goal { margin: 10px 0 0; max-width: 62ch; color: var(--ink); font-size: 14px; line-height: 1.5; }
.event-lead-summary { margin: 10px 0 0; max-width: 62ch; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.event-lead-public {
display: inline-block;
margin-top: 12px;
color: var(--green-deep);
font-size: 12.5px;
font-weight: 750;
text-decoration: none;
}
.event-lead-public:hover { color: var(--coral-deep); }
.event-lead-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.event-lead-actions .small-btn { white-space: nowrap; }
.event-block {
padding: 20px;
border: 1px solid var(--look-line);
border-radius: var(--look-radius, 20px);
background: var(--ui-surface, rgba(255, 255, 255, .78));
box-shadow: var(--look-shadow);
}
.event-block-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.event-block-head h4 {
margin: 0;
font-family: var(--display);
font-size: 19px;
letter-spacing: -.01em;
color: var(--ink);
}
.event-block-head p { margin: 4px 0 0; max-width: 68ch; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.event-block-head .small-btn { flex: 0 0 auto; white-space: nowrap; }
.event-program-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.event-seg {
display: inline-flex;
padding: 4px;
border: 1px solid var(--look-line);
border-radius: 999px;
background: rgba(250, 247, 240, .82);
}
.event-seg button {
min-height: 34px;
padding: 6px 16px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font: 700 12.5px/1 var(--body);
cursor: pointer;
transition: background-color var(--motion-base, .18s) ease, color var(--motion-base, .18s) ease, box-shadow var(--motion-base, .18s) ease;
}
.event-seg button.on { background: #fff; color: var(--green-deep); box-shadow: 0 2px 8px rgba(43, 66, 58, .09); }
.event-program-util { display: flex; flex-wrap: wrap; gap: 14px; }
.event-textlink {
padding: 4px 0;
border: 0;
background: transparent;
color: var(--green-deep);
font: 750 12px/1.2 var(--body);
cursor: pointer;
transition: color var(--motion-base, .18s) ease;
}
.event-textlink:hover { color: var(--coral-deep); }
.event-daytabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.event-daytabs button {
display: grid;
align-content: center;
gap: 2px;
min-width: 96px;
padding: 9px 13px;
border: 1px solid var(--look-line);
border-radius: 14px;
background: rgba(255, 255, 255, .72);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: border-color var(--motion-base, .18s) ease, background-color var(--motion-base, .18s) ease, transform var(--motion-quick, .12s) var(--motion-ease, ease);
}
.event-daytab-all { font-weight: 800; }
.event-daytabs button b { font-size: 13px; font-weight: 800; }
.event-daytabs button small { color: var(--muted); font-size: 10.5px; }
.event-daytabs button:hover { border-color: rgba(56, 85, 74, .24); background: #fff; }
.event-daytabs button.on {
border-color: rgba(224, 122, 95, .42);
background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(224, 122, 95, .09));
}
.event-daytabs button.on b { color: var(--coral-deep); }
.event-momentlist { display: grid; gap: 9px; }
.event-dayline {
margin: 8px 0 1px;
padding-bottom: 4px;
}
.event-dayline:first-child { margin-top: 0; }
.event-dayline span {
color: var(--green-deep);
font-size: 11px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.emoment {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--look-line-soft, rgba(56,85,74,.08));
border-radius: 16px;
background: rgba(255, 253, 248, .96);
box-shadow: 0 1px 2px rgba(43, 66, 58, .03), 0 6px 16px rgba(43, 66, 58, .045);
transition: border-color var(--motion-base, .18s) ease, box-shadow var(--motion-base, .18s) ease;
}
.emoment:hover { border-color: rgba(56, 85, 74, .2); box-shadow: var(--look-shadow-hi); }
.emoment.is-mine { border-color: rgba(134, 151, 127, .4); }
.emoment.is-now { border-color: rgba(224, 122, 95, .55); box-shadow: 0 10px 26px rgba(224, 122, 95, .12); }
.emoment.needs-help { border-color: var(--coral); }
.emoment.is-cancelled { opacity: .6; }
.emoment.is-cancelled .emoment-title { text-decoration: line-through; }
.emoment-time {
display: grid;
align-content: start;
gap: 2px;
padding: 15px 10px;
background: rgba(246, 241, 231, .55);
text-align: center;
}
.emoment.is-mine .emoment-time { background: rgba(169, 184, 164, .16); }
.emoment.is-now .emoment-time { background: rgba(224, 122, 95, .1); }
.emoment-time b { color: var(--coral-deep); font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.1; }
.emoment-time span { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.emoment-time-tbd { color: var(--sage-deep) !important; font-size: 20px !important; }
.emoment-body { min-width: 0; padding: 13px 15px; }
.emoment-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.emoment-area {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(169, 184, 164, .22);
color: var(--green);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .02em;
}
.emoment-now {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 9px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-size: 9.5px;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.emoment-status {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 8px;
border-radius: 999px;
background: var(--cream-deep);
color: var(--muted);
font-size: 9.5px;
font-weight: 800;
}
.emoment-status.is-ready, .emoment-status.is-done { background: rgba(94, 154, 111, .16); color: var(--ok, #2f6b48); }
.emoment-status.is-live { background: rgba(224, 122, 95, .14); color: var(--coral-deep); }
.emoment-title { margin: 7px 0 0; font-size: 16px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.emoment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 9px; }
.emoment-place {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--green-deep);
font-size: 12px;
font-weight: 650;
}
.emoment-place::before {
content: "";
width: 12px; height: 12px;
flex: 0 0 12px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat;
opacity: .7;
}
.emoment-lead { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.emoment-lead > span:last-child { overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.emoment-lead.is-empty > span:last-child { color: var(--muted); font-style: italic; font-weight: 500; }
.emoment-avatar { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; font-size: 9px !important; }
.emoment-lead.is-empty .emoment-avatar { background: var(--cream-deep) !important; color: var(--muted) !important; }
.emoment-with { color: var(--muted); font-size: 11.5px; }
.emoment-what { margin: 10px 0 0; color: var(--ink); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.emoment-note {
margin: 8px 0 0;
padding-left: 11px;
border-left: 3px solid var(--sage);
color: var(--muted);
font-size: 12.5px;
line-height: 1.45;
white-space: pre-wrap;
}
.emoment-help {
display: grid;
gap: 2px;
margin-top: 10px;
padding: 9px 11px;
border-radius: 11px;
background: rgba(224, 122, 95, .1);
color: var(--coral-deep);
}
.emoment-help b { font-size: 11.5px; }
.emoment-help span { font-size: 11.5px; color: var(--ink); }
.emoment-livenote {
margin-top: 9px;
padding: 8px 11px;
border-left: 3px solid var(--amber);
border-radius: 0 10px 10px 0;
background: rgba(217, 154, 68, .1);
color: var(--ink);
font-size: 12px;
line-height: 1.45;
white-space: pre-wrap;
}
.emoment-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.emoment-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--look-line);
border-radius: 999px;
background: rgba(255, 255, 255, .7);
color: var(--green-deep);
font-size: 11px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: border-color var(--motion-base, .18s) ease, background-color var(--motion-base, .18s) ease;
}
.emoment-link:hover { border-color: var(--sage-deep); background: #fff; }
.emoment-link svg { width: 13px; height: 13px; }
.emoment-live {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid var(--look-line-soft, rgba(56,85,74,.08));
}
.emoment-live .small-btn { min-height: 38px; border-radius: 999px; }
.emoment-live .small-btn.on { border-color: var(--sage-deep); background: var(--sage-soft); color: var(--green-deep); }
.emoment-live .danger { color: var(--coral-deep); }
.event-empty {
display: grid;
gap: 6px;
padding: 30px 22px;
border: 1px dashed rgba(56, 85, 74, .22);
border-radius: 16px;
background: rgba(246, 241, 231, .5);
text-align: center;
}
.event-empty b { font-size: 15px; color: var(--ink); }
.event-empty span { max-width: 46ch; margin: 0 auto; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.event-empty .btn { justify-self: center; width: auto; margin-top: 8px; padding-inline: 20px; }
.event-empty-mini { margin: 0; padding: 4px 2px; color: var(--muted); font-size: 12.5px; }
.event-calm {
display: grid;
gap: 4px;
padding: 16px 18px;
border-radius: 14px;
background: rgba(169, 184, 164, .1);
}
.event-calm b { font-size: 13.5px; color: var(--green-deep); }
.event-calm span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.event-nudges { display: grid; gap: 8px; margin-bottom: 12px; }
.event-nudge {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
padding: 11px 13px;
border: 1px solid rgba(217, 154, 68, .26);
border-radius: 13px;
background: rgba(217, 154, 68, .07);
}
.event-nudge-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.event-nudge p { margin: 0; color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.event-nudge .event-textlink { flex: 0 0 auto; white-space: nowrap; color: #8d6725; }
.event-nudge .event-textlink:hover { color: var(--coral-deep); }
.event-tasks { display: grid; gap: 6px; }
.event-task {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto 12px;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--look-line-soft, rgba(56,85,74,.08));
border-radius: 12px;
background: rgba(255, 255, 255, .72);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: border-color var(--motion-base, .18s) ease, background-color var(--motion-base, .18s) ease, transform var(--motion-quick, .12s) var(--motion-ease, ease);
}
.event-task:hover { border-color: rgba(56, 85, 74, .22); background: #fff; }
.event-task-ico { width: 22px; height: 22px; color: var(--green-deep); }
.event-task-ico svg { width: 100%; height: 100%; }
.event-task b { overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.event-task small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.event-task small.is-overdue { color: var(--coral-deep); font-weight: 800; }
.event-task i { color: var(--muted); font-style: normal; font-size: 16px; }
.event-before-all { margin-top: 10px; }
.event-onhand { padding: 0; overflow: hidden; }
.event-onhand > summary {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
padding: 15px 18px;
cursor: pointer;
list-style: none;
}
.event-onhand > summary::-webkit-details-marker { display: none; }
.event-onhand-ico {
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: 11px;
background: rgba(224, 122, 95, .12);
color: var(--coral-deep);
}
.event-onhand-ico svg { width: 17px; height: 17px; }
.event-onhand > summary b { font-size: 14px; color: var(--ink); }
.event-onhand > summary small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }
.event-onhand-chev { color: var(--muted); font-size: 18px; transition: transform var(--motion-base, .18s) ease; }
.event-onhand[open] .event-onhand-chev { transform: rotate(180deg); }
.event-onhand-body { padding: 0 18px 16px; }
.event-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.event-contact {
display: grid;
gap: 2px;
padding: 10px 12px;
border: 1px solid var(--look-line);
border-radius: 12px;
background: rgba(255, 255, 255, .8);
color: var(--ink);
text-decoration: none;
transition: border-color var(--motion-base, .18s) ease, background-color var(--motion-base, .18s) ease;
}
a.event-contact:hover { border-color: var(--sage-deep); background: #fff; }
.event-contact small { color: var(--muted); font-size: 9.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.event-contact b { font-size: 13px; }
.event-contact span { color: var(--green-deep); font-size: 12px; font-variant-numeric: tabular-nums; }
.event-crisis {
margin-top: 10px;
padding: 12px 14px;
border-left: 3px solid var(--coral);
border-radius: 0 12px 12px 0;
background: rgba(224, 122, 95, .07);
}
.event-crisis b { font-size: 12.5px; color: var(--coral-deep); }
.event-crisis p { margin: 5px 0; color: var(--ink); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.event-crisis a { color: var(--green-deep); font-size: 12px; font-weight: 750; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.event-daytabs button:hover { transform: translateY(-1px); }
.event-task:hover { transform: translateX(2px); }
}
@media (max-width: 720px) {
.event-block { padding: 16px; }
.event-lead { padding: 18px; }
.emoment { grid-template-columns: 58px minmax(0, 1fr); }
.emoment-time { padding: 13px 6px; }
.emoment-time b { font-size: 13.5px; }
.event-program-controls { align-items: stretch; }
.event-seg { width: 100%; }
.event-seg button { flex: 1 1 0; }
.emoment-live .small-btn { min-height: 44px; flex: 1 1 auto; }
}
.finance-rewards-intro > .finance-section-head p { max-width: 62ch; }
.finance-rewards-intro {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 100% 0, rgba(220,128,96,.18), transparent 34%),
radial-gradient(circle at 0 100%, rgba(72,112,91,.13), transparent 36%),
rgba(255,253,248,.96);
}
.finance-rewards-intro::before { content: none; }
.finance-rewards-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: -2px 0 18px;
}
.finance-rewards-flow > div {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(54,82,68,.14);
border-radius: 14px;
background: rgba(255,255,255,.82);
box-shadow: 0 7px 18px rgba(43,66,58,.05);
}
.finance-rewards-flow > div > b,
.finance-rewards-form-section > header > b {
display: grid;
flex: 0 0 30px;
width: 30px;
height: 30px;
place-items: center;
border-radius: 10px;
background: linear-gradient(145deg, var(--coral), #ca654f);
color: #fff;
font-size: 13px;
}
.finance-rewards-flow span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.finance-rewards-flow strong { font-size: 13px; line-height: 1.2; }
.finance-rewards-flow small { color: var(--muted); font-size: 11.5px; line-height: 1.25; }
.finance-rewards-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; }
.finance-rewards-card { border: 1px solid rgba(54,82,68,.10); border-radius: 18px; padding: 18px; background: rgba(255,255,255,.74); box-shadow: 0 10px 28px rgba(43,66,58,.07); display: flex; flex-direction: column; gap: 15px; }
.finance-rewards-card { border-top: 5px solid var(--coral); }
.finance-rewards-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.finance-rewards-card-head h3 { margin: 2px 0 0; font-size: 17px; }
.finance-rewards-card-head small { color: var(--muted); font-size: 12.5px; }
.finance-rewards-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.finance-rewards-card-metrics > div { display: flex; flex-direction: column; gap: 2px; }
.finance-rewards-card-metrics span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.finance-rewards-card-metrics b { font-size: 15px; font-variant-numeric: tabular-nums; }
.finance-rewards-card-metrics .is-over b { color: var(--bad); }
.finance-rewards-card-foot { margin-top: auto; }
.finance-rewards-setup-list { margin-top: 18px; }
.finance-rewards-setup-list h3 { font-size: 14px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.finance-rewards-setup-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed rgba(54,82,68,.18); border-radius: 16px; margin-bottom: 8px; background: rgba(255,255,255,.46); }
.finance-rewards-setup-row small { color: var(--muted); display: block; font-size: 12.5px; }
.finance-rewards-detail {
padding: 0;
overflow: hidden;
background: rgba(255,253,248,.98);
}
.finance-rewards-project-hero {
padding: clamp(18px, 2.6vw, 26px);
color: var(--ink);
background:
radial-gradient(circle at 97% -22%, rgba(236,155,116,.16), transparent 45%),
linear-gradient(180deg, #fffdf9, #f6efe3);
border-bottom: 1px solid var(--line);
}
.finance-rewards-detail-head { display: flex; flex-direction: column; gap: 14px; }
.finance-rewards-back { align-self: flex-start; min-height: 34px; padding-inline: 12px; }
.finance-rewards-detail-title { display: flex; justify-content: space-between; align-items: center; gap: 14px 16px; flex-wrap: wrap; }
.finance-rewards-project-id { display: flex; align-items: center; gap: 15px; min-width: 0; }
.finance-rewards-mark { width: 60px !important; height: 60px !important; flex: 0 0 60px !important; border-radius: 17px !important; font-size: 17px !important; }
.finance-rewards-project-text { min-width: 0; }
.finance-rewards-project-hero .finance-section-kicker { color: var(--coral-deep); }
.finance-rewards-detail-title h2 {
margin: 3px 0 2px;
color: var(--green-deep);
font-size: clamp(21px, 2.5vw, 29px);
line-height: 1.08;
overflow-wrap: anywhere;
}
.finance-rewards-detail-title small { color: var(--muted); }
.finance-rewards-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 2px; }
.finance-rewards-summary .finance-metric {
border-radius: 15px;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 6px 16px rgba(43,66,58,.05);
}
.finance-rewards-subtabs { display: flex; gap: 5px; margin: 18px clamp(18px, 2.4vw, 26px); padding: 5px; overflow-x: auto; border: 1px solid rgba(54,82,68,.12); border-radius: 15px; background: rgba(230,232,217,.72); scrollbar-width: none; }
.finance-rewards-subtabs::-webkit-scrollbar { display: none; }
.finance-rewards-subtabs button { flex: 1 0 auto; border: 0; background: transparent; padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: 11px; }
.finance-rewards-subtabs button.is-active { color: var(--green-deep); background: var(--paper); box-shadow: inset 0 -3px var(--coral), 0 5px 14px rgba(43,66,58,.10); }
.finance-rewards-subtabs button:hover { color: var(--ink); }
.finance-rewards-subhead { font-size: 14px; color: var(--muted); font-weight: 600; margin: 20px 0 8px; }
.finance-rewards-subtab-body { padding: 0 clamp(18px, 2.4vw, 26px) clamp(20px, 2.7vw, 30px); }
.finance-rewards-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); -webkit-overflow-scrolling: touch; }
.finance-rewards-grid, .finance-rewards-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.finance-rewards-grid th, .finance-rewards-grid td, .finance-rewards-table th, .finance-rewards-table td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.finance-rewards-grid thead th, .finance-rewards-table thead th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; position: sticky; top: 0; background: var(--cream); z-index: 2; }
.finance-rewards-grid th[scope="row"], .finance-rewards-table th[scope="row"] { text-align: left; font-weight: 600; }
.finance-rewards-grid thead th:first-child, .finance-rewards-grid th[scope="row"] { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.finance-rewards-grid thead th:first-child { z-index: 3; background: var(--cream); }
.finance-rewards-grid tr:last-child th, .finance-rewards-grid tr:last-child td { border-bottom: 0; }
.finance-rewards-grid .rewards-total, .finance-rewards-table .rewards-total { font-weight: 700; background: rgba(217,154,68,.06); }
.rewards-cell { width: 100%; min-width: 0; padding: 9px 29px 9px 9px; border: 1px solid rgba(54,82,68,.14); border-radius: 10px; text-align: right; font: inherit; font-size: 14px; background: #fff; -moz-appearance: textfield; }
.rewards-cell::-webkit-outer-spin-button, .rewards-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rewards-cell:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
.finance-rewards-person .rewards-cell:focus { outline-color: var(--person-accent); border-color: var(--person-accent); box-shadow: 0 0 0 3px var(--person-soft); }
.rewards-cell.is-mine { border-color: var(--go); background: rgba(94,154,111,.06); }
.rewards-zero { color: var(--grey); }
.rewards-empty { text-align: center; color: var(--muted); font-style: italic; }
.finance-rewards-grid tr.is-mine th[scope="row"], .finance-rewards-table tr.is-mine th[scope="row"] { color: var(--ok); }
.finance-rewards-grid tr.is-mine, .finance-rewards-table tr.is-mine { background: rgba(94,154,111,.05); }
.finance-rewards-grid tr.is-mine th[scope="row"] { background: rgba(94,154,111,.05); }
.rewards-you { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ok); border: 1px solid var(--go); border-radius: 999px; padding: 0 6px; margin-left: 5px; vertical-align: middle; }
.rewards-remain-row th, .rewards-remain-row td, .rewards-sum-row th, .rewards-sum-row td { border-top: 2px solid var(--line); font-weight: 600; color: var(--muted); }
.rewards-remain-row .is-over, .finance-rewards-table td.is-over, .finance-rewards-card-metrics .is-over b { color: var(--bad); font-weight: 700; }
.rewards-remain-row td.is-over { background: rgba(184,69,48,.07); }
.rewards-row-remove { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px; line-height: 1; padding: 8px; }
.rewards-row-remove:hover { color: var(--bad); }
.rewards-row-remove-text { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline; padding: 0; }
.rewards-row-remove-text:hover { color: var(--bad); }
.finance-rewards-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.finance-rewards-save-feedback { display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; flex-wrap: wrap; }
.finance-rewards-selfhint { color: var(--muted); font-size: 13px; margin-right: auto; }
.finance-rewards-autosave-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }
.finance-rewards-autosave-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-deep); }
.finance-rewards-autosave-status.is-saving::before { border: 2px solid rgba(54,82,68,.18); border-top-color: var(--amber); background: transparent; animation: rewardsAutosaveSpin .7s linear infinite; }
.finance-rewards-autosave-status.is-saved { color: var(--ok); }
.finance-rewards-autosave-status.is-saved::before { background: var(--go); }
.finance-rewards-autosave-status.is-error { color: var(--bad); font-weight: 700; }
.finance-rewards-autosave-status.is-error::before { background: var(--bad); }
.finance-rewards-retry.btn { min-height: 32px; padding: 5px 10px; border-color: rgba(184,69,48,.22); color: var(--bad); font-size: 11.5px; }
.rewards-cell.is-save-error, .rewards-position-input.is-save-error { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(184,69,48,.09); }
@keyframes rewardsAutosaveSpin { to { transform: rotate(360deg); } }
.finance-rewards-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.finance-rewards-hours-lead { margin-bottom: 14px; }
.finance-rewards-hours-lead h3 { margin: 3px 0 4px; font-family: var(--display); font-size: 20px; }
.finance-rewards-hours-lead p { max-width: 62ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.finance-rewards-people { display: grid; gap: 12px; }
.finance-rewards-person {
--person-accent: #d9795c;
--person-soft: rgba(217,121,92,.12);
overflow: hidden;
border: 1px solid rgba(217,121,92,.28);
border-left: 6px solid var(--person-accent);
border-radius: 18px;
background: #fffdfa;
box-shadow: 0 10px 26px rgba(43,66,58,.09);
}
.finance-rewards-person.tone-2 { --person-accent: #4f866c; --person-soft: rgba(79,134,108,.12); border-color: rgba(79,134,108,.28); }
.finance-rewards-person.tone-3 { --person-accent: #d09a45; --person-soft: rgba(208,154,69,.13); border-color: rgba(208,154,69,.30); }
.finance-rewards-person.tone-4 { --person-accent: #7289a1; --person-soft: rgba(114,137,161,.12); border-color: rgba(114,137,161,.28); }
.finance-rewards-person.tone-5 { --person-accent: #a56f91; --person-soft: rgba(165,111,145,.12); border-color: rgba(165,111,145,.28); }
.finance-rewards-person.is-mine { box-shadow: 0 0 0 2px rgba(47,85,69,.13), 0 12px 28px rgba(43,66,58,.10); }
.finance-rewards-person > header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 15px 16px;
border-bottom: 1px solid rgba(54,82,68,.08);
background:
radial-gradient(circle at 100% 0, var(--person-soft), transparent 46%),
linear-gradient(90deg, var(--person-soft), rgba(255,253,248,.74) 48%);
}
.finance-rewards-person-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
.finance-rewards-person-avatar {
width: 48px;
height: 48px;
flex: 0 0 48px;
border: 3px solid rgba(255,255,255,.88);
border-radius: 15px;
color: #fff;
background: var(--person-accent);
box-shadow: 0 5px 13px rgba(43,66,58,.14);
}
.finance-rewards-person-identity h3 { max-width: 31ch; margin: 2px 0 0; overflow: hidden; font-family: var(--display); font-size: 17px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.finance-rewards-person-identity > div > span { color: var(--person-accent); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.finance-rewards-person-role { min-width: 0; }
.rewards-position-input {
max-width: 25ch; margin: 0 0 1px -5px; padding: 2px 23px 2px 5px;
border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit;
color: var(--person-accent); font-size: 10.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
}
.rewards-position-input::placeholder { color: var(--grey); font-weight: 700; letter-spacing: 0; text-transform: none; }
.rewards-position-input:hover { border-color: var(--person-soft); }
.rewards-position-input:focus { outline: none; border-color: var(--person-accent); background: #fff; color: var(--ink); letter-spacing: .02em; }
.finance-rewards-person-totals { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.finance-rewards-person-totals > span { display: flex; min-width: 76px; flex-direction: column; padding: 7px 10px; border: 1px solid rgba(255,255,255,.78); border-radius: 11px; background: rgba(255,255,255,.72); }
.finance-rewards-person-totals small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.finance-rewards-person-totals b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.finance-rewards-month-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px;
padding: 12px 15px 15px;
}
.rewards-month-field { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.rewards-month-field > span { color: var(--person-accent); font-size: 10.5px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.rewards-month-field > small { position: absolute; right: 8px; bottom: 10px; color: var(--grey); font-size: 10px; pointer-events: none; }
.rewards-month-field.is-readonly { min-height: 62px; padding: 8px 9px; border-radius: 11px; background: rgba(244,244,233,.7); }
.rewards-month-field.is-readonly b { margin-top: auto; font-size: 15px; }
.rewards-month-field.is-readonly small { right: 9px; bottom: 9px; }
.rewards-month-field.is-locked {
border: 1px solid rgba(73,112,91,.16);
background: repeating-linear-gradient(-45deg, rgba(231,241,234,.78), rgba(231,241,234,.78) 7px, rgba(244,247,239,.88) 7px, rgba(244,247,239,.88) 14px);
}
.rewards-month-field.is-locked span { color: var(--ok); font-size: 9px; }
.finance-rewards-lock-note,
.finance-rewards-rate-warning {
margin: 0 0 14px;
padding: 11px 13px;
border: 1px solid rgba(73,112,91,.16);
border-radius: 13px;
background: rgba(231,241,234,.56);
color: var(--green-deep);
font-size: 12.5px;
line-height: 1.45;
}
.finance-rewards-rate-warning { margin: 12px 0 0; border-color: rgba(211,154,68,.28); background: rgba(246,229,196,.45); color: #75531f; }
.finance-rewards-capacity { margin-top: 14px; padding: 15px; border: 1px solid rgba(72,112,91,.13); border-radius: 17px; background: rgba(231,241,234,.48); }
.finance-rewards-capacity > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.finance-rewards-capacity h3 { margin: 2px 0 0; font-size: 15px; }
.finance-rewards-capacity > header > strong { color: var(--ok); font-size: 14px; white-space: nowrap; }
.finance-rewards-capacity > header > strong.is-over { color: var(--bad); }
.finance-rewards-capacity > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 7px; }
.finance-rewards-capacity > div > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.66); }
.finance-rewards-capacity > div span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.finance-rewards-capacity > div b { font-size: 14px; }
.finance-rewards-capacity > div small { color: var(--muted); font-size: 10px; }
.finance-rewards-capacity > div .is-over { background: rgba(184,69,48,.08); color: var(--bad); }
.finance-rewards-capacity > div .is-locked { background: rgba(231,241,234,.82); color: var(--ok); }
.finance-rewards-payout { border: 1px solid rgba(54,82,68,.13); border-radius: 17px; padding: 16px 17px; background: var(--paper); box-shadow: 0 7px 21px rgba(43,66,58,.055); margin-bottom: 12px; }
.finance-rewards-payout.is-closed { border-color: rgba(73,112,91,.24); background: rgba(251,253,248,.98); box-shadow: 0 8px 22px rgba(43,66,58,.06); }
.finance-rewards-payout-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.finance-rewards-payout-head h3 { margin: 2px 0 0; font-family: var(--display); font-size: 17px; }
.finance-rewards-payout-head small { color: var(--muted); display: block; margin-top: 3px; }
.finance-rewards-payout-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin-bottom: 12px; }
.finance-rewards-payout-metrics > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 10px; border-radius: 11px; background: rgba(244,244,233,.58); }
.finance-rewards-payout-metrics span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.finance-rewards-payout-metrics b { font-size: 15px; font-variant-numeric: tabular-nums; }
.finance-rewards-payout-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.finance-rewards-payout-foot > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.finance-rewards-payout-foot .btn { width: auto; margin-top: 0; }
.finance-rewards-closed-note { display: grid; gap: 4px; margin-top: 12px; padding: 10px 12px; border-radius: 11px; background: rgba(231,241,234,.58); color: var(--ok); font-size: 12.5px; }
.finance-rewards-closed-note small { color: #587065; font-size: 10.5px; line-height: 1.4; }
.rewards-paid-cell { min-width: 210px; white-space: normal; }
.rewards-paid-toggle { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.rewards-paid-toggle.is-paid { border-color: var(--go); background: rgba(94,154,111,.12); color: var(--ok); }
.rewards-paid-toggle:hover { border-color: var(--amber); }
.rewards-sod-btn { width: auto; min-height: 30px; margin-top: 0; padding: 3px 10px; font-size: 12.5px; }
.rewards-row-status { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rewards-row-more { position: relative; }
.rewards-row-more > summary { color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.rewards-row-more[open] > summary { color: var(--green-deep); }
.rewards-row-more > div { display: grid; gap: 3px; margin-top: 6px; padding: 8px 9px; border: 1px solid rgba(54,82,68,.1); border-radius: 10px; background: rgba(248,246,240,.9); }
.rewards-row-more > div .rewards-row-remove-text { justify-self: start; color: var(--green-deep); }
.rewards-row-more > div small { max-width: 32ch; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.rewards-settlement { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 3px 8px; white-space: normal; text-align: left; }
.rewards-settlement > b { font-size: 12.5px; }
.rewards-settlement > small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.rewards-settlement > button { grid-column: 1 / -1; justify-self: start; }
.finance-rewards-process-note { margin: 0 0 14px; padding: 14px 15px; border: 1px solid rgba(54,82,68,.12); border-left: 5px solid var(--coral); border-radius: 15px; background: rgba(224,122,95,.055); }
.finance-rewards-process-note > b { font-family: var(--display); font-size: 15px; }
.finance-rewards-process-note p { max-width: 75ch; margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.finance-rewards-payouts-intro { margin: 0 0 16px; padding: 17px 18px; border: 1px solid rgba(47,85,69,.13); border-radius: 18px; background: linear-gradient(135deg, rgba(231,241,234,.78), rgba(255,253,248,.94)); box-shadow: 0 8px 24px rgba(35,66,53,.055); }
.finance-rewards-payouts-intro > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.finance-rewards-payouts-intro h3 { margin: 3px 0 4px; color: var(--ink); font-family: var(--display); font-size: 20px; line-height: 1.18; }
.finance-rewards-payouts-intro header p { max-width: 65ch; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.finance-rewards-payout-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.finance-rewards-payout-actions .btn { width: auto; min-height: 38px; margin-top: 0; padding: 7px 13px; }
.finance-rewards-payout-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.finance-rewards-payout-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px 11px; border: 1px solid rgba(54,82,68,.09); border-radius: 12px; background: rgba(255,255,255,.7); }
.finance-rewards-payout-steps > li > b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: var(--green-deep); color: #fff; font-size: 11px; }
.finance-rewards-payout-steps > li > span { display: grid; gap: 1px; }
.finance-rewards-payout-steps strong { color: var(--ink); font-size: 12px; }
.finance-rewards-payout-steps small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.finance-rewards-current { margin-bottom: 16px; }
.finance-rewards-current > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.finance-rewards-current > header h3 { margin: 2px 0 0; font-family: var(--display); font-size: 18px; }
.finance-rewards-section-count,
.finance-rewards-closed-disclosure summary > em,
.finance-rewards-history-disclosure summary > em { display: grid; min-width: 29px; height: 29px; padding: 0 8px; place-items: center; border-radius: 999px; background: rgba(73,112,91,.12); color: var(--green-deep); font-size: 11.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.finance-rewards-closed-disclosure,
.finance-rewards-history-disclosure { margin: 0 0 12px; border: 1px solid rgba(54,82,68,.12); border-radius: 16px; background: rgba(255,255,255,.62); }
.finance-rewards-closed-disclosure > summary,
.finance-rewards-history-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; cursor: pointer; list-style: none; }
.finance-rewards-closed-disclosure > summary::-webkit-details-marker,
.finance-rewards-history-disclosure > summary::-webkit-details-marker { display: none; }
.finance-rewards-closed-disclosure > summary > span,
.finance-rewards-history-disclosure > summary > span { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.finance-rewards-closed-disclosure > summary b,
.finance-rewards-history-disclosure > summary b { color: var(--ink); font-family: var(--display); font-size: 15px; }
.finance-rewards-closed-disclosure > summary small,
.finance-rewards-history-disclosure > summary small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.finance-rewards-closed-disclosure > summary::after,
.finance-rewards-history-disclosure > summary::after { content: "⌄"; order: 3; color: var(--muted); font-size: 16px; transition: transform .18s ease; }
.finance-rewards-closed-disclosure[open] > summary::after,
.finance-rewards-history-disclosure[open] > summary::after { transform: rotate(180deg); }
.finance-rewards-closed-list { padding: 3px 13px 1px; border-top: 1px solid rgba(54,82,68,.08); }
.finance-rewards-history-disclosure { background: rgba(255,253,248,.58); }
.finance-rewards-history-disclosure .finance-rewards-history-ledger { margin: 0; padding: 14px; border: 0; border-top: 1px solid rgba(54,82,68,.08); border-radius: 0; background: transparent; box-shadow: none; }
.finance-rewards-balance { margin-bottom: 16px; padding: 15px; border: 1px solid rgba(54,82,68,.1); border-radius: 17px; background: rgba(255,255,255,.62); }
.finance-rewards-balance > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.finance-rewards-balance h3 { margin: 2px 0 3px; font-family: var(--display); font-size: 17px; }
.finance-rewards-balance header p { max-width: 70ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.finance-rewards-rate-preview { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0 0 13px; padding: 12px 13px; border-radius: 13px; background: rgba(231,241,234,.62); }
.finance-rewards-rate-preview span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.finance-rewards-rate-preview b { color: var(--green-deep); font-size: 16px; }
.finance-rewards-rate-preview small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.finance-rewards-history-intro { margin-bottom: 13px; }
.finance-rewards-history-intro h3 { margin: 2px 0 3px; font-family: var(--display); }
.finance-rewards-history-intro p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.finance-rewards-history-ledger { margin: 0 0 16px; padding: 17px; border: 1px solid rgba(211,154,68,.2); border-radius: 20px; background: rgba(255,253,248,.78); box-shadow: 0 8px 24px rgba(43,66,58,.045); }
.finance-rewards-history-ledger > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.finance-rewards-history-ledger > header h3 { margin: 2px 0 4px; font-family: var(--display); font-size: 18px; }
.finance-rewards-history-ledger > header p { max-width: 68ch; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.finance-rewards-history-list { display: grid; gap: 10px; }
.finance-rewards-history-card { padding: 14px 15px; border: 1px solid rgba(54,82,68,.1); border-left: 3px solid rgba(211,154,68,.56); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(43,66,58,.035); }
.finance-rewards-history-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.finance-rewards-history-card > header > strong { color: var(--green-deep); font-family: var(--display); font-size: 20px; white-space: nowrap; }
.finance-rewards-history-person { display: flex; min-width: 0; align-items: center; gap: 10px; }
.finance-rewards-history-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; }
.finance-rewards-history-person h4 { margin: 1px 0; font-family: var(--display); font-size: 16px; }
.finance-rewards-history-person p { margin: 0; color: var(--muted); font-size: 11.5px; }
.finance-rewards-history-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.finance-rewards-history-metrics > span { display: grid; gap: 2px; min-width: 0; padding: 9px 10px; border-radius: 11px; background: rgba(244,244,233,.7); }
.finance-rewards-history-metrics small { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.finance-rewards-history-metrics b { overflow: hidden; font-size: 12.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.finance-rewards-history-document { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 11px; padding: 10px 11px; border: 1px solid rgba(73,112,91,.15); border-radius: 13px; background: rgba(231,241,234,.55); }
.finance-rewards-history-document.is-missing { border-color: rgba(211,154,68,.24); background: rgba(255,246,226,.62); }
.finance-rewards-history-document-icon,
.finance-rewards-history-upload-icon {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 11px;
background: rgba(47,85,69,.1);
color: var(--green-deep);
}
.finance-rewards-history-document-icon svg,
.finance-rewards-history-upload-icon svg { width: 18px; height: 18px; }
.finance-rewards-history-document > div,
.finance-rewards-history-upload > div,
.finance-rewards-history-upload > span:last-child { display: grid; min-width: 0; gap: 1px; }
.finance-rewards-history-document small,
.finance-rewards-history-upload small { color: var(--ok); font-size: 9.5px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.finance-rewards-history-document b,
.finance-rewards-history-upload b { overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.finance-rewards-history-document div > span,
.finance-rewards-history-upload div > span,
.finance-rewards-history-upload > span:last-child > span { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.finance-rewards-history-document .btn { min-height: 32px; padding: 5px 10px; font-size: 11px; }
.finance-rewards-bank-note,
.finance-rewards-history-note { margin: 9px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.finance-rewards-history-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(54,82,68,.08); color: var(--ok); font-size: 11.5px; }
.finance-rewards-history-actions { display: flex; align-items: center; gap: 10px; }
.finance-rewards-history-actions .btn { min-height: 31px; padding: 4px 10px; font-size: 11.5px; }
.finance-rewards-history-empty { display: flex; flex-direction: column; gap: 3px; padding: 15px; border: 1px dashed rgba(54,82,68,.18); border-radius: 14px; background: rgba(255,255,255,.56); }
.finance-rewards-history-empty b { font-family: var(--display); font-size: 14px; }
.finance-rewards-history-empty span { max-width: 70ch; color: var(--muted); font-size: 12px; line-height: 1.45; }
#modal-root .modal.finance-rewards-history-modal { width: min(760px, calc(100vw - 36px)); max-width: 760px; }
.finance-rewards-history-modal .modal-body { background: linear-gradient(180deg, rgba(246,241,231,.68), rgba(255,253,248,.96)); }
.finance-rewards-history-step { margin-top: 11px; padding: 13px 14px; border: 1px solid rgba(54,82,68,.13); border-radius: 15px; background: rgba(255,255,255,.78); }
.finance-rewards-history-step > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; margin-bottom: 10px; }
.finance-rewards-history-step > header > b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: var(--coral); color: #fff; font-size: 13px; }
.finance-rewards-history-step:nth-of-type(2) > header > b { background: var(--green-deep); }
.finance-rewards-history-step.is-document > header > b { background: linear-gradient(145deg, var(--amber), #b87b27); }
.finance-rewards-history-step h4 { margin: 0 0 2px; color: var(--ink); font-size: 14px; }
.finance-rewards-history-step header p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.finance-rewards-history-step .finance-rewards-months { margin-bottom: 0; background: rgba(248,246,240,.58); }
.finance-rewards-monthcheck.is-unavailable { opacity: .46; cursor: not-allowed; }
.finance-rewards-history-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 11px; padding: 12px; border: 1px solid rgba(73,112,91,.18); border-radius: 14px; background: rgba(231,241,234,.62); }
.finance-rewards-history-preview > span { display: grid; gap: 2px; min-width: 0; }
.finance-rewards-history-preview small { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.finance-rewards-history-preview b { color: var(--green-deep); font-size: 15px; font-variant-numeric: tabular-nums; }
.finance-rewards-history-preview p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.finance-rewards-history-more { margin-top: 11px; padding: 11px 13px; border: 1px solid rgba(54,82,68,.12); border-radius: 13px; background: rgba(255,255,255,.68); }
.finance-rewards-history-more summary { color: var(--green-deep); font-size: 12.5px; font-weight: 750; cursor: pointer; }
.finance-rewards-history-more[open] summary { margin-bottom: 10px; }
.finance-rewards-form-intro { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.finance-rewards-form-section { margin-bottom: 12px; padding: 14px; border: 1px solid rgba(54,82,68,.12); border-left-width: 5px; border-radius: 16px; background: rgba(248,246,240,.72); box-shadow: 0 7px 18px rgba(43,66,58,.045); }
.finance-rewards-form-section:nth-of-type(1) { border-left-color: var(--coral); background: rgba(224,122,95,.055); }
.finance-rewards-form-section:nth-of-type(2) { border-left-color: var(--amber); background: rgba(211,154,68,.06); }
.finance-rewards-form-section:nth-of-type(3) { border-left-color: var(--green-deep); background: rgba(47,85,69,.055); }
.finance-rewards-form-section > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.finance-rewards-form-section > header h3 { margin: 0 0 2px; font-size: 14px; }
.finance-rewards-form-section > header p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.finance-rewards-form-section:nth-of-type(2) > header > b { background: linear-gradient(145deg, var(--amber), #b87b27); }
.finance-rewards-form-section:nth-of-type(3) > header > b { background: linear-gradient(145deg, var(--green-deep), #1f4938); }
.finance-rewards-form .finance-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.finance-rewards-form .finance-rewards-period-grid { grid-template-columns: 1.25fr .85fr .85fr; }
.finance-rewards-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
.finance-rewards-form .finance-rewards-history-upload {
display: grid;
grid-template-columns: 39px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
min-height: 62px;
padding: 11px 12px;
border: 1px solid rgba(73,112,91,.18);
border-radius: 14px;
background: rgba(231,241,234,.5);
}
.finance-rewards-form label.finance-rewards-history-upload.is-empty { cursor: pointer; border-style: dashed; background: rgba(255,253,248,.86); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.finance-rewards-form label.finance-rewards-history-upload.is-empty:hover { border-color: rgba(47,85,69,.38); background: rgba(231,241,234,.48); transform: translateY(-1px); }
.finance-rewards-history-upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.finance-rewards-history-upload .btn { min-height: 32px; padding: 5px 10px; font-size: 11px; }
.finance-rewards-form .finance-form-wide { margin-top: 12px; }
.finance-rewards-shift-option {
display: grid !important;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 9px !important;
margin-top: 12px;
padding: 11px 12px;
border: 1px solid rgba(73,112,91,.18);
border-radius: 13px;
background: rgba(231,241,234,.54);
color: var(--ink) !important;
}
.finance-rewards-shift-option input { width: 18px !important; min-width: 18px !important; height: 18px; margin: 1px 0 0; padding: 0 !important; accent-color: var(--green); }
.finance-rewards-shift-option span { display: grid; gap: 2px; }
.finance-rewards-shift-option b { font-size: 12.5px; }
.finance-rewards-shift-option small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.finance-rewards-form input, .finance-rewards-form select, .finance-rewards-form textarea { font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 400; }
.finance-rewards-form input:focus, .finance-rewards-form select:focus, .finance-rewards-form textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
.finance-rewards-months { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.finance-rewards-months legend { font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 0 6px; }
.finance-rewards-monthcheck { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 4px 14px 4px 0; font-weight: 400; color: var(--ink); }
.modal .finance-rewards-monthcheck input { width: auto !important; min-width: 0 !important; padding: 0; }
#modal-root .modal.finance-rewards-payout-modal {
width: min(720px, calc(100vw - 36px));
max-width: 720px;
}
.finance-rewards-payout-modal .modal-body { background: linear-gradient(180deg, rgba(246,241,231,.62), rgba(255,253,248,.94)); }
.rewards-payout-modal-intro {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
margin-bottom: 12px;
padding: 14px 15px;
border: 1px solid rgba(224,122,95,.2);
border-radius: 15px;
background: rgba(224,122,95,.06);
}
.rewards-payout-modal-intro > b,
.rewards-payout-modal-section > header > b,
.finance-rewards-months legend > b {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 10px;
background: linear-gradient(145deg, var(--coral), #ca654f);
color: #fff;
font-size: 13px;
}
.rewards-payout-modal-intro h4,
.rewards-payout-modal-section h4 { margin: 0 0 2px; color: var(--ink); font-size: 14px; }
.rewards-payout-modal-intro p,
.rewards-payout-modal-section p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rewards-payout-modal-section {
padding: 13px 14px;
border: 1px solid rgba(54,82,68,.13);
border-radius: 15px;
background: rgba(255,255,255,.74);
}
.rewards-payout-modal-section > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.rewards-payout-modal-section > header > b { background: linear-gradient(145deg, var(--amber), #b87b27); }
.finance-rewards-form .rewards-payout-date { max-width: 260px; margin: 11px 0 0 46px; }
.finance-rewards-payout-modal .finance-rewards-months {
margin: 12px 0;
padding: 12px 14px 14px;
border-color: rgba(54,82,68,.13);
border-radius: 15px;
background: rgba(255,255,255,.74);
}
.finance-rewards-payout-modal .finance-rewards-months legend {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
gap: 12px;
width: calc(100% - 4px);
padding: 0 2px 7px;
color: var(--ink);
font-size: 14px;
}
.finance-rewards-payout-modal .finance-rewards-months legend > b { background: linear-gradient(145deg, var(--green-deep), #1f4938); }
.finance-rewards-payout-modal .finance-rewards-months legend span { display: grid; gap: 2px; padding-top: 2px; }
.finance-rewards-payout-modal .finance-rewards-months legend small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.finance-rewards-month-grid-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.finance-rewards-form .finance-rewards-monthcheck {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
flex-direction: row;
align-items: center;
gap: 8px;
min-height: 42px;
margin: 0;
padding: 9px 11px;
border: 1px solid rgba(54,82,68,.13);
border-radius: 11px;
background: #fff;
color: var(--ink);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.finance-rewards-form .finance-rewards-monthcheck:hover { border-color: var(--sage-deep); background: rgba(231,241,234,.42); }
.finance-rewards-form .finance-rewards-monthcheck:has(input:checked) { border-color: var(--sage-deep); background: rgba(231,241,234,.72); color: var(--green-deep); }
#modal-root .finance-rewards-payout-modal .finance-rewards-monthcheck input[type="checkbox"] {
width: 17px !important;
min-width: 17px !important;
height: 17px;
margin: 0;
padding: 0;
accent-color: var(--green);
}
.finance-rewards-payout-modal .rewards-payout-note { padding: 12px 14px; border: 1px solid rgba(54,82,68,.13); border-radius: 15px; background: rgba(255,255,255,.74); }
@media (max-width: 720px) {
.finance-rewards-flow { grid-template-columns: 1fr; gap: 7px; }
.finance-rewards-flow > div { padding: 10px 11px; }
.finance-rewards-flow > div > b { flex-basis: 27px; width: 27px; height: 27px; }
.finance-rewards-detail-title { flex-direction: column; }
.finance-rewards-detail-title .btn { width: 100%; }
.finance-rewards-summary { grid-template-columns: 1fr 1fr; }
.finance-rewards-subtabs { margin-inline: 12px; }
.finance-rewards-subtabs button { padding-inline: 11px; }
.finance-rewards-month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; }
.finance-rewards-person > header { align-items: stretch; flex-direction: column; }
.finance-rewards-person-totals { justify-content: stretch; }
.finance-rewards-person-totals > span { min-width: 0; flex: 1 1 0; }
.finance-rewards-person-totals .rewards-row-remove { margin-left: auto; }
.finance-rewards-capacity > header { align-items: flex-start; flex-direction: column; gap: 5px; }
.finance-rewards-capacity > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-rewards-controls { align-items: stretch; flex-direction: column-reverse; }
.finance-rewards-controls .btn { width: 100%; }
.finance-rewards-selfhint { margin: 0; text-align: center; }
.finance-rewards-form .finance-form-grid,
.finance-rewards-form .finance-rewards-period-grid { grid-template-columns: 1fr; }
.finance-rewards-form-section { padding: 12px; }
.finance-rewards-month-grid-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-rewards-form .rewards-payout-date { max-width: none; margin-left: 0; }
.finance-rewards-setup-row { align-items: stretch; flex-direction: column; }
.finance-rewards-setup-row .btn { width: 100%; }
.finance-rewards-payout-head,
.finance-rewards-balance > header { flex-direction: column; }
.finance-rewards-payouts-intro { padding: 15px; }
.finance-rewards-payouts-intro > header { flex-direction: column; }
.finance-rewards-payouts-intro h3 { font-size: 19px; }
.finance-rewards-payout-actions { width: 100%; align-items: stretch; flex-direction: column; }
.finance-rewards-payout-actions .btn { width: 100%; }
.finance-rewards-payout-steps { grid-template-columns: 1fr; }
.finance-rewards-payout-steps > li { min-height: 0; padding: 8px 9px; }
.finance-rewards-payout-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-rewards-payout-foot { align-items: stretch; flex-direction: column-reverse; }
.finance-rewards-payout-foot > div { align-items: stretch; flex-direction: column; }
.finance-rewards-payout-foot .btn { width: 100%; }
.finance-rewards-closed-disclosure > summary,
.finance-rewards-history-disclosure > summary { align-items: flex-start; padding: 12px 13px; }
.finance-rewards-closed-disclosure > summary small,
.finance-rewards-history-disclosure > summary small { max-width: 34ch; }
.finance-rewards-closed-list { padding-inline: 9px; }
.finance-rewards-history-ledger > header,
.finance-rewards-history-card > header,
.finance-rewards-history-card > footer { align-items: stretch; flex-direction: column; }
.finance-rewards-history-ledger > header .btn { width: 100%; }
.finance-rewards-history-card > header > strong { align-self: flex-start; }
.finance-rewards-history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-rewards-history-actions { align-items: stretch; flex-direction: column; }
.finance-rewards-history-actions .btn { width: 100%; }
.finance-rewards-history-document,
.finance-rewards-form .finance-rewards-history-upload { grid-template-columns: 37px minmax(0, 1fr); }
.finance-rewards-history-document .btn,
.finance-rewards-history-upload .btn { grid-column: 1 / -1; width: 100%; }
.finance-rewards-history-preview { grid-template-columns: 1fr; }
.finance-rewards-history-preview p { grid-column: auto; }
}
.settings-modal-layout { gap: 12px; }
.settings-modal-hero,
.settings-card-section {
border: 1px solid var(--line);
border-radius: 16px;
background: var(--paper);
box-shadow: 0 6px 18px rgba(43, 66, 58, .06);
}
.settings-modal-hero {
padding: 18px 20px;
background:
radial-gradient(circle at 100% -30%, rgba(224, 122, 95, .14), transparent 48%),
var(--paper);
}
.settings-modal-hero .eyebrow { color: var(--coral-deep); letter-spacing: .12em; margin: 0 0 7px; }
.settings-modal-hero h3 { margin: 0 0 7px; font-size: clamp(22px, 3.2vw, 27px); }
.settings-modal-hero p:last-child { margin: 0; color: var(--muted); line-height: 1.5; }
.settings-card-section { padding: 15px 17px 7px; }
.settings-card-section > .settings-section-title { margin-bottom: 3px; }
.settings-card-section > p.muted { margin-top: 2px !important; }
.settings-card-section .settings-info-grid { margin-bottom: 8px; }
.settings-row { padding: 13px 2px; gap: 16px; border-top-color: var(--line); }
.settings-card-section .settings-row:last-of-type { padding-bottom: 6px; }
.settings-row-text small { font-size: 12px; }
.settings-info-pill { border-color: var(--line); background: var(--cream); }
.settings-info-pill.accent { background: rgba(224, 122, 95, .12); border-color: rgba(224, 122, 95, .28); }
.settings-info-pill.ok { background: rgba(94, 154, 111, .13); border-color: rgba(94, 154, 111, .3); }
.settings-push-categories { background: var(--paper); border-color: var(--line); }
.danger-settings-section {
border-color: rgba(184, 69, 48, .3) !important;
background: rgba(184, 69, 48, .045) !important;
}
.modal:has(.settings-modal-layout) > .modal-foot { background: var(--cream-deep); }
.modal-body:has(> .settings-modal-layout) { padding-top: 0; }
.settings-tabs {
position: sticky;
top: 0;
display: flex;
padding: 12px 0 11px;
background: var(--cream-deep);
border-bottom: 1px solid var(--line);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
flex: 0 0 auto;
border: 0;
padding: 8px 15px;
border-radius: 999px;
font-weight: 700;
font-size: 13.5px;
color: var(--muted);
white-space: nowrap;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.settings-tab:hover { color: var(--ink); }
.settings-tab.is-active {
background: var(--paper);
box-shadow: 0 2px 9px rgba(43, 66, 58, .1);
}
.settings-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus); }
.settings-panels { gap: 12px; padding-top: 13px; }
.settings-panel { gap: 12px; }
.settings-account-card {
gap: 14px;
flex-wrap: wrap;
}
.settings-account-avatar {
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
border-radius: 15px !important;
background: var(--coral) !important;
color: #fff !important;
font-size: 17px !important;
}
.settings-account-avatar svg { width: 56% !important; height: 56% !important; }
.settings-account-meta b { font-size: 16px; }
.settings-account-meta span { margin-top: 1px; font-size: 12.5px; }
.settings-account-actions .small-btn { min-height: 36px; }
@media (max-width: 620px) {
.settings-account-card { align-items: flex-start; }
.settings-account-actions { width: 100%; }
.settings-account-actions .small-btn { flex: 1 1 auto; text-align: center; justify-content: center; }
.settings-tab { padding: 8px 13px; font-size: 13px; }
}
/* === Nastavení — pevná navigace a klidnější chrome (2026-07-26, settingschrome1) === */
#modal-root .modal:has(.settings-modal-layout) {
position: relative;
width: min(980px, calc(100vw - 36px));
max-width: 980px;
height: min(860px, calc(100dvh - 36px));
max-height: min(860px, calc(100dvh - 36px));
border: 1px solid rgba(47, 85, 69, .18);
border-radius: 24px;
background: var(--cream-deep);
box-shadow: 0 30px 90px rgba(23, 39, 32, .34);
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head {
position: relative;
z-index: 2;
flex: 0 0 auto;
min-height: 68px;
padding: 14px 18px 14px 22px;
border-bottom: 1px solid rgba(47, 85, 69, .12);
background: rgba(255, 253, 248, .98);
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head h3 {
display: block;
color: var(--green-deep);
font-size: 21px;
letter-spacing: -.015em;
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head .x {
width: 40px;
height: 40px;
border: 0;
background: rgba(224, 122, 95, .11);
color: var(--coral-deep);
box-shadow: none;
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head .x:hover {
background: var(--coral);
color: #fff;
}
.modal-body:has(> .settings-modal-layout) {
flex: 1 1 auto;
min-height: 0;
padding: 0;
overflow: hidden;
background: var(--cream-deep);
}
.modal:has(.settings-modal-layout) > .modal-foot {
position: relative;
z-index: 2;
box-sizing: border-box;
flex: 0 0 auto;
width: auto;
min-height: 68px;
gap: 10px;
justify-content: flex-end;
padding: 12px 18px !important;
border-top: 1px solid rgba(47, 85, 69, .12);
background: rgba(255, 253, 248, .98);
box-shadow: 0 -8px 24px rgba(43, 66, 58, .045);
}
.modal:has(.settings-modal-layout) > .modal-foot .btn {
flex: 0 0 auto;
min-width: 108px;
min-height: 42px;
padding-inline: 18px;
}
.modal:has(.settings-modal-layout) > .modal-foot .btn-ghost {
border-color: rgba(47, 85, 69, .16);
background: var(--cream);
color: var(--green-deep);
}
.modal:has(.settings-modal-layout) > .modal-foot .btn-ghost:hover {
border-color: rgba(47, 85, 69, .28);
background: var(--cream-deep);
color: var(--green-deep);
}
.modal:has(.settings-modal-layout) > .modal-foot .btn-primary {
border-color: var(--coral);
background: var(--coral);
color: #fff;
}
.settings-save-hint {
margin-right: auto;
color: var(--muted);
font-size: 11.5px;
line-height: 1.35;
}
.settings-modal-layout {
display: grid;
grid-template-columns: 218px minmax(0, 1fr);
align-items: stretch;
gap: 0;
height: 100%;
min-height: 0;
}
.settings-tabs {
position: relative;
z-index: 6;
display: grid;
align-content: start;
gap: 6px;
min-width: 0;
min-height: 0;
height: 100%;
padding: 18px 12px 20px;
overflow-x: hidden;
overflow-y: auto;
border: 0;
border-radius: 0;
background: var(--green-deep);
box-shadow: inset -1px 0 rgba(255, 255, 255, .08);
}
.settings-tabs-heading {
display: grid;
gap: 3px;
margin: 1px 3px 9px;
padding: 0 2px 14px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.settings-tabs-heading b {
color: #fff;
font-family: var(--display);
font-size: 16px;
line-height: 1.2;
}
.settings-tabs-heading small {
color: rgba(255, 255, 255, .64);
font-size: 11px;
line-height: 1.35;
}
.settings-tab {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 12px;
align-items: center;
gap: 9px;
width: 100%;
min-width: 0;
min-height: 56px;
padding: 9px 10px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: rgba(255, 255, 255, .78);
font: inherit;
text-align: left;
white-space: normal;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.settings-tab:hover {
background: rgba(255, 255, 255, .09);
color: #fff;
}
.settings-tab.is-active {
border-color: rgba(255, 255, 255, .55);
background: #fffdf8;
color: var(--green-deep);
box-shadow: 0 9px 22px rgba(19, 37, 30, .22);
}
.settings-tab:focus-visible {
outline: 3px solid rgba(255, 255, 255, .5);
outline-offset: 2px;
box-shadow: none;
}
.settings-tab-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255, 255, 255, .1);
}
.settings-tab.is-active .settings-tab-icon {
background: rgba(224, 122, 95, .14);
color: var(--coral-deep);
}
.settings-tab-icon svg {
width: 19px;
height: 19px;
}
.settings-tab-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.settings-tab-copy b {
overflow: hidden;
font-size: 13px;
line-height: 1.2;
text-overflow: ellipsis;
}
.settings-tab-copy small {
overflow: hidden;
color: inherit;
font-size: 10.5px;
font-weight: 500;
line-height: 1.25;
opacity: .67;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-tab-arrow {
justify-self: end;
font-size: 20px;
line-height: 1;
opacity: .5;
}
.settings-panels {
display: grid;
align-content: start;
min-width: 0;
min-height: 0;
height: 100%;
gap: 14px;
padding: 18px 20px 22px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.settings-panel {
display: grid;
min-width: 0;
gap: 14px;
margin: 0;
}
.settings-panel[hidden] {
display: none;
}
.settings-panel-hero {
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
gap: 15px;
min-width: 0;
overflow: hidden;
padding: 16px 18px;
border: 1px solid rgba(47, 85, 69, .14);
border-left: 4px solid var(--coral);
border-radius: 18px;
background: var(--paper);
box-shadow: 0 12px 30px rgba(43, 66, 58, .07);
}
.settings-panel-hero::after {
content: none;
}
.settings-panel-hero-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
background: var(--coral);
color: #fff;
box-shadow: 0 10px 22px rgba(196, 94, 68, .24);
}
.settings-panel-hero-icon svg {
width: 24px;
height: 24px;
}
.settings-panel-kicker {
display: block;
margin-bottom: 3px;
color: var(--coral-deep);
font-size: 10px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.settings-panel-hero h4 {
margin: 0;
color: var(--ink);
font-family: var(--display);
font-size: 23px;
line-height: 1.08;
letter-spacing: -.02em;
}
.settings-panel-hero p {
max-width: 620px;
margin: 5px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.settings-card-section {
min-width: 0;
padding: 18px 20px 8px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 18px;
background: rgba(255, 253, 248, .98);
box-shadow: 0 8px 24px rgba(43, 66, 58, .055);
}
.settings-card-section.settings-security-card { gap: 0; padding: 26px 28px 24px; }
.settings-security-card .settings-security-head { grid-template-columns: 50px minmax(0, 1fr); gap: 15px; padding-bottom: 20px; border-bottom: 1px solid rgba(47, 85, 69, .11); }
.settings-security-card .settings-security-icon { width: 50px; height: 50px; border-radius: 16px; }
.settings-security-card .settings-security-icon svg { width: 24px; height: 24px; }
.settings-security-card .settings-security-head b { font-size: 16px; line-height: 1.3; }
.settings-security-card .settings-security-head small { margin-top: 4px; font-size: 12.5px; }
.settings-security-card .settings-auth-methods { gap: 8px; padding: 18px 0; }
.settings-security-card .settings-auth-methods::before { content: "Aktivní způsoby přihlášení"; flex: 0 0 100%; margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.settings-security-card .settings-auth-method { min-height: 32px; padding: 6px 11px; font-size: 11.5px; }
.settings-security-card .settings-security-note { padding: 14px 15px; border-radius: 13px; font-size: 12.5px; line-height: 1.55; }
.settings-security-card .settings-security-actions { gap: 10px; padding-top: 16px; }
.settings-security-card .settings-security-actions .small-btn { min-height: 42px; padding-inline: 16px; }
.settings-card-section > .settings-section-title {
margin: 0 0 3px;
color: var(--ink);
font-family: var(--display);
font-size: 17px;
font-weight: 750;
line-height: 1.25;
letter-spacing: -.01em;
text-transform: none;
}
.settings-section-intro {
margin: 0 0 13px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.settings-row {
min-width: 0;
gap: 18px;
padding: 14px 2px;
border-top: 1px solid rgba(47, 85, 69, .1);
cursor: default;
}
label.settings-row {
cursor: pointer;
}
.settings-section-intro + .settings-row,
.settings-card-section > .settings-section-title + .settings-row {
border-top: 0;
}
label.settings-row:hover .settings-row-text b,
.settings-row-action:hover .settings-row-text b {
color: var(--green-deep);
}
.settings-row-text b {
margin: 0;
color: var(--ink);
font-size: 14px;
line-height: 1.3;
}
.settings-row-text small {
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
}
.settings-select {
width: min(230px, 44%);
min-height: 42px;
border-radius: 12px;
background: #fff;
}
.modal .settings-toggle,
.settings-toggle {
flex: 0 0 44px;
width: 44px !important;
min-width: 44px !important;
height: 26px;
border-color: rgba(47, 85, 69, .2);
background: #e5e0d6;
}
.settings-toggle::after {
width: 20px;
height: 20px;
}
.settings-toggle:checked {
border-color: var(--coral);
background: var(--coral);
}
.settings-toggle:checked::after {
transform: translateX(18px);
}
.settings-row-btn {
min-height: 38px;
padding-inline: 14px;
border-color: rgba(47, 85, 69, .16);
background: var(--cream);
color: var(--green-deep);
white-space: nowrap;
}
.settings-account-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 16px;
padding-bottom: 16px;
border-left: 4px solid rgba(224, 122, 95, .45);
background: var(--paper);
}
.settings-account-id {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
}
.settings-account-avatar {
width: 54px !important;
height: 54px !important;
flex: 0 0 54px !important;
border: 3px solid rgba(255, 255, 255, .9) !important;
border-radius: 17px !important;
box-shadow: 0 8px 18px rgba(43, 66, 58, .14);
}
.settings-account-meta {
min-width: 0;
}
.settings-account-meta > small {
display: block;
margin-bottom: 2px;
color: var(--coral-deep);
font-size: 9.5px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.settings-account-meta b {
display: block;
overflow: hidden;
font-family: var(--display);
font-size: 18px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-account-meta span {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
}
.settings-account-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.settings-account-actions .small-btn {
min-height: 38px;
}
.settings-signout {
color: var(--bad);
}
.settings-about-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 12px 0 10px;
}
.settings-about-facts > div {
min-width: 0;
padding: 13px 14px;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 14px;
background: var(--cream);
}
.settings-about-facts > div:first-child {
border-color: rgba(224, 122, 95, .24);
background: rgba(224, 122, 95, .09);
}
.settings-about-facts dt {
margin-bottom: 4px;
color: var(--coral-deep);
font-size: 9.5px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.settings-about-facts dd {
margin: 0;
color: var(--ink);
font-size: 13.5px;
font-weight: 800;
line-height: 1.3;
}
.settings-about-facts-card {
padding-bottom: 10px;
}
.settings-push-categories {
margin-top: 12px;
padding: 3px 13px;
border-color: rgba(47, 85, 69, .12);
background: var(--cream);
}
.settings-push-categories .settings-row:first-child {
border-top: 0;
}
.push-device-card {
border-color: rgba(47, 85, 69, .13);
background: rgba(201, 211, 196, .34);
}
.danger-settings-section {
border-color: rgba(184, 69, 48, .28) !important;
background: #fff8f5 !important;
}
.danger-settings-section > .settings-section-title {
color: var(--bad);
}
@media (max-width: 760px) {
#modal-root .modal:has(.settings-modal-layout) {
width: 100%;
max-width: none;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head {
position: relative;
z-index: auto;
min-height: 58px;
padding: max(9px, env(safe-area-inset-top, 0px)) 12px 9px 16px !important;
border-bottom: 1px solid rgba(47, 85, 69, .1);
background: var(--paper);
pointer-events: auto;
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head h3 {
display: block;
font-size: 20px;
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head .x {
width: 40px;
height: 40px;
border: 0;
background: rgba(224, 122, 95, .12);
color: var(--coral-deep);
}
#modal-root .modal:has(.settings-modal-layout) > .modal-head .x:hover {
background: var(--coral);
color: #fff;
}
.modal-body:has(> .settings-modal-layout) {
padding: 0 12px 16px;
overflow-x: hidden;
overflow-y: auto;
background: var(--cream-deep);
}
.modal:has(.settings-modal-layout) > .modal-foot {
position: relative;
z-index: auto;
left: auto;
bottom: auto;
width: auto;
min-height: 0;
gap: 8px;
padding: 10px 12px max(11px, env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid rgba(47, 85, 69, .1);
background: rgba(255, 253, 248, .97);
box-shadow: none;
}
.modal:has(.settings-modal-layout) > .modal-foot .btn {
flex: 1 1 0;
min-width: 0;
}
.settings-save-hint {
display: none;
}
.modal:has(.settings-modal-layout) > .modal-foot .btn-ghost {
border-color: var(--line);
background: transparent;
color: var(--ink);
}
.modal:has(.settings-modal-layout) > .modal-foot .btn-primary {
border-color: var(--coral);
background: var(--coral);
color: #fff;
}
.settings-modal-layout {
grid-template-columns: minmax(0, 1fr);
gap: 0;
height: auto;
min-height: 100%;
}
.settings-tabs {
position: sticky;
top: 0;
display: flex;
gap: 6px;
height: auto;
min-height: 0;
margin: 0 -12px;
padding: 10px 12px 11px;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid rgba(47, 85, 69, .1);
border-radius: 0;
background: rgba(246, 241, 231, .96);
box-shadow: 0 8px 20px rgba(43, 66, 58, .08);
backdrop-filter: blur(12px);
scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar {
display: none;
}
.settings-tabs-heading {
display: none;
}
.settings-tab {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
flex: 1 0 68px;
min-width: 68px;
min-height: 62px;
padding: 7px 4px;
border-color: rgba(47, 85, 69, .08);
border-radius: 12px;
background: rgba(255, 253, 248, .72);
color: var(--green-deep);
text-align: center;
}
.settings-tab:hover {
background: var(--paper);
color: var(--green-deep);
}
.settings-tab.is-active {
border-color: var(--green);
background: var(--green);
color: #fff;
box-shadow: 0 7px 16px rgba(31, 57, 46, .18);
}
.settings-tab:focus-visible {
outline-color: var(--coral);
}
.settings-tab-icon {
width: 27px;
height: 27px;
border-radius: 8px;
background: rgba(47, 85, 69, .08);
}
.settings-tab.is-active .settings-tab-icon {
background: rgba(255, 255, 255, .14);
color: #fff;
}
.settings-tab-icon svg {
width: 15px;
height: 15px;
}
.settings-tab-copy {
display: block;
width: 100%;
}
.settings-tab-copy b {
display: block;
width: 100%;
font-size: 10.5px;
line-height: 1.15;
white-space: normal;
}
.settings-tab-copy small,
.settings-tab-arrow {
display: none;
}
.settings-panels {
height: auto;
min-height: 0;
padding: 12px 0 0;
overflow: visible;
scrollbar-gutter: auto;
}
.settings-panel {
gap: 11px;
}
.settings-panel-hero {
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
padding: 15px;
border-radius: 17px;
}
.settings-panel-hero-icon {
width: 44px;
height: 44px;
border-radius: 14px;
}
.settings-panel-hero-icon svg {
width: 22px;
height: 22px;
}
.settings-panel-kicker {
font-size: 8.5px;
}
.settings-panel-hero h4 {
font-size: 21px;
}
.settings-panel-hero p {
margin-top: 4px;
font-size: 11.5px;
}
.settings-card-section {
padding: 15px 15px 7px;
border-radius: 16px;
}
.settings-card-section.settings-security-card { padding: 20px 18px; }
.settings-security-card .settings-security-head { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding-bottom: 17px; }
.settings-security-card .settings-security-icon { width: 46px; height: 46px; border-radius: 15px; }
.settings-security-card .settings-security-head b { font-size: 15.5px; }
.settings-security-card .settings-security-head small { font-size: 12px; }
.settings-security-card .settings-auth-methods { gap: 7px; padding: 16px 0; }
.settings-security-card .settings-security-note { padding: 13px 14px; }
.settings-security-card .settings-security-actions { gap: 9px; padding-top: 14px; }
.settings-card-section > .settings-section-title {
font-size: 16px;
}
.settings-section-intro {
margin-bottom: 11px;
font-size: 11.5px;
}
.settings-row {
gap: 12px;
padding: 13px 1px;
}
.settings-row-text b {
font-size: 13.5px;
}
.settings-row-text small {
font-size: 11px;
}
.settings-select-row {
gap: 9px;
}
.settings-select {
width: 100%;
max-width: none;
}
.settings-account-card {
align-items: flex-start;
padding-top: 14px;
padding-bottom: 14px;
}
.settings-account-avatar {
width: 50px !important;
height: 50px !important;
flex-basis: 50px !important;
}
.settings-account-meta b {
font-size: 16px;
}
.settings-account-actions {
width: 100%;
}
.settings-account-actions .small-btn {
flex: 1 1 0;
justify-content: center;
min-width: 0;
}
.settings-about-facts {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.push-device-card {
grid-template-columns: 38px minmax(0, 1fr);
}
.push-device-action {
grid-column: 1 / -1;
}
}
body.hide-nav-counts .nav-list .nb-count {
display: none !important;
}
body.reduce-motion {
--motion-quick: 0ms;
--motion-base: 0ms;
--motion-slow: 0ms;
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
@media (max-width: 420px) {
.settings-row-action {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 9px;
}
.settings-row-btn {
width: 100% !important;
justify-content: center;
white-space: normal;
}
}
.tasks-hero {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.tasks-new-btn {
gap: 6px;
}
.tasks-new-btn svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.task-mobile-filter,
.task-scope-mobile,
.task-mobile-group {
display: none;
}
button.chk {
margin: 2px 0 0;
padding: 0;
appearance: none;
font: inherit;
}
.task-owner-line {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.task-inline-tools {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--ui-line-soft, rgba(47, 85, 69, .1));
}
.task-inline-tools > summary {
display: none;
}
.task-inline-tools:not([open]) > form {
display: grid;
}
.task-danger-menu {
position: relative;
min-width: 0;
}
.task-danger-menu > summary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(246, 241, 231, .72);
color: var(--muted);
font-size: 12px;
font-weight: 750;
list-style: none;
cursor: pointer;
}
.task-danger-menu > summary::-webkit-details-marker {
display: none;
}
.task-danger-menu > .btn {
margin-top: 7px;
}
@media (max-width: 760px) {
.tasks-hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 46px;
align-items: center !important;
gap: 10px;
margin-bottom: 11px !important;
}
.tasks-hero > div {
min-width: 0;
}
.tasks-hero .view-sub {
max-width: 28ch;
margin-top: 4px;
}
.tasks-hero > .tasks-new-btn {
align-self: center;
width: 46px !important;
min-width: 46px;
height: 46px;
min-height: 46px;
padding: 0;
border-radius: 15px;
}
.tasks-new-btn svg {
width: 20px;
height: 20px;
flex-basis: 20px;
margin: 0;
}
.tasks-new-btn span {
display: none;
}
#tasks-region .obligation-book-launcher {
grid-template-columns: 40px minmax(0, 1fr);
gap: 8px 10px;
margin-bottom: 10px;
padding: 11px;
border-radius: 15px;
box-shadow: 0 6px 18px rgba(46, 70, 59, .045);
}
#tasks-region .obligation-book-launcher-icon {
width: 40px;
height: 40px;
}
#tasks-region .obligation-book-launcher-icon svg {
width: 21px;
height: 21px;
}
#tasks-region .obligation-book-launcher .eyebrow,
#tasks-region .obligation-book-launcher p {
display: none;
}
#tasks-region .obligation-book-launcher h2 {
font-size: 16px;
line-height: 1.2;
}
#tasks-region .obligation-book-stats {
grid-column: 1 / -1;
gap: 7px;
}
#tasks-region .obligation-book-stats span {
display: flex;
flex: 1 1 0;
align-items: baseline;
gap: 5px;
padding: 6px 9px;
border-radius: 10px;
font-size: 10.5px;
}
#tasks-region .obligation-book-stats b {
font-size: 15px;
}
#tasks-region .obligation-book-actions {
grid-column: 1 / -1;
}
#tasks-region .obligation-book-actions [data-new-obligation-record] {
display: none;
}
#tasks-region .obligation-book-actions .btn {
width: 100%;
min-height: 42px;
}
#tasks-region .task-scope-bar {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 9px;
margin-bottom: 8px;
padding: 7px 8px 7px 11px;
border-radius: 14px;
}
#tasks-region .task-scope-bar > div:first-child > span,
#tasks-region .task-scope-desktop {
display: none;
}
#tasks-region .task-scope-mobile {
display: inline;
font-family: var(--body);
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
#tasks-region .scope-switch {
width: 100%;
}
#tasks-region .scope-btn {
min-height: 40px;
}
#tasks-region .task-filters {
grid-template-columns: minmax(0, 1fr);
gap: 7px;
margin-bottom: 10px;
padding-top: 7px;
padding-bottom: 7px;
}
#tasks-region .task-filters .seg {
display: none !important;
}
#tasks-region .task-mobile-filter {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
}
#tasks-region .task-mobile-filter > span {
color: var(--green-deep);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
#tasks-region .task-mobile-filter select,
#tasks-region .task-filters .flt {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 8px 34px 8px 11px;
border: 1px solid var(--look-line, var(--line));
border-radius: 12px;
background-color: rgba(255, 253, 248, .96);
color: var(--ink);
font: 750 13px/1.2 var(--body);
}
#tasks-region .task-mobile-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 8px 2px 1px;
padding: 6px 2px 3px;
}
#tasks-region .task-mobile-group:first-child {
margin-top: 0;
}
#tasks-region .task-mobile-group > span,
#tasks-region .task-mobile-group b,
#tasks-region .task-mobile-group small {
display: block;
}
#tasks-region .task-mobile-group b {
color: var(--green-deep);
font-size: 13px;
}
#tasks-region .task-mobile-group small {
margin-top: 1px;
color: var(--muted);
font-size: 9.5px;
}
#tasks-region .task-mobile-group em {
display: grid;
place-items: center;
min-width: 27px;
height: 27px;
padding: 0 6px;
border-radius: 999px;
background: var(--cream-deep);
color: var(--green-deep);
font-size: 10.5px;
font-style: normal;
font-weight: 850;
}
#tasks-region .task-mobile-group.group-overdue b,
#tasks-region .task-mobile-group.group-overdue em {
color: var(--coral-deep);
}
#tasks-region .task-mobile-group.group-overdue em {
background: rgba(224, 122, 95, .11);
}
#tasks-region .task-list .tk,
#tasks-region .card.task-list .tk[data-open-task] {
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
gap: 8px 10px;
min-height: 0;
margin-bottom: 0;
padding: 13px 12px !important;
border-radius: 15px;
background: rgba(255, 255, 255, .92);
}
#tasks-region .task-list .tk.priority-high {
border-left: 3px solid rgba(224, 122, 95, .72);
padding-left: 10px !important;
}
#tasks-region .task-list .chk {
width: 32px;
height: 32px;
flex-basis: 32px;
margin: 1px 0 0;
border-width: 2px;
border-radius: 10px;
background: rgba(255, 253, 248, .96);
}
#tasks-region .task-list button.chk {
-webkit-tap-highlight-color: transparent;
}
#tasks-region .task-list .tk-main {
grid-column: 2;
padding: 0;
}
#tasks-region .task-list .tk-title {
align-items: flex-start;
gap: 6px;
font-size: 15px;
line-height: 1.32;
}
#tasks-region .task-list .tk-det {
margin-top: 4px;
font-size: 11.5px;
line-height: 1.4;
-webkit-line-clamp: 1;
}
#tasks-region .task-list .tk-meta {
gap: 5px 7px;
margin-top: 8px;
font-size: 10.5px;
}
#tasks-region .task-owner-prefix {
display: none;
}
#tasks-region .task-list .tk-meta .pill-soft {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#tasks-region .task-list .tk-dl {
grid-column: 2;
justify-self: stretch;
width: 100%;
min-width: 0;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
margin-top: 1px;
padding: 9px 0 0;
border: 0;
border-top: 1px solid rgba(47, 85, 69, .08);
border-radius: 0;
background: transparent;
color: var(--muted);
font-size: 10.5px;
text-align: left;
}
#tasks-region .task-list .tk-dl small {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 7px;
border-radius: 999px;
background: var(--cream-deep);
font-size: 8.5px;
}
#tasks-region .task-list .tk-dl.over small {
background: rgba(224, 122, 95, .11);
color: var(--coral-deep);
}
#tasks-region .task-list .tk-dl::after {
content: "Otevřít detail  ›";
margin-left: auto;
color: var(--green-deep);
font-size: 10.5px;
font-weight: 800;
white-space: nowrap;
}
#modal-root .task-detail-modal .task-modal-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
#modal-root .task-detail-modal .task-modal-meta > div {
padding: 9px 10px;
}
#modal-root .task-detail-modal .task-modal-meta > div:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
#modal-root .task-detail-modal .task-modal-meta b {
overflow: visible;
font-size: 12px;
line-height: 1.35;
text-overflow: clip;
white-space: normal;
}
#modal-root .task-order-section.is-empty .task-order-grid {
display: none;
}
#modal-root .task-order-section.is-empty .task-modal-section-head {
margin-bottom: 0;
}
#modal-root .task-order-section.is-empty .task-modal-section-head .small-btn {
width: auto;
min-height: 40px;
}
#modal-root .task-detail-modal .task-solution-form textarea {
min-height: 112px;
}
#modal-root .task-detail-modal .task-modal-section-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
width: 100%;
}
#modal-root .task-detail-modal .task-modal-section-actions > .btn {
width: 100%;
}
#modal-root .task-detail-modal .task-danger-menu > summary {
min-height: 44px;
}
#modal-root .task-detail-modal .task-danger-menu[open] {
grid-column: 1 / -1;
}
#modal-root .task-detail-modal .task-danger-menu[open] > .btn {
width: 100%;
}
#modal-root .task-detail-modal .task-inline-tools {
margin-top: 11px;
padding-top: 10px;
}
#modal-root .task-detail-modal .task-inline-tools > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 50px;
padding: 8px 10px;
border: 1px solid var(--ui-line-soft);
border-radius: 12px;
background: rgba(246, 241, 231, .52);
color: var(--ink);
list-style: none;
cursor: pointer;
}
#modal-root .task-detail-modal .task-inline-tools > summary::-webkit-details-marker {
display: none;
}
#modal-root .task-detail-modal .task-inline-tools > summary span,
#modal-root .task-detail-modal .task-inline-tools > summary b,
#modal-root .task-detail-modal .task-inline-tools > summary small {
display: block;
}
#modal-root .task-detail-modal .task-inline-tools > summary b {
font-size: 13px;
}
#modal-root .task-detail-modal .task-inline-tools > summary small {
margin-top: 2px;
color: var(--muted);
font-size: 10px;
}
#modal-root .task-detail-modal .task-inline-tools > summary i {
color: var(--muted);
font-size: 18px;
font-style: normal;
transition: transform .16s ease;
}
#modal-root .task-detail-modal .task-inline-tools[open] > summary i {
transform: rotate(180deg);
}
#modal-root .task-detail-modal .task-inline-tools:not([open]) > form {
display: none;
}
#modal-root .task-detail-modal .task-inline-tools[open] > form {
display: grid;
margin-top: 11px;
}
#modal-root .task-detail-modal .task-inline-tools form > .task-modal-section-head {
display: none;
}
}
.push-preview-experiment {
margin-top: 12px;
padding: 13px 14px 11px;
border: 1px dashed rgba(47, 85, 69, .24);
border-radius: 16px;
background: rgba(255, 253, 248, .76);
}
.push-preview-experiment.is-enabled {
border-style: solid;
border-color: rgba(47, 85, 69, .28);
background: rgba(237, 244, 234, .78);
}
.push-preview-experiment-head {
display: flex;
gap: 8px;
align-items: baseline;
margin-bottom: 2px;
}
.push-preview-experiment-head span {
padding: 4px 7px;
border-radius: 999px;
background: rgba(224, 122, 95, .13);
color: var(--coral-deep);
font-size: 9px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.push-preview-experiment-head b {
font-size: 12px;
}
.push-preview-experiment-row {
padding: 11px 0 8px;
border-top: 0;
}
.push-preview-experiment-row input:disabled {
cursor: not-allowed;
opacity: .45;
}
.push-preview-experiment-foot {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.push-preview-key-status {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(47, 85, 69, .07);
color: var(--muted);
font-size: 10.5px;
font-weight: 700;
line-height: 1.45;
}
.push-preview-key-status.is-ready {
background: rgba(47, 85, 69, .11);
color: var(--green-deep);
}
.push-preview-key-status.is-bad {
background: rgba(197, 73, 51, .1);
color: var(--coral-deep);
}
.push-preview-experiment-foot p {
max-width: 560px;
margin: 0;
color: var(--muted);
font-size: 10.5px;
line-height: 1.5;
}
.push-preview-experiment-foot .small-btn {
flex: 0 0 auto;
min-height: 34px;
white-space: nowrap;
}
@media (max-width: 760px) {
.push-preview-experiment-head {
display: grid;
justify-items: start;
}
.push-preview-experiment-foot {
display: grid;
}
.push-preview-key-status {
margin-bottom: 12px;
padding: 9px 10px;
font-size: 11px;
}
.push-preview-experiment-foot .small-btn {
width: 100%;
white-space: normal;
}
}
.direct-e2ee-head {
min-height: 36px;
border-color: rgba(47,85,69,.22) !important;
color: var(--green-deep) !important;
}
.direct-e2ee-head.is-active {
background: rgba(47,85,69,.12) !important;
border-color: rgba(47,85,69,.42) !important;
}
.direct-e2ee-head svg { width: 16px; height: 16px; flex: 0 0 16px; }
.fcw-head .direct-e2ee-head,
.fchat-mobile-head .direct-e2ee-head {
width: 34px;
height: 34px;
min-height: 34px;
padding: 0;
border: 0 !important;
color: inherit !important;
background: rgba(255,255,255,.12) !important;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-e2ee-tag {
display: block;
width: max-content;
margin: 0 0 5px;
color: currentColor;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
opacity: .7;
}
.direct-e2ee-composer-note {
margin: 0 0 7px;
padding: 8px 12px;
border: 1px solid rgba(47,85,69,.16);
border-radius: 12px;
background: rgba(47,85,69,.07);
color: var(--green-deep);
font-size: 12px;
line-height: 1.35;
}
.direct-e2ee-composer-note.compact { margin: 0; border-radius: 0; text-align: center; font-size: 11px; }
.direct-e2ee-modal { width: min(680px, calc(100vw - 24px)); }
.direct-e2ee-modal-body { display: grid; gap: 16px; }
.direct-e2ee-loading,
.direct-e2ee-error,
.direct-e2ee-intro,
.direct-e2ee-devices,
.direct-e2ee-health {
border: 1px solid rgba(47,85,69,.16);
border-radius: 18px;
background: #fffdf8;
padding: 18px;
}
.direct-e2ee-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.direct-e2ee-error { border-color: rgba(185,72,52,.28); color: #8d382a; }
.direct-e2ee-error p,
.direct-e2ee-intro p { margin: 7px 0 14px; color: var(--muted); line-height: 1.55; }
.direct-e2ee-intro h4 { margin: 10px 0 0; font-size: 22px; color: var(--green-deep); }
.direct-e2ee-state {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
background: var(--cream);
color: var(--muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
}
.direct-e2ee-state.is-active { background: rgba(47,85,69,.12); color: var(--green-deep); }
.direct-e2ee-state.is-paused { background: rgba(201,113,77,.12); color: #98563b; }
.direct-e2ee-devices > div:first-child { display: grid; gap: 4px; margin-bottom: 10px; }
.direct-e2ee-devices > div:first-child > span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.direct-e2ee-device-warning { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(201,113,77,.1); color: #7f4b36; font-size: 12px; line-height: 1.45; }
.direct-e2ee-device-warning.is-danger { background: rgba(166,66,50,.1); color: #923b2e; }
.direct-e2ee-device {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-top: 1px solid rgba(47,85,69,.1);
}
.direct-e2ee-device > div { display: grid; gap: 5px; min-width: 0; }
.direct-e2ee-device span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.direct-e2ee-device code {
width: max-content;
max-width: 100%;
padding: 6px 8px;
border: 1px solid rgba(47,85,69,.14);
border-radius: 8px;
background: #f3efe6;
color: var(--green-deep);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
font-weight: 800;
letter-spacing: .055em;
overflow-wrap: anywhere;
}
.direct-e2ee-code-hidden {
color: var(--muted);
font-size: 12px;
font-style: italic;
}
.direct-e2ee-device-action { justify-items: end; }
.direct-e2ee-copy-code {
width: max-content;
padding: 5px 8px !important;
border: 0 !important;
background: transparent !important;
color: var(--muted) !important;
font-size: 11px;
}
.direct-e2ee-verify-input { display: grid; gap: 5px; width: min(240px, 100%); }
.direct-e2ee-verify-input span { font-size: 10px; font-weight: 800; }
.direct-e2ee-verify-input input {
width: 100%;
min-height: 38px;
padding: 8px 10px;
border: 1px solid rgba(47,85,69,.22);
border-radius: 10px;
background: #fff;
color: var(--green-deep);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
}
.direct-e2ee-device button,
.direct-e2ee-admin button {
border: 1px solid rgba(47,85,69,.18);
border-radius: 10px;
background: var(--cream);
color: var(--green-deep);
padding: 8px 10px;
font-weight: 750;
cursor: pointer;
}
.direct-e2ee-device button.danger,
.direct-e2ee-admin button.danger { color: #a64232; }
.direct-e2ee-health { display: grid; gap: 13px; }
.direct-e2ee-health > div:first-child { display: grid; gap: 4px; }
.direct-e2ee-health > div:first-child span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.direct-e2ee-health dl {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
.direct-e2ee-health dl > div { padding: 10px; border-radius: 10px; background: #f3efe6; }
.direct-e2ee-health dt { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.direct-e2ee-health dd { margin: 4px 0 0; color: var(--green-deep); font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.direct-e2ee-outbox-warning {
display: grid;
gap: 6px;
padding: 12px;
border: 1px solid rgba(185,116,43,.24);
border-radius: 12px;
background: rgba(235,181,80,.12);
}
.direct-e2ee-outbox-warning span { color: #705431; font-size: 11px; line-height: 1.45; }
.direct-e2ee-outbox-warning button { justify-self: start; border: 1px solid rgba(112,84,49,.22); border-radius: 9px; padding: 8px 10px; background: #fffdf8; color: #705431; font-weight: 800; cursor: pointer; }
.direct-e2ee-admin { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
.direct-e2ee-head span { display: none; }
.direct-e2ee-device { align-items: flex-start; flex-direction: column; }
.direct-e2ee-device button { width: 100%; }
.direct-e2ee-device-action { width: 100%; justify-items: stretch; }
.direct-e2ee-verify-input { width: 100%; }
.direct-e2ee-health dl { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
#modal-root .task-detail-modal .modal-body,
#modal-root .task-detail-modal .task-modal-detail,
#modal-root .task-detail-modal .task-modal-detail > *,
#modal-root .task-detail-modal .task-modal-grid > *,
#modal-root .task-detail-modal .task-modal-section,
#modal-root .task-detail-modal .task-modal-section-head,
#modal-root .task-detail-modal .task-modal-section-head > *,
#modal-root .task-detail-modal .task-modal-section-actions,
#modal-root .task-detail-modal .task-inline-tools,
#modal-root .task-detail-modal .task-inline-tools > summary,
#modal-root .task-detail-modal .write-form,
#modal-root .task-detail-modal .field {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
#modal-root .task-detail-modal .task-modal-detail {
width: 100%;
}
#modal-root .task-detail-modal .task-modal-hero {
width: 100%;
min-width: 0;
max-width: 100%;
padding: 2px 1px 4px;
box-sizing: border-box;
}
#modal-root .task-detail-modal .task-modal-hero h2,
#modal-root .task-detail-modal .task-modal-hero p,
#modal-root .task-detail-modal .task-modal-description,
#modal-root .task-detail-modal .task-modal-section p,
#modal-root .task-detail-modal .task-modal-meta b,
#modal-root .task-detail-modal .task-solution-read,
#modal-root .task-detail-modal .mini-list,
#modal-root .task-detail-modal .mini-list li,
#modal-root .task-detail-modal .mini-list a {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
#modal-root .task-detail-modal .task-modal-hero h2 {
font-size: 22px;
line-height: 1.14;
}
#modal-root .task-detail-modal .task-modal-hero p {
font-size: 14px;
line-height: 1.52;
white-space: pre-wrap;
}
#modal-root .task-detail-modal .task-modal-description {
display: grid;
gap: 6px;
padding: 11px 12px;
border: 1px solid rgba(47, 85, 69, .11);
border-radius: 12px;
background: rgba(246, 241, 231, .46);
}
#modal-root .task-detail-modal .task-modal-description > span {
display: block;
color: var(--green-deep);
font-size: 9px;
font-weight: 850;
letter-spacing: .07em;
text-transform: uppercase;
}
#modal-root .task-detail-modal .task-detail-inline-link {
display: inline;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
white-space: normal;
}
#modal-root .task-detail-modal .task-modal-meta {
width: 100%;
min-width: 0;
}
#modal-root .task-detail-modal .task-modal-meta > div {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
#modal-root .task-detail-modal .task-modal-section-head .small-btn,
#modal-root .task-detail-modal .task-modal-section-head .btn,
#modal-root .task-detail-modal .task-modal-actions .btn {
max-width: 100%;
white-space: normal;
}
#modal-root .task-detail-modal .task-order-section.is-empty .task-modal-section-head .small-btn {
width: auto;
align-self: flex-start;
}
#modal-root .task-detail-modal input,
#modal-root .task-detail-modal select,
#modal-root .task-detail-modal textarea {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
}
.meeting-note-block.meeting-quick-note-row > .meeting-rich-editor.is-bullet {
min-height: 34px;
padding: 6px 5px;
border-color: transparent;
border-radius: 7px;
background: transparent;
font-size: 13.5px;
line-height: 1.55;
box-shadow: none;
}
.meeting-note-block.meeting-quick-note-row > .meeting-rich-editor.is-bullet:focus {
border-color: rgba(224, 122, 95, .28);
background: rgba(255, 255, 255, .82);
box-shadow: 0 0 0 3px rgba(224, 122, 95, .06);
}
.meeting-note-block.meeting-quick-note-row.is-heading > .meeting-rich-editor.is-bullet {
min-height: 40px;
font-family: var(--display);
font-size: 18px;
font-weight: 800;
line-height: 1.35;
}
@media (max-width: 760px) {
.meeting-note-block.meeting-quick-note-row > .meeting-rich-editor.is-bullet {
min-height: 40px;
padding: 8px 4px;
font-size: 15px;
}
.meeting-note-block.meeting-quick-note-row.is-heading > .meeting-rich-editor.is-bullet {
font-size: 19px;
}
.meeting-note-add-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.meeting-note-block-menu .meeting-note-row-menu-panel {
position: fixed;
inset: auto 12px calc(76px + env(safe-area-inset-bottom, 0px)) 12px;
z-index: 2300;
width: auto;
max-height: 60dvh;
overflow-y: auto;
}
}
/* Dashboard — pracovní revize (2026-07-28, dashrev1)                 */
.dash-top {
grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.dash-today {
padding: 20px 22px;
border-radius: 20px;
background: rgba(255, 253, 248, .96);
box-shadow: 0 1px 2px rgba(43, 66, 58, .03), 0 12px 30px rgba(43, 66, 58, .07);
}
.dash-today::after { display: none; }
.dash-today-head {
align-items: center;
padding-bottom: 0;
border-bottom: 0;
}
.dash-today h2 {
margin-top: 3px;
font-size: clamp(27px, 3vw, 34px);
line-height: 1.05;
}
.dash-quick-actions {
flex: 0 0 auto;
gap: 7px;
margin: 0;
}
.dash-quick-actions .btn {
min-height: 34px;
padding: 7px 13px;
border-radius: 11px;
font-size: 12px;
box-shadow: none;
}
.dash-today-context {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
margin-top: 13px;
padding: 11px 0;
border-top: 1px solid var(--look-line-soft);
border-bottom: 1px solid var(--look-line-soft);
}
.dash-today-line {
max-width: 54ch;
margin: 0;
font-size: 13.5px;
line-height: 1.4;
}
.dash-today-context .dash-status-strip {
display: flex;
flex-wrap: nowrap;
gap: 0;
margin: 0;
}
.dash-today-context .dash-status-pill {
display: inline-flex;
align-items: baseline;
gap: 5px;
min-width: 0;
padding: 3px 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
white-space: nowrap;
}
.dash-today-context .dash-status-pill + .dash-status-pill {
border-left: 1px solid var(--look-line);
}
.dash-today-context .dash-status-pill:hover {
border-color: var(--look-line);
background: rgba(169, 184, 164, .11);
box-shadow: none;
transform: none;
}
.dash-today-context .dash-status-pill b {
display: inline;
font-family: var(--body);
font-size: 14px;
line-height: 1;
}
.dash-today-context .dash-status-pill span {
display: inline;
margin: 0;
font-size: 10.5px;
}
.dash-today-context .dash-status-pill.warn {
border-radius: 0;
background: transparent;
}
.dash-now-inline { padding-top: 14px; }
.dash-now-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.dash-now-head .dash-panel-title { margin: 0; }
.dash-now-head > span {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
text-align: right;
}
.now-queue {
margin-top: 9px;
border-top: 1px solid var(--look-line-soft);
}
.now-queue-item {
appearance: none;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto 22px;
align-items: center;
gap: 10px;
width: 100%;
min-height: 50px;
padding: 8px 3px;
border: 0;
border-bottom: 1px solid var(--look-line-soft);
border-radius: 0;
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color var(--motion-quick) ease;
}
.now-queue-item:last-child { border-bottom: 0; }
.now-queue-item:hover { background: rgba(169, 184, 164, .11); }
.now-queue-item.current {
width: calc(100% + 14px);
margin-left: -7px;
padding-right: 10px;
padding-left: 10px;
border-bottom-color: transparent;
border-radius: 12px;
background: rgba(224, 122, 95, .075);
box-shadow: inset 3px 0 0 var(--coral);
}
.now-queue-item.current:hover { background: rgba(224, 122, 95, .115); }
.now-queue-rank {
display: grid;
place-items: center;
width: 30px;
height: 26px;
border-radius: 9px;
background: rgba(56, 85, 74, .07);
color: var(--muted);
font-size: 11px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.now-queue-item.current .now-queue-rank {
width: 38px;
background: var(--coral);
color: #fff;
}
.now-queue-copy {
display: block;
min-width: 0;
}
.now-queue-copy b,
.now-queue-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.now-queue-copy b {
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.now-queue-copy small {
margin-top: 3px;
color: var(--muted);
font-size: 10.5px;
line-height: 1.25;
}
.now-queue-when {
color: var(--muted);
font-size: 11px;
font-weight: 650;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.now-queue-item.over .now-queue-when { color: var(--coral-deep); }
.now-queue-open {
display: grid;
place-items: center;
color: var(--sage-deep);
}
.now-queue-open svg { width: 16px; height: 16px; }
.now-queue-item:hover .now-queue-open { color: var(--coral-deep); }
.dash-agenda-panel {
border-radius: 18px;
background: rgba(255, 253, 248, .93);
box-shadow: 0 1px 2px rgba(43, 66, 58, .03), 0 10px 24px rgba(43, 66, 58, .055);
}
.dash-agenda-panel .dash-day-event { padding: 13px 15px; }
.dash-agenda-panel .dash-day-title { margin-top: 9px; font-size: 16px; }
.dash-agenda-panel .dash-day-text {
margin-top: 4px;
-webkit-line-clamp: 1;
font-size: 10.5px;
}
.dash-agenda-panel .dash-day-link { margin-top: 8px; }
.dash-agenda-panel .dash-meetings-head { padding: 12px 13px 7px; }
.dash-agenda-panel .dash-meeting-list { gap: 6px; padding: 0 11px 11px; }
.dash-agenda-panel .dash-meeting-row {
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
padding: 9px 10px;
border-radius: 12px;
}
.dash-agenda-panel .dash-meeting-date {
width: 40px;
height: 44px;
border-radius: 9px;
}
.dash-agenda-panel .dash-meeting-date strong { font-size: 17px; }
.dash-agenda-panel .dash-meeting-row b { margin-top: 3px; font-size: 13.5px; }
.dash-agenda-panel .dash-meeting-body > span:not(.dash-side-kicker) {
margin-top: 2px;
font-size: 10.5px;
}
.dash-personal-row { align-items: start; }
.dash-personal-row > .card { width: 100%; box-sizing: border-box; }
.dash-personal-row > .card::after { display: none; }
.dash-section { margin-top: 16px; }
.dash-memory-strip { margin-top: 16px; }
@media (max-width: 1060px) {
.dash-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.dash-top {
gap: 12px;
margin-bottom: 12px;
}
.dash-today {
padding: 16px;
border-radius: 18px;
}
.dash-today-head {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 11px;
}
.dash-today h2 { font-size: 25px; }
.dash-quick-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.dash-quick-actions .btn {
width: 100%;
justify-content: center;
}
.dash-today-context {
grid-template-columns: minmax(0, 1fr);
gap: 9px;
margin-top: 12px;
padding: 10px 0;
}
.dash-today-line { font-size: 13px; }
.dash-today-context .dash-status-strip { width: 100%; }
.dash-today-context .dash-status-pill {
flex: 1 1 0;
justify-content: center;
padding: 3px 5px;
}
.dash-today-context .dash-status-pill b { font-size: 13.5px; }
.dash-today-context .dash-status-pill span { font-size: 9.5px; }
.dash-now-inline { padding-top: 12px; }
.dash-now-head {
display: block;
}
.dash-now-head > span {
display: block;
margin: 5px 0 0 34px;
font-size: 10.5px;
text-align: left;
}
.now-queue { margin-top: 8px; }
.now-queue-item {
grid-template-columns: 38px minmax(0, 1fr) 20px;
row-gap: 3px;
min-height: 58px;
padding: 8px 2px;
}
.now-queue-rank {
grid-row: 1 / 3;
width: 28px;
height: 25px;
}
.now-queue-item.current .now-queue-rank { width: 36px; }
.now-queue-copy { grid-column: 2; }
.now-queue-copy b { font-size: 13px; }
.now-queue-copy small { font-size: 10px; }
.now-queue-when {
grid-column: 2;
font-size: 10.5px;
}
.now-queue-open {
grid-column: 3;
grid-row: 1 / 3;
}
.dash-agenda-panel { border-radius: 16px; }
.dash-agenda-panel .dash-day-text { display: none; }
.dash-agenda-panel .dash-day-title { font-size: 15.5px; }
.dash-section,
.dash-memory-strip { margin-top: 12px; }
}
/* Dashboard — lehčí a vzdušnější celek (2026-07-28, dashair1)       */
#overview-view .dash-top {
gap: 24px;
margin-bottom: 0;
}
#overview-view .dash-today {
padding: 24px 26px;
border-color: rgba(56, 85, 74, .09);
border-radius: 26px;
background: rgba(255, 253, 248, .78);
box-shadow:
0 1px 1px rgba(43, 66, 58, .025),
0 18px 44px rgba(43, 66, 58, .045);
backdrop-filter: blur(12px) saturate(104%);
}
#overview-view .dash-today-context {
gap: 22px;
margin-top: 16px;
padding: 14px 0;
border-top: 0;
border-bottom-color: rgba(56, 85, 74, .075);
}
#overview-view .dash-today-line {
font-size: 14px;
line-height: 1.5;
}
#overview-view .dash-today-context .dash-status-pill {
padding: 5px 11px;
}
#overview-view .dash-today-context .dash-status-pill + .dash-status-pill {
border-left-color: rgba(56, 85, 74, .1);
}
#overview-view .dash-now-inline { padding-top: 18px; }
#overview-view .dash-now-head > span {
font-size: 11.5px;
line-height: 1.45;
}
#overview-view .now-queue {
display: grid;
gap: 2px;
margin-top: 12px;
border-top: 0;
}
#overview-view .now-queue-item {
min-height: 54px;
padding: 10px 5px;
border-bottom: 0;
border-radius: 14px;
}
#overview-view .now-queue-item.current {
width: calc(100% + 12px);
margin-left: -6px;
padding-right: 11px;
padding-left: 11px;
border-radius: 16px;
background: rgba(224, 122, 95, .06);
box-shadow: inset 2px 0 0 rgba(224, 122, 95, .82);
}
#overview-view .now-queue-item:not(.current):hover {
background: rgba(169, 184, 164, .09);
}
#overview-view .now-queue-rank {
background: rgba(56, 85, 74, .055);
}
#overview-view .now-queue-item.current .now-queue-rank {
background: rgba(205, 105, 79, .9);
}
#overview-view .dash-agenda-panel {
display: grid;
gap: 18px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#overview-view .dash-agenda-panel .dash-day-event,
#overview-view .dash-meetings-card {
overflow: hidden;
border: 1px solid rgba(56, 85, 74, .085);
border-radius: 24px;
background: rgba(255, 253, 248, .72);
box-shadow:
0 1px 1px rgba(43, 66, 58, .02),
0 14px 34px rgba(43, 66, 58, .04);
backdrop-filter: blur(10px) saturate(104%);
}
#overview-view .dash-agenda-panel .dash-day-event {
padding: 16px 17px;
border-bottom: 1px solid rgba(56, 85, 74, .085);
background: rgba(255, 247, 237, .72);
}
#overview-view .dash-agenda-panel .dash-day-title {
margin-top: 11px;
font-size: 17px;
}
#overview-view .dash-agenda-panel .dash-day-text {
margin-top: 5px;
line-height: 1.5;
}
#overview-view .dash-agenda-panel .dash-meetings-head {
padding: 15px 15px 9px;
}
#overview-view .dash-agenda-panel .dash-meeting-list {
gap: 8px;
padding: 0 13px 13px;
}
#overview-view .dash-agenda-panel .dash-meeting-row {
padding: 11px 12px;
border-color: rgba(56, 85, 74, .075);
border-radius: 15px;
background: rgba(255, 255, 255, .48);
}
#overview-view .dash-section { margin-top: 28px; }
#overview-view .dash-personal-row {
display: grid;
grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
gap: 24px;
align-items: start;
}
#overview-view .dash-personal-stack {
display: grid;
gap: 18px;
min-width: 0;
}
#overview-view .dash-personal-stack .dash-memory-strip {
margin: 0;
}
#overview-view .dash-personal-row > .card,
#overview-view .dash-personal-stack > .card,
#overview-view .dash-organization-body .card {
width: 100%;
box-sizing: border-box;
padding: 22px 24px;
border-color: rgba(56, 85, 74, .09);
border-radius: 24px;
background: rgba(255, 253, 248, .68);
box-shadow:
0 1px 1px rgba(43, 66, 58, .02),
0 14px 34px rgba(43, 66, 58, .035);
backdrop-filter: blur(10px) saturate(103%);
}
#overview-view .dash-memory-strip {
padding: 15px 17px;
border: 0;
border-radius: 22px;
background: rgba(222, 232, 217, .54);
box-shadow: none;
}
#overview-view .dash-memory-icon {
background: rgba(49, 88, 70, .11);
}
#overview-view .dash-memory-open {
background: rgba(255, 255, 255, .48);
}
#overview-view .dash-panel-title .dash-panel-icon,
#overview-view .dash-meetings-head > .dash-panel-icon {
flex-basis: 26px;
width: 26px;
height: 26px;
border-radius: 9px;
background: rgba(169, 184, 164, .14);
}
#overview-view .dash-now-inline .dash-panel-icon {
background: rgba(224, 122, 95, .09);
}
#overview-view .panel-note {
margin-top: 5px;
margin-bottom: 18px;
line-height: 1.55;
}
#overview-view .wait-item,
#overview-view .care-item,
#overview-view .tline,
#overview-view .pj-line {
border-color: rgba(56, 85, 74, .065);
}
#overview-view .wait-item,
#overview-view .care-item {
padding-top: 13px;
padding-bottom: 13px;
}
#overview-view .pj-line,
#overview-view .tline {
padding-top: 12px;
padding-bottom: 12px;
}
#overview-view .dash-card-action,
#overview-view .dash-seed-card .small-btn,
#overview-view .care-btn {
border-color: rgba(56, 85, 74, .11);
background: rgba(255, 255, 255, .42);
box-shadow: none;
}
#overview-view .dash-organization {
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#overview-view .dash-organization > summary {
padding: 7px 2px 18px;
}
#overview-view .dash-organization > summary > div > b {
margin-top: 5px;
font-size: 22px;
line-height: 1.15;
}
#overview-view .dash-organization > summary > div > small {
margin-top: 5px;
font-size: 12px;
}
#overview-view .dash-organization-arrow {
border: 1px solid rgba(56, 85, 74, .09);
background: rgba(255, 255, 255, .4);
}
#overview-view .dash-organization-body {
gap: 20px;
padding: 0;
border-top: 0;
}
#overview-view .dash-organization-inspiration {
width: 100%;
max-width: none;
padding-top: 0;
}
#overview-view .dash-seed-card {
display: grid;
grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
margin: 0;
padding: 17px 20px;
border: 0;
border-radius: 22px;
background: rgba(249, 232, 221, .46);
box-shadow: none;
}
#overview-view .dash-seed-empty { line-height: 1.55; }
#overview-view .dash-seed-card .small-btn {
width: auto;
min-width: 138px;
margin: 0;
}
#overview-view .dash-organization-body > .dash-grid {
grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
gap: 24px;
align-items: start;
}
#overview-view .dash-organization-body .card::after { display: none; }
@media (max-width: 1060px) {
#overview-view .dash-personal-row,
#overview-view .dash-organization-body > .dash-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
#overview-view .dash-top {
gap: 16px;
}
#overview-view .dash-today {
padding: 19px 18px;
border-radius: 24px;
}
#overview-view .dash-today-context {
gap: 12px;
margin-top: 14px;
padding: 13px 0;
}
#overview-view .dash-now-inline { padding-top: 16px; }
#overview-view .now-queue {
gap: 3px;
margin-top: 11px;
}
#overview-view .now-queue-item {
min-height: 62px;
padding-top: 9px;
padding-bottom: 9px;
}
#overview-view .dash-agenda-panel {
gap: 14px;
}
#overview-view .dash-agenda-panel .dash-day-event,
#overview-view .dash-meetings-card {
border-radius: 22px;
}
#overview-view .dash-section { margin-top: 22px; }
#overview-view .dash-personal-row,
#overview-view .dash-personal-stack {
gap: 18px;
}
#overview-view .dash-personal-row > .card,
#overview-view .dash-personal-stack > .card,
#overview-view .dash-organization-body .card {
padding: 20px 18px;
border-radius: 22px;
}
#overview-view .dash-memory-strip {
padding: 14px 15px;
border-radius: 20px;
}
#overview-view .dash-organization > summary {
padding: 5px 2px 16px;
}
#overview-view .dash-organization > summary > div > b {
font-size: 21px;
}
#overview-view .dash-organization-body {
gap: 16px;
}
#overview-view .dash-seed-card {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 18px;
border-radius: 21px;
}
#overview-view .dash-seed-card .small-btn {
width: 100%;
min-width: 0;
margin-top: 3px;
}
#overview-view .dash-organization-body > .dash-grid {
gap: 16px;
}
}
/* 18. Jednotný vizuální systém celé Kořenky (2026-07-29, visualsystem1) */
:root {
--k-ui-surface: rgba(255, 253, 248, .86);
--k-ui-surface-solid: #fffdf9;
--k-ui-surface-soft: rgba(246, 241, 231, .66);
--k-ui-line: rgba(56, 85, 74, .115);
--k-ui-line-strong: rgba(56, 85, 74, .2);
--k-ui-shadow: 0 1px 2px rgba(43, 66, 58, .025), 0 8px 24px rgba(43, 66, 58, .045);
--k-ui-shadow-hover: 0 2px 4px rgba(43, 66, 58, .035), 0 13px 30px rgba(43, 66, 58, .075);
--k-ui-radius-hero: 22px;
--k-ui-radius-panel: 18px;
--k-ui-radius-card: 14px;
--k-ui-radius-control: 12px;
}
#collection-view,
#collection-view > .card,
#collection-view .collection-panel,
#collection-view .collection-panel > * {
min-width: 0;
}
#collection-view .collection-hero {
align-items: center !important;
flex-wrap: nowrap !important;
gap: 24px !important;
min-height: 82px;
margin: 0 0 17px !important;
padding: 7px 2px 5px;
}
#collection-view .collection-hero > :first-child {
min-width: 0;
}
#collection-view .collection-hero .eyebrow {
margin-bottom: 5px;
color: var(--coral-deep);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .145em;
}
#collection-view .collection-hero .view-title {
margin: 0;
color: var(--ink);
font-size: clamp(29px, 3.1vw, 39px);
line-height: 1.03;
letter-spacing: -.025em;
}
#collection-view .collection-hero .view-sub {
max-width: 690px;
margin-top: 7px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.5;
}
.meeting-head-actions,
.people-head-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-left: auto;
}
#collection-view .collection-hero .btn,
#collection-view .collection-hero .people-capacity-link {
border-radius: var(--k-ui-radius-control);
}
.work-scope-bar {
margin-bottom: 13px;
padding: 13px 15px;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.scope-switch,
.task-filters .seg,
.project-layout-switch,
.meet-filter-chips {
border: 1px solid var(--k-ui-line);
border-radius: var(--k-ui-radius-card);
background: var(--k-ui-surface-soft);
box-shadow: none;
}
.scope-switch,
.task-filters .seg,
.project-layout-switch {
padding: 4px;
}
.scope-btn,
.task-filters .seg-btn,
.project-layout-switch button {
min-height: 36px;
border-radius: 10px;
}
.scope-btn.on,
.task-filters .seg-btn.on,
.project-layout-switch button.on {
color: var(--green-deep);
background: var(--k-ui-surface-solid);
box-shadow: 0 2px 7px rgba(43, 66, 58, .07);
}
.meet-filter-chips {
width: fit-content;
max-width: 100%;
margin-bottom: 16px;
padding: 4px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.meet-filter-chips::-webkit-scrollbar {
display: none;
}
.meet-chip {
flex: 0 0 auto;
min-height: 36px;
padding: 7px 11px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--muted);
white-space: nowrap;
}
.meet-chip:hover {
border-color: var(--k-ui-line);
color: var(--green-deep);
background: rgba(255, 255, 255, .56);
}
.meet-chip.on {
border-color: rgba(224, 122, 95, .24);
color: var(--coral-deep);
background: var(--k-ui-surface-solid);
box-shadow: 0 2px 7px rgba(43, 66, 58, .065);
}
.meet-chip.on b {
color: var(--coral-deep);
background: rgba(224, 122, 95, .11);
}
.project-view-controls {
gap: 10px;
margin-bottom: 14px;
}
.project-search {
min-height: 42px;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-control);
background: rgba(255, 255, 255, .68);
box-shadow: none;
}
.board {
gap: 14px;
}
.board .col {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: rgba(248, 245, 238, .66);
box-shadow: none;
}
.board .col-head {
border-bottom-color: var(--k-ui-line);
}
.pcard,
.person-card,
.idea-card,
.meeting-work-card,
.project-list-row {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-card);
background: var(--k-ui-surface-solid);
box-shadow: var(--k-ui-shadow);
}
.person-card {
background: var(--k-ui-surface-solid);
}
.pcard:hover,
.person-card:hover,
.idea-card:hover,
.meeting-work-card:hover,
.project-list-row:hover {
border-color: var(--k-ui-line-strong);
background: #fff;
box-shadow: var(--k-ui-shadow-hover);
}
.people-grid,
.idea-grid {
gap: 14px;
}
#tasks-region .task-list {
display: grid;
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#tasks-region .task-list .tk,
#tasks-region .card.task-list .tk[data-open-task] {
min-height: 62px;
padding: 13px 15px;
border: 1px solid var(--k-ui-line);
border-radius: var(--k-ui-radius-card);
background: var(--k-ui-surface-solid);
box-shadow: var(--k-ui-shadow);
}
#tasks-region .task-list .tk:last-child,
#tasks-region .card.task-list .tk[data-open-task]:last-child {
border-bottom: 1px solid var(--k-ui-line);
}
#tasks-region .task-list .tk:hover {
border-color: var(--k-ui-line-strong);
background: #fff;
box-shadow: var(--k-ui-shadow-hover);
}
#tasks-region .task-list .tk.is-waiting {
border-color: rgba(116, 139, 111, .2);
background: rgba(241, 245, 237, .9);
}
.obligation-book-launcher,
.decision-registry-launcher {
gap: 14px;
margin-bottom: 15px;
padding: 16px 18px;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.obligation-book-launcher-icon,
.decision-registry-launcher-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.obligation-book-launcher h2,
.decision-registry-launcher h2 {
margin: 2px 0 3px;
font-size: 20px;
}
.obligation-book-stats span,
.decision-registry-stats span {
min-width: 78px;
padding: 7px 10px;
border-color: var(--k-ui-line);
border-radius: 11px;
background: rgba(255, 255, 255, .58);
}
.obligation-book-stats b,
.decision-registry-stats b {
font-size: 17px;
}
.meeting-workflow {
gap: 13px;
max-width: 100%;
}
.meeting-phase-column,
.meeting-closed-section {
max-width: 100%;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: rgba(255, 253, 248, .58);
box-shadow: none;
}
.meeting-phase-column {
padding: 12px;
}
.meeting-workflow .meetcard {
margin-top: 0;
padding: 12px;
}
.meeting-closed-list {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-card);
background: rgba(255, 255, 255, .58);
}
form.idea-plant[data-idea-plant-form] {
margin-bottom: 15px;
padding: 16px 18px;
border: 1px solid var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.idea-prompt {
padding: 9px 12px;
border-style: solid;
border-color: rgba(224, 122, 95, .17);
border-radius: var(--k-ui-radius-control);
background: rgba(224, 122, 95, .055);
}
.idea-plant-row input[type="text"] {
min-height: 43px;
padding-inline: 13px;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-control);
background: rgba(255, 255, 255, .72);
}
.idea-card.stage-kompost {
background: rgba(246, 241, 231, .78);
}
.idea-card.stage-preneseno {
background: rgba(241, 245, 237, .82);
}
.finance-workspace,
.finance-tab-view {
gap: 14px;
}
.section-hero {
gap: 16px;
padding: 22px 24px;
border-radius: var(--k-ui-radius-hero);
box-shadow: 0 12px 30px rgba(31, 61, 49, .1);
}
.section-hero-copy {
gap: 14px;
}
.finance-home-icon,
.section-hero-icon {
width: 44px;
height: 44px;
flex-basis: 44px;
border-radius: 14px;
}
.section-hero-copy h1 {
margin-top: 2px;
font-size: clamp(27px, 3vw, 35px);
}
.finance-balance-block {
padding: 12px 15px;
border-radius: var(--k-ui-radius-card);
}
.finance-balance-block > b {
font-size: clamp(27px, 3.5vw, 37px);
}
.finance-workspace-tabs {
padding: 5px;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
box-shadow: var(--k-ui-shadow);
}
.finance-workspace-tabs button {
min-height: 40px;
border-radius: 11px;
}
.finance-workspace-tabs button.is-active {
box-shadow: 0 4px 11px rgba(42, 77, 62, .14);
}
.finance-section,
.finance-member-note {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.finance-section {
padding: clamp(17px, 2.1vw, 23px);
}
.finance-metric,
.finance-attention-row {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-card);
box-shadow: none;
}
.finance-overview-summary .finance-metric {
box-shadow: var(--k-ui-shadow);
}
.trust-page {
padding-top: 0;
}
.trust-hero {
grid-template-columns: 66px minmax(0, 1fr);
gap: 19px;
margin-bottom: 18px;
padding: 23px 25px;
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-hero);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.trust-hero::after {
width: 170px;
height: 170px;
right: -76px;
top: -105px;
background: rgba(224, 122, 95, .065);
}
.trust-hero-icon {
width: 64px;
height: 64px;
border-radius: 19px;
box-shadow: 0 9px 22px rgba(49, 88, 70, .13);
}
.trust-hero-icon svg {
width: 32px;
height: 32px;
}
.trust-hero h1 {
font-size: clamp(32px, 3.5vw, 43px);
line-height: 1.04;
}
.trust-hero p:last-child {
margin-top: 8px;
font-size: 14px;
line-height: 1.55;
}
.trust-layout {
gap: 18px;
}
.trust-form-card,
.trust-recipient-card,
.trust-transparency,
.trust-tech,
.trust-key-tools {
border-color: var(--k-ui-line);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.trust-form-card {
padding: 24px 25px;
border-radius: var(--k-ui-radius-panel);
}
.trust-recipient-card,
.trust-transparency,
.trust-key-tools {
padding: 19px;
border-radius: var(--k-ui-radius-panel);
}
.trust-tech {
border-radius: var(--k-ui-radius-card);
}
.trust-crisis {
margin-top: 18px;
padding: 19px 20px;
border-color: rgba(224, 122, 95, .16);
border-radius: var(--k-ui-radius-panel);
background: rgba(255, 248, 243, .72);
box-shadow: none;
}
.trust-crisis-card {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-card);
background: rgba(255, 255, 255, .68);
}
.view-help .collection-head {
display: none;
}
.help-layout {
gap: 15px;
}
.help-hero.card.pad,
.help-shell.card.pad {
border: 1px solid var(--k-ui-line);
border-radius: var(--k-ui-radius-hero);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.help-hero.card.pad {
padding: 22px 24px;
}
.help-hero h2 {
margin-bottom: 7px;
font-size: clamp(31px, 3.5vw, 40px);
}
.help-hero p {
line-height: 1.55;
}
.help-search {
margin-top: 14px;
}
.help-quick {
margin-top: 10px;
}
.help-shell.card.pad {
gap: 22px;
padding: 19px;
}
.help-nav4-item,
.help-step-card,
.help-device-card,
.help-two-col article,
.help-notification-rules article,
.help-result,
.help-safety-grid article {
border-radius: var(--k-ui-radius-card);
}
.help-nav4-item.active {
border-color: rgba(224, 122, 95, .2);
background: rgba(224, 122, 95, .075);
}
.help-pages {
min-width: 0;
padding-left: 22px;
border-left: 1px solid var(--k-ui-line);
}
.settings-modal-hero {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
.settings-card-section {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface);
box-shadow: var(--k-ui-shadow);
}
#modal-root .modal.task-form-modal-shell {
width: min(820px, calc(100vw - 36px));
max-width: 820px;
}
#modal-root .modal.meeting-form-modal-shell {
width: min(760px, calc(100vw - 36px));
max-width: 760px;
}
#modal-root .modal {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
background: var(--k-ui-surface-solid);
box-shadow: 0 24px 64px rgba(32, 48, 41, .24);
}
#modal-root .modal-head {
min-height: 62px;
padding: 15px 19px;
border-bottom-color: var(--k-ui-line);
background: rgba(246, 241, 231, .5);
}
#modal-root .modal-head h3 {
font-size: 19px;
letter-spacing: -.01em;
}
#modal-root .modal-body {
padding: 18px 20px;
}
@media (min-width: 761px) {
#modal-root .modal-body:has(> .settings-modal-layout) {
padding: 0;
}
}
#modal-root .modal-foot,
#modal-root .write-form > .modal-foot {
padding: 13px 20px !important;
border-top-color: var(--k-ui-line);
background: rgba(246, 241, 231, .42);
}
@media (min-width: 761px) {
#modal-root .task-form-modal-shell .write-form > .modal-foot,
#modal-root .meeting-form-modal-shell .write-form > .modal-foot {
margin-right: -20px !important;
margin-bottom: -18px !important;
margin-left: -20px !important;
}
}
#modal-root .field input,
#modal-root .field textarea,
#modal-root .field select {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-control);
background: rgba(255, 255, 255, .72);
}
.project-hero-card,
.project-section,
.meeting-card,
.meeting-agenda-card,
.task-modal-section,
.profile-card,
.finance-work-card,
.drive-card {
border-color: var(--k-ui-line);
border-radius: var(--k-ui-radius-panel);
box-shadow: var(--k-ui-shadow);
}
@media (max-width: 900px) {
#collection-view .collection-hero {
flex-wrap: wrap !important;
gap: 16px !important;
}
.view-meetings .collection-hero,
.view-people .collection-hero {
align-items: flex-start !important;
}
.obligation-book-launcher,
.decision-registry-launcher {
grid-template-columns: 46px minmax(0, 1fr);
}
.obligation-book-stats,
.obligation-book-actions,
.decision-registry-stats,
.decision-registry-actions {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
#collection-view,
#collection-view > .card,
#collection-view .collection-panel,
#collection-view .collection-panel > * {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#collection-view .collection-hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center !important;
gap: 10px !important;
min-height: 0;
margin-bottom: 13px !important;
padding: 1px 0 3px;
}
#collection-view .collection-hero .view-title {
font-size: clamp(28px, 8.5vw, 34px);
}
#collection-view .collection-hero .view-sub {
max-width: 38ch;
margin-top: 5px;
font-size: 12.5px;
line-height: 1.42;
}
#collection-view .collection-hero > .btn {
align-self: center;
margin: 0;
}
.view-meetings .collection-hero,
.view-people .collection-hero {
grid-template-columns: minmax(0, 1fr);
}
.meeting-head-actions,
.people-head-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
margin-left: 0;
}
.meeting-head-actions .btn,
.people-head-actions .btn,
.people-head-actions .people-capacity-link {
width: 100%;
min-width: 0;
}
.work-scope-bar {
gap: 9px;
padding: 10px;
border-radius: 15px;
}
.meet-filter-chips {
width: 100%;
margin-bottom: 12px;
padding: 3px;
border-radius: 13px;
}
.meet-chip {
min-height: 40px;
}
.project-view-controls {
align-items: stretch;
flex-direction: column;
}
.project-search,
.project-layout-switch {
width: 100%;
max-width: none;
box-sizing: border-box;
}
.project-layout-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.board {
gap: 10px;
}
.board .col,
.meeting-phase-column,
.meeting-closed-section {
border-radius: 15px;
}
.pcard,
.person-card,
.idea-card,
.meeting-work-card,
.project-list-row {
border-radius: 13px;
}
#tasks-region .task-list {
gap: 7px;
}
#tasks-region .task-list .tk,
#tasks-region .card.task-list .tk[data-open-task] {
min-height: 58px;
padding: 11px 12px;
border-radius: 13px;
}
.obligation-book-launcher,
.decision-registry-launcher {
gap: 8px 10px;
margin-bottom: 11px;
padding: 11px;
border-radius: 15px;
}
form.idea-plant[data-idea-plant-form] {
margin-bottom: 12px;
padding: 12px;
border-radius: 15px;
}
.idea-prompt {
padding: 9px 10px;
}
.idea-plant-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.idea-plant-row input[type="text"],
.idea-plant-btn {
width: 100%;
min-width: 0;
}
.section-hero {
gap: 14px;
padding: 19px 18px;
border-radius: 19px;
}
.section-hero-copy {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 7px 12px;
}
.section-hero-copy > div {
display: contents;
}
.finance-home-icon {
grid-row: 1 / 3;
}
.section-hero-copy .finance-section-kicker,
.section-hero-copy .section-hero-kicker,
.section-hero-copy h1 {
grid-column: 2;
}
.section-hero-copy p {
grid-column: 1 / -1;
}
.section-hero-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.section-hero-actions .btn {
width: 100%;
min-width: 0;
}
.finance-balance-block {
width: 100%;
box-sizing: border-box;
}
.finance-workspace-tabs {
top: 4px;
border-radius: 15px;
}
.finance-section,
.finance-member-note {
border-radius: 16px;
}
.trust-hero {
grid-template-columns: 52px minmax(0, 1fr);
gap: 13px;
padding: 18px 16px;
border-radius: 18px;
}
.trust-hero-icon {
width: 52px;
height: 52px;
border-radius: 16px;
}
.trust-hero-icon svg {
width: 27px;
height: 27px;
}
.trust-hero h1 {
font-size: 31px;
}
.trust-hero p:last-child {
grid-column: 1 / -1;
margin-top: 1px;
font-size: 13px;
}
.trust-form-card,
.trust-recipient-card,
.trust-transparency,
.trust-key-tools {
padding: 17px 15px;
border-radius: 16px;
}
.trust-crisis {
padding: 16px 14px;
border-radius: 16px;
}
.help-hero.card.pad {
padding: 19px 17px;
border-radius: 18px;
}
.help-hero h2 {
font-size: 31px;
}
.help-shell.card.pad {
padding: 13px;
border-radius: 18px;
}
.help-nav4 {
margin-inline: -2px;
}
.help-pages {
padding-left: 0;
border-left: 0;
}
#modal-root .modal.task-form-modal-shell,
#modal-root .modal.meeting-form-modal-shell {
width: 100%;
max-width: none;
}
#modal-root .task-form-modal-shell .write-form > .modal-foot,
#modal-root .meeting-form-modal-shell .write-form > .modal-foot {
width: calc(100% + 28px);
max-width: none;
margin-right: -14px !important;
margin-left: -14px !important;
box-sizing: border-box;
}
#modal-root .prio-pill input[type="radio"] {
width: 1px !important;
min-width: 0 !important;
height: 1px;
margin: 0 !important;
}
#modal-root .modal-head {
min-height: 0;
}
}
@media (max-width: 430px) {
.meeting-head-actions,
.people-head-actions {
grid-template-columns: minmax(0, 1fr);
}
.finance-overview-summary {
gap: 7px;
}
.finance-impact-host .overlay {
align-items: flex-end;
padding: 0;
}
.finance-impact-modal {
width: 100%;
max-height: 94dvh;
border-radius: 22px 22px 0 0;
}
.finance-impact-modal .modal-head,
.finance-impact-modal .modal-body,
.finance-impact-modal .modal-foot {
padding-inline: 15px;
}
.finance-impact-modal .modal-head h3 {
font-size: 20px;
}
.finance-impact-columns {
grid-template-columns: 1fr;
}
.finance-impact-targets {
max-height: 155px;
}
.finance-impact-modal .modal-foot {
display: grid;
grid-template-columns: 1fr;
}
.finance-impact-modal .modal-foot .btn {
width: 100%;
}
}
.compact-filter-panel.collection-filter-bar {
position: static;
top: auto;
z-index: auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: none;
min-width: 0;
gap: 9px;
margin: 0 0 14px;
padding: 9px;
box-sizing: border-box;
overflow: visible;
align-items: stretch;
justify-content: stretch;
border: 1px solid var(--k-ui-line, var(--line));
border-radius: 16px;
background: rgba(255, 253, 248, .66);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.collection-filter-primary {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.collection-search-control {
position: relative;
display: flex !important;
align-items: center;
flex: 1 1 300px;
min-width: 180px;
max-width: 480px;
height: 42px;
gap: 0 !important;
overflow: hidden;
border: 1px solid var(--k-ui-line, var(--line));
border-radius: 13px;
background: rgba(255, 255, 255, .78);
color: var(--muted);
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.collection-search-control:focus-within {
border-color: rgba(47, 91, 73, .38);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(113, 151, 129, .13);
}
.collection-search-control > svg {
position: absolute;
left: 13px;
width: 17px;
height: 17px;
pointer-events: none;
}
.collection-search-control input[type="search"] {
width: 100%;
min-width: 0;
height: 100%;
margin: 0;
padding: 0 13px 0 39px;
border: 0;
outline: 0;
appearance: none;
background: transparent;
color: var(--ink);
font: 600 13.5px/1.2 var(--body);
}
.collection-search-control input[type="search"]::placeholder {
color: color-mix(in srgb, var(--muted) 78%, transparent);
opacity: 1;
}
.collection-filter-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 0;
min-height: 42px;
gap: 7px;
padding: 8px 11px;
border: 1px solid var(--k-ui-line, var(--line));
border-radius: 13px;
background: transparent;
color: var(--green-deep);
font: 750 12.5px/1 var(--body);
cursor: pointer;
}
.collection-filter-toggle:hover,
.collection-filter-toggle:focus-visible {
border-color: rgba(47, 91, 73, .28);
background: rgba(113, 151, 129, .08);
}
.collection-filter-toggle:focus-visible {
outline: 3px solid rgba(113, 151, 129, .15);
outline-offset: 1px;
}
.collection-filter-toggle.is-open {
border-color: rgba(224, 122, 95, .28);
background: rgba(224, 122, 95, .075);
color: var(--coral-deep);
}
.collection-filter-toggle > svg {
width: 17px;
height: 17px;
}
.collection-filter-toggle > b {
min-width: 19px;
height: 19px;
display: inline-grid;
place-items: center;
padding: 0 5px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-size: 10px;
line-height: 1;
}
.collection-filter-summary {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 0 auto;
min-width: max-content;
gap: 9px;
margin-left: auto;
color: var(--muted);
font-size: 11.5px;
white-space: nowrap;
}
.collection-filter-summary b {
color: var(--ink);
font-size: 13px;
}
.collection-filter-clear {
padding: 3px 0;
border: 0;
border-bottom: 1px solid rgba(47, 91, 73, .24);
background: transparent;
color: var(--green-deep);
font: 750 11.5px/1.2 var(--body);
cursor: pointer;
}
.collection-filter-clear:hover,
.collection-filter-clear:focus-visible {
border-bottom-color: var(--coral);
color: var(--coral-deep);
outline: 0;
}
.compact-filter-panel .collection-quick-filter-row,
.compact-filter-panel .meet-filter-chips {
width: fit-content;
max-width: 100%;
min-width: 0;
display: flex;
gap: 5px;
margin: 0;
padding: 3px;
overflow-x: auto;
box-sizing: border-box;
border: 1px solid rgba(47, 85, 69, .09);
border-radius: 12px;
background: rgba(113, 151, 129, .055);
box-shadow: none;
scrollbar-width: none;
}
.compact-filter-panel .collection-quick-filter-row::-webkit-scrollbar {
display: none;
}
.compact-filter-panel .seg-btn,
.compact-filter-panel .meet-chip {
min-height: 32px;
padding: 6px 9px;
border-radius: 9px;
font-size: 11.5px;
white-space: nowrap;
}
.compact-filter-panel .seg-btn b,
.compact-filter-panel .meet-chip b {
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 9.5px;
}
.collection-filter-drawer {
display: grid;
gap: 10px;
padding: 11px;
border-top: 1px solid rgba(47, 85, 69, .09);
border-radius: 0 0 11px 11px;
background: rgba(113, 151, 129, .045);
}
.collection-filter-drawer[hidden] {
display: none !important;
}
/*! Společná hlavička sekce — obecný tvar pro všechny sekce */
.section-hero-top {
position: relative;
z-index: 1;
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
min-width: 0;
}
.section-hero-status {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 15px;
background: rgba(16, 42, 31, .2);
}
.section-hero-status > span {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: #274b3b;
background: #dcebdc;
font-weight: 900;
}
.section-hero-status.is-attention > span {
color: #714e18;
background: #f8dfa3;
}
.section-hero-status > div {
display: grid;
gap: 2px;
min-width: 0;
}
.section-hero-status b {
color: #fff;
font-size: 12.5px;
}
.section-hero-status small {
color: rgba(255, 255, 255, .68);
font-size: 10.5px;
line-height: 1.4;
}
.section-hero:not(.has-hero-aside) {
grid-template-columns: minmax(0, 1fr);
}
.section-hero:not(.has-hero-aside) .section-hero-status {
grid-column: 1 / -1;
justify-self: start;
max-width: 520px;
}
@media (max-width: 860px) {
.section-hero-top {
display: grid;
gap: 15px;
}
.section-hero:not(.has-hero-aside) .section-hero-status { max-width: none; }
}
@media (max-width: 760px) {
.section-hero:not(.has-hero-aside) .section-hero-copy p { grid-column: 2; }
}
.meeting-mobile-kind-filter {
display: none;
}
.collection-filter-drawer-head {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.collection-filter-drawer-head b {
color: var(--green-deep);
font-size: 12px;
}
.collection-filter-drawer-head span {
color: var(--muted);
font-size: 11px;
}
.collection-filter-drawer .usability-filter-grid {
gap: 8px;
}
.collection-filter-drawer .task-advanced-filter-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.collection-filter-drawer .meeting-advanced-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.collection-filter-drawer .people-advanced-filter-grid {
grid-template-columns: minmax(220px, 420px);
}
.collection-filter-drawer .usability-filter-grid label {
gap: 4px;
font-size: 11px;
}
.collection-filter-drawer .usability-filter-grid input,
.collection-filter-drawer .usability-filter-grid select {
height: 40px;
border-radius: 11px;
background-color: rgba(255, 255, 255, .82);
font-size: 12.5px;
}
@media (max-width: 760px) {
.compact-filter-panel.collection-filter-bar {
margin: 0 0 12px;
padding: 8px;
border-radius: 15px;
background: rgba(255, 253, 248, .74);
}
.collection-filter-primary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
.collection-search-control {
width: 100%;
max-width: none;
min-width: 0;
height: 44px;
}
.collection-filter-toggle {
min-height: 44px;
}
.collection-filter-summary {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
min-height: 20px;
justify-content: space-between;
margin: -1px 0 0;
padding: 0 3px;
}
.compact-filter-panel .collection-quick-filter-row,
.compact-filter-panel .meet-filter-chips {
width: 100%;
}
.compact-filter-panel .meet-chip {
min-height: 36px;
}
.meeting-filter-panel .meet-kind-row {
display: none !important;
}
.meeting-mobile-kind-filter {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.meeting-mobile-kind-filter > span {
color: var(--green-deep);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
.meeting-mobile-kind-filter select {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 8px 34px 8px 11px;
border: 1px solid var(--look-line, var(--line));
border-radius: 12px;
background-color: rgba(255, 253, 248, .96);
color: var(--ink);
font: 750 13px/1.2 var(--body);
}
.collection-filter-drawer {
padding: 10px 8px 8px;
}
.collection-filter-drawer-head {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.collection-filter-drawer .task-advanced-filter-grid,
.collection-filter-drawer .meeting-advanced-filter-grid,
.collection-filter-drawer .people-advanced-filter-grid {
grid-template-columns: minmax(0, 1fr);
}
#tasks-region .compact-filter-panel.task-filters {
gap: 8px;
margin: 0 0 12px;
padding: 8px;
}
#tasks-region .compact-filter-panel .task-mobile-filter {
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
padding: 0;
}
}
@media (max-width: 430px) {
.collection-filter-toggle {
gap: 6px;
padding-inline: 10px;
}
.collection-filter-toggle > span {
font-size: 12px;
}
}
#tasks-region .task-control-panel.compact-filter-panel {
gap: 8px;
padding: 10px;
border-color: rgba(56, 85, 74, .1);
border-radius: 17px;
background: rgba(255, 253, 248, .76);
box-shadow: 0 7px 22px rgba(43, 66, 58, .035);
}
#tasks-region .task-control-primary {
grid-template-columns: auto minmax(230px, 1fr) auto auto;
gap: 8px;
}
.task-scope-control {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.task-scope-control > span {
color: var(--muted);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.task-scope-control .scope-switch {
min-width: 190px;
padding: 3px;
border-color: rgba(56, 85, 74, .09);
background: rgba(113, 151, 129, .055);
}
.task-scope-control .scope-btn {
min-height: 34px;
padding: 6px 11px;
font-size: 11.5px;
}
.task-scope-control .scope-btn b {
font-size: 10px;
}
#tasks-region .task-control-panel .task-status-seg {
margin-left: 234px;
}
#tasks-region .task-control-panel .collection-filter-drawer {
padding: 10px;
border: 1px solid rgba(56, 85, 74, .085);
border-radius: 12px;
}
#tasks-region .obligation-book-launcher {
grid-template-columns: 40px minmax(0, 1fr) auto auto;
gap: 12px;
padding: 12px 14px;
border-radius: 17px;
}
#tasks-region .obligation-book-launcher-icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
#tasks-region .obligation-book-launcher-icon svg {
width: 20px;
height: 20px;
}
#tasks-region .obligation-book-launcher .eyebrow,
#tasks-region .obligation-book-launcher p {
display: none;
}
#tasks-region .obligation-book-launcher h2 {
margin: 0;
font-size: 17px;
}
#tasks-region .obligation-book-stats span {
min-width: 72px;
padding: 6px 9px;
}
.meeting-filter-panel.compact-filter-panel,
.people-local-filters.compact-filter-panel {
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.meeting-filter-panel .collection-search-control,
.people-local-filters .collection-search-control {
background: rgba(255, 253, 248, .9);
box-shadow: 0 5px 18px rgba(43, 66, 58, .025);
}
.meeting-filter-panel .meet-kind-row {
border-color: transparent;
background: rgba(113, 151, 129, .07);
}
.meeting-filter-panel .collection-filter-drawer,
.people-local-filters .collection-filter-drawer {
padding: 10px;
border: 1px solid rgba(56, 85, 74, .09);
border-radius: 13px;
background: rgba(255, 253, 248, .58);
}
.person-detail-v2 {
max-width: 1160px;
margin-inline: auto;
padding-bottom: 42px;
}
.person-detail-v2 .pd-backbar {
position: relative;
margin-bottom: 14px;
}
.person-detail-v2 .profile-actions {
gap: 8px;
}
.profile-admin-menu {
position: relative;
}
.profile-admin-menu > summary {
list-style: none;
cursor: pointer;
}
.profile-admin-menu > summary::-webkit-details-marker {
display: none;
}
.profile-admin-menu[open] > summary {
border-color: rgba(47, 91, 73, .28);
background: var(--sage-soft);
color: var(--green-deep);
}
.profile-admin-popover {
position: absolute;
top: calc(100% + 7px);
right: 0;
z-index: 40;
display: grid;
width: 210px;
gap: 6px;
padding: 8px;
border: 1px solid var(--k-ui-line, var(--line));
border-radius: 14px;
background: var(--k-ui-surface-solid, var(--paper));
box-shadow: 0 18px 42px rgba(32, 48, 41, .18);
}
.profile-admin-popover .btn {
width: 100%;
justify-content: flex-start;
}
.person-detail-v2 .person-hero {
position: relative;
min-height: 188px;
gap: 26px;
margin: 0 0 17px;
padding: 27px 30px;
overflow: hidden;
border-color: rgba(56, 85, 74, .1);
border-radius: 25px;
background: rgba(250, 250, 243, .96);
box-shadow: 0 12px 34px rgba(43, 66, 58, .055);
}
.person-detail-v2 .person-hero::after {
position: absolute;
top: -52px;
right: 58px;
width: 150px;
height: 150px;
border: 1px solid rgba(47, 85, 69, .07);
border-radius: 50%;
content: "";
pointer-events: none;
}
.person-hero-avatar {
position: relative;
z-index: 1;
flex: 0 0 auto;
}
.person-detail-v2 .person-hero-ava {
width: 116px;
height: 116px;
flex-basis: 116px;
border: 4px solid rgba(255, 253, 248, .94);
border-radius: 50%;
background: var(--sage-soft);
box-shadow: 0 12px 28px rgba(47, 85, 69, .16);
font-size: 34px;
}
.person-detail-v2 .person-hero-main {
position: relative;
z-index: 1;
}
.person-detail-v2 .profile-eyebrow {
margin-bottom: 7px;
font-size: 10.5px;
letter-spacing: .17em;
}
.person-name-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.person-detail-v2 .person-hero-main .pd-title {
display: block;
margin: 0;
font-size: clamp(31px, 3.2vw, 42px);
line-height: 1.02;
letter-spacing: -.035em;
}
.person-detail-v2 .person-focus {
margin: 9px 0 0;
color: color-mix(in srgb, var(--ink) 88%, var(--muted));
font-size: 16px;
line-height: 1.35;
}
.person-detail-v2 .person-tags {
margin-top: 10px;
}
.profile-glance {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px 0;
margin-top: 14px;
color: var(--muted);
font-size: 11.5px;
}
.profile-glance span {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.profile-glance span + span::before {
margin: 0 9px;
color: rgba(56, 85, 74, .28);
content: "·";
}
.profile-glance b {
color: var(--green-deep);
font-size: 13px;
}
.person-detail-v2 .profile-grid {
grid-template-columns: minmax(300px, .82fr) minmax(430px, 1.18fr);
gap: 16px;
}
.person-detail-v2 .profile-col {
display: grid;
align-content: start;
gap: 14px;
}
.person-detail-v2 .profile-card {
margin: 0 !important;
padding: 17px 18px;
border-radius: 18px;
background: rgba(255, 253, 248, .82);
box-shadow: 0 7px 22px rgba(43, 66, 58, .035);
}
.person-detail-v2 .profile-about-card {
border-color: rgba(224, 122, 95, .13);
background: rgba(255, 249, 244, .94);
}
.person-detail-v2 .profile-card .panel-title {
margin-bottom: 10px;
padding-bottom: 9px;
color: var(--green-deep);
font-size: 15px;
}
.profile-panel-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.profile-panel-title > b {
display: inline-grid;
min-width: 24px;
height: 24px;
place-items: center;
padding: 0 6px;
border-radius: 999px;
background: rgba(113, 151, 129, .11);
color: var(--green-deep);
font-size: 10.5px;
}
.person-detail-v2 .profile-facts > div,
.person-detail-v2 .person-contact > div {
padding: 9px 0;
border-color: rgba(56, 85, 74, .08);
}
.person-detail-v2 .person-contact a {
font-weight: 650;
text-decoration-color: rgba(47, 91, 73, .24);
text-underline-offset: 3px;
}
.person-detail-v2 .profile-interests > p {
margin: -1px 0 11px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.profile-link-add {
margin-top: 12px;
}
.profile-link-add > summary {
width: fit-content;
list-style: none;
cursor: pointer;
}
.profile-link-add > summary::-webkit-details-marker {
display: none;
}
.profile-link-add[open] > summary {
color: var(--coral-deep);
background: rgba(224, 122, 95, .08);
}
.profile-link-add .write-form {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(56, 85, 74, .08);
}
.profile-link-add .write-form > .small-btn {
margin-top: 10px;
}
@media (max-width: 980px) {
#tasks-region .task-control-primary {
grid-template-columns: auto minmax(200px, 1fr) auto;
}
#tasks-region .task-control-primary .collection-filter-summary {
grid-column: 1 / -1;
justify-content: flex-end;
}
#tasks-region .task-control-panel .task-status-seg {
margin-left: 0;
}
.person-detail-v2 .profile-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
#tasks-region .task-control-panel.compact-filter-panel {
gap: 8px;
padding: 8px;
}
#tasks-region .task-scope-control {
grid-column: 1 / -1;
}
#tasks-region .task-scope-control .scope-switch {
width: 100%;
min-width: 0;
}
#tasks-region .task-control-primary .collection-filter-summary {
justify-content: space-between;
}
.meeting-filter-panel.compact-filter-panel,
.people-local-filters.compact-filter-panel {
padding: 0;
background: transparent;
}
.meeting-filter-panel .meeting-mobile-kind-filter {
padding: 7px 8px;
border: 1px solid rgba(56, 85, 74, .085);
border-radius: 13px;
background: rgba(255, 253, 248, .58);
}
#tasks-region .obligation-book-launcher {
grid-template-columns: 38px minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 3px 9px;
padding: 9px 10px;
}
#tasks-region .obligation-book-launcher-icon {
grid-column: 1;
grid-row: 1 / 3;
width: 38px;
height: 38px;
border-radius: 12px;
}
#tasks-region .obligation-book-launcher-icon svg {
width: 20px;
height: 20px;
}
#tasks-region .obligation-book-launcher > div:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
#tasks-region .obligation-book-launcher h2 {
margin: 0;
font-size: 15px;
}
#tasks-region .obligation-book-stats {
grid-column: 2;
grid-row: 2;
display: flex;
gap: 10px;
}
#tasks-region .obligation-book-stats span {
min-width: 0;
padding: 0;
border: 0;
background: transparent;
font-size: 9.5px;
}
#tasks-region .obligation-book-stats b {
display: inline;
margin-right: 2px;
font-size: 12px;
}
#tasks-region .obligation-book-actions {
grid-column: 3;
grid-row: 1 / 3;
display: block;
}
#tasks-region .obligation-book-actions [data-open-obligation-book] {
min-height: 38px;
padding-inline: 10px;
font-size: 0;
}
#tasks-region .obligation-book-actions [data-open-obligation-book]::after {
content: "Otevřít";
font-size: 11.5px;
}
.person-detail-v2 .pd-backbar {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 9px;
}
.person-detail-v2 .pd-backbar > .pd-back {
justify-self: start;
}
.person-detail-v2 .profile-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
width: 100%;
}
.person-detail-v2 .profile-actions > .btn,
.person-detail-v2 .profile-actions > .profile-admin-menu,
.person-detail-v2 .profile-admin-menu > summary {
width: 100%;
}
.profile-admin-popover {
right: 0;
left: auto;
width: min(230px, calc(100vw - 28px));
}
.person-detail-v2 .person-hero {
display: grid;
min-height: 0;
justify-items: center;
gap: 15px;
padding: 22px 17px;
text-align: center;
}
.person-detail-v2 .person-hero-ava {
width: 92px;
height: 92px;
flex-basis: 92px;
font-size: 27px;
}
.person-detail-v2 .person-name-line,
.person-detail-v2 .person-tags,
.person-detail-v2 .profile-glance {
justify-content: center;
}
.person-detail-v2 .person-hero-main .pd-title {
font-size: clamp(28px, 9vw, 35px);
}
.person-detail-v2 .profile-glance {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
gap: 0;
}
.person-detail-v2 .profile-glance span {
display: grid;
gap: 1px;
padding: 0 7px;
}
.person-detail-v2 .profile-glance span + span {
border-left: 1px solid rgba(56, 85, 74, .1);
}
.person-detail-v2 .profile-glance span + span::before {
display: none;
}
.person-detail-v2 .profile-card {
padding: 15px;
border-radius: 16px;
}
.profile-link-add .form-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* === Chaty — plynulé doručení a lehčí velký pohled (20260730-chatflow1) === */
.chat-compose-status {
display: none;
min-height: 18px;
align-items: center;
gap: 7px;
margin: 0 7px 7px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.35;
}
.chat-compose-status:not(:empty) {
display: flex;
}
.chat-compose-status.is-pending::before,
.chat-thread-spinner,
.chat-msg-pending i,
.fchat-msg-pending i {
width: 12px;
height: 12px;
flex: 0 0 12px;
box-sizing: border-box;
border: 2px solid rgba(47, 85, 69, .18);
border-top-color: var(--coral);
border-radius: 50%;
animation: chatDeliverySpin .8s linear infinite;
}
.chat-compose-status.is-success {
color: var(--green-deep);
font-weight: 750;
}
.chat-compose-status.is-success::before {
content: "✓";
font-weight: 900;
}
.chat-compose-status.is-error {
color: var(--coral-deep);
font-weight: 700;
}
.fcw > .chat-compose-status,
#floating-chat-panel > .chat-compose-status {
margin: 2px 12px 6px;
font-size: 10.5px;
}
.chat-comment-form.is-sending,
.fcw-foot.is-sending {
border-color: rgba(226, 119, 91, .28);
}
.chat-comment-form.is-sending button[type="submit"],
.fcw-foot.is-sending button[type="submit"] {
opacity: .68;
cursor: wait;
}
.chat-msg-row.pending-send .chat-msg-bubble,
.fchat-msg.pending-send .fchat-bubble {
opacity: .82;
border-style: dashed;
box-shadow: none;
}
.chat-msg-pending,
.fchat-msg-pending {
display: inline-flex !important;
align-items: center;
justify-content: flex-end;
gap: 4px;
opacity: .78;
}
.chat-msg-pending i,
.fchat-msg-pending i {
width: 9px;
height: 9px;
flex-basis: 9px;
border-width: 1.5px;
border-color: currentColor;
border-top-color: transparent;
}
.chat-thread-state {
width: min(100%, 390px);
min-height: 130px;
margin: auto;
padding: 18px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--muted);
text-align: left;
}
.chat-thread-state > div {
min-width: 0;
display: grid;
gap: 3px;
}
.chat-thread-state b {
color: var(--ink);
font-size: 13px;
}
.chat-thread-state span {
font-size: 11.5px;
line-height: 1.4;
}
.chat-thread-state.is-error {
flex-wrap: wrap;
border: 1px solid rgba(226, 119, 91, .2);
border-radius: 15px;
background: rgba(255, 248, 244, .86);
}
.chat-thread-state.is-error button,
.messenger-pane-error button {
min-height: 36px;
padding: 7px 12px;
border: 1px solid rgba(226, 119, 91, .28);
border-radius: 999px;
background: #fff;
color: var(--coral-deep);
font: 800 11.5px var(--font-sans);
cursor: pointer;
}
.chat-thread-state.compact {
min-height: 100%;
padding: 14px 10px;
}
.chat-thread-state.compact > div span {
display: none;
}
.messenger-pane-loading {
width: 100%;
}
.messenger-pane-error {
flex-direction: column;
gap: 12px;
}
@keyframes chatDeliverySpin {
to { transform: rotate(360deg); }
}
@media (min-width: 861px) {
.messenger-page {
grid-template-columns: minmax(300px, 352px) minmax(0, 1fr);
gap: 16px;
width: 100%;
height: min(780px, calc(100dvh - 132px));
max-height: none;
min-height: 610px;
margin: 0;
padding: 0;
overflow: visible;
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
}
.messenger-sidebar-panel,
.messenger-empty-pane {
min-height: 0;
overflow: hidden;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 20px;
background: rgba(255, 253, 248, .92);
box-shadow: 0 10px 30px rgba(36, 67, 55, .065);
}
.messenger-sidebar-panel {
border-right: 1px solid rgba(47, 85, 69, .12);
}
.messenger-empty-pane {
background: rgba(255, 253, 248, .72);
}
.messenger-empty-pane.active-chat {
height: auto !important;
border: 1px solid rgba(47, 85, 69, .12);
border-radius: 20px;
background: rgba(255, 253, 248, .92);
box-shadow: 0 10px 30px rgba(36, 67, 55, .065);
}
.messenger-empty-pane.active-chat .chat-messenger-detail {
border-radius: 20px !important;
}
.messenger-page-head {
padding: 20px 18px 13px;
}
.messenger-page-head h1 {
font-size: 32px;
}
.messenger-page-head p {
max-width: 190px;
margin-top: 5px;
line-height: 1.4;
}
.messenger-head-actions {
gap: 5px;
}
.messenger-head-actions button {
width: 36px;
padding: 0;
}
.messenger-head-actions button span {
display: none;
}
.messenger-compose {
margin: 0 12px 8px;
padding: 9px;
border-color: rgba(47, 85, 69, .1);
border-radius: 14px;
background: rgba(247, 244, 235, .72);
}
.messenger-list {
padding: 3px 8px 12px;
}
.messenger-row {
min-height: 61px;
padding: 9px;
border-radius: 13px;
}
.messenger-row:hover {
transform: none;
}
.chat-messenger-detail .chat-detail-head {
padding-inline: 16px;
}
}
@media (max-width: 860px) {
.messenger-page {
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
}
.messenger-sidebar-panel {
border: 1px solid rgba(47, 85, 69, .11);
border-radius: 18px;
background: rgba(255, 253, 248, .9);
box-shadow: 0 7px 22px rgba(36, 67, 55, .055);
}
.messenger-page > #messenger-detail-pane.active-chat {
overflow: hidden !important;
border: 0;
border-radius: 18px;
background: rgba(255, 253, 248, .94);
box-shadow: 0 7px 22px rgba(36, 67, 55, .055);
}
.chat-compose-status {
margin-inline: 4px;
}
.chat-thread-state {
min-height: 110px;
padding: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.chat-compose-status.is-pending::before,
.chat-thread-spinner,
.chat-msg-pending i,
.fchat-msg-pending i {
animation-duration: 1.8s;
}
}
.drive-conn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.45;
border: 1px solid transparent;
}
.drive-conn.is-ok {
color: var(--go-deep, #2f6b4f);
background: rgba(72, 141, 106, .12);
border-color: rgba(72, 141, 106, .28);
}
.drive-conn.is-warn {
color: #8a6220;
background: rgba(203, 150, 47, .14);
border-color: rgba(203, 150, 47, .3);
}
.drive-conn.is-bad {
color: var(--coral-deep, #a2432f);
background: rgba(184, 69, 48, .1);
border-color: rgba(184, 69, 48, .26);
}
.drive-conn.is-pending {
color: var(--ink-soft, #6c7a70);
background: rgba(108, 122, 112, .1);
border-color: rgba(108, 122, 112, .22);
}
.drive-group + .drive-group {
padding-top: 14px;
border-top: 1px solid var(--line);
}
.drive-group-head {
align-items: baseline;
justify-content: space-between;
}
.drive-group-head b {
font-size: 14px;
letter-spacing: .01em;
}
.drive-group-head span {
font-size: 12px;
color: var(--ink-soft, #6c7a70);
white-space: nowrap;
}
.drive-group-note {
margin: 2px 0 8px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft, #6c7a70);
}
.drive-group-more,
.drive-truncated-note {
margin: 8px 0 0;
font-size: 12px;
color: var(--ink-soft, #6c7a70);
}
.project-drive-connect {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}
.project-drive-state .drive-conn { margin-top: 0; }
@media (max-width: 640px) {
.project-drive-connect { align-items: flex-start; }
.project-drive-connect > .small-btn { width: 100%; }
.drive-group-head { flex-wrap: wrap; }
}
.settings-text-row {
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
}
.settings-text-input {
flex: 1 1 260px;
min-width: 0;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper, #fffdf9);
font-size: 14px;
font-family: inherit;
color: inherit;
}
.settings-text-input:focus-visible {
outline: 2px solid rgba(72, 141, 106, .45);
outline-offset: 1px;
}
.settings-drive-state {
margin: 10px 0 0;
font-size: 13px;
line-height: 1.55;
min-height: 1px;
}
.settings-drive-state.is-ok { color: var(--go-deep, #2f6b4f); font-weight: 700; }
.settings-drive-state.is-bad { color: var(--coral-deep, #a2432f); font-weight: 700; }
.settings-drive-state.is-pending { color: var(--ink-soft, #6c7a70); }
@media (max-width: 640px) {
.settings-text-row .settings-text-input { flex: 1 1 100%; }
}
.obligation-evidence-drive {
margin-top: 14px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--cream-deep, #faf7ef);
}
.obligation-evidence-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.obligation-evidence-head b { font-size: 14px; }
.obligation-evidence-head small {
display: block;
margin-top: 2px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft, #6c7a70);
}
.obligation-evidence-list {
display: grid;
gap: 8px;
margin-top: 10px;
}
.obligation-evidence-list:empty { margin-top: 0; }
.obligation-evidence-choice {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper, #fffdf9);
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.obligation-evidence-choice:hover { border-color: rgba(72, 141, 106, .5); }
.obligation-evidence-choice.is-chosen {
border-color: rgba(72, 141, 106, .75);
background: rgba(72, 141, 106, .1);
}
.obligation-evidence-choice b {
display: block;
font-size: 13.5px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.obligation-evidence-choice small {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--ink-soft, #6c7a70);
overflow-wrap: anywhere;
}
.obligation-evidence-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
opacity: .55;
}
.obligation-evidence-icon svg { width: 100%; height: 100%; }
@media (max-width: 640px) {
.obligation-evidence-head > button { width: 100%; }
}
.drive-vault-bar {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 2px 0 12px;
flex-wrap: wrap;
}
.drive-vault-total { font-size: 13px; color: var(--ink-soft, #6c7a70); }
.drive-vault-total b { color: var(--ink, #22302a); }
.drive-vault-fresh {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-soft, #94918a);
}
.drive-vault-note {
margin: 0 0 12px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft, #6c7a70);
}
.drive-group + .drive-group { margin-top: 18px; }
.drive-group-head {
display: flex;
align-items: flex-start;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 10px;
}
.drive-group-icon,
.drive-group-count { margin-top: 1px; }
.drive-group-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: rgba(120, 130, 118, .12);
color: var(--ink-soft, #55635a);
}
.drive-group-icon svg { width: 17px; height: 17px; }
.drive-group-titles { flex: 1 1 auto; min-width: 0; }
.drive-group-titles b { font-size: 14px; letter-spacing: .01em; }
.drive-group-titles small {
display: block;
margin-top: 1px;
font-size: 12px;
line-height: 1.4;
color: var(--ink-soft, #6c7a70);
}
.drive-group-count {
flex: 0 0 auto;
min-width: 24px;
padding: 2px 9px;
border-radius: 999px;
background: rgba(120, 130, 118, .12);
font-size: 12px;
font-weight: 800;
text-align: center;
color: var(--ink-soft, #55635a);
}
.drive-group.is-managed .drive-group-icon {
background: rgba(72, 141, 106, .14);
color: var(--go-deep, #2f6b4f);
}
.drive-file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
gap: 8px;
}
.drive-file-tile {
display: flex;
align-items: stretch;
gap: 0;
border: 1px solid var(--line, #e7e0d1);
border-radius: 13px;
background: var(--paper, #fffdf9);
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.drive-file-tile:hover {
border-color: rgba(72, 141, 106, .45);
box-shadow: 0 6px 16px rgba(49, 88, 70, .09);
transform: translateY(-1px);
}
.drive-tile-open {
display: flex;
align-items: center;
gap: 11px;
flex: 1 1 auto;
min-width: 0;
padding: 11px 12px;
text-decoration: none;
color: inherit;
}
.drive-tile-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(120, 130, 118, .1);
color: var(--ink-soft, #55635a);
}
.drive-tile-badge svg { width: 20px; height: 20px; }
.drive-file-tile.type-pdf .drive-tile-badge { background: rgba(184, 69, 48, .12); color: #a2432f; }
.drive-file-tile.type-doc .drive-tile-badge { background: rgba(58, 108, 150, .13); color: #3a6c96; }
.drive-file-tile.type-sheet .drive-tile-badge { background: rgba(72, 141, 106, .14); color: #2f6b4f; }
.drive-file-tile.type-slide .drive-tile-badge { background: rgba(203, 150, 47, .16); color: #8a6220; }
.drive-file-tile.type-image .drive-tile-badge { background: rgba(63, 138, 134, .14); color: #327f7a; }
.drive-file-tile.type-folder .drive-tile-badge { background: rgba(140, 120, 90, .14); color: #7a6438; }
.drive-tile-body { min-width: 0; flex: 1 1 auto; }
.drive-tile-name {
display: block;
font-size: 13.5px;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drive-tile-meta {
display: block;
margin-top: 3px;
font-size: 11.5px;
line-height: 1.4;
color: var(--ink-soft, #6c7a70);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drive-tile-path {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 3px;
max-width: 100%;
font-size: 11px;
color: var(--ink-soft, #94918a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drive-tile-path svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .7; }
.drive-tile-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
padding-right: 8px;
}
.drive-tile-pin,
.drive-tile-pinned {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid transparent;
background: transparent;
color: var(--ink-soft, #6c7a70);
cursor: pointer;
}
.drive-tile-pin svg,
.drive-tile-pinned svg { width: 16px; height: 16px; }
.drive-tile-pin:hover {
background: rgba(72, 141, 106, .12);
border-color: rgba(72, 141, 106, .3);
color: var(--go-deep, #2f6b4f);
}
.drive-tile-pinned { color: var(--go-deep, #2f6b4f); }
.drive-tile-pinned:hover,
.drive-tile-pinned:focus-visible {
background: rgba(217, 109, 81, .12);
border-color: rgba(217, 109, 81, .32);
color: var(--coral-deep, #a94f3d);
}
.drive-file-tile.is-pinned { border-color: rgba(72, 141, 106, .35); }
.project-doc-open {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
color: inherit;
text-decoration: none;
}
.project-doc-unpin {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--ink-soft, #6c7a70);
cursor: pointer;
}
.project-doc-unpin svg { width: 16px; height: 16px; }
.project-doc-unpin:hover,
.project-doc-unpin:focus-visible {
background: rgba(217, 109, 81, .12);
color: var(--coral-deep, #a94f3d);
}
@media (max-width: 640px) {
.drive-tile-pin,
.drive-tile-pinned,
.project-doc-unpin { width: 44px; height: 44px; }
}
.drive-group-more {
margin: 8px 0 0;
font-size: 12px;
color: var(--ink-soft, #6c7a70);
}
.drive-vault-empty,
.drive-region-error {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border: 1px dashed var(--line, #e7e0d1);
border-radius: 13px;
background: var(--cream-deep, #faf7ef);
}
.drive-region-error { flex-wrap: wrap; border-style: solid; border-color: rgba(184, 69, 48, .26); }
.drive-vault-empty-icon {
flex: 0 0 auto;
display: inline-flex;
width: 34px;
height: 34px;
color: var(--ink-soft, #94918a);
}
.drive-vault-empty-icon svg { width: 100%; height: 100%; }
.drive-vault-empty b, .drive-region-error b { display: block; font-size: 14px; }
.drive-vault-empty span, .drive-region-error span {
display: block;
margin-top: 2px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft, #6c7a70);
}
.drive-region-error .small-btn { margin-top: 4px; }
.drive-loading {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 4px;
font-size: 13px;
color: var(--ink-soft, #6c7a70);
}
.drive-spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(120, 130, 118, .28);
border-top-color: var(--go-deep, #2f6b4f);
animation: drive-spin .7s linear infinite;
flex: 0 0 auto;
}
@keyframes drive-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.drive-spinner { animation-duration: 2s; }
}
@media (max-width: 640px) {
.drive-file-grid { grid-template-columns: 1fr; }
}
/* Klidnější Úkoly a detail projektu (2026-07-31, projectcalm1)    */
#tasks-region .task-control-panel.compact-filter-panel {
display: grid;
gap: 10px;
margin-bottom: 16px;
padding: 12px 14px;
border: 1px solid rgba(56, 85, 74, .11);
border-radius: 20px;
background:
radial-gradient(340px 180px at 100% 0, rgba(169, 184, 164, .1), transparent 68%),
rgba(255, 253, 248, .9);
box-shadow: 0 10px 28px rgba(43, 66, 58, .05);
}
#tasks-region .task-control-primary {
display: grid;
grid-template-columns: minmax(190px, .55fr) minmax(260px, 1.45fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
}
#tasks-region .task-scope-control {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
}
#tasks-region .task-scope-control > span,
#tasks-region .task-control-label {
color: var(--muted);
font-size: 9.5px;
font-weight: 850;
letter-spacing: .09em;
text-transform: uppercase;
}
#tasks-region .task-scope-control .scope-switch {
width: 100%;
min-width: 0;
padding: 3px;
border-color: rgba(56, 85, 74, .1);
border-radius: 12px;
background: rgba(113, 151, 129, .065);
}
#tasks-region .task-scope-control .scope-btn {
min-width: 0;
min-height: 36px;
padding: 6px 10px;
}
#tasks-region .task-control-primary .collection-search-control {
width: 100%;
max-width: none;
min-width: 0;
height: 44px;
border-color: rgba(56, 85, 74, .13);
border-radius: 13px;
background: rgba(255, 255, 255, .84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
#tasks-region .task-control-primary .collection-search-control:focus-within {
border-color: rgba(224, 122, 95, .48);
background: #fff;
box-shadow: 0 0 0 3px rgba(224, 122, 95, .12);
}
#tasks-region .task-control-primary .collection-filter-toggle {
min-height: 44px;
padding-inline: 13px;
border-radius: 13px;
background: rgba(255, 253, 248, .7);
}
#tasks-region .task-control-status-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-width: 0;
padding-top: 1px;
}
#tasks-region .task-control-panel .task-status-seg {
width: fit-content;
max-width: 100%;
margin: 0;
border-color: rgba(56, 85, 74, .09);
background: rgba(113, 151, 129, .055);
}
#tasks-region .task-control-panel .task-status-seg .seg-btn {
min-height: 34px;
padding: 6px 10px;
}
#tasks-region .task-control-status-row .collection-filter-summary {
min-width: max-content;
margin: 0;
padding-right: 2px;
}
#tasks-region .task-control-panel .collection-filter-drawer {
margin-top: 1px;
padding: 12px;
border: 1px solid rgba(56, 85, 74, .09);
border-radius: 14px;
background: rgba(239, 244, 236, .5);
}
.project-detail {
width: 100%;
max-width: 1160px;
margin-inline: auto;
padding-bottom: 44px;
}
.project-detail .project-backbar {
margin: 0 0 12px;
}
.project-detail .pd-back {
min-height: 36px;
padding: 6px 10px;
border-color: transparent;
border-radius: 11px;
background: transparent;
color: var(--green-deep);
box-shadow: none;
}
.project-detail .pd-back:hover {
border-color: rgba(56, 85, 74, .1);
background: rgba(255, 253, 248, .7);
}
.project-detail .project-hero-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 20px;
overflow: hidden;
padding: 29px 30px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 28px;
background:
radial-gradient(520px 300px at 100% -16%, rgba(224, 122, 95, .105), transparent 66%),
radial-gradient(440px 330px at -8% 115%, rgba(169, 184, 164, .18), transparent 68%),
rgba(255, 253, 248, .96);
box-shadow: 0 18px 44px rgba(43, 66, 58, .075);
}
.project-detail .project-hero-card::after {
top: -112px;
right: -85px;
width: 250px;
height: 250px;
border-color: rgba(56, 85, 74, .06);
box-shadow:
0 0 0 34px rgba(224, 122, 95, .028),
0 0 0 72px rgba(169, 184, 164, .035);
}
.project-detail .project-hero-main {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
align-items: start;
gap: 19px;
min-width: 0;
}
.project-detail .project-hero-avatar {
width: 82px !important;
height: 82px !important;
flex-basis: 82px !important;
border: 4px solid rgba(255, 253, 248, .9);
border-radius: 24px !important;
background: linear-gradient(145deg, var(--coral), var(--coral-deep)) !important;
box-shadow: 0 13px 28px rgba(193, 91, 67, .2);
}
.project-hero-kicker {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin: 1px 0 7px;
color: var(--muted);
font-size: 9.5px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.project-hero-kicker b {
color: var(--green-deep);
font-size: 10px;
letter-spacing: .055em;
}
.project-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--project-status, var(--sage-deep));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-status, var(--sage-deep)) 14%, transparent);
}
.project-detail .project-hero-title {
max-width: 19ch;
margin: 0;
color: var(--green-deep);
font-size: clamp(32px, 4vw, 46px);
line-height: 1.02;
letter-spacing: -.035em;
text-wrap: balance;
}
.project-detail .project-hero-desc {
max-width: 68ch;
margin: 10px 0 15px;
color: color-mix(in srgb, var(--ink) 72%, var(--muted));
font-size: 14px;
line-height: 1.55;
}
.project-detail .project-hero-meta {
gap: 7px;
}
.project-owner-identity {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 1px 7px 1px 0;
color: var(--ink);
}
.project-owner-identity .project-owner-avatar {
width: 32px !important;
height: 32px !important;
flex-basis: 32px !important;
border: 1px solid rgba(56, 85, 74, .1);
background: var(--sage-soft);
color: var(--green-deep);
font-size: 10px !important;
}
.project-owner-identity > span:last-child {
display: grid;
gap: 2px;
line-height: 1.1;
}
.project-owner-identity small {
color: var(--muted);
font-size: 8.5px;
font-weight: 750;
letter-spacing: .035em;
text-transform: uppercase;
}
.project-owner-identity b {
max-width: 240px;
overflow: hidden;
font-size: 12.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-detail .project-hero-pills {
margin: 9px 0 0;
}
.project-detail .project-hero-pills .pill {
padding: 4px 8px;
background: rgba(113, 151, 129, .085);
color: var(--green-deep);
font-size: 9.5px;
}
.project-detail .project-hero-actions {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
margin-left: 101px;
padding-top: 16px;
border-top: 1px solid rgba(56, 85, 74, .085);
}
.project-detail .project-hero-actions .btn {
width: auto;
min-height: 40px;
margin: 0;
justify-content: center;
padding: 8px 14px;
border-radius: 11px;
font-size: 12.5px;
}
.project-detail .project-hero-actions .project-chat-shortcut {
min-width: 172px;
justify-content: center;
border-color: var(--coral) !important;
background: var(--coral) !important;
color: #fff !important;
box-shadow: 0 8px 18px rgba(193, 91, 67, .16);
}
.project-detail .project-hero-actions .project-chat-shortcut:hover {
border-color: var(--coral-deep) !important;
background: var(--coral-deep) !important;
color: #fff !important;
}
.project-detail .project-finance-shortcut .badge {
margin-left: auto;
color: var(--green-deep);
background: rgba(113, 151, 129, .1);
}
.project-detail .project-pulse {
display: grid;
grid-template-columns: minmax(240px, .92fr) minmax(0, 2.08fr);
gap: 8px;
margin: 16px 0 14px;
padding: 8px;
overflow: hidden;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 22px;
background: rgba(255, 253, 248, .83);
box-shadow: 0 10px 28px rgba(43, 66, 58, .045);
}
.project-detail .project-next-step,
.project-detail .project-pulse-links {
border: 0;
border-radius: 16px;
box-shadow: none;
}
.project-detail .project-next-step {
position: relative;
justify-content: center;
min-width: 0;
padding: 15px 17px 15px 20px;
background:
linear-gradient(135deg, rgba(224, 122, 95, .11), rgba(169, 184, 164, .13)),
rgba(255, 255, 255, .56);
}
.project-detail .project-next-step::before {
position: absolute;
top: 15px;
bottom: 15px;
left: 9px;
width: 3px;
border-radius: 999px;
background: var(--coral);
content: "";
}
.project-detail .project-next-step b {
margin-top: 4px;
color: var(--green-deep);
font-size: 18px;
line-height: 1.28;
letter-spacing: -.015em;
}
.project-detail .project-next-step > small {
margin-top: 5px;
color: var(--muted);
font-size: 10.5px;
line-height: 1.35;
}
.project-detail .project-pulse-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
overflow: hidden;
background: rgba(255, 255, 255, .52);
}
.project-detail .project-pulse-links > button {
position: relative;
min-height: 94px;
padding: 14px 23px 13px 14px;
border: 0;
border-right: 1px solid rgba(56, 85, 74, .075);
background: transparent;
}
.project-detail .project-pulse-links > button:last-child {
border-right: 0;
}
.project-detail .project-pulse-links > button:hover {
background: rgba(113, 151, 129, .075);
}
.project-detail .project-pulse-links > button span {
font-size: 8.5px;
letter-spacing: .09em;
}
.project-detail .project-pulse-links > button b {
margin-top: 7px;
overflow: visible;
color: var(--green-deep);
font-size: 12px;
line-height: 1.32;
text-overflow: clip;
white-space: normal;
}
.project-detail .project-pulse-links > button small {
margin-top: 3px;
font-size: 9.5px;
}
.project-detail .project-pulse-links > button i {
position: absolute;
top: 50%;
right: 9px;
color: var(--coral-deep);
font-size: 19px;
font-style: normal;
opacity: .48;
transform: translateY(-50%);
}
.project-detail .project-tabs.project-tabs-refined {
display: flex;
width: 100%;
box-sizing: border-box;
gap: 0;
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid rgba(56, 85, 74, .09);
border-bottom: 1px solid rgba(56, 85, 74, .12);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.project-detail .project-tabs-refined .project-tab {
flex: 1 1 0;
min-width: 0;
min-height: 51px;
justify-content: center;
padding: 10px 12px;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
color: var(--muted);
font-size: 12.5px;
}
.project-detail .project-tabs-refined .project-tab:hover {
background: rgba(113, 151, 129, .055);
color: var(--green-deep);
}
.project-detail .project-tabs-refined .project-tab.active {
color: var(--green-deep);
border-bottom-color: var(--coral);
background: transparent;
box-shadow: none;
}
.project-detail .project-section {
margin-top: 22px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.project-detail .project-section-head {
margin: 0 3px 14px;
padding: 0;
border: 0;
}
.project-detail .project-section-head h2 {
color: var(--green-deep);
font-size: 23px;
letter-spacing: -.02em;
}
.project-detail .project-section-head p {
margin-top: 5px;
font-size: 12.5px;
}
.project-detail .project-main-grid {
grid-template-columns: minmax(0, 1.34fr) minmax(270px, .66fr);
gap: 17px;
}
.project-detail .project-primary,
.project-detail .project-secondary,
.project-detail .project-resource-side {
gap: 17px;
}
.project-detail .card,
.project-detail .card.pad,
.project-detail .project-section .card,
.project-detail .project-section .card.pad {
border-color: rgba(56, 85, 74, .1);
border-radius: 20px;
background: rgba(255, 253, 248, .88);
box-shadow: 0 10px 28px rgba(43, 66, 58, .045);
}
.project-detail .project-next-work {
padding: 19px;
background:
radial-gradient(420px 240px at 103% -14%, rgba(169, 184, 164, .11), transparent 68%),
rgba(255, 253, 248, .91);
}
.project-detail .project-info-card {
padding: 17px 18px;
}
.project-detail .project-info-card > .panel-title,
.project-detail .project-info-card > .panel-note,
.project-detail .project-budget-head .panel-title,
.project-detail .project-budget-head .panel-note,
.project-detail .project-editions-head .panel-title,
.project-detail .project-editions-head .panel-note {
margin: 0;
padding: 0;
border: 0;
}
.project-detail .project-info-card > .panel-title,
.project-detail .project-budget-head .panel-title,
.project-detail .project-editions-head .panel-title {
color: var(--green-deep);
font-size: 15px;
}
.project-detail .project-info-card > .panel-note,
.project-detail .project-budget-head .panel-note,
.project-detail .project-editions-head .panel-note {
margin-top: 4px;
font-size: 10.5px;
line-height: 1.4;
}
.project-main-date {
display: grid;
gap: 3px;
margin: 13px 0 4px;
padding: 12px 13px;
border: 1px solid rgba(224, 122, 95, .13);
border-radius: 14px;
background: rgba(224, 122, 95, .06);
}
.project-main-date span,
.project-budget-metric span,
.project-budget-foot span {
color: var(--muted);
font-size: 8.5px;
font-weight: 850;
letter-spacing: .075em;
text-transform: uppercase;
}
.project-main-date b {
color: var(--coral-deep);
font-size: 14px;
}
.project-date-list,
.project-meeting-list,
.project-role-list {
display: grid;
margin-top: 7px;
}
.project-date-row {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
align-items: baseline;
gap: 9px;
padding: 9px 2px;
border-top: 1px solid rgba(56, 85, 74, .075);
}
.project-date-value {
color: var(--coral-deep);
font-size: 10.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.project-date-copy {
min-width: 0;
color: var(--ink);
font-size: 12px;
font-weight: 680;
line-height: 1.35;
}
.project-date-row.is-past .project-date-value,
.project-date-row.is-past .project-date-copy {
color: var(--muted);
}
.project-meeting-row {
display: grid;
grid-template-columns: 74px minmax(0, 1fr) 14px;
align-items: center;
gap: 9px;
min-width: 0;
padding: 10px 2px;
border: 0;
border-top: 1px solid rgba(56, 85, 74, .075);
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.project-meeting-row:hover {
color: var(--green-deep);
}
.project-meeting-date {
color: var(--muted);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.project-meeting-copy {
display: grid;
min-width: 0;
}
.project-meeting-copy b {
font-size: 12px;
}
.project-meeting-copy small {
overflow: hidden;
color: var(--muted);
font-size: 9.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-meeting-row > i {
color: var(--coral-deep);
font-size: 18px;
font-style: normal;
}
.project-role-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 10px 1px;
border-top: 1px solid rgba(56, 85, 74, .075);
}
.project-role-avatar {
width: 36px !important;
height: 36px !important;
flex-basis: 36px !important;
background: var(--sage-soft);
color: var(--ink);
font-size: 10px !important;
}
.project-role-copy {
min-width: 0;
}
.project-role-name {
overflow: hidden;
font-size: 12.5px;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-detail .project-role-meta {
margin-top: 2px;
}
.project-budget-head,
.project-editions-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.project-budget-head > .pill {
flex: 0 0 auto;
white-space: nowrap;
}
.project-budget-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 13px 0 11px;
}
.project-budget-metric {
display: grid;
gap: 4px;
min-width: 0;
padding: 10px 11px;
border: 1px solid rgba(56, 85, 74, .075);
border-radius: 13px;
background: rgba(246, 241, 231, .58);
}
.project-budget-metric b {
overflow: hidden;
color: var(--green-deep);
font-size: 15px;
font-variant-numeric: tabular-nums;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-budget-progress {
height: 7px;
margin: 2px 0 12px;
overflow: hidden;
border-radius: 999px;
background: rgba(56, 85, 74, .08);
}
.project-budget-progress > div {
height: 100%;
border-radius: inherit;
}
.project-budget-foot {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.project-budget-foot > div {
display: grid;
gap: 2px;
}
.project-budget-foot b {
color: var(--ink);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.project-editions-card {
margin-top: 16px;
}
.project-editions-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.project-editions-list .btn {
min-height: 34px;
padding: 6px 10px;
font-size: 11.5px;
}
.project-notes-copy {
margin-top: 13px;
color: color-mix(in srgb, var(--ink) 84%, var(--muted));
font-size: 12.5px;
line-height: 1.58;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
@media (max-width: 980px) {
#tasks-region .task-control-primary {
grid-template-columns: minmax(0, 1fr) auto;
}
#tasks-region .task-scope-control {
grid-column: 1 / -1;
}
#tasks-region .task-control-status-row {
grid-template-columns: auto minmax(0, 1fr);
}
#tasks-region .task-control-status-row .collection-filter-summary {
grid-column: 1 / -1;
justify-content: flex-end;
}
.project-detail .project-hero-card {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.project-detail .project-hero-actions {
display: flex;
flex-wrap: wrap;
min-width: 0;
margin-left: 101px;
}
.project-detail .project-hero-actions .btn {
width: auto;
flex: 0 1 auto;
justify-content: center;
}
.project-detail .project-pulse {
grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}
.project-detail .project-pulse-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-detail .project-pulse-links > button:nth-child(2) {
border-right: 0;
}
.project-detail .project-pulse-links > button:nth-child(n + 3) {
border-top: 1px solid rgba(56, 85, 74, .075);
}
}
@media (max-width: 760px) {
#tasks-region .task-control-panel.compact-filter-panel {
gap: 9px;
padding: 9px;
border-radius: 17px;
}
#tasks-region .task-control-primary {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
#tasks-region .task-scope-control {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
}
#tasks-region .task-control-status-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 7px;
padding-top: 0;
}
#tasks-region .task-control-status-row > .task-control-label {
display: none;
}
#tasks-region .task-control-status-row .task-mobile-filter {
width: 100%;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
padding: 0;
}
#tasks-region .task-control-status-row .collection-filter-summary {
grid-column: auto;
width: 100%;
min-width: 0;
justify-content: space-between;
padding: 0 3px;
}
#tasks-region .task-control-panel .collection-filter-drawer {
padding: 10px;
}
.project-detail {
padding-bottom: 28px;
}
.project-detail .project-hero-card {
gap: 17px;
padding: 21px;
border-radius: 23px;
}
.project-detail .project-hero-main {
grid-template-columns: 68px minmax(0, 1fr);
gap: 14px;
}
.project-detail .project-hero-avatar {
width: 68px !important;
height: 68px !important;
flex-basis: 68px !important;
border-radius: 20px !important;
}
.project-detail .project-hero-actions {
margin-left: 82px;
}
.project-detail .project-hero-title {
max-width: none;
font-size: clamp(28px, 8.6vw, 38px);
}
.project-detail .project-hero-desc {
margin-bottom: 12px;
font-size: 13px;
}
.project-detail .project-pulse {
grid-template-columns: minmax(0, 1fr);
padding: 7px;
border-radius: 19px;
}
.project-detail .project-pulse-links > button {
min-height: 84px;
}
.project-detail .project-tabs.project-tabs-refined {
width: 100%;
box-sizing: border-box;
overflow-x: auto;
}
.project-detail .project-tabs-refined .project-tab {
flex: 0 0 auto;
min-width: 132px;
min-height: 49px;
}
.project-detail .project-section {
margin-top: 19px;
}
.project-detail .project-section-head {
margin-inline: 2px;
}
.project-detail .project-section-head h2 {
font-size: 21px;
}
.project-detail .project-main-grid,
.project-detail .project-resource-grid,
.project-detail .project-two-col {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.project-detail .project-primary,
.project-detail .project-secondary,
.project-detail .project-resource-side {
gap: 14px;
}
.project-detail .project-next-work,
.project-detail .project-info-card {
padding: 15px;
border-radius: 17px;
}
}
@media (max-width: 480px) {
#tasks-region .task-scope-control {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
#tasks-region .task-scope-control > span {
padding-left: 2px;
}
#tasks-region .task-control-primary .collection-filter-toggle {
padding-inline: 10px;
}
.project-detail .project-hero-card {
padding: 18px;
}
.project-detail .project-hero-main {
grid-template-columns: 56px minmax(0, 1fr);
gap: 12px;
}
.project-detail .project-hero-avatar {
width: 56px !important;
height: 56px !important;
flex-basis: 56px !important;
border-width: 3px;
border-radius: 17px !important;
}
.project-hero-kicker {
margin-top: 0;
font-size: 8.5px;
}
.project-detail .project-hero-title {
font-size: 28px;
overflow-wrap: anywhere;
}
.project-detail .project-hero-desc,
.project-detail .project-hero-meta,
.project-detail .project-hero-pills {
grid-column: 1 / -1;
}
.project-owner-identity b {
max-width: 160px;
}
.project-detail .project-hero-actions {
display: flex;
margin-left: 0;
}
.project-detail .project-hero-actions .btn {
width: auto;
min-width: 0;
flex: 1 1 calc(33.333% - 6px);
padding-inline: 9px;
}
.project-detail .project-hero-actions .project-chat-shortcut {
min-width: 0;
flex-basis: 100%;
}
.project-detail .project-pulse-links > button {
min-height: 80px;
padding-left: 11px;
}
.project-budget-head,
.project-editions-head {
align-items: stretch;
flex-direction: column;
}
.project-editions-list {
justify-content: flex-start;
}
.project-budget-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.push-adoption-nudge {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin: 0 0 16px;
padding: 14px 14px 14px 14px;
border: 1px solid rgba(47, 85, 69, .18);
border-radius: 17px;
background: linear-gradient(135deg, rgba(237, 244, 239, .94), rgba(255, 250, 240, .96));
box-shadow: 0 8px 22px rgba(27, 48, 39, .07);
}
.push-adoption-nudge.is-ios-install {
grid-template-columns: 42px minmax(0, 1fr);
align-items: start;
padding-right: 44px;
}
.push-nudge-icon {
display: grid;
place-items: center;
align-self: start;
width: 42px;
height: 42px;
border-radius: 13px;
background: rgba(47, 85, 69, .1);
color: var(--sage-deep, #2f5545);
}
.push-nudge-icon svg { width: 21px; height: 21px; }
.push-nudge-copy { min-width: 0; }
.push-nudge-copy b {
display: block;
color: var(--ink, #22302a);
font-family: var(--font-display, inherit);
font-size: 15px;
}
.push-nudge-copy small {
display: block;
margin-top: 3px;
color: var(--muted, #6c7a70);
font-size: 12.5px;
line-height: 1.5;
}
.push-nudge-steps {
margin: 10px 0 0;
padding-left: 20px;
display: grid;
gap: 5px;
color: var(--ink, #22302a);
font-size: 12.5px;
line-height: 1.5;
}
.push-nudge-steps li { padding-left: 2px; }
.push-nudge-steps b { display: inline; font-family: inherit; font-size: inherit; }
.push-nudge-help-link {
margin-top: 10px;
padding: 0;
border: 0;
background: transparent;
color: var(--sage-deep, #2f5545);
font: inherit;
font-size: 12.5px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.push-nudge-actions {
display: flex;
align-items: center;
gap: 8px;
}
.push-adoption-nudge .btn {
width: auto;
min-width: 150px;
min-height: 40px;
margin: 0;
padding: 8px 13px;
}
.push-nudge-close {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--muted, #6c7a70);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.push-adoption-nudge.is-ios-install .push-nudge-close {
position: absolute;
top: 8px;
right: 8px;
}
.push-nudge-close:hover,
.push-nudge-close:focus-visible {
background: rgba(47, 85, 69, .08);
color: var(--ink, #22302a);
outline: none;
}
@media (max-width: 640px) {
.push-adoption-nudge {
grid-template-columns: 42px minmax(0, 1fr);
align-items: start;
}
.push-nudge-actions {
grid-column: 1 / -1;
margin-top: 4px;
flex-wrap: wrap;
}
.push-adoption-nudge .btn { flex: 1 1 auto; }
.push-adoption-nudge:not(.is-ios-install) .push-nudge-close {
position: absolute;
top: 8px;
right: 8px;
}
}
/*! Finance redesign 20260806-financeux1 — jasná cesta Dnes → Doklady → Banka */
.view-finance .finance-workspace {
gap: 18px;
}
.view-finance .section-hero {
display: grid;
grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
gap: 14px 18px;
padding: clamp(20px, 2.5vw, 27px);
border-radius: 24px;
background:
radial-gradient(540px 300px at 104% -35%, rgba(255,255,255,.12), transparent 68%),
linear-gradient(135deg, #274b3b 0%, #315d49 100%);
box-shadow: 0 16px 38px rgba(31, 61, 48, .14);
}
.view-finance .section-hero::after {
width: 190px;
height: 190px;
right: -112px;
bottom: -118px;
border-width: 26px;
}
.view-finance .section-hero-top {
position: relative;
z-index: 1;
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
min-width: 0;
}
.view-finance .section-hero-copy {
align-items: center;
gap: 14px;
}
.view-finance .finance-home-icon {
width: 48px;
height: 48px;
flex-basis: 48px;
border-radius: 15px;
}
.view-finance .section-hero-copy h1 {
margin: 2px 0 4px;
font-size: clamp(29px, 3.1vw, 38px);
}
.view-finance .section-hero-copy p {
max-width: 560px;
font-size: 13px;
}
.view-finance .section-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.view-finance .section-hero-actions .btn {
gap: 7px;
min-height: 42px;
padding-inline: 14px;
}
.view-finance .section-hero-actions svg {
width: 16px;
height: 16px;
}
.view-finance .section-hero-status {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
padding: 13px 14px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 15px;
background: rgba(16, 42, 31, .2);
}
.view-finance .section-hero-status > span {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: #274b3b;
background: #dcebdc;
font-weight: 900;
}
.view-finance .section-hero-status.is-attention > span {
color: #714e18;
background: #f8dfa3;
}
.view-finance .section-hero-status > div {
display: grid;
gap: 2px;
min-width: 0;
}
.view-finance .section-hero-status b {
color: #fff;
font-size: 12.5px;
}
.view-finance .section-hero-status small {
color: rgba(255,255,255,.68);
font-size: 10.5px;
line-height: 1.4;
}
.view-finance .finance-balance-grid {
grid-column: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.view-finance .finance-balance-grid .finance-balance-block {
display: grid;
gap: 7px;
width: auto;
min-width: 0;
padding: 13px 14px;
border-radius: 15px;
background: rgba(17, 44, 33, .22);
}
.view-finance .finance-balance-block header,
.view-finance .finance-balance-block footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.view-finance .finance-balance-block header > span {
color: rgba(255,255,255,.72);
font-size: 9px;
font-weight: 850;
letter-spacing: .055em;
text-transform: uppercase;
}
.view-finance .finance-balance-block header em {
overflow: hidden;
color: #cfe5d6;
font-size: 8.5px;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-finance .finance-balance-block.is-stale header em {
color: #f1d89b;
}
.view-finance .finance-balance-block > b {
overflow-wrap: anywhere;
font-size: clamp(22px, 2.8vw, 32px);
}
.view-finance .finance-balance-block footer small {
overflow: hidden;
color: rgba(255,255,255,.62);
font-size: 9.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-finance .finance-balance-block footer a {
flex: 0 0 auto;
color: #fff;
font-size: 9.5px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.view-finance .finance-workspace-tabs {
position: sticky;
top: 7px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
padding: 7px;
overflow: visible;
border-radius: 18px;
background: rgba(255,253,248,.96);
}
.view-finance .finance-tab-group {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: stretch;
gap: 6px;
min-width: 0;
padding: 3px;
border-radius: 13px;
background: rgba(239, 238, 229, .58);
}
.view-finance .finance-tab-group-label {
display: grid;
place-items: center;
padding: 5px;
color: #718077;
font-size: 8px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.view-finance .finance-tab-group > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
min-width: 0;
}
.view-finance .finance-workspace-tabs button {
position: relative;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
justify-content: initial;
gap: 8px;
min-width: 0;
min-height: 56px;
padding: 7px 9px;
border: 1px solid transparent;
border-radius: 11px;
color: #53645b;
text-align: left;
}
.view-finance .finance-tab-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 9px;
color: #496958;
background: rgba(73, 105, 88, .09);
}
.view-finance .finance-tab-icon svg {
width: 15px;
height: 15px;
}
.view-finance .finance-tab-copy {
display: grid;
gap: 1px;
min-width: 0;
}
.view-finance .finance-tab-copy b {
overflow: hidden;
color: inherit;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-finance .finance-tab-copy em {
overflow: hidden;
color: #849087;
font-size: 8.5px;
font-style: normal;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-finance .finance-workspace-tabs button:hover {
border-color: rgba(47,85,69,.12);
background: rgba(255,255,255,.72);
}
.view-finance .finance-workspace-tabs button.is-active {
border-color: #315746;
color: #fff;
background: #315746;
box-shadow: 0 7px 16px rgba(42,77,62,.18);
}
.view-finance .finance-workspace-tabs button.is-active .finance-tab-icon {
color: #315746;
background: #f4f1e8;
}
.view-finance .finance-workspace-tabs button.is-active .finance-tab-copy em {
color: rgba(255,255,255,.68);
}
.view-finance .finance-workspace-tabs button > small {
min-width: 20px;
height: 20px;
color: #7b5418;
background: #f7dda1;
}
.view-finance .finance-workspace-tabs button.is-active > small {
color: #315746;
background: #fff4d7;
}
.view-finance .finance-today-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(270px, .65fr);
gap: 16px;
align-items: start;
min-width: 0;
}
.view-finance .finance-section {
padding: clamp(18px, 2.2vw, 24px);
border-radius: 20px;
}
.view-finance .finance-section-head {
gap: 14px;
margin-bottom: 16px;
}
.view-finance .finance-section-head h2 {
margin-top: 3px;
font-size: clamp(20px, 2vw, 25px);
}
.view-finance .finance-attention-section {
border-top: 4px solid var(--coral);
}
.view-finance .finance-work-inbox > details {
border-radius: 13px;
background: #fff;
}
.view-finance .finance-work-inbox > details[open]:first-child {
border-color: rgba(218,111,82,.22);
box-shadow: inset 3px 0 var(--coral);
}
.view-finance .finance-work-inbox > details > summary {
min-height: 46px;
box-sizing: border-box;
padding: 11px 14px;
font-family: var(--sans);
font-size: 12px;
}
.view-finance .finance-work-inbox-row {
grid-template-columns: 10px minmax(0, 1fr) auto;
min-height: 58px;
padding: 11px 14px;
}
.view-finance .finance-work-inbox-row > div:last-child .btn {
min-height: 36px;
padding-inline: 12px;
}
.view-finance .finance-journey-card {
border-color: rgba(47,85,69,.16);
background:
radial-gradient(280px 190px at 105% -20%, rgba(169,184,164,.18), transparent 68%),
#f3f5ee;
}
.view-finance .finance-journey-card .finance-section-head {
margin-bottom: 12px;
}
.view-finance .finance-journey-card ol {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.view-finance .finance-journey-card li {
position: relative;
}
.view-finance .finance-journey-card li:not(:last-child)::after {
content: "";
position: absolute;
top: 38px;
bottom: -5px;
left: 16px;
width: 1px;
background: rgba(49,87,70,.2);
}
.view-finance .finance-journey-card li button {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 0;
border: 0;
color: var(--ink);
background: transparent;
text-align: left;
cursor: pointer;
}
.view-finance .finance-journey-card li i {
z-index: 1;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid rgba(49,87,70,.14);
border-radius: 10px;
color: #315746;
background: #fff;
font-size: 10px;
font-style: normal;
font-weight: 900;
}
.view-finance .finance-journey-card li span {
display: grid;
gap: 1px;
min-width: 0;
}
.view-finance .finance-journey-card li b {
font-size: 11.5px;
}
.view-finance .finance-journey-card li small {
color: var(--muted);
font-size: 9.5px;
}
.view-finance .finance-journey-card li button:hover b,
.view-finance .finance-journey-help:hover {
color: var(--coral-dark);
}
.view-finance .finance-journey-help {
margin: 12px 0 0 44px;
padding: 0;
border: 0;
color: #315746;
background: transparent;
font: inherit;
font-size: 10.5px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.view-finance .finance-snapshot {
display: grid;
gap: 9px;
min-width: 0;
}
.view-finance .finance-snapshot-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-inline: 3px;
}
.view-finance .finance-snapshot-head p {
margin: 0;
color: var(--muted);
font-size: 10px;
}
.view-finance .finance-overview-summary {
gap: 9px;
}
.view-finance .finance-overview-summary .finance-metric {
min-height: 78px;
box-sizing: border-box;
padding: 13px 14px;
border-radius: 15px;
background: #fffdf8;
}
.view-finance .finance-overview-lower {
gap: 16px;
}
.view-finance .finance-overview-lower .finance-section {
min-height: 100%;
box-sizing: border-box;
}
.view-finance .finance-add-strip .finance-home-icon {
color: #315746;
background: #e7f0e9;
border-color: rgba(49,87,70,.08);
}
.view-finance .finance-add-strip .btn {
min-height: 44px;
}
.view-finance .finance-document-section {
border-color: rgba(49,87,70,.2);
background:
radial-gradient(340px 200px at 100% -30%, rgba(169,184,164,.18), transparent 70%),
#f7f8f2;
}
.view-finance .finance-approval-section {
border-top: 4px solid #d09a43;
}
.view-finance .finance-document-row {
margin-top: 7px;
padding: 13px;
border: 1px solid rgba(54,82,68,.1);
border-radius: 14px;
background: #fff;
}
.view-finance .finance-document-row:first-child {
margin-top: 0;
border-top: 1px solid rgba(54,82,68,.1);
}
.view-finance .finance-document-toolbar {
border-radius: 15px;
background: #f5f3ec;
}
.view-finance .finance-bank-summary {
border-top: 4px solid #547765;
}
.view-finance .finance-bank-account-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
.view-finance .finance-bank-account-card {
display: grid;
gap: 7px;
min-width: 0;
padding: 16px;
border: 1px solid rgba(54,82,68,.12);
border-radius: 16px;
background: #fbfaf6;
}
.view-finance .finance-bank-account-card header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.view-finance .finance-bank-account-card header > div {
display: flex;
align-items: baseline;
gap: 7px;
}
.view-finance .finance-bank-account-card header > div span {
color: var(--muted);
font-size: 9px;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.view-finance .finance-bank-account-card h3 {
margin: 0;
color: var(--green-deep);
font-family: var(--display);
font-size: 16px;
}
.view-finance .finance-bank-account-card > strong {
font-family: var(--display);
font-size: clamp(25px, 3vw, 34px);
letter-spacing: -.025em;
}
.view-finance .finance-bank-account-card > small {
color: var(--muted);
font-size: 10.5px;
}
.view-finance .finance-bank-account-card dl {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
margin: 7px 0 0;
}
.view-finance .finance-bank-account-card dl > div {
display: grid;
gap: 2px;
min-width: 0;
padding: 8px;
border-radius: 10px;
background: #f0eee6;
}
.view-finance .finance-bank-account-card dt {
color: var(--muted);
font-size: 8.5px;
font-weight: 800;
text-transform: uppercase;
}
.view-finance .finance-bank-account-card dd {
overflow: hidden;
margin: 0;
font-size: 10.5px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-finance .finance-bank-account-card dd.is-income { color: #2e704c; }
.view-finance .finance-bank-account-card dd.is-expense { color: #aa523f; }
.view-finance .finance-bank-account-card > a { width: fit-content; margin-top: 3px; color: var(--green-deep); font-size: 10.5px; font-weight: 800; }
.view-finance .finance-account-movements-list {
display: grid;
gap: 8px;
}
.view-finance .finance-account-movements {
overflow: hidden;
border: 1px solid rgba(54,82,68,.11);
border-radius: 14px;
background: #fff;
}
.view-finance .finance-account-movements > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 54px;
box-sizing: border-box;
padding: 11px 14px;
cursor: pointer;
list-style: none;
}
.view-finance .finance-account-movements > summary::-webkit-details-marker { display: none; }
.view-finance .finance-account-movements > summary > span { display: grid; gap: 2px; }
.view-finance .finance-account-movements > summary b { font-size: 12.5px; }
.view-finance .finance-account-movements > summary small { color: var(--muted); font-size: 9.5px; }
.view-finance .finance-account-movements > summary strong { color: var(--green-deep); font-family: var(--display); font-size: 14px; }
.view-finance .finance-account-movements[open] > summary { border-bottom: 1px solid rgba(54,82,68,.09); background: #f7f6f0; }
.view-finance .finance-account-movements > div { padding: 4px 14px 8px; }
.view-finance .finance-organization-disclosure {
overflow: hidden;
border: 1px solid rgba(54,82,68,.12);
border-radius: 16px;
background: rgba(255,253,248,.78);
}
.view-finance .finance-organization-disclosure > summary {
min-height: 48px;
box-sizing: border-box;
padding: 13px 16px;
color: var(--green-deep);
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.view-finance .finance-organization-disclosure .finance-organization-panel {
margin: 0 8px 8px;
box-shadow: none;
}
.view-finance .finance-metrics.is-wide {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.view-finance .finance-metrics.is-wide .finance-metric {
min-height: 94px;
border-radius: 15px;
}
.view-finance .finance-project-table-row {
min-height: 70px;
}
.view-finance .finance-close-row {
padding: 15px;
border-radius: 15px;
background: #fff;
}
.view-finance .finance-close-checklist li {
padding: 9px;
border-radius: 11px;
}
.view-finance .finance-rewards-intro,
.view-finance .finance-rewards-project-hero {
border-radius: 20px;
}
@media (max-width: 1100px) {
.view-finance .section-hero { grid-template-columns: 1fr; }
.view-finance .section-hero-status,
.view-finance .finance-balance-grid { grid-column: 1; }
.view-finance .finance-today-layout { grid-template-columns: 1fr; }
.view-finance .finance-journey-card ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.view-finance .finance-journey-card li:not(:last-child)::after { display: none; }
.view-finance .finance-journey-card li button { grid-template-columns: 32px minmax(0, 1fr); padding: 8px; border-radius: 12px; background: rgba(255,255,255,.72); }
.view-finance .finance-journey-help { margin-left: 0; }
}
@media (max-width: 900px) {
.view-finance .finance-tab-copy em { display: none; }
.view-finance .finance-workspace-tabs button { grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 48px; }
.view-finance .finance-bank-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.view-finance .finance-workspace { gap: 14px; }
.view-finance .section-hero { gap: 13px; padding: 18px; border-radius: 21px; }
.view-finance .section-hero-top { display: grid; gap: 15px; }
.view-finance .section-hero-copy { align-items: flex-start; padding-right: 0; }
.view-finance .section-hero-copy h1 { font-size: 29px; white-space: normal; }
.view-finance .section-hero-copy p { max-width: 30ch; }
.view-finance .section-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.view-finance .section-hero-actions .btn { width: 100%; min-width: 0; padding-inline: 10px; white-space: normal; }
.view-finance .section-hero-actions .btn-primary { grid-column: 1 / -1; }
.view-finance .finance-balance-grid { grid-template-columns: 1fr; width: 100%; }
.view-finance .finance-workspace-tabs { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 7px; }
.view-finance .finance-tab-group { display: contents; }
.view-finance .finance-tab-group-label { display: none; }
.view-finance .finance-tab-group > div { display: contents; }
.view-finance .finance-workspace-tabs button { display: flex; min-height: 62px; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 4px; text-align: center; }
.view-finance .finance-tab-icon { width: 25px; height: 25px; }
.view-finance .finance-tab-copy b { font-size: 10px; white-space: normal; }
.view-finance .finance-workspace-tabs button > small { position: absolute; margin: -36px 0 0 38px; }
.view-finance .finance-section { padding: 17px 14px; border-radius: 18px; }
.view-finance .finance-section-head { align-items: flex-start; }
.view-finance .finance-journey-card ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-finance .finance-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-finance .finance-overview-summary .finance-metric { min-height: 88px; }
.view-finance .finance-work-inbox-row { grid-template-columns: 9px minmax(0, 1fr); }
.view-finance .finance-work-inbox-row > div:last-child { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.view-finance .finance-add-strip { grid-template-columns: 42px minmax(0, 1fr); }
.view-finance .finance-add-strip > .btn { grid-column: 1 / -1; width: 100%; }
.view-finance .finance-bank-account-card dl { grid-template-columns: 1fr; }
.view-finance .finance-account-movements > div { padding-inline: 10px; }
.view-finance .finance-metrics.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-finance .finance-document-row { grid-template-columns: 36px minmax(0, 1fr); }
.view-finance .finance-document-row > .finance-document-actions { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 430px) {
.view-finance .section-hero-actions .finance-help-action svg { display: none; }
.view-finance .section-hero-status { grid-template-columns: 30px minmax(0, 1fr); padding: 11px; }
.view-finance .section-hero-status > span { width: 28px; height: 28px; }
.view-finance .finance-balance-grid .finance-balance-block { padding: 12px; }
.view-finance .finance-balance-block header { align-items: flex-start; flex-direction: column; gap: 2px; }
.view-finance .finance-overview-summary .finance-metric > span { font-size: 9px; }
.view-finance .finance-overview-summary .finance-metric > b { font-size: 17px; }
.view-finance .finance-snapshot-head { align-items: flex-start; flex-direction: column; gap: 2px; }
.view-finance .finance-journey-card ol { grid-template-columns: 1fr; }
.view-finance .finance-metrics.is-wide { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.view-finance .finance-workspace-tabs button,
.view-finance .finance-journey-card button { transition: none; }
}
/*! Projektový pracovní prostor — 20260811-eventblockpolish1 */
.project-workspace-v2 {
width: 100%;
max-width: 1160px;
margin-inline: auto;
padding-bottom: 52px;
}
.project-workspace-v2 .project-backbar {
margin-bottom: 10px;
}
.project-workspace-v2 .project-hero-card {
position: relative;
display: block;
overflow: visible;
padding: 0;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 24px;
color: #fff;
background: #2d5745;
box-shadow: 0 14px 34px rgba(31, 61, 48, .15);
}
.project-workspace-v2 .project-hero-card::after {
display: none;
}
.project-workspace-v2 .project-hero-top {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 18px;
min-width: 0;
padding: 21px 22px 18px;
}
.project-workspace-v2 .project-hero-main {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: start;
gap: 14px;
min-width: 0;
}
.project-workspace-v2 .project-hero-avatar {
width: 56px !important;
height: 56px !important;
flex-basis: 56px !important;
border: 3px solid rgba(255, 255, 255, .2);
border-radius: 16px !important;
background: #d9775f !important;
color: #fff !important;
box-shadow: 0 8px 18px rgba(17, 42, 31, .2);
}
.project-workspace-v2 .project-hero-copy {
min-width: 0;
}
.project-workspace-v2 .project-hero-kicker {
gap: 7px;
margin: 0 0 5px;
color: rgba(255, 255, 255, .62);
font-size: 9px;
}
.project-workspace-v2 .project-hero-kicker b {
color: rgba(255, 255, 255, .88);
font-size: 9.5px;
}
.project-workspace-v2 .project-status-dot {
width: 7px;
height: 7px;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .1);
}
.project-workspace-v2 .project-hero-title {
max-width: 24ch;
margin: 0;
color: #fff;
font-size: clamp(29px, 3.2vw, 36px);
line-height: 1.03;
letter-spacing: -.035em;
}
.project-workspace-v2 .project-hero-desc {
max-width: 68ch;
margin: 7px 0 12px;
color: rgba(255, 255, 255, .72);
font-size: 12.5px;
line-height: 1.48;
}
.project-workspace-v2 .project-hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.project-workspace-v2 .project-owner-identity {
padding-right: 7px;
color: #fff;
}
.project-workspace-v2 .project-owner-identity > span {
display: grid;
gap: 0;
}
.project-workspace-v2 .project-owner-identity .project-owner-avatar {
width: 26px !important;
height: 26px !important;
flex-basis: 26px !important;
border-color: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .14);
color: #fff;
}
.project-workspace-v2 .project-owner-identity small {
color: rgba(255, 255, 255, .54);
font-size: 7.5px;
letter-spacing: .04em;
text-transform: uppercase;
}
.project-workspace-v2 .project-owner-identity b {
color: rgba(255, 255, 255, .94);
font-size: 11.5px;
}
.project-workspace-v2 .project-hero-meta > .pill,
.project-workspace-v2 .project-hero-pills .pill {
border: 1px solid rgba(255, 255, 255, .1);
background: rgba(16, 42, 31, .22);
color: rgba(255, 255, 255, .78);
}
.project-workspace-v2 .project-hero-pills {
margin-top: 7px;
}
.project-workspace-v2 .project-hero-actions {
position: relative;
z-index: 7;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.project-workspace-v2 .project-hero-actions .btn,
.project-workspace-v2 .project-hero-more > summary {
box-sizing: border-box;
min-height: 38px;
padding: 8px 13px;
border-radius: 11px;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.project-workspace-v2 .project-hero-actions .project-chat-shortcut {
min-width: 0;
border-color: #f4efe4 !important;
background: #f4efe4 !important;
color: #315746 !important;
box-shadow: 0 8px 18px rgba(17, 42, 31, .18);
}
.project-workspace-v2 .project-hero-actions .project-chat-shortcut:hover {
border-color: #fff !important;
background: #fff !important;
color: #274b3b !important;
}
.project-workspace-v2 .project-hero-more,
.project-workspace-v2 .event-edit-menu {
position: relative;
}
.project-workspace-v2 .project-hero-more {
width: auto;
min-width: 0;
}
.project-workspace-v2 .project-hero-more > summary,
.project-workspace-v2 .event-edit-menu > summary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(16, 42, 31, .2);
color: #fff;
cursor: pointer;
list-style: none;
}
.project-workspace-v2 .project-hero-more > summary::-webkit-details-marker,
.project-workspace-v2 .event-edit-menu > summary::-webkit-details-marker {
display: none;
}
.project-workspace-v2 .project-hero-more[open] > summary,
.project-workspace-v2 .event-edit-menu[open] > summary {
background: rgba(16, 42, 31, .34);
}
.project-workspace-v2 .project-hero-more[open] > summary span,
.project-workspace-v2 .event-edit-menu[open] > summary span {
transform: rotate(180deg);
}
.project-workspace-v2 .project-hero-more-popover,
.project-workspace-v2 .event-edit-menu-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 30;
display: grid;
width: 255px;
padding: 7px;
border: 1px solid rgba(56, 85, 74, .14);
border-radius: 15px;
background: #fffdf8;
box-shadow: 0 18px 40px rgba(31, 61, 48, .2);
}
.project-workspace-v2 .project-hero-more-popover > button,
.project-workspace-v2 .event-edit-menu-popover > button {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
gap: 1px 10px;
width: 100%;
padding: 9px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.project-workspace-v2 .project-hero-more-popover > button:hover,
.project-workspace-v2 .event-edit-menu-popover > button:hover {
background: rgba(169, 184, 164, .13);
}
.project-workspace-v2 .project-hero-more-popover > button > span {
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(169, 184, 164, .15);
color: var(--green-deep);
}
.project-workspace-v2 .project-hero-more-popover svg {
width: 15px;
height: 15px;
}
.project-workspace-v2 .project-hero-more-popover b,
.project-workspace-v2 .event-edit-menu-popover b {
font-size: 12px;
}
.project-workspace-v2 .project-hero-more-popover small,
.project-workspace-v2 .event-edit-menu-popover small {
color: var(--muted);
font-size: 9.5px;
line-height: 1.3;
}
.project-workspace-v2 .project-hero-status-rail {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(220px, .86fr) minmax(0, 2.14fr);
gap: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .12);
border-radius: 0 0 23px 23px;
background: rgba(16, 42, 31, .13);
}
.project-workspace-v2 .project-hero-direction,
.project-workspace-v2 .project-hero-rail-links > button {
min-width: 0;
border: 0;
color: #fff;
text-align: left;
cursor: pointer;
}
.project-workspace-v2 .project-hero-direction {
display: grid;
align-content: center;
gap: 4px;
min-height: 76px;
padding: 13px 16px 13px 21px;
border-radius: 0;
background: rgba(255, 255, 255, .035);
box-shadow: inset 3px 0 var(--coral);
}
.project-workspace-v2 .project-hero-direction:hover {
background: rgba(255, 255, 255, .07);
}
.project-workspace-v2 .project-hero-direction span,
.project-workspace-v2 .project-hero-rail-links span {
color: rgba(255, 255, 255, .53);
font-size: 8px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.project-workspace-v2 .project-hero-direction b {
display: -webkit-box;
overflow: hidden;
color: #fff;
font-size: 15px;
line-height: 1.27;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
}
.project-workspace-v2 .project-hero-direction b.muted {
color: rgba(255, 255, 255, .62);
}
.project-workspace-v2 .project-hero-rail-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
overflow: hidden;
border-left: 1px solid rgba(255, 255, 255, .085);
border-radius: 0;
background: transparent;
}
.project-workspace-v2 .project-hero-rail-links > button {
display: grid;
align-content: center;
gap: 4px;
min-height: 76px;
padding: 11px 13px;
border-right: 1px solid rgba(255, 255, 255, .085);
background: transparent;
}
.project-workspace-v2 .project-hero-rail-links > button:last-child {
border-right: 0;
}
.project-workspace-v2 .project-hero-rail-links > button:hover {
background: rgba(255, 255, 255, .07);
}
.project-workspace-v2 .project-hero-rail-links b {
display: -webkit-box;
overflow: hidden;
color: #fff;
font-size: 11px;
line-height: 1.28;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
}
.project-workspace-v2 .project-hero-rail-links small {
display: -webkit-box;
overflow: hidden;
color: rgba(255, 255, 255, .48);
font-size: 8.75px;
line-height: 1.25;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
}
.project-workspace-v2 .project-hero-rail-links small.bad {
color: #ffd3c6;
}
.project-workspace-v2 .project-origin-link {
margin: 10px 0 0;
}
.project-workspace-v2 .project-tabs.project-tabs-refined {
position: sticky;
top: 8px;
z-index: 12;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 5px;
width: 100%;
margin: 12px 0 0;
padding: 6px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 17px;
background: rgba(255, 253, 248, .94);
box-shadow: 0 9px 24px rgba(43, 66, 58, .07);
backdrop-filter: blur(12px);
}
.project-workspace-v2 .project-tabs-refined .project-tab {
min-width: 0;
min-height: 42px;
padding: 8px 9px;
border: 1px solid transparent;
border-radius: 11px;
color: #65756c;
background: transparent;
font-size: 11.5px;
font-weight: 780;
}
.project-workspace-v2 .project-tabs-refined .project-tab:hover {
border-color: rgba(49, 87, 70, .1);
background: rgba(169, 184, 164, .1);
color: var(--green-deep);
}
.project-workspace-v2 .project-tabs-refined .project-tab.active {
border-color: #315746;
background: #315746;
color: #fff;
box-shadow: 0 6px 14px rgba(42, 77, 62, .14);
}
.project-workspace-v2 .project-section {
margin-top: 18px;
}
.project-workspace-v2 .project-section-head {
margin: 0 2px 13px;
}
.project-workspace-v2 .project-section-head h2 {
font-size: clamp(20px, 2vw, 24px);
}
.project-workspace-v2 .project-section-head p {
max-width: 68ch;
margin-top: 4px;
font-size: 11.5px;
}
.project-workspace-v2 .card,
.project-workspace-v2 .card.pad,
.project-workspace-v2 .project-section .card,
.project-workspace-v2 .project-section .card.pad {
border-radius: 18px;
border-color: rgba(56, 85, 74, .1);
background: rgba(255, 253, 248, .9);
box-shadow: 0 9px 24px rgba(43, 66, 58, .045);
}
.project-workspace-v2 .project-main-grid {
grid-template-columns: minmax(0, 1.46fr) minmax(250px, .54fr);
gap: 15px;
align-items: start;
}
.project-workspace-v2 .project-next-work {
gap: 12px;
padding: 18px;
}
.project-workspace-v2 .project-next-head {
gap: 13px;
}
.project-workspace-v2 .project-next-actions .btn {
min-width: 0;
min-height: 38px;
padding: 7px 11px;
font-size: 11px;
}
.project-workspace-v2 .project-next-actions .btn-primary {
box-shadow: 0 6px 14px rgba(193, 91, 67, .13);
}
.project-workspace-v2 .project-next-summary span {
border: 1px solid rgba(56, 85, 74, .07);
background: rgba(246, 241, 231, .64);
}
.project-workspace-v2 .project-next-section {
padding: 12px;
border-radius: 14px;
}
.project-workspace-v2 .project-next-task {
border-radius: 12px;
box-shadow: none;
}
.project-workspace-v2 .project-watch-card {
padding: 17px 17px 10px;
}
.project-workspace-v2 .project-watch-card > .panel-title,
.project-workspace-v2 .project-watch-card > .panel-note {
margin: 0;
padding: 0;
border: 0;
}
.project-workspace-v2 .project-watch-card > .panel-title {
color: var(--green-deep);
font-size: 15px;
}
.project-workspace-v2 .project-watch-card > .panel-note {
margin-top: 3px;
font-size: 10px;
}
.project-workspace-v2 .project-watch-list {
display: grid;
margin-top: 10px;
}
.project-workspace-v2 .project-watch-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 11px;
align-items: center;
gap: 7px;
min-width: 0;
min-height: 51px;
padding: 8px 1px;
border: 0;
border-top: 1px solid rgba(56, 85, 74, .08);
background: transparent;
color: inherit;
text-align: left;
}
button.project-watch-row {
cursor: pointer;
}
.project-workspace-v2 button.project-watch-row:hover b {
color: var(--coral-deep);
}
.project-workspace-v2 .project-watch-row span {
color: var(--muted);
font-size: 9.5px;
}
.project-workspace-v2 .project-watch-row b {
max-width: 142px;
overflow: hidden;
color: var(--green-deep);
font-size: 11px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-workspace-v2 .project-watch-row i {
color: var(--coral-deep);
font-size: 16px;
font-style: normal;
opacity: .55;
}
.project-workspace-v2 .project-watch-row.is-attention b {
color: var(--coral-deep);
}
.project-workspace-v2 .project-watch-row.is-empty {
grid-template-columns: minmax(0, 1fr) auto;
}
.project-workspace-v2 .project-watch-row.is-empty b {
color: var(--muted);
font-weight: 600;
}
.project-workspace-v2 .project-agreements-preview {
margin-top: 14px;
padding: 16px 17px;
border-radius: 18px;
background: rgba(255, 253, 248, .76);
box-shadow: 0 8px 22px rgba(43, 66, 58, .035);
}
.project-workspace-v2 .project-agreements-preview-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-workspace-v2 .event-hub {
gap: 14px;
}
.project-workspace-v2 .event-overview-strip {
position: relative;
display: grid;
grid-template-columns: 175px minmax(0, 1fr) auto auto;
align-items: center;
gap: 16px;
min-width: 0;
padding: 15px 16px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 18px;
background: #f7f7f0;
box-shadow: 0 6px 18px rgba(43, 66, 58, .035);
}
.project-workspace-v2 .event-overview-strip.is-today {
border-color: rgba(224, 122, 95, .3);
background: #fff7f0;
}
.project-workspace-v2 .event-overview-when {
display: grid;
gap: 2px;
min-width: 0;
}
.project-workspace-v2 .event-overview-when span,
.project-workspace-v2 .project-static-note > span,
.project-workspace-v2 .project-comment-thread-label {
color: var(--coral-deep);
font-size: 8.5px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.project-workspace-v2 .event-overview-when b {
color: var(--green-deep);
font-size: 13px;
line-height: 1.35;
}
.project-workspace-v2 .event-overview-when small {
color: var(--muted);
font-size: 9.5px;
}
.project-workspace-v2 .event-overview-copy {
min-width: 0;
}
.project-workspace-v2 .event-overview-copy p {
margin: 0;
color: var(--muted);
font-size: 11px;
line-height: 1.45;
}
.project-workspace-v2 .event-overview-copy .event-overview-goal {
margin-bottom: 3px;
color: var(--ink);
font-size: 12px;
font-weight: 700;
}
.project-workspace-v2 .event-overview-copy a {
display: inline-block;
margin-top: 4px;
color: var(--green-deep);
font-size: 10px;
font-weight: 750;
text-decoration: none;
}
.project-workspace-v2 .event-overview-facts {
display: flex;
align-items: stretch;
gap: 0;
}
.project-workspace-v2 .event-overview-facts span {
display: grid;
place-items: center;
min-width: 72px;
padding: 7px 12px;
border: 0;
border-left: 1px solid rgba(56, 85, 74, .11);
border-radius: 0;
background: transparent;
color: var(--muted);
font-size: 8.5px;
text-align: center;
}
.project-workspace-v2 .event-overview-facts b {
color: var(--green-deep);
font-size: 14px;
}
.project-workspace-v2 .event-edit-menu {
z-index: 8;
}
.project-workspace-v2 .event-edit-menu > summary {
min-height: 38px;
padding: 8px 11px;
border-color: rgba(56, 85, 74, .17);
border-radius: 10px;
background: #fffdf8;
color: var(--green-deep);
font-size: 10.5px;
font-weight: 800;
white-space: nowrap;
}
.project-workspace-v2 .event-edit-menu[open] > summary {
background: #f2f4ed;
}
.project-workspace-v2 .event-edit-menu-popover > button {
grid-template-columns: minmax(0, 1fr);
}
.project-workspace-v2 .event-block {
border-radius: 18px;
background: #fffdf8;
box-shadow: 0 8px 22px rgba(43, 66, 58, .04);
}
.project-workspace-v2 .event-block-head h4 {
font-size: 17px;
}
.project-workspace-v2 .event-daytabs {
gap: 6px;
margin-bottom: 16px;
}
.project-workspace-v2 .event-daytabs button {
min-width: 92px;
min-height: 50px;
padding: 8px 11px;
border-radius: 11px;
background: #fffdf8;
font-family: var(--body);
box-shadow: none;
}
.project-workspace-v2 .event-daytab-all {
font-size: 12.5px;
line-height: 1.2;
}
.project-workspace-v2 .event-daytabs button b {
font-size: 12px;
}
.project-workspace-v2 .event-daytabs button small {
font-size: 9.5px;
}
.project-workspace-v2 .event-daytabs button:hover {
border-color: rgba(56, 85, 74, .22);
background: #f7f7f0;
}
.project-workspace-v2 .event-daytabs button.on {
border-color: rgba(224, 122, 95, .34);
background: #f7ede8;
color: var(--coral-deep);
}
.project-workspace-v2 .emoment-title-row {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 7px;
}
.project-workspace-v2 .emoment-title-row .emoment-title {
flex: 1 1 auto;
min-width: 0;
margin-top: 0;
}
.modal.event-block-detail-modal {
width: min(880px, calc(100vw - 28px));
max-width: 880px;
}
.event-block-detail-modal .modal-body {
padding: 0;
background: #f7f5ed;
}
.event-block-modal {
color: var(--ink);
}
.event-block-modal-intro {
padding: 22px 24px 20px;
border-bottom: 1px solid rgba(56, 85, 74, .1);
background: #fffdf8;
}
.event-block-modal-kicker {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.event-block-modal-kicker span {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 8px;
border-radius: 8px;
background: #edf0e8;
color: var(--green-deep);
font-size: 9px;
font-weight: 820;
letter-spacing: .04em;
text-transform: uppercase;
}
.event-block-modal-kicker span:last-child {
background: #f4ebe5;
color: var(--coral-deep);
}
.event-block-modal-kicker span.is-done,
.event-block-modal-kicker span.is-ready {
background: #e6efe5;
color: #2f6b48;
}
.event-block-modal-intro h4 {
margin: 10px 0 0;
color: var(--green-deep);
font-family: var(--display);
font-size: clamp(23px, 3vw, 31px);
line-height: 1.12;
}
.event-block-modal-when {
margin: 7px 0 0;
color: var(--coral-deep);
font-size: 12px;
font-weight: 760;
}
.event-block-modal-people {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
margin-top: 15px;
}
.event-block-modal-people > span {
display: grid;
gap: 2px;
min-width: 0;
}
.event-block-modal-people small,
.event-block-modal-note small,
.event-block-modal-live-note small,
.event-block-modal-document small {
color: var(--muted);
font-size: 8.5px;
font-weight: 760;
letter-spacing: .05em;
text-transform: uppercase;
}
.event-block-modal-people b {
color: var(--ink);
font-size: 11.5px;
line-height: 1.4;
}
.event-block-modal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 14px;
}
.event-block-modal-section {
min-width: 0;
padding: 17px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 15px;
background: #fffdf8;
box-shadow: 0 5px 16px rgba(43, 66, 58, .035);
}
.event-block-modal-section > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.event-block-modal-section > header span {
color: var(--coral-deep);
font-size: 8px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.event-block-modal-section > header h5 {
margin: 3px 0 0;
color: var(--green-deep);
font-size: 15px;
line-height: 1.3;
}
.event-block-modal-section > header p {
max-width: 56ch;
margin: 4px 0 0;
color: var(--muted);
font-size: 10px;
line-height: 1.45;
}
.event-block-modal-tasks {
grid-column: 1 / -1;
}
.event-block-task-count {
display: grid;
place-items: center;
min-width: 31px;
height: 31px;
border-radius: 10px;
background: #edf0e8;
color: var(--green-deep);
font-size: 12px;
}
.event-block-task-list {
display: grid;
margin-top: 13px;
border-top: 1px solid rgba(56, 85, 74, .08);
}
.event-block-task {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 66px;
padding: 10px 1px;
border-bottom: 1px solid rgba(56, 85, 74, .08);
}
.event-block-task.is-done {
opacity: .66;
}
.event-block-task-check {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 1.5px solid rgba(56, 85, 74, .25);
border-radius: 8px;
background: #fff;
color: #fff;
}
button.event-block-task-check {
cursor: pointer;
}
button.event-block-task-check:hover {
border-color: var(--coral);
}
.event-block-task-check.is-done {
border-color: var(--sage-deep);
background: var(--sage-deep);
}
.event-block-task-check svg {
width: 14px;
height: 14px;
}
.event-block-task-main {
display: grid;
gap: 3px;
min-width: 0;
padding: 3px 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.event-block-task-main b {
overflow: hidden;
color: var(--ink);
font-size: 14px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-block-task-main:hover b {
color: var(--coral-deep);
}
.event-block-task-main span,
.event-block-task-state {
color: var(--muted);
font-size: 11px;
}
.event-block-task-state {
padding: 6px 9px;
border-radius: 8px;
background: #f2f2eb;
font-weight: 700;
}
.event-block-task-state.is-overdue {
background: #fff0e9;
color: var(--coral-deep);
}
.event-block-task-empty {
display: grid;
gap: 3px;
margin-top: 13px;
padding: 14px;
border: 1px dashed rgba(56, 85, 74, .2);
border-radius: 12px;
background: #faf8f1;
}
.event-block-task-empty b {
color: var(--green-deep);
font-size: 11px;
}
.event-block-task-empty span {
max-width: 64ch;
color: var(--muted);
font-size: 9.5px;
line-height: 1.45;
}
.event-block-add-task {
min-height: 44px;
margin-top: 15px;
padding: 9px 14px;
border-radius: 11px;
font-size: 12.5px;
}
.event-block-modal-maincopy,
.event-block-modal-emptycopy {
margin: 13px 0 0;
color: var(--ink);
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}
.event-block-modal-emptycopy {
color: var(--muted);
}
.event-block-modal-note,
.event-block-modal-live-note {
margin-top: 12px;
padding: 10px 11px;
border-left: 3px solid var(--sage);
border-radius: 0 10px 10px 0;
background: #f5f4ec;
}
.event-block-modal-note p,
.event-block-modal-live-note p {
margin: 3px 0 0;
color: var(--ink);
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
}
.event-block-modal-document {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
margin-top: 12px;
padding: 9px 10px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 10px;
color: var(--green-deep);
text-decoration: none;
}
.event-block-modal-document svg {
width: 17px;
height: 17px;
}
.event-block-modal-document span {
display: grid;
}
.event-block-modal-document b {
overflow: hidden;
font-size: 10.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-block-modal-document i {
font-style: normal;
opacity: .55;
}
.event-block-modal-alert {
display: grid;
gap: 3px;
margin-top: 12px;
padding: 10px 11px;
border-radius: 10px;
background: #fff0e9;
color: var(--coral-deep);
}
.event-block-modal-alert b,
.event-block-modal-alert span {
font-size: 13px;
}
.event-block-modal-alert span {
color: var(--ink);
}
.event-block-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.event-block-modal-actions .small-btn {
min-height: 44px;
padding: 9px 13px;
border-radius: 10px;
font-size: 12.5px;
}
.event-block-modal-actions .small-btn.on {
border-color: var(--sage-deep);
background: #e8eee5;
color: var(--green-deep);
}
.event-block-modal-hint {
margin: 9px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}
.event-block-modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 0 14px 14px;
}
.event-block-modal-foot .btn {
min-height: 44px;
border-radius: 11px;
font-size: 12.5px;
}
#modal-root .modal.event-block-detail-modal {
width: min(1020px, calc(100vw - 32px));
max-width: 1020px;
}
#modal-root .modal.event-block-detail-modal[data-modal-system="2"] > .modal-body {
padding: 0;
background: #fffdf8;
}
#modal-root .modal.event-block-detail-modal[data-modal-system="2"][data-modal-surface="form"] > .modal-head { padding: 16px 28px; background: #f7f5ed; }
.event-block-detail-modal > .modal-head h3 { font-size: 20px; }
.event-block-modal-intro {
padding: 28px 32px 0;
border-bottom: 0;
}
.event-block-modal-kicker span { min-height: 26px; padding: 4px 10px; border-radius: 9px; font-size: 10.5px; }
.event-block-modal-intro h4 { margin-top: 12px; font-size: clamp(28px, 3vw, 36px); }
.event-block-modal-when { margin-top: 8px; font-size: 14px; }
.event-block-readiness {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 24px;
align-items: center;
margin-top: 23px;
padding: 18px 20px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 16px;
background: #f1f3ec;
}
.event-block-readiness.needs-help {
border-color: rgba(193, 83, 54, .22);
background: #fff1ea;
}
.event-block-readiness-copy {
display: grid;
gap: 2px;
}
.event-block-readiness-copy > span,
.event-block-context-panel > span,
.event-block-journal-form label > span {
color: var(--coral-deep);
font-size: 10px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.event-block-readiness-copy b {
color: var(--green-deep);
font-size: 16px;
line-height: 1.35;
}
.event-block-readiness-copy small {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.event-block-readiness-meter {
grid-column: 1;
position: relative;
overflow: hidden;
width: min(380px, 100%);
height: 7px;
border-radius: 99px;
background: rgba(56, 85, 74, .1);
}
.event-block-readiness-meter i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--sage-deep);
}
.event-block-readiness .event-block-modal-actions {
grid-column: 2;
grid-row: 1 / span 2;
justify-content: flex-end;
margin: 0;
}
.event-block-readiness .event-block-modal-hint {
grid-column: 2;
margin: -3px 0 0;
text-align: right;
}
.event-block-modal-flow {
padding: 10px 32px 0;
}
.event-block-flow-section {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 32px;
min-width: 0;
padding: 30px 0;
border-bottom: 1px solid rgba(56, 85, 74, .1);
}
.event-block-flow-section > header {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
align-content: start;
}
.event-block-flow-section > header > span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: #edf0e8;
color: var(--green-deep);
font-size: 12px;
font-weight: 850;
}
.event-block-flow-section > header h5 {
margin: 3px 0 0;
color: var(--green-deep);
font-size: 17px;
line-height: 1.35;
}
.event-block-flow-section > header p {
grid-column: 1 / -1;
margin: 7px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.55;
}
.event-block-flow-content {
min-width: 0;
}
.event-block-flow-empty {
display: grid;
gap: 5px;
padding: 17px 18px;
border: 1px dashed rgba(56, 85, 74, .18);
border-radius: 14px;
background: #faf8f1;
}
.event-block-flow-empty b {
color: var(--green-deep);
font-size: 13px;
}
.event-block-flow-empty span {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.event-block-runbook {
display: grid;
margin: 0;
padding: 0;
border-top: 1px solid rgba(56, 85, 74, .09);
list-style: none;
}
.event-block-runbook-step {
display: grid;
grid-template-columns: 32px 70px minmax(0, 1fr) 36px;
gap: 12px;
align-items: center;
min-height: 68px;
padding: 10px 0;
border-bottom: 1px solid rgba(56, 85, 74, .09);
}
.event-block-runbook-step.is-done {
opacity: .62;
}
.event-block-runbook-check {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 1.5px solid rgba(56, 85, 74, .25);
border-radius: 8px;
background: #fff;
color: #fff;
}
button.event-block-runbook-check {
cursor: pointer;
}
.event-block-runbook-check.is-done {
border-color: var(--sage-deep);
background: var(--sage-deep);
}
.event-block-runbook-check svg {
width: 14px;
height: 14px;
}
.event-block-runbook-time {
color: var(--coral-deep);
font-size: 11.5px;
font-weight: 780;
}
.event-block-runbook-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.event-block-runbook-copy b {
color: var(--ink);
font-size: 14px;
line-height: 1.4;
}
.event-block-runbook-copy small {
color: var(--muted);
font-size: 11.5px;
}
.event-block-inline-remove {
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 16px;
cursor: pointer;
}
.event-block-inline-remove:hover {
background: #fff0e9;
color: var(--coral-deep);
}
.event-block-inline-add {
margin-top: 14px;
}
.event-block-inline-add > summary {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 8px 11px;
border-radius: 10px;
color: var(--green-deep);
font-size: 12.5px;
font-weight: 780;
cursor: pointer;
list-style: none;
}
.event-block-inline-add > summary::-webkit-details-marker {
display: none;
}
.event-block-inline-add > summary:hover,
.event-block-inline-add[open] > summary {
background: #f1f3ec;
}
.event-block-inline-add form {
display: grid;
grid-template-columns: 160px minmax(240px, 1fr) 190px auto;
gap: 12px;
align-items: end;
margin-top: 10px;
padding: 16px;
border: 1px solid rgba(56, 85, 74, .11);
border-radius: 12px;
background: #f8f7f0;
}
.event-block-inline-add label,
.event-block-journal-form label {
display: grid;
gap: 5px;
min-width: 0;
color: var(--muted);
font-size: 11px;
font-weight: 720;
}
.event-block-inline-add input,
.event-block-inline-add select,
.event-block-journal-form textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid rgba(56, 85, 74, .16);
border-radius: 9px;
background: #fffdf8;
color: var(--ink);
font: inherit;
}
.event-block-inline-add input,
.event-block-inline-add select {
min-height: 44px;
padding: 9px 11px;
font-size: 14px;
}
.event-block-inline-add .btn {
min-height: 44px;
padding: 9px 14px;
border-radius: 10px;
font-size: 12.5px;
}
.event-block-inline-add.is-compact form {
grid-template-columns: 170px minmax(220px, 1fr) auto;
}
.event-block-context-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 28px;
}
.event-block-context-panel {
min-width: 0;
padding: 2px 0;
}
.event-block-context-panel:first-child {
grid-column: 1 / -1;
margin-bottom: 23px;
padding-bottom: 23px;
border-bottom: 1px solid rgba(56, 85, 74, .09);
}
.event-block-context-panel h6 {
margin: 6px 0 0;
color: var(--green-deep);
font-size: 15px;
}
.event-block-context-empty {
margin: 11px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.event-block-role-list,
.event-block-material-list {
display: grid;
gap: 9px;
margin-top: 13px;
}
.event-block-role-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 11px;
align-items: center;
}
.event-block-role-avatar,
.event-block-journal-avatar {
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
font-size: 10px !important;
}
.event-block-role-row > span:last-child {
display: grid;
gap: 1px;
}
.event-block-role-row b {
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-block-role-row small {
color: var(--muted);
font-size: 11px;
}
.event-block-material-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
gap: 7px;
align-items: center;
}
.event-block-material-row > a {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
align-items: center;
min-width: 0;
padding: 11px 12px;
border: 1px solid rgba(56, 85, 74, .11);
border-radius: 9px;
color: var(--green-deep);
text-decoration: none;
}
.event-block-material-row > a:hover {
border-color: rgba(224, 122, 95, .32);
background: #fff8f3;
}
.event-block-material-row svg {
width: 18px;
height: 18px;
}
.event-block-material-row a span {
display: grid;
min-width: 0;
}
.event-block-material-row b {
overflow: hidden;
font-size: 12.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-block-material-row small {
color: var(--muted);
font-size: 10.5px;
}
.event-block-journal {
display: grid;
gap: 0;
}
.event-block-journal-entry {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 12px;
padding: 15px 0;
border-bottom: 1px solid rgba(56, 85, 74, .09);
}
.event-block-journal-entry:first-child {
padding-top: 0;
}
.event-block-journal-entry.is-pinned {
grid-template-columns: 36px minmax(0, 1fr);
margin-bottom: 10px;
padding: 13px 14px;
border: 0;
border-radius: 11px;
background: #f1f3ec;
}
.event-block-journal-mark {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: #fffdf8;
color: var(--coral-deep);
font-size: 14px;
font-weight: 850;
}
.event-block-journal-entry > div {
min-width: 0;
}
.event-block-journal-entry header {
display: flex;
flex-wrap: wrap;
gap: 4px 9px;
align-items: baseline;
justify-content: space-between;
}
.event-block-journal-entry header b {
color: var(--ink);
font-size: 13px;
}
.event-block-journal-entry header small,
.event-block-journal-mentioned {
color: var(--muted);
font-size: 10.5px;
}
.event-block-journal-entry p {
margin: 6px 0 0;
color: var(--ink);
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
}
.event-block-journal-mentioned {
display: block;
margin-top: 5px;
color: var(--coral-deep);
}
.event-block-journal-form {
margin-top: 17px;
padding: 16px;
border: 1px solid rgba(56, 85, 74, .11);
border-radius: 12px;
background: #f8f7f0;
}
.event-block-journal-form textarea {
min-height: 106px;
padding: 11px 12px;
resize: vertical;
font-size: 14px;
line-height: 1.5;
}
.event-block-journal-compose {
display: flex;
gap: 12px;
align-items: flex-end;
justify-content: space-between;
margin-top: 12px;
}
.event-block-mention-choices {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
}
.event-block-mention-choices > span {
margin-right: 2px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.event-block-mention-choices button {
min-height: 34px;
padding: 6px 9px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 8px;
background: #fffdf8;
color: var(--green-deep);
font-size: 11.5px;
cursor: pointer;
}
.event-block-mention-choices button.is-on,
.event-block-mention-choices button[aria-pressed="true"] {
border-color: rgba(224, 122, 95, .3);
background: #fff0e9;
color: var(--coral-deep);
}
.event-block-journal-compose .btn {
min-height: 44px;
flex: 0 0 auto;
padding: 9px 14px;
border-radius: 10px;
font-size: 12.5px;
}
.event-block-modal-alert {
margin: 0 0 12px;
}
.event-block-modal-maincopy {
margin-top: 9px;
}
.event-block-modal-note {
margin-top: 10px;
}
.event-block-modal-foot {
padding: 17px 32px 21px;
border-top: 1px solid rgba(56, 85, 74, .09);
background: #fffdf8;
}
.event-block-modal-foot .btn:last-child { border-color: rgba(224, 122, 95, .24); background: #fff2eb; color: var(--coral-deep); }
.event-block-modal,
.event-block-modal * {
overflow-wrap: anywhere;
}
.task-event-block-context {
display: flex;
align-items: flex-start;
gap: 11px;
margin: 0 0 15px;
padding: 12px 13px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 12px;
background: #f5f4ec;
}
.task-event-block-context-icon {
display: grid;
place-items: center;
width: 31px;
height: 31px;
flex: 0 0 31px;
border-radius: 10px;
background: #e8eee5;
color: var(--green-deep);
}
.task-event-block-context-icon svg {
width: 17px;
height: 17px;
}
.task-event-block-context div {
display: grid;
gap: 2px;
}
.task-event-block-context small {
color: var(--coral-deep);
font-size: 8px;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.task-event-block-context b {
color: var(--green-deep);
font-size: 11.5px;
}
.task-event-block-context p {
margin: 1px 0 0;
color: var(--muted);
font-size: 9px;
line-height: 1.4;
}
.project-workspace-v2 .project-plan-support {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.project-workspace-v2 .project-plan-support .project-editions-card {
grid-column: 1 / -1;
margin-top: 0;
}
.project-workspace-v2 .pd-gantt {
overflow: hidden;
padding: 17px 18px;
}
.project-workspace-v2 .pd-gantt > .panel-title {
margin: 0 0 12px;
padding: 0 0 9px;
}
.project-workspace-v2 .gantt-container {
margin-top: 0;
padding: 2px 2px 4px;
border-radius: 12px;
background: transparent;
}
.project-workspace-v2 .gantt-row {
min-width: 660px;
height: auto;
min-height: 30px;
margin-bottom: 5px;
}
.project-workspace-v2 .gantt-label {
width: 190px;
flex-basis: 190px;
padding-right: 14px;
font-size: 11.5px;
line-height: 1.25;
text-overflow: ellipsis;
}
.project-workspace-v2 .gantt-track {
height: 21px;
border-radius: 7px;
}
.project-workspace-v2 .gantt-month {
overflow: hidden;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-workspace-v2 .project-budget-card.is-empty {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
min-height: 112px;
}
.project-workspace-v2 .project-budget-empty-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(169, 184, 164, .15);
color: var(--green-deep);
}
.project-workspace-v2 .project-budget-empty-icon svg {
width: 19px;
height: 19px;
}
.project-workspace-v2 .project-budget-card.is-empty .panel-title,
.project-workspace-v2 .project-budget-card.is-empty .panel-note {
margin: 0;
padding: 0;
border: 0;
}
.project-workspace-v2 .project-budget-card.is-empty .panel-note {
margin-top: 3px;
}
.project-workspace-v2 .project-resource-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
gap: 15px;
align-items: start;
}
.project-workspace-v2 .drive-card {
padding: 18px;
}
.project-workspace-v2 .drive-card-head {
gap: 12px;
padding-bottom: 12px;
}
.project-workspace-v2 .drive-connection-row {
display: flex;
align-items: center;
min-height: 22px;
margin-top: 5px;
}
.project-workspace-v2 .drive-connection-row .drive-conn {
display: inline-flex;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 10.5px;
line-height: 1.35;
}
.project-workspace-v2 .drive-connection-row .drive-conn::before {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: currentColor;
content: "";
opacity: .75;
}
.project-workspace-v2 .drive-connection-row .drive-conn > span {
display: none;
}
.project-workspace-v2 .project-docs-inline {
margin-top: 14px;
padding: 13px;
border: 1px solid rgba(56, 85, 74, .09);
border-radius: 14px;
background: rgba(246, 241, 231, .42);
}
.project-workspace-v2 .project-docs-head {
margin-bottom: 9px;
padding-bottom: 8px;
}
.project-workspace-v2 .drive-files-region {
margin-top: 15px;
padding-top: 15px;
}
.project-workspace-v2 .drive-group.is-collapsible {
overflow: hidden;
border-top: 1px solid var(--line);
}
.project-workspace-v2 .drive-group.is-collapsible > summary {
margin: 0;
padding: 14px 2px 10px;
cursor: pointer;
list-style: none;
}
.project-workspace-v2 .drive-group.is-collapsible > summary::-webkit-details-marker {
display: none;
}
.project-workspace-v2 .drive-group-chevron {
color: var(--muted);
font-size: 17px;
font-style: normal;
transition: transform .16s ease;
}
.project-workspace-v2 .drive-group.is-collapsible[open] .drive-group-chevron {
transform: rotate(180deg);
}
.project-workspace-v2 .drive-group-body {
padding-bottom: 2px;
}
.project-workspace-v2 .drive-file-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.project-workspace-v2 .project-resource-side .project-team-card {
padding: 17px;
}
.project-workspace-v2 .project-memory-board {
border-radius: 18px;
}
.project-workspace-v2 .project-memory-board > .meeting-card {
padding: 18px 19px !important;
}
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty {
padding-block: 13px !important;
}
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty .linked-decisions-head {
align-items: center;
}
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty .linked-decisions-head h3 {
margin: 2px 0 0;
font-size: 15px;
}
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty .linked-decisions-head p,
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty .linked-decisions-list {
display: none;
}
.project-workspace-v2 .project-records-notes-grid {
grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
}
.project-workspace-v2 .project-static-note {
display: grid;
gap: 5px;
margin-bottom: 14px;
padding: 12px 13px;
border-left: 3px solid var(--sage-deep);
border-radius: 0 12px 12px 0;
background: rgba(169, 184, 164, .11);
}
.project-workspace-v2 .project-static-note p {
margin: 0;
color: var(--ink);
font-size: 12px;
line-height: 1.5;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.project-workspace-v2 .project-comment-thread {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.project-workspace-v2 .project-comment-thread-label {
margin-bottom: 8px;
color: var(--muted);
}
.project-workspace-v2 .project-memory-comment-form {
margin-top: 12px;
}
@media (max-width: 980px) {
.project-workspace-v2 .project-hero-top {
grid-template-columns: minmax(0, 1fr);
gap: 15px;
}
.project-workspace-v2 .project-hero-actions {
padding-left: 77px;
}
.project-workspace-v2 .project-hero-status-rail {
grid-template-columns: minmax(0, 1fr);
}
.project-workspace-v2 .project-hero-direction {
min-height: 64px;
border-bottom: 1px solid rgba(255, 255, 255, .085);
}
.project-workspace-v2 .project-hero-rail-links {
border-left: 0;
}
.project-workspace-v2 .project-main-grid,
.project-workspace-v2 .project-resource-grid {
grid-template-columns: minmax(0, 1fr) minmax(245px, .58fr);
}
.project-workspace-v2 .event-overview-strip {
grid-template-columns: 165px minmax(0, 1fr) auto;
}
.project-workspace-v2 .event-overview-facts {
grid-column: 1 / 3;
}
}
@media (max-width: 760px) {
.project-workspace-v2 {
padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px));
}
.project-workspace-v2 .project-hero-card {
border-radius: 20px;
}
.project-workspace-v2 .project-hero-top {
padding: 18px 17px 14px;
}
.project-workspace-v2 .project-hero-main {
grid-template-columns: 50px minmax(0, 1fr);
gap: 12px;
}
.project-workspace-v2 .project-hero-avatar {
width: 50px !important;
height: 50px !important;
flex-basis: 50px !important;
border-radius: 15px !important;
}
.project-workspace-v2 .project-hero-title {
font-size: clamp(25px, 8vw, 32px);
}
.project-workspace-v2 .project-hero-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
width: 100%;
padding-left: 62px;
}
.project-workspace-v2 .project-hero-actions .project-chat-shortcut {
width: 100%;
}
.project-workspace-v2 .project-hero-more > summary {
min-width: 76px;
}
.project-workspace-v2 .project-hero-more {
justify-self: end;
}
.project-workspace-v2 .project-hero-status-rail {
margin: 0;
padding: 0;
border-radius: 0 0 19px 19px;
}
.project-workspace-v2 .project-hero-rail-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-workspace-v2 .project-hero-rail-links > button {
min-height: 62px;
border-bottom: 1px solid rgba(255, 255, 255, .085);
}
.project-workspace-v2 .project-hero-rail-links > button:nth-child(2n) {
border-right: 0;
}
.project-workspace-v2 .project-hero-rail-links > button:nth-last-child(-n + 2) {
border-bottom: 0;
}
.project-workspace-v2 .project-tabs.project-tabs-refined {
display: flex;
gap: 4px;
width: auto;
margin-inline: -4px;
padding: 5px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
}
.project-workspace-v2 .project-tabs.project-tabs-refined::-webkit-scrollbar {
display: none;
}
.project-workspace-v2 .project-tabs-refined .project-tab {
flex: 0 0 auto;
min-width: 92px;
min-height: 40px;
}
.project-workspace-v2 .project-section {
margin-top: 16px;
}
.project-workspace-v2 .project-main-grid,
.project-workspace-v2 .project-resource-grid,
.project-workspace-v2 .project-plan-support,
.project-workspace-v2 .project-records-notes-grid {
grid-template-columns: minmax(0, 1fr);
}
.project-workspace-v2 .project-plan-support .project-editions-card {
grid-column: auto;
}
.project-workspace-v2 .project-agreements-preview-list {
grid-template-columns: minmax(0, 1fr);
}
.project-workspace-v2 .event-overview-strip {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
}
.project-workspace-v2 .event-overview-copy,
.project-workspace-v2 .event-overview-facts {
grid-column: 1 / -1;
}
.project-workspace-v2 .event-edit-menu {
grid-column: 2;
grid-row: 1;
}
.project-workspace-v2 .event-overview-facts {
justify-content: flex-start;
}
.project-workspace-v2 .drive-card-head {
display: grid;
}
.project-workspace-v2 .drive-actions {
justify-content: flex-start;
}
}
@media (max-width: 520px) {
.project-workspace-v2 .project-hero-top {
padding-inline: 14px;
}
.project-workspace-v2 .project-hero-main {
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
}
.project-workspace-v2 .project-hero-avatar {
width: 44px !important;
height: 44px !important;
flex-basis: 44px !important;
border-radius: 13px !important;
}
.project-workspace-v2 .project-hero-meta > .pill,
.project-workspace-v2 .project-hero-pills {
display: none;
}
.project-workspace-v2 .project-hero-actions {
padding-left: 54px;
}
.project-workspace-v2 .project-hero-more-popover {
right: -1px;
width: min(255px, calc(100vw - 32px));
}
.project-workspace-v2 .project-hero-direction b {
white-space: normal;
}
.project-workspace-v2 .project-next-work {
padding: 15px;
}
.project-workspace-v2 .project-next-actions {
grid-template-columns: minmax(0, 1fr);
}
.project-workspace-v2 .project-next-head .btn {
width: 100%;
}
.project-workspace-v2 .project-watch-row b {
max-width: 118px;
}
.project-workspace-v2 .project-agreements-preview > header {
display: grid;
}
.project-workspace-v2 .project-agreements-preview > header .small-btn {
width: auto;
}
.project-workspace-v2 .event-overview-strip {
padding: 13px;
}
.project-workspace-v2 .event-edit-menu-popover {
position: fixed;
top: auto;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
left: 12px;
width: auto;
}
.project-workspace-v2 .event-overview-facts span {
flex: 1 1 0;
min-width: 0;
}
.project-workspace-v2 .project-budget-card.is-empty {
grid-template-columns: 38px minmax(0, 1fr);
}
.project-workspace-v2 .project-budget-card.is-empty .small-btn {
grid-column: 1 / -1;
width: 100%;
}
.project-workspace-v2 .drive-file-grid {
grid-template-columns: minmax(0, 1fr);
}
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty .linked-decisions-head {
display: grid;
}
.project-workspace-v2 .project-memory-board > .meeting-card.is-empty .small-btn {
width: 100%;
}
}
@media (max-width: 700px) {
.project-workspace-v2 .emoment-title-row {
display: grid;
gap: 3px;
}
#modal-root .modal.event-block-detail-modal {
width: 100%;
max-width: none;
max-height: calc(100dvh - env(safe-area-inset-top, 0px));
margin: 0;
border-radius: 22px 22px 0 0;
}
.event-block-detail-modal > .modal-head {
min-height: 62px;
padding: 11px 14px 12px 18px;
border-bottom: 1px solid rgba(56, 85, 74, .1);
background: #f7f5ed;
}
.event-block-detail-modal > .modal-head h3 {
font-size: 19px;
}
.event-block-modal-intro {
padding: 22px 18px 0;
}
.event-block-modal-intro h4 {
margin-top: 10px;
font-size: clamp(27px, 8vw, 32px);
}
.event-block-modal-when {
font-size: 13px;
}
.event-block-modal-grid {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 10px;
}
.event-block-modal-tasks {
grid-column: auto;
}
.event-block-modal-section {
padding: 14px;
}
.event-block-task {
grid-template-columns: 32px minmax(0, 1fr);
}
.event-block-task-state {
grid-column: 2;
justify-self: start;
margin-top: -4px;
}
.event-block-task-main b {
white-space: normal;
}
.event-block-add-task,
.event-block-modal-actions .small-btn {
width: 100%;
}
.event-block-modal-foot {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 0 10px 10px;
}
.event-block-modal-foot .btn {
width: 100%;
}
.event-block-readiness {
grid-template-columns: minmax(0, 1fr);
gap: 13px;
margin-top: 20px;
padding: 16px;
}
.event-block-readiness .event-block-modal-actions,
.event-block-readiness .event-block-modal-hint {
grid-column: 1;
grid-row: auto;
justify-content: stretch;
text-align: left;
}
.event-block-readiness .event-block-modal-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.event-block-readiness .event-block-modal-actions .small-btn {
width: 100%;
min-height: 46px;
white-space: normal;
}
.event-block-modal-flow {
padding: 5px 18px 0;
}
.event-block-flow-section {
grid-template-columns: minmax(0, 1fr);
gap: 19px;
padding: 26px 0;
}
.event-block-flow-section > header {
grid-template-columns: 34px minmax(0, 1fr);
}
.event-block-flow-section > header p {
font-size: 13px;
}
.event-block-runbook-step {
grid-template-columns: 32px minmax(0, 1fr) 40px;
grid-template-rows: auto auto;
gap: 3px 10px;
min-height: 76px;
padding: 12px 0;
}
.event-block-runbook-check {
grid-column: 1;
grid-row: 1 / span 2;
}
.event-block-runbook-time {
grid-column: 2;
grid-row: 1;
align-self: end;
}
.event-block-runbook-copy {
grid-column: 2;
grid-row: 2;
}
.event-block-inline-remove {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
width: 40px;
height: 40px;
}
.event-block-inline-add form,
.event-block-inline-add.is-compact form {
grid-template-columns: minmax(0, 1fr);
gap: 13px;
padding: 15px;
}
.event-block-inline-add form .btn {
width: 100%;
min-height: 48px;
}
.event-block-inline-add label,
.event-block-journal-form label {
font-size: 12px;
}
.event-block-inline-add input,
.event-block-inline-add select,
.event-block-journal-form textarea {
font-size: 16px;
}
.event-block-context-grid {
grid-template-columns: minmax(0, 1fr);
gap: 21px;
}
.event-block-context-panel:first-child {
grid-column: auto;
margin-bottom: 0;
}
.event-block-context-panel + .event-block-context-panel {
padding-top: 21px;
border-top: 1px solid rgba(56, 85, 74, .09);
}
.event-block-context-panel h6 {
font-size: 16px;
}
.event-block-modal-maincopy,
.event-block-context-empty {
font-size: 14px;
}
.event-block-role-avatar,
.event-block-journal-avatar {
width: 40px !important;
height: 40px !important;
flex-basis: 40px !important;
}
.event-block-role-row {
grid-template-columns: 40px minmax(0, 1fr);
}
.event-block-material-row {
grid-template-columns: minmax(0, 1fr) 40px;
}
.event-block-journal-compose {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 13px;
}
.event-block-journal-compose .btn {
width: 100%;
min-height: 48px;
font-size: 14px;
}
.event-block-modal-foot {
gap: 9px;
padding: 13px 18px calc(15px + env(safe-area-inset-bottom, 0px));
}
.event-block-modal-foot .btn {
min-height: 48px;
font-size: 14px;
}
}
@media (max-width: 380px) {
.event-block-readiness .event-block-modal-actions { grid-template-columns: minmax(0, 1fr); }
.event-block-modal-intro, .event-block-modal-flow { padding-right: 15px; padding-left: 15px; }
.event-block-modal-foot { padding-right: 15px; padding-left: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.project-workspace-v2 .project-hero-more[open] > summary span,
.project-workspace-v2 .event-edit-menu[open] > summary span,
.project-workspace-v2 .drive-group-chevron {
transition: none;
}
}
.project-workspace-v2 .emoment[data-open-event-block-card] {
cursor: pointer;
}
.project-workspace-v2 .emoment[data-open-event-block-card]:focus-within {
border-color: rgba(224, 122, 95, .38);
}
.project-workspace-v2 .emoment-workhint {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
max-width: 150px;
min-height: 30px;
padding: 3px 1px 3px 7px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--muted);
cursor: pointer;
}
.project-workspace-v2 .emoment-workhint:hover {
color: var(--coral-deep);
}
.project-workspace-v2 .emoment-workhint:focus-visible {
outline: 3px solid rgba(224, 122, 95, .22);
outline-offset: 2px;
}
.project-workspace-v2 .emoment-workhint span {
overflow: hidden;
max-width: 118px;
font-size: 10.5px;
font-weight: 680;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-workspace-v2 .emoment-workhint i {
font-size: 17px;
font-style: normal;
opacity: .55;
transition: transform var(--motion-base, .18s) ease;
}
.project-workspace-v2 .emoment-workhint:hover i {
transform: translateX(2px);
}
.event-block-supply-overview {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 11px 18px;
align-items: end;
margin-bottom: 18px;
padding: 14px 16px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 12px;
background: #f4f5ee;
}
.event-block-supply-overview > div {
display: grid;
gap: 3px;
min-width: 0;
}
.event-block-supply-overview > div > b {
color: var(--green-deep);
font-size: 13.5px;
}
.event-block-supply-overview > div > span {
color: var(--muted);
font-size: 11.5px;
}
.event-block-supply-overview strong {
color: var(--ink);
font-size: 12.5px;
}
.event-block-supply-overview progress {
grid-column: 1 / -1;
width: 100%;
height: 5px;
overflow: hidden;
border: 0;
border-radius: 999px;
background: rgba(56, 85, 74, .1);
appearance: none;
}
.event-block-supply-overview progress::-webkit-progress-bar {
border-radius: 999px;
background: rgba(56, 85, 74, .1);
}
.event-block-supply-overview progress::-webkit-progress-value {
border-radius: 999px;
background: var(--sage-deep);
}
.event-block-supply-overview progress::-moz-progress-bar {
border-radius: 999px;
background: var(--sage-deep);
}
.event-block-supply-groups {
display: grid;
gap: 14px;
}
.event-block-supply-group {
overflow: hidden;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 13px;
background: #fffdf8;
}
.event-block-supply-group > header {
display: flex;
gap: 10px;
align-items: baseline;
justify-content: space-between;
min-height: 42px;
padding: 10px 13px;
border-bottom: 1px solid rgba(56, 85, 74, .1);
background: #f7f7f0;
}
.event-block-supply-group.is-buy > header {
box-shadow: inset 3px 0 0 rgba(224, 122, 95, .75);
}
.event-block-supply-group.is-bring > header {
box-shadow: inset 3px 0 0 rgba(84, 122, 94, .68);
}
.event-block-supply-group.is-borrow > header {
box-shadow: inset 3px 0 0 rgba(184, 155, 61, .6);
}
.event-block-supply-group > header b {
color: var(--green-deep);
font-size: 13.5px;
}
.event-block-supply-group > header span {
color: var(--muted);
font-size: 10.5px;
}
.event-block-supply-group > header span b {
color: var(--ink);
font-size: 11px;
}
.event-block-supply-list {
display: grid;
}
.event-block-supply-item {
display: grid;
grid-template-columns: 68px minmax(0, 1fr) auto auto;
gap: 12px;
align-items: center;
min-width: 0;
min-height: 78px;
padding: 10px 12px;
border-bottom: 1px solid rgba(56, 85, 74, .09);
transition: background-color var(--motion-base, .18s) ease;
}
.event-block-supply-item:last-child {
border-bottom: 0;
}
.event-block-supply-item.is-secured {
background: rgba(245, 247, 240, .72);
}
.event-block-supply-item.is-packed {
background: #edf2e9;
}
.event-block-supply-main {
display: grid;
gap: 3px;
min-width: 0;
}
.event-block-supply-main b {
overflow: hidden;
color: var(--ink);
font-size: 14.5px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-block-supply-main small {
overflow: hidden;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-block-supply-primary,
.event-block-supply-secondary {
min-width: 0;
}
.event-block-supply-state-btn {
display: inline-grid;
grid-template-columns: 20px auto;
gap: 7px;
align-items: center;
min-height: 42px;
padding: 7px 9px;
border: 1px solid rgba(56, 85, 74, .13);
border-radius: 9px;
background: #fffdf8;
color: var(--muted);
font-size: 11px;
font-weight: 720;
}
.event-block-supply-state-btn.is-primary {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 3px;
width: 68px;
min-height: 58px;
padding: 6px 4px;
font-size: 10px;
line-height: 1.1;
}
.event-block-supply-state-btn.is-secondary {
min-width: 92px;
}
button.event-block-supply-state-btn {
cursor: pointer;
}
button.event-block-supply-state-btn:hover {
border-color: rgba(224, 122, 95, .34);
background: #fff8f3;
}
button.event-block-supply-state-btn:focus-visible {
outline: 3px solid rgba(224, 122, 95, .24);
outline-offset: 2px;
}
.event-block-supply-state-btn.is-on {
border-color: rgba(84, 122, 94, .26);
background: #edf2e9;
color: var(--green-deep);
}
.event-block-supply-state-btn.is-primary.is-on {
border-color: rgba(84, 122, 94, .34);
background: #e4eddf;
}
.event-block-supply-checkbox {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 1.5px solid rgba(56, 85, 74, .25);
border-radius: 6px;
background: #fff;
color: #fff;
}
.event-block-supply-state-btn.is-primary .event-block-supply-checkbox {
width: 25px;
height: 25px;
border-radius: 7px;
}
.event-block-supply-state-btn.is-on .event-block-supply-checkbox {
border-color: var(--sage-deep);
background: var(--sage-deep);
}
.event-block-supply-checkbox svg {
width: 11px;
height: 11px;
}
.event-block-supply-actions {
display: flex;
gap: 5px;
align-items: center;
justify-content: flex-end;
}
.event-block-supply-task {
display: grid;
gap: 1px;
min-height: 40px;
padding: 6px 9px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 9px;
background: #f7f7f0;
color: var(--green-deep);
font-size: 10.5px;
font-weight: 760;
cursor: pointer;
}
.event-block-supply-task:hover {
border-color: rgba(224, 122, 95, .32);
background: #fff8f3;
color: var(--coral-deep);
}
.event-block-supply-task.is-linked {
min-width: 66px;
text-align: left;
}
.event-block-supply-task.is-linked span {
color: var(--muted);
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
}
.event-block-supply-task.is-linked b {
font-size: 10.5px;
}
.event-block-supply-task.is-done {
background: #edf2e9;
}
.event-block-supply-expense {
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 36px;
padding: 6px 9px;
border: 1px solid rgba(224, 122, 95, .18);
border-radius: 9px;
background: #fff7f2;
color: var(--coral-deep);
cursor: pointer;
}
.event-block-supply-expense:hover {
border-color: rgba(224, 122, 95, .4);
background: #ffefe7;
}
.event-block-supply-expense > span {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 7px;
background: #f4ded3;
font-size: 13px;
font-weight: 800;
}
.event-block-supply-expense > b {
font-size: 10.5px;
font-weight: 760;
white-space: nowrap;
}
.event-block-supply-expense.is-linked {
border-color: rgba(84, 122, 94, .18);
background: #edf2e9;
color: var(--green-deep);
}
.event-block-supply-add form {
grid-template-columns: 140px minmax(0, 1fr) 125px;
}
.event-block-supply-add form > label:nth-of-type(4) {
grid-column: 1 / 3;
}
.event-block-supply-add form > .btn {
grid-column: 3;
}
@media (min-width: 701px) and (max-width: 860px) {
.event-block-supply-add form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-block-supply-add form > label.is-wide,
.event-block-supply-add form > .btn {
grid-column: 1 / -1;
}
.event-block-supply-add form > label:nth-of-type(4) {
grid-column: auto;
}
}
@media (max-width: 700px) {
.project-workspace-v2 .emoment-workhint {
justify-self: start;
max-width: min(100%, 220px);
min-height: 32px;
padding-left: 0;
}
.project-workspace-v2 .emoment-workhint span {
max-width: 180px;
}
.event-block-supply-overview {
gap: 10px;
margin-bottom: 20px;
padding: 13px 14px;
}
.event-block-supply-group > header {
align-items: center;
min-height: 46px;
padding: 10px 12px;
}
.event-block-supply-item {
grid-template-columns: 64px minmax(0, 1fr);
gap: 9px 12px;
min-height: 92px;
padding: 13px 12px;
}
.event-block-supply-primary {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
}
.event-block-supply-main {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.event-block-supply-secondary {
grid-column: 2;
grid-row: 2;
}
.event-block-supply-state-btn.is-primary {
width: 64px;
min-height: 64px;
}
.event-block-supply-state-btn.is-secondary {
min-width: 104px;
min-height: 44px;
}
.event-block-supply-main b {
font-size: 15px;
white-space: normal;
}
.event-block-supply-main small {
font-size: 12px;
white-space: normal;
}
.event-block-supply-actions {
grid-column: 1 / -1;
grid-row: 3;
justify-content: space-between;
}
.event-block-supply-task {
min-height: 44px;
padding-right: 12px;
padding-left: 12px;
font-size: 12px;
}
.event-block-supply-task {
flex: 1 1 auto;
text-align: left;
}
.event-block-supply-actions .event-block-inline-remove {
grid-column: auto;
grid-row: auto;
width: 44px;
height: 44px;
}
.event-block-supply-add form {
grid-template-columns: minmax(0, 1fr);
}
.event-block-supply-add form > label.is-wide,
.event-block-supply-add form > label:nth-of-type(4),
.event-block-supply-add form > .btn {
grid-column: auto;
}
}
@media (max-width: 380px) {
.event-block-supply-overview > div > span {
font-size: 11px;
}
.event-block-supply-group > header {
align-items: flex-start;
}
}
.event-block-tabs {
position: sticky;
top: 0;
z-index: 6;
display: flex;
gap: 4px;
overflow-x: auto;
padding: 20px 32px 0;
border-bottom: 1px solid rgba(56, 85, 74, .11);
background: rgba(255, 253, 248, .97);
scrollbar-width: none;
}
.event-block-tabs::-webkit-scrollbar {
display: none;
}
.event-block-tab {
position: relative;
display: inline-flex;
flex: 0 0 auto;
gap: 7px;
align-items: center;
min-height: 47px;
padding: 8px 13px 11px;
border: 0;
background: transparent;
color: var(--muted);
font-size: 12.5px;
font-weight: 730;
white-space: nowrap;
cursor: pointer;
}
.event-block-tab::after {
position: absolute;
right: 9px;
bottom: -1px;
left: 9px;
height: 3px;
border-radius: 3px 3px 0 0;
background: transparent;
content: "";
}
.event-block-tab:hover {
color: var(--green-deep);
}
.event-block-tab:focus-visible {
border-radius: 9px;
outline: 3px solid rgba(224, 122, 95, .2);
outline-offset: -3px;
}
.event-block-tab.is-active {
color: var(--green-deep);
}
.event-block-tab.is-active::after {
background: var(--coral);
}
.event-block-tab small {
display: grid;
place-items: center;
min-width: 21px;
height: 21px;
padding: 0 6px;
border-radius: 99px;
background: #eff1e9;
color: var(--muted);
font-size: 9.5px;
font-weight: 820;
}
.event-block-tab.is-active small {
background: #f7e7df;
color: var(--coral-deep);
}
.event-block-tab-content {
min-height: min(510px, 58dvh);
padding: 0 32px 24px;
}
.event-block-tab-panel {
min-width: 0;
padding: 28px 0 12px;
}
.event-block-tab-panel[hidden] {
display: none;
}
.event-block-panel-heading {
display: grid;
gap: 4px;
max-width: 720px;
margin-bottom: 23px;
}
.event-block-panel-heading > span,
.event-block-support-journal > span {
color: var(--coral-deep);
font-size: 10px;
font-weight: 850;
letter-spacing: .09em;
text-transform: uppercase;
}
.event-block-panel-heading h5 {
margin: 0;
color: var(--green-deep);
font-size: 23px;
line-height: 1.25;
}
.event-block-panel-heading p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.event-block-tab-panel .event-block-readiness {
margin-top: 0;
}
.event-block-context-grid.is-overview {
grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
gap: 30px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid rgba(56, 85, 74, .1);
}
.event-block-context-grid.is-overview .event-block-context-panel:first-child {
grid-column: auto;
margin: 0;
padding: 2px 0;
border: 0;
}
.event-block-context-grid.is-overview .event-block-context-panel + .event-block-context-panel {
padding-left: 28px;
border-left: 1px solid rgba(56, 85, 74, .1);
}
.event-block-runbook-guide {
display: grid;
grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
gap: 10px;
align-items: center;
margin-bottom: 19px;
padding: 14px 16px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 13px;
background: #f4f5ee;
}
.event-block-runbook-guide > div {
display: grid;
gap: 2px;
}
.event-block-runbook-guide b {
color: var(--green-deep);
font-size: 12.5px;
}
.event-block-runbook-guide span {
color: var(--muted);
font-size: 11px;
line-height: 1.4;
}
.event-block-runbook-guide > i {
color: rgba(56, 85, 74, .35);
font-size: 18px;
font-style: normal;
text-align: center;
}
.event-block-tab-panel .event-block-runbook {
gap: 8px;
border: 0;
}
.event-block-tab-panel .event-block-runbook-step {
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 13px;
min-height: 76px;
padding: 12px 13px;
border: 1px solid rgba(56, 85, 74, .1);
border-radius: 12px;
background: #fffdf8;
}
.event-block-tab-panel .event-block-runbook-step.is-done {
background: #f2f5ed;
opacity: .72;
}
.event-block-tab-panel .event-block-runbook-check {
width: 36px;
height: 36px;
border-radius: 10px;
}
button.event-block-runbook-check:hover {
border-color: rgba(224, 122, 95, .5);
background: #fff7f2;
}
button.event-block-runbook-check:focus-visible,
.event-block-inline-remove:focus-visible {
outline: 3px solid rgba(224, 122, 95, .22);
outline-offset: 2px;
}
.event-block-tab-panel .event-block-runbook-copy {
gap: 3px;
}
.event-block-tab-panel .event-block-runbook-time {
color: var(--coral-deep);
font-size: 10.5px;
font-weight: 810;
letter-spacing: .02em;
}
.event-block-tab-panel .event-block-runbook-copy b {
font-size: 14.5px;
line-height: 1.35;
}
.event-block-tab-panel .event-block-runbook-copy small {
font-size: 11.5px;
}
.event-block-runbook-actions {
display: flex;
gap: 7px;
align-items: center;
justify-content: flex-end;
}
.event-block-step-to-task {
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 38px;
padding: 7px 10px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 9px;
background: #f4f5ee;
color: var(--green-deep);
font-size: 10.5px;
font-weight: 760;
white-space: nowrap;
cursor: pointer;
}
.event-block-step-to-task:hover {
border-color: rgba(224, 122, 95, .32);
background: #fff7f2;
color: var(--coral-deep);
}
.event-block-step-to-task:focus-visible,
.event-block-supply-expense:focus-visible {
outline: 3px solid rgba(224, 122, 95, .22);
outline-offset: 2px;
}
.event-block-runbook-empty > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 6px;
}
.event-block-runbook-empty i {
padding: 5px 8px;
border-radius: 8px;
background: #eff1e9;
color: var(--green-deep);
font-size: 10px;
font-style: normal;
font-weight: 720;
}
.event-block-runbook-empty i + i::before {
margin-right: 7px;
color: rgba(56, 85, 74, .35);
content: "→";
}
.event-block-runbook-add > summary {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 1px 11px;
width: fit-content;
min-height: 50px;
padding: 7px 13px 7px 8px;
border: 1px solid rgba(56, 85, 74, .13);
border-radius: 12px;
background: #f7f7f0;
}
.event-block-runbook-add > summary > span {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #e7ece2;
color: var(--green-deep);
font-size: 19px;
}
.event-block-runbook-add > summary b {
align-self: end;
color: var(--green-deep);
font-size: 12.5px;
}
.event-block-runbook-add > summary small {
align-self: start;
color: var(--muted);
font-size: 10px;
font-weight: 600;
}
.event-block-runbook-add[open] > summary {
border-color: rgba(224, 122, 95, .25);
background: #fff7f2;
}
.event-block-runbook-add form {
grid-template-columns: minmax(240px, 1fr) 170px 190px auto;
}
.event-block-add-task {
display: inline-flex;
width: auto;
min-height: 42px;
margin-top: 16px;
}
.event-block-support-grid {
display: grid;
grid-template-columns: minmax(230px, .68fr) minmax(0, 1.32fr);
gap: 30px;
align-items: start;
}
.event-block-support-grid .event-block-context-panel,
.event-block-support-journal {
min-width: 0;
padding: 0;
}
.event-block-support-grid .event-block-context-panel:first-child {
grid-column: auto;
margin: 0;
padding: 0;
border: 0;
}
.event-block-support-journal {
padding-left: 30px;
border-left: 1px solid rgba(56, 85, 74, .1);
}
.event-block-support-journal h6 {
margin: 6px 0 15px;
color: var(--green-deep);
font-size: 15px;
}
.event-block-supply-task,
.event-block-supply-task.is-linked {
display: inline-flex;
gap: 6px;
align-items: center;
min-width: 0;
min-height: 36px;
padding: 6px 9px;
text-align: left;
white-space: nowrap;
}
.event-block-supply-task > span,
.event-block-supply-task.is-linked > span {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 7px;
background: #e9ede4;
color: var(--green-deep);
font-size: 13px;
font-weight: 800;
line-height: 1;
text-transform: none;
}
.event-block-supply-task > b,
.event-block-supply-task.is-linked > b {
font-size: 10.5px;
font-weight: 760;
}
.event-block-supply-task.is-done > span {
background: #dce7d7;
}
.event-block-material-add > summary {
min-height: 42px;
padding: 8px 11px;
border-radius: 10px;
}
.event-block-material-picker {
overflow: hidden;
margin-top: 10px;
border: 1px solid rgba(56, 85, 74, .11);
border-radius: 12px;
background: #fffdf8;
}
.event-block-material-source-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 5px;
border-bottom: 1px solid rgba(56, 85, 74, .1);
background: #f4f5ee;
}
.event-block-material-source-tabs button {
min-height: 38px;
padding: 6px 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 10.5px;
font-weight: 760;
cursor: pointer;
}
.event-block-material-source-tabs button.is-active {
background: #fffdf8;
color: var(--green-deep);
box-shadow: 0 1px 4px rgba(35, 57, 49, .08);
}
.event-block-material-source-tabs button:disabled {
cursor: not-allowed;
opacity: .42;
}
.event-block-material-source-panel {
padding: 13px;
}
.event-block-material-source-panel[hidden] {
display: none;
}
.event-block-material-source-panel form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin: 0;
}
.event-block-material-source-panel form > * {
grid-column: 1;
}
.event-block-material-source-panel form label {
display: grid;
gap: 5px;
color: var(--green-deep);
font-size: 10.5px;
font-weight: 740;
}
.event-block-material-source-panel input,
.event-block-material-source-panel select {
width: 100%;
min-width: 0;
min-height: 44px;
box-sizing: border-box;
}
.event-block-material-source-panel .btn {
width: 100%;
min-height: 42px;
}
.event-block-material-source-panel .hint {
margin: 0;
color: var(--muted);
font-size: 10.5px;
font-weight: 560;
line-height: 1.45;
}
.event-block-drive-load {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
align-items: center;
width: 100%;
min-height: 62px;
padding: 10px;
border: 1px solid rgba(56, 85, 74, .11);
border-radius: 10px;
background: #f7f7f0;
color: var(--green-deep);
text-align: left;
cursor: pointer;
}
.event-block-drive-load > svg {
width: 23px;
height: 23px;
margin: auto;
}
.event-block-drive-load > span {
display: grid;
gap: 2px;
}
.event-block-drive-load b {
font-size: 12px;
}
.event-block-drive-load small,
.event-block-material-empty span {
color: var(--muted);
font-size: 10.5px;
line-height: 1.4;
}
.event-block-material-empty {
display: grid;
gap: 5px;
padding: 11px;
border-radius: 9px;
background: #f7f7f0;
}
.event-block-material-empty b {
color: var(--green-deep);
font-size: 12px;
}
.event-block-material-empty.is-error {
background: #fff2ed;
}
.event-block-material-empty .small-btn {
justify-self: start;
margin-top: 4px;
}
.finance-expense-origin {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
align-items: center;
margin: -2px 0 16px;
padding: 12px 14px;
border: 1px solid rgba(84, 122, 94, .16);
border-radius: 13px;
background: #edf2e9;
}
.finance-expense-origin > span {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: #dce7d7;
color: var(--green-deep);
}
.finance-expense-origin > span svg {
width: 18px;
height: 18px;
}
.finance-expense-origin > div {
display: grid;
gap: 2px;
min-width: 0;
}
.finance-expense-origin small {
color: var(--sage-deep);
font-size: 9.5px;
font-weight: 820;
letter-spacing: .06em;
text-transform: uppercase;
}
.finance-expense-origin b {
overflow: hidden;
color: var(--green-deep);
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.finance-expense-origin p {
margin: 0;
color: var(--muted);
font-size: 10.5px;
}
@media (max-width: 760px) {
.event-block-tabs {
padding: 8px 17px 0;
}
.event-block-tab {
min-height: 46px;
padding-right: 11px;
padding-left: 11px;
font-size: 12px;
}
.event-block-tab-content {
min-height: min(500px, 61dvh);
padding: 0 18px 22px;
}
.event-block-tab-panel {
padding-top: 23px;
}
.event-block-panel-heading {
margin-bottom: 20px;
}
.event-block-panel-heading h5 {
font-size: 21px;
}
.event-block-panel-heading p {
font-size: 13px;
}
.event-block-context-grid.is-overview {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
.event-block-context-grid.is-overview .event-block-context-panel + .event-block-context-panel {
padding: 22px 0 0;
border-top: 1px solid rgba(56, 85, 74, .1);
border-left: 0;
}
.event-block-runbook-guide {
padding: 12px 13px;
}
.event-block-tab-panel .event-block-runbook-step {
grid-template-columns: 44px minmax(0, 1fr) 44px;
grid-template-rows: auto auto;
gap: 11px;
min-height: 82px;
padding: 13px 10px;
}
.event-block-tab-panel .event-block-runbook-check {
grid-column: 1;
grid-row: 1;
align-self: center;
}
.event-block-tab-panel .event-block-runbook-copy {
grid-column: 2 / 4;
grid-row: 1;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-self: center;
}
.event-block-tab-panel .event-block-runbook-time,
.event-block-tab-panel .event-block-runbook-copy b,
.event-block-tab-panel .event-block-runbook-copy small {
grid-column: 1;
align-self: auto;
}
.event-block-tab-panel .event-block-runbook-time { grid-row: 1; }
.event-block-tab-panel .event-block-runbook-copy b { grid-row: 2; }
.event-block-tab-panel .event-block-runbook-copy small { grid-row: 3; }
.event-block-runbook-actions {
grid-column: 2 / 4;
grid-row: 2;
justify-content: flex-start;
}
.event-block-tab-panel .event-block-runbook-check,
.event-block-runbook-actions .event-block-inline-remove {
width: 44px;
height: 44px;
}
.event-block-step-to-task {
min-height: 44px;
padding-right: 12px;
padding-left: 12px;
font-size: 11.5px;
}
.event-block-runbook-add > summary {
width: 100%;
box-sizing: border-box;
}
.event-block-runbook-add form {
grid-template-columns: minmax(0, 1fr);
}
.event-block-runbook-add form .btn {
width: 100%;
}
.event-block-support-grid {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.event-block-support-journal {
padding: 24px 0 0;
border-top: 1px solid rgba(56, 85, 74, .1);
border-left: 0;
}
.event-block-supply-primary {
grid-row: 1 / span 3;
}
.event-block-supply-actions {
grid-column: 1 / -1;
grid-row: 3;
flex-wrap: wrap;
justify-content: flex-start;
}
.event-block-supply-task,
.event-block-supply-task.is-linked,
.event-block-supply-expense {
flex: 0 1 auto;
width: auto;
min-height: 44px;
padding: 7px 10px;
font-size: 11px;
}
.event-block-supply-actions .event-block-inline-remove {
margin-left: auto;
}
.event-block-material-source-panel input,
.event-block-material-source-panel select {
font-size: 16px;
}
.event-block-material-source-tabs button {
min-height: 44px;
font-size: 11px;
}
}
@media (max-width: 380px) {
.event-block-tabs {
padding-right: 14px;
padding-left: 14px;
}
.event-block-tab-content {
padding-right: 15px;
padding-left: 15px;
}
.event-block-runbook-guide {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.event-block-runbook-guide > i {
display: none;
}
.event-block-supply-item {
gap: 8px 10px;
padding-right: 9px;
padding-left: 9px;
}
.event-block-supply-task > b,
.event-block-supply-task.is-linked > b,
.event-block-supply-expense > b {
font-size: 10px;
}
.event-block-material-source-tabs {
grid-template-columns: minmax(0, 1fr);
}
}
.event-block-supply-scope {
display: flex;
gap: 7px;
min-width: 0;
margin-bottom: 12px;
overflow-x: auto;
padding: 1px 1px 4px;
scrollbar-width: thin;
}
.event-block-supply-scope button {
display: inline-flex;
flex: 0 0 auto;
gap: 8px;
align-items: center;
min-height: 42px;
padding: 7px 11px;
border: 1px solid rgba(56, 85, 74, .13);
border-radius: 11px;
background: #fffdf8;
color: var(--muted);
font-size: 11px;
font-weight: 760;
}
.event-block-supply-scope button b {
display: grid;
place-items: center;
min-width: 23px;
height: 23px;
padding: 0 6px;
border-radius: 999px;
background: #eff1e9;
color: var(--green-deep);
font-size: 10px;
}
.event-block-supply-scope button.is-active {
border-color: var(--green-deep);
background: var(--green-deep);
color: #fff;
}
.event-block-supply-scope button.is-active b {
background: rgba(255, 255, 255, .16);
color: #fff;
}
.event-block-supply-scope button:focus-visible,
.event-block-supply-edit:focus-visible {
outline: 3px solid rgba(224, 122, 95, .22);
outline-offset: 2px;
}
.event-block-supply-overview.is-return {
border-color: rgba(69, 105, 83, .18);
background: #eef4eb;
}
.event-block-supply-overview.is-return > p {
grid-column: 1 / -1;
margin: 0;
color: var(--muted);
font-size: 10.5px;
line-height: 1.45;
}
.event-block-supply-group > summary {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 10px 13px;
border-bottom: 1px solid rgba(56, 85, 74, .1);
background: #f7f7f0;
cursor: pointer;
list-style: none;
}
.event-block-supply-group > summary::-webkit-details-marker { display: none; }
.event-block-supply-group > summary > b { min-width: 0; color: var(--green-deep); font-size: 13.5px; }
.event-block-supply-group > summary > span { margin-left: auto; color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.event-block-supply-group > summary > span b { color: var(--ink); font-size: 11px; }
.event-block-supply-group > summary > i { color: var(--sage-deep); font-size: 16px; font-style: normal; transition: transform var(--motion-base, .18s) ease; }
.event-block-supply-group[open] > summary > i { transform: rotate(180deg); }
.event-block-supply-group.is-return-pending { border-color: rgba(224, 122, 95, .25); }
.event-block-supply-group.is-return-pending > header { box-shadow: inset 3px 0 0 var(--coral); background: #fff7f2; }
.event-block-supply-group.is-arrival-unknown { border-color: rgba(184, 155, 61, .28); }
.event-block-supply-group.is-arrival-unknown > header { box-shadow: inset 3px 0 0 #b89b3d; background: #fbf8e9; }
.event-block-supply-group.is-returned > summary { box-shadow: inset 3px 0 0 var(--sage-deep); background: #f1f5ee; }
.event-block-supply-group.is-not-brought > summary { box-shadow: inset 3px 0 0 #9a9b91; background: #f5f5f1; }
.event-block-supply-item.is-returned { background: #edf3e9; }
.event-block-supply-item.is-returned .event-block-supply-main,
.event-block-supply-item.is-not-brought .event-block-supply-main { opacity: .72; }
.event-block-supply-item.is-not-brought { background: #f6f5f1; }
.event-block-supply-state-btn.is-primary.is-return { color: var(--coral-deep); }
.event-block-supply-state-btn.is-primary.is-return.is-on { border-color: rgba(84, 122, 94, .38); background: #dfeadb; color: var(--green-deep); }
.event-block-supply-arrival-note {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 7px 9px;
border-radius: 9px;
background: #f3f3ee;
color: var(--muted);
font-size: 10.5px;
line-height: 1.25;
}
.event-block-supply-arrival-note.is-not-brought { color: #6e6f67; }
.event-block-supply-actions { flex-wrap: wrap; max-width: 260px; }
.event-block-supply-edit {
display: inline-flex;
gap: 6px;
align-items: center;
min-height: 36px;
padding: 6px 9px;
border: 1px solid rgba(56, 85, 74, .12);
border-radius: 9px;
background: #f7f7f0;
color: var(--green-deep);
cursor: pointer;
}
.event-block-supply-edit:hover { border-color: rgba(224, 122, 95, .32); background: #fff8f3; color: var(--coral-deep); }
.event-block-supply-edit > span { font-size: 14px; font-weight: 850; }
.event-block-supply-edit > b { font-size: 10.5px; font-weight: 760; white-space: nowrap; }
.event-block-flow-empty.is-supply-filter { margin-bottom: 12px; }
.event-supply-quantity-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 13px;
max-width: 620px;
}
.event-supply-quantity-intro { display: grid; gap: 5px; margin-bottom: 3px; padding: 13px 14px; border-radius: 12px; background: #f4f5ee; }
.event-supply-quantity-intro > span { color: var(--coral-deep); font-size: 9.5px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.event-supply-quantity-intro h4 { margin: 0; color: var(--green-deep); font-size: 18px; }
.event-supply-quantity-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.event-supply-quantity-form label { display: grid; gap: 6px; min-width: 0; color: var(--green-deep); font-size: 11.5px; font-weight: 760; }
.event-supply-quantity-form label small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.event-supply-quantity-form label.is-later { padding-top: 12px; border-top: 1px solid rgba(56, 85, 74, .1); }
.event-supply-quantity-form input { width: 100%; min-height: 46px; box-sizing: border-box; }
.event-supply-quantity-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.event-supply-quantity-actions .btn { min-width: 0; min-height: 46px; }
@media (max-width: 760px) {
.event-block-supply-scope button { min-height: 44px; }
.event-block-supply-actions { max-width: none; }
.event-block-supply-edit { min-height: 44px; padding-inline: 11px; }
.event-supply-quantity-form input { font-size: 16px; }
}
@media (max-width: 380px) {
.event-block-supply-scope { margin-right: -14px; padding-right: 14px; }
.event-block-supply-group > summary { gap: 7px; padding-inline: 10px; }
.event-block-supply-group > summary > span { font-size: 9.5px; }
.event-supply-quantity-actions { grid-template-columns: minmax(0, 1fr); }
}
.project-collaboration-choice-modal { width: min(680px, calc(100vw - 32px)); }
.project-collaboration-choice { display: grid; gap: 15px; }
.project-collaboration-choice-intro { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.project-collaboration-choice-intro b { color: var(--ink); }
.project-collaboration-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.project-collaboration-choice-grid > button { display: grid; grid-template-columns: 42px minmax(0,1fr) 16px; align-items: start; gap: 11px; min-height: 128px; padding: 16px; border: 1px solid rgba(54,82,68,.14); border-radius: 16px; background: #fbfaf6; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.project-collaboration-choice-grid > button:hover { border-color: rgba(54,82,68,.3); box-shadow: 0 9px 20px rgba(49,67,57,.08); transform: translateY(-1px); }
.project-collaboration-choice-grid > button:focus-visible { outline: 3px solid rgba(231,121,98,.24); outline-offset: 2px; }
.project-collaboration-choice-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--green-deep); color: #fff; }
.project-collaboration-choice-icon.is-formal { background: #f0e9df; color: var(--coral-deep); }
.project-collaboration-choice-icon svg { width: 20px; height: 20px; }
.project-collaboration-choice-grid > button > span:nth-child(2) { display: grid; gap: 6px; min-width: 0; }
.project-collaboration-choice-grid > button b { font-family: var(--display); font-size: 15px; }
.project-collaboration-choice-grid > button small { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.project-collaboration-choice-grid > button > i { align-self: center; color: #829087; font-size: 22px; font-style: normal; }
.gathering-form-modal { width: min(780px, calc(100vw - 32px)); max-height: min(880px, calc(100dvh - 28px)); }
.gathering-form-modal .modal-body { padding: 0; overflow: auto; }
.gathering-form { display: grid; gap: 18px; padding: 2px; }
.gathering-project-lock { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(54,82,68,.14); border-radius: 14px; background: #f6f3ea; }
.gathering-project-lock > span { display: flex; }
.gathering-project-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--green-deep); color: #fff; }
.gathering-project-lock p { display: grid; gap: 2px; margin: 0; min-width: 0; }
.gathering-project-lock small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.gathering-project-lock b { overflow: hidden; color: var(--ink); font-family: var(--display); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.gathering-purpose-field input { min-height: 48px; font-size: 15px; font-weight: 750; }
.gathering-purpose-field > small,
.gathering-invite-head small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.gathering-schedule-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.gathering-schedule-choice legend { grid-column: 1 / -1; margin-bottom: 2px; padding: 0; font-size: 12px; font-weight: 850; }
.gathering-schedule-choice label { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 9px; min-height: 76px; padding: 12px; border: 1px solid rgba(54,82,68,.13); border-radius: 13px; background: #fbfaf6; cursor: pointer; }
.gathering-schedule-choice label:has(input:checked) { border-color: rgba(54,82,68,.38); background: #edf3ed; box-shadow: inset 0 0 0 1px rgba(54,82,68,.07); }
.gathering-schedule-choice input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green-deep); }
.gathering-schedule-choice label span { display: grid; align-content: start; gap: 3px; }
.gathering-schedule-choice label b { font-size: 11px; }
.gathering-schedule-choice label small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.gathering-schedule-lock { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid rgba(54,82,68,.13); border-radius: 13px; background: #f7f4ec; }
.gathering-schedule-lock > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #e4ece5; color: var(--green-deep); font-size: 13px; font-weight: 900; }
.gathering-schedule-lock p { display: grid; gap: 2px; margin: 1px 0 0; }
.gathering-schedule-lock b { font-size: 11px; }
.gathering-schedule-lock small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.gathering-time-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 12px; }
.gathering-time-grid[hidden],
.gathering-poll-builder[hidden] { display: none !important; }
.gathering-duration-field { width: min(100%,220px); }
.gathering-poll-builder { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(54,82,68,.14); border-radius: 15px; background: #f7f4ec; }
.gathering-poll-builder-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.gathering-poll-builder-head > div { display: grid; gap: 2px; }
.gathering-poll-builder-head b { font-size: 12px; }
.gathering-poll-builder-head small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.gathering-poll-builder-head > span { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; background: #e4ece5; color: var(--green-deep); font-size: 8.5px; font-weight: 850; }
.gathering-poll-options { display: grid; gap: 7px; }
.gathering-poll-option-row { display: grid; grid-template-columns: 28px minmax(150px,1.2fr) minmax(110px,.8fr) 40px; gap: 8px; align-items: end; padding: 9px; border: 1px solid rgba(54,82,68,.1); border-radius: 12px; background: #fff; }
.gathering-poll-option-number { display: grid; width: 28px; height: 28px; margin-bottom: 6px; place-items: center; border-radius: 9px; background: #edf3ed; color: var(--green-deep); font-size: 10px; font-weight: 900; }
.gathering-poll-option-row label { display: grid; gap: 4px; min-width: 0; }
.gathering-poll-option-row label > span { color: var(--muted); font-size: 8.5px; font-weight: 750; }
.gathering-poll-option-row input { min-width: 0; min-height: 42px; margin: 0; }
.gathering-poll-remove { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(54,82,68,.12); border-radius: 10px; background: #faf8f2; color: var(--muted); font-size: 18px; cursor: pointer; }
.gathering-poll-remove:disabled { opacity: .32; cursor: default; }
.gathering-poll-add { justify-self: start; min-height: 38px; }
.gathering-invite-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: -10px; }
.gathering-invite-head > div { min-width: 0; }
.gathering-invite-head b { font-size: 12px; }
.gathering-invite-head .small-btn { flex: 0 0 auto; min-height: 34px; }
.gathering-form-note { display: flex; gap: 10px; padding: 12px 13px; border: 1px solid rgba(54,82,68,.12); border-radius: 13px; background: #f8f6ef; color: var(--muted); }
.gathering-form-note > span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: rgba(54,82,68,.1); color: var(--green-deep); font-size: 11px; font-weight: 900; }
.gathering-form-note p { margin: 1px 0 0; font-size: 10.5px; line-height: 1.5; }
.gathering-collection-section { margin: 18px 0 20px; padding: 18px; border: 1px solid rgba(54,82,68,.13); border-radius: 19px; background: #fbfaf6; box-shadow: 0 10px 25px rgba(49,67,57,.055); }
.gathering-collection-section > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.gathering-collection-section > header h2 { margin: 3px 0 2px; font-family: var(--display); font-size: 20px; }
.gathering-collection-section > header p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.gathering-collection-section > header > span { padding: 6px 9px; border-radius: 999px; background: #edf3ed; color: var(--green-deep); font-size: 10px; font-weight: 850; white-space: nowrap; }
.gathering-collection-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.project-gathering-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; width: 100%; min-width: 0; padding: 12px; border: 1px solid rgba(54,82,68,.13); border-radius: 15px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.project-gathering-card:hover { border-color: rgba(54,82,68,.26); box-shadow: 0 7px 17px rgba(49,67,57,.08); transform: translateY(-1px); }
.project-gathering-card:focus-visible { outline: 3px solid rgba(231,121,98,.24); outline-offset: 2px; }
.project-gathering-date { display: grid; align-content: center; justify-items: center; width: 48px; height: 48px; border-radius: 13px; background: #edf3ed; color: var(--green-deep); }
.project-gathering-date b { font-family: var(--display); font-size: 18px; line-height: 1; }
.project-gathering-date small { margin-top: 3px; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.project-gathering-date.is-poll { background: #f4eadc; color: #8b6121; }
.project-gathering-main { display: grid; gap: 3px; min-width: 0; }
.project-gathering-main > b { overflow: hidden; font-family: var(--display); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.project-gathering-main > small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.project-gathering-kicker { display: flex; align-items: center; gap: 7px; min-width: 0; }
.project-gathering-kicker i { padding: 3px 6px; border-radius: 999px; font-size: 8.5px; font-style: normal; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.project-gathering-kicker i.is-scheduled { background: #edf3ed; color: #3d6753; }
.project-gathering-kicker i.is-held { background: #ebe8df; color: #6d726d; }
.project-gathering-kicker i.is-attention { background: #fff0d8; color: #8b6121; }
.project-gathering-kicker i.is-poll { background: #f4eadc; color: #805f25; }
.project-gathering-kicker small { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.project-gathering-response { display: flex; align-items: center; gap: 7px; min-width: 118px; color: var(--muted); }
.project-gathering-response > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #efede7; font-size: 11px; font-style: normal; font-weight: 900; }
.project-gathering-response > span { display: grid; gap: 1px; font-size: 9.5px; font-weight: 800; }
.project-gathering-response small { color: var(--muted); font-size: 8px; font-weight: 600; }
.project-gathering-response.is-going { color: #3f6f58; }
.project-gathering-response.is-going > i { background: #e3f1e7; }
.project-gathering-response.is-maybe { color: #8b672b; }
.project-gathering-response.is-maybe > i { background: #fff0d8; }
.project-gathering-response.is-declined { color: #9a5448; }
.project-gathering-response.is-declined > i { background: #f8e7e3; }
.project-gathering-response.is-poll { color: #805f25; }
.project-gathering-response.is-poll > i { background: #fff0d8; }
.project-gathering-open { color: #879188; font-size: 22px; }
.project-collaboration-card { margin-top: 12px; }
.project-collaboration-card > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.project-collaboration-card > header .panel-note { margin-bottom: 0; }
.project-collaboration-card > header .small-btn { flex: 0 0 auto; min-height: 32px; padding-inline: 10px; }
.project-collaboration-list { display: grid; gap: 7px; }
.project-collaboration-card .project-gathering-card { grid-template-columns: 42px minmax(0,1fr) 16px; padding: 9px; border-radius: 13px; box-shadow: none; }
.project-collaboration-card .project-gathering-date { width: 42px; height: 42px; border-radius: 11px; }
.project-collaboration-card .project-gathering-response { display: none; }
.project-collaboration-card .project-gathering-main > b { font-size: 12px; }
.project-collaboration-empty { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed rgba(54,82,68,.18); border-radius: 13px; background: #faf8f2; }
.project-collaboration-empty > span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #edf3ed; color: var(--green-deep); }
.project-collaboration-empty > span svg { width: 17px; }
.project-collaboration-empty p { display: grid; gap: 2px; margin: 0; }
.project-collaboration-empty b { font-size: 10.5px; }
.project-collaboration-empty small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.project-meeting-copy > small { color: var(--coral-deep); font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.project-meeting-copy > span { color: var(--muted); font-size: 9px; }
.project-gathering-shortcut svg { width: 15px; height: 15px; }
.dash-meeting-row.is-schedule-poll .dash-meeting-date { background: #f4eadc; color: #805f25; }
.gathering-detail { max-width: 1120px; margin: 0 auto; padding-bottom: 28px; }
.gathering-hero { padding: 22px; border: 1px solid rgba(54,82,68,.13); border-radius: 21px; background: #fbfaf6; box-shadow: 0 12px 28px rgba(49,67,57,.065); }
.gathering-hero-top { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.gathering-hero-copy { display: flex; gap: 14px; min-width: 0; }
.gathering-hero-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: var(--green-deep); color: #fff; }
.gathering-hero-icon svg { width: 23px; height: 23px; }
.gathering-hero-copy > div { min-width: 0; }
.gathering-hero-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.gathering-hero-kicker i { padding: 4px 7px; border-radius: 999px; font-size: 8.5px; font-style: normal; letter-spacing: .03em; }
.gathering-hero-kicker i.is-scheduled { background: #e4efe7; color: #3d6753; }
.gathering-hero-kicker i.is-held { background: #eae7df; color: #686e69; }
.gathering-hero-kicker i.is-attention { background: #fff0d8; color: #8b6121; }
.gathering-hero-kicker i.is-poll { background: #fff0d8; color: #805f25; }
.gathering-hero h1 { margin: 6px 0 4px; font-family: var(--display); font-size: clamp(25px,3vw,36px); line-height: 1.1; }
.gathering-hero-copy button[data-open-project] { padding: 0; border: 0; background: transparent; color: var(--green-deep); font-size: 11px; font-weight: 800; cursor: pointer; }
.gathering-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.gathering-more { position: relative; }
.gathering-more > summary { min-height: 39px; padding: 10px 12px; border: 1px solid rgba(54,82,68,.17); border-radius: 11px; background: #fff; font-size: 10.5px; font-weight: 800; cursor: pointer; list-style: none; }
.gathering-more > summary::-webkit-details-marker { display: none; }
.gathering-more > div { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; min-width: 190px; padding: 6px; border: 1px solid rgba(54,82,68,.14); border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(40,55,47,.15); }
.gathering-more > div button { padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 10.5px; font-weight: 750; text-align: left; cursor: pointer; }
.gathering-more > div button:hover { background: #f4f1e8; }
.gathering-more > div button.danger { color: #a34f40; }
.gathering-facts { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 1px; margin-top: 20px; overflow: hidden; border: 1px solid rgba(54,82,68,.1); border-radius: 14px; background: rgba(54,82,68,.1); }
.gathering-facts > div { display: grid; gap: 4px; min-width: 0; padding: 12px 13px; background: #fff; }
.gathering-facts span { color: var(--muted); font-size: 8.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.gathering-facts b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gathering-online-action { display: flex; justify-content: flex-end; margin-top: 12px; }
.gathering-join { min-height: 40px; }
.gathering-join svg { width: 16px; }
.gathering-calendar-note { color: var(--muted); font-size: 10px; }
.gathering-rsvp-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(54,82,68,.13); border-radius: 17px; background: #fff; }
.gathering-rsvp-card h3 { margin: 3px 0 2px; font-family: var(--display); font-size: 17px; }
.gathering-rsvp-card p { margin: 0; color: var(--muted); font-size: 10px; }
.gathering-rsvp-actions { display: flex; gap: 7px; }
.gathering-rsvp-actions button { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(54,82,68,.14); border-radius: 11px; background: #fff; color: var(--ink); font-size: 10.5px; font-weight: 850; cursor: pointer; }
.gathering-rsvp-actions button i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #f0eee7; font-style: normal; }
.gathering-rsvp-actions button.is-selected { border-color: rgba(54,82,68,.36); background: #edf3ed; box-shadow: inset 0 0 0 1px rgba(54,82,68,.1); }
.gathering-rsvp-actions button.is-going.is-selected { color: #315846; }
.gathering-rsvp-actions button.is-maybe.is-selected { border-color: #ead2a2; background: #fff7e7; color: #805f25; }
.gathering-rsvp-actions button.is-declined.is-selected { border-color: #e8c5bd; background: #fbefec; color: #9a5448; }
.gathering-poll-card { display: grid; gap: 14px; margin-top: 14px; padding: 18px; border: 1px solid rgba(54,82,68,.14); border-radius: 18px; background: #fbfaf6; box-shadow: 0 8px 22px rgba(49,67,57,.05); }
.gathering-poll-card > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.gathering-poll-card > header h2 { margin: 4px 0 2px; font-family: var(--display); font-size: 20px; }
.gathering-poll-card > header p { max-width: 620px; margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.gathering-poll-progress { display: grid; flex: 0 0 180px; gap: 2px; }
.gathering-poll-progress b { font-family: var(--display); font-size: 16px; }
.gathering-poll-progress small { color: var(--muted); font-size: 8.5px; }
.gathering-poll-progress > span { height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #e5e7df; }
.gathering-poll-progress > span i { display: block; width: var(--poll-progress); height: 100%; border-radius: inherit; background: var(--coral); }
.gathering-poll-option-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.gathering-poll-option-card { display: grid; align-content: start; gap: 11px; min-width: 0; padding: 13px; border: 1px solid rgba(54,82,68,.13); border-radius: 14px; background: #fff; }
.gathering-poll-option-card.is-recommended { border-color: rgba(54,82,68,.4); box-shadow: inset 0 0 0 1px rgba(54,82,68,.08); }
.gathering-poll-option-card.is-selected-term { border-color: rgba(54,82,68,.44); background: #f4f7f1; }
.gathering-poll-option-card > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.gathering-poll-option-card > header > div { display: grid; gap: 2px; }
.gathering-poll-option-card > header span { color: var(--muted); font-size: 9px; }
.gathering-poll-option-card > header b { font-family: var(--display); font-size: 16px; }
.gathering-poll-option-card > header em { padding: 4px 6px; border-radius: 999px; background: #e4ece5; color: var(--green-deep); font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
.gathering-poll-availability { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.gathering-poll-availability > span { display: grid; grid-template-columns: 19px minmax(0,1fr); gap: 1px 5px; min-width: 0; padding: 7px; border-radius: 9px; background: #f3f1eb; }
.gathering-poll-availability i { display: grid; grid-row: 1 / 3; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #e5e3dd; font-size: 9px; font-style: normal; font-weight: 900; }
.gathering-poll-availability b { font-size: 10px; }
.gathering-poll-availability small { overflow: hidden; color: var(--muted); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.gathering-poll-availability .is-yes { background: #edf3ed; color: #315846; }
.gathering-poll-availability .is-yes i { background: #dceadf; }
.gathering-poll-availability .is-maybe { background: #fff7e7; color: #805f25; }
.gathering-poll-availability .is-maybe i { background: #f7e7c8; }
.gathering-poll-availability .is-no { background: #fbefec; color: #9a5448; }
.gathering-poll-availability .is-no i { background: #f2ddd8; }
.gathering-poll-vote { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding-top: 9px; border-top: 1px solid rgba(54,82,68,.09); }
.gathering-poll-vote button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 7px 5px; border: 1px solid rgba(54,82,68,.13); border-radius: 10px; background: #fff; color: var(--ink); font-size: 9px; font-weight: 850; cursor: pointer; }
.gathering-poll-vote button i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #efede7; font-style: normal; }
.gathering-poll-vote button.is-yes.is-selected { border-color: #8faf9a; background: #edf3ed; color: #315846; }
.gathering-poll-vote button.is-maybe.is-selected { border-color: #e1c580; background: #fff7e7; color: #805f25; }
.gathering-poll-vote button.is-no.is-selected { border-color: #deb5ab; background: #fbefec; color: #9a5448; }
.gathering-poll-finalize { justify-self: stretch; min-height: 38px; border-color: rgba(54,82,68,.28); background: #edf3ed; color: var(--green-deep); }
.gathering-poll-card > footer { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 9px; align-items: start; padding: 11px; border-radius: 12px; background: #f2eee5; }
.gathering-poll-card > footer > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e1e9e2; color: var(--green-deep); font-size: 10px; font-weight: 900; }
.gathering-poll-card > footer p { display: grid; gap: 2px; margin: 1px 0 0; }
.gathering-poll-card > footer b { font-size: 10px; }
.gathering-poll-card > footer small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.gathering-poll-history { margin-top: 14px; overflow: hidden; border: 1px solid rgba(54,82,68,.13); border-radius: 16px; background: #fff; }
.gathering-poll-history > summary { display: grid; grid-template-columns: 30px minmax(0,1fr) 20px; gap: 10px; align-items: center; min-height: 62px; padding: 12px 14px; cursor: pointer; list-style: none; }
.gathering-poll-history > summary::-webkit-details-marker { display: none; }
.gathering-poll-history > summary > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #e4ece5; color: var(--green-deep); font-weight: 900; }
.gathering-poll-history > summary p { display: grid; gap: 2px; margin: 0; }
.gathering-poll-history > summary b { font-size: 11px; }
.gathering-poll-history > summary small { color: var(--muted); font-size: 9px; }
.gathering-poll-history > summary > i { color: var(--muted); font-style: normal; }
.gathering-poll-history[open] > summary > i { transform: rotate(180deg); }
.gathering-poll-history .gathering-poll-option-list { padding: 0 14px 14px; }
.gathering-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,340px); align-items: start; gap: 14px; margin-top: 14px; }
.gathering-detail-grid main,
.gathering-detail-grid aside { display: grid; gap: 14px; min-width: 0; }
.gathering-brief-card,
.gathering-outcome-card,
.gathering-people-card,
.gathering-scope-note { padding: 18px; border: 1px solid rgba(54,82,68,.13); border-radius: 17px; background: #fff; }
.gathering-brief-card h2,
.gathering-outcome-card h2,
.gathering-people-card h2 { margin: 4px 0 0; font-family: var(--display); font-size: 18px; }
.gathering-brief-card > p,
.gathering-outcome-card > p { margin: 13px 0 0; color: #44544b; font-size: 12px; line-height: 1.65; }
.gathering-outcome-card { background: #fbfaf6; }
.gathering-outcome-card > div:first-child > p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.gathering-outcome-card form { display: grid; gap: 10px; margin-top: 14px; }
.gathering-outcome-card textarea { width: 100%; min-height: 112px; resize: vertical; }
.gathering-outcome-card form > div { display: flex; justify-content: flex-end; }
.gathering-outcome-card.is-held { border-left: 3px solid rgba(54,82,68,.45); background: #fff; }
.gathering-outcome-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.gathering-outcome-actions .small-btn { display: inline-flex; align-items: center; gap: 6px; }
.gathering-outcome-actions svg { width: 14px; }
.gathering-reopen { margin-top: 10px; }
.gathering-people-card > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gathering-people-card > header > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #edf3ed; color: var(--green-deep); font-size: 10px; }
.gathering-person-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid rgba(54,82,68,.09); }
.gathering-person-row:first-child { border-top: 0; }
.gathering-person-avatar { width: 34px; height: 34px; }
.gathering-person-row > span { display: grid; gap: 2px; min-width: 0; }
.gathering-person-row > span b { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.gathering-person-row > span small { color: var(--muted); font-size: 8.5px; }
.gathering-person-row > i { padding: 4px 6px; border-radius: 999px; background: #efede7; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
.gathering-person-row > i.is-going { background: #e3f1e7; color: #3f6f58; }
.gathering-person-row > i.is-maybe { background: #fff0d8; color: #8b672b; }
.gathering-person-row > i.is-declined { background: #f8e7e3; color: #9a5448; }
.gathering-person-row > i.is-poll-complete { background: #e3f1e7; color: #3f6f58; }
.gathering-person-row > i.is-poll-partial { background: #fff0d8; color: #8b672b; }
.gathering-scope-note { display: flex; gap: 10px; background: #f7f4ec; }
.gathering-scope-note > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e4ece5; color: var(--green-deep); font-size: 10px; font-weight: 900; }
.gathering-scope-note p { display: grid; gap: 3px; margin: 1px 0 0; }
.gathering-scope-note b { font-size: 10px; }
.gathering-scope-note small { color: var(--muted); font-size: 9px; line-height: 1.5; }
@media (max-width: 900px) {
.gathering-collection-list { grid-template-columns: 1fr; }
.gathering-detail-grid { grid-template-columns: minmax(0,1fr) 290px; }
.gathering-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
.gathering-form-modal { width: 100%; max-height: calc(100dvh - 10px); margin: 10px 0 0; border-radius: 22px 22px 0 0; }
.gathering-form-modal .modal-body { overscroll-behavior: contain; }
.gathering-time-grid { grid-template-columns: 1fr 1fr; }
.gathering-invite-head { align-items: start; }
.gathering-detail { padding-inline: 0; }
.gathering-hero { padding: 17px; border-radius: 18px; }
.gathering-hero-top { display: grid; }
.gathering-toolbar-actions { justify-content: flex-end; }
.gathering-detail-grid { grid-template-columns: 1fr; }
.gathering-detail-grid aside { grid-template-columns: 1fr; }
.gathering-rsvp-card { display: grid; }
.gathering-rsvp-actions { width: 100%; }
.gathering-rsvp-actions button { flex: 1 1 0; justify-content: center; }
.gathering-poll-option-list { grid-template-columns: 1fr; }
.gathering-poll-card > header { display: grid; }
.gathering-poll-progress { width: 100%; }
.project-gathering-response { min-width: 92px; }
.project-gathering-response small { display: none; }
.project-hero-actions .project-gathering-shortcut { order: 2; }
}
@media (max-width: 520px) {
.project-collaboration-choice-modal { width: 100%; max-height: calc(100dvh - 10px); margin: 10px 0 0; border-radius: 22px 22px 0 0; }
.project-collaboration-choice-grid { grid-template-columns: 1fr; }
.project-collaboration-choice-grid > button { min-height: 112px; }
.gathering-form { gap: 15px; }
.gathering-form > .modal-foot .btn,
.gathering-invite-head .small-btn,
.project-collaboration-card > header .small-btn,
.gathering-outcome-actions .small-btn,
.gathering-reopen,
.gathering-more > div button { min-height: 44px; }
.gathering-time-grid { grid-template-columns: 1fr; }
.gathering-schedule-choice { grid-template-columns: 1fr; }
.gathering-schedule-choice label { min-height: 64px; }
.gathering-duration-field { width: 100%; }
.gathering-poll-builder-head { display: grid; }
.gathering-poll-builder-head > span { justify-self: start; }
.gathering-poll-option-row { grid-template-columns: 28px minmax(0,1fr) 44px; align-items: start; }
.gathering-poll-option-row label { grid-column: 2; }
.gathering-poll-option-row label:nth-of-type(1) { grid-row: 1; }
.gathering-poll-option-row label:nth-of-type(2) { grid-row: 2; }
.gathering-poll-option-number { grid-column: 1; grid-row: 1; margin-top: 17px; }
.gathering-poll-remove { grid-column: 3; grid-row: 1 / 3; width: 44px; height: 44px; margin-top: 17px; }
.gathering-poll-option-row input { min-height: 44px; font-size: 16px; }
.gathering-poll-add,
.gathering-poll-vote button,
.gathering-poll-finalize { min-height: 44px; }
.gathering-poll-card { padding: 14px; border-radius: 16px; }
.gathering-poll-availability { grid-template-columns: 1fr; }
.gathering-poll-availability > span { grid-template-columns: 22px 28px minmax(0,1fr); align-items: center; }
.gathering-poll-availability i { grid-row: auto; width: 22px; height: 22px; }
.gathering-poll-availability small { font-size: 8px; }
.gathering-invite-head { display: grid; }
.gathering-invite-head .small-btn { justify-self: start; }
.gathering-collection-section { padding: 13px; border-radius: 16px; }
.gathering-collection-section > header { display: grid; }
.gathering-collection-section > header > span { justify-self: start; }
.project-gathering-card { grid-template-columns: 42px minmax(0,1fr) 16px; gap: 9px; padding: 10px; }
.project-gathering-date { width: 42px; height: 42px; }
.project-gathering-response { grid-column: 2 / -1; min-width: 0; }
.project-gathering-open { grid-column: 3; grid-row: 1; }
.project-collaboration-card .project-gathering-response { display: none; }
.gathering-hero-copy { gap: 10px; }
.gathering-hero-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
.gathering-hero h1 { font-size: 24px; }
.gathering-hero-copy button[data-open-project] { display: inline-flex; align-items: center; min-height: 44px; }
.gathering-toolbar-actions { width: 100%; }
.gathering-toolbar-actions > .btn { flex: 1; }
.gathering-facts { grid-template-columns: 1fr; }
.gathering-facts b { white-space: normal; }
.gathering-rsvp-card { padding: 15px; }
.gathering-rsvp-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.gathering-rsvp-actions button { display: grid; justify-items: center; gap: 4px; padding: 7px 4px; }
.gathering-brief-card,
.gathering-outcome-card,
.gathering-people-card,
.gathering-scope-note { padding: 15px; border-radius: 15px; }
.gathering-outcome-card form > div .btn { width: 100%; }
.gathering-person-row { grid-template-columns: 32px minmax(0,1fr); }
.gathering-person-row > i { grid-column: 2; justify-self: start; }
}
.personal-calendar-settings { display: grid; gap: 14px; }
.settings-calendar-form { display: grid; min-width: 0; margin: 0; }
.settings-personal-calendar-section { padding-bottom: 20px; }
.personal-calendar-settings.is-settings { gap: 12px; padding-top: 2px; border-top: 1px solid rgba(54,82,68,.1); }
.personal-calendar-settings.is-settings > :first-child { margin-top: 14px; }
.personal-calendar-settings-head { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid rgba(54,82,68,.13); border-radius: 16px; background: #f7f4ec; }
.personal-calendar-settings-head > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: var(--green-deep); color: #fff; }
.personal-calendar-settings-head svg { width: 21px; height: 21px; }
.personal-calendar-settings-head small { color: var(--coral-deep); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.personal-calendar-settings-head h4 { margin: 3px 0 4px; font-family: var(--display); font-size: 17px; }
.personal-calendar-settings-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.personal-calendar-main-toggle,
.personal-calendar-invite-toggle,
.personal-calendar-profile-toggle { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 11px; align-items: start; padding: 14px; border: 1px solid rgba(54,82,68,.13); border-radius: 15px; background: #fffdfa; cursor: pointer; }
.personal-calendar-main-toggle input,
.personal-calendar-invite-toggle input,
.personal-calendar-profile-toggle input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--coral); }
.personal-calendar-main-toggle span,
.personal-calendar-invite-toggle span,
.personal-calendar-profile-toggle span { display: grid; gap: 3px; }
.personal-calendar-main-toggle b,
.personal-calendar-invite-toggle b,
.personal-calendar-profile-toggle b { font-size: 12px; }
.personal-calendar-main-toggle small,
.personal-calendar-invite-toggle small,
.personal-calendar-profile-toggle small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.personal-calendar-invite-toggle { border-color: rgba(54,82,68,.2); background: #edf3ed; }
.personal-calendar-invite-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid rgba(54,82,68,.2); border-radius: 15px; background: #f8faf6; }
.personal-calendar-invite-group .personal-calendar-invite-toggle { min-width: 0; border: 0; border-radius: 0; background: transparent; }
.personal-calendar-invite-group .personal-calendar-invite-toggle + .personal-calendar-invite-toggle { border-left: 1px solid rgba(54,82,68,.14); }
.personal-calendar-invite-group .personal-calendar-invite-toggle:has(input:checked) { background: #edf3ed; }
.personal-calendar-feed { display: grid; overflow: hidden; border: 1px solid rgba(54,82,68,.16); border-radius: 16px; background: #fffdfa; }
.personal-calendar-feed-toggle { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 11px; align-items: start; padding: 14px; cursor: pointer; }
.personal-calendar-feed-toggle input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--coral); }
.personal-calendar-feed-toggle span { display: grid; gap: 3px; }
.personal-calendar-feed-toggle b { font-size: 12px; }
.personal-calendar-feed-toggle small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.personal-calendar-feed-controls { display: grid; gap: 11px; padding: 0 14px 14px; transition: opacity .16s ease; }
.personal-calendar-feed-controls.is-disabled { opacity: .48; }
.personal-calendar-feed-categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding-top: 12px; border-top: 1px solid rgba(54,82,68,.1); }
.personal-calendar-feed-categories label { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; align-items: start; min-height: 92px; padding: 11px; border: 1px solid rgba(54,82,68,.12); border-radius: 12px; background: #f9f7f1; cursor: pointer; }
.personal-calendar-feed-categories label:has(input:checked) { border-color: rgba(54,82,68,.32); background: #edf3ed; }
.personal-calendar-feed-categories input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green-deep); }
.personal-calendar-feed-categories span { display: grid; gap: 3px; }
.personal-calendar-feed-categories b { font-size: 10.5px; line-height: 1.35; }
.personal-calendar-feed-categories small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.personal-calendar-feed-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border-radius: 12px; background: #f7f4ec; }
.personal-calendar-feed-foot p { display: grid; gap: 2px; min-width: 0; margin: 0; }
.personal-calendar-feed-foot b { font-size: 10.5px; }
.personal-calendar-feed-foot small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.personal-calendar-feed-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.personal-calendar-feed-actions .small-btn { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }
.personal-calendar-controls { display: grid; gap: 11px; transition: opacity .16s ease; }
.personal-calendar-controls.is-disabled { opacity: .48; }
.personal-calendar-hours { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; padding: 14px; border: 1px solid rgba(54,82,68,.11); border-radius: 15px; background: #fbfaf6; }
.personal-calendar-hours > div:first-child > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 750; }
.personal-calendar-days { display: flex; flex-wrap: wrap; gap: 5px; }
.personal-calendar-days label { cursor: pointer; }
.personal-calendar-days input { position: absolute; opacity: 0; pointer-events: none; }
.personal-calendar-days span { display: grid; min-width: 38px; height: 38px; place-items: center; border: 1px solid rgba(54,82,68,.14); border-radius: 11px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 850; }
.personal-calendar-days input:checked + span { border-color: rgba(54,82,68,.35); background: var(--green-deep); color: #fff; }
.personal-calendar-days input:focus-visible + span { outline: 3px solid rgba(231,121,98,.24); outline-offset: 2px; }
.personal-calendar-time-range { display: flex; gap: 7px; align-items: end; }
.personal-calendar-time-range > span { padding-bottom: 11px; color: var(--muted); }
.personal-calendar-time-range label { display: grid; gap: 5px; color: var(--muted); font-size: 9.5px; font-weight: 750; }
.personal-calendar-time-range select { min-width: 92px; min-height: 42px; margin: 0; padding: 8px 28px 8px 10px; border-radius: 11px; background-color: #fff; }
.personal-calendar-busy-mode { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0; padding: 14px; border: 1px solid rgba(54,82,68,.11); border-radius: 15px; background: #fbfaf6; }
.personal-calendar-busy-mode legend { grid-column: 1 / -1; margin: 0 0 2px; padding: 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.personal-calendar-busy-mode label { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: start; min-height: 66px; padding: 11px; border: 1px solid rgba(54,82,68,.12); border-radius: 12px; background: #fff; cursor: pointer; }
.personal-calendar-busy-mode label:has(input:checked) { border-color: rgba(54,82,68,.38); background: #edf3ed; box-shadow: 0 0 0 1px rgba(54,82,68,.08); }
.personal-calendar-busy-mode input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green-deep); }
.personal-calendar-busy-mode span { display: grid; gap: 3px; }
.personal-calendar-busy-mode b { color: var(--ink); font-size: 10.5px; line-height: 1.35; }
.personal-calendar-busy-mode small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.personal-calendar-privacy { display: flex; gap: 10px; padding: 11px 13px; border-radius: 13px; background: #edf3ed; color: var(--green-deep); }
.personal-calendar-privacy > span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--green-deep); color: #fff; font-size: 10px; font-weight: 900; }
.personal-calendar-privacy p { display: grid; gap: 2px; margin: 1px 0 0; }
.personal-calendar-privacy b { font-size: 10.5px; }
.personal-calendar-privacy small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.meeting-availability-planner { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(54,82,68,.13); border-radius: 16px; background: #f7f4ec; }
.meeting-availability-head { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; }
.meeting-availability-head > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #e6eee7; color: var(--green-deep); }
.meeting-availability-head svg { width: 18px; height: 18px; }
.meeting-availability-head > div { display: grid; gap: 2px; }
.meeting-availability-head b { font-family: var(--display); font-size: 14px; }
.meeting-availability-head small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.meeting-calendar-invite-note { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 9px; align-items: start; padding: 10px 11px; border: 1px solid rgba(54,82,68,.11); border-radius: 12px; background: rgba(255,255,255,.7); }
.meeting-calendar-invite-note > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e6eee7; color: var(--green-deep); font-size: 10px; font-weight: 900; }
.meeting-calendar-invite-note p { display: grid; gap: 2px; margin: 1px 0 0; }
.meeting-calendar-invite-note b { font-size: 10.5px; }
.meeting-calendar-invite-note small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.meeting-availability-actions { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.meeting-availability-actions label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 750; }
.meeting-availability-actions select { min-height: 39px; margin: 0; padding: 7px 30px 7px 10px; border-radius: 10px; background-color: #fff; }
.meeting-availability-actions .small-btn { min-height: 39px; padding-inline: 14px; }
.meeting-availability-results { display: grid; gap: 10px; }
.meeting-availability-results > p { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.meeting-availability-stale { padding: 10px 11px; border-radius: 11px; background: #f2eadf; }
.meeting-availability-coverage { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.72); }
.meeting-availability-coverage b { font-size: 10px; }
.meeting-availability-coverage small { color: var(--muted); font-size: 9px; text-align: right; }
.meeting-availability-check { display: grid; gap: 2px; padding: 10px 11px; border-left: 3px solid var(--green-deep); border-radius: 4px 11px 11px 4px; background: #edf3ed; }
.meeting-availability-check.is-busy { border-left-color: var(--coral-deep); background: #fbede8; }
.meeting-availability-check b { font-size: 10.5px; }
.meeting-availability-check small { color: var(--muted); font-size: 9.5px; }
.meeting-availability-slots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.meeting-availability-slots button { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-items: center; min-height: 62px; padding: 9px 11px; border: 1px solid rgba(54,82,68,.14); border-radius: 12px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.meeting-availability-slots button:hover { border-color: rgba(54,82,68,.34); box-shadow: 0 5px 14px rgba(45,66,55,.07); }
.meeting-availability-slots button.is-selected { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(231,121,98,.12); }
.meeting-availability-slots span { color: var(--muted); font-size: 9px; }
.meeting-availability-slots b { font-size: 11px; }
.meeting-availability-slots small { grid-column: 1 / -1; color: #668071; font-size: 8.5px; }
.meeting-availability-empty { display: grid; gap: 3px; padding: 11px; border: 1px dashed rgba(54,82,68,.18); border-radius: 11px; background: rgba(255,255,255,.55); }
.meeting-availability-empty.is-error { border-color: rgba(177,75,57,.24); background: #fbede8; }
.meeting-availability-empty b { font-size: 10.5px; }
.meeting-availability-empty small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.meeting-availability-loading { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.meeting-availability-loading span,
.profile-calendar-loading > span { width: 16px; height: 16px; border: 2px solid rgba(54,82,68,.16); border-top-color: var(--green-deep); border-radius: 50%; animation: personal-calendar-spin .7s linear infinite; }
.meeting-availability-loading p,
.profile-calendar-loading p { margin: 0; font-size: 9.5px; }
@keyframes personal-calendar-spin { to { transform: rotate(360deg); } }
.profile-calendar-card { display: grid; gap: 11px; }
.profile-calendar-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-calendar-card > .small-btn { justify-self: start; }
.profile-calendar-title { display: grid; grid-template-columns: 37px minmax(0,1fr); gap: 10px; align-items: center; }
.profile-calendar-title > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; background: #e6eee7; color: var(--green-deep); }
.profile-calendar-title svg { width: 17px; height: 17px; }
.profile-calendar-title > div { display: grid; gap: 2px; min-width: 0; }
.person-detail-v2 .profile-calendar-title .panel-title { margin: 0; padding: 0; border: 0; }
.profile-calendar-title small { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.profile-calendar-card.is-private .profile-calendar-title > span { background: #f1e9de; color: var(--coral-deep); }
.profile-calendar-availability { min-height: 52px; }
.profile-calendar-loading { display: flex; align-items: center; gap: 9px; padding: 8px 2px; color: var(--muted); }
.profile-calendar-days-list { display: grid; gap: 9px; }
.profile-calendar-day { display: grid; grid-template-columns: 66px minmax(80px,1fr); gap: 5px 9px; align-items: center; }
.profile-calendar-day > div:first-child { display: grid; gap: 1px; }
.profile-calendar-day > div:first-child b { font-size: 9.5px; }
.profile-calendar-day > div:first-child small { color: var(--muted); font-size: 8px; }
.profile-calendar-track { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: #e4ece5; }
.profile-calendar-track .profile-calendar-free { position: absolute; inset: 0; background: #d9e7dc; }
.profile-calendar-track i { position: absolute; top: 0; bottom: 0; left: var(--busy-left); width: var(--busy-width); border-radius: 999px; background: var(--coral); }
.profile-calendar-day > em { grid-column: 2; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.profile-calendar-footnote { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(54,82,68,.09); color: var(--muted); font-size: 8.5px; line-height: 1.45; }
.profile-calendar-empty { display: grid; gap: 3px; padding: 10px; border-radius: 11px; background: #f7f4ec; }
.profile-calendar-empty b { font-size: 10px; }
.profile-calendar-empty small { color: var(--muted); font-size: 9px; }
@media (max-width: 700px) {
.personal-calendar-settings-head { grid-template-columns: 40px minmax(0,1fr); padding: 12px; }
.personal-calendar-settings-head > span { width: 40px; height: 40px; }
.personal-calendar-hours { grid-template-columns: 1fr; align-items: start; }
.personal-calendar-time-range { justify-content: flex-start; }
.personal-calendar-time-range select { min-height: 44px; font-size: 16px; }
.personal-calendar-days span { min-width: 44px; height: 44px; }
.personal-calendar-busy-mode { grid-template-columns: 1fr; padding: 12px; }
.personal-calendar-busy-mode label { min-height: 58px; }
.personal-calendar-main-toggle,
.personal-calendar-invite-toggle,
.personal-calendar-profile-toggle { min-height: 58px; }
.personal-calendar-invite-group { grid-template-columns: 1fr; }
.personal-calendar-invite-group .personal-calendar-invite-toggle + .personal-calendar-invite-toggle { border-top: 1px solid rgba(54,82,68,.14); border-left: 0; }
.personal-calendar-feed-toggle { min-height: 58px; padding: 12px; }
.personal-calendar-feed-controls { padding: 0 12px 12px; }
.personal-calendar-feed-categories { grid-template-columns: 1fr; }
.personal-calendar-feed-categories label { min-height: 64px; }
.personal-calendar-feed-foot { align-items: stretch; }
.personal-calendar-feed-actions .small-btn { min-height: 44px; }
.meeting-availability-planner { padding: 12px; }
.meeting-availability-actions { align-items: stretch; }
.meeting-availability-actions label { flex: 1; }
.meeting-availability-actions select,
.meeting-availability-actions .small-btn { min-height: 44px; }
.meeting-availability-slots { grid-template-columns: 1fr; }
.meeting-availability-slots button { min-height: 64px; }
.meeting-availability-coverage { display: grid; }
.meeting-availability-coverage small { text-align: left; }
}
@media (max-width: 380px) {
.personal-calendar-time-range { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; }
.personal-calendar-time-range select { width: 100%; min-width: 0; }
.meeting-availability-actions { display: grid; }
.profile-calendar-day { grid-template-columns: 62px minmax(70px,1fr); }
.personal-calendar-feed-foot { display: grid; }
.personal-calendar-feed-actions { display: grid; justify-content: stretch; }
}
.messenger-page {
--chat-hub-green: #244b3b;
--chat-hub-green-deep: #18382c;
--chat-hub-paper: #fbf8f1;
--chat-hub-line: rgba(36, 75, 59, .13);
}
.messenger-sidebar-panel {
border-color: var(--chat-hub-line);
background: var(--chat-hub-paper);
}
.messenger-page-head {
display: block;
padding: 22px 20px 16px;
background: var(--chat-hub-green);
color: #fff;
}
.messenger-head-top {
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.messenger-head-top > div:first-child { min-width: 0; }
.messenger-page-head .eyebrow { color: #d9e7df; }
.messenger-page-head h1 { color: #fff; }
.messenger-page-head p {
max-width: 270px;
color: rgba(255, 255, 255, .74);
font-size: 12.5px;
line-height: 1.48;
}
.messenger-page-head .messenger-head-actions button {
flex: 0 0 auto;
border-color: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .1);
color: #fff;
}
.messenger-page-head .messenger-head-actions button:hover,
.messenger-page-head .messenger-head-actions button:focus-visible {
border-color: rgba(255, 255, 255, .38);
background: rgba(255, 255, 255, .18);
color: #fff;
}
.messenger-head-metrics {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 13px;
background: rgba(12, 34, 25, .18);
overflow: hidden;
}
.messenger-head-metrics > span {
min-width: 0;
padding: 9px 8px;
color: rgba(255, 255, 255, .68);
font-size: 9.5px;
font-weight: 700;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
.messenger-head-metrics > span + span { border-left: 1px solid rgba(255, 255, 255, .11); }
.messenger-head-metrics b {
margin-right: 3px;
color: #fff;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.messenger-head-metrics .is-unread b { color: #ffb29e; }
.messenger-compose {
margin: 12px 12px 9px;
padding: 10px;
border-color: var(--chat-hub-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 4px 14px rgba(36, 75, 59, .045);
}
.messenger-compose label {
margin-bottom: 7px;
color: var(--chat-hub-green);
font-size: 10px;
letter-spacing: .08em;
}
.messenger-list {
padding: 2px 8px 14px;
background: var(--chat-hub-paper);
}
.messenger-stream-heading {
min-width: 0;
margin: 2px 3px 5px;
padding: 10px 7px 7px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
color: var(--chat-hub-green);
}
.messenger-stream-heading > div {
min-width: 0;
display: grid;
gap: 3px;
}
.messenger-stream-heading span {
font-size: 10px;
font-weight: 850;
letter-spacing: .09em;
text-transform: uppercase;
}
.messenger-stream-heading small {
color: var(--muted);
font-size: 10.5px;
line-height: 1.3;
}
.messenger-stream-heading > b {
min-width: 24px;
height: 24px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(36, 75, 59, .08);
color: var(--chat-hub-green);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.messenger-stream-heading.is-muted {
margin-top: 9px;
padding-top: 13px;
border-top: 1px solid var(--chat-hub-line);
color: var(--muted);
}
.messenger-row {
position: relative;
min-height: 72px;
margin: 3px 0;
padding: 10px;
gap: 11px;
border: 1px solid transparent;
border-radius: 16px;
background: rgba(255, 255, 255, .62);
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .12s ease;
}
.messenger-row:hover {
border-color: rgba(36, 75, 59, .16);
background: #fff;
box-shadow: 0 7px 18px rgba(36, 75, 59, .07);
transform: translateY(-1px);
}
.messenger-row.unread {
border-color: rgba(226, 119, 91, .2);
background: #fff8f4;
box-shadow: inset 3px 0 0 var(--coral);
}
.messenger-row-ava {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 15px;
background: #e3ece6;
color: var(--chat-hub-green);
box-shadow: none;
}
.messenger-row.kind-group .messenger-row-ava {
background: #f4e3dc;
color: #9b4d39;
}
.messenger-row.project .messenger-row-ava,
.messenger-row.project .messenger-row-ava.project-ava {
background: var(--chat-hub-green) !important;
color: #fff !important;
}
.messenger-row.kind-organization .messenger-row-ava {
background: #fff !important;
box-shadow: inset 0 0 0 1px rgba(36, 75, 59, .12);
}
.messenger-row-main { gap: 6px; }
.messenger-row-main > .messenger-row-top {
align-items: center;
gap: 9px;
}
.messenger-row-main b {
color: var(--ink);
font-size: 14px;
font-weight: 790;
line-height: 1.25;
}
.messenger-row-main em {
color: #7c8a81;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.messenger-row-bottom {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
}
.messenger-row-main .messenger-row-bottom small {
min-width: 0;
overflow: hidden;
color: var(--muted);
font-size: 11.5px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.messenger-kind {
flex: 0 0 auto;
padding: 3px 6px;
border-radius: 999px;
background: rgba(36, 75, 59, .08);
color: var(--chat-hub-green);
font-size: 8px;
font-weight: 850;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
}
.kind-group .messenger-kind { background: #f4e3dc; color: #8e4a38; }
.kind-project .messenger-kind { background: #e4ece7; color: #244b3b; }
.kind-organization .messenger-kind { background: #efe7d7; color: #6e5a32; }
.messenger-row i {
min-width: 22px;
height: 22px;
padding: 0 7px;
box-shadow: 0 3px 8px rgba(226, 119, 91, .22);
}
.messenger-row-chevron {
flex: 0 0 18px;
color: rgba(36, 75, 59, .35);
font-size: 22px;
line-height: 1;
text-align: center;
transition: color .14s ease, transform .14s ease;
}
.messenger-row:hover .messenger-row-chevron {
color: var(--chat-hub-green);
transform: translateX(2px);
}
.messenger-empty-pane {
padding: clamp(28px, 5vw, 62px);
background: #f6f1e7;
}
.messenger-empty-art {
position: relative;
width: 142px;
height: 98px;
margin-bottom: 4px;
}
.messenger-empty-art > span,
.messenger-empty-art > i {
position: absolute;
display: block;
border-radius: 22px;
transform: rotate(-8deg);
}
.messenger-empty-art > span {
inset: 8px 50px 30px 0;
border: 1px solid rgba(36, 75, 59, .13);
background: rgba(255, 255, 255, .72);
}
.messenger-empty-art > i {
inset: 35px 0 0 68px;
background: #ecd9ce;
transform: rotate(9deg);
}
.messenger-empty-art .messenger-empty-icon {
position: absolute;
z-index: 1;
top: 11px;
left: 39px;
width: 72px;
height: 72px;
border-radius: 23px;
background: var(--chat-hub-green);
color: #fff;
box-shadow: 0 13px 28px rgba(36, 75, 59, .18);
transform: rotate(2deg);
}
.messenger-empty-kicker {
color: var(--coral-deep);
font-size: 10px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.messenger-empty-pane h2 {
max-width: 540px;
font-size: clamp(25px, 3vw, 34px);
line-height: 1.08;
text-wrap: balance;
}
.messenger-empty-pane p {
max-width: 560px;
font-size: 13.5px;
line-height: 1.62;
}
.messenger-empty-features {
width: min(100%, 650px);
margin-top: 12px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.messenger-empty-features span {
min-width: 0;
padding: 11px 12px;
border: 1px solid rgba(36, 75, 59, .11);
border-radius: 13px;
background: rgba(255, 255, 255, .55);
color: var(--muted);
font-size: 10.5px;
line-height: 1.42;
text-align: left;
}
.messenger-empty-features b { display: block; margin-bottom: 2px; color: var(--chat-hub-green); font-size: 11px; }
.fchat-list { background: #f7f3ea; }
.fchat-section-head { padding-top: 9px; }
.fchat-section-head > b {
color: var(--muted);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.fchat-row {
min-height: 62px;
margin-bottom: 4px;
border: 1px solid rgba(36, 75, 59, .08);
background: rgba(255, 255, 255, .62);
}
.fchat-row:hover {
border-color: rgba(36, 75, 59, .16);
background: #fff;
}
.fchat-row.unread {
border-color: rgba(226, 119, 91, .18);
background: #fff8f4;
box-shadow: inset 3px 0 0 var(--coral);
}
.fchat-row-main { gap: 5px; }
.fchat-row-main small {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.fchat-row-main small > span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fchat-kind {
flex: 0 0 auto;
padding: 3px 5px;
border-radius: 999px;
background: rgba(36, 75, 59, .08);
color: var(--chat-hub-green);
font-size: 7.5px;
font-weight: 850;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
}
.fchat-row.kind-group .fchat-kind { background: #f4e3dc; color: #8e4a38; }
.fchat-row.kind-organization .fchat-kind { background: #efe7d7; color: #6e5a32; }
@media (min-width: 861px) {
.messenger-page {
grid-template-columns: minmax(370px, 420px) minmax(0, 1fr);
gap: 18px;
}
.messenger-sidebar-panel,
.messenger-empty-pane,
.messenger-empty-pane.active-chat { border-radius: 22px; }
.messenger-page-head { padding: 22px 20px 16px; }
.messenger-page-head h1 { font-size: 34px; }
.messenger-head-actions button { width: 38px; height: 38px; }
.messenger-list { padding-inline: 8px; }
.messenger-row { min-height: 72px; padding: 10px; }
}
@media (max-width: 860px) {
.messenger-page {
height: calc(100dvh - 116px);
max-height: calc(100dvh - 116px);
}
.messenger-sidebar-panel {
height: calc(100dvh - 116px);
max-height: calc(100dvh - 116px);
overflow: hidden;
border-color: var(--chat-hub-line);
border-radius: 20px;
background: var(--chat-hub-paper);
}
.messenger-page-head { padding: 19px 15px 14px; }
.messenger-head-top { gap: 10px; }
.messenger-page-head h1 { font-size: 31px; }
.messenger-page-head p { max-width: 230px; font-size: 11.5px; }
.messenger-head-actions { gap: 6px; }
.messenger-page-head .messenger-head-actions button {
width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
}
.messenger-head-actions button span { display: none; }
.messenger-head-metrics { margin-top: 13px; }
.messenger-head-metrics > span { padding-inline: 4px; font-size: 8.5px; }
.messenger-head-metrics b { display: block; margin: 0 0 2px; font-size: 12px; }
.messenger-compose { margin: 10px 9px 7px; }
.messenger-compose select { min-height: 44px; height: 44px; font-size: 16px; }
.messenger-compose-btn { min-width: 88px; min-height: 44px; height: 44px; }
.messenger-list { padding: 2px 6px 12px; }
.messenger-stream-heading { padding-inline: 8px; }
.messenger-row {
min-height: 72px;
padding: 10px 9px;
border-radius: 15px;
}
.messenger-row:hover { transform: none; }
.messenger-row-ava { width: 44px; height: 44px; flex-basis: 44px; }
.messenger-row-main b { font-size: 13.5px; }
.messenger-row-main .messenger-row-bottom small { font-size: 11px; }
}
@media (max-width: 390px) {
.messenger-page-head p { max-width: 190px; }
.messenger-head-metrics > span { font-size: 7.8px; }
.messenger-compose-btn { min-width: 72px; padding-inline: 10px; }
.messenger-kind { padding-inline: 5px; font-size: 7.5px; }
.messenger-row-chevron { display: none; }
}
/* Dashboard — příprava a den hlavní akce; klidný pracovní režim (20260815-eventgearreturn1). */
#overview-view .dash-event-day {
--event-green: #244b3b;
--event-green-deep: #17372a;
--event-mint: #e7f0e9;
--event-paper: #fbf8f1;
--event-line: rgba(36, 75, 59, .14);
--event-coral: #d96f56;
display: grid;
gap: 18px;
min-width: 0;
}
#overview-view .dash-event-switcher {
min-width: 0;
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: thin;
padding: 1px 1px 4px;
}
#overview-view .dash-event-switcher button {
min-width: 170px;
min-height: 50px;
padding: 9px 13px;
display: grid;
gap: 2px;
border: 1px solid var(--event-line);
border-radius: 13px;
background: rgba(255, 255, 255, .72);
color: var(--event-green);
text-align: left;
}
#overview-view .dash-event-switcher button.is-active {
border-color: var(--event-green);
background: var(--event-green);
color: #fff;
}
#overview-view .dash-event-switcher b { font-size: 12.5px; }
#overview-view .dash-event-switcher small { color: inherit; font-size: 10.5px; opacity: .72; }
#overview-view .dash-event-hero {
position: relative;
overflow: hidden;
padding: clamp(22px, 3vw, 34px);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 24px;
background:
radial-gradient(circle at 92% 7%, rgba(231, 240, 233, .16), transparent 30%),
linear-gradient(138deg, var(--event-green-deep), var(--event-green));
color: #fff;
box-shadow: 0 18px 40px rgba(23, 55, 42, .14);
}
#overview-view .dash-event-hero::after {
content: "";
position: absolute;
right: -55px;
bottom: -95px;
width: 230px;
height: 230px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 50%;
box-shadow: 0 0 0 28px rgba(255, 255, 255, .025), 0 0 0 58px rgba(255, 255, 255, .018);
pointer-events: none;
}
#overview-view .dash-event-day.is-prepare .dash-event-hero {
background:
radial-gradient(circle at 92% 7%, rgba(255, 215, 178, .18), transparent 31%),
linear-gradient(138deg, #1d4434, #315f4b);
}
#overview-view .dash-event-day.is-prepare .dash-event-kicker i {
background: #f4bf72;
box-shadow: 0 0 0 5px rgba(244, 191, 114, .13);
}
#overview-view .dash-event-hero-top {
position: relative;
z-index: 1;
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
#overview-view .dash-event-hero-top > div { min-width: 0; }
#overview-view .dash-event-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .72);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .12em;
}
#overview-view .dash-event-kicker i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffaf96;
box-shadow: 0 0 0 5px rgba(255, 175, 150, .12);
}
#overview-view .dash-event-hero h2 {
max-width: 760px;
margin: 12px 0 0;
color: #fff;
font-family: var(--font-display);
font-size: clamp(30px, 4.6vw, 52px);
line-height: .98;
letter-spacing: -.045em;
overflow-wrap: anywhere;
}
#overview-view .dash-event-hero p {
max-width: 700px;
margin: 14px 0 0;
color: rgba(255, 255, 255, .77);
font-size: 13.5px;
line-height: 1.58;
}
#overview-view .dash-event-classic {
min-height: 46px;
flex: 0 0 auto;
padding: 0 15px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 12px;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: 11.5px;
font-weight: 800;
}
#overview-view .dash-event-classic:hover,
#overview-view .dash-event-classic:focus-visible { background: rgba(255, 255, 255, .16); }
#overview-view .dash-event-metrics {
position: relative;
z-index: 1;
max-width: 760px;
margin-top: 24px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 15px;
background: rgba(7, 27, 19, .16);
overflow: hidden;
}
#overview-view .dash-event-metrics > span {
min-width: 0;
padding: 11px 14px;
display: flex;
align-items: baseline;
gap: 7px;
}
#overview-view .dash-event-metrics > span + span { border-left: 1px solid rgba(255, 255, 255, .1); }
#overview-view .dash-event-metrics b { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
#overview-view .dash-event-metrics small { color: rgba(255, 255, 255, .62); font-size: 10.5px; }
#overview-view .dash-event-metrics .has-attention b { color: #ffb29d; }
#overview-view .dash-event-focus {
min-width: 0;
padding: 18px 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 18px;
border: 1px solid var(--event-line);
border-left: 4px solid var(--event-green);
border-radius: 18px;
background: #fff;
box-shadow: 0 9px 24px rgba(36, 75, 59, .06);
}
#overview-view .dash-event-focus.is-live { border-left-color: var(--event-coral); background: #fffaf7; }
#overview-view .dash-event-focus-copy { min-width: 0; }
#overview-view .dash-event-focus-copy > span,
#overview-view .dash-event-focus.is-empty > div > span {
color: var(--event-coral);
font-size: 10px;
font-weight: 850;
letter-spacing: .09em;
text-transform: uppercase;
}
#overview-view .dash-event-focus h3 {
margin: 4px 0 0;
color: var(--event-green-deep);
font-family: var(--font-display);
font-size: clamp(20px, 2.4vw, 27px);
line-height: 1.08;
overflow-wrap: anywhere;
}
#overview-view .dash-event-focus p { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.48; }
#overview-view .dash-event-focus-facts { display: flex; align-items: stretch; }
#overview-view .dash-event-focus-facts > span { min-width: 112px; padding: 3px 14px; display: grid; gap: 3px; border-left: 1px solid var(--event-line); }
#overview-view .dash-event-focus-facts small { color: var(--muted); font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
#overview-view .dash-event-focus-facts b { color: var(--event-green-deep); font-size: 12px; }
#overview-view .dash-event-focus .btn { min-height: 46px; white-space: nowrap; }
#overview-view .dash-event-focus.is-empty { grid-template-columns: minmax(0, 1fr) auto; }
#overview-view .dash-event-grid {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1.42fr) minmax(290px, .78fr);
gap: 18px;
align-items: start;
}
#overview-view .dash-event-side-stack { min-width: 0; display: grid; gap: 18px; }
#overview-view .dash-event-panel {
min-width: 0;
overflow: hidden;
border: 1px solid var(--event-line);
border-radius: 19px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 8px 24px rgba(36, 75, 59, .045);
}
#overview-view .dash-event-panel > header {
min-width: 0;
min-height: 72px;
padding: 15px 17px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
border-bottom: 1px solid var(--event-line);
}
#overview-view .dash-event-panel > header > div { min-width: 0; }
#overview-view .dash-event-panel > header span { color: var(--event-coral); font-size: 9.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
#overview-view .dash-event-panel > header h3 { margin: 3px 0 0; color: var(--event-green-deep); font-family: var(--font-display); font-size: 18px; line-height: 1.15; }
#overview-view .dash-event-panel > header button { min-height: 46px; padding: 0 4px; border: 0; background: transparent; color: var(--event-green); font-size: 11px; font-weight: 800; }
#overview-view .dash-event-attention > header > b { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--event-mint); color: var(--event-green); font-size: 11px; }
#overview-view .dash-event-block-list { padding: 7px 10px 11px; }
#overview-view .dash-event-block {
width: 100%;
min-width: 0;
min-height: 72px;
padding: 10px 8px;
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 26px;
align-items: center;
gap: 10px;
border: 0;
border-bottom: 1px solid rgba(36, 75, 59, .09);
border-radius: 11px;
background: transparent;
color: var(--ink);
text-align: left;
}
#overview-view .dash-event-block:last-child { border-bottom-color: transparent; }
#overview-view .dash-event-block:hover,
#overview-view .dash-event-block:focus-visible { background: var(--event-paper); }
#overview-view .dash-event-block.is-current { background: #fff4ef; box-shadow: inset 3px 0 0 var(--event-coral); }
#overview-view .dash-event-block.is-done { opacity: .58; }
#overview-view .dash-event-block-time { min-width: 0; display: grid; justify-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
#overview-view .dash-event-block-time b { color: var(--event-green-deep); font-size: 14px; }
#overview-view .dash-event-block-time small { color: var(--muted); font-size: 9.5px; }
#overview-view .dash-event-block-main { min-width: 0; display: grid; gap: 3px; }
#overview-view .dash-event-block-label { color: var(--event-coral); font-size: 8.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
#overview-view .dash-event-block-main > b { color: var(--event-green-deep); font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
#overview-view .dash-event-block-main > small { color: var(--muted); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; }
#overview-view .dash-event-block-main > em { color: #a84935; font-size: 10px; font-style: normal; font-weight: 750; line-height: 1.35; }
#overview-view .dash-event-block-open { display: grid; place-items: center; color: var(--event-green); font-size: 20px; }
#overview-view .dash-event-show-all { width: calc(100% - 20px); min-height: 44px; margin: 0 10px 10px; border: 1px solid var(--event-line); border-radius: 11px; background: var(--event-paper); color: var(--event-green); font-size: 11px; font-weight: 800; }
#overview-view .dash-event-empty { min-height: 150px; padding: 28px; display: grid; place-content: center; gap: 5px; text-align: center; }
#overview-view .dash-event-empty b { color: var(--event-green-deep); font-family: var(--font-display); font-size: 18px; }
#overview-view .dash-event-empty span { max-width: 390px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#overview-view .dash-event-supply-count {
min-width: 74px;
min-height: 34px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
border-radius: 999px;
background: var(--event-mint);
color: var(--event-green);
font-size: 10px;
white-space: nowrap;
}
#overview-view .dash-event-supply-count strong { color: var(--event-coral); font-size: 13px; }
#overview-view .dash-event-supply-summary {
padding: 13px 17px 12px;
display: grid;
gap: 8px;
border-bottom: 1px solid var(--event-line);
background: #f6faf7;
}
#overview-view .dash-event-supply-summary > div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#overview-view .dash-event-supply-summary > div > span { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
#overview-view .dash-event-supply-summary b { color: var(--event-green-deep); font-size: 14px; font-variant-numeric: tabular-nums; }
#overview-view .dash-event-supply-summary small { color: var(--muted); font-size: 10.5px; }
#overview-view .dash-event-supply-summary em { color: var(--event-green); font-size: 10.5px; font-style: normal; font-weight: 800; text-align: right; }
#overview-view .dash-event-supply-progress { width: 100%; height: 7px; display: block; overflow: hidden; border-radius: 999px; background: rgba(36, 75, 59, .1); }
#overview-view .dash-event-supply-progress i { height: 100%; display: block; border-radius: inherit; background: var(--event-green); }
#overview-view .dash-event-supply-summary p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
#overview-view .dash-event-supply-groups { padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: start; }
#overview-view .dash-event-supply-group {
min-width: 0;
overflow: hidden;
border: 1px solid var(--event-line);
border-radius: 14px;
background: rgba(255, 255, 255, .9);
}
#overview-view .dash-event-supply-group.is-personal { border-color: rgba(36, 75, 59, .28); background: #f7fbf7; }
#overview-view .dash-event-supply-group.is-unassigned { border-color: rgba(217, 111, 86, .3); background: #fffaf7; }
#overview-view .dash-event-supply-group.is-ready { grid-column: 1 / -1; background: #fbfcfa; }
#overview-view .dash-event-supply-group > header,
#overview-view .dash-event-supply-group > summary {
min-width: 0;
min-height: 68px;
padding: 10px 11px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
background: rgba(231, 240, 233, .38);
}
#overview-view .dash-event-supply-group.is-unassigned > header { background: rgba(255, 232, 223, .5); }
#overview-view .dash-event-supply-group > summary { grid-template-columns: 38px minmax(0, 1fr) auto 18px; cursor: pointer; list-style: none; }
#overview-view .dash-event-supply-group > summary::-webkit-details-marker { display: none; }
#overview-view .dash-event-supply-group-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--event-green); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: -.02em; }
#overview-view .dash-event-supply-group.is-unassigned .dash-event-supply-group-avatar { background: var(--event-coral); }
#overview-view .dash-event-supply-group.is-ready .dash-event-supply-group-avatar { background: var(--event-mint); color: var(--event-green); font-size: 14px; }
#overview-view .dash-event-supply-group-copy { min-width: 0; display: grid; gap: 2px; }
#overview-view .dash-event-supply-group-copy b { color: var(--event-green-deep); font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
#overview-view .dash-event-supply-group-copy small { color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
#overview-view .dash-event-supply-group > header > em,
#overview-view .dash-event-supply-group > summary > em { color: var(--event-green); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; }
#overview-view .dash-event-supply-group.is-unassigned > header > em { color: #a84935; }
#overview-view .dash-event-supply-group > summary > i { color: var(--event-green); font-size: 16px; font-style: normal; transition: transform .16s ease; }
#overview-view .dash-event-supply-group[open] > summary > i { transform: rotate(180deg); }
#overview-view .dash-event-supply-group-rows { min-width: 0; }
#overview-view .dash-event-supply-row {
width: 100%;
min-width: 0;
min-height: 86px;
padding: 10px 9px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 18px;
align-items: center;
gap: 9px;
border: 0;
border-top: 1px solid rgba(36, 75, 59, .09);
border-radius: 0;
background: transparent;
color: var(--ink);
text-align: left;
}
#overview-view .dash-event-supply-row:hover,
#overview-view .dash-event-supply-row:focus-visible { border-color: rgba(36, 75, 59, .34); background: var(--event-paper); }
#overview-view .dash-event-supply-row.is-ready { color: var(--muted); }
#overview-view .dash-event-supply-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--event-mint); color: var(--event-green); }
#overview-view .dash-event-supply-row.is-unassigned .dash-event-supply-icon { background: #ffe8df; color: #a84935; }
#overview-view .dash-event-supply-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#overview-view .dash-event-supply-main { min-width: 0; display: grid; gap: 3px; }
#overview-view .dash-event-supply-kind { color: var(--event-coral); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
#overview-view .dash-event-supply-main > b { color: var(--event-green-deep); font-size: 13px; line-height: 1.28; overflow-wrap: anywhere; }
#overview-view .dash-event-supply-detail { color: var(--muted); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; }
#overview-view .dash-event-supply-foot { min-width: 0; margin-top: 2px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
#overview-view .dash-event-supply-owner { min-width: 0; color: var(--event-green); font-size: 10.5px; font-style: normal; font-weight: 800; overflow-wrap: anywhere; }
#overview-view .dash-event-supply-owner.is-missing { color: #a84935; }
#overview-view .dash-event-supply-state { color: var(--muted); font-size: 10px; line-height: 1.3; text-align: right; overflow-wrap: anywhere; }
#overview-view .dash-event-supply-row > i { color: var(--event-green); font-size: 17px; font-style: normal; }
#overview-view .dash-event-supply-empty { min-height: 126px; }
#overview-view .dash-event-attention-list { padding: 10px; display: grid; gap: 9px; }
#overview-view .dash-event-attention-group { min-width: 0; overflow: hidden; border: 1px solid rgba(36, 75, 59, .11); border-radius: 12px; background: rgba(255, 255, 255, .78); }
#overview-view .dash-event-attention-group > header { min-height: 35px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(231, 240, 233, .38); }
#overview-view .dash-event-attention-group.is-help > header { background: rgba(255, 232, 223, .5); }
#overview-view .dash-event-attention-group > header b { color: var(--event-green); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
#overview-view .dash-event-attention-group.is-help > header b { color: #a84935; }
#overview-view .dash-event-attention-group > header span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--event-green); font-size: 9.5px; font-weight: 850; }
#overview-view .dash-event-attention-row {
width: 100%;
min-width: 0;
min-height: 58px;
padding: 8px 6px;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 18px;
align-items: center;
gap: 8px;
border: 0;
border-bottom: 1px solid rgba(36, 75, 59, .08);
background: transparent;
color: var(--ink);
text-align: left;
}
#overview-view .dash-event-attention-row:hover,
#overview-view .dash-event-attention-row:focus-visible { background: var(--event-paper); }
#overview-view .dash-event-attention-row > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: var(--event-mint); color: var(--event-green); font-size: 12px; font-weight: 900; }
#overview-view .dash-event-attention-row.is-help > span:first-child { background: #ffe6dd; color: #a84935; }
#overview-view .dash-event-attention-row.is-step > span:first-child { background: #f4eee0; color: #795f31; }
#overview-view .dash-event-attention-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
#overview-view .dash-event-attention-row b { color: var(--event-green-deep); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
#overview-view .dash-event-attention-row small { color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
#overview-view .dash-event-attention-row i { color: var(--event-green); font-size: 16px; font-style: normal; }
#overview-view .dash-event-calm { min-height: 134px; padding: 24px; display: flex; align-items: center; gap: 12px; }
#overview-view .dash-event-calm > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--event-mint); color: var(--event-green); font-weight: 900; }
#overview-view .dash-event-calm > div { min-width: 0; display: grid; gap: 3px; }
#overview-view .dash-event-calm b { color: var(--event-green-deep); font-size: 12px; }
#overview-view .dash-event-calm small { color: var(--muted); font-size: 10px; line-height: 1.4; }
#overview-view .dash-event-more { margin: 0; padding: 0 16px 13px; color: var(--muted); font-size: 9.5px; }
#overview-view .dash-event-contact-list { padding: 8px 11px 2px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#overview-view .dash-event-contact {
min-width: 0;
min-height: 62px;
padding: 9px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--event-line);
border-radius: 12px;
background: var(--event-paper);
color: var(--ink);
text-decoration: none;
}
#overview-view a.dash-event-contact:hover,
#overview-view a.dash-event-contact:focus-visible { border-color: rgba(36, 75, 59, .35); background: #fff; }
#overview-view .dash-event-contact > span { min-width: 0; display: grid; gap: 1px; }
#overview-view .dash-event-contact small { color: var(--event-coral); font-size: 8.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
#overview-view .dash-event-contact b { color: var(--event-green-deep); font-size: 11px; overflow-wrap: anywhere; }
#overview-view .dash-event-contact em { color: var(--muted); font-size: 9px; font-style: normal; overflow-wrap: anywhere; }
#overview-view .dash-event-contact > i { color: var(--event-green); font-size: 12px; font-style: normal; }
#overview-view .dash-event-crisis { margin: 9px 11px 2px; padding: 12px 13px; border-radius: 12px; background: #fff3ed; }
#overview-view .dash-event-crisis > span { color: #a84935; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
#overview-view .dash-event-crisis p { margin: 5px 0 0; color: #653b31; font-size: 10.5px; line-height: 1.45; white-space: pre-line; }
#overview-view .dash-event-crisis a { display: inline-flex; min-height: 46px; align-items: center; margin-top: 4px; color: #8e3d2d; font-size: 10px; font-weight: 800; }
#overview-view .dash-event-contact-actions { padding: 11px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#overview-view .dash-event-contact-actions .btn { min-width: 0; min-height: 46px; padding-inline: 10px; }
#overview-view .dash-event-return {
min-width: 0;
margin-bottom: 16px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid rgba(36, 75, 59, .17);
border-radius: 15px;
background: var(--event-mint, #e7f0e9);
}
#overview-view .dash-event-return > span { min-width: 0; display: grid; gap: 2px; }
#overview-view .dash-event-return small { color: var(--muted); font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
#overview-view .dash-event-return b { color: #244b3b; font-size: 13px; overflow-wrap: anywhere; }
#overview-view .dash-event-return .btn { min-height: 46px; flex: 0 0 auto; }
@media (max-width: 980px) {
#overview-view .dash-event-grid { grid-template-columns: minmax(0, 1fr); }
#overview-view .dash-event-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#overview-view .dash-event-focus { grid-template-columns: minmax(0, 1fr) auto; }
#overview-view .dash-event-focus-facts { grid-column: 1 / -1; grid-row: 2; }
#overview-view .dash-event-focus-facts > span:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
#overview-view .dash-event-day { gap: 12px; }
#overview-view .dash-event-hero { padding: 21px 18px 17px; border-radius: 19px; }
#overview-view .dash-event-hero-top { display: grid; gap: 15px; }
#overview-view .dash-event-hero h2 { margin-top: 10px; font-size: clamp(30px, 10vw, 42px); }
#overview-view .dash-event-hero p { margin-top: 11px; font-size: 12.5px; }
#overview-view .dash-event-classic { width: 100%; }
#overview-view .dash-event-metrics { max-width: none; margin-top: 18px; }
#overview-view .dash-event-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#overview-view .dash-event-metrics > span { padding: 10px 8px; display: grid; justify-items: center; gap: 1px; text-align: center; }
#overview-view .dash-event-metrics > span:nth-child(3) { border-left: 0; }
#overview-view .dash-event-metrics > span:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
#overview-view .dash-event-metrics b { font-size: 16px; }
#overview-view .dash-event-metrics small { font-size: 9px; }
#overview-view .dash-event-focus,
#overview-view .dash-event-focus.is-empty { padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 13px; }
#overview-view .dash-event-focus-facts { grid-column: auto; grid-row: auto; }
#overview-view .dash-event-focus-facts > span { min-width: 0; flex: 1 1 0; }
#overview-view .dash-event-focus .btn { width: 100%; }
#overview-view .dash-event-side-stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#overview-view .dash-event-panel { border-radius: 16px; }
#overview-view .dash-event-panel > header { min-height: 68px; padding: 13px 14px; }
#overview-view .dash-event-supply-summary { padding-inline: 14px; }
#overview-view .dash-event-supply-groups { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
#overview-view .dash-event-supply-row { min-height: 90px; }
#overview-view .dash-event-block-list { padding-inline: 6px; }
#overview-view .dash-event-block { min-height: 76px; grid-template-columns: 48px minmax(0, 1fr) 22px; padding: 10px 6px; gap: 8px; }
#overview-view .dash-event-contact-list { grid-template-columns: minmax(0, 1fr); }
#overview-view .dash-event-contact { min-height: 60px; }
#overview-view .dash-event-return { align-items: stretch; flex-direction: column; }
#overview-view .dash-event-return .btn { width: 100%; }
}
@media (max-width: 390px) {
#overview-view .dash-event-kicker { font-size: 9.5px; letter-spacing: .09em; }
#overview-view .dash-event-hero h2 { font-size: 30px; }
#overview-view .dash-event-metrics small { max-width: 66px; }
#overview-view .dash-event-focus-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#overview-view .dash-event-focus-facts > span { padding: 2px 8px; }
#overview-view .dash-event-contact-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
#overview-view .dash-event-day * { scroll-behavior: auto !important; }
}
#overview-view .dash-event-hero {
padding: clamp(20px, 2.7vw, 28px);
border-radius: 21px;
box-shadow: 0 13px 32px rgba(23, 55, 42, .12);
}
#overview-view .dash-event-hero-top { align-items: center; }
#overview-view .dash-event-hero h2 {
margin-top: 9px;
font-size: clamp(29px, 4vw, 44px);
line-height: 1;
}
#overview-view .dash-event-hero p {
max-width: 650px;
margin-top: 9px;
font-size: 12.5px;
line-height: 1.5;
}
#overview-view .dash-event-status {
position: relative;
z-index: 1;
max-width: 720px;
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
#overview-view .dash-event-status > span {
min-width: 0;
min-height: 42px;
padding: 8px 11px;
display: flex;
align-items: baseline;
gap: 7px;
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 11px;
background: rgba(7, 27, 19, .16);
}
#overview-view .dash-event-status b {
color: #fff;
font-size: 15px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#overview-view .dash-event-status small {
min-width: 0;
color: rgba(255, 255, 255, .66);
font-size: 10px;
line-height: 1.25;
overflow-wrap: anywhere;
}
#overview-view .dash-event-status .has-attention b { color: #ffc0ae; }
#overview-view .dash-event-work { background: rgba(255, 255, 255, .9); }
#overview-view .dash-event-work > header { min-height: 70px; }
#overview-view .dash-event-work-count {
min-width: 82px;
min-height: 36px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 999px;
background: var(--event-mint);
color: var(--event-green);
font-size: 10px;
white-space: nowrap;
}
#overview-view .dash-event-work-count strong {
color: var(--event-coral);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
#overview-view .dash-event-work .dash-event-supply-summary {
padding: 12px 17px;
border-bottom-color: rgba(36, 75, 59, .1);
background: #f7faf6;
}
#overview-view .dash-event-work-body {
min-width: 0;
padding: 12px;
display: grid;
gap: 10px;
}
#overview-view .dash-event-work-section {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(36, 75, 59, .13);
border-radius: 15px;
background: #fff;
}
#overview-view .dash-event-work-section.is-personal {
border-color: rgba(36, 75, 59, .3);
box-shadow: inset 3px 0 0 var(--event-green);
}
#overview-view .dash-event-work-section.is-help {
border-color: rgba(217, 111, 86, .28);
box-shadow: inset 3px 0 0 var(--event-coral);
}
#overview-view .dash-event-work-section.is-unassigned {
border-color: rgba(201, 139, 65, .3);
box-shadow: inset 3px 0 0 #c98b41;
}
#overview-view .dash-event-work-section > header {
min-width: 0;
min-height: 58px;
padding: 9px 12px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
background: rgba(231, 240, 233, .34);
}
#overview-view .dash-event-work-section.is-help > header { background: rgba(255, 236, 229, .5); }
#overview-view .dash-event-work-section.is-unassigned > header { background: rgba(252, 242, 223, .58); }
#overview-view .dash-event-work-section > header > span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--event-green);
color: #fff;
font-size: 10px;
font-weight: 900;
}
#overview-view .dash-event-work-section.is-help > header > span { background: var(--event-coral); font-size: 13px; }
#overview-view .dash-event-work-section.is-unassigned > header > span { background: #b77932; font-size: 13px; }
#overview-view .dash-event-work-section > header > div { min-width: 0; display: grid; gap: 2px; }
#overview-view .dash-event-work-section > header b { color: var(--event-green-deep); font-size: 12.5px; line-height: 1.25; }
#overview-view .dash-event-work-section > header small { color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
#overview-view .dash-event-work-section > header em {
min-width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 999px;
background: #fff;
color: var(--event-green);
font-size: 10px;
font-style: normal;
font-weight: 850;
}
#overview-view .dash-event-work-rows { min-width: 0; }
#overview-view .dash-event-work-row {
width: 100%;
min-width: 0;
min-height: 64px;
padding: 8px 10px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 20px;
align-items: center;
gap: 9px;
border: 0;
border-top: 1px solid rgba(36, 75, 59, .09);
border-radius: 0;
background: transparent;
color: var(--ink);
text-align: left;
}
#overview-view .dash-event-work-row:hover,
#overview-view .dash-event-work-row:focus-visible { background: var(--event-paper); }
#overview-view .dash-event-work-row-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--event-mint);
color: var(--event-green);
font-size: 12px;
font-weight: 900;
}
#overview-view .dash-event-work-row.is-help .dash-event-work-row-icon { background: #ffe8df; color: #a84935; }
#overview-view .dash-event-work-row.is-step .dash-event-work-row-icon { background: #f4eee0; color: #795f31; }
#overview-view .dash-event-work-row-main { min-width: 0; display: grid; gap: 2px; }
#overview-view .dash-event-work-row-main small { color: var(--event-coral); font-size: 8.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
#overview-view .dash-event-work-row-main b { color: var(--event-green-deep); font-size: 12.5px; line-height: 1.28; overflow-wrap: anywhere; }
#overview-view .dash-event-work-row-main em { color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.35; overflow-wrap: anywhere; }
#overview-view .dash-event-work-row > i { color: var(--event-green); font-size: 17px; font-style: normal; }
#overview-view .dash-event-work .dash-event-supply-row.is-compact {
min-height: 68px;
padding: 8px 10px;
grid-template-columns: 34px minmax(0, 1fr) 20px;
border-top-color: rgba(36, 75, 59, .09);
}
#overview-view .dash-event-work .dash-event-supply-row.is-compact .dash-event-supply-kind { font-size: 8.5px; }
#overview-view .dash-event-work .dash-event-supply-row.is-compact .dash-event-supply-main > b { font-size: 12.5px; }
#overview-view .dash-event-work .dash-event-supply-row.is-compact .dash-event-supply-foot { justify-content: flex-start; }
#overview-view .dash-event-work .dash-event-supply-row.is-compact .dash-event-supply-state { text-align: left; }
#overview-view .dash-event-work-calm {
min-height: 70px;
padding: 13px 15px;
display: flex;
align-items: center;
gap: 11px;
border: 1px solid rgba(36, 75, 59, .13);
border-radius: 15px;
background: #f7faf6;
}
#overview-view .dash-event-work-calm > span {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--event-mint);
color: var(--event-green);
font-weight: 900;
}
#overview-view .dash-event-work-calm > div { min-width: 0; display: grid; gap: 2px; }
#overview-view .dash-event-work-calm b { color: var(--event-green-deep); font-size: 12px; }
#overview-view .dash-event-work-calm small { color: var(--muted); font-size: 10px; line-height: 1.4; }
#overview-view .dash-event-team-heading {
padding: 7px 3px 1px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
#overview-view .dash-event-team-heading span { color: var(--event-green-deep); font-size: 11px; font-weight: 850; }
#overview-view .dash-event-team-heading small { color: var(--muted); font-size: 9.5px; text-align: right; }
#overview-view .dash-event-team-list { display: grid; gap: 7px; }
#overview-view .dash-event-team-person {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(36, 75, 59, .12);
border-radius: 13px;
background: rgba(255, 255, 255, .84);
}
#overview-view .dash-event-team-person > summary {
min-width: 0;
min-height: 58px;
padding: 8px 11px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto 18px;
align-items: center;
gap: 9px;
list-style: none;
cursor: pointer;
}
#overview-view .dash-event-team-person > summary::-webkit-details-marker { display: none; }
#overview-view .dash-event-team-person > summary > span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--event-green);
color: #fff;
font-size: 9px;
font-weight: 900;
}
#overview-view .dash-event-team-person > summary > div { min-width: 0; display: grid; gap: 1px; }
#overview-view .dash-event-team-person > summary b { color: var(--event-green-deep); font-size: 12px; overflow-wrap: anywhere; }
#overview-view .dash-event-team-person > summary small { color: var(--muted); font-size: 9.5px; }
#overview-view .dash-event-team-person > summary em { color: var(--event-green); font-size: 10px; font-style: normal; font-weight: 850; }
#overview-view .dash-event-team-person > summary i { color: var(--event-green); font-size: 15px; font-style: normal; transition: transform .16s ease; }
#overview-view .dash-event-team-person[open] > summary { background: rgba(231, 240, 233, .28); }
#overview-view .dash-event-team-person[open] > summary i { transform: rotate(180deg); }
#overview-view .dash-event-team-person.is-ready { background: #fafcf9; }
#overview-view .dash-event-team-person.is-ready > summary > span { background: var(--event-mint); color: var(--event-green); font-size: 13px; }
#overview-view .dash-event-more.is-work { margin: -2px 2px 2px; padding: 0 12px 8px; }
#overview-view .dash-event-grid { grid-template-columns: minmax(0, 1.48fr) minmax(270px, .72fr); }
#overview-view .dash-event-contacts .dash-event-contact-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) {
#overview-view .dash-event-grid { grid-template-columns: minmax(0, 1fr); }
#overview-view .dash-event-contacts .dash-event-contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
#overview-view .dash-event-hero { padding: 18px 16px 15px; }
#overview-view .dash-event-hero-top { gap: 12px; }
#overview-view .dash-event-hero h2 { margin-top: 8px; font-size: clamp(28px, 9vw, 36px); }
#overview-view .dash-event-hero p { margin-top: 8px; font-size: 12px; }
#overview-view .dash-event-status { max-width: none; margin-top: 13px; gap: 5px; }
#overview-view .dash-event-status > span { min-height: 55px; padding: 7px 6px; display: grid; align-content: center; justify-items: center; gap: 1px; text-align: center; }
#overview-view .dash-event-status b { font-size: 14px; }
#overview-view .dash-event-status small { font-size: 8.5px; }
#overview-view .dash-event-work-body { padding: 8px; gap: 8px; }
#overview-view .dash-event-work-section > header { min-height: 62px; padding-inline: 9px; }
#overview-view .dash-event-work-row,
#overview-view .dash-event-work .dash-event-supply-row.is-compact { min-height: 70px; padding-inline: 8px; }
#overview-view .dash-event-team-person > summary { min-height: 62px; }
#overview-view .dash-event-team-heading { display: grid; gap: 2px; }
#overview-view .dash-event-team-heading small { text-align: left; }
#overview-view .dash-event-contacts .dash-event-contact-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 350px) {
#overview-view .dash-event-status small { font-size: 8px; }
#overview-view .dash-event-work-count { min-width: 72px; padding-inline: 8px; }
#overview-view .dash-event-work-section > header { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; }
#overview-view .dash-event-team-person > summary { grid-template-columns: 32px minmax(0, 1fr) auto 15px; gap: 6px; padding-inline: 8px; }
}
#overview-view .dash-event-day.is-return {
--event-coral: #b66d2e;
}
#overview-view .dash-event-day.is-return .dash-event-hero {
background:
radial-gradient(circle at 92% 7%, rgba(255, 222, 169, .17), transparent 31%),
linear-gradient(138deg, #263b32, #3d5749);
}
#overview-view .dash-event-day.is-return .dash-event-kicker i {
background: #efb86c;
box-shadow: 0 0 0 5px rgba(239, 184, 108, .14);
}
#overview-view .dash-event-focus.is-return {
border-left-color: #b66d2e;
background: #fffaf2;
}
#overview-view .dash-event-focus.is-return.is-complete {
border-left-color: var(--event-green);
background: #f7fbf7;
grid-template-columns: minmax(0, 1fr) auto;
}
#overview-view .dash-event-work.is-return > header {
border-bottom-color: rgba(182, 109, 46, .16);
background: #fffaf2;
}
#overview-view .dash-event-work-count.is-return {
background: #f7ead7;
color: #7a4c26;
}
#overview-view .dash-event-work-count.is-return strong { color: #a45724; }
#overview-view .dash-event-supply-summary.is-return { background: #f7f4e9; }
#overview-view .dash-event-supply-summary.is-return .dash-event-supply-progress { background: rgba(182, 109, 46, .13); }
#overview-view .dash-event-supply-summary.is-return .dash-event-supply-progress i { background: #6d8c70; }
#overview-view .dash-event-supply-summary.is-return p strong { color: #9b5928; }
#overview-view .dash-event-supply-row.is-return .dash-event-supply-kind { color: #a45d27; }
#overview-view .dash-event-supply-row.is-return.is-pending .dash-event-supply-icon { background: #f7ead7; color: #9b5928; }
#overview-view .dash-event-supply-row.is-return.is-unknown .dash-event-supply-icon { background: #f4eed5; color: #856c22; }
#overview-view .dash-event-supply-row.is-return.is-returned { opacity: .72; }
#overview-view .dash-event-supply-row.is-return.is-returned .dash-event-supply-icon { background: #e3eee0; color: var(--event-green); }
#overview-view .dash-event-supply-row.is-return.is-not-brought { opacity: .66; }
#overview-view .dash-event-supply-row.is-return .dash-event-supply-state { color: #80502b; font-weight: 760; }
#overview-view .dash-event-supply-row.is-return.is-returned .dash-event-supply-state { color: var(--event-green); }
#overview-view .dash-event-personal-more {
min-width: 0;
border-top: 1px solid rgba(36, 75, 59, .09);
}
#overview-view .dash-event-personal-more > summary {
min-width: 0;
min-height: 50px;
padding: 8px 11px 8px 54px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 18px;
align-items: center;
gap: 8px;
background: rgba(231, 240, 233, .28);
color: var(--event-green);
cursor: pointer;
list-style: none;
font-size: 10.5px;
font-weight: 800;
}
#overview-view .dash-event-personal-more > summary::-webkit-details-marker { display: none; }
#overview-view .dash-event-personal-more > summary b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #fff; font-size: 10px; }
#overview-view .dash-event-personal-more > summary i { font-size: 15px; font-style: normal; transition: transform .16s ease; }
#overview-view .dash-event-personal-more[open] > summary i { transform: rotate(180deg); }
#overview-view .dash-event-personal-more[open] > summary { background: rgba(231, 240, 233, .52); }
#overview-view .dash-event-team-person.is-returned { background: #fafcf9; }
#overview-view .dash-event-team-person.is-returned > summary > span { background: var(--event-mint); color: var(--event-green); font-size: 13px; }
#overview-view .dash-event-return.is-return { border-color: rgba(182, 109, 46, .22); background: #f7ead7; }
@media (max-width: 700px) {
#overview-view .dash-event-focus.is-return.is-complete { grid-template-columns: minmax(0, 1fr); }
#overview-view .dash-event-personal-more > summary { min-height: 54px; padding-left: 52px; }
}
@media (max-width: 350px) {
#overview-view .dash-event-personal-more > summary { padding-left: 45px; font-size: 9.5px; }
}